@jupytergis/base 0.15.0 → 0.16.0-alpha.0

package/lib/dialogs/symbology/tiff_layer/types/SingleBandPseudoColor.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { ISymbologyDialogProps } from "../../symbologyDialog";
-export type InterpolationType = 'discrete' | 'linear' | 'exact';
-declare const SingleBandPseudoColor: React.FC<ISymbologyDialogProps>;
-export default SingleBandPseudoColor;

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

@@ -1,313 +0,0 @@
-import { Button } from '@jupyterlab/ui-components';
-import { UUID } from '@lumino/coreutils';
-import React, { useEffect, useState } from 'react';
-import { GeoTiffClassifications } from "../../classificationModes";
-import ColorRampControls from "../../components/color_ramp/ColorRampControls";
-import StopRow from "../../components/color_stops/StopRow";
-import useGetBandInfo from "../../hooks/useGetBandInfo";
-import { useOkSignal } from "../../hooks/useOkSignal";
-import { saveSymbology, Utils, } from "../../symbologyUtils";
-import BandRow from "../components/BandRow";
-import { LoadingOverlay } from "../../../../shared/components/loading";
-import { useLatest } from "../../../../shared/hooks/useLatest";
-import { GlobalStateDbManager } from "../../../../store";
-import { getColorMapList } from '../../colorRampUtils';
-import { useEffectiveSymbologyParams } from '../../hooks/useEffectiveSymbologyParams';
-const SingleBandPseudoColor = ({ model, okSignalPromise, layerId, isStorySegmentOverride, segmentId, }) => {
-    if (!layerId) {
-        return;
-    }
-    const layer = model.getLayer(layerId);
-    const params = useEffectiveSymbologyParams({
-        model,
-        layerId: layerId,
-        layer,
-        isStorySegmentOverride,
-        segmentId,
-    });
-    if (!params || !layer) {
-        return;
-    }
-    const functions = ['discrete', 'linear', 'exact'];
-    const modeOptions = [
-        'continuous',
-        'equal interval',
-        'quantile',
-    ];
-    const stateDb = GlobalStateDbManager.getInstance().getStateDb();
-    const { bandRows, setBandRows, loading } = useGetBandInfo(model, layer);
-    const [layerState, setLayerState] = useState();
-    const [selectedBand, setSelectedBand] = useState(1);
-    const [stopRows, setStopRows] = useState([]);
-    const [selectedFunction, setSelectedFunction] = useState('linear');
-    const [colorRampOptions, setColorRampOptions] = useState();
-    const stopRowsRef = useLatest(stopRows);
-    const bandRowsRef = useLatest(bandRows);
-    const selectedFunctionRef = useLatest(selectedFunction);
-    const colorRampOptionsRef = useLatest(colorRampOptions);
-    const selectedBandRef = useLatest(selectedBand);
-    useEffect(() => {
-        populateOptions();
-    }, []);
-    useEffect(() => {
-        buildColorInfo();
-    }, [bandRows]);
-    const populateOptions = async () => {
-        var _a, _b, _c, _d;
-        const layerState = (await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.fetch(`jupytergis:${layerId}`)));
-        setLayerState(layerState);
-        const band = (_b = (_a = params.symbologyState) === null || _a === void 0 ? void 0 : _a.band) !== null && _b !== void 0 ? _b : 1;
-        const interpolation = (_d = (_c = params.symbologyState) === null || _c === void 0 ? void 0 : _c.interpolation) !== null && _d !== void 0 ? _d : 'linear';
-        setSelectedBand(band);
-        setSelectedFunction(interpolation);
-    };
-    const buildColorInfo = () => {
-        // This it to parse a color object on the layer
-        if (!params.color || !layerState) {
-            return;
-        }
-        const color = params.color;
-        // If color is a string we don't need to parse
-        // Otherwise color expression should be an array (e.g. ['interpolate', ...] or ['case', ...])
-        if (!Array.isArray(color)) {
-            return;
-        }
-        // ! wtf ? dont use statedb just read from the file??
-        const isQuantile = layerState.selectedMode === 'quantile';
-        const valueColorPairs = [];
-        // Color[0] is the operator used for the color expression
-        switch (color[0]) {
-            case 'interpolate': {
-                // First element is interpolate for linear selection
-                // Second element is type of interpolation (ie linear)
-                // Third is input value that stop values are compared with
-                // Fourth and Fifth are the transparent value for NoData values
-                // Sixth and on is value:color pairs
-                for (let i = 5; i < color.length; i += 2) {
-                    const obj = {
-                        id: UUID.uuid4(),
-                        stop: scaleValue(Number(color[i]), isQuantile),
-                        output: color[i + 1],
-                    };
-                    valueColorPairs.push(obj);
-                }
-                break;
-            }
-            case 'case': {
-                // First element is case for discrete and exact selections
-                // Second element is the condition for NoData values
-                // Third element is transparent
-                // Fourth is the condition for actual values
-                // Within that, first is logical operator, second is band, third is value
-                // Fifth is color
-                // Last element is fallback value
-                for (let i = 3; i < color.length - 1; i += 2) {
-                    const stopVal = Number(Array.isArray(color[i])
-                        ? color[i][2]
-                        : color[i]);
-                    const obj = {
-                        id: UUID.uuid4(),
-                        stop: scaleValue(stopVal, isQuantile),
-                        output: color[i + 1],
-                    };
-                    valueColorPairs.push(obj);
-                }
-                break;
-            }
-        }
-        setStopRows(valueColorPairs);
-    };
-    const handleOk = () => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        const bandRow = bandRowsRef.current[selectedBand - 1];
-        if (!bandRow) {
-            return;
-        }
-        const isQuantile = ((_a = colorRampOptionsRef.current) === null || _a === void 0 ? void 0 : _a.selectedMode) === 'quantile';
-        // TODO: Different viewers will have different types
-        let colorExpr = [];
-        switch (selectedFunctionRef.current) {
-            case 'linear': {
-                colorExpr = ['interpolate', ['linear']];
-                colorExpr.push(['band', selectedBand]);
-                // Set NoData values to transparent
-                colorExpr.push(0.0, [0.0, 0.0, 0.0, 0.0]);
-                (_b = stopRowsRef.current) === null || _b === void 0 ? void 0 : _b.map(stop => {
-                    colorExpr.push(unscaleValue(stop.stop, isQuantile));
-                    colorExpr.push(stop.output);
-                });
-                break;
-            }
-            case 'discrete': {
-                colorExpr = ['case'];
-                // Set NoData values to transparent
-                colorExpr.push(['==', ['band', selectedBand], 0]);
-                colorExpr.push([0.0, 0.0, 0.0, 0.0]);
-                (_c = stopRowsRef.current) === null || _c === void 0 ? void 0 : _c.map(stop => {
-                    colorExpr.push([
-                        '<=',
-                        ['band', selectedBand],
-                        unscaleValue(stop.stop, isQuantile),
-                    ]);
-                    colorExpr.push(stop.output);
-                });
-                // fallback value
-                colorExpr.push([0, 0, 0, 0.0]);
-                break;
-            }
-            case 'exact': {
-                colorExpr = ['case'];
-                // Set NoData values to transparent
-                colorExpr.push(['==', ['band', selectedBand], 0]);
-                colorExpr.push([0.0, 0.0, 0.0, 0.0]);
-                (_d = stopRowsRef.current) === null || _d === void 0 ? void 0 : _d.map(stop => {
-                    colorExpr.push([
-                        '==',
-                        ['band', selectedBand],
-                        unscaleValue(stop.stop, isQuantile),
-                    ]);
-                    colorExpr.push(stop.output);
-                });
-                // fallback value
-                colorExpr.push([0, 0, 0, 0.0]);
-                break;
-            }
-        }
-        const symbologyState = {
-            renderType: 'Singleband Pseudocolor',
-            band: selectedBandRef.current,
-            interpolation: selectedFunctionRef.current,
-            colorRamp: (_e = colorRampOptionsRef.current) === null || _e === void 0 ? void 0 : _e.selectedRamp,
-            nClasses: ((_f = colorRampOptionsRef.current) === null || _f === void 0 ? void 0 : _f.numberOfShades) !== undefined
-                ? String(colorRampOptionsRef.current.numberOfShades)
-                : undefined,
-            mode: (_g = colorRampOptionsRef.current) === null || _g === void 0 ? void 0 : _g.selectedMode,
-            reverseRamp: (_h = colorRampOptionsRef.current) === null || _h === void 0 ? void 0 : _h.reverseRamp,
-        };
-        if (!isStorySegmentOverride) {
-            // Update source
-            const sourceId = (_j = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _j === void 0 ? void 0 : _j.source;
-            const source = model.getSource(sourceId);
-            if (!source || !source.parameters) {
-                return;
-            }
-            const sourceInfo = source.parameters.urls[0];
-            sourceInfo.min = bandRow.stats.minimum;
-            sourceInfo.max = bandRow.stats.maximum;
-            source.parameters.urls[0] = sourceInfo;
-            model.sharedModel.updateSource(sourceId, source);
-        }
-        saveSymbology({
-            model,
-            layerId,
-            isStorySegmentOverride,
-            segmentId,
-            payload: {
-                symbologyState,
-                color: colorExpr,
-            },
-            mutateLayerBeforeSave: targetLayer => {
-                targetLayer.type = 'WebGlLayer';
-            },
-        });
-    };
-    useOkSignal(okSignalPromise, handleOk);
-    const addStopRow = () => {
-        setStopRows([
-            {
-                id: UUID.uuid4(),
-                stop: 0,
-                output: [0, 0, 0, 1],
-            },
-            ...stopRows,
-        ]);
-    };
-    const deleteStopRow = (index) => {
-        const newFilters = [...stopRows];
-        newFilters.splice(index, 1);
-        setStopRows(newFilters);
-    };
-    const buildColorInfoFromClassification = async (selectedMode, numberOfShades, selectedRamp, reverseRamp, setIsLoading) => {
-        var _a, _b;
-        // Update layer state with selected options
-        setColorRampOptions({
-            selectedRamp,
-            numberOfShades,
-            selectedMode,
-            reverseRamp,
-        });
-        let stops = [];
-        const currentBand = bandRows[selectedBand - 1];
-        const source = model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
-        const sourceInfo = (_b = source === null || source === void 0 ? void 0 : source.parameters) === null || _b === void 0 ? void 0 : _b.urls[0];
-        const nClasses = selectedMode === 'continuous' ? 52 : numberOfShades;
-        setIsLoading(true);
-        switch (selectedMode) {
-            case 'quantile':
-                stops = await GeoTiffClassifications.classifyQuantileBreaks(nClasses, selectedBand, sourceInfo.url, selectedFunction);
-                break;
-            case 'continuous':
-                stops = GeoTiffClassifications.classifyContinuousBreaks(nClasses, currentBand.stats.minimum, currentBand.stats.maximum, selectedFunction);
-                break;
-            case 'equal interval':
-                stops = GeoTiffClassifications.classifyEqualIntervalBreaks(nClasses, currentBand.stats.minimum, currentBand.stats.maximum, selectedFunction);
-                break;
-            default:
-                console.warn('No mode selected');
-                return;
-        }
-        setIsLoading(false);
-        const colorRamp = getColorMapList().find(c => c.name === selectedRamp);
-        if (!colorRamp) {
-            return;
-        }
-        const valueColorPairs = Utils.getValueColorPairs(stops, colorRamp, nClasses, reverseRamp);
-        setStopRows(valueColorPairs);
-    };
-    const scaleValue = (bandValue, isQuantile) => {
-        const currentBand = bandRows[selectedBand - 1];
-        if (!currentBand) {
-            return bandValue;
-        }
-        const min = isQuantile ? 1 : currentBand.stats.minimum;
-        const max = isQuantile ? 65535 : currentBand.stats.maximum;
-        return (bandValue * (max - min)) / (1 - 0) + min;
-    };
-    const unscaleValue = (value, isQuantile) => {
-        if (typeof value !== 'number') {
-            throw new Error('unscaleValue expects a number');
-        }
-        const currentBand = bandRowsRef.current[selectedBand - 1];
-        const min = isQuantile ? 1 : currentBand.stats.minimum;
-        const max = isQuantile ? 65535 : currentBand.stats.maximum;
-        return (value * (1 - 0) - min * (1 - 0)) / (max - min);
-    };
-    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement("div", { className: "jp-gis-band-container" },
-            React.createElement(LoadingOverlay, { loading: loading }),
-            React.createElement(BandRow, { label: "Band", 
-                // Band numbers are 1 indexed
-                index: selectedBand - 1, bandRow: bandRows[selectedBand - 1], bandRows: bandRows, setSelectedBand: setSelectedBand, setBandRows: setBandRows })),
-        React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: "function-select" }, "Interpolation:"),
-            React.createElement("div", { className: "jp-select-wrapper" },
-                React.createElement("select", { name: "function-select", id: "function-select", className: "jp-mod-styled", value: selectedFunction, style: { textTransform: 'capitalize' }, onChange: event => {
-                        setSelectedFunction(event.target.value);
-                    } }, functions.map((func, funcIndex) => (React.createElement("option", { key: func, value: func, style: { textTransform: 'capitalize' } }, func)))))),
-        bandRows.length > 0 && (React.createElement(ColorRampControls, { layerParams: params, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true, showRampSelector: true })),
-        React.createElement("div", { className: "jp-gis-stop-container" },
-            React.createElement("div", { className: "jp-gis-stop-labels", style: { display: 'flex', gap: 6 } },
-                React.createElement("span", { style: { flex: '0 0 18%' } },
-                    "Value",
-                    ' ',
-                    selectedFunction === 'discrete'
-                        ? '<='
-                        : selectedFunction === 'exact'
-                            ? '='
-                            : ''),
-                React.createElement("span", null, "Output Value")),
-            stopRows.map((stop, index) => (React.createElement(StopRow, { key: stop.id, index: index, dataValue: stop.stop, symbologyValue: stop.output, stopRows: stopRows, setStopRows: setStopRows, deleteRow: () => deleteStopRow(index) })))),
-        React.createElement("div", { className: "jp-gis-symbology-button-container" },
-            React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: addStopRow }, "Add Stop"))));
-};
-export default SingleBandPseudoColor;

package/lib/dialogs/symbology/vector_layer/VectorRendering.d.ts

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

package/lib/dialogs/symbology/vector_layer/VectorRendering.js

@@ -1,112 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useGetProperties } from "../hooks/useGetProperties";
-import FilterComponent from "../../../panelview/filter-panel/Filter";
-import { getColorCodeFeatureAttributes, getFeatureAttributes, getNumericFeatureAttributes, objectEntries, } from "../../../tools";
-import Canonical from './types/Canonical';
-import Categorized from './types/Categorized';
-import Graduated from './types/Graduated';
-import Heatmap from './types/Heatmap';
-import SimpleSymbol from './types/SimpleSymbol';
-const RENDER_TYPE_OPTIONS = {
-    'Single Symbol': {
-        component: SimpleSymbol,
-        supportedLayerTypes: ['VectorLayer', 'VectorTileLayer', 'HeatmapLayer'],
-        isTabbed: true,
-    },
-    Canonical: {
-        component: Canonical,
-        attributeChecker: getColorCodeFeatureAttributes,
-        supportedLayerTypes: ['VectorLayer', 'VectorTileLayer', 'HeatmapLayer'],
-        isTabbed: false,
-    },
-    Graduated: {
-        component: Graduated,
-        attributeChecker: getNumericFeatureAttributes,
-        supportedLayerTypes: ['VectorLayer', 'VectorTileLayer', 'HeatmapLayer'],
-        isTabbed: true,
-    },
-    Categorized: {
-        component: Categorized,
-        attributeChecker: getFeatureAttributes,
-        supportedLayerTypes: ['VectorLayer', 'VectorTileLayer', 'HeatmapLayer'],
-        isTabbed: true,
-    },
-    Heatmap: {
-        component: Heatmap,
-        supportedLayerTypes: ['VectorLayer', 'HeatmapLayer'],
-        isTabbed: false,
-    },
-};
-const getSelectableRenderTypes = (featureProperties, layerType) => {
-    const entries = objectEntries(RENDER_TYPE_OPTIONS).map(([renderType, renderTypeProps]) => [
-        renderType,
-        Object.assign(Object.assign(Object.assign({}, renderTypeProps), (renderTypeProps.attributeChecker
-            ? {
-                selectableAttributesAndValues: renderTypeProps.attributeChecker(featureProperties),
-            }
-            : {})), { layerTypeSupported: renderTypeProps.supportedLayerTypes.includes(layerType) }),
-    ]);
-    return Object.fromEntries(entries);
-};
-const VectorRendering = ({ model, okSignalPromise, layerId, isStorySegmentOverride = false, segmentId, }) => {
-    const [symbologyTab, setSymbologyTab] = useState('color');
-    const [selectedRenderType, setSelectedRenderType] = useState();
-    const layer = layerId !== undefined ? model.getLayer(layerId) : null;
-    useEffect(() => {
-        var _a, _b, _c, _d, _e;
-        if (!layer) {
-            return;
-        }
-        let renderType;
-        if (isStorySegmentOverride) {
-            const segment = segmentId ? model.getLayer(segmentId) : undefined;
-            if (!segment) {
-                return;
-            }
-            const override = (_b = (_a = segment.parameters) === null || _a === void 0 ? void 0 : _a.layerOverride) === null || _b === void 0 ? void 0 : _b.find((override) => override.targetLayer === layerId);
-            if (!override) {
-                return;
-            }
-            renderType = (_c = override.symbologyState) === null || _c === void 0 ? void 0 : _c.renderType;
-        }
-        else {
-            renderType = (_e = (_d = layer.parameters) === null || _d === void 0 ? void 0 : _d.symbologyState) === null || _e === void 0 ? void 0 : _e.renderType;
-        }
-        if (!renderType) {
-            renderType = layer.type === 'HeatmapLayer' ? 'Heatmap' : 'Single Symbol';
-        }
-        setSelectedRenderType(renderType);
-    }, []);
-    const { featureProperties, isLoading: featuresLoading } = useGetProperties({
-        layerId,
-        model: model,
-    });
-    if (!layerId || !(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
-        return null;
-    }
-    if (featuresLoading) {
-        return React.createElement("p", null, "Loading...");
-    }
-    if (selectedRenderType === undefined) {
-        return null;
-    }
-    const selectableRenderTypes = getSelectableRenderTypes(featureProperties, layer.type);
-    const selectedRenderTypeProps = selectableRenderTypes[selectedRenderType];
-    return (React.createElement(React.Fragment, null,
-        selectedRenderTypeProps.isTabbed && (React.createElement("div", { className: "jp-gis-symbology-tabs" }, ['color', 'radius', 'filters'].map(tab => (React.createElement("button", { key: tab, className: `jp-gis-tab ${symbologyTab === tab ? 'active' : ''}`, onClick: () => setSymbologyTab(tab) }, tab.charAt(0).toUpperCase() + tab.slice(1)))))),
-        symbologyTab !== 'filters' && (React.createElement("div", { className: "jp-gis-symbology-row" },
-            React.createElement("label", { htmlFor: "render-type-select" }, "Render Type:"),
-            React.createElement("div", { className: "jp-select-wrapper" },
-                React.createElement("select", { name: "render-type-select", id: "render-type-select", className: "jp-mod-styled", value: selectedRenderType, onChange: event => {
-                        setSelectedRenderType(event.target.value);
-                    } }, objectEntries(selectableRenderTypes)
-                    .filter(([renderType, renderTypeProps]) => renderTypeProps.layerTypeSupported &&
-                    !(renderType === 'Heatmap' && symbologyTab === 'radius'))
-                    .map(([renderType, _]) => (React.createElement("option", { key: renderType, value: renderType }, renderType))))))),
-        symbologyTab === 'filters' ? (React.createElement(FilterComponent, { model: model, okSignalPromise: okSignalPromise })) : (React.createElement(selectedRenderTypeProps.component, Object.assign({ model: model, okSignalPromise: okSignalPromise, layerId: layerId, isStorySegmentOverride: isStorySegmentOverride, segmentId: segmentId }, (selectedRenderTypeProps.isTabbed ? { symbologyTab } : {}), (selectedRenderTypeProps.selectableAttributesAndValues
-            ? {
-                selectableAttributesAndValues: selectedRenderTypeProps.selectableAttributesAndValues,
-            }
-            : {}))))));
-};
-export default VectorRendering;

package/lib/dialogs/symbology/vector_layer/components/ValueSelect.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-interface IValueSelectProps {
-    featureProperties: any;
-    selectedValue: string;
-    setSelectedValue: (value: string) => void;
-}
-declare const ValueSelect: React.FC<IValueSelectProps>;
-export default ValueSelect;

package/lib/dialogs/symbology/vector_layer/components/ValueSelect.js

@@ -1,9 +0,0 @@
-import React from 'react';
-const ValueSelect = ({ featureProperties, selectedValue, setSelectedValue, }) => {
-    return (React.createElement("div", { className: "jp-gis-symbology-row" },
-        React.createElement("label", { htmlFor: 'vector-value-select' }, "Value:"),
-        React.createElement("select", { name: 'vector-value-select', onChange: event => setSelectedValue(event.target.value), className: "jp-mod-styled" }, Object.keys(featureProperties)
-            .sort((a, b) => a.localeCompare(b))
-            .map((feature, index) => (React.createElement("option", { key: index, value: feature, selected: feature === selectedValue, className: "jp-mod-styled" }, feature))))));
-};
-export default ValueSelect;

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

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

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;