@jbrowse/app-core 3.7.0 → 4.0.1

package/esm/ui/App/TiledViewsContainer.js

@@ -0,0 +1,251 @@
+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 { 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 DockviewLeftHeaderActions from "./DockviewLeftHeaderActions.js";
+import DockviewRightHeaderActions from "./DockviewRightHeaderActions.js";
+import JBrowseViewPanel from "./JBrowseViewPanel.js";
+import JBrowseViewTab from "./JBrowseViewTab.js";
+import { cleanLayoutForStorage, createPanelConfig, updatePanelParams, } from "./dockviewUtils.js";
+import { isSessionWithDockviewLayout } from "../../DockviewLayout/index.js";
+import 'dockview-react/dist/styles/dockview.css';
+const useStyles = makeStyles()(() => ({
+    container: {
+        height: '100%',
+        width: '100%',
+        gridRow: 'components',
+    },
+}));
+const components = {
+    jbrowseView: JBrowseViewPanel,
+};
+const tabComponents = {
+    jbrowseTab: JBrowseViewTab,
+};
+const TiledViewsContainer = observer(function TiledViewsContainer({ session, }) {
+    const { classes } = useStyles();
+    const theme = useTheme();
+    const [api, setApi] = useState(null);
+    const trackedViewIdsRef = useRef(new Set());
+    const rearrangingRef = useRef(false);
+    const sessionRef = useRef(session);
+    sessionRef.current = session;
+    const rearrangePanels = useCallback((arrange) => {
+        if (!api) {
+            return;
+        }
+        rearrangingRef.current = true;
+        try {
+            arrange(api);
+        }
+        finally {
+            rearrangingRef.current = false;
+        }
+    }, [api]);
+    const addEmptyTab = useCallback((targetGroup) => {
+        if (!api) {
+            return;
+        }
+        const panelId = `panel-${nanoid()}`;
+        const group = targetGroup ?? api.activeGroup;
+        api.addPanel({
+            ...createPanelConfig(panelId, session, 'New Tab'),
+            position: group ? { referenceGroup: group } : undefined,
+        });
+        if (isSessionWithDockviewLayout(session)) {
+            session.setActivePanelId(panelId);
+        }
+    }, [api, session]);
+    const moveViewToNewTab = 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 } : undefined,
+        });
+        session.assignViewToPanel(panelId, viewId);
+        session.setActivePanelId(panelId);
+    }, [api, session]);
+    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]);
+    const contextValue = useMemo(() => ({
+        api,
+        rearrangePanels,
+        addEmptyTab,
+        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 onReady = useCallback((event) => {
+        setApi(event.api);
+        event.api.onDidActivePanelChange(e => {
+            if (e?.id && isSessionWithDockviewLayout(sessionRef.current)) {
+                sessionRef.current.setActivePanelId(e.id);
+            }
+        });
+        event.api.onDidRemovePanel(e => {
+            if (rearrangingRef.current) {
+                return;
+            }
+            if (isSessionWithDockviewLayout(sessionRef.current)) {
+                const viewIds = sessionRef.current.getViewIdsForPanel(e.id);
+                for (const viewId of viewIds) {
+                    const view = sessionRef.current.views.find(v => v.id === viewId);
+                    if (view) {
+                        sessionRef.current.removeView(view);
+                    }
+                }
+                sessionRef.current.removePanel(e.id);
+            }
+        });
+        event.api.onDidLayoutChange(() => {
+            if (!rearrangingRef.current &&
+                isSessionWithDockviewLayout(sessionRef.current)) {
+                sessionRef.current.setDockviewLayout(cleanLayoutForStorage(event.api.toJSON()));
+            }
+        });
+        if (isSessionWithDockviewLayout(sessionRef.current) &&
+            sessionRef.current.dockviewLayout) {
+            try {
+                rearrangingRef.current = true;
+                event.api.fromJSON(sessionRef.current.dockviewLayout);
+                updatePanelParams(event.api, sessionRef.current);
+                for (const viewIds of sessionRef.current.panelViewAssignments.values()) {
+                    for (const viewId of viewIds) {
+                        trackedViewIdsRef.current.add(viewId);
+                    }
+                }
+                rearrangingRef.current = false;
+            }
+            catch (e) {
+                console.error('Failed to restore dockview layout:', e);
+                rearrangingRef.current = false;
+                createInitialPanel(event.api);
+            }
+        }
+        else {
+            createInitialPanel(event.api);
+        }
+    }, [createInitialPanel]);
+    useEffect(() => {
+        const dispose = autorun(() => {
+            if (!api) {
+                return;
+            }
+            const { views } = session;
+            const currentViewIds = new Set(views.map(v => v.id));
+            const trackedIds = trackedViewIdsRef.current;
+            for (const view of views) {
+                if (!trackedIds.has(view.id)) {
+                    trackedIds.add(view.id);
+                    if (isSessionWithDockviewLayout(session)) {
+                        let activePanelId = session.activePanelId;
+                        if (!activePanelId || !api.getPanel(activePanelId)) {
+                            const firstPanel = api.panels[0];
+                            if (firstPanel) {
+                                activePanelId = firstPanel.id;
+                            }
+                            else {
+                                activePanelId = `panel-${nanoid()}`;
+                                api.addPanel(createPanelConfig(activePanelId, session));
+                            }
+                            session.setActivePanelId(activePanelId);
+                        }
+                        session.assignViewToPanel(activePanelId, view.id);
+                    }
+                }
+            }
+            for (const id of trackedIds) {
+                if (!currentViewIds.has(id)) {
+                    trackedIds.delete(id);
+                    if (isSessionWithDockviewLayout(session)) {
+                        session.removeViewFromPanel(id);
+                    }
+                }
+            }
+        });
+        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;
+        }
+        const dispose = autorun(() => {
+            const { dockviewLayout } = session;
+            if (!dockviewLayout || rearrangingRef.current) {
+                return;
+            }
+            const currentLayout = cleanLayoutForStorage(api.toJSON());
+            if (JSON.stringify(currentLayout) === JSON.stringify(dockviewLayout)) {
+                return;
+            }
+            rearrangingRef.current = true;
+            try {
+                api.fromJSON(dockviewLayout);
+                updatePanelParams(api, sessionRef.current);
+                trackedViewIdsRef.current.clear();
+                for (const viewIds of session.panelViewAssignments.values()) {
+                    for (const viewId of viewIds) {
+                        trackedViewIdsRef.current.add(viewId);
+                    }
+                }
+            }
+            catch (e) {
+                console.error('Failed to restore dockview layout from undo:', e);
+            }
+            finally {
+                rearrangingRef.current = false;
+            }
+        });
+        return dispose;
+    }, [session, api]);
+    const themeClass = theme.palette.mode === 'dark'
+        ? 'dockview-theme-dark'
+        : 'dockview-theme-light';
+    return (_jsx(DockviewContext.Provider, { value: contextValue, children: _jsx("div", { className: `${classes.container} ${themeClass}`, children: _jsx(DockviewReact, { components: components, tabComponents: tabComponents, leftHeaderActionsComponent: DockviewLeftHeaderActions, rightHeaderActionsComponent: DockviewRightHeaderActions, onReady: onReady }) }) }));
+});
+export default TiledViewsContainer;

package/{dist/ui/App/ViewHeader.d.ts → esm/ui/App/ViewButtons.d.ts}

@@ -1,8 +1,7 @@
 import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-declare const ViewHeader: ({ view, onClose, onMinimize, className, }: {
+declare const ViewButtons: ({ view, onClose, onMinimize, }: {
     view: IBaseViewModel;
     onClose: () => void;
     onMinimize: () => void;
-    className?: string;
 }) => import("react/jsx-runtime").JSX.Element;
-export default ViewHeader;
+export default ViewButtons;

package/esm/ui/App/ViewButtons.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import AddIcon from '@mui/icons-material/Add';
+import CloseIcon from '@mui/icons-material/Close';
+import MinimizeIcon from '@mui/icons-material/Minimize';
+import { IconButton } from '@mui/material';
+import { observer } from 'mobx-react';
+const useStyles = makeStyles()(theme => ({
+    icon: {
+        color: theme.palette.secondary.contrastText,
+    },
+}));
+const ViewButtons = observer(function ViewButtons({ view, onClose, onMinimize, }) {
+    const { classes } = useStyles();
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "data-testid": "minimize_view", onClick: onMinimize, children: view.minimized ? (_jsx(AddIcon, { className: classes.icon, fontSize: "small" })) : (_jsx(MinimizeIcon, { className: classes.icon, fontSize: "small" })) }), _jsx(IconButton, { "data-testid": "close_view", onClick: onClose, children: _jsx(CloseIcon, { className: classes.icon, fontSize: "small" }) })] }));
+});
+export default ViewButtons;

package/esm/ui/App/ViewContainer.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import { useWidthSetter } from '@jbrowse/core/util';
+import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import { Paper, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import ViewHeader from './ViewHeader';
-import ViewWrapper from './ViewWrapper';
+import ViewHeader from "./ViewHeader.js";
+import ViewWrapper from "./ViewWrapper.js";
 const useStyles = makeStyles()(theme => ({
     viewContainer: {
         margin: theme.spacing(0.5),
@@ -19,14 +19,13 @@ const useStyles = makeStyles()(theme => ({
         background: theme.palette.secondary.dark,
     },
 }));
-const ViewContainer = observer(function ({ view, session, }) {
+const ViewContainer = observer(function ViewContainer({ view, session, }) {
     const theme = useTheme();
     const ref = useWidthSetter(view, theme.spacing(1));
-    const { classes, cx } = useStyles();
+    const { classes } = useStyles();
     useEffect(() => {
         function handleSelectView(e) {
-            var _a;
-            if (e.target instanceof Element && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            if (e.target instanceof Element && ref.current?.contains(e.target)) {
                 session.setFocusedViewId(view.id);
             }
         }
@@ -41,7 +40,7 @@ const ViewContainer = observer(function ({ view, session, }) {
         ? classes.focusedView
         : classes.unfocusedView;
     const viewContainerClassName = cx(classes.viewContainer, backgroundColorClassName);
-    return (_jsxs(Paper, { ref: ref, elevation: 12, className: viewContainerClassName, children: [_jsx(ViewHeader, { view: view, onClose: () => {
+    return (_jsxs(Paper, { ref: ref, elevation: 12, className: viewContainerClassName, "data-testid": `view-container-${view.id}`, children: [_jsx(ViewHeader, { view: view, onClose: () => {
                     session.removeView(view);
                 }, onMinimize: () => {
                     view.setMinimized(!view.minimized);

package/esm/ui/App/ViewContainerTitle.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import EditableTypography from '@jbrowse/core/ui/EditableTypography';
 import { getSession } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     input: {
         paddingBottom: 0,
@@ -22,12 +22,11 @@ const useStyles = makeStyles()(theme => ({
         backgroundColor: theme.palette.secondary.light,
     },
 }));
-const ViewContainerTitle = observer(function ({ view, }) {
-    var _a;
+const ViewContainerTitle = observer(function ViewContainerTitle({ view, }) {
     const { classes } = useStyles();
     const { assemblyManager } = getSession(view);
     return (_jsx(Tooltip, { title: "Rename view", arrow: true, children: _jsx(EditableTypography, { value: view.displayName ||
-                `${((_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.map(r => { var _a; return (_a = assemblyManager.get(r)) === null || _a === void 0 ? void 0 : _a.displayName; }).join(',')) || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => {
+                `${view.assemblyNames?.map(r => assemblyManager.get(r)?.displayName).join(',') || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => {
                 view.setDisplayName(val);
             }, variant: "body2", classes: {
                 input: classes.input,

package/esm/ui/App/ViewHeader.js

@@ -1,17 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
+import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import { isSessionWithMultipleViews } from '@jbrowse/product-core';
-import AddIcon from '@mui/icons-material/Add';
-import CloseIcon from '@mui/icons-material/Close';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import MinimizeIcon from '@mui/icons-material/Minimize';
-import { IconButton } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import ViewContainerTitle from './ViewContainerTitle';
-import ViewMenu from './ViewMenu';
+import ViewButtons from "./ViewButtons.js";
+import ViewContainerTitle from "./ViewContainerTitle.js";
+import ViewMenu from "./ViewMenu.js";
 const useStyles = makeStyles()(theme => ({
     icon: {
         color: theme.palette.secondary.contrastText,
@@ -24,19 +21,14 @@ const useStyles = makeStyles()(theme => ({
         height: VIEW_HEADER_HEIGHT,
         top: 0,
         zIndex: 900,
-        background: theme.palette.secondary.main,
     },
     viewTitle: {
         display: 'flex',
         alignItems: 'center',
     },
 }));
-const ViewButtons = observer(function ({ view, onClose, onMinimize, }) {
+const ViewHeader = observer(function ViewHeader({ view, onClose, onMinimize, className, }) {
     const { classes } = useStyles();
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "data-testid": "minimize_view", onClick: onMinimize, children: view.minimized ? (_jsx(AddIcon, { className: classes.icon, fontSize: "small" })) : (_jsx(MinimizeIcon, { className: classes.icon, fontSize: "small" })) }), _jsx(IconButton, { "data-testid": "close_view", onClick: onClose, children: _jsx(CloseIcon, { className: classes.icon, fontSize: "small" }) })] }));
-});
-const ViewHeader = observer(function ({ view, onClose, onMinimize, className, }) {
-    const { classes, cx } = useStyles();
     const scrollRef = useRef(null);
     const session = getSession(view);
     let stickyViewHeaders = false;
@@ -45,9 +37,8 @@ const ViewHeader = observer(function ({ view, onClose, onMinimize, className, })
         ({ stickyViewHeaders } = session);
     }
     useEffect(() => {
-        var _a;
         if (typeof jest === 'undefined') {
-            (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'center' });
+            scrollRef.current?.scrollIntoView({ block: 'center' });
         }
     }, []);
     return (_jsxs("div", { ref: scrollRef, className: cx(classes.viewHeader, className), style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(ViewMenu, { model: view, IconProps: { className: classes.icon } }), _jsx("div", { className: classes.grow }), _jsxs("div", { className: classes.viewTitle, children: [session.focusedViewId === view.id ? (_jsx(KeyboardArrowRightIcon, { className: classes.icon, fontSize: "small" })) : null, _jsx(ViewContainerTitle, { view: view })] }), _jsx("div", { className: classes.grow }), _jsx(ViewButtons, { onClose: onClose, onMinimize: onMinimize, view: view })] }));

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

@@ -5,7 +5,7 @@ type AppSession = SessionWithDrawerWidgets & {
     renameCurrentSession: (arg: string) => void;
     popSnackbarMessage: () => unknown;
 };
-declare const ViewLauncher: ({ session }: {
+declare const ViewLauncher: ({ session, }: {
     session: AppSession;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ViewLauncher;

package/esm/ui/App/ViewLauncher.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { getEnv } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Button, FormControl, MenuItem, Paper, Select, Typography, } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()(theme => ({
     selectPaper: {
         padding: theme.spacing(4),
@@ -12,12 +12,11 @@ const useStyles = makeStyles()(theme => ({
         margin: 2,
     },
 }));
-const ViewLauncher = observer(({ session }) => {
-    var _a;
+const ViewLauncher = observer(function ViewLauncher({ session, }) {
     const { classes } = useStyles();
     const { pluginManager } = getEnv(session);
     const viewTypes = pluginManager.getViewElements();
-    const [value, setValue] = useState(((_a = viewTypes[0]) === null || _a === void 0 ? void 0 : _a.name) || '');
+    const [value, setValue] = useState(viewTypes[0]?.name || '');
     return (_jsxs(Paper, { className: classes.selectPaper, children: [_jsx(Typography, { children: "Select a view to launch" }), _jsx(FormControl, { className: classes.m2, children: _jsx(Select, { value: value, onChange: event => {
                         setValue(event.target.value);
                     }, children: viewTypes

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

@@ -1,6 +1,6 @@
 import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
 import type { IconButtonProps as IconButtonPropsType, SvgIconProps } from '@mui/material';
-declare const ViewMenu: ({ model, IconButtonProps, IconProps, }: {
+declare const ViewMenu: ({ model, IconProps, }: {
     model: IBaseViewModel;
     IconButtonProps?: IconButtonPropsType;
     IconProps: SvgIconProps;

package/esm/ui/App/ViewMenu.js

@@ -1,69 +1,128 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import CascadingMenu from '@jbrowse/core/ui/CascadingMenu';
-import { bindPopover, bindTrigger, usePopupState } from '@jbrowse/core/ui/hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CascadingMenuButton } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
+import { getSnapshot } from '@jbrowse/mobx-state-tree';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
 import MenuIcon from '@mui/icons-material/Menu';
-import { IconButton } from '@mui/material';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
 import { observer } from 'mobx-react';
-const ViewMenu = observer(function ({ model, IconButtonProps, IconProps, }) {
+import { useDockview } from "./DockviewContext.js";
+import { renameIds } from "./copyView.js";
+import { isSessionWithDockviewLayout } from "../../DockviewLayout/index.js";
+function getPanelViewCount(session, viewId) {
+    if (!isSessionWithDockviewLayout(session)) {
+        return 0;
+    }
+    for (const viewIds of session.panelViewAssignments.values()) {
+        if (viewIds.includes(viewId)) {
+            return viewIds.length;
+        }
+    }
+    return 0;
+}
+const ViewMenu = observer(function ViewMenu({ model, IconProps, }) {
     const session = getSession(model);
-    const popupState = usePopupState({
-        variant: 'popover',
-    });
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { ...IconButtonProps, ...bindTrigger(popupState), "data-testid": "view_menu_icon", children: _jsx(MenuIcon, { ...IconProps, fontSize: "small" }) }), _jsx(CascadingMenu, { ...bindPopover(popupState), onMenuItemClick: (_event, callback) => {
-                    callback();
-                }, menuItems: [
-                    ...(session.views.length > 1
+    const { moveViewToNewTab, moveViewToSplitRight } = useDockview();
+    const usePanel = session.useWorkspaces && isSessionWithDockviewLayout(session);
+    const viewCount = usePanel
+        ? getPanelViewCount(session, model.id)
+        : session.views.length;
+    return (_jsx(CascadingMenuButton, { "data-testid": "view_menu_icon", menuItems: () => [
+            {
+                label: 'View options',
+                type: 'subMenu',
+                subMenu: [
+                    {
+                        label: 'Copy view',
+                        icon: ContentCopyIcon,
+                        onClick: () => {
+                            session.addView(model.type, renameIds(structuredClone(getSnapshot(model))));
+                        },
+                    },
+                    {
+                        label: 'Move to new tab',
+                        icon: OpenInNewIcon,
+                        onClick: () => {
+                            moveViewToNewTab(model.id);
+                            session.setUseWorkspaces(true);
+                        },
+                    },
+                    {
+                        label: 'Move to split view (right side of screen)',
+                        icon: VerticalSplitIcon,
+                        onClick: () => {
+                            moveViewToSplitRight(model.id);
+                            session.setUseWorkspaces(true);
+                        },
+                    },
+                    ...(viewCount > 2
                         ? [
                             {
-                                label: 'View order',
-                                type: 'subMenu',
-                                subMenu: [
-                                    ...(session.views.length > 2
-                                        ? [
-                                            {
-                                                label: 'Move view to top',
-                                                icon: KeyboardDoubleArrowUpIcon,
-                                                onClick: () => {
-                                                    session.moveViewToTop(model.id);
-                                                },
-                                            },
-                                        ]
-                                        : []),
-                                    {
-                                        label: 'Move view up',
-                                        icon: KeyboardArrowUpIcon,
-                                        onClick: () => {
-                                            session.moveViewUp(model.id);
-                                        },
-                                    },
-                                    {
-                                        label: 'Move view down',
-                                        icon: KeyboardArrowDownIcon,
-                                        onClick: () => {
-                                            session.moveViewDown(model.id);
-                                        },
-                                    },
-                                    ...(session.views.length > 2
-                                        ? [
-                                            {
-                                                label: 'Move view to bottom',
-                                                icon: KeyboardDoubleArrowDownIcon,
-                                                onClick: () => {
-                                                    session.moveViewToBottom(model.id);
-                                                },
-                                            },
-                                        ]
-                                        : []),
-                                ],
+                                label: 'Move view to top',
+                                icon: KeyboardDoubleArrowUpIcon,
+                                onClick: () => {
+                                    if (usePanel) {
+                                        session.moveViewToTopInPanel(model.id);
+                                    }
+                                    else {
+                                        session.moveViewToTop(model.id);
+                                    }
+                                },
                             },
                         ]
                         : []),
-                    ...model.menuItems(),
-                ], popupState: popupState })] }));
+                    ...(viewCount > 1
+                        ? [
+                            {
+                                label: 'Move view up',
+                                icon: KeyboardArrowUpIcon,
+                                onClick: () => {
+                                    if (usePanel) {
+                                        session.moveViewUpInPanel(model.id);
+                                    }
+                                    else {
+                                        session.moveViewUp(model.id);
+                                    }
+                                },
+                            },
+                            {
+                                label: 'Move view down',
+                                icon: KeyboardArrowDownIcon,
+                                onClick: () => {
+                                    if (usePanel) {
+                                        session.moveViewDownInPanel(model.id);
+                                    }
+                                    else {
+                                        session.moveViewDown(model.id);
+                                    }
+                                },
+                            },
+                        ]
+                        : []),
+                    ...(viewCount > 2
+                        ? [
+                            {
+                                label: 'Move view to bottom',
+                                icon: KeyboardDoubleArrowDownIcon,
+                                onClick: () => {
+                                    if (usePanel) {
+                                        session.moveViewToBottomInPanel(model.id);
+                                    }
+                                    else {
+                                        session.moveViewToBottom(model.id);
+                                    }
+                                },
+                            },
+                        ]
+                        : []),
+                ],
+            },
+            ...model.menuItems(),
+        ], children: _jsx(MenuIcon, { ...IconProps, fontSize: "small" }) }));
 });
 export default ViewMenu;

package/esm/ui/App/ViewWrapper.js

@@ -3,7 +3,7 @@ import { Suspense } from 'react';
 import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses';
 import { getEnv } from '@jbrowse/core/util';
 import { observer } from 'mobx-react';
-const ViewWrapper = observer(function ({ view, session, }) {
+const ViewWrapper = observer(function ViewWrapper({ view, session, }) {
     const { pluginManager } = getEnv(session);
     const viewType = pluginManager.getViewType(view.type);
     if (!viewType) {

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

@@ -1,8 +1,8 @@
 import type { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
-import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
+import type { AbstractViewContainer, SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
 interface Props {
     HeaderButtons?: React.ReactElement;
-    session: SessionWithFocusedViewAndDrawerWidgets & {
+    session: SessionWithFocusedViewAndDrawerWidgets & AbstractViewContainer & {
         renameCurrentSession: (arg: string) => void;
         snackbarMessages: SnackbarMessage[];
         popSnackbarMessage: () => unknown;