@jbrowse/core 5.0.0-beta.1 → 5.0.0-beta.11

package/esm/ui/CascadingMenu.js

@@ -1,12 +1,11 @@
 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 { staysOpenOnClick } from './MenuTypes.js';
+import { resolveSubMenu, staysOpenOnClick } from './MenuTypes.js';
 import { hasMenuItemAdornment } from './menuItemAdornment.js';
 import { isAimedAtPanel } from './submenuAim.js';
 // Compact section headers so tall menus (e.g. a display's flat "Show..."
@@ -24,6 +23,12 @@ const useStyles = makeStyles()(theme => ({
         borderTop: `1px solid ${theme.palette.divider}`,
         marginTop: 4,
     },
+    // a leading subHeader has no rows above it to divide from, so the rule and
+    // its space would float against the menu's top edge
+    leadingSubHeader: {
+        borderTopWidth: 0,
+        marginTop: 0,
+    },
 }));
 const CascadingMenuContext = createContext(undefined);
 function useCascadingMenu() {
@@ -59,57 +64,65 @@ 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;
+    // where the pointer last was while a panel is up. A row that slides under a
+    // resting pointer — the menu grew a fetch later and MUI moved it back into
+    // the viewport, or rows landed above — gets a mouseenter at that same point,
+    // and it is the layout that moved, not the pointer, so it is no hover.
+    let lastPoint;
+    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;
+        lastPoint = point;
+        openKey = key;
         setOpenSubmenu(key);
     };
+    const restingUnderOpenPanel = (point) => openKey !== undefined &&
+        lastPoint !== undefined &&
+        point.x === lastPoint.x &&
+        point.y === lastPoint.y;
     // 'unmeasured' is its own answer, not a lenient 'inside': a cone pointing at
     // nothing would call every row crossed a veer-off, and a move handler that
     // re-armed on it would hold the panel open for as long as the pointer kept
     // 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(() => {
@@ -117,64 +130,120 @@ 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;
+    // 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();
         }
-        const aim = aimAt({ x: event.clientX, y: event.clientY });
-        if (aim === 'outside') {
-            commit(deferred.key, deferred.point);
+        else if (restingUnderOpenPanel(point)) {
+            return;
         }
-        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) => {
+            lastPoint = { x: event.clientX, y: event.clientY };
+            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);
             }
         },
     };
 }
-// 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
-// index-keyed "open" flag would follow the position rather than the submenu and
-// the open panel would jump to whichever row landed at that index.
-function submenuKey(label) {
-    return `subMenu-${label}`;
+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 };
+}
+// One key per row, unique WITHIN the level — the React key, and for a submenu row
+// also the identity of "which submenu is open".
+//
+// A row is named by its `id`, or by its label where it has none. 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 index-keyed "open" flag would follow
+// the position rather than the submenu and the open panel would jump to whichever
+// row landed at that index.
+//
+// A NAME THAT REPEATS TAKES AN OCCURRENCE SUFFIX, so the level's keys are unique
+// whatever its rows are called. Two ways a name repeats, and both shipped: a
+// `label` is a `React.ReactNode`, so an element interpolates to `[object Object]`
+// and a menu of them named every row the same — the favorites and recently-used
+// track dropdowns did — and a label can simply be shared, since a list may dedupe
+// on something other than its text, as the recent locations dedupe on the
+// location. Handling it here rather than asking every caller for an `id` means
+// neither case can reach React as one key for several rows; only the rows that
+// genuinely repeat depend on their order among each other, and `id` is then a way
+// to keep a row's identity across a reorder rather than a correctness obligation.
+//
+// The kind prefix is the render branch below: a submenu row and a clickable row
+// sharing a label draw different components, which must not share a key.
+function rowKeys(items) {
+    const seen = new Map();
+    return items.map(item => {
+        const kind = 'subMenu' in item
+            ? 'subMenu'
+            : item.type === 'divider' || item.type === 'subHeader'
+                ? item.type
+                : item.type === 'custom'
+                    ? 'custom'
+                    : 'menuitem';
+        // a divider has no identity beyond its position among the other dividers.
+        // `'id' in item` rather than `item.id`: a divider and a subHeader are their
+        // own interfaces and carry neither an `id` nor, for the divider, a label
+        const name = item.type === 'divider'
+            ? ''
+            : ('id' in item && item.id) || `${item.label}`;
+        const base = `${kind}-${name}`;
+        const seenBefore = seen.get(base) ?? 0;
+        seen.set(base, seenBefore + 1);
+        // The count LEADS, and every row carries one. A trailing suffix is drawn
+        // from the same alphabet as the label it disambiguates, so `x#1` beside two
+        // rows called `x` collided all over again — the second `x` took the first
+        // one's key. Leading, the count is the digits before the first `-` and the
+        // base is everything after, and `kind` always starts with a letter, so no
+        // two (count, base) pairs can spell one key.
+        return `${seenBefore}-${base}`;
+    });
 }
 // Where the aim cone's tip goes for a submenu opened from the keyboard, which
 // has no pointer to put it at: the middle of the row, so a pointer picked up
@@ -280,12 +349,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
@@ -303,26 +372,41 @@ 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(CascadingMenuList, { menuItems: item.subMenu, onNavigateBack: () => {
+                }, children: _jsx(SubMenuList, { item: item, onNavigateBack: () => {
                         hover.setSubmenu(undefined);
                         anchorEl?.focus();
-                    } }) })] }));
-}
+                    } }) })) : 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.
+const SubMenuList = observer(function SubMenuList({ item, onNavigateBack, }) {
+    return (_jsx(CascadingMenuList, { menuItems: resolveSubMenu(item), onNavigateBack: 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, onClick: () => {
+    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
+            // `MenuItemEndDecoration` swaps is an `aria-hidden` icon, so without
+            // these a screen reader reads "Curved lines" identically whether the
+            // setting is on or off, and a test has no way to ask but the MUI icon's
+            // internal testid.
+            role: item.type === 'checkbox'
+                ? 'menuitemcheckbox'
+                : item.type === 'radio'
+                    ? 'menuitemradio'
+                    : undefined, "aria-checked": item.type === 'checkbox' || item.type === 'radio'
+                ? item.checked
+                : undefined, onClick: () => {
                 // onCloseRoot runs before the callback, so item.onClick must NOT read
                 // model state that closing clears (e.g. a right-click menu's ephemeral
                 // hit/context fields): capture that state when the menu items are
@@ -337,38 +421,31 @@ 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 } = 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 { classes, cx } = useStyles();
+    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]);
+    // keyed after the sort, so an occurrence suffix counts up the level in the
+    // order it is drawn
+    const keys = useMemo(() => rowKeys(sortedItems), [sortedItems]);
     return (_jsx(_Fragment, { children: sortedItems.map((item, idx) => {
+            const key = keys[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
-                return _jsx(Divider, { component: "li" }, `divider-${idx}`);
+                return _jsx(Divider, { component: "li" }, key);
             }
             if (item.type === 'subHeader') {
-                return (_jsx(ListSubheader, { className: classes.subHeader, onMouseEnter: closeOnHover, 
-                    // a leading subHeader has no rows above it to divide from, so drop
-                    // the divider rule that would otherwise float at the menu's top edge
-                    sx: idx === 0 ? { borderTop: 'none', marginTop: 0 } : undefined, children: item.label }, `subHeader-${item.label}`));
+                return (_jsx(ListSubheader, { className: cx(classes.subHeader, idx === 0 && classes.leadingSubHeader), onMouseEnter: closeOnHover, children: item.label }, key));
             }
             if (item.type === 'custom') {
-                return (_jsx(CustomMenuRow, { item: item, onHover: closeOnHover }, `custom-${item.label}`));
+                return _jsx(CustomMenuRow, { item: item, onHover: closeOnHover }, key);
             }
-            return (_jsx(CascadingMenuItem, { item: item, inset: hasIcon && !item.icon, columns: columns, onNavigateBack: onNavigateBack, onHover: closeOnHover }, `menuitem-${item.label}`));
+            return (_jsx(CascadingMenuItem, { item: item, inset: hasIcon && !item.icon, columns: columns, onNavigateBack: onNavigateBack, onHover: closeOnHover }, key));
         }) }));
 }
 const CascadingMenu = observer(function CascadingMenu({ onMenuItemClick, closeAfterItemClick = true, menuItems, open, onClose, anchorEl, anchorOrigin, transformOrigin, anchorReference, anchorPosition, style, }) {

package/esm/ui/DropDownMenu.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
-import { Button, alpha } from '@mui/material';
+import { Button } from '@mui/material';
 import { observer } from 'mobx-react';
 import { makeStyles } from '../util/tss-react/index.js';
 import CascadingMenuButton from './CascadingMenuButton.js';
+import { alpha } from './palette.js';
 const useStyles = makeStyles()(theme => ({
     buttonRoot: {
         '&:hover': {

package/esm/ui/ErrorBanner.js

@@ -6,7 +6,7 @@ import { parseError } from './parseError.js';
 const useStyles = makeStyles()(theme => ({
     bg: {
         background: theme.palette.divider,
-        border: '1px solid black',
+        border: `1px solid ${theme.palette.text.primary}`,
         margin: 20,
     },
     message: {

package/esm/ui/ErrorBoundary.d.ts

@@ -11,8 +11,8 @@ interface Props {
     FallbackComponent: React.FC<FallbackProps>;
     /**
      * clear the caught error when any of these changes, compared with `Object.is`
-     * element by element. For the cause a caller can name — the display was
-     * swapped, the view was replaced — so a banner does not outlive it.
+     * element by element. For the cause a caller can name, so a banner does not
+     * outlive it.
      */
     resetKeys?: unknown[];
     /** runs before the error clears, on either reset path */

package/esm/ui/ErrorMessageStackTraceContents.js

@@ -1,7 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography, alpha } from '@mui/material';
+import { Typography } from '@mui/material';
 import { makeStyles } from '../util/tss-react/index.js';
 import ExternalLink from './ExternalLink.js';
+import { alpha } from './palette.js';
 const EMAIL = 'jbrowse2@berkeley.edu';
 const useStyles = makeStyles()(theme => ({
     pre: {

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';
@@ -15,12 +14,11 @@ export default function ErrorMessageStackTraceDialog({ error, onClose, extra, })
     const errorText = error ? `${error}` : '';
     const stackTrace = formatErrorStack(error);
     const { data: mappedStackTrace, isLoading } = useFetch(['mappedStackTrace', stackTrace], () => mapStackTrace(stackTrace));
-    // The rung actually drawing, not a list of the ones available: it already says
-    // which rungs exist, since Canvas2D means neither and WebGL2 means no WebGPU.
-    // It accounts for a `?renderer=` pin and for the GPU banner's "disable GPU",
-    // which matters most in exactly this dialog — a user reporting a rendering bug
-    // has often already clicked that button, and until this moved to render-core
-    // the report they sent still said WebGL2.
+    // The rung createGpuHal built, not a list of the ones available: it already
+    // says which rungs exist, since Canvas2D means neither and WebGL2 means no
+    // WebGPU. It also honours the GPU banner's "disable GPU", which matters most
+    // in exactly this dialog — a user reporting a rendering bug has often already
+    // clicked it.
     const graphicsInfo = graphicsCapabilities
         ? `Graphics: ${effectiveRenderer(graphicsCapabilities)}`
         : '';
@@ -34,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;
@@ -53,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}`,

package/esm/ui/ExportSvgDialog.d.ts

@@ -1,7 +1,7 @@
 import type { BaseExportSvgOptions } from './BaseExportSvgDialog.tsx';
 export default function ExportSvgDialog({ model, handleClose, }: {
     model: {
-        exportSvg(opts: BaseExportSvgOptions): Promise<void>;
+        exportSvg(opts: BaseExportSvgOptions): Promise<unknown>;
     };
     handleClose: () => void;
 }): import("react").JSX.Element;

package/esm/ui/FileDropZone.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
-import { Typography, alpha } from '@mui/material';
+import { Typography } from '@mui/material';
 import { makeStyles } from '../util/tss-react/index.js';
+import { alpha } from './palette.js';
 const useStyles = makeStyles()(theme => ({
     dropZone: {
         textAlign: 'center',