@genome-spy/core 0.41.0 → 0.42.0

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

@@ -1,57 +1,23 @@
-declare const TabixSource_base: {
-    new (...args: any[]): {
-        [x: string]: any;
-        lastQuantizedInterval: number[]; /**
-         * @param {import("../../../spec/data.js").TabixData} params
-         * @param {import("../../../view/view.js").default} view
-         */
-        quantizeInterval(interval: number[], windowSize: number): number[];
-        checkAndUpdateLastInterval(interval: number[]): boolean;
-    };
-} & typeof SingleAxisLazySource;
 /**
  * @template T
+ * @abstract
  */
-export default class TabixSource<T> extends TabixSource_base {
+export default class TabixSource<T> extends SingleAxisWindowedSource {
     /**
      * @param {import("../../../spec/data.js").TabixData} params
      * @param {import("../../../view/view.js").default} view
      */
     constructor(params: import("../../../spec/data.js").TabixData, view: import("../../../view/view.js").default);
-    /** Keep track of the order of the requests */
-    lastRequestId: number;
-    /** @type {import("@gmod/tabix").TabixIndexedFile} */
-    tbiIndex: import("@gmod/tabix").TabixIndexedFile;
     params: import("../../../spec/data.js").TabixData;
-    /**
-     * Listen to the domain change event and update data when the covered windows change.
-     *
-     * @param {number[]} domain Linearized domain
-     */
-    onDomainChanged(domain: number[]): Promise<void>;
     initializedPromise: Promise<any>;
-    /**
-     * Listen to the domain change event and update data when the covered windows change.
-     *
-     * @param {number[]} interval linearized domain
-     */
-    doRequest(interval: number[]): Promise<void>;
-    /**
-     *
-     * @param {number[]} interval
-     */
-    getFeatures(interval: number[]): Promise<{
-        requestId: number;
-        abort: () => void;
-        features: T[];
-    }>;
     /**
      * @abstract
+     * @protected
      * @param {string[]} lines
      * @returns {T[]}
      */
-    _parseFeatures(lines: string[]): T[];
+    protected _parseFeatures(lines: string[]): T[];
+    #private;
 }
-import SingleAxisLazySource from "./singleAxisLazySource.js";
-export {};
+import SingleAxisWindowedSource from "./singleAxisWindowedSource.js";
 //# sourceMappingURL=tabixSource.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabixSource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/dynamic/tabixSource.js"],"names":[],"mappings":";;;yCAeI;;;WAGG;;;;;AAbP;;GAEG;AACH;IAOI;;;OAGG;IACH,oBAHW,OAAO,uBAAuB,EAAE,SAAS,QACzC,OAAO,uBAAuB,EAAE,OAAO,EAmDjD;IA3DD,8CAA8C;IAC9C,sBAAkB;IAElB,qDAAqD;IACrD,UADW,OAAO,aAAa,EAAE,gBAAgB,CACxC;IAiBL,kDAAgC;IAwCpC;;;;OAIG;IACH,wBAFW,MAAM,EAAE,iBAclB;IA3CG,iCAuBE;IAsBN;;;;OAIG;IACH,oBAFW,MAAM,EAAE,iBAWlB;IAED;;;OAGG;IACH,sBAFW,MAAM,EAAE;;;;OAoClB;IAED;;;;OAIG;IACH,sBAHW,MAAM,EAAE,GACN,CAAC,EAAE,CAIf;CACJ;iCAzJgC,2BAA2B"}
+{"version":3,"file":"tabixSource.d.ts","sourceRoot":"","sources":["../../../../../src/data/sources/dynamic/tabixSource.js"],"names":[],"mappings":"AAGA;;;GAGG;AACH;IAII;;;OAGG;IACH,oBAHW,OAAO,uBAAuB,EAAE,SAAS,QACzC,OAAO,uBAAuB,EAAE,OAAO,EA8CjD;IAhCG,kDAAgC;IAQhC,iCAuBE;IAoCN;;;;;OAKG;IACH,gCAHW,MAAM,EAAE,GACN,CAAC,EAAE,CAKf;;CACJ;qCAvGoC,+BAA+B"}

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

@@ -1,17 +1,13 @@
-import SingleAxisLazySource from "./singleAxisLazySource.js";
-import windowedMixin from "./windowedMixin.js";
-import { debounce } from "../../../utils/debounce.js";
 import addBaseUrl from "../../../utils/addBaseUrl.js";
+import SingleAxisWindowedSource from "./singleAxisWindowedSource.js";
 
 /**
  * @template T
+ * @abstract
  */
-export default class TabixSource extends windowedMixin(SingleAxisLazySource) {
-    /** Keep track of the order of the requests */
-    lastRequestId = 0;
-
+export default class TabixSource extends SingleAxisWindowedSource {
     /** @type {import("@gmod/tabix").TabixIndexedFile} */
-    tbiIndex;
+    #tbiIndex;
 
     /**
      * @param {import("../../../spec/data.js").TabixData} params
@@ -22,7 +18,8 @@ export default class TabixSource extends windowedMixin(SingleAxisLazySource) {
         const paramsWithDefaults = {
             channel: "x",
             windowSize: 3_000_000,
-            debounceDomainChange: 200,
+            debounce: 200,
+            debounceMode: "domain",
             ...params,
         };
 
@@ -34,13 +31,7 @@ export default class TabixSource extends windowedMixin(SingleAxisLazySource) {
             throw new Error("No URL provided for TabixSource");
         }
 
-        if (this.params.debounceDomainChange > 0) {
-            this.onDomainChanged = debounce(
-                this.onDomainChanged.bind(this),
-                this.params.debounceDomainChange,
-                false
-            );
-        }
+        this.setupDebouncing(this.params);
 
         this.initializedPromise = new Promise((resolve) => {
             Promise.all([
@@ -56,7 +47,7 @@ export default class TabixSource extends windowedMixin(SingleAxisLazySource) {
                 const withBase = (/** @type {string} */ uri) =>
                     new RemoteFile(addBaseUrl(uri, this.view.getBaseUrl()));
 
-                this.tbiIndex = new TabixIndexedFile({
+                this.#tbiIndex = new TabixIndexedFile({
                     filehandle: withBase(this.params.url),
                     tbiFilehandle: withBase(
                         this.params.indexUrl ?? this.params.url + ".tbi"
@@ -68,87 +59,47 @@ export default class TabixSource extends windowedMixin(SingleAxisLazySource) {
         });
     }
 
-    /**
-     * 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;
-
-        if (domain[1] - domain[0] > windowSize) {
-            return;
-        }
-
-        const quantizedInterval = this.quantizeInterval(domain, windowSize);
-
-        if (this.checkAndUpdateLastInterval(quantizedInterval)) {
-            this.doRequest(quantizedInterval);
-        }
-    }
-
     /**
      * Listen to the domain change event and update data when the covered windows change.
      *
      * @param {number[]} interval linearized domain
      */
-    async doRequest(interval) {
-        const featureResponse = await this.getFeatures(interval);
-
-        // Discard late responses
-        if (featureResponse.requestId < this.lastRequestId) {
-            return;
-        }
-
-        this.publishData(featureResponse.features);
-    }
-
-    /**
-     *
-     * @param {number[]} interval
-     */
-    async getFeatures(interval) {
-        await this.initializedPromise;
-
-        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(async (d) => {
+    async loadInterval(interval) {
+        const featureChunks = await this.discretizeAndLoad(
+            interval,
+            async (discreteInterval, signal) => {
                 /** @type {string[]} */
                 const lines = [];
 
-                await this.tbiIndex.getLines(d.chrom, d.startPos, d.endPos, {
-                    lineCallback: (line) => {
-                        lines.push(line);
-                    },
-                    signal: abortController.signal,
-                });
+                await this.#tbiIndex.getLines(
+                    discreteInterval.chrom,
+                    discreteInterval.startPos,
+                    discreteInterval.endPos,
+                    {
+                        lineCallback: (line) => {
+                            lines.push(line);
+                        },
+                        signal,
+                    }
+                );
 
-                // Hmm. It's silly that we have to first collect individual lines and then join them.
                 return this._parseFeatures(lines);
-            })
+            }
         );
 
-        return {
-            requestId,
-            abort: () => abortController.abort(),
-            features: featuresWithChrom.flat(), // TODO: Use batches, not flat
-        };
+        if (featureChunks) {
+            this.publishData(featureChunks);
+        }
     }
 
     /**
      * @abstract
+     * @protected
      * @param {string[]} lines
      * @returns {T[]}
      */
     _parseFeatures(lines) {
+        // Override me
         return [];
     }
 }

package/dist/src/data/transforms/regexFold.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"regexFold.d.ts","sourceRoot":"","sources":["../../../../src/data/transforms/regexFold.js"],"names":[],"mappings":"AAGA;;;;GAIG;AACH;IAKI;;OAEG;IACH,oBAFW,OAAO,yBAAyB,EAAE,eAAe,EA2H3D;IAfO,gBALO,GAAG,UAKe;CAgBpC;qBAzIsD,gBAAgB"}
+{"version":3,"file":"regexFold.d.ts","sourceRoot":"","sources":["../../../../src/data/transforms/regexFold.js"],"names":[],"mappings":"AAGA;;;;GAIG;AACH;IAKI;;OAEG;IACH,oBAFW,OAAO,yBAAyB,EAAE,eAAe,EAmI3D;IAfO,gBALO,GAAG,UAKe;CAgBpC;qBAjJsD,gBAAgB"}

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

@@ -48,6 +48,14 @@ export default class RegexFoldTransform extends FlowNode {
         const detectColumns = (datum) => {
             const colNames = /** @type {string[]} */ (Object.keys(datum));
 
+            for (const re of columnRegex) {
+                if (!colNames.some((colName) => re.test(colName))) {
+                    throw new Error(
+                        `No columns matching the regex ${re.toString()} found in the data!`
+                    );
+                }
+            }
+
             /** @type {Map<string, string[]>} */
             const sampleColMap = new Map();
 

package/dist/src/data/transforms/regexFold.test.js

@@ -157,4 +157,32 @@ describe("RegexFold", () => {
             },
         ]);
     });
+
+    test("Throws error if no columns match the regex", () => {
+        const sampleData = [
+            {
+                row: 1,
+                sample1_a: "r1s1a",
+                sample2_a: "r1s2a",
+            },
+            {
+                row: 2,
+                sample1_a: "r2s1a",
+                sample2_a: "r2s2a",
+            },
+        ];
+
+        /** @type { import("../../spec/transform.js").RegexFoldParams } */
+        const singleGatherConfig = {
+            type: "regexFold",
+            columnRegex: "^(.*)_c$",
+            asValue: "a",
+        };
+
+        expect(() =>
+            processData(new RegexFoldTransform(singleGatherConfig), sampleData)
+        ).toThrowError(
+            "No columns matching the regex /^(.*)_c$/ found in the data!"
+        );
+    });
 });

package/dist/src/genomeSpy.d.ts

@@ -13,6 +13,8 @@ export default class GenomeSpy {
      */
     constructor(container: HTMLElement, spec: import("./spec/root.js").RootSpec, options?: import("./types/embedApi.js").EmbedOptions);
     container: HTMLElement;
+    /** @type {(() => void)[]} */
+    _destructionCallbacks: (() => void)[];
     /** Root level configuration object */
     spec: import("./spec/root.js").RootSpec;
     accessorFactory: AccessorFactory;
@@ -68,6 +70,12 @@ export default class GenomeSpy {
     /** @type {View} */
     viewRoot: import("./view/view.js").default;
     _paramBroker: ParamBroker;
+    /**
+     * Views that are currently loading data using lazy sources.
+     *
+     * @type {Map<View, boolean>}
+     */
+    _loadingViews: Map<import("./view/view.js").default, boolean>;
     /**
      *
      * @param {(name: string) => any[]} provider
@@ -90,9 +98,15 @@ export default class GenomeSpy {
      * @param {any} [payload]
      */
     broadcast(type: BroadcastEventType, payload?: any): void;
+    /**
+     * Draw some layers on top of the canvas. It's easier to do fancy spinning
+     * animations with html elements than with WebGL.
+     */
+    _updateLoadingIndicators(): void;
     _prepareContainer(): void;
     _glHelper: WebGLHelper;
     loadingMessageElement: HTMLDivElement;
+    loadingIndicatorsElement: HTMLDivElement;
     tooltip: Tooltip;
     /**
      * Unregisters all listeners, removes all created dom elements, removes all css classes from the container

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

@@ -1 +1 @@
-{"version":3,"file":"genomeSpy.d.ts","sourceRoot":"","sources":["../../src/genomeSpy.js"],"names":[],"mappings":"AA0CA;IACI;;;;;OAKG;IAEH;;;;;OAKG;IACH,uBAJW,WAAW,qDAEX,OAAO,qBAAqB,EAAE,YAAY,EA+EpD;IA5EG,uBAA0B;IAM1B,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;IAGzC;;;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,0BA2BC;IAvBG,uBAOC;IAED,sCAA0D;IAK1D,iBAA0C;IAW9C;;OAEG;IACH,gBAiBC;IAED,sCAyMC;IAED;;;OAGG;IACH,UAFa,QAAQ,OAAO,CAAC,CAqC5B;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;;;;iCArvBY,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":"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"}

package/dist/src/genomeSpy.js

@@ -1,4 +1,7 @@
 import { formats as vegaFormats } from "vega-loader";
+import { html, render } from "lit-html";
+import { styleMap } from "lit/directives/style-map.js";
+import SPINNER from "./img/90-ring-with-bg.svg";
 
 import css from "./styles/genome-spy.css.js";
 import Tooltip from "./utils/ui/tooltip.js";
@@ -57,6 +60,9 @@ export default class GenomeSpy {
     constructor(container, spec, options = {}) {
         this.container = container;
 
+        /** @type {(() => void)[]} */
+        this._destructionCallbacks = [];
+
         const styleElement = document.createElement("style");
         styleElement.innerHTML = css;
         container.appendChild(styleElement);
@@ -131,6 +137,13 @@ export default class GenomeSpy {
         this.viewRoot = undefined;
 
         this._paramBroker = new ParamBroker();
+
+        /**
+         * Views that are currently loading data using lazy sources.
+         *
+         * @type {Map<View, boolean>}
+         */
+        this._loadingViews = new Map();
     }
 
     /**
@@ -185,6 +198,53 @@ export default class GenomeSpy {
             ?.forEach((listener) => listener(message));
     }
 
+    /**
+     * Draw some layers on top of the canvas. It's easier to do fancy spinning
+     * animations with html elements than with WebGL.
+     */
+    _updateLoadingIndicators() {
+        /** @type {import("lit-html").TemplateResult[]} */
+        const indicators = [];
+
+        const isSomethingVisible = () =>
+            [...this._loadingViews.values()].some((v) => v);
+
+        for (const [view, status] of this._loadingViews) {
+            const c = view.coords;
+            if (c) {
+                const style = {
+                    left: `${c.x}px`,
+                    top: `${c.y}px`,
+                    width: `${c.width}px`,
+                    height: `${c.height}px`,
+                };
+                indicators.push(
+                    html`<div style=${styleMap(style)}>
+                        <div class=${status ? "loading" : ""}>
+                            <img src="${SPINNER}" alt="" />
+                            <span>Loading...</span>
+                        </div>
+                    </div>`
+                );
+            }
+        }
+
+        // Do some hacks to stop css animations of the loading indicators.
+        // Otherwise they fire animation frames even when their opacity is zero.
+        if (isSomethingVisible()) {
+            this.loadingIndicatorsElement.style.display = "block";
+        } else {
+            // TODO: Clear previous timeout
+            setTimeout(() => {
+                if (!isSomethingVisible()) {
+                    this.loadingIndicatorsElement.style.display = "none";
+                }
+            }, 3000);
+        }
+
+        render(indicators, this.loadingIndicatorsElement);
+    }
+
     _prepareContainer() {
         this.container.classList.add("genome-spy");
         this.container.classList.add("loading");
@@ -198,11 +258,58 @@ export default class GenomeSpy {
             this.spec.background
         );
 
+        const resizeCallback = () => {
+            this._glHelper.invalidateSize();
+            dprSetter(window.devicePixelRatio);
+            this.computeLayout();
+            // Render immediately, without RAF
+            this.renderAll();
+        };
+
+        // TODO: Size should be observed only if the content is not absolutely sized
+        const resizeObserver = new ResizeObserver(resizeCallback);
+        resizeObserver.observe(this.container);
+        this._destructionCallbacks.push(() => resizeObserver.disconnect());
+
+        const dprSetter = this._paramBroker.allocateSetter("devicePixelRatio");
+        dprSetter(window.devicePixelRatio);
+
+        /** @type {() => void} */
+        let remove = null;
+
+        const updatePixelRatio = () => {
+            if (remove != null) {
+                remove();
+                resizeCallback();
+            }
+            const media = matchMedia(
+                `(resolution: ${window.devicePixelRatio}dppx)`
+            );
+            media.addEventListener("change", updatePixelRatio);
+            remove = () => {
+                media.removeEventListener("change", updatePixelRatio);
+            };
+        };
+        updatePixelRatio();
+
+        if (remove) {
+            this._destructionCallbacks.push(remove);
+        }
+
+        // The initial loading message that is shown until the first frame is rendered
         this.loadingMessageElement = document.createElement("div");
         this.loadingMessageElement.className = "loading-message";
         this.loadingMessageElement.innerHTML = `<div class="message">Loading<span class="ellipsis">...</span></div>`;
         this.container.appendChild(this.loadingMessageElement);
 
+        // A container for loading indicators (for lazy data sources.)
+        // These could alternatively be included in the view hierarchy,
+        // but it's easier this way – particularly if we want to show
+        // some fancy animated spinners.
+        this.loadingIndicatorsElement = document.createElement("div");
+        this.loadingIndicatorsElement.className = "loading-indicators";
+        this.container.appendChild(this.loadingIndicatorsElement);
+
         this.tooltip = new Tooltip(this.container);
 
         this.loadingMessageElement
@@ -229,6 +336,8 @@ export default class GenomeSpy {
             }
         }
 
+        this._destructionCallbacks.forEach((callback) => callback());
+
         this._glHelper.finalize();
 
         while (this.container.firstChild) {
@@ -267,6 +376,11 @@ export default class GenomeSpy {
             getNamedDataFromProvider: this.getNamedDataFromProvider.bind(this),
             getCurrentHover: () => this._currentHover,
 
+            setDataLoadingStatus: (view, status) => {
+                this._loadingViews.set(view, status);
+                this._updateLoadingIndicators();
+            },
+
             addKeyboardListener: (type, listener) => {
                 // TODO: Listeners should be called only when the mouse pointer is inside the
                 // container or the app covers the full document.
@@ -454,14 +568,6 @@ export default class GenomeSpy {
             this.computeLayout();
             this.animator.requestRender();
 
-            // Register resize listener after the initial layout computation to prevent
-            // incomplete layouts from accidentally polluting any caches related to sizes.
-            this._glHelper.addEventListener("resize", () => {
-                this.computeLayout();
-                // Render immediately, without RAF
-                this.renderAll();
-            });
-
             return true;
         } catch (reason) {
             const message = `${

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

@@ -32,16 +32,11 @@ export default class WebGLHelper {
     }, clearColor?: string);
     _container: HTMLElement;
     _sizeSource: () => {
-        width: number;
-        height: number;
+        width: any;
+        height: any;
     };
     /** @type {Map<string, WebGLShader>} */
     _shaderCache: Map<string, WebGLShader>;
-    /** @type {{ type: string, listener: function}[]} */
-    _listeners: {
-        type: string;
-        listener: Function;
-    }[];
     /** @type {WeakMap<import("../view/scaleResolution.js").default, WebGLTexture>} */
     rangeTextures: WeakMap<import("../view/scaleResolution.js").default, WebGLTexture>;
     canvas: HTMLCanvasElement;
@@ -49,13 +44,12 @@ export default class WebGLHelper {
     /** @type {import("twgl.js").AttachmentOptions[]} */
     _pickingAttachmentOptions: import("twgl.js").AttachmentOptions[];
     _pickingBufferInfo: import("twgl.js").FramebufferInfo;
-    _resizeObserver: ResizeObserver;
     /** @type {[number, number, number, number]} */
     _clearColor: [number, number, number, number];
     invalidateSize(): void;
     _logicalCanvasSize: {
-        width: number;
-        height: number;
+        width: any;
+        height: any;
     };
     _updateDpr(): void;
     dpr: number;
@@ -84,18 +78,9 @@ export default class WebGLHelper {
      * Returns the canvas size in logical pixels (without devicePixelRatio correction)
      */
     getLogicalCanvasSize(): {
-        width: number;
-        height: number;
+        width: any;
+        height: any;
     };
-    /**
-     * @param {"render"|"resize"} eventType
-     * @param {function} listener
-     */
-    addEventListener(eventType: "render" | "resize", listener: Function): void;
-    /**
-     * @param {string} eventType
-     */
-    _emit(eventType: string): void;
     /**
      *
      * @param {number} x

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

@@ -1 +1 @@
-{"version":3,"file":"webGLHelper.d.ts","sourceRoot":"","sources":["../../../src/gl/webGLHelper.js"],"names":[],"mappings":"AA6bA;;;;GAIG;AACH,kCAJW,sBAAsB,gBACtB,WAAW,kBACX,WAAW;;;;;;EA8CrB;AAED;;;;;GAKG;AACH,0CALW,qBAAqB,WACrB,KAAK,OAAO,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,OAC7C,MAAM,EAAE,GAAG,eAAe,YAC1B,YAAY,gBAYtB;AAleD;IACI;;;;;;;OAOG;IACH,uBANW,WAAW,eACX,MAAM;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,eAGrC,MAAM,EA2FhB;IAxFG,wBAA2B;IAC3B,mBAPa;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAOf;IAE7B,uCAAuC;IACvC,cADW,IAAI,MAAM,EAAE,WAAW,CAAC,CACN;IAE7B,oDAAoD;IACpD,YADW;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,WAAU;KAAC,EAAE,CAC5B;IAEpB,kFAAkF;IAClF,eADW,QAAQ,OAAO,4BAA4B,EAAE,OAAO,EAAE,YAAY,CAAC,CAC5C;IAuClC,0BAAoB;IACpB,2BAAY;IAGZ,oDAAoD;IACpD,2BADW,OAAO,SAAS,EAAE,iBAAiB,EAAE,CAQ/C;IACD,sDAGC;IAMD,gCAGE;IAQF,+CAA+C;IAC/C,aADW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CACZ;IAOnC,uBAIC;IAHG;;;MAAmC;IAKvC,mBAEC;IADG,YAAkC;IAGtC;;;;;OAKG;IACH,oBAHW,MAAM,QACN,MAAM,GAAG,MAAM,EAAE,eA2B3B;IAED,iBAcC;IAED,iBAGC;IAED;;;;OAIG;IACH,oCAFW;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;;;MAQ3C;IAED;;OAEG;IACH;;;MA0BC;IAED;;;OAGG;IACH,4BAHW,QAAQ,GAAC,QAAQ,4BAK3B;IAED;;OAEG;IACH,iBAFW,MAAM,QAQhB;IAED;;;;OAIG;IACH,oBAHW,MAAM,KACN,MAAM,cAwBhB;IAED,iBAOC;IAED;;;;;;;;;OASG;IACH,+BAHW,OAAO,4BAA4B,EAAE,OAAO,WAC5C,OAAO,QA4GjB;CACJ"}
+{"version":3,"file":"webGLHelper.d.ts","sourceRoot":"","sources":["../../../src/gl/webGLHelper.js"],"names":[],"mappings":"AA8ZA;;;;GAIG;AACH,kCAJW,sBAAsB,gBACtB,WAAW,kBACX,WAAW;;;;;;EA8CrB;AAED;;;;;GAKG;AACH,0CALW,qBAAqB,WACrB,KAAK,OAAO,SAAS,EAAE,cAAc,EAAE,KAAK,CAAC,OAC7C,MAAM,EAAE,GAAG,eAAe,YAC1B,YAAY,gBAYtB;AAncD;IACI;;;;;;;OAOG;IACH,uBANW,WAAW,eACX,MAAM;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,eAGrC,MAAM,EAmFhB;IAhFG,wBAA2B;IAC3B;;;MAKO;IAEP,uCAAuC;IACvC,cADW,IAAI,MAAM,EAAE,WAAW,CAAC,CACN;IAE7B,kFAAkF;IAClF,eADW,QAAQ,OAAO,4BAA4B,EAAE,OAAO,EAAE,YAAY,CAAC,CAC5C;IAuClC,0BAAoB;IACpB,2BAAY;IAGZ,oDAAoD;IACpD,2BADW,OAAO,SAAS,EAAE,iBAAiB,EAAE,CAQ/C;IACD,sDAGC;IAOD,+CAA+C;IAC/C,aADW,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CACZ;IAOnC,uBAIC;IAHG;;;MAAmC;IAKvC,mBAEC;IADG,YAAkC;IAGtC;;;;;OAKG;IACH,oBAHW,MAAM,QACN,MAAM,GAAG,MAAM,EAAE,eA2B3B;IAED,iBAcC;IAED,iBAEC;IAED;;;;OAIG;IACH,oCAFW;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE;;;MAQ3C;IAED;;OAEG;IACH;;;MAuBC;IAED;;;;OAIG;IACH,oBAHW,MAAM,KACN,MAAM,cAwBhB;IAED,iBAOC;IAED;;;;;;;;;OASG;IACH,+BAHW,OAAO,4BAA4B,EAAE,OAAO,WAC5C,OAAO,QA4GjB;CACJ"}

package/dist/src/gl/webGLHelper.js

@@ -39,14 +39,16 @@ export default class WebGLHelper {
      */
     constructor(container, sizeSource, clearColor) {
         this._container = container;
-        this._sizeSource = sizeSource;
+        this._sizeSource =
+            sizeSource ??
+            (() => ({
+                width: undefined,
+                height: undefined,
+            }));
 
         /** @type {Map<string, WebGLShader>} */
         this._shaderCache = new Map();
 
-        /** @type {{ type: string, listener: function}[]} */
-        this._listeners = [];
-
         /** @type {WeakMap<import("../view/scaleResolution.js").default, WebGLTexture>} */
         this.rangeTextures = new WeakMap();
 
@@ -108,16 +110,6 @@ export default class WebGLHelper {
 
         this.adjustGl();
 
-        // TODO: Size should be observed only if the content is not absolutely sized
-        this._resizeObserver = new ResizeObserver((entries) => {
-            this.invalidateSize();
-            this._emit("resize");
-        });
-        this._resizeObserver.observe(this._container);
-
-        // TODO: Observe devicePixelRatio
-        // https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Monitoring_screen_resolution_or_zoom_level_changes
-
         this._updateDpr();
 
         /** @type {[number, number, number, number]} */
@@ -188,7 +180,6 @@ export default class WebGLHelper {
     }
 
     finalize() {
-        this._resizeObserver.unobserve(this._container);
         this.canvas.remove();
     }
 
@@ -214,10 +205,7 @@ export default class WebGLHelper {
         }
 
         // TODO: The size should never be smaller than the minimum content size!
-        const contentSize = this._sizeSource?.() ?? {
-            width: undefined,
-            height: undefined,
-        };
+        const contentSize = this._sizeSource();
 
         const cs = window.getComputedStyle(this._container, null);
         const width =
@@ -236,25 +224,6 @@ export default class WebGLHelper {
         return this._logicalCanvasSize;
     }
 
-    /**
-     * @param {"render"|"resize"} eventType
-     * @param {function} listener
-     */
-    addEventListener(eventType, listener) {
-        this._listeners.push({ type: eventType, listener });
-    }
-
-    /**
-     * @param {string} eventType
-     */
-    _emit(eventType) {
-        for (const entry of this._listeners) {
-            if (entry.type === eventType) {
-                entry.listener();
-            }
-        }
-    }
-
     /**
      *
      * @param {number} x

package/dist/src/img/90-ring-with-bg.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_ajPY{transform-origin:center;animation:spinner_AtaB .75s infinite linear}@keyframes spinner_AtaB{100%{transform:rotate(360deg)}}</style><path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/><path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" class="spinner_ajPY"/></svg>

package/dist/src/img/README.md

@@ -0,0 +1,5 @@
+# Image assets
+
+## Spinner svg
+
+Spinner: 90-ring-with-bg.svg, MIT License, https://github.com/n3r4zzurr0/svg-spinners