@genome-spy/core 0.77.0 → 0.79.0

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

@@ -9,14 +9,18 @@ import {
 } from "../../selection/selection.js";
 import { createPrimitiveEventProxy } from "../../utils/interactionEvent.js";
 import AxisGridView from "../axisGridView.js";
-import AxisView, { CHANNEL_ORIENTS } from "../axisView.js";
+import AxisView, {
+    CHANNEL_ORIENTS,
+    getExternalAxisOverhang,
+} from "../axisView.js";
 import LayerView from "../layerView.js";
 import Padding from "../layout/padding.js";
 import Point from "../layout/point.js";
 import Rectangle from "../layout/rectangle.js";
-import createTitle, { resolveTitleSpec } from "../title.js";
+import TitleView from "../titleView.js";
 import UnitView from "../unitView.js";
 import {
+    isChromeView,
     markViewAsChrome,
     markViewAsNonAddressable,
 } from "../viewSelectors.js";
@@ -27,6 +31,42 @@ import { zoomDomainByScaleType } from "../../scales/zoomDomainUtils.js";
 import { createEventFilterFunction } from "../../utils/expression.js";
 import { getConfiguredViewBackground } from "../../config/viewConfig.js";
 import { getConfiguredAxisDefaults } from "../../config/axisConfig.js";
+import {
+    addLegendView,
+    createGridChildLegend,
+    disposeLegendViews,
+    getLegendOverhang,
+    getOrderedLegendEntries,
+    iterateLegendViews,
+} from "./gridChildLegends.js";
+
+/**
+ * @typedef {{
+ *     axisView: AxisView,
+ *     channel: import("../../spec/channel.js").PrimaryPositionalChannel,
+ *     orient: import("../../spec/axis.js").AxisOrient,
+ *     resolution: import("../../scales/axisResolution.js").default,
+ * }} AxisCandidate
+ */
+
+/**
+ * @param {import("../view.js").default} view
+ * @returns {import("../view.js").default[]}
+ */
+function getLegendOwners(view) {
+    if (isChromeView(view) || view.getLayoutAncestors().some(isChromeView)) {
+        return [];
+    } else if (view instanceof UnitView) {
+        return Object.keys(view.resolutions.legend).length > 0 ? [view] : [];
+    } else if (view instanceof LayerView) {
+        return [
+            ...(Object.keys(view.resolutions.legend).length > 0 ? [view] : []),
+            ...Array.from(view).flatMap((child) => getLegendOwners(child)),
+        ];
+    } else {
+        return [];
+    }
+}
 
 export default class GridChild {
     /**
@@ -56,16 +96,22 @@ export default class GridChild {
         /** @type {Partial<Record<import("../../spec/axis.js").AxisOrient, AxisView>>} axes */
         this.axes = {};
 
+        /** @type {AxisCandidate[]} */
+        this.axisCandidates = [];
+
         /** @type {Partial<Record<import("../../spec/axis.js").AxisOrient, AxisGridView>>} gridLines */
         this.gridLines = {};
 
+        /** @type {import("./gridChildLegends.js").GridChildLegends} */
+        this.legends = {};
+
         /** @type {Partial<Record<import("./scrollbar.js").ScrollDirection, Scrollbar>>} */
         this.scrollbars = {};
 
         /** @type {SelectionRect} */
         this.selectionRect = undefined;
 
-        /** @type {UnitView} */
+        /** @type {TitleView} */
         this.title = undefined;
 
         /** @type {number} */
@@ -74,17 +120,21 @@ export default class GridChild {
         /** @type {number | undefined} */
         this.backgroundStrokeZindex = undefined;
 
-        /** @type {number} */
-        this.titleZindex = 1;
-
         /** @type {Rectangle} */
         this.coords = Rectangle.ZERO;
 
-        if (view.needsAxes.x || view.needsAxes.y) {
-            const spec = view.spec;
+        const needsAxes = view.needsAxes.x || view.needsAxes.y;
+        const parentChromePolicy = view.getParentGridChromePolicy();
+        const spec = view.spec;
+        const explicitViewBackground = "view" in spec ? spec.view : undefined;
+
+        if (
+            parentChromePolicy.background &&
+            (needsAxes || explicitViewBackground)
+        ) {
             const viewBackground = getConfiguredViewBackground(
                 view.getConfigScopes(),
-                "view" in spec ? spec.view : undefined
+                explicitViewBackground
             );
             this.backgroundZindex = viewBackground?.zindex ?? 0;
             this.backgroundStrokeZindex = viewBackground?.strokeZindex;
@@ -96,10 +146,7 @@ export default class GridChild {
                     layoutParent.context,
                     layoutParent,
                     view,
-                    "background" + serial,
-                    {
-                        blockEncodingInheritance: true,
-                    }
+                    "background" + serial
                 );
                 markViewAsNonAddressable(this.background, {
                     skipSubtree: true,
@@ -114,10 +161,7 @@ export default class GridChild {
                     layoutParent.context,
                     layoutParent,
                     view,
-                    "backgroundStroke" + serial,
-                    {
-                        blockEncodingInheritance: true,
-                    }
+                    "backgroundStroke" + serial
                 );
                 markViewAsNonAddressable(this.backgroundStroke, {
                     skipSubtree: true,
@@ -126,30 +170,19 @@ export default class GridChild {
                     skipSubtree: true,
                 });
             }
-
-            const titleSpec = resolveTitleSpec(
-                view.spec.title,
-                view.getConfigScopes()
-            );
-            this.titleZindex = titleSpec?.zindex ?? 1;
-            const title = createTitle(titleSpec);
-            if (title) {
-                const unitView = new UnitView(
-                    title,
-                    layoutParent.context,
-                    layoutParent,
-                    view,
-                    "title" + serial,
-                    {
-                        blockEncodingInheritance: true,
-                    }
-                );
-                this.title = unitView;
-                markViewAsNonAddressable(this.title, { skipSubtree: true });
-                markViewAsChrome(this.title, { skipSubtree: true });
-            }
         }
 
+        this.title = view.spec.title
+            ? TitleView.create(
+                  view.spec.title,
+                  view.getConfigScopes(),
+                  layoutParent.context,
+                  layoutParent,
+                  view,
+                  "title" + serial
+              )
+            : undefined;
+
         // TODO: More specific getter for this
         if (view.spec.viewportWidth != null) {
             this.scrollbars.horizontal = new Scrollbar(this, "horizontal");
@@ -629,7 +662,10 @@ export default class GridChild {
         if (this.title) {
             yield this.title;
         }
-        yield* Object.values(this.axes);
+        for (const candidate of this.axisCandidates) {
+            yield candidate.axisView;
+        }
+        yield* iterateLegendViews(this.legends);
         yield* Object.values(this.gridLines);
         yield this.view;
         yield* Object.values(this.scrollbars);
@@ -645,7 +681,7 @@ export default class GridChild {
         this.disposeAxisViews();
 
         const { view, axes, gridLines } = this;
-
+        const parentChromePolicy = view.getParentGridChromePolicy();
         /**
          * @param {import("../../scales/axisResolution.js").default} r
          * @param {import("../../spec/channel.js").PrimaryPositionalChannel} channel
@@ -696,7 +732,7 @@ export default class GridChild {
             const props = getAxisPropsWithDefaults(r, channel);
 
             if (props) {
-                if (axes[props.orient]) {
+                if (axes[props.orient] && !this.allowDuplicateAxes()) {
                     throw new Error(
                         `An axis with the orient "${props.orient}" already exists!`
                     );
@@ -707,9 +743,21 @@ export default class GridChild {
                     r.scaleResolution.type,
                     this.layoutParent.context,
                     this.layoutParent,
-                    axisParent
+                    axisParent,
+                    {
+                        labelClipPolicy: this.getAxisLabelClipPolicy(
+                            channel,
+                            view
+                        ),
+                    }
                 );
-                axes[props.orient] = axisView;
+                axes[props.orient] ??= axisView;
+                this.axisCandidates.push({
+                    axisView,
+                    channel,
+                    orient: props.orient,
+                    resolution: r,
+                });
                 await axisView.initializeChildren();
             }
         };
@@ -754,74 +802,90 @@ export default class GridChild {
             }
         };
 
-        // Handle children that have caught axis resolutions. Create axes for them.
-        for (const channel of /** @type {import("../../spec/channel.js").PrimaryPositionalChannel[]} */ ([
-            "x",
-            "y",
-        ])) {
-            if (view.needsAxes[channel]) {
-                const r = view.resolutions.axis[channel];
-                if (!r) {
-                    continue;
-                }
+        if (parentChromePolicy.axes) {
+            // Handle children that have caught axis resolutions. Create axes for them.
+            for (const channel of /** @type {import("../../spec/channel.js").PrimaryPositionalChannel[]} */ ([
+                "x",
+                "y",
+            ])) {
+                if (view.needsAxes[channel]) {
+                    const r = view.resolutions.axis[channel];
+                    if (!r) {
+                        continue;
+                    }
 
-                await createAxis(r, channel, view);
+                    await createAxis(r, channel, view);
+                }
             }
-        }
 
-        // Handle gridlines of children. Note: children's axis resolution may be caught by
-        // this view or some of this view's ancestors.
-        for (const channel of /** @type {import("../../spec/channel.js").PrimaryPositionalChannel[]} */ ([
-            "x",
-            "y",
-        ])) {
-            if (
-                view.needsAxes[channel] &&
-                // Handle a special case where the child view has an excluded resolution
-                // but no scale or axis, e.g., when only values are used on a channel.
-                view.getConfiguredOrDefaultResolution(channel, "axis") !=
-                    "excluded"
-            ) {
-                const r = view.getAxisResolution(channel);
-                if (!r) {
-                    continue;
-                }
+            // Handle gridlines of children. Note: children's axis resolution may be caught by
+            // this view or some of this view's ancestors.
+            for (const channel of /** @type {import("../../spec/channel.js").PrimaryPositionalChannel[]} */ ([
+                "x",
+                "y",
+            ])) {
+                if (
+                    view.needsAxes[channel] &&
+                    // Handle a special case where the child view has an excluded resolution
+                    // but no scale or axis, e.g., when only values are used on a channel.
+                    view.getConfiguredOrDefaultResolution(channel, "axis") !=
+                        "excluded"
+                ) {
+                    const r = view.getAxisResolution(channel);
+                    if (!r) {
+                        continue;
+                    }
 
-                await createAxisGrid(r, channel, view);
+                    await createAxisGrid(r, channel, view);
+                }
             }
-        }
 
-        // Handle LayerView's possible independent axes
-        if (view instanceof LayerView) {
-            // First create axes that have an orient preference
-            for (const layerChild of view) {
-                for (const [channel, r] of Object.entries(
-                    layerChild.resolutions.axis
-                )) {
-                    const props = r.getAxisProps();
-                    if (props && props.orient) {
-                        await createAxis(r, channel, layerChild);
+            // Handle LayerView's possible independent axes
+            if (view instanceof LayerView) {
+                // First create axes that have an orient preference
+                for (const layerChild of view) {
+                    for (const [channel, r] of Object.entries(
+                        layerChild.resolutions.axis
+                    )) {
+                        const props = r.getAxisProps();
+                        if (props && props.orient) {
+                            await createAxis(r, channel, layerChild);
+                        }
                     }
                 }
-            }
 
-            // Then create axes in a priority order
-            for (const layerChild of view) {
-                for (const [channel, r] of Object.entries(
-                    layerChild.resolutions.axis
-                )) {
-                    const props = r.getAxisProps();
-                    if (props && !props.orient) {
-                        await createAxis(r, channel, layerChild);
+                // Then create axes in a priority order
+                for (const layerChild of view) {
+                    for (const [channel, r] of Object.entries(
+                        layerChild.resolutions.axis
+                    )) {
+                        const props = r.getAxisProps();
+                        if (props && !props.orient) {
+                            await createAxis(r, channel, layerChild);
+                        }
                     }
                 }
+
+                // TODO: Axis grid
             }
+        }
 
-            // TODO: Axis grid
+        for (const { definition, resolution } of getOrderedLegendEntries(
+            getLegendOwners(view)
+        )) {
+            const legend = await createGridChildLegend(
+                definition,
+                this.layoutParent
+            );
+            await addLegendView(this.legends, legend, resolution);
         }
 
         // Axes are created after scales are resolved, so we need to resolve possible new scales here
-        [...Object.values(axes), ...Object.values(gridLines)].forEach((v) =>
+        [
+            ...this.axisCandidates.map((candidate) => candidate.axisView),
+            ...Object.values(gridLines),
+            ...iterateLegendViews(this.legends),
+        ].forEach((v) =>
             v.visit((view) => {
                 if (view instanceof UnitView) {
                     view.resolve("scale");
@@ -830,43 +894,160 @@ export default class GridChild {
         );
     }
 
+    /**
+     * Allows subclasses such as SampleGridChild to keep multiple same-orient
+     * axis candidates. Ordinary GridView behavior still rejects duplicates.
+     *
+     * @protected
+     * @returns {boolean}
+     */
+    allowDuplicateAxes() {
+        return false;
+    }
+
+    /**
+     * @param {import("../../spec/axis.js").AxisOrient} orient
+     * @returns {AxisCandidate | undefined}
+     */
+    getActiveAxisCandidate(orient) {
+        // Later candidates win, matching the existing layer draw order.
+        return this.getActiveAxisCandidates(orient).at(-1);
+    }
+
+    /**
+     * @param {import("../../spec/axis.js").AxisOrient} orient
+     * @returns {AxisCandidate[]}
+     */
+    getActiveAxisCandidates(orient) {
+        return this.axisCandidates.filter(
+            (candidate) =>
+                candidate.orient === orient &&
+                candidate.resolution.hasVisibleNonChromeMember()
+        );
+    }
+
     /**
      * Disposes axis and gridline views so axes can be recreated safely.
      */
     disposeAxisViews() {
-        for (const axisView of Object.values(this.axes)) {
-            axisView.disposeSubtree();
+        for (const candidate of this.axisCandidates) {
+            candidate.axisView.disposeSubtree();
         }
 
         for (const gridView of Object.values(this.gridLines)) {
             gridView.disposeSubtree();
         }
 
+        disposeLegendViews(this.legends);
+
         this.axes = {};
+        this.axisCandidates = [];
         this.gridLines = {};
+        this.legends = {};
+    }
+
+    /**
+     * @param {import("../../spec/channel.js").PrimaryPositionalChannel} channel
+     * @param {import("../view.js").default} view
+     * @returns {import("../axisView.js").AxisLabelClipPolicy}
+     */
+    getAxisLabelClipPolicy(channel, view) {
+        const configuredPolicy = view.options.axisLabelClipPolicy?.[channel];
+        if (configuredPolicy) {
+            return configuredPolicy;
+        }
+
+        return (channel === "x" &&
+            (view.spec.viewportWidth != null ||
+                this.layoutParent.spec.viewportWidth != null)) ||
+            (channel === "y" &&
+                (view.spec.viewportHeight != null ||
+                    this.layoutParent.spec.viewportHeight != null))
+            ? "anchor"
+            : "pixel";
     }
 
     getOverhang() {
+        // Axes and overhang should be mutually exclusive, so we can just add them together
+        return this.getGuideOverhang()
+            .add(this.getTitleOverhang())
+            .add(this.view.getOverhang());
+    }
+
+    getGuideOverhang() {
         const calculate = (
             /** @type {import("../../spec/axis.js").AxisOrient} */ orient
-        ) => {
-            const axisView = this.axes[orient];
-            return axisView
-                ? Math.max(
-                      axisView.getPerpendicularSize() +
-                          (axisView.axisProps.offset ?? 0),
-                      0
-                  )
-                : 0;
-        };
+        ) => getExternalAxisOverhang(this.axes[orient]);
+        const legend = (
+            /** @type {import("../../spec/legend.js").LegendOrient} */ orient
+        ) => getLegendOverhang(this.legends, orient);
 
-        // Axes and overhang should be mutually exclusive, so we can just add them together
         return new Padding(
-            calculate("top"),
-            calculate("right"),
-            calculate("bottom"),
-            calculate("left")
-        ).add(this.view.getOverhang());
+            calculate("top") + legend("top"),
+            calculate("right") + legend("right"),
+            calculate("bottom") + legend("bottom"),
+            calculate("left") + legend("left")
+        );
+    }
+
+    getTitleOverhang() {
+        return this.title?.getOverhang() ?? Padding.zero();
+    }
+
+    getTitleZindex() {
+        return this.title?.titleSpec.zindex ?? 1;
+    }
+
+    /**
+     * @param {import("../renderingContext/viewRenderingContext.js").default} context
+     * @param {Rectangle} viewportCoords
+     * @param {import("../../types/rendering.js").RenderingOptions} options
+     */
+    renderTitle(context, viewportCoords, options) {
+        this.title?.render(
+            context,
+            this.getTitleCoords(viewportCoords),
+            options
+        );
+    }
+
+    /**
+     * Returns the frame used for rendering a view title. Reserved titles are
+     * placed outside guide overhang orthogonally, while the title frame controls
+     * the parallel anchor range.
+     *
+     * @param {Rectangle} viewportCoords
+     */
+    getTitleCoords(viewportCoords) {
+        const titleSpec = this.title?.titleSpec;
+        if (!titleSpec) {
+            return viewportCoords;
+        }
+
+        const guideCoords = viewportCoords.expand(this.getGuideOverhang());
+        const frame = titleSpec.frame ?? "group";
+        if (titleSpec.reserve === false) {
+            return frame == "bounds" ? guideCoords : viewportCoords;
+        } else if (frame == "bounds") {
+            return guideCoords;
+        }
+
+        switch (titleSpec.orient) {
+            case "top":
+            case "bottom":
+                return guideCoords.modify({
+                    x: () => viewportCoords.x,
+                    width: () => viewportCoords.width,
+                });
+            case "left":
+            case "right":
+                return guideCoords.modify({
+                    y: () => viewportCoords.y,
+                    height: () => viewportCoords.height,
+                });
+            default:
+                return viewportCoords;
+        }
     }
 
     getOverhangAndPadding() {
@@ -922,10 +1103,11 @@ function normalizeIntervalForChannel(scaleResolution, interval) {
  * @returns {import("../../spec/view.js").UnitSpec}
  */
 export function createBackground(viewBackground) {
+    const fillOpacity =
+        viewBackground?.fillOpacity ?? (viewBackground?.fill ? 1.0 : 0.0);
+    const shadowOpacity = viewBackground?.shadowOpacity ?? 0.0;
     const required =
-        viewBackground?.fill ||
-        viewBackground?.fillOpacity ||
-        viewBackground?.shadowOpacity;
+        (viewBackground?.fill && fillOpacity !== 0) || shadowOpacity !== 0;
     if (!required) {
         return;
     }
@@ -934,8 +1116,7 @@ export function createBackground(viewBackground) {
         data: { values: [{}] },
         mark: {
             color: viewBackground.fill,
-            opacity:
-                viewBackground.fillOpacity ?? (viewBackground.fill ? 1.0 : 0.0),
+            opacity: fillOpacity,
             type: "rect",
             clip: false, // Shouldn't be needed
             tooltip: null,
@@ -986,7 +1167,7 @@ export function createBackgroundStroke(viewBackground) {
             strokeCap: "square",
             opacity: viewBackground.strokeOpacity ?? 1.0,
             type: "rule",
-            clip: false,
+            clip: "never",
             tooltip: null,
         },
         encoding: {

package/dist/src/view/gridView/gridChildLegends.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @param {import("../view.js").default[]} legendOwners
+ * @returns {OrderedLegendEntry[]}
+ */
+export function getOrderedLegendEntries(legendOwners: import("../view.js").default[]): OrderedLegendEntry[];
+/**
+ * @param {import("../../scales/legendResolution.js").LegendDefinition} definition
+ * @param {import("../containerView.js").default} layoutParent
+ * @returns {Promise<LegendView>}
+ */
+export function createGridChildLegend(definition: import("../../scales/legendResolution.js").LegendDefinition, layoutParent: import("../containerView.js").default): Promise<LegendView>;
+/**
+ * @param {GridChildLegends} legends
+ * @param {LegendView} legend
+ * @param {import("../../scales/legendResolution.js").default} resolution
+ */
+export function addLegendView(legends: GridChildLegends, legend: LegendView, resolution: import("../../scales/legendResolution.js").default): Promise<void>;
+/**
+ * @param {GridChildLegends} legends
+ */
+export function iterateLegendViews(legends: GridChildLegends): Generator<LegendRegionView, void, unknown>;
+/**
+ * @param {GridChildLegends} legends
+ */
+export function disposeLegendViews(legends: GridChildLegends): void;
+/**
+ * @param {GridChildLegends} legends
+ * @param {import("../../spec/legend.js").LegendOrient} orient
+ */
+export function getLegendOverhang(legends: GridChildLegends, orient: import("../../spec/legend.js").LegendOrient): number;
+/**
+ * @param {GridChildLegendEntry} entry
+ */
+export function isActiveLegendEntry(entry: GridChildLegendEntry): boolean;
+/**
+ * @param {GridChildLegendRegion} region
+ */
+export function isActiveLegendRegion(region: GridChildLegendRegion): boolean;
+export type GridChildLegendEntry = {
+    legendView: LegendView;
+    resolution: import("../../scales/legendResolution.js").default;
+};
+export type OrderedLegendEntry = {
+    definition: import("../../scales/legendResolution.js").LegendDefinition;
+    resolution: import("../../scales/legendResolution.js").default;
+};
+export type GridChildLegendRegion = {
+    legendView: LegendRegionView;
+    entries: GridChildLegendEntry[];
+};
+export type GridChildLegends = Partial<Record<import("../../spec/legend.js").LegendOrient, GridChildLegendRegion>>;
+export type ResolvedLegendConfig = Omit<import("../../spec/legend.js").LegendConfig, "orient"> & {
+    orient?: import("../../spec/legend.js").LegendOrient;
+};
+import LegendView from "../legendView.js";
+import { LegendRegionView } from "../legendView.js";
+//# sourceMappingURL=gridChildLegends.d.ts.map

package/dist/src/view/gridView/gridChildLegends.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridChildLegends.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/gridChildLegends.js"],"names":[],"mappings":"AAqFA;;;GAGG;AACH,sDAHW,OAAO,YAAY,EAAE,OAAO,EAAE,GAC5B,kBAAkB,EAAE,CAoChC;AAqPD;;;;GAIG;AACH,kDAJW,OAAO,kCAAkC,EAAE,gBAAgB,gBAC3D,OAAO,qBAAqB,EAAE,OAAO,GACnC,OAAO,CAAC,UAAU,CAAC,CAuD/B;AAED;;;;GAIG;AACH,uCAJW,gBAAgB,UAChB,UAAU,cACV,OAAO,kCAAkC,EAAE,OAAO,iBA4B5D;AAED;;GAEG;AACH,4CAFW,gBAAgB,8CAM1B;AAED;;GAEG;AACH,4CAFW,gBAAgB,QAM1B;AAED;;;GAGG;AACH,2CAHW,gBAAgB,UAChB,OAAO,sBAAsB,EAAE,YAAY,UAOrD;AAED;;GAEG;AACH,2CAFW,oBAAoB,WAI9B;AAED;;GAEG;AACH,6CAFW,qBAAqB,WAI/B;mCA3eY;IACN,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,OAAO,kCAAkC,EAAE,OAAO,CAAC;CAClE;iCAES;IACN,UAAU,EAAE,OAAO,kCAAkC,EAAE,gBAAgB,CAAC;IACxE,UAAU,EAAE,OAAO,kCAAkC,EAAE,OAAO,CAAC;CAClE;oCAES;IACN,UAAU,EAAE,gBAAgB,CAAC;IAC7B,OAAO,EAAE,oBAAoB,EAAE,CAAC;CACnC;+BAES,OAAO,CAAC,MAAM,CAAC,OAAO,sBAAsB,EAAE,YAAY,EAAE,qBAAqB,CAAC,CAAC;mCACnF,IAAI,CAAC,OAAO,sBAAsB,EAAE,YAAY,EAAE,QAAQ,CAAC,GAAG;IACpE,MAAM,CAAC,EAAE,OAAO,sBAAsB,EAAE,YAAY,CAAA;CACvD;uBArBG,kBAAkB;iCAAlB,kBAAkB"}