Support divergent color ramps

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

@@ -47,26 +47,13 @@ export namespace VectorClassifications {
   };
 
   export const calculateEqualIntervalBreaks = (
-    values: number[],
     nClasses: number,
-  ) => {
-    const minimum = Math.min(...values);
-    const maximum = Math.max(...values);
-
-    const breaks: number[] = [];
-    const step = (maximum - minimum) / nClasses;
-
-    let value = minimum;
-
-    for (let i = 0; i < nClasses; i++) {
-      value += step;
-      breaks.push(value);
-    }
-
-    breaks[nClasses - 1] = maximum;
-
-    return breaks;
-  };
+    minimum: number,
+    maximum: number,
+  ): number[] =>
+    Array.from({ length: nClasses }, (_, i) => {
+      return minimum + (i / (nClasses - 1)) * (maximum - minimum);
+    });
 
   export const calculateJenksBreaks = (values: number[], nClasses: number) => {
     const maximum = Math.max(...values);

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

@@ -2,97 +2,37 @@ import colormap from 'colormap';
 import colorScale from 'colormap/colorScale.js';
 import { useEffect } from 'react';
 
+import { COLOR_RAMP_DEFINITIONS } from '@/src/dialogs/symbology/colorRamps';
 import rawCmocean from '@/src/dialogs/symbology/components/color_ramp/cmocean.json';
-
-export interface IColorMap {
-  name: ColorRampName;
-  colors: string[];
-}
+import { objectEntries } from '@/src/tools';
+import { IColorMap } from '@/src/types';
 
 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({
+  for (const [name, definition] of objectEntries(COLOR_RAMP_DEFINITIONS)) {
+    const colors = colormap({
       colormap: name,
       nshades: 255,
       format: 'rgbaString',
     });
 
-    colorMapList.push({ name, colors: colorRamp });
-  });
+    colorMapList.push({ name, colors, definition });
+  }
 
   return colorMapList;
 };
 
 /**
  * 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/colorRamps.ts

@@ -0,0 +1,59 @@
+import { IColorRampDefinition } from '@/src/types';
+
+export const COLOR_RAMP_DEFINITIONS = {
+  // 'rainbow-soft': {type: 'Cyclic'}, 11 steps min
+  // 'hsv': {type: 'Cyclic'}, 11 steps min
+  phase: { type: 'Cyclic' },
+  jet: { type: 'Sequential' },
+  hot: { type: 'Sequential' },
+  cool: { type: 'Sequential' },
+  spring: { type: 'Sequential' },
+  summer: { type: 'Sequential' },
+  autumn: { type: 'Sequential' },
+  winter: { type: 'Sequential' },
+  bone: { type: 'Sequential' },
+  copper: { type: 'Sequential' },
+  greys: { type: 'Sequential' },
+  YiGnBu: { type: 'Sequential' },
+  greens: { type: 'Sequential' },
+  YiOrRd: { type: 'Sequential' },
+  bluered: { type: 'Sequential' },
+  RdBu: { type: 'Sequential' },
+  rainbow: { type: 'Sequential' },
+  portland: { type: 'Sequential' },
+  blackbody: { type: 'Sequential' },
+  earth: { type: 'Sequential' },
+  electric: { type: 'Sequential' },
+  viridis: { type: 'Sequential' },
+  inferno: { type: 'Sequential' },
+  magma: { type: 'Sequential' },
+  plasma: { type: 'Sequential' },
+  warm: { type: 'Sequential' },
+  bathymetry: { type: 'Sequential' },
+  cdom: { type: 'Sequential' },
+  chlorophyll: { type: 'Sequential' },
+  density: { type: 'Sequential' },
+  'freesurface-blue': { type: 'Sequential' },
+  'freesurface-red': { type: 'Sequential' },
+  oxygen: { type: 'Sequential' },
+  par: { type: 'Sequential' },
+  salinity: { type: 'Sequential' },
+  temperature: { type: 'Sequential' },
+  turbidity: { type: 'Sequential' },
+  'velocity-blue': { type: 'Sequential' },
+  'velocity-green': { type: 'Sequential' },
+  // 'cubehelix': {type: 'Sequential'}, 16 steps min
+  ice: { type: 'Sequential' },
+  oxy: { type: 'Sequential' },
+  matter: { type: 'Sequential' },
+  amp: { type: 'Sequential' },
+  tempo: { type: 'Sequential' },
+  rain: { type: 'Sequential' },
+  topo: { type: 'Sequential' },
+  // 'picnic': {type: 'Divergent', criticalValue: 0.5 }, 11 steps min
+  balance: { type: 'Divergent', criticalValue: 0.5 },
+  delta: { type: 'Divergent', criticalValue: 0.5 },
+  curl: { type: 'Divergent', criticalValue: 0.5 },
+  diff: { type: 'Divergent', criticalValue: 0.5 },
+  tarn: { type: 'Divergent', criticalValue: 0.5 },
+} as const satisfies { [key: string]: IColorRampDefinition };

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

@@ -2,21 +2,21 @@ import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { useColorMapList } from '@/src/dialogs/symbology/colorRampUtils';
+import { IColorMap } from '@/src/types';
 import ColorRampEntry from './ColorRampEntry';
 
-export interface IColorMap {
-  name: string;
-  colors: string[];
-}
-
 interface ICanvasSelectComponentProps {
   selectedRamp: string;
   setSelected: (item: any) => void;
+  reverse: boolean;
+  setReverse: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
   selectedRamp,
   setSelected,
+  reverse,
+  setReverse,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
@@ -28,7 +28,7 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
     if (colorMaps.length > 0) {
       updateCanvas(selectedRamp);
     }
-  }, [selectedRamp]);
+  }, [selectedRamp, colorMaps, reverse]);
 
   const toggleDropdown = () => {
     setIsOpen(!isOpen);
@@ -67,7 +67,7 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
     for (let i = 0; i <= 255; i++) {
       ctx.beginPath();
 
-      const color = ramp[0].colors[i];
+      const color = reverse ? ramp[0].colors[255 - i] : ramp[0].colors[i];
       ctx.fillStyle = color;
 
       ctx.fillRect(i * 2, 0, 2, 50);
@@ -99,9 +99,25 @@ const CanvasSelectComponent: React.FC<ICanvasSelectComponentProps> = ({
         className={`jp-gis-color-ramp-dropdown ${isOpen ? 'jp-gis-open' : ''}`}
       >
         {colorMaps.map((item, index) => (
-          <ColorRampEntry index={index} colorMap={item} onClick={selectItem} />
+          <ColorRampEntry
+            key={item.name}
+            index={index}
+            colorMap={item}
+            onClick={selectItem}
+          />
         ))}
       </div>
+
+      <div className="jp-gis-symbology-row">
+        <label className="jp-gis-inline-label">
+          <input
+            type="checkbox"
+            checked={reverse}
+            onChange={e => setReverse(e.target.checked)}
+          />
+          Reverse Color Ramp
+        </label>
+      </div>
     </div>
   );
 };