@jupytergis/base 0.12.1 → 0.13.0

package/lib/formbuilder/objectform/components/OpacitySlider.js

@@ -0,0 +1,40 @@
+import { Slider } from '@jupyter/react-components';
+import React from 'react';
+function OpacitySlider({ formData, onChange }) {
+    var _a;
+    const [inputValue, setInputValue] = React.useState((_a = formData === null || formData === void 0 ? void 0 : formData.toFixed(1)) !== null && _a !== void 0 ? _a : '1');
+    React.useEffect(() => {
+        var _a;
+        const newValue = (_a = formData === null || formData === void 0 ? void 0 : formData.toFixed(1)) !== null && _a !== void 0 ? _a : '1';
+        if (newValue !== inputValue) {
+            setInputValue(newValue);
+        }
+    }, [formData]);
+    const handleSliderChange = (event) => {
+        const target = event.target;
+        if (target && '_value' in target) {
+            const sliderValue = parseFloat(target._value); // Slider value is in 0–10 range
+            const normalizedValue = sliderValue / 10; // Normalize to 0.1–1 range
+            onChange(normalizedValue);
+        }
+    };
+    const handleInputChange = (event) => {
+        const value = event.target.value;
+        setInputValue(value);
+        const parsedValue = parseFloat(value);
+        if (!isNaN(parsedValue) && parsedValue >= 0.1 && parsedValue <= 1) {
+            onChange(parsedValue);
+        }
+    };
+    return (React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' } },
+        React.createElement(Slider, { min: 1, max: 10, step: 1, value: formData ? formData * 10 : 10, onChange: handleSliderChange }),
+        React.createElement("input", { type: "number", value: inputValue, step: 0.1, min: 0.1, onChange: handleInputChange, style: {
+                width: '50px',
+                textAlign: 'center',
+                border: '1px solid #ccc',
+                borderRadius: '4px',
+                padding: '4px',
+                marginBottom: '5px',
+            } })));
+}
+export default OpacitySlider;

package/lib/formbuilder/objectform/components/SegmentFormSymbology.d.ts

@@ -0,0 +1,3 @@
+import { ArrayFieldTemplateProps } from '@rjsf/core';
+import React from 'react';
+export declare function ArrayFieldTemplate(props: ArrayFieldTemplateProps): React.JSX.Element;

package/lib/formbuilder/objectform/components/SegmentFormSymbology.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { SymbologyWidget } from "../../../dialogs/symbology/symbologyDialog";
+import { Button } from "../../../shared/components/Button";
+import { GlobalStateDbManager } from "../../../store";
+import { SYMBOLOGY_VALID_LAYER_TYPES } from "../../../types";
+const SELECTION_SETTLE_MS = 100;
+function LayerOverrideItem({ item, formContext }) {
+    var _a, _b;
+    const model = formContext === null || formContext === void 0 ? void 0 : formContext.model;
+    if (!model) {
+        return null;
+    }
+    const state = GlobalStateDbManager.getInstance().getStateDb();
+    const currentItem = (_b = (_a = formContext === null || formContext === void 0 ? void 0 : formContext.formData) === null || _a === void 0 ? void 0 : _a.layerOverride) === null || _b === void 0 ? void 0 : _b[item.index];
+    const targetLayerId = currentItem === null || currentItem === void 0 ? void 0 : currentItem.targetLayer;
+    const selectedLayer = targetLayerId
+        ? model.getLayer(targetLayerId)
+        : undefined;
+    const canOpenSymbology = Boolean(targetLayerId &&
+        selectedLayer &&
+        SYMBOLOGY_VALID_LAYER_TYPES.includes(selectedLayer.type));
+    const handleOpenSymbology = async () => {
+        if (!targetLayerId || !state || !selectedLayer) {
+            return;
+        }
+        const previousSelection = model.selected;
+        const segmentId = Object.keys(previousSelection !== null && previousSelection !== void 0 ? previousSelection : {}).find(key => { var _a; return ((_a = model.getLayer(key)) === null || _a === void 0 ? void 0 : _a.type) === 'StorySegmentLayer'; });
+        // Temporarily set the selected layer to the target layer
+        model.syncSelected({ [targetLayerId]: { type: 'layer' } });
+        await new Promise(resolve => setTimeout(resolve, SELECTION_SETTLE_MS));
+        const dialog = new SymbologyWidget({
+            model,
+            state,
+            isStorySegmentOverride: true,
+            segmentId,
+        });
+        await dialog.launch();
+        model.syncSelected(previousSelection !== null && previousSelection !== void 0 ? previousSelection : {});
+    };
+    return (React.createElement("div", { className: "jGIS-symbology-override-item" },
+        React.createElement("div", { style: { flex: 1 } }, item.children),
+        React.createElement("div", { style: { display: 'flex', gap: '1rem' } },
+            React.createElement(Button, { title: "Edit symbology override for the target layer", onClick: handleOpenSymbology, style: { width: '100%' }, disabled: !canOpenSymbology },
+                React.createElement("span", { className: "fa fa-brush", style: { marginRight: '4px' } }),
+                "Edit Symbology"),
+            item.hasRemove && (React.createElement(Button, { variant: "destructive", onClick: item.onDropIndexClick(item.index), title: "Remove item" }, "Remove")))));
+}
+export function ArrayFieldTemplate(props) {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", null, props.title),
+        React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '1rem',
+                alignItems: 'center',
+            } },
+            props.items.map(item => (React.createElement(LayerOverrideItem, { key: item.key, item: item, formContext: props.formContext }))),
+            props.canAdd && (React.createElement(Button, { onClick: props.onAddClick }, "Add Symbology Override")))));
+}

package/lib/formbuilder/objectform/layer/storySegmentLayerForm.d.ts

@@ -1,5 +1,5 @@
-import { IDict } from '@jupytergis/schema';
+import { IDict, IStorySegmentLayer } from '@jupytergis/schema';
 import { LayerPropertiesForm } from './layerform';
 export declare class StorySegmentLayerPropertiesForm extends LayerPropertiesForm {
-    protected processSchema(data: IDict<any> | undefined, schema: IDict, uiSchema: IDict): void;
+    protected processSchema(data: IStorySegmentLayer | undefined, schema: IDict, uiSchema: IDict): void;
 }

package/lib/formbuilder/objectform/layer/storySegmentLayerForm.js

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { LayerPropertiesForm } from './layerform';
+import { ArrayFieldTemplate } from '../components/SegmentFormSymbology';
 import StorySegmentReset from '../components/StorySegmentReset';
 export class StorySegmentLayerPropertiesForm extends LayerPropertiesForm {
     processSchema(data, schema, uiSchema) {
+        var _a, _b, _c;
         super.processSchema(data, schema, uiSchema);
         if (!this.props.model.selected) {
             return;
@@ -27,6 +29,23 @@ export class StorySegmentLayerPropertiesForm extends LayerPropertiesForm {
                     rows: 10,
                 },
             } });
+        uiSchema['layerOverride'] = Object.assign(Object.assign({}, uiSchema['layerOverride']), { items: {
+                'ui:title': '',
+                targetLayer: {
+                    'ui:field': 'layerSelect',
+                },
+                opacity: {
+                    'ui:field': 'opacity',
+                },
+            }, 'ui:options': {
+                orderable: false,
+            }, 'ui:ArrayFieldTemplate': ArrayFieldTemplate });
+        // Remove properties that should not be displayed in the form
+        const layerOverrideItems = (_c = (_b = (_a = schema.properties) === null || _a === void 0 ? void 0 : _a.layerOverride) === null || _b === void 0 ? void 0 : _b.items) === null || _c === void 0 ? void 0 : _c.properties;
+        if (layerOverrideItems) {
+            delete layerOverrideItems.color;
+            delete layerOverrideItems.symbologyState;
+        }
         this.removeFormEntry('zoom', data, schema, uiSchema);
     }
 }

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) {
@@ -529,7 +531,7 @@ export class MainView extends React.Component {
             }
             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;
+            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 = [];
@@ -1203,6 +1209,7 @@ export class MainView extends React.Component {
                 layerParameters = layer.parameters;
                 newMapLayer = new VectorTileLayer({
                     opacity: layerParameters.opacity,
+                    visible: layer.visible,
                     source: this._sources[layerParameters.source],
                     style: this.vectorLayerStyleRuleBuilder(layer),
                 });
@@ -1212,6 +1219,7 @@ export class MainView extends React.Component {
                 layerParameters = layer.parameters;
                 newMapLayer = new WebGlTileLayer({
                     opacity: 0.3,
+                    visible: layer.visible,
                     source: this._sources[layerParameters.source],
                     style: {
                         color: ['color', this.hillshadeMath()],
@@ -1223,6 +1231,7 @@ export class MainView extends React.Component {
                 layerParameters = layer.parameters;
                 newMapLayer = new ImageLayer({
                     opacity: layerParameters.opacity,
+                    visible: layer.visible,
                     source: this._sources[layerParameters.source],
                 });
                 break;
@@ -1232,6 +1241,7 @@ export class MainView extends React.Component {
                 // This is to handle python sending a None for the color
                 const layerOptions = {
                     opacity: layerParameters.opacity,
+                    visible: layer.visible,
                     source: this._sources[layerParameters.source],
                 };
                 if (layerParameters.color) {
@@ -1246,6 +1256,7 @@ export class MainView extends React.Component {
                 layerParameters = layer.parameters;
                 newMapLayer = new HeatmapLayer({
                     opacity: layerParameters.opacity,
+                    visible: layer.visible,
                     source: this._sources[layerParameters.source],
                     blur: (_b = layerParameters.blur) !== null && _b !== void 0 ? _b : 15,
                     radius: (_c = layerParameters.radius) !== null && _c !== void 0 ? _c : 8,
@@ -1564,8 +1575,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 +1814,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 +2091,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, 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 }))))),
+                                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

@@ -6,32 +6,42 @@ import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/compon
 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 = [
-        !settings.layersDisabled ? { name: 'layers', title: 'Layers' } : false,
-        !settings.stacBrowserDisabled && !storyMapPresentationMode
+        !props.settings.layersDisabled
+            ? { name: 'layers', title: 'Layers' }
+            : false,
+        !props.settings.stacBrowserDisabled && !storyMapPresentationMode
             ? { name: 'stac', title: 'Stac Browser' }
             : false,
-        !settings.filtersDisabled && !storyMapPresentationMode
+        !props.settings.filtersDisabled && !storyMapPresentationMode
             ? { name: 'filters', title: 'Filters' }
             : false,
-        !settings.storyMapsDisabled
+        !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);
         };
@@ -39,14 +49,12 @@ export const LeftPanel = (props) => {
             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);
@@ -110,11 +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 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: () => {
@@ -125,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, IJGISLayer, IJupyterGISModel, IJupyterGISSettings } from '@jupytergis/schema';
 import { CommandRegistry } from '@lumino/commands';
 import * as React from 'react';
 interface IRightPanelProps {
@@ -6,6 +6,9 @@ interface IRightPanelProps {
     annotationModel: IAnnotationModel;
     model: IJupyterGISModel;
     commands: CommandRegistry;
+    settings: IJupyterGISSettings;
+    addLayer?: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
+    removeLayer?: (id: string) => void;
 }
 export declare const RightPanel: React.FC<IRightPanelProps>;
 export {};

package/lib/panelview/rightpanel.js

@@ -9,8 +9,8 @@ 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);
+    const [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
     // Only show editor when not in presentation mode and editorMode is true
     const showEditor = !storyMapPresentationMode && editorMode;
     // Tab title: "Story Map" in presentation mode, otherwise based on editorMode
@@ -20,19 +20,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,9 +43,6 @@ 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);
@@ -63,20 +60,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 [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
+    const allRightTabsDisabled = props.settings.objectPropertiesDisabled &&
+        props.settings.annotationsDisabled &&
+        props.settings.identifyDisabled;
+    const rightPanelVisible = !props.settings.rightPanelDisabled && !allRightTabsDisabled;
     const toggleEditor = () => {
         setEditorMode(!editorMode);
     };
@@ -90,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" },
+                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 }))),
-            !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 {};