feat(graph): pushed down session selection code to prevent re-renders

TomPlum · Nov 17, 2024 · 33e8dd5 · 33e8dd5
1 parent 072d7d6
commit 33e8dd5
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 42 deletions.
diff --git a/src/modules/graph/SleepSessionsGraph3D.tsx b/src/modules/graph/SleepSessionsGraph3D.tsx
@@ -17,7 +17,6 @@ interface LinkConfig {
 export const SleepSessionsGraph3D = () => {
   const graphRef = useRef<ForceGraphMethods>()
   const { sleepData, loading } = useSleepData()
-  console.log(sleepData)
 
   useEffect(() => {
    if (graphRef.current) {
@@ -94,11 +93,9 @@ export const SleepSessionsGraph3D = () => {
       links
     }
   }, [sleepData?.sessions])
-  console.log('Graph Data', graphData)
 
   // @ts-expect-error to fix later if I come back
   const linkColor = useCallback(link => {
-    console.log(link.source)
     switch(link.source.group) {
       case 'sleepQuality': {
         return '#9a30fe'

diff --git a/src/modules/graph/components/SleepSessionInfo/SleepSessionInfo.tsx b/src/modules/graph/components/SleepSessionInfo/SleepSessionInfo.tsx
@@ -4,32 +4,58 @@ import styles from './SleepSessionInfo.module.scss'
 import dayjs from 'dayjs'
 import { useSleepContext } from 'context'
 import { DurationBreakdownPie, DurationBreakdownPieData } from 'modules/graph/components/DurationBreakdownPie'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { SleepMetric } from 'modules/controls/MetricConfiguration'
+import { useQueryParams } from 'hooks/useQueryParams'
+import { SleepSessionGraph2DDatum } from 'modules/graph/components/SleepSessionsGraph2D'
 
-export const SleepSessionInfo = ({ session }: SleepSessionInfoProps) => {
-  const { sleepStageData, sleepSoundData } = useSleepContext()
+export const SleepSessionInfo = ({ sessionId }: SleepSessionInfoProps) => {
+  const { queryParams } = useQueryParams()
+  const { graphData2d, sleepStageData, sleepSoundData } = useSleepContext()
 
-  const pieData = useMemo<DurationBreakdownPieData>(() => ({
-    awake: session[SleepMetric.AWAKE_TIME],
-    deep: session[SleepMetric.DEEP_SLEEP],
-    light: session[SleepMetric.LIGHT_SLEEP],
-    rem: session[SleepMetric.REM_SLEEP]
-  }), [session])
+  const [selectedSession, setSelectedSession] = useState<SleepSessionGraph2DDatum>()
+
+  useEffect(() => {
+    if (queryParams.selected) {
+      const session = graphData2d.data[queryParams.selected]
+      setSelectedSession(session)
+    } else {
+      setSelectedSession(graphData2d.data[sessionId])
+    }
+  }, [sessionId, graphData2d.data, queryParams.selected])
+
+  const pieData = useMemo<DurationBreakdownPieData | undefined>(() => {
+    if (!selectedSession) {
+      return undefined
+    }
+
+    return ({
+      awake: selectedSession[SleepMetric.AWAKE_TIME],
+      deep: selectedSession[SleepMetric.DEEP_SLEEP],
+      light: selectedSession[SleepMetric.LIGHT_SLEEP],
+      rem: selectedSession[SleepMetric.REM_SLEEP]
+    })
+  }, [selectedSession])
+
+  if (!selectedSession) {
+    return null
+  }
 
   return (
     <div className={styles.container}>
       <SleepSessionStageBreakdownGraph
-        stages={sleepStageData[session.id]}
-        sounds={sleepSoundData[session.id]}
+        stages={sleepStageData[selectedSession.id]}
+        sounds={sleepSoundData[selectedSession.id]}
       />
 
       <div className={styles.info}>
-        {dayjs(session.date).format('ddd Do MMM YYYY - HH:mm')}
+        {dayjs(selectedSession.date).format('ddd Do MMM YYYY - HH:mm')}
 
-        <div className={styles.pieContainer}>
-          <DurationBreakdownPie data={pieData} />
-        </div>
+        {pieData && (
+          <div className={styles.pieContainer}>
+            <DurationBreakdownPie data={pieData}/>
+          </div>
+        )}
       </div>
     </div>
   )

diff --git a/src/modules/graph/components/SleepSessionInfo/types.ts b/src/modules/graph/components/SleepSessionInfo/types.ts
@@ -1,5 +1,3 @@
-import { SleepSessionGraph2DDatum } from 'modules/graph/components/SleepSessionsGraph2D'
-
 export interface SleepSessionInfoProps {
-  session: SleepSessionGraph2DDatum
+  sessionId: number
 }
diff --git a/src/modules/worker/utility/scanTables.spec.ts b/src/modules/worker/utility/scanTables.spec.ts
@@ -10,7 +10,6 @@ describe('Scan Tables Utility', () => {
   beforeAll(() => {
     try {
       const filePath = resolve(__dirname, '../../../test/SmallPillowDataExport.txt')
-      console.log(filePath)
       fileContents = readFileSync(filePath, 'utf8')
     } catch (e) {
       console.error('Failed to setup useSleepData.spec.ts as the data could not be read', e)

diff --git a/src/pages/SleepPage.tsx b/src/pages/SleepPage.tsx
@@ -1,13 +1,12 @@
 import styles from './SleepPage.module.scss'
 import {
-  SleepSessionGraph2DDatum,
   SleepSessionsGraph2D
 } from 'modules/graph/components/SleepSessionsGraph2D'
 import { useSleepContext } from 'context'
 import { GraphControls } from 'modules/controls/GraphControls'
 import { ActiveSessionInfo } from 'modules/graph/components/ActiveSessionInfo'
 import { SleepMetric } from 'modules/controls/MetricConfiguration'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { StackedGraphPlaceholder } from 'modules/graph/components/StackedGraphPlaceholder'
 import { DataLoading } from 'data/DataLoading'
 import { SleepSessionInfo } from 'modules/graph/components/SleepSessionInfo'
@@ -17,24 +16,16 @@ import { PageRoutes } from 'routes'
 
 export const SleepPage = () => {
   const {
-    graphData2d,
     stackedView,
     sleepMetric,
     stackedMetrics,
     sleepStageData,
     isSleepDataLoading
   } = useSleepContext()
 
-  const { queryParams, updateQueryParam } = useQueryParams()
+  const { updateQueryParam } = useQueryParams()
 
-  const [selectedSession, setSelectedSession] = useState<SleepSessionGraph2DDatum>()
-
-  useEffect(() => {
-    if (queryParams.selected) {
-      const session = graphData2d.data[queryParams.selected]
-      setSelectedSession(session)
-    }
-  }, [graphData2d.data, queryParams.selected])
+  const [selectedSession, setSelectedSession] = useState<number>()
 
   useDynamicFavicon()
 
@@ -46,9 +37,8 @@ export const SleepPage = () => {
       }
     })
 
-    const session = graphData2d.data[index]
-    setSelectedSession(session)
-  }, [updateQueryParam, graphData2d.data])
+    setSelectedSession(index)
+  }, [updateQueryParam])
 
   if (isSleepDataLoading) {
     return (
@@ -69,8 +59,8 @@ export const SleepPage = () => {
               metric={metric}
               className={styles.graph}
               key={`sleep-graph-2d-${metric}`}
-              selectedSession={selectedSession?.id}
               onSelectSession={handleSelectSession}
+              selectedSession={selectedSession?.toString()}
             />
           ))}
 
@@ -85,7 +75,7 @@ export const SleepPage = () => {
 
           {sleepStageData && selectedSession && (
             <SleepSessionInfo
-              session={selectedSession}
+              sessionId={selectedSession}
             />
           )}
         </div>
@@ -96,13 +86,13 @@ export const SleepPage = () => {
           <SleepSessionsGraph2D
             metric={sleepMetric}
             className={styles.graph}
-            selectedSession={selectedSession?.id}
             onSelectSession={handleSelectSession}
+            selectedSession={selectedSession?.toString()}
           />
         )}
 
-        {sleepStageData && (selectedSession) && (
-          <SleepSessionInfo session={selectedSession} />
+        {selectedSession && (
+          <SleepSessionInfo sessionId={selectedSession} />
         )}
       </div>
     </div>