@jupytergis/base 0.11.1 → 0.12.1

package/lib/commands/BaseCommandIDs.d.ts

@@ -41,3 +41,4 @@ export declare const showObjectPropertiesTab = "jupytergis:showObjectPropertiesT
 export declare const showAnnotationsTab = "jupytergis:showAnnotationsTab";
 export declare const showIdentifyPanelTab = "jupytergis:showIdentifyPanelTab";
 export declare const addStorySegment = "jupytergis:addStorySegment";
+export declare const toggleStoryPresentationMode = "jupytergis:toggleStoryPresentationMode";

package/lib/commands/BaseCommandIDs.js

@@ -57,3 +57,4 @@ export const showAnnotationsTab = 'jupytergis:showAnnotationsTab';
 export const showIdentifyPanelTab = 'jupytergis:showIdentifyPanelTab';
 // Story maps
 export const addStorySegment = 'jupytergis:addStorySegment';
+export const toggleStoryPresentationMode = 'jupytergis:toggleStoryPresentationMode';

package/lib/commands/index.js

@@ -28,6 +28,31 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
     var _a;
     const trans = translator.load('jupyterlab');
     const { commands } = app;
+    /**
+     * Wraps a command definition to automatically disable it in Specta mode
+     */
+    const createSpectaAwareCommand = (command) => {
+        const originalIsEnabled = command.isEnabled;
+        return Object.assign(Object.assign({}, command), { isEnabled: (args) => {
+                var _a;
+                // First check if we're in Specta mode
+                const currentModel = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
+                if (currentModel === null || currentModel === void 0 ? void 0 : currentModel.isSpectaMode()) {
+                    return false;
+                }
+                // Then check the original isEnabled if it exists
+                if (originalIsEnabled) {
+                    return originalIsEnabled(args !== null && args !== void 0 ? args : {});
+                }
+                // Default to enabled if no original check
+                return true;
+            } });
+    };
+    // Override addCommand to automatically wrap all commands
+    const originalAddCommand = commands.addCommand.bind(commands);
+    commands.addCommand = (id, options) => {
+        return originalAddCommand(id, createSpectaAwareCommand(options));
+    };
     commands.addCommand(CommandIDs.symbology, Object.assign({ label: trans.__('Edit Symbology'), isEnabled: () => {
             var _a, _b;
             const model = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model;
@@ -356,6 +381,7 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
             Private.removeSelectedItems(model, 'layer', selection => {
                 model === null || model === void 0 ? void 0 : model.removeLayer(selection);
             });
+            commands.notifyCommandChanged(CommandIDs.toggleStoryPresentationMode);
         },
     });
     commands.addCommand(CommandIDs.renameGroup, {
@@ -831,7 +857,33 @@ export function addCommands(app, tracker, translator, formSchemaRegistry, layerB
                 return;
             }
             current.model.addStorySegment();
+            commands.notifyCommandChanged(CommandIDs.toggleStoryPresentationMode);
         } }, icons.get(CommandIDs.addStorySegment)));
+    commands.addCommand(CommandIDs.toggleStoryPresentationMode, Object.assign({ label: trans.__('Toggle Story Presentation Mode'), isToggled: () => {
+            const current = tracker.currentWidget;
+            if (!current) {
+                return false;
+            }
+            const { storyMapPresentationMode } = current.model.getOptions();
+            return storyMapPresentationMode !== null && storyMapPresentationMode !== void 0 ? storyMapPresentationMode : false;
+        }, isEnabled: () => {
+            var _a, _b, _c;
+            const storySegments = (_b = (_a = tracker.currentWidget) === null || _a === void 0 ? void 0 : _a.model.getSelectedStory().story) === null || _b === void 0 ? void 0 : _b.storySegments;
+            if (((_c = tracker.currentWidget) === null || _c === void 0 ? void 0 : _c.model.jgisSettings.storyMapsDisabled) ||
+                !storySegments ||
+                storySegments.length < 1) {
+                return false;
+            }
+            return true;
+        }, execute: args => {
+            const current = tracker.currentWidget;
+            if (!current) {
+                return;
+            }
+            const currentOptions = current.model.getOptions();
+            current.model.setOptions(Object.assign(Object.assign({}, currentOptions), { storyMapPresentationMode: !currentOptions.storyMapPresentationMode }));
+            commands.notifyCommandChanged(CommandIDs.toggleStoryPresentationMode);
+        } }, icons.get(CommandIDs.toggleStoryPresentationMode)));
     loadKeybindings(commands, keybindings);
 }
 var Private;

package/lib/constants.d.ts

@@ -1,9 +1,10 @@
-import { IDict } from '@jupytergis/schema';
+import { ProcessingCommandIDs } from '@jupytergis/schema';
 import { LabIcon } from '@jupyterlab/ui-components';
+import * as BaseCommandIDs from './commands/BaseCommandIDs';
 /**
  * The command IDs.
  */
-export declare const CommandIDs: IDict;
+export declare const CommandIDs: typeof BaseCommandIDs & typeof ProcessingCommandIDs;
 interface IRegisteredIcon {
     icon?: LabIcon;
     iconClass?: string;

package/lib/constants.js

@@ -36,6 +36,9 @@ const iconObject = {
     [CommandIDs.temporalController]: { icon: clockIcon },
     [CommandIDs.addMarker]: { icon: markerIcon },
     [CommandIDs.addStorySegment]: { iconClass: 'fa fa-link' },
+    [CommandIDs.toggleStoryPresentationMode]: {
+        iconClass: 'fa fa-book jgis-icon-adjust',
+    },
 };
 /**
  * The registered icons

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

@@ -1,10 +1,4 @@
 import { IJGISLayer, IJupyterGISModel } from '@jupytergis/schema';
-export interface IBandHistogram {
-    buckets: number[];
-    count: number;
-    max: number;
-    min: number;
-}
 export interface IBandRow {
     band: number;
     colorInterpretation?: string;

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

@@ -10,7 +10,6 @@ const useGetBandInfo = (model, layer) => {
         setLoading(true);
         setError(null);
         try {
-            const bandsArr = [];
             const source = model.getSource((_a = layer === null || layer === void 0 ? void 0 : layer.parameters) === null || _a === void 0 ? void 0 : _a.source);
             const sourceInfo = (_b = source === null || source === void 0 ? void 0 : source.parameters) === null || _b === void 0 ? void 0 : _b.urls[0];
             if (!(sourceInfo === null || sourceInfo === void 0 ? void 0 : sourceInfo.url)) {
@@ -40,9 +39,10 @@ const useGetBandInfo = (model, layer) => {
             }
             const image = await tiff.getImage();
             const numberOfBands = image.getSamplesPerPixel();
+            const bandsArr = [];
             for (let i = 0; i < numberOfBands; i++) {
                 bandsArr.push({
-                    band: i,
+                    band: i + 1,
                     stats: {
                         minimum: (_c = sourceInfo.min) !== null && _c !== void 0 ? _c : 0,
                         maximum: (_d = sourceInfo.max) !== null && _d !== void 0 ? _d : 100,

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

@@ -87,9 +87,9 @@ const MultibandColor = ({ model, okSignalPromise, cancel, layerId, }) => {
     return (React.createElement("div", { className: "jp-gis-layer-symbology-container" },
         React.createElement("div", { className: "jp-gis-band-container" },
             React.createElement(LoadingOverlay, { loading: loading }),
-            React.createElement(BandRow, { label: "Red Band", index: selectedBands.red - 1, bandRow: bandRows[selectedBands.red - 1], bandRows: bandRows, setSelectedBand: val => updateBand('red', val >= 0 ? val + 1 : 0), setBandRows: setBandRows, isMultibandColor: true }),
-            React.createElement(BandRow, { label: "Green Band", index: selectedBands.green - 1, bandRow: bandRows[selectedBands.green - 1], bandRows: bandRows, setSelectedBand: val => updateBand('green', val >= 0 ? val + 1 : 0), setBandRows: setBandRows, isMultibandColor: true }),
-            React.createElement(BandRow, { label: "Blue Band", index: selectedBands.blue - 1, bandRow: bandRows[selectedBands.blue - 1], bandRows: bandRows, setSelectedBand: val => updateBand('blue', val >= 0 ? val + 1 : 0), setBandRows: setBandRows, isMultibandColor: true }),
-            React.createElement(BandRow, { label: "Alpha Band", index: selectedBands.alpha - 1, bandRow: bandRows[selectedBands.alpha - 1], bandRows: bandRows, setSelectedBand: val => updateBand('alpha', val >= 0 ? val + 1 : 0), setBandRows: setBandRows, isMultibandColor: true }))));
+            React.createElement(BandRow, { label: "Red Band", index: selectedBands.red - 1, bandRow: bandRows[selectedBands.red - 1], bandRows: bandRows, setSelectedBand: val => updateBand('red', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }),
+            React.createElement(BandRow, { label: "Green Band", index: selectedBands.green - 1, bandRow: bandRows[selectedBands.green - 1], bandRows: bandRows, setSelectedBand: val => updateBand('green', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }),
+            React.createElement(BandRow, { label: "Blue Band", index: selectedBands.blue - 1, bandRow: bandRows[selectedBands.blue - 1], bandRows: bandRows, setSelectedBand: val => updateBand('blue', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }),
+            React.createElement(BandRow, { label: "Alpha Band", index: selectedBands.alpha - 1, bandRow: bandRows[selectedBands.alpha - 1], bandRows: bandRows, setSelectedBand: val => updateBand('alpha', val >= 0 ? val : 0), setBandRows: setBandRows, isMultibandColor: true }))));
 };
 export default MultibandColor;

package/lib/formbuilder/objectform/StoryEditorForm.d.ts

@@ -1,8 +1,9 @@
 import { IDict } from '@jupytergis/schema';
+import { RJSFSchema, UiSchema } from '@rjsf/utils';
 import { BaseForm } from './baseform';
 /**
- * The form to modify a hillshade layer.
+ * The form to modify story map properties.
  */
 export declare class StoryEditorPropertiesForm extends BaseForm {
-    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
+    protected processSchema(data: IDict<any> | undefined, schema: RJSFSchema, uiSchema: UiSchema): void;
 }

package/lib/formbuilder/objectform/StoryEditorForm.js

@@ -1,10 +1,33 @@
 import { BaseForm } from './baseform';
+import { getCssVarAsColor } from "../../tools";
 /**
- * The form to modify a hillshade layer.
+ * The form to modify story map properties.
  */
 export class StoryEditorPropertiesForm extends BaseForm {
     processSchema(data, schema, uiSchema) {
         super.processSchema(data, schema, uiSchema);
         this.removeFormEntry('storySegments', data, schema, uiSchema);
+        uiSchema.presentationBgColor = {
+            'ui:widget': 'color',
+        };
+        uiSchema.presentaionTextColor = {
+            'ui:widget': 'color',
+        };
+        // Set default values from theme CSS variables when not already in data
+        const schemaProps = schema.properties;
+        if ((schemaProps === null || schemaProps === void 0 ? void 0 : schemaProps.presentationBgColor) &&
+            (data === null || data === void 0 ? void 0 : data.presentationBgColor) === undefined) {
+            const defaultBg = getCssVarAsColor('--jp-layout-color0');
+            if (defaultBg) {
+                schemaProps.presentationBgColor.default = defaultBg;
+            }
+        }
+        if ((schemaProps === null || schemaProps === void 0 ? void 0 : schemaProps.presentaionTextColor) &&
+            (data === null || data === void 0 ? void 0 : data.presentaionTextColor) === undefined) {
+            const defaultText = getCssVarAsColor('--jp-ui-font-color0');
+            if (defaultText) {
+                schemaProps.presentaionTextColor.default = defaultText;
+            }
+        }
     }
 }

package/lib/mainview/mainView.d.ts

@@ -31,10 +31,12 @@ interface IStates {
     }>;
     displayTemporalController: boolean;
     filterStates: IDict<IJGISFilterItem | undefined>;
+    isSpectaPresentation: boolean;
 }
 export declare class MainView extends React.Component<IProps, IStates> {
     constructor(props: IProps);
     componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: IProps, prevState: IStates): void;
     componentWillUnmount(): void;
     generateMap(center: number[], zoom: number): Promise<void>;
     updateCenter: () => void;
@@ -134,6 +136,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
     removeLayer(id: string): void;
     private _onClientSharedStateChanged;
     private _onSharedOptionsChanged;
+    private _onSettingsChanged;
     private updateOptions;
     private _onViewChanged;
     /**
@@ -167,6 +170,15 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _onLayerTreeChange;
     private _onSourcesChange;
     private _onSharedModelStateChange;
+    /**
+     * Handler for when story maps change in the model.
+     * Updates specta state and presentation colors when story data becomes available.
+     */
+    private _setupSpectaMode;
+    private _removeAllInteractions;
+    private _setupStoryScrollListener;
+    private _cleanupStoryScrollListener;
+    private _updateSpectaPresentationColors;
     private _onSharedMetadataChanged;
     private _computeAnnotationPosition;
     private _updateAnnotation;
@@ -187,7 +199,11 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _commands;
     private _isPositionInitialized;
     private divRef;
+    private controlsToolbarRef;
+    private spectaContainerRef;
+    private storyViewerPanelRef;
     private _Map;
+    private _zoomControl?;
     private _model;
     private _mainViewModel;
     private _ready;
@@ -203,5 +219,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _formSchemaRegistry?;
     private _annotationModel?;
     private _featurePropertyCache;
+    private _isSpectaPresentationInitialized;
+    private _storyScrollHandler;
 }
 export {};

package/lib/mainview/mainView.js

@@ -16,12 +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';
@@ -44,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);
@@ -406,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.presentationBgColor;
+            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) => {
@@ -451,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;
@@ -489,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);
@@ -513,6 +653,7 @@ export class MainView extends React.Component {
             loadingErrors: [],
             displayTemporalController: false,
             filterStates: {},
+            isSpectaPresentation: false,
         };
         this._sources = [];
         this._loadingLayers = new Set();
@@ -530,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];
@@ -543,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,
+        });
+        const controls = [scaleLine, fullScreen];
+        if (this._model.jgisSettings.zoomButtonsEnabled) {
+            this._zoomControl = new Zoom({
+                target: this.controlsToolbarRef.current || undefined,
+            });
+            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({
@@ -1379,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();
@@ -1555,7 +1750,7 @@ export class MainView extends React.Component {
     }
     // TODO this and flyToPosition need a rework
     _onZoomToPosition(_, id) {
-        var _a, _b;
+        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) {
@@ -1566,17 +1761,44 @@ export class MainView extends React.Component {
         let extent;
         const layer = this.getLayer(id);
         const source = layer === null || layer === void 0 ? void 0 : layer.getSource();
-        // TODO: Story segment layers don't have an associated OL layer
-        // This could be better
+        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) {
-            const jgisLayer = this._model.getLayer(id);
-            const layerParams = jgisLayer === null || jgisLayer === void 0 ? void 0 : jgisLayer.parameters;
-            const coords = getCenter(layerParams.extent);
-            // TODO: Should pass args through signal??
-            // const { story } = this._model.getSelectedStory();
-            this._flyToPosition({ x: coords[0], y: coords[1] }, layerParams.zoom, ((_b = layerParams.transition.time) !== null && _b !== void 0 ? _b : 1) * 1000, // seconds -> ms
-            layerParams.transition.type);
-            return;
+            // 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();
@@ -1829,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',
@@ -1841,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 }))));
     }
 }