@genome-spy/core 0.14.0

package/src/gl/webGLHelper.js

@@ -0,0 +1,490 @@
+import {
+    addExtensionsToContext,
+    createFramebufferInfo,
+    createTexture,
+    getContext,
+    isWebGL2,
+    resizeFramebufferInfo,
+    setTextureFromArray,
+} from "twgl.js";
+import { isArray, isString } from "vega-util";
+import { getPlatformShaderDefines } from "./includes/fp64-utils";
+
+import { isDiscrete, isDiscretizing, isInterpolating } from "vega-scale";
+import {
+    createDiscreteColorTexture,
+    createDiscreteTexture,
+    createInterpolatedColorTexture,
+    createSchemeTexture,
+} from "../scale/colorUtils";
+import {
+    getDiscreteRangeMapper,
+    isColorChannel,
+    isDiscreteChannel,
+} from "../encoder/encoder";
+
+export default class WebGLHelper {
+    /**
+     *
+     * @param {HTMLElement} container
+     * @param {() => {width: number, height: number}} [sizeSource]
+     *      A function that returns the content size. If a dimension is undefined,
+     *      the canvas fills the container, otherwise the canvas is adjusted to the content size.
+     */
+    constructor(container, sizeSource) {
+        this._container = container;
+        this._sizeSource = sizeSource;
+
+        /** @type {Map<string, WebGLShader>} */
+        this._shaderCache = new Map();
+
+        /** @type {{ type: string, listener: function}[]} */
+        this._listeners = [];
+
+        /** @type {WeakMap<import("../view/scaleResolution").default, WebGLTexture>} */
+        this.rangeTextures = new WeakMap();
+
+        // --------------------------------------------------------
+
+        const canvas = document.createElement("canvas");
+
+        container.appendChild(canvas);
+
+        // TODO: Consider using high-performance powerPreference:
+        // https://www.khronos.org/webgl/public-mailing-list/public_webgl/1912/msg00001.php
+
+        const gl = /** @type {WebGL2RenderingContext} */ (
+            getContext(canvas, {
+                antialias: true,
+                // Disable depth writes. We don't use depth testing.
+                depth: false,
+                premultipliedAlpha: true,
+            })
+        );
+
+        if (!gl) {
+            throw new Error(
+                "Unable to initialize WebGL. Your browser or machine may not support it."
+            );
+        }
+
+        if (!isWebGL2(gl)) {
+            throw new Error(
+                "Your web browser does not support WebGL 2.0. Chrome, Firefox, and Safari Tech Preview should work."
+            );
+        }
+
+        addExtensionsToContext(gl);
+
+        // TODO: view background: https://vega.github.io/vega-lite/docs/spec.html#view-background
+
+        // Always use pre-multiplied alpha
+        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+
+        this._shaderDefines = getPlatformShaderDefines(gl);
+
+        this.canvas = canvas;
+        this.gl = gl;
+
+        // Setup framebuffer for piccking
+        /** @type {import("twgl.js").AttachmentOptions[]} */
+        this._pickingAttachmentOptions = [
+            {
+                format: gl.RGBA,
+                type: gl.UNSIGNED_BYTE,
+                minMag: gl.LINEAR,
+                wrap: gl.CLAMP_TO_EDGE,
+            },
+        ];
+        this._pickingBufferInfo = createFramebufferInfo(
+            gl,
+            this._pickingAttachmentOptions
+        );
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+        this.adjustGl();
+
+        // TODO: Size should be observed only if the content is not absolutely sized
+        this._resizeObserver = new ResizeObserver((entries) => {
+            this.invalidateSize();
+            this._emit("resize");
+        });
+        this._resizeObserver.observe(this._container);
+
+        // TODO: Observe devicePixelRatio
+        // https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#Monitoring_screen_resolution_or_zoom_level_changes
+
+        this._updateDpr();
+    }
+
+    invalidateSize() {
+        this._logicalCanvasSize = undefined;
+        this._updateDpr();
+        this.adjustGl();
+    }
+
+    _updateDpr() {
+        this.dpr = window.devicePixelRatio;
+    }
+
+    /**
+     * Compiles and caches a shader. The shader source is used as a cache key.
+     *
+     * @param {number} type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
+     * @param {string | string[]} glsl
+     */
+    compileShader(type, glsl) {
+        const VERSION = "#version 300 es";
+        const PRECISION = "precision mediump float;";
+
+        if (isArray(glsl)) {
+            glsl = glsl.join("\n\n");
+        }
+
+        const gl = this.gl;
+        const cacheKey = glsl.replaceAll(/ {2,}|^\s*\/\/.*$/gm, "");
+
+        let shader = this._shaderCache.get(cacheKey);
+        if (!shader) {
+            const stitchedSource = [VERSION, PRECISION, glsl].join("\n\n");
+
+            shader = gl.createShader(type);
+            gl.shaderSource(shader, stitchedSource);
+            gl.compileShader(shader);
+
+            // Don't check errors here. Only check them if linking fails.
+
+            this._shaderCache.set(cacheKey, shader);
+        }
+
+        return shader;
+    }
+
+    adjustGl() {
+        const logicalSize = this.getLogicalCanvasSize();
+        this.canvas.style.width = `${logicalSize.width}px`;
+        this.canvas.style.height = `${logicalSize.height}px`;
+
+        const physicalSize = this.getPhysicalCanvasSize(logicalSize);
+        this.canvas.width = physicalSize.width;
+        this.canvas.height = physicalSize.height;
+
+        resizeFramebufferInfo(
+            this.gl,
+            this._pickingBufferInfo,
+            this._pickingAttachmentOptions
+        );
+    }
+
+    finalize() {
+        this._resizeObserver.unobserve(this._container);
+        this.canvas.remove();
+    }
+
+    /**
+     * Returns the canvas size in true display pixels
+     *
+     * @param {{ width: number, height: number }} [logicalSize]
+     */
+    getPhysicalCanvasSize(logicalSize) {
+        logicalSize = logicalSize || this.getLogicalCanvasSize();
+        return {
+            width: logicalSize.width * this.dpr,
+            height: logicalSize.height * this.dpr,
+        };
+    }
+
+    /**
+     * Returns the canvas size in logical pixels (without devicePixelRatio correction)
+     */
+    getLogicalCanvasSize() {
+        if (this._logicalCanvasSize) {
+            return this._logicalCanvasSize;
+        }
+
+        // TODO: The size should never be smaller than the minimum content size!
+        const contentSize = this._sizeSource?.() ?? {
+            width: undefined,
+            height: undefined,
+        };
+
+        const cs = window.getComputedStyle(this._container, null);
+        const width =
+            contentSize.width ??
+            this._container.clientWidth -
+                parseFloat(cs.paddingLeft) -
+                parseFloat(cs.paddingRight);
+
+        const height =
+            contentSize.height ??
+            this._container.clientHeight -
+                parseFloat(cs.paddingTop) -
+                parseFloat(cs.paddingBottom);
+
+        this._logicalCanvasSize = { width, height };
+        return this._logicalCanvasSize;
+    }
+
+    /**
+     * @param {"render"|"resize"} eventType
+     * @param {function} listener
+     */
+    addEventListener(eventType, listener) {
+        this._listeners.push({ type: eventType, listener });
+    }
+
+    /**
+     * @param {string} eventType
+     */
+    _emit(eventType) {
+        for (const entry of this._listeners) {
+            if (entry.type === eventType) {
+                entry.listener();
+            }
+        }
+    }
+
+    /**
+     *
+     * @param {number} x
+     * @param {number} y
+     */
+    readPickingPixel(x, y) {
+        const gl = this.gl;
+
+        x *= this.dpr;
+        y *= this.dpr;
+
+        const height = this.getPhysicalCanvasSize().height;
+
+        const pixel = new Uint8Array(4);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._pickingBufferInfo.framebuffer);
+        gl.readPixels(
+            x,
+            height - y - 1,
+            1,
+            1,
+            gl.RGBA,
+            gl.UNSIGNED_BYTE,
+            pixel
+        );
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+
+        return pixel;
+    }
+
+    clearAll() {
+        const gl = this.gl;
+        const { width, height } = this.getPhysicalCanvasSize();
+        gl.viewport(0, 0, width, height);
+        gl.disable(gl.SCISSOR_TEST);
+        gl.clearColor(0, 0, 0, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+    }
+
+    /**
+     * Creates textures for color schemes and discrete/discretizing ranges.
+     * N.B. Discrete range textures need domain. Thus, this cannot be called
+     * before the final domains are resolved.
+     *
+     * TODO: This may be too specific to be included in WebGLHelper. Find a better place.
+     *
+     * @param {import("../view/scaleResolution").default} resolution
+     * @param {boolean} update Update the texture if it exists already.
+     */
+    createRangeTexture(resolution, update = false) {
+        const existingTexture = this.rangeTextures.get(resolution);
+        if (!update && existingTexture) {
+            return;
+        }
+
+        /**
+         * TODO: The count configuration logic etc should be combined
+         * with scale.js that configures d3 scales using vega specs
+         * @param {number} count
+         * @param {any} scale
+         * @returns {number}
+         */
+        function fixCount(count, scale) {
+            if (isDiscrete(scale.type)) {
+                return scale.domain().length;
+            } else if (scale.type == "threshold") {
+                return scale.domain().length + 1;
+            } else if (scale.type == "quantize") {
+                return count ?? 4;
+            } else if (scale.type == "quantile") {
+                return count ?? 4;
+            }
+            return count;
+        }
+
+        const channel = resolution.channel;
+
+        if (isColorChannel(channel)) {
+            const props = resolution.getScaleProps();
+
+            const scale = resolution.getScale();
+
+            /** @type {WebGLTexture} */
+            let texture;
+
+            if (props.scheme) {
+                let count = isString(props.scheme)
+                    ? undefined
+                    : props.scheme.count;
+
+                count = fixCount(count, scale);
+
+                texture = createSchemeTexture(
+                    props.scheme,
+                    this.gl,
+                    count,
+                    existingTexture
+                );
+            } else {
+                // No scheme, assume that colors are specified in the range
+
+                const range = /** @type {any[]} */ (scale.range());
+
+                if (isInterpolating(scale.type)) {
+                    texture = createInterpolatedColorTexture(
+                        range,
+                        props.interpolate,
+                        this.gl,
+                        existingTexture
+                    );
+                } else {
+                    texture = createDiscreteColorTexture(
+                        range,
+                        this.gl,
+                        scale.domain().length,
+                        existingTexture
+                    );
+                }
+            }
+
+            this.rangeTextures.set(resolution, texture);
+        } else {
+            const scale = resolution.getScale();
+
+            if (scale.type === "ordinal" || isDiscretizing(scale.type)) {
+                /** @type {function(any):number} Handle "shape" etc */
+                const mapper = isDiscreteChannel(channel)
+                    ? getDiscreteRangeMapper(channel)
+                    : (x) => x;
+
+                const range = /** @type {any[]} */ (
+                    resolution.getScale().range()
+                );
+
+                this.rangeTextures.set(
+                    resolution,
+                    createDiscreteTexture(
+                        range.map(mapper),
+                        this.gl,
+                        scale.domain().length,
+                        existingTexture
+                    )
+                );
+            }
+        }
+    }
+}
+
+/**
+ * Copy-pasted from twgl.js:
+ * https://github.com/greggman/twgl.js/blob/master/src/programs.js
+ * Copyright 2019 Gregg Tavares, MIT license
+ */
+function addLineNumbersWithError(src, log = "", lineOffset = 0) {
+    const errorRE = /ERROR:\s*\d+:(\d+)/gi;
+    // Note: Error message formats are not defined by any spec so this may or may not work.
+    const matches = [...log.matchAll(errorRE)];
+    const lineNoToErrorMap = new Map(
+        matches.map((m, ndx) => {
+            const lineNo = parseInt(m[1]);
+            const next = matches[ndx + 1];
+            const end = next ? next.index : log.length;
+            const msg = log.substring(m.index, end);
+            return [lineNo - 1, msg];
+        })
+    );
+    return src
+        .split("\n")
+        .map((line, lineNo) => {
+            const err = lineNoToErrorMap.get(lineNo);
+            return `${lineNo + 1 + lineOffset}: ${line}${
+                err ? `\n\n^^^ ${err}` : ""
+            }`;
+        })
+        .join("\n");
+}
+
+/**
+ * @param {WebGL2RenderingContext} gl
+ * @param {WebGLShader} vertexShader
+ * @param {WebGLShader} fragmentShader
+ */
+export function createProgram(gl, vertexShader, fragmentShader) {
+    var program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+
+    function getProgramErrors() {
+        /** @type {string} */
+        let errorMsg;
+        /** @type {string} */
+        let errorDetail;
+
+        const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+        if (!linked) {
+            errorMsg = gl.getProgramInfoLog(program);
+
+            for (const shader of [vertexShader, fragmentShader]) {
+                const compiled = gl.getShaderParameter(
+                    shader,
+                    gl.COMPILE_STATUS
+                );
+                if (!compiled) {
+                    errorMsg = gl.getShaderInfoLog(shader);
+                    errorDetail =
+                        addLineNumbersWithError(
+                            gl.getShaderSource(shader),
+                            errorMsg,
+                            0
+                        ) + `\nError compiling: ${errorMsg}`;
+                    gl.deleteShader(shader);
+                }
+            }
+            gl.deleteProgram(program);
+        }
+
+        if (errorMsg) {
+            return { message: errorMsg, detail: errorDetail };
+        }
+    }
+
+    return {
+        program,
+        getProgramErrors,
+    };
+}
+
+/**
+ * @param {WebGLRenderingContext} gl
+ * @param {Omit<import("twgl.js").TextureOptions, "src">} options
+ * @param {number[] | ArrayBufferView} src
+ * @param {WebGLTexture} [texture]
+ */
+export function createOrUpdateTexture(gl, options, src, texture) {
+    if (texture) {
+        setTextureFromArray(gl, texture, src, options);
+    } else {
+        texture = createTexture(gl, {
+            ...options,
+            src,
+        });
+    }
+    return texture;
+}

package/src/img/bowtie.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5"><path d="M4.7 21.2s.4 2.3 1.3 3.6C7 26 9.8 28 9.8 28s3.4-2.6 6.4-8.5c0 0 1 .1 1.9-.4.9-.6.8-.4 1-1.2 0 0 2.9.5 6.6 0 2.1-.3 4.3-1 6.2-2.5 0 0-1.1-1.7-2.5-5.1-.5-1.3-2-1.8-4.6-4.6l-8.2 8.6-11.9 6.9z" fill-opacity=".1"/><path d="M12.7 14.8s-4-1.8-12 2.7c0 0 1 3.7 2.5 5.3 1.4 1.5 2.3 3.6 4.6 4.6 0 0 4.7-3 6.9-9.2l3-2s4.7 2.8 12.6-1.6c0 0-.6-3.3-3-6-2.6-3-3.8-4.7-3.8-4.7s-4.1 2.3-7.5 9.3l-3.3 1.6z" fill="#7fbbdd"/><path d="M12.4 15.5c-.7-.5-2.4-.8-4.4-.4-2 .4-4 1.3-4.8 1.8-.5.3-1.2 1-1.2 1.4 0 .7.3 1.8.8 2.4.3.3.7.5 1.4.6.8 0 2.5-1.4 3.5-2 1-.6 1.6-.8 2.7-1.2l-2.9 2.4c-1.3 1.2-2.2 1.5-2.4 2.3 0 .5 0 1.4.5 1.8.4.5.6.8 1.6.8.6 0 1 0 2.6-1.5.9-.9 2.3-3 2.7-3.7.6-1.1 1-2.2.7-3-.2-1-.4-1.4-.8-1.7zM17.4 14.2c-.3-.5-.9-1.2-.2-2.5l1.9-3c.5-.8 2-2.3 2.6-2.6.6-.4 1.5-.6 2-.2.6.4 1 1 1.3 1.5.4.6.7 1.3.2 2-.7 1-1.6.9-2.8 1.7-1.2.8-1.9 1.2-2.5 1.9l3.8-1.8c1.3-.6 2.7-1.1 3.4-.7.8.5.8.7 1 1.4.3 1-.2 1.9-.8 2.4-.5.6-1.5.9-2.6 1.2-1.4.4-4.5 1-5.8.5-1.3-.5-1.3-1.4-1.5-1.8z" fill="#fff"/><path d="M12.7 14.8s-4-1.8-12 2.7c0 0 1 3.7 2.5 5.3 1.4 1.5 2.3 3.6 4.6 4.6 0 0 4.7-3 6.9-9.2l3-2s4.7 2.8 12.6-1.6c0 0-.6-3.3-3-6-2.6-3-3.8-4.7-3.8-4.7s-4.1 2.3-7.5 9.3l-3.3 1.6z" fill="none" stroke="#000" stroke-width=".5"/><path d="M12.4 14.9s2.1-2 3-2c1.1 0 2.3 2.7 2.3 3.5 0 .8-2.1 2.4-3.1 2.3 0 0 0-1.2-.7-2.6-.8-1.3-1.5-1.2-1.5-1.2z" fill="#7fbbdd"/><path d="M13.8 15.3c.9.8.6 2 1.4 1.8 1-.2 1.4-.8 1.3-1.5 0-.7 0-.8-.4-1.6-.3-.7-1-1.1-2-.5-.7.5-1.4 1.3-1.4 1.3s.2-.3 1.1.5z" fill="#fff"/><path d="M12.4 14.9s2.1-2 3-2c1.1 0 2.3 2.7 2.3 3.5 0 .8-2.1 2.4-3.1 2.3 0 0 0-1.2-.7-2.6-.8-1.3-1.5-1.2-1.5-1.2z" fill="none" stroke="#000" stroke-width=".5"/></svg>

package/src/img/genomespy-favicon.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
+    <g transform="matrix(0.10221,0.00683825,-0.0067136,0.100347,-8.03424,-13.2222)">
+        <path d="M208.629,548.17C208.629,548.17 219.768,594.389 239.814,619.222C259.86,644.055 319.119,680.831 319.119,680.831C319.119,680.831 385.557,622.915 437.87,498.346C437.87,498.346 456.021,499.236 473.808,486.446C491.594,473.656 490.239,478.534 494.883,461.62C494.883,461.62 551.848,467.937 625.826,451.863C667.634,442.778 710.238,425.649 747.382,393.142C747.382,393.142 721.992,360.244 689.422,291.45C677.029,265.275 647.518,257.098 590.747,203.309L438.083,391.273L208.629,548.17Z" style="fill-opacity:0.11;"/>
+    </g>
+    <g transform="matrix(0.081985,-0.0582493,0.0582493,0.081985,-40.4754,34.7668)">
+        <path d="M561.588,349.155C561.588,349.155 516.297,271.341 328.841,252.044C328.841,252.044 302.342,325.189 307.686,368.056C313.031,410.922 303.001,456.147 329.132,501.174C329.132,501.174 443.114,506.743 554.649,428.469L629.204,432.112C629.204,432.112 673.755,534.351 856.964,554.375C856.964,554.375 886.717,491.768 879.193,417.478C871.211,338.673 871.716,293.443 871.716,293.443C871.716,293.443 775.485,283.928 635.418,361.795L561.588,349.155Z" style="fill:rgb(127,187,221);"/>
+        <clipPath id="_clip1">
+            <path d="M561.588,349.155C561.588,349.155 516.297,271.341 328.841,252.044C328.841,252.044 302.342,325.189 307.686,368.056C313.031,410.922 303.001,456.147 329.132,501.174C329.132,501.174 443.114,506.743 554.649,428.469L629.204,432.112C629.204,432.112 673.755,534.351 856.964,554.375C856.964,554.375 886.717,491.768 879.193,417.478C871.211,338.673 871.716,293.443 871.716,293.443C871.716,293.443 775.485,283.928 635.418,361.795L561.588,349.155Z"/>
+        </clipPath>
+        <g clip-path="url(#_clip1)">
+            <g transform="matrix(0.758637,0.45892,-0.45892,0.758637,425.635,-121.213)">
+                <path d="M386.873,397.241C371.345,383.628 335.138,374.782 290.644,380.543C246.149,386.304 196.827,402.266 178.802,412.065C168.202,417.828 151.494,429.354 150.682,439.334C149.527,453.528 153.593,477.066 165.625,491.284C171.69,498.451 179.927,503.445 193.838,505.423C211.701,507.963 252.714,480.627 275.399,469.22C299.332,457.187 313.981,454.56 338.386,447.014C338.386,447.014 291.346,478.587 270.205,494.393C239.61,517.268 218.575,522.444 212.859,539.897C209.766,549.34 212.237,567.767 220.354,577.538C229.427,588.461 233.197,595.069 254.591,597.624C267.303,599.143 276.685,598.802 314.37,568.95C336.06,551.767 370.297,509.817 381.412,494.616C397.581,472.506 405.165,451.462 402.656,435.04C399.045,411.391 394.259,403.716 386.873,397.241Z" style="fill:white;"/>
+            </g>
+            <g transform="matrix(0.752145,0.454993,-0.454993,0.752145,468.36,-108.293)">
+                <path d="M484.733,378.934C479.33,367.886 467.092,350.452 483.886,325.205C502.172,297.717 514.898,280.938 528.117,264.632C541.335,248.326 574.793,218.447 587.739,212.53C600.684,206.613 621.026,203.852 631.889,212.841C642.874,221.93 648.416,233.377 654.92,245.478C662.331,259.267 667.318,274.808 656.518,288.278C641.093,307.515 622.242,305.294 594.912,319.844C567.244,334.573 552.644,342.943 539.244,355.703C539.244,355.703 591.431,334.114 621.229,324.474C651.027,314.833 680.952,304.461 695.995,315.975C711.038,327.49 710.631,331.463 714.425,347.187C719.107,366.59 707.231,385.165 694.294,395.838C681.356,406.51 659.958,411.756 636.875,416.852C606.42,423.576 540.278,431.917 512.819,419.366C485.361,406.815 488.488,386.613 484.733,378.934Z" style="fill:white;"/>
+            </g>
+        </g>
+        <path d="M561.588,349.155C561.588,349.155 516.297,271.341 328.841,252.044C328.841,252.044 302.342,325.189 307.686,368.056C313.031,410.922 303.001,456.147 329.132,501.174C329.132,501.174 443.114,506.743 554.649,428.469L629.204,432.112C629.204,432.112 673.755,534.351 856.964,554.375C856.964,554.375 886.717,491.768 879.193,417.478C871.211,338.673 871.716,293.443 871.716,293.443C871.716,293.443 775.485,283.928 635.418,361.795L561.588,349.155Z" style="fill:none;stroke:black;stroke-width:16.57px;"/>
+    </g>
+    <g transform="matrix(0.100298,-0.00740488,0.00740488,0.100298,-15.7457,-5.17528)">
+        <path d="M384.916,385.459C384.916,385.459 430.781,347.868 450.027,350.093C471.685,352.596 490.49,407.747 490.208,424.416C489.927,441.085 442.948,469.866 422.537,466.24C422.537,466.24 425.525,442.129 412.114,413.335C398.702,384.54 384.916,385.459 384.916,385.459Z" style="fill:rgb(127,187,221);"/>
+        <clipPath id="_clip2">
+            <path d="M384.916,385.459C384.916,385.459 430.781,347.868 450.027,350.093C471.685,352.596 490.49,407.747 490.208,424.416C489.927,441.085 442.948,469.866 422.537,466.24C422.537,466.24 425.525,442.129 412.114,413.335C398.702,384.54 384.916,385.459 384.916,385.459Z"/>
+        </clipPath>
+        <g clip-path="url(#_clip2)">
+            <g transform="matrix(0.909069,3.67641e-17,-3.79818e-17,0.85852,37.051,52.1829)">
+                <path d="M413.282,402.697C430.77,421.58 423.307,448.426 441.683,446.137C463.409,443.431 472.604,430.356 473.316,413.402C474.028,396.448 472.245,393.911 466.172,375.321C460.099,356.731 447.953,352.176 422.842,357.179C401.957,361.339 405.039,360.215 398.735,367.228C392.43,374.242 384.315,393.182 384.315,393.182C384.315,393.182 392.715,380.492 413.282,402.697Z" style="fill:white;"/>
+            </g>
+        </g>
+        <path d="M384.916,385.459C384.916,385.459 430.781,347.868 450.027,350.093C471.685,352.596 490.49,407.747 490.208,424.416C489.927,441.085 442.948,469.866 422.537,466.24C422.537,466.24 425.525,442.129 412.114,413.335C398.702,384.54 384.916,385.459 384.916,385.459Z" style="fill:none;stroke:black;stroke-width:16.57px;"/>
+    </g>
+</svg>

package/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>GenomeSpy</title>
+  </head>
+  <body>
+    <script type="module" src="/singlePageApp.js"></script>
+  </body>
+</html>

package/src/index.js

@@ -0,0 +1,151 @@
+import { isObject, isString } from "vega-util";
+import { loader as vegaLoader } from "vega-loader";
+import { html } from "lit-html";
+
+import GenomeSpy from "./genomeSpy.js";
+import icon from "./img/bowtie.svg";
+
+export { GenomeSpy, html, icon };
+
+/**
+ * Embeds GenomeSpy into the DOM
+ *
+ * @param {HTMLElement | string} el HTMLElement or a query selector
+ * @param {object | string} spec a spec object or an url to a json spec
+ * @param {import("./options.js").EmbedOptions} [options] options
+ */
+export async function embed(el, spec, options = {}) {
+    /** @type {HTMLElement} */
+    let element;
+
+    if (isString(el)) {
+        element = document.querySelector(el);
+        if (!element) {
+            throw new Error(`No such element: ${el}`);
+        }
+    } else if (el instanceof HTMLElement) {
+        element = el;
+    } else {
+        throw new Error(`Invalid element: ${el}`);
+    }
+
+    /** @type {GenomeSpy} */
+    let genomeSpy;
+
+    try {
+        const specObject = /** @type {import("./spec/root").RootSpec} */ (
+            isObject(spec) ? spec : await loadSpec(spec)
+        );
+
+        specObject.baseUrl = specObject.baseUrl || "";
+
+        if (!("width" in specObject)) {
+            specObject.width = "container";
+        }
+
+        if (!("padding" in specObject)) {
+            specObject.padding = 10;
+        }
+
+        if (element == document.body) {
+            // Need to add a wrapper to make sizing behavior more stable
+            const wrapper = document.createElement("div");
+            wrapper.style.position = "fixed";
+            wrapper.style.inset = "0";
+            wrapper.style.overflow = "hidden";
+            element.appendChild(wrapper);
+            element = wrapper;
+        }
+
+        genomeSpy = new GenomeSpy(element, specObject, options);
+        applyOptions(genomeSpy, options);
+        await genomeSpy.launch();
+    } catch (e) {
+        // eslint-disable-next-line require-atomic-updates
+        element.innerText = e.toString();
+        console.error(e);
+    }
+
+    return {
+        finalize() {
+            genomeSpy.destroy();
+            while (element.firstChild) {
+                element.firstChild.remove();
+            }
+        },
+
+        /**
+         * @param {string} type
+         * @param {(event: any) => void} listener
+         */
+        addEventListener(type, listener) {
+            const listenersByType = genomeSpy._eventListeners;
+
+            let listeners = listenersByType.get(type);
+            if (!listeners) {
+                listeners = new Set();
+                listenersByType.set(type, listeners);
+            }
+
+            listeners.add(listener);
+        },
+
+        /**
+         * @param {string} type
+         * @param {(event: any) => void} listener
+         */
+        removeEventListener(type, listener) {
+            const listenersByType = genomeSpy._eventListeners;
+
+            listenersByType.get(type)?.delete(listener);
+        },
+
+        /**
+         * @param {string} name
+         * @returns {import("./view/scaleResolutionApi").ScaleResolutionApi}
+         */
+        getScaleResolutionByName(name) {
+            return genomeSpy.getNamedScaleResolutions().get(name);
+        },
+    };
+}
+
+/**
+ *
+ * @param {import("./genomeSpy").default} genomeSpy
+ * @param {Record<string, any>} opt
+ */
+function applyOptions(genomeSpy, opt) {
+    if (opt.namedDataProvider) {
+        genomeSpy.registerNamedDataProvider(opt.namedDataProvider);
+    }
+
+    if (opt.beforeLaunchCallback) {
+        opt.beforeLaunchCallback(genomeSpy);
+    }
+}
+
+/**
+ * Loads the spec from the given url and sets the baseUrl if it is not
+ * defined in the spec.
+ *
+ * @param {string} url
+ */
+export async function loadSpec(url) {
+    let spec;
+
+    try {
+        spec = JSON.parse(await vegaLoader().load(url));
+    } catch (e) {
+        throw new Error(
+            `Could not load or parse configuration: ${url}, reason: ${e.message}`
+        );
+    }
+
+    if (!spec.baseUrl) {
+        const m = url.match(/^[^?#]*\//);
+        spec.baseUrl = (m && m[0]) || "./";
+    }
+
+    return spec;
+}