@jbrowse/core 2.14.0 → 2.15.1

package/ui/BaseTooltip.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export default function BaseTooltip({ clientPoint: clientPointCoords, children, placement, }: {
+    placement?: 'left' | 'right';
+    clientPoint?: {
+        x: number;
+        y: number;
+    };
+    children: React.ReactNode;
+}): React.JSX.Element;

package/ui/BaseTooltip.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = BaseTooltip;
+const react_1 = __importDefault(require("react"));
+const mui_1 = require("tss-react/mui");
+const material_1 = require("@mui/material");
+const react_2 = require("@floating-ui/react");
+function round(value) {
+    return Math.round(value * 1e5) / 1e5;
+}
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    // these styles come from
+    // https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Tooltip/Tooltip.js
+    tooltip: {
+        position: 'absolute',
+        pointerEvents: 'none',
+        backgroundColor: (0, material_1.alpha)(theme.palette.grey[700], 0.9),
+        borderRadius: theme.shape.borderRadius,
+        color: theme.palette.common.white,
+        fontFamily: theme.typography.fontFamily,
+        padding: '4px 8px',
+        fontSize: theme.typography.pxToRem(12),
+        lineHeight: `${round(14 / 10)}em`,
+        maxWidth: 300,
+        wordWrap: 'break-word',
+    },
+}));
+function BaseTooltip({ clientPoint: clientPointCoords, children, placement = 'right', }) {
+    var _a, _b;
+    const theme = (0, material_1.useTheme)();
+    const popperTheme = (_a = theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    const { classes } = useStyles();
+    const { refs, floatingStyles, context } = (0, react_2.useFloating)({
+        placement,
+        strategy: 'fixed',
+    });
+    const clientPoint = (0, react_2.useClientPoint)(context, clientPointCoords);
+    const { getFloatingProps } = (0, react_2.useInteractions)([clientPoint]);
+    return (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
+        react_1.default.createElement("div", { className: classes.tooltip, ref: refs.setFloating, style: {
+                ...floatingStyles,
+                zIndex: 100000,
+                // workaround for tooltips flashing at top left corner of screen
+                // when first appearing
+                visibility: floatingStyles.transform === 'translate(0px, 0px)'
+                    ? 'hidden'
+                    : undefined,
+                pointerEvents: 'none',
+            }, ...getFloatingProps() }, children)));
+}

package/ui/CascadingMenu.js

@@ -98,7 +98,9 @@ function CascadingMenuList({ onMenuItemClick, closeAfterItemClick, menuItems, ..
         };
     }
     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 (react_1.default.createElement(react_1.default.Fragment, null, menuItems
+        .sort((a, b) => (b.priority || 0) - (a.priority || 0))
+        .map((item, idx) => {
         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-${JSON.stringify(item)}-${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,

package/ui/Menu.js

@@ -111,7 +111,7 @@ function findNextValidIdx(menuItems, currentIdx) {
 function findPreviousValidIdx(menuItems, currentIdx) {
     return (0, util_1.findLastIndex)(menuItems.slice(0, currentIdx), checkIfValid);
 }
-function MenuPage(props) {
+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);
@@ -191,7 +191,9 @@ function MenuPage(props) {
                 menuItem.type === 'radio') {
                 endDecoration = (react_1.default.createElement(MenuItemEndDecoration, { type: menuItem.type, checked: menuItem.checked, disabled: menuItem.disabled }));
             }
-            const onClick = 'onClick' in menuItem ? handleClick(menuItem.onClick) : undefined;
+            const onClick = 'onClick' in menuItem
+                ? handleClick(menuItem.onClick)
+                : undefined;
             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();
@@ -247,11 +249,14 @@ function MenuPage(props) {
             }
             return subMenu;
         })));
-    return top ? (ListContents) : (react_1.default.createElement(material_1.Paper, { elevation: 8, ref: paperRef, className: classes.paper, style: { ...position } }, ListContents));
-}
+    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 },
+        react_1.default.createElement(material_1.Paper, { elevation: 8, ref: paperRef, className: classes.paper, style: { ...position } }, ListContents)));
+});
 function Menu(props) {
     const { open, onClose, menuItems, onMenuItemClick, ...other } = props;
-    return (react_1.default.createElement(material_1.Popover, { open: open, onClose: onClose, BackdropProps: { invisible: true }, anchorOrigin: {
+    return (react_1.default.createElement(material_1.Popover, { open: open, onClose: onClose, anchorOrigin: {
             vertical: 'bottom',
             horizontal: 'right',
             ...other.anchorOrigin,

package/ui/theme.js

@@ -186,8 +186,11 @@ function createJBrowseBaseTheme(theme) {
             MuiAccordion: {
                 defaultProps: {
                     disableGutters: true,
-                    TransitionProps: {
-                        timeout: 150,
+                    slotProps: {
+                        transition: {
+                            timeout: 150,
+                            unmountOnExit: true,
+                        },
                     },
                 },
             },

package/util/aborting.js

@@ -56,7 +56,7 @@ function makeAbortError() {
 }
 function observeAbortSignal(signal) {
     if (!signal) {
-        return rxjs_1.Observable.create();
+        return new rxjs_1.Observable();
     }
     return (0, rxjs_1.fromEvent)(signal, 'abort');
 }

package/util/index.d.ts

@@ -384,13 +384,14 @@ export declare function notEmpty<T>(value: T | null | undefined): value is T;
 export declare function mergeIntervals<T extends {
     start: number;
     end: number;
-}>(intervals: T[], w?: number): (T | undefined)[];
+}>(intervals: T[], w?: number): T[];
 interface BasicFeature {
     end: number;
     start: number;
     refName: string;
+    assemblyName?: string;
 }
-export declare function gatherOverlaps(regions: BasicFeature[]): (BasicFeature | undefined)[];
+export declare function gatherOverlaps(regions: BasicFeature[], w?: number): BasicFeature[];
 export declare function stripAlpha(str: string): string;
 export declare function getStrokeProps(str: string): {
     strokeOpacity: number;

package/util/index.js

@@ -1169,7 +1169,8 @@ function mergeIntervals(intervals, w = 5000) {
     }
     return stack;
 }
-function gatherOverlaps(regions) {
+// returns new array non-overlapping features
+function gatherOverlaps(regions, w = 5000) {
     const memo = {};
     for (const x of regions) {
         if (!memo[x.refName]) {
@@ -1177,7 +1178,7 @@ function gatherOverlaps(regions) {
         }
         memo[x.refName].push(x);
     }
-    return Object.values(memo).flatMap(group => mergeIntervals(group.sort((a, b) => a.start - b.start)));
+    return Object.values(memo).flatMap(group => mergeIntervals(group.sort((a, b) => a.start - b.start), w));
 }
 function stripAlpha(str) {
     const c = (0, colord_1.colord)(str);
@@ -1205,6 +1206,7 @@ function renderToStaticMarkup(node, createRootFn) {
             createRootFn(div).render(node);
         }
         else {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
             (0, react_dom_1.render)(node, div);
         }
     });

package/util/rxjs.js

@@ -10,10 +10,9 @@ const _1 = require(".");
  * @param func - observer function, could be async
  */
 function ObservableCreate(func, signal) {
-    return rxjs_1.Observable.create((observer) => {
+    return new rxjs_1.Observable((observer) => {
         try {
             const ret = func(observer);
-            // catch async errors
             if (ret === null || ret === void 0 ? void 0 : ret.catch) {
                 ret.catch((error) => {
                     observer.error(error);
@@ -21,7 +20,6 @@ function ObservableCreate(func, signal) {
             }
         }
         catch (error) {
-            // catch sync errors
             observer.error(error);
         }
     }).pipe((0, operators_1.takeUntil)((0, _1.observeAbortSignal)(signal)));

package/util/types/index.d.ts

@@ -121,8 +121,8 @@ export interface SessionWithWidgets extends AbstractSessionModel {
     minimized: boolean;
     visibleWidget?: Widget;
     widgets: Map<string | number, Widget>;
-    hideAllWidgets: () => void;
     activeWidgets: Map<string | number, Widget>;
+    hideAllWidgets: () => void;
     addWidget(typeName: string, id: string, initialState?: Record<string, unknown>, configuration?: {
         type: string;
     }): Widget;