@jupytergis/base 0.5.0 → 0.6.0

package/lib/dialogs/symbology/symbologyUtils.js

@@ -12,36 +12,43 @@ export var VectorUtils;
         if (typeof color === 'string') {
             return [];
         }
-        const prefix = layer.parameters.type === 'circle' ? 'circle-' : '';
-        if (!color[`${prefix}fill-color`]) {
-            return [];
-        }
+        const keys = ['fill-color', 'circle-fill-color'];
         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
-        switch (color[`${prefix}fill-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 on is value:color pairs
-                for (let i = 3; i < color[`${prefix}fill-color`].length; i += 2) {
-                    const obj = {
-                        stop: color[`${prefix}fill-color`][i],
-                        output: color[`${prefix}fill-color`][i + 1]
-                    };
-                    valueColorPairs.push(obj);
-                }
-                break;
-            case 'case':
-                for (let i = 1; i < color[`${prefix}fill-color`].length - 1; i += 2) {
-                    const obj = {
-                        stop: color[`${prefix}fill-color`][i][2],
-                        output: color[`${prefix}fill-color`][i + 1]
-                    };
-                    valueColorPairs.push(obj);
-                }
-                break;
+        const seenPairs = new Set();
+        for (const key of keys) {
+            if (!color[key]) {
+                continue;
+            }
+            switch (color[key][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 on is value:color pairs
+                    for (let i = 3; i < color[key].length; i += 2) {
+                        const pairKey = `${color[key][i]}-${color[key][i + 1]}`;
+                        if (!seenPairs.has(pairKey)) {
+                            valueColorPairs.push({
+                                stop: color[key][i],
+                                output: color[key][i + 1],
+                            });
+                            seenPairs.add(pairKey);
+                        }
+                    }
+                    break;
+                case 'case':
+                    for (let i = 1; i < color[key].length - 1; i += 2) {
+                        const pairKey = `${color[key][i][2]}-${color[key][i + 1]}`;
+                        if (!seenPairs.has(pairKey)) {
+                            valueColorPairs.push({
+                                stop: color[key][i][2],
+                                output: color[key][i + 1],
+                            });
+                            seenPairs.add(pairKey);
+                        }
+                    }
+                    break;
+            }
         }
         return valueColorPairs;
     };
@@ -59,7 +66,7 @@ export var VectorUtils;
         for (let i = 3; i < color['circle-radius'].length; i += 2) {
             const obj = {
                 stop: color['circle-radius'][i],
-                output: color['circle-radius'][i + 1]
+                output: color['circle-radius'][i + 1],
             };
             stopOutputPairs.push(obj);
         }
@@ -72,7 +79,7 @@ export var Utils;
         let colorMap = colormap({
             colormap: selectedRamp,
             nshades: nClasses > 9 ? nClasses : 9,
-            format: 'rgba'
+            format: 'rgba',
         });
         const valueColorPairs = [];
         // colormap requires 9 classes to generate the ramp

package/lib/dialogs/symbology/tiff_layer/TiffRendering.d.ts

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

package/lib/dialogs/symbology/tiff_layer/TiffRendering.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
-import SingleBandPseudoColor from './types/SingleBandPseudoColor';
 import MultibandColor from './types/MultibandColor';
-const TiffRendering = ({ model, state, okSignalPromise, cancel, layerId }) => {
+import SingleBandPseudoColor from './types/SingleBandPseudoColor';
+const TiffRendering = ({ model, state, okSignalPromise, cancel, layerId, }) => {
     const renderTypes = ['Singleband Pseudocolor', 'Multiband Color'];
     const [selectedRenderType, setSelectedRenderType] = useState();
     const [componentToRender, setComponentToRender] = useState(null);

package/lib/dialogs/symbology/tiff_layer/components/BandRow.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IBandRow } from '../../hooks/useGetBandInfo';
+import { IBandRow } from "../../hooks/useGetBandInfo";
 interface IBandRowProps {
     label: string;
     index: number;
@@ -19,5 +19,5 @@ interface IBandRowProps {
  * @param setBandRows Function to update band rows in parent
  * @param isMultibandColor Used to hide min/max input and add 'Unset' option to drop down menu for MultiBand symbology
  */
-declare const BandRow: ({ label, index, bandRow, bandRows, setSelectedBand, setBandRows, isMultibandColor }: IBandRowProps) => React.JSX.Element;
+declare const BandRow: React.FC<IBandRowProps>;
 export default BandRow;

package/lib/dialogs/symbology/tiff_layer/components/BandRow.js

@@ -9,7 +9,7 @@ import React, { useState } from 'react';
  * @param setBandRows Function to update band rows in parent
  * @param isMultibandColor Used to hide min/max input and add 'Unset' option to drop down menu for MultiBand symbology
  */
-const BandRow = ({ label, index, bandRow, bandRows, setSelectedBand, setBandRows, isMultibandColor }) => {
+const BandRow = ({ label, index, bandRow, bandRows, setSelectedBand, setBandRows, isMultibandColor, }) => {
     const [minValue, setMinValue] = useState(bandRow === null || bandRow === void 0 ? void 0 : bandRow.stats.minimum);
     const [maxValue, setMaxValue] = useState(bandRow === null || bandRow === void 0 ? void 0 : bandRow.stats.maximum);
     const handleMinValueChange = (event) => {
@@ -36,12 +36,12 @@ const BandRow = ({ label, index, bandRow, bandRows, setSelectedBand, setBandRows
                     bandRows.map((band, bandIndex) => (React.createElement("option", { key: bandIndex, value: band.band, selected: band.band === (bandRow === null || bandRow === void 0 ? void 0 : bandRow.band), className: "jp-mod-styled" }, band.colorInterpretation
                         ? `Band ${band.band} (${band.colorInterpretation})`
                         : `Band ${band.band}`))),
-                    isMultibandColor ? (React.createElement("option", { key: 'unset', value: 0, selected: !bandRow, className: "jp-mod-styled" }, "Unset")) : null))),
+                    isMultibandColor ? (React.createElement("option", { key: 'unset', value: -1, selected: !bandRow, className: "jp-mod-styled" }, "Unset")) : null))),
         isMultibandColor ? null : (React.createElement("div", { className: "jp-gis-symbology-row", style: { gap: '0.5rem' } },
             React.createElement("div", { style: {
                     display: 'flex',
                     justifyContent: 'space-between',
-                    width: '50%'
+                    width: '50%',
                 } },
                 React.createElement("label", { htmlFor: "band-min", style: { alignSelf: 'center' } }, "Min"),
                 React.createElement("input", { type: "number", className: "jp-mod-styled", style: { marginRight: 15 }, value: minValue, onChange: handleMinValueChange })),
@@ -49,7 +49,7 @@ const BandRow = ({ label, index, bandRow, bandRows, setSelectedBand, setBandRows
                     display: 'flex',
                     justifyContent: 'space-between',
                     width: '50%',
-                    paddingRight: '2px'
+                    paddingRight: '2px',
                 } },
                 React.createElement("label", { htmlFor: "band-max", style: { alignSelf: 'center' } }, "Max"),
                 React.createElement("input", { type: "number", className: "jp-mod-styled", 

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

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

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

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Spinner } from '../../../../mainview/spinner';
-import useGetBandInfo from '../../hooks/useGetBandInfo';
-import BandRow from '../components/BandRow';
-const MultibandColor = ({ model, okSignalPromise, cancel, layerId }) => {
+import useGetBandInfo from "../../hooks/useGetBandInfo";
+import BandRow from "../components/BandRow";
+import { LoadingOverlay } from "../../../../shared/components/loading";
+const MultibandColor = ({ model, okSignalPromise, cancel, layerId, }) => {
     if (!layerId) {
         return;
     }
@@ -14,13 +14,15 @@ const MultibandColor = ({ model, okSignalPromise, cancel, layerId }) => {
     const [selectedBands, setSelectedBands] = useState({
         red: 1,
         green: 2,
-        blue: 3
+        blue: 3,
+        alpha: 4,
     });
     const numOfBandsRef = useRef(0);
     const selectedBandsRef = useRef({
         red: selectedBands.red,
         green: selectedBands.green,
-        blue: selectedBands.blue
+        blue: selectedBands.blue,
+        alpha: selectedBands.alpha,
     });
     useEffect(() => {
         populateOptions();
@@ -40,12 +42,13 @@ const MultibandColor = ({ model, okSignalPromise, cancel, layerId }) => {
         selectedBandsRef.current = selectedBands;
     }, [selectedBands]);
     const populateOptions = async () => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const layerParams = layer.parameters;
         const red = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.redBand) !== null && _b !== void 0 ? _b : 1;
         const green = (_d = (_c = layerParams.symbologyState) === null || _c === void 0 ? void 0 : _c.greenBand) !== null && _d !== void 0 ? _d : 2;
         const blue = (_f = (_e = layerParams.symbologyState) === null || _e === void 0 ? void 0 : _e.blueBand) !== null && _f !== void 0 ? _f : 3;
-        setSelectedBands({ red, green, blue });
+        const alpha = (_h = (_g = layerParams.symbologyState) === null || _g === void 0 ? void 0 : _g.alphaBand) !== null && _h !== void 0 ? _h : 4;
+        setSelectedBands({ red, green, blue, alpha });
     };
     const updateBand = (color, value) => {
         setSelectedBands(prevBands => (Object.assign(Object.assign({}, prevBands), { [color]: value })));
@@ -56,19 +59,24 @@ const MultibandColor = ({ model, okSignalPromise, cancel, layerId }) => {
             return;
         }
         const colorExpr = ['array'];
-        const rgb = ['red', 'green', 'blue'];
-        rgb.forEach(color => {
+        const colors = ['red', 'green', 'blue'];
+        colors.forEach(color => {
             const bandValue = selectedBandsRef.current[color];
             colorExpr.push(bandValue !== 0 ? ['band', bandValue] : 0);
         });
-        // Array expression expects 4 values
-        // Last band should be alpha band added by OpenLayers
-        colorExpr.push(['band', numOfBandsRef.current + 1]);
+        // Push alpha if selected, else default to 0
+        if (selectedBandsRef.current.alpha) {
+            colorExpr.push(['band', selectedBandsRef.current.alpha]);
+        }
+        else {
+            colorExpr.push(['band', numOfBandsRef.current + 1]);
+        }
         const symbologyState = {
             renderType: 'Multiband Color',
-            redBand: selectedBandsRef.current['red'],
-            greenBand: selectedBandsRef.current['green'],
-            blueBand: selectedBandsRef.current['blue']
+            redBand: selectedBandsRef.current.red,
+            greenBand: selectedBandsRef.current.green,
+            blueBand: selectedBandsRef.current.blue,
+            alphaBand: selectedBandsRef.current.alpha,
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = colorExpr;
@@ -77,9 +85,11 @@ const MultibandColor = ({ model, okSignalPromise, cancel, layerId }) => {
         cancel();
     };
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement("div", { className: "jp-gis-band-container" }, loading ? (React.createElement(Spinner, { loading: loading })) : (React.createElement(React.Fragment, null,
-            React.createElement(BandRow, { label: "Red Band", index: selectedBands['red'] - 1, bandRow: bandRows[selectedBands['red'] - 1], bandRows: bandRows, setSelectedBand: val => updateBand('red', val), setBandRows: setBandRows, isMultibandColor: true }),
-            React.createElement(BandRow, { label: "Green Band", index: selectedBands['green'] - 1, bandRow: bandRows[selectedBands['green'] - 1], bandRows: bandRows, setSelectedBand: val => updateBand('green', val), setBandRows: setBandRows, isMultibandColor: true }),
-            React.createElement(BandRow, { label: "Blue Band", index: selectedBands['blue'] - 1, bandRow: bandRows[selectedBands['blue'] - 1], bandRows: bandRows, setSelectedBand: val => updateBand('blue', val), setBandRows: setBandRows, isMultibandColor: true }))))));
+        React.createElement("div", { className: "jp-gis-band-container" },
+            React.createElement(LoadingOverlay, { loading: loading }),
+            React.createElement(BandRow, { label: "Red Band", index: selectedBands.red - 1, bandRow: bandRows[selectedBands.red - 1], bandRows: bandRows, setSelectedBand: val => updateBand('red', val >= 0 ? val + 1 : 0), setBandRows: setBandRows, isMultibandColor: true }),
+            React.createElement(BandRow, { label: "Green Band", index: selectedBands.green - 1, bandRow: bandRows[selectedBands.green - 1], bandRows: bandRows, setSelectedBand: val => updateBand('green', val >= 0 ? val + 1 : 0), setBandRows: setBandRows, isMultibandColor: true }),
+            React.createElement(BandRow, { label: "Blue Band", index: selectedBands.blue - 1, bandRow: bandRows[selectedBands.blue - 1], bandRows: bandRows, setSelectedBand: val => updateBand('blue', val >= 0 ? val + 1 : 0), setBandRows: setBandRows, isMultibandColor: true }),
+            React.createElement(BandRow, { label: "Alpha Band", index: selectedBands.alpha - 1, bandRow: bandRows[selectedBands.alpha - 1], bandRows: bandRows, setSelectedBand: val => updateBand('alpha', val >= 0 ? val + 1 : 0), setBandRows: setBandRows, isMultibandColor: true }))));
 };
 export default MultibandColor;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ISymbologyDialogProps } from '../../symbologyDialog';
+import { ISymbologyDialogProps } from "../../symbologyDialog";
 export type InterpolationType = 'discrete' | 'linear' | 'exact';
-declare const SingleBandPseudoColor: ({ model, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
+declare const SingleBandPseudoColor: React.FC<ISymbologyDialogProps>;
 export default SingleBandPseudoColor;

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

@@ -1,14 +1,14 @@
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
-import { Spinner } from '../../../../mainview/spinner';
-import { GlobalStateDbManager } from '../../../../store';
-import { GeoTiffClassifications } from '../../classificationModes';
-import ColorRamp from '../../components/color_ramp/ColorRamp';
-import StopRow from '../../components/color_stops/StopRow';
-import useGetBandInfo from '../../hooks/useGetBandInfo';
-import { Utils } from '../../symbologyUtils';
-import BandRow from '../components/BandRow';
-const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId }) => {
+import { GeoTiffClassifications } from "../../classificationModes";
+import ColorRamp from "../../components/color_ramp/ColorRamp";
+import StopRow from "../../components/color_stops/StopRow";
+import useGetBandInfo from "../../hooks/useGetBandInfo";
+import { Utils } from "../../symbologyUtils";
+import BandRow from "../components/BandRow";
+import { LoadingOverlay } from "../../../../shared/components/loading";
+import { GlobalStateDbManager } from "../../../../store";
+const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId, }) => {
     if (!layerId) {
         return;
     }
@@ -86,7 +86,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId }) => {
                 for (let i = 5; i < color.length; i += 2) {
                     const obj = {
                         stop: scaleValue(color[i], isQuantile),
-                        output: color[i + 1]
+                        output: color[i + 1],
                     };
                     valueColorPairs.push(obj);
                 }
@@ -103,7 +103,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId }) => {
                 for (let i = 3; i < color.length - 1; i += 2) {
                     const obj = {
                         stop: scaleValue(color[i][2], isQuantile),
-                        output: color[i + 1]
+                        output: color[i + 1],
                     };
                     valueColorPairs.push(obj);
                 }
@@ -157,7 +157,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId }) => {
                     colorExpr.push([
                         '<=',
                         ['band', selectedBand],
-                        unscaleValue(stop.stop, isQuantile)
+                        unscaleValue(stop.stop, isQuantile),
                     ]);
                     colorExpr.push(stop.output);
                 });
@@ -174,7 +174,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId }) => {
                     colorExpr.push([
                         '==',
                         ['band', selectedBand],
-                        unscaleValue(stop.stop, isQuantile)
+                        unscaleValue(stop.stop, isQuantile),
                     ]);
                     colorExpr.push(stop.output);
                 });
@@ -189,7 +189,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId }) => {
             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
+            mode: (_h = colorRampOptionsRef.current) === null || _h === void 0 ? void 0 : _h.selectedMode,
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = colorExpr;
@@ -201,9 +201,9 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId }) => {
         setStopRows([
             {
                 stop: 0,
-                output: [0, 0, 0, 1]
+                output: [0, 0, 0, 1],
             },
-            ...stopRows
+            ...stopRows,
         ]);
     };
     const deleteStopRow = (index) => {
@@ -217,7 +217,7 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId }) => {
         setColorRampOptions({
             selectedRamp,
             numberOfShades,
-            selectedMode
+            selectedMode,
         });
         let stops = [];
         const currentBand = bandRows[selectedBand - 1];
@@ -259,16 +259,18 @@ const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId }) => {
         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" }, loading ? (React.createElement(Spinner, { 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-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(ColorRamp, { layerParams: layer.parameters, modeOptions: modeOptions, classifyFunc: buildColorInfoFromClassification, showModeRow: true })),
+        bandRows.length > 0 && (React.createElement(ColorRamp, { layerParams: layer.parameters, 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%' } },

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

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

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

@@ -1,15 +1,63 @@
 import React, { useEffect, useState } from 'react';
+import { useGetProperties } from "../hooks/useGetProperties";
+import { getColorCodeFeatureAttributes, 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 VectorRendering = ({ model, state, okSignalPromise, cancel, layerId }) => {
-    const [selectedRenderType, setSelectedRenderType] = useState('');
-    const [componentToRender, setComponentToRender] = useState(null);
-    const [renderTypeOptions, setRenderTypeOptions] = useState([
-        'Single Symbol'
+const RENDER_TYPE_OPTIONS = {
+    'Single Symbol': {
+        component: SimpleSymbol,
+        supportedLayerTypes: ['VectorLayer', 'VectorTileLayer', 'HeatmapLayer'],
+        isTabbed: true,
+    },
+    Canonical: {
+        component: Canonical,
+        attributeChecker: getColorCodeFeatureAttributes,
+        supportedLayerTypes: ['VectorLayer', 'HeatmapLayer'],
+        isTabbed: false,
+    },
+    Graduated: {
+        component: Graduated,
+        attributeChecker: getNumericFeatureAttributes,
+        supportedLayerTypes: ['VectorLayer', 'HeatmapLayer'],
+        isTabbed: true,
+    },
+    Categorized: {
+        component: Categorized,
+        attributeChecker: getNumericFeatureAttributes,
+        supportedLayerTypes: ['VectorLayer', '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) }),
     ]);
-    let RenderComponent;
+    return Object.fromEntries(entries);
+};
+const useLayerRenderType = (layer, setSelectedRenderType) => useEffect(() => {
+    var _a, _b;
+    let renderType = (_b = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState) === null || _b === void 0 ? void 0 : _b.renderType;
+    if (!renderType) {
+        renderType = layer.type === 'HeatmapLayer' ? 'Heatmap' : 'Single Symbol';
+    }
+    setSelectedRenderType(renderType);
+}, []);
+const VectorRendering = ({ model, state, okSignalPromise, cancel, layerId, }) => {
+    const [selectedRenderType, setSelectedRenderType] = useState();
+    const [symbologyTab, setSymbologyTab] = useState('color');
     if (!layerId) {
         return;
     }
@@ -17,41 +65,35 @@ const VectorRendering = ({ model, state, okSignalPromise, cancel, layerId }) =>
     if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
         return;
     }
-    useEffect(() => {
-        var _a, _b;
-        let renderType = (_b = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState) === null || _b === void 0 ? void 0 : _b.renderType;
-        if (!renderType) {
-            renderType = layer.type === 'HeatmapLayer' ? 'Heatmap' : 'Single Symbol';
-        }
-        setSelectedRenderType(renderType);
-        const options = ['Single Symbol', 'Graduated', 'Categorized', 'Heatmap'];
-        setRenderTypeOptions(options);
-    }, []);
-    useEffect(() => {
-        switch (selectedRenderType) {
-            case 'Single Symbol':
-                RenderComponent = (React.createElement(SimpleSymbol, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
-                break;
-            case 'Graduated':
-                RenderComponent = (React.createElement(Graduated, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
-                break;
-            case 'Categorized':
-                RenderComponent = (React.createElement(Categorized, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
-                break;
-            case 'Heatmap':
-                RenderComponent = (React.createElement(Heatmap, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
-                break;
-            default:
-                RenderComponent = React.createElement("div", null, "Select a render type");
-        }
-        setComponentToRender(RenderComponent);
-    }, [selectedRenderType]);
+    const { featureProperties, isLoading: featuresLoading } = useGetProperties({
+        layerId,
+        model: model,
+    });
+    useLayerRenderType(layer, setSelectedRenderType);
+    if (featuresLoading) {
+        return React.createElement("p", null, "Loading...");
+    }
+    if (selectedRenderType === undefined) {
+        // typeguard
+        return;
+    }
+    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'].map(tab => (React.createElement("button", { key: tab, className: `jp-gis-tab ${symbologyTab === tab ? 'active' : ''}`, onClick: () => setSymbologyTab(tab) }, tab.charAt(0).toUpperCase() + tab.slice(1)))))),
         React.createElement("div", { className: "jp-gis-symbology-row" },
             React.createElement("label", { htmlFor: "render-type-select" }, "Render Type:"),
-            React.createElement("select", { name: "render-type-select", id: "render-type-select", value: selectedRenderType, onChange: event => {
-                    setSelectedRenderType(event.target.value);
-                } }, renderTypeOptions.map((func, funcIndex) => (React.createElement("option", { key: func, value: func }, func))))),
-        componentToRender));
+            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)))))),
+        React.createElement(selectedRenderTypeProps.component, Object.assign({ model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }, (selectedRenderTypeProps.isTabbed ? { symbologyTab } : {}), (selectedRenderTypeProps.selectableAttributesAndValues
+            ? {
+                selectableAttributesAndValues: selectedRenderTypeProps.selectableAttributesAndValues,
+            }
+            : {})))));
 };
 export default VectorRendering;

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

@@ -4,5 +4,5 @@ interface IValueSelectProps {
     selectedValue: string;
     setSelectedValue: (value: string) => void;
 }
-declare const ValueSelect: ({ featureProperties, selectedValue, setSelectedValue }: IValueSelectProps) => React.JSX.Element;
+declare const ValueSelect: React.FC<IValueSelectProps>;
 export default ValueSelect;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-const ValueSelect = ({ featureProperties, selectedValue, setSelectedValue }) => {
+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))))));

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,66 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ValueSelect from "../components/ValueSelect";
+const Canonical = ({ model, state, okSignalPromise, cancel, layerId, selectableAttributesAndValues, }) => {
+    const selectedValueRef = useRef();
+    const [selectedValue, setSelectedValue] = useState('');
+    if (!layerId) {
+        return;
+    }
+    const layer = model.getLayer(layerId);
+    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+        return;
+    }
+    useEffect(() => {
+        okSignalPromise.promise.then(okSignal => {
+            okSignal.connect(handleOk, this);
+        });
+        return () => {
+            okSignalPromise.promise.then(okSignal => {
+                okSignal.disconnect(handleOk, this);
+            });
+        };
+    }, [selectedValue]);
+    useEffect(() => {
+        var _a, _b;
+        const layerParams = layer.parameters;
+        const value = (_b = (_a = layerParams.symbologyState) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : Object.keys(selectableAttributesAndValues)[0];
+        setSelectedValue(value);
+    }, [selectableAttributesAndValues]);
+    useEffect(() => {
+        selectedValueRef.current = selectedValue;
+    }, [selectedValue]);
+    const handleOk = () => {
+        if (!layer.parameters) {
+            return;
+        }
+        const colorExpr = ['get', selectedValue];
+        const newStyle = Object.assign({}, layer.parameters.color);
+        newStyle['fill-color'] = colorExpr;
+        newStyle['stroke-color'] = colorExpr;
+        newStyle['circle-fill-color'] = colorExpr;
+        const symbologyState = {
+            renderType: 'Canonical',
+            value: selectedValueRef.current,
+        };
+        layer.parameters.symbologyState = symbologyState;
+        layer.parameters.color = newStyle;
+        if (layer.type === 'HeatmapLayer') {
+            layer.type = 'VectorLayer';
+        }
+        model.sharedModel.updateLayer(layerId, layer);
+        cancel();
+    };
+    const body = (() => {
+        var _a;
+        if (((_a = Object.keys(selectableAttributesAndValues)) === null || _a === void 0 ? void 0 : _a.length) === 0) {
+            return (React.createElement("p", { className: "errors" }, "This symbology type is not available; no attributes contain a hex color code."));
+        }
+        else {
+            return (React.createElement(ValueSelect, { featureProperties: selectableAttributesAndValues, selectedValue: selectedValue, setSelectedValue: setSelectedValue }));
+        }
+    })();
+    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        React.createElement("p", null, "Color features based on an attribute containing a hex color code."),
+        body));
+};
+export default Canonical;