@genome-spy/core 0.14.0

package/src/marks/rule.js

@@ -0,0 +1,231 @@
+import Mark from "./mark.js";
+import {
+    createTexture,
+    drawBufferInfo,
+    setBuffersAndAttributes,
+    setUniforms,
+} from "twgl.js";
+import VERTEX_SHADER from "../gl/rule.vertex.glsl";
+import FRAGMENT_SHADER from "../gl/rule.fragment.glsl";
+import { RuleVertexBuilder } from "../gl/dataToVertices";
+
+export default class RuleMark extends Mark {
+    /**
+     * @param {import("../view/unitView").default} unitView
+     */
+    constructor(unitView) {
+        super(unitView);
+
+        this.dashTextureSize = 0;
+
+        Object.defineProperties(
+            this.defaultProperties,
+            Object.getOwnPropertyDescriptors({
+                x2: undefined,
+                y2: undefined,
+                size: 1,
+                color: "black",
+                opacity: 1.0,
+
+                minLength: 0.0,
+                /** @type {number[]} */
+                strokeDash: null,
+                strokeDashOffset: 0,
+                strokeCap: "butt",
+            })
+        );
+    }
+
+    getAttributes() {
+        return [
+            "uniqueId",
+            "facetIndex",
+            "x",
+            "x2",
+            "y",
+            "y2",
+            "size",
+            "color",
+            "opacity",
+        ];
+    }
+
+    /**
+     * @returns {import("../spec/channel").Channel[]}
+     */
+    getSupportedChannels() {
+        return [...super.getSupportedChannels(), "x2", "y2", "size"];
+    }
+
+    /**
+     * @param {import("../spec/channel").Encoding} encoding
+     * @returns {import("../spec/channel").Encoding}
+     */
+    // eslint-disable-next-line complexity
+    fixEncoding(encoding) {
+        // TODO: Write test for this mess
+        if (encoding.x && encoding.y && encoding.x2 && encoding.y2) {
+            // Everything is defined
+        } else if (encoding.x && encoding.x2 && !encoding.y) {
+            encoding.y = { value: 0.5 };
+            encoding.y2 = encoding.y;
+        } else if (encoding.y && encoding.y2 && !encoding.x) {
+            encoding.x = { value: 0.5 };
+            encoding.x2 = encoding.x;
+        } else if (encoding.x && !encoding.y) {
+            // Vertical rule
+            encoding.y = { value: 0 };
+            encoding.y2 = { value: 1 };
+            encoding.x2 = encoding.x;
+        } else if (encoding.y && !encoding.x) {
+            // Horizontal rule
+            encoding.x = { value: 0 };
+            encoding.x2 = { value: 1 };
+            encoding.y2 = encoding.y;
+        } else if (encoding.x && encoding.y && encoding.y2) {
+            // Limited vertical rule
+            encoding.x2 = encoding.x;
+        } else if (encoding.y && encoding.x && encoding.x2) {
+            // Limited horizontal rule
+            encoding.y2 = encoding.y;
+        } else if (encoding.y && encoding.x) {
+            if (!encoding.x2 && encoding.y.type == "quantitative") {
+                encoding.x2 = encoding.x;
+                encoding.y2 = { datum: 0 };
+            } else if (!encoding.y2 && encoding.x.type == "quantitative") {
+                encoding.y2 = encoding.y;
+                encoding.x2 = { datum: 0 };
+            } else {
+                throw new Error("A bug!"); // Should be unreachable
+            }
+        } else {
+            throw new Error(
+                "Invalid x and y encodings for rule mark: " +
+                    JSON.stringify(encoding)
+            );
+        }
+
+        return encoding;
+    }
+
+    async initializeGraphics() {
+        await super.initializeGraphics();
+
+        if (this.properties.strokeDash) {
+            const gl = this.gl;
+            const textureData = createDashTextureArray(
+                this.properties.strokeDash
+            );
+            this.dashTexture = createTexture(gl, {
+                mag: gl.NEAREST,
+                min: gl.NEAREST,
+                internalFormat: gl.R8,
+                format: gl.RED,
+                src: textureData,
+                height: 1,
+            });
+            this.dashTextureSize = textureData.length; // Not needed with WebGL2
+        }
+
+        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER);
+    }
+
+    updateGraphicsData() {
+        const collector = this.unitView.getCollector();
+        const itemCount = collector.getItemCount();
+
+        const builder = new RuleVertexBuilder({
+            encoders: this.encoders,
+            attributes: this.getAttributes(),
+            numItems: Math.max(itemCount, this.properties.minBufferSize || 0),
+            buildXIndex: this.properties.buildIndex,
+        });
+
+        builder.addBatches(collector.facetBatches);
+
+        const vertexData = builder.toArrays();
+        this.rangeMap = vertexData.rangeMap;
+
+        this.updateBufferInfo(vertexData);
+    }
+
+    /**
+     * @param {import("../view/rendering").GlobalRenderingOptions} options
+     */
+    prepareRender(options) {
+        super.prepareRender(options);
+
+        setUniforms(this.programInfo, {
+            uMinLength: this.properties.minLength,
+            uDashTextureSize: this.dashTextureSize,
+            uStrokeCap: ["butt", "square", "round"].indexOf(
+                this.properties.strokeCap
+            ),
+        });
+
+        if (this.dashTexture) {
+            setUniforms(this.programInfo, {
+                uDashTexture: this.dashTexture,
+                uStrokeDashOffset: this.properties.strokeDashOffset,
+            });
+        }
+
+        setBuffersAndAttributes(
+            this.gl,
+            this.programInfo,
+            this.vertexArrayInfo
+        );
+    }
+
+    /**
+     * @param {import("./Mark").MarkRenderingOptions} options
+     */
+    render(options) {
+        const gl = this.gl;
+
+        return this.createRenderCallback(
+            (offset, count) =>
+                drawBufferInfo(
+                    gl,
+                    this.vertexArrayInfo,
+                    gl.TRIANGLE_STRIP,
+                    count,
+                    offset
+                ),
+            options,
+            () => this.rangeMap
+        );
+    }
+}
+
+/**
+ *
+ * @param {number[]} pattern
+ */
+function createDashTextureArray(pattern) {
+    if (
+        pattern.length == 0 ||
+        pattern.length % 2 ||
+        pattern.findIndex((s) => Math.round(s) != s || s < 1 || s > 1000) >= 0
+    ) {
+        throw new Error(
+            "Invalid stroke dash pattern: " + JSON.stringify(pattern)
+        );
+    }
+
+    const len = pattern.reduce((a, b) => a + b);
+
+    const texture = new Uint8Array(len);
+
+    let state = true;
+    let i = 0;
+    for (let segment of pattern) {
+        while (segment) {
+            texture[i++] = (state && 255) || 0;
+            segment--;
+        }
+        state = !state;
+    }
+
+    return texture;
+}

package/src/marks/text.js

@@ -0,0 +1,274 @@
+import { isString } from "vega-util";
+import { format } from "d3-format";
+import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
+import VERTEX_SHADER from "../gl/text.vertex.glsl";
+import FRAGMENT_SHADER from "../gl/text.fragment.glsl";
+import { TextVertexBuilder } from "../gl/dataToVertices";
+
+import Mark from "./mark";
+import { fixPositional } from "./markUtils";
+import { primaryPositionalChannels } from "../encoder/encoder";
+
+/** For GLSL uniforms */
+const alignments = {
+    left: -1,
+    center: 0,
+    right: 1,
+};
+
+/** For GLSL uniforms */
+const baselines = {
+    top: -1,
+    middle: 0,
+    bottom: 1,
+    alphabetic: 1,
+};
+
+/**
+ * Renders text using SDF fonts
+ *
+ * Some resources:
+ * - Valve's SDF paper: https://doi.org/10.1145/1281500.1281665
+ * - Multi-channel SDF fonts: https://github.com/Chlumsky/msdfgen
+ * - Google's web fonts as SDFs: https://github.com/etiennepinchon/aframe-fonts
+ */
+export default class TextMark extends Mark {
+    /**
+     * @param {import("../view/unitView").default} unitView
+     */
+    constructor(unitView) {
+        super(unitView);
+
+        Object.defineProperties(
+            this.defaultProperties,
+            Object.getOwnPropertyDescriptors({
+                x: 0.5,
+                y: 0.5,
+                x2: undefined,
+                y2: undefined,
+                text: "",
+                size: 11.0,
+                color: "black",
+                opacity: 1.0,
+
+                // Use the built-in default
+                font: undefined,
+                fontStyle: undefined,
+                fontWeight: undefined,
+
+                align: "center",
+                baseline: "middle",
+                dx: 0,
+                dy: 0,
+                angle: 0,
+
+                /** When only primary channel is defined with band/locus scale */
+                fitToBand: false,
+
+                squeeze: true,
+                paddingX: 0,
+                paddingY: 0,
+                flushX: true,
+                flushY: true,
+
+                /** Stretch letters so that they can be used with sequence logos etc... */
+                logoLetters: false,
+
+                viewportEdgeFadeWidthTop: 0,
+                viewportEdgeFadeWidthRight: 0,
+                viewportEdgeFadeWidthBottom: 0,
+                viewportEdgeFadeWidthLeft: 0,
+
+                viewportEdgeFadeDistanceTop: -Infinity,
+                viewportEdgeFadeDistanceRight: -Infinity,
+                viewportEdgeFadeDistanceBottom: -Infinity,
+                viewportEdgeFadeDistanceLeft: -Infinity,
+            })
+        );
+
+        this.font = this.properties.font
+            ? unitView.context.fontManager.getFont(
+                  this.properties.font,
+                  this.properties.fontStyle,
+                  this.properties.fontWeight
+              )
+            : unitView.context.fontManager.getDefaultFont();
+    }
+
+    getAttributes() {
+        return [
+            "uniqueId",
+            "facetIndex",
+            "x",
+            "x2",
+            "y",
+            "y2",
+            "color",
+            "size",
+            "opacity",
+            "angle",
+        ];
+    }
+
+    /**
+     * @returns {import("../spec/channel").Channel[]}
+     */
+    getSupportedChannels() {
+        return [
+            ...super.getSupportedChannels(),
+            "x2",
+            "y2",
+            "size",
+            "text",
+            "angle",
+        ];
+    }
+
+    /**
+     * @param {import("../spec/channel").Encoding} encoding
+     * @returns {import("../spec/channel").Encoding}
+     */
+    fixEncoding(encoding) {
+        // TODO: Ensure that both the primary and secondary channel are either variables or constants (values)
+
+        for (const channel of primaryPositionalChannels) {
+            if (this.properties.fitToBand) {
+                fixPositional(encoding, channel);
+            }
+        }
+
+        return encoding;
+    }
+
+    async initializeGraphics() {
+        await super.initializeGraphics();
+        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER);
+    }
+
+    finalizeGraphicsInitialization() {
+        super.finalizeGraphicsInitialization();
+
+        this.gl.useProgram(this.programInfo.program);
+
+        const props = this.properties;
+
+        // TODO: Use uniform block.
+        setUniforms(this.programInfo, {
+            uPaddingX: props.paddingX,
+            uPaddingY: props.paddingY,
+            uFlushX: !!props.flushX,
+            uFlushY: !!props.flushY,
+
+            uAlign: [alignments[props.align], baselines[props.baseline]],
+
+            uD: [props.dx, -props.dy],
+
+            uLogoLetter: !!props.logoLetters,
+            uSqueeze: !!props.squeeze,
+
+            uViewportEdgeFadeWidth: [
+                props.viewportEdgeFadeWidthTop,
+                props.viewportEdgeFadeWidthRight,
+                props.viewportEdgeFadeWidthBottom,
+                props.viewportEdgeFadeWidthLeft,
+            ],
+
+            uViewportEdgeFadeDistance: [
+                props.viewportEdgeFadeDistanceTop,
+                props.viewportEdgeFadeDistanceRight,
+                props.viewportEdgeFadeDistanceBottom,
+                props.viewportEdgeFadeDistanceLeft,
+            ],
+        });
+    }
+
+    updateGraphicsData() {
+        const collector = this.unitView.getCollector();
+        const data = collector.getData();
+        const encoding = this.encoding;
+
+        // Count the total number of characters to that we can pre-allocate a typed array
+        const accessor = this.encoders.text.accessor || this.encoders.text; // accessor or constant value
+        let charCount = 0;
+        /** @type {function(any):any} */
+        const numberFormat = encoding.text.format
+            ? format(encoding.text.format)
+            : (d) => d;
+        for (const d of data) {
+            // TODO: Optimization: don't format twice (calculation and actual encoding)
+            const value = numberFormat(accessor(d));
+            const str = isString(value)
+                ? value
+                : value === null
+                ? ""
+                : "" + value;
+            charCount += (str && str.length) || 0;
+        }
+
+        const builder = new TextVertexBuilder({
+            encoders: this.encoders,
+            attributes: this.getAttributes(),
+            properties: this.properties,
+            fontMetrics: this.font.metrics,
+            numCharacters: Math.max(
+                charCount,
+                this.properties.minBufferSize || 0
+            ),
+            buildXIndex: this.properties.buildIndex,
+        });
+
+        builder.addBatches(collector.facetBatches);
+
+        const vertexData = builder.toArrays();
+        this.rangeMap = vertexData.rangeMap;
+
+        this.updateBufferInfo(vertexData);
+    }
+
+    /**
+     * @param {import("../view/rendering").GlobalRenderingOptions} options
+     */
+    prepareRender(options) {
+        super.prepareRender(options);
+
+        let q = 0.35; // TODO: Ensure that this makes sense. Now chosen by trial & error
+        if (this.properties.logoLetters) {
+            // Adjust to make stretched letters a bit less blurry
+            // A proper solution would probably be to compute gradients in the fragment shader
+            // to find a suitable divisor.
+            q /= 2;
+        }
+
+        setUniforms(this.programInfo, {
+            uTexture: this.font.texture,
+            uSdfNumerator:
+                this.font.metrics.common.base / (this.glHelper.dpr / q),
+        });
+
+        setBuffersAndAttributes(
+            this.gl,
+            this.programInfo,
+            this.vertexArrayInfo
+        );
+    }
+
+    /**
+     * @param {import("./Mark").MarkRenderingOptions} options
+     */
+    render(options) {
+        const gl = this.gl;
+
+        return this.createRenderCallback(
+            (offset, count) =>
+                drawBufferInfo(
+                    gl,
+                    this.vertexArrayInfo,
+                    gl.TRIANGLES,
+                    count,
+                    offset
+                ),
+            options,
+            () => this.rangeMap
+        );
+    }
+}

package/src/options.d.ts

@@ -0,0 +1,9 @@
+import { TooltipHandler } from "./tooltip/tooltipHandler";
+
+export interface EmbedOptions {
+    /** If true, don't display the toolbar. */
+    bare?: boolean;
+
+    /** Custom tooltip handlers. Use "default" to override the default handler */
+    tooltipHandlers?: Record<string, TooltipHandler>;
+}

package/src/scale/colorUtils.js

@@ -0,0 +1,184 @@
+import { color as d3color } from "d3-color";
+import { range } from "d3-array";
+import { scheme as vegaScheme, interpolateColors } from "vega-scale";
+import { isString, isArray, isFunction } from "vega-util";
+import { peek } from "../utils/arrayUtils";
+import { createOrUpdateTexture } from "../gl/webGLHelper";
+
+/**
+ * @param {string | import("../spec/scale").SchemeParams} schemeParams
+ * @param {WebGL2RenderingContext} gl
+ * @param {number} [count]
+ * @param {WebGLTexture} [existingTexture]
+ */
+export function createSchemeTexture(schemeParams, gl, count, existingTexture) {
+    const schemeName = isString(schemeParams)
+        ? schemeParams
+        : schemeParams.name;
+    const extent = (!isString(schemeParams) && schemeParams.extent) || [0, 1];
+
+    if (count === undefined && !isString(schemeParams)) {
+        count = schemeParams.count;
+    }
+
+    if (schemeName) {
+        const scheme = vegaScheme(schemeName);
+        if (isFunction(scheme)) {
+            // TODO: Reverse
+            const textureData = interpolatorToTextureData(scheme, {
+                extent,
+                count,
+            });
+            return createOrUpdateTexture(
+                gl,
+                {
+                    minMag: gl.LINEAR,
+                    format: gl.RGB,
+                    height: 1,
+                    wrap: gl.CLAMP_TO_EDGE,
+                },
+                textureData,
+                existingTexture
+            );
+        } else if (isArray(scheme)) {
+            return createDiscreteColorTexture(scheme, gl);
+        } else {
+            throw new Error("Unknown scheme: " + schemeName);
+        }
+    }
+}
+
+/**
+ * @param {string[]} colors
+ * @param {import("../spec/scale").ScaleInterpolate | import("../spec/scale").ScaleInterpolateParams} interpolateParams
+ * @param {WebGL2RenderingContext} gl
+ * @param {WebGLTexture} [existingTexture]
+ */
+export function createInterpolatedColorTexture(
+    colors,
+    interpolateParams = "rgb",
+    gl,
+    existingTexture
+) {
+    const interpolator = interpolateColors(
+        colors,
+        isString(interpolateParams)
+            ? interpolateParams
+            : interpolateParams.type,
+        isString(interpolateParams) ? undefined : interpolateParams.gamma
+    );
+
+    // TODO: Reverse
+    const textureData = interpolatorToTextureData(interpolator);
+    return createOrUpdateTexture(
+        gl,
+        {
+            minMag: gl.LINEAR,
+            format: gl.RGB,
+            height: 1,
+            wrap: gl.CLAMP_TO_EDGE,
+        },
+        textureData,
+        existingTexture
+    );
+}
+
+/**
+ * Creates a texture that maps integer indices to discrete 32bit floats.
+ * The range may represent point shapes, for example.
+ *
+ * @param {number[]} range
+ * @param {WebGL2RenderingContext} gl
+ * @param {number} [count]
+ * @param {WebGLTexture} [existingTexture]
+ */
+export function createDiscreteTexture(range, gl, count, existingTexture) {
+    const size = Math.max(range.length, count || 0);
+    const textureData = new Float32Array(size);
+
+    for (let i = 0; i < size; i++) {
+        textureData[i] = range[i % range.length];
+    }
+
+    return createOrUpdateTexture(
+        gl,
+        {
+            minMag: gl.NEAREST,
+            format: gl.RED,
+            internalFormat: gl.R32F,
+            height: 1,
+        },
+        textureData,
+        existingTexture
+    );
+}
+
+/**
+ * Creates a texture that maps integer indices to discrete RGB colors.
+ *
+ * @param {string[]} colors
+ * @param {WebGL2RenderingContext} gl
+ * @param {number} [count]
+ * @param {WebGLTexture} [existingTexture]
+ */
+export function createDiscreteColorTexture(colors, gl, count, existingTexture) {
+    const textureData = colorArrayToTextureData(colors, count);
+    return createOrUpdateTexture(
+        gl,
+        {
+            minMag: gl.NEAREST,
+            format: gl.RGB,
+            height: 1,
+        },
+        textureData,
+        existingTexture
+    );
+}
+
+/**
+ * Renders an interpolator to a texture, which can be used for mapping
+ * quantitative values to colors (sequential scale).
+ *
+ * @param {function(number):string} interpolator
+ * @param {object} options
+ * @param {number[]} [options.extent]
+ * @param {boolean} [options.reverse]
+ * @param {number} [options.count]
+ */
+function interpolatorToTextureData(
+    interpolator,
+    { extent = [0, 1], reverse = false, count = 256 } = {}
+) {
+    const start = extent[0];
+    const span = peek(extent) - start;
+
+    const steps = range(count)
+        .map((x) => x / (count - 1))
+        .map((x) => start + x / span)
+        .map(interpolator);
+
+    if (reverse) {
+        steps.reverse();
+    }
+
+    return colorArrayToTextureData(steps);
+}
+
+/**
+ * Renders a scheme (an array of colors) to a texture.
+ *
+ * @param {string[]} scheme
+ * @param {number} [count]
+ */
+function colorArrayToTextureData(scheme, count) {
+    const size = Math.max(scheme.length, count || 0);
+
+    const textureData = new Uint8Array(size * 3);
+    for (let i = 0; i < size; i++) {
+        const color = d3color(scheme[i % scheme.length]).rgb();
+        textureData[i * 3 + 0] = color.r;
+        textureData[i * 3 + 1] = color.g;
+        textureData[i * 3 + 2] = color.b;
+    }
+    return textureData;
+}