@fjader/svelte 0.2.3 → 0.2.5

package/dist/components/rendering/Rects.svelte

@@ -5,7 +5,8 @@
 	import { getGPUContext } from '../../gpu';
 	import { DEFAULT_FILL_COLOR } from '../../scales/color-utils';
 	import type { ChartContext, WebGPUCanvasContext } from '../../types';
-	import { activityReads, markActivityWGSL } from './activity-reads';
+	import type { SplitProp } from '../marks/lifecycle/other-rows.svelte';
+	import { activityReads, markActivityWGSL, otherRowActivityWGSL } from './activity-reads';
 
 	const rectRendererDefinition = {
 		x: { concept: 'extent', channels: ['x0', 'x1'] },
@@ -21,7 +22,18 @@
 		Y1: 3,
 		COLOR: 4,
 		ALPHA: 5,
-		CONSTANTS: 6
+		CONSTANTS: 6,
+		/**
+		 * An Other bar's selected share, per row: 0 on rows that are not an Other
+		 * (so the zero-filled stand-in buffer means "no split anywhere"), `1 +
+		 * share` on one. Morphed with the bar's length.
+		 *
+		 * The vertex stage's 8th storage buffer: six channels, the identity slot
+		 * table and this fill WebGPU's default maxStorageBuffersPerShaderStage. A
+		 * further per-row channel needs another container (an instance vertex
+		 * attribute) or a raised device limit.
+		 */
+		SHARE: 7
 	};
 
 	// Facet uses vertex buffer slot 1 (not a storage binding)
@@ -35,8 +47,10 @@
 		GROUP_INDEX: 12,
 		CONSTANT_COLOR: 16,
 		DX: 32,
-		DY: 36
-		// 40-47: padding for 16-byte alignment
+		DY: 36,
+		OTHER_COLOR_ON_BAND: 40,
+		SPLIT_ALONG_X: 44,
+		ENTRANCE_AXIS: 48
 	};
 
 	interface Props {
@@ -46,8 +60,20 @@
 		y1Data: Float32Array;
 		colorValueData: Float32Array | null;
 		alphaData: Float32Array | null;
+		/**
+		 * A bar's selected share per row (see BINDINGS.SHARE), or null for none: a
+		 * bar mark with a topN Other bucket passes its lifecycle's `otherRows.split`.
+		 * The fragment draws the bar above the share dimmed.
+		 */
+		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;
@@ -60,14 +86,22 @@
 		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;
 	}
 
 	let {
@@ -77,8 +111,10 @@
 		y1Data,
 		colorValueData,
 		alphaData,
+		share = null,
 		facetData = null,
 		dataVersion,
+		landsFor = 0,
 		zIndex = 0,
 		colorMode = 0,
 		colorScaleIndex = 0,
@@ -88,9 +124,15 @@
 		dx = 0,
 		dy = 0,
 		markId = '',
-		bandAxis = null
+		bandAxis = null,
+		grow = null
 	}: Props = $props();
 
+	const splitData = $derived(share?.data ?? null);
+	const splitSlides = $derived(share?.slides ?? true);
+	// Bars grouped on y run along x, so their split does too.
+	const splitAlongX = $derived(share?.axis === 'y');
+	const otherColorOnBand = $derived(share?.colorOnBand ?? false);
 	const morphX = $derived(bandAxis === 'y');
 	const morphY = $derived(bandAxis === 'x');
 
@@ -137,8 +179,12 @@
       constantColor: vec4<f32>, // Used when colorMode = 0
       dx: f32,                  // Horizontal pixel offset
       dy: f32,                  // Vertical pixel offset
-      _pad1: f32,
-      _pad2: f32,
+      otherColorOnBand: u32,    // 1: an Other row skips its colour activity too
+      splitAlongX: u32,         // 1: an Other bar splits along x (horizontal bars)
+      entranceAxis: u32,        // 0: fades in, 1: grows along x, 2: along y
+      _pad0: u32,
+      _pad1: u32,
+      _pad2: u32,
     };
     @group(1) @binding(6) var<uniform> markConstants: MarkConstants;
 
@@ -146,6 +192,13 @@
       @builtin(position) position: vec4<f32>,
       @location(0) colorValue: f32,   // Raw value for scale lookup
       @location(1) alpha: f32,
+      // The Other bar's selected share, or -1 on every other row; and where this
+      // fragment sits along the bar, 0 at its base, 1 at its end.
+      @location(2) @interpolate(flat) share: f32,
+      @location(3) along: f32,
+      // An Other bar's unselected part: dimmed by the other fields' activity and
+      // by the field's free slot, so it fades as the rest of the chart does.
+      @location(4) alphaRest: f32,
     };
 
     @group(1) @binding(0) var<storage, read> x0Values: array<f32>;
@@ -154,6 +207,7 @@
     @group(1) @binding(3) var<storage, read> y1Values: array<f32>;
     @group(1) @binding(4) var<storage, read> colorValues: array<f32>;
     @group(1) @binding(5) var<storage, read> alphaValues: array<f32>;
+    @group(1) @binding(7) var<storage, read> splitValues: array<f32>;
 
     @vertex
     fn vertexMain(
@@ -175,13 +229,19 @@
       // Y axis scaling (generated based on scale type)
       {{Y_AXIS_LOGIC}}
 
+      // The chart's entrance: both edges pulled toward 0 on the measure axis,
+      // so a stack grows as one block rather than its segments floating up.
+      let p0 = entrancePosition(vec2<f32>(scaledX0, scaledY0), markConstants.entranceAxis);
+      let p1 = entrancePosition(vec2<f32>(scaledX1, scaledY1), markConstants.entranceAxis);
+
       // Apply inset (shrink rect inward on all sides)
-      let ix = markConstants.inset * sign(scaledX1 - scaledX0);
-      let iy = markConstants.inset * sign(scaledY1 - scaledY0);
+      let ix = markConstants.inset * sign(p1.x - p0.x);
+      let iy = markConstants.inset * sign(p1.y - p0.y);
 
       // Interpolate rectangle corners and apply pixel offsets
-      let finalX = mix(scaledX0 + ix, scaledX1 - ix, rectCorner.x) + markConstants.dx;
-      let finalY = mix(scaledY0 + iy, scaledY1 - iy, rectCorner.y) + markConstants.dy;
+      let finalX = mix(p0.x + ix, p1.x - ix, rectCorner.x) + markConstants.dx;
+      let finalY = mix(p0.y + iy, p1.y - iy, rectCorner.y) + markConstants.dy;
+      let enterAlpha = entranceAlpha(markConstants.entranceAxis);
 
       // Convert to normalized device coordinates
       let worldPos = vec2<f32>(finalX, finalY);
@@ -190,19 +250,47 @@
       var output: VertexOutput;
       output.position = vec4<f32>(normalizedPos.x, -normalizedPos.y, 0.0, 1.0);
       output.colorValue = colorValue;
-      output.alpha = alpha * selectionDim(
-        ${markActivityWGSL(ACTIVITY_READS, {
+      // An Other row (split > 0) is drawn in two parts, mixed in the fragment at
+      // its share. Below: as any bar, by its full activity, its own field's
+      // included, so it dims and lights with the bucket's lit state (#23). Above:
+      // by the other fields' activity and the field's free slot, so it is lit
+      // only while nothing is selected. Both fade on the selection clock, and the
+      // split only moves when the share moves between two parts that differ.
+      let split = splitValues[instanceIdx];
+      let isOther = split > 0.5;
+      output.share = select(-1.0, split - 1.0, isOther);
+      output.along = select(rectCorner.y, rectCorner.x, markConstants.splitAlongX == 1u);
+      let activity = ${markActivityWGSL(ACTIVITY_READS, {
+				color: 'markConstants.colorMode, markConstants.colorScaleIndex, colorValue',
+				x: 'x0',
+				y: 'y0',
+				group: 'markConstants.groupIndex'
+			})};
+      output.alpha = alpha * selectionDim(activity) * enterAlpha;
+      // The unselected part is drawn only on an Other row: every other bar skips
+      // its activity reads.
+      output.alphaRest = output.alpha;
+      if (isOther) {
+        let otherActivity = ${otherRowActivityWGSL(ACTIVITY_READS, {
 					color: 'markConstants.colorMode, markConstants.colorScaleIndex, colorValue',
-					x: 'x0',
-					y: 'y0',
-					group: 'markConstants.groupIndex'
-				})}
-      );
+					group: 'markConstants.groupIndex',
+					skipColor: 'markConstants.otherColorOnBand == 1u'
+				})};
+        let free = select(
+          bandFreeActivityX(markConstants.groupIndex),
+          bandFreeActivityY(markConstants.groupIndex),
+          markConstants.splitAlongX == 1u
+        );
+        output.alphaRest = alpha * selectionDim(min(otherActivity, free)) * enterAlpha;
+      }
       return output;
     }
   
     @fragment
     fn fragmentMain(input: VertexOutput) -> @location(0) vec4<f32> {
+      // Before any branch: a derivative must be taken in uniform control flow.
+      let aa = max(fwidth(input.along), 1e-4);
+
       // Get color based on mode
       var baseColor: vec4<f32>;
       if (markConstants.colorMode == 0u) {
@@ -217,7 +305,14 @@
         );
       }
   
-      let finalAlpha = baseColor.a * input.alpha;
+      var finalAlpha = baseColor.a * input.alpha;
+      // An Other bar's split: its own part up to the selected share, from its
+      // base, its unselected part above, with an anti-aliased edge. At share 1
+      // the whole bar is its own part, with no half-dimmed top row.
+      if (input.share >= 0.0 && input.share < 1.0) {
+        let below = 1.0 - smoothstep(input.share - aa, input.share + aa, input.along);
+        finalAlpha = baseColor.a * mix(input.alphaRest, input.alpha, below);
+      }
       return vec4<f32>(baseColor.rgb * finalAlpha, finalAlpha);
     }
   `
@@ -248,6 +343,7 @@
 		{ binding: BINDINGS.Y1, type: 'read-only-storage', visibility: GPUShaderStage.VERTEX },
 		{ binding: BINDINGS.COLOR, type: 'read-only-storage', visibility: GPUShaderStage.VERTEX },
 		{ binding: BINDINGS.ALPHA, type: 'read-only-storage', visibility: GPUShaderStage.VERTEX },
+		{ binding: BINDINGS.SHARE, type: 'read-only-storage', visibility: GPUShaderStage.VERTEX },
 		{
 			binding: BINDINGS.CONSTANTS,
 			type: 'uniform',
@@ -257,6 +353,18 @@
 
 	// --- DATA WRITING EFFECTS (Independent & Fine-Grained) ---
 
+	// Whether this write lands: the first of the catch-up's data version
+	// (landsFor). Plain, not $state: only the write effect reads and sets it.
+	// Assumes a catch-up result is ONE morph write: should it ever take two
+	// (values, then band ids after the instant layout), the second springs.
+	// A morph SPRING right after a morph snap on a return points here.
+	let lastMorphedVersion = -1;
+	function landsNow(): boolean {
+		const first = dataVersion !== lastMorphedVersion;
+		lastMorphedVersion = dataVersion;
+		return first && landsFor !== 0 && landsFor === dataVersion;
+	}
+
 	// The measure axis's two edges morph, as ONE write per data update, so one
 	// update starts one transition. The band's ids go with them: they are how a
 	// row set that is not the one being animated gets noticed and snapped.
@@ -266,16 +374,40 @@
 	// a fraction that the slot table resolves to a DIFFERENT category.
 	$effect(() => {
 		if (!renderer?.resourcesCreated || !bandAxis) return;
+		// The Other share travels with the bar's length, on the same clock, so the
+		// split and the bar land together. A share that changes alone (a click)
+		// starts a transition of its own on that clock.
+		const split = splitData ? ([[BINDINGS.SHARE, splitData]] as const) : [];
+		const land = landsNow() ? 'all' : splitData && !splitSlides ? [BINDINGS.SHARE] : undefined;
 		if (bandAxis === 'x') {
-			renderer.writeMorphed('x', x0Data, [
-				[BINDINGS.Y0, y0Data],
-				[BINDINGS.Y1, y1Data]
-			]);
+			renderer.writeMorphed(
+				'x',
+				x0Data,
+				[[BINDINGS.Y0, y0Data], [BINDINGS.Y1, y1Data], ...split],
+				land
+			);
 		} else {
-			renderer.writeMorphed('y', y0Data, [
-				[BINDINGS.X0, x0Data],
-				[BINDINGS.X1, x1Data]
-			]);
+			renderer.writeMorphed(
+				'y',
+				y0Data,
+				[[BINDINGS.X0, x0Data], [BINDINGS.X1, x1Data], ...split],
+				land
+			);
+		}
+	});
+	// Without a band axis the share is written as is. A mark that had shares and
+	// has none now writes one array of zeros, which also drops a morphed channel:
+	// left alone, the shader would keep reading the last shares. A mark that
+	// never had any writes nothing and reads the zero-filled stand-in.
+	let splitWritten = false;
+	$effect(() => {
+		if (!renderer?.resourcesCreated) return;
+		if (splitData) {
+			if (!bandAxis) renderer.writeAttribute(BINDINGS.SHARE, splitData);
+			splitWritten = true;
+		} else if (splitWritten) {
+			renderer.writeAttribute(BINDINGS.SHARE, new Float32Array(Math.max(1, x0Data.length)));
+			splitWritten = false;
 		}
 	});
 	$effect(() => {
@@ -324,7 +456,9 @@
 			view.setFloat32(UNIFORM_OFFSETS.CONSTANT_COLOR + 12, constantColor[3], LE);
 			view.setFloat32(UNIFORM_OFFSETS.DX, dx, LE);
 			view.setFloat32(UNIFORM_OFFSETS.DY, dy, LE);
-			// padding at 40-47
+			view.setUint32(UNIFORM_OFFSETS.OTHER_COLOR_ON_BAND, otherColorOnBand ? 1 : 0, LE);
+			view.setUint32(UNIFORM_OFFSETS.SPLIT_ALONG_X, splitAlongX ? 1 : 0, LE);
+			view.setUint32(UNIFORM_OFFSETS.ENTRANCE_AXIS, grow === 'x' ? 1 : grow === 'y' ? 2 : 0, LE);
 
 			renderer.writeUniform(BINDINGS.CONSTANTS, new Uint8Array(buffer));
 		}

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

@@ -1,3 +1,4 @@
+import type { SplitProp } from '../marks/lifecycle/other-rows.svelte';
 interface Props {
     x0Data: Float32Array;
     x1Data: Float32Array;
@@ -5,8 +6,20 @@ interface Props {
     y1Data: Float32Array;
     colorValueData: Float32Array | null;
     alphaData: Float32Array | null;
+    /**
+     * A bar's selected share per row (see BINDINGS.SHARE), or null for none: a
+     * bar mark with a topN Other bucket passes its lifecycle's `otherRows.split`.
+     * The fragment draws the bar above the share dimmed.
+     */
+    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;
@@ -19,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,11 +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.
+ * 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;
 /**
@@ -47,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[];
@@ -62,22 +68,51 @@ 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 connectedActivityWGSL(reads: ActivityReads, args: {
+    color: string;
+    series?: string;
+    group: string;
+}): string;
+/**
+ * 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
+ * (`skipColor`, a WGSL bool). Those read the Other bucket's own fade, and the
+ * bar's split already shows how much of it is selected (Rects); multiplying
+ * them in as well would dim it twice. Activity on any other field stays.
  */
-export declare function colorActivityWGSL(reads: ActivityReads, args: {
+export declare function otherRowActivityWGSL(reads: ActivityReads, args: {
     color: string;
     group: string;
+    skipColor: string;
 }): string;
 /**
  * The WGSL `markActivity(...)` call for `reads`: each activity the renderer

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,12 +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.
+ * 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) {
@@ -34,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;
     }
@@ -85,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 = [];
@@ -95,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();
@@ -102,24 +109,59 @@ 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 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
+ * (`skipColor`, a WGSL bool). Those read the Other bucket's own fade, and the
+ * bar's split already shows how much of it is selected (Rects); multiplying
+ * them in as well would dim it twice. Activity on any other field stays.
+ */
+export function otherRowActivityWGSL(reads, args) {
+    const color = reads.color
+        ? `select(markColorActivity(${args.color}, ${args.group}), 1.0, ${args.skipColor})`
+        : '1.0';
+    return `markActivity(${color}, 1.0, 1.0)`;
 }
 /**
  * The WGSL `markActivity(...)` call for `reads`: each activity the renderer

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;