@jupytergis/base 0.1.6 → 0.1.7

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

@@ -1,57 +1,71 @@
-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 { getGdal } from '../../../../gdal';
+import { Spinner } from '../../../../mainview/spinner';
+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 getBandInfo = async () => {
         var _a, _b;
@@ -62,8 +76,7 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
             return;
         }
         let tifData;
-        const layerState = await state.fetch(`jupytergis:${layerId}`);
-        if (layerState) {
+        if (layerState && layerState.tifData) {
             tifData = JSON.parse(layerState.tifData);
         }
         else {
@@ -74,7 +87,9 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
             const tifDataset = result.datasets[0];
             tifData = await Gdal.gdalinfo(tifDataset, ['-stats']);
             Gdal.close(tifDataset);
-            state.save(`jupytergis:${layerId}`, { tifData: JSON.stringify(tifData) });
+            await (stateDb === null || stateDb === void 0 ? void 0 : stateDb.save(`jupytergis:${layerId}`, {
+                tifData: JSON.stringify(tifData)
+            }));
         }
         tifData['bands'].forEach((bandData) => {
             var _a, _b;
@@ -87,7 +102,8 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                     mean: bandData.mean,
                     stdDev: bandData.stdDev
                 },
-                metadata: bandData.metadata
+                metadata: bandData.metadata,
+                histogram: bandData.histogram
             });
         });
         setBandRows(bandsArr);
@@ -95,7 +111,7 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
     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 +119,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 +132,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 +149,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 +160,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 +171,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 +189,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 +200,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 +217,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 +230,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 +257,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 +316,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;

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

@@ -0,0 +1,169 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { VectorClassifications } from '../../classificationModes';
+import ColorRamp from '../../components/color_ramp/ColorRamp';
+import ValueSelect from '../components/ValueSelect';
+import StopContainer from '../../components/color_stops/StopContainer';
+import { useGetProperties } from '../../hooks/useGetProperties';
+import { Utils, VectorUtils } from '../../symbologyUtils';
+const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
+    const modeOptions = [
+        'quantile',
+        'equal interval',
+        'jenks',
+        'pretty',
+        'logarithmic'
+    ];
+    const selectedValueRef = useRef();
+    const selectedMethodRef = useRef();
+    const stopRowsRef = useRef();
+    const colorRampOptionsRef = useRef();
+    const [selectedValue, setSelectedValue] = useState('');
+    const [selectedMethod, setSelectedMethod] = useState('color');
+    const [stopRows, setStopRows] = useState([]);
+    const [methodOptions, setMethodOptions] = useState(['color']);
+    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(() => {
+        var _a, _b;
+        let stopOutputPairs = [];
+        const layerParams = layer.parameters;
+        const method = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.method) !== null && _b !== void 0 ? _b : 'color';
+        if (method === 'color') {
+            stopOutputPairs = VectorUtils.buildColorInfo(layer);
+        }
+        if (method === 'radius') {
+            stopOutputPairs = VectorUtils.buildRadiusInfo(layer);
+        }
+        setStopRows(stopOutputPairs);
+        okSignalPromise.promise.then(okSignal => {
+            okSignal.connect(handleOk, this);
+        });
+        return () => {
+            okSignalPromise.promise.then(okSignal => {
+                okSignal.disconnect(handleOk, this);
+            });
+        };
+    }, []);
+    useEffect(() => {
+        selectedValueRef.current = selectedValue;
+        selectedMethodRef.current = selectedMethod;
+        stopRowsRef.current = stopRows;
+        colorRampOptionsRef.current = colorRampOptions;
+    }, [selectedValue, selectedMethod, stopRows, colorRampOptions]);
+    useEffect(() => {
+        populateOptions();
+    }, [featureProps]);
+    const populateOptions = async () => {
+        var _a, _b, _c, _d, _e;
+        // Set up method options
+        if (((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.type) === 'circle') {
+            const options = ['color', 'radius'];
+            setMethodOptions(options);
+        }
+        const layerParams = layer.parameters;
+        const value = (_c = (_b = layerParams.symbologyState) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : Object.keys(featureProps)[0];
+        const method = (_e = (_d = layerParams.symbologyState) === null || _d === void 0 ? void 0 : _d.method) !== null && _e !== void 0 ? _e : 'color';
+        setSelectedValue(value);
+        setSelectedMethod(method);
+    };
+    const handleOk = () => {
+        var _a, _b, _c, _d;
+        if (!layer.parameters) {
+            return;
+        }
+        const colorExpr = [];
+        colorExpr.push('interpolate');
+        colorExpr.push(['linear']);
+        colorExpr.push(['get', selectedValueRef.current]);
+        (_a = stopRowsRef.current) === null || _a === void 0 ? void 0 : _a.map(stop => {
+            colorExpr.push(stop.stop);
+            colorExpr.push(stop.output);
+        });
+        const newStyle = Object.assign({}, layer.parameters.color);
+        if (selectedMethodRef.current === 'color') {
+            if (layer.parameters.type === 'fill') {
+                newStyle['fill-color'] = colorExpr;
+            }
+            if (layer.parameters.type === 'line') {
+                newStyle['stroke-color'] = colorExpr;
+            }
+            if (layer.parameters.type === 'circle') {
+                newStyle['circle-fill-color'] = colorExpr;
+            }
+        }
+        if (selectedMethodRef.current === 'radius') {
+            if (layer.parameters.type === 'circle') {
+                newStyle['circle-radius'] = colorExpr;
+            }
+        }
+        const symbologyState = {
+            renderType: 'Graduated',
+            value: selectedValueRef.current,
+            method: selectedMethodRef.current,
+            colorRamp: (_b = colorRampOptionsRef.current) === null || _b === void 0 ? void 0 : _b.selectedRamp,
+            nClasses: (_c = colorRampOptionsRef.current) === null || _c === void 0 ? void 0 : _c.numberOfShades,
+            mode: (_d = colorRampOptionsRef.current) === null || _d === void 0 ? void 0 : _d.selectedMode
+        };
+        layer.parameters.symbologyState = symbologyState;
+        layer.parameters.color = newStyle;
+        context.model.sharedModel.updateLayer(layerId, layer);
+        cancel();
+    };
+    const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp) => {
+        setColorRampOptions({
+            selectedRamp,
+            numberOfShades,
+            selectedMode
+        });
+        let stops;
+        const values = Array.from(featureProps[selectedValue]);
+        switch (selectedMode) {
+            case 'quantile':
+                stops = VectorClassifications.calculateQuantileBreaks(values, +numberOfShades);
+                break;
+            case 'equal interval':
+                stops = VectorClassifications.calculateEqualIntervalBreaks(values, +numberOfShades);
+                break;
+            case 'jenks':
+                stops = VectorClassifications.calculateJenksBreaks(values, +numberOfShades);
+                break;
+            case 'pretty':
+                stops = VectorClassifications.calculatePrettyBreaks(values, +numberOfShades);
+                break;
+            case 'logarithmic':
+                stops = VectorClassifications.calculateLogarithmicBreaks(values, +numberOfShades);
+                break;
+            default:
+                console.warn('No mode selected');
+                return;
+        }
+        let stopOutputPairs = [];
+        if (selectedMethod === 'radius') {
+            for (let i = 0; i < +numberOfShades; i++) {
+                stopOutputPairs.push({ stop: stops[i], output: stops[i] });
+            }
+        }
+        else {
+            stopOutputPairs = Utils.getValueColorPairs(stops, selectedRamp, +numberOfShades);
+        }
+        setStopRows(stopOutputPairs);
+    };
+    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        React.createElement(ValueSelect, { featureProperties: featureProps, selectedValue: selectedValue, setSelectedValue: setSelectedValue }),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-method-select' }, "Method:"),
+            React.createElement("select", { name: 'vector-method-select', onChange: event => setSelectedMethod(event.target.value), className: "jp-mod-styled" }, methodOptions.map((method, index) => (React.createElement("option", { key: index, value: method, selected: method === selectedMethod, className: "jp-mod-styled" }, method))))),
+        React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true }),
+        React.createElement(StopContainer, { selectedMethod: selectedMethod, stopRows: stopRows, setStopRows: setStopRows })));
+};
+export default Graduated;