@jbrowse/core 2.6.3 → 2.7.1

package/ui/ColorPicker.js

@@ -22,13 +22,10 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColorPicker = exports.ColorPopover = exports.PopoverPicker = void 0;
 const react_1 = __importStar(require("react"));
-const color_1 = __importDefault(require("color"));
+const colord_1 = require("@jbrowse/core/util/colord");
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 // locals
@@ -74,12 +71,12 @@ function ColorPicker({ onChange, color, }) {
     const presetColors = paletteColors[val];
     const palettes = Object.keys(paletteColors);
     const [text, setText] = (0, react_1.useState)(color);
-    const rgb = (0, color_1.default)(color).rgb().toString();
+    const rgb = (0, colord_1.colord)(color).toRgbString();
     const rgbDebounced = (0, util_1.useDebounce)(rgb, 1000);
     const handleChange = (val) => {
         setText(val);
         try {
-            onChange((0, color_1.default)(val).rgb().toString());
+            onChange((0, colord_1.colord)(val).toRgbString());
         }
         catch (e) { }
     };

package/ui/Dialog.d.ts

@@ -3,5 +3,5 @@ import { DialogProps } from '@mui/material';
 interface Props extends DialogProps {
     header?: React.ReactNode;
 }
-declare const _default: (props: Props) => React.JSX.Element;
-export default _default;
+declare const Dialog: (props: Props) => React.JSX.Element;
+export default Dialog;

package/ui/Dialog.js

@@ -24,7 +24,7 @@ function DialogError({ error }) {
     return (react_1.default.createElement("div", { style: { width: 800, margin: 40 } },
         react_1.default.createElement(ErrorMessage_1.default, { error: error })));
 }
-exports.default = (0, mobx_react_1.observer)(function JBrowseDialog(props) {
+const Dialog = (0, mobx_react_1.observer)(function (props) {
     const { classes } = useStyles();
     const { title, header, children, onClose } = props;
     const theme = (0, material_1.useTheme)();
@@ -52,3 +52,4 @@ exports.default = (0, mobx_react_1.observer)(function JBrowseDialog(props) {
                         },
                     }) }, children)))));
 });
+exports.default = Dialog;

package/ui/DropDownMenu.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { MenuItem } from './Menu';
-declare function DropDownMenu({ menuTitle, session, menuItems, }: {
+declare const DropDownMenu: ({ menuTitle, session, menuItems, }: {
     menuTitle: string;
     session: any;
     menuItems: MenuItem[];
-}): React.JSX.Element;
-declare const _default: typeof DropDownMenu;
-export default _default;
+}) => React.JSX.Element;
+export default DropDownMenu;

package/ui/DropDownMenu.js

@@ -42,24 +42,20 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         },
     },
 }));
-function DropDownMenu({ menuTitle, session, menuItems, }) {
+const DropDownMenu = (0, mobx_react_1.observer)(function ({ menuTitle, session, menuItems, }) {
     const [open, setOpen] = (0, react_1.useState)(false);
     const anchorEl = (0, react_1.useRef)(null);
     const { classes } = useStyles();
-    function handleToggle() {
-        setOpen(!open);
-    }
-    function handleMenuItemClick(_event, callback) {
-        callback(session);
-        handleClose();
-    }
     function handleClose() {
         setOpen(false);
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Button, { ref: anchorEl, onClick: handleToggle, 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: handleMenuItemClick, open: open, onClose: handleClose, menuItems: menuItems })));
-}
-exports.default = (0, mobx_react_1.observer)(DropDownMenu);
+        react_1.default.createElement(Menu_1.default, { anchorEl: anchorEl.current, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, onMenuItemClick: (_event, callback) => {
+                callback(session);
+                handleClose();
+            }, open: open, onClose: handleClose, menuItems: menuItems })));
+});
+exports.default = DropDownMenu;

package/ui/EditableTypography.js

@@ -22,10 +22,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
+const useMeasure_1 = __importDefault(require("@jbrowse/core/util/useMeasure"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     input: {},
     inputBase: {},
@@ -45,10 +49,10 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     },
 }));
 // using forwardRef so that MUI Tooltip can wrap this component
-const EditableTypography = react_1.default.forwardRef(function (props, ref) {
+const EditableTypography = react_1.default.forwardRef(function EditableTypography2(props, ref) {
     const { value, setValue, variant, ...other } = props;
+    const [ref2, { width }] = (0, useMeasure_1.default)();
     const [editedValue, setEditedValue] = (0, react_1.useState)();
-    const [sizerNode, setSizerNode] = (0, react_1.useState)(null);
     const [inputNode, setInputNode] = (0, react_1.useState)(null);
     const [blur, setBlur] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -62,12 +66,10 @@ const EditableTypography = react_1.default.forwardRef(function (props, ref) {
     // @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;
-    const width = clientWidth || 0;
     const val = editedValue === undefined ? value : editedValue;
     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: (node) => setSizerNode(node), component: "span", variant: variant, className: classes.typography }, val)),
+            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: {
                 style: {
                     width,

package/ui/FactoryResetDialog.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-declare const _default: ({ onClose, open, onFactoryReset, }: {
-    onClose: Function;
+export default function FactoryResetDialog({ onClose, open, onFactoryReset, }: {
+    onClose: () => void;
     open: boolean;
     onFactoryReset: Function;
-}) => React.JSX.Element;
-export default _default;
+}): React.JSX.Element;

package/ui/FactoryResetDialog.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const Dialog_1 = __importDefault(require("@jbrowse/core/ui/Dialog"));
-exports.default = ({ onClose, open, onFactoryReset, }) => {
+function FactoryResetDialog({ onClose, open, onFactoryReset, }) {
     function handleDialogClose(action) {
         if (action === 'reset') {
             onFactoryReset();
@@ -19,4 +19,5 @@ exports.default = ({ onClose, open, onFactoryReset, }) => {
         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"))));
-};
+}
+exports.default = FactoryResetDialog;

package/ui/FileSelector/FileSelector.d.ts

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

package/ui/FileSelector/FileSelector.js

@@ -47,7 +47,7 @@ function shorten(str, len) {
     }
     return str;
 }
-exports.default = (0, mobx_react_1.observer)(function (props) {
+const FileSelector = (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
@@ -120,3 +120,4 @@ exports.default = (0, mobx_react_1.observer)(function (props) {
         locationInput,
         react_1.default.createElement(material_1.FormHelperText, null, description)));
 });
+exports.default = FileSelector;

package/ui/FileSelector/LocalFileChooser.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FileLocation } from '../../util/types';
-declare function LocalFileChooser(props: {
+declare function LocalFileChooser({ location, setLocation, }: {
     location?: FileLocation;
-    setLocation: Function;
+    setLocation: (arg: FileLocation) => void;
 }): React.JSX.Element;
 export default LocalFileChooser;

package/ui/FileSelector/LocalFileChooser.js

@@ -19,9 +19,8 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         marginLeft: theme.spacing(1),
     },
 }));
-function LocalFileChooser(props) {
+function LocalFileChooser({ location, setLocation, }) {
     const { classes } = useStyles();
-    const { location, setLocation } = props;
     const filename = location &&
         ((isBlobLocation(location) && location.name) ||
             (isLocalPathLocation(location) && location.localPath));
@@ -32,7 +31,8 @@ function LocalFileChooser(props) {
                 react_1.default.createElement(material_1.Button, { variant: "outlined", component: "label" },
                     "Choose File",
                     react_1.default.createElement("input", { type: "file", hidden: true, onChange: ({ target }) => {
-                            const file = target && target.files && target.files[0];
+                            var _a;
+                            const file = (_a = target === null || target === void 0 ? void 0 : target.files) === null || _a === void 0 ? void 0 : _a[0];
                             if (file) {
                                 if (util_1.isElectron) {
                                     setLocation({
@@ -41,6 +41,7 @@ function LocalFileChooser(props) {
                                     });
                                 }
                                 else {
+                                    // @ts-expect-error
                                     setLocation((0, tracks_1.storeBlobLocation)({ blob: file }));
                                 }
                             }

package/ui/FileSelector/UrlChooser.d.ts

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

package/ui/FileSelector/UrlChooser.js

@@ -7,8 +7,7 @@ const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const types_1 = require("../../util/types");
-exports.default = (0, mobx_react_1.observer)(function UrlChooser(props) {
-    const { location, setLocation, label } = props;
+const UrlChooser = (0, mobx_react_1.observer)(function ({ location, setLocation, label, }) {
     return (react_1.default.createElement(material_1.TextField, { fullWidth: true, variant: "outlined", inputProps: { 'data-testid': 'urlInput' }, defaultValue: location && (0, types_1.isUriLocation)(location) ? location.uri : '', label: label || 'Enter URL', onChange: event => {
             setLocation({
                 uri: event.target.value.trim(),
@@ -16,3 +15,4 @@ exports.default = (0, mobx_react_1.observer)(function UrlChooser(props) {
             });
         } }));
 });
+exports.default = UrlChooser;

package/ui/Menu.js

@@ -115,7 +115,7 @@ function findPreviousValidIdx(menuItems, currentIdx) {
         menuItem.type !== 'subHeader' &&
         !menuItem.disabled);
 }
-const MenuPage = react_1.default.forwardRef((props, ref) => {
+const MenuPage = react_1.default.forwardRef(function MenuPage2(props, ref) {
     const [subMenuAnchorEl, setSubMenuAnchorEl] = (0, react_1.useState)();
     const [openSubMenuIdx, setOpenSubMenuIdx] = (0, react_1.useState)();
     const [isSubMenuOpen, setIsSubMenuOpen] = (0, react_1.useState)(false);

package/ui/MenuButton.d.ts

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

package/ui/MenuButton.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const Menu_1 = __importDefault(require("@jbrowse/core/ui/Menu"));
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const MenuButton = (0, mobx_react_1.observer)(function MenuButton({ children, menuItems, ...rest }) {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)();
+    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) => {
+                callback();
+                setAnchorEl(undefined);
+            }, menuItems: menuItems })));
+});
+exports.default = MenuButton;

package/ui/ResizeBar.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-export declare function useResizeBar(): {
-    ref: React.RefObject<HTMLDivElement>;
-    scrollLeft: number;
-};
 export default function ResizeBar({ widths, setWidths, checkbox, scrollLeft, }: {
     widths: number[];
     setWidths: (arg: number[]) => void;

package/ui/ResizeBar.js

@@ -26,7 +26,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResizeBar = void 0;
 const react_1 = __importStar(require("react"));
 const mui_1 = require("tss-react/mui");
 // locals
@@ -51,49 +50,31 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         width: 5,
     },
 }));
-function useResizeBar() {
-    const ref = (0, react_1.useRef)(null);
-    const [scrollLeft, setScrollLeft] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        const timer = setInterval(() => {
-            var _a;
-            const elt = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelector('.MuiDataGrid-virtualScroller');
-            if (elt) {
-                setScrollLeft(elt.scrollLeft);
-            }
-        }, 100);
-        return () => {
-            clearInterval(timer);
-        };
-    }, []);
-    return { ref, scrollLeft };
-}
-exports.useResizeBar = useResizeBar;
-function Tick({ left, scrollLeft, idx, onDrag, }) {
+function Tick({ left, scrollLeft, idx, onDrag, onMouseDown, }) {
     const { classes } = useStyles();
-    const cb = (0, react_1.useCallback)((d) => {
-        onDrag(d, idx);
-    }, [idx, onDrag]);
+    const onDragCallback = (0, react_1.useCallback)((lastFrameDistance, totalDistance) => onDrag(lastFrameDistance, totalDistance, idx), [idx, onDrag]);
     // has an invisible wider than tick mark (1px) clickable area (5px)
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(ResizeHandle_1.default, { onDrag: cb, vertical: true, className: classes.hiddenTick, style: { left: left - scrollLeft - 2.5 } }),
+        react_1.default.createElement(ResizeHandle_1.default, { onDrag: onDragCallback, onMouseDown: onMouseDown, vertical: true, className: classes.hiddenTick, style: { left: left - scrollLeft - 2.5 } }),
         react_1.default.createElement("div", { style: { left: left - scrollLeft }, className: classes.tick })));
 }
 function ResizeBar({ widths, setWidths, checkbox, scrollLeft = 0, }) {
     const { classes } = useStyles();
     const offsets = [];
+    const [initial, setInitial] = (0, react_1.useState)();
     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
-        newWidths[idx] = Math.max(newWidths[idx] + distance, 50);
-        setWidths(newWidths);
-    }, [widths, setWidths]);
-    return (react_1.default.createElement("div", { className: classes.resizeBar }, offsets.map((left, i) => (react_1.default.createElement(Tick, { key: i, left: i === offsets.length - 1 ? left - 3 : left, onDrag: onDrag, idx: i, scrollLeft: scrollLeft })))));
+    return (react_1.default.createElement("div", { className: classes.resizeBar }, offsets.map((left, i) => (react_1.default.createElement(Tick, { key: i, onMouseDown: () => {
+            setInitial([...widths]);
+        }, left: i === offsets.length - 1 ? left - 3 : left, onDrag: (_, totalDistance, idx) => {
+            const newWidths = [...widths];
+            // mui doesn't allow columns smaller than 50
+            newWidths[idx] = Math.max(initial[idx] - totalDistance, 50);
+            setWidths(newWidths);
+        }, idx: i, scrollLeft: scrollLeft })))));
 }
 exports.default = ResizeBar;

package/ui/ResizeHandle.d.ts

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

package/ui/ResizeHandle.js

@@ -43,19 +43,19 @@ const useStyles = (0, mui_1.makeStyles)()({
         alignSelf: 'stretch', // similar to above
     },
 });
-function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: originalClassName, ...props }) {
+function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: originalClassName, onMouseDown, ...props }) {
     const [mouseDragging, setMouseDragging] = (0, react_1.useState)(false);
+    const initialPosition = (0, react_1.useRef)(0);
     const prevPos = (0, react_1.useRef)(0);
     const { classes, cx } = useStyles();
     (0, react_1.useEffect)(() => {
         function mouseMove(event) {
             event.preventDefault();
             const pos = vertical ? event.clientX : event.clientY;
-            const distance = pos - prevPos.current;
-            if (distance) {
-                onDrag(distance);
-                prevPos.current = pos;
-            }
+            const totalDistance = initialPosition.current - pos;
+            const lastFrameDistance = pos - prevPos.current;
+            prevPos.current = pos;
+            onDrag(lastFrameDistance, totalDistance);
         }
         function mouseUp() {
             setMouseDragging(false);
@@ -84,8 +84,11 @@ function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: or
     }
     return (react_1.default.createElement("div", { "data-resizer": "true", onMouseDown: event => {
             event.preventDefault();
-            prevPos.current = vertical ? event.clientX : event.clientY;
+            const pos = vertical ? event.clientX : event.clientY;
+            initialPosition.current = pos;
+            prevPos.current = pos;
             setMouseDragging(true);
+            onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
         }, className: cx(className, originalClassName), ...props }));
 }
 exports.default = ResizeHandle;

package/ui/ReturnToImportFormDialog.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
-declare function ReturnToImportFormDialog({ model, handleClose, }: {
+declare const ReturnToImportFormDialog: ({ model, handleClose, }: {
     model: {
-        clearView: Function;
+        clearView: () => void;
     };
     handleClose: () => void;
-}): React.JSX.Element;
-declare const _default: typeof ReturnToImportFormDialog;
-export default _default;
+}) => React.JSX.Element;
+export default ReturnToImportFormDialog;

package/ui/ReturnToImportFormDialog.js

@@ -7,7 +7,7 @@ const react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
 const Dialog_1 = __importDefault(require("./Dialog"));
-function ReturnToImportFormDialog({ model, handleClose, }) {
+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" },
         react_1.default.createElement(material_1.DialogContent, null,
             react_1.default.createElement(material_1.Typography, null, "Are you sure you want to return to the import form? This will lose your current view")),
@@ -17,5 +17,5 @@ function ReturnToImportFormDialog({ model, handleClose, }) {
                     handleClose();
                 }, variant: "contained", color: "primary", autoFocus: true }, "OK"),
             react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), color: "secondary", variant: "contained" }, "Cancel"))));
-}
-exports.default = (0, mobx_react_1.observer)(ReturnToImportFormDialog);
+});
+exports.default = ReturnToImportFormDialog;

package/ui/SanitizedHTML.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-export declare function isHTML(str: string): boolean;
-export default function SanitizedHTML({ html }: {
+export default function SanitizedHTML({ html: pre }: {
     html: string;
 }): React.JSX.Element;

package/ui/SanitizedHTML.js

@@ -3,10 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isHTML = void 0;
 const react_1 = __importDefault(require("react"));
 const escape_html_1 = __importDefault(require("escape-html"));
 const dompurify_1 = __importDefault(require("dompurify"));
+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
@@ -52,14 +52,15 @@ const full = new RegExp(htmlTags.map(tag => `<${tag}\\b[^>]*>`).join('|'), 'i');
 function isHTML(str) {
     return full.test(str);
 }
-exports.isHTML = isHTML;
 // 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 }) {
+function SanitizedHTML({ html: pre }) {
+    // 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;

package/ui/Snackbar.d.ts

@@ -5,7 +5,7 @@ interface SnackbarSession extends AbstractSessionModel {
     snackbarMessages: SnackbarMessage[];
     popSnackbarMessage: () => void;
 }
-declare const _default: ({ session, }: {
+declare const Snackbar: ({ session }: {
     session: SnackbarSession;
 }) => React.JSX.Element | null;
-export default _default;
+export default Snackbar;

package/ui/Snackbar.js

@@ -8,7 +8,7 @@ const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 // icons
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
-exports.default = (0, mobx_react_1.observer)(function MessageSnackbar({ session, }) {
+const Snackbar = (0, mobx_react_1.observer)(function ({ session }) {
     const { snackbarMessages } = session;
     const latestMessage = snackbarMessages.at(-1);
     const handleClose = (_event, reason) => {
@@ -26,3 +26,4 @@ exports.default = (0, mobx_react_1.observer)(function MessageSnackbar({ session,
                 react_1.default.createElement(material_1.IconButton, { color: "inherit", onClick: handleClose },
                     react_1.default.createElement(Close_1.default, null)))) : null, severity: latestMessage.level || 'warning' }, latestMessage.message))) : null;
 });
+exports.default = Snackbar;

package/ui/Tooltip.d.ts

@@ -1,14 +1,11 @@
 import React from 'react';
 import { Feature } from '../util';
-declare const _default: ({ offsetX, offsetY, configuration, feature, timeout, }: {
+import { AnyConfigurationModel } from '../configuration';
+declare const Tooltip: ({ offsetX, offsetY, configuration, feature, timeout, }: {
     offsetX: number;
     offsetY: number;
-    configuration: {
-        [x: string]: any;
-    } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
-        setSubschema(slotName: string, data: unknown): any;
-    } & import("mobx-state-tree").IStateTreeNode<import("../configuration").AnyConfigurationSchemaType>;
+    configuration: AnyConfigurationModel;
     feature?: Feature | undefined;
     timeout?: number | undefined;
 }) => React.JSX.Element | null;
-export default _default;
+export default Tooltip;

package/ui/Tooltip.js

@@ -36,7 +36,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         zIndex: 10000,
     },
 });
-const Tooltip = ({ offsetX, offsetY, configuration, feature, timeout = 300, }) => {
+const Tooltip = (0, mobx_react_1.observer)(function ({ offsetX, offsetY, configuration, feature, timeout = 300, }) {
     const { classes } = useStyles();
     const [shown, setShown] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -50,5 +50,5 @@ const Tooltip = ({ offsetX, offsetY, configuration, feature, timeout = 300, }) =
         return (react_1.default.createElement("div", { className: classes.hoverLabel, style: { left: offsetX, top: offsetY } }, text));
     }
     return null;
-};
-exports.default = (0, mobx_react_1.observer)(Tooltip);
+});
+exports.default = Tooltip;

package/ui/theme.d.ts

@@ -27,8 +27,6 @@ declare module '@mui/material/styles/createPalette' {
 }
 export declare const defaultThemes: ThemeMap;
 export declare function createJBrowseBaseTheme(theme?: ThemeOptions): ThemeOptions;
-type ThemeMap = {
-    [key: string]: ThemeOptions;
-};
+type ThemeMap = Record<string, ThemeOptions>;
 export declare function createJBrowseTheme(configTheme?: ThemeOptions, themes?: ThemeMap, themeName?: string): import("@mui/material/styles").Theme;
 export {};

package/ui/theme.js

@@ -361,8 +361,8 @@ function createJBrowseBaseTheme(theme) {
 exports.createJBrowseBaseTheme = createJBrowseBaseTheme;
 function createJBrowseTheme(configTheme = {}, themes = exports.defaultThemes, themeName = 'default') {
     return (0, styles_1.createTheme)(createJBrowseBaseTheme(themeName === 'default'
-        ? (0, deepmerge_1.default)(themes['default'], augmentTheme(configTheme))
-        : augmentThemePlus(themes[themeName]) || themes['default']));
+        ? (0, deepmerge_1.default)(themes.default, augmentTheme(configTheme))
+        : augmentThemePlus(themes[themeName]) || themes.default));
 }
 exports.createJBrowseTheme = createJBrowseTheme;
 function augmentTheme(theme = {}) {

package/ui/useResizeBar.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function useResizeBar(): {
+    ref: import("react").RefObject<HTMLDivElement>;
+    scrollLeft: number;
+};