@genome-spy/core 0.14.0

package/src/marks/markUtils.js

@@ -0,0 +1,109 @@
+import { isValueDef, getSecondaryChannel } from "../encoder/encoder";
+
+/**
+ *
+ * @typedef {import("../spec/channel").Encoding} Encoding
+ * @typedef {import("../spec/channel").Channel} Channel
+ */
+
+/**
+ * @param {Encoding} encoding
+ * @param {Channel} channel
+ */
+export function fixPositional(encoding, channel) {
+    const secondary = getSecondaryChannel(channel);
+    if (encoding[channel]) {
+        if (!encoding[secondary]) {
+            if (encoding[channel].type == "quantitative") {
+                // Bar plot, anchor the other end to zero
+                encoding[secondary] = {
+                    datum: 0,
+                };
+            } else {
+                // Must make copies because the definition may be shared with other views/marks
+                encoding[channel] = { ...encoding[channel] };
+                encoding[secondary] = { ...encoding[channel] };
+
+                // Fill the bands (bar plot / heatmap)
+                // We are following the Vega-Lite convention:
+                // the band property works differently on rectangular marks, i.e., it adjusts the band coverage.
+                const adjustment = (1 - (encoding[channel].band || 1)) / 2;
+                encoding[channel].band = 0 + adjustment;
+                encoding[secondary].band = 1 - adjustment;
+
+                // TODO: If the secondary channel duplicates the primary channel
+                // the data should be uploaded to the GPU only once.
+            }
+        } else if (encoding[channel].type != "quantitative") {
+            const adjustment = (1 - (encoding[channel].band || 1)) / 2;
+            encoding[channel].band = adjustment;
+            encoding[secondary].band = -adjustment;
+        }
+    } else if (encoding[secondary]) {
+        throw new Error(
+            `Only secondary channel ${secondary} has been specified!`
+        );
+    } else {
+        // Nothing specified, fill the whole viewport
+        encoding[channel] = { value: 0 };
+        encoding[secondary] = { value: 1 };
+    }
+}
+
+/**
+ * @param {import("../spec/channel").Encoding} encoding
+ * @param {boolean} filled
+ */
+export function fixStroke(encoding, filled) {
+    if (!encoding.stroke) {
+        if (filled) {
+            encoding.stroke = { value: null };
+        } else {
+            encoding.stroke = {
+                resolutionChannel: "color",
+                ...encoding.color,
+            };
+            // TODO: Whattabout default strokeWidth?
+        }
+    }
+
+    if (isValueDef(encoding.stroke) && encoding.stroke.value === null) {
+        encoding.strokeWidth = { value: 0 };
+    }
+
+    if (!encoding.strokeOpacity) {
+        encoding.strokeOpacity = {
+            resolutionChannel: "opacity",
+            ...encoding.opacity,
+        };
+    }
+}
+
+/**
+ * @param {import("../spec/channel").Encoding} encoding
+ * @param {boolean} filled
+ */
+export function fixFill(encoding, filled) {
+    if (isValueDef(encoding.fill) && encoding.fill.value === null) {
+        encoding.fillOpacity = { value: 0 };
+    } else if (!encoding.fill) {
+        encoding.fill = {
+            resolutionChannel: "color",
+            ...encoding.color,
+        };
+        if (!filled && !encoding.fillOpacity) {
+            encoding.fillOpacity = { value: 0 };
+        }
+    }
+
+    if (!encoding.fillOpacity) {
+        if (filled) {
+            encoding.fillOpacity = {
+                resolutionChannel: "opacity",
+                ...encoding.opacity,
+            };
+        } else {
+            encoding.fillOpacity = { value: 0 };
+        }
+    }
+}

package/src/marks/pointMark.js

@@ -0,0 +1,279 @@
+import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
+import { bisector, quantileSorted } from "d3-array";
+import { zoomLinear } from "vega-util";
+import { PointVertexBuilder } from "../gl/dataToVertices";
+import VERTEX_SHADER from "../gl/point.vertex.glsl";
+import FRAGMENT_SHADER from "../gl/point.fragment.glsl";
+
+import Mark from "./mark";
+import { sampleIterable } from "../data/transforms/sample";
+import { fixFill, fixStroke } from "./markUtils";
+
+/** @type {Record<string, import("../view/viewUtils").ChannelDef>} */
+const defaultEncoding = {};
+
+export default class PointMark extends Mark {
+    /**
+     * @param {import("../view/unitView").default} unitView
+     */
+    constructor(unitView) {
+        super(unitView);
+
+        Object.defineProperties(
+            this.defaultProperties,
+            Object.getOwnPropertyDescriptors({
+                x: 0.5,
+                y: 0.5,
+                color: "#4c78a8",
+                filled: true,
+                opacity: 1.0,
+                size: 100.0,
+                semanticScore: 0.0, // TODO: Should be datum instead of value. But needs fixing.
+                shape: "circle",
+                strokeWidth: 2.0,
+                fillGradientStrength: 0.0,
+                dx: 0,
+                dy: 0,
+                angle: 0,
+
+                sampleFacetPadding: 0.1,
+
+                semanticZoomFraction: 0.02,
+            })
+        );
+    }
+
+    getAttributes() {
+        return [
+            "inwardStroke",
+            "uniqueId",
+            "facetIndex",
+            "x",
+            "y",
+            "size",
+            "semanticScore",
+            "shape",
+            "strokeWidth",
+            "gradientStrength",
+            "dx",
+            "dy",
+            "fill",
+            "stroke",
+            "fillOpacity",
+            "strokeOpacity",
+            "angle",
+        ];
+    }
+
+    /**
+     * @returns {import("../spec/channel").Channel[]}
+     */
+    getSupportedChannels() {
+        return [
+            ...super.getSupportedChannels(),
+            "size",
+            "semanticScore",
+            "shape",
+            "strokeWidth",
+            "dx",
+            "dy",
+            "fill",
+            "stroke",
+            "fillOpacity",
+            "strokeOpacity",
+            "angle",
+        ];
+    }
+
+    getDefaultEncoding() {
+        return { ...super.getDefaultEncoding(), ...defaultEncoding };
+    }
+
+    /**
+     * @param {import("../spec/channel").Encoding} encoding
+     * @returns {import("../spec/channel").Encoding}
+     */
+    fixEncoding(encoding) {
+        fixStroke(encoding, this.properties.filled);
+        fixFill(encoding, this.properties.filled);
+
+        // TODO: Function for getting rid of extras. Also should validate that all attributes are defined
+        delete encoding.color;
+        delete encoding.opacity;
+
+        return encoding;
+    }
+
+    initializeData() {
+        super.initializeData();
+
+        // Semantic zooming is currently solely a feature of point mark.
+        // Build a sorted sample that allows for computing p-quantiles
+        const semanticScoreAccessor =
+            this.unitView.getAccessor("semanticScore");
+        if (semanticScoreAccessor) {
+            // n chosen using Stetson-Harrison
+            // TODO: Throw on missing scores
+            this.sampledSemanticScores = Float32Array.from(
+                sampleIterable(
+                    10000,
+                    this.unitView.getCollector().getData(),
+                    semanticScoreAccessor
+                )
+            );
+            this.sampledSemanticScores.sort((a, b) => a - b);
+        }
+    }
+
+    async initializeGraphics() {
+        await super.initializeGraphics();
+        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER);
+    }
+
+    finalizeGraphicsInitialization() {
+        super.finalizeGraphicsInitialization();
+
+        this.gl.useProgram(this.programInfo.program);
+
+        const props = this.properties;
+        setUniforms(this.programInfo, {
+            uInwardStroke: props.inwardStroke,
+            uGradientStrength: props.fillGradientStrength,
+            uMaxRelativePointDiameter: 1 - 2 * props.sampleFacetPadding,
+        });
+    }
+
+    updateGraphicsData() {
+        const collector = this.unitView.getCollector();
+        const itemCount = collector.getItemCount();
+
+        const builder = new PointVertexBuilder({
+            encoders: this.encoders,
+            attributes: this.getAttributes(),
+            numItems: Math.max(itemCount, this.properties.minBufferSize || 0),
+        });
+
+        builder.addBatches(collector.facetBatches);
+
+        const vertexData = builder.toArrays();
+        this.rangeMap = vertexData.rangeMap;
+        this.updateBufferInfo(vertexData);
+    }
+
+    _getGeometricScaleFactor() {
+        const zoomLevel = Math.pow(2, this.properties.geometricZoomBound || 0);
+
+        return Math.pow(
+            Math.min(1, this.unitView.getZoomLevel() / zoomLevel),
+            1 / 3
+            // note: 1/3 appears to yield perceptually more uniform result than 1/2. I don't know why!
+        );
+    }
+
+    /**
+     * Returns the maximum size of the points in the data, before any scaling
+     */
+    _getMaxPointSize() {
+        const e = this.encoders.size;
+        if (e.constant) {
+            return e(null);
+        } else {
+            return e.scale.range().reduce((a, b) => Math.max(a, b));
+        }
+    }
+
+    getSemanticThreshold() {
+        if (this.sampledSemanticScores) {
+            const p = Math.max(
+                0,
+                1 -
+                    this.properties.semanticZoomFraction *
+                        this.unitView.getZoomLevel()
+            );
+            if (p <= 0) {
+                // The sampled scores may be missing the min/max values
+                return -Infinity;
+            } else if (p >= 1) {
+                return Infinity;
+            } else {
+                return quantileSorted(this.sampledSemanticScores, p);
+            }
+        } else {
+            return -1;
+        }
+    }
+
+    /**
+     * @param {import("../view/rendering").GlobalRenderingOptions} options
+     */
+    prepareRender(options) {
+        super.prepareRender(options);
+
+        setUniforms(this.programInfo, {
+            uMaxPointSize: this._getMaxPointSize(),
+            uScaleFactor: this._getGeometricScaleFactor(),
+            uSemanticThreshold: this.getSemanticThreshold(),
+        });
+
+        setBuffersAndAttributes(
+            this.gl,
+            this.programInfo,
+            this.vertexArrayInfo
+        );
+
+        // Setup bisector that allows for searching the points that reside within the viewport.
+        const xEncoder = this.encoders.x;
+        if (xEncoder && !xEncoder.constant) {
+            const bisect = bisector(xEncoder.accessor).left;
+            const visibleDomain = this.unitView
+                .getScaleResolution("x")
+                .getScale()
+                .domain();
+
+            // A hack to include points that are just beyond the borders. TODO: Compute based on maxPointSize
+            const paddedDomain = zoomLinear(visibleDomain, null, 1.01);
+
+            /** @param {any[]} facetId */
+            this._findIndices = (facetId) => {
+                const data = this.unitView
+                    .getCollector()
+                    .facetBatches.get(facetId);
+
+                return [
+                    bisect(data, paddedDomain[0]),
+                    bisect(data, paddedDomain[paddedDomain.length - 1]),
+                ];
+            };
+        }
+    }
+
+    /**
+     * @param {import("./Mark").MarkRenderingOptions} options
+     */
+    render(options) {
+        const gl = this.gl;
+
+        return this.createRenderCallback(
+            (offset, count) => {
+                // TODO: findIndices is rather slow. Consider a more coarse-grained, "tiled" solution.
+                const [lower, upper] = this._findIndices
+                    ? this._findIndices(options.facetId)
+                    : [0, count];
+
+                const length = upper - lower;
+
+                if (length) {
+                    drawBufferInfo(
+                        gl,
+                        this.vertexArrayInfo,
+                        gl.POINTS,
+                        length,
+                        offset + lower
+                    );
+                }
+            },
+            options,
+            () => this.rangeMap
+        );
+    }
+}

package/src/marks/rectMark.js

@@ -0,0 +1,236 @@
+import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
+import VERTEX_SHADER from "../gl/rect.vertex.glsl";
+import FRAGMENT_SHADER from "../gl/rect.fragment.glsl";
+import { RectVertexBuilder } from "../gl/dataToVertices";
+
+import Mark from "./mark";
+import { fixFill, fixPositional, fixStroke } from "./markUtils";
+import { asArray } from "../utils/arrayUtils";
+import { isValueDef } from "../encoder/encoder";
+import { getCachedOrCall } from "../utils/propertyCacher";
+
+export default class RectMark extends Mark {
+    /**
+     * @param {import("../view/unitView").default} unitView
+     */
+    constructor(unitView) {
+        super(unitView);
+
+        Object.defineProperties(
+            this.defaultProperties,
+            Object.getOwnPropertyDescriptors({
+                x2: undefined,
+                y2: undefined,
+                filled: true,
+                color: "#4c78a8",
+                opacity: 1.0,
+                strokeWidth: 3,
+                cornerRadius: 0.0,
+
+                minWidth: 0.5, // Minimum width/height prevents annoying flickering when zooming
+                minHeight: 0.5,
+                minOpacity: 1.0,
+
+                tessellationZoomThreshold: 10, // This works with genomes, but likely breaks with other data. TODO: Fix, TODO: log2
+                tessellationTiles: 35, // TODO: Tiles per unit (bp)
+            })
+        );
+    }
+
+    getAttributes() {
+        return [
+            "uniqueId",
+            "facetIndex",
+            "x",
+            "x2",
+            "y",
+            "y2",
+            "fill",
+            "stroke",
+            "fillOpacity",
+            "strokeOpacity",
+            "strokeWidth",
+        ];
+    }
+
+    /**
+     * @returns {import("../spec/channel").Channel[]}
+     */
+    getSupportedChannels() {
+        return [
+            ...super.getSupportedChannels(),
+            "x2",
+            "y2",
+            "fill",
+            "stroke",
+            "fillOpacity",
+            "strokeOpacity",
+            "strokeWidth",
+        ];
+    }
+
+    get opaque() {
+        return (
+            getCachedOrCall(
+                this,
+                "opaque",
+                () =>
+                    !this._isRoundedCorners() &&
+                    !this._isStroked() &&
+                    isValueDef(this.encoding.fillOpacity) &&
+                    this.encoding.fillOpacity.value == 1.0 &&
+                    this.properties.minOpacity == 1.0
+            ) && this.unitView.getEffectiveOpacity() == 1
+        );
+    }
+
+    /**
+     * @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)
+        fixPositional(encoding, "x");
+        fixPositional(encoding, "y");
+
+        fixStroke(encoding, this.properties.filled);
+        fixFill(encoding, this.properties.filled);
+
+        // TODO: Function for getting rid of extras. Also should validate that all attributes are defined
+        delete encoding.color;
+        delete encoding.opacity;
+
+        return encoding;
+    }
+
+    onBeforeSampleAnimation() {
+        // TODO: Tessellate rects inside the viewport
+    }
+
+    onAfterSampleAnimation() {
+        // TODO: Pop the previous buffers
+    }
+
+    _isRoundedCorners() {
+        return ["", "TopLeft", "TopRight", "BottomLeft", "BottomRight"]
+            .map(
+                (c) =>
+                    /** @type {keyof import("../spec/mark").MarkConfig} */ (
+                        "cornerRadius" + c
+                    )
+            )
+            .some((c) => this.properties[c] > 0);
+    }
+
+    _isStroked() {
+        const sw = this.encoding.strokeWidth;
+        return !(isValueDef(sw) && !sw.value);
+    }
+
+    async initializeGraphics() {
+        await super.initializeGraphics();
+
+        /** @type {string[]} */
+        const defines = [];
+        if (this._isRoundedCorners()) {
+            defines.push("ROUNDED_CORNERS");
+        }
+        if (this._isStroked()) {
+            defines.push("STROKED");
+        }
+
+        this.createAndLinkShaders(
+            VERTEX_SHADER,
+            FRAGMENT_SHADER,
+            defines.map((d) => "#define " + d)
+        );
+    }
+
+    updateGraphicsData() {
+        const collector = this.unitView.getCollector();
+        const numItems = collector.getItemCount();
+
+        // TODO: Disable tessellation on SimpleTrack - no need for it
+        const builder = new RectVertexBuilder({
+            encoders: this.encoders,
+            attributes: this.getAttributes(),
+            numItems,
+            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);
+
+        const props = this.properties;
+
+        setUniforms(this.programInfo, {
+            uMinSize: [props.minWidth, props.minHeight], // in pixels
+            uMinOpacity: props.minOpacity,
+            uCornerRadii: [
+                props.cornerRadiusTopRight ?? props.cornerRadius,
+                props.cornerRadiusBottomRight ?? props.cornerRadius,
+                props.cornerRadiusTopLeft ?? props.cornerRadius,
+                props.cornerRadiusBottomLeft ?? props.cornerRadius,
+            ],
+        });
+
+        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
+        );
+    }
+
+    /**
+     * Finds a datum that overlaps the given value on the x domain.
+     * The result is unspecified if multiple data are found.
+     *
+     * This is highly specific to SampleView and its sorting/filtering functionality.
+     *
+     * @param {any} facetId
+     * @param {number} x position on the x domain
+     * @returns {any}
+     */
+    findDatumAt(facetId, x) {
+        facetId = asArray(facetId); // TODO: Do at the call site
+        const e = this.encoders;
+        const data = this.unitView.getCollector().facetBatches.get(facetId);
+        const a = e.x.accessor;
+        const a2 = e.x2.accessor;
+        if (data) {
+            // TODO: Binary search
+            return data.find((d) => x >= a(d) && x < a2(d));
+        }
+    }
+}