@jbrowse/render-core 5.0.0-beta.7 → 5.0.0-beta.9

package/esm/marks/nearestMarkHit.js

@@ -0,0 +1,126 @@
+import { bpAtPxExact } from '../canvas2dUtils.js';
+import { denormalizeScore, scaleTypeCode } from '../scoreScale.js';
+const EVERY_VALUE = [-Infinity, Infinity];
+/**
+ * The instance nearest `(xPx, yPx)` within `radiusPx`, over the blocks the
+ * radius reaches. Marks are asked last to first and only a strictly nearer hit
+ * replaces the best, so a tie goes to the mark on top. `candidates` names what
+ * a mark is asked about in a block: what an index finds in the reach, or
+ * `backToFront` over every instance. `undefined` leaves the mark out, as a
+ * closed gate does.
+ */
+export function nearestMarkHit(marks, blocks, regionOf, state, xPx, yPx, { radiusPx, candidates, }) {
+    let best;
+    let bestDistSq = radiusPx * radiusPx;
+    for (const block of blocks) {
+        const region = regionOf(block.displayedRegionIndex);
+        const widthPx = block.screenEndPx - block.screenStartPx;
+        if (region === undefined || widthPx <= 0) {
+            continue;
+        }
+        const halfBp = (radiusPx * (block.end - block.start)) / widthPx;
+        const cursorBp = bpAtPxExact(xPx, block);
+        const bpMin = cursorBp - halfBp;
+        const bpMax = cursorBp + halfBp;
+        if (bpMax < block.start || bpMin > block.end) {
+            continue;
+        }
+        for (let m = marks.length - 1; m >= 0; m--) {
+            const mark = marks[m];
+            if (!mark.hitNearest) {
+                continue;
+            }
+            const values = mark.valueWindow
+                ? mark.valueWindow(region, block, state, yPx, radiusPx)
+                : EVERY_VALUE;
+            const asked = values &&
+                candidates(region, m, {
+                    block,
+                    bpMin,
+                    bpMax,
+                    valueMin: values[0],
+                    valueMax: values[1],
+                });
+            const hit = asked &&
+                mark.hitNearest(region, block, state, xPx, yPx, asked, bestDistSq);
+            if (hit) {
+                bestDistSq = hit.distSq;
+                best = {
+                    mark: m,
+                    block,
+                    region,
+                    index: hit.index,
+                    x: hit.x,
+                    y: hit.y,
+                    distSq: hit.distSq,
+                };
+            }
+        }
+    }
+    return best;
+}
+/** `[end - 1 .. start]`: every instance as candidates, back to front. */
+export function backToFront(start, end) {
+    return new ReverseRange(start, end);
+}
+// A class rather than a generator: `for..of` steps this in a few ns where a
+// generator yields in tens.
+class ReverseRange {
+    i;
+    start;
+    result = { value: 0, done: false };
+    constructor(start, end) {
+        this.start = start;
+        this.i = end;
+    }
+    [Symbol.iterator]() {
+        return this;
+    }
+    next() {
+        const r = this.result;
+        if (this.i > this.start) {
+            this.i--;
+            r.value = this.i;
+            r.done = false;
+        }
+        else {
+            r.done = true;
+        }
+        return r;
+    }
+}
+/**
+ * A value-scaled shape's `valueWindow`, read back through `denormalizeScore`
+ * inside each `rowHeight` band the radius touches — the whole canvas for a
+ * shape with no rows. An end within reach of a band edge opens to infinity,
+ * where an out-of-domain value clamps, so a cursor near the seam reaches the
+ * neighbouring band too. A point passes its `insetPx`; a bar passes its
+ * `origin`, and its window opens away from the origin on the cursor's side.
+ */
+export function valueWindow(yPx, radiusPx, { canvasHeight }, scale) {
+    const { domain, insetPx = 0, origin } = scale;
+    const code = scaleTypeCode(scale.scaleType);
+    const height = scale.rowHeight ?? canvasHeight;
+    const inset = Math.min(insetPx, height / 2);
+    const bands = height > 0 ? Math.ceil(canvasHeight / height) : 1;
+    const bandAt = (y) => bands > 1 ? Math.max(0, Math.min(bands - 1, Math.floor(y / height))) : 0;
+    const lastBand = bandAt(yPx + radiusPx);
+    let valueMin = Infinity;
+    let valueMax = -Infinity;
+    for (let b = bandAt(yPx - radiusPx); b <= lastBand; b++) {
+        const top = b * height;
+        const valueAt = (y) => denormalizeScore(1 - (y - top - inset) / (height - 2 * inset), domain[0], domain[1], code, 1);
+        const lo = yPx + radiusPx >= top + height - inset
+            ? -Infinity
+            : valueAt(yPx + radiusPx);
+        const hi = yPx - radiusPx <= top + inset ? Infinity : valueAt(yPx - radiusPx);
+        const [bandMin, bandMax] = origin === undefined
+            ? [lo, hi]
+            : valueAt(yPx) >= origin
+                ? [lo, Infinity]
+                : [-Infinity, hi];
+        valueMin = Math.min(valueMin, bandMin);
+        valueMax = Math.max(valueMax, bandMax);
+    }
+    return [valueMin, valueMax];
+}

package/esm/marks/pointMark.d.ts

@@ -1,4 +1,5 @@
 import type { ColorChannel } from './markRamp.ts';
+import type { RowChannel, RowParams } from './rowLane.ts';
 import type { MarkRamp, MarkShape, MarkValueScaleType } from './types.ts';
 /**
  * The `point` shape's channels: a glyph per instance at `x`, on the `y` scale,
@@ -8,14 +9,14 @@ import type { MarkRamp, MarkShape, MarkValueScaleType } from './types.ts';
  * one array holds SNPs (`x2 === x + 1`) and structural variants together, and
  * the shader, the painter and the hit test all take the same branch off it.
  */
-export interface PointChannels extends ColorChannel {
+export interface PointChannels extends ColorChannel, RowChannel {
     x: Uint32Array;
     x2: Uint32Array;
     y: Float32Array;
     glyph: Uint8Array;
     count: number;
 }
-export interface PointParams {
+export interface PointParams extends RowParams {
     /** `[min, max]` `y` is read through. */
     domain: [number, number];
     /** How that domain is read; linear when absent. */
@@ -24,5 +25,11 @@ export interface PointParams {
     ramp?: MarkRamp;
     /** Glyph diameter in CSS px. */
     diameterPx: number;
+    /**
+     * How far inside the plot the value range ends, so a point at a domain
+     * endpoint draws whole — `glyphPaint`'s `pointInsetPx`, and the same number
+     * the display's axis takes as its offset. Absent centres it on the edge.
+     */
+    insetPx?: number;
 }
 export declare const pointMark: MarkShape<PointChannels, PointParams>;

package/esm/marks/pointMark.js

@@ -1,18 +1,20 @@
 import { bpRangeXTuple } from '../blockClipUtils.js';
-import { getDpr, makeBpMapper } from '../canvas2dUtils.js';
+import { CappedPath, getDpr, makeBpMapper } from '../canvas2dUtils.js';
+import { scaleTypeCode } from '../scoreScale.js';
 import * as shader from '../shaders/pointMark.generated.js';
-import { pointDrawsBar, valueToYPxScaled, } from '../shaders/pointMark.js.generated.js';
+import { pointDrawsBar, pointYPx } from '../shaders/pointMark.js.generated.js';
 import { slangPass } from '../slangPass.js';
 import { abgrToCssRgba } from './colorFill.js';
 import { appendGlyph, glyphBox } from './glyphPaint.js';
 import { inkAtPoint, inkOnRect, nearestInk } from './markHit.js';
-import { colorBits, paintColors, rampUniforms, valueScaleTypeCode, } from './markRamp.js';
-import { blockPx } from './spanMark.js';
+import { colorBits, paintColors, rampUniforms } from './markRamp.js';
+import { valueWindow } from './nearestMarkHit.js';
+import { bandHeightPx, bandTopPx, rowLane } from './rowLane.js';
 export const pointMark = {
     id: 'point',
     pass: {
         ...slangPass({ id: 'point', mod: shader }),
-        pack: c => shader.packInstances({ ...c, color: colorBits(c) }, c.count),
+        pack: c => shader.packInstances({ ...c, color: colorBits(c), row: rowLane(c.row, c.count) }, c.count),
     },
     writeUniforms(scratch, clip, block, frame, params) {
         shader.writeUniforms(scratch, {
@@ -20,7 +22,7 @@ export const pointMark = {
             canvasHeight: frame.canvasHeight,
             domainMin: params.domain[0],
             domainMax: params.domain[1],
-            valueScaleType: valueScaleTypeCode(params.scaleType),
+            valueScaleType: scaleTypeCode(params.scaleType),
             ...rampUniforms(params.ramp),
             zero: 0,
             // viewportWidth and radiusPx stay in CSS units to match canvasHeight:
@@ -28,41 +30,39 @@ export const pointMark = {
             // stretched ellipses on hi-DPI.
             viewportWidth: clip.scissorW,
             radiusPx: params.diameterPx / 2,
+            rowHeight: bandHeightPx(params, frame.canvasHeight),
+            insetPx: params.insetPx ?? 0,
             devicePixelRatio: getDpr(),
         });
     },
     paintBlock(ctx, channels, block, frame, params) {
-        const { x, x2, y, glyph, count } = channels;
+        const { x, x2, y, glyph, row, count } = channels;
         if (count === 0) {
             return;
         }
         const color = paintColors(channels, count, params.ramp);
-        const { diameterPx, domain } = params;
+        const { diameterPx, domain, insetPx = 0 } = params;
         const r = diameterPx / 2;
-        const canvasHeight = frame.canvasHeight;
+        const band = bandHeightPx(params, frame.canvasHeight);
         const domainMin = domain[0];
         const domainMax = domain[1];
-        const st = valueScaleTypeCode(params.scaleType);
-        // The per-block closure, not the six-argument `bpToScreenPx`: that spelling
-        // re-derives the region span and the block width at every call, and this
-        // loop makes two calls per instance. Measured at 1.67x on 100K points.
+        const st = scaleTypeCode(params.scaleType);
         const bpToPx = makeBpMapper(block);
-        // Batched by colour: a run of one colour is one fillStyle write and one
-        // fill() over a shared path, which is most of a painting.
         let current = color[0];
         ctx.fillStyle = abgrToCssRgba(current);
-        ctx.beginPath();
+        const path = new CappedPath(ctx, 'fill');
         for (let i = 0; i < count; i++) {
             const abgr = color[i];
             if (abgr !== current) {
-                ctx.fill();
+                path.flush();
                 current = abgr;
                 ctx.fillStyle = abgrToCssRgba(abgr);
-                ctx.beginPath();
             }
+            path.add();
             const xStart = bpToPx(x[i]);
             const xEnd = bpToPx(x2[i]);
-            const yPx = valueToYPxScaled(y[i], domainMin, domainMax, canvasHeight, st);
+            const yPx = bandTopPx(row, i, band) +
+                pointYPx(y[i], domainMin, domainMax, band, st, insetPx);
             const widthPx = Math.abs(xEnd - xStart);
             if (pointDrawsBar(widthPx, r)) {
                 ctx.rect(Math.min(xStart, xEnd), yPx - r, widthPx, diameterPx);
@@ -71,19 +71,22 @@ export const pointMark = {
                 appendGlyph(ctx, glyph[i], xStart, yPx, diameterPx);
             }
         }
-        ctx.fill();
+        path.flush();
     },
     // A bar is the rect the painter fills, unpadded on every side; a glyph is
     // the box `appendGlyph` paints inside.
     ink(channels, block, frame, params, i) {
-        const { x, x2, y, glyph } = channels;
-        const { diameterPx, domain } = params;
-        const xStart = blockPx(block, x[i]);
-        const xEnd = blockPx(block, x2[i]);
-        const cy = valueToYPxScaled(y[i], domain[0], domain[1], frame.canvasHeight, valueScaleTypeCode(params.scaleType));
+        const { x, x2, y, glyph, row } = channels;
+        const { diameterPx, domain, insetPx = 0 } = params;
+        const bpToPx = makeBpMapper(block);
+        const xStart = bpToPx(x[i]);
+        const xEnd = bpToPx(x2[i]);
+        const r = diameterPx / 2;
+        const band = bandHeightPx(params, frame.canvasHeight);
+        const cy = bandTopPx(row, i, band) +
+            pointYPx(y[i], domain[0], domain[1], band, scaleTypeCode(params.scaleType), insetPx);
         const lo = Math.min(xStart, xEnd);
         const hi = Math.max(xStart, xEnd);
-        const r = diameterPx / 2;
         return pointDrawsBar(hi - lo, r)
             ? { left: lo, top: cy - r, width: hi - lo, height: diameterPx }
             : glyphBox(glyph[i], xStart, cy, diameterPx);
@@ -93,17 +96,18 @@ export const pointMark = {
     // one under the cursor is the nearest CENTRE, which no box can say. A bar
     // is grabbed anywhere inside the rect it fills, as the derived test would.
     hitNearest(channels, block, frame, params, xPx, yPx, candidates, maxDistSq) {
-        const { x, x2, y } = channels;
+        const { x, x2, y, row } = channels;
         const bpToPx = makeBpMapper(block);
-        const { diameterPx, domain } = params;
+        const { diameterPx, domain, insetPx = 0 } = params;
         const domainMin = domain[0];
         const domainMax = domain[1];
-        const canvasHeight = frame.canvasHeight;
-        const st = valueScaleTypeCode(params.scaleType);
+        const band = bandHeightPx(params, frame.canvasHeight);
+        const st = scaleTypeCode(params.scaleType);
         return nearestInk(candidates, maxDistSq, i => {
             const xStart = bpToPx(x[i]);
             const xEnd = bpToPx(x2[i]);
-            const cy = valueToYPxScaled(y[i], domainMin, domainMax, canvasHeight, st);
+            const cy = bandTopPx(row, i, band) +
+                pointYPx(y[i], domainMin, domainMax, band, st, insetPx);
             const lo = Math.min(xStart, xEnd);
             const hi = Math.max(xStart, xEnd);
             return pointDrawsBar(hi - lo, diameterPx / 2)
@@ -111,4 +115,5 @@ export const pointMark = {
                 : inkAtPoint(xPx, yPx, xStart, cy);
         });
     },
+    valueWindow,
 };

package/esm/marks/rowLane.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The `row` lane a value shape may carry: which band an instance stands in,
+ * `rowHeight` px each, the value scale ruling every band on its own. A caller
+ * that declares no rows is on row 0 with the whole canvas for a band, which is
+ * the same arithmetic, so the shaders take the lane unconditionally.
+ */
+export interface RowChannel {
+    row?: Uint32Array;
+}
+export interface RowParams {
+    /** CSS px per row band; the canvas height when absent. */
+    rowHeight?: number;
+}
+/** The lane the instance buffer packs: zeros where the caller sent none. */
+export declare function rowLane(row: Uint32Array | undefined, count: number): Uint32Array<ArrayBufferLike>;
+export declare function bandHeightPx(params: RowParams, canvasHeight: number): number;
+export declare function bandTopPx(row: Uint32Array | undefined, i: number, band: number): number;

package/esm/marks/rowLane.js

@@ -0,0 +1,11 @@
+const NO_ROWS = new Uint32Array(0);
+/** The lane the instance buffer packs: zeros where the caller sent none. */
+export function rowLane(row, count) {
+    return row ?? (count === 0 ? NO_ROWS : new Uint32Array(count));
+}
+export function bandHeightPx(params, canvasHeight) {
+    return params.rowHeight ?? canvasHeight;
+}
+export function bandTopPx(row, i, band) {
+    return row === undefined ? 0 : band * row[i];
+}

package/esm/marks/spanMark.d.ts

@@ -1,4 +1,3 @@
-import type { RenderBlock } from '../renderBlock.ts';
 import type { MarkShape } from './types.ts';
 /**
  * The `span` shape's channels: a coloured rectangle from `x` to `x2` on the
@@ -8,12 +7,7 @@ export interface SpanChannels {
     x: Uint32Array;
     x2: Uint32Array;
     row: Uint32Array;
-    /**
-     * Packed ABGR, resolved in the worker — a span's colour has no ramp arm.
-     * `rowRect`'s uniform struct is shared with four other consumers, and a
-     * sampler on it would move all of them for a channel no config asks for
-     * on a span (ADR-113).
-     */
+    /** Packed ABGR, resolved in the worker: a span has no ramp arm (ADR-113). */
     color: Uint32Array;
     count: number;
 }
@@ -23,31 +17,17 @@ export interface SpanParams {
     /** Fraction of the row the rect fills, leaving inter-row gaps. */
     rowProportion: number;
     /**
-     * Narrowest a span is painted, in CSS px. Zero is a no-op and is what a
-     * caller whose marks TILE writes — widening a sub-pixel cell inside a run
-     * paints ink the data does not contain. A caller whose marks are sparse
-     * intervals floors, because at chromosome zoom the alternative is a smudge.
+     * Narrowest a span is painted, in CSS px. A caller whose marks tile writes
+     * zero; one whose marks are sparse intervals floors them.
      */
     minWidthPx: number;
     /**
-     * CSS px of overlap added to each span's right edge by the **painter only**.
-     *
-     * The GPU pass needs none: abutting quads share an exact clip-space edge and
-     * the rasterizer fills it once. Canvas2D antialiases each `fillRect`
-     * independently, so two runs meeting on a fractional pixel each take partial
-     * coverage of it and a hairline of background shows through. Which callers
-     * want it splits on the same axis `minWidthPx` does — MAF's cells tile, so it
-     * pads; the multi-row painter's features are sparse intervals with background
-     * between them by right, so it writes 0.
-     *
-     * Padding the drawn width and not the anchor is what keeps it growing
-     * rightward on both orientations, so a reversed block's spans stay exact
-     * mirrors of a forward block's. Wiggle's `WIGGLE_FUDGE_FACTOR` is the same
-     * rule spelled per display; the shader must not grow a matching pad.
+     * CSS px the **painter alone** adds to each span's right edge, closing the
+     * hairline two antialiased `fillRect`s leave where tiling runs meet on a
+     * fractional pixel. The GPU pass needs none, and the ink excludes it.
      */
     seamPx: number;
     /** Rows-area scroll offset in CSS px; 0 for a canvas sized to its content. */
     scrollTop: number;
 }
-export declare function blockPx(block: RenderBlock, bp: number): number;
 export declare const spanMark: MarkShape<SpanChannels, SpanParams>;

package/esm/marks/spanMark.js

@@ -1,14 +1,34 @@
 import { bpRangeXTuple } from '../blockClipUtils.js';
-import { bpToScreenPx, makeBpMapper, spanLeft } from '../canvas2dUtils.js';
+import { bpProjection, projectBp, spanLeft } from '../canvas2dUtils.js';
 import { drawnRowHeightPx, rowBandOffsetPx, } from '../shaders/rowRect.js.generated.js';
 import * as shader from '../shaders/spanMark.generated.js';
 import { slangPass } from '../slangPass.js';
 import { makeAbgrFill } from './colorFill.js';
-// Per instance rather than through `makeBpMapper`: `ink` is asked one
-// instance at a time, and a closure per ask is the allocation the mapper
-// exists to hoist out of a loop.
-export function blockPx(block, bp) {
-    return bpToScreenPx(bp, block.start, block.end, block.screenStartPx, block.screenEndPx, block.reversed);
+function spanFrame(block, params) {
+    const { rowHeight, rowProportion } = params;
+    const { originPx, startBp, spanBp, signedSpanPx } = bpProjection(block);
+    return {
+        originPx,
+        startBp,
+        spanBp,
+        signedSpanPx,
+        rowHeight,
+        scrollTop: params.scrollTop,
+        bandOffsetPx: rowBandOffsetPx(rowHeight, rowProportion),
+        minWidthPx: params.minWidthPx,
+        left: 0,
+        top: 0,
+        width: 0,
+        height: drawnRowHeightPx(rowHeight, rowProportion),
+    };
+}
+function placeSpan(c, g, i) {
+    const xa = projectBp(g, c.x[i]);
+    const xb = projectBp(g, c.x2[i]);
+    const width = Math.max(g.minWidthPx, Math.abs(xb - xa));
+    g.left = spanLeft(xa, xb, width);
+    g.top = g.bandOffsetPx + g.rowHeight * c.row[i] - g.scrollTop;
+    g.width = width;
 }
 export const spanMark = {
     id: 'span',
@@ -20,9 +40,6 @@ export const spanMark = {
         shader.writeUniforms(scratch, {
             bpRangeX: bpRangeXTuple(clip, block.reversed),
             canvasHeight: frame.canvasHeight,
-            // CSS px, not physical: `extendToMinWidthX` divides `minCellPx` by this
-            // to reach clip space, so a CSS width is what makes the floor a CSS-pixel
-            // one and matches the painter's `Math.max` below.
             minCellDenomPx: clip.scissorW,
             minCellPx: params.minWidthPx,
             zero: 0,
@@ -32,33 +49,19 @@ export const spanMark = {
         });
     },
     paintBlock(ctx, channels, block, _frame, params) {
-        const { x, x2, row, color, count } = channels;
-        const { rowHeight, rowProportion, minWidthPx, seamPx, scrollTop } = params;
-        const h = drawnRowHeightPx(rowHeight, rowProportion);
-        const offset = rowBandOffsetPx(rowHeight, rowProportion);
-        const bpToPx = makeBpMapper(block);
+        const { color, count } = channels;
+        const { seamPx } = params;
+        const g = spanFrame(block, params);
         const setFill = makeAbgrFill(ctx);
         for (let i = 0; i < count; i++) {
-            const xa = bpToPx(x[i]);
-            const xb = bpToPx(x2[i]);
-            const width = Math.max(minWidthPx, Math.abs(xb - xa));
+            placeSpan(channels, g, i);
             setFill(color[i]);
-            ctx.fillRect(spanLeft(xa, xb, width), offset + rowHeight * row[i] - scrollTop, width + seamPx, h);
+            ctx.fillRect(g.left, g.top, g.width + seamPx, g.height);
         }
     },
     ink(channels, block, _frame, params, i) {
-        const { x, x2, row } = channels;
-        const { rowHeight, rowProportion, minWidthPx, scrollTop } = params;
-        const xa = blockPx(block, x[i]);
-        const xb = blockPx(block, x2[i]);
-        const width = Math.max(minWidthPx, Math.abs(xb - xa));
-        return {
-            left: spanLeft(xa, xb, width),
-            top: rowBandOffsetPx(rowHeight, rowProportion) +
-                rowHeight * row[i] -
-                scrollTop,
-            width,
-            height: drawnRowHeightPx(rowHeight, rowProportion),
-        };
+        const g = spanFrame(block, params);
+        placeSpan(channels, g, i);
+        return { left: g.left, top: g.top, width: g.width, height: g.height };
     },
 };