@jbrowse/core 4.2.1 → 5.0.0-beta.1

package/esm/ui/ScrollZoomToggle.js

@@ -0,0 +1,92 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import ZoomInMapIcon from '@mui/icons-material/ZoomInMap';
+import { ToggleButton, Tooltip } from '@mui/material';
+import { observer } from 'mobx-react';
+import { keyframes, makeStyles } from '../util/tss-react/index.js';
+import { alpha } from './palette.js';
+import { SCROLL_ZOOM_HELP, SCROLL_ZOOM_LABEL } from './scrollZoomLabels.js';
+// Two beats: one is a blink that a peripheral eye can miss, three outstays a
+// confirmation.
+const PULSE_MS = 550;
+const PULSE_COUNT = 2;
+const useStyles = makeStyles()(theme => {
+    // The accent, not `primary`: JBrowse's primary is a near-black navy, and a
+    // ring in it reads as a drop shadow rather than as something asking to be
+    // looked at.
+    const ringColor = alpha(theme.palette.secondary.main, 0.7);
+    // Grows outward from the button's own edge, which is what carries the eye to
+    // it — a ring drawn at its final size only appears there.
+    const ring = keyframes `
+    from { box-shadow: 0 0 0 0 ${ringColor}; }
+    to { box-shadow: 0 0 0 9px ${alpha(theme.palette.secondary.main, 0)}; }
+  `;
+    // What the same cue looks like for someone who asked for less motion: the
+    // ring is there at one size and fades. Reduced motion is about movement, not
+    // about being told less.
+    const steadyRing = keyframes `
+    from { box-shadow: 0 0 0 4px ${ringColor}; }
+    to { box-shadow: 0 0 0 4px ${alpha(theme.palette.secondary.main, 0)}; }
+  `;
+    return {
+        button: {
+            border: 'none',
+            textTransform: 'none',
+            whiteSpace: 'nowrap',
+            gap: 4,
+        },
+        pulse: {
+            position: 'absolute',
+            inset: 0,
+            borderRadius: 'inherit',
+            pointerEvents: 'none',
+            animation: `${ring} ${PULSE_MS}ms ease-out ${PULSE_COUNT}`,
+            '@media (prefers-reduced-motion: reduce)': {
+                animation: `${steadyRing} ${PULSE_MS * PULSE_COUNT}ms ease-out`,
+            },
+        },
+    };
+});
+/**
+ * The persistent control for scroll-to-zoom, shared by every view that has one.
+ *
+ * **Carries its own label.** Scroll-to-zoom is off by default, so a wheel over
+ * the tracks does nothing until someone finds this — and the words in the header
+ * are the whole of how they find it. An icon alone is not findable, whichever
+ * icon: the glyph says "zoom" at best and nothing at all about the wheel. The
+ * tooltip is where ctrl/⌘+scroll, which zooms whatever the preference says, is
+ * named.
+ *
+ * **And it pulses when the preference changes.** The other ways to write it are
+ * somewhere else on the screen — a view menu, the Preferences dialog — so the
+ * moment the setting is learned is also the moment this button is not being
+ * looked at. The ring is what connects the two: it says the thing you just
+ * turned on lives *here*, which is what a user who wants it back off has to
+ * know. Its own click pulses too — the answer to "where is this" should not
+ * depend on which of the several places wrote it, and the other views' copies
+ * of this button pulse with it, which is the preference being session-wide made
+ * visible.
+ *
+ * `iconOnly` is for a header where this sits inside a run of icon buttons (the
+ * comparative views), where a single labelled button reads as a mistake rather
+ * than as emphasis. The tooltip carries the same words either way.
+ */
+const ScrollZoomToggle = observer(function ScrollZoomToggle({ model, iconOnly, }) {
+    const { classes } = useStyles();
+    const { scrollZoom } = model;
+    // `count` doubles as the restart key — a class alone won't replay a CSS
+    // animation that is already on the element, which is the toggle flipped twice
+    // in a row. Adjusted during render rather than from an effect, so a
+    // StrictMode host's doubled mount effect can't pulse a button nobody touched.
+    const [pulse, setPulse] = useState({ shownFor: scrollZoom, count: 0 });
+    if (pulse.shownFor !== scrollZoom) {
+        setPulse({ shownFor: scrollZoom, count: pulse.count + 1 });
+    }
+    // `describeChild` once the label is visible: MUI's default puts the title on
+    // the child as its `aria-label`, which would replace the words on the button
+    // with a paragraph that doesn't contain them. Described, not named.
+    return (_jsx(Tooltip, { title: SCROLL_ZOOM_HELP, describeChild: !iconOnly, children: _jsxs(ToggleButton, { value: "scrollZoom", selected: scrollZoom, onChange: () => {
+                model.setScrollZoom(!scrollZoom);
+            }, className: classes.button, size: "small", children: [_jsx(ZoomInMapIcon, { fontSize: "small" }), iconOnly ? null : SCROLL_ZOOM_LABEL, pulse.count ? (_jsx("span", { className: classes.pulse, "data-testid": "scroll-zoom-pulse" }, pulse.count)) : null] }) }));
+});
+export default ScrollZoomToggle;

package/esm/ui/SequenceAdapterInputs.d.ts

@@ -0,0 +1,9 @@
+import type { FormState } from '../util/assemblyConfigUtils.ts';
+import type { FileLocation } from '../util/types/index.ts';
+declare const SequenceAdapterInputs: ({ form, setForm, setPrimaryFile, setTwoBitFile, }: {
+    form: FormState;
+    setForm: (update: (prev: FormState) => FormState) => void;
+    setPrimaryFile: (location: FileLocation) => void;
+    setTwoBitFile: (location: FileLocation) => void;
+}) => import("react").JSX.Element;
+export default SequenceAdapterInputs;

package/esm/ui/SequenceAdapterInputs.js

@@ -0,0 +1,30 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, MenuItem, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+import { adapterLabels, adapterTypes, makeSetField, } from '../util/assemblyConfigUtils.js';
+import { makeStyles } from '../util/tss-react/index.js';
+import FileSelector from './FileSelector/FileSelector.js';
+const useStyles = makeStyles()(theme => ({
+    fastaWarning: {
+        margin: theme.spacing(1),
+    },
+}));
+// The sequence "Format" dropdown, shared so every add-assembly surface offers
+// the same friendly labels for the same adapter types.
+const AdapterTypeSelector = observer(function AdapterTypeSelector({ adapterSelection, setAdapterSelection, }) {
+    return (_jsx(TextField, { value: adapterSelection, label: "Format", variant: "outlined", select: true, fullWidth: true, onChange: event => {
+            setAdapterSelection(event.target.value);
+        }, children: adapterTypes.map(type => (_jsx(MenuItem, { value: type, children: adapterLabels[type] }, type))) }));
+});
+// The per-adapter file selectors (FASTA/.fai/.gzi/2bit/.chrom.sizes) driven by
+// the chosen format. Shared by the jbrowse-desktop Open genome(s) guided form
+// and the in-app Assembly manager add form. The primary-file setters are passed
+// in so each surface controls how picking a file updates state (e.g. desktop's
+// applyPrimaryFile auto-detects the adapter and prefills sidecars).
+const SequenceAdapterInputs = observer(function SequenceAdapterInputs({ form, setForm, setPrimaryFile, setTwoBitFile, }) {
+    const { classes } = useStyles();
+    const setField = makeSetField(setForm);
+    const { adapterSelection } = form;
+    return (_jsxs(_Fragment, { children: [_jsx(AdapterTypeSelector, { adapterSelection: adapterSelection, setAdapterSelection: setField('adapterSelection') }), adapterSelection === 'FastaAdapter' ? (_jsxs(_Fragment, { children: [_jsx(Alert, { severity: "warning", className: classes.fastaWarning, children: "Note: a FASTA index will be generated automatically. For large genomes, providing a pre-made .fai (choose \"FASTA with index\") is faster, and a remote file may be downloaded in full." }), _jsx(FileSelector, { inline: true, name: "FASTA file", location: form.fastaLocation, setLocation: setPrimaryFile })] })) : adapterSelection === 'IndexedFastaAdapter' ? (_jsxs(_Fragment, { children: [_jsx(FileSelector, { inline: true, name: "FASTA file", location: form.fastaLocation, setLocation: setPrimaryFile }), _jsx(FileSelector, { inline: true, name: "FASTA index (.fai) file", location: form.faiLocation, setLocation: setField('faiLocation') })] })) : adapterSelection === 'BgzipFastaAdapter' ? (_jsxs(_Fragment, { children: [_jsx(FileSelector, { inline: true, name: "FASTA file (.fa.gz)", location: form.fastaLocation, setLocation: setPrimaryFile }), _jsx(FileSelector, { inline: true, name: "FASTA index (.fai) file", location: form.faiLocation, setLocation: setField('faiLocation') }), _jsx(FileSelector, { inline: true, name: "FASTA gzip index (.gzi) file", location: form.gziLocation, setLocation: setField('gziLocation') })] })) : adapterSelection === 'ChromSizesAdapter' ? (_jsx(FileSelector, { inline: true, name: ".chrom.sizes file", description: "One name<TAB>length line per reference sequence. The assembly gets its names and lengths from this and carries no sequence.", location: form.chromSizesLocation, setLocation: setField('chromSizesLocation') })) : (_jsxs(_Fragment, { children: [_jsx(FileSelector, { inline: true, name: "2bit file", location: form.twoBitLocation, setLocation: setTwoBitFile }), _jsx(FileSelector, { inline: true, name: ".chrom.sizes (optional)", description: "Can speed up loading 2bit files with many contigs.", location: form.chromSizesLocation, setLocation: setField('chromSizesLocation') })] }))] }));
+});
+export default SequenceAdapterInputs;

package/esm/ui/SettingsChangesTable.d.ts

@@ -0,0 +1,14 @@
+import type { TrackConfigChange } from '../util/trackConfigDelta.ts';
+/**
+ * Shared three-column diff table (Setting / Default / Current) used by both the
+ * per-track "changes" dialog and the global preferences-reset dialog, so the two
+ * read identically. Each row is a `TrackConfigChange` — a dotted `path` and its
+ * `from` (default) / `to` (current) values. Passing `onResetRow` adds a trailing
+ * per-row revert button, letting the caller reset a single entry (the
+ * preferences dialog uses this so a reset need not be all-or-nothing).
+ */
+declare const SettingsChangesTable: ({ changes, onResetRow, }: {
+    changes: TrackConfigChange[];
+    onResetRow?: (change: TrackConfigChange) => void;
+}) => import("react").JSX.Element;
+export default SettingsChangesTable;

package/esm/ui/SettingsChangesTable.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import UndoIcon from '@mui/icons-material/Undo';
+import { IconButton, Table, TableBody, TableCell, TableHead, TableRow, Tooltip, } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from '../util/tss-react/index.js';
+const useStyles = makeStyles()(theme => ({
+    value: {
+        fontFamily: 'monospace',
+        wordBreak: 'break-word',
+        whiteSpace: 'pre-wrap',
+    },
+    path: {
+        fontWeight: 'bold',
+    },
+    defaultCell: {
+        color: theme.palette.text.secondary,
+    },
+}));
+// Many config values are `{ type: 'x' }` discriminated unions (colorBy,
+// groupBy, sortedBy, ...). Show just the type when that is the whole object so
+// the table reads "methylation" rather than `{"type":"methylation"}`; richer
+// objects keep full JSON so no detail is hidden.
+function isSoleTypeObject(v) {
+    return ('type' in v && typeof v.type === 'string' && Object.keys(v).length === 1);
+}
+function formatSettingValue(value) {
+    return value === undefined
+        ? '(default)'
+        : typeof value === 'string'
+            ? value
+            : typeof value === 'object' && value !== null && isSoleTypeObject(value)
+                ? value.type
+                : JSON.stringify(value);
+}
+/**
+ * Shared three-column diff table (Setting / Default / Current) used by both the
+ * per-track "changes" dialog and the global preferences-reset dialog, so the two
+ * read identically. Each row is a `TrackConfigChange` — a dotted `path` and its
+ * `from` (default) / `to` (current) values. Passing `onResetRow` adds a trailing
+ * per-row revert button, letting the caller reset a single entry (the
+ * preferences dialog uses this so a reset need not be all-or-nothing).
+ */
+const SettingsChangesTable = observer(function SettingsChangesTable({ changes, onResetRow, }) {
+    const { classes } = useStyles();
+    return (_jsxs(Table, { size: "small", children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: "Setting" }), _jsx(TableCell, { children: "Default" }), _jsx(TableCell, { children: "Current" }), onResetRow ? _jsx(TableCell, {}) : null] }) }), _jsx(TableBody, { children: changes.map(change => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: classes.path, children: change.label ?? change.path.join(' › ') }), _jsx(TableCell, { className: `${classes.value} ${classes.defaultCell}`, children: formatSettingValue(change.from) }), _jsx(TableCell, { className: classes.value, children: formatSettingValue(change.to) }), onResetRow ? (_jsx(TableCell, { padding: "none", children: _jsx(Tooltip, { title: "Reset this preference", children: _jsx(IconButton, { size: "small", onClick: () => {
+                                        onResetRow(change);
+                                    }, children: _jsx(UndoIcon, { fontSize: "small" }) }) }) })) : null] }, change.path.join('.')))) })] }));
+});
+export default SettingsChangesTable;

package/esm/ui/ShareLinkField.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export default function ShareLinkField({ value, label, action, }: {
+    value: string;
+    label?: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;

package/esm/ui/ShareLinkField.js

@@ -0,0 +1,42 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, TextField, Typography } from '@mui/material';
+import { formatBytes } from '../util/formatBytes.js';
+import { makeStyles } from '../util/tss-react/index.js';
+// Two ceilings, because a long link fails two different ways.
+//
+// Past LARGE_URL_LENGTH the link still opens everywhere, but it stops
+// surviving delivery: mail and chat clients wrap or truncate it, and anything
+// that moves it from a hash into a request line meets the ~8k a server accepts
+// there.
+//
+// Past UNUSABLE_URL_LENGTH it does not open at all — WebKit caps a url around
+// 80k characters, so Safari and everything on iOS refuse it however it arrives.
+// Chromium's own cap is 2 MB, which is why the person who made the link sees
+// nothing wrong with it and the recipient sees a browser error.
+const LARGE_URL_LENGTH = 8000;
+const UNUSABLE_URL_LENGTH = 80000;
+const useStyles = makeStyles()(theme => ({
+    warning: {
+        color: theme.palette.warning.main,
+    },
+}));
+// Read-only single-line field for a shareable URL; clicking selects the whole
+// value so it's easy to copy, and overly long URLs surface a size warning.
+// Shared by jbrowse-web's ShareDialog and jbrowse-desktop's ExportToWebDialog.
+//
+// `action` is what the caller can do about a url too long to open — in practice
+// "switch to a short link", which is the mode that solves it. Only rendered at
+// the unusable tier, where saying so without offering the fix leaves the user
+// with a link and no way to make a working one.
+export default function ShareLinkField({ value, label = 'URL', action, }) {
+    const { classes } = useStyles();
+    const size = formatBytes(value.length);
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, { label: label, value: value, variant: "filled", fullWidth: true, onClick: event => {
+                    const target = event.target;
+                    target.select();
+                }, slotProps: {
+                    input: {
+                        readOnly: true,
+                    },
+                } }), value.length > UNUSABLE_URL_LENGTH ? (_jsxs(Alert, { severity: "warning", action: action, children: ["This URL is ", size, ", which Safari and iOS browsers refuse to open and most mail clients will truncate. It may work where you test it \u2014 Chrome accepts far longer \u2014 and fail for whoever you send it to. Use a short link instead."] })) : value.length > LARGE_URL_LENGTH ? (_jsxs(Typography, { variant: "caption", className: classes.warning, children: ["This URL is ", size, " and may be too long for some browsers or tools \u2014 prefer a short link if possible."] })) : null] }));
+}

package/esm/ui/SingleSlider.d.ts

@@ -0,0 +1,8 @@
+import type { SliderProps } from '@mui/material';
+type Props = Omit<SliderProps, 'value' | 'defaultValue' | 'onChange' | 'onChangeCommitted'> & {
+    value: number;
+    onChange?: (value: number) => void;
+    onChangeCommitted?: (value: number) => void;
+};
+export default function SingleSlider(props: Props): import("react").JSX.Element;
+export {};

package/esm/ui/SingleSlider.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slider } from '@mui/material';
+import SliderTooltip from './SliderTooltip.js';
+export default function SingleSlider(props) {
+    const { onChange, onChangeCommitted, slots, ...rest } = props;
+    return (_jsx(Slider, { ...rest, slots: { valueLabel: SliderTooltip, ...slots }, onChange: (_, value) => {
+            onChange?.(typeof value === 'number' ? value : value[0]);
+        }, onChangeCommitted: (_, value) => {
+            onChangeCommitted?.(typeof value === 'number' ? value : value[0]);
+        } }));
+}

package/esm/ui/SizeSliderRow.d.ts

@@ -0,0 +1,16 @@
+import type { Pin } from '../configuration/promotablePin.ts';
+import type { SliderScale } from './sliderScale.ts';
+export declare const SizeSliderRow: ({ title, getValue, min, max, step, scale, format, isDefault, commitOnRelease, onChange, onReset, pin, }: {
+    title: string;
+    getValue: () => number;
+    min: number;
+    max: number;
+    step: number;
+    scale: SliderScale;
+    format: (n: number) => string;
+    isDefault: boolean;
+    commitOnRelease?: boolean;
+    onChange: (n: number) => void;
+    onReset: () => void;
+    pin?: Pin;
+}) => import("react").JSX.Element;

package/esm/ui/SizeSliderRow.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The drawn half of a `makeSizeMenu` row, split out so the builder can reach
+// it through `lazy()`. Everything Material UI in a size row is here: the
+// slider, the reset button, the pin, the caption. See makeSizeMenu.tsx.
+import { useState } from 'react';
+import { Typography } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from '../util/tss-react/index.js';
+import { ResetToDefaultButton } from './InlineMenuControls.js';
+import { PinAdornment } from './PinAdornment.js';
+import SingleSlider from './SingleSlider.js';
+import { INLINE_MENU_ROW_WIDTH } from './inlineMenuRowWidth.js';
+import { sliderScale } from './sliderScale.js';
+const useStyles = makeStyles()(theme => ({
+    root: {
+        width: INLINE_MENU_ROW_WIDTH,
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: theme.spacing(0.5),
+    },
+    label: {
+        flex: 1,
+    },
+}));
+export const SizeSliderRow = observer(function SizeSliderRow({ title, getValue, min, max, step, scale, format, isDefault, commitOnRelease, onChange, onReset, pin, }) {
+    const { classes } = useStyles();
+    const modelValue = getValue();
+    const [dragValue, setDragValue] = useState(undefined);
+    const value = dragValue ?? modelValue;
+    const { toSlider, fromSlider, sliderStep } = sliderScale(scale);
+    const slug = title.toLowerCase().replaceAll(' ', '-');
+    return (_jsxs("div", { className: classes.root, children: [_jsxs("div", { className: classes.header, children: [_jsxs(Typography, { variant: "caption", color: "textSecondary", className: classes.label, children: [title, ": ", format(value)] }), _jsx(ResetToDefaultButton, { disabled: isDefault, onClick: () => {
+                            onReset();
+                        } }), pin ? (_jsx(PinAdornment, { pin: { control: pin, label: `${title} (${format(value)})` } })) : null] }), _jsx(SingleSlider, { value: toSlider(value), min: toSlider(min), max: toSlider(max), step: sliderStep ?? step, size: "small", "aria-label": title.toLowerCase(), "data-testid": `${slug}-slider`, valueLabelDisplay: "auto", valueLabelFormat: (v) => format(fromSlider(v)), sx: { py: 0.5, display: 'block' }, onChange: v => {
+                    const n = fromSlider(v);
+                    if (commitOnRelease) {
+                        setDragValue(n);
+                    }
+                    else {
+                        onChange(n);
+                    }
+                }, onChangeCommitted: commitOnRelease
+                    ? v => {
+                        onChange(fromSlider(v));
+                        setDragValue(undefined);
+                    }
+                    : undefined })] }));
+});

package/esm/ui/SliderTooltip.d.ts

@@ -0,0 +1,2 @@
+import type { SliderValueLabelProps } from '@mui/material';
+export default function SliderTooltip(props: SliderValueLabelProps): import("react").JSX.Element;

package/esm/ui/SliderTooltip.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tooltip } from '@mui/material';
+// Arrow tooltip above the thumb, used as SingleSlider's default value label so
+// every slider (inline track-menu rows, the settings menus' size submenus, the
+// LGV zoom control) shows one consistent value affordance instead of MUI's default
+// bubble. Callers can still override via `slots={{ valueLabel }}`.
+//
+// Unmounted while closed rather than rendered with `open={false}`. `open` is the
+// Slider's own hover/drag state (it passes `open === index || active === index`),
+// so nothing here is what detects the hover — a closed Tooltip only costs its
+// Popper. On the LGV zoom slider, whose value tracks live `bpPerPx`, that was a
+// Tooltip and a Popper re-rendering on every animation frame of a wheel zoom to
+// show nothing.
+export default function SliderTooltip(props) {
+    const { children, open, value } = props;
+    return open ? (_jsx(Tooltip, { open: true, enterTouchDelay: 0, placement: "top", title: value, arrow: true, children: children })) : (children);
+}

package/esm/ui/Snackbar.d.ts

@@ -1,10 +1,12 @@
-import type { SnackbarMessage } from './SnackbarModel.tsx';
 import type { AbstractSessionModel } from '../util/index.ts';
+import type { ErrorDialogState, SnackbarMessage } from './SnackbarModel.tsx';
 interface SnackbarSession extends AbstractSessionModel {
     snackbarMessages: SnackbarMessage[];
     popSnackbarMessage: () => void;
+    errorDialog: ErrorDialogState | undefined;
+    setErrorDialog: (state: ErrorDialogState | undefined) => void;
 }
 declare const Snackbar: ({ session, }: {
     session: SnackbarSession;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react").JSX.Element;
 export default Snackbar;

package/esm/ui/Snackbar.js

@@ -1,14 +1,17 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy } from 'react';
 import { observer } from 'mobx-react';
-const SnackbarContents = lazy(() => import("./SnackbarContents.js"));
+const SnackbarContents = lazy(() => import('./SnackbarContents.js'));
+const ErrorMessageStackTraceDialog = lazy(() => import('./ErrorMessageStackTraceDialog.js'));
 const Snackbar = observer(function Snackbar({ session, }) {
-    const { snackbarMessages } = session;
+    const { snackbarMessages, errorDialog } = session;
     const latestMessage = snackbarMessages.at(-1);
-    return latestMessage ? (_jsx(Suspense, { fallback: null, children: _jsx(SnackbarContents, { onClose: (_event, reason) => {
-                if (reason !== 'clickaway') {
-                    session.popSnackbarMessage();
-                }
-            }, contents: latestMessage }) })) : null;
+    return (_jsxs(_Fragment, { children: [latestMessage ? (_jsx(Suspense, { fallback: null, children: _jsx(SnackbarContents, { onClose: (_event, reason) => {
+                        if (reason !== 'clickaway') {
+                            session.popSnackbarMessage();
+                        }
+                    }, contents: latestMessage }) })) : null, errorDialog ? (_jsx(Suspense, { fallback: null, children: _jsx(ErrorMessageStackTraceDialog, { error: errorDialog.error, extra: errorDialog.extra, onClose: () => {
+                        session.setErrorDialog(undefined);
+                    } }) })) : null] }));
 });
 export default Snackbar;

package/esm/ui/SnackbarContents.d.ts

@@ -2,4 +2,4 @@ import type { SnackbarMessage } from './SnackbarModel.tsx';
 export default function SnackbarContents({ onClose, contents, }: {
     onClose: (_event: unknown, reason?: string) => void;
     contents: SnackbarMessage;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/SnackbarContents.js

@@ -1,11 +1,29 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import CloseIcon from '@mui/icons-material/Close';
+// Report icon is rendered here instead of in SnackbarModel to avoid storing
+// JSX in MobX observables, which causes Chrome-specific issues
+// See https://github.com/GMOD/jbrowse-components/issues/5325
 import Report from '@mui/icons-material/Report';
 import { Alert, Button, IconButton, Snackbar as MUISnackbar, } from '@mui/material';
+import { makeStyles } from '../util/tss-react/index.js';
+const useStyles = makeStyles()({
+    // preserve newlines in multi-line errors (e.g. MST validation dumps) while
+    // still wrapping long lines and capping height so the snackbar can't grow
+    // off-screen
+    message: {
+        whiteSpace: 'pre-wrap',
+        overflowWrap: 'anywhere',
+        maxHeight: 200,
+        overflowY: 'auto',
+    },
+});
 export default function SnackbarContents({ onClose, contents, }) {
+    const { classes } = useStyles();
     const { actions } = contents;
-    return (_jsx(MUISnackbar, { open: true, onClose: onClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, children: _jsx(Alert, { onClose: onClose, action: actions?.length ? (_jsxs(_Fragment, { children: [actions.map((action, idx) => (_jsx(Button, { color: "inherit", onClick: e => {
+    return (_jsx(MUISnackbar, { open: true, onClose: onClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, children: _jsx(Alert, { onClose: onClose, action: actions?.length ? (_jsxs(_Fragment, { children: [actions.map((action, idx) => (_jsx(Button
+                    // eslint-disable-next-line @eslint-react/no-array-index-key -- fixed, never-reordered list of snackbar action buttons
+                    , { color: "inherit", onClick: e => {
                             action.onClick();
                             onClose(e);
-                        }, children: action.name === 'report' ? _jsx(Report, {}) : action.name }, idx))), _jsx(IconButton, { color: "inherit", onClick: onClose, children: _jsx(CloseIcon, {}) })] })) : null, severity: contents.level || 'warning', children: contents.message }) }));
+                        }, children: action.name === 'report' ? _jsx(Report, {}) : action.name }, idx))), _jsx(IconButton, { color: "inherit", onClick: onClose, children: _jsx(CloseIcon, {}) })] })) : null, severity: contents.level || 'warning', "data-testid": `snackbar-${contents.level || 'warning'}`, children: _jsx("div", { className: classes.message, children: contents.message }) }) }));
 }

package/esm/ui/SnackbarModel.d.ts

@@ -4,14 +4,54 @@ export interface SnackbarMessage {
     level?: NotificationLevel;
     actions?: SnackAction[];
 }
+export interface ErrorDialogState {
+    error: unknown;
+    extra?: unknown;
+}
+/**
+ * #stateModel SnackbarModel
+ * #category session
+ */
 export default function SnackbarModel(): import("@jbrowse/mobx-state-tree").IModelType<{}, {
+    /**
+     * #volatile
+     */
     snackbarMessages: import("mobx").IObservableArray<SnackbarMessage>;
+    /**
+     * #volatile
+     * the error currently shown in the stack-trace dialog. Kept off the
+     * dialog queue so it can stack on top of an already-open dialog (e.g. the
+     * one whose action raised the error) instead of waiting behind it
+     */
+    errorDialog: ErrorDialogState | undefined;
 } & {
+    /**
+     * #getter
+     */
     readonly snackbarMessageSet: Map<string, SnackbarMessage>;
 } & {
+    /**
+     * #action
+     */
     notify(message: string, level?: NotificationLevel, action?: SnackAction | SnackAction[]): void;
+    /**
+     * #action
+     */
     notifyError(errorMessage: string, error?: unknown, extra?: unknown, action?: SnackAction): void;
+    /**
+     * #action
+     */
+    setErrorDialog(state: ErrorDialogState | undefined): void;
+    /**
+     * #action
+     */
     pushSnackbarMessage(message: string, level?: NotificationLevel, actions?: SnackAction[]): void;
+    /**
+     * #action
+     */
     popSnackbarMessage(): SnackbarMessage | undefined;
+    /**
+     * #action
+     */
     removeSnackbarMessage(message: string): void;
 }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>;

package/esm/ui/SnackbarModel.js

@@ -1,19 +1,37 @@
-import { lazy } from 'react';
 import { types } from '@jbrowse/mobx-state-tree';
 import { observable } from 'mobx';
-const ErrorMessageStackTraceDialog = lazy(() => import("./ErrorMessageStackTraceDialog.js"));
+/**
+ * #stateModel SnackbarModel
+ * #category session
+ */
 export default function SnackbarModel() {
     return types
         .model({})
         .volatile(() => ({
+        /**
+         * #volatile
+         */
         snackbarMessages: observable.array(),
+        /**
+         * #volatile
+         * the error currently shown in the stack-trace dialog. Kept off the
+         * dialog queue so it can stack on top of an already-open dialog (e.g. the
+         * one whose action raised the error) instead of waiting behind it
+         */
+        errorDialog: undefined,
     }))
         .views(self => ({
+        /**
+         * #getter
+         */
         get snackbarMessageSet() {
             return new Map(self.snackbarMessages.map(s => [s.message, s]));
         },
     }))
         .actions(self => ({
+        /**
+         * #action
+         */
         notify(message, level, action) {
             const actions = action
                 ? Array.isArray(action)
@@ -21,29 +39,37 @@ export default function SnackbarModel() {
                     : [action]
                 : undefined;
             this.pushSnackbarMessage(message, level, actions);
-            if (level === 'info' || level === 'success') {
+            // A plain info/success toast auto-hides; an actionable one persists
+            // until acted on or dismissed (5s is too short to read and click the
+            // action, and warning/error already persist).
+            if ((level === 'info' || level === 'success') && !actions?.length) {
                 setTimeout(() => {
                     this.removeSnackbarMessage(message);
                 }, 5000);
             }
         },
+        /**
+         * #action
+         */
         notifyError(errorMessage, error, extra, action) {
             const reportAction = {
                 name: 'report',
                 onClick: () => {
-                    self.queueDialog((onClose) => [
-                        ErrorMessageStackTraceDialog,
-                        {
-                            onClose,
-                            error,
-                            extra,
-                        },
-                    ]);
+                    this.setErrorDialog({ error, extra });
                 },
             };
             const actions = action ? [reportAction, action] : [reportAction];
             this.pushSnackbarMessage(errorMessage, 'error', actions);
         },
+        /**
+         * #action
+         */
+        setErrorDialog(state) {
+            self.errorDialog = state;
+        },
+        /**
+         * #action
+         */
         pushSnackbarMessage(message, level, actions) {
             if (actions?.length || !self.snackbarMessageSet.has(message)) {
                 self.snackbarMessages.push({
@@ -53,9 +79,15 @@ export default function SnackbarModel() {
                 });
             }
         },
+        /**
+         * #action
+         */
         popSnackbarMessage() {
             return self.snackbarMessages.pop();
         },
+        /**
+         * #action
+         */
         removeSnackbarMessage(message) {
             const element = self.snackbarMessageSet.get(message);
             if (element !== undefined) {

package/esm/ui/StackTraceButton.d.ts

@@ -0,0 +1,5 @@
+import type { IconButtonProps } from '@mui/material';
+export default function StackTraceButton({ error, color, }: {
+    error: unknown;
+    color?: IconButtonProps['color'];
+}): import("react").JSX.Element;

package/esm/ui/StackTraceButton.js

@@ -0,0 +1,16 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Suspense, lazy, useState } from 'react';
+import ReportIcon from '@mui/icons-material/Report';
+import { IconButton, Tooltip } from '@mui/material';
+const ErrorMessageStackTraceDialog = lazy(() => import('./ErrorMessageStackTraceDialog.js'));
+// "Show stack trace" icon button that lazy-loads and opens the stack-trace
+// dialog. Shared by ErrorBanner and ErrorBar so the lazy import and open/close
+// state live in one place.
+export default function StackTraceButton({ error, color, }) {
+    const [showStack, setShowStack] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { title: "Show stack trace", children: _jsx(IconButton, { color: color, onClick: () => {
+                        setShowStack(true);
+                    }, children: _jsx(ReportIcon, {}) }) }), showStack ? (_jsx(Suspense, { fallback: null, children: _jsx(ErrorMessageStackTraceDialog, { error: error, onClose: () => {
+                        setShowStack(false);
+                    } }) })) : null] }));
+}