@jbrowse/app-core 4.3.0 → 5.0.0-beta.2

package/esm/ui/App/AppFab.js

@@ -1,26 +1,33 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { FAB_Z_INDEX } from '@jbrowse/core/ui/zIndexes';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import LaunchIcon from '@mui/icons-material/Launch';
 import { Fab, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
+// `absolute`, against the app root, rather than the `fixed` this used to
+// carry. Fixed measures against the window, and the app root is only the
+// window in a full-window app: under `--jbrowse-app-height` the app is a box
+// somewhere on a host's page (see react-app's fit-to-container example), and
+// this button was pinned to the page's corner instead of the app's. It is the
+// only way back from a minimized drawer, so it cannot be somewhere else on the
+// page.
 const useStyles = makeStyles()(theme => ({
-    left: {
-        zIndex: 10000,
-        position: 'fixed',
+    fab: {
+        zIndex: FAB_Z_INDEX,
+        position: 'absolute',
         bottom: theme.spacing(2),
+    },
+    left: {
         left: theme.spacing(2),
     },
     right: {
-        zIndex: 10000,
-        position: 'fixed',
-        bottom: theme.spacing(2),
         right: theme.spacing(2),
     },
 }));
 const AppFab = observer(function AppFab({ session, }) {
     const { minimized, activeWidgets, drawerPosition } = session;
-    const { classes } = useStyles();
-    return activeWidgets.size > 0 && minimized ? (_jsx(Tooltip, { title: "Open drawer widget", children: _jsx(Fab, { className: drawerPosition === 'right' ? classes.right : classes.left, color: "primary", "data-testid": "drawer-maximize", onClick: () => {
+    const { classes, cx } = useStyles();
+    return activeWidgets.size > 0 && minimized ? (_jsx(Tooltip, { title: "Open drawer widget", children: _jsx(Fab, { className: cx(classes.fab, drawerPosition === 'right' ? classes.right : classes.left), color: "primary", "data-testid": "drawer-maximize", onClick: () => {
                 session.showWidgetDrawer();
             }, children: _jsx(LaunchIcon, {}) }) })) : null;
 });

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

@@ -0,0 +1,43 @@
+import type { AppSession } from './types.ts';
+/**
+ * One element that says whether the whole app has finished, and what is open.
+ *
+ * `[data-app-phase="ready"]` is the entire readiness contract for anything
+ * driving JBrowse from outside — a screenshot tool, a test, an agent. Wait for
+ * that selector and you are done; there is no chain to assemble and no
+ * per-display census to take.
+ *
+ * Why it exists when `data-view-phase` and `data-display-phase` already do:
+ * those are per-element and NEGATIVE. Asking them "is everything finished"
+ * means asserting that no element carries the loading value, which is equally
+ * true of an app that has not started — and the gap is real, measured at about
+ * a second on a two-track session. A positive attribute cannot be satisfied
+ * early, because something has to render it.
+ *
+ * The census attributes beside it — `data-app-views`, `data-app-assemblies`,
+ * `data-app-tracks` (the latter two JSON arrays) — publish WHAT is open the
+ * same way the phase publishes whether it is done, so an outside reader asking
+ * "is the track I requested actually open" reads one element instead of
+ * walking `window.JBrowseSession` with its own copy of the view nesting. The
+ * walk itself is the views' own `allViews`/`ownTracks` contract (BaseViewModel
+ * derives it), so this component knows nothing about which property a
+ * container view keeps its children on either.
+ *
+ * Its own component, and `hidden`, for two reasons: an observer here subscribes
+ * to every view's phase without re-rendering the app shell around it, and a
+ * marker that is never drawn cannot be mistaken for UI or shift a layout. It is
+ * still found by `querySelector`, which is what reads it.
+ *
+ * **What it is silent about**: a display in a TERMINAL state. `error` is a
+ * finished state, so this reads `ready` over a display whose fetch failed —
+ * correctly, since nothing is still working. A capture wants more than that: it
+ * wants a picture, and an error banner is not one. `waitForDisplaysDone` after
+ * this is what draws that line, keying on the `data-display-drawn` the two
+ * comparative canvases publish from their stricter `settled` gate (see
+ * `comparativeReadiness` in `@jbrowse/synteny-core`, which holds both answers
+ * and says why an error separates them). Both harnesses do it in that order.
+ */
+declare const AppReadyMarker: ({ session, }: {
+    session: AppSession;
+}) => import("react").JSX.Element;
+export default AppReadyMarker;

package/esm/ui/App/AppReadyMarker.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+function trackLoading(track) {
+    return track.displays.some(d => d.displayPhase === 'loading');
+}
+function viewLoading(view) {
+    const flags = view;
+    return flags.showLoading === true || flags.initialized === false;
+}
+/**
+ * One element that says whether the whole app has finished, and what is open.
+ *
+ * `[data-app-phase="ready"]` is the entire readiness contract for anything
+ * driving JBrowse from outside — a screenshot tool, a test, an agent. Wait for
+ * that selector and you are done; there is no chain to assemble and no
+ * per-display census to take.
+ *
+ * Why it exists when `data-view-phase` and `data-display-phase` already do:
+ * those are per-element and NEGATIVE. Asking them "is everything finished"
+ * means asserting that no element carries the loading value, which is equally
+ * true of an app that has not started — and the gap is real, measured at about
+ * a second on a two-track session. A positive attribute cannot be satisfied
+ * early, because something has to render it.
+ *
+ * The census attributes beside it — `data-app-views`, `data-app-assemblies`,
+ * `data-app-tracks` (the latter two JSON arrays) — publish WHAT is open the
+ * same way the phase publishes whether it is done, so an outside reader asking
+ * "is the track I requested actually open" reads one element instead of
+ * walking `window.JBrowseSession` with its own copy of the view nesting. The
+ * walk itself is the views' own `allViews`/`ownTracks` contract (BaseViewModel
+ * derives it), so this component knows nothing about which property a
+ * container view keeps its children on either.
+ *
+ * Its own component, and `hidden`, for two reasons: an observer here subscribes
+ * to every view's phase without re-rendering the app shell around it, and a
+ * marker that is never drawn cannot be mistaken for UI or shift a layout. It is
+ * still found by `querySelector`, which is what reads it.
+ *
+ * **What it is silent about**: a display in a TERMINAL state. `error` is a
+ * finished state, so this reads `ready` over a display whose fetch failed —
+ * correctly, since nothing is still working. A capture wants more than that: it
+ * wants a picture, and an error banner is not one. `waitForDisplaysDone` after
+ * this is what draws that line, keying on the `data-display-drawn` the two
+ * comparative canvases publish from their stricter `settled` gate (see
+ * `comparativeReadiness` in `@jbrowse/synteny-core`, which holds both answers
+ * and says why an error separates them). Both harnesses do it in that order.
+ */
+const AppReadyMarker = observer(function AppReadyMarker({ session, }) {
+    const views = session.views.flatMap(v => v.allViews);
+    const tracks = views.flatMap(v => v.ownTracks);
+    const loading = views.some(viewLoading) || tracks.some(trackLoading);
+    return (_jsx("span", { hidden: true, "data-testid": "app-ready-marker", "data-app-phase": loading ? 'loading' : 'ready', "data-app-views": session.views.length, "data-app-assemblies": JSON.stringify([
+            ...new Set(views.flatMap(v => v.assemblyNames ?? [])),
+        ]), "data-app-tracks": JSON.stringify(tracks.map(t => t.configuration.trackId ?? '(unnamed)')) }));
+});
+export default AppReadyMarker;

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

@@ -1,18 +1,6 @@
-import type { MenuItem as JBMenuItem } from '@jbrowse/core/ui/Menu';
-import type { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
-import type { SessionWithDrawerWidgets } from '@jbrowse/core/util';
-interface Menu {
-    label: string;
-    menuItems: JBMenuItem[] | (() => JBMenuItem[]);
-}
-type AppSession = SessionWithDrawerWidgets & {
-    menus: () => Menu[];
-    snackbarMessages: SnackbarMessage[];
-    renameCurrentSession: (arg: string) => void;
-    popSnackbarMessage: () => unknown;
-};
+import type { AppSession } from './types.ts';
 declare const AppToolbar: ({ session, HeaderButtons, }: {
     HeaderButtons?: React.ReactElement;
     session: AppSession;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default AppToolbar;

package/esm/ui/App/AppToolbar.js

@@ -21,39 +21,38 @@ const useStyles = makeStyles()(theme => ({
         borderColor: theme.palette.secondary.main,
         backgroundColor: theme.palette.primary.light,
     },
+    logo: {
+        // stretch to the toolbar height so the logo's height follows the bar
+        // rather than a hardcoded pixel value
+        alignSelf: 'stretch',
+        display: 'flex',
+        alignItems: 'center',
+        // autofit any logo (custom <img> or the default svg): full toolbar height
+        // with auto width preserves aspect ratio, maxWidth caps horizontal room
+        '& img, & svg': {
+            height: '100%',
+            width: 'auto',
+            maxWidth: 150,
+            objectFit: 'contain',
+        },
+    },
 }));
-function wrapMenuItems(items, session) {
-    return items.map(item => ({
-        ...item,
-        ...('onClick' in item
-            ? {
-                onClick: () => {
-                    item.onClick(session);
-                },
-            }
-            : {}),
-        ...('subMenu' in item
-            ? { subMenu: wrapMenuItems(item.subMenu, session) }
-            : {}),
-    }));
-}
 const AppToolbar = observer(function AppToolbar({ session, HeaderButtons = _jsx("div", {}), }) {
     const { classes } = useStyles();
     const { name, menus } = session;
-    return (_jsxs(Toolbar, { children: [menus().map(menu => (_jsx(DropDownMenu, { menuTitle: menu.label, menuItems: () => {
-                    const items = typeof menu.menuItems === 'function'
-                        ? menu.menuItems()
-                        : menu.menuItems;
-                    return wrapMenuItems(items, session);
+    return (_jsxs(Toolbar, { children: [menus().map(menu => (_jsx(DropDownMenu, { menuTitle: menu.label, menuItems: menu.menuItems, 
+                // a root model's menu items take the session as their argument, and
+                // the renderer decides how to invoke onClick — so this is the whole
+                // binding. It used to be a recursive rewrite of every row of every
+                // menu, rebuilt on each open, to arrive at the same call
+                onMenuItemClick: callback => {
+                    callback(session);
                 } }, menu.label))), _jsx("div", { className: classes.grow }), _jsx(Tooltip, { title: "Rename session", arrow: true, children: _jsx(EditableTypography, { value: name, variant: "body1", classes: {
                         inputBase: classes.inputBase,
                         inputRoot: classes.inputRoot,
                         inputFocused: classes.inputFocused,
                     }, setValue: newName => {
                         session.renameCurrentSession(newName);
-                    } }) }), HeaderButtons, _jsx("div", { className: classes.grow }), _jsx("div", { style: {
-                    width: 150,
-                    maxHeight: 48,
-                }, children: _jsx(AppLogo, { session: session }) })] }));
+                    } }) }), HeaderButtons, _jsx("div", { className: classes.grow }), _jsx("div", { className: classes.logo, children: _jsx(AppLogo, { session: session }) })] }));
 });
 export default AppToolbar;

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

@@ -1,12 +1,6 @@
-import type { SnackbarMessage } from '@jbrowse/core/ui/SnackbarModel';
-import type { AbstractViewContainer, SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
-type SessionType = SessionWithFocusedViewAndDrawerWidgets & AbstractViewContainer & {
-    renameCurrentSession: (arg: string) => void;
-    snackbarMessages: SnackbarMessage[];
-    popSnackbarMessage: () => unknown;
-};
+import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util';
 interface Props {
-    session: SessionType;
+    session: SessionWithFocusedViewAndDrawerWidgets;
 }
-declare const ClassicViewsContainer: ({ session, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const ClassicViewsContainer: ({ session, }: Props) => import("react").JSX.Element;
 export default ClassicViewsContainer;

package/esm/ui/App/ClassicViewsContainer.js

@@ -1,21 +1,22 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { persistentScrollbarStyle } from '@jbrowse/core/ui/persistentScrollbarStyle';
+import { useScrollPortHeightVar } from '@jbrowse/core/util/hooks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
-import ViewContainer from "./ViewContainer.js";
-const useStyles = makeStyles()({
+import ViewStack from './ViewStack.js';
+const useStyles = makeStyles()(theme => ({
     container: {
         height: '100%',
         width: '100%',
         gridRow: 'components',
         overflowY: 'auto',
+        ...persistentScrollbarStyle(theme),
     },
-    spacer: {
-        height: 300,
-    },
-});
+}));
 const ClassicViewsContainer = observer(function ClassicViewsContainer({ session, }) {
     const { classes } = useStyles();
     const { views } = session;
-    return (_jsxs("div", { className: classes.container, children: [views.map(view => (_jsx(ViewContainer, { view: view, session: session }, view.id))), _jsx("div", { className: classes.spacer })] }));
+    const ref = useScrollPortHeightVar();
+    return (_jsx("div", { ref: ref, className: classes.container, children: _jsx(ViewStack, { views: views, session: session }) }));
 });
 export default ClassicViewsContainer;

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

@@ -1,5 +1,21 @@
 import type { AbstractSessionModel } from '@jbrowse/core/util';
+/**
+ * The session's dialog, and the boundary that keeps a dialog that throws from
+ * being an application-wide failure.
+ *
+ * `core/ui/Dialog` already wraps its own CHILDREN, which covers a dialog body
+ * that throws. It cannot cover the dialog component's own render, and that is
+ * where the reachable case is: a launch dialog resolves its source with
+ * `getSession` / `getContainingView` off a track, and "Replace current view"
+ * destroys the view that track lives in. This queue renders under `App`, above
+ * every per-view boundary, so without this the next one up is the product's —
+ * jbrowse-web's fatal-error dialog, which takes every view the user had open.
+ * ADR-069, and `cancer_sv/multihop_split_view` is the figure it took.
+ *
+ * Keyed on the component so the queue advancing to a different dialog clears a
+ * banner belonging to the one before it.
+ */
 declare const DialogQueue: ({ session, }: {
     session: AbstractSessionModel;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react").JSX.Element | null;
 export default DialogQueue;

package/esm/ui/App/DialogQueue.js

@@ -1,8 +1,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense } from 'react';
+import { Dialog, ErrorMessage } from '@jbrowse/core/ui';
+import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
+import { DialogContent } from '@mui/material';
 import { observer } from 'mobx-react';
+// `removeActiveDialog` is BaseSession's, and every product session composes it,
+// but `AbstractSessionModel` does not declare it — so it is asked for rather
+// than assumed. A session without it leaves the fallback's close button doing
+// nothing, which is still better than the page it replaces.
+function dismissActiveDialog(session) {
+    ;
+    session.removeActiveDialog?.();
+}
+/**
+ * The session's dialog, and the boundary that keeps a dialog that throws from
+ * being an application-wide failure.
+ *
+ * `core/ui/Dialog` already wraps its own CHILDREN, which covers a dialog body
+ * that throws. It cannot cover the dialog component's own render, and that is
+ * where the reachable case is: a launch dialog resolves its source with
+ * `getSession` / `getContainingView` off a track, and "Replace current view"
+ * destroys the view that track lives in. This queue renders under `App`, above
+ * every per-view boundary, so without this the next one up is the product's —
+ * jbrowse-web's fatal-error dialog, which takes every view the user had open.
+ * ADR-069, and `cancer_sv/multihop_split_view` is the figure it took.
+ *
+ * Keyed on the component so the queue advancing to a different dialog clears a
+ * banner belonging to the one before it.
+ */
 const DialogQueue = observer(function DialogQueue({ session, }) {
     const { DialogComponent, DialogProps } = session;
-    return DialogComponent ? (_jsx(Suspense, { fallback: null, children: _jsx(DialogComponent, { ...DialogProps }) })) : null;
+    return DialogComponent ? (_jsx(ErrorBoundary, { resetKeys: [DialogComponent], FallbackComponent: ({ error }) => (_jsx(Dialog, { open: true, title: "Error", onClose: () => {
+                dismissActiveDialog(session);
+            }, children: _jsx(DialogContent, { children: _jsx(ErrorMessage, { error: error }) }) })), children: _jsx(Suspense, { fallback: null, children: _jsx(DialogComponent, { ...DialogProps }) }) })) : null;
 });
 export default DialogQueue;

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

@@ -2,5 +2,5 @@ import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/
 declare const Drawer: ({ children, session, }: {
     children: React.ReactNode;
     session: SessionWithFocusedViewAndDrawerWidgets;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default Drawer;

package/esm/ui/App/Drawer.js

@@ -1,45 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
-import ResizeHandle from '@jbrowse/core/ui/ResizeHandle';
-import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Paper } from '@mui/material';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useFocusOnInteraction } from '@jbrowse/core/util/hooks';
+import { Drawer as DrawerShell } from '@jbrowse/product-core';
 import { observer } from 'mobx-react';
-const useStyles = makeStyles()(theme => ({
-    paper: {
-        overflowY: 'auto',
-        height: '100%',
-        position: 'relative',
-        zIndex: theme.zIndex.drawer,
-        outline: 'none',
-        background: theme.palette.background.default,
-    },
-    resizeHandle: {
-        width: 4,
-        position: 'fixed',
-        top: 0,
-        zIndex: theme.zIndex.drawer + 1,
-    },
-}));
 const Drawer = observer(function Drawer({ children, session, }) {
-    const { drawerPosition, drawerWidth } = session;
-    const { classes } = useStyles();
     const ref = useRef(null);
-    useEffect(() => {
-        function handleSelectView(e) {
-            if (e.target instanceof Element && ref.current?.contains(e.target)) {
-                const visibleWidgetId = session.visibleWidget?.view?.id;
-                if (visibleWidgetId) {
-                    session.setFocusedViewId(visibleWidgetId);
-                }
-            }
+    useFocusOnInteraction(ref, () => {
+        const visibleWidgetId = session.visibleWidget?.view?.id;
+        if (visibleWidgetId) {
+            session.setFocusedViewId(visibleWidgetId);
         }
-        document.addEventListener('mousedown', handleSelectView);
-        document.addEventListener('keydown', handleSelectView);
-        return () => {
-            document.removeEventListener('mousedown', handleSelectView);
-            document.removeEventListener('keydown', handleSelectView);
-        };
-    }, [session]);
-    return (_jsxs(Paper, { ref: ref, className: classes.paper, elevation: 16, square: true, children: [drawerPosition === 'right' ? (_jsx(ResizeHandle, { onDrag: session.resizeDrawer, className: classes.resizeHandle, vertical: true })) : null, children, drawerPosition === 'left' ? (_jsx(ResizeHandle, { onDrag: session.resizeDrawer, className: classes.resizeHandle, style: { left: drawerWidth }, vertical: true })) : null] }));
+    });
+    return (_jsx(DrawerShell, { session: session, ref: ref, children: children }));
 });
 export default Drawer;

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

@@ -1,5 +1 @@
-import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
-declare const DrawerControls: ({ session, }: {
-    session: SessionWithFocusedViewAndDrawerWidgets;
-}) => import("react/jsx-runtime").JSX.Element;
-export default DrawerControls;
+export { DrawerControls as default } from '@jbrowse/product-core';

package/esm/ui/App/DrawerControls.js

@@ -1,25 +1 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import CloseIcon from '@mui/icons-material/Close';
-import MinimizeIcon from '@mui/icons-material/Minimize';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import { IconButton, Menu, MenuItem, Tooltip } from '@mui/material';
-import { observer } from 'mobx-react';
-const DrawerControls = observer(function DrawerControls({ session, }) {
-    const [anchorEl, setAnchorEl] = useState(null);
-    const { drawerPosition, visibleWidget } = session;
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { color: "inherit", onClick: event => {
-                    setAnchorEl(event.currentTarget);
-                }, children: _jsx(MoreVertIcon, {}) }), _jsx(Tooltip, { title: "Minimize drawer", children: _jsx(IconButton, { "data-testid": "drawer-minimize", color: "inherit", onClick: () => {
-                        session.notify(`Drawer minimized, click button on ${drawerPosition} side of screen to re-open`, 'info');
-                        session.minimizeWidgetDrawer();
-                    }, children: _jsx(MinimizeIcon, {}) }) }), _jsx(Tooltip, { title: "Close drawer", children: _jsx(IconButton, { color: "inherit", onClick: () => {
-                        session.hideWidget(visibleWidget);
-                    }, children: _jsx(CloseIcon, {}) }) }), _jsx(Menu, { anchorEl: anchorEl, open: Boolean(anchorEl), onClose: () => {
-                    setAnchorEl(null);
-                }, children: ['left', 'right'].map(option => (_jsx(MenuItem, { selected: drawerPosition === 'option', onClick: () => {
-                        session.setDrawerPosition(option);
-                        setAnchorEl(null);
-                    }, children: option }, option))) })] }));
-});
-export default DrawerControls;
+export { DrawerControls as default } from '@jbrowse/product-core';

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

@@ -1,7 +1,6 @@
 import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
-declare const DrawerHeader: ({ session, setToolbarHeight, onPopoutDrawer, }: {
+declare const DrawerHeader: ({ session, setToolbarHeight, }: {
     session: SessionWithFocusedViewAndDrawerWidgets;
     setToolbarHeight: (arg: number) => void;
-    onPopoutDrawer: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DrawerHeader;

package/esm/ui/App/DrawerHeader.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy } from 'react';
+import { Suspense, lazy, useCallback } from 'react';
 import { getEnv } from '@jbrowse/core/util';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { DrawerWidgetSelector } from '@jbrowse/product-core';
 import LaunchIcon from '@mui/icons-material/Launch';
 import { AppBar, IconButton, Toolbar, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-import DrawerControls from "./DrawerControls.js";
-import DrawerWidgetSelector from "./DrawerWidgetSelector.js";
-const DrawerHeaderHelpButton = lazy(() => import("./DrawerHeaderHelpButton.js"));
+import DrawerControls from './DrawerControls.js';
+const DrawerHeaderHelpButton = lazy(() => import('./DrawerHeaderHelpButton.js'));
 const useStyles = makeStyles()(theme => ({
     spacer: {
         flexGrow: 1,
@@ -19,7 +19,7 @@ const useStyles = makeStyles()(theme => ({
         background: theme.palette.secondary.dark,
     },
 }));
-const DrawerHeader = observer(function DrawerHeader({ session, setToolbarHeight, onPopoutDrawer, }) {
+const DrawerHeader = observer(function DrawerHeader({ session, setToolbarHeight, }) {
     const { classes } = useStyles();
     const focusedViewId = session.focusedViewId;
     const { visibleWidget } = session;
@@ -28,13 +28,27 @@ const DrawerHeader = observer(function DrawerHeader({ session, setToolbarHeight,
     const widgetType = visibleWidget
         ? pluginManager.getWidgetType(visibleWidget.type)
         : undefined;
-    const { helpText } = widgetType || {};
+    const { helpText } = widgetType ?? {};
+    // Measured, and re-measured: the toolbar's height is the room a virtualized
+    // widget subtracts from the box it is given, and it changes without this
+    // component re-rendering -- MUI's Toolbar is 56px under the `sm` breakpoint
+    // and 64 above it, and grows again with the root font size. Read once at
+    // mount, a widget's list was that much too tall for the rest of the session.
+    const appBarRef = useCallback((node) => {
+        const publish = () => {
+            setToolbarHeight(node.getBoundingClientRect().height);
+        };
+        publish();
+        const observer = new ResizeObserver(publish);
+        observer.observe(node);
+        return () => {
+            observer.disconnect();
+        };
+    }, [setToolbarHeight]);
     return (_jsx(AppBar, { position: "sticky", className: focusedViewId === viewWidgetId
             ? classes.headerFocused
-            : classes.headerUnfocused, ref: ref => {
-            setToolbarHeight(ref?.getBoundingClientRect().height || 0);
-        }, children: _jsxs(Toolbar, { disableGutters: true, children: [_jsx(DrawerWidgetSelector, { session: session }), _jsx(Tooltip, { title: "Open drawer in dialog", children: _jsx(IconButton, { color: "inherit", onClick: () => {
-                            onPopoutDrawer();
+            : classes.headerUnfocused, ref: appBarRef, children: _jsxs(Toolbar, { disableGutters: true, children: [_jsx(DrawerWidgetSelector, { session: session }), _jsx(Tooltip, { title: "Open drawer in dialog", children: _jsx(IconButton, { color: "inherit", "data-testid": "drawer-popout", onClick: () => {
+                            session.popoutWidget();
                         }, children: _jsx(LaunchIcon, {}) }) }), helpText ? (_jsx(Suspense, { fallback: null, children: _jsx(DrawerHeaderHelpButton, { helpText: helpText, session: session }) })) : null, _jsx("div", { className: classes.spacer }), _jsx(DrawerControls, { session: session })] }) }));
 });
 export default DrawerHeader;

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

@@ -2,5 +2,5 @@ import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/
 declare const DrawerHeaderHelpButton: ({ session, helpText, }: {
     session: SessionWithFocusedViewAndDrawerWidgets;
     helpText: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DrawerHeaderHelpButton;

package/esm/ui/App/DrawerHeaderHelpButton.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { lazy } from 'react';
-import HelpOutline from '@mui/icons-material/HelpOutline';
+import HelpOutlined from '@mui/icons-material/HelpOutlined';
 import { IconButton, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react';
-const DrawerHeaderHelpDialog = lazy(() => import("./DrawerHeaderHelpDialog.js"));
+const DrawerHeaderHelpDialog = lazy(() => import('./DrawerHeaderHelpDialog.js'));
 const DrawerHeaderHelpButton = observer(function DrawerHeaderHelpButton({ session, helpText, }) {
     return (_jsx(Tooltip, { title: "Help", children: _jsx(IconButton, { color: "inherit", onClick: () => {
                 session.queueDialog(handleClose => [
@@ -13,6 +13,6 @@ const DrawerHeaderHelpButton = observer(function DrawerHeaderHelpButton({ sessio
                         helpText,
                     },
                 ]);
-            }, children: _jsx(HelpOutline, {}) }) }));
+            }, children: _jsx(HelpOutlined, {}) }) }));
 });
 export default DrawerHeaderHelpButton;

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

@@ -1,4 +1,4 @@
 export default function DrawerHeaderHelpDialog({ onClose, helpText, }: {
-    onClose: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    onClose: () => void;
     helpText: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/App/DrawerHeaderHelpDialog.js

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

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

@@ -1,5 +1,5 @@
 import type { SessionWithFocusedViewAndDrawerWidgets } from '@jbrowse/core/util/types';
 declare const DrawerWidget: ({ session, }: {
     session: SessionWithFocusedViewAndDrawerWidgets;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default DrawerWidget;

package/esm/ui/App/DrawerWidget.js

@@ -1,27 +1,15 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useState } from 'react';
-import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
-import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
-import { getEnv } from '@jbrowse/core/util';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { WidgetBody } from '@jbrowse/product-core';
 import { observer } from 'mobx-react';
-import Drawer from "./Drawer.js";
-import DrawerHeader from "./DrawerHeader.js";
-const ModalWidget = lazy(() => import("./ModalWidget.js"));
+import Drawer from './Drawer.js';
+import DrawerHeader from './DrawerHeader.js';
 const DrawerWidget = observer(function DrawerWidget({ session, }) {
     const { visibleWidget } = session;
-    const { pluginManager } = getEnv(session);
-    const DrawerComponent = visibleWidget
-        ? pluginManager.evaluateExtensionPoint('Core-replaceWidget', pluginManager.getWidgetType(visibleWidget.type).ReactComponent, {
-            session,
-            model: visibleWidget,
-        })
-        : null;
+    // we track the toolbar height because components that use virtualized
+    // height want to be able to fill the contained, minus the toolbar height
+    // (the position static/sticky is included in AutoSizer estimates)
     const [toolbarHeight, setToolbarHeight] = useState(0);
-    const [popoutDrawer, setPopoutDrawer] = useState(false);
-    return (_jsxs(Drawer, { session: session, children: [_jsx(DrawerHeader, { onPopoutDrawer: () => {
-                    setPopoutDrawer(true);
-                }, session: session, setToolbarHeight: setToolbarHeight }), _jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(ErrorBoundary, { FallbackComponent: ({ error }) => _jsx(ErrorMessage, { error: error }), children: DrawerComponent ? (popoutDrawer ? (_jsxs(_Fragment, { children: [_jsx("div", { children: "Opened in dialog..." }), _jsx(ModalWidget, { session: session, onClose: () => {
-                                    setPopoutDrawer(false);
-                                } })] })) : (_jsxs(_Fragment, { children: [_jsx(DrawerComponent, { model: visibleWidget, session: session, toolbarHeight: toolbarHeight }), _jsx("div", { style: { height: 300 } })] }))) : null }) })] }));
+    return (_jsxs(Drawer, { session: session, children: [_jsx(DrawerHeader, { session: session, setToolbarHeight: setToolbarHeight }), visibleWidget ? (_jsx(WidgetBody, { session: session, widget: visibleWidget, toolbarHeight: toolbarHeight })) : null] }));
 });
 export default DrawerWidget;

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

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