@genome-spy/core 0.36.1 → 0.37.0

package/dist/src/marks/markUtils.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ * @typedef {import("../spec/channel").Encoding} Encoding
+ * @typedef {import("../spec/channel").Channel} Channel
+ */
+/**
+ * @param {Encoding} encoding
+ * @param {import("../spec/channel").PrimaryPositionalChannel} channel
+ */
+export function fixPositional(encoding: Encoding, channel: import("../spec/channel").PrimaryPositionalChannel): void;
+/**
+ * @param {import("../spec/channel").Encoding} encoding
+ * @param {boolean} filled
+ */
+export function fixStroke(encoding: import("../spec/channel").Encoding, filled: boolean): void;
+/**
+ * @param {import("../spec/channel").Encoding} encoding
+ * @param {boolean} filled
+ */
+export function fixFill(encoding: import("../spec/channel").Encoding, filled: boolean): void;
+export type Encoding = import("../spec/channel").Encoding;
+export type Channel = import("../spec/channel").Channel;
+//# sourceMappingURL=markUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"markUtils.d.ts","sourceRoot":"","sources":["../../../src/marks/markUtils.js"],"names":[],"mappings":"AAMA;;;;GAIG;AAEH;;;GAGG;AACH,wCAHW,QAAQ,WACR,OAAO,iBAAiB,EAAE,wBAAwB,QAoD5D;AAED;;;GAGG;AACH,oCAHW,OAAO,iBAAiB,EAAE,QAAQ,UAClC,OAAO,QAyBjB;AAED;;;GAGG;AACH,kCAHW,OAAO,iBAAiB,EAAE,QAAQ,UAClC,OAAO,QAyBjB;uBApHY,OAAO,iBAAiB,EAAE,QAAQ;sBAClC,OAAO,iBAAiB,EAAE,OAAO"}

package/dist/src/marks/markUtils.js

@@ -0,0 +1,125 @@
+import {
+    isValueDef,
+    getSecondaryChannel,
+    isChannelDefWithScale,
+} from "../encoder/encoder";
+
+/**
+ *
+ * @typedef {import("../spec/channel").Encoding} Encoding
+ * @typedef {import("../spec/channel").Channel} Channel
+ */
+
+/**
+ * @param {Encoding} encoding
+ * @param {import("../spec/channel").PrimaryPositionalChannel} channel
+ */
+export function fixPositional(encoding, channel) {
+    const secondaryChannel = getSecondaryChannel(channel);
+
+    // Must make copies because the definition may be shared with other views/marks
+    let primary = encoding[channel] && { ...encoding[channel] };
+    let secondary = encoding[secondaryChannel] && {
+        ...encoding[secondaryChannel],
+    };
+
+    if (isValueDef(primary) || isValueDef(secondary)) {
+        return;
+    }
+
+    if (primary) {
+        // TODO: fix. May not be a proper type guard.
+        if (!isChannelDefWithScale(encoding[channel])) {
+            // nop
+            return;
+        }
+
+        if (!secondary) {
+            if (primary.type == "quantitative") {
+                // Bar plot, anchor the other end to zero
+                secondary = { datum: 0 };
+            } else {
+                secondary = { ...primary };
+
+                // 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 - (primary.band ?? 1)) / 2;
+                primary.band = 0 + adjustment;
+                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 (primary.type != "quantitative") {
+            const adjustment = (1 - (primary.band || 1)) / 2;
+            primary.band = adjustment;
+            secondary.band = -adjustment;
+        }
+    } else {
+        // Nothing specified, fill the whole viewport
+        primary = { value: 0 };
+        secondary = { value: 1 };
+    }
+
+    encoding[channel] = primary;
+    encoding[secondaryChannel] = secondary;
+}
+
+/**
+ * @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/dist/src/marks/pointMark.d.ts

@@ -0,0 +1,11 @@
+export default class PointMark extends Mark {
+    sampledSemanticScores: Float32Array;
+    _getGeometricScaleFactor(): number;
+    /**
+     * Returns the maximum size of the points in the data, before any scaling
+     */
+    _getMaxPointSize(): import("../spec/channel").Scalar;
+    getSemanticThreshold(): number;
+}
+import Mark from "./mark";
+//# sourceMappingURL=pointMark.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pointMark.d.ts","sourceRoot":"","sources":["../../../src/marks/pointMark.js"],"names":[],"mappings":"AAaA;IAsGY,oCAMC;IAwCT,mCAQC;IAED;;OAEG;IACH,qDASC;IAED,+BAoBC;CA6CJ;iBApPgB,QAAQ"}

package/dist/src/marks/pointMark.js

@@ -0,0 +1,251 @@
+import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
+import { quantileSorted } from "d3-array";
+import { PointVertexBuilder } from "../gl/dataToVertices";
+import VERTEX_SHADER from "../gl/point.vertex.glsl.js";
+import FRAGMENT_SHADER from "../gl/point.fragment.glsl.js";
+
+import Mark from "./mark";
+import { sampleIterable } from "../data/transforms/sample";
+import { fixFill, fixStroke } from "./markUtils";
+
+/** @type {Record<string, import("../spec/channel").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.migrateEntries(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 /** @type {number[]} */ (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 {
+                const scores = /** @type {any} */ (this.sampledSemanticScores);
+                return quantileSorted(/** @type {number[]} */ (scores), p);
+            }
+        } else {
+            return -1;
+        }
+    }
+
+    /**
+     * @param {import("../types/rendering").GlobalRenderingOptions} options
+     */
+    prepareRender(options) {
+        const ops = super.prepareRender(options);
+
+        ops.push(() =>
+            setUniforms(this.programInfo, {
+                uMaxPointSize: this._getMaxPointSize(),
+                uScaleFactor: this._getGeometricScaleFactor(),
+                uSemanticThreshold: this.getSemanticThreshold(),
+            })
+        );
+
+        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) => {
+            if (count) {
+                drawBufferInfo(
+                    gl,
+                    this.vertexArrayInfo,
+                    gl.POINTS,
+                    count,
+                    offset
+                );
+            }
+        }, options);
+    }
+}

package/dist/src/marks/rectMark.d.ts

@@ -0,0 +1,18 @@
+export default class RectMark extends Mark {
+    _isRoundedCorners(): number;
+    _isStroked(): boolean;
+    /**
+     * 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 {import("../spec/channel").Scalar} x value on the x domain
+     * @returns {any}
+     * @override
+     */
+    override findDatumAt(facetId: any, x: import("../spec/channel").Scalar): any;
+}
+import Mark from "./mark";
+//# sourceMappingURL=rectMark.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rectMark.d.ts","sourceRoot":"","sources":["../../../src/marks/rectMark.js"],"names":[],"mappings":"AAYA;IAsGI,4BASC;IAED,sBAGC;IA4FD;;;;;;;;;;OAUG;IACH,8BALW,GAAG,KACH,OAAO,iBAAiB,EAAE,MAAM,GAC9B,GAAG,CAyBf;CACJ;iBAzPgB,QAAQ"}

package/dist/src/marks/rectMark.js

@@ -0,0 +1,255 @@
+import { drawBufferInfo, setBuffersAndAttributes, setUniforms } from "twgl.js";
+import VERTEX_SHADER from "../gl/rect.vertex.glsl.js";
+import FRAGMENT_SHADER from "../gl/rect.fragment.glsl.js";
+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";
+import { isDiscrete } from "vega-scale";
+
+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() {
+        const p = this.properties;
+        return (
+            p.cornerRadius ||
+            p.cornerRadiusBottomLeft ||
+            p.cornerRadiusBottomRight ||
+            p.cornerRadiusTopLeft ||
+            p.cornerRadiusTopRight
+        );
+    }
+
+    _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)
+        );
+    }
+
+    finalizeGraphicsInitialization() {
+        super.finalizeGraphicsInitialization();
+
+        this.gl.useProgram(this.programInfo.program);
+
+        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,
+            ],
+        });
+    }
+
+    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,
+        });
+
+        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);
+
+        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);
+    }
+
+    /**
+     * 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 {import("../spec/channel").Scalar} x value on the x domain
+     * @returns {any}
+     * @override
+     */
+    findDatumAt(facetId, x) {
+        facetId = asArray(facetId); // TODO: Do at the call site
+        const data = this.unitView.getCollector().facetBatches.get(facetId);
+        if (!data) {
+            return;
+        }
+
+        const e = this.encoders;
+
+        const scaleType = e.x.scale.type;
+
+        if (isDiscrete(scaleType)) {
+            const a = e.x.accessor;
+            // TODO: Binary search
+            return data.find((d) => x == a(d));
+        } else {
+            // TODO: Handle point features on locus/index scales
+            const a = e.x.accessor;
+            const a2 = e.x2.accessor;
+            // TODO: Binary search
+            return data.find((d) => x >= a(d) && x < a2(d));
+        }
+    }
+}

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

@@ -0,0 +1,6 @@
+export default class RuleMark extends Mark {
+    dashTextureSize: number;
+    dashTexture: WebGLTexture;
+}
+import Mark from "./mark.js";
+//# sourceMappingURL=rule.d.ts.map