@jupytergis/base 0.13.1 → 0.13.2

package/lib/commands/BaseCommandIDs.d.ts

@@ -16,10 +16,8 @@ export declare const newImageEntry = "jupytergis:newImageEntry";
 export declare const newVideoEntry = "jupytergis:newVideoEntry";
 export declare const newGeoTiffEntry = "jupytergis:newGeoTiffEntry";
 export declare const newGeoParquetEntry = "jupytergis:newGeoParquetEntry";
-export declare const renameLayer = "jupytergis:renameLayer";
-export declare const removeLayer = "jupytergis:removeLayer";
-export declare const renameGroup = "jupytergis:renameGroup";
-export declare const removeGroup = "jupytergis:removeGroup";
+export declare const renameSelected = "jupytergis:renameSelected";
+export declare const removeSelected = "jupytergis:removeSelected";
 export declare const moveLayersToGroup = "jupytergis:moveLayersToGroup";
 export declare const moveLayerToNewGroup = "jupytergis:moveLayerToNewGroup";
 export declare const renameSource = "jupytergis:renameSource";

package/lib/commands/BaseCommandIDs.js

@@ -25,10 +25,8 @@ export const newVideoEntry = 'jupytergis:newVideoEntry';
 export const newGeoTiffEntry = 'jupytergis:newGeoTiffEntry';
 export const newGeoParquetEntry = 'jupytergis:newGeoParquetEntry';
 // Layer and group actions
-export const renameLayer = 'jupytergis:renameLayer';
-export const removeLayer = 'jupytergis:removeLayer';
-export const renameGroup = 'jupytergis:renameGroup';
-export const removeGroup = 'jupytergis:removeGroup';
+export const renameSelected = 'jupytergis:renameSelected';
+export const removeSelected = 'jupytergis:removeSelected';
 export const moveLayersToGroup = 'jupytergis:moveLayersToGroup';
 export const moveLayerToNewGroup = 'jupytergis:moveLayerToNewGroup';
 // Source actions

package/lib/commands/index.js

@@ -361,41 +361,40 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
     /**
      * LAYERS and LAYER GROUP actions.
      */
-    commands.addCommand(CommandIDs.renameLayer, {
-        label: trans.__('Rename Layer'),
-        execute: async () => {
-            var _a;
+    commands.addCommand(CommandIDs.renameSelected, {
+        label: trans.__('Rename'),
+        isEnabled: () => {
+            var _a, _b, _c;
             const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
-            await Private.renameSelectedItem(model, 'layer');
+            const selected = (_c = (_b = model === null || model === void 0 ? void 0 : model.localState) === null || _b === void 0 ? void 0 : _b.selected) === null || _c === void 0 ? void 0 : _c.value;
+            return !!selected && Object.keys(selected).length === 1;
         },
-    });
-    commands.addCommand(CommandIDs.removeLayer, {
-        label: trans.__('Remove Layer'),
-        execute: () => {
-            var _a;
+        execute: async () => {
+            var _a, _b, _c;
             const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
-            Private.removeSelectedItems(model, 'layer', selection => {
-                model === null || model === void 0 ? void 0 : model.removeLayer(selection);
-            });
-            commands.notifyCommandChanged(CommandIDs.toggleStoryPresentationMode);
+            const selected = (_c = (_b = model === null || model === void 0 ? void 0 : model.localState) === null || _b === void 0 ? void 0 : _b.selected) === null || _c === void 0 ? void 0 : _c.value;
+            if (!model || !selected) {
+                return;
+            }
+            await Private.renameSelectedItem(model);
         },
     });
-    commands.addCommand(CommandIDs.renameGroup, {
-        label: trans.__('Rename Group'),
-        execute: async () => {
-            var _a;
+    commands.addCommand(CommandIDs.removeSelected, {
+        label: trans.__('Remove'),
+        isEnabled: () => {
+            var _a, _b, _c;
             const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
-            await Private.renameSelectedItem(model, 'group');
+            const selected = (_c = (_b = model === null || model === void 0 ? void 0 : model.localState) === null || _b === void 0 ? void 0 : _b.selected) === null || _c === void 0 ? void 0 : _c.value;
+            return !!selected && Object.keys(selected).length > 0;
         },
-    });
-    commands.addCommand(CommandIDs.removeGroup, {
-        label: trans.__('Remove Group'),
         execute: async () => {
-            var _a;
+            var _a, _b, _c;
             const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
-            Private.removeSelectedItems(model, 'group', selection => {
-                model === null || model === void 0 ? void 0 : model.removeLayerGroup(selection);
-            });
+            const selected = (_c = (_b = model === null || model === void 0 ? void 0 : model.localState) === null || _b === void 0 ? void 0 : _b.selected) === null || _c === void 0 ? void 0 : _c.value;
+            if (!model || !selected) {
+                return;
+            }
+            await Private.removeSelectedItems(model);
         },
     });
     commands.addCommand(CommandIDs.moveLayersToGroup, {
@@ -473,7 +472,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
         execute: async () => {
             var _a;
             const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
-            await Private.renameSelectedItem(model, 'source');
+            await Private.renameSelectedItem(model);
         },
     });
     commands.addCommand(CommandIDs.removeSource, {
@@ -481,15 +480,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
         execute: () => {
             var _a;
             const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
-            Private.removeSelectedItems(model, 'source', selection => {
-                var _a;
-                if (!((_a = model === null || model === void 0 ? void 0 : model.getLayersBySource(selection).length) !== null && _a !== void 0 ? _a : true)) {
-                    model === null || model === void 0 ? void 0 : model.sharedModel.removeSource(selection);
-                }
-                else {
-                    showErrorMessage('Remove source error', 'The source is used by a layer.');
-                }
-            });
+            Private.removeSelectedSources(model);
         },
     });
     // Console commands
@@ -934,42 +925,60 @@ var Private;
         };
     }
     Private.createEntry = createEntry;
-    function removeSelectedItems(model, itemTypeToRemove, removeFunction) {
+    function removeSelectedItems(model) {
         var _a, _b;
         const selected = (_b = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value;
-        if (!selected) {
+        if (!selected || !model) {
             console.error('Failed to remove selected item -- nothing selected');
             return;
         }
-        for (const selection in selected) {
-            if (selected[selection].type === itemTypeToRemove) {
-                removeFunction(selection);
+        for (const id of Object.keys(selected)) {
+            const item = selected[id];
+            switch (item.type) {
+                case 'layer':
+                    model.removeLayer(id);
+                    break;
+                case 'group':
+                    model.removeLayerGroup(id);
+                    break;
             }
         }
     }
     Private.removeSelectedItems = removeSelectedItems;
-    async function renameSelectedItem(model, itemType) {
-        var _a;
-        const selectedItems = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.selected.value;
+    async function renameSelectedItem(model) {
+        var _a, _b;
+        const selectedItems = (_b = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value;
         if (!selectedItems || !model) {
-            console.error(`No ${itemType} selected`);
+            console.error('No item selected');
             return;
         }
-        let itemId = '';
-        // If more then one item is selected, only rename the first
-        for (const id in selectedItems) {
-            if (selectedItems[id].type === itemType) {
-                itemId = id;
-                break;
-            }
+        const ids = Object.keys(selectedItems);
+        if (ids.length === 0) {
+            return;
         }
-        if (!itemId) {
+        const itemId = ids[0];
+        const item = selectedItems[itemId];
+        if (!item.type) {
             return;
         }
-        // Set editing state - component will show inline input
-        model.setEditingItem(itemType, itemId);
+        model.setEditingItem(item.type, itemId);
     }
     Private.renameSelectedItem = renameSelectedItem;
+    function removeSelectedSources(model) {
+        var _a, _b;
+        const selected = (_b = (_a = model === null || model === void 0 ? void 0 : model.localState) === null || _a === void 0 ? void 0 : _a.selected) === null || _b === void 0 ? void 0 : _b.value;
+        if (!selected || !model) {
+            return;
+        }
+        for (const id of Object.keys(selected)) {
+            if (model.getLayersBySource(id).length > 0) {
+                showErrorMessage('Remove source error', 'The source is used by a layer.');
+                continue;
+            }
+            model.sharedModel.removeSource(id);
+        }
+    }
+    Private.removeSelectedSources = removeSelectedSources;
     function executeConsole(tracker) {
         const current = tracker.currentWidget;
         if (!current || !(current instanceof JupyterGISDocumentWidget)) {

package/lib/dialogs/symbology/components/color_ramp/ColorRampSelector.js

@@ -25,7 +25,7 @@ const ColorRampSelector = ({ selectedRamp, setSelected, }) => {
         if (colorMaps.length > 0) {
             updateCanvas(selectedRamp);
         }
-    }, [selectedRamp]);
+    }, [selectedRamp, colorMaps]);
     const toggleDropdown = () => {
         setIsOpen(!isOpen);
     };

package/lib/keybindings.json

@@ -30,24 +30,14 @@
         "selector": ".data-jgis-keybinding .jp-gis-source"
     },
     {
-        "command": "jupytergis:removeLayer",
+        "command": "jupytergis:removeSelected",
         "keys": ["Delete"],
-        "selector": ".data-jgis-keybinding .jp-gis-layerItem"
-    },
-    {
-        "command": "jupytergis:renameLayer",
-        "keys": ["F2"],
-        "selector": ".jp-gis-layerItem"
-    },
-    {
-        "command": "jupytergis:removeGroup",
-        "keys": ["Delete"],
-        "selector": ".data-jgis-keybinding .jp-gis-layerGroupHeader"
+        "selector": ".data-jgis-keybinding"
     },
     {
-        "command": "jupytergis:renameGroup",
+        "command": "jupytergis:renameSelected",
         "keys": ["F2"],
-        "selector": ".jp-gis-layerGroupHeader"
+        "selector": ".data-jgis-keybinding"
     },
     {
         "command": "jupytergis:executeConsole",

package/lib/mainview/mainView.d.ts

@@ -225,6 +225,8 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _featurePropertyCache;
     private _isSpectaPresentationInitialized;
     private _storyScrollHandler;
+    private _clearStoryScrollGuard;
+    private _pendingStoryScrollRafId;
 }
 /** Thin wrapper that injects isMobile from useMediaQuery so MainView can use it in JSX. */
 declare function MainViewWithMediaQuery(props: IProps): React.JSX.Element;

package/lib/mainview/mainView.js

@@ -447,72 +447,75 @@ export class MainView extends React.Component {
             });
         };
         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) => {
+            var _a, _b;
+            // Guard: block wheel-driven segment change until transition has ended
+            let segmentChangeInProgress = false;
+            const clearGuard = () => {
+                segmentChangeInProgress = false;
+            };
+            this._clearStoryScrollGuard = clearGuard;
+            let accumulatedDeltaY = 0;
+            let scrollContainer = (_b = (_a = this.storyViewerPanelRef.current) === null || _a === void 0 ? void 0 : _a.getScrollContainer()) !== null && _b !== void 0 ? _b : null;
+            const processStoryScrollFrame = () => {
+                this._pendingStoryScrollRafId = null;
                 const currentPanelHandle = this.storyViewerPanelRef.current;
-                if (!currentPanelHandle || !currentPanelHandle.canNavigate) {
+                if (!currentPanelHandle || !scrollContainer) {
+                    accumulatedDeltaY = 0;
                     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();
+                const deltaY = accumulatedDeltaY;
+                accumulatedDeltaY = 0;
+                const isScrollingUp = deltaY < 0;
+                const isScrollingDown = deltaY > 0;
+                const isAtTop = currentPanelHandle.getAtTop();
+                const isAtBottom = currentPanelHandle.getAtBottom();
+                const hasOverflow = !(isAtTop && isAtBottom);
+                const canGoInDirection = (isScrollingDown && currentPanelHandle.hasNext) ||
+                    (isScrollingUp && currentPanelHandle.hasPrev);
+                const atEdge = (isScrollingDown && isAtBottom) || (isScrollingUp && isAtTop);
+                const wantSegmentChange = canGoInDirection && (!hasOverflow || atEdge);
+                if (wantSegmentChange) {
+                    if (segmentChangeInProgress) {
+                        return;
+                    }
+                    segmentChangeInProgress = true;
+                    isScrollingDown
+                        ? currentPanelHandle.handleNext()
+                        : currentPanelHandle.handlePrev();
                     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;
+                scrollContainer.scrollBy({ top: deltaY });
+            };
+            const handleScroll = (event) => {
+                var _a, _b;
+                event.preventDefault();
+                if (!scrollContainer || !document.contains(scrollContainer)) {
+                    scrollContainer =
+                        (_b = (_a = this.storyViewerPanelRef.current) === null || _a === void 0 ? void 0 : _a.getScrollContainer()) !== null && _b !== void 0 ? _b : null;
                 }
-                // 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();
+                if (!scrollContainer) {
                     return;
                 }
-                // If scrolling inside the panel, let it scroll naturally
-                if (target.closest('.jgis-story-viewer-panel')) {
-                    return;
+                // One physical scroll tick often fires ~4 wheel events (sometimes across
+                // frames on slow hardware). We accumulate deltaY and run flush once per
+                // frame via rAF—the frame boundary batches events without adding delay.
+                // So one scroll means one segment/scroll decision.
+                accumulatedDeltaY += event.deltaY;
+                if (this._pendingStoryScrollRafId === null) {
+                    this._pendingStoryScrollRafId = requestAnimationFrame(processStoryScrollFrame);
                 }
-                // 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,
-                });
+            const container = document.querySelector('.jGIS-Mainview-Container');
+            if (container) {
+                container.addEventListener('wheel', handleScroll, { passive: false });
             }
         };
         this._cleanupStoryScrollListener = () => {
+            if (this._pendingStoryScrollRafId !== null) {
+                cancelAnimationFrame(this._pendingStoryScrollRafId);
+                this._pendingStoryScrollRafId = null;
+            }
             if (this._storyScrollHandler) {
                 const containerElement = document.querySelector('.jGIS-Mainview-Container');
                 if (containerElement) {
@@ -596,6 +599,7 @@ export class MainView extends React.Component {
         this._featurePropertyCache = new Map();
         this._isSpectaPresentationInitialized = false;
         this._storyScrollHandler = null;
+        this._pendingStoryScrollRafId = null;
         this._state = props.state;
         this._formSchemaRegistry = props.formSchemaRegistry;
         this._annotationModel = props.annotationModel;
@@ -2094,7 +2098,7 @@ export class MainView extends React.Component {
                             this._state && (React.createElement(LeftPanel, { model: this._model, commands: this._mainViewModel.commands, state: this._state, settings: this.state.jgisSettings })),
                             this._formSchemaRegistry && this._annotationModel && (React.createElement(RightPanel, { model: this._model, commands: this._mainViewModel.commands, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel, addLayer: this.addLayer.bind(this), removeLayer: this.removeLayer.bind(this), settings: this.state.jgisSettings })))) : this.props.isMobile ? (React.createElement(MobileSpectaPanel, { model: this._model })) : (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, className: "jgis-story-viewer-panel-specta-mod" }))))),
+                                React.createElement(StoryViewerPanel, { ref: this.storyViewerPanelRef, model: this._model, isSpecta: this.state.isSpectaPresentation, className: "jgis-story-viewer-panel-specta-mod", onSegmentTransitionEnd: () => this._clearStoryScrollGuard() }))))),
                         React.createElement("div", { ref: this.controlsToolbarRef, className: "jgis-controls-toolbar" }))),
                 !this.state.isSpectaPresentation && (React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale })))));
     }

package/lib/panelview/components/layers.js

@@ -345,6 +345,11 @@ const LayerComponent = props => {
     const moveToExtent = () => {
         gisModel === null || gisModel === void 0 ? void 0 : gisModel.centerOnPosition(layerId);
     };
+    const handleDoubleClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        moveToExtent();
+    };
     const getSlideNumber = () => {
         if (!gisModel) {
             return;
@@ -373,7 +378,7 @@ 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, onDoubleClick: handleDoubleClick, title: "Double-click to zoom to layer" }, 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%' } },

package/lib/panelview/leftpanel.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Draggable from 'react-draggable';
 import { CommandIDs } from '../constants';
 import { LayersBodyComponent } from './components/layers';
 import FilterComponent from './filter-panel/Filter';
@@ -123,22 +124,23 @@ export const LeftPanel = (props) => {
         props.settings.filtersDisabled &&
         props.settings.storyMapsDisabled;
     const leftPanelVisible = !props.settings.leftPanelDisabled && !allLeftTabsDisabled;
-    return (React.createElement("div", { className: "jgis-left-panel-container", style: { display: leftPanelVisible ? 'block' : 'none' } },
-        React.createElement(PanelTabs, { curTab: curTab, className: "jgis-panel-tabs" },
-            React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: tab.name, value: tab.name, onClick: () => {
-                    if (curTab !== tab.name) {
-                        setCurTab(tab.name);
-                    }
-                    else {
-                        setCurTab('');
-                    }
-                } }, tab.title)))),
-            !props.settings.layersDisabled && (React.createElement(TabsContent, { value: "layers", className: "jgis-panel-tab-content jp-gis-layerPanel" },
-                React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: filteredLayerTree }))),
-            !props.settings.stacBrowserDisabled && (React.createElement(TabsContent, { value: "stac", className: "jgis-panel-tab-content jgis-panel-tab-content-stac-panel" },
-                React.createElement(StacPanel, { model: props.model }))),
-            !props.settings.filtersDisabled && (React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
-                React.createElement(FilterComponent, { model: props.model }))),
-            !props.settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "segments", className: "jgis-panel-tab-content" },
-                React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: storySegmentLayerTree }))))));
+    return (React.createElement(Draggable, { handle: ".jgis-tabs-list", cancel: ".jgis-tabs-trigger", bounds: ".jGIS-Mainview-Container" },
+        React.createElement("div", { className: "jgis-left-panel-container", style: { display: leftPanelVisible ? 'block' : 'none' } },
+            React.createElement(PanelTabs, { curTab: curTab, className: "jgis-panel-tabs" },
+                React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: tab.name, value: tab.name, onClick: () => {
+                        if (curTab !== tab.name) {
+                            setCurTab(tab.name);
+                        }
+                        else {
+                            setCurTab('');
+                        }
+                    } }, tab.title)))),
+                !props.settings.layersDisabled && (React.createElement(TabsContent, { value: "layers", className: "jgis-panel-tab-content jp-gis-layerPanel" },
+                    React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: filteredLayerTree }))),
+                !props.settings.stacBrowserDisabled && (React.createElement(TabsContent, { value: "stac", className: "jgis-panel-tab-content jgis-panel-tab-content-stac-panel" },
+                    React.createElement(StacPanel, { model: props.model }))),
+                !props.settings.filtersDisabled && (React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
+                    React.createElement(FilterComponent, { model: props.model }))),
+                !props.settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "segments", className: "jgis-panel-tab-content" },
+                    React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: storySegmentLayerTree })))))));
 };

package/lib/panelview/rightpanel.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import Draggable from 'react-draggable';
 import { AnnotationsPanel } from './annotationPanel';
 import { IdentifyPanelComponent } from './identify-panel/IdentifyPanel';
 import { ObjectPropertiesReact } from './objectproperties';
@@ -74,23 +75,24 @@ export const RightPanel = props => {
     const toggleEditor = () => {
         setEditorMode(!editorMode);
     };
-    return (React.createElement("div", { className: "jgis-right-panel-container", style: { display: rightPanelVisible ? 'block' : 'none' } },
-        React.createElement(PanelTabs, { className: "jgis-panel-tabs", curTab: curTab },
-            React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: `${tab.name}-${tab.title}`, value: tab.name, onClick: () => {
-                    if (curTab !== tab.name) {
-                        setCurTab(tab.name);
-                    }
-                    else {
-                        setCurTab('');
-                    }
-                } }, tab.title)))),
-            !props.settings.objectPropertiesDisabled && (React.createElement(TabsContent, { value: "objectProperties", className: "jgis-panel-tab-content" },
-                React.createElement(ObjectPropertiesReact, { setSelectedObject: setSelectedObjectProperties, selectedObject: selectedObjectProperties, formSchemaRegistry: props.formSchemaRegistry, model: props.model }))),
-            !props.settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "storyPanel", className: "jgis-panel-tab-content", style: { paddingTop: 0 } },
-                !storyMapPresentationMode && (React.createElement(PreviewModeSwitch, { checked: !editorMode, onCheckedChange: toggleEditor })),
-                showEditor ? (React.createElement(StoryEditorPanel, { model: props.model, commands: props.commands })) : (React.createElement(StoryViewerPanel, { model: props.model, isSpecta: false, addLayer: props.addLayer, removeLayer: props.removeLayer })))),
-            !props.settings.annotationsDisabled && (React.createElement(TabsContent, { value: "annotations", className: "jgis-panel-tab-content" },
-                React.createElement(AnnotationsPanel, { annotationModel: props.annotationModel, jgisModel: props.model }))),
-            !props.settings.identifyDisabled && (React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },
-                React.createElement(IdentifyPanelComponent, { model: props.model }))))));
+    return (React.createElement(Draggable, { handle: ".jgis-tabs-list", cancel: ".jgis-tabs-trigger", bounds: ".jGIS-Mainview-Container" },
+        React.createElement("div", { className: "jgis-right-panel-container", style: { display: rightPanelVisible ? 'block' : 'none' } },
+            React.createElement(PanelTabs, { className: "jgis-panel-tabs", curTab: curTab },
+                React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: `${tab.name}-${tab.title}`, value: tab.name, onClick: () => {
+                        if (curTab !== tab.name) {
+                            setCurTab(tab.name);
+                        }
+                        else {
+                            setCurTab('');
+                        }
+                    } }, tab.title)))),
+                !props.settings.objectPropertiesDisabled && (React.createElement(TabsContent, { value: "objectProperties", className: "jgis-panel-tab-content" },
+                    React.createElement(ObjectPropertiesReact, { setSelectedObject: setSelectedObjectProperties, selectedObject: selectedObjectProperties, formSchemaRegistry: props.formSchemaRegistry, model: props.model }))),
+                !props.settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "storyPanel", className: "jgis-panel-tab-content", style: { paddingTop: 0 } },
+                    !storyMapPresentationMode && (React.createElement(PreviewModeSwitch, { checked: !editorMode, onCheckedChange: toggleEditor })),
+                    showEditor ? (React.createElement(StoryEditorPanel, { model: props.model, commands: props.commands })) : (React.createElement(StoryViewerPanel, { model: props.model, isSpecta: false, addLayer: props.addLayer, removeLayer: props.removeLayer })))),
+                !props.settings.annotationsDisabled && (React.createElement(TabsContent, { value: "annotations", className: "jgis-panel-tab-content" },
+                    React.createElement(AnnotationsPanel, { annotationModel: props.annotationModel, jgisModel: props.model }))),
+                !props.settings.identifyDisabled && (React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },
+                    React.createElement(IdentifyPanelComponent, { model: props.model })))))));
 };

package/lib/panelview/story-maps/StoryViewerPanel.d.ts

@@ -7,11 +7,19 @@ interface IStoryViewerPanelProps {
     className?: string;
     addLayer?: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
     removeLayer?: (id: string) => void;
+    /** Called when the segment transition animation has finished (e.g. for scroll-guard cleanup). */
+    onSegmentTransitionEnd?: () => void;
 }
 export interface IStoryViewerPanelHandle {
     handlePrev: () => void;
     handleNext: () => void;
-    canNavigate: boolean;
+    spectaMode: boolean;
+    hasPrev: boolean;
+    hasNext: boolean;
+    getAtTop: () => boolean;
+    getAtBottom: () => boolean;
+    /** The scrollable panel DOM element (same instance for all segments). */
+    getScrollContainer: () => HTMLDivElement | null;
 }
 /**
  * Where the story nav bar should be rendered in the viewer layout.

package/lib/panelview/story-maps/StoryViewerPanel.js

@@ -18,12 +18,17 @@ function getStoryNavPlacement(isSpecta, hasImage, storyType, isMobile) {
     }
     return hasImage ? 'over-image' : 'below-title';
 }
-const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, className, addLayer, removeLayer }, ref) => {
+const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, className, addLayer, removeLayer, onSegmentTransitionEnd, }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const [currentIndexDisplayed, setCurrentIndexDisplayed] = useState(() => model.getCurrentSegmentIndex());
     const [storyData, setStoryData] = useState((_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null);
     const [imageLoaded, setImageLoaded] = useState(false);
     const panelRef = useRef(null);
+    const segmentContainerRef = useRef(null);
+    const topSentinelRef = useRef(null);
+    const bottomSentinelRef = useRef(null);
+    const atTopRef = useRef(false);
+    const atBottomRef = useRef(false);
     const setIndex = useCallback((index) => {
         model.setCurrentSegmentIndex(index);
         setCurrentIndexDisplayed(index);
@@ -283,20 +288,63 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, classN
         hasPrev,
         hasNext,
     };
+    // IntersectionObserver for at-top/at-bottom (avoids layout reads in scroll path)
+    useEffect(() => {
+        const root = panelRef.current;
+        const topEl = topSentinelRef.current;
+        const bottomEl = bottomSentinelRef.current;
+        if (!root || !topEl || !bottomEl) {
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target === topEl) {
+                    atTopRef.current = entry.isIntersecting;
+                }
+                else if (entry.target === bottomEl) {
+                    atBottomRef.current = entry.isIntersecting;
+                }
+            }
+        }, { root, threshold: 0, rootMargin: '0px' });
+        observer.observe(topEl);
+        observer.observe(bottomEl);
+        return () => observer.disconnect();
+    }, [currentIndexDisplayed]);
     // Expose methods via ref for parent component to use
     useImperativeHandle(ref, () => ({
         handlePrev,
         handleNext,
-        canNavigate: isSpecta,
-    }), [handlePrev, handleNext, storyData, isSpecta]);
+        spectaMode: isSpecta,
+        hasPrev,
+        hasNext,
+        getAtTop: () => atTopRef.current,
+        getAtBottom: () => atBottomRef.current,
+        getScrollContainer: () => panelRef.current,
+    }), [handlePrev, handleNext, storyData, isSpecta, hasPrev, hasNext]);
     const hasImage = !!(((_d = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _d === void 0 ? void 0 : _d.image) && imageLoaded);
     const storyType = (_e = storyData.storyType) !== null && _e !== void 0 ? _e : 'guided';
     const navPlacement = getStoryNavPlacement(isSpecta, hasImage, storyType, isMobile);
     const navSlot = navPlacement !== null ? (React.createElement(StoryNavBar, Object.assign({ placement: navPlacement }, storyNavBarProps))) : null;
     // Get transition time from current segment, default to 0.3s
     const transitionTime = (_g = (_f = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.transition) === null || _f === void 0 ? void 0 : _f.time) !== null && _g !== void 0 ? _g : 0.3;
+    // Notify parent when segment transition animation ends (e.g. for scroll-guard cleanup)
+    useEffect(() => {
+        const el = segmentContainerRef.current;
+        if (!el || !onSegmentTransitionEnd) {
+            return;
+        }
+        const handleAnimationEnd = (e) => {
+            if (e.animationName === 'fadeIn') {
+                el.removeEventListener('animationend', handleAnimationEnd);
+                onSegmentTransitionEnd();
+            }
+        };
+        el.addEventListener('animationend', handleAnimationEnd);
+        return () => el.removeEventListener('animationend', handleAnimationEnd);
+    }, [currentIndexDisplayed, onSegmentTransitionEnd]);
     return (React.createElement("div", { ref: panelRef, className: cn('jgis-story-viewer-panel', className), id: "jgis-story-segment-panel" },
-        React.createElement("div", { key: currentIndexDisplayed, className: "jgis-story-segment-container", style: {
+        React.createElement("div", { ref: topSentinelRef, "aria-hidden": true, "data-story-scroll-sentinel": "top", style: { height: 1, minHeight: 1, pointerEvents: 'none' } }),
+        React.createElement("div", { ref: segmentContainerRef, key: currentIndexDisplayed, className: "jgis-story-segment-container", style: {
                 animationDuration: `${transitionTime}s`,
             } },
             React.createElement("div", { id: "jgis-story-segment-header" },
@@ -307,7 +355,8 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, classN
                         ? navSlot
                         : null })),
             React.createElement("div", { id: "jgis-story-segment-content" },
-                React.createElement(StoryContentSection, { markdown: (_o = (_m = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _m === void 0 ? void 0 : _m.markdown) !== null && _o !== void 0 ? _o : '' })))));
+                React.createElement(StoryContentSection, { markdown: (_o = (_m = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _m === void 0 ? void 0 : _m.markdown) !== null && _o !== void 0 ? _o : '' }))),
+        React.createElement("div", { ref: bottomSentinelRef, "aria-hidden": true, "data-story-scroll-sentinel": "bottom", style: { height: 1, minHeight: 1, pointerEvents: 'none' } })));
 });
 StoryViewerPanel.displayName = 'StoryViewerPanel';
 export default StoryViewerPanel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.13.1",
+  "version": "0.13.2",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -44,7 +44,7 @@
     "@jupyter/collaboration": "^4",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.13.1",
+    "@jupytergis/schema": "^0.13.2",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",

package/style/shared/tabs.css

@@ -5,6 +5,7 @@
   align-items: center;
   background-color: var(--jp-layout-color0);
 }
+
 .jgis-tabs-list {
   display: inline-flex;
   height: 2.5rem;
@@ -12,12 +13,17 @@
   justify-content: space-evenly;
   background-color: var(--jp-layout-color2);
   color: var(--jp-ui-font-color0);
+  cursor: grab;
   gap: 1rem;
   width: 100%;
   font-size: 9px;
   overflow-x: scroll;
 }
 
+.jgis-tabs-list:active {
+  cursor: grabbing;
+}
+
 .jgis-tabs-trigger {
   display: inline-flex;
   align-items: center;