@jupytergis/base 0.12.2 → 0.13.1

package/lib/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.js

@@ -1,19 +1,29 @@
 import { Button } from '@jupyterlab/ui-components';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { GeoTiffClassifications } from "../../classificationModes";
 import ColorRampControls from "../../components/color_ramp/ColorRampControls";
 import StopRow from "../../components/color_stops/StopRow";
 import useGetBandInfo from "../../hooks/useGetBandInfo";
-import { Utils } from "../../symbologyUtils";
+import { useOkSignal } from "../../hooks/useOkSignal";
+import { saveSymbology, Utils, } from "../../symbologyUtils";
 import BandRow from "../components/BandRow";
 import { LoadingOverlay } from "../../../../shared/components/loading";
+import { useLatest } from "../../../../shared/hooks/useLatest";
 import { GlobalStateDbManager } from "../../../../store";
-const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) => {
+import { useEffectiveSymbologyParams } from '../../hooks/useEffectiveSymbologyParams';
+const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segmentId, }) => {
     if (!layerId) {
         return;
     }
     const layer = model.getLayer(layerId);
-    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+    const params = useEffectiveSymbologyParams({
+        model,
+        layerId: layerId,
+        layer,
+        isStorySegmentOverride,
+        segmentId,
+    });
+    if (!params || !layer) {
         return;
     }
     const functions = ['discrete', 'linear', 'exact'];
@@ -29,56 +39,40 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) =>
     const [stopRows, setStopRows] = useState([]);
     const [selectedFunction, setSelectedFunction] = useState('linear');
     const [colorRampOptions, setColorRampOptions] = useState();
-    const stopRowsRef = useRef();
-    const bandRowsRef = useRef([]);
-    const selectedFunctionRef = useRef();
-    const colorRampOptionsRef = useRef();
-    const selectedBandRef = useRef();
+    const stopRowsRef = useLatest(stopRows);
+    const bandRowsRef = useLatest(bandRows);
+    const selectedFunctionRef = useLatest(selectedFunction);
+    const colorRampOptionsRef = useLatest(colorRampOptions);
+    const selectedBandRef = useLatest(selectedBand);
     useEffect(() => {
         populateOptions();
-        okSignalPromise.promise.then(okSignal => {
-            okSignal.connect(handleOk);
-        });
-        return () => {
-            okSignalPromise.promise.then(okSignal => {
-                okSignal.disconnect(handleOk, this);
-            });
-        };
     }, []);
     useEffect(() => {
-        bandRowsRef.current = bandRows;
         buildColorInfo();
     }, [bandRows]);
-    useEffect(() => {
-        stopRowsRef.current = stopRows;
-        selectedFunctionRef.current = selectedFunction;
-        colorRampOptionsRef.current = colorRampOptions;
-        selectedBandRef.current = selectedBand;
-    }, [stopRows, selectedFunction, colorRampOptions, selectedBand, layerState]);
     const populateOptions = async () => {
         var _a, _b, _c, _d;
         const layerState = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(`jupytergis:${layerId}`)));
         setLayerState(layerState);
-        const layerParams = layer.parameters;
-        const band = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.band) !== null && _b !== void 0 ? _b : 1;
-        const interpolation = (_d = (_c = layerParams.symbologyState) === null || _c === void 0 ? void 0 : _c.interpolation) !== null && _d !== void 0 ? _d : 'linear';
+        const band = (_b = (_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.band) !== null && _b !== void 0 ? _b : 1;
+        const interpolation = (_d = (_c = params.symbologyState) === null || _c === void 0 ? void 0 : _c.interpolation) !== null && _d !== void 0 ? _d : 'linear';
         setSelectedBand(band);
         setSelectedFunction(interpolation);
     };
     const buildColorInfo = () => {
-        var _a;
         // This it to parse a color object on the layer
-        if (!((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.color) || !layerState) {
+        if (!params.color || !layerState) {
             return;
         }
-        const color = layer.parameters.color;
+        const color = params.color;
         // If color is a string we don't need to parse
-        if (typeof color === 'string') {
+        // Otherwise color expression should be an array (e.g. ['interpolate', ...] or ['case', ...])
+        if (!Array.isArray(color)) {
             return;
         }
+        // ! wtf ? dont use statedb just read from the file??
         const isQuantile = layerState.selectedMode === 'quantile';
         const valueColorPairs = [];
-        // So if it's not a string then it's an array and we parse
         // Color[0] is the operator used for the color expression
         switch (color[0]) {
             case 'interpolate': {
@@ -89,7 +83,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) =>
                 // Sixth and on is value:color pairs
                 for (let i = 5; i < color.length; i += 2) {
                     const obj = {
-                        stop: scaleValue(color[i], isQuantile),
+                        stop: scaleValue(Number(color[i]), isQuantile),
                         output: color[i + 1],
                     };
                     valueColorPairs.push(obj);
@@ -105,8 +99,11 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) =>
                 // Fifth is color
                 // Last element is fallback value
                 for (let i = 3; i < color.length - 1; i += 2) {
+                    const stopVal = Number(Array.isArray(color[i])
+                        ? color[i][2]
+                        : color[i]);
                     const obj = {
-                        stop: scaleValue(color[i][2], isQuantile),
+                        stop: scaleValue(stopVal, isQuantile),
                         output: color[i + 1],
                     };
                     valueColorPairs.push(obj);
@@ -118,26 +115,11 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) =>
     };
     const handleOk = () => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        // Update source
         const bandRow = bandRowsRef.current[selectedBand - 1];
         if (!bandRow) {
             return;
         }
-        const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
-        const source = model.getSource(sourceId);
-        if (!source || !source.parameters) {
-            return;
-        }
-        const isQuantile = ((_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.selectedMode) === 'quantile';
-        const sourceInfo = source.parameters.urls[0];
-        sourceInfo.min = bandRow.stats.minimum;
-        sourceInfo.max = bandRow.stats.maximum;
-        source.parameters.urls[0] = sourceInfo;
-        model.sharedModel.updateSource(sourceId, source);
-        // Update layer
-        if (!layer.parameters) {
-            return;
-        }
+        const isQuantile = ((_a = colorRampOptionsRef.current) === null || _a === void 0 ? void 0 : _a.selectedMode) === 'quantile';
         // TODO: Different viewers will have different types
         let colorExpr = [];
         switch (selectedFunctionRef.current) {
@@ -146,7 +128,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) =>
                 colorExpr.push(['band', selectedBand]);
                 // Set NoData values to transparent
                 colorExpr.push(0.0, [0.0, 0.0, 0.0, 0.0]);
-                (_c = stopRowsRef.current) === null || _c === void 0 ? void 0 : _c.map(stop => {
+                (_b = stopRowsRef.current) === null || _b === void 0 ? void 0 : _b.map(stop => {
                     colorExpr.push(unscaleValue(stop.stop, isQuantile));
                     colorExpr.push(stop.output);
                 });
@@ -157,7 +139,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) =>
                 // Set NoData values to transparent
                 colorExpr.push(['==', ['band', selectedBand], 0]);
                 colorExpr.push([0.0, 0.0, 0.0, 0.0]);
-                (_d = stopRowsRef.current) === null || _d === void 0 ? void 0 : _d.map(stop => {
+                (_c = stopRowsRef.current) === null || _c === void 0 ? void 0 : _c.map(stop => {
                     colorExpr.push([
                         '<=',
                         ['band', selectedBand],
@@ -174,7 +156,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) =>
                 // Set NoData values to transparent
                 colorExpr.push(['==', ['band', selectedBand], 0]);
                 colorExpr.push([0.0, 0.0, 0.0, 0.0]);
-                (_e = stopRowsRef.current) === null || _e === void 0 ? void 0 : _e.map(stop => {
+                (_d = stopRowsRef.current) === null || _d === void 0 ? void 0 : _d.map(stop => {
                     colorExpr.push([
                         '==',
                         ['band', selectedBand],
@@ -191,16 +173,40 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) =>
             renderType: 'Singleband Pseudocolor',
             band: selectedBandRef.current,
             interpolation: selectedFunctionRef.current,
-            colorRamp: (_f = colorRampOptionsRef.current) === null || _f === void 0 ? void 0 : _f.selectedRamp,
-            nClasses: (_g = colorRampOptionsRef.current) === null || _g === void 0 ? void 0 : _g.numberOfShades,
-            mode: (_h = colorRampOptionsRef.current) === null || _h === void 0 ? void 0 : _h.selectedMode,
+            colorRamp: (_e = colorRampOptionsRef.current) === null || _e === void 0 ? void 0 : _e.selectedRamp,
+            nClasses: ((_f = colorRampOptionsRef.current) === null || _f === void 0 ? void 0 : _f.numberOfShades) !== undefined
+                ? String(colorRampOptionsRef.current.numberOfShades)
+                : undefined,
+            mode: (_g = colorRampOptionsRef.current) === null || _g === void 0 ? void 0 : _g.selectedMode,
         };
-        layer.parameters.symbologyState = symbologyState;
-        layer.parameters.color = colorExpr;
-        layer.type = 'WebGlLayer';
-        model.sharedModel.updateLayer(layerId, layer);
-        cancel();
+        if (!isStorySegmentOverride) {
+            // Update source
+            const sourceId = (_h = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _h === void 0 ? void 0 : _h.source;
+            const source = model.getSource(sourceId);
+            if (!source || !source.parameters) {
+                return;
+            }
+            const sourceInfo = source.parameters.urls[0];
+            sourceInfo.min = bandRow.stats.minimum;
+            sourceInfo.max = bandRow.stats.maximum;
+            source.parameters.urls[0] = sourceInfo;
+            model.sharedModel.updateSource(sourceId, source);
+        }
+        saveSymbology({
+            model,
+            layerId,
+            isStorySegmentOverride,
+            segmentId,
+            payload: {
+                symbologyState,
+                color: colorExpr,
+            },
+            mutateLayerBeforeSave: targetLayer => {
+                targetLayer.type = 'WebGlLayer';
+            },
+        });
     };
+    useOkSignal(okSignalPromise, handleOk);
     const addStopRow = () => {
         setStopRows([
             {
@@ -274,7 +280,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) =>
                 React.createElement("select", { name: "function-select", id: "function-select", className: "jp-mod-styled", value: selectedFunction, style: { textTransform: 'capitalize' }, onChange: event => {
                         setSelectedFunction(event.target.value);
                     } }, functions.map((func, funcIndex) => (React.createElement("option", { key: func, value: func, style: { textTransform: 'capitalize' } }, func)))))),
-        bandRows.length > 0 && (React.createElement(ColorRampControls, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true, showRampSelector: true })),
+        bandRows.length > 0 && (React.createElement(ColorRampControls, { layerParams: params, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true, showRampSelector: true })),
         React.createElement("div", { className: "jp-gis-stop-container" },
             React.createElement("div", { className: "jp-gis-stop-labels", style: { display: 'flex', gap: 6 } },
                 React.createElement("span", { style: { flex: '0 0 18%' } },

package/lib/dialogs/symbology/vector_layer/VectorRendering.js

@@ -47,35 +47,47 @@ const getSelectableRenderTypes = (featureProperties, layerType) => {
     ]);
     return Object.fromEntries(entries);
 };
-const useLayerRenderType = (layer, setSelectedRenderType) => useEffect(() => {
-    var _a, _b;
-    let renderType = (_b = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState) === null || _b === void 0 ? void 0 : _b.renderType;
-    if (!renderType) {
-        renderType = layer.type === 'HeatmapLayer' ? 'Heatmap' : 'Single Symbol';
-    }
-    setSelectedRenderType(renderType);
-}, []);
-const VectorRendering = ({ model, state, okSignalPromise, cancel, layerId, }) => {
-    const [selectedRenderType, setSelectedRenderType] = useState();
+const VectorRendering = ({ model, okSignalPromise, layerId, isStorySegmentOverride = false, segmentId, }) => {
     const [symbologyTab, setSymbologyTab] = useState('color');
-    if (!layerId) {
-        return;
-    }
-    const layer = model.getLayer(layerId);
-    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
-        return;
-    }
+    const [selectedRenderType, setSelectedRenderType] = useState();
+    const layer = layerId !== undefined ? model.getLayer(layerId) : null;
+    useEffect(() => {
+        var _a, _b, _c, _d, _e;
+        if (!layer) {
+            return;
+        }
+        let renderType;
+        if (isStorySegmentOverride) {
+            const segment = segmentId ? model.getLayer(segmentId) : undefined;
+            if (!segment) {
+                return;
+            }
+            const override = (_b = (_a = segment.parameters) === null || _a === void 0 ? void 0 : _a.layerOverride) === null || _b === void 0 ? void 0 : _b.find((override) => override.targetLayer === layerId);
+            if (!override) {
+                return;
+            }
+            renderType = (_c = override.symbologyState) === null || _c === void 0 ? void 0 : _c.renderType;
+        }
+        else {
+            renderType = (_e = (_d = layer.parameters) === null || _d === void 0 ? void 0 : _d.symbologyState) === null || _e === void 0 ? void 0 : _e.renderType;
+        }
+        if (!renderType) {
+            renderType = layer.type === 'HeatmapLayer' ? 'Heatmap' : 'Single Symbol';
+        }
+        setSelectedRenderType(renderType);
+    }, []);
     const { featureProperties, isLoading: featuresLoading } = useGetProperties({
         layerId,
         model: model,
     });
-    useLayerRenderType(layer, setSelectedRenderType);
+    if (!layerId || !(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+        return null;
+    }
     if (featuresLoading) {
         return React.createElement("p", null, "Loading...");
     }
     if (selectedRenderType === undefined) {
-        // typeguard
-        return;
+        return null;
     }
     const selectableRenderTypes = getSelectableRenderTypes(featureProperties, layer.type);
     const selectedRenderTypeProps = selectableRenderTypes[selectedRenderType];
@@ -90,7 +102,7 @@ const VectorRendering = ({ model, state, okSignalPromise, cancel, layerId, }) =>
                     .filter(([renderType, renderTypeProps]) => renderTypeProps.layerTypeSupported &&
                     !(renderType === 'Heatmap' && symbologyTab === 'radius'))
                     .map(([renderType, _]) => (React.createElement("option", { key: renderType, value: renderType }, renderType)))))),
-        React.createElement(selectedRenderTypeProps.component, Object.assign({ model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }, (selectedRenderTypeProps.isTabbed ? { symbologyTab } : {}), (selectedRenderTypeProps.selectableAttributesAndValues
+        React.createElement(selectedRenderTypeProps.component, Object.assign({ model: model, okSignalPromise: okSignalPromise, layerId: layerId, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }, (selectedRenderTypeProps.isTabbed ? { symbologyTab } : {}), (selectedRenderTypeProps.selectableAttributesAndValues
             ? {
                 selectableAttributesAndValues: selectedRenderTypeProps.selectableAttributesAndValues,
             }

package/lib/dialogs/symbology/vector_layer/types/Canonical.js

@@ -1,8 +1,11 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useOkSignal } from "../../hooks/useOkSignal";
+import { saveSymbology } from "../../symbologyUtils";
 import ValueSelect from "../components/ValueSelect";
-const Canonical = ({ model, state, okSignalPromise, cancel, layerId, selectableAttributesAndValues, }) => {
-    const selectedValueRef = useRef();
+import { useLatest } from "../../../../shared/hooks/useLatest";
+const Canonical = ({ model, okSignalPromise, layerId, selectableAttributesAndValues, isStorySegmentOverride, segmentId, }) => {
     const [selectedValue, setSelectedValue] = useState('');
+    const selectedValueRef = useLatest(selectedValue);
     if (!layerId) {
         return;
     }
@@ -10,30 +13,17 @@ const Canonical = ({ model, state, okSignalPromise, cancel, layerId, selectableA
     if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
         return;
     }
-    useEffect(() => {
-        okSignalPromise.promise.then(okSignal => {
-            okSignal.connect(handleOk, this);
-        });
-        return () => {
-            okSignalPromise.promise.then(okSignal => {
-                okSignal.disconnect(handleOk, this);
-            });
-        };
-    }, [selectedValue]);
     useEffect(() => {
         var _a, _b;
         const layerParams = layer.parameters;
         const value = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : Object.keys(selectableAttributesAndValues)[0];
         setSelectedValue(value);
     }, [selectableAttributesAndValues]);
-    useEffect(() => {
-        selectedValueRef.current = selectedValue;
-    }, [selectedValue]);
     const handleOk = () => {
         if (!layer.parameters) {
             return;
         }
-        const colorExpr = ['get', selectedValue];
+        const colorExpr = ['get', selectedValueRef.current];
         const newStyle = Object.assign({}, layer.parameters.color);
         newStyle['fill-color'] = colorExpr;
         newStyle['stroke-color'] = colorExpr;
@@ -42,14 +32,23 @@ const Canonical = ({ model, state, okSignalPromise, cancel, layerId, selectableA
             renderType: 'Canonical',
             value: selectedValueRef.current,
         };
-        layer.parameters.symbologyState = symbologyState;
-        layer.parameters.color = newStyle;
-        if (layer.type === 'HeatmapLayer') {
-            layer.type = 'VectorLayer';
-        }
-        model.sharedModel.updateLayer(layerId, layer);
-        cancel();
+        saveSymbology({
+            model,
+            layerId,
+            isStorySegmentOverride,
+            segmentId,
+            payload: {
+                symbologyState,
+                color: newStyle,
+            },
+            mutateLayerBeforeSave: targetLayer => {
+                if (targetLayer.type === 'HeatmapLayer') {
+                    targetLayer.type = 'VectorLayer';
+                }
+            },
+        });
     };
+    useOkSignal(okSignalPromise, handleOk);
     const body = (() => {
         var _a;
         if (((_a = Object.keys(selectableAttributesAndValues)) === null || _a === void 0 ? void 0 : _a.length) === 0) {

package/lib/dialogs/symbology/vector_layer/types/Categorized.js

@@ -1,12 +1,12 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import ColorRampControls from "../../components/color_ramp/ColorRampControls";
 import StopContainer from "../../components/color_stops/StopContainer";
-import { Utils, VectorUtils } from "../../symbologyUtils";
+import { useOkSignal } from "../../hooks/useOkSignal";
+import { Utils, VectorUtils, saveSymbology, } from "../../symbologyUtils";
 import ValueSelect from "../components/ValueSelect";
-const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbologyTab, selectableAttributesAndValues, }) => {
-    const selectedAttributeRef = useRef();
-    const stopRowsRef = useRef();
-    const colorRampOptionsRef = useRef();
+import { useLatest } from "../../../../shared/hooks/useLatest";
+import { useEffectiveSymbologyParams } from '../../hooks/useEffectiveSymbologyParams';
+const Categorized = ({ model, okSignalPromise, layerId, symbologyTab, selectableAttributesAndValues, isStorySegmentOverride, segmentId, }) => {
     const [selectedAttribute, setSelectedAttribute] = useState('');
     const [stopRows, setStopRows] = useState([]);
     const [colorRampOptions, setColorRampOptions] = useState();
@@ -16,34 +16,35 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
         strokeWidth: 1.25,
         radius: 5,
     });
-    const manualStyleRef = useRef(manualStyle);
+    const manualStyleRef = useLatest(manualStyle);
     const [reverseRamp, setReverseRamp] = useState(false);
+    const selectedAttributeRef = useLatest(selectedAttribute);
+    const stopRowsRef = useLatest(stopRows);
+    const colorRampOptionsRef = useLatest(colorRampOptions);
     if (!layerId) {
         return;
     }
     const layer = model.getLayer(layerId);
-    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+    const params = useEffectiveSymbologyParams({
+        model,
+        layerId: layerId,
+        layer,
+        isStorySegmentOverride,
+        segmentId,
+    });
+    if (!params) {
         return;
     }
     useEffect(() => {
-        const valueColorPairs = VectorUtils.buildColorInfo(layer);
+        const valueColorPairs = VectorUtils.buildColorInfo(params);
         setStopRows(valueColorPairs);
-        okSignalPromise.promise.then(okSignal => {
-            okSignal.connect(handleOk, this);
-        });
-        return () => {
-            okSignalPromise.promise.then(okSignal => {
-                okSignal.disconnect(handleOk, this);
-            });
-        };
     }, []);
     useEffect(() => {
-        var _a;
-        if ((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.color) {
-            const fillColor = layer.parameters.color['fill-color'];
-            const circleFillColor = layer.parameters.color['circle-fill-color'];
-            const strokeColor = layer.parameters.color['stroke-color'];
-            const circleStrokeColor = layer.parameters.color['circle-stroke-color'];
+        if (params.color) {
+            const fillColor = params.color['fill-color'];
+            const circleFillColor = params.color['circle-fill-color'];
+            const strokeColor = params.color['stroke-color'];
+            const circleStrokeColor = params.color['circle-stroke-color'];
             const isSimpleColor = (val) => typeof val === 'string' && /^#?[0-9A-Fa-f]{3,8}$/.test(val);
             setManualStyle({
                 fillColor: isSimpleColor(fillColor)
@@ -56,28 +57,19 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
                     : isSimpleColor(circleStrokeColor)
                         ? circleStrokeColor
                         : '#3399CC',
-                strokeWidth: layer.parameters.color['stroke-width'] ||
-                    layer.parameters.color['circle-stroke-width'] ||
+                strokeWidth: params.color['stroke-width'] ||
+                    params.color['circle-stroke-width'] ||
                     1.25,
-                radius: layer.parameters.color['circle-radius'] || 5,
+                radius: params.color['circle-radius'] || 5,
             });
         }
     }, [layerId]);
-    useEffect(() => {
-        manualStyleRef.current = manualStyle;
-    }, [manualStyle]);
     useEffect(() => {
         var _a, _b;
         // We only want number values here
-        const layerParams = layer.parameters;
-        const attribute = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : Object.keys(selectableAttributesAndValues)[0];
+        const attribute = (_b = (_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : Object.keys(selectableAttributesAndValues)[0];
         setSelectedAttribute(attribute);
     }, [selectableAttributesAndValues]);
-    useEffect(() => {
-        selectedAttributeRef.current = selectedAttribute;
-        stopRowsRef.current = stopRows;
-        colorRampOptionsRef.current = colorRampOptions;
-    }, [selectedAttribute, stopRows, colorRampOptions]);
     const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp, setIsLoading) => {
         setColorRampOptions({
             selectedFunction: '',
@@ -91,10 +83,7 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
     };
     const handleOk = () => {
         var _a;
-        if (!layer.parameters) {
-            return;
-        }
-        const newStyle = Object.assign({}, layer.parameters.color);
+        const newStyle = Object.assign({}, params.color);
         if (stopRowsRef.current && stopRowsRef.current.length > 0) {
             // Classification applied (for color)
             const expr = ['case'];
@@ -122,22 +111,31 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
             renderType: 'Categorized',
             value: selectedAttributeRef.current,
             colorRamp: (_a = colorRampOptionsRef.current) === null || _a === void 0 ? void 0 : _a.selectedRamp,
-            symbologyTab,
+            method: symbologyTab,
             reverse: reverseRamp,
         };
-        layer.parameters.symbologyState = symbologyState;
-        layer.parameters.color = newStyle;
-        if (layer.type === 'HeatmapLayer') {
-            layer.type = 'VectorLayer';
-        }
-        model.sharedModel.updateLayer(layerId, layer);
-        cancel();
+        saveSymbology({
+            model,
+            layerId,
+            isStorySegmentOverride,
+            segmentId,
+            payload: {
+                symbologyState,
+                color: newStyle,
+            },
+            mutateLayerBeforeSave: targetLayer => {
+                if (targetLayer.type === 'HeatmapLayer') {
+                    targetLayer.type = 'VectorLayer';
+                }
+            },
+        });
     };
+    useOkSignal(okSignalPromise, handleOk);
     const handleReset = (method) => {
         if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
             return;
         }
-        const newStyle = Object.assign({}, layer.parameters.color);
+        const newStyle = Object.assign({}, params.color);
         if (method === 'color') {
             delete newStyle['fill-color'];
             delete newStyle['stroke-color'];
@@ -190,7 +188,8 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId, symbology
                         React.createElement("input", { type: "checkbox", checked: reverseRamp, onChange: e => setReverseRamp(e.target.checked) }),
                         "Reverse Color Ramp"))),
                 React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-                    React.createElement(ColorRampControls, { layerParams: layer.parameters, modeOptions: [], classifyFunc: buildColorInfoFromClassification, showModeRow: false, showRampSelector: symbologyTab === 'color' }),
+                    "//! only needs symbology state",
+                    React.createElement(ColorRampControls, { layerParams: params, modeOptions: [], classifyFunc: buildColorInfoFromClassification, showModeRow: false, showRampSelector: symbologyTab === 'color' }),
                     React.createElement(StopContainer, { selectedMethod: '', stopRows: stopRows, setStopRows: setStopRows }))));
         }
     })();