@jbrowse/app-core 5.0.0-beta.11 → 5.0.0-beta.14

package/esm/WorkspaceLayout/usePointerGesture.js

@@ -0,0 +1,83 @@
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+/**
+ * One pointer drag, owning the rules every gesture here needs: the primary
+ * button of the primary pointer starts it, one `pointerId` steers it, capture
+ * routes it, and a cancel, a lost capture or (opted in) Escape abandons it.
+ * The handlers are identity-stable, so they can sit in memoised chrome.
+ */
+export function usePointerGesture(gesture) {
+    const gestureRef = useRef(gesture);
+    useLayoutEffect(() => {
+        gestureRef.current = gesture;
+    });
+    const activeRef = useRef(undefined);
+    const handlers = useMemo(() => {
+        function finish(completed) {
+            const active = activeRef.current;
+            if (!active) {
+                return;
+            }
+            activeRef.current = undefined;
+            window.removeEventListener('keydown', onKeyDown);
+            if (active.element.hasPointerCapture(active.pointerId)) {
+                active.element.releasePointerCapture(active.pointerId);
+            }
+            gestureRef.current.end?.(active.state, completed);
+        }
+        function onKeyDown(event) {
+            if (event.key === 'Escape') {
+                finish(false);
+            }
+        }
+        function owns(event) {
+            return activeRef.current?.pointerId === event.pointerId;
+        }
+        return {
+            onPointerDown(event) {
+                if (event.button !== 0 || !event.isPrimary) {
+                    return;
+                }
+                finish(false);
+                const state = gestureRef.current.start(event);
+                if (state === undefined) {
+                    return;
+                }
+                activeRef.current = {
+                    pointerId: event.pointerId,
+                    element: event.currentTarget,
+                    state,
+                };
+                event.currentTarget.setPointerCapture(event.pointerId);
+                if (gestureRef.current.escapeCancels) {
+                    window.addEventListener('keydown', onKeyDown);
+                }
+            },
+            onPointerMove(event) {
+                const active = activeRef.current;
+                if (active && owns(event)) {
+                    gestureRef.current.move(active.state, event);
+                }
+            },
+            onPointerUp(event) {
+                if (owns(event)) {
+                    finish(true);
+                }
+            },
+            onPointerCancel(event) {
+                if (owns(event)) {
+                    finish(false);
+                }
+            },
+            onLostPointerCapture(event) {
+                if (owns(event)) {
+                    finish(false);
+                }
+            },
+            cancel() {
+                finish(false);
+            },
+        };
+    }, []);
+    useEffect(() => handlers.cancel, [handlers]);
+    return handlers;
+}

package/esm/WorkspaceLayout/workspaceTheme.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The workspace chrome: tab strips, splitters and drop indicators.
+ *
+ * Fixed and dark in every JBrowse theme, the way the app bar is, so the frame
+ * never reads as content. The cell body is not chrome and follows
+ * `theme.palette.background.default` in `PanelView`.
+ */
+export declare const workspaceTheme: {
+    readonly stripBackground: '#252526';
+    readonly stripHeight: 35;
+    readonly stripFontSize: 13;
+    readonly tabDivider: '#1e1e1e';
+    readonly selectedTabBackground: '#1e1e1e';
+    readonly tabBackground: '#2d2d2d';
+    readonly iconHoverBackground: 'rgba(90, 93, 94, 0.31)';
+    readonly splitterLine: 'rgb(68, 68, 68)';
+    /** grab area; the line drawn inside it is 1px */
+    readonly splitterSize: 4;
+    readonly dropWash: 'rgba(83, 89, 93, 0.5)';
+    readonly accent: 'rgba(56, 139, 253, 0.9)';
+};
+export declare function tabColors(cellActive: boolean, selected: boolean): {
+    background: "#1e1e1e" | "#2d2d2d";
+    color: string;
+};
+/** the panel actions' icons, which sit on the strip beside unselected tabs */
+export declare const stripIconColor: string;

package/esm/WorkspaceLayout/workspaceTheme.js

@@ -0,0 +1,37 @@
+/**
+ * The workspace chrome: tab strips, splitters and drop indicators.
+ *
+ * Fixed and dark in every JBrowse theme, the way the app bar is, so the frame
+ * never reads as content. The cell body is not chrome and follows
+ * `theme.palette.background.default` in `PanelView`.
+ */
+export const workspaceTheme = {
+    stripBackground: '#252526',
+    stripHeight: 35,
+    stripFontSize: 13,
+    tabDivider: '#1e1e1e',
+    selectedTabBackground: '#1e1e1e',
+    tabBackground: '#2d2d2d',
+    iconHoverBackground: 'rgba(90, 93, 94, 0.31)',
+    splitterLine: 'rgb(68, 68, 68)',
+    /** grab area; the line drawn inside it is 1px */
+    splitterSize: 4,
+    dropWash: 'rgba(83, 89, 93, 0.5)',
+    accent: 'rgba(56, 139, 253, 0.9)',
+};
+// the active cell's selected tab is the one fully white label on screen
+const tabTextColors = {
+    activeCell: { selected: 'white', other: '#969696' },
+    otherCell: { selected: '#8f8f8f', other: '#626262' },
+};
+export function tabColors(cellActive, selected) {
+    const text = cellActive ? tabTextColors.activeCell : tabTextColors.otherCell;
+    return {
+        background: selected
+            ? workspaceTheme.selectedTabBackground
+            : workspaceTheme.tabBackground,
+        color: selected ? text.selected : text.other,
+    };
+}
+/** the panel actions' icons, which sit on the strip beside unselected tabs */
+export const stripIconColor = tabTextColors.activeCell.other;

package/esm/index.d.ts

@@ -8,11 +8,13 @@ export type { AppRootModel } from './AppSession/index.ts';
 export { RootAppMenuMixin } from './RootMenu/index.ts';
 export { WorkspaceLayoutMixin, isSessionWithWorkspaceLayout, } from './WorkspaceLayout/index.ts';
 export type { WorkspaceLayoutMixinType, WorkspaceLayout, LayoutTree, PanelNode, TabNode, LayoutSpecNode, PendingMove, TileMode, TabHome, } from './WorkspaceLayout/index.ts';
-export { addSessionTracks, buildLgvInit, buildLgvInitFromParams, hubConnectionSpec, loadSessionSpec, parseSessionSpecUrl, readHubUrlParam, readNavParam, readTracklistParam, shortHubLabel, splitHighlights, } from './SessionSpec/index.ts';
-export type { LayoutNode, LgvUrlInit, ParsedSessionSpec, ViewSpec, } from './SessionSpec/index.ts';
+export { addSessionTracks, buildLgvInit, buildLgvInitFromParams, hubConnectionSpec, loadSessionSpec, parseSessionSnapshotUrl, parseSessionSpecUrl, readHubUrlParam, readNavParam, readTracklistParam, shortHubLabel, splitHighlights, } from './SessionSpec/index.ts';
+export type { LayoutNode, LgvUrlInit, ParsedSessionSnapshotUrl, ParsedSessionSpec, ViewSpec, } from './SessionSpec/index.ts';
 export type { SessionModelFactory } from './sessionModelFactory.ts';
-export { deleteQueryParams, readAllQueryParams, readQueryParams, setQueryParams, useQueryParam, } from './queryParams.ts';
+export { deleteQueryParams, queryParamsHref, readAllQueryParams, readQueryParams, setQueryParams, useQueryParam, } from './queryParams.ts';
 export { processMutableMenuActions, resolveMenus } from './menus.ts';
+export { formatSessionSummary, summarizeSession } from './sessionSummary.ts';
+export type { SessionSummary } from './sessionSummary.ts';
 export type { Menu, MenuAction } from './menus.ts';
 export { createJbApi, ensureReExports, safeJson, sessionOf, undeliveredNotifications, waitReady, } from './JbApi/index.ts';
 export type { JbApi } from './JbApi/index.ts';

package/esm/index.js

@@ -6,11 +6,12 @@ export { AssembliesMixin } from './Assemblies/index.js';
 export { AppSessionMixin } from './AppSession/index.js';
 export { RootAppMenuMixin } from './RootMenu/index.js';
 export { WorkspaceLayoutMixin, isSessionWithWorkspaceLayout, } from './WorkspaceLayout/index.js';
-export { addSessionTracks, buildLgvInit, buildLgvInitFromParams, hubConnectionSpec, loadSessionSpec, parseSessionSpecUrl, readHubUrlParam, readNavParam, readTracklistParam, shortHubLabel, splitHighlights, } from './SessionSpec/index.js';
+export { addSessionTracks, buildLgvInit, buildLgvInitFromParams, hubConnectionSpec, loadSessionSpec, parseSessionSnapshotUrl, parseSessionSpecUrl, readHubUrlParam, readNavParam, readTracklistParam, shortHubLabel, splitHighlights, } from './SessionSpec/index.js';
 // URL params, for the two products that own their page (web, desktop). An
 // embedded product must not rewrite its host's URL — see queryParams.ts
-export { deleteQueryParams, readAllQueryParams, readQueryParams, setQueryParams, useQueryParam, } from './queryParams.js';
+export { deleteQueryParams, queryParamsHref, readAllQueryParams, readQueryParams, setQueryParams, useQueryParam, } from './queryParams.js';
 export { processMutableMenuActions, resolveMenus } from './menus.js';
+export { formatSessionSummary, summarizeSession } from './sessionSummary.js';
 // The helper library an agent drives the app through: desktop serves it to
 // run_javascript over MCP, web hands it to the page as window.jb
 export { createJbApi, ensureReExports, safeJson, sessionOf, undeliveredNotifications, waitReady, } from './JbApi/index.js';

package/esm/queryParams.d.ts

@@ -2,6 +2,8 @@ export declare function readQueryParams<T extends string>(keys: T[]): Record<T,
 export declare function readAllQueryParams(url?: URL | Location): URLSearchParams;
 export declare function deleteQueryParams(keys: readonly string[]): void;
 export declare function setQueryParams(values: Record<string, string | undefined>): void;
+/** The page's own URL with `values` applied, for a link to another state. */
+export declare function queryParamsHref(values: Record<string, string | undefined>): string;
 /**
  * Read one param and keep re-rendering as it changes, including across the
  * `replaceState` writes above, which fire no event of their own.

package/esm/queryParams.js

@@ -23,7 +23,7 @@ function subscribe(callback) {
 }
 // Writes params back into `loc`, leaving the other URL component untouched — the
 // URL hash/search setters each replace only their own component.
-function writeParams(loc, params) {
+function urlWith(loc, params) {
     const url = new URL(window.location.href);
     const str = params.toString();
     if (loc === 'hash') {
@@ -32,7 +32,10 @@ function writeParams(loc, params) {
     else {
         url.search = str;
     }
-    window.history.replaceState(null, '', url.href);
+    return url.href;
+}
+function writeParams(loc, params) {
+    window.history.replaceState(null, '', urlWith(loc, params));
     // Copied, which this note has claimed while the loop read the live set. A
     // listener is React's store-change callback, and React may flush the re-render
     // synchronously inside it, so the set can be mutated mid-notify: an unmounted
@@ -67,8 +70,7 @@ export function deleteQueryParams(keys) {
     }
     writeParams(loc, params);
 }
-export function setQueryParams(values) {
-    const loc = paramLocation();
+function paramsWith(loc, values) {
     const params = readParams(loc);
     for (const [key, value] of Object.entries(values)) {
         if (value === undefined) {
@@ -78,7 +80,16 @@ export function setQueryParams(values) {
             params.set(key, value);
         }
     }
-    writeParams(loc, params);
+    return params;
+}
+export function setQueryParams(values) {
+    const loc = paramLocation();
+    writeParams(loc, paramsWith(loc, values));
+}
+/** The page's own URL with `values` applied, for a link to another state. */
+export function queryParamsHref(values) {
+    const loc = paramLocation();
+    return urlWith(loc, paramsWith(loc, values));
 }
 /**
  * Read one param and keep re-rendering as it changes, including across the

package/esm/sessionSummary.d.ts

@@ -0,0 +1,16 @@
+/**
+ * What a saved session holds, for telling saved sessions apart in a recent
+ * list without opening them. Read off the snapshot rather than a live model,
+ * so it can be taken wherever the snapshot is written.
+ */
+export interface SessionSummary {
+    assemblies: string[];
+    views: number;
+    tracks: number;
+}
+/**
+ * Walks every view, including the subviews a comparative view nests, so a
+ * synteny view's assemblies and tracks count the same as two plain views'.
+ */
+export declare function summarizeSession(snap: unknown): SessionSummary;
+export declare function formatSessionSummary({ assemblies, views, tracks, }: SessionSummary): string;

package/esm/sessionSummary.js

@@ -0,0 +1,57 @@
+function isRecord(x) {
+    return typeof x === 'object' && x !== null;
+}
+/**
+ * Walks every view, including the subviews a comparative view nests, so a
+ * synteny view's assemblies and tracks count the same as two plain views'.
+ */
+export function summarizeSession(snap) {
+    const assemblies = new Set();
+    let tracks = 0;
+    const visit = (node) => {
+        if (Array.isArray(node)) {
+            for (const child of node) {
+                visit(child);
+            }
+        }
+        else if (isRecord(node)) {
+            for (const [key, value] of Object.entries(node)) {
+                if (key === 'assemblyName' && typeof value === 'string') {
+                    assemblies.add(value);
+                }
+                else if (key === 'assemblyNames' && Array.isArray(value)) {
+                    for (const name of value) {
+                        if (typeof name === 'string') {
+                            assemblies.add(name);
+                        }
+                    }
+                }
+                else if (key === 'tracks' && Array.isArray(value)) {
+                    tracks += value.length;
+                }
+                else {
+                    visit(value);
+                }
+            }
+        }
+    };
+    const views = isRecord(snap) && Array.isArray(snap.views) ? snap.views : [];
+    visit(views);
+    return { assemblies: [...assemblies], views: views.length, tracks };
+}
+function plural(n, word) {
+    return `${n} ${word}${n === 1 ? '' : 's'}`;
+}
+export function formatSessionSummary({ assemblies, views, tracks, }) {
+    const shown = assemblies.slice(0, 2).join(', ');
+    const more = assemblies.length - 2;
+    return views
+        ? [
+            more > 0 ? `${shown} +${more} more` : shown,
+            plural(views, 'view'),
+            tracks ? plural(tracks, 'track') : '',
+        ]
+            .filter(Boolean)
+            .join(' · ')
+        : 'No views';
+}

package/esm/ui/App/App.js

@@ -38,6 +38,9 @@ const useStyles = makeStyles()(theme => ({
     appBar: {
         flexGrow: 1,
         gridRow: 'menubar',
+        // above the workspace, whose cells paint a background its shadow falls on
+        position: 'relative',
+        zIndex: 1,
     },
 }));
 const App = observer(function App(props) {

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

@@ -1,4 +1,5 @@
-export default function DrawerHeaderHelpDialog({ onClose, helpText, }: {
+declare const DrawerHeaderHelpDialog: ({ onClose, helpText, }: {
     onClose: () => void;
     helpText: React.ReactNode;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default DrawerHeaderHelpDialog;

package/esm/ui/App/DrawerHeaderHelpDialog.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import InfoDialog from '@jbrowse/core/ui/InfoDialog';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { observer } from 'mobx-react';
 const useStyles = makeStyles()({
     max: {
         minWidth: '40em',
     },
 });
-export default function DrawerHeaderHelpDialog({ onClose, helpText, }) {
+const DrawerHeaderHelpDialog = observer(function DrawerHeaderHelpDialog({ onClose, helpText, }) {
     const { classes } = useStyles();
     return (_jsx(InfoDialog, { open: true, onClose: onClose, title: "Help", maxWidth: "xl", onClick: e => {
             e.stopPropagation();
         }, children: _jsx("div", { className: classes.max, children: helpText }) }));
-}
+});
+export default DrawerHeaderHelpDialog;

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

@@ -1,4 +1,5 @@
-export default function JBrowseTabMenu({ onRename, onClose, }: {
+declare const JBrowseTabMenu: ({ onRename, onClose, }: {
     onRename: () => void;
     onClose: () => void;
-}): import("react").JSX.Element;
+}) => import("react").JSX.Element;
+export default JBrowseTabMenu;

package/esm/ui/App/JBrowseTabMenu.js

@@ -5,6 +5,7 @@ import { makeStyles } from '@jbrowse/core/util/tss-react';
 import CloseIcon from '@mui/icons-material/Close';
 import EditIcon from '@mui/icons-material/Edit';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { observer } from 'mobx-react';
 const useStyles = makeStyles()({
     // hidden until the tab is hovered or focused, by a rule in `TabStrip` keyed
     // on the `jbrowse-tab-menu` class — hence the plain class name beside the
@@ -30,7 +31,7 @@ const useStyles = makeStyles()({
         fontSize: 14,
     },
 });
-export default function JBrowseTabMenu({ onRename, onClose, }) {
+const JBrowseTabMenu = observer(function JBrowseTabMenu({ onRename, onClose, }) {
     const { classes, cx } = useStyles();
     const [open, setOpen] = useState(false);
     return (_jsx("div", { className: cx('jbrowse-tab-menu', classes.tabIcons, open && classes.open), 
@@ -54,5 +55,6 @@ export default function JBrowseTabMenu({ onRename, onClose, }) {
                     icon: CloseIcon,
                     onClick: onClose,
                 },
-            ], size: "small", className: classes.tabIcon, setOpen: setOpen, stopPropagation: true, children: _jsx(MoreVertIcon, { className: classes.smallIcon }) }) }));
-}
+            ], tooltip: "Tab menu", size: "small", className: classes.tabIcon, setOpen: setOpen, stopPropagation: true, children: _jsx(MoreVertIcon, { className: classes.smallIcon }) }) }));
+});
+export default JBrowseTabMenu;

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

@@ -1,10 +1,9 @@
 import type { ThemeSwitchSession } from './types.ts';
 /**
- * A light/dark switch for a session that follows the OS, showing the mode
- * drawn. A click holds the other mode, a second click follows the OS again. A
- * session on an explicit light or dark gets nothing, which is every session
- * that has not asked for this in Preferences, so a light reader is offered no
- * route into dark.
+ * A light/dark switch for a session that follows the OS or sits on dark,
+ * showing the mode drawn. A click holds the other mode, a second click returns
+ * to the setting. A session on an explicit light gets nothing, so a reader who
+ * never asked for dark is offered no route into it.
  */
 declare const ThemeModeButton: ({ session, }: {
     session: ThemeSwitchSession;

package/esm/ui/App/ThemeModeButton.js

@@ -4,29 +4,37 @@ import LightModeIcon from '@mui/icons-material/LightMode';
 import { IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
 /**
- * A light/dark switch for a session that follows the OS, showing the mode
- * drawn. A click holds the other mode, a second click follows the OS again. A
- * session on an explicit light or dark gets nothing, which is every session
- * that has not asked for this in Preferences, so a light reader is offered no
- * route into dark.
+ * A light/dark switch for a session that follows the OS or sits on dark,
+ * showing the mode drawn. A click holds the other mode, a second click returns
+ * to the setting. A session on an explicit light gets nothing, so a reader who
+ * never asked for dark is offered no route into it.
  */
 const ThemeModeButton = observer(function ThemeModeButton({ session, }) {
     const dark = session.themeIsDark;
     const drawnMode = dark ? 'dark' : 'light';
-    // A palette pinned to its own mode draws dark whatever the OS says, so the
-    // two disagree and the system is steering nothing to report. Everything else
-    // that hides this control is `themeMode`.
-    const followsSystem = session.themeMode === 'system' && drawnMode === session.effectiveThemeMode;
-    if (!followsSystem) {
+    // A palette pinned to its own mode, or Dark Reader, draws dark whatever the
+    // OS says, so a click here would change nothing.
+    const switchable = session.themeMode !== 'light' &&
+        !session.darkReaderDark &&
+        drawnMode === session.effectiveThemeMode;
+    if (!switchable) {
         return null;
     }
     const held = session.systemThemeOverride;
     const otherMode = dark ? 'light' : 'dark';
     const Icon = dark ? DarkModeIcon : LightModeIcon;
-    const label = held
-        ? `${dark ? 'Dark' : 'Light'} until your system theme changes`
-        : `Following your system theme (${drawnMode})`;
-    const action = held ? `to follow it (${otherMode})` : `for ${otherMode}`;
+    const system = session.themeMode === 'system';
+    const modeName = dark ? 'Dark' : 'Light';
+    const label = system
+        ? held
+            ? `${modeName} until your system theme changes`
+            : `Following your system theme (${drawnMode})`
+        : held
+            ? `${modeName} instead of your dark setting`
+            : modeName;
+    const action = held
+        ? `to ${system ? 'follow it' : 'return'} (${otherMode})`
+        : `for ${otherMode}`;
     return (_jsx(Tooltip, { title: `${label}. Click ${action}.`, arrow: true, children: _jsx(IconButton, { "data-testid": "theme-mode-button", "aria-label": label, color: "inherit", size: "small", onClick: () => {
                 session.setSystemThemeOverride(held ? undefined : otherMode);
             }, children: _jsx(Icon, { fontSize: "small" }) }) }));

package/esm/ui/App/ViewContainer.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
+import LoadingEllipses from '@jbrowse/core/ui/LoadingEllipses';
 import { useFocusOnInteraction, useWidthSetter } from '@jbrowse/core/util/hooks';
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import { isAlive } from '@jbrowse/mobx-state-tree';
@@ -47,6 +48,11 @@ function viewPhase(view) {
         : 'ready';
 }
 const useStyles = makeStyles()(theme => ({
+    // ViewLoadingScreen's label and place, which the body shows once mounted
+    pending: {
+        paddingTop: 20,
+        textAlign: 'center',
+    },
     viewContainer: {
         margin: theme.spacing(0.5),
         padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
@@ -148,6 +154,6 @@ const ViewContainer = observer(function ViewContainer({ view, session, scrollOnM
         // landmark list, so "jump to the second view" stops being a Tab count.
         role: "region", "aria-label": viewTitle(view, r => assemblyManager.getDisplayName(r)), "data-testid": `view-container-${view.id}`, "data-view-phase": viewPhase(view), children: [_jsx(ViewHeader, { view: view, className: backgroundColorClassName, scrollOnMount: scrollOnMount }), _jsx(Paper, { elevation: 0, children: _jsx("div", { ref: bodyRef, style: reserveSpace
                         ? { height: measuredHeight ?? viewHeight(view) }
-                        : undefined, children: showBody ? _jsx(ViewWrapper, { view: view, session: session }) : null }) })] }));
+                        : undefined, children: showBody ? (_jsx(ViewWrapper, { view: view, session: session })) : reserveSpace && measuredHeight === undefined ? (_jsx(LoadingEllipses, { variant: "h6", busy: false, className: classes.pending })) : null }) })] }));
 });
 export default ViewContainer;

package/esm/ui/App/ViewMenu.js

@@ -4,18 +4,19 @@ import { getSession } from '@jbrowse/core/util';
 import { renameIds } from '@jbrowse/core/util/types/mst';
 import { getSnapshot } from '@jbrowse/mobx-state-tree';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import HorizontalSplitIcon from '@mui/icons-material/HorizontalSplit';
 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 OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import TabIcon from '@mui/icons-material/Tab';
 import VerticalSplitIcon from '@mui/icons-material/VerticalSplit';
 import { observer } from 'mobx-react';
-// takes the icon's class, not an SvgIconProps object: the object was built
-// inline by ViewHeader and so was new on each of its renders, which defeated
-// mobx-react's memo for this whole menu (a Tooltip and an IconButton) every
-// time anything re-rendered the header
+import { tabDisplayName } from '../../WorkspaceLayout/tabName.js';
+// takes a class string rather than an SvgIconProps object, which a caller
+// builds inline and so defeats this observer's memo
 const ViewMenu = observer(function ViewMenu({ model, className, }) {
     const session = getSession(model);
     const moves = {
@@ -24,36 +25,32 @@ const ViewMenu = observer(function ViewMenu({ model, className, }) {
         down: session.moveViewDown,
         bottom: session.moveViewToBottom,
     };
-    // Give this view a home of its own: its own tab beside the rest, or its own
-    // split to their right. One path, whether or not the workspace is already up
-    // — the layout is session state either way, so there is nothing to defer and
-    // no second implementation for "the panels do not exist yet". That fork is
-    // the reason `init` existed.
-    const moveViewOut = (direction) => {
-        const allViewIds = session.views.map(v => v.id);
-        if (direction === 'tabs') {
-            session.moveViewToNewTab(model.id, allViewIds);
+    const moveViewOut = (to) => {
+        if (to === 'tab') {
+            session.moveViewToNewTab(model.id);
         }
         else {
-            session.moveViewToSplitRight(model.id, allViewIds);
+            session.moveViewToSplit(model.id, to);
         }
-        session.setUseWorkspaces(true);
+    };
+    // views render in `session.views` order within a tab, so a view joining one
+    // goes to its bottom rather than wherever its old slot falls
+    const moveViewToTab = (tabId) => {
+        const members = session.findTab(tabId)?.tab.viewIds ?? [];
+        session.moveViewToTab(model.id, tabId);
+        session.moveViewToBottom(model.id, [...members, model.id]);
     };
     return (_jsx(CascadingMenuButton, { "data-testid": "view_menu_icon", tooltip: "View menu", menuItems: () => {
-            // The views this move is relative to: in a workspace, the ones sharing
-            // this view's panel; in the classic stack, all of them. `session.views`
-            // is the order either way, so the mode decides the SCOPE of a move and
-            // nothing else. There is one implementation of "move a view" again.
-            //
-            // Resolved here rather than during render. It scans every panel's
-            // assignment list and copies one of them, and reading those lists in
-            // render would also subscribe this menu to them, so a view moving
-            // between panels anywhere re-rendered every view's menu. None of it is
-            // needed until the menu opens.
-            const scopeIds = session.effectiveUseWorkspaces
-                ? session.tabContainingView(model.id)?.tab.viewIds.slice()
-                : undefined;
+            // A move's scope is this view's tab. Read on open rather than in
+            // render, so the menu does not observe every tab's membership.
+            const home = session.tabContainingView(model.id);
+            const scopeIds = home?.tab.viewIds.slice();
+            const otherTabs = home
+                ? session.tabs.filter(t => t.id !== home.tab.id)
+                : [];
             const viewCount = scopeIds?.length ?? session.views.length;
+            const aloneInTab = viewCount <= 1;
+            const aloneInCell = aloneInTab && (home?.panel.tabs.length ?? 1) <= 1;
             return [
                 {
                     label: 'View options',
@@ -66,20 +63,50 @@ const ViewMenu = observer(function ViewMenu({ model, className, }) {
                                 session.addView(model.type, renameIds(getSnapshot(model)));
                             },
                         },
-                        {
-                            label: 'Move to new tab',
-                            icon: OpenInNewIcon,
-                            onClick: () => {
-                                moveViewOut('tabs');
-                            },
-                        },
-                        {
-                            label: 'Move to split view (right side of screen)',
-                            icon: VerticalSplitIcon,
-                            onClick: () => {
-                                moveViewOut('horizontal');
-                            },
-                        },
+                        ...(aloneInTab
+                            ? []
+                            : [
+                                {
+                                    label: 'Move to new tab',
+                                    icon: OpenInNewIcon,
+                                    onClick: () => {
+                                        moveViewOut('tab');
+                                    },
+                                },
+                            ]),
+                        ...(otherTabs.length > 0
+                            ? [
+                                {
+                                    label: 'Move to tab',
+                                    icon: TabIcon,
+                                    type: 'subMenu',
+                                    subMenu: otherTabs.map(tab => ({
+                                        label: tabDisplayName(tab, session.views.filter(v => tab.viewIds.includes(v.id)), session),
+                                        onClick: () => {
+                                            moveViewToTab(tab.id);
+                                        },
+                                    })),
+                                },
+                            ]
+                            : []),
+                        ...(aloneInCell
+                            ? []
+                            : [
+                                {
+                                    label: 'Move to split view (right)',
+                                    icon: VerticalSplitIcon,
+                                    onClick: () => {
+                                        moveViewOut('row');
+                                    },
+                                },
+                                {
+                                    label: 'Move to split view (below)',
+                                    icon: HorizontalSplitIcon,
+                                    onClick: () => {
+                                        moveViewOut('column');
+                                    },
+                                },
+                            ]),
                         // 'top'/'bottom' only mean something with a view above *and* below
                         ...[
                             ['top', 'Move view to top', KeyboardDoubleArrowUpIcon, 2],