@genome-spy/core 0.19.1 → 0.22.0

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/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/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/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;
+    }
+}

package/src/utils/binnedIndex.test.js

@@ -0,0 +1,73 @@
+import { describe, expect, test } from "vitest";
+import { createBinningRangeIndexer } from "./binnedIndex.js";
+
+describe("Binning Indexer", () => {
+    test("Points are binned correctly", () => {
+        const items = [0, 1, 4, 10, 35, 36, 80];
+        const indexer = createBinningRangeIndexer(10, [0, 100], (x) => x);
+
+        items.forEach((i) => indexer(i, i, i + 1));
+
+        const index = indexer.getIndex();
+
+        expect(index(0, 1)).toEqual([0, 5]);
+        expect(index(1, 2)).toEqual([0, 5]);
+        expect(index(1, 15)).toEqual([0, 11]);
+        expect(index(10, 15)).toEqual([10, 11]);
+        expect(index(11, 38)).toEqual([10, 37]);
+        expect(index(11, 45)).toEqual([10, 37]);
+        expect(index(40, 85)).toEqual([80, 81]);
+        expect(index(90, 100)).toEqual([81, 81]);
+    });
+
+    test("Non-overlapping ranges are binned correctly", () => {
+        const items = [
+            [0, 5],
+            [25, 50],
+            [50, 55],
+        ];
+        const indexer = createBinningRangeIndexer(
+            10,
+            [0, 100],
+            (x) => x[0],
+            (x) => x[1]
+        );
+
+        items.forEach((x) => indexer(x, x[0], x[1]));
+
+        const index = indexer.getIndex();
+
+        // TODO: More tests. Doesn't work 100%
+
+        expect(index(0, 1)).toEqual([0, 5]);
+        expect(index(3, 40)).toEqual([0, 50]);
+        expect(index(6, 40)).toEqual([0, 50]);
+        // fails: expect(index(50, 57)).toEqual([50, 55]);
+    });
+
+    test("Overlapping ranges are binned correctly", () => {
+        const items = [
+            [10, 30],
+            [25, 50],
+        ];
+        const indexer = createBinningRangeIndexer(
+            10,
+            [0, 100],
+            (x) => x[0],
+            (x) => x[1]
+        );
+
+        items.forEach((x) => indexer(x, x[0], x[1]));
+
+        const index = indexer.getIndex();
+
+        // TODO: More tests. Doesn't work 100%
+
+        expect(index(0, 5)).toEqual([10, 10]);
+        expect(index(0, 15)).toEqual([10, 30]);
+        expect(index(27, 40)).toEqual([10, 50]);
+        expect(index(40, 50)).toEqual([25, 50]);
+        expect(index(40, 80)).toEqual([25, 50]);
+        expect(index(10, 29)).toEqual([10, 50]);
+    });
+});

package/src/utils/layout/flexLayout.js

@@ -133,7 +133,7 @@ export function mapToPixelCoords(
 /**
  * Returns the minimum size  (the sum of pixels sizes) for the flex items
  *
- * @param {SizeDef[]} items
+ * @param {Iterable<SizeDef>} items
  * @param {FlexOptions} [options]
  */
 export function getMinimumSize(items, { spacing } = { spacing: 0 }) {
@@ -144,6 +144,21 @@ export function getMinimumSize(items, { spacing } = { spacing: 0 }) {
     return Math.max(0, minimumSize - spacing);
 }
 
+/**
+ * @param {Iterable<SizeDef>} items
+ * @returns {SizeDef}
+ */
+export function getLargestSize(items) {
+    let px = 0;
+    let grow = 0;
+    for (const s of items) {
+        px = Math.max(px, s.px ?? 0);
+        grow = Math.max(grow, s.grow ?? 0);
+    }
+
+    return { px, grow };
+}
+
 /**
  * Returns true if relative (stretching) elements are present
  * @param {SizeDef[]} items
@@ -172,13 +187,30 @@ export class FlexDimensions {
      * @param {import("./padding").default} padding
      */
     addPadding(padding) {
+        return this.#addPx(padding.width, padding.height);
+    }
+
+    /**
+     * Subtracts padding from absolute (px) dimensions
+     *
+     * @param {import("./padding").default} padding
+     */
+    subtractPadding(padding) {
+        return this.#addPx(-padding.width, -padding.height);
+    }
+
+    /**
+     * @param {number} width
+     * @param {number} height
+     */
+    #addPx(width, height) {
         return new FlexDimensions(
             {
-                px: (this.width.px || 0) + padding.width,
+                px: (this.width.px ?? 0) + width,
                 grow: this.width.grow,
             },
             {
-                px: (this.height.px || 0) + padding.height,
+                px: (this.height.px ?? 0) + height,
                 grow: this.height.grow,
             }
         );

package/src/utils/layout/flexLayout.test.js

@@ -2,6 +2,7 @@ import { describe, expect, test } from "vitest";
 import {
     mapToPixelCoords,
     getMinimumSize,
+    getLargestSize,
     isStretching,
     parseSizeDef,
 } from "./flexLayout";
@@ -290,6 +291,19 @@ describe("Utility fuctions", () => {
         expect(getMinimumSize(items, { spacing: 10 })).toEqual(330);
     });
 
+    test("getLargestSize", () => {
+        const items = [
+            { px: 100 },
+            { px: 0, grow: 0 },
+            { grow: 1 },
+            { grow: 9 },
+            { px: 200 },
+            { px: 50 },
+        ];
+
+        expect(getLargestSize(items)).toEqual({ px: 200, grow: 9 });
+    });
+
     test("isStretching", () => {
         expect(isStretching([{ grow: 1 }])).toBeTruthy();
         expect(isStretching([{ px: 1 }])).toBeFalsy();

package/src/utils/layout/grid.js

@@ -0,0 +1,95 @@
+/**
+ * An utility class for indexing cells in a wrapping grid layout
+ */
+export default class Grid {
+    /**
+     *
+     * @param {number} nChildren
+     * @param {number} [maxCols]
+     */
+    constructor(nChildren, maxCols) {
+        this.n = nChildren;
+        this.maxCols = maxCols ?? Infinity;
+    }
+
+    get nRows() {
+        return this.maxCols == Infinity ? 1 : Math.ceil(this.n / this.maxCols);
+    }
+
+    get nCols() {
+        return Math.min(this.n, this.maxCols);
+    }
+
+    get rowIndices() {
+        /** @type {number[][]} */
+        const rows = [];
+
+        const nCols = this.nCols;
+        const nRows = this.nRows;
+
+        for (let row = 0; row < nRows; row++) {
+            /** @type {number[]} */
+            const arr = [];
+            rows.push(arr);
+            for (let col = 0; col < nCols; col++) {
+                const i = row * nCols + col;
+                if (i < this.n) {
+                    arr.push(i);
+                }
+            }
+        }
+        return rows;
+    }
+
+    get colIndices() {
+        /** @type {number[][]} */
+        const cols = [];
+
+        const nCols = this.nCols;
+        const nRows = this.nRows;
+
+        for (let col = 0; col < nCols; col++) {
+            /** @type {number[]} */
+            const arr = [];
+            cols.push(arr);
+            for (let row = 0; row < nRows; row++) {
+                const i = row * nCols + col;
+                if (i < this.n) {
+                    arr.push(i);
+                }
+            }
+        }
+        return cols;
+    }
+
+    /**
+     * @param {number} col
+     * @param {number} row
+     */
+    getCellIndex(col, row) {
+        let i = 0;
+
+        if (this.maxCols == Infinity) {
+            i = row == 0 ? col : undefined;
+        } else if (col >= this.maxCols) {
+            return undefined;
+        } else {
+            i = row * this.nCols + col;
+        }
+
+        return i < this.n ? i : undefined;
+    }
+
+    /**
+     *
+     * @param {number} index
+     * @returns {[number, number]}
+     */
+    getCellCoords(index) {
+        if (index < 0 || index >= this.n) {
+            return undefined;
+        }
+
+        return [index % this.nCols, Math.floor(index / this.nCols)];
+    }
+}