@genome-spy/core 0.18.1 → 0.20.0

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/cloner.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import createCloner from "./cloner";
 
 const template = {

package/src/utils/coalesce.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import coalesce from "./coalesce";
 
 test("Coalesce returns first defined value", () => {

package/src/utils/concatIterables.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import concatIterables from "./concatIterables";
 
 test("ConcatIterables yields all elements in the correct order", () => {

package/src/utils/domainArray.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, test } from "vitest";
 import createDomain, {
     toRegularArray as r,
     PiecewiseDomain,

package/src/utils/indexer.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import createIndexer from "./indexer";
 
 test("Index values one by one", () => {

package/src/utils/iterateNestedMaps.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import { group } from "d3-array";
 import iterateNestedMaps from "./iterateNestedMaps";
 

package/src/utils/kWayMerge.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import kWayMerge from "./kWayMerge";
 
 test("k-way merge merges multiple sorted arrays", () => {

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

@@ -1,6 +1,8 @@
+import { describe, expect, test } from "vitest";
 import {
     mapToPixelCoords,
     getMinimumSize,
+    getLargestSize,
     isStretching,
     parseSizeDef,
 } from "./flexLayout";
@@ -289,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)];
+    }
+}

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

@@ -0,0 +1,71 @@
+import { expect, test, describe } from "vitest";
+
+import Grid from "./grid";
+
+describe("Grid indexing", () => {
+    test("Single row", () => {
+        const g = new Grid(3);
+
+        expect(g.maxCols).toEqual(Infinity);
+        expect(g.nCols).toEqual(3);
+        expect(g.nRows).toEqual(1);
+        expect(g.colIndices).toEqual([[0], [1], [2]]);
+        expect(g.rowIndices).toEqual([[0, 1, 2]]);
+        expect(g.getCellIndex(1, 0)).toEqual(1);
+        expect(g.getCellIndex(1, 1)).toBeUndefined();
+        expect(g.getCellCoords(1)).toEqual([1, 0]);
+        expect(g.getCellCoords(-1)).toBeUndefined();
+        expect(g.getCellCoords(3)).toBeUndefined();
+    });
+
+    test("Single column", () => {
+        const g = new Grid(3, 1);
+
+        expect(g.maxCols).toEqual(1);
+        expect(g.nCols).toEqual(1);
+        expect(g.nRows).toEqual(3);
+        expect(g.colIndices).toEqual([[0, 1, 2]]);
+        expect(g.rowIndices).toEqual([[0], [1], [2]]);
+        expect(g.getCellIndex(0, 1)).toEqual(1);
+        expect(g.getCellIndex(1, 1)).toBeUndefined();
+        expect(g.getCellCoords(1)).toEqual([0, 1]);
+    });
+
+    test("Two columns", () => {
+        const g = new Grid(6, 2);
+
+        expect(g.maxCols).toEqual(2);
+        expect(g.nCols).toEqual(2);
+        expect(g.nRows).toEqual(3);
+        expect(g.colIndices).toEqual([
+            [0, 2, 4],
+            [1, 3, 5],
+        ]);
+        expect(g.rowIndices).toEqual([
+            [0, 1],
+            [2, 3],
+            [4, 5],
+        ]);
+        expect(g.getCellIndex(1, 0)).toEqual(1);
+        expect(g.getCellIndex(0, 1)).toEqual(2);
+        expect(g.getCellIndex(1, 1)).toEqual(3);
+        expect(g.getCellCoords(3)).toEqual([1, 1]);
+    });
+
+    test("Two columns, second is partial", () => {
+        const g = new Grid(5, 2);
+
+        expect(g.maxCols).toEqual(2);
+        expect(g.nCols).toEqual(2);
+        expect(g.nRows).toEqual(3);
+        expect(g.colIndices).toEqual([
+            [0, 2, 4],
+            [1, 3],
+        ]);
+        expect(g.rowIndices).toEqual([[0, 1], [2, 3], [4]]);
+        expect(g.getCellIndex(1, 0)).toEqual(1);
+        expect(g.getCellIndex(0, 1)).toEqual(2);
+        expect(g.getCellIndex(1, 2)).toBeUndefined();
+        expect(g.getCellCoords(3)).toEqual([1, 1]);
+    });
+});

package/src/utils/layout/padding.js

@@ -61,6 +61,19 @@ export default class Padding {
         );
     }
 
+    /**
+     *
+     * @param {Padding} padding padding to subtract
+     */
+    subtract(padding) {
+        return new Padding(
+            this.top - padding.top,
+            this.right - padding.right,
+            this.bottom - padding.bottom,
+            this.left - padding.left
+        );
+    }
+
     /**
      *
      * @param {PaddingConfig} config

package/src/utils/layout/rectangle.js

@@ -31,6 +31,8 @@ export default class Rectangle {
         );
     }
 
+    static ZERO = Rectangle.create(0, 0, 0, 0);
+
     /**
      * @param {Prop} prop
      * @param {number | function():number} value
@@ -279,4 +281,8 @@ export default class Rectangle {
             y: (y - this.y) / this.height,
         };
     }
+
+    toString() {
+        return `Rectangle: x: ${this.x}, y: ${this.y}, width: ${this.width}, height: ${this.height}`;
+    }
 }

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

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import Rectangle from "./rectangle";
 import Padding from "./padding";
 

package/src/utils/mergeObjects.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import mergeObjects from "./mergeObjects";
 
 test("Merges non-conflicting properties", () => {

package/src/utils/numberExtractor.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import numberExtractor from "./numberExtractor";
 
 test("NumberExtractor parses delimited integers", () => {

package/src/utils/propertyCacher.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import { getCachedOrCall, invalidate, invalidateAll } from "./propertyCacher";
 
 class TestClass {

package/src/utils/propertyCoalescer.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import coalesceProperties from "./propertyCoalescer";
 
 test("CoalesceProperties works as expected", () => {

package/src/utils/reservationMap.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import ReservationMap from "./reservationMap";
 
 test("ReservationMap works correctly", () => {

package/src/utils/topK.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import { range } from "d3-array";
 import { topK, topKSlice } from "./topK";
 

package/src/utils/variableTools.test.js

@@ -1,3 +1,4 @@
+import { expect, test } from "vitest";
 import * as vt from "./variableTools";
 
 test("InferNumerality", () => {

package/src/view/axisResolution.test.js

@@ -1,3 +1,4 @@
+import { describe, expect, test } from "vitest";
 import { createAndInitialize } from "./testUtils";
 import UnitView from "./unitView";
 import View from "./view";

package/src/view/axisView.js

@@ -31,7 +31,7 @@ function getPerpendicularChannel(channel) {
 }
 
 /** @type {Record<PositionalChannel, AxisOrient[]>} */
-const CHANNEL_ORIENTS = {
+export const CHANNEL_ORIENTS = {
     x: ["bottom", "top"],
     y: ["left", "right"],
 };
@@ -120,6 +120,8 @@ export default class AxisView extends LayerView {
             this.findChildByName(CHROM_LAYER_NAME).getDynamicDataSource = () =>
                 new DynamicCallbackSource(() => genome.chromosomes);
         }
+
+        this.blockEncodingInheritance = true;
     }
 
     getOrient() {