Add cmocean colormaps, bugfixes (#886)

Co-authored-by: Matt Fisher <[email protected]>

Author: nakul-py

.eslintrc.js

@@ -22,7 +22,13 @@ module.exports = {
         },
       },
     ],
-    "@typescript-eslint/no-unused-vars": ["warn", { args: "none" }],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        args: "none",
+        varsIgnorePattern: "^_$"
+      }
+    ],
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-namespace": "off",
     "@typescript-eslint/ban-ts-comment": "warn",

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

@@ -0,0 +1,136 @@
+import colormap from 'colormap';
+import colorScale from 'colormap/colorScale.js';
+import { useEffect } from 'react';
+
+import rawCmocean from '@/src/dialogs/symbology/components/color_ramp/cmocean.json';
+
+export interface IColorMap {
+  name: ColorRampName;
+  colors: string[];
+}
+
+const { __license__: _, ...cmocean } = rawCmocean;
+
+Object.assign(colorScale, cmocean);
+
+export const COLOR_RAMP_NAMES = [
+  'jet',
+  // 'hsv', 11 steps min
+  'hot',
+  'cool',
+  'spring',
+  'summer',
+  'autumn',
+  'winter',
+  'bone',
+  'copper',
+  'greys',
+  'YiGnBu',
+  'greens',
+  'YiOrRd',
+  'bluered',
+  'RdBu',
+  // 'picnic', 11 steps min
+  'rainbow',
+  'portland',
+  'blackbody',
+  'earth',
+  'electric',
+  'viridis',
+  'inferno',
+  'magma',
+  'plasma',
+  'warm',
+  // 'rainbow-soft', 11 steps min
+  'bathymetry',
+  'cdom',
+  'chlorophyll',
+  'density',
+  'freesurface-blue',
+  'freesurface-red',
+  'oxygen',
+  'par',
+  'phase',
+  'salinity',
+  'temperature',
+  'turbidity',
+  'velocity-blue',
+  'velocity-green',
+  // 'cubehelix' 16 steps min
+  'ice',
+  'oxy',
+  'matter',
+  'amp',
+  'tempo',
+  'rain',
+  'topo',
+  'balance',
+  'delta',
+  'curl',
+  'diff',
+  'tarn',
+] as const;
+
+export type ColorRampName = (typeof COLOR_RAMP_NAMES)[number];
+
+export const getColorMapList = (): IColorMap[] => {
+  const colorMapList: IColorMap[] = [];
+
+  COLOR_RAMP_NAMES.forEach(name => {
+    const colorRamp = colormap({
+      colormap: name,
+      nshades: 255,
+      format: 'rgbaString',
+    });
+
+    colorMapList.push({ name, colors: colorRamp });
+  });
+
+  return colorMapList;
+};
+
+/**
+ * Hook that loads and sets color maps.
+ */
+export const useColorMapList = (setColorMaps: (maps: IColorMap[]) => void) => {
+  useEffect(() => {
+    setColorMaps(getColorMapList());
+  }, [setColorMaps]);
+};
+
+/**
+ * Ensure we always get a valid hex string from either an RGB(A) array or string.
+ */
+export const ensureHexColorCode = (color: number[] | string): string => {
+  if (typeof color === 'string') {
+    return color;
+  }
+
+  // color must be an RGBA array
+  const hex = color
+    .slice(0, -1) // Color input doesn't support hex alpha values so cut that out
+    .map((val: { toString: (arg0: number) => string }) => {
+      return val.toString(16).padStart(2, '0');
+    })
+    .join('');
+
+  return '#' + hex;
+};
+
+/**
+ * Convert hex to [r,g,b,a] array.
+ */
+export function hexToRgb(hex: string): [number, number, number, number] {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+  if (!result) {
+    console.warn('Unable to parse hex value, defaulting to black');
+    return [0, 0, 0, 255];
+  }
+  return [
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16),
+    255, // TODO: Make alpha customizable?
+  ];
+}

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

@@ -1,7 +1,7 @@
 import { Button } from '@jupyterlab/ui-components';
-import colormap from 'colormap';
 import React, { useEffect, useRef, useState } from 'react';
 
+import { useColorMapList } from '@/src/dialogs/symbology/colorRampUtils';
 import ColorRampEntry from './ColorRampEntry';
 
 export interface IColorMap {
@@ -18,71 +18,11 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
   selectedRamp,
   setSelected,
 }) => {
-  const colorRampNames = [
-    'jet',
-    // 'hsv', 11 steps min
-    'hot',
-    'cool',
-    'spring',
-    'summer',
-    'autumn',
-    'winter',
-    'bone',
-    'copper',
-    'greys',
-    'YiGnBu',
-    'greens',
-    'YiOrRd',
-    'bluered',
-    'RdBu',
-    // 'picnic', 11 steps min
-    'rainbow',
-    'portland',
-    'blackbody',
-    'earth',
-    'electric',
-    'viridis',
-    'inferno',
-    'magma',
-    'plasma',
-    'warm',
-    // 'rainbow-soft', 11 steps min
-    'bathymetry',
-    'cdom',
-    'chlorophyll',
-    'density',
-    'freesurface-blue',
-    'freesurface-red',
-    'oxygen',
-    'par',
-    'phase',
-    'salinity',
-    'temperature',
-    'turbidity',
-    'velocity-blue',
-    'velocity-green',
-    // 'cubehelix' 16 steps min
-  ];
-
   const containerRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
   const [colorMaps, setColorMaps] = useState<IColorMap[]>([]);
 
-  useEffect(() => {
-    const colorMapList: IColorMap[] = [];
-
-    colorRampNames.forEach(name => {
-      const colorRamp = colormap({
-        colormap: name,
-        nshades: 255,
-        format: 'rgbaString',
-      });
-      const colorMap = { name: name, colors: colorRamp };
-      colorMapList.push(colorMap);
-
-      setColorMaps(colorMapList);
-    });
-  }, []);
+  useColorMapList(setColorMaps);
 
   useEffect(() => {
     if (colorMaps.length > 0) {

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

@@ -38,10 +38,12 @@ const ColorRamp: React.FC<IColorRampProps> = ({
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    populateOptions();
+    if (selectedRamp === '' && selectedMode === '' && numberOfShades === '') {
+      populateOptions();
+    }
   }, [layerParams]);
 
-  const populateOptions = async () => {
+  const populateOptions = () => {
     let nClasses, singleBandMode, colorRamp;
 
     if (layerParams.symbologyState) {