@genome-spy/core 0.40.0 → 0.42.0

package/dist/src/marks/text.js

@@ -1,8 +1,14 @@
 import { isString } from "vega-util";
 import { format } from "d3-format";
-import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
+import {
+    drawBufferInfo,
+    setBlockUniforms,
+    setBuffersAndAttributes,
+    setUniforms,
+} from "twgl.js";
 import VERTEX_SHADER from "../gl/text.vertex.glsl.js";
 import FRAGMENT_SHADER from "../gl/text.fragment.glsl.js";
+import COMMON_SHADER from "../gl/text.common.glsl.js";
 import { TextVertexBuilder } from "../gl/dataToVertices.js";
 
 import Mark from "./mark.js";
@@ -142,7 +148,9 @@ export default class TextMark extends Mark {
 
     async initializeGraphics() {
         await super.initializeGraphics();
-        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER);
+        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER, [
+            COMMON_SHADER,
+        ]);
     }
 
     finalizeGraphicsInitialization() {
@@ -152,8 +160,24 @@ export default class TextMark extends Mark {
 
         const props = this.properties;
 
+        this.registerMarkUniform(
+            "uSdfNumerator",
+            /** @type {import("../spec/mark.js").ExprRef | number} */
+            ({ expr: "devicePixelRatio" }),
+            (dpr) => {
+                let q = 0.35; // TODO: Ensure that this makes sense. Now chosen by trial & error
+                if (this.properties.logoLetters) {
+                    // Adjust to make stretched letters a bit less blurry
+                    // A proper solution would probably be to compute gradients in the fragment shader
+                    // to find a suitable divisor.
+                    q /= 2;
+                }
+                return this.font.metrics.common.base / (dpr / q);
+            }
+        );
+
         // TODO: Use uniform block.
-        setUniforms(this.programInfo, {
+        setBlockUniforms(this.markUniformInfo, {
             uPaddingX: props.paddingX,
             uPaddingY: props.paddingY,
             uFlushX: !!props.flushX,
@@ -229,23 +253,13 @@ export default class TextMark extends Mark {
     prepareRender(options) {
         const ops = super.prepareRender(options);
 
-        let q = 0.35; // TODO: Ensure that this makes sense. Now chosen by trial & error
-        if (this.properties.logoLetters) {
-            // Adjust to make stretched letters a bit less blurry
-            // A proper solution would probably be to compute gradients in the fragment shader
-            // to find a suitable divisor.
-            q /= 2;
-        }
-        const uSdfNumerator =
-            this.font.metrics.common.base /
-            (this.unitView.context.devicePixelRatio / q);
-
-        ops.push(() =>
+        ops.push(() => {
             setUniforms(this.programInfo, {
                 uTexture: this.font.texture,
-                uSdfNumerator,
-            })
-        );
+            });
+        });
+
+        ops.push(() => this.bindOrSetMarkUniformBlock());
 
         ops.push(() =>
             setBuffersAndAttributes(

package/dist/src/paramBroker.d.ts

@@ -0,0 +1,30 @@
+/**
+ * A class that manages parameters and expressions. Still a work in progress.
+ *
+ * TODO: Write tests for this class.
+ *
+ * This should eventually handle the following:
+ * - Parameter registration
+ * - Dependency tracking
+ * - Calling observers when a parameter changes
+ * - Somehow saving parameter "state" (in bookmarks)
+ * - Maybe something else
+ */
+export default class ParamBroker {
+    /**
+     *
+     * @param {string} paramName
+     * @returns {(value: any) => void}
+     */
+    allocateSetter(paramName: string): (value: any) => void;
+    /**
+     * Parse expr and return a function that returns the value of the parameter.
+     *
+     * @param {string} expr
+     */
+    createExpression(expr: string): ((x: object) => any) & import("./utils/expression.js").ExpressionProps & {
+        addListener: (listener: () => void) => void;
+    };
+    #private;
+}
+//# sourceMappingURL=paramBroker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"paramBroker.d.ts","sourceRoot":"","sources":["../../src/paramBroker.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AACH;IAyBI;;;;OAIG;IACH,0BAHW,MAAM,WACI,GAAG,KAAK,IAAI,CAqBhC;IAID;;;;OAIG;IACH,uBAFW,MAAM;gCAG6E,MAAM,IAAI,KAAK,IAAI;MA0BhH;;CACJ"}

package/dist/src/paramBroker.js

@@ -0,0 +1,102 @@
+import { isString } from "vega-util";
+import createFunction from "./utils/expression.js";
+
+/**
+ * A class that manages parameters and expressions. Still a work in progress.
+ *
+ * TODO: Write tests for this class.
+ *
+ * This should eventually handle the following:
+ * - Parameter registration
+ * - Dependency tracking
+ * - Calling observers when a parameter changes
+ * - Somehow saving parameter "state" (in bookmarks)
+ * - Maybe something else
+ */
+export default class ParamBroker {
+    /** @type {Map<string, any>} */
+    #params;
+
+    /** @type {Set<string>} */
+    #allocatedSetters;
+
+    /** @type {Record<string, any>} */
+    #proxy;
+
+    /** @type {Map<string, Set<() => void>>} */
+    #paramListeners;
+
+    constructor() {
+        this.#params = new Map();
+        this.#allocatedSetters = new Set();
+        this.#paramListeners = new Map();
+
+        this.#proxy = new Proxy(this.#params, {
+            get(target, prop) {
+                return isString(prop) ? target.get(prop) : undefined;
+            },
+        });
+    }
+
+    /**
+     *
+     * @param {string} paramName
+     * @returns {(value: any) => void}
+     */
+    allocateSetter(paramName) {
+        if (this.#allocatedSetters.has(paramName)) {
+            throw new Error(
+                "Setter already allocated for parameter: " + paramName
+            );
+        }
+
+        this.#allocatedSetters.add(paramName);
+
+        return (value) => {
+            this.#params.set(paramName, value);
+
+            const listeners = this.#paramListeners.get(paramName);
+            if (listeners) {
+                for (const listener of listeners) {
+                    listener();
+                }
+            }
+        };
+    }
+
+    // TODO: deallocateSetter
+
+    /**
+     * Parse expr and return a function that returns the value of the parameter.
+     *
+     * @param {string} expr
+     */
+    createExpression(expr) {
+        /** @type {import("./utils/expression.js").ExpressionFunction & { addListener: (listener: () => void) => void}} */
+        const fn = /** @type {any} */ (createFunction(expr, this.#proxy));
+
+        for (const g of fn.globals) {
+            if (!this.#allocatedSetters.has(g)) {
+                throw new Error(
+                    `Unknown variable "${g}" in expression: ${expr}`
+                );
+            }
+        }
+
+        /**
+         *
+         * @param {() => void} listener
+         */
+        fn.addListener = (listener) => {
+            for (const g of fn.globals) {
+                const listeners = this.#paramListeners.get(g) ?? new Set();
+                this.#paramListeners.set(g, listeners);
+                listeners.add(listener);
+            }
+        };
+
+        // TODO: remove listener
+
+        return fn;
+    }
+}

package/dist/src/spec/data.d.ts

@@ -202,6 +202,29 @@ export type LazyDataParams =
     | BamData
     | Gff3Data;
 
+export interface DebouncedData {
+    /**
+     * Debounce time for data updates, in milliseconds. Debouncing prevents
+     * excessive data updates when the user is zooming or panning around.
+     *
+     * __Default value:__ `200`
+     */
+    debounce?: number;
+
+    /**
+     * The debounce mode for data updates. If set to `"domain"`, domain change
+     * events (panning and zooming) will be debounced. If set to `"window"`,
+     * the data fetches initiated by the changes to the visible window (or tile)
+     * will be debounced.  If your data is small, the `"window"` is better as
+     * it will start fetching data while the user is still panning around,
+     * resulting in a shorter perceived latency.
+     *
+     * __Default value:__ `"window"`
+     *
+     */
+    debounceMode?: "domain" | "window";
+}
+
 export interface AxisTicksData {
     type: "axisTicks";
 
@@ -219,7 +242,7 @@ export interface AxisGenomeData {
     channel: PrimaryPositionalChannel;
 }
 
-export interface IndexedFastaData {
+export interface IndexedFastaData extends DebouncedData {
     type: "indexedFasta";
 
     /**
@@ -250,7 +273,7 @@ export interface IndexedFastaData {
     windowSize?: number;
 }
 
-export interface BigWigData {
+export interface BigWigData extends DebouncedData {
     type: "bigwig";
 
     /**
@@ -273,7 +296,7 @@ export interface BigWigData {
     pixelsPerBin?: number;
 }
 
-export interface BigBedData {
+export interface BigBedData extends DebouncedData {
     type: "bigbed";
 
     /**
@@ -297,7 +320,7 @@ export interface BigBedData {
     windowSize?: number;
 }
 
-export interface BamData {
+export interface BamData extends DebouncedData {
     type: "bam";
 
     /**
@@ -328,7 +351,7 @@ export interface BamData {
     windowSize?: number;
 }
 
-export interface TabixData {
+export interface TabixData extends DebouncedData {
     /**
      * Which channel's scale domain to monitor.
      *
@@ -355,14 +378,6 @@ export interface TabixData {
      * __Default value:__ `30000000`
      */
     windowSize?: number;
-
-    /**
-     * The debounce time for domain changes, in milliseconds. Debouncing prevents
-     * data fetches while the user is still panning around.
-     *
-     * __Default value:__ `200`
-     */
-    debounceDomainChange?: number;
 }
 
 export interface Gff3Data extends TabixData {

package/dist/src/spec/mark.d.ts

@@ -2,6 +2,15 @@ import { Scalar } from "./channel.js";
 import { Align, Baseline, FontStyle, FontWeight } from "./font.js";
 import { Tooltip } from "./tooltip.js";
 
+// TODO: This may not be the best place for this type.
+// Also, this is now similar to the ExprDef type in channel.d.ts
+export interface ExprRef {
+    /**
+     * The expression string.
+     */
+    expr: string;
+}
+
 export type MarkType = "rect" | "point" | "rule" | "text" | "link";
 
 export interface FillAndStrokeProps {
@@ -63,7 +72,7 @@ export interface RectProps extends SecondaryPositionProps {
      * **Default value:** `0`
      */
     // TODO: Rename to minCompensatedOpacity or something like that
-    minOpacity?: number;
+    minOpacity?: number | ExprRef;
 
     /**
      * The minimum width of a rectangle in pixels. The property clamps rectangles'
@@ -74,49 +83,49 @@ export interface RectProps extends SecondaryPositionProps {
      *
      * **Default value:** `1`
      */
-    minWidth?: number;
+    minWidth?: number | ExprRef;
 
     /**
      * The minimum height of a rectangle in pixels. The property clamps rectangles' heights.
      *
      * **Default value:** `0`
      */
-    minHeight?: number;
+    minHeight?: number | ExprRef;
 
     /**
      * Radius of the rounded corners.
      *
      * **Default value:** `0`
      */
-    cornerRadius?: number;
+    cornerRadius?: number | ExprRef;
 
     /**
      * Radius of the top left rounded corner. Has higher precedence than `cornerRadius`.
      *
      * **Default value:** (None)
      */
-    cornerRadiusTopLeft?: number;
+    cornerRadiusTopLeft?: number | ExprRef;
 
     /**
      * Radius of the top right rounded corner. Has higher precedence than `cornerRadius`.
      *
      * **Default value:** (None)
      */
-    cornerRadiusTopRight?: number;
+    cornerRadiusTopRight?: number | ExprRef;
 
     /**
      * Radius of the bottom left rounded corner. Has higher precedence than `cornerRadius`.
      *
      * **Default value:** (None)
      */
-    cornerRadiusBottomLeft?: number;
+    cornerRadiusBottomLeft?: number | ExprRef;
 
     /**
      * Radius of the bottom right rounded corner. Has higher precedence than `cornerRadius`.
      *
      * **Default value:** (None)
      */
-    cornerRadiusBottomRight?: number;
+    cornerRadiusBottomRight?: number | ExprRef;
 }
 
 export interface RuleProps extends SecondaryPositionProps {
@@ -126,7 +135,7 @@ export interface RuleProps extends SecondaryPositionProps {
      *
      * **Default value:** `0`
      */
-    minLength?: number;
+    minLength?: number | ExprRef;
 
     /**
      * An array of of alternating stroke and gap lengths or `null` for solid strokes.
@@ -147,7 +156,7 @@ export interface RuleProps extends SecondaryPositionProps {
      *
      * **Default value:** `"butt"`
      */
-    strokeCap?: "butt" | "square" | "round";
+    strokeCap?: "butt" | "square" | "round" | ExprRef;
 }
 
 export interface TextProps
@@ -333,7 +342,7 @@ export interface LinkProps extends SecondaryPositionProps {
      *
      * **Default value:** `"arc"`
      */
-    linkShape?: "arc" | "diagonal" | "line" | "dome";
+    linkShape?: "arc" | "diagonal" | "line" | "dome" | ExprRef;
 
     /**
      * The orientation of the link path. Either `"vertical"` or `"horizontal"`.
@@ -341,7 +350,7 @@ export interface LinkProps extends SecondaryPositionProps {
      *
      * **Default value:** `"vertical"`
      */
-    orient?: "vertical" | "horizontal";
+    orient?: "vertical" | "horizontal" | ExprRef;
 
     /**
      * Whether the apex of the `"dome"` shape is clamped to the viewport edge. When over a
@@ -350,7 +359,7 @@ export interface LinkProps extends SecondaryPositionProps {
      *
      * **Default value:** `false`
      */
-    clampApex?: boolean;
+    clampApex?: boolean | ExprRef;
 
     /**
      * The number of segments in the bézier curve. Affects the rendering quality and performance.
@@ -365,14 +374,14 @@ export interface LinkProps extends SecondaryPositionProps {
      *
      * **Default value:** `1.0`
      */
-    arcHeightFactor?: number;
+    arcHeightFactor?: number | ExprRef;
 
     /**
      * The minimum height of an `"arc"` shape. Makes very short links more clearly visible.
      *
      * **Default value:** `1.5`
      */
-    minArcHeight?: number;
+    minArcHeight?: number | ExprRef;
 
     /**
      * The maximum length of `"arc"` shape's chord in pixels. The chord is the line segment
@@ -383,7 +392,7 @@ export interface LinkProps extends SecondaryPositionProps {
      *
      * **Default value:** `50000`
      */
-    maxChordLength?: number;
+    maxChordLength?: number | ExprRef;
 
     /**
      * The range of the `"arc"` shape's fading distance in pixels. This property allows for
@@ -393,7 +402,7 @@ export interface LinkProps extends SecondaryPositionProps {
      *
      * **Default value:** `false`
      */
-    arcFadingDistance?: [number, number] | false;
+    arcFadingDistance?: [number, number] | false | ExprRef;
 
     /**
      * The minimum stroke width of the links when pointing with the mouse cursor.
@@ -401,7 +410,7 @@ export interface LinkProps extends SecondaryPositionProps {
      *
      * **Default value:** `3.0`
      */
-    minPickingSize?: number;
+    minPickingSize?: number | ExprRef;
 }
 
 // TODO: Mark-specific configs
@@ -463,14 +472,6 @@ export interface MarkConfig
      * This property is intended for internal use.
      */
     minBufferSize?: number;
-
-    /**
-     * Builds and index for efficient rendering of subsets of the data.
-     * The data must be sorted by the x coordinate.
-     *
-     * TODO: This should be enabled automatically if the data are sorted.
-     */
-    buildIndex?: boolean;
 }
 
 export interface MarkConfigAndType extends MarkConfig {

package/dist/src/spec/view.d.ts

@@ -7,6 +7,7 @@ import {
     PrimaryPositionalChannel,
 } from "./channel.js";
 import {
+    ExprRef,
     FillAndStrokeProps,
     MarkConfigAndType,
     MarkType,
@@ -43,7 +44,7 @@ export interface DynamicOpacity {
     values: number[];
 }
 
-export type ViewOpacityDef = number | DynamicOpacity;
+export type ViewOpacityDef = number | DynamicOpacity | ExprRef;
 
 export interface Step {
     step: number;

package/dist/src/styles/genome-spy.css.d.ts

@@ -1,3 +1,3 @@
 export default css;
-declare const css: ".genome-spy {\n  font-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  position: relative;\n}\n.genome-spy canvas {\n  transform: scale(1, 1);\n  opacity: 1;\n  transition: transform 0.6s, opacity 0.6s;\n}\n.genome-spy .loading-message {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.genome-spy .loading-message .message {\n  color: #666;\n  opacity: 0;\n  transition: opacity 0.7s;\n}\n.genome-spy.loading canvas {\n  transform: scale(0.95, 0.95);\n  opacity: 0;\n}\n.genome-spy.loading .loading-message .message {\n  opacity: 1;\n}\n.genome-spy.loading .ellipsis {\n  animation: blinker 1s linear infinite;\n}\n@keyframes blinker {\n  50% {\n    opacity: 0;\n  }\n}\n.genome-spy .tooltip {\n  position: absolute;\n  max-width: 450px;\n  overflow: hidden;\n  background: #f6f6f6;\n  padding: 10px;\n  font-size: 13px;\n  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n  pointer-events: none;\n  z-index: 100;\n}\n.genome-spy .tooltip > :last-child {\n  margin-bottom: 0;\n}\n.genome-spy .tooltip > .title {\n  padding-bottom: 5px;\n  margin-bottom: 5px;\n  border-bottom: 1px dashed #b6b6b6;\n}\n.genome-spy .tooltip .summary {\n  font-size: 12px;\n}\n.genome-spy .tooltip table {\n  border-collapse: collapse;\n}\n.genome-spy .tooltip table:first-child {\n  margin-top: 0;\n}\n.genome-spy .tooltip table th,\n.genome-spy .tooltip table td {\n  padding: 2px 0.4em;\n  vertical-align: top;\n}\n.genome-spy .tooltip table th:first-child,\n.genome-spy .tooltip table td:first-child {\n  padding-left: 0;\n}\n.genome-spy .tooltip table th {\n  text-align: left;\n  font-weight: bold;\n}\n.genome-spy .tooltip .color-legend {\n  display: inline-block;\n  width: 0.8em;\n  height: 0.8em;\n  margin-left: 0.4em;\n  box-shadow: 0px 0px 3px 1px white;\n}\n.genome-spy .tooltip .attributes .hovered {\n  background-color: #e0e0e0;\n}\n.genome-spy .tooltip .na {\n  color: #aaa;\n  font-style: italic;\n  font-size: 80%;\n}\n.genome-spy .gene-track-tooltip .summary {\n  font-size: 90%;\n}\n.genome-spy .message-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 100%;\n}\n.genome-spy .message-box > div {\n  border: 1px solid red;\n  padding: 10px;\n  background: #fff0f0;\n}";
+declare const css: ".genome-spy {\n  font-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  position: relative;\n}\n.genome-spy canvas {\n  transform: scale(1, 1);\n  opacity: 1;\n  transition: transform 0.6s, opacity 0.6s;\n}\n.genome-spy .loading-message {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.genome-spy .loading-message .message {\n  color: #666;\n  opacity: 0;\n  transition: opacity 0.7s;\n}\n.genome-spy.loading canvas {\n  transform: scale(0.95, 0.95);\n  opacity: 0;\n}\n.genome-spy.loading .loading-message .message {\n  opacity: 1;\n}\n.genome-spy.loading .ellipsis {\n  animation: blinker 1s linear infinite;\n}\n@keyframes blinker {\n  50% {\n    opacity: 0;\n  }\n}\n.genome-spy .loading-indicators {\n  position: absolute;\n  inset: 0;\n  user-select: none;\n  pointer-events: none;\n}\n.genome-spy .loading-indicators div {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.genome-spy .loading-indicators div > div {\n  font-size: 11px;\n  transition: opacity 0.2s;\n  background: white;\n  padding: 2px 5px;\n  display: flex;\n  border-radius: 3px;\n  gap: 0.5em;\n  opacity: 0;\n}\n.genome-spy .loading-indicators div > div.loading {\n  opacity: 0.5;\n}\n.genome-spy .loading-indicators div > div > * {\n  display: block;\n}\n.genome-spy .loading-indicators div > div img {\n  width: 1.5em;\n  height: 1.5em;\n}\n.genome-spy .tooltip {\n  position: absolute;\n  max-width: 450px;\n  overflow: hidden;\n  background: #f6f6f6;\n  padding: 10px;\n  font-size: 13px;\n  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n  pointer-events: none;\n  z-index: 100;\n}\n.genome-spy .tooltip > :last-child {\n  margin-bottom: 0;\n}\n.genome-spy .tooltip > .title {\n  padding-bottom: 5px;\n  margin-bottom: 5px;\n  border-bottom: 1px dashed #b6b6b6;\n}\n.genome-spy .tooltip .summary {\n  font-size: 12px;\n}\n.genome-spy .tooltip table {\n  border-collapse: collapse;\n}\n.genome-spy .tooltip table:first-child {\n  margin-top: 0;\n}\n.genome-spy .tooltip table th,\n.genome-spy .tooltip table td {\n  padding: 2px 0.4em;\n  vertical-align: top;\n}\n.genome-spy .tooltip table th:first-child,\n.genome-spy .tooltip table td:first-child {\n  padding-left: 0;\n}\n.genome-spy .tooltip table th {\n  text-align: left;\n  font-weight: bold;\n}\n.genome-spy .tooltip .color-legend {\n  display: inline-block;\n  width: 0.8em;\n  height: 0.8em;\n  margin-left: 0.4em;\n  box-shadow: 0px 0px 3px 1px white;\n}\n.genome-spy .tooltip .attributes .hovered {\n  background-color: #e0e0e0;\n}\n.genome-spy .tooltip .na {\n  color: #aaa;\n  font-style: italic;\n  font-size: 80%;\n}\n.genome-spy .gene-track-tooltip .summary {\n  font-size: 90%;\n}\n.genome-spy .message-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 100%;\n}\n.genome-spy .message-box > div {\n  border: 1px solid red;\n  padding: 10px;\n  background: #fff0f0;\n}";
 //# sourceMappingURL=genome-spy.css.d.ts.map

package/dist/src/styles/genome-spy.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,q6EA+GG"}
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,0jGA4IG"}

package/dist/src/styles/genome-spy.css.js

@@ -9,10 +9,7 @@ const css = `.genome-spy {
 }
 .genome-spy .loading-message {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -37,6 +34,38 @@ const css = `.genome-spy {
     opacity: 0;
   }
 }
+.genome-spy .loading-indicators {
+  position: absolute;
+  inset: 0;
+  user-select: none;
+  pointer-events: none;
+}
+.genome-spy .loading-indicators div {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.genome-spy .loading-indicators div > div {
+  font-size: 11px;
+  transition: opacity 0.2s;
+  background: white;
+  padding: 2px 5px;
+  display: flex;
+  border-radius: 3px;
+  gap: 0.5em;
+  opacity: 0;
+}
+.genome-spy .loading-indicators div > div.loading {
+  opacity: 0.5;
+}
+.genome-spy .loading-indicators div > div > * {
+  display: block;
+}
+.genome-spy .loading-indicators div > div img {
+  width: 1.5em;
+  height: 1.5em;
+}
 .genome-spy .tooltip {
   position: absolute;
   max-width: 450px;

package/dist/src/styles/genome-spy.scss

@@ -18,10 +18,7 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
 
     .loading-message {
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        inset: 0;
         display: flex;
 
         align-items: center;
@@ -55,6 +52,45 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
         }
     }
 
+    .loading-indicators {
+        position: absolute;
+        inset: 0;
+
+        user-select: none;
+        pointer-events: none;
+
+        div {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            > div {
+                font-size: 11px;
+                transition: opacity 0.2s;
+                background: white;
+                padding: 2px 5px;
+                display: flex;
+                border-radius: 3px;
+                gap: 0.5em;
+                opacity: 0;
+
+                &.loading {
+                    opacity: 0.5;
+                }
+
+                > * {
+                    display: block;
+                }
+
+                img {
+                    width: 1.5em;
+                    height: 1.5em;
+                }
+            }
+        }
+    }
+
     .tooltip {
         position: absolute;
 

package/dist/src/types/viewContext.d.ts

@@ -11,6 +11,7 @@ import { Datum } from "../data/flowNode.js";
 import { ImportSpec, ViewSpec } from "../spec/view.js";
 import ContainerView from "./containerView.js";
 import { BroadcastEventType } from "../genomeSpy.js";
+import ParamBroker from "../paramBroker.js";
 
 export interface Hover {
     mark: Mark;
@@ -28,6 +29,7 @@ export default interface ViewContext {
     genomeStore?: GenomeStore;
     fontManager: BmFontManager;
 
+    paramBroker: ParamBroker;
     devicePixelRatio: number;
 
     requestLayoutReflow: () => void;
@@ -68,6 +70,15 @@ export default interface ViewContext {
 
     getNamedDataFromProvider: (name: string) => any[];
 
+    /**
+     * Allows lazy data sources to signal that they are loading data.
+     * The status is shown in the UI somewhere within or near the view.
+     *
+     * @param view The view where the data source is located.
+     * @param status true if loading, false if not loading.
+     */
+    setDataLoadingStatus: (view: View, status: boolean) => void;
+
     /**
      * Returns true if the view is configured to be visible.
      * N.B. This does NOT consider ancestors' visibility.

package/dist/src/utils/binnedIndex.d.ts

@@ -9,6 +9,8 @@
  * A binned index for (overlapping) ranges that are sorted by their start position.
  * Each indexed range is associated with respective vertex indices.
  *
+ * The indexing scheme is somewhat similar to Tabix (https://academic.oup.com/bioinformatics/article/27/5/718/262743).
+ *
  * @param {number} size Number of bins
  * @param {[number, number]} domain Domain of positions
  * @param {(datum: T) => number} accessor Accessor for range's start position

package/dist/src/utils/binnedIndex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"binnedIndex.d.ts","sourceRoot":"","sources":["../../../src/utils/binnedIndex.js"],"names":[],"mappings":"AAKA;;;;;;GAMG;AAEH;;;;;;;;;GASG;AACH,mDANW,MAAM,UACN,CAAC,MAAM,EAAE,MAAM,CAAC,0BACF,MAAM,4BACN,MAAM;iCAyChB,MAAM,kBACN,MAAM;;EAwGpB;6BA/JU,MAAM,OACN,MAAM,QACN,CAAC,MAAM,EAAE,MAAM,CAAC,KACd,CAAC,MAAM,EAAE,MAAM,CAAC"}
+{"version":3,"file":"binnedIndex.d.ts","sourceRoot":"","sources":["../../../src/utils/binnedIndex.js"],"names":[],"mappings":"AAKA;;;;;;GAMG;AAEH;;;;;;;;;;;GAWG;AACH,mDANW,MAAM,UACN,CAAC,MAAM,EAAE,MAAM,CAAC,0BACF,MAAM,4BACN,MAAM;iCA2ChB,MAAM,kBACN,MAAM;oBAsHJ,MAAM;EA+BtB;6BAhNU,MAAM,OACN,MAAM,QACN,CAAC,MAAM,EAAE,MAAM,CAAC,KACd,CAAC,MAAM,EAAE,MAAM,CAAC"}