@jbrowse/core 2.10.2 → 2.11.0

package/ui/AssemblySelector.d.ts

@@ -3,11 +3,11 @@ import { InputProps as IIP, TextFieldProps as TFP } from '@mui/material';
 import { AbstractSessionModel } from '../util';
 declare const AssemblySelector: ({ session, onChange, selected, InputProps, TextFieldProps, localStorageKey, helperText, }: {
     session: AbstractSessionModel;
-    helperText?: string | undefined;
+    helperText?: string;
     onChange: (arg: string) => void;
-    selected?: string | undefined;
-    localStorageKey?: string | undefined;
-    InputProps?: IIP | undefined;
-    TextFieldProps?: TFP | undefined;
+    selected?: string;
+    localStorageKey?: string;
+    InputProps?: IIP;
+    TextFieldProps?: TFP;
 }) => React.JSX.Element;
 export default AssemblySelector;

package/ui/CascadingMenuButton.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { MenuItem } from '@jbrowse/core/ui';
 declare const CascadingMenuButton: ({ children, menuItems, closeAfterItemClick, stopPropagation, setOpen, onClick: onClickExtra, ...rest }: {
-    [key: string]: unknown;
-    children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    children?: React.ReactElement;
     menuItems: MenuItem[];
-    closeAfterItemClick?: boolean | undefined;
-    stopPropagation?: boolean | undefined;
-    onClick?: (() => void) | undefined;
-    setOpen?: ((arg: boolean) => void) | undefined;
+    closeAfterItemClick?: boolean;
+    stopPropagation?: boolean;
+    onClick?: () => void;
+    setOpen?: (arg: boolean) => void;
+    [key: string]: unknown;
 }) => React.JSX.Element;
 export default CascadingMenuButton;

package/ui/Dialog.js

@@ -30,7 +30,7 @@ const Dialog = (0, mobx_react_1.observer)(function (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) ? (react_1.default.createElement(react_1.default.Fragment, null, header)) : (react_1.default.createElement(material_1.DialogTitle, null,
+            react_1.default.isValidElement(header) ? (header) : (react_1.default.createElement(material_1.DialogTitle, null,
                 title,
                 onClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => {
                         // @ts-expect-error

package/ui/ErrorMessage.d.ts

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

package/ui/ErrorMessage.js

@@ -28,7 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
+// 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'))));
 function parseError(str) {
     let snapshotError = '';
@@ -53,13 +58,21 @@ function parseError(str) {
     }
     return snapshotError;
 }
-const ErrorMessage = ({ error }) => {
+const ErrorMessage = ({ error, onReset, }) => {
     const str = `${error}`;
+    const str2 = str.indexOf('expected an instance of');
+    const str3 = str2 !== -1 ? str.slice(0, str2) : str;
     const snapshotError = parseError(str);
     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,
+        str3.slice(0, 10000),
+        react_1.default.createElement("div", { style: { float: 'right', marginLeft: 100 } },
+            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),
         snapshotError ? (react_1.default.createElement("pre", { style: {
                 background: 'lightgrey',
                 border: '1px solid black',

package/ui/ErrorMessageStackTraceDialog.d.ts

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

package/ui/ErrorMessageStackTraceDialog.js

@@ -33,6 +33,24 @@ const copy_to_clipboard_1 = __importDefault(require("copy-to-clipboard"));
 // locals
 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));
+}
+async function myfetch(uri) {
+    const res = await fetch(uri);
+    if (!res.ok) {
+        throw new Error(`HTTP ${res.status} fetching ${uri}: ${await res.text()}`);
+    }
+    return res;
+}
+async function myfetchjson(uri) {
+    const res = await myfetch(uri);
+    return res.json();
+}
+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 = {};
@@ -42,11 +60,12 @@ async function getSourceMapFromUri(uri) {
         return sourceMaps[uri];
     }
     const uriQuery = new URL(uri).search;
-    const currentScriptContent = await (await fetch(uri)).text();
+    const currentScriptContent = await myfetchtext(uri);
     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();
+    const data = await myfetchjson(mapUri);
+    const map = new source_map_js_1.SourceMapConsumer(data);
     sourceMaps[uri] = map;
     return map;
 }
@@ -54,13 +73,13 @@ 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);
+        const match = new RegExp(/(.*)(https?:\/\/.*):(\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 consumer = await getSourceMapFromUri(uri);
         const originalPosition = consumer.originalPositionFor({
             line: parseInt(match[3]),
             column: parseInt(match[4]),
@@ -88,12 +107,42 @@ function stripMessage(trace, error) {
         return trace;
     }
 }
-function ErrorMessageStackTraceDialog({ error, onClose, }) {
+function Contents({ text, extra }) {
+    const err = encodeURIComponent([
+        'I got this error from JBrowse, here is the stack trace:\n',
+        '```',
+        text,
+        '```',
+        extra ? `supporting data: ${JSON.stringify(extra, null, 2)}` : '',
+    ].join('\n') + '\n');
+    const err2 = [
+        text,
+        extra ? `supporting data: ${JSON.stringify(extra, null, 2)}` : '',
+    ].join('\n');
+    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", { style: {
+                background: 'lightgrey',
+                border: '1px solid black',
+                overflow: 'auto',
+                margin: 20,
+                maxHeight: 300,
+            } }, err2)));
+}
+function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
     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 stackTracePreProcessed = `${typeof error === 'object' && error !== null && 'stack' in error ? error.stack : ''}`;
+    const errorText = error ? `${error}` : '';
     const stackTrace = stripMessage(stackTracePreProcessed, errorText);
     (0, react_1.useEffect)(() => {
         // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -115,35 +164,16 @@ function ErrorMessageStackTraceDialog({ error, onClose, }) {
             ? 'Error loading source map, showing raw stack trace below:'
             : '',
         errorText.length > MAX_ERR_LEN
-            ? errorText.slice(0, 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}`;
+    ]
+        .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(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.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);

package/ui/FileSelector/FileSelector.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { FileLocation, AbstractRootModel } from '../../util/types';
 declare const FileSelector: (props: {
-    location?: FileLocation | undefined;
+    location?: FileLocation;
     setLocation: (param: FileLocation) => void;
-    setName?: ((str: string) => void) | undefined;
-    name?: string | undefined;
-    description?: string | undefined;
-    rootModel?: AbstractRootModel | undefined;
+    setName?: (str: string) => void;
+    name?: string;
+    description?: string;
+    rootModel?: AbstractRootModel;
 }) => React.JSX.Element;
 export default FileSelector;

package/ui/FileSelector/UrlChooser.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FileLocation } from '../../util/types';
 declare const UrlChooser: ({ location, setLocation, label, }: {
-    location?: FileLocation | undefined;
+    location?: FileLocation;
     setLocation: (arg: FileLocation) => void;
-    label?: string | undefined;
+    label?: string;
 }) => React.JSX.Element;
 export default UrlChooser;

package/ui/MenuButton.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import { MenuItem } from '@jbrowse/core/ui';
 declare const MenuButton: ({ children, menuItems, closeAfterItemClick, stopPropagation, setOpen, ...rest }: {
-    [key: string]: unknown;
-    closeAfterItemClick?: boolean | undefined;
-    children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    closeAfterItemClick?: boolean;
+    children?: React.ReactElement;
     menuItems: MenuItem[];
-    stopPropagation?: boolean | undefined;
-    setOpen?: ((arg: boolean) => void) | undefined;
+    stopPropagation?: boolean;
+    setOpen?: (arg: boolean) => void;
+    [key: string]: unknown;
 }) => React.JSX.Element;
 export default MenuButton;

package/ui/SnackbarModel.d.ts

@@ -1,5 +1,3 @@
-import { IModelType, ModelProperties } from 'mobx-state-tree';
-import { IObservableArray } from 'mobx';
 import { NotificationLevel, SnackAction } from '../util/types';
 export interface SnackbarMessage {
     message: string;
@@ -10,31 +8,24 @@ export interface SnackbarMessage {
  * #stateModel SnackbarModel
  * #category session
  */
-declare function makeExtension(snackbarMessages: IObservableArray<SnackbarMessage>): {
-    views: {
-        /**
-         * #getter
-         */
-        readonly snackbarMessages: IObservableArray<SnackbarMessage>;
-    };
-    actions: {
-        /**
-         * #action
-         */
-        notify(message: string, level?: NotificationLevel, action?: SnackAction): void;
-        /**
-         * #action
-         */
-        pushSnackbarMessage(message: string, level?: NotificationLevel, action?: SnackAction): number;
-        /**
-         * #action
-         */
-        popSnackbarMessage(): SnackbarMessage | undefined;
-        /**
-         * #action
-         */
-        removeSnackbarMessage(message: string): void;
-    };
-};
-export default function addSnackbarToModel<PROPS extends ModelProperties, OTHERS>(tree: IModelType<PROPS, OTHERS>): IModelType<PROPS, OTHERS & ReturnType<typeof makeExtension>['actions'] & ReturnType<typeof makeExtension>['views']>;
-export {};
+export default function SnackbarModel(): import("mobx-state-tree").IModelType<{}, {
+    snackbarMessages: import("mobx").IObservableArray<SnackbarMessage>;
+} & {
+    /**
+     * #action
+     */
+    notify(message: string, level?: NotificationLevel, action?: SnackAction): void;
+    notifyError(errorMessage: string, error?: unknown, extra?: unknown): void;
+    /**
+     * #action
+     */
+    pushSnackbarMessage(message: string, level?: NotificationLevel, action?: SnackAction): number;
+    /**
+     * #action
+     */
+    popSnackbarMessage(): SnackbarMessage | undefined;
+    /**
+     * #action
+     */
+    removeSnackbarMessage(message: string): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/ui/SnackbarModel.js

@@ -1,60 +1,97 @@
 "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 mobx_state_tree_1 = require("mobx-state-tree");
 const mobx_1 = require("mobx");
+// icons
+const Report_1 = __importDefault(require("@mui/icons-material/Report"));
+// lazies
+const ErrorMessageStackTraceDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@jbrowse/core/ui/ErrorMessageStackTraceDialog'))));
 /**
  * #stateModel SnackbarModel
  * #category session
  */
-function makeExtension(snackbarMessages) {
-    return {
-        views: {
-            /**
-             * #getter
-             */
-            get snackbarMessages() {
-                return snackbarMessages;
-            },
+function SnackbarModel() {
+    return mobx_state_tree_1.types
+        .model({})
+        .volatile(() => ({
+        snackbarMessages: mobx_1.observable.array(),
+    }))
+        .actions(self => ({
+        /**
+         * #action
+         */
+        notify(message, level, action) {
+            this.pushSnackbarMessage(message, level, action);
+            if (level === 'info' || level === 'success') {
+                setTimeout(() => {
+                    this.removeSnackbarMessage(message);
+                }, 5000);
+            }
         },
-        actions: {
-            /**
-             * #action
-             */
-            notify(message, level, action) {
-                this.pushSnackbarMessage(message, level, action);
-                if (level === 'info' || level === 'success') {
-                    setTimeout(() => {
-                        this.removeSnackbarMessage(message);
-                    }, 5000);
-                }
-            },
-            /**
-             * #action
-             */
-            pushSnackbarMessage(message, level, action) {
-                return snackbarMessages.push({ message, level, action });
-            },
-            /**
-             * #action
-             */
-            popSnackbarMessage() {
-                return snackbarMessages.pop();
-            },
-            /**
-             * #action
-             */
-            removeSnackbarMessage(message) {
-                const element = snackbarMessages.find(f => f.message === message);
-                if (element) {
-                    snackbarMessages.remove(element);
-                }
-            },
+        notifyError(errorMessage, error, extra) {
+            this.notify(errorMessage, 'error', {
+                name: react_1.default.createElement(Report_1.default, null),
+                onClick: () => {
+                    // @ts-expect-error
+                    self.queueDialog((onClose) => [
+                        ErrorMessageStackTraceDialog,
+                        {
+                            onClose,
+                            error,
+                            extra,
+                        },
+                    ]);
+                },
+            });
         },
-    };
-}
-function addSnackbarToModel(tree) {
-    return tree.extend(() => {
-        const snackbarMessages = mobx_1.observable.array();
-        return makeExtension(snackbarMessages);
-    });
+        /**
+         * #action
+         */
+        pushSnackbarMessage(message, level, action) {
+            return self.snackbarMessages.push({ message, level, action });
+        },
+        /**
+         * #action
+         */
+        popSnackbarMessage() {
+            return self.snackbarMessages.pop();
+        },
+        /**
+         * #action
+         */
+        removeSnackbarMessage(message) {
+            const element = self.snackbarMessages.find(f => f.message === message);
+            if (element) {
+                self.snackbarMessages.remove(element);
+            }
+        },
+    }));
 }
-exports.default = addSnackbarToModel;
+exports.default = SnackbarModel;

package/ui/Tooltip.d.ts

@@ -5,7 +5,7 @@ declare const Tooltip: ({ offsetX, offsetY, configuration, feature, timeout, }:
     offsetX: number;
     offsetY: number;
     configuration: AnyConfigurationModel;
-    feature?: Feature | undefined;
-    timeout?: number | undefined;
+    feature?: Feature;
+    timeout?: number;
 }) => React.JSX.Element | null;
 export default Tooltip;

package/ui/theme.d.ts

@@ -3,6 +3,7 @@ declare module '@mui/material/styles/createPalette' {
     interface Palette {
         tertiary: Palette['primary'];
         quaternary: Palette['primary'];
+        highlight: Palette['primary'];
         stopCodon?: string;
         startCodon?: string;
         bases: {
@@ -11,10 +12,29 @@ declare module '@mui/material/styles/createPalette' {
             G: Palette['primary'];
             T: Palette['primary'];
         };
+        frames: [
+            null,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined
+        ];
+        framesCDS: [
+            null,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined
+        ];
     }
     interface PaletteOptions {
         tertiary?: PaletteOptions['primary'];
         quaternary?: PaletteOptions['primary'];
+        highlight?: PaletteOptions['primary'];
         stopCodon?: string;
         startCodon?: string;
         bases?: {
@@ -23,6 +43,24 @@ declare module '@mui/material/styles/createPalette' {
             G?: PaletteOptions['primary'];
             T?: PaletteOptions['primary'];
         };
+        framesCDS?: [
+            null,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined
+        ];
+        frames?: [
+            null,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined,
+            Palette['primary'] | undefined
+        ];
     }
 }
 export declare const defaultThemes: ThemeMap;