@jbrowse/core 2.13.1 → 2.15.0

package/ui/AssemblySelector.js

@@ -57,7 +57,9 @@ const AssemblySelector = (0, mobx_react_1.observer)(function ({ session, onChang
         }
     }, [selection, onChange, selected]);
     const error = assemblyNames.length ? '' : 'No configured assemblies';
-    return (react_1.default.createElement(material_1.TextField, { select: true, label: "Assembly", variant: "outlined", helperText: error || helperText, value: selection || '', inputProps: { 'data-testid': 'assembly-selector' }, onChange: event => setLastSelected(event.target.value), error: !!error, InputProps: InputProps, disabled: !!error, className: classes.importFormEntry, ...TextFieldProps }, assemblyNames.map(name => {
+    return (react_1.default.createElement(material_1.TextField, { select: true, label: "Assembly", variant: "outlined", helperText: error || helperText, value: selection || '', inputProps: { 'data-testid': 'assembly-selector' }, onChange: event => {
+            setLastSelected(event.target.value);
+        }, error: !!error, InputProps: InputProps, disabled: !!error, className: classes.importFormEntry, ...TextFieldProps }, assemblyNames.map(name => {
         const assembly = assemblyManager.get(name);
         const displayName = assembly ? (0, configuration_1.getConf)(assembly, 'displayName') : '';
         return (react_1.default.createElement(material_1.MenuItem, { key: name, value: name }, displayName || name));

package/ui/CascadingMenu.js

@@ -26,6 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable @typescript-eslint/no-unsafe-function-type */
 const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const Menu_1 = require("./Menu");
@@ -99,7 +100,7 @@ function CascadingMenuList({ onMenuItemClick, closeAfterItemClick, menuItems, ..
     const hasIcon = menuItems.some(m => 'icon' in m && m.icon);
     return (react_1.default.createElement(react_1.default.Fragment, null, menuItems.map((item, idx) => {
         return 'subMenu' in item ? (react_1.default.createElement(CascadingSubmenu, { key: `subMenu-${item.label}-${idx}`, popupId: `subMenu-${item.label}`, title: item.label, Icon: item.icon, inset: hasIcon && !item.icon, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu },
-            react_1.default.createElement(CascadingMenuList, { ...props, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu }))) : item.type === 'divider' ? (react_1.default.createElement(material_1.Divider, { key: `divider-${idx}`, component: "li" })) : item.type === 'subHeader' ? (react_1.default.createElement(material_1.ListSubheader, { key: `subHeader-${item.label}-${idx}` }, item.label)) : (react_1.default.createElement(CascadingMenuItem, { key: `${item.label}-${idx}`, closeAfterItemClick: closeAfterItemClick, onClick: 'onClick' in item ? handleClick(item.onClick) : undefined, disabled: Boolean(item.disabled) },
+            react_1.default.createElement(CascadingMenuList, { ...props, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu }))) : item.type === 'divider' ? (react_1.default.createElement(material_1.Divider, { key: `divider-${JSON.stringify(item)}-${idx}`, component: "li" })) : item.type === 'subHeader' ? (react_1.default.createElement(material_1.ListSubheader, { key: `subHeader-${item.label}-${idx}` }, item.label)) : (react_1.default.createElement(CascadingMenuItem, { key: `${item.label}-${idx}`, closeAfterItemClick: closeAfterItemClick, onClick: 'onClick' in item ? handleClick(item.onClick) : undefined, disabled: Boolean(item.disabled) },
             item.icon ? (react_1.default.createElement(material_1.ListItemIcon, null,
                 react_1.default.createElement(item.icon, null))) : null,
             ' ',

package/ui/CascadingMenuButton.js

@@ -55,6 +55,8 @@ const CascadingMenuButton = (0, mobx_react_1.observer)(function CascadingMenuBut
                 onTouchStart(event);
                 onClickExtra === null || onClickExtra === void 0 ? void 0 : onClickExtra();
             }, ...rest2, ...rest, disabled: menuItems.length === 0 }, children),
-        react_1.default.createElement(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_, callback) => callback(), menuItems: menuItems, closeAfterItemClick: closeAfterItemClick, popupState: popupState })));
+        react_1.default.createElement(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_, callback) => {
+                callback();
+            }, menuItems: menuItems, closeAfterItemClick: closeAfterItemClick, popupState: popupState })));
 });
 exports.default = CascadingMenuButton;

package/ui/ColorPicker.js

@@ -58,8 +58,12 @@ const PopoverPicker = ({ color, onChange, }) => {
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const { classes } = useStyles();
     return (react_1.default.createElement("div", { className: classes.picker },
-        react_1.default.createElement("div", { className: classes.swatch, style: { backgroundColor: color }, onClick: event => setAnchorEl(event.currentTarget) }),
-        react_1.default.createElement(ColorPopover, { anchorEl: anchorEl, onClose: () => setAnchorEl(null), color: color, onChange: onChange })));
+        react_1.default.createElement("div", { className: classes.swatch, style: { backgroundColor: color }, onClick: event => {
+                setAnchorEl(event.currentTarget);
+            } }),
+        react_1.default.createElement(ColorPopover, { anchorEl: anchorEl, onClose: () => {
+                setAnchorEl(null);
+            }, color: color, onChange: onChange })));
 };
 exports.PopoverPicker = PopoverPicker;
 function ColorPopover({ anchorEl, onChange, onClose, color, }) {
@@ -89,7 +93,13 @@ function ColorPicker({ onChange, color, }) {
                     const pal = event.target.value;
                     setVal(pal);
                 } }, palettes.map(p => (react_1.default.createElement(material_1.MenuItem, { value: p, key: p }, p)))),
-            react_1.default.createElement("div", { className: classes.swatches }, presetColors.map((presetColor, idx) => (react_1.default.createElement("button", { key: `${presetColor}-${idx}`, className: classes.swatch, style: { background: presetColor }, onClick: () => handleChange(presetColor) })))),
-            react_1.default.createElement(material_1.TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => handleChange(event.target.value) }))));
+            react_1.default.createElement("div", { className: classes.swatches }, presetColors.map((presetColor, idx) => (react_1.default.createElement("button", { type: "button", 
+                /* biome-ignore lint/suspicious/noArrayIndexKey: */
+                key: `${presetColor}-${idx}`, className: classes.swatch, style: { background: presetColor }, onClick: () => {
+                    handleChange(presetColor);
+                } })))),
+            react_1.default.createElement(material_1.TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => {
+                    handleChange(event.target.value);
+                } }))));
 }
 exports.default = exports.PopoverPicker;

package/ui/DropDownMenu.js

@@ -50,7 +50,9 @@ const DropDownMenu = (0, mobx_react_1.observer)(function ({ menuTitle, session,
         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 } },
+        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) => {

package/ui/EditableTypography.js

@@ -70,7 +70,9 @@ const EditableTypography = react_1.default.forwardRef(function EditableTypograph
     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: {
+        react_1.default.createElement(material_1.InputBase, { inputRef: node => {
+                setInputNode(node);
+            }, className: classes.inputBase, inputProps: {
                 style: {
                     width,
                     ...(variant && variant !== 'inherit'
@@ -81,7 +83,9 @@ const EditableTypography = react_1.default.forwardRef(function EditableTypograph
                 input: classes.input,
                 root: classes.inputRoot,
                 focused: classes.inputFocused,
-            }, value: val, onChange: event => setEditedValue(event.target.value), onKeyDown: event => {
+            }, value: val, onChange: event => {
+                setEditedValue(event.target.value);
+            }, onKeyDown: event => {
                 if (event.key === 'Enter') {
                     inputNode === null || inputNode === void 0 ? void 0 : inputNode.blur();
                 }

package/ui/ErrorMessage.d.ts

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

package/ui/ErrorMessage.js

@@ -28,6 +28,7 @@ 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");
+const mui_1 = require("tss-react/mui");
 // locals
 const RedErrorMessageBox_1 = __importDefault(require("./RedErrorMessageBox"));
 // icons
@@ -35,6 +36,17 @@ 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: {
+        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';
@@ -44,41 +56,46 @@ function parseError(str) {
         // best effort to make a better error message than the default
         // mobx-state-tree
         // case 1. element has a path
-        const match = trim.match(/.*at path "(.*)" snapshot `(.*)` is not assignable/m);
+        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 = trim.match(/.*snapshot `(.*)` is not assignable/);
+        const match2 = /.*snapshot `(.*)` is not assignable/.exec(trim);
         if (match2) {
-            str = `Failed to load element...Failed element had snapshot`;
+            str = 'Failed to load element...Failed element had snapshot';
             snapshotError = match2[1];
         }
     }
     return snapshotError;
 }
-const ErrorMessage = ({ error, onReset, }) => {
+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));
+}
+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);
-    const [showStack, setShowStack] = (0, react_1.useState)(false);
     return (react_1.default.createElement(RedErrorMessageBox_1.default, 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',
-                margin: 20,
-            } }, 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));
-};
+        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));
+}
 exports.default = ErrorMessage;

package/ui/ErrorMessageStackTraceDialog.js

@@ -58,7 +58,7 @@ async function myfetchtext(uri) {
 const sourceMaps = {};
 async function getSourceMapFromUri(uri) {
     var _a;
-    if (sourceMaps[uri] != undefined) {
+    if (sourceMaps[uri] !== undefined) {
         return sourceMaps[uri];
     }
     const uriQuery = new URL(uri).search;
@@ -83,12 +83,12 @@ async function mapStackTrace(stack) {
         const uri = match[2];
         const consumer = await getSourceMapFromUri(uri);
         const originalPosition = consumer.originalPositionFor({
-            line: parseInt(match[3]),
-            column: parseInt(match[4]),
+            line: Number.parseInt(match[3]),
+            column: Number.parseInt(match[4]),
         });
-        if (originalPosition.source === null ||
-            originalPosition.line === null ||
-            originalPosition.column === null) {
+        if (!originalPosition.source ||
+            !originalPosition.line ||
+            !originalPosition.column) {
             mappedStack.push(line);
             continue;
         }
@@ -120,13 +120,13 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
 }));
 function Contents({ text, extra }) {
     const { classes } = useStyles();
-    const err = encodeURIComponent([
+    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');
+    ].join('\n')}\n`);
     const err2 = [
         text,
         extra ? `supporting data: ${JSON.stringify(extra, null, 2)}` : '',
@@ -184,7 +184,9 @@ function ErrorMessageStackTraceDialog({ error, onClose, extra, }) {
             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);
+                    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"))));
 }

package/ui/FactoryResetDialog.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export default function FactoryResetDialog({ onClose, open, onFactoryReset, }: {
     onClose: () => void;
     open: boolean;
-    onFactoryReset: Function;
+    onFactoryReset: () => void;
 }): React.JSX.Element;

package/ui/FactoryResetDialog.js

@@ -14,10 +14,16 @@ function FactoryResetDialog({ onClose, open, onFactoryReset, }) {
         }
         onClose();
     }
-    return (react_1.default.createElement(Dialog_1.default, { title: "Reset", onClose: () => handleDialogClose(), open: open },
+    return (react_1.default.createElement(Dialog_1.default, { title: "Reset", onClose: () => {
+            handleDialogClose();
+        }, open: open },
         react_1.default.createElement(material_1.DialogContent, null,
             react_1.default.createElement(material_1.DialogContentText, null, "Are you sure you want to reset? This will restore the default configuration.")),
         react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { onClick: () => handleDialogClose(), color: "primary" }, "Cancel"),
-            react_1.default.createElement(material_1.Button, { onClick: () => handleDialogClose('reset'), color: "primary", variant: "contained" }, "OK"))));
+            react_1.default.createElement(material_1.Button, { onClick: () => {
+                    handleDialogClose();
+                }, color: "primary" }, "Cancel"),
+            react_1.default.createElement(material_1.Button, { onClick: () => {
+                    handleDialogClose('reset');
+                }, color: "primary", variant: "contained" }, "OK"))));
 }

package/ui/FatalErrorDialog.js

@@ -34,8 +34,12 @@ const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
 const ResetComponent = ({ onFactoryReset, resetButtonText, }) => {
     const [dialogOpen, setDialogOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Button, { "data-testid": "fatal-error", color: "primary", variant: "contained", onClick: () => setDialogOpen(true) }, resetButtonText),
-        react_1.default.createElement(FactoryResetDialog_1.default, { onClose: () => setDialogOpen(false), open: dialogOpen, onFactoryReset: onFactoryReset })));
+        react_1.default.createElement(material_1.Button, { "data-testid": "fatal-error", color: "primary", variant: "contained", onClick: () => {
+                setDialogOpen(true);
+            } }, resetButtonText),
+        react_1.default.createElement(FactoryResetDialog_1.default, { onClose: () => {
+                setDialogOpen(false);
+            }, open: dialogOpen, onFactoryReset: onFactoryReset })));
 };
 function FatalErrorDialog({ componentStack, error = 'No error message provided', onFactoryReset, resetButtonText = 'Factory Reset', }) {
     return (react_1.default.createElement(material_1.Dialog, { maxWidth: "xl", open: true },
@@ -44,6 +48,8 @@ function FatalErrorDialog({ componentStack, error = 'No error message provided',
             react_1.default.createElement(ErrorMessage_1.default, { error: error }),
             react_1.default.createElement("pre", null, componentStack)),
         react_1.default.createElement(material_1.DialogActions, null,
-            react_1.default.createElement(material_1.Button, { color: "secondary", variant: "contained", onClick: () => window.location.reload() }, "Refresh"),
+            react_1.default.createElement(material_1.Button, { color: "secondary", variant: "contained", onClick: () => {
+                    window.location.reload();
+                } }, "Refresh"),
             react_1.default.createElement(ResetComponent, { onFactoryReset: onFactoryReset, resetButtonText: resetButtonText }))));
 }

package/ui/FileSelector/FileSelector.js

@@ -68,8 +68,8 @@ const FileSelector = (0, mobx_react_1.observer)(function (props) {
     const setLocationWithAccount = (0, react_1.useCallback)((location) => {
         setLocation({
             ...location,
-            ...((0, types_1.isUriLocation)(location)
-                ? { internetAccountId: selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.internetAccountId }
+            ...(selectedAccount && (0, types_1.isUriLocation)(location)
+                ? { internetAccountId: selectedAccount.internetAccountId }
                 : {}),
         });
     }, [setLocation, selectedAccount]);
@@ -115,10 +115,14 @@ const FileSelector = (0, mobx_react_1.observer)(function (props) {
                     }),
                     hiddenAccounts.length > 0 ? (
                     // @ts-expect-error
-                    react_1.default.createElement(material_1.ToggleButton, { onClick: event => setAnchorEl(event.target), selected: false },
+                    react_1.default.createElement(material_1.ToggleButton, { onClick: event => {
+                            setAnchorEl(event.target);
+                        }, selected: false },
                         "More",
                         react_1.default.createElement(ArrowDropDown_1.default, null))) : null),
-                react_1.default.createElement(material_1.Menu, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, hiddenAccounts === null || hiddenAccounts === void 0 ? void 0 : hiddenAccounts.map(id => {
+                react_1.default.createElement(material_1.Menu, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => {
+                        setAnchorEl(null);
+                    }, anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, hiddenAccounts.map(id => {
                     const { internetAccountId, name } = map[id];
                     return (react_1.default.createElement(material_1.MenuItem, { key: id, value: internetAccountId, onClick: () => {
                             setRecentlyUsedInternetAccounts([

package/ui/FileSelector/LocalFileChooser.js

@@ -8,11 +8,11 @@ const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const util_1 = require("../../util");
 const tracks_1 = require("../../util/tracks");
-function isLocalPathLocation(location) {
-    return 'localPath' in location;
+function isLocalPathLocation(loc) {
+    return 'localPath' in loc;
 }
-function isBlobLocation(location) {
-    return 'blobId' in location;
+function isBlobLocation(loc) {
+    return 'blobId' in loc;
 }
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     filename: {
@@ -32,11 +32,12 @@ function LocalFileChooser({ location, setLocation, }) {
                     "Choose File",
                     react_1.default.createElement("input", { type: "file", hidden: true, onChange: ({ target }) => {
                             var _a;
-                            const file = (_a = target === null || target === void 0 ? void 0 : target.files) === null || _a === void 0 ? void 0 : _a[0];
+                            const file = (_a = target.files) === null || _a === void 0 ? void 0 : _a[0];
                             if (file) {
                                 if (util_1.isElectron) {
+                                    const { webUtils } = window.require('electron');
                                     setLocation({
-                                        localPath: file.path,
+                                        localPath: webUtils.getPathForFile(file),
                                         locationType: 'LocalPathLocation',
                                     });
                                 }

package/ui/LoadingEllipses.js

@@ -34,5 +34,5 @@ const useStyles = (0, mui_1.makeStyles)()({
 });
 function LoadingEllipses({ message, variant = 'body2', ...rest }) {
     const { classes } = useStyles();
-    return (react_1.default.createElement(material_1.Typography, { className: classes.dots, ...rest, variant: variant }, `${message || 'Loading'}`));
+    return (react_1.default.createElement(material_1.Typography, { className: classes.dots, ...rest, variant: variant }, message || 'Loading'));
 }

package/ui/Menu.d.ts

@@ -29,17 +29,17 @@ export interface BaseMenuItem {
 }
 export interface NormalMenuItem extends BaseMenuItem {
     type?: 'normal';
-    onClick: Function;
+    onClick: (...args: any[]) => void;
 }
 export interface CheckboxMenuItem extends BaseMenuItem {
     type: 'checkbox';
     checked: boolean;
-    onClick: Function;
+    onClick: (...args: any[]) => void;
 }
 export interface RadioMenuItem extends BaseMenuItem {
     type: 'radio';
     checked: boolean;
-    onClick: Function;
+    onClick: (...args: any[]) => void;
 }
 export interface SubMenuItem extends BaseMenuItem {
     type?: 'subMenu';
@@ -48,7 +48,7 @@ export interface SubMenuItem extends BaseMenuItem {
 export type MenuItem = MenuDivider | MenuSubHeader | NormalMenuItem | CheckboxMenuItem | RadioMenuItem | SubMenuItem;
 interface MenuProps extends PopoverProps {
     menuItems: MenuItem[];
-    onMenuItemClick: (event: React.MouseEvent<HTMLLIElement, MouseEvent>, callback: Function) => void;
+    onMenuItemClick: (event: React.MouseEvent<HTMLLIElement>, callback: (...args: any[]) => void) => void;
 }
 declare function Menu(props: MenuProps): React.JSX.Element;
 export default Menu;

package/ui/Menu.js

@@ -172,7 +172,7 @@ const MenuPage = react_1.default.forwardRef(function MenuPage2(props, ref) {
             .sort((a, b) => (b.priority || 0) - (a.priority || 0))
             .map((menuItem, idx) => {
             if (menuItem.type === 'divider') {
-                return react_1.default.createElement(material_1.Divider, { key: `divider-${idx}`, component: "li" });
+                return (react_1.default.createElement(material_1.Divider, { key: `divider-${JSON.stringify(menuItem)}-${idx}`, component: "li" }));
             }
             if (menuItem.type === 'subHeader') {
                 return (react_1.default.createElement(material_1.ListSubheader, { key: `subHeader-${menuItem.label}-${idx}` }, menuItem.label));
@@ -213,7 +213,7 @@ const MenuPage = react_1.default.forwardRef(function MenuPage2(props, ref) {
                     switch (e.key) {
                         case 'ArrowLeft':
                         case 'Escape': {
-                            onClose && onClose(e, 'escapeKeyDown');
+                            onClose === null || onClose === void 0 ? void 0 : onClose(e, 'escapeKeyDown');
                             break;
                         }
                         case 'ArrowUp': {
@@ -249,12 +249,14 @@ const MenuPage = react_1.default.forwardRef(function MenuPage2(props, ref) {
             }
             return subMenu;
         })));
-    return top ? (ListContents) : (react_1.default.createElement(material_1.Grow, { in: open, style: { transformOrigin: `0 0 0` }, ref: ref },
+    return top ? (ListContents) : (
+    // Grow is required for cascading sub-menus
+    react_1.default.createElement(material_1.Grow, { in: open, style: { transformOrigin: '0 0 0' }, ref: ref },
         react_1.default.createElement(material_1.Paper, { elevation: 8, ref: paperRef, className: classes.paper, style: { ...position } }, ListContents)));
 });
 function Menu(props) {
     const { open, onClose, menuItems, onMenuItemClick, ...other } = props;
-    return (react_1.default.createElement(material_1.Popover, { open: open, onClose: onClose, BackdropProps: { invisible: true }, anchorOrigin: {
+    return (react_1.default.createElement(material_1.Popover, { open: open, onClose: onClose, anchorOrigin: {
             vertical: 'bottom',
             horizontal: 'right',
             ...other.anchorOrigin,

package/ui/MenuButton.js

@@ -37,8 +37,12 @@ const MenuButton = (0, mobx_react_1.observer)(function MenuButton({ children, me
         setOpen === null || setOpen === void 0 ? void 0 : setOpen(isOpen);
     }, [isOpen, setOpen]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.IconButton, { ...rest, onClick: event => setAnchorEl(event.currentTarget) }, children),
-        react_1.default.createElement(Menu_1.default, { open: !!anchorEl, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), onMenuItemClick: (_, callback) => {
+        react_1.default.createElement(material_1.IconButton, { ...rest, onClick: event => {
+                setAnchorEl(event.currentTarget);
+            } }, children),
+        react_1.default.createElement(Menu_1.default, { open: !!anchorEl, anchorEl: anchorEl, onClose: () => {
+                setAnchorEl(undefined);
+            }, onMenuItemClick: (_, callback) => {
                 callback();
                 if (closeAfterItemClick) {
                     setAnchorEl(undefined);

package/ui/PrerenderedCanvas.js

@@ -23,7 +23,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = __importStar(require("react"));
 const offscreenCanvasPonyfill_1 = require("../util/offscreenCanvasPonyfill");
 function PrerenderedCanvas(props) {
@@ -45,9 +44,13 @@ function PrerenderedCanvas(props) {
         (0, offscreenCanvasPonyfill_1.drawImageOntoCanvasContext)(imageData, context);
         setDone(true);
     }, [imageData]);
-    const softClipString = showSoftClip ? '_softclipped' : '';
-    const blockKeyStr = blockKey ? '_' + blockKey : '';
-    const testId = `prerendered_canvas${softClipString}${blockKeyStr}${done ? '_done' : ''}`;
-    return (react_1.default.createElement("canvas", { "data-testid": testId, ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
+    return (react_1.default.createElement("canvas", { "data-testid": [
+            'prerendered_canvas',
+            showSoftClip ? 'softclipped' : '',
+            blockKey,
+            done ? 'done' : '',
+        ]
+            .filter(f => !!f)
+            .join('_'), ref: featureCanvas, width: width * highResolutionScaling, height: height * highResolutionScaling, style: { width, height, ...style } }));
 }
 exports.default = PrerenderedCanvas;

package/ui/RedErrorMessageBox.js

@@ -5,13 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = RedErrorMessageBox;
 const react_1 = __importDefault(require("react"));
+const mui_1 = require("tss-react/mui");
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    bg: {
+        padding: 4,
+        margin: 4,
+        overflow: 'auto',
+        maxHeight: 200,
+        background: theme.palette.mode === 'dark' ? '#833' : '#f88',
+        border: `1px solid ${theme.palette.divider}`,
+    },
+}));
 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));
+    const { classes } = useStyles();
+    return react_1.default.createElement("div", { className: classes.bg }, children);
 }

package/ui/ResizeHandle.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare function ResizeHandle({ onDrag, vertical, flexbox, className: originalClassName, onMouseDown, ...props }: {
-    onDrag: (lastFrameDistance: number, totalDistance: number) => number | void;
+    onDrag: (lastFrameDistance: number, totalDistance: number) => number | undefined;
     onMouseDown?: (event: React.MouseEvent) => void;
     vertical?: boolean;
     flexbox?: boolean;

package/ui/ReturnToImportFormDialog.js

@@ -16,6 +16,8 @@ const ReturnToImportFormDialog = (0, mobx_react_1.observer)(function ({ model, h
                     model.clearView();
                     handleClose();
                 }, variant: "contained", color: "primary", autoFocus: true }, "OK"),
-            react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), color: "secondary", variant: "contained" }, "Cancel"))));
+            react_1.default.createElement(material_1.Button, { onClick: () => {
+                    handleClose();
+                }, color: "secondary", variant: "contained" }, "Cancel"))));
 });
 exports.default = ReturnToImportFormDialog;

package/ui/SanitizedHTML.js

@@ -75,9 +75,7 @@ function SanitizedHTML({ html: pre, className, }) {
             }
         });
     }
-    return (react_1.default.createElement("span", { className: className, 
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML: {
+    return (react_1.default.createElement("span", { className: className, dangerouslySetInnerHTML: {
             __html: dompurify_1.default.sanitize(value),
         } }));
 }

package/ui/SnackbarModel.d.ts

@@ -9,17 +9,28 @@ export interface SnackbarMessage {
  * #category session
  */
 export default function SnackbarModel(): import("mobx-state-tree").IModelType<{}, {
+    /**
+     * #volatile
+     */
     snackbarMessages: import("mobx").IObservableArray<SnackbarMessage>;
+} & {
+    /**
+     * #getter
+     */
+    readonly snackbarMessageSet: Map<string, SnackbarMessage>;
 } & {
     /**
      * #action
      */
     notify(message: string, level?: NotificationLevel, action?: SnackAction): void;
+    /**
+     * #action
+     */
     notifyError(errorMessage: string, error?: unknown, extra?: unknown): void;
     /**
      * #action
      */
-    pushSnackbarMessage(message: string, level?: NotificationLevel, action?: SnackAction): number;
+    pushSnackbarMessage(message: string, level?: NotificationLevel, action?: SnackAction): void;
     /**
      * #action
      */