@genome-spy/core 0.65.0 → 0.66.1

package/dist/src/genomeSpy.js

@@ -1,43 +1,37 @@
 import { formats as vegaFormats } from "vega-loader";
-import { html, nothing, render } from "lit";
-import { styleMap } from "lit/directives/style-map.js";
-import SPINNER from "./img/90-ring-with-bg.svg";
-
-import css from "./styles/genome-spy.css.js";
-import Tooltip from "./utils/ui/tooltip.js";
 
 import {
-    checkForDuplicateScaleNames,
-    setImplicitScaleNames,
-    calculateCanvasSize,
-    finalizeSubtreeGraphics,
-} from "./view/viewUtils.js";
-import { initializeViewSubtree, loadViewSubtreeData } from "./data/flowInit.js";
+    createContainerUi,
+    createMessageBox,
+} from "./genomeSpy/containerUi.js";
+import LoadingIndicatorManager from "./genomeSpy/loadingIndicatorManager.js";
+import { createViewHighlighter } from "./genomeSpy/viewHighlight.js";
+import KeyboardListenerManager from "./genomeSpy/keyboardListenerManager.js";
+import EventListenerRegistry from "./genomeSpy/eventListenerRegistry.js";
+import InputBindingManager from "./genomeSpy/inputBindingManager.js";
+
+import { calculateCanvasSize } from "./view/viewUtils.js";
+import { initializeViewData } from "./genomeSpy/viewDataInit.js";
 import UnitView from "./view/unitView.js";
 
-import WebGLHelper, {
-    framebufferToDataUrl,
-    readPickingPixel,
-} from "./gl/webGLHelper.js";
-import Rectangle from "./view/layout/rectangle.js";
-import BufferedViewRenderingContext from "./view/renderingContext/bufferedViewRenderingContext.js";
-import CompositeViewRenderingContext from "./view/renderingContext/compositeViewRenderingContext.js";
-import InteractionEvent from "./utils/interactionEvent.js";
-import Point from "./view/layout/point.js";
+import WebGLHelper from "./gl/webGLHelper.js";
 import Animator from "./utils/animator.js";
 import DataFlow from "./data/dataFlow.js";
 import GenomeStore from "./genome/genomeStore.js";
 import BmFontManager from "./fonts/bmFontManager.js";
 import fasta from "./data/formats/fasta.js";
-import { VISIT_STOP } from "./view/view.js";
-import Inertia, { makeEventTemplate } from "./utils/inertia.js";
 import refseqGeneTooltipHandler from "./tooltip/refseqGeneTooltipHandler.js";
 import dataTooltipHandler from "./tooltip/dataTooltipHandler.js";
 import { invalidatePrefix } from "./utils/propertyCacher.js";
 import { VIEW_ROOT_NAME, ViewFactory } from "./view/viewFactory.js";
-import createBindingInputs from "./utils/inputBinding.js";
-import { isStillZooming } from "./view/zoom.js";
-import { createFramebufferInfo } from "twgl.js";
+import InteractionController from "./genomeSpy/interactionController.js";
+import RenderCoordinator from "./genomeSpy/renderCoordinator.js";
+import { createViewContext } from "./genomeSpy/viewContextFactory.js";
+import {
+    configureViewHierarchy,
+    configureViewOpacity,
+} from "./genomeSpy/viewHierarchyConfig.js";
+import { exportCanvas } from "./genomeSpy/canvasExport.js";
 
 /**
  * Events that are broadcasted to all views.
@@ -47,6 +41,23 @@ import { createFramebufferInfo } from "twgl.js";
 vegaFormats("fasta", fasta);
 
 export default class GenomeSpy {
+    /** @type {(() => void)[]} */
+    #destructionCallbacks = [];
+    /** @type {RenderCoordinator} */
+    #renderCoordinator;
+    /** @type {LoadingIndicatorManager} */
+    #loadingIndicatorManager;
+    /** @type {InputBindingManager} */
+    #inputBindingManager;
+    /** @type {InteractionController} */
+    #interactionController;
+    /** @type {WebGLHelper} */
+    #glHelper;
+
+    #keyboardListenerManager = new KeyboardListenerManager();
+    #eventListeners = new EventListenerRegistry();
+    #extraBroadcastListeners = new EventListenerRegistry();
+
     /**
      * @typedef {import("./view/view.js").default} View
      * @typedef {import("./spec/view.js").ViewSpec} ViewSpec
@@ -66,9 +77,6 @@ export default class GenomeSpy {
 
         options.inputBindingContainer ??= "default";
 
-        /** @type {(() => void)[]} */
-        this._destructionCallbacks = [];
-
         /** Root level configuration object */
         this.spec = spec;
 
@@ -90,43 +98,6 @@ export default class GenomeSpy {
          */
         this.viewVisibilityPredicate = (view) => view.isVisibleInSpec();
 
-        /** @type {BufferedViewRenderingContext} */
-        this._renderingContext = undefined;
-        /** @type {BufferedViewRenderingContext} */
-        this._pickingContext = undefined;
-
-        /** Does picking buffer need to be rendered again */
-        this._dirtyPickingBuffer = false;
-
-        /**
-         * 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);
-
-        /**
-         * Keeping track so that these can be cleaned up upon finalization.
-         * @type {Map<string, (function(KeyboardEvent):void)[]>}
-         */
-        this._keyboardListeners = new Map();
-
-        /**
-         * Listers for exposed high-level events such as click on a mark instance.
-         * These should probably be in the View class and support bubbling through
-         * the hierarchy.
-         *
-         * @type {Map<string, Set<(event: any) => void>>}
-         */
-        this._eventListeners = new Map();
-
-        /**
-         *
-         * @type {Map<string, Set<(event: any) => void>>}
-         */
-        this._extraBroadcastListeners = new Map();
-
         /** @type {Record<string, import("./tooltip/tooltipHandler.js").TooltipHandler>}> */
         this.tooltipHandlers = {
             default: dataTooltipHandler,
@@ -137,20 +108,7 @@ export default class GenomeSpy {
         /** @type {View} */
         this.viewRoot = undefined;
 
-        /**
-         * Views that are currently loading data using lazy sources.
-         *
-         * @type {Map<View, { status: import("./types/viewContext.js").DataLoadingStatus, detail?: string }>}
-         */
-        this._loadingViews = new Map();
-
-        /**
-         * @type {HTMLElement}
-         */
-        this._inputBindingContainer = undefined;
-
-        /** @type {Point} */
-        this._mouseDownCoords = undefined;
+        this.#inputBindingManager = new InputBindingManager(container, options);
 
         this.dpr = window.devicePixelRatio;
     }
@@ -162,37 +120,7 @@ export default class GenomeSpy {
     }
 
     #initializeParameterBindings() {
-        /** @type {import("lit").TemplateResult[]} */
-        const inputs = [];
-
-        this.viewRoot.visit((view) => {
-            const mediator = view.paramMediator;
-            inputs.push(...createBindingInputs(mediator));
-        });
-        const ibc = this.options.inputBindingContainer;
-
-        if (!ibc || ibc == "none" || !inputs.length) {
-            return;
-        }
-
-        this._inputBindingContainer = element("div", {
-            className: "gs-input-bindings",
-        });
-
-        if (ibc == "default") {
-            this.container.appendChild(this._inputBindingContainer);
-        } else if (ibc instanceof HTMLElement) {
-            ibc.appendChild(this._inputBindingContainer);
-        } else {
-            throw new Error("Invalid inputBindingContainer");
-        }
-
-        if (inputs.length) {
-            render(
-                html`<div class="gs-input-binding">${inputs}</div>`,
-                this._inputBindingContainer
-            );
-        }
+        this.#inputBindingManager.initialize(this.viewRoot);
     }
 
     /**
@@ -232,6 +160,22 @@ export default class GenomeSpy {
         this.animator.requestRender();
     }
 
+    /**
+     * @param {string} type
+     * @param {(event: any) => void} listener
+     */
+    addEventListener(type, listener) {
+        this.#eventListeners.add(type, listener);
+    }
+
+    /**
+     * @param {string} type
+     * @param {(event: any) => void} listener
+     */
+    removeEventListener(type, listener) {
+        this.#eventListeners.remove(type, listener);
+    }
+
     /**
      * Broadcast a message to all views
      
@@ -241,71 +185,7 @@ export default class GenomeSpy {
     broadcast(type, payload) {
         const message = { type, payload };
         this.viewRoot.visit((view) => view.handleBroadcast(message));
-        this._extraBroadcastListeners
-            .get(type)
-            ?.forEach((listener) => listener(message));
-    }
-
-    /**
-     * Draw some layers on top of the canvas. It's easier to do fancy spinning
-     * animations with html elements than with WebGL.
-     */
-    _updateLoadingIndicators() {
-        /** @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);
+        this.#extraBroadcastListeners.emit(type, message);
     }
 
     #setupDpr() {
@@ -315,7 +195,7 @@ export default class GenomeSpy {
         );
 
         const resizeCallback = () => {
-            this._glHelper.invalidateSize();
+            this.#glHelper.invalidateSize();
             this.dpr = window.devicePixelRatio;
             dprSetter(this.dpr);
             this.computeLayout();
@@ -327,7 +207,7 @@ export default class GenomeSpy {
             // TODO: Size should be observed only if the content is not absolutely sized
             const resizeObserver = new ResizeObserver(resizeCallback);
             resizeObserver.observe(this.container);
-            this._destructionCallbacks.push(() => resizeObserver.disconnect());
+            this.#destructionCallbacks.push(() => resizeObserver.disconnect());
         }
 
         /** @type {() => void} */
@@ -349,25 +229,19 @@ export default class GenomeSpy {
         updatePixelRatio();
 
         if (remove) {
-            this._destructionCallbacks.push(remove);
+            this.#destructionCallbacks.push(remove);
         }
     }
 
     #prepareContainer() {
-        this.container.classList.add("genome-spy");
-
-        const styleElement = document.createElement("style");
-        styleElement.innerHTML = css;
-        this.container.appendChild(styleElement);
-
-        const canvasWrapper = element("div", {
-            class: "canvas-wrapper",
-        });
-        this.container.appendChild(canvasWrapper);
-
-        canvasWrapper.classList.add("loading");
+        const {
+            canvasWrapper,
+            loadingMessageElement,
+            loadingIndicatorsElement,
+            tooltip,
+        } = createContainerUi(this.container);
 
-        this._glHelper = new WebGLHelper(
+        this.#glHelper = new WebGLHelper(
             canvasWrapper,
             () =>
                 this.viewRoot
@@ -377,30 +251,16 @@ export default class GenomeSpy {
         );
 
         // The initial loading message that is shown until the first frame is rendered
-        this.loadingMessageElement = element("div", {
-            class: "loading-message",
-            innerHTML: `<div class="message">Loading<span class="ellipsis">...</span></div>`,
-        });
-        canvasWrapper.appendChild(this.loadingMessageElement);
-
+        this.loadingMessageElement = loadingMessageElement;
         // A container for loading indicators (for lazy data sources.)
         // These could alternatively be included in the view hierarchy,
         // but it's easier this way – particularly if we want to show
         // some fancy animated spinners.
-        this.loadingIndicatorsElement = element("div", {
-            class: "loading-indicators",
-        });
-        canvasWrapper.appendChild(this.loadingIndicatorsElement);
-
-        this.tooltip = new Tooltip(this.container);
-
-        this.loadingMessageElement
-            .querySelector(".message")
-            .addEventListener("transitionend", () => {
-                /** @type {HTMLElement} */ (
-                    this.loadingMessageElement
-                ).style.display = "none";
-            });
+        this.loadingIndicatorsElement = loadingIndicatorsElement;
+        this.tooltip = tooltip;
+        this.#loadingIndicatorManager = new LoadingIndicatorManager(
+            loadingIndicatorsElement
+        );
     }
 
     /**
@@ -414,128 +274,91 @@ export default class GenomeSpy {
         this.container.classList.remove("genome-spy");
         canvasWrapper.classList.remove("loading");
 
-        for (const [type, listeners] of this._keyboardListeners) {
-            for (const listener of listeners) {
-                document.removeEventListener(type, listener);
-            }
-        }
+        this.#keyboardListenerManager.removeAll();
 
-        this._destructionCallbacks.forEach((callback) => callback());
+        this.#destructionCallbacks.forEach((callback) => callback());
 
-        this._glHelper.finalize();
+        this.#glHelper.finalize();
 
-        this._inputBindingContainer?.remove();
+        this.#inputBindingManager.remove();
 
         while (this.container.firstChild) {
             this.container.firstChild.remove();
         }
     }
 
-    async _prepareViewsAndData() {
+    async #prepareViewsAndData() {
+        await this.#initializeGenomeStore();
+        const context = this.#createViewContext();
+        await this.#initializeViewHierarchy(context);
+        await initializeViewData(
+            this.viewRoot,
+            context.dataFlow,
+            context.fontManager,
+            (flow) => this.broadcast("dataFlowBuilt", flow)
+        );
+        this.#finalizeViewInitialization(context);
+    }
+
+    async #initializeGenomeStore() {
         if (this.spec.genome) {
             this.genomeStore = new GenomeStore(this.spec.baseUrl);
             await this.genomeStore.initialize(this.spec.genome);
         }
+    }
 
-        // eslint-disable-next-line consistent-this
-        const self = this;
-
-        /** @type {import("./types/viewContext.js").default} */
-        const context = {
+    #createViewContext() {
+        return createViewContext({
             dataFlow: new DataFlow(),
-            glHelper: this._glHelper,
+            glHelper: this.#glHelper,
             animator: this.animator,
             genomeStore: this.genomeStore,
-            fontManager: new BmFontManager(this._glHelper),
-
-            requestLayoutReflow: () => {
-                // placeholder
-            },
+            fontManager: new BmFontManager(this.#glHelper),
             updateTooltip: this.updateTooltip.bind(this),
             getNamedDataFromProvider: this.getNamedDataFromProvider.bind(this),
-            getCurrentHover: () => this._currentHover,
-
-            setDataLoadingStatus: (view, status, detail) => {
-                this._loadingViews.set(view, { status, detail });
-                this._updateLoadingIndicators();
-            },
-
+            getCurrentHover: () =>
+                this.#interactionController.getCurrentHover(),
+            setDataLoadingStatus: (view, status, detail) =>
+                this.#loadingIndicatorManager.setDataLoadingStatus(
+                    view,
+                    status,
+                    detail
+                ),
             addKeyboardListener: (type, listener) => {
                 // TODO: Listeners should be called only when the mouse pointer is inside the
                 // container or the app covers the full document.
-                document.addEventListener(type, listener);
-                let listeners = this._keyboardListeners.get(type);
-                if (!listeners) {
-                    listeners = [];
-                    this._keyboardListeners.set(type, listeners);
-                }
-                listeners.push(listener);
-            },
-
-            addBroadcastListener(type, listener) {
-                const listenersByType = self._extraBroadcastListeners;
-
-                // Copy-paste code. TODO: Refactor into a helper function.
-                let listeners = listenersByType.get(type);
-                if (!listeners) {
-                    listeners = new Set();
-                    listenersByType.set(type, listeners);
-                }
-
-                listeners.add(listener);
+                this.#keyboardListenerManager.add(type, listener);
             },
-
-            removeBroadcastListener(type, listener) {
-                const listenersByType = self._extraBroadcastListeners;
-
-                listenersByType.get(type)?.delete(listener);
-            },
-
-            isViewConfiguredVisible: self.viewVisibilityPredicate,
-
-            isViewSpec: (spec) => self.viewFactory.isViewSpec(spec),
-
-            createOrImportView: async function (
+            addBroadcastListener: (type, listener) =>
+                this.#extraBroadcastListeners.add(type, listener),
+            removeBroadcastListener: (type, listener) =>
+                this.#extraBroadcastListeners.remove(type, listener),
+            isViewConfiguredVisible: this.viewVisibilityPredicate,
+            isViewSpec: (spec) => this.viewFactory.isViewSpec(spec),
+            createOrImportViewWithContext: (
+                ctx,
                 spec,
                 layoutParent,
                 dataParent,
                 defaultName,
                 validator
-            ) {
-                return self.viewFactory.createOrImportView(
+            ) =>
+                this.viewFactory.createOrImportView(
                     spec,
-                    context,
+                    ctx,
                     layoutParent,
                     dataParent,
                     defaultName,
                     validator
-                );
-            },
-
-            highlightView: (view) => {
-                this.container.querySelector(".view-highlight")?.remove();
-                if (view) {
-                    if (!view.isConfiguredVisible()) {
-                        return;
-                    }
-                    const coords = view.coords;
-                    if (coords) {
-                        const div = document.createElement("div");
-                        div.className = "view-highlight";
-                        div.style.position = "absolute";
-                        div.style.left = coords.x + "px";
-                        div.style.top = coords.y + "px";
-                        div.style.width = coords.width + "px";
-                        div.style.height = coords.height + "px";
-                        div.style.border = "1px solid green";
-                        div.style.backgroundColor = "rgba(0, 255, 0, 0.1)";
-                        div.style.pointerEvents = "none";
-                        this.container.appendChild(div);
-                    }
-                }
-            },
-        };
+                ),
+            highlightView: createViewHighlighter(this.container),
+        });
+    }
 
+    /**
+     * @param {import("./types/viewContext.js").default} context
+     */
+    async #initializeViewHierarchy(context) {
         /** @type {ViewSpec & RootConfig} */
         const rootSpec = this.spec;
 
@@ -557,47 +380,51 @@ export default class GenomeSpy {
 
         this.#initializeParameterBindings();
 
-        checkForDuplicateScaleNames(this.viewRoot);
-
-        setImplicitScaleNames(this.viewRoot);
-
-        const views = this.viewRoot.getDescendants();
-
-        // View opacity should be configured after all scales have been resolved.
-        // Currently this doesn't work if new views are added dynamically.
-        // TODO: Figure out how to handle dynamic view addition/removal nicely.
-        views.forEach((view) => view.configureViewOpacity());
+        configureViewHierarchy(this.viewRoot);
+        configureViewOpacity(this.viewRoot);
 
         // We should now have a complete view hierarchy. Let's update the canvas size
         // and ensure that the loading message is visible.
-        this._glHelper.invalidateSize();
-        this.#setupDpr();
-
-        const { dataFlow, graphicsPromises } = initializeViewSubtree(
-            this.viewRoot,
-            context.dataFlow
-        );
-        this.broadcast("dataFlowBuilt", dataFlow);
-
-        // Have to wait until asynchronous font loading is complete.
-        // Text mark's geometry builder needs font metrics before data can be
-        // converted into geometries.
-        // TODO: Make updateGraphicsData async and await font loading there.
-        await context.fontManager.waitUntilReady();
+        this.#glHelper.invalidateSize();
+        this.#renderCoordinator = new RenderCoordinator({
+            viewRoot: this.viewRoot,
+            glHelper: this.#glHelper,
+            getBackground: () => this.spec.background,
+            broadcast: this.broadcast.bind(this),
+            onLayoutComputed: () =>
+                this.#loadingIndicatorManager.updateLayout(),
+        });
 
-        // Find all data sources and initiate loading.
-        await loadViewSubtreeData(this.viewRoot, new Set(dataFlow.dataSources));
+        // Allow early layout requests from view subscriptions created during initialization.
+        // Layout will be recomputed anyway once launch completes.
+        context.requestLayoutReflow = this.computeLayout.bind(this);
 
-        await finalizeSubtreeGraphics(graphicsPromises);
+        this.#setupDpr();
+    }
 
-        // Allow layout computation
+    /**
+     * @param {import("./types/viewContext.js").default} context
+     */
+    #finalizeViewInitialization(context) {
+        // Allow layout computation (in case a custom context overrode the early assignment).
         // eslint-disable-next-line require-atomic-updates
         context.requestLayoutReflow = this.computeLayout.bind(this);
 
         // Invalidate cached sizes to ensure that step-based sizes are current.
         // TODO: This should be done automatically when the domains of band/point scales are updated.
         this.viewRoot.visit((view) => invalidatePrefix(view, "size"));
-        this._glHelper.invalidateSize();
+        this.#glHelper.invalidateSize();
+
+        this.#interactionController = new InteractionController({
+            viewRoot: this.viewRoot,
+            glHelper: this.#glHelper,
+            tooltip: this.tooltip,
+            animator: this.animator,
+            emitEvent: this.#eventListeners.emit.bind(this.#eventListeners),
+            tooltipHandlers: this.tooltipHandlers,
+            renderPickingFramebuffer: this.renderPickingFramebuffer.bind(this),
+            getDevicePixelRatio: () => this.dpr,
+        });
     }
 
     /**
@@ -608,7 +435,7 @@ export default class GenomeSpy {
         try {
             this.#prepareContainer();
 
-            await this._prepareViewsAndData();
+            await this.#prepareViewsAndData();
 
             this.registerMouseEvents();
 
@@ -621,7 +448,10 @@ export default class GenomeSpy {
                 reason.view ? `At "${reason.view.getPathString()}": ` : ""
             }${reason.toString()}`;
             console.error(reason.stack);
-            createMessageBox(this.container, message);
+            const handled = this.options.onError?.(reason, this.container);
+            if (!handled) {
+                createMessageBox(this.container, message);
+            }
 
             return false;
         } finally {
@@ -634,276 +464,7 @@ export default class GenomeSpy {
     }
 
     registerMouseEvents() {
-        const canvas = this._glHelper.canvas;
-
-        // TODO: This function is huge. Refactor this into a separate class
-        // that would also contain state-related stuff that currently pollute the
-        // GenomeSpy class.
-
-        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} event
-                 */
-                const dispatchEvent = (event) => {
-                    this.viewRoot.propagateInteractionEvent(
-                        new InteractionEvent(point, event)
-                    );
-
-                    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((view) => view.name)
-                                  .reverse(),
-                              datum: this._currentHover.datum,
-                          }
-                        : {
-                              type: event.type,
-                              viewPath: null,
-                              datum: null,
-                          };
-
-                    this._eventListeners
-                        .get("click")
-                        ?.forEach((listener) => listener(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.dpr;
-        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.#interactionController.registerMouseEvents();
     }
 
     /**
@@ -915,14 +476,7 @@ export default class GenomeSpy {
      * @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?"
-            );
-        }
+        this.#interactionController.updateTooltip(datum, converter);
     }
 
     /**
@@ -940,49 +494,14 @@ export default class GenomeSpy {
         devicePixelRatio,
         clearColor = "white"
     ) {
-        const helper = this._glHelper;
-
-        logicalWidth ??= helper.getLogicalCanvasSize().width;
-        logicalHeight ??= helper.getLogicalCanvasSize().height;
-        devicePixelRatio ??= window.devicePixelRatio ?? 1;
-
-        const gl = helper.gl;
-
-        const width = Math.floor(logicalWidth * devicePixelRatio);
-        const height = Math.floor(logicalHeight * devicePixelRatio);
-
-        const framebufferInfo = createFramebufferInfo(
-            gl,
-            [
-                {
-                    format: gl.RGBA,
-                    type: gl.UNSIGNED_BYTE,
-                    minMag: gl.LINEAR,
-                    wrap: gl.CLAMP_TO_EDGE,
-                },
-            ],
-            width,
-            height
-        );
-
-        const renderingContext = new BufferedViewRenderingContext(
-            { picking: false },
-            {
-                webGLHelper: this._glHelper,
-                canvasSize: { width: logicalWidth, height: logicalHeight },
-                devicePixelRatio,
-                clearColor,
-                framebufferInfo,
-            }
-        );
-
-        this.viewRoot.render(
-            renderingContext,
-            Rectangle.create(0, 0, logicalWidth, logicalHeight)
-        );
-        renderingContext.render();
-
-        const pngUrl = framebufferToDataUrl(gl, framebufferInfo, "image/png");
+        const pngUrl = exportCanvas({
+            glHelper: this.#glHelper,
+            viewRoot: this.viewRoot,
+            logicalWidth,
+            logicalHeight,
+            devicePixelRatio,
+            clearColor,
+        });
 
         // Clean up
         this.computeLayout();
@@ -991,74 +510,20 @@ export default class GenomeSpy {
         return pngUrl;
     }
 
-    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.spec.background,
-            }
-        );
-        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)
-        );
-
-        // The view coordinates may have not been known during the initial data loading.
-        // Thus, update them so that possible error messages are shown in the correct place.
-        this._updateLoadingIndicators();
+    getLogicalCanvasSize() {
+        return this.#glHelper.getLogicalCanvasSize();
+    }
 
-        this.broadcast("layoutComputed");
+    computeLayout() {
+        this.#renderCoordinator.computeLayout();
     }
 
     renderAll() {
-        this._renderingContext?.render();
-
-        this._dirtyPickingBuffer = true;
+        this.#renderCoordinator.renderAll();
     }
 
     renderPickingFramebuffer() {
-        if (!this._dirtyPickingBuffer) {
-            return;
-        }
-
-        this._pickingContext.render();
-        this._dirtyPickingBuffer = false;
+        this.#renderCoordinator.renderPickingFramebuffer();
     }
 
     getSearchableViews() {
@@ -1073,7 +538,7 @@ export default class GenomeSpy {
     }
 
     getNamedScaleResolutions() {
-        /** @type {Map<string, import("./view/scaleResolution.js").default>} */
+        /** @type {Map<string, import("./scales/scaleResolution.js").default>} */
         const resolutions = new Map();
         this.viewRoot.visit((view) => {
             for (const resolution of Object.values(view.resolutions.scale)) {
@@ -1085,34 +550,3 @@ export default class GenomeSpy {
         return resolutions;
     }
 }
-
-/**
- *
- * @param {HTMLElement} container
- * @param {string} message
- */
-function createMessageBox(container, message) {
-    // Uh, need a templating thingy
-    const messageBox = document.createElement("div");
-    messageBox.className = "message-box";
-    const messageText = document.createElement("div");
-    messageText.textContent = message;
-    messageBox.appendChild(messageText);
-    container.appendChild(messageBox);
-}
-
-/**
- * @param {string} tag
- * @param {Record<string, any>} attrs
- */
-function element(tag, attrs) {
-    const el = document.createElement(tag);
-    for (const [key, value] of Object.entries(attrs)) {
-        if (["innerHTML", "innerText", "className"].includes(key)) {
-            // @ts-ignore
-            el[key] = value;
-        }
-        el.setAttribute(key, value);
-    }
-    return el;
-}