@jbrowse/core 4.3.0 → 5.0.0-beta.10

package/esm/ui/DropDownMenu.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { makeStyles } from '@jbrowse/core/util/tss-react';
 import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
-import { Button, alpha } from '@mui/material';
+import { Button } from '@mui/material';
 import { observer } from 'mobx-react';
-import CascadingMenuButton from "./CascadingMenuButton.js";
+import { makeStyles } from '../util/tss-react/index.js';
+import CascadingMenuButton from './CascadingMenuButton.js';
+import { alpha } from './palette.js';
 const useStyles = makeStyles()(theme => ({
     buttonRoot: {
         '&:hover': {
@@ -18,7 +19,7 @@ function ButtonComponent(props) {
     const { classes } = useStyles();
     return (_jsx(Button, { ...props, className: classes.buttonRoot, children: props.children }));
 }
-const DropDownMenu = observer(function DropDownMenu({ menuTitle, menuItems, }) {
-    return (_jsxs(CascadingMenuButton, { menuItems: menuItems, color: "inherit", ButtonComponent: ButtonComponent, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, children: [menuTitle, _jsx(ArrowDropDown, {})] }));
+const DropDownMenu = observer(function DropDownMenu({ menuTitle, menuItems, onMenuItemClick, }) {
+    return (_jsxs(CascadingMenuButton, { menuItems: menuItems, onMenuItemClick: onMenuItemClick, color: "inherit", ButtonComponent: ButtonComponent, children: [menuTitle, _jsx(ArrowDropDown, {})] }));
 });
 export default DropDownMenu;

package/esm/ui/EditableTypography.d.ts

@@ -1,4 +1,5 @@
 import type { TypographyProps } from '@mui/material';
+import type { Ref } from 'react';
 type Variant = TypographyProps['variant'];
 type EditableTypographyClassKey = 'input' | 'inputBase' | 'inputRoot' | 'inputFocused';
 interface Props {
@@ -6,6 +7,7 @@ interface Props {
     setValue: (value: string) => void;
     variant: Variant;
     classes?: Partial<Record<EditableTypographyClassKey, string>>;
+    ref?: Ref<HTMLDivElement>;
 }
-declare const EditableTypography: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+declare function EditableTypography(props: Props): import("react").JSX.Element;
 export default EditableTypography;

package/esm/ui/EditableTypography.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useState } from 'react';
+import { useRef, useState } from 'react';
+// the package specifier, not a relative path: `jest.config.js` mocks this by
+// that exact string. See the note in `util/hooks.ts`.
 import useMeasure from '@jbrowse/core/util/useMeasure';
 import { InputBase, Typography, useTheme } from '@mui/material';
-import { makeStyles } from "../util/tss-react/index.js";
+import { makeStyles } from '../util/tss-react/index.js';
 const useStyles = makeStyles()(theme => ({
-    input: {},
-    inputBase: {},
     typography: {
         top: 6,
         left: 2,
@@ -21,40 +21,48 @@ const useStyles = makeStyles()(theme => ({
         borderWidth: 2,
     },
 }));
-const EditableTypography = forwardRef(function EditableTypography2(props, ref) {
-    const { value, setValue, variant, ...other } = props;
-    const [ref2, { width }] = useMeasure();
+function EditableTypography(props) {
+    const { value, setValue, variant, ref, classes: overrides, ...other } = props;
+    const [ref2, { width }] = useMeasure('width');
     const [editedValue, setEditedValue] = useState();
-    const [inputNode, setInputNode] = useState(null);
-    const { classes } = useStyles(props, { props });
+    const inputRef = useRef(null);
+    // set by Escape so the synchronous blur() it triggers discards the edit;
+    // onBlur's editedValue closure is still the typed value at that point
+    const cancelRef = useRef(false);
+    const { classes, cx } = useStyles();
     const theme = useTheme();
-    const val = editedValue === undefined ? value : editedValue;
-    return (_jsxs("div", { ...other, ref: ref, children: [_jsx("div", { style: { position: 'relative' }, children: _jsx(Typography, { ref: ref2, component: "span", variant: variant, className: classes.typography, children: val }) }), _jsx(InputBase, { inputRef: node => {
-                    setInputNode(node);
-                }, className: classes.inputBase, inputProps: {
-                    style: {
-                        width,
-                        ...(variant && variant !== 'inherit'
-                            ? theme.typography[variant]
-                            : {}),
+    const val = editedValue ?? value;
+    return (_jsxs("div", { ...other, ref: ref, children: [_jsx("div", { style: { position: 'relative' }, children: _jsx(Typography, { ref: ref2, component: "span", variant: variant, className: classes.typography, children: val }) }), _jsx(InputBase, { inputRef: inputRef, className: overrides?.inputBase, slotProps: {
+                    input: {
+                        style: {
+                            width,
+                            ...(variant && variant !== 'inherit'
+                                ? theme.typography[variant]
+                                : {}),
+                        },
                     },
                 }, classes: {
-                    input: classes.input,
-                    root: classes.inputRoot,
-                    focused: classes.inputFocused,
+                    input: overrides?.input,
+                    root: cx(classes.inputRoot, overrides?.inputRoot),
+                    focused: cx(classes.inputFocused, overrides?.inputFocused),
                 }, value: val, onChange: event => {
                     setEditedValue(event.target.value);
                 }, onKeyDown: event => {
                     if (event.key === 'Enter') {
-                        inputNode?.blur();
+                        inputRef.current?.blur();
                     }
                     else if (event.key === 'Escape') {
-                        setEditedValue(undefined);
-                        inputNode?.blur();
+                        cancelRef.current = true;
+                        inputRef.current?.blur();
                     }
                 }, onBlur: () => {
-                    setValue(editedValue || value || '');
+                    if (cancelRef.current) {
+                        cancelRef.current = false;
+                    }
+                    else if (editedValue !== undefined) {
+                        setValue(editedValue);
+                    }
                     setEditedValue(undefined);
                 } })] }));
-});
+}
 export default EditableTypography;

package/esm/ui/ErrorActions.d.ts

@@ -0,0 +1,24 @@
+import type { IconButtonProps } from '@mui/material';
+import type { ReactNode } from 'react';
+/**
+ * What both error presentations offer, in one order: the remedy specific to
+ * this error, the report dialog, then retry. A fragment, because only the
+ * contents are shared — `ErrorBanner` floats them, `ErrorBar` hands them to an
+ * Alert's action slot.
+ *
+ * Two copies kept in step by a comment, which had already drifted: only the
+ * banner gated the report button on the error carrying a `stack`, withholding
+ * the environment block and the prefilled issue link — the whole of what that
+ * dialog is for — from anyone whose failure arrived as a string.
+ */
+export default function ErrorActions({ error, onRetry, extraAction, color, }: {
+    error: unknown;
+    /** omitted by a presentation with nothing to retry */
+    onRetry?: () => void;
+    /**
+     * Remedy specific to one kind of error, shown left of the shared two. The GPU
+     * banners' "Use Canvas2D" is the only one.
+     */
+    extraAction?: ReactNode;
+    color?: IconButtonProps['color'];
+}): import("react").JSX.Element;

package/esm/ui/ErrorActions.js

@@ -0,0 +1,20 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import RefreshIcon from '@mui/icons-material/Refresh';
+import { IconButton, Tooltip } from '@mui/material';
+import StackTraceButton from './StackTraceButton.js';
+/**
+ * What both error presentations offer, in one order: the remedy specific to
+ * this error, the report dialog, then retry. A fragment, because only the
+ * contents are shared — `ErrorBanner` floats them, `ErrorBar` hands them to an
+ * Alert's action slot.
+ *
+ * Two copies kept in step by a comment, which had already drifted: only the
+ * banner gated the report button on the error carrying a `stack`, withholding
+ * the environment block and the prefilled issue link — the whole of what that
+ * dialog is for — from anyone whose failure arrived as a string.
+ */
+export default function ErrorActions({ error, onRetry, extraAction, color, }) {
+    return (_jsxs(_Fragment, { children: [extraAction, _jsx(StackTraceButton, { error: error, color: color }), onRetry ? (_jsx(Tooltip, { title: "Retry", children: _jsx(IconButton, { "data-testid": "reload_button", onClick: () => {
+                        onRetry();
+                    }, color: color, children: _jsx(RefreshIcon, {}) }) })) : null] }));
+}

package/esm/ui/ErrorBanner.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from 'react';
+declare function ErrorBanner({ error, onReset, extraAction, }: {
+    error: unknown;
+    onReset?: () => void;
+    extraAction?: ReactNode;
+}): import("react").JSX.Element;
+export default ErrorBanner;

package/esm/ui/ErrorBanner.js

@@ -0,0 +1,35 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '../util/tss-react/index.js';
+import ErrorActions from './ErrorActions.js';
+import RedErrorMessageBox from './RedErrorMessageBox.js';
+import { parseError } from './parseError.js';
+const useStyles = makeStyles()(theme => ({
+    bg: {
+        background: theme.palette.divider,
+        border: `1px solid ${theme.palette.text.primary}`,
+        margin: 20,
+    },
+    message: {
+        background: theme.palette.action.hover,
+        border: `1px solid ${theme.palette.divider}`,
+        padding: '12px 16px',
+        margin: '16px 20px',
+        fontFamily: 'monospace',
+        fontSize: '0.9rem',
+    },
+    iconFloat: {
+        float: 'right',
+        marginLeft: 100,
+    },
+}));
+function ErrorBanner({ error, onReset, extraAction, }) {
+    const { classes } = useStyles();
+    const errorText = `${error}`;
+    // trim "expected an instance of ..." tail — still generated by MST for
+    // individual field errors but is noise after the type mismatch is stated
+    const instanceIdx = errorText.indexOf('expected an instance of');
+    const displayText = instanceIdx === -1 ? errorText : errorText.slice(0, instanceIdx);
+    const { snapshotValue, message } = parseError(errorText);
+    return (_jsxs(RedErrorMessageBox, { children: [displayText.slice(0, 10000), _jsx("div", { className: classes.iconFloat, children: _jsx(ErrorActions, { error: error, onRetry: onReset, extraAction: extraAction, color: "primary" }) }), snapshotValue !== undefined ? (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.message, children: message }), _jsx("pre", { className: classes.bg, children: JSON.stringify(snapshotValue, null, 2) })] })) : null] }));
+}
+export default ErrorBanner;

package/esm/ui/ErrorBar.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export default function ErrorBar({ error, onRetry, extraAction, }: {
+    error: unknown;
+    onRetry: () => void;
+    extraAction?: ReactNode;
+}): import("react").JSX.Element;

package/esm/ui/ErrorBar.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert, Tooltip } from '@mui/material';
+import { makeStyles } from '../util/tss-react/index.js';
+import ErrorActions from './ErrorActions.js';
+const useStyles = makeStyles()({
+    content: {
+        wordBreak: 'break-word',
+        textAlign: 'center',
+        // displays wrap their canvas in user-select:none (e.g. the canvas
+        // FeatureComponent root, inherited by DisplayChrome's error bar); re-enable
+        // selection so the error text can be copied
+        userSelect: 'text',
+    },
+});
+export default function ErrorBar({ error, onRetry, extraAction, }) {
+    const { classes } = useStyles();
+    const message = `${error}`;
+    return (_jsx("div", { style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 10,
+            // explicit, because DisplayChrome portals this into a
+            // `pointer-events:none` overlay layer, where the default `auto` would be
+            // inherited away and Retry would stop responding. Same box it claimed
+            // inline — it already stops mousedown/click below, so it was never
+            // click-through.
+            pointerEvents: 'auto',
+        }, onMouseDown: e => {
+            e.stopPropagation();
+        }, onClick: e => {
+            e.stopPropagation();
+        }, children: _jsx(Alert, { severity: "error", action: _jsx(ErrorActions, { error: error, onRetry: onRetry, extraAction: extraAction }), children: _jsx(Tooltip, { title: message, children: _jsx("div", { className: classes.content, children: message }) }) }) }));
+}

package/esm/ui/ErrorBoundary.d.ts

@@ -1,17 +1,41 @@
-import type { ErrorInfo } from 'react';
 import { Component } from 'react';
+import type { ErrorInfo } from 'react';
+export interface FallbackProps {
+    error: unknown;
+    componentStack?: string;
+    /** clear the caught error, remounting the children that threw */
+    resetErrorBoundary: () => void;
+}
 interface Props {
     children: React.ReactNode;
-    FallbackComponent: React.FC<{
-        error: unknown;
-    }>;
+    FallbackComponent: React.FC<FallbackProps>;
+    /**
+     * clear the caught error when any of these changes, compared with `Object.is`
+     * element by element. For the cause a caller can name, so a banner does not
+     * outlive it.
+     */
+    resetKeys?: unknown[];
+    /** runs before the error clears, on either reset path */
+    onReset?: () => void;
+    /**
+     * runs when an error is caught, BEFORE the fallback renders. For a caller
+     * that has to record something durable about the failure — jbrowse-web marks
+     * the session it was showing, so the next boot does not restore straight back
+     * into the crash. An effect inside the fallback would be a render later and
+     * one more thing that has to run correctly on the way down.
+     */
+    onError?: (error: unknown) => void;
 }
 interface State {
     error: unknown;
+    componentStack?: string;
+    keysAtError?: unknown[];
 }
 declare class ErrorBoundary extends Component<Props, State> {
     constructor(props: Props);
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
+    componentDidUpdate(): void;
+    resetErrorBoundary: () => void;
+    render(): string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
 }
 export { ErrorBoundary };

package/esm/ui/ErrorBoundary.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Component } from 'react';
+function keysChanged(a = [], b = []) {
+    return a.length !== b.length || a.some((v, i) => !Object.is(v, b[i]));
+}
 class ErrorBoundary extends Component {
     constructor(props) {
         super(props);
@@ -7,10 +10,37 @@ class ErrorBoundary extends Component {
     }
     componentDidCatch(error, errorInfo) {
         console.error('ErrorBoundary caught an error:', error, errorInfo);
-        this.setState({ error });
+        // guarded: this is the last boundary in some trees, and a throw from the
+        // handler would escape React's error handling itself — replacing the error
+        // the user was about to be shown with one from the code reporting it
+        try {
+            this.props.onError?.(error);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        this.setState({
+            error,
+            componentStack: errorInfo.componentStack ?? undefined,
+            keysAtError: this.props.resetKeys,
+        });
+    }
+    componentDidUpdate() {
+        if (this.state.error !== undefined &&
+            keysChanged(this.state.keysAtError, this.props.resetKeys)) {
+            this.resetErrorBoundary();
+        }
     }
+    resetErrorBoundary = () => {
+        this.props.onReset?.();
+        this.setState({
+            error: undefined,
+            componentStack: undefined,
+            keysAtError: undefined,
+        });
+    };
     render() {
-        return this.state.error ? (_jsx(this.props.FallbackComponent, { error: this.state.error })) : (this.props.children);
+        return this.state.error !== undefined ? (_jsx(this.props.FallbackComponent, { error: this.state.error, componentStack: this.state.componentStack, resetErrorBoundary: this.resetErrorBoundary })) : (this.props.children);
     }
 }
 export { ErrorBoundary };

package/esm/ui/ErrorMessage.d.ts

@@ -1,5 +1,3 @@
-declare function ErrorMessage({ error, onReset, }: {
+export default function ErrorMessage({ error }: {
     error: unknown;
-    onReset?: () => void;
-}): import("react/jsx-runtime").JSX.Element;
-export default ErrorMessage;
+}): import("react").JSX.Element;

package/esm/ui/ErrorMessage.js

@@ -1,56 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Suspense, lazy, useState } from 'react';
 import RefreshIcon from '@mui/icons-material/Refresh';
-import ReportIcon from '@mui/icons-material/Report';
-import { IconButton, Tooltip } from '@mui/material';
-import RedErrorMessageBox from "./RedErrorMessageBox.js";
-import { makeStyles } from "../util/tss-react/index.js";
-const ErrorMessageStackTraceDialog = lazy(() => import("./ErrorMessageStackTraceDialog.js"));
-const useStyles = makeStyles()(theme => ({
-    bg: {
-        background: theme.palette.divider,
-        border: '1px solid black',
-        margin: 20,
-    },
-    iconFloat: {
-        float: 'right',
-        marginLeft: 100,
-    },
-}));
-function parseError(str) {
-    let snapshotError = '';
-    const findStr = 'is not assignable';
-    const idx = str.indexOf(findStr);
-    if (idx !== -1) {
-        const trim = str.slice(0, idx + findStr.length);
-        const match = /.*at path "(.*)" snapshot `(.*)` is not assignable/m.exec(trim);
-        if (match) {
-            str = `Failed to load element at ${match[1]}...Failed element had snapshot`;
-            snapshotError = match[2];
-        }
-        const match2 = /.*snapshot `(.*)` is not assignable/.exec(trim);
-        if (match2) {
-            str = 'Failed to load element...Failed element had snapshot';
-            snapshotError = match2[1];
-        }
-    }
-    return snapshotError;
+import { Button } from '@mui/material';
+import RedErrorMessageBox from './RedErrorMessageBox.js';
+// chunk load failures usually mean a stale asset manifest (e.g. server
+// redeploy) or a network hiccup; a reload fetches the current chunks
+function isChunkLoadError(error) {
+    const name = error instanceof Error ? error.name : '';
+    const message = `${error}`.toLowerCase();
+    return (name === 'ChunkLoadError' ||
+        (message.includes('loading') &&
+            message.includes('chunk') &&
+            message.includes('failed')) ||
+        message.includes('failed to fetch dynamically imported module') ||
+        message.includes('error loading dynamically imported module'));
 }
-function ErrorButtons({ error, onReset, }) {
-    const { classes } = useStyles();
-    const [showStack, setShowStack] = useState(false);
-    return (_jsxs("div", { className: classes.iconFloat, children: [typeof error === 'object' && error && 'stack' in error ? (_jsx(Tooltip, { title: "Get stack trace", children: _jsx(IconButton, { onClick: () => {
-                        setShowStack(true);
-                    }, color: "primary", children: _jsx(ReportIcon, {}) }) })) : null, onReset ? (_jsx(Tooltip, { title: "Retry", children: _jsx(IconButton, { onClick: onReset, color: "primary", children: _jsx(RefreshIcon, {}) }) })) : null, showStack ? (_jsx(Suspense, { fallback: null, children: _jsx(ErrorMessageStackTraceDialog, { error: error, onClose: () => {
-                        setShowStack(false);
-                    } }) })) : null] }));
+export default function ErrorMessage({ error }) {
+    return isChunkLoadError(error) ? (_jsxs(RedErrorMessageBox, { children: [_jsx("div", { children: "Failed to load part of the application, likely due to a server update or network error. Refreshing the page usually fixes it." }), _jsx(Button, { variant: "contained", startIcon: _jsx(RefreshIcon, {}), onClick: () => {
+                    window.location.reload();
+                }, style: { margin: 4 }, children: "Refresh page" }), _jsx("div", { children: `${error}` })] })) : (_jsx(RedErrorMessageBox, { children: `${error}` }));
 }
-function ErrorMessage({ error, onReset, }) {
-    const { classes } = useStyles();
-    const str = `${error}`;
-    const str2 = str.indexOf('expected an instance of');
-    const str3 = str2 !== -1 ? str.slice(0, str2) : str;
-    const snapshotError = parseError(str);
-    return (_jsxs(RedErrorMessageBox, { children: [str3.slice(0, 10000), _jsx(ErrorButtons, { error: error, onReset: onReset }), snapshotError ? (_jsx("pre", { className: classes.bg, children: JSON.stringify(JSON.parse(snapshotError), null, 2) })) : null] }));
-}
-export default ErrorMessage;

package/esm/ui/ErrorMessageStackTraceContents.d.ts

@@ -1,4 +1,4 @@
 export default function ErrorMessageStackTraceContents({ text, extra, }: {
     text: string;
     extra?: unknown;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/ErrorMessageStackTraceContents.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Typography, alpha } from '@mui/material';
-import ExternalLink from "./ExternalLink.js";
-import { makeStyles } from "../util/tss-react/index.js";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import { makeStyles } from '../util/tss-react/index.js';
+import ExternalLink from './ExternalLink.js';
+import { alpha } from './palette.js';
 const EMAIL = 'jbrowse2@berkeley.edu';
 const useStyles = makeStyles()(theme => ({
     pre: {

package/esm/ui/ErrorMessageStackTraceDialog.d.ts

@@ -2,4 +2,4 @@ export default function ErrorMessageStackTraceDialog({ error, onClose, extra, }:
     onClose: () => void;
     error: unknown;
     extra?: unknown;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/esm/ui/ErrorMessageStackTraceDialog.js

@@ -1,108 +1,63 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import CloseIcon from '@mui/icons-material/Close';
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, } from '@mui/material';
-import { SourceMapConsumer } from 'source-map-js';
-import ErrorMessageStackTraceContents from "./ErrorMessageStackTraceContents.js";
-import LoadingEllipses from "./LoadingEllipses.js";
-async function myfetchtext(uri) {
-    const res = await fetch(uri);
-    if (!res.ok) {
-        throw new Error(`HTTP ${res.status} fetching ${uri}: ${await res.text()}`);
-    }
-    return res.text();
-}
-async function myfetchjson(uri) {
-    return JSON.parse(await myfetchtext(uri));
-}
-const sourceMaps = {};
-const sourceMappingUrlRe = /\/\/# sourceMappingURL=(.*)/;
-const stackLineRe = /(.*)((?:https?|file):\/\/.*):(\d+):(\d+)/;
-async function getSourceMapFromUri(uri) {
-    if (sourceMaps[uri]) {
-        return sourceMaps[uri];
-    }
-    const uriQuery = new URL(uri).search;
-    const currentScriptContent = await myfetchtext(uri);
-    const mapUri = sourceMappingUrlRe.exec(currentScriptContent)?.[1] ?? '';
-    const data = await myfetchjson(new URL(mapUri, uri).href + uriQuery);
-    const map = new SourceMapConsumer(data);
-    sourceMaps[uri] = map;
-    return map;
-}
-async function mapStackTrace(stack) {
-    const mappedStack = [];
-    for (const line of stack.split('\n')) {
-        const match = stackLineRe.exec(line);
-        if (!match) {
-            mappedStack.push(line);
-            continue;
-        }
-        const uri = match[2];
-        const consumer = await getSourceMapFromUri(uri);
-        const pos = consumer.originalPositionFor({
-            line: +match[3],
-            column: +match[4],
-        });
-        if (!pos.source || !pos.line || !pos.column) {
-            mappedStack.push(line);
-            continue;
-        }
-        mappedStack.push(`${pos.source}:${pos.line}:${pos.column + 1} (${match[1].trim()})`);
-    }
-    return mappedStack.join('\n');
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { effectiveRenderer } from '@jbrowse/render-core/graphicsCapabilities';
+import { useGraphicsCapabilities } from '@jbrowse/render-core/useGraphicsCapabilities';
+import { useFetch } from '../util/useFetch.js';
+import CopyToClipboardButton from './CopyToClipboardButton.js';
+import ErrorMessageStackTraceContents from './ErrorMessageStackTraceContents.js';
+import InfoDialog from './InfoDialog.js';
+import LoadingEllipses from './LoadingEllipses.js';
+import { formatErrorStack } from './formatErrorStack.js';
+import { mapStackTrace } from './mapStackTrace.js';
 const MAX_ERR_LEN = 10_000;
-function stripMessage(trace, error) {
-    return trace.startsWith('Error:') ? trace.slice(`${error}`.length) : trace;
-}
-function getStackTrace(error) {
-    return typeof error === 'object' && error !== null && 'stack' in error
-        ? `${error.stack}`
-        : '';
-}
 export default function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
-    const [mappedStackTrace, setMappedStackTrace] = useState();
-    const [secondaryError, setSecondaryError] = useState();
-    const [clicked, setClicked] = useState(false);
+    const graphicsCapabilities = useGraphicsCapabilities();
     const errorText = error ? `${error}` : '';
-    const stackTrace = stripMessage(getStackTrace(error), errorText);
-    useEffect(() => {
-        ;
-        (async () => {
-            try {
-                setMappedStackTrace(await mapStackTrace(stackTrace));
-            }
-            catch (e) {
-                console.error(e);
-                setMappedStackTrace(stackTrace);
-                setSecondaryError(e);
-            }
-        })();
-    }, [stackTrace]);
-    const version = window.JBrowseSession?.version;
+    const stackTrace = formatErrorStack(error);
+    const { data: mappedStackTrace, isLoading } = useFetch(['mappedStackTrace', stackTrace], () => mapStackTrace(stackTrace));
+    // The rung createGpuHal built, not a list of the ones available: it already
+    // says which rungs exist, since Canvas2D means neither and WebGL2 means no
+    // WebGPU. It also honours the GPU banner's "disable GPU", which matters most
+    // in exactly this dialog — a user reporting a rendering bug has often already
+    // clicked it.
+    const graphicsInfo = graphicsCapabilities
+        ? `Graphics: ${effectiveRenderer(graphicsCapabilities)}`
+        : '';
+    const gpuInfo = graphicsCapabilities?.gpuVendor
+        ? `GPU: ${graphicsCapabilities.gpuVendor}${graphicsCapabilities.gpuArchitecture ? ` (${graphicsCapabilities.gpuArchitecture})` : ''}`
+        : '';
+    // Local only, and the one field that explains a "JBrowse is slow" report with
+    // nothing else wrong in it: WebGL on a software rasterizer is ~25x Canvas2D on
+    // the main thread. Marked so a reader who doesn't recognize the driver string
+    // still sees it.
+    const glRendererInfo = graphicsCapabilities?.glRenderer
+        ? `GL renderer: ${graphicsCapabilities.glRenderer}${graphicsCapabilities.softwareWebgl ? ' (SOFTWARE RASTERIZER)' : ''}`
+        : '';
+    const session = window
+        .JBrowseSession;
+    const version = session?.version;
+    const rpcManager = session?.rpcManager;
+    const rpcInfo = rpcManager ? `RPC: ${rpcManager.driverName}` : '';
     const errorBoxText = [
-        secondaryError
-            ? 'Error loading source map, showing raw stack trace below:'
-            : '',
         errorText.length > MAX_ERR_LEN
             ? `${errorText.slice(0, MAX_ERR_LEN)}...`
             : errorText,
-        mappedStackTrace || 'No stack trace available',
+        mappedStackTrace || stackTrace || 'No stack trace available',
+        '--- environment ---',
         version ? `JBrowse ${version}` : '',
+        graphicsInfo,
+        gpuInfo,
+        glRendererInfo,
+        rpcInfo,
+        `Cross-origin isolated: ${crossOriginIsolated}`,
+        `CPU cores: ${navigator.hardwareConcurrency}`,
+        `Device pixel ratio: ${window.devicePixelRatio}`,
+        `Window size: ${window.innerWidth}x${window.innerHeight}`,
+        `URL: ${window.location.href}`,
+        `User agent: ${navigator.userAgent}`,
     ]
         .filter(Boolean)
         .join('\n');
-    return (_jsxs(Dialog, { open: true, onClose: onClose, maxWidth: "xl", children: [_jsxs(DialogTitle, { children: ["Stack trace", _jsx(IconButton, { onClick: onClose, sx: {
-                            position: 'absolute',
-                            right: 8,
-                            top: 8,
-                        }, children: _jsx(CloseIcon, {}) })] }), _jsx(DialogContent, { children: mappedStackTrace === undefined ? (_jsx(LoadingEllipses, { variant: "h6" })) : (_jsx(ErrorMessageStackTraceContents, { text: errorBoxText, extra: extra })) }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "contained", color: "secondary", onClick: async () => {
-                            const { default: copy } = await import('copy-to-clipboard');
-                            copy(errorBoxText);
-                            setClicked(true);
-                            setTimeout(() => {
-                                setClicked(false);
-                            }, 1000);
-                        }, children: clicked ? 'Copied!' : 'Copy stack trace to clipboard' }), _jsx(Button, { variant: "contained", color: "primary", onClick: onClose, children: "Close" })] })] }));
+    return (_jsx(InfoDialog, { open: true, onClose: () => {
+            onClose();
+        }, maxWidth: "xl", title: "Stack trace", actions: _jsx(CopyToClipboardButton, { variant: "contained", color: "secondary", value: errorBoxText, copiedLabel: "Copied!", children: "Copy stack trace to clipboard" }), children: isLoading ? (_jsx(LoadingEllipses, { variant: "h6" })) : (_jsx(ErrorMessageStackTraceContents, { text: errorBoxText, extra: extra })) }));
 }