@jbrowse/core 2.8.0 → 2.10.0

package/ui/CascadingMenu.d.ts

@@ -3,6 +3,7 @@ import { MenuItem as JBMenuItem } from './Menu';
 import { PopupState } from 'material-ui-popup-state/hooks';
 declare function CascadingMenuChildren(props: {
     onMenuItemClick: Function;
+    closeAfterItemClick?: boolean;
     menuItems: JBMenuItem[];
     popupState: PopupState;
 }): React.JSX.Element;

package/ui/CascadingMenu.js

@@ -36,19 +36,20 @@ const CascadingContext = react_1.default.createContext({
     parentPopupState: null,
     rootPopupState: null,
 });
-function CascadingMenuItem({ onClick, ...props }) {
+function CascadingMenuItem({ onClick, closeAfterItemClick, ...props }) {
     const { rootPopupState } = (0, react_1.useContext)(CascadingContext);
     if (!rootPopupState) {
         throw new Error('must be used inside a CascadingMenu');
     }
-    const handleClick = (0, react_1.useCallback)((event) => {
-        rootPopupState.close();
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }, [rootPopupState, onClick]);
-    return react_1.default.createElement(material_1.MenuItem, { ...props, onClick: handleClick });
+    return (react_1.default.createElement(material_1.MenuItem, { ...props, onClick: event => {
+            if (closeAfterItemClick) {
+                rootPopupState.close();
+            }
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        } }));
 }
-function CascadingSubmenu({ title, inset, popupId, ...props }) {
-    const { parentPopupState } = react_1.default.useContext(CascadingContext);
+function CascadingSubmenu({ title, Icon, inset, popupId, ...props }) {
+    const { parentPopupState } = (0, react_1.useContext)(CascadingContext);
     const popupState = (0, hooks_1.usePopupState)({
         popupId,
         variant: 'popover',
@@ -56,6 +57,8 @@ function CascadingSubmenu({ title, inset, popupId, ...props }) {
     });
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.MenuItem, { ...(0, hooks_1.bindHover)(popupState), ...(0, hooks_1.bindFocus)(popupState) },
+            Icon ? (react_1.default.createElement(material_1.ListItemIcon, null,
+                react_1.default.createElement(Icon, null))) : null,
             react_1.default.createElement(material_1.ListItemText, { primary: title, inset: inset }),
             react_1.default.createElement(ChevronRight_1.default, null)),
         react_1.default.createElement(CascadingSubmenuHover, { ...props, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, popupState: popupState })));
@@ -70,8 +73,8 @@ function CascadingSubmenuHover({ popupState, onMenuItemClick, menuItems, classes
         react_1.default.createElement(HoverMenu_1.default, { ...props, ...(0, hooks_1.bindMenu)(popupState) })));
 }
 function CascadingMenu({ popupState, onMenuItemClick, menuItems, ...props }) {
-    const { rootPopupState } = react_1.default.useContext(CascadingContext);
-    const context = react_1.default.useMemo(() => ({
+    const { rootPopupState } = (0, react_1.useContext)(CascadingContext);
+    const context = (0, react_1.useMemo)(() => ({
         rootPopupState: rootPopupState || popupState,
         parentPopupState: popupState,
     }), [rootPopupState, popupState]);
@@ -87,16 +90,16 @@ function EndDecoration({ item }) {
     }
     return null;
 }
-function CascadingMenuList({ onMenuItemClick, menuItems, ...props }) {
+function CascadingMenuList({ onMenuItemClick, closeAfterItemClick, menuItems, ...props }) {
     function handleClick(callback) {
         return (event) => {
             onMenuItemClick(event, callback);
         };
     }
-    const hasIcon = menuItems.some(menuItem => 'icon' in menuItem && menuItem.icon);
+    const hasIcon = menuItems.some(m => 'icon' in m && m.icon);
     return (react_1.default.createElement(react_1.default.Fragment, null, menuItems.map((item, idx) => {
-        return 'subMenu' in item ? (react_1.default.createElement(CascadingSubmenu, { key: `subMenu-${item.label}-${idx}`, popupId: `subMenu-${item.label}`, title: item.label, inset: hasIcon, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu },
-            react_1.default.createElement(CascadingMenuList, { ...props, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu }))) : item.type === 'divider' ? (react_1.default.createElement(material_1.Divider, { key: `divider-${idx}`, component: "li" })) : item.type === 'subHeader' ? (react_1.default.createElement(material_1.ListSubheader, { key: `subHeader-${item.label}-${idx}` }, item.label)) : (react_1.default.createElement(CascadingMenuItem, { key: `${item.label}-${idx}`, onClick: 'onClick' in item ? handleClick(item.onClick) : undefined, disabled: Boolean(item.disabled) },
+        return 'subMenu' in item ? (react_1.default.createElement(CascadingSubmenu, { key: `subMenu-${item.label}-${idx}`, popupId: `subMenu-${item.label}`, title: item.label, Icon: item.icon, inset: hasIcon && !item.icon, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu },
+            react_1.default.createElement(CascadingMenuList, { ...props, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu }))) : item.type === 'divider' ? (react_1.default.createElement(material_1.Divider, { key: `divider-${idx}`, component: "li" })) : item.type === 'subHeader' ? (react_1.default.createElement(material_1.ListSubheader, { key: `subHeader-${item.label}-${idx}` }, item.label)) : (react_1.default.createElement(CascadingMenuItem, { key: `${item.label}-${idx}`, closeAfterItemClick: closeAfterItemClick, onClick: 'onClick' in item ? handleClick(item.onClick) : undefined, disabled: Boolean(item.disabled) },
             item.icon ? (react_1.default.createElement(material_1.ListItemIcon, null,
                 react_1.default.createElement(item.icon, null))) : null,
             ' ',
@@ -106,7 +109,8 @@ function CascadingMenuList({ onMenuItemClick, menuItems, ...props }) {
     })));
 }
 function CascadingMenuChildren(props) {
-    return (react_1.default.createElement(CascadingMenu, { ...props },
-        react_1.default.createElement(CascadingMenuList, { ...props })));
+    const { closeAfterItemClick = true, ...rest } = props;
+    return (react_1.default.createElement(CascadingMenu, { ...rest },
+        react_1.default.createElement(CascadingMenuList, { ...rest, closeAfterItemClick: closeAfterItemClick })));
 }
 exports.default = CascadingMenuChildren;

package/ui/CascadingMenuButton.d.ts

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

package/ui/CascadingMenuButton.js

@@ -1,20 +1,60 @@
 "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 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const CascadingMenu_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenu"));
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const hooks_1 = require("material-ui-popup-state/hooks");
-const CascadingMenuButton = (0, mobx_react_1.observer)(function CascadingMenuButton({ children, menuItems, ...rest }) {
+const CascadingMenuButton = (0, mobx_react_1.observer)(function CascadingMenuButton({ children, menuItems, closeAfterItemClick = true, stopPropagation, setOpen, onClick: onClickExtra, ...rest }) {
     const popupState = (0, hooks_1.usePopupState)({
         popupId: 'viewMenu',
         variant: 'popover',
     });
+    const { onClick, onTouchStart, ...rest2 } = (0, hooks_1.bindTrigger)(popupState);
+    const { isOpen } = popupState;
+    (0, react_1.useEffect)(() => {
+        setOpen === null || setOpen === void 0 ? void 0 : setOpen(isOpen);
+    }, [isOpen, setOpen]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.IconButton, { ...(0, hooks_1.bindTrigger)(popupState), ...rest, disabled: menuItems.length === 0 }, children),
-        react_1.default.createElement(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_, callback) => callback(), menuItems: menuItems, popupState: popupState })));
+        react_1.default.createElement(material_1.IconButton, { onClick: event => {
+                if (stopPropagation) {
+                    event.stopPropagation();
+                }
+                onClick(event);
+                onClickExtra === null || onClickExtra === void 0 ? void 0 : onClickExtra();
+            }, onTouchStart: event => {
+                if (stopPropagation) {
+                    event.stopPropagation();
+                }
+                onTouchStart(event);
+                onClickExtra === null || onClickExtra === void 0 ? void 0 : onClickExtra();
+            }, ...rest2, ...rest, disabled: menuItems.length === 0 }, children),
+        react_1.default.createElement(CascadingMenu_1.default, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_, callback) => callback(), menuItems: menuItems, closeAfterItemClick: closeAfterItemClick, popupState: popupState })));
 });
 exports.default = CascadingMenuButton;

package/ui/FileSelector/FileSelector.js

@@ -33,9 +33,10 @@ const material_1 = require("@mui/material");
 const types_1 = require("../../util/types");
 const LocalFileChooser_1 = __importDefault(require("./LocalFileChooser"));
 const UrlChooser_1 = __importDefault(require("./UrlChooser"));
+const util_1 = require("../../util");
 // icons
 const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
-const util_1 = require("../../util");
+const NUM_SHOWN = 2;
 function ToggleButtonWithTooltip(props) {
     const { title, children, ...other } = props;
     return (react_1.default.createElement(material_1.Tooltip, { title: title || '' },
@@ -53,35 +54,40 @@ const FileSelector = (0, mobx_react_1.observer)(function (props) {
     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] : [];
-    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 accounts = (0, types_1.isAppRootModel)(rootModel)
+        ? rootModel.internetAccounts.filter(f => f.type !== 'HTTPBasicInternetAccount')
+        : [];
+    const [recentlyUsedInternetAccounts, setRecentlyUsedInternetAccounts] = (0, util_1.useLocalStorage)('fileSelector-recentlyUsedInternetAccounts', []);
+    const map = Object.fromEntries(accounts.map(a => [a.internetAccountId, a]));
+    const arr = [...new Set(accounts.map(s => s.internetAccountId))].sort((a, b) => recentlyUsedInternetAccounts.indexOf(a) -
+        recentlyUsedInternetAccounts.indexOf(b));
+    const shownAccounts = arr.slice(0, NUM_SHOWN);
+    const hiddenAccounts = arr.slice(NUM_SHOWN);
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    const selectedAcct = accts.find(i => i.internetAccountId === toggleButtonValue);
-    const setLocationWithAcct = (0, react_1.useCallback)((location) => {
+    const selectedAccount = map[toggleButtonValue];
+    const setLocationWithAccount = (0, react_1.useCallback)((location) => {
         setLocation({
             ...location,
             ...((0, types_1.isUriLocation)(location)
-                ? { internetAccountId: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.internetAccountId }
+                ? { internetAccountId: selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.internetAccountId }
                 : {}),
         });
-    }, [setLocation, selectedAcct]);
+    }, [setLocation, selectedAccount]);
     (0, react_1.useEffect)(() => {
         // if you swap account selection after inputting url
-        if (selectedAcct &&
+        if (selectedAccount &&
             (0, types_1.isUriLocation)(location) &&
-            location.internetAccountId !== selectedAcct.internetAccountId) {
-            setLocationWithAcct(location);
+            location.internetAccountId !== selectedAccount.internetAccountId) {
+            setLocationWithAccount(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 }));
+    }, [location, selectedAccount, setLocationWithAccount]);
+    let locationInput = (react_1.default.createElement(UrlChooser_1.default, { ...props, setLocation: setLocationWithAccount, label: selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.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: setLocationWithAcct }));
+    if (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.SelectorComponent) {
+        const { SelectorComponent } = selectedAccount;
+        locationInput = (react_1.default.createElement(SelectorComponent, { ...props, setLocation: setLocationWithAccount }));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Box, { display: "flex" },
@@ -89,34 +95,42 @@ const FileSelector = (0, mobx_react_1.observer)(function (props) {
         react_1.default.createElement(material_1.Box, { display: "flex", flexDirection: "row" },
             react_1.default.createElement(material_1.Box, null,
                 react_1.default.createElement(material_1.ToggleButtonGroup, { value: toggleButtonValue, exclusive: true, onChange: (_event, newState) => {
+                        setRecentlyUsedInternetAccounts([
+                            ...new Set([newState, ...recentlyUsedInternetAccounts].filter(util_1.notEmpty)),
+                        ]);
                         if (newState) {
                             setToggleButtonValue(newState);
                         }
                         if ((0, types_1.isUriLocation)(location)) {
-                            setLocationWithAcct(location);
+                            setLocationWithAccount(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")),
                     react_1.default.createElement(material_1.ToggleButton, { value: "url", "aria-label": "url" }, "URL"),
-                    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 > 0 ? (
+                    shownAccounts.map(id => {
+                        const { internetAccountId, name, toggleContents } = map[id];
+                        return (react_1.default.createElement(ToggleButtonWithTooltip, { key: id, value: internetAccountId, title: name }, typeof toggleContents === 'string'
+                            ? shorten(toggleContents, 5)
+                            : toggleContents || shorten(name, 5)));
+                    }),
+                    hiddenAccounts.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: () => {
-                        const prev = shownAccts.at(-1);
-                        setShownAccts([...shownAccts.slice(0, -1), acct]);
-                        setHiddenAccts([
-                            prev,
-                            ...hiddenAccts.slice(0, idx),
-                            ...hiddenAccts.slice(idx + 1),
-                        ].filter(util_1.notEmpty));
-                        setToggleButtonValue(acct.internetAccountId);
-                        setAnchorEl(null);
-                    } }, acct.name)))))),
+                react_1.default.createElement(material_1.Menu, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, hiddenAccounts === null || hiddenAccounts === void 0 ? void 0 : hiddenAccounts.map(id => {
+                    const { internetAccountId, name } = map[id];
+                    return (react_1.default.createElement(material_1.MenuItem, { key: id, value: internetAccountId, onClick: () => {
+                            setRecentlyUsedInternetAccounts([
+                                ...new Set([
+                                    internetAccountId,
+                                    ...recentlyUsedInternetAccounts,
+                                ].filter(util_1.notEmpty)),
+                            ]);
+                            setToggleButtonValue(internetAccountId);
+                            setAnchorEl(null);
+                        } }, name));
+                })))),
         locationInput,
         react_1.default.createElement(material_1.FormHelperText, null, description)));
 });

package/ui/Menu.d.ts

@@ -20,7 +20,8 @@ export interface MenuSubHeader {
     label: string;
 }
 export interface BaseMenuItem {
-    label: string;
+    id?: string;
+    label: React.ReactNode;
     priority?: number;
     subLabel?: string;
     icon?: React.ComponentType<SvgIconProps>;

package/ui/Menu.js

@@ -99,21 +99,18 @@ function MenuItemEndDecoration(props) {
     return react_1.default.createElement("div", { className: classes.menuItemEndDecoration }, icon);
 }
 exports.MenuItemEndDecoration = MenuItemEndDecoration;
+function checkIfValid(m) {
+    return m.type !== 'divider' && m.type !== 'subHeader' && !m.disabled;
+}
 function findNextValidIdx(menuItems, currentIdx) {
-    const idx = menuItems
-        .slice(currentIdx + 1)
-        .findIndex(menuItem => menuItem.type !== 'divider' &&
-        menuItem.type !== 'subHeader' &&
-        !menuItem.disabled);
+    const idx = menuItems.slice(currentIdx + 1).findIndex(checkIfValid);
     if (idx === -1) {
         return idx;
     }
     return currentIdx + 1 + idx;
 }
 function findPreviousValidIdx(menuItems, currentIdx) {
-    return (0, util_1.findLastIndex)(menuItems.slice(0, currentIdx), menuItem => menuItem.type !== 'divider' &&
-        menuItem.type !== 'subHeader' &&
-        !menuItem.disabled);
+    return (0, util_1.findLastIndex)(menuItems.slice(0, currentIdx), checkIfValid);
 }
 const MenuPage = react_1.default.forwardRef(function MenuPage2(props, ref) {
     const [subMenuAnchorEl, setSubMenuAnchorEl] = (0, react_1.useState)();
@@ -198,7 +195,7 @@ const MenuPage = react_1.default.forwardRef(function MenuPage2(props, ref) {
             const onClick = 'onClick' in menuItem
                 ? handleClick(menuItem.onClick)
                 : undefined;
-            return (react_1.default.createElement(material_1.MenuItem, { key: menuItem.label, style: menuItemStyle, selected: idx === selectedMenuItemIdx, onClick: onClick, onMouseMove: e => {
+            return (react_1.default.createElement(material_1.MenuItem, { key: menuItem.id || String(menuItem.label), style: menuItemStyle, selected: idx === selectedMenuItemIdx, onClick: onClick, onMouseMove: e => {
                     if (e.currentTarget !== document.activeElement) {
                         e.currentTarget.focus();
                         setSelectedMenuItemIdx(idx);
@@ -246,7 +243,7 @@ const MenuPage = react_1.default.forwardRef(function MenuPage2(props, ref) {
         menuItems.map((menuItem, idx) => {
             let subMenu = null;
             if ('subMenu' in menuItem) {
-                subMenu = (react_1.default.createElement(MenuPage, { key: menuItem.label, anchorEl: subMenuAnchorEl, open: isSubMenuOpen && openSubMenuIdx === idx, onClose: () => {
+                subMenu = (react_1.default.createElement(MenuPage, { key: menuItem.id || String(menuItem.label), anchorEl: subMenuAnchorEl, open: isSubMenuOpen && openSubMenuIdx === idx, onClose: () => {
                         setIsSubMenuOpen(false);
                         setSubMenuAnchorEl(undefined);
                     }, onMenuItemClick: onMenuItemClick, menuItems: menuItem.subMenu }));

package/ui/MenuButton.d.ts

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

package/ui/MenuButton.js

@@ -30,13 +30,19 @@ 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 MenuButton = (0, mobx_react_1.observer)(function MenuButton({ children, menuItems, closeAfterItemClick = true, stopPropagation, setOpen, ...rest }) {
     const [anchorEl, setAnchorEl] = (0, react_1.useState)();
+    const isOpen = !!anchorEl;
+    (0, react_1.useEffect)(() => {
+        setOpen === null || setOpen === void 0 ? void 0 : setOpen(isOpen);
+    }, [isOpen, setOpen]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.IconButton, { ...rest, onClick: event => setAnchorEl(event.currentTarget) }, children),
         react_1.default.createElement(Menu_1.default, { open: !!anchorEl, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), onMenuItemClick: (_, callback) => {
                 callback();
-                setAnchorEl(undefined);
+                if (closeAfterItemClick) {
+                    setAnchorEl(undefined);
+                }
             }, menuItems: menuItems })));
 });
 exports.default = MenuButton;

package/ui/SanitizedHTML.d.ts

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

package/ui/SanitizedHTML.js

@@ -58,7 +58,7 @@ function isHTML(str) {
 // products/jbrowse-web/src/tests/Connection.test.tsx test (can delete mock to
 // see)
 //
-function SanitizedHTML({ html: pre }) {
+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);
@@ -74,7 +74,7 @@ function SanitizedHTML({ html: pre }) {
             }
         });
     }
-    return (react_1.default.createElement("span", { 
+    return (react_1.default.createElement("span", { className: className, 
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML: {
             __html: dompurify_1.default.sanitize(value),

package/util/analytics.js

@@ -59,7 +59,7 @@ async function writeGAAnalytics(rootModel, initialTimestamp) {
     var _a;
     const jbrowseUser = 'UA-7115575-5';
     const stats = {
-        'tracks-count': rootModel.jbrowse.tracks.length,
+        'tracks-count': rootModel.jbrowse.tracks.length, // this is all possible tracks
         ver: rootModel.version,
         electron: util_1.isElectron,
         loadTime: Date.now() - initialTimestamp,

package/util/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import PluginManager from '../PluginManager';
 import { IAnyStateTreeNode, IStateTreeNode, Instance } from 'mobx-state-tree';
 import { IReactionPublic, IReactionOptions } from 'mobx';
@@ -16,7 +16,7 @@ export * from './offscreenCanvasUtils';
 export declare function useDebounce<T>(value: T, delay: number): T;
 export declare function useWidthSetter(view: {
     setWidth: (arg: number) => void;
-}, padding: string): import("react").RefObject<HTMLDivElement>;
+}, padding: string): React.RefObject<HTMLDivElement>;
 export declare function useDebouncedCallback<T>(callback: (...args: T[]) => void, wait?: number): (...args: T[]) => void;
 /**
  * find the first node in the hierarchy that matches the given predicate
@@ -213,7 +213,7 @@ export declare function renameRegionsIfNeeded<ARGTYPE extends {
     assemblyName?: string;
     regions?: Region[];
     signal?: AbortSignal;
-    adapterConfig: unknown;
+    adapterConfig: Record<string, unknown>;
     sessionId: string;
     statusCallback?: (arg: string) => void;
 }>(assemblyManager: AssemblyManager, args: ARGTYPE): Promise<ARGTYPE & {
@@ -389,6 +389,9 @@ interface BasicFeature {
     refName: string;
 }
 export declare function gatherOverlaps(regions: BasicFeature[]): BasicFeature[];
-export { default as SimpleFeature, type Feature, type SimpleFeatureSerialized, isFeature, } from './simpleFeature';
 export declare function stripAlpha(str: string): string;
+export declare function renderToStaticMarkup(node: React.ReactElement, createRootFn?: (elt: Element | DocumentFragment) => {
+    render: (node: React.ReactElement) => unknown;
+}): string;
+export { default as SimpleFeature, type Feature, type SimpleFeatureSerialized, isFeature, } from './simpleFeature';
 export { blobToDataURL } from './blobToDataURL';

package/util/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toLocale = exports.getBpDisplayStr = exports.isSupportedIndexingAdapter = exports.bytesForRegions = exports.objectHash = exports.hashCode = exports.updateStatus = exports.generateCodonTable = exports.defaultCodonTable = exports.defaultStops = exports.defaultStarts = exports.measureText = exports.rIC = exports.complement = exports.reverse = exports.revcom = exports.isElectron = exports.stringify = exports.shorten = exports.minmax = exports.renameRegionsIfNeeded = exports.renameRegionIfNeeded = exports.makeAbortableReaction = exports.findLast = exports.findLastIndex = exports.iterMap = exports.bpSpanPx = exports.featureSpanPx = exports.cartesianToPolar = exports.polarToCartesian = exports.degToRad = exports.radToDeg = exports.bpToPx = exports.clamp = exports.compareLocStrings = exports.compareLocs = exports.parseLocString = exports.parseLocStringOneBased = exports.assembleLocStringFast = exports.assembleLocString = exports.getContainingDisplay = exports.getContainingTrack = exports.getContainingView = exports.getSession = exports.findParentThatIs = exports.springAnimate = exports.findParentThat = exports.useDebouncedCallback = exports.useWidthSetter = exports.useDebounce = void 0;
-exports.blobToDataURL = exports.stripAlpha = exports.isFeature = exports.SimpleFeature = exports.gatherOverlaps = exports.mergeIntervals = exports.notEmpty = exports.groupBy = exports.avg = exports.sum = exports.min = exports.max = exports.localStorageSetItem = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.linkify = exports.coarseStripHTML = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = void 0;
+exports.blobToDataURL = exports.isFeature = exports.SimpleFeature = exports.renderToStaticMarkup = exports.stripAlpha = exports.gatherOverlaps = exports.mergeIntervals = exports.notEmpty = exports.groupBy = exports.avg = exports.sum = exports.min = exports.max = exports.localStorageSetItem = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.linkify = exports.coarseStripHTML = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
 const is_object_1 = __importDefault(require("is-object"));
@@ -30,6 +30,8 @@ const types_2 = require("./types");
 // has to be the full path and not the relative path to get the jest mock
 const useMeasure_1 = __importDefault(require("@jbrowse/core/util/useMeasure"));
 const colord_1 = require("./colord");
+// eslint-disable-next-line react/no-deprecated
+const react_dom_1 = require("react-dom");
 __exportStar(require("./types"), exports);
 __exportStar(require("./aborting"), exports);
 __exportStar(require("./when"), exports);
@@ -1132,13 +1134,27 @@ function gatherOverlaps(regions) {
     return Object.values(memo).flatMap(group => mergeIntervals(group.sort((a, b) => a.start - b.start)));
 }
 exports.gatherOverlaps = gatherOverlaps;
-var simpleFeature_1 = require("./simpleFeature");
-Object.defineProperty(exports, "SimpleFeature", { enumerable: true, get: function () { return __importDefault(simpleFeature_1).default; } });
-Object.defineProperty(exports, "isFeature", { enumerable: true, get: function () { return simpleFeature_1.isFeature; } });
 function stripAlpha(str) {
     const c = (0, colord_1.colord)(str);
     return c.alpha(1).toHex();
 }
 exports.stripAlpha = stripAlpha;
+// https://react.dev/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code
+function renderToStaticMarkup(node, createRootFn) {
+    const div = document.createElement('div');
+    (0, react_dom_1.flushSync)(() => {
+        if (createRootFn) {
+            createRootFn(div).render(node);
+        }
+        else {
+            (0, react_dom_1.render)(node, div);
+        }
+    });
+    return div.innerHTML.replace('&gt;', '>').replace('&lt;', '<');
+}
+exports.renderToStaticMarkup = renderToStaticMarkup;
+var simpleFeature_1 = require("./simpleFeature");
+Object.defineProperty(exports, "SimpleFeature", { enumerable: true, get: function () { return __importDefault(simpleFeature_1).default; } });
+Object.defineProperty(exports, "isFeature", { enumerable: true, get: function () { return simpleFeature_1.isFeature; } });
 var blobToDataURL_1 = require("./blobToDataURL");
 Object.defineProperty(exports, "blobToDataURL", { enumerable: true, get: function () { return blobToDataURL_1.blobToDataURL; } });

package/util/io/RemoteFileWithRangeCache.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="node" />
+import { Buffer } from 'buffer';
 import { RemoteFile, PolyfilledResponse } from 'generic-filehandle';
 export interface BinaryRangeResponse {
     headers: Record<string, string>;

package/util/io/RemoteFileWithRangeCache.js

@@ -14,9 +14,9 @@ function binaryRangeFetch(url, start, end, options = {}) {
 }
 const globalRangeCache = new http_range_fetcher_1.HttpRangeFetcher({
     fetch: binaryRangeFetch,
-    size: 500 * 1024 ** 2,
-    chunkSize: 128 * 1024,
-    maxFetchSize: 100 * 1024 ** 2,
+    size: 500 * 1024 ** 2, // 500MiB
+    chunkSize: 128 * 1024, // 128KiB
+    maxFetchSize: 100 * 1024 ** 2, // 100MiB
     minimumTTL: 24 * 60 * 60 * 1000, // 1 day
 });
 function clearCache() {