@jbrowse/display-ui 5.0.0-beta.8 → 5.0.0-beta.9

package/esm/embed/index.d.ts

@@ -0,0 +1,70 @@
+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 { Legend } from './legend.tsx';
+export { LocationBox, useLocationBox } from './location.tsx';
+export { EmbedProvider } from './provider.tsx';
+export { Highlights, RegionSeams, Scalebar } from './regions.tsx';
+export interface EmbedDisplay {
+    height: number;
+    RenderingComponent: React.ComponentType<{
+        model: EmbedDisplay;
+        onHorizontalScroll?: (distance: number) => void;
+    }>;
+}
+export interface EmbedView extends PanZoomView, IStateTreeNode {
+    status: ViewStatusValue;
+    tracks: {
+        configuration: {
+            trackId: string;
+        };
+    }[];
+    getTrack: (trackId: string) => {
+        activeDisplay: EmbedDisplay;
+    } | undefined;
+    setWidth: (width: number) => void;
+}
+export declare const Track: ({ view, trackId, }: {
+    view: EmbedView;
+    trackId: string;
+}) => React.JSX.Element | null;
+export interface ResizableDisplay {
+    setResizing: (resizing: boolean) => void;
+    resizeHeight: (distance: number) => unknown;
+}
+export declare const ResizeHandle: ({ view, trackId, style, }: {
+    view: {
+        getTrack: (trackId: string) => {
+            activeDisplay: ResizableDisplay;
+        } | undefined;
+    };
+    trackId: string;
+    style?: React.CSSProperties;
+}) => React.JSX.Element;
+export declare const TrackToggle: ({ view, trackId, style, children, }: {
+    view: {
+        tracks: {
+            configuration: {
+                trackId: string;
+            };
+        }[];
+        launchToggleTrack: (trackId: string) => Promise<unknown>;
+    };
+    trackId: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}) => React.JSX.Element;
+export declare const ViewStatus: ({ view, style, }: {
+    view: {
+        status: ViewStatusValue;
+    };
+    style?: React.CSSProperties;
+}) => React.JSX.Element | null;
+export declare const TrackStack: ({ view, trackIds, renderTrack, style, children, }: {
+    view: EmbedView;
+    trackIds?: string[];
+    renderTrack?: (trackId: string) => React.ReactNode;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}) => React.JSX.Element;

package/esm/embed/index.js

@@ -0,0 +1,69 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, Suspense } from 'react';
+import { useWidthSetter } from '@jbrowse/core/util/hooks';
+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 { Legend } from './legend.js';
+export { LocationBox, useLocationBox } from './location.js';
+export { EmbedProvider } from './provider.js';
+export { Highlights, RegionSeams, Scalebar } from './regions.js';
+export const Track = observer(function Track({ view, trackId, }) {
+    const display = view.getTrack(trackId)?.activeDisplay;
+    if (!display) {
+        return null;
+    }
+    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 }) }) }) }));
+});
+export const ResizeHandle = observer(function ResizeHandle({ view, trackId, style, }) {
+    const display = view.getTrack(trackId)?.activeDisplay;
+    const props = useResizeDrag({
+        onDragStart: () => {
+            display?.setResizing(true);
+        },
+        onDrag: distance => {
+            display?.resizeHeight(distance);
+        },
+        onDragEnd: () => {
+            display?.setResizing(false);
+        },
+    });
+    return (_jsx("div", { ...props, "data-gesture-owner": "true", "aria-label": `Resize ${trackId}`, style: {
+            height: 4,
+            cursor: 'row-resize',
+            touchAction: 'none',
+            background: 'color-mix(in srgb, currentColor 20%, transparent)',
+            ...style,
+        } }));
+});
+export const TrackToggle = observer(function TrackToggle({ view, trackId, style, children, }) {
+    return (_jsxs("label", { style: style, children: [_jsx("input", { type: "checkbox", checked: view.tracks.some(t => t.configuration.trackId === trackId), onChange: () => {
+                    void view.launchToggleTrack(trackId);
+                } }), children] }));
+});
+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: {
+            padding: '10px 12px',
+            fontSize: '0.85rem',
+            opacity: 0.75,
+            ...style,
+        }, children: status.type === 'error'
+            ? `Could not load: ${status.error instanceof Error ? status.error.message : String(status.error)}`
+            : status.type === 'loading'
+                ? status.message
+                : 'Nothing to show yet' }));
+});
+export const TrackStack = observer(function TrackStack({ view, trackIds, renderTrack, style, children, }) {
+    const ref = useWidthSetter(view);
+    const { containerProps } = usePanZoom(ref, view);
+    const ids = trackIds ?? view.tracks.map(t => t.configuration.trackId);
+    return (_jsx("div", { ref: ref, ...containerProps, style: {
+            position: 'relative',
+            overflow: 'hidden',
+            cursor: 'grab',
+            ...style,
+        }, children: view.status.type === 'ready' ? (_jsxs(_Fragment, { children: [children, ids.map(id => renderTrack ? (_jsx(Fragment, { children: renderTrack(id) }, id)) : (_jsx(Track, { view: view, trackId: id }, id)))] })) : (_jsx(ViewStatus, { view: view })) }));
+});

package/esm/embed/legend.d.ts

@@ -0,0 +1,8 @@
+import type { LegendSpec } from '@jbrowse/core/ui/legendSpec';
+import type React from 'react';
+export declare const Legend: ({ display, style, }: {
+    display: {
+        legendSpec: LegendSpec;
+    };
+    style?: React.CSSProperties;
+}) => React.JSX.Element | null;

package/esm/embed/legend.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LegendSwatchGlyph } from '@jbrowse/core/ui/LegendSwatchGlyph';
+import { legendSwatches, nonEmptyLegendSections, } from '@jbrowse/core/ui/legendSpec';
+import { observer } from 'mobx-react';
+const SWATCH = 12;
+function gradientCss({ stops }) {
+    return `linear-gradient(to right, ${stops
+        .map(({ color, opacity = 1, offset }) => `color-mix(in srgb, ${color} ${Math.round(opacity * 100)}%, transparent) ${offset * 100}%`)
+        .join(', ')})`;
+}
+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,
+                    height: SWATCH,
+                    backgroundImage: gradientCss(gradient),
+                } }), _jsx("span", { children: gradient.maxLabel })] })) : (_jsxs("span", { style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 4,
+            opacity: hidden ? 0.5 : undefined,
+            textDecoration: hidden ? 'line-through' : undefined,
+        }, children: [legendSwatches(item).map((swatch, i) => (_jsx("svg", { "aria-hidden": true, width: SWATCH, height: SWATCH, children: _jsx(LegendSwatchGlyph, { swatch: swatch, size: SWATCH }) }, i))), label] }));
+}
+export const Legend = observer(function Legend({ display, style, }) {
+    const { legendSpec } = display;
+    const sections = nonEmptyLegendSections(legendSpec);
+    return sections.length ? (_jsxs("div", { "data-testid": "embed-legend", style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '2px 12px',
+            fontSize: '0.75rem',
+            ...style,
+        }, children: [legendSpec.title ? _jsx("strong", { children: legendSpec.title }) : null, sections.map(section => (_jsxs("span", { style: { display: 'contents' }, children: [sections.length > 1 && section.title ? (_jsx("strong", { children: section.title })) : null, section.note ? (_jsx("span", { style: { opacity: 0.7 }, children: section.note })) : null, section.items.map((item, i) => (_jsx(Row, { item: item }, i)))] }, section.id)))] })) : null;
+});

package/esm/embed/location.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+export interface LocationView {
+    coarseVisibleLocStrings: string;
+    navToLocString: (input: string) => Promise<unknown>;
+}
+export declare function useLocationBox(view: LocationView): {
+    value: string;
+    pending: boolean;
+    error: unknown;
+    edit(text: string): void;
+    reset(): void;
+    go(input?: string): void;
+};
+export declare const LocationBox: ({ view, style, }: {
+    view: LocationView;
+    style?: React.CSSProperties;
+}) => React.JSX.Element;

package/esm/embed/location.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { observer } from 'mobx-react';
+export function useLocationBox(view) {
+    const [draft, setDraft] = useState();
+    const [pending, setPending] = useState(false);
+    const [error, setError] = useState();
+    const requests = useRef(0);
+    const value = draft ?? view.coarseVisibleLocStrings;
+    return {
+        value,
+        pending,
+        error,
+        edit(text) {
+            setDraft(text);
+        },
+        reset() {
+            setDraft(undefined);
+            setError(undefined);
+        },
+        go(input = value) {
+            const request = ++requests.current;
+            const isLatest = () => request === requests.current;
+            setDraft(input);
+            setError(undefined);
+            setPending(true);
+            view
+                .navToLocString(input)
+                .then(() => {
+                if (isLatest()) {
+                    setDraft(undefined);
+                }
+            })
+                .catch((e) => {
+                if (isLatest()) {
+                    setError(e);
+                }
+            })
+                .finally(() => {
+                if (isLatest()) {
+                    setPending(false);
+                }
+            });
+        },
+    };
+}
+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] }));
+});

package/esm/embed/provider.d.ts

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

package/esm/embed/provider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SessionPaletteProvider } from '@jbrowse/core/ui/PaletteContext';
+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 }) }));
+}

package/esm/embed/regions.d.ts

@@ -0,0 +1,53 @@
+import type React from 'react';
+export interface RegionSeamsView {
+    staticBlocksTranslateX: number;
+    paddingSpans: readonly {
+        key: string;
+        x: number;
+        width: number;
+        kind: 'seam' | 'elided' | 'boundary';
+    }[];
+}
+export interface ScalebarView {
+    staticBlocks: {
+        totalWidthPx: number;
+    };
+    staticBlocksTranslateX: number;
+    scalebarLabels: readonly {
+        x: number;
+        label: string;
+    }[];
+    scalebarRefNameLabels: {
+        labels: readonly {
+            key: string;
+            text: string;
+            transform: number;
+            maxWidth: number;
+            paddingLeft: number;
+        }[];
+        caption?: string;
+    };
+}
+export interface HighlightsView {
+    highlights: readonly {
+        assemblyName?: string;
+        refName: string;
+        start: number;
+        end: number;
+        color?: string;
+        label?: string;
+    }[];
+    getHighlightCoords: (highlight: HighlightsView['highlights'][number]) => {
+        left: number;
+        width: number;
+    } | undefined;
+}
+export declare const RegionSeams: ({ view, }: {
+    view: RegionSeamsView;
+}) => React.JSX.Element;
+export declare const Highlights: ({ view, }: {
+    view: HighlightsView;
+}) => (React.JSX.Element | null)[];
+export declare const Scalebar: ({ view, style, ...props }: {
+    view: ScalebarView;
+} & React.ComponentProps<'div'>) => React.JSX.Element;

package/esm/embed/regions.js

@@ -0,0 +1,95 @@
+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 { 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)',
+};
+export const RegionSeams = observer(function RegionSeams({ view, }) {
+    return (_jsx("div", { "aria-hidden": true, "data-region-seams": true, style: {
+            position: 'absolute',
+            top: 0,
+            bottom: 0,
+            left: 0,
+            zIndex: 2,
+            pointerEvents: 'none',
+            transform: `translateX(${view.staticBlocksTranslateX}px)`,
+        }, children: view.paddingSpans.map(({ key, x, width, kind }) => (_jsx("div", { "data-span": kind, style: {
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: x,
+                width,
+                background: spanFill[kind],
+            } }, key))) }));
+});
+export const Highlights = observer(function Highlights({ view, }) {
+    const palette = usePalette();
+    return view.highlights.map((highlight, i) => {
+        const coords = view.getHighlightCoords(highlight);
+        return coords ? (_jsx("div", { "data-testid": "highlight-band", style: {
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: 0,
+                width: coords.width,
+                transform: `translateX(${coords.left}px)`,
+                zIndex: 3,
+                pointerEvents: 'none',
+                background: highlight.color ??
+                    `color-mix(in srgb, ${palette.highlight.main} 20%, transparent)`,
+            }, children: highlight.label ? (_jsx("span", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 3,
+                    fontSize: '0.7rem',
+                    whiteSpace: 'nowrap',
+                    color: palette.text.primary,
+                }, children: highlight.label })) : null }, highlightKey(highlight, i))) : null;
+    });
+});
+const SCALEBAR_HEIGHT = 20;
+export const Scalebar = observer(function Scalebar({ view, style, ...props }) {
+    const palette = usePalette();
+    const { scalebarLabels, scalebarRefNameLabels, staticBlocks, staticBlocksTranslateX, } = view;
+    const chip = {
+        position: 'absolute',
+        top: 0,
+        whiteSpace: 'nowrap',
+        background: palette.background.paper,
+        color: palette.text.primary,
+    };
+    return (_jsxs("div", { "data-gesture-owner": "true", ...props, style: {
+            position: 'relative',
+            height: SCALEBAR_HEIGHT,
+            lineHeight: `${SCALEBAR_HEIGHT}px`,
+            fontSize: '0.7rem',
+            overflow: 'clip',
+            userSelect: 'none',
+            borderBottom: `1px solid ${palette.divider}`,
+            ...style,
+        }, children: [_jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    height: '100%',
+                    width: staticBlocks.totalWidthPx,
+                    transform: `translateX(${Math.round(staticBlocksTranslateX)}px)`,
+                }, children: scalebarLabels.map(({ x, label }, i) => (_jsx("span", { style: {
+                        ...chip,
+                        left: x,
+                        transform: 'translateX(-50%)',
+                        padding: '0 3px',
+                    }, children: label }, i))) }), scalebarRefNameLabels.labels.map(({ key, text, transform, maxWidth, paddingLeft }) => (_jsx("span", { style: {
+                    ...chip,
+                    left: 0,
+                    transform: `translateX(${transform}px)`,
+                    maxWidth,
+                    paddingLeft,
+                    boxSizing: 'border-box',
+                    fontWeight: 'bold',
+                    overflow: 'clip',
+                }, children: text }, key))), scalebarRefNameLabels.caption === undefined ? null : (_jsx("span", { style: { ...chip, left: 0, fontWeight: 'bold' }, children: scalebarRefNameLabels.caption }))] }));
+});

package/esm/floatingLegendTop.d.ts

@@ -0,0 +1 @@
+export declare const FLOATING_LEGEND_TOP_PX = 10;

package/esm/floatingLegendTop.js

@@ -0,0 +1,2 @@
+// The key's own inset from the display's top-right corner.
+export const FLOATING_LEGEND_TOP_PX = 10;

package/esm/index.d.ts

@@ -7,7 +7,8 @@ export { default as plainTrackControl } from './trackControl/plainTrackControl.t
 export { useTrackControlMenu } from './trackControl/useTrackControlMenu.tsx';
 export type { TrackControlMenu } from './trackControl/useTrackControlMenu.tsx';
 export type { TrackControlComponent, TrackControlIcon, TrackControlOption, TrackControlProps, } from './trackControl/types.ts';
-export { default as FloatingLegend, FLOATING_LEGEND_TOP_PX, } from './FloatingLegend.tsx';
+export { default as FloatingLegend } from './FloatingLegend.tsx';
+export { FLOATING_LEGEND_TOP_PX } from './floatingLegendTop.ts';
 export type { LegendItem, LegendSection } from './FloatingLegend.tsx';
 export { FloatingSvgOverlay } from './FloatingSvgOverlay.tsx';
 export { default as Tooltip } from './tooltip/Tooltip.tsx';
@@ -21,16 +22,17 @@ export { TrackOverlaySlot } from './trackOverlay/TrackOverlaySlot.tsx';
 export { tooLargeBannerText } from './tooLargeBannerText.ts';
 export { isLiveModel } from './isLiveModel.ts';
 export { BOTTOM_RIGHT_CONTROLS_ORDER, BottomRightCornerContext, } from './bottomRightCorner.ts';
-export type { AxisSide, ValueScale, YAxis } from './valueScale.ts';
+export type { AxisSide, ValueScale, ValueScaleRule, YAxis, } from './valueScale.ts';
 export { AXIS_GUTTER_WIDTH_PX, axisPlotBox, clampStrokeInsideAxis, scoreToAxisY, } from './yScaleTicks.ts';
 export type { YScaleTicks } from './yScaleTicks.ts';
-export { YSCALEBAR_LABEL_OFFSET } from './yAxisConstants.ts';
-export { AXIS_RIGHT_INSET_PX, COMPACT_AXIS_HEIGHT, axisDrawn, axisGutterLeft, } from './axisPlacement.ts';
+export { DEFAULT_RULE_COLOR, SCORE_CAPTION_HEIGHT, YSCALEBAR_LABEL_OFFSET, } from './yAxisConstants.ts';
+export { AXIS_RIGHT_INSET_PX, COMPACT_AXIS_HEIGHT, axisDrawn, axisGutterLeft, axisGutterWidth, } from './axisPlacement.ts';
 export { default as AxisGutter } from './AxisGutter.tsx';
+export { AxisCaptionOverlay, default as AxisCaption } from './AxisCaption.tsx';
 export { default as YScaleBar } from './YScaleBar.tsx';
 export { default as YScaleBarOverlay } from './YScaleBarOverlay.tsx';
-export { default as ScoreDomainCaption, SCORE_CAPTION_HEIGHT, } from './ScoreDomainCaption.tsx';
-export { formatScore } from './formatScore.ts';
+export { default as ScoreDomainCaption } from './ScoreDomainCaption.tsx';
+export { formatScore } from '@jbrowse/core/util/numericUtils';
 export { CrossHatchLines, default as CrossHatches } from './CrossHatches.tsx';
 export { ScoreRuleLines, default as ScoreRules } from './ScoreRules.tsx';
 export type { ScoreRuleMark } from './ScoreRules.tsx';

package/esm/index.js

@@ -22,7 +22,8 @@ export { useTrackControlMenu } from './trackControl/useTrackControlMenu.js';
 // no UI toolkit, and it is chrome by the definition this package uses — a thing
 // a display draws that is not its data. `@jbrowse/plugin-linear-genome-view`
 // re-exports it, so its published name is unchanged.
-export { default as FloatingLegend, FLOATING_LEGEND_TOP_PX, } from './FloatingLegend.js';
+export { default as FloatingLegend } from './FloatingLegend.js';
+export { FLOATING_LEGEND_TOP_PX } from './floatingLegendTop.js';
 // The <svg> counterpart of that legend, for a display whose key is drawn by an
 // SVG-export path as well as on screen. Beside it for the same reasons — it
 // reaches no UI toolkit, and portaling chrome above the region masks is what
@@ -56,12 +57,13 @@ export { isLiveModel } from './isLiveModel.js';
 // with the chrome that happens to mount it.
 export { BOTTOM_RIGHT_CONTROLS_ORDER, BottomRightCornerContext, } from './bottomRightCorner.js';
 export { AXIS_GUTTER_WIDTH_PX, axisPlotBox, clampStrokeInsideAxis, scoreToAxisY, } from './yScaleTicks.js';
-export { YSCALEBAR_LABEL_OFFSET } from './yAxisConstants.js';
-export { AXIS_RIGHT_INSET_PX, COMPACT_AXIS_HEIGHT, axisDrawn, axisGutterLeft, } from './axisPlacement.js';
+export { DEFAULT_RULE_COLOR, SCORE_CAPTION_HEIGHT, YSCALEBAR_LABEL_OFFSET, } from './yAxisConstants.js';
+export { AXIS_RIGHT_INSET_PX, COMPACT_AXIS_HEIGHT, axisDrawn, axisGutterLeft, axisGutterWidth, } from './axisPlacement.js';
 export { default as AxisGutter } from './AxisGutter.js';
+export { AxisCaptionOverlay, default as AxisCaption } from './AxisCaption.js';
 export { default as YScaleBar } from './YScaleBar.js';
 export { default as YScaleBarOverlay } from './YScaleBarOverlay.js';
-export { default as ScoreDomainCaption, SCORE_CAPTION_HEIGHT, } from './ScoreDomainCaption.js';
-export { formatScore } from './formatScore.js';
+export { default as ScoreDomainCaption } from './ScoreDomainCaption.js';
+export { formatScore } from '@jbrowse/core/util/numericUtils';
 export { CrossHatchLines, default as CrossHatches } from './CrossHatches.js';
 export { ScoreRuleLines, default as ScoreRules } from './ScoreRules.js';

package/esm/plainChromeOverlays.d.ts

@@ -1,7 +1,7 @@
 import type { DisplayChromeOverlays } from './chromeOverlays.ts';
 /**
  * #api
- * The five `displayPhase` states drawn with no UI toolkit: no theme provider to
+ * The `displayPhase` states drawn with no UI toolkit: no theme provider to
  * mount, no emotion in the host page, and nothing that reads as a stray Material
  * widget inside someone else's design system.
  *

package/esm/plainChromeOverlays.js

@@ -19,9 +19,9 @@ import Tooltip from './tooltip/Tooltip.js';
 // host's own cascade drives them. Restyle by wrapping these, or write your own
 // set against the same interface.
 //
-// The testids are NOT cosmetic. `loading-overlay`, `loading-overlay-cancel`,
-// `loading-overlay-retry`, `progress-chip`, `reload_button` and
-// `use_canvas2d_button` are a contract across four test systems (jest, browser
+// The testids are NOT cosmetic. `loading-overlay`, `loading-overlay-canceled`,
+// `loading-overlay-cancel`, `loading-overlay-retry`, `progress-chip`,
+// `reload_button` and `use_canvas2d_button` are a contract across four test systems (jest, browser
 // tests, screenshot harness, jbrowse-img), so a replacement set that wants to
 // run the existing suites has to keep them.
 // The scrim and the too-large/error banners all need to sit over the canvas
@@ -149,7 +149,7 @@ const PlainLoading = observer(function PlainLoading({ model, visible, }) {
         return null;
     }
     const { statusMessage, statusProgress, fetchCanceled } = model;
-    return (_jsx("div", { style: overlayBox, "data-testid": "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: () => {
+    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'}...`
@@ -166,7 +166,7 @@ const PlainBackgroundProgress = observer(function PlainBackgroundProgress({ mode
 });
 /**
  * #api
- * The five `displayPhase` states drawn with no UI toolkit: no theme provider to
+ * The `displayPhase` states drawn with no UI toolkit: no theme provider to
  * mount, no emotion in the host page, and nothing that reads as a stray Material
  * widget inside someone else's design system.
  *

package/esm/tooltip/Tooltip.d.ts

@@ -25,9 +25,9 @@ interface TriggerProps {
  * Takes a single element child and clones it rather than wrapping it: the
  * controls that want a tooltip are absolutely positioned inside a legend or sit
  * in a flex row, where an extra `<span>` moves them. The child keeps its own
- * handlers — these compose on top of them. This is the same trigger pattern
- * MUI's own `Tooltip` uses, which is what the rest of JBrowse's chrome is built
- * on; the toolkit is what differs here, not the shape.
+ * handlers — these compose on top of them. MUI's `Tooltip`, which the rest of
+ * JBrowse's chrome is built on, uses the same trigger pattern; only the toolkit
+ * differs.
  *
  * ```tsx
  * <Tooltip title="Hide legend">

package/esm/tooltip/Tooltip.js

@@ -24,9 +24,9 @@ function compose(theirs, ours) {
  * Takes a single element child and clones it rather than wrapping it: the
  * controls that want a tooltip are absolutely positioned inside a legend or sit
  * in a flex row, where an extra `<span>` moves them. The child keeps its own
- * handlers — these compose on top of them. This is the same trigger pattern
- * MUI's own `Tooltip` uses, which is what the rest of JBrowse's chrome is built
- * on; the toolkit is what differs here, not the shape.
+ * handlers — these compose on top of them. MUI's `Tooltip`, which the rest of
+ * JBrowse's chrome is built on, uses the same trigger pattern; only the toolkit
+ * differs.
  *
  * ```tsx
  * <Tooltip title="Hide legend">

package/esm/trackControl/trackControlContext.d.ts

@@ -2,6 +2,6 @@ import type { TrackControlComponent } from './types.ts';
 export declare const TrackControlProvider: import("react").Provider<TrackControlComponent | undefined>;
 /**
  * The component a provider installed, or `undefined` for "nobody asked". The
- * caller supplies the default, which is what keeps this module free of one.
+ * caller supplies the default, so this module binds none.
  */
 export declare function useTrackControlOverride(): TrackControlComponent | undefined;

package/esm/trackControl/trackControlContext.js

@@ -6,9 +6,9 @@ import { createContext, use } from 'react';
 /**
  * Runtime override for how ambient track controls are drawn. **Defaults to
  * undefined, not to a component** — the same choice the overlay context makes,
- * for the same reason: a plain default would silently change the look of every
- * display that renders outside a provider (unit tests, SVG export,
- * breakpoint-split-view's overlayUtils), and that degradation is invisible.
+ * for the same reason: a plain default would change the look of every display
+ * that renders outside a provider (unit tests, SVG export,
+ * breakpoint-split-view's overlayUtils) while the display keeps working.
  * Undefined means "nobody asked", so JBrowse keeps its own look.
  *
  * This is the corner-control half of the bring-your-own-UI story; the status
@@ -16,14 +16,14 @@ import { createContext, use } from 'react';
  * context. Two contexts because two different things render them — the chrome
  * renders the status states, the display's own component renders the controls —
  * and folding them together would put entries in `DisplayChromeOverlays` that
- * `DisplayChromeBase` never uses. `DisplayUIProvider` mounts both, which is what
- * an embedder actually wants.
+ * `DisplayChromeBase` never uses. An embedder usually wants both, and
+ * `DisplayUIProvider` mounts both.
  */
 const TrackControlContext = createContext(undefined);
 export const TrackControlProvider = TrackControlContext.Provider;
 /**
  * The component a provider installed, or `undefined` for "nobody asked". The
- * caller supplies the default, which is what keeps this module free of one.
+ * caller supplies the default, so this module binds none.
  */
 export function useTrackControlOverride() {
     return use(TrackControlContext);

package/esm/trackOverlay/TrackOverlaySlot.d.ts

@@ -32,8 +32,8 @@
  * this component: JBrowse's own track container passes 100, which is positioned
  * above `PaddingBlocks` and below `TrackLabel` at 200, and means nothing to a
  * host whose masks sit at 2. A default would be a number that is right in one
- * layout and silently wrong in every other, and the failure — chrome painted
- * under a mask — is invisible until someone looks at the right zoom.
+ * layout and wrong in every other, and the failure — chrome painted under a
+ * mask — goes unseen until someone looks at the right zoom.
  *
  * The node takes no pointer events, so it does not eat the canvas's. Chrome that
  * wants them takes them back on its own positioned box; it also carries

package/esm/trackOverlay/TrackOverlaySlot.js

@@ -35,8 +35,8 @@ import { TrackOverlayContext } from './TrackOverlayContext.js';
  * this component: JBrowse's own track container passes 100, which is positioned
  * above `PaddingBlocks` and below `TrackLabel` at 200, and means nothing to a
  * host whose masks sit at 2. A default would be a number that is right in one
- * layout and silently wrong in every other, and the failure — chrome painted
- * under a mask — is invisible until someone looks at the right zoom.
+ * layout and wrong in every other, and the failure — chrome painted under a
+ * mask — goes unseen until someone looks at the right zoom.
  *
  * The node takes no pointer events, so it does not eat the canvas's. Chrome that
  * wants them takes them back on its own positioned box; it also carries