@genome-spy/core 0.19.1 → 0.22.0

package/src/view/implicitRootView.js

@@ -0,0 +1,14 @@
+import GridView from "./gridView";
+
+export default class ImplicitRootView extends GridView {
+    /**
+     * @param {import("./viewUtils").ViewContext} context
+     * @param {import("./view").default} view
+     */
+    constructor(context, view) {
+        super({ vconcat: [] }, context, undefined, "implicitRoot", 1);
+
+        view.parent = this;
+        this.appendChild(view);
+    }
+}

package/src/view/layerView.js

@@ -48,7 +48,6 @@ export default class LayerView extends ContainerView {
             return;
         }
 
-        coords = coords.shrink(this.getPadding());
         context.pushView(this, coords);
 
         for (const child of this.children) {
@@ -57,4 +56,19 @@ export default class LayerView extends ContainerView {
 
         context.popView(this);
     }
+
+    /**
+     * @param {import("../utils/interactionEvent").default} event
+     */
+    propagateInteractionEvent(event) {
+        this.handleInteractionEvent(undefined, event, true);
+        if (this.children.length) {
+            // Propagate to the top layer
+            this.children.at(-1).propagateInteractionEvent(event);
+        }
+        if (event.stopped) {
+            return;
+        }
+        this.handleInteractionEvent(undefined, event, false);
+    }
 }

package/src/view/renderingContext/deferredViewRenderingContext.js

@@ -146,7 +146,9 @@ export default class DeferredViewRenderingContext extends ViewRenderingContext {
             });
             // Change program, set common uniforms (mark properties, shared domains)
             this.batch.push(
-                ifEnabled(() => mark.prepareRender(this.globalOptions))
+                ...mark
+                    .prepareRender(this.globalOptions)
+                    .map((op) => ifEnabled(op))
             );
 
             /** @type {import("../../utils/layout/rectangle").default} */

package/src/view/renderingContext/simpleViewRenderingContext.js

@@ -55,7 +55,9 @@ export default class SimpleViewRenderingContext extends ViewRenderingContext {
             return;
         }
 
-        mark.prepareRender(this.globalOptions);
+        for (const op of mark.prepareRender(this.globalOptions)) {
+            op();
+        }
         mark.setViewport(this.coords, options.clipRect);
         mark.render(options)();
     }

package/src/view/title.js

@@ -0,0 +1,165 @@
+import { isString } from "vega-util";
+
+/** @type {Omit<Required<import("../spec/title").Title>, "text" | "style">} */
+const BASE_TITLE_STYLE = {
+    anchor: "middle",
+    frame: "group",
+    offset: 10,
+    orient: "top",
+    align: undefined,
+    angle: 0,
+    baseline: "alphabetic",
+    dx: 0,
+    dy: 0,
+    color: undefined,
+    font: undefined,
+    fontSize: 12,
+    fontStyle: "normal",
+    fontWeight: "normal",
+};
+
+/** @type {Partial<import("../spec/title").Title>} */
+const TRACK_TITLE_STYLE = {
+    orient: "left",
+    anchor: "middle",
+    align: "right",
+    baseline: "middle",
+    angle: 0,
+    fontSize: 12,
+};
+
+/** @type {Partial<import("../spec/title").Title>} */
+const OVERLAY_TITLE_STYLE = {
+    orient: "top",
+    anchor: "start",
+    align: "left",
+    baseline: "top",
+    offset: -10,
+    dx: 10,
+    fontSize: 12,
+};
+
+/** @type {Record<import("../spec/title").TitleAnchor, number>} */
+const ANCHORS = {
+    start: 0,
+    middle: 0.5,
+    end: 1,
+};
+
+/** @type {Record<import("../spec/title").TitleAnchor, import("../spec/font").Align>} */
+const ANCHOR_TO_ALIGN = {
+    start: "left",
+    middle: "center",
+    end: "right",
+};
+
+/**
+ * @param {string | import("../spec/title").Title} title
+ * @returns {import("../spec/view").UnitSpec}
+ */
+export default function createTitle(title) {
+    if (!title) {
+        return;
+    }
+
+    /** @type {import("../spec/title").Title} */
+    const titleSpec = isString(title) ? { text: title } : title;
+
+    if (!titleSpec.text || titleSpec.orient == "none") {
+        return;
+    }
+
+    // TODO: Make these configurable
+    /** @type {Partial<import("../spec/title").Title>} */
+    const config =
+        {
+            "track-title": TRACK_TITLE_STYLE,
+            overlay: OVERLAY_TITLE_STYLE,
+        }[titleSpec.style] ?? {};
+
+    // TODO: frame prop
+
+    /** @type {import("../spec/title").Title} */
+    const preliminarySpec = {
+        ...BASE_TITLE_STYLE,
+        ...config,
+        ...titleSpec,
+    };
+
+    /** @type {Partial<import("../spec/title").Title>} */
+    let orientConfig = {};
+    let xy = { x: 0, y: 0 };
+
+    const anchorPos = ANCHORS[preliminarySpec.anchor ?? "middle"];
+
+    switch (preliminarySpec.orient) {
+        case "top":
+            xy = { x: anchorPos, y: 1 };
+            orientConfig = { baseline: "alphabetic", angle: 0 };
+            break;
+        case "right":
+            xy = { x: 1, y: 1 - anchorPos };
+            orientConfig = { baseline: "alphabetic", angle: 90 };
+            break;
+        case "bottom":
+            xy = { x: anchorPos, y: 0 };
+            orientConfig = { baseline: "top", angle: 0 };
+            break;
+        case "left":
+            xy = { x: 0, y: anchorPos };
+            orientConfig = { baseline: "alphabetic", angle: -90 };
+            break;
+        default:
+    }
+
+    /** @type {import("../spec/title").Title} */
+    const spec = {
+        ...BASE_TITLE_STYLE,
+        ...orientConfig,
+        ...config,
+        ...titleSpec,
+    };
+
+    const offsets = { xOffset: 0, yOffset: 0 };
+    switch (preliminarySpec.orient) {
+        case "top":
+            offsets.yOffset = -spec.offset;
+            break;
+        case "right":
+            offsets.xOffset = spec.offset;
+            break;
+        case "bottom":
+            offsets.yOffset = spec.offset;
+            break;
+        case "left":
+            offsets.xOffset = -spec.offset;
+            break;
+        default:
+    }
+
+    return {
+        configurableVisibility: false,
+        data: { values: [{}] },
+        mark: {
+            type: "text",
+            tooltip: null,
+            clip: false,
+
+            ...xy,
+            ...offsets,
+
+            text: spec.text,
+
+            align: spec.align ?? ANCHOR_TO_ALIGN[spec.anchor],
+            angle: spec.angle,
+            baseline: spec.baseline,
+            dx: spec.dx,
+            dy: spec.dy,
+            color: spec.color,
+            font: spec.font,
+            size: spec.fontSize,
+            fontStyle: spec.fontStyle,
+            fontWeight: spec.fontWeight,
+        },
+    };
+}

package/src/view/unitView.js

@@ -40,7 +40,6 @@ export const markTypes = {
  * @typedef {import("../encoder/accessor").Accessor} Accessor
  * @typedef {import("../utils/layout/flexLayout").SizeDef} SizeDef
  * @typedef {import("../spec/view").ResolutionTarget} ResolutionTarget
- * @typedef {import("./decoratorView").default} DecoratorView
  *
  */
 export default class UnitView extends ContainerView {
@@ -64,13 +63,13 @@ export default class UnitView extends ContainerView {
             throw new Error(`No such mark: ${this.getMarkType()}`);
         }
 
-        /** @type {(UnitView | LayerView | DecoratorView)[]} */
+        /** @type {(UnitView | LayerView)[]} */
         this.sampleAggregateViews = [];
         this._initializeAggregateViews();
 
         /**
          * Not nice! Inconsistent when faceting!
-         * TODO: Something. Perhaps a Map that has coords for each facet or something...
+         * TODO: Something. Maybe store only width/height
          * @type {import("../utils/layout/rectangle").default}
          */
         this.coords = undefined;
@@ -108,8 +107,6 @@ export default class UnitView extends ContainerView {
             return;
         }
 
-        coords = coords.shrink(this.getPadding());
-
         this.coords = coords;
 
         context.pushView(this, coords);
@@ -366,6 +363,13 @@ export default class UnitView extends ContainerView {
         }
     }
 
+    /**
+     * @param {import("../utils/interactionEvent").default} event
+     */
+    propagateInteractionEvent(event) {
+        event.target = this;
+    }
+
     /**
      * @param {string} channel
      * @param {import("./containerView").ResolutionTarget} resolutionType

package/src/view/view.js

@@ -9,7 +9,7 @@ import {
     initPropertyCache,
     invalidatePrefix,
 } from "../utils/propertyCacher";
-import { isNumber, span } from "vega-util";
+import { isNumber, isString, span } from "vega-util";
 import { scaleLog } from "d3-scale";
 import { isFieldDef, getPrimaryChannel } from "../encoder/encoder";
 import { appendToBaseUrl } from "../utils/url";
@@ -81,12 +81,12 @@ export default class View {
         this.resolutions = {
             /**
              * Channel-specific scale resolutions
-             * @type {Record<string, import("./scaleResolution").default>}
+             * @type {Partial<Record<Channel, import("./scaleResolution").default>>}
              */
             scale: {},
             /**
              * Channel-specific axis resolutions
-             * @type {Record<string, import("./axisResolution").default>}
+             * @type {Partial<Record<import("../spec/channel").PrimaryPositionalChannel, import("./axisResolution").default>>}
              */
             axis: {},
         };
@@ -103,6 +103,12 @@ export default class View {
 
         /** @type {function(number):number} */
         this.opacityFunction = defaultOpacityFunction;
+
+        /**
+         * Don't inherit encodings from parent.
+         * TODO: Make configurable through spec. Allow more fine-grained control.
+         */
+        this.blockEncodingInheritance = false;
     }
 
     getPadding() {
@@ -112,15 +118,12 @@ export default class View {
     }
 
     /**
-     * Returns a computed, "effective" padding between the plot area and view's
-     * bounding box. The padding may include the configured padding, axes,
-     * peripheral views, etc.
+     * Returns a padding that indicates how much axes and titles extend over the plot area.
      *
-     * Effective padding allows for aligning views so that their content and
-     * axes line up properly.
+     * @returns {Padding}
      */
-    getEffectivePadding() {
-        return this.getPadding();
+    getOverhang() {
+        return Padding.zero();
     }
 
     /**
@@ -367,12 +370,13 @@ export default class View {
      * encodings. However, this does not contain any defaults or inferred/adjusted/fixed
      * encodings. Those are available in Mark's encoding property.
      *
-     * @param {View} [whoIsAsking] Passed to the immediate parent. Allows for
-     *      selectively breaking the inheritance.
      * @return {import("../spec/channel").Encoding}
      */
-    getEncoding(whoIsAsking) {
-        const pe = this.parent ? this.parent.getEncoding(this) : {};
+    getEncoding() {
+        const pe =
+            this.parent && !this.blockEncodingInheritance
+                ? this.parent.getEncoding()
+                : {};
         const te = this.spec.encoding || {};
 
         /** @type {import("../spec/channel").Encoding} */
@@ -490,6 +494,13 @@ export default class View {
         return true;
     }
 
+    getTitleText() {
+        const title = this.spec.title;
+        if (title) {
+            return isString(title) ? title : title.text;
+        }
+    }
+
     /**
      * @param {any} key string
      * @param {function(key?):T} callable A function that produces a value to be cached
@@ -525,6 +536,16 @@ export default class View {
     invalidateSizeCache() {
         this._invalidateCacheByPrefix("size/", "ancestors");
     }
+
+    /**
+     * Broadcasts a message to views that include the given (x, y) point.
+     * This is mainly intended for mouse events.
+     *
+     * @param {import("../utils/interactionEvent").default} event
+     */
+    propagateInteractionEvent(event) {
+        // Subclasses must implement proper handling
+    }
 }
 
 /**

package/src/view/viewContext.d.ts

@@ -11,6 +11,11 @@ import { Datum } from "../data/flowNode";
 import { ViewSpec } from "../spec/view";
 import ContainerView from "./containerView";
 
+export interface Hover {
+    mark: Mark;
+    datum: Datum;
+}
+
 /**
  * ViewContext provides essential data and interfaces to View classes.
  */
@@ -29,7 +34,7 @@ export default interface ViewContext {
         converter?: (datum: T) => Promise<TemplateResult>
     ) => void;
 
-    getCurrentHover: () => { mark: Mark; datum: Datum };
+    getCurrentHover: () => Hover;
 
     /**
      * Adds a keyboard event listener to the document. Cleanup is performed automatically

package/src/view/viewUtils.js

@@ -3,19 +3,11 @@ import { loader as vegaLoader } from "vega-loader";
 
 import UnitView from "./unitView";
 import ImportView from "./importView";
-import LayerView from "./layerView";
-import DecoratorView from "./decoratorView";
 // eslint-disable-next-line no-unused-vars
 import View, { VISIT_SKIP, VISIT_STOP } from "./view";
 import { buildDataFlow } from "./flowBuilder";
 import { optimizeDataFlow } from "../data/flowOptimizer";
-import {
-    isFieldDef,
-    isValueDef,
-    primaryPositionalChannels,
-} from "../encoder/encoder";
-import ContainerView from "./containerView";
-import { peek } from "../utils/arrayUtils";
+import { isFieldDef, primaryPositionalChannels } from "../encoder/encoder";
 import { rollup } from "d3-array";
 
 /**
@@ -145,90 +137,6 @@ export function setImplicitScaleNames(root) {
     }
 }
 
-/**
- * @param {View} root
- */
-export function addDecorators(root) {
-    let newRoot = root; // If the root is wrapped...
-
-    /** @param {ChannelDef} channelDef */
-    const hasDomain = (channelDef) => channelDef && !isValueDef(channelDef);
-
-    root.visit((view) => {
-        if (view instanceof LayerView || view instanceof UnitView) {
-            const encoding = view.getEncoding();
-            if (
-                view instanceof UnitView &&
-                !hasDomain(encoding.x) &&
-                !hasDomain(encoding.y)
-            ) {
-                // Don't wrap views that have no positional channels
-                // TODO: However, in future, views with borders or backgrounds should be wrapped always
-                // TODO: Also, views with "axis: null" need no wrapping.
-                // TODO: Handle LayerViews, they may have children with positional domains
-                return VISIT_SKIP;
-            }
-
-            const originalParent = view.parent;
-            const decorator = new DecoratorView(view.context, originalParent);
-            view.parent = decorator;
-            decorator.child = view;
-            decorator.name = view.name + "_decorator";
-
-            if (originalParent) {
-                if (originalParent instanceof ContainerView) {
-                    originalParent.replaceChild(view, decorator);
-                } else {
-                    // The situation is likely related to summaries of SampleView and the
-                    // hierarchy is inconsistent. Let's try to find the SampleView.
-
-                    /** @type {view} */
-                    let parent;
-                    root.visit(
-                        stackifyVisitor((needle, stack) => {
-                            if (needle === view) {
-                                parent = peek(stack);
-                                return VISIT_STOP;
-                            }
-                        })
-                    );
-
-                    if (parent instanceof ContainerView) {
-                        parent.replaceChild(view, decorator);
-                    } else {
-                        throw new Error(
-                            "Cannot find parent while decorating: " +
-                                view.getPathString()
-                        );
-                    }
-                }
-            }
-
-            decorator.resolutions = view.resolutions;
-            view.resolutions = { scale: {}, axis: {} };
-
-            decorator.spec.height = view.spec.height;
-            view.spec.height = "container";
-
-            decorator.spec.width = view.spec.width;
-            view.spec.width = "container";
-
-            decorator.spec.padding = view.spec.padding;
-            view.spec.padding = undefined;
-
-            if (view === root) {
-                newRoot = decorator;
-            }
-
-            decorator.initialize();
-
-            return VISIT_SKIP;
-        }
-    });
-
-    return newRoot;
-}
-
 /**
  * @param {View} root
  * @param {import("../data/dataFlow").default<View>} [existingFlow] Add data flow

package/src/view/zoom.js

@@ -0,0 +1,89 @@
+/**
+ * @typedef {object} ZoomEvent
+ * @prop {number} x
+ * @prop {number} y
+ * @prop {number} xDelta
+ * @prop {number} yDelta
+ * @prop {number} zDelta
+ */
+
+/**
+ * @param {import("../utils/interactionEvent").default} event
+ * @param {import("./renderingContext/layoutRecorderViewRenderingContext").Rectangle} coords The plot area
+ * @param {(zoomEvent: ZoomEvent) => void} handleZoom
+ * @param {import("./viewContext").Hover} [hover]
+ */
+export default function interactionToZoom(event, coords, handleZoom, hover) {
+    if (event.type == "wheel") {
+        event.uiEvent.preventDefault(); // TODO: Only if there was something zoomable
+
+        const wheelEvent = /** @type {WheelEvent} */ (event.uiEvent);
+        const wheelMultiplier = wheelEvent.deltaMode ? 120 : 1;
+
+        let { x, y } = event.point;
+
+        // Snapping to the hovered item:
+        // We find the currently hovered object and move the pointed coordinates
+        // to its center if the mark has only primary positional channels.
+        // This allows the user to rapidly zoom closer without having to
+        // continuously adjust the cursor position.
+
+        if (hover) {
+            const e = hover.mark.encoders;
+            if (e.x && !e.x2) {
+                x = +e.x(hover.datum) * coords.width + coords.x;
+            }
+            if (e.y && !e.y2) {
+                y = (1 - +e.y(hover.datum)) * coords.height + coords.y;
+            }
+        }
+
+        if (Math.abs(wheelEvent.deltaX) < Math.abs(wheelEvent.deltaY)) {
+            handleZoom({
+                x,
+                y,
+                xDelta: 0,
+                yDelta: 0,
+                zDelta: (wheelEvent.deltaY * wheelMultiplier) / 300,
+            });
+        } else {
+            handleZoom({
+                x,
+                y,
+                xDelta: -wheelEvent.deltaX * wheelMultiplier,
+                yDelta: 0,
+                zDelta: 0,
+            });
+        }
+    } else if (
+        event.type == "mousedown" &&
+        /** @type {MouseEvent} */ (event.uiEvent).button === 0
+    ) {
+        const mouseEvent = /** @type {MouseEvent} */ (event.uiEvent);
+        mouseEvent.preventDefault();
+
+        let prevMouseEvent = mouseEvent;
+
+        const onMousemove = /** @param {MouseEvent} moveEvent */ (
+            moveEvent
+        ) => {
+            handleZoom({
+                x: prevMouseEvent.clientX,
+                y: prevMouseEvent.clientY,
+                xDelta: moveEvent.clientX - prevMouseEvent.clientX,
+                yDelta: moveEvent.clientY - prevMouseEvent.clientY,
+                zDelta: 0,
+            });
+
+            prevMouseEvent = moveEvent;
+        };
+
+        const onMouseup = /** @param {MouseEvent} upEvent */ (upEvent) => {
+            document.removeEventListener("mousemove", onMousemove);
+            document.removeEventListener("mouseup", onMouseup);
+        };
+
+        document.addEventListener("mouseup", onMouseup, false);
+        document.addEventListener("mousemove", onMousemove, false);
+    }
+}

package/src/utils/binnedRangeIndex.js

@@ -1,83 +0,0 @@
-import clamp from "./clamp";
-
-const MAX_INTEGER = 2 ** 31 - 1;
-
-/**
- * @callback Lookup
- * @param {number} start
- * @param {number} end
- * @returns {[number, number]}
- */
-
-/**
- * A binned index for (overlapping) ranges that are sorted by their start position.
- * Allows for indexing vertices of mark instances.
- *
- * @param {number} size Number of bins
- * @param {[number, number]} domain
- */
-export default function createBinningRangeIndexer(size, domain) {
-    const startIndices = new Int32Array(size);
-    startIndices.fill(MAX_INTEGER);
-
-    const endIndices = new Int32Array(size);
-
-    const start = domain[0];
-    const domainLength = domain[1] - domain[0];
-    const divisor = domainLength / size;
-
-    /** @param {number} pos */
-    const getBin = (pos) =>
-        clamp(Math.floor((pos - start) / divisor), 0, size - 1);
-
-    /**
-     *
-     * @param {number} start
-     * @param {number} end
-     * @param {number} startIndex
-     * @param {number} endIndex
-     */
-    const indexer = (start, end, startIndex, endIndex) => {
-        const startBin = getBin(start);
-        const endBin = getBin(end);
-
-        // TODO: This loop could probably be done as a more efficient post processing
-        // step.
-        for (let bin = startBin; bin <= endBin; bin++) {
-            if (startIndices[bin] > startIndex) {
-                startIndices[bin] = startIndex;
-            }
-
-            if (endIndices[bin] < endIndex) {
-                endIndices[bin] = endIndex;
-            }
-        }
-    };
-
-    /**
-     * @type {Lookup}
-     */
-    const lookup = (start, end) => [
-        startIndices[getBin(start)],
-        endIndices[getBin(end)],
-    ];
-
-    const getIndex = () => {
-        for (let i = 1; i < endIndices.length; i++) {
-            if (endIndices[i] < endIndices[i - 1]) {
-                endIndices[i] = endIndices[i - 1];
-            }
-        }
-        for (let i = endIndices.length - 1; i > 0; i--) {
-            if (endIndices[i - 1] > endIndices[i]) {
-                endIndices[i - 1] = endIndices[i];
-            }
-        }
-
-        return lookup;
-    };
-
-    indexer.getIndex = getIndex;
-
-    return indexer;
-}