@fjader/svelte 0.2.2 → 0.2.4

package/dist/components/guides/legend/OrdinalColorLegend.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { getContext, onDestroy } from 'svelte';
-	import type { ScaleRegistry } from '../../../scales/ScaleRegistry.svelte';
 	import type { ColorScaleState } from '../../../scales/ColorScaleState.svelte';
-	import type { ActiveValueScale } from '../../../query-engine/FilterGroup.svelte';
 	import type { FilterGroupRegistry } from '../../../query-engine/FilterGroupRegistry.svelte';
+	import type { ChartContext } from '../../../types';
+	import type { BandScaleState } from '../../../scales/BandScaleState.svelte';
+	import type { DimValue } from '../../../query-engine/categorical-identity';
+	import { categoryLabel } from '../../../query-engine/categorical-identity';
 
 	interface Props {
 		scaleState: ColorScaleState;
@@ -31,43 +33,106 @@
 
 	const filterGroups = getContext<FilterGroupRegistry | undefined>('filter-groups');
 	const filterGroup = filterGroups?.get(selection);
-	const scaleRegistry = getContext<ScaleRegistry>('scale-registry');
 
-	// Reactive: re-renders when domain or scheme changes
-	const items = $derived(
-		scaleState.domain.map((value) => ({
+	const chartContext = getContext<ChartContext | undefined>('chart');
+
+	/**
+	 * The chart's band axis on this legend's field, if it has one. The legend then
+	 * lists what that axis shows (a top N and its Other, a table's own categories)
+	 * rather than every category of the field, which is what the colour scale's
+	 * domain holds: it is shared per field across charts.
+	 */
+	const bandOnField = $derived.by(() => {
+		// Neither identityKey is reactive state, and both are null until identity
+		// lands, which is after this first runs: read the signals that change
+		// with them, or this stays null for good.
+		void scaleState.ranksRevision;
+		const key = scaleState.identityKey;
+		if (!chartContext || !key) return null;
+		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;
+			if (!band) continue;
+			void band._version;
+			if (band.identityKey === key) return band;
+		}
+		return null;
+	});
+
+	interface Item {
+		/** The category's dim id, when the legend follows a band axis. */
+		id: number | null;
+		value: DimValue;
+		color: string;
+		/** An Other bucket: a click selects what it holds (see toggleOther). */
+		bucket: boolean;
+	}
+
+	// Reactive: re-renders when the domain, the axis or the palette ranks change.
+	const items = $derived.by((): Item[] => {
+		const band = bandOnField;
+		if (band) {
+			void band._version;
+			const ids = band.displayOrder;
+			const values = band.effectiveDomain;
+			const identity = scaleState.identity;
+			return Array.from(ids, (id, i) => ({
+				id,
+				value: values[i],
+				color: scaleState.getColor(values[i] as string | number | null),
+				bucket: identity?.synthetic.has(id) ?? false
+			}));
+		}
+		return scaleState.domain.map((value) => ({
+			id: null,
 			value,
-			color: scaleState.getColor(value)
-		}))
-	);
+			color: scaleState.getColor(value),
+			bucket: false
+		}));
+	});
 
 	// --- Toggle interaction ---
 	const isInteractive = $derived(filterGroup != null && field != null);
 
-	// Scales to dim: this color scale + any band scale for the same field.
-	// Projection itself is handled by FilterGroup, shared with Toggle/brushes.
-	function getLegendScaleStates(): ActiveValueScale[] {
-		const band = scaleRegistry?.getScaleByField(field!, 'band');
-		return [scaleState, band].filter(Boolean) as unknown as ActiveValueScale[];
+	/**
+	 * The field's identity key: what its selection is kept under. The scale's
+	 * own once it has identity; the field before, as the toggle keys it. For a
+	 * plain column the two are the same. For a computed field (an expression)
+	 * they differ, so while a reload empties the identity the legend reads the
+	 * selection under the field's name and its highlight is briefly lost.
+	 */
+	const key = $derived(scaleState.identityKey ?? field ?? scaleState.field);
+	const groups = $derived(filterGroup ? [filterGroup.index] : []);
+
+	/**
+	 * How visible an entry is now: its group's selection fade on the field, on
+	 * the same clock and with the same floor as the marks.
+	 */
+	function opacityOf(item: Item): number {
+		if (!filterGroups) return 1;
+		// By id where there is one: the only way to reach an Other bucket.
+		return item.id !== null
+			? filterGroups.opacityOfId(key, groups, item.id)
+			: filterGroups.opacityOfValue(key, groups, item.value);
 	}
 
 	// The selection is shared with any Toggle on the same field through its clause.
-	// A legend is not a chart, so it excludes no marks: every chart filters.
+	// A legend inside a chart skips that chart, as a Toggle there does: its marks
+	// keyed by the field dim, the rest keep their data. A standalone legend is in
+	// no chart, so every chart in its group is routed by its marks alone.
 	const toggle =
 		filterGroup && field
-			? filterGroup.registerToggle(field, {
-					excludeMarkIds: () => new Set<string>(),
-					scales: getLegendScaleStates
-				})
+			? filterGroup.registerToggle(field, { chart: chartContext?.config ?? null })
 			: null;
 	onDestroy(() => toggle?.destroy());
 
-	// Derive visual state from the toggle's selection
-	const selectedSet = $derived(toggle?.active ? toggle.values : null);
-
 	// Shift/meta-click adds or removes; selecting every value clears instead.
-	function handleClick(value: string | number, event: MouseEvent) {
-		toggle?.toggle([value], event.shiftKey || event.metaKey, scaleState.domain.length);
+	function handleClick(item: Item, event: MouseEvent) {
+		const multi = event.shiftKey || event.metaKey;
+		// An Other bucket names no value: the click selects what it holds.
+		if (item.bucket && item.id !== null) toggle?.toggleOther(item.id, null, multi);
+		else toggle?.toggle([item.value], multi, scaleState.domain.length);
 	}
 </script>
 
@@ -85,12 +150,13 @@
 		class:legend-columns={columns}
 		class:legend-vertical={orientation === 'vertical'}
 	>
-		{#each items as { value, color } (value)}
+		{#each items as item (item.id ?? item.value)}
+			{@const { value, color } = item}
 			{#if isInteractive}
 				<button
 					class="legend-item legend-item-interactive"
-					class:legend-item-dimmed={selectedSet != null && !selectedSet.has(value)}
-					onclick={(e) => handleClick(value, e)}
+					style:opacity={opacityOf(item)}
+					onclick={(e) => handleClick(item, e)}
 				>
 					<span
 						class="legend-swatch"
@@ -99,10 +165,10 @@
 						style:height="{swatchSize}px"
 						style:border-radius="{swatchRadius}px"
 					></span>
-					<span class="legend-label">{value}</span>
+					<span class="legend-label">{categoryLabel(value)}</span>
 				</button>
 			{:else}
-				<span class="legend-item">
+				<span class="legend-item" style:opacity={opacityOf(item)}>
 					<span
 						class="legend-swatch"
 						style:background={color}
@@ -110,7 +176,7 @@
 						style:height="{swatchSize}px"
 						style:border-radius="{swatchRadius}px"
 					></span>
-					<span class="legend-label">{value}</span>
+					<span class="legend-label">{categoryLabel(value)}</span>
 				</span>
 			{/if}
 		{/each}
@@ -157,7 +223,6 @@
 		align-items: center;
 		gap: 4px;
 		white-space: nowrap;
-		transition: opacity 0.15s ease;
 	}
 
 	.legend-item-interactive {
@@ -170,10 +235,6 @@
 		color: inherit;
 	}
 
-	.legend-item-dimmed {
-		opacity: 0.2;
-	}
-
 	.legend-swatch {
 		display: inline-block;
 		flex-shrink: 0;

package/dist/components/marks/AreaMarkX.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { outlineColor } from './utils/area-outline';
 	import { getContext, onDestroy, untrack } from 'svelte';
 	import { MarkLifecycleV2 } from './lifecycle/MarkLifecycleV2.svelte';
 	import { Areas, Lines } from '../rendering';
@@ -46,6 +47,8 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
 		y,
 		x,
 		x1: x1Prop,
@@ -98,6 +101,8 @@
 		strokeWidth: () => strokeWidth,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -157,6 +162,9 @@
 		chartContext
 	);
 
+	/** The outline's colour, and the fill's activity it dims by (see area-outline.ts). */
+	const outline = $derived(outlineColor(entry.stroke, markColor));
+
 	// Detect if x2 is an aggregate expression
 	const hasAggregateX = $derived.by(() => {
 		return (
@@ -366,6 +374,7 @@
 			colorValueData={markColor.data}
 			colorMode={markColor.colorMode}
 			colorScaleIndex={markColor.colorScaleIndex}
+			groupIndex={setup?.groupIndex ?? 0}
 			constantColor={markColor.constantColor}
 			fillOpacity={entry.fillOpacity ?? 0.5}
 			dotRadius={effectiveDotRadius}
@@ -381,9 +390,12 @@
 				{yData}
 				{seriesData}
 				curve={effectiveCurve}
-				colorValueData={entry.stroke ? null : markColor.data}
-				colorMode={entry.stroke ? 0 : markColor.colorMode}
-				colorScaleIndex={entry.stroke ? 0 : markColor.colorScaleIndex}
+				colorValueData={outline.colorValueData}
+				colorMode={outline.colorMode}
+				colorScaleIndex={outline.colorScaleIndex}
+				activityColorMode={outline.activityColorMode}
+				activityColorScaleIndex={outline.activityColorScaleIndex}
+				groupIndex={setup?.groupIndex ?? 0}
 				constantColor={strokeConstantColor}
 				strokeWidth={entry.strokeWidth ?? 0}
 				zIndex={1}
@@ -396,9 +408,12 @@
 					{yData}
 					{seriesData}
 					curve={effectiveCurve}
-					colorValueData={entry.stroke ? null : markColor.data}
-					colorMode={entry.stroke ? 0 : markColor.colorMode}
-					colorScaleIndex={entry.stroke ? 0 : markColor.colorScaleIndex}
+					colorValueData={outline.colorValueData}
+					colorMode={outline.colorMode}
+					colorScaleIndex={outline.colorScaleIndex}
+					activityColorMode={outline.activityColorMode}
+					activityColorScaleIndex={outline.activityColorScaleIndex}
+					groupIndex={setup?.groupIndex ?? 0}
 					constantColor={strokeConstantColor}
 					strokeWidth={entry.strokeWidth ?? 0}
 					zIndex={1}

package/dist/components/marks/AreaMarkY.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { outlineColor } from './utils/area-outline';
 	import { getContext, onDestroy, untrack } from 'svelte';
 	import { MarkLifecycleV2 } from './lifecycle/MarkLifecycleV2.svelte';
 	import { Areas, Lines } from '../rendering';
@@ -46,6 +47,8 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
 		x,
 		y,
 		y1: y1Prop,
@@ -98,6 +101,8 @@
 		strokeWidth: () => strokeWidth,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -157,6 +162,9 @@
 		chartContext
 	);
 
+	/** The outline's colour, and the fill's activity it dims by (see area-outline.ts). */
+	const outline = $derived(outlineColor(entry.stroke, markColor));
+
 	// Detect if y2 is an aggregate expression (count, sum, mean, etc.)
 	const hasAggregateY = $derived.by(() => {
 		return (
@@ -366,6 +374,7 @@
 			colorValueData={markColor.data}
 			colorMode={markColor.colorMode}
 			colorScaleIndex={markColor.colorScaleIndex}
+			groupIndex={setup?.groupIndex ?? 0}
 			constantColor={markColor.constantColor}
 			fillOpacity={entry.fillOpacity ?? 0.5}
 			dotRadius={effectiveDotRadius}
@@ -381,9 +390,12 @@
 				yData={yTopData}
 				{seriesData}
 				curve={effectiveCurve}
-				colorValueData={entry.stroke ? null : markColor.data}
-				colorMode={entry.stroke ? 0 : markColor.colorMode}
-				colorScaleIndex={entry.stroke ? 0 : markColor.colorScaleIndex}
+				colorValueData={outline.colorValueData}
+				colorMode={outline.colorMode}
+				colorScaleIndex={outline.colorScaleIndex}
+				activityColorMode={outline.activityColorMode}
+				activityColorScaleIndex={outline.activityColorScaleIndex}
+				groupIndex={setup?.groupIndex ?? 0}
 				constantColor={strokeConstantColor}
 				strokeWidth={entry.strokeWidth ?? 0}
 				zIndex={1}
@@ -396,9 +408,12 @@
 					yData={yBottomData}
 					{seriesData}
 					curve={effectiveCurve}
-					colorValueData={entry.stroke ? null : markColor.data}
-					colorMode={entry.stroke ? 0 : markColor.colorMode}
-					colorScaleIndex={entry.stroke ? 0 : markColor.colorScaleIndex}
+					colorValueData={outline.colorValueData}
+					colorMode={outline.colorMode}
+					colorScaleIndex={outline.colorScaleIndex}
+					activityColorMode={outline.activityColorMode}
+					activityColorScaleIndex={outline.activityColorScaleIndex}
+					groupIndex={setup?.groupIndex ?? 0}
 					constantColor={strokeConstantColor}
 					strokeWidth={entry.strokeWidth ?? 0}
 					zIndex={1}

package/dist/components/marks/BarMarkX.svelte

@@ -40,6 +40,9 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
+		contributeDomain = undefined,
 		x,
 		x1: x1Prop,
 		x2: x2Prop,
@@ -81,6 +84,9 @@
 		opacity: () => opacity,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
+		contributeDomain: () => contributeDomain,
 		limit: () => limit,
 		padding: () => padding,
 		paddingInner: () => paddingInner,
@@ -278,7 +284,14 @@
 					colorColumn: 'fill',
 					bandAxes: { y: true },
 					markColor,
-					displayFields: resolvedTip.displayFields
+					displayFields: resolvedTip.displayFields,
+					otherStats: (point) => {
+						const id = point.__bandIdY;
+						const facet = point.__facetId;
+						return typeof id === 'number'
+							? setup!.otherRows.statsAt(id, typeof facet === 'number' ? facet : null)
+							: null;
+					}
 				})
 			);
 		});
@@ -301,8 +314,10 @@
 		{y1Data}
 		colorValueData={markColor.data}
 		alphaData={opacityData}
+		share={setup?.otherRows.split ?? null}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		facetData={setup?.facetData}
 		dataVersion={setup?.dataVersion || 0}

package/dist/components/marks/BarMarkY.svelte

@@ -39,6 +39,9 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
+		contributeDomain = undefined,
 		x,
 		y,
 		y1: y1Prop,
@@ -80,6 +83,9 @@
 		opacity: () => opacity,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
+		contributeDomain: () => contributeDomain,
 		limit: () => limit,
 		padding: () => padding,
 		paddingInner: () => paddingInner,
@@ -279,7 +285,14 @@
 					colorColumn: 'fill',
 					bandAxes: { x: true },
 					markColor,
-					displayFields: resolvedTip.displayFields
+					displayFields: resolvedTip.displayFields,
+					otherStats: (point) => {
+						const id = point.__bandIdX;
+						const facet = point.__facetId;
+						return typeof id === 'number'
+							? setup!.otherRows.statsAt(id, typeof facet === 'number' ? facet : null)
+							: null;
+					}
 				})
 			);
 		});
@@ -302,8 +315,10 @@
 		{y1Data}
 		colorValueData={markColor.data}
 		alphaData={opacityData}
+		share={setup?.otherRows.split ?? null}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		facetData={setup?.facetData}
 		dataVersion={setup?.dataVersion || 0}

package/dist/components/marks/DotsMark.svelte

@@ -42,6 +42,8 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
 		x,
 		y,
 		fill = null,
@@ -80,6 +82,8 @@
 		radiusRange: () => radiusRange,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -306,6 +310,7 @@
 		colorValueData={markColor.data}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		sizeMode={markSize.sizeMode}
 		sizeScaleIndex={markSize.sizeScaleIndex}

package/dist/components/marks/LineMark.svelte

@@ -70,6 +70,8 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
 		x,
 		y,
 		stroke = null,
@@ -122,6 +124,8 @@
 		dotRadius: () => dotRadius,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -144,7 +148,9 @@
 		inferMarkScaleType(entry.y, entry.table, entry.preferredYScaleType)
 	);
 
-	// Series grouping: z overrides stroke for grouping
+	// Series grouping: z overrides stroke for grouping. A selection dims a line
+	// by its stroke colour only; dimming by a separate z field is not supported
+	// yet (see activityReads in activity-reads.ts).
 	const seriesChannelKey = entry.z != null ? 'z' : 'stroke';
 	const markSeries = new MarkSeries(
 		() => entry.z ?? entry.stroke,
@@ -570,6 +576,7 @@
 			colorValueData={markColor.data}
 			colorMode={markColor.colorMode}
 			colorScaleIndex={markColor.colorScaleIndex}
+			groupIndex={setup?.groupIndex ?? 0}
 			constantColor={markColor.constantColor}
 			strokeWidth={entry.strokeWidth ?? 2}
 			dotRadius={effectiveDotRadius}

package/dist/components/marks/ParallelCoordinatesMark.svelte

@@ -11,6 +11,8 @@
 </script>
 
 <script lang="ts">
+	import type { SelectionResponse } from '../rendering/activity-reads';
+	import type { NullsResponse } from '../../types';
 	import { getContext, onDestroy, untrack } from 'svelte';
 	import { MarkLifecycleV2 } from './lifecycle/MarkLifecycleV2.svelte';
 	import { ParallelLines } from '../rendering';
@@ -31,6 +33,9 @@
 		strokeWidth?: number;
 		curve?: CurveType;
 		selection?: string;
+		/** How this mark responds to selections in its group (see BaseMarkProps). */
+		selectionResponse?: SelectionResponse;
+		nulls?: NullsResponse;
 		transforms?: Transform[];
 	}
 
@@ -43,6 +48,8 @@
 		strokeWidth = 2,
 		curve = 'linear',
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
 		transforms = []
 	}: Props = $props();
 
@@ -59,6 +66,8 @@
 		stroke: () => stroke,
 		scheme: () => scheme,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
 		transforms: () => transforms
 	});
 
@@ -188,6 +197,7 @@
 		colorValueData={markColor.data}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		axisOrder={currentAxisOrder}
 		axisScaleIds={currentScaleIds}

package/dist/components/marks/ParallelCoordinatesMark.svelte.d.ts

@@ -9,6 +9,8 @@
 export declare const parallelParity: {
     reverseScales: boolean;
 };
+import type { SelectionResponse } from '../rendering/activity-reads';
+import type { NullsResponse } from '../../types';
 import type { FieldRef, ColorScheme, CurveType, Transform } from '../../types';
 interface Props {
     table: string;
@@ -19,6 +21,9 @@ interface Props {
     strokeWidth?: number;
     curve?: CurveType;
     selection?: string;
+    /** How this mark responds to selections in its group (see BaseMarkProps). */
+    selectionResponse?: SelectionResponse;
+    nulls?: NullsResponse;
     transforms?: Transform[];
 }
 declare const ParallelCoordinatesMark: import("svelte").Component<Props, {}, "">;

package/dist/components/marks/RectMark.svelte

@@ -47,6 +47,8 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
 		x = null,
 		x1: x1Prop = null,
 		x2: x2Prop = null,
@@ -95,6 +97,8 @@
 		opacity: () => opacity,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -360,6 +364,7 @@
 		alphaData={opacityData}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		facetData={setup?.facetData}
 		dataVersion={setup?.dataVersion || 0}

package/dist/components/marks/RectXMark.svelte

@@ -47,6 +47,8 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
 		x,
 		x1: x1Prop,
 		x2: x2Prop,
@@ -90,6 +92,8 @@
 		opacity: () => opacity,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
 		limit: () => limit,
 		preferredYScaleType: () => preferredYScaleType,
 		fitDomain: () => fitDomain,
@@ -351,6 +355,7 @@
 		alphaData={opacityData}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		facetData={setup?.facetData}
 		dataVersion={setup?.dataVersion || 0}

package/dist/components/marks/RectYMark.svelte

@@ -48,6 +48,8 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
+		nulls = undefined,
 		x = null,
 		x1: x1Prop = null,
 		x2: x2Prop = null,
@@ -92,6 +94,8 @@
 		opacity: () => opacity,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		fitDomain: () => fitDomain,
@@ -358,6 +362,7 @@
 		alphaData={opacityData}
 		colorMode={markColor.colorMode}
 		colorScaleIndex={markColor.colorScaleIndex}
+		groupIndex={setup?.groupIndex ?? 0}
 		constantColor={markColor.constantColor}
 		facetData={setup?.facetData}
 		dataVersion={setup?.dataVersion || 0}