@jupytergis/base 0.2.1 → 0.4.0

package/lib/mainview/mainView.js

@@ -1,37 +1,107 @@
 import { JupyterGISModel } from '@jupytergis/schema';
+import { showErrorMessage } from '@jupyterlab/apputils';
+import { CommandRegistry } from '@lumino/commands';
 import { UUID } from '@lumino/coreutils';
+import { ContextMenu } from '@lumino/widgets';
 import { Collection, Map as OlMap, View, getUid } from 'ol';
+//@ts-expect-error no types for ol-pmtiles
+import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
 import { ScaleLine } from 'ol/control';
+import { singleClick } from 'ol/events/condition';
 import { GeoJSON, MVT } from 'ol/format';
 import { DragAndDrop, Select } from 'ol/interaction';
-import { Image as ImageLayer, Vector as VectorLayer, VectorTile as VectorTileLayer, WebGLTile as WebGlTileLayer } from 'ol/layer';
+import { Heatmap as HeatmapLayer, Image as ImageLayer, Vector as VectorLayer, VectorTile as VectorTileLayer, WebGLTile as WebGlTileLayer } from 'ol/layer';
 import TileLayer from 'ol/layer/Tile';
-import { fromLonLat, toLonLat } from 'ol/proj';
-import Feature from 'ol/render/Feature';
+import { fromLonLat, get as getRegisteredProjection, toLonLat, transformExtent } from 'ol/proj';
+import { get as getProjection } from 'ol/proj.js';
+import { register } from 'ol/proj/proj4.js';
+import RenderFeature from 'ol/render/Feature';
 import { GeoTIFF as GeoTIFFSource, ImageTile as ImageTileSource, Vector as VectorSource, VectorTile as VectorTileSource, XYZ as XYZSource } from 'ol/source';
 import Static from 'ol/source/ImageStatic';
-//@ts-expect-error no types for ol-pmtiles
-import { PMTilesRasterSource, PMTilesVectorSource } from 'ol-pmtiles';
-import { register } from 'ol/proj/proj4.js';
-import { get as getProjection } from 'ol/proj.js';
+import TileSource from 'ol/source/Tile';
+import { Circle, Fill, Stroke, Style } from 'ol/style';
 import proj4 from 'proj4';
-import * as React from 'react';
-import shp from 'shpjs';
-import { isLightTheme, loadGeoTIFFWithCache, throttle } from '../tools';
-import { Spinner } from './spinner';
-//@ts-expect-error no types for proj4-list
 import proj4list from 'proj4-list';
-import { ContextMenu } from '@lumino/widgets';
-import { CommandRegistry } from '@lumino/commands';
+import * as React from 'react';
 import AnnotationFloater from '../annotations/components/AnnotationFloater';
 import { CommandIDs } from '../constants';
-import { FollowIndicator } from './FollowIndicator';
+import StatusBar from '../statusbar/StatusBar';
+import { isLightTheme, loadFile, throttle } from '../tools';
 import CollaboratorPointers from './CollaboratorPointers';
-import { Circle, Fill, Stroke, Style } from 'ol/style';
-import { singleClick } from 'ol/events/condition';
+import { FollowIndicator } from './FollowIndicator';
+import TemporalSlider from './TemporalSlider';
+import { Spinner } from './spinner';
 export class MainView extends React.Component {
     constructor(props) {
         super(props);
+        this.createSelectInteraction = () => {
+            const pointStyle = new Style({
+                image: new Circle({
+                    radius: 5,
+                    fill: new Fill({
+                        color: '#C52707'
+                    }),
+                    stroke: new Stroke({
+                        color: '#171717',
+                        width: 2
+                    })
+                })
+            });
+            const lineStyle = new Style({
+                stroke: new Stroke({
+                    color: '#171717',
+                    width: 2
+                })
+            });
+            const polygonStyle = new Style({
+                fill: new Fill({ color: '#C5270780' }),
+                stroke: new Stroke({
+                    color: '#171717',
+                    width: 2
+                })
+            });
+            const styleFunction = (feature) => {
+                var _a;
+                const geometryType = (_a = feature.getGeometry()) === null || _a === void 0 ? void 0 : _a.getType();
+                switch (geometryType) {
+                    case 'Point':
+                    case 'MultiPoint':
+                        return pointStyle;
+                    case 'LineString':
+                    case 'MultiLineString':
+                        return lineStyle;
+                    case 'Polygon':
+                    case 'MultiPolygon':
+                        return polygonStyle;
+                }
+            };
+            const selectInteraction = new Select({
+                hitTolerance: 5,
+                multi: true,
+                layers: layer => {
+                    var _a, _b;
+                    const localState = (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.getLocalState();
+                    const selectedLayers = (_b = localState === null || localState === void 0 ? void 0 : localState.selected) === null || _b === void 0 ? void 0 : _b.value;
+                    if (!selectedLayers) {
+                        return false;
+                    }
+                    const selectedLayerId = Object.keys(selectedLayers)[0];
+                    return layer === this.getLayer(selectedLayerId);
+                },
+                condition: (event) => {
+                    return singleClick(event) && this._model.isIdentifying;
+                },
+                style: styleFunction
+            });
+            selectInteraction.on('select', event => {
+                const identifiedFeatures = [];
+                selectInteraction.getFeatures().forEach(feature => {
+                    identifiedFeatures.push(feature.getProperties());
+                });
+                this._model.syncIdentifiedFeatures(identifiedFeatures, this._mainViewModel.id);
+            });
+            this._Map.addInteraction(selectInteraction);
+        };
         this.addContextMenu = () => {
             this._commands.addCommand(CommandIDs.addAnnotation, {
                 execute: () => {
@@ -59,6 +129,7 @@ export class MainView extends React.Component {
             });
         };
         this.vectorLayerStyleRuleBuilder = (layer) => {
+            var _a, _b;
             const layerParams = layer.parameters;
             if (!layerParams) {
                 return;
@@ -76,27 +147,25 @@ export class MainView extends React.Component {
                 style: defaultStyle
             };
             const layerStyle = Object.assign({}, defaultRules);
-            if (layer.filters &&
-                layer.filters.logicalOp &&
-                layer.filters.appliedFilters.length !== 0) {
-                const filterExpr = [];
+            if (((_a = layer.filters) === null || _a === void 0 ? void 0 : _a.logicalOp) && ((_b = layer.filters.appliedFilters) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                const buildCondition = (filter) => {
+                    const base = [filter.operator, ['get', filter.feature]];
+                    return filter.operator === 'between'
+                        ? [...base, filter.betweenMin, filter.betweenMax]
+                        : [...base, filter.value];
+                };
+                let filterExpr;
                 // 'Any' and 'All' operators require more than one argument
                 // So if there's only one filter, skip that part to avoid error
                 if (layer.filters.appliedFilters.length === 1) {
-                    layer.filters.appliedFilters.forEach(filter => {
-                        filterExpr.push(filter.operator, ['get', filter.feature], filter.value);
-                    });
+                    filterExpr = buildCondition(layer.filters.appliedFilters[0]);
                 }
                 else {
-                    filterExpr.push(layer.filters.logicalOp);
                     // Arguments for "Any" and 'All' need to be wrapped in brackets
-                    layer.filters.appliedFilters.forEach(filter => {
-                        filterExpr.push([
-                            filter.operator,
-                            ['get', filter.feature],
-                            filter.value
-                        ]);
-                    });
+                    filterExpr = [
+                        layer.filters.logicalOp,
+                        ...layer.filters.appliedFilters.map(buildCondition)
+                    ];
                 }
                 layerStyle.filter = filterExpr;
             }
@@ -154,16 +223,64 @@ export class MainView extends React.Component {
             const scaled = ['*', 255, cosIncidence];
             return scaled;
         };
+        /**
+         * Heatmap layers don't work with style based filtering.
+         * This modifies the features in the underlying source
+         * to work with the temporal controller
+         */
+        this.handleTemporalController = (id, layer) => {
+            var _a, _b, _c, _d, _e, _f;
+            const selectedLayer = (_c = (_b = (_a = this._model) === null || _a === void 0 ? void 0 : _a.localState) === null || _b === void 0 ? void 0 : _b.selected) === null || _c === void 0 ? void 0 : _c.value;
+            // Temporal Controller shouldn't be active if more than one layer is selected
+            if (!selectedLayer || Object.keys(selectedLayer).length !== 1) {
+                return;
+            }
+            const selectedLayerId = Object.keys(selectedLayer)[0];
+            // Don't do anything to unselected layers
+            if (selectedLayerId !== id) {
+                return;
+            }
+            const layerParams = layer.parameters;
+            const source = this._sources[layerParams.source];
+            if ((_d = layer.filters) === null || _d === void 0 ? void 0 : _d.appliedFilters.length) {
+                // Heatmaps don't work with existing filter system so this should be fine
+                const activeFilter = layer.filters.appliedFilters[0];
+                // Save original features on first filter application
+                if (!Object.keys(this._originalFeatures).includes(id)) {
+                    this._originalFeatures[id] = source.getFeatures();
+                }
+                // clear current features
+                source.clear();
+                const startTime = (_e = activeFilter.betweenMin) !== null && _e !== void 0 ? _e : 0;
+                const endTime = (_f = activeFilter.betweenMax) !== null && _f !== void 0 ? _f : 1000;
+                const filteredFeatures = this._originalFeatures[id].filter(feature => {
+                    const featureTime = feature.get(activeFilter.feature);
+                    return featureTime >= startTime && featureTime <= endTime;
+                });
+                // set state for restoration
+                this.setState(old => (Object.assign(Object.assign({}, old), { filterStates: Object.assign(Object.assign({}, this.state.filterStates), { [selectedLayerId]: activeFilter }) })));
+                source.addFeatures(filteredFeatures);
+            }
+            else {
+                // Restore original features when no filters are applied
+                source.addFeatures(this._originalFeatures[id]);
+                delete this._originalFeatures[id];
+            }
+        };
         this._onClientSharedStateChanged = (sender, clients) => {
-            var _a, _b, _c, _d, _e;
-            const remoteUser = (_a = this._model.localState) === null || _a === void 0 ? void 0 : _a.remoteUser;
+            var _a, _b, _c;
+            const localState = this._model.localState;
+            if (!localState) {
+                return;
+            }
+            const remoteUser = localState.remoteUser;
             // If we are in following mode, we update our position and selection
             if (remoteUser) {
                 const remoteState = clients.get(remoteUser);
                 if (!remoteState) {
                     return;
                 }
-                if (((_b = remoteState.user) === null || _b === void 0 ? void 0 : _b.username) !== ((_c = this.state.remoteUser) === null || _c === void 0 ? void 0 : _c.username)) {
+                if (((_a = remoteState.user) === null || _a === void 0 ? void 0 : _a.username) !== ((_b = this.state.remoteUser) === null || _b === void 0 ? void 0 : _b.username)) {
                     this.setState(old => (Object.assign(Object.assign({}, old), { remoteUser: remoteState.user })));
                 }
                 const remoteViewport = remoteState.viewportState;
@@ -177,7 +294,7 @@ export class MainView extends React.Component {
                 // If we are unfollowing a remote user, we reset our center and zoom to their previous values
                 if (this.state.remoteUser !== null) {
                     this.setState(old => (Object.assign(Object.assign({}, old), { remoteUser: null })));
-                    const viewportState = (_e = (_d = this._model.localState) === null || _d === void 0 ? void 0 : _d.viewportState) === null || _e === void 0 ? void 0 : _e.value;
+                    const viewportState = (_c = localState.viewportState) === null || _c === void 0 ? void 0 : _c.value;
                     if (viewportState) {
                         this._moveToPosition(viewportState.coordinates, viewportState.zoom);
                     }
@@ -220,6 +337,13 @@ export class MainView extends React.Component {
                 }
                 this.setState(old => (Object.assign(Object.assign({}, old), { clientPointers: clientPointers })));
             });
+            // Temporal controller bit
+            // ? There's probably a better way to get changes in the model to trigger react rerenders
+            const isTemporalControllerActive = localState.isTemporalControllerActive;
+            if (isTemporalControllerActive !== this.state.displayTemporalController) {
+                this.setState(old => (Object.assign(Object.assign({}, old), { displayTemporalController: isTemporalControllerActive })));
+                this._mainViewModel.commands.notifyCommandChanged(CommandIDs.temporalController);
+            }
         };
         this._onSharedModelStateChange = (_, change) => {
             var _a;
@@ -274,12 +398,11 @@ export class MainView extends React.Component {
         this._handleWindowResize = () => {
             // TODO SOMETHING
         };
-        this._initializedPosition = false;
+        this._isPositionInitialized = false;
         this.divRef = React.createRef(); // Reference of render div
         this._ready = false;
         this._sourceToLayerMap = new Map();
-        proj4.defs(Array.from(proj4list));
-        register(proj4);
+        this._originalFeatures = {};
         this._mainViewModel = this.props.viewModel;
         this._mainViewModel.viewSettingChanged.connect(this._onViewChanged, this);
         this._model = this._mainViewModel.jGISModel;
@@ -290,17 +413,26 @@ export class MainView extends React.Component {
         this._model.sharedLayerTreeChanged.connect(this._onLayerTreeChange, this);
         this._model.sharedSourcesChanged.connect(this._onSourcesChange, this);
         this._model.sharedModel.changed.connect(this._onSharedModelStateChange);
-        this._mainViewModel.jGISModel.sharedMetadataChanged.connect(this._onSharedMetadataChanged, this);
-        this._model.zoomToAnnotationSignal.connect(this._onZoomToAnnotation, this);
+        this._model.sharedMetadataChanged.connect(this._onSharedMetadataChanged, this);
+        this._model.zoomToPositionSignal.connect(this._onZoomToPosition, this);
+        this._model.updateLayerSignal.connect(this._triggerLayerUpdate, this);
+        this._model.addFeatureAsMsSignal.connect(this._convertFeatureToMs, this);
         this.state = {
             id: this._mainViewModel.id,
             lightTheme: isLightTheme(),
             loading: true,
             firstLoad: true,
             annotations: {},
-            clientPointers: {}
+            clientPointers: {},
+            viewProjection: { code: '', units: '' },
+            loadingLayer: false,
+            scale: 0,
+            loadingErrors: [],
+            displayTemporalController: false,
+            filterStates: {}
         };
         this._sources = [];
+        this._loadingLayers = new Set();
         this._commands = new CommandRegistry();
         this._contextMenu = new ContextMenu({ commands: this._commands });
     }
@@ -364,43 +496,7 @@ export class MainView extends React.Component {
                 this._model.addLayer(layerId, layerModel);
             });
             this._Map.addInteraction(dragAndDropInteraction);
-            const selectInteraction = new Select({
-                hitTolerance: 5,
-                multi: true,
-                layers: layer => {
-                    var _a, _b;
-                    const localState = (_a = this._model) === null || _a === void 0 ? void 0 : _a.sharedModel.awareness.getLocalState();
-                    const selectedLayers = (_b = localState === null || localState === void 0 ? void 0 : localState.selected) === null || _b === void 0 ? void 0 : _b.value;
-                    if (!selectedLayers) {
-                        return false;
-                    }
-                    const selectedLayerId = Object.keys(selectedLayers)[0];
-                    return layer === this.getLayer(selectedLayerId);
-                },
-                condition: (event) => {
-                    return singleClick(event) && this._model.isIdentifying;
-                },
-                style: new Style({
-                    image: new Circle({
-                        radius: 5,
-                        fill: new Fill({
-                            color: '#C52707'
-                        }),
-                        stroke: new Stroke({
-                            color: '#171717',
-                            width: 2
-                        })
-                    })
-                })
-            });
-            selectInteraction.on('select', event => {
-                const identifiedFeatures = [];
-                selectInteraction.getFeatures().forEach(feature => {
-                    identifiedFeatures.push(feature.getProperties());
-                });
-                this._model.syncIdentifiedFeatures(identifiedFeatures, this._mainViewModel.id);
-            });
-            this._Map.addInteraction(selectInteraction);
+            this.createSelectInteraction();
             const view = this._Map.getView();
             // TODO: Note for the future, will need to update listeners if view changes
             view.on('change:center', throttle(() => {
@@ -423,9 +519,6 @@ export class MainView extends React.Component {
                 }
             });
             this._Map.on('moveend', () => {
-                if (!this._initializedPosition) {
-                    return;
-                }
                 const currentOptions = this._model.getOptions();
                 const view = this._Map.getView();
                 const center = view.getCenter() || [0, 0];
@@ -433,6 +526,7 @@ export class MainView extends React.Component {
                 const projection = view.getProjection();
                 const latLng = toLonLat(center, projection);
                 const bearing = view.getRotation();
+                const resolution = view.getResolution();
                 const updatedOptions = {
                     latitude: latLng[1],
                     longitude: latLng[0],
@@ -442,6 +536,14 @@ export class MainView extends React.Component {
                 };
                 updatedOptions.extent = view.calculateExtent();
                 this._model.setOptions(Object.assign(Object.assign({}, currentOptions), updatedOptions));
+                // Calculate scale
+                if (resolution) {
+                    // DPI and inches per meter values taken from OpenLayers
+                    const dpi = 25.4 / 0.28;
+                    const inchesPerMeter = 1000 / 25.4;
+                    const scale = resolution * inchesPerMeter * dpi;
+                    this.setState(old => (Object.assign(Object.assign({}, old), { scale })));
+                }
             });
             this._Map.on('click', this._identifyFeature.bind(this));
             this._Map
@@ -451,7 +553,6 @@ export class MainView extends React.Component {
                 await this._updateLayersImpl(JupyterGISModel.getOrderedLayerIds(this._model));
                 const options = this._model.getOptions();
                 this.updateOptions(options);
-                this._initializedPosition = true;
             }
             this._Map.getViewport().addEventListener('contextmenu', event => {
                 event.preventDefault();
@@ -460,25 +561,12 @@ export class MainView extends React.Component {
                 this._clickCoords = coordinate;
                 this._contextMenu.open(event);
             });
-            this.setState(old => (Object.assign(Object.assign({}, old), { loading: false })));
+            this.setState(old => (Object.assign(Object.assign({}, old), { loading: false, viewProjection: {
+                    code: view.getProjection().getCode(),
+                    units: view.getProjection().getUnits()
+                } })));
         }
     }
-    async _loadShapefileAsGeoJSON(url) {
-        try {
-            const response = await fetch(`/jupytergis_core/proxy?url=${url}`);
-            const arrayBuffer = await response.arrayBuffer();
-            const geojson = await shp(arrayBuffer);
-            return geojson;
-        }
-        catch (error) {
-            console.error('Error loading shapefile:', error);
-            throw error;
-        }
-    }
-    async _loadGeoTIFFWithCache(sourceInfo) {
-        const result = await loadGeoTIFFWithCache(sourceInfo);
-        return result === null || result === void 0 ? void 0 : result.file;
-    }
     /**
      * Add a source in the map.
      *
@@ -529,7 +617,7 @@ export class MainView extends React.Component {
                         minZoom: sourceParameters.minZoom,
                         maxZoom: sourceParameters.maxZoom,
                         url: url,
-                        format: new MVT({ featureClass: Feature })
+                        format: new MVT({ featureClass: RenderFeature })
                     });
                 }
                 else {
@@ -542,7 +630,11 @@ export class MainView extends React.Component {
             }
             case 'GeoJSONSource': {
                 const data = ((_a = source.parameters) === null || _a === void 0 ? void 0 : _a.data) ||
-                    (await this._model.readGeoJSON((_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path));
+                    (await loadFile({
+                        filepath: (_b = source.parameters) === null || _b === void 0 ? void 0 : _b.path,
+                        type: 'GeoJSONSource',
+                        model: this._model
+                    }));
                 const format = new GeoJSON({
                     featureProjection: this._Map.getView().getProjection()
                 });
@@ -562,7 +654,11 @@ export class MainView extends React.Component {
             }
             case 'ShapefileSource': {
                 const parameters = source.parameters;
-                const geojson = await this._loadShapefileAsGeoJSON(parameters.path);
+                const geojson = await loadFile({
+                    filepath: parameters.path,
+                    type: 'ShapefileSource',
+                    model: this._model
+                });
                 const geojsonData = Array.isArray(geojson) ? geojson[0] : geojson;
                 const format = new GeoJSON();
                 newSource = new VectorSource({
@@ -590,10 +686,15 @@ export class MainView extends React.Component {
                 const maxX = bottomRight[0];
                 const minY = bottomRight[1];
                 const extent = [minX, minY, maxX, maxY];
+                const imageUrl = await loadFile({
+                    filepath: sourceParameters.path,
+                    type: 'ImageSource',
+                    model: this._model
+                });
                 newSource = new Static({
                     imageExtent: extent,
-                    url: sourceParameters.url,
-                    interpolate: true,
+                    url: imageUrl,
+                    interpolate: false,
                     crossOrigin: ''
                 });
                 break;
@@ -608,8 +709,13 @@ export class MainView extends React.Component {
                     return Object.assign(Object.assign({}, url), { nodata: 0 });
                 };
                 const sourcesWithBlobs = await Promise.all(sourceParameters.urls.map(async (sourceInfo) => {
-                    const blob = await this._loadGeoTIFFWithCache(sourceInfo);
-                    return Object.assign(Object.assign({}, addNoData(sourceInfo)), { blob });
+                    var _a;
+                    const geotiff = await loadFile({
+                        filepath: (_a = sourceInfo.url) !== null && _a !== void 0 ? _a : '',
+                        type: 'GeoTiffSource',
+                        model: this._model
+                    });
+                    return Object.assign(Object.assign({}, addNoData(sourceInfo)), { geotiff, url: URL.createObjectURL(geotiff.file) });
                 }));
                 newSource = new GeoTIFFSource({
                     sources: sourcesWithBlobs,
@@ -725,15 +831,18 @@ export class MainView extends React.Component {
      * @returns - the map layer.
      */
     async _buildMapLayer(id, layer) {
-        var _a;
+        var _a, _b, _c;
         const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
         const source = this._model.sharedModel.getLayerSource(sourceId);
         if (!source) {
             return;
         }
+        this.setState(old => (Object.assign(Object.assign({}, old), { loadingLayer: true })));
+        this._loadingLayers.add(id);
         if (!this._sources[sourceId]) {
             await this.addSource(sourceId, source, id);
         }
+        this._loadingLayers.add(id);
         let newMapLayer;
         let layerParameters;
         // TODO: OpenLayers provides a bunch of sources for specific tile
@@ -764,7 +873,6 @@ export class MainView extends React.Component {
                     opacity: layerParameters.opacity,
                     source: this._sources[layerParameters.source]
                 });
-                this.updateLayer(id, layer, newMapLayer);
                 break;
             }
             case 'HillshadeLayer': {
@@ -799,13 +907,52 @@ export class MainView extends React.Component {
                 newMapLayer = new WebGlTileLayer(layerOptions);
                 break;
             }
+            case 'HeatmapLayer': {
+                layerParameters = layer.parameters;
+                newMapLayer = new HeatmapLayer({
+                    opacity: layerParameters.opacity,
+                    source: this._sources[layerParameters.source],
+                    blur: (_b = layerParameters.blur) !== null && _b !== void 0 ? _b : 15,
+                    radius: (_c = layerParameters.radius) !== null && _c !== void 0 ? _c : 8,
+                    gradient: layerParameters.color
+                });
+                break;
+            }
         }
+        await this._waitForSourceReady(newMapLayer);
         // OpenLayers doesn't have name/id field so add it
         newMapLayer.set('id', id);
         // we need to keep track of which source has which layers
         this._sourceToLayerMap.set(layerParameters.source, id);
+        this.addProjection(newMapLayer);
+        this._loadingLayers.delete(id);
         return newMapLayer;
     }
+    addProjection(newMapLayer) {
+        var _a;
+        const sourceProjection = (_a = newMapLayer.getSource()) === null || _a === void 0 ? void 0 : _a.getProjection();
+        if (!sourceProjection) {
+            console.warn('Layer source projection is undefined or invalid');
+            return;
+        }
+        const projectionCode = sourceProjection.getCode();
+        const isProjectionRegistered = getRegisteredProjection(projectionCode);
+        if (!isProjectionRegistered) {
+            // Check if the projection exists in proj4list
+            if (!proj4list[projectionCode]) {
+                console.warn(`Projection code '${projectionCode}' not found in proj4list`);
+                return;
+            }
+            try {
+                proj4.defs([proj4list[projectionCode]]);
+                register(proj4);
+            }
+            catch (error) {
+                console.warn(`Failed to register projection '${projectionCode}'. Error: ${error.message}`);
+                return;
+            }
+        }
+    }
     /**
      * Add a layer to the map.
      *
@@ -818,9 +965,29 @@ export class MainView extends React.Component {
             // Layer already exists
             return;
         }
-        const newMapLayer = await this._buildMapLayer(id, layer);
-        if (newMapLayer !== undefined) {
-            this._Map.getLayers().insertAt(index, newMapLayer);
+        try {
+            const newMapLayer = await this._buildMapLayer(id, layer);
+            if (newMapLayer !== undefined) {
+                await this._waitForReady();
+                // Adjust index to ensure it's within bounds
+                const numLayers = this._Map.getLayers().getLength();
+                const safeIndex = Math.min(index, numLayers);
+                this._Map.getLayers().insertAt(safeIndex, newMapLayer);
+            }
+        }
+        catch (error) {
+            if (this.state.loadingErrors.find(item => item.id === id && item.error === error.message)) {
+                this._loadingLayers.delete(id);
+                return;
+            }
+            await showErrorMessage(`Error Adding ${layer.name}`, `Failed to add ${layer.name}: ${error.message || 'invalid file path'}`);
+            this.setState(old => (Object.assign(Object.assign({}, old), { loadingLayer: false })));
+            this.state.loadingErrors.push({
+                id,
+                error: error.message || 'invalid file path',
+                index
+            });
+            this._loadingLayers.delete(id);
         }
     }
     /**
@@ -829,8 +996,8 @@ export class MainView extends React.Component {
      * @param id - id of the layer.
      * @param layer - the layer object.
      */
-    async updateLayer(id, layer, mapLayer) {
-        var _a, _b, _c, _d;
+    async updateLayer(id, layer, mapLayer, oldLayer) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
         const source = this._model.sharedModel.getLayerSource(sourceId);
         if (!source) {
@@ -873,8 +1040,58 @@ export class MainView extends React.Component {
                 }
                 break;
             }
+            case 'HeatmapLayer': {
+                const layerParams = layer.parameters;
+                const heatmap = mapLayer;
+                heatmap.setOpacity((_e = layerParams.opacity) !== null && _e !== void 0 ? _e : 1);
+                heatmap.setBlur((_f = layerParams.blur) !== null && _f !== void 0 ? _f : 15);
+                heatmap.setRadius((_g = layerParams.radius) !== null && _g !== void 0 ? _g : 8);
+                heatmap.setGradient((_h = layerParams.color) !== null && _h !== void 0 ? _h : ['#00f', '#0ff', '#0f0', '#ff0', '#f00']);
+                this.handleTemporalController(id, layer);
+                break;
+            }
         }
     }
+    /**
+     * Wait for all layers to be loaded.
+     */
+    _waitForReady() {
+        return new Promise(resolve => {
+            const checkReady = () => {
+                if (this._loadingLayers.size === 0) {
+                    this.setState(old => (Object.assign(Object.assign({}, old), { loadingLayer: false })));
+                    resolve();
+                }
+                else {
+                    setTimeout(checkReady, 50);
+                }
+            };
+            checkReady();
+        });
+    }
+    /**
+     * Wait for a layers source state to be 'ready'
+     * @param layer The Layer to check
+     */
+    _waitForSourceReady(layer) {
+        return new Promise((resolve, reject) => {
+            const checkState = () => {
+                const state = layer.getSourceState();
+                if (state === 'ready') {
+                    layer.un('change', checkState);
+                    resolve();
+                }
+                else if (state === 'error') {
+                    layer.un('change', checkState);
+                    reject(new Error('Source failed to load.'));
+                }
+            };
+            // Listen for state changes
+            layer.on('change', checkState);
+            // Check the state immediately in case it's already 'ready'
+            checkState();
+        });
+    }
     /**
      * Remove a layer from the map.
      *
@@ -886,11 +1103,11 @@ export class MainView extends React.Component {
             this._Map.removeLayer(mapLayer);
         }
     }
-    _onSharedOptionsChanged(sender, change) {
-        if (!this._initializedPosition) {
+    _onSharedOptionsChanged() {
+        if (!this._isPositionInitialized) {
             const options = this._model.getOptions();
             this.updateOptions(options);
-            this._initializedPosition = true;
+            this._isPositionInitialized = true;
         }
     }
     async updateOptions(options) {
@@ -977,7 +1194,20 @@ export class MainView extends React.Component {
         if (currentIndex < index) {
             nextIndex -= 1;
         }
-        this._Map.getLayers().insertAt(nextIndex, layer);
+        // Adjust index to ensure it's within bounds
+        const numLayers = this._Map.getLayers().getLength();
+        const safeIndex = Math.min(index, numLayers);
+        this._Map.getLayers().insertAt(safeIndex, layer);
+    }
+    /**
+     * Remove and recreate layer
+     * @param id ID of layer being replaced
+     * @param layer New layer to replace with
+     */
+    replaceLayer(id, layer) {
+        const layerIndex = this.getLayerIndex(id);
+        this.removeLayer(id);
+        this.addLayer(id, layer, layerIndex);
     }
     _onLayersChanged(_, change) {
         var _a;
@@ -987,21 +1217,25 @@ export class MainView extends React.Component {
             return;
         }
         (_a = change.layerChange) === null || _a === void 0 ? void 0 : _a.forEach(change => {
-            const layer = change.newValue;
-            if (!layer || Object.keys(layer).length === 0) {
-                this.removeLayer(change.id);
+            const { id, oldValue: oldLayer, newValue: newLayer } = change;
+            if (!newLayer || Object.keys(newLayer).length === 0) {
+                this.removeLayer(id);
+                return;
+            }
+            if (oldLayer && oldLayer.type !== newLayer.type) {
+                this.replaceLayer(id, newLayer);
+                return;
+            }
+            const mapLayer = this.getLayer(id);
+            const layerTree = JupyterGISModel.getOrderedLayerIds(this._model);
+            if (!mapLayer) {
+                return;
+            }
+            if (layerTree.includes(id)) {
+                this.updateLayer(id, newLayer, mapLayer, oldLayer);
             }
             else {
-                const mapLayer = this.getLayer(change.id);
-                const layerTree = JupyterGISModel.getOrderedLayerIds(this._model);
-                if (mapLayer) {
-                    if (layerTree.includes(change.id)) {
-                        this.updateLayer(change.id, layer, mapLayer);
-                    }
-                    else {
-                        this.updateLayers(layerTree);
-                    }
-                }
+                this.updateLayers(layerTree);
             }
         });
     }
@@ -1051,12 +1285,40 @@ export class MainView extends React.Component {
             }
         });
     }
-    _onZoomToAnnotation(_, id) {
+    _onZoomToPosition(_, id) {
         var _a;
+        // Check if the id is an annotation
         const annotation = (_a = this._model.annotationModel) === null || _a === void 0 ? void 0 : _a.getAnnotation(id);
         if (annotation) {
             this._moveToPosition(annotation.position, annotation.zoom);
+            return;
         }
+        // The id is a layer
+        let extent;
+        const layer = this.getLayer(id);
+        const source = layer === null || layer === void 0 ? void 0 : layer.getSource();
+        if (source instanceof VectorSource) {
+            extent = source.getExtent();
+        }
+        if (source instanceof TileSource) {
+            // Tiled sources don't have getExtent() so we get it from the grid
+            const tileGrid = source.getTileGrid();
+            extent = tileGrid === null || tileGrid === void 0 ? void 0 : tileGrid.getExtent();
+        }
+        if (!extent) {
+            console.warn('Layer has no extent.');
+            return;
+        }
+        // Convert layer extent value to view projection if needed
+        const sourceProjection = source === null || source === void 0 ? void 0 : source.getProjection();
+        const viewProjection = this._Map.getView().getProjection();
+        const transformedExtent = sourceProjection && sourceProjection !== viewProjection
+            ? transformExtent(extent, sourceProjection, viewProjection)
+            : extent;
+        this._Map.getView().fit(transformedExtent, {
+            size: this._Map.getSize(),
+            duration: 500
+        });
     }
     _moveToPosition(center, zoom, duration = 1000) {
         const view = this._Map.getView();
@@ -1108,6 +1370,28 @@ export class MainView extends React.Component {
             }
         }
     }
+    _triggerLayerUpdate(_, args) {
+        // ? could send just the filters object and modify that instead of emitting whole layer
+        const json = JSON.parse(args);
+        const { layerId, layer: jgisLayer } = json;
+        const olLayer = this.getLayer(layerId);
+        if (!jgisLayer || !olLayer) {
+            console.log('Layer not found');
+            return;
+        }
+        this.updateLayer(layerId, jgisLayer, olLayer);
+    }
+    _convertFeatureToMs(_, args) {
+        const json = JSON.parse(args);
+        const { id: layerId, selectedFeature } = json;
+        const olLayer = this.getLayer(layerId);
+        const source = olLayer.getSource();
+        source.forEachFeature(feature => {
+            const time = feature.get(selectedFeature);
+            const parsedTime = typeof time === 'string' ? Date.parse(time) : time;
+            feature.set(`${selectedFeature}ms`, parsedTime);
+        });
+    }
     render() {
         return (React.createElement(React.Fragment, null,
             Object.entries(this.state.annotations).map(([key, annotation]) => {
@@ -1121,17 +1405,20 @@ export class MainView extends React.Component {
                     }, className: 'jGIS-Popup-Wrapper' },
                     React.createElement(AnnotationFloater, { itemId: key, annotationModel: this._model.annotationModel, open: false }))));
             }),
-            React.createElement("div", { className: "jGIS-Mainview", style: {
-                    border: this.state.remoteUser
-                        ? `solid 3px ${this.state.remoteUser.color}`
-                        : 'unset'
-                } },
-                React.createElement(Spinner, { loading: this.state.loading }),
-                React.createElement(FollowIndicator, { remoteUser: this.state.remoteUser }),
-                React.createElement(CollaboratorPointers, { clients: this.state.clientPointers }),
-                React.createElement("div", { ref: this.divRef, style: {
-                        width: '100%',
-                        height: 'calc(100%)'
-                    } }))));
+            React.createElement("div", { className: "jGIS-Mainview-Container" },
+                this.state.displayTemporalController && (React.createElement(TemporalSlider, { model: this._model, filterStates: this.state.filterStates })),
+                React.createElement("div", { className: "jGIS-Mainview", style: {
+                        border: this.state.remoteUser
+                            ? `solid 3px ${this.state.remoteUser.color}`
+                            : 'unset'
+                    } },
+                    React.createElement(Spinner, { loading: this.state.loading }),
+                    React.createElement(FollowIndicator, { remoteUser: this.state.remoteUser }),
+                    React.createElement(CollaboratorPointers, { clients: this.state.clientPointers }),
+                    React.createElement("div", { ref: this.divRef, style: {
+                            width: '100%',
+                            height: '100%'
+                        } })),
+                React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale }))));
     }
 }