@jbrowse/app-core 4.0.2 → 4.0.4

package/esm/DockviewLayout/index.d.ts

@@ -1,14 +1,22 @@
 import type { IAnyStateTreeNode, Instance } from '@jbrowse/mobx-state-tree';
 import type { SerializedDockview } from 'dockview-react';
+export interface DockviewLayoutNode {
+    viewIds?: string[];
+    direction?: 'horizontal' | 'vertical';
+    children?: DockviewLayoutNode[];
+    size?: number;
+}
 export declare function DockviewLayoutMixin(): import("@jbrowse/mobx-state-tree").IModelType<{
     dockviewLayout: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IType<SerializedDockview, SerializedDockview, SerializedDockview>>;
     panelViewAssignments: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IMapType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISimpleType<string>>>, [undefined]>;
+    init: import("@jbrowse/mobx-state-tree").IType<DockviewLayoutNode | undefined, DockviewLayoutNode | undefined, DockviewLayoutNode | undefined>;
     activePanelId: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
 }, {
     getViewIdsForPanel(panelId: string): never[] | (import("@jbrowse/mobx-state-tree").IMSTArray<import("@jbrowse/mobx-state-tree").ISimpleType<string>> & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISimpleType<string>>>);
 } & {
     setDockviewLayout(layout: SerializedDockview | undefined): void;
     setActivePanelId(panelId: string | undefined): void;
+    setInit(init: DockviewLayoutNode | undefined): void;
     assignViewToPanel(panelId: string, viewId: string): void;
     removeViewFromPanel(viewId: string): void;
     removePanel(panelId: string): void;
@@ -19,6 +27,7 @@ export declare function DockviewLayoutMixin(): import("@jbrowse/mobx-state-tree"
 }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree").ModelSnapshotType<{
     dockviewLayout: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").IType<SerializedDockview, SerializedDockview, SerializedDockview>>;
     panelViewAssignments: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").IMapType<import("@jbrowse/mobx-state-tree").IArrayType<import("@jbrowse/mobx-state-tree").ISimpleType<string>>>, [undefined]>;
+    init: import("@jbrowse/mobx-state-tree").IType<DockviewLayoutNode | undefined, DockviewLayoutNode | undefined, DockviewLayoutNode | undefined>;
     activePanelId: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<string>>;
 }>>;
 export type DockviewLayoutMixinType = ReturnType<typeof DockviewLayoutMixin>;

package/esm/DockviewLayout/index.js

@@ -4,6 +4,7 @@ export function DockviewLayoutMixin() {
         .model({
         dockviewLayout: types.maybe(types.frozen()),
         panelViewAssignments: types.optional(types.map(types.array(types.string)), {}),
+        init: types.frozen(),
         activePanelId: types.maybe(types.string),
     })
         .views(self => ({
@@ -18,6 +19,9 @@ export function DockviewLayoutMixin() {
         setActivePanelId(panelId) {
             self.activePanelId = panelId;
         },
+        setInit(init) {
+            self.init = init;
+        },
         assignViewToPanel(panelId, viewId) {
             const existing = self.panelViewAssignments.get(panelId);
             if (existing) {
@@ -91,7 +95,7 @@ export function DockviewLayoutMixin() {
         if (!snap) {
             return snap;
         }
-        const { dockviewLayout, panelViewAssignments, activePanelId, ...rest } = snap;
+        const { dockviewLayout, panelViewAssignments, init: _init, activePanelId, ...rest } = snap;
         return {
             ...rest,
             ...(dockviewLayout !== undefined ? { dockviewLayout } : {}),

package/esm/ui/App/AppToolbar.js

@@ -22,6 +22,21 @@ const useStyles = makeStyles()(theme => ({
         backgroundColor: theme.palette.primary.light,
     },
 }));
+function wrapMenuItems(items, session) {
+    return items.map(item => ({
+        ...item,
+        ...('onClick' in item
+            ? {
+                onClick: () => {
+                    item.onClick(session);
+                },
+            }
+            : {}),
+        ...('subMenu' in item
+            ? { subMenu: wrapMenuItems(item.subMenu, session) }
+            : {}),
+    }));
+}
 const AppToolbar = observer(function AppToolbar({ session, HeaderButtons = _jsx("div", {}), }) {
     const { classes } = useStyles();
     const { name, menus } = session;
@@ -29,16 +44,7 @@ const AppToolbar = observer(function AppToolbar({ session, HeaderButtons = _jsx(
                     const items = typeof menu.menuItems === 'function'
                         ? menu.menuItems()
                         : menu.menuItems;
-                    return items.map(arg => ({
-                        ...arg,
-                        ...('onClick' in arg
-                            ? {
-                                onClick: () => {
-                                    arg.onClick(session);
-                                },
-                            }
-                            : {}),
-                    }));
+                    return wrapMenuItems(items, session);
                 } }, menu.label))), _jsx("div", { className: classes.grow }), _jsx(Tooltip, { title: "Rename session", arrow: true, children: _jsx(EditableTypography, { value: name, variant: "body1", classes: {
                         inputBase: classes.inputBase,
                         inputRoot: classes.inputRoot,

package/esm/ui/App/DockviewContext.d.ts

@@ -6,10 +6,17 @@ interface DockviewContextValue {
     moveViewToNewTab: (viewId: string) => void;
     moveViewToSplitRight: (viewId: string) => void;
 }
+export declare function peekPendingMoveAction(): {
+    type: "newTab" | "splitRight";
+    viewId: string;
+} | null;
+export declare function clearPendingMoveAction(): void;
 export declare function getPendingMoveAction(): {
     type: "newTab" | "splitRight";
     viewId: string;
 } | null;
+export declare function setPendingMoveToNewTab(viewId: string): void;
+export declare function setPendingMoveToSplitRight(viewId: string): void;
 export declare const DockviewContext: import("react").Context<DockviewContextValue>;
 export declare function useDockview(): DockviewContextValue;
 export {};

package/esm/ui/App/DockviewContext.js

@@ -1,20 +1,28 @@
 import { createContext, useContext } from 'react';
 let pendingMoveAction = null;
+export function peekPendingMoveAction() {
+    return pendingMoveAction;
+}
+export function clearPendingMoveAction() {
+    pendingMoveAction = null;
+}
 export function getPendingMoveAction() {
     const action = pendingMoveAction;
     pendingMoveAction = null;
     return action;
 }
+export function setPendingMoveToNewTab(viewId) {
+    pendingMoveAction = { type: 'newTab', viewId };
+}
+export function setPendingMoveToSplitRight(viewId) {
+    pendingMoveAction = { type: 'splitRight', viewId };
+}
 export const DockviewContext = createContext({
     api: null,
     rearrangePanels: () => { },
     addEmptyTab: () => { },
-    moveViewToNewTab: (viewId) => {
-        pendingMoveAction = { type: 'newTab', viewId };
-    },
-    moveViewToSplitRight: (viewId) => {
-        pendingMoveAction = { type: 'splitRight', viewId };
-    },
+    moveViewToNewTab: setPendingMoveToNewTab,
+    moveViewToSplitRight: setPendingMoveToSplitRight,
 });
 export function useDockview() {
     return useContext(DockviewContext);

package/esm/ui/App/JBrowseViewPanel.js

@@ -3,7 +3,7 @@ import { Suspense, lazy } from 'react';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
 import ViewContainer from "./ViewContainer.js";
-import { isSessionWithDockviewLayout } from "../../DockviewLayout/index.js";
+import { getViewsForPanel } from "./dockviewUtils.js";
 const ViewLauncher = lazy(() => import("./ViewLauncher.js"));
 const useStyles = makeStyles()(theme => ({
     container: {
@@ -25,15 +25,6 @@ const useStyles = makeStyles()(theme => ({
         height: '100%',
     },
 }));
-function getViewsForPanel(panelId, session) {
-    if (!session || !isSessionWithDockviewLayout(session)) {
-        return [];
-    }
-    const viewIds = session.getViewIdsForPanel(panelId);
-    return [...viewIds]
-        .map(id => session.views.find(v => v.id === id))
-        .filter((v) => v !== undefined);
-}
 const JBrowseViewPanel = observer(function JBrowseViewPanel({ params, }) {
     const { panelId, session } = params;
     const { classes } = useStyles();

package/esm/ui/App/JBrowseViewTab.js

@@ -4,7 +4,7 @@ import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { InputBase, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import JBrowseTabMenu from "./JBrowseTabMenu.js";
-import { isSessionWithDockviewLayout } from "../../DockviewLayout/index.js";
+import { getViewsForPanel } from "./dockviewUtils.js";
 const useStyles = makeStyles()(theme => ({
     tabContainer: {
         display: 'flex',
@@ -39,15 +39,6 @@ function stopEvent(e) {
     e.stopPropagation();
     e.preventDefault();
 }
-function getViewsForPanel(panelId, session) {
-    if (!session || !isSessionWithDockviewLayout(session)) {
-        return [];
-    }
-    const viewIds = session.getViewIdsForPanel(panelId);
-    return [...viewIds]
-        .map(id => session.views.find(v => v.id === id))
-        .filter((v) => v !== undefined);
-}
 function getTabDisplayName(views, session) {
     if (views.length === 0) {
         return 'Empty';

package/esm/ui/App/TiledViewsContainer.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { nanoid } from '@jbrowse/core/util/nanoid';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { createElementId } from '@jbrowse/core/util/types/mst';
 import { useTheme } from '@mui/material';
 import { DockviewReact } from 'dockview-react';
 import { autorun } from 'mobx';
 import { observer } from 'mobx-react';
-import { DockviewContext, getPendingMoveAction } from "./DockviewContext.js";
+import { DockviewContext, clearPendingMoveAction, peekPendingMoveAction, } from "./DockviewContext.js";
 import DockviewLeftHeaderActions from "./DockviewLeftHeaderActions.js";
 import DockviewRightHeaderActions from "./DockviewRightHeaderActions.js";
 import JBrowseViewPanel from "./JBrowseViewPanel.js";
@@ -21,6 +21,15 @@ const useStyles = makeStyles()(() => ({
         gridRow: 'components',
     },
 }));
+function getPanelPosition(group, direction) {
+    if (!group) {
+        return undefined;
+    }
+    if (direction) {
+        return { referenceGroup: group, direction };
+    }
+    return { referenceGroup: group };
+}
 const components = {
     jbrowseView: JBrowseViewPanel,
 };
@@ -51,46 +60,35 @@ const TiledViewsContainer = observer(function TiledViewsContainer({ session, })
         if (!api) {
             return;
         }
-        const panelId = `panel-${nanoid()}`;
+        const panelId = `panel-${createElementId()}`;
         const group = targetGroup ?? api.activeGroup;
         api.addPanel({
             ...createPanelConfig(panelId, session, 'New Tab'),
-            position: group ? { referenceGroup: group } : undefined,
+            position: getPanelPosition(group),
         });
         if (isSessionWithDockviewLayout(session)) {
             session.setActivePanelId(panelId);
         }
     }, [api, session]);
-    const moveViewToNewTab = useCallback((viewId) => {
+    const moveViewToPanel = useCallback((viewId, direction) => {
         if (!api || !isSessionWithDockviewLayout(session)) {
             return;
         }
         session.removeViewFromPanel(viewId);
-        const panelId = `panel-${nanoid()}`;
-        const group = api.activeGroup;
+        const panelId = `panel-${createElementId()}`;
         api.addPanel({
             ...createPanelConfig(panelId, session, 'New Tab'),
-            position: group ? { referenceGroup: group } : undefined,
+            position: getPanelPosition(api.activeGroup, direction),
         });
         session.assignViewToPanel(panelId, viewId);
         session.setActivePanelId(panelId);
     }, [api, session]);
+    const moveViewToNewTab = useCallback((viewId) => {
+        moveViewToPanel(viewId);
+    }, [moveViewToPanel]);
     const moveViewToSplitRight = useCallback((viewId) => {
-        if (!api || !isSessionWithDockviewLayout(session)) {
-            return;
-        }
-        session.removeViewFromPanel(viewId);
-        const panelId = `panel-${nanoid()}`;
-        const group = api.activeGroup;
-        api.addPanel({
-            ...createPanelConfig(panelId, session, 'New Tab'),
-            position: group
-                ? { referenceGroup: group, direction: 'right' }
-                : undefined,
-        });
-        session.assignViewToPanel(panelId, viewId);
-        session.setActivePanelId(panelId);
-    }, [api, session]);
+        moveViewToPanel(viewId, 'right');
+    }, [moveViewToPanel]);
     const contextValue = useMemo(() => ({
         api,
         rearrangePanels,
@@ -98,11 +96,136 @@ const TiledViewsContainer = observer(function TiledViewsContainer({ session, })
         moveViewToNewTab,
         moveViewToSplitRight,
     }), [api, rearrangePanels, addEmptyTab, moveViewToNewTab, moveViewToSplitRight]);
-    const createInitialPanel = useCallback((dockviewApi) => {
-        const panelId = `panel-${nanoid()}`;
-        dockviewApi.addPanel(createPanelConfig(panelId, sessionRef.current));
-        if (isSessionWithDockviewLayout(sessionRef.current)) {
-            sessionRef.current.setActivePanelId(panelId);
+    const createInitialPanels = useCallback((dockviewApi) => {
+        const session = sessionRef.current;
+        const pendingAction = peekPendingMoveAction();
+        const initLayout = isSessionWithDockviewLayout(session)
+            ? session.init
+            : undefined;
+        if (initLayout && isSessionWithDockviewLayout(session)) {
+            trackedViewIdsRef.current.clear();
+            let firstPanelId;
+            const groupSizes = [];
+            function processNode(node, referenceGroup, direction) {
+                if (!node) {
+                    return undefined;
+                }
+                if (node.viewIds !== undefined) {
+                    const panelId = `panel-${createElementId()}`;
+                    if (!firstPanelId) {
+                        firstPanelId = panelId;
+                    }
+                    const position = referenceGroup && direction
+                        ? { referenceGroup, direction }
+                        : referenceGroup
+                            ? { referenceGroup }
+                            : undefined;
+                    dockviewApi.addPanel({
+                        ...createPanelConfig(panelId, session, 'Tab'),
+                        position,
+                    });
+                    for (const viewId of node.viewIds) {
+                        if (isSessionWithDockviewLayout(session)) {
+                            session.assignViewToPanel(panelId, viewId);
+                        }
+                        trackedViewIdsRef.current.add(viewId);
+                    }
+                    const group = dockviewApi.getPanel(panelId)?.group;
+                    if (group && node.size !== undefined) {
+                        groupSizes.push({ group, size: node.size });
+                    }
+                    return group;
+                }
+                if (node.children && node.children.length > 0) {
+                    const dockviewDirection = node.direction === 'horizontal' ? 'right' : 'below';
+                    let currentGroup = referenceGroup;
+                    for (let i = 0; i < node.children.length; i++) {
+                        const child = node.children[i];
+                        const childDirection = i === 0 ? direction : dockviewDirection;
+                        const childRef = i === 0 ? referenceGroup : currentGroup;
+                        const newGroup = processNode(child, childRef, childDirection);
+                        if (newGroup) {
+                            currentGroup = newGroup;
+                        }
+                    }
+                    return currentGroup;
+                }
+                return undefined;
+            }
+            processNode(initLayout, undefined, undefined);
+            if (groupSizes.length >= 2 &&
+                initLayout.direction &&
+                groupSizes.length === initLayout.children?.length) {
+                const direction = initLayout.direction;
+                requestAnimationFrame(() => {
+                    const totalSize = groupSizes.reduce((sum, g) => sum + g.size, 0);
+                    if (totalSize > 0) {
+                        if (direction === 'horizontal') {
+                            const containerWidth = dockviewApi.width;
+                            if (containerWidth > 0) {
+                                for (const { group, size } of groupSizes) {
+                                    const width = Math.round(containerWidth * (size / totalSize));
+                                    group.api.setSize({ width });
+                                }
+                            }
+                        }
+                        else {
+                            const containerHeight = dockviewApi.height;
+                            if (containerHeight > 0) {
+                                for (const { group, size } of groupSizes) {
+                                    const height = Math.round(containerHeight * (size / totalSize));
+                                    group.api.setSize({ height });
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+            session.setInit(undefined);
+            if (firstPanelId) {
+                session.setActivePanelId(firstPanelId);
+                dockviewApi.getPanel(firstPanelId)?.api.setActive();
+            }
+            return;
+        }
+        if (isSessionWithDockviewLayout(session)) {
+            for (const panelId of session.panelViewAssignments.keys()) {
+                session.removePanel(panelId);
+            }
+            session.setDockviewLayout(undefined);
+        }
+        trackedViewIdsRef.current.clear();
+        const pendingViewExists = pendingAction && session.views.some(v => v.id === pendingAction.viewId);
+        if (pendingViewExists && isSessionWithDockviewLayout(session)) {
+            const { type, viewId: pendingViewId } = pendingAction;
+            const otherViewIds = session.views
+                .map(v => v.id)
+                .filter(id => id !== pendingViewId);
+            if (otherViewIds.length > 0) {
+                const firstPanelId = `panel-${createElementId()}`;
+                dockviewApi.addPanel(createPanelConfig(firstPanelId, session));
+                for (const viewId of otherViewIds) {
+                    session.assignViewToPanel(firstPanelId, viewId);
+                    trackedViewIdsRef.current.add(viewId);
+                }
+            }
+            const pendingPanelId = `panel-${createElementId()}`;
+            const direction = type === 'splitRight' ? 'right' : undefined;
+            dockviewApi.addPanel({
+                ...createPanelConfig(pendingPanelId, session, 'New Tab'),
+                position: getPanelPosition(dockviewApi.activeGroup, direction),
+            });
+            session.assignViewToPanel(pendingPanelId, pendingViewId);
+            trackedViewIdsRef.current.add(pendingViewId);
+            session.setActivePanelId(pendingPanelId);
+            clearPendingMoveAction();
+        }
+        else {
+            const panelId = `panel-${createElementId()}`;
+            dockviewApi.addPanel(createPanelConfig(panelId, session));
+            if (isSessionWithDockviewLayout(session)) {
+                session.setActivePanelId(panelId);
+            }
         }
     }, []);
     const onReady = useCallback((event) => {
@@ -133,29 +256,37 @@ const TiledViewsContainer = observer(function TiledViewsContainer({ session, })
                 sessionRef.current.setDockviewLayout(cleanLayoutForStorage(event.api.toJSON()));
             }
         });
-        if (isSessionWithDockviewLayout(sessionRef.current) &&
-            sessionRef.current.dockviewLayout) {
+        const hasPendingAction = peekPendingMoveAction() !== null;
+        const dockviewSession = isSessionWithDockviewLayout(sessionRef.current)
+            ? sessionRef.current
+            : null;
+        const savedLayout = !hasPendingAction && dockviewSession?.dockviewLayout;
+        if (savedLayout) {
             try {
                 rearrangingRef.current = true;
-                event.api.fromJSON(sessionRef.current.dockviewLayout);
-                updatePanelParams(event.api, sessionRef.current);
-                for (const viewIds of sessionRef.current.panelViewAssignments.values()) {
+                event.api.fromJSON(savedLayout);
+                updatePanelParams(event.api, dockviewSession);
+                for (const viewIds of dockviewSession.panelViewAssignments.values()) {
                     for (const viewId of viewIds) {
                         trackedViewIdsRef.current.add(viewId);
                     }
                 }
-                rearrangingRef.current = false;
+                if (event.api.panels.length === 0) {
+                    throw new Error('No panels after fromJSON restore');
+                }
             }
             catch (e) {
                 console.error('Failed to restore dockview layout:', e);
+                createInitialPanels(event.api);
+            }
+            finally {
                 rearrangingRef.current = false;
-                createInitialPanel(event.api);
             }
         }
         else {
-            createInitialPanel(event.api);
+            createInitialPanels(event.api);
         }
-    }, [createInitialPanel]);
+    }, [createInitialPanels]);
     useEffect(() => {
         const dispose = autorun(() => {
             if (!api) {
@@ -175,7 +306,7 @@ const TiledViewsContainer = observer(function TiledViewsContainer({ session, })
                                 activePanelId = firstPanel.id;
                             }
                             else {
-                                activePanelId = `panel-${nanoid()}`;
+                                activePanelId = `panel-${createElementId()}`;
                                 api.addPanel(createPanelConfig(activePanelId, session));
                             }
                             session.setActivePanelId(activePanelId);
@@ -195,21 +326,6 @@ const TiledViewsContainer = observer(function TiledViewsContainer({ session, })
         });
         return dispose;
     }, [session, api]);
-    useEffect(() => {
-        if (!api) {
-            return;
-        }
-        const pendingAction = getPendingMoveAction();
-        if (pendingAction) {
-            const { type, viewId } = pendingAction;
-            if (type === 'newTab') {
-                moveViewToNewTab(viewId);
-            }
-            else {
-                moveViewToSplitRight(viewId);
-            }
-        }
-    }, [api, moveViewToNewTab, moveViewToSplitRight]);
     useEffect(() => {
         if (!api || !isSessionWithDockviewLayout(session)) {
             return;

package/esm/ui/App/ViewMenu.js

@@ -32,6 +32,14 @@ const ViewMenu = observer(function ViewMenu({ model, IconProps, }) {
     const viewCount = usePanel
         ? getPanelViewCount(session, model.id)
         : session.views.length;
+    const moveView = (panelFn, sessionFn) => {
+        if (usePanel) {
+            panelFn(model.id);
+        }
+        else {
+            sessionFn(model.id);
+        }
+    };
     return (_jsx(CascadingMenuButton, { "data-testid": "view_menu_icon", menuItems: () => [
             {
                 label: 'View options',
@@ -66,12 +74,7 @@ const ViewMenu = observer(function ViewMenu({ model, IconProps, }) {
                                 label: 'Move view to top',
                                 icon: KeyboardDoubleArrowUpIcon,
                                 onClick: () => {
-                                    if (usePanel) {
-                                        session.moveViewToTopInPanel(model.id);
-                                    }
-                                    else {
-                                        session.moveViewToTop(model.id);
-                                    }
+                                    moveView(session.moveViewToTopInPanel, session.moveViewToTop);
                                 },
                             },
                         ]
@@ -82,24 +85,14 @@ const ViewMenu = observer(function ViewMenu({ model, IconProps, }) {
                                 label: 'Move view up',
                                 icon: KeyboardArrowUpIcon,
                                 onClick: () => {
-                                    if (usePanel) {
-                                        session.moveViewUpInPanel(model.id);
-                                    }
-                                    else {
-                                        session.moveViewUp(model.id);
-                                    }
+                                    moveView(session.moveViewUpInPanel, session.moveViewUp);
                                 },
                             },
                             {
                                 label: 'Move view down',
                                 icon: KeyboardArrowDownIcon,
                                 onClick: () => {
-                                    if (usePanel) {
-                                        session.moveViewDownInPanel(model.id);
-                                    }
-                                    else {
-                                        session.moveViewDown(model.id);
-                                    }
+                                    moveView(session.moveViewDownInPanel, session.moveViewDown);
                                 },
                             },
                         ]
@@ -110,12 +103,7 @@ const ViewMenu = observer(function ViewMenu({ model, IconProps, }) {
                                 label: 'Move view to bottom',
                                 icon: KeyboardDoubleArrowDownIcon,
                                 onClick: () => {
-                                    if (usePanel) {
-                                        session.moveViewToBottomInPanel(model.id);
-                                    }
-                                    else {
-                                        session.moveViewToBottom(model.id);
-                                    }
+                                    moveView(session.moveViewToBottomInPanel, session.moveViewToBottom);
                                 },
                             },
                         ]

package/esm/ui/App/copyView.js

@@ -1,4 +1,4 @@
-import { nanoid } from '@jbrowse/core/util/nanoid';
+import { createElementId } from '@jbrowse/core/util/types/mst';
 export function renameIds(obj) {
     const idMap = new Map();
     function transformIds(value) {
@@ -13,7 +13,7 @@ export function renameIds(obj) {
             for (const [key, val] of Object.entries(value)) {
                 if (key === 'id' && typeof val === 'string') {
                     if (!idMap.has(val)) {
-                        idMap.set(val, nanoid());
+                        idMap.set(val, createElementId());
                     }
                     result[key] = `${val}-${idMap.get(val)}`;
                 }

package/esm/ui/App/dockviewUtils.d.ts

@@ -1,5 +1,7 @@
 import type { DockviewSessionType } from './types.ts';
+import type { AbstractViewModel } from '@jbrowse/core/util';
 import type { DockviewApi } from 'dockview-react';
+export declare function getViewsForPanel(panelId: string, session: DockviewSessionType | undefined): AbstractViewModel[];
 export declare function createPanelConfig(panelId: string, session: DockviewSessionType, title?: string): {
     id: string;
     component: "jbrowseView";

package/esm/ui/App/dockviewUtils.js

@@ -1,3 +1,13 @@
+import { isSessionWithDockviewLayout } from "../../DockviewLayout/index.js";
+export function getViewsForPanel(panelId, session) {
+    if (!session || !isSessionWithDockviewLayout(session)) {
+        return [];
+    }
+    const viewIds = session.getViewIdsForPanel(panelId);
+    return [...viewIds]
+        .map(id => session.views.find(v => v.id === id))
+        .filter((v) => v !== undefined);
+}
 export function createPanelConfig(panelId, session, title = 'Main') {
     return {
         id: panelId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/app-core",
-  "version": "4.0.2",
+  "version": "4.0.4",
   "description": "JBrowse 2 code shared between the 'full featured' apps e.g. jbrowse-web and jbrowse-desktop",
   "keywords": [
     "jbrowse",
@@ -30,8 +30,8 @@
     "dockview-react": "^4.13.1",
     "mobx": "^6.15.0",
     "mobx-react": "^9.2.1",
-    "@jbrowse/product-core": "^4.0.2",
-    "@jbrowse/core": "^4.0.2"
+    "@jbrowse/product-core": "^4.0.4",
+    "@jbrowse/core": "^4.0.4"
   },
   "peerDependencies": {
     "react": ">=18.0.0",