@jupytergis/base 0.16.0-alpha.0 → 0.16.0-alpha.1

package/lib/commands/index.js

@@ -230,10 +230,9 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             if (!layerType) {
                 return false;
             }
-            // Selection should only be one vector or heatmap layer
             return (Object.keys(selectedLayers).length === 1 &&
                 !model.getSource(layerId) &&
-                ['VectorLayer', 'HeatmapLayer'].includes(layerType));
+                layerType === 'VectorLayer');
         }, execute: (args) => {
             const filePath = args === null || args === void 0 ? void 0 : args.filePath;
             const current = filePath

package/lib/constants.js

@@ -17,9 +17,13 @@ const iconObject = {
     RasterLayer: { icon: rasterIcon },
     OpenEOTileLayer: { icon: rasterIcon },
     VectorLayer: { iconClass: 'fa fa-vector-square' },
+    VectorTileLayer: { iconClass: 'fa fa-vector-square' },
     HillshadeLayer: { icon: moundIcon },
+    GeoTiffLayer: { iconClass: 'fa fa-image' },
+    StacLayer: { icon: rasterIcon },
     ImageLayer: { iconClass: 'fa fa-image' },
     VideoLayer: { iconClass: 'fa fa-video' },
+    StorySegmentLayer: { iconClass: 'fa fa-link' },
     [CommandIDs.redo]: { icon: redoIcon },
     [CommandIDs.undo]: { icon: undoIcon },
     [CommandIDs.openLayerBrowser]: { icon: bookOpenIcon },

package/lib/features/layers/forms/layer/index.d.ts

@@ -1,4 +1,3 @@
-export * from './heatmapLayerForm';
 export * from './hillshadeLayerForm';
 export * from './layerform';
 export * from './vectorlayerform';

package/lib/features/layers/forms/layer/index.js

@@ -1,4 +1,3 @@
-export * from './heatmapLayerForm';
 export * from './hillshadeLayerForm';
 export * from './layerform';
 export * from './vectorlayerform';

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

@@ -5,10 +5,10 @@
  * 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 { 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, useState } from 'react';
+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";
@@ -57,12 +57,24 @@ const TransformRow = ({ transform, availableFields, onChange, onDelete, }) => {
         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(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, }) => {
+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] }));
@@ -73,16 +85,17 @@ const LayerSection = ({ layer, layerIndex, totalLayers, availableFields, feature
         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 }));
+    const addTransform = useCallback(() => {
+        if (layer.transforms.length > 0) {
+            return;
+        }
+        onChange(Object.assign(Object.assign({}, layer), { transforms: [defaultTransform('kde')] }));
     }, [layer, onChange]);
-    const removeTransform = useCallback((index) => {
-        onChange(Object.assign(Object.assign({}, layer), { transforms: layer.transforms.filter((_, i) => i !== index) }));
+    const updateTransform = useCallback((t) => {
+        onChange(Object.assign(Object.assign({}, layer), { transforms: [t] }));
     }, [layer, onChange]);
-    const addTransform = useCallback(() => {
-        onChange(Object.assign(Object.assign({}, layer), { transforms: [...layer.transforms, defaultTransform('kde')] }));
+    const removeTransform = useCallback(() => {
+        onChange(Object.assign(Object.assign({}, layer), { transforms: [] }));
     }, [layer, onChange]);
     const updateRow = useCallback((index, row) => {
         const next = [...layer.rows];
@@ -115,10 +128,14 @@ const LayerSection = ({ layer, layerIndex, totalLayers, availableFields, feature
             React.createElement("span", { className: "jp-gis-grammar-layer-label" },
                 "Layer ",
                 layerIndex + 1),
-            React.createElement(Button, { type: "button", variant: "outline", onClick: addTransform, title: "Add transform" },
+            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 && (React.createElement(Button, { type: "button", variant: "outline", style: { height: 32, width: 32 }, onClick: onDelete, title: "Remove layer" },
+                "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"),
@@ -132,10 +149,63 @@ const LayerSection = ({ layer, layerIndex, totalLayers, availableFields, feature
                     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) }))),
+        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, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", style: { margin: '0 0 0.5rem 1rem' }, onClick: addRow }, "Add Mapping"))));
+            React.createElement(Button, { variant: "ghost", style: { margin: '0 0 0.5rem 1rem' }, onClick: addRow },
+                React.createElement(FontAwesomeIcon, { icon: faPlus }),
+                "Add Mapping"))));
 };
 // ---------------------------------------------------------------------------
 // Grammar panel
@@ -224,12 +294,23 @@ const Grammar = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segm
             { 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)) }))),
+        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-Dialog-button jp-mod-accept jp-mod-styled", onClick: addLayer }, "Add Layer"))));
+            React.createElement(Button, { className: "jp-gis-grammar-action-btn", onClick: addLayer }, "Add Layer"))));
 };
 export default Grammar;

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

@@ -96,7 +96,7 @@ function defaultScaleForScheme(scheme, _currentChannels) {
             return {
                 scheme: 'categorical',
                 params: {
-                    colorRamp: 'viridis',
+                    colorRamp: 'schemeCategory10',
                     reverse: false,
                     fallback: [0, 0, 0, 0],
                 },
@@ -455,36 +455,40 @@ const MappingRow = ({ row, availableFields, featureValues, isRaster = false, onC
     }, [row, onChange]);
     const compat = compatibleChannels(row.scale, isRaster);
     const availableToAdd = compat.filter(ch => !row.channels.includes(ch));
-    const previewRowSpan = row.channels.length + (availableToAdd.length > 0 ? 1 : 0);
     return (React.createElement("div", { className: "jp-gis-grammar-rule" },
         React.createElement("div", { className: "jp-gis-grammar-rule-grid" },
-            React.createElement(FieldSelector, { fieldCount: fieldCountForScale(row.scale.scheme), fields: (_a = row.fields) !== null && _a !== void 0 ? _a : [], availableFields: availableFields, onFieldChange: handleFieldChange, onAddField: addField }),
-            React.createElement("div", { style: { gridRow: 1, gridColumn: 2 } },
-                React.createElement(NativeSelect, { value: row.scale.scheme, onChange: e => handleSchemeChange(e.target.value) }, SCHEME_OPTIONS.filter(({ disabled }) => !disabled).map(({ value, label }) => (React.createElement(NativeSelectOption, { key: value, value: value }, label))))),
-            React.createElement("button", { type: "button", className: "jp-gis-grammar-preview-btn", style: { gridRow: `1 / span ${previewRowSpan}`, gridColumn: 3 }, onClick: () => setExpanded(v => !v), title: expanded ? 'Collapse editor' : 'Edit scale' },
-                React.createElement(ScalePreview, { scale: row.scale })),
-            row.channels.map((ch, i) => (React.createElement(React.Fragment, { key: `${ch}-${i}` },
-                React.createElement("span", { className: "jp-gis-grammar-arrow", style: { gridRow: i + 1, gridColumn: 4 } }, "\u2192"),
-                React.createElement("div", { className: "jp-gis-grammar-channel-select", style: { gridRow: i + 1, gridColumn: 5 } },
-                    React.createElement(NativeSelect, { value: ch, onChange: e => handleChannelChange(i, e.target.value) }, compat.map(c => {
-                        var _a;
-                        return (React.createElement(NativeSelectOption, { key: c, value: c }, (_a = CHANNEL_LABELS[c]) !== null && _a !== void 0 ? _a : c));
-                    }))),
-                React.createElement(Button, { type: "button", variant: "outline", size: "icon-md", className: "jp-mod-styled", style: { gridRow: i + 1, gridColumn: 6 }, onClick: () => removeChannel(ch), title: row.channels.length === 1 ? 'Remove mapping' : 'Remove channel' },
-                    React.createElement(FontAwesomeIcon, { icon: faTrash }))))),
-            availableToAdd.length > 0 && (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: "jp-gis-grammar-arrow", style: { gridRow: row.channels.length + 1, gridColumn: 4 } }, "+"),
-                React.createElement("div", { className: "jp-gis-grammar-channel-select", style: { gridRow: row.channels.length + 1, gridColumn: 5 } },
-                    React.createElement(NativeSelect, { value: "", onChange: e => {
-                            if (e.target.value) {
-                                addChannel(e.target.value);
-                            }
-                        } },
-                        React.createElement(NativeSelectOption, { value: "" }, "(add channel)"),
-                        availableToAdd.map(ch => {
+            React.createElement("div", { className: "jp-gis-grammar-section jp-gis-grammar-input-section" },
+                React.createElement(FieldSelector, { fieldCount: fieldCountForScale(row.scale.scheme), fields: (_a = row.fields) !== null && _a !== void 0 ? _a : [], availableFields: availableFields, onFieldChange: handleFieldChange, onAddField: addField })),
+            React.createElement("span", { className: "jp-gis-grammar-arrow jp-gis-grammar-arrow-input" }, "\u2192"),
+            React.createElement("div", { className: "jp-gis-grammar-section jp-gis-grammar-scale-section" },
+                React.createElement(NativeSelect, { value: row.scale.scheme, onChange: e => handleSchemeChange(e.target.value) }, SCHEME_OPTIONS.filter(({ disabled }) => !disabled).map(({ value, label }) => (React.createElement(NativeSelectOption, { key: value, value: value }, label)))),
+                React.createElement("button", { type: "button", className: "jp-gis-grammar-preview-btn", onClick: () => setExpanded(v => !v), title: expanded ? 'Collapse editor' : 'Edit scale' },
+                    React.createElement(ScalePreview, { scale: row.scale }),
+                    React.createElement("span", { className: "jp-gis-grammar-preview-chevron", "aria-hidden": "true" }, expanded ? '▾' : '▸'))),
+            React.createElement("span", { className: "jp-gis-grammar-arrow jp-gis-grammar-arrow-output" }, "\u2192"),
+            React.createElement("div", { className: "jp-gis-grammar-section jp-gis-grammar-output-section" },
+                row.channels.map((ch, i) => (React.createElement("div", { key: `${ch}-${i}`, className: "jp-gis-grammar-channel-row" },
+                    React.createElement("div", { className: "jp-gis-grammar-channel-select" },
+                        React.createElement(NativeSelect, { value: ch, onChange: e => handleChannelChange(i, e.target.value) }, compat.map(c => {
                             var _a;
-                            return (React.createElement(NativeSelectOption, { key: ch, value: ch }, (_a = CHANNEL_LABELS[ch]) !== null && _a !== void 0 ? _a : ch));
-                        })))))),
+                            return (React.createElement(NativeSelectOption, { key: c, value: c }, (_a = CHANNEL_LABELS[c]) !== null && _a !== void 0 ? _a : c));
+                        }))),
+                    React.createElement(Button, { type: "button", variant: "ghost", size: "icon-md", className: "jp-mod-styled", onClick: () => removeChannel(ch), title: row.channels.length === 1
+                            ? 'Remove mapping'
+                            : 'Remove channel' },
+                        React.createElement(FontAwesomeIcon, { icon: faTrash }))))),
+                availableToAdd.length > 0 && (React.createElement("div", { className: "jp-gis-grammar-channel-row" },
+                    React.createElement("div", { className: "jp-gis-grammar-channel-select" },
+                        React.createElement(NativeSelect, { value: "", onChange: e => {
+                                if (e.target.value) {
+                                    addChannel(e.target.value);
+                                }
+                            } },
+                            React.createElement(NativeSelectOption, { value: "" }, "(add channel)"),
+                            availableToAdd.map(ch => {
+                                var _a;
+                                return (React.createElement(NativeSelectOption, { key: ch, value: ch }, (_a = CHANNEL_LABELS[ch]) !== null && _a !== void 0 ? _a : ch));
+                            }))))))),
         React.createElement("div", { className: "jp-gis-grammar-when-row" },
             React.createElement("span", { className: "jp-gis-grammar-when-label" }, "when"),
             ((_c = (_b = row.when) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 1 && (React.createElement(Button, { type: "button", className: "jp-gis-grammar-when-op", onClick: () => {

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

@@ -112,7 +112,7 @@ export const ColorRampEditor = ({ scale, field, featureValues, onChange, }) => {
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", null, "Fallback"),
             React.createElement(RgbaColorPicker, { color: params.fallback, onChange: color => update({ fallback: color }) })),
-        React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", disabled: !field, onClick: classify }, "Classify"),
+        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, }) => {
@@ -163,7 +163,7 @@ export const CategoricalEditor = ({ scale, field, featureValues, onChange, }) =>
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", null, "Fallback"),
             React.createElement(RgbaColorPicker, { color: params.fallback, onChange: color => update({ fallback: color }) })),
-        React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", disabled: !field, onClick: classify }, "Classify"),
+        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, }) => {
@@ -216,6 +216,6 @@ export const ScalarEditor = ({ scale, field, featureValues, onChange, }) => {
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", null, "Fallback"),
             React.createElement(NumericInput, { className: "jp-mod-styled", value: params.fallback, onChange: v => update({ fallback: v }) })),
-        React.createElement("button", { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: classify }, "Set stops"),
+        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/features/layers/symbology/components/color_ramp/ColorRampControls.js

@@ -80,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/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/features/layers/symbology/components/color_stops/StopRow.js

@@ -4,6 +4,8 @@ import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef } from 'react';
 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/grammarToOLStyle.js

@@ -11,7 +11,7 @@
  *   3. Assemble sub-channels (fill-red/green/blue/alpha) into a composite
  *      fill-color ['array', r, g, b, a] expression.
  */
-import { computeCategorizedColorStops, computeGraduatedColorStops, } from './styleBuilder';
+import { computeCategorizedColorStops, computeGraduatedColorStops, STOP_NULL, STOP_UNDEFINED, } from './styleBuilder';
 // '$density' is the pseudo-field produced by a kde transform (KDE density raster).
 // Encoding rules referencing it are compiled only when a kde transform is present;
 // the actual OL HeatmapLayer instantiation happens outside this compiler.
@@ -433,7 +433,27 @@ function compileCategorical(field, scale, featureValues) {
     }
     const caseExpr = ['case'];
     for (const stop of stops) {
-        caseExpr.push(['==', fieldExpr(field), stop.value], stop.color);
+        let condition;
+        if (stop.value === STOP_UNDEFINED) {
+            // Property missing entirely
+            condition = ['!', ['has', field]];
+        }
+        else if (stop.value === STOP_NULL) {
+            // Property exists but value is null
+            condition = [
+                'all',
+                ['has', field],
+                ['==', ['coalesce', fieldExpr(field), '__jgis_ns__'], '__jgis_ns__'],
+            ];
+        }
+        else {
+            condition = [
+                '==',
+                fieldExpr(field),
+                stop.value,
+            ];
+        }
+        caseExpr.push(condition, stop.color);
     }
     caseExpr.push(scale.params.fallback);
     return caseExpr;

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

@@ -6,6 +6,9 @@ export type SymbologyState = NonNullable<IVectorLayer['symbologyState']>;
 export type GeometryType = 'fill' | 'circle' | 'line';
 /** Default OL flat style used when no Grammar rules produce output. */
 export declare const DEFAULT_FLAT_STYLE: FlatStyle;
+/** Sentinel stop values for missing data. */
+export declare const STOP_NULL = "__null__";
+export declare const STOP_UNDEFINED = "__undefined__";
 /** A computed stop: value → RGBA color. */
 export interface IComputedStop {
     value: number | string | boolean;

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

@@ -12,6 +12,9 @@ export const DEFAULT_FLAT_STYLE = {
     'circle-stroke-width': 1.25,
     'circle-stroke-color': '#3399CC',
 };
+/** Sentinel stop values for missing data. */
+export const STOP_NULL = '__null__';
+export const STOP_UNDEFINED = '__undefined__';
 // Stop computation helpers — used by the Grammar compiler
 /**
  * Compute color stops for Graduated symbology from the config + feature values.
@@ -80,8 +83,18 @@ export function computeCategorizedColorStops(state, featureValues) {
     const rampName = (_a = state.colorRamp) !== null && _a !== void 0 ? _a : 'viridis';
     const reverse = (_b = state.reverseRamp) !== null && _b !== void 0 ? _b : false;
     const uniqueValues = [
-        ...new Set(featureValues.filter(v => v !== undefined && v !== null)),
-    ].sort((a, b) => (a < b ? -1 : a > b ? 1 : 0));
+        ...new Set(featureValues.map(v => v === null ? STOP_NULL : v === undefined ? STOP_UNDEFINED : v)),
+    ].sort((a, b) => {
+        const aIsSentinel = a === STOP_NULL || a === STOP_UNDEFINED;
+        const bIsSentinel = b === STOP_NULL || b === STOP_UNDEFINED;
+        if (aIsSentinel && !bIsSentinel) {
+            return 1;
+        }
+        if (!aIsSentinel && bIsSentinel) {
+            return -1;
+        }
+        return a < b ? -1 : a > b ? 1 : 0;
+    });
     if (uniqueValues.length === 0) {
         return [];
     }

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

@@ -3,7 +3,6 @@ import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
 import Grammar from './Grammar';
-import Heatmap from './Heatmap';
 const SymbologyDialog = ({ model, okSignalPromise, isStorySegmentOverride, segmentId, }) => {
     const [selectedLayer, setSelectedLayer] = useState(null);
     const [componentToRender, setComponentToRender] = useState(null);
@@ -34,9 +33,6 @@ const SymbologyDialog = ({ model, okSignalPromise, isStorySegmentOverride, segme
         }
         // TODO GeoTiffLayers can also be used for other layers, need a better way to determine source + layer combo
         switch (layer.type) {
-            case 'HeatmapLayer':
-                LayerSymbology = (React.createElement(Heatmap, { model: model, okSignalPromise: okSignalPromise, layerId: selectedLayer, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }));
-                break;
             case 'VectorLayer':
             case 'VectorTileLayer':
             case 'GeoTiffLayer':
@@ -53,7 +49,9 @@ export class SymbologyWidget extends Dialog {
     constructor(options) {
         const okSignalPromise = new PromiseDelegate();
         const body = (React.createElement(SymbologyDialog, { model: options.model, okSignalPromise: okSignalPromise, isStorySegmentOverride: options.isStorySegmentOverride, segmentId: options.segmentId }));
-        super({ title: 'Symbology', body });
+        const layerId = Object.keys(options.model.localState.selected.value)[0];
+        const layerName = options.model.getLayer(layerId).name;
+        super({ title: `Symbology — ${layerName}`, body });
         this.id = 'jupytergis::symbologyWidget';
         this.okSignal = new Signal(this);
         okSignalPromise.resolve(this.okSignal);

package/lib/features/story/SpectaPanel.js

@@ -28,7 +28,7 @@ export function SpectaPanel({ model, isSpecta, isMobile, onSegmentTransitionEnd,
         return () => el.removeEventListener('animationend', handleAnimationEnd);
     }, [currentIndex, onSegmentTransitionEnd]);
     if (isMobile) {
-        return (React.createElement(SpectaMobileView, { segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext }));
+        return (React.createElement(SpectaMobileView, { model: model, segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, setIndex: setIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, onSegmentTransitionChange: onSegmentTransitionChange }));
     }
     return (React.createElement(SpectaDesktopView, { model: model, isSpecta: isSpecta, containerRef: containerRef, storyViewerPanelRef: storyViewerPanelRef, segmentContainerRef: segmentContainerRef, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, showGradient: showGradient, setIndex: setIndex, onSegmentTransitionChange: onSegmentTransitionChange }));
 }

package/lib/features/story/components/ListStoryStageOverlay.d.ts

@@ -6,7 +6,6 @@ interface IListStoryStageOverlayProps {
 }
 /**
  * List-story stage overlay: map + markdown segments on the map stage.
- * The story column scrolls only the virtual track; this is the visible UI.
  */
 export declare function ListStoryStageOverlay({ model, segmentTransition, }: IListStoryStageOverlayProps): JSX.Element | null;
 export {};