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

package/esm/ui/ModalWidget.d.ts

@@ -0,0 +1,13 @@
+import type { SessionWithWidgets } from '@jbrowse/core/util';
+/**
+ * Renders the session's visible widget in a modal dialog rather than a drawer.
+ * `onClose` is caller-owned: in the app the modal is a pop-out of the drawer and
+ * closing returns the widget to it, while in embedded products the modal is the
+ * only widget surface and closing must dismiss the widget outright.
+ */
+declare const ModalWidget: ({ session, onClose, fullScreen, }: {
+    session: SessionWithWidgets;
+    onClose: () => void;
+    fullScreen?: boolean;
+}) => import("react").JSX.Element | null;
+export default ModalWidget;

package/esm/ui/ModalWidget.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dialog } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { getEnv } from '@jbrowse/mobx-state-tree';
+import { Paper } from '@mui/material';
+import { observer } from 'mobx-react';
+import ModalWidgetAppBar from './ModalWidgetAppBar.js';
+import WidgetBody from './WidgetBody.js';
+const useStyles = makeStyles()({
+    paper: {
+        overflow: 'auto',
+        // the track selector's fab positions against this
+        position: 'relative',
+        width: 800,
+        maxWidth: '100%',
+        // matches the drawer's sense of "tall but not full screen", and unlike a
+        // window.innerHeight read it keeps up with a window resize
+        height: '62.5vh',
+    },
+    fullScreenDialog: {
+        '& > .MuiScopedCssBaseline-root': {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            minHeight: 0,
+        },
+    },
+    // the widget takes whatever the dialog's app bar leaves
+    fullScreenPaper: {
+        flex: 1,
+        minHeight: 0,
+        width: '100%',
+        height: 'auto',
+    },
+});
+/**
+ * Renders the session's visible widget in a modal dialog rather than a drawer.
+ * `onClose` is caller-owned: in the app the modal is a pop-out of the drawer and
+ * closing returns the widget to it, while in embedded products the modal is the
+ * only widget surface and closing must dismiss the widget outright.
+ */
+const ModalWidget = observer(function ModalWidget({ session, onClose, fullScreen = false, }) {
+    const { classes, cx } = useStyles();
+    const { visibleWidget } = session;
+    const { pluginManager } = getEnv(session);
+    return visibleWidget ? (_jsx(Dialog, { open: true, onClose: onClose, maxWidth: "xl", fullScreen: fullScreen, classes: fullScreen ? { paper: classes.fullScreenDialog } : undefined, header: _jsx(ModalWidgetAppBar, { widget: visibleWidget, pluginManager: pluginManager, onClose: onClose }), children: _jsx(Paper, { className: cx(classes.paper, fullScreen && classes.fullScreenPaper), children: _jsx(WidgetBody, { session: session, widget: visibleWidget }) }) })) : null;
+});
+export default ModalWidget;

package/esm/ui/ModalWidgetAppBar.d.ts

@@ -0,0 +1,8 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { Widget } from '@jbrowse/core/util';
+declare const ModalWidgetAppBar: ({ widget, pluginManager, onClose, }: {
+    widget: Widget;
+    pluginManager: PluginManager;
+    onClose: () => void;
+}) => import("react").JSX.Element;
+export default ModalWidgetAppBar;

package/esm/ui/ModalWidgetAppBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CloseIcon from '@mui/icons-material/Close';
+import { AppBar, Box, IconButton, Toolbar } from '@mui/material';
+import { observer } from 'mobx-react';
+import WidgetHeading from './WidgetHeading.js';
+const ModalWidgetAppBar = observer(function ModalWidgetAppBar({ widget, pluginManager, onClose, }) {
+    return (_jsx(AppBar, { position: "static", children: _jsxs(Toolbar, { children: [_jsx(WidgetHeading, { widget: widget, pluginManager: pluginManager }), _jsx(Box, { sx: { flexGrow: 1 } }), _jsx(IconButton, { color: "inherit", onClick: onClose, "data-testid": "modal-close", children: _jsx(CloseIcon, {}) })] }) }));
+});
+export default ModalWidgetAppBar;

package/esm/ui/PreferenceCheckbox.d.ts

@@ -0,0 +1,6 @@
+export default function PreferenceCheckbox({ checked, label, help, onChange, }: {
+    checked: boolean;
+    label: string;
+    help?: string;
+    onChange: (checked: boolean) => void;
+}): import("react").JSX.Element;

package/esm/ui/PreferenceCheckbox.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LabeledCheckbox } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Typography } from '@mui/material';
+const useStyles = makeStyles()({
+    row: {
+        alignItems: 'flex-start',
+        marginTop: 8,
+    },
+});
+export default function PreferenceCheckbox({ checked, label, help, onChange, }) {
+    const { classes } = useStyles();
+    return (_jsx(LabeledCheckbox, { className: classes.row, checked: checked, onChange: checked => {
+            onChange(checked);
+        }, label: _jsxs(_Fragment, { children: [_jsx(Typography, { children: label }), help ? (_jsx(Typography, { variant: "body2", color: "text.secondary", children: help })) : null] }) }));
+}

package/esm/ui/PreferencesDialog.d.ts

@@ -0,0 +1,34 @@
+import type { GeneralPreferencesSession } from './GeneralPreferencesTab.tsx';
+import type { ViewPreferencesSession } from './ViewPreferencesTab.tsx';
+import type { ResettablePreferencesSession } from './preferencesReset.ts';
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type React from 'react';
+export interface PreferencesDialogSession extends GeneralPreferencesSession, ViewPreferencesSession, ResettablePreferencesSession {
+}
+/**
+ * Descriptor returned from the `Core-preferencesDialogPanels` extension point.
+ * Each panel renders as its own tab in the dialog, labeled by `name`.
+ */
+export interface PreferencesPanelDescriptor {
+    name: string;
+    Component: React.ComponentType<{
+        session: PreferencesDialogSession;
+    }>;
+}
+declare module '@jbrowse/core/PluginManager' {
+    interface ExtensionPointRegistry {
+        'Core-preferencesDialogPanels': {
+            args: PreferencesPanelDescriptor[];
+            result: PreferencesPanelDescriptor[];
+            props: {
+                session: PreferencesDialogSession;
+            };
+        };
+    }
+}
+declare const PreferencesDialog: ({ handleClose, session, pluginManager, }: {
+    handleClose: () => void;
+    session: PreferencesDialogSession;
+    pluginManager: PluginManager;
+}) => React.JSX.Element;
+export default PreferencesDialog;

package/esm/ui/PreferencesDialog.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useState } from 'react';
+import { Dialog } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Button, DialogActions, DialogContent, Tab, Tabs } from '@mui/material';
+import { observer } from 'mobx-react';
+import GeneralPreferencesTab from './GeneralPreferencesTab.js';
+import PreferencesResetDialog from './PreferencesResetDialog.js';
+import ViewPreferencesTab from './ViewPreferencesTab.js';
+import { collectPreferenceChanges, resetAllPreferences, resetPreferenceChange, } from './preferencesReset.js';
+const useStyles = makeStyles()({
+    container: {
+        width: 800,
+        minHeight: 300,
+    },
+});
+const PreferencesDialog = observer(function PreferencesDialog({ handleClose, session, pluginManager, }) {
+    const { classes } = useStyles();
+    const [tab, setTab] = useState('general');
+    const [resetDialogOpen, setResetDialogOpen] = useState(false);
+    const pluginPanels = pluginManager.evaluateExtensionPoint(
+    /** #extensionPoint Core-preferencesDialogPanels | sync | Add tabs to the preferences dialog */
+    'Core-preferencesDialogPanels', [], { session });
+    const tabs = [
+        {
+            value: 'general',
+            label: 'General',
+            content: _jsx(GeneralPreferencesTab, { session: session }),
+        },
+        {
+            value: 'views',
+            label: 'Views',
+            content: _jsx(ViewPreferencesTab, { session: session }),
+        },
+        ...pluginPanels.map(({ name, Component }) => ({
+            value: `plugin:${name}`,
+            label: name,
+            content: (_jsx(Suspense, { fallback: null, children: _jsx(Component, { session: session }) })),
+        })),
+    ];
+    return (_jsxs(Dialog, { title: "Preferences", open: true, onClose: handleClose, maxWidth: "xl", children: [_jsx(Tabs, { value: tab, variant: "scrollable", scrollButtons: "auto", onChange: (_, value) => {
+                    setTab(value);
+                }, children: tabs.map(t => (_jsx(Tab, { value: t.value, label: t.label }, t.value))) }), _jsx(DialogContent, { className: classes.container, children: tabs.find(t => t.value === tab)?.content }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            setResetDialogOpen(true);
+                        }, children: "Reset to defaults\u2026" }), _jsx(Button, { variant: "contained", onClick: () => {
+                            handleClose();
+                        }, children: "Close" })] }), resetDialogOpen ? (_jsx(PreferencesResetDialog, { changes: collectPreferenceChanges(session), onReset: () => {
+                    resetAllPreferences(session);
+                }, onResetRow: change => {
+                    resetPreferenceChange(session, change);
+                }, onClose: () => {
+                    setResetDialogOpen(false);
+                } })) : null] }));
+});
+export default PreferencesDialog;

package/esm/ui/PreferencesResetDialog.d.ts

@@ -0,0 +1,8 @@
+import type { TrackConfigChange } from '@jbrowse/core/util';
+declare const PreferencesResetDialog: ({ changes, onReset, onResetRow, onClose, }: {
+    changes: TrackConfigChange[];
+    onReset: () => void;
+    onResetRow: (change: TrackConfigChange) => void;
+    onClose: () => void;
+}) => import("react").JSX.Element;
+export default PreferencesResetDialog;

package/esm/ui/PreferencesResetDialog.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SettingsChangesTable, SubmitDialog } from '@jbrowse/core/ui';
+import { DialogContentText, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+// Confirmation shown before "Reset to defaults" wipes every customized
+// preference. Lists exactly what will change as a Setting/Default/Current diff
+// (the same table the per-track reset uses) so the reset is never a blind
+// action. A standard modal — focus-trapped, Enter to confirm, Escape to cancel
+// — replaces the former label-swapping two-click button, which screen readers
+// and keyboard users could not follow.
+const PreferencesResetDialog = observer(function PreferencesResetDialog({ changes, onReset, onResetRow, onClose, }) {
+    return (_jsx(SubmitDialog, { open: true, title: "Reset preferences to defaults", maxWidth: "md", submitText: "Reset to defaults", submitDisabled: changes.length === 0, cancelText: "Cancel", onCancel: () => {
+            onClose();
+        }, onSubmit: () => {
+            onReset();
+            onClose();
+        }, children: changes.length ? (_jsxs(_Fragment, { children: [_jsx(DialogContentText, { children: "These preferences differ from their defaults. Reset an individual entry with its revert button, or reset them all below:" }), _jsx(SettingsChangesTable, { changes: changes, onResetRow: onResetRow })] })) : (_jsx(Typography, { children: "All preferences are already at their defaults." })) }));
+});
+export default PreferencesResetDialog;

package/esm/ui/RefNameAliasesDialog.d.ts

@@ -0,0 +1,9 @@
+import type { AbstractSessionModel } from '@jbrowse/core/util';
+export declare function formatRows(rows: [string, string[]][]): string;
+export declare function alignRows(rows: [string, string[]][]): string;
+declare const RefNameAliasesDialog: ({ assemblyName, session, onClose, }: {
+    assemblyName: string;
+    session: AbstractSessionModel;
+    onClose: () => void;
+}) => import("react").JSX.Element;
+export default RefNameAliasesDialog;

package/esm/ui/RefNameAliasesDialog.js

@@ -0,0 +1,65 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { CopyToClipboardButton, Dialog, ErrorBanner, LoadingEllipses, } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { DialogContent, TextField, Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+const MAX_ROWS = 10_000;
+const MAX_NAME_COLUMN = 30;
+const useStyles = makeStyles()(theme => ({
+    container: {
+        minWidth: 800,
+    },
+    rows: {
+        maxHeight: 300,
+        overflow: 'auto',
+        background: theme.palette.background.default,
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing(2),
+        marginBottom: theme.spacing(1),
+    },
+}));
+// what the copy button puts on the clipboard: tab-separated, so it pastes into
+// a spreadsheet as two columns
+export function formatRows(rows) {
+    return rows
+        .map(([refName, names]) => `${refName}\t${names.slice(1).join(', ')}`)
+        .join('\n');
+}
+// what the dialog shows. A tab is 8 columns wide in a <pre>, so an assembly
+// whose names straddle that (hg38's `chr7` and `chr7_GL383534v2_alt`) reads as
+// two ragged columns; padding to the widest name on screen is one. Capped, or
+// a single 60-character GenArk contig indents every alias off the right edge
+export function alignRows(rows) {
+    let width = 0;
+    for (const [refName] of rows) {
+        width = Math.max(width, refName.length);
+    }
+    const pad = Math.min(width, MAX_NAME_COLUMN);
+    return rows
+        .map(([refName, names]) => `${refName.padEnd(pad)}  ${names.slice(1).join(', ')}`)
+        .join('\n');
+}
+const RefNameAliasesDialog = observer(function RefNameAliasesDialog({ assemblyName, session, onClose, }) {
+    const { classes } = useStyles();
+    const [filter, setFilter] = useState('');
+    const assembly = session.assemblyManager.get(assemblyName);
+    // reading this is also what starts the load: assembly.afterAttach kicks
+    // load() when refNameAliases is first observed, so the dialog fills in for an
+    // assembly nothing has looked at yet instead of showing an empty table
+    const names = assembly?.namesByCanonicalRefName;
+    const query = filter.toLowerCase();
+    const rows = names
+        ? [...names].filter(([, group]) => group.some(name => name.toLowerCase().includes(query)))
+        : [];
+    const truncated = rows.length > MAX_ROWS;
+    return (_jsx(Dialog, { open: true, title: `Reference name aliases for ${assemblyName}`, onClose: () => {
+            onClose();
+        }, maxWidth: "xl", children: _jsx(DialogContent, { className: classes.container, children: assembly?.error ? (_jsx(ErrorBanner, { error: assembly.error })) : !assembly ? (_jsxs(Typography, { children: ["No assembly named ", assemblyName, " is loaded in this session"] })) : !names ? (_jsx(LoadingEllipses, { message: "Loading assembly" })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: classes.header, children: [_jsx(TextField, { label: "Filter", helperText: "Matches a reference name or any of its aliases", value: filter, onChange: event => {
+                                    setFilter(event.target.value);
+                                } }), _jsx(CopyToClipboardButton, { variant: "contained", value: () => formatRows(rows), children: "Copy ref name aliases" })] }), _jsx("pre", { className: classes.rows, children: alignRows(truncated ? rows.slice(0, MAX_ROWS) : rows) }), truncated ? (_jsxs(Typography, { variant: "caption", children: ["Showing the first ", MAX_ROWS, " of ", rows.length, " reference names; filter, or use the copy button, for the rest"] })) : null] })) }) }));
+});
+export default RefNameAliasesDialog;

package/esm/ui/RefNameInfoDialog.d.ts

@@ -1,8 +1,5 @@
-import type { AnyConfigurationModel } from '@jbrowse/core/configuration';
-import type { AbstractSessionModel } from '@jbrowse/core/util';
-declare const RefNameInfoDialog: ({ config, session, onClose, }: {
-    config: AnyConfigurationModel | Record<string, unknown>;
-    session: AbstractSessionModel;
+import type { AboutPanelProps } from './util.ts';
+declare const RefNameInfoDialog: ({ config, session, onClose, }: AboutPanelProps & {
     onClose: () => void;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default RefNameInfoDialog;

package/esm/ui/RefNameInfoDialog.js

@@ -1,10 +1,12 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { Dialog, ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { readConfObject } from '@jbrowse/core/configuration';
+import { CopyToClipboardButton, Dialog, ErrorBanner, LoadingEllipses, } from '@jbrowse/core/ui';
+import { createStatusFanOut, statusProgressLabel } from '@jbrowse/core/util';
+import { getConfAssemblyNames, getConfRpcSessionId, } from '@jbrowse/core/util/tracks';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Button, DialogContent } from '@mui/material';
+import { useFetch } from '@jbrowse/core/util/useFetch';
+import { DialogContent } from '@mui/material';
 import { observer } from 'mobx-react';
-import { readConf } from "./util.js";
 const MAX_REF_NAMES = 10_000;
 const useStyles = makeStyles()(theme => ({
     container: {
@@ -17,66 +19,46 @@ const useStyles = makeStyles()(theme => ({
         background: theme.palette.background.default,
     },
 }));
+function formatRefNames(data, truncate) {
+    return data
+        .flatMap(([assemblyName, names]) => [
+        `--- ${assemblyName} ---`,
+        ...(truncate ? names.slice(0, MAX_REF_NAMES) : names),
+        truncate && names.length > MAX_REF_NAMES
+            ? `\nToo many refNames to show in browser for ${assemblyName}, use "Copy ref names" button to copy to clipboard`
+            : '',
+    ])
+        .filter(s => s !== '')
+        .join('\n');
+}
 const RefNameInfoDialog = observer(function RefNameInfoDialog({ config, session, onClose, }) {
     const { classes } = useStyles();
-    const [error, setError] = useState();
-    const [refNames, setRefNames] = useState();
-    const [copied, setCopied] = useState(false);
     const { rpcManager } = session;
-    const trackId = readConf(config, 'trackId');
-    const assemblyNames = readConf(config, 'assemblyNames');
-    useEffect(() => {
-        ;
-        (async () => {
-            try {
-                const map = await Promise.all([...new Set(assemblyNames)].map(async (assemblyName) => {
-                    const adapterConfig = readConf(config, 'adapter');
-                    return [
-                        assemblyName,
-                        (await rpcManager.call(trackId, 'CoreGetRefNames', {
-                            adapterConfig,
-                            regions: [
-                                {
-                                    assemblyName,
-                                },
-                            ],
-                        })),
-                    ];
-                }));
-                setRefNames(Object.fromEntries(map));
-            }
-            catch (e) {
-                console.error(e);
-                setError(e);
-            }
-        })();
-    }, [config, rpcManager, trackId, assemblyNames]);
-    const names = refNames ? Object.entries(refNames) : [];
-    const result = names
-        .flatMap(([assemblyName, refNames]) => {
-        return [
-            `--- ${assemblyName} ---`,
-            ...refNames.slice(0, MAX_REF_NAMES),
-            refNames.length > MAX_REF_NAMES
-                ? `\nToo many refNames to show in browser for ${assemblyName}, use "Copy ref names" button to copy to clipboard`
-                : '',
-        ];
-    })
-        .filter(f => !!f)
-        .join('\n');
-    return (_jsx(Dialog, { open: true, title: "Reference sequence names used in track", onClose: onClose, maxWidth: "xl", children: _jsx(DialogContent, { className: classes.container, children: error ? (_jsx(ErrorMessage, { error: error })) : refNames === undefined ? (_jsx(LoadingEllipses, { message: "Loading refNames" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "contained", onClick: async () => {
-                            const { default: copy } = await import('copy-to-clipboard');
-                            copy(names
-                                .flatMap(([assemblyName, refNames]) => [
-                                `--- ${assemblyName} ---`,
-                                ...refNames,
-                            ])
-                                .filter(f => !!f)
-                                .join('\n'));
-                            setCopied(true);
-                            setTimeout(() => {
-                                setCopied(false);
-                            }, 1000);
-                        }, children: copied ? 'Copied to clipboard!' : 'Copy ref names' }), _jsx("pre", { className: classes.refNames, children: result })] })) }) }));
+    const adapterConfig = readConfObject(config, 'adapter');
+    const sessionId = getConfRpcSessionId(config);
+    const { data, error, isLoading, status } = useFetch(['CoreGetRefNames', sessionId], (_name, _sessionId, signal, statusCallback) => {
+        // one status slot per assembly, so N concurrent reads aggregate into one
+        // bar instead of the last writer winning
+        const slot = createStatusFanOut(statusCallback);
+        // A `ReferenceSequenceTrack` config declares no `assemblyNames` slot: its
+        // assembly is the config node holding it, which `getConfAssemblyNames`
+        // walks to. It throws when a config has neither, and inside the fetcher
+        // that lands in the error banner rather than out of a render
+        return Promise.all([...new Set(getConfAssemblyNames(config))].map(async (assemblyName) => [
+            assemblyName,
+            await rpcManager.call(sessionId, 'CoreGetRefNames', {
+                adapterConfig,
+                assemblyName,
+                signal,
+                statusCallback: slot(),
+            }),
+        ]));
+    });
+    // undefined here means the key was incomplete and the fetch never ran, not
+    // that one is still in flight — `isLoading` is what says that. Treating the
+    // two as the same thing is what left the dialog spinning with nothing behind
+    // it; an empty list at least says so
+    const refNames = data ?? [];
+    return (_jsx(Dialog, { open: true, title: "Reference sequence names used in track", onClose: onClose, maxWidth: "xl", children: _jsx(DialogContent, { className: classes.container, children: error ? (_jsx(ErrorBanner, { error: error })) : isLoading ? (_jsx(LoadingEllipses, { message: statusProgressLabel(status) || 'Loading refNames' })) : (_jsxs(_Fragment, { children: [_jsx(CopyToClipboardButton, { variant: "contained", value: () => formatRefNames(refNames, false), children: "Copy ref names" }), _jsx("pre", { className: classes.refNames, children: formatRefNames(refNames, true) })] })) }) }));
 });
 export default RefNameInfoDialog;

package/esm/ui/ViewPreferencesTab.d.ts

@@ -0,0 +1,12 @@
+export interface ViewPreferencesSession {
+    scrollZoom: boolean;
+    setScrollZoom: (flag: boolean) => void;
+    stickyViewHeaders: boolean;
+    setStickyViewHeaders: (sticky: boolean) => void;
+    effectiveUseWorkspaces: boolean;
+    setUseWorkspacesPreference: (useWorkspaces: boolean) => void;
+}
+declare const ViewPreferencesTab: ({ session, }: {
+    session: ViewPreferencesSession;
+}) => import("react").JSX.Element;
+export default ViewPreferencesTab;

package/esm/ui/ViewPreferencesTab.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SCROLL_ZOOM_HELP, SCROLL_ZOOM_LABEL, } from '@jbrowse/core/ui/scrollZoomLabels';
+import { FormGroup } from '@mui/material';
+import { observer } from 'mobx-react';
+import PreferenceCheckbox from './PreferenceCheckbox.js';
+const ViewPreferencesTab = observer(function ViewPreferencesTab({ session, }) {
+    return (_jsxs(FormGroup, { children: [_jsx(PreferenceCheckbox, { checked: session.scrollZoom, label: SCROLL_ZOOM_LABEL, help: SCROLL_ZOOM_HELP, onChange: checked => {
+                    session.setScrollZoom(checked);
+                } }), _jsx(PreferenceCheckbox, { checked: session.stickyViewHeaders, label: "Keep view header visible", help: "The view header stays at the top of the page while its tracks scroll under it.", onChange: checked => {
+                    session.setStickyViewHeaders(checked);
+                } }), _jsx(PreferenceCheckbox, { checked: session.effectiveUseWorkspaces, label: "Use workspaces", help: "Views open as tabs and tiles instead of stacking down the page.", onChange: checked => {
+                    session.setUseWorkspacesPreference(checked);
+                } })] }));
+});
+export default ViewPreferencesTab;

package/esm/ui/WidgetBody.d.ts

@@ -0,0 +1,18 @@
+import type { SessionWithWidgets, Widget } from '@jbrowse/core/util';
+/**
+ * Renders one widget: resolve its React component, run it through the
+ * `Core-replaceWidget` fold, and contain both its lazy chunk and its errors.
+ *
+ * Only the chrome around a widget differs between surfaces — the drawer's
+ * resizable paper and header, the modal's dialog — so this is the part all of
+ * them share, spelled once. The error boundary in particular was previously
+ * only on the drawer path: popping the same widget out to a modal turned a
+ * widget that throws during render from a banner in the widget's own area into
+ * an unhandled throw that took the app down with it.
+ */
+declare const WidgetBody: ({ session, widget, toolbarHeight, }: {
+    session: SessionWithWidgets;
+    widget: Widget;
+    toolbarHeight?: number;
+}) => import("react").JSX.Element;
+export default WidgetBody;

package/esm/ui/WidgetBody.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense } from 'react';
+import { ErrorBanner, LoadingEllipses, PluggableComponent, } from '@jbrowse/core/ui';
+import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary';
+import { getEnv } from '@jbrowse/core/util';
+import { observer } from 'mobx-react';
+/**
+ * Renders one widget: resolve its React component, run it through the
+ * `Core-replaceWidget` fold, and contain both its lazy chunk and its errors.
+ *
+ * Only the chrome around a widget differs between surfaces — the drawer's
+ * resizable paper and header, the modal's dialog — so this is the part all of
+ * them share, spelled once. The error boundary in particular was previously
+ * only on the drawer path: popping the same widget out to a modal turned a
+ * widget that throws during render from a banner in the widget's own area into
+ * an unhandled throw that took the app down with it.
+ */
+const WidgetBody = observer(function WidgetBody({ session, widget, toolbarHeight = 0, }) {
+    const { pluginManager } = getEnv(session);
+    return (_jsx(Suspense, { fallback: _jsx(LoadingEllipses, {}), children: _jsx(ErrorBoundary, { FallbackComponent: ({ error }) => _jsx(ErrorBanner, { error: error }), children: _jsx(PluggableComponent, { pluginManager: pluginManager, name: "Core-replaceWidget", component: pluginManager.getWidgetType(widget.type).ReactComponent, props: { model: widget, session, toolbarHeight } }) }) }));
+});
+export default WidgetBody;

package/esm/ui/WidgetHeading.d.ts

@@ -0,0 +1,7 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { Widget } from '@jbrowse/core/util';
+declare function WidgetHeading({ widget, pluginManager, }: {
+    widget: Widget;
+    pluginManager: PluginManager;
+}): import("react").JSX.Element;
+export default WidgetHeading;

package/esm/ui/WidgetHeading.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+function WidgetHeading({ widget, pluginManager, }) {
+    const { HeadingComponent, heading } = pluginManager.getWidgetType(widget.type);
+    return HeadingComponent ? (_jsx(HeadingComponent, { model: widget })) : (_jsx(Typography, { variant: "h6", color: "inherit", children: heading }));
+}
+export default WidgetHeading;