@fjader/svelte 0.2.2 → 0.2.3

package/dist/components/marks/RectMark.svelte

@@ -47,6 +47,7 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
 		x = null,
 		x1: x1Prop = null,
 		x2: x2Prop = null,
@@ -95,6 +96,7 @@
 		opacity: () => opacity,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		preferredYScaleType: () => preferredYScaleType,
@@ -360,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}

package/dist/components/marks/RectXMark.svelte

@@ -47,6 +47,7 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
 		x,
 		x1: x1Prop,
 		x2: x2Prop,
@@ -90,6 +91,7 @@
 		opacity: () => opacity,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
 		limit: () => limit,
 		preferredYScaleType: () => preferredYScaleType,
 		fitDomain: () => fitDomain,
@@ -351,6 +353,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,7 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
 		x = null,
 		x1: x1Prop = null,
 		x2: x2Prop = null,
@@ -92,6 +93,7 @@
 		opacity: () => opacity,
 		transforms: () => transforms,
 		selection: () => selection,
+		selectionResponse: () => selectionResponse,
 		limit: () => limit,
 		preferredXScaleType: () => preferredXScaleType,
 		fitDomain: () => fitDomain,
@@ -358,6 +360,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/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,7 @@
 	let {
 		table = undefined,
 		selection = undefined,
+		selectionResponse = undefined,
 		x,
 		y: yShorthand = undefined,
 		y1: y1Prop = undefined,
@@ -93,7 +95,7 @@
 		return undefined;
 	});
 
-	const hasExtent = $derived(y1 !== undefined && y2 !== undefined);
+	const hasExtent = $derived(ruleHasExtent(y1, y2));
 
 	let setup = $state<MarkLifecycleV2 | null>(null);
 
@@ -121,6 +123,7 @@
 			opacity: () => opacity,
 			transforms: () => transforms,
 			selection: () => selection,
+			selectionResponse: () => selectionResponse,
 			limit: () => limit,
 			sort: () => sort,
 			domain: () => domain,
@@ -174,7 +177,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 +308,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,7 @@
 	let {
 		table = undefined,
 		selection = undefined,
+		selectionResponse = undefined,
 		y,
 		x: xShorthand = undefined,
 		x1: x1Prop = undefined,
@@ -92,7 +94,7 @@
 		return undefined;
 	});
 
-	const hasExtent = $derived(x1 !== undefined && x2 !== undefined);
+	const hasExtent = $derived(ruleHasExtent(x1, x2));
 
 	let setup = $state<MarkLifecycleV2 | null>(null);
 
@@ -119,6 +121,7 @@
 			opacity: () => opacity,
 			transforms: () => transforms,
 			selection: () => selection,
+			selectionResponse: () => selectionResponse,
 			limit: () => limit,
 			sort: () => sort,
 			domain: () => domain,
@@ -170,7 +173,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 +304,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,7 @@
 	let {
 		table,
 		selection = undefined,
+		selectionResponse = undefined,
 		x,
 		y,
 		text,
@@ -126,6 +128,9 @@
 		get sort() {
 			return sort;
 		},
+		get selectionResponse() {
+			return selectionResponse;
+		},
 		get limit() {
 			return limit;
 		},
@@ -203,18 +208,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 +262,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);
@@ -427,6 +490,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,7 +11,8 @@
  *   → 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.
@@ -23,6 +24,7 @@ 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';
 export interface MarkLifecycleV2Config {
@@ -63,6 +65,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 +92,7 @@ export interface ReactiveConfig {
     };
     readonly fitDomain: 'x' | 'y' | boolean | undefined;
     readonly tip: (unknown | '*')[] | false | undefined;
+    readonly selectionResponse: SelectionResponse | undefined;
 }
 export declare class MarkLifecycleV2 {
     #private;
@@ -125,6 +134,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;

package/dist/components/marks/lifecycle/MarkLifecycleV2.svelte.js

@@ -11,7 +11,8 @@
  *   → 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.
@@ -19,7 +20,7 @@
 import { untrack } from 'svelte';
 import { Query, isNode, isAggregateExpression, isColumnRef, isColumnParam, sql, column as sqlColumn, cast, min, max, isNotNull, and } from '@uwdata/mosaic-sql';
 import { TransformCompiler } from '../../../transforms/TransformCompiler';
-import { withDenseCategories, withRanking } from '../../../transforms';
+import { withDenseCategories, withoutOtherMembers, withRanking } from '../../../transforms';
 import { ArrowDataAccessor } from '../../../data/DataAccessor';
 import { MarkHandle } from '../../../query-engine/MarkHandle.svelte';
 import { isContinuousScale, isNumericScale } from '../../../scales/scale-categories';
@@ -28,6 +29,7 @@ import { isBinExpression } from '../../../sql/bin';
 import { isRollingAvgExpression } from '../../../sql/rolling-avg';
 import { isWindowExpression } from '../../../sql/expression-utils';
 import { identityKeyFor } from '../../../query-engine/identity-key';
+import { activityReads, groupIndexForResponse, NO_READS, readsFor, readsForResponse, rendererForMark } from '../../rendering/activity-reads';
 import { AdaptiveBinRung } from '../../../lod/AdaptiveBinRung.svelte';
 /** A SQL identifier, quoted, with any double quote in it doubled. */
 function ident(name) {
@@ -39,6 +41,7 @@ import { detectChannelsNeedingDataDomain } from './domain-computation';
 import { buildQueryParts, assembleQuery, castReal } from './query-builder';
 import { setScalesReady, markDeferredScalesReady, setInitialContinuousDomains, registerDataDerivedDomains } from './domain-registration';
 import { fetchCategoricalDomains, fetchGlobalAggregates } from './domain-queries';
+import { transformScaleKey } from './transform-scale-key';
 // ---------------------------------------------------------------------------
 // MarkLifecycleV2
 // ---------------------------------------------------------------------------
@@ -338,6 +341,10 @@ export class MarkLifecycleV2 {
         if (this.#destroyed)
             return;
         this.#identityFields.clear();
+        // The Other ids name rows of the dropped dims. Every holder lets go, so
+        // the scale acquires afresh when setup re-runs.
+        for (const scale of [...this.#otherScales])
+            this.#releaseOther(scale);
         // Every dim it names just went away — topN must not bucket into one.
         this.#setIdentity(null);
         this.setupComplete = false;
@@ -359,8 +366,12 @@ export class MarkLifecycleV2 {
             let config = scaleRequirements.x.config || {};
             if (scaleRequirements.x.type === 'band' && hasCatReducing) {
                 const key = this.#transformCompiler.getCategoryTransformKey();
-                if (key)
-                    config = { ...config, transformKey: `${table}:${key}` };
+                if (key) {
+                    config = {
+                        ...config,
+                        transformKey: transformScaleKey(table, key, this.#chartContext.config)
+                    };
+                }
             }
             this.#chartContext.registerScaleType('x', scaleRequirements.x.type, scaleRequirements.x.priority, this.#markId, config, inferredScaleColumns?.x);
         }
@@ -368,8 +379,12 @@ export class MarkLifecycleV2 {
             let config = scaleRequirements.y.config || {};
             if (scaleRequirements.y.type === 'band' && hasCatReducing) {
                 const key = this.#transformCompiler.getCategoryTransformKey();
-                if (key)
-                    config = { ...config, transformKey: `${table}:${key}` };
+                if (key) {
+                    config = {
+                        ...config,
+                        transformKey: transformScaleKey(table, key, this.#chartContext.config)
+                    };
+                }
             }
             this.#chartContext.registerScaleType('y', scaleRequirements.y.type, scaleRequirements.y.priority, this.#markId, config, inferredScaleColumns?.y);
         }
@@ -421,7 +436,14 @@ export class MarkLifecycleV2 {
             const schema = this.#schema;
             if (!schema)
                 return;
+            // Read after setup, once the scales have adopted identity. A change of
+            // reads or of selectionResponse re-registers the mark: a selection
+            // that dimmed it may now filter it. The key is a string, so reads
+            // rebuilt with the same contents do not.
+            void this.#readsKey;
+            const response = this.#reactiveConfig.selectionResponse;
             untrack(() => {
+                this.#route = { reads: this.#reads, chart: this.#chartContext.config, response };
                 // registerMark handles cleanup of previous registration for this
                 // markId and reuses the existing handle (preserves arrowTable
                 // during re-query so the chart doesn't flash empty on rebin).
@@ -430,7 +452,8 @@ export class MarkLifecycleV2 {
                     baseTable: this.#config.table,
                     parts,
                     schema,
-                    transformCompiler: this.#transformCompiler
+                    transformCompiler: this.#transformCompiler,
+                    route: this.#route
                 }, this.#filterGroup);
             });
         });
@@ -983,10 +1006,12 @@ export class MarkLifecycleV2 {
         // one id, which does not move a row limit that coarse.
         const identity = {};
         const describe = (channel, key, positional) => {
+            const present = this.#queryEngine.presentTableFor(key, this.#config.table);
             identity[channel] = {
                 dim: this.#queryEngine.dimTableFor(key),
                 size: this.#queryEngine.identityFor(key).values.length,
-                positional
+                positional,
+                ...(present ? { present } : {})
             };
         };
         for (const { axis, key } of axes)
@@ -1057,26 +1082,33 @@ export class MarkLifecycleV2 {
         // be reserved before a transform can write it. Reserved for every
         // categorical field of this mark rather than guessing which axis topN
         // will pick — at most two, and the transform looks its own field up.
+        const otherScales = new Set();
         if (this.#transformCompiler.hasSyntheticOtherBucket()) {
             const otherIds = {};
             for (const { axis, key } of axes) {
-                const id = await this.#queryEngine.reserveSyntheticIdentity(key, 'Other');
-                otherIds[axis] = id;
-                // Re-adopt: the reservation appended to the value array, and a scale
-                // that adopted before it must see the new entry.
                 const scale = (axis === 'x' ? this.#chartContext.xScaleState : this.#chartContext.yScaleState);
-                scale?.setIdentity(this.#queryEngine.identityFor(key));
-                // And tell it WHICH id is the bucket, so an entrance can come out of
-                // Other and an exit can go into it rather than past the end of the
-                // axis. With an Other bucket that is where the value actually goes.
+                // Always there by now: `axes` holds only axes whose resolved type is
+                // band or point, and ChartScales resolves the scale instance eagerly
+                // from registerScaleType, in this mark's constructor, so the scale
+                // exists before setup runs. The guard is for the type, not a case.
+                if (!scale)
+                    continue;
+                // One Other per band scale, shared by every mark on it (see
+                // retainOther). The scale also takes it as its Other id, so an
+                // entrance can come out of Other and an exit go into it rather than
+                // past the end of the axis.
                 //
-                // Set on EVERY categorical axis, like the reservation above, rather
-                // than re-deriving which axis topN picked — that derivation living
-                // in two places is what silently dropped the Other row once already.
-                // The axes topN did not pick are unaffected: their reserved id is on
-                // no row, so it is never displayed, and setOtherId documents why an
-                // undisplayed id cannot act as a gateway.
-                scale?.setOtherId(id);
+                // Held on EVERY categorical axis rather than re-deriving which axis
+                // topN picked — that derivation living in two places is what silently
+                // dropped the Other row once already. The axes topN did not pick are
+                // unaffected: their id is on no row, so it is never displayed.
+                otherScales.add(scale);
+                this.#otherScales.add(scale);
+                const other = await scale.retainOther(this.#markId, () => this.#queryEngine.acquireSyntheticIdentity(key, 'Other'));
+                otherIds[axis] = other.id;
+                // Re-adopt: acquiring may have appended to the value array, and a
+                // scale that adopted before it must see the new entry.
+                scale.setIdentity(this.#queryEngine.identityFor(key));
             }
             // topN buckets past its cutoff into these ids. The query parts rebuild:
             // anything assembled before the reservation had no id and left Other
@@ -1097,6 +1129,18 @@ export class MarkLifecycleV2 {
                 this.#setIdentity(withOther);
             }
         }
+        // Scales this mark no longer draws an Other on (its axis or transform
+        // changed) get their claim back.
+        for (const scale of this.#otherScales) {
+            if (!otherScales.has(scale))
+                this.#releaseOther(scale);
+        }
+    }
+    /** The band scales whose Other bucket this mark holds a claim on. */
+    #otherScales = new Set();
+    #releaseOther(scale) {
+        this.#otherScales.delete(scale);
+        scale.releaseOther(this.#markId, (other) => this.#queryEngine.releaseSyntheticIdentity(other));
     }
     /**
      * The one writer of identity: the reactive copy the query parts read, and
@@ -1173,7 +1217,7 @@ export class MarkLifecycleV2 {
     buildViewportCountQuery(xLo, xHi, yLo, yHi) {
         if (!this.setupComplete || !this.#resolvedQueryParts)
             return null;
-        const filter = this.#filterGroup.selection.predicate(this.#markId) ?? [];
+        const filter = this.#filterGroup.selection.predicate(this.#route) ?? [];
         const q = assembleQuery({
             table: this.#sourceTable,
             parts: this.#resolvedQueryParts,
@@ -1210,6 +1254,43 @@ export class MarkLifecycleV2 {
     get channelFieldMap() {
         return buildChannelFieldMap(this.#config.select);
     }
+    // --- Selection routing ---
+    /**
+     * The identity keys of the categorical fields this mark's renderer reads
+     * selection activity for, sorted: its ordinal colour and its band axes, as
+     * activity-reads.ts says the renderer reads them. A categorical selection on
+     * one of these dims the mark; on any other field it filters it.
+     */
+    #reads = $derived.by(() => {
+        const renderer = rendererForMark(this.#config.markType);
+        if (!renderer)
+            return NO_READS;
+        const color = this.#colorScaleState;
+        const bandKey = (axis) => {
+            const type = axis === 'x' ? this.actualXScaleType : this.actualYScaleType;
+            if (type !== 'band' && type !== 'point')
+                return null;
+            const band = this.#chartContext[`${axis}ScaleState`];
+            return band?.identityKey ?? null;
+        };
+        return readsForResponse(this.#reactiveConfig.selectionResponse, readsFor(activityReads(renderer, this.#config.ruleExtent ?? false), {
+            color: color?.isOrdinal ? color.identityKey : null,
+            x: bandKey('x'),
+            y: bandKey('y')
+        }));
+    });
+    /** `#reads` as one string, so the registration effect re-runs only on a real change. */
+    #readsKey = $derived(this.#reads.join('\u001f'));
+    /** Built at registration; the engine and every predicate call hold this object. */
+    #route = { reads: NO_READS, chart: null };
+    /**
+     * 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() {
+        // NO_GROUP for selectionResponse 'filter', which never dims.
+        return groupIndexForResponse(this.#reactiveConfig.selectionResponse, this.#filterGroup.index);
+    }
     get dataVersion() {
         return this.#handle?.dataVersion ?? 0;
     }
@@ -1409,9 +1490,15 @@ export class MarkLifecycleV2 {
                     if (orderCol)
                         orderClause = ` ORDER BY ${orderCol}`;
                 }
+                // Without Other's member lists: every hover query is `SELECT *` from
+                // this table, so lists of up to the field's cardinality would ship on
+                // each one. Only those, not every `__dplot_` column as Path B drops:
+                // the rest are scalars (the rank, id columns), cheap to keep, and the
+                // lists are the only ones whose size grows with the field.
+                const withoutMembers = withoutOtherMembers(tooltipQuery);
                 await this.#queryEngine.exec([
                     `DROP TABLE IF EXISTS "${tableName}"`,
-                    `CREATE TEMP TABLE "${tableName}" AS SELECT *${replaceClause} FROM (${tooltipQuery})${orderClause}`
+                    `CREATE TEMP TABLE "${tableName}" AS SELECT *${replaceClause} FROM (${withoutMembers})${orderClause}`
                 ]);
             }
             else {
@@ -1480,7 +1567,7 @@ export class MarkLifecycleV2 {
     #buildTooltipQuery() {
         if (!this.#resolvedQueryParts)
             return null;
-        const filter = this.#filterGroup.selection.predicate(this.#markId) ?? [];
+        const filter = this.#filterGroup.selection.predicate(this.#route) ?? [];
         const q = assembleQuery({
             table: this.#sourceTable,
             parts: this.#resolvedQueryParts,
@@ -1537,7 +1624,7 @@ export class MarkLifecycleV2 {
         }
         Object.assign(sidecarSelect, tipExtras);
         const sidecarParts = buildQueryParts(sidecarSelect, undefined, this.#transformCompiler.hasSQLTransforms());
-        const filter = this.#filterGroup.selection.predicate(this.#markId) ?? [];
+        const filter = this.#filterGroup.selection.predicate(this.#route) ?? [];
         const sidecarQuery = assembleQuery({
             table: this.#sourceTable,
             parts: sidecarParts,
@@ -1735,6 +1822,8 @@ export class MarkLifecycleV2 {
         this.#destroyed = true;
         this.#identityResetOff?.();
         this.#identityResetOff = null;
+        for (const scale of [...this.#otherScales])
+            this.#releaseOther(scale);
         this.#handle?.destroy();
         clearTimeout(this.#fitDomainTimeout);
         clearTimeout(this.#tooltipWriteTimeout);