@jupytergis/base 0.14.1 → 0.15.0

package/lib/dialogs/symbology/components/color_stops/StopRow.js

@@ -2,7 +2,8 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef } from 'react';
-import { ensureHexColorCode, hexToRgb, } from "../../colorRampUtils";
+import { colorToRgba } from "../../colorRampUtils";
+import RgbaColorPicker from "../color_ramp/RgbaColorPicker";
 const StopRow = ({ index, dataValue, symbologyValue, stopRows, setStopRows, deleteRow, useNumber, }) => {
     const inputRef = useRef(null);
     useEffect(() => {
@@ -13,7 +14,8 @@ const StopRow = ({ index, dataValue, symbologyValue, stopRows, setStopRows, dele
     }, [stopRows]);
     const handleStopChange = (event) => {
         const newRows = [...stopRows];
-        newRows[index].stop = +event.target.value;
+        const value = event.target.value;
+        newRows[index].stop = useNumber ? +value : value;
         setStopRows(newRows);
     };
     const handleBlur = () => {
@@ -31,14 +33,17 @@ const StopRow = ({ index, dataValue, symbologyValue, stopRows, setStopRows, dele
     };
     const handleOutputChange = (event) => {
         const newRows = [...stopRows];
-        useNumber
-            ? (newRows[index].output = +event.target.value)
-            : (newRows[index].output = hexToRgb(event.target.value));
+        newRows[index].output = +event.target.value;
+        setStopRows(newRows);
+    };
+    const handleColorOutputChange = (color) => {
+        const newRows = [...stopRows];
+        newRows[index].output = color;
         setStopRows(newRows);
     };
     return (React.createElement("div", { className: "jp-gis-color-row" },
-        React.createElement("input", { id: `jp-gis-color-value-${index}`, type: "number", value: dataValue, onChange: handleStopChange, onBlur: handleBlur, className: "jp-mod-styled jp-gis-color-row-value-input" }),
-        useNumber ? (React.createElement("input", { type: "number", ref: inputRef, value: symbologyValue, onChange: handleOutputChange, className: "jp-mod-styled jp-gis-color-row-output-input" })) : (React.createElement("input", { id: `jp-gis-color-color-${index}`, ref: inputRef, value: ensureHexColorCode(symbologyValue), type: "color", onChange: handleOutputChange, className: "jp-mod-styled jp-gis-color-row-output-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" }),
+        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/dialogs/symbology/symbologyDialog.d.ts

@@ -25,7 +25,8 @@ export interface ISymbologyWidgetOptions {
     segmentId?: string;
 }
 export interface IStopRow {
-    stop: number;
+    id: string;
+    stop: number | string;
     output: SymbologyValue;
 }
 export declare class SymbologyWidget extends Dialog<boolean> {

package/lib/dialogs/symbology/symbologyUtils.d.ts

@@ -1,5 +1,5 @@
 import { IJGISLayer, IJupyterGISModel, IVectorLayer, IWebGlLayer } from '@jupytergis/schema';
-import { ColorRampName } from './colorRampUtils';
+import { IColorMap } from './colorRampUtils';
 import { IStopRow } from './symbologyDialog';
 /** Payload when saving symbology; shape matches vector or WebGl layer params. */
 export interface ISymbologyPayload {
@@ -29,5 +29,5 @@ export declare namespace VectorUtils {
     const buildRadiusInfo: (layer: IJGISLayer) => IStopRow[];
 }
 export declare namespace Utils {
-    const getValueColorPairs: (stops: number[], selectedRamp: ColorRampName, nClasses: number, reverse?: boolean) => IStopRow[];
+    const getValueColorPairs: (stops: number[], colorRamp: IColorMap, nClasses: number, reverse?: boolean) => IStopRow[];
 }

package/lib/dialogs/symbology/symbologyUtils.js

@@ -1,4 +1,6 @@
+import { UUID } from '@lumino/coreutils';
 import colormap from 'colormap';
+import { findExprNode } from './colorRampUtils';
 const COLOR_EXPR_STOPS_START = 3;
 /**
  * Resolve the effective symbology params for this dialog: either the layer's
@@ -90,35 +92,38 @@ export var VectorUtils;
             if (!color[key]) {
                 continue;
             }
-            switch (color[key][0]) {
-                case 'interpolate':
-                    // First element is interpolate for linear selection
-                    // Second element is type of interpolation (ie linear)
-                    // Third is input value that stop values are compared with
-                    // Fourth and on is value:color pairs
-                    for (let i = COLOR_EXPR_STOPS_START; i < color[key].length; i += 2) {
-                        const pairKey = `${color[key][i]}-${color[key][i + 1]}`;
-                        if (!seenPairs.has(pairKey)) {
-                            valueColorPairs.push({
-                                stop: color[key][i],
-                                output: color[key][i + 1],
-                            });
-                            seenPairs.add(pairKey);
-                        }
+            const interpolate = findExprNode(color[key], 'interpolate');
+            if (interpolate) {
+                // Graduated: value:color pairs starting at index 3
+                for (let i = COLOR_EXPR_STOPS_START; i < interpolate.length; i += 2) {
+                    const pairKey = `${interpolate[i]}-${interpolate[i + 1]}`;
+                    if (!seenPairs.has(pairKey)) {
+                        valueColorPairs.push({
+                            id: UUID.uuid4(),
+                            stop: interpolate[i],
+                            output: interpolate[i + 1],
+                        });
+                        seenPairs.add(pairKey);
                     }
-                    break;
-                case 'case':
-                    for (let i = 1; i < color[key].length - 1; i += 2) {
-                        const pairKey = `${color[key][i][2]}-${color[key][i + 1]}`;
+                }
+            }
+            else {
+                const caseExpr = findExprNode(color[key], 'case');
+                if (caseExpr) {
+                    // Categorized: alternating [condition, color] pairs, last element is fallback
+                    for (let i = 1; i < caseExpr.length - 1; i += 2) {
+                        const condition = caseExpr[i];
+                        const pairKey = `${condition[2]}-${caseExpr[i + 1]}`;
                         if (!seenPairs.has(pairKey)) {
                             valueColorPairs.push({
-                                stop: color[key][i][2],
-                                output: color[key][i + 1],
+                                id: UUID.uuid4(),
+                                stop: condition[2],
+                                output: caseExpr[i + 1],
                             });
                             seenPairs.add(pairKey);
                         }
                     }
-                    break;
+                }
             }
         }
         return valueColorPairs;
@@ -141,6 +146,7 @@ export var VectorUtils;
         }
         for (let i = COLOR_EXPR_STOPS_START; i < circleRadius.length; i += 2) {
             const obj = {
+                id: UUID.uuid4(),
                 stop: circleRadius[i],
                 output: circleRadius[i + 1],
             };
@@ -151,29 +157,41 @@ export var VectorUtils;
 })(VectorUtils || (VectorUtils = {}));
 export var Utils;
 (function (Utils) {
-    Utils.getValueColorPairs = (stops, selectedRamp, nClasses, reverse = false) => {
-        let colorMap = colormap({
-            colormap: selectedRamp,
-            nshades: nClasses > 9 ? nClasses : 9,
-            format: 'rgba',
-        });
+    Utils.getValueColorPairs = (stops, colorRamp, nClasses, reverse = false) => {
+        const isCategorical = colorRamp.type === 'categorical';
+        let colorMap;
+        if (isCategorical) {
+            colorMap = [...colorRamp.colors];
+            if (colorMap.length < nClasses) {
+                colorMap = Array.from({ length: nClasses }, (_, i) => {
+                    return colorMap[i % colorMap.length];
+                });
+            }
+            else {
+                colorMap = colorMap.slice(0, nClasses);
+            }
+        }
+        else {
+            const nShades = Math.max(nClasses, 9);
+            colorMap = colormap({
+                colormap: colorRamp.name,
+                nshades: nShades,
+                format: 'rgba',
+            });
+        }
         if (reverse) {
             colorMap = [...colorMap].reverse();
         }
         const valueColorPairs = [];
-        // colormap requires 9 classes to generate the ramp
-        // so we do some tomfoolery to make it work with less than 9 stops
-        if (nClasses < 9) {
-            const midIndex = Math.floor(nClasses / 2);
-            // Get the first n/2 elements from the second array
-            const firstPart = colorMap.slice(0, midIndex);
-            // Get the last n/2 elements from the second array
-            const secondPart = colorMap.slice(colorMap.length - (stops.length - firstPart.length));
-            // Create the new array by combining the first and last parts
-            colorMap = firstPart.concat(secondPart);
-        }
         for (let i = 0; i < nClasses; i++) {
-            valueColorPairs.push({ stop: stops[i], output: colorMap[i] });
+            const colorIndex = isCategorical
+                ? i
+                : Math.round((i / (nClasses - 1)) * (colorMap.length - 1));
+            valueColorPairs.push({
+                id: UUID.uuid4(),
+                stop: stops[i],
+                output: colorMap[colorIndex],
+            });
         }
         return valueColorPairs;
     };

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

@@ -1,4 +1,5 @@
 import { Button } from '@jupyterlab/ui-components';
+import { UUID } from '@lumino/coreutils';
 import React, { useEffect, useState } from 'react';
 import { GeoTiffClassifications } from "../../classificationModes";
 import ColorRampControls from "../../components/color_ramp/ColorRampControls";
@@ -10,6 +11,7 @@ import BandRow from "../components/BandRow";
 import { LoadingOverlay } from "../../../../shared/components/loading";
 import { useLatest } from "../../../../shared/hooks/useLatest";
 import { GlobalStateDbManager } from "../../../../store";
+import { getColorMapList } from '../../colorRampUtils';
 import { useEffectiveSymbologyParams } from '../../hooks/useEffectiveSymbologyParams';
 const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segmentId, }) => {
     if (!layerId) {
@@ -83,6 +85,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegment
                 // Sixth and on is value:color pairs
                 for (let i = 5; i < color.length; i += 2) {
                     const obj = {
+                        id: UUID.uuid4(),
                         stop: scaleValue(Number(color[i]), isQuantile),
                         output: color[i + 1],
                     };
@@ -103,6 +106,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegment
                         ? color[i][2]
                         : color[i]);
                     const obj = {
+                        id: UUID.uuid4(),
                         stop: scaleValue(stopVal, isQuantile),
                         output: color[i + 1],
                     };
@@ -211,6 +215,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegment
     const addStopRow = () => {
         setStopRows([
             {
+                id: UUID.uuid4(),
                 stop: 0,
                 output: [0, 0, 0, 1],
             },
@@ -252,7 +257,11 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegment
                 return;
         }
         setIsLoading(false);
-        const valueColorPairs = Utils.getValueColorPairs(stops, selectedRamp, nClasses, reverseRamp);
+        const colorRamp = getColorMapList().find(c => c.name === selectedRamp);
+        if (!colorRamp) {
+            return;
+        }
+        const valueColorPairs = Utils.getValueColorPairs(stops, colorRamp, nClasses, reverseRamp);
         setStopRows(valueColorPairs);
     };
     const scaleValue = (bandValue, isQuantile) => {
@@ -265,6 +274,9 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegment
         return (bandValue * (max - min)) / (1 - 0) + min;
     };
     const unscaleValue = (value, isQuantile) => {
+        if (typeof value !== 'number') {
+            throw new Error('unscaleValue expects a number');
+        }
         const currentBand = bandRowsRef.current[selectedBand - 1];
         const min = isQuantile ? 1 : currentBand.stats.minimum;
         const max = isQuantile ? 65535 : currentBand.stats.maximum;
@@ -294,7 +306,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegment
                             ? '='
                             : ''),
                 React.createElement("span", null, "Output Value")),
-            stopRows.map((stop, index) => (React.createElement(StopRow, { key: `${index}-${stop.output}`, index: index, dataValue: stop.stop, symbologyValue: stop.output, stopRows: stopRows, setStopRows: setStopRows, deleteRow: () => deleteStopRow(index) })))),
+            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) })))),
         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"))));
 };

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

@@ -1,11 +1,22 @@
 import React, { useEffect, useState } from 'react';
+import { colorToRgba, DEFAULT_COLOR, DEFAULT_STROKE_WIDTH, isColor, } from "../../colorRampUtils";
+import RgbaColorPicker from "../../components/color_ramp/RgbaColorPicker";
 import { useOkSignal } from "../../hooks/useOkSignal";
 import { saveSymbology } from "../../symbologyUtils";
 import ValueSelect from "../components/ValueSelect";
 import { useLatest } from "../../../../shared/hooks/useLatest";
+const TRANSPARENT = [0, 0, 0, 0];
 const Canonical = ({ model, okSignalPromise, layerId, selectableAttributesAndValues, isStorySegmentOverride, segmentId, }) => {
     const [selectedValue, setSelectedValue] = useState('');
+    const [fallbackColor, setFallbackColor] = useState(TRANSPARENT);
+    const [strokeFollowsFill, setStrokeFollowsFill] = useState(true);
+    const [strokeColor, setStrokeColor] = useState(DEFAULT_COLOR);
+    const [strokeWidth, setStrokeWidth] = useState(String(DEFAULT_STROKE_WIDTH));
     const selectedValueRef = useLatest(selectedValue);
+    const fallbackColorRef = useLatest(fallbackColor);
+    const strokeFollowsFillRef = useLatest(strokeFollowsFill);
+    const strokeColorRef = useLatest(strokeColor);
+    const strokeWidthRef = useLatest(strokeWidth);
     if (!layerId) {
         return;
     }
@@ -14,23 +25,49 @@ const Canonical = ({ model, okSignalPromise, layerId, selectableAttributesAndVal
         return;
     }
     useEffect(() => {
-        var _a, _b;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         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];
+        const savedValue = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.value;
+        const value = savedValue && savedValue in selectableAttributesAndValues
+            ? savedValue
+            : Object.keys(selectableAttributesAndValues)[0];
         setSelectedValue(value);
+        setFallbackColor(colorToRgba((_c = (_b = layerParams.symbologyState) === null || _b === void 0 ? void 0 : _b.fallbackColor) !== null && _c !== void 0 ? _c : TRANSPARENT));
+        setStrokeFollowsFill((_e = (_d = layerParams.symbologyState) === null || _d === void 0 ? void 0 : _d.strokeFollowsFill) !== null && _e !== void 0 ? _e : true);
+        const savedStroke = (_f = layerParams.color) === null || _f === void 0 ? void 0 : _f['stroke-color'];
+        setStrokeColor(isColor(savedStroke) ? colorToRgba(savedStroke) : DEFAULT_COLOR);
+        setStrokeWidth(String((_h = (_g = layerParams.color) === null || _g === void 0 ? void 0 : _g['stroke-width']) !== null && _h !== void 0 ? _h : DEFAULT_STROKE_WIDTH));
     }, [selectableAttributesAndValues]);
     const handleOk = () => {
         if (!layer.parameters) {
             return;
         }
-        const colorExpr = ['get', selectedValueRef.current];
+        // Use coalesce so that features missing the color property (e.g. boundary
+        // or line features in a multi-layer MVT) fall back to the user-chosen color
+        // instead of returning undefined, which would cause OL to throw at render time.
+        const colorExpr = [
+            'coalesce',
+            ['get', selectedValueRef.current],
+            fallbackColorRef.current,
+        ];
         const newStyle = Object.assign({}, layer.parameters.color);
         newStyle['fill-color'] = colorExpr;
-        newStyle['stroke-color'] = colorExpr;
         newStyle['circle-fill-color'] = colorExpr;
+        if (strokeFollowsFillRef.current) {
+            newStyle['stroke-color'] = colorExpr;
+            newStyle['circle-stroke-color'] = colorExpr;
+        }
+        else {
+            newStyle['stroke-color'] = strokeColorRef.current;
+            newStyle['circle-stroke-color'] = strokeColorRef.current;
+            newStyle['stroke-width'] = Math.max(0, parseFloat(strokeWidthRef.current));
+            newStyle['circle-stroke-width'] = Math.max(0, parseFloat(strokeWidthRef.current));
+        }
         const symbologyState = {
             renderType: 'Canonical',
             value: selectedValueRef.current,
+            fallbackColor: fallbackColorRef.current,
+            strokeFollowsFill: strokeFollowsFillRef.current,
         };
         saveSymbology({
             model,
@@ -60,6 +97,34 @@ const Canonical = ({ model, okSignalPromise, layerId, selectableAttributesAndVal
     })();
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
         React.createElement("p", null, "Color features based on an attribute containing a hex color code."),
-        body));
+        body,
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Stroke Color:"),
+            React.createElement("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 8,
+                    flex: '1 0 50%',
+                    maxWidth: '50%',
+                } },
+                React.createElement("div", { style: {
+                        opacity: strokeFollowsFill ? 0.3 : 1,
+                        pointerEvents: strokeFollowsFill ? 'none' : 'auto',
+                    } },
+                    React.createElement(RgbaColorPicker, { color: strokeColor, onChange: setStrokeColor })),
+                React.createElement("label", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 4,
+                        whiteSpace: 'nowrap',
+                    } },
+                    React.createElement("input", { type: "checkbox", checked: strokeFollowsFill, onChange: e => setStrokeFollowsFill(e.target.checked) }),
+                    "match fill"))),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Stroke Width:"),
+            React.createElement("input", { type: "text", className: "jp-mod-styled", value: strokeWidth, onChange: e => setStrokeWidth(e.target.value) })),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", null, "Fallback Color:"),
+            React.createElement(RgbaColorPicker, { color: fallbackColor, onChange: setFallbackColor }))));
 };
 export default Canonical;

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

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react';
+import { colorToRgba, DEFAULT_COLOR, DEFAULT_STROKE_WIDTH, getColorMapList, isColor, } from "../../colorRampUtils";
 import ColorRampControls from "../../components/color_ramp/ColorRampControls";
+import RgbaColorPicker from "../../components/color_ramp/RgbaColorPicker";
 import StopContainer from "../../components/color_stops/StopContainer";
 import { useOkSignal } from "../../hooks/useOkSignal";
 import { Utils, VectorUtils, saveSymbology, } from "../../symbologyUtils";
@@ -10,10 +12,14 @@ const Categorized = ({ model, okSignalPromise, layerId, symbologyTab, selectable
     const [selectedAttribute, setSelectedAttribute] = useState('');
     const [stopRows, setStopRows] = useState([]);
     const [colorRampOptions, setColorRampOptions] = useState();
+    const [fallbackColor, setFallbackColor] = useState([0, 0, 0, 0]);
+    const [strokeFollowsFill, setStrokeFollowsFill] = useState(false);
+    const fallbackColorRef = useLatest(fallbackColor);
+    const strokeFollowsFillRef = useLatest(strokeFollowsFill);
     const [manualStyle, setManualStyle] = useState({
-        fillColor: '#3399CC',
-        strokeColor: '#3399CC',
-        strokeWidth: 1.25,
+        fillColor: DEFAULT_COLOR,
+        strokeColor: DEFAULT_COLOR,
+        strokeWidth: String(DEFAULT_STROKE_WIDTH),
         radius: 5,
     });
     const manualStyleRef = useLatest(manualStyle);
@@ -39,35 +45,40 @@ const Categorized = ({ model, okSignalPromise, layerId, symbologyTab, selectable
         setStopRows(valueColorPairs);
     }, []);
     useEffect(() => {
+        var _a, _b, _c, _d;
         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);
+            const effectiveFill = isColor(fillColor)
+                ? fillColor
+                : isColor(circleFillColor)
+                    ? circleFillColor
+                    : DEFAULT_COLOR;
+            const effectiveStroke = isColor(strokeColor)
+                ? strokeColor
+                : isColor(circleStrokeColor)
+                    ? circleStrokeColor
+                    : DEFAULT_COLOR;
             setManualStyle({
-                fillColor: isSimpleColor(fillColor)
-                    ? fillColor
-                    : isSimpleColor(circleFillColor)
-                        ? circleFillColor
-                        : '#3399CC',
-                strokeColor: isSimpleColor(strokeColor)
-                    ? strokeColor
-                    : isSimpleColor(circleStrokeColor)
-                        ? circleStrokeColor
-                        : '#3399CC',
-                strokeWidth: params.color['stroke-width'] ||
+                fillColor: colorToRgba(effectiveFill),
+                strokeColor: colorToRgba(effectiveStroke),
+                strokeWidth: String(params.color['stroke-width'] ||
                     params.color['circle-stroke-width'] ||
-                    1.25,
+                    DEFAULT_STROKE_WIDTH),
                 radius: params.color['circle-radius'] || 5,
             });
         }
+        setFallbackColor(colorToRgba((_b = (_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.fallbackColor) !== null && _b !== void 0 ? _b : [0, 0, 0, 0]));
+        setStrokeFollowsFill((_d = (_c = params.symbologyState) === null || _c === void 0 ? void 0 : _c.strokeFollowsFill) !== null && _d !== void 0 ? _d : false);
     }, [layerId]);
     useEffect(() => {
         var _a;
-        // We only want number values here
-        const attribute = ((_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.value) ||
-            Object.keys(selectableAttributesAndValues)[0];
+        const savedValue = (_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.value;
+        const attribute = savedValue && savedValue in selectableAttributesAndValues
+            ? savedValue
+            : Object.keys(selectableAttributesAndValues)[0];
         setSelectedAttribute(attribute);
     }, [selectableAttributesAndValues]);
     const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp, reverseRamp, setIsLoading) => {
@@ -78,8 +89,15 @@ const Categorized = ({ model, okSignalPromise, layerId, symbologyTab, selectable
             selectedMode,
             reverseRamp,
         });
+        if (!selectableAttributesAndValues[selectedAttribute]) {
+            return;
+        }
         const stops = Array.from(selectableAttributesAndValues[selectedAttribute]).sort((a, b) => a - b);
-        const valueColorPairs = Utils.getValueColorPairs(stops, selectedRamp, stops.length, reverseRamp);
+        const colorRamp = getColorMapList().find(c => c.name === selectedRamp);
+        if (!colorRamp) {
+            return;
+        }
+        const valueColorPairs = Utils.getValueColorPairs(stops, colorRamp, stops.length, reverseRamp);
         setStopRows(valueColorPairs);
     };
     const handleOk = () => {
@@ -93,27 +111,36 @@ const Categorized = ({ model, okSignalPromise, layerId, symbologyTab, selectable
                 expr.push(stop.output);
             });
             if (symbologyTab === 'color') {
-                expr.push([0, 0, 0, 0.0]); // fallback color
+                expr.push(fallbackColorRef.current);
                 newStyle['fill-color'] = expr;
                 newStyle['circle-fill-color'] = expr;
-                newStyle['stroke-color'] = expr;
-                newStyle['circle-stroke-color'] = expr;
+                if (strokeFollowsFillRef.current) {
+                    newStyle['stroke-color'] = expr;
+                    newStyle['circle-stroke-color'] = expr;
+                }
+                else {
+                    newStyle['stroke-color'] = manualStyleRef.current.strokeColor;
+                    newStyle['circle-stroke-color'] = manualStyleRef.current.strokeColor;
+                }
             }
         }
         else {
             newStyle['fill-color'] = manualStyleRef.current.fillColor;
             newStyle['circle-fill-color'] = manualStyleRef.current.fillColor;
+            newStyle['stroke-color'] = manualStyleRef.current.strokeColor;
+            newStyle['circle-stroke-color'] = manualStyleRef.current.strokeColor;
         }
-        newStyle['stroke-width'] = manualStyleRef.current.strokeWidth;
-        newStyle['circle-stroke-width'] = manualStyleRef.current.strokeWidth;
+        newStyle['stroke-width'] = Math.max(0, parseFloat(manualStyleRef.current.strokeWidth));
+        newStyle['circle-stroke-width'] = Math.max(0, parseFloat(manualStyleRef.current.strokeWidth));
         newStyle['circle-radius'] = manualStyleRef.current.radius;
-        newStyle['circle-stroke-color'] = manualStyleRef.current.strokeColor;
         const symbologyState = {
             renderType: 'Categorized',
             value: selectedAttributeRef.current,
             colorRamp: (_a = colorRampOptionsRef.current) === null || _a === void 0 ? void 0 : _a.selectedRamp,
             method: symbologyTab,
             reverseRamp: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.reverseRamp,
+            fallbackColor: fallbackColorRef.current,
+            strokeFollowsFill: strokeFollowsFillRef.current,
         };
         saveSymbology({
             model,
@@ -165,20 +192,40 @@ const Categorized = ({ model, okSignalPromise, layerId, symbologyTab, selectable
                     symbologyTab === 'color' && (React.createElement(React.Fragment, null,
                         React.createElement("div", { className: "jp-gis-symbology-row" },
                             React.createElement("label", null, "Fill Color:"),
-                            React.createElement("input", { type: "color", className: "jp-mod-styled", value: manualStyle.fillColor, onChange: e => {
+                            React.createElement(RgbaColorPicker, { color: manualStyle.fillColor, onChange: color => {
                                     handleReset('color');
-                                    setManualStyle(prev => (Object.assign(Object.assign({}, prev), { fillColor: e.target.value })));
+                                    setManualStyle(prev => (Object.assign(Object.assign({}, prev), { fillColor: color })));
                                 } })),
                         React.createElement("div", { className: "jp-gis-symbology-row" },
                             React.createElement("label", null, "Stroke Color:"),
-                            React.createElement("input", { type: "color", className: "jp-mod-styled", value: manualStyle.strokeColor, onChange: e => {
-                                    setManualStyle(prev => (Object.assign(Object.assign({}, prev), { strokeColor: e.target.value })));
-                                } })),
+                            React.createElement("div", { style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 8,
+                                    flex: '1 0 50%',
+                                    maxWidth: '50%',
+                                } },
+                                React.createElement("div", { style: {
+                                        opacity: strokeFollowsFill ? 0.3 : 1,
+                                        pointerEvents: strokeFollowsFill ? 'none' : 'auto',
+                                    } },
+                                    React.createElement(RgbaColorPicker, { color: manualStyle.strokeColor, onChange: color => setManualStyle(prev => (Object.assign(Object.assign({}, prev), { strokeColor: color }))) })),
+                                React.createElement("label", { style: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: 4,
+                                        whiteSpace: 'nowrap',
+                                    } },
+                                    React.createElement("input", { type: "checkbox", checked: strokeFollowsFill, onChange: e => setStrokeFollowsFill(e.target.checked) }),
+                                    "match fill"))),
                         React.createElement("div", { className: "jp-gis-symbology-row" },
                             React.createElement("label", null, "Stroke Width:"),
-                            React.createElement("input", { type: "number", className: "jp-mod-styled", value: manualStyle.strokeWidth, onChange: e => {
-                                    setManualStyle(prev => (Object.assign(Object.assign({}, prev), { strokeWidth: +e.target.value })));
-                                } })))),
+                            React.createElement("input", { type: "text", className: "jp-mod-styled", value: manualStyle.strokeWidth, onChange: e => {
+                                    setManualStyle(prev => (Object.assign(Object.assign({}, prev), { strokeWidth: e.target.value })));
+                                } })),
+                        React.createElement("div", { className: "jp-gis-symbology-row" },
+                            React.createElement("label", null, "Fallback Color:"),
+                            React.createElement(RgbaColorPicker, { color: fallbackColor, onChange: setFallbackColor })))),
                     symbologyTab === 'radius' && (React.createElement("div", { className: "jp-gis-symbology-row" },
                         React.createElement("label", null, "Circle Radius:"),
                         React.createElement("input", { type: "number", className: "jp-mod-styled", value: manualStyle.radius, onChange: e => {