@genome-spy/core 0.14.0

package/src/view/renderingContext/deferredViewRenderingContext.js

@@ -0,0 +1,174 @@
+import { group } from "d3-array";
+
+import ViewRenderingContext from "./viewRenderingContext";
+
+/**
+ *
+ * @typedef {object} DeferredRenderingRequest Allows for collecting marks for
+ *      optimized rendering order.
+ * @prop {import("../../marks/mark").default} mark
+ * @prop {function():void} callback
+ * @prop {import("../../utils/layout/rectangle").default} coords
+ * @prop {import("../../utils/layout/rectangle").default} [clipRect]
+ */
+export default class DeferredViewRenderingContext extends ViewRenderingContext {
+    /**
+     * @param {import("../rendering").GlobalRenderingOptions} globalOptions
+     * @param {import("../../gl/webGLHelper").default} webGLHelper
+     */
+    constructor(globalOptions, webGLHelper) {
+        super(globalOptions);
+
+        this.webGLHelper = webGLHelper;
+
+        /**
+         * @type {DeferredRenderingRequest[]}
+         */
+        this.buffer = [];
+
+        /** @type {import("../../utils/layout/rectangle").default} */
+        this.coords = undefined;
+
+        /** @type {Set<import("../view").default>} */
+        this.views = new Set();
+    }
+
+    /**
+     * Must be called when a view's render() method is entered
+     *
+     * @param {import("../view").default} view
+     * @param {import("../../utils/layout/rectangle").default} coords View coordinates
+     *      inside the padding.
+     */
+    pushView(view, coords) {
+        this.views.add(view);
+        this.coords = coords;
+    }
+
+    /**
+     *
+     * @param {import("../../marks/mark").default} mark
+     * @param {import("../view").RenderingOptions} options
+     */
+    renderMark(mark, options) {
+        if (this.globalOptions.picking && !mark.isPickingParticipant()) {
+            return;
+        }
+
+        const callback = mark.render(options);
+        if (callback) {
+            this.buffer.push({
+                mark,
+                callback,
+                coords: this.coords,
+                clipRect: options.clipRect,
+            });
+        }
+    }
+
+    /**
+     * Renders marks in an optimized order, minimizing the number of WebGL state
+     * changes.
+     */
+    renderDeferred() {
+        if (!this.batch) {
+            this._buildBatch();
+        }
+
+        if (this.batch.length == 0) {
+            return;
+        }
+
+        const gl = this.webGLHelper.gl;
+        const picking = this.globalOptions.picking;
+
+        gl.bindFramebuffer(
+            gl.FRAMEBUFFER,
+            picking ? this.webGLHelper._pickingBufferInfo.framebuffer : null
+        );
+
+        this.webGLHelper.clearAll();
+
+        for (const view of this.views) {
+            view.onBeforeRender();
+        }
+
+        // Execute the batch
+        for (const op of this.batch) {
+            op();
+        }
+
+        if (picking) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        }
+    }
+
+    _buildBatch() {
+        /**
+         * Store the operations as a sequence of commands for cheap subsequent rendering.
+         *
+         * @type {(function():void)[]}
+         */
+        this.batch = [];
+
+        /**
+         * Is drawing enabled or not. As an optimization this is toggled off for invisible views.
+         */
+        let enabled = true;
+
+        let viewportVisible = true;
+
+        /**
+         * @type {function(function():void):(function():void)}
+         */
+        const ifEnabled = (op) => () => {
+            if (enabled) op();
+        };
+
+        /**
+         * @type {function(function():void):(function():void)}
+         */
+        const ifEnabledAndVisible = (op) => () => {
+            if (enabled && viewportVisible) op();
+        };
+
+        // Group by marks in order to minimize program changes
+        const requestByMark = group(this.buffer, (request) => request.mark);
+
+        for (const [mark, requests] of requestByMark.entries()) {
+            if (!mark.isReady()) {
+                continue;
+            }
+
+            // eslint-disable-next-line no-loop-func
+            this.batch.push(() => {
+                enabled = mark.unitView.getEffectiveOpacity() > 0;
+            });
+            // Change program, set common uniforms (mark properties, shared domains)
+            this.batch.push(
+                ifEnabled(() => mark.prepareRender(this.globalOptions))
+            );
+
+            /** @type {import("../../utils/layout/rectangle").default} */
+            let previousCoords;
+            for (const request of requests) {
+                const coords = request.coords;
+                // Render each facet
+                if (!coords.equals(previousCoords)) {
+                    this.batch.push(
+                        // eslint-disable-next-line no-loop-func
+                        ifEnabled(() => {
+                            // Suppress rendering if viewport is outside the clipRect
+                            viewportVisible = mark.setViewport(
+                                coords,
+                                request.clipRect
+                            );
+                        })
+                    );
+                }
+                this.batch.push(ifEnabledAndVisible(request.callback));
+                previousCoords = request.coords;
+            }
+        }
+    }
+}

package/src/view/renderingContext/layoutRecorderViewRenderingContext.js

@@ -0,0 +1,128 @@
+import { peek } from "../../utils/arrayUtils";
+import ViewRenderingContext from "./viewRenderingContext";
+
+/**
+ * A Rendering context that doesn't render anything. It creates a hierarchy
+ * of view coordinates, including faceted views that are repeated multiple times.
+ * The coordinates can be used for mouse events / interactions, for example.
+ *
+ * @typedef {import("../view").default} View
+ * @typedef {import("../../utils/layout/rectangle").default} Rectangle
+ *
+ */
+export default class LayoutRecorderViewRenderingContext extends ViewRenderingContext {
+    /**
+     * @param {import("../rendering").GlobalRenderingOptions} globalOptions
+     */
+    constructor(globalOptions) {
+        super(globalOptions);
+
+        /** @type {ViewCoords} */
+        this.root = undefined;
+
+        /** @type {ViewCoords[]} */
+        this.stack = [];
+
+        /** @type {ViewCoords} */
+        this.lastAddition = undefined;
+    }
+
+    /**
+     * Must be called when a view's render() method is entered
+     *
+     * @param {View} view
+     * @param {Rectangle} coords View coordinates
+     *      inside the padding.
+     */
+    pushView(view, coords) {
+        // TODO: Facet id
+
+        const viewCoords = new ViewCoords(view, coords);
+
+        if (!this.root) {
+            this.root = viewCoords;
+        } else {
+            peek(this.stack).addChild(viewCoords);
+        }
+        this.stack.push(viewCoords);
+    }
+
+    /**
+     * Must be called when a view's render() method is being exited
+     *
+     * @param {View} view
+     */
+    popView(view) {
+        this.stack.pop();
+    }
+
+    getLayout() {
+        return this.root;
+    }
+}
+
+/**
+ * Represents coordinates of view instances. Faceted views objects may have
+ * been rendered at multiple locations.
+ */
+class ViewCoords {
+    /**
+     * @param {View} view
+     * @param {Rectangle} coords
+     */
+    constructor(view, coords) {
+        this.view = view;
+        this.coords = coords;
+        /** @type {ViewCoords[]} */
+        this.children = [];
+    }
+
+    /**
+     *
+     * @param {ViewCoords} viewCoords
+     */
+    addChild(viewCoords) {
+        const last = peek(this.children);
+        if (
+            last &&
+            viewCoords.view === last.view &&
+            viewCoords.coords.equals(last.coords)
+        ) {
+            // Skip extra copies of sample facets. They all have the same coords.
+            return;
+        }
+
+        this.children.push(viewCoords);
+    }
+
+    /**
+     * 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
+     */
+    dispatchInteractionEvent(event) {
+        if (this.coords.containsPoint(event.point.x, event.point.y)) {
+            this.view.handleInteractionEvent(this.coords, event, true);
+            if (event.stopped) {
+                return;
+            }
+
+            if (this.children.length == 0) {
+                event.target = this.view;
+            } else {
+                for (const child of this.children) {
+                    child.dispatchInteractionEvent(event);
+                    if (event.target) {
+                        break;
+                    }
+                    if (event.stopped) {
+                        return;
+                    }
+                }
+            }
+
+            this.view.handleInteractionEvent(this.coords, event, false);
+        }
+    }
+}

package/src/view/renderingContext/simpleViewRenderingContext.js

@@ -0,0 +1,62 @@
+import ViewRenderingContext from "./viewRenderingContext";
+
+/**
+ * This class is mainly for illustrative purpose, i.e., how the rendering
+ * would be performed in the most straightforward, unoptimized way.
+ *
+ * @typedef {import("../view").default} View
+ */
+export default class SimpleViewRenderingContext extends ViewRenderingContext {
+    /**
+     * @param {import("../rendering").GlobalRenderingOptions} globalOptions
+     */
+    constructor(globalOptions) {
+        super(globalOptions);
+        /** @type {import("../../utils/layout/rectangle").default} */
+        this.coords = undefined;
+
+        /** @type {Set<import("../view").default>} */
+        this.views = new Set();
+    }
+
+    /**
+     * Must be called when a view's render() method is entered
+     *
+     * @param {View} view
+     * @param {import("../../utils/layout/rectangle").default} coords View coordinates
+     *      inside the padding.
+     */
+    pushView(view, coords) {
+        if (!this.views.has(view)) {
+            // Ensure that the method is called only once, even when rendering facets.
+            view.onBeforeRender();
+            this.views.add(view);
+        }
+
+        this.coords = coords;
+    }
+
+    /**
+     * Must be called when a view's render() method is being exited
+     *
+     * @param {View} view
+     */
+    popView(view) {
+        //
+    }
+
+    /**
+     *
+     * @param {import("../../marks/mark").default} mark
+     * @param {import("../view").RenderingOptions} options
+     */
+    renderMark(mark, options) {
+        if (this.globalOptions.picking && !mark.isPickingParticipant()) {
+            return;
+        }
+
+        mark.prepareRender(this.globalOptions);
+        mark.setViewport(this.coords, options.clipRect);
+        mark.render(options)();
+    }
+}

package/src/view/renderingContext/svgViewRenderingContext.js

@@ -0,0 +1,121 @@
+import { peek } from "../../utils/arrayUtils";
+import ViewRenderingContext from "./viewRenderingContext";
+
+/**
+ * A trivial proof-of-concept SVG rendering context. Doesn't render any
+ * marks at this point, only placeholders.
+ *
+ * @typedef {import("../view").default} View
+ */
+export default class SvgViewRenderingContext extends ViewRenderingContext {
+    constructor() {
+        super();
+
+        /** @type {import("../../utils/layout/rectangle").default} */
+        this.coords = undefined;
+
+        this.svg = document.createElementNS(
+            "http://www.w3.org/2000/svg",
+            "svg"
+        );
+
+        /** @type {SVGElement[]} */
+        this.nodeStack = [this.svg];
+    }
+
+    /**
+     * Must be called when a view's render() method is entered
+     *
+     * @param {View} view
+     * @param {import("../../utils/layout/rectangle").default} coords View coordinates
+     *      inside the padding.
+     */
+    pushView(view, coords) {
+        view.onBeforeRender();
+        this.coords = coords;
+
+        if (this._currentNode === this.svg) {
+            const viewBox = coords.expand(view.getPadding());
+            this.svg.setAttributeNS(
+                null,
+                "viewBox",
+                ["x", "y", "width", "height"].map((a) => viewBox[a]).join(" ")
+            );
+        }
+
+        const group = createNode("g");
+        const title = createNode("title");
+        title.textContent = view.name;
+        group.appendChild(title);
+
+        this._currentNode.appendChild(group);
+        this.nodeStack.push(group);
+    }
+
+    /**
+     * Must be called when a view's render() method is being exited
+     *
+     * @param {View} view
+     */
+    popView(view) {
+        this.nodeStack.pop();
+    }
+
+    /**
+     *
+     * @param {import("../../marks/mark").default} mark
+     * @param {import("../view").RenderingOptions} options
+     */
+    renderMark(mark, options) {
+        const current = this._currentNode;
+
+        const rect = createNode("rect", {
+            x: this.coords.x,
+            y: this.coords.y,
+            width: this.coords.width,
+            height: this.coords.height,
+            fill: "transparent",
+            stroke: "black",
+            "stroke-width": 1,
+        });
+
+        const name = createNode("text", {
+            x: this.coords.x + this.coords.width / 2,
+            y: this.coords.y + this.coords.height / 2,
+            "dominant-baseline": "middle",
+            "text-anchor": "middle",
+        });
+
+        name.textContent = mark.getType();
+
+        current.appendChild(rect);
+        current.appendChild(name);
+    }
+
+    getSvg() {
+        return this.svg;
+    }
+
+    get _currentNode() {
+        return peek(this.nodeStack);
+    }
+}
+
+/**
+ * Adapted from: https://stackoverflow.com/a/37411738/1547896
+ *
+ * @param {string} name
+ * @param {Record<string, any>} [attributes]
+ */
+function createNode(name, attributes) {
+    const element = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        name
+    );
+    if (attributes) {
+        for (const [k, v] of Object.entries(attributes)) {
+            element.setAttributeNS(null, k, v);
+        }
+    }
+    return element;
+}

package/src/view/renderingContext/viewRenderingContext.js

@@ -0,0 +1,41 @@
+/**
+ * @typedef {import("../view").default} View
+ */
+export default class ViewRenderingContext {
+    /**
+     *
+     * @param {import("../rendering").GlobalRenderingOptions} globalOptions
+     */
+    constructor(globalOptions) {
+        this.globalOptions = globalOptions;
+    }
+
+    /**
+     * Must be called when a view's render() method is entered
+     *
+     * @param {View} view
+     * @param {import("../../utils/layout/rectangle").default} coords View coordinates
+     *      inside the padding.
+     */
+    pushView(view, coords) {
+        //
+    }
+
+    /**
+     * Must be called when a view's render() method is being exited
+     *
+     * @param {View} view
+     */
+    popView(view) {
+        //
+    }
+
+    /**
+     *
+     * @param {import("../../marks/mark").default} mark
+     * @param {import("../view").RenderingOptions} options
+     */
+    renderMark(mark, options) {
+        //
+    }
+}