@jupytergis/base 0.5.0 → 0.6.0

package/lib/dialogs/symbology/vector_layer/types/Categorized.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ISymbologyDialogProps } from '../../symbologyDialog';
-declare const Categorized: ({ model, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
+import { ISymbologyTabbedDialogWithAttributesProps } from "../../symbologyDialog";
+declare const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps>;
 export default Categorized;

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

@@ -1,18 +1,22 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { getNumericFeatureAttributes } from '../../../../tools';
-import ColorRamp from '../../components/color_ramp/ColorRamp';
-import StopContainer from '../../components/color_stops/StopContainer';
-import { useGetProperties } from '../../hooks/useGetProperties';
-import { Utils, VectorUtils } from '../../symbologyUtils';
-import ValueSelect from '../components/ValueSelect';
-const Categorized = ({ model, state, okSignalPromise, cancel, layerId }) => {
-    const selectedValueRef = useRef();
+import ColorRamp from "../../components/color_ramp/ColorRamp";
+import StopContainer from "../../components/color_stops/StopContainer";
+import { Utils, VectorUtils } 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();
-    const [selectedValue, setSelectedValue] = useState('');
+    const [selectedAttribute, setSelectedAttribute] = useState('');
     const [stopRows, setStopRows] = useState([]);
     const [colorRampOptions, setColorRampOptions] = useState();
-    const [features, setFeatures] = useState({});
+    const [manualStyle, setManualStyle] = useState({
+        fillColor: '#3399CC',
+        strokeColor: '#3399CC',
+        strokeWidth: 1.25,
+        radius: 5,
+    });
+    const manualStyleRef = useRef(manualStyle);
     if (!layerId) {
         return;
     }
@@ -20,10 +24,6 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId }) => {
     if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
         return;
     }
-    const { featureProperties } = useGetProperties({
-        layerId,
-        model: model
-    });
     useEffect(() => {
         const valueColorPairs = VectorUtils.buildColorInfo(layer);
         setStopRows(valueColorPairs);
@@ -36,70 +36,165 @@ const Categorized = ({ model, state, okSignalPromise, cancel, layerId }) => {
             });
         };
     }, []);
+    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'];
+            const isSimpleColor = (val) => typeof val === 'string' && /^#?[0-9A-Fa-f]{3,8}$/.test(val);
+            setManualStyle({
+                fillColor: isSimpleColor(fillColor)
+                    ? fillColor
+                    : isSimpleColor(circleFillColor)
+                        ? circleFillColor
+                        : '#3399CC',
+                strokeColor: isSimpleColor(strokeColor)
+                    ? strokeColor
+                    : isSimpleColor(circleStrokeColor)
+                        ? circleStrokeColor
+                        : '#3399CC',
+                strokeWidth: layer.parameters.color['stroke-width'] ||
+                    layer.parameters.color['circle-stroke-width'] ||
+                    1.25,
+                radius: layer.parameters.color['circle-radius'] || 5,
+            });
+        }
+    }, [layerId]);
+    useEffect(() => {
+        manualStyleRef.current = manualStyle;
+    }, [manualStyle]);
     useEffect(() => {
         var _a, _b;
         // We only want number values here
-        const numericFeatures = getNumericFeatureAttributes(featureProperties);
-        setFeatures(numericFeatures);
         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(numericFeatures)[0];
-        setSelectedValue(value);
-    }, [featureProperties]);
+        const attribute = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : Object.keys(selectableAttributesAndValues)[0];
+        setSelectedAttribute(attribute);
+    }, [selectableAttributesAndValues]);
     useEffect(() => {
-        selectedValueRef.current = selectedValue;
+        selectedAttributeRef.current = selectedAttribute;
         stopRowsRef.current = stopRows;
         colorRampOptionsRef.current = colorRampOptions;
-    }, [selectedValue, stopRows, colorRampOptions]);
+    }, [selectedAttribute, stopRows, colorRampOptions]);
     const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp, setIsLoading) => {
         setColorRampOptions({
             selectedFunction: '',
             selectedRamp,
             numberOfShades: '',
-            selectedMode: ''
+            selectedMode: '',
         });
-        const stops = Array.from(features[selectedValue]).sort((a, b) => a - b);
+        const stops = Array.from(selectableAttributesAndValues[selectedAttribute]).sort((a, b) => a - b);
         const valueColorPairs = Utils.getValueColorPairs(stops, selectedRamp, stops.length);
         setStopRows(valueColorPairs);
     };
     const handleOk = () => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         if (!layer.parameters) {
             return;
         }
-        const colorExpr = [];
-        colorExpr.push('case');
-        (_a = stopRowsRef.current) === null || _a === void 0 ? void 0 : _a.map(stop => {
-            colorExpr.push(['==', ['get', selectedValueRef.current], stop.stop]);
-            colorExpr.push(stop.output);
-        });
-        // fallback value
-        colorExpr.push([0, 0, 0, 0.0]);
         const newStyle = Object.assign({}, layer.parameters.color);
-        if (layer.parameters.type === 'fill') {
-            newStyle['fill-color'] = colorExpr;
-        }
-        if (layer.parameters.type === 'line') {
-            newStyle['stroke-color'] = colorExpr;
+        if (stopRowsRef.current && stopRowsRef.current.length > 0) {
+            // Classification applied (for color)
+            const expr = ['case'];
+            stopRowsRef.current.forEach(stop => {
+                expr.push(['==', ['get', selectedAttributeRef.current], stop.stop]);
+                expr.push(stop.output);
+            });
+            if (symbologyTab === 'color') {
+                expr.push([0, 0, 0, 0.0]); // fallback color
+                newStyle['fill-color'] = expr;
+                newStyle['circle-fill-color'] = expr;
+                newStyle['stroke-color'] = expr;
+                newStyle['circle-stroke-color'] = expr;
+            }
         }
-        if (layer.parameters.type === 'circle') {
-            newStyle['circle-fill-color'] = colorExpr;
+        else {
+            newStyle['fill-color'] = manualStyleRef.current.fillColor;
+            newStyle['circle-fill-color'] = manualStyleRef.current.fillColor;
         }
+        newStyle['stroke-width'] = manualStyleRef.current.strokeWidth;
+        newStyle['circle-stroke-width'] = manualStyleRef.current.strokeWidth;
+        newStyle['circle-radius'] = manualStyleRef.current.radius;
+        newStyle['circle-stroke-color'] = manualStyleRef.current.strokeColor;
         const symbologyState = {
             renderType: 'Categorized',
-            value: selectedValueRef.current,
-            colorRamp: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.selectedRamp,
-            nClasses: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.numberOfShades,
-            mode: (_d = colorRampOptionsRef.current) === null || _d === void 0 ? void 0 : _d.selectedMode
+            value: selectedAttributeRef.current,
+            colorRamp: (_a = colorRampOptionsRef.current) === null || _a === void 0 ? void 0 : _a.selectedRamp,
+            nClasses: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.numberOfShades,
+            mode: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.selectedMode,
+            symbologyTab,
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = newStyle;
-        layer.type = 'VectorLayer';
+        if (layer.type === 'HeatmapLayer') {
+            layer.type = 'VectorLayer';
+        }
         model.sharedModel.updateLayer(layerId, layer);
         cancel();
     };
+    const handleReset = (method) => {
+        if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+            return;
+        }
+        const newStyle = Object.assign({}, layer.parameters.color);
+        if (method === 'color') {
+            console.log('delecol');
+            delete newStyle['fill-color'];
+            delete newStyle['stroke-color'];
+            delete newStyle['circle-fill-color'];
+            delete newStyle['circle-stroke-color'];
+            setStopRows([]);
+            // Reset color classification options
+            if (layer.parameters.symbologyState) {
+                layer.parameters.symbologyState.colorRamp = undefined;
+                layer.parameters.symbologyState.nClasses = undefined;
+                layer.parameters.symbologyState.mode = undefined;
+            }
+        }
+        if (method === 'radius') {
+            delete newStyle['circle-radius'];
+        }
+        layer.parameters.color = newStyle;
+        model.sharedModel.updateLayer(layerId, layer);
+    };
+    const body = (() => {
+        if (Object.keys(selectableAttributesAndValues).length === 0) {
+            return (React.createElement("p", { className: "errors" }, "This symbology type is not available; no attributes contain numeric values."));
+        }
+        else {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(ValueSelect, { featureProperties: selectableAttributesAndValues, selectedValue: selectedAttribute, setSelectedValue: setSelectedAttribute }),
+                React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+                    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 => {
+                                    handleReset('color');
+                                    setManualStyle(prev => (Object.assign(Object.assign({}, prev), { fillColor: e.target.value })));
+                                } })),
+                        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", { 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 })));
+                                } })))),
+                    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 => {
+                                setManualStyle(prev => (Object.assign(Object.assign({}, prev), { radius: +e.target.value })));
+                            } })))),
+                React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+                    React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: [], classifyFunc: buildColorInfoFromClassification, showModeRow: false, showRampSelector: symbologyTab === 'color' }),
+                    React.createElement(StopContainer, { selectedMethod: '', stopRows: stopRows, setStopRows: setStopRows }))));
+        }
+    })();
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement(ValueSelect, { featureProperties: features, selectedValue: selectedValue, setSelectedValue: setSelectedValue }),
-        React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: [], classifyFunc: buildColorInfoFromClassification, showModeRow: false }),
-        React.createElement(StopContainer, { selectedMethod: '', stopRows: stopRows, setStopRows: setStopRows })));
+        React.createElement("p", null, "Color features based on an attribute containing unique values."),
+        body));
 };
 export default Categorized;

package/lib/dialogs/symbology/vector_layer/types/Graduated.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ISymbologyDialogProps } from '../../symbologyDialog';
-declare const Graduated: ({ model, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
+import { ISymbologyTabbedDialogWithAttributesProps } from "../../symbologyDialog";
+declare const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps>;
 export default Graduated;

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

@@ -1,29 +1,36 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { getNumericFeatureAttributes } from '../../../../tools';
-import { VectorClassifications } from '../../classificationModes';
-import ColorRamp from '../../components/color_ramp/ColorRamp';
-import StopContainer from '../../components/color_stops/StopContainer';
-import { useGetProperties } from '../../hooks/useGetProperties';
-import { Utils, VectorUtils } from '../../symbologyUtils';
-import ValueSelect from '../components/ValueSelect';
-const Graduated = ({ model, state, okSignalPromise, cancel, layerId }) => {
+import { VectorClassifications } from "../../classificationModes";
+import ColorRamp from "../../components/color_ramp/ColorRamp";
+import StopContainer from "../../components/color_stops/StopContainer";
+import { Utils, VectorUtils } from "../../symbologyUtils";
+import ValueSelect from "../components/ValueSelect";
+const Graduated = ({ model, state, okSignalPromise, cancel, layerId, symbologyTab, selectableAttributesAndValues, }) => {
     const modeOptions = [
         'quantile',
         'equal interval',
         'jenks',
         'pretty',
-        'logarithmic'
+        'logarithmic',
     ];
-    const selectedValueRef = useRef();
-    const selectedMethodRef = useRef();
-    const stopRowsRef = useRef();
+    const selectableAttributeRef = useRef();
+    const symbologyTabRef = useRef();
+    const colorStopRowsRef = useRef([]);
+    const radiusStopRowsRef = useRef([]);
     const colorRampOptionsRef = useRef();
-    const [selectedValue, setSelectedValue] = useState('');
-    const [selectedMethod, setSelectedMethod] = useState('color');
-    const [stopRows, setStopRows] = useState([]);
-    const [methodOptions, setMethodOptions] = useState(['color']);
-    const [features, setFeatures] = useState({});
+    const [selectedAttribute, setSelectedAttribute] = useState('');
+    const [colorStopRows, setColorStopRows] = useState([]);
+    const [radiusStopRows, setRadiusStopRows] = useState([]);
     const [colorRampOptions, setColorRampOptions] = useState();
+    const [colorManualStyle, setColorManualStyle] = useState({
+        fillColor: '#3399CC',
+        strokeColor: '#3399CC',
+        strokeWidth: 1.25,
+    });
+    const [radiusManualStyle, setRadiusManualStyle] = useState({
+        radius: 5,
+    });
+    const colorManualStyleRef = useRef(colorManualStyle);
+    const radiusManualStyleRef = useRef(radiusManualStyle);
     if (!layerId) {
         return;
     }
@@ -31,22 +38,8 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId }) => {
     if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
         return;
     }
-    const { featureProperties } = useGetProperties({
-        layerId,
-        model: model
-    });
     useEffect(() => {
-        var _a, _b;
-        let stopOutputPairs = [];
-        const layerParams = layer.parameters;
-        const method = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.method) !== null && _b !== void 0 ? _b : 'color';
-        if (method === 'color') {
-            stopOutputPairs = VectorUtils.buildColorInfo(layer);
-        }
-        if (method === 'radius') {
-            stopOutputPairs = VectorUtils.buildRadiusInfo(layer);
-        }
-        setStopRows(stopOutputPairs);
+        updateStopRowsBasedOnLayer();
         okSignalPromise.promise.then(okSignal => {
             okSignal.connect(handleOk, this);
         });
@@ -57,68 +50,119 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId }) => {
         };
     }, []);
     useEffect(() => {
-        selectedValueRef.current = selectedValue;
-        selectedMethodRef.current = selectedMethod;
-        stopRowsRef.current = stopRows;
+        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'];
+            const isSimpleColor = (val) => typeof val === 'string' && /^#?[0-9A-Fa-f]{3,8}$/.test(val);
+            setColorManualStyle({
+                fillColor: isSimpleColor(fillColor)
+                    ? fillColor
+                    : isSimpleColor(circleFillColor)
+                        ? circleFillColor
+                        : '#3399CC',
+                strokeColor: isSimpleColor(strokeColor)
+                    ? strokeColor
+                    : isSimpleColor(circleStrokeColor)
+                        ? circleStrokeColor
+                        : '#3399CC',
+                strokeWidth: layer.parameters.color['stroke-width'] ||
+                    layer.parameters.color['circle-stroke-width'] ||
+                    1.25,
+            });
+            setRadiusManualStyle({
+                radius: layer.parameters.color['circle-radius'] || 5,
+            });
+        }
+    }, [layerId]);
+    useEffect(() => {
+        colorStopRowsRef.current = colorStopRows;
+        radiusStopRowsRef.current = radiusStopRows;
+        selectableAttributeRef.current = selectedAttribute;
+        symbologyTabRef.current = symbologyTab;
         colorRampOptionsRef.current = colorRampOptions;
-    }, [selectedValue, selectedMethod, stopRows, colorRampOptions]);
+    }, [
+        colorStopRows,
+        radiusStopRows,
+        selectedAttribute,
+        symbologyTab,
+        colorRampOptions,
+    ]);
+    useEffect(() => {
+        colorManualStyleRef.current = colorManualStyle;
+        radiusManualStyleRef.current = radiusManualStyle;
+    }, [colorManualStyle, radiusManualStyle]);
     useEffect(() => {
-        var _a, _b, _c, _d, _e;
-        // Set up method options
-        if (((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.type) === 'circle') {
-            const options = ['color', 'radius'];
-            setMethodOptions(options);
-        }
-        // We only want number values here
-        const numericFeatures = getNumericFeatureAttributes(featureProperties);
-        setFeatures(numericFeatures);
+        var _a, _b;
         const layerParams = layer.parameters;
-        const value = (_c = (_b = layerParams.symbologyState) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : Object.keys(numericFeatures)[0];
-        const method = (_e = (_d = layerParams.symbologyState) === null || _d === void 0 ? void 0 : _d.method) !== null && _e !== void 0 ? _e : 'color';
-        setSelectedValue(value);
-        setSelectedMethod(method);
-    }, [featureProperties]);
+        const attribute = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : Object.keys(selectableAttributesAndValues)[0];
+        setSelectedAttribute(attribute);
+    }, [selectableAttributesAndValues]);
+    const updateStopRowsBasedOnLayer = () => {
+        if (!layer) {
+            return;
+        }
+        setColorStopRows(VectorUtils.buildColorInfo(layer));
+        setRadiusStopRows(VectorUtils.buildRadiusInfo(layer));
+    };
     const handleOk = () => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         if (!layer.parameters) {
             return;
         }
-        const colorExpr = [];
-        colorExpr.push('interpolate');
-        colorExpr.push(['linear']);
-        colorExpr.push(['get', selectedValueRef.current]);
-        (_a = stopRowsRef.current) === null || _a === void 0 ? void 0 : _a.map(stop => {
-            colorExpr.push(stop.stop);
-            colorExpr.push(stop.output);
-        });
         const newStyle = Object.assign({}, layer.parameters.color);
-        if (selectedMethodRef.current === 'color') {
-            if (layer.parameters.type === 'fill') {
-                newStyle['fill-color'] = colorExpr;
-            }
-            if (layer.parameters.type === 'line') {
-                newStyle['stroke-color'] = colorExpr;
-            }
-            if (layer.parameters.type === 'circle') {
-                newStyle['circle-fill-color'] = colorExpr;
-            }
-        }
-        if (selectedMethodRef.current === 'radius') {
-            if (layer.parameters.type === 'circle') {
-                newStyle['circle-radius'] = colorExpr;
-            }
-        }
-        const symbologyState = {
+        // Apply color symbology
+        if (colorStopRowsRef.current.length > 0) {
+            const colorExpr = [
+                'interpolate',
+                ['linear'],
+                ['get', selectableAttributeRef.current],
+            ];
+            colorStopRowsRef.current.forEach(stop => {
+                colorExpr.push(stop.stop);
+                colorExpr.push(stop.output);
+            });
+            newStyle['fill-color'] = colorExpr;
+            newStyle['circle-fill-color'] = colorExpr;
+        }
+        else {
+            newStyle['fill-color'] = undefined;
+            newStyle['circle-fill-color'] = undefined;
+        }
+        newStyle['stroke-color'] = colorManualStyleRef.current.strokeColor;
+        newStyle['circle-stroke-color'] = colorManualStyleRef.current.strokeColor;
+        newStyle['stroke-width'] = colorManualStyleRef.current.strokeWidth;
+        newStyle['circle-stroke-width'] = colorManualStyleRef.current.strokeWidth;
+        // Apply radius symbology
+        if (radiusStopRowsRef.current.length > 0) {
+            const radiusExpr = [
+                'interpolate',
+                ['linear'],
+                ['get', selectableAttributeRef.current],
+            ];
+            radiusStopRowsRef.current.forEach(stop => {
+                radiusExpr.push(stop.stop);
+                radiusExpr.push(stop.output);
+            });
+            newStyle['circle-radius'] = radiusExpr;
+        }
+        else {
+            newStyle['circle-radius'] = radiusManualStyleRef.current.radius;
+        }
+        layer.parameters.color = newStyle;
+        layer.parameters.symbologyState = {
             renderType: 'Graduated',
-            value: selectedValueRef.current,
-            method: selectedMethodRef.current,
-            colorRamp: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.selectedRamp,
-            nClasses: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.numberOfShades,
-            mode: (_d = colorRampOptionsRef.current) === null || _d === void 0 ? void 0 : _d.selectedMode
+            value: selectableAttributeRef.current,
+            method: symbologyTabRef.current,
+            colorRamp: (_a = colorRampOptionsRef.current) === null || _a === void 0 ? void 0 : _a.selectedRamp,
+            nClasses: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.numberOfShades,
+            mode: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.selectedMode,
         };
-        layer.parameters.symbologyState = symbologyState;
-        layer.parameters.color = newStyle;
-        layer.type = 'VectorLayer';
+        if (layer.type === 'HeatmapLayer') {
+            layer.type = 'VectorLayer';
+        }
         model.sharedModel.updateLayer(layerId, layer);
         cancel();
     };
@@ -126,10 +170,10 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId }) => {
         setColorRampOptions({
             selectedRamp,
             numberOfShades,
-            selectedMode
+            selectedMode,
         });
         let stops;
-        const values = Array.from(features[selectedValue]);
+        const values = Array.from(selectableAttributesAndValues[selectedAttribute]);
         switch (selectedMode) {
             case 'quantile':
                 stops = VectorClassifications.calculateQuantileBreaks(values, +numberOfShades);
@@ -150,23 +194,73 @@ const Graduated = ({ model, state, okSignalPromise, cancel, layerId }) => {
                 console.warn('No mode selected');
                 return;
         }
-        let stopOutputPairs = [];
-        if (selectedMethod === 'radius') {
-            for (let i = 0; i < +numberOfShades; i++) {
-                stopOutputPairs.push({ stop: stops[i], output: stops[i] });
-            }
+        const stopOutputPairs = symbologyTab === 'radius'
+            ? stops.map(v => ({ stop: v, output: v }))
+            : Utils.getValueColorPairs(stops, selectedRamp, +numberOfShades);
+        if (symbologyTab === 'radius') {
+            setRadiusStopRows(stopOutputPairs);
         }
         else {
-            stopOutputPairs = Utils.getValueColorPairs(stops, selectedRamp, +numberOfShades);
+            setColorStopRows(stopOutputPairs);
         }
-        setStopRows(stopOutputPairs);
     };
+    const handleReset = (method) => {
+        if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+            return;
+        }
+        const newStyle = Object.assign({}, layer.parameters.color);
+        if (method === 'color') {
+            delete newStyle['fill-color'];
+            delete newStyle['stroke-color'];
+            delete newStyle['circle-fill-color'];
+            setColorStopRows([]);
+            setColorRampOptions(undefined);
+        }
+        if (method === 'radius') {
+            delete newStyle['circle-radius'];
+            setRadiusStopRows([]);
+        }
+        layer.parameters.color = newStyle;
+        model.sharedModel.updateLayer(layerId, layer);
+    };
+    const body = (() => {
+        var _a;
+        if (((_a = Object.keys(selectableAttributesAndValues)) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+            return (React.createElement("p", { className: "errors" }, "This symbology type is not available; no attributes contain numeric values."));
+        }
+        else {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(ValueSelect, { featureProperties: selectableAttributesAndValues, selectedValue: selectedAttribute, setSelectedValue: setSelectedAttribute }),
+                React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+                    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: colorManualStyle.fillColor, onChange: e => {
+                                    handleReset('color');
+                                    setColorManualStyle(Object.assign(Object.assign({}, colorManualStyle), { fillColor: e.target.value }));
+                                } })),
+                        React.createElement("div", { className: "jp-gis-symbology-row" },
+                            React.createElement("label", null, "Stroke Color:"),
+                            React.createElement("input", { type: "color", className: "jp-mod-styled", value: colorManualStyle.strokeColor, onChange: e => {
+                                    setColorManualStyle(Object.assign(Object.assign({}, colorManualStyle), { strokeColor: e.target.value }));
+                                } })),
+                        React.createElement("div", { className: "jp-gis-symbology-row" },
+                            React.createElement("label", null, "Stroke Width:"),
+                            React.createElement("input", { type: "number", className: "jp-mod-styled", value: colorManualStyle.strokeWidth, onChange: e => {
+                                    setColorManualStyle(Object.assign(Object.assign({}, colorManualStyle), { strokeWidth: +e.target.value }));
+                                } })))),
+                    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: radiusManualStyle.radius, onChange: e => {
+                                handleReset('radius');
+                                setRadiusManualStyle(Object.assign(Object.assign({}, radiusManualStyle), { radius: +e.target.value }));
+                            } })))),
+                React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true, showRampSelector: symbologyTab === 'color' }),
+                React.createElement(StopContainer, { selectedMethod: symbologyTab || 'color', stopRows: symbologyTab === 'color' ? colorStopRows : radiusStopRows, setStopRows: symbologyTab === 'color' ? setColorStopRows : setRadiusStopRows })));
+        }
+    })();
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement(ValueSelect, { featureProperties: features, selectedValue: selectedValue, setSelectedValue: setSelectedValue }),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-method-select' }, "Method:"),
-            React.createElement("select", { name: 'vector-method-select', onChange: event => setSelectedMethod(event.target.value), className: "jp-mod-styled" }, methodOptions.map((method, index) => (React.createElement("option", { key: index, value: method, selected: method === selectedMethod, className: "jp-mod-styled" }, method))))),
-        React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true }),
-        React.createElement(StopContainer, { selectedMethod: selectedMethod, stopRows: stopRows, setStopRows: setStopRows })));
+        React.createElement("p", null, "Color features based on an attribute containing scalar values."),
+        body));
 };
 export default Graduated;

package/lib/dialogs/symbology/vector_layer/types/Heatmap.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ISymbologyDialogProps } from '../../symbologyDialog';
-declare const Heatmap: ({ model, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
+import { ISymbologyDialogProps } from "../../symbologyDialog";
+declare const Heatmap: React.FC<ISymbologyDialogProps>;
 export default Heatmap;