@genome-spy/core 0.18.1 → 0.20.0

package/src/genome/genome.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, test } from "vitest";
 import Genome from "./genome";
 
 describe("Human genome, chromosome names prefixed with 'chr'", () => {
@@ -150,3 +151,38 @@ describe("C. elegans genome, chromosome names prefixed with 'chr'", () => {
         expect(g.toContinuous("III", 10)).toEqual(30351865);
     });
 });
+
+describe("Parse interval strings", () => {
+    const chromosomes = [
+        { name: "chr1", size: 1000 },
+        { name: "chr2", size: 2000 },
+        { name: "chr3", size: 3000 },
+        { name: "chrX", size: 4000 },
+    ];
+
+    const g = new Genome({ name: "random", contigs: chromosomes });
+
+    test("Parses a single chromosome, returns an interval spanning the chromosome", () => {
+        expect(g.parseInterval("chr2")).toEqual([1000, 3000]);
+    });
+
+    test("Returns undefined on unknown chromosome", () => {
+        expect(g.parseInterval("chrZ")).toBeUndefined();
+    });
+
+    test("Parses a single coordinate without a thousand separator", () => {
+        expect(g.parseInterval("chr2:1500")).toEqual([2499, 2500]);
+    });
+
+    test("Parses a single coordinate with a thousand separator", () => {
+        expect(g.parseInterval("chr2:1,500")).toEqual([2499, 2500]);
+    });
+
+    test("Parses an interval within a single chromosome", () => {
+        expect(g.parseInterval("chr2:1,500-1,700")).toEqual([2499, 2700]);
+    });
+
+    test("Parses an interval spanning multiple chromosomes", () => {
+        expect(g.parseInterval("chr2:1,500-chr3:1,500")).toEqual([2499, 4500]);
+    });
+});

package/src/genome/scaleIndex.js

@@ -24,7 +24,7 @@ export default function scaleIndex() {
     let numberingOffset = 0;
 
     const scaleFunction = (/** @type {number} */ x) =>
-        ((x - domain[0]) / domainSpan) * rangeSpan + range[0];
+        ((x + align - domain[0]) / domainSpan) * rangeSpan + range[0];
 
     /**
      * In principle, the domain consists of integer indices. However,
@@ -34,7 +34,8 @@ export default function scaleIndex() {
      */
     const scale = /** @type {any} */ (scaleFunction);
 
-    scale.invert = (y) => ((y - range[0]) / rangeSpan) * domainSpan + domain[0];
+    scale.invert = (y) =>
+        ((y - range[0]) / rangeSpan) * domainSpan + domain[0] - align;
 
     // @ts-expect-error
     scale.domain = function (_) {

package/src/genome/scaleIndex.test.js

@@ -1,23 +1,40 @@
+import { expect, test } from "vitest";
 import scaleIndex from "./scaleIndex";
 
 test("Scale with defaults works as expected", () => {
     const scale = scaleIndex();
 
-    expect(scale(-1)).toEqual(-1);
-    expect(scale(0)).toEqual(0);
-    expect(scale(1)).toEqual(1);
-    expect(scale(2)).toEqual(2);
+    // Align is 0.5 by default
+    expect(scale(-1)).toEqual(-0.5);
+    expect(scale(0)).toEqual(0.5);
+    expect(scale(1)).toEqual(1.5);
+    expect(scale(2)).toEqual(2.5);
 });
 
 test("Scale scales correctly with custom domain and range", () => {
-    const scale = scaleIndex().domain([0, 10]).range([100, 200]);
+    const scale = scaleIndex().domain([0, 10]).range([100, 200]).align(0.0);
 
     expect(scale(0)).toEqual(100);
     expect(scale(10)).toEqual(200);
 });
 
 test("Invert works as expected", () => {
-    const scale = scaleIndex().domain([0, 10]).range([100, 200]);
+    const scale = scaleIndex().domain([0, 10]).range([100, 200]).align(0.0);
+
+    expect(scale.invert(scale(0))).toEqual(0);
+    expect(scale.invert(scale(5))).toEqual(5);
+    expect(scale.invert(scale(10))).toEqual(10);
+});
+
+test("Scale scales correctly with custom domain, range, and align", () => {
+    const scale = scaleIndex().domain([0, 10]).range([100, 200]).align(0.5);
+
+    expect(scale(0)).toEqual(105);
+    expect(scale(10)).toEqual(205);
+});
+
+test("Invert works as expected with align", () => {
+    const scale = scaleIndex().domain([0, 10]).range([100, 200]).align(0.5);
 
     expect(scale.invert(scale(0))).toEqual(0);
     expect(scale.invert(scale(5))).toEqual(5);

package/src/genome/scaleLocus.test.js

@@ -1,3 +1,4 @@
+import { test } from "vitest";
 import scaleLocus from "./scaleLocus";
 
 test.todo("Write some tests!");

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,12 +1,15 @@
 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 { isValueDef } from "../encoder/encoder";
+import {
+    isHighPrecisionScale,
+    splitHighPrecision,
+} from "../scale/glslScaleGenerator";
 
 /**
  * @typedef {object} RangeEntry Represents a location of a vertex subset
@@ -55,7 +58,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,14 +71,14 @@ 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,
             });
         }
 

package/src/gl/includes/common.glsl

@@ -1,12 +1,12 @@
 #define PI 3.141593
 
 /** Offset in "unit" units */
-uniform vec2 uViewOffset;
+uniform mediump vec2 uViewOffset;
 
-uniform vec2 uViewScale;
+uniform mediump vec2 uViewScale;
 
 /** Size of the logical viewport in pixels, i.e., the view */
-uniform vec2 uViewportSize;
+uniform mediump vec2 uViewportSize;
 
 uniform lowp float uDevicePixelRatio;
 

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/mark.js

@@ -8,7 +8,6 @@ import {
     setUniforms,
 } from "twgl.js";
 import { isDiscrete } from "vega-scale";
-import { fp64ify } from "../gl/includes/fp64-utils";
 import createEncoders, {
     isChannelDefWithScale,
     isDatumDef,
@@ -20,11 +19,12 @@ import {
     generateScaleGlsl,
     RANGE_TEXTURE_PREFIX,
     ATTRIBUTE_PREFIX,
+    isHighPrecisionScale,
+    toHighPrecisionDomainUniform,
+    splitHighPrecision,
 } from "../scale/glslScaleGenerator";
-import FP64 from "../gl/includes/fp64-arithmetic.glsl";
 import GLSL_COMMON from "../gl/includes/common.glsl";
 import GLSL_SCALES from "../gl/includes/scales.glsl";
-import GLSL_SCALES_FP64 from "../gl/includes/scales_fp64.glsl";
 import GLSL_SAMPLE_FACET from "../gl/includes/sampleFacet.glsl";
 import GLSL_PICKING_VERTEX from "../gl/includes/picking.vertex.glsl";
 import GLSL_PICKING_FRAGMENT from "../gl/includes/picking.fragment.glsl";
@@ -334,7 +334,10 @@ export default class Mark {
               "};\n\n"
             : "";
 
+        const vertexPrecision = "precision highp float;\n";
+
         const vertexParts = [
+            vertexPrecision,
             ...extraHeaders,
             GLSL_COMMON,
             GLSL_SCALES,
@@ -345,11 +348,6 @@ export default class Mark {
             vertexShader,
         ];
 
-        if (vertexParts.some((code) => /[Ff]p64/.test(code))) {
-            vertexParts.unshift(GLSL_SCALES_FP64);
-            vertexParts.unshift(FP64);
-        }
-
         const fragmentParts = [
             ...extraHeaders,
             GLSL_COMMON,
@@ -413,8 +411,8 @@ export default class Mark {
 
                 const datum = encoder.indexer
                     ? encoder.indexer(channelDef.datum)
-                    : encoder.scale.fp64
-                    ? fp64ify(+channelDef.datum)
+                    : isHighPrecisionScale(encoder.scale.type)
+                    ? splitHighPrecision(+channelDef.datum)
                     : +channelDef.datum;
 
                 setUniforms(this.programInfo, {
@@ -579,8 +577,8 @@ export default class Mark {
                         : scale.domain();
 
                     setter(
-                        scale.fp64
-                            ? domain.map((x) => fp64ify(x)).flat()
+                        isHighPrecisionScale(scale.type)
+                            ? toHighPrecisionDomainUniform(domain)
                             : domain
                     );
                 }
@@ -618,13 +616,16 @@ export default class Mark {
                 }
             }
 
+            if (!facetTexture) {
+                throw new Error("No facet texture available. This is bug.");
+            }
+
             setUniforms(this.programInfo, {
                 uSampleFacetTexture: facetTexture,
             });
         }
 
         setUniforms(this.programInfo, {
-            ONE: 1.0, // a hack needed by emulated 64 bit floats
             uDevicePixelRatio: this.glHelper.dpr,
             uViewOpacity: this.unitView.getEffectiveOpacity(),
             // TODO: Rendering of the mark should be completely skipped if it doesn't
@@ -748,7 +749,7 @@ export default class Mark {
                 }
             };
         } else {
-            const rangeEntry = rangeMapSource().get(options.facetId);
+            const rangeEntry = rangeMapSource()?.get(options.facetId);
             if (rangeEntry && rangeEntry.count) {
                 return function renderStatic() {
                     if (self.prepareSampleFacetRendering(options)) {

package/src/scale/glslScaleGenerator.js

@@ -109,8 +109,8 @@ export function generateScaleGlsl(channel, scale, channelDef) {
     const domainUniformName = DOMAIN_PREFIX + primary;
     const rangeName = RANGE_PREFIX + primary;
 
-    const fp64 = !!scale.fp64;
-    const attributeType = fp64 ? "vec2" : "float";
+    const hp = isHighPrecisionScale(scale.type);
+    const attributeType = hp ? "vec2" : "float";
 
     const domainLength = scale.domain ? scale.domain().length : undefined;
 
@@ -127,9 +127,6 @@ export function generateScaleGlsl(channel, scale, channelDef) {
     glsl.push("");
 
     glsl.push(`#define ${channel}_DEFINED`);
-    if (fp64) {
-        glsl.push(`#define ${channel}_FP64`);
-    }
 
     const { transform } = splitScaleType(scale.type);
 
@@ -139,11 +136,7 @@ export function generateScaleGlsl(channel, scale, channelDef) {
      */
     const makeScaleCall = (name, ...args) =>
         // eslint-disable-next-line no-useless-call
-        makeFunctionCall.apply(null, [
-            name + (fp64 ? "Fp64" : ""),
-            "value",
-            ...args,
-        ]);
+        makeFunctionCall.apply(null, [name, "value", ...args]);
 
     let functionCall;
     switch (transform) {
@@ -181,6 +174,17 @@ export function generateScaleGlsl(channel, scale, channelDef) {
 
         case "index":
         case "locus":
+            functionCall = makeScaleCall(
+                "scaleBandHp",
+                "domain",
+                rangeName,
+                scale.paddingInner(),
+                scale.paddingOuter(),
+                scale.align(),
+                // @ts-expect-error TODO: fix typing
+                channelDef.band ?? 0.5
+            );
+            break;
         case "point":
         case "band":
             functionCall = makeScaleCall(
@@ -296,10 +300,13 @@ export function generateScaleGlsl(channel, scale, channelDef) {
     if (functionCall) {
         const name = domainUniformName;
         if (usesDomain) {
-            const dtype = fp64 ? "vec4" : "vec2";
-            scaleBody.push(
-                `${dtype} domain = ${dtype}(${name}[slot], ${name}[slot + 1]);`
-            );
+            if (hp) {
+                scaleBody.push(`vec3 domain = ${name};`);
+            } else {
+                scaleBody.push(
+                    `vec2 domain = vec2(${name}[slot], ${name}[slot + 1]);`
+                );
+            }
         }
 
         scaleBody.push(`float transformed = ${functionCall};`);
@@ -344,9 +351,9 @@ ${returnType} ${SCALED_FUNCTION_PREFIX}${channel}() {
             isContinuous(scale.type) || isDiscretizing(scale.type)
                 ? domainLength
                 : 2;
-        domainUniform = `${
-            fp64 ? "vec2" : "float"
-        } ${domainUniformName}[${length}];`;
+        domainUniform = hp
+            ? `highp vec3 ${domainUniformName};`
+            : `mediump float ${domainUniformName}[${length}];`;
     }
 
     return {
@@ -447,3 +454,35 @@ function makeFunctionCall(name, ...args) {
 
     return `${name}(${fixedArgs.join(", ")})`;
 }
+
+/**
+ *
+ * @param {string} type
+ */
+export function isHighPrecisionScale(type) {
+    return type == "index" || type == "locus";
+}
+
+/**
+ * @param {number} x
+ * @param {number[]} [arr]
+ */
+export function splitHighPrecision(x, arr) {
+    // Maximum precise index number is 2^(23 + 11) ~ 17G
+    // Higher number increases precision but makes zooming unstable
+    const bs = 2 ** 11;
+
+    const lo = x % bs;
+    const hi = Math.round(x - lo);
+    arr ??= [];
+    arr[0] = hi;
+    arr[1] = lo;
+    return arr;
+}
+
+/**
+ * @param {number[]} domain
+ */
+export function toHighPrecisionDomainUniform(domain) {
+    return [...splitHighPrecision(domain[0]), domain[1] - domain[0]];
+}

package/src/scale/scale.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 /*!
  * Adapted from vega-encode:
  * https://github.com/vega/vega/blob/master/packages/vega-encode/test/scale-test.js

package/src/scale/ticks.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 /*!
  * Adapted from vega-encode:
  * https://github.com/vega/vega/blob/master/packages/vega-encode/test/scale-test.js

package/src/spec/scale.d.ts

@@ -221,15 +221,6 @@ export interface Scale {
      * If `true` and the scale is used on a positional channel, it can bee zoomed and translated interactively.
      */
     zoom?: boolean | ZoomParams;
-
-    /**
-     * Use emulated 64bit floating points on the GPU to increase precision.
-     *
-     * Emulation has a performance cost when compared to the native 32bit processing, but the effect is negligible in the most cases.
-     *
-     * __Default value:__ `true` for `"locus"` scale, `false` for others.
-     */
-    fp64?: boolean;
 }
 
 export interface SchemeParams {