From adac7f14ebe156cbf27c1879a5a05a420506cb57 Mon Sep 17 00:00:00 2001
From: Yukthi <yukthi.wickramarachchi@mail.utoronto.ca>
Date: Sat, 5 Oct 2024 14:02:25 -0400
Subject: [PATCH] a bunch of changes that aren't working right now

---
 Eplant/Eplant.tsx                             | 158 ++++++-
 Eplant/EplantLayout.tsx                       |  13 +-
 Eplant/UI/Layout/ViewContainer/index.tsx      |  58 ++-
 Eplant/UI/Layout/ViewContainer/types.ts       |   7 +
 Eplant/UI/Layout/ViewNotSupported.tsx         |   6 +-
 Eplant/UI/Sidebar.tsx                         |   5 +-
 Eplant/{config.ts => config.tsx}              |  16 +-
 Eplant/main.tsx                               |  37 +-
 Eplant/util/router/index.ts                   |  13 +
 Eplant/views/CellEFP/CellEFP.tsx              | 164 +++++++
 .../views/CellEFP/CellEFPDataObject/index.tsx |   1 +
 Eplant/views/CellEFP/index.tsx                |   4 +-
 Eplant/views/CellEFP/types.tsx                |   6 +
 Eplant/views/eFP/Viewer/index.tsx             |   2 +-
 package-lock.json                             | 432 ++++++++++--------
 package.json                                  |  10 +-
 16 files changed, 654 insertions(+), 278 deletions(-)
 create mode 100644 Eplant/UI/Layout/ViewContainer/types.ts
 rename Eplant/{config.ts => config.tsx} (84%)
 create mode 100644 Eplant/util/router/index.ts
 create mode 100644 Eplant/views/CellEFP/CellEFP.tsx

diff --git a/Eplant/Eplant.tsx b/Eplant/Eplant.tsx
index 01acf77d..38a7ab00 100644
--- a/Eplant/Eplant.tsx
+++ b/Eplant/Eplant.tsx
@@ -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
diff --git a/Eplant/EplantLayout.tsx b/Eplant/EplantLayout.tsx
index 7695e53f..8c03fe4b 100644
--- a/Eplant/EplantLayout.tsx
+++ b/Eplant/EplantLayout.tsx
@@ -1,14 +1,5 @@
-import { useContext, useEffect, useRef, useState } from 'react'
-import * as FlexLayout from 'flexlayout-react'
-import {
-  Actions,
-  BorderNode,
-  ITabSetRenderValues,
-  Layout,
-  TabSetNode,
-} from 'flexlayout-react'
+import { useEffect } from 'react'
 
-import { Add, CallMade, Close } from '@mui/icons-material'
 import { Box, CircularProgress, IconButton } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 
@@ -71,7 +62,7 @@ const EplantLayout = () => {
               ) ?? FallbackView
             }
             setView={(view) => {
-              setActiveViewId(view.id)
+              setActiveViewId(view)
             }}
             sx={{
               width: '100%',
diff --git a/Eplant/UI/Layout/ViewContainer/index.tsx b/Eplant/UI/Layout/ViewContainer/index.tsx
index cfa2d111..9e59f112 100644
--- a/Eplant/UI/Layout/ViewContainer/index.tsx
+++ b/Eplant/UI/Layout/ViewContainer/index.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useId, useMemo, useState } from 'react'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
 
 import { useConfig } from '@eplant/config'
 import GeneticElement from '@eplant/GeneticElement'
@@ -26,6 +27,7 @@ import Box, { BoxProps } from '@mui/material/Box'
 import { View } from '../../../View'
 
 import LoadingPage from './LoadingPage'
+import { ViewContext } from './types'
 import ViewOptions from './ViewOptions'
 
 /**
@@ -43,16 +45,19 @@ export function ViewContainer<T, S, A>({
   ...props
 }: {
   view: View<T, S, A>
-  setView: (view: View) => void
+  setView: (viewid: string) => void
   gene: GeneticElement | null
 } & BoxProps) {
-  const { activeData, error, loading, loadingAmount, dispatch, state } =
-    useViewData(view, gene)
+  // const { activeData, error, dispatch, state } = useViewData(view, gene)
+  const [loading, setLoading] = useState(false)
+  const [loadAmount, setLoadAmount] = useState(0)
   const idLabel = useId()
   const selectId = useId()
   const [printing, setPrinting] = usePrinting()
 
   const [viewingCitations, setViewingCitations] = useState(false)
+  const navigate = useNavigate()
+  const location = useLocation()
 
   const { userViews, views, genericViews } = useConfig()
 
@@ -64,7 +69,6 @@ export function ViewContainer<T, S, A>({
       }, 100)
     }
   }, [printing])
-
   const topBar = useMemo(
     () => (
       <AppBar
@@ -121,7 +125,15 @@ export function ViewContainer<T, S, A>({
                 id={selectId}
                 onChange={(e) => {
                   const view = views.find((view) => view.id == e?.target?.value)
-                  if (view) setView(view)
+                  if (view) {
+                    const pathSegments = location.pathname.split('/')
+                    pathSegments[1] = view.id
+                    const newPath = pathSegments.join('/')
+                    if (newPath !== location.pathname + location.search) {
+                      setView(view.id)
+                      navigate(newPath)
+                    }
+                  }
                 }}
                 sx={{
                   '& .MuiSelect-select': {
@@ -183,7 +195,7 @@ export function ViewContainer<T, S, A>({
                       }}
                       key={view.name}
                       onClick={(e) => {
-                        if (view) setView(view)
+                        if (view) setView(view.id)
                       }}
                     >
                       {view.name}
@@ -194,13 +206,13 @@ export function ViewContainer<T, S, A>({
             </FormControl>
           </Stack>
 
-          <ViewOptions
+          {/* <ViewOptions
             gene={gene}
             state={state}
             view={view}
             loading={loading}
             dispatch={dispatch}
-          />
+          /> */}
           <Button
             variant='text'
             sx={{
@@ -222,10 +234,10 @@ export function ViewContainer<T, S, A>({
             disabled={loading}
             color='secondary'
             onClick={() => {
-              downloadFile(
-                `${view.id}${gene ? '-' + gene.id : ''}.json`,
-                JSON.stringify(activeData, null, 2)
-              )
+              // downloadFile(
+              //   `${view.id}${gene ? '-' + gene.id : ''}.json`,
+              //   JSON.stringify(activeData, null, 2)
+              // )
             }}
           >
             Download data
@@ -233,7 +245,7 @@ export function ViewContainer<T, S, A>({
         </Toolbar>
       </AppBar>
     ),
-    [view.id, gene?.id, loading, activeData, state, dispatch]
+    [view.id, gene?.id, loading]
   )
   return (
     <Box {...props} display='flex' flexDirection='column'>
@@ -243,7 +255,8 @@ export function ViewContainer<T, S, A>({
         </DialogTitle>
         <DialogContent>
           {view.citation ? (
-            <view.citation state={state} activeData={activeData} gene={gene} />
+            // <view.citation state={state} activeData={activeData} gene={gene} />
+            <div></div>
           ) : (
             <Box>No information provided for this view</Box>
           )}
@@ -283,21 +296,28 @@ export function ViewContainer<T, S, A>({
       >
         <ErrorBoundary>
           {/* Only show the gene header if a gene is selected and this view belongs to the gene */}
-          {loading || activeData === undefined ? (
+          {loading ? (
             <LoadingPage
-              loadingAmount={loadingAmount}
+              loadingAmount={loadAmount}
               gene={gene}
               view={view}
-              error={error}
+              error={null}
             />
           ) : (
             <>
-              <view.component
+              {/* <view.component
                 state={state}
                 geneticElement={gene}
                 activeData={activeData}
                 dispatch={dispatch}
-              />
+              /> */}
+              <Outlet
+                context={{
+                  geneticElement: gene,
+                  setLoadAmount: setLoadAmount,
+                  setIsLoading: setLoading,
+                }}
+              ></Outlet>
             </>
           )}
         </ErrorBoundary>
diff --git a/Eplant/UI/Layout/ViewContainer/types.ts b/Eplant/UI/Layout/ViewContainer/types.ts
new file mode 100644
index 00000000..0259c324
--- /dev/null
+++ b/Eplant/UI/Layout/ViewContainer/types.ts
@@ -0,0 +1,7 @@
+import GeneticElement from '@eplant/GeneticElement'
+
+export type ViewContext = {
+  geneticElement: GeneticElement | null
+  setLoadAmount: (loaded: number) => void
+  setIsLoading: (isLoading: boolean) => void
+}
diff --git a/Eplant/UI/Layout/ViewNotSupported.tsx b/Eplant/UI/Layout/ViewNotSupported.tsx
index 73af0a2a..7403177c 100644
--- a/Eplant/UI/Layout/ViewNotSupported.tsx
+++ b/Eplant/UI/Layout/ViewNotSupported.tsx
@@ -28,7 +28,7 @@ const Illustration = ({
  */
 export default function NotSupported(props: {
   geneticElement: GeneticElement | null
-  view: View
+  viewName: string
 }) {
   const theme = useTheme()
   return (
@@ -45,7 +45,7 @@ export default function NotSupported(props: {
 
       <Typography variant='h6'>
         {props.geneticElement
-          ? `Cannot view ${props.view.name.toLowerCase()} for ${
+          ? `Cannot view ${props.viewName.toLowerCase()} for ${
               props.geneticElement.id
             }`
           : `There is no gene selected`}
@@ -58,7 +58,7 @@ export default function NotSupported(props: {
       >
         {props.geneticElement
           ? 'No data is available for this gene.'
-          : `The ${props.view.name.toLowerCase()} requires a selected gene.`}
+          : `The ${props.viewName.toLowerCase()} requires a selected gene.`}
       </Typography>
     </Stack>
   )
diff --git a/Eplant/UI/Sidebar.tsx b/Eplant/UI/Sidebar.tsx
index 256ecc0f..9a6d23c2 100644
--- a/Eplant/UI/Sidebar.tsx
+++ b/Eplant/UI/Sidebar.tsx
@@ -38,8 +38,11 @@ export default function Sidebar() {
           }}
         >
           <LeftNav
-            onSelectGene={(gene: SerializedGeneticElement) =>
+            onSelectGene={(gene: SerializedGeneticElement) => {
+              
               setActiveGeneId(gene.id)
+
+            }
             }
             selectedGene={activeGeneId}
           />
diff --git a/Eplant/config.ts b/Eplant/config.tsx
similarity index 84%
rename from Eplant/config.ts
rename to Eplant/config.tsx
index 8ef5012c..b7b62409 100644
--- a/Eplant/config.ts
+++ b/Eplant/config.tsx
@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react'
 
 import CellEFP from './views/CellEFP'
+import { CellEFPView } from './views/CellEFP/CellEFP'
 import ChromosomeViewer from './views/ChromosomeViewer'
 import DebugView from './views/DebugView'
 import ExperimentEFP from './views/ExperimentEFP'
@@ -9,6 +10,7 @@ import GeneInfoView from './views/GeneInfoView'
 import GetStartedView from './views/GetStartedView'
 import PlantEFP from './views/PlantEFP'
 import PublicationViewer from './views/PublicationViewer'
+import GeneticElement from './GeneticElement'
 import { type View } from './View'
 
 export type EplantConfig = {
@@ -26,13 +28,13 @@ const genericViews = [GetStartedView, FallbackView]
 // List of views that a user can select from
 // Can contain views from the genericViews list too
 const userViews = [
-  GeneInfoView,
-  PublicationViewer,
-  DebugView,
-  PlantEFP,
+  // GeneInfoView,
+  // PublicationViewer,
+  // DebugView,
+  // PlantEFP,
   CellEFP,
-  ExperimentEFP,
-  ChromosomeViewer,
+  // ExperimentEFP,
+  // ChromosomeViewer,
 ]
 
 // List of views that are used to lookup a view by id
@@ -43,7 +45,7 @@ export const defaultConfig = {
   userViews,
   views,
   rootPath: import.meta.env.BASE_URL,
-  defaultView: 'gene-info',
+  defaultView: 'cell-efp',
   defaultSpecies: '',
 }
 
diff --git a/Eplant/main.tsx b/Eplant/main.tsx
index 1543bc73..e61007d7 100644
--- a/Eplant/main.tsx
+++ b/Eplant/main.tsx
@@ -1,22 +1,47 @@
 import * as React from 'react'
 import { Provider } from 'jotai'
 import * as ReactDOM from 'react-dom/client'
-import { BrowserRouter } from 'react-router-dom'
+import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom'
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+import ErrorBoundary from './util/ErrorBoundary'
+import { CellEFPView } from './views/CellEFP/CellEFP'
 import { Config, defaultConfig } from './config'
 import Eplant from './Eplant'
 
 import './css/index.css'
 
+const router = createBrowserRouter([
+  {
+    path: import.meta.env.BASE_URL,
+    element: <Eplant />,
+    children: [
+      {
+        path: '/:geneid?',
+        element: <Navigate to={'/cell-efp/'} replace={true}></Navigate>,
+        index: true,
+      },
+      {
+        path: '/cell-efp/:geneid?',
+        element: <CellEFPView></CellEFPView>,
+      },
+    ],
+    errorElement: <ErrorBoundary></ErrorBoundary>,
+  },
+])
+
+const queryClient = new QueryClient()
+
 function RootApp() {
   return (
     <React.StrictMode>
       <Provider>
-        <BrowserRouter>
-          <Config.Provider value={defaultConfig}>
-            <Eplant />
-          </Config.Provider>
-        </BrowserRouter>
+        <Config.Provider value={defaultConfig}>
+          <QueryClientProvider client={queryClient}>
+            <RouterProvider router={router} />
+          </QueryClientProvider>
+        </Config.Provider>
       </Provider>
     </React.StrictMode>
   )
diff --git a/Eplant/util/router/index.ts b/Eplant/util/router/index.ts
new file mode 100644
index 00000000..2b60fae2
--- /dev/null
+++ b/Eplant/util/router/index.ts
@@ -0,0 +1,13 @@
+export const flattenState = (
+  obj: { [key: string]: any },
+  res: { [key: string]: any } = {}
+) => {
+  for (const key in obj) {
+    if (typeof obj[key] === 'object' && obj[key] !== null) {
+      flattenState(obj[key], res)
+    } else {
+      res[key] = obj[key]
+    }
+  }
+  return res
+}
diff --git a/Eplant/views/CellEFP/CellEFP.tsx b/Eplant/views/CellEFP/CellEFP.tsx
new file mode 100644
index 00000000..cdcbb9d9
--- /dev/null
+++ b/Eplant/views/CellEFP/CellEFP.tsx
@@ -0,0 +1,164 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useOutletContext, useSearchParams } from 'react-router-dom'
+
+import GeneticElement from '@eplant/GeneticElement'
+import { ViewContext } from '@eplant/UI/Layout/ViewContainer/types'
+import NotSupported from '@eplant/UI/Layout/ViewNotSupported'
+import PanZoom from '@eplant/util/PanZoom'
+import { flattenState } from '@eplant/util/router'
+import { ViewDataError } from '@eplant/View/viewData'
+import { Box, Typography } from '@mui/material'
+import { useQuery } from '@tanstack/react-query'
+
+import Legend from '../eFP/Viewer/legend'
+
+import { CellEFPDataObject } from './CellEFPDataObject'
+import { CellEFPViewerData, CellEFPViewerState } from './types'
+
+export const CellEFPView = () => {
+  const { geneticElement, setIsLoading, setLoadAmount } =
+    useOutletContext<ViewContext>()
+
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [viewState, setViewState] = useState<CellEFPViewerState>({
+    transform: {
+      offset: {
+        x: parseInt(searchParams.get('x') || '0') || 0,
+        y: parseInt(searchParams.get('y') || '0') || 0,
+      },
+      zoom: parseInt(searchParams.get('zoom') || '0') || 0,
+    },
+  })
+  const { data, isLoading, isError, error } = useQuery<CellEFPViewerData>({
+    queryKey: [`cellEFP-${geneticElement}`],
+    queryFn: async () => {
+      if (!geneticElement) {
+        console.log('throwing error')
+        throw Error('No gene')
+      }
+      const data = await cellEFPLoader(geneticElement, setLoadAmount)
+      console.log(data) // This shows that the data HAS been fetched
+      return data
+    },
+    enabled: !!geneticElement,
+  })
+  console.log('data', data)
+  console.log('isloading', isLoading)
+
+  useEffect(() => {
+    const validateParams = () => {
+      if (viewState.transform.zoom <= 0.25 || viewState.transform.zoom >= 4) {
+        console.log(
+          `Invalid zoom of ${viewState.transform.zoom}, defaulting to 0.`
+        )
+        setViewState({ transform: { ...viewState.transform, zoom: 0 } })
+      }
+    }
+
+    validateParams()
+  }, [])
+
+  useEffect(() => {
+    setIsLoading(isLoading)
+  }, [isLoading])
+
+  useEffect(() => {
+    setSearchParams(new URLSearchParams(flattenState(viewState)))
+  }, [viewState])
+
+  const efp = useMemo(() => {
+    const Component = CellEFPDataObject.component
+    if (data) {
+      return <Component data={data} geneticElement={geneticElement} />
+    } else {
+      return <div></div>
+    }
+  }, [geneticElement?.id])
+
+  if (isLoading || isError || !data) return <></>
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+      }}
+    >
+      <Typography variant='h6'>
+        {'Cell EFP'}
+        {': '}
+        {geneticElement?.id}
+      </Typography>
+      <Box
+        sx={{
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'stretch',
+          justifyContent: 'stretch',
+          overflow: 'hidden',
+        }}
+      >
+        {/* main canvas area */}
+        <Box
+          sx={(theme) => ({
+            flexGrow: 1,
+            position: 'relative',
+          })}
+        >
+          <>
+            <Legend
+              sx={(theme) => ({
+                position: 'absolute',
+                left: theme.spacing(2),
+                bottom: theme.spacing(2),
+                zIndex: 10,
+              })}
+              data={{
+                ...data.viewData,
+              }}
+              colorMode={'absolute'}
+            />
+            <PanZoom
+              sx={(theme) => ({
+                position: 'absolute',
+                top: theme.spacing(0),
+                left: theme.spacing(0),
+                width: '100%',
+                height: '100%',
+                zIndex: 0,
+              })}
+              transform={viewState.transform}
+              onTransformChange={(transform) => {
+                setViewState({ ...viewState, transform: transform })
+              }}
+            >
+              {efp}
+            </PanZoom>
+          </>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+export const cellEFPLoader = async (
+  geneticElement: GeneticElement | null,
+  loadEvent: (loaded: number) => void
+) => {
+  if (!geneticElement) throw ViewDataError.UNSUPPORTED_GENE
+  let totalLoaded = 0
+  const viewData = await CellEFPDataObject.getInitialData(
+    geneticElement,
+    (progress) => {
+      totalLoaded += progress
+      loadEvent(totalLoaded)
+    }
+  )
+
+  return {
+    viewData: viewData,
+  }
+}
diff --git a/Eplant/views/CellEFP/CellEFPDataObject/index.tsx b/Eplant/views/CellEFP/CellEFPDataObject/index.tsx
index 78d8b895..aa20af06 100644
--- a/Eplant/views/CellEFP/CellEFPDataObject/index.tsx
+++ b/Eplant/views/CellEFP/CellEFPDataObject/index.tsx
@@ -104,6 +104,7 @@ export const CellEFPDataObject: CellEFPDataObject = {
       })
       .filter((g) => Number.isFinite(g.mean))
 
+    loadEvent(100)
     const out: EFPData = {
       groups: groupData,
       min: Math.min(...groupData.map((g) => g.min)),
diff --git a/Eplant/views/CellEFP/index.tsx b/Eplant/views/CellEFP/index.tsx
index 82afa732..24ea1c34 100644
--- a/Eplant/views/CellEFP/index.tsx
+++ b/Eplant/views/CellEFP/index.tsx
@@ -24,7 +24,7 @@ const CellEFP: View<
   CellEFPViewerState,
   CellEFPViewerAction
 > = {
-  id: 'Cell eFP',
+  id: 'cell-efp',
   name: 'Cell eFP',
   icon: () => <CellEFPIcon />,
   getInitialState() {
@@ -167,7 +167,7 @@ const CellEFP: View<
               >
                 <NotSupported
                   geneticElement={geneticElement}
-                  view={CellEFP}
+                  viewName={CellEFP.name}
                 ></NotSupported>
               </div>
             )}
diff --git a/Eplant/views/CellEFP/types.tsx b/Eplant/views/CellEFP/types.tsx
index a57e1c3f..cbab4b22 100644
--- a/Eplant/views/CellEFP/types.tsx
+++ b/Eplant/views/CellEFP/types.tsx
@@ -14,3 +14,9 @@ export type CellEFPViewerState = {
 export type CellEFPViewerAction =
   | { type: 'reset-transform' }
   | { type: 'set-transform'; transform: Transform }
+
+export type CellEFPSearchParams = {
+  x: string
+  y: string
+  zoom: string
+}
diff --git a/Eplant/views/eFP/Viewer/index.tsx b/Eplant/views/eFP/Viewer/index.tsx
index b46b84bd..3fff232b 100644
--- a/Eplant/views/eFP/Viewer/index.tsx
+++ b/Eplant/views/eFP/Viewer/index.tsx
@@ -482,7 +482,7 @@ export default class EFPViewer
               >
                 <NotSupported
                   geneticElement={geneticElement}
-                  view={sortedEfps[activeViewIndex]}
+                  viewName={sortedEfps[activeViewIndex].name}
                 ></NotSupported>
               </div>
             )}
diff --git a/package-lock.json b/package-lock.json
index 819c43db..470db661 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "@mui/x-data-grid": "^6.15.0",
         "@mui/x-tree-view": "^7.5.1",
         "@popperjs/core": "^2.11.8",
+        "@tanstack/react-query": "^5.53.3",
         "@types/react-router-dom": "^5.3.3",
         "axios": "^1.5.1",
         "color2k": "^2.0.2",
@@ -32,8 +33,9 @@
         "lodash": "^4.17.21",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.16.0",
-        "react-window": "^1.8.9"
+        "react-router-dom": "^6.26.1",
+        "react-window": "^1.8.9",
+        "zod": "^3.23.8"
       },
       "devDependencies": {
         "@eslint/js": "^9.3.0",
@@ -62,7 +64,7 @@
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
         "jotai-devtools": "^0.7.0",
-        "msw": "^1.3.1",
+        "msw": "^0.35.0",
         "prettier": "3.1.0",
         "react-draggable": "^4.4.6",
         "react-transition-group": "^4.4.5",
@@ -2325,44 +2327,29 @@
       }
     },
     "node_modules/@mswjs/cookies": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@mswjs/cookies/-/cookies-0.2.2.tgz",
-      "integrity": "sha512-mlN83YSrcFgk7Dm1Mys40DLssI1KdJji2CMKN8eOlBqsTADYzj2+jWzsANsUTFbxDMWPD5e9bfA1RGqBpS3O1g==",
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@mswjs/cookies/-/cookies-0.1.7.tgz",
+      "integrity": "sha512-bDg1ReMBx+PYDB4Pk7y1Q07Zz1iKIEUWQpkEXiA2lEWg9gvOZ8UBmGXilCEUvyYoRFlmr/9iXTRR69TrgSwX/Q==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/set-cookie-parser": "^2.4.0",
         "set-cookie-parser": "^2.4.6"
-      },
-      "engines": {
-        "node": ">=14"
       }
     },
     "node_modules/@mswjs/interceptors": {
-      "version": "0.17.10",
-      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.17.10.tgz",
-      "integrity": "sha512-N8x7eSLGcmUFNWZRxT1vsHvypzIRgQYdG0rJey/rZCy6zT/30qDt8Joj7FxzGNLSwXbeZqJOMqDurp7ra4hgbw==",
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/@mswjs/interceptors/-/interceptors-0.12.7.tgz",
+      "integrity": "sha512-eGjZ3JRAt0Fzi5FgXiV/P3bJGj0NqsN7vBS0J0FO2AQRQ0jCKQS4lEFm4wvlSgKQNfeuc/Vz6d81VtU3Gkx/zg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@open-draft/until": "^1.0.3",
-        "@types/debug": "^4.1.7",
-        "@xmldom/xmldom": "^0.8.3",
-        "debug": "^4.3.3",
-        "headers-polyfill": "3.2.5",
-        "outvariant": "^1.2.1",
-        "strict-event-emitter": "^0.2.4",
-        "web-encoding": "^1.1.5"
-      },
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@mswjs/interceptors/node_modules/strict-event-emitter": {
-      "version": "0.2.8",
-      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.2.8.tgz",
-      "integrity": "sha512-KDf/ujU8Zud3YaLtMCcTI4xkZlZVIYxTLr+XIULexP+77EEVWixeXroLUXQXiVtH4XH2W7jr/3PT1v3zBuvc3A==",
-      "dev": true,
-      "dependencies": {
-        "events": "^3.3.0"
+        "@xmldom/xmldom": "^0.7.2",
+        "debug": "^4.3.2",
+        "headers-utils": "^3.0.2",
+        "outvariant": "^1.2.0",
+        "strict-event-emitter": "^0.2.0"
       }
     },
     "node_modules/@mui/base": {
@@ -2743,7 +2730,8 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@open-draft/until/-/until-1.0.3.tgz",
       "integrity": "sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==",
-      "dev": true
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/@popperjs/core": {
       "version": "2.11.8",
@@ -2910,9 +2898,10 @@
       }
     },
     "node_modules/@remix-run/router": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz",
-      "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==",
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
+      "integrity": "sha512-S45oynt/WH19bHbIXjtli6QmwNYvaz+vtnubvNpNDvUOoA/OWh6j1OikIP3G+v5GHdxyC6EXoChG3HgYGEUfcg==",
+      "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
       }
@@ -2954,6 +2943,32 @@
         "@sinonjs/commons": "^3.0.0"
       }
     },
+    "node_modules/@tanstack/query-core": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.59.0.tgz",
+      "integrity": "sha512-WGD8uIhX6/deH/tkZqPNcRyAhDUqs729bWKoByYHSogcshXfFbppOdTER5+qY7mFvu8KEFJwT0nxr8RfPTVh0Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "5.59.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.59.0.tgz",
+      "integrity": "sha512-YDXp3OORbYR+8HNQx+lf4F73NoiCmCcSvZvgxE29OifmQFk0sBlO26NWLHpcNERo92tVk3w+JQ53/vkcRUY1hA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "5.59.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.4",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.4.tgz",
@@ -3260,15 +3275,6 @@
       "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
       "dev": true
     },
-    "node_modules/@types/debug": {
-      "version": "4.1.12",
-      "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
-      "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/ms": "*"
-      }
-    },
     "node_modules/@types/dompurify": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.5.tgz",
@@ -3288,17 +3294,6 @@
         "@types/json-schema": "*"
       }
     },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dev": true,
-      "peer": true,
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -3319,6 +3314,37 @@
       "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.11.tgz",
       "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA=="
     },
+    "node_modules/@types/inquirer": {
+      "version": "7.3.3",
+      "resolved": "https://registry.npmjs.org/@types/inquirer/-/inquirer-7.3.3.tgz",
+      "integrity": "sha512-HhxyLejTHMfohAuhRun4csWigAMjXTmRyiJTU1Y/I1xmggikFMkOUoMQRlFm+zQcPEGHSs3io/0FAmNZf8EymQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/through": "*",
+        "rxjs": "^6.4.0"
+      }
+    },
+    "node_modules/@types/inquirer/node_modules/rxjs": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "npm": ">=2.0.0"
+      }
+    },
+    "node_modules/@types/inquirer/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -3408,12 +3434,6 @@
       "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==",
       "dev": true
     },
-    "node_modules/@types/ms": {
-      "version": "0.7.34",
-      "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
-      "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==",
-      "dev": true
-    },
     "node_modules/@types/node": {
       "version": "20.11.30",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.11.30.tgz",
@@ -3500,10 +3520,11 @@
       "dev": true
     },
     "node_modules/@types/set-cookie-parser": {
-      "version": "2.4.7",
-      "resolved": "https://registry.npmjs.org/@types/set-cookie-parser/-/set-cookie-parser-2.4.7.tgz",
-      "integrity": "sha512-+ge/loa0oTozxip6zmhRIk8Z/boU51wl9Q6QdLZcokIGMzY5lFXYy/x7Htj2HTC6/KZP1hUbZ1ekx8DYXICvWg==",
+      "version": "2.4.10",
+      "resolved": "https://registry.npmjs.org/@types/set-cookie-parser/-/set-cookie-parser-2.4.10.tgz",
+      "integrity": "sha512-GGmQVGpQWUe5qglJozEjZV/5dyxbOOZ0LHe/lqyWssB88Y4svNfst0uqBVscdDeIKl5Jy5+aPSvy7mI9tYRguw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/node": "*"
       }
@@ -3514,6 +3535,16 @@
       "integrity": "sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==",
       "dev": true
     },
+    "node_modules/@types/through": {
+      "version": "0.0.33",
+      "resolved": "https://registry.npmjs.org/@types/through/-/through-0.0.33.tgz",
+      "integrity": "sha512-HsJ+z3QuETzP3cswwtzt2vEIiHBk/dCcHGhbmG5X3ecnwFD/lPrMpliGXxSCg03L9AhrdwA4Oz/qfspkDW+xGQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/tough-cookie": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz",
@@ -4017,10 +4048,11 @@
       }
     },
     "node_modules/@xmldom/xmldom": {
-      "version": "0.8.10",
-      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
-      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "version": "0.7.13",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.7.13.tgz",
+      "integrity": "sha512-lm2GW5PkosIzccsaZIz7tp8cPADSIlIHWDFTR1N0SzfinhhYgeIQjFMz4rYzanCScr3DqQLeomUDArp6MWKm+g==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       }
@@ -4039,13 +4071,6 @@
       "dev": true,
       "peer": true
     },
-    "node_modules/@zxing/text-encoding": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
-      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
-      "dev": true,
-      "optional": true
-    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -4075,11 +4100,12 @@
         "acorn-walk": "^8.0.2"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
       "dev": true,
+      "license": "MIT",
       "peer": true,
       "peerDependencies": {
         "acorn": "^8"
@@ -4424,9 +4450,10 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.6.8",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
-      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz",
+      "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==",
+      "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
@@ -4706,12 +4733,13 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -5653,10 +5681,11 @@
       "dev": true
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -6556,10 +6585,11 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -6952,12 +6982,13 @@
       "dev": true
     },
     "node_modules/graphql": {
-      "version": "16.8.1",
-      "resolved": "https://registry.npmjs.org/graphql/-/graphql-16.8.1.tgz",
-      "integrity": "sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==",
+      "version": "15.9.0",
+      "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.9.0.tgz",
+      "integrity": "sha512-GCOQdvm7XxV1S4U4CGrsdlEN37245eC8P9zaYCMr6K1BG0IPGy5lUwmJsEOGyl1GD6HXjOtl2keCP9asRBwNvA==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": "^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0"
+        "node": ">= 10.x"
       }
     },
     "node_modules/hammerjs": {
@@ -7048,11 +7079,12 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/headers-polyfill": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-3.2.5.tgz",
-      "integrity": "sha512-tUCGvt191vNSQgttSyJoibR+VO+I6+iCHIUdhzEMJKE+EAL8BwCN7fUOZlY4ofOelNHsK+gEjxB/B+9N3EWtdA==",
-      "dev": true
+    "node_modules/headers-utils": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/headers-utils/-/headers-utils-3.0.2.tgz",
+      "integrity": "sha512-xAxZkM1dRyGV2Ou5bzMxBPNLoRCjcX+ya7KSWybQD2KwLphxsapUVK6x/02o7f4VU6GPSXch9vNY2+gkU8tYWQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
@@ -7679,6 +7711,7 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
       }
@@ -10420,12 +10453,13 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -10500,49 +10534,40 @@
       "dev": true
     },
     "node_modules/msw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/msw/-/msw-1.3.3.tgz",
-      "integrity": "sha512-CiPyRFiYJCXYyH/vwxT7m+sa4VZHuUH6cGwRBj0kaTjBGpsk4EnL47YzhoA859htVCF2vzqZuOsomIUlFqg9GQ==",
+      "version": "0.35.0",
+      "resolved": "https://registry.npmjs.org/msw/-/msw-0.35.0.tgz",
+      "integrity": "sha512-V7A6PqaS31F1k//fPS0OnO7vllfaqBUFsMEu3IpYixyWpiUInfyglodnbXhhtDyytkQikpkPZv8TZi/CvZzv/w==",
       "dev": true,
       "hasInstallScript": true,
+      "license": "MIT",
       "dependencies": {
-        "@mswjs/cookies": "^0.2.2",
-        "@mswjs/interceptors": "^0.17.10",
+        "@mswjs/cookies": "^0.1.6",
+        "@mswjs/interceptors": "^0.12.6",
         "@open-draft/until": "^1.0.3",
         "@types/cookie": "^0.4.1",
-        "@types/js-levenshtein": "^1.1.1",
+        "@types/inquirer": "^7.3.3",
+        "@types/js-levenshtein": "^1.1.0",
         "chalk": "^4.1.1",
         "chokidar": "^3.4.2",
-        "cookie": "^0.4.2",
-        "graphql": "^16.8.1",
-        "headers-polyfill": "3.2.5",
-        "inquirer": "^8.2.0",
-        "is-node-process": "^1.2.0",
+        "cookie": "^0.4.1",
+        "graphql": "^15.5.1",
+        "headers-utils": "^3.0.2",
+        "inquirer": "^8.1.1",
+        "is-node-process": "^1.0.1",
         "js-levenshtein": "^1.1.6",
-        "node-fetch": "^2.6.7",
-        "outvariant": "^1.4.0",
-        "path-to-regexp": "^6.2.0",
-        "strict-event-emitter": "^0.4.3",
-        "type-fest": "^2.19.0",
-        "yargs": "^17.3.1"
+        "node-fetch": "^2.6.1",
+        "node-match-path": "^0.6.3",
+        "statuses": "^2.0.0",
+        "strict-event-emitter": "^0.2.0",
+        "type-fest": "^1.2.2",
+        "yargs": "^17.0.1"
       },
       "bin": {
         "msw": "cli/index.js"
       },
-      "engines": {
-        "node": ">=14"
-      },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mswjs"
-      },
-      "peerDependencies": {
-        "typescript": ">= 4.4.x"
-      },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
       }
     },
     "node_modules/msw/node_modules/ansi-styles": {
@@ -10616,12 +10641,13 @@
       }
     },
     "node_modules/msw/node_modules/type-fest": {
-      "version": "2.19.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz",
-      "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+      "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
       "dev": true,
+      "license": "(MIT OR CC0-1.0)",
       "engines": {
-        "node": ">=12.20"
+        "node": ">=10"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -10712,6 +10738,13 @@
       "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==",
       "dev": true
     },
+    "node_modules/node-match-path": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/node-match-path/-/node-match-path-0.6.3.tgz",
+      "integrity": "sha512-fB1reOHKLRZCJMAka28hIxCwQLxGmd7WewOCBDYKpyA1KXi68A7vaGgdZAPhY2E6SXoYt3KqYCCvXLJ+O0Fu/Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
@@ -11011,10 +11044,11 @@
       }
     },
     "node_modules/outvariant": {
-      "version": "1.4.2",
-      "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.2.tgz",
-      "integrity": "sha512-Ou3dJ6bA/UJ5GVHxah4LnqDwZRwAmWxrG3wtrHrbGnP4RnLCtA64A4F+ae7Y8ww660JaddSoArUR5HjipWSHAQ==",
-      "dev": true
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/outvariant/-/outvariant-1.4.3.tgz",
+      "integrity": "sha512-+Sl2UErvtsoajRDKCE5/dBz4DIvHXQQnAxtQTF04OJxY0+DyZXSo5P5Bb7XYWOh81syohlYL24hbDwxedPUJCA==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/p-limit": {
       "version": "3.1.0",
@@ -11127,12 +11161,6 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
-    "node_modules/path-to-regexp": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.2.1.tgz",
-      "integrity": "sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==",
-      "dev": true
-    },
     "node_modules/path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
@@ -11626,11 +11654,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.23.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz",
-      "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==",
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.1.tgz",
+      "integrity": "sha512-kIwJveZNwp7teQRI5QmwWo39A5bXRyqpH0COKKmPnyD2vBvDwgFXSqDUYtt1h+FEyfnE8eXr7oe0MxRzVwCcvQ==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.16.1"
+        "@remix-run/router": "1.19.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -11640,12 +11669,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.23.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz",
-      "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==",
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.1.tgz",
+      "integrity": "sha512-veut7m41S1fLql4pLhxeSW3jlqs+4MtjRLj0xvuCEXsxusJCbs6I8yn9BxzzDX2XDgafrccY6hwjmd/bL54tFw==",
+      "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.16.1",
-        "react-router": "6.23.1"
+        "@remix-run/router": "1.19.1",
+        "react-router": "6.26.1"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -12170,10 +12200,11 @@
       }
     },
     "node_modules/set-cookie-parser": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.6.0.tgz",
-      "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==",
-      "dev": true
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.0.tgz",
+      "integrity": "sha512-lXLOiqpkUumhRdFF3k1osNXCy9akgx/dyPZ5p8qAg9seJzXr5ZrlqZuWIMuY6ejOsVLE6flJ5/h3lsn57fQ/PQ==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/set-function-length": {
       "version": "1.2.2",
@@ -12345,6 +12376,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -12358,10 +12399,14 @@
       }
     },
     "node_modules/strict-event-emitter": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.4.6.tgz",
-      "integrity": "sha512-12KWeb+wixJohmnwNFerbyiBrAlq5qJLwIt38etRtKtmmHyDSoGlIqFE9wx+4IwG0aDjI7GV8tc8ZccjWZZtTg==",
-      "dev": true
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.2.8.tgz",
+      "integrity": "sha512-KDf/ujU8Zud3YaLtMCcTI4xkZlZVIYxTLr+XIULexP+77EEVWixeXroLUXQXiVtH4XH2W7jr/3PT1v3zBuvc3A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "events": "^3.3.0"
+      }
     },
     "node_modules/string_decoder": {
       "version": "1.3.0",
@@ -12787,6 +12832,7 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -13466,19 +13512,6 @@
         }
       }
     },
-    "node_modules/util": {
-      "version": "0.12.5",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
-      "integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
-      "dev": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "is-arguments": "^1.0.4",
-        "is-generator-function": "^1.0.7",
-        "is-typed-array": "^1.1.3",
-        "which-typed-array": "^1.1.2"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -13500,10 +13533,11 @@
       }
     },
     "node_modules/vite": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.2.tgz",
-      "integrity": "sha512-tBCZBNSBbHQkaGyhGCDUGqeo2ph8Fstyp6FMSvTtsXeZSPpSMGlviAOav2hxVTqFcx8Hj/twtWKsMJXNY0xI8w==",
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.3.tgz",
+      "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
@@ -13647,18 +13681,6 @@
         "defaults": "^1.0.3"
       }
     },
-    "node_modules/web-encoding": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/web-encoding/-/web-encoding-1.1.5.tgz",
-      "integrity": "sha512-HYLeVCdJ0+lBYV2FvNZmv3HJ2Nt0QYXqZojk3d9FJOLkwnuhzM9tmamh8d7HPM8QqjKH8DeHkFTx+CFlWpZZDA==",
-      "dev": true,
-      "dependencies": {
-        "util": "^0.12.3"
-      },
-      "optionalDependencies": {
-        "@zxing/text-encoding": "0.9.0"
-      }
-    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
@@ -13669,22 +13691,22 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.94.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
+      "integrity": "sha512-KcsGn50VT+06JH/iunZJedYGUJS5FGjow8wb9c0v5n1Om8O1g4L6LjtfxwlXIATopoQu+vOXXa7gYisWxCoPyg==",
       "dev": true,
+      "license": "MIT",
       "peer": true,
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -13976,10 +13998,11 @@
       }
     },
     "node_modules/ws": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.16.0.tgz",
-      "integrity": "sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==",
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=10.0.0"
       },
@@ -14072,6 +14095,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.23.8",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
+      "integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 31965b27..d5483dbc 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@mui/x-data-grid": "^6.15.0",
     "@mui/x-tree-view": "^7.5.1",
     "@popperjs/core": "^2.11.8",
+    "@tanstack/react-query": "^5.53.3",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.5.1",
     "color2k": "^2.0.2",
@@ -38,8 +39,9 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.16.0",
-    "react-window": "^1.8.9"
+    "react-router-dom": "^6.26.1",
+    "react-window": "^1.8.9",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.3.0",
@@ -68,7 +70,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jotai-devtools": "^0.7.0",
-    "msw": "^1.3.1",
+    "msw": "^0.35.0",
     "prettier": "3.1.0",
     "react-draggable": "^4.4.6",
     "react-transition-group": "^4.4.5",
@@ -82,4 +84,4 @@
     "vite-plugin-eslint": "^1.8.1",
     "vite-tsconfig-paths": "^4.2.1"
   }
-}
\ No newline at end of file
+}