@jupytergis/base 0.2.1 → 0.4.0

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

@@ -1,36 +1,35 @@
 import { Button } from '@jupyterlab/ui-components';
 import React, { useEffect, useRef, useState } from 'react';
-import { GeoTiffClassifications } from '../../classificationModes';
+import { Spinner } from '../../../../mainview/spinner';
 import { GlobalStateDbManager } from '../../../../store';
-import BandRow from '../components/BandRow';
+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 { Spinner } from '../../../../mainview/spinner';
-import { loadGeoTIFFWithCache } from '../../../../tools';
-const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) => {
-    const functions = ['discrete', 'linear', 'exact'];
-    const modeOptions = ['continuous', 'equal interval', 'quantile'];
-    const stopRowsRef = useRef();
-    const bandRowsRef = useRef([]);
-    const selectedFunctionRef = useRef();
-    const 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();
+import BandRow from '../components/BandRow';
+const SingleBandPseudoColor = ({ model, okSignalPromise, cancel, layerId }) => {
     if (!layerId) {
         return;
     }
-    const layer = context.model.getLayer(layerId);
+    const layer = model.getLayer(layerId);
     if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
         return;
     }
+    const functions = ['discrete', 'linear', 'exact'];
+    const modeOptions = ['continuous', 'equal interval', 'quantile'];
     const stateDb = GlobalStateDbManager.getInstance().getStateDb();
+    const { bandRows, setBandRows, loading } = useGetBandInfo(model, layer);
+    const [layerState, setLayerState] = useState();
+    const [selectedBand, setSelectedBand] = useState(1);
+    const [stopRows, setStopRows] = useState([]);
+    const [selectedFunction, setSelectedFunction] = useState('linear');
+    const [colorRampOptions, setColorRampOptions] = useState();
+    const stopRowsRef = useRef();
+    const bandRowsRef = useRef([]);
+    const selectedFunctionRef = useRef();
+    const colorRampOptionsRef = useRef();
+    const selectedBandRef = useRef();
     useEffect(() => {
         populateOptions();
         okSignalPromise.promise.then(okSignal => {
@@ -42,10 +41,6 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
             });
         };
     }, []);
-    useEffect(() => {
-        layerStateRef.current = layerState;
-        getBandInfo();
-    }, [layerState]);
     useEffect(() => {
         bandRowsRef.current = bandRows;
         buildColorInfo();
@@ -55,7 +50,6 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
         selectedFunctionRef.current = selectedFunction;
         colorRampOptionsRef.current = colorRampOptions;
         selectedBandRef.current = selectedBand;
-        layerStateRef.current = layerState;
     }, [stopRows, selectedFunction, colorRampOptions, selectedBand, layerState]);
     const populateOptions = async () => {
         var _a, _b, _c, _d;
@@ -67,39 +61,6 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
         setSelectedBand(band);
         setSelectedFunction(interpolation);
     };
-    const preloadGeoTiffFile = async (sourceInfo) => {
-        return await loadGeoTIFFWithCache(sourceInfo);
-    };
-    const getBandInfo = async () => {
-        var _a, _b;
-        const bandsArr = [];
-        const source = context.model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
-        const sourceInfo = (_b = source === null || source === void 0 ? void 0 : source.parameters) === null || _b === void 0 ? void 0 : _b.urls[0];
-        if (!(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url)) {
-            return;
-        }
-        // Preload the file only once
-        const preloadedFile = await preloadGeoTiffFile(sourceInfo);
-        const { file, metadata, sourceUrl } = Object.assign({}, preloadedFile);
-        if (file && metadata && sourceUrl === sourceInfo.url) {
-            metadata['bands'].forEach((bandData) => {
-                var _a, _b;
-                bandsArr.push({
-                    band: bandData.band,
-                    colorInterpretation: bandData.colorInterpretation,
-                    stats: {
-                        minimum: (_a = sourceInfo.min) !== null && _a !== void 0 ? _a : bandData.minimum,
-                        maximum: (_b = sourceInfo.max) !== null && _b !== void 0 ? _b : bandData.maximum,
-                        mean: bandData.mean,
-                        stdDev: bandData.stdDev
-                    },
-                    metadata: bandData.metadata,
-                    histogram: bandData.histogram
-                });
-            });
-            setBandRows(bandsArr);
-        }
-    };
     const buildColorInfo = () => {
         var _a;
         // This it to parse a color object on the layer
@@ -159,7 +120,7 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
             return;
         }
         const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
-        const source = context.model.getSource(sourceId);
+        const source = model.getSource(sourceId);
         if (!source || !source.parameters) {
             return;
         }
@@ -168,7 +129,7 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
         sourceInfo.min = bandRow.stats.minimum;
         sourceInfo.max = bandRow.stats.maximum;
         source.parameters.urls[0] = sourceInfo;
-        context.model.sharedModel.updateSource(sourceId, source);
+        model.sharedModel.updateSource(sourceId, source);
         // Update layer
         if (!layer.parameters) {
             return;
@@ -232,7 +193,8 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = colorExpr;
-        context.model.sharedModel.updateLayer(layerId, layer);
+        layer.type = 'WebGlLayer';
+        model.sharedModel.updateLayer(layerId, layer);
         cancel();
     };
     const addStopRow = () => {
@@ -259,7 +221,7 @@ const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) =>
         });
         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 source = model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
         const sourceInfo = (_b = source === null || source === void 0 ? void 0 : source.parameters) === null || _b === void 0 ? void 0 : _b.urls[0];
         const nClasses = selectedMode === 'continuous' ? 52 : +numberOfShades;
         setIsLoading(true);
@@ -297,9 +259,7 @@ const SingleBandPseudoColor = ({ context, 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" }, bandRows.length === 0 ? (React.createElement(Spinner, { loading: bandRows.length === 0 })) : (React.createElement(BandRow
-        // Band numbers are 1 indexed
-        , { 
+        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-symbology-row" },

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

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

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

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
+import Categorized from './types/Categorized';
 import Graduated from './types/Graduated';
+import Heatmap from './types/Heatmap';
 import SimpleSymbol from './types/SimpleSymbol';
-import Categorized from './types/Categorized';
-const VectorRendering = ({ context, state, okSignalPromise, cancel, layerId }) => {
-    const [selectedRenderType, setSelectedRenderType] = useState('Single Symbol');
+const VectorRendering = ({ model, state, okSignalPromise, cancel, layerId }) => {
+    const [selectedRenderType, setSelectedRenderType] = useState('');
     const [componentToRender, setComponentToRender] = useState(null);
     const [renderTypeOptions, setRenderTypeOptions] = useState([
         'Single Symbol'
@@ -12,32 +13,36 @@ const VectorRendering = ({ context, state, okSignalPromise, cancel, layerId }) =
     if (!layerId) {
         return;
     }
-    const layer = context.model.getLayer(layerId);
+    const layer = model.getLayer(layerId);
     if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
         return;
     }
     useEffect(() => {
         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', 'Categorized'];
-            setRenderTypeOptions(options);
+        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, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
+                RenderComponent = (React.createElement(SimpleSymbol, { model: model, 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 }));
+                RenderComponent = (React.createElement(Graduated, { model: model, 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 }));
+                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, "Render Type Not Implemented (yet)");
+                RenderComponent = React.createElement("div", null, "Select a render type");
         }
         setComponentToRender(RenderComponent);
     }, [selectedRenderType]);

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

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

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

@@ -1,26 +1,28 @@
 import React, { useEffect, useRef, useState } from 'react';
-import ValueSelect from '../components/ValueSelect';
-import { useGetProperties } from '../../hooks/useGetProperties';
+import { getNumericFeatureAttributes } from '../../../../tools';
+import ColorRamp from '../../components/color_ramp/ColorRamp';
 import StopContainer from '../../components/color_stops/StopContainer';
+import { useGetProperties } from '../../hooks/useGetProperties';
 import { Utils, VectorUtils } from '../../symbologyUtils';
-import ColorRamp from '../../components/color_ramp/ColorRamp';
-const Categorized = ({ context, state, okSignalPromise, cancel, layerId }) => {
+import ValueSelect from '../components/ValueSelect';
+const Categorized = ({ model, 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();
+    const [features, setFeatures] = useState({});
     if (!layerId) {
         return;
     }
-    const layer = context.model.getLayer(layerId);
+    const layer = model.getLayer(layerId);
     if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
         return;
     }
-    const { featureProps } = useGetProperties({
+    const { featureProperties } = useGetProperties({
         layerId,
-        model: context.model
+        model: model
     });
     useEffect(() => {
         const valueColorPairs = VectorUtils.buildColorInfo(layer);
@@ -35,19 +37,19 @@ const Categorized = ({ context, state, okSignalPromise, cancel, layerId }) => {
         };
     }, []);
     useEffect(() => {
-        populateOptions();
-    }, [featureProps]);
+        var _a, _b;
+        // We only want number values here
+        const numericFeatures = getNumericFeatureAttributes(featureProperties);
+        setFeatures(numericFeatures);
+        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(numericFeatures)[0];
+        setSelectedValue(value);
+    }, [featureProperties]);
     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: '',
@@ -55,7 +57,7 @@ const Categorized = ({ context, state, okSignalPromise, cancel, layerId }) => {
             numberOfShades: '',
             selectedMode: ''
         });
-        const stops = Array.from(featureProps[selectedValue]).sort((a, b) => a - b);
+        const stops = Array.from(features[selectedValue]).sort((a, b) => a - b);
         const valueColorPairs = Utils.getValueColorPairs(stops, selectedRamp, stops.length);
         setStopRows(valueColorPairs);
     };
@@ -73,7 +75,15 @@ const Categorized = ({ context, state, okSignalPromise, cancel, layerId }) => {
         // fallback value
         colorExpr.push([0, 0, 0, 0.0]);
         const newStyle = Object.assign({}, layer.parameters.color);
-        newStyle['circle-fill-color'] = colorExpr;
+        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;
+        }
         const symbologyState = {
             renderType: 'Categorized',
             value: selectedValueRef.current,
@@ -83,11 +93,12 @@ const Categorized = ({ context, state, okSignalPromise, cancel, layerId }) => {
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = newStyle;
-        context.model.sharedModel.updateLayer(layerId, layer);
+        layer.type = 'VectorLayer';
+        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(ValueSelect, { featureProperties: features, selectedValue: selectedValue, setSelectedValue: setSelectedValue }),
         React.createElement(ColorRamp, { layerParams: layer.parameters, modeOptions: [], classifyFunc: buildColorInfoFromClassification, showModeRow: false }),
         React.createElement(StopContainer, { selectedMethod: '', stopRows: stopRows, setStopRows: setStopRows })));
 };

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

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

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

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { getNumericFeatureAttributes } from '../../../../tools';
 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 }) => {
+import ValueSelect from '../components/ValueSelect';
+const Graduated = ({ model, state, okSignalPromise, cancel, layerId }) => {
     const modeOptions = [
         'quantile',
         'equal interval',
@@ -21,17 +22,18 @@ const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
     const [selectedMethod, setSelectedMethod] = useState('color');
     const [stopRows, setStopRows] = useState([]);
     const [methodOptions, setMethodOptions] = useState(['color']);
+    const [features, setFeatures] = useState({});
     const [colorRampOptions, setColorRampOptions] = useState();
     if (!layerId) {
         return;
     }
-    const layer = context.model.getLayer(layerId);
+    const layer = model.getLayer(layerId);
     if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
         return;
     }
-    const { featureProps } = useGetProperties({
+    const { featureProperties } = useGetProperties({
         layerId,
-        model: context.model
+        model: model
     });
     useEffect(() => {
         var _a, _b;
@@ -61,21 +63,21 @@ const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
         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);
         }
+        // We only want number values here
+        const numericFeatures = getNumericFeatureAttributes(featureProperties);
+        setFeatures(numericFeatures);
         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 value = (_c = (_b = layerParams.symbologyState) === null || _b === void 0 ? void 0 : _b.value) !== null && _c !== void 0 ? _c : Object.keys(numericFeatures)[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);
-    };
+    }, [featureProperties]);
     const handleOk = () => {
         var _a, _b, _c, _d;
         if (!layer.parameters) {
@@ -116,7 +118,8 @@ const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = newStyle;
-        context.model.sharedModel.updateLayer(layerId, layer);
+        layer.type = 'VectorLayer';
+        model.sharedModel.updateLayer(layerId, layer);
         cancel();
     };
     const buildColorInfoFromClassification = (selectedMode, numberOfShades, selectedRamp) => {
@@ -126,7 +129,7 @@ const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
             selectedMode
         });
         let stops;
-        const values = Array.from(featureProps[selectedValue]);
+        const values = Array.from(features[selectedValue]);
         switch (selectedMode) {
             case 'quantile':
                 stops = VectorClassifications.calculateQuantileBreaks(values, +numberOfShades);
@@ -159,7 +162,7 @@ const Graduated = ({ context, state, okSignalPromise, cancel, layerId }) => {
         setStopRows(stopOutputPairs);
     };
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
-        React.createElement(ValueSelect, { featureProperties: featureProps, selectedValue: selectedValue, setSelectedValue: setSelectedValue }),
+        React.createElement(ValueSelect, { featureProperties: features, 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))))),

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

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

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

@@ -0,0 +1,77 @@
+import colormap from 'colormap';
+import React, { useEffect, useRef, useState } from 'react';
+import CanvasSelectComponent from '../../components/color_ramp/CanvasSelectComponent';
+const Heatmap = ({ model, state, okSignalPromise, cancel, layerId }) => {
+    if (!layerId) {
+        return;
+    }
+    const layer = model.getLayer(layerId);
+    if (!(layer === null || layer === void 0 ? void 0 : layer.parameters)) {
+        return;
+    }
+    const [selectedRamp, setSelectedRamp] = useState('');
+    const [heatmapOptions, setHetamapOptions] = useState({
+        radius: 8,
+        blur: 15
+    });
+    const selectedRampRef = useRef('cool');
+    const heatmapOptionsRef = useRef({
+        radius: 8,
+        blur: 15
+    });
+    useEffect(() => {
+        populateOptions();
+        okSignalPromise.promise.then(okSignal => {
+            okSignal.connect(handleOk, this);
+        });
+        return () => {
+            okSignalPromise.promise.then(okSignal => {
+                okSignal.disconnect(handleOk, this);
+            });
+        };
+    }, []);
+    useEffect(() => {
+        selectedRampRef.current = selectedRamp;
+        heatmapOptionsRef.current = heatmapOptions;
+    }, [selectedRamp, heatmapOptions]);
+    const populateOptions = async () => {
+        var _a;
+        let colorRamp;
+        if ((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState) {
+            colorRamp = layer.parameters.symbologyState.colorRamp;
+        }
+        setSelectedRamp(colorRamp ? colorRamp : 'cool');
+    };
+    const handleOk = () => {
+        if (!layer.parameters) {
+            return;
+        }
+        const colorMap = colormap({
+            colormap: selectedRampRef.current,
+            nshades: 9,
+            format: 'hex'
+        });
+        const symbologyState = {
+            renderType: 'Heatmap',
+            colorRamp: selectedRampRef.current
+        };
+        layer.parameters.symbologyState = symbologyState;
+        layer.parameters.color = colorMap;
+        layer.parameters.blur = heatmapOptionsRef.current.blur;
+        layer.parameters.radius = heatmapOptionsRef.current.radius;
+        layer.type = 'HeatmapLayer';
+        model.sharedModel.updateLayer(layerId, layer);
+        cancel();
+    };
+    return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
+        React.createElement("div", { className: "jp-gis-symbology-row jp-gis-heatmap" },
+            React.createElement("label", { htmlFor: "color-ramp-select" }, "Color Ramp:"),
+            React.createElement(CanvasSelectComponent, { selectedRamp: selectedRamp, setSelected: setSelectedRamp })),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-value-select' }, "Radius:"),
+            React.createElement("input", { type: "number", value: heatmapOptions.radius, className: "jp-mod-styled", onChange: event => setHetamapOptions(prevState => (Object.assign(Object.assign({}, prevState), { radius: +event.target.value }))) })),
+        React.createElement("div", { className: "jp-gis-symbology-row" },
+            React.createElement("label", { htmlFor: 'vector-value-select' }, "Blur:"),
+            React.createElement("input", { type: "number", value: heatmapOptions.blur, className: "jp-mod-styled", onChange: event => setHetamapOptions(prevState => (Object.assign(Object.assign({}, prevState), { blur: +event.target.value }))) }))));
+};
+export default Heatmap;

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

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

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { parseColor } from '../../../../tools';
-const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
+const SimpleSymbol = ({ model, state, okSignalPromise, cancel, layerId }) => {
     const styleRef = useRef();
     const [useCircleStuff, setUseCircleStuff] = useState(false);
     const [style, setStyle] = useState({
@@ -16,7 +16,7 @@ const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
     if (!layerId) {
         return;
     }
-    const layer = context.model.getLayer(layerId);
+    const layer = model.getLayer(layerId);
     if (!layer) {
         return;
     }
@@ -75,7 +75,8 @@ const SimpleSymbol = ({ context, state, okSignalPromise, cancel, layerId }) => {
         };
         layer.parameters.symbologyState = symbologyState;
         layer.parameters.color = styleExpr;
-        context.model.sharedModel.updateLayer(layerId, layer);
+        layer.type = 'VectorLayer';
+        model.sharedModel.updateLayer(layerId, layer);
         cancel();
     };
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },

package/lib/formbuilder/creationform.d.ts

@@ -1,4 +1,3 @@
-import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { IDict, IJGISFormSchemaRegistry, IJupyterGISModel, LayerType, SourceType } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
 import { Signal } from '@lumino/signaling';
@@ -37,12 +36,17 @@ export interface ICreationFormProps {
      */
     cancel?: () => void;
     formSchemaRegistry: IJGISFormSchemaRegistry;
-    context: DocumentRegistry.IContext<IJupyterGISModel>;
+    model: IJupyterGISModel;
     /**
      * A signal emitting when the form changed, with a boolean whether there are some
      * extra errors or not.
      */
     formErrorSignal?: Signal<Dialog<any>, boolean>;
+    /**
+     * Configuration options for the dialog, including settings for layer data, source data,
+     * and other form-related parameters.
+     */
+    dialogOptions?: any;
 }
 /**
  * Form for creating a source, a layer or both at the same time

package/lib/formbuilder/creationform.js

@@ -21,8 +21,8 @@ export class CreationForm extends React.Component {
     constructor(props) {
         super(props);
         this.sourceFormChangedSignal = new Signal(this);
-        this.filePath = props.context.path;
-        this.jGISModel = props.context.model;
+        this.filePath = props.model.filePath;
+        this.jGISModel = props.model;
     }
     render() {
         var _a;
@@ -105,13 +105,13 @@ export class CreationForm extends React.Component {
         return (React.createElement("div", null,
             this.props.createSource && (React.createElement("div", null,
                 React.createElement("h3", null, "Source Properties"),
-                React.createElement(SourceForm, { formContext: "create", model: this.jGISModel, filePath: `${this.filePath}::panel`, schema: sourceSchema, sourceData: this.props.sourceData, syncData: (properties) => {
+                React.createElement(SourceForm, { formContext: "create", model: this.jGISModel, filePath: this.filePath, schema: sourceSchema, sourceData: this.props.sourceData, syncData: (properties) => {
                         sourceCreationPromise === null || sourceCreationPromise === void 0 ? void 0 : sourceCreationPromise.resolve(properties);
-                    }, ok: this.props.ok, cancel: this.props.cancel, formChangedSignal: this.sourceFormChangedSignal, formErrorSignal: this.props.formErrorSignal }))),
+                    }, ok: this.props.ok, cancel: this.props.cancel, formChangedSignal: this.sourceFormChangedSignal, formErrorSignal: this.props.formErrorSignal, dialogOptions: this.props.dialogOptions, sourceType: this.props.sourceType }))),
             this.props.createLayer && (React.createElement("div", null,
                 React.createElement("h3", null, "Layer Properties"),
-                React.createElement(LayerForm, { formContext: "create", sourceType: this.props.sourceType, model: this.jGISModel, filePath: `${this.filePath}::panel`, schema: layerSchema, sourceData: layerData, syncData: (properties) => {
+                React.createElement(LayerForm, { formContext: "create", sourceType: this.props.sourceType, model: this.jGISModel, filePath: this.filePath, schema: layerSchema, sourceData: layerData, syncData: (properties) => {
                         layerCreationPromise === null || layerCreationPromise === void 0 ? void 0 : layerCreationPromise.resolve(properties);
-                    }, ok: this.props.ok, cancel: this.props.cancel, sourceFormChangedSignal: this.sourceFormChangedSignal, formErrorSignal: this.props.formErrorSignal })))));
+                    }, ok: this.props.ok, cancel: this.props.cancel, sourceFormChangedSignal: this.sourceFormChangedSignal, formErrorSignal: this.props.formErrorSignal, dialogOptions: this.props.dialogOptions })))));
     }
 }

package/lib/formbuilder/editform.d.ts

@@ -1,4 +1,3 @@
-import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { IJGISFormSchemaRegistry, IJupyterGISModel } from '@jupytergis/schema';
 import * as React from 'react';
 export interface IEditFormProps {
@@ -11,7 +10,7 @@ export interface IEditFormProps {
      */
     source: string | undefined;
     formSchemaRegistry: IJGISFormSchemaRegistry;
-    context: DocumentRegistry.IContext<IJupyterGISModel>;
+    model: IJupyterGISModel;
 }
 /**
  * Form for editing a source, a layer or both at the same time
@@ -21,4 +20,5 @@ export declare class EditForm extends React.Component<IEditFormProps, any> {
         [key: string]: any;
     }): Promise<void>;
     render(): React.JSX.Element | undefined;
+    private sourceFormChangedSignal;
 }