@jupytergis/base 0.10.1 → 0.12.0

package/lib/mainview/mainView.js

@@ -16,11 +16,12 @@ import { UUID } from '@lumino/coreutils';
 import { ContextMenu } from '@lumino/widgets';
 import { Collection, Map as OlMap, View, getUid, } from 'ol';
 import Feature from 'ol/Feature';
-import { FullScreen, ScaleLine } from 'ol/control';
+import { FullScreen, ScaleLine, Zoom } from 'ol/control';
 import { singleClick } from 'ol/events/condition';
+import { getCenter } from 'ol/extent';
 import { GeoJSON, MVT } from 'ol/format';
 import { Point } from 'ol/geom';
-import { DragAndDrop, Select } from 'ol/interaction';
+import { DragAndDrop, DragPan, DragRotate, DragZoom, KeyboardPan, KeyboardZoom, MouseWheelZoom, PinchRotate, PinchZoom, DoubleClickZoom, Select, } from 'ol/interaction';
 import { Heatmap as HeatmapLayer, Image as ImageLayer, Layer, Vector as VectorLayer, VectorTile as VectorTileLayer, WebGLTile as WebGlTileLayer, } from 'ol/layer';
 import TileLayer from 'ol/layer/Tile';
 import { fromLonLat, get as getProjection, toLonLat, transformExtent, } from 'ol/proj';
@@ -43,8 +44,10 @@ import { debounce, isLightTheme, loadFile, throttle } from "../tools";
 import CollaboratorPointers from './CollaboratorPointers';
 import { FollowIndicator } from './FollowIndicator';
 import TemporalSlider from './TemporalSlider';
+import { hexToRgb } from '../dialogs/symbology/colorRampUtils';
 import { markerIcon } from '../icons';
 import { LeftPanel, RightPanel } from '../panelview';
+import StoryViewerPanel from '../panelview/story-maps/StoryViewerPanel';
 export class MainView extends React.Component {
     constructor(props) {
         super(props);
@@ -405,6 +408,138 @@ export class MainView extends React.Component {
                 }
             }
         };
+        /**
+         * Handler for when story maps change in the model.
+         * Updates specta state and presentation colors when story data becomes available.
+         */
+        this._setupSpectaMode = () => {
+            this._removeAllInteractions();
+            this._setupStoryScrollListener();
+            // Update colors CSS variables with colors from story
+            this._updateSpectaPresentationColors();
+        };
+        this._removeAllInteractions = () => {
+            // Remove all default interactions
+            const interactions = this._Map.getInteractions();
+            const interactionArray = interactions.getArray();
+            // Remove each interaction type
+            const interactionsToRemove = [
+                DragPan,
+                DragRotate,
+                DragZoom,
+                KeyboardPan,
+                KeyboardZoom,
+                MouseWheelZoom,
+                PinchRotate,
+                PinchZoom,
+                DoubleClickZoom,
+                DragAndDrop,
+                Select,
+            ];
+            this._zoomControl && this._Map.removeControl(this._zoomControl);
+            interactionsToRemove.forEach(InteractionClass => {
+                const interaction = interactionArray.find(interaction => interaction instanceof InteractionClass);
+                if (interaction) {
+                    this._Map.removeInteraction(interaction);
+                }
+            });
+        };
+        this._setupStoryScrollListener = () => {
+            const segmentNavigationThrottle = 750; // Minimum time between segment changes (ms)
+            const SCROLL_EDGE_THRESHOLD = 0; // Pixels from top/bottom to trigger segment change
+            // Create throttled functions that call the current panel handle dynamically
+            const throttledHandleNext = throttle(() => {
+                const panelHandle = this.storyViewerPanelRef.current;
+                panelHandle === null || panelHandle === void 0 ? void 0 : panelHandle.handleNext();
+            }, segmentNavigationThrottle);
+            const throttledHandlePrev = throttle(() => {
+                const panelHandle = this.storyViewerPanelRef.current;
+                panelHandle === null || panelHandle === void 0 ? void 0 : panelHandle.handlePrev();
+            }, segmentNavigationThrottle);
+            const handleScroll = (e) => {
+                const currentPanelHandle = this.storyViewerPanelRef.current;
+                if (!currentPanelHandle || !currentPanelHandle.canNavigate) {
+                    return;
+                }
+                const wheelEvent = e;
+                const target = wheelEvent.target;
+                // Find the story viewer panel
+                const storyViewerPanel = document.querySelector('.jgis-story-viewer-panel');
+                // If no panel found, change segments normally
+                if (!storyViewerPanel) {
+                    wheelEvent.preventDefault();
+                    wheelEvent.deltaY > 0 ? throttledHandleNext() : throttledHandlePrev();
+                    return;
+                }
+                const hasOverflow = storyViewerPanel.scrollHeight > storyViewerPanel.clientHeight;
+                // If panel has no overflow, change segments normally
+                if (!hasOverflow) {
+                    wheelEvent.preventDefault();
+                    wheelEvent.deltaY > 0 ? throttledHandleNext() : throttledHandlePrev();
+                    return;
+                }
+                // Panel has overflow - handle scroll forwarding and edge detection
+                const scrollTop = storyViewerPanel.scrollTop;
+                const scrollHeight = storyViewerPanel.scrollHeight;
+                const clientHeight = storyViewerPanel.clientHeight;
+                const isAtBottom = scrollTop + clientHeight >= scrollHeight - SCROLL_EDGE_THRESHOLD;
+                const isAtTop = scrollTop <= SCROLL_EDGE_THRESHOLD;
+                const isScrollingDown = wheelEvent.deltaY > 0;
+                const isScrollingUp = wheelEvent.deltaY < 0;
+                // At edges: change segments
+                if ((isScrollingDown && isAtBottom) || (isScrollingUp && isAtTop)) {
+                    wheelEvent.preventDefault();
+                    isScrollingDown ? throttledHandleNext() : throttledHandlePrev();
+                    return;
+                }
+                // If scrolling inside the panel, let it scroll naturally
+                if (target.closest('.jgis-story-viewer-panel')) {
+                    return;
+                }
+                // Scrolling outside the panel: forward scroll to panel (no throttling for smooth scrolling)
+                wheelEvent.preventDefault();
+                const newScrollTop = Math.max(0, Math.min(scrollHeight - clientHeight, scrollTop + wheelEvent.deltaY));
+                storyViewerPanel.scrollTop = newScrollTop;
+            };
+            this._storyScrollHandler = handleScroll;
+            // Attach wheel event listener to the main container
+            const containerElement = document.querySelector('.jGIS-Mainview-Container');
+            if (containerElement) {
+                containerElement.addEventListener('wheel', handleScroll, {
+                    passive: false,
+                });
+            }
+        };
+        this._cleanupStoryScrollListener = () => {
+            if (this._storyScrollHandler) {
+                const containerElement = document.querySelector('.jGIS-Mainview-Container');
+                if (containerElement) {
+                    containerElement.removeEventListener('wheel', this._storyScrollHandler);
+                }
+                this._storyScrollHandler = null;
+            }
+        };
+        this._updateSpectaPresentationColors = () => {
+            var _a;
+            // Try ref first, fallback to querySelector if ref not available yet
+            const container = this.spectaContainerRef.current ||
+                ((_a = this.divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('.jgis-specta-story-panel-container'));
+            if (!container) {
+                return;
+            }
+            const story = this._model.getSelectedStory().story;
+            const bgColor = story === null || story === void 0 ? void 0 : story.presentaionBgColor;
+            const textColor = story === null || story === void 0 ? void 0 : story.presentaionTextColor;
+            // Set background color
+            if (bgColor) {
+                const rgb = hexToRgb(bgColor);
+                container.style.setProperty('--jgis-specta-bg-color', `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`);
+            }
+            // Set text color
+            if (textColor) {
+                container.style.setProperty('--jgis-specta-text-color', textColor);
+            }
+        };
         this._onSharedMetadataChanged = (_, changes) => {
             const newState = Object.assign({}, this.state.annotations);
             changes.forEach((val, key) => {
@@ -450,10 +585,15 @@ export class MainView extends React.Component {
         };
         this._isPositionInitialized = false;
         this.divRef = React.createRef(); // Reference of render div
+        this.controlsToolbarRef = React.createRef();
+        this.spectaContainerRef = React.createRef();
+        this.storyViewerPanelRef = React.createRef();
         this._ready = false;
         this._sourceToLayerMap = new Map();
         this._originalFeatures = {};
         this._featurePropertyCache = new Map();
+        this._isSpectaPresentationInitialized = false;
+        this._storyScrollHandler = null;
         this._state = props.state;
         this._formSchemaRegistry = props.formSchemaRegistry;
         this._annotationModel = props.annotationModel;
@@ -488,6 +628,7 @@ export class MainView extends React.Component {
         this._model.sharedModel.changed.connect(this._onSharedModelStateChange);
         this._model.sharedMetadataChanged.connect(this._onSharedMetadataChanged, this);
         this._model.zoomToPositionSignal.connect(this._onZoomToPosition, this);
+        this._model.settingsChanged.connect(this._onSettingsChanged, this);
         this._model.updateLayerSignal.connect(this._triggerLayerUpdate, this);
         this._model.addFeatureAsMsSignal.connect(this._convertFeatureToMs, this);
         this._model.geolocationChanged.connect(this._handleGeolocationChanged, this);
@@ -512,6 +653,7 @@ export class MainView extends React.Component {
             loadingErrors: [],
             displayTemporalController: false,
             filterStates: {},
+            isSpectaPresentation: false,
         };
         this._sources = [];
         this._loadingLayers = new Set();
@@ -529,12 +671,19 @@ export class MainView extends React.Component {
             : [0, 0];
         const zoom = options.zoom !== undefined ? options.zoom : 1;
         await this.generateMap(center, zoom);
-        this.addContextMenu();
         this._mainViewModel.initSignal();
         if (window.jupytergisMaps !== undefined && this._documentPath) {
             window.jupytergisMaps[this._documentPath] = this._Map;
         }
     }
+    componentDidUpdate(prevProps, prevState) {
+        // Run setup when isSpectaPresentation changes from false/undefined to true
+        if (this.state.isSpectaPresentation &&
+            !this._isSpectaPresentationInitialized) {
+            this._setupSpectaMode();
+            this._isSpectaPresentationInitialized = true;
+        }
+    }
     componentWillUnmount() {
         if (window.jupytergisMaps !== undefined && this._documentPath) {
             delete window.jupytergisMaps[this._documentPath];
@@ -542,20 +691,37 @@ export class MainView extends React.Component {
         window.removeEventListener('resize', this._handleWindowResize);
         this._mainViewModel.viewSettingChanged.disconnect(this._onViewChanged, this);
         this._model.themeChanged.disconnect(this._handleThemeChange, this);
+        this._model.settingsChanged.disconnect(this._onSettingsChanged, this);
         this._model.sharedOptionsChanged.disconnect(this._onSharedOptionsChanged, this);
         this._model.clientStateChanged.disconnect(this._onClientSharedStateChanged, this);
+        // Clean up story scroll listener
+        this._cleanupStoryScrollListener();
         this._mainViewModel.dispose();
     }
     async generateMap(center, zoom) {
+        const scaleLine = new ScaleLine({
+            target: this.controlsToolbarRef.current || undefined,
+        });
+        const fullScreen = new FullScreen({
+            target: this.controlsToolbarRef.current || undefined,
+        });
+        this._zoomControl = new Zoom({
+            target: this.controlsToolbarRef.current || undefined,
+        });
+        const controls = [scaleLine, fullScreen];
+        if (this._model.jgisSettings.zoomButtonsEnabled) {
+            controls.push(this._zoomControl);
+        }
         if (this.divRef.current) {
             this._Map = new OlMap({
                 target: this.divRef.current,
+                keyboardEventTarget: document,
                 layers: [],
                 view: new View({
                     center,
                     zoom,
                 }),
-                controls: [new ScaleLine(), new FullScreen()],
+                controls,
             });
             // Add map interactions
             const dragAndDropInteraction = new DragAndDrop({
@@ -997,7 +1163,8 @@ export class MainView extends React.Component {
         let layerParameters;
         let sourceId;
         let source;
-        if (layer.type !== 'StacLayer') {
+        // Sourceless layers
+        if (!['StacLayer', 'StorySegmentLayer'].includes(layer.type)) {
             sourceId = (_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.source;
             if (!sourceId) {
                 return;
@@ -1099,6 +1266,10 @@ export class MainView extends React.Component {
                 this.setState(old => (Object.assign(Object.assign({}, old), { metadata: layerParameters.data.properties })));
                 break;
             }
+            case 'StorySegmentLayer': {
+                // Special layer not for this
+                return;
+            }
         }
         // OpenLayers doesn't have name/id field so add it
         newMapLayer.set('id', id);
@@ -1164,7 +1335,6 @@ export class MainView extends React.Component {
         }
         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'}`);
@@ -1174,7 +1344,10 @@ export class MainView extends React.Component {
                 error: error.message || 'invalid file path',
                 index,
             });
+        }
+        finally {
             this._loadingLayers.delete(id);
+            this.setState(old => (Object.assign(Object.assign({}, old), { loadingLayer: false })));
         }
     }
     /**
@@ -1185,7 +1358,7 @@ export class MainView extends React.Component {
      */
     async updateLayer(id, layer, mapLayer, oldLayer) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        mapLayer.setVisible(layer.visible);
+        layer.type !== 'StorySegmentLayer' && mapLayer.setVisible(layer.visible);
         switch (layer.type) {
             case 'RasterLayer': {
                 mapLayer.setOpacity(((_a = layer.parameters) === null || _a === void 0 ? void 0 : _a.opacity) || 1);
@@ -1371,12 +1544,42 @@ export class MainView extends React.Component {
         }
     }
     _onSharedOptionsChanged() {
+        // ! would prefer a model ready signal or something, this feels hacky
+        const enableSpectaPresentation = this._model.isSpectaMode();
+        // Handle initialization based on specta presentation state
+        if (!this._isSpectaPresentationInitialized) {
+            if (enableSpectaPresentation) {
+                // _setupSpectaMode will be called in componentDidUpdate when state changes
+                this.setState(old => (Object.assign(Object.assign({}, old), { isSpectaPresentation: true })));
+            }
+            else {
+                // Add context menu when not in specta mode
+                this.addContextMenu();
+                this._isSpectaPresentationInitialized = true;
+            }
+        }
         if (!this._isPositionInitialized) {
             const options = this._model.getOptions();
             this.updateOptions(options);
             this._isPositionInitialized = true;
         }
     }
+    _onSettingsChanged(sender, key) {
+        if (key !== 'zoomButtonsEnabled' || !this._Map) {
+            return;
+        }
+        const enabled = this._model.jgisSettings.zoomButtonsEnabled;
+        if (!enabled && this._zoomControl) {
+            this._Map.removeControl(this._zoomControl);
+            this._zoomControl = undefined;
+        }
+        if (enabled && !this._zoomControl) {
+            this._zoomControl = new Zoom({
+                target: this.controlsToolbarRef.current || undefined,
+            });
+            this._Map.addControl(this._zoomControl);
+        }
+    }
     async updateOptions(options) {
         const { projection, extent, useExtent, latitude, longitude, zoom, bearing, } = options;
         let view = this._Map.getView();
@@ -1545,8 +1748,9 @@ export class MainView extends React.Component {
             }
         });
     }
+    // TODO this and flyToPosition need a rework
     _onZoomToPosition(_, id) {
-        var _a;
+        var _a, _b, _c;
         // Check if the id is an annotation
         const annotation = (_a = this._model.annotationModel) === null || _a === void 0 ? void 0 : _a.getAnnotation(id);
         if (annotation) {
@@ -1557,6 +1761,45 @@ export class MainView extends React.Component {
         let extent;
         const layer = this.getLayer(id);
         const source = layer === null || layer === void 0 ? void 0 : layer.getSource();
+        const jgisLayer = this._model.getLayer(id);
+        /**
+         * Layer may be undefined in two cases:
+         * 1. StorySegmentLayer: These layers don't have an associated OpenLayers layer
+         * 2. StacLayer: When centerOnPosition is called immediately after adding the layer,
+         *    the OpenLayers layer hasn't been created yet, so we use the bbox from the
+         *    layer model's STAC data directly.
+         */
+        if (!layer) {
+            // Handle StacLayer that hasn't been added to the map yet
+            if ((jgisLayer === null || jgisLayer === void 0 ? void 0 : jgisLayer.type) === 'StacLayer') {
+                const layerParams = jgisLayer.parameters;
+                const stacBbox = (_b = layerParams.data) === null || _b === void 0 ? void 0 : _b.bbox;
+                if (stacBbox && stacBbox.length === 4) {
+                    // STAC bbox format: [west, south, east, north] in EPSG:4326
+                    const [west, south, east, north] = stacBbox;
+                    const bboxExtent = [west, south, east, north];
+                    // Convert from EPSG:4326 to view projection
+                    const viewProjection = this._Map.getView().getProjection();
+                    const transformedExtent = viewProjection.getCode() !== 'EPSG:4326'
+                        ? transformExtent(bboxExtent, 'EPSG:4326', viewProjection)
+                        : bboxExtent;
+                    this._Map.getView().fit(transformedExtent, {
+                        size: this._Map.getSize(),
+                        duration: 500,
+                        padding: [250, 250, 250, 250],
+                    });
+                    return;
+                }
+            }
+            // Handle StorySegmentLayer
+            if ((jgisLayer === null || jgisLayer === void 0 ? void 0 : jgisLayer.type) === 'StorySegmentLayer') {
+                const layerParams = jgisLayer.parameters;
+                const coords = getCenter(layerParams.extent);
+                this._flyToPosition({ x: coords[0], y: coords[1] }, layerParams.zoom, ((_c = layerParams.transition.time) !== null && _c !== void 0 ? _c : 1) * 1000, // seconds -> ms
+                layerParams.transition.type);
+                return;
+            }
+        }
         if (source instanceof VectorSource) {
             extent = source.getExtent();
         }
@@ -1596,10 +1839,43 @@ export class MainView extends React.Component {
             });
         }
     }
-    _flyToPosition(center, zoom, duration = 1000) {
+    _flyToPosition(center, zoom, duration = 1000, transitionType) {
         const view = this._Map.getView();
-        view.animate({ zoom, duration });
-        view.animate({ center: [center.x, center.y], duration });
+        // Cancel any in-progress animations before starting new ones
+        view.cancelAnimations();
+        const targetCenter = [center.x, center.y];
+        if (transitionType === 'linear') {
+            // Linear: direct zoom
+            view.animate({
+                center: targetCenter,
+                zoom: zoom,
+                duration,
+            });
+            return;
+        }
+        if (transitionType === 'smooth') {
+            // Smooth: zoom out, center, and zoom in
+            // Centering takes full duration, zoom out completes halfway, zoom in starts halfway
+            // 3 shows most of the map
+            const zoomOutLevel = 3;
+            // Start centering (full duration) and zoom out (50% duration) simultaneously
+            view.animate({
+                center: targetCenter,
+                duration: duration,
+            });
+            // Chain zoom out -> zoom in (zoom in starts when zoom out completes)
+            view.animate({
+                zoom: zoomOutLevel,
+                duration: duration * 0.5,
+            }, {
+                zoom: zoom,
+                duration: duration * 0.5,
+            });
+            return;
+        }
+        // Immediate move
+        view.setCenter(targetCenter);
+        view.setZoom(zoom);
     }
     _onPointerMove(e) {
         const pixel = this._Map.getEventPixel(e);
@@ -1775,7 +2051,7 @@ export class MainView extends React.Component {
             }),
             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 data-jgis-keybinding", tabIndex: -2, style: {
+                React.createElement("div", { className: "jGIS-Mainview data-jgis-keybinding", tabIndex: 0, style: {
                         border: this.state.remoteUser
                             ? `solid 3px ${this.state.remoteUser.color}`
                             : 'unset',
@@ -1787,9 +2063,12 @@ export class MainView extends React.Component {
                             width: '100%',
                             height: '100%',
                         } },
-                        React.createElement("div", { className: "jgis-panels-wrapper" },
+                        React.createElement("div", { className: "jgis-panels-wrapper" }, !this.state.isSpectaPresentation ? (React.createElement(React.Fragment, null,
                             this._state && (React.createElement(LeftPanel, { model: this._model, commands: this._mainViewModel.commands, state: this._state })),
-                            this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel }))))),
+                            this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, commands: this._mainViewModel.commands, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel })))) : (React.createElement("div", { className: "jgis-specta-right-panel-container-mod jgis-right-panel-container" },
+                            React.createElement("div", { ref: this.spectaContainerRef, className: "jgis-specta-story-panel-container" },
+                                React.createElement(StoryViewerPanel, { ref: this.storyViewerPanelRef, model: this._model, isSpecta: this.state.isSpectaPresentation }))))),
+                        React.createElement("div", { ref: this.controlsToolbarRef, className: "jgis-controls-toolbar" }))),
                 React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale }))));
     }
 }

package/lib/panelview/components/layers.d.ts

@@ -1,4 +1,4 @@
-import { IJupyterGISModel } from '@jupytergis/schema';
+import { IJGISLayerTree, IJupyterGISModel } from '@jupytergis/schema';
 import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 import React from 'react';
@@ -6,6 +6,7 @@ interface IBodyProps {
     model: IJupyterGISModel;
     commands: CommandRegistry;
     state: IStateDB;
+    layerTree: IJGISLayerTree;
 }
 export declare const LayersBodyComponent: React.FC<IBodyProps>;
 export {};

package/lib/panelview/components/layers.js

@@ -3,7 +3,7 @@ import { Button, LabIcon, caretDownIcon, caretRightIcon, } from '@jupyterlab/ui-
 import React, { useEffect, useState, } from 'react';
 import { CommandIDs, icons } from "../../constants";
 import { useGetSymbology } from "../../dialogs/symbology/hooks/useGetSymbology";
-import { nonVisibilityIcon, visibilityIcon } from "../../icons";
+import { nonVisibilityIcon, targetWithCenterIcon, visibilityIcon, } from "../../icons";
 import { LegendItem } from './legendItem';
 const LAYER_GROUP_CLASS = 'jp-gis-layerGroup';
 const LAYER_GROUP_HEADER_CLASS = 'jp-gis-layerGroupHeader';
@@ -13,9 +13,10 @@ const LAYER_CLASS = 'jp-gis-layer';
 const LAYER_TITLE_CLASS = 'jp-gis-layerTitle';
 const LAYER_ICON_CLASS = 'jp-gis-layerIcon';
 const LAYER_TEXT_CLASS = 'jp-gis-layerText data-jgis-keybinding';
+const LAYER_SLIDE_NUMBER_CLASS = 'jp-gis-layerSlideNumber';
 export const LayersBodyComponent = props => {
     const model = props.model;
-    const [layerTree, setLayerTree] = useState((model === null || model === void 0 ? void 0 : model.getLayerTree()) || []);
+    const [layerTree, setLayerTree] = useState(props.layerTree || []);
     const notifyCommands = () => {
         // Notify commands that need updating
         props.commands.notifyCommandChanged(CommandIDs.identify);
@@ -117,25 +118,13 @@ export const LayersBodyComponent = props => {
     const onItemClick = ({ type, item, event }) => {
         onSelect({ type, item, event });
     };
-    /**
-     * Listen to the layers and layer tree changes.
-     */
+    // Update layerTree when prop changes
     useEffect(() => {
-        const updateLayers = () => {
-            setLayerTree((model === null || model === void 0 ? void 0 : model.getLayerTree()) || []);
-        };
-        model === null || model === void 0 ? void 0 : model.sharedModel.layersChanged.connect(updateLayers);
-        model === null || model === void 0 ? void 0 : model.sharedModel.layerTreeChanged.connect(updateLayers);
-        updateLayers();
-        return () => {
-            model === null || model === void 0 ? void 0 : model.sharedModel.layersChanged.disconnect(updateLayers);
-            model === null || model === void 0 ? void 0 : model.sharedModel.layerTreeChanged.disconnect(updateLayers);
-        };
-    }, [model]);
-    return (React.createElement("div", { id: "jp-gis-layer-tree", onDrop: _onDrop, onDragOver: _onDragOver }, layerTree
-        .slice()
-        .reverse()
-        .map(layer => typeof layer === 'string' ? (React.createElement(LayerComponent, { key: layer, gisModel: model, layerId: layer, onClick: onItemClick })) : (React.createElement(LayerGroupComponent, { key: layer.name, gisModel: model, group: layer, onClick: onItemClick, state: props.state })))));
+        if (props.layerTree) {
+            setLayerTree(props.layerTree);
+        }
+    }, [props.layerTree]);
+    return (React.createElement("div", { id: "jp-gis-layer-tree", onDrop: _onDrop, onDragOver: _onDragOver }, layerTree.map(layer => typeof layer === 'string' ? (React.createElement(LayerComponent, { key: layer, gisModel: model, layerId: layer, onClick: onItemClick })) : (React.createElement(LayerGroupComponent, { key: layer.name, gisModel: model, group: layer, onClick: onItemClick, state: props.state })))));
 };
 /**
  * The component to handle group of layers.
@@ -350,6 +339,23 @@ const LayerComponent = props => {
             handleRenameCancel();
         }
     };
+    /**
+     * Set layer to current map view.
+     */
+    const moveToExtent = () => {
+        gisModel === null || gisModel === void 0 ? void 0 : gisModel.centerOnPosition(layerId);
+    };
+    const getSlideNumber = () => {
+        if (!gisModel) {
+            return;
+        }
+        const { story } = gisModel.getSelectedStory();
+        if (!(story === null || story === void 0 ? void 0 : story.storySegments)) {
+            return;
+        }
+        const slideNum = story.storySegments.indexOf(layerId) + 1;
+        return slideNum;
+    };
     return (React.createElement("div", { className: `${LAYER_ITEM_CLASS} ${LAYER_CLASS}${selected ? ' jp-mod-selected' : ''}`, draggable: true, onDragStart: Private.onDragStart, onDragOver: Private.onDragOver, onDragEnd: Private.onDragEnd, "data-id": layerId, style: { display: 'flex', flexDirection: 'column' } },
         React.createElement("div", { className: LAYER_TITLE_CLASS, onClick: setSelection, onContextMenu: setSelection, style: { display: 'flex' } },
             hasSupportedSymbology && (React.createElement(Button, { minimal: true, onClick: e => {
@@ -357,8 +363,8 @@ const LayerComponent = props => {
                     setExpanded(v => !v);
                 }, title: expanded ? 'Hide legend' : 'Show legend' },
                 React.createElement(LabIcon.resolveReact, { icon: expanded ? caretDownIcon : caretRightIcon, tag: "span" }))),
-            React.createElement(Button, { title: layer.visible ? 'Hide layer' : 'Show layer', onClick: toggleVisibility, minimal: true },
-                React.createElement(LabIcon.resolveReact, { icon: layer.visible ? visibilityIcon : nonVisibilityIcon, className: `${LAYER_ICON_CLASS}${layer.visible ? '' : ' jp-gis-mod-hidden'}`, tag: "span" })),
+            layer.type === 'StorySegmentLayer' ? (React.createElement("span", { className: LAYER_SLIDE_NUMBER_CLASS, title: "Slide number" }, getSlideNumber())) : (React.createElement(Button, { title: layer.visible ? 'Hide layer' : 'Show layer', onClick: toggleVisibility, minimal: true },
+                React.createElement(LabIcon.resolveReact, { icon: layer.visible ? visibilityIcon : nonVisibilityIcon, className: `${LAYER_ICON_CLASS}${layer.visible ? '' : ' jp-gis-mod-hidden'}`, tag: "span" }))),
             icons.has(layer.type) && (React.createElement(LabIcon.resolveReact, Object.assign({}, icons.get(layer.type), { className: LAYER_ICON_CLASS }))),
             isEditing ? (React.createElement("input", { type: "text", value: editValue, onChange: e => setEditValue(e.target.value), onKeyDown: handleRenameKeyDown, onBlur: handleRenameSave, className: LAYER_TEXT_CLASS, style: {
                     flex: 1,
@@ -367,7 +373,9 @@ const LayerComponent = props => {
                     padding: '2px 4px',
                     fontSize: 'inherit',
                     fontFamily: 'inherit',
-                }, autoFocus: true })) : (React.createElement("span", { id: id, className: LAYER_TEXT_CLASS, tabIndex: -2 }, name))),
+                }, autoFocus: true })) : (React.createElement("span", { id: id, className: LAYER_TEXT_CLASS, tabIndex: -2 }, name)),
+            React.createElement(Button, { title: 'Move map to the extent of the layer', onClick: moveToExtent, minimal: true },
+                React.createElement(LabIcon.resolveReact, { icon: targetWithCenterIcon, className: LAYER_ICON_CLASS, tag: "span" }))),
         expanded && gisModel && hasSupportedSymbology && (React.createElement("div", { style: { marginTop: 6, width: '100%' } },
             React.createElement(LegendItem, { layerId: layerId, model: gisModel })))));
 };

package/lib/panelview/{components/filter-panel → filter-panel}/Filter.js

@@ -1,7 +1,7 @@
 import { Button } from '@jupyterlab/ui-components';
 import { cloneDeep } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
-import { debounce, loadFile } from "../../../tools";
+import { debounce, loadFile } from "../../tools";
 import FilterRow from './FilterRow';
 const FilterComponent = ({ model }) => {
     const featuresInLayerRef = useRef({});