Merge pull request #571 from jay-hodgson/PORTALS-2854b

PORTALS-2854: from code review
Sage-Bionetworks · Nov 14, 2023 · 5cdd833 · 5cdd833
2 parents 376e581 + c2d54f6
commit 5cdd833
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 29 deletions.
diff --git a/packages/synapse-react-client/src/components/TimelinePlot/TimelinePlot.tsx b/packages/synapse-react-client/src/components/TimelinePlot/TimelinePlot.tsx
@@ -1,4 +1,4 @@
-import React, { createRef, useEffect, useState } from 'react'
+import React, { createRef, useMemo, useState } from 'react'
 import { useGetFullTableQueryResults } from '../../synapse-queries'
 import { BUNDLE_MASK_QUERY_RESULTS } from '../../utils/SynapseConstants'
 import hardcodedPhasesQueryResponseData, {
@@ -8,7 +8,6 @@ import hardcodedPhasesQueryResponseData, {
 import TimelinePhase from './TimelinePhase'
 import getColorPalette from '../ColorGradient/ColorGradient'
 import { Box } from '@mui/system'
-import { Row } from '@sage-bionetworks/synapse-types'
 import { ObservationCardSchema } from '../row_renderers/ObservationCard'
 import {
   SQLOperator,
@@ -53,7 +52,6 @@ export const TimelinePlot = ({
   const [species, setSpecies] = useState<string | undefined | null>(
     defaultSpecies,
   )
-  const [phaseData, setPhaseData] = useState<Row[] | undefined>([])
   const plotContainerRef = createRef<HTMLDivElement>()
   const dimensions = useRefDimensions(plotContainerRef)
   const queryFilters =
@@ -96,16 +94,16 @@ export const TimelinePlot = ({
   const { data: eventsData, isLoading } = eventTableQuery
 
   // filter the phases query response data to the specific species
-  useEffect(() => {
+  const phaseData = useMemo(() => {
     if (species) {
       const phasesForTargetSpecies =
         hardcodedPhasesQueryResponseData.queryResult?.queryResults.rows.filter(
           row => {
             return row.values[phaseSpeciesIndex] == species
           },
         )
-      setPhaseData(phasesForTargetSpecies)
-    }
+      return phasesForTargetSpecies
+    } else return undefined
   }, [species])
 
   if (isLoading) {
@@ -155,12 +153,9 @@ export const TimelinePlot = ({
     doi: observationDoiIndex,
   }
 
-  if (!phaseData) {
-    return <></>
-  }
-
-  const widthPx = dimensions.width ? dimensions.width / phaseData.length : 0
-  const gridTemplateColumns = phaseData.map(() => 'auto').join(' ')
+  const widthPx =
+    dimensions.width && phaseData ? dimensions.width / phaseData.length : 0
+  const gridTemplateColumns = phaseData?.map(() => 'auto').join(' ')
 
   return (
     <>
@@ -188,23 +183,25 @@ export const TimelinePlot = ({
             )}
           </Box>
           {/* Legend */}
-          <Box
-            sx={{ display: 'flex', justifyContent: 'flex-end', gap: '25px' }}
-          >
-            {phaseData.map((phaseRow, index) => {
-              const { colorPalette } = getColorPalette(index, 1)
-              return (
-                <TimelineLegendItem
-                  key={phaseRow.rowId}
-                  color={colorPalette[0]}
-                  phaseName={phaseRow.values[phaseObservationIndex]}
-                />
-              )
-            })}
-          </Box>
+          {phaseData && (
+            <Box
+              sx={{ display: 'flex', justifyContent: 'flex-end', gap: '25px' }}
+            >
+              {phaseData.map((phaseRow, index) => {
+                const { colorPalette } = getColorPalette(index, 1)
+                return (
+                  <TimelineLegendItem
+                    key={phaseRow.rowId}
+                    color={colorPalette[0]}
+                    phaseName={phaseRow.values[phaseObservationIndex]}
+                  />
+                )
+              })}
+            </Box>
+          )}
         </Box>
         {/* Phase plots */}
-        {species && (
+        {species && phaseData && (
           <div ref={plotContainerRef}>
             <Box
               sx={{

diff --git a/packages/synapse-react-client/src/components/TimelinePlot/TimelinePlotSpeciesSelector.tsx b/packages/synapse-react-client/src/components/TimelinePlot/TimelinePlotSpeciesSelector.tsx
@@ -37,7 +37,6 @@ export const TimelinePlotSpeciesSelector = ({
   if (species == undefined && defaultSpecies != undefined) {
     setSpecies(defaultSpecies)
   }
-
   // Hide if loading, there are no rows, or there's only 1 species option
   if (isLoading || !rows || rows.length < 2) {
     return <></>
@@ -50,7 +49,6 @@ export const TimelinePlotSpeciesSelector = ({
         <Select
           sx={{ marginLeft: '2px', marginBottom: '2px' }}
           value={species}
-          defaultValue={defaultSpecies}
           label="Species"
           onChange={event => {
             setSpecies(event.target.value)