@genome-spy/core 0.41.0 → 0.42.1

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/encoder/encoder.d.ts

@@ -45,7 +45,12 @@ export function isChannelDefWithScale(channelDef: import("../spec/channel.js").C
  * @param {import("../view/unitView.js").default} view
  * @param {import("../spec/channel.js").Channel} channel
  */
-export function getChannelDefWithScale(view: import("../view/unitView.js").default, channel: import("../spec/channel.js").Channel): import("../spec/channel.js").ChromPosDef | import("../spec/channel.js").PositionDatumDef | import("../spec/channel.js").MarkPropExprDef<import("../spec/channel.js").Type> | import("../spec/channel.js").MarkPropDatumDef<import("../spec/channel.js").Type> | import("../spec/channel.js").MarkPropDatumDef<import("../spec/channel.js").TypeForShape> | import("../spec/channel.js").PositionFieldDef<string> | import("../spec/channel.js").MarkPropFieldDef<string, import("../spec/channel.js").Type> | import("../spec/channel.js").MarkPropFieldDef<string, import("../spec/channel.js").TypeForShape>;
+export function getChannelDefWithScale(view: import("../view/unitView.js").default, channel: import("../spec/channel.js").Channel): import("../spec/channel.js").MarkPropExprDef<import("../spec/channel.js").Type> | import("../spec/channel.js").MarkPropDatumDef<import("../spec/channel.js").Type> | import("../spec/channel.js").ChromPosDef | import("../spec/channel.js").PositionDatumDef | import("../spec/channel.js").MarkPropDatumDef<import("../spec/channel.js").TypeForShape> | import("../spec/channel.js").MarkPropFieldDef<string, import("../spec/channel.js").Type> | import("../spec/channel.js").PositionFieldDef<string> | import("../spec/channel.js").MarkPropFieldDef<string, import("../spec/channel.js").TypeForShape>;
+/**
+ * @param {import("../spec/channel.js").ChannelDef} channelDef
+ * @returns {channelDef is import("../spec/channel.js").TypeMixins<import("../spec/channel.js").Type>}
+ */
+export function isChannelDefWithType(channelDef: import("../spec/channel.js").ChannelDef): channelDef is import("../spec/channel.js").TypeMixins<import("../spec/channel.js").Type>;
 /**
  * @param {import("../spec/channel.js").ChannelDef} channelDef
  * @returns {channelDef is import("../spec/channel.js").ChromPosDef}

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,0IAyFb;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,klBAS9C;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":"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,klBAS9C;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

@@ -101,6 +101,8 @@ export function createEncoder(channelDef, scale, accessor, channel) {
             if (isDiscrete(scale.type)) {
                 // TODO: pass the found values back to the scale/resolution
                 const indexer = createIndexer();
+                // Warning: There's a chance that the domain and indexer get out of sync.
+                // TODO: Make this more robust
                 indexer.addAll(scale.domain());
                 encoder.indexer = indexer;
             }
@@ -197,6 +199,14 @@ export function getChannelDefWithScale(view, channel) {
     }
 }
 
+/**
+ * @param {import("../spec/channel.js").ChannelDef} channelDef
+ * @returns {channelDef is import("../spec/channel.js").TypeMixins<import("../spec/channel.js").Type>}
+ */
+export function isChannelDefWithType(channelDef) {
+    return channelDef && "type" in channelDef;
+}
+
 /**
  * @param {import("../spec/channel.js").ChannelDef} channelDef
  * @returns {channelDef is import("../spec/channel.js").ChromPosDef}

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/arrayBuilder.js

@@ -1,5 +1,5 @@
 import { isNumber } from "vega-util";
-import { ATTRIBUTE_PREFIX } from "../scale/glslScaleGenerator.js";
+import { ATTRIBUTE_PREFIX } from "./glslScaleGenerator.js";
 
 /**
  * @typedef {Object} ConverterMetadata

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

@@ -0,0 +1 @@
+{"version":3,"file":"colorUtils.d.ts","sourceRoot":"","sources":["../../../src/gl/colorUtils.js"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,kDALW,MAAM,GAAG,OAAO,kBAAkB,EAAE,YAAY,MAChD,sBAAsB,UACtB,MAAM,oBACN,YAAY,gBAqCtB;AAED;;;;;GAKG;AACH,uDALW,MAAM,EAAE,qBACR,OAAO,kBAAkB,EAAE,gBAAgB,GAAG,OAAO,kBAAkB,EAAE,sBAAsB,MAC/F,sBAAsB,oBACtB,YAAY,gBA6BtB;AAED;;;;;;;;GAQG;AACH,6CALW,MAAM,EAAE,MACR,sBAAsB,UACtB,MAAM,oBACN,YAAY,gBAqBtB;AAED;;;;;;;GAOG;AACH,mDALW,MAAM,EAAE,MACR,sBAAsB,UACtB,MAAM,oBACN,YAAY,gBActB"}

package/dist/src/{scale → gl}/colorUtils.js

@@ -3,7 +3,7 @@ import { range } from "d3-array";
 import { scheme as vegaScheme, interpolateColors } from "vega-scale";
 import { isString, isArray, isFunction } from "vega-util";
 import { peek } from "../utils/arrayUtils.js";
-import { createOrUpdateTexture } from "../gl/webGLHelper.js";
+import { createOrUpdateTexture } from "./webGLHelper.js";
 
 /**
  * @param {string | import("../spec/scale.js").SchemeParams} schemeParams

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

@@ -82,21 +82,13 @@ export class RectVertexBuilder extends GeometryBuilder {
      * @param {Object} object
      * @param {Record<string, Encoder>} object.encoders
      * @param {string[]} object.attributes
-     * @param {number} [object.tessellationThreshold]
-     *     If the rect is wider than the threshold, tessellate it into pieces
-     * @param {number[]} [object.visibleRange]
      * @param {number} [object.numItems] Number of data items
      */
-    constructor({ encoders, attributes, tessellationThreshold, visibleRange, numItems, }: {
+    constructor({ encoders, attributes, numItems }: {
         encoders: Record<string, import("../types/encoder.js").Encoder>;
         attributes: string[];
-        tessellationThreshold?: number;
-        visibleRange?: number[];
         numItems?: number;
     });
-    visibleRange: number[];
-    tessellationThreshold: number;
-    updateFrac: (arg0: number | number[]) => any;
 }
 export class RuleVertexBuilder extends GeometryBuilder {
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"dataToVertices.d.ts","sourceRoot":"","sources":["../../../src/gl/dataToVertices.js"],"names":[],"mappings":"AAaA;;;;;GAKG;AACH;IACI;;;OAGG;IAEH;;;;;;OAMG;IACH;;qBAJW,MAAM,EAAE;sBACR,MAAM;OAqDhB;IAjDG,gEAAwB;IAGxB;;MAKC;IAED,0BAAoC;IAEpC,8BAAoD;IAiCpD,mBAAmB;IAEnB,yFAAyF;IACzF,UADW,IAAI,GAAG,EAAE,UAAU,CAAC,CACkB;IAGrD;;;;OAIG;IACH,mBAFW,GAAG,QAcb;IAED;;OAEG;IACH,oBAFW,IAAI,GAAG,EAAE,MAAM,EAAE,CAAC,QAM5B;IAED;;;OAGG;IACH,cAHW,GAAG,QACH,MAAM,EAAE,kCAYlB;IAED;;;;OAIG;IACH,sBAJW,OAAO,qBAAqB,EAAE,IAAI,OAClC,MAAM,OACN,MAAM,QAyDhB;IAED;;;;;OAKG;IACH,mBAFW,OAAO,qBAAqB,EAAE,KAAK,QAI7C;IAzDO;;;MAAyB;IA2DjC;QAEQ,uGAAuG;gBAA5F,OAAO,MAAM,EAAE;YAAC,IAAI,EAAE,MAAM,EAAE,GAAG,YAAY,CAAC;YAAC,aAAa,EAAE,MAAM,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,CAAA;SAAC,CAAC;QAEnG,8BAA8B;;QAE9B,8CAA8C;;;MAIrD;CACJ;AAED;IACI;;;;;;;;;OASG;IACH;;oBANW,MAAM,EAAE;gCACR,MAAM;uBAEN,MAAM,EAAE;mBACR,MAAM;OAqBhB;IALG,uBAAgC;IAEhC,8BAA8D;IAE9D,6CAA+D;CAiFtE;AAED;IACI;;;;;;;;;OASG;IACH;;oBANW,MAAM,EAAE;gCACR,MAAM;uBAEN,MAAM,EAAE;mBACR,MAAM;OAsBhB;IANG,uBAAgC;IAEhC,8BAA8D;IAE9D,6CAA+D;IAC/D,4CAA6D;CA2CpE;AAED;IACI;;;;;;OAMG;IACH;;oBAHW,MAAM,EAAE;mBACR,MAAM;OAQhB;CACJ;AAED;IACI;;;;;OAKG;IACH;;oBAHW,MAAM,EAAE;mBACR,MAAM;OAQhB;CAYJ;AAED;IACI;;;;;;;;;OASG;IACH;;oBANW,MAAM,EAAE;qBACR,OAAO,2BAA2B,EAAE,aAAa;oBACjD,OAAO,MAAM,EAAE,GAAG,CAAC;wBACnB,MAAM;sBACN,OAAO;OA4CjB;IA7BG,4DAA2B;IAC3B,2DAA0B;IAE1B,gCAA4B;IAQ5B,qCAAqC;IACrC,sBADmB,GAAG,KAAK,MAAM,CAMf;IAElB,oDAGC;IACD,qDAGC;IAED,8CAAiE;CA8IxE;;;;;;;;YA/mBS,MAAM;;;;WACN,MAAM;YACN,OAAO,yBAAyB,EAAE,MAAM;;yBAdzB,mBAAmB"}
+{"version":3,"file":"dataToVertices.d.ts","sourceRoot":"","sources":["../../../src/gl/dataToVertices.js"],"names":[],"mappings":"AAeA;;;;;GAKG;AACH;IACI;;;OAGG;IAEH;;;;;;OAMG;IACH;;qBAJW,MAAM,EAAE;sBACR,MAAM;OAyEhB;IArEG,gEAAwB;IAGxB;;MAKC;IAQD,0BAAoC;IAEpC,8BAAoD;IA+CpD,mBAAmB;IAEnB,yFAAyF;IACzF,UADW,IAAI,GAAG,EAAE,UAAU,CAAC,CACkB;IAGrD;;;;OAIG;IACH,mBAFW,GAAG,QAcb;IAED;;OAEG;IACH,oBAFW,IAAI,GAAG,EAAE,MAAM,EAAE,CAAC,QAM5B;IAED;;;OAGG;IACH,cAHW,GAAG,QACH,MAAM,EAAE,kCAYlB;IAED;;;;OAIG;IACH,sBAJW,OAAO,qBAAqB,EAAE,IAAI,OAClC,MAAM,OACN,MAAM,QAyDhB;IAED;;;;;OAKG;IACH,mBAFW,OAAO,qBAAqB,EAAE,KAAK,QAI7C;IAzDO;;;MAAyB;IA2DjC;QAEQ,uGAAuG;gBAA5F,OAAO,MAAM,EAAE;YAAC,IAAI,EAAE,MAAM,EAAE,GAAG,YAAY,CAAC;YAAC,aAAa,EAAE,MAAM,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,CAAA;SAAC,CAAC;QAEnG,8BAA8B;;QAE9B,8CAA8C;;;MAIrD;CACJ;AAED;IACI;;;;;;OAMG;IACH;;oBAHW,MAAM,EAAE;mBACR,MAAM;OAQhB;CAkCJ;AAED;IACI;;;;;;;;;OASG;IACH;;oBANW,MAAM,EAAE;gCACR,MAAM;uBAEN,MAAM,EAAE;mBACR,MAAM;OAsBhB;IANG,uBAAgC;IAEhC,8BAA8D;IAE9D,6CAA+D;IAC/D,4CAA6D;CA2CpE;AAED;IACI;;;;;;OAMG;IACH;;oBAHW,MAAM,EAAE;mBACR,MAAM;OAQhB;CACJ;AAED;IACI;;;;;OAKG;IACH;;oBAHW,MAAM,EAAE;mBACR,MAAM;OAQhB;CAYJ;AAED;IACI;;;;;;;;;OASG;IACH;;oBANW,MAAM,EAAE;qBACR,OAAO,2BAA2B,EAAE,aAAa;oBACjD,OAAO,MAAM,EAAE,GAAG,CAAC;wBACnB,MAAM;sBACN,OAAO;OA4CjB;IA7BG,4DAA2B;IAC3B,2DAA0B;IAE1B,gCAA4B;IAQ5B,qCAAqC;IACrC,sBADmB,GAAG,KAAK,MAAM,CAMf;IAElB,oDAGC;IACD,qDAGC;IAED,8CAAiE;CA8IxE;;;;;;;;YArkBS,MAAM;;;;WACN,MAAM;YACN,OAAO,yBAAyB,EAAE,MAAM;;yBAhBzB,mBAAmB"}