@genome-spy/core 0.30.0 → 0.30.2

package/src/marks/markUtils.js

@@ -1,125 +0,0 @@
-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/src/marks/pointMark.js

@@ -1,251 +0,0 @@
-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";
-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.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("../view/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/src/marks/rectMark.js

@@ -1,241 +0,0 @@
-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)
-        );
-    }
-
-    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("../view/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 {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));
-        }
-    }
-}