@genome-spy/core 0.41.0 → 0.42.0

package/dist/src/marks/link.d.ts

@@ -1,4 +1,11 @@
 export default class LinkMark extends Mark {
+    /**
+     * Only available if "WebGL Draft Extensions" is enabled in chrome://flags
+     * But seems to work.
+     *
+     * @private
+     */
+    private _baseInstanceExt;
     arrays: {
         [k: string]: {
             data: any;

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

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/marks/link.js"],"names":[],"mappings":"AAWA;IA+HQ;;;;;;MAKC;CA2DR;iBArMgB,WAAW"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/marks/link.js"],"names":[],"mappings":"AAWA;IA+BQ;;;;;OAKG;IACH,yBAEC;IAkGD;;;;;;MAKC;CAoFR;iBAxOgB,WAAW"}

package/dist/src/marks/link.js

@@ -1,4 +1,4 @@
-import { drawBufferInfo, setBuffersAndAttributes } from "twgl.js";
+import { setBuffersAndAttributes } from "twgl.js";
 import VERTEX_SHADER from "../gl/link.vertex.glsl.js";
 import FRAGMENT_SHADER from "../gl/link.fragment.glsl.js";
 import { LinkVertexBuilder } from "../gl/dataToVertices.js";
@@ -39,6 +39,16 @@ export default class LinkMark extends Mark {
                 orient: "vertical",
             })
         );
+
+        /**
+         * Only available if "WebGL Draft Extensions" is enabled in chrome://flags
+         * But seems to work.
+         *
+         * @private
+         */
+        this._baseInstanceExt = this.gl.getExtension(
+            "WEBGL_draw_instanced_base_vertex_base_instance"
+        );
     }
 
     getAttributes() {
@@ -154,6 +164,18 @@ export default class LinkMark extends Mark {
 
         ops.push(() => this.bindOrSetMarkUniformBlock());
 
+        if (this._baseInstanceExt) {
+            ops.push(() =>
+                setBuffersAndAttributes(
+                    this.gl,
+                    this.programInfo,
+                    this.vertexArrayInfo
+                )
+            );
+        } else {
+            ops.push(() => this.gl.bindVertexArray(null));
+        }
+
         return ops;
     }
 
@@ -163,42 +185,55 @@ export default class LinkMark extends Mark {
     render(options) {
         const gl = this.gl;
 
-        return this.createRenderCallback((offset, count) => {
-            // We are using instanced drawing here.
-            // However, WebGL does not provide glDrawArraysInstancedBaseInstance and thus,
-            // we have to hack with offsets in vertexAttribPointer
-            // TODO: Use VAOs more intelligently to reduce WebGL calls
-            // TODO: Explore multiDrawArraysInstancedWEBGL
-            // There's also a promising extension draft:
-            // https://www.khronos.org/registry/webgl/extensions/WEBGL_draw_instanced_base_vertex_base_instance/
-            // (and https://www.khronos.org/registry/webgl/extensions/WEBGL_multi_draw_instanced_base_vertex_base_instance/)
-
-            this.gl.bindVertexArray(this.vertexArrayInfo.vertexArrayObject);
-
-            for (const attribInfoObject of Object.entries(
-                this.bufferInfo.attribs
-            )) {
-                const [attribute, attribInfo] = attribInfoObject;
-                if (
-                    attribInfo.buffer &&
-                    attribInfo.numComponents &&
-                    attribInfo.divisor
-                ) {
-                    attribInfo.offset =
-                        offset * this.arrays[attribute].numComponents * 4; // gl.FLOAT in bytes
-                }
-            }
-            setBuffersAndAttributes(gl, this.programInfo, this.bufferInfo);
-
-            drawBufferInfo(
-                gl,
-                this.bufferInfo,
-                gl.TRIANGLE_STRIP,
-                (this.properties.segments + 1) * 2, // number of vertices in a triangle strip
-                0,
-                count
-            );
-        }, options);
+        const arcVertexCount = (this.properties.segments + 1) * 2;
+
+        return this._baseInstanceExt
+            ? this.createRenderCallback((offset, count) => {
+                  // Using the following extension, which, however, is only a draft and
+                  // available if "WebGL Draft Extensions" is enabled in chrome://flags
+                  // https://www.khronos.org/registry/webgl/extensions/WEBGL_draw_instanced_base_vertex_base_instance/
+
+                  this._baseInstanceExt.drawArraysInstancedBaseInstanceWEBGL(
+                      gl.TRIANGLE_STRIP,
+                      0,
+                      arcVertexCount,
+                      count,
+                      offset
+                  );
+              }, options)
+            : this.createRenderCallback((offset, count) => {
+                  // Because vanilla WebGL 2 does not provide glDrawArraysInstancedBaseInstance,
+                  // we have to hack with offsets in vertexAttribPointer
+                  //
+                  // TODO: Use VAOs more intelligently to reduce WebGL calls. In other words,
+                  // reserve one VAO for each facet/sample.
+
+                  for (const attribInfoObject of Object.entries(
+                      this.bufferInfo.attribs
+                  )) {
+                      const [attribute, attribInfo] = attribInfoObject;
+                      if (
+                          attribInfo.buffer &&
+                          attribInfo.numComponents &&
+                          attribInfo.divisor
+                      ) {
+                          attribInfo.offset =
+                              offset * this.arrays[attribute].numComponents * 4; // gl.FLOAT in bytes
+                      }
+                  }
+                  setBuffersAndAttributes(
+                      gl,
+                      this.programInfo,
+                      this.bufferInfo
+                  );
+
+                  gl.drawArraysInstanced(
+                      gl.TRIANGLE_STRIP,
+                      0,
+                      arcVertexCount,
+                      count
+                  );
+              }, options);
     }
 }
 

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

@@ -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;
 }

package/dist/src/utils/binnedIndex.test.js

@@ -152,4 +152,50 @@ describe("Binning Indexer", () => {
         expect(index(115, 116)).toEqual([4, 8]);
         expect(index(135, 145)).toEqual([6, 10]);
     });
+
+    test("Unordered ranges disable the index", () => {
+        const items = [
+            [10, 30],
+            [25, 50],
+
+            [112, 139],
+            [102, 129], // <- Unordered!
+            [121, 149],
+        ];
+        const indexer = createBinningRangeIndexer(
+            100,
+            [0, 1000],
+            (x) => x[0],
+            (x) => x[1]
+        );
+
+        items.forEach((x, i) => indexer(x, i * 2, (i + 1) * 2));
+
+        const index = indexer.getIndex();
+
+        expect(index).toBeUndefined();
+    });
+
+    test("Inverted ranges disable the index", () => {
+        const items = [
+            [10, 30],
+            [25, 50],
+
+            [102, 129],
+            [139, 112], // <- Inverted!
+            [121, 149],
+        ];
+        const indexer = createBinningRangeIndexer(
+            100,
+            [0, 1000],
+            (x) => x[0],
+            (x) => x[1]
+        );
+
+        items.forEach((x, i) => indexer(x, i * 2, (i + 1) * 2));
+
+        const index = indexer.getIndex();
+
+        expect(index).toBeUndefined();
+    });
 });

package/dist/src/view/gridView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gridView.d.ts","sourceRoot":"","sources":["../../../src/view/gridView.js"],"names":[],"mappings":"AAkwBA;;;GAGG;AACH,iDAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,QAAQ,CAwB9C;AAED;;;GAGG;AACH,uDAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,QAAQ,CA6C9C;AA2BD;;GAEG;AACH,8EAUC;AAED;;;;;GAKG;AACH,4CAJW,OAAO,uBAAuB,EAAE,OAAO,UACvC,OAAO,iBAAiB,EAAE,UAAU,YACpC,QAAQ,aAmBlB;AAz3BD;;;;;;;;;;;;;;;GAeG;AACH;IA6BI;;;;;;;;;OASG;IACH,kBARW,OAAO,iBAAiB,EAAE,aAAa,WACvC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,iDAEb,MAAM,WACN,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAoBzC;IARG,8CAAgB;IAOhB,uBAA0B;IAG9B;;OAEG;IACH,qDAIC;IAeD;;OAEG;IACH,wDAKC;IAqBD;;OAEG;IACH,8CAEC;IAED,yBAEC;IAED;;OAEG;IACH,wCAmCC;IA2OD;;;;OAIG;IAEH,gBALW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,uBAAuB,EAAE,gBAAgB,QA2O1D;;CAmGJ;AAgJD;IACI;;;;OAIG;IACH,6DAHW,aAAa,UACb,MAAM,EAoFhB;IAjFG,4BAAgC;IAChC,kCAAgB;IAChB,eAAoB;IAEpB,uBAAuB;IACvB,YADW,QAAQ,CACQ;IAE3B,uBAAuB;IACvB,kBADW,QAAQ,CACc;IAEjC,mFAAmF;IACnF,MADW,QAAQ,OAAO,OAAO,iBAAiB,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAC5D;IAEd,4FAA4F;IAC5F,WADW,QAAQ,OAAO,OAAO,iBAAiB,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAC3D;IAEnB,0DAA0D;IAC1D,kEAAoB;IAEpB,uBAAuB;IACvB,OADW,QAAQ,CACG;IAEtB,wBAAwB;IACxB,QADW,SAAS,CACQ;IA4DhC,uEAcC;IAED;;OAEG;IACH,4BAkKC;IAED,uBAqBC;IAED,iCAEC;CACJ;qBA9qC0D,eAAe;sBAFpD,uBAAuB;0BAGnB,oBAAoB;qBAGzB,eAAe;yBALX,mBAAmB;AAirC5C;IACI;;;OAGG;IACH,uBAHW,SAAS,8CAyFnB;IAtDG;;;MAAoB;IACpB,2CAAsC;IAKtC,uBAAuB;IAEvB,wBAAwB;IACxB,2BAAqC;IA+CzC,0BAKC;IAWD;;;;OAIG;IACH,gCAHW,SAAS,UACT,SAAS,QA8CnB;IA7BG,0BAAsE;CA8B7E;oBAl1CmB,qBAAqB"}
+{"version":3,"file":"gridView.d.ts","sourceRoot":"","sources":["../../../src/view/gridView.js"],"names":[],"mappings":"AAowBA;;;GAGG;AACH,iDAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,QAAQ,CAwB9C;AAED;;;GAGG;AACH,uDAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,QAAQ,CA6C9C;AA2BD;;GAEG;AACH,8EAUC;AAED;;;;;GAKG;AACH,4CAJW,OAAO,uBAAuB,EAAE,OAAO,UACvC,OAAO,iBAAiB,EAAE,UAAU,YACpC,QAAQ,aAmBlB;AA33BD;;;;;;;;;;;;;;;GAeG;AACH;IA6BI;;;;;;;;;OASG;IACH,kBARW,OAAO,iBAAiB,EAAE,aAAa,WACvC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,iDAEb,MAAM,WACN,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAoBzC;IARG,8CAAgB;IAOhB,uBAA0B;IAG9B;;OAEG;IACH,qDAIC;IAeD;;OAEG;IACH,wDAKC;IAqBD;;OAEG;IACH,8CAEC;IAED,yBAEC;IAED;;OAEG;IACH,wCAmCC;IA2OD;;;;OAIG;IAEH,gBALW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,uBAAuB,EAAE,gBAAgB,QA6O1D;;CAmGJ;AAgJD;IACI;;;;OAIG;IACH,6DAHW,aAAa,UACb,MAAM,EAoFhB;IAjFG,4BAAgC;IAChC,kCAAgB;IAChB,eAAoB;IAEpB,uBAAuB;IACvB,YADW,QAAQ,CACQ;IAE3B,uBAAuB;IACvB,kBADW,QAAQ,CACc;IAEjC,mFAAmF;IACnF,MADW,QAAQ,OAAO,OAAO,iBAAiB,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAC5D;IAEd,4FAA4F;IAC5F,WADW,QAAQ,OAAO,OAAO,iBAAiB,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAC3D;IAEnB,0DAA0D;IAC1D,kEAAoB;IAEpB,uBAAuB;IACvB,OADW,QAAQ,CACG;IAEtB,wBAAwB;IACxB,QADW,SAAS,CACQ;IA4DhC,uEAcC;IAED;;OAEG;IACH,4BAkKC;IAED,uBAqBC;IAED,iCAEC;CACJ;qBAhrC0D,eAAe;sBAFpD,uBAAuB;0BAGnB,oBAAoB;qBAGzB,eAAe;yBALX,mBAAmB;AAmrC5C;IACI;;;OAGG;IACH,uBAHW,SAAS,8CAyFnB;IAtDG;;;MAAoB;IACpB,2CAAsC;IAKtC,uBAAuB;IAEvB,wBAAwB;IACxB,2BAAqC;IA+CzC,0BAKC;IAWD;;;;OAIG;IACH,gCAHW,SAAS,UACT,SAAS,QA8CnB;IA7BG,0BAAsE;CA8B7E;oBAp1CmB,qBAAqB"}