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

package/esm/index.js

@@ -1,9 +1,16 @@
-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, DialogQueue, preloadAppFrame, preloadAppShell, } 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';
+// The helper library an agent drives the app through: desktop serves it to
+// run_javascript over MCP, web hands it to the page as window.jb
+export { createJbApi, ensureReExports, safeJson, sessionOf, undeliveredNotifications, waitReady, } from './JbApi/index.js';

package/esm/menus.d.ts

@@ -1,74 +1,61 @@
-import type { MenuItem } from '@jbrowse/core/ui';
-interface InsertInSubMenuAction {
-    type: 'insertInSubMenu';
+import type { MenuItem } from '@jbrowse/core/ui/menuItems';
+/**
+ * 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;
+    position?: number;
+}
+/**
+ * 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;
-    position: number;
-}
-interface InsertInMenuAction {
-    type: 'insertInMenu';
-    menuName: string;
-    menuItem: MenuItem;
-    position: number;
-}
-interface AppendToMenuAction {
-    type: 'appendToMenu';
-    menuName: string;
-    menuItem: MenuItem;
-}
-interface AppendToSubMenuAction {
-    type: 'appendToSubMenu';
-    menuPath: string[];
-    menuItem: MenuItem;
-}
-interface AppendMenuAction {
-    type: 'appendMenu';
-    menuName: string;
-}
-interface InsertMenuAction {
-    type: 'insertMenu';
-    menuName: string;
-    position: number;
-}
-interface SetMenusAction {
-    type: 'setMenus';
-    newMenus: Menu[];
-}
-export type MenuAction = InsertMenuAction | AppendMenuAction | AppendToSubMenuAction | AppendToMenuAction | InsertInMenuAction | InsertInSubMenuAction | SetMenusAction;
+    position?: number;
+}
+/**
+ * `addMenu` changes which menus exist, so it resolves 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;
+/**
+ * A top-level menu. `menuItems` is a thunk the app bar calls when the menu
+ * opens and never before, so a root model's reads stay out of the bar's
+ * tracking scope and a plugin's contributions are merged onto each fresh
+ * result rather than spliced into a definition.
+ */
 export interface Menu {
+    label: string;
+    menuItems: () => MenuItem[];
+}
+/**
+ * Resolve a root model's menus against the contributions plugins have pushed
+ * (via `RootAppMenuMixin`). Structural contributions apply now; item
+ * contributions are grouped by path and merged when the menu they target
+ * opens.
+ *
+ * Runs on every `menus()` evaluation, so it must not mutate `base` or anything
+ * an action carries.
+ */
+export declare function processMutableMenuActions(base: Menu[], 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 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[];
+}[];
 export {};

package/esm/menus.js

@@ -1,99 +1,130 @@
-export function appendMenu({ menus, menuName, }) {
-    return menus.push({ label: menuName, menuItems: [] });
-}
-export function insertMenu({ menus, menuName, position, }) {
-    menus.splice((position < 0 ? menus.length : 0) + position, 0, {
-        label: menuName,
-        menuItems: [],
-    });
-    return menus.length;
-}
-export function appendToMenu({ menus, menuName, menuItem, }) {
-    const menu = menus.find(m => m.label === menuName);
-    if (!menu) {
-        menus.push({ label: menuName, menuItems: [menuItem] });
-        return 1;
+// a conflict is reported once rather than on every open — the menu re-resolves
+// on each open and, while open, on each observer re-render — and the action is
+// what outlives the nodes, which are rebuilt on every menus() evaluation
+const reported = new WeakSet();
+function register(node, action, depth) {
+    const label = action.menuPath[depth];
+    if (label === undefined) {
+        node.entries.push(action);
     }
-    return menu.menuItems.push(menuItem);
-}
-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;
+    else {
+        let entry = node.entries.find((e) => e.type === 'subMenu' && e.label === label);
+        if (!entry) {
+            entry = {
+                type: 'subMenu',
+                label,
+                path: action.menuPath.slice(0, depth + 1),
+                node: { entries: [] },
+                first: action,
+            };
+            node.entries.push(entry);
+        }
+        register(entry.node, action, depth + 1);
     }
-    const insertPosition = position < 0 ? menu.menuItems.length + position : position;
-    menu.menuItems.splice(insertPosition, 0, menuItem);
-    return menu.menuItems.length;
 }
-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];
+// 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);
+}
+// the author's form is kept: an array sub-menu resolves now, a thunk sub-menu
+// resolves when its panel opens, with the contributions merged in either way
+function withContributions(item, node) {
+    const { subMenu } = item;
+    return {
+        ...item,
+        subMenu: typeof subMenu === 'function'
+            ? () => apply(subMenu(), node)
+            : apply(subMenu, node),
+    };
+}
+/**
+ * Return a copy of `items` with a node's contributions merged in. Nothing is
+ * written into `items`, into any sub-menu it holds, or into a contribution's
+ * own payload: a sub-menu that gains contributions is replaced by a copy whose
+ * `subMenu` resolves them, so the arrays behind a definition or an action are
+ * the same on every open.
+ *
+ * A path segment naming a row that is not a sub-menu is a plugin bug. It
+ * costs that subtree of contributions, reported once, and nothing else — this
+ * runs from the app bar's click handler, where a throw goes straight through
+ * React.
+ */
+function apply(items, node) {
+    const result = [...items];
+    for (const entry of node.entries) {
+        if (entry.type === 'addItem') {
+            insertAt(result, entry.menuItem, entry.position);
         }
-        if (!('subMenu' in sm)) {
-            throw new Error(`"${menuName}" in path "${pathSoFar}" is not a subMenu`);
+        else {
+            const idx = result.findIndex(mi => 'label' in mi && mi.label === entry.label);
+            const found = result[idx];
+            if (found === undefined) {
+                result.push({ label: entry.label, subMenu: apply([], entry.node) });
+            }
+            else if ('subMenu' in found) {
+                result[idx] = withContributions(found, entry.node);
+            }
+            else if (!reported.has(entry.first)) {
+                reported.add(entry.first);
+                console.error(new Error(`"${entry.label}" in path "${entry.path.join(' > ')}" is not a subMenu`));
+            }
         }
-        subMenu = sm.subMenu;
     }
-    return subMenu.push(menuItem);
+    return result;
 }
-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];
+// 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;
     }
-    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`);
-        }
-        subMenu = sm.subMenu;
-    }
-    subMenu.splice(position, 0, menuItem);
-    return subMenu.length;
+    const menu = {
+        label,
+        menuItems: () => [],
+        node: { entries: [] },
+    };
+    insertAt(pending, menu, position);
+    return menu;
 }
-export function processMutableMenuActions(ret, actions) {
+/**
+ * Resolve a root model's menus against the contributions plugins have pushed
+ * (via `RootAppMenuMixin`). Structural contributions apply now; item
+ * contributions are grouped by path and merged when the menu they target
+ * opens.
+ *
+ * Runs on every `menus()` evaluation, so it must not mutate `base` or anything
+ * an action carries.
+ */
+export function processMutableMenuActions(base, actions) {
+    const pending = base.map(m => ({ ...m, node: { entries: [] } }));
     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 'addMenu': {
+                findOrCreateMenu(pending, action.menuName, action.position);
+                break;
+            }
+            case 'addItem': {
+                register(findOrCreateMenu(pending, action.menuPath[0]).node, action, 1);
+                break;
+            }
+            default: {
+                action;
+            }
         }
     }
-    return ret;
+    return pending.map(({ label, menuItems, node }) => ({
+        label,
+        menuItems: () => apply(menuItems(), node),
+    }));
+}
+/**
+ * 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(url?: URL | Location): 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,93 @@
+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(url = window.location) {
+    return url.hash.includes('=') ? 'hash' : 'search';
+}
+function readParams(loc, url = window.location) {
+    return new URLSearchParams(loc === 'hash' ? url.hash.slice(1) : url.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 param set from wherever a URL keeps them (hash XOR search),
+// the page's own by default. Producers that need every param at once
+// (buildShareUrl) share this so the hash/search decision stays in this one
+// module.
+export function readAllQueryParams(url = window.location) {
+    return readParams(paramLocation(url), url);
+}
+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

@@ -1,43 +1,63 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy } from 'react';
+import { Suspense, useEffect } from 'react';
 import Snackbar from '@jbrowse/core/ui/Snackbar';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { AppBar } from '@mui/material';
+import { AppReadyMarker, ModalWidget, drawerGridTemplateColumns, } from '@jbrowse/product-core';
+import { AppBar, useMediaQuery, useTheme } 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 AppToolbar from './AppToolbar.js';
+import DialogQueue from './DialogQueue.js';
+import ViewsContainer from './ViewsContainer.js';
+import { DrawerWidget } from './lazyParts.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)',
+        // an implicit column floors at the toolbar's min-content, which widened
+        // the page past a phone's screen rather than ellipsizing the session name
+        gridTemplateColumns: '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, modalWidgetVisible } = session;
+    // a phone has no room for a drawer column beside the views
+    const narrow = useMediaQuery(useTheme().breakpoints.down('sm'), {
+        noSsr: true,
+    });
+    useEffect(() => {
+        session.setModalWidgets(narrow);
+    }, [session, narrow]);
+    const gridTemplateColumns = drawerGridTemplateColumns({
+        drawerVisible,
+        drawerPosition,
+        drawerWidth,
+    });
+    return (_jsxs("div", { className: classes.root, style: { gridTemplateColumns }, children: [modalWidgetVisible ? (_jsx(ModalWidget, { session: session, fullScreen: narrow, onClose: () => {
+                    session.closeModalWidget();
+                } })) : 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, { session: session })] }), _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;