@fjader/svelte 0.2.3 → 0.2.5

package/dist/components/marks/lifecycle/domain-queries.d.ts

@@ -14,7 +14,16 @@ import type { ContinuousScaleState } from '../../../types';
 export declare function fetchCategoricalDomains(coordinator: QueryEngine, table: string, select: Record<string, unknown>, actualXScaleType: string, actualYScaleType: string, xScaleState: BandScaleState | null, yScaleState: BandScaleState | null, facetBandScale: BandScaleState | null | undefined, fx: unknown, colorChannel: string, colorScaleState: ColorScaleState | null, sizeChannel: string, sizeScaleState: SizeScaleState | null, seriesScaleState: ColorScaleState | null, seriesChannel: string | null, bandDomainFromData: boolean, markId: string, explicitDomain?: {
     x?: DimValue[];
     y?: DimValue[];
-} | null): Promise<number>;
+} | null, 
+/** nulls="drop": the band and facet domains leave out the NULL category. */
+dropNull?: boolean, 
+/**
+ * True once the setup run that called this has been superseded or its mark
+ * destroyed. Checked at every write, after each query returns: the scales
+ * it would write may have been dropped with a ChartScales the chart has
+ * since replaced.
+ */
+stale?: () => boolean): Promise<number>;
 /**
  * Fetch global min/max extents for aggregated fields using a "sidecar" query.
  * Runs the same aggregation as the main query but without filters, wrapped
@@ -23,6 +32,8 @@ export declare function fetchCategoricalDomains(coordinator: QueryEngine, table:
  * Returns `{ globalAggregatesSet: true }` on success so the caller can
  * update its reactive state.
  */
-export declare function fetchGlobalAggregates(coordinator: QueryEngine, table: string, select: Record<string, unknown>, channelsNeedingDataDomain: Set<string>, autoBinNodeCount: number, buildQueryFn: (table: string, config: unknown, filter: unknown[], forMosaic: boolean) => Query, config: unknown, xScaleState: ContinuousScaleState | null, yScaleState: ContinuousScaleState | null, colorScaleState: ColorScaleState | null, markId: string): Promise<{
+export declare function fetchGlobalAggregates(coordinator: QueryEngine, table: string, select: Record<string, unknown>, channelsNeedingDataDomain: Set<string>, autoBinNodeCount: number, buildQueryFn: (table: string, config: unknown, filter: unknown[], forMosaic: boolean) => Query, config: unknown, xScaleState: ContinuousScaleState | null, yScaleState: ContinuousScaleState | null, colorScaleState: ColorScaleState | null, markId: string, 
+/** As for fetchCategoricalDomains: checked before writing the extents. */
+stale?: () => boolean): Promise<{
     globalAggregatesSet: boolean;
 }>;

package/dist/components/marks/lifecycle/domain-queries.js

@@ -10,7 +10,20 @@ import { identityKeyFor } from '../../../query-engine/identity-key';
  *
  * Returns the number of fetches executed (for logging).
  */
-export async function fetchCategoricalDomains(coordinator, table, select, actualXScaleType, actualYScaleType, xScaleState, yScaleState, facetBandScale, fx, colorChannel, colorScaleState, sizeChannel, sizeScaleState, seriesScaleState, seriesChannel, bandDomainFromData, markId, explicitDomain) {
+export async function fetchCategoricalDomains(coordinator, table, select, actualXScaleType, actualYScaleType, xScaleState, yScaleState, facetBandScale, fx, colorChannel, colorScaleState, sizeChannel, sizeScaleState, seriesScaleState, seriesChannel, bandDomainFromData, markId, explicitDomain, 
+/** nulls="drop": the band and facet domains leave out the NULL category. */
+dropNull = false, 
+/**
+ * True once the setup run that called this has been superseded or its mark
+ * destroyed. Checked at every write, after each query returns: the scales
+ * it would write may have been dropped with a ChartScales the chart has
+ * since replaced.
+ */
+stale = () => false) {
+    const categoriesOf = (key) => {
+        const categories = coordinator.categoryValues(key, table);
+        return dropNull ? categories.filter((c) => c !== null) : categories;
+    };
     const fetches = [];
     const setupFetch = (axis, field, scaleState) => {
         if (!field || !scaleState)
@@ -64,8 +77,10 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
         fetches.push((async () => {
             // Idempotent and coalesced — the mark's own setup calls this too.
             await coordinator.ensureColumns(table, { categorical: [identityField] });
+            if (stale())
+                return;
             // This table's categories: the dim spans every table on the field.
-            const categories = coordinator.categoryValues(identityField.key, table);
+            const categories = categoriesOf(identityField.key);
             // A snapshot of the real categories. The scale adopts the live
             // identity itself in MarkLifecycleV2's #ensureIdentityColumns, which
             // also covers the explicit-domain axes that never reach this branch.
@@ -103,9 +118,8 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
             // Registered from the data.
         }
         else if (explicitDomain?.y && yScaleState) {
-            // Y band scale maps index 0 → bottom, so reverse the user's
-            // top-to-bottom array to match GPU rendering order.
-            deferredExplicitY = [...explicitDomain.y].reverse();
+            // Slot 0 is at the top of a y band axis, so the list is used as given.
+            deferredExplicitY = explicitDomain.y;
         }
         else {
             setupFetch('y', select.y, yScaleState);
@@ -123,7 +137,9 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
         fetches.push((async () => {
             // Idempotent and coalesced — the mark's own setup calls this too.
             await coordinator.ensureColumns(table, { categorical: [facetKey] });
-            const categories = coordinator.categoryValues(facetKey.key, table);
+            if (stale())
+                return;
+            const categories = categoriesOf(facetKey.key);
             if (categories.length > 0)
                 facetBandScale.addMark(categories, markId);
         })());
@@ -145,7 +161,9 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
             min_time: min(colExpr),
             max_time: max(colExpr)
         });
-        fetches.push(coordinator.query(q).then((result) => {
+        fetches.push(coordinator.query(q, { cache: true, source: table }).then((result) => {
+            if (stale())
+                return;
             const row = Array.from(result)[0];
             if (row && row.min_time != null && row.max_time != null) {
                 console.log(`[fetchCategoricalDomains] Time extent for ${axis}:`, [
@@ -187,6 +205,8 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
                     fetches.push((async () => {
                         // Idempotent and coalesced — the mark's own setup calls this too.
                         await coordinator.ensureColumns(table, { categorical: [colorIdentity] });
+                        if (stale())
+                            return;
                         const categories = coordinator.categoryValues(colorIdentity.key);
                         if (categories.length > 0) {
                             colorScaleState.setDomain(categories);
@@ -200,7 +220,9 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
                     min_color: cast(min(colExpr), 'REAL'),
                     max_color: cast(max(colExpr), 'REAL')
                 });
-                fetches.push(coordinator.query(q).then((result) => {
+                fetches.push(coordinator.query(q, { cache: true, source: table }).then((result) => {
+                    if (stale())
+                        return;
                     const row = Array.from(result)[0];
                     if (row && row.min_color != null && row.max_color != null) {
                         console.log(`[fetchCategoricalDomains] Color domain (sequential):`, [
@@ -221,7 +243,9 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
             min_radius: cast(min(sqlColumn(String(sizeField))), 'REAL'),
             max_radius: cast(max(sqlColumn(String(sizeField))), 'REAL')
         });
-        fetches.push(coordinator.query(q).then((result) => {
+        fetches.push(coordinator.query(q, { cache: true, source: table }).then((result) => {
+            if (stale())
+                return;
             const row = Array.from(result)[0];
             if (row && row.min_radius != null && row.max_radius != null) {
                 sizeScaleState.setDomain([row.min_radius, row.max_radius]);
@@ -236,6 +260,8 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
         if (seriesIdentity) {
             fetches.push((async () => {
                 await coordinator.ensureColumns(table, { categorical: [seriesIdentity] });
+                if (stale())
+                    return;
                 const categories = coordinator.categoryValues(seriesIdentity.key);
                 if (categories.length > 0) {
                     seriesScaleState.setDomain(categories);
@@ -245,6 +271,8 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
     }
     if (fetches.length > 0)
         await Promise.all(fetches);
+    if (stale())
+        return fetches.length;
     // Apply explicit domains after all async fetches — ViewManager columns
     // from color/series scales are now registered, so the band view will
     // include all necessary index columns.
@@ -267,7 +295,9 @@ export async function fetchCategoricalDomains(coordinator, table, select, actual
  * Returns `{ globalAggregatesSet: true }` on success so the caller can
  * update its reactive state.
  */
-export async function fetchGlobalAggregates(coordinator, table, select, channelsNeedingDataDomain, autoBinNodeCount, buildQueryFn, config, xScaleState, yScaleState, colorScaleState, markId) {
+export async function fetchGlobalAggregates(coordinator, table, select, channelsNeedingDataDomain, autoBinNodeCount, buildQueryFn, config, xScaleState, yScaleState, colorScaleState, markId, 
+/** As for fetchCategoricalDomains: checked before writing the extents. */
+stale = () => false) {
     // Only proceed if we have channels needing data-derived domains
     if (channelsNeedingDataDomain.size === 0) {
         console.log(`[${markId}] No aggregated channels, skipping sidecar query`);
@@ -329,7 +359,9 @@ export async function fetchGlobalAggregates(coordinator, table, select, channels
         const sidecarQuery = Query.from(innerQuery).select(outerSelect);
         console.log(`📊 [${markId}] Sidecar query SQL:`, sidecarQuery.toString());
         // Step 3: Execute the query
-        const result = await coordinator.query(sidecarQuery);
+        const result = await coordinator.query(sidecarQuery, { cache: true, source: table });
+        if (stale())
+            return { globalAggregatesSet: false };
         const extents = Array.from(result)[0];
         console.log(`✅ [${markId}] Sidecar results:`, extents);
         // Step 4: Apply extents to scales

package/dist/components/marks/lifecycle/domain-registration.d.ts

@@ -39,5 +39,10 @@ export declare function setInitialContinuousDomains(fieldInfo: Record<string, Fi
 export declare function registerDataDerivedDomains(data: DataAccessor, channelsNeedingDataDomain: Set<string>, additionalChannels: string[], skipDomainUpdateForAxis: string | null, zeroBaseline: {
     x?: boolean;
     y?: boolean;
-} | undefined, actualXScaleType: string, actualYScaleType: string, xScaleState: ContinuousScaleState | null, yScaleState: ContinuousScaleState | null, bandDomainFromData: boolean, xBandScaleState: BandScaleState | null, yBandScaleState: BandScaleState | null, markId: string, isRebinning: boolean, colorScaleState?: ColorScaleState | null): RegisterDomainsResult;
+} | undefined, actualXScaleType: string, actualYScaleType: string, xScaleState: ContinuousScaleState | null, yScaleState: ContinuousScaleState | null, bandDomainFromData: boolean, xBandScaleState: BandScaleState | null, yBandScaleState: BandScaleState | null, markId: string, 
+/**
+ * Whether a scale's change from this result lands without animating: a
+ * catch-up result on a scale no other visible chart draws. Null: animate.
+ */
+instantFor: ((scale: object) => boolean) | null, colorScaleState?: ColorScaleState | null): RegisterDomainsResult;
 export {};

package/dist/components/marks/lifecycle/domain-registration.js

@@ -100,7 +100,12 @@ export function setInitialContinuousDomains(fieldInfo, scaleMap, select, actualX
  * Called from Effect 7 on each data update. Uses positional args to avoid
  * object allocation on the crossfilter hot path.
  */
-export function registerDataDerivedDomains(data, channelsNeedingDataDomain, additionalChannels, skipDomainUpdateForAxis, zeroBaseline, actualXScaleType, actualYScaleType, xScaleState, yScaleState, bandDomainFromData, xBandScaleState, yBandScaleState, markId, isRebinning, colorScaleState) {
+export function registerDataDerivedDomains(data, channelsNeedingDataDomain, additionalChannels, skipDomainUpdateForAxis, zeroBaseline, actualXScaleType, actualYScaleType, xScaleState, yScaleState, bandDomainFromData, xBandScaleState, yBandScaleState, markId, 
+/**
+ * Whether a scale's change from this result lands without animating: a
+ * catch-up result on a scale no other visible chart draws. Null: animate.
+ */
+instantFor, colorScaleState) {
     if (!data || data.length === 0) {
         return { dataDerivedDomainsSet: false, skipDomainUpdateForAxis };
     }
@@ -152,7 +157,8 @@ export function registerDataDerivedDomains(data, channelsNeedingDataDomain, addi
             if (zeroBaseline?.x) {
                 extent = [Math.min(0, extent[0]), Math.max(0, extent[1])];
             }
-            registerExtentOnScale(xScaleState, actualXScaleType, extent, markId, isRebinning, 'X');
+            const instant = !!xScaleState && (instantFor?.(xScaleState) ?? false);
+            registerExtentOnScale(xScaleState, actualXScaleType, extent, markId, instant, 'X');
         }
     }
     // Compute and register Y domain
@@ -166,7 +172,8 @@ export function registerDataDerivedDomains(data, channelsNeedingDataDomain, addi
             if (zeroBaseline?.y) {
                 extent = [Math.min(0, extent[0]), Math.max(0, extent[1])];
             }
-            registerExtentOnScale(yScaleState, actualYScaleType, extent, markId, isRebinning, 'Y');
+            const instant = !!yScaleState && (instantFor?.(yScaleState) ?? false);
+            registerExtentOnScale(yScaleState, actualYScaleType, extent, markId, instant, 'Y');
         }
     }
     // Band scale domain from the query result, for a mark whose axis is decided
@@ -193,12 +200,8 @@ export function registerDataDerivedDomains(data, channelsNeedingDataDomain, addi
                 // order the ranked query had. See RANK_COLUMN.
                 const ranked = data.getColumn(RANK_COLUMN) != null;
                 const ids = extractIdsRankedFromData(data, axis, RANK_COLUMN);
-                // A y band axis puts slot 0 at the bottom and a ranking is read
-                // from the top. Reversed here, once, for every ranked axis —
-                // topN's and the sort's alike — rather than by whichever transform
-                // produced the rank.
-                if (ranked && axis === 'y')
-                    ids.reverse();
+                // Used as ranked on both axes: slot 0 is at the left of x and the
+                // top of y, where a ranking is read from.
                 if (ids.length === 0)
                     continue;
                 // `sorted` says this list is a ranking the axis should prefer over
@@ -221,7 +224,7 @@ export function registerDataDerivedDomains(data, channelsNeedingDataDomain, addi
                     continue;
                 bandScale.addMark(categories, markId);
             }
-            bandScale.updateDomainFromExtents();
+            bandScale.updateDomainFromExtents({ instant: instantFor?.(bandScale) ?? false });
         }
     }
     // Color domain from query results (needed when sidecar is skipped, e.g. binned marks)
@@ -244,20 +247,14 @@ export function registerDataDerivedDomains(data, channelsNeedingDataDomain, addi
 // ---------------------------------------------------------------------------
 // Internal helper
 // ---------------------------------------------------------------------------
-function registerExtentOnScale(scaleState, scaleType, extent, markId, isRebinning, axisLabel) {
+function registerExtentOnScale(scaleState, scaleType, extent, markId, instant, axisLabel) {
     if (scaleType === 'time' && scaleState?.addOffsetExtent) {
         // Time scale: data is in offset form, use addOffsetExtent
         console.log(`📊 [${markId}] Registering ${axisLabel} domain from data (time offsets):`, extent);
-        scaleState.addOffsetExtent(extent, markId);
+        scaleState.addOffsetExtent(extent, markId, { instant });
     }
     else if (scaleState?.addMark) {
-        // Linear/log/symlog scale: use addMark with instant flag when rebinning
-        if (isRebinning) {
-            console.log(`⚡ [${markId}] Instant ${axisLabel} domain update (rebinning):`, extent);
-        }
-        else {
-            console.log(`📊 [${markId}] Registering ${axisLabel} domain from data:`, extent);
-        }
-        scaleState.addMark(extent, markId, { instant: isRebinning });
+        console.log(`📊 [${markId}] Registering ${axisLabel} domain from data:`, extent);
+        scaleState.addMark(extent, markId, { instant });
     }
 }

package/dist/components/marks/lifecycle/other-rows.svelte.d.ts

@@ -0,0 +1,112 @@
+/**
+ * What a mark's Other rows hold, and what is done with it: the one owner of
+ * the three things that read an Other row's member lists.
+ *
+ * - `register`: hands the members to their field, so a click on the bucket
+ *   selects them and the bucket is lit while the selection reaches into it.
+ * - `split`: a bar's selected share, for the bar renderer to draw as two parts.
+ * - `stats`: what that share is made of, for a tooltip.
+ *
+ * Takes getters, not values, so what it reads is tracked by whoever reads it.
+ * MarkLifecycleV2 holds one and says only what it is told by the mark.
+ */
+import type { Table } from '@uwdata/flechette';
+import type { FilterGroup } from '../../../query-engine/FilterGroup.svelte';
+import type { QueryEngine } from '../../../query-engine/QueryEngine';
+import type { ChannelIdentity } from '../../../types';
+/** What the mark is, for whether its Other bar can be split. */
+export interface SplitPlan {
+    markType: string;
+    /** The bar's length channel: `y` for vertical bars, `x` for horizontal. */
+    length: string | undefined;
+    /** The measure topN ranks by, null for its default (the length). */
+    by: string | null;
+    /** The length channel's select expression. */
+    expr: unknown;
+    /** The mark's topN has an Other bucket. */
+    hasOther: boolean;
+    /** JS transforms follow the query, so its rows no longer line up. */
+    hasJsTransforms: boolean;
+}
+/** What the bar renderer draws an Other split from. */
+export interface SplitProp {
+    /** 0 on rows that are not an Other row, `1 + share` on one. */
+    data: Float32Array;
+    /** Whether the split travels with the bar's morph or lands at once. */
+    slides: boolean;
+    /** The band axis the bars are grouped on; the split runs along the other. */
+    axis: 'x' | 'y';
+    /** Colour is the band's own field, so an Other row's colour term reads its id too. */
+    colorOnBand: boolean;
+}
+/** One Other row's share, in numbers. */
+export interface OtherRowStats {
+    picked: number;
+    total: number;
+    pickedCount: number;
+    memberCount: number;
+    /** The field has a selection; without one picked is everything and says nothing. */
+    active: boolean;
+}
+export interface OtherRowsDeps {
+    queryEngine: QueryEngine;
+    filterGroup: FilterGroup;
+    markId: string;
+    /** The mark's result, and the version it is at. */
+    table: () => Table | null;
+    dataVersion: () => number;
+    identity: () => Record<string, ChannelIdentity> | null;
+    /** The identity key of a band axis, or null when it has none. */
+    identityKey: (axis: 'x' | 'y') => string | null;
+    /**
+     * The mark is filtered by every selection (`'filter'`): its Other is
+     * recomputed inside the selection, so a click on it drills down.
+     */
+    filtered: () => boolean;
+    /**
+     * A selection can dim the mark (`'auto'`). Not under `'filter'` or
+     * `'ignore'`, whose Other bars get no selected share.
+     */
+    dims: () => boolean;
+    /** The mark's plan, or null before its setup completes. */
+    plan: () => SplitPlan | null;
+    /** The identity key of the mark's ordinal colour scale, or null. */
+    colorKey: () => string | null;
+    /** The identity key of the chart's band scale on an axis, or null. */
+    bandScaleKey: (axis: 'x' | 'y') => string | null;
+}
+export declare class OtherRows {
+    #private;
+    constructor(deps: OtherRowsDeps);
+    /**
+     * Register this result's Other rows with their field: what each Other bucket
+     * holds, per facet cell, for a click on it to select (FieldActivity.setOther).
+     * Per result, so the members follow the filters the mark receives. A mark
+     * filtered by the selection (`'filter'`) registers with no group, which is
+     * how a click on its Other knows to drill down rather than toggle off.
+     */
+    register(): void;
+    /** Give every registered row up: the mark is going away or starting over. */
+    unregister(): void;
+    /**
+     * The bar renderer's split, or null: no split, the bar is lit or dim as a
+     * whole (see #splitAxis for when a bar has one).
+     *
+     * Per row, share = Σ values[k] · selected(ids[k]) / Σ values[k] over the
+     * row's own member lists: the part of the bar the selection holds. A weighted
+     * sum over values the query already returned, in JS, per result and per
+     * selection change: the alternative is re-querying a mark that dims, which is
+     * what dimming exists to avoid.
+     */
+    get split(): SplitProp | null;
+    /** What an Other row's share is made of, or null where it has no split. */
+    stats(row: number): OtherRowStats | null;
+    /**
+     * `stats` of the Other row a tooltip point names: its band id and, with
+     * facets, its cell (null: any). A tooltip's rows are not the result's, so it
+     * finds its row by identity. A scan of the result's rows, per hover change
+     * and not per frame; null where the point is not an Other row of this mark's
+     * split.
+     */
+    statsAt(bandId: number, facetId: number | null): OtherRowStats | null;
+}

package/dist/components/marks/lifecycle/other-rows.svelte.js

@@ -0,0 +1,193 @@
+/**
+ * What a mark's Other rows hold, and what is done with it: the one owner of
+ * the three things that read an Other row's member lists.
+ *
+ * - `register`: hands the members to their field, so a click on the bucket
+ *   selects them and the bucket is lit while the selection reaches into it.
+ * - `split`: a bar's selected share, for the bar renderer to draw as two parts.
+ * - `stats`: what that share is made of, for a tooltip.
+ *
+ * Takes getters, not values, so what it reads is tracked by whoever reads it.
+ * MarkLifecycleV2 holds one and says only what it is told by the mark.
+ */
+import { OTHER_IDS_COLUMN, OTHER_VALUES_COLUMN } from '../../../transforms';
+import { otherSplit, splittable } from './other-split';
+export class OtherRows {
+    #deps;
+    /** The (field, Other id) pairs this mark has rows registered under. */
+    #registered = new Map();
+    /** The split last computed, and for which result: what a selection change holds against. */
+    #last = null;
+    constructor(deps) {
+        this.#deps = deps;
+    }
+    /**
+     * Register this result's Other rows with their field: what each Other bucket
+     * holds, per facet cell, for a click on it to select (FieldActivity.setOther).
+     * Per result, so the members follow the filters the mark receives. A mark
+     * filtered by the selection (`'filter'`) registers with no group, which is
+     * how a click on its Other knows to drill down rather than toggle off.
+     */
+    register() {
+        const { table: getTable, identity: getIdentity, filterGroup, markId } = this.#deps;
+        const table = getTable();
+        const identity = getIdentity();
+        const group = this.#deps.filtered() ? null : filterGroup.index;
+        const now = new Map();
+        const ids = table?.getChild(OTHER_IDS_COLUMN) ?? null;
+        if (table && identity && ids) {
+            const facets = table.getChild('__facet');
+            for (const axis of ['x', 'y']) {
+                const otherId = identity[axis]?.otherId;
+                const key = this.#deps.identityKey(axis);
+                const band = table.getChild(axis);
+                if (otherId == null || !key || !band)
+                    continue;
+                const rows = [];
+                for (let i = 0; i < table.numRows; i++) {
+                    if (Number(band.at(i)) !== otherId)
+                        continue;
+                    const members = ids.at(i);
+                    if (!members)
+                        continue;
+                    rows.push({ facetId: facets ? Number(facets.at(i)) : null, ids: members });
+                }
+                filterGroup.activity(key).setOther(otherId, markId, { group, rows });
+                now.set(key, otherId);
+            }
+        }
+        // A field or bucket this mark no longer draws an Other on gives its rows up.
+        for (const [key, otherId] of this.#registered) {
+            if (now.get(key) !== otherId)
+                filterGroup.activity(key).setOther(otherId, markId, null);
+        }
+        this.#registered = now;
+    }
+    /** Give every registered row up: the mark is going away or starting over. */
+    unregister() {
+        for (const [key, otherId] of this.#registered) {
+            this.#deps.filterGroup.activity(key).setOther(otherId, this.#deps.markId, null);
+        }
+        this.#registered = new Map();
+    }
+    /**
+     * The bar renderer's split, or null: no split, the bar is lit or dim as a
+     * whole (see #splitAxis for when a bar has one).
+     *
+     * Per row, share = Σ values[k] · selected(ids[k]) / Σ values[k] over the
+     * row's own member lists: the part of the bar the selection holds. A weighted
+     * sum over values the query already returned, in JS, per result and per
+     * selection change: the alternative is re-querying a mark that dims, which is
+     * what dimming exists to avoid.
+     */
+    get split() {
+        const axis = this.#splitAxis;
+        const computed = this.#computed;
+        if (!axis || !computed)
+            return null;
+        return {
+            data: computed.split,
+            slides: computed.slides,
+            axis,
+            colorOnBand: this.#colorOnBand(axis)
+        };
+    }
+    /** What an Other row's share is made of, or null where it has no split. */
+    stats(row) {
+        const computed = this.#computed;
+        if (!computed || computed.memberCount[row] === 0)
+            return null;
+        return {
+            picked: computed.picked[row],
+            total: computed.total[row],
+            pickedCount: computed.pickedCount[row],
+            memberCount: computed.memberCount[row],
+            active: computed.active
+        };
+    }
+    /**
+     * `stats` of the Other row a tooltip point names: its band id and, with
+     * facets, its cell (null: any). A tooltip's rows are not the result's, so it
+     * finds its row by identity. A scan of the result's rows, per hover change
+     * and not per frame; null where the point is not an Other row of this mark's
+     * split.
+     */
+    statsAt(bandId, facetId) {
+        const axis = this.#splitAxis;
+        const table = this.#deps.table();
+        const otherId = axis ? this.#deps.identity()?.[axis]?.otherId : null;
+        if (!axis || !table || otherId == null || bandId !== otherId)
+            return null;
+        const band = table.getChild(axis);
+        const facets = facetId == null ? null : table.getChild('__facet');
+        if (!band)
+            return null;
+        for (let row = 0; row < table.numRows; row++) {
+            if (Number(band.at(row)) !== bandId)
+                continue;
+            if (facets && Number(facets.at(row)) !== facetId)
+                continue;
+            return this.stats(row);
+        }
+        return null;
+    }
+    /**
+     * The band axis whose Other bar splits, or null. Only where a share is what
+     * it looks like:
+     * - a bar mark ('bary', 'barx') with a topN Other bucket, dimming (not
+     *   'filter' or 'ignore', which never dim) and without JS transforms, whose rows would
+     *   no longer line up with the query's;
+     * - whose length is the measure topN ranks by, which is what Other sums;
+     * - and that measure a bare COUNT or SUM, or a raw column: a mean or a max
+     *   summed into Other is no total, and a share of it would mean nothing.
+     */
+    get #splitAxis() {
+        const plan = this.#deps.plan();
+        if (!plan || !this.#deps.dims())
+            return null;
+        if (!plan.hasOther || plan.hasJsTransforms)
+            return null;
+        if (plan.markType !== 'bary' && plan.markType !== 'barx')
+            return null;
+        return splittable(plan.length, plan.by, plan.expr)
+            ? plan.markType === 'barx'
+                ? 'y'
+                : 'x'
+            : null;
+    }
+    /** Whether colour is the band's own field, so an Other row's colour term reads its id too. */
+    #colorOnBand(axis) {
+        const color = this.#deps.colorKey();
+        return color != null && color === this.#deps.bandScaleKey(axis);
+    }
+    #computed = $derived.by(() => {
+        const axis = this.#splitAxis;
+        if (!axis)
+            return null;
+        const dataVersion = this.#deps.dataVersion();
+        const table = this.#deps.table();
+        const otherId = this.#deps.identity()?.[axis]?.otherId;
+        const key = this.#deps.identityKey(axis);
+        const ids = table?.getChild(OTHER_IDS_COLUMN) ?? null;
+        const values = table?.getChild(OTHER_VALUES_COLUMN) ?? null;
+        const band = table?.getChild(axis) ?? null;
+        if (!table || otherId == null || !key || !ids || !values || !band)
+            return null;
+        // The last split, for the same result only: a selection change holds a
+        // flat row's position. A new result starts afresh and travels with the bar.
+        const { filterGroup, queryEngine } = this.#deps;
+        const last = this.#last;
+        const next = otherSplit({
+            rows: table.numRows,
+            band,
+            otherId,
+            ids,
+            values,
+            selected: filterGroup.activity(key).selectedValues(filterGroup.index),
+            decode: queryEngine.identityFor(key).values,
+            previous: last && last.dataVersion === dataVersion ? last.split : null
+        });
+        this.#last = { dataVersion, split: next };
+        return next;
+    });
+}

package/dist/components/marks/lifecycle/other-split.d.ts

@@ -0,0 +1,80 @@
+/**
+ * An Other bar's selected share, per row, and when a bar has one: the pure
+ * half of MarkLifecycleV2's `otherSplit`, so it can be tested without a mark.
+ */
+/** A column of a result, as Arrow (flechette) hands it: one value per row. */
+export interface RowColumn {
+    at(row: number): unknown;
+}
+/** One computed split: the channel, and which Other rows are flat. */
+export interface OtherSplit {
+    /** 0 on rows that are not an Other row, `1 + share` (or a held position) on one. */
+    split: Float32Array;
+    /**
+     * 1 on an Other row whose two parts look the same: nothing selected (both
+     * lit), or none of its members selected (both dim). Its split position is
+     * invisible there, so it is held, and moving out of it lands rather than
+     * slides.
+     */
+    flat: Uint8Array;
+    /**
+     * Whether the split travels with this write (the renderer morphs it) or
+     * lands at once. It lands when a row leaves a flat state: both sides of it
+     * look the same at that moment, so a slide would be a movement the eye
+     * reads as meaning something; the fades show the change instead.
+     */
+    slides: boolean;
+    /**
+     * What the share is made of, per row (0 on a row with no split), for a
+     * tooltip to say: `picked` of `total` (Σ values over the selected members,
+     * over all), `pickedCount` of `memberCount` categories. With nothing
+     * selected everything counts as picked.
+     */
+    picked: Float64Array;
+    total: Float64Array;
+    pickedCount: Int32Array;
+    memberCount: Int32Array;
+    /** The field has a selection: without one, everything counts as picked, which says nothing. */
+    active: boolean;
+}
+/**
+ * The split channel for the bar renderer, per row: share = Σ values · selected
+ * / Σ values over the row's own member lists. Selection is by value (`decode`
+ * maps an id to its value), so the NULL category needs nothing special. A row
+ * whose members mix signs gets no split (0): a share of a sum that cancels
+ * means nothing.
+ *
+ * `previous`: the last split for the SAME rows (the same result), when only the
+ * selection changed. A flat row then holds its previous position, so going flat
+ * (a selection cleared, or one that no longer reaches into Other) is a fade,
+ * not a slide. Without it (a new result) every row takes its value, and the
+ * split travels with the bar's own morph.
+ *
+ * Cost, measured: about 22 ns per Other member per call (the `selected.has`),
+ * so 0.1 ms at 5 000 members and about 1.2 ms at 50 000. Fine per click. If
+ * selection ever changes continuously (a brush on a band axis) over a very large
+ * Other, test membership against a Uint8Array indexed by id, built once per
+ * change, rather than a Set. The arrays allocated here are sized by rows.
+ */
+export declare function otherSplit(opts: {
+    rows: number;
+    band: RowColumn;
+    otherId: number;
+    ids: RowColumn;
+    values: RowColumn;
+    selected: ReadonlySet<unknown> | null;
+    decode: ArrayLike<unknown>;
+    previous?: OtherSplit | null;
+}): OtherSplit;
+/**
+ * Whether a bar's Other bucket can be split: its length must be what Other
+ * sums, and a total. `length` is the bar's length channel, `by` the channel
+ * topN ranks by (null: its default, the length), `expr` the length channel's
+ * select expression.
+ *
+ * Other sums `by`, so a length channel that is not `by` is 0 on the Other row.
+ * A bare COUNT or SUM, or a raw column (an ungrouped mark), is a total; a mean,
+ * a max, a ratio or a distinct count summed into Other is not, and a share of
+ * it would look exact while meaning nothing.
+ */
+export declare function splittable(length: string | undefined, by: string | null, expr: unknown): boolean;