@genome-spy/core 0.19.0 → 0.21.0

package/src/genomeSpy.js

@@ -8,7 +8,6 @@ import Tooltip from "./utils/ui/tooltip";
 import AccessorFactory from "./encoder/accessor";
 import {
     resolveScalesAndAxes,
-    addDecorators,
     processImports,
     setImplicitScaleNames,
 } from "./view/viewUtils";
@@ -17,7 +16,6 @@ import UnitView from "./view/unitView";
 import WebGLHelper from "./gl/webGLHelper";
 import Rectangle from "./utils/layout/rectangle";
 import DeferredViewRenderingContext from "./view/renderingContext/deferredViewRenderingContext";
-import LayoutRecorderViewRenderingContext from "./view/renderingContext/layoutRecorderViewRenderingContext";
 import CompositeViewRenderingContext from "./view/renderingContext/compositeViewRenderingContext";
 import InteractionEvent from "./utils/interactionEvent";
 import Point from "./utils/layout/point";
@@ -36,6 +34,8 @@ import refseqGeneTooltipHandler from "./tooltip/refseqGeneTooltipHandler";
 import dataTooltipHandler from "./tooltip/dataTooltipHandler";
 import { invalidatePrefix } from "./utils/propertyCacher";
 import { ViewFactory } from "./view/viewFactory";
+import LayerView from "./view/layerView";
+import ImplicitRootView from "./view/implicitRootView";
 
 /**
  * @typedef {import("./spec/view").UnitSpec} UnitSpec
@@ -166,7 +166,9 @@ export default class GenomeSpy {
 
         this._glHelper = new WebGLHelper(this.container, () => {
             if (this.viewRoot) {
-                const size = this.viewRoot.getSize();
+                const size = this.viewRoot
+                    .getSize()
+                    .addPadding(this.viewRoot.getOverhang());
 
                 // If a dimension has an absolutely specified size (in pixels), use it for the canvas size.
                 // However, if the dimension has a growing component, the canvas should be fit to the
@@ -283,12 +285,19 @@ export default class GenomeSpy {
         // Replace placeholder ImportViews with actual views.
         await processImports(this.viewRoot);
 
+        if (
+            this.viewRoot instanceof UnitView ||
+            this.viewRoot instanceof LayerView
+        ) {
+            this.viewRoot = new ImplicitRootView(context, this.viewRoot);
+        }
+
         // Resolve scales, i.e., if possible, pull them towards the root
         resolveScalesAndAxes(this.viewRoot);
         setImplicitScaleNames(this.viewRoot);
 
         // Wrap unit or layer views that need axes
-        this.viewRoot = addDecorators(this.viewRoot);
+        //this.viewRoot = addDecorators(this.viewRoot);
 
         // We should now have a complete view hierarchy. Let's update the canvas size
         // and ensure that the loading message is visible.
@@ -424,7 +433,7 @@ export default class GenomeSpy {
 
         /** @param {Event} event */
         const listener = (event) => {
-            if (this.layout && event instanceof MouseEvent) {
+            if (event instanceof MouseEvent) {
                 if (event.type == "mousemove") {
                     this.tooltip.handleMouseMove(event);
                     this._tooltipUpdateRequested = false;
@@ -445,7 +454,7 @@ export default class GenomeSpy {
                  * @param {MouseEvent} event
                  */
                 const dispatchEvent = (event) => {
-                    this.layout.dispatchInteractionEvent(
+                    this.viewRoot.propagateInteractionEvent(
                         new InteractionEvent(point, event)
                     );
 
@@ -677,20 +686,16 @@ export default class GenomeSpy {
             },
             this._glHelper
         );
-        const layoutRecorder = new LayoutRecorderViewRenderingContext({});
 
         root.render(
             new CompositeViewRenderingContext(
                 this._renderingContext,
-                this._pickingContext,
-                layoutRecorder
+                this._pickingContext
             ),
             // Canvas should now be sized based on the root view or the container
             Rectangle.create(0, 0, canvasSize.width, canvasSize.height)
         );
 
-        this.layout = layoutRecorder.getLayout();
-
         this.broadcast("layoutComputed");
     }
 

package/src/gl/dataToVertices.js

@@ -1,18 +1,21 @@
 import { InternMap } from "internmap";
 import { format } from "d3-format";
 import { isString } from "vega-util";
-import { fp64ify } from "./includes/fp64-utils";
 import ArrayBuilder from "./arrayBuilder";
 import { SDF_PADDING } from "../fonts/bmFontMetrics";
-import { peek } from "../utils/arrayUtils";
-import createBinningRangeIndexer from "../utils/binnedRangeIndex";
+import { createBinningRangeIndexer } from "../utils/binnedIndex";
 import { isValueDef } from "../encoder/encoder";
+import {
+    isHighPrecisionScale,
+    splitHighPrecision,
+} from "../scale/glslScaleGenerator";
+import { isContinuous } from "vega-scale";
 
 /**
  * @typedef {object} RangeEntry Represents a location of a vertex subset
  * @prop {number} offset in vertices
  * @prop {number} count in vertices
- * @prop {import("../utils/binnedRangeIndex").Lookup} xIndex
+ * @prop {import("../utils/binnedIndex").Lookup} xIndex
  *
  * @typedef {import("./arraybuilder").ConverterMetadata} Converter
  * @typedef {import("../encoder/encoder").Encoder} Encoder
@@ -25,16 +28,9 @@ export class GeometryBuilder {
      * @param {string[]} [object.attributes]
      * @param {number} [object.numVertices] If the number of data items is known, a
      *      preallocated TypedArray is used
-     * @param {boolean} [object.buildXIndex] True if data are sorted by the field mapped to x channel and should be indexed
      */
-    constructor({
-        encoders,
-        numVertices = undefined,
-        attributes = [],
-        buildXIndex = false,
-    }) {
+    constructor({ encoders, numVertices = undefined, attributes = [] }) {
         this.encoders = encoders;
-        this._buildXIndex = buildXIndex;
 
         // Encoders for variable channels
         this.variableEncoders = Object.fromEntries(
@@ -55,7 +51,7 @@ export class GeometryBuilder {
             const accessor = ce.accessor;
 
             const doubleArray = [0, 0];
-            const fp64 = ce.scale.fp64;
+            const hp = isHighPrecisionScale(ce.scale.type);
 
             const indexer = ce.indexer;
 
@@ -68,20 +64,20 @@ export class GeometryBuilder {
              */
             const f = indexer
                 ? (d) => indexer(accessor(d))
-                : fp64
-                ? (d) => fp64ify(accessor(d), doubleArray)
+                : hp
+                ? (d) => splitHighPrecision(accessor(d), doubleArray)
                 : accessor;
 
             this.variableBuilder.addConverter(channel, {
                 f,
-                numComponents: fp64 ? 2 : 1,
-                arrayReference: fp64 ? doubleArray : undefined,
+                numComponents: hp ? 2 : 1,
+                arrayReference: hp ? doubleArray : undefined,
             });
         }
 
         this.lastOffset = 0;
 
-        /** @type {Map<any, RangeEntry>} keep track of sample locations within the vertex array */
+        /** @type {Map<any, RangeEntry>} keep track of facet locations within the vertex array */
         this.rangeMap = new InternMap([], JSON.stringify);
     }
 
@@ -118,32 +114,50 @@ export class GeometryBuilder {
      * @param {object[]} data
      */
     addBatch(key, data, lo = 0, hi = data.length) {
+        this.prepareXIndexer(data, lo, hi);
+
         for (let i = lo; i < hi; i++) {
-            this.variableBuilder.pushFromDatum(data[i]);
+            const d = data[i];
+            this.variableBuilder.pushFromDatum(d);
+            this.addToXIndex(d);
         }
 
         this.registerBatch(key);
     }
 
     /**
-     * @param {any[]} data
+     * @param {import("../data/flowNode").Data} data Domain, but specified using datums
+     * @param {number} [lo]
+     * @param {number} [hi]
      */
-    prepareXIndexer(data) {
-        if (!this._buildXIndex) {
+    prepareXIndexer(data, lo = 0, hi = lo + data.length) {
+        if (!data.length || hi - lo < 0) {
+            /**
+             * @param {import("../data/flowNode").Datum} datum
+             */
+            this.addToXIndex = (datum) => {
+                // nop
+            };
             return;
         }
 
-        const xe = this.variableEncoders.x;
-        const x2e = this.variableEncoders.x2;
+        /** @param {Encoder} encoder */
+        const getContinuousEncoder = (encoder) =>
+            encoder && isContinuous(encoder.scale?.type) && encoder;
+
+        const xe = getContinuousEncoder(this.variableEncoders.x);
+        const x2e = getContinuousEncoder(this.variableEncoders.x2);
 
-        if (xe && x2e) {
+        if (xe) {
             const xa = xe.accessor;
-            const x2a = x2e.accessor;
+            const x2a = x2e ? x2e.accessor : xa;
 
-            this.xIndexer = createBinningRangeIndexer(50, [
-                xa(data[0]),
-                x2a(peek(data)),
-            ]);
+            this.xIndexer = createBinningRangeIndexer(
+                50,
+                [xa(data[lo]), x2a(data[hi - 1])],
+                xa,
+                x2a
+            );
 
             let lastVertexCount = this.variableBuilder.vertexCount;
 
@@ -152,21 +166,16 @@ export class GeometryBuilder {
              */
             this.addToXIndex = (datum) => {
                 let currentVertexCount = this.variableBuilder.vertexCount;
-                this.xIndexer(
-                    xa(datum),
-                    x2a(datum),
-                    lastVertexCount,
-                    currentVertexCount
-                );
+                this.xIndexer(datum, lastVertexCount, currentVertexCount);
                 lastVertexCount = currentVertexCount;
             };
         } else {
             this.xIndexer = undefined;
             /**
-             * @param {any} datum
+             * @param {import("../data/flowNode").Datum} datum
              */
             this.addToXIndex = (datum) => {
-                //
+                // nop
             };
         }
     }
@@ -175,7 +184,7 @@ export class GeometryBuilder {
      * Add the datum to an index, which allows for efficient rendering of ranges
      * on the x axis. Must be called after a datum has been pushed to the ArrayBuilder.
      *
-     * @param {any} datum
+     * @param {import("../data/flowNode").Datum} datum
      */
     addToXIndex(datum) {
         //
@@ -204,7 +213,6 @@ export class RectVertexBuilder extends GeometryBuilder {
      *     If the rect is wider than the threshold, tessellate it into pieces
      * @param {number[]} [object.visibleRange]
      * @param {number} [object.numItems] Number of data items
-     * @param {boolean} [object.buildXIndex] True if data are sorted by the field mapped to x channel and should be indexed
      */
     constructor({
         encoders,
@@ -212,14 +220,12 @@ export class RectVertexBuilder extends GeometryBuilder {
         tessellationThreshold = Infinity,
         visibleRange = [-Infinity, Infinity],
         numItems,
-        buildXIndex = false,
     }) {
         super({
             encoders,
             attributes,
             numVertices:
                 tessellationThreshold == Infinity ? numItems * 6 : undefined,
-            buildXIndex,
         });
 
         this.visibleRange = visibleRange;
@@ -253,7 +259,7 @@ export class RectVertexBuilder extends GeometryBuilder {
         const xAccessor = a(e.x);
         const x2Accessor = a(e.x2);
 
-        this.prepareXIndexer(data);
+        this.prepareXIndexer(data, lo, hi);
 
         const frac = [0, 0];
         this.updateFrac(frac);
@@ -319,7 +325,6 @@ export class RuleVertexBuilder extends GeometryBuilder {
      *     If the rule is wider than the threshold, tessellate it into pieces
      * @param {number[]} [object.visibleRange]
      * @param {number} [object.numItems] Number of data items
-     * @param {boolean} [object.buildXIndex] True if data are sorted by the field mapped to x channel and should be indexed
      */
     constructor({
         encoders,
@@ -327,14 +332,12 @@ export class RuleVertexBuilder extends GeometryBuilder {
         tessellationThreshold = Infinity,
         visibleRange = [-Infinity, Infinity],
         numItems,
-        buildXIndex,
     }) {
         super({
             encoders,
             attributes,
             numVertices:
                 tessellationThreshold == Infinity ? numItems * 6 : undefined,
-            buildXIndex,
         });
 
         this.visibleRange = visibleRange;
@@ -354,7 +357,7 @@ export class RuleVertexBuilder extends GeometryBuilder {
     addBatch(key, data, lo = 0, hi = data.length) {
         //const [lower, upper] = this.visibleRange; // TODO
 
-        this.prepareXIndexer(data);
+        this.prepareXIndexer(data, lo, hi);
 
         for (let i = lo; i < hi; i++) {
             const d = data[i];
@@ -440,7 +443,6 @@ export class TextVertexBuilder extends GeometryBuilder {
      * @param {import("../fonts/bmFontMetrics").BMFontMetrics} object.fontMetrics
      * @param {Record<string, any>} object.properties
      * @param {number} [object.numCharacters] number of characters
-     * @param {boolean} [object.buildXIndex] True if data are sorted by the field mapped to x channel and should be indexed
      * @param {boolean} [object.logoLetters]
      */
     constructor({
@@ -449,13 +451,11 @@ export class TextVertexBuilder extends GeometryBuilder {
         fontMetrics,
         properties,
         numCharacters = undefined,
-        buildXIndex = false,
     }) {
         super({
             encoders,
             attributes,
             numVertices: numCharacters * 6, // six vertices per quad (character)
-            buildXIndex,
         });
 
         this.metadata = fontMetrics;
@@ -521,7 +521,7 @@ export class TextVertexBuilder extends GeometryBuilder {
         const textureCoord = [0, 0];
         this.updateTextureCoord(textureCoord);
 
-        this.prepareXIndexer(data);
+        this.prepareXIndexer(data, lo, hi);
 
         for (let i = lo; i < hi; i++) {
             const d = data[i];
@@ -621,7 +621,7 @@ export class TextVertexBuilder extends GeometryBuilder {
                 x += advance;
             }
 
-            this.addToXIndex(data);
+            this.addToXIndex(d);
         }
 
         this.registerBatch(key);

package/src/gl/includes/common.glsl

@@ -1,18 +1,18 @@
 #define PI 3.141593
 
-/** Offset in "unit" units */
-uniform vec2 uViewOffset;
+uniform View {
+    /** Offset in "unit" units */
+    mediump vec2 uViewOffset;
+    mediump vec2 uViewScale;
+    /** Size of the logical viewport in pixels, i.e., the view */
+    mediump vec2 uViewportSize;
+    lowp float uDevicePixelRatio;
+    // TODO: Views with opacity less than 1.0 should be rendered into a texture
+    // that is rendered with the specified opacity.
+    lowp float uViewOpacity;
+    bool uPickingEnabled;
+};
 
-uniform vec2 uViewScale;
-
-/** Size of the logical viewport in pixels, i.e., the view */
-uniform vec2 uViewportSize;
-
-uniform lowp float uDevicePixelRatio;
-
-// TODO: Views with opacity less than 1.0 should be rendered into a texture
-// that is rendered with the specified opacity.
-uniform lowp float uViewOpacity;
 
 /**
  * Maps a coordinate on the unit scale to a normalized device coordinate.

package/src/gl/includes/picking.fragment.glsl

@@ -1,3 +1 @@
-uniform bool uPickingEnabled;
-
 flat in highp vec4 vPickingColor;

package/src/gl/includes/picking.vertex.glsl

@@ -4,8 +4,6 @@
  * https://deck.gl/docs/developer-guide/custom-layers/picking
  */
 
-uniform bool uPickingEnabled;
-
 flat out highp vec4 vPickingColor;
 
 /**

package/src/gl/includes/scales.glsl

@@ -1,3 +1,5 @@
+const float inf = 1.0 / 0.0;
+
 // Utils ------------
 
 vec3 getDiscreteColor(sampler2D s, int index) {
@@ -67,15 +69,44 @@ float scaleBand(float value, vec2 domainExtent, vec2 range,
     // TODO: reverse
     float start = range[0];
     float stop = range[1];
+    float rangeSpan = stop - start;
 
     float n = domainExtent[1] - domainExtent[0];
 
+    // This fix departs from Vega and d3: https://github.com/vega/vega/issues/3357#issuecomment-1063253596
     paddingInner = int(n) > 1 ? paddingInner : 0.0;
 
     // Adapted from: https://github.com/d3/d3-scale/blob/master/src/band.js
-    float step = (stop - start) / max(1.0, n - paddingInner + paddingOuter * 2.0);
-    start += (stop - start - step * (n - paddingInner)) * align;
+    float step = rangeSpan / max(1.0, n - paddingInner + paddingOuter * 2.0);
+    start += (rangeSpan - step * (n - paddingInner)) * align;
     float bandwidth = step * (1.0 - paddingInner);
 
     return start + (value - domainExtent[0]) * step + bandwidth * band;
 }
+
+// High precision variant of scaleBand for index/locus scales
+float scaleBandHp(vec2 value, vec3 domainExtent, vec2 range,
+                 float paddingInner, float paddingOuter,
+                 float align, float band) {
+
+    // TODO: reverse
+    float start = range[0];
+    float stop = range[1];
+    float rangeSpan = stop - start;
+
+    vec2 domainStart = domainExtent.xy;
+    float n = domainExtent[2];
+
+    // The following computation is identical for every vertex. Could be done on the JS side.
+    float step = rangeSpan / max(1.0, n - paddingInner + paddingOuter * 2.0);
+    start += (rangeSpan - step * (n - paddingInner)) * align;
+    float bandwidth = step * (1.0 - paddingInner);
+
+    // Using max to prevent the shader compiler from wrecking the precision.
+    // Othwewise the compiler could optimize the sum of the four terms into
+    // some equivalent form that does premature rounding.
+    float hi = max(value[0] - domainStart[0], -inf);
+    float lo = max(value[1] - domainStart[1], -inf);
+
+    return dot(vec4(start, hi, lo, bandwidth), vec4(1.0, step, step, band));
+}

package/src/gl/point.vertex.glsl

@@ -1,5 +1,3 @@
-precision mediump float;
-
 /**
  * The stroke should only grow inwards, e.g, the diameter/outline is not affected by the stroke width.
  * Thus, a point that has a zero size has no visible stroke. This allows strokes to be used with

package/src/gl/rule.vertex.glsl

@@ -12,7 +12,7 @@ in float side;
 /** Minimum rule length in pixels */
 uniform float uMinLength;
 
-uniform float uDashTextureSize;
+uniform mediump float uDashTextureSize;
 uniform lowp int uStrokeCap;
 
 flat out vec4 vColor;

package/src/gl/webGLHelper.js

@@ -8,7 +8,6 @@ import {
     setTextureFromArray,
 } from "twgl.js";
 import { isArray, isString } from "vega-util";
-import { getPlatformShaderDefines } from "./includes/fp64-utils";
 
 import { isDiscrete, isDiscretizing, isInterpolating } from "vega-scale";
 import {
@@ -81,8 +80,6 @@ export default class WebGLHelper {
         // Always use pre-multiplied alpha
         gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
 
-        this._shaderDefines = getPlatformShaderDefines(gl);
-
         this.canvas = canvas;
         this.gl = gl;
 

package/src/marks/link.js

@@ -104,7 +104,7 @@ export default class LinkMark extends Mark {
             numComponents: 2,
         };
 
-        this.rangeMap = vertexData.rangeMap;
+        this.rangeMap.migrateEntries(vertexData.rangeMap);
 
         this.arrays = Object.fromEntries(
             Object.entries(vertexData.arrays).map(([k, v]) => [
@@ -124,45 +124,38 @@ export default class LinkMark extends Mark {
 
         // TODO: Vertical clipping in faceted view
 
-        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 &&
-                        this.arrays[attribute].numComponents
-                    ) {
-                        attribInfo.offset =
-                            offset * this.arrays[attribute].numComponents * 4; // gl.FLOAT in bytes
-                    }
+        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 && this.arrays[attribute].numComponents) {
+                    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,
-            () => this.rangeMap
-        );
+            }
+            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);
     }
 }