Update selectedRamp state initialization and lint fix.

Author: nakul-py

packages/base/src/dialogs/symbology/colorRampUtils.ts

@@ -91,7 +91,9 @@ export const getColorMapList = (): IColorMap[] => {
 /**
  * Hook that loads and sets color maps.
  */
-export const useColorMapList = (setColorMaps: React.Dispatch<React.SetStateAction<IColorMap[]>>) => {
+export const useColorMapList = (
+  setColorMaps: React.Dispatch<React.SetStateAction<IColorMap[]>>,
+) => {
   useEffect(() => {
     setColorMaps(getColorMapList());
   }, [setColorMaps]);

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

@@ -2,8 +2,8 @@ import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { useColorMapList } from '@/src/dialogs/symbology/colorRampUtils';
-import ColorRampEntry from './ColorRampEntry';
 import { IColorMap } from '@/src/types';
+import ColorRampEntry from './ColorRampEntry';
 
 interface ICanvasSelectComponentProps {
   selectedRamp: string;
@@ -24,7 +24,7 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
     if (colorMaps.length > 0) {
       updateCanvas(selectedRamp);
     }
-  }, [selectedRamp]);
+  }, [selectedRamp, colorMaps]);
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);

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

@@ -52,37 +52,19 @@ const ColorRamp: React.FC<IColorRampProps> = ({
   initialMin,
   initialMax,
 }) => {
-  const [selectedRamp, setSelectedRamp] = useState<ColorRampName | undefined>();
+  const [selectedRamp, setSelectedRamp] = useState<ColorRampName>('viridis');
   const [selectedMode, setSelectedMode] = useState('');
   const [numberOfShades, setNumberOfShades] = useState('');
   const [minValue, setMinValue] = useState<number | undefined>(initialMin);
   const [maxValue, setMaxValue] = useState<number | undefined>(initialMax);
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    if (selectedRamp === undefined && selectedMode === '' && numberOfShades === '') {
+    if (selectedRamp && selectedMode === '' && numberOfShades === '') {
       populateOptions();
     }
   }, [layerParams]);
 
-  useEffect(() => {
-    if (!layerParams.symbologyState) {
-      layerParams.symbologyState = {};
-    }
-
-    if (renderType !== 'Heatmap') {
-      layerParams.symbologyState.min = minValue;
-      layerParams.symbologyState.max = maxValue;
-      layerParams.symbologyState.colorRamp = selectedRamp;
-      layerParams.symbologyState.nClasses = numberOfShades;
-      layerParams.symbologyState.mode = selectedMode;
-
-      if (rampDef?.type === 'Divergent') {
-        layerParams.symbologyState.criticalValue = scaledCritical;
-      }
-    }
-  }, [minValue, maxValue, selectedRamp, selectedMode, numberOfShades]);
-
   useEffect(() => {
     if (renderType === 'Graduated') {
       if (initialMin !== undefined) {
@@ -109,10 +91,6 @@ const ColorRamp: React.FC<IColorRampProps> = ({
     setMaxValue(initialMax);
   };
 
-  if (selectedRamp === undefined) {
-    // This should be set at this point!
-    return;
-  }
   const rampDef = COLOR_RAMP_DEFINITIONS[selectedRamp];
 
   const normalizedCritical =
@@ -139,6 +117,24 @@ const ColorRamp: React.FC<IColorRampProps> = ({
     displayMax = absMax;
   }
 
+  useEffect(() => {
+    if (!layerParams.symbologyState) {
+      layerParams.symbologyState = {};
+    }
+
+    if (renderType !== 'Heatmap') {
+      layerParams.symbologyState.min = minValue;
+      layerParams.symbologyState.max = maxValue;
+      layerParams.symbologyState.colorRamp = selectedRamp;
+      layerParams.symbologyState.nClasses = numberOfShades;
+      layerParams.symbologyState.mode = selectedMode;
+
+      if (rampDef?.type === 'Divergent') {
+        layerParams.symbologyState.criticalValue = scaledCritical;
+      }
+    }
+  }, [minValue, maxValue, selectedRamp, selectedMode, numberOfShades]);
+
   return (
     <div className="jp-gis-color-ramp-container">
       {showRampSelector && (