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

package/esm/marks/lineMark.d.ts

@@ -1,29 +1,32 @@
 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 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.
+     * 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. */
@@ -35,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

@@ -13,18 +13,19 @@ import { colorBits, isThreshold, paintColors, rampUniforms, } from './markRamp.j
 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;
@@ -98,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;
@@ -154,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;
@@ -168,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;
@@ -227,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;
@@ -285,7 +286,7 @@ function traceCenter(pen, c, g, rows, indices) {
 }
 // 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.
+// 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;
@@ -315,7 +316,7 @@ function paintLine(ctx, c, g, params, trace) {
     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);

package/esm/marks/linkMark.d.ts

@@ -25,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
@@ -50,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[];
@@ -73,6 +72,7 @@ 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.
@@ -92,5 +92,22 @@ export interface LinkApex {
  * 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, legSweepAngle, } from '../shaders/curveDistance.js.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, linkIsFar, 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;
 }
@@ -171,10 +180,12 @@ function placeCurve(c, g, i) {
         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 (linkIsFar(pairHalf, 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 = legSweepAngle(rx, g.reach + g.strokePx / 2);
         g.legHeight = rx * Math.sin(g.legSweep);
@@ -183,13 +194,7 @@ function placeCurve(c, g, i) {
         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);
+function apexOf(g) {
     if (g.kind === KIND_NONE || g.kind === KIND_CIRCLE) {
         return undefined;
     }
@@ -202,6 +207,37 @@ export function linkApex(c, block, frame, params, i) {
         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++) {
@@ -243,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;
@@ -265,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) {
@@ -286,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);
@@ -458,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

package/esm/marks/markRamp.d.ts

@@ -1,9 +1,9 @@
 import type { MarkColorScale, MarkThreshold } from './types.ts';
 /**
- * A colour channel as a shape reads it: `color`, the packed ABGR the worker
+ * A color channel as a shape reads it: `color`, the packed ABGR the worker
  * resolved — one per instance, or one number for all of them — or
  * `colorValue`, the raw values a frame's {@link MarkColorScale} turns into
- * colours here. A shape reading a scale declares both optional and asks
+ * colors here. A shape reading a scale declares both optional and asks
  * {@link colorBits} for the GPU and {@link paintColors} for Canvas2D.
  */
 export interface ColorChannel {
@@ -19,13 +19,13 @@ interface RampBake {
     scale: MarkColorScale;
     colors: Uint32Array;
 }
-/** Whether a colour scale is a threshold rather than a ramp. */
+/** Whether a color scale is a threshold rather than a ramp. */
 export declare function isThreshold(scale: MarkColorScale): scale is MarkThreshold;
 type Rgba = [number, number, number, number];
 type Bands = [Rgba, Rgba, Rgba, Rgba, Rgba, Rgba, Rgba, Rgba, Rgba];
 /**
- * `markColor.slang`'s uniforms for a frame's colour scale, or for none: the
- * mode, a ramp's domain and middle, and a threshold's cuts and band colours.
+ * `markColor.slang`'s uniforms for a frame's color scale, or for none: the
+ * mode, a ramp's domain and middle, and a threshold's cuts and band colors.
  * Every valued shape's uniform block carries the set.
  */
 export declare function rampUniforms(scale: MarkColorScale | undefined): {
@@ -40,8 +40,8 @@ export declare function rampUniforms(scale: MarkColorScale | undefined): {
 /**
  * The 4-byte instance lane, for the packer. Under a scale it is the value's
  * float32 bits viewed as the `uint` the attribute declares — the reinterpret
- * `markColor.slang`'s `asfloat` undoes, and the reason a quantitative colour
- * adds no lane. A constant colour fills a lane for the pack alone, which the
+ * `markColor.slang`'s `asfloat` undoes, and the reason a quantitative color
+ * adds no lane. A constant color fills a lane for the pack alone, which the
  * payload never holds.
  */
 export declare function colorBits(c: ColorChannel, count: number): ArrayLike<number>;
@@ -63,12 +63,12 @@ export declare function keepRampValues(values: Float32Array, keep: (value: numbe
  */
 export declare function thresholdBandOf(value: number, cuts: readonly number[]): number;
 /**
- * The packed colours a painter fills with. Under a scale the values are baked
+ * The packed colors a painter fills with. Under a scale the values are baked
  * against it once and kept on the payload, so a repaint at an unchanged scale
  * — every pan and every hover — walks no values and the painters' fill
- * batching still sees runs of one colour. The bake reruns when the domain, the
- * scale type, the ramp's bytes or a threshold's cuts or colours move. A
- * constant colour expands once and is kept the same way.
+ * batching still sees runs of one color. The bake reruns when the domain, the
+ * scale type, the ramp's bytes or a threshold's cuts or colors move. A
+ * constant color expands once and is kept the same way.
  */
 export declare function paintColors(c: ColorChannel, count: number, scale: MarkColorScale | undefined): ArrayLike<number>;
 export {};

package/esm/marks/markRamp.js

@@ -3,7 +3,7 @@ import { rampMidT } from '../shaders/colorRampLut.js.generated.js';
 import { MAX_COLOR_BANDS, MAX_COLOR_CUTS, RAMP_LINEAR, RAMP_LOG, RAMP_NONE, RAMP_NOT_A_NUMBER_COLOR, RAMP_NO_VALUE_BITS, RAMP_NO_VALUE_COLOR, RAMP_THRESHOLD, } from '../shaders/markColor.generated.js';
 import { normalizeScore } from '../shaders/scoreScale.js.generated.js';
 const NO_COLORS = new Uint32Array(0);
-/** Whether a colour scale is a threshold rather than a ramp. */
+/** Whether a color scale is a threshold rather than a ramp. */
 export function isThreshold(scale) {
     return 'cuts' in scale;
 }
@@ -31,8 +31,8 @@ function quad(values, from) {
     ];
 }
 /**
- * `markColor.slang`'s uniforms for a frame's colour scale, or for none: the
- * mode, a ramp's domain and middle, and a threshold's cuts and band colours.
+ * `markColor.slang`'s uniforms for a frame's color scale, or for none: the
+ * mode, a ramp's domain and middle, and a threshold's cuts and band colors.
  * Every valued shape's uniform block carries the set.
  */
 export function rampUniforms(scale) {
@@ -69,8 +69,8 @@ export function rampUniforms(scale) {
 /**
  * The 4-byte instance lane, for the packer. Under a scale it is the value's
  * float32 bits viewed as the `uint` the attribute declares — the reinterpret
- * `markColor.slang`'s `asfloat` undoes, and the reason a quantitative colour
- * adds no lane. A constant colour fills a lane for the pack alone, which the
+ * `markColor.slang`'s `asfloat` undoes, and the reason a quantitative color
+ * adds no lane. A constant color fills a lane for the pack alone, which the
  * payload never holds.
  */
 export function colorBits(c, count) {
@@ -129,12 +129,12 @@ function sameScale(a, b) {
         midNormOf(a) === midNormOf(b));
 }
 /**
- * The packed colours a painter fills with. Under a scale the values are baked
+ * The packed colors a painter fills with. Under a scale the values are baked
  * against it once and kept on the payload, so a repaint at an unchanged scale
  * — every pan and every hover — walks no values and the painters' fill
- * batching still sees runs of one colour. The bake reruns when the domain, the
- * scale type, the ramp's bytes or a threshold's cuts or colours move. A
- * constant colour expands once and is kept the same way.
+ * batching still sees runs of one color. The bake reruns when the domain, the
+ * scale type, the ramp's bytes or a threshold's cuts or colors move. A
+ * constant color expands once and is kept the same way.
  */
 export function paintColors(c, count, scale) {
     const { colorValue, color } = c;

package/esm/marks/pointMark.d.ts

@@ -6,18 +6,21 @@ import type { MarkFrame, MarkColorScale, MarkShape } from './types.ts';
 import type { MarkValueScale } from './valueScale.ts';
 /**
  * The `point` shape's channels: a glyph per instance at the centre of
- * `x`..`x2`, on the `y` scale.
+ * `x`..`x2`, on the `y` scale, at 0 where `y` is absent. `glyph` is one per
+ * instance or one for all of them, as `color` is.
  */
 export interface PointChannels extends ColorChannel, RowChannel {
     x: Uint32Array;
     x2: Uint32Array;
-    y: Float32Array;
-    glyph: Uint8Array;
+    y?: Float32Array;
+    glyph: Uint8Array | number;
     count: number;
 }
-/** What the point and rule shapes share: a value scale, rows and a colour scale. */
+/** The channels cut down to instance `i`, for its own painter to trace alone. */
+export declare function pointInstance(c: PointChannels, i: number): PointChannels;
+/** What the point and rule shapes share: a value scale, rows and a color scale. */
 export interface ValuedMarkParams extends RowParams, MarkValueScale {
-    /** The quantitative colour scale, for a mark whose colour is a ramp or a threshold. */
+    /** The quantitative color scale, for a mark whose color is a ramp or a threshold. */
     colorScale?: MarkColorScale;
     /**
      * How far inside the plot the value range ends, so a mark at a domain
@@ -29,6 +32,8 @@ export interface ValuedMarkParams extends RowParams, MarkValueScale {
 export interface PointParams extends ValuedMarkParams {
     /** Glyph diameter in CSS px. */
     diameterPx: number;
+    /** The triangle's height in CSS px, where it is not `diameterPx`. */
+    triangleHeightPx?: number;
 }
 /**
  * The point shader's uniforms, which the rule shape draws through too:
@@ -36,6 +41,7 @@ export interface PointParams extends ValuedMarkParams {
  */
 export declare function writePointUniforms(scratch: ArrayBuffer, clip: BlockClipResult, block: RenderBlock, frame: MarkFrame, params: ValuedMarkParams, shape: {
     radiusPx: number;
+    triangleRadiusYPx: number;
     rule: boolean;
     minWidthPx: number;
 }): void;