Merge branch 'staging' of https://github.com/BioAnalyticResource/ePlant

BioAnalyticResource · Jan 4, 2024 · e123d6e · e123d6e
2 parents 7a50bc1 + 1f85b5a
commit e123d6e
Show file tree

Hide file tree

Showing 78 changed files with 3,067 additions and 1,854 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -22,6 +22,6 @@ module.exports = {
   rules: {
     '@typescript-eslint/no-empty-function': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-unused-vars': 'off'
+    '@typescript-eslint/no-unused-vars': 'off',
   },
 }
diff --git a/.gitignore b/.gitignore
@@ -102,3 +102,4 @@ dist
 
 # TernJS port file
 .tern-port
+.vscode/settings.json
diff --git a/Eplant/Eplant.tsx b/Eplant/Eplant.tsx
@@ -4,11 +4,13 @@ import {
   Box,
   CircularProgress,
   Container,
+  CssBaseline,
   Drawer,
   DrawerProps,
   IconButton,
   LinearProgress,
   Tooltip,
+  ThemeProvider,
 } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import * as FlexLayout from 'flexlayout-react'
@@ -20,7 +22,7 @@ import {
   TabSetNode,
 } from 'flexlayout-react'
 import * as React from 'react'
-import { Route, Routes, useParams, useSearchParams } from 'react-router-dom'
+import { Route, Routes, useSearchParams } from 'react-router-dom'
 import { useConfig } from './config'
 import GeneticElement from './GeneticElement'
 import {
@@ -31,15 +33,17 @@ import {
   getPaneName,
   storage,
   useModel,
-  pageLoad,
   usePageLoad,
+  useDarkMode,
 } from './state'
 import TabsetPlaceholder from './UI/Layout/TabsetPlaceholder'
 import { ViewContainer } from './UI/Layout/ViewContainer'
 import { LeftNav } from './UI/LeftNav'
 import FallbackView from './views/FallbackView'
 import { Theme } from '@mui/system'
 import ErrorBoundary from './util/ErrorBoundary'
+import { dark, light } from './theme'
+
 
 // TODO: Make this drawer support opening/closing on mobile
 
@@ -87,7 +91,7 @@ function ViewTab(props: {
     }${v ? v.name : 'No view'}`
     if (props.layout && props.layout.node.getName() != targetName) {
       props.layout.model.doAction(
-        Actions.renameTab(props.layout.node.getId(), targetName)
+        Actions.renameTab(props.layout.node.getId(), targetName),
       )
     }
   })
@@ -138,7 +142,7 @@ function ViewTab(props: {
  */
 const factory: (
   node: FlexLayout.TabNode,
-  model: FlexLayout.Model
+  model: FlexLayout.Model,
 ) => JSX.Element | undefined = (node, model) => {
   const id = node.getId() as string
   return (
@@ -159,13 +163,18 @@ const factory: (
 
 export default function Eplant() {
   const { rootPath } = useConfig()
+  const [darkMode, setDarkMode] = useDarkMode()
+
   return (
-    <Routes>
-      <Route path={rootPath}>
-        <Route index element={<MainEplant />} />
-        <Route path="pane" element={<DirectPane />} />
-      </Route>
-    </Routes>
+    <ThemeProvider theme={darkMode ? dark : light}>
+      <CssBaseline />
+      <Routes>
+        <Route path={rootPath}>
+          <Route index element={<MainEplant />} />
+          <Route path="pane" element={<DirectPane />} />
+        </Route>
+      </Routes>
+    </ThemeProvider>
   )
 }
 
@@ -430,7 +439,7 @@ function EplantLayout() {
         component: 'view',
         id,
         type: 'tab',
-      }
+      },
     )
   }
 
@@ -449,7 +458,7 @@ function EplantLayout() {
 
   function onRenderTabSet(
     node: TabSetNode | BorderNode,
-    renderValues: ITabSetRenderValues
+    renderValues: ITabSetRenderValues,
   ) {
     if (node.getChildren().length == 0) return
     renderValues.stickyButtons.push(
@@ -481,7 +490,7 @@ function EplantLayout() {
 function updateColors(theme: Theme) {
   ;(
     Array.from(
-      document.getElementsByClassName('flexlayout__layout')
+      document.getElementsByClassName('flexlayout__layout'),
     ) as HTMLDivElement[]
   ).map((el) => {
     el.style.setProperty('--color-text', theme.palette.text.primary)
@@ -490,7 +499,7 @@ function updateColors(theme: Theme) {
     el.style.setProperty('--color-primary', theme.palette.primary.main)
     el.style.setProperty(
       '--color-primary-light',
-      theme.palette.primary.pale ?? theme.palette.primary.main
+      theme.palette.primary.pale ?? theme.palette.primary.main,
     )
     el.style.setProperty('--color-1', theme.palette.background.default)
     el.style.setProperty('--color-2', theme.palette.background.paper)

diff --git a/Eplant/GeneticElement.ts b/Eplant/GeneticElement.ts
@@ -17,7 +17,7 @@ export default class GeneticElement {
     id: string,
     annotation: string,
     species: Species,
-    aliases: string[]
+    aliases: string[],
   ) {
     this.id = id
     this.annotation = annotation
@@ -39,7 +39,7 @@ export default class GeneticElement {
       geneticElement.id,
       geneticElement.annotation,
       Species.getSpecies(geneticElement.species) as Species,
-      geneticElement.aliases
+      geneticElement.aliases,
     )
   }
 }
@@ -53,7 +53,7 @@ export type SpeciesApi = {
   loaders: {
     [key: string]: (
       gene: GeneticElement,
-      loadEvent: (amount: number) => void
+      loadEvent: (amount: number) => void,
     ) => Promise<any>
   }
 }
@@ -77,7 +77,7 @@ export class Species {
 
   static getGene(
     speciesId: string,
-    geneId: string
+    geneId: string,
   ): Promise<GeneticElement | null> {
     const species = Species.getSpecies(speciesId)
     if (!species) return Promise.resolve(null)

diff --git a/Eplant/Species/arabidopsis/index.ts b/Eplant/Species/arabidopsis/index.ts
@@ -15,7 +15,7 @@ async function autocomplete(s: string) {
   return (
     await axios.get(
       'https://bar.utoronto.ca/eplant/cgi-bin/idautocomplete.cgi?species=Arabidopsis_thaliana&term=' +
-        s
+        s,
     )
   ).data
 }
@@ -24,15 +24,15 @@ async function searchGene(s: string) {
   const data = (
     await axios.get(
       'https://bar.utoronto.ca/eplant/cgi-bin/querygene.cgi?species=Arabidopsis_thaliana&term=' +
-        s
+        s,
     )
   ).data
   if (!data.id || !data.annotation || !data.aliases) return null
   const gene = new GeneticElement(
     data.id,
     data.annotation,
     arabidopsis,
-    data.aliases
+    data.aliases,
   )
   return gene
 }

diff --git a/Eplant/Species/arabidopsis/loaders/GeneInfoView/index.ts b/Eplant/Species/arabidopsis/loaders/GeneInfoView/index.ts
@@ -4,7 +4,7 @@ import { View } from '@eplant/View'
 
 const loader: View<GeneInfoViewData>['getInitialData'] = async (
   geneticElement,
-  loadEvent
+  loadEvent,
 ) => {
   if (!geneticElement)
     throw new TypeError('A gene must be provided for the GeneInfoView')
@@ -14,7 +14,7 @@ const loader: View<GeneInfoViewData>['getInitialData'] = async (
     axios
       .get(
         `https://bar.utoronto.ca/webservices/bar_araport/` +
-          `gene_summary_by_locus.php?locus=${geneticElement.id}`
+          `gene_summary_by_locus.php?locus=${geneticElement.id}`,
       )
       .then((d) => {
         loaded++
@@ -25,7 +25,7 @@ const loader: View<GeneInfoViewData>['getInitialData'] = async (
     axios
       .get<{ features: GeneFeature[] }>(
         `https://bar.utoronto.ca/webservices/bar_araport/` +
-          `gene_structure_by_locus.php?locus=${geneticElement.id}`
+          `gene_structure_by_locus.php?locus=${geneticElement.id}`,
       )
       .then((d) => {
         loaded++
@@ -37,7 +37,7 @@ const loader: View<GeneInfoViewData>['getInitialData'] = async (
     axios
       .get(
         `https://bar.utoronto.ca/webservices/bar_araport/` +
-          `get_sequence_by_identifier.php?locus=${geneticElement.id}`
+          `get_sequence_by_identifier.php?locus=${geneticElement.id}`,
       )
       .then((d) => {
         loaded++
@@ -61,7 +61,8 @@ const loader: View<GeneInfoViewData>['getInitialData'] = async (
   }
 
   // Find the type of the genetic element
-  let geneticElementType: GeneInfoViewData['geneticElementType'] = parentFeatType as GeneInfoViewData['geneticElementType']
+  let geneticElementType: GeneInfoViewData['geneticElementType'] =
+    parentFeatType as GeneInfoViewData['geneticElementType']
   if (parentFeatType == 'gene') {
     geneticElementType = 'non_coding'
     if (childFeatType == 'mRNA') geneticElementType = 'protein_coding'
@@ -75,7 +76,7 @@ const loader: View<GeneInfoViewData>['getInitialData'] = async (
     proteinSequence = (
       await axios.get(
         `https://bar.utoronto.ca/webservices/bar_araport/` +
-          `get_protein_sequence_by_identifier.php?locus=${geneticElement.id}.1`
+          `get_protein_sequence_by_identifier.php?locus=${geneticElement.id}.1`,
       )
     ).data.result[0].sequence
     loadEvent(1)

diff --git a/Eplant/Species/arabidopsis/loaders/PublicationViewer/index.ts b/Eplant/Species/arabidopsis/loaders/PublicationViewer/index.ts
@@ -8,7 +8,7 @@ import { View } from '@eplant/View'
 
 const loader: View<PublicationViewerData>['getInitialData'] = async (
   geneticElement,
-  loadEvent
+  loadEvent,
 ) => {
   if (!geneticElement)
     throw new TypeError('A gene must be provided for the publication viewer')
@@ -18,7 +18,7 @@ const loader: View<PublicationViewerData>['getInitialData'] = async (
     axios
       .get<{ result: PublicationData[] }>(
         `https://bar.utoronto.ca/webservices/bar_araport/` +
-          `publications_by_locus.php?locus=${geneticElement.id}`
+          `publications_by_locus.php?locus=${geneticElement.id}`,
       )
       .then((d) => {
         loaded++
@@ -28,7 +28,7 @@ const loader: View<PublicationViewerData>['getInitialData'] = async (
     axios
       .get<{ result: GeneRIFsData[] }>(
         `https://bar.utoronto.ca/webservices/bar_araport/` +
-          `generifs_by_locus.php?locus=${geneticElement.id}`
+          `generifs_by_locus.php?locus=${geneticElement.id}`,
       )
       .then((d) => {
         loaded++

diff --git a/Eplant/UI/Dropdown.tsx b/Eplant/UI/Dropdown.tsx
@@ -35,7 +35,7 @@ const StyledMenu = styled((props: MenuProps) => (
       '&:active': {
         backgroundColor: alpha(
           theme.palette.primary.main,
-          theme.palette.action.selectedOpacity
+          theme.palette.action.selectedOpacity,
         ),
       },
     },

diff --git a/Eplant/UI/GeneticElementComponent.tsx b/Eplant/UI/GeneticElementComponent.tsx
@@ -10,11 +10,10 @@ import {
   Paper,
   Stack,
   Theme,
-  ThemeProvider,
   Typography,
   useTheme,
 } from '@mui/material'
-import React, { SVGProps, useEffect, useId, useRef, useState } from 'react'
+import React, { useEffect, useId, useRef, useState } from 'react'
 import OptionsButton from './OptionsButton'
 
 /**
@@ -23,7 +22,6 @@ import OptionsButton from './OptionsButton'
  * @param {(BoxProps & { hover: boolean })} props Set hover to whether or not the genetic element component is hovered
  */
 function SelectedIndicator(props: BoxProps & { hover: boolean }) {
-  const theme = useTheme()
   return (
     <Box {...props} position={'relative'}>
       <Box

diff --git a/Eplant/UI/Layout/FailedToLoad.tsx b/Eplant/UI/Layout/FailedToLoad.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
 import { View } from '../../View'
-import { Add, Start } from '@mui/icons-material'
-import { Color, Stack, useTheme, Button, Typography, Link } from '@mui/material'
-import Box from '@mui/material/Box'
+import { Stack, useTheme, Typography, Link } from '@mui/material'
 import { SVGProps } from 'react'
 import GeneticElement from '@eplant/GeneticElement'
 

diff --git a/Eplant/UI/Layout/TabsetPlaceholder.tsx b/Eplant/UI/Layout/TabsetPlaceholder.tsx
@@ -1,5 +1,5 @@
 import { Add } from '@mui/icons-material'
-import { Color, Stack, useTheme, Button } from '@mui/material'
+import { Stack, useTheme, Button } from '@mui/material'
 import Box from '@mui/material/Box'
 import * as React from 'react'
 import { SVGProps } from 'react'

diff --git a/Eplant/UI/Layout/ViewContainer/ViewOptions.tsx b/Eplant/UI/Layout/ViewContainer/ViewOptions.tsx
@@ -1,10 +1,8 @@
 import GeneticElement from '@eplant/GeneticElement'
-import { View, ViewProps, ViewDispatch } from '@eplant/View'
-import { useViewData } from '@eplant/View/viewData'
-import { CircularProgress, Divider, MenuItem } from '@mui/material'
+import { View, ViewDispatch } from '@eplant/View'
+import { MenuItem } from '@mui/material'
 import React from 'react'
 import Dropdown from '@eplant/UI/Dropdown'
-import delayed from '@eplant/util/delayed'
 
 export default function ViewOptions<T, S, A>({
   view,
Original file line number	Diff line number	Diff line change
Expand Up		@@ -102,3 +102,4 @@ dist

		# TernJS port file
		.tern-port
		.vscode/settings.json