@genome-spy/core 0.36.1 → 0.37.0

package/dist/src/marks/rule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rule.d.ts","sourceRoot":"","sources":["../../../src/marks/rule.js"],"names":[],"mappings":"AAYA;IAOQ,wBAAwB;IA4GpB,0BAOE;CAmFb;iBAzNgB,WAAW"}

package/dist/src/marks/rule.js

@@ -0,0 +1,250 @@
+import Mark from "./mark.js";
+import {
+    createTexture,
+    drawBufferInfo,
+    setBuffersAndAttributes,
+    setUniforms,
+} from "twgl.js";
+import VERTEX_SHADER from "../gl/rule.vertex.glsl.js";
+import FRAGMENT_SHADER from "../gl/rule.fragment.glsl.js";
+import { RuleVertexBuilder } from "../gl/dataToVertices";
+import { isChannelDefWithScale } from "../encoder/encoder.js";
+
+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 &&
+                isChannelDefWithScale(encoding.y) &&
+                encoding.y.type == "quantitative"
+            ) {
+                encoding.x2 = encoding.x;
+                encoding.y2 = { datum: 0 };
+            } else if (
+                !encoding.y2 &&
+                isChannelDefWithScale(encoding.x) &&
+                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);
+    }
+
+    finalizeGraphicsInitialization() {
+        super.finalizeGraphicsInitialization();
+
+        this.gl.useProgram(this.programInfo.program);
+
+        const props = this.properties;
+
+        setUniforms(this.programInfo, {
+            uMinLength: props.minLength,
+            uDashTextureSize: this.dashTextureSize,
+            uStrokeCap: ["butt", "square", "round"].indexOf(props.strokeCap),
+        });
+    }
+
+    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),
+        });
+
+        builder.addBatches(collector.facetBatches);
+
+        const vertexData = builder.toArrays();
+        this.rangeMap.migrateEntries(vertexData.rangeMap);
+
+        this.updateBufferInfo(vertexData);
+    }
+
+    /**
+     * @param {import("../types/rendering").GlobalRenderingOptions} options
+     */
+    prepareRender(options) {
+        const ops = super.prepareRender(options);
+
+        if (this.dashTexture) {
+            ops.push(() =>
+                setUniforms(this.programInfo, {
+                    uDashTexture: this.dashTexture,
+                    uStrokeDashOffset: this.properties.strokeDashOffset,
+                })
+            );
+        }
+
+        ops.push(() =>
+            setBuffersAndAttributes(
+                this.gl,
+                this.programInfo,
+                this.vertexArrayInfo
+            )
+        );
+
+        return ops;
+    }
+
+    /**
+     * @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
+        );
+    }
+}
+
+/**
+ *
+ * @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/dist/src/marks/text.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 {
+    font: import("../fonts/bmFontManager").FontEntry;
+}
+import Mark from "./mark";
+//# sourceMappingURL=text.d.ts.map

package/dist/src/marks/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AA0BA;;;;;;;GAOG;AACH;IAsDQ,iDAMmD;CAwL1D;iBA/QgB,QAAQ"}

package/dist/src/marks/text.js

@@ -0,0 +1,279 @@
+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.js";
+import FRAGMENT_SHADER from "../gl/text.fragment.glsl.js";
+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 =
+            "format" in encoding.text ? 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
+            ),
+        });
+
+        builder.addBatches(collector.facetBatches);
+
+        const vertexData = builder.toArrays();
+        this.rangeMap.migrateEntries(vertexData.rangeMap);
+
+        this.updateBufferInfo(vertexData);
+    }
+
+    /**
+     * @param {import("../types/rendering").GlobalRenderingOptions} options
+     */
+    prepareRender(options) {
+        const ops = 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;
+        }
+        const uSdfNumerator =
+            this.font.metrics.common.base /
+            (this.unitView.context.devicePixelRatio / q);
+
+        ops.push(() =>
+            setUniforms(this.programInfo, {
+                uTexture: this.font.texture,
+                uSdfNumerator,
+            })
+        );
+
+        ops.push(() =>
+            setBuffersAndAttributes(
+                this.gl,
+                this.programInfo,
+                this.vertexArrayInfo
+            )
+        );
+
+        return ops;
+    }
+
+    /**
+     * @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
+        );
+    }
+}

package/dist/src/scale/colorUtils.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @param {string | import("../spec/scale").SchemeParams} schemeParams
+ * @param {WebGL2RenderingContext} gl
+ * @param {number} [count]
+ * @param {WebGLTexture} [existingTexture]
+ */
+export function createSchemeTexture(schemeParams: string | import("../spec/scale").SchemeParams, gl: WebGL2RenderingContext, count?: number, existingTexture?: WebGLTexture): WebGLTexture;
+/**
+ * @param {string[]} colors
+ * @param {import("../spec/scale").ScaleInterpolate | import("../spec/scale").ScaleInterpolateParams} interpolateParams
+ * @param {WebGL2RenderingContext} gl
+ * @param {WebGLTexture} [existingTexture]
+ */
+export function createInterpolatedColorTexture(colors: string[], interpolateParams: import("../spec/scale").ScaleInterpolate | import("../spec/scale").ScaleInterpolateParams, gl: WebGL2RenderingContext, existingTexture?: WebGLTexture): WebGLTexture;
+/**
+ * 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: number[], gl: WebGL2RenderingContext, count?: number, existingTexture?: WebGLTexture): WebGLTexture;
+/**
+ * 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: string[], gl: WebGL2RenderingContext, count?: number, existingTexture?: WebGLTexture): WebGLTexture;
+//# sourceMappingURL=colorUtils.d.ts.map

package/dist/src/scale/colorUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorUtils.d.ts","sourceRoot":"","sources":["../../../src/scale/colorUtils.js"],"names":[],"mappings":"AAOA;;;;;GAKG;AACH,kDALW,MAAM,GAAG,OAAO,eAAe,EAAE,YAAY,MAC7C,sBAAsB,UACtB,MAAM,oBACN,YAAY,gBAqCtB;AAED;;;;;GAKG;AACH,uDALW,MAAM,EAAE,qBACR,OAAO,eAAe,EAAE,gBAAgB,GAAG,OAAO,eAAe,EAAE,sBAAsB,MACzF,sBAAsB,oBACtB,YAAY,gBA6BtB;AAED;;;;;;;;GAQG;AACH,6CALW,MAAM,EAAE,MACR,sBAAsB,UACtB,MAAM,oBACN,YAAY,gBAqBtB;AAED;;;;;;;GAOG;AACH,mDALW,MAAM,EAAE,MACR,sBAAsB,UACtB,MAAM,oBACN,YAAY,gBActB"}