Epic Branch Final Step: Merge Epic Branch into Staging

.eslintrc.cjs

@@ -28,14 +28,14 @@ module.exports = {
     'simple-import-sort/imports': 'error',
     'simple-import-sort/exports': 'error',
   },
-  'overrides': [
+  overrides: [
     {
-      'files': ['**/*.js', '**/*.ts', '**/*.tsx'],
-      'rules': {
+      files: ['**/*.js', '**/*.ts', '**/*.tsx'],
+      rules: {
         'simple-import-sort/imports': [
           'error',
           {
-            'groups': [
+            groups: [
               // `react` first, `next` second, then packages starting with a character
               ['^react$', '^next', '^[a-z]'],
               // Packages starting with `@`
@@ -49,16 +49,16 @@ module.exports = {
               // Style imports
               ['^.+\\.s?css$'],
               // Side effect imports
-              ['^\\u0000']
-            ]
-          }
-        ]
-      }
-    }
+              ['^\\u0000'],
+            ],
+          },
+        ],
+      },
+    },
   ],
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
 }

.github/workflows/node.js.yml

@@ -5,13 +5,12 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ['main']
   pull_request:
-    branches: [ "main" ]
+    branches: ['main']
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -20,12 +19,12 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm test
-    - run: npm run build
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm test
+      - run: npm run build

.prettierrc

@@ -4,5 +4,5 @@
   "semi": false,
   "singleQuote": true,
   "jsxSingleQuote": true,
-  "trailingComma":"es5"
+  "trailingComma": "es5"
 }

CONTRIBUTING.md

@@ -4,6 +4,7 @@ First off, thank you for considering contributing to ePlant! By submitting your
 agree that it can be shared under the terms of our license.
 
 ### Code of Conduct
+
 Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
 
 ## How to Contribute
@@ -39,7 +40,7 @@ We welcome feature requests! To suggest a new feature, please open an issue on G
    ```bash
    git remote add upstream https://github.com/BioAnalyticResource/ePlant
    ```
-4. **Verify versions**: Most folks are working with _Node v18.0.0^ and npm 9.8.0^. [You can install Node from here.](https://nodejs.org/en/download/package-manager)
+4. **Verify versions**: Most folks are working with \_Node v18.0.0^ and npm 9.8.0^. [You can install Node from here.](https://nodejs.org/en/download/package-manager)
    ```bash
    node -v
    npm -v
@@ -54,12 +55,13 @@ We welcome feature requests! To suggest a new feature, please open an issue on G
    ```
 
 ### Submitting changes
+
 1. **Create a branch**
    ```bash
    git checkout -b your-branch-name
    ```
 2. **Make changes**: Make changes in your forked repository.
-3.  **Test your changes**: Make sure your changes are working correctly.
+3. **Test your changes**: Make sure your changes are working correctly.
 4. **Commit your changes**:
    ```bash
    git commit -m "Your commit message"
@@ -80,19 +82,23 @@ Please include in the PR:
 - **Notes (Optional)**: Additional notes.
 
 ### Code Style
+
 This is an abridged version of the [Google style guide](https://google.github.io/styleguide/tsguide.html) and [MS Typescript Coding guidelines](https://github.com/microsoft/TypeScript/wiki/Coding-guidelines), plus some tweaks to make it our own.
 
 Use Prettier and ESLint for code formatting. You may want to install the plugin for your IDE to get live feedback and you can configure your IDE to apply auto formatting when you save a file. Using the tsconfig.json file, you can customize the rules for type checking. Avoid removing and/or ignoring default rules as much as possible. If you feel strongly about a rule please outline the changes into a PR and we can discuss the merits of introducing a new change.
 
 All the new code must be written in typescript and all the types should be clearly defined in the project.
 
 ### Documentation
+
 If your change affects any part of the documentation, please update the `README.md` accordingly.
 
 ### Testing
+
 Make sure to run all tests before submitting your changes. If you add new functionality, please include tests for it.
 
 ### Getting Help
+
 If you need help, feel free to ask questions by opening an issue. We appreciate your contributions!
 
 Thank you for contributing to ePlant!

Eplant/Eplant.tsx

@@ -1,40 +1,90 @@
 // import useStateWithStorage from '@eplant/util/useStateWithStorage'
-import { Route, Routes } from 'react-router-dom'
 
-import { CssBaseline, ThemeProvider } from '@mui/material'
+import { useEffect } from 'react'
+
+import { Box, CircularProgress, CssBaseline, useTheme } from '@mui/material'
+import { ThemeProvider } from '@mui/material/styles'
 
 import { dark, light } from './css/theme'
-import Sidebar from './UI/Sidebar'
+import { URLStateProvider } from './state/URLStateProvider'
+import { ViewContainer } from './UI/Layout/ViewContainer'
+import Sidebar, { collapsedSidebarWidth, sidebarWidth } from './UI/Sidebar'
 import { useConfig } from './config'
-import EplantLayout from './EplantLayout'
-import { useDarkMode } from './state'
+import {
+  useActiveGeneId,
+  useActiveViewId,
+  useDarkMode,
+  useGeneticElements,
+  usePageLoad,
+  useSidebarState,
+} from './state'
+import { updateColors } from './updateColors'
 export type EplantProps = Record<string, never>
-export default function Eplant() {
-  const { rootPath } = useConfig()
-  const [darkMode] = useDarkMode()
 
-  return (
-    <ThemeProvider theme={darkMode ? dark : light}>
-      <CssBaseline />
-      <Routes>
-        <Route path={rootPath}>
-          <Route index element={<MainEplant />} />
-        </Route>
-      </Routes>
-    </ThemeProvider>
-  )
-}
 /**
  * The main Eplant component. This is the root of the application. It contains the left nav and the layout.
  * @returns {JSX.Element} The rendered Eplant component
  */
+const Eplant = () => {
+  const [darkMode] = useDarkMode()
+  const [isCollapse, setIsCollapse] = useSidebarState()
+  const [activeGeneId, setActiveGeneId] = useActiveGeneId()
+  const [activeViewId, setActiveViewId] = useActiveViewId()
+  const theme = useTheme()
+  const [globalProgress, loaded] = usePageLoad()
+  const config = useConfig()
+  useEffect(() => {
+    if (loaded) {
+      updateColors(theme)
+    }
+  }, [theme, loaded])
 
-// SideBar and EplantLayout children
-export function MainEplant() {
   return (
-    <>
+    <ThemeProvider theme={darkMode ? dark : light}>
+      <CssBaseline />
       <Sidebar />
-      <EplantLayout />
-    </>
+      <URLStateProvider>
+        <Box
+          sx={(theme) => ({
+            height: `calc(100% - ${theme.spacing(1)})`,
+            left: `${isCollapse ? collapsedSidebarWidth : sidebarWidth}px`,
+            right: '0px',
+            position: 'absolute',
+            marginTop: '0.5rem',
+            boxSizing: 'border-box',
+            transition: 'left 1s ease-out',
+            backgroundColor: theme.palette.background.paper,
+          })}
+        >
+          <Box
+            sx={{
+              width: '100%',
+              height: '100%',
+              display: 'flex',
+              alignItems: 'stretch',
+              justifyContent: 'stretch',
+            }}
+          >
+            <div />
+            {loaded ? (
+              <ViewContainer
+                sx={{
+                  width: '100%',
+                  height: '100%',
+                }}
+              ></ViewContainer>
+            ) : (
+              <div>
+                <CircularProgress
+                  variant='indeterminate'
+                  value={globalProgress * 100}
+                />
+              </div>
+            )}
+          </Box>
+        </Box>
+      </URLStateProvider>
+    </ThemeProvider>
   )
 }
+export default Eplant

Eplant/GeneticElement.ts

@@ -50,12 +50,6 @@ export default class GeneticElement {
 export type SpeciesApi = {
   searchGene: (term: string) => Promise<GeneticElement | null>
   autocomplete: (term: string) => Promise<string[]>
-  loaders: {
-    [key: string]: (
-      gene: GeneticElement,
-      loadEvent: (amount: number) => void
-    ) => Promise<any>
-  }
 }
 
 /**

Eplant/Species/arabidopsis/index.ts

@@ -3,15 +3,9 @@ import axios from 'axios'
 import { Species } from '@eplant/GeneticElement'
 import GeneticElement from '@eplant/GeneticElement'
 
-import GeneInfoViewLoader from './loaders/GeneInfoView'
-import ArabidopsisPublicationViewer from './loaders/PublicationViewer'
 const arabidopsis: Species = new Species('Arabidopsis', {
   autocomplete,
   searchGene,
-  loaders: {
-    'gene-info': GeneInfoViewLoader,
-    'publication-viewer': ArabidopsisPublicationViewer,
-  },
 })
 async function autocomplete(s: string) {
   return (