@fjader/svelte 0.2.3 → 0.2.5

package/dist/components/charts/ChartVisibility.svelte.js

@@ -0,0 +1,67 @@
+import { untrack } from 'svelte';
+import { SvelteMap } from 'svelte/reactivity';
+/**
+ * Whether any of a chart's cells is on screen, for its marks to stop
+ * re-querying while it is not (see MarkHandle.active).
+ *
+ * Owned by the chart container, which in facet mode holds the marks for many
+ * cells: the marks stay active while any cell is visible. Each cell reports
+ * what the GPU coordinator's IntersectionObserver and page visibility say
+ * about it; the observer has a 200 px margin, so a chart counts as visible
+ * just before it scrolls in. A cell that has not reported counts as visible,
+ * as it does for the coordinator, so nothing is held back before the first
+ * report.
+ */
+export class ChartVisibility {
+    #cells = new SvelteMap();
+    #peers;
+    constructor(peers = null) {
+        this.#peers = peers;
+    }
+    /** A cell's visibility changed. */
+    set(cellId, visible) {
+        this.#cells.set(cellId, visible);
+    }
+    /** A cell unmounted. */
+    remove(cellId) {
+        this.#cells.delete(cellId);
+    }
+    /**
+     * True while any cell is visible, or none has reported. Reactive: it reads
+     * the SvelteMap. A getter, not a derived, since a chart has few cells.
+     */
+    get visible() {
+        if (this.#cells.size === 0)
+            return true;
+        for (const v of this.#cells.values())
+            if (v)
+                return true;
+        return false;
+    }
+    /**
+     * Whether a chart other than this one is visible and draws `scale`, so
+     * that changing the scale moves something in view. A chart catching up on
+     * its return snaps its own parts but springs a scale like this: the chart
+     * being watched moves through the scale, as it would for any change.
+     *
+     * Asked when a result lands, not when it was sent: visibility changes
+     * during a scroll. "Visible" is the coordinator's: it includes the 200 px
+     * margin, so a chart in the margin, which nobody sees yet, still counts and
+     * keeps the spring. Untracked: a point-in-time answer, asked from inside
+     * effects that must not re-run when a cell scrolls.
+     */
+    shownElsewhere(scale) {
+        const peers = this.#peers;
+        if (!peers)
+            return false;
+        return untrack(() => {
+            for (const chartId of peers.chartsUsing(scale)) {
+                if (this.#cells.has(chartId))
+                    continue;
+                if (peers.isChartVisible(chartId))
+                    return true;
+            }
+            return false;
+        });
+    }
+}

package/dist/components/guides/Grid.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { hasEntered } from '../../scales/entered';
 	import { getContext } from 'svelte';
 	import { GridLine } from '../rendering';
 	import type { ChartContext, ScaleStateInstance } from '../../types';
@@ -38,7 +39,9 @@
 	let yBuffer = new Float32Array(64);
 
 	function ticksOf(scale: ScaleStateInstance | null, which: 'x' | 'y'): Float32Array | null {
-		const ticks = scale?.getTicks ? (scale.getTicks() as ArrayLike<number>) : null;
+		// None until the scale has entered: its domain is a placeholder before that.
+		const ticks =
+			scale?.getTicks && hasEntered(scale) ? (scale.getTicks() as ArrayLike<number>) : null;
 		if (!ticks || ticks.length === 0) return null;
 		let buffer = which === 'x' ? xBuffer : yBuffer;
 		if (buffer.length < ticks.length) {
@@ -58,6 +61,12 @@
 	const yTickValues = $derived(ticksOf(yScale, 'y'));
 	const xAlpha = $derived(visibilityOf(xScale, xBand));
 	const yAlpha = $derived(visibilityOf(yScale, yBand));
+	// A band axis's line opacity follows its layout: when that landed at once
+	// (a catch-up result), the opacity lands with it.
+	const landedOf = (scale: ScaleStateInstance | null, band: boolean) =>
+		band && scale ? (scale as BandScaleState).slotsLandedLayout : 0;
+	const xLands = $derived(landedOf(xScale, xBand));
+	const yLands = $derived(landedOf(yScale, yBand));
 </script>
 
 {#if xTickValues}
@@ -65,6 +74,7 @@
 		axis="x"
 		positions={xTickValues}
 		alpha={xAlpha}
+		landsFor={xLands}
 		bandAxis={xBand ? 'x' : null}
 		{color}
 		{lineWidth}
@@ -76,6 +86,7 @@
 		axis="y"
 		positions={yTickValues}
 		alpha={yAlpha}
+		landsFor={yLands}
 		bandAxis={yBand ? 'y' : null}
 		{color}
 		{lineWidth}

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

@@ -194,7 +194,13 @@
 					column: scaleState.field,
 					label: scaleState.field,
 					values: value ? [(value as number[])[0], (value as number[])[1]] : []
-				})
+				}),
+				// The clause was removed from outside (clearAll, a filter pill): take the
+				// brush down too, which only this legend holds.
+				onCleared: () => {
+					brushT0 = null;
+					brushT1 = null;
+				}
 			})
 		: null;
 

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

@@ -65,7 +65,7 @@
 		id: number | null;
 		value: DimValue;
 		color: string;
-		/** An Other bucket: shown, not clickable (it names no value). */
+		/** An Other bucket: a click selects what it holds (see toggleOther). */
 		bucket: boolean;
 	}
 
@@ -128,8 +128,11 @@
 	onDestroy(() => toggle?.destroy());
 
 	// Shift/meta-click adds or removes; selecting every value clears instead.
-	function handleClick(value: DimValue, 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>
 
@@ -149,11 +152,11 @@
 	>
 		{#each items as item (item.id ?? item.value)}
 			{@const { value, color } = item}
-			{#if isInteractive && !item.bucket}
+			{#if isInteractive}
 				<button
 					class="legend-item legend-item-interactive"
 					style:opacity={opacityOf(item)}
-					onclick={(e) => handleClick(value, e)}
+					onclick={(e) => handleClick(item, e)}
 				>
 					<span
 						class="legend-swatch"

package/dist/components/marks/AreaMarkX.svelte

@@ -48,6 +48,8 @@
 		table,
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
 		y,
 		x,
 		x1: x1Prop,
@@ -101,6 +103,8 @@
 		transforms: () => transforms,
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -146,7 +150,8 @@
 		seriesChannelKey,
 		() => setup,
 		scaleRegistry,
-		chartContext
+		chartContext,
+		() => markColor.scaleState
 	);
 
 	// Color: fill determines area color — reads from entry
@@ -237,8 +242,8 @@
 		resolveFitDomain: () => resolvedFitAxis
 	});
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
-	let yScaleId = $derived(chartContext.yScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	let instanceCount = $derived(computeInstanceCount(setup?.data, entry.y, x2));
 
@@ -305,7 +310,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -373,6 +378,8 @@
 			colorMode={markColor.colorMode}
 			colorScaleIndex={markColor.colorScaleIndex}
 			groupIndex={setup?.groupIndex ?? 0}
+			activitySeriesMode={markSeries.activityMode}
+			activitySeriesScaleIndex={markSeries.activityScaleIndex}
 			constantColor={markColor.constantColor}
 			fillOpacity={entry.fillOpacity ?? 0.5}
 			dotRadius={effectiveDotRadius}
@@ -381,6 +388,7 @@
 			orientation="horizontal"
 			facetData={setup?.facetData}
 			dataVersion={setup?.dataVersion || 0}
+			grow={!hasExplicitBounds}
 		/>
 		{#if (entry.strokeWidth ?? 0) > 0}
 			<Lines
@@ -394,11 +402,14 @@
 				activityColorMode={outline.activityColorMode}
 				activityColorScaleIndex={outline.activityColorScaleIndex}
 				groupIndex={setup?.groupIndex ?? 0}
+				activitySeriesMode={markSeries.activityMode}
+				activitySeriesScaleIndex={markSeries.activityScaleIndex}
 				constantColor={strokeConstantColor}
 				strokeWidth={entry.strokeWidth ?? 0}
 				zIndex={1}
 				facetData={setup?.facetData}
 				dataVersion={setup?.dataVersion || 0}
+				grow={hasExplicitBounds ? null : 'x'}
 			/>
 			{#if showBothBoundaries}
 				<Lines
@@ -412,11 +423,14 @@
 					activityColorMode={outline.activityColorMode}
 					activityColorScaleIndex={outline.activityColorScaleIndex}
 					groupIndex={setup?.groupIndex ?? 0}
+					activitySeriesMode={markSeries.activityMode}
+					activitySeriesScaleIndex={markSeries.activityScaleIndex}
 					constantColor={strokeConstantColor}
 					strokeWidth={entry.strokeWidth ?? 0}
 					zIndex={1}
 					facetData={setup?.facetData}
 					dataVersion={setup?.dataVersion || 0}
+					grow={hasExplicitBounds ? null : 'x'}
 				/>
 			{/if}
 		{/if}

package/dist/components/marks/AreaMarkY.svelte

@@ -48,6 +48,8 @@
 		table,
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
 		x,
 		y,
 		y1: y1Prop,
@@ -101,6 +103,8 @@
 		transforms: () => transforms,
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -146,7 +150,8 @@
 		seriesChannelKey,
 		() => setup,
 		scaleRegistry,
-		chartContext
+		chartContext,
+		() => markColor.scaleState
 	);
 
 	// Color: fill determines area color — reads from entry
@@ -237,8 +242,8 @@
 		resolveFitDomain: () => resolvedFitAxis
 	});
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
-	let yScaleId = $derived(chartContext.yScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	let instanceCount = $derived(computeInstanceCount(setup?.data, entry.x, y2));
 
@@ -304,7 +309,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -373,6 +378,8 @@
 			colorMode={markColor.colorMode}
 			colorScaleIndex={markColor.colorScaleIndex}
 			groupIndex={setup?.groupIndex ?? 0}
+			activitySeriesMode={markSeries.activityMode}
+			activitySeriesScaleIndex={markSeries.activityScaleIndex}
 			constantColor={markColor.constantColor}
 			fillOpacity={entry.fillOpacity ?? 0.5}
 			dotRadius={effectiveDotRadius}
@@ -381,6 +388,7 @@
 			orientation="vertical"
 			facetData={setup?.facetData}
 			dataVersion={setup?.dataVersion || 0}
+			grow={!hasExplicitBounds}
 		/>
 		{#if (entry.strokeWidth ?? 0) > 0}
 			<Lines
@@ -394,11 +402,14 @@
 				activityColorMode={outline.activityColorMode}
 				activityColorScaleIndex={outline.activityColorScaleIndex}
 				groupIndex={setup?.groupIndex ?? 0}
+				activitySeriesMode={markSeries.activityMode}
+				activitySeriesScaleIndex={markSeries.activityScaleIndex}
 				constantColor={strokeConstantColor}
 				strokeWidth={entry.strokeWidth ?? 0}
 				zIndex={1}
 				facetData={setup?.facetData}
 				dataVersion={setup?.dataVersion || 0}
+				grow={hasExplicitBounds ? null : 'y'}
 			/>
 			{#if showBothBoundaries}
 				<Lines
@@ -412,11 +423,14 @@
 					activityColorMode={outline.activityColorMode}
 					activityColorScaleIndex={outline.activityColorScaleIndex}
 					groupIndex={setup?.groupIndex ?? 0}
+					activitySeriesMode={markSeries.activityMode}
+					activitySeriesScaleIndex={markSeries.activityScaleIndex}
 					constantColor={strokeConstantColor}
 					strokeWidth={entry.strokeWidth ?? 0}
 					zIndex={1}
 					facetData={setup?.facetData}
 					dataVersion={setup?.dataVersion || 0}
+					grow={hasExplicitBounds ? null : 'y'}
 				/>
 			{/if}
 		{/if}

package/dist/components/marks/BarMarkX.svelte

@@ -41,6 +41,9 @@
 		table,
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
+		contributeDomain = undefined,
 		x,
 		x1: x1Prop,
 		x2: x2Prop,
@@ -83,6 +86,9 @@
 		transforms: () => transforms,
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
+		contributeDomain: () => contributeDomain,
 		limit: () => limit,
 		padding: () => padding,
 		paddingInner: () => paddingInner,
@@ -174,8 +180,8 @@
 
 	const reactiveConfig = buildReactiveConfig(entry);
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
-	let yScaleId = $derived(chartContext.yScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	let instanceCount = $derived(computeInstanceCount(setup?.data, x2, entry.y));
 
@@ -238,7 +244,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -280,7 +286,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;
+					}
 				})
 			);
 		});
@@ -303,13 +316,16 @@
 		{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}
+		landsFor={setup?.landsFor ?? 0}
 		bandAxis={setup?.alignedBand ?? null}
+		grow={hasExplicitBounds ? null : 'x'}
 		inset={entry.inset ?? 0}
 		dx={entry.dx ?? 0}
 		dy={entry.dy ?? 0}

package/dist/components/marks/BarMarkY.svelte

@@ -40,6 +40,9 @@
 		table,
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
+		contributeDomain = undefined,
 		x,
 		y,
 		y1: y1Prop,
@@ -82,6 +85,9 @@
 		transforms: () => transforms,
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
+		contributeDomain: () => contributeDomain,
 		limit: () => limit,
 		padding: () => padding,
 		paddingInner: () => paddingInner,
@@ -175,8 +181,8 @@
 
 	const reactiveConfig = buildReactiveConfig(entry);
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
-	let yScaleId = $derived(chartContext.yScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	let instanceCount = $derived(computeInstanceCount(setup?.data, y2, entry.x));
 
@@ -239,7 +245,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -281,7 +287,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;
+					}
 				})
 			);
 		});
@@ -304,13 +317,16 @@
 		{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}
+		landsFor={setup?.landsFor ?? 0}
 		bandAxis={setup?.alignedBand ?? null}
+		grow={hasExplicitBounds ? null : 'y'}
 		inset={entry.inset ?? 0}
 		dx={entry.dx ?? 0}
 		dy={entry.dy ?? 0}

package/dist/components/marks/DotsMark.svelte

@@ -43,6 +43,8 @@
 		table,
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
 		x,
 		y,
 		fill = null,
@@ -82,6 +84,8 @@
 		transforms: () => transforms,
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -175,8 +179,8 @@
 		resolveFitDomain: () => resolvedFitAxis
 	});
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
-	let yScaleId = $derived(chartContext.yScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	let instanceCount = $derived(computeInstanceCount(setup?.data, entry.x, entry.y));
 
@@ -244,7 +248,7 @@
 	// --- SETUP LIFECYCLE ---
 
 	$effect(() => {
-		(void config, xScaleId, yScaleId);
+		(void config, scaleGeneration);
 		untrack(() => {
 			if (setup) {
 				gpuCoordinator?.markForRetain(markId);
@@ -314,6 +318,7 @@
 		sizeScaleIndex={markSize.sizeScaleIndex}
 		facetData={setup?.facetData}
 		dataVersion={setup?.dataVersion || 0}
+		landsFor={setup?.landsFor ?? 0}
 		bandAxis={setup?.alignedBand ?? null}
 	/>
 {/if}

package/dist/components/marks/LineMark.svelte

@@ -71,6 +71,8 @@
 		table,
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
 		x,
 		y,
 		stroke = null,
@@ -124,6 +126,8 @@
 		transforms: () => transforms,
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -146,14 +150,16 @@
 		inferMarkScaleType(entry.y, entry.table, entry.preferredYScaleType)
 	);
 
-	// Series grouping: z overrides stroke for grouping
+	// Series grouping: z overrides stroke for grouping. A selection on either
+	// field dims the line (see activityReads in activity-reads.ts).
 	const seriesChannelKey = entry.z != null ? 'z' : 'stroke';
 	const markSeries = new MarkSeries(
 		() => entry.z ?? entry.stroke,
 		seriesChannelKey,
 		() => setup,
 		scaleRegistry,
-		chartContext
+		chartContext,
+		() => markColor.scaleState
 	);
 
 	// Color: stroke determines line color — reads from entry
@@ -228,8 +234,8 @@
 		resolveFitDomain: () => (_isOverlay ? undefined : resolvedFitAxis)
 	});
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
-	let yScaleId = $derived(chartContext.yScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	let instanceCount = $derived(computeInstanceCount(setup?.data, entry.x, entry.y));
 
@@ -264,8 +270,7 @@
 		// changes via setRungParam (LOD window size adjustments should re-query,
 		// not recreate the lifecycle).
 		void channelSelect;
-		void xScaleId;
-		void yScaleId;
+		void scaleGeneration;
 		void effectiveXScaleType;
 		void effectiveYScaleType;
 		untrack(() => {
@@ -573,6 +578,8 @@
 			colorMode={markColor.colorMode}
 			colorScaleIndex={markColor.colorScaleIndex}
 			groupIndex={setup?.groupIndex ?? 0}
+			activitySeriesMode={markSeries.activityMode}
+			activitySeriesScaleIndex={markSeries.activityScaleIndex}
 			constantColor={markColor.constantColor}
 			strokeWidth={entry.strokeWidth ?? 2}
 			dotRadius={effectiveDotRadius}

package/dist/components/marks/ParallelCoordinatesMark.svelte

@@ -12,6 +12,7 @@
 
 <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';
@@ -34,6 +35,9 @@
 		selection?: string;
 		/** How this mark responds to selections in its group (see BaseMarkProps). */
 		selectionResponse?: SelectionResponse;
+		nulls?: NullsResponse;
+		/** Whether the chart's entrance waits for this mark (see BaseMarkProps). */
+		holdsEntrance?: boolean;
 		transforms?: Transform[];
 	}
 
@@ -47,6 +51,8 @@
 		curve = 'linear',
 		selection = undefined,
 		selectionResponse = undefined,
+		nulls = undefined,
+		holdsEntrance = undefined,
 		transforms = []
 	}: Props = $props();
 
@@ -64,6 +70,8 @@
 		scheme: () => scheme,
 		selection: () => selection,
 		selectionResponse: () => selectionResponse,
+		nulls: () => nulls,
+		holdsEntrance: () => holdsEntrance,
 		transforms: () => transforms
 	});
 
@@ -116,12 +124,13 @@
 
 	const reactiveConfig = buildReactiveConfig(entry);
 
-	let xScaleId = $derived(chartContext.xScaleState?.id);
+	// Rebuild only when a scale is replaced, not on its first resolution.
+	let scaleGeneration = $derived(chartContext.scaleGeneration);
 
 	// --- SETUP LIFECYCLE ---
 	$effect(() => {
 		void config;
-		void xScaleId;
+		void scaleGeneration;
 		untrack(() => {
 			setup?.destroy();
 			setup = null;

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

@@ -10,6 +10,7 @@ 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;
@@ -22,6 +23,9 @@ interface Props {
     selection?: string;
     /** How this mark responds to selections in its group (see BaseMarkProps). */
     selectionResponse?: SelectionResponse;
+    nulls?: NullsResponse;
+    /** Whether the chart's entrance waits for this mark (see BaseMarkProps). */
+    holdsEntrance?: boolean;
     transforms?: Transform[];
 }
 declare const ParallelCoordinatesMark: import("svelte").Component<Props, {}, "">;