@genome-spy/core 0.19.1 → 0.20.0

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

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/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() {

package/src/view/concatView.js

@@ -1,22 +1,10 @@
-import { isHConcatSpec, isVConcatSpec } from "./viewFactory";
-import ContainerView from "./containerView";
-import {
-    mapToPixelCoords,
-    getMinimumSize,
-    parseSizeDef,
-    FlexDimensions,
-} from "../utils/layout/flexLayout";
-import Rectangle from "../utils/layout/rectangle";
-import Padding from "../utils/layout/padding";
-import { peek } from "../utils/arrayUtils";
+import { isConcatSpec, isVConcatSpec } from "./viewFactory";
+import GridView from "./gridView";
 
 /**
  * Creates a vertically or horizontally concatenated layout for children.
- *
- * @typedef {import("./view").default} View
- * @typedef { import("../utils/layout/flexLayout").SizeDef} SizeDef
  */
-export default class ConcatView extends ContainerView {
+export default class ConcatView extends GridView {
     /**
      *
      * @param {import("./viewUtils").AnyConcatSpec} spec
@@ -25,272 +13,33 @@ export default class ConcatView extends ContainerView {
      * @param {string} name
      */
     constructor(spec, context, parent, name) {
-        super(spec, context, parent, name);
+        super(
+            spec,
+            context,
+            parent,
+            name,
+            isConcatSpec(spec)
+                ? spec.columns
+                : isVConcatSpec(spec)
+                ? 1
+                : Infinity
+        );
 
         this.spec = spec;
+    }
 
-        if (!("spacing" in this.spec)) {
-            this.spec.spacing = 10; // TODO: Provide a global configuration (theme!)
-        }
-
-        /** @type {import("../spec/view").GeometricDimension } */
-        this.mainDimension = isHConcatSpec(spec) ? "width" : "height";
-        /** @type {import("../spec/view").GeometricDimension } */
-        this.secondaryDimension =
-            this.mainDimension == "width" ? "height" : "width";
-
-        const childSpecs = isHConcatSpec(spec)
-            ? spec.hconcat
+    _createChildren() {
+        const spec = this.spec;
+        const childSpecs = isConcatSpec(spec)
+            ? spec.concat
             : isVConcatSpec(spec)
             ? spec.vconcat
-            : spec.concat;
+            : spec.hconcat;
 
-        /** @type { View[] } */
-        this.children = childSpecs.map((childSpec, i) =>
-            context.createView(childSpec, this, "concat" + i)
+        this.setChildren(
+            childSpecs.map((childSpec, i) =>
+                this.context.createView(childSpec, this, "grid" + i)
+            )
         );
     }
-
-    /*
-    _getEffectiveChildPaddings() {
-            return this.children
-                .map((view) => view.getEffectivePadding())
-                .map((padding) =>
-                    this.mainDimension == "height"
-                        ? [padding.left, padding.right]
-                        : [padding.top, padding.bottom]
-                )
-    }
-    */
-
-    getEffectivePadding() {
-        return this._cache("size/effectivePadding", () => {
-            const visibleChildren = this.children.filter((view) =>
-                view.isVisible()
-            );
-
-            if (!visibleChildren.length) {
-                return this.getPadding();
-            }
-
-            // Max paddings along the secondary dimension
-
-            const paddings = visibleChildren
-                .map((view) => view.getEffectivePadding())
-                .map((padding) =>
-                    this.mainDimension == "height"
-                        ? [padding.left, padding.right]
-                        : [padding.top, padding.bottom]
-                );
-
-            const maxPaddings = getMaxEffectivePaddings(paddings);
-
-            const effectiveChildPadding =
-                this.mainDimension == "height"
-                    ? new Padding(
-                          visibleChildren[0].getEffectivePadding().top,
-                          maxPaddings[1],
-                          peek(visibleChildren).getEffectivePadding().bottom,
-                          maxPaddings[0]
-                      )
-                    : new Padding(
-                          maxPaddings[0],
-                          visibleChildren[0].getEffectivePadding().left,
-                          maxPaddings[1],
-                          peek(visibleChildren).getEffectivePadding().right
-                      );
-
-            return this.getPadding().add(effectiveChildPadding);
-        });
-    }
-
-    getSize() {
-        return this._cache("size", () => {
-            /** @type {SizeDef} */
-            let mainSizeDef;
-            if (this.spec[this.mainDimension]) {
-                mainSizeDef = parseSizeDef(this.spec[this.mainDimension]);
-            } else {
-                const childMainSizeDefs = this.children
-                    .filter((view) => view.isVisible())
-                    .map((view) => view.getSize()[this.mainDimension]);
-
-                mainSizeDef = {
-                    // Grows are summed to support sensible nesting of concatViews
-                    grow: childMainSizeDefs
-                        .map((sizeDef) => +sizeDef.grow)
-                        .reduce((a, b) => a + b, 0),
-                    px: getMinimumSize(childMainSizeDefs, {
-                        spacing: this.spec.spacing,
-                    }),
-                };
-            }
-
-            const secondarySizeDef = (this.spec[this.secondaryDimension] &&
-                parseSizeDef(this.spec[this.secondaryDimension])) || {
-                grow: 1,
-            };
-
-            return (
-                this.mainDimension == "height"
-                    ? new FlexDimensions(secondarySizeDef, mainSizeDef)
-                    : new FlexDimensions(mainSizeDef, secondarySizeDef)
-            ).addPadding(this.getPadding());
-        });
-    }
-
-    /**
-     * @param {import("./renderingContext/viewRenderingContext").default} context
-     * @param {import("../utils/layout/rectangle").default} coords
-     * @param {import("./view").RenderingOptions} [options]
-     */
-    render(context, coords, options = {}) {
-        if (!this.isVisible()) {
-            return;
-        }
-
-        coords = coords.shrink(this.getPadding());
-        context.pushView(this, coords);
-
-        // This method produces piles of garbage when used with sample faceting.
-        // TODO: Figure out something. Perhaps the rectangles could be cached because
-        // they are identical for each sample facet.
-
-        const visibleChildren = this.children.filter((view) =>
-            view.isVisible()
-        );
-        const childSizeDefs = visibleChildren.map(
-            (view) => view.getSize()[this.mainDimension]
-        );
-
-        const mappedCoords = mapToPixelCoords(
-            childSizeDefs,
-            coords[this.mainDimension],
-            {
-                spacing: this.spec.spacing,
-                devicePixelRatio: this.context.glHelper.dpr,
-            }
-        );
-
-        // Align the views.
-        const paddings = visibleChildren
-            .map((view) => view.getEffectivePadding())
-            .map((padding) =>
-                this.mainDimension == "height"
-                    ? [padding.left, padding.right]
-                    : [padding.top, padding.bottom]
-            );
-
-        const maxPaddings = getMaxEffectivePaddings(paddings);
-
-        for (let i = 0; i < visibleChildren.length; i++) {
-            const view = visibleChildren[i];
-            const flexCoords = mappedCoords[i];
-
-            const pa = maxPaddings[0] - paddings[i][0];
-            const pb = maxPaddings[1] - paddings[i][1];
-
-            const secondarySize = coords[this.secondaryDimension] - pa - pb;
-
-            const childCoords =
-                this.mainDimension == "height"
-                    ? new Rectangle(
-                          () => coords.x + pa,
-                          () => coords.y + flexCoords.location,
-                          () => secondarySize,
-                          () => flexCoords.size
-                      )
-                    : new Rectangle(
-                          () => coords.x + flexCoords.location,
-                          () => coords.y + pa,
-                          () => flexCoords.size,
-                          () => secondarySize
-                      );
-
-            view.render(context, childCoords, options);
-        }
-
-        context.popView(this);
-    }
-
-    /**
-     * @returns {IterableIterator<View>}
-     */
-    *[Symbol.iterator]() {
-        for (const child of this.children) {
-            yield child;
-        }
-    }
-
-    /**
-     * @param {import("./view").default} child
-     * @param {import("./view").default} replacement
-     */
-    replaceChild(child, replacement) {
-        const i = this.children.indexOf(child);
-        if (i >= 0) {
-            this.children[i] = replacement;
-        } else {
-            throw new Error("Not my child view!");
-        }
-    }
-
-    /**
-     * Adds a child using a spec. Does NOT perform any initializations.
-     * Returns the newly added view instance.
-     *
-     * @param {import("./viewUtils").ViewSpec} viewSpec
-     */
-    addChildBySpec(viewSpec) {
-        // TODO: Move to containerView
-
-        // TODO: More robust solution. Will break in future when views can be removed
-        const i = this.children.length;
-
-        const view = this.context.createView(viewSpec, this, "concat" + i);
-        this.children.push(view);
-
-        return view;
-    }
-
-    /**
-     * Adds a child. Does NOT perform any initializations.
-     * Returns the newly added view instance.
-     *
-     * @param {View} view
-     */
-    addChild(view) {
-        // TODO: Move to containerView
-
-        // TODO: More robust solution. Will break in future when views can be removed
-        const i = this.children.length;
-
-        if (!view.name) {
-            view.name = "concat" + i;
-        }
-        view.parent = this;
-        this.children.push(view);
-
-        return view;
-    }
-
-    /**
-     * @param {string} channel
-     * @param {import("./containerView").ResolutionTarget} resolutionType
-     * @returns {import("../spec/view").ResolutionBehavior}
-     */
-    getDefaultResolution(channel, resolutionType) {
-        // TODO: Default to shared when working with genomic coordinates
-        return "independent";
-    }
-}
-
-/**
- *
- * @param {number[][]} paddings
- */
-function getMaxEffectivePaddings(paddings) {
-    return [0, 1].map((i) =>
-        paddings.map((p) => p[i]).reduce((a, c) => Math.max(a, c), 0)
-    );
 }