@jupytergis/base 0.1.2 → 0.1.3

package/lib/dialogs/components/symbology/Graduated.d.ts

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

package/lib/dialogs/components/symbology/Graduated.js

@@ -0,0 +1,188 @@
+import { Button } from '@jupyterlab/ui-components';
+import React, { useEffect, useRef, useState } from 'react';
+import StopRow from './StopRow';
+const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
+    const selectedValueRef = useRef();
+    const selectedMethodRef = useRef();
+    const stopRowsRef = useRef();
+    const layerStateRef = useRef();
+    const [selectedValue, setSelectedValue] = useState('');
+    const [featureProperties, setFeatureProperties] = useState({});
+    const [selectedMethod, setSelectedMethod] = useState('color');
+    const [stopRows, setStopRows] = useState([]);
+    const [methodOptions, setMethodOptions] = useState(['color']);
+    const [layerState, setLayerState] = useState();
+    if (!layerId) {
+        return;
+    }
+    const layer = context.model.getLayer(layerId);
+    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+        return;
+    }
+    useEffect(() => {
+        const getProperties = async () => {
+            var _a, _b;
+            if (!layerId) {
+                return;
+            }
+            const model = context.model;
+            const layer = model.getLayer(layerId);
+            const source = model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
+            if (!source) {
+                return;
+            }
+            const data = await model.readGeoJSON((_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path);
+            const featureProps = {};
+            data === null || data === void 0 ? void 0 : data.features.forEach((feature) => {
+                feature.properties &&
+                    Object.entries(feature.properties).forEach(([key, value]) => {
+                        if (!(key in featureProps)) {
+                            featureProps[key] = new Set();
+                        }
+                        featureProps[key].add(value);
+                    });
+                setFeatureProperties(featureProps);
+            });
+        };
+        getProperties();
+        buildColorInfo();
+        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;
+        layerStateRef.current = layerState;
+    }, [selectedValue, selectedMethod, stopRows, layerState]);
+    useEffect(() => {
+        populateOptions();
+    }, [featureProperties]);
+    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)) {
+            return;
+        }
+        const color = layer.parameters.color;
+        // If color is a string we don't need to parse
+        if (typeof color === 'string') {
+            return;
+        }
+        const prefix = layer.parameters.type === 'circle' ? 'circle-' : '';
+        if (!color[`${prefix}fill-color`]) {
+            return;
+        }
+        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;
+            }
+        }
+        setStopRows(valueColorPairs);
+    };
+    const populateOptions = async () => {
+        var _a;
+        // 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 layerState = await state.fetch(`jupytergis:${layerId}`);
+        let value, method;
+        if (layerState) {
+            value = layerState
+                .graduatedValue;
+            method = layerState
+                .graduatedMethod;
+        }
+        setLayerState(layerState);
+        setSelectedValue(value ? value : Object.keys(featureProperties)[0]);
+        setSelectedMethod(method ? method : 'color');
+    };
+    const handleOk = () => {
+        var _a;
+        if (!layer.parameters) {
+            return;
+        }
+        state.save(`jupytergis:${layerId}`, Object.assign(Object.assign({}, layerStateRef.current), { renderType: 'Graduated', graduatedValue: selectedValueRef.current, graduatedMethod: selectedMethodRef.current }));
+        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;
+            }
+        }
+        layer.parameters.color = newStyle;
+        context.model.sharedModel.updateLayer(layerId, layer);
+        cancel();
+    };
+    const addStopRow = () => {
+        setStopRows([
+            {
+                stop: 0,
+                output: [0, 0, 0, 1]
+            },
+            ...stopRows
+        ]);
+    };
+    const deleteStopRow = (index) => {
+        const newFilters = [...stopRows];
+        newFilters.splice(index, 1);
+        setStopRows(newFilters);
+    };
+    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-value-select' }, "Value:"),
+            React.createElement("div", { className: "jp-select-wrapper" },
+                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)))))),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-method-select' }, "Method:"),
+            React.createElement("div", { className: "jp-select-wrapper" },
+                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("div", { className: "jp-gis-stop-container" },
+            React.createElement("div", { className: "jp-gis-stop-labels", style: { display: 'flex', gap: 6 } },
+                React.createElement("span", { style: { flex: '0 0 18%' } }, "Value"),
+                React.createElement("span", null, "Output Value")),
+            stopRows.map((stop, index) => (React.createElement(StopRow, { key: `${index}-${stop.output}`, index: index, value: stop.stop, outputValue: stop.output, stopRows: stopRows, setStopRows: setStopRows, deleteRow: () => deleteStopRow(index), useNumber: selectedMethod === 'radius' ? true : false })))),
+        React.createElement("div", { className: "jp-gis-symbology-button-container" },
+            React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: addStopRow }, "Add Stop"))));
+};
+export default Graduated;

package/lib/dialogs/components/symbology/SimpleSymbol.d.ts

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

package/lib/dialogs/components/symbology/SimpleSymbol.js

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { parseColor } from '../../../tools';
+const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
+    const styleRef = useRef();
+    const layerStateRef = useRef();
+    const [layerState, setLayerState] = useState();
+    const [useCircleStuff, setUseCircleStuff] = useState(false);
+    const [style, setStyle] = useState({
+        fillColor: '#3399CC',
+        joinStyle: 'round',
+        strokeColor: '#3399CC',
+        capStyle: 'round',
+        strokeWidth: 1.25,
+        radius: 5
+    });
+    const joinStyleOptions = ['bevel', 'round', 'miter'];
+    const capStyleOptions = ['butt', 'round', 'square'];
+    if (!layerId) {
+        return;
+    }
+    const layer = context.model.getLayer(layerId);
+    if (!layer) {
+        return;
+    }
+    useEffect(() => {
+        if (!layer.parameters) {
+            return;
+        }
+        setUseCircleStuff(layer.parameters.type === 'circle');
+        // Mimicking QGIS here,
+        // Read values from file if we chose them using the single symbol thing
+        // but if we're switching to simple symbol, use defaults
+        const initStyle = async () => {
+            if (!layer.parameters) {
+                return;
+            }
+            const layerState = await state.fetch(`jupytergis:${layerId}`);
+            if (!layerState) {
+                return;
+            }
+            setLayerState(layerState);
+            const renderType = layerState
+                .renderType;
+            if (renderType === 'Single Symbol') {
+                // Read from current color or use defaults
+                const parsedStyle = parseColor(layer.parameters.type, layer.parameters.color);
+                if (parsedStyle) {
+                    setStyle(parsedStyle);
+                }
+            }
+        };
+        initStyle();
+        okSignalPromise.promise.then(okSignal => {
+            okSignal.connect(handleOk, this);
+        });
+        return () => {
+            okSignalPromise.promise.then(okSignal => {
+                okSignal.disconnect(handleOk, this);
+            });
+        };
+    }, []);
+    useEffect(() => {
+        styleRef.current = style;
+        layerStateRef.current = layerState;
+    }, [style, layerState]);
+    const handleOk = () => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!layer.parameters) {
+            return;
+        }
+        state.save(`jupytergis:${layerId}`, Object.assign(Object.assign({}, layerStateRef.current), { renderType: 'Single Symbol' }));
+        const styleExpr = {};
+        const prefix = layer.parameters.type === 'circle' ? 'circle-' : '';
+        if (layer.parameters.type === 'circle') {
+            styleExpr['circle-radius'] = (_a = styleRef.current) === null || _a === void 0 ? void 0 : _a.radius;
+        }
+        styleExpr[`${prefix}fill-color`] = (_b = styleRef.current) === null || _b === void 0 ? void 0 : _b.fillColor;
+        styleExpr[`${prefix}stroke-color`] = (_c = styleRef.current) === null || _c === void 0 ? void 0 : _c.strokeColor;
+        styleExpr[`${prefix}stroke-width`] = (_d = styleRef.current) === null || _d === void 0 ? void 0 : _d.strokeWidth;
+        styleExpr[`${prefix}stroke-line-join`] = (_e = styleRef.current) === null || _e === void 0 ? void 0 : _e.joinStyle;
+        styleExpr[`${prefix}stroke-line-cap`] = (_f = styleRef.current) === null || _f === void 0 ? void 0 : _f.capStyle;
+        layer.parameters.color = styleExpr;
+        context.model.sharedModel.updateLayer(layerId, layer);
+        cancel();
+    };
+    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        useCircleStuff ? (React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-value-select' }, "Radius:"),
+            React.createElement("input", { type: "number", value: style.radius, className: "jp-mod-styled", onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { radius: +event.target.value }))) }))) : null,
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-value-select' }, "Fill Color:"),
+            React.createElement("input", { type: "color", value: style.fillColor, className: "jp-mod-styled", onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { fillColor: event.target.value }))) })),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-value-select' }, "Stroke Color:"),
+            React.createElement("input", { type: "color", value: style.strokeColor, className: "jp-mod-styled", onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { strokeColor: event.target.value }))) })),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-value-select' }, "Stroke Width:"),
+            React.createElement("input", { type: "number", value: style.strokeWidth, className: "jp-mod-styled", onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { strokeWidth: +event.target.value }))) })),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-join-select' }, "Join Style:"),
+            React.createElement("div", { className: "jp-select-wrapper" },
+                React.createElement("select", { name: 'vector-join-select', onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { joinStyle: event.target.value }))), className: "jp-mod-styled" }, joinStyleOptions.map((method, index) => (React.createElement("option", { key: index, value: method, selected: method === style.joinStyle, className: "jp-mod-styled" }, method)))))),
+        useCircleStuff ? (React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-cap-select' }, "Cap Style:"),
+            React.createElement("div", { className: "jp-select-wrapper" },
+                React.createElement("select", { name: 'vector-cap-select', onChange: event => setStyle(prevState => (Object.assign(Object.assign({}, prevState), { capStyle: event.target.value }))), className: "jp-mod-styled" }, capStyleOptions.map((cap, index) => (React.createElement("option", { key: index, value: cap, selected: cap === style.capStyle, className: "jp-mod-styled" }, cap))))))) : null));
+};
+export default SimpleSymbol;

package/lib/dialogs/components/symbology/SingleBandPseudoColor.d.ts

@@ -1,10 +1,6 @@
 import { IDict } from '@jupytergis/schema';
 import React from 'react';
 import { ISymbologyDialogProps } from '../../symbologyDialog';
-export interface IStopRow {
-    value: number;
-    color: number[];
-}
 export interface IBandRow {
     band: number;
     colorInterpretation: string;

package/lib/dialogs/components/symbology/SingleBandPseudoColor.js

@@ -1,10 +1,10 @@
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from '@jupyterlab/ui-components';
-import initGdalJs from 'gdal3.js';
 import React, { useEffect, useRef, useState } from 'react';
 import BandRow from './BandRow';
 import StopRow from './StopRow';
+import { getGdal } from '../../../gdal';
 const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerId }) => {
     const functions = ['discrete', 'linear', 'exact'];
     const stopRowsRef = useRef();
@@ -62,23 +62,19 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
             return;
         }
         let tifData;
-        const tifDataState = (await state.fetch(layerId));
-        if (tifDataState) {
-            tifData = JSON.parse(tifDataState);
+        const layerState = await state.fetch(`jupytergis:${layerId}`);
+        if (layerState) {
+            tifData = JSON.parse(layerState.tifData);
         }
         else {
-            //! This takes so long, maybe do when adding source instead
-            const Gdal = await initGdalJs({
-                path: 'lab/extensions/@jupytergis/jupytergis-core/static',
-                useWorker: false
-            });
+            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(layerId, JSON.stringify(tifData));
+            state.save(`jupytergis:${layerId}`, { tifData: JSON.stringify(tifData) });
         }
         tifData['bands'].forEach((bandData) => {
             var _a, _b;
@@ -119,8 +115,8 @@ 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 = {
-                        value: scaleValue(color[i]),
-                        color: color[i + 1]
+                        stop: scaleValue(color[i]),
+                        output: color[i + 1]
                     };
                     valueColorPairs.push(obj);
                 }
@@ -136,8 +132,8 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                 // Last element is fallback value
                 for (let i = 3; i < color.length - 1; i += 2) {
                     const obj = {
-                        value: scaleValue(color[i][2]),
-                        color: color[i + 1]
+                        stop: scaleValue(color[i][2]),
+                        output: color[i + 1]
                     };
                     valueColorPairs.push(obj);
                 }
@@ -176,8 +172,8 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                 // 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.value));
-                    colorExpr.push(stop.color);
+                    colorExpr.push(unscaleValue(stop.stop));
+                    colorExpr.push(stop.output);
                 });
                 break;
             }
@@ -190,9 +186,9 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                     colorExpr.push([
                         '<=',
                         ['band', selectedBand],
-                        unscaleValue(stop.value)
+                        unscaleValue(stop.stop)
                     ]);
-                    colorExpr.push(stop.color);
+                    colorExpr.push(stop.output);
                 });
                 // fallback value
                 colorExpr.push([0, 0, 0, 1.0]);
@@ -207,9 +203,9 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                     colorExpr.push([
                         '==',
                         ['band', selectedBand],
-                        unscaleValue(stop.value)
+                        unscaleValue(stop.stop)
                     ]);
-                    colorExpr.push(stop.color);
+                    colorExpr.push(stop.output);
                 });
                 // fallback value
                 colorExpr.push([0, 0, 0, 1.0]);
@@ -226,8 +222,8 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
     const addStopRow = () => {
         setStopRows([
             {
-                value: 0,
-                color: [0, 0, 0, 1]
+                stop: 0,
+                output: [0, 0, 0, 1]
             },
             ...stopRows
         ]);
@@ -274,7 +270,7 @@ const SingleBandPseudoColor = ({ context, state, okSignalPromise, cancel, layerI
                             ? '='
                             : ''),
                 React.createElement("span", null, "Output Value")),
-            stopRows.map((stop, index) => (React.createElement(StopRow, { key: `${index}-${stop.color}`, index: index, value: stop.value, outputValue: stop.color, stopRows: stopRows, setStopRows: setStopRows, deleteRow: () => deleteStopRow(index) })))),
+            stopRows.map((stop, index) => (React.createElement(StopRow, { key: `${index}-${stop.output}`, index: index, value: stop.stop, outputValue: stop.output, stopRows: stopRows, setStopRows: setStopRows, deleteRow: () => deleteStopRow(index) })))),
         React.createElement("div", { className: "jp-gis-symbology-button-container" },
             React.createElement(Button, { className: "jp-Dialog-button jp-mod-accept jp-mod-styled", onClick: addStopRow }, "Add Stop"))));
 };

package/lib/dialogs/components/symbology/StopRow.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { IStopRow } from './SingleBandPseudoColor';
-declare const StopRow: ({ index, value, outputValue, stopRows, setStopRows, deleteRow }: {
+import { IStopRow } from '../../symbologyDialog';
+declare const StopRow: ({ index, value, outputValue, stopRows, setStopRows, deleteRow, useNumber }: {
     index: number;
     value: number;
-    outputValue: number[];
+    outputValue: number | number[];
     stopRows: IStopRow[];
     setStopRows: (stopRows: IStopRow[]) => void;
     deleteRow: () => void;
+    useNumber?: boolean;
 }) => React.JSX.Element;
 export default StopRow;

package/lib/dialogs/components/symbology/StopRow.js

@@ -2,8 +2,11 @@ import { faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from '@jupyterlab/ui-components';
 import React from 'react';
-const StopRow = ({ index, value, outputValue, stopRows, setStopRows, deleteRow }) => {
+const StopRow = ({ index, value, outputValue, stopRows, setStopRows, deleteRow, useNumber }) => {
     const rgbArrToHex = (rgbArr) => {
+        if (!Array.isArray(rgbArr)) {
+            return;
+        }
         const hex = rgbArr
             .slice(0, -1) // Color input doesn't support hex alpha values so cut that out
             .map((val) => {
@@ -26,32 +29,34 @@ const StopRow = ({ index, value, outputValue, stopRows, setStopRows, deleteRow }
         ];
         return rgbValues;
     };
-    const handleValueChange = (event) => {
+    const handleStopChange = (event) => {
         const newRows = [...stopRows];
-        newRows[index].value = +event.target.value;
+        newRows[index].stop = +event.target.value;
         setStopRows(newRows);
     };
     const handleBlur = () => {
         const newRows = [...stopRows];
         newRows.sort((a, b) => {
-            if (a.value < b.value) {
+            if (a.stop < b.stop) {
                 return -1;
             }
-            if (a.value > b.value) {
+            if (a.stop > b.stop) {
                 return 1;
             }
             return 0;
         });
         setStopRows(newRows);
     };
-    const handleColorChange = (event) => {
+    const handleOutputChange = (event) => {
         const newRows = [...stopRows];
-        newRows[index].color = hexToRgb(event.target.value);
+        useNumber
+            ? (newRows[index].output = +event.target.value)
+            : (newRows[index].output = hexToRgb(event.target.value));
         setStopRows(newRows);
     };
     return (React.createElement("div", { className: "jp-gis-color-row" },
-        React.createElement("input", { id: `jp-gis-color-value-${index}`, type: "number", value: value, onChange: handleValueChange, onBlur: handleBlur, className: "jp-mod-styled" }),
-        React.createElement("input", { id: `jp-gis-color-color-${index}`, value: rgbArrToHex(outputValue), type: "color", onChange: handleColorChange, className: "jp-mod-styled" }),
+        React.createElement("input", { id: `jp-gis-color-value-${index}`, type: "number", value: value, onChange: handleStopChange, onBlur: handleBlur, className: "jp-mod-styled jp-gis-color-row-value-input" }),
+        useNumber ? (React.createElement("input", { type: "number", value: outputValue, onChange: handleOutputChange, className: "jp-mod-styled jp-gis-color-row-output-input" })) : (React.createElement("input", { id: `jp-gis-color-color-${index}`, value: rgbArrToHex(outputValue), type: "color", onChange: handleOutputChange, className: "jp-mod-styled jp-gis-color-row-output-input" })),
         React.createElement(Button, { id: `jp-gis-remove-color-${index}`, className: "jp-Button jp-gis-filter-icon" },
             React.createElement(FontAwesomeIcon, { icon: faTrash, onClick: deleteRow }))));
 };

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

@@ -0,0 +1,4 @@
+import React from 'react';
+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/VectorRendering.js

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import Graduated from './Graduated';
+import SimpleSymbol from './SimpleSymbol';
+const VectorRendering = ({ context, state, okSignalPromise, cancel, layerId }) => {
+    const [selectedRenderType, setSelectedRenderType] = useState('Single Symbol');
+    const [componentToRender, setComponentToRender] = useState(null);
+    const [renderTypeOptions, setRenderTypeOptions] = useState([
+        'Single Symbol'
+    ]);
+    let RenderComponent;
+    if (!layerId) {
+        return;
+    }
+    const layer = context.model.getLayer(layerId);
+    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+        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');
+        };
+        if (layer.type === 'VectorLayer') {
+            const options = ['Single Symbol', 'Graduated'];
+            setRenderTypeOptions(options);
+        }
+        getSelectedRenderType();
+    }, []);
+    useEffect(() => {
+        switch (selectedRenderType) {
+            case 'Single Symbol':
+                RenderComponent = (React.createElement(SimpleSymbol, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
+                break;
+            case 'Graduated':
+                RenderComponent = (React.createElement(Graduated, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
+                break;
+            default:
+                RenderComponent = React.createElement("div", null, "Render Type Not Implemented (yet)");
+        }
+        setComponentToRender(RenderComponent);
+    }, [selectedRenderType]);
+    return (React.createElement(React.Fragment, null,
+        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));
+};
+export default VectorRendering;

package/lib/dialogs/symbologyDialog.d.ts

@@ -15,6 +15,10 @@ export interface ISymbologyWidgetOptions {
     context: DocumentRegistry.IContext<IJupyterGISModel>;
     state: IStateDB;
 }
+export interface IStopRow {
+    stop: number;
+    output: number | number[];
+}
 export declare class SymbologyWidget extends Dialog<boolean> {
     private okSignal;
     constructor(options: ISymbologyWidgetOptions);

package/lib/dialogs/symbologyDialog.js

@@ -3,6 +3,7 @@ import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
 import BandRendering from './components/symbology/BandRendering';
+import VectorRendering from './components/symbology/VectorRendering';
 const SymbologyDialog = ({ context, state, okSignalPromise, cancel }) => {
     const [selectedLayer, setSelectedLayer] = useState(null);
     const [componentToRender, setComponentToRender] = useState(null);
@@ -33,6 +34,10 @@ const SymbologyDialog = ({ context, state, okSignalPromise, cancel }) => {
         }
         // TODO WebGlLayers can also be used for other layers, need a better way to determine source + layer combo
         switch (layer.type) {
+            case 'VectorLayer':
+            case 'VectorTileLayer':
+                LayerSymbology = (React.createElement(VectorRendering, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: selectedLayer }));
+                break;
             case 'WebGlLayer':
                 LayerSymbology = (React.createElement(BandRendering, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: selectedLayer }));
                 break;

package/lib/formbuilder/objectform/vectorlayerform.js

@@ -43,10 +43,8 @@ export class VectorLayerPropertiesForm extends LayerPropertiesForm {
         this.fetchSourceLayers(this.currentFormData, source.parameters);
     }
     processSchema(data, schema, uiSchema) {
+        this.removeFormEntry('color', data, schema, uiSchema);
         super.processSchema(data, schema, uiSchema);
-        uiSchema['color'] = {
-            'ui:widget': 'color'
-        };
         if (!data) {
             return;
         }

package/lib/gdal.d.ts

@@ -0,0 +1 @@
+export declare function getGdal(): Promise<Gdal>;

package/lib/gdal.js

@@ -0,0 +1,15 @@
+import initGdalJs from 'gdal3.js';
+export async function getGdal() {
+    const dataurl = new URL('./gdal3WebAssembly.data', import.meta.url);
+    const wasmurl = new URL('./gdal3WebAssembly.wasm', import.meta.url);
+    // TODO Pass gdal JS too and run gdal in a worker?
+    return await initGdalJs({
+        paths: {
+            wasm: wasmurl.href,
+            data: dataurl.href
+        },
+        useWorker: false
+    });
+}
+// Early load gdal
+getGdal();