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

package/esm/ui/HeaderButtons.js

@@ -1,26 +1,31 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { CopyToClipboardButton } from '@jbrowse/core/ui';
+import { pluralize } from '@jbrowse/core/util';
+import { stripBaseUris } from '@jbrowse/core/util/addRelativeUris';
 import { makeStyles } from '@jbrowse/core/util/tss-react';
-import { Button } from '@mui/material';
-import { removeAttr } from "./util.js";
-const useStyles = makeStyles()({
+import { Button, Tooltip, Typography } from '@mui/material';
+const useStyles = makeStyles()(theme => ({
     button: {
         float: 'right',
     },
-});
-function HeaderButtons({ conf, setShowRefNames }) {
-    const [copied, setCopied] = useState(false);
+    // JSX drops the whitespace between two elements on separate lines, so the two
+    // contained buttons rendered edge to edge, reading as one two-tone control
+    buttons: {
+        display: 'flex',
+        gap: theme.spacing(1),
+        justifyContent: 'flex-end',
+    },
+    note: {
+        clear: 'both',
+        display: 'block',
+        textAlign: 'right',
+    },
+}));
+function HeaderButtons({ conf, hideUris, fromDisplayTypeDefaults = [], setShowRefNames, }) {
     const { classes } = useStyles();
-    return (_jsxs("span", { className: classes.button, children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
-                    setShowRefNames(true);
-                }, children: "Show ref names" }), _jsx(Button, { variant: "contained", onClick: async () => {
-                    const { default: copy } = await import('copy-to-clipboard');
-                    const snap = removeAttr(structuredClone(conf), 'baseUri');
-                    copy(JSON.stringify(snap, null, 2));
-                    setCopied(true);
-                    setTimeout(() => {
-                        setCopied(false);
-                    }, 1000);
-                }, children: copied ? 'Copied to clipboard!' : 'Copy config' })] }));
+    const n = fromDisplayTypeDefaults.length;
+    return (_jsxs("span", { className: classes.button, children: [_jsxs("span", { className: classes.buttons, children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: () => {
+                            setShowRefNames(true);
+                        }, children: "Show ref names" }), hideUris ? null : (_jsx(CopyToClipboardButton, { variant: "contained", value: () => JSON.stringify(stripBaseUris(structuredClone(conf)), null, 2), children: "Copy config" }))] }), hideUris || !n ? null : (_jsx(Tooltip, { title: fromDisplayTypeDefaults.join(', '), children: _jsxs(Typography, { variant: "caption", color: "textSecondary", className: classes.note, children: ["includes ", n, " ", pluralize(n, 'setting'), " from your session-wide defaults"] }) }))] }));
 }
 export default HeaderButtons;

package/esm/ui/ModalWidget.d.ts

@@ -0,0 +1,12 @@
+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, }: {
+    session: SessionWithWidgets;
+    onClose: () => void;
+}) => import("react").JSX.Element | null;
+export default ModalWidget;

package/esm/ui/ModalWidget.js

@@ -0,0 +1,33 @@
+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',
+    },
+});
+/**
+ * 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, }) {
+    const { classes } = useStyles();
+    const { visibleWidget } = session;
+    const { pluginManager } = getEnv(session);
+    return visibleWidget ? (_jsx(Dialog, { open: true, onClose: onClose, maxWidth: "xl", header: _jsx(ModalWidgetAppBar, { widget: visibleWidget, pluginManager: pluginManager, onClose: onClose }), children: _jsx(Paper, { className: classes.paper, 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/PreferencesDialog.d.ts

@@ -0,0 +1,56 @@
+import type PluginManager from '@jbrowse/core/PluginManager';
+import type { ThemeMap } from '@jbrowse/core/ui';
+import type { AnimationMode, TrackConfigChange } from '@jbrowse/core/util';
+import type React from 'react';
+export interface PreferencesDialogSession {
+    allThemes: () => ThemeMap;
+    themeName?: string;
+    setThemeName: (arg: string) => void;
+    stickyViewHeaders: boolean;
+    setStickyViewHeaders: (sticky: boolean) => void;
+    effectiveUseWorkspaces: boolean;
+    defaultUseWorkspaces: boolean;
+    setUseWorkspacesPreference: (useWorkspaces: boolean) => void;
+    resetUseWorkspaces: () => void;
+    animationMode: AnimationMode;
+    numberGrouping: boolean;
+    scrollZoom: boolean;
+    setScrollZoom: (flag: boolean) => void;
+    setPreferenceOverride: (key: string, value: unknown) => void;
+    clearPreferenceOverrides: () => void;
+    getPreferenceChanges: () => TrackConfigChange[];
+    resetPreferenceChange: (path: string[]) => void;
+    getDisplayTypeDefaults: () => {
+        displayType: string;
+        slot: string;
+        value: unknown;
+    }[];
+    setDisplayTypeDefault: (displayType: string, slot: string, value: unknown) => void;
+}
+/**
+ * Descriptor returned from the `Core-preferencesDialogPanels` extension point.
+ * Each panel renders as its own labeled section in the dialog.
+ */
+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,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, useState } from 'react';
+import { Dialog, LabeledCheckbox } from '@jbrowse/core/ui';
+import { SCROLL_ZOOM_HELP, SCROLL_ZOOM_LABEL, } from '@jbrowse/core/ui/scrollZoomLabels';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { Button, DialogActions, DialogContent, Divider, FormGroup, MenuItem, TextField, Typography, } from '@mui/material';
+import { observer } from 'mobx-react';
+import DisplayDefaultsSection from './DisplayDefaultsSection.js';
+import PreferencesResetDialog from './PreferencesResetDialog.js';
+const useStyles = makeStyles()({
+    container: {
+        width: 800,
+    },
+    panelHeading: {
+        marginTop: 16,
+    },
+    field: {
+        marginTop: 16,
+        display: 'block',
+    },
+});
+const PREFERENCE_SUBSYSTEMS = [
+    {
+        head: 'theme',
+        change: s => s.themeName && s.themeName !== 'default'
+            ? { path: ['theme'], from: 'default', to: s.themeName }
+            : undefined,
+        reset: s => {
+            s.setThemeName('default');
+        },
+    },
+    {
+        head: 'stickyViewHeaders',
+        change: s => s.stickyViewHeaders
+            ? undefined
+            : { path: ['stickyViewHeaders'], from: true, to: false },
+        reset: s => {
+            s.setStickyViewHeaders(true);
+        },
+    },
+    {
+        head: 'useWorkspaces',
+        // the resolved flag against the admin default, not the override map's view
+        // of it: a session-scoped value (a spec `layout`, "move view to a tab")
+        // writes no override, so the map reported nothing to reset while
+        // `resetUseWorkspaces` would plainly have turned workspaces back off —
+        // leaving the confirmation empty and its Reset button disabled
+        change: s => s.effectiveUseWorkspaces === s.defaultUseWorkspaces
+            ? undefined
+            : {
+                path: ['useWorkspaces'],
+                from: s.defaultUseWorkspaces,
+                to: s.effectiveUseWorkspaces,
+            },
+        reset: s => {
+            s.resetUseWorkspaces();
+        },
+    },
+];
+// heads the subsystems above own outright: their row states the resolved value,
+// so the session's override-map row for the same key would double-report it
+// (and disagree with it whenever the two layers differ)
+const SUBSYSTEM_HEADS = new Set(PREFERENCE_SUBSYSTEMS.map(p => p.head));
+// every preference that currently differs from its default, so the confirmation
+// dialog shows the full effect of a reset: the session override map plus each
+// non-map subsystem above.
+function collectPreferenceChanges(session) {
+    return [
+        ...session
+            .getPreferenceChanges()
+            .filter(c => !SUBSYSTEM_HEADS.has(c.path[0])),
+        ...PREFERENCE_SUBSYSTEMS.map(p => p.change(session)).filter(c => c !== undefined),
+    ];
+}
+// Reset every preference this dialog exposes back to its default: clear the
+// whole override map (scrollZoom, animationMode, all promoted display-type
+// defaults) at once, then reset each non-map subsystem through its own setter.
+function resetAllPreferences(session) {
+    session.clearPreferenceOverrides();
+    for (const p of PREFERENCE_SUBSYSTEMS) {
+        p.reset(session);
+    }
+}
+// Revert a single change row (see `collectPreferenceChanges`) to its default:
+// a non-map subsystem by matching `head`, everything else back through the
+// session that produced the row. The override map's own path shapes are the
+// session's business — it owns the composite-key layout a promoted
+// display-type default is stored under, so it also owns undoing one.
+function resetPreferenceChange(session, change) {
+    const subsystem = PREFERENCE_SUBSYSTEMS.find(p => p.head === change.path[0]);
+    if (subsystem) {
+        subsystem.reset(session);
+    }
+    else {
+        session.resetPreferenceChange(change.path);
+    }
+}
+// declarative user-preference rows backed by the session preferences-override
+// system (BaseSession getPreference/setPreferenceOverride). Add a row here to
+// surface a new preference; resolution + persistence are already handled.
+const PREFERENCE_SELECTS = [
+    {
+        key: 'animationMode',
+        label: 'Animations',
+        options: [
+            { value: 'system', label: 'Follow system (reduced motion)' },
+            { value: 'enabled', label: 'Always on' },
+            { value: 'disabled', label: 'Off' },
+        ],
+        get: session => session.animationMode,
+    },
+];
+const PreferencesDialog = observer(function PreferencesDialog({ handleClose, session, pluginManager, }) {
+    const { classes } = useStyles();
+    // a confirmation dialog (showing the exact diff) guards the destructive reset,
+    // instead of an accidental single click wiping every preference
+    const [resetDialogOpen, setResetDialogOpen] = useState(false);
+    const extraPanels = pluginManager.evaluateExtensionPoint(
+    /** #extensionPoint Core-preferencesDialogPanels | sync | Add panels to the preferences dialog */
+    'Core-preferencesDialogPanels', [], { session });
+    return (_jsxs(Dialog, { title: "Preferences", open: true, onClose: handleClose, maxWidth: "xl", children: [_jsxs(DialogContent, { className: classes.container, children: [_jsx(TextField, { select: true, variant: "outlined", label: "Theme", value: session.themeName, onChange: event => {
+                            session.setThemeName(event.target.value);
+                        }, children: Object.entries(session.allThemes()).map(([key, val]) => (_jsx(MenuItem, { value: key, children: val.name || '(Unknown name)' }, key))) }), PREFERENCE_SELECTS.map(row => (_jsx(TextField, { select: true, variant: "outlined", className: classes.field, label: row.label, value: row.get(session), onChange: event => {
+                            session.setPreferenceOverride(row.key, event.target.value);
+                        }, children: row.options.map(opt => (_jsx(MenuItem, { value: opt.value, children: opt.label }, opt.value))) }, row.key))), _jsxs(FormGroup, { children: [_jsx(LabeledCheckbox, { checked: session.scrollZoom, label: `${SCROLL_ZOOM_LABEL}: ${SCROLL_ZOOM_HELP}`, onChange: checked => {
+                                    session.setScrollZoom(checked);
+                                } }), _jsx(LabeledCheckbox, { checked: session.stickyViewHeaders, label: "Keep view header visible", onChange: checked => {
+                                    session.setStickyViewHeaders(checked);
+                                } }), _jsx(LabeledCheckbox, { checked: session.effectiveUseWorkspaces, label: "Use workspaces (tabbed/tiled view layout)", onChange: checked => {
+                                    session.setUseWorkspacesPreference(checked);
+                                } }), _jsx(LabeledCheckbox, { checked: session.numberGrouping, label: "Show thousand separators in numbers, e.g. chr1:1,234,567 vs chr1:1234567 (reload app/refresh browser page to apply)", onChange: checked => {
+                                    session.setPreferenceOverride('numberGrouping', checked);
+                                } })] }), _jsx(Divider, {}), _jsx(Typography, { variant: "subtitle1", className: classes.panelHeading, children: "Display defaults" }), _jsx(DisplayDefaultsSection, { session: session, pluginManager: pluginManager }), extraPanels.map(({ name, Component }) => (_jsxs("div", { children: [_jsx(Divider, {}), _jsx(Typography, { variant: "subtitle1", className: classes.panelHeading, children: name }), _jsx(Suspense, { fallback: null, children: _jsx(Component, { session: session }) })] }, name)))] }), _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,13 @@
-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 { readConfSlot } from '@jbrowse/core/configuration';
+import { CopyToClipboardButton, Dialog, ErrorBanner, LoadingEllipses, } from '@jbrowse/core/ui';
+import { createStatusFanOut, statusProgressLabel } from '@jbrowse/core/util';
+import { getConfAssemblyNames } 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 { isStateTreeNode } from '@jbrowse/mobx-state-tree';
+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 +20,57 @@ 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');
+}
+/**
+ * A `ReferenceSequenceTrack` config declares no `assemblyNames` slot at all —
+ * `createReferenceSeqTrackConfig` omits it deliberately, because such a track's
+ * assembly is the config node holding it. `getConfAssemblyNames` is the shared
+ * resolver that walks to that parent, and reading the slot directly instead is
+ * what left "Show ref names" on every reference sequence track loading forever:
+ * `undefined` serialized into the fetch key, which `useFetch` reads as "don't
+ * fetch". It throws when a config has neither, which is why this is called
+ * inside the fetcher — an unanswerable question belongs in the error banner
+ * rather than thrown out of a render.
+ */
+function aboutAssemblyNames(config) {
+    return isStateTreeNode(config)
+        ? getConfAssemblyNames(config)
+        : (readConfSlot(config, 'assemblyNames') ?? []);
+}
 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 trackId = readConfSlot(config, 'trackId');
+    const { data, error, isLoading, status } = useFetch(['CoreGetRefNames', trackId], (_name, _trackId, stopToken, statusCallback) => {
+        // one status slot per assembly, so N concurrent reads aggregate into one
+        // bar instead of the last writer winning
+        const slot = createStatusFanOut(statusCallback);
+        return Promise.all([...new Set(aboutAssemblyNames(config))].map(async (assemblyName) => [
+            assemblyName,
+            await rpcManager.call(trackId, 'CoreGetRefNames', {
+                adapterConfig: readConfSlot(config, 'adapter'),
+                assemblyName,
+                stopToken,
+                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/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;