@perspective-dev/viewer-charts 4.3.0 → 4.5.1

package/src/ts/interaction/zoom-router.ts

@@ -24,134 +24,11 @@ export interface ZoomTarget {
     controller: ZoomController;
     layout: PlotLayout;
 }
-export type ZoomTargetResolver = (mx: number, my: number) => ZoomTarget | null;
 
 /**
- * One set of wheel / pointer listeners on the GL canvas that dispatches
- * zoom + pan events to a {@link ZoomController} resolved from the
- * cursor position. Replaces `ZoomController.attach` so multiple
- * controllers (one per facet) can coexist on a single canvas.
- */
-export class ZoomRouter {
-    private _element: HTMLElement | null = null;
-    private _resolve: ZoomTargetResolver | null = null;
-    private _onUpdate: (() => void) | null = null;
-
-    private _pointerDown = false;
-    private _pointerTarget: ZoomTarget | null = null;
-    private _lastPointerX = 0;
-    private _lastPointerY = 0;
-
-    private _onWheel: ((e: WheelEvent) => void) | null = null;
-    private _onPointerDown: ((e: PointerEvent) => void) | null = null;
-    private _onPointerMove: ((e: PointerEvent) => void) | null = null;
-    private _onPointerUp: ((e: PointerEvent) => void) | null = null;
-
-    attach(
-        element: HTMLElement,
-        resolve: ZoomTargetResolver,
-        onUpdate: () => void,
-    ): void {
-        this.detach();
-        this._element = element;
-        this._resolve = resolve;
-        this._onUpdate = onUpdate;
-
-        this._onWheel = (e: WheelEvent) => {
-            const rect = element.getBoundingClientRect();
-            const mouseX = e.clientX - rect.left;
-            const mouseY = e.clientY - rect.top;
-            const target = resolve(mouseX, mouseY);
-            if (!target) {
-                return;
-            }
-
-            e.preventDefault();
-            applyWheel(target, mouseX, mouseY, e.deltaY);
-            onUpdate();
-        };
-
-        this._onPointerDown = (e: PointerEvent) => {
-            const rect = element.getBoundingClientRect();
-            const mouseX = e.clientX - rect.left;
-            const mouseY = e.clientY - rect.top;
-            const target = resolve(mouseX, mouseY);
-            if (!target) {
-                return;
-            }
-
-            this._pointerDown = true;
-            this._pointerTarget = target;
-            this._lastPointerX = e.clientX;
-            this._lastPointerY = e.clientY;
-            element.setPointerCapture(e.pointerId);
-        };
-
-        this._onPointerMove = (e: PointerEvent) => {
-            if (!this._pointerDown || !this._pointerTarget) {
-                return;
-            }
-
-            const dx = e.clientX - this._lastPointerX;
-            const dy = e.clientY - this._lastPointerY;
-            this._lastPointerX = e.clientX;
-            this._lastPointerY = e.clientY;
-            applyPan(this._pointerTarget, dx, dy);
-            onUpdate();
-        };
-
-        this._onPointerUp = () => {
-            this._pointerDown = false;
-            this._pointerTarget = null;
-        };
-
-        element.addEventListener("wheel", this._onWheel, { passive: false });
-        element.addEventListener("pointerdown", this._onPointerDown);
-        element.addEventListener("pointermove", this._onPointerMove);
-        element.addEventListener("pointerup", this._onPointerUp);
-    }
-
-    detach(): void {
-        if (this._element) {
-            if (this._onWheel) {
-                this._element.removeEventListener("wheel", this._onWheel);
-            }
-
-            if (this._onPointerDown) {
-                this._element.removeEventListener(
-                    "pointerdown",
-                    this._onPointerDown,
-                );
-            }
-
-            if (this._onPointerMove) {
-                this._element.removeEventListener(
-                    "pointermove",
-                    this._onPointerMove,
-                );
-            }
-
-            if (this._onPointerUp) {
-                this._element.removeEventListener(
-                    "pointerup",
-                    this._onPointerUp,
-                );
-            }
-        }
-
-        this._element = null;
-        this._resolve = null;
-        this._onUpdate = null;
-        this._pointerDown = false;
-        this._pointerTarget = null;
-    }
-}
-
-/**
- * Apply a wheel-zoom delta to the resolved target. Exported for
- * re-use inside the worker, where the renderer dispatches interaction
- * events forwarded from the host's `RawEventForwarder` instead of
- * receiving DOM events directly.
+ * Apply a wheel-zoom delta to the resolved target. The worker
+ * dispatches interaction events forwarded from the host's
+ * `RawEventForwarder` and calls this directly.
  */
 export function applyWheel(
     target: ZoomTarget,

package/src/ts/map/tile-layer.ts

@@ -18,6 +18,7 @@ import { TileLoader, tileKey } from "./tile-loader";
 import type { TileSource } from "./tile-source";
 import tileVert from "../shaders/tile.vert.glsl";
 import tileFrag from "../shaders/tile.frag.glsl";
+import { compileProgram } from "../webgl/program-cache";
 
 type GL = WebGL2RenderingContext | WebGLRenderingContext;
 
@@ -344,24 +345,23 @@ export class TileLayer {
         }
 
         const gl = glManager.gl;
-        const program = glManager.shaders.getOrCreate(
+        this._program = compileProgram<TileProgramCache>(
+            glManager,
             "map-tile",
             tileVert,
             tileFrag,
+            [
+                "u_projection",
+                "u_extent_min",
+                "u_extent_max",
+                "u_uv_min",
+                "u_uv_max",
+                "u_tile",
+                "u_alpha",
+            ],
+            ["a_corner"],
         );
 
-        this._program = {
-            program,
-            u_projection: gl.getUniformLocation(program, "u_projection"),
-            u_extent_min: gl.getUniformLocation(program, "u_extent_min"),
-            u_extent_max: gl.getUniformLocation(program, "u_extent_max"),
-            u_uv_min: gl.getUniformLocation(program, "u_uv_min"),
-            u_uv_max: gl.getUniformLocation(program, "u_uv_max"),
-            u_tile: gl.getUniformLocation(program, "u_tile"),
-            u_alpha: gl.getUniformLocation(program, "u_alpha"),
-            a_corner: gl.getAttribLocation(program, "a_corner"),
-        };
-
         const buf = gl.createBuffer();
         if (!buf) {
             return;

package/src/ts/plugin/plugin.ts

@@ -38,173 +38,85 @@ import { RENDER_BLIT_MODE } from "../config";
 const FACET_CONFIG_DEFAULTS: FacetConfig = { ...DEFAULT_FACET_CONFIG };
 
 /**
- * Build a UI control spec for one plugin-config field. Mirrors the
- * shape `column_config_schema` already returns (datagrid). Numeric
- * fields get a `Number` control with min/max clamps; fractions get a
- * 0..1 range; enums + booleans pass through their variant list.
+ * Static UI-control spec per `plugin_config` field. Mirrors the shape
+ * `column_config_schema` already returns (datagrid). The runtime default
+ * is sourced separately from the chart-type-effective defaults at
+ * `fieldSpec` call time so per-chart overrides like
+ * `include_zero=true` for Y Bar / Y Area / X Bar surface in the UI.
  */
+type FieldSpec =
+    | { kind: "Bool" }
+    | {
+          kind: "Enum";
+          variants: ReadonlyArray<{ value: string; label: string }>;
+      }
+    | { kind: "Number"; min: number; max: number; step?: number };
+
+const FIELD_SCHEMAS: Record<PluginConfigField, FieldSpec> = {
+    auto_alt_y_axis: { kind: "Bool" },
+    include_zero: { kind: "Bool" },
+    domain_mode: {
+        kind: "Enum",
+        variants: [
+            { value: "fit", label: "Fit" },
+            { value: "expand", label: "Expand" },
+        ],
+    },
+    facet_mode: {
+        kind: "Enum",
+        variants: [
+            { value: "grid", label: "Grid" },
+            { value: "overlay", label: "Overlay" },
+        ],
+    },
+    facet_zoom_mode: {
+        kind: "Enum",
+        variants: [
+            { value: "shared", label: "Shared" },
+            { value: "independent", label: "Independent" },
+        ],
+    },
+    series_zoom_mode: {
+        kind: "Enum",
+        variants: [
+            { value: "dynamic", label: "Dynamic" },
+            { value: "fixed", label: "Fixed" },
+        ],
+    },
+    line_width_px: { kind: "Number", min: 0.5, step: 0.5, max: 16 },
+    point_size_px: { kind: "Number", min: 1, max: 32 },
+    band_inner_frac: { kind: "Number", min: 0.1, max: 1, step: 0.01 },
+    bar_inner_pad: { kind: "Number", min: 0, max: 0.9, step: 0.01 },
+    wick_width_px: { kind: "Number", min: 0.5, step: 0.5, max: 8 },
+    ohlc_line_width_px: { kind: "Number", min: 0.5, step: 0.5, max: 8 },
+    gradient_radius_px: { kind: "Number", min: 2, step: 1, max: 256 },
+    gradient_intensity: { kind: "Number", min: 0.05, step: 0.05, max: 4 },
+    gradient_heat_max: { kind: "Number", min: 0.1, step: 0.1, max: 64 },
+    gradient_color_mode: {
+        kind: "Enum",
+        variants: [
+            { value: "mean", label: "Mean (density-weighted)" },
+            { value: "density", label: "Density only" },
+            { value: "extreme", label: "Extremes" },
+            { value: "signed", label: "Signed sum" },
+        ],
+    },
+    map_tile_provider: {
+        kind: "Enum",
+        variants: [
+            { value: "carto-positron", label: "Light (Positron)" },
+            { value: "carto-dark-matter", label: "Dark Matter" },
+            { value: "carto-voyager", label: "Voyager" },
+        ],
+    },
+    map_tile_alpha: { kind: "Number", min: 0, max: 1, step: 0.05 },
+};
+
 function fieldSpec(
     key: PluginConfigField,
     defaults: PluginConfig,
 ): Record<string, unknown> & { kind: string } {
-    switch (key) {
-        case "auto_alt_y_axis":
-            return { kind: "Bool", key, default: defaults.auto_alt_y_axis };
-        case "include_zero":
-            return { kind: "Bool", key, default: defaults.include_zero };
-        case "domain_mode":
-            return {
-                kind: "Enum",
-                key,
-                default: defaults.domain_mode,
-                variants: [
-                    { value: "fit", label: "Fit" },
-                    { value: "expand", label: "Expand" },
-                ],
-            };
-        case "facet_mode":
-            return {
-                kind: "Enum",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.facet_mode,
-                variants: [
-                    { value: "grid", label: "Grid" },
-                    { value: "overlay", label: "Overlay" },
-                ],
-            };
-        case "facet_zoom_mode":
-            return {
-                kind: "Enum",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.facet_zoom_mode,
-                variants: [
-                    { value: "shared", label: "Shared" },
-                    { value: "independent", label: "Independent" },
-                ],
-            };
-        case "series_zoom_mode":
-            return {
-                kind: "Enum",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.series_zoom_mode,
-                variants: [
-                    { value: "dynamic", label: "Dynamic" },
-                    { value: "fixed", label: "Fixed" },
-                ],
-            };
-        case "line_width_px":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.line_width_px,
-                min: 0.5,
-                step: 0.5,
-                max: 16,
-            };
-        case "point_size_px":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.point_size_px,
-                min: 1,
-                max: 32,
-            };
-        case "band_inner_frac":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.band_inner_frac,
-                min: 0.1,
-                max: 1,
-                step: 0.01,
-            };
-        case "bar_inner_pad":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.bar_inner_pad,
-                min: 0,
-                max: 0.9,
-                step: 0.01,
-            };
-        case "wick_width_px":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.wick_width_px,
-                min: 0.5,
-                step: 0.5,
-                max: 8,
-            };
-        case "ohlc_line_width_px":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.ohlc_line_width_px,
-                min: 0.5,
-                step: 0.5,
-                max: 8,
-            };
-        case "gradient_radius_px":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.gradient_radius_px,
-                min: 2,
-                step: 1,
-                max: 256,
-            };
-        case "gradient_intensity":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.gradient_intensity,
-                min: 0.05,
-                step: 0.05,
-                max: 4,
-            };
-        case "gradient_heat_max":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.gradient_heat_max,
-                min: 0.1,
-                step: 0.1,
-                max: 64,
-            };
-        case "gradient_color_mode":
-            return {
-                kind: "Enum",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.gradient_color_mode,
-                variants: [
-                    { value: "mean", label: "Mean (density-weighted)" },
-                    { value: "density", label: "Density only" },
-                    { value: "extreme", label: "Extremes" },
-                    { value: "signed", label: "Signed sum" },
-                ],
-            };
-        case "map_tile_provider":
-            return {
-                kind: "Enum",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.map_tile_provider,
-                variants: [
-                    { value: "carto-positron", label: "Light (Positron)" },
-                    { value: "carto-dark-matter", label: "Dark Matter" },
-                    { value: "carto-voyager", label: "Voyager" },
-                ],
-            };
-        case "map_tile_alpha":
-            return {
-                kind: "Number",
-                key,
-                default: DEFAULT_PLUGIN_CONFIG.map_tile_alpha,
-                min: 0,
-                max: 1,
-                step: 0.05,
-            };
-    }
+    return { ...FIELD_SCHEMAS[key], key, default: defaults[key] };
 }
 
 const GLOBAL_STYLES = (() => {
@@ -519,6 +431,32 @@ export class HTMLPerspectiveViewerWebGLPluginElement
                     default: false,
                 });
             }
+
+            // Line / area glyphs can bridge interior nulls by linear
+            // interpolation. Bar / scatter ignore the flag.
+            const supports_interpolate =
+                effective_chart_type === "line" ||
+                effective_chart_type === "area";
+
+            if (supports_interpolate) {
+                const variants =
+                    effective_chart_type === "area"
+                        ? [
+                              { value: "skip", label: "Skip" },
+                              { value: "solid", label: "Solid" },
+                          ]
+                        : [
+                              { value: "skip", label: "Skip" },
+                              { value: "solid", label: "Solid" },
+                              { value: "transparent", label: "Transparent" },
+                          ];
+                fields.push({
+                    kind: "Enum",
+                    key: "interpolate",
+                    default: "solid",
+                    variants,
+                });
+            }
         }
 
         // Per-column formatter widgets. Surfaced for every chart type so
@@ -599,28 +537,6 @@ export class HTMLPerspectiveViewerWebGLPluginElement
         return 5;
     }
 
-    save() {
-        const state: any = {};
-        const zoom = this._renderer?.saveZoom();
-        if (zoom) {
-            state.zoom = zoom;
-        }
-
-        // Only emit the keys this chart actually consumes.
-        const cfg: Partial<PluginConfig> = {};
-        for (const key of this._chartType.applicable_plugin_fields) {
-            // `key` is `PluginConfigField` = `keyof PluginConfig`, so this
-            // indexed assignment is type-safe without a cast.
-            (cfg[key] as PluginConfig[typeof key]) = this._pluginConfig[key];
-        }
-
-        if (Object.keys(cfg).length > 0) {
-            state.plugin_config = cfg;
-        }
-
-        return state;
-    }
-
     async render(view: View): Promise<Blob> {
         await this._ensureRenderer(view);
         await this.draw(view);

package/src/ts/shaders/line-uniform.frag.glsl

@@ -16,11 +16,12 @@ uniform vec4 u_color;
 uniform float u_line_width;
 
 varying float v_edge_dist;
+varying float v_seg_alpha;
 
 void main() {
     float dist = abs(v_edge_dist);
     float coreEdge = u_line_width / (u_line_width + 1.5);
     float alpha = 1.0 - smoothstep(coreEdge, 1.0, dist);
 
-    gl_FragColor = vec4(u_color.rgb, u_color.a * alpha);
+    gl_FragColor = vec4(u_color.rgb, u_color.a * alpha * v_seg_alpha);
 }

package/src/ts/shaders/line-uniform.vert.glsl

@@ -22,11 +22,27 @@ attribute vec2 a_end;
 // 0 = start+left, 1 = start+right, 2 = end+left, 3 = end+right
 attribute float a_corner;
 
+// Per-segment "is endpoint a real source-data cell" flags. Both vertices
+// of a segment's quad see the same instance values, so `v_seg_alpha`
+// below is constant across the quad — no gradient fade. Read from the
+// per-cell real-flag buffer with offset 0 / 1 (same overlap trick as
+// the bar-line glyph's segment-position attributes).
+attribute float a_real_start;
+attribute float a_real_end;
+
 uniform mat4 u_projection;
 uniform vec2 u_resolution;
 uniform float u_line_width;
 
+// Alpha multiplier applied to any segment whose endpoints are not both
+// real. Set per draw based on the series' interpolate mode:
+//   0.0 = skip        (gaps at synthesized cells)
+//   1.0 = solid       (no visible difference; default for non-line)
+//   0.5 = transparent (50% opacity on segments touching synthesized cells)
+uniform float u_interp_alpha;
+
 varying float v_edge_dist;
+varying float v_seg_alpha;
 
 void main() {
     vec4 clipStart = u_projection * vec4(a_start, 0.0, 1.0);
@@ -51,4 +67,7 @@ void main() {
 
     gl_Position = clipPos + vec4(clipOffset, 0.0, 0.0);
     v_edge_dist = side;
+
+    float bothReal = a_real_start * a_real_end;
+    v_seg_alpha = mix(u_interp_alpha, 1.0, step(0.5, bothReal));
 }

package/src/ts/theme/palette.ts

@@ -18,10 +18,7 @@ export type Vec3 = [number, number, number];
  * Build a series palette of length `count` by sampling the theme gradient
  * at evenly-spaced offsets. For count == 1 returns the 50% stop.
  */
-export function interpolatePalette(
-    stops: GradientStop[],
-    count: number,
-): Vec3[] {
+function interpolatePalette(stops: GradientStop[], count: number): Vec3[] {
     if (count <= 0) {
         return [];
     }

package/src/ts/transport/protocol.ts

@@ -12,8 +12,11 @@
 
 import type { FacetConfig, PluginConfig } from "../charts/chart";
 import type { PerspectiveClickDetail } from "../event-detail";
+import type { ThemeSnapshot } from "../theme/theme";
 import type { ViewConfig } from "@perspective-dev/client";
 
+export type { ThemeSnapshot };
+
 /**
  * Worker-mode control-channel messages. Distinct from the perspective
  * `ProxySession` channel that the worker's `Client` uses to talk to the
@@ -222,14 +225,6 @@ export interface FontFaceDescriptor {
     display?: string;
 }
 
-/**
- * Theme values resolved on the host via `getComputedStyle` and shipped
- * to the renderer scope, which has no DOM. Decoded by the chart via
- * `theme/theme.ts::resolveThemeFromVars`. Plain map for
- * structured-clone.
- */
-export type ThemeSnapshot = Record<string, string>;
-
 export interface SetViewByNameMsg {
     kind: "setViewByName";
     name: string;

package/src/ts/worker/dispatch.ts

@@ -41,7 +41,6 @@ export function dispatch(r: WorkerRenderer, msg: ControlMsg): void {
             r.redraw();
             break;
         case "resize":
-            console.log("resize");
             r.resize(msg.cssWidth, msg.cssHeight, msg.dpr);
             r.redraw();
             break;

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

@@ -177,41 +177,11 @@ export class WorkerRenderer {
         this.chartImpl.setView?.(view);
         this.glManager.bufferPool.maxCapacity = msg.bufferMaxCapacity;
         this.glManager.resize(msg.cssWidth, msg.cssHeight, msg.dpr);
-        const hostSink = new MessageHostSink((envelope) => {
-            switch (envelope.kind) {
-                case "pin":
-                    this.post({
-                        kind: "pinTooltip",
-                        lines: envelope.payload.lines,
-                        pos: envelope.payload.pos,
-                        bounds: envelope.payload.bounds,
-                    });
-                    break;
-                case "dismiss":
-                    this.post({ kind: "dismissTooltip" });
-                    break;
-                case "setCursor":
-                    this.post({ kind: "setCursor", cursor: envelope.cursor });
-                    break;
-                case "userClick":
-                    this.post({
-                        kind: "userClick",
-                        detail: envelope.payload as any,
-                    });
-                    break;
-                case "userSelect":
-                    this.post({
-                        kind: "userSelect",
-                        selected: envelope.payload.selected,
-                        row: envelope.payload.row,
-                        column_names: envelope.payload.column_names,
-                        insertConfig: envelope.payload.insertConfig as any,
-                    });
-                    break;
-            }
-        });
-
-        this.chartImpl.attachTooltip?.(hostSink);
+        // `MessageHostSink` emits `WorkerMsg`s directly — no translation
+        // needed here.
+        this.chartImpl.attachTooltip?.(
+            new MessageHostSink((msg) => this.post(msg)),
+        );
     }
 
     setViewByName(name: string): void {
@@ -309,13 +279,9 @@ export class WorkerRenderer {
                 }
             }
         } catch (err) {
-            // Any unexpected throw — proxy hiccup, chart-impl mutation
-            // failure, RAF chain rejection — must not leak past the
-            // outer fire-and-forget caller (`dispatch` does not await
-            // this method). Surface to the worker console; the host's
-            // pending promise still gets resolved via the `finally`
-            // ack below so `draw()` can't deadlock on a renderer error.
-            console.error("loadAndRender failed", err);
+            if ((err + "").indexOf("View not found") === -1) {
+                console.error("loadAndRender failed", err);
+            }
         } finally {
             this.post({ kind: "loadAndRenderAck", msgId: msg.msgId });
         }
@@ -417,10 +383,8 @@ export class WorkerRenderer {
 
     /**
      * Hit-test the cursor against the chart's facet grid (in faceted
-     * mode) or its current layout (single-plot). Mirrors the resolver
-     * `_setupZoomRouter` builds on the host for in-process mode — the
-     * worker owns the facet grid and controllers, so the resolution
-     * runs here.
+     * mode) or its current layout (single-plot). The worker owns the
+     * facet grid and controllers, so the resolution runs here.
      */
     private _resolveTarget(mx: number, my: number): ZoomTarget | null {
         const chart = this.chartImpl as any;