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

package/esm/WorkspaceLayout/TabStrip.js

@@ -2,37 +2,23 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import { dv, tabColors } from './dockviewTheme.js';
 import { tabDomId, tabPanelDomId } from './panelChrome.js';
-/**
- * A panel's tab strip: the tabs, and the panel's own buttons beside them.
- *
- * Everything with state in a cell lives here — the roving tabindex, the wheel
- * translation, the scroll-into-view — which leaves `PanelView` a pure function
- * of its node. The strip is dockview's dark theme, transcribed in
- * `dockviewTheme.ts`; see there for why it is fixed rather than derived from
- * the MUI theme.
- */
+import { tabColors, workspaceTheme } from './workspaceTheme.js';
 const useStyles = makeStyles()({
     strip: {
         display: 'flex',
         flexShrink: 0,
         boxSizing: 'border-box',
-        height: dv.tabsHeight,
-        fontSize: dv.tabsFontSize,
-        background: dv.tabsBackground,
+        height: workspaceTheme.stripHeight,
+        fontSize: workspaceTheme.stripFontSize,
+        background: workspaceTheme.stripBackground,
     },
     tabs: {
         display: 'flex',
         overflowX: 'auto',
-        // shrink but never GROW: the panel actions are the next child of the strip,
-        // so a tab list that takes the leftover space pushes the `+` to the far
-        // right edge, arbitrarily far from the tab it acts on. `0 1 auto` sizes the
-        // list to its tabs and leaves the `+` beside the last one, and the shrink
-        // half is what makes it scroll here rather than push the `+` off the strip.
+        // never grow, so the `+` after the list sits beside the last tab
         flex: '0 1 auto',
         minWidth: 0,
-        // the strip is chrome, so a scrollbar across it would be noise
         scrollbarWidth: 'none',
         '&::-webkit-scrollbar': { display: 'none' },
     },
@@ -46,31 +32,16 @@ const useStyles = makeStyles()({
         cursor: 'pointer',
         userSelect: 'none',
         touchAction: 'none',
-        borderRight: `1px solid ${dv.tabDividerColor}`,
+        borderRight: `1px solid ${workspaceTheme.tabDivider}`,
         '&:hover .jbrowse-tab-menu': { visibility: 'visible' },
-        // a keyboard user needs the ⋮ too, and hover is not a thing they can do
         '&:focus-within .jbrowse-tab-menu': { visibility: 'visible' },
-        // the strip is dark in either theme, so the focus ring is the drop
-        // indicator's blue rather than the UA default black-on-dark
         '&:focus-visible': {
-            outline: `2px solid ${dv.edgeDockIndicatorColor}`,
+            outline: `2px solid ${workspaceTheme.accent}`,
             outlineOffset: -2,
         },
     },
 });
-/**
- * A wheel event's delta in PIXELS.
- *
- * `deltaY` is only pixels when `deltaMode` says so. Firefox reports whole lines
- * for a mouse wheel — `deltaMode: 1`, `deltaY: ±3` — where Chrome reports
- * `deltaMode: 0`, `deltaY: ±100`. Using the raw number moves the strip three
- * pixels per notch there: scrolling, technically, and unusable in practice.
- *
- * The line height is nominal rather than measured. `getComputedStyle` per wheel
- * event to resolve a `line-height: normal` that is itself font-dependent buys
- * accuracy nobody can perceive in a scroll gesture, and the strip is a fixed
- * 35px of chrome in one size.
- */
+// Firefox reports a mouse wheel in lines (`deltaMode: 1`, `deltaY: ±3`)
 const WHEEL_LINE_PX = 16;
 function wheelDeltaPixels(event, pageSize) {
     switch (event.deltaMode) {
@@ -82,40 +53,23 @@ function wheelDeltaPixels(event, pageSize) {
             return event.deltaY;
     }
 }
-export const TabStrip = observer(function TabStrip({ panel, layout, chrome, active, groupActive, }) {
+export const TabStrip = observer(function TabStrip({ panel, layout, chrome, active, cellActive, }) {
     const { classes } = useStyles();
     const { renderPanelActions } = chrome;
-    // Roving tabindex: the strip is ONE tab stop, and the arrow keys move within
-    // it. Focus is tracked separately from selection because activation here is
-    // manual (see `onKeyDown`), so the two genuinely differ while arrowing.
+    // roving tabindex; focus differs from selection because activation is manual
     const stripRef = useRef(null);
     const [focusedTabId, setFocusedTabId] = useState(undefined);
     const roving = panel.tabs.find(t => t.id === focusedTabId)?.id ?? active?.id;
-    // by dataset rather than an interpolated attribute selector: a tab id is
-    // nanoid output and would need CSS.escape, which jsdom does not have
+    // not an attribute selector: a nanoid needs CSS.escape, which jsdom lacks
     function tabElement(tabId) {
         return [...(stripRef.current?.children ?? [])].find(child => child.dataset.tabId === tabId);
     }
     function focusTab(tabId) {
         setFocusedTabId(tabId);
-        // focusing scrolls it into view on its own, which is the whole reason the
-        // keyboard could always reach an overflowing strip when the mouse could not
         tabElement(tabId)?.focus();
     }
-    /**
-     * Keep the shown tab in view.
-     *
-     * The strip scrolls, so a tab can become current while sitting outside it —
-     * `+` on a full strip appends a tab, makes it active, and leaves the user
-     * looking at the tabs it scrolled past. Clicking never needs this (you
-     * clicked something visible) and arrowing gets it from `focus()`, so this is
-     * for the tab that becomes current without being touched.
-     *
-     * `block: 'nearest'` so it cannot scroll an ancestor vertically. jsdom has no
-     * scrollIntoView at all, but `config/jest/scrollIntoView.js` already no-ops it
-     * for the whole suite — don't add an optional call for that, it reads as a
-     * browser that might not have the method.
-     */
+    // for a tab made current without being touched, e.g. by `+` on a full strip;
+    // `block: 'nearest'` keeps it from scrolling an ancestor vertically
     useEffect(() => {
         tabElement(active?.id)?.scrollIntoView({
             block: 'nearest',
@@ -123,14 +77,9 @@ export const TabStrip = observer(function TabStrip({ panel, layout, chrome, acti
         });
     }, [active?.id]);
     /**
-     * MANUAL activation: arrows move focus, Enter/Space selects.
-     *
-     * The automatic form (arrowing selects as it goes) is the more common reading
-     * of the tabs pattern, and is wrong here for the reason WAI-ARIA names as its
-     * exception — showing a tab is expensive. Only the selected tab's views are
-     * mounted, and a JBrowse view costs a WebGL2 context per display against a
-     * ceiling of 16, so arrowing across five tabs would build and tear down five
-     * sets of them to pass through.
+     * Manual activation (arrows focus, Enter/Space selects), the WAI-ARIA
+     * exception for expensive tabs: showing one mounts views that each cost
+     * WebGL2 contexts.
      */
     function onKeyDown(event, tabId) {
         const ids = panel.tabs.map(t => t.id);
@@ -157,70 +106,53 @@ export const TabStrip = observer(function TabStrip({ panel, layout, chrome, acti
         }
     }
     return (_jsxs("div", { "data-tab-strip": true, className: classes.strip, 
-        // Double-clicking the strip's empty space maximizes the cell and
-        // restores it — the IDE convention, and free here because the strip's
-        // only other `onDoubleClick` is the one on a tab's own label, for rename.
-        //
-        // `target === currentTarget` is what keeps those two apart, and it is the
-        // test rather than a `stopPropagation` in `WorkspaceTab` because it holds
-        // for anything ever put on the strip: a rename double-click bubbles out
-        // of the label to here, and so would a double-click on the `+`.
+        // empty strip space only, so a tab's rename double-click does not bubble
+        // into a maximize
         onDoubleClick: event => {
             if (event.target === event.currentTarget) {
                 layout.toggleMaximizedPanel(panel.id);
             }
-        }, children: [_jsx("div", { role: "tablist", ref: stripRef, className: classes.tabs, 
-                // A mouse wheel only has a vertical axis, and this scrolls
-                // horizontally — so without translating it, a strip with more tabs
-                // than fit is reachable by trackpad swipe and by keyboard and NOT AT
-                // ALL by mouse. The scrollbar is hidden on purpose (the strip is
-                // chrome) which removes the other way of noticing there is more.
-                //
-                // `deltaX` is a trackpad's own horizontal axis and the browser has
-                // already applied it; taking the larger axis leaves that gesture alone
-                // rather than doubling it.
+        }, children: [_jsx("div", { role: "tablist", ref: stripRef, className: classes.tabs, onBlur: event => {
+                    if (!event.currentTarget.contains(event.relatedTarget)) {
+                        setFocusedTabId(undefined);
+                    }
+                }, 
+                // translate a vertical wheel to horizontal scroll; a trackpad's larger
+                // `deltaX` is already applied by the browser
                 onWheel: event => {
                     const el = stripRef.current;
                     if (!el || Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
                         return;
                     }
                     el.scrollLeft += wheelDeltaPixels(event, el.clientWidth);
-                }, children: panel.tabs.map(tab => (_jsx(Tab, { tab: tab, panel: panel, layout: layout, chrome: chrome, className: classes.tab, selected: tab.id === active?.id, groupActive: groupActive, tabIndex: tab.id === roving ? 0 : -1, onKeyDown: onKeyDown, onFocus: setFocusedTabId }, tab.id))) }), renderPanelActions?.(panel)] }));
+                }, children: panel.tabs.map(tab => (_jsx(Tab, { tab: tab, panel: panel, layout: layout, chrome: chrome, className: classes.tab, selected: tab.id === active?.id, cellActive: cellActive, tabIndex: tab.id === roving ? 0 : -1, onKeyDown: onKeyDown, onFocus: setFocusedTabId }, tab.id))) }), renderPanelActions?.(panel)] }));
 });
-const Tab = observer(function Tab({ tab, panel, layout, chrome, className, selected, groupActive, tabIndex, onKeyDown, onFocus, }) {
+const Tab = observer(function Tab({ tab, panel, layout, chrome, className, selected, cellActive, tabIndex, onKeyDown, onFocus, }) {
     const { renderTabLabel, dragHandlers, onTabClose } = chrome;
     return (_jsx("div", { role: "tab", id: tabDomId(tab.id), "data-tab-id": tab.id, "aria-selected": selected, "aria-controls": selected ? tabPanelDomId(panel.id) : undefined, tabIndex: tabIndex, onKeyDown: event => {
-            onKeyDown(event, tab.id);
+            // keys from a control inside the tab belong to that control
+            if (event.target === event.currentTarget) {
+                onKeyDown(event, tab.id);
+            }
         }, onFocus: () => {
             onFocus(tab.id);
         }, onPointerDown: event => {
-            // The middle button closes rather than drags, and its default action is
-            // the browser's autoscroll — which would otherwise start the moment a
-            // tab is middle-pressed.
-            //
-            // Cancelling pointerdown suppresses the compatibility mouse events
-            // (which is what stops the autoscroll) and NOT `click` / `auxclick`:
-            // Pointer Events L3 dispatches those two independently of that mapping.
-            // So the close below still fires, which is the thing this looks like it
-            // would break.
+            // Stops middle-button autoscroll; Pointer Events L3 still dispatches
+            // the `auxclick` that closes the tab
             if (event.button === 1) {
                 event.preventDefault();
                 return;
             }
-            // Showing a tab is expensive — it mounts a stack of views, each display
-            // costing a WebGL2 context — so it is the LEFT button that asks for it,
-            // the same gate dockview puts on `_activateOnPointerDown`. A right-press
-            // is on its way to a context menu and is not a request to look at
-            // anything.
+            // only the left button activates: showing a tab mounts views
             if (event.button !== 0) {
                 return;
             }
             layout.setActiveTab(panel.id, tab.id);
-            dragHandlers.onTabPointerDown(tab.id, event);
+            dragHandlers.onPointerDown(event);
         }, onAuxClick: event => {
             if (event.button === 1) {
                 event.preventDefault();
                 onTabClose?.(tab.id);
             }
-        }, onPointerMove: dragHandlers.onTabPointerMove, onPointerUp: dragHandlers.onTabPointerUp, onPointerCancel: dragHandlers.onTabPointerCancel, className: className, style: tabColors(groupActive, selected), children: renderTabLabel(tab) }));
+        }, onPointerMove: dragHandlers.onPointerMove, onPointerUp: dragHandlers.onPointerUp, onPointerCancel: dragHandlers.onPointerCancel, onLostPointerCapture: dragHandlers.onLostPointerCapture, className: className, style: tabColors(cellActive, selected), children: renderTabLabel(tab) }));
 });

package/esm/WorkspaceLayout/WorkspaceContainer.d.ts

@@ -1,15 +1,6 @@
 import type { WorkspaceSessionType } from '../ui/App/types.ts';
 import type { WorkspaceLayout } from './model.ts';
 type WorkspaceSession = WorkspaceSessionType & WorkspaceLayout;
-/**
- * The workspace. Compare `TiledViewsContainer` + `useDockviewController`, which
- * this replaces: there is no api to hold, no `onReady`, no event to subscribe
- * to, and no reconciliation — the layout is session state and this renders it.
- *
- * The one reaction left is homing: `session.views` is owned by the session, so
- * a view launched from a menu arrives belonging to no tab and has to land
- * somewhere. That is one-directional and idempotent, and nothing reads back.
- */
 export declare const WorkspaceContainer: ({ session, }: {
     session: WorkspaceSession;
 }) => import("react").JSX.Element;

package/esm/WorkspaceLayout/WorkspaceContainer.js

@@ -17,11 +17,6 @@ const useStyles = makeStyles()(theme => ({
         gridRow: 'components',
         background: theme.palette.background.default,
     },
-    stack: {
-        display: 'flex',
-        flexDirection: 'column',
-        minWidth: 0,
-    },
     empty: {
         display: 'flex',
         alignItems: 'center',
@@ -29,30 +24,18 @@ const useStyles = makeStyles()(theme => ({
         height: '100%',
     },
 }));
-/**
- * The workspace. Compare `TiledViewsContainer` + `useDockviewController`, which
- * this replaces: there is no api to hold, no `onReady`, no event to subscribe
- * to, and no reconciliation — the layout is session state and this renders it.
- *
- * The one reaction left is homing: `session.views` is owned by the session, so
- * a view launched from a menu arrives belonging to no tab and has to land
- * somewhere. That is one-directional and idempotent, and nothing reads back.
- */
 export const WorkspaceContainer = observer(function WorkspaceContainer({ session, }) {
     const { classes } = useStyles();
     const { drag, handlers } = useLayoutDrag(session);
     // #region autorunInEffect
     useEffect(() => autorun(() => {
-        // reads session.views itself, so it re-runs when the view set changes;
-        // homeUnassignedViews is an action and would not be tracked from inside
+        // homes newly launched views; reads session.views here because an
+        // action's reads are untracked
         session.homeUnassignedViews(session.views.map(v => v.id));
     }), [session]);
     // #endregion
-    // The layout does not own views, so closing anything that holds them is
-    // explicitly the pair. Stated ONCE, here, because every spelling of it is a
-    // chance to drop the node and leave its views in the session forever — and
-    // three gestures want it now: the tab's ⋮ menu, middle-clicking the tab, and
-    // the cell's ×.
+    // the layout does not own views, so every close gesture goes through here
+    // or leaks them
     const closeViews = useCallback((viewIds) => {
         for (const view of viewsOf(session, viewIds)) {
             session.removeView(view);
@@ -74,15 +57,8 @@ export const WorkspaceContainer = observer(function WorkspaceContainer({ session
         closeViews(panel.tabs.flatMap(t => t.viewIds));
         session.closePanel(panelId);
     }, [session, closeViews]);
-    /**
-     * Memoised because this reaches every panel, so a fresh one per render
-     * defeats `observer`'s memo for all of them and each re-render rebuilds a
-     * `ViewStack`. `drag` is deliberately NOT in here — it goes down its own prop
-     * so it reaches only the cell it describes.
-     *
-     * Nothing does this for us: `observer(function(){})` is not compiled by the
-     * React Compiler.
-     */
+    // memoised by hand (the React Compiler skips `observer`): a fresh object
+    // re-renders every panel's ViewStack. `drag` stays out for the same reason.
     const chrome = useMemo(() => ({
         dragHandlers: handlers,
         onTabClose: closeTab,
@@ -94,13 +70,12 @@ export const WorkspaceContainer = observer(function WorkspaceContainer({ session
             } })),
         renderTabContent: tab => {
             const views = viewsOf(session, tab.viewIds);
-            return views.length > 0 ? (_jsx(ViewStack, { views: views, session: session, className: classes.stack })) : (_jsx("div", { className: classes.empty, children: _jsx(Suspense, { fallback: null, children: _jsx(ViewLauncher, { session: session }) }) }));
+            return views.length > 0 ? (_jsx(ViewStack, { views: views, session: session })) : (_jsx("div", { className: classes.empty, children: _jsx(Suspense, { fallback: null, children: _jsx(ViewLauncher, { session: session }) }) }));
         },
-    }), [session, handlers, closeTab, closePanel, classes.stack, classes.empty]);
+    }), [session, handlers, closeTab, closePanel, classes.empty]);
     return (_jsx("div", { className: classes.container, "data-testid": "workspace", children: _jsx(LayoutRenderer, { node: session.visibleTree, layout: session, drag: drag, chrome: chrome }) }));
 });
-// `session.views` is the one ordering of views, in both layout modes, so a
-// tab's membership list is filtered through it rather than read as an order.
+// `session.views` is the order; a tab's `viewIds` is membership only
 function viewsOf(session, viewIds) {
     const members = new Set(viewIds);
     return session.views.filter(v => members.has(v.id));

package/esm/WorkspaceLayout/WorkspacePanelActions.d.ts

@@ -1,24 +1,9 @@
 import type { WorkspaceSessionType } from '../ui/App/types.ts';
 import type { WorkspaceLayout } from './model.ts';
 import type { PanelNode } from './tree.ts';
-/**
- * The per-cell buttons: new tab, split, close.
- *
- * Every one of these is a single MST action on the layout, where the dockview
- * versions were an api call plus a session write that had to be kept consistent
- * with it — `handleSplit` was `containerApi.addGroup(...)` followed by
- * `addEmptyTab(newGroup)`, and the gap between those two was where the
- * "resource is already disposed" crash lived.
- */
 export declare const WorkspacePanelActions: ({ panel, session, onClose, }: {
     panel: PanelNode;
     session: WorkspaceSessionType & WorkspaceLayout;
-    /**
-     * Closing a cell closes the views its tabs held, and the layout does not own
-     * views — so the pair is one function at the call site, the same way
-     * `WorkspaceTab` takes its `onClose`. Spelled here as well, this file would
-     * be the third place stating "and also remove the views", which is one more
-     * than the number that can be kept in step.
-     */
+    /** closes the cell and the views its tabs hold */
     onClose: () => void;
 }) => import("react").JSX.Element;

package/esm/WorkspaceLayout/WorkspacePanelActions.js

@@ -14,28 +14,20 @@ import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import { IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import { dv } from './dockviewTheme.js';
+import { stripIconColor, workspaceTheme } from './workspaceTheme.js';
 const useStyles = makeStyles()({
     actions: { display: 'flex', alignItems: 'center', flex: '0 0 auto' },
-    // dockview's `.dv-default-tab-action`: inherits the strip's colour, and takes
-    // a small rounded chip on hover rather than MUI's circular ripple surface
     button: {
         padding: 4,
         borderRadius: 2,
-        color: dv.activeGroupHiddenTabColor,
-        '&:hover': { background: dv.iconHoverBackground, borderRadius: 2 },
+        color: stripIconColor,
+        '&:hover': {
+            background: workspaceTheme.iconHoverBackground,
+            borderRadius: 2,
+        },
     },
     icon: { fontSize: 16 },
 });
-/**
- * The per-cell buttons: new tab, split, close.
- *
- * Every one of these is a single MST action on the layout, where the dockview
- * versions were an api call plus a session write that had to be kept consistent
- * with it — `handleSplit` was `containerApi.addGroup(...)` followed by
- * `addEmptyTab(newGroup)`, and the gap between those two was where the
- * "resource is already disposed" crash lived.
- */
 export const WorkspacePanelActions = observer(function WorkspacePanelActions({ panel, session, onClose, }) {
     const { classes } = useStyles();
     const canClose = session.panels.length > 1;
@@ -52,23 +44,21 @@ export const WorkspacePanelActions = observer(function WorkspacePanelActions({ p
                         },
                     },
                     {
-                        label: 'New empty split horizontal',
+                        label: 'New empty split (right)',
                         icon: VerticalSplitIcon,
                         onClick: () => {
                             session.splitPanel(panel.id, 'row');
                         },
                     },
                     {
-                        label: 'New empty split vertical',
+                        label: 'New empty split (below)',
                         icon: HorizontalSplitIcon,
                         onClick: () => {
                             session.splitPanel(panel.id, 'column');
                         },
                     },
-                    // The strip's double-click is the gesture; this is how anyone finds
-                    // it, and the only way to reach it from the keyboard. Gated on there
-                    // being another cell to hide, since maximizing the only one is a
-                    // no-op with a label promising otherwise.
+                    // the keyboard route to the strip's double-click; hidden when there
+                    // is no other cell to hide
                     ...(session.panels.length > 1 || maximized
                         ? [
                             {
@@ -80,41 +70,46 @@ export const WorkspacePanelActions = observer(function WorkspacePanelActions({ p
                             },
                         ]
                         : []),
-                    // The whole-workspace commands, kept behind the same "Global:" prefix
-                    // and the same >1-view gate they had on the dockview header, so a
-                    // returning user finds them where they were and the label still says
-                    // that the button in THIS cell rearranges every cell.
                     ...(session.views.length > 1
                         ? [
                             {
-                                label: 'Global: change layout into set of tabs',
-                                icon: DynamicFeedIcon,
-                                onClick: () => {
-                                    tile('tabs');
-                                },
-                            },
-                            {
-                                label: 'Global: tile horizontally',
-                                icon: ViewColumnIcon,
-                                onClick: () => {
-                                    tile('horizontal');
-                                },
-                            },
-                            {
-                                label: 'Global: tile vertically',
-                                icon: TableRowsIcon,
-                                onClick: () => {
-                                    tile('vertical');
-                                },
-                            },
-                            {
-                                label: 'Global: tile grid',
+                                label: 'Arrange all views',
                                 icon: ViewModuleIcon,
-                                onClick: () => {
-                                    tile('grid');
-                                },
+                                type: 'subMenu',
+                                subMenu: [
+                                    {
+                                        label: 'As tabs',
+                                        icon: DynamicFeedIcon,
+                                        onClick: () => {
+                                            tile('tabs');
+                                        },
+                                    },
+                                    {
+                                        label: 'Side by side',
+                                        icon: ViewColumnIcon,
+                                        onClick: () => {
+                                            tile('horizontal');
+                                        },
+                                    },
+                                    {
+                                        label: 'Stacked',
+                                        icon: TableRowsIcon,
+                                        onClick: () => {
+                                            tile('vertical');
+                                        },
+                                    },
+                                    {
+                                        label: 'Grid',
+                                        icon: ViewModuleIcon,
+                                        onClick: () => {
+                                            tile('grid');
+                                        },
+                                    },
+                                ],
                             },
                         ]
                         : []),
-                ], size: "small", className: classes.button, children: _jsx(AddIcon, { className: classes.icon }) }), canClose ? (_jsx(Tooltip, { title: "Close panel", children: _jsx(IconButton, { size: "small", className: classes.button, onClick: onClose, children: _jsx(CloseIcon, { className: classes.icon }) }) })) : null] }));
+                ], tooltip: "Panel menu", size: "small", className: classes.button, children: _jsx(AddIcon, { className: classes.icon }) }), maximized ? (_jsx(Tooltip, { title: "Restore panel", children: _jsx(IconButton, { size: "small", className: classes.button, onClick: () => {
+                        session.restorePanels();
+                    }, children: _jsx(CloseFullscreenIcon, { className: classes.icon }) }) })) : null, canClose ? (_jsx(Tooltip, { title: "Close panel", children: _jsx(IconButton, { size: "small", className: classes.button, onClick: onClose, children: _jsx(CloseIcon, { className: classes.icon }) }) })) : null] }));
 });

package/esm/WorkspaceLayout/WorkspaceTab.d.ts

@@ -2,26 +2,11 @@ import type { WorkspaceSessionType } from '../ui/App/types.ts';
 import type { WorkspaceLayout } from './model.ts';
 import type { TabNode } from './tree.ts';
 import type { AbstractViewModel } from '@jbrowse/core/util';
-/**
- * A tab's name is **derived** from the views it holds, unless the user set one.
- *
- * `title === undefined` is the sentinel for "not renamed", which is a plain
- * `maybe` on the tab rather than the comparison the dockview version needed:
- * dockview restores an unset title as the panel id, so telling a real title
- * from a restored one meant testing `title !== panelId` and hoping nobody named
- * a tab after a panel.
- */
-export declare function tabDisplayName(tab: TabNode, views: AbstractViewModel[], session: WorkspaceSessionType): string;
 export declare const WorkspaceTab: ({ tab, views, session, layout, onClose, }: {
     tab: TabNode;
     views: AbstractViewModel[];
     session: WorkspaceSessionType;
     layout: WorkspaceLayout;
-    /**
-     * Closing a tab closes the views it held, and the layout does not own views —
-     * so the pair is one function at the call site rather than spelled out here.
-     * The strip's middle-click needs the same pair, and two spellings of "and
-     * also remove the views" is how one of them comes to be missing it.
-     */
+    /** closes the tab and the views it holds */
     onClose: () => void;
 }) => import("react").JSX.Element;

package/esm/WorkspaceLayout/WorkspaceTab.js

@@ -4,20 +4,15 @@ import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { InputBase, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
 import JBrowseTabMenu from '../ui/App/JBrowseTabMenu.js';
-import { viewName } from '../ui/App/viewTitle.js';
+import { tabDisplayName } from './tabName.js';
 const useStyles = makeStyles()(theme => ({
-    // Only the label and its menu. The background, the selected state and the
-    // hover live on the strip's own `[role=tab]` wrapper, which is where the
-    // selection is known — two places styling one tab is how they drift.
+    // the `[role=tab]` wrapper in TabStrip owns background and selected state
     tab: {
         display: 'flex',
         alignItems: 'center',
         gap: 4,
         minWidth: 0,
     },
-    // dockview's `.dv-default-tab-content`: takes the space, truncates with an
-    // ellipsis, and takes its colour from the tab, which is what encodes
-    // active/inactive
     title: {
         flexGrow: 1,
         marginRight: 4,
@@ -36,38 +31,20 @@ const useStyles = makeStyles()(theme => ({
         flex: 1,
     },
 }));
-/**
- * A tab's name is **derived** from the views it holds, unless the user set one.
- *
- * `title === undefined` is the sentinel for "not renamed", which is a plain
- * `maybe` on the tab rather than the comparison the dockview version needed:
- * dockview restores an unset title as the panel id, so telling a real title
- * from a restored one meant testing `title !== panelId` and hoping nobody named
- * a tab after a panel.
- */
-export function tabDisplayName(tab, views, session) {
-    if (tab.title) {
-        return tab.title;
-    }
-    if (views.length === 0) {
-        return 'Empty';
-    }
-    if (views.length === 1) {
-        return viewName(views[0], r => session.assemblyManager.getDisplayName(r));
-    }
-    return `${views.length} views`;
-}
 export const WorkspaceTab = observer(function WorkspaceTab({ tab, views, session, layout, onClose, }) {
     const { classes } = useStyles();
     const [editing, setEditing] = useState(false);
     const [draft, setDraft] = useState('');
     const title = tabDisplayName(tab, views, session);
+    const startEditing = () => {
+        setDraft(title);
+        setEditing(true);
+    };
+    // an empty box or the unchanged automatic name keeps the name automatic
     const save = () => {
-        // An empty box means "go back to the automatic name". `title === undefined`
-        // is the sentinel for "not renamed" and `renameTab` takes it, but nothing
-        // in the UI passed it: clearing the box just discarded the edit, so a
-        // rename could be made and never unmade.
-        layout.renameTab(tab.id, draft.trim() || undefined);
+        const name = draft.trim();
+        const automatic = tabDisplayName({ ...tab, title: undefined }, views, session);
+        layout.renameTab(tab.id, name && name !== automatic ? name : undefined);
         setEditing(false);
     };
     return (_jsx("div", { className: classes.tab, children: editing ? (_jsx(InputBase, { autoFocus: true, className: classes.editInput, value: draft, onChange: e => {
@@ -75,13 +52,6 @@ export const WorkspaceTab = observer(function WorkspaceTab({ tab, views, session
             }, onFocus: e => {
                 e.target.select();
             }, onBlur: save, onKeyDown: e => {
-                // The box sits INSIDE the `role="tab"` that owns the strip's roving
-                // tabindex, and every key it handles — the arrows, Home, End, Enter
-                // and Space — it also preventDefault()s. All of them reach that
-                // handler by bubbling out of here, so while the box is open the
-                // arrows jumped to the next tab instead of moving the caret and a
-                // space never reached the input at all: a tab could not be given a
-                // name with a space in it.
                 e.stopPropagation();
                 if (e.key === 'Enter') {
                     save();
@@ -95,11 +65,5 @@ export const WorkspaceTab = observer(function WorkspaceTab({ tab, views, session
                 e.stopPropagation();
             }, onClick: e => {
                 e.stopPropagation();
-            } })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { className: classes.title, variant: "body2", onDoubleClick: () => {
-                        setDraft(title);
-                        setEditing(true);
-                    }, children: title }), _jsx(JBrowseTabMenu, { onRename: () => {
-                        setDraft(title);
-                        setEditing(true);
-                    }, onClose: onClose })] })) }));
+            } })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { className: classes.title, variant: "body2", onDoubleClick: startEditing, children: title }), _jsx(JBrowseTabMenu, { onRename: startEditing, onClose: onClose })] })) }));
 });