@jupytergis/base 0.15.0 → 0.16.0-alpha.0

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

@@ -0,0 +1,11 @@
+/**
+ * Grammar symbology panel.
+ *
+ * Shows encoding rules grouped by layer. Each layer has optional render-side
+ * transforms (KDE, cluster) followed by (field → scale → channels) mapping rows.
+ * Multiple layers allow independent rendering pipelines on the same source.
+ */
+import React from 'react';
+import { ISymbologyDialogProps } from "./symbologyDialog";
+declare const Grammar: React.FC<ISymbologyDialogProps>;
+export default Grammar;

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

@@ -0,0 +1,235 @@
+/**
+ * Grammar symbology panel.
+ *
+ * Shows encoding rules grouped by layer. Each layer has optional render-side
+ * transforms (KDE, cluster) followed by (field → scale → channels) mapping rows.
+ * Multiple layers allow independent rendering pipelines on the same source.
+ */
+import { faPlus, faTrash, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { UUID } from '@lumino/coreutils';
+import React, { useCallback, useEffect, useState } from 'react';
+import MappingRow, { WhenAddForm, formatPredicate, } from "./components/MappingRow";
+import { NumericInput } from "./components/NumericInput";
+import { useEffectiveSymbologyParams } from "./hooks/useEffectiveSymbologyParams";
+import useGetBandInfo from "./hooks/useGetBandInfo";
+import { useGetProperties } from "./hooks/useGetProperties";
+import { useOkSignal } from "./hooks/useOkSignal";
+import { saveSymbology, } from "./symbologyUtils";
+import { Button } from "../../../shared/components/Button";
+import { NativeSelect, NativeSelectOption, } from "../../../shared/components/NativeSelect";
+const DEFAULT_CHANNELS = ['fill-color', 'circle-fill-color'];
+const DEFAULT_RGBA = [128, 128, 128, 1];
+// ---------------------------------------------------------------------------
+// Canonical → Grammar conversion
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+// Transform row
+// ---------------------------------------------------------------------------
+const TRANSFORM_TYPES = [
+    { value: 'kde', label: 'KDE (heatmap)' },
+    { value: 'cluster', label: 'cluster' },
+];
+function defaultTransform(type) {
+    switch (type) {
+        case 'kde':
+            return { type: 'kde', radius: 10, blur: 15 };
+        case 'cluster':
+            return { type: 'cluster', radius: 40 };
+    }
+}
+const TransformRow = ({ transform, availableFields, onChange, onDelete, }) => {
+    var _a;
+    const handleTypeChange = (type) => {
+        onChange(defaultTransform(type));
+    };
+    return (React.createElement("div", { className: "jp-gis-grammar-transform-row" },
+        React.createElement(NativeSelect, { value: transform.type, onChange: e => handleTypeChange(e.target.value) }, TRANSFORM_TYPES.map(({ value, label }) => (React.createElement(NativeSelectOption, { key: value, value: value }, label)))),
+        transform.type === 'kde' && (React.createElement(React.Fragment, null,
+            React.createElement("label", null, "radius"),
+            React.createElement(NumericInput, { style: { width: 52 }, value: transform.radius, onChange: v => onChange(Object.assign(Object.assign({}, transform), { radius: v })) }),
+            React.createElement("label", null, "blur"),
+            React.createElement(NumericInput, { style: { width: 52 }, value: transform.blur, onChange: v => onChange(Object.assign(Object.assign({}, transform), { blur: v })) }),
+            React.createElement("label", null, "weight"),
+            React.createElement(NativeSelect, { value: (_a = transform.weightField) !== null && _a !== void 0 ? _a : '', onChange: e => onChange(Object.assign(Object.assign({}, transform), { weightField: e.target.value || undefined })) },
+                React.createElement(NativeSelectOption, { value: "" }, "(none)"),
+                availableFields.map(field => (React.createElement(NativeSelectOption, { key: field, value: field }, field)))))),
+        transform.type === 'cluster' && (React.createElement(React.Fragment, null,
+            React.createElement("label", null, "radius"),
+            React.createElement(NumericInput, { style: { width: 52 }, value: transform.radius, onChange: v => onChange(Object.assign(Object.assign({}, transform), { radius: v })) }))),
+        React.createElement(Button, { type: "button", className: "jp-gis-grammar-delete-btn", onClick: onDelete, title: "Remove transform", style: { marginLeft: 'auto' } },
+            React.createElement(FontAwesomeIcon, { icon: faTrash }))));
+};
+const LayerSection = ({ layer, layerIndex, totalLayers, availableFields, featureValues, isRasterLayer = false, onChange, onDelete, }) => {
+    var _a, _b, _c, _d;
+    const [addingLayerWhen, setAddingLayerWhen] = useState(false);
+    const addLayerPredicate = useCallback((pred) => {
+        var _a;
+        onChange(Object.assign(Object.assign({}, layer), { when: [...((_a = layer.when) !== null && _a !== void 0 ? _a : []), pred] }));
+        setAddingLayerWhen(false);
+    }, [layer, onChange]);
+    const removeLayerPredicate = useCallback((index) => {
+        var _a;
+        const next = ((_a = layer.when) !== null && _a !== void 0 ? _a : []).filter((_, i) => i !== index);
+        onChange(Object.assign(Object.assign({}, layer), { when: next.length > 0 ? next : undefined }));
+    }, [layer, onChange]);
+    const updateTransform = useCallback((index, t) => {
+        const next = [...layer.transforms];
+        next[index] = t;
+        onChange(Object.assign(Object.assign({}, layer), { transforms: next }));
+    }, [layer, onChange]);
+    const removeTransform = useCallback((index) => {
+        onChange(Object.assign(Object.assign({}, layer), { transforms: layer.transforms.filter((_, i) => i !== index) }));
+    }, [layer, onChange]);
+    const addTransform = useCallback(() => {
+        onChange(Object.assign(Object.assign({}, layer), { transforms: [...layer.transforms, defaultTransform('kde')] }));
+    }, [layer, onChange]);
+    const updateRow = useCallback((index, row) => {
+        const next = [...layer.rows];
+        next[index] = row;
+        onChange(Object.assign(Object.assign({}, layer), { rows: next }));
+    }, [layer, onChange]);
+    const removeRow = useCallback((index) => {
+        onChange(Object.assign(Object.assign({}, layer), { rows: layer.rows.filter((_, i) => i !== index) }));
+    }, [layer, onChange]);
+    const hasKDE = layer.transforms.some(t => t.type === 'kde');
+    const isRaster = isRasterLayer || hasKDE;
+    const addRow = useCallback(() => {
+        const defaultChannels = isRaster
+            ? ['pixel-color']
+            : DEFAULT_CHANNELS;
+        onChange(Object.assign(Object.assign({}, layer), { rows: [
+                ...layer.rows,
+                {
+                    id: UUID.uuid4(),
+                    scale: { scheme: 'constant_rgba', params: { value: DEFAULT_RGBA } },
+                    channels: [...defaultChannels],
+                },
+            ] }));
+    }, [layer, onChange, isRaster]);
+    // KDE layers expose '$density'; raster layers expose $band-N fields.
+    // Both cases suppress the raw feature attribute list.
+    const encodingFields = hasKDE ? ['$density'] : availableFields;
+    return (React.createElement("div", { className: "jp-gis-grammar-layer-section" },
+        React.createElement("div", { className: "jp-gis-grammar-layer-header" },
+            React.createElement("span", { className: "jp-gis-grammar-layer-label" },
+                "Layer ",
+                layerIndex + 1),
+            React.createElement(Button, { type: "button", variant: "outline", onClick: addTransform, title: "Add transform" },
+                React.createElement(FontAwesomeIcon, { "data-icon": "inline-start", icon: faPlus }),
+                "Transform"),
+            totalLayers > 1 && (React.createElement(Button, { type: "button", variant: "outline", style: { height: 32, width: 32 }, onClick: onDelete, title: "Remove layer" },
+                React.createElement(FontAwesomeIcon, { icon: faTrash })))),
+        React.createElement("div", { className: "jp-gis-grammar-when-row" },
+            React.createElement("span", { className: "jp-gis-grammar-when-label" }, "when"),
+            ((_b = (_a = layer.when) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 1 && (React.createElement(Button, { type: "button", className: "jp-gis-grammar-when-op", onClick: () => {
+                    var _a;
+                    return onChange(Object.assign(Object.assign({}, layer), { whenOp: ((_a = layer.whenOp) !== null && _a !== void 0 ? _a : 'all') === 'all' ? 'any' : 'all' }));
+                } }, (_c = layer.whenOp) !== null && _c !== void 0 ? _c : 'all')), (_d = layer.when) === null || _d === void 0 ? void 0 :
+            _d.map((pred, i) => (React.createElement("span", { key: i, className: "jp-gis-grammar-when-chip" },
+                formatPredicate(pred),
+                React.createElement(Button, { type: "button", onClick: () => removeLayerPredicate(i), title: "Remove condition" },
+                    React.createElement(FontAwesomeIcon, { icon: faXmark }))))),
+            addingLayerWhen ? (React.createElement(WhenAddForm, { availableFields: availableFields, onAdd: addLayerPredicate, onCancel: () => setAddingLayerWhen(false) })) : (React.createElement(Button, { type: "button", className: "jp-gis-grammar-when-add-btn", onClick: () => setAddingLayerWhen(true) },
+                React.createElement(FontAwesomeIcon, { icon: faPlus })))),
+        layer.transforms.map((t, i) => (React.createElement(TransformRow, { key: i, transform: t, availableFields: availableFields, onChange: updated => updateTransform(i, updated), onDelete: () => removeTransform(i) }))),
+        layer.rows.map((row, i) => (React.createElement(MappingRow, { key: row.id, row: row, availableFields: encodingFields, featureValues: featureValues, isRaster: isRaster, onChange: updated => updateRow(i, updated), onDelete: () => removeRow(i) }))),
+        React.createElement("div", { className: "jp-gis-symbology-button-container" },
+            React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", style: { margin: '0 0 0.5rem 1rem' }, onClick: addRow }, "Add Mapping"))));
+};
+// ---------------------------------------------------------------------------
+// Grammar panel
+// ---------------------------------------------------------------------------
+const Grammar = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segmentId, }) => {
+    const layer = layerId !== undefined ? model.getLayer(layerId) : null;
+    const isRasterLayer = (layer === null || layer === void 0 ? void 0 : layer.type) === 'GeoTiffLayer';
+    const { featureProperties: selectableAttributesAndValues } = useGetProperties({ layerId, model });
+    // For raster layers, expose $band-N pseudo-fields derived from band metadata.
+    const { bandRows } = useGetBandInfo(model, layer);
+    const params = useEffectiveSymbologyParams({
+        model,
+        layerId,
+        layer,
+        isStorySegmentOverride,
+        segmentId,
+    });
+    const [layers, setLayers] = useState([
+        { id: UUID.uuid4(), transforms: [], rows: [] },
+    ]);
+    useEffect(() => {
+        if (!(params === null || params === void 0 ? void 0 : params.symbologyState)) {
+            return;
+        }
+        const rawState = params.symbologyState;
+        if (!Array.isArray(rawState.layers) ||
+            !rawState.layers.length) {
+            setLayers([{ id: UUID.uuid4(), transforms: [], rows: [] }]);
+            return;
+        }
+        const state = rawState;
+        setLayers(state.layers.map(grammarLayer => {
+            var _a, _b;
+            return (Object.assign(Object.assign(Object.assign({ id: grammarLayer.id, transforms: (_a = grammarLayer.preprocess) !== null && _a !== void 0 ? _a : [] }, (((_b = grammarLayer.when) === null || _b === void 0 ? void 0 : _b.length) ? { when: grammarLayer.when } : {})), (grammarLayer.whenOp ? { whenOp: grammarLayer.whenOp } : {})), { rows: grammarLayer.rules.flatMap(rule => rule.mappings.map((mapping, mi) => {
+                    var _a;
+                    return (Object.assign(Object.assign({ 
+                        // Preserve the rule's stable id so React keys and story-segment
+                        // override merging stay consistent across dialog opens.
+                        // When a rule has multiple mappings, suffix with the mapping index.
+                        id: rule.mappings.length === 1 ? rule.id : `${rule.id}-${mi}`, fields: ((_a = rule.fields) === null || _a === void 0 ? void 0 : _a.length) ? rule.fields : undefined, scale: mapping.scale, channels: [...mapping.channels] }, (rule.when ? { when: rule.when } : {})), (rule.whenOp ? { whenOp: rule.whenOp } : {})));
+                })) }));
+        }));
+    }, [params]);
+    const handleOk = () => {
+        if (!layerId || !(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+            return;
+        }
+        const grammarLayers = layers.map(uiLayer => {
+            var _a;
+            const rules = uiLayer.rows
+                .filter(row => row.channels.length > 0)
+                .map(row => {
+                var _a, _b;
+                return (Object.assign(Object.assign(Object.assign(Object.assign({ id: row.id }, (((_a = row.fields) === null || _a === void 0 ? void 0 : _a.length) ? { fields: row.fields } : {})), (((_b = row.when) === null || _b === void 0 ? void 0 : _b.length) ? { when: row.when } : {})), (row.whenOp ? { whenOp: row.whenOp } : {})), { mappings: [
+                        {
+                            scale: row.scale,
+                            channels: row.channels,
+                        },
+                    ] }));
+            });
+            return Object.assign(Object.assign(Object.assign(Object.assign({ id: uiLayer.id }, (uiLayer.transforms.length
+                ? { preprocess: uiLayer.transforms }
+                : {})), (((_a = uiLayer.when) === null || _a === void 0 ? void 0 : _a.length) ? { when: uiLayer.when } : {})), (uiLayer.whenOp ? { whenOp: uiLayer.whenOp } : {})), { rules });
+        });
+        const symbologyState = {
+            layers: grammarLayers,
+        };
+        saveSymbology({
+            model,
+            layerId,
+            isStorySegmentOverride,
+            segmentId,
+            payload: { symbologyState },
+            mutateLayerBeforeSave: targetLayer => {
+                var _a;
+                if (((_a = targetLayer.parameters) === null || _a === void 0 ? void 0 : _a.color) !== undefined) {
+                    delete targetLayer.parameters.color;
+                }
+            },
+        });
+    };
+    useOkSignal(okSignalPromise, handleOk);
+    const addLayer = () => {
+        setLayers(prev => [
+            ...prev,
+            { id: UUID.uuid4(), transforms: [], rows: [] },
+        ]);
+    };
+    const availableFields = isRasterLayer
+        ? bandRows.map(b => `$band-${b.band}`)
+        : Object.keys(selectableAttributesAndValues);
+    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        layers.map((uiLayer, i) => (React.createElement(LayerSection, { key: uiLayer.id, layer: uiLayer, layerIndex: i, totalLayers: layers.length, availableFields: availableFields, featureValues: selectableAttributesAndValues, isRasterLayer: isRasterLayer, onChange: updated => setLayers(prev => prev.map((l, j) => (j === i ? updated : l))), onDelete: () => setLayers(prev => prev.filter((_, j) => j !== i)) }))),
+        React.createElement("div", { className: "jp-gis-symbology-button-container" },
+            React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: addLayer }, "Add Layer"))));
+};
+export default Grammar;

package/lib/{dialogs/symbology/vector_layer/types → features/layers/symbology}/Heatmap.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ISymbologyDialogProps } from "../../symbologyDialog";
+import { ISymbologyDialogProps } from "./symbologyDialog";
 declare const Heatmap: React.FC<ISymbologyDialogProps>;
 export default Heatmap;

package/lib/{dialogs/symbology/vector_layer/types → features/layers/symbology}/Heatmap.js

@@ -1,10 +1,11 @@
 import colormap from 'colormap';
 import React, { useEffect, useState } from 'react';
-import ColorRampSelector from "../../components/color_ramp/ColorRampSelector";
-import { useOkSignal } from "../../hooks/useOkSignal";
-import { saveSymbology, } from "../../symbologyUtils";
-import { useLatest } from "../../../../shared/hooks/useLatest";
-import { useEffectiveSymbologyParams } from '../../hooks/useEffectiveSymbologyParams';
+import ColorRampSelector from "./components/color_ramp/ColorRampSelector";
+import { useOkSignal } from "./hooks/useOkSignal";
+import { saveSymbology, } from "./symbologyUtils";
+import { useLatest } from "../../../shared/hooks/useLatest";
+import { useColorMapList, COLOR_RAMP_DEFAULTS, } from './colorRampUtils';
+import { useEffectiveSymbologyParams } from './hooks/useEffectiveSymbologyParams';
 const Heatmap = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segmentId, }) => {
     if (!layerId) {
         return;
@@ -26,9 +27,20 @@ const Heatmap = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segm
         blur: 15,
     });
     const [reverseRamp, setReverseRamp] = useState(false);
+    const [colorMaps, setColorMaps] = useState([]);
     const selectedRampRef = useLatest(selectedRamp);
     const heatmapOptionsRef = useLatest(heatmapOptions);
     const reverseRampRef = useLatest(reverseRamp);
+    useColorMapList(setColorMaps);
+    // Filter: only continuous colormaps with class requirement <= 9 nshades
+    // because heatmap does not support nshades > 9
+    const continuousMaps = colorMaps.filter(m => {
+        if (m.type !== 'continuous') {
+            return false;
+        }
+        const minShades = COLOR_RAMP_DEFAULTS[m.name];
+        return !minShades || minShades <= 9;
+    });
     useEffect(() => {
         populateOptions();
     }, []);
@@ -38,8 +50,8 @@ const Heatmap = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segm
         if ((_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.colorRamp) {
             colorRamp = params.symbologyState.colorRamp;
         }
-        if (typeof ((_b = params.symbologyState) === null || _b === void 0 ? void 0 : _b.reverse) === 'boolean') {
-            setReverseRamp(params.symbologyState.reverse);
+        if (typeof ((_b = params.symbologyState) === null || _b === void 0 ? void 0 : _b.reverseRamp) === 'boolean') {
+            setReverseRamp(params.symbologyState.reverseRamp);
         }
         setSelectedRamp(colorRamp);
     };
@@ -52,10 +64,15 @@ const Heatmap = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segm
         if (reverseRampRef.current) {
             colorMap = [...colorMap].reverse();
         }
+        // The Heatmap dialog converts a vector layer to a heatmap layer via
+        // mutateLayerBeforeSave; the symbologyState it writes is structurally
+        // a heatmap state (renderType: 'Heatmap', with a gradient array) but
+        // needs to be accepted on VectorSymbologyParams here, hence the cast.
         const symbologyState = {
             renderType: 'Heatmap',
             colorRamp: selectedRampRef.current,
-            reverse: reverseRampRef.current,
+            reverseRamp: reverseRampRef.current,
+            gradient: colorMap,
         };
         saveSymbology({
             model,
@@ -64,12 +81,15 @@ const Heatmap = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segm
             segmentId,
             payload: {
                 symbologyState,
-                color: colorMap,
             },
             mutateLayerBeforeSave: targetLayer => {
+                var _a;
                 targetLayer.parameters.blur = heatmapOptionsRef.current.blur;
                 targetLayer.parameters.radius = heatmapOptionsRef.current.radius;
                 targetLayer.type = 'HeatmapLayer';
+                if (((_a = targetLayer.parameters) === null || _a === void 0 ? void 0 : _a.color) !== undefined) {
+                    delete targetLayer.parameters.color;
+                }
             },
         });
     };
@@ -78,7 +98,7 @@ const Heatmap = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segm
         React.createElement("p", null, "Represent features based on their density using a heatmap."),
         React.createElement("div", { className: "jp-gis-symbology-row jp-gis-heatmap" },
             React.createElement("label", { htmlFor: "color-ramp-select" }, "Color Ramp:"),
-            React.createElement(ColorRampSelector, { selectedRamp: selectedRamp, setSelected: setSelectedRamp, reverse: reverseRamp, setReverse: setReverseRamp })),
+            React.createElement(ColorRampSelector, { selectedRamp: selectedRamp, setSelected: setSelectedRamp, reverse: reverseRamp, setReverse: setReverseRamp, colorMaps: continuousMaps })),
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: 'vector-value-select' }, "Radius:"),
             React.createElement("input", { type: "number", value: heatmapOptions.radius, className: "jp-mod-styled", onChange: event => setHetamapOptions(prevState => (Object.assign(Object.assign({}, prevState), { radius: +event.target.value }))) })),

package/lib/{dialogs → features/layers}/symbology/classificationModes.d.ts

@@ -1,10 +1,10 @@
-import { InterpolationType } from './tiff_layer/types/SingleBandPseudoColor';
+export type InterpolationType = 'discrete' | 'linear' | 'exact';
 export declare namespace VectorClassifications {
-    const calculateQuantileBreaks: (values: number[], nClasses: number) => number[];
-    const calculateEqualIntervalBreaks: (values: number[], nClasses: number) => number[];
-    const calculateJenksBreaks: (values: number[], nClasses: number) => any[];
-    const calculatePrettyBreaks: (values: number[], nClasses: number) => number[];
-    const calculateLogarithmicBreaks: (values: number[], nClasses: number) => number[];
+    const calculateQuantileBreaks: (values: number[], nStops: number) => number[];
+    const calculateEqualIntervalBreaks: (values: number[], nStops: number) => number[];
+    const calculateJenksBreaks: (values: number[], nStops: number) => any[];
+    const calculatePrettyBreaks: (values: number[], nStops: number) => number[];
+    const calculateLogarithmicBreaks: (values: number[], nStops: number) => number[];
 }
 export declare namespace GeoTiffClassifications {
     const classifyQuantileBreaks: (nClasses: number, bandNumber: number, url: string, colorRampType: string) => Promise<number[]>;

package/lib/{dialogs → features/layers}/symbology/classificationModes.js

@@ -2,7 +2,8 @@
 import { Pool, fromUrl } from 'geotiff';
 export var VectorClassifications;
 (function (VectorClassifications) {
-    VectorClassifications.calculateQuantileBreaks = (values, nClasses) => {
+    VectorClassifications.calculateQuantileBreaks = (values, nStops) => {
+        // Returns nStops anchor points: vmin, (nStops-2) interior quantile boundaries, vmax.
         // q-th quantile of a data set:
         // value where q fraction of data is below and (1-q) fraction is above this value
         // Xq = (1 - r) * X_NI1 + r * X_NI2
@@ -11,54 +12,56 @@ export var VectorClassifications;
         //   r = q * (n+1) - (int) (q * (n+1))
         // (indices of X: 1...n)
         const sortedValues = [...values].sort((a, b) => a - b);
-        const breaks = [];
-        if (!sortedValues) {
+        if (sortedValues.length === 0) {
             return [];
         }
         const n = sortedValues.length;
-        let xq = n > 0 ? sortedValues[0] : 0;
-        for (let i = 1; i < nClasses; i++) {
+        const breaks = [sortedValues[0]]; // vmin
+        for (let i = 1; i < nStops - 1; i++) {
             if (n > 1) {
-                const q = i / nClasses;
+                const q = i / (nStops - 1);
                 const a = q * (n - 1);
                 const aa = Math.floor(a);
                 const r = a - aa;
-                xq = (1 - r) * sortedValues[aa] + r * sortedValues[aa + 1];
+                const xq = (1 - r) * sortedValues[aa] +
+                    r * sortedValues[Math.min(aa + 1, n - 1)];
+                breaks.push(xq);
             }
-            breaks.push(xq);
         }
-        breaks.push(sortedValues[n - 1]);
+        breaks.push(sortedValues[n - 1]); // vmax
         return breaks;
     };
-    VectorClassifications.calculateEqualIntervalBreaks = (values, nClasses) => {
+    VectorClassifications.calculateEqualIntervalBreaks = (values, nStops) => {
+        // Returns nStops evenly-spaced anchor points from vmin to vmax (linspace contract).
         const minimum = Math.min(...values);
         const maximum = Math.max(...values);
+        if (nStops <= 1) {
+            return [minimum];
+        }
         const breaks = [];
-        const step = (maximum - minimum) / nClasses;
-        let value = minimum;
-        for (let i = 0; i < nClasses; i++) {
-            value += step;
-            breaks.push(value);
+        const step = (maximum - minimum) / (nStops - 1);
+        for (let i = 0; i < nStops; i++) {
+            breaks.push(minimum + i * step);
         }
-        breaks[nClasses - 1] = maximum;
+        breaks[nStops - 1] = maximum; // pin to avoid floating-point drift
         return breaks;
     };
-    VectorClassifications.calculateJenksBreaks = (values, nClasses) => {
+    VectorClassifications.calculateJenksBreaks = (values, nStops) => {
         const maximum = Math.max(...values);
         if (values.length === 0) {
             return [];
         }
-        if (nClasses <= 1) {
+        if (nStops <= 1) {
             return [maximum];
         }
-        if (nClasses >= values.length) {
+        if (nStops >= values.length) {
             return values;
         }
         const sample = [...values].sort((a, b) => a - b);
         const n = sample.length;
-        const matrixOne = Array.from({ length: n + 1 }, () => Array(nClasses + 1).fill(0));
-        const matrixTwo = Array.from({ length: n + 1 }, () => Array(nClasses + 1).fill(Number.MAX_VALUE));
-        for (let i = 1; i <= nClasses; i++) {
+        const matrixOne = Array.from({ length: n + 1 }, () => Array(nStops + 1).fill(0));
+        const matrixTwo = Array.from({ length: n + 1 }, () => Array(nStops + 1).fill(Number.MAX_VALUE));
+        for (let i = 1; i <= nStops; i++) {
             matrixOne[0][i] = 1;
             matrixOne[1][i] = 1;
             matrixTwo[0][i] = 0.0;
@@ -80,7 +83,7 @@ export var VectorClassifications;
                 v = s2 - (s1 * s1) / w;
                 const i4 = i3 - 1;
                 if (i4 !== 0) {
-                    for (let j = 2; j <= nClasses; j++) {
+                    for (let j = 2; j <= nStops; j++) {
                         if (matrixTwo[l][j] >= v + matrixTwo[i4][j - 1]) {
                             matrixOne[l][j] = i4;
                             matrixTwo[l][j] = v + matrixTwo[i4][j - 1];
@@ -91,28 +94,33 @@ export var VectorClassifications;
             matrixOne[l][1] = 1;
             matrixTwo[l][1] = v;
         }
-        const breaks = Array(nClasses);
-        breaks[nClasses - 1] = sample[n - 1];
-        for (let j = nClasses, k = n; j >= 2; j--) {
-            const id = matrixOne[k][j] - 1;
-            breaks[j - 2] = sample[id];
-            k = matrixOne[k][j] - 1;
+        // Returns nStops anchor points: vmin, (nStops-2) natural-break upper bounds, vmax.
+        // Interior breaks use the upper bound of each class (last element before the next
+        // class starts) rather than the lower bound (first element of the next class).
+        const breaks = Array(nStops);
+        breaks[0] = sample[0]; // vmin
+        breaks[nStops - 1] = sample[n - 1]; // vmax
+        let k = n;
+        for (let j = nStops; j >= 3; j--) {
+            const id = matrixOne[k][j] - 1; // 0-based start index of class j
+            breaks[j - 2] = sample[id - 1]; // upper bound of class j-1
+            k = id;
         }
         return breaks;
     };
-    VectorClassifications.calculatePrettyBreaks = (values, nClasses) => {
+    VectorClassifications.calculatePrettyBreaks = (values, nStops) => {
         const minimum = Math.min(...values);
         const maximum = Math.max(...values);
         const breaks = [];
-        if (nClasses < 1) {
+        if (nStops < 1) {
             breaks.push(maximum);
             return breaks;
         }
-        const minimumCount = Math.floor(nClasses / 3);
+        const minimumCount = Math.floor(nStops / 3);
         const shrink = 0.75;
         const highBias = 1.5;
         const adjustBias = 0.5 + 1.5 * highBias;
-        const divisions = nClasses;
+        const divisions = nStops;
         const h = highBias;
         let cell;
         let small = false;
@@ -177,18 +185,14 @@ export var VectorClassifications;
         }
         const minimumBreak = start * unit;
         const count = end - start;
-        for (let i = 1; i < count + 1; i++) {
+        // Include the pretty lower bound (i=0) so all stops snap to round values,
+        // even when minimumBreak < vmin (that is the point of pretty breaks).
+        for (let i = 0; i < count + 1; i++) {
             breaks.push(minimumBreak + i * unit);
         }
         if (breaks.length === 0) {
             return breaks;
         }
-        if (breaks[0] < minimum) {
-            breaks[0] = minimum;
-        }
-        if (breaks[breaks.length - 1] > maximum) {
-            breaks[breaks.length - 1] = maximum;
-        }
         if (minimum < 0.0 && maximum > 0.0) {
             const breaksMinusZero = breaks.map(b => b - 0.0);
             let posOfMin = 0;
@@ -201,9 +205,9 @@ export var VectorClassifications;
         }
         return breaks;
     };
-    VectorClassifications.calculateLogarithmicBreaks = (values, nClasses) => {
+    VectorClassifications.calculateLogarithmicBreaks = (values, nStops) => {
         const positiveValues = values.filter(v => v > 0);
-        if (positiveValues.length === 0 || nClasses < 1) {
+        if (positiveValues.length === 0 || nStops < 1) {
             return [];
         }
         const minimum = Math.min(...positiveValues);
@@ -211,8 +215,8 @@ export var VectorClassifications;
         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);
+        for (let i = 0; i < nStops; i++) {
+            const t = nStops === 1 ? 0 : i / (nStops - 1);
             breaks.push(Math.pow(10, logMin + t * (logMax - logMin)));
         }
         return breaks;

package/lib/{dialogs → features/layers}/symbology/colorRampUtils.d.ts

@@ -49,6 +49,7 @@ export declare const getColorMapList: () => IColorMap[];
  * Hook that loads and sets color maps.
  */
 export declare const useColorMapList: (setColorMaps: (maps: IColorMap[]) => void) => void;
+export declare const getColorMap: (name: ColorRampName) => IColorMap | undefined;
 /**
  * Ensure we always get a valid hex string from either an RGB(A) array or string.
  */

package/lib/{dialogs → features/layers}/symbology/colorRampUtils.js

@@ -14,7 +14,7 @@ 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";
+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];
@@ -156,6 +156,17 @@ export const useColorMapList = (setColorMaps) => {
         setColorMaps(getColorMapList());
     }, [setColorMaps]);
 };
+/**
+ * Get a color map by name.
+ * Caches the full list on first call for efficiency, since generating color ramps is expensive.
+ */
+let colorMapCache = null;
+export const getColorMap = (name) => {
+    if (!colorMapCache) {
+        colorMapCache = getColorMapList();
+    }
+    return colorMapCache.find(c => c.name === name);
+};
 /**
  * Ensure we always get a valid hex string from either an RGB(A) array or string.
  */

package/lib/features/layers/symbology/components/MappingRow.d.ts

@@ -0,0 +1,40 @@
+/**
+ * A single grammar mapping row: field → scale → channels (fan-out tree).
+ * The scale preview spans all channel rows. Additional channels branch below.
+ * "when" predicates are shown as chips below the grid.
+ */
+import { IPredicate, IScale, StyleChannel } from '@jupytergis/schema';
+import React from 'react';
+export declare function formatPredicate(pred: IPredicate): string;
+interface IWhenAddFormProps {
+    availableFields: string[];
+    onAdd: (pred: IPredicate) => void;
+    onCancel: () => void;
+}
+export declare const WhenAddForm: React.FC<IWhenAddFormProps>;
+export interface IGrammarRow {
+    id: string;
+    /** Selected input field(s). Length is governed by fieldCountForScale(scale). */
+    fields?: string[];
+    scale: IScale;
+    channels: StyleChannel[];
+    when?: IPredicate[];
+    whenOp?: 'all' | 'any';
+}
+/**
+ * How many input fields a scale accepts.
+ *   0    — constants (no field selector shown)
+ *   1    — all single-field scales
+ *  'any' — multi-field (expression scale, sub-channel assembly)
+ */
+export declare function fieldCountForScale(scheme: IScale['scheme']): 0 | 1 | 'any';
+interface IMappingRowProps {
+    row: IGrammarRow;
+    availableFields: string[];
+    featureValues: Record<string, Set<any>>;
+    isRaster?: boolean;
+    onChange: (row: IGrammarRow) => void;
+    onDelete: () => void;
+}
+declare const MappingRow: React.FC<IMappingRowProps>;
+export default MappingRow;