@genome-spy/core 0.19.0 → 0.21.0

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

package/src/marks/text.js

@@ -214,13 +214,12 @@ export default class TextMark extends Mark {
                 charCount,
                 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);
     }
@@ -229,7 +228,7 @@ export default class TextMark extends Mark {
      * @param {import("../view/rendering").GlobalRenderingOptions} options
      */
     prepareRender(options) {
-        super.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) {
@@ -239,17 +238,23 @@ export default class TextMark extends Mark {
             q /= 2;
         }
 
-        setUniforms(this.programInfo, {
-            uTexture: this.font.texture,
-            uSdfNumerator:
-                this.font.metrics.common.base / (this.glHelper.dpr / q),
-        });
+        ops.push(() =>
+            setUniforms(this.programInfo, {
+                uTexture: this.font.texture,
+                uSdfNumerator:
+                    this.font.metrics.common.base / (this.glHelper.dpr / q),
+            })
+        );
 
-        setBuffersAndAttributes(
-            this.gl,
-            this.programInfo,
-            this.vertexArrayInfo
+        ops.push(() =>
+            setBuffersAndAttributes(
+                this.gl,
+                this.programInfo,
+                this.vertexArrayInfo
+            )
         );
+
+        return ops;
     }
 
     /**
@@ -267,8 +272,7 @@ export default class TextMark extends Mark {
                     count,
                     offset
                 ),
-            options,
-            () => this.rangeMap
+            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/mark.d.ts

@@ -407,9 +407,6 @@ export interface MarkConfig
      */
     strokeWidth?: number;
 
-    // TODO: get rid of this
-    dynamicData?: boolean;
-
     /**
      * Minimum size for WebGL buffers (number of data items).
      * Allows for using `bufferSubData()` to update graphics.

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 {

package/src/spec/title.d.ts

@@ -0,0 +1,102 @@
+/*!
+ * Adapted from
+ * https://github.com/vega/vega/blob/main/packages/vega-typings/types/spec/title.d.ts
+ *
+ * Copyright (c) 2015-2018, University of Washington Interactive Data Lab
+ * All rights reserved.
+ *
+ * BSD-3-Clause License: https://github.com/vega/vega-lite/blob/master/LICENSE
+ */
+
+import { Align, Baseline, FontStyle, FontWeight } from "./font";
+
+export type TitleOrient = "none" | "left" | "right" | "top" | "bottom";
+export type TitleAnchor = null | "start" | "middle" | "end";
+export type TitleFrame = "bounds" | "group";
+
+export interface Title {
+    /**
+     * The title text.
+     */
+    text: string;
+
+    /**
+     * A mark style property to apply to the title text mark. If not specified, a default style of `"group-title"` is applied.
+     */
+    style?: string;
+
+    /**
+     * The anchor position for placing the title and subtitle text. One of `"start"`, `"middle"`, or `"end"`. For example, with an orientation of top these anchor positions map to a left-, center-, or right-aligned title.
+     */
+    anchor?: TitleAnchor;
+
+    /**
+     * The reference frame for the anchor position, one of `"bounds"` (to anchor relative to the full bounding box) or `"group"` (to anchor relative to the group width or height).
+     */
+    frame?: TitleFrame;
+
+    /**
+     * The orthogonal offset in pixels by which to displace the title group from its position along the edge of the chart.
+     */
+    offset?: number;
+
+    /**
+     * Default title orientation (`"top"`, `"bottom"`, `"left"`, or `"right"`)
+     */
+    orient?: TitleOrient;
+
+    // ---------- Shared Text Properties ----------
+    /**
+     * Horizontal text alignment for title text. One of `"left"`, `"center"`, or `"right"`.
+     */
+    align?: Align;
+
+    /**
+     * Angle in degrees of title and subtitle text.
+     */
+    angle?: number;
+
+    /**
+     * Vertical text baseline for title and subtitle text. One of `"alphabetic"` (default), `"top"`, `"middle"`, or `"bottom"`.
+     */
+    baseline?: Baseline;
+
+    /**
+     * Delta offset for title and subtitle text x-coordinate.
+     */
+    dx?: number;
+
+    /**
+     * Delta offset for title and subtitle text y-coordinate.
+     */
+    dy?: number;
+
+    // ---------- Title Text ----------
+    /**
+     * Text color for title text.
+     */
+    color?: string;
+
+    /**
+     * Font name for title text.
+     */
+    font?: string;
+
+    /**
+     * Font size in pixels for title text.
+     *
+     * @minimum 0
+     */
+    fontSize?: number;
+
+    /**
+     * Font style for title text.
+     */
+    fontStyle?: FontStyle;
+
+    /**
+     * Font weight for title text.
+     * This can be either a string (e.g `"bold"`, `"normal"`) or a number (`100`, `200`, `300`, ..., `900` where `"normal"` = `400` and `"bold"` = `700`).
+     */
+    fontWeight?: FontWeight;
+}

package/src/spec/view.d.ts

@@ -14,6 +14,7 @@ import {
     MarkType,
     RectProps,
 } from "./mark";
+import { Title } from "./title";
 
 export interface SizeDef {
     /** Size in pixels */
@@ -55,7 +56,7 @@ export type Paddings = Partial<Record<Side, number>>;
 
 export type PaddingConfig = Paddings | number;
 
-export interface ViewConfig extends RectProps, FillAndStrokeProps {
+export interface ViewBackground extends RectProps, FillAndStrokeProps {
     // TODO: style?: string | string[];
 
     // TODO: Move to FillAndStrokeProps or something
@@ -78,7 +79,7 @@ export interface ViewSpecBase extends ResolveSpec {
     data?: Data;
     transform?: TransformParams[];
     encoding?: Encoding;
-    title?: string;
+    title?: string | Title;
 
     /**
      * A description of the view. Multiple lines can be provided as an array.
@@ -115,7 +116,7 @@ export interface ViewSpecBase extends ResolveSpec {
 }
 
 export interface UnitSpec extends ViewSpecBase, AggregateSamplesSpec {
-    view?: ViewConfig;
+    view?: ViewBackground;
     mark: MarkType | MarkConfigAndType;
 }
 
@@ -125,7 +126,7 @@ export interface AggregateSamplesSpec {
 }
 
 export interface LayerSpec extends ViewSpecBase, AggregateSamplesSpec {
-    view?: ViewConfig;
+    view?: ViewBackground;
     layer: (LayerSpec | UnitSpec)[];
 }
 
@@ -218,4 +219,5 @@ export interface HConcatSpec extends ConcatBase {
 
 export interface ConcatSpec extends ConcatBase {
     concat: (ViewSpec | ImportSpec)[];
+    columns: number;
 }

package/src/tooltip/dataTooltipHandler.js

@@ -47,10 +47,11 @@ export default async function dataTooltipHandler(datum, mark, params) {
         </table>
     `;
 
-    const title = mark.unitView.spec.title
+    const titleText = mark.unitView.getTitleText();
+    const title = titleText
         ? html`
               <div class="title">
-                  <strong>${mark.unitView.spec.title}</strong>
+                  <strong>${titleText}</strong>
               </div>
           `
         : "";

package/src/utils/addBaseUrl.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import addBaseUrl from "./addBaseUrl";
 
 test("addBaseUrl adds baseUrl when needed", () => {

package/src/utils/binnedIndex.js

@@ -0,0 +1,147 @@
+import clamp from "./clamp";
+
+const MAX_INTEGER = 2 ** 31 - 1;
+const MIN_INTEGER = -(2 ** 31);
+
+/**
+ * @callback Lookup
+ * @param {number} start
+ * @param {number} end
+ * @param {[number, number]} [arr] Store the result into this array (and return it)
+ * @returns {[number, number]}
+ */
+
+/**
+ * A binned index for (overlapping) ranges that are sorted by their start position.
+ *
+ * @param {number} size Number of bins
+ * @param {[number, number]} domain
+ * @param {(datum: T) => number} accessor
+ * @param {(datum: T) => number} [accessor2]
+ * @template T
+ */
+export function createBinningRangeIndexer(
+    size,
+    domain,
+    accessor,
+    accessor2 = accessor
+) {
+    const startIndices = new Int32Array(size);
+    startIndices.fill(MAX_INTEGER);
+
+    let lastIndex = MIN_INTEGER;
+    let unordered = false;
+
+    const endIndices = new Int32Array(size);
+
+    const start = domain[0];
+    const domainLength = domain[1] - domain[0];
+    const divisor = domainLength / size;
+
+    /** @param {number} pos */
+    const getBin = (pos) =>
+        clamp(Math.floor((pos - start) / divisor), 0, size - 1);
+
+    /**
+     *
+     * @param {T} datum
+     * @param {number} startIndex
+     * @param {number} endIndex
+     */
+    function binningIndexer(datum, startIndex, endIndex) {
+        if (startIndex > lastIndex) {
+            lastIndex = startIndex;
+        } else if (!unordered) {
+            unordered = true;
+            // TODO: Contextual info like view path
+            console.debug(
+                "Items are not ordered properly. Disabling binned index."
+            );
+        }
+
+        const value = accessor(datum);
+        const bin = getBin(value);
+
+        if (startIndices[bin] > startIndex) {
+            startIndices[bin] = startIndex;
+        }
+
+        if (endIndices[bin] < endIndex) {
+            endIndices[bin] = endIndex;
+        }
+    }
+
+    /**
+     *
+     * @param {T} datum
+     * @param {number} startIndex
+     * @param {number} endIndex
+     */
+    function binningRangeIndexer(datum, startIndex, endIndex) {
+        if (startIndex > lastIndex) {
+            lastIndex = startIndex;
+        } else if (!unordered) {
+            unordered = true;
+            // TODO: Contextual info like view path
+            console.debug(
+                "Items are not ordered properly. Disabling binned index."
+            );
+        }
+
+        const start = accessor(datum);
+        const end = accessor2(datum);
+        const startBin = getBin(start);
+        const endBin = getBin(end);
+
+        // TODO: This loop could probably be done as a more efficient post processing
+        // step.
+        for (let bin = startBin; bin <= endBin; bin++) {
+            if (startIndices[bin] > startIndex) {
+                startIndices[bin] = startIndex;
+            }
+
+            if (endIndices[bin] < endIndex) {
+                endIndices[bin] = endIndex;
+            }
+        }
+    }
+
+    /**
+     * @type {Lookup}
+     */
+    const lookup = (start, end, arr = [0, 0]) => {
+        arr[0] = startIndices[getBin(start)];
+        arr[1] = Math.max(endIndices[getBin(end)], arr[0]);
+        return arr;
+    };
+
+    const getIndex = () => {
+        for (let i = 1; i < endIndices.length; i++) {
+            if (endIndices[i] < endIndices[i - 1]) {
+                endIndices[i] = endIndices[i - 1];
+            }
+        }
+
+        let tail = true;
+
+        for (let i = startIndices.length - 1; i > 0; i--) {
+            if (tail && startIndices[i] == MAX_INTEGER) {
+                startIndices[i] = endIndices[i];
+                tail = false;
+            } else if (startIndices[i - 1] > startIndices[i]) {
+                startIndices[i - 1] = startIndices[i];
+            }
+        }
+
+        return lookup;
+    };
+
+    binningIndexer.getIndex = getIndex;
+    binningRangeIndexer.getIndex = getIndex;
+
+    if (unordered) {
+        return undefined;
+    } else {
+        return accessor == accessor2 ? binningIndexer : binningRangeIndexer;
+    }
+}