@jupytergis/base 0.12.0 → 0.12.2

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/dialogs/layerBrowserDialog.d.ts

@@ -1,11 +1,11 @@
-import { IJGISFormSchemaRegistry, IJupyterGISModel, IRasterLayerGalleryEntry } from '@jupytergis/schema';
+import { IJGISFormSchemaRegistry, IJupyterGISModel, ILayerGalleryEntry } from '@jupytergis/schema';
 import { Dialog } from '@jupyterlab/apputils';
 import { PromiseDelegate } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import React from 'react';
 interface ILayerBrowserDialogProps {
     model: IJupyterGISModel;
-    registry: IRasterLayerGalleryEntry[];
+    registry: ILayerGalleryEntry[];
     formSchemaRegistry: IJGISFormSchemaRegistry;
     okSignalPromise: PromiseDelegate<Signal<Dialog<any>, number>>;
     cancel: () => void;
@@ -13,7 +13,7 @@ interface ILayerBrowserDialogProps {
 export declare const LayerBrowserComponent: React.FC<ILayerBrowserDialogProps>;
 export interface ILayerBrowserOptions {
     model: IJupyterGISModel;
-    registry: IRasterLayerGalleryEntry[];
+    registry: ILayerGalleryEntry[];
     formSchemaRegistry: IJGISFormSchemaRegistry;
 }
 export declare class LayerBrowserWidget extends Dialog<boolean> {

package/lib/dialogs/layerBrowserDialog.js

@@ -5,14 +5,14 @@ import { PromiseDelegate, UUID } from '@lumino/coreutils';
 import { Signal } from '@lumino/signaling';
 import React, { useEffect, useState } from 'react';
 import { CreationFormWrapper } from './layerCreationFormDialog';
-import CUSTOM_RASTER_IMAGE from '../../rasterlayer_gallery/custom_raster.png';
+import CUSTOM_RASTER_IMAGE from '../../layer_gallery/custom_raster.png';
 export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okSignalPromise, cancel, }) => {
     const [searchTerm, setSearchTerm] = useState('');
     const [activeLayers, setActiveLayers] = useState([]);
     const [selectedCategory, setSelectedCategory] = useState();
     const [creatingCustomRaster, setCreatingCustomRaster] = useState(false);
     const [galleryWithCategory, setGalleryWithCategory] = useState(registry);
-    const providers = [...new Set(registry.map(item => item.source.provider))];
+    const providers = [...new Set(registry.map(item => item.provider))];
     const filteredGallery = galleryWithCategory.filter(item => item.name.toLowerCase().includes(searchTerm));
     useEffect(() => {
         model.sharedModel.layersChanged.connect(handleLayerChange);
@@ -37,7 +37,7 @@ export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okS
         selectedCategory === null || selectedCategory === void 0 ? void 0 : selectedCategory.classList.remove('jGIS-layer-browser-category-selected');
         const filteredGallery = sameAsOld
             ? registry
-            : registry.filter(item => { var _a; return (_a = item.source.provider) === null || _a === void 0 ? void 0 : _a.includes(categoryTab.innerText); });
+            : registry.filter(item => { var _a; return (_a = item.provider) === null || _a === void 0 ? void 0 : _a.includes(categoryTab.innerText); });
         setGalleryWithCategory(filteredGallery);
         setSearchTerm('');
         setSelectedCategory(sameAsOld ? null : categoryTab);
@@ -52,15 +52,13 @@ export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okS
     const handleTileClick = (tile) => {
         const sourceId = UUID.uuid4();
         const sourceModel = {
-            type: 'RasterSource',
+            type: tile.sourceType,
             name: tile.name,
-            parameters: tile.source,
+            parameters: tile.sourceParameters,
         };
         const layerModel = {
-            type: 'RasterLayer',
-            parameters: {
-                source: sourceId,
-            },
+            type: tile.layerType,
+            parameters: Object.assign(Object.assign({}, tile.layerParameters), { source: sourceId }),
             visible: true,
             name: tile.name + ' Layer',
         };
@@ -113,7 +111,8 @@ export const LayerBrowserComponent = ({ model, registry, formSchemaRegistry, okS
                 React.createElement("div", { className: "jGIS-layer-browser-text-container" },
                     React.createElement("div", { className: "jGIS-layer-browser-text-info" },
                         React.createElement("h3", { className: "jGIS-layer-browser-text-header jGIS-layer-browser-text-general" }, tile.name)),
-                    React.createElement("p", { className: "jGIS-layer-browser-text-general jGIS-layer-browser-text-source" }, tile.source.attribution))))))));
+                    React.createElement("div", null, tile.sourceType),
+                    React.createElement("p", { className: "jGIS-layer-browser-text-general jGIS-layer-browser-text-source" }, tile.description))))))));
 };
 export class LayerBrowserWidget extends Dialog {
     constructor(options) {

package/lib/formbuilder/objectform/StoryEditorForm.js

@@ -1,3 +1,4 @@
+import { getCssVarAsColor } from "../../tools";
 import { BaseForm } from './baseform';
 /**
  * The form to modify story map properties.
@@ -6,11 +7,27 @@ export class StoryEditorPropertiesForm extends BaseForm {
     processSchema(data, schema, uiSchema) {
         super.processSchema(data, schema, uiSchema);
         this.removeFormEntry('storySegments', data, schema, uiSchema);
-        uiSchema.presentaionBgColor = {
+        uiSchema.presentationBgColor = {
             'ui:widget': 'color',
         };
-        uiSchema.presentaionTextColor = {
+        uiSchema.presentationTextColor = {
             '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.presentationTextColor) &&
+            (data === null || data === void 0 ? void 0 : data.presentationTextColor) === undefined) {
+            const defaultText = getCssVarAsColor('--jp-ui-font-color0');
+            if (defaultText) {
+                schemaProps.presentationTextColor.default = defaultText;
+            }
+        }
     }
 }

package/lib/mainview/mainView.d.ts

@@ -1,4 +1,4 @@
-import { IAnnotation, IAnnotationModel, IDict, IJGISFilterItem, IJGISFormSchemaRegistry, IJGISLayer, IJGISSource } from '@jupytergis/schema';
+import { IAnnotation, IAnnotationModel, IDict, IJGISFilterItem, IJGISFormSchemaRegistry, IJGISLayer, IJGISSource, IJupyterGISSettings } from '@jupytergis/schema';
 import { User } from '@jupyterlab/services';
 import { IStateDB } from '@jupyterlab/statedb';
 import { Layer } from 'ol/layer';
@@ -10,6 +10,8 @@ interface IProps {
     state?: IStateDB;
     formSchemaRegistry?: IJGISFormSchemaRegistry;
     annotationModel?: IAnnotationModel;
+    /** True when viewport matches (max-width: 768px). Injected by MainViewWithMediaQuery. */
+    isMobile?: boolean;
 }
 interface IStates {
     id: string;
@@ -31,6 +33,7 @@ interface IStates {
     }>;
     displayTemporalController: boolean;
     filterStates: IDict<IJGISFilterItem | undefined>;
+    jgisSettings: IJupyterGISSettings;
     isSpectaPresentation: boolean;
 }
 export declare class MainView extends React.Component<IProps, IStates> {
@@ -136,6 +139,7 @@ export declare class MainView extends React.Component<IProps, IStates> {
     removeLayer(id: string): void;
     private _onClientSharedStateChanged;
     private _onSharedOptionsChanged;
+    private _syncSettingsFromRegistry;
     private _onSettingsChanged;
     private updateOptions;
     private _onViewChanged;
@@ -222,4 +226,6 @@ export declare class MainView extends React.Component<IProps, IStates> {
     private _isSpectaPresentationInitialized;
     private _storyScrollHandler;
 }
-export {};
+/** Thin wrapper that injects isMobile from useMediaQuery so MainView can use it in JSX. */
+declare function MainViewWithMediaQuery(props: IProps): React.JSX.Element;
+export { MainViewWithMediaQuery };

package/lib/mainview/mainView.js

@@ -39,6 +39,7 @@ import * as React from 'react';
 import AnnotationFloater from "../annotations/components/AnnotationFloater";
 import { CommandIDs } from "../constants";
 import { LoadingOverlay } from "../shared/components/loading";
+import useMediaQuery from "../shared/hooks/useMediaQuery";
 import StatusBar from "../statusbar/StatusBar";
 import { debounce, isLightTheme, loadFile, throttle } from "../tools";
 import CollaboratorPointers from './CollaboratorPointers';
@@ -47,6 +48,7 @@ import TemporalSlider from './TemporalSlider';
 import { hexToRgb } from '../dialogs/symbology/colorRampUtils';
 import { markerIcon } from '../icons';
 import { LeftPanel, RightPanel } from '../panelview';
+import { MobileSpectaPanel } from '../panelview/story-maps/MobileSpectaPanel';
 import StoryViewerPanel from '../panelview/story-maps/StoryViewerPanel';
 export class MainView extends React.Component {
     constructor(props) {
@@ -528,8 +530,8 @@ export class MainView extends React.Component {
                 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;
+            const bgColor = story === null || story === void 0 ? void 0 : story.presentationBgColor;
+            const textColor = story === null || story === void 0 ? void 0 : story.presentationTextColor;
             // Set background color
             if (bgColor) {
                 const rgb = hexToRgb(bgColor);
@@ -634,6 +636,9 @@ export class MainView extends React.Component {
         this._model.geolocationChanged.connect(this._handleGeolocationChanged, this);
         this._model.flyToGeometrySignal.connect(this.flyToGeometry, this);
         this._model.highlightFeatureSignal.connect(this.highlightFeatureOnMap, this);
+        Promise.resolve().then(() => {
+            this._syncSettingsFromRegistry();
+        });
         // Watch isIdentifying and clear the highlight when Identify Tool is turned off
         this._model.sharedModel.awareness.on('change', () => {
             var _a;
@@ -653,6 +658,7 @@ export class MainView extends React.Component {
             loadingErrors: [],
             displayTemporalController: false,
             filterStates: {},
+            jgisSettings: this._model.jgisSettings,
             isSpectaPresentation: false,
         };
         this._sources = [];
@@ -705,11 +711,11 @@ export class MainView extends React.Component {
         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) {
+            this._zoomControl = new Zoom({
+                target: this.controlsToolbarRef.current || undefined,
+            });
             controls.push(this._zoomControl);
         }
         if (this.divRef.current) {
@@ -1564,8 +1570,16 @@ export class MainView extends React.Component {
             this._isPositionInitialized = true;
         }
     }
-    _onSettingsChanged(sender, key) {
-        if (key !== 'zoomButtonsEnabled' || !this._Map) {
+    async _syncSettingsFromRegistry() {
+        const composite = this._model.jgisSettings;
+        if (composite) {
+            this.setState({ jgisSettings: composite });
+            this._onSettingsChanged();
+        }
+    }
+    _onSettingsChanged() {
+        this.setState({ jgisSettings: this._model.jgisSettings });
+        if (!this._Map) {
             return;
         }
         const enabled = this._model.jgisSettings.zoomButtonsEnabled;
@@ -1795,6 +1809,14 @@ export class MainView extends React.Component {
             if ((jgisLayer === null || jgisLayer === void 0 ? void 0 : jgisLayer.type) === 'StorySegmentLayer') {
                 const layerParams = jgisLayer.parameters;
                 const coords = getCenter(layerParams.extent);
+                // Don't move map if we're already centered on the segment
+                const viewCenter = this._Map.getView().getCenter();
+                const centersEqual = viewCenter !== undefined &&
+                    Math.abs(viewCenter[0] - coords[0]) < 1e-9 &&
+                    Math.abs(viewCenter[1] - coords[1]) < 1e-9;
+                if (centersEqual) {
+                    return;
+                }
                 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;
@@ -2064,11 +2086,18 @@ export class MainView extends React.Component {
                             height: '100%',
                         } },
                         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, commands: this._mainViewModel.commands, formSchemaRegistry: this._formSchemaRegistry, annotationModel: this._annotationModel })))) : (React.createElement("div", { className: "jgis-specta-right-panel-container-mod jgis-right-panel-container" },
+                            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, 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 }))))),
+                                React.createElement(StoryViewerPanel, { ref: this.storyViewerPanelRef, model: this._model, isSpecta: this.state.isSpectaPresentation, className: "jgis-story-viewer-panel-specta-mod" }))))),
                         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 }))));
+                !this.state.isSpectaPresentation && (React.createElement(StatusBar, { jgisModel: this._model, loading: this.state.loadingLayer, projection: this.state.viewProjection, scale: this.state.scale })))));
     }
 }
+// ! TODO make mainview a modern react component instead of a class
+/** Thin wrapper that injects isMobile from useMediaQuery so MainView can use it in JSX. */
+function MainViewWithMediaQuery(props) {
+    const isMobile = useMediaQuery('(max-width: 768px)');
+    return React.createElement(MainView, Object.assign({}, props, { isMobile: isMobile }));
+}
+export { MainViewWithMediaQuery };

package/lib/mainview/mainviewwidget.js

@@ -1,6 +1,6 @@
 import { ReactWidget } from '@jupyterlab/apputils';
 import * as React from 'react';
-import { MainView } from './mainView';
+import { MainViewWithMediaQuery } from './mainView';
 export class JupyterGISMainViewPanel extends ReactWidget {
     /**
      * Construct a `JupyterGISPanel`.
@@ -12,6 +12,6 @@ export class JupyterGISMainViewPanel extends ReactWidget {
         this._options = options;
     }
     render() {
-        return (React.createElement(MainView, { state: this._state, viewModel: this._options.mainViewModel, formSchemaRegistry: this._options.formSchemaRegistry, annotationModel: this._options.annotationModel }));
+        return (React.createElement(MainViewWithMediaQuery, { state: this._state, viewModel: this._options.mainViewModel, formSchemaRegistry: this._options.formSchemaRegistry, annotationModel: this._options.annotationModel }));
     }
 }

package/lib/panelview/leftpanel.d.ts

@@ -1,4 +1,4 @@
-import { IJupyterGISModel, SelectionType } from '@jupytergis/schema';
+import { IJupyterGISModel, SelectionType, IJupyterGISSettings } from '@jupytergis/schema';
 import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 import { MouseEvent as ReactMouseEvent } from 'react';
@@ -12,6 +12,7 @@ interface ILeftPanelProps {
     model: IJupyterGISModel;
     state: IStateDB;
     commands: CommandRegistry;
+    settings: IJupyterGISSettings;
 }
 export declare const LeftPanel: React.FC<ILeftPanelProps>;
 export {};

package/lib/panelview/leftpanel.js

@@ -1,34 +1,64 @@
 import * as React from 'react';
+import { CommandIDs } from '../constants';
 import { LayersBodyComponent } from './components/layers';
 import FilterComponent from './filter-panel/Filter';
 import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
 import StacPanel from '../stacBrowser/components/StacPanel';
 export const LeftPanel = (props) => {
     var _a;
-    const [settings, setSettings] = React.useState(props.model.jgisSettings);
     const [options, setOptions] = React.useState(props.model.getOptions());
     const storyMapPresentationMode = (_a = options.storyMapPresentationMode) !== null && _a !== void 0 ? _a : false;
     const [layerTree, setLayerTree] = React.useState(props.model.getLayerTree());
+    const hasSyncedInitialSelectionRef = React.useRef(false);
+    const tabInfo = [
+        !props.settings.layersDisabled
+            ? { name: 'layers', title: 'Layers' }
+            : false,
+        !props.settings.stacBrowserDisabled && !storyMapPresentationMode
+            ? { name: 'stac', title: 'Stac Browser' }
+            : false,
+        !props.settings.filtersDisabled && !storyMapPresentationMode
+            ? { name: 'filters', title: 'Filters' }
+            : false,
+        !props.settings.storyMapsDisabled
+            ? { name: 'segments', title: 'Segments' }
+            : false,
+    ].filter(Boolean);
+    const [curTab, setCurTab] = React.useState(tabInfo.length > 0 ? tabInfo[0].name : undefined);
     React.useEffect(() => {
-        const onSettingsChanged = () => {
-            setSettings(Object.assign({}, props.model.jgisSettings));
-        };
         const onOptionsChanged = () => {
             setOptions(Object.assign({}, props.model.getOptions()));
         };
         const updateLayerTree = () => {
-            setLayerTree(props.model.getLayerTree() || []);
+            const freshTree = props.model.getLayerTree() || [];
+            setLayerTree(freshTree);
+            // Sync selected to top layer/group only the first time the tree has items
+            if (!hasSyncedInitialSelectionRef.current && freshTree.length > 0) {
+                hasSyncedInitialSelectionRef.current = true;
+                const lastItem = freshTree[freshTree.length - 1];
+                const lastId = typeof lastItem === 'string' ? lastItem : lastItem === null || lastItem === void 0 ? void 0 : lastItem.name;
+                const lastType = typeof lastItem === 'string' ? 'layer' : 'group';
+                if (lastId) {
+                    props.model.syncSelected({ [lastId]: { type: lastType } }, props.model.getClientId().toString());
+                }
+            }
+            // Need to let command know when segments get populated
+            props.commands.notifyCommandChanged(CommandIDs.toggleStoryPresentationMode);
+        };
+        const onSegmentAdded = (_sender, payload) => {
+            props.model.syncSelected({ [payload.storySegmentId]: { type: 'layer' } }, props.model.getClientId().toString());
+            setCurTab('segments');
         };
-        props.model.settingsChanged.connect(onSettingsChanged);
         props.model.sharedOptionsChanged.connect(onOptionsChanged);
         props.model.sharedModel.layersChanged.connect(updateLayerTree);
         props.model.sharedModel.layerTreeChanged.connect(updateLayerTree);
+        props.model.segmentAdded.connect(onSegmentAdded);
         updateLayerTree();
         return () => {
-            props.model.settingsChanged.disconnect(onSettingsChanged);
             props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
             props.model.sharedModel.layersChanged.disconnect(updateLayerTree);
             props.model.sharedModel.layerTreeChanged.disconnect(updateLayerTree);
+            props.model.segmentAdded.disconnect(onSegmentAdded);
         };
     }, [props.model]);
     // Since story segments are technically layers they are stored in the layer tree, so we separate them
@@ -88,24 +118,11 @@ export const LeftPanel = (props) => {
         }
         props.model.sharedModel.updateStoryMap(storyId, Object.assign(Object.assign({}, story), { storySegments: storySegmentLayerTree }));
     }, [storySegmentLayerTree]);
-    const allLeftTabsDisabled = settings.layersDisabled &&
-        settings.stacBrowserDisabled &&
-        settings.filtersDisabled &&
-        settings.storyMapsDisabled;
-    const leftPanelVisible = !settings.leftPanelDisabled && !allLeftTabsDisabled;
-    const tabInfo = [
-        !settings.layersDisabled ? { name: 'layers', title: 'Layers' } : false,
-        !settings.stacBrowserDisabled && !storyMapPresentationMode
-            ? { name: 'stac', title: 'Stac Browser' }
-            : false,
-        !settings.filtersDisabled && !storyMapPresentationMode
-            ? { name: 'filters', title: 'Filters' }
-            : false,
-        !settings.storyMapsDisabled
-            ? { name: 'segments', title: 'Segments' }
-            : false,
-    ].filter(Boolean);
-    const [curTab, setCurTab] = React.useState(tabInfo.length > 0 ? tabInfo[0].name : undefined);
+    const allLeftTabsDisabled = props.settings.layersDisabled &&
+        props.settings.stacBrowserDisabled &&
+        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: () => {
@@ -116,12 +133,12 @@ export const LeftPanel = (props) => {
                         setCurTab('');
                     }
                 } }, tab.title)))),
-            !settings.layersDisabled && (React.createElement(TabsContent, { value: "layers", className: "jgis-panel-tab-content jp-gis-layerPanel" },
+            !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 }))),
-            !settings.stacBrowserDisabled && (React.createElement(TabsContent, { value: "stac", className: "jgis-panel-tab-content jgis-panel-tab-content-stac-panel" },
+            !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 }))),
-            !settings.filtersDisabled && (React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
+            !props.settings.filtersDisabled && (React.createElement(TabsContent, { value: "filters", className: "jgis-panel-tab-content" },
                 React.createElement(FilterComponent, { model: props.model }))),
-            !settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "segments", className: "jgis-panel-tab-content" },
+            !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.d.ts

@@ -1,4 +1,4 @@
-import { IAnnotationModel, IJGISFormSchemaRegistry, IJupyterGISModel } from '@jupytergis/schema';
+import { IAnnotationModel, IJGISFormSchemaRegistry, IJupyterGISModel, IJupyterGISSettings } from '@jupytergis/schema';
 import { CommandRegistry } from '@lumino/commands';
 import * as React from 'react';
 interface IRightPanelProps {
@@ -6,6 +6,7 @@ interface IRightPanelProps {
     annotationModel: IAnnotationModel;
     model: IJupyterGISModel;
     commands: CommandRegistry;
+    settings: IJupyterGISSettings;
 }
 export declare const RightPanel: React.FC<IRightPanelProps>;
 export {};

package/lib/panelview/rightpanel.js

@@ -9,7 +9,6 @@ import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/compon
 export const RightPanel = props => {
     var _a;
     const [editorMode, setEditorMode] = React.useState(true);
-    const [settings, setSettings] = React.useState(props.model.jgisSettings);
     const [storyMapPresentationMode, setStoryMapPresentationMode] = React.useState((_a = props.model.getOptions().storyMapPresentationMode) !== null && _a !== void 0 ? _a : false);
     // Only show editor when not in presentation mode and editorMode is true
     const showEditor = !storyMapPresentationMode && editorMode;
@@ -20,19 +19,19 @@ export const RightPanel = props => {
             ? 'Story Editor'
             : 'Story Map';
     const tabInfo = [
-        !settings.objectPropertiesDisabled && !storyMapPresentationMode
+        !props.settings.objectPropertiesDisabled && !storyMapPresentationMode
             ? { name: 'objectProperties', title: 'Object Properties' }
             : false,
-        !settings.storyMapsDisabled
+        !props.settings.storyMapsDisabled
             ? {
                 name: 'storyPanel',
                 title: storyPanelTitle,
             }
             : false,
-        !settings.annotationsDisabled
+        !props.settings.annotationsDisabled
             ? { name: 'annotations', title: 'Annotations' }
             : false,
-        !settings.identifyDisabled
+        !props.settings.identifyDisabled
             ? { name: 'identifyPanel', title: 'Identified Features' }
             : false,
     ].filter(Boolean);
@@ -43,12 +42,10 @@ export const RightPanel = props => {
         return tabInfo.length > 0 ? tabInfo[0].name : '';
     });
     React.useEffect(() => {
-        const onSettingsChanged = () => {
-            setSettings(Object.assign({}, props.model.jgisSettings));
-        };
         const onOptionsChanged = () => {
             const { storyMapPresentationMode } = props.model.getOptions();
             setStoryMapPresentationMode(storyMapPresentationMode !== null && storyMapPresentationMode !== void 0 ? storyMapPresentationMode : false);
+            storyMapPresentationMode && setCurTab('storyPanel');
         };
         let currentlyIdentifiedFeatures = undefined;
         const onAwerenessChanged = (_, clients) => {
@@ -62,19 +59,17 @@ export const RightPanel = props => {
                 setCurTab('identifyPanel');
             }
         };
-        props.model.settingsChanged.connect(onSettingsChanged);
         props.model.sharedOptionsChanged.connect(onOptionsChanged);
         props.model.clientStateChanged.connect(onAwerenessChanged);
         return () => {
-            props.model.settingsChanged.disconnect(onSettingsChanged);
             props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
             props.model.clientStateChanged.disconnect(onAwerenessChanged);
         };
     }, [props.model]);
-    const allRightTabsDisabled = settings.objectPropertiesDisabled &&
-        settings.annotationsDisabled &&
-        settings.identifyDisabled;
-    const rightPanelVisible = !settings.rightPanelDisabled && !allRightTabsDisabled;
+    const allRightTabsDisabled = props.settings.objectPropertiesDisabled &&
+        props.settings.annotationsDisabled &&
+        props.settings.identifyDisabled;
+    const rightPanelVisible = !props.settings.rightPanelDisabled && !allRightTabsDisabled;
     const [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
     const toggleEditor = () => {
         setEditorMode(!editorMode);
@@ -89,13 +84,13 @@ export const RightPanel = props => {
                         setCurTab('');
                     }
                 } }, tab.title)))),
-            !settings.objectPropertiesDisabled && (React.createElement(TabsContent, { value: "objectProperties", className: "jgis-panel-tab-content" },
+            !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 }))),
-            !settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "storyPanel", className: "jgis-panel-tab-content", style: { paddingTop: 0 } },
+            !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 })))),
-            !settings.annotationsDisabled && (React.createElement(TabsContent, { value: "annotations", className: "jgis-panel-tab-content" },
+            !props.settings.annotationsDisabled && (React.createElement(TabsContent, { value: "annotations", className: "jgis-panel-tab-content" },
                 React.createElement(AnnotationsPanel, { annotationModel: props.annotationModel, jgisModel: props.model }))),
-            !settings.identifyDisabled && (React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },
+            !props.settings.identifyDisabled && (React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },
                 React.createElement(IdentifyPanelComponent, { model: props.model }))))));
 };

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

@@ -0,0 +1,7 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+import React from 'react';
+interface IMobileSpectaPanelProps {
+    model: IJupyterGISModel;
+}
+export declare function MobileSpectaPanel({ model }: IMobileSpectaPanelProps): React.JSX.Element;
+export {};