@jbrowse/core 2.16.1 → 2.18.0

package/ui/Icons.js

@@ -12,14 +12,12 @@ exports.SaveAs = SaveAs;
 exports.Save = Save;
 exports.DNA = DNA;
 exports.Cable = Cable;
-const SvgIcon_1 = __importDefault(require("@mui/material/SvgIcon"));
 const react_1 = __importDefault(require("react"));
-// Icons below come from https://material.io/resources/icons/?icon=line_style&style=baseline
+const SvgIcon_1 = __importDefault(require("@mui/material/SvgIcon"));
 function ContentCopy(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("path", { d: "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" })));
 }
-// https://materialdesignicons.com/ text-search icon
 function Indexing(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("path", { d: "M19.31 18.9L22.39 22L21 23.39L17.88 20.32C17.19 20.75 16.37 21 15.5 21C13 21 11 19 11 16.5C11 14 13 12 15.5 12C18 12 20 14 20 16.5C20 17.38 19.75 18.21 19.31 18.9M15.5 19C16.88 19 18 17.88 18 16.5C18 15.12 16.88 14 15.5 14C14.12 14 13 15.12 13 16.5C13 17.88 14.12 19 15.5 19M21 4V6H3V4H21M3 16V14H9V16H3M3 11V9H21V11H18.97C17.96 10.37 16.77 10 15.5 10C14.23 10 13.04 10.37 12.03 11H3Z" })));
@@ -32,22 +30,18 @@ function ContentPaste(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("path", { d: "M19,20H5V4H7V7H17V4H19M12,2A1,1 0 0,1 13,3A1,1 0 0,1 12,4A1,1 0 0,1 11,3A1,1 0 0,1 12,2M19,2H14.82C14.4,0.84 13.3,0 12,0C10.7,0 9.6,0.84 9.18,2H5A2,2 0 0,0 3,4V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V4A2,2 0 0,0 19,2Z" })));
 }
-//  format-list-checkbox from https://materialdesignicons.com/
 function TrackSelector(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("path", { d: "M21 19v-2H8v2h13m0-6v-2H8v2h13M8 7h13V5H8v2M4 5v2h2V5H4M3 5a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V5m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2m1 6v2h2v-2H4m-1 0a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z" })));
 }
-//  content-save-edit from https://materialdesignicons.com/
 function SaveAs(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("path", { fill: "currentColor", d: "M10,19L10.14,18.86C8.9,18.5 8,17.36 8,16A3,3 0 0,1 11,13C12.36,13 13.5,13.9 13.86,15.14L20,9V7L16,3H4C2.89,3 2,3.9 2,5V19A2,2 0 0,0 4,21H10V19M4,5H14V9H4V5M20.04,12.13C19.9,12.13 19.76,12.19 19.65,12.3L18.65,13.3L20.7,15.35L21.7,14.35C21.92,14.14 21.92,13.79 21.7,13.58L20.42,12.3C20.31,12.19 20.18,12.13 20.04,12.13M18.07,13.88L12,19.94V22H14.06L20.12,15.93L18.07,13.88Z" })));
 }
-//  content-save from https://materialdesignicons.com/
 function Save(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("path", { fill: "currentColor", d: "M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" })));
 }
-//  dna from https://materialdesignicons.com/
 function DNA(props) {
     return (react_1.default.createElement(SvgIcon_1.default, { ...props },
         react_1.default.createElement("path", { fill: "currentColor", d: "M4,2H6V4C6,5.44 6.68,6.61 7.88,7.78C8.74,8.61 9.89,9.41 11.09,10.2L9.26,11.39C8.27,10.72 7.31,10 6.5,9.21C5.07,7.82 4,6.1 4,4V2M18,2H20V4C20,6.1 18.93,7.82 17.5,9.21C16.09,10.59 14.29,11.73 12.54,12.84C10.79,13.96 9.09,15.05 7.88,16.22C6.68,17.39 6,18.56 6,20V22H4V20C4,17.9 5.07,16.18 6.5,14.79C7.91,13.41 9.71,12.27 11.46,11.16C13.21,10.04 14.91,8.95 16.12,7.78C17.32,6.61 18,5.44 18,4V2M14.74,12.61C15.73,13.28 16.69,14 17.5,14.79C18.93,16.18 20,17.9 20,20V22H18V20C18,18.56 17.32,17.39 16.12,16.22C15.26,15.39 14.11,14.59 12.91,13.8L14.74,12.61M7,3H17V4L16.94,4.5H7.06L7,4V3M7.68,6H16.32C16.08,6.34 15.8,6.69 15.42,7.06L14.91,7.5H9.07L8.58,7.06C8.2,6.69 7.92,6.34 7.68,6M9.09,16.5H14.93L15.42,16.94C15.8,17.31 16.08,17.66 16.32,18H7.68C7.92,17.66 8.2,17.31 8.58,16.94L9.09,16.5M7.06,19.5H16.94L17,20V21H7V20L7.06,19.5Z" })));

package/ui/LoadingEllipses.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TypographyProps } from '@mui/material';
+import type { TypographyProps } from '@mui/material';
 interface Props extends TypographyProps {
     message?: string;
 }

package/ui/LoadingEllipses.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = LoadingEllipses;
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
 const tss_react_1 = require("tss-react");
+const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()({
     dots: {
         '&::after': {
@@ -33,6 +33,6 @@ 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'));
+    const { cx, classes } = useStyles();
+    return (react_1.default.createElement(material_1.Typography, { className: cx(classes.dots, rest.className), ...rest, variant: variant }, message || 'Loading'));
 }

package/ui/Menu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PopoverProps, SvgIconProps } from '@mui/material';
+import type { PopoverProps, SvgIconProps } from '@mui/material';
 interface MenuItemEndDecorationSubMenuProps {
     type: 'subMenu';
 }

package/ui/Menu.js

@@ -28,29 +28,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuItemEndDecoration = MenuItemEndDecoration;
 const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
-// icons
 const ArrowRight_1 = __importDefault(require("@mui/icons-material/ArrowRight"));
 const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
 const CheckBoxOutlineBlank_1 = __importDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
 const RadioButtonChecked_1 = __importDefault(require("@mui/icons-material/RadioButtonChecked"));
 const RadioButtonUnchecked_1 = __importDefault(require("@mui/icons-material/RadioButtonUnchecked"));
-// other
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
 const util_1 = require("../util");
 const useStyles = (0, mui_1.makeStyles)()({
     paper: {
         position: 'fixed',
         overflowY: 'auto',
         overflowX: 'hidden',
-        // So we see the popover when it's empty.
         minWidth: 16,
         minHeight: 16,
         maxWidth: 'calc(100% - 32px)',
         maxHeight: 'calc(100% - 32px)',
         top: 0,
         left: 0,
-        // We disable the focus ring for mouse, touch and keyboard users.
         outline: 0,
     },
     menuItemEndDecoration: {
@@ -94,7 +90,6 @@ function MenuItemEndDecoration(props) {
             }
             break;
         }
-        // No default
     }
     return react_1.default.createElement("div", { className: classes.menuItemEndDecoration }, icon);
 }
@@ -249,9 +244,7 @@ const MenuPage = react_1.default.forwardRef(function MenuPage2(props, ref) {
             }
             return subMenu;
         })));
-    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 },
+    return top ? (ListContents) : (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) {

package/ui/MenuButton.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MenuItem } from '@jbrowse/core/ui';
+import type { MenuItem } from '@jbrowse/core/ui';
 declare const MenuButton: ({ children, menuItems, closeAfterItemClick, stopPropagation, setOpen, ...rest }: {
     closeAfterItemClick?: boolean;
     children?: React.ReactElement;

package/ui/ResizeHandle.js

@@ -36,11 +36,11 @@ const useStyles = (0, mui_1.makeStyles)()({
     },
     flexbox_verticalHandle: {
         cursor: 'col-resize',
-        alignSelf: 'stretch', // the height: 100% is actually unable to function inside flexbox
+        alignSelf: 'stretch',
     },
     flexbox_horizontalHandle: {
         cursor: 'row-resize',
-        alignSelf: 'stretch', // similar to above
+        alignSelf: 'stretch',
     },
 });
 function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: originalClassName, onMouseDown, ...props }) {

package/ui/ReturnToImportFormDialog.js

@@ -4,8 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
 const Dialog_1 = __importDefault(require("./Dialog"));
 const ReturnToImportFormDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, }) {
     return (react_1.default.createElement(Dialog_1.default, { maxWidth: "xl", open: true, onClose: handleClose, title: "Reference sequence" },

package/ui/SanitizedHTML.js

@@ -5,14 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SanitizedHTML;
 const react_1 = __importDefault(require("react"));
-const escape_html_1 = __importDefault(require("escape-html"));
 const dompurify_1 = __importDefault(require("dompurify"));
+const escape_html_1 = __importDefault(require("escape-html"));
 const util_1 = require("../util");
-// source https://github.com/sindresorhus/html-tags/blob/master/html-tags.json
-// with some random uncommon ones removed. note: we just use this to run the content
-// through dompurify without escaping if we see an htmlTag from this list
-// otherwise we escape angle brackets and things prematurely because it might be
-// something like <TRA> in VCF. Ref #657
 const htmlTags = [
     'a',
     'b',
@@ -47,28 +42,16 @@ const htmlTags = [
     'ul',
 ];
 let added = false;
-// adapted from is-html
-// https://github.com/sindresorhus/is-html/blob/master/index.js
 const full = new RegExp(htmlTags.map(tag => `<${tag}\\b[^>]*>`).join('|'), 'i');
 function isHTML(str) {
     return full.test(str);
 }
-// note this is mocked during testing, see
-// packages/__mocks__/@jbrowse/core/ui/SanitizedHTML something about dompurify
-// behavior causes errors during tests, was seen in
-// products/jbrowse-web/src/tests/Connection.test.tsx test (can delete mock to
-// see)
-//
 function SanitizedHTML({ html: pre, className, }) {
-    // try to add links to the text first
     const html = (0, util_1.linkify)(pre);
     const value = isHTML(html) ? html : (0, escape_html_1.default)(html);
     if (!added) {
         added = true;
-        // see https://github.com/cure53/DOMPurify/issues/317
-        // only have to add this once, and can't do it globally because dompurify
-        // not yet initialized at global scope
-        dompurify_1.default.addHook('afterSanitizeAttributes', (node) => {
+        dompurify_1.default.addHook('afterSanitizeAttributes', node => {
             if (node.tagName === 'A') {
                 node.setAttribute('rel', 'noopener noreferrer');
                 node.setAttribute('target', '_blank');

package/ui/Snackbar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { AbstractSessionModel } from '../util';
-import { SnackbarMessage } from './SnackbarModel';
+import type { AbstractSessionModel } from '../util';
+import type { SnackbarMessage } from './SnackbarModel';
 interface SnackbarSession extends AbstractSessionModel {
     snackbarMessages: SnackbarMessage[];
     popSnackbarMessage: () => void;

package/ui/Snackbar.js

@@ -4,10 +4,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
-// icons
-const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const Snackbar = (0, mobx_react_1.observer)(function ({ session }) {
     const { snackbarMessages } = session;
     const latestMessage = snackbarMessages.at(-1);

package/ui/SnackbarModel.d.ts

@@ -1,42 +1,17 @@
-import { NotificationLevel, SnackAction } from '../util/types';
+import type { NotificationLevel, SnackAction } from '../util/types';
 export interface SnackbarMessage {
     message: string;
     level?: NotificationLevel;
     action?: SnackAction;
 }
-/**
- * #stateModel SnackbarModel
- * #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): void;
-    /**
-     * #action
-     */
     popSnackbarMessage(): SnackbarMessage | undefined;
-    /**
-     * #action
-     */
     removeSnackbarMessage(message: string): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;

package/ui/SnackbarModel.js

@@ -28,37 +28,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = SnackbarModel;
 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 mobx_1 = require("mobx");
+const mobx_state_tree_1 = require("mobx-state-tree");
 const ErrorMessageStackTraceDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('@jbrowse/core/ui/ErrorMessageStackTraceDialog'))));
-/**
- * #stateModel SnackbarModel
- * #category session
- */
 function SnackbarModel() {
     return mobx_state_tree_1.types
         .model({})
         .volatile(() => ({
-        /**
-         * #volatile
-         */
         snackbarMessages: mobx_1.observable.array(),
     }))
         .views(self => ({
-        /**
-         * #getter
-         */
         get snackbarMessageSet() {
             return new Map(self.snackbarMessages.map(s => [s.message, s]));
         },
     }))
         .actions(self => ({
-        /**
-         * #action
-         */
         notify(message, level, action) {
             this.pushSnackbarMessage(message, level, action);
             if (level === 'info' || level === 'success') {
@@ -67,14 +52,10 @@ function SnackbarModel() {
                 }, 5000);
             }
         },
-        /**
-         * #action
-         */
         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,
                         {
@@ -86,23 +67,14 @@ function SnackbarModel() {
                 },
             });
         },
-        /**
-         * #action
-         */
         pushSnackbarMessage(message, level, action) {
             if (action || !self.snackbarMessageSet.has(message)) {
                 self.snackbarMessages.push({ message, level, action });
             }
         },
-        /**
-         * #action
-         */
         popSnackbarMessage() {
             return self.snackbarMessages.pop();
         },
-        /**
-         * #action
-         */
         removeSnackbarMessage(message) {
             const element = self.snackbarMessageSet.get(message);
             if (element !== undefined) {

package/ui/colors.d.ts

@@ -7,4 +7,4 @@ declare const ggplot2Colors6: string[];
 declare const ggplot2Colors5: string[];
 declare const ggplot2Colors4: string[];
 declare const ggplot2Colors3: string[];
-export { set1, set2, tableau10, dark2, category10, ggplot2Colors6, ggplot2Colors5, ggplot2Colors4, ggplot2Colors3, };
+export { category10, dark2, ggplot2Colors3, ggplot2Colors4, ggplot2Colors5, ggplot2Colors6, set1, set2, tableau10, };

package/ui/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ggplot2Colors3 = exports.ggplot2Colors4 = exports.ggplot2Colors5 = exports.ggplot2Colors6 = exports.category10 = exports.dark2 = exports.tableau10 = exports.set2 = exports.set1 = void 0;
+exports.tableau10 = exports.set2 = exports.set1 = exports.ggplot2Colors6 = exports.ggplot2Colors5 = exports.ggplot2Colors4 = exports.ggplot2Colors3 = exports.dark2 = exports.category10 = void 0;
 const category10 = [
     '#1f77b4',
     '#ff7f0e',

package/ui/react-colorful.js

@@ -1,7 +1,4 @@
 "use strict";
-/* eslint-disable */
-// vendored (e.g. copied into our source tree) because the tooling picks up "import" statements that confuse jest, could confuse other consumers of our modules
-// copy of react-colorful/dist/index.esmodule.js
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

package/ui/theme.d.ts

@@ -1,4 +1,4 @@
-import { ThemeOptions } from '@mui/material/styles';
+import type { ThemeOptions } from '@mui/material/styles';
 declare module '@mui/material/styles/createPalette' {
     interface Palette {
         tertiary: Palette['primary'];

package/ui/theme.js

@@ -14,6 +14,7 @@ const midnight = '#0D233F';
 const grape = '#721E63';
 const forest = refTheme.palette.augmentColor({ color: { main: '#135560' } });
 const mandarin = refTheme.palette.augmentColor({ color: { main: '#FFB11D' } });
+const lightgrey = refTheme.palette.augmentColor({ color: { main: '#aaa' } });
 const bases = {
     A: refTheme.palette.augmentColor({ color: colors_1.green }),
     C: refTheme.palette.augmentColor({ color: colors_1.blue }),
@@ -58,8 +59,6 @@ function stockTheme() {
         components: {
             MuiLink: {
                 styleOverrides: {
-                    // the default link color uses theme.palette.primary.main which is
-                    // very bad with dark mode+midnight primary
                     root: ({ theme }) => ({
                         color: theme.palette.tertiary.main,
                     }),
@@ -169,13 +168,6 @@ function createJBrowseBaseTheme(theme) {
                     size: 'small',
                 },
                 styleOverrides: {
-                    // the default button, especially when not using variant=contained,
-                    // uses theme.palette.primary.main for text which is very bad with
-                    // dark mode+midnight primary
-                    //
-                    // keeps text secondary for darkmode, uses
-                    // a text-like coloring to ensure contrast
-                    // xref https://stackoverflow.com/a/72546130/2129219
                     root: ({ theme }) => theme.palette.mode === 'dark'
                         ? {
                             color: theme.palette.text.primary,
@@ -251,7 +243,6 @@ function createJBrowseBaseTheme(theme) {
                 },
                 styleOverrides: {
                     secondary: {
-                        // @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,
                     },
                 },
@@ -284,8 +275,6 @@ function createJBrowseBaseTheme(theme) {
             },
             MuiLink: {
                 styleOverrides: {
-                    // the default link color uses theme.palette.primary.main which is
-                    // very bad with dark mode+midnight primary
                     root: ({ theme }) => ({
                         color: theme.palette.text.secondary,
                     }),
@@ -293,13 +282,6 @@ function createJBrowseBaseTheme(theme) {
             },
             MuiCheckbox: {
                 styleOverrides: {
-                    // the default checkbox-when-checked color uses
-                    // theme.palette.primary.main which is very bad with dark
-                    // mode+midnight primary
-                    //
-                    // keeps the forest-green checkbox by default but for darkmode, uses
-                    // a text-like coloring to ensure contrast xref
-                    // https://stackoverflow.com/a/72546130/2129219
                     root: ({ theme }) => theme.palette.mode === 'dark'
                         ? {
                             color: theme.palette.text.secondary,
@@ -312,13 +294,6 @@ function createJBrowseBaseTheme(theme) {
             },
             MuiRadio: {
                 styleOverrides: {
-                    // the default checkbox-when-checked color uses
-                    // theme.palette.primary.main which is very bad with dark
-                    // mode+midnight primary
-                    //
-                    // keeps the forest-green checkbox by default but for darkmode, uses
-                    // a text-like coloring to ensure contrast
-                    // xref https://stackoverflow.com/a/72546130/2129219
                     root: ({ theme }) => theme.palette.mode === 'dark'
                         ? {
                             color: theme.palette.text.secondary,
@@ -331,14 +306,6 @@ function createJBrowseBaseTheme(theme) {
             },
             MuiFormLabel: {
                 styleOverrides: {
-                    // the default checkbox-when-checked color uses
-                    // theme.palette.primary.main which is very bad with dark
-                    // mode+midnight primary
-                    //
-                    // keeps the forest-green checkbox by default but for darkmode, uses
-                    // a text-like coloring to ensure contrast
-                    // xref https://stackoverflow.com/a/72546130/2129219
-                    //
                     root: ({ theme }) => theme.palette.mode === 'dark'
                         ? {
                             color: theme.palette.text.secondary,
@@ -352,11 +319,9 @@ function createJBrowseBaseTheme(theme) {
             MuiAccordionSummary: {
                 styleOverrides: {
                     root: {
-                        // @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-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,
                     },
                 },
@@ -372,58 +337,33 @@ function createJBrowseBaseTheme(theme) {
 }
 function createJBrowseTheme(configTheme = {}, themes = exports.defaultThemes, themeName = 'default') {
     return (0, styles_1.createTheme)(createJBrowseBaseTheme(themeName === 'default'
-        ? (0, deepmerge_1.default)(themes.default, augmentTheme(configTheme), {
+        ? (0, deepmerge_1.default)(themes.default, augmentThemeColors(configTheme), {
             arrayMerge: overwriteArrayMerge,
         })
-        : augmentThemePlus(themes[themeName])));
+        : addMissingColors(themes[themeName])));
 }
-function augmentTheme(theme = {}) {
-    var _a, _b;
-    if ((_a = theme.palette) === null || _a === void 0 ? void 0 : _a.tertiary) {
-        theme = (0, deepmerge_1.default)(theme, {
-            palette: {
-                tertiary: refTheme.palette.augmentColor('color' in theme.palette.tertiary
-                    ? theme.palette.tertiary
-                    : { color: theme.palette.tertiary }),
-            },
-        });
-    }
-    if ((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.quaternary) {
-        theme = (0, deepmerge_1.default)(theme, {
-            palette: {
-                quaternary: refTheme.palette.augmentColor('color' in theme.palette.quaternary
-                    ? theme.palette.quaternary
-                    : { color: theme.palette.quaternary }),
-            },
-        });
+function augmentThemeColors(theme = {}) {
+    var _a;
+    for (const entry of ['tertiary', 'quaternary', 'highlight']) {
+        if ((_a = theme.palette) === null || _a === void 0 ? void 0 : _a[entry]) {
+            theme = (0, deepmerge_1.default)(theme, {
+                palette: {
+                    [entry]: refTheme.palette.augmentColor('color' in theme.palette[entry]
+                        ? theme.palette[entry]
+                        : { color: theme.palette[entry] }),
+                },
+            });
+        }
     }
     return theme;
 }
-// creates some blank quaternary/tertiary colors if unsupplied by a user theme
-function augmentThemePlus(theme = {}) {
-    var _a, _b;
-    theme = augmentTheme(theme);
-    if (!((_a = theme.palette) === null || _a === void 0 ? void 0 : _a.quaternary)) {
-        theme = (0, deepmerge_1.default)(theme, {
-            palette: {
-                quaternary: refTheme.palette.augmentColor({
-                    color: {
-                        main: '#aaa',
-                    },
-                }),
-            },
-        });
-    }
-    if (!((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.tertiary)) {
-        theme = (0, deepmerge_1.default)(theme, {
-            palette: {
-                tertiary: refTheme.palette.augmentColor({
-                    color: {
-                        main: '#aaa',
-                    },
-                }),
-            },
-        });
-    }
-    return theme;
+function addMissingColors(theme = {}) {
+    var _a, _b, _c;
+    return augmentThemeColors((0, deepmerge_1.default)(theme, {
+        palette: {
+            quaternary: ((_a = theme.palette) === null || _a === void 0 ? void 0 : _a.quaternary) || lightgrey,
+            tertiary: ((_b = theme.palette) === null || _b === void 0 ? void 0 : _b.tertiary) || lightgrey,
+            highlight: ((_c = theme.palette) === null || _c === void 0 ? void 0 : _c.highlight) || mandarin,
+        },
+    }));
 }

package/util/Base1DUtils.d.ts

@@ -1,4 +1,4 @@
-import { ViewSnap } from './index';
+import type { ViewSnap } from './index';
 export interface BpOffset {
     refName?: string;
     index: number;

package/util/Base1DUtils.js

@@ -39,8 +39,6 @@ function moveTo(self, start, end) {
     }
     const targetBpPerPx = len / (width - interRegionPaddingWidth * numBlocksWideEnough);
     const newBpPerPx = self.zoomTo(targetBpPerPx);
-    // If our target bpPerPx was smaller than the allowed minBpPerPx, adjust
-    // the scroll so the requested range is in the middle of the screen
     let extraBp = 0;
     if (targetBpPerPx < newBpPerPx) {
         extraBp = ((newBpPerPx - targetBpPerPx) * self.width) / 2;
@@ -61,7 +59,6 @@ function moveTo(self, start, end) {
 function coord(r, bp) {
     return Math.floor(r.reversed ? r.end - bp : r.start + bp) + 1;
 }
-// manual return type since getSnapshot hard to infer here
 function pxToBp(self, px) {
     var _a;
     let bpSoFar = 0;
@@ -72,7 +69,6 @@ function pxToBp(self, px) {
         const r = displayedRegions[0];
         const snap = r;
         return {
-            // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
             ...snap,
             oob: true,
             coord: coord(r, bp),
@@ -89,7 +85,6 @@ function pxToBp(self, px) {
         if (len + bpSoFar > bp && bpSoFar <= bp) {
             const snap = r;
             return {
-                // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
                 ...snap,
                 oob: false,
                 offset,
@@ -97,8 +92,6 @@ function pxToBp(self, px) {
                 index: i,
             };
         }
-        // add the interRegionPaddingWidth if the boundary is in the screen e.g. in
-        // a static block
         if (((_a = blocks[currBlock]) === null || _a === void 0 ? void 0 : _a.regionNumber) === i) {
             bpSoFar += len + interRegionPaddingBp;
             currBlock++;
@@ -113,7 +106,6 @@ function pxToBp(self, px) {
         const offset = bp - bpSoFar + len;
         const snap = r;
         return {
-            // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
             ...snap,
             oob: true,
             offset,
@@ -151,8 +143,6 @@ function bpToPx({ refName, coord, regionNumber, self, }) {
             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
         if (((_a = blocks[currBlock]) === null || _a === void 0 ? void 0 : _a.regionNumber) === i) {
             bpSoFar += len + interRegionPaddingBp;
             currBlock++;
@@ -189,8 +179,6 @@ function bpToPxMap({ refName, coord, regionNumber, self, }) {
             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
         if (((_a = blocks[currBlock]) === null || _a === void 0 ? void 0 : _a.regionNumber) === i) {
             bpSoFar += len + interRegionPaddingBp;
             currBlock++;