@jupytergis/base 0.4.5 → 0.6.0

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;

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

@@ -1,7 +1,7 @@
 import colormap from 'colormap';
 import React, { useEffect, useRef, useState } from 'react';
-import CanvasSelectComponent from '../../components/color_ramp/CanvasSelectComponent';
-const Heatmap = ({ model, state, okSignalPromise, cancel, layerId }) => {
+import CanvasSelectComponent from "../../components/color_ramp/CanvasSelectComponent";
+const Heatmap = ({ model, state, okSignalPromise, cancel, layerId, }) => {
     if (!layerId) {
         return;
     }
@@ -12,12 +12,12 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId }) => {
     const [selectedRamp, setSelectedRamp] = useState('');
     const [heatmapOptions, setHetamapOptions] = useState({
         radius: 8,
-        blur: 15
+        blur: 15,
     });
     const selectedRampRef = useRef('cool');
     const heatmapOptionsRef = useRef({
         radius: 8,
-        blur: 15
+        blur: 15,
     });
     useEffect(() => {
         populateOptions();
@@ -49,11 +49,11 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId }) => {
         const colorMap = colormap({
             colormap: selectedRampRef.current,
             nshades: 9,
-            format: 'hex'
+            format: 'hex',
         });
         const symbologyState = {
             renderType: 'Heatmap',
-            colorRamp: selectedRampRef.current
+            colorRamp: selectedRampRef.current,
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = colorMap;
@@ -64,6 +64,7 @@ const Heatmap = ({ model, state, okSignalPromise, cancel, layerId }) => {
         cancel();
     };
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        React.createElement("p", null, "Represent features based on their density using a heatmap."),
         React.createElement("div", { className: "jp-gis-symbology-row jp-gis-heatmap" },
             React.createElement("label", { htmlFor: "color-ramp-select" }, "Color Ramp:"),
             React.createElement(CanvasSelectComponent, { selectedRamp: selectedRamp, setSelected: setSelectedRamp })),

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

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

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

@@ -1,15 +1,14 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { parseColor } from '../../../../tools';
-const SimpleSymbol = ({ model, state, okSignalPromise, cancel, layerId }) => {
+import { parseColor } from "../../../../tools";
+const SimpleSymbol = ({ model, state, okSignalPromise, cancel, layerId, symbologyTab, }) => {
     const styleRef = useRef();
-    const [useCircleStuff, setUseCircleStuff] = useState(false);
     const [style, setStyle] = useState({
         fillColor: '#3399CC',
         joinStyle: 'round',
         strokeColor: '#3399CC',
         capStyle: 'round',
         strokeWidth: 1.25,
-        radius: 5
+        radius: 5,
     });
     const joinStyleOptions = ['bevel', 'round', 'miter'];
     const capStyleOptions = ['butt', 'round', 'square'];
@@ -24,10 +23,6 @@ const SimpleSymbol = ({ model, state, okSignalPromise, cancel, layerId }) => {
         if (!layer.parameters) {
             return;
         }
-        setUseCircleStuff(layer.parameters.type === 'circle');
-        // Mimicking QGIS here,
-        // Read values from file if we chose them using the single symbol thing
-        // but if we're switching to simple symbol, use defaults
         const initStyle = async () => {
             var _a;
             if (!layer.parameters) {
@@ -35,8 +30,8 @@ const SimpleSymbol = ({ model, state, okSignalPromise, cancel, layerId }) => {
             }
             const renderType = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState.renderType;
             if (renderType === 'Single Symbol') {
-                // Read from current color or use defaults
-                const parsedStyle = parseColor(layer.parameters.type, layer.parameters.color);
+                // Parse with fallback logic inside
+                const parsedStyle = parseColor(layer.parameters.color);
                 if (parsedStyle) {
                     setStyle(parsedStyle);
                 }
@@ -56,33 +51,35 @@ const SimpleSymbol = ({ model, state, okSignalPromise, cancel, layerId }) => {
         styleRef.current = style;
     }, [style]);
     const handleOk = () => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         if (!layer.parameters) {
             return;
         }
-        const styleExpr = {};
-        const prefix = layer.parameters.type === 'circle' ? 'circle-' : '';
-        if (layer.parameters.type === 'circle') {
-            styleExpr['circle-radius'] = (_a = styleRef.current) === null || _a === void 0 ? void 0 : _a.radius;
-        }
-        styleExpr[`${prefix}fill-color`] = (_b = styleRef.current) === null || _b === void 0 ? void 0 : _b.fillColor;
-        styleExpr[`${prefix}stroke-color`] = (_c = styleRef.current) === null || _c === void 0 ? void 0 : _c.strokeColor;
-        styleExpr[`${prefix}stroke-width`] = (_d = styleRef.current) === null || _d === void 0 ? void 0 : _d.strokeWidth;
-        styleExpr[`${prefix}stroke-line-join`] = (_e = styleRef.current) === null || _e === void 0 ? void 0 : _e.joinStyle;
-        styleExpr[`${prefix}stroke-line-cap`] = (_f = styleRef.current) === null || _f === void 0 ? void 0 : _f.capStyle;
+        const styleExpr = {
+            'circle-radius': (_a = styleRef.current) === null || _a === void 0 ? void 0 : _a.radius,
+            'circle-fill-color': (_b = styleRef.current) === null || _b === void 0 ? void 0 : _b.fillColor,
+            'circle-stroke-color': (_c = styleRef.current) === null || _c === void 0 ? void 0 : _c.strokeColor,
+            'circle-stroke-width': (_d = styleRef.current) === null || _d === void 0 ? void 0 : _d.strokeWidth,
+            'circle-stroke-line-join': (_e = styleRef.current) === null || _e === void 0 ? void 0 : _e.joinStyle,
+            'circle-stroke-line-cap': (_f = styleRef.current) === null || _f === void 0 ? void 0 : _f.capStyle,
+            'fill-color': (_g = styleRef.current) === null || _g === void 0 ? void 0 : _g.fillColor,
+            'stroke-color': (_h = styleRef.current) === null || _h === void 0 ? void 0 : _h.strokeColor,
+            'stroke-width': (_j = styleRef.current) === null || _j === void 0 ? void 0 : _j.strokeWidth,
+            'stroke-line-join': (_k = styleRef.current) === null || _k === void 0 ? void 0 : _k.joinStyle,
+            'stroke-line-cap': (_l = styleRef.current) === null || _l === void 0 ? void 0 : _l.capStyle,
+        };
         const symbologyState = {
-            renderType: 'Single Symbol'
+            renderType: 'Single Symbol',
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = styleExpr;
-        layer.type = 'VectorLayer';
+        if (layer.type === 'HeatmapLayer') {
+            layer.type = 'VectorLayer';
+        }
         model.sharedModel.updateLayer(layerId, layer);
         cancel();
     };
-    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        useCircleStuff ? (React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: 'vector-value-select' }, "Radius:"),
-            React.createElement("input", { type: "number", value: style.radius, className: "jp-mod-styled", onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { radius: +event.target.value }))) }))) : null,
+    const renderColorTab = () => (React.createElement(React.Fragment, null,
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: 'vector-value-select' }, "Fill Color:"),
             React.createElement("input", { type: "color", value: style.fillColor, className: "jp-mod-styled", onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { fillColor: event.target.value }))) })),
@@ -95,10 +92,16 @@ const SimpleSymbol = ({ model, state, okSignalPromise, cancel, layerId }) => {
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: 'vector-join-select' }, "Join Style:"),
             React.createElement("div", { className: "jp-select-wrapper" },
-                React.createElement("select", { name: 'vector-join-select', onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { joinStyle: event.target.value }))), className: "jp-mod-styled" }, joinStyleOptions.map((method, index) => (React.createElement("option", { key: index, value: method, selected: method === style.joinStyle, className: "jp-mod-styled" }, method)))))),
-        useCircleStuff ? (React.createElement("div", { className: "jp-gis-symbology-row" },
+                React.createElement("select", { name: 'vector-join-select', onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { joinStyle: event.target.value }))), className: "jp-mod-styled", value: style.joinStyle }, joinStyleOptions.map((method, index) => (React.createElement("option", { key: index, value: method, className: "jp-mod-styled" }, method)))))),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: 'vector-cap-select' }, "Cap Style:"),
             React.createElement("div", { className: "jp-select-wrapper" },
-                React.createElement("select", { name: 'vector-cap-select', onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { capStyle: event.target.value }))), className: "jp-mod-styled" }, capStyleOptions.map((cap, index) => (React.createElement("option", { key: index, value: cap, selected: cap === style.capStyle, className: "jp-mod-styled" }, cap))))))) : null));
+                React.createElement("select", { name: 'vector-cap-select', onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { capStyle: event.target.value }))), className: "jp-mod-styled", value: style.capStyle }, capStyleOptions.map((cap, index) => (React.createElement("option", { key: index, value: cap, className: "jp-mod-styled" }, cap))))))));
+    const renderRadiusTab = () => (React.createElement("div", { className: "jp-gis-symbology-row" },
+        React.createElement("label", null, "Radius:"),
+        React.createElement("input", { type: "number", value: style.radius, className: "jp-mod-styled", onChange: e => setStyle(prev => (Object.assign(Object.assign({}, prev), { radius: +e.target.value }))) })));
+    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        React.createElement("p", null, "Color all features the same way."),
+        symbologyTab === 'color' ? renderColorTab() : renderRadiusTab()));
 };
 export default SimpleSymbol;

package/lib/formbuilder/creationform.js

@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { deepCopy } from '../tools';
 import { PromiseDelegate, UUID } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import * as React from 'react';
+import { deepCopy } from "../tools";
 import { getLayerTypeForm, getSourceTypeForm } from './formselectors';
 /**
  * Form for creating a source, a layer or both at the same time
@@ -83,7 +83,7 @@ export class CreationForm extends React.Component {
                 const sourceModel = {
                     type: this.props.sourceType || 'RasterSource',
                     name: actualName,
-                    parameters: sourceData
+                    parameters: sourceData,
                 };
                 this.jGISModel.sharedModel.addSource(sourceId, sourceModel);
             }
@@ -97,7 +97,7 @@ export class CreationForm extends React.Component {
                     type: this.props.layerType || 'RasterLayer',
                     parameters: layerData,
                     visible: true,
-                    name: actualName
+                    name: actualName,
                 };
                 this.jGISModel.addLayer(UUID.uuid4(), layerModel);
             }

package/lib/formbuilder/editform.js

@@ -1,6 +1,6 @@
 import { Signal } from '@lumino/signaling';
 import * as React from 'react';
-import { deepCopy } from '../tools';
+import { deepCopy } from "../tools";
 import { getLayerTypeForm, getSourceTypeForm } from './formselectors';
 /**
  * Form for editing a source, a layer or both at the same time
@@ -53,12 +53,12 @@ export class EditForm extends React.Component {
         return (React.createElement("div", null,
             this.props.layer && LayerForm && (React.createElement("div", null,
                 React.createElement("h3", { style: { paddingLeft: '5px' } }, "Layer Properties"),
-                React.createElement(LayerForm, { formContext: "create", sourceType: (source === null || source === void 0 ? void 0 : source.type) || 'RasterSource', model: this.props.model, filePath: this.props.model.filePath, schema: layerSchema, sourceData: layerData, syncData: (properties) => {
+                React.createElement(LayerForm, { formContext: "update", sourceType: (source === null || source === void 0 ? void 0 : source.type) || 'RasterSource', model: this.props.model, filePath: this.props.model.filePath, schema: layerSchema, sourceData: layerData, syncData: (properties) => {
                         this.syncObjectProperties(this.props.layer, properties);
                     } }))),
             this.props.source && SourceForm && (React.createElement("div", null,
                 React.createElement("h3", { style: { paddingLeft: '5px' } }, "Source Properties"),
-                React.createElement(SourceForm, { formContext: "create", model: this.props.model, filePath: this.props.model.filePath, schema: sourceSchema, sourceData: sourceData, syncData: (properties) => {
+                React.createElement(SourceForm, { formContext: "update", model: this.props.model, filePath: this.props.model.filePath, schema: sourceSchema, sourceData: sourceData, syncData: (properties) => {
                         this.syncObjectProperties(this.props.source, properties);
                     }, formChangedSignal: this.sourceFormChangedSignal, sourceType: (source === null || source === void 0 ? void 0 : source.type) || 'RasterSource' })))));
     }

package/lib/formbuilder/formselectors.d.ts

@@ -1,5 +1,5 @@
 import { LayerType, SourceType } from '@jupytergis/schema';
-import { SourcePropertiesForm } from './objectform/source';
 import { LayerPropertiesForm } from './objectform/layer';
+import { SourcePropertiesForm } from './objectform/source';
 export declare function getLayerTypeForm(layerType: LayerType): typeof LayerPropertiesForm;
 export declare function getSourceTypeForm(sourceType: SourceType): typeof SourcePropertiesForm;

package/lib/formbuilder/formselectors.js

@@ -1,5 +1,5 @@
-import { GeoJSONSourcePropertiesForm, GeoTiffSourcePropertiesForm, PathBasedSourcePropertiesForm, TileSourcePropertiesForm, SourcePropertiesForm } from './objectform/source';
-import { HeatmapLayerPropertiesForm, HillshadeLayerPropertiesForm, LayerPropertiesForm, VectorLayerPropertiesForm, WebGlLayerPropertiesForm } from './objectform/layer';
+import { HeatmapLayerPropertiesForm, HillshadeLayerPropertiesForm, LayerPropertiesForm, VectorLayerPropertiesForm, WebGlLayerPropertiesForm, } from './objectform/layer';
+import { GeoJSONSourcePropertiesForm, GeoTiffSourcePropertiesForm, PathBasedSourcePropertiesForm, TileSourcePropertiesForm, SourcePropertiesForm, } from './objectform/source';
 export function getLayerTypeForm(layerType) {
     let LayerForm = LayerPropertiesForm;
     switch (layerType) {

package/lib/formbuilder/objectform/baseform.d.ts

@@ -2,10 +2,11 @@ import { IJupyterGISModel } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
 import { Signal } from '@lumino/signaling';
 import { IChangeEvent, ISubmitEvent } from '@rjsf/core';
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import * as React from 'react';
-import { IDict } from '../../types';
+import { IDict } from "../../types";
 export interface IBaseFormStates {
-    schema?: IDict;
+    schema?: RJSFSchema;
     extraErrors?: any;
 }
 export interface IBaseFormProps {
@@ -61,7 +62,7 @@ export declare class BaseForm extends React.Component<IBaseFormProps, IBaseFormS
     constructor(props: IBaseFormProps);
     componentDidUpdate(prevProps: IBaseFormProps, prevState: IBaseFormStates): void;
     componentDidMount(): void;
-    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
+    protected processSchema(data: IDict<any> | undefined, schema: RJSFSchema, uiSchema: UiSchema): void;
     /**
      * Remove a specific entry from the form. Can be used in subclasses if needed while under processSchema.
      * @param entry The entry name
@@ -69,7 +70,7 @@ export declare class BaseForm extends React.Component<IBaseFormProps, IBaseFormS
      * @param schema The form schema
      * @param uiSchema The form uiSchema
      */
-    protected removeFormEntry(entry: string, data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
+    protected removeFormEntry(entry: string, data: IDict<any> | undefined, schema: RJSFSchema, uiSchema: UiSchema): void;
     protected syncData(properties: IDict<any> | undefined): void;
     protected onFormChange(e: IChangeEvent): void;
     protected onFormBlur(id: string, value: any): void;