@fjader/svelte 0.2.2 → 0.2.4

package/dist/components/marks/RuleMarkX.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ruleHasExtent } from '../rendering/activity-reads';
 	import { getContext, onDestroy, untrack } from 'svelte';
 	import { MarkLifecycleV2 } from './lifecycle/MarkLifecycleV2.svelte';
 	import { RuleX, GridLine } from '../rendering';
@@ -34,6 +35,8 @@
 	let {
 		table = undefined,
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
 		x,
 		y: yShorthand = undefined,
 		y1: y1Prop = undefined,
@@ -93,7 +96,7 @@
 		return undefined;
 	});
 
-	const hasExtent = $derived(y1 !== undefined && y2 !== undefined);
+	const hasExtent = $derived(ruleHasExtent(y1, y2));
 
 	let setup = $state<MarkLifecycleV2 | null>(null);
 
@@ -121,6 +124,8 @@
 			opacity: () => opacity,
 			transforms: () => transforms,
 			selection: () => selection,
+			selectionResponse: () => selectionResponse,
+			nulls: () => nulls,
 			limit: () => limit,
 			sort: () => sort,
 			domain: () => domain,
@@ -174,7 +179,11 @@
 				...(hasExtent && { y1: entry.y1, y2: entry.y2 })
 			}),
 			// When y shorthand is used, include 0 in domain
-			zeroBaseline: yShorthand !== undefined ? { y: true } : null
+			zeroBaseline: yShorthand !== undefined ? { y: true } : null,
+			// The value the renderer's y0Data is built from: routing must agree.
+			ruleExtent: hasExtent,
+			// Coloured by stroke: the lifecycle requests that channel's identity.
+			colorChannel: 'stroke'
 		};
 	});
 
@@ -301,6 +310,7 @@
 		alphaData={opacityData}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		{strokeWidth}
 		facetData={setup?.facetData}

package/dist/components/marks/RuleMarkY.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { ruleHasExtent } from '../rendering/activity-reads';
 	import { getContext, onDestroy, untrack } from 'svelte';
 	import { MarkLifecycleV2 } from './lifecycle/MarkLifecycleV2.svelte';
 	import { RuleY, GridLine } from '../rendering';
@@ -34,6 +35,8 @@
 	let {
 		table = undefined,
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
 		y,
 		x: xShorthand = undefined,
 		x1: x1Prop = undefined,
@@ -92,7 +95,7 @@
 		return undefined;
 	});
 
-	const hasExtent = $derived(x1 !== undefined && x2 !== undefined);
+	const hasExtent = $derived(ruleHasExtent(x1, x2));
 
 	let setup = $state<MarkLifecycleV2 | null>(null);
 
@@ -119,6 +122,8 @@
 			opacity: () => opacity,
 			transforms: () => transforms,
 			selection: () => selection,
+			selectionResponse: () => selectionResponse,
+			nulls: () => nulls,
 			limit: () => limit,
 			sort: () => sort,
 			domain: () => domain,
@@ -170,7 +175,11 @@
 				y: entry.y,
 				...(hasExtent && { x1: entry.x1, x2: entry.x2 })
 			}),
-			zeroBaseline: xShorthand !== undefined ? { x: true } : null
+			zeroBaseline: xShorthand !== undefined ? { x: true } : null,
+			// The value the renderer's x0Data is built from: routing must agree.
+			ruleExtent: hasExtent,
+			// Coloured by stroke: the lifecycle requests that channel's identity.
+			colorChannel: 'stroke'
 		};
 	});
 
@@ -297,6 +306,7 @@
 		alphaData={opacityData}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		{strokeWidth}
 		facetData={setup?.facetData}

package/dist/components/marks/TextMark.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { NO_GROUP } from '../rendering/activity-reads';
 	import { getContext, onDestroy, untrack } from 'svelte';
 	import { MarkLifecycleV2 } from './lifecycle/MarkLifecycleV2.svelte';
 	import { SCALE_PRIORITIES } from '../../scales/ScalePriorities';
@@ -41,6 +42,8 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
 		x,
 		y,
 		text,
@@ -126,6 +129,12 @@
 		get sort() {
 			return sort;
 		},
+		get selectionResponse() {
+			return selectionResponse;
+		},
+		get nulls() {
+			return nulls;
+		},
 		get limit() {
 			return limit;
 		},
@@ -203,18 +212,22 @@
 
 	// --- Color Resolution (pre-resolved once, not per-label) ---
 
-	const colorCSSValues = $derived.by(() => {
+	/** The raw fill channel, once per data change: colours and dimming both read it. */
+	const fillRaw = $derived.by(() => {
 		if (!fill) return null;
 		if (typeof fill === 'string' && isColorConstant(fill)) return null;
 		if (!markColor.scaleState || !instanceCount) return null;
-
-		const raw = resolveChannel({
+		return resolveChannel({
 			value: fill,
 			channel: 'fill',
 			dataAccessor: setup?.data,
 			instanceCount
 		});
-		if (!raw) return null;
+	});
+
+	const colorCSSValues = $derived.by(() => {
+		const raw = fillRaw;
+		if (!raw || !markColor.scaleState) return null;
 
 		const scale = markColor.scaleState;
 		const colors = new Array(instanceCount);
@@ -253,6 +266,60 @@
 		return result;
 	});
 
+	// --- Selection dimming ---
+	//
+	// A label dims with the bars it labels: by its band axes and its ordinal
+	// colour, in its own filter group, the fields activity-reads.ts lists for
+	// text. Routing reads the same list, so a categorical selection on one of
+	// these fields dims the labels instead of filtering them away.
+
+	/**
+	 * Per-label dimming sources, resolved once per data change, not per frame.
+	 * Each is a field's identity key and the label's dim ids on it: a scale has an
+	 * identity key only while its channel carries ids, so the raw column is the
+	 * ids, and reading the fade by id is what reaches an Other bucket.
+	 */
+	const dimming = $derived.by(() => {
+		// A 'filter' mark (NO_GROUP) never dims, as its GPU marks do not.
+		if (!setup || !filterGroups || setup.groupIndex === NO_GROUP) return null;
+		const groups = [setup.groupIndex];
+		const sources: Array<{ key: string; ids: ArrayLike<unknown> }> = [];
+		for (const axis of ['x', 'y'] as const) {
+			const type = chartContext.scaleTypes?.[axis];
+			if (type !== 'band' && type !== 'point') continue;
+			const band = chartContext[`${axis}ScaleState`] as BandScaleState | null;
+			const raw = axis === 'x' ? xRaw : yRaw;
+			// Identity keys only, as routing reads them: a field without identity
+			// filters the labels, so they do not dim by it too.
+			const key = band?.identityKey;
+			if (!key || !raw) continue;
+			sources.push({ key, ids: raw as ArrayLike<unknown> });
+		}
+		const color = markColor.scaleState;
+		const raw = fillRaw;
+		const colorKey = color?.isOrdinal ? color.identityKey : null;
+		if (colorKey && raw) sources.push({ key: colorKey, ids: raw as ArrayLike<unknown> });
+		return sources.length ? { groups, sources } : null;
+	});
+
+	/** How visible label `idx` is now: the least visible of its categories. */
+	function labelOpacity(idx: number): number {
+		const d = dimming;
+		if (!d) return 1;
+		let opacity = 1;
+		for (const source of d.sources) {
+			const raw = source.ids[idx];
+			// An id reads its fade by id. Anything else (a string from a channel
+			// that never carried ids, a null) is a value, read as one: never coerced
+			// to a number, where a string becomes NaN and null becomes category 0.
+			const selected = Number.isInteger(raw)
+				? filterGroups.opacityOfId(source.key, d.groups, raw as number)
+				: filterGroups.opacityOfValue(source.key, d.groups, raw);
+			opacity = Math.min(opacity, selected);
+		}
+		return opacity;
+	}
+
 	// --- Animation-aware positioning ---
 
 	let useFadeMode = $derived(labelItems.length > FADE_THRESHOLD);
@@ -324,17 +391,12 @@
 		// range: a label off the left edge, or below the axis, where the shader
 		// discards the bar it belongs to. The GPU states this discard explicitly
 		// rather than leaving it to the scissor rect, and so does this.
-		const slotted = (
-			band: BandScaleState,
-			raw: string | number,
-			range: number,
-			axis: 'x' | 'y'
-		) => {
+		const slotted = (band: BandScaleState, raw: string | number, range: number) => {
 			const key = bandSlotKey(band, raw);
 			if (key == null) return null;
 			// Asked once and handed on: tickPosition would look it up again.
 			const slot = band.tickSlot(key);
-			return slot < 0 ? null : band.slotPosition(slot, range, axis);
+			return slot < 0 ? null : band.slotPosition(slot, range);
 		};
 
 		const newPos = new Array(items.length);
@@ -343,13 +405,13 @@
 			let px, py;
 
 			if (xBand) {
-				px = slotted(xBand, xRaw[dataIdx], rangeX, 'x');
+				px = slotted(xBand, xRaw[dataIdx], rangeX);
 			} else {
 				px = xScale(xRaw[dataIdx]);
 			}
 
 			if (yBand) {
-				py = slotted(yBand, yRaw[dataIdx], rangeY, 'y');
+				py = slotted(yBand, yRaw[dataIdx], rangeY);
 			} else {
 				py = yScale(yRaw[dataIdx]);
 			}
@@ -427,6 +489,7 @@
 			{#if pos}
 				<text
 					fill={item.color}
+					fill-opacity={labelOpacity(item.idx)}
 					font-size="{fontSize}px"
 					font-weight={fontWeight}
 					font-family={fontFamily}

package/dist/components/marks/lifecycle/MarkLifecycleV2.svelte.d.ts

@@ -11,20 +11,23 @@
  *   → setupComplete = true
  *
  * Registration: watches #resolvedQueryParts, registers with engine.
- *   Engine handles filter-driven re-queries via onFilterChange().
+ *   Engine handles filter-driven re-queries via onClauseChange() and
+ *   onFilterChange().
  *
  * Params: watches sort/limit on ReactiveConfig.
  *   Changes trigger re-query for this mark only, no teardown.
  */
 import type { ScaleRequirement } from '../../../scales/ScalePriorities';
 import type { DataAccessor } from '../../../data/DataAccessor';
-import type { FieldRef, NormalizedSortConfig, Transform, ChartContext } from '../../../types';
+import type { FieldRef, NormalizedSortConfig, Transform, ChartContext, NullsResponse } from '../../../types';
 import type { ColorScaleState } from '../../../scales/ColorScaleState.svelte';
 import type { SizeScaleState } from '../../../scales/SizeScaleState.svelte';
 import type { QueryEngine } from '../../../query-engine/QueryEngine';
 import type { FilterGroup } from '../../../query-engine/FilterGroup.svelte';
+import { type SelectionResponse } from '../../rendering/activity-reads';
 import type { MarkLODSurface } from '../../../lod/rung-types';
 import type { GPUCoordinator } from '../../../gpu/GPUCoordinator.svelte';
+import { OtherRows } from './other-rows.svelte';
 export interface MarkLifecycleV2Config {
     markType: string;
     supportedScaleTypes: {
@@ -63,6 +66,12 @@ export interface MarkLifecycleV2Config {
         x?: boolean;
         y?: boolean;
     };
+    /**
+     * A rule's: whether it spans an extent on its cross axis (RuleX with
+     * y1/y2, RuleY with x1/x2, constants included). Decides whether it reads
+     * that axis's selection activity.
+     */
+    ruleExtent?: boolean;
     passiveScales?: boolean;
     parallelMode?: boolean;
     parallelColumns?: string[];
@@ -84,6 +93,9 @@ export interface ReactiveConfig {
     };
     readonly fitDomain: 'x' | 'y' | boolean | undefined;
     readonly tip: (unknown | '*')[] | false | undefined;
+    readonly selectionResponse: SelectionResponse | undefined;
+    readonly nulls: NullsResponse | undefined;
+    readonly contributeDomain: boolean | undefined;
 }
 export declare class MarkLifecycleV2 {
     #private;
@@ -92,6 +104,8 @@ export declare class MarkLifecycleV2 {
         gpuCoordinator?: GPUCoordinator | null;
         onMarkLOD?: ((surface: MarkLODSurface | null) => void) | null;
     });
+    /** What this mark's Other rows hold, and what is done with it. */
+    readonly otherRows: OtherRows;
     /**
      * The axis whose rows are one per category, in category order — or null.
      *
@@ -125,6 +139,11 @@ export declare class MarkLifecycleV2 {
     get tooltipTableName(): string;
     get tooltipEnabled(): boolean;
     get channelFieldMap(): Record<string, string>;
+    /**
+     * The page-wide index of this mark's filter group. Its renderer stores it in
+     * MarkConstants to read its group's run of each field's activity block.
+     */
+    get groupIndex(): number;
     get dataVersion(): number;
     get hasCategoryReducingTransforms(): boolean;
     data: DataAccessor | null;