From 7378d1405e72ca88a4fcf4c38a0a4d544bd6eaa4 Mon Sep 17 00:00:00 2001
From: Yukthi <yukthi.wickramarachchi@mail.utoronto.ca>
Date: Wed, 30 Oct 2024 20:20:48 -0400
Subject: [PATCH] Added plant, cell, and tissue efps with routing

---
 Eplant/Eplant.tsx                            |  64 +-
 Eplant/UI/Layout/ViewContainer/index.tsx     | 110 +++-
 Eplant/config.tsx                            |   4 +-
 Eplant/main.tsx                              |  18 +-
 Eplant/util/stateUtils/ActionsPanel.tsx      |  50 ++
 Eplant/util/stateUtils/index.ts              |  14 +-
 Eplant/views/CellEFP/CellEFP.tsx             |  18 +-
 Eplant/views/CellEFP/actions.tsx             |  10 +-
 Eplant/views/ExperimentEFP/ExperimentEFP.tsx |  88 +++
 Eplant/views/ExperimentEFP/efps.tsx          | 254 ++++++++
 Eplant/views/PlantEFP/PlantEFP.tsx           |  88 +++
 Eplant/views/PlantEFP/efps.tsx               |  22 +
 Eplant/views/PlantEFP/index.tsx              |   3 +-
 Eplant/views/eFP/Viewer/EFPList.tsx          |  85 +++
 Eplant/views/eFP/Viewer/EFPViewer.tsx        | 351 +++++++++++
 Eplant/views/eFP/Viewer/MaskModal.tsx        |   5 +-
 Eplant/views/eFP/Viewer/actions.tsx          |  60 ++
 Eplant/views/eFP/Viewer/index.tsx            | 586 ++++++++-----------
 Eplant/views/eFP/Viewer/types.tsx            |  16 +-
 Eplant/views/eFP/index.tsx                   |   8 +-
 index.html                                   |   6 +-
 vite.config.ts                               |   6 +-
 22 files changed, 1394 insertions(+), 472 deletions(-)
 create mode 100644 Eplant/util/stateUtils/ActionsPanel.tsx
 create mode 100644 Eplant/views/ExperimentEFP/ExperimentEFP.tsx
 create mode 100644 Eplant/views/ExperimentEFP/efps.tsx
 create mode 100644 Eplant/views/PlantEFP/PlantEFP.tsx
 create mode 100644 Eplant/views/PlantEFP/efps.tsx
 create mode 100644 Eplant/views/eFP/Viewer/EFPList.tsx
 create mode 100644 Eplant/views/eFP/Viewer/EFPViewer.tsx
 create mode 100644 Eplant/views/eFP/Viewer/actions.tsx

diff --git a/Eplant/Eplant.tsx b/Eplant/Eplant.tsx
index 62f62b77..6cbfb4a9 100644
--- a/Eplant/Eplant.tsx
+++ b/Eplant/Eplant.tsx
@@ -30,70 +30,18 @@ export type EplantProps = Record<string, never>
  */
 const Eplant = () => {
   const [darkMode] = useDarkMode()
-  const [activeGeneId, setActiveGeneId] = useActiveGeneId()
-  const [activeViewId, setActiveViewId] = useState<string>('')
   const [isCollapse, setIsCollapse] = useSidebarState()
+  const [activeGeneId, setActiveGeneId] = useActiveGeneId()
   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 {
-      // Set active gene to first available if one is already loaded
-      if (genes.length > 0) {
-        setActiveGeneId(genes[0].id)
-      } else {
-        setActiveGeneId('')
-      }
-    }
-    setActiveViewId(location.pathname.split('/')[1])
-  }, [location.pathname])
-
-  // On active gene change update the gene path segment
-  useEffect(() => {
-    if (location.pathname !== import.meta.env.BASE_URL) {
-      // Only run this after initial redirect
-      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, location.pathname])
 
   return (
     <ThemeProvider theme={darkMode ? dark : light}>
@@ -124,14 +72,6 @@ const Eplant = () => {
           {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%',
diff --git a/Eplant/UI/Layout/ViewContainer/index.tsx b/Eplant/UI/Layout/ViewContainer/index.tsx
index 9a1a6506..988f3206 100644
--- a/Eplant/UI/Layout/ViewContainer/index.tsx
+++ b/Eplant/UI/Layout/ViewContainer/index.tsx
@@ -1,13 +1,20 @@
 import { useEffect, useId, useMemo, useState } from 'react'
-import { Outlet, useLocation, useNavigate } from 'react-router-dom'
+import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import { useConfig } from '@eplant/config'
 import GeneticElement from '@eplant/GeneticElement'
-import { usePrinting } from '@eplant/state'
+import {
+  useActiveGeneId,
+  useGeneticElements,
+  usePrinting,
+  useSpecies,
+} from '@eplant/state'
 import Modal from '@eplant/UI/Modal'
 import downloadFile from '@eplant/util/downloadFile'
 import ErrorBoundary from '@eplant/util/ErrorBoundary'
 import { useViewData } from '@eplant/View/viewData'
+import CellEFP from '@eplant/views/CellEFP'
+import FallbackView from '@eplant/views/FallbackView'
 import {
   AppBar,
   Box,
@@ -40,13 +47,9 @@ import ViewOptions from './ViewOptions'
  * @returns
  */
 export function ViewContainer<T, S, A>({
-  view,
-  setView,
   gene,
   ...props
 }: {
-  view: View<T, S, A>
-  setView: (viewid: string) => void
   gene: GeneticElement | null
 } & BoxProps) {
   // const { activeData, error, dispatch, state } = useViewData(view, gene)
@@ -57,10 +60,16 @@ export function ViewContainer<T, S, A>({
   const [printing, setPrinting] = usePrinting()
 
   const [viewingCitations, setViewingCitations] = useState(false)
-  const navigate = useNavigate()
-  const location = useLocation()
 
   const { userViews, views, genericViews } = useConfig()
+  const navigate = useNavigate()
+  const location = useLocation()
+  const params = useParams()
+  const [speciesList] = useSpecies()
+  const [genes, setGenes] = useGeneticElements()
+  const [activeGeneId, setActiveGeneId] = useActiveGeneId()
+  const [activeViewId, setActiveViewId] = useState<string>('')
+  const activeView = views.find((view) => view.id === activeViewId) ?? CellEFP
 
   useEffect(() => {
     if (printing) {
@@ -70,8 +79,61 @@ export function ViewContainer<T, S, A>({
       }, 100)
     }
   }, [printing])
-  const topBar = useMemo(
-    () => (
+
+  // 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 {
+      // Set active gene to first available if one is already loaded
+      if (genes.length > 0) {
+        setActiveGeneId(genes[0].id)
+      } else {
+        setActiveGeneId('')
+      }
+    }
+    setActiveViewId(location.pathname.split('/')[1])
+  }, [location.pathname])
+
+  // On active gene change update the gene path segment
+  useEffect(() => {
+    if (location.pathname !== import.meta.env.BASE_URL) {
+      // Only run this after initial redirect
+      const pathSegments = location.pathname
+        .split('/')
+        .filter((segment) => segment !== '')
+      if (pathSegments.length == 2 && activeGeneId) {
+        pathSegments[pathSegments.length - 1] = activeGeneId
+      } else if (pathSegments.length == 1 && activeGeneId) {
+        pathSegments.push(activeGeneId)
+        // Will never get here as of now, but if we decide to persist activeGene need
+        // to do this.
+      }
+
+      const newPath = '/' + pathSegments.join('/') + '/' + location.search
+      if (newPath !== location.pathname + '/' + location.search) {
+        navigate(newPath)
+      }
+    }
+  }, [activeGeneId])
+
+  const topBar = useMemo(() => {
+    return (
       <AppBar
         variant='elevation'
         sx={(theme) => ({
@@ -102,9 +164,9 @@ export function ViewContainer<T, S, A>({
             {/* View selector dropdown */}
             <FormControl variant='standard'>
               <Select
-                value={view.id}
+                value={activeView.id}
                 renderValue={() => {
-                  if (view.id == 'get-started') {
+                  if (activeView.id == 'get-started') {
                     return <span style={{ paddingLeft: 8 }}>View selector</span>
                   }
                   return (
@@ -115,9 +177,9 @@ export function ViewContainer<T, S, A>({
                       }}
                     >
                       <Box sx={{ paddingRight: 1.5, marginTop: 0.5 }}>
-                        {view.icon && <view.icon />}
+                        {activeView.icon && <activeView.icon />}
                       </Box>
-                      {view.name}
+                      {activeView.name}
                     </span>
                   )
                 }}
@@ -131,7 +193,7 @@ export function ViewContainer<T, S, A>({
                     pathSegments[1] = view.id
                     const newPath = pathSegments.join('/')
                     if (newPath !== location.pathname + location.search) {
-                      setView(view.id)
+                      setActiveViewId(view.id)
                       navigate(newPath)
                     }
                   }
@@ -196,7 +258,7 @@ export function ViewContainer<T, S, A>({
                       }}
                       key={view.name}
                       onClick={(e) => {
-                        if (view) setView(view.id)
+                        if (view) setActiveViewId(view.id)
                       }}
                     >
                       {view.name}
@@ -236,7 +298,7 @@ export function ViewContainer<T, S, A>({
             color='secondary'
             onClick={() => {
               // downloadFile(
-              //   `${view.id}${gene ? '-' + gene.id : ''}.json`,
+              //   `${activeView.id}${gene ? '-' + gene.id : ''}.json`,
               //   JSON.stringify(activeData, null, 2)
               // )
             }}
@@ -245,17 +307,19 @@ export function ViewContainer<T, S, A>({
           </Button>
         </Toolbar>
       </AppBar>
-    ),
-    [view.id, gene?.id, loading]
-  )
+    )
+  }, [activeViewId, gene?.id, loading])
+
   return (
     <Box {...props} display='flex' flexDirection='column'>
       <Modal open={viewingCitations} onClose={() => setViewingCitations(false)}>
         <DialogTitle sx={{ minWidth: '512px' }}>
-          <Typography variant='h6'>Data sources for {view.name}</Typography>
+          <Typography variant='h6'>
+            Data sources for {activeView.name}
+          </Typography>
         </DialogTitle>
         <DialogContent>
-          {view.citation ? (
+          {activeView.citation ? (
             // <view.citation state={state} activeData={activeData} gene={gene} />
             <div></div>
           ) : (
@@ -301,7 +365,7 @@ export function ViewContainer<T, S, A>({
             <LoadingPage
               loadingAmount={loadAmount}
               gene={gene}
-              view={view}
+              view={activeView}
               error={null}
             />
           ) : (
diff --git a/Eplant/config.tsx b/Eplant/config.tsx
index 0a6979b9..02d590a0 100644
--- a/Eplant/config.tsx
+++ b/Eplant/config.tsx
@@ -31,9 +31,9 @@ const userViews = [
   // GeneInfoView,
   PublicationViewer,
   // DebugView,
-  // PlantEFP,
+  PlantEFP,
   CellEFP,
-  // ExperimentEFP,
+  ExperimentEFP,
   ChromosomeViewerObject,
 ]
 
diff --git a/Eplant/main.tsx b/Eplant/main.tsx
index 800bf992..670d900d 100644
--- a/Eplant/main.tsx
+++ b/Eplant/main.tsx
@@ -9,6 +9,8 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import ErrorBoundary from './util/ErrorBoundary'
 import { CellEFPView } from './views/CellEFP/CellEFP'
 import { ChromosomeView } from './views/ChromosomeViewer/ChromosomeView'
+import { ExperimentEFP } from './views/ExperimentEFP/ExperimentEFP'
+import { PlantEFP } from './views/PlantEFP/PlantEFP'
 import { PublicationsView } from './views/PublicationViewer/PublicationsView'
 import { Config, defaultConfig } from './config'
 import Eplant from './Eplant'
@@ -21,21 +23,29 @@ const router = createBrowserRouter([
     element: <Eplant />,
     children: [
       {
-        element: <Navigate to={'/cell-efp'} replace={true}></Navigate>,
+        element: <Navigate to={'cell-efp/'} replace={true}></Navigate>,
         index: true,
       },
       {
-        path: '/cell-efp/:geneid?',
+        path: 'cell-efp/:geneid?',
         element: <CellEFPView></CellEFPView>,
       },
       {
-        path: '/publications/:geneid?',
+        path: 'publications/:geneid?',
         element: <PublicationsView></PublicationsView>,
       },
       {
-        path: '/chromosome/:geneid?',
+        path: 'chromosome/:geneid?',
         element: <ChromosomeView></ChromosomeView>,
       },
+      {
+        path: 'plant-efp/:geneid?',
+        element: <PlantEFP></PlantEFP>,
+      },
+      {
+        path: 'tissue/:geneid?',
+        element: <ExperimentEFP></ExperimentEFP>,
+      },
     ],
     errorElement: <ErrorBoundary></ErrorBoundary>,
   },
diff --git a/Eplant/util/stateUtils/ActionsPanel.tsx b/Eplant/util/stateUtils/ActionsPanel.tsx
new file mode 100644
index 00000000..03869f88
--- /dev/null
+++ b/Eplant/util/stateUtils/ActionsPanel.tsx
@@ -0,0 +1,50 @@
+import { Box, Button, Grid, Tooltip } from '@mui/material'
+
+import { StateActions } from '.'
+
+interface ActionsPanelProps<T> {
+  actions: StateActions<T>
+  prevState: T
+  setState: (newState: T) => void
+}
+
+export const ActionsPanel = <T,>({
+  actions,
+  prevState,
+  setState,
+}: ActionsPanelProps<T>) => {
+  const actionButtons = Object.entries(actions)
+    .filter(([_, action]) => action.rendered)
+    .map(([key, action]) => {
+      if (action.rendered) {
+        return (
+          <Tooltip key={key} title={key}>
+            <Button
+              startIcon={action.icon}
+              onClick={() => setState(action.mutation(prevState))}
+            ></Button>
+          </Tooltip>
+        )
+      }
+      return null // Should never get here but need this to make TS compiler happy
+    })
+
+  const rows = []
+  for (let i = 0; i < actionButtons.length; i += 5) {
+    rows.push(actionButtons.slice(i, i + 5))
+  }
+
+  return (
+    <Box>
+      {rows.map((row, index) => (
+        <Grid container spacing={2} key={index}>
+          {row.map((button) => (
+            <Grid item key={button?.key}>
+              {button}
+            </Grid>
+          ))}
+        </Grid>
+      ))}
+    </Box>
+  )
+}
diff --git a/Eplant/util/stateUtils/index.ts b/Eplant/util/stateUtils/index.ts
index 7a1ddd37..499ef2b0 100644
--- a/Eplant/util/stateUtils/index.ts
+++ b/Eplant/util/stateUtils/index.ts
@@ -1,7 +1,13 @@
+import { ReactElement } from 'react'
+
 import { SvgIconProps } from '@mui/material'
 
-export type StateAction<T> = {
-  icon: React.ReactElement<SvgIconProps>
-  mutation: (prevState: T) => T
-  description: string
+type StateAction<T> = {
+  mutation: (prevState: T, ...args: any[]) => T
+} & (
+  | { rendered: true; icon: ReactElement<SvgIconProps> }
+  | { rendered: false; icon?: never }
+)
+export type StateActions<T> = {
+  [key: string]: StateAction<T>
 }
diff --git a/Eplant/views/CellEFP/CellEFP.tsx b/Eplant/views/CellEFP/CellEFP.tsx
index 57dd5c1a..20e84e4d 100644
--- a/Eplant/views/CellEFP/CellEFP.tsx
+++ b/Eplant/views/CellEFP/CellEFP.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { act, useCallback, useEffect, useMemo, useState } from 'react'
 import { debounce } from 'lodash'
 import { useOutletContext, useSearchParams } from 'react-router-dom'
 
@@ -6,6 +6,7 @@ import GeneticElement from '@eplant/GeneticElement'
 import { ViewContext } from '@eplant/UI/Layout/ViewContainer/types'
 import PanZoom from '@eplant/util/PanZoom'
 import { flattenState } from '@eplant/util/router'
+import { ActionsPanel } from '@eplant/util/stateUtils/ActionsPanel'
 import { ViewDataError } from '@eplant/View/viewData'
 import { Box, Button, Tooltip, Typography } from '@mui/material'
 import { useQuery } from '@tanstack/react-query'
@@ -77,7 +78,7 @@ export const CellEFPView = () => {
     if (data) {
       return <Component data={data} geneticElement={geneticElement} />
     } else {
-      return <div>Yo</div>
+      return <div>TODO</div>
     }
   }, [geneticElement?.id, data])
 
@@ -103,15 +104,12 @@ export const CellEFPView = () => {
           {': '}
           {geneticElement?.id}
         </Typography>
-        {CellEFPStateActions.map((action, index) => (
-          <Button
-            key={index}
-            onClick={() => setViewState(action.mutation(viewState))}
-          >
-            <Tooltip title={action.description}>{action.icon}</Tooltip>
-          </Button>
-        ))}
       </Box>
+      <ActionsPanel
+        actions={CellEFPStateActions}
+        prevState={viewState}
+        setState={setViewState}
+      ></ActionsPanel>
       <Box
         sx={{
           width: '100%',
diff --git a/Eplant/views/CellEFP/actions.tsx b/Eplant/views/CellEFP/actions.tsx
index aa4cc56a..ce574bb2 100644
--- a/Eplant/views/CellEFP/actions.tsx
+++ b/Eplant/views/CellEFP/actions.tsx
@@ -1,10 +1,10 @@
-import { StateAction } from '@eplant/util/stateUtils'
+import { StateActions } from '@eplant/util/stateUtils'
 import YoutubeSearchedForRoundedIcon from '@mui/icons-material/YoutubeSearchedForRounded'
 
 import { CellEFPViewerState } from './types'
 
-export const CellEFPStateActions: StateAction<CellEFPViewerState>[] = [
-  {
+export const CellEFPStateActions: StateActions<CellEFPViewerState> = {
+  'Reset Pan/Zoom': {
     icon: <YoutubeSearchedForRoundedIcon />,
     mutation: (prevState) => ({
       ...prevState,
@@ -16,6 +16,6 @@ export const CellEFPStateActions: StateAction<CellEFPViewerState>[] = [
         zoom: 1,
       },
     }),
-    description: 'Reset Pan/Zoom',
+    rendered: true,
   },
-]
+}
diff --git a/Eplant/views/ExperimentEFP/ExperimentEFP.tsx b/Eplant/views/ExperimentEFP/ExperimentEFP.tsx
new file mode 100644
index 00000000..041e9ba5
--- /dev/null
+++ b/Eplant/views/ExperimentEFP/ExperimentEFP.tsx
@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useState } from 'react'
+import { debounce } from 'lodash'
+import { useOutletContext, useSearchParams } from 'react-router-dom'
+
+import { ViewContext } from '@eplant/UI/Layout/ViewContainer/types'
+import { flattenState } from '@eplant/util/router'
+import { useQuery } from '@tanstack/react-query'
+
+import { EFPViewerActions } from '../eFP/Viewer/actions'
+import {
+  EFPViewer,
+  EFPViewerLoader,
+  ValidateEFPViewerParams,
+} from '../eFP/Viewer/EFPViewer'
+import { EFPViewerData, EFPViewerState } from '../eFP/Viewer/types'
+
+import { experimentEFPs, experimentEFPViews } from './efps'
+
+export const ExperimentEFP = () => {
+  const { geneticElement, setIsLoading, setLoadAmount } =
+    useOutletContext<ViewContext>()
+
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [viewState, setViewState] = useState<EFPViewerState>({
+    activeView: '',
+    colorMode: 'absolute',
+    transform: {
+      offset: {
+        x: 0,
+        y: 0,
+      },
+      zoom: 1,
+    },
+    sortBy: 'name',
+    maskingEnabled: false,
+    maskThreshold: 100,
+  })
+  const { data, isLoading, isError, error } = useQuery<EFPViewerData>({
+    queryKey: [`tissue-${geneticElement?.id}`],
+    queryFn: async () => {
+      if (!geneticElement) {
+        throw Error('No gene')
+      }
+      const data = EFPViewerLoader(
+        geneticElement,
+        experimentEFPs,
+        experimentEFPViews,
+        setLoadAmount
+      )
+      return data
+    },
+    enabled: !!geneticElement,
+  })
+
+  useEffect(() => {
+    setViewState(ValidateEFPViewerParams(searchParams, experimentEFPs))
+  }, [])
+
+  useEffect(() => {
+    setIsLoading(isLoading)
+  }, [isLoading, setIsLoading])
+
+  const debouncedUpdateSearchParams = useCallback(
+    debounce((updatedState) => {
+      setSearchParams(new URLSearchParams(flattenState(updatedState)))
+    }, 200), // 200ms delay before updating the URL
+    [setSearchParams]
+  )
+
+  useEffect(() => {
+    debouncedUpdateSearchParams(viewState)
+    return () => {
+      debouncedUpdateSearchParams.cancel()
+    }
+  }, [viewState, debouncedUpdateSearchParams])
+
+  if (isLoading || isError || !data) return <></>
+  return (
+    <EFPViewer
+      data={data}
+      state={viewState}
+      geneticElement={geneticElement}
+      efps={experimentEFPs}
+      actions={EFPViewerActions}
+      setViewState={setViewState}
+    ></EFPViewer>
+  )
+}
diff --git a/Eplant/views/ExperimentEFP/efps.tsx b/Eplant/views/ExperimentEFP/efps.tsx
new file mode 100644
index 00000000..f0a04a31
--- /dev/null
+++ b/Eplant/views/ExperimentEFP/efps.tsx
@@ -0,0 +1,254 @@
+import { EFPViewerData } from '../eFP/Viewer/types'
+import { makeEfps } from '../eFP/Viewer/util'
+
+export const experimentEFPViews: EFPViewerData['views'] = [
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/Chemical/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/Chemical/Arabidopsis_thaliana.xml',
+    name: 'Chemical eFP',
+    id: 'ChemicalView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/AbioticStress/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/AbioticStress/Arabidopsis_thaliana.xml',
+    name: 'Abiotic Stress eFP',
+    id: 'AbioticStressView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/AbioticStressII/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/AbioticStressII/Arabidopsis_thaliana.xml',
+    name: 'Abiotic Stress II eFP',
+    id: 'AbioticStressIIView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/DNADamage/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/DNADamage/Arabidopsis_thaliana.xml',
+    name: 'DNA Damage eFP (RNA-Seq data)',
+    id: 'DNADamageView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/Heteroderaschachtii/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/Heteroderaschachtii/Arabidopsis_thaliana.xml',
+    name: 'Heterodera schachtii eFP (RNA-Seq data)',
+    id: 'HeteroderaschachtiiView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/GuardCellDrought/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/GuardCellDrought/Arabidopsis_thaliana.xml',
+    name: 'Guard Cell Drought eFP',
+    id: 'GuardCellDroughtView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/GuardCellMeristemoids/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/GuardCellMeristemoids/Arabidopsis_thaliana.xml',
+    name: 'Guard Cell Meristemoids eFP',
+    id: 'GuardCellMeristemoidsView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/GuardCellMutantAndWildTypeGuardCellABAResponse/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/GuardCellMutantAndWildTypeGuardCellABAResponse/Arabidopsis_thaliana.xml',
+    name: 'Guard Cell Mutant And Wild Type Guard Cell ABA Response eFP',
+    id: 'GuardCellMutantAndWildTypeGuardCellABAResponseView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/GuardCellSuspensionCellABAResponseWithROSScavenger/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/GuardCellSuspensionCellABAResponseWithROSScavenger/Arabidopsis_thaliana.xml',
+    name: 'Guard Cell Suspension Cell ABA Response With ROS Scavenger eFP',
+    id: 'GuardCellSuspensionCellABAResponseWithROSScavengerView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificGuardAndMesophyllCells/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificGuardAndMesophyllCells/Arabidopsis_thaliana.xml',
+    name: 'Tissue Specific Guard And Mesophyll Cells eFP',
+    id: 'TissueSpecificGuardAndMesophyllCellsView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificEmbryoDevelopment/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificEmbryoDevelopment/Arabidopsis_thaliana.xml',
+    name: 'Tissue Specific Embryo Development eFP',
+    id: 'TissueSpecificEmbryoDevelopmentView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificMicrogametogenesis/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificMicrogametogenesis/Arabidopsis_thaliana.xml',
+    name: 'Tissue Specific Microgametogenesis eFP',
+    id: 'TissueSpecificMicrogametogenesisView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificPollenGermination/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificPollenGermination/Arabidopsis_thaliana.xml',
+    name: 'Tissue Specific Pollen Germination eFP',
+    id: 'TissueSpecificPollenGerminationView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificRoot/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificRoot/Arabidopsis_thaliana.xml',
+    name: 'Tissue Specific Root eFP',
+    id: 'TissueSpecificRootView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificShootApicalMeristem/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificShootApicalMeristem/Arabidopsis_thaliana.xml',
+    name: 'Tissue Specific Shoot Apical Meristem eFP',
+    id: 'TissueSpecificShootApicalMeristemView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificStemEpidermis/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificStemEpidermis/Arabidopsis_thaliana.xml',
+    name: 'Tissue Specific Stem Epidermis eFP',
+    id: 'TissueSpecificStemEpidermisView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificStigmaAndOvaries/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificStigmaAndOvaries/Arabidopsis_thaliana.xml',
+    name: 'Tissue Specific Stigma And Ovaries eFP',
+    id: 'TissueSpecificStigmaAndOvariesView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificTrichomes/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificTrichomes/Arabidopsis_thaliana.xml',
+    name: 'Tissue Specific Trichomes eFP',
+    id: 'TissueSpecificTrichomesView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificXylemAndCork/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/TissueSpecificXylemAndCork/Arabidopsis_thaliana.xml',
+    name: 'Tissue Specific Xylem And Cork eFP',
+    id: 'TissueSpecificXylemAndCorkView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressBotrytiscinerea/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressBotrytiscinerea/Arabidopsis_thaliana.xml',
+    name: 'Biotic Stress Botrytis cinerea eFP',
+    id: 'BioticStressBotrytiscinereaView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressElicitors/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressElicitors/Arabidopsis_thaliana.xml',
+    name: 'Biotic Stress Elicitors eFP',
+    id: 'BioticStressElicitorsView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressErysipheorontii/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressErysipheorontii/Arabidopsis_thaliana.xml',
+    name: 'Biotic Stress Erysiphe orontii eFP',
+    id: 'BioticStressErysipheorontiiView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressHyaloperonosporaarabidopsidis/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressHyaloperonosporaarabidopsidis/Arabidopsis_thaliana.xml',
+    name: 'Biotic Stress Hyaloperonospora arabidopsidis eFP',
+    id: 'BioticStressHyaloperonosporaarabidopsidisView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressMyzuspersicaere/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressMyzuspersicaere/Arabidopsis_thaliana.xml',
+    name: 'Biotic Stress Myzus persicaere eFP',
+    id: 'BioticStressMyzuspersicaereView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressPhytophthorainfestans/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressPhytophthorainfestans/Arabidopsis_thaliana.xml',
+    name: 'Biotic Stress Phytophthora infestans eFP',
+    id: 'BioticStressPhytophthorainfestansView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressPseudomonassyringae/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressPseudomonassyringae/Arabidopsis_thaliana.xml',
+    name: 'Biotic Stress Pseudomonas syringae eFP',
+    id: 'BioticStressPseudomonassyringaeView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressGolovinomycesorontii/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/BioticStressGolovinomycesorontii/Arabidopsis_thaliana.xml',
+    name: 'Biotic Stress Golovinomyces orontii eFP',
+    id: 'BioticStressGolovinomycesorontiiView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/RootImmunityElicitation/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/RootImmunityElicitation/Arabidopsis_thaliana.xml',
+    name: 'Root Immunity Elicitation eFP (RNA-Seq data)',
+    id: 'RootImmunityElicitationView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/Germination/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/Germination/Arabidopsis_thaliana.xml',
+    name: 'Germination eFP (RNA-Seq data)',
+    id: 'GerminationView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/ShootApex/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/ShootApex/Arabidopsis_thaliana.xml',
+    name: 'Shoot Apex eFP (RNA-Seq data)',
+    id: 'ShootApexView',
+  },
+  {
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/SingleCell/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/experiment/efps/SingleCell/Arabidopsis_thaliana.xml',
+    name: 'Single Cell eFP (RNA-Seq data)',
+    id: 'SingleCellView',
+  },
+]
+export const experimentEFPs = makeEfps(experimentEFPViews)
diff --git a/Eplant/views/PlantEFP/PlantEFP.tsx b/Eplant/views/PlantEFP/PlantEFP.tsx
new file mode 100644
index 00000000..1f1e1da5
--- /dev/null
+++ b/Eplant/views/PlantEFP/PlantEFP.tsx
@@ -0,0 +1,88 @@
+import { useCallback, useEffect, useState } from 'react'
+import { debounce } from 'lodash'
+import { useOutletContext, useSearchParams } from 'react-router-dom'
+
+import { ViewContext } from '@eplant/UI/Layout/ViewContainer/types'
+import { flattenState } from '@eplant/util/router'
+import { useQuery } from '@tanstack/react-query'
+
+import { EFPViewerActions } from '../eFP/Viewer/actions'
+import {
+  EFPViewer,
+  EFPViewerLoader,
+  ValidateEFPViewerParams,
+} from '../eFP/Viewer/EFPViewer'
+import { EFPViewerData, EFPViewerState } from '../eFP/Viewer/types'
+
+import { plantEFPs, plantEFPViews } from './efps'
+
+export const PlantEFP = () => {
+  const { geneticElement, setIsLoading, setLoadAmount } =
+    useOutletContext<ViewContext>()
+
+  const [searchParams, setSearchParams] = useSearchParams()
+  const [viewState, setViewState] = useState<EFPViewerState>({
+    activeView: '',
+    colorMode: 'absolute',
+    transform: {
+      offset: {
+        x: 0,
+        y: 0,
+      },
+      zoom: 1,
+    },
+    sortBy: 'name',
+    maskingEnabled: false,
+    maskThreshold: 100,
+  })
+  const { data, isLoading, isError, error } = useQuery<EFPViewerData>({
+    queryKey: [`plantEFP-${geneticElement?.id}`],
+    queryFn: async () => {
+      if (!geneticElement) {
+        throw Error('No gene')
+      }
+      const data = EFPViewerLoader(
+        geneticElement,
+        plantEFPs,
+        plantEFPViews,
+        setLoadAmount
+      )
+      return data
+    },
+    enabled: !!geneticElement,
+  })
+
+  useEffect(() => {
+    setViewState(ValidateEFPViewerParams(searchParams, plantEFPs))
+  }, [])
+
+  useEffect(() => {
+    setIsLoading(isLoading)
+  }, [isLoading, setIsLoading])
+
+  const debouncedUpdateSearchParams = useCallback(
+    debounce((updatedState) => {
+      setSearchParams(new URLSearchParams(flattenState(updatedState)))
+    }, 200), // 200ms delay before updating the URL
+    [setSearchParams]
+  )
+
+  useEffect(() => {
+    debouncedUpdateSearchParams(viewState)
+    return () => {
+      debouncedUpdateSearchParams.cancel()
+    }
+  }, [viewState, debouncedUpdateSearchParams])
+
+  if (isLoading || isError || !data) return <></>
+  return (
+    <EFPViewer
+      data={data}
+      state={viewState}
+      geneticElement={geneticElement}
+      efps={plantEFPs}
+      actions={EFPViewerActions}
+      setViewState={setViewState}
+    ></EFPViewer>
+  )
+}
diff --git a/Eplant/views/PlantEFP/efps.tsx b/Eplant/views/PlantEFP/efps.tsx
new file mode 100644
index 00000000..94aca755
--- /dev/null
+++ b/Eplant/views/PlantEFP/efps.tsx
@@ -0,0 +1,22 @@
+import { EFPViewerData } from '../eFP/Viewer/types'
+import { makeEfps } from '../eFP/Viewer/util'
+
+export const plantEFPViews: EFPViewerData['views'] = [
+  {
+    name: 'AtGenExpress eFP',
+    id: 'atgenexpress',
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/plant/AtGenExpress/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/plant/AtGenExpress/Arabidopsis_thaliana.xml',
+  },
+  {
+    name: 'Klepikova eFP (RNA-Seq data)',
+    id: 'klepikova',
+    svgURL:
+      'https://bar.utoronto.ca/eplant/data/plant/Klepikova/Arabidopsis_thaliana.svg',
+    xmlURL:
+      'https://bar.utoronto.ca/eplant/data/plant/Klepikova/Arabidopsis_thaliana.xml',
+  },
+]
+export const plantEFPs = makeEfps(plantEFPViews)
diff --git a/Eplant/views/PlantEFP/index.tsx b/Eplant/views/PlantEFP/index.tsx
index 36c62eb8..d8915340 100644
--- a/Eplant/views/PlantEFP/index.tsx
+++ b/Eplant/views/PlantEFP/index.tsx
@@ -4,6 +4,7 @@ import ThumbnailDark from '../../../thumbnails/plant-efp-dark.png'
 import ThumbnailLight from '../../../thumbnails/plant-efp-light.png'
 import EFP from '../eFP'
 import EFPViewer from '../eFP/Viewer'
+// import EFPViewer from '../eFP/Viewer'
 import { EFPViewerData } from '../eFP/Viewer/types'
 import { makeEfps } from '../eFP/Viewer/util'
 
@@ -30,7 +31,7 @@ const views: EFPViewerData['views'] = [
 const efps: EFP[] = makeEfps(views)
 
 export default new EFPViewer(
-  'plant',
+  'plant-efp',
   'Plant eFP',
   views,
   efps,
diff --git a/Eplant/views/eFP/Viewer/EFPList.tsx b/Eplant/views/eFP/Viewer/EFPList.tsx
new file mode 100644
index 00000000..063773e0
--- /dev/null
+++ b/Eplant/views/eFP/Viewer/EFPList.tsx
@@ -0,0 +1,85 @@
+import { memo, startTransition } from 'react'
+import {
+  areEqual,
+  FixedSizeList as List,
+  ListChildComponentProps,
+} from 'react-window'
+
+import { Tooltip } from '@mui/material'
+
+import EFPPreview from '../EFPPreview'
+
+import { EFPListProps } from './types'
+
+const EFPListItem = memo(
+  function EFPRow({ index: i, data }: { index: number; data: EFPListProps }) {
+    return (
+      <Tooltip placement='right' arrow title={<div>{data.views[i].name}</div>}>
+        <div>
+          <EFPPreview
+            sx={() => ({
+              width: '108px',
+              height: '75px',
+              zIndex: 100,
+            })}
+            data={data.viewData[i]}
+            key={data.views[i].id}
+            // Why is this an error? It is guarded by the above check.
+            gene={data.geneticElement}
+            selected={data.views[i].id == data.activeView.id}
+            view={data.views[i]}
+            maskThreshold={data.maskThreshold}
+            onClick={() => {
+              startTransition(() => {
+                data.setActiveView(data.views[i].id)
+              })
+            }}
+            colorMode={data.colorMode}
+            maskingEnabled={data.maskingEnabled}
+          />
+        </div>
+      </Tooltip>
+    )
+  },
+  (prev, next) => {
+    return (
+      prev.data.views[prev.index].id === next.data.views[next.index].id &&
+      prev.data.colorMode === next.data.colorMode &&
+      prev.data.geneticElement.id === next.data.geneticElement.id &&
+      prev.data.activeView === next.data.activeView &&
+      prev.index == next.index &&
+      prev.data.maskingEnabled == next.data.maskingEnabled &&
+      prev.data.maskThreshold == next.data.maskThreshold
+    )
+  }
+)
+
+const EFPListRow = memo(function EFPListRow({
+  style,
+  index,
+  data,
+}: ListChildComponentProps) {
+  return (
+    <div style={style}>
+      <EFPListItem index={index} data={data} />
+    </div>
+  )
+}, areEqual)
+
+export const EFPListMemoized = function EFPList(props: EFPListProps) {
+  return (
+    <List
+      height={props.height}
+      itemCount={props.views.length}
+      itemSize={75 + 12}
+      width={130}
+      style={{
+        zIndex: 10,
+        scrollbarWidth: 'none',
+      }}
+      itemData={props}
+    >
+      {EFPListRow}
+    </List>
+  )
+}
diff --git a/Eplant/views/eFP/Viewer/EFPViewer.tsx b/Eplant/views/eFP/Viewer/EFPViewer.tsx
new file mode 100644
index 00000000..03195576
--- /dev/null
+++ b/Eplant/views/eFP/Viewer/EFPViewer.tsx
@@ -0,0 +1,351 @@
+import { useMemo, useRef, useState } from 'react'
+
+import GeneticElement from '@eplant/GeneticElement'
+import Dropdown from '@eplant/UI/Dropdown'
+import NotSupported from '@eplant/UI/Layout/ViewNotSupported'
+import PanZoom from '@eplant/util/PanZoom'
+import { StateActions } from '@eplant/util/stateUtils'
+import { ActionsPanel } from '@eplant/util/stateUtils/ActionsPanel'
+import useDimensions from '@eplant/util/useDimensions'
+import { ViewDataError } from '@eplant/View/viewData'
+import { Box, MenuItem, Typography } from '@mui/material'
+
+import { ColorMode, EFPId } from '../types'
+import EFP from '..'
+
+import { EFPListMemoized } from './EFPList'
+import GeneDistributionChart from './GeneDistributionChart'
+import Legend from './legend'
+import MaskModal from './MaskModal'
+import { EFPViewerData, EFPViewerSortTypes, EFPViewerState } from './types'
+
+interface EFPViewerProps {
+  data: EFPViewerData
+  state: EFPViewerState
+  geneticElement: GeneticElement | null
+  efps: EFP[]
+  actions: StateActions<EFPViewerState>
+  setViewState: (state: EFPViewerState) => void
+}
+export const EFPViewer = ({
+  data,
+  state,
+  geneticElement,
+  efps,
+  actions,
+  setViewState,
+}: EFPViewerProps) => {
+  const [maskModalVisible, setMaskModalVisible] = useState(false)
+  const viewIndices: number[] = [...Array(data.views.length).keys()]
+  viewIndices.sort((a, b) => {
+    if (state.sortBy == 'name')
+      return data.views[a].name.localeCompare(data.views[b].name)
+    else {
+      return data.viewData[b].max - data.viewData[a].max
+    }
+  })
+  const sortedViews = viewIndices.map((i) => data.views[i])
+  const sortedViewData = viewIndices.map((i) => data.viewData[i])
+  const sortedEfps = viewIndices.map((i) => efps[i])
+
+  let activeViewIndex = useMemo(
+    () => sortedEfps.findIndex((v) => v.id == state.activeView),
+    [state.activeView, ...sortedEfps.map((v) => v.id)]
+  )
+  if (activeViewIndex == -1) {
+    activeViewIndex = 0
+    setViewState({ ...state, activeView: efps[0].id })
+  }
+  const efp = useMemo(() => {
+    const Component = sortedEfps[activeViewIndex].component
+    return (
+      <>
+        <Component
+          activeData={{
+            ...sortedViewData[activeViewIndex],
+          }}
+          state={{
+            colorMode: state.colorMode,
+            renderAsThumbnail: false,
+            maskThreshold: state.maskThreshold,
+            maskingEnabled: state.maskingEnabled,
+          }}
+          geneticElement={geneticElement}
+          dispatch={() => {}}
+        />
+      </>
+    )
+  }, [
+    activeViewIndex,
+    geneticElement?.id,
+    sortedViewData[activeViewIndex],
+    state.colorMode,
+    state.maskThreshold,
+    state.maskingEnabled,
+  ])
+  const ref = useRef<HTMLDivElement>(null)
+  const dimensions = useDimensions(ref)
+
+  if (!geneticElement) return <></>
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        height: '100%',
+        position: 'relative',
+      }}
+      ref={ref}
+    >
+      <Box
+        sx={{
+          width: '100%',
+          height: '100%',
+          position: 'absolute',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'stretch',
+          justifyContent: 'stretch',
+          overflow: 'hidden',
+        }}
+      >
+        {/* Left column of EFP Previews */}
+        <Box
+          sx={{
+            padding: 0,
+            position: 'relative',
+          }}
+        >
+          {/* Dropdown menus for selecting a view and sort options */}
+          <Box sx={{ marginBottom: 1, display: 'flex', gap: 1 }}>
+            <Dropdown
+              color='secondary'
+              variant='text'
+              size='small'
+              sx={{ padding: '0.25rem 0.5rem', minWidth: 'fit-content' }}
+              endIcon={undefined}
+              options={sortedViews.map((view) => (
+                <MenuItem
+                  selected={state.activeView == view.id ? true : false}
+                  onClick={() =>
+                    setViewState(
+                      actions['Set Active View'].mutation(state, view.id)
+                    )
+                  }
+                  key={view.id}
+                >
+                  {view.name}
+                </MenuItem>
+              ))}
+            >
+              View
+            </Dropdown>
+            <Dropdown
+              variant='text'
+              size='small'
+              sx={{ padding: '0.25rem 0.5rem', minWidth: 'fit-content' }}
+              endIcon={undefined}
+              color='secondary'
+              options={[
+                <MenuItem
+                  selected={state.sortBy == 'name' ? true : false}
+                  key='byName'
+                  onClick={() =>
+                    setViewState(actions['Sort by'].mutation(state, 'name'))
+                  }
+                >
+                  By name
+                </MenuItem>,
+                <MenuItem
+                  selected={state.sortBy == 'expression-level' ? true : false}
+                  key='byExpression'
+                  onClick={() =>
+                    setViewState(
+                      actions['Sort by'].mutation(state, 'expression')
+                    )
+                  }
+                >
+                  By expression level
+                </MenuItem>,
+              ]}
+            >
+              Sort
+            </Dropdown>
+          </Box>
+          {/* The actual stack of EFP Previews */}
+          <EFPListMemoized
+            height={dimensions.height - 5}
+            activeView={sortedEfps[activeViewIndex]}
+            viewData={sortedViewData}
+            setActiveView={(viewID: EFPId) =>
+              setViewState(actions['Set Active View'].mutation(state, viewID))
+            }
+            geneticElement={geneticElement}
+            views={sortedEfps}
+            colorMode={state.colorMode}
+            maskThreshold={state.maskThreshold}
+            maskingEnabled={state.maskingEnabled}
+          />
+        </Box>
+        {/* main canvas area */}
+        <Box
+          sx={(theme) => ({
+            flexGrow: 1,
+            position: 'relative',
+            backgroundColor: theme.palette.background.paperOverlay,
+            border: '1px solid',
+            borderColor: theme.palette.background.edge,
+            borderRadius: 1,
+          })}
+        >
+          {data.viewData[activeViewIndex].supported ? (
+            <>
+              <div>
+                <Typography
+                  variant='h6'
+                  style={{ position: 'relative', top: '12px', left: '12px' }}
+                >
+                  {data.views.find((v) => v.id === state.activeView)?.name}
+                  {': '}
+                  {geneticElement?.id}
+                </Typography>
+
+                {data.views[activeViewIndex].name !== 'cellEFP' && (
+                  <GeneDistributionChart
+                    data={{ ...data.viewData[activeViewIndex] }}
+                  />
+                )}
+              </div>
+              <MaskModal
+                state={state}
+                isVisible={maskModalVisible}
+                onClose={() => setMaskModalVisible(false)}
+                onSubmit={(threshold) =>
+                  setViewState(
+                    actions['Set Mask Threshold'].mutation(state, threshold)
+                  )
+                }
+              />
+              <Legend
+                sx={(theme) => ({
+                  position: 'absolute',
+                  left: theme.spacing(2),
+                  bottom: theme.spacing(2),
+                  zIndex: 10,
+                })}
+                data={{
+                  ...data.viewData[activeViewIndex],
+                }}
+                maskThreshold={state.maskThreshold}
+                colorMode={state.colorMode}
+                maskingEnabled={state.maskingEnabled}
+              />
+              <PanZoom
+                sx={(theme) => ({
+                  position: 'absolute',
+                  top: theme.spacing(0),
+                  left: theme.spacing(0),
+                  width: '100%',
+                  height: '100%',
+                  zIndex: 0,
+                })}
+                transform={state.transform}
+                onTransformChange={(transform) => {
+                  setViewState(
+                    actions['Set Transform'].mutation(state, transform)
+                  )
+                }}
+              >
+                {efp}
+              </PanZoom>
+              <ActionsPanel
+                actions={actions}
+                prevState={state}
+                setState={setViewState}
+              ></ActionsPanel>
+            </>
+          ) : (
+            <div
+              style={{
+                position: 'absolute',
+                padding: '10px',
+                width: '100%',
+              }}
+            >
+              <NotSupported
+                geneticElement={geneticElement}
+                viewName={sortedEfps[activeViewIndex].name}
+              ></NotSupported>
+            </div>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+export const ValidateEFPViewerParams = (
+  params: URLSearchParams,
+  efps: EFP[]
+): EFPViewerState => {
+  const activeViewParam = params.get('activeView') ?? ''
+  const activeView =
+    efps.find((efp) => efp.name === activeViewParam)?.name ?? ''
+  const colorModeParam = params.get('colorMode') ?? 'absolute'
+  const colorMode: ColorMode =
+    colorModeParam === 'absolute' || colorModeParam === 'relative'
+      ? colorModeParam
+      : 'absolute'
+  const transform = {
+    offset: {
+      x: parseInt(params.get('x') || '0') || 0,
+      y: parseInt(params.get('y') || '0') || 0,
+    },
+    zoom: parseInt(params.get('zoom') || '1') || 1,
+  }
+  const sortByParam = params.get('sortBy') ?? 'name'
+  const sortBy: EFPViewerSortTypes =
+    sortByParam === 'name' || sortByParam === 'expression-level'
+      ? sortByParam
+      : 'name'
+
+  const maskingEnabled = params.get('maskingEnabled') === 'true' ? true : false
+  const maskThreshold = parseInt(params.get('maskThreshold') || '100') || 100
+
+  return {
+    activeView: activeView,
+    transform: transform,
+    colorMode: colorMode,
+    sortBy: sortBy,
+    maskingEnabled: maskingEnabled,
+    maskThreshold: maskThreshold,
+  }
+}
+
+export const EFPViewerLoader = async (
+  gene: GeneticElement | null,
+  efps: EFP[],
+  views: EFPViewerData['views'],
+  loadEvent: (loaded: number) => void
+) => {
+  if (!gene) throw ViewDataError.UNSUPPORTED_GENE
+  // Load all the views
+  const loadingProgress = Array(views.length).fill(0)
+  let totalLoaded = 0
+  const viewData = await Promise.all(
+    efps.map(async (efp, i) => {
+      const data = efp.getInitialData(gene, (progress) => {
+        totalLoaded -= loadingProgress[i]
+        loadingProgress[i] = progress
+        totalLoaded += loadingProgress[i]
+        loadEvent(totalLoaded / loadingProgress.length)
+      })
+      loadingProgress[i] = 100
+      return data
+    })
+  )
+  loadEvent(100)
+  return {
+    views: views,
+    viewData: viewData,
+  }
+}
diff --git a/Eplant/views/eFP/Viewer/MaskModal.tsx b/Eplant/views/eFP/Viewer/MaskModal.tsx
index c9e07689..56efaacf 100644
--- a/Eplant/views/eFP/Viewer/MaskModal.tsx
+++ b/Eplant/views/eFP/Viewer/MaskModal.tsx
@@ -14,12 +14,13 @@ import { EFPViewerState } from './types'
 
 // Modal component with a slider
 interface MaskModalProps {
+  isVisible: boolean
   state: EFPViewerState
   onClose: () => void
   onSubmit: (threshhold: number) => void
 }
 
-const MaskModal = ({ state, onClose, onSubmit }: MaskModalProps) => {
+const MaskModal = ({ isVisible, state, onClose, onSubmit }: MaskModalProps) => {
   const [sliderValue, setSliderValue] = useState<number>(state.maskThreshold)
   const theme = useTheme()
   const handleSliderChange = (event: Event, newValue: number | number[]) => {
@@ -35,7 +36,7 @@ const MaskModal = ({ state, onClose, onSubmit }: MaskModalProps) => {
     onSubmit(sliderValue)
   }
   return (
-    <Modal open={state.maskModalVisible} onClose={handleClose}>
+    <Modal open={isVisible} onClose={handleClose}>
       <div
         style={{
           width: 500,
diff --git a/Eplant/views/eFP/Viewer/actions.tsx b/Eplant/views/eFP/Viewer/actions.tsx
new file mode 100644
index 00000000..d7bc0cd1
--- /dev/null
+++ b/Eplant/views/eFP/Viewer/actions.tsx
@@ -0,0 +1,60 @@
+import { StateActions } from '@eplant/util/stateUtils'
+import ColorLensIcon from '@mui/icons-material/ColorLens'
+import SettingsIcon from '@mui/icons-material/Settings'
+import YoutubeSearchedForRoundedIcon from '@mui/icons-material/YoutubeSearchedForRounded'
+
+import { EFPId } from '../types'
+
+import { EFPViewerSortTypes, EFPViewerState } from './types'
+export const EFPViewerActions: StateActions<EFPViewerState> = {
+  'Reset Pan/Zoom': {
+    icon: <YoutubeSearchedForRoundedIcon />,
+    mutation: (prevState) => ({
+      ...prevState,
+      transform: {
+        offset: {
+          x: 0,
+          y: 0,
+        },
+        zoom: 1,
+      },
+    }),
+    rendered: true,
+  },
+  'Toggle Color Mode': {
+    icon: <ColorLensIcon />,
+    mutation: (prevState) => ({
+      ...prevState,
+      colorMode: prevState.colorMode == 'absolute' ? 'relative' : 'absolute',
+    }),
+    rendered: true,
+  },
+  'Set Transform': {
+    mutation: (prevState, transform) => ({
+      ...prevState,
+      transform: transform,
+    }),
+    rendered: false,
+  },
+  'Set Mask Threshold': {
+    mutation: (prevState, threshold) => ({
+      ...prevState,
+      maskThreshold: threshold,
+    }),
+    rendered: false,
+  },
+  'Sort by': {
+    mutation: (prevState, sortby: EFPViewerSortTypes) => ({
+      ...prevState,
+      sortBy: sortby,
+    }),
+    rendered: false,
+  },
+  'Set Active View': {
+    mutation: (prevState, activeView: EFPId) => ({
+      ...prevState,
+      activeView: activeView,
+    }),
+    rendered: false,
+  },
+}
diff --git a/Eplant/views/eFP/Viewer/index.tsx b/Eplant/views/eFP/Viewer/index.tsx
index 3fff232b..4e561cd3 100644
--- a/Eplant/views/eFP/Viewer/index.tsx
+++ b/Eplant/views/eFP/Viewer/index.tsx
@@ -32,101 +32,12 @@ import Legend from './legend'
 import MaskModal from './MaskModal'
 import { EFPViewerAction, EFPViewerData, EFPViewerState } from './types'
 
-type EFPListProps = {
-  geneticElement: GeneticElement
-  views: EFP[]
-  viewData: EFPData[]
-  activeView: EFP
-  dispatch: ViewProps<
-    EFPViewerData,
-    EFPViewerState,
-    EFPViewerAction
-  >['dispatch']
-  height: number
-  colorMode: 'absolute' | 'relative'
-  maskThreshold: number
-  maskingEnabled: boolean
-}
-
 interface ICitationProps {
   activeData?: EFPViewerData
   state?: EFPViewerState
   gene?: GeneticElement | null
 }
 
-const EFPListItem = memo(
-  function EFPRow({ index: i, data }: { index: number; data: EFPListProps }) {
-    return (
-      <Tooltip placement='right' arrow title={<div>{data.views[i].name}</div>}>
-        <div>
-          <EFPPreview
-            sx={() => ({
-              width: '108px',
-              height: '75px',
-              zIndex: 100,
-            })}
-            data={data.viewData[i]}
-            key={data.views[i].id}
-            // Why is this an error? It is guarded by the above check.
-            gene={data.geneticElement}
-            selected={data.views[i].id == data.activeView.id}
-            view={data.views[i]}
-            maskThreshold={data.maskThreshold}
-            onClick={() => {
-              startTransition(() => {
-                data.dispatch({ type: 'set-view', id: data.views[i].id })
-              })
-            }}
-            colorMode={data.colorMode}
-            maskingEnabled={data.maskingEnabled}
-          />
-        </div>
-      </Tooltip>
-    )
-  },
-  (prev, next) => {
-    return (
-      prev.data.views[prev.index].id === next.data.views[next.index].id &&
-      prev.data.colorMode === next.data.colorMode &&
-      prev.data.geneticElement.id === next.data.geneticElement.id &&
-      prev.data.activeView === next.data.activeView &&
-      prev.index == next.index &&
-      prev.data.maskingEnabled == next.data.maskingEnabled &&
-      prev.data.maskThreshold == next.data.maskThreshold
-    )
-  }
-)
-
-const EFPListRow = memo(function EFPListRow({
-  style,
-  index,
-  data,
-}: ListChildComponentProps) {
-  return (
-    <div style={style}>
-      <EFPListItem index={index} data={data} />
-    </div>
-  )
-}, areEqual)
-
-export const EFPListMemoized = function EFPList(props: EFPListProps) {
-  return (
-    <List
-      height={props.height}
-      itemCount={props.views.length}
-      itemSize={75 + 12}
-      width={130}
-      style={{
-        zIndex: 10,
-        scrollbarWidth: 'none',
-      }}
-      itemData={props}
-    >
-      {EFPListRow}
-    </List>
-  )
-}
-
 export default class EFPViewer
   implements View<EFPViewerData, EFPViewerState, EFPViewerAction>
 {
@@ -144,7 +55,6 @@ export default class EFPViewer
       sortBy: 'name',
       maskingEnabled: false,
       maskThreshold: 100,
-      maskModalVisible: false,
     }
   }
   constructor(
@@ -220,25 +130,6 @@ export default class EFPViewer
               ? ('relative' as const)
               : ('absolute' as const),
         }
-      case 'toggle-mask-modal':
-        if (state.maskingEnabled) {
-          return {
-            ...state,
-            maskingEnabled: !state.maskingEnabled,
-          }
-        } else {
-          return {
-            ...state,
-            maskModalVisible: !state.maskModalVisible,
-          }
-        }
-      case 'set-mask-threshold':
-        return {
-          ...state,
-          maskThreshold: action.threshold,
-          maskingEnabled: !state.maskingEnabled,
-          maskModalVisible: !state.maskModalVisible,
-        }
       default:
         return state
     }
@@ -249,247 +140,248 @@ export default class EFPViewer
     dispatch,
     geneticElement,
   }: ViewProps<EFPViewerData, EFPViewerState, EFPViewerAction>) => {
-    const viewIndices: number[] = [...Array(activeData.views.length).keys()]
-    viewIndices.sort((a, b) => {
-      if (state.sortBy == 'name')
-        return activeData.views[a].name.localeCompare(activeData.views[b].name)
-      else {
-        return activeData.viewData[b].max - activeData.viewData[a].max
-      }
-    })
-    const sortedViews = viewIndices.map((i) => activeData.views[i])
-    const sortedViewData = viewIndices.map((i) => activeData.viewData[i])
-    const sortedEfps = viewIndices.map((i) => this.efps[i])
+    // const viewIndices: number[] = [...Array(activeData.views.length).keys()]
+    // viewIndices.sort((a, b) => {
+    //   if (state.sortBy == 'name')
+    //     return activeData.views[a].name.localeCompare(activeData.views[b].name)
+    //   else {
+    //     return activeData.viewData[b].max - activeData.viewData[a].max
+    //   }
+    // })
+    // const sortedViews = viewIndices.map((i) => activeData.views[i])
+    // const sortedViewData = viewIndices.map((i) => activeData.viewData[i])
+    // const sortedEfps = viewIndices.map((i) => this.efps[i])
 
-    let activeViewIndex = useMemo(
-      () => sortedEfps.findIndex((v) => v.id == state.activeView),
-      [state.activeView, ...sortedEfps.map((v) => v.id)]
-    )
-    if (activeViewIndex == -1) {
-      activeViewIndex = 0
-      dispatch({
-        type: 'set-view',
-        id: sortedEfps[0].id,
-      })
-    }
-    const efp = useMemo(() => {
-      const Component = sortedEfps[activeViewIndex].component
-      return (
-        <>
-          <Component
-            activeData={{
-              ...sortedViewData[activeViewIndex],
-            }}
-            state={{
-              colorMode: state.colorMode,
-              renderAsThumbnail: false,
-              maskThreshold: state.maskThreshold,
-              maskingEnabled: state.maskingEnabled,
-            }}
-            geneticElement={geneticElement}
-            dispatch={() => {}}
-          />
-        </>
-      )
-    }, [
-      activeViewIndex,
-      geneticElement?.id,
-      dispatch,
-      sortedViewData[activeViewIndex],
-      state.colorMode,
-      state.maskThreshold,
-      state.maskingEnabled,
-    ])
-    const ref = useRef<HTMLDivElement>(null)
-    const dimensions = useDimensions(ref)
+    // let activeViewIndex = useMemo(
+    //   () => sortedEfps.findIndex((v) => v.id == state.activeView),
+    //   [state.activeView, ...sortedEfps.map((v) => v.id)]
+    // )
+    // if (activeViewIndex == -1) {
+    //   activeViewIndex = 0
+    //   dispatch({
+    //     type: 'set-view',
+    //     id: sortedEfps[0].id,
+    //   })
+    // }
+    // const efp = useMemo(() => {
+    //   const Component = sortedEfps[activeViewIndex].component
+    //   return (
+    //     <>
+    //       <Component
+    //         activeData={{
+    //           ...sortedViewData[activeViewIndex],
+    //         }}
+    //         state={{
+    //           colorMode: state.colorMode,
+    //           renderAsThumbnail: false,
+    //           maskThreshold: state.maskThreshold,
+    //           maskingEnabled: state.maskingEnabled,
+    //         }}
+    //         geneticElement={geneticElement}
+    //         dispatch={() => {}}
+    //       />
+    //     </>
+    //   )
+    // }, [
+    //   activeViewIndex,
+    //   geneticElement?.id,
+    //   dispatch,
+    //   sortedViewData[activeViewIndex],
+    //   state.colorMode,
+    //   state.maskThreshold,
+    //   state.maskingEnabled,
+    // ])
+    // const ref = useRef<HTMLDivElement>(null)
+    // const dimensions = useDimensions(ref)
 
-    if (!geneticElement) return <></>
-    return (
-      <Box
-        sx={{
-          width: '100%',
-          height: '100%',
-          position: 'relative',
-        }}
-        ref={ref}
-      >
-        <Box
-          sx={{
-            width: '100%',
-            height: '100%',
-            position: 'absolute',
-            display: 'flex',
-            flexDirection: 'row',
-            alignItems: 'stretch',
-            justifyContent: 'stretch',
-            overflow: 'hidden',
-          }}
-        >
-          {/* Left column of EFP Previews */}
-          <Box
-            sx={{
-              padding: 0,
-              position: 'relative',
-            }}
-          >
-            {/* Dropdown menus for selecting a view and sort options */}
-            <Box sx={{ marginBottom: 1, display: 'flex', gap: 1 }}>
-              <Dropdown
-                color='secondary'
-                variant='text'
-                size='small'
-                sx={{ padding: '0.25rem 0.5rem', minWidth: 'fit-content' }}
-                endIcon={undefined}
-                options={sortedViews.map((view) => (
-                  <MenuItem
-                    selected={state.activeView == view.id ? true : false}
-                    onClick={() => dispatch({ type: 'set-view', id: view.id })}
-                    key={view.id}
-                  >
-                    {view.name}
-                  </MenuItem>
-                ))}
-              >
-                View
-              </Dropdown>
-              <Dropdown
-                variant='text'
-                size='small'
-                sx={{ padding: '0.25rem 0.5rem', minWidth: 'fit-content' }}
-                endIcon={undefined}
-                color='secondary'
-                options={[
-                  <MenuItem
-                    selected={state.sortBy == 'name' ? true : false}
-                    key='byName'
-                    onClick={() => dispatch({ type: 'sort-by', by: 'name' })}
-                  >
-                    By name
-                  </MenuItem>,
-                  <MenuItem
-                    selected={state.sortBy == 'expression-level' ? true : false}
-                    key='byExpression'
-                    onClick={() =>
-                      dispatch({
-                        type: 'sort-by',
-                        by: 'expression-level',
-                      })
-                    }
-                  >
-                    By expression level
-                  </MenuItem>,
-                ]}
-              >
-                Sort
-              </Dropdown>
-            </Box>
-            {/* The actual stack of EFP Previews */}
-            <EFPListMemoized
-              height={dimensions.height - 5}
-              activeView={sortedEfps[activeViewIndex]}
-              dispatch={dispatch}
-              viewData={sortedViewData}
-              geneticElement={geneticElement}
-              views={sortedEfps}
-              colorMode={state.colorMode}
-              maskThreshold={state.maskThreshold}
-              maskingEnabled={state.maskingEnabled}
-            />
-          </Box>
-          {/* main canvas area */}
-          <Box
-            sx={(theme) => ({
-              flexGrow: 1,
-              position: 'relative',
-              backgroundColor: theme.palette.background.paperOverlay,
-              border: '1px solid',
-              borderColor: theme.palette.background.edge,
-              borderRadius: 1,
-            })}
-          >
-            {activeData.viewData[activeViewIndex].supported ? (
-              <>
-                <div>
-                  <Typography
-                    variant='h6'
-                    style={{ position: 'relative', top: '12px', left: '12px' }}
-                  >
-                    {
-                      activeData.views.find((v) => v.id === state.activeView)
-                        ?.name
-                    }
-                    {': '}
-                    {geneticElement?.id}
-                  </Typography>
+    // if (!geneticElement) return <></>
+    // return (
+    //   <Box
+    //     sx={{
+    //       width: '100%',
+    //       height: '100%',
+    //       position: 'relative',
+    //     }}
+    //     ref={ref}
+    //   >
+    //     <Box
+    //       sx={{
+    //         width: '100%',
+    //         height: '100%',
+    //         position: 'absolute',
+    //         display: 'flex',
+    //         flexDirection: 'row',
+    //         alignItems: 'stretch',
+    //         justifyContent: 'stretch',
+    //         overflow: 'hidden',
+    //       }}
+    //     >
+    //       {/* Left column of EFP Previews */}
+    //       <Box
+    //         sx={{
+    //           padding: 0,
+    //           position: 'relative',
+    //         }}
+    //       >
+    //         {/* Dropdown menus for selecting a view and sort options */}
+    //         <Box sx={{ marginBottom: 1, display: 'flex', gap: 1 }}>
+    //           <Dropdown
+    //             color='secondary'
+    //             variant='text'
+    //             size='small'
+    //             sx={{ padding: '0.25rem 0.5rem', minWidth: 'fit-content' }}
+    //             endIcon={undefined}
+    //             options={sortedViews.map((view) => (
+    //               <MenuItem
+    //                 selected={state.activeView == view.id ? true : false}
+    //                 onClick={() => dispatch({ type: 'set-view', id: view.id })}
+    //                 key={view.id}
+    //               >
+    //                 {view.name}
+    //               </MenuItem>
+    //             ))}
+    //           >
+    //             View
+    //           </Dropdown>
+    //           <Dropdown
+    //             variant='text'
+    //             size='small'
+    //             sx={{ padding: '0.25rem 0.5rem', minWidth: 'fit-content' }}
+    //             endIcon={undefined}
+    //             color='secondary'
+    //             options={[
+    //               <MenuItem
+    //                 selected={state.sortBy == 'name' ? true : false}
+    //                 key='byName'
+    //                 onClick={() => dispatch({ type: 'sort-by', by: 'name' })}
+    //               >
+    //                 By name
+    //               </MenuItem>,
+    //               <MenuItem
+    //                 selected={state.sortBy == 'expression-level' ? true : false}
+    //                 key='byExpression'
+    //                 onClick={() =>
+    //                   dispatch({
+    //                     type: 'sort-by',
+    //                     by: 'expression-level',
+    //                   })
+    //                 }
+    //               >
+    //                 By expression level
+    //               </MenuItem>,
+    //             ]}
+    //           >
+    //             Sort
+    //           </Dropdown>
+    //         </Box>
+    //         {/* The actual stack of EFP Previews */}
+    //         <EFPListMemoized
+    //           height={dimensions.height - 5}
+    //           activeView={sortedEfps[activeViewIndex]}
+    //           dispatch={dispatch}
+    //           viewData={sortedViewData}
+    //           geneticElement={geneticElement}
+    //           views={sortedEfps}
+    //           colorMode={state.colorMode}
+    //           maskThreshold={state.maskThreshold}
+    //           maskingEnabled={state.maskingEnabled}
+    //         />
+    //       </Box>
+    //       {/* main canvas area */}
+    //       <Box
+    //         sx={(theme) => ({
+    //           flexGrow: 1,
+    //           position: 'relative',
+    //           backgroundColor: theme.palette.background.paperOverlay,
+    //           border: '1px solid',
+    //           borderColor: theme.palette.background.edge,
+    //           borderRadius: 1,
+    //         })}
+    //       >
+    //         {activeData.viewData[activeViewIndex].supported ? (
+    //           <>
+    //             <div>
+    //               <Typography
+    //                 variant='h6'
+    //                 style={{ position: 'relative', top: '12px', left: '12px' }}
+    //               >
+    //                 {
+    //                   activeData.views.find((v) => v.id === state.activeView)
+    //                     ?.name
+    //                 }
+    //                 {': '}
+    //                 {geneticElement?.id}
+    //               </Typography>
 
-                  {activeData.views[activeViewIndex].name !== 'cellEFP' && (
-                    <GeneDistributionChart
-                      data={{ ...activeData.viewData[activeViewIndex] }}
-                    />
-                  )}
-                </div>
-                <MaskModal
-                  state={state}
-                  onClose={() => dispatch({ type: 'toggle-mask-modal' })}
-                  onSubmit={(threshold) =>
-                    dispatch({
-                      type: 'set-mask-threshold',
-                      threshold: threshold,
-                    })
-                  }
-                />
-                <Legend
-                  sx={(theme) => ({
-                    position: 'absolute',
-                    left: theme.spacing(2),
-                    bottom: theme.spacing(2),
-                    zIndex: 10,
-                  })}
-                  data={{
-                    ...activeData.viewData[activeViewIndex],
-                  }}
-                  maskThreshold={state.maskThreshold}
-                  colorMode={state.colorMode}
-                  maskingEnabled={state.maskingEnabled}
-                />
-                <PanZoom
-                  sx={(theme) => ({
-                    position: 'absolute',
-                    top: theme.spacing(0),
-                    left: theme.spacing(0),
-                    width: '100%',
-                    height: '100%',
-                    zIndex: 0,
-                  })}
-                  transform={state.transform}
-                  onTransformChange={(transform) => {
-                    dispatch({
-                      type: 'set-transform',
-                      transform,
-                    })
-                  }}
-                >
-                  {efp}
-                </PanZoom>
-              </>
-            ) : (
-              <div
-                style={{
-                  position: 'absolute',
-                  padding: '10px',
-                  width: '100%',
-                }}
-              >
-                <NotSupported
-                  geneticElement={geneticElement}
-                  viewName={sortedEfps[activeViewIndex].name}
-                ></NotSupported>
-              </div>
-            )}
-          </Box>
-        </Box>
-      </Box>
-    )
+    //               {activeData.views[activeViewIndex].name !== 'cellEFP' && (
+    //                 <GeneDistributionChart
+    //                   data={{ ...activeData.viewData[activeViewIndex] }}
+    //                 />
+    //               )}
+    //             </div>
+    //             <MaskModal
+    //               state={state}
+    //               onClose={() => dispatch({ type: 'toggle-mask-modal' })}
+    //               onSubmit={(threshold) =>
+    //                 dispatch({
+    //                   type: 'set-mask-threshold',
+    //                   threshold: threshold,
+    //                 })
+    //               }
+    //             />
+    //             <Legend
+    //               sx={(theme) => ({
+    //                 position: 'absolute',
+    //                 left: theme.spacing(2),
+    //                 bottom: theme.spacing(2),
+    //                 zIndex: 10,
+    //               })}
+    //               data={{
+    //                 ...activeData.viewData[activeViewIndex],
+    //               }}
+    //               maskThreshold={state.maskThreshold}
+    //               colorMode={state.colorMode}
+    //               maskingEnabled={state.maskingEnabled}
+    //             />
+    //             <PanZoom
+    //               sx={(theme) => ({
+    //                 position: 'absolute',
+    //                 top: theme.spacing(0),
+    //                 left: theme.spacing(0),
+    //                 width: '100%',
+    //                 height: '100%',
+    //                 zIndex: 0,
+    //               })}
+    //               transform={state.transform}
+    //               onTransformChange={(transform) => {
+    //                 dispatch({
+    //                   type: 'set-transform',
+    //                   transform,
+    //                 })
+    //               }}
+    //             >
+    //               {efp}
+    //             </PanZoom>
+    //           </>
+    //         ) : (
+    //           <div
+    //             style={{
+    //               position: 'absolute',
+    //               padding: '10px',
+    //               width: '100%',
+    //             }}
+    //           >
+    //             <NotSupported
+    //               geneticElement={geneticElement}
+    //               viewName={sortedEfps[activeViewIndex].name}
+    //             ></NotSupported>
+    //           </div>
+    //         )}
+    //       </Box>
+    //     </Box>
+    //   </Box>
+    // )
+    return <div></div>
   }
   actions: View<EFPViewerData, EFPViewerState, EFPViewerAction>['actions'] = [
     {
diff --git a/Eplant/views/eFP/Viewer/types.tsx b/Eplant/views/eFP/Viewer/types.tsx
index 96fa5261..9f9931d4 100644
--- a/Eplant/views/eFP/Viewer/types.tsx
+++ b/Eplant/views/eFP/Viewer/types.tsx
@@ -1,6 +1,9 @@
+import GeneticElement from '@eplant/GeneticElement'
 import { Transform } from '@eplant/util/PanZoom'
 import { ColorMode, EFPData, EFPId } from '@eplant/views/eFP/types'
 
+import EFP from '..'
+
 export type EFPViewerData = {
   views: {
     svgURL: string
@@ -19,7 +22,6 @@ export type EFPViewerState = {
   colorMode: ColorMode
   sortBy: EFPViewerSortTypes
   maskingEnabled: boolean
-  maskModalVisible: boolean
   maskThreshold: number
 }
 
@@ -32,3 +34,15 @@ export type EFPViewerAction =
   | { type: 'toggle-masking' }
   | { type: 'toggle-mask-modal' }
   | { type: 'set-mask-threshold'; threshold: number }
+
+export type EFPListProps = {
+  geneticElement: GeneticElement
+  views: EFP[]
+  viewData: EFPData[]
+  activeView: EFP
+  setActiveView: (viewID: EFPId) => void
+  height: number
+  colorMode: 'absolute' | 'relative'
+  maskThreshold: number
+  maskingEnabled: boolean
+}
diff --git a/Eplant/views/eFP/index.tsx b/Eplant/views/eFP/index.tsx
index 7fd8bd7e..528f7eb0 100644
--- a/Eplant/views/eFP/index.tsx
+++ b/Eplant/views/eFP/index.tsx
@@ -95,12 +95,12 @@ export default class EFP implements View<EFPData, EFPState, EFPAction> {
       }
     )
 
-    loadEvent(0.2)
+    loadEvent(20)
     const samples: { [key: string]: number } = {}
     // Fetch the sample names in chunks to give a more accurate progress bar
     const chunks = _.chunk(sampleNames, 20)
-    let loaded = 0.2
-    const loadStep = (1 - loaded) / chunks.length
+    let loaded = 20
+    const loadStep = (100 - loaded) / chunks.length
     const data = (
       await Promise.all(
         chunks.map((names) =>
@@ -132,7 +132,7 @@ export default class EFP implements View<EFPData, EFPState, EFPAction> {
     ).flat()
 
     for (const { name, value } of data) samples[name] = value
-    loadEvent(1)
+    loadEvent(100)
     const groupsData = groups
       .map((group) => {
         const tissues: EFPTissue[] = group.tissues.map((tissue) => ({
diff --git a/index.html b/index.html
index ca175723..af309e32 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="Eplant/index.css" />
+    <link rel="stylesheet" href="/Eplant/index.css" />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
@@ -21,7 +21,7 @@
     <link rel="icon" type="image/svg+xml" href="static/favicon.svg" />
     <link rel="icon" type="image/png" href="static/favicon.png" />
     <link rel="manifest" href="static/site.webmanifest" />
-    <script type="module" src="Eplant/main.tsx"></script>
+    <script type="module" src="/Eplant/main.tsx"></script>
     <title>Eplant</title>
   </head>
   <body>
diff --git a/vite.config.ts b/vite.config.ts
index e350b67e..f62427f3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,12 +6,10 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    eslint(),
-    tsconfigPaths(), react()],
+  plugins: [eslint(), tsconfigPaths(), react()],
   base: process.env.BASE_URL ?? '/',
   build: {
-    target:'ES2022',
+    target: 'ES2022',
     sourcemap: true,
   },
 })