@jupytergis/base 0.15.0 → 0.16.0-alpha.1

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

@@ -0,0 +1,520 @@
+/**
+ * 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 { faCheck, faPlus, faTrash, faXmark, } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useCallback, useRef, useState } from 'react';
+import { drawColorRamp, getColorMap, } from "../colorRampUtils";
+import { Button } from "../../../../shared/components/Button";
+import { Input } from "../../../../shared/components/Input";
+import { NativeSelect, NativeSelectOption, } from "../../../../shared/components/NativeSelect";
+import { CategoricalEditor, ColorRampEditor, ConstantEditor, ScalarEditor, } from './ScaleEditor';
+// ---------------------------------------------------------------------------
+// Channel taxonomy
+// ---------------------------------------------------------------------------
+const RGBA_CHANNELS = [
+    'fill-color',
+    'stroke-color',
+    'circle-fill-color',
+    'circle-stroke-color',
+];
+const POSFLOAT_CHANNELS = [
+    'stroke-width',
+    'circle-stroke-width',
+    'circle-radius',
+];
+const ALL_CHANNELS = [...RGBA_CHANNELS, ...POSFLOAT_CHANNELS];
+// Channels relevant for raster/KDE layers.
+// pixel-color: full RGBA including alpha (label: "pixel-rgba").
+// pixel-rgb:   virtual channel — RGB only; pair with pixel-alpha for separate alpha.
+// pixel-alpha: alpha sub-channel (0-1 scalar).
+const PIXEL_RGBA_CHANNELS = [
+    'pixel-color',
+    'pixel-rgb',
+    'pixel-red',
+    'pixel-green',
+    'pixel-blue',
+];
+const PIXEL_FLOAT_CHANNELS = ['pixel-alpha'];
+const ALL_PIXEL_CHANNELS = [...PIXEL_RGBA_CHANNELS, ...PIXEL_FLOAT_CHANNELS];
+/** Display labels for channels that need a friendlier name. */
+const CHANNEL_LABELS = {
+    'pixel-color': 'pixel-rgba',
+};
+function compatibleChannels(scale, isRaster = false) {
+    if (isRaster) {
+        switch (scale.scheme) {
+            case 'colorRamp':
+            case 'categorical':
+            case 'constant_rgba':
+                return PIXEL_RGBA_CHANNELS;
+            case 'scalar':
+            case 'constant_num':
+                return PIXEL_FLOAT_CHANNELS;
+            default:
+                return ALL_PIXEL_CHANNELS;
+        }
+    }
+    switch (scale.scheme) {
+        case 'colorRamp':
+        case 'categorical':
+        case 'constant_rgba':
+            return RGBA_CHANNELS;
+        case 'scalar':
+        case 'constant_num':
+            return POSFLOAT_CHANNELS;
+        default:
+            return ALL_CHANNELS;
+    }
+}
+function defaultScaleForScheme(scheme, _currentChannels) {
+    switch (scheme) {
+        case 'constant_rgba':
+            return {
+                scheme: 'constant_rgba',
+                params: { value: [128, 128, 128, 1] },
+            };
+        case 'constant_num':
+            return {
+                scheme: 'constant_num',
+                params: { value: 1 },
+            };
+        case 'colorRamp':
+            return {
+                scheme: 'colorRamp',
+                params: {
+                    name: 'viridis',
+                    nShades: 9,
+                    mode: 'equal interval',
+                    reverse: false,
+                    fallback: [0, 0, 0, 0],
+                },
+            };
+        case 'categorical':
+            return {
+                scheme: 'categorical',
+                params: {
+                    colorRamp: 'schemeCategory10',
+                    reverse: false,
+                    fallback: [0, 0, 0, 0],
+                },
+            };
+        case 'scalar':
+            return {
+                scheme: 'scalar',
+                params: {
+                    domain: [0, 100],
+                    range: [1, 20],
+                    mode: 'equal interval',
+                    nStops: 5,
+                    fallback: 1,
+                },
+            };
+        case 'identity':
+            return { scheme: 'identity' };
+        default:
+            return {
+                scheme: 'constant_num',
+                params: { value: 1 },
+            };
+    }
+}
+// ---------------------------------------------------------------------------
+// Scheme selector options
+// ---------------------------------------------------------------------------
+const SCHEME_OPTIONS = [
+    { value: 'constant_rgba', label: 'const (color)' },
+    { value: 'constant_num', label: 'const (num)' },
+    { value: 'colorRamp', label: 'colorRamp' },
+    { value: 'categorical', label: 'categorical' },
+    { value: 'scalar', label: 'scalar' },
+    { value: 'identity', label: 'identity' },
+    { value: 'expression', label: 'expression (coming soon)', disabled: true },
+];
+// ---------------------------------------------------------------------------
+// Scale preview
+// ---------------------------------------------------------------------------
+const ColorRampPreview = ({ name, reverse, }) => {
+    const ref = useRef(null);
+    React.useEffect(() => {
+        const canvas = ref.current;
+        if (!canvas) {
+            return;
+        }
+        const colorMap = getColorMap(name);
+        if (!colorMap) {
+            return;
+        }
+        const map = reverse
+            ? Object.assign(Object.assign({}, colorMap), { colors: [...colorMap.colors].reverse() }) : colorMap;
+        drawColorRamp(canvas, map);
+    }, [name, reverse]);
+    return (React.createElement("canvas", { ref: ref, width: 160, height: 14, style: {
+            borderRadius: 2,
+            flex: '0 0 80px',
+            height: 14,
+            display: 'block',
+        } }));
+};
+const ScalePreview = ({ scale }) => {
+    switch (scale.scheme) {
+        case 'constant_rgba': {
+            const [r, g, b, a] = scale.params.value;
+            return (React.createElement("span", { className: "jp-gis-scale-preview" },
+                React.createElement("span", { className: "jp-gis-scale-swatch", style: { background: `rgba(${r},${g},${b},${a})` } }),
+                React.createElement("span", { className: "jp-gis-scale-meta" },
+                    r,
+                    ", ",
+                    g,
+                    ", ",
+                    b,
+                    ", ",
+                    a)));
+        }
+        case 'constant_num':
+            return (React.createElement("span", { className: "jp-gis-scale-preview" },
+                React.createElement("span", { className: "jp-gis-scale-meta" },
+                    "= ",
+                    scale.params.value)));
+        case 'colorRamp': {
+            const { name, reverse, domain } = scale.params;
+            return (React.createElement("span", { className: "jp-gis-scale-preview" },
+                React.createElement(ColorRampPreview, { name: name, reverse: reverse }),
+                React.createElement("span", { className: "jp-gis-scale-meta" },
+                    name,
+                    domain ? ` [${domain[0]}–${domain[1]}]` : '')));
+        }
+        case 'categorical': {
+            const { colorRamp, colorStops } = scale.params;
+            if (colorStops === null || colorStops === void 0 ? void 0 : colorStops.length) {
+                return (React.createElement("span", { className: "jp-gis-scale-preview" },
+                    colorStops.slice(0, 8).map((s, i) => {
+                        const [r, g, b, aa] = s.color;
+                        return (React.createElement("span", { key: i, className: "jp-gis-scale-dot", style: { background: `rgba(${r},${g},${b},${aa})` } }));
+                    }),
+                    React.createElement("span", { className: "jp-gis-scale-meta" }, colorRamp)));
+            }
+            return (React.createElement("span", { className: "jp-gis-scale-preview" },
+                React.createElement("span", { className: "jp-gis-scale-meta" }, colorRamp !== null && colorRamp !== void 0 ? colorRamp : 'categorical')));
+        }
+        case 'scalar': {
+            const { domain, range } = scale.params;
+            return (React.createElement("span", { className: "jp-gis-scale-preview" },
+                React.createElement("span", { className: "jp-gis-scale-meta" },
+                    "[",
+                    domain[0],
+                    ", ",
+                    domain[1],
+                    "] \u2192 [",
+                    range[0],
+                    ", ",
+                    range[1],
+                    "]")));
+        }
+        case 'identity':
+            return (React.createElement("span", { className: "jp-gis-scale-preview" },
+                React.createElement("span", { className: "jp-gis-scale-meta" }, "\u2218 identity")));
+        case 'expression':
+            return (React.createElement("span", { className: "jp-gis-scale-preview" },
+                React.createElement("span", { className: "jp-gis-scale-meta" }, "expression")));
+        default:
+            return null;
+    }
+};
+// ---------------------------------------------------------------------------
+// When-clause helpers
+// ---------------------------------------------------------------------------
+export function formatPredicate(pred) {
+    switch (pred.type) {
+        case 'geometryType':
+            return `geom = ${pred.value}`;
+        case 'hasField':
+            return `has: ${pred.field}`;
+        case 'fieldEquals':
+            return `${pred.field} = ${pred.value}`;
+        case 'fieldCompare':
+            return `${pred.field} ${pred.op} ${pred.value}`;
+        case 'between':
+            return `${pred.field} between ${pred.min} and ${pred.max}`;
+    }
+}
+const COMPARE_OPS = ['>', '<', '>=', '<=', '!='];
+const EMPTY_NEW = {
+    type: 'geometryType',
+    geomValue: 'Point',
+    field: '',
+    fieldValue: '',
+    compareOp: '>',
+    betweenMin: '',
+    betweenMax: '',
+};
+function buildPredicate(p) {
+    switch (p.type) {
+        case 'geometryType':
+            return { type: 'geometryType', value: p.geomValue };
+        case 'hasField':
+            return p.field ? { type: 'hasField', field: p.field } : null;
+        case 'fieldEquals':
+            return p.field
+                ? {
+                    type: 'fieldEquals',
+                    field: p.field,
+                    value: isNaN(Number(p.fieldValue))
+                        ? p.fieldValue
+                        : Number(p.fieldValue),
+                }
+                : null;
+        case 'fieldCompare': {
+            const num = Number(p.fieldValue);
+            return p.field && !isNaN(num)
+                ? { type: 'fieldCompare', field: p.field, op: p.compareOp, value: num }
+                : null;
+        }
+        case 'between': {
+            const min = Number(p.betweenMin);
+            const max = Number(p.betweenMax);
+            return p.field &&
+                !isNaN(min) &&
+                !isNaN(max) &&
+                p.betweenMin !== '' &&
+                p.betweenMax !== ''
+                ? { type: 'between', field: p.field, min, max }
+                : null;
+        }
+    }
+}
+export const WhenAddForm = ({ availableFields, onAdd, onCancel, }) => {
+    const [draft, setDraft] = useState(Object.assign({}, EMPTY_NEW));
+    const patch = (p) => setDraft(prev => (Object.assign(Object.assign({}, prev), p)));
+    const built = buildPredicate(draft);
+    return (React.createElement("span", { className: "jp-gis-grammar-when-form" },
+        React.createElement(NativeSelect, { value: draft.type, onChange: e => patch({ type: e.target.value }) },
+            React.createElement(NativeSelectOption, { value: "geometryType" }, "Geometry Type"),
+            React.createElement(NativeSelectOption, { value: "hasField" }, "Has Field"),
+            React.createElement(NativeSelectOption, { value: "fieldEquals" }, "Field Equals"),
+            React.createElement(NativeSelectOption, { value: "fieldCompare" }, "Field Compare"),
+            React.createElement(NativeSelectOption, { value: "between" }, "Between")),
+        draft.type === 'geometryType' && (React.createElement(NativeSelect, { value: draft.geomValue, onChange: e => patch({
+                geomValue: e.target.value,
+            }) },
+            React.createElement(NativeSelectOption, { value: "Point" }, "Point"),
+            React.createElement(NativeSelectOption, { value: "LineString" }, "LineString"),
+            React.createElement(NativeSelectOption, { value: "Polygon" }, "Polygon"))),
+        (draft.type === 'hasField' ||
+            draft.type === 'fieldEquals' ||
+            draft.type === 'fieldCompare' ||
+            draft.type === 'between') && (React.createElement(NativeSelect, { value: draft.field, onChange: e => patch({ field: e.target.value }) },
+            React.createElement(NativeSelectOption, { value: "" }, "(field)"),
+            availableFields.map(field => (React.createElement(NativeSelectOption, { key: field, value: field }, field))))),
+        draft.type === 'fieldCompare' && (React.createElement(NativeSelect, { value: draft.compareOp, onChange: e => patch({ compareOp: e.target.value }) }, COMPARE_OPS.map(op => (React.createElement(NativeSelectOption, { key: op, value: op }, op))))),
+        (draft.type === 'fieldEquals' || draft.type === 'fieldCompare') && (React.createElement(Input, { style: { flex: '0 0 80px', minWidth: 0 }, type: draft.type === 'fieldCompare' ? 'number' : 'text', placeholder: "value", value: draft.fieldValue, onChange: e => patch({ fieldValue: e.target.value }) })),
+        draft.type === 'between' && (React.createElement(React.Fragment, null,
+            React.createElement(Input, { style: { flex: '0 0 60px', minWidth: 0 }, type: "number", placeholder: "min", value: draft.betweenMin, onChange: e => patch({ betweenMin: e.target.value }) }),
+            React.createElement("span", { style: { flex: '0 0 auto', fontSize: 'var(--jp-ui-font-size0)' } }, "\u2013"),
+            React.createElement(Input, { style: { flex: '0 0 60px', minWidth: 0 }, type: "number", placeholder: "max", value: draft.betweenMax, onChange: e => patch({ betweenMax: e.target.value }) }))),
+        React.createElement(Button, { type: "button", variant: "icon", size: "icon-md", disabled: !built, onClick: () => built && onAdd(built), title: "Add predicate" },
+            React.createElement(FontAwesomeIcon, { icon: faCheck })),
+        React.createElement(Button, { type: "button", variant: "icon", size: "icon-md", className: "jp-gis-grammar-when-form-cancel", onClick: onCancel, title: "Cancel" },
+            React.createElement(FontAwesomeIcon, { icon: faXmark }))));
+};
+/**
+ * Renders the field input area in column 1 of the grid.
+ *   0   → "(const)" label, no selection
+ *   1   → single dropdown
+ *  'any'→ chips for each selected field + add dropdown
+ */
+const FieldSelector = ({ fieldCount, fields, availableFields, onFieldChange, onAddField, }) => {
+    var _a;
+    if (fieldCount === 0) {
+        return (React.createElement("span", { style: {
+                gridRow: 1,
+                gridColumn: 1,
+                display: 'flex',
+                alignItems: 'center',
+                fontSize: 'var(--jp-ui-font-size1)',
+                color: 'var(--jp-ui-font-color2)',
+                paddingLeft: 4,
+            } }, "(const)"));
+    }
+    if (fieldCount === 1) {
+        const selectedField = (_a = fields[0]) !== null && _a !== void 0 ? _a : '';
+        return (React.createElement("div", { style: { gridRow: 1, gridColumn: 1 } },
+            React.createElement(NativeSelect, { value: selectedField, onChange: e => onFieldChange(0, e.target.value) },
+                React.createElement(NativeSelectOption, { value: "" }, "(none)"),
+                availableFields.map(f => (React.createElement(NativeSelectOption, { key: f, value: f }, f))))));
+    }
+    // 'any' — multi-field chips + add
+    return (React.createElement("div", { style: {
+            gridRow: 1,
+            gridColumn: 1,
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: 2,
+            alignItems: 'center',
+        } },
+        fields.map((f, i) => (React.createElement("span", { key: i, className: "jp-gis-grammar-when-chip" },
+            f,
+            React.createElement(Button, { type: "button", className: "jp-gis-grammar-when-cancel", onClick: () => onFieldChange(i, ''), title: "Remove field" },
+                React.createElement(FontAwesomeIcon, { icon: faXmark }))))),
+        React.createElement("div", { style: { minWidth: 60, flex: '0 0 auto' } },
+            React.createElement(NativeSelect, { value: "", onChange: e => {
+                    if (e.target.value) {
+                        onAddField(e.target.value);
+                    }
+                } },
+                React.createElement(NativeSelectOption, { value: "" }, "+field"),
+                availableFields
+                    .filter(f => !fields.includes(f))
+                    .map(f => (React.createElement(NativeSelectOption, { key: f, value: f }, f)))))));
+};
+/**
+ * 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 function fieldCountForScale(scheme) {
+    switch (scheme) {
+        case 'constant_rgba':
+        case 'constant_num':
+            return 0;
+        case 'expression':
+            return 'any';
+        default:
+            return 1;
+    }
+}
+// ---------------------------------------------------------------------------
+// MappingRow
+// ---------------------------------------------------------------------------
+const MappingRow = ({ row, availableFields, featureValues, isRaster = false, onChange, onDelete, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const [expanded, setExpanded] = useState(false);
+    const [addingWhen, setAddingWhen] = useState(false);
+    const handleFieldChange = useCallback((index, value) => {
+        var _a;
+        const next = [...((_a = row.fields) !== null && _a !== void 0 ? _a : [])];
+        if (value) {
+            next[index] = value;
+        }
+        else {
+            next.splice(index, 1);
+        }
+        onChange(Object.assign(Object.assign({}, row), { fields: next.length > 0 ? next : undefined }));
+    }, [row, onChange]);
+    const addField = useCallback((value) => {
+        var _a;
+        if (!value) {
+            return;
+        }
+        onChange(Object.assign(Object.assign({}, row), { fields: [...((_a = row.fields) !== null && _a !== void 0 ? _a : []), value] }));
+    }, [row, onChange]);
+    const handleSchemeChange = useCallback((scheme) => {
+        var _a;
+        const newScale = defaultScaleForScheme(scheme, row.channels);
+        const compat = compatibleChannels(newScale, isRaster);
+        const filtered = row.channels.filter(ch => compat.includes(ch));
+        const newFieldCount = fieldCountForScale(scheme);
+        // Trim fields list to match new count constraint
+        const trimmedFields = newFieldCount === 0
+            ? undefined
+            : newFieldCount === 1
+                ? (_a = row.fields) === null || _a === void 0 ? void 0 : _a.slice(0, 1)
+                : row.fields;
+        onChange(Object.assign(Object.assign({}, row), { scale: newScale, channels: filtered.length > 0 ? filtered : [compat[0]], fields: trimmedFields }));
+    }, [row, onChange]);
+    const handleScaleChange = useCallback((scale) => onChange(Object.assign(Object.assign({}, row), { scale })), [row, onChange]);
+    const handleChannelChange = useCallback((index, ch) => {
+        const next = [...row.channels];
+        next[index] = ch;
+        onChange(Object.assign(Object.assign({}, row), { channels: next }));
+    }, [row, onChange]);
+    const removeChannel = useCallback((ch) => {
+        const next = row.channels.filter(c => c !== ch);
+        if (next.length > 0) {
+            onChange(Object.assign(Object.assign({}, row), { channels: next }));
+        }
+        else {
+            onDelete();
+        }
+    }, [row, onChange, onDelete]);
+    const addChannel = useCallback((ch) => {
+        onChange(Object.assign(Object.assign({}, row), { channels: [...row.channels, ch] }));
+    }, [row, onChange]);
+    const addPredicate = useCallback((pred) => {
+        var _a;
+        onChange(Object.assign(Object.assign({}, row), { when: [...((_a = row.when) !== null && _a !== void 0 ? _a : []), pred] }));
+        setAddingWhen(false);
+    }, [row, onChange]);
+    const removePredicate = useCallback((index) => {
+        var _a;
+        const next = ((_a = row.when) !== null && _a !== void 0 ? _a : []).filter((_, i) => i !== index);
+        onChange(Object.assign(Object.assign({}, row), { when: next.length > 0 ? next : undefined }));
+    }, [row, onChange]);
+    const compat = compatibleChannels(row.scale, isRaster);
+    const availableToAdd = compat.filter(ch => !row.channels.includes(ch));
+    return (React.createElement("div", { className: "jp-gis-grammar-rule" },
+        React.createElement("div", { className: "jp-gis-grammar-rule-grid" },
+            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: 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: () => {
+                    var _a;
+                    return onChange(Object.assign(Object.assign({}, row), { whenOp: ((_a = row.whenOp) !== null && _a !== void 0 ? _a : 'all') === 'all' ? 'any' : 'all' }));
+                } }, (_d = row.whenOp) !== null && _d !== void 0 ? _d : 'all')), (_e = row.when) === null || _e === void 0 ? void 0 :
+            _e.map((pred, i) => (React.createElement("span", { key: i, className: "jp-gis-grammar-when-chip" },
+                formatPredicate(pred),
+                React.createElement(Button, { type: "button", onClick: () => removePredicate(i), title: "Remove condition" },
+                    React.createElement(FontAwesomeIcon, { icon: faXmark }))))),
+            addingWhen ? (React.createElement(WhenAddForm, { availableFields: availableFields, onAdd: addPredicate, onCancel: () => setAddingWhen(false) })) : (React.createElement(Button, { type: "button", className: "jp-gis-grammar-when-add-btn", onClick: () => setAddingWhen(true) },
+                React.createElement(FontAwesomeIcon, { icon: faPlus })))),
+        expanded && (React.createElement("div", { className: "jp-gis-grammar-rule-editor" },
+            (row.scale.scheme === 'constant_rgba' ||
+                row.scale.scheme === 'constant_num') && (React.createElement(ConstantEditor, { scale: row.scale, onChange: handleScaleChange })),
+            row.scale.scheme === 'colorRamp' && (React.createElement(ColorRampEditor, { scale: row.scale, field: (_f = row.fields) === null || _f === void 0 ? void 0 : _f[0], featureValues: featureValues, onChange: handleScaleChange })),
+            row.scale.scheme === 'categorical' && (React.createElement(CategoricalEditor, { scale: row.scale, field: (_g = row.fields) === null || _g === void 0 ? void 0 : _g[0], featureValues: featureValues, onChange: handleScaleChange })),
+            row.scale.scheme === 'scalar' && (React.createElement(ScalarEditor, { scale: row.scale, field: (_h = row.fields) === null || _h === void 0 ? void 0 : _h[0], featureValues: featureValues, onChange: handleScaleChange })),
+            (row.scale.scheme === 'identity' ||
+                row.scale.scheme === 'expression') && (React.createElement("p", { style: {
+                    margin: 0,
+                    color: 'var(--jp-ui-font-color2)',
+                    fontSize: 'var(--jp-ui-font-size1)',
+                } },
+                "No configuration for ",
+                row.scale.scheme,
+                " scale."))))));
+};
+export default MappingRow;

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

@@ -0,0 +1,20 @@
+/**
+ * A numeric text input that accepts scientific notation (e.g. 1e-5, 3.2e+10).
+ *
+ * Uses type="text" internally so the browser never rejects or silently rounds
+ * values. The parsed number is committed to the parent only on blur; while the
+ * user is typing the raw string is kept in local state.
+ *
+ * Invalid strings (non-finite after parsing) are highlighted and the field
+ * resets to the last valid value on blur.
+ */
+import React from 'react';
+interface INumericInputProps {
+    value: number;
+    onChange: (v: number) => void;
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const NumericInput: React.FC<INumericInputProps>;
+export {};

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

@@ -0,0 +1,44 @@
+/**
+ * A numeric text input that accepts scientific notation (e.g. 1e-5, 3.2e+10).
+ *
+ * Uses type="text" internally so the browser never rejects or silently rounds
+ * values. The parsed number is committed to the parent only on blur; while the
+ * user is typing the raw string is kept in local state.
+ *
+ * Invalid strings (non-finite after parsing) are highlighted and the field
+ * resets to the last valid value on blur.
+ */
+import React, { useEffect, useRef, useState } from 'react';
+import { Input } from "../../../../shared/components/Input";
+export const NumericInput = ({ value, onChange, placeholder, className, style, }) => {
+    const [raw, setRaw] = useState(() => String(value));
+    const focused = useRef(false);
+    // Sync from parent when the field is not being edited and the value differs.
+    useEffect(() => {
+        if (!focused.current && Number(raw) !== value) {
+            setRaw(String(value));
+        }
+    }, [value]); // intentionally excludes `raw` to avoid clobbering user input
+    const commit = () => {
+        focused.current = false;
+        const trimmed = raw.trim();
+        if (trimmed === '' || trimmed === '-') {
+            // Incomplete entry — reset to last valid value.
+            setRaw(String(value));
+            return;
+        }
+        const parsed = Number(trimmed);
+        if (Number.isFinite(parsed)) {
+            onChange(parsed);
+        }
+        else {
+            setRaw(String(value));
+        }
+    };
+    // Highlight the field when the current string is clearly invalid.
+    const trimmed = raw.trim();
+    const isValid = trimmed === '' || trimmed === '-' || Number.isFinite(Number(trimmed));
+    return (React.createElement(Input, { className: className, style: style, type: "text", placeholder: placeholder, value: raw, "aria-invalid": !isValid, onChange: e => setRaw(e.target.value), onFocus: () => {
+            focused.current = true;
+        }, onBlur: commit }));
+};

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

@@ -0,0 +1,33 @@
+/**
+ * Inline scale editor for one IMapping.
+ * Renders a different UI for each scale scheme.
+ */
+import { ICategoricalScale, IColorRampScale, IConstantNumScale, IConstantRGBAScale, IScale, IScalarScale } from '@jupytergis/schema';
+import React from 'react';
+interface IConstantEditorProps {
+    scale: IConstantRGBAScale | IConstantNumScale;
+    onChange: (scale: IScale) => void;
+}
+export declare const ConstantEditor: React.FC<IConstantEditorProps>;
+interface IColorRampEditorProps {
+    scale: IColorRampScale;
+    field: string | undefined;
+    featureValues: Record<string, Set<any>>;
+    onChange: (scale: IScale) => void;
+}
+export declare const ColorRampEditor: React.FC<IColorRampEditorProps>;
+interface ICategoricalEditorProps {
+    scale: ICategoricalScale;
+    field: string | undefined;
+    featureValues: Record<string, Set<any>>;
+    onChange: (scale: IScale) => void;
+}
+export declare const CategoricalEditor: React.FC<ICategoricalEditorProps>;
+interface IScalarEditorProps {
+    scale: IScalarScale;
+    field: string | undefined;
+    featureValues: Record<string, Set<any>>;
+    onChange: (scale: IScale) => void;
+}
+export declare const ScalarEditor: React.FC<IScalarEditorProps>;
+export {};