@jbrowse/core 2.17.0 → 3.0.0

package/ui/Dialog.js

@@ -3,14 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ErrorBoundary_1 = require("@jbrowse/core/ui/ErrorBoundary");
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mui_1 = require("tss-react/mui");
-const ErrorBoundary_1 = require("@jbrowse/core/ui/ErrorBoundary");
-// icons
-const Close_1 = __importDefault(require("@mui/icons-material/Close"));
-// locals
 const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
 const SanitizedHTML_1 = __importDefault(require("./SanitizedHTML"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
@@ -22,35 +21,24 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 function DialogError({ error }) {
-    return (react_1.default.createElement("div", { style: { width: 800, margin: 40 } },
-        react_1.default.createElement(ErrorMessage_1.default, { error: error })));
+    return ((0, jsx_runtime_1.jsx)("div", { style: { width: 800, margin: 40 }, children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.default, { error: error }) }));
 }
 const Dialog = (0, mobx_react_1.observer)(function (props) {
     const { classes } = useStyles();
     const { title, header, children, onClose } = props;
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement(material_1.Dialog, { ...props },
-        react_1.default.createElement(material_1.ScopedCssBaseline, null,
-            react_1.default.isValidElement(header) ? (header) : (react_1.default.createElement(material_1.DialogTitle, null,
-                react_1.default.createElement(SanitizedHTML_1.default, { html: title || '' }),
-                onClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => {
-                        // @ts-expect-error
-                        onClose();
-                    } },
-                    react_1.default.createElement(Close_1.default, null))) : null)),
-            react_1.default.createElement(material_1.Divider, null),
-            react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: DialogError },
-                react_1.default.createElement(material_1.ThemeProvider, { theme: (0, material_1.createTheme)(theme, {
-                        components: {
-                            MuiInputBase: {
-                                styleOverrides: {
-                                    input: {
-                                        // xref https://github.com/GMOD/jbrowse-components/pull/3666
-                                        boxSizing: 'content-box!important',
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { ...props, children: (0, jsx_runtime_1.jsxs)(material_1.ScopedCssBaseline, { children: [(0, react_1.isValidElement)(header) ? (header) : ((0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { children: [(0, jsx_runtime_1.jsx)(SanitizedHTML_1.default, { html: title || '' }), onClose ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.closeButton, onClick: () => {
+                                onClose();
+                            }, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })) : null] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { FallbackComponent: DialogError, children: (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: (0, material_1.createTheme)(theme, {
+                            components: {
+                                MuiInputBase: {
+                                    styleOverrides: {
+                                        input: {
+                                            boxSizing: 'content-box!important',
+                                        },
                                     },
                                 },
                             },
-                        },
-                    }) }, children)))));
+                        }), children: children }) })] }) }));
 });
 exports.default = Dialog;

package/ui/DraggableDialog.d.ts

@@ -0,0 +1,5 @@
+import type { DialogProps } from '@mui/material';
+declare const DraggableDialog: (props: DialogProps & {
+    title: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default DraggableDialog;

package/ui/DraggableDialog.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const react_draggable_1 = __importDefault(require("react-draggable"));
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    closeButton: {
+        position: 'absolute',
+        right: theme.spacing(1),
+        top: theme.spacing(1),
+        color: theme.palette.grey[500],
+    },
+}));
+function PaperComponent(props) {
+    const ref = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)(react_draggable_1.default, { nodeRef: ref, cancel: '[class*="MuiDialogContent-root"]', onStart: arg => { var _a; return `${(_a = arg.target) === null || _a === void 0 ? void 0 : _a.className}`.includes('MuiDialogTitle'); }, children: (0, jsx_runtime_1.jsx)(material_1.Paper, { ref: ref, ...props }) }));
+}
+const DraggableDialog = (0, mobx_react_1.observer)(function DraggableDialog(props) {
+    const { classes } = useStyles();
+    const { title, children, onClose } = props;
+    return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { ...props, PaperComponent: PaperComponent, children: (0, jsx_runtime_1.jsxs)(material_1.ScopedCssBaseline, { children: [(0, jsx_runtime_1.jsxs)(material_1.DialogTitle, { style: { cursor: 'move' }, children: [title, onClose ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: classes.closeButton, onClick: () => {
+                                onClose();
+                            }, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })) : null] }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), children] }) }));
+});
+exports.default = DraggableDialog;

package/ui/DropDownMenu.d.ts

@@ -1,8 +1,7 @@
-import React from 'react';
-import { MenuItem } from './Menu';
+import type { MenuItem } from './Menu';
 declare const DropDownMenu: ({ menuTitle, session, menuItems, }: {
     menuTitle: string;
     session: any;
     menuItems: MenuItem[];
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default DropDownMenu;

package/ui/DropDownMenu.js

@@ -1,36 +1,14 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
 const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
-const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
+const mui_1 = require("tss-react/mui");
 const Menu_1 = __importDefault(require("./Menu"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     buttonRoot: {
@@ -49,15 +27,11 @@ const DropDownMenu = (0, mobx_react_1.observer)(function ({ menuTitle, session,
     function handleClose() {
         setOpen(false);
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Button, { ref: anchorEl, onClick: () => {
-                setOpen(!open);
-            }, color: "inherit", "data-testid": "dropDownMenuButton", classes: { root: classes.buttonRoot } },
-            menuTitle,
-            react_1.default.createElement(ArrowDropDown_1.default, null)),
-        react_1.default.createElement(Menu_1.default, { anchorEl: anchorEl.current, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, onMenuItemClick: (_event, callback) => {
-                callback(session);
-                handleClose();
-            }, open: open, onClose: handleClose, menuItems: menuItems })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Button, { ref: anchorEl, onClick: () => {
+                    setOpen(!open);
+                }, color: "inherit", "data-testid": "dropDownMenuButton", classes: { root: classes.buttonRoot }, children: [menuTitle, (0, jsx_runtime_1.jsx)(ArrowDropDown_1.default, {})] }), (0, jsx_runtime_1.jsx)(Menu_1.default, { anchorEl: anchorEl.current, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, onMenuItemClick: (_event, callback) => {
+                    callback(session);
+                    handleClose();
+                }, open: open, onClose: handleClose, menuItems: menuItems })] }));
 });
 exports.default = DropDownMenu;

package/ui/EditableTypography.d.ts

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

package/ui/EditableTypography.js

@@ -1,35 +1,13 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const useMeasure_1 = __importDefault(require("@jbrowse/core/util/useMeasure"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-const useMeasure_1 = __importDefault(require("@jbrowse/core/util/useMeasure"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     input: {},
     inputBase: {},
@@ -48,8 +26,7 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         borderWidth: 2,
     },
 }));
-// using forwardRef so that MUI Tooltip can wrap this component
-const EditableTypography = react_1.default.forwardRef(function EditableTypography2(props, ref) {
+const EditableTypography = (0, react_1.forwardRef)(function EditableTypography2(props, ref) {
     const { value, setValue, variant, ...other } = props;
     const [ref2, { width }] = (0, useMeasure_1.default)();
     const [editedValue, setEditedValue] = (0, react_1.useState)();
@@ -61,41 +38,35 @@ const EditableTypography = react_1.default.forwardRef(function EditableTypograph
             setBlur(false);
         }
     }, [blur, inputNode]);
-    // possibly tss-react does not understand the passing of props to
-    // useStyles, but it appears to work
-    // @ts-expect-error
     const { classes } = useStyles(props, { props });
     const theme = (0, material_1.useTheme)();
     const val = editedValue === undefined ? value : editedValue;
-    return (react_1.default.createElement("div", { ...other, ref: ref },
-        react_1.default.createElement("div", { style: { position: 'relative' } },
-            react_1.default.createElement(material_1.Typography, { ref: ref2, component: "span", variant: variant, className: classes.typography }, val)),
-        react_1.default.createElement(material_1.InputBase, { inputRef: node => {
-                setInputNode(node);
-            }, className: classes.inputBase, inputProps: {
-                style: {
-                    width,
-                    ...(variant && variant !== 'inherit'
-                        ? theme.typography[variant]
-                        : {}),
-                },
-            }, classes: {
-                input: classes.input,
-                root: classes.inputRoot,
-                focused: classes.inputFocused,
-            }, value: val, onChange: event => {
-                setEditedValue(event.target.value);
-            }, onKeyDown: event => {
-                if (event.key === 'Enter') {
-                    inputNode === null || inputNode === void 0 ? void 0 : inputNode.blur();
-                }
-                else if (event.key === 'Escape') {
+    return ((0, jsx_runtime_1.jsxs)("div", { ...other, ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'relative' }, children: (0, jsx_runtime_1.jsx)(material_1.Typography, { ref: ref2, component: "span", variant: variant, className: classes.typography, children: val }) }), (0, jsx_runtime_1.jsx)(material_1.InputBase, { inputRef: node => {
+                    setInputNode(node);
+                }, className: classes.inputBase, inputProps: {
+                    style: {
+                        width,
+                        ...(variant && variant !== 'inherit'
+                            ? theme.typography[variant]
+                            : {}),
+                    },
+                }, classes: {
+                    input: classes.input,
+                    root: classes.inputRoot,
+                    focused: classes.inputFocused,
+                }, value: val, onChange: event => {
+                    setEditedValue(event.target.value);
+                }, onKeyDown: event => {
+                    if (event.key === 'Enter') {
+                        inputNode === null || inputNode === void 0 ? void 0 : inputNode.blur();
+                    }
+                    else if (event.key === 'Escape') {
+                        setEditedValue(undefined);
+                        setBlur(true);
+                    }
+                }, onBlur: () => {
+                    setValue(editedValue || value || '');
                     setEditedValue(undefined);
-                    setBlur(true);
-                }
-            }, onBlur: () => {
-                setValue(editedValue || value || '');
-                setEditedValue(undefined);
-            } })));
+                } })] }));
 });
 exports.default = EditableTypography;

package/ui/ErrorBoundary.d.ts

@@ -1,4 +1,5 @@
-import React, { Component, ErrorInfo } from 'react';
+import type { ErrorInfo } from 'react';
+import { Component } from 'react';
 interface Props {
     children: React.ReactNode;
     FallbackComponent: React.FC<{
@@ -11,6 +12,6 @@ interface State {
 declare class ErrorBoundary extends Component<Props, State> {
     constructor(props: Props);
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    render(): string | number | bigint | boolean | 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> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export { ErrorBoundary };

package/ui/ErrorBoundary.js

@@ -1,30 +1,8 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ErrorBoundary = void 0;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 class ErrorBoundary extends react_1.Component {
     constructor(props) {
         super(props);
@@ -35,7 +13,7 @@ class ErrorBoundary extends react_1.Component {
         this.setState({ error });
     }
     render() {
-        return this.state.error ? (react_1.default.createElement(this.props.FallbackComponent, { error: this.state.error })) : (this.props.children);
+        return this.state.error ? ((0, jsx_runtime_1.jsx)(this.props.FallbackComponent, { error: this.state.error })) : (this.props.children);
     }
 }
 exports.ErrorBoundary = ErrorBoundary;

package/ui/ErrorMessage.d.ts

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

package/ui/ErrorMessage.js

@@ -15,26 +15,34 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
+const Report_1 = __importDefault(require("@mui/icons-material/Report"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
-// locals
 const RedErrorMessageBox_1 = __importDefault(require("./RedErrorMessageBox"));
-// icons
-const Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
-const Report_1 = __importDefault(require("@mui/icons-material/Report"));
-// lazies
 const ErrorMessageStackTraceDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ErrorMessageStackTraceDialog'))));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     bg: {
@@ -53,15 +61,11 @@ function parseError(str) {
     const idx = str.indexOf(findStr);
     if (idx !== -1) {
         const trim = str.slice(0, idx + findStr.length);
-        // best effort to make a better error message than the default
-        // mobx-state-tree
-        // case 1. element has a path
         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];
         }
-        // case 2. element has no path
         const match2 = /.*snapshot `(.*)` is not assignable/.exec(trim);
         if (match2) {
             str = 'Failed to load element...Failed element had snapshot';
@@ -73,19 +77,11 @@ function parseError(str) {
 function ErrorButtons({ error, onReset, }) {
     const { classes } = useStyles();
     const [showStack, setShowStack] = (0, react_1.useState)(false);
-    return (react_1.default.createElement("div", { className: classes.iconFloat },
-        typeof error === 'object' && error && 'stack' in error ? (react_1.default.createElement(material_1.Tooltip, { title: "Get stack trace" },
-            react_1.default.createElement(material_1.IconButton, { onClick: () => {
-                    setShowStack(true);
-                }, color: "primary" },
-                react_1.default.createElement(Report_1.default, null)))) : null,
-        onReset ? (react_1.default.createElement(material_1.Tooltip, { title: "Retry" },
-            react_1.default.createElement(material_1.IconButton, { onClick: onReset, color: "primary" },
-                react_1.default.createElement(Refresh_1.default, null)))) : null,
-        showStack ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
-            react_1.default.createElement(ErrorMessageStackTraceDialog, { error: error, onClose: () => {
-                    setShowStack(false);
-                } }))) : null));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.iconFloat, children: [typeof error === 'object' && error && 'stack' in error ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Get stack trace", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
+                        setShowStack(true);
+                    }, color: "primary", children: (0, jsx_runtime_1.jsx)(Report_1.default, {}) }) })) : null, onReset ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: "Retry", children: (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: onReset, color: "primary", children: (0, jsx_runtime_1.jsx)(Refresh_1.default, {}) }) })) : null, showStack ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(ErrorMessageStackTraceDialog, { error: error, onClose: () => {
+                        setShowStack(false);
+                    } }) })) : null] }));
 }
 function ErrorMessage({ error, onReset, }) {
     const { classes } = useStyles();
@@ -93,9 +89,6 @@ function ErrorMessage({ error, onReset, }) {
     const str2 = str.indexOf('expected an instance of');
     const str3 = str2 !== -1 ? str.slice(0, str2) : str;
     const snapshotError = parseError(str);
-    return (react_1.default.createElement(RedErrorMessageBox_1.default, null,
-        str3.slice(0, 10000),
-        react_1.default.createElement(ErrorButtons, { error: error, onReset: onReset }),
-        snapshotError ? (react_1.default.createElement("pre", { className: classes.bg }, JSON.stringify(JSON.parse(snapshotError), null, 2))) : null));
+    return ((0, jsx_runtime_1.jsxs)(RedErrorMessageBox_1.default, { children: [str3.slice(0, 10000), (0, jsx_runtime_1.jsx)(ErrorButtons, { error: error, onReset: onReset }), snapshotError ? ((0, jsx_runtime_1.jsx)("pre", { className: classes.bg, children: JSON.stringify(JSON.parse(snapshotError), null, 2) })) : null] }));
 }
 exports.default = ErrorMessage;

package/ui/ErrorMessageStackTraceDialog.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 export default function ErrorMessageStackTraceDialog({ error, onClose, extra, }: {
     onClose: () => void;
     error: unknown;
     extra?: unknown;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/ui/ErrorMessageStackTraceDialog.js

@@ -1,42 +1,19 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = ErrorMessageStackTraceDialog;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
-const source_map_js_1 = require("source-map-js");
 const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
-// locals
+const source_map_js_1 = require("source-map-js");
+const mui_1 = require("tss-react/mui");
 const Dialog_1 = __importDefault(require("./Dialog"));
 const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
 function Link2({ href, children, }) {
-    return (react_1.default.createElement(material_1.Link, { target: "_blank", href: href }, children));
+    return ((0, jsx_runtime_1.jsx)(material_1.Link, { target: "_blank", href: href, children: children }));
 }
 async function myfetch(uri) {
     const res = await fetch(uri);
@@ -53,8 +30,6 @@ async function myfetchtext(uri) {
     const res = await myfetch(uri);
     return res.text();
 }
-// produce a source-map resolved stack trace
-// reference code https://stackoverflow.com/a/77158517/2129219
 const sourceMaps = {};
 async function getSourceMapFromUri(uri) {
     var _a;
@@ -97,11 +72,8 @@ async function mapStackTrace(stack) {
     return mappedStack.join('\n');
 }
 const MAX_ERR_LEN = 10000;
-// Chrome has the error message in the stacktrace, firefox doesn't
 function stripMessage(trace, error) {
     if (trace.startsWith('Error:')) {
-        // remove the error message, which can be very long due to mobx-state-tree
-        // stuff, to get just the stack trace
         const err = `${error}`;
         return trace.slice(err.length);
     }
@@ -134,14 +106,7 @@ function Contents({ text, extra }) {
     const email = 'jbrowse2@berkeley.edu';
     const githubLink = `https://github.com/GMOD/jbrowse-components/issues/new?labels=bug&title=JBrowse+issue&body=${err}`;
     const emailLink = `mailto:${email}?subject=JBrowse%202%20error&body=${err}`;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Typography, null,
-            "Post a new issue at ",
-            react_1.default.createElement(Link2, { href: githubLink }, "GitHub"),
-            " or send an email to ",
-            react_1.default.createElement(Link2, { href: emailLink }, email),
-            ' '),
-        react_1.default.createElement("pre", { className: classes.pre }, err2)));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { children: ["Post a new issue at ", (0, jsx_runtime_1.jsx)(Link2, { href: githubLink, children: "GitHub" }), " or send an email to ", (0, jsx_runtime_1.jsx)(Link2, { href: emailLink, children: email }), ' '] }), (0, jsx_runtime_1.jsx)("pre", { className: classes.pre, children: err2 })] }));
 }
 function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
     const [mappedStackTrace, setMappedStackTrace] = (0, react_1.useState)();
@@ -151,7 +116,6 @@ function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
     const errorText = error ? `${error}` : '';
     const stackTrace = stripMessage(stackTracePreProcessed, errorText);
     (0, react_1.useEffect)(() => {
-        // eslint-disable-next-line @typescript-eslint/no-floating-promises
         ;
         (async () => {
             try {
@@ -173,20 +137,15 @@ function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
             ? `${errorText.slice(0, MAX_ERR_LEN)}...`
             : errorText,
         mappedStackTrace || 'No stack trace available',
-        // @ts-expect-error add version info at bottom if we are in jbrowse-web
         window.JBrowseSession ? `JBrowse ${window.JBrowseSession.version}` : '',
     ]
         .filter(f => !!f)
         .join('\n');
-    return (react_1.default.createElement(Dialog_1.default, { open: true, onClose: onClose, title: "Stack trace", maxWidth: "xl" },
-        react_1.default.createElement(material_1.DialogContent, null, mappedStackTrace === undefined ? (react_1.default.createElement(LoadingEllipses_1.default, { variant: "h6" })) : (react_1.default.createElement(Contents, { text: errorBoxText, extra: extra }))),
-        react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                    (0, copy_to_clipboard_1.default)(errorBoxText);
-                    setClicked(true);
-                    setTimeout(() => {
-                        setClicked(false);
-                    }, 1000);
-                } }, clicked ? 'Copied!' : 'Copy stack trace to clipboard'),
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: onClose }, "Close"))));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: true, onClose: onClose, title: "Stack trace", maxWidth: "xl", children: [(0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: mappedStackTrace === undefined ? ((0, jsx_runtime_1.jsx)(LoadingEllipses_1.default, { variant: "h6" })) : ((0, jsx_runtime_1.jsx)(Contents, { text: errorBoxText, extra: extra })) }), (0, jsx_runtime_1.jsxs)(material_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
+                            (0, copy_to_clipboard_1.default)(errorBoxText);
+                            setClicked(true);
+                            setTimeout(() => {
+                                setClicked(false);
+                            }, 1000);
+                        }, children: clicked ? 'Copied!' : 'Copy stack trace to clipboard' }), (0, jsx_runtime_1.jsx)(material_1.Button, { variant: "contained", color: "primary", onClick: onClose, children: "Close" })] })] }));
 }

package/ui/FactoryResetDialog.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 export default function FactoryResetDialog({ onClose, open, onFactoryReset, }: {
     onClose: () => void;
     open: boolean;
     onFactoryReset: () => void;
-}): React.JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;