Adding new ClassificationMode type

Author: nakul-py

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

@@ -3,15 +3,16 @@ import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useState } from 'react';
 
 import { LoadingIcon } from '@/src/shared/components/loading';
+import { ClassificationMode } from '@/src/types';
 import CanvasSelectComponent from './CanvasSelectComponent';
 import ModeSelectRow from './ModeSelectRow';
 
 interface IColorRampProps {
-  modeOptions: string[];
+  modeOptions: ClassificationMode[];
   layerParams: IDict;
   classifyFunc: (
-    selectedMode: string,
-    numberOfShades: string,
+    selectedMode: ClassificationMode | undefined,
+    numberOfShades: number | undefined,
     selectedRamp: string,
     setIsLoading: (isLoading: boolean) => void,
   ) => void;
@@ -21,8 +22,8 @@ interface IColorRampProps {
 
 export type ColorRampOptions = {
   selectedRamp: string;
-  numberOfShades: string;
-  selectedMode: string;
+  numberOfShades: number | undefined;
+  selectedMode: ClassificationMode | undefined;
 };
 
 const ColorRamp: React.FC<IColorRampProps> = ({
@@ -33,12 +34,14 @@ const ColorRamp: React.FC<IColorRampProps> = ({
   showRampSelector,
 }) => {
   const [selectedRamp, setSelectedRamp] = useState('');
-  const [selectedMode, setSelectedMode] = useState<string>('');
-  const [numberOfShades, setNumberOfShades] = useState<string>('');
+  const [selectedMode, setSelectedMode] = useState<
+    ClassificationMode | undefined
+  >();
+  const [numberOfShades, setNumberOfShades] = useState<number | undefined>();
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   useEffect(() => {
-    if (selectedRamp === '' && selectedMode === '' && numberOfShades === '') {
+    if (selectedRamp === '') {
       populateOptions();
     }
   }, [layerParams]);
@@ -52,7 +55,7 @@ const ColorRamp: React.FC<IColorRampProps> = ({
       colorRamp = layerParams.symbologyState.colorRamp;
     }
     setNumberOfShades(nClasses ? nClasses : '9');
-    setSelectedMode(singleBandMode ? singleBandMode : 'equal interval');
+    setSelectedMode((singleBandMode as ClassificationMode) ?? 'equal interval');
     setSelectedRamp(colorRamp ? colorRamp : 'viridis');
   };
 

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

@@ -1,10 +1,12 @@
 import React from 'react';
+
+import { ClassificationMode } from '@/src/types';
 interface IModeSelectRowProps {
-  numberOfShades: string;
-  setNumberOfShades: (value: string) => void;
-  selectedMode: string;
-  setSelectedMode: (value: string) => void;
-  modeOptions: string[];
+  numberOfShades: number | undefined;
+  setNumberOfShades: (value: number | undefined) => void;
+  selectedMode: ClassificationMode | undefined;
+  setSelectedMode: (value: ClassificationMode | undefined) => void;
+  modeOptions: ClassificationMode[];
 }
 const ModeSelectRow: React.FC<IModeSelectRowProps> = ({
   numberOfShades,
@@ -21,8 +23,11 @@ const ModeSelectRow: React.FC<IModeSelectRowProps> = ({
           className="jp-mod-styled"
           name="class-number-input"
           type="number"
-          value={selectedMode === 'continuous' ? 52 : numberOfShades}
-          onChange={event => setNumberOfShades(event.target.value)}
+          value={selectedMode === 'continuous' ? 52 : (numberOfShades ?? '')}
+          onChange={event => {
+            const value = event.target.value;
+            setNumberOfShades(value === '' ? undefined : Number(value));
+          }}
           disabled={selectedMode === 'continuous'}
         />
       </div>
@@ -34,10 +39,12 @@ const ModeSelectRow: React.FC<IModeSelectRowProps> = ({
             id="mode-select"
             className="jp-mod-styled"
             value={selectedMode}
-            onChange={event => setSelectedMode(event.target.value)}
+            onChange={event =>
+              setSelectedMode(event.target.value as ClassificationMode)
+            }
           >
             {modeOptions.map(mode => (
-              <option key={mode} value={mode} selected={selectedMode === mode}>
+              <option key={mode} value={mode}>
                 {mode}
               </option>
             ))}

packages/base/src/types.ts

@@ -40,3 +40,14 @@ declare global {
     jupytergisMaps: { [name: string]: Map };
   }
 }
+
+const classificationModes = [
+  'quantile',
+  'equal interval',
+  'jenks',
+  'pretty',
+  'logarithmic',
+  'continuous',
+] as const;
+
+export type ClassificationMode = (typeof classificationModes)[number];