Fixed unneccary gene anootation fetches - moved

fetch to index.tsx

Author: y330

Eplant/views/ChromosomeViewer/Viewer/Chromosome.tsx

@@ -1,9 +1,9 @@
 // -------
 // IMPORTS
 // -------
-import React, { FC, useEffect, useLayoutEffect, useState } from 'react'
+import React, { FC, useEffect, useState } from 'react'
 
-import { useCollections, useGeneticElements } from '@eplant/state'
+import { useCollections } from '@eplant/state'
 import { Unstable_Popup as Popup } from '@mui/base/Unstable_Popup'
 import ArrowLeft from '@mui/icons-material/ArrowLeft'
 import Box from '@mui/material/Box'
@@ -17,28 +17,32 @@ import {
   GeneAnnotationItem,
   GeneRange,
 } from '../types'
-
-import GeneAnnotation from './GeneAnnotation'
-import GeneList from './GeneList'
 import {
   getChromosomeSvg,
   getChromosomeXCoordinate,
-  getGeneAnnotation,
   pixelToBp,
-} from './utilities'
+} from '../utilities'
+
+import GeneAnnotation from './GeneAnnotation'
+import GeneList from './GeneList'
 
 //----------
 // TYPES
 //----------
 interface ChromosomeProps {
-  scale: number
   chromosome: ChromosomeItem
+  annotations: GeneAnnotationItem[]
+  scale: number
 }
 
 //----------
 // COMPONENT
 //----------
-const Chromosome: FC<ChromosomeProps> = ({ scale, chromosome }) => {
+const Chromosome: FC<ChromosomeProps> = ({
+  chromosome,
+  annotations,
+  scale,
+}) => {
   // State
   const [isHovered, setIsHovered] = useState<boolean>(false)
   const [anchorOrigin, setAnchorOrigin] = useState<number[]>([])
@@ -47,13 +51,7 @@ const Chromosome: FC<ChromosomeProps> = ({ scale, chromosome }) => {
     start: 0,
     end: 0,
   })
-  // Gene Annotation drawing
-  const [geneAnnotationArray, setGeneAnnotationArray] = useState<
-    GeneAnnotationItem[]
-  >([])
 
-  // Global State
-  const [geneticElements] = useGeneticElements()
   const [collections] = useCollections()
   const theme = useTheme()
 
@@ -73,45 +71,6 @@ const Chromosome: FC<ChromosomeProps> = ({ scale, chromosome }) => {
   // Gene List popover variables
   const openPopup = Boolean(anchorEl)
 
-  // Fire before paint, converts geneticElements into geneAnnotationArray
-  useLayoutEffect(() => {
-    // TODO: move this to top level to prevent uneccessary api calls
-    const poplar = false
-    const species = poplar ? 'Populus_trichocarpa' : 'Arabidopsis_thaliana'
-    let newGeneAnnotationArray: GeneAnnotationItem[] = []
-    geneticElements.map((gene) => {
-      // for each item in geneticElements, fetch it's gene information to add to it's geneAnnotation
-      fetch(
-        `https://bar.utoronto.ca/eplant${
-          poplar ? '_poplar' : ''
-        }/cgi-bin/querygene.cgi?species=${species}&term=${gene.id}`
-      )
-        .then((response) => response.json())
-        .then((geneItem) => {
-          if (geneItem.chromosome === chromosome.id) {
-            newGeneAnnotationArray = geneAnnotationArray
-            const geneAnnotation: GeneAnnotationItem =
-              getGeneAnnotation(geneItem)
-
-            // Make sure new geneAnnotation is not already in geneAnnotationArray
-            const isDuplicate = newGeneAnnotationArray.some((gene) => {
-              if (gene.id === geneAnnotation.id) {
-                return true
-              }
-              return false
-            })
-            if (!isDuplicate) {
-              newGeneAnnotationArray.push(geneAnnotation)
-              setGeneAnnotationArray(newGeneAnnotationArray)
-            }
-          }
-        })
-        .catch((err) => {
-          console.log(err)
-        })
-    })
-  }, [])
-
   // Execute on first render, after paint
   useEffect(() => {
     const svg: HTMLElement & SVGSVGElement = getChromosomeSvg(chromosome.id)
@@ -288,7 +247,7 @@ const Chromosome: FC<ChromosomeProps> = ({ scale, chromosome }) => {
         </g>
         {/* GENES ANNOTATION TAGS */}
         <g id={`${chromosome.id}_geneAnnotationTags`}>
-          {geneAnnotationArray.map((gene, i) => {
+          {annotations.map((gene, i) => {
             // Flatten collections into array of gene IDs - important for not drawing removed gene annotations
             const flatGeneCollection = collections.flatMap(
               (collection) => collection.genes

Eplant/views/ChromosomeViewer/Viewer/GeneList.tsx

@@ -6,11 +6,9 @@ import React, { FC, useEffect, useState } from 'react'
 import List from '@mui/material/List'
 import ListItem from '@mui/material/ListItem'
 import ListItemButton from '@mui/material/ListItemButton'
-import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
 import useTheme from '@mui/material/styles/useTheme'
 
-import { GeneIcon } from '../icons'
 import { GeneItem } from '../types'
 
 import GeneInfoPopup from './GeneInfoPopup'
@@ -47,12 +45,8 @@ const GeneList: FC<GeneListProps> = ({ id, start, end, anchorOrigin }) => {
       }/cgi-bin/querygenesbyposition.cgi?chromosome=${id}&start=${start}&end=${end}`
     )
       .then((response) => response.json())
-      .then((json) => {
-        setGeneList(json)
-      })
-      .catch((err) => {
-        console.log(err)
-      })
+      .then((json) => setGeneList(json))
+      .catch((err) => console.log(err))
   }, [])
   // --------------
   // EVENT HANDLERS
@@ -104,7 +98,7 @@ const GeneList: FC<GeneListProps> = ({ id, start, end, anchorOrigin }) => {
                       className='geneAliases'
                       style={{ color: theme.palette.secondary.main }}
                     >
-                      {`/${gene.aliases[0]}`}
+                      {`/${gene?.aliases[0]}`}
                     </span>
                   )}
                 </ListItemText>

Eplant/views/ChromosomeViewer/Viewer/Viewer.tsx

@@ -7,19 +7,20 @@ import { FC } from 'react'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
 
-import { ChromosomeItem } from '../types'
+import { ChromosomeItem, GeneAnnotationItem } from '../types'
 
 import Chromosome from './Chromosome'
 
 // TYPES
 interface ViewerProps {
   chromosomes: ChromosomeItem[]
+  annotations: GeneAnnotationItem[]
   scale: number
 }
 //----------
 // COMPONENT
 //----------
-const Viewer: FC<ViewerProps> = ({ chromosomes, scale }) => {
+const Viewer: FC<ViewerProps> = ({ chromosomes, annotations, scale }) => {
   return (
     <div
       style={{
@@ -33,13 +34,23 @@ const Viewer: FC<ViewerProps> = ({ chromosomes, scale }) => {
       }}
     >
       {chromosomes.map((chromosome, i) => {
+        const chromosomeAnnotations: GeneAnnotationItem[] = []
+        annotations.map((gene, j) => {
+          if (gene.chromosome === chromosome.id) {
+            chromosomeAnnotations.push(gene)
+          }
+        })
         // Render a Chromosome component for each chromosome
         return (
           <Box key={i}>
             <Typography fontSize='30px' noWrap sx={{ marginLeft: '-20px' }}>
               {chromosome.name}
             </Typography>
-            <Chromosome scale={scale} chromosome={chromosome} />
+            <Chromosome
+              chromosome={chromosome}
+              annotations={chromosomeAnnotations}
+              scale={scale}
+            />
             <Typography sx={{ fontSize: 8 }} noWrap>
               {(chromosome.size * 0.000001).toLocaleString()}Mb
             </Typography>