Add cmocean colormaps, fix bug when switching render type

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

@@ -0,0 +1,60 @@
+/**
+ * Convert an [r,g,b] array to hex string.
+ */
+export function rgbToHex(rgb: number[]): string {
+  return `#${rgb.map(v => v.toString(16).padStart(2, '0')).join('')}`;
+}
+
+/**
+ * Convert hex to rgba string.
+ */
+export function hexToRgba(hex: string, alpha = 1): string {
+  const bigint = parseInt(hex.slice(1), 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+/**
+ * Ensure we always get a valid hex string from either an array or string.
+ */
+export const ensureHexColorCode = (color: number[] | string): string => {
+  if (typeof color === 'string') {
+    return color;
+  }
+
+  if (!Array.isArray(color)) {
+    return '#000000'; // Default to black
+  }
+
+  // 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) {
+  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 [parseInt('0', 16), parseInt('0', 16), parseInt('0', 16)];
+  }
+  const rgbValues = [
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16),
+    1, // TODO: Make alpha customizable?
+  ];
+
+  return rgbValues;
+}

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

@@ -1,8 +1,10 @@
 import { Button } from '@jupyterlab/ui-components';
 import colormap from 'colormap';
+import colorScale from 'colormap/colorScale.js';
 import React, { useEffect, useRef, useState } from 'react';
 
 import ColorRampEntry from './ColorRampEntry';
+import rawCmocean from './cmocean.json';
 
 export interface IColorMap {
   name: string;
@@ -14,6 +16,11 @@ interface ICanvasSelectComponentProps {
   setSelected: (item: any) => void;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const { __license__, ...cmocean } = rawCmocean as any;
+
+Object.assign(colorScale, cmocean);
+
 const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
   selectedRamp,
   setSelected,
@@ -62,6 +69,18 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
     'velocity-blue',
     'velocity-green',
     // 'cubehelix' 16 steps min
+    'ice',
+    'oxy',
+    'matter',
+    'amp',
+    'tempo',
+    'rain',
+    'topo',
+    'balance',
+    'delta',
+    'curl',
+    'diff',
+    'tarn',
   ];
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -72,16 +91,19 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
     const colorMapList: IColorMap[] = [];
 
     colorRampNames.forEach(name => {
+      const cmoRamp = (cmocean as any)[name];
+      const requiredShades =
+        Array.isArray(cmoRamp) && cmoRamp.length > 0 ? cmoRamp.length : 256;
+
       const colorRamp = colormap({
         colormap: name,
-        nshades: 255,
+        nshades: requiredShades,
         format: 'rgbaString',
       });
       const colorMap = { name: name, colors: colorRamp };
       colorMapList.push(colorMap);
-
-      setColorMaps(colorMapList);
     });
+    setColorMaps(colorMapList);
   }, []);
 
   useEffect(() => {

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) {