@jbrowse/core 5.0.0-beta.11 → 5.0.0-beta.14

package/esm/util/isoformRank.d.ts

@@ -0,0 +1,39 @@
+import type { Feature, SimpleFeatureSerializedNoId } from './simpleFeature.ts';
+/**
+ * Which isoform of a gene a display shows first: the canvas gene glyph's
+ * `longestCoding` collapse and the sequence panel's default transcript both
+ * rank with this, so the panel opens on the isoform the track drew. Generic
+ * over the feature shape because the worker ranks live `Feature`s and the
+ * panel ranks their serialized form.
+ */
+export interface IsoformReader<T> {
+    type: (feature: T) => string | undefined;
+    start: (feature: T) => number;
+    end: (feature: T) => number;
+    subfeatures: (feature: T) => readonly T[];
+    attribute: (feature: T, field: string) => unknown;
+}
+export declare const featureIsoformReader: IsoformReader<Feature>;
+export declare const serializedIsoformReader: IsoformReader<SimpleFeatureSerializedNoId>;
+/**
+ * The attribute naming a gene's representative isoform, and the values of it
+ * that do, best first. The canvas display's `canonicalTranscriptField` and
+ * `canonicalTranscriptTags` slots default to these.
+ */
+export interface CanonicalTranscripts {
+    field: string;
+    tags: readonly string[];
+}
+export declare const DEFAULT_CANONICAL_TRANSCRIPTS: CanonicalTranscripts;
+export interface IsoformScore {
+    canonical: number;
+    coding: boolean;
+    size: number;
+}
+export declare function isCodingIsoform<T>(read: IsoformReader<T>, feature: T): boolean;
+export declare function isoformScorer<T>(read: IsoformReader<T>, { field, tags }: CanonicalTranscripts): (feature: T) => IsoformScore;
+export declare function rankIsoforms<T>(isoforms: readonly T[], scoreOf: (feature: T) => IsoformScore): T[];
+export interface CanonicalTranscriptsHost {
+    canonicalTranscripts: CanonicalTranscripts;
+}
+export declare function isCanonicalTranscriptsHost(thing: unknown): thing is CanonicalTranscriptsHost;

package/esm/util/isoformRank.js

@@ -0,0 +1,118 @@
+export const featureIsoformReader = {
+    type: f => f.get('type'),
+    start: f => f.get('start'),
+    end: f => f.get('end'),
+    subfeatures: f => f.get('subfeatures') ?? [],
+    attribute: (f, field) => f.get(field),
+};
+export const serializedIsoformReader = {
+    type: f => f.type,
+    start: f => f.start,
+    end: f => f.end,
+    subfeatures: f => f.subfeatures ?? [],
+    attribute: (f, field) => f[field],
+};
+export const DEFAULT_CANONICAL_TRANSCRIPTS = {
+    field: 'tag',
+    tags: [
+        'MANE Select',
+        'MANE_Select',
+        'RefSeq Select',
+        'Ensembl_canonical',
+        'MANE Plus Clinical',
+        'MANE_Plus_Clinical',
+    ],
+};
+function isCDSType(type) {
+    return type?.toLowerCase() === 'cds';
+}
+// The feature itself counts, because an isoform can BE the CDS: a viral
+// polyprotein hangs its cleavage products off its CDS, not off further CDSs.
+export function isCodingIsoform(read, feature) {
+    return (isCDSType(read.type(feature)) ||
+        read.subfeatures(feature).some(sub => isCodingIsoform(read, sub)));
+}
+// "Longest coding" is the longest protein — summed CDS length, not the widest
+// genomic footprint an isoform with a large intron could win. A duplicated CDS
+// row is a real GFF3 quirk that would otherwise inflate one isoform past a
+// genuinely longer protein, so equal spans count once.
+function codingLength(read, feature) {
+    const spans = [];
+    const walk = (f) => {
+        for (const sub of read.subfeatures(f)) {
+            if (isCDSType(read.type(sub))) {
+                spans.push([read.start(sub), read.end(sub)]);
+            }
+            else {
+                walk(sub);
+            }
+        }
+    };
+    walk(feature);
+    if (spans.length === 0) {
+        return isCDSType(read.type(feature))
+            ? read.end(feature) - read.start(feature)
+            : 0;
+    }
+    spans.sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+    let sum = 0;
+    for (const [i, span] of spans.entries()) {
+        const prev = spans[i - 1];
+        if (!prev || prev[0] !== span[0] || prev[1] !== span[1]) {
+            sum += span[1] - span[0];
+        }
+    }
+    return sum;
+}
+// A position in the tag list rather than a boolean, because the default list
+// holds two tags one gene can carry at once and flattening them to "tagged"
+// leaves the coding-length tiebreak to pick between them. A GFF3 attribute
+// holding a comma list arrives as an array, hence both shapes.
+function canonicalRank(value, wanted) {
+    const values = Array.isArray(value)
+        ? value.map(v => String(v).toLowerCase())
+        : typeof value === 'string'
+            ? [value.toLowerCase()]
+            : [];
+    let best = Infinity;
+    for (const v of values) {
+        const rank = wanted.indexOf(v);
+        if (rank !== -1 && rank < best) {
+            best = rank;
+        }
+    }
+    return best;
+}
+export function isoformScorer(read, { field, tags }) {
+    const wanted = tags.map(t => t.toLowerCase());
+    return (feature) => {
+        const coding = isCodingIsoform(read, feature);
+        return {
+            canonical: wanted.length
+                ? canonicalRank(read.attribute(feature, field), wanted)
+                : Infinity,
+            coding,
+            size: coding
+                ? codingLength(read, feature)
+                : read.end(feature) - read.start(feature),
+        };
+    };
+}
+// Best first. A curated tag outranks every measurement, because for a gene whose
+// longest protein is a minor variant it is the only thing that picks the right
+// isoform. A coding-length tie resolves to the LATER isoform, which a stable
+// sort would break the other way — hence the explicit index term.
+export function rankIsoforms(isoforms, scoreOf) {
+    return isoforms
+        .map((feature, index) => ({ feature, index, ...scoreOf(feature) }))
+        .sort((a, b) => a.canonical - b.canonical ||
+        Number(b.coding) - Number(a.coding) ||
+        b.size - a.size ||
+        b.index - a.index)
+        .map(s => s.feature);
+}
+export function isCanonicalTranscriptsHost(thing) {
+    return (typeof thing === 'object' &&
+        thing !== null &&
+        'canonicalTranscripts' in thing);
+}

package/esm/util/jexl.js

@@ -131,7 +131,7 @@ export default function JexlF( /* config?: any*/) {
         // BAM features expose a targeted `getTag` that walks the tag block and
         // decodes only the requested tag; `get('tags')` decodes every tag on the
         // read (a Record allocation plus NM/AS/ms/de/… — often ~10 per read) to
-        // answer one, and this runs per feature on colour/label callbacks like
+        // answer one, and this runs per feature on color/label callbacks like
         // `jexl:getTag(feature,'HP')`. Same duck-typing as
         // `@jbrowse/modifications-utils`' getTag(), which core cannot import (that
         // package depends on core). Unwrap first: on a jexlFeatureProxy every

package/esm/util/layouts/GranularRectLayout.d.ts

@@ -1,3 +1,8 @@
+interface LowerSpan {
+    top: number;
+    left: number;
+    right: number;
+}
 export default class GranularRectLayout {
     private pitchX;
     private pitchY;
@@ -23,10 +28,21 @@ export default class GranularRectLayout {
      * @returns top position for the rect, or Null if laying
      *  out the rect would exceed maxHeight
      */
-    addRect(id: string, left: number, right: number, height: number, lower?: {
-        top: number;
+    addRect(id: string, left: number, right: number, height: number, lower?: LowerSpan): number | null;
+    /**
+     * Lays out rects, none of them placed yet, at one shared top: the lowest
+     * where every one fits. For the pieces of one feature drawn apart.
+     */
+    addRectsAtOneTop(rects: readonly {
+        id: string;
         left: number;
         right: number;
-    }): number | null;
+        height: number;
+        lower?: LowerSpan;
+    }[]): number | null;
+    private placement;
+    private firstFit;
+    private commit;
     private getOrCreateRow;
 }
+export {};

package/esm/util/layouts/GranularRectLayout.js

@@ -56,39 +56,64 @@ export default class GranularRectLayout {
      *  out the rect would exceed maxHeight
      */
     addRect(id, left, right, height, lower) {
-        const pitchX = this.pitchX;
-        const pitchY = this.pitchY;
-        // if we have already laid it out, return its layout
         const storedRec = this.rectangles.get(id);
         if (storedRec) {
-            return storedRec.top === null ? null : storedRec.top * pitchY;
+            return storedRec.top === null ? null : storedRec.top * this.pitchY;
+        }
+        const placement = this.placement(left, right, height, lower);
+        return this.commit(id, placement, this.firstFit(placement, 0));
+    }
+    /**
+     * Lays out rects, none of them placed yet, at one shared top: the lowest
+     * where every one fits. For the pieces of one feature drawn apart.
+     */
+    addRectsAtOneTop(rects) {
+        const placements = rects.map(r => this.placement(r.left, r.right, r.height, r.lower));
+        let top = 0;
+        for (let i = 0; i < placements.length && top <= this.maxHeight;) {
+            const fit = this.firstFit(placements[i], top);
+            if (fit === top) {
+                i += 1;
+            }
+            else {
+                top = fit;
+                i = 0;
+            }
+        }
+        let result = null;
+        for (const [i, rect] of rects.entries()) {
+            result = this.commit(rect.id, placements[i], top);
         }
-        // Use Math.trunc for fast floor operation that works with large coordinates
-        // (bitwise | 0 overflows above 2^31, causing layout issues with large genomic coordinates)
-        const pLeft = Math.trunc(left / pitchX);
-        const pRight = Math.trunc(right / pitchX);
-        const pHeight = Math.ceil(height / pitchY);
-        const pLowerTop = lower ? Math.ceil(lower.top / pitchY) : pHeight;
+        return result;
+    }
+    placement(left, right, height, lower) {
+        const pitchX = this.pitchX;
+        const pitchY = this.pitchY;
+        // Math.trunc, not `| 0`, which overflows above 2^31 genomic coordinates
         const rectangle = {
-            l: pLeft,
-            r: pRight,
+            l: Math.trunc(left / pitchX),
+            r: Math.trunc(right / pitchX),
             top: null,
-            h: pHeight,
+            h: Math.ceil(height / pitchY),
         };
-        const lowerSpan = lower
-            ? {
-                l: Math.trunc(lower.left / pitchX),
-                r: Math.trunc(lower.right / pitchX),
-            }
-            : rectangle;
-        // Allow features to start at any position up to maxHeight
-        // Features starting at maxHeight or beyond are filtered out, but features
-        // that start below maxHeight and extend past it are allowed
+        return {
+            rectangle,
+            lowerTop: lower ? Math.ceil(lower.top / pitchY) : rectangle.h,
+            lowerSpan: lower
+                ? {
+                    l: Math.trunc(lower.left / pitchX),
+                    r: Math.trunc(lower.right / pitchX),
+                }
+                : rectangle,
+        };
+    }
+    // The first top at or past `fromTop` where the rect fits, maxHeight + 1
+    // when none does. A rect starting below maxHeight may extend past it.
+    firstFit({ rectangle, lowerTop: pLowerTop, lowerSpan }, fromTop) {
+        const { l: pLeft, r: pRight, h: pHeight } = rectangle;
         const maxTop = this.maxHeight;
-        let top = 0;
-        // OPTIMIZATION: Inline collision checking for hot path
-        // Eliminates function call overhead which is critical at 100k+ features
         const bitmap = this.bitmap;
+        let top = fromTop;
         // On a collision at row y, the next top worth trying is y + 1, not top + 1.
         // Rows top..y-1 are clear (y is the first hit walking upward) and every top'
         // between them still spans y, because y < top + pHeight — so nothing between
@@ -99,11 +124,9 @@ export default class GranularRectLayout {
         // blocks every top to y, and a hit in the lower span blocks just the tops
         // keeping y there: the jump goes to the first top putting y above it.
         outer: for (; top <= maxTop; top += 1) {
-            // Check all rows that this rectangle would occupy
             const maxY = top + pHeight;
             for (let y = top; y < maxY; y += 1) {
                 const row = bitmap[y];
-                // Fast path: no row created yet
                 if (!row) {
                     continue;
                 }
@@ -115,7 +138,6 @@ export default class GranularRectLayout {
                     const r = inLower ? lowerSpan.r : pRight;
                     const blockedTop = inLower ? y - pLowerTop : y;
                     if (len < 40) {
-                        // Linear scan for small arrays
                         for (let i = 0; i < len; i += 2) {
                             const start = intervals[i];
                             const end = intervals[i + 1];
@@ -126,7 +148,6 @@ export default class GranularRectLayout {
                         }
                     }
                     else {
-                        // Binary search for larger arrays
                         let low = 0;
                         let high = len >> 1;
                         while (low < high) {
@@ -150,19 +171,21 @@ export default class GranularRectLayout {
                     }
                 }
             }
-            // No collision found in any row
             break;
         }
+        return top;
+    }
+    commit(id, { rectangle, lowerTop, lowerSpan }, top) {
         this.rectangles.set(id, rectangle);
-        if (top > maxTop) {
+        if (top > this.maxHeight) {
             return null;
         }
         rectangle.top = top;
-        const yEnd = top + pHeight;
+        const yEnd = top + rectangle.h;
         for (let y = top; y < yEnd; y += 1) {
-            this.getOrCreateRow(y).addRect(y - top >= pLowerTop ? lowerSpan : rectangle);
+            this.getOrCreateRow(y).addRect(y - top >= lowerTop ? lowerSpan : rectangle);
         }
-        return top * pitchY;
+        return top * this.pitchY;
     }
     getOrCreateRow(y) {
         let row = this.bitmap[y];

package/esm/util/leadingEdgeAutorun.d.ts

@@ -4,6 +4,14 @@ export interface LeadingEdgeAutorunOptions {
     name: string;
     /** how long to coalesce reruns once the body has started work once */
     delay: number;
+    /**
+     * Run on the leading edge again once the last run that started work is at
+     * least `delay` old. A change that arrives after the autorun has sat idle,
+     * such as a jump to a new locus, has nothing to coalesce with, so waiting the
+     * delay out only adds latency. A change within `delay` of that work is
+     * coalesced as before.
+     */
+    idleLeading?: boolean;
 }
 /**
  * An autorun that runs on the leading edge until its body reports having
@@ -37,4 +45,4 @@ export interface LeadingEdgeAutorunOptions {
  * The debounce is per-installation, so two autoruns on one model coalesce
  * independently.
  */
-export declare function leadingEdgeAutorun(self: IAnyStateTreeNode, body: () => boolean | void, { name, delay }: LeadingEdgeAutorunOptions): import("mobx").IReactionDisposer;
+export declare function leadingEdgeAutorun(self: IAnyStateTreeNode, body: () => boolean | void, { name, delay, idleLeading }: LeadingEdgeAutorunOptions): import("mobx").IReactionDisposer;

package/esm/util/leadingEdgeAutorun.js

@@ -31,16 +31,19 @@ import { namedAutorun } from '@jbrowse/render-core/namedReactions';
  * The debounce is per-installation, so two autoruns on one model coalesce
  * independently.
  */
-export function leadingEdgeAutorun(self, body, { name, delay }) {
+export function leadingEdgeAutorun(self, body, { name, delay, idleLeading = false }) {
     let primed = false;
+    let lastWork = Number.NEGATIVE_INFINITY;
     return namedAutorun(self, () => {
         if (body()) {
             primed = true;
+            lastWork = performance.now();
         }
     }, {
         name,
         scheduler: run => {
-            if (primed) {
+            const idle = idleLeading && performance.now() - lastWork >= delay;
+            if (primed && !idle) {
                 setTimeout(run, delay);
             }
             else {

package/esm/util/markEncoding.d.ts

@@ -4,7 +4,7 @@ import type { JexlInstance } from './jexlStrings.ts';
 import type { ColorEncoding, ColorScaleTable, ContinuousRef, Encoded, EncodedChannels, FieldRef, LocusRef, ShapeEncoding, SizeEncoding, LaneName } from './markEncodingTypes.ts';
 import type { ProgressReporter } from './progress.ts';
 import type { Feature } from './simpleFeature.ts';
-export type { AggregateOp, AggregateStep, BinStep, CategoricalRef, ColorEncoding, ContinuousRef, CoverageStep, ColorScaleTable, CoreGetEncodedLayersArgs, Encoded, EncodedChannels, EncodedLayersResult, FacetSection, FacetSpec, FieldRef, FilterStep, FormulaStep, LocusRef, MateStep, ShapeEncoding, ShapeName, ShapeScaleTable, SizeEncoding, SizeRef, SizeScaleTable, LaneName, LayerRequest, MarkEncoding, ScaleTable, ThresholdRef, TransformStep, } from './markEncodingTypes.ts';
+export type { AggregateOp, AggregateStep, BinStep, CategoricalRef, ColorEncoding, ContinuousRef, CoverageStep, ColorScaleTable, CoreGetEncodedLayersArgs, Encoded, EncodedChannels, EncodedLayersResult, FacetSection, FacetSpec, FieldRef, FilterStep, FormulaStep, LocusRef, MateStep, PathSpec, ShapeEncoding, ShapeName, ShapeScaleTable, SizeEncoding, SizeRef, SizeScaleTable, LaneName, LayerRequest, MarkEncoding, ScaleTable, ThresholdRef, TransformStep, WindowStep, } from './markEncodingTypes.ts';
 export type { ColorSchemeName } from './colorSchemes.ts';
 export { COLOR_SCHEMES } from './colorSchemes.ts';
 export { NO_VALUE_LABEL } from './categoricalField.ts';
@@ -12,7 +12,7 @@ export declare const DEFAULT_MARK_COLOR = "#0068d1";
 export declare const DEFAULT_SIZE_RANGE_PX: [number, number];
 /**
  * #api
- * The misconfiguration grey packed as the encoder paints it: a `jexl:` colour
+ * The misconfiguration grey packed as the encoder paints it: a `jexl:` color
  * that answered no string, a ramp value that is no number, text a threshold
  * cannot read.
  */
@@ -44,6 +44,8 @@ export interface MarkEncodingInput {
     x2?: FieldRef | LocusRef | ChannelReader;
     y?: FieldRef | ChannelReader;
     row?: FieldRef | ChannelReader | ArrayLike<number>;
+    /** Each row's series, what the `series` lane is filled from. */
+    series?: ArrayLike<number>;
     color?: ColorEncoding | ChannelReader<number>;
     shape?: ShapeEncoding | ChannelReader<number>;
     text?: FieldRef | ChannelReader;
@@ -97,12 +99,12 @@ export declare function withHitIndex<T extends EncodedChannels>(channels: T): Hi
 export declare function encodeFeatures<L extends LaneName>(input: readonly Feature[] | FeatureTable, encoding: MarkEncodingInput, lanes: readonly L[], ctx?: EncodeContext): Encoded<L>;
 /**
  * #api
- * A continuous colour scale over `extent`, the values it met: the domain its
+ * A continuous color scale over `extent`, the values it met: the domain its
  * declared ends and the extent make, the straight table its stops bake to and
- * where its middle stop sits, and the packed colour a value paints through
+ * where its middle stop sits, and the packed color a value paints through
  * them: an infinity the end on its side, as a threshold places it, and NaN,
  * text that is no number, the misconfiguration grey. The encoder and every
- * display painting a ramp itself read it, so a value takes one colour whoever
+ * display painting a ramp itself read it, so a value takes one color whoever
  * paints it.
  */
 export declare function continuousColorScale(encoding: ContinuousRef, extent: readonly [number, number]): {
@@ -125,7 +127,7 @@ export declare function rampOverExtent(table: Extract<ColorScaleTable, {
 }>;
 /**
  * #api
- * A CSS colour or `jexl:` colour expression as a per-feature packed ABGR —
+ * A CSS color or `jexl:` color expression as a per-feature packed ABGR —
  * the unscaled arm of {@link ColorEncoding}, on its own for a display that
  * carries a plain `color` slot.
  */
@@ -138,8 +140,8 @@ export declare function colorEvaluator(color: string, jexl: JexlInstance | undef
 export declare function featureIndexAt(channels: Pick<EncodedChannels, 'featureIndex'>, i: number): number;
 /**
  * #api
- * The packed colour instance `i` of `channels` paints: `color[i]`, or `color`
- * itself where the colour is a constant and so shipped as one number.
+ * The packed color instance `i` of `channels` paints: `color[i]`, or `color`
+ * itself where the color is a constant and so shipped as one number.
  */
 export declare function colorAt(channels: Pick<EncodedChannels, 'color'>, i: number): number | undefined;
 /**

package/esm/util/markEncoding.js

@@ -1,3 +1,4 @@
+import { linkFeet } from '@jbrowse/render-core/linkFeet';
 import { makeScoreNormalizer, rampMidNorm, scaleTypeCode, } from '@jbrowse/render-core/scoreScale';
 import { rampMidT } from '@jbrowse/render-core/shaders/colorRampLut';
 import { RAMP_NO_VALUE_BITS } from '@jbrowse/render-core/shaders/markColorConsts';
@@ -23,7 +24,7 @@ export const DEFAULT_MARK_COLOR = '#0068d1';
 export const DEFAULT_SIZE_RANGE_PX = [1, 6];
 /**
  * #api
- * The misconfiguration grey packed as the encoder paints it: a `jexl:` colour
+ * The misconfiguration grey packed as the encoder paints it: a `jexl:` color
  * that answered no string, a ramp value that is no number, text a threshold
  * cannot read.
  */
@@ -74,6 +75,25 @@ function numberChannelReader(table, ref, jexl) {
     const read = channelReader(table, ref, jexl);
     return i => numericValue(read(i));
 }
+// A far end stated as `mate.start` carries its direction as
+// `mate.mateDirection`, beside the record's own.
+function feetLane(table, farPos, count, rowAt, jexl) {
+    const dot = farPos.lastIndexOf('.');
+    const farDirection = `${farPos.slice(0, dot)}.mateDirection`;
+    if (dot === -1 || isJexl(farPos)) {
+        return undefined;
+    }
+    const own = numberChannelReader(table, 'mateDirection', jexl);
+    const far = numberChannelReader(table, farDirection, jexl);
+    const feet = new Uint8Array(count);
+    let any = false;
+    for (let k = 0; k < count; k++) {
+        const r = rowAt(k);
+        feet[k] = linkFeet(own(r), far(r));
+        any ||= feet[k] !== 0;
+    }
+    return any ? feet : undefined;
+}
 function isShapeName(shape) {
     return shape in SHAPE_CODES;
 }
@@ -439,6 +459,9 @@ export function encodeFeatures(input, encoding, lanes, ctx = {}) {
             x2Ref[k] = ref;
         }
     }
+    const feet = x2Ref && x2Locus
+        ? feetLane(table, x2Locus.pos, count, rowAt, jexl)
+        : undefined;
     const sizeRef = has('size') &&
         sizeEncoding !== undefined &&
         typeof sizeEncoding !== 'number'
@@ -467,6 +490,13 @@ export function encodeFeatures(input, encoding, lanes, ctx = {}) {
         typeof rowEncoding !== 'object') {
         fillNumbers(row, rowSource(table, rowEncoding, jexl), kept, count);
     }
+    const seriesOf = encoding.series;
+    const series = has('series') ? new Uint32Array(count) : undefined;
+    if (series && seriesOf) {
+        for (let k = 0; k < count; k++) {
+            series[k] = seriesOf[rowAt(k)];
+        }
+    }
     const text = has('text') ? new Array(count) : undefined;
     if (text) {
         if (textEncoding === undefined) {
@@ -518,11 +548,11 @@ export function encodeFeatures(input, encoding, lanes, ctx = {}) {
         ? declaredScale
         : undefined;
     const thresholdEncoding = declaredScale?.scale === 'threshold' ? declaredScale : undefined;
-    // Which side of the wire a quantitative colour resolves on is the caller's
+    // Which side of the wire a quantitative color resolves on is the caller's
     // lane choice: a mark that reads the scale itself names `colorValue` and
     // gets the raw values, so a ramp's domain unions over the regions and a
     // threshold's cuts move as uniforms. Anything else names `color` and the
-    // encoder resolves per region. A colour over the field `y` plots is the `y`
+    // encoder resolves per region. A color over the field `y` plots is the `y`
     // lane itself, aliased rather than copied.
     const quantitative = rampEncoding ?? thresholdEncoding;
     const colorReadsY = quantitative !== undefined &&
@@ -581,7 +611,7 @@ export function encodeFeatures(input, encoding, lanes, ctx = {}) {
     else if (scaled && quantitative) {
         // The raw values, where they are kept: a ramp's always, a threshold's
         // where the caller resolves it; the encoder resolves a threshold into
-        // packed colours only for a caller naming `color` alone.
+        // packed colors only for a caller naming `color` alone.
         const values = colorValue ?? (rampEncoding ? new Float32Array(count) : undefined);
         const read = channelReader(table, quantitative.field, jexl);
         if (values && !colorReadsY) {
@@ -689,7 +719,7 @@ export function encodeFeatures(input, encoding, lanes, ctx = {}) {
         encoded.color = color;
     }
     if (colorValue) {
-        // the y view itself where the colour reads y, so a reader can tell
+        // the y view itself where the color reads y, so a reader can tell
         encoded.colorValue = colorValue;
     }
     if (colorKey) {
@@ -698,6 +728,9 @@ export function encodeFeatures(input, encoding, lanes, ctx = {}) {
     if (glyph) {
         encoded.glyph = glyph;
     }
+    if (series) {
+        encoded.series = series;
+    }
     if (text) {
         encoded.text = text;
     }
@@ -708,6 +741,9 @@ export function encodeFeatures(input, encoding, lanes, ctx = {}) {
         encoded.x2Ref = x2Ref;
         encoded.x2RefNames = x2RefNames;
     }
+    if (feet) {
+        encoded.feet = feet;
+    }
     if (sizeScale) {
         encoded.sizeScale = sizeScale;
     }
@@ -756,12 +792,12 @@ function rampScale(rampEncoding, values, count, color, met) {
 }
 /**
  * #api
- * A continuous colour scale over `extent`, the values it met: the domain its
+ * A continuous color scale over `extent`, the values it met: the domain its
  * declared ends and the extent make, the straight table its stops bake to and
- * where its middle stop sits, and the packed colour a value paints through
+ * where its middle stop sits, and the packed color a value paints through
  * them: an infinity the end on its side, as a threshold places it, and NaN,
  * text that is no number, the misconfiguration grey. The encoder and every
- * display painting a ramp itself read it, so a value takes one colour whoever
+ * display painting a ramp itself read it, so a value takes one color whoever
  * paints it.
  */
 export function continuousColorScale(encoding, extent) {
@@ -799,14 +835,14 @@ function keysAreNumeric(entries) {
 // extents passes over.
 /**
  * #api
- * A CSS colour or `jexl:` colour expression as a per-feature packed ABGR —
+ * A CSS color or `jexl:` color expression as a per-feature packed ABGR —
  * the unscaled arm of {@link ColorEncoding}, on its own for a display that
  * carries a plain `color` slot.
  */
 export function colorEvaluator(color, jexl) {
     if (isJexl(color)) {
         const expr = jexlExpression(color, jexl);
-        // A jexl colour answers from a handful of strings over a million
+        // A jexl color answers from a handful of strings over a million
         // features; parsing each answer once is a third of the arm's cost
         // (packages/core/benches/encodeFeatures.bench.ts).
         const packed = new Map();
@@ -847,8 +883,8 @@ export function featureIndexAt(channels, i) {
 }
 /**
  * #api
- * The packed colour instance `i` of `channels` paints: `color[i]`, or `color`
- * itself where the colour is a constant and so shipped as one number.
+ * The packed color instance `i` of `channels` paints: `color[i]`, or `color`
+ * itself where the color is a constant and so shipped as one number.
  */
 export function colorAt(channels, i) {
     const { color } = channels;
@@ -867,12 +903,14 @@ export function encodedChannelTransferables(c) {
         c.featureIndex,
         c.y,
         c.row,
+        c.series,
         typeof c.color === 'number' ? undefined : c.color,
         c.colorValue,
         c.colorKey,
         c.glyph,
         c.size,
         c.x2Ref,
+        c.feet,
     ]) {
         if (lane) {
             buffers.add(lane.buffer);