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

package/README.md

@@ -36,7 +36,7 @@ above them.
 
 |                                             |                                                                                         |
 | ------------------------------------------- | --------------------------------------------------------------------------------------- |
-| `DisplayChromeOverlays`                     | the five `displayPhase` states, as a component set, with the model shape each is handed |
+| `DisplayChromeOverlays`                     | the `displayPhase` states, as a five-component set, with the model shape each is handed |
 | `DisplayChromeOverlayProvider`              | redirects those states for JBrowse's own displays                                       |
 | `TrackControlComponent`                     | one shape for every ambient bottom-right control, icons named rather than passed        |
 | `TrackControlProvider`                      | redirects those                                                                         |
@@ -89,10 +89,9 @@ and the status text disappearing under them.
 It has never been reachable: the two displays that render the control row
 (alignments, canvas) are not among the four that report a `ready`-phase status
 (clustering, on multi-wiggle / multi-row features / maf / the multi-sample
-variant pair). That is the _reason_ to make it structural rather than to leave
-it — nothing on either side is aware of the constraint, so the first display to
-want both would find the bug, and it presents as a status message that silently
-never appears.
+variant pair). The layout is structural anyway, because neither side checks for
+the constraint, so the first display to want both would hit the bug as a status
+message that never appears.
 
 `BottomRightIndicators` already described itself as "the single anchor point for
 every bottom-right overlay ... so they lay out as one row instead of each
@@ -208,9 +207,9 @@ question only exists for an MST node.
 
 ### plainChromeOverlays
 
-The five `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.
+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.
 
 `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
@@ -288,9 +287,8 @@ toolkit, so the package's no-Material-UI guarantee holds.
 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.
+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">
@@ -366,8 +364,8 @@ under them with nothing to say so.
 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.
+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
@@ -451,7 +449,10 @@ the `[min, max]` caption and no axis, as a scale whose bands are too short for
 one does. `side` and `left` are which of the band's edges the display's own
 panels leave clear for a gutter: `right` where a group label chip takes the
 left, `left: n` where a dendrogram takes the first `n` px. `caption` is what the
-scale measures (`TLEN`), as a colour scale's `field` is.
+scale measures (`TLEN`), as a colour scale's `field` is; the chrome draws it
+once for the scale, beside the bands on screen, however many it rules. `rules`
+are the reference lines the scale declares, which the chrome draws across every
+band.
 
 A member describes the scale or the band it rules, never the axis — not an
 orientation, a form, a gutter width or a font. The chrome reads a member to keep
@@ -460,4 +461,13 @@ off what the display put in the band, never to choose between two drawings of it
 
 [Source code](https://github.com/GMOD/jbrowse-components/blob/main/packages/display-ui/src/valueScale.ts)
 
+### ValueScaleRule
+
+One reference line a value scale declares, at a value in the scale's own units.
+`label` is free text and carries no meaning the chrome assigns: over a coverage
+plot "2 copies" is a claim only the author can make, since no ploidy can be
+assumed.
+
+[Source code](https://github.com/GMOD/jbrowse-components/blob/main/packages/display-ui/src/valueScale.ts)
+
 <!-- API_DOCS_END -->

package/esm/AxisCaption.d.ts

@@ -0,0 +1,24 @@
+import type { YAxis } from './valueScale.ts';
+/**
+ * A scale's caption, drawn once however many bands the scale rules: rotated
+ * along the outer edge of the gutter column, the origin at the column's top
+ * left, centred on the bands given as nearly as the display's `height` holds
+ * it whole, and cut to that height where it is longer. The on-screen overlay
+ * and the export both draw through this, so the two cannot place a caption
+ * differently.
+ */
+export default function AxisCaption({ axis, bandTops, height, }: {
+    axis: YAxis;
+    bandTops: number[];
+    height: number;
+}): import("react").JSX.Element | null;
+/**
+ * The on-screen caption of one scale: an `<svg>` over the gutter column, the
+ * height of the display, with `AxisCaption` inside.
+ */
+export declare function AxisCaptionOverlay({ axis, bandTops, width, height, }: {
+    axis: YAxis;
+    bandTops: number[];
+    width: number;
+    height: number;
+}): import("react").JSX.Element;

package/esm/AxisCaption.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+import { VERTICAL_SCROLLBAR_CLEARANCE } from '@jbrowse/core/ui/VerticalScrollbar';
+import { measureText } from '@jbrowse/core/util/measureText';
+import { axisCaptionY, axisGutterLeft, axisGutterWidth, } from './axisPlacement.js';
+import { AXIS_FONT_PX, CAPTION_INSET_PX } from './yAxisConstants.js';
+// The caption and its length, cut to an ellipsis where it is longer than
+// `room`, as a Vega-Lite axis title is cut at its `titleLimit`. The ellipsis
+// is one em.
+function fitCaption(caption, room) {
+    const whole = measureText(caption, AXIS_FONT_PX);
+    if (whole <= room) {
+        return { text: caption, length: whole };
+    }
+    for (let end = caption.length - 1; end > 0; end--) {
+        const length = measureText(caption.slice(0, end), AXIS_FONT_PX) + AXIS_FONT_PX;
+        if (length <= room) {
+            return { text: `${caption.slice(0, end)}…`, length };
+        }
+    }
+    return undefined;
+}
+/**
+ * A scale's caption, drawn once however many bands the scale rules: rotated
+ * along the outer edge of the gutter column, the origin at the column's top
+ * left, centred on the bands given as nearly as the display's `height` holds
+ * it whole, and cut to that height where it is longer. The on-screen overlay
+ * and the export both draw through this, so the two cannot place a caption
+ * differently.
+ */
+export default function AxisCaption({ axis, bandTops, height, }) {
+    const palette = usePalette();
+    const x = axis.side === 'right'
+        ? axisGutterWidth(axis) - CAPTION_INSET_PX
+        : CAPTION_INSET_PX;
+    const caption = fitCaption(axis.caption ?? '', height);
+    if (!caption) {
+        return null;
+    }
+    const half = caption.length / 2;
+    const y = Math.min(Math.max(axisCaptionY(axis, bandTops), half), height - half);
+    return (_jsx("text", { x: x, y: y, fontSize: AXIS_FONT_PX, textAnchor: "middle", fill: palette.text.primary, stroke: palette.background.default, strokeWidth: 2.5, paintOrder: "stroke", transform: `rotate(-90, ${x}, ${y})`, children: caption.text }));
+}
+/**
+ * The on-screen caption of one scale: an `<svg>` over the gutter column, the
+ * height of the display, with `AxisCaption` inside.
+ */
+export function AxisCaptionOverlay({ axis, bandTops, width, height, }) {
+    return (_jsx("svg", { style: {
+            position: 'absolute',
+            top: 0,
+            left: axisGutterLeft(axis, width, VERTICAL_SCROLLBAR_CLEARANCE),
+            pointerEvents: 'none',
+            height,
+            width: axisGutterWidth(axis),
+        }, children: _jsx(AxisCaption, { axis: axis, bandTops: bandTops, height: height }) }));
+}

package/esm/AxisGutter.d.ts

@@ -2,10 +2,10 @@ import type { YAxis } from './valueScale.ts';
 /**
  * One band's axis drawn inside its gutter, the origin at the gutter's left
  * edge: the spine on the gutter's inner edge — its right for a left-side
- * axis, its left for a right-side one — with the numbers growing outward, and
- * the caption, where the scale has one, rotated along the outer edge. The
+ * axis, its left for a right-side one — with the numbers growing outward. The
  * on-screen overlay and the export both draw through this, so the two cannot
- * place a spine differently.
+ * place a spine differently. The scale's caption is `AxisCaption`'s, drawn once
+ * for the scale and not per band.
  */
 export default function AxisGutter({ axis }: {
     axis: YAxis;

package/esm/AxisGutter.js

@@ -1,25 +1,15 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+import { jsx as _jsx } from "react/jsx-runtime";
 import YScaleBar from './YScaleBar.js';
-import { AXIS_GUTTER_WIDTH_PX } from './yScaleTicks.js';
-// Half the rotated caption's own 10px height plus a px of margin: how far in
-// from the gutter's outer edge it sits with its glyphs still inside.
-const CAPTION_INSET_PX = 8;
+import { axisGutterWidth } from './axisPlacement.js';
 /**
  * One band's axis drawn inside its gutter, the origin at the gutter's left
  * edge: the spine on the gutter's inner edge — its right for a left-side
- * axis, its left for a right-side one — with the numbers growing outward, and
- * the caption, where the scale has one, rotated along the outer edge. The
+ * axis, its left for a right-side one — with the numbers growing outward. The
  * on-screen overlay and the export both draw through this, so the two cannot
- * place a spine differently.
+ * place a spine differently. The scale's caption is `AxisCaption`'s, drawn once
+ * for the scale and not per band.
  */
 export default function AxisGutter({ axis }) {
-    const palette = usePalette();
     const right = axis.side === 'right';
-    const { ticks, caption, height } = axis;
-    const captionX = right
-        ? AXIS_GUTTER_WIDTH_PX - CAPTION_INSET_PX
-        : CAPTION_INSET_PX;
-    const midY = (ticks.yTop + ticks.yBottom) / 2;
-    return (_jsxs(_Fragment, { children: [_jsx("g", { transform: `translate(${right ? 0 : AXIS_GUTTER_WIDTH_PX} 0)`, children: _jsx(YScaleBar, { ticks: ticks, orientation: right ? 'right' : 'left', bandHeight: height }) }), caption ? (_jsx("text", { x: captionX, y: midY, fontSize: 10, textAnchor: "middle", fill: palette.text.primary, stroke: palette.background.default, strokeWidth: 2.5, paintOrder: "stroke", transform: `rotate(-90, ${captionX}, ${midY})`, children: caption })) : null] }));
+    return (_jsx("g", { transform: `translate(${right ? 0 : axisGutterWidth(axis)} 0)`, children: _jsx(YScaleBar, { ticks: axis.ticks, orientation: right ? 'right' : 'left', bandHeight: axis.height }) }));
 }

package/esm/FloatingLegend.d.ts

@@ -1,5 +1,4 @@
 import type { LegendItem, LegendSection } from '@jbrowse/core/ui/legendSpec';
-export declare const FLOATING_LEGEND_TOP_PX = 10;
 export type { LegendGradient, LegendItem, LegendSection, LegendSpec, LegendSwatch, } from '@jbrowse/core/ui/legendSpec';
 declare const FloatingLegend: ({ items, sections, title, onDismiss, onDismissSection, onItemClick, maxItems, maxWidth, top, }: {
     items?: LegendItem[];

package/esm/FloatingLegend.js

@@ -8,10 +8,9 @@ import { LegendSwatchGlyph } from '@jbrowse/core/ui/LegendSwatchGlyph';
 import { legendSwatches, nonEmptyLegendSections, } from '@jbrowse/core/ui/legendSpec';
 import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
+import { FLOATING_LEGEND_TOP_PX } from './floatingLegendTop.js';
 import Tooltip from './tooltip/Tooltip.js';
 import { TrackOverlayPortal } from './trackOverlay/TrackOverlayPortal.js';
-// The key's own inset from the display's top-right corner.
-export const FLOATING_LEGEND_TOP_PX = 10;
 const useStyles = makeStyles()(theme => ({
     legend: {
         position: 'absolute',
@@ -27,6 +26,9 @@ const useStyles = makeStyles()(theme => ({
         border: `1px solid ${theme.palette.divider}`,
         borderRadius: 3,
         padding: 3,
+        // Two keys on one short display ran past its bottom edge and were cut
+        // there; the box scrolls inside the display instead.
+        overflowY: 'auto',
         fontSize: 10,
         zIndex: 100,
         // the default; `maxWidth` overrides it per display
@@ -89,6 +91,13 @@ const useStyles = makeStyles()(theme => ({
         overflow: 'hidden',
         textOverflow: 'ellipsis',
     },
+    // Wraps where every other line ellipsizes: a note is a sentence, and half of
+    // one says nothing.
+    sectionNote: {
+        color: theme.palette.text.secondary,
+        whiteSpace: 'normal',
+        marginBottom: 2,
+    },
     sectionClose: {
         font: 'inherit',
         lineHeight: 1,
@@ -236,10 +245,9 @@ const LegendItemList = observer(function LegendItemList({ items, maxItems, onIte
 // is more than one section, so a single-scheme legend looks unchanged. `title`
 // is a heading for the whole box, shown regardless of section count.
 //
-// `onItemClick` makes the rows act — for a key whose entries name groups of
-// rows, clicking one focuses those rows. It is handed the section too, so a
-// display with several vocabularies can act on the one that names rows and
-// leave the others inert.
+// `onItemClick` makes the rows of a section declaring `focusesRows` act —
+// clicking an entry focuses the rows it names. A section coloring features or
+// cells stays inert text beside it.
 const FloatingLegend = observer(function FloatingLegend({ items, sections, title, onDismiss, onDismissSection, onItemClick, maxItems = DEFAULT_MAX_ITEMS, maxWidth = DEFAULT_MAX_WIDTH, top = FLOATING_LEGEND_TOP_PX, }) {
     const { classes } = useStyles();
     const nonEmpty = nonEmptyLegendSections({ items, sections });
@@ -249,11 +257,11 @@ const FloatingLegend = observer(function FloatingLegend({ items, sections, title
     const multiSection = nonEmpty.length > 1;
     // portal above the inter-region padding masks so the key isn't buried at
     // whole-genome / multi-region scale (see TrackOverlayPortal)
-    return (_jsx(TrackOverlayPortal, { children: _jsxs("div", { className: cx(classes.legend, onDismiss && classes.withClose), style: { top, maxWidth }, "data-testid": "floating-legend", "data-gesture-owner": "true", children: [onDismiss ? (_jsx(Tooltip, { title: "Hide legend", children: _jsx("button", { type: "button", className: classes.closeButton, "aria-label": "Hide legend", onClick: () => {
+    return (_jsx(TrackOverlayPortal, { children: _jsxs("div", { className: cx(classes.legend, onDismiss && classes.withClose), style: { top, maxWidth, maxHeight: `calc(100% - ${top + 4}px)` }, "data-testid": "floating-legend", "data-gesture-owner": "true", children: [onDismiss ? (_jsx(Tooltip, { title: "Hide legend", children: _jsx("button", { type: "button", className: classes.closeButton, "aria-label": "Hide legend", onClick: () => {
                             onDismiss();
                         }, children: "\u00D7" }) })) : null, title ? _jsx("div", { className: classes.topTitle, children: title }) : null, nonEmpty.map(section => (_jsxs("div", { className: classes.section, children: [multiSection && section.title ? (_jsxs("div", { className: classes.sectionHeader, children: [_jsx("span", { className: classes.sectionTitle, children: section.title }), onDismissSection ? (_jsx(Tooltip, { title: `Hide ${section.title}`, children: _jsx("button", { type: "button", className: classes.sectionClose, "aria-label": `Hide ${section.title}`, onClick: () => {
                                             onDismissSection(section.id);
-                                        }, children: "\u00D7" }) })) : null] })) : null, _jsx(LegendItemList, { items: section.items, maxItems: maxItems, onItemClick: onItemClick
+                                        }, children: "\u00D7" }) })) : null] })) : null, section.note ? (_jsx("div", { className: classes.sectionNote, children: section.note })) : null, _jsx(LegendItemList, { items: section.items, maxItems: maxItems, onItemClick: onItemClick && section.focusesRows
                                 ? item => {
                                     onItemClick(item, section);
                                 }

package/esm/ScoreDomainCaption.d.ts

@@ -1,14 +1,15 @@
-export declare const SCORE_CAPTION_HEIGHT = 16;
 /**
  * The one-line `[min, max]` caption that stands in for a y axis where none can
  * be drawn — a scale whose bands are too short for tick labels, and a density
  * track whose rows each carry their own colour, so no single ramp describes
  * them. An axis stand-in rather than a key, which is why it is not a colour
  * scale and draws whether or not the legend does. Right-aligned to
- * `canvasWidth` at the top of the display.
+ * `canvasWidth` at the top of the display, led by the scale's `caption` where
+ * it has one, which has no gutter to sit in here.
  */
-export default function ScoreDomainCaption({ domain, scaleType, canvasWidth, }: {
+export default function ScoreDomainCaption({ domain, scaleType, canvasWidth, caption, }: {
     domain: [number, number];
     scaleType: string;
     canvasWidth: number;
+    caption?: string;
 }): import("react").JSX.Element;

package/esm/ScoreDomainCaption.js

@@ -1,21 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePalette } from '@jbrowse/core/ui/PaletteContext';
 import { measureLegendText } from '@jbrowse/core/ui/measureLegendText';
+import { formatScore } from '@jbrowse/core/util/numericUtils';
 import { stripAlpha } from '@jbrowse/core/util/svgColorProps';
-import { formatScore } from './formatScore.js';
-export const SCORE_CAPTION_HEIGHT = 16;
+import { SCORE_CAPTION_HEIGHT } from './yAxisConstants.js';
 /**
  * The one-line `[min, max]` caption that stands in for a y axis where none can
  * be drawn — a scale whose bands are too short for tick labels, and a density
  * track whose rows each carry their own colour, so no single ramp describes
  * them. An axis stand-in rather than a key, which is why it is not a colour
  * scale and draws whether or not the legend does. Right-aligned to
- * `canvasWidth` at the top of the display.
+ * `canvasWidth` at the top of the display, led by the scale's `caption` where
+ * it has one, which has no gutter to sit in here.
  */
-export default function ScoreDomainCaption({ domain, scaleType, canvasWidth, }) {
+export default function ScoreDomainCaption({ domain, scaleType, canvasWidth, caption, }) {
     const palette = usePalette();
     const suffix = scaleType === 'log' ? ' (log)' : scaleType === 'symlog' ? ' (symlog)' : '';
-    const text = `[${formatScore(domain[0])}, ${formatScore(domain[1])}]${suffix}`;
+    const text = `${caption ? `${caption} ` : ''}[${formatScore(domain[0])}, ${formatScore(domain[1])}]${suffix}`;
     const len = measureLegendText(text, 12);
     const xpos = Math.max(0, canvasWidth - len - 10);
     return (_jsxs("g", { children: [_jsx("rect", { x: xpos - 3, y: 0, width: len + 6, height: SCORE_CAPTION_HEIGHT, fill: stripAlpha(palette.background.paper), fillOpacity: 0.8 }), _jsx("text", { y: 12, x: xpos, fontSize: 12, fill: palette.text.primary, children: text })] }));

package/esm/ScoreRules.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePalette } from '@jbrowse/core/ui/PaletteContext';
-const DEFAULT_RULE_COLOR = 'rgb(120,120,120)';
+import { DEFAULT_RULE_COLOR } from './yAxisConstants.js';
 // Bare marks, no wrapping <svg>, so the on-screen overlay and the SVG export
 // draw the same elements from the same y. Same split as CrossHatchLines.
 export function ScoreRuleLines({ marks, width, offsetY = 0, }) {

package/esm/YScaleBar.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+import { AXIS_FONT_PX, TICK_LABEL_X_PX } from './yAxisConstants.js';
 import { clampStrokeInsideAxis } from './yScaleTicks.js';
 // Not an `observer`, and deliberately: there is nothing here to observe. Every
 // caller already reads `model.ticks` inside its own observer and hands the
@@ -42,5 +43,5 @@ export default function YScaleBar({ ticks, orientation, bandHeight, }) {
         const inset = Math.min(Math.max(sy, LABEL_HALF_HEIGHT_PX), bandHeight - LABEL_HALF_HEIGHT_PX);
         return inset === sy ? undefined : inset - sy;
     };
-    return (_jsxs("g", { fontSize: 10, textAnchor: isLeft ? 'end' : 'start', stroke: fg, strokeWidth: 1, children: [_jsx("path", { fill: "none", d: `M${k * tickLength} ${strokeY(yTop)}H0.5V${strokeY(yBottom)}H${k * tickLength}` }), items.map(({ value, y, label }) => (_jsxs("g", { transform: `translate(0,${strokeY(y)})`, children: [_jsx("line", { x2: k * tickLength }), _jsx("text", { stroke: bg, strokeWidth: 2.5, paintOrder: "stroke", fill: fg, y: labelDy(strokeY(y)), dy: "0.32em", x: k * 9, children: label ?? value })] }, `${value}-${y}`)))] }));
+    return (_jsxs("g", { fontSize: AXIS_FONT_PX, textAnchor: isLeft ? 'end' : 'start', stroke: fg, strokeWidth: 1, children: [_jsx("path", { fill: "none", d: `M${k * tickLength} ${strokeY(yTop)}H0.5V${strokeY(yBottom)}H${k * tickLength}` }), items.map(({ value, y, label }) => (_jsxs("g", { transform: `translate(0,${strokeY(y)})`, children: [_jsx("line", { x2: k * tickLength }), _jsx("text", { stroke: bg, strokeWidth: 2.5, paintOrder: "stroke", fill: fg, y: labelDy(strokeY(y)), dy: "0.32em", x: k * TICK_LABEL_X_PX, children: label ?? value })] }, `${value}-${y}`)))] }));
 }

package/esm/YScaleBarOverlay.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { VERTICAL_SCROLLBAR_CLEARANCE } from '@jbrowse/core/ui/VerticalScrollbar';
 import AxisGutter from './AxisGutter.js';
-import { axisGutterLeft } from './axisPlacement.js';
-import { AXIS_GUTTER_WIDTH_PX } from './yScaleTicks.js';
+import { axisGutterLeft, axisGutterWidth } from './axisPlacement.js';
 /**
  * The on-screen axis of one band: an `<svg>` the width of the gutter,
  * positioned absolutely over the band at `top`, with `AxisGutter` inside. A
@@ -15,7 +14,7 @@ export default function YScaleBarOverlay({ axis, top, width, }) {
             left: axisGutterLeft(axis, width, VERTICAL_SCROLLBAR_CLEARANCE),
             pointerEvents: 'none',
             height: axis.height,
-            width: AXIS_GUTTER_WIDTH_PX,
+            width: axisGutterWidth(axis),
             overflow: 'visible',
         }, children: _jsx(AxisGutter, { axis: axis }) }));
 }

package/esm/axisPlacement.d.ts

@@ -1,4 +1,4 @@
-import type { ValueScale } from './valueScale.ts';
+import type { ValueScale, YAxis } from './valueScale.ts';
 /**
  * Below this band height a full `YScaleBar`'s tick labels overlap each other,
  * so the chrome draws one `ScoreDomainCaption` for the scale instead of an
@@ -6,11 +6,29 @@ import type { ValueScale } from './valueScale.ts';
  * makes 30 the number.
  */
 export declare const COMPACT_AXIS_HEIGHT = 30;
+/**
+ * Whether a scale places anything by y, which is whether its rules draw: it
+ * rules at least one band, where `[]` is a scale mapped to colour instead.
+ */
+export declare function rulesABand(scale: Pick<ValueScale, 'bandTops'>): boolean;
 /**
  * Whether a scale gets an axis at all: it rules at least one band, and the
  * band has room for tick labels. A scale that fails either is captioned.
  */
 export declare function axisDrawn(scale: Pick<ValueScale, 'height' | 'bandTops'>): boolean;
+/**
+ * The y a scale's one caption centres on: halfway down the extent of the bands
+ * given, from the first's top tick to the last's bottom. One band gives the
+ * middle of its own axis.
+ */
+export declare function axisCaptionY(axis: Pick<YAxis, 'ticks'>, bandTops: number[]): number;
+/**
+ * How wide an axis's gutter is: the ordinary width, grown inward over the plot
+ * where a caption and the widest tick label cannot share it, so neither is
+ * drawn over the other. The caption keeps the outer edge and the labels stay
+ * beside the spine.
+ */
+export declare function axisGutterWidth(axis: Pick<YAxis, 'ticks' | 'caption'>): number;
 /** How far in from the plot's right edge a right-side gutter ends in an export. */
 export declare const AXIS_RIGHT_INSET_PX = 4;
 /**
@@ -19,7 +37,8 @@ export declare const AXIS_RIGHT_INSET_PX = 4;
  * scrollbar a display may mount on screen; a margin in an export). A left-side
  * axis takes the gutter at the display's left edge, past whatever panel the
  * scale's `left` reserves — except in an export, whose margin is the gutter,
- * so an axis nothing pushes right sits in the margin with its spine on the
- * content edge and its numbers outside the plot.
+ * so an axis nothing pushes right sits in the margin with its numbers outside
+ * the plot and its spine on the content edge, or past it by what
+ * `axisGutterWidth` grew.
  */
-export declare function axisGutterLeft(scale: Pick<ValueScale, 'side' | 'left'>, width: number, rightInset: number, exportContentLeft?: number): number;
+export declare function axisGutterLeft(axis: Pick<YAxis, 'side' | 'left' | 'ticks' | 'caption'>, width: number, rightInset: number, exportContentLeft?: number): number;

package/esm/axisPlacement.js

@@ -1,3 +1,5 @@
+import { measureText } from '@jbrowse/core/util/measureText';
+import { AXIS_FONT_PX, CAPTION_BAND_PX, TICK_LABEL_X_PX, } from './yAxisConstants.js';
 import { AXIS_GUTTER_WIDTH_PX } from './yScaleTicks.js';
 /**
  * Below this band height a full `YScaleBar`'s tick labels overlap each other,
@@ -6,12 +8,44 @@ import { AXIS_GUTTER_WIDTH_PX } from './yScaleTicks.js';
  * makes 30 the number.
  */
 export const COMPACT_AXIS_HEIGHT = 30;
+/**
+ * Whether a scale places anything by y, which is whether its rules draw: it
+ * rules at least one band, where `[]` is a scale mapped to colour instead.
+ */
+export function rulesABand(scale) {
+    return (scale.bandTops?.length ?? 1) > 0;
+}
 /**
  * Whether a scale gets an axis at all: it rules at least one band, and the
  * band has room for tick labels. A scale that fails either is captioned.
  */
 export function axisDrawn(scale) {
-    return ((scale.bandTops?.length ?? 1) > 0 && scale.height >= COMPACT_AXIS_HEIGHT);
+    return rulesABand(scale) && scale.height >= COMPACT_AXIS_HEIGHT;
+}
+/**
+ * The y a scale's one caption centres on: halfway down the extent of the bands
+ * given, from the first's top tick to the last's bottom. One band gives the
+ * middle of its own axis.
+ */
+export function axisCaptionY(axis, bandTops) {
+    const { yTop, yBottom } = axis.ticks;
+    return (Math.min(...bandTops) + yTop + Math.max(...bandTops) + yBottom) / 2;
+}
+/**
+ * How wide an axis's gutter is: the ordinary width, grown inward over the plot
+ * where a caption and the widest tick label cannot share it, so neither is
+ * drawn over the other. The caption keeps the outer edge and the labels stay
+ * beside the spine.
+ */
+export function axisGutterWidth(axis) {
+    if (!axis.caption) {
+        return AXIS_GUTTER_WIDTH_PX;
+    }
+    let widest = 0;
+    for (const { value, label } of axis.ticks.items) {
+        widest = Math.max(widest, measureText(label ?? value, AXIS_FONT_PX));
+    }
+    return Math.max(AXIS_GUTTER_WIDTH_PX, Math.ceil(CAPTION_BAND_PX + widest + TICK_LABEL_X_PX));
 }
 /** How far in from the plot's right edge a right-side gutter ends in an export. */
 export const AXIS_RIGHT_INSET_PX = 4;
@@ -21,14 +55,15 @@ export const AXIS_RIGHT_INSET_PX = 4;
  * scrollbar a display may mount on screen; a margin in an export). A left-side
  * axis takes the gutter at the display's left edge, past whatever panel the
  * scale's `left` reserves — except in an export, whose margin is the gutter,
- * so an axis nothing pushes right sits in the margin with its spine on the
- * content edge and its numbers outside the plot.
+ * so an axis nothing pushes right sits in the margin with its numbers outside
+ * the plot and its spine on the content edge, or past it by what
+ * `axisGutterWidth` grew.
  */
-export function axisGutterLeft(scale, width, rightInset, exportContentLeft) {
-    if (scale.side === 'right') {
-        return width - rightInset - AXIS_GUTTER_WIDTH_PX;
+export function axisGutterLeft(axis, width, rightInset, exportContentLeft) {
+    if (axis.side === 'right') {
+        return width - rightInset - axisGutterWidth(axis);
     }
-    const left = scale.left ?? 0;
+    const left = axis.left ?? 0;
     return exportContentLeft !== undefined && left === 0
         ? exportContentLeft - AXIS_GUTTER_WIDTH_PX
         : left;

package/esm/bottomRightCorner.d.ts

@@ -22,10 +22,9 @@
  * It has never been reachable: the two displays that render the control row
  * (alignments, canvas) are not among the four that report a `ready`-phase
  * status (clustering, on multi-wiggle / multi-row features / maf / the
- * multi-sample variant pair). That is the *reason* to make it structural rather
- * than to leave it — nothing on either side is aware of the constraint, so the
- * first display to want both would find the bug, and it presents as a status
- * message that silently never appears.
+ * multi-sample variant pair). The layout is structural anyway, because neither
+ * side checks for the constraint, so the first display to want both would hit
+ * the bug as a status message that never appears.
  *
  * `BottomRightIndicators` already described itself as "the single anchor point
  * for every bottom-right overlay ... so they lay out as one row instead of each

package/esm/bottomRightCorner.js

@@ -23,10 +23,9 @@ import { createContext } from 'react';
  * It has never been reachable: the two displays that render the control row
  * (alignments, canvas) are not among the four that report a `ready`-phase
  * status (clustering, on multi-wiggle / multi-row features / maf / the
- * multi-sample variant pair). That is the *reason* to make it structural rather
- * than to leave it — nothing on either side is aware of the constraint, so the
- * first display to want both would find the bug, and it presents as a status
- * message that silently never appears.
+ * multi-sample variant pair). The layout is structural anyway, because neither
+ * side checks for the constraint, so the first display to want both would hit
+ * the bug as a status message that never appears.
  *
  * `BottomRightIndicators` already described itself as "the single anchor point
  * for every bottom-right overlay ... so they lay out as one row instead of each

package/esm/chromeOverlayContext.d.ts

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

package/esm/chromeOverlayContext.js

@@ -18,10 +18,9 @@ import { createContext, use } from 'react';
 // `muiFreeSeam.test.ts` fails naming the import trail if that stops being true.
 /**
  * Runtime override for the overlay set. **Defaults to undefined, not to a
- * component set** — that is deliberate. A plain default would silently degrade
- * every display that renders outside a provider (unit tests, SVG export,
- * breakpoint-split-view's overlayUtils), and that degradation is invisible: the
- * display still works, it just stops looking like JBrowse. Undefined means
+ * component set**. A plain default would degrade every display that renders
+ * outside a provider (unit tests, SVG export, breakpoint-split-view's
+ * overlayUtils): the display would still work, but stop looking like JBrowse. Undefined means
  * "nobody asked", so `DisplayChrome` keeps its MUI set and nothing changes.
  *
  * This is the escape hatch for embedders who want JBrowse's *own* displays
@@ -37,7 +36,7 @@ const DisplayChromeOverlayContext = createContext(undefined);
 export const DisplayChromeOverlayProvider = DisplayChromeOverlayContext.Provider;
 /**
  * The set a provider installed, or `undefined` for "nobody asked". The caller
- * supplies the default, which is what keeps this module free of one.
+ * supplies the default, so this module binds none.
  */
 export function useChromeOverlayOverride() {
     return use(DisplayChromeOverlayContext);

package/esm/chromeOverlays.d.ts

@@ -54,8 +54,10 @@ export interface DisplayChromeOverlays {
         visible: boolean;
     }>;
     /**
-     * The loading scrim. `visible` is `displayPhase === 'loading'`; `immediate`
-     * asks it to skip its anti-flash delay because nothing is painted yet.
+     * The loading scrim. `visible` is `displayPhase` `loading` or `canceled`,
+     * the second drawn from `model.fetchCanceled` with Retry in place of Cancel;
+     * `immediate` asks it to skip its anti-flash delay because nothing is painted
+     * yet.
      *
      * Mounted unconditionally, so it must handle `visible === false` itself — and
      * that is load-bearing rather than a style choice: the anti-flash delay is