@jupytergis/base 0.15.0 → 0.16.0-alpha.1

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-gis-grammar-action-btn", 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-gis-grammar-action-btn", 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-gis-grammar-action-btn", 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();
@@ -79,6 +80,6 @@ const ColorRampControls = ({ layerParams, modeOptions, classifyFunc, showModeRow
             React.createElement(ColorRampSelector, { selectedRamp: selectedRamp, setSelected: handleRampChange, reverse: reverseRamp, setReverse: setReverseRamp }))),
         showModeRow && (React.createElement(ModeSelectRow, { modeOptions: modeOptions, numberOfShades: numberOfShades, setNumberOfShades: setNumberOfShades, selectedMode: selectedMode, setSelectedMode: setSelectedMode })),
         warning && (React.createElement("div", { className: "jp-gis-warning", style: { color: 'orange', marginTop: 4 } }, warning)),
-        isLoading ? (React.createElement(LoadingIcon, null)) : (React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", disabled: !isValidNumberOfShades(numberOfShades) || !selectedMode || !!warning, onClick: () => classifyFunc(selectedMode, numberOfShades, selectedRamp, reverseRamp, setIsLoading) }, "Classify"))));
+        isLoading ? (React.createElement(LoadingIcon, null)) : (React.createElement(Button, { className: "jp-gis-grammar-action-btn", disabled: !isValidNumberOfShades(numberOfShades) || !selectedMode || !!warning, onClick: () => classifyFunc(selectedMode, numberOfShades, selectedRamp, reverseRamp, setIsLoading) }, "Classify"))));
 };
 export default ColorRampControls;

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

@@ -14,13 +14,18 @@ import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
 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);

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/{dialogs → features/layers}/symbology/components/color_ramp/RgbaColorPicker.js

@@ -8,6 +8,12 @@ import { RGBA_INDEX, } from "../../colorRampUtils";
 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)),
@@ -24,14 +30,23 @@ const RgbaColorPicker = ({ color, onChange, }) => {
             a: String(Math.round(a * 100)),
         });
     }, [r, g, b, a]);
-    const swatchStyle = {
-        background: `rgba(${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]);
@@ -62,8 +77,11 @@ const RgbaColorPicker = ({ color, onChange, }) => {
             return;
         }
         const handleClickOutside = (e) => {
+            const target = e.target;
             if (containerRef.current &&
-                !containerRef.current.contains(e.target)) {
+                !containerRef.current.contains(target) &&
+                popupRef.current &&
+                !popupRef.current.contains(target)) {
                 setOpen(false);
             }
         };
@@ -71,12 +89,24 @@ const RgbaColorPicker = ({ color, onChange, }) => {
         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,
+        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,

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

@@ -25,6 +25,6 @@ const StopContainer = ({ selectedMethod, stopRows, setStopRows, }) => {
                 React.createElement("span", null, "Output Value")),
             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"))));
+            React.createElement(Button, { className: "jp-gis-grammar-action-btn", onClick: addStopRow }, "Add Stop"))));
 };
 export default StopContainer;

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

@@ -1,6 +1,6 @@
 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 | string;

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

@@ -2,8 +2,10 @@ 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 { colorToRgba } from "../../colorRampUtils";
+import { colorToRgba, } from "../../colorRampUtils";
 import RgbaColorPicker from "../color_ramp/RgbaColorPicker";
+import { STOP_NULL, STOP_UNDEFINED, } from "../../styleBuilder";
+const SENTINELS = new Set([STOP_NULL, STOP_UNDEFINED]);
 const StopRow = ({ index, dataValue, symbologyValue, stopRows, setStopRows, deleteRow, useNumber, }) => {
     const inputRef = useRef(null);
     useEffect(() => {
@@ -21,6 +23,14 @@ const StopRow = ({ index, dataValue, symbologyValue, stopRows, setStopRows, dele
     const handleBlur = () => {
         const newRows = [...stopRows];
         newRows.sort((a, b) => {
+            const aIsSentinel = SENTINELS.has(a.stop);
+            const bIsSentinel = SENTINELS.has(b.stop);
+            if (aIsSentinel && !bIsSentinel) {
+                return 1;
+            }
+            if (!aIsSentinel && bIsSentinel) {
+                return -1;
+            }
             if (a.stop < b.stop) {
                 return -1;
             }
@@ -42,7 +52,9 @@ const StopRow = ({ index, dataValue, symbologyValue, stopRows, setStopRows, dele
         setStopRows(newRows);
     };
     return (React.createElement("div", { className: "jp-gis-color-row" },
-        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" }),
+        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", style: SENTINELS.has(dataValue)
+                ? { fontStyle: 'italic' }
+                : undefined }),
         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;

package/lib/features/layers/symbology/grammarToOLLayer.js

@@ -0,0 +1,145 @@
+/**
+ * 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 { Heatmap as HeatmapLayer, VectorImage as VectorImageLayer, WebGLTile as WebGLTileLayer, } from 'ol/layer';
+import LayerGroup from 'ol/layer/Group';
+import { getColorMap } from './colorRampUtils';
+import { grammarToOLStyle } from './grammarToOLStyle';
+import { DEFAULT_FLAT_STYLE } from './styleBuilder';
+// Default OL heatmap gradient (cool → warm).
+const DEFAULT_GRADIENT = ['#00f', '#0ff', '#0f0', '#ff0', '#f00'];
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+/**
+ * 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 function grammarToOLLayer(state, source, opacity, visible, featureValues = [], isRaster = false) {
+    var _a;
+    const grammarLayers = (_a = state.layers) !== null && _a !== void 0 ? _a : [];
+    if (isRaster) {
+        const subLayers = grammarLayers.map(grammarLayer => compileRasterLayer(grammarLayer, source, opacity, visible, featureValues));
+        if (subLayers.length === 1) {
+            return subLayers[0];
+        }
+        // Empty or multi-layer: wrap in a group (empty group renders nothing).
+        return new LayerGroup({ opacity, visible, layers: subLayers });
+    }
+    if (grammarLayers.length === 0) {
+        // No grammar layers defined yet — return an empty vector layer so the map
+        // has a valid layer object to call setVisible/setOpacity on.
+        return new VectorImageLayer({ opacity, visible, source });
+    }
+    const subLayers = grammarLayers.map(grammarLayer => compileGrammarLayer(grammarLayer, source, opacity, visible, featureValues));
+    if (subLayers.length === 1) {
+        return subLayers[0];
+    }
+    return new LayerGroup({ opacity, visible, layers: subLayers });
+}
+// ---------------------------------------------------------------------------
+// Per grammar-layer compilation
+// ---------------------------------------------------------------------------
+function compileGrammarLayer(grammarLayer, source, opacity, visible, featureValues) {
+    var _a;
+    const kdeTransform = (_a = grammarLayer.preprocess) === null || _a === void 0 ? void 0 : _a.find((t) => t.type === 'kde');
+    if (kdeTransform) {
+        return compileKDELayer(grammarLayer, kdeTransform, source, opacity, visible);
+    }
+    return compileVectorLayer(grammarLayer, source, opacity, visible, featureValues);
+}
+// ---------------------------------------------------------------------------
+// Raster → WebGLTileLayer
+// ---------------------------------------------------------------------------
+/**
+ * Compile a single Grammar layer to an OL WebGLTile layer.
+ * The pixel-color channel of the compiled style becomes the WebGL tile
+ * `color` expression.  $band-N fields compile to ['band', N] in the style
+ * compiler; normalized GeoTIFF bands cover [0, 1] so featureValues [0, 1]
+ * produces sensible colorRamp stops by default.
+ */
+function compileRasterLayer(grammarLayer, source, opacity, visible, featureValues) {
+    const singleLayerState = {
+        layers: [grammarLayer],
+    };
+    // Use [0, 1] as fallback values so colorRamp stops span the normalized
+    // band range when no explicit featureValues are provided.
+    const values = featureValues.length > 0 ? featureValues : [0, 1];
+    const flatStyle = grammarToOLStyle(singleLayerState, values);
+    const colorExpr = flatStyle['pixel-color'];
+    return new WebGLTileLayer(Object.assign({ opacity,
+        visible,
+        source }, (colorExpr !== undefined ? { style: { color: colorExpr } } : {})));
+}
+// ---------------------------------------------------------------------------
+// KDE → HeatmapLayer
+// ---------------------------------------------------------------------------
+function compileKDELayer(grammarLayer, kdeTransform, source, opacity, visible) {
+    var _a, _b, _c;
+    const gradient = (_a = extractGradient(grammarLayer.rules)) !== null && _a !== void 0 ? _a : DEFAULT_GRADIENT;
+    const { weightField } = kdeTransform;
+    return new HeatmapLayer(Object.assign({ opacity,
+        visible,
+        source, blur: (_b = kdeTransform.blur) !== null && _b !== void 0 ? _b : 15, radius: (_c = kdeTransform.radius) !== null && _c !== void 0 ? _c : 10, gradient }, (weightField
+        ? {
+            weight: (feature) => {
+                const val = feature.get(weightField);
+                return typeof val === 'number' && isFinite(val) ? val : 1;
+            },
+        }
+        : {})));
+}
+/**
+ * Look for a pixel-color colorRamp mapping in the rules and convert it to an
+ * OL HeatmapLayer gradient string array.  Returns undefined when absent.
+ */
+function extractGradient(rules) {
+    for (const rule of rules) {
+        for (const mapping of rule.mappings) {
+            const isPixelChannel = mapping.channels.some(ch => ch === 'pixel-color' || ch.startsWith('pixel-'));
+            if (!isPixelChannel || mapping.scale.scheme !== 'colorRamp') {
+                continue;
+            }
+            const colorMap = getColorMap(mapping.scale.params.name);
+            if (!colorMap || colorMap.colors.length === 0) {
+                continue;
+            }
+            // Sample 5 evenly spaced stops from the 255-entry color array.
+            const n = 5;
+            const colors = colorMap.colors;
+            const step = (colors.length - 1) / (n - 1);
+            const gradient = Array.from({ length: n }, (_, i) => colors[Math.round(i * step)]);
+            return mapping.scale.params.reverse ? [...gradient].reverse() : gradient;
+        }
+    }
+    return undefined;
+}
+// ---------------------------------------------------------------------------
+// Non-KDE → VectorImageLayer
+// ---------------------------------------------------------------------------
+function compileVectorLayer(grammarLayer, source, opacity, visible, featureValues) {
+    const singleLayerState = {
+        layers: [grammarLayer],
+    };
+    const flatStyle = grammarToOLStyle(singleLayerState, featureValues);
+    // If no rules produced output (e.g. empty rules list or all expressions dropped),
+    // fall back to the default style so the layer is visible rather than invisible.
+    const style = Object.keys(flatStyle).length === 0 ? DEFAULT_FLAT_STYLE : flatStyle;
+    const rule = { style };
+    return new VectorImageLayer({ opacity, visible, source, style: [rule] });
+}

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

@@ -0,0 +1,32 @@
+/**
+ * Grammar → OL FlatStyle compiler.
+ *
+ * grammarToOLStyle(state) compiles an IGrammarSymbologyState into an OL
+ * FlatStyle object ready to be applied to a VectorLayer or VectorTileLayer.
+ *
+ * Compilation steps:
+ *   1. Expand rules into per-channel entries (guard + expression).
+ *   2. Build a case expression per channel (conditional entries first,
+ *      last unconditional entry as the else branch).
+ *   3. Assemble sub-channels (fill-red/green/blue/alpha) into a composite
+ *      fill-color ['array', r, g, b, a] expression.
+ */
+import { IGrammarSymbologyState } from '@jupytergis/schema';
+import { ExpressionValue } from 'ol/expr/expression';
+export declare const DENSITY_FIELD = "$density";
+/**
+ * Compile a Grammar symbology state to an OL FlatStyle object.
+ * Sub-channels (fill-red/green/blue/alpha) are assembled into fill-color.
+ *
+ * @param featureValues  Feature attribute values for the rule field(s).
+ *   Required for categorical and colorRamp scales so the compiler can
+ *   enumerate unique values / compute classification breaks at render time,
+ *   mirroring how buildVectorFlatStyle works.
+ */
+export declare function grammarToOLStyle(state: IGrammarSymbologyState, featureValues?: unknown[]): Record<string, ExpressionValue>;
+/**
+ * Extract the encoding field column from feature property rows.
+ * colorRamp and categorical scales take a single input field; this returns
+ * all values for that field so the compiler can compute classification breaks.
+ */
+export declare function extractEncodingFieldValues(state: IGrammarSymbologyState, rows: Record<string, unknown>[]): unknown[];