@fjader/svelte 0.2.2 → 0.2.3

package/dist/scales/ColorScaleState.svelte.js

@@ -2,7 +2,7 @@
 import { scaleOrdinal } from 'd3-scale';
 import { createD3Scale, getOrdinalColors, bakeGradient, bakeInterpolator, bakePalette, getSchemeType, parseColorToRGBA, resolveColorScaleTypes, getResolvedInterpolator, transformTypeToGPU, applyTransform, colorScaleTicks } from './color-utils';
 import { COLOR_RAMP_RESOLUTION } from '../gpu/GPUCoordinator.svelte';
-import { COLOR_CONFIG_BYTES, COLOR_CONFIG_SLOT_BASE_OFFSET, NO_SLOT_TABLE } from '../gpu/ColorScaleShaderLib';
+import { COLOR_CONFIG_BYTES, COLOR_CONFIG_SLOT_BASE_OFFSET, NO_SLOT_TABLE, NULL_COLOR_RANK } from '../gpu/ColorScaleShaderLib';
 /**
  * Reactive state for a GPU-backed color scale.
  *
@@ -14,7 +14,7 @@ export class ColorScaleState {
     #field;
     #registry;
     #gpuCoordinator;
-    #scaleId = crypto.randomUUID(); // Unique ID for ViewManager registration
+    #id = crypto.randomUUID();
     // GPU slot indices (allocated from registry)
     #configSlot = -1;
     #rampSlot = -1; // Used by continuous scales
@@ -31,7 +31,6 @@ export class ColorScaleState {
     // Reactive state
     domain = $state([]);
     ready = $state(false);
-    #activeValues = $state(null); // null = all active, Set = only these active
     // Bumped on any visual-config change (transform type, constant, exponent, scheme).
     // Legend components read this to know when to re-render the gradient.
     _version = $state(0);
@@ -90,9 +89,37 @@ export class ColorScaleState {
      * a change.
      */
     #slots = { count: 0, from: new Float32Array(0), to: new Float32Array(0), t: 1, version: 0 };
+    /**
+     * Read by the packer every frame. The rank table covers the ids the field had
+     * when it was built, and the field's identity grows in place: another table
+     * appends categories, and a chart acquiring an Other bucket appends its id,
+     * any chart, since this scale is shared per field. An id past the table's end
+     * reads as unranked and draws transparent, so a grown identity rebuilds it
+     * here, once per growth.
+     */
     get slots() {
+        const identity = this.#identity;
+        if (identity?.present && identity.version !== this.#ranksVersion)
+            this.#refreshRanks();
         return this.#slots;
     }
+    /** The identity version the rank table was last built from. */
+    #ranksVersion = -1;
+    /**
+     * Bumped whenever the ranks change, so a reader of getColor (a legend's
+     * swatches) re-reads once identity lands. The ranks are a plain Map, and the
+     * domain usually arrives first: without this a legend kept the colours it
+     * computed before there were ranks.
+     */
+    #ranksRevision = $state(0);
+    /**
+     * Reactive: changes whenever the palette ranks are rebuilt, which is also when
+     * identity is adopted. A reader of `identityKey` or `getColor` in a derived
+     * reads this to re-run then.
+     */
+    get ranksRevision() {
+        return this.#ranksRevision;
+    }
     /**
      * Where this scale's block sits in the shared identity slot table. Assigned
      * by the coordinator's packer.
@@ -132,9 +159,18 @@ export class ColorScaleState {
         // Before the scale has a config slot there is nothing to patch; whichever
         // upload path claims one writes the base with the rest of the struct.
         if (this.#configSlot >= 0) {
-            this.#gpuCoordinator?.writeColorConfigSlotBase(this.#configSlot, base);
+            this.#gpuCoordinator?.writeColorConfigSlotBase(this.#configSlot, this.#configSlotBase);
         }
     }
+    /**
+     * The slot base the config carries: this scale's block while its channel
+     * carries ids, NO_SLOT_TABLE while it carries palette indices. The one rule
+     * for both writers (setSlotBase's patch and the full upload), so which wrote
+     * last cannot change what the GPU reads.
+     */
+    get #configSlotBase() {
+        return this.hasIdentity && this.#slotBase >= 0 ? this.#slotBase : NO_SLOT_TABLE;
+    }
     // ViewManager integration - tracks tables this scale has registered columns for
     constructor(config, registry, gpuCoordinator) {
         this.#field = config.field;
@@ -170,15 +206,22 @@ export class ColorScaleState {
     get field() {
         return this.#field;
     }
+    /**
+     * The identity key of the dim this scale adopted, or null before it has one.
+     * Selection activity is kept per identity key, so this is what the packer
+     * points the scale's block at.
+     */
+    get identityKey() {
+        // Only while the channel carries ids: a key without them would route a
+        // mark to dim by activity the shader cannot read.
+        return this.hasIdentity ? this.#identity.key || null : null;
+    }
     get scheme() {
         return this.#scheme;
     }
     get scaleType() {
         return this.#scaleType;
     }
-    get activeValues() {
-        return this.#activeValues;
-    }
     get isOrdinal() {
         return this.#renderType === 'ordinal';
     }
@@ -208,10 +251,15 @@ export class ColorScaleState {
         return this.#d3Scale;
     }
     /**
-     * Unique scale ID for ViewManager registration.
+     * The id the coordinator tracks this scale by, as it does every scale.
+     *
+     * Tracking is what puts the scale in front of the identity slot packer
+     * (see tracked-scales.ts). Without an id, its rank table and selection
+     * activity were never packed: the shader read the channel's dim id as a
+     * palette index, and selection dimming had nothing to read.
      */
-    get scaleId() {
-        return this.#scaleId;
+    get id() {
+        return this.#id;
     }
     // ============================================================
     // SLOT ALLOCATION
@@ -300,6 +348,10 @@ export class ColorScaleState {
         return [lo, hi];
     }
     #uploadToGPU() {
+        // A destroyed scale's slots may already belong to another scale: a late
+        // upload (identity landing after the chart unmounted) would overwrite them.
+        if (this.#destroyed)
+            return;
         if (!this.#gpuCoordinator) {
             console.warn('[ColorScaleState] No GPU coordinator, skipping upload');
             return;
@@ -388,15 +440,28 @@ export class ColorScaleState {
      */
     setIdentity(identity) {
         this.#warnIfDestroyed('setIdentity');
+        const hadIdentity = this.hasIdentity;
         const previous = this.#identity;
         this.#identity = identity;
         if (previous && previous !== identity && !previous.present) {
             this.#paletteRank.clear();
             this.#nextRank = 0;
         }
+        // Identity landing after the config was uploaded, or going (a reload
+        // empties it). The domain fetch and the identity columns are fetched in
+        // parallel, so either can arrive first; the config's slot base, its palette
+        // size and the CPU scale all depend on whether the channel carries ids,
+        // so a change of that uploads again. The ranks are refreshed here either
+        // way: they are CPU state, needed without a coordinator too.
         this.#refreshRanks();
+        if (hadIdentity !== this.hasIdentity && this.domain.length > 0)
+            this.#uploadToGPU();
     }
     /** True once this scale's channel carries dim ids rather than palette indices. */
+    /** The field's live id <-> value bijection, once adopted. */
+    get identity() {
+        return this.#identity ?? null;
+    }
     get hasIdentity() {
         return this.isOrdinal && (this.#identity?.present ?? false);
     }
@@ -419,10 +484,14 @@ export class ColorScaleState {
         const identity = this.#identity;
         if (!identity?.present)
             return;
+        this.#ranksVersion = identity.version;
         for (const value of this.domain) {
             const id = identity.ids.get(value);
             if (id === undefined || this.#paletteRank.has(id))
                 continue;
+            // The NULL category takes no palette slot (see below).
+            if (id === identity.nullId)
+                continue;
             this.#paletteRank.set(id, this.#nextRank++);
         }
         const table = new Float32Array(identity.values.length);
@@ -431,6 +500,16 @@ export class ColorScaleState {
             if (id >= 0 && id < table.length)
                 table[id] = rank;
         }
+        // The NULL category and the Other buckets draw the null colour: no palette
+        // slot, so they read as missing data or "the rest" and shift no category's
+        // colour. Not -1, which the shader draws transparent: a category outside
+        // this scale's domain.
+        if (identity.nullId !== null)
+            table[identity.nullId] = NULL_COLOR_RANK;
+        for (const id of identity.synthetic)
+            if (id < table.length)
+                table[id] = NULL_COLOR_RANK;
+        this.#ranksRevision++;
         const slots = this.#slots;
         slots.from = table;
         slots.to = table;
@@ -476,9 +555,8 @@ export class ColorScaleState {
             return undefined;
         return this.#identity.values[id];
     }
+    /** Called from #uploadToGPU only, which has refreshed the ranks. */
     #uploadOrdinal() {
-        // New categories in the domain need ranks before the palette is sized.
-        this.#refreshRanks();
         // Bake and upload palette
         const paletteData = bakePalette(this.#scheme, { reverse: this.#reverse });
         this.#gpuCoordinator.writeColorPalette(this.#paletteSlot, paletteData);
@@ -497,7 +575,7 @@ export class ColorScaleState {
             type: 0, // ORDINAL
             paletteOffset: this.#paletteSlot * 32,
             paletteSize: Math.min(Math.max(rankSpace, 1), 32),
-            slotBase: this.hasIdentity ? this.#slotBase : undefined
+            slotBase: this.#configSlotBase
         });
         this.#gpuCoordinator.writeColorConfig(this.#configSlot, config);
     }
@@ -660,6 +738,14 @@ export class ColorScaleState {
      * transform (e.g. non-positive values under log), mirroring the GPU shader.
      */
     getColor(value) {
+        // With palette ranks, the colour is exactly the shader's: value -> id ->
+        // rank -> palette, and the null colour for the NULL category and the Other
+        // buckets. Not through the d3 scale, whose domain is stringified: a null
+        // (or a number) would miss it, and d3 would hand the value the next
+        // palette colour.
+        void this.#ranksRevision;
+        if (this.#hasRanks())
+            return this.#rankedColor(value);
         if (!this.#d3Scale)
             return '#000000';
         if (this.#transformType === 'log' && typeof value === 'number' && value <= 0) {
@@ -667,6 +753,18 @@ export class ColorScaleState {
         }
         return this.#d3Scale(value);
     }
+    #rankedColor(value) {
+        const identity = this.#identity;
+        const id = identity.ids.get(value);
+        const rank = id === undefined ? undefined : this.#paletteRank.get(id);
+        if (rank === undefined)
+            return ColorScaleState.NULL_COLOR;
+        let colors = getOrdinalColors(this.#scheme) ?? [];
+        if (this.#reverse)
+            colors = [...colors].reverse();
+        // Same wrap the shader applies, so an over-32 palette agrees too.
+        return colors.length ? colors[rank % colors.length] : ColorScaleState.NULL_COLOR;
+    }
     /**
      * Get color as RGBA array (0-1 range).
      */
@@ -674,18 +772,14 @@ export class ColorScaleState {
         const cssColor = this.getColor(value);
         return parseColorToRGBA(cssColor);
     }
-    // ============================================================
-    // ACTIVE VALUES (selection feedback)
-    // ============================================================
-    setActiveValues(values) {
-        this.#activeValues = values instanceof Set ? values : new Set(values);
-    }
-    clearActiveValues() {
-        this.#activeValues = null;
-    }
-    isActive(value) {
-        return this.#activeValues == null || this.#activeValues.has(value);
+    /**
+     * Charts drawing this scale. Asked of the registry, as BandScaleState does,
+     * so it is current when charts come and go.
+     */
+    get _affectedChartsArray() {
+        return this.#registry?.chartsUsing(this) ?? ColorScaleState.#noCharts;
     }
+    static #noCharts = [];
     // ============================================================
     // CLEANUP
     // ============================================================

package/dist/scales/DomainResolver.d.ts

@@ -141,6 +141,8 @@ export declare class DomainResolver {
     channelValueFor(value: DimValue, displayed: readonly DimValue[]): number | null;
     /** True once this field's dim exists and holds at least one value. */
     get hasIdentity(): boolean;
+    /** The dim adopted last; a different object after a reload. */
+    get identity(): FieldIdentity | null;
     /** How many ids the dim holds — the width of a slot table over it. */
     get idCount(): number;
     /** How many marks have registered. */

package/dist/scales/DomainResolver.js

@@ -188,17 +188,18 @@ export class DomainResolver {
         // #extents encodes at the boundary, which is the whole point of the two
         // registration methods, so its input was already ids that had passed the
         // same check, and the list it was given had just been deduplicated. Its
-        // range check is subsumed by the `value == null` test below, which drops
-        // an id past the end, a negative one and a non-integer one alike, because
-        // all three index the value array to undefined.
+        // range check is subsumed by the `value === undefined` test below, which
+        // drops an id past the end, a negative one and a non-integer one alike,
+        // because all three index the value array to undefined. Not `== null`:
+        // the NULL category's value IS null, and it is a category like any other.
         //
         // An id with no value is dropped from the IDS, before either projection.
         // Filtering only the values would shorten the value list without
         // shortening the permutation, and the two would disagree with the band
         // index space d3 and the shader's categoryCount use — by one, with
-        // nothing failing. Unreachable today (the dim has no NULL values and
-        // synthetic rows carry a label), which is why the two are built together
-        // rather than checked against each other.
+        // nothing failing. Unreachable today (every dim row has a value: a real
+        // one, a synthetic row's label, or the NULL category's null), which is
+        // why the two are built together rather than checked against each other.
         const seen = new Set();
         const orderedIds = [];
         const resolved = [];
@@ -214,7 +215,7 @@ export class DomainResolver {
                     continue;
                 }
                 const value = values[category];
-                if (value == null)
+                if (value === undefined)
                     continue;
                 orderedIds.push(category);
                 resolved.push(value);
@@ -293,7 +294,9 @@ export class DomainResolver {
         const out = [];
         const seen = new Set();
         for (const item of items) {
-            if (item == null)
+            // A value of null is the NULL category, which `ids` maps to its id; an
+            // encoded null is no id at all.
+            if (item === undefined || (encoded && item === null))
                 continue;
             const id = encoded ? item : identity.ids.get(item);
             if (id === undefined || !Number.isInteger(id) || id < 0 || id >= limit)
@@ -371,6 +374,10 @@ export class DomainResolver {
     get hasIdentity() {
         return this.#identity?.present ?? false;
     }
+    /** The dim adopted last; a different object after a reload. */
+    get identity() {
+        return this.#identity;
+    }
     /** How many ids the dim holds — the width of a slot table over it. */
     get idCount() {
         return this.#identity?.values.length ?? 0;

package/dist/scales/ScaleRegistry.svelte.d.ts

@@ -73,6 +73,15 @@ export declare class ScaleRegistry {
      * a scale this registry has never seen.
      */
     chartsUsing(scale: AnyScaleState): string[];
+    /**
+     * Fill `out` with every chart drawing a scale on the categorical field
+     * `key` (by identity key), each once: the charts a selection fade on that
+     * field redraws. A superset of the charts whose marks read the field's
+     * activity, since every such mark draws through a scale on it; the extra
+     * charts (other groups, marks holding the scale without reading it) redraw
+     * for the 0.25 s of a fade. Read on every frame a fade runs.
+     */
+    chartsDrawingField(key: string, out: string[]): string[];
     deregisterChart(scale: AnyScaleState, chartId: string): void;
     removeChartUsage(chartId: string): void;
     _removeScaleFromStorage(scaleInstance: AnyScaleState): void;

package/dist/scales/ScaleRegistry.svelte.js

@@ -9,6 +9,7 @@ import { BandScaleState } from './BandScaleState.svelte';
 import { ColorScaleState } from './ColorScaleState.svelte';
 import { SizeScaleState } from './SizeScaleState.svelte';
 import { scaleOrdinal } from 'd3-scale';
+import { MAX_COLOR_SLOTS } from '../gpu/ColorScaleShaderLib';
 import { isTransformType } from './color-utils';
 // Helper to stringify sorted
 const stableStringify = (obj) => {
@@ -50,7 +51,8 @@ export class ScaleRegistry {
     #nextColorSlot = 0;
     #nextRampSlot = 0;
     #nextPaletteSlot = 0;
-    #maxColorSlots = 64;
+    // The shader's array length and the coordinator's buffer size, stated once.
+    #maxColorSlots = MAX_COLOR_SLOTS;
     #maxRampSlots = 64;
     #maxPaletteSlots = 64;
     // Size scale slot management
@@ -348,6 +350,25 @@ export class ScaleRegistry {
     chartsUsing(scale) {
         return this.#chartsFor.get(scale) ?? NO_CHARTS;
     }
+    /**
+     * Fill `out` with every chart drawing a scale on the categorical field
+     * `key` (by identity key), each once: the charts a selection fade on that
+     * field redraws. A superset of the charts whose marks read the field's
+     * activity, since every such mark draws through a scale on it; the extra
+     * charts (other groups, marks holding the scale without reading it) redraw
+     * for the 0.25 s of a fade. Read on every frame a fade runs.
+     */
+    chartsDrawingField(key, out) {
+        for (const [scale, charts] of this.#chartsFor) {
+            if (scale.identityKey !== key)
+                continue;
+            for (let i = 0; i < charts.length; i++) {
+                if (!out.includes(charts[i]))
+                    out.push(charts[i]);
+            }
+        }
+        return out;
+    }
     /** Re-derive one scale's redraw list. The only writer. */
     #publishCharts(scale, chartIds) {
         this.#chartsFor.set(scale, Array.from(chartIds));

package/dist/scales/TimeScaleState.svelte.js

@@ -20,7 +20,13 @@ export class TimeScaleState extends LinearScaleState {
         return 'time';
     }
     // --- Time Metadata ---
-    #t0 = null; // Origin Date (raw global min datetime)
+    /**
+     * Origin Date (raw global min datetime). State, because SQL is built from
+     * it: a mark's offset select and a brush's predicate are $derived, and one
+     * computed before the first datetime extent landed must rebuild when it
+     * does, or it keeps comparing the raw column with offsets.
+     */
+    #t0 = $state.raw(null);
     #unit = 1; // Seconds per offset unit (1 = seconds)
     // --- Datetime Extent Tracking ---
     #datetimeExtents = new Map(); // Map<markId, [minDate, maxDate]>

package/dist/spec/index.js

@@ -47,6 +47,7 @@ export async function render(target, spec, options = {}) {
     // 4. Build context map — injected into Svelte mount() so child components
     //    find these via getContext() calls (same keys as initFjader())
     const { filterGroups } = createQueryServices(queryEngine);
+    gpuCoordinator.setFilterGroups(filterGroups);
     const context = new Map();
     context.set('query-engine', queryEngine);
     context.set('filter-groups', filterGroups);

package/dist/spec/types.d.ts

@@ -133,6 +133,8 @@ export type MarkSpec = DotMarkSpec | BarXMarkSpec | BarYMarkSpec | LineMarkSpec
 interface BaseMarkSpec {
     table: string;
     selection?: string;
+    /** How the mark responds to selections in its group; see BaseMarkProps. Default 'auto'. */
+    selectionResponse?: 'auto' | 'filter';
     scheme?: ColorScheme;
     limit?: number;
     transforms?: TransformSpec[];

package/dist/transforms/index.d.ts

@@ -45,6 +45,33 @@ export declare function topN(n: number | (() => number), options?: TopNOptions):
  * the identity index columns in the same result.
  */
 export declare const RANK_COLUMN = "__dplot_rank";
+/**
+ * The Other row's members: the ids of the categories folded into it, and each
+ * one's measure, as two aligned lists ordered by id. NULL on every other row.
+ *
+ * Returned by the query rather than worked out on the client, because only the
+ * query knows exactly what Other summed: under every filter the chart receives,
+ * NULL (`-1`) included when it was folded. Clicking Other selects these, and
+ * its selected share is computed from them.
+ *
+ * `__dplot_`-prefixed, like the rank, so tooltips never show them; and the SQL
+ * tooltip table leaves out every `OTHER_MEMBER_PREFIX` column, so a hover never
+ * ships them back.
+ */
+export declare const OTHER_MEMBER_PREFIX = "__dplot_other_";
+export declare const OTHER_IDS_COLUMN = "__dplot_other_ids";
+export declare const OTHER_VALUES_COLUMN = "__dplot_other_values";
+/**
+ * `sql` without Other's member lists, for tables queried on every hover. A
+ * COLUMNS filter rather than EXCLUDE, which errors on a column that is absent,
+ * as it is on every mark without an Other bucket.
+ *
+ * The `lambda c:` form, not `c ->`: DuckDB deprecated the arrow lambda in 1.3,
+ * and every SQL tooltip table goes through this, so an upgrade dropping it would
+ * break tooltips on every mark. Both DuckDB-WASM 1.30 (DuckDB 1.3.2) and the
+ * DuckDB the tests run accept it.
+ */
+export declare function withoutOtherMembers(sql: string): string;
 /**
  * Most padded rows `dense()` will produce before refusing.
  *

package/dist/transforms/index.js

@@ -135,6 +135,37 @@ function resolveTopNColumns(aliases, options, config) {
  * the identity index columns in the same result.
  */
 export const RANK_COLUMN = '__dplot_rank';
+/**
+ * The Other row's members: the ids of the categories folded into it, and each
+ * one's measure, as two aligned lists ordered by id. NULL on every other row.
+ *
+ * Returned by the query rather than worked out on the client, because only the
+ * query knows exactly what Other summed: under every filter the chart receives,
+ * NULL (`-1`) included when it was folded. Clicking Other selects these, and
+ * its selected share is computed from them.
+ *
+ * `__dplot_`-prefixed, like the rank, so tooltips never show them; and the SQL
+ * tooltip table leaves out every `OTHER_MEMBER_PREFIX` column, so a hover never
+ * ships them back.
+ */
+export const OTHER_MEMBER_PREFIX = '__dplot_other_';
+export const OTHER_IDS_COLUMN = `${OTHER_MEMBER_PREFIX}ids`;
+export const OTHER_VALUES_COLUMN = `${OTHER_MEMBER_PREFIX}values`;
+/**
+ * `sql` without Other's member lists, for tables queried on every hover. A
+ * COLUMNS filter rather than EXCLUDE, which errors on a column that is absent,
+ * as it is on every mark without an Other bucket.
+ *
+ * The `lambda c:` form, not `c ->`: DuckDB deprecated the arrow lambda in 1.3,
+ * and every SQL tooltip table goes through this, so an upgrade dropping it would
+ * break tooltips on every mark. Both DuckDB-WASM 1.30 (DuckDB 1.3.2) and the
+ * DuckDB the tests run accept it.
+ */
+export function withoutOtherMembers(sql) {
+    return `SELECT COLUMNS(lambda c: NOT starts_with(c, '${OTHER_MEMBER_PREFIX}')) FROM (${sql})`;
+}
+/** The original band id, carried through bucketing, which rewrites the band column. */
+const BAND_SOURCE_COLUMN = '__dplot_band_src';
 /**
  * Give every category in the dim a row, at zero past the cutoff.
  *
@@ -189,6 +220,12 @@ function densify(inner, aliases, plan) {
             // missing (category, series) pair carries that series' real id.
             select[alias] = rawSql(`${crossed}."id"`);
         }
+        else if (alias.startsWith(OTHER_MEMBER_PREFIX)) {
+            // Other's member lists: NULL on a padded row, as on every row but
+            // Other's. Never COALESCEd to 0 like a measure, which is a type error on
+            // a list.
+            select[alias] = rawSql(`a.${column(alias)}`);
+        }
         else if (plan.identity[alias]?.dim === dim) {
             // Same dim as the band, so this channel IS the category — the ordinary
             // "colour the bars by their own category" chart. Its value for a row
@@ -235,13 +272,13 @@ function densify(inner, aliases, plan) {
     // a missing category. Each key's ids get -1 appended: a row whose series is
     // NULL carries -1, and a join over the dim's ids alone would drop it.
     const joins = cross
-        .map(([, keyDim], i) => ` CROSS JOIN (SELECT "id" FROM ${quoteTable(keyDim)} UNION ALL SELECT -1) AS k${i}`)
+        .map(([key, keyDim], i) => ` CROSS JOIN (SELECT "id" FROM ${padIds(plan.identity[key], keyDim)} UNION ALL SELECT -1) AS k${i}`)
         .join('');
     const on = [
         `a.${column(band)} = d."id"`,
         ...cross.map(([key], i) => `a.${column(key)} = k${i}."id"`)
     ].join(' AND ');
-    return Query.from(rawSql(`${quoteTable(dim)} AS d${joins} LEFT JOIN (${inner}) AS a ON ${on}`)).select(select);
+    return Query.from(rawSql(`${padIds(plan.identity[band], dim)} AS d${joins} LEFT JOIN (${inner}) AS a ON ${on}`)).select(select);
 }
 /**
  * Most padded rows `dense()` will produce before refusing.
@@ -254,6 +291,23 @@ function densify(inner, aliases, plan) {
  * before any of this existed.
  */
 export const DENSE_ROW_LIMIT = 10_000;
+/**
+ * The ids a channel pads from: the ids its mark's own table holds, plus every
+ * Other bucket of the dim, when the table's ids are known; the whole dim before.
+ *
+ * The dim spans every table registering the field, so padding from all of it
+ * gave a chart a zero row, and a slot on a sorted axis, for every category only
+ * another table has. Other buckets stay in: an Other row must find its padding
+ * row, and another mark's bucket is kept off the axis by its NaN rank, as
+ * before.
+ */
+function padIds(id, dim) {
+    const present = id?.present;
+    if (!present)
+        return `(SELECT "id" FROM ${quoteTable(dim)})`;
+    return (`(SELECT "id" FROM ${quoteTable(present)} UNION ALL ` +
+        `SELECT "id" FROM ${quoteTable(dim)} WHERE "label" IS NOT NULL)`);
+}
 /**
  * Whether `dense()` applies to a query with these aliases, and how.
  *
@@ -680,7 +734,37 @@ function collapseIntoOther(ranked, aliases, o) {
         }
     }
     bucket[RANK_COLUMN] = sqlTag `CASE WHEN ${kept} THEN ${rank} ELSE ${n + 1} END`;
+    // The band column is rewritten to the Other id above, so the category each
+    // folded row came from is carried beside it for the member lists.
+    bucket[BAND_SOURCE_COLUMN] = column(band);
     const bucketed = Query.from({ __topn_ranked: ranked }).select(bucket);
+    // PER MEMBER first: one row per group key and folded category. A grouped mark
+    // already has one row per (category, series), so this changes nothing there;
+    // an ungrouped one (raw rows, no groupKeys) would otherwise list one entry per
+    // RAW ROW past the cutoff — ids repeated, and a list that grows with the table
+    // rather than the field. Every aggregate below (SUM, MAX, MIN) gives the same
+    // answer over these rows as over the raw ones, so Other's values are unchanged.
+    const src = column(BAND_SOURCE_COLUMN);
+    const member = {};
+    const memberKeys = [src];
+    for (const alias of aliases) {
+        const col = column(alias);
+        if (isKey(alias)) {
+            member[alias] = col;
+            memberKeys.push(col);
+        }
+        else if (alias === by) {
+            member[alias] = sqlTag `SUM(${col})`;
+        }
+        else {
+            member[alias] = sqlTag `MAX(${col})`;
+        }
+    }
+    member[RANK_COLUMN] = sqlTag `MIN(${rank})`;
+    member[BAND_SOURCE_COLUMN] = src;
+    const members = Query.from({ __topn_bucketed: bucketed })
+        .select(member)
+        .groupby(...memberKeys);
     const collapse = {};
     const keys = [];
     for (const alias of aliases) {
@@ -697,7 +781,17 @@ function collapseIntoOther(ranked, aliases, o) {
         }
     }
     collapse[RANK_COLUMN] = sqlTag `MIN(${rank})`;
-    return Query.from({ __topn_bucketed: bucketed })
+    // Other's members, from the rows the bucket step moved past the cutoff (their
+    // rank is n + 1 there): one entry per folded category, from the step above. A
+    // kept row's group has none, so its lists are NULL. Cast so they arrive as
+    // Int32Array and Float64Array children: ids are REAL in the channel, and a
+    // COUNT measure is BIGINT, which would arrive as BigInt64Array.
+    const past = sqlTag `${rank} > ${n}`;
+    collapse[OTHER_IDS_COLUMN] =
+        sqlTag `list(CAST(${src} AS INTEGER) ORDER BY ${src}) FILTER (WHERE ${past})`;
+    collapse[OTHER_VALUES_COLUMN] =
+        sqlTag `list(CAST(${column(by)} AS DOUBLE) ORDER BY ${src}) FILTER (WHERE ${past})`;
+    return Query.from({ __topn_members: members })
         .select(collapse)
         .groupby(...keys);
 }