@jupytergis/base 0.15.0 → 0.16.0-alpha.1

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

@@ -0,0 +1,316 @@
+/**
+ * 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 { faArrowDown, faArrowUp, faGripVertical, faPlus, faTrash, faXmark, } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { UUID } from '@lumino/coreutils';
+import React, { useCallback, useEffect, useRef, 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", variant: "ghost", onClick: onDelete, title: "Remove transform", style: { marginLeft: 'auto' } },
+            React.createElement(FontAwesomeIcon, { icon: faTrash }))));
+};
+const LayerSection = ({ layer, layerIndex, totalLayers, availableFields, featureValues, isRasterLayer = false, onChange, onDelete, onMoveUp, onMoveDown, }) => {
+    var _a, _b, _c, _d;
+    const [addingLayerWhen, setAddingLayerWhen] = useState(false);
+    const dragIndexRef = useRef(null);
+    const dragOverRef = useRef(null);
+    const [dragOverIndex, setDragOverIndex] = useState(null);
+    const moveRow = useCallback((fromIndex, toIndex) => {
+        if (fromIndex === toIndex) {
+            return;
+        }
+        const next = [...layer.rows];
+        const [moved] = next.splice(fromIndex, 1);
+        next.splice(toIndex, 0, moved);
+        onChange(Object.assign(Object.assign({}, layer), { rows: next }));
+    }, [layer, onChange]);
+    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 addTransform = useCallback(() => {
+        if (layer.transforms.length > 0) {
+            return;
+        }
+        onChange(Object.assign(Object.assign({}, layer), { transforms: [defaultTransform('kde')] }));
+    }, [layer, onChange]);
+    const updateTransform = useCallback((t) => {
+        onChange(Object.assign(Object.assign({}, layer), { transforms: [t] }));
+    }, [layer, onChange]);
+    const removeTransform = useCallback(() => {
+        onChange(Object.assign(Object.assign({}, layer), { transforms: [] }));
+    }, [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),
+            layer.transforms.length === 0 && (React.createElement(Button, { type: "button", variant: "ghost", onClick: addTransform, title: "Add transform" },
+                React.createElement(FontAwesomeIcon, { "data-icon": "inline-start", icon: faPlus }),
+                "Transform")),
+            totalLayers > 1 && onMoveUp && (React.createElement(Button, { type: "button", variant: "ghost", style: { height: 32, width: 32 }, onClick: onMoveUp, title: "Move layer up" },
+                React.createElement(FontAwesomeIcon, { icon: faArrowUp }))),
+            totalLayers > 1 && onMoveDown && (React.createElement(Button, { type: "button", variant: "ghost", style: { height: 32, width: 32 }, onClick: onMoveDown, title: "Move layer down" },
+                React.createElement(FontAwesomeIcon, { icon: faArrowDown }))),
+            totalLayers > 1 && (React.createElement(Button, { type: "button", variant: "ghost", 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[0] && (React.createElement(TransformRow, { transform: layer.transforms[0], availableFields: availableFields, onChange: updateTransform, onDelete: removeTransform })),
+        React.createElement("div", { className: "jp-gis-grammar-rules-container", onDragOver: e => {
+                e.preventDefault();
+                // Find which wrapper the cursor is closest to
+                const wrappers = Array.from(e.currentTarget.querySelectorAll(':scope > .jp-gis-grammar-drag-wrapper'));
+                let idx = layer.rows.length;
+                for (let j = 0; j < wrappers.length; j++) {
+                    const rect = wrappers[j].getBoundingClientRect();
+                    const midY = rect.top + rect.height / 2;
+                    if (e.clientY < midY) {
+                        idx = j;
+                        break;
+                    }
+                }
+                dragOverRef.current = idx;
+                setDragOverIndex(idx);
+            }, onDrop: () => {
+                const over = dragOverRef.current;
+                if (dragIndexRef.current !== null && over !== null) {
+                    const to = over > dragIndexRef.current ? over - 1 : over;
+                    moveRow(dragIndexRef.current, to);
+                }
+                dragIndexRef.current = null;
+                dragOverRef.current = null;
+                setDragOverIndex(null);
+            }, onDragEnd: () => {
+                dragIndexRef.current = null;
+                dragOverRef.current = null;
+                setDragOverIndex(null);
+            } }, layer.rows.map((row, i) => (React.createElement("div", { key: row.id, className: "jp-gis-grammar-drag-wrapper", style: {
+                borderTop: dragOverIndex === i && dragIndexRef.current !== i
+                    ? '2px solid var(--jp-brand-color1)'
+                    : '2px solid transparent',
+                borderBottom: dragOverIndex === layer.rows.length &&
+                    i === layer.rows.length - 1 &&
+                    dragIndexRef.current !== i
+                    ? '2px solid var(--jp-brand-color1)'
+                    : '2px solid transparent',
+            } },
+            layer.rows.length > 1 && (React.createElement("div", { className: "jp-gis-grammar-reorder-bar" },
+                React.createElement(Button, { type: "button", disabled: i === 0, onClick: () => moveRow(i, i - 1), title: "Move up" },
+                    React.createElement(FontAwesomeIcon, { icon: faArrowUp })),
+                React.createElement("div", { className: "jp-gis-grammar-drag-handle", draggable: true, onDragStart: e => {
+                        dragIndexRef.current = i;
+                        const wrapper = e.currentTarget.closest('.jp-gis-grammar-drag-wrapper');
+                        if (wrapper) {
+                            e.dataTransfer.setDragImage(wrapper, 0, 0);
+                        }
+                    }, title: "Drag to reorder" },
+                    React.createElement(FontAwesomeIcon, { icon: faGripVertical })),
+                React.createElement(Button, { type: "button", disabled: i === layer.rows.length - 1, onClick: () => moveRow(i, i + 1), title: "Move down" },
+                    React.createElement(FontAwesomeIcon, { icon: faArrowDown })))),
+            React.createElement(MappingRow, { 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, { variant: "ghost", style: { margin: '0 0 0.5rem 1rem' }, onClick: addRow },
+                React.createElement(FontAwesomeIcon, { icon: faPlus }),
+                "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 moveLayer = useCallback((from, to) => {
+        if (from === to) {
+            return;
+        }
+        setLayers(prev => {
+            const next = [...prev];
+            const [moved] = next.splice(from, 1);
+            next.splice(to, 0, moved);
+            return next;
+        });
+    }, [setLayers]);
+    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)), onMoveUp: i > 0 ? () => moveLayer(i, i - 1) : undefined, onMoveDown: i < layers.length - 1 ? () => moveLayer(i, i + 1) : undefined }))),
+        React.createElement("div", { className: "jp-gis-symbology-button-container" },
+            React.createElement(Button, { className: "jp-gis-grammar-action-btn", onClick: addLayer }, "Add Layer"))));
+};
+export default Grammar;

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;