@perspective-dev/viewer-charts 4.5.2 → 5.1.0

package/src/ts/transport/renderer-transport.ts

@@ -84,7 +84,11 @@ interface RendererHandle {
     terminate(): void;
 }
 
-type PendingRenderType = "saveZoom" | "loadAndRender" | "snapshotPng";
+type PendingRenderType =
+    | "saveZoom"
+    | "loadAndRender"
+    | "snapshotPng"
+    | "resize";
 interface PendingRenderRequest {
     kind: PendingRenderType;
     resolve: (v: any) => void;
@@ -110,11 +114,22 @@ interface PendingRenderRequest {
  */
 export class RendererTransport {
     private _handle: RendererHandle | null = null;
+
+    /**
+     * Set by {@link destroy}. Requests allocated after teardown settle
+     * immediately in `_allocPending` — `_post` is already a no-op once
+     * `_handle` is null, so a late request would otherwise never
+     * receive its reply and pend forever.
+     */
+    private _destroyed = false;
     private _proxyChannel: MessageChannel | null = null;
     private _proxySession: any = null;
     private _client: Client;
     private _view: View;
     private _tableName: string | undefined;
+    /** Source panel `slot`, tagged onto dispatched interaction events so the
+     * host can route them (master/detail, global filter) to the right panel. */
+    private _panel: string | undefined;
     private _clientWorkerURL: URL;
     private _clientWasm: WebAssembly.Module;
     private _chartTag: string;
@@ -158,6 +173,37 @@ export class RendererTransport {
      */
     private _displayCtx: CanvasRenderingContext2D | null = null;
 
+    /**
+     * Present-hold state for the staged-present presize protocol
+     * ({@link presize}). While holding, inbound `frameBitmap`s are
+     * STAGED (latest wins) instead of blitted, so the on-screen frame
+     * — old dimensions in the old, unchanged box — stays put until the
+     * host invokes the present closure `presize` resolved to, in the
+     * same task as its layout commit. Entered only by `presize`;
+     * exited by the present closure, by `presize`'s rejection path, or
+     * by `destroy` — every settle path releases the hold or hands the
+     * caller the release.
+     */
+    /**
+     * The last `(cssWidth, cssHeight, dpr)` posted to the worker — at init
+     * or any resize — i.e. the dimensions the worker has already rendered
+     * (or has an in-flight render for). {@link resize} short-circuits when
+     * its measurement matches (±0.5px, the presize protocol's own
+     * threshold): reactive resizes fan in from several host paths per
+     * layout transition (the post-commit fan-out, activation nudges, the
+     * fresh-restore tail), and every worker resize is an unconditional
+     * full re-render.
+     */
+    private _lastPostedSize: {
+        cssWidth: number;
+        cssHeight: number;
+        dpr: number;
+    } | null = null;
+
+    private _holdPresent = false;
+
+    private _stagedFrame: ImageBitmap | null = null;
+
     /**
      * Host-side sink for tooltip + cursor side-effects. The chart
      * inside the renderer calls into a `MessageHostSink` that posts
@@ -182,6 +228,7 @@ export class RendererTransport {
         client: Client;
         view: View;
         tableName?: string;
+        panel?: string;
         clientWasm: WebAssembly.Module;
         clientWorkerURL: URL;
         chartTag: string;
@@ -192,6 +239,7 @@ export class RendererTransport {
         this._client = opts.client;
         this._view = opts.view;
         this._tableName = opts.tableName;
+        this._panel = opts.panel;
         this._clientWorkerURL = opts.clientWorkerURL;
         this._clientWasm = opts.clientWasm;
         this._chartTag = opts.chartTag;
@@ -210,6 +258,7 @@ export class RendererTransport {
         chrome: HTMLCanvasElement;
         facetConfig: FacetConfig;
         pluginConfig: PluginConfig;
+        columnsConfig?: Record<string, any>;
         defaultChartType?: string;
         renderBlitMode: "blit" | "direct";
     }): Promise<void> {
@@ -291,6 +340,7 @@ export class RendererTransport {
             tableName: this._tableName,
             facetConfig: opts.facetConfig,
             pluginConfig: opts.pluginConfig,
+            columnsConfig: opts.columnsConfig,
             defaultChartType: opts.defaultChartType,
             themeVars,
             fontFaces,
@@ -301,6 +351,11 @@ export class RendererTransport {
             precompileShaders: this._precompileShaders,
         };
 
+        this._lastPostedSize = {
+            cssWidth: rect.width,
+            cssHeight: rect.height,
+            dpr,
+        };
         this._handle = await this._createHandle(workerURL, initMsg);
         this._handle.addMessageListener((msg) =>
             this._handleRendererMsg(msg as WorkerMsg),
@@ -438,7 +493,8 @@ export class RendererTransport {
      * `loadAndRenderAck`. Per the worker's "resolve on stale"
      * contract, a mid-flight cancellation (a newer `loadAndRender`
      * superseding this one) still acks — the host's awaiter just
-     * resolves quietly.
+     * resolves quietly. Calls issued after `destroy()` resolve
+     * immediately (see `_allocPending`).
      */
     loadAndRender(opts: {
         viewerConfig: {
@@ -464,19 +520,107 @@ export class RendererTransport {
         this._post({ kind: "redraw" });
     }
 
-    resize(): void {
+    /**
+     * Silently clear the worker chart's selection state (pinned tooltip) —
+     * no selection events are emitted; the worker echoes `dismissTooltip`
+     * to drop the host-side pinned artifact. See `DeselectMsg`.
+     */
+    deselect(): void {
+        this._post({ kind: "deselect" });
+    }
+
+    /**
+     * Resize the chart to the GL canvas's CURRENT CSS box and resolve
+     * once the resized frame has PRESENTED (the worker's `resizeAck`) —
+     * not at message-post, which would let callers proceed while the
+     * old-dimensions bitmap is still on screen. Reactive geometry
+     * changes only; anticipated ones go through {@link presize}.
+     *
+     * A measurement matching {@link _lastPostedSize} resolves immediately
+     * WITHOUT a worker round trip: the worker has already rendered (or is
+     * presenting) that exact frame, and re-posting would be a full
+     * re-render of an identical bitmap.
+     */
+    resize(): Promise<void> {
         if (!this._hostGlCanvas) {
-            return;
+            return Promise.resolve();
         }
 
         const rect = this._hostGlCanvas.getBoundingClientRect();
         const dpr = window.devicePixelRatio || 1;
+        const last = this._lastPostedSize;
+        if (
+            last &&
+            Math.abs(last.cssWidth - rect.width) <= 0.5 &&
+            Math.abs(last.cssHeight - rect.height) <= 0.5 &&
+            last.dpr === dpr
+        ) {
+            return Promise.resolve();
+        }
+
+        return this._postResize(rect.width, rect.height);
+    }
+
+    /**
+     * Staged-present variant of {@link resize}: render at the given
+     * TARGET canvas CSS box (no measurement — the caller supplies the
+     * box the pending layout commit will produce), HOLDING the
+     * resulting frame (and any others that arrive meanwhile) offscreen
+     * instead of blitting, so nothing on screen changes. Resolves,
+     * once the resized frame is staged, to a present closure: calling
+     * it blits the latest staged frame and exits the hold — the host
+     * runs it in the same task as its layout commit so geometry and
+     * pixels land in one paint. On rejection (teardown) the hold is
+     * released here, so every settle path either frees the display or
+     * hands the caller the release.
+     */
+    presize(cssWidth: number, cssHeight: number): Promise<(() => void) | void> {
+        if (!this._hostGlCanvas) {
+            return Promise.resolve();
+        }
+
+        const dpr = window.devicePixelRatio || 1;
+        const last = this._lastPostedSize;
+        if (
+            last &&
+            Math.abs(last.cssWidth - cssWidth) <= 0.5 &&
+            Math.abs(last.cssHeight - cssHeight) <= 0.5 &&
+            last.dpr === dpr
+        ) {
+            return Promise.resolve();
+        }
+
+        this._holdPresent = true;
+        return this._postResize(cssWidth, cssHeight).then(
+            () => () => this._presentStaged(),
+            (err) => {
+                this._presentStaged();
+                throw err;
+            },
+        );
+    }
+
+    private _postResize(cssWidth: number, cssHeight: number): Promise<void> {
+        const dpr = window.devicePixelRatio || 1;
+        const { id, promise } = this._allocPending<void>("resize");
+        this._lastPostedSize = { cssWidth, cssHeight, dpr };
         this._post({
             kind: "resize",
-            cssWidth: rect.width,
-            cssHeight: rect.height,
+            msgId: id,
+            cssWidth,
+            cssHeight,
             dpr,
         });
+        return promise;
+    }
+
+    private _presentStaged(): void {
+        this._holdPresent = false;
+        const staged = this._stagedFrame;
+        this._stagedFrame = null;
+        if (staged) {
+            this._drawFrameBitmap(staged);
+        }
     }
 
     clear() {
@@ -501,12 +645,39 @@ export class RendererTransport {
      * Allocate a pending request slot of the given `kind`. Returns the
      * id (encoded into the outgoing `ControlMsg`) and a promise that
      * resolves / rejects when the matching reply arrives or
-     * `destroy()` drains the table.
+     * `destroy()` drains the table. Requests issued *after* `destroy()`
+     * settle immediately with the same per-kind semantics as the drain.
      */
     private _allocPending<T>(kind: PendingRenderType): {
         id: number;
         promise: Promise<T>;
     } {
+        // A request issued after `destroy()` would never settle: `_post`
+        // no-ops with no handle, so no reply ever lands — and the host
+        // awaits `loadAndRender` while holding its per-renderer draw
+        // lock, so a pending-forever promise wedges that panel's lock
+        // permanently. (Reachable when an external DOM disconnect
+        // `delete()`s the element mid-draw; the host's own teardown
+        // paths are serialized behind the same lock.) Mirror the
+        // `destroy()` drain: `loadAndRender` resolves silently,
+        // reply-bearing kinds reject. The pre-attached no-op `catch`
+        // marks the rejection handled for fire-and-forget callers
+        // (`saveZoom`) without affecting real awaiters.
+        if (this._destroyed) {
+            if (kind === "loadAndRender") {
+                return {
+                    id: -1,
+                    promise: Promise.resolve(undefined as unknown as T),
+                };
+            }
+
+            const promise = Promise.reject<T>(
+                new Error("RendererTransport destroyed"),
+            );
+            promise.catch(() => {});
+            return { id: -1, promise };
+        }
+
         const id = ++this._pendingCounter;
         const promise = new Promise<T>((resolve, reject) => {
             this._pending.set(id, { kind, resolve, reject });
@@ -548,6 +719,7 @@ export class RendererTransport {
     }
 
     destroy(): void {
+        this._destroyed = true;
         this._post({ kind: "destroy" });
         if (this._proxySession) {
             this._proxySession.close().catch(() => {});
@@ -572,6 +744,9 @@ export class RendererTransport {
         // them, and so the GPU-backed 2D context can release earlier.
         this._hostGlCanvas = null;
         this._displayCtx = null;
+        this._holdPresent = false;
+        this._stagedFrame?.close();
+        this._stagedFrame = null;
 
         // Drain pending request promises with kind-aware semantics:
         //  - `loadAndRender` resolves silently (the host's awaited draw
@@ -633,7 +808,9 @@ export class RendererTransport {
                         {
                             bubbles: true,
                             composed: true,
-                            detail: msg.detail,
+                            // Tag with the source panel so a multi-panel host
+                            // can attribute the click to the right panel.
+                            detail: { ...msg.detail, panel: this._panel },
                         },
                     ),
                 );
@@ -658,6 +835,9 @@ export class RendererTransport {
                     removeConfigs as any,
                     insertConfigs as any,
                 );
+                // Tag with the source panel so the host's master/detail +
+                // global-filter routing can identify the originating panel.
+                detail.panel = this._panel;
                 this._dispatchOnViewer(
                     new CustomEvent<PerspectiveSelectDetail>(
                         "perspective-global-filter",
@@ -672,7 +852,13 @@ export class RendererTransport {
             }
 
             case "frameBitmap":
-                this._drawFrameBitmap(msg.bitmap);
+                if (this._holdPresent) {
+                    this._stagedFrame?.close();
+                    this._stagedFrame = msg.bitmap;
+                } else {
+                    this._drawFrameBitmap(msg.bitmap);
+                }
+
                 break;
             case "error":
                 this._rejectReady(new Error(msg.message));
@@ -680,6 +866,9 @@ export class RendererTransport {
             case "loadAndRenderAck":
                 this._resolvePending(msg.msgId, "loadAndRender", undefined);
                 break;
+            case "resizeAck":
+                this._resolvePending(msg.msgId, "resize", undefined);
+                break;
             case "snapshotPngReply":
                 this._resolvePending(msg.requestId, "snapshotPng", msg.blob);
                 break;

package/src/ts/webgl/instanced-attrs.ts

@@ -108,6 +108,12 @@ export function createQuadCornerBuffer(gl: GL): WebGLBuffer {
  * paint zero data). No-op return `true` when `attr` is negative
  * (optimized-out attribute — drawing the rest is still valid).
  *
+ * `firstInstance` byte-offsets the attribute pointer so the draw's
+ * instance 0 reads element `firstInstance` of the buffer — the WebGL
+ * substitute for a `baseInstance` draw parameter. Faceted renderers
+ * use it to draw a contiguous per-facet sub-range of a shared
+ * instance buffer.
+ *
  * Render-path uses `peek`, never `getOrCreate`: the latter recreates
  * with zero-initialized contents when `_totalCapacity` has grown past
  * the current buffer, which would wipe the previous draw's vertex
@@ -120,6 +126,7 @@ export function bindInstancedFloatAttr(
     attr: number,
     name: string,
     components: number,
+    firstInstance = 0,
 ): boolean {
     if (attr < 0) {
         return true;
@@ -133,7 +140,14 @@ export function bindInstancedFloatAttr(
     const gl: GL = glManager.gl;
     gl.bindBuffer(gl.ARRAY_BUFFER, buf.buffer);
     gl.enableVertexAttribArray(attr);
-    gl.vertexAttribPointer(attr, components, gl.FLOAT, false, 0, 0);
+    gl.vertexAttribPointer(
+        attr,
+        components,
+        gl.FLOAT,
+        false,
+        0,
+        firstInstance * components * Float32Array.BYTES_PER_ELEMENT,
+    );
     instancing.setDivisor(attr, 1);
     return true;
 }

package/src/ts/worker/dispatch.ts

@@ -40,9 +40,12 @@ export function dispatch(r: WorkerRenderer, msg: ControlMsg): void {
         case "redraw":
             r.redraw();
             break;
+        case "deselect":
+            r.chartImpl.deselect?.();
+            break;
         case "resize":
             r.resize(msg.cssWidth, msg.cssHeight, msg.dpr);
-            r.redraw();
+            r.redrawAck(msg.msgId);
             break;
         case "clear":
             r.clear();

package/src/ts/worker/renderer.worker.ts

@@ -204,6 +204,9 @@ export class WorkerRenderer {
 
         this.chartImpl.setFacetConfig?.(msg.facetConfig);
         this.chartImpl.setPluginConfig?.(msg.pluginConfig);
+        if (msg.columnsConfig) {
+            this.chartImpl.setColumnsConfig?.(msg.columnsConfig);
+        }
 
         if (this.chartImpl.setZoomController) {
             this.zoomController = new ZoomController();
@@ -295,16 +298,23 @@ export class WorkerRenderer {
             try {
                 await viewToColumnDataMap(
                     this.view,
-                    async (cols) => {
+                    async (cols, deliveredRows) => {
                         if (this._renderGen !== myGen) {
                             throw new StaleGenerationError();
                         }
 
+                        // `totalRows` came from a SEPARATE `num_rows()`
+                        // round-trip; a fast-updating table with deletions
+                        // can shrink the view before the Arrow fetch, which
+                        // clamps its window silently. Iterating to the stale
+                        // count reads typed arrays out-of-bounds (`undefined`
+                        // values no validity bitmap covers) — clamp to what
+                        // was actually delivered.
                         await this.chartImpl.uploadAndRender(
                             this.glManager,
                             cols,
                             0,
-                            totalRows,
+                            Math.min(totalRows, deliveredRows),
                         );
                     },
                     { end_row: totalRows, float32: msg.options.float32 },
@@ -327,6 +337,24 @@ export class WorkerRenderer {
         this.chartImpl.requestRender(this.glManager);
     }
 
+    /**
+     * `redraw`, acked to the host AFTER the frame's present completes —
+     * the reply backing the viewer's presize contract (`ResizeAckMsg`):
+     * `plugin.resize()` must not resolve until the resized frame is
+     * actually on screen. A resize landing mid-present defers its
+     * canvas mutation (`deferIfDraining`), but the redraw's own frame
+     * applies pending dimensions in `beginFrame`, so the present this
+     * awaits IS at the new size. Always acks — a failed present or a
+     * torn-down chart resolves the host's await rather than stranding
+     * it (completion, not success, is the contract).
+     */
+    redrawAck(msgId: number): void {
+        this.chartImpl
+            .requestRender(this.glManager)
+            .catch(() => {})
+            .finally(() => this.post({ kind: "resizeAck", msgId }));
+    }
+
     resize(cssWidth: number, cssHeight: number, dpr: number): void {
         // `glManager.resize` would set `canvas.width = N`, which the
         // spec mandates clears the drawing buffer immediately. In
@@ -572,7 +600,11 @@ export class WorkerRenderer {
         // chart left the shared canvas at its own size) would render at
         // the wrong dimensions.
         this.glManager.beginFrame();
-        this.chartImpl._fullRender(this.glManager);
+        // `renderFrameSync` (not `_fullRender`) so the gridline + chrome
+        // 2D canvases are actually painted here — the scheduler normally
+        // defers those to a post-fence flush, but the snapshot path
+        // bypasses the scheduler and composites the 2D layers below.
+        this.chartImpl.renderFrameSync(this.glManager);
         const gl = this.glManager.gl;
         const glCanvas = gl.canvas as OffscreenCanvas;
         const w = glCanvas.width;