From 6ec40ec04c5fa7065e2f38971d3dcc1c4d372041 Mon Sep 17 00:00:00 2001
From: Luis Vasquez <luisvasq@mit.edu>
Date: Thu, 7 Nov 2024 15:52:44 +0100
Subject: [PATCH] Fix ordering of color/size `options` (#507)

---
 src/data/selectors/index.js       |  8 ++++++--
 src/ui/views/map/MinimalLegend.js | 28 +++++++++++++++++-----------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/data/selectors/index.js b/src/data/selectors/index.js
index bbb9fa09..84188cd1 100644
--- a/src/data/selectors/index.js
+++ b/src/data/selectors/index.js
@@ -193,9 +193,13 @@ export const selectOrderedGroupedOutputs = createSelector(
   selectGroupedOutputs,
   (data) => orderEntireDict(data)
 )
+const selectOrderedMapFeatures = createSelector(selectMapFeatures, (data) =>
+  orderEntireDict(data)
+)
 // Data -> Types
-export const selectFeatureData = createSelector(selectMapFeatures, (data) =>
-  R.propOr({}, 'data')(data)
+export const selectFeatureData = createSelector(
+  selectOrderedMapFeatures,
+  (data) => R.propOr({}, 'data')(data)
 )
 export const selectNodeTypes = createSelector(
   [selectFeatureData, selectCurrentTime],
diff --git a/src/ui/views/map/MinimalLegend.js b/src/ui/views/map/MinimalLegend.js
index 1c3102b7..62e9298f 100644
--- a/src/ui/views/map/MinimalLegend.js
+++ b/src/ui/views/map/MinimalLegend.js
@@ -23,6 +23,7 @@ import {
 } from '@mui/material'
 import { color } from 'd3-color'
 import { matchIsValidColor, MuiColorInput } from 'mui-color-input'
+import * as R from 'ramda'
 import { Fragment, memo, useCallback, useMemo, useState } from 'react'
 import { LuGroup, LuShapes, LuUngroup } from 'react-icons/lu'
 import {
@@ -77,6 +78,7 @@ import {
   getContrastText,
   includesPath,
   NumberFormat,
+  orderEntireDict,
   withIndex,
 } from '../../../utils'
 
@@ -337,10 +339,11 @@ const CategoricalColorLegend = ({
   )
   const colorOptions = useMemo(
     () =>
-      Object.entries(colorByProps[colorBy].options).reduce(
-        (acc, [option, value]) => ({ ...acc, [option]: value.color }),
-        {}
-      ),
+      R.pipe(
+        orderEntireDict, // Preserve order of options after state updates
+        R.prop('options'),
+        R.pluck('color')
+      )(colorByProps[colorBy]),
     [colorBy, colorByProps]
   )
   return (
@@ -441,7 +444,7 @@ const ColorLegend = ({
         )
 
         if (hasGradientColors || hasColorOptions) {
-          return { ...acc, [propId]: prop }
+          acc[propId] = prop
         }
         return acc
       }, {}),
@@ -720,12 +723,15 @@ const CategoricalSizeLegend = ({
     [handleChangeComittedRaw, sizeSliderProps.key]
   )
 
-  const sizeOptions = useMemo(() => {
-    return Object.entries(sizeByProps[sizeBy].options).reduce(
-      (acc, [option, value]) => ({ ...acc, [option]: value.size ?? '1px' }),
-      {}
-    )
-  }, [sizeBy, sizeByProps])
+  const sizeOptions = useMemo(
+    () =>
+      R.pipe(
+        orderEntireDict, // Preserve order of options after state updates
+        R.prop('options'),
+        R.map(R.propOr('1px', 'size'))
+      )(sizeByProps[sizeBy]),
+    [sizeBy, sizeByProps]
+  )
   return (
     <>
       <OverflowText