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

package/esm/WorkspaceLayout/model.js

@@ -1,20 +1,11 @@
 import { createElementId } from '@jbrowse/core/util/types/mst';
-import { cast, getSnapshot, types } from '@jbrowse/mobx-state-tree';
+import { addDisposer, cast, getSnapshot, types } from '@jbrowse/mobx-state-tree';
+import { autorun } from 'mobx';
 import { resolveLayoutSpec, tileLayoutSpec, treeFromSpec, viewIdsInSpec, } from './spec.js';
-import { activeTabIn, addTab, addViewToTab, findTab, homeViews, moveTabToPanel, normalize, panelContainingView, panels, pruneEmptyPanel, pruneEmptyTabIn, removePanel, removeTab, removeView, renameTab, setActiveTab, setSizes, splitPanel, tabContainingView, tabs, } from './tree.js';
+import { addTab, addViewToTab, findTab, homeViews, moveTabToPanel, normalize, panelContainingView, panels, pruneEmptyPanel, pruneEmptyTab, removePanel, removeTab, removeView, renameTab, setActiveTab, setSizes, splitPanel, tabContainingView, tabs, } from './tree.js';
 function sessionViewIds(self) {
     return self.views?.map(v => v.id);
 }
-/**
- * A caller's view list narrowed to the session's views, deduplicated. The list
- * may be stale, and `applyLayoutSpec` throws on an unknown or repeated id.
- */
-function liveViewIds(self, allViewIds) {
-    const live = sessionViewIds(self);
-    return [
-        ...new Set(live ? allViewIds.filter(id => live.includes(id)) : allViewIds),
-    ];
-}
 /**
  * #stateModel WorkspaceLayoutMixin
  *
@@ -104,16 +95,6 @@ export function WorkspaceLayoutMixin() {
         panelContainingView(viewId) {
             return panelContainingView(self.tree, viewId);
         },
-        /** The views a tab renders: its members, in `session.views` order. */
-        viewIdsForTab(tabId, order) {
-            const members = new Set(findTab(self.tree, tabId)?.tab.viewIds ?? []);
-            return order.filter(id => members.has(id));
-        },
-        /** The tab a panel is showing, or its first. */
-        activeTabOf(panelId) {
-            const panel = panels(self.tree).find(p => p.id === panelId);
-            return panel ? activeTabIn(panel) : undefined;
-        },
         /**
          * The maximized cell alone, or the whole tree. The cell is resized to 1
          * because CSS hands out free space by grow factor only up to a total of
@@ -161,33 +142,21 @@ export function WorkspaceLayoutMixin() {
         function home(tree, viewIds) {
             return homeViews(tree, viewIds, self.activePanelId, () => nextId('tab'));
         }
-        function everyViewId(action, allViewIds) {
-            const ids = allViewIds ?? sessionViewIds(self);
-            if (!ids) {
-                throw new Error(`${action}(viewId, allViewIds): allViewIds is every view id in the session, and this session has no view list to default it from`);
-            }
-            return ids;
-        }
         /**
-         * Homes every view first, since from the classic stack none has a tab
-         * yet. Returns where the view came from, or `undefined` if it is not in
-         * the session, in which case nothing is applied.
+         * Homes every view first: the homing autorun waits for the outermost
+         * action, so a view added in the same action has no tab yet. Returns
+         * where the view came from, or `undefined` if it is not in the
+         * session, in which case nothing is applied.
          */
-        function rehomeView(viewId, allViewIds, place) {
-            const tree = home(self.tree, allViewIds);
+        function rehomeView(viewId, place) {
+            const ids = sessionViewIds(self);
+            const tree = ids ? home(self.tree, ids) : self.tree;
             const from = tabContainingView(tree, viewId);
             if (!from) {
                 return undefined;
             }
             const placed = place(removeView(tree, viewId), from);
-            const pruned = pruneEmptyTabIn(placed, from.panel.id, from.tab.id);
-            const source = panels(pruned).find(p => p.id === from.panel.id);
-            const emptiedCell = source?.tabs.length === 1 &&
-                source.tabs[0].id === from.tab.id &&
-                source.tabs[0].viewIds.length === 0;
-            apply(emptiedCell
-                ? pruneEmptyPanel(removeTab(pruned, from.tab.id), from.panel.id)
-                : pruned);
+            apply(pruneEmptyPanel(pruneEmptyTab(placed, from.tab.id), from.panel.id));
             return from;
         }
         /**
@@ -329,12 +298,10 @@ export function WorkspaceLayoutMixin() {
             },
             /**
              * ViewMenu's "move to new tab": the view leaves its tab for a new one.
-             * `allViewIds` is EVERY view in the session, defaulting to the host's
-             * own list, since homing drops any view the list omits.
              */
-            moveViewToNewTab(viewId, allViewIds) {
+            moveViewToNewTab(viewId) {
                 const tab = { id: nextId('tab'), viewIds: [viewId] };
-                const from = rehomeView(viewId, everyViewId('moveViewToNewTab', allViewIds), (tree, at) => addTab(tree, at.panel.id, tab));
+                const from = rehomeView(viewId, (tree, at) => addTab(tree, at.panel.id, tab));
                 if (!from) {
                     return undefined;
                 }
@@ -345,7 +312,7 @@ export function WorkspaceLayoutMixin() {
              * ViewMenu's "move to split": the view leaves for a new cell to the
              * right (`row`) or below (`column`) of its own.
              */
-            moveViewToSplit(viewId, direction, allViewIds) {
+            moveViewToSplit(viewId, direction) {
                 const tabId = nextId('tab');
                 const panel = {
                     id: nextId('panel'),
@@ -353,7 +320,7 @@ export function WorkspaceLayoutMixin() {
                     tabs: [{ id: tabId, viewIds: [viewId] }],
                     activeTabId: tabId,
                 };
-                const from = rehomeView(viewId, everyViewId('moveViewToSplit', allViewIds), (tree, at) => splitPanel(tree, at.panel.id, direction, panel));
+                const from = rehomeView(viewId, (tree, at) => splitPanel(tree, at.panel.id, direction, panel));
                 if (!from) {
                     return undefined;
                 }
@@ -364,12 +331,12 @@ export function WorkspaceLayoutMixin() {
              * ViewMenu's "move to tab": the view joins an existing tab, which
              * becomes the one shown.
              */
-            moveViewToTab(viewId, tabId, allViewIds) {
+            moveViewToTab(viewId, tabId) {
                 const target = findTab(self.tree, tabId);
                 if (!target || target.tab.viewIds.includes(viewId)) {
                     return;
                 }
-                const from = rehomeView(viewId, everyViewId('moveViewToTab', allViewIds), tree => addViewToTab(tree, tabId, viewId));
+                const from = rehomeView(viewId, tree => addViewToTab(tree, tabId, viewId));
                 const landed = findTab(self.tree, tabId);
                 if (from && landed) {
                     apply(setActiveTab(self.tree, landed.panel.id, tabId));
@@ -387,12 +354,11 @@ export function WorkspaceLayoutMixin() {
         /**
          * Move one view to a new tab or a split beside its cell, keeping the
          * rest of the arrangement. PUBLIC API: protein3d and msaview call it
-         * with the move alone, so `allViewIds` stays optional; it is read only
-         * on a host with no view list.
+         * with the move alone. The second argument is an old plugin signature;
+         * the session's own views are read instead.
          */
-        setPendingMove(move, allViewIds) {
-            // the session's own list wins over a plugin's possibly stale copy
-            const ids = sessionViewIds(self) ?? allViewIds;
+        setPendingMove(move, _allViewIds) {
+            const ids = sessionViewIds(self);
             if (!move || !ids?.includes(move.viewId)) {
                 return;
             }
@@ -400,23 +366,18 @@ export function WorkspaceLayoutMixin() {
                 self.homeUnassignedViews(ids);
             }
             else if (move.type === 'newTab') {
-                self.moveViewToNewTab(move.viewId, ids);
+                self.moveViewToNewTab(move.viewId);
             }
             else {
-                self.moveViewToSplit(move.viewId, 'row', ids);
-            }
-            const home = tabContainingView(self.tree, move.viewId);
-            if (home) {
-                self.setActiveTab(home.panel.id, home.tab.id);
+                self.moveViewToSplit(move.viewId, 'row');
             }
         },
         /**
          * Re-arrange the whole workspace, one view per cell, in one of four
-         * shapes. Pass `allViewIds` in `session.views` order so there is
-         * nothing for `orderViews` to apply.
+         * shapes, in `session.views` order.
          */
-        tileViews(mode, allViewIds) {
-            self.applyLayoutSpec(tileLayoutSpec(liveViewIds(self, allViewIds), mode));
+        tileViews(mode) {
+            self.applyLayoutSpec(tileLayoutSpec(sessionViewIds(self) ?? [], mode));
         },
         /**
          * #action
@@ -440,6 +401,16 @@ export function WorkspaceLayoutMixin() {
             host.orderViews(ids);
             return ids;
         },
+    }))
+        .actions(self => ({
+        afterAttach() {
+            addDisposer(self, autorun(function homeUnassignedViewsAutorun() {
+                const host = self;
+                if (host.views) {
+                    self.homeUnassignedViews(host.views.map(v => v.id));
+                }
+            }, { name: 'HomeUnassignedViews' }));
+        },
     }))
         // A session saved with workspaces off showed its views stacked whatever
         // layout it carried, so it opens as one cell holding them all

package/esm/WorkspaceLayout/tree.d.ts

@@ -39,6 +39,7 @@ export interface TabHome {
 export declare function findTab(node: LayoutTree, tabId: string): TabHome | undefined;
 /** The tab a panel is showing: the one it names, or its first. */
 export declare function activeTabIn(panel: PanelNode): TabNode | undefined;
+export declare function activeTabOf(root: LayoutTree, panelId: string): TabNode | undefined;
 export declare function tabContainingView(node: LayoutTree, viewId: string): TabHome | undefined;
 export declare function panelContainingView(node: LayoutTree, viewId: string): PanelNode | undefined;
 /**
@@ -93,9 +94,5 @@ export declare function homeViews(root: LayoutTree, viewIds: string[], activePan
  * normalisation rule: only the gesture that emptied the panel calls it.
  */
 export declare function pruneEmptyPanel(root: LayoutTree, panelId: string): LayoutTree;
-/**
- * Drop a tab a move has left with no views, unless it is the panel's last.
- * Closing a tab's last view leaves the tab standing, as a place to open the
- * next one; only a move out of it prunes.
- */
-export declare function pruneEmptyTabIn(root: LayoutTree, panelId: string, tabId: string): LayoutTree;
+/** Remove a tab that holds no views; a tab with views stays. */
+export declare function pruneEmptyTab(root: LayoutTree, tabId: string): LayoutTree;

package/esm/WorkspaceLayout/tree.js

@@ -31,6 +31,10 @@ export function findTab(node, tabId) {
 export function activeTabIn(panel) {
     return panel.tabs.find(t => t.id === panel.activeTabId) ?? panel.tabs[0];
 }
+export function activeTabOf(root, panelId) {
+    const panel = panels(root).find(p => p.id === panelId);
+    return panel && activeTabIn(panel);
+}
 export function tabContainingView(node, viewId) {
     return homeOf(node, t => t.viewIds.includes(viewId));
 }
@@ -271,16 +275,8 @@ export function pruneEmptyPanel(root, panelId) {
         ? removePanel(root, panelId)
         : root;
 }
-/**
- * Drop a tab a move has left with no views, unless it is the panel's last.
- * Closing a tab's last view leaves the tab standing, as a place to open the
- * next one; only a move out of it prunes.
- */
-export function pruneEmptyTabIn(root, panelId, tabId) {
-    const found = findPanel(root, panelId);
-    if (!found || found.tabs.length <= 1) {
-        return root;
-    }
-    const tab = found.tabs.find(t => t.id === tabId);
-    return tab?.viewIds.length === 0 ? removeTab(root, tabId) : root;
+/** Remove a tab that holds no views; a tab with views stays. */
+export function pruneEmptyTab(root, tabId) {
+    const found = findTab(root, tabId);
+    return found?.tab.viewIds.length === 0 ? removeTab(root, tabId) : root;
 }

package/esm/WorkspaceLayout/useLayoutDrag.js

@@ -10,12 +10,18 @@ function samePlace(a, b) {
         a?.strip?.index === b?.strip?.index &&
         a?.strip?.left === b?.strip?.left);
 }
-// a centre drop on the tab's own cell, which `dropTabInPanel` declines, so it
+// a drop `dropTabInPanel` / `dropTabInNewSplit` would leave as it was, which
 // paints nothing either
 function declines(layout, drag) {
-    return (!drag.strip &&
-        drag.zone === 'center' &&
-        layout.findTab(drag.tabId)?.panel.id === drag.panelId);
+    const home = layout.findTab(drag.tabId);
+    if (home?.panel.id !== drag.panelId) {
+        return false;
+    }
+    if (drag.strip) {
+        const from = home.panel.tabs.findIndex(t => t.id === drag.tabId);
+        return drag.strip.index === from || drag.strip.index === from + 1;
+    }
+    return drag.zone === 'center' || home.panel.tabs.length === 1;
 }
 /**
  * Dragging a tab. Pointer events rather than HTML5 dnd, for capture; the

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/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), 
@@ -55,4 +56,5 @@ export default function JBrowseTabMenu({ onRename, onClose, }) {
                     onClick: onClose,
                 },
             ], 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,30 +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, or Dark Reader, draws dark whatever the
     // OS says, so a click here would change nothing.
-    const followsSystem = session.themeMode === 'system' &&
+    const switchable = session.themeMode !== 'light' &&
         !session.darkReaderDark &&
         drawnMode === session.effectiveThemeMode;
-    if (!followsSystem) {
+    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;