@fjader/svelte 0.2.4 → 0.2.5

package/dist/components/rendering/Rects.svelte.d.ts

@@ -14,6 +14,12 @@ interface Props {
     share?: SplitProp | null;
     facetData?: Float32Array | null;
     dataVersion: number;
+    /**
+     * The data version whose first write lands without morphing, or 0: a
+     * catch-up result (MarkLifecycleV2.landsFor). Later writes of that version
+     * animate as usual.
+     */
+    landsFor?: number;
     zIndex?: number;
     colorMode?: number;
     colorScaleIndex?: number;
@@ -26,14 +32,22 @@ interface Props {
     markId?: string;
     /**
      * The band axis, when this mark's rows are one per category in category
-     * order and may therefore morph. null to morph nothing.
+     * order and may therefore morph; or a histogram's binned axis, one row per
+     * bin in bin order. null to morph nothing.
      *
      * The OTHER axis's channels morph. The band's never do: they carry a
      * category id that the shader resolves through the slot table, and
      * interpolating an identity produces a fraction that resolves to some
-     * other category. Position already animates, through the slot table.
+     * other category. Position already animates, through the slot table. A
+     * bin's edges do not change under a filter, and a re-bin snaps.
      */
     bandAxis?: 'x' | 'y' | null;
+    /**
+     * The axis this mark grows along when its chart enters: its measure axis,
+     * for bars and histograms anchored at 0. null fades it in instead, for
+     * rects with bounds of their own (a Gantt bar has no 0 to grow from).
+     */
+    grow?: 'x' | 'y' | null;
 }
 declare const Rects: import("svelte").Component<Props, {}, "">;
 type Rects = ReturnType<typeof Rects>;

package/dist/components/rendering/RuleX.svelte

@@ -181,7 +181,7 @@
       var output: VertexOutput;
       output.position = vec4<f32>(normalizedPos.x, -normalizedPos.y, 0.0, 1.0);
       output.colorValue = colorValue;
-      output.alpha = alpha * selectionDim(
+      output.alpha = alpha * entranceAlpha(0u) * selectionDim(
         ${markActivityWGSL(ACTIVITY_READS, {
 					color: 'markConstants.colorMode, markConstants.colorScaleIndex, colorValue',
 					x: 'x',

package/dist/components/rendering/RuleY.svelte

@@ -180,7 +180,7 @@
       var output: VertexOutput;
       output.position = vec4<f32>(normalizedPos.x, -normalizedPos.y, 0.0, 1.0);
       output.colorValue = colorValue;
-      output.alpha = alpha * selectionDim(
+      output.alpha = alpha * entranceAlpha(0u) * selectionDim(
         ${markActivityWGSL(ACTIVITY_READS, {
 					color: 'markConstants.colorMode, markConstants.colorScaleIndex, colorValue',
 					x: 'x0',

package/dist/components/rendering/WebGPUCanvas.svelte

@@ -2,7 +2,7 @@
 	import { onMount, onDestroy, setContext, getContext } from 'svelte';
 	import { getGPUContext } from '../../gpu';
 	import type { Snippet } from 'svelte';
-	import type { ChartContext, WebGPUCanvasContext } from '../../types';
+	import type { ChartContext, EntranceMode, WebGPUCanvasContext } from '../../types';
 	import type { GPUCoordinator, ChartRegistrationResult } from '../../gpu/GPUCoordinator.svelte';
 	import type { FacetScaleRef } from '../../gpu/GPUCoordinator.svelte';
 
@@ -120,7 +120,9 @@
 			chartControl = gpuCoordinator.registerChart(chartId, canvas, {
 				zIndex: 0,
 				facetIndex: facetIndex ?? 0,
-				facetScale
+				facetScale,
+				entrance: c.config?.chartProps?.entrance as EntranceMode | undefined,
+				entranceGate: c.config?.entrance ?? null
 			});
 
 			// Notify coordinator that context is ready

package/dist/components/rendering/activity-reads.d.ts

@@ -1,6 +1,7 @@
 /**
  * Which selection activities a mark reads: its ordinal colour, its band x,
- * its band y. One answer per renderer, used twice:
+ * its band y, and a line's or area's series. One answer per renderer, used
+ * twice:
  *
  * - The renderer builds its shader's `markActivity` call from it, so a read
  *   the table does not list is passed as 1.0 and cannot happen.
@@ -26,17 +27,14 @@ export interface ActivityReads {
     readonly color: boolean;
     readonly x: boolean;
     readonly y: boolean;
+    /** A line's or area's `z`: the series field when it is not the colour field. */
+    readonly series: boolean;
 }
 /**
  * What a renderer reads. `hasExtent` is a rule's: RuleX with y1/y2, RuleY with
- * x1/x2. Lines, areas and parallel coordinates dim by colour only: a line over
- * a band axis spans its categories.
- *
- * Not yet supported: a line or area grouped by `z` that is not its colour
- * field. Its series ids reach the shader, but only to break the line between
- * series; no activity is read through them, and the series field is not among
- * the mark's reads. So a selection on that field filters the mark in other
- * charts and does nothing in its own, instead of dimming the other series.
+ * x1/x2. Lines and areas dim by colour and by series (`z`), never by a band
+ * axis: a line over a band axis spans its categories. Parallel coordinates
+ * have no `z` and dim by colour only.
  */
 export declare function activityReads(renderer: ActivityRenderer, hasExtent?: boolean): ActivityReads;
 /**
@@ -53,12 +51,14 @@ export declare function rendererForMark(markType: string): ActivityRenderer | nu
  * sorted, from what its renderer reads and the identity key of each of its
  * categorical scales (null for a channel with no such scale, or a scale with
  * no identity: a field with no identity has no activity to dim by, so a
- * selection on it filters the mark).
+ * selection on it filters the mark). `series` is null unless the mark has a
+ * `z` of its own; a series that is the colour field is already in `color`.
  */
 export declare function readsFor(reads: ActivityReads, keys: {
     color: string | null;
     x: string | null;
     y: string | null;
+    series?: string | null;
 }): readonly string[];
 /** A mark that reads no activity. Shared, so its reads never look changed. */
 export declare const NO_READS: readonly string[];
@@ -68,29 +68,40 @@ export declare const NO_READS: readonly string[];
  * by (its band axes, its ordinal colour) dims it, and any other selection
  * filters it. 'filter': every selection filters it, even on a field it draws
  * by, so its aggregates are recomputed for the subset (top N within a region).
+ * 'ignore': no selection filters or dims it; context, such as the whole
+ * drawn behind a filtered part.
  */
-export type SelectionResponse = 'auto' | 'filter';
+export type SelectionResponse = 'auto' | 'filter' | 'ignore';
 export { NO_GROUP };
-/** A mark's reads under its selection response: none for 'filter', which never dims. */
+/**
+ * Whether a selection can dim the mark: only under 'auto'. A 'filter' mark is
+ * filtered instead, and an 'ignore' mark neither.
+ */
+export declare function dimsBySelection(response: SelectionResponse | undefined): boolean;
+/** A mark's reads under its selection response: none for a mark that never dims. */
 export declare function readsForResponse(response: SelectionResponse | undefined, reads: readonly string[]): readonly string[];
-/** The group index a mark's shader reads activity with: NO_GROUP for 'filter'. */
+/** The group index a mark's shader reads activity with: NO_GROUP for a mark that never dims. */
 export declare function groupIndexForResponse(response: SelectionResponse | undefined, groupIndex: number): number;
 /**
- * The WGSL activity of a renderer that reads colour only (lines, areas,
- * parallel coordinates): `markColorActivity(...)`, or 1.0 if the table says
- * it reads nothing. Throws for a renderer that reads a band axis, whose call
- * is markActivityWGSL.
+ * The WGSL activity of a renderer that reads no band axis (lines, areas,
+ * parallel coordinates): its colour activity and, for lines and areas, its
+ * series activity, 1.0 for each the table says it does not read.
+ *
+ * `series` is markColorActivity's first three arguments for the series scale,
+ * the same lookup as colour on another scale and buffer. The mark passes mode
+ * 0 when it has no `z` of its own, so the read returns 1.0 before loading
+ * anything. The two combine by `min`, the least active wins, as in
+ * markActivity: a series on the colour field cannot dim twice.
+ *
+ * Throws for a renderer that reads a band axis, whose call is
+ * markActivityWGSL, and for one that reads a series it was given no
+ * arguments for.
  */
-export declare function colorActivityWGSL(reads: ActivityReads, args: {
+export declare function connectedActivityWGSL(reads: ActivityReads, args: {
     color: string;
+    series?: string;
     group: string;
 }): string;
-/**
- * The WGSL `markActivity(...)` call for `reads`: each activity the renderer
- * reads, and 1.0 for each it does not. `color` is markColorActivity's first
- * three arguments; `x` and `y` are the band channel values; `group` the mark's
- * group index.
- */
 /**
  * The activity of an Other row: the same terms as markActivityWGSL without the
  * band axes', and without colour's when colour is the band's own field
@@ -103,6 +114,12 @@ export declare function otherRowActivityWGSL(reads: ActivityReads, args: {
     group: string;
     skipColor: string;
 }): string;
+/**
+ * The WGSL `markActivity(...)` call for `reads`: each activity the renderer
+ * reads, and 1.0 for each it does not. `color` is markColorActivity's first
+ * three arguments; `x` and `y` are the band channel values; `group` the mark's
+ * group index.
+ */
 export declare function markActivityWGSL(reads: ActivityReads, args: {
     color: string;
     x: string;

package/dist/components/rendering/activity-reads.js

@@ -1,6 +1,7 @@
 /**
  * Which selection activities a mark reads: its ordinal colour, its band x,
- * its band y. One answer per renderer, used twice:
+ * its band y, and a line's or area's series. One answer per renderer, used
+ * twice:
  *
  * - The renderer builds its shader's `markActivity` call from it, so a read
  *   the table does not list is passed as 1.0 and cannot happen.
@@ -20,18 +21,14 @@
  * axis, belongs to no category on it, and must not dim by it.
  */
 import { NO_GROUP } from '../../gpu/identity-slot-packing';
-const ALL = { color: true, x: true, y: true };
-const COLOR_ONLY = { color: true, x: false, y: false };
+const ALL = { color: true, x: true, y: true, series: false };
+const CONNECTED = { color: true, x: false, y: false, series: true };
+const COLOR_ONLY = { color: true, x: false, y: false, series: false };
 /**
  * What a renderer reads. `hasExtent` is a rule's: RuleX with y1/y2, RuleY with
- * x1/x2. Lines, areas and parallel coordinates dim by colour only: a line over
- * a band axis spans its categories.
- *
- * Not yet supported: a line or area grouped by `z` that is not its colour
- * field. Its series ids reach the shader, but only to break the line between
- * series; no activity is read through them, and the series field is not among
- * the mark's reads. So a selection on that field filters the mark in other
- * charts and does nothing in its own, instead of dimming the other series.
+ * x1/x2. Lines and areas dim by colour and by series (`z`), never by a band
+ * axis: a line over a band axis spans its categories. Parallel coordinates
+ * have no `z` and dim by colour only.
  */
 export function activityReads(renderer, hasExtent = false) {
     switch (renderer) {
@@ -40,11 +37,12 @@ export function activityReads(renderer, hasExtent = false) {
         case 'text':
             return ALL;
         case 'rulex':
-            return { color: true, x: true, y: hasExtent };
+            return { color: true, x: true, y: hasExtent, series: false };
         case 'ruley':
-            return { color: true, x: hasExtent, y: true };
+            return { color: true, x: hasExtent, y: true, series: false };
         case 'lines':
         case 'areas':
+            return CONNECTED;
         case 'parallel':
             return COLOR_ONLY;
     }
@@ -91,7 +89,8 @@ export function rendererForMark(markType) {
  * sorted, from what its renderer reads and the identity key of each of its
  * categorical scales (null for a channel with no such scale, or a scale with
  * no identity: a field with no identity has no activity to dim by, so a
- * selection on it filters the mark).
+ * selection on it filters the mark). `series` is null unless the mark has a
+ * `z` of its own; a series that is the colour field is already in `color`.
  */
 export function readsFor(reads, keys) {
     const out = [];
@@ -101,6 +100,8 @@ export function readsFor(reads, keys) {
         out.push(keys.x);
     if (reads.y && keys.y)
         out.push(keys.y);
+    if (reads.series && keys.series)
+        out.push(keys.series);
     if (out.length === 0)
         return NO_READS;
     return [...new Set(out)].sort();
@@ -108,31 +109,47 @@ export function readsFor(reads, keys) {
 /** A mark that reads no activity. Shared, so its reads never look changed. */
 export const NO_READS = [];
 export { NO_GROUP };
-/** A mark's reads under its selection response: none for 'filter', which never dims. */
+/**
+ * Whether a selection can dim the mark: only under 'auto'. A 'filter' mark is
+ * filtered instead, and an 'ignore' mark neither.
+ */
+export function dimsBySelection(response) {
+    return response !== 'filter' && response !== 'ignore';
+}
+/** A mark's reads under its selection response: none for a mark that never dims. */
 export function readsForResponse(response, reads) {
-    return response === 'filter' ? NO_READS : reads;
+    return dimsBySelection(response) ? reads : NO_READS;
 }
-/** The group index a mark's shader reads activity with: NO_GROUP for 'filter'. */
+/** The group index a mark's shader reads activity with: NO_GROUP for a mark that never dims. */
 export function groupIndexForResponse(response, groupIndex) {
-    return response === 'filter' ? NO_GROUP : groupIndex;
+    return dimsBySelection(response) ? groupIndex : NO_GROUP;
 }
 /**
- * The WGSL activity of a renderer that reads colour only (lines, areas,
- * parallel coordinates): `markColorActivity(...)`, or 1.0 if the table says
- * it reads nothing. Throws for a renderer that reads a band axis, whose call
- * is markActivityWGSL.
+ * The WGSL activity of a renderer that reads no band axis (lines, areas,
+ * parallel coordinates): its colour activity and, for lines and areas, its
+ * series activity, 1.0 for each the table says it does not read.
+ *
+ * `series` is markColorActivity's first three arguments for the series scale,
+ * the same lookup as colour on another scale and buffer. The mark passes mode
+ * 0 when it has no `z` of its own, so the read returns 1.0 before loading
+ * anything. The two combine by `min`, the least active wins, as in
+ * markActivity: a series on the colour field cannot dim twice.
+ *
+ * Throws for a renderer that reads a band axis, whose call is
+ * markActivityWGSL, and for one that reads a series it was given no
+ * arguments for.
  */
-export function colorActivityWGSL(reads, args) {
+export function connectedActivityWGSL(reads, args) {
     if (reads.x || reads.y)
-        throw new Error('colorActivityWGSL: this renderer reads a band axis');
-    return reads.color ? `markColorActivity(${args.color}, ${args.group})` : '1.0';
+        throw new Error('connectedActivityWGSL: this renderer reads a band axis');
+    if (reads.series && !args.series) {
+        throw new Error('connectedActivityWGSL: this renderer reads a series; pass its arguments');
+    }
+    const color = reads.color ? `markColorActivity(${args.color}, ${args.group})` : '1.0';
+    if (!reads.series)
+        return color;
+    return `min(${color}, markColorActivity(${args.series}, ${args.group}))`;
 }
-/**
- * The WGSL `markActivity(...)` call for `reads`: each activity the renderer
- * reads, and 1.0 for each it does not. `color` is markColorActivity's first
- * three arguments; `x` and `y` are the band channel values; `group` the mark's
- * group index.
- */
 /**
  * The activity of an Other row: the same terms as markActivityWGSL without the
  * band axes', and without colour's when colour is the band's own field
@@ -146,6 +163,12 @@ export function otherRowActivityWGSL(reads, args) {
         : '1.0';
     return `markActivity(${color}, 1.0, 1.0)`;
 }
+/**
+ * The WGSL `markActivity(...)` call for `reads`: each activity the renderer
+ * reads, and 1.0 for each it does not. `color` is markColorActivity's first
+ * three arguments; `x` and `y` are the band channel values; `group` the mark's
+ * group index.
+ */
 export function markActivityWGSL(reads, args) {
     const color = reads.color ? `markColorActivity(${args.color}, ${args.group})` : '1.0';
     const x = reads.x ? `bandActivityX(${args.x}, ${args.group})` : '1.0';

package/dist/components/rendering/uniform-sizes.d.ts

@@ -13,7 +13,7 @@
 export declare const PARALLEL_MAX_AXES = 16;
 export declare const UNIFORM_BYTES: {
     readonly dotsMarkConstants: 48;
-    readonly rectsMarkConstants: 48;
+    readonly rectsMarkConstants: 64;
     readonly ruleXMarkConstants: 48;
     readonly ruleYMarkConstants: 48;
     readonly linesMarkConstants: 64;

package/dist/components/rendering/uniform-sizes.js

@@ -15,7 +15,7 @@ export const PARALLEL_MAX_AXES = 16;
 const SCALE_PARAM_BYTES = 16;
 export const UNIFORM_BYTES = {
     dotsMarkConstants: 48,
-    rectsMarkConstants: 48,
+    rectsMarkConstants: 64,
     ruleXMarkConstants: 48,
     ruleYMarkConstants: 48,
     linesMarkConstants: 64,

package/dist/config/ChartConfig.svelte.d.ts

@@ -1,3 +1,4 @@
+import { EntranceGate } from '../animation/EntranceGate';
 import type { SelectionResponse } from '../components/rendering/activity-reads';
 import type { FieldRef, LODConfig, SortConfig, ColorScheme, CurveType, NullsResponse, Transform } from '../types';
 import type { MarkLODSurface } from '../lod/rung-types';
@@ -27,6 +28,7 @@ export interface MarkEntry {
     selectionResponse?: SelectionResponse;
     contributeDomain?: boolean;
     nulls?: NullsResponse;
+    holdsEntrance?: boolean;
     limit?: number;
     preferredXScaleType?: string | null;
     preferredYScaleType?: string | null;
@@ -61,6 +63,11 @@ export interface ChartProps {
 }
 export declare class ChartConfig {
     #private;
+    /**
+     * Holds the chart's entrance until its marks have their first data. One per
+     * container, shared by its facet cells, as this config is.
+     */
+    readonly entrance: EntranceGate;
     /**
      * Register a mark with prop getters for each configurable property.
      * Returns the reactive entry that the mark reads from.

package/dist/config/ChartConfig.svelte.js

@@ -12,10 +12,17 @@
 // The entry outlives MarkLifecycle — registerMark returns the existing entry
 // on re-registration, preventing infinite loops.
 // =============================================================================
+import { untrack } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
+import { EntranceGate } from '../animation/EntranceGate';
 import { createOverridable } from './overridable.svelte';
 // ---- ChartConfig ----
 export class ChartConfig {
+    /**
+     * Holds the chart's entrance until its marks have their first data. One per
+     * container, shared by its facet cells, as this config is.
+     */
+    entrance = new EntranceGate();
     /** Overridable channels per mark, for reset support. */
     #channels = new Map();
     /** Reactive entries — SvelteMap so iteration/size reads are tracked. */
@@ -45,6 +52,14 @@ export class ChartConfig {
         const existing = this.#entries.get(id);
         if (existing)
             return existing;
+        // A data mark holds the chart's entrance from the moment it mounts, which
+        // is now: its lifecycle is built later, in an effect that waits for the
+        // chart's scales, and until something holds the gate the chart looks
+        // like one with no data marks and enters on its first drawable layer.
+        if (untrack(() => propGetters.table?.()) &&
+            untrack(() => propGetters.holdsEntrance?.()) !== false) {
+            this.entrance.hold(id);
+        }
         const channels = new Map();
         const entry = { id, markType };
         for (const [key, getter] of Object.entries(propGetters)) {
@@ -66,6 +81,8 @@ export class ChartConfig {
         return entry;
     }
     unregisterMark(id) {
+        // A mark that leaves before its first data must not hold the chart.
+        this.entrance.release(id);
         this.#entries.delete(id);
         this.#channels.delete(id);
     }

package/dist/gpu/GPUCoordinator.svelte.d.ts

@@ -1,3 +1,6 @@
+import { type TransitionRecord } from '../animation/transition-log';
+import type { EntranceMode } from '../types';
+import type { EntranceGate } from '../animation/EntranceGate';
 import type { RendererDefinition } from './ScaleTemplateSystem';
 import type { ScaleRegistry } from '../scales/ScaleRegistry.svelte';
 import type { FilterGroupRegistry } from '../query-engine/FilterGroupRegistry.svelte';
@@ -88,6 +91,18 @@ interface ChartRegistrationConfig {
     zIndex?: number;
     facetIndex?: number;
     facetScale?: FacetScaleRef | null;
+    /** How the chart's marks enter when its data first draws. Default 'auto'. */
+    entrance?: EntranceMode;
+    /** Holds the entrance until the chart's marks have their first data. */
+    entranceGate?: EntranceGate | null;
+}
+/** A chart's entrance starting, for observeEntrances. */
+export interface ChartEntrance {
+    chartId: string;
+    /** The chart's canvas, to find it in the page (a label on an ancestor). */
+    canvas: HTMLCanvasElement;
+    /** performance.now() when the entrance started. */
+    time: number;
 }
 /**
  * One chart's pixels as the coordinator rendered them, for the scale-source
@@ -142,6 +157,12 @@ export declare class GPUCoordinator {
      * left alone.
      */
     writeScaleParams(scaleId: string, view: Float32Array, offset: number): boolean;
+    /**
+     * Listen to every chart's entrance as it starts: when its marks have their
+     * first data and it first draws. For measuring load (how soon charts enter);
+     * returns the unsubscribe. Costs nothing while no one listens.
+     */
+    observeEntrances(listener: (entrance: ChartEntrance) => void): () => void;
     /**
      * Configure canvases so the coordinator can copy from them. Test-only: set
      * it before the charts mount, since a canvas reads it when it configures
@@ -263,10 +284,19 @@ export declare class GPUCoordinator {
     removePhysicsCallback(fn: () => void): void;
     registerChart(chartId: string, canvas: HTMLCanvasElement, config: ChartRegistrationConfig): ChartRegistrationResult;
     unregisterChart(chartId: string): void;
+    /**
+     * Debug: every transition that starts, and whether it animates or lands at
+     * once (see transition-log). Returns the unsubscribe. Forwards to the
+     * page-wide log: records from every coordinator in the document arrive
+     * here, so filter by chart id.
+     */
+    observeTransitions(listener: (record: TransitionRecord) => void): () => void;
+    /** Whether a registered chart is visible: in view (with the 200 px margin) and the page shown. */
+    isChartVisible(chartId: string): boolean;
     /**
      * Register a callback invoked when a chart's effective visibility changes.
      * Effective visibility = IntersectionObserver visible AND page visible.
-     * Used by ChartCell to toggle Mosaic client.enabled.
+     * Used by ChartCell to report into the chart's ChartVisibility.
      */
     setVisibilityCallback(chartId: string, callback: (visible: boolean) => void): () => void;
     invalidateChart(chartId: string): void;