Simplify call to useColorMapList effect

Co-authored-by: Nakul Verma <[email protected]>

Author: mfisher87

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

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

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

@@ -1,18 +1,9 @@
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
 
-import {
-  useColorMapList,
-  COLOR_RAMP_DEFINITIONS,
-  ColorRampName,
-} from '@/src/dialogs/symbology/colorRampUtils';
+import { useColorMapList } from '@/src/dialogs/symbology/colorRampUtils';
 import ColorRampEntry from './ColorRampEntry';
-
-export interface IColorMap {
-  name: string;
-  colors: string[];
-  type?: string;
-}
+import { IColorMap } from '@/src/types';
 
 interface ICanvasSelectComponentProps {
   selectedRamp: string;
@@ -27,13 +18,7 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
   const [isOpen, setIsOpen] = useState(false);
   const [colorMaps, setColorMaps] = useState<IColorMap[]>([]);
 
-  useColorMapList((maps: IColorMap[]) => {
-    const withTypes = maps.map(m => {
-      const def = COLOR_RAMP_DEFINITIONS[m.name as ColorRampName];
-      return { ...m, type: def?.type ?? 'Unknown' };
-    });
-    setColorMaps(withTypes);
-  });
+  useColorMapList(setColorMaps);
 
   useEffect(() => {
     if (colorMaps.length > 0) {

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

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 
-import { IColorMap } from './CanvasSelectComponent';
+import { IColorMap } from '@/src/types';
 
 interface IColorRampEntryProps {
   index: number;
@@ -47,7 +47,7 @@ const ColorRampEntry: React.FC<IColorRampEntryProps> = ({
         <span
           style={{ color: 'var(--jp-ui-font-color2)', fontStyle: 'italic' }}
         >
-          ({colorMap.type})
+          ({colorMap.definition.type})
         </span>
       </span>
       <canvas