@jbrowse/app-core 4.2.1 → 5.0.0-beta.1

package/esm/ui/App/JBrowseTabMenu.js

@@ -1,16 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
 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';
 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
+    // generated one. `visibility` rather than `display`, so the tab does not
+    // change width under the pointer as it arrives.
     tabIcons: {
         display: 'flex',
         alignItems: 'center',
         visibility: 'hidden',
     },
-    tabIconsVisible: {
+    // the pointer is over the menu, not the tab, for as long as the menu is open,
+    // so the hover rule stops applying the moment it opens — leaving the popover
+    // anchored to an invisible button
+    open: {
         visibility: 'visible',
     },
     tabIcon: {
@@ -22,9 +30,20 @@ const useStyles = makeStyles()({
         fontSize: 14,
     },
 });
-export default function JBrowseTabMenu({ isHovered, onRename, onClose, }) {
-    const { classes } = useStyles();
-    return (_jsx("div", { className: `${classes.tabIcons} ${isHovered ? classes.tabIconsVisible : ''}`, children: _jsx(CascadingMenuButton, { menuItems: [
+export default 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), 
+        // The tab strip starts a tab drag on pointerdown and takes POINTER
+        // CAPTURE for it, and a captured pointer retargets the compatibility
+        // mouse events with it — so `click` is delivered to the tab rather than
+        // to this button, and the menu silently never opens. Stopping the
+        // pointerdown here means a press that starts on the menu is not a drag
+        // and never captures, which is the same reason the rename input in
+        // `WorkspaceTab` stops it.
+        onPointerDown: event => {
+            event.stopPropagation();
+        }, children: _jsx(CascadingMenuButton, { menuItems: [
                 {
                     label: 'Rename tab',
                     icon: EditIcon,
@@ -35,5 +54,5 @@ export default function JBrowseTabMenu({ isHovered, onRename, onClose, }) {
                     icon: CloseIcon,
                     onClick: onClose,
                 },
-            ], size: "small", className: classes.tabIcon, stopPropagation: true, children: _jsx(MoreVertIcon, { className: classes.smallIcon }) }) }));
+            ], size: "small", className: classes.tabIcon, setOpen: setOpen, stopPropagation: true, children: _jsx(MoreVertIcon, { className: classes.smallIcon }) }) }));
 }

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

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

package/esm/ui/App/ViewButtons.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import AddIcon from '@mui/icons-material/Add';
 import CloseIcon from '@mui/icons-material/Close';
@@ -10,8 +11,19 @@ const useStyles = makeStyles()(theme => ({
         color: theme.palette.secondary.contrastText,
     },
 }));
-const ViewButtons = observer(function ViewButtons({ view, onClose, onMinimize, }) {
+// Acts on the view directly rather than taking onClose/onMinimize callbacks.
+// Those were written inline by ViewContainer, three components up, so they were
+// fresh on every one of its renders and mobx-react's memo could never hold for
+// this subtree. A resize of the view body re-rendered these MUI buttons along
+// with the header and the menu. There was nothing for the caller to decide
+// anyway: both handlers are the same two lines wherever they are written.
+const ViewButtons = observer(function ViewButtons({ view, }) {
     const { classes } = useStyles();
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "data-testid": "minimize_view", onClick: onMinimize, children: view.minimized ? (_jsx(AddIcon, { className: classes.icon, fontSize: "small" })) : (_jsx(MinimizeIcon, { className: classes.icon, fontSize: "small" })) }), _jsx(IconButton, { "data-testid": "close_view", onClick: onClose, children: _jsx(CloseIcon, { className: classes.icon, fontSize: "small" }) })] }));
+    const session = getSession(view);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { "data-testid": "minimize_view", onClick: () => {
+                    view.setMinimized(!view.minimized);
+                }, children: view.minimized ? (_jsx(AddIcon, { className: classes.icon, fontSize: "small" })) : (_jsx(MinimizeIcon, { className: classes.icon, fontSize: "small" })) }), _jsx(IconButton, { "data-testid": "close_view", onClick: () => {
+                    session.removeView(view);
+                }, children: _jsx(CloseIcon, { className: classes.icon, fontSize: "small" }) })] }));
 });
 export default ViewButtons;

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

@@ -1,6 +1,7 @@
 import type { AbstractViewModel, SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
-declare const ViewContainer: ({ view, session, }: {
+declare const ViewContainer: ({ view, session, scrollOnMount, }: {
     view: AbstractViewModel;
     session: SessionWithFocusedViewAndDrawerWidgets;
-}) => import("react/jsx-runtime").JSX.Element;
+    scrollOnMount?: boolean;
+}) => import("react").JSX.Element;
 export default ViewContainer;

package/esm/ui/App/ViewContainer.js

@@ -1,16 +1,94 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { useWidthSetter } from '@jbrowse/core/util';
+import { useFocusOnInteraction, useWidthSetter } from '@jbrowse/core/util/hooks';
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
-import { Paper, useTheme } from '@mui/material';
+import { isAlive } from '@jbrowse/mobx-state-tree';
+import { Paper } from '@mui/material';
 import { observer } from 'mobx-react';
-import ViewHeader from "./ViewHeader.js";
-import ViewWrapper from "./ViewWrapper.js";
+import ViewHeader from './ViewHeader.js';
+import ViewWrapper from './ViewWrapper.js';
+import { useViewVisibility } from './useViewVisibility.js';
+import { viewTitle } from './viewTitle.js';
+// Intended to keep views mounted within ~1.5 viewport-heights of the visible
+// band. **It does nothing, and making it work was measured as a regression.**
+//
+// An observer clips the target against every scrolling ancestor before applying
+// the margin, which expands only the root's box — and both view containers are
+// `overflow-y: auto`, so through one of them `150% 0px` qualifies exactly the
+// views a `0px` margin would. Rooting the observer at the scroll port instead
+// (`scrollPortOf`) does restore the band, and it came out a wash on scroll cost
+// while holding 9-13 live GPU canvases instead of 6. The mount band trades
+// pipeline rebuilds for live contexts, and with the ceiling at 16 live WebGL2
+// contexts the contexts are the tighter constraint.
+// See agent-docs/reference/GPU_CONTEXT_BUDGET.md.
+//
+// So don't tune this number expecting an effect, and don't make it live without
+// first cutting contexts per display.
+const VIEW_VISIBILITY_ROOT_MARGIN = '150% 0px';
+// Scroll-space reserved for a view that has never been measured yet, so a fresh
+// load spreads views down the page instead of stacking them all in the viewport
+// (which would mark them all visible and defeat the lazy mount).
+const ESTIMATED_VIEW_HEIGHT = 400;
+// CALL THIS ONLY WHERE THE ESTIMATE IS ACTUALLY USED, i.e. under `reserveSpace`.
+// A view's `height` is a computed over its track heights (LinearGenomeView's
+// sums them), so reading it makes the caller an observer of every track resize
+// and every display that grows with its data. Called unconditionally during
+// render, that re-rendered the whole view chrome on each of those, to produce
+// a placeholder height that only a hidden view ever shows. Measured: 2 chrome
+// renders per height change became 0.
+function viewHeight(view) {
+    return 'height' in view && typeof view.height === 'number'
+        ? view.height
+        : ESTIMATED_VIEW_HEIGHT;
+}
+// Every view that waits on something before it can mount content models that
+// wait as `showLoading`. Views without the getter are mounted content the moment
+// they render — which is the trap, because a view that waits and *doesn't*
+// declare it is indistinguishable from one that never waits, and reports ready
+// over a body that is plainly working. Spreadsheet and SV inspector were exactly
+// that until they got the getter, and a spreadsheet mounts no displays, so no
+// display-level wait covered for them either.
+//
+// LGV, dotplot, synteny, circular and breakpoint-split paint a spinner in place
+// of their whole body meanwhile. Spreadsheet is the exception and keeps its
+// import wizard mounted with a spinner above it, since the chosen file, type and
+// assembly are worth more on screen than a bare loading screen — the phase is
+// about the model, not about which component is mounted.
+//
+// Two values, not one per render branch: an import form is finished content, not
+// a pending state, so it reports ready like anything else.
+function viewPhase(view) {
+    return 'showLoading' in view && view.showLoading === true
+        ? 'loading'
+        : 'ready';
+}
 const useStyles = makeStyles()(theme => ({
     viewContainer: {
         margin: theme.spacing(0.5),
         padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
         overflow: 'clip',
+        // xref https://stackoverflow.com/questions/43909940/why-does-overflowhidden-prevent-positionsticky-from-working
+        // note that contain:paint also seems to work
+        // `:focus-visible`, never `:focus`. The container carries tabIndex={0}, and
+        // a click on any non-focusable descendant of a tabbable node focuses that
+        // node — so on `:focus` this ring would appear around the whole view on
+        // essentially every click, which is a visible regression for every existing
+        // mouse user. `:focus-visible`'s heuristic excludes exactly that case.
+        //
+        // Inset (`outlineOffset: -2`) because `overflow: clip` above and the
+        // scroll port this sits in would clip a ring drawn outside the border box.
+        //
+        // `secondary.contrastText`, which is the same token the header's icons take,
+        // because inset is what decides the color: the ring lands entirely on this
+        // element's own secondary-colored band, so it has to contrast with THAT and
+        // not with the page. `primary.main` was the reflex and is midnight (#0D233F)
+        // against grape (#721E63) — drawn, measured on screen, and all but invisible.
+        // contrastText is the one token guaranteed legible on this background
+        // whatever an embedder's theme sets.
+        '&:focus-visible': {
+            outline: `2px solid ${theme.palette.secondary.contrastText}`,
+            outlineOffset: -2,
+        },
     },
     focusedView: {
         background: theme.palette.secondary.main,
@@ -19,31 +97,73 @@ const useStyles = makeStyles()(theme => ({
         background: theme.palette.secondary.dark,
     },
 }));
-const ViewContainer = observer(function ViewContainer({ view, session, }) {
-    const theme = useTheme();
-    const ref = useWidthSetter(view, theme.spacing(1));
+const ViewContainer = observer(function ViewContainer({ view, session, scrollOnMount, }) {
+    const ref = useWidthSetter(view);
     const { classes } = useStyles();
+    const { ref: bodyRef, visible, measuredHeight, } = useViewVisibility(VIEW_VISIBILITY_ROOT_MARGIN);
+    useFocusOnInteraction(ref, () => {
+        session.setFocusedViewId(view.id);
+    });
+    // A minimized view renders no body, so it neither mounts the (GPU-heavy) view
+    // component nor reserves placeholder scroll-space; a spacer would otherwise
+    // re-expand the collapsed view to its pre-minimize height as soon as it
+    // scrolled out of the viewport.
+    const { minimized } = view;
+    const showBody = visible && !minimized;
+    const reserveSpace = !visible && !minimized;
+    // Tell the view whether its body is in the DOM. A display's phase counts its
+    // first paint as pending work, and a body that was never mounted has no
+    // canvas to paint — so without this an off-screen view holds the whole app's
+    // readiness marker at `loading` forever. See `BaseViewModel.bodyMounted`.
     useEffect(() => {
-        function handleSelectView(e) {
-            if (e.target instanceof Element && ref.current?.contains(e.target)) {
-                session.setFocusedViewId(view.id);
-            }
+        if (isAlive(view)) {
+            view.setBodyMounted(showBody);
         }
-        document.addEventListener('mousedown', handleSelectView);
-        document.addEventListener('keydown', handleSelectView);
-        return () => {
-            document.removeEventListener('mousedown', handleSelectView);
-            document.removeEventListener('keydown', handleSelectView);
-        };
-    }, [ref, session, view]);
+    }, [view, showBody]);
+    // ...and tell it when this container goes away entirely, which is the case
+    // the effect above cannot see: React unmounts without running it again, so a
+    // view whose container left the DOM went on claiming a mounted body. The
+    // workspace does that on every tab switch — only the tab being shown is
+    // mounted (`WorkspaceLayout/CLAUDE.md`) — and the view it switched away from
+    // parked the app's readiness marker at `loading` for the rest of the session.
+    //
+    // Its own effect, depending on the view alone, so it fires on an actual
+    // unmount and not between the two writes of a `showBody` change: those writes
+    // are MST actions, so a false the container did not mean would reach every
+    // display's phase before the true landed.
+    useEffect(() => () => {
+        if (isAlive(view)) {
+            view.setBodyMounted(false);
+        }
+    }, [view]);
+    // Only this container tracks focus now, not its header: with the arrow icon
+    // in its own observer (ViewFocusIndicator) the header's props are unchanged
+    // for every view but the two the focus moved between, so mobx-react's memo
+    // holds and one click re-renders two headers rather than all of them.
     const backgroundColorClassName = session.focusedViewId === view.id
         ? classes.focusedView
         : classes.unfocusedView;
-    const viewContainerClassName = cx(classes.viewContainer, backgroundColorClassName);
-    return (_jsxs(Paper, { ref: ref, elevation: 12, className: viewContainerClassName, "data-testid": `view-container-${view.id}`, children: [_jsx(ViewHeader, { view: view, onClose: () => {
-                    session.removeView(view);
-                }, onMinimize: () => {
-                    view.setMinimized(!view.minimized);
-                }, className: backgroundColorClassName }), _jsx(Paper, { elevation: 0, children: _jsx(ViewWrapper, { view: view, session: session }) })] }));
+    // Same title `ViewContainerTitle` shows, recomputed rather than shared through
+    // a ref or aria-labelledby: the visible one lives inside an EditableTypography
+    // whose rendered node is an <input> while it is being edited, and a label
+    // pointing at an input reads back as the input, not as the name. Both of its
+    // inputs (`displayName`, `assemblyNames`) are cold — a rename and a change of
+    // displayed region — so this adds no per-frame read.
+    const { assemblyManager } = session;
+    return (_jsxs(Paper, { ref: ref, elevation: 12, className: cx(classes.viewContainer, backgroundColorClassName), 
+        // The view's one tab stop, and the only thing that makes the ctrl/cmd +
+        // arrow shortcuts reachable without a mouse: they are gated on
+        // `session.focusedViewId`, which `useFocusOnInteraction` now assigns from
+        // `focusin`. It goes on the outermost node so there is exactly one stop
+        // per view ahead of the header's own buttons, and so every view type gets
+        // it rather than each one growing its own.
+        tabIndex: 0, 
+        // A tab stop with no role and no name announces as nothing. `region` is
+        // the conservative reading — it is what the session's view stack is, a set
+        // of labelled panels — and a named region shows up in a screen reader's
+        // 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 }) })] }));
 });
 export default ViewContainer;

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

@@ -1,5 +1,5 @@
 import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes';
 declare const ViewContainerTitle: ({ view, }: {
     view: IBaseViewModel;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default ViewContainerTitle;

package/esm/ui/App/ViewContainerTitle.js

@@ -4,10 +4,17 @@ import { getSession } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
+import { viewTitle } from './viewTitle.js';
 const useStyles = makeStyles()(theme => ({
     input: {
         paddingBottom: 0,
         paddingTop: 2,
+        // long view titles (e.g. a read-vs-ref panel named after a long PacBio
+        // QNAME) truncate with an ellipsis instead of overflowing the header
+        maxWidth: 300,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
     },
     inputBase: {
         color: theme.palette.secondary.contrastText,
@@ -25,8 +32,8 @@ const useStyles = makeStyles()(theme => ({
 const ViewContainerTitle = observer(function ViewContainerTitle({ view, }) {
     const { classes } = useStyles();
     const { assemblyManager } = getSession(view);
-    return (_jsx(Tooltip, { title: "Rename view", arrow: true, children: _jsx(EditableTypography, { value: view.displayName ||
-                `${view.assemblyNames?.map(r => assemblyManager.get(r)?.displayName).join(',') || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => {
+    const title = viewTitle(view, r => assemblyManager.getDisplayName(r));
+    return (_jsx(Tooltip, { title: `${title} (click to rename)`, arrow: true, children: _jsx(EditableTypography, { value: title, setValue: val => {
                 view.setDisplayName(val);
             }, variant: "body2", classes: {
                 input: classes.input,

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

@@ -0,0 +1,18 @@
+import type { AbstractViewModel, SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
+/**
+ * What a view that threw during render is replaced by: which view died, the
+ * error itself, and the two ways out that are not reloading the application.
+ *
+ * Retry clears the boundary and remounts the view component — worth offering
+ * because a good share of these are transient (a lazy chunk that failed to
+ * fetch, a GPU context lost). Close goes through the session's `removeView`,
+ * which detaches before it destroys; nothing here may destroy the node itself
+ * (ADR-069).
+ */
+declare const ViewErrorFallback: ({ view, session, error, onRetry, }: {
+    view: AbstractViewModel;
+    session: SessionWithFocusedViewAndDrawerWidgets;
+    error: unknown;
+    onRetry: () => void;
+}) => import("react").JSX.Element;
+export default ViewErrorFallback;

package/esm/ui/App/ViewErrorFallback.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ErrorBanner } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Button } from '@mui/material';
+import { observer } from 'mobx-react';
+import { viewTitle } from './viewTitle.js';
+const useStyles = makeStyles()(theme => ({
+    which: {
+        padding: `${theme.spacing(1)} ${theme.spacing(1)} 0`,
+    },
+}));
+// The fallback must not be able to throw. What crashes a view is often one of
+// its own getters, and `viewTitle` reads `assemblyNames`, which is one — so
+// naming the view is exactly where a fallback can rethrow, and a rethrow here
+// goes to the app boundary and puts up FatalErrorDialog, i.e. the whole-page
+// failure this boundary exists to avoid. `displayName` and `type` are plain
+// properties and cannot.
+function safeViewTitle(view, session) {
+    try {
+        return viewTitle(view, r => session.assemblyManager.getDisplayName(r));
+    }
+    catch {
+        return view.displayName ?? 'Untitled view';
+    }
+}
+/**
+ * What a view that threw during render is replaced by: which view died, the
+ * error itself, and the two ways out that are not reloading the application.
+ *
+ * Retry clears the boundary and remounts the view component — worth offering
+ * because a good share of these are transient (a lazy chunk that failed to
+ * fetch, a GPU context lost). Close goes through the session's `removeView`,
+ * which detaches before it destroys; nothing here may destroy the node itself
+ * (ADR-069).
+ */
+const ViewErrorFallback = observer(function ViewErrorFallback({ view, session, error, onRetry, }) {
+    const { classes } = useStyles();
+    return (_jsxs("div", { children: [_jsx("div", { className: classes.which, children: `The ${view.type} "${safeViewTitle(view, session)}" could not be displayed` }), _jsx(ErrorBanner, { error: error, onReset: onRetry, extraAction: _jsx(Button, { "data-testid": "close_crashed_view", onClick: () => {
+                        session.removeView(view);
+                    }, children: "Close view" }) })] }));
+});
+export default ViewErrorFallback;

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

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

package/esm/ui/App/ViewHeader.js

@@ -2,13 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { VIEW_HEADER_HEIGHT } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
+import { VIEW_HEADER_HEIGHT_VAR, useChromeHeightVar, } from '@jbrowse/core/util/hooks';
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
-import { isSessionWithMultipleViews } from '@jbrowse/product-core';
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
 import { observer } from 'mobx-react';
-import ViewButtons from "./ViewButtons.js";
-import ViewContainerTitle from "./ViewContainerTitle.js";
-import ViewMenu from "./ViewMenu.js";
+import ViewButtons from './ViewButtons.js';
+import ViewContainerTitle from './ViewContainerTitle.js';
+import ViewMenu from './ViewMenu.js';
 const useStyles = makeStyles()(theme => ({
     icon: {
         color: theme.palette.secondary.contrastText,
@@ -18,7 +18,11 @@ const useStyles = makeStyles()(theme => ({
     },
     viewHeader: {
         display: 'flex',
-        height: VIEW_HEADER_HEIGHT,
+        // a minimum, not a height: the constant exists so the sticky boxes below
+        // can clear this one, and pinning the box to it clipped the title row at a
+        // larger root font size. `useChromeHeightVar` publishes what it actually
+        // measures, so growing here moves them rather than overlapping them
+        minHeight: VIEW_HEADER_HEIGHT,
         top: 0,
         zIndex: 900,
     },
@@ -27,22 +31,29 @@ const useStyles = makeStyles()(theme => ({
         alignItems: 'center',
     },
 }));
-const ViewHeader = observer(function ViewHeader({ view, onClose, onMinimize, className, }) {
+// The one thing in the header that depends on which view has focus, kept in its
+// own observer so the header does not. Read from ViewHeader itself,
+// `focusedViewId` made a single click re-render every view's header and the MUI
+// subtree under it (a Tooltip, three IconButtons and the menu), because an
+// observer re-renders on its own observable change whatever its props say. Here
+// a click re-renders N nodes that mostly render nothing.
+const ViewFocusIndicator = observer(function ViewFocusIndicator({ view, className, }) {
+    return getSession(view).focusedViewId === view.id ? (_jsx(KeyboardArrowRightIcon, { className: className, fontSize: "small" })) : null;
+});
+const ViewHeader = observer(function ViewHeader({ view, className, scrollOnMount, }) {
     const { classes } = useStyles();
     const scrollRef = useRef(null);
-    const session = getSession(view);
-    let stickyViewHeaders = false;
-    if (isSessionWithMultipleViews(session)) {
-        ;
-        ({ stickyViewHeaders } = session);
-    }
+    useChromeHeightVar(scrollRef, VIEW_HEADER_HEIGHT_VAR);
+    const stickyViewHeaders = getSession(view).stickyViewHeaders === true;
+    // Scroll a newly-added view into view on mount. Gated on scrollOnMount so a
+    // cold load / session restore with several views doesn't have every header
+    // race to scrollIntoView (last one wins, landing on the bottom view);
+    // ViewStack only sets it for views added after the initial render.
     useEffect(() => {
-        if (typeof jest === 'undefined' &&
-            !navigator.webdriver &&
-            window.self === window.top) {
+        if (scrollOnMount && !navigator.webdriver && window.self === window.top) {
             scrollRef.current?.scrollIntoView({ block: 'center' });
         }
-    }, []);
-    return (_jsxs("div", { ref: scrollRef, className: cx(classes.viewHeader, className), style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(ViewMenu, { model: view, IconProps: { className: classes.icon } }), _jsx("div", { className: classes.grow }), _jsxs("div", { className: classes.viewTitle, children: [session.focusedViewId === view.id ? (_jsx(KeyboardArrowRightIcon, { className: classes.icon, fontSize: "small" })) : null, _jsx(ViewContainerTitle, { view: view })] }), _jsx("div", { className: classes.grow }), _jsx(ViewButtons, { onClose: onClose, onMinimize: onMinimize, view: view })] }));
+    }, [scrollOnMount]);
+    return (_jsxs("div", { ref: scrollRef, className: cx(classes.viewHeader, className), style: { position: stickyViewHeaders ? 'sticky' : undefined }, children: [_jsx(ViewMenu, { model: view, className: classes.icon }), _jsx("div", { className: classes.grow }), _jsxs("div", { className: classes.viewTitle, children: [_jsx(ViewFocusIndicator, { view: view, className: classes.icon }), _jsx(ViewContainerTitle, { view: view })] }), _jsx("div", { className: classes.grow }), _jsx(ViewButtons, { view: view })] }));
 });
 export default ViewHeader;

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

@@ -1,11 +1,5 @@
-import type { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
 import type { SessionWithDrawerWidgets } from '@jbrowse/core/util';
-type AppSession = SessionWithDrawerWidgets & {
-    snackbarMessages: SnackbarMessage[];
-    renameCurrentSession: (arg: string) => void;
-    popSnackbarMessage: () => unknown;
-};
 declare const ViewLauncher: ({ session, }: {
-    session: AppSession;
-}) => import("react/jsx-runtime").JSX.Element;
+    session: SessionWithDrawerWidgets;
+}) => import("react").JSX.Element;
 export default ViewLauncher;

package/esm/ui/App/ViewLauncher.js

@@ -15,12 +15,14 @@ const useStyles = makeStyles()(theme => ({
 const ViewLauncher = observer(function ViewLauncher({ session, }) {
     const { classes } = useStyles();
     const { pluginManager } = getEnv(session);
-    const viewTypes = pluginManager.getViewElements();
-    const [value, setValue] = useState(viewTypes[0]?.name || '');
+    const viewTypes = pluginManager
+        .getViewElements()
+        .filter(({ viewMetadata }) => !viewMetadata.hiddenFromGUI);
+    const [value, setValue] = useState(viewTypes[0]?.name ?? '');
     return (_jsxs(Paper, { className: classes.selectPaper, children: [_jsx(Typography, { children: "Select a view to launch" }), _jsx(FormControl, { className: classes.m2, children: _jsx(Select, { value: value, onChange: event => {
                         setValue(event.target.value);
-                    }, children: viewTypes
-                        .filter(({ viewMetadata }) => !viewMetadata.hiddenFromGUI)
-                        .map(({ displayName, name }) => (_jsx(MenuItem, { value: name, children: displayName }, name))) }) }), _jsx(FormControl, { className: classes.m2, children: _jsx(Button, { onClick: () => session.addView(value, {}), variant: "contained", color: "primary", children: "Launch view" }) })] }));
+                    }, children: viewTypes.map(({ displayName, name }) => (_jsx(MenuItem, { value: name, children: displayName }, name))) }) }), _jsx(FormControl, { className: classes.m2, children: _jsx(Button, { onClick: () => {
+                        session.addView(value, {});
+                    }, variant: "contained", color: "primary", children: "Launch view" }) })] }));
 });
 export default ViewLauncher;

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

@@ -1,8 +1,6 @@
 import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models';
-import type { IconButtonProps as IconButtonPropsType, SvgIconProps } from '@mui/material';
-declare const ViewMenu: ({ model, IconProps, }: {
+declare const ViewMenu: ({ model, className, }: {
     model: IBaseViewModel;
-    IconButtonProps?: IconButtonPropsType;
-    IconProps: SvgIconProps;
-}) => import("react/jsx-runtime").JSX.Element;
+    className?: string;
+}) => import("react").JSX.Element;
 export default ViewMenu;