@perspective-dev/viewer-charts 5.5.0 → 5.6.0

package/dist/esm/plugin/format-defaults.d.ts

@@ -1,4 +1,4 @@
-import type { DateFormatConfig, NumberFormatConfig } from "@perspective-dev/viewer/src/ts/column-format.js";
+import type { DateFormatConfig, NumberFormatConfig } from "@perspective-dev/viewer/column-format";
 /**
  * The chart plugin's default per-column formats, declared to the viewer in
  * `column_config_schema()` and applied by the render path under sparse or

package/dist/esm/plugin/plugin.d.ts

@@ -112,7 +112,7 @@ export declare class HTMLPerspectiveViewerWebGLPluginElement extends HTMLElement
         group_by?: string[];
         split_by?: string[];
         group_rollup_mode?: string;
-    }): {
+    }, _plugin_config?: Record<string, unknown> | null, role?: "column" | "group_by" | "split_by"): {
         fields: (Record<string, unknown> & {
             kind: string;
         })[];

package/dist/esm/webgl/context-manager.d.ts

@@ -141,17 +141,17 @@ export declare class WebGLContextManager {
      */
     setFrameCallback(cb: ((bitmap: ImageBitmap) => void) | null): void;
     /**
-     * Ship the current canvas contents as an `ImageBitmap` to the host
-     * when a frame callback is registered and the surface is an
+     * Ship a copy of the current canvas contents as an `ImageBitmap` to
+     * the host when a frame callback is registered and the surface is an
      * `OffscreenCanvas`. Otherwise no-op (direct mode paints straight to
      * the visible drawing buffer).
      */
-    endFrame(): void;
+    endFrame(): Promise<void>;
     /**
      * Resolve when every GL command submitted up to this call has been
-     * executed by the GPU. WebGL2 issues a `fenceSync` and polls
-     * `clientWaitSync` (yielding to the task queue between polls); WebGL1
-     * falls back to a blocking `gl.finish()` (acceptable in a worker).
+     * executed by the GPU, polling a WebGL2 fence with a flush on every
+     * poll and falling back to a blocking `gl.finish()` on WebGL1 or on
+     * `WAIT_FAILED`.
      */
     awaitGpuFence(): Promise<void>;
     ensureBufferCapacity(totalRows: number): void;

package/package.json

@@ -1,7 +1,32 @@
 {
   "name": "@perspective-dev/viewer-charts",
-  "version": "5.5.0",
-  "description": "Perspective.js WebGL Plugin",
+  "version": "5.6.0",
+  "description": "WebGL charts for `<perspective-viewer>`: bar, line, scatter, heatmap, treemap, sunburst, candlestick and map plugins for large, streaming datasets.",
+  "keywords": [
+    "perspective",
+    "datagrid",
+    "data-grid",
+    "pivot-table",
+    "pivot",
+    "charts",
+    "visualization",
+    "dashboard",
+    "analytics",
+    "bi",
+    "streaming",
+    "real-time",
+    "wasm",
+    "webassembly",
+    "arrow",
+    "webgl",
+    "chart",
+    "heatmap",
+    "treemap",
+    "candlestick",
+    "map",
+    "web-component"
+  ],
+  "homepage": "https://perspective-dev.github.io",
   "unpkg": "./dist/cdn/perspective-viewer-charts.js",
   "jsdelivr": "./dist/cdn/perspective-viewer-charts.js",
   "type": "module",
@@ -31,14 +56,14 @@
   "author": "",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@perspective-dev/client": "^5.6.0",
+    "@perspective-dev/viewer": "^5.6.0",
+    "@perspective-dev/esbuild-plugin": "^5.6.0",
+    "@perspective-dev/test": "^5.6.0",
     "@types/node": ">=22",
     "lightningcss": "^1.29.0",
     "typescript": ">=5 <6",
-    "webpack-glsl-minify": "1.5.0",
-    "@perspective-dev/client": "^5.5.0",
-    "@perspective-dev/test": "^5.5.0",
-    "@perspective-dev/esbuild-plugin": "^5.5.0",
-    "@perspective-dev/viewer": "^5.5.0"
+    "webpack-glsl-minify": "1.5.0"
   },
   "scripts": {
     "build": "node ./build.mjs",

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

@@ -20,7 +20,7 @@ import {
 } from "../../../webgl/instanced-attrs";
 import { compileProgram } from "../../../webgl/program-cache";
 import { colorRangePivot } from "../../../theme/gradient";
-import { formatTickValue, formatDateTickValue } from "../../../layout/ticks";
+import { buildPointRowTooltipLines } from "../tooltip-lines";
 import lineVert from "../../../shaders/line.vert.glsl";
 import lineFrag from "../../../shaders/line.frag.glsl";
 
@@ -122,41 +122,11 @@ export class LineGlyph implements Glyph {
 
     //  helpers
 
-    async buildTooltipLines(
+    buildTooltipLines(
         chart: CartesianChart,
         flatIdx: number,
     ): Promise<string[][]> {
-        const grid: string[][] = [];
-        if (!chart._xData || !chart._yData) {
-            return grid;
-        }
-
-        if (chart._splitGroups.length > 0 && chart._seriesCapacity > 0) {
-            const seriesIdx = Math.floor(flatIdx / chart._seriesCapacity);
-            const sg = chart._splitGroups[seriesIdx];
-            if (sg) {
-                grid.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);
-        grid.push([chart._xLabel || "Row", xFormatted]);
-
-        const yType = chart._columnTypes[chart._yLabel] || "";
-        const yIsDate = yType === "date" || yType === "datetime";
-        const yFormatted = yIsDate
-            ? formatDateTickValue(yVal)
-            : formatTickValue(yVal);
-        grid.push([chart._yLabel, yFormatted]);
-
-        return grid;
+        return buildPointRowTooltipLines(chart, flatIdx);
     }
 
     tooltipOptions() {

package/src/ts/charts/chart-base.ts

@@ -18,7 +18,7 @@ import {
     sourceColumn,
     type NumberFormatConfig,
     type DateFormatConfig,
-} from "@perspective-dev/viewer/src/ts/column-format.js";
+} from "@perspective-dev/viewer/column-format";
 import type { ColumnDataMap } from "../data/view-reader";
 import { LazyRowFetcher } from "../data/lazy-row";
 import {

package/src/ts/event-detail.ts

@@ -49,4 +49,4 @@ export interface PerspectiveClickDetail {
     panel?: string;
 }
 
-export { PerspectiveSelectDetail } from "@perspective-dev/viewer/src/ts/extensions.js";
+export { PerspectiveSelectDetail } from "@perspective-dev/viewer/select-detail";

package/src/ts/plugin/format-defaults.ts

@@ -13,7 +13,7 @@
 import type {
     DateFormatConfig,
     NumberFormatConfig,
-} from "@perspective-dev/viewer/src/ts/column-format.js";
+} from "@perspective-dev/viewer/column-format";
 
 /**
  * The chart plugin's default per-column formats, declared to the viewer in

package/src/ts/plugin/plugin.ts

@@ -255,6 +255,24 @@ const GLOBAL_STYLES = (() => {
  */
 let BLIT_MODE: "direct" | "blit" = RENDER_BLIT_MODE;
 
+/**
+ * A column's `date_format` / `number_format` controls, which are the only ones
+ * that apply to a value rendered as an axis tick or tooltip label.
+ */
+function format_fields(
+    column_type: string,
+): Array<Record<string, unknown> & { kind: string }> {
+    if (column_type === "integer" || column_type === "float") {
+        return [{ kind: "NumberFormat", default: CHART_NUMBER_DEFAULTS }];
+    } else if (column_type === "datetime") {
+        return [{ kind: "DatetimeFormat", default: CHART_DATETIME_DEFAULTS }];
+    } else if (column_type === "date") {
+        return [{ kind: "DatetimeFormat", default: CHART_DATE_DEFAULTS }];
+    }
+
+    return [];
+}
+
 export class HTMLPerspectiveViewerWebGLPluginElement
     extends HTMLElement
     implements IPerspectiveViewerPlugin
@@ -601,9 +619,15 @@ export class HTMLPerspectiveViewerWebGLPluginElement
             split_by?: string[];
             group_rollup_mode?: string;
         },
+        _plugin_config?: Record<string, unknown> | null,
+        role?: "column" | "group_by" | "split_by",
     ) {
         const fields: Array<Record<string, unknown> & { kind: string }> = [];
 
+        if (role === "group_by" || role === "split_by") {
+            return { fields: format_fields(column_type) };
+        }
+
         if (group === "Color") {
             const numeric_gradient =
                 this._chartType.category === "Hierarchical Charts"
@@ -721,23 +745,7 @@ export class HTMLPerspectiveViewerWebGLPluginElement
 
         // Per-column formatter widgets. Surfaced for every chart type so
         // axes / tooltips / legends honor the user's format choice.
-        if (column_type === "integer" || column_type === "float") {
-            fields.push({
-                kind: "NumberFormat",
-                default: CHART_NUMBER_DEFAULTS,
-            });
-        } else if (column_type === "datetime") {
-            fields.push({
-                kind: "DatetimeFormat",
-                default: CHART_DATETIME_DEFAULTS,
-            });
-        } else if (column_type === "date") {
-            fields.push({
-                kind: "DatetimeFormat",
-                default: CHART_DATE_DEFAULTS,
-            });
-        }
-
+        fields.push(...format_fields(column_type));
         return { fields };
     }
 

package/src/ts/render/scheduler.ts

@@ -380,18 +380,16 @@ async function present(entry: Entry): Promise<void> {
         // on resize. Failures fall through to the same present-failed
         // path as the fence.
         entry.render2D();
-        entry.glManager.endFrame();
+        await entry.glManager.endFrame();
         for (const w of entry.waiters) {
             w.resolve();
         }
     } catch (err) {
         console.error("scheduler: present failed", err);
-        // Still call `endFrame` so the canvas state is consistent —
-        // `transferToImageBitmap` clears the offscreen, and skipping
-        // it would leave a stale image bound to a context the host
-        // already considers presented.
+        // Still ship a frame so the host does not hold a stale image for
+        // a context it already considers presented.
         try {
-            entry.glManager.endFrame();
+            await entry.glManager.endFrame();
         } catch {
             // Swallow: already in a failure path.
         }

package/src/ts/webgl/context-manager.ts

@@ -156,8 +156,8 @@ export class WebGLContextManager {
         this._cssHeight = cssHeight;
         this._dpr = dpr;
 
-        const width = Math.round(cssWidth * dpr);
-        const height = Math.round(cssHeight * dpr);
+        const width = Math.max(1, Math.round(cssWidth * dpr));
+        const height = Math.max(1, Math.round(cssHeight * dpr));
         const canvas = this._ctx.canvas;
         if (canvas.width !== width || canvas.height !== height) {
             canvas.width = width;
@@ -284,19 +284,19 @@ export class WebGLContextManager {
     }
 
     /**
-     * Ship the current canvas contents as an `ImageBitmap` to the host
-     * when a frame callback is registered and the surface is an
+     * Ship a copy of the current canvas contents as an `ImageBitmap` to
+     * the host when a frame callback is registered and the surface is an
      * `OffscreenCanvas`. Otherwise no-op (direct mode paints straight to
      * the visible drawing buffer).
      */
-    endFrame(): void {
+    async endFrame(): Promise<void> {
         if (!this._frameCallback) {
             return;
         }
 
         // A context lost mid-frame (our own `destroy`, or a browser
-        // eviction between paint and present) makes
-        // `transferToImageBitmap` throw. Bail quietly.
+        // eviction between paint and present) makes the bitmap copy
+        // throw. Bail quietly.
         if (this.isContextLost()) {
             return;
         }
@@ -311,15 +311,15 @@ export class WebGLContextManager {
             return;
         }
 
-        const bitmap = (canvas as OffscreenCanvas).transferToImageBitmap();
+        const bitmap = await createImageBitmap(canvas as OffscreenCanvas);
         this._frameCallback(bitmap);
     }
 
     /**
      * Resolve when every GL command submitted up to this call has been
-     * executed by the GPU. WebGL2 issues a `fenceSync` and polls
-     * `clientWaitSync` (yielding to the task queue between polls); WebGL1
-     * falls back to a blocking `gl.finish()` (acceptable in a worker).
+     * executed by the GPU, polling a WebGL2 fence with a flush on every
+     * poll and falling back to a blocking `gl.finish()` on WebGL1 or on
+     * `WAIT_FAILED`.
      */
     async awaitGpuFence(): Promise<void> {
         if (!this._ctx.isWebGL2) {
@@ -335,9 +335,12 @@ export class WebGLContextManager {
         }
 
         try {
-            let flags: GLbitfield = gl.SYNC_FLUSH_COMMANDS_BIT;
             while (true) {
-                const status = gl.clientWaitSync(fence, flags, 0);
+                const status = gl.clientWaitSync(
+                    fence,
+                    gl.SYNC_FLUSH_COMMANDS_BIT,
+                    0,
+                );
                 if (
                     status === gl.ALREADY_SIGNALED ||
                     status === gl.CONDITION_SATISFIED
@@ -350,7 +353,6 @@ export class WebGLContextManager {
                     return;
                 }
 
-                flags = 0;
                 await this._yieldToTask();
 
                 if (this._destroyed) {