@genome-spy/core 0.19.1 → 0.22.0

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() {
@@ -427,7 +429,6 @@ function createAxis(axisProps) {
             size: ap.labelFontSize,
             color: ap.labelColor,
             minBufferSize: 1500, // to prevent GPU buffer reallocation when zooming
-            dynamicData: true,
         },
         encoding: {
             [main]: { field: "value", type: "quantitative" },
@@ -448,7 +449,6 @@ function createAxis(axisProps) {
             color: ap.tickColor,
             size: ap.tickWidth,
             minBufferSize: 300,
-            dynamicData: true,
         },
         encoding: {
             [secondary]: { value: anchor },
@@ -574,7 +574,6 @@ export function createGenomeAxis(axisProps) {
                 anchor - (ap.chromTickSize / ap.extent) * (anchor ? 1 : -1),
             color: axisProps.chromTickColor,
             size: ap.chromTickWidth,
-            dynamicData: true,
         },
     });
 
@@ -647,7 +646,6 @@ export function createGenomeAxis(axisProps) {
                 align: axisProps.chromLabelAlign,
                 baseline: "alphabetic",
                 clip: false,
-                dynamicData: true,
                 ...chromLabelMarkProps,
             },
             encoding: {

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

package/src/view/containerView.js

@@ -108,6 +108,24 @@ export default class ContainerView extends View {
         }
     }
 
+    /**
+     *
+     * @param {string} name
+     */
+    findDescendantByName(name) {
+        /** @type {View} */
+        let view;
+
+        this.visit((v) => {
+            if (v.name == name) {
+                view = v;
+                return VISIT_STOP;
+            }
+        });
+
+        return view;
+    }
+
     /**
      * @param {import("../spec/channel").Channel | "default"} channel
      * @param {ResolutionTarget} resolutionType