@jbrowse/display-ui 5.0.0-beta.4 → 5.0.0-beta.7

package/README.md

@@ -430,4 +430,34 @@ carries position only.
 
 [Source code](https://github.com/GMOD/jbrowse-components/blob/main/packages/display-ui/src/trackControl/useTrackControlMenu.tsx)
 
+### ValueScale
+
+A value scale a display places its y through, declared so the chrome can derive
+the axis from it — the score axis's counterpart to a colour scale.
+
+`domain` is the resolved `[min, max]`; `height` the band it rules and `offset`
+the inset of the plot box inside that band (`axisPlotBox(height, offset)`);
+`minimalTicks` and `symlogConstant` how the ticks are chosen. `ticks` is the
+display's own ladder where the band's arithmetic is its own (the coverage band's
+octaves against the shader's box, the read cloud's decades against the arc
+geometry); `ScoreScaleMixin` derives one through `computeYTicks` otherwise.
+
+`bandTops` is the screen y of each band the scale rules — one at 0 unless the
+display stacks the same plot: the multi-wiggle's rows, a grouped alignments
+track's coverage band per group, each projected through the display's own
+scroll; the chrome drops the ones off screen. `[]` is a scale the display maps
+to colour rather than to y (density rows each in their own colour), which gets
+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.
+
+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
+off what the display put in the band, never to choose between two drawings of it
+(ADR-109).
+
+[Source code](https://github.com/GMOD/jbrowse-components/blob/main/packages/display-ui/src/valueScale.ts)
+
 <!-- API_DOCS_END -->

package/esm/AxisGutter.d.ts

@@ -0,0 +1,12 @@
+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
+ * on-screen overlay and the export both draw through this, so the two cannot
+ * place a spine differently.
+ */
+export default function AxisGutter({ axis }: {
+    axis: YAxis;
+}): import("react").JSX.Element;

package/esm/AxisGutter.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+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;
+/**
+ * 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
+ * on-screen overlay and the export both draw through this, so the two cannot
+ * place a spine differently.
+ */
+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] }));
+}

package/esm/CrossHatches.d.ts

@@ -0,0 +1,12 @@
+import type { YScaleTicks } from './yScaleTicks.ts';
+export declare function CrossHatchLines({ ticks, width, offsetY, }: {
+    ticks: YScaleTicks;
+    width: number;
+    offsetY?: number;
+}): import("react").JSX.Element;
+export default function CrossHatches({ ticks, width, height, bandTops, }: {
+    ticks: YScaleTicks;
+    width: number;
+    height: number;
+    bandTops: number[];
+}): import("react").JSX.Element;

package/esm/CrossHatches.js

@@ -0,0 +1,31 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { clampStrokeInsideAxis } from './yScaleTicks.js';
+// Bare <line> set for the Y-scale tick guide lines, no wrapping <svg>. Shared by
+// the absolutely-positioned on-screen CrossHatches overlay and the flat SVG
+// export, so the two can't drift. `offsetY` is the band's top.
+export function CrossHatchLines({ ticks, width, offsetY = 0, }) {
+    return (_jsx(_Fragment, { children: ticks.items.map(({ value, y }) => {
+            // Same clamp the axis ticks take, so a guide line and the tick it
+            // belongs to can't disagree at the bottom edge — where, in multi-wiggle,
+            // "one pixel lower" is the next sample's row. Only that edge moves; the
+            // guide lines don't crispen to a half pixel the way the axis does.
+            const lineY = offsetY + clampStrokeInsideAxis(y, ticks.yBottom);
+            return (_jsx("line", { x1: 0, x2: width, y1: lineY, y2: lineY, stroke: "rgb(200,200,200)", 
+                // a separate stroke-opacity attribute (not baked into an rgba()
+                // string) survives the SVG export, whose renderToStaticMarkup strips
+                // rgba() alpha
+                strokeOpacity: 0.8, strokeWidth: 1 }, `${value}-${y}`));
+        }) }));
+}
+// Horizontal guide lines at each Y-scale tick, once per band the scale rules.
+// Pointer-events disabled so the underlying canvas still receives mouse events.
+export default function CrossHatches({ ticks, width, height, bandTops, }) {
+    return (_jsx("svg", { style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            pointerEvents: 'none',
+            height,
+            width,
+        }, children: bandTops.map(top => (_jsx(CrossHatchLines, { ticks: ticks, width: width, offsetY: top }, top))) }));
+}

package/esm/FloatingLegend.d.ts

@@ -1,11 +1,10 @@
 import type { LegendItem, LegendSection } from '@jbrowse/core/ui/legendSpec';
-import type { ReactNode } from 'react';
-export type { LegendItem, LegendMark, LegendSection, LegendSpec, LegendSwatch, } from '@jbrowse/core/ui/legendSpec';
-declare const FloatingLegend: ({ items, sections, title, onDismiss, onDismissSection, onItemClick, maxItems, maxWidth, top, children, }: {
+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[];
     sections?: LegendSection[];
     title?: string;
-    children?: ReactNode;
     onDismiss?: () => void;
     onDismissSection?: (id: string) => void;
     onItemClick?: (item: LegendItem, section: LegendSection) => void;

package/esm/FloatingLegend.js

@@ -10,6 +10,8 @@ import { cx, makeStyles } from '@jbrowse/core/util/tss-react';
 import { observer } from 'mobx-react';
 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',
@@ -134,6 +136,24 @@ const useStyles = makeStyles()(theme => ({
         overflow: 'hidden',
         textOverflow: 'ellipsis',
     },
+    gradientRow: {
+        marginBottom: 1,
+    },
+    gradientBar: {
+        width: GRADIENT_BAR_WIDTH,
+        height: 10,
+        borderRadius: 2,
+        border: `1px solid ${theme.palette.divider}`,
+        // clip the gradient to the padding box so it doesn't paint under the
+        // translucent divider border — otherwise the border composites over the
+        // gradient's end and the edge renders a dark sliver
+        backgroundClip: 'padding-box',
+    },
+    gradientLabels: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        width: GRADIENT_BAR_WIDTH,
+    },
     // was `<Link component="button" underline="hover">`, which is the same
     // element with Material's typography on it — see `closeButton` above for why
     // that mattered
@@ -155,9 +175,33 @@ const useStyles = makeStyles()(theme => ({
 }));
 const DEFAULT_MAX_ITEMS = 12;
 const DEFAULT_MAX_WIDTH = 200;
-// Side of one mark. The old fixed color box's size, kept so a legend of plain
-// fills is pixel-identical to what shipped before marks existed.
+const GRADIENT_BAR_WIDTH = 100;
+// Side of one swatch box.
 const SWATCH = 12;
+// A ramp row: the caption, the bar and the domain ends. The bar is a CSS
+// gradient over the same stops the export's <linearGradient> takes, so the
+// two draw one ramp. Stops are flattened over the paper because a translucent
+// first stop (Hi-C's juicebox fade) rasterizes to a dark sliver at the bar's
+// left edge.
+function gradientCss({ stops }, paper) {
+    const list = stops.map(({ color, opacity = 1, offset }) => {
+        const flat = opacity >= 1
+            ? color
+            : `color-mix(in srgb, ${color} ${Math.round(opacity * 100)}%, ${paper})`;
+        return `${flat} ${offset * 100}%`;
+    });
+    return `linear-gradient(to right, ${list.join(', ')})`;
+}
+function GradientRow({ label, gradient, }) {
+    const { classes, theme } = useStyles();
+    return (_jsxs("div", { className: classes.gradientRow, children: [label ? _jsx("div", { className: classes.label, children: label }) : null, _jsx("div", { className: classes.gradientBar, 
+                // backgroundImage (longhand), not the `background` shorthand: the
+                // shorthand resets background-clip back to border-box, undoing the
+                // padding-box clip
+                style: {
+                    backgroundImage: gradientCss(gradient, theme.palette.background.paper),
+                } }), _jsxs("div", { className: classes.gradientLabels, children: [_jsx("span", { children: gradient.minLabel }), _jsx("span", { children: gradient.maxLabel })] })] }));
+}
 // One list of swatches with its own independent collapse state, so each section
 // in a multi-section legend expands/collapses on its own.
 const LegendItemList = observer(function LegendItemList({ items, maxItems, onItemClick, }) {
@@ -167,12 +211,17 @@ const LegendItemList = observer(function LegendItemList({ items, maxItems, onIte
     const shown = collapsible && !expanded ? items.slice(0, maxItems) : items;
     const hiddenCount = items.length - maxItems;
     // Every row reserves the widest row's swatch column, so labels stay in one
-    // vertical line whether a row draws one mark or two — and so a color-less
+    // vertical line whether a row draws one box or two — and so a color-less
     // heading row indents like the swatches it heads, as the fixed-size box it
     // replaces used to.
     const columns = Math.max(1, ...shown.map(i => legendSwatches(i).length));
     return (_jsxs(_Fragment, { children: [shown.map((item, i) => {
-                const row = (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.swatches, style: { minWidth: columns * SWATCH + (columns - 1) * 2 }, children: legendSwatches(item).map(swatch => (_jsx("svg", { width: SWATCH, height: SWATCH, children: _jsx(LegendSwatchGlyph, { swatch: swatch, size: SWATCH }) }, `${swatch.color}-${swatch.mark ?? 'fill'}`))) }), _jsx("span", { className: classes.label, children: item.label })] }));
+                if (item.gradient) {
+                    return (_jsx(GradientRow
+                    // eslint-disable-next-line @eslint-react/no-array-index-key
+                    , { label: item.label, gradient: item.gradient }, `${item.label}-${i}`));
+                }
+                const row = (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.swatches, style: { minWidth: columns * SWATCH + (columns - 1) * 2 }, children: legendSwatches(item).map(swatch => (_jsx("svg", { width: SWATCH, height: SWATCH, children: _jsx(LegendSwatchGlyph, { swatch: swatch, size: SWATCH }) }, swatch.color))) }), _jsx("span", { className: classes.label, children: item.label })] }));
                 return onItemClick ? (_jsx("button", { type: "button", className: cx(classes.item, classes.itemButton), title: "Show only these rows", onClick: () => {
                         onItemClick(item);
                     }, children: row }, `${item.label}-${i}`)) : (_jsx("div", { className: classes.item, children: row }, `${item.label}-${i}`));
@@ -191,10 +240,10 @@ const LegendItemList = observer(function LegendItemList({ items, maxItems, onIte
 // 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.
-const FloatingLegend = observer(function FloatingLegend({ items, sections, title, onDismiss, onDismissSection, onItemClick, maxItems = DEFAULT_MAX_ITEMS, maxWidth = DEFAULT_MAX_WIDTH, top = 10, children, }) {
+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 });
-    if (nonEmpty.length === 0 && !children) {
+    if (nonEmpty.length === 0) {
         return null;
     }
     const multiSection = nonEmpty.length > 1;
@@ -202,7 +251,7 @@ const FloatingLegend = observer(function FloatingLegend({ items, sections, title
     // 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: () => {
                             onDismiss();
-                        }, children: "\u00D7" }) })) : null, title ? _jsx("div", { className: classes.topTitle, children: title }) : null, children, 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: () => {
+                        }, 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
                                 ? item => {

package/esm/ScoreDomainCaption.d.ts

@@ -0,0 +1,14 @@
+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.
+ */
+export default function ScoreDomainCaption({ domain, scaleType, canvasWidth, }: {
+    domain: [number, number];
+    scaleType: string;
+    canvasWidth: number;
+}): import("react").JSX.Element;

package/esm/ScoreDomainCaption.js

@@ -0,0 +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 { stripAlpha } from '@jbrowse/core/util/svgColorProps';
+import { formatScore } from './formatScore.js';
+export 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.
+ */
+export default function ScoreDomainCaption({ domain, scaleType, canvasWidth, }) {
+    const palette = usePalette();
+    const suffix = scaleType === 'log' ? ' (log)' : scaleType === 'symlog' ? ' (symlog)' : '';
+    const text = `[${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.d.ts

@@ -0,0 +1,21 @@
+/**
+ * One horizontal rule across a score plot at a chosen value, placed in the
+ * plot's own pixel space; `label` is free text the reader chose.
+ */
+export interface ScoreRuleMark {
+    value: number;
+    y: number;
+    label?: string;
+    color?: string;
+}
+export declare function ScoreRuleLines({ marks, width, offsetY, }: {
+    marks: ScoreRuleMark[];
+    width: number;
+    offsetY?: number;
+}): import("react").JSX.Element;
+export default function ScoreRules({ marks, width, height, bandTops, }: {
+    marks: ScoreRuleMark[];
+    width: number;
+    height: number;
+    bandTops: number[];
+}): import("react").JSX.Element;

package/esm/ScoreRules.js

@@ -0,0 +1,37 @@
+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)';
+// 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, }) {
+    // A caption sits over the plot, not beside it, so it needs the halo the tick
+    // labels next to it already draw (YScaleBar) — without one a rule crossing
+    // filled bars captions itself in grey on the fill and cannot be read. From
+    // the palette rather than a hardcoded white, which inverts into a glare in
+    // dark mode.
+    const haloColor = usePalette().background.default;
+    return (_jsx(_Fragment, { children: marks.map(({ value, label, color, y }) => {
+            const lineY = offsetY + y;
+            const stroke = color ?? DEFAULT_RULE_COLOR;
+            return (_jsxs("g", { children: [_jsx("line", { x1: 0, x2: width, y1: lineY, y2: lineY, stroke: stroke, 
+                        // separate attribute rather than an rgba() string: the SVG
+                        // export's renderToStaticMarkup strips rgba() alpha
+                        strokeOpacity: 0.9, strokeWidth: 1, strokeDasharray: "4 3" }), label ? (_jsx("text", { x: width - 4, y: lineY - 2, textAnchor: "end", fontSize: 10, 
+                        // full alpha, unlike the line: 0.9 is there to let the rule
+                        // recede into the plot, and a caption that has to be read wants
+                        // the opposite
+                        fill: stroke, stroke: haloColor, strokeWidth: 2.5, paintOrder: "stroke", children: label })) : null] }, `${value}-${y}`));
+        }) }));
+}
+// Once per band the scale rules, like CrossHatches; pointer-events disabled so
+// the canvas underneath still gets mouse events.
+export default function ScoreRules({ marks, width, height, bandTops, }) {
+    return (_jsx("svg", { style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            pointerEvents: 'none',
+            height,
+            width,
+        }, children: bandTops.map(top => (_jsx(ScoreRuleLines, { marks: marks, width: width, offsetY: top }, top))) }));
+}

package/esm/YScaleBar.d.ts

@@ -0,0 +1,6 @@
+import type { YScaleTicks } from './yScaleTicks.ts';
+export default function YScaleBar({ ticks, orientation, bandHeight, }: {
+    ticks: YScaleTicks | undefined;
+    orientation?: 'left' | 'right';
+    bandHeight?: number;
+}): import("react").JSX.Element | null;

package/esm/YScaleBar.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePalette } from '@jbrowse/core/ui/PaletteContext';
+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
+// resolved plain object down, and `usePalette` is a React context, not MobX.
+// Wrapping it anyway allocated a Reaction per instance — multi-wiggle renders
+// one per sample row, on screen as well as in export — and, per CLAUDE.md, put
+// the component out of `babel-plugin-react-compiler`'s reach, so it got neither
+// the MobX tracking it doesn't need nor the memoization it does. Its sibling
+// `CrossHatchLines`, consuming the same ticks, is already plain.
+// Half the vertical space a 10px label needs, halo included: digits reach about
+// 3.6px above the centered baseline and the 2.5px-wide background stroke another
+// 1.25px past that.
+const LABEL_HALF_HEIGHT_PX = 5;
+export default function YScaleBar({ ticks, orientation, bandHeight, }) {
+    const palette = usePalette();
+    if (!ticks) {
+        return null;
+    }
+    const { items, yTop, yBottom } = ticks;
+    const bg = palette.background.default;
+    const fg = palette.text.primary;
+    const isLeft = orientation !== 'right';
+    const k = isLeft ? -1 : 1;
+    const tickLength = 6;
+    // Crispen to `y + 0.5` so each 1px stroke fills one pixel instead of
+    // straddling two, then clamp, which only bites at the bottom edge: there the
+    // stroke goes on the last pixel inside the box rather than the first one
+    // below it.
+    const strokeY = (y) => clampStrokeInsideAxis(y + 0.5, yBottom);
+    // The tick keeps the group transform; only the text moves off it, and only
+    // under `bandHeight` within half a label of an end. A tick is where the data
+    // is, so it never moves — the label is then drawn against the tick rather than
+    // across it, which is what any axis does at the edge of its own frame.
+    // `undefined` rather than 0 for the labels that don't move, so the markup this
+    // emits is unchanged wherever the inset doesn't apply.
+    const labelDy = (sy) => {
+        if (bandHeight === undefined) {
+            return undefined;
+        }
+        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}`)))] }));
+}

package/esm/YScaleBarOverlay.d.ts

@@ -0,0 +1,11 @@
+import type { YAxis } from './valueScale.ts';
+/**
+ * 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
+ * right-side gutter clears the vertical scrollbar a display may mount.
+ */
+export default function YScaleBarOverlay({ axis, top, width, }: {
+    axis: YAxis;
+    top: number;
+    width: number;
+}): import("react").JSX.Element;

package/esm/YScaleBarOverlay.js

@@ -0,0 +1,21 @@
+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';
+/**
+ * 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
+ * right-side gutter clears the vertical scrollbar a display may mount.
+ */
+export default function YScaleBarOverlay({ axis, top, width, }) {
+    return (_jsx("svg", { style: {
+            position: 'absolute',
+            top,
+            left: axisGutterLeft(axis, width, VERTICAL_SCROLLBAR_CLEARANCE),
+            pointerEvents: 'none',
+            height: axis.height,
+            width: AXIS_GUTTER_WIDTH_PX,
+            overflow: 'visible',
+        }, children: _jsx(AxisGutter, { axis: axis }) }));
+}

package/esm/axisPlacement.d.ts

@@ -0,0 +1,25 @@
+import type { ValueScale } 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
+ * axis per band. Its own module because `YScaleBar`'s label geometry is what
+ * makes 30 the number.
+ */
+export declare const COMPACT_AXIS_HEIGHT = 30;
+/**
+ * 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;
+/** 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;
+/**
+ * Left edge of the gutter an axis is drawn in. A right-side axis takes the
+ * gutter inside the plot's right edge, less `rightInset` (the vertical
+ * 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.
+ */
+export declare function axisGutterLeft(scale: Pick<ValueScale, 'side' | 'left'>, width: number, rightInset: number, exportContentLeft?: number): number;

package/esm/axisPlacement.js

@@ -0,0 +1,35 @@
+import { AXIS_GUTTER_WIDTH_PX } from './yScaleTicks.js';
+/**
+ * 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
+ * axis per band. Its own module because `YScaleBar`'s label geometry is what
+ * makes 30 the number.
+ */
+export const COMPACT_AXIS_HEIGHT = 30;
+/**
+ * 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);
+}
+/** How far in from the plot's right edge a right-side gutter ends in an export. */
+export const AXIS_RIGHT_INSET_PX = 4;
+/**
+ * Left edge of the gutter an axis is drawn in. A right-side axis takes the
+ * gutter inside the plot's right edge, less `rightInset` (the vertical
+ * 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.
+ */
+export function axisGutterLeft(scale, width, rightInset, exportContentLeft) {
+    if (scale.side === 'right') {
+        return width - rightInset - AXIS_GUTTER_WIDTH_PX;
+    }
+    const left = scale.left ?? 0;
+    return exportContentLeft !== undefined && left === 0
+        ? exportContentLeft - AXIS_GUTTER_WIDTH_PX
+        : left;
+}

package/esm/formatScore.d.ts

@@ -0,0 +1 @@
+export declare function formatScore(n: number): string;

package/esm/formatScore.js

@@ -0,0 +1,14 @@
+// Only the fractional padding toPrecision adds is noise; guard on the decimal
+// point because toPrecision can round UP out of the fractional form entirely —
+// 99.95 comes back as "100", where an unguarded trailing-zero strip eats two
+// significant digits and reports the score as 1.
+export function formatScore(n) {
+    if (n === 0) {
+        return '0';
+    }
+    if (Math.abs(n) >= 100) {
+        return n.toFixed(0);
+    }
+    const s = n.toPrecision(3);
+    return s.includes('.') ? s.replace(/\.?0+$/, '') : s;
+}

package/esm/index.d.ts

@@ -7,7 +7,7 @@ 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 } from './FloatingLegend.tsx';
+export { default as FloatingLegend, FLOATING_LEGEND_TOP_PX, } from './FloatingLegend.tsx';
 export type { LegendItem, LegendSection } from './FloatingLegend.tsx';
 export { FloatingSvgOverlay } from './FloatingSvgOverlay.tsx';
 export { default as Tooltip } from './tooltip/Tooltip.tsx';
@@ -21,3 +21,16 @@ 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 { 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 as AxisGutter } from './AxisGutter.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 { 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,7 @@ 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 } from './FloatingLegend.js';
+export { default as FloatingLegend, FLOATING_LEGEND_TOP_PX, } from './FloatingLegend.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
@@ -55,3 +55,13 @@ export { isLiveModel } from './isLiveModel.js';
 // contract the prop types cannot carry, so it belongs with them rather than
 // 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 as AxisGutter } from './AxisGutter.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 { CrossHatchLines, default as CrossHatches } from './CrossHatches.js';
+export { ScoreRuleLines, default as ScoreRules } from './ScoreRules.js';

package/esm/valueScale.d.ts

@@ -0,0 +1,50 @@
+import type { YScaleTicks } from './yScaleTicks.ts';
+export type AxisSide = 'left' | 'right';
+/**
+ * #api
+ * A value scale a display places its y through, declared so the chrome can
+ * derive the axis from it — the score axis's counterpart to a colour scale.
+ *
+ * `domain` is the resolved `[min, max]`; `height` the band it rules and
+ * `offset` the inset of the plot box inside that band (`axisPlotBox(height,
+ * offset)`); `minimalTicks` and `symlogConstant` how the ticks are chosen.
+ * `ticks` is the display's own ladder where the band's arithmetic is its own
+ * (the coverage band's octaves against the shader's box, the read cloud's
+ * decades against the arc geometry); `ScoreScaleMixin` derives one through
+ * `computeYTicks` otherwise.
+ *
+ * `bandTops` is the screen y of each band the scale rules — one at 0 unless
+ * the display stacks the same plot: the multi-wiggle's rows, a grouped
+ * alignments track's coverage band per group, each projected through the
+ * display's own scroll; the chrome drops the ones off screen. `[]` is a scale
+ * the display maps to colour rather than to y (density rows each in their own
+ * colour), which gets 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.
+ *
+ * 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 off what the display put in the band, never to choose between two
+ * drawings of it (ADR-109).
+ */
+export interface ValueScale {
+    domain: [number, number] | undefined;
+    scaleType: string;
+    height: number;
+    offset?: number;
+    minimalTicks?: boolean;
+    symlogConstant?: number;
+    ticks?: YScaleTicks;
+    bandTops?: number[];
+    side?: AxisSide;
+    left?: number;
+    caption?: string;
+}
+/** A value scale whose ticks resolved: what the chrome draws. */
+export interface YAxis extends ValueScale {
+    domain: [number, number];
+    ticks: YScaleTicks;
+}

package/esm/valueScale.js

@@ -0,0 +1 @@
+export {};

package/esm/yAxisConstants.d.ts

@@ -0,0 +1 @@
+export declare const YSCALEBAR_LABEL_OFFSET = 5;

package/esm/yAxisConstants.js

@@ -0,0 +1,5 @@
+// Vertical inset a plot box reserves above and below itself so the top and
+// bottom y-axis labels aren't clipped. Its own module because both index.ts
+// (which re-exports computeYTicks) and computeYTicks.ts need it — importing it
+// from index.ts would close a cycle.
+export const YSCALEBAR_LABEL_OFFSET = 5;

package/esm/yScaleTicks.d.ts

@@ -0,0 +1,48 @@
+export interface YScaleTicks {
+    items: {
+        value: number;
+        y: number;
+        label?: string;
+    }[];
+    yTop: number;
+    yBottom: number;
+}
+/**
+ * The plot box a wiggle-family display insets inside its own height, for both
+ * sides of the contract above: the renderer positions its canvas at `yTop` and
+ * draws `plotHeight` tall, and the axis puts domain-max at `yTop` and
+ * domain-min at `yBottom`.
+ *
+ * One function because the two have to agree exactly, and `height - 2 * offset`
+ * spelled out at each end is how they stopped: `computeYTicks` derived its own
+ * bottom as `height - offset - 1`, and every tick above it inherited a fraction
+ * of that pixel.
+ */
+export declare function axisPlotBox(height: number, offset?: number): {
+    yTop: number;
+    yBottom: number;
+    plotHeight: number;
+};
+/**
+ * Screen y for an already-normalized ([0,1], 0 at domain-min) score. The
+ * composition of {@link axisPlotBox} with a `makeScoreNormalizer` result, which
+ * is what a tick at that score must land on.
+ */
+export declare function scoreToAxisY(normalized: number, box: ReturnType<typeof axisPlotBox>): number;
+/**
+ * Width of the gutter an axis is drawn in, on screen and in the export
+ * margin alike. `YScaleBar` grows its ticks and numbers away from the spine,
+ * and `x = ±9`, `fontSize 10` put a label of ordinary width inside this many
+ * px; the alignments coverage axis and the MAF band axes had each arrived at
+ * the same number independently, so a change to the labels moved neither.
+ */
+export declare const AXIS_GUTTER_WIDTH_PX = 50;
+/**
+ * Keep a 1px stroke's center inside the axis box. At `yBottom` — the box's own
+ * bottom edge — the stroke has to cover the pixel *above* the boundary, since
+ * the one below belongs to whatever is drawn next; in multi-wiggle, where rows
+ * stack edge to edge, that is literally the next sample's first row of pixels.
+ * Callers pass whatever stroke center their own convention gives (the axis
+ * crispens to `y + 0.5`, the guide lines don't); only the bottom edge moves.
+ */
+export declare function clampStrokeInsideAxis(strokeY: number, yBottom: number): number;

package/esm/yScaleTicks.js

@@ -0,0 +1,46 @@
+import { YSCALEBAR_LABEL_OFFSET } from './yAxisConstants.js';
+/**
+ * The plot box a wiggle-family display insets inside its own height, for both
+ * sides of the contract above: the renderer positions its canvas at `yTop` and
+ * draws `plotHeight` tall, and the axis puts domain-max at `yTop` and
+ * domain-min at `yBottom`.
+ *
+ * One function because the two have to agree exactly, and `height - 2 * offset`
+ * spelled out at each end is how they stopped: `computeYTicks` derived its own
+ * bottom as `height - offset - 1`, and every tick above it inherited a fraction
+ * of that pixel.
+ */
+export function axisPlotBox(height, offset = YSCALEBAR_LABEL_OFFSET) {
+    return {
+        yTop: offset,
+        yBottom: height - offset,
+        plotHeight: height - 2 * offset,
+    };
+}
+/**
+ * Screen y for an already-normalized ([0,1], 0 at domain-min) score. The
+ * composition of {@link axisPlotBox} with a `makeScoreNormalizer` result, which
+ * is what a tick at that score must land on.
+ */
+export function scoreToAxisY(normalized, box) {
+    return box.yTop + (1 - normalized) * box.plotHeight;
+}
+/**
+ * Width of the gutter an axis is drawn in, on screen and in the export
+ * margin alike. `YScaleBar` grows its ticks and numbers away from the spine,
+ * and `x = ±9`, `fontSize 10` put a label of ordinary width inside this many
+ * px; the alignments coverage axis and the MAF band axes had each arrived at
+ * the same number independently, so a change to the labels moved neither.
+ */
+export const AXIS_GUTTER_WIDTH_PX = 50;
+/**
+ * Keep a 1px stroke's center inside the axis box. At `yBottom` — the box's own
+ * bottom edge — the stroke has to cover the pixel *above* the boundary, since
+ * the one below belongs to whatever is drawn next; in multi-wiggle, where rows
+ * stack edge to edge, that is literally the next sample's first row of pixels.
+ * Callers pass whatever stroke center their own convention gives (the axis
+ * crispens to `y + 0.5`, the guide lines don't); only the bottom edge moves.
+ */
+export function clampStrokeInsideAxis(strokeY, yBottom) {
+    return Math.min(strokeY, yBottom - 0.5);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/display-ui",
-  "version": "5.0.0-beta.4",
+  "version": "5.0.0-beta.7",
   "type": "module",
   "description": "The UI a display draws that is not data: the swappable chrome contract, its toolkit-free implementations, and the track overlay layer",
   "keywords": [
@@ -18,13 +18,17 @@
   },
   "author": "JBrowse Team",
   "main": "esm/index.js",
+  "exports": {
+    ".": "./esm/index.js",
+    "./yAxisConstants": "./esm/yAxisConstants.js"
+  },
   "files": [
     "esm"
   ],
   "dependencies": {
     "@jbrowse/mobx-state-tree": "^6.5.1",
     "mobx-react": "^10.0.2",
-    "@jbrowse/core": "^5.0.0-beta.4"
+    "@jbrowse/core": "^5.0.0-beta.7"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -41,8 +45,5 @@
     "clean": "rimraf esm *.tsbuildinfo",
     "prebuild": "pnpm clean"
   },
-  "types": "esm/index.d.ts",
-  "exports": {
-    ".": "./esm/index.js"
-  }
+  "types": "esm/index.d.ts"
 }