measurements: order means by legend values

Keep the color-by means in a stable order so that order does not change
when applying different filters to the data. This makes it easier to
do comparisons across groups and across different filters.

This is the easier route for stable ordering, but in the future we can
consider ordering by display order of groups in the tree.

src/components/measurements/index.js

@@ -127,6 +127,7 @@ const filterMeasurements = (measurements, treeStrainVisibility, filters) => {
 const MeasurementsPlot = ({height, width, showLegend, setPanelTitle}) => {
   // Use `lodash.isEqual` to deep compare object states to prevent unnecessary re-renderings of the component
   const { treeStrainVisibility, treeStrainColors } = useSelector((state) => treeStrainPropertySelector(state), isEqual);
+  const legendValues = useSelector((state) => state.controls.colorScale.legendValues);
   const colorings = useSelector((state) => state.metadata.colorings);
   const colorBy = useSelector((state) => state.controls.colorBy);
   const groupBy = useSelector((state) => state.controls.measurementsGroupBy);
@@ -212,9 +213,9 @@ const MeasurementsPlot = ({height, width, showLegend, setPanelTitle}) => {
   useEffect(() => {
     addColorByAttrToGroupingLabel(d3Ref.current, treeStrainColors);
     colorMeasurementsSVG(d3Ref.current, treeStrainColors);
-    drawMeansForColorBy(d3Ref.current, svgData, treeStrainColors);
+    drawMeansForColorBy(d3Ref.current, svgData, treeStrainColors, legendValues);
     addHoverPanelToMeasurementsAndMeans(d3Ref.current, handleHover, treeStrainColors);
-  }, [svgData, treeStrainColors, handleHover]);
+  }, [svgData, treeStrainColors, legendValues, handleHover]);
 
   // Display raw/mean measurements when SVG is re-drawn, colors have changed, or display has changed
   useEffect(() => {

src/components/measurements/measurementsD3.js

@@ -280,7 +280,7 @@ export const colorMeasurementsSVG = (ref, treeStrainColors) => {
     .style("fill", (d) => getBrighterColor(treeStrainColors[d.strain].color));
 };
 
-export const drawMeansForColorBy = (ref, svgData, treeStrainColors) => {
+export const drawMeansForColorBy = (ref, svgData, treeStrainColors, legendValues) => {
   const { xScale, groupingOrderedValues, groupedMeasurements } = svgData;
   const svg = select(ref);
   // Re move all current color by means
@@ -305,7 +305,12 @@ export const drawMeansForColorBy = (ref, svgData, treeStrainColors) => {
     // 2 x subplotPadding for padding around the overall mean display
     const ySpacing = (layout.subplotHeight - 4 * layout.subplotPadding) / (numberOfColorByAttributes - 1);
     let yValue = layout.subplotPadding;
-    Object.entries(colorByGroups).forEach(([attribute, {color, values}]) => {
+    // Order the color groups by the legend value order so that we have a stable order for the means
+    orderBy(
+      Object.entries(colorByGroups),
+      ([attribute]) => legendValues.indexOf(attribute),
+      "asc"
+    ).forEach(([attribute, {color, values}]) => {
       drawMeanAndStandardDeviation(
         values,
         subplot,