@jbrowse/render-core 5.0.0-beta.10 → 5.0.0-beta.13

package/esm/RenderCanvas.d.ts

@@ -25,7 +25,7 @@ export interface RenderCanvasHandle {
  * render-prop body on the same value for the displays on the chrome, which it
  * does *not* get for free from the `renderError` unmount (that covers only a
  * reported loss — see the `canvasKey` note in useRenderingBackend.ts).
- * GPU_RENDERING.md said so and ended with "any new consumer rendering its own
+ * GPU_DISPLAY_LIFECYCLE.md said so and ended with "any new consumer rendering its own
  * banner must too" — a rule enforced by remembering to read the doc. Rendering
  * the element here makes it structural instead: there is no way to mount this
  * canvas without the key.

package/esm/RenderCanvas.js

@@ -16,7 +16,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * render-prop body on the same value for the displays on the chrome, which it
  * does *not* get for free from the `renderError` unmount (that covers only a
  * reported loss — see the `canvasKey` note in useRenderingBackend.ts).
- * GPU_RENDERING.md said so and ended with "any new consumer rendering its own
+ * GPU_DISPLAY_LIFECYCLE.md said so and ended with "any new consumer rendering its own
  * banner must too" — a rule enforced by remembering to read the doc. Rendering
  * the element here makes it structural instead: there is no way to mount this
  * canvas without the key.

package/esm/canvas2dUtils.js

@@ -139,7 +139,7 @@ export function prepareCanvas(canvas, ctx, canvasWidth, canvasHeight) {
 // `getContext('2d')` + null-guard + `prepareCanvas` ritual that every
 // standalone 2D overlay otherwise hand-rolls in its draw effect — and the
 // `prepareCanvas` DPR step is easy to omit, which renders blurry on Retina
-// (see agent-docs/reference/GPU_RENDERING.md §"Canvas scaling & hi-DPI").
+// (see agent-docs/reference/GPU_SHADERS.md §"Canvas scaling & hi-DPI").
 // Returning the
 // prepared ctx structurally prevents that omission.
 export function getPreparedCanvas2D(canvas, width, height) {

package/esm/createRenderingBackend.d.ts

@@ -40,9 +40,9 @@ export declare function createRenderingBackend<TRenderingBackend>(canvas: HTMLCa
  * `DisplayChrome` machinery as a GPU display — the lifecycle is backend-
  * agnostic, so nothing downstream knows or cares there's no HAL.
  *
- * Reference: `plugins/sequence`'s `SequenceRenderer`. Promote to the dual-path
+ * No in-tree display uses it. Promote to the dual-path
  * `createRenderingBackend` only once a profile shows Canvas2D can't keep 60fps
  * at the display's real feature counts (≳100K features/frame — see
- * RFC-001 §3a).
+ * agent-docs/reference/PLUGIN_ABI_STABILITY.md §Canvas2D or GPU).
  */
 export declare function createCanvas2DBackend<TRenderingBackend>(canvas: HTMLCanvasElement, createCanvas2DRenderingBackend: (canvas: HTMLCanvasElement) => TRenderingBackend): Promise<TRenderingBackend>;

package/esm/createRenderingBackend.js

@@ -50,10 +50,10 @@ export async function createRenderingBackend(canvas, { passes, sampleCount = der
  * `DisplayChrome` machinery as a GPU display — the lifecycle is backend-
  * agnostic, so nothing downstream knows or cares there's no HAL.
  *
- * Reference: `plugins/sequence`'s `SequenceRenderer`. Promote to the dual-path
+ * No in-tree display uses it. Promote to the dual-path
  * `createRenderingBackend` only once a profile shows Canvas2D can't keep 60fps
  * at the display's real feature counts (≳100K features/frame — see
- * RFC-001 §3a).
+ * agent-docs/reference/PLUGIN_ABI_STABILITY.md §Canvas2D or GPU).
  */
 export function createCanvas2DBackend(canvas, createCanvas2DRenderingBackend) {
     return Promise.resolve(createCanvas2DRenderingBackend(canvas));

package/esm/graphicsCapabilities.js

@@ -54,7 +54,7 @@ async function probeWebgpu() {
  * moment this returns and the browser reclaims the context on GC, the same
  * release the HAL relies on. A page that then reaches the 16-context ceiling
  * evicts this one first (it is the oldest, and nothing draws to it or
- * re-acquires it), so the eviction cascade in GPU_CONTEXT_BUDGET.md cannot
+ * re-acquires it), so the eviction cascade in GPU_PORTABILITY.md cannot
  * start here.
  *
  * The driver string comes off the same context, so it is free where it matters:

package/esm/hal/createHal.js

@@ -64,7 +64,7 @@ async function climbLadder(canvas, { passes, sampleCount, failures }) {
     // volvox tracks, and *no scroll churn at all* — headless Chrome (SwiftShader),
     // three runs each: WebGL2 blocks the main thread for 1.3-5.5 s in a single
     // task and 2.1-8.8 s in total, while Canvas2D never exceeds 339 ms and never
-    // once produces a task over 500 ms. GPU_CONTEXT_BUDGET.md has the churn case
+    // once produces a task over 500 ms. GPU_PORTABILITY.md has the churn case
     // at ~25x; this is the floor, and it is the load-time pipeline build rather
     // than the per-pass rebuild the churn number measures.
     //

package/esm/hal/deviceGpuCache.js

@@ -28,21 +28,18 @@ export function bindGroupLayoutEntries(bindings) {
     });
 }
 function gpuBlendState(bs) {
-    // WebGPU rejects any factor but 'one' under max and min, which ignore them.
-    // Alpha takes the same equation, as webgl2Hal's applyBlendState does.
+    // WebGPU rejects any factor but 'one' under max, which ignores them. Alpha
+    // accumulates as webgl2Hal's applyBlendState does.
     const max = { srcFactor: 'one', dstFactor: 'one', operation: 'max' };
-    const min = { srcFactor: 'one', dstFactor: 'one', operation: 'min' };
     const behind = { srcFactor: 'one-minus-dst-alpha', dstFactor: 'one' };
     return bs.op === 'max'
         ? { color: max, alpha: max }
-        : bs.op === 'min'
-            ? { color: min, alpha: min }
-            : bs.op === 'behind'
-                ? { color: behind, alpha: behind }
-                : {
-                    color: { srcFactor: bs.srcFactor, dstFactor: bs.dstFactor },
-                    alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha' },
-                };
+        : bs.op === 'behind'
+            ? { color: behind, alpha: behind }
+            : {
+                color: { srcFactor: bs.srcFactor, dstFactor: bs.dstFactor },
+                alpha: { srcFactor: 'one', dstFactor: 'one-minus-src-alpha' },
+            };
 }
 export function pipelineRecipe(desc, wgslSource, sampleCount) {
     return {

package/esm/hal/types.d.ts

@@ -38,8 +38,6 @@ export type BlendState = {
     dstFactor: BlendFactor;
 } | {
     op: 'max';
-} | {
-    op: 'min';
 } | {
     op: 'behind';
 };

package/esm/hal/webgl2Hal.d.ts

@@ -43,7 +43,7 @@ export declare class WebGL2Hal extends GpuHalBase<RegionPassBuffer> implements G
      * owns (`antialias` above one sample), so this HAL holds no separate target —
      * releasing its samples means dropping the context, which costs a re-acquire
      * against a hard 16-context ceiling and a full shader recompile per display.
-     * `agent-docs/reference/GPU_CONTEXT_BUDGET.md` measured that trade and
+     * `agent-docs/reference/GPU_PORTABILITY.md` measured that trade and
      * declined it; what makes the WebGPU side worth doing is that it pays
      * neither.
      */

package/esm/hal/webgl2Hal.js

@@ -181,6 +181,9 @@ export class WebGL2Hal extends GpuHalBase {
         // Programs link on first draw (`getPass`). The first links here as a
         // canary, so a GL stack that cannot compile our shaders throws while
         // `createGpuHal` can still fall back to Canvas2D.
+        // Starting every pass's compile here was a loss (headed Chrome, Intel UHD
+        // 630): the GPU process ran all 17 programs before the 10 a first BAM draw
+        // needs, and a first visit drew at 1094 ms against 907.
         const canary = descriptors[0];
         if (canary) {
             this.passes.set(canary.id, {
@@ -308,7 +311,7 @@ export class WebGL2Hal extends GpuHalBase {
      * owns (`antialias` above one sample), so this HAL holds no separate target —
      * releasing its samples means dropping the context, which costs a re-acquire
      * against a hard 16-context ceiling and a full shader recompile per display.
-     * `agent-docs/reference/GPU_CONTEXT_BUDGET.md` measured that trade and
+     * `agent-docs/reference/GPU_PORTABILITY.md` measured that trade and
      * declined it; what makes the WebGPU side worth doing is that it pays
      * neither.
      */
@@ -458,9 +461,6 @@ export class WebGL2Hal extends GpuHalBase {
         if (bs?.op === 'max') {
             gl.blendEquation(gl.MAX);
         }
-        else if (bs?.op === 'min') {
-            gl.blendEquation(gl.MIN);
-        }
         else if (bs?.op === 'behind') {
             gl.blendEquation(gl.FUNC_ADD);
             gl.blendFuncSeparate(gl.ONE_MINUS_DST_ALPHA, gl.ONE, gl.ONE_MINUS_DST_ALPHA, gl.ONE);

package/esm/hal/webgpuHal.js

@@ -60,9 +60,8 @@ async function buildPipeline(device, recipe, passId) {
         multisample: recipe.sampleCount === 1 ? undefined : { count: recipe.sampleCount },
     });
 }
-// Every declared pass up front, unlike WebGL2's first-draw link; see
-// ARCHITECTURAL_LIMITS.md §"Every WebGPU display resolves its whole pass list
-// before it can paint". Each pass compiles as soon as its own WGSL arrives.
+// Every declared pass up front, unlike WebGL2's first-draw link. Each pass
+// compiles as soon as its own WGSL arrives.
 async function resolvePipelines(device, descriptors, sampleCount) {
     const built = await Promise.all(descriptors.map(async (desc) => {
         const { WGSL_SOURCE } = await desc.source.wgsl();

package/esm/marks/barMark.js

@@ -94,6 +94,8 @@ export const barMark = {
         const yScale = valueScaleUniforms(params);
         const table = params.rowTable;
         const [domainMin, domainMax] = params.domain;
+        const { seamPx } = params;
+        const seamLeft = block.reversed ? seamPx : 0;
         let clipped = false;
         for (let i = 0; i < count; i++) {
             const slot = rowSlot(row, i, table);
@@ -104,7 +106,7 @@ export const barMark = {
             const r = barRect(bpToPx, x[i], x2[i], y[i], top, band, params, yScale);
             if (r) {
                 setFill(rowColor(color[i], row, i, table));
-                ctx.fillRect(r.left, r.top, r.width + params.seamPx, r.height);
+                ctx.fillRect(r.left - seamLeft, r.top, r.width + seamPx, r.height);
             }
             clipped ||=
                 clipSide(y[i], domainMin, domainMax, yScale.valueScaleType) !== 0;
@@ -123,7 +125,7 @@ export const barMark = {
             const { top, band } = barBand(params, frame.canvasHeight, slot);
             const s = stripRect(bpToPx, x[i], x2[i], y[i], top, band, params, yScale);
             if (s) {
-                ctx.fillRect(s.left, s.top, s.width + params.seamPx, s.height);
+                ctx.fillRect(s.left - seamLeft, s.top, s.width + seamPx, s.height);
             }
         }
     },

package/esm/marks/index.d.ts

@@ -8,15 +8,15 @@ export { 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 { linkApex, linkFeet, linkMark, LINK_ELSEWHERE, LINK_NO_REGION, } from './linkMark.ts';
 export { ellipseDistance, ellipseNearest } from './ellipseDistance.ts';
 export { appendGlyph, pointInsetPx } from './glyphPaint.ts';
 export { recordPath } from './pathRecorder.ts';
 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, rampUniforms, rampValueBits, thresholdBandOf, } from './markRamp.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 +27,7 @@ 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 { RowTable } from './rowTable.ts';
 export type { RowSpanIndex } from './rowSpanIndex.ts';
 export type { ColorChannel } from './markRamp.ts';

package/esm/marks/index.js

@@ -8,13 +8,13 @@ export { 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 { linkApex, linkFeet, linkMark, LINK_ELSEWHERE, LINK_NO_REGION, } from './linkMark.js';
 export { ellipseDistance, ellipseNearest } from './ellipseDistance.js';
 export { appendGlyph, pointInsetPx } from './glyphPaint.js';
 export { recordPath } from './pathRecorder.js';
 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, rampUniforms, rampValueBits, thresholdBandOf, } from './markRamp.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

@@ -20,6 +20,12 @@ export interface LineChannels extends ColorChannel, RowChannel {
 export interface LineParams extends RowParams, MarkValueScale {
     /** The quantitative colour scale, for a line whose colour is a ramp or a threshold. */
     colorScale?: MarkColorScale;
+    /**
+     * Whether the colour field is the plotted `y`. Only then does a threshold's
+     * cut sit on the y scale, so the line changes colour where it crosses one;
+     * otherwise each instance takes its own value's colour.
+     */
+    colorFromY?: boolean;
     /** The value a step drops to across a gap. */
     origin: number;
     /** Stroke width in CSS px. */

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,7 +10,7 @@ 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) {
@@ -66,6 +67,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,
@@ -281,26 +283,36 @@ 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 colour. A row the table recolours 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));
@@ -311,12 +323,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
@@ -72,5 +73,24 @@ export interface LinkParams extends RowParams, MarkValueScale {
     /** How far inside the band the value range ends, the axis's own. */
     insetPx?: 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;
 export declare const linkMark: MarkShape<LinkChannels, LinkParams>;
 export { LINK_ELSEWHERE, LINK_NO_REGION };

package/esm/marks/linkMark.js

@@ -1,9 +1,9 @@
 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, 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 { 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';
@@ -164,7 +164,7 @@ 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);
@@ -174,15 +174,34 @@ function placeCurve(c, g, i) {
     const [rx, ry] = linkRadiiPx(pairHalf, apex, g.screenW);
     g.rx = rx;
     g.ry = ry;
-    if (2 * pairHalf > LINK_FAR_SCREEN_WIDTHS * g.screenW) {
+    if (linkIsFar(pairHalf, g.screenW)) {
         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;
     }
 }
+/**
+ * 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);
+    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,
+    };
+}
 function sizeLane(c) {
     const lane = new Float32Array(c.count);
     for (let i = 0; i < c.count; i++) {

package/esm/marks/markPlan.d.ts

@@ -18,8 +18,9 @@ export interface MarkPlan<TRegion, TState extends MarkFrame> {
 }
 /**
  * Resolve which marks draw this frame. Throws for an enabled mark the plan
- * form cannot carry — one with a `band` or a `paintsBlock` — since a plan
- * neither scissors nor asks the block anything, and without the throw the GPU
- * would draw what Canvas2D declines.
+ * form cannot carry — one with a `band`, a `paintsBlock` or a per-draw
+ * `verticesPerInstance` — since a plan neither scissors, asks the block
+ * anything nor sizes a draw, and without the throw the GPU would draw what
+ * Canvas2D declines, or a chevron a line.
  */
 export declare function planMarks<TRegion, TState extends MarkFrame>(marks: readonly Mark<TRegion, TState>[], state: TState): MarkPlan<TRegion, TState>;

package/esm/marks/markPlan.js

@@ -1,8 +1,9 @@
 /**
  * Resolve which marks draw this frame. Throws for an enabled mark the plan
- * form cannot carry — one with a `band` or a `paintsBlock` — since a plan
- * neither scissors nor asks the block anything, and without the throw the GPU
- * would draw what Canvas2D declines.
+ * form cannot carry — one with a `band`, a `paintsBlock` or a per-draw
+ * `verticesPerInstance` — since a plan neither scissors, asks the block
+ * anything nor sizes a draw, and without the throw the GPU would draw what
+ * Canvas2D declines, or a chevron a line.
  */
 export function planMarks(marks, state) {
     const enabled = [];
@@ -10,7 +11,7 @@ export function planMarks(marks, state) {
     for (const mark of marks) {
         if (!mark.enabled || mark.enabled(state)) {
             if (!mark.planned) {
-                throw new Error(`mark ${mark.pass.id} declares a band or a block gate, which a frame plan does not carry; draw it through drawMarks`);
+                throw new Error(`mark ${mark.pass.id} declares a band, a block gate or a per-draw vertex count, which a frame plan does not carry; draw it through drawMarks`);
             }
             enabled.push(mark);
             passes.push(mark.planned);

package/esm/marks/markRamp.d.ts

@@ -56,8 +56,10 @@ export declare function rampValueBits(values: Float32Array): Uint32Array<ArrayBu
  */
 export declare function keepRampValues(values: Float32Array, keep: (value: number, index: number) => boolean): Float32Array<ArrayBuffer>;
 /**
- * The interval a value is in on a threshold: how many of the ascending cuts it
- * is at or past, `thresholdIndex`'s rule and the shader's `thresholdBand`.
+ * The interval a lane value is in on a threshold: how many of the ascending
+ * cuts it is at or past, `thresholdIndex`'s rule and the shader's
+ * `thresholdBand`. The value is a float32 and so is each cut in the shader's
+ * uniform, so a cut compares as one here: 0.7 off a lane is at a cut of 0.7.
  */
 export declare function thresholdBandOf(value: number, cuts: readonly number[]): number;
 /**

package/esm/marks/markRamp.js

@@ -99,13 +99,15 @@ export function keepRampValues(values, keep) {
     return new Float32Array(kept.buffer, kept.byteOffset, kept.length);
 }
 /**
- * The interval a value is in on a threshold: how many of the ascending cuts it
- * is at or past, `thresholdIndex`'s rule and the shader's `thresholdBand`.
+ * The interval a lane value is in on a threshold: how many of the ascending
+ * cuts it is at or past, `thresholdIndex`'s rule and the shader's
+ * `thresholdBand`. The value is a float32 and so is each cut in the shader's
+ * uniform, so a cut compares as one here: 0.7 off a lane is at a cut of 0.7.
  */
 export function thresholdBandOf(value, cuts) {
     let band = 0;
     for (const cut of cuts) {
-        if (value >= cut) {
+        if (value >= Math.fround(cut)) {
             band++;
         }
     }
@@ -150,9 +152,7 @@ export function paintColors(c, count, scale) {
     const colors = new Uint32Array(count);
     const bits = rampValueBits(colorValue);
     const colorOf = isThreshold(scale)
-        ? (value) => Number.isFinite(value)
-            ? scale.colors[thresholdBandOf(value, scale.cuts)]
-            : scale.colors[value > 0 ? scale.cuts.length : 0]
+        ? thresholdColorOf(scale)
         : rampColorOf(scale);
     for (let i = 0; i < count; i++) {
         const value = colorValue[i];
@@ -175,6 +175,14 @@ function constantColors(c, color, count) {
     c.constantBake = colors;
     return colors;
 }
+// The cuts the shader's uniform block holds, so Canvas2D paints a value past
+// the last of them in the band the GPU does.
+function thresholdColorOf(scale) {
+    const cuts = scale.cuts.slice(0, MAX_COLOR_CUTS);
+    return (value) => Number.isFinite(value)
+        ? scale.colors[thresholdBandOf(value, cuts)]
+        : scale.colors[value > 0 ? cuts.length : 0];
+}
 function rampColorOf(ramp) {
     const [min, max] = ramp.domain;
     const log = ramp.scale === 'log';

package/esm/marks/rowLane.d.ts

@@ -35,5 +35,7 @@ export declare function bandHeightPx(params: RowParams, canvasHeight: number): n
 export declare function keySlot(key: number, table: RowTable | undefined): number | undefined;
 /** The slot instance `i` is drawn on, undefined where the table hides its key. */
 export declare function rowSlot(row: Uint32Array | undefined, i: number, table: RowTable | undefined): number | undefined;
+/** Instance `i`'s key's colour override, undefined where it keeps its own. */
+export declare function rowColorOverride(row: Uint32Array | undefined, i: number, table: RowTable | undefined): number | undefined;
 /** The colour instance `i` is drawn in: its key's override, else `color`. */
 export declare function rowColor(color: number, row: Uint32Array | undefined, i: number, table: RowTable | undefined): number;

package/esm/marks/rowLane.js

@@ -33,9 +33,13 @@ export function keySlot(key, table) {
 export function rowSlot(row, i, table) {
     return keySlot(rowKey(row, i), table);
 }
-/** The colour instance `i` is drawn in: its key's override, else `color`. */
-export function rowColor(color, row, i, table) {
+/** Instance `i`'s key's colour override, undefined where it keeps its own. */
+export function rowColorOverride(row, i, table) {
     const key = rowKey(row, i);
     const override = table && key < table.keys ? table.color[key] : NO_ROW_COLOR;
-    return override >>> 24 === 0 ? color : override;
+    return override >>> 24 === 0 ? undefined : override;
+}
+/** The colour instance `i` is drawn in: its key's override, else `color`. */
+export function rowColor(color, row, i, table) {
+    return rowColorOverride(row, i, table) ?? color;
 }

package/esm/marks/rowSpanIndex.d.ts

@@ -16,8 +16,9 @@ export interface RowSpanIndex {
 }
 /**
  * The index over `count` spans from `x` to `x2`, each in the row `row` names
- * (row 0 where there is no lane). A counting sort by row, a sort of each row
- * the input left out of start order, and one pass for the reach.
+ * (row 0 where there is no lane), less those on `HIDDEN_ROW`, which no row
+ * holds. A counting sort by row, a sort of each row the input left out of
+ * start order, and one pass for the reach.
  */
 export declare function rowSpanIndex(x: Uint32Array, x2: Uint32Array, row: Uint32Array | undefined, count?: number): RowSpanIndex;
 /**