@jupytergis/base 0.14.1 → 0.16.0-alpha.0

package/lib/features/layers/forms/source/wmsTileSource.js

@@ -0,0 +1,78 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { SchemaForm } from "../../../../shared/formbuilder/objectform/SchemaForm";
+import { WmsTileSourceUrlInput } from "../../../../shared/formbuilder/objectform/components/WmsTileSourceUrlInput";
+import { processBaseSchema, removeFormEntry, } from "../../../../shared/formbuilder/objectform/schemaUtils";
+import { useSchemaFormState } from "../../../../shared/formbuilder/objectform/useSchemaFormState";
+import { GlobalStateDbManager } from "../../../../shared/store";
+import { deepCopy } from "../../../../tools";
+export const WMS_AVAILABLE_LAYERS_CACHE = 'jgis:wmsTileSource:availableLayers';
+export function WmsTileSourceForm(props) {
+    const { schema: schemaProp, sourceData, syncData, model, filePath, formContext, dialogOptions, cancel, formErrorSignal, } = props;
+    const { formData, schema, formContextValue, hasSchema, handleChangeBase, handleSubmitBase, } = useSchemaFormState({
+        sourceData,
+        schemaProp,
+        model,
+        syncData,
+        cancel,
+        onAfterChange: dialogOptions
+            ? (data) => {
+                dialogOptions.sourceData = Object.assign({}, data);
+            }
+            : undefined,
+    });
+    const [wmsAvailableLayers, setWmsAvailableLayers] = useState([]);
+    const stateDb = GlobalStateDbManager.getInstance().getStateDb();
+    // Rehydrate available WMS layers from StateDB to avoid having to refetch on remount.
+    useEffect(() => {
+        const wmsUrl = formData === null || formData === void 0 ? void 0 : formData.url;
+        if (!stateDb || !wmsUrl) {
+            return;
+        }
+        const db = stateDb;
+        const cacheKey = `${WMS_AVAILABLE_LAYERS_CACHE}:${wmsUrl}`;
+        async function loadLayersFromCache() {
+            var _a, _b;
+            const cached = (await db.fetch(cacheKey));
+            if (cached && cached.length > 0) {
+                setWmsAvailableLayers(cached);
+            }
+            else {
+                setWmsAvailableLayers([]);
+                handleChangeBase(Object.assign(Object.assign({}, (formData !== null && formData !== void 0 ? formData : {})), { params: Object.assign(Object.assign({}, ((_b = ((_a = formData === null || formData === void 0 ? void 0 : formData.params) !== null && _a !== void 0 ? _a : {})) !== null && _b !== void 0 ? _b : {})), { layers: undefined }) }));
+            }
+        }
+        void loadLayersFromCache();
+    }, [stateDb, formData === null || formData === void 0 ? void 0 : formData.url]);
+    const uiSchema = useMemo(() => {
+        var _a, _b, _c, _d;
+        const builtUiSchema = {};
+        const dataCopy = deepCopy(formData);
+        processBaseSchema(dataCopy, schema, builtUiSchema, formContext, removeFormEntry);
+        const layerNames = wmsAvailableLayers
+            .map(layer => layer.name)
+            .filter(name => name !== '');
+        // Populate schema enum dynamically so RJSF renders a select for params.layers
+        const params = ((_b = (_a = schema.properties) === null || _a === void 0 ? void 0 : _a.params) !== null && _b !== void 0 ? _b : {});
+        const paramsProperties = ((_c = params.properties) !== null && _c !== void 0 ? _c : {});
+        if (paramsProperties.layers) {
+            // Keep select options in sync with the cached/available layers list.
+            if (layerNames.length > 0) {
+                paramsProperties.layers.enum = layerNames;
+            }
+            else {
+                // Avoid invalid schema (`enum` must be a non-empty array).
+                delete paramsProperties.layers.enum;
+            }
+        }
+        builtUiSchema.url = {
+            'ui:widget': WmsTileSourceUrlInput,
+        };
+        builtUiSchema.params = Object.assign(Object.assign({}, builtUiSchema.params), { 'ui:title': false, layers: Object.assign(Object.assign({}, (_d = builtUiSchema.params) === null || _d === void 0 ? void 0 : _d.layers), { 'ui:widget': 'select', 'ui:placeholder': 'Select a layer', 'ui:enumNames': wmsAvailableLayers.map(layer => layer.title) }) });
+        return builtUiSchema;
+    }, [schema, formData, formContext, wmsAvailableLayers]);
+    if (!hasSchema) {
+        return null;
+    }
+    return (React.createElement(SchemaForm, { schema: schema, formData: formData, onChange: handleChangeBase, onSubmit: handleSubmitBase, formContext: Object.assign(Object.assign({}, formContextValue), { wmsAvailableLayers,
+            setWmsAvailableLayers }), filePath: filePath, uiSchema: uiSchema, formErrorSignal: formErrorSignal }));
+}

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

@@ -3,7 +3,7 @@ import { Dialog } from '@jupyterlab/apputils';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import * as React from 'react';
-import { ICreationFormProps } from "../formbuilder";
+import { ICreationFormProps } from "../../shared/formbuilder";
 export interface ICreationFormWrapperProps extends ICreationFormProps {
     /**
      * A promise resolving when the dialog is ready.

package/lib/{dialogs → features/layers}/layerCreationFormDialog.js

@@ -2,7 +2,7 @@ import { Dialog } from '@jupyterlab/apputils';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import * as React from 'react';
-import { CreationForm } from "../formbuilder";
+import { CreationForm } from "../../shared/formbuilder";
 export const CreationFormWrapper = props => {
     var _a;
     const [ready, setReady] = React.useState(false);

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

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

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

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

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

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

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

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

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

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