@genome-spy/core 0.19.1 → 0.22.0

package/src/marks/mark.js

@@ -4,10 +4,11 @@ import {
     createUniformBlockInfo,
     createVertexArrayInfo,
     setAttribInfoBufferFromArray,
+    setBlockUniforms,
     setUniformBlock,
     setUniforms,
 } from "twgl.js";
-import { isDiscrete } from "vega-scale";
+import { isContinuous, isDiscrete } from "vega-scale";
 import createEncoders, {
     isChannelDefWithScale,
     isDatumDef,
@@ -32,6 +33,7 @@ import { getCachedOrCall } from "../utils/propertyCacher";
 import { createProgram } from "../gl/webGLHelper";
 import coalesceProperties from "../utils/propertyCoalescer";
 import { isScalar } from "../utils/variableTools";
+import { InternMap } from "internmap";
 
 export const SAMPLE_FACET_UNIFORM = "SAMPLE_FACET_UNIFORM";
 export const SAMPLE_FACET_TEXTURE = "SAMPLE_FACET_TEXTURE";
@@ -77,6 +79,12 @@ export default class Mark {
         /** @type {import("twgl.js").UniformBlockInfo} WebGL buffers */
         this.domainUniformInfo = undefined;
 
+        /** @type {import("twgl.js").UniformBlockInfo} WebGL buffers */
+        this.viewUniformInfo = undefined;
+
+        /** @type {RangeMap<any>} keep track of facet locations within the vertex array */
+        this.rangeMap = new RangeMap();
+
         // TODO: Implement https://vega.github.io/vega-lite/docs/config.html
         /** @type {MarkConfig} */
         this.defaultProperties = {
@@ -399,9 +407,21 @@ export default class Mark {
             );
         }
 
+        this.viewUniformInfo = createUniformBlockInfo(
+            this.gl,
+            this.programInfo,
+            "View"
+        );
+
         this.gl.useProgram(this.programInfo.program);
 
         this._setDatums();
+
+        setUniforms(this.programInfo, {
+            // left pos, left height, right pos, right height
+            uSampleFacet: [0, 1, 0, 1],
+            uTransitionOffset: 0.0,
+        });
     }
 
     _setDatums() {
@@ -535,21 +555,27 @@ export default class Mark {
      * and scales) and buffers.
      *
      * @param {import("../view/rendering").GlobalRenderingOptions} options
+     * @returns {(() => void)[]}
      */
     // eslint-disable-next-line complexity
     prepareRender(options) {
         const glHelper = this.glHelper;
         const gl = this.gl;
 
-        if (!this.vertexArrayInfo) {
-            this.vertexArrayInfo = createVertexArrayInfo(
-                this.gl,
-                this.programInfo,
-                this.bufferInfo
-            );
-        }
+        /** @type {(() => void)[]} */
+        const ops = [];
 
-        gl.useProgram(this.programInfo.program);
+        ops.push(() => {
+            if (!this.vertexArrayInfo) {
+                this.vertexArrayInfo = createVertexArrayInfo(
+                    this.gl,
+                    this.programInfo,
+                    this.bufferInfo
+                );
+            }
+
+            gl.useProgram(this.programInfo.program);
+        });
 
         if (this.domainUniformInfo) {
             // TODO: Only update the domains that have changed
@@ -572,19 +598,24 @@ export default class Mark {
 
                 if (resolution) {
                     const scale = resolution.getScale();
-                    const domain = isDiscrete(scale.type)
-                        ? [0, scale.domain().length]
-                        : scale.domain();
-
-                    setter(
-                        isHighPrecisionScale(scale.type)
-                            ? toHighPrecisionDomainUniform(domain)
-                            : domain
-                    );
+
+                    ops.push(() => {
+                        const domain = isDiscrete(scale.type)
+                            ? [0, scale.domain().length]
+                            : scale.domain();
+
+                        setter(
+                            isHighPrecisionScale(scale.type)
+                                ? toHighPrecisionDomainUniform(domain)
+                                : domain
+                        );
+                    });
                 }
             }
 
-            setUniformBlock(gl, this.programInfo, this.domainUniformInfo);
+            ops.push(() =>
+                setUniformBlock(gl, this.programInfo, this.domainUniformInfo)
+            );
         }
 
         for (const [channel, channelDef] of Object.entries(this.encoding)) {
@@ -599,48 +630,56 @@ export default class Mark {
 
                 const texture = glHelper.rangeTextures.get(resolution);
                 if (texture) {
-                    setUniforms(this.programInfo, {
-                        [RANGE_TEXTURE_PREFIX + channel]: texture,
-                    });
+                    ops.push(() =>
+                        setUniforms(this.programInfo, {
+                            [RANGE_TEXTURE_PREFIX + channel]: texture,
+                        })
+                    );
                 }
             }
         }
 
         if (this.getSampleFacetMode() == SAMPLE_FACET_TEXTURE) {
-            /** @type {WebGLTexture} */
-            let facetTexture;
-            for (const view of this.unitView.getAncestors()) {
-                facetTexture = view.getSampleFacetTexture();
-                if (facetTexture) {
-                    break;
+            ops.push(() => {
+                /** @type {WebGLTexture} */
+                let facetTexture;
+                for (const view of this.unitView.getAncestors()) {
+                    facetTexture = view.getSampleFacetTexture();
+                    if (facetTexture) {
+                        break;
+                    }
                 }
-            }
 
-            setUniforms(this.programInfo, {
-                uSampleFacetTexture: facetTexture,
+                if (!facetTexture) {
+                    throw new Error("No facet texture available. This is bug.");
+                }
+
+                setUniforms(this.programInfo, {
+                    uSampleFacetTexture: facetTexture,
+                });
             });
         }
 
-        setUniforms(this.programInfo, {
-            uDevicePixelRatio: this.glHelper.dpr,
-            uViewOpacity: this.unitView.getEffectiveOpacity(),
-            // TODO: Rendering of the mark should be completely skipped if it doesn't
-            // participate picking
-            uPickingEnabled:
-                (options.picking ?? false) && this.isPickingParticipant(),
-        });
-
-        setUniforms(this.programInfo, {
-            // left pos, left height, right pos, right height
-            uSampleFacet: [0, 1, 0, 1],
-            uTransitionOffset: 0.0,
-        });
+        // TODO: Rendering of the mark should be completely skipped if it doesn't
+        // participate picking
+        const picking =
+            (options.picking ?? false) && this.isPickingParticipant();
+
+        // Note: the block is sent to GPU in setViewport(), which is repeated for each facet
+        ops.push(() =>
+            setBlockUniforms(this.viewUniformInfo, {
+                uViewOpacity: this.unitView.getEffectiveOpacity(),
+                uPickingEnabled: picking,
+            })
+        );
 
         if (this.opaque || options.picking) {
-            gl.disable(gl.BLEND);
+            ops.push(() => gl.disable(gl.BLEND));
         } else {
-            gl.enable(gl.BLEND);
+            ops.push(() => gl.enable(gl.BLEND));
         }
+
+        return ops;
     }
 
     /**
@@ -702,58 +741,56 @@ export default class Mark {
     /**
      * @param {DrawFunction} draw A function that draws a range of vertices
      * @param {import("./Mark").MarkRenderingOptions} options
-     * @param {function():Map<string, import("../gl/dataToVertices").RangeEntry>} rangeMapSource
      */
-    createRenderCallback(draw, options, rangeMapSource) {
+    createRenderCallback(draw, options) {
         // eslint-disable-next-line consistent-this
         const self = this;
 
         /** @type {function(import("../gl/dataToVertices").RangeEntry):void} rangeEntry */
         let drawWithRangeEntry;
 
-        if (this.properties.buildIndex) {
-            const scale = this.unitView.getScaleResolution("x")?.getScale();
-
-            drawWithRangeEntry = (rangeEntry) => {
-                if (scale && rangeEntry.xIndex) {
-                    const domain = scale.domain();
-                    const vertexIndices = rangeEntry.xIndex(
-                        domain[0],
-                        domain[1]
-                    );
-                    const offset = vertexIndices[0];
-                    const count = vertexIndices[1] - offset;
-                    if (count > 0) {
-                        draw(offset, count);
-                    }
-                } else {
-                    draw(rangeEntry.offset, rangeEntry.count);
+        const scale = this.unitView.getScaleResolution("x")?.getScale();
+        const continuous = scale && isContinuous(scale.type);
+        const domainStartOffset = ["index", "locus"].includes(scale?.type)
+            ? -1
+            : 0;
+
+        /** @type {[number, number]} Recycle to ease garbage collector's work */
+        const arr = [0, 0];
+
+        drawWithRangeEntry = (rangeEntry) => {
+            if (continuous && rangeEntry.xIndex) {
+                const domain = scale.domain();
+                const vertexIndices = rangeEntry.xIndex(
+                    domain[0] + domainStartOffset,
+                    domain[1],
+                    arr
+                );
+                const offset = vertexIndices[0];
+                const count = vertexIndices[1] - offset;
+                if (count > 0) {
+                    draw(offset, count);
                 }
-            };
-        } else {
-            drawWithRangeEntry = (rangeEntry) =>
+            } else {
                 draw(rangeEntry.offset, rangeEntry.count);
-        }
-
-        if (this.properties.dynamicData) {
-            return function renderDynamic() {
-                const rangeEntry = rangeMapSource().get(options.facetId);
-                if (rangeEntry && rangeEntry.count) {
-                    if (self.prepareSampleFacetRendering(options)) {
-                        drawWithRangeEntry(rangeEntry);
-                    }
-                }
-            };
-        } else {
-            const rangeEntry = rangeMapSource().get(options.facetId);
-            if (rangeEntry && rangeEntry.count) {
-                return function renderStatic() {
-                    if (self.prepareSampleFacetRendering(options)) {
-                        drawWithRangeEntry(rangeEntry);
-                    }
-                };
             }
-        }
+        };
+
+        const rangeEntry = this.rangeMap.get(options.facetId);
+
+        return options.sampleFacetRenderingOptions
+            ? function renderSampleFacetRange() {
+                  if (rangeEntry.count) {
+                      if (self.prepareSampleFacetRendering(options)) {
+                          drawWithRangeEntry(rangeEntry);
+                      }
+                  }
+              }
+            : function renderRange() {
+                  if (rangeEntry.count) {
+                      drawWithRangeEntry(rangeEntry);
+                  }
+              };
     }
 
     /**
@@ -835,7 +872,7 @@ export default class Mark {
                 uViewScale,
             };
         } else {
-            // Viewport comprises of the full canvas
+            // Viewport comprises the full canvas
             gl.viewport(
                 0,
                 0,
@@ -858,15 +895,15 @@ export default class Mark {
             };
         }
 
-        // TODO: Optimization: Use uniform buffer object
-        setUniforms(this.programInfo, uniforms);
-
-        setUniforms(this.programInfo, {
+        setBlockUniforms(this.viewUniformInfo, {
+            ...uniforms,
             uViewportSize: [coords.width, coords.height],
+            uDevicePixelRatio: this.glHelper.dpr,
         });
 
-        // TODO: Optimize: don't set viewport and stuff if rect is outside clipRect or screen
+        setUniformBlock(this.gl, this.programInfo, this.viewUniformInfo);
 
+        // TODO: Optimize: don't set viewport and stuff if rect is outside clipRect or screen
         return clippedCoords.height > 0 && clippedCoords.width > 0;
     }
 
@@ -884,3 +921,39 @@ export default class Mark {
         // override
     }
 }
+
+/**
+ * @augments {InternMap<K, import("../gl/dataToVertices").RangeEntry>}
+ * @template K
+ */
+class RangeMap extends InternMap {
+    constructor() {
+        super([], JSON.stringify);
+    }
+
+    /**
+     * @param {K} key
+     */
+    get(key) {
+        let value = super.get(key);
+        if (value === undefined) {
+            value = {
+                offset: 0,
+                count: 0,
+                xIndex: undefined,
+            };
+            super.set(key, value);
+        }
+        return value;
+    }
+
+    /**
+     *
+     * @param {Map<K, import("../gl/dataToVertices").RangeEntry>} anotherMap
+     */
+    migrateEntries(anotherMap) {
+        for (const [key, value] of anotherMap.entries()) {
+            Object.assign(this.get(key), value);
+        }
+    }
+}

package/src/marks/pointMark.js

@@ -1,6 +1,5 @@
 import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
-import { bisector, quantileSorted } from "d3-array";
-import { zoomLinear } from "vega-util";
+import { quantileSorted } from "d3-array";
 import { PointVertexBuilder } from "../gl/dataToVertices";
 import VERTEX_SHADER from "../gl/point.vertex.glsl";
 import FRAGMENT_SHADER from "../gl/point.fragment.glsl";
@@ -156,7 +155,7 @@ export default class PointMark extends Mark {
         builder.addBatches(collector.facetBatches);
 
         const vertexData = builder.toArrays();
-        this.rangeMap = vertexData.rangeMap;
+        this.rangeMap.migrateEntries(vertexData.rangeMap);
         this.updateBufferInfo(vertexData);
     }
 
@@ -210,44 +209,25 @@ export default class PointMark extends Mark {
      * @param {import("../view/rendering").GlobalRenderingOptions} options
      */
     prepareRender(options) {
-        super.prepareRender(options);
+        const ops = super.prepareRender(options);
 
-        setUniforms(this.programInfo, {
-            uMaxPointSize: this._getMaxPointSize(),
-            uScaleFactor: this._getGeometricScaleFactor(),
-            uSemanticThreshold: this.getSemanticThreshold(),
-        });
+        ops.push(() =>
+            setUniforms(this.programInfo, {
+                uMaxPointSize: this._getMaxPointSize(),
+                uScaleFactor: this._getGeometricScaleFactor(),
+                uSemanticThreshold: this.getSemanticThreshold(),
+            })
+        );
 
-        setBuffersAndAttributes(
-            this.gl,
-            this.programInfo,
-            this.vertexArrayInfo
+        ops.push(() =>
+            setBuffersAndAttributes(
+                this.gl,
+                this.programInfo,
+                this.vertexArrayInfo
+            )
         );
 
-        // Setup bisector that allows for searching the points that reside within the viewport.
-        const xEncoder = this.encoders.x;
-        if (xEncoder && !xEncoder.constant) {
-            const bisect = bisector(xEncoder.accessor).left;
-            const visibleDomain = this.unitView
-                .getScaleResolution("x")
-                .getScale()
-                .domain();
-
-            // A hack to include points that are just beyond the borders. TODO: Compute based on maxPointSize
-            const paddedDomain = zoomLinear(visibleDomain, null, 1.01);
-
-            /** @param {any[]} facetId */
-            this._findIndices = (facetId) => {
-                const data = this.unitView
-                    .getCollector()
-                    .facetBatches.get(facetId);
-
-                return [
-                    bisect(data, paddedDomain[0]),
-                    bisect(data, paddedDomain[paddedDomain.length - 1]),
-                ];
-            };
-        }
+        return ops;
     }
 
     /**
@@ -256,27 +236,16 @@ export default class PointMark extends Mark {
     render(options) {
         const gl = this.gl;
 
-        return this.createRenderCallback(
-            (offset, count) => {
-                // TODO: findIndices is rather slow. Consider a more coarse-grained, "tiled" solution.
-                const [lower, upper] = this._findIndices
-                    ? this._findIndices(options.facetId)
-                    : [0, count];
-
-                const length = upper - lower;
-
-                if (length) {
-                    drawBufferInfo(
-                        gl,
-                        this.vertexArrayInfo,
-                        gl.POINTS,
-                        length,
-                        offset + lower
-                    );
-                }
-            },
-            options,
-            () => this.rangeMap
-        );
+        return this.createRenderCallback((offset, count) => {
+            if (count) {
+                drawBufferInfo(
+                    gl,
+                    this.vertexArrayInfo,
+                    gl.POINTS,
+                    count,
+                    offset
+                );
+            }
+        }, options);
     }
 }

package/src/marks/rectMark.js

@@ -146,6 +146,25 @@ export default class RectMark extends Mark {
         );
     }
 
+    finalizeGraphicsInitialization() {
+        super.finalizeGraphicsInitialization();
+
+        this.gl.useProgram(this.programInfo.program);
+
+        const props = this.properties;
+
+        setUniforms(this.programInfo, {
+            uMinSize: [props.minWidth, props.minHeight], // in pixels
+            uMinOpacity: props.minOpacity,
+            uCornerRadii: [
+                props.cornerRadiusTopRight ?? props.cornerRadius,
+                props.cornerRadiusBottomRight ?? props.cornerRadius,
+                props.cornerRadiusTopLeft ?? props.cornerRadius,
+                props.cornerRadiusBottomLeft ?? props.cornerRadius,
+            ],
+        });
+    }
+
     updateGraphicsData() {
         const collector = this.unitView.getCollector();
         const numItems = collector.getItemCount();
@@ -155,13 +174,12 @@ export default class RectMark extends Mark {
             encoders: this.encoders,
             attributes: this.getAttributes(),
             numItems,
-            buildXIndex: this.properties.buildIndex,
         });
 
         builder.addBatches(collector.facetBatches);
 
         const vertexData = builder.toArrays();
-        this.rangeMap = vertexData.rangeMap;
+        this.rangeMap.migrateEntries(vertexData.rangeMap);
         this.updateBufferInfo(vertexData);
     }
 
@@ -169,26 +187,17 @@ export default class RectMark extends Mark {
      * @param {import("../view/rendering").GlobalRenderingOptions} options
      */
     prepareRender(options) {
-        super.prepareRender(options);
+        const ops = super.prepareRender(options);
 
-        const props = this.properties;
-
-        setUniforms(this.programInfo, {
-            uMinSize: [props.minWidth, props.minHeight], // in pixels
-            uMinOpacity: props.minOpacity,
-            uCornerRadii: [
-                props.cornerRadiusTopRight ?? props.cornerRadius,
-                props.cornerRadiusBottomRight ?? props.cornerRadius,
-                props.cornerRadiusTopLeft ?? props.cornerRadius,
-                props.cornerRadiusBottomLeft ?? props.cornerRadius,
-            ],
-        });
-
-        setBuffersAndAttributes(
-            this.gl,
-            this.programInfo,
-            this.vertexArrayInfo
+        ops.push(() =>
+            setBuffersAndAttributes(
+                this.gl,
+                this.programInfo,
+                this.vertexArrayInfo
+            )
         );
+
+        return ops;
     }
 
     /**
@@ -197,19 +206,15 @@ export default class RectMark extends Mark {
     render(options) {
         const gl = this.gl;
 
-        return this.createRenderCallback(
-            (offset, count) => {
-                drawBufferInfo(
-                    gl,
-                    this.vertexArrayInfo,
-                    gl.TRIANGLE_STRIP,
-                    count,
-                    offset
-                );
-            },
-            options,
-            () => this.rangeMap
-        );
+        return this.createRenderCallback((offset, count) => {
+            drawBufferInfo(
+                gl,
+                this.vertexArrayInfo,
+                gl.TRIANGLE_STRIP,
+                count,
+                offset
+            );
+        }, options);
     }
 
     /**

package/src/marks/rule.js

@@ -139,6 +139,20 @@ export default class RuleMark extends Mark {
         this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER);
     }
 
+    finalizeGraphicsInitialization() {
+        super.finalizeGraphicsInitialization();
+
+        this.gl.useProgram(this.programInfo.program);
+
+        const props = this.properties;
+
+        setUniforms(this.programInfo, {
+            uMinLength: props.minLength,
+            uDashTextureSize: this.dashTextureSize,
+            uStrokeCap: ["butt", "square", "round"].indexOf(props.strokeCap),
+        });
+    }
+
     updateGraphicsData() {
         const collector = this.unitView.getCollector();
         const itemCount = collector.getItemCount();
@@ -147,13 +161,12 @@ export default class RuleMark extends Mark {
             encoders: this.encoders,
             attributes: this.getAttributes(),
             numItems: Math.max(itemCount, this.properties.minBufferSize || 0),
-            buildXIndex: this.properties.buildIndex,
         });
 
         builder.addBatches(collector.facetBatches);
 
         const vertexData = builder.toArrays();
-        this.rangeMap = vertexData.rangeMap;
+        this.rangeMap.migrateEntries(vertexData.rangeMap);
 
         this.updateBufferInfo(vertexData);
     }
@@ -162,28 +175,26 @@ export default class RuleMark extends Mark {
      * @param {import("../view/rendering").GlobalRenderingOptions} options
      */
     prepareRender(options) {
-        super.prepareRender(options);
-
-        setUniforms(this.programInfo, {
-            uMinLength: this.properties.minLength,
-            uDashTextureSize: this.dashTextureSize,
-            uStrokeCap: ["butt", "square", "round"].indexOf(
-                this.properties.strokeCap
-            ),
-        });
+        const ops = super.prepareRender(options);
 
         if (this.dashTexture) {
-            setUniforms(this.programInfo, {
-                uDashTexture: this.dashTexture,
-                uStrokeDashOffset: this.properties.strokeDashOffset,
-            });
+            ops.push(() =>
+                setUniforms(this.programInfo, {
+                    uDashTexture: this.dashTexture,
+                    uStrokeDashOffset: this.properties.strokeDashOffset,
+                })
+            );
         }
 
-        setBuffersAndAttributes(
-            this.gl,
-            this.programInfo,
-            this.vertexArrayInfo
+        ops.push(() =>
+            setBuffersAndAttributes(
+                this.gl,
+                this.programInfo,
+                this.vertexArrayInfo
+            )
         );
+
+        return ops;
     }
 
     /**
@@ -201,8 +212,7 @@ export default class RuleMark extends Mark {
                     count,
                     offset
                 ),
-            options,
-            () => this.rangeMap
+            options
         );
     }
 }