@genome-spy/core 0.43.2 → 0.44.0

package/dist/src/data/sources/lazy/axisTickSource.js

@@ -35,11 +35,11 @@ export default class AxisTickSource extends SingleAxisLazySource {
         this.params = params;
     }
 
-    async onDomainChanged() {
+    onDomainChanged() {
         // Note, although this function is async, it is not awaited. Data are updated
         // synchronously to ensure that the new ticks are available before the next frame is drawn.
 
-        const scale = this.scaleResolution.getScale();
+        const scale = this.scaleResolution.scale;
         const axisParams = this.params.axis;
         const axisLength = this.getAxisLength();
 

package/dist/src/data/sources/lazy/bigBedSource.js

@@ -92,11 +92,22 @@ export default class BigBedSource extends SingleAxisWindowedSource {
 }
 
 /**
- * A specific optimization for Hautaniemi Lab's Methylation project, where
- * we have hundreds of columns having small integers (0-100).
- * This parser avoids generating piles of garbage to be collected by the GC.
- * We don't split the line into an array of strings, but instead parse the
- * integer fields directly from the original string.
+ * An optimized parser for Hautaniemi Lab's Methylation project, where
+ * we have hundreds of columns having small integers (0-100). This is over 5x
+ * faster than @gmod/bed's parser.
+ *
+ * Techniques used:
+ *
+ * 1. Avoid generating garbage by parsing integers directly from the string,
+ *    i.e., without splitting the line into an array of strings.
+ * 2. Use a template object to avoid hidden class changes after each property
+ *    assignment. Avoids garbage generation.
+ * 3. Generate and compile code that uses constants to access object properties,
+ *    avoiding Map lookups during assignment.
+ * 4. Input chrom, startPos, and endPos as parameters so that @gmod/bbi's
+ *    output doesn't first need to be converted to a string just to be parsed
+ *    again.
+ *
  * This parser doesn't support arrays, etc. at the moment. This could, however,
  * be extended into a fully-featured parser.
  *
@@ -152,28 +163,11 @@ function makeFastParser(bed) {
         return value * sign;
     }
 
-    const fieldParsers = fields.map((field) => {
-        const { name, type } = field;
-
-        if (["ubyte", "int", "uint"].includes(type)) {
-            return () => {
-                currentObject[name] = parseInt();
-            };
-        } else if (field.isNumeric) {
-            return () => {
-                currentObject[name] = Number(parseString());
-            };
-        } else if (["char", "string", "lstring"].includes(type)) {
-            return () => {
-                currentObject[name] = parseString();
-            };
-        } else {
-            throw new Error("Unsupported type: " + type);
-        }
-    });
-
     const templateFields = fields.map(
-        (field) => `"${field.name}": ${field.isNumeric ? "0" : "emptyString"}`
+        (field) =>
+            `${JSON.stringify(field.name)}: ${
+                field.isNumeric ? "0" : "emptyString"
+            }`
     );
 
     /**
@@ -196,6 +190,42 @@ function makeFastParser(bed) {
             }
         };`)();
 
+    /*
+     * Generate setter code that uses constant field names to access the
+     * object's properties. This avoids Map lookups and allows for efficient
+     * machine code to be generated by the VM.
+     */
+    const fieldParsers = fields.map((field) => {
+        const type = field.type;
+        const name = JSON.stringify(field.name);
+
+        if (["ubyte", "int", "uint"].includes(type)) {
+            return `d[${name}] = parseInt();`;
+        } else if (field.isNumeric) {
+            return `d[${name}] = Number(parseString());`;
+        } else if (["char", "string", "lstring"].includes(type)) {
+            return `d[${name}] = parseString();`;
+        } else {
+            throw new Error("Unsupported type: " + type);
+            // TODO: Implement them
+        }
+    });
+
+    /*
+     * Split the field parsers into chunks to avoid creating so large
+     * functions that the JavaScript VM would decline to optimize it.
+     * Not sure if this is really necessary, but the added cost is minimal.
+     */
+    const chunckedFieldParsers = chunk(fieldParsers, 50).map((chunk, i) =>
+        Function(
+            "parseInt",
+            "parseString",
+            `return function parseFieldChunk${i}(d) {
+            ${chunk.join("\n")}
+        }`
+        )(parseInt, parseString)
+    );
+
     /**
      * @param {string} line
      */
@@ -216,8 +246,8 @@ function makeFastParser(bed) {
 
         currentObject = makeTemplate(chrom, chromStart, chromEnd);
 
-        for (let j = 0, n = fieldParsers.length; j < n; j++) {
-            fieldParsers[j]();
+        for (const parser of chunckedFieldParsers) {
+            parser(currentObject);
         }
 
         return currentObject;
@@ -225,3 +255,15 @@ function makeFastParser(bed) {
 
     return parseLine;
 }
+
+/**
+ * @param {T[]} arr
+ * @param {number} size
+ * @template T
+ */
+function chunk(arr, size) {
+    // https://www.30secondsofcode.org/js/s/split-array-into-chunks/
+    return Array.from({ length: Math.ceil(arr.length / size) }, (_v, i) =>
+        arr.slice(i * size, i * size + size)
+    );
+}

package/dist/src/data/sources/lazy/bigWigSource.d.ts

@@ -9,6 +9,12 @@ export default class BigWigSource extends SingleAxisWindowedSource {
     constructor(params: import("../../../spec/data.js").BigWigData, view: import("../../../view/view.js").default);
     params: import("../../../spec/data.js").BigWigData;
     initializedPromise: Promise<any>;
+    /**
+     * Listen to the domain change event and update data when the covered windows change.
+     *
+     * @param {number[]} domain Linearized domain
+     */
+    onDomainChanged(domain: number[]): Promise<void>;
     /**
      * @param {number[]} interval linearized domain
      * @param {number} reductionLevel

package/dist/src/data/sources/lazy/bigWigSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bigWigSource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/lazy/bigWigSource.js"],"names":[],"mappings":"AAGA;;GAEG;AACH;IAOI;;;OAGG;IACH,oBAHW,OAAO,uBAAuB,EAAE,UAAU,QAC1C,OAAO,uBAAuB,EAAE,OAAO,EAiDjD;IAnCG,mDAAgC;IAQhC,iCA0BE;IA+BN;;;OAGG;IAEH,uBAJW,MAAM,EAAE,kBACR,MAAM,iBA0BhB;;CACJ;qCA1HoC,+BAA+B"}
+{"version":3,"file":"bigWigSource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/lazy/bigWigSource.js"],"names":[],"mappings":"AAGA;;GAEG;AACH;IAOI;;;OAGG;IACH,oBAHW,OAAO,uBAAuB,EAAE,UAAU,QAC1C,OAAO,uBAAuB,EAAE,OAAO,EAiDjD;IAnCG,mDAAgC;IAQhC,iCA0BE;IAGN;;;;OAIG;IACH,wBAFW,MAAM,EAAE,iBAqBlB;IAED;;;OAGG;IAEH,uBAJW,MAAM,EAAE,kBACR,MAAM,iBA0BhB;;CACJ;qCAxHoC,+BAA+B"}

package/dist/src/data/sources/lazy/bigWigSource.js

@@ -85,11 +85,9 @@ export default class BigWigSource extends SingleAxisWindowedSource {
         // Using 5000 as a default to avoid too many requests.
         const windowSize = Math.max(reductionLevel * length, 5000);
 
-        const quantizedInterval = this.quantizeInterval(domain, windowSize);
-
-        if (this.checkAndUpdateLastInterval(quantizedInterval)) {
-            this.loadInterval(quantizedInterval, reductionLevel);
-        }
+        this.callIfWindowsChanged(domain, windowSize, (quantizedInterval) =>
+            this.loadInterval(quantizedInterval, reductionLevel)
+        );
     }
 
     /**

package/dist/src/data/sources/lazy/singleAxisLazySource.d.ts

@@ -34,7 +34,7 @@ export default class SingleAxisLazySource extends DataSource {
      * @param {import("../../../spec/genome.js").ChromosomalLocus[]} complexDomain Chrom/Pos domain
      * @abstract
      */
-    onDomainChanged(domain: number[], complexDomain: import("../../../spec/genome.js").ChromosomalLocus[]): Promise<void>;
+    onDomainChanged(domain: number[], complexDomain: import("../../../spec/genome.js").ChromosomalLocus[]): void;
     /**
      * Sets the loading status of the data source. The status is shown in the UI.
      *

package/dist/src/data/sources/lazy/singleAxisLazySource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"singleAxisLazySource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/lazy/singleAxisLazySource.js"],"names":[],"mappings":"AAIA;;GAEG;AACH;IAOI;;;OAGG;IACH,kBAHW,OAAO,uBAAuB,EAAE,OAAO,WACvC,OAAO,0BAA0B,EAAE,wBAAwB,EAiDrE;IAzDD;;;OAGG;IACH,4CAAuC;IASnC,8CAAgB;IAYhB,2EAA2E;IAC3E,SADW,OAAO,0BAA0B,EAAE,wBAAwB,CAChD;IAEtB,oEAA4D;IA+BhE;;;OAGG;IACH,wBAWC;IAED;;;;OAIG;IACH,oEAEC;IAED;;;;;;OAMG;IACH,wBAJW,MAAM,EAAE,iBACR,OAAO,yBAAyB,EAAE,gBAAgB,EAAE,iBAK9D;IAED;;;;;OAKG;IACH,mCAHW,OAAO,QAKjB;IAED;;;;;OAKG;IACH,gCAGC;IAQD;;;;;OAKG;IACH,8BAHW,OAAO,mBAAmB,EAAE,KAAK,EAAE,EAAE,QAkB/C;CACJ;uBAxJsB,kBAAkB"}
+{"version":3,"file":"singleAxisLazySource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/lazy/singleAxisLazySource.js"],"names":[],"mappings":"AAIA;;GAEG;AACH;IAOI;;;OAGG;IACH,kBAHW,OAAO,uBAAuB,EAAE,OAAO,WACvC,OAAO,0BAA0B,EAAE,wBAAwB,EAiDrE;IAzDD;;;OAGG;IACH,4CAAuC;IASnC,8CAAgB;IAYhB,2EAA2E;IAC3E,SADW,OAAO,0BAA0B,EAAE,wBAAwB,CAChD;IAEtB,oEAA4D;IA+BhE;;;OAGG;IACH,wBAWC;IAED;;;;OAIG;IACH,oEAEC;IAED;;;;;;OAMG;IACH,wBAJW,MAAM,EAAE,iBACR,OAAO,yBAAyB,EAAE,gBAAgB,EAAE,QAK9D;IAED;;;;;OAKG;IACH,mCAHW,OAAO,QAKjB;IAED;;;;;OAKG;IACH,gCAGC;IAQD;;;;;OAKG;IACH,8BAHW,OAAO,mBAAmB,EAAE,KAAK,EAAE,EAAE,QAkB/C;CACJ;uBAxJsB,kBAAkB"}

package/dist/src/data/sources/lazy/singleAxisLazySource.js

@@ -98,7 +98,7 @@ export default class SingleAxisLazySource extends DataSource {
      * @param {import("../../../spec/genome.js").ChromosomalLocus[]} complexDomain Chrom/Pos domain
      * @abstract
      */
-    async onDomainChanged(domain, complexDomain) {
+    onDomainChanged(domain, complexDomain) {
         // Override me
     }
 

package/dist/src/data/sources/lazy/singleAxisWindowedSource.d.ts

@@ -1,4 +1,7 @@
 /**
+ * Divides the domain into windows and loads the data for one or two consecutive windows
+ * that cover the visible interval.
+ *
  * @abstract
  */
 export default class SingleAxisWindowedSource extends SingleAxisLazySource {
@@ -19,7 +22,7 @@ export default class SingleAxisWindowedSource extends SingleAxisLazySource {
      *
      * @param {number[]} domain Linearized domain
      */
-    onDomainChanged(domain: number[]): Promise<void>;
+    onDomainChanged(domain: number[]): void;
     /**
      * Listen to the domain change event and update data when the covered windows change.
      *
@@ -39,21 +42,13 @@ export default class SingleAxisWindowedSource extends SingleAxisLazySource {
      */
     protected discretizeAndLoad<T>(interval: number[], loader: (discreteInteval: import("@genome-spy/core/genome/genome.js").DiscreteChromosomeInterval, signal: AbortSignal) => Promise<T>): Promise<T[]>;
     /**
-     * Returns three consecutive windows. The idea is to immediately have some data
-     * to show to the user when they pan the view. The windows are conceptually
-     * similar to "tiles" but they are never loaded separately.
      *
-     * @param {number[]} interval
+     * @param {number[]} interval Domain
      * @param {number} windowSize
+     * @param {function(number[]):void} callback
      * @protected
      */
-    protected quantizeInterval(interval: number[], windowSize: number): number[];
-    /**
-     *
-     * @param {number[]} interval
-     * @protected
-     */
-    protected checkAndUpdateLastInterval(interval: number[]): boolean;
+    protected callIfWindowsChanged(interval: number[], windowSize: number, callback: (arg0: number[]) => void): void;
     #private;
 }
 import SingleAxisLazySource from "./singleAxisLazySource.js";

package/dist/src/data/sources/lazy/singleAxisWindowedSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"singleAxisWindowedSource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/lazy/singleAxisWindowedSource.js"],"names":[],"mappings":"AAIA;;GAEG;AACH;IAQI;;;OAGG;IACH,kBAHU;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAC,CAGxB;IAEP;;;OAGG;IACH,0CAHW,OAAO,uBAAuB,EAAE,aAAa,QAmBvD;IAED;;;;OAIG;IACH,wBAFW,MAAM,EAAE,iBAiBlB;IAED;;;;;OAKG;IACH,iCAHW,MAAM,EAAE,iBAKlB;IAED;;;;;;;;;OASG;IACH,yCANW,MAAM,EAAE,4BACU,OAAO,mCAAmC,EAAE,0BAA0B,UAAU,WAAW,+BAqCvH;IAED;;;;;;;;OAQG;IACH,qCAJW,MAAM,EAAE,cACR,MAAM,YAWhB;IAED;;;;OAIG;IACH,+CAHW,MAAM,EAAE,WAUlB;;CACJ;iCAvJgC,2BAA2B"}
+{"version":3,"file":"singleAxisWindowedSource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/lazy/singleAxisWindowedSource.js"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH;IAUI;;;OAGG;IACH,kBAHU;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAC,CAGxB;IAEP;;;OAGG;IACH,0CAHW,OAAO,uBAAuB,EAAE,aAAa,QAmBvD;IAED;;;;OAIG;IACH,wBAFW,MAAM,EAAE,QAmBlB;IAED;;;;;OAKG;IACH,iCAHW,MAAM,EAAE,iBAKlB;IAED;;;;;;;;;OASG;IACH,yCANW,MAAM,EAAE,4BACU,OAAO,mCAAmC,EAAE,0BAA0B,UAAU,WAAW,+BAqCvH;IAED;;;;;;OAMG;IACH,yCALW,MAAM,EAAE,cACR,MAAM,mBACG,MAAM,EAAE,KAAE,IAAI,QAyBjC;;CACJ;iCA3JgC,2BAA2B"}

package/dist/src/data/sources/lazy/singleAxisWindowedSource.js

@@ -1,8 +1,10 @@
 import SingleAxisLazySource from "./singleAxisLazySource.js";
-import { shallowArrayEquals } from "../../../utils/arrayUtils.js";
 import { debounce } from "@genome-spy/core/utils/debounce.js";
 
 /**
+ * Divides the domain into windows and loads the data for one or two consecutive windows
+ * that cover the visible interval.
+ *
  * @abstract
  */
 export default class SingleAxisWindowedSource extends SingleAxisLazySource {
@@ -13,6 +15,8 @@ export default class SingleAxisWindowedSource extends SingleAxisLazySource {
      */
     #lastQuantizedInterval = [0, 0];
 
+    #lastWindowSize = 0;
+
     /**
      * @type {{windowSize?: number}}
      * @protected
@@ -46,21 +50,23 @@ export default class SingleAxisWindowedSource extends SingleAxisLazySource {
      *
      * @param {number[]} domain Linearized domain
      */
-    async onDomainChanged(domain) {
+    onDomainChanged(domain) {
         const windowSize = this.params?.windowSize ?? -1;
 
         if (domain[1] - domain[0] > windowSize) {
             return;
         }
 
-        const quantizedInterval = this.quantizeInterval(domain, windowSize);
-
-        if (this.checkAndUpdateLastInterval(quantizedInterval)) {
-            // Possible metadata must be loaded before the first request.
-            await this.initializedPromise;
+        this.callIfWindowsChanged(
+            domain,
+            windowSize,
+            async (quantizedInterval) => {
+                // Possible metadata must be loaded before the first request.
+                await this.initializedPromise;
 
-            this.loadInterval(quantizedInterval);
-        }
+                this.loadInterval(quantizedInterval);
+            }
+        );
     }
 
     /**
@@ -118,35 +124,33 @@ export default class SingleAxisWindowedSource extends SingleAxisLazySource {
     }
 
     /**
-     * Returns three consecutive windows. The idea is to immediately have some data
-     * to show to the user when they pan the view. The windows are conceptually
-     * similar to "tiles" but they are never loaded separately.
      *
-     * @param {number[]} interval
+     * @param {number[]} interval Domain
      * @param {number} windowSize
+     * @param {function(number[]):void} callback
      * @protected
      */
-    quantizeInterval(interval, windowSize) {
-        return [
-            Math.max(Math.floor(interval[0] / windowSize - 1) * windowSize, 0),
+    callIfWindowsChanged(interval, windowSize, callback) {
+        // One or two consecutive windows that cover the given interval.
+        // The windows are conceptually similar to "tiles" but they are never loaded separately.
+        const quantizedInterval = [
+            Math.max(Math.floor(interval[0] / windowSize) * windowSize, 0),
             Math.min(
-                Math.ceil(interval[1] / windowSize + 1) * windowSize,
+                Math.ceil(interval[1] / windowSize) * windowSize,
                 this.genome.totalSize // Perhaps scale domain should be used here
             ),
         ];
-    }
 
-    /**
-     *
-     * @param {number[]} interval
-     * @protected
-     */
-    checkAndUpdateLastInterval(interval) {
-        if (shallowArrayEquals(this.#lastQuantizedInterval, interval)) {
-            return false;
-        }
+        const last = this.#lastQuantizedInterval;
+        if (
+            windowSize !== this.#lastWindowSize ||
+            quantizedInterval[0] < last[0] ||
+            quantizedInterval[1] > last[1]
+        ) {
+            this.#lastQuantizedInterval = quantizedInterval;
+            this.#lastWindowSize = windowSize;
 
-        this.#lastQuantizedInterval = interval;
-        return true;
+            callback(quantizedInterval);
+        }
     }
 }

package/dist/src/data/transforms/filterScoredLabels.js

@@ -75,7 +75,7 @@ export default class FilterScoredLabelsTransform extends FlowNode {
     _filterAndPropagate() {
         super.reset();
 
-        const scale = this.resolution.getScale();
+        const scale = this.resolution.scale;
         const rangeSpan =
             this.resolution.members[0].view.coords?.[
                 this.channel == "x" ? "width" : "height"

package/dist/src/encoder/encoder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"encoder.d.ts","sourceRoot":"","sources":["../../../src/encoder/encoder.js"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AACH,6CAJW,OAAO,kBAAkB,EAAE,OAAO,aAClC,OAAO,oBAAoB,EAAE,QAAQ,gGAsC/C;AAED;;;;;;;GAOG;AACH,0CANW,OAAO,oBAAoB,EAAE,UAAU,SACvC,GAAG,0IA2Fb;AAED;;;;;GAKG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,4FAKjD;AAED;;;GAGG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,mEAKjD;AAED;;;GAGG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,uDAKjD;AAED;;;GAGG;AACH,kDAHW,OAAO,oBAAoB,EAAE,UAAU,kEAWjD;AAED;;;GAGG;AACH,6CAHW,OAAO,qBAAqB,EAAE,OAAO,WACrC,OAAO,oBAAoB,EAAE,OAAO,27CAS9C;AAED;;;GAGG;AACH,iDAHW,OAAO,oBAAoB,EAAE,UAAU,4FAKjD;AAED;;;GAGG;AACH,0CAHW,OAAO,oBAAoB,EAAE,UAAU,0DAKjD;AAED;;;GAGG;AACH,sCAHW,OAAO,oBAAoB,EAAE,UAAU,sDAKjD;AAoBD;;;GAGG;AACH,oDAHW,OAAO,oBAAoB,EAAE,OAAO,oEAM9C;AAED;;;GAGG;AACH,6CAHW,OAAO,oBAAoB,EAAE,OAAO,6DAM9C;AAqBD;;;GAGG;AACH,4CAFW,MAAM,WAIhB;AAED;;;;GAIG;AACH,oDAFW,OAAO,oBAAoB,EAAE,OAAO,2DAS9C;AAED;;;;;GAKG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,wCAI9C;AAED;;;;GAIG;AACH,kDAFW,OAAO,oBAAoB,EAAE,OAAO,0CAM9C;AAED;;GAEG;AACH,wCAFW,OAAO,oBAAoB,EAAE,OAAO,WAI9C;AAED;;;;GAIG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,WAI9C;AAED;;;GAGG;AACH,4CAHW,OAAO,oBAAoB,EAAE,OAAO,4DAuB9C;AAED;;;;;GAKG;AACH,0CAHW,OAAO,oBAAoB,EAAE,OAAO,GAClC,GAAG,EAAE,CAsBjB;AAED;;;GAGG;AACH,gDAHW,OAAO,oBAAoB,EAAE,OAAO,UACzB,GAAG,KAAE,MAAM,CAmBhC;AA7LD;;GAEG;AACH,wCAFU,OAAO,oBAAoB,EAAE,wBAAwB,EAAE,CAEb;AAEpD;;GAEG;AACH,0CAFU,OAAO,oBAAoB,EAAE,0BAA0B,EAAE,CAEX;AAExD;;GAEG;AACH,iCAFU,OAAO,oBAAoB,EAAE,iBAAiB,EAAE,CAKxD;AAoBF;;;;GAIG;AACH,gCAFU,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,oBAAoB,EAAE,0BAA0B,CAAC,CAAC,CAKtH;AAEF;;;;GAIG;AACH,8BAFU,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,oBAAoB,EAAE,OAAO,CAAC,CAAC,CAInG"}
+{"version":3,"file":"encoder.d.ts","sourceRoot":"","sources":["../../../src/encoder/encoder.js"],"names":[],"mappings":"AAKA;;;;;;;;;;GAUG;AACH,6CAJW,OAAO,kBAAkB,EAAE,OAAO,aAClC,OAAO,oBAAoB,EAAE,QAAQ,gGAsC/C;AAED;;;;;;;GAOG;AACH,0CANW,OAAO,oBAAoB,EAAE,UAAU,SACvC,GAAG,0IAoGb;AAED;;;;;GAKG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,4FAKjD;AAED;;;GAGG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,mEAKjD;AAED;;;GAGG;AACH,uCAHW,OAAO,oBAAoB,EAAE,UAAU,uDAKjD;AAED;;;GAGG;AACH,kDAHW,OAAO,oBAAoB,EAAE,UAAU,kEAWjD;AAED;;;GAGG;AACH,6CAHW,OAAO,qBAAqB,EAAE,OAAO,WACrC,OAAO,oBAAoB,EAAE,OAAO,27CAS9C;AAED;;;GAGG;AACH,iDAHW,OAAO,oBAAoB,EAAE,UAAU,4FAKjD;AAED;;;GAGG;AACH,0CAHW,OAAO,oBAAoB,EAAE,UAAU,0DAKjD;AAED;;;GAGG;AACH,sCAHW,OAAO,oBAAoB,EAAE,UAAU,sDAKjD;AAoBD;;;GAGG;AACH,oDAHW,OAAO,oBAAoB,EAAE,OAAO,oEAM9C;AAED;;;GAGG;AACH,6CAHW,OAAO,oBAAoB,EAAE,OAAO,6DAM9C;AAqBD;;;GAGG;AACH,4CAFW,MAAM,WAIhB;AAED;;;;GAIG;AACH,oDAFW,OAAO,oBAAoB,EAAE,OAAO,2DAS9C;AAED;;;;;GAKG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,wCAI9C;AAED;;;;GAIG;AACH,kDAFW,OAAO,oBAAoB,EAAE,OAAO,0CAM9C;AAED;;GAEG;AACH,wCAFW,OAAO,oBAAoB,EAAE,OAAO,WAI9C;AAED;;;;GAIG;AACH,2CAFW,OAAO,oBAAoB,EAAE,OAAO,WAI9C;AAED;;;GAGG;AACH,4CAHW,OAAO,oBAAoB,EAAE,OAAO,4DAuB9C;AAED;;;;;GAKG;AACH,0CAHW,OAAO,oBAAoB,EAAE,OAAO,GAClC,GAAG,EAAE,CAsBjB;AAED;;;GAGG;AACH,gDAHW,OAAO,oBAAoB,EAAE,OAAO,UACzB,GAAG,KAAE,MAAM,CAmBhC;AA7LD;;GAEG;AACH,wCAFU,OAAO,oBAAoB,EAAE,wBAAwB,EAAE,CAEb;AAEpD;;GAEG;AACH,0CAFU,OAAO,oBAAoB,EAAE,0BAA0B,EAAE,CAEX;AAExD;;GAEG;AACH,iCAFU,OAAO,oBAAoB,EAAE,iBAAiB,EAAE,CAKxD;AAoBF;;;;GAIG;AACH,gCAFU,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,oBAAoB,EAAE,0BAA0B,CAAC,CAAC,CAKtH;AAEF;;;;GAIG;AACH,8BAFU,QAAQ,OAAO,OAAO,oBAAoB,EAAE,OAAO,EAAE,OAAO,oBAAoB,EAAE,OAAO,CAAC,CAAC,CAInG"}

package/dist/src/encoder/encoder.js

@@ -1,6 +1,7 @@
 import { isDiscrete } from "vega-scale";
 import createIndexer from "../utils/indexer.js";
 import scaleNull from "../utils/scaleNull.js";
+import { isExprRef } from "../marks/mark.js";
 
 /**
  * Creates an object that contains encoders for every channel of a mark
@@ -41,7 +42,7 @@ export default function createEncoders(mark, encoding) {
 
         encoders[channel] = createEncoder(
             encoding[channel],
-            resolution?.getScale(),
+            resolution?.scale,
             mark.unitView.getAccessor(channel),
             channel
         );
@@ -69,11 +70,20 @@ export function createEncoder(channelDef, scale, accessor, channel) {
     let encoder;
 
     if (isValueDef(channelDef)) {
-        const value = channelDef.value;
-        encoder = /** @type {Encoder} */ ((datum) => value);
-        encoder.constant = true;
-        encoder.constantValue = true;
-        encoder.accessor = undefined;
+        if (isExprRef(channelDef.value)) {
+            // TODO: Should get the value expression as the accessor
+            encoder = /** @type {Encoder} */ ((datum) => undefined);
+            //encoder = /** @type {Encoder} */ (/** @type {any} */ (accessor));
+            encoder.constant = true;
+            encoder.constantValue = false;
+            encoder.accessor = accessor;
+        } else {
+            const value = channelDef.value;
+            encoder = /** @type {Encoder} */ ((datum) => value);
+            encoder.constant = true;
+            encoder.constantValue = true;
+            encoder.accessor = undefined;
+        }
     } else if (accessor) {
         if (channel == "text") {
             // TODO: Define somewhere channels that don't use a scale

package/dist/src/genomeSpy.d.ts

@@ -139,6 +139,7 @@ export default class GenomeSpy {
     renderPickingFramebuffer(): void;
     getSearchableViews(): UnitView[];
     getNamedScaleResolutions(): Map<string, import("./view/scaleResolution.js").default>;
+    #private;
 }
 /**
  * Events that are broadcasted to all views.

package/dist/src/genomeSpy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"genomeSpy.d.ts","sourceRoot":"","sources":["../../src/genomeSpy.js"],"names":[],"mappings":"AA6CA;IACI;;;;;OAKG;IAEH;;;;;OAKG;IACH,uBAJW,WAAW,qDAEX,OAAO,qBAAqB,EAAE,YAAY,EAyFpD;IAtFG,uBAA0B;IAE1B,6BAA6B;IAC7B,uBADW,CAAC,MAAM,IAAI,CAAC,EAAE,CACM;IAM/B,sCAAsC;IACtC,wCAAgB;IAEhB,iCAA4C;IAC5C,yBAAoC;IAEpC,4CAA4C;IAC5C,oBADW,QAAU,MAAM,KAAE,MAAM,EAAE,CAAC,EAAE,CACZ;IAE5B,mBAAoD;IAEpD,0BAA0B;IAC1B,aADW,WAAW,CACM;IAE5B;;;;;OAKG;IACH,qEAF0B,OAAO,CAE8B;IAE/D,2CAA2C;IAC3C,mBADW,4BAA4B,CACL;IAClC,2CAA2C;IAC3C,iBADW,4BAA4B,CACP;IAEhC,oDAAoD;IACpD,6BAAgC;IAEhC;;;OAGG;IACH,eAFU;QAAE,IAAI,EAAE,OAAO,iBAAiB,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,OAAO,oBAAoB,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAEpF;IAE9B,uBAA+C;IAE/C;;;OAGG;IACH,oBAFU,IAAI,MAAM,EAAE,QAAU,aAAa,KAAE,IAAI,CAAC,EAAE,CAAC,CAEpB;IAEnC;;;;;;OAMG;IACH,yCAFkC,GAAG,KAAK,IAAI,GAEd;IAEhC;;;OAGG;IACH,kDAFkC,GAAG,KAAK,IAAI,GAEL;IAEzC,oFAAoF;IACpF,iBADW,OAAO,MAAM,EAAE,OAAO,6BAA6B,EAAE,cAAc,CAAC,CAK9E;IAED,mBAAmB;IACnB,2CAAyB;IAEzB,0BAAqC;IAErC;;;;OAIG;IACH,8DAA8B;IAGlC;;;OAGG;IACH,2CAFkB,MAAM,KAAK,GAAG,EAAE,QAIjC;IAED;;OAEG;IACH,+BAFW,MAAM,YAShB;IAED;;;;OAIG;IACH,sBAHW,MAAM,QACN,GAAG,EAAE,QAaf;IAED;;;;;OAKG;IACH,gBAHW,kBAAkB,YAClB,GAAG,QAQb;IAED;;;OAGG;IACH,iCAyCC;IAED,0BA0EC;IAtEG,uBAOC;IAyCD,sCAA0D;IAS1D,yCAA6D;IAI7D,iBAA0C;IAW9C;;OAEG;IACH,gBAmBC;IAED,sCA8MC;IAED;;;OAGG;IACH,UAFa,QAAQ,OAAO,CAAC,CA6B5B;IAED,4BA6IC;IAjIe,iCAAoC;IAmIpD;;;OAGG;IACH,kBAHW,MAAM,KACN,MAAM,QAiEhB;IAED;;;;;;;OAOG;IACH,oDAHuB,QAAQ,MAAM,GAAG,WAAW,GAAG,OAAO,KAAK,EAAE,cAAc,CAAC,QAYlF;IAED,sBAyCC;IAED,kBAIC;IAED,iCAOC;IAED,iCASC;IAED,qFAWC;CACJ;;;;iCA51BY,eAAe,GAAG,YAAY,GAAG,QAAQ,GAAG,gBAAgB;4BAhC7C,uBAAuB;4BA0BP,uBAAuB;qBAZ9C,qBAAqB;wBAIlB,yBAAyB;yCARR,yDAAyD;oBAYvD,oBAAoB;wBAMvC,kBAAkB;wBApBlB,qBAAqB;oBAVzB,uBAAuB;qBAQtB,oBAAoB"}
+{"version":3,"file":"genomeSpy.d.ts","sourceRoot":"","sources":["../../src/genomeSpy.js"],"names":[],"mappings":"AA+CA;IACI;;;;;OAKG;IAEH;;;;;OAKG;IACH,uBAJW,WAAW,qDAEX,OAAO,qBAAqB,EAAE,YAAY,EA0FpD;IAvFG,uBAA0B;IAE1B,6BAA6B;IAC7B,uBADW,CAAC,MAAM,IAAI,CAAC,EAAE,CACM;IAM/B,sCAAsC;IACtC,wCAAgB;IAEhB,iCAA4C;IAC5C,yBAAoC;IAEpC,4CAA4C;IAC5C,oBADW,QAAU,MAAM,KAAE,MAAM,EAAE,CAAC,EAAE,CACZ;IAE5B,mBAAoD;IAEpD,0BAA0B;IAC1B,aADW,WAAW,CACM;IAE5B;;;;;OAKG;IACH,qEAF0B,OAAO,CAE8B;IAE/D,2CAA2C;IAC3C,mBADW,4BAA4B,CACL;IAClC,2CAA2C;IAC3C,iBADW,4BAA4B,CACP;IAEhC,oDAAoD;IACpD,6BAAgC;IAEhC;;;OAGG;IACH,eAFU;QAAE,IAAI,EAAE,OAAO,iBAAiB,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,OAAO,oBAAoB,EAAE,KAAK,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAEpF;IAE9B,uBAA+C;IAE/C;;;OAGG;IACH,oBAFU,IAAI,MAAM,EAAE,QAAU,aAAa,KAAE,IAAI,CAAC,EAAE,CAAC,CAEpB;IAEnC;;;;;;OAMG;IACH,yCAFkC,GAAG,KAAK,IAAI,GAEd;IAEhC;;;OAGG;IACH,kDAFkC,GAAG,KAAK,IAAI,GAEL;IAEzC,oFAAoF;IACpF,iBADW,OAAO,MAAM,EAAE,OAAO,6BAA6B,EAAE,cAAc,CAAC,CAK9E;IAED,mBAAmB;IACnB,2CAAyB;IAEzB,0BAAqC;IAGrC;;;;OAIG;IACH,8DAA8B;IA4GlC;;;OAGG;IACH,2CAFkB,MAAM,KAAK,GAAG,EAAE,QAIjC;IAED;;OAEG;IACH,+BAFW,MAAM,YAShB;IAED;;;;OAIG;IACH,sBAHW,MAAM,QACN,GAAG,EAAE,QAaf;IAED;;;;;OAKG;IACH,gBAHW,kBAAkB,YAClB,GAAG,QAQb;IAED;;;OAGG;IACH,iCAyCC;IAED,0BA0EC;IAtEG,uBAOC;IAyCD,sCAA0D;IAS1D,yCAA6D;IAI7D,iBAA0C;IAW9C;;OAEG;IACH,gBAmBC;IAED,sCAwMC;IAED;;;OAGG;IACH,UAFa,QAAQ,OAAO,CAAC,CA6B5B;IAED,4BA6IC;IAjIe,iCAAoC;IAmIpD;;;OAGG;IACH,kBAHW,MAAM,KACN,MAAM,QAiEhB;IAED;;;;;;;OAOG;IACH,oDAHuB,QAAQ,MAAM,GAAG,WAAW,GAAG,OAAO,KAAK,EAAE,cAAc,CAAC,QAYlF;IAED,sBAyCC;IAED,kBAIC;IAED,iCAOC;IAED,iCASC;IAED,qFAWC;;CACJ;;;;iCAh8BY,eAAe,GAAG,YAAY,GAAG,QAAQ,GAAG,gBAAgB;4BAlC7C,uBAAuB;4BA0BP,uBAAuB;qBAZ9C,qBAAqB;wBAIlB,yBAAyB;yCARR,yDAAyD;oBAYvD,oBAAoB;wBAMvC,kBAAkB;wBApBlB,qBAAqB;oBAVzB,uBAAuB;qBAQtB,oBAAoB"}

package/dist/src/genomeSpy.js

@@ -35,6 +35,8 @@ import { invalidatePrefix } from "./utils/propertyCacher.js";
 import { VIEW_ROOT_NAME, ViewFactory } from "./view/viewFactory.js";
 import { reconfigureScales } from "./view/scaleResolution.js";
 import ParamBroker from "./paramBroker.js";
+import { debounce } from "./utils/debounce.js";
+import { tickStep } from "d3-array";
 
 /**
  * Events that are broadcasted to all views.
@@ -137,6 +139,7 @@ export default class GenomeSpy {
         this.viewRoot = undefined;
 
         this._paramBroker = new ParamBroker();
+        this.#initializeParameters();
 
         /**
          * Views that are currently loading data using lazy sources.
@@ -146,6 +149,111 @@ export default class GenomeSpy {
         this._loadingViews = new Map();
     }
 
+    #initializeParameters() {
+        /** @type {import("lit-html").TemplateResult[]} */
+        const inputs = [];
+
+        for (const param of this.spec.params ?? []) {
+            const { name, value, bind } = param;
+            const setter = this._paramBroker.allocateSetter(name);
+
+            if (value != null) {
+                setter(value);
+            }
+
+            // TODO: Implement two-way data binding, e.g. when an external agent changes
+            // the parameter value, the UI components should be updated.
+
+            if (bind && "input" in bind) {
+                const debouncedSetter = bind.debounce
+                    ? debounce(setter, bind.debounce, false)
+                    : setter;
+
+                if (bind.input == "range") {
+                    // TODO: Show the value next to the slider
+                    inputs.push(
+                        html`<label
+                            >${bind.name ?? name}
+                            <input
+                                type="range"
+                                min=${bind.min ?? 0}
+                                max=${bind.max ?? 100}
+                                step=${bind.step ??
+                                tickStep(bind.min, bind.max, 100)}
+                                .value=${value}
+                                @input=${(/** @type {any} */ e) =>
+                                    debouncedSetter(e.target.valueAsNumber)}
+                        /></label>`
+                    );
+                } else if (bind.input == "checkbox") {
+                    inputs.push(
+                        html`<label
+                            >${bind.name ?? name}
+                            <input
+                                type="checkbox"
+                                ?checked=${value}
+                                @input=${(/** @type {any} */ e) =>
+                                    debouncedSetter(e.target.checked)}
+                        /></label>`
+                    );
+                } else if (bind.input == "radio") {
+                    inputs.push(
+                        html`<span class="label">${bind.name ?? name}</span>
+                            ${bind.options.map(
+                                (option, i) => html`<label>
+                                    <input
+                                        type="radio"
+                                        name=${name}
+                                        value=${option}
+                                        .checked=${value == option}
+                                        @input=${(/** @type {any} */ e) =>
+                                            debouncedSetter(e.target.value)}
+                                    />${bind.labels?.[i] ?? option}</label
+                                >`
+                            )}`
+                    );
+                } else if (bind.input == "select") {
+                    inputs.push(
+                        html`<label
+                            >${bind.name ?? name}
+                            <select
+                                @input=${(/** @type {any} */ e) =>
+                                    debouncedSetter(e.target.value)}
+                            >
+                                ${bind.options.map(
+                                    (option, i) => html`<option
+                                        value=${option}
+                                        ?selected=${value == option}
+                                    >
+                                        ${bind.labels?.[i] ?? option}
+                                    </option>`
+                                )}
+                            </select></label
+                        >`
+                    );
+                } else {
+                    // TODO: Support other types: "text", "number", "color".
+                    throw new Error("Unsupported input type: " + bind.input);
+                }
+            }
+        }
+
+        if (inputs.length) {
+            const inputsDiv = document.createElement("div");
+            this.container.appendChild(inputsDiv);
+
+            // TODO: Move to css
+            // @ts-ignore
+            inputsDiv.style =
+                "position: absolute; bottom: 10px; right: 10px; background: rgba(255, 255, 255, 0.8); padding: 10px; z-index: 1; border: 1px solid lightgray";
+
+            render(
+                html`${inputs.map((input) => html`<div>${input}</div>`)}`,
+                inputsDiv
+            );
+        }
+    }
+
     /**
      *
      * @param {(name: string) => any[]} provider
@@ -533,12 +641,6 @@ export default class GenomeSpy {
 
         await graphicsInitialized;
 
-        this.viewRoot.visit((view) => {
-            for (const resolution of Object.values(view.resolutions.scale)) {
-                this._glHelper.createRangeTexture(resolution);
-            }
-        });
-
         for (const view of unitViews) {
             view.mark.finalizeGraphicsInitialization();
         }

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

@@ -1,21 +1,40 @@
 /// <reference types="external-typings/internmap.js" />
 /**
+ * Generates GLSL code for a constant value.
  *
  * @param {Channel} channel
  * @param {number | number[] | string | boolean} value
  */
-export function generateValueGlsl(channel: Channel, value: number | number[] | string | boolean): string;
+export function generateConstantValueGlsl(channel: Channel, value: number | number[] | string | boolean): string;
 /**
+ * Generates GLSL code for a dynamic, parameter-driven values. These are mainly
+ * used as dynamic mark properties that map to encoding channels.
  *
  * @param {Channel} channel
- * @param {any} scale TODO: typing
+ */
+export function generateDynamicValueGlslAndUniform(channel: Channel): {
+    channel: import("../spec/channel.js").Channel;
+    uniformName: string;
+    uniformGlsl: string;
+    scaleGlsl: string;
+    adjuster: (x: any) => any;
+};
+/**
+ *
+ * @param {Channel} channel
+ * @param {import("../view/scaleResolution.js").default} scaleResolution TODO: typing
  * @param {import("../spec/channel.js").ChannelDef} channelDef
  * @param {Channel[]} [sharedQuantitativeChannels] Channels that share the same quantitative field
  */
-export function generateScaleGlsl(channel: Channel, scale: any, channelDef: import("../spec/channel.js").ChannelDef, sharedQuantitativeChannels?: Channel[]): {
+export function generateScaleGlsl(channel: Channel, scaleResolution: import("../view/scaleResolution.js").default, channelDef: import("../spec/channel.js").ChannelDef, sharedQuantitativeChannels?: Channel[]): {
+    attributeName: string;
     attributeGlsl: string;
+    markUniformGlsl: string;
     glsl: string;
+    domainUniformName: string;
     domainUniform: string;
+    rangeName: string;
+    rangeUniform: string;
 };
 /**
  * True if scale needs more than 24 bits (float32) of precision.
@@ -63,6 +82,7 @@ export const RANGE_PREFIX: "range_";
 export const SCALE_FUNCTION_PREFIX: "scale_";
 export const SCALED_FUNCTION_PREFIX: "getScaled_";
 export const RANGE_TEXTURE_PREFIX: "uRangeTexture_";
+export function getRangeForGlsl(scale: any, channel: Channel): number[];
 export type Channel = import("../spec/channel.js").Channel;
 /**
  * Turns a number or number array to float or vec[234] string.

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

@@ -1 +1 @@
-{"version":3,"file":"glslScaleGenerator.d.ts","sourceRoot":"","sources":["../../../src/gl/glslScaleGenerator.js"],"names":[],"mappings":";AAmDA;;;;GAIG;AACH,2CAHW,OAAO,SACP,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,OAAO,UAsC9C;AAED;;;;;;GAMG;AAEH,2CANW,OAAO,SACP,GAAG,cACH,OAAO,oBAAoB,EAAE,UAAU,+BACvC,OAAO,EAAE;;;;EA8RnB;AA+FD;;;;GAIG;AACH,2CAFW,MAAM,WAIhB;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,QAAQ,OAAO,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;AA3jBD,uCAAwC;AACxC,uCAAwC;AACxC,oCAAqC;AACrC,6CAA8C;AAC9C,kDAAmD;AACnD,oDAAqD;sBAMxC,OAAO,oBAAoB,EAAE,OAAO;;;;8BAiYpC,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE;;;;uBAqIhD,CAAC,MAAM,EAAE,OAAO,CAAC;0BAnhBJ,WAAW"}
+{"version":3,"file":"glslScaleGenerator.d.ts","sourceRoot":"","sources":["../../../src/gl/glslScaleGenerator.js"],"names":[],"mappings":";AAqDA;;;;;GAKG;AACH,mDAHW,OAAO,SACP,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,OAAO,UAoC9C;AAED;;;;;GAKG;AACH,4DAFW,OAAO;;;;;kBAIC,GAAG,KAAK,GAAG;EA0B7B;AAED;;;;;;GAMG;AAEH,2CANW,OAAO,mBACP,OAAO,4BAA4B,EAAE,OAAO,cAC5C,OAAO,oBAAoB,EAAE,UAAU,+BACvC,OAAO,EAAE;;;;;;;;;EAiTnB;AAgHD;;;;GAIG;AACH,2CAFW,MAAM,WAIhB;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,QAAQ,OAAO,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;AAloBD,uCAAwC;AACxC,uCAAwC;AACxC,oCAAqC;AACrC,6CAA8C;AAC9C,kDAAmD;AACnD,oDAAqD;AA6oB9C,uCAJI,GAAG,WACH,OAAO,GACL,MAAM,EAAE,CAQF;sBA7oBN,OAAO,oBAAoB,EAAE,OAAO;;;;8BAubpC,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE;;;;uBAsJhD,CAAC,MAAM,EAAE,OAAO,CAAC;0BA5lBJ,WAAW"}