measurements: states out of sync when changing coloring

[joverlee521]

Noticed during latest flu meeting that the thresholds disappear when changing coloring and realized that the overall mean disappears as well

Screen.Recording.2025-07-09.at.9.26.12.AM.mov

[joverlee521]

Briefly poked at this and the easiest patch is to update the dependencies for the various useEffect hooks

diff --git a/src/components/measurements/index.tsx b/src/components/measurements/index.tsx
index 0eac7c26c8..045e10d62d 100644
--- a/src/components/measurements/index.tsx
+++ b/src/components/measurements/index.tsx
@@ -298,20 +298,20 @@
     jitterRawMeansByColorBy(d3Ref.current, svgData, treeStrainColors, legendValues);
     drawMeansForColorBy(d3Ref.current, svgData, treeStrainColors, legendValues);
     addHoverPanelToMeasurementsAndMeans(d3Ref.current, handleHover, treeStrainColors);
-  }, [svgData, treeStrainColors, legendValues, handleHover]);
+  }, [svgData, handleClickOnGrouping, treeStrainColors, legendValues, handleHover]);
 
   // Display raw/mean measurements when SVG is re-drawn, colors have changed, or display has changed
   useEffect(() => {
     changeMeasurementsDisplay(d3Ref.current, display);
-  }, [svgData, treeStrainColors, legendValues, handleHover, display]);
+  }, [svgData, handleClickOnGrouping, treeStrainColors, legendValues, handleHover, display]);
 
   useEffect(() => {
     toggleDisplay(d3Ref.current, "overallMean", showOverallMean);
-  }, [svgData, showOverallMean]);
+  }, [svgData, handleClickOnGrouping, showOverallMean]);
 
   useEffect(() => {
     toggleDisplay(d3Ref.current, "threshold", showThreshold);
-  }, [svgData, showThreshold]);
+  }, [svgData, handleClickOnGrouping, showThreshold]);
 
   useEffect(() => {
     if(isMeasurementColorBy(colorBy)) {
@@ -319,7 +319,7 @@
     } else {
       removeColorGroupingCrosshair(d3Ref.current);
     }
-  }, [svgData, colorBy, colorGrouping])
+  }, [svgData, handleClickOnGrouping, colorBy, colorGrouping])
 
   const getSVGContainerStyle = (): CSSProperties => {
     return {

[jameshadfield]

Briefly poked at this and the easiest patch is to update the dependencies for the various useEffect hooks

I'm surprised linting didn't flag this up, or maybe we don't have the appropriate eslint rule set up? (I miss the pre-react-hooks days...)

[joverlee521]

I'm surprised linting didn't flag this up, or maybe we don't have the appropriate eslint rule set up? (I miss the pre-react-hooks days...)

Yeah, the linting isn't the issue here since they are not required dependencies. This is a flaw in the design of the useEffect hooks that I've set up to be able to avoid full re-draws of the SVG for small toggles.