@jupytergis/base 0.3.0 → 0.4.1

package/lib/mainview/mainView.js

@@ -1,4 +1,5 @@
 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';
@@ -9,26 +10,26 @@ 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, get as getRegisteredProjection, toLonLat, transformExtent } from 'ol/proj';
 import { get as getProjection } from 'ol/proj.js';
 import { register } from 'ol/proj/proj4.js';
-import Feature from 'ol/render/Feature';
+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';
 import TileSource from 'ol/source/Tile';
 import { Circle, Fill, Stroke, Style } from 'ol/style';
 import proj4 from 'proj4';
-//@ts-expect-error no types for proj4list
 import proj4list from 'proj4-list';
 import * as React from 'react';
 import AnnotationFloater from '../annotations/components/AnnotationFloater';
 import { CommandIDs } from '../constants';
 import StatusBar from '../statusbar/StatusBar';
-import { isLightTheme, loadFile, loadGeoTIFFWithCache, throttle } from '../tools';
+import { isLightTheme, loadFile, throttle } from '../tools';
 import CollaboratorPointers from './CollaboratorPointers';
 import { FollowIndicator } from './FollowIndicator';
+import TemporalSlider from './TemporalSlider';
 import { Spinner } from './spinner';
 export class MainView extends React.Component {
     constructor(props) {
@@ -128,6 +129,7 @@ export class MainView extends React.Component {
             });
         };
         this.vectorLayerStyleRuleBuilder = (layer) => {
+            var _a, _b;
             const layerParams = layer.parameters;
             if (!layerParams) {
                 return;
@@ -145,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;
             }
@@ -223,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;
@@ -246,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);
                     }
@@ -289,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;
@@ -343,10 +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();
+        this._originalFeatures = {};
         this._mainViewModel = this.props.viewModel;
         this._mainViewModel.viewSettingChanged.connect(this._onViewChanged, this);
         this._model = this._mainViewModel.jGISModel;
@@ -357,8 +413,10 @@ 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.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(),
@@ -368,7 +426,10 @@ export class MainView extends React.Component {
             clientPointers: {},
             viewProjection: { code: '', units: '' },
             loadingLayer: false,
-            scale: 0
+            scale: 0,
+            loadingErrors: [],
+            displayTemporalController: false,
+            filterStates: {}
         };
         this._sources = [];
         this._loadingLayers = new Set();
@@ -418,7 +479,7 @@ export class MainView extends React.Component {
                     parameters: { path: event.file.name }
                 };
                 const layerId = UUID.uuid4();
-                this.addSource(sourceId, sourceModel, layerId);
+                this.addSource(sourceId, sourceModel);
                 this._model.sharedModel.addSource(sourceId, sourceModel);
                 const layerModel = {
                     type: 'VectorLayer',
@@ -458,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];
@@ -495,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();
@@ -510,18 +567,17 @@ export class MainView extends React.Component {
                 } })));
         }
     }
-    async _loadGeoTIFFWithCache(sourceInfo) {
-        const result = await loadGeoTIFFWithCache(sourceInfo);
-        return result === null || result === void 0 ? void 0 : result.file;
-    }
     /**
      * Add a source in the map.
      *
      * @param id - the source id.
      * @param source - the source object.
      */
-    async addSource(id, source, layerId) {
+    async addSource(id, source) {
         var _a, _b;
+        const rasterSourceCommon = {
+            interpolate: false
+        };
         let newSource;
         switch (source.type) {
             case 'RasterSource': {
@@ -529,29 +585,16 @@ export class MainView extends React.Component {
                 const pmTiles = sourceParameters.url.endsWith('.pmtiles');
                 const url = this.computeSourceUrl(source);
                 if (!pmTiles) {
-                    newSource = new XYZSource({
-                        attributions: sourceParameters.attribution,
-                        minZoom: sourceParameters.minZoom,
-                        maxZoom: sourceParameters.maxZoom,
-                        tileSize: 256,
-                        url: url
-                    });
+                    newSource = new XYZSource(Object.assign(Object.assign({}, rasterSourceCommon), { attributions: sourceParameters.attribution, minZoom: sourceParameters.minZoom, maxZoom: sourceParameters.maxZoom, tileSize: 256, url: url }));
                 }
                 else {
-                    newSource = new PMTilesRasterSource({
-                        attributions: sourceParameters.attribution,
-                        tileSize: 256,
-                        url: url
-                    });
+                    newSource = new PMTilesRasterSource(Object.assign(Object.assign({}, rasterSourceCommon), { attributions: sourceParameters.attribution, tileSize: 256, url: url }));
                 }
                 break;
             }
             case 'RasterDemSource': {
                 const sourceParameters = source.parameters;
-                newSource = new ImageTileSource({
-                    url: this.computeSourceUrl(source),
-                    attributions: sourceParameters.attribution
-                });
+                newSource = new ImageTileSource(Object.assign(Object.assign({}, rasterSourceCommon), { url: this.computeSourceUrl(source), attributions: sourceParameters.attribution }));
                 break;
             }
             case 'VectorTileSource': {
@@ -564,7 +607,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 {
@@ -638,12 +681,7 @@ export class MainView extends React.Component {
                     type: 'ImageSource',
                     model: this._model
                 });
-                newSource = new Static({
-                    imageExtent: extent,
-                    url: imageUrl,
-                    interpolate: false,
-                    crossOrigin: ''
-                });
+                newSource = new Static(Object.assign(Object.assign({}, rasterSourceCommon), { imageExtent: extent, url: imageUrl, crossOrigin: '' }));
                 break;
             }
             case 'VideoSource': {
@@ -655,15 +693,10 @@ export class MainView extends React.Component {
                 const addNoData = (url) => {
                     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 });
+                const sources = await Promise.all(sourceParameters.urls.map(async (sourceInfo) => {
+                    return Object.assign(Object.assign({}, addNoData(sourceInfo)), { min: sourceInfo.min, max: sourceInfo.max, url: sourceInfo.url });
                 }));
-                newSource = new GeoTIFFSource({
-                    sources: sourcesWithBlobs,
-                    normalize: sourceParameters.normalize,
-                    wrapX: sourceParameters.wrapX
-                });
+                newSource = new GeoTIFFSource(Object.assign(Object.assign({}, rasterSourceCommon), { sources, normalize: sourceParameters.normalize, wrapX: sourceParameters.wrapX }));
                 break;
             }
         }
@@ -704,7 +737,7 @@ export class MainView extends React.Component {
         // remove source being updated
         this.removeSource(id);
         // create updated source
-        await this.addSource(id, source, layerId);
+        await this.addSource(id, source);
         // change source of target layer
         mapLayer.setSource(this._sources[id]);
     }
@@ -773,7 +806,7 @@ 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) {
@@ -782,7 +815,7 @@ export class MainView extends React.Component {
         this.setState(old => (Object.assign(Object.assign({}, old), { loadingLayer: true })));
         this._loadingLayers.add(id);
         if (!this._sources[sourceId]) {
-            await this.addSource(sourceId, source, id);
+            await this.addSource(sourceId, source);
         }
         this._loadingLayers.add(id);
         let newMapLayer;
@@ -815,7 +848,6 @@ export class MainView extends React.Component {
                     opacity: layerParameters.opacity,
                     source: this._sources[layerParameters.source]
                 });
-                this.updateLayer(id, layer, newMapLayer);
                 break;
             }
             case 'HillshadeLayer': {
@@ -850,6 +882,17 @@ 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
@@ -897,10 +940,29 @@ export class MainView extends React.Component {
             // Layer already exists
             return;
         }
-        const newMapLayer = await this._buildMapLayer(id, layer);
-        if (newMapLayer !== undefined) {
-            await this._waitForReady();
-            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);
         }
     }
     /**
@@ -909,15 +971,15 @@ 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) {
             return;
         }
         if (!this._sources[sourceId]) {
-            await this.addSource(sourceId, source, id);
+            await this.addSource(sourceId, source);
         }
         mapLayer.setVisible(layer.visible);
         switch (layer.type) {
@@ -953,6 +1015,16 @@ 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;
+            }
         }
     }
     /**
@@ -1006,11 +1078,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) {
@@ -1097,7 +1169,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;
@@ -1107,21 +1192,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);
             }
         });
     }
@@ -1256,6 +1345,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]) => {
@@ -1269,18 +1380,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(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale })));
+            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 }))));
     }
 }

package/lib/mainview/mainviewmodel.d.ts

@@ -1,5 +1,6 @@
 import { IAnnotation, IJupyterGISModel } from '@jupytergis/schema';
 import { ObservableMap } from '@jupyterlab/observables';
+import { CommandRegistry } from '@lumino/commands';
 import { JSONValue } from '@lumino/coreutils';
 import { IDisposable } from '@lumino/disposable';
 export declare class MainViewModel implements IDisposable {
@@ -8,12 +9,14 @@ export declare class MainViewModel implements IDisposable {
     get id(): string;
     get jGISModel(): IJupyterGISModel;
     get viewSettingChanged(): import("@lumino/signaling").ISignal<ObservableMap<JSONValue>, import("@jupyterlab/observables").IObservableMap.IChangedArgs<JSONValue>>;
+    get commands(): CommandRegistry;
     dispose(): void;
     initSignal(): void;
     addAnnotation(value: IAnnotation): void;
     private _onsharedLayersChanged;
     private _jGISModel;
     private _viewSetting;
+    private _commands;
     private _id;
     private _isDisposed;
 }
@@ -21,5 +24,6 @@ export declare namespace MainViewModel {
     interface IOptions {
         jGISModel: IJupyterGISModel;
         viewSetting: ObservableMap<JSONValue>;
+        commands: CommandRegistry;
     }
 }

package/lib/mainview/mainviewmodel.js

@@ -4,6 +4,7 @@ export class MainViewModel {
         this._isDisposed = false;
         this._jGISModel = options.jGISModel;
         this._viewSetting = options.viewSetting;
+        this._commands = options.commands;
     }
     get isDisposed() {
         return this._isDisposed;
@@ -17,6 +18,9 @@ export class MainViewModel {
     get viewSettingChanged() {
         return this._viewSetting.changed;
     }
+    get commands() {
+        return this._commands;
+    }
     dispose() {
         if (this._isDisposed) {
             return;

package/lib/mainview/mainviewwidget.d.ts

@@ -3,8 +3,6 @@ import { MainViewModel } from './mainviewmodel';
 export declare class JupyterGISMainViewPanel extends ReactWidget {
     /**
      * Construct a `JupyterGISPanel`.
-     *
-     * @param context - The documents context.
      */
     constructor(options: {
         mainViewModel: MainViewModel;

package/lib/mainview/mainviewwidget.js

@@ -4,8 +4,6 @@ import { MainView } from './mainView';
 export class JupyterGISMainViewPanel extends ReactWidget {
     /**
      * Construct a `JupyterGISPanel`.
-     *
-     * @param context - The documents context.
      */
     constructor(options) {
         super();