Merge pull request #34 from nleroy917/dev

Minor Updates + Bugs

web/.eslintrc.json

@@ -0,0 +1,13 @@
+{
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "rules": {
+    // I suggest you add those two rules:
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "error"
+  }
+}

web/.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false
+}

web/.vscode/settings.json

@@ -1,8 +1,10 @@
 {
   "css.validate": false,
-  "editor.formatOnSave": true,
   "editor.tabSize": 2,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true
-  }
+    "source.fixAll": true,
+    "source.fixAll.eslint": true
+  },
+  "editor.formatOnSave": true, // Tell VSCode to format files on save
+  "editor.defaultFormatter": "esbenp.prettier-vscode" // Tell VSCode to use Prettier as default file formatter
 }

web/commitlint.config.js

@@ -21,4 +21,4 @@ module.exports = {
       ],
     ],
   },
-};
+}

web/index.d.ts

@@ -1,28 +1,27 @@
 /// <reference types="@types/react" />
 
 export interface Species {
-  id: number;
-  name: string;
-  type: string | null;
+  id: number
+  name: string
+  type: string | null
 }
 
 export interface Weights {
-  [id: number]: number;
+  [id: number]: number
 }
 
 export interface QueryResult {
   best_expression_ad: {
-    [id: string]: number;
-  };
+    [id: string]: number
+  }
   best_expression_sd: {
-    [id: string]: number;
-  };
-  optimized_ad: string;
-  optimized_sd: string;
-  peptide_seq: string;
-  seq_type: string;
-  stop_codon: 0; 
-
+    [id: string]: number
+  }
+  optimized_ad: string
+  optimized_sd: string
+  peptide_seq: string
+  seq_type: string
+  stop_codon: 0
 }
 
 export interface QueryError {
@@ -31,8 +30,8 @@ export interface QueryError {
 }
 
 export interface ServerInfo {
-  message: string;
-  url: string;
-  version: string;
-  fastapi_version: string;
+  message: string
+  url: string
+  version: string
+  fastapi_version: string
 }

web/next.config.js

@@ -2,4 +2,4 @@ module.exports = {
   eslint: {
     dirs: ['src'],
   },
-};
+}

web/package.json

@@ -17,6 +17,7 @@
     "postbuild": "next-sitemap"
   },
   "dependencies": {
+    "@headlessui/react": "^1.6.5",
     "@tailwindcss/forms": "^0.3.4",
     "@types/debounce-promise": "^3.1.4",
     "@types/lodash.debounce": "^4.0.6",
@@ -39,15 +40,15 @@
     "@types/node": "^17.0.18",
     "@types/react": "^17.0.30",
     "@types/tailwindcss": "^2.2.1",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^4.33.0",
     "eslint": "^7.32.0",
     "eslint-config-next": "^11.1.2",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "lint-staged": "^11.2.3",
     "next-sitemap": "^1.6.184",
-    "prettier": "^2.4.1",
+    "prettier": "^2.7.1",
     "standard-version": "^9.3.1",
     "tailwindcss": "^2.2.17",
     "typescript": "^4.4.4"

web/postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}

web/public/site.webmanifest

@@ -1 +1,19 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

web/src/components/CodonUsageModal.tsx

@@ -0,0 +1,135 @@
+import { Dialog } from '@headlessui/react'
+import axios, { AxiosResponse } from 'axios'
+import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
+
+interface CodonUsage {
+  organism: {
+    org_id: number
+    division: string
+    assembly: string
+    taxid: number
+    species: string
+    organelle: string
+    translation_table: number
+    num_CDS: number
+    num_codons: number
+    GC_perc: number
+    GC1_perc: number
+    GC2_perc: number
+    GC3_perc: number
+  }
+  counts: {
+    [aa: string]: {
+      [codon: string]: number
+    }
+  }
+  codon_usage: {
+    [aa: string]: {
+      [codon: string]: number
+    }
+  }
+}
+
+interface Props {
+  open: boolean
+  setOpen: Dispatch<SetStateAction<boolean>>
+  orgId: number | string
+}
+
+async function fetchCodonUsage(
+  orgId: number | string,
+  setCodonUsage: Dispatch<SetStateAction<CodonUsage | undefined>>,
+  setLoading: Dispatch<SetStateAction<boolean>>
+) {
+  // call API
+  setLoading(true)
+  const res: AxiosResponse<CodonUsage> = await axios.get(
+    `${process.env.NEXT_PUBLIC_API_URL}/species/${orgId}/codons`
+  )
+  setCodonUsage(await res.data)
+  setLoading(false)
+}
+
+export const CodonUsageModal: FC<Props> = (props) => {
+  const { open, setOpen, orgId } = props
+  const [loading, setLoading] = useState<boolean>(false)
+  const [codonUsage, setCodonUsage] = useState<CodonUsage>()
+  const [selectedCodon, setSelectedCodon] = useState<string>('')
+
+  useEffect(() => {
+    if (open) {
+      fetchCodonUsage(orgId, setCodonUsage, setLoading)
+    }
+  }, [open, orgId, setCodonUsage])
+  return (
+    <Dialog
+      open={open}
+      onClose={() => setOpen(false)}
+      className="relative z-50"
+    >
+      {/* The backdrop, rendered as a fixed sibling to the panel container */}
+      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
+      {/* Full-screen container to center the panel */}
+      <div className="fixed inset-0 flex items-center justify-center p-4">
+        <Dialog.Panel className="max-w-lg p-2 mx-auto bg-white border-2 border-black rounded-md w-96 min-w-md">
+          <Dialog.Title className="border-b border-black">
+            <h4 className="text-xl">
+              Codon Usage for <span className="font-bold">{orgId}</span>
+            </h4>
+          </Dialog.Title>
+          {codonUsage === undefined || loading ? (
+            <div className="w-full p-4">
+              <div className="w-full text-center animate-pulse">
+                Fetching...
+              </div>
+            </div>
+          ) : (
+            <div className="my-2">
+              <select
+                className="px-3 py-0 rounded-md"
+                value={selectedCodon}
+                onChange={(e) => setSelectedCodon(e.target.value)}
+              >
+                <option value={''}>Select Codon</option>
+                {Object.keys(codonUsage.codon_usage).map((aa) => (
+                  <option key={aa} value={aa}>
+                    {aa.toUpperCase()}
+                  </option>
+                ))}
+              </select>
+              <div className="p-1 my-2">
+                {selectedCodon === '' ? (
+                  <div>
+                    <p className="italic">Select a codon above</p>
+                  </div>
+                ) : (
+                  Object.keys(codonUsage.codon_usage[selectedCodon]).map(
+                    (c) => {
+                      return (
+                        <div key={c}>
+                          <span className="mr-1 font-bold">{c}:</span>
+                          <span>
+                            {Math.round(
+                              codonUsage.codon_usage[selectedCodon][c] * 100
+                            )}
+                            %
+                          </span>
+                        </div>
+                      )
+                    }
+                  )
+                )}
+              </div>
+            </div>
+          )}
+          <button
+            className="px-4 py-1 text-white transition-all bg-blue-600 rounded-md hover:bg-blue-700"
+            onClick={() => setOpen(false)}
+          >
+            Close
+          </button>
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  )
+}