@jbrowse/core 2.8.0 → 2.9.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/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/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() {