@jbrowse/core 4.3.0 → 5.0.0-beta.1

package/esm/ui/StatusProgressBar.d.ts

@@ -0,0 +1,37 @@
+/**
+ * A progress bar driven by a completion fraction in [0,1]: determinate (filling
+ * to the fraction) when one is given, indeterminate when `undefined`. The single
+ * place that maps a fraction to determinate-vs-indeterminate, shared by every
+ * loading/clustering/diagonalize/refetch indicator. Callers with an
+ * {@link RpcStatus} pass `statusFraction(status)`.
+ *
+ * **Toolkit-free, and that is the point rather than a detail.** It was a MUI
+ * `LinearProgress`, and it is reached from `LoadingOverlay` — whose every other
+ * element is already a `makeStyles` span — so it was the one Material component
+ * that rendered on a page whose host had asked for none. That reaches further
+ * than it sounds: a comparative display's first load draws this through
+ * `ComparativeFetchStatus`, which then sat behind neither bring-your-own seam,
+ * so an embedder who mounted `DisplayUIProvider` got a `MuiLinearProgress`
+ * anyway. It was invisible to the examples site's MUI census for the ordinary
+ * reason a loading state is: the census runs once the page has settled. (That
+ * component goes through the seam now, so a host supplying their own overlays
+ * replaces this rather than restyling it — but it is still what JBrowse's own
+ * comparative loading draws.)
+ *
+ * **What that bought is the look, not the bytes.** `LoadingOverlay` one level up
+ * still imports `IconButton` and `Tooltip`, so Material UI is in that page's
+ * bundle either way — 42 first-party eager modules hold it on the synteny page.
+ * Nothing here is a step toward getting it out; EAGER_BUNDLE.md owns that and
+ * says what it needs.
+ *
+ * `makeStyles` hands it `JBrowseStyleTheme`, so it follows the app's palette in
+ * both modes exactly as the Material one did. Two guards keep it from drifting
+ * back: `muiFree.test.ts` traces its imports, which catches an `alpha()` reached
+ * two modules deep, and its own test asserts the rendered tree carries no `Mui*`
+ * class, which catches a Material component rendered directly.
+ */
+export default function StatusProgressBar({ fraction, className, style, }: {
+    fraction?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}): import("react").JSX.Element;

package/esm/ui/StatusProgressBar.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx, makeStyles } from '../util/tss-react/index.js';
+import { indeterminateSweep } from './statusProgressKeyframes.js';
+const HEIGHT = 4;
+const useStyles = makeStyles()(theme => ({
+    track: {
+        position: 'relative',
+        overflow: 'hidden',
+        height: HEIGHT,
+        borderRadius: HEIGHT / 2,
+        // `color-mix` rather than MUI's `alpha`, which is the one import that would
+        // put this component back in the toolkit. Same idiom `plainChromeOverlays`
+        // uses, and it tints against the surface rather than compositing over
+        // whatever the bar happens to be drawn on.
+        background: `color-mix(in srgb, ${theme.palette.primary.main} 26%, transparent)`,
+    },
+    bar: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: '100%',
+        background: theme.palette.primary.main,
+        // scaled from the left rather than sized, so a progress update is a
+        // compositor transform instead of a layout
+        transformOrigin: 'left center',
+        transition: 'transform 200ms linear',
+    },
+    sweep: {
+        width: '40%',
+        transition: 'none',
+        animation: `${indeterminateSweep} 1.6s infinite linear`,
+    },
+}));
+/**
+ * A progress bar driven by a completion fraction in [0,1]: determinate (filling
+ * to the fraction) when one is given, indeterminate when `undefined`. The single
+ * place that maps a fraction to determinate-vs-indeterminate, shared by every
+ * loading/clustering/diagonalize/refetch indicator. Callers with an
+ * {@link RpcStatus} pass `statusFraction(status)`.
+ *
+ * **Toolkit-free, and that is the point rather than a detail.** It was a MUI
+ * `LinearProgress`, and it is reached from `LoadingOverlay` — whose every other
+ * element is already a `makeStyles` span — so it was the one Material component
+ * that rendered on a page whose host had asked for none. That reaches further
+ * than it sounds: a comparative display's first load draws this through
+ * `ComparativeFetchStatus`, which then sat behind neither bring-your-own seam,
+ * so an embedder who mounted `DisplayUIProvider` got a `MuiLinearProgress`
+ * anyway. It was invisible to the examples site's MUI census for the ordinary
+ * reason a loading state is: the census runs once the page has settled. (That
+ * component goes through the seam now, so a host supplying their own overlays
+ * replaces this rather than restyling it — but it is still what JBrowse's own
+ * comparative loading draws.)
+ *
+ * **What that bought is the look, not the bytes.** `LoadingOverlay` one level up
+ * still imports `IconButton` and `Tooltip`, so Material UI is in that page's
+ * bundle either way — 42 first-party eager modules hold it on the synteny page.
+ * Nothing here is a step toward getting it out; EAGER_BUNDLE.md owns that and
+ * says what it needs.
+ *
+ * `makeStyles` hands it `JBrowseStyleTheme`, so it follows the app's palette in
+ * both modes exactly as the Material one did. Two guards keep it from drifting
+ * back: `muiFree.test.ts` traces its imports, which catches an `alpha()` reached
+ * two modules deep, and its own test asserts the rendered tree carries no `Mui*`
+ * class, which catches a Material component rendered directly.
+ */
+export default function StatusProgressBar({ fraction, className, style, }) {
+    const { classes } = useStyles();
+    const determinate = fraction !== undefined;
+    // one clamp for both halves. `statusFraction` clamps its own output, but a
+    // caller passing a fraction of its own does not — `CurrentJobCard` divides an
+    // external job's self-reported `progressPct` — and clamping the top alone let
+    // a negative announce a value below the `aria-valuemin` declared beside it.
+    const filled = Math.min(1, Math.max(0, fraction ?? 0));
+    return (_jsx("div", { className: cx(classes.track, className), style: style, role: "progressbar", "aria-valuemin": determinate ? 0 : undefined, "aria-valuemax": determinate ? 100 : undefined, "aria-valuenow": determinate ? Math.round(filled * 100) : undefined, children: _jsx("div", { className: cx(classes.bar, determinate ? undefined : classes.sweep), style: determinate ? { transform: `scaleX(${filled})` } : undefined }) }));
+}

package/esm/ui/SubmitDialog.d.ts

@@ -0,0 +1,6 @@
+import type { Props as DialogComponentProps } from './Dialog.tsx';
+import type { SubmitFormProps } from './SubmitForm.tsx';
+export interface SubmitDialogProps extends Omit<DialogComponentProps, 'onSubmit' | 'onReset'>, Omit<SubmitFormProps, 'children'> {
+}
+declare const SubmitDialog: (props: SubmitDialogProps) => import("react").JSX.Element;
+export default SubmitDialog;

package/esm/ui/SubmitDialog.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import Dialog from './Dialog.js';
+import SubmitForm from './SubmitForm.js';
+const SubmitDialog = observer(function SubmitDialog(props) {
+    const { onSubmit, onCancel, cancelText, submitText, submitDisabled, submitColor, submitStartIcon, onReset, resetText, actions, contentClassName, children, ...dialogProps } = props;
+    return (_jsx(Dialog, { onClose: onCancel, ...dialogProps, children: _jsx(SubmitForm, { onSubmit: onSubmit, onCancel: onCancel, cancelText: cancelText, submitText: submitText, submitDisabled: submitDisabled, submitColor: submitColor, submitStartIcon: submitStartIcon, onReset: onReset, resetText: resetText, actions: actions, contentClassName: contentClassName, children: children }) }));
+});
+export default SubmitDialog;

package/esm/ui/SubmitForm.d.ts

@@ -0,0 +1,23 @@
+import type { ButtonProps } from '@mui/material';
+import type { ReactNode } from 'react';
+export interface SubmitFormProps {
+    onCancel: () => void;
+    onSubmit: () => void;
+    cancelText?: string;
+    submitText?: string;
+    submitDisabled?: boolean;
+    submitColor?: ButtonProps['color'];
+    submitStartIcon?: ReactNode;
+    onReset?: () => void;
+    resetText?: string;
+    actions?: ReactNode;
+    contentClassName?: string;
+    children?: ReactNode;
+}
+/**
+ * Content plus a Cancel/Submit footer, wrapped in a form so Enter submits.
+ * SubmitDialog is this with a Dialog around it; a dialog whose Dialog (and
+ * outer chrome) is shared across several tab panes uses this directly, so the
+ * panes get the same keyboard behavior without each owning a Dialog.
+ */
+export default function SubmitForm({ onSubmit, onCancel, cancelText, submitText, submitDisabled, submitColor, submitStartIcon, onReset, resetText, actions, contentClassName, children, }: SubmitFormProps): import("react").JSX.Element;

package/esm/ui/SubmitForm.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogActions, DialogContent } from '@mui/material';
+/**
+ * Content plus a Cancel/Submit footer, wrapped in a form so Enter submits.
+ * SubmitDialog is this with a Dialog around it; a dialog whose Dialog (and
+ * outer chrome) is shared across several tab panes uses this directly, so the
+ * panes get the same keyboard behavior without each owning a Dialog.
+ */
+export default function SubmitForm({ onSubmit, onCancel, cancelText = 'Cancel', submitText = 'Submit', submitDisabled = false, submitColor = 'primary', submitStartIcon, onReset, resetText = 'Restore default', actions, contentClassName, children, }) {
+    return (_jsxs("form", { onSubmit: event => {
+            event.preventDefault();
+            if (!submitDisabled) {
+                onSubmit();
+            }
+        }, children: [_jsx(DialogContent, { className: contentClassName, children: children }), _jsxs(DialogActions, { children: [_jsx(Button, { type: "button", color: "secondary", variant: "contained", onClick: () => {
+                            if (onReset) {
+                                onReset();
+                            }
+                            else {
+                                onCancel();
+                            }
+                        }, children: onReset ? resetText : cancelText }), actions, _jsx(Button, { type: "submit", color: submitColor, variant: "contained", disabled: submitDisabled, startIcon: submitStartIcon, children: submitText })] })] }));
+}

package/esm/ui/SvgColorLegend.d.ts

@@ -0,0 +1,13 @@
+import type { ColorLegendEntry } from './legendSpec.ts';
+import type { ReactNode } from 'react';
+export type { ColorLegendEntry } from './legendSpec.ts';
+export declare const LEGEND_ROW_HEIGHT = 14;
+export declare const LEGEND_SWATCH = 10;
+export default function SvgColorLegend({ entries, canvasWidth, maxHeight, onDismiss, children, testid, }: {
+    entries: ColorLegendEntry[];
+    canvasWidth: number;
+    maxHeight?: number;
+    onDismiss?: () => void;
+    children?: ReactNode;
+    testid?: string;
+}): import("react").JSX.Element | null;

package/esm/ui/SvgColorLegend.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-refresh/only-export-components -- geometry constants belong with this leaf SVG primitive; no component state to fast-refresh */
+import { LegendSwatchGlyph } from './LegendSwatchGlyph.js';
+import { measureLegendText } from './measureLegendText.js';
+const FONT_SIZE = 10;
+const SWATCH_LEFT = 2;
+const SWATCH_GAP = 2;
+// Row geometry, exported so callers positioning `children` (or sizing an outer
+// container) stay in lockstep with what this draws.
+export const LEGEND_ROW_HEIGHT = 14;
+export const LEGEND_SWATCH = 10;
+// narrow right-side gutter reserved for the small dismiss "×"
+const DISMISS_GUTTER = 11;
+// A row's marks, with the flat `color` shorthand read as the single filled
+// square it has always drawn.
+function entrySwatches(entry) {
+    return (entry.swatches ??
+        (entry.color === undefined ? [] : [{ color: entry.color }]));
+}
+// Shared SVG categorical color key: one translucent row per entry, each a swatch
+// + label, right-aligned within canvasWidth. Used by any display that colors by
+// a discrete vocabulary (wiggle multi-source overlays, multi-row per-feature
+// paintings). A <g> so the on-screen overlay and the SVG export share one
+// renderer.
+//
+// Two escape hatches keep it usable for less-uniform legends without a second
+// component: a per-entry `marker` overrides the color square, and `children`
+// render inside the positioned box below the rows (from the box's top-left; the
+// rows occupy `shownEntryCount * LEGEND_ROW_HEIGHT`). Draws nothing when there's
+// neither an entry nor a child.
+//
+// `maxHeight` (e.g. the display height) caps the box: entries past what fits
+// collapse into a trailing "+N more" summary row, so the legend never overflows
+// its display — the full list stays reachable via the track menu.
+//
+// `onDismiss` adds a clickable "×" in the top-right corner (with its own
+// pointer-events so it works under a pointer-events:none overlay). Pass it only
+// on interactive paths where the legend can be re-shown — never on the SVG
+// export, which has no way to click it.
+export default function SvgColorLegend({ entries, canvasWidth, maxHeight, onDismiss, children, testid, }) {
+    const fit = maxHeight === undefined
+        ? entries.length
+        : Math.max(1, Math.floor(maxHeight / LEGEND_ROW_HEIGHT));
+    // reserve the last fitting row for the summary when truncating
+    const shown = entries.length > fit ? entries.slice(0, fit - 1) : entries;
+    const overflowLabel = entries.length > fit ? `+${entries.length - shown.length} more` : undefined;
+    // Labels line up across rows, so the swatch column is sized by the row with
+    // the most marks — otherwise a two-mark row shoves its own label out of the
+    // column the others share. One mark reproduces the original 16px inset.
+    const swatchColumns = Math.max(1, ...shown.map(e => entrySwatches(e).length));
+    const textLeft = SWATCH_LEFT + swatchColumns * (LEGEND_SWATCH + SWATCH_GAP) + 2;
+    let maxLabelWidth = 0;
+    for (const entry of shown) {
+        maxLabelWidth = Math.max(maxLabelWidth, measureLegendText(entry.label, FONT_SIZE));
+    }
+    if (overflowLabel !== undefined) {
+        maxLabelWidth = Math.max(maxLabelWidth, measureLegendText(overflowLabel, FONT_SIZE));
+    }
+    const totalWidth = textLeft + maxLabelWidth + 6 + (onDismiss ? DISMISS_GUTTER : 0);
+    const x = Math.max(0, canvasWidth - totalWidth - 4);
+    return shown.length || overflowLabel || children ? (_jsxs("g", { transform: `translate(${x} 0)`, "data-testid": testid, children: [shown.map((entry, idx) => (_jsxs("g", { transform: `translate(0 ${idx * LEGEND_ROW_HEIGHT})`, children: [_jsx("rect", { x: 0, y: 0, width: totalWidth, height: LEGEND_ROW_HEIGHT, fill: "rgba(255,255,255,0.95)" }), _jsxs("g", { opacity: entry.hidden ? 0.35 : 1, children: [entry.marker ??
+                                entrySwatches(entry).map((swatch, i) => (_jsx(LegendSwatchGlyph, { swatch: swatch, size: LEGEND_SWATCH, x: SWATCH_LEFT + i * (LEGEND_SWATCH + SWATCH_GAP), y: 2 }, `${swatch.color}-${swatch.mark ?? 'fill'}`))), _jsx("text", { x: textLeft, y: 11, fontSize: FONT_SIZE, fill: "black", textDecoration: entry.hidden ? 'line-through' : undefined, children: entry.label })] })] }, entry.key))), overflowLabel === undefined ? null : (_jsxs("g", { transform: `translate(0 ${shown.length * LEGEND_ROW_HEIGHT})`, children: [_jsx("rect", { x: 0, y: 0, width: totalWidth, height: LEGEND_ROW_HEIGHT, fill: "rgba(255,255,255,0.95)" }), _jsx("text", { x: textLeft, y: 11, fontSize: FONT_SIZE, fill: "#555", children: overflowLabel })] })), onDismiss === undefined ? null : (_jsxs("g", { transform: `translate(${totalWidth - DISMISS_GUTTER} 0)`, style: { cursor: 'pointer', pointerEvents: 'auto' }, "data-gesture-owner": "true", onClick: () => {
+                    onDismiss();
+                }, children: [_jsx("title", { children: "Hide legend" }), _jsx("rect", { x: 0, y: 0, width: DISMISS_GUTTER, height: LEGEND_ROW_HEIGHT, fill: "transparent" }), _jsx("text", { x: DISMISS_GUTTER / 2, y: 9, fontSize: 9, fill: "#777", textAnchor: "middle", children: "\u00D7" })] })), children] })) : null;
+}

package/esm/ui/SvgGradientLegend.d.ts

@@ -0,0 +1,26 @@
+export interface GradientStop {
+    offset: string;
+    color: string;
+    opacity?: number;
+}
+export interface GradientLabel {
+    text: string;
+    position: 'start' | 'middle' | 'end';
+}
+export declare const GRADIENT_LEGEND_WIDTH = 120;
+export declare const GRADIENT_LEGEND_HEIGHT = 40;
+export declare const GRADIENT_LEGEND_SVG_AREA_WIDTH: number;
+export default function SvgGradientLegend({ gradientId, stops, labels, title, x, y, width, height, barWidth, barHeight, padding, fontSize, }: {
+    gradientId: string;
+    stops: GradientStop[];
+    labels: GradientLabel[];
+    title?: string;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    barWidth?: number;
+    barHeight?: number;
+    padding?: number;
+    fontSize?: number;
+}): import("react").JSX.Element;

package/esm/ui/SvgGradientLegend.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable react-refresh/only-export-components -- layout constants belong with this leaf SVG primitive; no component state to fast-refresh */
+import { svgSafeId } from '../svg/svgId.js';
+// Default box/bar geometry shared by the LD and Hi-C legends. Exported so
+// callers that size an outer container (an <svg> wrapper) or compute an offset
+// stay in lockstep with what this component draws.
+export const GRADIENT_LEGEND_WIDTH = 120;
+export const GRADIENT_LEGEND_HEIGHT = 40;
+// Horizontal space a display should reserve (via `svgLegendWidth()`) to park
+// this legend beside the plot in an SVG export: the bar itself plus a 10px
+// margin either side.
+export const GRADIENT_LEGEND_SVG_AREA_WIDTH = GRADIENT_LEGEND_WIDTH + 20;
+// Shared SVG color-ramp key: a rounded translucent box, a horizontal gradient
+// bar, and labels below it. Used by any display that colors by a continuous
+// scale (Hi-C contact counts, LD r²/D'). Renders a <g>; position via x/y.
+export default function SvgGradientLegend({ gradientId, stops, labels, title, x = 0, y = 0, width = GRADIENT_LEGEND_WIDTH, height = GRADIENT_LEGEND_HEIGHT, barWidth = 100, barHeight = 12, padding = 8, fontSize = 10, }) {
+    const titleGap = title ? fontSize + 4 : 0;
+    const barY = padding + titleGap;
+    const labelY = barY + barHeight + fontSize + 2;
+    const safeGradientId = svgSafeId(gradientId);
+    return (_jsxs("g", { transform: `translate(${x}, ${y})`, children: [_jsx("defs", { children: _jsx("linearGradient", { id: safeGradientId, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: stops.map(stop => (_jsx("stop", { offset: stop.offset, style: { stopColor: stop.color, stopOpacity: stop.opacity ?? 1 } }, stop.offset))) }) }), _jsx("rect", { x: 0, y: 0, width: width, height: height + titleGap, fill: "rgba(255,255,255,0.95)", stroke: "#ccc", strokeWidth: 1, rx: 4 }), title ? (_jsx("text", { x: padding, y: padding + fontSize, fontSize: fontSize, fill: "black", children: title })) : null, _jsx("rect", { x: padding, y: barY, width: barWidth, height: barHeight, fill: `url(#${safeGradientId})`, rx: 2 }), labels.map(label => (_jsx("text", { x: label.position === 'start'
+                    ? padding
+                    : label.position === 'middle'
+                        ? padding + barWidth / 2
+                        : padding + barWidth, y: labelY, fontSize: fontSize, fill: "black", textAnchor: label.position === 'start' ? undefined : label.position, children: label.text }, `${label.position}-${label.text}`)))] }));
+}

package/esm/ui/TagTextField.d.ts

@@ -0,0 +1,40 @@
+import type { TextFieldProps } from '@mui/material';
+/** A quick-pick shortcut: the two-character tag plus a human label. */
+export interface TagQuickPick {
+    tag: string;
+    label?: string;
+}
+interface OwnProps {
+    /** Initial tag; undefined or '' renders as empty input. */
+    defaultValue?: string;
+    /**
+     * Fires on every keystroke with the tag when it is a valid 2-character SAM
+     * tag, or undefined otherwise. The parent gates submission on undefined.
+     */
+    onValueChange: (value: string | undefined) => void;
+    /**
+     * Optional hint shown under the input. Off by default — the field is capped at
+     * two characters and the quick-pick chips already teach the common tags, so a
+     * persistent hint just adds a line that misaligns the field against its
+     * siblings. The invalid-tag error still shows regardless.
+     */
+    helperText?: TextFieldProps['helperText'];
+    /** data-testid forwarded to the inner <input> (used by screenshot specs). */
+    inputTestId?: string;
+    /**
+     * One-click shortcuts for common tags (e.g. HP, RG) shown as chips above the
+     * field, so users don't have to know and type the two-letter code. Clicking a
+     * chip fills the field and emits the value exactly as typing it would.
+     */
+    quickPicks?: TagQuickPick[];
+}
+type Props = Omit<TextFieldProps, 'value' | 'onChange' | 'error' | 'helperText' | 'slotProps'> & OwnProps;
+/**
+ * Uncontrolled-style TextField for a two-character SAM tag (e.g. HP, RG, XS).
+ * Owns the input text internally; emits the tag string when valid (or
+ * undefined) to the parent. Caps input at two characters and shows an inline
+ * error once two invalid characters are entered. Optional `quickPicks` render a
+ * chip row of common tags that fill the field on click.
+ */
+export default function TagTextField(props: Props): import("react").JSX.Element;
+export {};

package/esm/ui/TagTextField.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Chip, Stack, TextField } from '@mui/material';
+import { isValidTag } from '../util/tags.js';
+/**
+ * Uncontrolled-style TextField for a two-character SAM tag (e.g. HP, RG, XS).
+ * Owns the input text internally; emits the tag string when valid (or
+ * undefined) to the parent. Caps input at two characters and shows an inline
+ * error once two invalid characters are entered. Optional `quickPicks` render a
+ * chip row of common tags that fill the field on click.
+ */
+export default function TagTextField(props) {
+    const { defaultValue = '', onValueChange, helperText, inputTestId, quickPicks, ...rest } = props;
+    const [text, setText] = useState(defaultValue);
+    const showError = text.length === 2 && !isValidTag(text);
+    // Both a chip click and typing flow through here so the two paths can't
+    // disagree about validation or what gets emitted.
+    const setValue = (next) => {
+        setText(next);
+        onValueChange(isValidTag(next) ? next : undefined);
+    };
+    return (_jsxs(Stack, { spacing: 1, children: [quickPicks?.length ? (_jsx(Stack, { direction: "row", spacing: 1, useFlexGap: true, sx: { flexWrap: 'wrap' }, children: quickPicks.map(({ tag, label }) => (_jsx(Chip, { size: "small", label: label ? `${tag} — ${label}` : tag, color: text === tag ? 'primary' : 'default', variant: text === tag ? 'filled' : 'outlined', onClick: () => {
+                        setValue(tag);
+                    } }, tag))) })) : null, _jsx(TextField, { label: "Tag name", ...rest, value: text, error: showError, helperText: showError ? 'Not a valid tag' : helperText, autoComplete: "off", slotProps: {
+                    htmlInput: {
+                        maxLength: 2,
+                        'data-testid': inputTestId,
+                    },
+                }, onChange: event => {
+                    setValue(event.target.value);
+                } })] }));
+}

package/esm/ui/VerticalScrollbar.d.ts

@@ -0,0 +1,45 @@
+/**
+ * How much of a display's right edge this occupies while it is drawn.
+ *
+ * Exported because the things that have to *clear* it are drawn by the displays
+ * that mount it, not by this file: the bottom-right indicator row and the
+ * alignments coverage axis label. Both kept a private copy of the number (and
+ * the alignments indicator row kept none at all, so its chips were drawn over
+ * the thumb), which is a copy that can only be checked by looking at two files
+ * at once.
+ */
+export declare const VERTICAL_SCROLLBAR_WIDTH = 12;
+/**
+ * Where the right edge of anything that has to sit *beside* the thumb goes: the
+ * track's width plus a hair of air, so a chip or an axis label doesn't touch it.
+ *
+ * The four call sites all spelled `VERTICAL_SCROLLBAR_WIDTH + 2` inline, which
+ * is the same copy the width constant was exported to stop — one addition
+ * further along. The `+ 2` is a gap and belongs to the thing being cleared, not
+ * to the scrollbar's own geometry, so it is named rather than folded into the
+ * width (`right: 2` on the thumb is a different 2 and must not move with it).
+ */
+export declare const VERTICAL_SCROLLBAR_CLEARANCE: number;
+/**
+ * Draggable vertical scrollbar overlay for canvas-backed displays that scroll
+ * their content via a `scrollTop` value (alignments pileup, variant matrix).
+ * Renders nothing when the content fits the viewport. The thumb geometry and
+ * the drag-to-scroll mapping live here so the consumers don't each re-derive
+ * them; the wheel handling stays per-display (their gesture semantics differ).
+ *
+ * Deliberately NOT a keyboard tab stop: the surrounding views have no working
+ * keyboard navigation to reach the scrolled content anyway, so a per-track
+ * `tabIndex` would only add noise to the tab order. The `role="scrollbar"` +
+ * `aria-value*` semantics are kept — they cost nothing and expose scroll
+ * position to pointer/voice assistive tech.
+ */
+export default function VerticalScrollbar({ scrollTop, setScrollTop, viewportHeight, contentHeight, controlsId, top, }: {
+    scrollTop: number;
+    setScrollTop: (n: number) => void;
+    viewportHeight: number;
+    contentHeight: number;
+    /** `id` of the scrolled viewport element, for `aria-controls`. */
+    controlsId: string;
+    /** Track offset from the top, for displays with a sticky band above it. */
+    top?: number;
+}): import("react").JSX.Element | null;

package/esm/ui/VerticalScrollbar.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { clamp } from '../util/numericUtils.js';
+import { makeStyles } from '../util/tss-react/index.js';
+import { usePointerDrag } from '../util/usePointerDrag.js';
+import { useRafCommit } from '../util/useRafCommit.js';
+import { useVirtualScrollWheel } from '../util/useVirtualScrollWheel.js';
+/**
+ * How much of a display's right edge this occupies while it is drawn.
+ *
+ * Exported because the things that have to *clear* it are drawn by the displays
+ * that mount it, not by this file: the bottom-right indicator row and the
+ * alignments coverage axis label. Both kept a private copy of the number (and
+ * the alignments indicator row kept none at all, so its chips were drawn over
+ * the thumb), which is a copy that can only be checked by looking at two files
+ * at once.
+ */
+export const VERTICAL_SCROLLBAR_WIDTH = 12;
+/**
+ * Where the right edge of anything that has to sit *beside* the thumb goes: the
+ * track's width plus a hair of air, so a chip or an axis label doesn't touch it.
+ *
+ * The four call sites all spelled `VERTICAL_SCROLLBAR_WIDTH + 2` inline, which
+ * is the same copy the width constant was exported to stop — one addition
+ * further along. The `+ 2` is a gap and belongs to the thing being cleared, not
+ * to the scrollbar's own geometry, so it is named rather than folded into the
+ * width (`right: 2` on the thumb is a different 2 and must not move with it).
+ */
+export const VERTICAL_SCROLLBAR_CLEARANCE = VERTICAL_SCROLLBAR_WIDTH + 2;
+const MIN_THUMB_HEIGHT = 20;
+const useStyles = makeStyles()(theme => ({
+    track: {
+        position: 'absolute',
+        right: 0,
+        width: VERTICAL_SCROLLBAR_WIDTH,
+        cursor: 'default',
+        zIndex: 10,
+        // `usePointerDrag`'s one caller-owned requirement: without it the browser
+        // claims a touch drag on this strip as a page scroll and no pointer stream
+        // arrives at all, so the thumb simply doesn't drag by finger.
+        touchAction: 'none',
+        // theme-aware so the thumb stays visible in dark mode (a hardcoded black
+        // thumb vanished against a dark canvas)
+        '&:hover > *': {
+            background: theme.palette.action.active,
+        },
+    },
+    thumb: {
+        position: 'absolute',
+        right: 2,
+        width: 6,
+        borderRadius: 3,
+        background: theme.palette.action.disabled,
+        pointerEvents: 'none',
+    },
+}));
+/**
+ * Draggable vertical scrollbar overlay for canvas-backed displays that scroll
+ * their content via a `scrollTop` value (alignments pileup, variant matrix).
+ * Renders nothing when the content fits the viewport. The thumb geometry and
+ * the drag-to-scroll mapping live here so the consumers don't each re-derive
+ * them; the wheel handling stays per-display (their gesture semantics differ).
+ *
+ * Deliberately NOT a keyboard tab stop: the surrounding views have no working
+ * keyboard navigation to reach the scrolled content anyway, so a per-track
+ * `tabIndex` would only add noise to the tab order. The `role="scrollbar"` +
+ * `aria-value*` semantics are kept — they cost nothing and expose scroll
+ * position to pointer/voice assistive tech.
+ */
+export default function VerticalScrollbar({ scrollTop, setScrollTop, viewportHeight, contentHeight, controlsId, top = 0, }) {
+    const { classes } = useStyles();
+    // ephemeral drag anchor; null when not dragging. Pointer capture (set on the
+    // track) delivers move/up here even when the pointer leaves the thin track,
+    // and auto-releases on unmount — so no document listeners or effect cleanup.
+    const dragRef = useRef(undefined);
+    const [trackEl, setTrackEl] = useState(null);
+    // A thumb drag's pointermove can fire faster than the frame rate, so coalesce
+    // its scroll writes to one commit per frame; pointer-up flushes the final
+    // (absolute) target so the resting position is exact.
+    const { schedule: scheduleScroll, flush: flushScroll } = useRafCommit(setScrollTop);
+    const scrollableHeight = Math.max(0, contentHeight - viewportHeight);
+    // Wheeling while the pointer is over the scrollbar always scrolls the panel,
+    // never zooms the view. The scrollbar overlay is a sibling of the canvas, so
+    // its wheel events would otherwise bubble straight past the canvas's own
+    // handler to the containing view's scroll-zoom. A native non-passive listener
+    // here (via useVirtualScrollWheel) consumes the vertical delta into
+    // setScrollTop and stopPropagation keeps it from reaching that scroll-zoom.
+    useVirtualScrollWheel(trackEl, (e, applyScroll) => {
+        applyScroll(e, { scrollTop, viewportHeight, scrollableHeight }, n => {
+            setScrollTop(n);
+        });
+        e.stopPropagation();
+    });
+    const clampedScrollTop = clamp(scrollTop, 0, scrollableHeight);
+    // never taller than the track itself — on a very short viewport the
+    // MIN_THUMB_HEIGHT floor would otherwise exceed viewportHeight, pushing
+    // thumbTop negative (thumb drawn above the track) and making usableTrack
+    // negative (drag mapping dead)
+    const thumbHeight = Math.min(viewportHeight, Math.max(MIN_THUMB_HEIGHT, viewportHeight * (viewportHeight / contentHeight)));
+    const usableTrack = viewportHeight - thumbHeight;
+    // clamp so a scrollTop past scrollableHeight (virtual-scroll displays don't
+    // self-correct like a native overflow container) can't draw the thumb below
+    // the track
+    const thumbTop = clamp((clampedScrollTop / scrollableHeight) * usableTrack, 0, usableTrack);
+    // The press lifecycle is `usePointerDrag`'s: primary button only, one drag per
+    // pointer, capture on the track so moves keep arriving once the pointer leaves
+    // the 12px strip, and auto-release on unmount. Hand-rolled here before that
+    // existed, which cost two of the bugs it is written to prevent — a right-press
+    // started a drag that then ran underneath its own context menu, and a second
+    // finger landing mid-drag re-anchored the gesture.
+    const drag = usePointerDrag({
+        // Click-to-page: a press on the track above/below the thumb jumps one
+        // viewport toward it (like a native scrollbar) rather than starting a drag.
+        // The thumb is pointerEvents:none so every press lands on the track; decide
+        // page-vs-drag from its Y relative to the thumb. `dragRef` staying undefined
+        // is what makes the paging branch ignore the moves that follow — the pointer
+        // is captured either way, and a page press simply has nothing to do with them.
+        onDragStart: e => {
+            const clickY = e.clientY - e.currentTarget.getBoundingClientRect().top;
+            if (clickY < thumbTop || clickY > thumbTop + thumbHeight) {
+                const dir = clickY < thumbTop ? -1 : 1;
+                setScrollTop(clamp(clampedScrollTop + dir * viewportHeight, 0, scrollableHeight));
+            }
+            else {
+                dragRef.current = { startY: e.clientY, startScroll: clampedScrollTop };
+            }
+        },
+        onDrag: e => {
+            const d = dragRef.current;
+            if (d && usableTrack > 0) {
+                const delta = ((e.clientY - d.startY) / usableTrack) * scrollableHeight;
+                scheduleScroll(clamp(d.startScroll + delta, 0, scrollableHeight));
+            }
+        },
+        onDragEnd: () => {
+            flushScroll();
+            dragRef.current = undefined;
+        },
+    });
+    // Below every hook, not above the geometry it reads: "the content fits" is a
+    // prop-driven condition that flips while mounted, so an early return above
+    // `usePointerDrag` would call a different number of hooks per render. The
+    // geometry it closes over is computed either way and simply goes unused here —
+    // nothing renders, so nothing can dispatch a pointer event at it.
+    if (scrollableHeight <= 0) {
+        return null;
+    }
+    return (_jsx("div", { ref: setTrackEl, "data-testid": "vertical-scrollbar", "data-gesture-owner": "true", className: classes.track, style: { top, height: viewportHeight }, role: "scrollbar", "aria-label": "Vertical scrollbar", "aria-controls": controlsId, "aria-orientation": "vertical", "aria-valuemin": 0, "aria-valuemax": Math.round(scrollableHeight), "aria-valuenow": Math.round(clampedScrollTop), ...drag, 
+        // Wraps the hook's own handler rather than replacing it: stopPropagation
+        // so the press doesn't also pan the view, and it runs for every button, so
+        // a right-press the drag ignores still doesn't reach the view. No
+        // preventDefault, so the native focus shift can still close open popups
+        // and the context menu still opens.
+        onPointerDown: e => {
+            e.stopPropagation();
+            drag.onPointerDown(e);
+        }, children: _jsx("div", { className: classes.thumb, style: { top: thumbTop, height: thumbHeight } }) }));
+}

package/esm/ui/ViewLoadingScreen.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The "view exists but isn't ready yet" screen a view renders instead of its
+ * content — LGV, dotplot and linear synteny all show it while the assembly they
+ * name is still loading, labelled with which of the assembly's files is
+ * downloading and a determinate bar when that download reports one.
+ *
+ * A load that then stops reporting names the file it is waiting on. The phase
+ * label alone does not: "Downloading chromosome aliases" is a fair description
+ * of what is happening and no help at all in front of a hub that has stopped
+ * answering, where the one useful fact is which server that is. Shown only once
+ * the load has actually stalled, so a healthy startup never sees a URL.
+ *
+ * Metrics deliberately match `DiagonalizeLoadingScreen`, which is the sibling
+ * render branch in both comparative views: a view that flipped between the two
+ * would otherwise jump between two differently laid-out loading screens. That
+ * shared layout is also why this exists at all rather than each view calling
+ * {@link LoadingProgress} directly — bare, it renders an unconstrained
+ * full-width bar under an unaligned label.
+ */
+export default function ViewLoadingScreen({ message, fraction, source, }: {
+    message?: string;
+    fraction?: number;
+    source?: string;
+}): import("react").JSX.Element;