Major Change: Routing

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 (