@perspective-dev/viewer-charts 4.3.0 → 4.5.1

package/src/ts/charts/common/tree-interact.ts

@@ -0,0 +1,209 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 { TreeChartBase } from "./tree-chart";
+import { NULL_NODE, ancestorNames } from "./node-store";
+import { rebuildBreadcrumbs } from "./tree-data";
+
+/**
+ * Common subset of `TreemapChart` / `SunburstChart` reached by the
+ * shared interaction helpers — anything that lives on `TreeChartBase`
+ * plus the pinned/hover/facet-drill state the two charts both declare
+ * with identical shape but on the subclass (so we type it as an
+ * intersection).
+ */
+export type TreeInteractChart = TreeChartBase & {
+    _pinnedNodeId: number;
+    _hoveredNodeId: number;
+    _facetDrillRoots: Map<string, number>;
+};
+
+/**
+ * Emit `perspective-click` + `perspective-global-filter selected:true`
+ * for a treemap/sunburst node. The path is walked via `ancestorNames`
+ * and split into split-by prefix + group-by levels using
+ * `_splitBy.length` as the boundary; faceted mode keeps the depth-0
+ * ancestor as the split prefix.
+ */
+export async function emitTreeNodeEvent(
+    chart: TreeInteractChart,
+    nodeId: number,
+    kind: "leaf" | "branch",
+): Promise<void> {
+    const store = chart._nodeStore;
+    const path = ancestorNames(store, nodeId);
+    const isFaceted =
+        chart._splitBy.length > 0 && chart._facetConfig.facet_mode === "grid";
+    const splitByValues: (string | null)[] = isFaceted
+        ? path.slice(0, chart._splitBy.length)
+        : [];
+    const groupByValues: (string | null)[] = isFaceted
+        ? path.slice(
+              chart._splitBy.length,
+              chart._splitBy.length + chart._groupBy.length,
+          )
+        : path.slice(0, chart._groupBy.length);
+
+    const rowIdx = kind === "leaf" ? (store.leafRowIdx[nodeId] ?? null) : null;
+
+    await chart.emitClickAndSelect({
+        rowIdx: rowIdx != null && rowIdx >= 0 ? rowIdx : null,
+        columnName: chart._sizeName,
+        groupByValues,
+        splitByValues,
+    });
+}
+
+/**
+ * Build tooltip lines for `nodeId`: ancestor name path + aggregate
+ * value + (numeric) color value + per-row tooltip columns from
+ * `_lazyRows` for leaves. The leaf branch awaits the source-view row
+ * fetch; branch nodes have no underlying row so they emit a Children
+ * count instead.
+ */
+export async function buildTreeTooltipLines(
+    chart: TreeInteractChart,
+    nodeId: number,
+): Promise<string[]> {
+    const store = chart._nodeStore;
+    const lines: string[] = [];
+
+    const pathNames: string[] = [];
+    let p = nodeId;
+    while (store.parent[p] !== NULL_NODE) {
+        pathNames.push(store.name[p]);
+        p = store.parent[p];
+    }
+
+    pathNames.reverse();
+    if (pathNames.length > 0) {
+        lines.push(pathNames.join(" › "));
+    } else {
+        lines.push(store.name[nodeId]);
+    }
+
+    const sizeFmt = chart.getColumnFormatter(chart._sizeName, "value");
+    lines.push(`Value: ${sizeFmt(store.value[nodeId])}`);
+
+    if (chart._colorName && !isNaN(store.colorValue[nodeId])) {
+        const colorFmt = chart.getColumnFormatter(chart._colorName, "value");
+        lines.push(
+            `${chart._colorName}: ${colorFmt(store.colorValue[nodeId])}`,
+        );
+    }
+
+    const rowIdx = store.leafRowIdx[nodeId];
+    const isLeaf =
+        store.firstChild[nodeId] === NULL_NODE && rowIdx !== NULL_NODE;
+
+    if (isLeaf && chart._lazyRows) {
+        const row = await chart._lazyRows.fetchRow(rowIdx);
+        for (const [name, value] of row) {
+            if (value === null || value === undefined) {
+                continue;
+            }
+
+            if (name === chart._colorName && !isNaN(store.colorValue[nodeId])) {
+                continue;
+            }
+
+            if (typeof value === "number") {
+                lines.push(
+                    `${name}: ${chart.getColumnFormatter(name, "value")(value)}`,
+                );
+            } else {
+                lines.push(`${name}: ${value}`);
+            }
+        }
+    }
+
+    if (store.firstChild[nodeId] !== NULL_NODE) {
+        lines.push(`Children: ${store.childCount[nodeId]}`);
+    }
+
+    return lines;
+}
+
+/**
+ * Pin a tooltip at the chart-supplied anchor. Lines are fetched lazily;
+ * the `_pinnedNodeId` check on resolve discards stale results from a
+ * prior pin or dismissal.
+ */
+export function showTreePinnedTooltip(
+    chart: TreeInteractChart,
+    nodeId: number,
+    anchor: { cx: number; cy: number },
+    renderChromeOverlay: () => void,
+): void {
+    chart._tooltip.dismiss();
+    chart._pinnedNodeId = nodeId;
+
+    const cssWidth = chart._glManager?.cssWidth ?? 0;
+    const cssHeight = chart._glManager?.cssHeight ?? 0;
+
+    buildTreeTooltipLines(chart, nodeId).then((lines) => {
+        if (chart._pinnedNodeId !== nodeId) {
+            return;
+        }
+
+        if (lines.length === 0) {
+            return;
+        }
+
+        chart._tooltip.pin(
+            lines,
+            { px: anchor.cx, py: anchor.cy },
+            { cssWidth, cssHeight },
+        );
+    });
+
+    chart._hoveredNodeId = NULL_NODE;
+    renderChromeOverlay();
+}
+
+export function dismissTreePinnedTooltip(chart: TreeInteractChart): void {
+    chart._tooltip.dismiss();
+    chart._pinnedNodeId = NULL_NODE;
+}
+
+/**
+ * Drill the clicked facet (or the whole chart in non-facet mode).
+ * Faceted drill walks up to the facet root (top-level child of
+ * `_rootId`), records the new drill node under that facet's label, and
+ * re-renders.
+ */
+export function treeDrillTo(
+    chart: TreeInteractChart,
+    nodeId: number,
+    renderFrame: () => void,
+): void {
+    const store = chart._nodeStore;
+    if (chart._splitBy.length > 0 && chart._facetConfig.facet_mode === "grid") {
+        let p = nodeId;
+        while (p !== NULL_NODE && store.parent[p] !== chart._rootId) {
+            p = store.parent[p];
+        }
+
+        if (p !== NULL_NODE) {
+            chart._facetDrillRoots.set(store.name[p], nodeId);
+        }
+
+        chart._hoveredNodeId = NULL_NODE;
+        renderFrame();
+        return;
+    }
+
+    chart._currentRootId = nodeId;
+    rebuildBreadcrumbs(chart, nodeId);
+    chart._hoveredNodeId = NULL_NODE;
+    renderFrame();
+}

package/src/ts/charts/heatmap/heatmap-render.ts

@@ -20,6 +20,7 @@ import {
     withScissor,
 } from "../../webgl/plot-frame";
 import { getInstancing } from "../../webgl/instanced-attrs";
+import { compileProgram } from "../../webgl/program-cache";
 import { initCanvas } from "../../axis/canvas";
 import { buildFacetGrid } from "../../layout/facet-grid";
 import {
@@ -236,21 +237,18 @@ function ensureProgram(
     }
 
     const gl = glManager.gl;
-    const program = glManager.shaders.getOrCreate(
+    const compiled = compileProgram<
+        { program: WebGLProgram } & NonNullable<HeatmapChart["_locations"]>
+    >(
+        glManager,
         "heatmap",
         heatmapVert,
         heatmapFrag,
+        ["u_projection", "u_cell_inset", "u_cell_size", "u_gradient_lut"],
+        ["a_corner", "a_cell", "a_color_t"],
     );
-    chart._program = program;
-    chart._locations = {
-        u_projection: gl.getUniformLocation(program, "u_projection"),
-        u_cell_inset: gl.getUniformLocation(program, "u_cell_inset"),
-        u_cell_size: gl.getUniformLocation(program, "u_cell_size"),
-        u_gradient_lut: gl.getUniformLocation(program, "u_gradient_lut"),
-        a_corner: gl.getAttribLocation(program, "a_corner"),
-        a_cell: gl.getAttribLocation(program, "a_cell"),
-        a_color_t: gl.getAttribLocation(program, "a_color_t"),
-    };
+    chart._program = compiled.program;
+    chart._locations = compiled;
 
     const cornerBuffer = gl.createBuffer()!;
     gl.bindBuffer(gl.ARRAY_BUFFER, cornerBuffer);

package/src/ts/charts/series/glyphs/draw-areas.ts

@@ -13,6 +13,7 @@
 import type { WebGLContextManager } from "../../../webgl/context-manager";
 import type { SeriesChart } from "../series";
 import type { SeriesInfo } from "../series-build";
+import type { InterpolateMode } from "../series-type";
 import { compileProgram } from "../../../webgl/program-cache";
 import areaVert from "../../../shaders/area.vert.glsl";
 import areaFrag from "../../../shaders/area.frag.glsl";
@@ -144,6 +145,7 @@ export class AreaGlyph {
 
         const entries: AreaSeriesEntry[] = [];
         for (const s of areaSeries) {
+            const seriesInfo = chart._series[s.seriesId];
             const strips = collectAreaStrips(
                 s,
                 N,
@@ -155,6 +157,9 @@ export class AreaGlyph {
                 bars.y1,
                 positions,
                 xOrigin,
+                seriesInfo.start,
+                seriesInfo.end,
+                seriesInfo.interpolateMode,
             );
             if (strips.totalVertices === 0) {
                 continue;
@@ -254,6 +259,21 @@ interface CollectedStrips {
  * Reads stacked y0/y1 from the pre-built `barIndex` (cached on the
  * chart at data load) so this hot path doesn't rebuild the map each
  * call.
+ *
+ * The "present" predicate is mode-aware for the unstacked branch:
+ *
+ *   - `mode = "solid"` (also coerced from `"transparent"` for area):
+ *     Pass 2 has populated every cell in `[start, end]`, including
+ *     leading/trailing zero-fills. Treat `c in [start, end]` as
+ *     present and ignore `sampleValid` (the bit is still 0 at
+ *     synthesized cells).
+ *   - `mode = "skip"`: Pass 2 didn't run for this series. Interior
+ *     nulls inside `[start, end]` remain and the strip must break at
+ *     them — use `sampleValid` as the "is present" check, matching
+ *     the pre-feature behavior.
+ *
+ * The stacked branch is unchanged: the `barIndex` lookup already
+ * encodes presence post-stacking.
  */
 function collectAreaStrips(
     s: SeriesInfo,
@@ -266,10 +286,14 @@ function collectAreaStrips(
     barY1: Float64Array,
     positions: Float64Array | null,
     xOrigin: number,
+    seriesStart: number,
+    seriesEnd: number,
+    interpolateMode: InterpolateMode,
 ): CollectedStrips {
     const scratch = ensureStripScratch(N * 4);
     const descriptors: AreaStrip[] = [];
     const seriesBase = s.seriesId * 1_000_000_000;
+    const trustRange = interpolateMode !== "skip";
 
     let write = 0;
     let runStart = 0;
@@ -288,7 +312,12 @@ function collectAreaStrips(
             }
         } else {
             const idx = c * S + s.seriesId;
-            if ((valid[idx >> 3] >> (idx & 7)) & 1) {
+            if (trustRange) {
+                if (c >= seriesStart && c <= seriesEnd) {
+                    top = samples[idx];
+                    present = true;
+                }
+            } else if ((valid[idx >> 3] >> (idx & 7)) & 1) {
                 top = samples[idx];
                 present = true;
             }

package/src/ts/charts/series/glyphs/draw-lines.ts

@@ -19,6 +19,7 @@ import {
 import { compileProgram } from "../../../webgl/program-cache";
 import lineVert from "../../../shaders/line-uniform.vert.glsl";
 import lineFrag from "../../../shaders/line-uniform.frag.glsl";
+import type { InterpolateMode } from "../series-type";
 
 type GL = WebGL2RenderingContext | WebGLRenderingContext;
 
@@ -29,21 +30,12 @@ interface LineProgramCache {
     u_color: WebGLUniformLocation | null;
     u_resolution: WebGLUniformLocation | null;
     u_line_width: WebGLUniformLocation | null;
+    u_interp_alpha: WebGLUniformLocation | null;
     a_start: number;
     a_end: number;
     a_corner: number;
-}
-
-interface LineRun {
-    /**
-     * Byte offset into the per-series GPU buffer at the start of this run.
-     */
-    offsetBytes: number;
-
-    /**
-     * Number of points in this run; the run draws `count - 1` segments.
-     */
-    count: number;
+    a_real_start: number;
+    a_real_end: number;
 }
 
 interface LineSeriesEntry {
@@ -52,14 +44,31 @@ interface LineSeriesEntry {
     color: [number, number, number];
 
     /**
-     * GPU buffer holding `[x0,y0,x1,y1,...]` for every run in the series.
+     * GPU buffer holding `[x0,y0,x1,y1,...]` for cats `[start, end]`.
      */
     gpuBuffer: WebGLBuffer;
 
     /**
-     * Run offsets into `gpuBuffer`. Empty when the series has no segments.
+     * GPU buffer of per-vertex real-flag bytes (1 = real, 0 = synthesized).
+     * Bound twice as `a_real_start` / `a_real_end` with overlapping
+     * byte offsets so the segment shader sees both endpoints' flags.
+     */
+    gpuRealBuffer: WebGLBuffer;
+
+    /**
+     * Number of points = `end - start + 1`. Series draws `count - 1`
+     * segments. The renderer always emits a single contiguous run;
+     * gap rendering for skip mode happens in the shader via
+     * `u_interp_alpha`.
      */
-    runs: LineRun[];
+    count: number;
+
+    /**
+     * Interpolation mode for this series. Drives `u_interp_alpha` at
+     * draw time. Same value the build pipeline resolved via
+     * `resolveInterpolate`.
+     */
+    interpolateMode: InterpolateMode;
 }
 
 /**
@@ -82,6 +91,7 @@ interface LineBuffers {
  * pattern.
  */
 let _lineScratch: Float32Array = new Float32Array(0);
+let _realScratch: Uint8Array = new Uint8Array(0);
 
 function ensureLineScratch(n: number): Float32Array {
     if (_lineScratch.length >= n) {
@@ -92,6 +102,27 @@ function ensureLineScratch(n: number): Float32Array {
     return _lineScratch;
 }
 
+function ensureRealScratch(n: number): Uint8Array {
+    if (_realScratch.length >= n) {
+        return _realScratch;
+    }
+
+    _realScratch = new Uint8Array(Math.max(n, _realScratch.length * 2));
+    return _realScratch;
+}
+
+function alphaForMode(mode: InterpolateMode): number {
+    if (mode === "solid") {
+        return 1.0;
+    }
+
+    if (mode === "transparent") {
+        return 0.5;
+    }
+
+    return 0.0;
+}
+
 /**
  * Line glyph for {@link SeriesChart}. Owns its program + per-series
  * GPU buffers privately; chart routes lifecycle through
@@ -112,8 +143,14 @@ export class LineGlyph {
             "bar-line",
             lineVert,
             lineFrag,
-            ["u_projection", "u_color", "u_resolution", "u_line_width"],
-            ["a_start", "a_end", "a_corner"],
+            [
+                "u_projection",
+                "u_color",
+                "u_resolution",
+                "u_line_width",
+                "u_interp_alpha",
+            ],
+            ["a_start", "a_end", "a_corner", "a_real_start", "a_real_end"],
         );
         this._program = { ...partial, cornerBuffer };
         return this._program;
@@ -133,6 +170,7 @@ export class LineGlyph {
         const gl = chart._glManager.gl;
         for (const s of buf.series) {
             gl.deleteBuffer(s.gpuBuffer);
+            gl.deleteBuffer(s.gpuRealBuffer);
         }
 
         this._buffers = null;
@@ -142,9 +180,14 @@ export class LineGlyph {
      * Rebuild the per-series GPU buffers for line glyphs. Called once
      * per data load (and once after `restyle()` because palette colors
      * are captured on the {@link LineSeriesEntry}). The buffer contents
-     * encode `[x,y]` points in run-major order; one `bufferData` per
-     * series. After this, every `draw` call rebinds + dispatches with
-     * no further uploads until the next data load.
+     * encode `[x,y]` points for every cat in `[start, end]`; one
+     * `bufferData` per series. After this, every `draw` call rebinds +
+     * dispatches with no further uploads until the next data load.
+     *
+     * Gap behavior at synthesized cells is handled in the shader via
+     * `u_interp_alpha` (set per draw based on the series'
+     * `interpolateMode`): `skip` → 0 (invisible segments touching a
+     * synthesized endpoint), `solid` → 1, `transparent` → 0.5.
      */
     rebuildBuffers(chart: SeriesChart, glManager: WebGLContextManager): void {
         const lineSeries = chart._lineSeries;
@@ -169,46 +212,44 @@ export class LineGlyph {
 
         const entries: LineSeriesEntry[] = [];
         for (const s of lineSeries) {
-            // Walk the per-category sample grid for this series, breaking
-            // into contiguous valid runs. Write directly into a pre-sized
-            // Float32 scratch — no boxed JS arrays, no `Float32Array.from`.
-            const scratch = ensureLineScratch(N * 2);
-            const runs: LineRun[] = [];
-            let write = 0;
-            let runStart = 0;
-            for (let c = 0; c < N; c++) {
-                const idx = c * S + s.seriesId;
-                const ok = (valid[idx >> 3] >> (idx & 7)) & 1;
-                if (ok) {
-                    const x = positions ? positions[c] - xOrigin : c;
-                    scratch[write++] = x;
-                    scratch[write++] = samples[idx];
-                } else if (write > runStart) {
-                    const count = (write - runStart) / 2;
-                    if (count >= 2) {
-                        runs.push({ offsetBytes: runStart * 4, count });
-                    }
-
-                    runStart = write;
-                }
+            const seriesInfo = chart._series[s.seriesId];
+            const start = seriesInfo.start;
+            const end = seriesInfo.end;
+            if (start < 0 || end < start) {
+                continue;
             }
 
-            if (write > runStart) {
-                const count = (write - runStart) / 2;
-                if (count >= 2) {
-                    runs.push({ offsetBytes: runStart * 4, count });
-                }
+            const count = end - start + 1;
+            if (count < 2) {
+                // A 1-point "line" has no segments to draw.
+                continue;
             }
 
-            if (runs.length === 0) {
-                continue;
+            const posScratch = ensureLineScratch(count * 2);
+            const realScratch = ensureRealScratch(count);
+            let write = 0;
+            for (let c = start; c <= end; c++) {
+                const x = positions ? positions[c] - xOrigin : c;
+                const idx = c * S + s.seriesId;
+                posScratch[write * 2] = x;
+                posScratch[write * 2 + 1] = samples[idx];
+                realScratch[write] = (valid[idx >> 3] >> (idx & 7)) & 1;
+                write++;
             }
 
-            const buf = gl.createBuffer()!;
-            gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+            const posBuf = gl.createBuffer()!;
+            gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
             gl.bufferData(
                 gl.ARRAY_BUFFER,
-                scratch.subarray(0, write),
+                posScratch.subarray(0, write * 2),
+                gl.STATIC_DRAW,
+            );
+
+            const realBuf = gl.createBuffer()!;
+            gl.bindBuffer(gl.ARRAY_BUFFER, realBuf);
+            gl.bufferData(
+                gl.ARRAY_BUFFER,
+                realScratch.subarray(0, write),
                 gl.STATIC_DRAW,
             );
 
@@ -216,8 +257,10 @@ export class LineGlyph {
                 seriesId: s.seriesId,
                 axis: s.axis,
                 color: [s.color[0], s.color[1], s.color[2]],
-                gpuBuffer: buf,
-                runs,
+                gpuBuffer: posBuf,
+                gpuRealBuffer: realBuf,
+                count,
+                interpolateMode: seriesInfo.interpolateMode,
             });
         }
 
@@ -226,7 +269,9 @@ export class LineGlyph {
 
     /**
      * Bind the persistent vertex buffers and dispatch one instanced draw
-     * per (series, run). Skips hidden series via `_hiddenSeries`.
+     * per series. Skips hidden series via `_hiddenSeries`. Gap /
+     * transparency rendering is governed by `u_interp_alpha`, set per
+     * series.
      */
     draw(
         chart: SeriesChart,
@@ -257,14 +302,14 @@ export class LineGlyph {
         gl.vertexAttribPointer(cache.a_corner, 1, gl.FLOAT, false, 0, 0);
         setDivisor(cache.a_corner, 0);
 
-        const stride = 2 * Float32Array.BYTES_PER_ELEMENT;
+        const posStride = 2 * Float32Array.BYTES_PER_ELEMENT;
+        const realStride = Uint8Array.BYTES_PER_ELEMENT;
         const hidden = chart._hiddenSeries;
         for (const s of buf.series) {
             if (hidden.has(s.seriesId)) {
                 continue;
             }
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, s.gpuBuffer);
             gl.uniformMatrix4fv(
                 cache.u_projection,
                 false,
@@ -273,35 +318,65 @@ export class LineGlyph {
 
             const color = chart._series[s.seriesId].color;
             gl.uniform4f(cache.u_color, color[0], color[1], color[2], 1.0);
+            gl.uniform1f(cache.u_interp_alpha, alphaForMode(s.interpolateMode));
 
             gl.enableVertexAttribArray(cache.a_start);
             setDivisor(cache.a_start, 1);
             gl.enableVertexAttribArray(cache.a_end);
             setDivisor(cache.a_end, 1);
+            gl.enableVertexAttribArray(cache.a_real_start);
+            setDivisor(cache.a_real_start, 1);
+            gl.enableVertexAttribArray(cache.a_real_end);
+            setDivisor(cache.a_real_end, 1);
 
-            for (const run of s.runs) {
-                gl.vertexAttribPointer(
-                    cache.a_start,
-                    2,
-                    gl.FLOAT,
-                    false,
-                    stride,
-                    run.offsetBytes,
-                );
-                gl.vertexAttribPointer(
-                    cache.a_end,
-                    2,
-                    gl.FLOAT,
-                    false,
-                    stride,
-                    run.offsetBytes + stride,
-                );
-                drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, run.count - 1);
-            }
+            gl.bindBuffer(gl.ARRAY_BUFFER, s.gpuBuffer);
+            gl.vertexAttribPointer(
+                cache.a_start,
+                2,
+                gl.FLOAT,
+                false,
+                posStride,
+                0,
+            );
+            gl.vertexAttribPointer(
+                cache.a_end,
+                2,
+                gl.FLOAT,
+                false,
+                posStride,
+                posStride,
+            );
+
+            // Bind the real-flag buffer twice with offsets 0 and 1 byte
+            // — same overlap trick as the position buffer. `normalized
+            // = false` makes the byte value cast directly to float
+            // (0 → 0.0, 1 → 1.0) so the shader's `step(0.5, bothReal)`
+            // cleanly discriminates real vs synthesized endpoints.
+            gl.bindBuffer(gl.ARRAY_BUFFER, s.gpuRealBuffer);
+            gl.vertexAttribPointer(
+                cache.a_real_start,
+                1,
+                gl.UNSIGNED_BYTE,
+                false,
+                realStride,
+                0,
+            );
+            gl.vertexAttribPointer(
+                cache.a_real_end,
+                1,
+                gl.UNSIGNED_BYTE,
+                false,
+                realStride,
+                realStride,
+            );
+
+            drawArraysInstanced(gl.TRIANGLE_STRIP, 0, 4, s.count - 1);
         }
 
         setDivisor(cache.a_start, 0);
         setDivisor(cache.a_end, 0);
+        setDivisor(cache.a_real_start, 0);
+        setDivisor(cache.a_real_end, 0);
     }
 
     destroy(chart: SeriesChart): void {