@jupytergis/base 0.15.0 → 0.16.0-alpha.1

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

@@ -1,130 +0,0 @@
-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;
-    }
-    const layer = model.getLayer(layerId);
-    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
-        return;
-    }
-    useEffect(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
-        const layerParams = layer.parameters;
-        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;
-        }
-        // 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['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,
-            layerId,
-            isStorySegmentOverride,
-            segmentId,
-            payload: {
-                symbologyState,
-                color: newStyle,
-            },
-            mutateLayerBeforeSave: targetLayer => {
-                if (targetLayer.type === 'HeatmapLayer') {
-                    targetLayer.type = 'VectorLayer';
-                }
-            },
-        });
-    };
-    useOkSignal(okSignalPromise, handleOk);
-    const body = (() => {
-        var _a;
-        if (((_a = Object.keys(selectableAttributesAndValues)) === null || _a === void 0 ? void 0 : _a.length) === 0) {
-            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,
-        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.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ISymbologyTabbedDialogWithAttributesProps } from "../../symbologyDialog";
-declare const Categorized: React.FC<ISymbologyTabbedDialogWithAttributesProps>;
-export default Categorized;

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

@@ -1,243 +0,0 @@
-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";
-import ValueSelect from "../components/ValueSelect";
-import { useLatest } from "../../../../shared/hooks/useLatest";
-import { useEffectiveSymbologyParams } from '../../hooks/useEffectiveSymbologyParams';
-const Categorized = ({ model, okSignalPromise, layerId, symbologyTab, selectableAttributesAndValues, isStorySegmentOverride, segmentId, }) => {
-    const [selectedAttribute, setSelectedAttribute] = useState('');
-    const [stopRows, setStopRows] = useState([]);
-    const [colorRampOptions, setColorRampOptions] = useState();
-    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: DEFAULT_COLOR,
-        strokeColor: DEFAULT_COLOR,
-        strokeWidth: String(DEFAULT_STROKE_WIDTH),
-        radius: 5,
-    });
-    const manualStyleRef = useLatest(manualStyle);
-    const selectedAttributeRef = useLatest(selectedAttribute);
-    const stopRowsRef = useLatest(stopRows);
-    const colorRampOptionsRef = useLatest(colorRampOptions);
-    if (!layerId) {
-        return;
-    }
-    const layer = model.getLayer(layerId);
-    const params = useEffectiveSymbologyParams({
-        model,
-        layerId: layerId,
-        layer,
-        isStorySegmentOverride,
-        segmentId,
-    });
-    if (!params) {
-        return;
-    }
-    useEffect(() => {
-        const valueColorPairs = VectorUtils.buildColorInfo(params);
-        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 effectiveFill = isColor(fillColor)
-                ? fillColor
-                : isColor(circleFillColor)
-                    ? circleFillColor
-                    : DEFAULT_COLOR;
-            const effectiveStroke = isColor(strokeColor)
-                ? strokeColor
-                : isColor(circleStrokeColor)
-                    ? circleStrokeColor
-                    : DEFAULT_COLOR;
-            setManualStyle({
-                fillColor: colorToRgba(effectiveFill),
-                strokeColor: colorToRgba(effectiveStroke),
-                strokeWidth: String(params.color['stroke-width'] ||
-                    params.color['circle-stroke-width'] ||
-                    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;
-        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) => {
-        setColorRampOptions({
-            selectedFunction: '',
-            selectedRamp,
-            numberOfShades,
-            selectedMode,
-            reverseRamp,
-        });
-        if (!selectableAttributesAndValues[selectedAttribute]) {
-            return;
-        }
-        const stops = Array.from(selectableAttributesAndValues[selectedAttribute]).sort((a, b) => a - b);
-        const colorRamp = getColorMapList().find(c => c.name === selectedRamp);
-        if (!colorRamp) {
-            return;
-        }
-        const valueColorPairs = Utils.getValueColorPairs(stops, colorRamp, stops.length, reverseRamp);
-        setStopRows(valueColorPairs);
-    };
-    const handleOk = () => {
-        var _a, _b;
-        const newStyle = Object.assign({}, params.color);
-        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(fallbackColorRef.current);
-                newStyle['fill-color'] = expr;
-                newStyle['circle-fill-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'] = Math.max(0, parseFloat(manualStyleRef.current.strokeWidth));
-        newStyle['circle-stroke-width'] = Math.max(0, parseFloat(manualStyleRef.current.strokeWidth));
-        newStyle['circle-radius'] = manualStyleRef.current.radius;
-        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,
-            layerId,
-            isStorySegmentOverride,
-            segmentId,
-            payload: {
-                symbologyState,
-                color: newStyle,
-            },
-            mutateLayerBeforeSave: targetLayer => {
-                if (targetLayer.type === 'HeatmapLayer') {
-                    targetLayer.type = 'VectorLayer';
-                }
-            },
-        });
-    };
-    useOkSignal(okSignalPromise, handleOk);
-    const handleReset = (method) => {
-        if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
-            return;
-        }
-        const newStyle = Object.assign({}, params.color);
-        if (method === 'color') {
-            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;
-            }
-        }
-        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(RgbaColorPicker, { color: manualStyle.fillColor, onChange: color => {
-                                    handleReset('color');
-                                    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("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: "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 => {
-                                setManualStyle(prev => (Object.assign(Object.assign({}, prev), { radius: +e.target.value })));
-                            } })))),
-                React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-                    React.createElement(ColorRampControls, { layerParams: params, 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("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 +0,0 @@
-import React from 'react';
-import { ISymbologyTabbedDialogWithAttributesProps } from "../../symbologyDialog";
-declare const Graduated: React.FC<ISymbologyTabbedDialogWithAttributesProps>;
-export default Graduated;