@jbrowse/core 5.0.0-beta.8 → 5.0.0-beta.9

package/esm/ui/CascadingMenu.js

@@ -1,9 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, use, useEffect, useRef, useState } from 'react';
+import { createContext, memo, use, useEffect, useMemo, useState } from 'react';
 import { Divider, ListItemIcon, ListItemText, ListSubheader, Menu, MenuItem, Tooltip, } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
-import { useEventCallback } from '../util/useEventCallback.js';
 import HoverMenu from './HoverMenu.js';
 import { MenuItemTrailing } from './MenuItemTrailing.js';
 import { resolveSubMenu, staysOpenOnClick } from './MenuTypes.js';
@@ -65,36 +64,35 @@ function useCascadingMenu() {
  */
 const submenuAimGraceMs = 120;
 /**
- * Which submenu of ONE list is open, plus the hover intent that moves it.
+ * The hover intent that moves which submenu of ONE list is open.
  *
  * A click or ArrowRight says where the pointer meant to go and acts at once. A
  * hover is read against {@link isAimedAtPanel}: outside the cone it acts at
  * once too, and inside it defers, because the rows between a submenu row and
  * its panel are exactly the ones a pointer on its way there has to cross.
+ *
+ * Built once per list, so every row gets the same handlers and a row whose
+ * open state didn't change skips the re-render a hover triggers.
  */
-function useSubmenuHover() {
-    const [openSubmenu, setOpenSubmenu] = useState();
+function createSubmenuHover(setOpenSubmenu) {
+    let openKey;
     // the open panel's paper, so the cone has a real edge to open onto. Written
     // by whichever CascadingSubmenu is open and cleared as it closes, so at most
     // one submenu of this list ever owns it
-    const panelRef = useRef(null);
+    const panelRef = { current: null };
     // where the pointer was when the open panel opened — the cone's tip
-    const apex = useRef(undefined);
-    const pending = useRef(undefined);
+    let apex;
+    let pending;
     const cancelPending = () => {
-        if (pending.current) {
-            clearTimeout(pending.current.timer);
-            pending.current = undefined;
+        if (pending) {
+            clearTimeout(pending.timer);
+            pending = undefined;
         }
     };
-    useEffect(() => () => {
-        if (pending.current) {
-            clearTimeout(pending.current.timer);
-        }
-    }, []);
     const commit = (key, point) => {
         cancelPending();
-        apex.current = key === undefined ? undefined : point;
+        apex = key === undefined ? undefined : point;
+        openKey = key;
         setOpenSubmenu(key);
     };
     // 'unmeasured' is its own answer, not a lenient 'inside': a cone pointing at
@@ -103,19 +101,18 @@ function useSubmenuHover() {
     // moving anywhere at all
     const aimAt = (point) => {
         const panel = panelRef.current;
-        const tip = apex.current;
-        if (!panel || !tip) {
+        if (!panel || !apex) {
             return 'unmeasured';
         }
         const rect = panel.getBoundingClientRect();
         if (rect.width === 0 && rect.height === 0) {
             return 'unmeasured';
         }
-        return isAimedAtPanel(point, tip, rect) ? 'inside' : 'outside';
+        return isAimedAtPanel(point, apex, rect) ? 'inside' : 'outside';
     };
     const defer = (key, point) => {
         cancelPending();
-        pending.current = {
+        pending = {
             key,
             point,
             timer: setTimeout(() => {
@@ -123,57 +120,67 @@ function useSubmenuHover() {
             }, submenuAimGraceMs),
         };
     };
-    // Watched only while a panel is up, and only a deferred change is waiting on
-    // it. A row's own hover cannot answer this alone: the pointer can leave the
-    // cone without ever crossing into another row, by turning around inside the
-    // one it is already on.
-    const onPointerMove = useEventCallback((event) => {
-        const deferred = pending.current;
-        if (!deferred) {
-            return;
-        }
-        const aim = aimAt({ x: event.clientX, y: event.clientY });
-        if (aim === 'outside') {
-            commit(deferred.key, deferred.point);
+    // the pointer arrived at a row wanting `key` open — undefined from a row with
+    // no submenu, i.e. "close whatever is"
+    const hoverSubmenu = (key, point) => {
+        if (key === openKey) {
+            cancelPending();
         }
-        else if (aim === 'inside') {
-            // still traveling, so the grace starts over — it is there to catch a
-            // pointer that stops, and this one has not
-            defer(deferred.key, deferred.point);
+        else if (openKey === undefined || aimAt(point) === 'outside') {
+            // nothing to protect, or a pointer that was never heading for the open
+            // panel: either way there is nothing to wait for
+            commit(key, point);
         }
-    });
-    useEffect(() => {
-        if (openSubmenu === undefined) {
-            return;
+        else {
+            defer(key, point);
         }
-        document.addEventListener('mousemove', onPointerMove);
-        return () => {
-            document.removeEventListener('mousemove', onPointerMove);
-        };
-    }, [openSubmenu, onPointerMove]);
+    };
     return {
-        openSubmenu,
         panelRef,
         setSubmenu: commit,
-        // the pointer reached the open panel, so whatever was scheduled is stale
-        keepSubmenuOpen: cancelPending,
-        // the pointer arrived at a row wanting `key` open — undefined from a row
-        // with no submenu, i.e. "close whatever is"
-        hoverSubmenu: (key, point) => {
-            if (key === openSubmenu) {
-                cancelPending();
+        cancelPending,
+        hoverSubmenu,
+        // every row a pointer can rest on asks for the open panel to go away; only
+        // a row that owns a submenu, or the panel itself, keeps one up
+        closeOnHover: (event) => {
+            hoverSubmenu(undefined, { x: event.clientX, y: event.clientY });
+        },
+        // Watched only while a panel is up, and only a deferred change is waiting
+        // on it. A row's own hover cannot answer this alone: the pointer can leave
+        // the cone without ever crossing into another row, by turning around inside
+        // the one it is already on.
+        onPointerMove: (event) => {
+            const deferred = pending;
+            if (!deferred) {
+                return;
             }
-            else if (openSubmenu === undefined || aimAt(point) === 'outside') {
-                // nothing to protect, or a pointer that was never heading for the open
-                // panel: either way there is nothing to wait for
-                commit(key, point);
+            const aim = aimAt({ x: event.clientX, y: event.clientY });
+            if (aim === 'outside') {
+                commit(deferred.key, deferred.point);
             }
-            else {
-                defer(key, point);
+            else if (aim === 'inside') {
+                // still traveling, so the grace starts over — it is there to catch a
+                // pointer that stops, and this one has not
+                defer(deferred.key, deferred.point);
             }
         },
     };
 }
+function useSubmenuHover() {
+    const [openSubmenu, setOpenSubmenu] = useState();
+    const [hover] = useState(() => createSubmenuHover(setOpenSubmenu));
+    useEffect(() => hover.cancelPending, [hover]);
+    useEffect(() => {
+        if (openSubmenu === undefined) {
+            return;
+        }
+        document.addEventListener('mousemove', hover.onPointerMove);
+        return () => {
+            document.removeEventListener('mousemove', hover.onPointerMove);
+        };
+    }, [openSubmenu, hover]);
+    return { openSubmenu, hover };
+}
 // Identity of a submenu row, used both as its React key and to remember which
 // submenu is open. Deliberately not the array index: the items are re-derived on
 // every observable change (a checkbox toggle can add or drop a row above), so an
@@ -286,12 +293,12 @@ function DisabledTooltip({ item, children, }) {
 // toggle), whose content stops its own click so using it doesn't also open the
 // submenu. Both go through `MenuItemTrailing`, so they land in the columns the
 // clickable rows reserve rather than in a hand-assembled copy of them.
-function CascadingSubmenu({ item, itemKey, inset, columns, hover, onNavigateBack, }) {
+const CascadingSubmenu = memo(function CascadingSubmenu({ item, itemKey, inset, columns, open, hover, onNavigateBack, }) {
     const { zIndex } = useCascadingMenu();
     const [anchorEl, setAnchorEl] = useState(null);
     // a rebuild can disable the row while its panel is up, and a disabled row has
     // no way left to close it
-    const isOpen = hover.openSubmenu === itemKey && !item.disabled;
+    const isOpen = open && !item.disabled;
     return (_jsxs(_Fragment, { children: [_jsx(DisabledTooltip, { item: item, children: _jsxs(MenuItem, { ref: setAnchorEl, "data-testid": makeTestId('submenu', item.label), disabled: item.disabled, "aria-haspopup": "menu", "aria-expanded": isOpen, 
                     // keeps the panel visually attached to the row it hangs off: that
                     // row's own hover highlight is gone the moment the pointer moves
@@ -309,21 +316,17 @@ function CascadingSubmenu({ item, itemKey, inset, columns, hover, onNavigateBack
                             e.stopPropagation();
                             onNavigateBack?.();
                         }
-                    }, children: [_jsx(MenuItemLeadingIcon, { Icon: item.icon }), _jsx(ListItemText, { primary: item.label, inset: inset }), _jsx(MenuItemTrailing, { item: item, columns: columns })] }) }), _jsx(HoverMenu, { open: isOpen, anchorEl: anchorEl, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, zIndex: zIndex, 
-                // the pointer completed the trip, so drop the close a row it crossed on
-                // the way scheduled
-                onMouseEnter: hover.keepSubmenuOpen, 
-                // only while open: a panel MUI is still fading out is not something to
-                // aim at, and this list keeps one cone target for whichever submenu is
-                // up
-                paperRef: isOpen ? hover.panelRef : undefined, onClose: () => {
+                    }, children: [_jsx(MenuItemLeadingIcon, { Icon: item.icon }), _jsx(ListItemText, { primary: item.label, inset: inset }), _jsx(MenuItemTrailing, { item: item, columns: columns })] }) }), isOpen ? (_jsx(HoverMenu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, zIndex: zIndex, 
+                // the pointer completed the trip, so drop the close a row it crossed
+                // on the way scheduled
+                onMouseEnter: hover.cancelPending, paperRef: hover.panelRef, onClose: () => {
                     hover.setSubmenu(undefined);
                 }, children: _jsx(SubMenuList, { item: item, onNavigateBack: () => {
                         hover.setSubmenu(undefined);
                         anchorEl?.focus();
-                    } }) })] }));
-}
-// Resolves the rows inside the panel, which MUI mounts only while it is open:
+                    } }) })) : null] }));
+});
+// Resolves the rows inside the panel, which mounts only while it is open:
 // a function-form `subMenu` is not called by listing the parent menu. An
 // observer so the observables that builder reads re-render the open panel, the
 // way an array built in the root observer's render already did.
@@ -333,7 +336,7 @@ const SubMenuList = observer(function SubMenuList({ item, onNavigateBack, }) {
 // One clickable menu row: label (with optional leading icon) plus its trailing
 // value/help/adornment decorations. The menu-wide `columns` flags let every row
 // reserve matching decoration slots so the columns line up down the menu.
-function CascadingMenuItem({ item, inset, columns, onNavigateBack, onHover, }) {
+const CascadingMenuItem = memo(function CascadingMenuItem({ item, inset, columns, onNavigateBack, onHover, }) {
     const { closeAfterItemClick, onMenuItemClick, onCloseRoot } = useCascadingMenu();
     return (_jsx(DisabledTooltip, { item: item, children: _jsxs(MenuItem, { "data-testid": makeTestId('menuitem', item.label), disabled: item.disabled, 
             // A checkbox or radio row states its own value. The glyph
@@ -362,23 +365,17 @@ function CascadingMenuItem({ item, inset, columns, onNavigateBack, onHover, }) {
                     onNavigateBack?.();
                 }
             }, children: [_jsx(MenuItemLeadingIcon, { Icon: item.icon }), _jsx(ListItemText, { primary: item.label, secondary: item.subLabel, inset: inset }), _jsx(MenuItemTrailing, { item: item, columns: columns })] }) }));
-}
+});
 function CascadingMenuList({ menuItems, onNavigateBack, }) {
     const { classes, cx } = useStyles();
-    const hover = useSubmenuHover();
-    // every row a pointer can rest on asks for the open panel to go away; only a
-    // row that owns a submenu, or the panel itself, keeps one up. Whether the ask
-    // is granted now or waited out is the aim cone's call, which is why the
-    // pointer comes with it
-    const closeOnHover = (event) => {
-        hover.hoverSubmenu(undefined, { x: event.clientX, y: event.clientY });
-    };
-    const { hasIcon, columns } = getMenuColumnFlags(menuItems);
-    const sortedItems = menuItems.toSorted((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+    const { openSubmenu, hover } = useSubmenuHover();
+    const { closeOnHover } = hover;
+    const { hasIcon, columns } = useMemo(() => getMenuColumnFlags(menuItems), [menuItems]);
+    const sortedItems = useMemo(() => menuItems.toSorted((a, b) => (b.priority ?? 0) - (a.priority ?? 0)), [menuItems]);
     return (_jsx(_Fragment, { children: sortedItems.map((item, idx) => {
             if ('subMenu' in item) {
                 const key = submenuKey(item.label);
-                return (_jsx(CascadingSubmenu, { itemKey: key, item: item, inset: hasIcon && !item.icon, columns: columns, hover: hover, onNavigateBack: onNavigateBack }, key));
+                return (_jsx(CascadingSubmenu, { itemKey: key, item: item, inset: hasIcon && !item.icon, columns: columns, open: openSubmenu === key, hover: hover, onNavigateBack: onNavigateBack }, key));
             }
             if (item.type === 'divider') {
                 // eslint-disable-next-line @eslint-react/no-array-index-key -- dividers have no identifying field, list order is fixed

package/esm/ui/ErrorMessageStackTraceDialog.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { effectiveRenderer } from '@jbrowse/render-core/graphicsCapabilities';
 import { useGraphicsCapabilities } from '@jbrowse/render-core/useGraphicsCapabilities';
-import { hasSharedArrayBuffer } from '../util/stopToken.js';
 import { useFetch } from '../util/useFetch.js';
 import CopyToClipboardButton from './CopyToClipboardButton.js';
 import ErrorMessageStackTraceContents from './ErrorMessageStackTraceContents.js';
@@ -33,9 +32,6 @@ export default function ErrorMessageStackTraceDialog({ error, onClose, extra, })
     const glRendererInfo = graphicsCapabilities?.glRenderer
         ? `GL renderer: ${graphicsCapabilities.glRenderer}${graphicsCapabilities.softwareWebgl ? ' (SOFTWARE RASTERIZER)' : ''}`
         : '';
-    // Both paths cancel at await boundaries by posted message; SharedArrayBuffer
-    // additionally interrupts a synchronous worker loop mid-run.
-    const sabInfo = `Worker abort: postMessage${hasSharedArrayBuffer ? ' + SharedArrayBuffer' : ''}`;
     const session = window
         .JBrowseSession;
     const version = session?.version;
@@ -52,7 +48,6 @@ export default function ErrorMessageStackTraceDialog({ error, onClose, extra, })
         gpuInfo,
         glRendererInfo,
         rpcInfo,
-        sabInfo,
         `Cross-origin isolated: ${crossOriginIsolated}`,
         `CPU cores: ${navigator.hardwareConcurrency}`,
         `Device pixel ratio: ${window.devicePixelRatio}`,