Refactoring...

Author: nakul-py

packages/base/src/dialogs/symbology/components/color_ramp/ColorRamp.tsx

@@ -89,30 +89,36 @@ const ColorRamp: React.FC<IColorRampProps> = ({
 
   const rampDef = COLOR_RAMP_DEFINITIONS[selectedRamp];
 
-  const normalizedCritical =
-    rampDef?.type === 'Divergent' ? (rampDef.criticalValue ?? 0.5) : 0.5;
+  if (rampDef === undefined) {
+    // Typeguard: This should never happen
+    return;
+  }
   const scaledCritical =
-    minValue !== undefined && maxValue !== undefined
-      ? minValue + normalizedCritical * (maxValue - minValue)
+    rampDef.type === 'Divergent' &&
+    minValue !== undefined &&
+    maxValue !== undefined
+      ? minValue + rampDef.criticalValue * (maxValue - minValue)
       : undefined;
 
   useEffect(() => {
-    if (!layerParams.symbologyState) {
-      layerParams.symbologyState = {};
+    if (renderType === 'Heatmap') {
+      return;
     }
 
-    if (renderType !== 'Heatmap') {
-      layerParams.symbologyState.min = minValue;  // TODO: Not saving, probably because we're not calling `updateLayer`
-      layerParams.symbologyState.max = maxValue;
-      layerParams.symbologyState.colorRamp = selectedRamp;
-      layerParams.symbologyState.reverse = reverseRamp;
-      layerParams.symbologyState.nClasses = numberOfShades;
-      layerParams.symbologyState.mode = selectedMode;
-
-      if (rampDef?.type === 'Divergent') {
-        layerParams.symbologyState.criticalValue = rampDef.criticalValue;
-      }
+    if (!layerParams.symbologyState) {
+      layerParams.symbologyState = {};
     }
+    layerParams.symbologyState = {
+      ...layerParams.symbologyState,
+      dataMin,
+      dataMax,
+      min: minValue,
+      max: maxValue,
+      colorRamp: selectedRamp,
+      reverse: reverseRamp,
+      nClasses: numberOfShades,
+      mode: selectedMode,
+    };
   }, [
     minValue,
     maxValue,
@@ -140,9 +146,9 @@ const ColorRamp: React.FC<IColorRampProps> = ({
 
       <ColorRampValueControls
         selectedMin={minValue}
-        settedMin={setMinValue}
+        setSelectedMin={setMinValue}
         selectedMax={maxValue}
-        settedMax={setMaxValue}
+        setSelectedMax={setMaxValue}
         rampDef={rampDef}
         dataMin={dataMin}
         dataMax={dataMax}

packages/base/src/dialogs/symbology/components/color_ramp/ColorRampValueControls.tsx

@@ -5,9 +5,9 @@ import { IColorRampDefinition } from '@/src/types';
 
 export interface IColorRampValueControlsProps {
   selectedMin: number | undefined;
-  settedMin: (v: number | undefined) => void;
+  setSelectedMin: React.Dispatch<React.SetStateAction<number | undefined>>;
   selectedMax: number | undefined;
-  settedMax: (v: number | undefined) => void;
+  setSelectedMax: React.Dispatch<React.SetStateAction<number | undefined>>;
   rampDef: IColorRampDefinition;
   renderType:
     | 'Categorized'
@@ -59,7 +59,7 @@ export const ColorRampValueControls: React.FC<
           type="number"
           value={props.selectedMin ?? ''}
           onChange={e =>
-            props.settedMin(
+            props.setSelectedMin(
               e.target.value !== '' ? parseFloat(e.target.value) : undefined,
             )
           }
@@ -76,7 +76,7 @@ export const ColorRampValueControls: React.FC<
           type="number"
           value={props.selectedMax ?? ''}
           onChange={e =>
-            props.settedMax(
+            props.setSelectedMax(
               e.target.value !== '' ? parseFloat(e.target.value) : undefined,
             )
           }
@@ -104,8 +104,8 @@ export const ColorRampValueControls: React.FC<
               props.selectedMax === props.dataMax)
           }
           onClick={() => {
-            props.settedMin(props.dataMin);
-            props.settedMax(props.dataMax);
+            props.setSelectedMin(props.dataMin);
+            props.setSelectedMax(props.dataMax);
           }}
         >
           Use Actual Range ({props.dataMin} - {props.dataMax})