@genome-spy/core 0.41.0 → 0.42.1

package/dist/src/marks/mark.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"mark.d.ts","sourceRoot":"","sources":["../../../src/marks/mark.js"],"names":[],"mappings":"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"}

package/dist/src/marks/mark.js

@@ -14,6 +14,7 @@ import createEncoders, {
     isChannelDefWithScale,
     isChannelWithScale,
     isDatumDef,
+    isFieldDef,
     isValueDef,
 } from "../encoder/encoder.js";
 import {
@@ -25,7 +26,8 @@ import {
     isHighPrecisionScale,
     toHighPrecisionDomainUniform,
     splitHighPrecision,
-} from "../scale/glslScaleGenerator.js";
+    dedupeEncodingFields,
+} from "../gl/glslScaleGenerator.js";
 import GLSL_COMMON from "../gl/includes/common.glsl.js";
 import GLSL_SCALES from "../gl/includes/scales.glsl.js";
 import GLSL_SAMPLE_FACET from "../gl/includes/sampleFacet.glsl.js";
@@ -316,6 +318,7 @@ export default class Mark {
      * @param {string} vertexShader
      * @param {string} fragmentShader
      * @param {string[]} [extraHeaders]
+     * @protected
      */
     createAndLinkShaders(vertexShader, fragmentShader, extraHeaders = []) {
         const attributes = this.getAttributes();
@@ -330,6 +333,15 @@ export default class Mark {
         /** @type {string[]} */
         let scaleCode = [];
 
+        /**
+         * Attribute definitions. Using set to prevent duplicates caused by
+         * multiple channels using the same shared quantitative field.
+         * @type {Set<string>}
+         */
+        const attributeCode = new Set();
+
+        const dedupedEncodingFields = dedupeEncodingFields(this.encoders);
+
         const sampleFacetMode = this.getSampleFacetMode();
         if (sampleFacetMode) {
             extraHeaders.push(`#define ${sampleFacetMode}`);
@@ -364,12 +376,28 @@ export default class Mark {
                           .getScale()
                     : scaleNull();
 
-                const generated = generateScaleGlsl(channel, scale, channelDef);
+                // Channels that share the same quantitative field
+                // TODO: It should be ok to share a categorical field if the channels
+                // share the same scale, e.g., primary and secondary positional channels
+                const sharedChannels =
+                    isFieldDef(channelDef) && !isDiscrete(scale.type)
+                        ? dedupedEncodingFields.get([channelDef.field, true])
+                        : [channel];
+
+                const generated = generateScaleGlsl(
+                    channel,
+                    scale,
+                    channelDef,
+                    sharedChannels
+                );
 
                 scaleCode.push(generated.glsl);
                 if (generated.domainUniform) {
                     this.domainUniforms.push(generated.domainUniform);
                 }
+                if (generated.attributeGlsl) {
+                    attributeCode.add(generated.attributeGlsl);
+                }
             }
         }
 
@@ -388,6 +416,7 @@ export default class Mark {
             GLSL_COMMON,
             GLSL_SCALES,
             domainUniformBlock,
+            [...attributeCode].join("\n"),
             ...scaleCode,
             GLSL_SAMPLE_FACET,
             GLSL_PICKING_VERTEX,

package/dist/src/marks/{pointMark.d.ts → point.d.ts}

@@ -8,4 +8,4 @@ export default class PointMark extends Mark {
     getSemanticThreshold(): number;
 }
 import Mark from "./mark.js";
-//# sourceMappingURL=pointMark.d.ts.map
+//# sourceMappingURL=point.d.ts.map

package/dist/src/marks/point.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/marks/point.js"],"names":[],"mappings":"AAkBA;IAsGY,oCAMC;IA2CT,mCAQC;IAED;;OAEG;IACH,wDASC;IAED,+BAoBC;CAiDJ;iBA3PgB,WAAW"}

package/dist/src/marks/{pointMark.js → point.js}

@@ -5,9 +5,9 @@ import {
 } from "twgl.js";
 import { quantileSorted } from "d3-array";
 import { PointVertexBuilder } from "../gl/dataToVertices.js";
-import VERTEX_SHADER from "../gl/point.vertex.glsl.js";
-import FRAGMENT_SHADER from "../gl/point.fragment.glsl.js";
-import COMMON_SHADER from "../gl/point.common.glsl.js";
+import VERTEX_SHADER from "./point.vertex.glsl.js";
+import FRAGMENT_SHADER from "./point.fragment.glsl.js";
+import COMMON_SHADER from "./point.common.glsl.js";
 
 import Mark from "./mark.js";
 import { sampleIterable } from "../data/transforms/sample.js";

package/dist/src/marks/{rectMark.d.ts → rect.d.ts}

@@ -14,4 +14,4 @@ export default class RectMark extends Mark {
     #private;
 }
 import Mark from "./mark.js";
-//# sourceMappingURL=rectMark.d.ts.map
+//# sourceMappingURL=rect.d.ts.map

package/dist/src/marks/rect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rect.d.ts","sourceRoot":"","sources":["../../../src/marks/rect.js"],"names":[],"mappings":"AAYA;IA0NI;;;;;;;;;;OAUG;IACH,8BALW,GAAG,KACH,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAyBf;;CACJ;iBAnQgB,WAAW"}

package/dist/src/marks/{rectMark.js → rect.js}

@@ -1,6 +1,6 @@
 import { drawBufferInfo, setBuffersAndAttributes } from "twgl.js";
-import VERTEX_SHADER from "../gl/rect.vertex.glsl.js";
-import FRAGMENT_SHADER from "../gl/rect.fragment.glsl.js";
+import VERTEX_SHADER from "./rect.vertex.glsl.js";
+import FRAGMENT_SHADER from "./rect.fragment.glsl.js";
 import { RectVertexBuilder } from "../gl/dataToVertices.js";
 
 import Mark from "./mark.js";
@@ -179,7 +179,6 @@ export default class RectMark extends Mark {
         const collector = this.unitView.getCollector();
         const numItems = collector.getItemCount();
 
-        // TODO: Disable tessellation on SimpleTrack - no need for it
         const builder = new RectVertexBuilder({
             encoders: this.encoders,
             attributes: this.getAttributes(),

package/dist/src/marks/rect.vertex.glsl.js

@@ -0,0 +1,2 @@
+const shader = "uniform Mark{uniform float uMinWidth;uniform float uMinHeight;uniform float uMinOpacity;uniform float uCornerRadiusTopRight;uniform float uCornerRadiusBottomRight;uniform float uCornerRadiusTopLeft;uniform float uCornerRadiusBottomLeft;};out lowp vec4 vFillColor;out lowp vec4 vStrokeColor;out float vHalfStrokeWidth;out vec4 vCornerRadii;\n#if defined(ROUNDED_CORNERS) || defined(STROKED)\nout vec2 vPosInPixels;\n#endif\nout vec2 vHalfSizeInPixels;/***Clamps the minimumSize and returns an opacity that reflects the amount of clamping.*/float clampMinSize(inout float pos,float frac,float size,float minSize){if(minSize>0.0&&abs(size)<minSize){pos+=(frac-0.5)*(minSize*sign(size)-size);return abs(size)/minSize;}return 1.0;}void sort(inout float a,inout float b){if(a>b){float tmp=b;b=a;a=tmp;}}/***The vertex position wrt the rectangle specified by(x,x2,y,y2).*[0,0]=[x,y],[1,1]=[x2,y2].*The x or y component may contain fractional values if the rectangle*have been tessellated.*/vec2 getVertexPos(){int index=gl_VertexID % 6;return vec2(index==0||index==1||index==3 ? 0.0 : 1.0,index==0||index==1||index==2 ? 0.0 : 1.0);}void main(void){vec2 frac=getVertexPos();vec2 normalizedMinSize=vec2(uMinWidth,uMinHeight)/uViewportSize;vec4 cornerRadii=vec4(uCornerRadiusTopRight,uCornerRadiusBottomRight,uCornerRadiusBottomLeft,uCornerRadiusTopLeft);float x=getScaled_x();float x2=getScaled_x2();float y=getScaled_y();float y2=getScaled_y2();sort(x,x2);sort(y,y2);float clampMargin=1.0;vec2 pos1=vec2(clamp(x,0.0-clampMargin,1.0+clampMargin),y);vec2 pos2=vec2(clamp(x2,0.0-clampMargin,1.0+clampMargin),y2);vec2 size=pos2-pos1;if(size.x<=0.0||size.y<=0.0){gl_Position=vec4(0.0,0.0,0.0,1.0);return;}vec2 pos=pos1+frac*size;size.y*=getSampleFacetHeight(pos);float opaFactor=uViewOpacity*max(uMinOpacity,clampMinSize(pos.x,frac.x,size.x,normalizedMinSize.x)*clampMinSize(pos.y,frac.y,size.y,normalizedMinSize.y));pos=applySampleFacet(pos);\n#if defined(ROUNDED_CORNERS) || defined(STROKED)\nfloat aaPadding=1.0/uDevicePixelRatio;float strokeWidth=getScaled_strokeWidth();float strokeOpacity=getScaled_strokeOpacity()*opaFactor;vec2 centeredFrac=frac-0.5;vec2 expand=centeredFrac*(strokeWidth+aaPadding)/uViewportSize;pos+=expand;vec2 sizeInPixels=size*uViewportSize;vPosInPixels=(centeredFrac+expand/size)*sizeInPixels;vHalfSizeInPixels=sizeInPixels/2.0;vCornerRadii=min(cornerRadii,min(vHalfSizeInPixels.x,vHalfSizeInPixels.y));vHalfStrokeWidth=strokeWidth/2.0;vStrokeColor=vec4(getScaled_stroke()*strokeOpacity,strokeOpacity);\n#endif\ngl_Position=unitToNdc(pos);float fillOpacity=getScaled_fillOpacity()*opaFactor;vFillColor=vec4(getScaled_fill()*fillOpacity,fillOpacity);setupPicking();}";
+export default shader;

package/dist/src/marks/rule.js

@@ -6,9 +6,9 @@ import {
     setBuffersAndAttributes,
     setUniforms,
 } from "twgl.js";
-import VERTEX_SHADER from "../gl/rule.vertex.glsl.js";
-import FRAGMENT_SHADER from "../gl/rule.fragment.glsl.js";
-import COMMON_SHADER from "../gl/rule.common.glsl.js";
+import VERTEX_SHADER from "./rule.vertex.glsl.js";
+import FRAGMENT_SHADER from "./rule.fragment.glsl.js";
+import COMMON_SHADER from "./rule.common.glsl.js";
 import { RuleVertexBuilder } from "../gl/dataToVertices.js";
 import { isChannelDefWithScale } from "../encoder/encoder.js";
 

package/dist/src/marks/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AAgCA;;;;;;;GAOG;AACH;IAsDQ,oDAMmD;CAiM1D;iBAxRgB,WAAW"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AAgCA;;;;;;;GAOG;AACH;IAsDQ,oDAMmD;CAgM1D;iBAvRgB,WAAW"}

package/dist/src/marks/text.js

@@ -6,9 +6,9 @@ import {
     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 VERTEX_SHADER from "./text.vertex.glsl.js";
+import FRAGMENT_SHADER from "./text.fragment.glsl.js";
+import COMMON_SHADER from "./text.common.glsl.js";
 import { TextVertexBuilder } from "../gl/dataToVertices.js";
 
 import Mark from "./mark.js";
@@ -160,6 +160,22 @@ 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.
         setBlockUniforms(this.markUniformInfo, {
             uPaddingX: props.paddingX,
@@ -237,24 +253,7 @@ 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(() => {
-            // TODO: only set if dpr changed
-            setBlockUniforms(this.markUniformInfo, {
-                uSdfNumerator,
-            });
-            this.markUniformsAltered = true;
-
             setUniforms(this.programInfo, {
                 uTexture: this.font.texture,
             });

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

@@ -472,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/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

@@ -70,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"}

package/dist/src/utils/binnedIndex.js

@@ -15,6 +15,8 @@ const MIN_INTEGER = -(2 ** 31);
  * 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
@@ -27,13 +29,15 @@ export function createBinningRangeIndexer(
     accessor,
     accessor2 = accessor
 ) {
-    const startIndices = new Int32Array(size);
+    const startIndices = new Array(size);
     startIndices.fill(MAX_INTEGER);
 
     let lastIndex = MIN_INTEGER;
+    let lastStart = -Infinity;
     let unordered = false;
 
-    const endIndices = new Int32Array(size);
+    const endIndices = new Array(size);
+    endIndices.fill(0);
 
     const start = domain[0];
     const domainLength = domain[1] - domain[0];
@@ -63,17 +67,33 @@ export function createBinningRangeIndexer(
      * @param {number} endVertexIndex
      */
     function binningIndexer(datum, startVertexIndex, endVertexIndex) {
+        if (unordered) {
+            return;
+        }
+
         if (startVertexIndex > lastIndex) {
             lastIndex = startVertexIndex;
-        } else if (!unordered) {
+        } else {
             unordered = true;
             // TODO: Contextual info like view path
             console.debug(
                 "Items are not ordered properly. Disabling binned index."
             );
+            return;
         }
 
         const value = accessor(datum);
+
+        if (value < lastStart) {
+            unordered = true;
+            // TODO: Contextual info like view path
+            console.debug(
+                "Items are not ordered properly. Disabling binned index."
+            );
+            return;
+        }
+        lastStart = value;
+
         const bin = getBin(value, false);
 
         if (startIndices[bin] > startVertexIndex) {
@@ -93,18 +113,42 @@ export function createBinningRangeIndexer(
      * @param {number} endVertexIndex
      */
     function binningRangeIndexer(datum, startVertexIndex, endVertexIndex) {
+        if (unordered) {
+            return;
+        }
+
         if (startVertexIndex > lastIndex) {
             lastIndex = startVertexIndex;
-        } else if (!unordered) {
+        } else {
             unordered = true;
             // TODO: Contextual info like view path
             console.debug(
-                "Items are not ordered properly. Disabling binned index."
+                "Items (vertices) are not ordered properly. Disabling binned index."
             );
+            return;
         }
 
         const start = accessor(datum);
         const end = accessor2(datum);
+
+        if (start < lastStart) {
+            unordered = true;
+            // TODO: Contextual info like view path
+            console.debug(
+                "Items are not ordered properly. Disabling binned index."
+            );
+            return;
+        } else if (end < start) {
+            unordered = true;
+            // TODO: Contextual info like view path
+            console.debug(
+                "End index is less than start index. Disabling binned index. Datum: ",
+                datum
+            );
+            return;
+        }
+        lastStart = start;
+
         const startBin = getBin(start, false);
         const endBin = getBin(end, true);
 
@@ -135,7 +179,16 @@ export function createBinningRangeIndexer(
         return arr;
     };
 
+    /**
+     * Finalizes the index and returns a lookup function.
+     *
+     * @returns {Lookup}
+     */
     const getIndex = () => {
+        if (unordered) {
+            return undefined;
+        }
+
         for (let i = 1; i < endIndices.length; i++) {
             if (endIndices[i] < endIndices[i - 1]) {
                 endIndices[i] = endIndices[i - 1];
@@ -159,9 +212,5 @@ export function createBinningRangeIndexer(
     binningIndexer.getIndex = getIndex;
     binningRangeIndexer.getIndex = getIndex;
 
-    if (unordered) {
-        return undefined;
-    } else {
-        return accessor == accessor2 ? binningIndexer : binningRangeIndexer;
-    }
+    return accessor == accessor2 ? binningIndexer : binningRangeIndexer;
 }