@perspective-dev/viewer-charts 4.5.2 → 5.1.0

package/src/ts/plugin/charts.ts

@@ -48,9 +48,12 @@ export interface ChartTypeConfig {
      * Per-chart-type overrides for `DEFAULT_PLUGIN_CONFIG`. Used when a
      * field's sensible default differs by chart family — currently
      * `include_zero` (true for Y Bar / Y Area / X Bar, false for line
-     * / scatter / cartesian / financial). Applied at schema generation
-     * and at `restore({})` so the effective default matches the
-     * surfaced UI default.
+     * / scatter / cartesian / financial) and `facet_mode` ("overlay"
+     * for the band-pipeline families — series / financial — whose
+     * historical split_by rendering is the single stacked/colored
+     * plot; "grid" elsewhere). Applied at schema generation and at
+     * `restore({})` so the effective default matches the surfaced UI
+     * default.
      */
     plugin_field_defaults?: Partial<PluginConfig>;
 }
@@ -85,10 +88,19 @@ const SERIES_FIELDS: readonly PluginConfigField[] = [
     "bar_inner_pad",
 ];
 
+// The band pipeline's historical split_by rendering is a single plot
+// (splits stacked / colored in place), so the series family defaults
+// `facet_mode` to "overlay" — grid faceting is the opt-in. Cartesian
+// charts keep the global "grid" default from `DEFAULT_PLUGIN_CONFIG`.
+const SERIES_DEFAULTS: Partial<PluginConfig> = { facet_mode: "overlay" };
+
 // Bar / area series glyphs grow from the zero baseline, so the value
 // axis must enclose 0 to render correctly. Line / scatter glyphs have
 // no such constraint — their default `include_zero` stays `false`.
-const ZERO_ANCHORED_DEFAULTS: Partial<PluginConfig> = { include_zero: true };
+const ZERO_ANCHORED_DEFAULTS: Partial<PluginConfig> = {
+    ...SERIES_DEFAULTS,
+    include_zero: true,
+};
 
 // Pure Cartesian (X/Y Scatter, X/Y Line) — no categorical axis, so no
 // band geometry; gets the facet-routing variant of zoom_mode.
@@ -210,9 +222,11 @@ const CHARTS: ChartTypeConfig[] = [
     }),
     make("Y Line", "y-line", SERIES, SELECT, 1, Y_AXIS, SERIES_FIELDS, {
         default_chart_type: "line",
+        plugin_field_defaults: SERIES_DEFAULTS,
     }),
     make("Y Scatter", "y-scatter", SERIES, SELECT, 1, Y_AXIS, SERIES_FIELDS, {
         default_chart_type: "scatter",
+        plugin_field_defaults: SERIES_DEFAULTS,
     }),
     make("Y Area", "y-area", SERIES, SELECT, 1, Y_AXIS, SERIES_FIELDS, {
         default_chart_type: "area",
@@ -250,9 +264,11 @@ const CHARTS: ChartTypeConfig[] = [
     make("Heatmap", "heatmap", HIER, SELECT, 1, ["Color"], HEATMAP_FIELDS),
     make("Candlestick", "candlestick", FIN, TOGGLE, 1, FIN_NAMES, FIN_FIELDS, {
         default_chart_type: "candlestick",
+        plugin_field_defaults: SERIES_DEFAULTS,
     }),
     make("OHLC", "ohlc", FIN, TOGGLE, 1, FIN_NAMES, FIN_FIELDS, {
         default_chart_type: "ohlc",
+        plugin_field_defaults: SERIES_DEFAULTS,
     }),
     make(
         "Map Scatter",

package/src/ts/plugin/plugin.ts

@@ -154,7 +154,6 @@ export class HTMLPerspectiveViewerWebGLPluginElement
     private _renderer: RendererTransport | null = null;
     private _rendererPromise: Promise<RendererTransport> | null = null;
     private _rawEventForwarder: RawEventForwarder | null = null;
-    private _generation = 0;
     private _resetClickAbort: AbortController | null = null;
 
     /**
@@ -172,6 +171,16 @@ export class HTMLPerspectiveViewerWebGLPluginElement
      */
     private _pluginConfigStore: PluginConfig | null = null;
 
+    /**
+     * Per-column config (`alt_axis`, `chart_type`, formats, …), held on
+     * the element for the same reason as `_pluginConfigStore`: the host
+     * calls `restore()` BEFORE the first draw builds the renderer, so
+     * forwarding only to a live renderer silently drops the initial
+     * `columns_config` — `_buildRenderer` ships it in the `InitMsg`
+     * instead.
+     */
+    private _columnsConfig: Record<string, any> = {};
+
     private get _pluginConfig(): PluginConfig {
         if (!this._pluginConfigStore) {
             this._pluginConfigStore = this._effectiveDefaults();
@@ -285,8 +294,7 @@ export class HTMLPerspectiveViewerWebGLPluginElement
         // is the dispose signal: if `this._rendererPromise` no longer
         // points at *this* build when it resolves, the element was
         // deleted (or a reconnect started a newer build) and we destroy
-        // the orphan instead of adopting it. Promise identity — not
-        // `_generation`, which every `draw`/`update` bumps — is the
+        // the orphan instead of adopting it. Promise identity is the
         // right token: a rapid draw→update must NOT tear down the
         // single in-flight build it shares via this memoized promise.
         const p: Promise<RendererTransport> = this._buildRenderer(view).then(
@@ -353,11 +361,16 @@ export class HTMLPerspectiveViewerWebGLPluginElement
 
     private async _buildRenderer(view: View): Promise<RendererTransport> {
         const viewer = this.parentElement as HTMLPerspectiveViewerElement;
-        const client = await viewer.getClient();
+        // This chart's own panel (its `slot`). Used to scope the client/table
+        // to THIS panel rather than the host's active/seed panel (the bare
+        // getClient()/getTable() resolve element-wide in a multi-panel viewer),
+        // and to tag the dispatched interaction events with their source panel.
+        const panel = this.getAttribute("slot") ?? undefined;
+        const client = await viewer.getClient({ panel });
         const viewer_class = customElements.get("perspective-viewer");
         const clientWasm = viewer_class.get_wasm_module();
         const clientWorkerURL = viewer_class.get_worker_url();
-        const table = await viewer?.getTable?.();
+        const table = await viewer?.getTable?.({ panel });
         const tableName: string | undefined = table
             ? await table.get_name()
             : undefined;
@@ -370,6 +383,7 @@ export class HTMLPerspectiveViewerWebGLPluginElement
             client,
             view,
             tableName,
+            panel,
             clientWorkerURL,
             clientWasm,
             chartTag: this._chartType.tag,
@@ -392,6 +406,7 @@ export class HTMLPerspectiveViewerWebGLPluginElement
                 zoom_mode: this._pluginConfig.facet_zoom_mode,
             },
             pluginConfig: this._pluginConfig,
+            columnsConfig: this._columnsConfig,
             defaultChartType: this._chartType.default_chart_type,
             renderBlitMode: BLIT_MODE,
         });
@@ -553,8 +568,16 @@ export class HTMLPerspectiveViewerWebGLPluginElement
         return this._drawImpl(view);
     }
 
+    /**
+     * Shared body of `draw` / `update`. No re-entrancy guard: the host
+     * serializes every rendering call (`draw`, `update`, `render`,
+     * `resize`) and `delete` on its per-renderer draw lock, so this
+     * method never overlaps itself or a teardown. The one exception —
+     * an external DOM disconnect `delete()`ing the element mid-draw —
+     * is absorbed by `RendererTransport`, whose post-`destroy()`
+     * requests settle immediately instead of pending forever.
+     */
     private async _drawImpl(view: View): Promise<void> {
-        const gen = ++this._generation;
         let renderer: RendererTransport;
         try {
             renderer = await this._ensureRenderer(view);
@@ -564,19 +587,17 @@ export class HTMLPerspectiveViewerWebGLPluginElement
             return;
         }
 
-        if (this._generation !== gen) {
-            return;
-        }
-
         renderer.setView(view);
         renderer.setBufferMaxCapacity(this._chartType.max_cells);
+        const panel = this.getAttribute("slot") ?? undefined;
         const viewer = this
             .parentElement as HTMLPerspectiveViewerElement | null;
-        const viewerConfig = (await viewer?.getViewConfig?.()) ?? {};
-        if (this._generation !== gen) {
+
+        if (viewer === null) {
             return;
         }
 
+        const viewerConfig = await viewer.getViewConfig({ panel });
         await renderer.loadAndRender({
             viewerConfig: {
                 group_by: viewerConfig?.group_by ?? [],
@@ -588,17 +609,78 @@ export class HTMLPerspectiveViewerWebGLPluginElement
     }
 
     async clear(): Promise<void> {
-        this._generation++;
         this._renderer?.clear();
     }
 
     async resize(): Promise<void> {
-        this._renderer?.resize();
+        // Hidden (an unslotted tab-stack panel, a `display: none` host):
+        // the 0×0 rect a hidden element reports would resize the worker
+        // canvas to zero — CLEARING the retained frame, so the next
+        // activation repaints from blank (the two-stage tab-switch
+        // artifact). Skip instead and keep the last frame for an instant,
+        // single-blit reveal — mirroring the datagrid's guard. The host's
+        // activation nudge is also a `resize()`, so a hidden panel's nudge
+        // is free by the same check.
+        if (!this.isConnected || this.offsetParent == null) {
+            return;
+        }
+
+        // AWAITED to the resized frame's PRESENT (the worker's
+        // `resizeAck`) — the host's presize protocol style-overrides
+        // this element to its target box and holds the layout commit on
+        // this promise, so resolving at message-post would commit the
+        // settings-pane layout against the old-dimensions bitmap (the
+        // aspect-ratio warp the datagrid's synchronous resize never
+        // shows).
+        await this._renderer?.resize();
+    }
+
+    /**
+     * OPTIONAL host presize protocol: render at the TARGET element box
+     * `(width, height)` — the box the host's pending layout commit will
+     * produce — holding the resulting frame offscreen, so nothing on
+     * screen changes during the round-trip. Resolves, once the resized
+     * frame is staged, to a present closure; the host calls it in the
+     * same task as the layout commit, landing geometry and pixels in
+     * one paint. Plugins without this method get the host's held
+     * style-override presize path instead.
+     */
+    async presize(width: number, height: number): Promise<(() => void) | void> {
+        if (
+            !this.isConnected ||
+            this.offsetParent == null ||
+            !this._renderer ||
+            !this._glCanvas
+        ) {
+            return;
+        }
+
+        // Target GL-canvas box = its current box shifted by the element's
+        // box delta — the chrome between the element edge and the canvas
+        // is constant across a resize.
+        const hostRect = this.getBoundingClientRect();
+        const glRect = this._glCanvas.getBoundingClientRect();
+        return await this._renderer.presize(
+            Math.max(0, glRect.width + (width - hostRect.width)),
+            Math.max(0, glRect.height + (height - hostRect.height)),
+        );
     }
 
     restyle() {
         this._renderer?.invalidateTheme();
-        return 5;
+    }
+
+    /**
+     * Clear any active selection state (pinned tooltip) WITHOUT emitting
+     * selection events — the host calls this when a global filter
+     * contributed by this panel's selection is removed from the global
+     * filter bar, so the pin can't outlive the filter it produced. The
+     * transport's `_lastInsertConfig` (remove-set memory) is deliberately
+     * RETAINED so a subsequent selection still replaces any leftover
+     * clauses rather than accumulating.
+     */
+    async deselect(): Promise<void> {
+        this._renderer?.deselect();
     }
 
     async render(view: View): Promise<Blob> {
@@ -622,12 +704,12 @@ export class HTMLPerspectiveViewerWebGLPluginElement
             ...config,
         };
 
+        this._columnsConfig = columns_config ?? {};
         this._renderer?.setPluginConfig(this._pluginConfig);
-        this._renderer?.setColumnsConfig(columns_config ?? {});
+        this._renderer?.setColumnsConfig(this._columnsConfig);
     }
 
     delete() {
-        this._generation++;
         if (this._rawEventForwarder) {
             this._rawEventForwarder.detach();
             this._rawEventForwarder = null;

package/src/ts/render/scheduler.ts

@@ -16,8 +16,8 @@ import type { WebGLContextManager } from "../webgl/context-manager";
  * Module-level render scheduler. The single entry point for driving a
  * chart frame. Every render-triggering caller — upload chunks, zoom /
  * pan, resize, theme invalidation, host-driven redraws — calls
- * `requestRender(glManager, fullRender)` and awaits the returned
- * promise.
+ * `requestRender(glManager, fullRender, render2D)` and awaits the
+ * returned promise.
  *
  * ## Guarantees
  *
@@ -51,9 +51,12 @@ import type { WebGLContextManager } from "../webgl/context-manager";
  *     begins, letting per-context GPU work overlap.
  *
  *   - **Phase 2 (parallel):** `Promise.all(snapshot.map(present))`
- *     where `present` does `await awaitGpuFence(); endFrame();
- *     resolve waiters`. Each entry's waiters resolve as soon as its
- *     own present completes — independent of other entries.
+ *     where `present` does `await awaitGpuFence(); render2D();
+ *     endFrame(); resolve waiters`. The `render2D()` step draws the 2D
+ *     layers (gridlines + chrome) only after the GPU fence, so the 2D
+ *     placeholder canvases don't present a frame ahead of the GL frame
+ *     on resize. Each entry's waiters resolve as soon as its own
+ *     present completes — independent of other entries.
  *
  * ## Failure modes
  *
@@ -78,6 +81,15 @@ import type { WebGLContextManager } from "../webgl/context-manager";
 interface Entry {
     glManager: WebGLContextManager;
     fullRender: () => void;
+    /**
+     * The chart's 2D-canvas draws (gridlines + chrome), split out of
+     * `fullRender` so they run *after* `awaitGpuFence` — see
+     * {@link present}. Deferring the 2D work past the GPU fence keeps
+     * the 2D placeholder canvases from pushing a resized frame to the
+     * compositor a frame ahead of the GL present (the GL/2D "distortion"
+     * on resize). Populated as captured closures during `fullRender`.
+     */
+    render2D: () => void;
     waiters: PromiseWithResolvers<void>[];
 }
 
@@ -105,25 +117,30 @@ const inFlight = new Set<WebGLContextManager>();
 const deferred = new Map<WebGLContextManager, (() => void)[]>();
 
 /**
- * Request a coalesced render of `glManager` whose body is
- * `fullRender`. Returns a promise that resolves when this entry's
- * Phase 2 (`awaitGpuFence` + `endFrame`) completes.
+ * Request a coalesced render of `glManager`. `fullRender` submits the
+ * GL commands (Phase 1, synchronous); `render2D` draws the 2D layers
+ * (gridlines + chrome) and runs in Phase 2 *after* `awaitGpuFence`, so
+ * the 2D canvases don't present ahead of the GL frame. Returns a
+ * promise that resolves when this entry's Phase 2 (`awaitGpuFence` +
+ * `render2D` + `endFrame`) completes.
  *
  * If a request is already pending for the same glManager, the new
- * call's `fullRender` closure replaces the prior one (latest call
- * wins; closures read chart state lazily so this is functionally a
- * no-op, but keeps the closure fresh) and the returned promise
- * resolves alongside the existing waiters.
+ * call's `fullRender` / `render2D` closures replace the prior ones
+ * (latest call wins; closures read chart state lazily so this is
+ * functionally a no-op, but keeps the closures fresh) and the returned
+ * promise resolves alongside the existing waiters.
  */
 export function requestRender(
     glManager: WebGLContextManager,
     fullRender: () => void,
+    render2D: () => void,
 ): Promise<void> {
     let entry = pending.get(glManager);
     if (entry) {
         entry.fullRender = fullRender;
+        entry.render2D = render2D;
     } else {
-        entry = { glManager, fullRender, waiters: [] };
+        entry = { glManager, fullRender, render2D, waiters: [] };
         pending.set(glManager, entry);
     }
 
@@ -354,6 +371,15 @@ async function present(entry: Entry): Promise<void> {
 
     try {
         await entry.glManager.awaitGpuFence();
+        // Draw the 2D layers (gridlines + chrome) only now that the GL
+        // frame's GPU work has completed. Issuing the 2D-canvas commands
+        // here — rather than inline in `fullRender` (Phase 1) — keeps the
+        // 2D placeholder canvases from pushing their resized frame to the
+        // compositor during the fence-wait yields, a frame ahead of the
+        // GL present. That early push is the visible GL/2D misalignment
+        // on resize. Failures fall through to the same present-failed
+        // path as the fence.
+        entry.render2D();
         entry.glManager.endFrame();
         for (const w of entry.waiters) {
             w.resolve();

package/src/ts/transport/protocol.ts

@@ -31,6 +31,7 @@ export type ControlMsg =
     | SetBufferMaxCapacityMsg
     | LoadAndRenderMsg
     | RedrawMsg
+    | DeselectMsg
     | ResizeMsg
     | ClearMsg
     | InvalidateThemeMsg
@@ -53,6 +54,7 @@ export type WorkerMsg =
     | UserClickMsg
     | UserSelectMsg
     | LoadAndRenderAckMsg
+    | ResizeAckMsg
     | FrameBitmapMsg
     | ErrorMsg;
 
@@ -160,6 +162,15 @@ export interface InitMsg {
      * a `setPluginConfig` control msg.
      */
     pluginConfig: PluginConfig;
+
+    /**
+     * Initial per-column config (`alt_axis`, `chart_type`, formats, …).
+     * Seeds the chart impl before the first `loadAndRender` — the host
+     * calls `plugin.restore` before the renderer exists, so without
+     * this the initial `columns_config` never reaches the worker.
+     * Later changes arrive as `setColumnsConfig` control msgs.
+     */
+    columnsConfig?: Record<string, any>;
     defaultChartType?: string;
 
     /**
@@ -300,13 +311,44 @@ export interface RedrawMsg {
     kind: "redraw";
 }
 
+/**
+ * Host → worker: silently clear the chart's selection state (pinned
+ * tooltip) — no `userSelect` reply, so the host filter-bar removal that
+ * triggered it can't echo back into the host's filter set. The worker's
+ * `TooltipController.dismiss()` posts `dismissTooltip` to tear down the
+ * host-side pinned artifact.
+ */
+export interface DeselectMsg {
+    kind: "deselect";
+}
+
+/**
+ * Host → worker: resize the chart to a new CSS box. Replied with
+ * {@link ResizeAckMsg} AFTER the resized frame PRESENTS — the host's
+ * `plugin.resize()` promise is the viewer's presize contract ("the
+ * plugin has repainted at the target box when this resolves"), so an
+ * ack at message-receipt would let the settings-pane layout commit
+ * against the old-dimensions bitmap (the aspect-ratio warp).
+ */
 export interface ResizeMsg {
     kind: "resize";
+    msgId: number;
     cssWidth: number;
     cssHeight: number;
     dpr: number;
 }
 
+/**
+ * Worker → host reply to a `ResizeMsg`, posted after the resized
+ * frame's present completes. Always sent — present failures and
+ * torn-down charts included — so the host's awaited promise resolves
+ * deterministically.
+ */
+export interface ResizeAckMsg {
+    kind: "resizeAck";
+    msgId: number;
+}
+
 export interface ClearMsg {
     kind: "clear";
 }