@genome-spy/core 0.65.0 → 0.67.0

package/dist/src/genomeSpy/interactionController.js

@@ -0,0 +1,371 @@
+import UnitView from "../view/unitView.js";
+import { VISIT_STOP } from "../view/view.js";
+import { readPickingPixel } from "../gl/webGLHelper.js";
+import InteractionEvent from "../utils/interactionEvent.js";
+import Inertia, { makeEventTemplate } from "../utils/inertia.js";
+import Point from "../view/layout/point.js";
+import { isStillZooming } from "../view/zoom.js";
+
+export default class InteractionController {
+    /** @type {import("../view/view.js").default} */
+    #viewRoot;
+    /** @type {import("../gl/webGLHelper.js").default} */
+    #glHelper;
+    /** @type {import("../utils/ui/tooltip.js").default} */
+    #tooltip;
+    /** @type {import("../utils/animator.js").default} */
+    #animator;
+    /** @type {(type: string, event: any) => void} */
+    #emitEvent;
+    /** @type {Record<string, import("../tooltip/tooltipHandler.js").TooltipHandler>} */
+    #tooltipHandlers;
+    /** @type {() => void} */
+    #renderPickingFramebuffer;
+    /** @type {() => number} */
+    #getDevicePixelRatio;
+    /**
+     * @type {{ mark: import("../marks/mark.js").default, datum: import("../data/flowNode.js").Datum, uniqueId: number }}
+     */
+    #currentHover;
+    /** @type {Inertia} */
+    #wheelInertia;
+    /** @type {Point} */
+    #mouseDownCoords;
+    /** @type {boolean} */
+    #tooltipUpdateRequested;
+    /**
+     * @param {object} options
+     * @param {import("../view/view.js").default} options.viewRoot
+     * @param {import("../gl/webGLHelper.js").default} options.glHelper
+     * @param {import("../utils/ui/tooltip.js").default} options.tooltip
+     * @param {import("../utils/animator.js").default} options.animator
+     * @param {(type: string, event: any) => void} options.emitEvent
+     * @param {Record<string, import("../tooltip/tooltipHandler.js").TooltipHandler>} options.tooltipHandlers
+     * @param {() => void} options.renderPickingFramebuffer
+     * @param {() => number} options.getDevicePixelRatio
+     */
+    constructor({
+        viewRoot,
+        glHelper,
+        tooltip,
+        animator,
+        emitEvent,
+        tooltipHandlers,
+        renderPickingFramebuffer,
+        getDevicePixelRatio,
+    }) {
+        this.#viewRoot = viewRoot;
+        this.#glHelper = glHelper;
+        this.#tooltip = tooltip;
+        this.#animator = animator;
+        this.#emitEvent = emitEvent;
+        this.#tooltipHandlers = tooltipHandlers;
+        this.#renderPickingFramebuffer = renderPickingFramebuffer;
+        this.#getDevicePixelRatio = getDevicePixelRatio;
+
+        /**
+         * Currently hovered mark and datum
+         * @type {{ mark: import("../marks/mark.js").default, datum: import("../data/flowNode.js").Datum, uniqueId: number }}
+         */
+        this.#currentHover = undefined;
+
+        this.#wheelInertia = new Inertia(this.#animator);
+
+        /** @type {Point} */
+        this.#mouseDownCoords = undefined;
+
+        this.#tooltipUpdateRequested = false;
+    }
+
+    getCurrentHover() {
+        return this.#currentHover;
+    }
+
+    registerMouseEvents() {
+        const canvas = this.#glHelper.canvas;
+
+        let lastWheelEvent = performance.now();
+        let longPressTriggered = false;
+
+        /** @param {Event} event */
+        const listener = (event) => {
+            const now = performance.now();
+            const wheeling = now - lastWheelEvent < 200;
+
+            if (event instanceof MouseEvent) {
+                const rect = canvas.getBoundingClientRect();
+                const point = new Point(
+                    event.clientX - rect.left - canvas.clientLeft,
+                    event.clientY - rect.top - canvas.clientTop
+                );
+
+                if (event.type == "mousemove" && !wheeling) {
+                    this.#tooltip.handleMouseMove(event);
+                    this.#tooltipUpdateRequested = false;
+
+                    // Disable picking during dragging. Also postpone picking until
+                    // the user has stopped zooming as reading pixels from the
+                    // picking buffer is slow and ruins smooth animations.
+                    if (event.buttons == 0 && !isStillZooming()) {
+                        this.#renderPickingFramebuffer();
+                        this.#handlePicking(point.x, point.y);
+                    }
+                }
+
+                /**
+                 * @param {MouseEvent} dispatchedEvent
+                 */
+                const dispatchEvent = (dispatchedEvent) => {
+                    this.#viewRoot.propagateInteractionEvent(
+                        new InteractionEvent(point, dispatchedEvent)
+                    );
+
+                    if (!this.#tooltipUpdateRequested) {
+                        this.#tooltip.clear();
+                    }
+                };
+
+                if (event.type != "wheel") {
+                    this.#wheelInertia.cancel();
+                }
+
+                if (
+                    (event.type == "mousedown" || event.type == "mouseup") &&
+                    !isStillZooming()
+                ) {
+                    // Actually, only needed when clicking on a mark
+                    this.#renderPickingFramebuffer();
+                } else if (event.type == "wheel") {
+                    lastWheelEvent = now;
+                    this.#tooltipUpdateRequested = false;
+
+                    const wheelEvent = /** @type {WheelEvent} */ (event);
+
+                    if (
+                        Math.abs(wheelEvent.deltaX) >
+                        Math.abs(wheelEvent.deltaY)
+                    ) {
+                        // If the viewport is panned (horizontally) using the wheel (touchpad),
+                        // the picking buffer becomes stale and needs redrawing. However, we
+                        // optimize by just clearing the currently hovered item so that snapping
+                        // doesn't work incorrectly when zooming in/out.
+
+                        // TODO: More robust solution (handle at higher level such as ScaleResolution's zoom method)
+                        this.#currentHover = null;
+
+                        this.#wheelInertia.cancel();
+                    } else {
+                        // Vertical wheeling zooms.
+                        // We use inertia to generate fake wheel events for smoother zooming
+
+                        const template = makeEventTemplate(wheelEvent);
+
+                        this.#wheelInertia.setMomentum(
+                            wheelEvent.deltaY * (wheelEvent.deltaMode ? 80 : 1),
+                            (delta) => {
+                                const e = new WheelEvent("wheel", {
+                                    ...template,
+                                    deltaMode: 0,
+                                    deltaX: 0,
+                                    deltaY: delta,
+                                });
+                                dispatchEvent(e);
+                            }
+                        );
+
+                        wheelEvent.preventDefault();
+                        return;
+                    }
+                }
+
+                // TODO: Should be handled at the view level, not globally
+                if (event.type == "click") {
+                    if (longPressTriggered) {
+                        return;
+                    }
+
+                    const e = this.#currentHover
+                        ? {
+                              type: event.type,
+                              viewPath: this.#currentHover.mark.unitView
+                                  .getLayoutAncestors()
+                                  .map(
+                                      /** @param {import("../view/view.js").default} view */
+                                      (view) => view.name
+                                  )
+                                  .reverse(),
+                              datum: this.#currentHover.datum,
+                          }
+                        : {
+                              type: event.type,
+                              viewPath: null,
+                              datum: null,
+                          };
+
+                    this.#emitEvent("click", e);
+                }
+
+                if (
+                    event.type != "click" ||
+                    // Suppress click events if the mouse has been dragged
+                    this.#mouseDownCoords?.subtract(Point.fromMouseEvent(event))
+                        .length < 3
+                ) {
+                    dispatchEvent(event);
+                }
+            }
+        };
+
+        [
+            "mousedown",
+            "mouseup",
+            "wheel",
+            "click",
+            "mousemove",
+            "gesturechange",
+            "contextmenu",
+            "dblclick",
+        ].forEach((type) => canvas.addEventListener(type, listener));
+
+        canvas.addEventListener("mousedown", (/** @type {MouseEvent} */ e) => {
+            this.#mouseDownCoords = Point.fromMouseEvent(e);
+            if (this.#tooltip.sticky) {
+                this.#tooltip.sticky = false;
+                this.#tooltip.clear();
+                // A hack to prevent selection if the tooltip is sticky.
+                // Let the tooltip be destickified first.
+                longPressTriggered = true;
+            } else {
+                longPressTriggered = false;
+            }
+
+            const disableTooltip = () => {
+                document.addEventListener(
+                    "mouseup",
+                    () => this.#tooltip.popEnabledState(),
+                    { once: true }
+                );
+                this.#tooltip.pushEnabledState(false);
+            };
+
+            // Opening context menu or using modifier keys disables the tooltip
+            if (e.button == 2 || e.shiftKey || e.ctrlKey || e.metaKey) {
+                disableTooltip();
+            } else if (this.#tooltip.visible) {
+                // Make tooltip sticky if the user long-presses
+                const timeout = setTimeout(() => {
+                    longPressTriggered = true;
+                    this.#tooltip.sticky = true;
+                }, 400);
+
+                const clear = () => clearTimeout(timeout);
+                document.addEventListener("mouseup", clear, { once: true });
+                document.addEventListener("mousemove", clear, { once: true });
+            }
+        });
+
+        // Prevent text selections etc while dragging
+        canvas.addEventListener("dragstart", (event) =>
+            event.stopPropagation()
+        );
+
+        canvas.addEventListener("mouseout", () => {
+            this.#tooltip.clear();
+            this.#currentHover = null;
+        });
+    }
+
+    /**
+     * @param {number} x
+     * @param {number} y
+     */
+    #handlePicking(x, y) {
+        const dpr = this.#getDevicePixelRatio();
+        const pp = readPickingPixel(
+            this.#glHelper.gl,
+            this.#glHelper._pickingBufferInfo,
+            x * dpr,
+            y * dpr
+        );
+
+        const uniqueId = pp[0] | (pp[1] << 8) | (pp[2] << 16) | (pp[3] << 24);
+
+        if (uniqueId == 0) {
+            this.#currentHover = null;
+            return;
+        }
+
+        if (uniqueId !== this.#currentHover?.uniqueId) {
+            this.#currentHover = null;
+        }
+
+        if (!this.#currentHover) {
+            this.#viewRoot.visit((view) => {
+                if (view instanceof UnitView) {
+                    if (
+                        view.mark.isPickingParticipant() &&
+                        [...view.facetCoords.values()].some((coords) =>
+                            coords.containsPoint(x, y)
+                        )
+                    ) {
+                        const datum = view
+                            .getCollector()
+                            .findDatumByUniqueId(uniqueId);
+                        if (datum) {
+                            this.#currentHover = {
+                                mark: view.mark,
+                                datum,
+                                uniqueId,
+                            };
+                        }
+                    }
+                    if (this.#currentHover) {
+                        return VISIT_STOP;
+                    }
+                }
+            });
+        }
+
+        if (this.#currentHover) {
+            const mark = this.#currentHover.mark;
+            this.updateTooltip(this.#currentHover.datum, async (datum) => {
+                if (!mark.isPickingParticipant()) {
+                    return;
+                }
+
+                const tooltipProps = mark.properties.tooltip;
+
+                if (tooltipProps !== null) {
+                    const handlerName = tooltipProps?.handler ?? "default";
+                    const handler = this.#tooltipHandlers[handlerName];
+                    if (!handler) {
+                        throw new Error(
+                            "No such tooltip handler: " + handlerName
+                        );
+                    }
+
+                    return handler(datum, mark, tooltipProps?.params);
+                }
+            });
+        }
+    }
+
+    /**
+     * This method should be called in a mouseMove handler. If not called, the
+     * tooltip will be hidden.
+     *
+     * @param {T} datum
+     * @param {function(T):Promise<string | HTMLElement | import("lit").TemplateResult>} [converter]
+     * @template T
+     */
+    updateTooltip(datum, converter) {
+        if (!this.#tooltipUpdateRequested || !datum) {
+            this.#tooltip.updateWithDatum(datum, converter);
+            this.#tooltipUpdateRequested = true;
+        } else {
+            throw new Error(
+                "Tooltip has already been updated! Duplicate event handler?"
+            );
+        }
+    }
+}

package/dist/src/genomeSpy/keyboardListenerManager.d.ts

@@ -0,0 +1,10 @@
+export default class KeyboardListenerManager {
+    /**
+     * @param {"keydown" | "keyup"} type
+     * @param {(event: KeyboardEvent) => void} listener
+     */
+    add(type: "keydown" | "keyup", listener: (event: KeyboardEvent) => void): void;
+    removeAll(): void;
+    #private;
+}
+//# sourceMappingURL=keyboardListenerManager.d.ts.map

package/dist/src/genomeSpy/keyboardListenerManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardListenerManager.d.ts","sourceRoot":"","sources":["../../../src/genomeSpy/keyboardListenerManager.js"],"names":[],"mappings":"AAAA;IAQI;;;OAGG;IACH,UAHW,SAAS,GAAG,OAAO,YACnB,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,QAUxC;IAED,kBAOC;;CACJ"}

package/dist/src/genomeSpy/keyboardListenerManager.js

@@ -0,0 +1,31 @@
+export default class KeyboardListenerManager {
+    /** @type {Map<string, (function(KeyboardEvent):void)[]>} */
+    #listeners;
+
+    constructor() {
+        this.#listeners = new Map();
+    }
+
+    /**
+     * @param {"keydown" | "keyup"} type
+     * @param {(event: KeyboardEvent) => void} listener
+     */
+    add(type, listener) {
+        document.addEventListener(type, listener);
+        let listeners = this.#listeners.get(type);
+        if (!listeners) {
+            listeners = [];
+            this.#listeners.set(type, listeners);
+        }
+        listeners.push(listener);
+    }
+
+    removeAll() {
+        for (const [type, listeners] of this.#listeners) {
+            for (const listener of listeners) {
+                document.removeEventListener(type, listener);
+            }
+        }
+        this.#listeners.clear();
+    }
+}

package/dist/src/genomeSpy/loadingIndicatorManager.d.ts

@@ -0,0 +1,15 @@
+export default class LoadingIndicatorManager {
+    /**
+     * @param {HTMLElement} loadingIndicatorsElement
+     */
+    constructor(loadingIndicatorsElement: HTMLElement);
+    /**
+     * @param {import("../view/view.js").default} view
+     * @param {import("../types/viewContext.js").DataLoadingStatus} status
+     * @param {string} [detail]
+     */
+    setDataLoadingStatus(view: import("../view/view.js").default, status: import("../types/viewContext.js").DataLoadingStatus, detail?: string): void;
+    updateLayout(): void;
+    #private;
+}
+//# sourceMappingURL=loadingIndicatorManager.d.ts.map

package/dist/src/genomeSpy/loadingIndicatorManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadingIndicatorManager.d.ts","sourceRoot":"","sources":["../../../src/genomeSpy/loadingIndicatorManager.js"],"names":[],"mappings":"AAIA;IAQI;;OAEG;IACH,sCAFW,WAAW,EASrB;IAED;;;;OAIG;IACH,2BAJW,OAAO,iBAAiB,EAAE,OAAO,UACjC,OAAO,yBAAyB,EAAE,iBAAiB,WACnD,MAAM,QAKhB;IAED,qBAwDC;;CACJ"}

package/dist/src/genomeSpy/loadingIndicatorManager.js

@@ -0,0 +1,92 @@
+import { html, nothing, render } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import SPINNER from "../img/90-ring-with-bg.svg";
+
+export default class LoadingIndicatorManager {
+    /** @type {HTMLElement} */
+    #loadingIndicatorsElement;
+    /**
+     * @type {Map<import("../view/view.js").default, { status: import("../types/viewContext.js").DataLoadingStatus, detail?: string }>}
+     */
+    #loadingViews;
+
+    /**
+     * @param {HTMLElement} loadingIndicatorsElement
+     */
+    constructor(loadingIndicatorsElement) {
+        this.#loadingIndicatorsElement = loadingIndicatorsElement;
+
+        /**
+         * @type {Map<import("../view/view.js").default, { status: import("../types/viewContext.js").DataLoadingStatus, detail?: string }>}
+         */
+        this.#loadingViews = new Map();
+    }
+
+    /**
+     * @param {import("../view/view.js").default} view
+     * @param {import("../types/viewContext.js").DataLoadingStatus} status
+     * @param {string} [detail]
+     */
+    setDataLoadingStatus(view, status, detail) {
+        this.#loadingViews.set(view, { status, detail });
+        this.updateLayout();
+    }
+
+    updateLayout() {
+        /** @type {import("lit").TemplateResult[]} */
+        const indicators = [];
+
+        const isSomethingVisible = () =>
+            [...this.#loadingViews.values()].some(
+                (v) => v.status == "loading" || v.status == "error"
+            );
+
+        for (const [view, status] of this.#loadingViews) {
+            const c = view.coords;
+            if (c) {
+                const style = {
+                    left: `${c.x}px`,
+                    top: `${c.y}px`,
+                    width: `${c.width}px`,
+                    height: `${c.height}px`,
+                };
+                indicators.push(
+                    html`<div style=${styleMap(style)}>
+                        <div class=${status.status}>
+                            ${status.status == "error"
+                                ? html`<span
+                                      >Loading
+                                      failed${status.detail
+                                          ? html`: ${status.detail}`
+                                          : nothing}</span
+                                  >`
+                                : html`
+                                      <img src="${SPINNER}" alt="" />
+                                      <span>Loading...</span>
+                                  `}
+                        </div>
+                    </div>`
+                );
+            }
+        }
+
+        // Do some hacks to stop css animations of the loading indicators.
+        // Otherwise they fire animation frames even when their opacity is zero.
+        // TODO: Instead of this, replace the animated spinners with static images.
+        // Or even better, once more widely supported, use `allow-discrete`
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior
+        // to enable transition of the display property.
+        if (isSomethingVisible()) {
+            this.#loadingIndicatorsElement.style.display = "block";
+        } else {
+            // TODO: Clear previous timeout
+            setTimeout(() => {
+                if (!isSomethingVisible()) {
+                    this.#loadingIndicatorsElement.style.display = "none";
+                }
+            }, 3000);
+        }
+
+        render(indicators, this.#loadingIndicatorsElement);
+    }
+}

package/dist/src/genomeSpy/renderCoordinator.d.ts

@@ -0,0 +1,22 @@
+export default class RenderCoordinator {
+    /**
+     * @param {object} options
+     * @param {import("../view/view.js").default} options.viewRoot
+     * @param {import("../gl/webGLHelper.js").default} options.glHelper
+     * @param {() => string} options.getBackground
+     * @param {(type: import("../genomeSpy.js").BroadcastEventType, payload?: any) => void} options.broadcast
+     * @param {() => void} options.onLayoutComputed
+     */
+    constructor({ viewRoot, glHelper, getBackground, broadcast, onLayoutComputed, }: {
+        viewRoot: import("../view/view.js").default;
+        glHelper: import("../gl/webGLHelper.js").default;
+        getBackground: () => string;
+        broadcast: (type: import("../genomeSpy.js").BroadcastEventType, payload?: any) => void;
+        onLayoutComputed: () => void;
+    });
+    computeLayout(): void;
+    renderAll(): void;
+    renderPickingFramebuffer(): void;
+    #private;
+}
+//# sourceMappingURL=renderCoordinator.d.ts.map

package/dist/src/genomeSpy/renderCoordinator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderCoordinator.d.ts","sourceRoot":"","sources":["../../../src/genomeSpy/renderCoordinator.js"],"names":[],"mappings":"AAIA;IAiBI;;;;;;;OAOG;IACH,iFANG;QAAmD,QAAQ,EAAnD,OAAO,iBAAiB,EAAE,OAAO;QACe,QAAQ,EAAxD,OAAO,sBAAsB,EAAE,OAAO;QAChB,aAAa,EAAnC,MAAM,MAAM;QACyE,SAAS,EAA9F,CAAC,IAAI,EAAE,OAAO,iBAAiB,EAAE,kBAAkB,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI;QACvD,gBAAgB,EAApC,MAAM,IAAI;KACpB,EAqBA;IAED,sBAkDC;IAED,kBAIC;IAED,iCAOC;;CACJ"}

package/dist/src/genomeSpy/renderCoordinator.js

@@ -0,0 +1,118 @@
+import BufferedViewRenderingContext from "../view/renderingContext/bufferedViewRenderingContext.js";
+import CompositeViewRenderingContext from "../view/renderingContext/compositeViewRenderingContext.js";
+import Rectangle from "../view/layout/rectangle.js";
+
+export default class RenderCoordinator {
+    /** @type {import("../view/view.js").default} */
+    #viewRoot;
+    /** @type {import("../gl/webGLHelper.js").default} */
+    #glHelper;
+    /** @type {() => string} */
+    #getBackground;
+    /** @type {(type: import("../genomeSpy.js").BroadcastEventType, payload?: any) => void} */
+    #broadcast;
+    /** @type {() => void} */
+    #onLayoutComputed;
+    /** @type {BufferedViewRenderingContext} */
+    #renderingContext;
+    /** @type {BufferedViewRenderingContext} */
+    #pickingContext;
+    /** @type {boolean} */
+    #dirtyPickingBuffer;
+    /**
+     * @param {object} options
+     * @param {import("../view/view.js").default} options.viewRoot
+     * @param {import("../gl/webGLHelper.js").default} options.glHelper
+     * @param {() => string} options.getBackground
+     * @param {(type: import("../genomeSpy.js").BroadcastEventType, payload?: any) => void} options.broadcast
+     * @param {() => void} options.onLayoutComputed
+     */
+    constructor({
+        viewRoot,
+        glHelper,
+        getBackground,
+        broadcast,
+        onLayoutComputed,
+    }) {
+        this.#viewRoot = viewRoot;
+        this.#glHelper = glHelper;
+        this.#getBackground = getBackground;
+        this.#broadcast = broadcast;
+        this.#onLayoutComputed = onLayoutComputed;
+
+        /** @type {BufferedViewRenderingContext} */
+        this.#renderingContext = undefined;
+        /** @type {BufferedViewRenderingContext} */
+        this.#pickingContext = undefined;
+
+        /** Does picking buffer need to be rendered again */
+        this.#dirtyPickingBuffer = false;
+    }
+
+    computeLayout() {
+        const root = this.#viewRoot;
+        if (!root) {
+            return;
+        }
+
+        this.#broadcast("layout");
+
+        const canvasSize = this.#glHelper.getLogicalCanvasSize();
+
+        if (isNaN(canvasSize.width) || isNaN(canvasSize.height)) {
+            // TODO: Figure out what causes this
+            console.log(
+                `NaN in canvas size: ${canvasSize.width}x${canvasSize.height}. Skipping computeLayout().`
+            );
+            return;
+        }
+
+        const commonOptions = {
+            webGLHelper: this.#glHelper,
+            canvasSize,
+            devicePixelRatio: window.devicePixelRatio ?? 1,
+        };
+
+        this.#renderingContext = new BufferedViewRenderingContext(
+            { picking: false },
+            {
+                ...commonOptions,
+                clearColor: this.#getBackground(),
+            }
+        );
+        this.#pickingContext = new BufferedViewRenderingContext(
+            { picking: true },
+            {
+                ...commonOptions,
+                framebufferInfo: this.#glHelper._pickingBufferInfo,
+            }
+        );
+
+        root.render(
+            new CompositeViewRenderingContext(
+                this.#renderingContext,
+                this.#pickingContext
+            ),
+            // Canvas should now be sized based on the root view or the container
+            Rectangle.create(0, 0, canvasSize.width, canvasSize.height)
+        );
+
+        this.#onLayoutComputed();
+        this.#broadcast("layoutComputed");
+    }
+
+    renderAll() {
+        this.#renderingContext?.render();
+
+        this.#dirtyPickingBuffer = true;
+    }
+
+    renderPickingFramebuffer() {
+        if (!this.#dirtyPickingBuffer) {
+            return;
+        }
+
+        this.#pickingContext.render();
+        this.#dirtyPickingBuffer = false;
+    }
+}