@genome-spy/core 0.20.0 → 0.21.0

package/src/marks/rule.js

@@ -139,6 +139,20 @@ export default class RuleMark extends Mark {
         this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER);
     }
 
+    finalizeGraphicsInitialization() {
+        super.finalizeGraphicsInitialization();
+
+        this.gl.useProgram(this.programInfo.program);
+
+        const props = this.properties;
+
+        setUniforms(this.programInfo, {
+            uMinLength: props.minLength,
+            uDashTextureSize: this.dashTextureSize,
+            uStrokeCap: ["butt", "square", "round"].indexOf(props.strokeCap),
+        });
+    }
+
     updateGraphicsData() {
         const collector = this.unitView.getCollector();
         const itemCount = collector.getItemCount();
@@ -147,13 +161,12 @@ export default class RuleMark extends Mark {
             encoders: this.encoders,
             attributes: this.getAttributes(),
             numItems: Math.max(itemCount, this.properties.minBufferSize || 0),
-            buildXIndex: this.properties.buildIndex,
         });
 
         builder.addBatches(collector.facetBatches);
 
         const vertexData = builder.toArrays();
-        this.rangeMap = vertexData.rangeMap;
+        this.rangeMap.migrateEntries(vertexData.rangeMap);
 
         this.updateBufferInfo(vertexData);
     }
@@ -162,28 +175,26 @@ export default class RuleMark extends Mark {
      * @param {import("../view/rendering").GlobalRenderingOptions} options
      */
     prepareRender(options) {
-        super.prepareRender(options);
-
-        setUniforms(this.programInfo, {
-            uMinLength: this.properties.minLength,
-            uDashTextureSize: this.dashTextureSize,
-            uStrokeCap: ["butt", "square", "round"].indexOf(
-                this.properties.strokeCap
-            ),
-        });
+        const ops = super.prepareRender(options);
 
         if (this.dashTexture) {
-            setUniforms(this.programInfo, {
-                uDashTexture: this.dashTexture,
-                uStrokeDashOffset: this.properties.strokeDashOffset,
-            });
+            ops.push(() =>
+                setUniforms(this.programInfo, {
+                    uDashTexture: this.dashTexture,
+                    uStrokeDashOffset: this.properties.strokeDashOffset,
+                })
+            );
         }
 
-        setBuffersAndAttributes(
-            this.gl,
-            this.programInfo,
-            this.vertexArrayInfo
+        ops.push(() =>
+            setBuffersAndAttributes(
+                this.gl,
+                this.programInfo,
+                this.vertexArrayInfo
+            )
         );
+
+        return ops;
     }
 
     /**
@@ -201,8 +212,7 @@ export default class RuleMark extends Mark {
                     count,
                     offset
                 ),
-            options,
-            () => this.rangeMap
+            options
         );
     }
 }

package/src/marks/text.js

@@ -214,13 +214,12 @@ export default class TextMark extends Mark {
                 charCount,
                 this.properties.minBufferSize || 0
             ),
-            buildXIndex: this.properties.buildIndex,
         });
 
         builder.addBatches(collector.facetBatches);
 
         const vertexData = builder.toArrays();
-        this.rangeMap = vertexData.rangeMap;
+        this.rangeMap.migrateEntries(vertexData.rangeMap);
 
         this.updateBufferInfo(vertexData);
     }
@@ -229,7 +228,7 @@ export default class TextMark extends Mark {
      * @param {import("../view/rendering").GlobalRenderingOptions} options
      */
     prepareRender(options) {
-        super.prepareRender(options);
+        const ops = super.prepareRender(options);
 
         let q = 0.35; // TODO: Ensure that this makes sense. Now chosen by trial & error
         if (this.properties.logoLetters) {
@@ -239,17 +238,23 @@ export default class TextMark extends Mark {
             q /= 2;
         }
 
-        setUniforms(this.programInfo, {
-            uTexture: this.font.texture,
-            uSdfNumerator:
-                this.font.metrics.common.base / (this.glHelper.dpr / q),
-        });
+        ops.push(() =>
+            setUniforms(this.programInfo, {
+                uTexture: this.font.texture,
+                uSdfNumerator:
+                    this.font.metrics.common.base / (this.glHelper.dpr / q),
+            })
+        );
 
-        setBuffersAndAttributes(
-            this.gl,
-            this.programInfo,
-            this.vertexArrayInfo
+        ops.push(() =>
+            setBuffersAndAttributes(
+                this.gl,
+                this.programInfo,
+                this.vertexArrayInfo
+            )
         );
+
+        return ops;
     }
 
     /**
@@ -267,8 +272,7 @@ export default class TextMark extends Mark {
                     count,
                     offset
                 ),
-            options,
-            () => this.rangeMap
+            options
         );
     }
 }

package/src/spec/mark.d.ts

@@ -407,9 +407,6 @@ export interface MarkConfig
      */
     strokeWidth?: number;
 
-    // TODO: get rid of this
-    dynamicData?: boolean;
-
     /**
      * Minimum size for WebGL buffers (number of data items).
      * Allows for using `bufferSubData()` to update graphics.

package/src/utils/binnedIndex.js

@@ -0,0 +1,147 @@
+import clamp from "./clamp";
+
+const MAX_INTEGER = 2 ** 31 - 1;
+const MIN_INTEGER = -(2 ** 31);
+
+/**
+ * @callback Lookup
+ * @param {number} start
+ * @param {number} end
+ * @param {[number, number]} [arr] Store the result into this array (and return it)
+ * @returns {[number, number]}
+ */
+
+/**
+ * A binned index for (overlapping) ranges that are sorted by their start position.
+ *
+ * @param {number} size Number of bins
+ * @param {[number, number]} domain
+ * @param {(datum: T) => number} accessor
+ * @param {(datum: T) => number} [accessor2]
+ * @template T
+ */
+export function createBinningRangeIndexer(
+    size,
+    domain,
+    accessor,
+    accessor2 = accessor
+) {
+    const startIndices = new Int32Array(size);
+    startIndices.fill(MAX_INTEGER);
+
+    let lastIndex = MIN_INTEGER;
+    let unordered = false;
+
+    const endIndices = new Int32Array(size);
+
+    const start = domain[0];
+    const domainLength = domain[1] - domain[0];
+    const divisor = domainLength / size;
+
+    /** @param {number} pos */
+    const getBin = (pos) =>
+        clamp(Math.floor((pos - start) / divisor), 0, size - 1);
+
+    /**
+     *
+     * @param {T} datum
+     * @param {number} startIndex
+     * @param {number} endIndex
+     */
+    function binningIndexer(datum, startIndex, endIndex) {
+        if (startIndex > lastIndex) {
+            lastIndex = startIndex;
+        } else if (!unordered) {
+            unordered = true;
+            // TODO: Contextual info like view path
+            console.debug(
+                "Items are not ordered properly. Disabling binned index."
+            );
+        }
+
+        const value = accessor(datum);
+        const bin = getBin(value);
+
+        if (startIndices[bin] > startIndex) {
+            startIndices[bin] = startIndex;
+        }
+
+        if (endIndices[bin] < endIndex) {
+            endIndices[bin] = endIndex;
+        }
+    }
+
+    /**
+     *
+     * @param {T} datum
+     * @param {number} startIndex
+     * @param {number} endIndex
+     */
+    function binningRangeIndexer(datum, startIndex, endIndex) {
+        if (startIndex > lastIndex) {
+            lastIndex = startIndex;
+        } else if (!unordered) {
+            unordered = true;
+            // TODO: Contextual info like view path
+            console.debug(
+                "Items are not ordered properly. Disabling binned index."
+            );
+        }
+
+        const start = accessor(datum);
+        const end = accessor2(datum);
+        const startBin = getBin(start);
+        const endBin = getBin(end);
+
+        // TODO: This loop could probably be done as a more efficient post processing
+        // step.
+        for (let bin = startBin; bin <= endBin; bin++) {
+            if (startIndices[bin] > startIndex) {
+                startIndices[bin] = startIndex;
+            }
+
+            if (endIndices[bin] < endIndex) {
+                endIndices[bin] = endIndex;
+            }
+        }
+    }
+
+    /**
+     * @type {Lookup}
+     */
+    const lookup = (start, end, arr = [0, 0]) => {
+        arr[0] = startIndices[getBin(start)];
+        arr[1] = Math.max(endIndices[getBin(end)], arr[0]);
+        return arr;
+    };
+
+    const getIndex = () => {
+        for (let i = 1; i < endIndices.length; i++) {
+            if (endIndices[i] < endIndices[i - 1]) {
+                endIndices[i] = endIndices[i - 1];
+            }
+        }
+
+        let tail = true;
+
+        for (let i = startIndices.length - 1; i > 0; i--) {
+            if (tail && startIndices[i] == MAX_INTEGER) {
+                startIndices[i] = endIndices[i];
+                tail = false;
+            } else if (startIndices[i - 1] > startIndices[i]) {
+                startIndices[i - 1] = startIndices[i];
+            }
+        }
+
+        return lookup;
+    };
+
+    binningIndexer.getIndex = getIndex;
+    binningRangeIndexer.getIndex = getIndex;
+
+    if (unordered) {
+        return undefined;
+    } else {
+        return accessor == accessor2 ? binningIndexer : binningRangeIndexer;
+    }
+}

package/src/utils/binnedIndex.test.js

@@ -0,0 +1,73 @@
+import { describe, expect, test } from "vitest";
+import { createBinningRangeIndexer } from "./binnedIndex.js";
+
+describe("Binning Indexer", () => {
+    test("Points are binned correctly", () => {
+        const items = [0, 1, 4, 10, 35, 36, 80];
+        const indexer = createBinningRangeIndexer(10, [0, 100], (x) => x);
+
+        items.forEach((i) => indexer(i, i, i + 1));
+
+        const index = indexer.getIndex();
+
+        expect(index(0, 1)).toEqual([0, 5]);
+        expect(index(1, 2)).toEqual([0, 5]);
+        expect(index(1, 15)).toEqual([0, 11]);
+        expect(index(10, 15)).toEqual([10, 11]);
+        expect(index(11, 38)).toEqual([10, 37]);
+        expect(index(11, 45)).toEqual([10, 37]);
+        expect(index(40, 85)).toEqual([80, 81]);
+        expect(index(90, 100)).toEqual([81, 81]);
+    });
+
+    test("Non-overlapping ranges are binned correctly", () => {
+        const items = [
+            [0, 5],
+            [25, 50],
+            [50, 55],
+        ];
+        const indexer = createBinningRangeIndexer(
+            10,
+            [0, 100],
+            (x) => x[0],
+            (x) => x[1]
+        );
+
+        items.forEach((x) => indexer(x, x[0], x[1]));
+
+        const index = indexer.getIndex();
+
+        // TODO: More tests. Doesn't work 100%
+
+        expect(index(0, 1)).toEqual([0, 5]);
+        expect(index(3, 40)).toEqual([0, 50]);
+        expect(index(6, 40)).toEqual([0, 50]);
+        // fails: expect(index(50, 57)).toEqual([50, 55]);
+    });
+
+    test("Overlapping ranges are binned correctly", () => {
+        const items = [
+            [10, 30],
+            [25, 50],
+        ];
+        const indexer = createBinningRangeIndexer(
+            10,
+            [0, 100],
+            (x) => x[0],
+            (x) => x[1]
+        );
+
+        items.forEach((x) => indexer(x, x[0], x[1]));
+
+        const index = indexer.getIndex();
+
+        // TODO: More tests. Doesn't work 100%
+
+        expect(index(0, 5)).toEqual([10, 10]);
+        expect(index(0, 15)).toEqual([10, 30]);
+        expect(index(27, 40)).toEqual([10, 50]);
+        expect(index(40, 50)).toEqual([25, 50]);
+        expect(index(40, 80)).toEqual([25, 50]);
+        expect(index(10, 29)).toEqual([10, 50]);
+    });
+});

package/src/view/axisView.js

@@ -429,7 +429,6 @@ function createAxis(axisProps) {
             size: ap.labelFontSize,
             color: ap.labelColor,
             minBufferSize: 1500, // to prevent GPU buffer reallocation when zooming
-            dynamicData: true,
         },
         encoding: {
             [main]: { field: "value", type: "quantitative" },
@@ -450,7 +449,6 @@ function createAxis(axisProps) {
             color: ap.tickColor,
             size: ap.tickWidth,
             minBufferSize: 300,
-            dynamicData: true,
         },
         encoding: {
             [secondary]: { value: anchor },
@@ -576,7 +574,6 @@ export function createGenomeAxis(axisProps) {
                 anchor - (ap.chromTickSize / ap.extent) * (anchor ? 1 : -1),
             color: axisProps.chromTickColor,
             size: ap.chromTickWidth,
-            dynamicData: true,
         },
     });
 
@@ -649,7 +646,6 @@ export function createGenomeAxis(axisProps) {
                 align: axisProps.chromLabelAlign,
                 baseline: "alphabetic",
                 clip: false,
-                dynamicData: true,
                 ...chromLabelMarkProps,
             },
             encoding: {

package/src/view/renderingContext/deferredViewRenderingContext.js

@@ -146,7 +146,9 @@ export default class DeferredViewRenderingContext extends ViewRenderingContext {
             });
             // Change program, set common uniforms (mark properties, shared domains)
             this.batch.push(
-                ifEnabled(() => mark.prepareRender(this.globalOptions))
+                ...mark
+                    .prepareRender(this.globalOptions)
+                    .map((op) => ifEnabled(op))
             );
 
             /** @type {import("../../utils/layout/rectangle").default} */

package/src/view/renderingContext/simpleViewRenderingContext.js

@@ -55,7 +55,9 @@ export default class SimpleViewRenderingContext extends ViewRenderingContext {
             return;
         }
 
-        mark.prepareRender(this.globalOptions);
+        for (const op of mark.prepareRender(this.globalOptions)) {
+            op();
+        }
         mark.setViewport(this.coords, options.clipRect);
         mark.render(options)();
     }

package/src/utils/binnedRangeIndex.js

@@ -1,83 +0,0 @@
-import clamp from "./clamp";
-
-const MAX_INTEGER = 2 ** 31 - 1;
-
-/**
- * @callback Lookup
- * @param {number} start
- * @param {number} end
- * @returns {[number, number]}
- */
-
-/**
- * A binned index for (overlapping) ranges that are sorted by their start position.
- * Allows for indexing vertices of mark instances.
- *
- * @param {number} size Number of bins
- * @param {[number, number]} domain
- */
-export default function createBinningRangeIndexer(size, domain) {
-    const startIndices = new Int32Array(size);
-    startIndices.fill(MAX_INTEGER);
-
-    const endIndices = new Int32Array(size);
-
-    const start = domain[0];
-    const domainLength = domain[1] - domain[0];
-    const divisor = domainLength / size;
-
-    /** @param {number} pos */
-    const getBin = (pos) =>
-        clamp(Math.floor((pos - start) / divisor), 0, size - 1);
-
-    /**
-     *
-     * @param {number} start
-     * @param {number} end
-     * @param {number} startIndex
-     * @param {number} endIndex
-     */
-    const indexer = (start, end, startIndex, endIndex) => {
-        const startBin = getBin(start);
-        const endBin = getBin(end);
-
-        // TODO: This loop could probably be done as a more efficient post processing
-        // step.
-        for (let bin = startBin; bin <= endBin; bin++) {
-            if (startIndices[bin] > startIndex) {
-                startIndices[bin] = startIndex;
-            }
-
-            if (endIndices[bin] < endIndex) {
-                endIndices[bin] = endIndex;
-            }
-        }
-    };
-
-    /**
-     * @type {Lookup}
-     */
-    const lookup = (start, end) => [
-        startIndices[getBin(start)],
-        endIndices[getBin(end)],
-    ];
-
-    const getIndex = () => {
-        for (let i = 1; i < endIndices.length; i++) {
-            if (endIndices[i] < endIndices[i - 1]) {
-                endIndices[i] = endIndices[i - 1];
-            }
-        }
-        for (let i = endIndices.length - 1; i > 0; i--) {
-            if (endIndices[i - 1] > endIndices[i]) {
-                endIndices[i - 1] = endIndices[i];
-            }
-        }
-
-        return lookup;
-    };
-
-    indexer.getIndex = getIndex;
-
-    return indexer;
-}