@jupytergis/base 0.3.0 → 0.4.1

package/lib/dialogs/layerBrowserDialog.js

@@ -2,11 +2,11 @@ import { faCheck, faPlus } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dialog } from '@jupyterlab/apputils';
 import { PromiseDelegate, UUID } from '@lumino/coreutils';
+import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
 import CUSTOM_RASTER_IMAGE from '../../rasterlayer_gallery/custom_raster.png';
 import { CreationFormWrapper } from './formdialog';
-import { Signal } from '@lumino/signaling';
-export const LayerBrowserComponent = ({ context, registry, formSchemaRegistry, okSignalPromise, cancel }) => {
+export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okSignalPromise, cancel }) => {
     const [searchTerm, setSearchTerm] = useState('');
     const [activeLayers, setActiveLayers] = useState([]);
     const [selectedCategory, setSelectedCategory] = useState();
@@ -15,9 +15,9 @@ export const LayerBrowserComponent = ({ context, registry, formSchemaRegistry, o
     const providers = [...new Set(registry.map(item => item.source.provider))];
     const filteredGallery = galleryWithCategory.filter(item => item.name.toLowerCase().includes(searchTerm));
     useEffect(() => {
-        context.model.sharedModel.layersChanged.connect(handleLayerChange);
+        model.sharedModel.layersChanged.connect(handleLayerChange);
         return () => {
-            context.model.sharedModel.layersChanged.disconnect(handleLayerChange);
+            model.sharedModel.layersChanged.disconnect(handleLayerChange);
         };
     }, []);
     /**
@@ -25,7 +25,7 @@ export const LayerBrowserComponent = ({ context, registry, formSchemaRegistry, o
      */
     const handleLayerChange = (_, change) => {
         // The split is to get rid of the 'Layer' part of the name to match the names in the gallery
-        setActiveLayers(Object.values(context.model.sharedModel.layers).map(layer => layer.name.split(' ')[0]));
+        setActiveLayers(Object.values(model.sharedModel.layers).map(layer => layer.name.split(' ')[0]));
     };
     const handleSearchInput = (event) => {
         setSearchTerm(event.target.value.toLowerCase());
@@ -64,8 +64,8 @@ export const LayerBrowserComponent = ({ context, registry, formSchemaRegistry, o
             visible: true,
             name: tile.name + ' Layer'
         };
-        context.model.sharedModel.addSource(sourceId, sourceModel);
-        context.model.addLayer(UUID.uuid4(), layerModel);
+        model.sharedModel.addSource(sourceId, sourceModel);
+        model.addLayer(UUID.uuid4(), layerModel);
     };
     if (creatingCustomRaster) {
         // Disconnect any previous handler
@@ -73,7 +73,7 @@ export const LayerBrowserComponent = ({ context, registry, formSchemaRegistry, o
             value.disconnect(cancel, this);
         });
         return (React.createElement("div", { className: "jGIS-customlayer-form" },
-            React.createElement(CreationFormWrapper, { context: context, formSchemaRegistry: formSchemaRegistry, createLayer: true, createSource: true, layerType: 'RasterLayer', sourceType: 'RasterSource', layerData: {
+            React.createElement(CreationFormWrapper, { model: model, formSchemaRegistry: formSchemaRegistry, createLayer: true, createSource: true, layerType: 'RasterLayer', sourceType: 'RasterSource', layerData: {
                     name: 'Custom Raster'
                 }, sourceData: {
                     url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
@@ -122,7 +122,7 @@ export class LayerBrowserWidget extends Dialog {
             this.resolve(0);
         };
         const okSignalPromise = new PromiseDelegate();
-        const body = (React.createElement(LayerBrowserComponent, { context: options.context, registry: options.registry, formSchemaRegistry: options.formSchemaRegistry, okSignalPromise: okSignalPromise, cancel: cancelCallback }));
+        const body = (React.createElement(LayerBrowserComponent, { model: options.model, registry: options.registry, formSchemaRegistry: options.formSchemaRegistry, okSignalPromise: okSignalPromise, cancel: cancelCallback }));
         super({ body, buttons: [Dialog.cancelButton(), Dialog.okButton()] });
         this.id = 'jupytergis::layerBrowser';
         this.okSignal = new Signal(this);

package/lib/dialogs/symbology/hooks/useGetBandInfo.d.ts

@@ -1,5 +1,4 @@
-import { IDict, IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
-import { DocumentRegistry } from '@jupyterlab/docregistry';
+import { IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
 export interface IBandHistogram {
     buckets: number[];
     count: number;
@@ -8,17 +7,13 @@ export interface IBandHistogram {
 }
 export interface IBandRow {
     band: number;
-    colorInterpretation: string;
+    colorInterpretation?: string;
     stats: {
         minimum: number;
         maximum: number;
-        mean: number;
-        stdDev: number;
     };
-    metadata: IDict;
-    histogram: IBandHistogram;
 }
-declare const useGetBandInfo: (context: DocumentRegistry.IContext<IJupyterGISModel>, layer: IJGISLayer) => {
+declare const useGetBandInfo: (model: IJupyterGISModel, layer: IJGISLayer) => {
     bandRows: IBandRow[];
     setBandRows: import("react").Dispatch<import("react").SetStateAction<IBandRow[]>>;
     loading: boolean;

package/lib/dialogs/symbology/hooks/useGetBandInfo.js

@@ -1,48 +1,36 @@
 import { useEffect, useState } from 'react';
-import { loadGeoTIFFWithCache } from '../../../tools';
-const preloadGeoTiffFile = async (sourceInfo) => {
-    return await loadGeoTIFFWithCache(sourceInfo);
-};
-const useGetBandInfo = (context, layer) => {
+import { fromUrl } from 'geotiff';
+const useGetBandInfo = (model, layer) => {
     const [bandRows, setBandRows] = useState([]);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
     const fetchBandInfo = async () => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         setLoading(true);
         setError(null);
         try {
             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 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];
             if (!(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url)) {
                 setError('No source URL found.');
                 setLoading(false);
                 return;
             }
-            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
-                    });
+            // TODO Get band names + get band stats
+            const tiff = await fromUrl(sourceInfo.url);
+            const image = await tiff.getImage();
+            const numberOfBands = image.getSamplesPerPixel();
+            for (let i = 0; i < numberOfBands; i++) {
+                bandsArr.push({
+                    band: i,
+                    stats: {
+                        minimum: (_c = sourceInfo.min) !== null && _c !== void 0 ? _c : 0,
+                        maximum: (_d = sourceInfo.max) !== null && _d !== void 0 ? _d : 100
+                    }
                 });
-                setBandRows(bandsArr);
-            }
-            else {
-                setError('Failed to preload the file or metadata mismatch.');
             }
+            setBandRows(bandsArr);
         }
         catch (err) {
             setError(`Error fetching band info: ${err.message}`);

package/lib/dialogs/symbology/hooks/useGetProperties.d.ts

@@ -4,7 +4,7 @@ interface IUseGetPropertiesProps {
     model: IJupyterGISModel;
 }
 interface IUseGetPropertiesResult {
-    featureProps: Record<string, Set<any>>;
+    featureProperties: Record<string, Set<any>>;
     isLoading: boolean;
     error?: Error;
 }

package/lib/dialogs/symbology/hooks/useGetProperties.js

@@ -2,7 +2,7 @@
 import { useEffect, useState } from 'react';
 import { loadFile } from '../../../tools';
 export const useGetProperties = ({ layerId, model }) => {
-    const [featureProps, setFeatureProps] = useState({});
+    const [featureProperties, setFeatureProperties] = useState({});
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(undefined);
     const getProperties = async () => {
@@ -28,16 +28,14 @@ export const useGetProperties = ({ layerId, model }) => {
             data.features.forEach((feature) => {
                 if (feature.properties) {
                     Object.entries(feature.properties).forEach(([key, value]) => {
-                        if (typeof value !== 'string') {
-                            if (!(key in result)) {
-                                result[key] = new Set();
-                            }
-                            result[key].add(value);
+                        if (!(key in result)) {
+                            result[key] = new Set();
                         }
+                        result[key].add(value);
                     });
                 }
             });
-            setFeatureProps(result);
+            setFeatureProperties(result);
             setIsLoading(false);
         }
         catch (err) {
@@ -48,5 +46,5 @@ export const useGetProperties = ({ layerId, model }) => {
     useEffect(() => {
         getProperties();
     }, [model, layerId]);
-    return { featureProps, isLoading, error };
+    return { featureProperties, isLoading, error };
 };

package/lib/dialogs/symbology/symbologyDialog.d.ts

@@ -1,18 +1,17 @@
 import { IJupyterGISModel } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
-import { DocumentRegistry } from '@jupyterlab/docregistry';
 import { IStateDB } from '@jupyterlab/statedb';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 export interface ISymbologyDialogProps {
-    context: DocumentRegistry.IContext<IJupyterGISModel>;
+    model: IJupyterGISModel;
     state: IStateDB;
     okSignalPromise: PromiseDelegate<Signal<SymbologyWidget, null>>;
     cancel: () => void;
     layerId?: string;
 }
 export interface ISymbologyWidgetOptions {
-    context: DocumentRegistry.IContext<IJupyterGISModel>;
+    model: IJupyterGISModel;
     state: IStateDB;
 }
 export interface IStopRow {

package/lib/dialogs/symbology/symbologyDialog.js

@@ -4,31 +4,31 @@ import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
 import TiffRendering from './tiff_layer/TiffRendering';
 import VectorRendering from './vector_layer/VectorRendering';
-const SymbologyDialog = ({ context, state, okSignalPromise, cancel }) => {
+const SymbologyDialog = ({ model, state, okSignalPromise, cancel }) => {
     const [selectedLayer, setSelectedLayer] = useState(null);
     const [componentToRender, setComponentToRender] = useState(null);
     let LayerSymbology;
     useEffect(() => {
         const handleClientStateChanged = () => {
             var _a, _b;
-            if (!((_b = (_a = context.model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value)) {
+            if (!((_b = (_a = model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value)) {
                 return;
             }
-            const currentLayer = Object.keys(context.model.localState.selected.value)[0];
+            const currentLayer = Object.keys(model.localState.selected.value)[0];
             setSelectedLayer(currentLayer);
         };
         // Initial state
         handleClientStateChanged();
-        context.model.clientStateChanged.connect(handleClientStateChanged);
+        model.clientStateChanged.connect(handleClientStateChanged);
         return () => {
-            context.model.clientStateChanged.disconnect(handleClientStateChanged);
+            model.clientStateChanged.disconnect(handleClientStateChanged);
         };
     }, []);
     useEffect(() => {
         if (!selectedLayer) {
             return;
         }
-        const layer = context.model.getLayer(selectedLayer);
+        const layer = model.getLayer(selectedLayer);
         if (!layer) {
             return;
         }
@@ -36,10 +36,11 @@ const SymbologyDialog = ({ context, state, okSignalPromise, cancel }) => {
         switch (layer.type) {
             case 'VectorLayer':
             case 'VectorTileLayer':
-                LayerSymbology = (React.createElement(VectorRendering, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: selectedLayer }));
+            case 'HeatmapLayer':
+                LayerSymbology = (React.createElement(VectorRendering, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: selectedLayer }));
                 break;
             case 'WebGlLayer':
-                LayerSymbology = (React.createElement(TiffRendering, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: selectedLayer }));
+                LayerSymbology = (React.createElement(TiffRendering, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: selectedLayer }));
                 break;
             default:
                 LayerSymbology = React.createElement("div", null, "Layer Type Not Supported");
@@ -54,7 +55,7 @@ export class SymbologyWidget extends Dialog {
             this.resolve(0);
         };
         const okSignalPromise = new PromiseDelegate();
-        const body = (React.createElement(SymbologyDialog, { context: options.context, okSignalPromise: okSignalPromise, cancel: cancelCallback, state: options.state }));
+        const body = (React.createElement(SymbologyDialog, { model: options.model, okSignalPromise: okSignalPromise, cancel: cancelCallback, state: options.state }));
         super({ title: 'Symbology', body });
         this.id = 'jupytergis::symbologyWidget';
         this.okSignal = new Signal(this);

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISymbologyDialogProps } from '../symbologyDialog';
-declare const TiffRendering: ({ context, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
+declare const TiffRendering: ({ model, state, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
 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 = ({ context, state, okSignalPromise, cancel, layerId }) => {
+const TiffRendering = ({ model, state, okSignalPromise, cancel, layerId }) => {
     const renderTypes = ['Singleband Pseudocolor', 'Multiband Color'];
     const [selectedRenderType, setSelectedRenderType] = useState();
     const [componentToRender, setComponentToRender] = useState(null);
@@ -10,9 +10,9 @@ const TiffRendering = ({ context, state, okSignalPromise, cancel, layerId }) =>
         return;
     }
     useEffect(() => {
-        var _a;
-        const layer = context.model.getLayer(layerId);
-        const renderType = (_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.symbologyState.renderType;
+        var _a, _b;
+        const layer = model.getLayer(layerId);
+        const renderType = (_b = (_a = layer === null || layer === void 0 ? void 0 : 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 : 'Singleband Pseudocolor');
     }, []);
     useEffect(() => {
@@ -21,10 +21,10 @@ const TiffRendering = ({ context, state, okSignalPromise, cancel, layerId }) =>
         }
         switch (selectedRenderType) {
             case 'Singleband Pseudocolor':
-                RenderComponent = (React.createElement(SingleBandPseudoColor, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
+                RenderComponent = (React.createElement(SingleBandPseudoColor, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
                 break;
             case 'Multiband Color':
-                RenderComponent = (React.createElement(MultibandColor, { context: context, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
+                RenderComponent = (React.createElement(MultibandColor, { model: model, state: state, okSignalPromise: okSignalPromise, cancel: cancel, layerId: layerId }));
                 break;
             default:
                 RenderComponent = React.createElement("div", null, "Render Type Not Implemented (yet)");

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

@@ -33,7 +33,9 @@ const BandRow = ({ label, index, bandRow, bandRows, setSelectedBand, setBandRows
                 ":"),
             React.createElement("div", { className: "jp-select-wrapper" },
                 React.createElement("select", { name: `band-select-${index}`, onChange: event => setSelectedBand(+event.target.value), className: "jp-mod-styled" },
-                    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 ${band.band} (${band.colorInterpretation})`))),
+                    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 ? null : (React.createElement("div", { className: "jp-gis-symbology-row", style: { gap: '0.5rem' } },
             React.createElement("div", { style: {

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: ({ context, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
+declare const MultibandColor: ({ model, okSignalPromise, cancel, layerId }: ISymbologyDialogProps) => React.JSX.Element | undefined;
 export default MultibandColor;

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

@@ -2,15 +2,15 @@ import React, { useEffect, useRef, useState } from 'react';
 import { Spinner } from '../../../../mainview/spinner';
 import useGetBandInfo from '../../hooks/useGetBandInfo';
 import BandRow from '../components/BandRow';
-const MultibandColor = ({ context, okSignalPromise, cancel, layerId }) => {
+const MultibandColor = ({ 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 { bandRows, setBandRows, loading } = useGetBandInfo(context, layer);
+    const { bandRows, setBandRows, loading } = useGetBandInfo(model, layer);
     const [selectedBands, setSelectedBands] = useState({
         red: 1,
         green: 2,
@@ -72,7 +72,8 @@ const MultibandColor = ({ 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();
     };
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },

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

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

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

@@ -8,18 +8,18 @@ import StopRow from '../../components/color_stops/StopRow';
 import useGetBandInfo from '../../hooks/useGetBandInfo';
 import { Utils } from '../../symbologyUtils';
 import BandRow from '../components/BandRow';
-const SingleBandPseudoColor = ({ context, okSignalPromise, cancel, layerId }) => {
+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(context, layer);
+    const { bandRows, setBandRows, loading } = useGetBandInfo(model, layer);
     const [layerState, setLayerState] = useState();
     const [selectedBand, setSelectedBand] = useState(1);
     const [stopRows, setStopRows] = useState([]);
@@ -120,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;
         }
@@ -129,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;
@@ -193,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 = () => {
@@ -220,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);

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 })));
 };