@genome-spy/core 0.74.0 → 0.75.0

package/dist/src/genomeSpy/interactionController.js

@@ -40,12 +40,11 @@ export default class InteractionController {
     #mouseDownCoords;
     /** @type {Point | undefined} */
     #lastPointerPoint;
-    /** @type {boolean} */
-    #tooltipUpdateRequested;
-    /** @type {number} */
-    #hoverTrackingSuspensionCount;
-    /** @type {boolean} */
-    #postRenderHoverRefreshRequested;
+    #tooltipUpdateRequested = false;
+    #longPressPending = false;
+    #suppressTooltipUntilMouseMove = false;
+    #hoverTrackingSuspensionCount = 0;
+    #postRenderHoverRefreshRequested = false;
     /**
      * @param {object} options
      * @param {import("../view/view.js").default} options.viewRoot
@@ -89,10 +88,6 @@ export default class InteractionController {
         /** @type {Point} */
         this.#mouseDownCoords = undefined;
         this.#lastPointerPoint = undefined;
-
-        this.#tooltipUpdateRequested = false;
-        this.#hoverTrackingSuspensionCount = 0;
-        this.#postRenderHoverRefreshRequested = false;
     }
 
     getCurrentHover() {
@@ -101,6 +96,10 @@ export default class InteractionController {
 
     suspendHoverTracking() {
         this.#hoverTrackingSuspensionCount++;
+        if (this.#longPressPending) {
+            return;
+        }
+
         this.#tooltip.clear();
         this.#tooltipUpdateRequested = false;
     }
@@ -173,7 +172,7 @@ export default class InteractionController {
                 uiEvent
             );
 
-            if (!this.#tooltipUpdateRequested) {
+            if (!this.#tooltipUpdateRequested && !this.#longPressPending) {
                 this.#tooltip.clear();
             }
 
@@ -208,6 +207,7 @@ export default class InteractionController {
                     !wheeling &&
                     this.#hoverTrackingSuspensionCount === 0
                 ) {
+                    this.#suppressTooltipUntilMouseMove = false;
                     this.#tooltip.handleMouseMove(event);
                     this.#tooltipUpdateRequested = false;
 
@@ -343,6 +343,82 @@ export default class InteractionController {
             }
         };
 
+        canvas.addEventListener("mousedown", (/** @type {MouseEvent} */ e) => {
+            this.#mouseDownCoords = Point.fromMouseEvent(e);
+            this.#longPressPending = false;
+            const hasModifier = e.shiftKey || e.ctrlKey || e.metaKey;
+
+            if (this.#tooltip.sticky) {
+                this.#tooltip.sticky = false;
+                this.#suppressTooltipUntilMouseMove = true;
+                this.#tooltip.clear();
+                // Dismiss the sticky tooltip before routing the press so the
+                // click only affects the tooltip state.
+                longPressTriggered = true;
+            } else {
+                longPressTriggered = false;
+            }
+
+            const disableTooltip = () => {
+                document.addEventListener(
+                    "mouseup",
+                    () => this.#tooltip.popEnabledState(),
+                    {
+                        once: true,
+                        capture: true,
+                    }
+                );
+                this.#tooltip.pushEnabledState(false);
+            };
+
+            // Right-click opens the context menu and disables tooltips.
+            // Left-button presses keep the current tooltip visible through the
+            // press; plain clicks may still promote it to sticky mode.
+            if (e.button == 2) {
+                disableTooltip();
+            } else if (e.button == 0 && this.#tooltip.visible) {
+                // Preserve the current tooltip through the press. Plain clicks
+                // may also escalate this state into a sticky tooltip.
+                this.#longPressPending = true;
+
+                /** @type {ReturnType<typeof setTimeout> | undefined} */
+                let timeout;
+                if (!hasModifier) {
+                    // Make tooltip sticky if the user long-presses
+                    timeout = setTimeout(() => {
+                        longPressTriggered = true;
+                        this.#longPressPending = false;
+                        this.#tooltip.sticky = true;
+                    }, 400);
+                }
+
+                /**
+                 * @param {boolean} clearTooltipOnMove
+                 */
+                const clear = (clearTooltipOnMove) => {
+                    clearTimeout(timeout);
+                    if (!this.#longPressPending) {
+                        return;
+                    }
+
+                    this.#longPressPending = false;
+                    if (
+                        clearTooltipOnMove &&
+                        this.#hoverTrackingSuspensionCount > 0
+                    ) {
+                        this.#tooltip.clear();
+                        this.#tooltipUpdateRequested = false;
+                    }
+                };
+                document.addEventListener("mouseup", () => clear(false), {
+                    once: true,
+                });
+                document.addEventListener("mousemove", () => clear(true), {
+                    once: true,
+                });
+            }
+        });
+
         [
             "mousedown",
             "mouseup",
@@ -511,46 +587,6 @@ export default class InteractionController {
             passive: false,
         });
 
-        canvas.addEventListener("mousedown", (/** @type {MouseEvent} */ e) => {
-            this.#mouseDownCoords = Point.fromMouseEvent(e);
-            if (this.#tooltip.sticky) {
-                this.#tooltip.sticky = false;
-                this.#tooltip.clear();
-                // A hack to prevent selection if the tooltip is sticky.
-                // Let the tooltip be destickified first.
-                longPressTriggered = true;
-            } else {
-                longPressTriggered = false;
-            }
-
-            const disableTooltip = () => {
-                document.addEventListener(
-                    "mouseup",
-                    () => this.#tooltip.popEnabledState(),
-                    {
-                        once: true,
-                        capture: true,
-                    }
-                );
-                this.#tooltip.pushEnabledState(false);
-            };
-
-            // Opening context menu or using modifier keys disables the tooltip
-            if (e.button == 2 || e.shiftKey || e.ctrlKey || e.metaKey) {
-                disableTooltip();
-            } else if (this.#tooltip.visible) {
-                // Make tooltip sticky if the user long-presses
-                const timeout = setTimeout(() => {
-                    longPressTriggered = true;
-                    this.#tooltip.sticky = true;
-                }, 400);
-
-                const clear = () => clearTimeout(timeout);
-                document.addEventListener("mouseup", clear, { once: true });
-                document.addEventListener("mousemove", clear, { once: true });
-            }
-        });
-
         // Prevent text selections etc while dragging
         canvas.addEventListener("dragstart", (event) =>
             event.stopPropagation()
@@ -742,6 +778,10 @@ export default class InteractionController {
      * @template T
      */
     updateTooltip(datum, converter) {
+        if (this.#suppressTooltipUntilMouseMove) {
+            return;
+        }
+
         if (!this.#tooltipUpdateRequested || !datum) {
             this.#tooltip.updateWithDatum(datum, converter);
             this.#tooltipUpdateRequested = true;

package/dist/src/gl/dataToVertices.d.ts

@@ -25,6 +25,13 @@ export class GeometryBuilder {
     variableEncoders: Record<import("../spec/channel.js").Channel, import("../types/encoder.js").Encoder>;
     allocatedVertices: number;
     variableBuilder: ArrayBuilder;
+    /** @type {Partial<Record<import("../spec/channel.js").Channel, string>>} */
+    attributeNames: Partial<Record<import("../spec/channel.js").Channel, string>>;
+    xIndexConfig: {
+        domain: [number, number];
+        xAttributeName: string;
+        x2AttributeName: string;
+    };
     lastOffset: number;
     /** @type {Map<any, RangeEntry>} keep track of facet locations within the vertex array */
     rangeMap: Map<any, RangeEntry>;
@@ -44,22 +51,13 @@ export class GeometryBuilder {
      */
     addBatch(key: any, data: object[], lo?: number, hi?: number): void;
     /**
-     * @param {import("../data/flowNode.js").Data} data Domain, but specified using datums
-     * @param {number} [lo]
-     * @param {number} [hi]
-     */
-    prepareXIndexer(data: import("../data/flowNode.js").Data, lo?: number, hi?: number): void;
-    /**
-     * Add the datum to an index, which allows for efficient rendering of ranges
-     * on the x axis. Must be called after a datum has been pushed to the ArrayBuilder.
+     * Builds the x-domain lookup for the current batch if x indexing is enabled.
      *
-     * @param {import("../data/flowNode.js").Datum} datum
+     * @param {number} startVertexIndex
+     * @param {number} endVertexIndex
+     * @returns {import("../utils/binnedIndex.js").Lookup | undefined}
      */
-    addToXIndex(datum: import("../data/flowNode.js").Datum): void;
-    xIndexer: {
-        (datum: import("../data/flowNode.js").Datum, startVertexIndex: number, endVertexIndex: number): void;
-        getIndex: () => import("../utils/binnedIndex.js").Lookup;
-    };
+    createXIndex(startVertexIndex: number, endVertexIndex: number): import("../utils/binnedIndex.js").Lookup | undefined;
     toArrays(): {
         /** @type {Record<string, {data: Uint16Array | Int16Array | Uint32Array | Int32Array | Float32Array, numComponents: number, divisor?: number}>} */
         arrays: Record<string, {

package/dist/src/gl/dataToVertices.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dataToVertices.d.ts","sourceRoot":"","sources":["../../../src/gl/dataToVertices.js"],"names":[],"mappings":"AAgBA;;;;;GAKG;AACH;IACI;;;OAGG;IAEH;;;;;;OAMG;IACH,mDALG;QAAsE,QAAQ,EAAtE,MAAM,CAAC,OAAO,oBAAoB,EAAE,OAAO,wCAAU;QACnC,UAAU,GAA5B,MAAM,EAAE;QACQ,WAAW,GAA3B,MAAM;KAEhB,EAiGA;IA/FG,8FAAwB;IAIxB,sGAQK;IAQL,0BAAoC;IAEpC,8BAAoD;IAqEpD,mBAAmB;IAEnB,yFAAyF;IACzF,UADW,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CACkB;IAGrD;;;;OAIG;IACH,mBAFW,GAAG,QAcb;IAED;;OAEG;IACH,oBAFW,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,QAM5B;IAED;;;OAGG;IACH,cAHW,GAAG,QACH,MAAM,EAAE,kCAYlB;IAED;;;;OAIG;IACH,sBAJW,OAAO,qBAAqB,EAAE,IAAI,OAClC,MAAM,OACN,MAAM,QAsEhB;IAED;;;;;OAKG;IACH,mBAFW,OAAO,qBAAqB,EAAE,KAAK,QAI7C;IAtEO;;;MAAyB;IAwEjC;QAEQ,kJAAkJ;gBAAvI,MAAM,CAAC,MAAM,EAAE;YAAC,IAAI,EAAE,WAAW,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;YAAC,aAAa,EAAE,MAAM,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,CAAA;SAAC,CAAC;QAE9I,8BAA8B;;QAE9B,8CAA8C;;;MAIrD;CACJ;AAED;IACI;;;;;;OAMG;IACH,gDAJG;QAAwC,QAAQ,EAAxC,MAAM,CAAC,MAAM,wCAAU;QACN,UAAU,EAA3B,MAAM,EAAE;QACQ,QAAQ,GAAxB,MAAM;KAChB,EA8BA;IAnBG,qBAkBW;CA8BlB;AAED;IACI;;;;;;;;;OASG;IACH,sFAPG;QAAwC,QAAQ,EAAxC,MAAM,CAAC,MAAM,wCAAU;QACN,UAAU,EAA3B,MAAM,EAAE;QACQ,qBAAqB,GAArC,MAAM;QAEY,YAAY,GAA9B,MAAM,EAAE;QACQ,QAAQ,GAAxB,MAAM;KAChB,EAuBA;IARG,uBAAgC;IAEhC,8BAA8D;IAE9D,6CAA+D;IAC/D,4CAA6D;CA4CpE;AAED;IACI;;;;;;OAMG;IACH,gDAJG;QAAwC,QAAQ,EAAxC,MAAM,CAAC,MAAM,wCAAU;QACN,UAAU,EAA3B,MAAM,EAAE;QACQ,QAAQ,GAAxB,MAAM;KAChB,EAQA;CACJ;AAED;IACI;;;;;OAKG;IACH,gDAJG;QAAwC,QAAQ,EAAxC,MAAM,CAAC,MAAM,wCAAU;QACN,UAAU,EAA3B,MAAM,EAAE;QACQ,QAAQ,GAAxB,MAAM;KAChB,EAQA;CAYJ;AAED;IACI;;;;;;;;;OASG;IACH,+EAPG;QAAwC,QAAQ,EAAxC,MAAM,CAAC,MAAM,wCAAU;QACN,UAAU,EAA3B,MAAM,EAAE;QACkD,WAAW,EAArE,OAAO,2BAA2B,EAAE,aAAa;QACrB,UAAU,EAAtC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;QACH,aAAa,GAA7B,MAAM;QACW,WAAW,GAA5B,OAAO;KAAsB,EA6CvC;IA9BG,4DAA2B;IAC3B,2DAA0B;IAE1B,gCAA4B;IAO5B,qCAAqC;IACrC,cADW,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAMf;IAElB,oDAGC;IACD,qDAGC;IAED,8CAAiE;CAgJxE;;;;;;;;YAloBS,MAAM;;;;WACN,MAAM;YACN,OAAO,yBAAyB,EAAE,MAAM;;yBAjBzB,mBAAmB"}
+{"version":3,"file":"dataToVertices.d.ts","sourceRoot":"","sources":["../../../src/gl/dataToVertices.js"],"names":[],"mappings":"AAiBA;;;;;GAKG;AACH;IACI;;;OAGG;IAEH;;;;;;OAMG;IACH,mDALG;QAAsE,QAAQ,EAAtE,MAAM,CAAC,OAAO,oBAAoB,EAAE,OAAO,wCAAU;QACnC,UAAU,GAA5B,MAAM,EAAE;QACQ,WAAW,GAA3B,MAAM;KAEhB,EA0IA;IAxIG,8FAAwB;IAIxB,sGAQK;IAQL,0BAAoC;IAEpC,8BAAoD;IACpD,4EAA4E;IAC5E,gBADW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAChD;IAgGpB;gBACuB,CAAC,MAAM,EAAE,MAAM,CAAC;;;MAMtC;IAKL,mBAAmB;IAEnB,yFAAyF;IACzF,UADW,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CACkB;IAGrD;;;;OAIG;IACH,mBAFW,GAAG,QAcb;IAED;;OAEG;IACH,oBAFW,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,CAAC,QAM5B;IAED;;;OAGG;IACH,cAHW,GAAG,QACH,MAAM,EAAE,kCASlB;IAED;;;;;;OAMG;IACH,+BAJW,MAAM,kBACN,MAAM,GACJ,OAAO,yBAAyB,EAAE,MAAM,GAAG,SAAS,CA2ChE;IAED;QAEQ,kJAAkJ;gBAAvI,MAAM,CAAC,MAAM,EAAE;YAAC,IAAI,EAAE,WAAW,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;YAAC,aAAa,EAAE,MAAM,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,CAAA;SAAC,CAAC;QAE9I,8BAA8B;;QAE9B,8CAA8C;;;MAIrD;CACJ;AAED;IACI;;;;;;OAMG;IACH,gDAJG;QAAwC,QAAQ,EAAxC,MAAM,CAAC,MAAM,wCAAU;QACN,UAAU,EAA3B,MAAM,EAAE;QACQ,QAAQ,GAAxB,MAAM;KAChB,EA8BA;IAnBG,qBAkBW;CA0BlB;AAED;IACI;;;;;;;;;OASG;IACH,sFAPG;QAAwC,QAAQ,EAAxC,MAAM,CAAC,MAAM,wCAAU;QACN,UAAU,EAA3B,MAAM,EAAE;QACQ,qBAAqB,GAArC,MAAM;QAEY,YAAY,GAA9B,MAAM,EAAE;QACQ,QAAQ,GAAxB,MAAM;KAChB,EAuBA;IARG,uBAAgC;IAEhC,8BAA8D;IAE9D,6CAA+D;IAC/D,4CAA6D;CAyCpE;AAED;IACI;;;;;;OAMG;IACH,gDAJG;QAAwC,QAAQ,EAAxC,MAAM,CAAC,MAAM,wCAAU;QACN,UAAU,EAA3B,MAAM,EAAE;QACQ,QAAQ,GAAxB,MAAM;KAChB,EAQA;CAeJ;AAED;IACI;;;;;OAKG;IACH,gDAJG;QAAwC,QAAQ,EAAxC,MAAM,CAAC,MAAM,wCAAU;QACN,UAAU,EAA3B,MAAM,EAAE;QACQ,QAAQ,GAAxB,MAAM;KAChB,EAQA;CA0BJ;AAED;IACI;;;;;;;;;OASG;IACH,+EAPG;QAAwC,QAAQ,EAAxC,MAAM,CAAC,MAAM,wCAAU;QACN,UAAU,EAA3B,MAAM,EAAE;QACkD,WAAW,EAArE,OAAO,2BAA2B,EAAE,aAAa;QACrB,UAAU,EAAtC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;QACH,aAAa,GAA7B,MAAM;QACW,WAAW,GAA5B,OAAO;KAAsB,EA6CvC;IA9BG,4DAA2B;IAC3B,2DAA0B;IAE1B,gCAA4B;IAO5B,qCAAqC;IACrC,cADW,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,CAMf;IAElB,oDAGC;IACD,qDAGC;IAED,8CAAiE;CA4IxE;;;;;;;;YAtpBS,MAAM;;;;WACN,MAAM;YACN,OAAO,yBAAyB,EAAE,MAAM;;yBAlBzB,mBAAmB"}

package/dist/src/gl/dataToVertices.js

@@ -3,9 +3,9 @@ import { format } from "d3-format";
 import { isString } from "vega-util";
 import ArrayBuilder from "./arrayBuilder.js";
 import { SDF_PADDING } from "../fonts/bmFontMetrics.js";
-import { createBinningRangeIndexer } from "../utils/binnedIndex.js";
 import { getEncoderDataAccessor, isValueDef } from "../encoder/encoder.js";
 import {
+    HIGH_PRECISION_SPLIT_BASE,
     dedupeEncodingFields,
     getAttributeAndArrayTypes,
     makeAttributeName,
@@ -13,6 +13,7 @@ import {
 } from "./glslScaleGenerator.js";
 import { isContinuous } from "vega-scale";
 import createIndexer from "../utils/indexer.js";
+import { createVertexRangeIndexer } from "./vertexRangeIndex.js";
 
 /**
  * @typedef {object} RangeEntry Represents a location of a vertex subset
@@ -57,6 +58,8 @@ export class GeometryBuilder {
         this.allocatedVertices = numVertices;
 
         this.variableBuilder = new ArrayBuilder(numVertices);
+        /** @type {Partial<Record<import("../spec/channel.js").Channel, string>>} */
+        this.attributeNames = {};
 
         // Create converters and updaters for all variable channels.
         for (const [channel, ce] of Object.entries(this.variableEncoders)) {
@@ -71,9 +74,6 @@ export class GeometryBuilder {
             const sharedChannels = dedupedEncodingFields.find((channels) =>
                 channels.find((c) => c == channel)
             );
-            if (sharedChannels && channel != sharedChannels[0]) {
-                continue;
-            }
 
             const numberAccessor = accessor.asNumberAccessor();
             const scale = ce.scale;
@@ -116,6 +116,13 @@ export class GeometryBuilder {
                   : numberAccessor;
 
             const attributeName = makeAttributeName(sharedChannels ?? channel);
+            for (const sharedChannel of sharedChannels ?? [channel]) {
+                this.attributeNames[sharedChannel] = attributeName;
+            }
+
+            if (sharedChannels && channel != sharedChannels[0]) {
+                continue;
+            }
 
             this.variableBuilder.addConverter(attributeName, {
                 f,
@@ -125,6 +132,41 @@ export class GeometryBuilder {
             });
         }
 
+        const xEncoder = this.variableEncoders.x;
+        const x2Encoder = this.variableEncoders.x2;
+        const xChannelDef =
+            /** @type {import("../spec/channel.js").Encoding["x"] | undefined} */ (
+                this.encoders.x?.channelDef
+            );
+        const xScale = xEncoder?.scale;
+        if (
+            xChannelDef?.buildIndex &&
+            xEncoder &&
+            xScale &&
+            isContinuous(xScale.type)
+        ) {
+            const xAttributeName = this.attributeNames.x;
+            if (!xAttributeName) {
+                throw new Error("Missing x attribute for x indexing.");
+            }
+
+            const x2AttributeName =
+                x2Encoder?.scale && isContinuous(x2Encoder.scale.type)
+                    ? (this.attributeNames.x2 ?? xAttributeName)
+                    : xAttributeName;
+
+            this.xIndexConfig = {
+                domain: /** @type {[number, number]} */ ([
+                    xScale.domain()[0],
+                    xScale.domain()[1],
+                ]),
+                xAttributeName,
+                x2AttributeName,
+            };
+        } else {
+            this.xIndexConfig = undefined;
+        }
+
         this.lastOffset = 0;
 
         /** @type {Map<any, RangeEntry>} keep track of facet locations within the vertex array */
@@ -144,7 +186,7 @@ export class GeometryBuilder {
             this.rangeMap.set(key, {
                 offset,
                 count: size,
-                xIndex: this.xIndexer?.getIndex(),
+                xIndex: this.createXIndex(offset, index),
             });
         }
         this.lastOffset = index;
@@ -164,100 +206,62 @@ export class GeometryBuilder {
      * @param {object[]} data
      */
     addBatch(key, data, lo = 0, hi = data.length) {
-        this.prepareXIndexer(data, lo, hi);
-
         for (let i = lo; i < hi; i++) {
             const d = data[i];
             this.variableBuilder.pushFromDatum(d);
-            this.addToXIndex(d);
         }
 
         this.registerBatch(key);
     }
 
     /**
-     * @param {import("../data/flowNode.js").Data} data Domain, but specified using datums
-     * @param {number} [lo]
-     * @param {number} [hi]
+     * Builds the x-domain lookup for the current batch if x indexing is enabled.
+     *
+     * @param {number} startVertexIndex
+     * @param {number} endVertexIndex
+     * @returns {import("../utils/binnedIndex.js").Lookup | undefined}
      */
-    prepareXIndexer(data, lo = 0, hi = lo + data.length) {
-        const disable = () => {
-            /**
-             * @param {import("../data/flowNode.js").Datum} datum
-             */
-            this.addToXIndex = (datum) => {
-                // nop
-            };
-            this.xIndexer = undefined;
-        };
-
-        const channelDef = this.encoders.x?.channelDef;
-        if (
-            !("buildIndex" in channelDef) ||
-            !channelDef.buildIndex ||
-            !data.length ||
-            hi - lo < 0
-        ) {
-            disable();
-            return;
+    createXIndex(startVertexIndex, endVertexIndex) {
+        const config = this.xIndexConfig;
+        if (!config) {
+            return undefined;
         }
 
-        /** @param {Encoder} encoder */
-        const getContinuousEncoder = (encoder) =>
-            encoder && isContinuous(encoder.scale?.type) && encoder;
-
-        const xe = getContinuousEncoder(this.variableEncoders.x);
-        const x2e = getContinuousEncoder(this.variableEncoders.x2);
-
-        // Only index variable data
-        if (xe && !xe.constant && (!x2e || !x2e.constant)) {
-            const xa = getEncoderDataAccessor(xe)?.asNumberAccessor();
-            const x2a = x2e
-                ? getEncoderDataAccessor(x2e)?.asNumberAccessor()
-                : xa;
-            if (!xa || !x2a) {
-                disable();
-                return;
-            }
-
-            /** @type {[number, number]} */
-            const dataDomain = [xa(data[lo]), x2a(data[hi - 1])];
-
-            // No indexer for point domains that have zero extent
-            if (dataDomain[1] > dataDomain[0]) {
-                this.xIndexer = createBinningRangeIndexer(
-                    50,
-                    dataDomain,
-                    xa,
-                    x2a
-                );
-
-                let lastVertexCount = this.variableBuilder.vertexCount;
-
-                /**
-                 * @param {any} datum
-                 */
-                this.addToXIndex = (datum) => {
-                    let currentVertexCount = this.variableBuilder.vertexCount;
-                    this.xIndexer(datum, lastVertexCount, currentVertexCount);
-                    lastVertexCount = currentVertexCount;
+        /**
+         * @param {string} attributeName
+         */
+        const createReader = (attributeName) => {
+            const attribute = this.variableBuilder.arrays[attributeName];
+            const { data, numComponents } = attribute;
+
+            if (numComponents == 2) {
+                /** @type {(vertexIndex: number) => number} */
+                return (vertexIndex) => {
+                    const base = vertexIndex * numComponents;
+                    return (
+                        data[base] * HIGH_PRECISION_SPLIT_BASE + data[base + 1]
+                    );
                 };
-            } else {
-                disable();
             }
-        } else {
-            disable();
-        }
-    }
 
-    /**
-     * Add the datum to an index, which allows for efficient rendering of ranges
-     * on the x axis. Must be called after a datum has been pushed to the ArrayBuilder.
-     *
-     * @param {import("../data/flowNode.js").Datum} datum
-     */
-    addToXIndex(datum) {
-        //
+            /** @type {(vertexIndex: number) => number} */
+            return (vertexIndex) => data[vertexIndex * numComponents];
+        };
+
+        const xReader = createReader(config.xAttributeName);
+        const x2Reader =
+            config.x2AttributeName == config.xAttributeName
+                ? xReader
+                : createReader(config.x2AttributeName);
+
+        return createVertexRangeIndexer(
+            50,
+            config.domain,
+            xReader,
+            x2Reader,
+            startVertexIndex,
+            endVertexIndex
+        );
     }
 
     toArrays() {
@@ -322,8 +326,6 @@ export class RectVertexBuilder extends GeometryBuilder {
             return;
         }
 
-        this.prepareXIndexer(data, lo, hi);
-
         for (let i = lo; i < hi; i++) {
             const d = data[i];
 
@@ -333,8 +335,6 @@ export class RectVertexBuilder extends GeometryBuilder {
             // Six vertices per rect. The vertex shader is using gl_VertexID to
             // determine the vertex position within the rect.
             this.pushAllSixTimes();
-
-            this.addToXIndex(d);
         }
 
         this.registerBatch(key);
@@ -384,8 +384,6 @@ export class RuleVertexBuilder extends GeometryBuilder {
     addBatch(key, data, lo = 0, hi = data.length) {
         //const [lower, upper] = this.visibleRange; // TODO
 
-        this.prepareXIndexer(data, lo, hi);
-
         for (let i = lo; i < hi; i++) {
             const d = data[i];
 
@@ -410,7 +408,6 @@ export class RuleVertexBuilder extends GeometryBuilder {
 
             // Duplicate the last vertex to produce a degenerate triangle between the rules
             this.variableBuilder.pushAll();
-            this.addToXIndex(d);
         }
 
         this.registerBatch(key);
@@ -433,6 +430,20 @@ export class PointVertexBuilder extends GeometryBuilder {
         });
         this.variableBuilder.configure();
     }
+
+    /**
+     *
+     * @param {any} key
+     * @param {object[]} data
+     */
+    addBatch(key, data, lo = 0, hi = data.length) {
+        for (let i = lo; i < hi; i++) {
+            const d = data[i];
+            this.variableBuilder.pushFromDatum(d);
+        }
+
+        this.registerBatch(key);
+    }
 }
 
 export class LinkVertexBuilder extends GeometryBuilder {
@@ -451,6 +462,20 @@ export class LinkVertexBuilder extends GeometryBuilder {
         this.variableBuilder.configure();
     }
 
+    /**
+     *
+     * @param {any} key
+     * @param {object[]} data
+     */
+    addBatch(key, data, lo = 0, hi = data.length) {
+        for (let i = lo; i < hi; i++) {
+            const d = data[i];
+            this.variableBuilder.pushFromDatum(d);
+        }
+
+        this.registerBatch(key);
+    }
+
     toArrays() {
         const arrays = this.variableBuilder.arrays;
 
@@ -553,8 +578,6 @@ export class TextVertexBuilder extends GeometryBuilder {
         const textureCoord = [0, 0];
         this.updateTextureCoord(textureCoord);
 
-        this.prepareXIndexer(data, lo, hi);
-
         for (let i = lo; i < hi; i++) {
             const d = data[i];
 
@@ -652,8 +675,6 @@ export class TextVertexBuilder extends GeometryBuilder {
 
                 x += advance;
             }
-
-            this.addToXIndex(d);
         }
 
         this.registerBatch(key);

package/dist/src/gl/glslScaleGenerator.d.ts

@@ -141,6 +141,9 @@ export const SCALED_FUNCTION_PREFIX: "getScaled_";
 export const RANGE_TEXTURE_PREFIX: "uRangeTexture_";
 export const PARAM_PREFIX: "uParam_";
 export const SELECTION_CHECKER_PREFIX: "checkSelection_";
+export const HIGH_PRECISION_SPLIT_BITS: 12;
+export const HIGH_PRECISION_SPLIT_BASE: number;
+export const HIGH_PRECISION_SPLIT_MASK: number;
 export function getRangeForGlsl(scale: any, channel: Channel): number[];
 export type Channel = import("../spec/channel.js").Channel;
 export type AccessorParts = {

package/dist/src/gl/glslScaleGenerator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"glslScaleGenerator.d.ts","sourceRoot":"","sources":["../../../src/gl/glslScaleGenerator.js"],"names":[],"mappings":"AAsDA;;;;;GAKG;AACH,kDAJW,OAAO,mBACP,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;;;;;;GAUG;AAEH;;;;;;;GAOG;AACH,mDALW,OAAO,mBACP,MAAM,SACN,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,OAAO,GAClC,aAAa,CA4CzB;AAED;;;;;;;GAOG;AACH,4DAJW,OAAO,mBACP,MAAM,GACJ,aAAa,CAkCzB;AAED;;;;;;GAMG;AACH,0CANW,OAAO,SACP,GAAG,mBACH,MAAM,+BACN,OAAO,EAAE,GACP,aAAa,CA8BzB;AACD;;;;;GAKG;AACH,qDALW,OAAO,SACP,GAAG,mBACH,MAAM,GACJ,aAAa,CAyBzB;AAED;;;;;GAKG;AACH,2CAJW,OAAO,SACP,GAAG,cACH,OAAO,oBAAoB,EAAE,UAAU;;;;;;EAsQjD;AAED;;;;GAIG;AACH,wDAHW,OAAO,YACP,OAAO,qBAAqB,EAAE,cAAc,EAAE,UA+BxD;AAmED;;GAEG;AACH,qDAFW,OAAO,6BAQjB;AAuCD;;;;GAIG;AACH,iDAHW,OAAO,qBAAqB,EAAE,SAAS,WACvC,OAAO,oBAAoB,EAAE,OAAO;mBAQjB,MAAM;sBAAoB,sBAAsB,GAAG,sBAAsB,GAAG,uBAAuB;;;;;;EAkBhI;AAED;;;;GAIG;AACH,2CAFW,MAAM,6BAIhB;AAED;;;;GAIG;AACH,sCAFW,MAAM,EAAE,WAIlB;AAMD;;;GAGG;AACH,sCAHW,MAAM,QACN,MAAM,EAAE,YAYlB;AAED;;;GAGG;AACH,2CAHW,MAAM,QACN,MAAM,EAAE,YAUlB;AAYD;;GAEG;AACH,qDAFW,MAAM,EAAE,YAIlB;AAED;;GAEG;AAEH;;;;;GAKG;AACH,+CAFW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,qBAAqB,EAAE,OAAO,CAAC,CAAC,+DA4BtG;AAED;;GAEG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,GAAG,OAAO,oBAAoB,EAAE,OAAO,EAAE,UAIvF;AAwBD;;;;GAIG;AACH,uCAJW,MAAM,EAAE,cACR,MAAM,EAAE,GACN,MAAM,CAgClB;AAn0BD,+BAAgC,OAAO,CAAC;AACxC,4BAA6B,UAAU,CAAC;AACxC,2BAA4B,QAAQ,CAAC;AACrC,uCAAwC,WAAW,CAAC;AACpD,oCAAqC,QAAQ,CAAC;AAC9C,qCAAsC,YAAY,CAAC;AACnD,mCAAoC,gBAAgB,CAAC;AACrD,2BAA4B,SAAS,CAAC;AACtC,uCAAwC,iBAAiB,CAAC;AAgxBnD,uCAJI,GAAG,WACH,OAAO,GACL,MAAM,EAAE,CAQA;sBAhxBR,OAAO,oBAAoB,EAAE,OAAO;;aA+BvC,OAAO;kBACP,MAAM;0BACN,MAAM;oBACN,MAAM;oBACN,MAAM;kBACN,MAAM;kBACN,MAAM;eACN,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG;;;;;8BAkfZ,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE;;;;uBAwLhD,CAAC,MAAM,EAAE,OAAO,CAAC;0BAnuBJ,WAAW"}
+{"version":3,"file":"glslScaleGenerator.d.ts","sourceRoot":"","sources":["../../../src/gl/glslScaleGenerator.js"],"names":[],"mappings":"AAsDA;;;;;GAKG;AACH,kDAJW,OAAO,mBACP,MAAM,GACJ,MAAM,CAIlB;AAED;;;;;;;;;;GAUG;AAEH;;;;;;;GAOG;AACH,mDALW,OAAO,mBACP,MAAM,SACN,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,OAAO,GAClC,aAAa,CA4CzB;AAED;;;;;;;GAOG;AACH,4DAJW,OAAO,mBACP,MAAM,GACJ,aAAa,CAkCzB;AAED;;;;;;GAMG;AACH,0CANW,OAAO,SACP,GAAG,mBACH,MAAM,+BACN,OAAO,EAAE,GACP,aAAa,CA8BzB;AACD;;;;;GAKG;AACH,qDALW,OAAO,SACP,GAAG,mBACH,MAAM,GACJ,aAAa,CAyBzB;AAED;;;;;GAKG;AACH,2CAJW,OAAO,SACP,GAAG,cACH,OAAO,oBAAoB,EAAE,UAAU;;;;;;EAsQjD;AAED;;;;GAIG;AACH,wDAHW,OAAO,YACP,OAAO,qBAAqB,EAAE,cAAc,EAAE,UA+BxD;AAmED;;GAEG;AACH,qDAFW,OAAO,6BAQjB;AAuCD;;;;GAIG;AACH,iDAHW,OAAO,qBAAqB,EAAE,SAAS,WACvC,OAAO,oBAAoB,EAAE,OAAO;mBAQjB,MAAM;sBAAoB,sBAAsB,GAAG,sBAAsB,GAAG,uBAAuB;;;;;;EAoBhI;AAED;;;;GAIG;AACH,2CAFW,MAAM,6BAIhB;AAED;;;;GAIG;AACH,sCAFW,MAAM,EAAE,WAIlB;AAMD;;;GAGG;AACH,sCAHW,MAAM,QACN,MAAM,EAAE,YAYlB;AAED;;;GAGG;AACH,2CAHW,MAAM,QACN,MAAM,EAAE,YAUlB;AAYD;;GAEG;AACH,qDAFW,MAAM,EAAE,YAIlB;AAED;;GAEG;AAEH;;;;;GAKG;AACH,+CAFW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,qBAAqB,EAAE,OAAO,CAAC,CAAC,+DA4BtG;AAED;;GAEG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,GAAG,OAAO,oBAAoB,EAAE,OAAO,EAAE,UAIvF;AAwBD;;;;GAIG;AACH,uCAJW,MAAM,EAAE,cACR,MAAM,EAAE,GACN,MAAM,CAgClB;AAr0BD,+BAAgC,OAAO,CAAC;AACxC,4BAA6B,UAAU,CAAC;AACxC,2BAA4B,QAAQ,CAAC;AACrC,uCAAwC,WAAW,CAAC;AACpD,oCAAqC,QAAQ,CAAC;AAC9C,qCAAsC,YAAY,CAAC;AACnD,mCAAoC,gBAAgB,CAAC;AACrD,2BAA4B,SAAS,CAAC;AACtC,uCAAwC,iBAAiB,CAAC;AAoqB1D,wCAAyC,EAAE,CAAC;AAC5C,+CAAwE;AACxE,+CAAuE;AA4GhE,uCAJI,GAAG,WACH,OAAO,GACL,MAAM,EAAE,CAQA;sBAlxBR,OAAO,oBAAoB,EAAE,OAAO;;aA+BvC,OAAO;kBACP,MAAM;0BACN,MAAM;oBACN,MAAM;oBACN,MAAM;kBACN,MAAM;kBACN,MAAM;eACN,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG;;;;;8BAkfZ,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE;;;;uBA0LhD,CAAC,MAAM,EAAE,OAAO,CAAC;0BAruBJ,WAAW"}

package/dist/src/gl/glslScaleGenerator.js

@@ -676,7 +676,9 @@ export function getAttributeAndArrayTypes(scale, channel) {
               : { attributeType: "float", arrayConstructor: Float32Array };
 
     return Object.assign(props, {
-        numComponents: +(props.attributeType.match(/^vec([234])$/)?.[1] ?? 1),
+        numComponents: +(
+            props.attributeType.match(/^(?:u)?vec([234])$/)?.[1] ?? 1
+        ),
         discrete,
         hp,
         largeHp,
@@ -701,9 +703,9 @@ export function isLargeGenome(domain) {
     return domain[1] > 2 ** 32;
 }
 
-const LOW_BITS = 12;
-const BS = 2 ** LOW_BITS;
-const BM = BS - 1;
+export const HIGH_PRECISION_SPLIT_BITS = 12;
+export const HIGH_PRECISION_SPLIT_BASE = 2 ** HIGH_PRECISION_SPLIT_BITS;
+export const HIGH_PRECISION_SPLIT_MASK = HIGH_PRECISION_SPLIT_BASE - 1;
 
 /**
  * @param {number} x Must be an integer
@@ -712,7 +714,7 @@ const BM = BS - 1;
 export function splitHighPrecision(x, arr = []) {
     // Using a bitmask is MUCH faster than using modulo (at least on Chrome 112)
     // https://www.wikiwand.com/en/Modulo#Performance_issues
-    const lo = x & BM;
+    const lo = x & HIGH_PRECISION_SPLIT_MASK;
     const hi = x - lo;
 
     arr[0] = hi;
@@ -726,8 +728,8 @@ export function splitHighPrecision(x, arr = []) {
  * @param {number[]} [arr]
  */
 export function splitLargeHighPrecision(x, arr = []) {
-    const lo = x % BS;
-    const hi = (x - lo) / BS;
+    const lo = x % HIGH_PRECISION_SPLIT_BASE;
+    const hi = (x - lo) / HIGH_PRECISION_SPLIT_BASE;
 
     arr[0] = hi;
     arr[1] = lo;
@@ -739,7 +741,7 @@ export function splitLargeHighPrecision(x, arr = []) {
  * @param {number} x
  */
 function exactSplitHighPrecision(x) {
-    const lo = x % BS;
+    const lo = x % HIGH_PRECISION_SPLIT_BASE;
     const hi = x - lo;
 
     return [hi, lo];