@jupytergis/base 0.14.1 → 0.16.0-alpha.0

package/lib/features/layers/symbology/components/ScaleEditor.js

@@ -0,0 +1,221 @@
+/**
+ * Inline scale editor for one IMapping.
+ * Renders a different UI for each scale scheme.
+ */
+import { UUID } from '@lumino/coreutils';
+import React, { useCallback, useEffect, useState } from 'react';
+import { NumericInput } from "./NumericInput";
+import ColorRampSelector from "./color_ramp/ColorRampSelector";
+import RgbaColorPicker from "./color_ramp/RgbaColorPicker";
+import StopContainer from "./color_stops/StopContainer";
+import { computeCategorizedColorStops, computeGraduatedColorStops, } from "../styleBuilder";
+function stopsToRows(stops) {
+    return stops.map(s => ({
+        id: UUID.uuid4(),
+        stop: s.stop,
+        output: s.color,
+    }));
+}
+function rowsToColorStops(rows) {
+    return rows
+        .filter(r => r.output !== undefined)
+        .map(r => ({ stop: r.stop, color: r.output }));
+}
+const MODE_OPTIONS = [
+    'equal interval',
+    'quantile',
+    'jenks',
+    'pretty',
+    'logarithmic',
+];
+export const ConstantEditor = ({ scale, onChange, }) => {
+    if (scale.scheme === 'constant_num') {
+        return (React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Value"),
+            React.createElement(NumericInput, { className: "jp-mod-styled", value: scale.params.value, onChange: v => onChange({ scheme: 'constant_num', params: { value: v } }) })));
+    }
+    return (React.createElement("div", { className: "jp-gis-symbology-row" },
+        React.createElement("label", null, "Color"),
+        React.createElement(RgbaColorPicker, { color: scale.params.value, onChange: color => onChange({ scheme: 'constant_rgba', params: { value: color } }) })));
+};
+export const ColorRampEditor = ({ scale, field, featureValues, onChange, }) => {
+    var _a, _b, _c, _d;
+    const { params } = scale;
+    const [stopRows, setStopRows] = useState(params.colorStops ? stopsToRows(params.colorStops) : []);
+    const update = useCallback((patch) => onChange({ scheme: 'colorRamp', params: Object.assign(Object.assign({}, params), patch) }), [params, onChange]);
+    // Auto-populate domain from data when the field is known and domain is unset.
+    useEffect(() => {
+        var _a;
+        if (!field || params.domain) {
+            return;
+        }
+        const values = Array.from((_a = featureValues[field]) !== null && _a !== void 0 ? _a : []).filter((v) => Number.isFinite(v));
+        if (values.length === 0) {
+            return;
+        }
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        if (min !== max) {
+            update({ domain: [min, max] });
+        }
+    }, [field, featureValues]); // intentionally omits `update` to avoid loop
+    const classify = () => {
+        var _a, _b, _c;
+        if (!field) {
+            return;
+        }
+        const values = Array.from((_a = featureValues[field]) !== null && _a !== void 0 ? _a : []).filter((v) => Number.isFinite(v));
+        const computed = computeGraduatedColorStops({
+            renderType: 'Graduated',
+            nClasses: params.nShades,
+            mode: params.mode,
+            colorRamp: params.name,
+            reverseRamp: params.reverse,
+            vmin: (_b = params.domain) === null || _b === void 0 ? void 0 : _b[0],
+            vmax: (_c = params.domain) === null || _c === void 0 ? void 0 : _c[1],
+        }, values);
+        const rows = computed.map(s => ({
+            id: UUID.uuid4(),
+            stop: s.value,
+            output: s.color,
+        }));
+        setStopRows(rows);
+        update({
+            colorStops: computed.map(s => ({
+                stop: s.value,
+                color: s.color,
+            })),
+        });
+    };
+    const handleStopRowsChange = (rows) => {
+        setStopRows(rows);
+        update({
+            colorStops: rowsToColorStops(rows),
+        });
+    };
+    return (React.createElement("div", { className: "jp-gis-color-ramp-container" },
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Ramp"),
+            React.createElement(ColorRampSelector, { selectedRamp: params.name, setSelected: name => update({ name }), reverse: params.reverse, setReverse: v => update({ reverse: typeof v === 'function' ? v(params.reverse) : v }) })),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Mode"),
+            React.createElement("div", { className: "jp-select-wrapper" },
+                React.createElement("select", { className: "jp-mod-styled", value: params.mode, onChange: e => update({ mode: e.target.value }) }, MODE_OPTIONS.map(m => (React.createElement("option", { key: m, value: m }, m)))))),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Classes"),
+            React.createElement(NumericInput, { className: "jp-mod-styled", value: params.nShades, onChange: v => update({ nShades: v }) })),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Domain"),
+            React.createElement("div", { className: "jp-gis-domain-inputs" },
+                React.createElement(NumericInput, { className: "jp-mod-styled", placeholder: "min", value: (_b = (_a = params.domain) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 0, onChange: v => { var _a, _b; return update({ domain: [v, (_b = (_a = params.domain) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : v] }); } }),
+                React.createElement(NumericInput, { className: "jp-mod-styled", placeholder: "max", value: (_d = (_c = params.domain) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : 0, onChange: v => { var _a, _b; return update({ domain: [(_b = (_a = params.domain) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : v, v] }); } }))),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Fallback"),
+            React.createElement(RgbaColorPicker, { color: params.fallback, onChange: color => update({ fallback: color }) })),
+        React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", disabled: !field, onClick: classify }, "Classify"),
+        stopRows.length > 0 && (React.createElement(StopContainer, { selectedMethod: "color", stopRows: stopRows, setStopRows: handleStopRowsChange }))));
+};
+export const CategoricalEditor = ({ scale, field, featureValues, onChange, }) => {
+    var _a;
+    const { params } = scale;
+    const initialRows = params.colorStops
+        ? stopsToRows(params.colorStops)
+        : [];
+    const [stopRows, setStopRows] = useState(initialRows);
+    const update = useCallback((patch) => onChange({ scheme: 'categorical', params: Object.assign(Object.assign({}, params), patch) }), [params, onChange]);
+    const classify = () => {
+        var _a, _b;
+        if (!field) {
+            return;
+        }
+        const values = Array.from((_a = featureValues[field]) !== null && _a !== void 0 ? _a : []);
+        const computed = computeCategorizedColorStops({
+            renderType: 'Categorized',
+            colorRamp: params.colorRamp,
+            reverseRamp: (_b = params.reverse) !== null && _b !== void 0 ? _b : false,
+        }, values);
+        const rows = computed.map(s => ({
+            id: UUID.uuid4(),
+            stop: s.value,
+            output: s.color,
+        }));
+        setStopRows(rows);
+        update({
+            colorStops: computed.map(s => ({
+                stop: s.value,
+                color: s.color,
+            })),
+        });
+    };
+    const handleStopRowsChange = (rows) => {
+        setStopRows(rows);
+        update({ colorStops: rowsToColorStops(rows) });
+    };
+    return (React.createElement("div", { className: "jp-gis-color-ramp-container" },
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Ramp"),
+            React.createElement(ColorRampSelector, { selectedRamp: params.colorRamp, setSelected: colorRamp => update({ colorRamp }), reverse: (_a = params.reverse) !== null && _a !== void 0 ? _a : false, setReverse: v => {
+                    var _a;
+                    return update({
+                        reverse: typeof v === 'function' ? v((_a = params.reverse) !== null && _a !== void 0 ? _a : false) : v,
+                    });
+                } })),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Fallback"),
+            React.createElement(RgbaColorPicker, { color: params.fallback, onChange: color => update({ fallback: color }) })),
+        React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", disabled: !field, onClick: classify }, "Classify"),
+        stopRows.length > 0 && (React.createElement(StopContainer, { selectedMethod: "color", stopRows: stopRows, setStopRows: handleStopRowsChange }))));
+};
+export const ScalarEditor = ({ scale, field, featureValues, onChange, }) => {
+    const { params } = scale;
+    const update = useCallback((patch) => onChange({ scheme: 'scalar', params: Object.assign(Object.assign({}, params), patch) }), [params, onChange]);
+    const [stopRows, setStopRows] = useState(params.scalarStops
+        ? params.scalarStops.map(s => ({
+            id: UUID.uuid4(),
+            stop: s.stop,
+            output: s.output,
+        }))
+        : []);
+    const classify = () => {
+        const inMin = params.domain[0];
+        const inMax = params.domain[1];
+        const outMin = params.range[0];
+        const outMax = params.range[1];
+        const rows = [
+            { id: UUID.uuid4(), stop: inMin, output: outMin },
+            { id: UUID.uuid4(), stop: inMax, output: outMax },
+        ];
+        setStopRows(rows);
+        update({
+            scalarStops: [
+                { stop: inMin, output: outMin },
+                { stop: inMax, output: outMax },
+            ],
+        });
+    };
+    const handleStopRowsChange = (rows) => {
+        setStopRows(rows);
+        update({
+            scalarStops: rows.map(r => ({
+                stop: r.stop,
+                output: r.output,
+            })),
+        });
+    };
+    return (React.createElement("div", { className: "jp-gis-color-ramp-container" },
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Input range"),
+            React.createElement("div", { className: "jp-gis-domain-inputs" },
+                React.createElement(NumericInput, { className: "jp-mod-styled", placeholder: "min", value: params.domain[0], onChange: v => update({ domain: [v, params.domain[1]] }) }),
+                React.createElement(NumericInput, { className: "jp-mod-styled", placeholder: "max", value: params.domain[1], onChange: v => update({ domain: [params.domain[0], v] }) }))),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Output range"),
+            React.createElement("div", { className: "jp-gis-domain-inputs" },
+                React.createElement(NumericInput, { className: "jp-mod-styled", placeholder: "min", value: params.range[0], onChange: v => update({ range: [v, params.range[1]] }) }),
+                React.createElement(NumericInput, { className: "jp-mod-styled", placeholder: "max", value: params.range[1], onChange: v => update({ range: [params.range[0], v] }) }))),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Fallback"),
+            React.createElement(NumericInput, { className: "jp-mod-styled", value: params.fallback, onChange: v => update({ fallback: v }) })),
+        React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: classify }, "Set stops"),
+        stopRows.length > 0 && (React.createElement(StopContainer, { selectedMethod: "radius", stopRows: stopRows, setStopRows: handleStopRowsChange }))));
+};

package/lib/{dialogs → features/layers}/symbology/components/color_ramp/ColorRampControls.d.ts

@@ -18,7 +18,7 @@
  */
 import { IDict } from '@jupytergis/schema';
 import React from 'react';
-import { ClassificationMode } from "../../../../types";
+import { ClassificationMode } from "../../../../../types";
 import { ColorRampName } from '../../colorRampUtils';
 interface IColorRampControlsProps {
     modeOptions: ClassificationMode[];

package/lib/{dialogs → features/layers}/symbology/components/color_ramp/ColorRampControls.js

@@ -18,19 +18,20 @@
  */
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useState } from 'react';
-import { LoadingIcon } from "../../../../shared/components/loading";
+import { LoadingIcon } from "../../../../../shared/components/loading";
 import ColorRampSelector from './ColorRampSelector';
 import ModeSelectRow from './ModeSelectRow';
 import { COLOR_RAMP_DEFAULTS } from '../../colorRampUtils';
 const isValidNumberOfShades = (value) => !isNaN(value) && value > 0;
 const ColorRampControls = ({ layerParams, modeOptions, classifyFunc, showModeRow, showRampSelector, }) => {
+    var _a;
     const [selectedRamp, setSelectedRamp] = useState('viridis');
     const [selectedMode, setSelectedMode] = useState('equal interval');
     const [numberOfShades, setNumberOfShades] = useState(9);
     const [isLoading, setIsLoading] = useState(false);
     const [reverseRamp, setReverseRamp] = useState(false);
     const [warning, setWarning] = useState(null);
-    const symbologyState = layerParams.symbologyState;
+    const symbologyState = (_a = layerParams.symbologyState) !== null && _a !== void 0 ? _a : {};
     useEffect(() => {
         if (symbologyState) {
             populateOptions();

package/lib/{dialogs → features/layers}/symbology/components/color_ramp/ColorRampSelector.d.ts

@@ -11,12 +11,13 @@
  * - `setSelected`: Callback fired with the new ramp when selected.
  */
 import React from 'react';
-import { ColorRampName } from "../../colorRampUtils";
+import { ColorRampName, IColorMap } from "../../colorRampUtils";
 interface IColorRampSelectorProps {
     selectedRamp: ColorRampName;
     setSelected: (value: ColorRampName) => void;
     reverse: boolean;
     setReverse: React.Dispatch<React.SetStateAction<boolean>>;
+    colorMaps?: IColorMap[];
 }
 declare const ColorRampSelector: React.FC<IColorRampSelectorProps>;
 export default ColorRampSelector;

package/lib/{dialogs → features/layers}/symbology/components/color_ramp/ColorRampSelector.js

@@ -12,15 +12,20 @@
  */
 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 ColorRampSelector = ({ selectedRamp, setSelected, reverse, setReverse, colorMaps: propColorMaps, }) => {
     const containerRef = useRef(null);
     const [isOpen, setIsOpen] = useState(false);
     const [colorMaps, setColorMaps] = useState([]);
     const canvasWidth = 512;
     const canvasHeight = 30;
     useColorMapList(setColorMaps);
+    useEffect(() => {
+        if (propColorMaps) {
+            setColorMaps(propColorMaps);
+        }
+    }, [propColorMaps]);
     useEffect(() => {
         if (colorMaps.length > 0) {
             updateCanvas(selectedRamp);
@@ -49,23 +54,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 → features/layers}/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 → features/layers}/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 → features/layers}/symbology/components/color_ramp/ModeSelectRow.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ClassificationMode } from "../../../../types";
+import { ClassificationMode } from "../../../../../types";
 interface IModeSelectRowProps {
     numberOfShades: number;
     setNumberOfShades: React.Dispatch<React.SetStateAction<number>>;

package/lib/features/layers/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/features/layers/symbology/components/color_ramp/RgbaColorPicker.js

@@ -0,0 +1,128 @@
+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 swatchRef = useRef(null);
+    const popupRef = useRef(null);
+    const [popupPos, setPopupPos] = useState({
+        top: 0,
+        left: 0,
+    });
+    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 swatchWrapStyle = {
+        position: 'relative',
+        width: 28,
+        height: 28,
+        borderRadius: 4,
+        border: '1px solid var(--jp-border-color1, #ccc)',
+        cursor: 'pointer',
+        flexShrink: 0,
+        overflow: 'hidden',
+        // Checkerboard to reveal transparency.
+        backgroundImage: 'repeating-conic-gradient(#bbb 0% 25%, #fff 0% 50%)',
+        backgroundSize: '8px 8px',
+    };
+    const swatchColorStyle = {
+        position: 'absolute',
+        inset: 0,
+        background: `rgba(${r},${g},${b},${a})`,
+    };
+    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) => {
+            const target = e.target;
+            if (containerRef.current &&
+                !containerRef.current.contains(target) &&
+                popupRef.current &&
+                !popupRef.current.contains(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", { ref: swatchRef, style: swatchWrapStyle, onClick: () => {
+                if (!open && swatchRef.current) {
+                    const rect = swatchRef.current.getBoundingClientRect();
+                    // Prefer opening below; flip above if too close to bottom.
+                    const popupH = 280;
+                    const top = rect.bottom + popupH > window.innerHeight
+                        ? rect.top - popupH - 4
+                        : rect.bottom + 4;
+                    setPopupPos({ top, left: rect.left });
+                }
+                setOpen(v => !v);
+            } },
+            React.createElement("div", { style: swatchColorStyle })),
+        open && (React.createElement("div", { ref: popupRef, style: {
+                position: 'fixed',
+                zIndex: 10000,
+                top: popupPos.top,
+                left: popupPos.left,
+                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 → features/layers}/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 → features/layers}/symbology/components/color_stops/StopRow.d.ts

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

package/lib/{dialogs → features/layers}/symbology/components/color_stops/StopRow.js

@@ -2,7 +2,8 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef } from 'react';
-import { ensureHexColorCode, hexToRgb, } from "../../colorRampUtils";
+import { colorToRgba, } from "../../colorRampUtils";
+import RgbaColorPicker from "../color_ramp/RgbaColorPicker";
 const StopRow = ({ index, dataValue, symbologyValue, stopRows, setStopRows, deleteRow, useNumber, }) => {
     const inputRef = useRef(null);
     useEffect(() => {
@@ -13,7 +14,8 @@ const StopRow = ({ index, dataValue, symbologyValue, stopRows, setStopRows, dele
     }, [stopRows]);
     const handleStopChange = (event) => {
         const newRows = [...stopRows];
-        newRows[index].stop = +event.target.value;
+        const value = event.target.value;
+        newRows[index].stop = useNumber ? +value : value;
         setStopRows(newRows);
     };
     const handleBlur = () => {
@@ -31,14 +33,17 @@ const StopRow = ({ index, dataValue, symbologyValue, stopRows, setStopRows, dele
     };
     const handleOutputChange = (event) => {
         const newRows = [...stopRows];
-        useNumber
-            ? (newRows[index].output = +event.target.value)
-            : (newRows[index].output = hexToRgb(event.target.value));
+        newRows[index].output = +event.target.value;
+        setStopRows(newRows);
+    };
+    const handleColorOutputChange = (color) => {
+        const newRows = [...stopRows];
+        newRows[index].output = color;
         setStopRows(newRows);
     };
     return (React.createElement("div", { className: "jp-gis-color-row" },
-        React.createElement("input", { id: `jp-gis-color-value-${index}`, type: "number", value: dataValue, onChange: handleStopChange, onBlur: handleBlur, className: "jp-mod-styled jp-gis-color-row-value-input" }),
-        useNumber ? (React.createElement("input", { type: "number", ref: inputRef, value: symbologyValue, onChange: handleOutputChange, className: "jp-mod-styled jp-gis-color-row-output-input" })) : (React.createElement("input", { id: `jp-gis-color-color-${index}`, ref: inputRef, value: ensureHexColorCode(symbologyValue), type: "color", onChange: handleOutputChange, className: "jp-mod-styled jp-gis-color-row-output-input" })),
+        React.createElement("input", { id: `jp-gis-color-value-${index}`, type: useNumber ? 'number' : 'text', value: dataValue, onChange: handleStopChange, onBlur: handleBlur, className: "jp-mod-styled jp-gis-color-row-value-input" }),
+        useNumber ? (React.createElement("input", { type: "number", ref: inputRef, value: symbologyValue, onChange: handleOutputChange, className: "jp-mod-styled jp-gis-color-row-output-input" })) : (React.createElement(RgbaColorPicker, { color: colorToRgba(symbologyValue), onChange: handleColorOutputChange })),
         React.createElement(Button, { id: `jp-gis-remove-color-${index}`, className: "jp-Button jp-gis-filter-icon" },
             React.createElement(FontAwesomeIcon, { icon: faTrash, onClick: deleteRow }))));
 };

package/lib/features/layers/symbology/grammarToOLLayer.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Grammar → OL layer compiler.
+ *
+ * grammarToOLLayer compiles an IGrammarSymbologyState into a single OL layer:
+ *
+ *   • one non-KDE grammar layer  → VectorImageLayer
+ *   • one KDE grammar layer      → HeatmapLayer
+ *   • multiple grammar layers    → LayerGroup containing the above
+ *
+ * All multi-layer and transform decisions are encapsulated here; callers
+ * treat the result as an opaque OL Layer.
+ */
+import { IGrammarSymbologyState } from '@jupytergis/schema';
+import { Layer } from 'ol/layer';
+import LayerGroup from 'ol/layer/Group';
+import { Vector as VectorSource } from 'ol/source';
+/**
+ * Compile a Grammar symbology state into a single OL layer.
+ *
+ * isRaster=true: each grammar layer → WebGLTile (pixel-color channel → color
+ *   style), $band-N fields → ['band', N] expressions.
+ * isRaster=false (default): non-KDE → VectorImageLayer, KDE → HeatmapLayer.
+ *
+ * When the state contains multiple grammar layers a LayerGroup is returned;
+ * otherwise the appropriate single layer type is returned directly.
+ */
+export declare function grammarToOLLayer(state: IGrammarSymbologyState, source: VectorSource | any, opacity: number, visible: boolean, featureValues?: unknown[], isRaster?: boolean): Layer | LayerGroup;