@jupytergis/base 0.14.1 → 0.15.0

package/lib/commands/BaseCommandIDs.d.ts

@@ -8,6 +8,7 @@ export declare const addMarker = "jupytergis:addMarker";
 export declare const getGeolocation = "jupytergis:getGeolocation";
 export declare const openLayerBrowser = "jupytergis:openLayerBrowser";
 export declare const openNewRasterDialog = "jupytergis:openNewRasterDialog";
+export declare const openNewWmsDialog = "jupytergis:openNewWmsDialog";
 export declare const openNewVectorTileDialog = "jupytergis:openNewVectorTileDialog";
 export declare const openNewShapefileDialog = "jupytergis:openNewShapefileDialog";
 export declare const openNewGeoJSONDialog = "jupytergis:openNewGeoJSONDialog";

package/lib/commands/BaseCommandIDs.js

@@ -16,6 +16,7 @@ export const getGeolocation = 'jupytergis:getGeolocation';
 export const openLayerBrowser = 'jupytergis:openLayerBrowser';
 // Layer and source
 export const openNewRasterDialog = 'jupytergis:openNewRasterDialog';
+export const openNewWmsDialog = 'jupytergis:openNewWmsDialog';
 export const openNewVectorTileDialog = 'jupytergis:openNewVectorTileDialog';
 export const openNewShapefileDialog = 'jupytergis:openNewShapefileDialog';
 export const openNewGeoJSONDialog = 'jupytergis:openNewGeoJSONDialog';

package/lib/commands/index.js

@@ -267,7 +267,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
     /**
      * Source and layers
      */
-    commands.addCommand(CommandIDs.openNewRasterDialog, Object.assign({ label: trans.__('Open New Raster Tile Layer Creation Dialog'), caption: 'Open a dialog to create a new raster tile layer and source in the current JupyterGIS document.', describedBy: {
+    commands.addCommand(CommandIDs.openNewRasterDialog, Object.assign({ label: trans.__('Raster Tile'), caption: 'Open a dialog to create a new raster tile layer and source in the current JupyterGIS document.', describedBy: {
             args: {
                 type: 'object',
                 properties: {},
@@ -286,7 +286,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             sourceType: 'RasterSource',
             layerType: 'RasterLayer',
         }) }, icons.get(CommandIDs.openNewRasterDialog)));
-    commands.addCommand(CommandIDs.openNewVectorTileDialog, Object.assign({ label: trans.__('Open New Vector Tile Layer Creation Dialog'), caption: 'Open a dialog to create a new vector tile layer and source in the current JupyterGIS document.', describedBy: {
+    commands.addCommand(CommandIDs.openNewVectorTileDialog, Object.assign({ label: trans.__('Vector Tile'), caption: 'Open a dialog to create a new vector tile layer and source in the current JupyterGIS document.', describedBy: {
             args: {
                 type: 'object',
                 properties: {},
@@ -305,7 +305,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             sourceType: 'VectorTileSource',
             layerType: 'VectorTileLayer',
         }) }, icons.get(CommandIDs.openNewVectorTileDialog)));
-    commands.addCommand(CommandIDs.openNewGeoParquetDialog, Object.assign({ label: trans.__('Open New GeoParquet Layer Creation Dialog'), caption: 'Open a dialog to create a new GeoParquet layer and source in the current JupyterGIS document.', describedBy: {
+    commands.addCommand(CommandIDs.openNewGeoParquetDialog, Object.assign({ label: trans.__('GeoParquet'), caption: 'Open a dialog to create a new GeoParquet layer and source in the current JupyterGIS document.', describedBy: {
             args: {
                 type: 'object',
                 properties: {},
@@ -325,7 +325,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             sourceType: 'GeoParquetSource',
             layerType: 'VectorLayer',
         }) }, icons.get(CommandIDs.openNewGeoParquetDialog)));
-    commands.addCommand(CommandIDs.openNewGeoJSONDialog, Object.assign({ label: trans.__('Open New GeoJSON Layer Creation Dialog'), caption: 'Open a dialog to create a new GeoJSON layer and source in the current JupyterGIS document.', describedBy: {
+    commands.addCommand(CommandIDs.openNewGeoJSONDialog, Object.assign({ label: trans.__('GeoJSON'), caption: 'Open a dialog to create a new GeoJSON layer and source in the current JupyterGIS document.', describedBy: {
             args: {
                 type: 'object',
                 properties: {},
@@ -344,9 +344,28 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             sourceType: 'GeoJSONSource',
             layerType: 'VectorLayer',
         }) }, icons.get(CommandIDs.openNewGeoJSONDialog)));
+    commands.addCommand(CommandIDs.openNewWmsDialog, Object.assign({ label: trans.__('WMS Layer'), caption: 'Open a dialog to create a new WMS layer and source in the current JupyterGIS document.', describedBy: {
+            args: {
+                type: 'object',
+                properties: {},
+            },
+        }, isEnabled: () => {
+            return tracker.currentWidget
+                ? tracker.currentWidget.model.sharedModel.editable
+                : false;
+        }, execute: Private.createEntry({
+            tracker,
+            formSchemaRegistry,
+            title: 'Create WMS Layer',
+            createLayer: true,
+            createSource: true,
+            layerData: { name: 'Custom WMS Layer' },
+            sourceType: 'WmsTileSource',
+            layerType: 'WebGlLayer',
+        }) }, icons.get(CommandIDs.openNewWmsDialog)));
     //Add processing commands
     addProcessingCommands(app, commands, tracker, trans, formSchemaRegistry, Object.fromEntries(formSchemaRegistry.getSchemas()));
-    commands.addCommand(CommandIDs.openNewHillshadeDialog, Object.assign({ label: trans.__('Open New Hillshade Layer Creation Dialog'), caption: 'Open a dialog to create a new hillshade layer and source in the current JupyterGIS document.', describedBy: {
+    commands.addCommand(CommandIDs.openNewHillshadeDialog, Object.assign({ label: trans.__('Hillshade'), caption: 'Open a dialog to create a new hillshade layer and source in the current JupyterGIS document.', describedBy: {
             args: {
                 type: 'object',
                 properties: {},
@@ -365,7 +384,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             sourceType: 'RasterDemSource',
             layerType: 'HillshadeLayer',
         }) }, icons.get(CommandIDs.openNewHillshadeDialog)));
-    commands.addCommand(CommandIDs.openNewImageDialog, Object.assign({ label: trans.__('Open New Image Layer Creation Dialog'), caption: 'Open a dialog to create a new image layer and source in the current JupyterGIS document.', describedBy: {
+    commands.addCommand(CommandIDs.openNewImageDialog, Object.assign({ label: trans.__('Image'), caption: 'Open a dialog to create a new image layer and source in the current JupyterGIS document.', describedBy: {
             args: {
                 type: 'object',
                 properties: {},
@@ -394,7 +413,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             sourceType: 'ImageSource',
             layerType: 'ImageLayer',
         }) }, icons.get(CommandIDs.openNewImageDialog)));
-    commands.addCommand(CommandIDs.openNewVideoDialog, Object.assign({ label: trans.__('Open New Video Layer Creation Dialog'), caption: 'Open a dialog to create a new video layer and source in the current JupyterGIS document.', describedBy: {
+    commands.addCommand(CommandIDs.openNewVideoDialog, Object.assign({ label: trans.__('Video'), caption: 'Open a dialog to create a new video layer and source in the current JupyterGIS document.', describedBy: {
             args: {
                 type: 'object',
                 properties: {},
@@ -426,7 +445,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             sourceType: 'VideoSource',
             layerType: 'RasterLayer',
         }) }, icons.get(CommandIDs.openNewVideoDialog)));
-    commands.addCommand(CommandIDs.openNewGeoTiffDialog, Object.assign({ label: trans.__('Open New GeoTiff Layer Creation Dialog'), caption: 'Open a dialog to create a new GeoTiff layer and source in the current JupyterGIS document.', describedBy: {
+    commands.addCommand(CommandIDs.openNewGeoTiffDialog, Object.assign({ label: trans.__('GeoTiff'), caption: 'Open a dialog to create a new GeoTiff layer and source in the current JupyterGIS document.', describedBy: {
             args: {
                 type: 'object',
                 properties: {},
@@ -449,7 +468,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             sourceType: 'GeoTiffSource',
             layerType: 'WebGlLayer',
         }) }, icons.get(CommandIDs.openNewGeoTiffDialog)));
-    commands.addCommand(CommandIDs.openNewShapefileDialog, Object.assign({ label: trans.__('Open New Shapefile Layer Creation Dialog'), caption: 'Open a dialog to create a new shapefile layer and source in the current JupyterGIS document.', describedBy: {
+    commands.addCommand(CommandIDs.openNewShapefileDialog, Object.assign({ label: trans.__('Shapefile'), caption: 'Open a dialog to create a new shapefile layer and source in the current JupyterGIS document.', describedBy: {
             args: {
                 type: 'object',
                 properties: {},

package/lib/constants.js

@@ -23,6 +23,7 @@ const iconObject = {
     [CommandIDs.undo]: { icon: undoIcon },
     [CommandIDs.openLayerBrowser]: { icon: bookOpenIcon },
     [CommandIDs.openNewRasterDialog]: { icon: rasterIcon },
+    [CommandIDs.openNewWmsDialog]: { iconClass: 'fa fa-server' },
     [CommandIDs.openNewVectorTileDialog]: { icon: vectorSquareIcon },
     [CommandIDs.openNewGeoJSONDialog]: { icon: geoJSONIcon },
     [CommandIDs.openNewHillshadeDialog]: { icon: moundIcon },

package/lib/dialogs/symbology/classificationModes.js

@@ -202,22 +202,18 @@ export var VectorClassifications;
         return breaks;
     };
     VectorClassifications.calculateLogarithmicBreaks = (values, nClasses) => {
-        const minimum = Math.min(...values);
-        const maximum = Math.max(...values);
-        let positiveMinimum = Number.MAX_VALUE;
-        let breaks = [];
-        positiveMinimum = minimum;
-        const actualLogMin = Math.log10(positiveMinimum);
-        let logMin = Math.floor(actualLogMin);
-        const logMax = Math.ceil(Math.log10(maximum));
-        let prettyBreaks = VectorClassifications.calculatePrettyBreaks([logMin, logMax], nClasses);
-        while (prettyBreaks.length > 0 && prettyBreaks[0] < actualLogMin) {
-            logMin += 1.0;
-            prettyBreaks = VectorClassifications.calculatePrettyBreaks([logMin, logMax], nClasses);
-        }
-        breaks = prettyBreaks;
-        for (let i = 0; i < breaks.length; i++) {
-            breaks[i] = Math.pow(10, breaks[i]);
+        const positiveValues = values.filter(v => v > 0);
+        if (positiveValues.length === 0 || nClasses < 1) {
+            return [];
+        }
+        const minimum = Math.min(...positiveValues);
+        const maximum = Math.max(...positiveValues);
+        const logMin = Math.log10(minimum);
+        const logMax = Math.log10(maximum);
+        const breaks = [];
+        for (let i = 0; i < nClasses; i++) {
+            const t = nClasses === 1 ? 0 : i / (nClasses - 1);
+            breaks.push(Math.pow(10, logMin + t * (logMax - logMin)));
         }
         return breaks;
     };

package/lib/dialogs/symbology/colorRampUtils.d.ts

@@ -1,10 +1,49 @@
+export type RgbaColor = [number, number, number, number];
+export declare const RGBA_INDEX: {
+    readonly r: 0;
+    readonly g: 1;
+    readonly b: 2;
+    readonly a: 3;
+};
+export type RgbaChannel = keyof typeof RGBA_INDEX;
+/** OpenLayers default blue, used as the fallback color throughout symbology dialogs. */
+export declare const DEFAULT_COLOR: RgbaColor;
+/** Default stroke width in pixels, used as the initial value in all symbology dialogs. */
+export declare const DEFAULT_STROKE_WIDTH = 1.25;
+/**
+ * Returns true if `val` is a usable solid color: either a hex string or a
+ * plain [r,g,b,a] number array. Returns false for OL expression arrays like
+ * ['interpolate', ...] whose first element is a string.
+ */
+export declare function isColor(val: unknown): boolean;
+/**
+ * Recursively searches an OL expression tree for the first node whose first
+ * element matches `operator` (e.g. `'interpolate'`, `'case'`).
+ * Returns the matching sub-expression, or `null` if not found.
+ */
+export declare function findExprNode(expr: unknown, operator: string): unknown[] | null;
 export interface IColorMap {
     name: ColorRampName;
     colors: string[];
+    type: 'continuous' | 'categorical';
 }
 export declare const COLOR_RAMP_NAMES: readonly ["jet", "hsv", "hot", "cool", "spring", "summer", "autumn", "winter", "bone", "copper", "greys", "YiGnBu", "greens", "YiOrRd", "bluered", "RdBu", "picnic", "rainbow", "portland", "blackbody", "earth", "electric", "viridis", "inferno", "magma", "plasma", "warm", "rainbow-soft", "bathymetry", "cdom", "chlorophyll", "density", "freesurface-blue", "freesurface-red", "oxygen", "par", "phase", "salinity", "temperature", "turbidity", "velocity-blue", "velocity-green", "cubehelix", "ice", "oxy", "matter", "amp", "tempo", "rain", "topo", "balance", "delta", "curl", "diff", "tarn"];
 export declare const COLOR_RAMP_DEFAULTS: Partial<Record<ColorRampName, number>>;
-export type ColorRampName = (typeof COLOR_RAMP_NAMES)[number];
+export declare const D3_CATEGORICAL_SCHEMES: {
+    readonly schemeCategory10: readonly string[];
+    readonly schemeAccent: readonly string[];
+    readonly schemeDark2: readonly string[];
+    readonly schemeObservable10: readonly string[];
+    readonly schemePaired: readonly string[];
+    readonly schemePastel1: readonly string[];
+    readonly schemePastel2: readonly string[];
+    readonly schemeSet1: readonly string[];
+    readonly schemeSet2: readonly string[];
+    readonly schemeSet3: readonly string[];
+    readonly schemeTableau10: readonly string[];
+};
+export type D3SchemeName = keyof typeof D3_CATEGORICAL_SCHEMES;
+export type ColorRampName = (typeof COLOR_RAMP_NAMES)[number] | D3SchemeName;
 export declare const getColorMapList: () => IColorMap[];
 /**
  * Hook that loads and sets color maps.
@@ -15,6 +54,11 @@ export declare const useColorMapList: (setColorMaps: (maps: IColorMap[]) => void
  */
 export declare const ensureHexColorCode: (color: number[] | string) => string;
 /**
- * Convert hex to [r,g,b,a] array.
+ * Convert any color value (hex string or [r,g,b,a] array) to RgbaColor.
+ * Alpha must be in 0-1 range; a warning is logged if it is not.
+ */
+export declare function colorToRgba(color: unknown): RgbaColor;
+/**
+ * Draw a color ramp to a canvas.
  */
-export declare function hexToRgb(hex: string): [number, number, number, number];
+export declare const drawColorRamp: (canvas: HTMLCanvasElement, colorRamp: IColorMap) => void;

package/lib/dialogs/symbology/colorRampUtils.js

@@ -11,8 +11,46 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import colormap from 'colormap';
 import colorScale from 'colormap/colorScale.js';
+import * as d3Chromatic from 'd3-scale-chromatic';
 import { useEffect } from 'react';
 import rawCmocean from "./components/color_ramp/cmocean.json";
+import { objectEntries } from "../../tools";
+export const RGBA_INDEX = { r: 0, g: 1, b: 2, a: 3 };
+/** OpenLayers default blue, used as the fallback color throughout symbology dialogs. */
+export const DEFAULT_COLOR = [51, 153, 204, 1];
+/** Default stroke width in pixels, used as the initial value in all symbology dialogs. */
+export const DEFAULT_STROKE_WIDTH = 1.25;
+/**
+ * Returns true if `val` is a usable solid color: either a hex string or a
+ * plain [r,g,b,a] number array. Returns false for OL expression arrays like
+ * ['interpolate', ...] whose first element is a string.
+ */
+export function isColor(val) {
+    if (typeof val === 'string') {
+        return /^#?[0-9A-Fa-f]{3,8}$/.test(val);
+    }
+    return Array.isArray(val) && val.length >= 3 && typeof val[0] === 'number';
+}
+/**
+ * Recursively searches an OL expression tree for the first node whose first
+ * element matches `operator` (e.g. `'interpolate'`, `'case'`).
+ * Returns the matching sub-expression, or `null` if not found.
+ */
+export function findExprNode(expr, operator) {
+    if (!Array.isArray(expr)) {
+        return null;
+    }
+    if (expr[0] === operator) {
+        return expr;
+    }
+    for (const child of expr) {
+        const found = findExprNode(child, operator);
+        if (found) {
+            return found;
+        }
+    }
+    return null;
+}
 const { __license__: _ } = rawCmocean, cmocean = __rest(rawCmocean, ["__license__"]);
 Object.assign(colorScale, cmocean);
 export const COLOR_RAMP_NAMES = [
@@ -78,6 +116,19 @@ export const COLOR_RAMP_DEFAULTS = {
     'rainbow-soft': 11,
     cubehelix: 16,
 };
+export const D3_CATEGORICAL_SCHEMES = {
+    schemeCategory10: d3Chromatic.schemeCategory10,
+    schemeAccent: d3Chromatic.schemeAccent,
+    schemeDark2: d3Chromatic.schemeDark2,
+    schemeObservable10: d3Chromatic.schemeObservable10,
+    schemePaired: d3Chromatic.schemePaired,
+    schemePastel1: d3Chromatic.schemePastel1,
+    schemePastel2: d3Chromatic.schemePastel2,
+    schemeSet1: d3Chromatic.schemeSet1,
+    schemeSet2: d3Chromatic.schemeSet2,
+    schemeSet3: d3Chromatic.schemeSet3,
+    schemeTableau10: d3Chromatic.schemeTableau10,
+};
 export const getColorMapList = () => {
     const colorMapList = [];
     COLOR_RAMP_NAMES.forEach(name => {
@@ -86,7 +137,14 @@ export const getColorMapList = () => {
             nshades: 255,
             format: 'rgbaString',
         });
-        colorMapList.push({ name, colors: colorRamp });
+        colorMapList.push({ name, colors: colorRamp, type: 'continuous' });
+    });
+    objectEntries(D3_CATEGORICAL_SCHEMES).forEach(([name, colors]) => {
+        colorMapList.push({
+            name,
+            colors: colors.map(c => c.toString()),
+            type: 'categorical',
+        });
     });
     return colorMapList;
 };
@@ -115,18 +173,59 @@ export const ensureHexColorCode = (color) => {
     return '#' + hex;
 };
 /**
- * Convert hex to [r,g,b,a] array.
+ * Convert any color value (hex string or [r,g,b,a] array) to RgbaColor.
+ * Alpha must be in 0-1 range; a warning is logged if it is not.
  */
-export function hexToRgb(hex) {
-    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];
+export function colorToRgba(color) {
+    if (typeof color === 'string') {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+        if (!result) {
+            console.warn('Unable to parse hex color, using default');
+            return DEFAULT_COLOR;
+        }
+        return [
+            parseInt(result[1], 16),
+            parseInt(result[2], 16),
+            parseInt(result[3], 16),
+            1,
+        ];
     }
-    return [
-        parseInt(result[1], 16),
-        parseInt(result[2], 16),
-        parseInt(result[3], 16),
-        255, // TODO: Make alpha customizable?
-    ];
+    if (isColor(color)) {
+        const [r, g, b, a] = color;
+        const alpha = a !== null && a !== void 0 ? a : 1;
+        if (alpha > 1) {
+            console.warn(`Color alpha ${alpha} is out of 0-1 range`);
+        }
+        return [r, g, b, alpha];
+    }
+    return DEFAULT_COLOR;
 }
+/**
+ * Draw a color ramp to a canvas.
+ */
+export const drawColorRamp = (canvas, colorRamp) => {
+    const ctx = canvas.getContext('2d');
+    const colors = colorRamp.colors;
+    if (!ctx || !colors || colors.length === 0) {
+        return;
+    }
+    const width = canvas.width;
+    const height = canvas.height;
+    if (colorRamp.type === 'categorical') {
+        const blockWidth = width / colors.length;
+        colors.forEach((color, i) => {
+            ctx.beginPath();
+            ctx.fillStyle = color;
+            ctx.fillRect(i * blockWidth, 0, blockWidth, height);
+        });
+    }
+    else {
+        const gradient = ctx.createLinearGradient(0, 0, width, 0);
+        const step = 1 / (colors.length - 1);
+        colors.forEach((color, i) => {
+            gradient.addColorStop(i * step, color);
+        });
+        ctx.fillStyle = gradient;
+        ctx.fillRect(0, 0, width, height);
+    }
+};

package/lib/dialogs/symbology/components/color_ramp/ColorRampSelector.js

@@ -12,7 +12,7 @@
  */
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
-import { useColorMapList, } from "../../colorRampUtils";
+import { useColorMapList, drawColorRamp, } from "../../colorRampUtils";
 import ColorRampSelectorEntry from './ColorRampSelectorEntry';
 const ColorRampSelector = ({ selectedRamp, setSelected, reverse, setReverse, }) => {
     const containerRef = useRef(null);
@@ -49,23 +49,15 @@ const ColorRampSelector = ({ selectedRamp, setSelected, reverse, setReverse, })
             return;
         }
         canvas.style.visibility = 'hidden';
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
+        const ramp = colorMaps.find(c => c.name === rampName);
+        if (!ramp) {
             return;
         }
-        const ramp = colorMaps.filter(c => c.name === rampName)[0];
-        let colors = ramp.colors;
-        if (reverse) {
-            colors = [...colors].reverse();
-        }
+        const displayRamp = reverse
+            ? Object.assign(Object.assign({}, ramp), { colors: [...ramp.colors].reverse() }) : ramp;
         canvas.width = canvasWidth;
         canvas.height = canvasHeight;
-        for (let i = 0; i <= 255; i++) {
-            ctx.beginPath();
-            const color = colors[i];
-            ctx.fillStyle = color;
-            ctx.fillRect(i * 2, 0, 2, canvasHeight);
-        }
+        drawColorRamp(canvas, displayRamp);
         canvas.style.visibility = 'initial';
     };
     useEffect(() => {

package/lib/dialogs/symbology/components/color_ramp/ColorRampSelectorEntry.d.ts

@@ -10,11 +10,11 @@
  * - `onClick`: Callback fired with the ramp name when clicked.
  */
 import React from 'react';
-import { IColorMap } from "../../colorRampUtils";
+import { ColorRampName, IColorMap } from "../../colorRampUtils";
 interface IColorRampSelectorEntryProps {
     index: number;
     colorMap: IColorMap;
-    onClick: (item: any) => void;
+    onClick: (item: ColorRampName) => void;
 }
 declare const ColorRampSelectorEntry: React.FC<IColorRampSelectorEntryProps>;
 export default ColorRampSelectorEntry;

package/lib/dialogs/symbology/components/color_ramp/ColorRampSelectorEntry.js

@@ -10,6 +10,7 @@
  * - `onClick`: Callback fired with the ramp name when clicked.
  */
 import React, { useEffect } from 'react';
+import { drawColorRamp, } from "../../colorRampUtils";
 const ColorRampSelectorEntry = ({ index, colorMap, onClick, }) => {
     const canvasWidth = 512;
     const canvasHeight = 30;
@@ -20,17 +21,8 @@ const ColorRampSelectorEntry = ({ index, colorMap, onClick, }) => {
         }
         canvas.width = canvasWidth;
         canvas.height = canvasHeight;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) {
-            return;
-        }
-        for (let i = 0; i <= 255; i++) {
-            ctx.beginPath();
-            const color = colorMap.colors[i];
-            ctx.fillStyle = color;
-            ctx.fillRect(i * 2, 0, 2, canvasHeight);
-        }
-    }, []);
+        drawColorRamp(canvas, colorMap);
+    }, [colorMap, index]);
     return (React.createElement("div", { key: colorMap.name, onClick: () => onClick(colorMap.name), className: "jp-gis-color-ramp-entry" },
         React.createElement("span", { className: "jp-gis-color-label" }, colorMap.name),
         React.createElement("canvas", { id: `cv-${index}`, width: canvasWidth, height: canvasHeight, className: "jp-gis-color-canvas" })));

package/lib/dialogs/symbology/components/color_ramp/RgbaColorPicker.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { RgbaColor } from "../../colorRampUtils";
+export type { RgbaColor };
+interface IRgbaColorPickerProps {
+    color: RgbaColor;
+    onChange: (color: RgbaColor) => void;
+}
+/**
+ * A swatch button that opens a floating RGBA color picker on click.
+ * Color is stored as [r, g, b, a] where r/g/b are 0-255 and a is 0-1.
+ */
+declare const RgbaColorPicker: React.FC<IRgbaColorPickerProps>;
+export default RgbaColorPicker;

package/lib/dialogs/symbology/components/color_ramp/RgbaColorPicker.js

@@ -0,0 +1,98 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { RgbaColorPicker as ReactColorfulRgba } from 'react-colorful';
+import { RGBA_INDEX, } from "../../colorRampUtils";
+/**
+ * A swatch button that opens a floating RGBA color picker on click.
+ * Color is stored as [r, g, b, a] where r/g/b are 0-255 and a is 0-1.
+ */
+const RgbaColorPicker = ({ color, onChange, }) => {
+    const [open, setOpen] = useState(false);
+    const containerRef = useRef(null);
+    const [r, g, b, a] = color;
+    const [inputs, setInputs] = useState({
+        r: String(Math.round(r)),
+        g: String(Math.round(g)),
+        b: String(Math.round(b)),
+        a: String(Math.round(a * 100)),
+    });
+    // Sync text inputs when color changes externally (e.g. picker drag)
+    useEffect(() => {
+        setInputs({
+            r: String(Math.round(r)),
+            g: String(Math.round(g)),
+            b: String(Math.round(b)),
+            a: String(Math.round(a * 100)),
+        });
+    }, [r, g, b, a]);
+    const swatchStyle = {
+        background: `rgba(${r},${g},${b},${a})`,
+        width: 28,
+        height: 28,
+        borderRadius: 4,
+        border: '1px solid var(--jp-border-color1, #ccc)',
+        cursor: 'pointer',
+        flexShrink: 0,
+    };
+    const handlePickerChange = useCallback((c) => {
+        onChange([c.r, c.g, c.b, c.a]);
+    }, [onChange]);
+    const handleChannelInput = (channel, value) => {
+        setInputs(prev => (Object.assign(Object.assign({}, prev), { [channel]: value })));
+        const num = Number(value);
+        if (channel === 'a') {
+            if (num >= 0 && num <= 100) {
+                onChange([r, g, b, num / 100]);
+            }
+        }
+        else {
+            if (num >= 0 && num <= 255) {
+                const newColor = [...color];
+                newColor[RGBA_INDEX[channel]] = Math.round(num);
+                onChange(newColor);
+            }
+        }
+    };
+    const handleTransparentChange = (checked) => {
+        // Always restore to fully opaque rather than the previous alpha,
+        // which could have been near-zero and appear broken to the user.
+        onChange([r, g, b, checked ? 0 : 1]);
+    };
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const handleClickOutside = (e) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(e.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [open]);
+    return (React.createElement("div", { ref: containerRef, className: "jp-gis-rgba-picker", style: { position: 'relative' } },
+        React.createElement("div", { style: swatchStyle, onClick: () => setOpen(v => !v) }),
+        open && (React.createElement("div", { style: {
+                position: 'absolute',
+                zIndex: 1000,
+                top: '110%',
+                left: 0,
+                background: 'var(--jp-layout-color1, #fff)',
+                border: '1px solid var(--jp-border-color1, #ccc)',
+                borderRadius: 6,
+                padding: 8,
+                boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
+            } },
+            React.createElement(ReactColorfulRgba, { color: { r, g, b, a }, onChange: handlePickerChange }),
+            React.createElement("div", { className: "jp-gis-rgba-inputs" },
+                ['r', 'g', 'b'].map(ch => (React.createElement("div", { key: ch, className: "jp-gis-rgba-field" },
+                    React.createElement("label", null, ch.toUpperCase()),
+                    React.createElement("input", { className: "jp-mod-styled", type: "number", min: 0, max: 255, value: inputs[ch], onChange: e => handleChannelInput(ch, e.target.value) })))),
+                React.createElement("div", { className: "jp-gis-rgba-field" },
+                    React.createElement("label", null, "A%"),
+                    React.createElement("input", { className: "jp-mod-styled", type: "number", min: 0, max: 100, value: inputs.a, onChange: e => handleChannelInput('a', e.target.value) }))),
+            React.createElement("label", { className: "jp-gis-transparent-label" },
+                React.createElement("input", { type: "checkbox", checked: a === 0, onChange: e => handleTransparentChange(e.target.checked) }),
+                "No color")))));
+};
+export default RgbaColorPicker;

package/lib/dialogs/symbology/components/color_stops/StopContainer.js

@@ -1,10 +1,12 @@
 import { Button } from '@jupyterlab/ui-components';
+import { UUID } from '@lumino/coreutils';
 import React from 'react';
 import StopRow from './StopRow';
 const StopContainer = ({ selectedMethod, stopRows, setStopRows, }) => {
     const addStopRow = () => {
         setStopRows([
             {
+                id: UUID.uuid4(),
                 stop: 0,
                 output: [0, 0, 0, 1],
             },
@@ -21,7 +23,7 @@ const StopContainer = ({ selectedMethod, stopRows, setStopRows, }) => {
             React.createElement("div", { className: "jp-gis-stop-labels", style: { display: 'flex', gap: 6 } },
                 React.createElement("span", { style: { flex: '0 0 18%' } }, "Value"),
                 React.createElement("span", null, "Output Value")),
-            stopRows.map((stop, index) => (React.createElement(StopRow, { key: `${index}-${stop.output}`, index: index, dataValue: stop.stop, symbologyValue: stop.output, stopRows: stopRows, setStopRows: setStopRows, deleteRow: () => deleteStopRow(index), useNumber: selectedMethod === 'radius' ? true : false })))),
+            stopRows.map((stop, index) => (React.createElement(StopRow, { key: stop.id, index: index, dataValue: stop.stop, symbologyValue: stop.output, stopRows: stopRows, setStopRows: setStopRows, deleteRow: () => deleteStopRow(index), useNumber: selectedMethod === 'radius' ? true : false })))),
         React.createElement("div", { className: "jp-gis-symbology-button-container" },
             React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: addStopRow }, "Add Stop"))));
 };

package/lib/dialogs/symbology/components/color_stops/StopRow.d.ts

@@ -3,7 +3,7 @@ import { IStopRow } from "../../symbologyDialog";
 import { SymbologyValue } from "../../../../types";
 declare const StopRow: React.FC<{
     index: number;
-    dataValue: number;
+    dataValue: number | string;
     symbologyValue: SymbologyValue;
     stopRows: IStopRow[];
     setStopRows: (stopRows: IStopRow[]) => void;