@jupytergis/base 0.14.1 → 0.16.0-alpha.0

package/lib/{panelview → workspace/panels}/rightpanel.js

@@ -1,17 +1,21 @@
 import * as React from 'react';
 import Draggable from 'react-draggable';
-import { AnnotationsPanel } from './annotationPanel';
-import { IdentifyPanelComponent } from './identify-panel/IdentifyPanel';
-import { ObjectPropertiesReact } from './objectproperties';
-import StoryEditorPanel from './story-maps/StoryEditorPanel';
-import StoryViewerPanel from './story-maps/StoryViewerPanel';
-import { PreviewModeSwitch } from './story-maps/components/PreviewModeSwitch';
-import { useStoryMap, } from './story-maps/hooks/useStoryMap';
-import { PanelTabs, TabsContent, TabsList, TabsTrigger, } from '../shared/components/Tabs';
+import { useStorySegmentSync } from "../../features/story/hooks/useStorySegmentSync";
+import { STORY_TYPE } from "../../types";
+import { useRightPanelOptions } from './hooks/useRightPanelOptions';
+import { useUIState } from './hooks/useUIState';
+import { AnnotationsPanel } from '../../features/annotations';
+import { IdentifyPanelComponent } from '../../features/identify/IdentifyPanel';
+import { ObjectPropertiesReact } from '../../features/objectproperties';
+import StoryEditorPanel from '../../features/story/StoryEditorPanel';
+import StoryViewerPanel from '../../features/story/StoryViewerPanel';
+import { PreviewModeSwitch } from '../../features/story/components/PreviewModeSwitch';
+import { useStoryMap, } from '../../features/story/hooks/useStoryMap';
+import { TabsRoot, TabsContent, TabsList, TabsTrigger, } from '../../shared/components/Tabs';
 /** Story viewer + useStoryMap hook
  * only mounted when story tab is active to avoid the hook causing re-renders when tab is hidden.
  **/
-function RightPanelStoryViewer({ model, addLayer, removeLayer, }) {
+export function RightPanelStoryViewer({ model, addLayer, removeLayer, }) {
     const overrideLayerEntriesRef = React.useRef([]);
     const { storyData, currentIndex, setIndex, handlePrev, handleNext, hasPrev, hasNext, activeSlide, layerName, } = useStoryMap({
         model,
@@ -20,30 +24,45 @@ function RightPanelStoryViewer({ model, addLayer, removeLayer, }) {
         addLayer,
         isSpecta: false,
     });
-    return (React.createElement(StoryViewerPanel, { model: model, isSpecta: false, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, handlePrev: handlePrev, handleNext: handleNext, hasPrev: hasPrev, hasNext: hasNext, setIndex: setIndex }));
+    useStorySegmentSync({ model, storyData, setIndex });
+    return (React.createElement(StoryViewerPanel, { isSpecta: false, storyData: storyData, currentIndex: currentIndex, activeSlide: activeSlide, layerName: layerName, segmentNav: { handlePrev, handleNext, hasPrev, hasNext } }));
 }
-export const RightPanel = props => {
+const RightPanelComponent = props => {
     var _a;
-    const [editorMode, setEditorMode] = React.useState(true);
-    const [storyMapPresentationMode, setStoryMapPresentationMode] = React.useState((_a = props.model.getOptions().storyMapPresentationMode) !== null && _a !== void 0 ? _a : false);
+    const { patchGeoJSONFeatureProperties } = props;
+    const isListStory = ((_a = props.model.getSelectedStory().story) === null || _a === void 0 ? void 0 : _a.storyType) ===
+        STORY_TYPE.verticalScroll;
+    const [curTab, setCurTab] = React.useState(() => {
+        var _a;
+        const initialPresentationMode = (_a = props.model.getOptions().storyMapPresentationMode) !== null && _a !== void 0 ? _a : false;
+        if (initialPresentationMode) {
+            return 'storyPanel';
+        }
+        if (!props.settings.objectPropertiesDisabled) {
+            return 'objectProperties';
+        }
+        if (!props.settings.storyMapsDisabled) {
+            return 'storyPanel';
+        }
+        if (!props.settings.annotationsDisabled) {
+            return 'annotations';
+        }
+        if (!props.settings.identifyDisabled) {
+            return 'identifyPanel';
+        }
+        return '';
+    });
+    const { storyMapPresentationMode, editorMode, showEditor, storyPanelTitle, toggleEditor, } = useRightPanelOptions(props.model, {
+        onPresentationModeEnabled: () => setCurTab('storyPanel'),
+        onIdentifyFeatures: () => setCurTab('identifyPanel'),
+    });
     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
-    const storyPanelTitle = storyMapPresentationMode
-        ? 'Story Map'
-        : editorMode
-            ? 'Story Editor'
-            : 'Story Map';
     const tabInfo = [
         !props.settings.objectPropertiesDisabled && !storyMapPresentationMode
             ? { name: 'objectProperties', title: 'Object Properties' }
             : false,
         !props.settings.storyMapsDisabled
-            ? {
-                name: 'storyPanel',
-                title: storyPanelTitle,
-            }
+            ? { name: 'storyPanel', title: storyPanelTitle }
             : false,
         !props.settings.annotationsDisabled
             ? { name: 'annotations', title: 'Annotations' }
@@ -52,47 +71,16 @@ export const RightPanel = props => {
             ? { name: 'identifyPanel', title: 'Identified Features' }
             : false,
     ].filter(Boolean);
-    const [curTab, setCurTab] = React.useState(() => {
-        if (storyMapPresentationMode) {
-            return 'storyPanel';
-        }
-        return tabInfo.length > 0 ? tabInfo[0].name : '';
-    });
-    React.useEffect(() => {
-        const onOptionsChanged = () => {
-            const { storyMapPresentationMode } = props.model.getOptions();
-            setStoryMapPresentationMode(storyMapPresentationMode !== null && storyMapPresentationMode !== void 0 ? storyMapPresentationMode : false);
-            storyMapPresentationMode && setCurTab('storyPanel');
-        };
-        let currentlyIdentifiedFeatures = undefined;
-        const onAwerenessChanged = (_, clients) => {
-            var _a;
-            const clientId = props.model.getClientId();
-            const localState = clientId ? clients.get(clientId) : null;
-            if (localState &&
-                ((_a = localState.identifiedFeatures) === null || _a === void 0 ? void 0 : _a.value) &&
-                localState.identifiedFeatures.value !== currentlyIdentifiedFeatures) {
-                currentlyIdentifiedFeatures = localState.identifiedFeatures.value;
-                setCurTab('identifyPanel');
-            }
-        };
-        props.model.sharedOptionsChanged.connect(onOptionsChanged);
-        props.model.clientStateChanged.connect(onAwerenessChanged);
-        return () => {
-            props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
-            props.model.clientStateChanged.disconnect(onAwerenessChanged);
-        };
-    }, [props.model]);
     const allRightTabsDisabled = props.settings.objectPropertiesDisabled &&
         props.settings.annotationsDisabled &&
         props.settings.identifyDisabled;
-    const rightPanelVisible = !props.settings.rightPanelDisabled && !allRightTabsDisabled;
-    const toggleEditor = () => {
-        setEditorMode(!editorMode);
-    };
+    const [rightPanelOpen] = useUIState('rightPanelOpen', props.model);
+    const rightPanelVisible = !props.settings.rightPanelDisabled &&
+        !allRightTabsDisabled &&
+        rightPanelOpen !== false;
     return (React.createElement(Draggable, { handle: ".jgis-tabs-list", cancel: ".jgis-tabs-trigger", bounds: ".jGIS-Mainview-Container" },
         React.createElement("div", { className: "jgis-right-panel-container", style: { display: rightPanelVisible ? 'block' : 'none' } },
-            React.createElement(PanelTabs, { className: "jgis-panel-tabs", curTab: curTab },
+            React.createElement(TabsRoot, { className: "jgis-panel-tabs", curTab: curTab },
                 React.createElement(TabsList, null, tabInfo.map(tab => (React.createElement(TabsTrigger, { className: "jGIS-layer-browser-category", key: `${tab.name}-${tab.title}`, value: tab.name, onClick: () => {
                         if (curTab !== tab.name) {
                             setCurTab(tab.name);
@@ -104,10 +92,12 @@ export const RightPanel = props => {
                 !props.settings.objectPropertiesDisabled && (React.createElement(TabsContent, { value: "objectProperties", className: "jgis-panel-tab-content" },
                     React.createElement(ObjectPropertiesReact, { setSelectedObject: setSelectedObjectProperties, selectedObject: selectedObjectProperties, formSchemaRegistry: props.formSchemaRegistry, model: props.model }))),
                 !props.settings.storyMapsDisabled && (React.createElement(TabsContent, { value: "storyPanel", className: "jgis-panel-tab-content", style: { paddingTop: 0 } },
-                    !storyMapPresentationMode && (React.createElement(PreviewModeSwitch, { checked: !editorMode, onCheckedChange: toggleEditor })),
+                    !storyMapPresentationMode && !isListStory && (React.createElement(PreviewModeSwitch, { checked: !editorMode, onCheckedChange: toggleEditor })),
                     showEditor ? (React.createElement(StoryEditorPanel, { model: props.model, commands: props.commands })) : curTab === 'storyPanel' ? (React.createElement(RightPanelStoryViewer, { model: props.model, addLayer: props.addLayer, removeLayer: props.removeLayer })) : null)),
                 !props.settings.annotationsDisabled && (React.createElement(TabsContent, { value: "annotations", className: "jgis-panel-tab-content" },
                     React.createElement(AnnotationsPanel, { annotationModel: props.annotationModel, jgisModel: props.model }))),
                 !props.settings.identifyDisabled && (React.createElement(TabsContent, { value: "identifyPanel", className: "jgis-panel-tab-content" },
-                    React.createElement(IdentifyPanelComponent, { model: props.model })))))));
+                    React.createElement(IdentifyPanelComponent, { model: props.model, patchGeoJSONFeatureProperties: patchGeoJSONFeatureProperties })))))));
 };
+RightPanelComponent.displayName = 'RightPanel';
+export const RightPanel = React.memo(RightPanelComponent);

package/lib/{statusbar → workspace/statusbar}/StatusBar.js

@@ -2,12 +2,12 @@ import { faGlobe, faLocationDot, faRuler, } from '@fortawesome/free-solid-svg-ic
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Progress } from '@jupyter/react-components';
 import React, { useEffect, useState } from 'react';
-import { version } from "../../package.json";
+import { version } from "../../../package.json";
 const StatusBar = ({ jgisModel, loading, projection, scale, }) => {
     var _a;
     const [coords, setCoords] = useState({ x: 0, y: 0 });
     useEffect(() => {
-        const handleClientStateChanged = () => {
+        const handlePointerChanged = () => {
             var _a, _b;
             const pointer = (_b = (_a = jgisModel === null || jgisModel === void 0 ? void 0 : jgisModel.localState) === null || _a === void 0 ? void 0 : _a.pointer) === null || _b === void 0 ? void 0 : _b.value;
             if (!pointer) {
@@ -15,9 +15,10 @@ const StatusBar = ({ jgisModel, loading, projection, scale, }) => {
             }
             setCoords({ x: pointer === null || pointer === void 0 ? void 0 : pointer.coordinates.x, y: pointer === null || pointer === void 0 ? void 0 : pointer.coordinates.y });
         };
-        jgisModel.clientStateChanged.connect(handleClientStateChanged);
+        jgisModel.pointerChanged.connect(handlePointerChanged);
+        handlePointerChanged();
         return () => {
-            jgisModel.clientStateChanged.disconnect(handleClientStateChanged);
+            jgisModel.pointerChanged.disconnect(handlePointerChanged);
         };
     }, [jgisModel]);
     return (React.createElement("div", { className: "jgis-status-bar" },

package/lib/{toolbar → workspace/toolbar}/widget.d.ts

@@ -14,6 +14,7 @@ export declare class ToolbarWidget extends ReactiveToolbar {
     private _model;
     private _newSubMenu;
     private _hasSetSpectaVisibility;
+    private _togglePanelButton;
     constructor(options: ToolbarWidget.IOptions);
     /**
      * Updates the story segment menu item based on settings
@@ -22,6 +23,7 @@ export declare class ToolbarWidget extends ReactiveToolbar {
     /**
      * Handles settings changes
      */
+    private _updateTogglePanelVisibility;
     private _onSettingsChanged;
     /**
      * Handles story changes to update Specta mode visibility

package/lib/{toolbar → workspace/toolbar}/widget.js

@@ -3,8 +3,8 @@ import { CommandToolbarButton } from '@jupyterlab/apputils';
 import { MenuSvg, ReactWidget, ReactiveToolbar, ToolbarButton, addIcon, } from '@jupyterlab/ui-components';
 import { Widget } from '@lumino/widgets';
 import * as React from 'react';
-import { CommandIDs } from "../constants";
-import { terminalToolbarIcon } from "../icons";
+import { CommandIDs } from "../../constants";
+import { terminalToolbarIcon } from "../../shared/icons";
 import { rasterSubMenu, vectorSubMenu } from "../menus";
 export const TOOLBAR_SEPARATOR_CLASS = 'jGIS-Toolbar-Separator';
 export const TOOLBAR_GROUPNAME_CLASS = 'jGIS-Toolbar-GroupName';
@@ -41,13 +41,14 @@ export class ToolbarWidget extends ReactiveToolbar {
         super();
         this._newSubMenu = null;
         this._hasSetSpectaVisibility = false;
-        /**
-         * Handles settings changes
-         */
+        this._togglePanelButton = null;
         this._onSettingsChanged = (sender, key) => {
             if (key === 'storyMapsDisabled') {
                 this._updateStorySegmentMenuItem();
             }
+            if (key === 'leftPanelDisabled' || key === 'rightPanelDisabled') {
+                this._updateTogglePanelVisibility();
+            }
         };
         /**
          * Handles story changes to update Specta mode visibility
@@ -128,6 +129,14 @@ export class ToolbarWidget extends ReactiveToolbar {
             });
             this.addItem('addMarker', addMarkerButton);
             addMarkerButton.node.dataset.testid = 'add-marker-controller-button';
+            const toggleDrawFeaturesButton = new CommandToolbarButton({
+                id: CommandIDs.toggleDrawFeatures,
+                label: '',
+                commands: options.commands,
+            });
+            this.addItem('toggleDrawFeatures', toggleDrawFeaturesButton);
+            toggleDrawFeaturesButton.node.dataset.testid =
+                'toggle-draw-features-button';
             const storyModePresentationToggleButton = new CommandToolbarButton({
                 id: CommandIDs.toggleStoryPresentationMode,
                 label: '',
@@ -135,6 +144,14 @@ export class ToolbarWidget extends ReactiveToolbar {
             });
             this.addItem('toggleStoryPresentationMode', storyModePresentationToggleButton);
             identifyButton.node.dataset.testid = 'toggleStoryPresentationMode-button';
+            this._togglePanelButton = new CommandToolbarButton({
+                id: CommandIDs.togglePanel,
+                label: '',
+                commands: options.commands,
+            });
+            this.addItem('togglePanel', this._togglePanelButton);
+            this._togglePanelButton.node.dataset.testid = 'toggle-panel-button';
+            options.model.settingsReady.then(() => this._updateTogglePanelVisibility());
             this.addItem('separator2', new Separator());
             const toggleConsoleButton = new CommandToolbarButton({
                 id: CommandIDs.toggleConsole,
@@ -182,6 +199,17 @@ export class ToolbarWidget extends ReactiveToolbar {
             }
         }
     }
+    /**
+     * Handles settings changes
+     */
+    _updateTogglePanelVisibility() {
+        if (!this._togglePanelButton) {
+            return;
+        }
+        const { leftPanelDisabled, rightPanelDisabled } = this._model.jgisSettings;
+        this._togglePanelButton.node.style.display =
+            leftPanelDisabled && rightPanelDisabled ? 'none' : '';
+    }
     dispose() {
         if (this._model) {
             this._model.settingsChanged.disconnect(this._onSettingsChanged, this);

package/lib/{widget.d.ts → workspace/widget.d.ts}

@@ -2,15 +2,16 @@ import { IAnnotationModel, IJGISFormSchemaRegistry, IJupyterGISDocumentWidget, I
 import { MainAreaWidget } from '@jupyterlab/apputils';
 import { ConsolePanel, IConsoleTracker } from '@jupyterlab/console';
 import { DocumentWidget } from '@jupyterlab/docregistry';
+import type { ILoggerRegistry } from '@jupyterlab/logconsole';
 import { IObservableMap, ObservableMap } from '@jupyterlab/observables';
 import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 import { JSONValue } from '@lumino/coreutils';
 import { ISignal } from '@lumino/signaling';
 import { SplitPanel } from '@lumino/widgets';
-import { ConsoleView } from './console';
-import { JupyterGISMainViewPanel } from './mainview';
-import { MainViewModel } from './mainview/mainviewmodel';
+import { ConsoleView } from '../features/console';
+import { JupyterGISMainViewPanel } from '../mainview';
+import { MainViewModel } from '../mainview/mainviewmodel';
 export type JupyterGISWidget = JupyterGISDocumentWidget | JupyterGISOutputWidget;
 export declare class JupyterGISDocumentWidget extends DocumentWidget<JupyterGISPanel, IJupyterGISModel> implements IJupyterGISDocumentWidget {
     constructor(options: DocumentWidget.IOptions<JupyterGISPanel, IJupyterGISModel>);
@@ -40,12 +41,12 @@ export declare namespace JupyterGISOutputWidget {
     }
 }
 export declare class JupyterGISPanel extends SplitPanel {
-    constructor({ model, consoleTracker, state, commandRegistry, formSchemaRegistry, annotationModel, ...consoleOption }: JupyterGISPanel.IOptions);
+    constructor({ model, consoleTracker, state, commandRegistry, formSchemaRegistry, annotationModel, loggerRegistry, ...consoleOption }: JupyterGISPanel.IOptions);
     _initModel(options: {
         model: IJupyterGISModel;
         commandRegistry: CommandRegistry;
     }): void;
-    _initView(formSchemaRegistry?: IJGISFormSchemaRegistry, annotationModel?: IAnnotationModel): void;
+    _initView(formSchemaRegistry?: IJGISFormSchemaRegistry, annotationModel?: IAnnotationModel, loggerRegistry?: ILoggerRegistry): void;
     get jupyterGISMainViewPanel(): JupyterGISMainViewPanel;
     get viewChanged(): ISignal<ObservableMap<JSONValue>, IObservableMap.IChangedArgs<JSONValue>>;
     /**
@@ -75,5 +76,6 @@ export declare namespace JupyterGISPanel {
         consoleTracker?: IConsoleTracker;
         formSchemaRegistry?: IJGISFormSchemaRegistry;
         annotationModel?: IAnnotationModel;
+        loggerRegistry?: ILoggerRegistry;
     }
 }

package/lib/{widget.js → workspace/widget.js}

@@ -15,9 +15,9 @@ import { ObservableMap } from '@jupyterlab/observables';
 import { MessageLoop } from '@lumino/messaging';
 import { Signal } from '@lumino/signaling';
 import { SplitPanel, Widget } from '@lumino/widgets';
-import { ConsoleView } from './console';
-import { JupyterGISMainViewPanel } from './mainview';
-import { MainViewModel } from './mainview/mainviewmodel';
+import { ConsoleView } from '../features/console';
+import { JupyterGISMainViewPanel } from '../mainview';
+import { MainViewModel } from '../mainview/mainviewmodel';
 const CELL_OUTPUT_WIDGET_CLASS = 'jgis-cell-output-widget';
 export class JupyterGISDocumentWidget extends DocumentWidget {
     constructor(options) {
@@ -66,16 +66,22 @@ export class JupyterGISOutputWidget extends MainAreaWidget {
 }
 export class JupyterGISPanel extends SplitPanel {
     constructor(_a) {
-        var { model, consoleTracker, state, commandRegistry, formSchemaRegistry, annotationModel } = _a, consoleOption = __rest(_a, ["model", "consoleTracker", "state", "commandRegistry", "formSchemaRegistry", "annotationModel"]);
+        var { model, consoleTracker, state, commandRegistry, formSchemaRegistry, annotationModel, loggerRegistry } = _a, consoleOption = __rest(_a, ["model", "consoleTracker", "state", "commandRegistry", "formSchemaRegistry", "annotationModel", "loggerRegistry"]);
         super({ orientation: 'vertical', spacing: 0 });
         this._consoleOpened = false;
         this._state = state;
         this._consoleOption = Object.assign({ commandRegistry }, consoleOption);
         this._consoleTracker = consoleTracker;
         const readyPromise = model.sharedModel.initialSyncReady;
-        readyPromise.then(() => {
+        readyPromise.then(async () => {
             this._initModel({ model, commandRegistry });
-            this._initView(formSchemaRegistry, annotationModel);
+            if (this._state) {
+                const stored = await this._state.fetch(`jupytergis:localUIState:${model.filePath}`);
+                if (stored !== undefined) {
+                    model.setUIState(stored);
+                }
+            }
+            this._initView(formSchemaRegistry, annotationModel, loggerRegistry);
         });
     }
     _initModel(options) {
@@ -86,12 +92,15 @@ export class JupyterGISPanel extends SplitPanel {
             commands: options.commandRegistry,
         });
     }
-    _initView(formSchemaRegistry, annotationModel) {
+    _initView(formSchemaRegistry, annotationModel, loggerRegistry) {
+        var _a;
         this._jupyterGISMainViewPanel = new JupyterGISMainViewPanel({
             mainViewModel: this._mainViewModel,
             state: this._state,
             formSchemaRegistry: formSchemaRegistry,
             annotationModel: annotationModel,
+            loggerRegistry: loggerRegistry,
+            rendermime: (_a = this._consoleOption.rendermime) !== null && _a !== void 0 ? _a : null,
         });
         this.addWidget(this._jupyterGISMainViewPanel);
         SplitPanel.setStretch(this._jupyterGISMainViewPanel, 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupytergis/base",
-  "version": "0.14.1",
+  "version": "0.16.0-alpha.0",
   "description": "A JupyterLab extension for 3D modelling.",
   "keywords": [
     "jupyter",
@@ -27,8 +27,9 @@
     "url": "https://github.com/geojupyter/jupytergis.git"
   },
   "scripts": {
-    "build": "tspc -b && jlpm run cp:gdal",
-    "build:gallery": "python rasterlayer_gallery_generator.py",
+    "test": "jest",
+    "build": "jlpm build:gallery && tspc -b && jlpm run cp:gdal",
+    "build:gallery": "uv run --directory ../../scripts/layer_gallery python layer_gallery",
     "cp:gdal": "cp ../../node_modules/gdal3.js/dist/package/gdal3WebAssembly.data lib && cp ../../node_modules/gdal3.js/dist/package/gdal3WebAssembly.wasm lib",
     "build:prod": "jlpm run clean && jlpm run build",
     "build:dev": "tspc -b && jlpm run cp:gdal",
@@ -37,6 +38,7 @@
     "clean:all": "jlpm run clean:lib",
     "watch": "tspc -w"
   },
+  "packageManager": "yarn@3.5.0",
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
@@ -44,7 +46,7 @@
     "@jupyter/collaboration": "^4",
     "@jupyter/react-components": "^0.16.6",
     "@jupyter/ydoc": "^2.0.0 || ^3.0.0",
-    "@jupytergis/schema": "^0.14.1",
+    "@jupytergis/schema": "^0.16.0-alpha.0",
     "@jupyterlab/application": "^4.3.0",
     "@jupyterlab/apputils": "^4.3.0",
     "@jupyterlab/completer": "^4.3.0",
@@ -53,7 +55,9 @@
     "@jupyterlab/docregistry": "^4.3.0",
     "@jupyterlab/filebrowser": "^4.3.0",
     "@jupyterlab/launcher": "^4.3.0",
+    "@jupyterlab/logconsole": "^4.3.0",
     "@jupyterlab/observables": "^5.3.0",
+    "@jupyterlab/rendermime": "^4.3.0",
     "@jupyterlab/services": "^7.3.0",
     "@jupyterlab/translation": "^4.3.0",
     "@jupyterlab/ui-components": "^4.3.1",
@@ -64,6 +68,14 @@
     "@lumino/widgets": "^2.0.0",
     "@mapbox/vector-tile": "^2.0.3",
     "@naisutech/react-tree": "^3.0.1",
+    "@ngageoint/geopackage": "^4.2.6",
+    "@openeo/js-client": "^2.12.0",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toggle-group": "^1.1.10",
     "@rjsf/core": "^4.2.0",
     "@rjsf/validator-ajv8": "^5.23.1",
     "ajv": "^8.14.0",
@@ -71,6 +83,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "colormap": "^2.3.2",
+    "d3-scale-chromatic": "^3.0.0",
     "date-fns": "^4.1.0",
     "gdal3.js": "^2.8.1",
     "geojson-vt": "^4.0.2",
@@ -79,6 +92,7 @@
     "hyparquet-compressors": "^1.1.1",
     "lucide-react": "^0.513.0",
     "ol": "^10.1.0",
+    "ol-load-geopackage": "^1.0.3",
     "ol-pmtiles": "^0.5.0",
     "ol-stac": "^1.0.0-rc.10",
     "pbf": "^4.0.1",
@@ -87,6 +101,7 @@
     "proj4-list": "1.0.4",
     "radix-ui": "^1.4.3",
     "react": "^18.0.1",
+    "react-colorful": "^5.6.1",
     "react-day-picker": "^9.7.0",
     "react-markdown": "^10.1.0",
     "shpjs": "^6.1.0",

package/style/base.css

@@ -15,6 +15,8 @@
 @import url('./tabPanel.css');
 @import url('./stacBrowser.css');
 @import url('./storyPanel.css');
+@import url('./storySpectaArticleOverlay.css');
+@import url('./identify.css');
 @import url('./shared/button.css');
 @import url('./shared/toggle.css');
 @import url('./shared/tabs.css');
@@ -32,6 +34,7 @@
 @import url('./shared/command.css');
 @import url('./shared/combobox.css');
 @import url('./shared/input.css');
+@import url('./shared/nativeSelect.css');
 
 .errors {
   color: var(--jp-warn-color0);
@@ -130,10 +133,92 @@ button.jp-mod-styled.jp-mod-reject {
   left: 0;
 }
 
+/* Mobile bottom sheet — merged panel only */
+@media (max-width: 768px) {
+  .jgis-merged-panel-container {
+    position: fixed;
+    bottom: var(--jp-statusbar-height, 0px);
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    border-radius: 8px 8px 0 0;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
+    display: flex;
+    flex-direction: column;
+    height: 30vh;
+  }
+
+  /* Drag-to-resize handle */
+  .jgis-resize-handle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 24px;
+    flex-shrink: 0;
+    cursor: ns-resize;
+  }
+
+  .jgis-resize-handle::before {
+    content: '';
+    width: 36px;
+    height: 4px;
+    border-radius: 2px;
+    background-color: var(--jp-border-color1);
+    opacity: 0.5;
+  }
+
+  /* Panel tabs fill the remaining height */
+  .jgis-merged-panel-container .jgis-panel-tabs {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .jgis-merged-panel-container .jgis-tabs-content[data-state='active'] {
+    flex: 1;
+    min-height: 0;
+    height: unset;
+    overflow-y: auto;
+  }
+
+  /* Tab list: natural-width tabs, horizontal scroll, thin scrollbar */
+  .jgis-merged-panel-container .jgis-tabs-list {
+    cursor: ns-resize;
+    justify-content: flex-start;
+    touch-action: pan-x;
+    scrollbar-width: thin;
+    scrollbar-color: var(--jp-border-color1) transparent;
+  }
+
+  .jgis-merged-panel-container .jgis-tabs-list:active {
+    cursor: ns-resize;
+  }
+
+  .jgis-merged-panel-container .jgis-tabs-list::-webkit-scrollbar {
+    height: 3px;
+  }
+
+  .jgis-merged-panel-container .jgis-tabs-list::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .jgis-merged-panel-container .jgis-tabs-list::-webkit-scrollbar-thumb {
+    background-color: var(--jp-border-color1);
+    border-radius: 2px;
+  }
+}
+
 .jgis-icon-adjust {
   padding-top: 5px;
 }
 
+.jgis-inline-icon {
+  width: 1em;
+  height: 1em;
+}
+
 .jgis-controls-toolbar {
   width: 100%;
   display: flex;
@@ -162,6 +247,21 @@ button.jp-mod-styled.jp-mod-reject {
   right: 0.125rem;
 }
 
+.jgis-geometry-type-selector-overlay {
+  position: absolute;
+  bottom: 20px;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: white;
+  border-radius: 4px;
+  font-size: 12px;
+  gap: 8px;
+  z-index: 9999;
+}
+
 @media (max-width: 768px) {
   .jgis-panels-wrapper {
     position: fixed;
@@ -204,6 +304,14 @@ body[data-notebook='specta'] #main.jp-ThemedContainer {
   transition: rotate 150ms ease;
 }
 
-[data-state='open'] > .jgis-rotate-90 {
+[data-state='open'] .jgis-rotate-90 {
   rotate: 90deg;
 }
+
+[data-icon='inline-start'] {
+  padding-right: 0.375rem;
+}
+
+[data-icon='inline-end'] {
+  padding-left: 0.375rem;
+}