@jupytergis/base 0.1.6 → 0.2.0

package/lib/dialogs/{components/symbology → symbology/tiff_layer/types}/SingleBandPseudoColor.js

@@ -1,101 +1,109 @@
-import { faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
-import { getGdal } from '../../../gdal';
-import BandRow from './BandRow';
-import StopRow from './StopRow';
-const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerId }) => {
+import { GeoTiffClassifications } from '../../classificationModes';
+import { GlobalStateDbManager } from '../../../../store';
+import BandRow from '../components/BandRow';
+import ColorRamp from '../../components/color_ramp/ColorRamp';
+import StopRow from '../../components/color_stops/StopRow';
+import { Utils } from '../../symbologyUtils';
+import { Spinner } from '../../../../mainview/spinner';
+import { loadGeoTIFFWithCache } from '../../../../tools';
+const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) => {
     const functions = ['discrete', 'linear', 'exact'];
+    const modeOptions = ['continuous', 'equal interval', 'quantile'];
     const stopRowsRef = useRef();
     const bandRowsRef = useRef([]);
     const selectedFunctionRef = useRef();
-    const [selectedFunction, setSelectedFunction] = useState();
+    const colorRampOptionsRef = useRef();
+    const layerStateRef = useRef();
+    const selectedBandRef = useRef();
+    const [layerState, setLayerState] = useState();
     const [selectedBand, setSelectedBand] = useState(1);
     const [stopRows, setStopRows] = useState([]);
     const [bandRows, setBandRows] = useState([]);
+    const [selectedFunction, setSelectedFunction] = useState('linear');
+    const [colorRampOptions, setColorRampOptions] = useState();
     if (!layerId) {
         return;
     }
     const layer = context.model.getLayer(layerId);
-    if (!layer) {
+    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
         return;
     }
+    const stateDb = GlobalStateDbManager.getInstance().getStateDb();
     useEffect(() => {
-        getBandInfo();
-        setInitialFunction();
+        populateOptions();
+        okSignalPromise.promise.then(okSignal => {
+            okSignal.connect(handleOk);
+        });
+        return () => {
+            okSignalPromise.promise.then(okSignal => {
+                okSignal.disconnect(handleOk, this);
+            });
+        };
     }, []);
+    useEffect(() => {
+        layerStateRef.current = layerState;
+        getBandInfo();
+    }, [layerState]);
     useEffect(() => {
         bandRowsRef.current = bandRows;
         buildColorInfo();
     }, [bandRows]);
     useEffect(() => {
         stopRowsRef.current = stopRows;
-    }, [stopRows]);
-    useEffect(() => {
         selectedFunctionRef.current = selectedFunction;
-    }, [selectedFunction]);
-    const setInitialFunction = () => {
-        var _a;
-        if (!((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.color)) {
-            setSelectedFunction('linear');
-            return;
-        }
-        const color = layer.parameters.color;
-        if (color[0] === 'interpolate') {
-            setSelectedFunction('linear');
-            return;
-        }
-        // If expression is using 'case' we look at the comparison operator to set selected function
-        // Looking at fourth element because second is for nodata
-        const operator = color[3][0];
-        operator === '<='
-            ? setSelectedFunction('discrete')
-            : setSelectedFunction('exact');
+        colorRampOptionsRef.current = colorRampOptions;
+        selectedBandRef.current = selectedBand;
+        layerStateRef.current = layerState;
+    }, [stopRows, selectedFunction, colorRampOptions, selectedBand, layerState]);
+    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 layerParams = layer.parameters;
+        const band = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.band) !== null && _b !== void 0 ? _b : 1;
+        const interpolation = (_d = (_c = layerParams.symbologyState) === null || _c === void 0 ? void 0 : _c.interpolation) !== null && _d !== void 0 ? _d : 'linear';
+        setSelectedBand(band);
+        setSelectedFunction(interpolation);
+    };
+    const preloadGeoTiffFile = async (sourceInfo) => {
+        return await loadGeoTIFFWithCache(sourceInfo);
     };
     const getBandInfo = async () => {
         var _a, _b;
         const bandsArr = [];
         const source = context.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];
-        if (!sourceInfo.url) {
+        if (!(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url)) {
             return;
         }
-        let tifData;
-        const layerState = await state.fetch(`jupytergis:${layerId}`);
-        if (layerState) {
-            tifData = JSON.parse(layerState.tifData);
-        }
-        else {
-            const Gdal = await getGdal();
-            const fileData = await fetch(sourceInfo.url);
-            const file = new File([await fileData.blob()], 'loaded.tif');
-            const result = await Gdal.open(file);
-            const tifDataset = result.datasets[0];
-            tifData = await Gdal.gdalinfo(tifDataset, ['-stats']);
-            Gdal.close(tifDataset);
-            state.save(`jupytergis:${layerId}`, { tifData: JSON.stringify(tifData) });
-        }
-        tifData['bands'].forEach((bandData) => {
-            var _a, _b;
-            bandsArr.push({
-                band: bandData.band,
-                colorInterpretation: bandData.colorInterpretation,
-                stats: {
-                    minimum: (_a = sourceInfo.min) !== null && _a !== void 0 ? _a : bandData.minimum,
-                    maximum: (_b = sourceInfo.max) !== null && _b !== void 0 ? _b : bandData.maximum,
-                    mean: bandData.mean,
-                    stdDev: bandData.stdDev
-                },
-                metadata: bandData.metadata
+        // Preload the file only once
+        const preloadedFile = await preloadGeoTiffFile(sourceInfo);
+        const { file, metadata, sourceUrl } = Object.assign({}, preloadedFile);
+        if (file && metadata && sourceUrl === sourceInfo.url) {
+            metadata['bands'].forEach((bandData) => {
+                var _a, _b;
+                bandsArr.push({
+                    band: bandData.band,
+                    colorInterpretation: bandData.colorInterpretation,
+                    stats: {
+                        minimum: (_a = sourceInfo.min) !== null && _a !== void 0 ? _a : bandData.minimum,
+                        maximum: (_b = sourceInfo.max) !== null && _b !== void 0 ? _b : bandData.maximum,
+                        mean: bandData.mean,
+                        stdDev: bandData.stdDev
+                    },
+                    metadata: bandData.metadata,
+                    histogram: bandData.histogram
+                });
             });
-        });
-        setBandRows(bandsArr);
+            setBandRows(bandsArr);
+        }
     };
     const buildColorInfo = () => {
         var _a;
         // This it to parse a color object on the layer
-        if (!((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.color)) {
+        if (!((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.color) || !layerState) {
             return;
         }
         const color = layer.parameters.color;
@@ -103,6 +111,7 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
         if (typeof color === 'string') {
             return;
         }
+        const isQuantile = layerState.selectedMode === 'quantile';
         const valueColorPairs = [];
         // So if it's not a string then it's an array and we parse
         // Color[0] is the operator used for the color expression
@@ -115,7 +124,7 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                 // Sixth and on is value:color pairs
                 for (let i = 5; i < color.length; i += 2) {
                     const obj = {
-                        stop: scaleValue(color[i]),
+                        stop: scaleValue(color[i], isQuantile),
                         output: color[i + 1]
                     };
                     valueColorPairs.push(obj);
@@ -132,7 +141,7 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                 // Last element is fallback value
                 for (let i = 3; i < color.length - 1; i += 2) {
                     const obj = {
-                        stop: scaleValue(color[i][2]),
+                        stop: scaleValue(color[i][2], isQuantile),
                         output: color[i + 1]
                     };
                     valueColorPairs.push(obj);
@@ -143,7 +152,7 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
         setStopRows(valueColorPairs);
     };
     const handleOk = () => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         // Update source
         const bandRow = bandRowsRef.current[selectedBand - 1];
         if (!bandRow) {
@@ -154,6 +163,7 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
         if (!source || !source.parameters) {
             return;
         }
+        const isQuantile = ((_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.selectedMode) === 'quantile';
         const sourceInfo = source.parameters.urls[0];
         sourceInfo.min = bandRow.stats.minimum;
         sourceInfo.max = bandRow.stats.maximum;
@@ -171,8 +181,8 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                 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));
+                (_c = stopRowsRef.current) === null || _c === void 0 ? void 0 : _c.map(stop => {
+                    colorExpr.push(unscaleValue(stop.stop, isQuantile));
                     colorExpr.push(stop.output);
                 });
                 break;
@@ -182,11 +192,11 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                 // 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 => {
+                (_d = stopRowsRef.current) === null || _d === void 0 ? void 0 : _d.map(stop => {
                     colorExpr.push([
                         '<=',
                         ['band', selectedBand],
-                        unscaleValue(stop.stop)
+                        unscaleValue(stop.stop, isQuantile)
                     ]);
                     colorExpr.push(stop.output);
                 });
@@ -199,11 +209,11 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                 // 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 => {
+                (_e = stopRowsRef.current) === null || _e === void 0 ? void 0 : _e.map(stop => {
                     colorExpr.push([
                         '==',
                         ['band', selectedBand],
-                        unscaleValue(stop.stop)
+                        unscaleValue(stop.stop, isQuantile)
                     ]);
                     colorExpr.push(stop.output);
                 });
@@ -212,13 +222,19 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                 break;
             }
         }
+        const symbologyState = {
+            renderType: 'Singleband Pseudocolor',
+            band: selectedBandRef.current,
+            interpolation: selectedFunctionRef.current,
+            colorRamp: (_f = colorRampOptionsRef.current) === null || _f === void 0 ? void 0 : _f.selectedRamp,
+            nClasses: (_g = colorRampOptionsRef.current) === null || _g === void 0 ? void 0 : _g.numberOfShades,
+            mode: (_h = colorRampOptionsRef.current) === null || _h === void 0 ? void 0 : _h.selectedMode
+        };
+        layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = colorExpr;
         context.model.sharedModel.updateLayer(layerId, layer);
         cancel();
     };
-    okSignalPromise.promise.then(okSignal => {
-        okSignal.connect(handleOk);
-    });
     const addStopRow = () => {
         setStopRows([
             {
@@ -233,24 +249,55 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
         newFilters.splice(index, 1);
         setStopRows(newFilters);
     };
-    const scaleValue = (bandValue) => {
+    const buildColorInfoFromClassification = async (selectedMode, numberOfShades, selectedRamp, setIsLoading) => {
+        var _a, _b;
+        // Update layer state with selected options
+        setColorRampOptions({
+            selectedRamp,
+            numberOfShades,
+            selectedMode
+        });
+        let stops = [];
+        const currentBand = bandRows[selectedBand - 1];
+        const source = context.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 valueColorPairs = Utils.getValueColorPairs(stops, selectedRamp, nClasses);
+        setStopRows(valueColorPairs);
+    };
+    const scaleValue = (bandValue, isQuantile) => {
         const currentBand = bandRows[selectedBand - 1];
         if (!currentBand) {
             return bandValue;
         }
-        return ((bandValue * (currentBand.stats.maximum - currentBand.stats.minimum)) /
-            (1 - 0) +
-            currentBand.stats.minimum);
+        const min = isQuantile ? 1 : currentBand.stats.minimum;
+        const max = isQuantile ? 65535 : currentBand.stats.maximum;
+        return (bandValue * (max - min)) / (1 - 0) + min;
     };
-    const unscaleValue = (value) => {
+    const unscaleValue = (value, isQuantile) => {
         const currentBand = bandRowsRef.current[selectedBand - 1];
-        return ((value * (1 - 0) - currentBand.stats.minimum * (1 - 0)) /
-            (currentBand.stats.maximum - currentBand.stats.minimum));
+        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" }, bandRows.length === 0 ? (React.createElement("div", { className: "jp-gis-band-info-loading-container" },
-            React.createElement("span", null, "Fetching band info..."),
-            React.createElement(FontAwesomeIcon, { icon: faSpinner, className: "jp-gis-loading-spinner" }))) : (React.createElement(BandRow
+        React.createElement("div", { className: "jp-gis-band-container" }, bandRows.length === 0 ? (React.createElement(Spinner, { loading: bandRows.length === 0 })) : (React.createElement(BandRow
         // Band numbers are 1 indexed
         , { 
             // Band numbers are 1 indexed
@@ -261,6 +308,7 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                 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(ColorRamp, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: 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%' } },

package/lib/dialogs/{components/symbology → symbology/vector_layer}/VectorRendering.d.ts

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

package/lib/dialogs/{components/symbology → symbology/vector_layer}/VectorRendering.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import Graduated from './Graduated';
-import SimpleSymbol from './SimpleSymbol';
+import Graduated from './types/Graduated';
+import SimpleSymbol from './types/SimpleSymbol';
+import Categorized from './types/Categorized';
 const VectorRendering = ({ context, state, okSignalPromise, cancel, layerId }) => {
     const [selectedRenderType, setSelectedRenderType] = useState('Single Symbol');
     const [componentToRender, setComponentToRender] = useState(null);
@@ -16,20 +17,13 @@ const VectorRendering = ({ context, state, okSignalPromise, cancel, layerId }) =
         return;
     }
     useEffect(() => {
-        const getSelectedRenderType = async () => {
-            const layerState = await state.fetch(`jupytergis:${layerId}`);
-            if (!layerState) {
-                return;
-            }
-            const renderType = layerState
-                .renderType;
-            setSelectedRenderType(renderType !== null && renderType !== void 0 ? renderType : 'Single Symbol');
-        };
+        var _a, _b;
+        const renderType = (_b = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState) === null || _b === void 0 ? void 0 : _b.renderType;
+        setSelectedRenderType(renderType !== null && renderType !== void 0 ? renderType : 'Single Symbol');
         if (layer.type === 'VectorLayer') {
-            const options = ['Single Symbol', 'Graduated'];
+            const options = ['Single Symbol', 'Graduated', 'Categorized'];
             setRenderTypeOptions(options);
         }
-        getSelectedRenderType();
     }, []);
     useEffect(() => {
         switch (selectedRenderType) {
@@ -39,6 +33,9 @@ const VectorRendering = ({ context, state, okSignalPromise, cancel, layerId }) =
             case 'Graduated':
                 RenderComponent = (React.createElement(Graduated, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
                 break;
+            case 'Categorized':
+                RenderComponent = (React.createElement(Categorized, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
+                break;
             default:
                 RenderComponent = React.createElement("div", null, "Render Type Not Implemented (yet)");
         }

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

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

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

@@ -0,0 +1,7 @@
+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).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/Categorized.d.ts

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

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

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ValueSelect from '../components/ValueSelect';
+import { useGetProperties } from '../../hooks/useGetProperties';
+import StopContainer from '../../components/color_stops/StopContainer';
+import { Utils, VectorUtils } from '../../symbologyUtils';
+import ColorRamp from '../../components/color_ramp/ColorRamp';
+const Categorized = ({ context, state, okSignalPromise, cancel, layerId }) => {
+    const selectedValueRef = useRef();
+    const stopRowsRef = useRef();
+    const colorRampOptionsRef = useRef();
+    const [selectedValue, setSelectedValue] = useState('');
+    const [stopRows, setStopRows] = useState([]);
+    const [colorRampOptions, setColorRampOptions] = useState();
+    if (!layerId) {
+        return;
+    }
+    const layer = context.model.getLayer(layerId);
+    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+        return;
+    }
+    const { featureProps } = useGetProperties({
+        layerId,
+        model: context.model
+    });
+    useEffect(() => {
+        const valueColorPairs = VectorUtils.buildColorInfo(layer);
+        setStopRows(valueColorPairs);
+        okSignalPromise.promise.then(okSignal => {
+            okSignal.connect(handleOk, this);
+        });
+        return () => {
+            okSignalPromise.promise.then(okSignal => {
+                okSignal.disconnect(handleOk, this);
+            });
+        };
+    }, []);
+    useEffect(() => {
+        populateOptions();
+    }, [featureProps]);
+    useEffect(() => {
+        selectedValueRef.current = selectedValue;
+        stopRowsRef.current = stopRows;
+        colorRampOptionsRef.current = colorRampOptions;
+    }, [selectedValue, stopRows, colorRampOptions]);
+    const populateOptions = async () => {
+        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(featureProps)[0];
+        setSelectedValue(value);
+    };
+    const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp, setIsLoading) => {
+        setColorRampOptions({
+            selectedFunction: '',
+            selectedRamp,
+            numberOfShades: '',
+            selectedMode: ''
+        });
+        const stops = Array.from(featureProps[selectedValue]).sort((a, b) => a - b);
+        const valueColorPairs = Utils.getValueColorPairs(stops, selectedRamp, stops.length);
+        setStopRows(valueColorPairs);
+    };
+    const handleOk = () => {
+        var _a, _b, _c, _d;
+        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);
+        newStyle['circle-fill-color'] = colorExpr;
+        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
+        };
+        layer.parameters.symbologyState = symbologyState;
+        layer.parameters.color = newStyle;
+        context.model.sharedModel.updateLayer(layerId, layer);
+        cancel();
+    };
+    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        React.createElement(ValueSelect, { featureProperties: featureProps, selectedValue: selectedValue, setSelectedValue: setSelectedValue }),
+        React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: [], classifyFunc: buildColorInfoFromClassification, showModeRow: false }),
+        React.createElement(StopContainer, { selectedMethod: '', stopRows: stopRows, setStopRows: setStopRows })));
+};
+export default Categorized;