@jbrowse/display-ui 5.0.0-beta.11 → 5.0.0-beta.14

package/esm/embed/index.d.ts

@@ -2,10 +2,15 @@ import type { PanZoomView } from '@jbrowse/core/util/usePanZoom';
 import type { ViewStatus as ViewStatusValue } from '@jbrowse/core/util/viewStatus';
 import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
 import type React from 'react';
+export { EngineBoundary } from './engineBoundary.tsx';
+export type { EngineFallbackProps } from './engineBoundary.tsx';
 export { Legend } from './legend.tsx';
 export { LocationBox, useLocationBox } from './location.tsx';
+export { Notifications } from './notifications.tsx';
 export { EmbedProvider } from './provider.tsx';
 export { Highlights, RegionSeams, Scalebar } from './regions.tsx';
+export { SearchPicker } from './searchPicker.tsx';
+export { NavButton, Toolbar } from './toolbar.tsx';
 export interface EmbedDisplay {
     height: number;
     RenderingComponent: React.ComponentType<{
@@ -30,6 +35,7 @@ export declare const Track: ({ view, trackId, }: {
     trackId: string;
 }) => React.JSX.Element | null;
 export interface ResizableDisplay {
+    height: number;
     setResizing: (resizing: boolean) => void;
     resizeHeight: (distance: number) => unknown;
 }

package/esm/embed/index.js

@@ -7,10 +7,14 @@ import { usePanZoom } from '@jbrowse/core/util/usePanZoom';
 import { useResizeDrag } from '@jbrowse/core/util/useResizeDrag';
 import { observer } from 'mobx-react';
 import { TrackOverlaySlot } from '../trackOverlay/TrackOverlaySlot.js';
+export { EngineBoundary } from './engineBoundary.js';
 export { Legend } from './legend.js';
 export { LocationBox, useLocationBox } from './location.js';
+export { Notifications } from './notifications.js';
 export { EmbedProvider } from './provider.js';
 export { Highlights, RegionSeams, Scalebar } from './regions.js';
+export { SearchPicker } from './searchPicker.js';
+export { NavButton, Toolbar } from './toolbar.js';
 export const Track = observer(function Track({ view, trackId, }) {
     const display = view.getTrack(trackId)?.activeDisplay;
     if (!display) {
@@ -19,6 +23,7 @@ export const Track = observer(function Track({ view, trackId, }) {
     const { RenderingComponent } = display;
     return (_jsx(TrackOverlaySlot, { zIndex: 3, style: { height: display.height }, children: _jsx("div", { style: { position: 'absolute', inset: 0, contain: 'strict' }, children: _jsx(Suspense, { fallback: null, children: _jsx(RenderingComponent, { model: display, onHorizontalScroll: view.horizontalScroll }) }) }) }));
 });
+const KEYBOARD_RESIZE_STEP = 10;
 export const ResizeHandle = observer(function ResizeHandle({ view, trackId, style, }) {
     const display = view.getTrack(trackId)?.activeDisplay;
     const props = useResizeDrag({
@@ -32,7 +37,17 @@ export const ResizeHandle = observer(function ResizeHandle({ view, trackId, styl
             display?.setResizing(false);
         },
     });
-    return display ? (_jsx("div", { ...props, "data-gesture-owner": "true", "aria-label": `Resize ${trackId}`, style: {
+    return display ? (_jsx("div", { ...props, "data-gesture-owner": "true", role: "separator", tabIndex: 0, "aria-orientation": "horizontal", "aria-label": `Resize ${trackId}`, "aria-valuenow": Math.round(display.height), onKeyDown: event => {
+            const step = event.key === 'ArrowDown'
+                ? KEYBOARD_RESIZE_STEP
+                : event.key === 'ArrowUp'
+                    ? -KEYBOARD_RESIZE_STEP
+                    : 0;
+            if (step) {
+                event.preventDefault();
+                display.resizeHeight(step);
+            }
+        }, style: {
             height: 4,
             cursor: 'row-resize',
             touchAction: 'none',
@@ -45,11 +60,11 @@ export const TrackToggle = observer(function TrackToggle({ view, trackId, style,
                     void view.launchToggleTrack(trackId);
                 } }), children] }));
 });
-function ViewLoading({ message, progress, source }) {
+const ViewLoading = observer(function ViewLoading({ message, progress, source, }) {
     const slow = useSlowLoad();
     const stalled = useStalled(`${message}|${progress}|${source}`);
     return (_jsxs(_Fragment, { children: [slow ? message : 'Loading', !slow || progress === undefined ? null : (_jsx("progress", { value: progress, max: 1, style: { display: 'block', width: 300, maxWidth: '100%' } })), stalled && source ? (_jsxs("div", { style: { overflowWrap: 'anywhere' }, children: ["still waiting on ", source] })) : null] }));
-}
+});
 export const ViewStatus = observer(function ViewStatus({ view, style, }) {
     const { status } = view;
     return status.type === 'ready' ? null : (_jsx("div", { role: status.type === 'error' ? 'alert' : 'status', style: {

package/esm/embed/legend.js

@@ -8,7 +8,7 @@ function gradientCss({ stops }) {
         .map(({ color, opacity = 1, offset }) => `color-mix(in srgb, ${color} ${Math.round(opacity * 100)}%, transparent) ${offset * 100}%`)
         .join(', ')})`;
 }
-function Row({ item }) {
+const Row = observer(function Row({ item }) {
     const { gradient, label, hidden } = item;
     return gradient ? (_jsxs("span", { style: { display: 'inline-flex', alignItems: 'center', gap: 4 }, children: [label, _jsx("span", { children: gradient.minLabel }), _jsx("span", { style: {
                     width: 80,
@@ -21,7 +21,7 @@ function Row({ item }) {
             opacity: hidden ? 0.5 : undefined,
             textDecoration: hidden ? 'line-through' : undefined,
         }, children: [legendSwatches(item).map(swatch => (_jsx("svg", { "aria-hidden": true, width: SWATCH, height: SWATCH, children: _jsx(LegendSwatchGlyph, { swatch: swatch, size: SWATCH }) }, swatch.color))), label] }));
-}
+});
 function legendSpecIn(display) {
     return display && typeof display === 'object' && 'legendSpec' in display
         ? display.legendSpec

package/esm/embed/location.d.ts

@@ -1,3 +1,4 @@
+import type { SearchPickerView } from './searchPicker.tsx';
 import type React from 'react';
 export interface LocationView {
     coarseVisibleLocStrings: string;
@@ -12,6 +13,6 @@ export declare function useLocationBox(view: LocationView): {
     go(input?: string): void;
 };
 export declare const LocationBox: ({ view, style, }: {
-    view: LocationView;
+    view: LocationView & SearchPickerView;
     style?: React.CSSProperties;
 }) => React.JSX.Element;

package/esm/embed/location.js

@@ -1,6 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from 'react';
 import { observer } from 'mobx-react';
+import { SearchPicker } from './searchPicker.js';
 export function useLocationBox(view) {
     const [draft, setDraft] = useState();
     const [pending, setPending] = useState(false);
@@ -46,20 +47,20 @@ export function useLocationBox(view) {
 }
 export const LocationBox = observer(function LocationBox({ view, style, }) {
     const box = useLocationBox(view);
-    return (_jsxs("form", { style: {
-            display: 'flex',
-            flexWrap: 'wrap',
-            alignItems: 'center',
-            gap: 4,
-            ...style,
-        }, onSubmit: event => {
-            event.preventDefault();
-            box.go();
-        }, children: [_jsx("input", { "aria-label": "Location", value: box.value, size: 38, style: { font: 'inherit', padding: '2px 4px' }, onChange: event => {
-                    box.edit(event.target.value);
-                }, onKeyDown: event => {
-                    if (event.key === 'Escape') {
-                        box.reset();
-                    }
-                } }), _jsx("button", { type: "submit", disabled: box.pending, style: { font: 'inherit' }, children: "Go" }), box.error ? (_jsx("span", { role: "alert", children: box.error instanceof Error ? box.error.message : String(box.error) })) : null] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("form", { style: {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    gap: 4,
+                    ...style,
+                }, onSubmit: event => {
+                    event.preventDefault();
+                    box.go();
+                }, children: [_jsx("input", { "aria-label": "Location", value: box.value, size: 38, style: { font: 'inherit', padding: '2px 4px' }, onChange: event => {
+                            box.edit(event.target.value);
+                        }, onKeyDown: event => {
+                            if (event.key === 'Escape') {
+                                box.reset();
+                            }
+                        } }), _jsx("button", { type: "submit", disabled: box.pending, style: { font: 'inherit' }, children: "Go" }), box.error ? (_jsx("span", { role: "alert", children: box.error instanceof Error ? box.error.message : String(box.error) })) : null] }), _jsx(SearchPicker, { view: view })] }));
 });

package/esm/embed/notifications.d.ts

@@ -0,0 +1,29 @@
+import type React from 'react';
+export interface NotificationsSession {
+    snackbarMessages: readonly {
+        message: string;
+        level?: string;
+        actions?: readonly {
+            name: React.ReactNode;
+            onClick: () => void;
+        }[];
+    }[];
+    popSnackbarMessage: () => unknown;
+    queueOfDialogs: readonly unknown[];
+    removeActiveDialog: () => void;
+}
+/**
+ * Draws the two session channels a host with its own UI otherwise drops: the
+ * latest of `session.snackbarMessages`, where a failed navigation, track launch
+ * or config lands, and a line for each dialog JBrowse queued, which only a
+ * Material host can open. A name search's picker is not one: it is
+ * `view.searchPicker`, drawn by `SearchPicker`.
+ *
+ * `EmbedProvider` mounts one below its children. Pass it
+ * `notifications={false}` to place this elsewhere or to draw the two queues
+ * yourself.
+ */
+export declare const Notifications: ({ session, style, }: {
+    session: NotificationsSession;
+    style?: React.CSSProperties;
+}) => React.JSX.Element;

package/esm/embed/notifications.js

@@ -0,0 +1,38 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+import { observer } from 'mobx-react';
+/**
+ * Draws the two session channels a host with its own UI otherwise drops: the
+ * latest of `session.snackbarMessages`, where a failed navigation, track launch
+ * or config lands, and a line for each dialog JBrowse queued, which only a
+ * Material host can open. A name search's picker is not one: it is
+ * `view.searchPicker`, drawn by `SearchPicker`.
+ *
+ * `EmbedProvider` mounts one below its children. Pass it
+ * `notifications={false}` to place this elsewhere or to draw the two queues
+ * yourself.
+ */
+export const Notifications = observer(function Notifications({ session, style, }) {
+    const palette = usePalette();
+    const latest = session.snackbarMessages.at(-1);
+    const queued = session.queueOfDialogs.length;
+    const row = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8,
+        marginTop: 8,
+        padding: '4px 8px',
+        fontSize: '0.8rem',
+        colorScheme: palette.mode,
+        color: palette.text.primary,
+        background: `color-mix(in srgb, ${palette.text.primary} 8%, ${palette.background.paper})`,
+    };
+    return (_jsxs(_Fragment, { children: [latest ? (_jsxs("div", { role: latest.level === 'error' ? 'alert' : 'status', "data-testid": "embed-notification", style: { ...row, ...style }, children: [_jsx("span", { style: { flex: 1, overflowWrap: 'anywhere' }, children: latest.message }), latest.actions
+                        // 'report' opens the stack-trace dialog, which is Material
+                        ?.filter(action => action.name !== 'report')
+                        .map((action, i) => (_jsx("button", { type: "button", onClick: action.onClick, children: action.name }, i))), _jsx("button", { type: "button", "aria-label": "Dismiss notification", onClick: () => {
+                            session.popSnackbarMessage();
+                        }, children: "\u2715" })] })) : null, queued ? (_jsxs("div", { role: "status", "data-testid": "queued-dialog-notice", style: { ...row, ...style }, children: [_jsxs("span", { style: { flex: 1 }, children: ["JBrowse queued ", queued, " dialog", queued > 1 ? 's' : '', ", and this page draws none."] }), _jsx("button", { type: "button", onClick: () => {
+                            session.removeActiveDialog();
+                        }, children: "Dismiss" })] })) : null] }));
+});

package/esm/embed/provider.d.ts

@@ -1,11 +1,13 @@
 import type { DisplayChromeOverlays } from '../chromeOverlays.ts';
 import type { TrackControlComponent } from '../trackControl/types.ts';
+import type { NotificationsSession } from './notifications.tsx';
 import type { ThemeModeSession } from '@jbrowse/core/ui/PaletteContext';
 import type React from 'react';
-export declare function EmbedProvider({ session, mode, overlays, trackControl, children, }: {
-    session: ThemeModeSession;
+export declare const EmbedProvider: ({ session, mode, overlays, trackControl, notifications, children, }: {
+    session: ThemeModeSession & NotificationsSession;
     mode?: 'light' | 'dark';
     overlays?: Partial<DisplayChromeOverlays>;
     trackControl?: TrackControlComponent;
+    notifications?: boolean;
     children: React.ReactNode;
-}): React.JSX.Element;
+}) => React.JSX.Element;

package/esm/embed/provider.js

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SessionPaletteProvider } from '@jbrowse/core/ui/PaletteContext';
+import { observer } from 'mobx-react';
 import DisplayUIProvider from '../DisplayUIProvider.js';
-export function EmbedProvider({ session, mode, overlays, trackControl, children, }) {
-    return (_jsx(SessionPaletteProvider, { session: session, mode: mode, children: _jsx(DisplayUIProvider, { overlays: overlays, trackControl: trackControl, children: children }) }));
-}
+import { Notifications } from './notifications.js';
+export const EmbedProvider = observer(function EmbedProvider({ session, mode, overlays, trackControl, notifications = true, children, }) {
+    return (_jsx(SessionPaletteProvider, { session: session, mode: mode, children: _jsxs(DisplayUIProvider, { overlays: overlays, trackControl: trackControl, children: [children, notifications ? _jsx(Notifications, { session: session }) : null] }) }));
+});

package/esm/embed/regions.d.ts

@@ -1,3 +1,4 @@
+import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
 import type React from 'react';
 export interface RegionSeamsView {
     staticBlocksTranslateX: number;
@@ -28,7 +29,7 @@ export interface ScalebarView {
         caption?: string;
     };
 }
-export interface HighlightsView {
+export interface HighlightsView extends IStateTreeNode {
     highlights: readonly {
         assemblyName?: string;
         refName: string;
@@ -47,7 +48,7 @@ export declare const RegionSeams: ({ view, }: {
 }) => React.JSX.Element;
 export declare const Highlights: ({ view, }: {
     view: HighlightsView;
-}) => (React.JSX.Element | null)[];
+}) => (React.JSX.Element | null)[] | null;
 export declare const Scalebar: ({ view, style, ...props }: {
     view: ScalebarView;
 } & React.ComponentProps<'div'>) => React.JSX.Element;

package/esm/embed/regions.js

@@ -1,13 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { highlightKey } from '@jbrowse/core/util/highlights';
+import { getSession } from '@jbrowse/core/util/mstUtils';
 import { observer } from 'mobx-react';
-const spanFill = {
-    seam: 'color-mix(in srgb, CanvasText 45%, Canvas)',
-    boundary: 'color-mix(in srgb, CanvasText 12%, Canvas)',
-    elided: 'color-mix(in srgb, CanvasText 30%, Canvas)',
-};
+const spanInk = { seam: 45, boundary: 12, elided: 30 };
 export const RegionSeams = observer(function RegionSeams({ view, }) {
+    const { text, background } = usePalette();
     return (_jsx("div", { "aria-hidden": true, "data-region-seams": true, style: {
             position: 'absolute',
             top: 0,
@@ -22,11 +20,15 @@ export const RegionSeams = observer(function RegionSeams({ view, }) {
                 bottom: 0,
                 left: x,
                 width,
-                background: spanFill[kind],
+                background: `color-mix(in srgb, ${text.primary} ${spanInk[kind]}%, ${background.default})`,
             } }, key))) }));
 });
 export const Highlights = observer(function Highlights({ view, }) {
     const palette = usePalette();
+    const { highlightsVisible, highlightLabelsVisible } = getSession(view);
+    if (!highlightsVisible) {
+        return null;
+    }
     return view.highlights.map((highlight, i) => {
         const coords = view.getHighlightCoords(highlight);
         return coords ? (_jsx("div", { "data-testid": "highlight-band", style: {
@@ -40,7 +42,7 @@ export const Highlights = observer(function Highlights({ view, }) {
                 pointerEvents: 'none',
                 background: highlight.color ??
                     `color-mix(in srgb, ${palette.highlight.main} 20%, transparent)`,
-            }, children: highlight.label ? (_jsx("span", { style: {
+            }, children: highlight.label && highlightLabelsVisible ? (_jsx("span", { style: {
                     position: 'absolute',
                     top: 0,
                     left: 3,

package/esm/embed/searchPicker.d.ts

@@ -0,0 +1,24 @@
+import type React from 'react';
+export interface SearchPickerView {
+    searchPicker?: {
+        query: string;
+        rows: readonly {
+            id: string;
+            label: string;
+            location: string;
+            trackName: string;
+        }[];
+        pick: (id: string) => Promise<unknown>;
+    };
+    closeSearchPicker: () => void;
+}
+/**
+ * Lists the places a name search points at when it matches several and none
+ * exactly, which `view.navToLocString` leaves to the host instead of
+ * navigating. Draws nothing until a search sets `view.searchPicker`. A
+ * `LocationBox` mounts one under itself.
+ */
+export declare const SearchPicker: ({ view, style, }: {
+    view: SearchPickerView;
+    style?: React.CSSProperties;
+}) => React.JSX.Element | null;

package/esm/embed/searchPicker.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+/**
+ * Lists the places a name search points at when it matches several and none
+ * exactly, which `view.navToLocString` leaves to the host instead of
+ * navigating. Draws nothing until a search sets `view.searchPicker`. A
+ * `LocationBox` mounts one under itself.
+ */
+export const SearchPicker = observer(function SearchPicker({ view, style, }) {
+    const { searchPicker } = view;
+    return searchPicker ? (_jsxs("div", { role: "dialog", "aria-label": "Search results", "data-testid": "search-picker", style: { fontSize: '0.8rem', paddingBottom: 8, ...style }, children: [_jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [_jsxs("strong", { style: { flex: 1 }, children: ["\u201C", searchPicker.query, "\u201D matches ", searchPicker.rows.length, " places"] }), _jsx("button", { type: "button", "aria-label": "Close search results", onClick: view.closeSearchPicker, children: "\u2715" })] }), _jsx("ul", { style: { listStyle: 'none', margin: 0, padding: 0 }, children: searchPicker.rows.map(row => (_jsx("li", { children: _jsxs("button", { type: "button", style: { width: '100%', textAlign: 'left' }, onClick: () => {
+                            void searchPicker.pick(row.id);
+                        }, children: [_jsx("strong", { children: row.label }), " ", row.location, " ", row.trackName] }) }, row.id))) })] })) : null;
+});

package/esm/embed/toolbar.d.ts

@@ -0,0 +1,16 @@
+import type { IStateTreeNode } from '@jbrowse/mobx-state-tree';
+import type React from 'react';
+export declare const Toolbar: ({ style, children, }: {
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export interface NavView extends IStateTreeNode {
+    navToLocString: (input: string) => Promise<unknown>;
+}
+export declare const NavButton: ({ view, loc, onClick, style, children, }: {
+    view: NavView;
+    loc: string;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}) => React.JSX.Element;

package/esm/embed/toolbar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getSession } from '@jbrowse/core/util/mstUtils';
+import { observer } from 'mobx-react';
+export const Toolbar = observer(function Toolbar({ style, children, }) {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            alignItems: 'center',
+            gap: 12,
+            paddingBottom: 8,
+            fontSize: '0.85rem',
+            ...style,
+        }, children: children }));
+});
+export const NavButton = observer(function NavButton({ view, loc, onClick, style, children, }) {
+    return (_jsx("button", { type: "button", style: style, onClick: () => {
+            onClick?.();
+            view.navToLocString(loc).catch((e) => {
+                getSession(view).notifyError(`${e}`, e);
+            });
+        }, children: children ?? loc }));
+});

package/esm/index.d.ts

@@ -1,7 +1,7 @@
 export { default as DisplayUIProvider, resolveOverlays, } from './DisplayUIProvider.tsx';
 export { DisplayChromeOverlayProvider, useChromeOverlayOverride, } from './chromeOverlayContext.ts';
 export { default as plainChromeOverlays } from './plainChromeOverlays.tsx';
-export type { DisplayBackgroundProgressModel, DisplayChromeOverlays, DisplayErrorBarModel, DisplayLoadingOverlayModel, TooLargeMessageModel, } from './chromeOverlays.ts';
+export type { BackgroundProgressProps, DisplayChromeOverlays, ErrorBarProps, LoadingProps, RenderErrorProps, TooLargeProps, } from './chromeOverlays.ts';
 export { TrackControlProvider, useTrackControlOverride, } from './trackControl/trackControlContext.ts';
 export { default as plainTrackControl } from './trackControl/plainTrackControl.tsx';
 export { useTrackControlMenu } from './trackControl/useTrackControlMenu.tsx';

package/esm/isLiveModel.d.ts

@@ -1,21 +1,16 @@
 /**
  * #api
- * Whether an overlay's model can still be called into.
+ * Whether a display model can still be called into.
  *
- * The terminal states unmount the canvas, so a click landing after the track was
- * closed would otherwise run an action on a destroyed node — which is why both
- * overlay sets guard their one button with `isAlive`.
+ * The chrome's overlay slots guard every button with it: the terminal states
+ * unmount the canvas, so a click landing after the track was closed would
+ * otherwise run an action on a destroyed node.
  *
- * **`isAlive` alone is wrong here, and it throws rather than answering.** The
- * four model shapes in `chromeOverlays.ts` are structural on purpose ("A display
- * satisfies one by having the fields; no mixin has to be composed"), so a host
- * writing their own display over `DisplayChromeBase` may hand these components a
- * plain object. `isAlive` runs `assertIsStateTreeNode` and throws on one, inside
- * an event handler, where React logs it and moves on — leaving the Force load
- * button looking live and doing nothing, which is the exact state
- * `DisplayChromeOverlays.TooLarge` documents itself as existing to prevent.
- *
- * A plain object is never destroyed, so it is always callable. The liveness
- * question only exists for an MST node.
+ * **`isAlive` alone is wrong here, and it throws rather than answering.** A
+ * host writing their own display over `DisplayChromeBase` may hand the chrome a
+ * plain object, and `isAlive` runs `assertIsStateTreeNode`, which throws inside
+ * the click handler, where React logs it and moves on: a Force load button that
+ * looks live and does nothing. A plain object is never destroyed, so it is
+ * always callable.
  */
 export declare function isLiveModel(model: unknown): boolean;

package/esm/isLiveModel.js

@@ -1,23 +1,18 @@
 import { isAlive, isStateTreeNode } from '@jbrowse/mobx-state-tree';
 /**
  * #api
- * Whether an overlay's model can still be called into.
+ * Whether a display model can still be called into.
  *
- * The terminal states unmount the canvas, so a click landing after the track was
- * closed would otherwise run an action on a destroyed node — which is why both
- * overlay sets guard their one button with `isAlive`.
+ * The chrome's overlay slots guard every button with it: the terminal states
+ * unmount the canvas, so a click landing after the track was closed would
+ * otherwise run an action on a destroyed node.
  *
- * **`isAlive` alone is wrong here, and it throws rather than answering.** The
- * four model shapes in `chromeOverlays.ts` are structural on purpose ("A display
- * satisfies one by having the fields; no mixin has to be composed"), so a host
- * writing their own display over `DisplayChromeBase` may hand these components a
- * plain object. `isAlive` runs `assertIsStateTreeNode` and throws on one, inside
- * an event handler, where React logs it and moves on — leaving the Force load
- * button looking live and doing nothing, which is the exact state
- * `DisplayChromeOverlays.TooLarge` documents itself as existing to prevent.
- *
- * A plain object is never destroyed, so it is always callable. The liveness
- * question only exists for an MST node.
+ * **`isAlive` alone is wrong here, and it throws rather than answering.** A
+ * host writing their own display over `DisplayChromeBase` may hand the chrome a
+ * plain object, and `isAlive` runs `assertIsStateTreeNode`, which throws inside
+ * the click handler, where React logs it and moves on: a Force load button that
+ * looks live and does nothing. A plain object is never destroyed, so it is
+ * always callable.
  */
 export function isLiveModel(model) {
     return !isStateTreeNode(model) || isAlive(model);

package/esm/plainChromeOverlays.d.ts

@@ -7,8 +7,8 @@ import type { DisplayChromeOverlays } from './chromeOverlays.ts';
  *
  * `DisplayUIProvider` installs this by default, so mount that rather than
  * naming this — reach for it directly only to wrap a state or to build a
- * context value by hand. Colours come from `currentColor` and the CSS system
- * colours, so the host's own cascade drives them in both light and dark.
+ * context value by hand. Colors come from `currentColor` and the CSS system
+ * colors, so the host's own cascade drives them in both light and dark.
  *
  * The `data-testid` values it renders are a contract four of JBrowse's test
  * systems key on, so a replacement set that keeps them can be driven by those

package/esm/plainChromeOverlays.js

@@ -4,8 +4,6 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { GPU_FALLBACK_LABEL, GPU_FALLBACK_TOOLTIP, disableGpuRendering, shouldOfferGpuFallback, } from '@jbrowse/core/ui/gpuFallback';
 import { progressLabel } from '@jbrowse/core/util/progress';
 import { observer } from 'mobx-react';
-import { isLiveModel } from './isLiveModel.js';
-import { tooLargeBannerText } from './tooLargeBannerText.js';
 import Tooltip from './tooltip/Tooltip.js';
 // A dependency-free `DisplayChromeOverlays` for embedders who don't want MUI:
 // no theme provider to mount, no emotion injected into the host page, and
@@ -37,9 +35,9 @@ const overlayBox = {
     pointerEvents: 'none',
     zIndex: 1,
 };
-// Nearly opaque on purpose. These sit over a canvas whose colours are not known
+// Nearly opaque on purpose. These sit over a canvas whose colors are not known
 // here, and a translucent chip over dense data was measurably hard to read.
-// `Canvas`/`CanvasText` are the CSS system colours, so this tracks the host's
+// `Canvas`/`CanvasText` are the CSS system colors, so this tracks the host's
 // light/dark mode without needing a theme object.
 const chip = {
     pointerEvents: 'auto',
@@ -98,7 +96,7 @@ function errorText(error) {
 // toolkit-free, but it paints the palette's `accent`; every rule in this
 // file reads the host's own cascade instead, so the bar is drawn here rather
 // than imported.
-function ProgressBar({ fraction }) {
+const ProgressBar = observer(function ProgressBar({ fraction, }) {
     const filled = Math.min(1, Math.max(0, fraction));
     return (_jsx("div", { role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(filled * 100), style: {
             overflow: 'hidden',
@@ -116,53 +114,33 @@ function ProgressBar({ fraction }) {
                 transform: `scaleX(${filled})`,
                 transition: 'transform 200ms linear',
             } }) }));
-}
+});
 const PlainRenderError = observer(function PlainRenderError({ error, onRetry, height, }) {
     return (_jsxs("div", { style: banner(height), role: "alert", children: [_jsx("span", { style: { wordBreak: 'break-word' }, children: errorText(error) }), _jsx("button", { type: "button", style: button, "data-testid": "reload_button", onClick: onRetry, children: "Retry" }), shouldOfferGpuFallback(error) ? (_jsx(Tooltip, { title: GPU_FALLBACK_TOOLTIP, children: _jsx("button", { type: "button", style: button, "data-testid": "use_canvas2d_button", onClick: () => {
                         disableGpuRendering();
                         onRetry();
                     }, children: GPU_FALLBACK_LABEL }) })) : null] }));
 });
-const PlainTooLarge = observer(function PlainTooLarge({ model, }) {
-    return (_jsxs("div", { style: banner(), role: "status", children: [_jsx("span", { style: { wordBreak: 'break-word' }, children: tooLargeBannerText(model.regionTooLargeReason, {
-                    zoomCanRelease: model.zoomCanReleaseGate,
-                }) }), _jsx("button", { type: "button", style: button, onClick: () => {
-                    // the banner unmounts the canvas, so a click landing after the track
-                    // was closed would otherwise call an action on a dead node. Not bare
-                    // `isAlive` — this model may be the plain object the contract invites,
-                    // which that throws on. See isLiveModel.ts.
-                    if (isLiveModel(model)) {
-                        model.forceLoad();
-                    }
-                }, children: "Force load" })] }));
+const PlainTooLarge = observer(function PlainTooLarge({ message, onForceLoad, }) {
+    return (_jsxs("div", { style: banner(), role: "status", children: [_jsx("span", { style: { wordBreak: 'break-word' }, children: message }), _jsx("button", { type: "button", style: button, onClick: onForceLoad, children: "Force load" })] }));
 });
-const PlainErrorBar = observer(function PlainErrorBar({ model, visible, }) {
-    return visible && model.error ? (_jsx("div", { style: overlayBox, role: "alert", children: _jsxs("div", { style: chip, children: [_jsx("span", { style: { wordBreak: 'break-word' }, children: errorText(model.error) }), _jsx("button", { type: "button", style: button, "data-testid": "reload_button", onClick: () => {
-                        model.reload();
-                    }, children: "Retry" })] }) })) : null;
+const PlainErrorBar = observer(function PlainErrorBar({ error, onRetry, }) {
+    return (_jsx("div", { style: overlayBox, role: onRetry ? 'alert' : 'status', children: _jsxs("div", { style: chip, children: [_jsx("span", { style: { wordBreak: 'break-word' }, children: errorText(error) }), onRetry ? (_jsx("button", { type: "button", style: button, "data-testid": "reload_button", onClick: onRetry, children: "Retry" })) : null] }) }));
 });
 // No anti-flash delay here, unlike the MUI set: that timing is a product
 // judgment JBrowse made for its own UI, and an embedder pacing their own
 // loading affordances shouldn't inherit it invisibly. Wrap this if you want it.
-const PlainLoading = observer(function PlainLoading({ model, visible, }) {
+const PlainLoading = observer(function PlainLoading({ visible, message, progress, canceled, onCancel, onRetry, }) {
     if (!visible) {
         return null;
     }
-    const { statusMessage, statusProgress, fetchCanceled } = model;
-    return (_jsx("div", { style: overlayBox, "data-testid": fetchCanceled ? 'loading-overlay-canceled' : 'loading-overlay', children: _jsx("div", { style: { ...chip, display: 'flex', alignItems: 'center' }, role: "status", children: fetchCanceled ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Loading canceled" }), model.reload ? (_jsx("button", { type: "button", style: button, "data-testid": "loading-overlay-retry", onClick: () => {
-                            model.reload?.();
-                        }, children: "Retry" })) : null] })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: statusProgress === undefined
-                            ? `${statusMessage || 'Loading'}...`
-                            : progressLabel(statusMessage || 'Loading', statusProgress) }), statusProgress === undefined ? null : (_jsx(ProgressBar, { fraction: statusProgress })), model.cancelFetchByUser ? (_jsx("button", { type: "button", style: button, "data-testid": "loading-overlay-cancel", onClick: () => {
-                            model.cancelFetchByUser?.();
-                        }, children: "Cancel" })) : null] })) }) }));
+    return (_jsx("div", { style: overlayBox, "data-testid": canceled ? 'loading-overlay-canceled' : 'loading-overlay', children: _jsx("div", { style: { ...chip, display: 'flex', alignItems: 'center' }, role: "status", children: canceled ? (_jsxs(_Fragment, { children: [_jsx("span", { children: "Loading canceled" }), onRetry ? (_jsx("button", { type: "button", style: button, "data-testid": "loading-overlay-retry", onClick: onRetry, children: "Retry" })) : null] })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: progress === undefined
+                            ? `${message || 'Loading'}...`
+                            : progressLabel(message || 'Loading', progress) }), progress === undefined ? null : (_jsx(ProgressBar, { fraction: progress })), onCancel ? (_jsx("button", { type: "button", style: button, "data-testid": "loading-overlay-cancel", onClick: onCancel, children: "Cancel" })) : null] })) }) }));
 });
-const PlainBackgroundProgress = observer(function PlainBackgroundProgress({ model, visible, }) {
-    // The only state that renders no positioned box of its own: the chrome
-    // anchors the bottom-right corner and shares it with the display's control
-    // row, so this is laid out there. Claiming `inset: 0` here would collapse
-    // against that box, and pinning to the corner would sit under the row.
-    return visible && model.statusMessage ? (_jsxs("div", { style: { ...chip, display: 'flex', alignItems: 'center' }, role: "status", "data-testid": "progress-chip", children: [_jsx("span", { children: progressLabel(model.statusMessage, model.statusProgress) }), model.statusProgress === undefined ? null : (_jsx(ProgressBar, { fraction: model.statusProgress }))] })) : null;
+const PlainBackgroundProgress = observer(function PlainBackgroundProgress({ message, progress, }) {
+    // in-flow: the chrome anchors the corner it shares with the control row
+    return (_jsxs("div", { style: { ...chip, display: 'flex', alignItems: 'center' }, role: "status", "data-testid": "progress-chip", children: [_jsx("span", { children: progressLabel(message || 'Loading', progress) }), progress === undefined ? null : _jsx(ProgressBar, { fraction: progress })] }));
 });
 /**
  * #api
@@ -172,8 +150,8 @@ const PlainBackgroundProgress = observer(function PlainBackgroundProgress({ mode
  *
  * `DisplayUIProvider` installs this by default, so mount that rather than
  * naming this — reach for it directly only to wrap a state or to build a
- * context value by hand. Colours come from `currentColor` and the CSS system
- * colours, so the host's own cascade drives them in both light and dark.
+ * context value by hand. Colors come from `currentColor` and the CSS system
+ * colors, so the host's own cascade drives them in both light and dark.
  *
  * The `data-testid` values it renders are a contract four of JBrowse's test
  * systems key on, so a replacement set that keeps them can be driven by those