Support divergent color ramps

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

@@ -83,6 +83,10 @@ export const getColorMapList = (): IColorMap[] => {
       format: 'rgbaString',
     });
 
+    if (COLOR_RAMP_DEFINITIONS[name]) {
+      COLOR_RAMP_DEFINITIONS[name].colors = colorRamp;
+    }
+
     colorMapList.push({ name, colors: colorRamp });
   });
 
@@ -134,3 +138,49 @@ export function hexToRgb(hex: string): [number, number, number, number] {
     255, // TODO: Make alpha customizable?
   ];
 }
+
+export type ColorRampType = 'Sequential' | 'Divergent' | 'Cyclic';
+
+export interface IColorRampDefinition {
+  name: ColorRampName;
+  type: ColorRampType;
+  colors: string[];
+  criticalValue?: number; // Only for divergent ramps
+  userMin?: number;
+  userMax?: number;
+}
+
+export const COLOR_RAMP_DEFINITIONS: Partial<
+  Record<ColorRampName, IColorRampDefinition>
+> = {
+  balance: {
+    name: 'balance',
+    type: 'Divergent',
+    colors: [],
+    criticalValue: 0,
+  },
+  delta: {
+    name: 'delta',
+    type: 'Divergent',
+    colors: [],
+    criticalValue: 0,
+  },
+  curl: {
+    name: 'curl',
+    type: 'Divergent',
+    colors: [],
+    criticalValue: 0,
+  },
+  diff: {
+    name: 'diff',
+    type: 'Divergent',
+    colors: [],
+    criticalValue: 0,
+  },
+  tarn: {
+    name: 'tarn',
+    type: 'Divergent',
+    colors: [],
+    criticalValue: 0,
+  },
+};

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

@@ -5,7 +5,10 @@ import React, { useEffect, useState } from 'react';
 import { LoadingIcon } from '@/src/shared/components/loading';
 import CanvasSelectComponent from './CanvasSelectComponent';
 import ModeSelectRow from './ModeSelectRow';
-
+import {
+  COLOR_RAMP_DEFINITIONS,
+  ColorRampName,
+} from '../../../symbology/colorRampUtils';
 interface IColorRampProps {
   modeOptions: string[];
   layerParams: IDict;
@@ -14,15 +17,22 @@ interface IColorRampProps {
     numberOfShades: string,
     selectedRamp: string,
     setIsLoading: (isLoading: boolean) => void,
+    criticalValue?: number,
+    minValue?: number,
+    maxValue?: number,
   ) => void;
   showModeRow: boolean;
   showRampSelector: boolean;
+  layerType?: 'graduated' | 'categorized';
 }
 
 export type ColorRampOptions = {
   selectedRamp: string;
   numberOfShades: string;
   selectedMode: string;
+  minValue?: number;
+  maxValue?: number;
+  criticalValue?: number;
 };
 
 const ColorRamp: React.FC<IColorRampProps> = ({
@@ -31,10 +41,14 @@ const ColorRamp: React.FC<IColorRampProps> = ({
   classifyFunc,
   showModeRow,
   showRampSelector,
+  layerType,
 }) => {
   const [selectedRamp, setSelectedRamp] = useState('');
   const [selectedMode, setSelectedMode] = useState('');
   const [numberOfShades, setNumberOfShades] = useState('');
+  const [criticalValue, setCriticalValue] = useState<number | undefined>(0);
+  const [minValue, setMinValue] = useState<number | undefined>(-5);
+  const [maxValue, setMaxValue] = useState<number | undefined>(5);
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
@@ -44,18 +58,27 @@ const ColorRamp: React.FC<IColorRampProps> = ({
   }, [layerParams]);
 
   const populateOptions = () => {
-    let nClasses, singleBandMode, colorRamp;
+    let nClasses, singleBandMode, colorRamp, min, max, crit;
 
     if (layerParams.symbologyState) {
       nClasses = layerParams.symbologyState.nClasses;
       singleBandMode = layerParams.symbologyState.mode;
       colorRamp = layerParams.symbologyState.colorRamp;
+      min = layerParams.symbologyState.minValue;
+      max = layerParams.symbologyState.maxValue;
+      crit = layerParams.symbologyState.criticalValue;
     }
     setNumberOfShades(nClasses ? nClasses : '9');
     setSelectedMode(singleBandMode ? singleBandMode : 'equal interval');
     setSelectedRamp(colorRamp ? colorRamp : 'viridis');
+    setMinValue(min !== undefined ? min : -5);
+    setMaxValue(max !== undefined ? max : 5);
+    setCriticalValue(crit !== undefined ? crit : 0);
   };
 
+  const rampDef = COLOR_RAMP_DEFINITIONS[selectedRamp as ColorRampName];
+  const rampType = rampDef?.type || 'Unknown';
+
   return (
     <div className="jp-gis-color-ramp-container">
       {showRampSelector && (
@@ -65,6 +88,13 @@ const ColorRamp: React.FC<IColorRampProps> = ({
             selectedRamp={selectedRamp}
             setSelected={setSelectedRamp}
           />
+          {selectedRamp && (
+            <div className="jp-gis-ramp-type ml-auto">
+              <span className="jp-gis-ramp-type-label">
+                Color Ramp Type: {rampType}
+              </span>
+            </div>
+          )}
         </div>
       )}
       {showModeRow && (
@@ -76,6 +106,64 @@ const ColorRamp: React.FC<IColorRampProps> = ({
           setSelectedMode={setSelectedMode}
         />
       )}
+      {/* 🔹 Divergent colormap controls */}
+      {layerType === 'graduated' && rampType === 'Divergent' && (
+        <>
+          <div className="jp-gis-symbology-row">
+            <label htmlFor="min-value">Min Value:</label>
+            <input
+              id="min-value"
+              type="number"
+              value={minValue ?? ''}
+              onChange={e =>
+                setMinValue(
+                  e.target.value !== ''
+                    ? parseFloat(e.target.value)
+                    : undefined,
+                )
+              }
+              className="jp-mod-styled"
+              placeholder="Enter min value"
+            />
+          </div>
+
+          <div className="jp-gis-symbology-row">
+            <label htmlFor="critical-value">Critical Value:</label>
+            <input
+              id="critical-value"
+              type="number"
+              value={criticalValue ?? ''}
+              onChange={e =>
+                setCriticalValue(
+                  e.target.value !== ''
+                    ? parseFloat(e.target.value)
+                    : undefined,
+                )
+              }
+              className="jp-mod-styled"
+              placeholder="Enter critical value"
+            />
+          </div>
+
+          <div className="jp-gis-symbology-row">
+            <label htmlFor="max-value">Max Value:</label>
+            <input
+              id="max-value"
+              type="number"
+              value={maxValue ?? ''}
+              onChange={e =>
+                setMaxValue(
+                  e.target.value !== ''
+                    ? parseFloat(e.target.value)
+                    : undefined,
+                )
+              }
+              className="jp-mod-styled"
+              placeholder="Enter max value"
+            />
+          </div>
+        </>
+      )}
       {isLoading ? (
         <LoadingIcon />
       ) : (
@@ -87,6 +175,9 @@ const ColorRamp: React.FC<IColorRampProps> = ({
               numberOfShades,
               selectedRamp,
               setIsLoading,
+              criticalValue,
+              minValue,
+              maxValue,
             )
           }
         >

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

@@ -1,6 +1,7 @@
 import { IJGISLayer } from '@jupytergis/schema';
 import colormap from 'colormap';
 
+import { COLOR_RAMP_DEFINITIONS, ColorRampName } from './colorRampUtils';
 import { IStopRow } from './symbologyDialog';
 
 const COLOR_EXPR_STOPS_START = 3;
@@ -104,7 +105,35 @@ export namespace Utils {
     selectedRamp: string,
     nClasses: number,
     reverse = false,
+    layerType: 'categorized' | 'graduated' = 'graduated',
+    minValue?: number,
+    maxValue?: number,
   ) => {
+    const rampDef = COLOR_RAMP_DEFINITIONS[selectedRamp as ColorRampName];
+    let effectiveStops: number[] = [];
+
+    if (layerType === 'categorized') {
+      effectiveStops = stops;
+    } else {
+      if (rampDef?.type === 'Divergent') {
+        const min = minValue ?? Math.min(...stops);
+        const max = maxValue ?? Math.max(...stops);
+
+        effectiveStops = Array.from(
+          { length: nClasses },
+          (_, i) => min + (i / (nClasses - 1)) * (max - min),
+        );
+      } else {
+        const min = Math.min(...stops);
+        const max = Math.max(...stops);
+
+        effectiveStops = Array.from(
+          { length: nClasses },
+          (_, i) => min + (i / (nClasses - 1)) * (max - min),
+        );
+      }
+    }
+
     let colorMap = colormap({
       colormap: selectedRamp,
       nshades: nClasses > 9 ? nClasses : 9,
@@ -127,15 +156,15 @@ export namespace Utils {
 
       // Get the last n/2 elements from the second array
       const secondPart = colorMap.slice(
-        colorMap.length - (stops.length - firstPart.length),
+        colorMap.length - (effectiveStops.length - firstPart.length),
       );
 
       // Create the new array by combining the first and last parts
       colorMap = firstPart.concat(secondPart);
     }
 
     for (let i = 0; i < nClasses; i++) {
-      valueColorPairs.push({ stop: stops[i], output: colorMap[i] });
+      valueColorPairs.push({ stop: effectiveStops[i], output: colorMap[i] });
     }
 
     return valueColorPairs;

packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx

@@ -138,6 +138,7 @@ const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
       selectedRamp,
       stops.length,
       reverseRamp,
+      'categorized',
     );
 
     setStopRows(valueColorPairs);

packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx

@@ -218,11 +218,18 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
     selectedMode: string,
     numberOfShades: string,
     selectedRamp: string,
+    setIsLoading: (isLoading: boolean) => void,
+    criticalValue?: number,
+    minValue?: number,
+    maxValue?: number,
   ) => {
     setColorRampOptions({
       selectedRamp,
       numberOfShades,
       selectedMode,
+      minValue,
+      maxValue,
+      criticalValue,
     });
 
     let stops: number[];
@@ -273,13 +280,18 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
             selectedRamp,
             +numberOfShades,
             reverseRamp,
+            'graduated',
+            minValue,
+            maxValue,
           );
 
     if (symbologyTab === 'radius') {
       setRadiusStopRows(stopOutputPairs);
     } else {
       setColorStopRows(stopOutputPairs);
     }
+
+    setIsLoading(false);
   };
 
   const handleReset = (method: string) => {
@@ -408,6 +420,7 @@ const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps> = ({
             classifyFunc={buildColorInfoFromClassification}
             showModeRow={true}
             showRampSelector={symbologyTab === 'color'}
+            layerType="graduated"
           />
           <StopContainer
             selectedMethod={symbologyTab || 'color'}