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

package/esm/index.js

@@ -1,9 +1,13 @@
-export * from "./ui/index.js";
-export * from "./HistoryManagement/index.js";
-export * from "./AppFocus/index.js";
-export * from "./JBrowseConfig/index.js";
-export * from "./JBrowseModel/index.js";
-export * from "./Assemblies/index.js";
-export * from "./RootMenu/index.js";
-export * from "./DockviewLayout/index.js";
-export * from "./menus.js";
+export { App, AppReadyMarker, DialogQueue } from './ui/index.js';
+export { HistoryManagementMixin } from './HistoryManagement/index.js';
+export { DEFAULT_SHARE_URL, JBrowseConfigF } from './JBrowseConfig/index.js';
+export { JBrowseModelF } from './JBrowseModel/index.js';
+export { AssembliesMixin } from './Assemblies/index.js';
+export { AppSessionMixin } from './AppSession/index.js';
+export { RootAppMenuMixin } from './RootMenu/index.js';
+export { WorkspaceLayoutMixin, isSessionWithWorkspaceLayout, } from './WorkspaceLayout/index.js';
+export { addSessionTracks, buildLgvInit, buildLgvInitFromParams, hubConnectionSpec, loadSessionSpec, parseSessionSpecUrl, readHubUrlParam, readNavParam, readTracklistParam, shortHubLabel, splitHighlights, } from './SessionSpec/index.js';
+// URL params, for the two products that own their page (web, desktop). An
+// embedded product must not rewrite its host's URL — see queryParams.ts
+export { deleteQueryParams, readAllQueryParams, readQueryParams, setQueryParams, useQueryParam, } from './queryParams.js';
+export { processMutableMenuActions, resolveMenus } from './menus.js';

package/esm/menus.d.ts

@@ -1,74 +1,75 @@
-import type { MenuItem } from '@jbrowse/core/ui';
-interface InsertInSubMenuAction {
-    type: 'insertInSubMenu';
-    menuPath: string[];
-    menuItem: MenuItem;
-    position: number;
-}
-interface InsertInMenuAction {
-    type: 'insertInMenu';
+import type { MenuItem, MenuItemsGetter } from '@jbrowse/core/ui';
+/**
+ * Ensure a top-level menu exists. `position` appends when omitted and counts
+ * from the end when negative. A menu whose label is already on the bar is left
+ * where it is — labels are the bar's identity (they key the React elements and
+ * they are how an item contribution names its target), so two of them is never
+ * what a caller wanted.
+ */
+interface AddMenuAction {
+    type: 'addMenu';
     menuName: string;
-    menuItem: MenuItem;
-    position: number;
-}
-interface AppendToMenuAction {
-    type: 'appendToMenu';
-    menuName: string;
-    menuItem: MenuItem;
+    position?: number;
 }
-interface AppendToSubMenuAction {
-    type: 'appendToSubMenu';
+/**
+ * Add one item at `menuPath` — the top-level menu, then any sub-menus, which
+ * are created as needed. `position` appends when omitted and counts from the
+ * end when negative.
+ */
+interface AddItemAction {
+    type: 'addItem';
     menuPath: string[];
     menuItem: MenuItem;
-}
-interface AppendMenuAction {
-    type: 'appendMenu';
-    menuName: string;
-}
-interface InsertMenuAction {
-    type: 'insertMenu';
-    menuName: string;
-    position: number;
+    position?: number;
 }
 interface SetMenusAction {
     type: 'setMenus';
-    newMenus: Menu[];
+    newMenus: MenuDefinition[];
+}
+/**
+ * `addMenu`/`setMenus` change which menus exist, so they resolve eagerly — the
+ * app bar renders one button per menu before anything is opened. `addItem` only
+ * changes a menu's contents, so it resolves when that menu opens, against
+ * whatever its items are at that moment.
+ */
+export type MenuAction = AddMenuAction | AddItemAction | SetMenusAction;
+/**
+ * A menu as a root model authors it. Items may be a plain array, or a thunk for
+ * a menu whose contents depend on state that would otherwise be read — and so
+ * tracked — every time the app bar renders.
+ */
+export interface MenuDefinition {
+    label: string;
+    menuItems: MenuItemsGetter;
 }
-export type MenuAction = InsertMenuAction | AppendMenuAction | AppendToSubMenuAction | AppendToMenuAction | InsertInMenuAction | InsertInSubMenuAction | SetMenusAction;
+/**
+ * A menu as the app bar consumes it. Always a thunk returning a fresh array: a
+ * menu's items are produced when it opens and never before, so no consumer has
+ * to care which form the root model authored, and a plugin's contributions are
+ * merged in at that point rather than spliced into the definition.
+ */
 export interface Menu {
     label: string;
-    menuItems: MenuItem[];
+    menuItems: () => MenuItem[];
 }
-export declare function appendMenu({ menus, menuName, }: {
-    menus: Menu[];
-    menuName: string;
-}): number;
-export declare function insertMenu({ menus, menuName, position, }: {
-    menus: Menu[];
-    menuName: string;
-    position: number;
-}): number;
-export declare function appendToMenu({ menus, menuName, menuItem, }: {
-    menus: Menu[];
-    menuName: string;
-    menuItem: MenuItem;
-}): number;
-export declare function insertInMenu({ menus, menuName, menuItem, position, }: {
-    menus: Menu[];
-    menuName: string;
-    menuItem: MenuItem;
-    position: number;
-}): number;
-export declare function appendToSubMenu({ menus, menuPath, menuItem, }: {
-    menus: Menu[];
-    menuPath: string[];
-    menuItem: MenuItem;
-}): number;
-export declare function insertInSubMenu({ menus, menuPath, menuItem, position, }: {
-    menus: Menu[];
-    menuPath: string[];
-    menuItem: MenuItem;
-    position: number;
-}): number;
-export declare function processMutableMenuActions(ret: Menu[], actions: MenuAction[]): Menu[];
+/**
+ * Resolve a root model's menu definitions against the contributions plugins
+ * have pushed (via `RootAppMenuMixin`). Structural contributions apply now;
+ * item contributions are recorded against their target menu and applied when
+ * that menu opens, so a menu that computes its items lazily stays lazy and
+ * nothing is ever spliced into a definition.
+ *
+ * Runs on every `menus()` evaluation, so it must not mutate `base` or anything
+ * an action carries.
+ */
+export declare function processMutableMenuActions(base: MenuDefinition[], actions: MenuAction[]): Menu[];
+/**
+ * Flatten resolved menus to plain data by opening every one of them. For tests
+ * and other callers that want to assert on menu contents rather than render
+ * them.
+ */
+export declare function resolveMenus(menus: Menu[]): {
+    label: string;
+    menuItems: MenuItem[];
+}[];
 export {};

package/esm/menus.js

@@ -1,99 +1,146 @@
-export function appendMenu({ menus, menuName, }) {
-    return menus.push({ label: menuName, menuItems: [] });
+// a contribution that threw is reported once rather than on every open — the
+// menu re-resolves on each open and, while open, on each observer re-render
+const reported = new WeakSet();
+/**
+ * The action log is permanent; the menu it builds is thrown away when the menu
+ * closes. Everything a resolution walks therefore has to belong to the
+ * throwaway, because resolving a path is a **write**:
+ * `appendToSubMenu(['Add', 'My plugin'], two)` means "find the array labelled
+ * My plugin and push into it".
+ *
+ * So when an earlier action is what supplied that array —
+ * `appendToMenu('Add', { label: 'My plugin', subMenu: [one] })` — and it goes
+ * into the menu by reference, the push lands in the stored action instead. The
+ * next open replays a log that now reads `subMenu: [one, two]` and pushes
+ * again, so the sub-menu gains an item on every open, and on every observer
+ * re-render while open.
+ *
+ * Cloning is what keeps the two apart: the copy is what the path resolves to
+ * and what gets written, and it dies with the open. Leaf items are shared by
+ * reference — nothing writes into them — so this costs an allocation only for
+ * the rows that nest.
+ */
+function cloneMenuItem(item) {
+    return 'subMenu' in item
+        ? { ...item, subMenu: cloneMenuItems(item.subMenu) }
+        : item;
 }
-export function insertMenu({ menus, menuName, position, }) {
-    menus.splice((position < 0 ? menus.length : 0) + position, 0, {
-        label: menuName,
-        menuItems: [],
-    });
-    return menus.length;
+function cloneMenuItems(items) {
+    return items.map(item => cloneMenuItem(item));
 }
-export function appendToMenu({ menus, menuName, menuItem, }) {
-    const menu = menus.find(m => m.label === menuName);
-    if (!menu) {
-        menus.push({ label: menuName, menuItems: [menuItem] });
-        return 1;
-    }
-    return menu.menuItems.push(menuItem);
+function materialize(menuItems) {
+    return typeof menuItems === 'function' ? menuItems() : menuItems;
 }
-export function insertInMenu({ menus, menuName, menuItem, position, }) {
-    const menu = menus.find(m => m.label === menuName);
-    if (!menu) {
-        menus.push({ label: menuName, menuItems: [menuItem] });
-        return 1;
-    }
-    const insertPosition = position < 0 ? menu.menuItems.length + position : position;
-    menu.menuItems.splice(insertPosition, 0, menuItem);
-    return menu.menuItems.length;
+// splice is already the "counts from the end when negative" rule, and clamps
+// rather than wrapping past the start; the default is what makes it an append
+function insertAt(items, item, position = items.length) {
+    items.splice(position, 0, item);
 }
-export function appendToSubMenu({ menus, menuPath, menuItem, }) {
-    let topMenu = menus.find(m => m.label === menuPath[0]);
-    if (!topMenu) {
-        const idx = appendMenu({ menus, menuName: menuPath[0] });
-        topMenu = menus[idx - 1];
-    }
-    let { menuItems: subMenu } = topMenu;
-    const pathSoFar = [menuPath[0]];
-    for (const menuName of menuPath.slice(1)) {
-        pathSoFar.push(menuName);
-        let sm = subMenu.find(mi => 'label' in mi && mi.label === menuName);
-        if (!sm) {
-            const idx = subMenu.push({ label: menuName, subMenu: [] });
-            sm = subMenu[idx - 1];
-        }
-        if (!('subMenu' in sm)) {
-            throw new Error(`"${menuName}" in path "${pathSoFar}" is not a subMenu`);
+/**
+ * Walk `menuPath` past its first segment (the top-level menu, already
+ * resolved), creating empty sub-menus as needed, and return the deepest
+ * sub-menu's item array. Throws if a path segment names an item that is not a
+ * sub-menu.
+ */
+function resolveSubMenu(items, menuPath) {
+    let level = items;
+    for (const [idx, menuName] of menuPath.slice(1).entries()) {
+        let sub = level.find((mi) => 'subMenu' in mi && mi.label === menuName);
+        if (!sub) {
+            if (level.some(mi => 'label' in mi && mi.label === menuName)) {
+                const pathSoFar = menuPath.slice(0, idx + 2).join(' > ');
+                throw new Error(`"${menuName}" in path "${pathSoFar}" is not a subMenu`);
+            }
+            sub = { label: menuName, subMenu: [] };
+            level.push(sub);
         }
-        subMenu = sm.subMenu;
+        level = sub.subMenu;
     }
-    return subMenu.push(menuItem);
+    return level;
 }
-export function insertInSubMenu({ menus, menuPath, menuItem, position, }) {
-    let topMenu = menus.find(m => m.label === menuPath[0]);
-    if (!topMenu) {
-        const idx = appendMenu({ menus, menuName: menuPath[0] });
-        topMenu = menus[idx - 1];
-    }
-    let { menuItems: subMenu } = topMenu;
-    const pathSoFar = [menuPath[0]];
-    for (const menuName of menuPath.slice(1)) {
-        pathSoFar.push(menuName);
-        let sm = subMenu.find(mi => 'label' in mi && mi.label === menuName);
-        if (!sm) {
-            const idx = subMenu.push({ label: menuName, subMenu: [] });
-            sm = subMenu[idx - 1];
+// each contribution is applied independently: a plugin that names a bad path
+// loses its own item rather than every other plugin's, and never the session —
+// this runs from the app bar's click handler, where a throw goes straight
+// through React
+function applyItemActions(items, actions) {
+    for (const action of actions) {
+        try {
+            const target = resolveSubMenu(items, action.menuPath);
+            // cloned rather than inserted by reference — see cloneMenuItem
+            insertAt(target, cloneMenuItem(action.menuItem), action.position);
         }
-        if (!('subMenu' in sm)) {
-            throw new Error(`"${menuName}" in path "${pathSoFar}" is not a subMenu`);
+        catch (error) {
+            if (!reported.has(action)) {
+                reported.add(action);
+                console.error(error);
+            }
         }
-        subMenu = sm.subMenu;
     }
-    subMenu.splice(position, 0, menuItem);
-    return subMenu.length;
+    return items;
+}
+// first menu with this label, or a new empty one — an item action naming a menu
+// that doesn't exist creates it, so a plugin can populate its own menu without
+// declaring it first
+function findOrCreateMenu(pending, label, position) {
+    const found = pending.find(m => m.label === label);
+    if (found) {
+        return found;
+    }
+    const menu = { label, base: [], itemActions: [] };
+    insertAt(pending, menu, position);
+    return menu;
 }
-export function processMutableMenuActions(ret, actions) {
+function toMenu({ label, base, itemActions }) {
+    return {
+        label,
+        menuItems: () => applyItemActions(cloneMenuItems(materialize(base)), itemActions),
+    };
+}
+/**
+ * Resolve a root model's menu definitions against the contributions plugins
+ * have pushed (via `RootAppMenuMixin`). Structural contributions apply now;
+ * item contributions are recorded against their target menu and applied when
+ * that menu opens, so a menu that computes its items lazily stays lazy and
+ * nothing is ever spliced into a definition.
+ *
+ * Runs on every `menus()` evaluation, so it must not mutate `base` or anything
+ * an action carries.
+ */
+export function processMutableMenuActions(base, actions) {
+    const toPending = (m) => ({
+        label: m.label,
+        base: m.menuItems,
+        itemActions: [],
+    });
+    let pending = base.map(toPending);
     for (const action of actions) {
-        if (action.type === 'setMenus') {
-            ret = action.newMenus;
-        }
-        else if (action.type === 'appendMenu') {
-            appendMenu({ menus: ret, ...action });
-        }
-        else if (action.type === 'insertMenu') {
-            insertMenu({ menus: ret, ...action });
-        }
-        else if (action.type === 'insertInSubMenu') {
-            insertInSubMenu({ menus: ret, ...action });
-        }
-        else if (action.type === 'appendToSubMenu') {
-            appendToSubMenu({ menus: ret, ...action });
-        }
-        else if (action.type === 'appendToMenu') {
-            appendToMenu({ menus: ret, ...action });
-        }
-        else if (action.type === 'insertInMenu') {
-            insertInMenu({ menus: ret, ...action });
+        switch (action.type) {
+            case 'setMenus': {
+                // replaces the menu bar wholesale, so item contributions made before it
+                // are dropped along with the menus they targeted
+                pending = action.newMenus.map(toPending);
+                break;
+            }
+            case 'addMenu': {
+                findOrCreateMenu(pending, action.menuName, action.position);
+                break;
+            }
+            case 'addItem': {
+                findOrCreateMenu(pending, action.menuPath[0]).itemActions.push(action);
+                break;
+            }
+            default: {
+                action;
+            }
         }
     }
-    return ret;
+    return pending.map(m => toMenu(m));
+}
+/**
+ * Flatten resolved menus to plain data by opening every one of them. For tests
+ * and other callers that want to assert on menu contents rather than render
+ * them.
+ */
+export function resolveMenus(menus) {
+    return menus.map(m => ({ label: m.label, menuItems: m.menuItems() }));
 }

package/esm/queryParams.d.ts

@@ -0,0 +1,9 @@
+export declare function readQueryParams<T extends string>(keys: T[]): Record<T, string | undefined>;
+export declare function readAllQueryParams(): URLSearchParams;
+export declare function deleteQueryParams(keys: readonly string[]): void;
+export declare function setQueryParams(values: Record<string, string | undefined>): void;
+/**
+ * Read one param and keep re-rendering as it changes, including across the
+ * `replaceState` writes above, which fire no event of their own.
+ */
+export declare function useQueryParam(key: string): readonly [string | undefined, (newValue: string | undefined) => void];

package/esm/queryParams.js

@@ -0,0 +1,92 @@
+import { useCallback, useSyncExternalStore } from 'react';
+// The single decision of where this URL keeps its params. Computed once per
+// operation and threaded through read+write so the two can't disagree.
+function paramLocation() {
+    return window.location.hash.includes('=') ? 'hash' : 'search';
+}
+function readParams(loc) {
+    return new URLSearchParams(loc === 'hash' ? window.location.hash.slice(1) : window.location.search);
+}
+// history.replaceState fires no event, so a write has to notify readers itself.
+// popstate alone covers only back/forward, which nothing here does: desktop's
+// Loader clears its `?config=` with the very setter defined here, and with no
+// notification it kept reading the stale value and stayed on the loading screen
+// (the "fall back to the start screen" error path never arrived).
+const listeners = new Set();
+function subscribe(callback) {
+    listeners.add(callback);
+    window.addEventListener('popstate', callback);
+    return () => {
+        listeners.delete(callback);
+        window.removeEventListener('popstate', callback);
+    };
+}
+// Writes params back into `loc`, leaving the other URL component untouched — the
+// URL hash/search setters each replace only their own component.
+function writeParams(loc, params) {
+    const url = new URL(window.location.href);
+    const str = params.toString();
+    if (loc === 'hash') {
+        url.hash = str;
+    }
+    else {
+        url.search = str;
+    }
+    window.history.replaceState(null, '', url.href);
+    // Copied, which this note has claimed while the loop read the live set. A
+    // listener is React's store-change callback, and React may flush the re-render
+    // synchronously inside it, so the set can be mutated mid-notify: an unmounted
+    // reader unsubscribes (safe either way) and a remounted one re-adds itself at
+    // the end, where iterating the live set would visit it again for a change it
+    // has already read. The snapshot makes who gets notified for one change fixed
+    // before the first call.
+    for (const listener of [...listeners]) {
+        listener();
+    }
+}
+export function readQueryParams(keys) {
+    const params = readParams(paramLocation());
+    const result = {};
+    for (const key of keys) {
+        result[key] = params.get(key) ?? undefined;
+    }
+    return result;
+}
+// Reads the full current param set from wherever this URL keeps them (hash XOR
+// search). Producers that need every param at once (buildShareUrl) share this
+// so the hash/search decision stays in this one module.
+export function readAllQueryParams() {
+    return readParams(paramLocation());
+}
+export function deleteQueryParams(keys) {
+    const loc = paramLocation();
+    const params = readParams(loc);
+    for (const key of keys) {
+        params.delete(key);
+    }
+    writeParams(loc, params);
+}
+export function setQueryParams(values) {
+    const loc = paramLocation();
+    const params = readParams(loc);
+    for (const [key, value] of Object.entries(values)) {
+        if (value === undefined) {
+            params.delete(key);
+        }
+        else {
+            params.set(key, value);
+        }
+    }
+    writeParams(loc, params);
+}
+/**
+ * Read one param and keep re-rendering as it changes, including across the
+ * `replaceState` writes above, which fire no event of their own.
+ */
+export function useQueryParam(key) {
+    const value = useSyncExternalStore(subscribe, () => readParams(paramLocation()).get(key), () => null);
+    const setValue = useCallback((newValue) => {
+        setQueryParams({ [key]: newValue });
+    }, [key]);
+    return [value ?? undefined, setValue];
+}

package/esm/sessionModelFactory.d.ts

@@ -0,0 +1,18 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { BaseAssemblyConfigSchema } from '@jbrowse/core/assemblyManager/assemblyConfigSchema';
+import type { IAnyType } from '@jbrowse/mobx-state-tree';
+/**
+ * What each app product's root model takes as its `sessionModelFactory`
+ * argument: the root builds the assembly config schema once and hands it to the
+ * session model, so the session's assembly slots are the same type the root's
+ * are rather than a second schema built from the same plugins.
+ *
+ * One name for the three roots that take it (web, desktop, react-app). They had
+ * a copy each, and two of them spelled the schema as a local
+ * `ReturnType<typeof assemblyConfigSchemaFactory>` alias — which is what
+ * `BaseAssemblyConfigSchema` already is.
+ */
+export type SessionModelFactory = (args: {
+    pluginManager: PluginManager;
+    assemblyConfigSchema: BaseAssemblyConfigSchema;
+}) => IAnyType;

package/esm/sessionModelFactory.js

@@ -0,0 +1 @@
+export {};

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

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

package/esm/ui/App/App.js

@@ -2,42 +2,55 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy } from 'react';
 import Snackbar from '@jbrowse/core/ui/Snackbar';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { ModalWidget, drawerGridTemplateColumns } from '@jbrowse/product-core';
 import { AppBar } from '@mui/material';
 import { observer } from 'mobx-react';
-import AppFab from "./AppFab.js";
-import AppToolbar from "./AppToolbar.js";
-import DialogQueue from "./DialogQueue.js";
-import ViewsContainer from "./ViewsContainer.js";
-const DrawerWidget = lazy(() => import("./DrawerWidget.js"));
+import AppFab from './AppFab.js';
+import AppReadyMarker from './AppReadyMarker.js';
+import AppToolbar from './AppToolbar.js';
+import DialogQueue from './DialogQueue.js';
+import ViewsContainer from './ViewsContainer.js';
+import { lazyChunk } from './lazyChunk.js';
+// lazies
+const DrawerWidget = lazy(lazyChunk('DrawerWidget', () => import('./DrawerWidget.js')));
 const useStyles = makeStyles()(theme => ({
     root: {
         display: 'grid',
-        height: '100vh',
+        // Embedders can fit the app to its container by setting the
+        // --jbrowse-app-height CSS variable (e.g. to 100%); it defaults to the
+        // full viewport for standalone/full-window use.
+        height: 'var(--jbrowse-app-height, 100vh)',
+        // the containing block for AppFab, which floats over the app rather than
+        // over the page
+        position: 'relative',
+        // pin the single implicit row to the container height so appContainer
+        // fills it (an auto row would instead grow to content and overflow)
+        gridTemplateRows: 'minmax(0, 1fr)',
         width: '100%',
         colorScheme: theme.palette.mode,
     },
     appContainer: {
         gridColumn: 'main',
         display: 'grid',
-        gridTemplateRows: '[menubar] min-content [components] auto',
-        height: '100vh',
+        gridTemplateRows: '[menubar] min-content [components] minmax(0, 1fr)',
+        height: '100%',
     },
     appBar: {
         flexGrow: 1,
         gridRow: 'menubar',
     },
 }));
-const LazyDrawerWidget = observer(function LazyDrawerWidget(props) {
-    const { session } = props;
-    return (_jsx(Suspense, { fallback: null, children: _jsx(DrawerWidget, { session: session }) }));
-});
 const App = observer(function App(props) {
     const { session } = props;
     const { classes } = useStyles();
-    const { minimized, visibleWidget, drawerWidth, drawerPosition } = session;
-    const drawerVisible = visibleWidget && !minimized;
-    const d = drawerVisible ? `[drawer] ${drawerWidth}px` : undefined;
-    const grid = drawerPosition === 'right' ? ['[main] 1fr', d] : [d, '[main] 1fr'];
-    return (_jsxs("div", { className: classes.root, style: { gridTemplateColumns: grid.filter(f => !!f).join(' ') }, children: [drawerVisible && drawerPosition === 'left' ? (_jsx(LazyDrawerWidget, { session: session })) : null, _jsx(DialogQueue, { session: session }), _jsxs("div", { className: classes.appContainer, children: [_jsx(AppBar, { className: classes.appBar, position: "static", children: _jsx(AppToolbar, { ...props }) }), _jsx(ViewsContainer, { ...props })] }), _jsx(AppFab, { session: session }), drawerVisible && drawerPosition === 'right' ? (_jsx(LazyDrawerWidget, { session: session })) : null, _jsx(Snackbar, { session: session })] }));
+    const { drawerVisible, drawerWidth, drawerPosition, poppedOut } = session;
+    const gridTemplateColumns = drawerGridTemplateColumns({
+        drawerVisible,
+        drawerPosition,
+        drawerWidth,
+    });
+    return (_jsxs("div", { className: classes.root, style: { gridTemplateColumns }, children: [poppedOut ? (_jsx(ModalWidget, { session: session, onClose: () => {
+                    session.returnWidgetToDrawer();
+                } })) : null, _jsx(DialogQueue, { session: session }), _jsxs("div", { className: classes.appContainer, children: [_jsx(AppBar, { className: classes.appBar, position: "static", "data-testid": "app-bar", children: _jsx(AppToolbar, { ...props }) }), _jsx(ViewsContainer, { ...props })] }), _jsx(AppFab, { session: session }), _jsx(AppReadyMarker, { session: session }), drawerVisible ? (_jsx(Suspense, { fallback: null, children: _jsx(DrawerWidget, { session: session }) })) : null, _jsx(Snackbar, { session: session })] }));
 });
 export { App };

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

@@ -1,5 +1,14 @@
-import type { SessionWithDrawerWidgets } from '@jbrowse/core/util';
+import type { DrawerPosition } from '@jbrowse/core/util';
+/** All the FAB needs of a session, narrowed the way `DrawerChromeSession` is. */
+export interface AppFabSession {
+    minimized: boolean;
+    activeWidgets: {
+        size: number;
+    };
+    drawerPosition: DrawerPosition;
+    showWidgetDrawer: () => void;
+}
 declare const AppFab: ({ session, }: {
-    session: SessionWithDrawerWidgets;
-}) => import("react/jsx-runtime").JSX.Element | null;
+    session: AppFabSession;
+}) => import("react").JSX.Element | null;
 export default AppFab;