-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
a bunch of changes that aren't working right now
- Loading branch information
Showing
16 changed files
with
654 additions
and
278 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,150 @@ | ||
| // import useStateWithStorage from '@eplant/util/useStateWithStorage' | ||
| import { Route, Routes } from 'react-router-dom' | ||
|
|
||
| import { CssBaseline, ThemeProvider } from '@mui/material' | ||
| import { useEffect, useState } from 'react' | ||
| import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom' | ||
|
|
||
| import { | ||
| Box, | ||
| CircularProgress, | ||
| CssBaseline, | ||
| ThemeProvider, | ||
| useTheme, | ||
| } from '@mui/material' | ||
|
|
||
| import { dark, light } from './css/theme' | ||
| import Sidebar from './UI/Sidebar' | ||
| import { ViewContainer } from './UI/Layout/ViewContainer' | ||
| import Sidebar, { collapsedSidebarWidth, sidebarWidth } from './UI/Sidebar' | ||
| import { ViewDataError } from './View/viewData' | ||
| import FallbackView from './views/FallbackView' | ||
| import { useConfig } from './config' | ||
| import EplantLayout from './EplantLayout' | ||
| import { useDarkMode } from './state' | ||
| import { | ||
| useActiveGeneId, | ||
| useActiveViewId, | ||
| useDarkMode, | ||
| useGeneticElements, | ||
| usePageLoad, | ||
| useSidebarState, | ||
| useSpecies, | ||
| } 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 [activeGeneId, setActiveGeneId] = useActiveGeneId() | ||
| const [activeViewId, setActiveViewId] = useState<string>('') | ||
| const [isCollapse, setIsCollapse] = useSidebarState() | ||
| const [genes, setGenes] = useGeneticElements() | ||
| const theme = useTheme() | ||
| const [globalProgress, loaded] = usePageLoad() | ||
| const config = useConfig() | ||
| const navigate = useNavigate() | ||
| const location = useLocation() | ||
| const params = useParams() | ||
| const [speciesList] = useSpecies() | ||
| useEffect(() => { | ||
| if (loaded) { | ||
| updateColors(theme) | ||
| } | ||
| }, [theme, loaded]) | ||
| // On app url change, make sure loaded gene and view aligns with URL | ||
| useEffect(() => { | ||
| const loadGene = async (geneid: string) => { | ||
| // TODO: This is super jank, should probably write some better utilities for loading genes | ||
| const species = speciesList.find( | ||
| (species) => species.name === 'Arabidopsis' | ||
| ) | ||
| const gene = await species?.api.searchGene(geneid) | ||
| if (gene) { | ||
| setGenes([...genes, gene]) | ||
| } | ||
| } | ||
| if (params.geneid) { | ||
| if (params.geneid !== activeGeneId) { | ||
| if (!genes.find((gene) => gene.id === params.geneid)) { | ||
| loadGene(params.geneid) | ||
| } | ||
| setActiveGeneId(params.geneid) | ||
| } | ||
| } else { | ||
| setActiveGeneId('') | ||
| } | ||
| setActiveViewId(location.pathname.split('/')[1]) | ||
| }, [location.pathname]) | ||
|
|
||
| // On active gene change update the gene path segment | ||
| useEffect(() => { | ||
| const pathSegments = location.pathname.split('/') | ||
| const geneid = activeGeneId ? activeGeneId : '' | ||
| if (pathSegments.length == 3) { | ||
| pathSegments[pathSegments.length - 1] = geneid | ||
| } else if (pathSegments.length == 2) { | ||
| pathSegments.push(geneid) | ||
| } | ||
|
|
||
| const newPath = pathSegments.join('/') + location.search | ||
| if (newPath !== location.pathname + location.search) { | ||
| navigate(newPath) | ||
| } | ||
| }, [activeGeneId]) | ||
|
|
||
| // SideBar and EplantLayout children | ||
| export function MainEplant() { | ||
| return ( | ||
| <> | ||
| <ThemeProvider theme={darkMode ? dark : light}> | ||
| <CssBaseline /> | ||
| <Sidebar /> | ||
| <EplantLayout /> | ||
| </> | ||
| <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 | ||
| gene={genes.find((gene) => gene.id === activeGeneId) ?? null} | ||
| view={ | ||
| config.views.find( | ||
| (view) => view.id === (activeViewId ?? config.defaultView) | ||
| ) ?? FallbackView | ||
| } | ||
| setView={(viewid) => { | ||
| setActiveViewId(viewid) | ||
| }} | ||
| sx={{ | ||
| width: '100%', | ||
| height: '100%', | ||
| }} | ||
| ></ViewContainer> | ||
| ) : ( | ||
| <div> | ||
| <CircularProgress | ||
| variant='indeterminate' | ||
| value={globalProgress * 100} | ||
| /> | ||
| </div> | ||
| )} | ||
| </Box> | ||
| </Box> | ||
| </ThemeProvider> | ||
| ) | ||
| } | ||
| export default Eplant |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import GeneticElement from '@eplant/GeneticElement' | ||
|
|
||
| export type ViewContext = { | ||
| geneticElement: GeneticElement | null | ||
| setLoadAmount: (loaded: number) => void | ||
| setIsLoading: (isLoading: boolean) => void | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.