@jbrowse/render-core 5.0.0-beta.11 → 5.0.0-beta.14

package/esm/marks/index.d.ts

@@ -4,11 +4,13 @@ export { planMarks } from './markPlan.ts';
 export { inkOfInstances, shiftInk } from './markInk.ts';
 export { backToFront, nearestMarkHit, valueWindow } from './nearestMarkHit.ts';
 export { barMark } from './barMark.ts';
-export { pointMark } from './pointMark.ts';
+export { pointInstance, pointMark } from './pointMark.ts';
 export { ruleMark } from './ruleMark.ts';
 export { spanMark } from './spanMark.ts';
-export { lineCenterMark, lineMarkOf, lineStepMark } from './lineMark.ts';
-export { linkFeet, linkMark, LINK_ELSEWHERE, LINK_NO_REGION, } from './linkMark.ts';
+export { BandPen, lineCenterMark, lineMarkOf, lineStepMark, } from './lineMark.ts';
+export { linkApex, linkLabelAnchor, linkFeet, linkInstance, linkMark, LINK_ELSEWHERE, LINK_NO_REGION, } from './linkMark.ts';
+export { connectorEnds, connectorMark } from './connectorMark.ts';
+export { CONNECTOR_ARROW, CONNECTOR_BOW, CONNECTOR_DASHED, CONNECTOR_LEADING_2, CONNECTOR_MAX_REACH_PX, CONNECTOR_MINUS_1, CONNECTOR_MINUS_2, CONNECTOR_STRAIGHT, } from '../shaders/connectorMark.consts.generated.ts';
 export { ellipseDistance, ellipseNearest } from './ellipseDistance.ts';
 export { appendGlyph, pointInsetPx } from './glyphPaint.ts';
 export { recordPath } from './pathRecorder.ts';
@@ -16,7 +18,7 @@ export { abgrToCssRgba, makeAbgrFill } from './colorFill.ts';
 export { RAMP_NOT_A_NUMBER_COLOR, RAMP_NO_VALUE_BITS, RAMP_NO_VALUE_COLOR, } from '../shaders/markColor.generated.ts';
 export { instanceColor, isThreshold, keepRampValues, paintColors, rampUniforms, rampValueBits, thresholdBandOf, } from './markRamp.ts';
 export { HIDDEN_ROW, NO_ROW_COLOR, RowKeys, buildRowTable } from './rowTable.ts';
-export { keySlot, rowColor, rowSlot } from './rowLane.ts';
+export { keySlot, rowColor, rowSlot, rowTableKeys, rowTableTextures, } from './rowLane.ts';
 export { rowSpanIndex, spansInRow } from './rowSpanIndex.ts';
 export type { MarkPlan } from './markPlan.ts';
 export type { MarkInstance } from './markInk.ts';
@@ -27,7 +29,8 @@ export type { PointChannels, PointParams } from './pointMark.ts';
 export type { RuleChannels, RuleParams } from './ruleMark.ts';
 export type { SpanChannels, SpanParams } from './spanMark.ts';
 export type { LineChannels, LineInterpolate, LineParams } from './lineMark.ts';
-export type { LinkChannels, LinkParams, LinkRegion, LinkSizeScale, } from './linkMark.ts';
+export type { LinkApex, LinkChannels, LinkParams, LinkRegion, LinkSizeScale, } from './linkMark.ts';
+export type { ConnectorChannels, ConnectorParams } from './connectorMark.ts';
 export type { RowTable } from './rowTable.ts';
 export type { RowSpanIndex } from './rowSpanIndex.ts';
 export type { ColorChannel } from './markRamp.ts';

package/esm/marks/index.js

@@ -4,11 +4,13 @@ export { planMarks } from './markPlan.js';
 export { inkOfInstances, shiftInk } from './markInk.js';
 export { backToFront, nearestMarkHit, valueWindow } from './nearestMarkHit.js';
 export { barMark } from './barMark.js';
-export { pointMark } from './pointMark.js';
+export { pointInstance, pointMark } from './pointMark.js';
 export { ruleMark } from './ruleMark.js';
 export { spanMark } from './spanMark.js';
-export { lineCenterMark, lineMarkOf, lineStepMark } from './lineMark.js';
-export { linkFeet, linkMark, LINK_ELSEWHERE, LINK_NO_REGION, } from './linkMark.js';
+export { BandPen, lineCenterMark, lineMarkOf, lineStepMark, } from './lineMark.js';
+export { linkApex, linkLabelAnchor, linkFeet, linkInstance, linkMark, LINK_ELSEWHERE, LINK_NO_REGION, } from './linkMark.js';
+export { connectorEnds, connectorMark } from './connectorMark.js';
+export { CONNECTOR_ARROW, CONNECTOR_BOW, CONNECTOR_DASHED, CONNECTOR_LEADING_2, CONNECTOR_MAX_REACH_PX, CONNECTOR_MINUS_1, CONNECTOR_MINUS_2, CONNECTOR_STRAIGHT, } from '../shaders/connectorMark.consts.generated.js';
 export { ellipseDistance, ellipseNearest } from './ellipseDistance.js';
 export { appendGlyph, pointInsetPx } from './glyphPaint.js';
 export { recordPath } from './pathRecorder.js';
@@ -16,5 +18,5 @@ export { abgrToCssRgba, makeAbgrFill } from './colorFill.js';
 export { RAMP_NOT_A_NUMBER_COLOR, RAMP_NO_VALUE_BITS, RAMP_NO_VALUE_COLOR, } from '../shaders/markColor.generated.js';
 export { instanceColor, isThreshold, keepRampValues, paintColors, rampUniforms, rampValueBits, thresholdBandOf, } from './markRamp.js';
 export { HIDDEN_ROW, NO_ROW_COLOR, RowKeys, buildRowTable } from './rowTable.js';
-export { keySlot, rowColor, rowSlot } from './rowLane.js';
+export { keySlot, rowColor, rowSlot, rowTableKeys, rowTableTextures, } from './rowLane.js';
 export { rowSpanIndex, spansInRow } from './rowSpanIndex.js';

package/esm/marks/lineMark.d.ts

@@ -1,25 +1,34 @@
 import type { ColorChannel } from './markRamp.ts';
 import type { RowChannel, RowParams } from './rowLane.ts';
-import type { MarkColorScale, MarkShape } from './types.ts';
+import type { MarkColorScale, MarkContext2D, MarkShape } from './types.ts';
 import type { MarkValueScale } from './valueScale.ts';
 /**
  * The `line` shape's channels: a stroke through consecutive instances of one
- * row, in the order given, each instance a span from `x` to `x2` at `y` on the
- * value scale. `gapBp` is the linear variant's break: a midpoint further than
- * that from the previous one on its row starts a new run. It rides with the
- * data, as the neighbour fields the packer derives from it do, so both
- * backends break in the same place; absent, a row is one run.
+ * row and one `series`, in the order given, each instance a span from `x` to
+ * `x2` at `y` on the value scale. The caller hands each series' instances
+ * together; a change of row or series starts a new run, and absent, a row is
+ * one series. `gapBp` is the linear variant's break: a midpoint further than
+ * that from the previous one starts a new run. Both ride with the data, as
+ * the neighbour fields the packer derives from them do, so both backends
+ * break in the same place.
  */
 export interface LineChannels extends ColorChannel, RowChannel {
     x: Uint32Array;
     x2: Uint32Array;
     y: Float32Array;
+    series?: Uint32Array;
     gapBp?: number;
     count: number;
 }
 export interface LineParams extends RowParams, MarkValueScale {
-    /** The quantitative colour scale, for a line whose colour is a ramp or a threshold. */
+    /** The quantitative color scale, for a line whose color is a ramp or a threshold. */
     colorScale?: MarkColorScale;
+    /**
+     * Whether the color field is the plotted `y`. Only then does a threshold's
+     * cut sit on the y scale, so the line changes color where it crosses one;
+     * otherwise each instance takes its own value's color.
+     */
+    colorFromY?: boolean;
     /** The value a step drops to across a gap. */
     origin: number;
     /** Stroke width in CSS px. */
@@ -29,6 +38,37 @@ export interface LineParams extends RowParams, MarkValueScale {
 }
 /** `step` holds each value across its span; `linear` joins the spans' midpoints. */
 export type LineInterpolate = 'step' | 'linear';
+/**
+ * What the two tracers hand a pen: the polyline's points, each with the y its
+ * color is read at where that differs from the y it is drawn at, and the
+ * instance the next points belong to.
+ */
+export interface LinePen {
+    instance(i: number): void;
+    moveTo(x: number, y: number, colorY?: number): void;
+    lineTo(x: number, y: number, colorY?: number): void;
+    /** Reads the next segment's color from `colorY` without moving the pen. */
+    recolor(colorY: number): void;
+    endRun(): void;
+    end(): void;
+}
+export declare class BandPen implements LinePen {
+    private readonly ctx;
+    private readonly top;
+    private readonly bottom;
+    private x;
+    private y;
+    private colorY;
+    private drawing;
+    private readonly path;
+    constructor(ctx: MarkContext2D, top: number, bottom: number);
+    instance(): void;
+    moveTo(x: number, y: number, colorY?: number): void;
+    recolor(colorY: number): void;
+    lineTo(x: number, y: number, colorY?: number): void;
+    endRun(): void;
+    end(): void;
+}
 /** The step variant: three square-capped quads an instance, flat filled. */
 export declare const lineStepMark: MarkShape<LineChannels, LineParams>;
 /** The linear variant: one round-capped capsule an instance, max blended. */

package/esm/marks/lineMark.js

@@ -2,6 +2,7 @@ import { bpRangeXTuple } from '../blockClipUtils.js';
 import { CappedPath, getDpr, makeBpMapper } from '../canvas2dUtils.js';
 import * as centerShader from '../shaders/lineCenterMark.generated.js';
 import { GAP_Y, NO_PREV_X } from '../shaders/lineCommon.generated.js';
+import { lineColorAlongY } from '../shaders/lineCommon.js.generated.js';
 import * as stepShader from '../shaders/lineStepMark.generated.js';
 import { valueToYPxScaled } from '../shaders/pointMark.js.generated.js';
 import { rowBandTopPx } from '../shaders/rowTable.js.generated.js';
@@ -9,21 +10,22 @@ import { normalizeScoreUnclamped } from '../shaders/scoreScale.js.generated.js';
 import { slangPass } from '../slangPass.js';
 import { abgrToCssRgba } from './colorFill.js';
 import { colorBits, isThreshold, paintColors, rampUniforms, } from './markRamp.js';
-import { bandHeightPx, rowColor, rowLane, rowSlot, rowTableKeys, rowTableTextures, } from './rowLane.js';
+import { bandHeightPx, rowColor, rowColorOverride, rowLane, rowSlot, rowTableKeys, rowTableTextures, } from './rowLane.js';
 import { valueScaleUniforms } from './valueScale.js';
 const NO_GAP = Number.POSITIVE_INFINITY;
-function sameRow(row, a, b) {
-    return row[a] === row[b];
+// Whether instances `a` and `b` stand on one row and in one series.
+function sameRun(c, row, a, b) {
+    return row[a] === row[b] && (!c.series || c.series[a] === c.series[b]);
 }
-// Whether instance `i` abuts the one before it on its row, so the step joins
+// Whether instance `i` abuts the one before it in its run, so the step joins
 // them at a shared corner.
 function abutsBefore(c, row, i) {
-    return i > 0 && sameRow(row, i - 1, i) && c.x2[i - 1] === c.x[i];
+    return i > 0 && sameRun(c, row, i - 1, i) && c.x2[i - 1] === c.x[i];
 }
 // Whether the linear variant links instance `i` to the one before it: the same
-// row, within `gapBp` midpoint to midpoint.
+// row and series, within `gapBp` midpoint to midpoint.
 function linksBefore(c, row, i) {
-    if (i === 0 || !sameRow(row, i - 1, i)) {
+    if (i === 0 || !sameRun(c, row, i - 1, i)) {
         return false;
     }
     const gapBp = c.gapBp ?? NO_GAP;
@@ -66,6 +68,7 @@ function writeLineUniforms(scratch, clip, block, frame, params) {
         domainMax: params.domain[1],
         ...valueScaleUniforms(params),
         ...rampUniforms(params.colorScale),
+        colorFromY: params.colorFromY ? 1 : 0,
         rowHeight,
         rowBandPx: params.rowBandPx ?? rowHeight,
         rowOffsetPx: params.rowOffsetPx ?? 0,
@@ -96,16 +99,16 @@ function valueYPx(g, value, slot) {
     return (rowBandTopPx(g.rowOffsetPx, g.pitch, slot) +
         valueToYPxScaled(value, g.domainMin, g.domainMax, g.band, g.scaleType, g.symlogConstant));
 }
-// A value's y in the band for the colour test, placed UNCLAMPED where
+// A value's y in the band for the color test, placed UNCLAMPED where
 // `valueYPx` clamps it to draw: the cuts go through it, and so does the line a
-// threshold colours along, as the shader's `lineColorYPx` does.
+// threshold colors along, as the shader's `lineColorYPx` does.
 function colorYPx(g, value, slot) {
     const norm = normalizeScoreUnclamped(value, g.domainMin, g.domainMax, g.scaleType, g.symlogConstant);
     return rowBandTopPx(g.rowOffsetPx, g.pitch, slot) + (1 - norm) * g.band;
 }
-// One colour per instance: a change ends the stroke batch and reopens it from
-// the pen, so a segment carries the colour of the instance it belongs to, as
-// the shader's per-instance colour does.
+// One color per instance: a change ends the stroke batch and reopens it from
+// the pen, so a segment carries the color of the instance it belongs to, as
+// the shader's per-instance color does.
 class InstancePen {
     ctx;
     colorOf;
@@ -152,7 +155,7 @@ class InstancePen {
 }
 // The part of the segment from y0 to y1, as a fraction of it, inside the band
 // top < y <= bottom; undefined where it misses. A band owns its lower edge,
-// so a line lying on a cut takes the colour above it, as the shader does.
+// so a line lying on a cut takes the color above it, as the shader does.
 function bandSpan(y0, y1, top, bottom) {
     if (y0 === y1) {
         return top < y0 && y0 <= bottom ? [0, 1] : undefined;
@@ -166,10 +169,10 @@ function bandSpan(y0, y1, top, bottom) {
         : undefined;
 }
 // Keeps the part of each segment inside one threshold band, cut where it
-// crosses the band's edges, so a line stroked once per band changes colour
-// where the shader's fragments do. A point's colour y is where the band test
+// crosses the band's edges, so a line stroked once per band changes color
+// where the shader's fragments do. A point's color y is where the band test
 // reads it and its y where it draws, which part where the drawn y is clamped.
-class BandPen {
+export class BandPen {
     ctx;
     top;
     bottom;
@@ -225,8 +228,8 @@ class BandPen {
 }
 // The step polyline over `indices`, in order: a rise from the origin, the top
 // across the span, the step at each joint and a drop to the origin at a gap.
-// A rise is coloured along the y it is drawn at, a level run by its value's
-// colour y, as the shader reads them.
+// A rise is colored along the y it is drawn at, a level run by its value's
+// color y, as the shader reads them.
 function traceStep(pen, c, g, rows, indices, origin) {
     const { x, x2, y, row, count } = c;
     let inRun = false;
@@ -281,29 +284,39 @@ function traceCenter(pen, c, g, rows, indices) {
         pen.lineTo(cx, cy, colorY);
     }
 }
-// Under a threshold the line is stroked once per band per row, each pass
-// keeping the parts of the polyline inside its band; otherwise once, in each
-// instance's own colour.
+// Along y, the line is stroked once per band per row, each pass keeping the
+// parts of the polyline inside its band; otherwise once, in each instance's
+// own color. A row the table recolors takes its override either way.
 function paintLine(ctx, c, g, params, trace) {
     const { row, count } = c;
     const scale = params.colorScale;
-    if (scale && isThreshold(scale) && c.colorValue) {
-        const bySlot = new Map();
-        for (let i = 0; i < count; i++) {
-            const slot = rowSlot(row, i, g.table);
-            if (slot !== undefined) {
-                const held = bySlot.get(slot);
-                if (held) {
-                    held.push(i);
-                }
-                else {
-                    bySlot.set(slot, [i]);
-                }
+    const bySlot = new Map();
+    const own = [];
+    const { rampMode } = rampUniforms(scale);
+    const colorFromY = params.colorFromY ? 1 : 0;
+    for (let i = 0; i < count; i++) {
+        const slot = rowSlot(row, i, g.table);
+        if (slot === undefined) {
+            continue;
+        }
+        const overridden = rowColorOverride(row, i, g.table) !== undefined;
+        if (lineColorAlongY(rampMode, colorFromY, overridden)) {
+            const held = bySlot.get(slot);
+            if (held) {
+                held.push(i);
+            }
+            else {
+                bySlot.set(slot, [i]);
             }
         }
+        else {
+            own.push(i);
+        }
+    }
+    if (scale && isThreshold(scale)) {
         const { cuts, colors } = scale;
         for (const [slot, indices] of bySlot) {
-            const cutYs = cuts.map(cut => colorYPx(g, cut, slot));
+            const cutYs = cuts.map(cut => colorYPx(g, Math.fround(cut), slot));
             for (let k = 0; k <= cuts.length; k++) {
                 ctx.strokeStyle = abgrToCssRgba(colors[k] ?? 0);
                 const pen = new BandPen(ctx, k < cuts.length ? cutYs[k] : Number.NEGATIVE_INFINITY, k > 0 ? cutYs[k - 1] : Number.POSITIVE_INFINITY);
@@ -311,12 +324,13 @@ function paintLine(ctx, c, g, params, trace) {
                 pen.end();
             }
         }
-        return;
     }
-    const color = paintColors(c, count, scale);
-    const pen = new InstancePen(ctx, i => rowColor(color[i], row, i, g.table));
-    trace(pen, Array.from({ length: count }, (_, i) => i));
-    pen.end();
+    if (own.length > 0) {
+        const color = paintColors(c, count, scale);
+        const pen = new InstancePen(ctx, i => rowColor(color[i], row, i, g.table));
+        trace(pen, own);
+        pen.end();
+    }
 }
 function paintStep(ctx, c, block, frame, params) {
     if (c.count === 0) {

package/esm/marks/linkMark.d.ts

@@ -1,7 +1,8 @@
 import { LINK_ELSEWHERE, LINK_NO_REGION } from '../shaders/linkMark.consts.generated.ts';
+import type { RenderBlock } from '../renderBlock.ts';
 import type { ColorChannel } from './markRamp.ts';
 import type { RowChannel, RowParams } from './rowLane.ts';
-import type { MarkColorScale, MarkShape } from './types.ts';
+import type { MarkFrame, MarkColorScale, MarkShape } from './types.ts';
 import type { MarkValueScale } from './valueScale.ts';
 /**
  * The `link` shape's channels: a stroked curve from `x`, on the displayed
@@ -24,10 +25,9 @@ export interface LinkChannels extends ColorChannel, RowChannel {
     feet?: Uint8Array;
     count: number;
 }
-export declare const LINK_FOOT_FORWARD = 1;
-export declare const LINK_FOOT_REVERSE = 2;
-/** The `feet` lane's value for a tick at each foot, by genomic direction. */
-export declare function linkFeet(xDir: number, x2Dir: number): number;
+export { LINK_FOOT_FORWARD, LINK_FOOT_REVERSE, linkFeet } from '../linkFeet.ts';
+/** The channels cut down to instance `i`, for its own painter to trace alone. */
+export declare function linkInstance(c: LinkChannels, i: number): LinkChannels;
 /**
  * One displayed region as a foot places through it: the canvas px of an
  * anchor bp chosen near the view, so a foot's offset from it stays inside
@@ -49,7 +49,7 @@ export interface LinkSizeScale {
 }
 export type LinkShape = 'dome' | 'arc' | 'line';
 export interface LinkParams extends RowParams, MarkValueScale {
-    /** The quantitative colour scale, for a link whose colour is a ramp or a threshold. */
+    /** The quantitative color scale, for a link whose color is a ramp or a threshold. */
     colorScale?: MarkColorScale;
     /** The view's displayed regions, indexed as `x2Region` and the block's own index are. */
     regions: readonly LinkRegion[];
@@ -72,5 +72,42 @@ export interface LinkParams extends RowParams, MarkValueScale {
     /** How far inside the band the value range ends, the axis's own. */
     insetPx?: number;
 }
+export declare function regionPx(regions: readonly LinkRegion[], index: number, bp: number): number;
+/**
+ * Where an instance's curve peaks as the painter and the shader draw it: the
+ * centreline's apex in canvas px and how far it stands off its baseline.
+ */
+export interface LinkApex {
+    x: number;
+    y: number;
+    rise: number;
+    /** The curve's half-span at its baseline; 0 for a line or a stem, which enclose nothing. */
+    halfWidth: number;
+    strokePx: number;
+    /** Canvas y per px toward the baseline: 1 standing on the band's foot, -1 hanging from its top. */
+    inward: 1 | -1;
+}
+/**
+ * Instance `i`'s apex, undefined where it draws none on the band: no curve
+ * at all, or a far pair's circle, which the band clips to its legs.
+ */
+export declare function linkApex(c: LinkChannels, block: RenderBlock, frame: MarkFrame, params: LinkParams, i: number): LinkApex | undefined;
+/**
+ * Where a label of instance `i` stands: its apex, or for a far dome whose
+ * apex is off the canvas, the dome's point over the middle of the stretch the
+ * canvas shows, so a view inside the pair still carries the label. `rise` is
+ * the curve's height there.
+ */
+export declare function linkLabelAnchor(c: LinkChannels, block: RenderBlock, frame: MarkFrame, params: LinkParams, i: number): LinkApex | undefined;
+/**
+ * The view's region table as a view-spanning shader's uniforms take it: the
+ * entries in use, their count, and the drawing region's own entry. Shared
+ * arrays, rewritten per call, so a frame allocates nothing per block.
+ */
+export declare function viewRegionUniforms(regions: readonly LinkRegion[], own: number): {
+    regionCount: number;
+    ownEntry: [number, number, number, number];
+    regionTable: [[number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number], [number, number, number, number]];
+};
 export declare const linkMark: MarkShape<LinkChannels, LinkParams>;
 export { LINK_ELSEWHERE, LINK_NO_REGION };

package/esm/marks/linkMark.js

@@ -1,22 +1,30 @@
 import { getDpr } from '../canvas2dUtils.js';
 import { SCALE_TYPE_LOG } from '../scoreScale.js';
-import { distToWideCirclePx } from '../shaders/curveDistance.js.generated.js';
-import { LINK_CURVE_SEGMENTS, LINK_ELSEWHERE, LINK_FAR_SCREEN_WIDTHS, LINK_FOOT_PX, LINK_MAX_REGIONS, LINK_NO_REGION, LINK_NO_SIZE, LINK_LINE_MIN_PX, LINK_SHAPE_ARC, LINK_SHAPE_DOME, LINK_SHAPE_LINE, LINK_SIZE_CONSTANT, LINK_SIZE_SCALED, LINK_STEM_PX, } from '../shaders/linkMark.consts.generated.js';
+import { distToWideCirclePx, farDomeParam, legSweepAngle, } from '../shaders/curveDistance.js.generated.js';
+import { LINK_CURVE_SEGMENTS, LINK_ELSEWHERE, LINK_FOOT_PX, LINK_MAX_REGIONS, LINK_NO_REGION, LINK_NO_SIZE, LINK_LINE_MIN_PX, LINK_SHAPE_ARC, LINK_SHAPE_DOME, LINK_SHAPE_LINE, LINK_SIZE_CONSTANT, LINK_SIZE_SCALED, LINK_STEM_PX, } from '../shaders/linkMark.consts.generated.js';
 import * as shader from '../shaders/linkMark.generated.js';
-import { linkApexPx, linkBaseYPx, linkFootDir, linkFootLenPx, linkRadiiPx, linkStrokeWidthPx, linkValuePx, } from '../shaders/linkMark.js.generated.js';
+import { linkApexHeld, linkApexPx, linkBaseYPx, linkFootDir, linkFootLenPx, linkIsFar, linkRadiiPx, linkStrokeWidthPx, linkValuePx, } from '../shaders/linkMark.js.generated.js';
 import { slangPass } from '../slangPass.js';
 import { abgrToCssRgba } from './colorFill.js';
 import { ellipseNearest } from './ellipseDistance.js';
 import { nearestInk } from './markHit.js';
-import { colorBits, paintColors, rampUniforms } from './markRamp.js';
+import { colorBits, instanceColor, paintColors, rampUniforms, } from './markRamp.js';
 import { bandHeightPx, rowColor, rowLane, rowSlot, rowTableKeys, rowTableTextures, } from './rowLane.js';
 import { valueScaleUniforms } from './valueScale.js';
-export const LINK_FOOT_FORWARD = 1;
-export const LINK_FOOT_REVERSE = 2;
-/** The `feet` lane's value for a tick at each foot, by genomic direction. */
-export function linkFeet(xDir, x2Dir) {
-    const bits = (d) => d > 0 ? LINK_FOOT_FORWARD : d < 0 ? LINK_FOOT_REVERSE : 0;
-    return bits(xDir) | (bits(x2Dir) << 2);
+export { LINK_FOOT_FORWARD, LINK_FOOT_REVERSE, linkFeet } from '../linkFeet.js';
+/** The channels cut down to instance `i`, for its own painter to trace alone. */
+export function linkInstance(c, i) {
+    return {
+        x: c.x.subarray(i, i + 1),
+        x2: c.x2.subarray(i, i + 1),
+        x2Region: c.x2Region.subarray(i, i + 1),
+        y: c.y?.subarray(i, i + 1),
+        size: c.size?.subarray(i, i + 1),
+        feet: c.feet?.subarray(i, i + 1),
+        row: c.row?.subarray(i, i + 1),
+        color: instanceColor(c.color, i),
+        count: 1,
+    };
 }
 const KIND_ELLIPSE = 0;
 const KIND_CIRCLE = 1;
@@ -26,6 +34,7 @@ const KIND_LINE = 4;
 // The painter's leg polyline: enough segments that the chord sagitta on any
 // leg the band can show is under a pixel.
 const LEG_SEGMENTS = 32;
+const FAR_DOME_COARSE = 16;
 function linkFrame(block, frame, params) {
     const band = bandHeightPx(params, frame.canvasHeight);
     const { valueScaleType, valueSymlogConstant } = valueScaleUniforms(params);
@@ -88,7 +97,7 @@ function linkShapeCode(shape) {
             ? LINK_SHAPE_LINE
             : LINK_SHAPE_DOME;
 }
-function regionPx(regions, index, bp) {
+export function regionPx(regions, index, bp) {
     const r = regions[index];
     return r.anchorPx + (bp - r.anchorBp) * r.signedPxPerBp;
 }
@@ -164,25 +173,71 @@ function placeCurve(c, g, i) {
     g.x2Px = regionPx(regions, region, c.x2[i]);
     const pairHalf = Math.abs(g.x2Px - g.xPx) / 2;
     const valuePx = linkValuePx(c.y ? c.y[i] : 0, g.domainMin, g.domainMax, g.band, g.scaleType, g.insetPx, g.symlogConstant);
-    const apex = linkApexPx(pairHalf, g.reach, g.shape, g.valued, valuePx);
+    const apex = linkApexPx(pairHalf, g.reach, g.strokePx / 2, g.shape, g.valued, valuePx);
     if (g.shape === LINK_SHAPE_LINE) {
         g.kind = KIND_LINE;
         g.rx = Math.max(2 * pairHalf, LINK_LINE_MIN_PX);
         g.ry = apex;
         return;
     }
-    const [rx, ry] = linkRadiiPx(pairHalf, apex, g.screenW);
+    const [rx, ry] = linkRadiiPx(pairHalf, apex, g.screenW, linkApexHeld(g.valued, c.y ? c.y[i] : 0, g.domainMax));
     g.rx = rx;
     g.ry = ry;
-    if (2 * pairHalf > LINK_FAR_SCREEN_WIDTHS * g.screenW) {
+    // A far pair with a low apex keeps its apex (`linkRadiiPx`) and is an
+    // ellipse still, traced as chords (`farDomePoints`).
+    if (linkIsFar(pairHalf, g.screenW) && ry >= rx) {
         g.kind = KIND_CIRCLE;
-        g.legSweep = Math.asin(Math.min(1, Math.max(0, (g.reach + g.strokePx / 2) / Math.max(rx, 1e-6))));
+        g.legSweep = legSweepAngle(rx, g.reach + g.strokePx / 2);
         g.legHeight = rx * Math.sin(g.legSweep);
     }
     else {
         g.kind = KIND_ELLIPSE;
     }
 }
+function apexOf(g) {
+    if (g.kind === KIND_NONE || g.kind === KIND_CIRCLE) {
+        return undefined;
+    }
+    return {
+        x: (g.xPx + g.x2Px) / 2,
+        y: yAt(g, g.ry),
+        rise: g.ry,
+        halfWidth: g.kind === KIND_ELLIPSE ? g.rx : 0,
+        strokePx: g.strokePx,
+        inward: g.reverse ? -1 : 1,
+    };
+}
+/**
+ * Instance `i`'s apex, undefined where it draws none on the band: no curve
+ * at all, or a far pair's circle, which the band clips to its legs.
+ */
+export function linkApex(c, block, frame, params, i) {
+    const g = linkFrame(block, frame, params);
+    placeCurve(c, g, i);
+    return apexOf(g);
+}
+/**
+ * Where a label of instance `i` stands: its apex, or for a far dome whose
+ * apex is off the canvas, the dome's point over the middle of the stretch the
+ * canvas shows, so a view inside the pair still carries the label. `rise` is
+ * the curve's height there.
+ */
+export function linkLabelAnchor(c, block, frame, params, i) {
+    const g = linkFrame(block, frame, params);
+    placeCurve(c, g, i);
+    const apex = apexOf(g);
+    if (!apex || g.kind !== KIND_ELLIPSE || !linkIsFar(g.rx, g.screenW)) {
+        return apex;
+    }
+    const from = Math.max(apex.x - g.rx, 0);
+    const to = Math.min(apex.x + g.rx, g.screenW);
+    if (to <= from || (apex.x >= 0 && apex.x <= g.screenW)) {
+        return apex;
+    }
+    const x = (from + to) / 2;
+    const rise = g.ry * Math.sqrt(Math.max(1 - ((x - apex.x) / g.rx) ** 2, 0));
+    return { ...apex, x, y: yAt(g, rise), rise };
+}
 function sizeLane(c) {
     const lane = new Float32Array(c.count);
     for (let i = 0; i < c.count; i++) {
@@ -224,6 +279,18 @@ function fillTable(regions) {
     }
     return n;
 }
+/**
+ * The view's region table as a view-spanning shader's uniforms take it: the
+ * entries in use, their count, and the drawing region's own entry. Shared
+ * arrays, rewritten per call, so a frame allocates nothing per block.
+ */
+export function viewRegionUniforms(regions, own) {
+    return {
+        regionCount: fillTable(regions),
+        ownEntry: tableEntry(regions[own]),
+        regionTable: TABLE,
+    };
+}
 // Canvas y of a point `up` px from the baseline on the drawn side.
 function yAt(g, up) {
     return g.baseY - g.ySign * up;
@@ -246,6 +313,34 @@ function legPoints(g, footX, legDir) {
     }
     return points;
 }
+// A far dome as chords from the foot nearer the canvas, stepped as the shader
+// steps it: fine over the stretch the canvas shows, coarse over the rest. A
+// canvas flattens an ellipse tens of thousands of px wide into too few curves
+// to hold its feet.
+function farDomePoints(g, left, right) {
+    const fromRight = g.screenW / 2 - left > g.rx;
+    const footX = fromRight ? right : left;
+    const dir = fromRight ? -1 : 1;
+    const margin = g.strokePx;
+    const u0 = farDomeParam(fromRight ? footX - g.screenW - margin : -margin - footX, g.rx);
+    const u1 = Math.max(u0, farDomeParam(fromRight ? footX + margin : g.screenW + margin - footX, g.rx));
+    const coarse = Array.from({ length: FAR_DOME_COARSE + 1 }, (_, k) => Math.sin(((k / FAR_DOME_COARSE) * Math.PI) / 2));
+    const fine = Array.from({ length: LINK_CURVE_SEGMENTS + 1 }, (_, k) => u0 + ((u1 - u0) * k) / LINK_CURVE_SEGMENTS);
+    return [
+        ...coarse.filter(u => u < u0),
+        ...fine,
+        ...coarse.filter(u => u > u1),
+    ].map(u => ({
+        x: footX + dir * 2 * g.rx * u * u,
+        y: yAt(g, 2 * g.ry * u * Math.sqrt(1 - u * u)),
+    }));
+}
+function traceChords(ctx, points) {
+    ctx.moveTo(points[0].x, points[0].y);
+    for (let k = 1; k < points.length; k++) {
+        ctx.lineTo(points[k].x, points[k].y);
+    }
+}
 function tracePath(ctx, g) {
     const { baseY } = g;
     if (g.kind === KIND_STEM) {
@@ -267,14 +362,14 @@ function tracePath(ctx, g) {
             [right, 1],
             [left, -1],
         ]) {
-            const points = legPoints(g, footX, legDir);
-            ctx.moveTo(points[0].x, points[0].y);
-            for (let k = 1; k < points.length; k++) {
-                ctx.lineTo(points[k].x, points[k].y);
-            }
+            traceChords(ctx, legPoints(g, footX, legDir));
         }
         return;
     }
+    if (linkIsFar(g.rx, g.screenW)) {
+        traceChords(ctx, farDomePoints(g, left, right));
+        return;
+    }
     const mid = (left + right) / 2;
     if (g.reverse) {
         ctx.moveTo(mid + g.rx, baseY);
@@ -439,7 +534,9 @@ function nearestRising(g, px, py) {
         return { x, y: baseY, dist: Math.hypot(px - x, py - baseY) };
     }
     const near = ellipseNearest(px - mid, py - baseY, g.rx, g.ry);
-    return { x: mid + near.x, y: baseY + near.y, dist: near.dist };
+    // The drawn half rises from the baseline. A cursor on the baseline is as
+    // near the mirrored half, and the solve may name that one.
+    return { x: mid + near.x, y: baseY - Math.abs(near.y), dist: near.dist };
 }
 export const linkMark = {
     id: 'link',

package/esm/marks/markBackend.d.ts

@@ -110,7 +110,7 @@ export declare function createMarkBackend<TRegion, TState extends FrameDimension
     /**
      * What the frame is cleared to, when transparent is the wrong answer. The
      * GPU side hands it to `beginFrame` and the Canvas2D side fills it after
-     * `prepareCanvas`, so both backends composite over the same colour — which
+     * `prepareCanvas`, so both backends composite over the same color — which
      * synteny needs, its indel wedges being pre-blended against the band's
      * ground rather than composited over it.
      */

package/esm/marks/markBackend.js

@@ -63,7 +63,7 @@ export function drawPlannedPasses(hal, plan, regionKey) {
 // its sampler unconditionally, and a textured pass missing a texture draws
 // nothing on either GPU HAL. A mark declaring no `texture` at all is the same case —
 // `pointMark` carries a sampler for the shapes that ramp, and a point of a
-// constant colour draws it without one.
+// constant color draws it without one.
 const INERT_RAMP = new Uint8Array(COLOR_RAMP_LUT_ENTRIES * 4);
 /**
  * The texture each textured pass holds, by identity — the mirror of the one