@genome-spy/core 0.41.0 → 0.42.1

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

@@ -1,20 +1,15 @@
-import { debounce } from "../../../utils/debounce.js";
-import SingleAxisLazySource from "./singleAxisLazySource.js";
-import windowedMixin from "./windowedMixin.js";
 import addBaseUrl from "../../../utils/addBaseUrl.js";
+import SingleAxisWindowedSource from "./singleAxisWindowedSource.js";
 
 /**
  *
  */
-export default class BigWigSource extends windowedMixin(SingleAxisLazySource) {
+export default class BigWigSource extends SingleAxisWindowedSource {
     /** @type {number[]} */
-    reductionLevels = [];
-
-    /** Keep track of the order of the requests */
-    lastRequestId = 0;
+    #reductionLevels = [];
 
     /** @type {import("@gmod/bbi").BigWig} */
-    bbi;
+    #bbi;
 
     /**
      * @param {import("../../../spec/data.js").BigWigData} params
@@ -25,6 +20,8 @@ export default class BigWigSource extends windowedMixin(SingleAxisLazySource) {
         const paramsWithDefaults = {
             pixelsPerBin: 2,
             channel: "x",
+            debounce: 200,
+            debounceMode: "window",
             ...params,
         };
 
@@ -36,25 +33,21 @@ export default class BigWigSource extends windowedMixin(SingleAxisLazySource) {
             throw new Error("No URL provided for BigWigSource");
         }
 
-        this.doDebouncedRequest = debounce(
-            this.doRequest.bind(this),
-            200,
-            false
-        );
+        this.setupDebouncing(this.params);
 
         this.initializedPromise = new Promise((resolve) => {
             Promise.all([
                 import("@gmod/bbi"),
                 import("generic-filehandle"),
             ]).then(([{ BigWig }, { RemoteFile }]) => {
-                this.bbi = new BigWig({
+                this.#bbi = new BigWig({
                     filehandle: new RemoteFile(
                         addBaseUrl(this.params.url, this.view.getBaseUrl())
                     ),
                 });
 
-                this.bbi.getHeader().then((header) => {
-                    this.reductionLevels =
+                this.#bbi.getHeader().then((header) => {
+                    this.#reductionLevels =
                         /** @type {{reductionLevel: number}[]} */ (
                             header.zoomLevels
                         )
@@ -63,7 +56,7 @@ export default class BigWigSource extends windowedMixin(SingleAxisLazySource) {
 
                     // Add the non-reduced level. Not sure if this is the best way to do it.
                     // Afaik, the non-reduced bin size is not available in the header.
-                    this.reductionLevels.push(1);
+                    this.#reductionLevels.push(1);
 
                     resolve();
                 });
@@ -85,7 +78,7 @@ export default class BigWigSource extends windowedMixin(SingleAxisLazySource) {
         const reductionLevel = findReductionLevel(
             domain,
             length,
-            this.reductionLevels
+            this.#reductionLevels
         );
 
         // The sensible minimum window size actually depends on the non-reduced data density...
@@ -95,51 +88,24 @@ export default class BigWigSource extends windowedMixin(SingleAxisLazySource) {
         const quantizedInterval = this.quantizeInterval(domain, windowSize);
 
         if (this.checkAndUpdateLastInterval(quantizedInterval)) {
-            this.doDebouncedRequest(quantizedInterval, reductionLevel);
+            this.loadInterval(quantizedInterval, reductionLevel);
         }
     }
 
     /**
-     * Listen to the domain change event and update data when the covered windows change.
-     *
      * @param {number[]} interval linearized domain
      * @param {number} reductionLevel
      */
-    async doRequest(interval, reductionLevel) {
-        const featureResponse = await this.getFeatures(
+    // @ts-expect-error
+    async loadInterval(interval, reductionLevel) {
+        const scale = 1 / 2 / reductionLevel / this.params.pixelsPerBin;
+        const featureChunks = await this.discretizeAndLoad(
             interval,
-            1 / 2 / reductionLevel / this.params.pixelsPerBin
-        );
-
-        // Discard late responses
-        if (featureResponse.requestId < this.lastRequestId) {
-            return;
-        }
-
-        this.publishData(featureResponse.features);
-    }
-
-    /**
-     *
-     * @param {number[]} interval
-     * @param {number} scale
-     */
-    async getFeatures(interval, scale) {
-        let requestId = ++this.lastRequestId;
-
-        // TODO: Abort previous requests
-        const abortController = new AbortController();
-
-        const discreteChromosomeIntervals =
-            this.genome.continuousToDiscreteChromosomeIntervals(interval);
-
-        // TODO: Error handling
-        const featuresWithChrom = await Promise.all(
-            discreteChromosomeIntervals.map((d) =>
-                this.bbi
+            (d, signal) =>
+                this.#bbi
                     .getFeatures(d.chrom, d.startPos, d.endPos, {
                         scale,
-                        signal: abortController.signal,
+                        signal,
                     })
                     .then((features) =>
                         features.map((f) => ({
@@ -149,14 +115,11 @@ export default class BigWigSource extends windowedMixin(SingleAxisLazySource) {
                             score: f.score,
                         }))
                     )
-            )
         );
 
-        return {
-            requestId,
-            abort: () => abortController.abort(),
-            features: featuresWithChrom.flat(), // TODO: Use batches, not flat
-        };
+        if (featureChunks) {
+            this.publishData(featureChunks);
+        }
     }
 }
 

package/dist/src/data/sources/dynamic/gff3Source.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gff3Source.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/dynamic/gff3Source.js"],"names":[],"mappings":"AAEA;;GAEG;AACH;IAII;;;OAGG;IACH,oBAHW,OAAO,uBAAuB,EAAE,SAAS,QACzC,OAAO,uBAAuB,EAAE,OAAO,EASjD;IAED;;OAEG;IACH,sBAFW,MAAM,EAAE,OASlB;;CACJ;wBAjCuB,kBAAkB"}
+{"version":3,"file":"gff3Source.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/dynamic/gff3Source.js"],"names":[],"mappings":"AAEA;;GAEG;AACH;IAII;;;OAGG;IACH,oBAHW,OAAO,uBAAuB,EAAE,SAAS,QACzC,OAAO,uBAAuB,EAAE,OAAO,EASjD;IAED;;OAEG;IACH,sBAFW,MAAM,EAAE,OAUlB;;CACJ;wBAlCuB,kBAAkB"}

package/dist/src/data/sources/dynamic/gff3Source.js

@@ -24,6 +24,7 @@ export default class Gff3Source extends TabixSource {
      * @param {string[]} lines
      */
     _parseFeatures(lines) {
+        // Hmm. It's silly that we have to first collect individual lines and then join them.
         // eslint-disable-next-line no-sync
         const features = this.#gff?.parseStringSync(lines.join("\n"), {
             parseSequences: false,

package/dist/src/data/sources/dynamic/indexedFastaSource.d.ts

@@ -1,15 +1,4 @@
-declare const IndexedFastaSource_base: {
-    new (...args: any[]): {
-        [x: string]: any;
-        lastQuantizedInterval: number[];
-        quantizeInterval(interval: number[], windowSize: number): number[];
-        checkAndUpdateLastInterval(interval: number[]): boolean;
-    };
-} & typeof SingleAxisLazySource;
-/**
- *
- */
-export default class IndexedFastaSource extends IndexedFastaSource_base {
+export default class IndexedFastaSource extends SingleAxisWindowedSource {
     /**
      * @param {import("../../../spec/data.js").IndexedFastaData} params
      * @param {import("../../../view/view.js").default} view
@@ -18,13 +7,6 @@ export default class IndexedFastaSource extends IndexedFastaSource_base {
     params: import("../../../spec/data.js").IndexedFastaData;
     initializedPromise: Promise<any>;
     fasta: import("@gmod/indexedfasta").IndexedFasta;
-    /**
-     * Listen to the domain change event and update data when the covered windows change.
-     *
-     * @param {number[]} domain Linearized domain
-     */
-    onDomainChanged(domain: number[]): Promise<void>;
 }
-import SingleAxisLazySource from "./singleAxisLazySource.js";
-export {};
+import SingleAxisWindowedSource from "./singleAxisWindowedSource.js";
 //# sourceMappingURL=indexedFastaSource.d.ts.map

package/dist/src/data/sources/dynamic/indexedFastaSource.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"indexedFastaSource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/dynamic/indexedFastaSource.js"],"names":[],"mappings":";;;;;;;;AAIA;;GAEG;AACH;IAGI;;;OAGG;IACH,oBAHW,OAAO,uBAAuB,EAAE,gBAAgB,QAChD,OAAO,uBAAuB,EAAE,OAAO,EA2CjD;IA/BG,yDAAgC;IAMhC,iCAwBE;IATM,iDAKE;IAOd;;;;OAIG;IACH,wBAFW,MAAM,EAAE,iBAkClB;CACJ;iCA/FgC,2BAA2B"}
+{"version":3,"file":"indexedFastaSource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/dynamic/indexedFastaSource.js"],"names":[],"mappings":"AAGA;IACI;;;OAGG;IACH,oBAHW,OAAO,uBAAuB,EAAE,gBAAgB,QAChD,OAAO,uBAAuB,EAAE,OAAO,EA+CjD;IAjCG,yDAAgC;IAQhC,iCAwBE;IATM,iDAKE;CA6BjB;qCA5EoC,+BAA+B"}

package/dist/src/data/sources/dynamic/indexedFastaSource.js

@@ -1,13 +1,7 @@
-import SingleAxisLazySource from "./singleAxisLazySource.js";
-import windowedMixin from "./windowedMixin.js";
 import addBaseUrl from "../../../utils/addBaseUrl.js";
+import SingleAxisWindowedSource from "./singleAxisWindowedSource.js";
 
-/**
- *
- */
-export default class IndexedFastaSource extends windowedMixin(
-    SingleAxisLazySource
-) {
+export default class IndexedFastaSource extends SingleAxisWindowedSource {
     /**
      * @param {import("../../../spec/data.js").IndexedFastaData} params
      * @param {import("../../../view/view.js").default} view
@@ -17,6 +11,8 @@ export default class IndexedFastaSource extends windowedMixin(
         const paramsWithDefaults = {
             channel: "x",
             windowSize: 7000,
+            debounce: 200,
+            debounceMode: "window",
             ...params,
         };
 
@@ -28,6 +24,8 @@ export default class IndexedFastaSource extends windowedMixin(
             throw new Error("No URL provided for IndexedFastaSource");
         }
 
+        this.setupDebouncing(this.params);
+
         this.initializedPromise = new Promise((resolve) => {
             Promise.all([
                 import("buffer"),
@@ -56,41 +54,25 @@ export default class IndexedFastaSource extends windowedMixin(
     }
 
     /**
-     * Listen to the domain change event and update data when the covered windows change.
-     *
-     * @param {number[]} domain Linearized domain
+     * @param {number[]} interval linearized domain
      */
-    async onDomainChanged(domain) {
-        const windowSize = this.params.windowSize;
-
-        if (domain[1] - domain[0] > windowSize) {
-            return;
-        }
-
-        await this.initializedPromise;
-
-        const quantizedInterval = this.quantizeInterval(domain, windowSize);
-
-        if (this.checkAndUpdateLastInterval(quantizedInterval)) {
-            const discreteChromosomeIntervals =
-                this.genome.continuousToDiscreteChromosomeIntervals(
-                    quantizedInterval
-                );
-
-            // TODO: Error handling
-            const sequencesWithChrom = await Promise.all(
-                discreteChromosomeIntervals.map((d) =>
-                    this.fasta
-                        .getSequence(d.chrom, d.startPos, d.endPos)
-                        .then((sequence) => ({
-                            chrom: d.chrom,
-                            start: d.startPos,
-                            sequence,
-                        }))
-                )
-            );
+    async loadInterval(interval) {
+        const features = await this.discretizeAndLoad(
+            interval,
+            async (d, signal) =>
+                this.fasta
+                    .getSequence(d.chrom, d.startPos, d.endPos, {
+                        signal,
+                    })
+                    .then((sequence) => ({
+                        chrom: d.chrom,
+                        start: d.startPos,
+                        sequence,
+                    }))
+        );
 
-            this.publishData(sequencesWithChrom);
+        if (features) {
+            this.publishData([features]);
         }
     }
 }

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

@@ -7,6 +7,11 @@ export default class SingleAxisLazySource extends DataSource {
      * @param {import("../../../spec/channel.js").PrimaryPositionalChannel} channel
      */
     constructor(view: import("../../../view/view.js").default, channel: import("../../../spec/channel.js").PrimaryPositionalChannel);
+    /**
+     * Has to be resolved before any data can be requested upon domain changes.
+     * @protected
+     */
+    protected initializedPromise: Promise<void>;
     view: import("../../../view/view.js").default;
     /** @type {import("../../../spec/channel.js").PrimaryPositionalChannel}  */
     channel: import("../../../spec/channel.js").PrimaryPositionalChannel;
@@ -18,25 +23,39 @@ export default class SingleAxisLazySource extends DataSource {
     getAxisLength(): number;
     /**
      * Convenience getter for genome.
+     *
+     * @protected
      */
-    get genome(): import("../../../genome/genome.js").default;
+    protected get genome(): import("../../../genome/genome.js").default;
     /**
      * Listen to the domain change event and update data when the covered windows change.
      *
      * @param {number[]} domain Linearized domain
      * @param {import("../../../spec/genome.js").ChromosomalLocus[]} complexDomain Chrom/Pos domain
+     * @abstract
      */
     onDomainChanged(domain: number[], complexDomain: import("../../../spec/genome.js").ChromosomalLocus[]): Promise<void>;
+    /**
+     * Sets the loading status of the data source. The status is shown in the UI.
+     *
+     * @param {boolean} status true if loading, false otherwise
+     * @protected
+     */
+    protected setLoadingStatus(status: boolean): void;
     /**
      * TODO: Get rid of this method.
      * Rendering should be requested by the collector.
+     *
+     * @protected
      */
-    requestRender(): void;
+    protected requestRender(): void;
     /**
+     * Resets the data flow and propagates the data.
      *
-     * @param {import("../../flowNode.js").Datum[]} data
+     * @param {import("../../flowNode.js").Datum[][]} chunks An array of data chunks.
+     * @protected
      */
-    publishData(data: import("../../flowNode.js").Datum[]): void;
+    protected publishData(chunks: import("../../flowNode.js").Datum[][]): void;
 }
 import DataSource from "../dataSource.js";
 //# sourceMappingURL=singleAxisLazySource.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"singleAxisLazySource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/dynamic/singleAxisLazySource.js"],"names":[],"mappings":"AAIA;;GAEG;AACH;IACI;;;OAGG;IACH,kBAHW,OAAO,uBAAuB,EAAE,OAAO,WACvC,OAAO,0BAA0B,EAAE,wBAAwB,EAiDrE;IA5CG,8CAAgB;IAYhB,2EAA2E;IAC3E,SADW,OAAO,0BAA0B,EAAE,wBAAwB,CAChD;IAEtB,oEAA4D;IA+BhE;;;OAGG;IACH,wBAWC;IAED;;OAEG;IACH,0DAEC;IAED;;;;;OAKG;IACH,wBAHW,MAAM,EAAE,iBACR,OAAO,yBAAyB,EAAE,gBAAgB,EAAE,iBAI9D;IAED;;;OAGG;IACH,sBAGC;IAQD;;;OAGG;IACH,kBAFW,OAAO,mBAAmB,EAAE,KAAK,EAAE,QAe7C;CACJ;uBA/HsB,kBAAkB"}
+{"version":3,"file":"singleAxisLazySource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/dynamic/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"}

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

@@ -6,6 +6,12 @@ import { reconfigureScales } from "../../../view/scaleResolution.js";
  * Base class for data sources that listen a domain and propagate data lazily.
  */
 export default class SingleAxisLazySource extends DataSource {
+    /**
+     * Has to be resolved before any data can be requested upon domain changes.
+     * @protected
+     */
+    initializedPromise = Promise.resolve();
+
     /**
      * @param {import("../../../view/view.js").default} view
      * @param {import("../../../spec/channel.js").PrimaryPositionalChannel} channel
@@ -78,6 +84,8 @@ export default class SingleAxisLazySource extends DataSource {
 
     /**
      * Convenience getter for genome.
+     *
+     * @protected
      */
     get genome() {
         return this.scaleResolution.getGenome();
@@ -88,14 +96,27 @@ export default class SingleAxisLazySource extends DataSource {
      *
      * @param {number[]} domain Linearized domain
      * @param {import("../../../spec/genome.js").ChromosomalLocus[]} complexDomain Chrom/Pos domain
+     * @abstract
      */
     async onDomainChanged(domain, complexDomain) {
         // Override me
     }
 
+    /**
+     * Sets the loading status of the data source. The status is shown in the UI.
+     *
+     * @param {boolean} status true if loading, false otherwise
+     * @protected
+     */
+    setLoadingStatus(status) {
+        this.view.context.setDataLoadingStatus(this.view, status);
+    }
+
     /**
      * TODO: Get rid of this method.
      * Rendering should be requested by the collector.
+     *
+     * @protected
      */
     requestRender() {
         // An awfully hacky way.
@@ -109,15 +130,19 @@ export default class SingleAxisLazySource extends DataSource {
     }
 
     /**
+     * Resets the data flow and propagates the data.
      *
-     * @param {import("../../flowNode.js").Datum[]} data
+     * @param {import("../../flowNode.js").Datum[][]} chunks An array of data chunks.
+     * @protected
      */
-    publishData(data) {
+    publishData(chunks) {
         this.reset();
         this.beginBatch({ type: "file" });
 
-        for (const d of data) {
-            this._propagate(d);
+        for (const data of chunks) {
+            for (const d of data) {
+                this._propagate(d);
+            }
         }
 
         this.complete();

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

@@ -0,0 +1,60 @@
+/**
+ * @abstract
+ */
+export default class SingleAxisWindowedSource extends SingleAxisLazySource {
+    /**
+     * @type {{windowSize?: number}}
+     * @protected
+     */
+    protected params: {
+        windowSize?: number;
+    };
+    /**
+     * @param {import("../../../spec/data.js").DebouncedData} debounceParams
+     * @protected
+     */
+    protected setupDebouncing(debounceParams: import("../../../spec/data.js").DebouncedData): void;
+    /**
+     * Listen to the domain change event and update data when the covered windows change.
+     *
+     * @param {number[]} domain Linearized domain
+     */
+    onDomainChanged(domain: number[]): Promise<void>;
+    /**
+     * Listen to the domain change event and update data when the covered windows change.
+     *
+     * @param {number[]} interval linearized domain
+     * @protected
+     */
+    protected loadInterval(interval: number[]): Promise<void>;
+    /**
+     * Splits the interval into discrete chromosomal intervals – one for each chromosome –
+     * and loads the data for each of them. Handles abort signals and errors.
+     *
+     * @param {number[]} interval
+     * @param {(discreteInteval: import("@genome-spy/core/genome/genome.js").DiscreteChromosomeInterval, signal: AbortSignal) => Promise<T>} loader
+     * @return {Promise<T[]>}
+     * @template T
+     * @protected
+     */
+    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} windowSize
+     * @protected
+     */
+    protected quantizeInterval(interval: number[], windowSize: number): number[];
+    /**
+     *
+     * @param {number[]} interval
+     * @protected
+     */
+    protected checkAndUpdateLastInterval(interval: number[]): boolean;
+    #private;
+}
+import SingleAxisLazySource from "./singleAxisLazySource.js";
+//# sourceMappingURL=singleAxisWindowedSource.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"singleAxisWindowedSource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/dynamic/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"}

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

@@ -0,0 +1,152 @@
+import SingleAxisLazySource from "./singleAxisLazySource.js";
+import { shallowArrayEquals } from "../../../utils/arrayUtils.js";
+import { debounce } from "@genome-spy/core/utils/debounce.js";
+
+/**
+ * @abstract
+ */
+export default class SingleAxisWindowedSource extends SingleAxisLazySource {
+    #abortController = new AbortController();
+
+    /**
+     * @type {number[]}
+     */
+    #lastQuantizedInterval = [0, 0];
+
+    /**
+     * @type {{windowSize?: number}}
+     * @protected
+     */
+    params;
+
+    /**
+     * @param {import("../../../spec/data.js").DebouncedData} debounceParams
+     * @protected
+     */
+    setupDebouncing(debounceParams) {
+        if (debounceParams.debounce > 0) {
+            if (debounceParams.debounceMode == "domain") {
+                this.onDomainChanged = debounce(
+                    this.onDomainChanged.bind(this),
+                    debounceParams.debounce,
+                    false
+                );
+            } else if (debounceParams.debounceMode == "window") {
+                this.loadInterval = debounce(
+                    this.loadInterval.bind(this),
+                    debounceParams.debounce,
+                    false
+                );
+            }
+        }
+    }
+
+    /**
+     * Listen to the domain change event and update data when the covered windows change.
+     *
+     * @param {number[]} domain Linearized domain
+     */
+    async 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.loadInterval(quantizedInterval);
+        }
+    }
+
+    /**
+     * Listen to the domain change event and update data when the covered windows change.
+     *
+     * @param {number[]} interval linearized domain
+     * @protected
+     */
+    async loadInterval(interval) {
+        // Override me if needed
+    }
+
+    /**
+     * Splits the interval into discrete chromosomal intervals – one for each chromosome –
+     * and loads the data for each of them. Handles abort signals and errors.
+     *
+     * @param {number[]} interval
+     * @param {(discreteInteval: import("@genome-spy/core/genome/genome.js").DiscreteChromosomeInterval, signal: AbortSignal) => Promise<T>} loader
+     * @return {Promise<T[]>}
+     * @template T
+     * @protected
+     */
+    async discretizeAndLoad(interval, loader) {
+        // Abort previous requests
+        this.#abortController.abort();
+
+        this.setLoadingStatus(true);
+
+        this.#abortController = new AbortController();
+        const signal = this.#abortController.signal;
+
+        // GMOD libraries expect a single chromosome/sequence for each request.
+        // Thus, we split the interval into discrete intervals representing
+        // individual chromosomes and load the data for each of them separately
+        // but in parallel.
+        const discreteChromosomeIntervals =
+            this.genome.continuousToDiscreteChromosomeIntervals(interval);
+
+        try {
+            const resultByChrom = await Promise.all(
+                discreteChromosomeIntervals.map(async (d) => loader(d, signal))
+            );
+
+            if (!signal.aborted) {
+                this.setLoadingStatus(false);
+                return resultByChrom;
+            }
+        } catch (e) {
+            if (!signal.aborted) {
+                // TODO: Nice reporting of errors
+                this.setLoadingStatus(false);
+                throw e;
+            }
+        }
+    }
+
+    /**
+     * 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} windowSize
+     * @protected
+     */
+    quantizeInterval(interval, windowSize) {
+        return [
+            Math.max(Math.floor(interval[0] / windowSize - 1) * windowSize, 0),
+            Math.min(
+                Math.ceil(interval[1] / windowSize + 1) * windowSize,
+                this.genome.totalSize // Perhaps scale domain should be used here
+            ),
+        ];
+    }
+
+    /**
+     *
+     * @param {number[]} interval
+     * @protected
+     */
+    checkAndUpdateLastInterval(interval) {
+        if (shallowArrayEquals(this.#lastQuantizedInterval, interval)) {
+            return false;
+        }
+
+        this.#lastQuantizedInterval = interval;
+        return true;
+    }
+}