@jbrowse/core 2.10.1 → 2.10.2

package/ui/ErrorMessage.js

@@ -1,9 +1,35 @@
 "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 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
+const material_1 = require("@mui/material");
+const RedErrorMessageBox_1 = __importDefault(require("./RedErrorMessageBox"));
+const ErrorMessageStackTraceDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ErrorMessageStackTraceDialog'))));
 function parseError(str) {
     let snapshotError = '';
     const findStr = 'is not assignable';
@@ -30,19 +56,16 @@ function parseError(str) {
 const ErrorMessage = ({ error }) => {
     const str = `${error}`;
     const snapshotError = parseError(str);
-    return (react_1.default.createElement("div", { style: {
-            padding: 4,
-            margin: 4,
-            overflow: 'auto',
-            maxHeight: 200,
-            background: '#f88',
-            border: '1px solid black',
-        } },
+    const [showStack, setShowStack] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(RedErrorMessageBox_1.default, null,
         str.slice(0, 10000),
+        typeof error === 'object' && error && 'stack' in error ? (react_1.default.createElement(material_1.Button, { style: { float: 'right' }, variant: "contained", onClick: () => setShowStack(!showStack) }, showStack ? 'Hide stack trace' : 'Show stack trace')) : null,
         snapshotError ? (react_1.default.createElement("pre", { style: {
                 background: 'lightgrey',
                 border: '1px solid black',
                 margin: 20,
-            } }, JSON.stringify(JSON.parse(snapshotError), null, 2))) : null));
+            } }, JSON.stringify(JSON.parse(snapshotError), null, 2))) : null,
+        showStack ? (react_1.default.createElement(react_1.Suspense, { fallback: null },
+            react_1.default.createElement(ErrorMessageStackTraceDialog, { error: error, onClose: () => setShowStack(false) }))) : null));
 };
 exports.default = ErrorMessage;

package/ui/ErrorMessageStackTraceDialog.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export default function ErrorMessageStackTraceDialog({ error, onClose, }: {
+    onClose: () => void;
+    error: Error;
+}): React.JSX.Element;

package/ui/ErrorMessageStackTraceDialog.js

@@ -0,0 +1,155 @@
+"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 material_1 = require("@mui/material");
+const source_map_js_1 = require("source-map-js");
+const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
+// locals
+const Dialog_1 = __importDefault(require("./Dialog"));
+const LoadingEllipses_1 = __importDefault(require("./LoadingEllipses"));
+// produce a source-map resolved stack trace
+// reference code https://stackoverflow.com/a/77158517/2129219
+const sourceMaps = {};
+async function getSourceMapFromUri(uri) {
+    var _a;
+    if (sourceMaps[uri] != undefined) {
+        return sourceMaps[uri];
+    }
+    const uriQuery = new URL(uri).search;
+    const currentScriptContent = await (await fetch(uri)).text();
+    let mapUri = ((_a = new RegExp(/\/\/# sourceMappingURL=(.*)/).exec(currentScriptContent)) === null || _a === void 0 ? void 0 : _a[1]) ||
+        '';
+    mapUri = new URL(mapUri, uri).href + uriQuery;
+    const map = await (await fetch(mapUri)).json();
+    sourceMaps[uri] = map;
+    return map;
+}
+async function mapStackTrace(stack) {
+    const stackLines = stack.split('\n');
+    const mappedStack = [];
+    for (const line of stackLines) {
+        const match = new RegExp(/(.*)(http:\/\/.*):(\d+):(\d+)/).exec(line);
+        if (match === null) {
+            mappedStack.push(line);
+            continue;
+        }
+        const uri = match[2];
+        const consumer = new source_map_js_1.SourceMapConsumer(await getSourceMapFromUri(uri));
+        const originalPosition = consumer.originalPositionFor({
+            line: parseInt(match[3]),
+            column: parseInt(match[4]),
+        });
+        if (originalPosition.source === null ||
+            originalPosition.line === null ||
+            originalPosition.column === null) {
+            mappedStack.push(line);
+            continue;
+        }
+        mappedStack.push(`${originalPosition.source}:${originalPosition.line}:${originalPosition.column + 1}`);
+    }
+    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);
+    }
+    else {
+        return trace;
+    }
+}
+function ErrorMessageStackTraceDialog({ error, onClose, }) {
+    const [mappedStackTrace, setMappedStackTrace] = (0, react_1.useState)();
+    const [secondaryError, setSecondaryError] = (0, react_1.useState)();
+    const [clicked, setClicked] = (0, react_1.useState)(false);
+    const stackTracePreProcessed = `${error.stack}`;
+    const errorText = `${error}`;
+    const stackTrace = stripMessage(stackTracePreProcessed, errorText);
+    (0, react_1.useEffect)(() => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        ;
+        (async () => {
+            try {
+                const res = await mapStackTrace(stackTrace);
+                setMappedStackTrace(res);
+            }
+            catch (e) {
+                console.error(e);
+                setMappedStackTrace(stackTrace);
+                setSecondaryError(e);
+            }
+        })();
+    }, [stackTrace]);
+    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',
+        // @ts-expect-error add version info at bottom if we are in jbrowse-web
+        window.JBrowseSession ? `JBrowse ${window.JBrowseSession.version}` : '',
+    ].join('\n');
+    const err = encodeURIComponent('I got this error from JBrowse, here is the stack trace:\n\n```\n' +
+        errorBoxText +
+        '\n```\n');
+    const githubLink = `https://github.com/GMOD/jbrowse-components/issues/new?labels=bug&title=JBrowse+issue&body=${err}`;
+    const emailLink = `mailto:jbrowse2dev@gmail.com?subject=JBrowse%202%20error&body=${err}`;
+    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(react_1.default.Fragment, null,
+            react_1.default.createElement(material_1.Typography, null,
+                "Post a new issue at",
+                ' ',
+                react_1.default.createElement(material_1.Link, { href: githubLink, target: "_blank" }, "GitHub"),
+                ' ',
+                "or send an email to",
+                ' ',
+                react_1.default.createElement(material_1.Link, { href: emailLink, target: "_blank" }, "jbrowse2dev@gmail.com"),
+                ' '),
+            react_1.default.createElement("pre", { style: {
+                    background: 'lightgrey',
+                    border: '1px solid black',
+                    overflow: 'auto',
+                    margin: 20,
+                    maxHeight: 300,
+                } }, errorBoxText)))),
+        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"))));
+}
+exports.default = ErrorMessageStackTraceDialog;

package/ui/RedErrorMessageBox.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export default function RedErrorMessageBox({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;

package/ui/RedErrorMessageBox.js

@@ -0,0 +1,17 @@
+"use strict";
+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"));
+function RedErrorMessageBox({ children, }) {
+    return (react_1.default.createElement("div", { style: {
+            padding: 4,
+            margin: 4,
+            overflow: 'auto',
+            maxHeight: 200,
+            background: '#f88',
+            border: '1px solid black',
+        } }, children));
+}
+exports.default = RedErrorMessageBox;

package/ui/Snackbar.js

@@ -16,7 +16,7 @@ const Snackbar = (0, mobx_react_1.observer)(function ({ session }) {
             session.popSnackbarMessage();
         }
     };
-    return !!latestMessage ? (react_1.default.createElement(material_1.Snackbar, { open: true, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' } },
+    return latestMessage ? (react_1.default.createElement(material_1.Snackbar, { open: true, onClose: handleClose, anchorOrigin: { vertical: 'bottom', horizontal: 'center' } },
         react_1.default.createElement(material_1.Alert, { onClose: handleClose, action: latestMessage.action ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(material_1.Button, { color: "inherit", onClick: e => {
                         var _a;