@jupytergis/base 0.4.5 → 0.6.0

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

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ValueSelect from "../components/ValueSelect";
+const Canonical = ({ model, state, okSignalPromise, cancel, layerId, selectableAttributesAndValues, }) => {
+    const selectedValueRef = useRef();
+    const [selectedValue, setSelectedValue] = useState('');
+    if (!layerId) {
+        return;
+    }
+    const layer = model.getLayer(layerId);
+    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+        return;
+    }
+    useEffect(() => {
+        okSignalPromise.promise.then(okSignal => {
+            okSignal.connect(handleOk, this);
+        });
+        return () => {
+            okSignalPromise.promise.then(okSignal => {
+                okSignal.disconnect(handleOk, this);
+            });
+        };
+    }, [selectedValue]);
+    useEffect(() => {
+        var _a, _b;
+        const layerParams = layer.parameters;
+        const value = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : Object.keys(selectableAttributesAndValues)[0];
+        setSelectedValue(value);
+    }, [selectableAttributesAndValues]);
+    useEffect(() => {
+        selectedValueRef.current = selectedValue;
+    }, [selectedValue]);
+    const handleOk = () => {
+        if (!layer.parameters) {
+            return;
+        }
+        const colorExpr = ['get', selectedValue];
+        const newStyle = Object.assign({}, layer.parameters.color);
+        newStyle['fill-color'] = colorExpr;
+        newStyle['stroke-color'] = colorExpr;
+        newStyle['circle-fill-color'] = colorExpr;
+        const symbologyState = {
+            renderType: 'Canonical',
+            value: selectedValueRef.current,
+        };
+        layer.parameters.symbologyState = symbologyState;
+        layer.parameters.color = newStyle;
+        if (layer.type === 'HeatmapLayer') {
+            layer.type = 'VectorLayer';
+        }
+        model.sharedModel.updateLayer(layerId, layer);
+        cancel();
+    };
+    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 a hex color code."));
+        }
+        else {
+            return (React.createElement(ValueSelect, { featureProperties: selectableAttributesAndValues, selectedValue: selectedValue, setSelectedValue: setSelectedValue }));
+        }
+    })();
+    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));
+};
+export default Canonical;

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;