@jbrowse/core 2.4.0 → 2.4.1

package/ui/App.js

@@ -103,7 +103,7 @@ const App = (0, mobx_react_1.observer)(function (props) {
                 react_1.default.createElement(material_1.AppBar, { className: classes.appBar, position: "static" },
                     react_1.default.createElement(AppToolbar_1.default, { ...props }))),
             react_1.default.createElement("div", { className: classes.components },
-                views.length ? (views.map(view => (react_1.default.createElement(ViewPanel_1.default, { key: `view-${view.id}`, view: view, session: session })))) : (react_1.default.createElement(ViewLauncher_1.default, { ...props })),
+                views.length > 0 ? (views.map(view => (react_1.default.createElement(ViewPanel_1.default, { key: `view-${view.id}`, view: view, session: session })))) : (react_1.default.createElement(ViewLauncher_1.default, { ...props })),
                 react_1.default.createElement("div", { style: { height: 300 } }))),
         activeWidgets.size > 0 && minimized ? (react_1.default.createElement(material_1.Tooltip, { title: "Open drawer widget" },
             react_1.default.createElement(material_1.Fab, { className: drawerPosition === 'right' ? classes.fabRight : classes.fabLeft, color: "primary", "data-testid": "drawer-maximize", onClick: () => session.showWidgetDrawer() },

package/ui/AppLogo.js

@@ -12,11 +12,6 @@ const Logo_1 = require("./Logo");
 const Logo = (0, mobx_react_1.observer)(function ({ session, }) {
     const { configuration } = session;
     const logoPath = (0, configuration_1.readConfObject)(configuration, 'logoPath');
-    if (!(logoPath === null || logoPath === void 0 ? void 0 : logoPath.uri)) {
-        return react_1.default.createElement(Logo_1.LogoFull, { variant: "white" });
-    }
-    else {
-        return react_1.default.createElement("img", { src: logoPath.uri, alt: "Custom logo" });
-    }
+    return (logoPath === null || logoPath === void 0 ? void 0 : logoPath.uri) ? (react_1.default.createElement("img", { src: logoPath.uri, alt: "Custom logo" })) : (react_1.default.createElement(Logo_1.LogoFull, { variant: "white" }));
 });
 exports.default = Logo;

package/ui/ColorPicker.js

@@ -90,7 +90,7 @@ 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("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) }))));
 }
 exports.ColorPicker = ColorPicker;

package/ui/Dialog.js

@@ -32,7 +32,7 @@ function JBrowseDialog(props) {
             react_1.default.createElement(material_1.DialogTitle, null,
                 title,
                 onClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => {
-                        // @ts-ignore
+                        // @ts-expect-error
                         onClose();
                     } },
                     react_1.default.createElement(Close_1.default, null))) : null),

package/ui/DrawerWidget.js

@@ -77,13 +77,13 @@ const DrawerHeader = (0, mobx_react_1.observer)(({ session, setToolbarHeight, })
                         return HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading));
                     }, onChange: e => {
                         const w = session.activeWidgets.get(e.target.value);
-                        if (!w) {
-                            session.notify(`Widget not found ${e.target.value}`, 'warning');
+                        if (w) {
+                            session.showWidget(w);
                         }
                         else {
-                            session.showWidget(w);
+                            session.notify(`Widget not found ${e.target.value}`, 'warning');
                         }
-                    } }, Array.from(activeWidgets.values()).map(widget => {
+                    } }, [...activeWidgets.values()].map(widget => {
                     const widgetType = pluginManager.getWidgetType(widget.type);
                     const { HeadingComponent, heading } = widgetType;
                     return (react_1.default.createElement(material_1.MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },

package/ui/EditableTypography.js

@@ -59,7 +59,7 @@ const EditableTypography = react_1.default.forwardRef((props, ref) => {
     }, [blur, inputNode]);
     // possibly tss-react does not understand the passing of props to
     // useStyles, but it appears to work
-    // @ts-ignore
+    // @ts-expect-error
     const { classes } = useStyles(props, { props });
     const theme = (0, material_1.useTheme)();
     const clientWidth = sizerNode === null || sizerNode === void 0 ? void 0 : sizerNode.clientWidth;

package/ui/FileSelector/FileSelector.d.ts

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

package/ui/FileSelector/FileSelector.js

@@ -42,46 +42,45 @@ function ToggleButtonWithTooltip(props) {
 }
 function shorten(str, len) {
     if (typeof str === 'string' && str.length > len) {
-        return `${str.substring(0, len)}…`;
+        return `${str.slice(0, Math.max(0, len))}…`;
     }
     return str;
 }
-const FileSelector = (0, mobx_react_1.observer)((props) => {
+exports.default = (0, mobx_react_1.observer)(function (props) {
     const { location, name, description, rootModel, setLocation } = props;
     const fileOrUrl = !location || (0, types_1.isUriLocation)(location) ? 'url' : 'file';
     const [toggleButtonValue, setToggleButtonValue] = (0, react_1.useState)(location && 'internetAccountId' in location && location.internetAccountId
         ? location.internetAccountId
         : fileOrUrl);
-    const accts = (0, types_1.isAppRootModel)(rootModel)
-        ? rootModel.internetAccounts.slice()
-        : [];
+    const accts = (0, types_1.isAppRootModel)(rootModel) ? [...rootModel.internetAccounts] : [];
     const numShown = 2;
     const [shownAccts, setShownAccts] = (0, react_1.useState)(accts.slice(0, numShown));
     const [hiddenAccts, setHiddenAccts] = (0, react_1.useState)(accts.slice(numShown));
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    const selectedAcct = accts.find(ia => ia.internetAccountId === toggleButtonValue);
-    const setLocationWithAccount = (location) => {
+    const selectedAcct = accts.find(i => i.internetAccountId === toggleButtonValue);
+    const setLocationWithAcct = (0, react_1.useCallback)((location) => {
         setLocation({
             ...location,
-            internetAccountId: selectedAcct
-                ? selectedAcct.internetAccountId
-                : undefined,
+            ...((0, types_1.isUriLocation)(location)
+                ? { internetAccountId: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.internetAccountId }
+                : {}),
         });
-    };
-    // if you swap account selection after inputting url
-    if (location &&
-        selectedAcct &&
-        (0, types_1.isUriLocation)(location) &&
-        location.internetAccountId !== selectedAcct.internetAccountId) {
-        setLocationWithAccount(location);
-    }
-    let locationInput = (react_1.default.createElement(UrlChooser_1.default, { ...props, setLocation: setLocationWithAccount, label: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.selectorLabel }));
+    }, [setLocation, selectedAcct]);
+    (0, react_1.useEffect)(() => {
+        // if you swap account selection after inputting url
+        if (selectedAcct &&
+            (0, types_1.isUriLocation)(location) &&
+            location.internetAccountId !== selectedAcct.internetAccountId) {
+            setLocationWithAcct(location);
+        }
+    }, [location, selectedAcct, setLocationWithAcct]);
+    let locationInput = (react_1.default.createElement(UrlChooser_1.default, { ...props, setLocation: setLocationWithAcct, label: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.selectorLabel }));
     if (toggleButtonValue === 'file') {
         locationInput = react_1.default.createElement(LocalFileChooser_1.default, { ...props });
     }
     if (selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.SelectorComponent) {
         const { SelectorComponent } = selectedAcct;
-        locationInput = (react_1.default.createElement(SelectorComponent, { ...props, setLocation: setLocationWithAccount }));
+        locationInput = (react_1.default.createElement(SelectorComponent, { ...props, setLocation: setLocationWithAcct }));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Box, { display: "flex" },
@@ -93,7 +92,7 @@ const FileSelector = (0, mobx_react_1.observer)((props) => {
                             setToggleButtonValue(newState);
                         }
                         if ((0, types_1.isUriLocation)(location)) {
-                            setLocationWithAccount(location);
+                            setLocationWithAcct(location);
                         }
                     }, "aria-label": "file, url, or account picker" },
                     new URLSearchParams(window.location.search).get('adminKey') ? null : (react_1.default.createElement(material_1.ToggleButton, { value: "file", "aria-label": "local file" }, "File")),
@@ -101,23 +100,14 @@ const FileSelector = (0, mobx_react_1.observer)((props) => {
                     shownAccts.map(({ internetAccountId, toggleContents, name }) => (react_1.default.createElement(ToggleButtonWithTooltip, { key: internetAccountId, value: internetAccountId, "aria-label": name, title: name }, typeof toggleContents === 'string'
                         ? shorten(toggleContents, 5)
                         : toggleContents || shorten(name, 5)))),
-                    hiddenAccts.length ? (
-                    // @ts-ignore
+                    hiddenAccts.length > 0 ? (
+                    // @ts-expect-error
                     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',
-                    } }, hiddenAccts === null || hiddenAccts === void 0 ? void 0 : hiddenAccts.map((acct, idx) => (react_1.default.createElement(material_1.MenuItem, { key: acct.internetAccountId, value: acct.internetAccountId, onClick: () => {
+                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' } }, hiddenAccts === null || hiddenAccts === void 0 ? void 0 : hiddenAccts.map((acct, idx) => (react_1.default.createElement(material_1.MenuItem, { key: acct.internetAccountId, value: acct.internetAccountId, onClick: () => {
                         const prev = shownAccts[shownAccts.length - 1];
-                        setShownAccts([
-                            ...shownAccts.slice(0, shownAccts.length - 1),
-                            acct,
-                        ]);
+                        setShownAccts([...shownAccts.slice(0, -1), acct]);
                         setHiddenAccts([
                             prev,
                             ...hiddenAccts.slice(0, idx),
@@ -129,4 +119,3 @@ const FileSelector = (0, mobx_react_1.observer)((props) => {
         locationInput,
         react_1.default.createElement(material_1.FormHelperText, null, description)));
 });
-exports.default = FileSelector;

package/ui/FileSelector/index.d.ts

@@ -1,2 +1 @@
-import FileSelector from './FileSelector';
-export default FileSelector;
+export { default } from './FileSelector';

package/ui/FileSelector/index.js

@@ -3,5 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const FileSelector_1 = __importDefault(require("./FileSelector"));
-exports.default = FileSelector_1.default;
+exports.default = void 0;
+var FileSelector_1 = require("./FileSelector");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(FileSelector_1).default; } });

package/ui/LoadingEllipses.js

@@ -16,16 +16,16 @@ const useStyles = (0, mui_1.makeStyles)()({
             textAlign: 'left',
             animation: `${(0, tss_react_1.keyframes) `
       0% {
-        content: '...';
+        content: '';
       }
       25% {
-          content: '';
+          content: '.';
       }
       50% {
-        content: '.';
+        content: '..';
       }
       75% {
-        content: '..';
+        content: '...';
       }
       `} 1.2s infinite ease-in-out`,
         },

package/ui/Menu.js

@@ -69,26 +69,32 @@ function MenuItemEndDecoration(props) {
         ({ checked, disabled } = props);
     }
     let icon;
-    if (type === 'subMenu') {
-        icon = react_1.default.createElement(ArrowRight_1.default, { color: "action" });
-    }
-    else if (type === 'checkbox') {
-        if (checked) {
-            const color = disabled ? 'inherit' : undefined;
-            icon = react_1.default.createElement(CheckBox_1.default, { color: color });
-        }
-        else {
-            icon = react_1.default.createElement(CheckBoxOutlineBlank_1.default, { color: "action" });
+    switch (type) {
+        case 'subMenu': {
+            icon = react_1.default.createElement(ArrowRight_1.default, { color: "action" });
+            break;
         }
-    }
-    else if (type === 'radio') {
-        if (checked) {
-            const color = disabled ? 'inherit' : undefined;
-            icon = react_1.default.createElement(RadioButtonChecked_1.default, { color: color });
+        case 'checkbox': {
+            if (checked) {
+                const color = disabled ? 'inherit' : undefined;
+                icon = react_1.default.createElement(CheckBox_1.default, { color: color });
+            }
+            else {
+                icon = react_1.default.createElement(CheckBoxOutlineBlank_1.default, { color: "action" });
+            }
+            break;
         }
-        else {
-            icon = react_1.default.createElement(RadioButtonUnchecked_1.default, { color: "action" });
+        case 'radio': {
+            if (checked) {
+                const color = disabled ? 'inherit' : undefined;
+                icon = react_1.default.createElement(RadioButtonChecked_1.default, { color: color });
+            }
+            else {
+                icon = react_1.default.createElement(RadioButtonUnchecked_1.default, { color: "action" });
+            }
+            break;
         }
+        // No default
     }
     return react_1.default.createElement("div", { className: classes.menuItemEndDecoration }, icon);
 }
@@ -208,21 +214,28 @@ const MenuPage = react_1.default.forwardRef((props, ref) => {
                         setOpenSubMenuIdx(undefined);
                     }
                 }, onKeyDown: e => {
-                    if (e.key === 'ArrowLeft' || e.key === 'Escape') {
-                        onClose && onClose(e, 'escapeKeyDown');
-                    }
-                    else if (e.key === 'ArrowUp') {
-                        setSelectedMenuItemIdx(findPreviousValidIdx(menuItems, idx));
-                    }
-                    else if (e.key === 'ArrowDown') {
-                        const a = findNextValidIdx(menuItems, idx);
-                        setSelectedMenuItemIdx(a);
-                    }
-                    else if ('subMenu' in menuItem) {
-                        if (e.key === 'ArrowRight' || e.key === 'Enter') {
-                            setSubMenuAnchorEl(e.currentTarget);
-                            setOpenSubMenuIdx(idx);
-                            setIsSubMenuOpen(true);
+                    switch (e.key) {
+                        case 'ArrowLeft':
+                        case 'Escape': {
+                            onClose && onClose(e, 'escapeKeyDown');
+                            break;
+                        }
+                        case 'ArrowUp': {
+                            setSelectedMenuItemIdx(findPreviousValidIdx(menuItems, idx));
+                            break;
+                        }
+                        case 'ArrowDown': {
+                            const a = findNextValidIdx(menuItems, idx);
+                            setSelectedMenuItemIdx(a);
+                            break;
+                        }
+                        default: {
+                            if ('subMenu' in menuItem &&
+                                (e.key === 'ArrowRight' || e.key === 'Enter')) {
+                                setSubMenuAnchorEl(e.currentTarget);
+                                setOpenSubMenuIdx(idx);
+                                setIsSubMenuOpen(true);
+                            }
                         }
                     }
                 }, disabled: Boolean(menuItem.disabled) },

package/ui/ResizeBar.js

@@ -82,7 +82,12 @@ function Tick({ left, scrollLeft, idx, onDrag, }) {
 function ResizeBar({ widths, setWidths, checkbox, scrollLeft = 0, }) {
     const { classes } = useStyles();
     const offsets = [];
-    widths.reduce((a, b, i) => (offsets[i] = a + b), checkbox ? 52 : 0);
+    let init = checkbox ? 52 : 0;
+    for (let i = 0; i < widths.length; i++) {
+        const width = widths[i];
+        offsets[i] = width + init;
+        init += width;
+    }
     const onDrag = (0, react_1.useCallback)((distance, idx) => {
         const newWidths = [...widths];
         // mui doesn't allow columns smaller than 50

package/ui/ResizeHandle.js

@@ -72,12 +72,9 @@ function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: or
     }, [mouseDragging, onDrag, vertical]);
     let className;
     if (flexbox) {
-        if (vertical) {
-            className = classes.flexbox_verticalHandle;
-        }
-        else {
-            className = classes.flexbox_horizontalHandle;
-        }
+        className = vertical
+            ? classes.flexbox_verticalHandle
+            : classes.flexbox_horizontalHandle;
     }
     else if (vertical) {
         className = classes.verticalHandle;

package/ui/ViewContainer.js

@@ -75,7 +75,7 @@ const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMi
     const [ref, { width }] = (0, react_use_measure_1.default)();
     (0, react_1.useEffect)(() => {
         if (width && (0, mobx_state_tree_1.isAlive)(view)) {
-            view.setWidth(width - parseInt(padWidth, 10) * 2);
+            view.setWidth(width - Number.parseInt(padWidth, 10) * 2);
         }
     }, [padWidth, view, width]);
     const scrollRef = (0, react_1.useRef)(null);
@@ -91,11 +91,9 @@ const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMi
             react_1.default.createElement(ViewMenu_1.default, { model: view, IconProps: { className: classes.icon } }),
             react_1.default.createElement("div", { className: classes.grow }),
             react_1.default.createElement(material_1.Tooltip, { title: "Rename view", arrow: true },
-                react_1.default.createElement(EditableTypography_1.default, { value: (view.displayName ||
-                        (
-                        // @ts-ignore
-                        (_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) ||
-                        'Untitled view') + (view.minimized ? ' (minimized)' : ''), setValue: val => view.setDisplayName(val), variant: "body2", classes: {
+                react_1.default.createElement(EditableTypography_1.default, { value: view.displayName ||
+                        // @ts-expect-error
+                        `${((_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => view.setDisplayName(val), variant: "body2", classes: {
                         input: classes.input,
                         inputBase: classes.inputBase,
                         inputRoot: classes.inputRoot,

package/ui/theme.js

@@ -25,7 +25,7 @@ function stockTheme() {
             bases: {
                 A: refTheme.palette.augmentColor({ color: colors_1.green }),
                 C: refTheme.palette.augmentColor({ color: colors_1.blue }),
-                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                G: refTheme.palette.augmentColor({ color: colors_1.orange }),
                 T: refTheme.palette.augmentColor({ color: colors_1.red }),
             },
         },
@@ -70,7 +70,7 @@ function getDarkStockTheme() {
             bases: {
                 A: refTheme.palette.augmentColor({ color: colors_1.green }),
                 C: refTheme.palette.augmentColor({ color: colors_1.blue }),
-                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                G: refTheme.palette.augmentColor({ color: colors_1.orange }),
                 T: refTheme.palette.augmentColor({ color: colors_1.red }),
             },
         },
@@ -103,7 +103,7 @@ function getDarkMinimalTheme() {
             bases: {
                 A: refTheme.palette.augmentColor({ color: colors_1.green }),
                 C: refTheme.palette.augmentColor({ color: colors_1.blue }),
-                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                G: refTheme.palette.augmentColor({ color: colors_1.orange }),
                 T: refTheme.palette.augmentColor({ color: colors_1.red }),
             },
         },
@@ -122,7 +122,7 @@ function getMinimalTheme() {
             bases: {
                 A: refTheme.palette.augmentColor({ color: colors_1.green }),
                 C: refTheme.palette.augmentColor({ color: colors_1.blue }),
-                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                G: refTheme.palette.augmentColor({ color: colors_1.orange }),
                 T: refTheme.palette.augmentColor({ color: colors_1.red }),
             },
         },
@@ -226,7 +226,7 @@ function createDefaultProps(theme) {
                 },
                 styleOverrides: {
                     secondary: {
-                        // @ts-ignore
+                        // @ts-expect-error
                         backgroundColor: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.quaternary) === null || _b === void 0 ? void 0 : _b.main,
                     },
                 },
@@ -348,11 +348,11 @@ function createDefaultProps(theme) {
             MuiAccordionSummary: {
                 styleOverrides: {
                     root: {
-                        // @ts-ignore
+                        // @ts-expect-error
                         backgroundColor: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.tertiary) === null || _d === void 0 ? void 0 : _d.main,
                     },
                     content: {
-                        // @ts-ignore
+                        // @ts-expect-error
                         color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e.tertiary) === null || _f === void 0 ? void 0 : _f.contrastText,
                     },
                 },

package/util/Base1DUtils.js

@@ -70,7 +70,7 @@ function pxToBp(self, px) {
     if (bp < 0) {
         const r = displayedRegions[0];
         const snap = (0, mobx_state_tree_1.getSnapshot)(r);
-        // @ts-ignore
+        // @ts-expect-error
         return {
             // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
             ...snap,
@@ -88,7 +88,7 @@ function pxToBp(self, px) {
         const offset = bp - bpSoFar;
         if (len + bpSoFar > bp && bpSoFar <= bp) {
             const snap = (0, mobx_state_tree_1.getSnapshot)(r);
-            // @ts-ignore
+            // @ts-expect-error
             return {
                 // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
                 ...snap,
@@ -108,12 +108,12 @@ function pxToBp(self, px) {
             bpSoFar += len;
         }
     }
-    if (bp >= bpSoFar && displayedRegions.length) {
+    if (bp >= bpSoFar && displayedRegions.length > 0) {
         const r = displayedRegions[displayedRegions.length - 1];
         const len = r.end - r.start;
         const offset = bp - bpSoFar + len;
         const snap = (0, mobx_state_tree_1.getSnapshot)(r);
-        // @ts-ignore
+        // @ts-expect-error
         return {
             // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
             ...snap,
@@ -147,11 +147,12 @@ function bpToPx({ refName, coord, regionNumber, self, }) {
     for (; i < displayedRegions.length; i++) {
         const r = displayedRegions[i];
         const len = r.end - r.start;
-        if (refName === r.refName && coord >= r.start && coord <= r.end) {
-            if (regionNumber ? regionNumber === i : true) {
-                bpSoFar += r.reversed ? r.end - coord : coord - r.start;
-                break;
-            }
+        if (refName === r.refName &&
+            coord >= r.start &&
+            coord <= r.end &&
+            (regionNumber ? regionNumber === i : true)) {
+            bpSoFar += r.reversed ? r.end - coord : coord - r.start;
+            break;
         }
         // add the interRegionPaddingWidth if the boundary is in the screen e.g. in
         // a static block
@@ -185,11 +186,12 @@ function bpToPxMap({ refName, coord, regionNumber, self, }) {
     for (; i < displayedRegions.length; i++) {
         const r = displayedRegions[i];
         const len = r.end - r.start;
-        if (refName === r.refName && coord >= r.start && coord <= r.end) {
-            if (regionNumber !== undefined ? regionNumber === i : true) {
-                bpSoFar += r.reversed ? r.end - coord : coord - r.start;
-                break;
-            }
+        if (refName === r.refName &&
+            coord >= r.start &&
+            coord <= r.end &&
+            (regionNumber === undefined ? true : regionNumber === i)) {
+            bpSoFar += r.reversed ? r.end - coord : coord - r.start;
+            break;
         }
         // add the interRegionPaddingWidth if the boundary is in the screen e.g. in
         // a static block

package/util/Base1DViewModel.d.ts

@@ -119,7 +119,7 @@ declare const Base1DView: import("mobx-state-tree").IModelType<{
     /**
      * #action
      */
-    zoomTo(newBpPerPx: number, offset?: number): number;
+    zoomTo(bpPerPx: number, offset?: number): number;
     /**
      * #action
      */

package/util/Base1DViewModel.js

@@ -180,15 +180,16 @@ const Base1DView = mobx_state_tree_1.types
     /**
      * #action
      */
-    zoomTo(newBpPerPx, offset = self.width / 2) {
-        const bpPerPx = newBpPerPx;
-        if (bpPerPx === self.bpPerPx) {
-            return self.bpPerPx;
-        }
+    zoomTo(bpPerPx, offset = self.width / 2) {
+        const newBpPerPx = (0, index_1.clamp)(bpPerPx, 'minBpPerPx' in self ? self.minBpPerPx : 0, 'maxBpPerPx' in self ? self.maxBpPerPx : Infinity);
         const oldBpPerPx = self.bpPerPx;
-        self.bpPerPx = bpPerPx;
-        // tweak the offset so that the center of the view remains at the same coordinate
-        self.offsetPx = (0, index_1.clamp)(Math.round(((self.offsetPx + offset) * oldBpPerPx) / bpPerPx - offset), self.minOffset, self.maxOffset);
+        if (Math.abs(oldBpPerPx - newBpPerPx) < 0.000001) {
+            return oldBpPerPx;
+        }
+        self.bpPerPx = newBpPerPx;
+        // tweak the offset so that the center of the view remains at the same
+        // coordinate
+        self.offsetPx = (0, index_1.clamp)(Math.round(((self.offsetPx + offset) * oldBpPerPx) / newBpPerPx - offset), self.minOffset, self.maxOffset);
         return self.bpPerPx;
     },
     /**

package/util/aborting.js

@@ -75,6 +75,6 @@ function isAbortException(exception) {
             // Error: aborted
             // AbortError: aborted
             // AbortError: The user aborted a request.
-            !!exception.message.match(/\b(aborted|AbortError)\b/i)));
+            !!/\b(aborted|aborterror)\b/i.test(exception.message)));
 }
 exports.isAbortException = isAbortException;

package/util/analytics.js

@@ -83,7 +83,7 @@ async function writeGAAnalytics(rootModel, initialTimestamp) {
     analyticsScript += `ga('jbrowseTracker.send', 'pageview',${JSON.stringify(gaData)});`;
     const analyticsScriptNode = document.createElement('script');
     analyticsScriptNode.innerHTML = analyticsScript;
-    document.getElementsByTagName('head')[0].appendChild(analyticsScriptNode);
+    document.getElementsByTagName('head')[0].append(analyticsScriptNode);
 }
 exports.writeGAAnalytics = writeGAAnalytics;
 function doAnalytics(rootModel, initialTimestamp, initialSessionQuery) {

package/util/blockTypes.js

@@ -6,13 +6,11 @@ class BlockSet {
         this.blocks = blocks;
     }
     push(block) {
-        if (block instanceof ElidedBlock) {
-            if (this.blocks.length) {
-                const lastBlock = this.blocks[this.blocks.length - 1];
-                if (lastBlock instanceof ElidedBlock) {
-                    lastBlock.push(block);
-                    return;
-                }
+        if (block instanceof ElidedBlock && this.blocks.length > 0) {
+            const lastBlock = this.blocks[this.blocks.length - 1];
+            if (lastBlock instanceof ElidedBlock) {
+                lastBlock.push(block);
+                return;
             }
         }
         this.blocks.push(block);
@@ -24,21 +22,23 @@ class BlockSet {
         return this.blocks.map(block => block.toRegion());
     }
     map(func, thisarg) {
+        // eslint-disable-next-line unicorn/no-array-method-this-argument
         return this.blocks.map(func, thisarg);
     }
     forEach(func, thisarg) {
+        // eslint-disable-next-line unicorn/no-array-method-this-argument
         return this.blocks.forEach(func, thisarg);
     }
     get length() {
         return this.blocks.length;
     }
     get totalWidthPx() {
-        return this.blocks.length
+        return this.blocks.length > 0
             ? this.blocks.map(blocks => blocks.widthPx).reduce((a, b) => a + b)
             : 0;
     }
     get totalWidthPxWithoutBorders() {
-        return this.blocks.length
+        return this.blocks.length > 0
             ? this.blocks
                 .filter(block => block.variant !== 'boundary')
                 .map(blocks => blocks.widthPx)
@@ -46,7 +46,7 @@ class BlockSet {
             : 0;
     }
     get offsetPx() {
-        return this.blocks.length ? this.blocks[0].offsetPx : 0;
+        return this.blocks.length > 0 ? this.blocks[0].offsetPx : 0;
     }
     get contentBlocks() {
         return this.blocks.filter(block => block instanceof ContentBlock);