@genome-spy/core 0.67.0 → 0.69.0

package/dist/src/view/gridView/separatorView.js

@@ -0,0 +1,275 @@
+import UnitView from "../unitView.js";
+import { markViewAsNonAddressable } from "../viewSelectors.js";
+
+/**
+ * @typedef {"horizontal" | "vertical"} SeparatorDirection
+ */
+
+const DEFAULT_SEPARATOR_PROPS = Object.freeze({
+    size: 1,
+    color: "#ccc",
+    opacity: 1,
+    strokeDash: [4, 4],
+    strokeCap: "butt",
+});
+
+/**
+ * Draws separator rules for a single direction in a grid layout.
+ */
+export default class SeparatorView {
+    /** @type {SeparatorDirection} */
+    #direction;
+
+    /** @type {boolean} */
+    #includePlotMargin;
+
+    /** @type {UnitView} */
+    #view;
+
+    /** @type {import("../../data/flowNode.js").Datum[]} */
+    #data = [];
+
+    /** @type {number[]} */
+    #positions = [];
+
+    /** @type {{ x: number[]; y: number[] }} */
+    #domains = {
+        x: [0, 0],
+        y: [0, 0],
+    };
+
+    /**
+     * @param {{
+     *   direction: SeparatorDirection,
+     *   props: import("../../spec/view.js").SeparatorProps,
+     *   context: import("../../types/viewContext.js").default,
+     *   layoutParent: import("../containerView.js").default,
+     *   dataParent: import("../view.js").default,
+     *   getName: (prefix: string) => string
+     * }} options
+     */
+    constructor({
+        direction,
+        props,
+        context,
+        layoutParent,
+        dataParent,
+        getName,
+    }) {
+        this.#direction = direction;
+        this.#includePlotMargin = props.includePlotMargin ?? true;
+        const markProps = { ...props };
+        delete markProps.includePlotMargin;
+        this.#view = this.#createView(
+            markProps,
+            context,
+            layoutParent,
+            dataParent,
+            getName
+        );
+    }
+
+    /**
+     * @returns {UnitView}
+     */
+    get view() {
+        return this.#view;
+    }
+
+    /**
+     * @param {import("../layout/flexLayout.js").LocSize[]} flexCoords
+     * @param {number} count
+     * @param {import("../layout/rectangle.js").default} coords
+     * @param {(direction: "row" | "column", index: number) => number} getViewSlot
+     * @param {boolean} wrappingFacet
+     * @param {import("../layout/padding.js").default} overhang
+     */
+    update(flexCoords, count, coords, getViewSlot, wrappingFacet, overhang) {
+        this.#collectPositions(flexCoords, count, getViewSlot, wrappingFacet);
+        this.#updateDirection(coords, overhang);
+    }
+
+    /**
+     * @param {import("../renderingContext/viewRenderingContext.js").default} context
+     * @param {import("../layout/rectangle.js").default} coords
+     * @param {import("../../types/rendering.js").RenderingOptions} options
+     */
+    render(context, coords, options) {
+        this.#view.render(context, coords, options);
+    }
+
+    /**
+     * @param {import("../layout/flexLayout.js").LocSize[]} flexCoords
+     * @param {number} count
+     * @param {(direction: "row" | "column", index: number) => number} getViewSlot
+     * @param {boolean} wrappingFacet
+     */
+    #collectPositions(flexCoords, count, getViewSlot, wrappingFacet) {
+        this.#positions.length = 0;
+
+        if (count < 2) {
+            return;
+        }
+
+        const axis = this.#direction === "vertical" ? "column" : "row";
+        const spacingOffset = wrappingFacet ? 3 : 2;
+
+        for (let index = 1; index < count; index++) {
+            const viewSlot = getViewSlot(axis, index);
+            const spacingSlot = viewSlot - spacingOffset;
+            const spacing = flexCoords[spacingSlot];
+            const location = spacing ? spacing.location : 0;
+            const size = spacing ? spacing.size : 0;
+            this.#positions.push(location + size / 2);
+        }
+    }
+
+    /**
+     * @param {import("../layout/rectangle.js").default} coords
+     * @param {import("../layout/padding.js").default} overhang
+     */
+    #updateDirection(coords, overhang) {
+        const xStart = this.#includePlotMargin ? 0 : overhang.left;
+        const xEnd = this.#includePlotMargin
+            ? coords.width
+            : coords.width - overhang.right;
+        const yStart = this.#includePlotMargin ? 0 : overhang.bottom;
+        const yEnd = this.#includePlotMargin
+            ? coords.height
+            : coords.height - overhang.top;
+
+        this.#data.length = this.#positions.length;
+
+        for (let i = 0; i < this.#positions.length; i++) {
+            const pos = this.#positions[i];
+            const entry = this.#data[i] ?? {};
+
+            if (this.#direction === "vertical") {
+                entry.x = pos;
+                entry.x2 = pos;
+                entry.y = yStart;
+                entry.y2 = yEnd;
+            } else {
+                const y = coords.height - pos;
+                entry.x = xStart;
+                entry.x2 = xEnd;
+                entry.y = y;
+                entry.y2 = y;
+            }
+
+            this.#data[i] = entry;
+        }
+
+        const dataSource =
+            /** @type {import("../../data/sources/inlineSource.js").default} */ (
+                this.#view.flowHandle?.dataSource
+            );
+
+        if (!dataSource) {
+            return;
+        }
+
+        dataSource.updateDynamicData(this.#data);
+
+        this.#domains.x[1] = coords.width;
+        this.#domains.y[1] = coords.height;
+
+        const xScale = this.#view.getScaleResolution("x")?.getScale();
+        if (xScale) {
+            xScale.domain(this.#domains.x);
+        }
+
+        const yScale = this.#view.getScaleResolution("y")?.getScale();
+        if (yScale) {
+            yScale.domain(this.#domains.y);
+        }
+    }
+
+    /**
+     * @param {Omit<import("../../spec/view.js").SeparatorProps, "includePlotMargin">} props
+     * @param {import("../../types/viewContext.js").default} context
+     * @param {import("../containerView.js").default} layoutParent
+     * @param {import("../view.js").default} dataParent
+     * @param {(prefix: string) => string} getName
+     * @returns {UnitView}
+     */
+    #createView(props, context, layoutParent, dataParent, getName) {
+        const spec = createSeparatorSpec(props);
+        const name =
+            this.#direction === "horizontal"
+                ? getName("separatorHorizontal")
+                : getName("separatorVertical");
+
+        const view = new UnitView(
+            spec,
+            context,
+            layoutParent,
+            dataParent,
+            name,
+            {
+                blockEncodingInheritance: true,
+            }
+        );
+
+        markViewAsNonAddressable(view, { skipSubtree: true });
+
+        return view;
+    }
+}
+
+/**
+ * @param {import("../../spec/view.js").SeparatorProps | boolean | undefined} separator
+ * @returns {import("../../spec/view.js").SeparatorProps | null}
+ */
+export function resolveSeparatorProps(separator) {
+    if (!separator) {
+        return null;
+    }
+
+    const props =
+        separator === true
+            ? { ...DEFAULT_SEPARATOR_PROPS }
+            : { ...DEFAULT_SEPARATOR_PROPS, ...separator };
+
+    if (props.strokeDash === DEFAULT_SEPARATOR_PROPS.strokeDash) {
+        props.strokeDash = DEFAULT_SEPARATOR_PROPS.strokeDash.slice();
+    }
+
+    return props;
+}
+
+/**
+ * @param {Omit<import("../../spec/view.js").SeparatorProps, "includePlotMargin">} props
+ * @returns {import("../../spec/view.js").UnitSpec}
+ */
+function createSeparatorSpec(props) {
+    return {
+        configurableVisibility: false,
+        domainInert: true,
+        data: { values: [] },
+        resolve: {
+            scale: { x: "excluded", y: "excluded" },
+            axis: { x: "excluded", y: "excluded" },
+        },
+        mark: {
+            ...props,
+            type: "rule",
+            clip: props.clip ?? false,
+            tooltip: null,
+        },
+        encoding: {
+            x: {
+                field: "x",
+                type: "quantitative",
+                scale: { nice: false, zero: false },
+            },
+            y: {
+                field: "y",
+                type: "quantitative",
+                scale: { nice: false, zero: false },
+            },
+            x2: { field: "x2" },
+            y2: { field: "y2" },
+        },
+    };
+}

package/dist/src/view/layerView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layerView.d.ts","sourceRoot":"","sources":["../../../src/view/layerView.js"],"names":[],"mappings":"AAKA;IAQI;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,SAAS,WACnC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,cACb,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAWzC;IAHG,0CAAgB;IAoCpB;;;;;;OAMG;IACH,wBAJW,OAAO,iBAAiB,EAAE,SAAS,GAAG,OAAO,iBAAiB,EAAE,QAAQ,GAAG,OAAO,iBAAiB,EAAE,UAAU,UAC/G,MAAM,GACJ,OAAO,CAAC,SAAS,GAAG,OAAO,eAAe,EAAE,OAAO,CAAC,CAMhE;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAIhB;IA6CD,gEAEC;;CA6CJ;0BA/KyB,oBAAoB"}
+{"version":3,"file":"layerView.d.ts","sourceRoot":"","sources":["../../../src/view/layerView.js"],"names":[],"mappings":"AAMA;IAQI;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,SAAS,WACnC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,cACb,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAWzC;IAHG,0CAAgB;IAqCpB;;;;;;OAMG;IACH,wBAJW,OAAO,iBAAiB,EAAE,SAAS,GAAG,OAAO,iBAAiB,EAAE,QAAQ,GAAG,OAAO,iBAAiB,EAAE,UAAU,UAC/G,MAAM,GACJ,OAAO,CAAC,SAAS,GAAG,OAAO,eAAe,EAAE,OAAO,CAAC,CAMhE;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAIhB;IA6CD,gEAEC;;CA6CJ;0BAjLyB,oBAAoB"}

package/dist/src/view/layerView.js

@@ -2,6 +2,7 @@ import { isLayerSpec, isUnitSpec } from "./viewFactory.js";
 import ContainerView from "./containerView.js";
 import ViewError from "./viewError.js";
 import ContainerMutationHelper from "./containerMutationHelper.js";
+import { isMultiscaleSpec } from "./multiscale.js";
 
 export default class LayerView extends ContainerView {
     /**
@@ -37,20 +38,21 @@ export default class LayerView extends ContainerView {
     async initializeChildren() {
         this.#children = await Promise.all(
             this.spec.layer.map(
-                (childSpec, i) =>
+                (childSpec) =>
                     /** @type {(Promise<LayerView | import("./unitView.js").default>)} */ (
                         this.context.createOrImportView(
                             childSpec,
                             this,
                             this,
-                            "grid" + i,
+                            this.getNextAutoName("layer"),
                             (importedSpec) => {
                                 if (
                                     !isLayerSpec(importedSpec) &&
-                                    !isUnitSpec(importedSpec)
+                                    !isUnitSpec(importedSpec) &&
+                                    !isMultiscaleSpec(importedSpec)
                                 ) {
                                     throw new ViewError(
-                                        "LayerView accepts only unit or layer specs as children!",
+                                        "LayerView accepts only unit, layer, or multiscale specs as children!",
                                         this
                                     );
                                     // TODO: Add view to exception
@@ -123,7 +125,7 @@ export default class LayerView extends ContainerView {
                 view.disposeSubtree();
                 this.#children.splice(index, 1);
             },
-            defaultName: (index) => "layer" + index,
+            defaultName: () => this.getNextAutoName("layer"),
         });
     }
 

package/dist/src/view/layout/flexLayout.d.ts

@@ -70,36 +70,6 @@ export function isSizeDef(spec: any): spec is SizeDef;
  * @returns {SizeDef}
  */
 export function parseSizeDef(size: "container" | number | SizeDef | import("../../spec/view.js").Step): SizeDef;
-/**
- * Interpolates between two LocSizes
- *
- * @param {LocSize} from
- * @param {LocSize} to
- * @param {function():number} ratio
- * @returns {LocSize}
- */
-export function interpolateLocSizes(from: LocSize, to: LocSize, ratio: () => number): LocSize;
-/**
- * Wraps a LocSize and allows scrolling.
- *
- * @param {LocSize} locSize
- * @param {number | function():number} offset
- * @returns {LocSize}
- */
-export function translateLocSize(locSize: LocSize, offset: number | (() => number)): LocSize;
-/**
- * Wraps a LocSize and allows scaling.
- *
- * @param {LocSize} locSize
- * @param {number | function():number} factor
- * @returns {LocSize}
- */
-export function scaleLocSize(locSize: LocSize, factor: number | (() => number)): LocSize;
-/**
- * @param {LocSize} locSize
- * @param {number} value
- */
-export function locSizeEncloses(locSize: LocSize, value: number): boolean;
 export class FlexDimensions {
     /**
      *

package/dist/src/view/layout/flexLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flexLayout.d.ts","sourceRoot":"","sources":["../../../../src/view/layout/flexLayout.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wCALW,OAAO,EAAE,iBACT,MAAM,mDACN,WAAW,GACT,OAAO,EAAE,CAqGrB;AAED;;;;;GAKG;AACH,sCAHW,QAAQ,CAAC,OAAO,CAAC,gBACjB,WAAW,UAQrB;AAED;;;GAGG;AACH,sCAHW,QAAQ,CAAC,OAAO,CAAC,GACf,OAAO,CAWnB;AAED;;;GAGG;AACH,oCAFW,OAAO,EAAE,WAInB;AAED;;;GAGG;AACH,sCAFW,OAAO,EAAE;;;EASnB;AA4ED;;;;GAIG;AACH,uCAFW,OAAO,WAIjB;AAWD;;;;GAIG;AACH,gCAHW,GAAC,GACC,IAAI,IAAI,OAAO,CAI3B;AAED;;;;GAIG;AACH,mCAHW,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,oBAAoB,EAAE,IAAI,GAChE,OAAO,CAiBnB;AAID;;;;;;;GAOG;AACH,0CALW,OAAO,MACP,OAAO,SACP,MAAW,MAAM,GACf,OAAO,CA4BnB;AAED;;;;;;GAMG;AACH,0CAJW,OAAO,UACP,MAAM,IAAG,MAAW,MAAM,CAAA,GACxB,OAAO,CAanB;AAED;;;;;;GAMG;AACH,sCAJW,OAAO,UACP,MAAM,IAAG,MAAW,MAAM,CAAA,GACxB,OAAO,CAanB;AAED;;;GAGG;AACH,yCAHW,OAAO,SACP,MAAM,WAIhB;AA/MD;IACI;;;;OAIG;IACH,mBAHW,OAAO,UACP,OAAO,EAQjB;IAJG,gBAAgB;IAChB,wBAAkB;IAClB,gBAAgB;IAChB,yBAAoB;IAGxB;;;;OAIG;IACH,oBAFW,OAAO,cAAc,EAAE,OAAO,kBAIxC;IAED;;;;OAIG;IACH,yBAFW,OAAO,cAAc,EAAE,OAAO,kBAIxC;IAmBD;;;;OAIG;IACH,aAFa,OAAO,CAInB;;CACJ;AAED;;;;GAIG;AACH,2BAFU,OAAO,CAKd;AAEH,iDAGE;;;;;;;;SAlPQ,MAAM;;;;WACN,MAAM;;;;;;cAGN,MAAM;UACN,MAAM;;;;;;;;;;;;;;cAGN,MAAM;;;;;uBACN,MAAM;;;;aAEN,MAAM;;;;cACN,OAAO"}
+{"version":3,"file":"flexLayout.d.ts","sourceRoot":"","sources":["../../../../src/view/layout/flexLayout.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wCALW,OAAO,EAAE,iBACT,MAAM,mDACN,WAAW,GACT,OAAO,EAAE,CAqGrB;AAED;;;;;GAKG;AACH,sCAHW,QAAQ,CAAC,OAAO,CAAC,gBACjB,WAAW,UAQrB;AAED;;;GAGG;AACH,sCAHW,QAAQ,CAAC,OAAO,CAAC,GACf,OAAO,CAWnB;AAED;;;GAGG;AACH,oCAFW,OAAO,EAAE,WAInB;AAED;;;GAGG;AACH,sCAFW,OAAO,EAAE;;;EASnB;AA4ED;;;;GAIG;AACH,uCAFW,OAAO,WAIjB;AAWD;;;;GAIG;AACH,gCAHW,GAAC,GACC,IAAI,IAAI,OAAO,CAI3B;AAED;;;;GAIG;AACH,mCAHW,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,oBAAoB,EAAE,IAAI,GAChE,OAAO,CAiBnB;AAzHD;IACI;;;;OAIG;IACH,mBAHW,OAAO,UACP,OAAO,EAQjB;IAJG,gBAAgB;IAChB,wBAAkB;IAClB,gBAAgB;IAChB,yBAAoB;IAGxB;;;;OAIG;IACH,oBAFW,OAAO,cAAc,EAAE,OAAO,kBAIxC;IAED;;;;OAIG;IACH,yBAFW,OAAO,cAAc,EAAE,OAAO,kBAIxC;IAmBD;;;;OAIG;IACH,aAFa,OAAO,CAInB;;CACJ;AAED;;;;GAIG;AACH,2BAFU,OAAO,CAKd;AAEH,iDAGE;;;;;;;;SAlPQ,MAAM;;;;WACN,MAAM;;;;;;cAGN,MAAM;UACN,MAAM;;;;;;;;;;;;;;cAGN,MAAM;;;;;uBACN,MAAM;;;;aAEN,MAAM;;;;cACN,OAAO"}

package/dist/src/view/layout/flexLayout.js

@@ -302,89 +302,3 @@ export function parseSizeDef(size) {
 
     throw new Error(`Invalid sizeDef: ${size}`);
 }
-
-// TODO: Find a better place for the following utilities: ////////////////////////////////////
-
-/**
- * Interpolates between two LocSizes
- *
- * @param {LocSize} from
- * @param {LocSize} to
- * @param {function():number} ratio
- * @returns {LocSize}
- */
-export function interpolateLocSizes(from, to, ratio) {
-    return {
-        get location() {
-            const r = ratio();
-            switch (r) {
-                case 0:
-                    return from.location;
-                case 1:
-                    return to.location;
-                default:
-                    return r * to.location + (1 - r) * from.location;
-            }
-        },
-
-        get size() {
-            const r = ratio();
-            switch (r) {
-                case 0:
-                    return from.size;
-                case 1:
-                    return to.size;
-                default:
-                    return r * to.size + (1 - r) * from.size;
-            }
-        },
-    };
-}
-
-/**
- * Wraps a LocSize and allows scrolling.
- *
- * @param {LocSize} locSize
- * @param {number | function():number} offset
- * @returns {LocSize}
- */
-export function translateLocSize(locSize, offset) {
-    const fn = isNumber(offset) ? () => offset : offset;
-    return {
-        get location() {
-            return locSize.location + fn();
-        },
-
-        get size() {
-            return locSize.size;
-        },
-    };
-}
-
-/**
- * Wraps a LocSize and allows scaling.
- *
- * @param {LocSize} locSize
- * @param {number | function():number} factor
- * @returns {LocSize}
- */
-export function scaleLocSize(locSize, factor) {
-    const fn = isNumber(factor) ? () => factor : factor;
-    return {
-        get location() {
-            return locSize.location * fn();
-        },
-
-        get size() {
-            return locSize.size * fn();
-        },
-    };
-}
-
-/**
- * @param {LocSize} locSize
- * @param {number} value
- */
-export function locSizeEncloses(locSize, value) {
-    return value >= locSize.location && value < locSize.location + locSize.size;
-}

package/dist/src/view/multiscale.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @typedef {"unitsPerPixel"} MultiscaleMetric
+ * @typedef {"x" | "y" | "auto"} MultiscaleChannel
+ * @typedef {number | import("../spec/parameter.js").ExprRef} StopValue
+ *
+ * @typedef {{
+ *     metric: MultiscaleMetric;
+ *     values: StopValue[];
+ *     channel: MultiscaleChannel;
+ *     fade: number;
+ * }} ParsedStops
+ */
+/**
+ * @param {object} spec
+ * @returns {spec is import("../spec/view.js").MultiscaleSpec}
+ */
+export function isMultiscaleSpec(spec: object): spec is import("../spec/view.js").MultiscaleSpec;
+/**
+ * Converts a multiscale spec into a regular layer spec by wrapping each stage
+ * into a generated opacity layer.
+ *
+ * @param {import("../spec/view.js").MultiscaleSpec} spec
+ * @returns {import("../spec/view.js").LayerSpec}
+ */
+export function normalizeMultiscaleSpec(spec: import("../spec/view.js").MultiscaleSpec): import("../spec/view.js").LayerSpec;
+export type MultiscaleMetric = "unitsPerPixel";
+export type MultiscaleChannel = "x" | "y" | "auto";
+export type StopValue = number | import("../spec/parameter.js").ExprRef;
+export type ParsedStops = {
+    metric: MultiscaleMetric;
+    values: StopValue[];
+    channel: MultiscaleChannel;
+    fade: number;
+};
+//# sourceMappingURL=multiscale.d.ts.map

package/dist/src/view/multiscale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multiscale.d.ts","sourceRoot":"","sources":["../../../src/view/multiscale.js"],"names":[],"mappings":"AAKA;;;;;;;;;;;GAWG;AAEH;;;GAGG;AACH,uCAHW,MAAM,GACJ,IAAI,IAAI,OAAO,iBAAiB,EAAE,cAAc,CAI5D;AAED;;;;;;GAMG;AACH,8CAHW,OAAO,iBAAiB,EAAE,cAAc,GACtC,OAAO,iBAAiB,EAAE,SAAS,CA6B/C;+BAtDY,eAAe;gCACf,GAAG,GAAG,GAAG,GAAG,MAAM;wBAClB,MAAM,GAAG,OAAO,sBAAsB,EAAE,OAAO;0BAE/C;IACN,MAAM,EAAE,gBAAgB,CAAC;IACzB,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE,MAAM,CAAC;CAChB"}