Refactor ColorRamp and mode components

Author: nakul-py

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

@@ -45,7 +45,11 @@ const ColorRamp: React.FC<IColorRampProps> = ({
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   useEffect(() => {
-    if (selectedRamp === '') {
+    if (
+      selectedRamp === '' &&
+      selectedMode === undefined &&
+      numberOfShades === undefined
+    ) {
       populateOptions();
     }
   }, [layerParams]);
@@ -58,7 +62,7 @@ const ColorRamp: React.FC<IColorRampProps> = ({
       singleBandMode = layerParams.symbologyState.mode;
       colorRamp = layerParams.symbologyState.colorRamp;
     }
-    setNumberOfShades(nClasses ? nClasses : '9');
+    setNumberOfShades(nClasses ? nClasses : 9);
     setSelectedMode((singleBandMode as ClassificationMode) ?? 'equal interval');
     setSelectedRamp(colorRamp ? colorRamp : 'viridis');
   };

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

@@ -3,9 +3,11 @@ import React from 'react';
 import { ClassificationMode } from '@/src/types';
 interface IModeSelectRowProps {
   numberOfShades: number | undefined;
-  setNumberOfShades: (value: number | undefined) => void;
+  setNumberOfShades: React.Dispatch<React.SetStateAction<number | undefined>>;
   selectedMode: ClassificationMode | undefined;
-  setSelectedMode: (value: ClassificationMode | undefined) => void;
+  setSelectedMode: React.Dispatch<
+    React.SetStateAction<ClassificationMode | undefined>
+  >;
   modeOptions: ClassificationMode[];
 }
 const ModeSelectRow: React.FC<IModeSelectRowProps> = ({

packages/base/src/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.tsx

@@ -43,7 +43,7 @@ const SingleBandPseudoColor: React.FC<ISymbologyDialogProps> = ({
     'continuous',
     'equal interval',
     'quantile',
-  ] as ClassificationMode[];
+  ] as const satisfies ClassificationMode[];
 
   const stateDb = GlobalStateDbManager.getInstance().getStateDb();
 

packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx

@@ -30,7 +30,7 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     'jenks',
     'pretty',
     'logarithmic',
-  ] as ClassificationMode[];
+  ] as const satisfies ClassificationMode[];
 
   const selectableAttributeRef = useRef<string>();
   const symbologyTabRef = useRef<string>();