@perspective-dev/viewer-charts 4.3.0

package/src/ts/charts/cartesian/glyphs/lines.ts

@@ -0,0 +1,320 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import type { WebGLContextManager } from "../../../webgl/context-manager";
+import type { CartesianChart } from "../cartesian";
+import type { Glyph } from "../glyph";
+import { bindGradientTexture } from "../../../webgl/gradient-texture";
+import {
+    createLineCornerBuffer,
+    getInstancing,
+} from "../../../webgl/instanced-attrs";
+import { formatTickValue, formatDateTickValue } from "../../../layout/ticks";
+import lineVert from "../../../shaders/line.vert.glsl";
+import lineFrag from "../../../shaders/line.frag.glsl";
+
+interface LineCache {
+    program: WebGLProgram;
+    cornerBuffer: WebGLBuffer;
+    u_projection: WebGLUniformLocation | null;
+    u_resolution: WebGLUniformLocation | null;
+    u_line_width: WebGLUniformLocation | null;
+    u_color_range: WebGLUniformLocation | null;
+    u_gradient_lut: WebGLUniformLocation | null;
+    a_start: number;
+    a_end: number;
+    a_color_start: number;
+    a_color_end: number;
+    a_corner: number;
+}
+
+/**
+ * Polyline glyph — instanced triangle-strip segments between adjacent
+ * same-series points. Segments are scoped per-series via byte-offset
+ * rebinding (see `drawLineSeries`); the shader reads the endpoints'
+ * raw color values and samples the gradient LUT via the same sign-
+ * aware `(v - cmin) / (cmax - cmin)` mapping the scatter glyph uses.
+ */
+export class LineGlyph implements Glyph {
+    readonly name = "line" as const;
+    private _cache: LineCache | null = null;
+
+    ensureProgram(
+        _chart: CartesianChart,
+        glManager: WebGLContextManager,
+    ): void {
+        if (this._cache) {
+            return;
+        }
+
+        const gl = glManager.gl;
+        const program = glManager.shaders.getOrCreate(
+            "line",
+            lineVert,
+            lineFrag,
+        );
+        const cornerBuffer = createLineCornerBuffer(gl);
+        this._cache = {
+            program,
+            cornerBuffer,
+            u_projection: gl.getUniformLocation(program, "u_projection"),
+            u_resolution: gl.getUniformLocation(program, "u_resolution"),
+            u_line_width: gl.getUniformLocation(program, "u_line_width"),
+            u_color_range: gl.getUniformLocation(program, "u_color_range"),
+            u_gradient_lut: gl.getUniformLocation(program, "u_gradient_lut"),
+            a_start: gl.getAttribLocation(program, "a_start"),
+            a_end: gl.getAttribLocation(program, "a_end"),
+            a_color_start: gl.getAttribLocation(program, "a_color_start"),
+            a_color_end: gl.getAttribLocation(program, "a_color_end"),
+            a_corner: gl.getAttribLocation(program, "a_corner"),
+        };
+    }
+
+    draw(
+        chart: CartesianChart,
+        glManager: WebGLContextManager,
+        projection: Float32Array,
+    ): void {
+        const cache = this._cache;
+        if (!cache) {
+            return;
+        }
+
+        const bind = bindLineState(cache, chart, glManager, projection);
+        if (!bind) {
+            return;
+        }
+
+        const numSeries = Math.max(1, chart._splitGroups.length);
+        for (let s = 0; s < numSeries; s++) {
+            drawLineSeries(cache, chart, glManager, s);
+        }
+
+        unbindLineDivisors(cache, glManager);
+    }
+
+    drawSeries(
+        chart: CartesianChart,
+        glManager: WebGLContextManager,
+        projection: Float32Array,
+        seriesIdx: number,
+    ): void {
+        const cache = this._cache;
+        if (!cache) {
+            return;
+        }
+
+        if (!bindLineState(cache, chart, glManager, projection)) {
+            return;
+        }
+
+        drawLineSeries(cache, chart, glManager, seriesIdx);
+        unbindLineDivisors(cache, glManager);
+    }
+
+    //  helpers
+
+    async buildTooltipLines(
+        chart: CartesianChart,
+        flatIdx: number,
+    ): Promise<string[]> {
+        const lines: string[] = [];
+        if (!chart._xData || !chart._yData) {
+            return lines;
+        }
+
+        if (chart._splitGroups.length > 0 && chart._seriesCapacity > 0) {
+            const seriesIdx = Math.floor(flatIdx / chart._seriesCapacity);
+            const sg = chart._splitGroups[seriesIdx];
+            if (sg) {
+                lines.push(sg.prefix);
+            }
+        }
+
+        const xVal = chart._xData[flatIdx];
+        const yVal = chart._yData[flatIdx];
+
+        const xType = chart._columnTypes[chart._xLabel] || "";
+        const xIsDate = xType === "date" || xType === "datetime";
+        const xFormatted = xIsDate
+            ? formatDateTickValue(xVal)
+            : formatTickValue(xVal);
+        lines.push(`${chart._xLabel || "Row"}: ${xFormatted}`);
+
+        const yType = chart._columnTypes[chart._yLabel] || "";
+        const yIsDate = yType === "date" || yType === "datetime";
+        const yFormatted = yIsDate
+            ? formatDateTickValue(yVal)
+            : formatTickValue(yVal);
+        lines.push(`${chart._yLabel}: ${yFormatted}`);
+
+        return lines;
+    }
+
+    tooltipOptions() {
+        return { crosshair: true, highlightRadius: 5 };
+    }
+
+    destroy(chart: CartesianChart): void {
+        const cache = this._cache;
+        if (cache?.cornerBuffer && chart._glManager) {
+            chart._glManager.gl.deleteBuffer(cache.cornerBuffer);
+        }
+
+        this._cache = null;
+    }
+}
+
+/**
+ * Shared pre-draw state setup for `draw` and `drawSeries`. Binds the
+ * program, uploads uniforms + gradient texture, binds the static corner
+ * buffer, enables the instanced attributes. Returns false if the
+ * gradient cache is missing.
+ */
+function bindLineState(
+    cache: LineCache,
+    chart: CartesianChart,
+    glManager: WebGLContextManager,
+    projection: Float32Array,
+): boolean {
+    const gl = glManager.gl;
+    if (!chart._gradientCache) {
+        return false;
+    }
+
+    const dpr = glManager.dpr;
+
+    gl.useProgram(cache.program);
+    gl.uniformMatrix4fv(cache.u_projection, false, projection);
+    gl.uniform2f(cache.u_resolution, gl.canvas.width, gl.canvas.height);
+    gl.uniform1f(cache.u_line_width, chart._pluginConfig.line_width_px * dpr);
+    if (chart._colorMin < chart._colorMax) {
+        gl.uniform2f(cache.u_color_range, chart._colorMin, chart._colorMax);
+    } else {
+        gl.uniform2f(cache.u_color_range, 0.0, 0.0);
+    }
+
+    bindGradientTexture(
+        glManager,
+        chart._gradientCache.texture,
+        cache.u_gradient_lut,
+        0,
+    );
+
+    const instancing = getInstancing(glManager);
+    const { setDivisor } = instancing;
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, cache.cornerBuffer);
+    gl.enableVertexAttribArray(cache.a_corner);
+    gl.vertexAttribPointer(cache.a_corner, 1, gl.FLOAT, false, 0, 0);
+    setDivisor(cache.a_corner, 0);
+
+    gl.enableVertexAttribArray(cache.a_start);
+    setDivisor(cache.a_start, 1);
+    gl.enableVertexAttribArray(cache.a_end);
+    setDivisor(cache.a_end, 1);
+    gl.enableVertexAttribArray(cache.a_color_start);
+    setDivisor(cache.a_color_start, 1);
+    gl.enableVertexAttribArray(cache.a_color_end);
+    setDivisor(cache.a_color_end, 1);
+
+    return true;
+}
+
+/**
+ * Dispatch one instanced draw for series `s`. Rebinds start/end attrib
+ * pointers with byte offsets into the slotted buffer so instance 0 is
+ * the series' first segment.
+ */
+function drawLineSeries(
+    cache: LineCache,
+    chart: CartesianChart,
+    glManager: WebGLContextManager,
+    s: number,
+): void {
+    const count = chart._seriesUploadedCounts[s] ?? 0;
+    if (count < 2) {
+        return;
+    }
+
+    const gl = glManager.gl;
+    const cap = chart._seriesCapacity;
+    const posStride = 2 * Float32Array.BYTES_PER_ELEMENT;
+    const idStride = Float32Array.BYTES_PER_ELEMENT;
+
+    // Render-path uses `peek`. If buffers haven't been uploaded
+    // yet (pan/zoom render landing between a pending draw's
+    // `ensureBufferCapacity` and its `uploadChunk`), skip — drawing
+    // against a recreated zero-filled buffer would produce one frame
+    // of empty plot area.
+    const posBuf = glManager.bufferPool.peek("a_position");
+    const idBuf = glManager.bufferPool.peek("a_color_value");
+    if (!posBuf || !idBuf) {
+        return;
+    }
+
+    const posBase = s * cap * posStride;
+    gl.bindBuffer(gl.ARRAY_BUFFER, posBuf.buffer);
+    gl.vertexAttribPointer(
+        cache.a_start,
+        2,
+        gl.FLOAT,
+        false,
+        posStride,
+        posBase,
+    );
+    gl.vertexAttribPointer(
+        cache.a_end,
+        2,
+        gl.FLOAT,
+        false,
+        posStride,
+        posBase + posStride,
+    );
+
+    const idBase = s * cap * idStride;
+    gl.bindBuffer(gl.ARRAY_BUFFER, idBuf.buffer);
+    gl.vertexAttribPointer(
+        cache.a_color_start,
+        1,
+        gl.FLOAT,
+        false,
+        idStride,
+        idBase,
+    );
+    gl.vertexAttribPointer(
+        cache.a_color_end,
+        1,
+        gl.FLOAT,
+        false,
+        idStride,
+        idBase + idStride,
+    );
+
+    getInstancing(glManager).drawArraysInstanced(
+        gl.TRIANGLE_STRIP,
+        0,
+        4,
+        count - 1,
+    );
+}
+
+function unbindLineDivisors(
+    cache: LineCache,
+    glManager: WebGLContextManager,
+): void {
+    const { setDivisor } = getInstancing(glManager);
+    setDivisor(cache.a_start, 0);
+    setDivisor(cache.a_end, 0);
+    setDivisor(cache.a_color_start, 0);
+    setDivisor(cache.a_color_end, 0);
+}

package/src/ts/charts/cartesian/glyphs/points.ts

@@ -0,0 +1,239 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import type { WebGLContextManager } from "../../../webgl/context-manager";
+import type { CartesianChart } from "../cartesian";
+import type { Glyph } from "../glyph";
+import { bindGradientTexture } from "../../../webgl/gradient-texture";
+import { buildPointRowTooltipLines } from "../tooltip-lines";
+import scatterVert from "../../../shaders/scatter.vert.glsl";
+import scatterFrag from "../../../shaders/scatter.frag.glsl";
+
+type GL = WebGL2RenderingContext | WebGLRenderingContext;
+
+interface PointCache {
+    program: WebGLProgram;
+    u_projection: WebGLUniformLocation | null;
+    u_point_size: WebGLUniformLocation | null;
+    u_color_range: WebGLUniformLocation | null;
+    u_gradient_lut: WebGLUniformLocation | null;
+    u_size_range: WebGLUniformLocation | null;
+    u_point_size_range: WebGLUniformLocation | null;
+    a_position: number;
+    a_color_value: number;
+    a_size_value: number;
+}
+
+/**
+ * `gl.POINTS` glyph — one squared/antialiased point per data row. Color
+ * and size are driven by the shared `a_color_value` / `a_size_value`
+ * buffers; the vertex shader does sign-aware color-t mapping and samples
+ * the gradient LUT. One draw call per series (the slot layout leaves
+ * gaps at each series' tail that we can't safely include in a single
+ * draw — dispatching `count[s]` per series skips them).
+ */
+export class PointGlyph implements Glyph {
+    readonly name = "point" as const;
+    private _cache: PointCache | null = null;
+
+    ensureProgram(
+        _chart: CartesianChart,
+        glManager: WebGLContextManager,
+    ): void {
+        if (this._cache) {
+            return;
+        }
+
+        const gl = glManager.gl;
+        const program = glManager.shaders.getOrCreate(
+            "scatter",
+            scatterVert,
+            scatterFrag,
+        );
+        this._cache = {
+            program,
+            u_projection: gl.getUniformLocation(program, "u_projection"),
+            u_point_size: gl.getUniformLocation(program, "u_point_size"),
+            u_color_range: gl.getUniformLocation(program, "u_color_range"),
+            u_gradient_lut: gl.getUniformLocation(program, "u_gradient_lut"),
+            u_size_range: gl.getUniformLocation(program, "u_size_range"),
+            u_point_size_range: gl.getUniformLocation(
+                program,
+                "u_point_size_range",
+            ),
+            a_position: gl.getAttribLocation(program, "a_position"),
+            a_color_value: gl.getAttribLocation(program, "a_color_value"),
+            a_size_value: gl.getAttribLocation(program, "a_size_value"),
+        };
+    }
+
+    draw(
+        chart: CartesianChart,
+        glManager: WebGLContextManager,
+        projection: Float32Array,
+    ): void {
+        const cache = this._cache;
+        if (!cache) {
+            return;
+        }
+
+        if (!bindPointState(cache, chart, glManager, projection)) {
+            return;
+        }
+
+        // Per-series tight draws: each series `s` occupies slots
+        // `[s*cap, s*cap + count[s])`. Dispatching `count[s]` avoids
+        // rasterizing unused tail slots. All attribs have divisor=0 so
+        // `first` shifts them together.
+        const gl = glManager.gl;
+        const numSeries = Math.max(1, chart._splitGroups.length);
+        const cap = chart._seriesCapacity;
+        for (let s = 0; s < numSeries; s++) {
+            const count = chart._seriesUploadedCounts[s] ?? 0;
+            if (count <= 0) {
+                continue;
+            }
+
+            gl.drawArrays(gl.POINTS, s * cap, count);
+        }
+    }
+
+    drawSeries(
+        chart: CartesianChart,
+        glManager: WebGLContextManager,
+        projection: Float32Array,
+        seriesIdx: number,
+    ): void {
+        const cache = this._cache;
+        if (!cache) {
+            return;
+        }
+
+        if (!bindPointState(cache, chart, glManager, projection)) {
+            return;
+        }
+
+        const count = chart._seriesUploadedCounts[seriesIdx] ?? 0;
+        if (count <= 0) {
+            return;
+        }
+
+        const gl = glManager.gl;
+        const cap = chart._seriesCapacity;
+        gl.drawArrays(gl.POINTS, seriesIdx * cap, count);
+    }
+
+    buildTooltipLines(
+        chart: CartesianChart,
+        flatIdx: number,
+    ): Promise<string[]> {
+        return buildPointRowTooltipLines(chart, flatIdx);
+    }
+
+    tooltipOptions() {
+        return { crosshair: true, highlightRadius: 6 };
+    }
+
+    destroy(_chart: CartesianChart): void {
+        // Program lifetime is owned by the shader registry; just drop
+        // the cache reference. No private GPU resources to free.
+        this._cache = null;
+    }
+}
+
+function setUniforms(
+    cache: PointCache,
+    gl: GL,
+    projection: Float32Array,
+    chart: CartesianChart,
+    dpr: number,
+): void {
+    gl.uniformMatrix4fv(cache.u_projection, false, projection);
+    gl.uniform1f(cache.u_point_size, chart._pluginConfig.point_size_px * dpr);
+
+    if (chart._colorMin < chart._colorMax) {
+        gl.uniform2f(cache.u_color_range, chart._colorMin, chart._colorMax);
+    } else {
+        gl.uniform2f(cache.u_color_range, 0.0, 0.0);
+    }
+
+    if (chart._sizeMin < chart._sizeMax) {
+        gl.uniform2f(cache.u_size_range, chart._sizeMin, chart._sizeMax);
+    } else {
+        gl.uniform2f(cache.u_size_range, 0.0, 0.0);
+    }
+
+    const size_scale_factor = Math.min(chart._pluginConfig.point_size_px, 3);
+
+    gl.uniform2f(
+        cache.u_point_size_range,
+        Math.max(
+            2 * dpr,
+            (chart._pluginConfig.point_size_px / size_scale_factor) * dpr,
+        ),
+        chart._pluginConfig.point_size_px * size_scale_factor * dpr,
+    );
+}
+
+/**
+ * Shared pre-draw state setup for `draw` and `drawSeries`. Binds the
+ * program, uploads uniforms + gradient texture, wires the three per-
+ * vertex attributes. Returns false if the gradient cache is missing.
+ */
+function bindPointState(
+    cache: PointCache,
+    chart: CartesianChart,
+    glManager: WebGLContextManager,
+    projection: Float32Array,
+): boolean {
+    const gl = glManager.gl;
+    if (!chart._gradientCache) {
+        return false;
+    }
+
+    gl.useProgram(cache.program);
+    setUniforms(cache, gl, projection, chart, glManager.dpr);
+    bindGradientTexture(
+        glManager,
+        chart._gradientCache.texture,
+        cache.u_gradient_lut,
+        0,
+    );
+
+    // Render-path uses `peek` (not `getOrCreate`) so we never
+    // recreate buffers from the draw path. If a buffer hasn't been
+    // uploaded yet — e.g. pan/zoom render landing between a pending
+    // draw's `ensureBufferCapacity` and its `uploadChunk` — return
+    // false and let the caller skip `drawArrays`. Painting against
+    // a freshly-recreated zero-filled buffer would show one frame
+    // of empty plot area while gridlines/chrome remain correct.
+    const posBuf = glManager.bufferPool.peek("a_position");
+    const colorBuf = glManager.bufferPool.peek("a_color_value");
+    const sizeBuf = glManager.bufferPool.peek("a_size_value");
+    if (!posBuf || !colorBuf || !sizeBuf) {
+        return false;
+    }
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, posBuf.buffer);
+    gl.enableVertexAttribArray(cache.a_position);
+    gl.vertexAttribPointer(cache.a_position, 2, gl.FLOAT, false, 0, 0);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuf.buffer);
+    gl.enableVertexAttribArray(cache.a_color_value);
+    gl.vertexAttribPointer(cache.a_color_value, 1, gl.FLOAT, false, 0, 0);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuf.buffer);
+    gl.enableVertexAttribArray(cache.a_size_value);
+    gl.vertexAttribPointer(cache.a_size_value, 1, gl.FLOAT, false, 0, 0);
+
+    return true;
+}

package/src/ts/charts/cartesian/label-interner.ts

@@ -0,0 +1,56 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+/**
+ * Slot-indexed string store for the scatter "Label" column. Strings
+ * are deduplicated across split-by facets so identical labels share a
+ * dictionary entry; the per-slot `Int32Array` then holds dictionary
+ * indices (`-1` means "no label for this slot").
+ */
+export class LabelInterner {
+    readonly data: Int32Array;
+    readonly dictionary: string[] = [];
+    private readonly dictMap: Map<string, number> = new Map();
+
+    constructor(capacity: number) {
+        this.data = new Int32Array(capacity);
+        this.data.fill(-1);
+    }
+
+    /**
+     * Insert (or look up) `label` and write its dictionary index into
+     * the slot at `flatIdx`. Returns the assigned dictionary index.
+     */
+    set(flatIdx: number, label: string): number {
+        let mapped = this.dictMap.get(label);
+        if (mapped === undefined) {
+            mapped = this.dictionary.length;
+            this.dictionary.push(label);
+            this.dictMap.set(label, mapped);
+        }
+
+        this.data[flatIdx] = mapped;
+        return mapped;
+    }
+
+    /**
+     * Resolve a slot's label string, or `null` if unset.
+     */
+    get(flatIdx: number): string | null {
+        const idx = this.data[flatIdx];
+        if (idx < 0) {
+            return null;
+        }
+
+        return this.dictionary[idx];
+    }
+}

package/src/ts/charts/cartesian/tooltip-lines.ts

@@ -0,0 +1,80 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+import type { CartesianChart } from "./cartesian";
+
+/**
+ * Build the per-row tooltip for a point-style glyph (scatter, gradient
+ * heatmap). Resolves the source arrow row via the chart's lazy row
+ * fetcher, then surfaces every non-null column under the (split-aware)
+ * prefix filter formatted by column type.
+ *
+ * Returns `[]` when the chart has no row-index mirror or no fetcher;
+ * callers should fall back to a geometry-only tooltip in that case.
+ */
+export async function buildPointRowTooltipLines(
+    chart: CartesianChart,
+    flatIdx: number,
+): Promise<string[]> {
+    const lines: string[] = [];
+    if (!chart._rowIndexData || !chart._lazyRows) {
+        return lines;
+    }
+
+    const rowIdx = chart._rowIndexData[flatIdx];
+    if (rowIdx < 0) {
+        return lines;
+    }
+
+    if (chart._splitGroups.length > 0 && chart._seriesCapacity > 0) {
+        const seriesIdx = Math.floor(flatIdx / chart._seriesCapacity);
+        const sg = chart._splitGroups[seriesIdx];
+        if (sg?.prefix) {
+            lines.push(sg.prefix);
+        }
+    }
+
+    const row = await chart._lazyRows.fetchRow(rowIdx);
+
+    const prefixFilter =
+        chart._splitGroups.length > 0 && chart._seriesCapacity > 0
+            ? (chart._splitGroups[Math.floor(flatIdx / chart._seriesCapacity)]
+                  ?.prefix ?? null)
+            : null;
+
+    for (const [colName, value] of row) {
+        if (value === null || value === undefined) {
+            continue;
+        }
+
+        let displayName = colName;
+        if (prefixFilter !== null) {
+            const expected = `${prefixFilter}|`;
+            if (!colName.startsWith(expected)) {
+                continue;
+            }
+
+            displayName = colName.substring(expected.length);
+        } else if (colName.includes("|")) {
+            continue;
+        }
+
+        if (typeof value === "number") {
+            const formatted = chart.getColumnFormatter(colName, "value")(value);
+            lines.push(`${displayName}: ${formatted}`);
+        } else {
+            lines.push(`${displayName}: ${value}`);
+        }
+    }
+
+    return lines;
+}