@jupytergis/base 0.15.0 → 0.16.0-alpha.0

package/lib/workspace/panels/hooks/useLayerTree.d.ts

@@ -0,0 +1,19 @@
+import { IJGISLayerTree, IJupyterGISModel } from '@jupytergis/schema';
+import { CommandRegistry } from '@lumino/commands';
+/**
+ * Subscribes to the model's layer tree and splits it into two derived trees:
+ * - `layerTree`: regular map layers (excludes StorySegmentLayers)
+ * - `segmentTree`: story segment layers only
+ *
+ * Also pre-selects the last item on first load, and syncs segment order back
+ * to the story map whenever the segment tree changes.
+ */
+export declare function useLayerTree(model: IJupyterGISModel, commands: CommandRegistry, opts?: {
+    onSegmentAdded?: (payload: {
+        storySegmentId: string;
+        storyId: string;
+    }) => void;
+}): {
+    layerTree: IJGISLayerTree;
+    segmentTree: IJGISLayerTree;
+};

package/lib/workspace/panels/hooks/useLayerTree.js

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { CommandIDs } from '../../../constants';
+/**
+ * Subscribes to the model's layer tree and splits it into two derived trees:
+ * - `layerTree`: regular map layers (excludes StorySegmentLayers)
+ * - `segmentTree`: story segment layers only
+ *
+ * Also pre-selects the last item on first load, and syncs segment order back
+ * to the story map whenever the segment tree changes.
+ */
+export function useLayerTree(model, commands, opts) {
+    const [rawLayerTree, setRawLayerTree] = React.useState(model.getLayerTree());
+    const hasSyncedInitialSelectionRef = React.useRef(false);
+    // Ref keeps the callback fresh without re-registering the signal handler on every render
+    const onSegmentAddedRef = React.useRef(opts === null || opts === void 0 ? void 0 : opts.onSegmentAdded);
+    React.useEffect(() => {
+        onSegmentAddedRef.current = opts === null || opts === void 0 ? void 0 : opts.onSegmentAdded;
+    });
+    React.useEffect(() => {
+        const syncInitialSelection = (tree) => {
+            if (hasSyncedInitialSelectionRef.current || tree.length === 0) {
+                return;
+            }
+            hasSyncedInitialSelectionRef.current = true;
+            const lastItem = tree[tree.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) {
+                model.syncSelected({ [lastId]: { type: lastType } }, model.getClientId().toString());
+            }
+        };
+        const updateLayerTree = () => {
+            const freshTree = model.getLayerTree() || [];
+            setRawLayerTree(freshTree);
+            syncInitialSelection(freshTree);
+            commands.notifyCommandChanged(CommandIDs.toggleStoryPresentationMode);
+        };
+        const handleSegmentAdded = (_sender, payload) => {
+            var _a;
+            model.syncSelected({ [payload.storySegmentId]: { type: 'layer' } }, model.getClientId().toString());
+            (_a = onSegmentAddedRef.current) === null || _a === void 0 ? void 0 : _a.call(onSegmentAddedRef, payload);
+        };
+        model.sharedModel.layersChanged.connect(updateLayerTree);
+        model.sharedModel.layerTreeChanged.connect(updateLayerTree);
+        model.segmentAdded.connect(handleSegmentAdded);
+        updateLayerTree();
+        return () => {
+            model.sharedModel.layersChanged.disconnect(updateLayerTree);
+            model.sharedModel.layerTreeChanged.disconnect(updateLayerTree);
+            model.segmentAdded.disconnect(handleSegmentAdded);
+        };
+    }, [model]);
+    // Split the raw tree into regular layers and story segment layers
+    const { layerTree, segmentTree } = React.useMemo(() => {
+        const layers = [];
+        const segments = [];
+        const processLayer = (layer) => {
+            if (typeof layer === 'string') {
+                const layerData = model.getLayer(layer);
+                const isStorySegment = (layerData === null || layerData === void 0 ? void 0 : layerData.type) === 'StorySegmentLayer';
+                return {
+                    layer: isStorySegment ? null : layer,
+                    segment: isStorySegment ? layer : null,
+                };
+            }
+            const groupLayers = [];
+            const groupSegments = [];
+            for (const groupLayer of layer.layers) {
+                const result = processLayer(groupLayer);
+                if (result.layer !== null) {
+                    groupLayers.push(result.layer);
+                }
+                if (result.segment !== null) {
+                    groupSegments.push(result.segment);
+                }
+            }
+            return {
+                layer: groupLayers.length > 0 ? Object.assign(Object.assign({}, layer), { layers: groupLayers }) : null,
+                segment: groupSegments.length > 0 ? Object.assign(Object.assign({}, layer), { layers: groupSegments }) : null,
+            };
+        };
+        for (const item of rawLayerTree) {
+            const result = processLayer(item);
+            if (result.layer !== null) {
+                layers.push(result.layer);
+            }
+            if (result.segment !== null) {
+                segments.push(result.segment);
+            }
+        }
+        layers.reverse();
+        return { layerTree: layers, segmentTree: segments };
+    }, [rawLayerTree]);
+    // Sync segment order back to the story map when it changes
+    React.useEffect(() => {
+        const { storyId, story } = model.getSelectedStory();
+        if (!story) {
+            return;
+        }
+        model.sharedModel.updateStoryMap(storyId, Object.assign(Object.assign({}, story), { storySegments: segmentTree }));
+    }, [segmentTree]);
+    return { layerTree, segmentTree };
+}

package/lib/workspace/panels/hooks/useRightPanelOptions.d.ts

@@ -0,0 +1,27 @@
+import { IJupyterGISModel } from '@jupytergis/schema';
+interface IUseRightPanelOptionsResult {
+    storyMapPresentationMode: boolean;
+    editorMode: boolean;
+    showEditor: boolean;
+    storyPanelTitle: string;
+    toggleEditor: () => void;
+}
+/**
+ * Tracks story map presentation mode and editor mode, and fires optional
+ * callbacks when the active tab should change. This keeps tab state in the
+ * caller (RightPanel, MergedPanel, …) rather than inside this hook, so the
+ * same hook can drive any panel layout.
+ *
+ * @param model - The JupyterGIS model to subscribe to.
+ * @param opts.onPresentationModeEnabled - Called when story presentation mode
+ *   is activated; the caller should switch to the story tab.
+ * @param opts.onIdentifyFeatures - Called when new features are identified on
+ *   the map; the caller should switch to the identify tab.
+ * @returns storyMapPresentationMode, editorMode, showEditor, storyPanelTitle,
+ *   toggleEditor.
+ */
+export declare function useRightPanelOptions(model: IJupyterGISModel, opts?: {
+    onPresentationModeEnabled?: () => void;
+    onIdentifyFeatures?: () => void;
+}): IUseRightPanelOptionsResult;
+export {};

package/lib/workspace/panels/hooks/useRightPanelOptions.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+/**
+ * Tracks story map presentation mode and editor mode, and fires optional
+ * callbacks when the active tab should change. This keeps tab state in the
+ * caller (RightPanel, MergedPanel, …) rather than inside this hook, so the
+ * same hook can drive any panel layout.
+ *
+ * @param model - The JupyterGIS model to subscribe to.
+ * @param opts.onPresentationModeEnabled - Called when story presentation mode
+ *   is activated; the caller should switch to the story tab.
+ * @param opts.onIdentifyFeatures - Called when new features are identified on
+ *   the map; the caller should switch to the identify tab.
+ * @returns storyMapPresentationMode, editorMode, showEditor, storyPanelTitle,
+ *   toggleEditor.
+ */
+export function useRightPanelOptions(model, opts) {
+    var _a;
+    const [editorMode, setEditorMode] = React.useState(true);
+    const [storyMapPresentationMode, setStoryMapPresentationMode] = React.useState((_a = model.getOptions().storyMapPresentationMode) !== null && _a !== void 0 ? _a : false);
+    // Keep refs fresh to avoid stale closures in the effect below
+    const onPresentationModeEnabledRef = React.useRef(opts === null || opts === void 0 ? void 0 : opts.onPresentationModeEnabled);
+    const onIdentifyFeaturesRef = React.useRef(opts === null || opts === void 0 ? void 0 : opts.onIdentifyFeatures);
+    React.useEffect(() => {
+        onPresentationModeEnabledRef.current = opts === null || opts === void 0 ? void 0 : opts.onPresentationModeEnabled;
+        onIdentifyFeaturesRef.current = opts === null || opts === void 0 ? void 0 : opts.onIdentifyFeatures;
+    });
+    React.useEffect(() => {
+        const onOptionsChanged = () => {
+            var _a;
+            const { storyMapPresentationMode } = model.getOptions();
+            setStoryMapPresentationMode(storyMapPresentationMode !== null && storyMapPresentationMode !== void 0 ? storyMapPresentationMode : false);
+            if (storyMapPresentationMode) {
+                (_a = onPresentationModeEnabledRef.current) === null || _a === void 0 ? void 0 : _a.call(onPresentationModeEnabledRef);
+            }
+        };
+        let currentlyIdentifiedFeatures = undefined;
+        const handleIdentifiedFeaturesChanged = () => {
+            var _a, _b, _c;
+            const identifiedFeatures = (_b = (_a = model.localState) === null || _a === void 0 ? void 0 : _a.identifiedFeatures) === null || _b === void 0 ? void 0 : _b.value;
+            if (!identifiedFeatures) {
+                return;
+            }
+            if (identifiedFeatures !== currentlyIdentifiedFeatures) {
+                currentlyIdentifiedFeatures = identifiedFeatures;
+                (_c = onIdentifyFeaturesRef.current) === null || _c === void 0 ? void 0 : _c.call(onIdentifyFeaturesRef);
+            }
+        };
+        model.sharedOptionsChanged.connect(onOptionsChanged);
+        model.identifiedFeaturesChanged.connect(handleIdentifiedFeaturesChanged);
+        handleIdentifiedFeaturesChanged();
+        return () => {
+            model.sharedOptionsChanged.disconnect(onOptionsChanged);
+            model.identifiedFeaturesChanged.disconnect(handleIdentifiedFeaturesChanged);
+        };
+    }, [model]);
+    const showEditor = !storyMapPresentationMode && editorMode;
+    const storyPanelTitle = storyMapPresentationMode
+        ? 'Story Map'
+        : editorMode
+            ? 'Story Editor'
+            : 'Story Map';
+    const toggleEditor = () => {
+        setEditorMode(prev => !prev);
+    };
+    return {
+        storyMapPresentationMode,
+        editorMode,
+        showEditor,
+        storyPanelTitle,
+        toggleEditor,
+    };
+}

package/lib/workspace/panels/hooks/useUIState.d.ts

@@ -0,0 +1,2 @@
+import { IJGISUIState, IJupyterGISModel } from '@jupytergis/schema';
+export declare function useUIState<K extends keyof IJGISUIState>(key: K, model: IJupyterGISModel): [IJGISUIState[K], (value: IJGISUIState[K]) => void];

package/lib/workspace/panels/hooks/useUIState.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { GlobalStateDbManager } from "../../../shared/store";
+const STATE_DB_KEY_PREFIX = 'jupytergis:localUIState:';
+export function useUIState(key, model) {
+    const [value, setValue] = React.useState(() => model.getUIState()[key]);
+    // Listen for model uiState changes and persist to StateDB
+    React.useEffect(() => {
+        const handler = (_, state) => {
+            setValue(state[key]);
+            const stateDb = GlobalStateDbManager.getInstance().getStateDb();
+            if (stateDb) {
+                stateDb.save(`${STATE_DB_KEY_PREFIX}${model.filePath}`, state);
+            }
+        };
+        model.uiStateChanged.connect(handler);
+        return () => {
+            model.uiStateChanged.disconnect(handler);
+        };
+    }, [model, key]);
+    const setUIStateValue = React.useCallback((newValue) => {
+        setValue(newValue);
+        model.setUIState({ [key]: newValue });
+    }, [model, key]);
+    return [value, setUIStateValue];
+}

package/lib/{panelview → workspace/panels}/index.d.ts

@@ -1,4 +1,4 @@
 export * from './header';
 export * from './leftpanel';
-export * from './objectproperties';
+export * from './mergedpanel';
 export * from './rightpanel';

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

@@ -1,4 +1,4 @@
 export * from './header';
 export * from './leftpanel';
-export * from './objectproperties';
+export * from './mergedpanel';
 export * from './rightpanel';

package/lib/{panelview → workspace/panels}/leftpanel.d.ts

@@ -1,4 +1,4 @@
-import { IJupyterGISModel, SelectionType, IJupyterGISSettings } from '@jupytergis/schema';
+import { IJupyterGISModel, IJupyterGISSettings, SelectionType } from '@jupytergis/schema';
 import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 import { MouseEvent as ReactMouseEvent } from 'react';

package/lib/workspace/panels/leftpanel.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import Draggable from 'react-draggable';
+import { TabbedPanel } from './components/TabbedPanel';
+import { LayersBodyComponent } from './components/layers';
+import { useLayerTree } from './hooks/useLayerTree';
+import { useUIState } from './hooks/useUIState';
+import StacPanel from '../../features/stac-browser/components/StacPanel';
+export const LeftPanel = props => {
+    var _a;
+    const nodeRef = React.useRef(null);
+    const [options, setOptions] = React.useState(props.model.getOptions());
+    const storyMapPresentationMode = (_a = options.storyMapPresentationMode) !== null && _a !== void 0 ? _a : false;
+    const [leftPanelOpen] = useUIState('leftPanelOpen', props.model);
+    const [curTab, setCurTab] = React.useState(() => {
+        if (!props.settings.layersDisabled) {
+            return 'layers';
+        }
+        if (!props.settings.stacBrowserDisabled && !storyMapPresentationMode) {
+            return 'stac';
+        }
+        if (!props.settings.storyMapsDisabled) {
+            return 'segments';
+        }
+        return '';
+    });
+    React.useEffect(() => {
+        const onOptionsChanged = () => setOptions(Object.assign({}, props.model.getOptions()));
+        props.model.sharedOptionsChanged.connect(onOptionsChanged);
+        return () => {
+            props.model.sharedOptionsChanged.disconnect(onOptionsChanged);
+        };
+    }, [props.model]);
+    const { layerTree, segmentTree } = useLayerTree(props.model, props.commands, {
+        onSegmentAdded: () => setCurTab('segments'),
+    });
+    const allLeftTabsDisabled = props.settings.layersDisabled &&
+        props.settings.stacBrowserDisabled &&
+        props.settings.storyMapsDisabled;
+    const tabs = [
+        {
+            name: 'layers',
+            title: 'Layers',
+            enabled: !props.settings.layersDisabled,
+            contentClassName: 'jp-gis-layerPanel',
+            content: (React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: layerTree })),
+        },
+        {
+            name: 'stac',
+            title: 'Stac Browser',
+            enabled: !props.settings.stacBrowserDisabled && !storyMapPresentationMode,
+            contentClassName: 'jgis-panel-tab-content-stac-panel',
+            content: React.createElement(StacPanel, { model: props.model }),
+        },
+        {
+            name: 'segments',
+            title: 'Segments',
+            enabled: !props.settings.storyMapsDisabled,
+            content: (React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: segmentTree })),
+        },
+    ];
+    return (React.createElement(Draggable, { nodeRef: nodeRef, handle: ".jgis-tabs-list", cancel: ".jgis-tabs-trigger", bounds: ".jGIS-Mainview-Container" },
+        React.createElement("div", { ref: nodeRef, className: "jgis-left-panel-container", style: {
+                display: props.settings.leftPanelDisabled ||
+                    allLeftTabsDisabled ||
+                    leftPanelOpen === false
+                    ? 'none'
+                    : 'block',
+            } },
+            React.createElement(TabbedPanel, { tabs: tabs, curTab: curTab, onTabClick: name => setCurTab(prev => (prev === name ? '' : name)) }))));
+};

package/lib/{panelview/rightpanel.d.ts → workspace/panels/mergedpanel.d.ts}

@@ -1,14 +1,15 @@
 import { IAnnotationModel, IJGISFormSchemaRegistry, IJGISLayer, IJupyterGISModel, IJupyterGISSettings } from '@jupytergis/schema';
+import { IStateDB } from '@jupyterlab/statedb';
 import { CommandRegistry } from '@lumino/commands';
 import * as React from 'react';
-interface IRightPanelProps {
-    formSchemaRegistry: IJGISFormSchemaRegistry;
-    annotationModel: IAnnotationModel;
+export interface IMergedPanelProps {
     model: IJupyterGISModel;
+    state: IStateDB;
     commands: CommandRegistry;
     settings: IJupyterGISSettings;
+    formSchemaRegistry: IJGISFormSchemaRegistry;
+    annotationModel: IAnnotationModel;
     addLayer?: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
     removeLayer?: (id: string) => void;
 }
-export declare const RightPanel: React.FC<IRightPanelProps>;
-export {};
+export declare const MergedPanel: React.FC<IMergedPanelProps>;

package/lib/workspace/panels/mergedpanel.js

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import { STORY_TYPE } from "../../types";
+import { TabbedPanel } from './components/TabbedPanel';
+import { LayersBodyComponent } from './components/layers';
+import { useLayerTree } from './hooks/useLayerTree';
+import { useRightPanelOptions } from './hooks/useRightPanelOptions';
+import { useUIState } from './hooks/useUIState';
+import { RightPanelStoryViewer } from './rightpanel';
+import { AnnotationsPanel } from '../../features/annotations';
+import { IdentifyPanelComponent } from '../../features/identify/IdentifyPanel';
+import { ObjectPropertiesReact } from '../../features/objectproperties';
+import StacPanel from '../../features/stac-browser/components/StacPanel';
+import StoryEditorPanel from '../../features/story/StoryEditorPanel';
+import { PreviewModeSwitch } from '../../features/story/components/PreviewModeSwitch';
+export const MergedPanel = props => {
+    var _a, _b;
+    const [leftPanelOpen] = useUIState('leftPanelOpen', props.model);
+    const [rightPanelOpen] = useUIState('rightPanelOpen', props.model);
+    const [panelHeight, setPanelHeight] = React.useState(null);
+    const panelHeightRef = React.useRef(null);
+    const isDraggingRef = React.useRef(false);
+    const startTabListInteract = (startX, startY) => {
+        var _a;
+        const startHeight = (_a = panelHeightRef.current) !== null && _a !== void 0 ? _a : window.innerHeight * 0.3;
+        let gesture = 'undecided';
+        const classify = (dx, dy) => {
+            if (Math.hypot(dx, dy) > 6) {
+                gesture = Math.abs(dy) >= Math.abs(dx) ? 'vertical' : 'horizontal';
+            }
+        };
+        const applyResize = (clientY) => {
+            const clamped = Math.max(24, Math.min(startHeight + (startY - clientY), window.innerHeight * 0.9));
+            panelHeightRef.current = clamped;
+            setPanelHeight(clamped);
+        };
+        const onMouseMove = (ev) => {
+            if (gesture === 'undecided') {
+                classify(ev.clientX - startX, ev.clientY - startY);
+            }
+            if (gesture === 'vertical') {
+                isDraggingRef.current = true;
+                applyResize(ev.clientY);
+            }
+        };
+        const onTouchMove = (ev) => {
+            const t = ev.touches[0];
+            if (gesture === 'undecided') {
+                classify(t.clientX - startX, t.clientY - startY);
+            }
+            if (gesture === 'vertical') {
+                ev.preventDefault();
+                isDraggingRef.current = true;
+                applyResize(t.clientY);
+            }
+        };
+        const cleanup = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', cleanup);
+            document.removeEventListener('touchmove', onTouchMove);
+            document.removeEventListener('touchend', cleanup);
+            // Reset after click fires (click follows mouseup synchronously)
+            setTimeout(() => {
+                isDraggingRef.current = false;
+            }, 0);
+        };
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', cleanup);
+        document.addEventListener('touchmove', onTouchMove, { passive: false });
+        document.addEventListener('touchend', cleanup);
+    };
+    const onTabListMouseDown = (e) => {
+        startTabListInteract(e.clientX, e.clientY);
+    };
+    const onTabListTouchStart = (e) => {
+        const t = e.touches[0];
+        startTabListInteract(t.clientX, t.clientY);
+    };
+    const [curTab, setCurTab] = React.useState(() => {
+        const { leftPanelDisabled, rightPanelDisabled } = props.settings;
+        if (!leftPanelDisabled && !props.settings.layersDisabled) {
+            return 'layers';
+        }
+        if (!rightPanelDisabled && !props.settings.objectPropertiesDisabled) {
+            return 'objectProperties';
+        }
+        return '';
+    });
+    const [selectedObjectProperties, setSelectedObjectProperties] = React.useState(undefined);
+    const { layerTree, segmentTree } = useLayerTree(props.model, props.commands, {
+        onSegmentAdded: () => setCurTab('segments'),
+    });
+    const { storyMapPresentationMode, editorMode, showEditor, storyPanelTitle, toggleEditor, } = useRightPanelOptions(props.model, {
+        onPresentationModeEnabled: () => setCurTab('storyPanel'),
+        onIdentifyFeatures: () => setCurTab('identifyPanel'),
+    });
+    const isListStory = ((_a = props.model.getSelectedStory().story) === null || _a === void 0 ? void 0 : _a.storyType) ===
+        STORY_TYPE.verticalScroll;
+    const { leftPanelDisabled, rightPanelDisabled } = props.settings;
+    const tabs = [
+        {
+            name: 'layers',
+            title: 'Layers',
+            enabled: !leftPanelDisabled &&
+                !props.settings.layersDisabled &&
+                !storyMapPresentationMode,
+            content: (React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: layerTree })),
+        },
+        {
+            name: 'stac',
+            title: 'Stac Browser',
+            enabled: !leftPanelDisabled &&
+                !props.settings.stacBrowserDisabled &&
+                !storyMapPresentationMode,
+            content: React.createElement(StacPanel, { model: props.model }),
+        },
+        {
+            name: 'segments',
+            title: 'Segments',
+            enabled: !leftPanelDisabled && !props.settings.storyMapsDisabled,
+            content: (React.createElement(LayersBodyComponent, { model: props.model, commands: props.commands, state: props.state, layerTree: segmentTree })),
+        },
+        {
+            name: 'objectProperties',
+            title: 'Object Properties',
+            enabled: !rightPanelDisabled &&
+                !props.settings.objectPropertiesDisabled &&
+                !storyMapPresentationMode,
+            content: (React.createElement(ObjectPropertiesReact, { setSelectedObject: setSelectedObjectProperties, selectedObject: selectedObjectProperties, formSchemaRegistry: props.formSchemaRegistry, model: props.model })),
+        },
+        {
+            name: 'storyPanel',
+            title: storyPanelTitle,
+            enabled: !rightPanelDisabled && !props.settings.storyMapsDisabled,
+            content: (React.createElement(React.Fragment, null,
+                !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)),
+        },
+        {
+            name: 'annotations',
+            title: 'Annotations',
+            enabled: !rightPanelDisabled && !props.settings.annotationsDisabled,
+            content: (React.createElement(AnnotationsPanel, { annotationModel: props.annotationModel, jgisModel: props.model })),
+        },
+        {
+            name: 'identifyPanel',
+            title: 'Identified Features',
+            enabled: !rightPanelDisabled && !props.settings.identifyDisabled,
+            content: React.createElement(IdentifyPanelComponent, { model: props.model }),
+        },
+    ];
+    const enabledTabNames = tabs.filter(t => t.enabled).map(t => t.name);
+    const effectiveCurTab = enabledTabNames.includes(curTab)
+        ? curTab
+        : ((_b = enabledTabNames[0]) !== null && _b !== void 0 ? _b : '');
+    return (React.createElement("div", { className: "jgis-merged-panel-container", style: Object.assign({ display: (leftPanelDisabled || leftPanelOpen === false) &&
+                (rightPanelDisabled || rightPanelOpen === false)
+                ? 'none'
+                : undefined }, (panelHeight !== null ? { height: `${panelHeight}px` } : {})) },
+        React.createElement("div", { className: "jgis-resize-handle", onMouseDown: onTabListMouseDown, onTouchStart: onTabListTouchStart }),
+        React.createElement(TabbedPanel, { tabs: tabs, curTab: effectiveCurTab, onTabClick: name => {
+                if (isDraggingRef.current) {
+                    return;
+                }
+                setCurTab(prev => (prev === name ? '' : name));
+            }, onTabListMouseDown: onTabListMouseDown, onTabListTouchStart: onTabListTouchStart })));
+};

package/lib/workspace/panels/rightpanel.d.ts

@@ -0,0 +1,25 @@
+import { IAnnotationModel, IDict, IJGISFormSchemaRegistry, IJGISLayer, IJupyterGISModel, IJupyterGISSettings } from '@jupytergis/schema';
+import { CommandRegistry } from '@lumino/commands';
+import * as React from 'react';
+/** Story viewer + useStoryMap hook
+ * only mounted when story tab is active to avoid the hook causing re-renders when tab is hidden.
+ **/
+export declare function RightPanelStoryViewer({ model, addLayer, removeLayer, }: {
+    model: IJupyterGISModel;
+    addLayer?: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
+    removeLayer?: (id: string) => void;
+}): React.JSX.Element;
+interface IRightPanelProps {
+    formSchemaRegistry: IJGISFormSchemaRegistry;
+    annotationModel: IAnnotationModel;
+    model: IJupyterGISModel;
+    commands: CommandRegistry;
+    settings: IJupyterGISSettings;
+    addLayer?: (id: string, layer: IJGISLayer, index: number) => Promise<void>;
+    removeLayer?: (id: string) => void;
+    patchGeoJSONFeatureProperties?: (sourceId: string, target: {
+        featureId: string;
+    }, propertyUpdates: IDict<any>) => Promise<boolean>;
+}
+export declare const RightPanel: React.NamedExoticComponent<IRightPanelProps>;
+export {};