@genome-spy/core 0.30.0 → 0.30.2

package/src/view/concatView.js

@@ -1,45 +0,0 @@
-import { isConcatSpec, isVConcatSpec } from "./viewFactory";
-import GridView from "./gridView";
-
-/**
- * Creates a vertically or horizontally concatenated layout for children.
- */
-export default class ConcatView extends GridView {
-    /**
-     *
-     * @param {import("./viewUtils").AnyConcatSpec} spec
-     * @param {import("./viewUtils").ViewContext} context
-     * @param {import("./containerView").default} parent
-     * @param {string} name
-     */
-    constructor(spec, context, parent, name) {
-        super(
-            spec,
-            context,
-            parent,
-            name,
-            isConcatSpec(spec)
-                ? spec.columns
-                : isVConcatSpec(spec)
-                ? 1
-                : Infinity
-        );
-
-        this.spec = spec;
-    }
-
-    _createChildren() {
-        const spec = this.spec;
-        const childSpecs = isConcatSpec(spec)
-            ? spec.concat
-            : isVConcatSpec(spec)
-            ? spec.vconcat
-            : spec.hconcat;
-
-        this.setChildren(
-            childSpecs.map((childSpec, i) =>
-                this.context.createView(childSpec, this, "grid" + i)
-            )
-        );
-    }
-}

package/src/view/containerView.js

@@ -1,159 +0,0 @@
-import View, { VISIT_STOP, VISIT_SKIP } from "./view";
-
-/**
- * Compositor view represents a non-leaf node in the view hierarchy.
- * @typedef {import("../spec/view").ResolutionTarget} ResolutionTarget
- */
-export default class ContainerView extends View {
-    /**
-     *
-     * @param {import("./viewUtils").ContainerSpec} spec
-     * @param {import("./view").ViewContext} context
-     * @param {ContainerView} parent
-     * @param {string} name
-     */
-    constructor(spec, context, parent, name) {
-        super(spec, context, parent, name);
-
-        this.spec = spec;
-    }
-
-    /**
-     * @returns {IterableIterator<View>}
-     */
-    *[Symbol.iterator]() {
-        // override
-    }
-
-    /**
-     * Replaces a child view with another one. Does not alter the old or new child.
-     *
-     * @param {import("./view").default} child
-     * @param {import("./view").default} replacement
-     */
-    replaceChild(child, replacement) {
-        throw new Error("Not implemented");
-    }
-
-    /**
-     * Visits child views in depth-first pre-order. Terminates the search and returns
-     * the value if the visitor returns a defined value. The `afterChildren` callback
-     * allows for post-order traversal
-     *
-     * @param {import("./view").Visitor} visitor
-     * @returns {import("./view").VisitResult}
-     */
-    visit(visitor) {
-        /** @type  {import("./view").VisitResult}*/
-        let result;
-        try {
-            result = visitor(this);
-        } catch (e) {
-            // Augment the exception with the view
-            e.view = this;
-            throw e;
-        }
-
-        if (result === VISIT_STOP) {
-            return result;
-        }
-
-        if (result !== VISIT_SKIP) {
-            if (visitor.beforeChildren) {
-                visitor.beforeChildren(this);
-            }
-
-            for (const view of this) {
-                const result = view.visit(visitor);
-                if (result === VISIT_STOP) {
-                    return result;
-                }
-            }
-
-            if (visitor.afterChildren) {
-                visitor.afterChildren(this);
-            }
-
-            if (visitor.postOrder) {
-                visitor.postOrder(this);
-            }
-        }
-    }
-
-    /**
-     * @param {string[]} path An array of view names
-     * @returns {View}
-     */
-    findDescendantByPath(path) {
-        for (const child of this) {
-            if (child.name === path[0]) {
-                if (path.length == 1) {
-                    return child;
-                } else if (child instanceof ContainerView) {
-                    return child.findDescendantByPath(path.slice(1));
-                }
-            }
-        }
-    }
-
-    /**
-     *
-     * @param {string} name
-     */
-    findChildByName(name) {
-        for (const child of this) {
-            if (child.name === name) {
-                return child;
-            }
-        }
-    }
-
-    /**
-     *
-     * @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
-     * @returns {import("../spec/view").ResolutionBehavior}
-     */
-    getConfiguredResolution(channel, resolutionType) {
-        return this.spec.resolve?.[resolutionType]?.[channel];
-    }
-
-    /**
-     * @param {import("../spec/channel").Channel} channel
-     * @param {ResolutionTarget} resolutionType
-     * @returns {import("../spec/view").ResolutionBehavior}
-     */
-    getDefaultResolution(channel, resolutionType) {
-        return "shared";
-    }
-
-    /**
-     * @param {import("../spec/channel").Channel} channel
-     * @param {ResolutionTarget} resolutionType
-     * @returns {import("../spec/view").ResolutionBehavior}
-     */
-    getConfiguredOrDefaultResolution(channel, resolutionType) {
-        return (
-            this.getConfiguredResolution(channel, resolutionType) ??
-            this.getConfiguredResolution("default", resolutionType) ??
-            this.getDefaultResolution(channel, resolutionType)
-        );
-    }
-}

package/src/view/facetView.js

@@ -1,491 +0,0 @@
-// @ts-nocheck
-// TODO: Enable when this is taken to use again
-
-import { isFacetFieldDef, isFacetMapping } from "./viewUtils";
-import ContainerView from "./containerView";
-import UnitView from "./unitView";
-import { cross } from "d3-array";
-import { mapToPixelCoords } from "../utils/layout/flexLayout";
-import { OrdinalDomain } from "../utils/domainArray";
-import Rectangle from "../utils/layout/rectangle";
-import coalesce from "../utils/coalesce";
-import { field as vegaField } from "vega-util";
-import DecoratorView from "./decoratorView";
-import Padding from "../utils/layout/padding";
-
-const DEFAULT_SPACING = 20;
-
-/**
- * @typedef {"column" | "row"} FacetChannel
- * @type {FacetChannel[]}
- */
-const FACET_CHANNELS = ["column", "row"];
-
-/**
- * @type {Record<FacetChannel, FacetChannel>}
- */
-// eslint-disable-next-line no-unused-vars
-const PERPENDICULAR_FACET_CHANNELS = {
-    column: "row",
-    row: "column",
-};
-
-// https://vega.github.io/vega-lite/docs/header.html#labels
-// TODO: Configurable
-const headerConfig = {
-    labelFontSize: 12,
-    labelColor: "black",
-};
-
-/** @type {Record<FacetChannel, any>} */
-const headerConfigs = {
-    column: {
-        ...headerConfig,
-        labelAngle: 0,
-    },
-    row: {
-        ...headerConfig,
-        labelAngle: -90,
-    },
-};
-
-/**
- * Implements (a subset of) the Vega-Lite's Facet-operator:
- * https://vega.github.io/vega-lite/docs/facet.html
- *
- * TODO:
- *  - Facet channel titles
- *  - Suppress redundant axes
- *  - Make this thing configurable
- *
- * @typedef {import("./view").default} View
- * @typedef {import("./layerView").default} LayerView
- * @typedef {import("./viewUtils").FacetFieldDef} FacetFieldDef
- * @typedef {import("./viewUtils").FacetMapping} FacetMapping
- * @typedef {import("../utils/layout/flexLayout").LocSize} LocSize
- * @typedef {import("../utils/layout/flexLayout").SizeDef} SizeDef
- *
- * @typedef {object} FacetDimension Stuff for working with facet dimensions
- * @prop {function} accessor
- * @prop {boolean[] | string[] | number[]} factors
- * @prop {FacetFieldDef} facetFieldDef
- *
- */
-export default class FacetView extends ContainerView {
-    /**
-     *
-     * @param {import("./viewUtils").FacetSpec} spec
-     * @param {import("./viewUtils").ViewContext} context
-     * @param {ContainerView} parent
-     * @param {string} name
-     */
-    constructor(spec, context, parent, name) {
-        super(spec, context, parent, name);
-
-        this.spec = spec;
-
-        this.child = /** @type { UnitView | LayerView | DecoratorView } */ (
-            context.createView(spec.spec, this, `facet`)
-        );
-
-        /**
-         * Faceted views for displaying the facet labels
-         *
-         * @type {Record<FacetChannel, UnitView>}
-         */
-        this._labelViews = Object.fromEntries(
-            FACET_CHANNELS.map((channel) => [
-                channel,
-                new UnitView(
-                    createLabelViewSpec(headerConfigs[channel]),
-                    this.context,
-                    this,
-                    `facetLabel-${channel}`
-                ),
-            ])
-        );
-
-        /**  @type {Record<FacetChannel, FacetDimension>} */
-        this._facetDimensions = { column: undefined, row: undefined };
-    }
-
-    /**
-     * @returns {IterableIterator<View>}
-     */
-    *[Symbol.iterator]() {
-        yield this.child;
-        for (const view of Object.values(this._labelViews)) {
-            yield view;
-        }
-    }
-
-    /**
-     * @param {import("./view").default} child
-     * @param {import("./view").default} replacement
-     */
-    replaceChild(child, replacement) {
-        if (child !== this.child) {
-            throw new Error("Not my child!");
-        }
-
-        this.child = /** @type {UnitView | LayerView | DecoratorView} */ (
-            replacement
-        );
-    }
-
-    transformData() {
-        super.transformData();
-        // A hacky solution for updating facets. TODO: Something more robust.
-        this.updateFacets();
-    }
-
-    /**
-     *
-     * @param {"row" | "column"} channel
-     */
-    getAccessor(channel) {
-        /** @type {import("./viewUtils").FacetMapping} */
-        let facetMapping;
-        if (isFacetMapping(this.spec.facet)) {
-            facetMapping = this.spec.facet; // Mark provides encodings with defaults and possible modifications
-        } else if (isFacetFieldDef(this.spec.facet)) {
-            // TODO: Check "columns"
-            facetMapping = {
-                column: this.spec.facet,
-            };
-        } else {
-            throw new Error(
-                "Invalid facet specification: " +
-                    JSON.stringify(this.spec.facet)
-            );
-        }
-
-        if (facetMapping[channel]) {
-            return this.context.accessorFactory.createAccessor(
-                facetMapping[channel]
-            );
-        }
-    }
-
-    updateFacets() {
-        /** @type {import("./viewUtils").FacetMapping} */
-        let facetMapping;
-        if (isFacetMapping(this.spec.facet)) {
-            facetMapping = this.spec.facet; // Mark provides encodings with defaults and possible modifications
-        } else if (isFacetFieldDef(this.spec.facet)) {
-            // TODO: Check "columns"
-            facetMapping = {
-                column: this.spec.facet,
-            };
-        } else {
-            throw new Error(
-                "Invalid facet specification: " +
-                    JSON.stringify(this.spec.facet)
-            );
-        }
-
-        for (const channel of FACET_CHANNELS) {
-            const facetFieldDef = facetMapping[channel];
-            if (!facetFieldDef) {
-                continue;
-            }
-
-            const accessor = this.context.accessorFactory.createAccessor(
-                facetMapping[channel]
-            );
-
-            const factors = new OrdinalDomain().extendAllWithAccessor(
-                this.getData(),
-                accessor
-            );
-
-            // TODO: Configurable sorting
-            factors.sort();
-
-            this._facetDimensions[channel] = {
-                accessor,
-                factors,
-                facetFieldDef,
-            };
-        }
-    }
-
-    updateLabels() {
-        for (const channel of FACET_CHANNELS) {
-            const facetDimension = this._facetDimensions[channel];
-            this._labelViews[channel].updateData(
-                facetDimension
-                    ? facetDimension.factors.map((d) => ({ data: d }))
-                    : []
-            );
-        }
-    }
-
-    /**
-     * Returns an accessor that returns a (composite) key for partitioning the data
-     *
-     * @param {View} [whoIsAsking] Passed to the immediate parent. Allows for
-     *      selectively breaking the inheritance.
-     * @return {function(object):any}
-     */
-    getFacetAccessor(whoIsAsking) {
-        const { column, row } = this._facetDimensions;
-
-        if (Object.values(this._labelViews).includes(whoIsAsking)) {
-            // Label views are faceted by the facet labels
-            return vegaField("data");
-        } else if (column && row) {
-            const columnField = vegaField(column.facetFieldDef.field);
-            const rowField = vegaField(row.facetFieldDef.field);
-            return /** @param {object} d */ (d) =>
-                columnField(d) + "," + rowField(d);
-        } else if (column) {
-            return vegaField(column.facetFieldDef.field);
-        } else if (row) {
-            return vegaField(row.facetFieldDef.field);
-        } else {
-            throw new Error("updateFacets() must be called first!");
-        }
-    }
-
-    getFacetGroups() {
-        const { column, row } = this._facetDimensions;
-
-        if (column && row) {
-            return cross(
-                column.factors,
-                row.factors,
-                (col, row) => col + "," + row
-            );
-        } else if (column) {
-            return column.factors;
-        } else if (row) {
-            return row.factors;
-        } else {
-            throw new Error("updateFacets() must be called first!");
-        }
-    }
-
-    getSize() {
-        // TODO: IMPLEMENT!
-        return super.getSize();
-    }
-
-    /**
-     * @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);
-
-        // Size of the view that is being repeated for all the facets
-        const childSize = this.child.getSize();
-
-        // Fugly hack. TODO: Figure out a systematic phase for doing this
-        if (!this._labelsUpdated) {
-            this.updateLabels();
-            this._labelsUpdated = true;
-        }
-
-        // TODO: Validate. Columns is not compatible with row channel
-        const wrap = this.spec.columns && this._facetDimensions.column;
-
-        // We use two flexLayouts to create a grid for the facets.
-        // Stride and offset control how the cells in the grid are allocated
-        // for the facets and the intervening facet labels.
-        const xStride = 1;
-        const xOffset = wrap ? 0 : this._facetDimensions.row ? 1 : 0;
-        const yStride = wrap ? 2 : 1;
-        const yOffset = this._facetDimensions.column ? 1 : 0;
-
-        /**
-         * @param {SizeDef} childSize
-         * @param {number} count
-         * @param {number} stride
-         * @param {number} offset
-         */
-        const calculateCellSizes = (childSize, count, stride, offset) => {
-            // TODO: take the channel into account
-            const labelSize = { px: headerConfig.labelFontSize };
-
-            /** @type {SizeDef[]} */
-            const cellSizes = [];
-
-            for (let i = 0; i < offset; i++) {
-                cellSizes.push(labelSize);
-            }
-
-            for (let i = 0; i < count; i++) {
-                for (let j = 1; j < stride; j++) {
-                    cellSizes.push(labelSize);
-                }
-                cellSizes.push(childSize);
-            }
-
-            return cellSizes;
-        };
-
-        /**
-         *
-         * @param {FacetChannel} channel
-         * @param {number} count Number of factors
-         */
-        const computeFlexCoords = (channel, count) => {
-            const dimension = this._facetDimensions[channel];
-
-            const spacing = coalesce(
-                dimension ? dimension.facetFieldDef.spacing : undefined,
-                this.spec.spacing,
-                DEFAULT_SPACING
-            );
-
-            const cellSizes =
-                channel == "column"
-                    ? calculateCellSizes(
-                          childSize.width,
-                          count,
-                          xStride,
-                          xOffset
-                      )
-                    : calculateCellSizes(
-                          childSize.height,
-                          count,
-                          yStride,
-                          wrap ? 0 : yOffset
-                      );
-
-            return mapToPixelCoords(
-                cellSizes,
-                coords[channel == "column" ? "width" : "height"],
-                {
-                    spacing,
-                    devicePixelRatio: window.devicePixelRatio,
-                }
-            );
-        };
-
-        let nCols = 0;
-        let nRows = 0;
-        let n = 0;
-
-        if (wrap) {
-            // Wrapping layout
-            n = this._facetDimensions.column.factors.length;
-            nCols = this.spec.columns;
-            nRows = Math.ceil(n / nCols);
-        } else {
-            /** @param {FacetDimension} facetDimension */
-            const getCount = (facetDimension) =>
-                facetDimension ? facetDimension.factors.length : 1;
-
-            nCols = getCount(this._facetDimensions.column);
-            nRows = getCount(this._facetDimensions.row);
-            n = nCols * nRows;
-        }
-
-        const columnFlexCoords = computeFlexCoords("column", nCols);
-        const rowFlexCoords = computeFlexCoords("row", nRows);
-
-        const axisSizes =
-            this.child instanceof DecoratorView
-                ? this.child.getAxisSizes()
-                : Padding.createUniformPadding(0);
-
-        const facetIds = this.getFacetGroups();
-
-        // Render column labels
-        if (this._facetDimensions.column) {
-            const factors = this._facetDimensions.column.factors;
-            for (let x = 0; x < factors.length; x++) {
-                // Take wrapping labels into account
-                const xCell = columnFlexCoords[(x % nCols) * xStride + xOffset];
-                const yCell = rowFlexCoords[Math.floor(x / nCols) * yStride];
-                this._labelViews.column.render(
-                    context,
-                    Rectangle.create(
-                        xCell.location + axisSizes.left,
-                        yCell.location,
-                        xCell.size - axisSizes.width,
-                        yCell.size
-                    ).translateBy(coords),
-                    { ...options, facetId: factors[x] }
-                );
-            }
-        }
-
-        // Render row labels
-        if (this._facetDimensions.row) {
-            const factors = this._facetDimensions.row.factors;
-            for (let y = 0; y < factors.length; y++) {
-                const xCell = columnFlexCoords[0];
-                const yCell = rowFlexCoords[y * yStride + yOffset];
-                this._labelViews.row.render(
-                    context,
-                    Rectangle.create(
-                        xCell.location,
-                        yCell.location + axisSizes.top,
-                        xCell.size,
-                        yCell.size - axisSizes.height
-                    ).translateBy(coords),
-                    { ...options, facetId: factors[y] }
-                );
-            }
-        }
-
-        // Render facets
-        let i = 0;
-        for (let x = 0; x < nCols; x++) {
-            for (let y = 0; y < nRows; y++) {
-                if (i >= n) break;
-
-                const xCell = columnFlexCoords[x * xStride + xOffset];
-                const yCell = rowFlexCoords[y * yStride + yOffset];
-                this.child.render(
-                    context,
-                    new Rectangle(
-                        xCell.location,
-                        yCell.location,
-                        xCell.size,
-                        yCell.size
-                    ).translateBy(coords),
-                    { ...options, facetId: facetIds[i] }
-                );
-                i++;
-            }
-        }
-
-        context.popView(this);
-    }
-}
-
-/**
- *
- */
-function createLabelViewSpec(headerConfig) {
-    // TODO: Support styling: https://vega.github.io/vega-lite/docs/header.html#labels
-
-    /** @type {import("./viewUtils").UnitSpec} */
-    const titleView = {
-        data: {
-            values: [],
-        },
-        mark: {
-            type: "text",
-            clip: false,
-            angle: headerConfig.labelAngle,
-        },
-        encoding: {
-            text: { field: "data", type: "nominal" },
-            size: { value: headerConfig.labelFontSize },
-            color: { value: headerConfig.labelColor },
-        },
-    };
-
-    return titleView;
-}