From 382bd4c8cf1a2cc0c2494f880c8e240ffb72a722 Mon Sep 17 00:00:00 2001
From: Luis Vasquez <luisvasq@mit.edu>
Date: Wed, 11 Dec 2024 17:43:45 +0100
Subject: [PATCH] Fix label formatting in color/value inputs (#507)

---
 src/ui/views/map/ColorLegend.js | 18 ++++++++++++------
 src/ui/views/map/Legend.js      | 16 ++++++++--------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/ui/views/map/ColorLegend.js b/src/ui/views/map/ColorLegend.js
index 5d1a0228..c4606b45 100644
--- a/src/ui/views/map/ColorLegend.js
+++ b/src/ui/views/map/ColorLegend.js
@@ -13,6 +13,7 @@ import { useSelector } from 'react-redux'
 
 import {
   getGradientLabel,
+  getNumLabel,
   GroupCalcSelector,
   RippleBox,
   ScaleSelector,
@@ -120,28 +121,33 @@ const NumericalColorLegend = ({
     [valueRange.colorGradient?.scale]
   )
 
+  const getFormattedValue = useCallback(
+    (index) => getNumLabel(values[index], numberFormat, 'colorGradient'),
+    [numberFormat, values]
+  )
+
   const getColorLabel = useCallback(
     (index) =>
       index > 0 && index < values.length - 1 // Within the bounds
         ? isStepScale
-          ? `[${values[index - 1]}, ${values[index]}) "${getLabel(index)}"`
+          ? `[${getFormattedValue(index - 1)}, ${getFormattedValue(index)}) "${getLabel(index)}"`
           : `"${getLabel(index)}"`
         : isStepScale
-          ? `${index < 1 ? `(-\u221E, ${values[0]})` : `[${values[index]}, \u221E)`}`
+          ? `${index < 1 ? `(-\u221E, ${getFormattedValue(index)})` : `[${getFormattedValue(index)}, \u221E)`}`
           : `${index < 1 ? 'Min' : 'Max'}`,
-    [getLabel, isStepScale, values]
+    [getFormattedValue, getLabel, isStepScale, values]
   )
 
   const getValueLabel = useCallback(
     (index) =>
       index > 0 && index < values.length - 1 // Within the bounds
         ? isStepScale
-          ? `Threshold \u279D [${values[index - 1]}, \u2B07)${labels[index] != null ? ` "${getLabel(index)}"` : ''}`
+          ? `Threshold \u279D [${getFormattedValue(index - 1)}, \u2B07)${labels[index] != null ? ` "${getLabel(index)}"` : ''}`
           : `Value${labels[index] != null ? ` \u279D "${getLabel(index)}"` : ''}`
         : isStepScale
-          ? `Threshold (Read-Only) \u279D ${index < 1 ? `(-\u221E, ${values[0]})` : `[${values[index]}, \u221E)`}`
+          ? `Threshold (Read-Only) \u279D ${index < 1 ? `(-\u221E, ${getFormattedValue(index)})` : `[${getFormattedValue(index)}, \u221E)`}`
           : `Value (Read-Only) \u279D ${index < 1 ? 'Min' : 'Max'}`,
-    [getLabel, isStepScale, labels, values]
+    [getFormattedValue, getLabel, isStepScale, labels, values.length]
   )
 
   const gradientStyle = useMemo(() => {
diff --git a/src/ui/views/map/Legend.js b/src/ui/views/map/Legend.js
index d5c919df..da4484a4 100644
--- a/src/ui/views/map/Legend.js
+++ b/src/ui/views/map/Legend.js
@@ -242,8 +242,10 @@ export const useLegend = (mapId) => {
   return { showLegendGroupNames, handleToggleLegendGroupNames }
 }
 
-const getNumLabel = (value, numberFormat, gradientKey) =>
-  NumberFormat.format(value, {
+export const getNumLabel = (value, numberFormatRaw, gradientKey) => {
+  // eslint-disable-next-line no-unused-vars
+  const { unit, unitPlacement, ...numberFormat } = numberFormatRaw
+  return NumberFormat.format(value, {
     ...numberFormat,
     // Formatting hierarchy: `props.*gradient.<key>` -> `settings.defaults.*gradient<key>` -> `props.<key>` -> `settings.defaults.<key>`
     ...{
@@ -254,21 +256,19 @@ const getNumLabel = (value, numberFormat, gradientKey) =>
         numberFormat.notationDisplay,
     },
   })
+}
 
 export const getGradientLabel = (
   labels,
   values,
   index,
-  numberFormatRaw,
+  numberFormat,
   group,
   gradientKey
-) => {
-  // eslint-disable-next-line no-unused-vars
-  const { unit, unitPlacement, ...numberFormat } = numberFormatRaw
-  return group || labels[index] == null
+) =>
+  group || labels[index] == null
     ? getNumLabel(values[index], numberFormat, gradientKey)
     : labels[index]
-}
 
 export const getMinLabel = (labels, values, numberFormat, group, gradientKey) =>
   getGradientLabel(labels, values, 0, numberFormat, group, gradientKey)