@genome-spy/core 0.14.0

package/src/utils/topK.test.js

@@ -0,0 +1,63 @@
+import { range } from "d3-array";
+import { topK, topKSlice } from "./topK";
+
+test("topK returns top k numbers in priority order", () => {
+    /** @param {number} x */
+    const priorityAccessor = (x) => x;
+
+    expect(topK([1, 2, 3], 3, priorityAccessor)).toEqual([3, 2, 1]);
+    expect(topK([1, 2, 3], 1, priorityAccessor)).toEqual([3]);
+    expect(topK([1, 2, 3], 6, priorityAccessor)).toEqual([3, 2, 1]);
+    expect(topK([1, 2, 3, 4, 5, 6], 3, priorityAccessor)).toEqual([6, 5, 4]);
+    expect(topK([0, 9, 1, 8, 2, 7, 3, 6, 4, 5], 3, priorityAccessor)).toEqual([
+        9, 8, 7,
+    ]);
+    expect(topK([1, 1, 1], 3, priorityAccessor)).toEqual([1, 1, 1]);
+});
+
+test("topK returns top k objects in priority order", () => {
+    /** @param {{priority: number}} d */
+    const priorityAccessor = (d) => d.priority;
+
+    expect(
+        topK(
+            [0, 9, 1, 8, 2, 7, 3, 6, 4, 5].map((x) => ({ priority: x })),
+            3,
+            priorityAccessor
+        )
+    ).toEqual([9, 8, 7].map((x) => ({ priority: x })));
+});
+
+test("topK returns top k objects in priority order with large datasets", () => {
+    /** @param {number} x */
+    const priorityAccessor = (x) => x;
+
+    const n = 10000;
+    const bigArray = range(n).map((x) => Math.floor(Math.random() * 100));
+    const sortedBigArray = bigArray.slice().sort((a, b) => b - a);
+
+    for (let k = 0; k < 13000; k += 1000) {
+        expect(topK(bigArray, k, priorityAccessor)).toEqual(
+            sortedBigArray.slice(0, k)
+        );
+    }
+});
+
+test("topKSlice returns top k indexes in priority order", () => {
+    expect(topKSlice([0, 1, 2], 3)).toEqual([2, 1, 0]);
+    expect(topKSlice([1, 2, 3], 3)).toEqual([2, 1, 0]);
+    expect(topKSlice([0, 1, 2], 1)).toEqual([2]);
+    expect(topKSlice([0, 1, 2], 6)).toEqual([2, 1, 0]);
+    expect(topKSlice([0, 1, 2, 3, 4, 5], 3)).toEqual([5, 4, 3]);
+    expect(topKSlice([0, 9, 1, 8, 2, 7, 3, 6, 4, 5], 3)).toEqual([1, 3, 5]);
+    expect(new Set(topKSlice([1, 1, 1, 2, 2, 2], 3))).toEqual(
+        new Set([3, 4, 5])
+    );
+});
+
+test("topKSlice returns top k indexes from a slice in priority order", () => {
+    expect(topKSlice([0, 1, 2, 3, 4, 5], 2, 1, 5)).toEqual([4, 3]);
+    expect(topKSlice([0, 9, 1, 8, 2, 7, 3, 6, 4, 5], 3, 1, 5)).toEqual([
+        1, 3, 4,
+    ]);
+});

package/src/utils/transition.js

@@ -0,0 +1,74 @@
+/** @param {number} ms */
+const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/**
+ * @param {TransitionOptions} options
+ *
+ * @typedef {Object} TransitionOptions
+ * @prop {number} [from] default: 0
+ * @prop {number} [to] default: 1
+ * @prop {number} [duration] in milliseconds, default: 1000
+ * @prop {number} [delay] milliseconds to wait before the transition starts, default: 0
+ * @prop {function(number):void} onUpdate
+ * @prop {function(number):number} [easingFunction] default: linear
+ * @prop {function(function(number):void):void} [requestAnimationFrame]
+ *      default: window.requestAnimationFrame
+ * @prop {AbortSignal} [signal]
+ */
+export default function transition(options) {
+    const requestAnimationFrame =
+        options.requestAnimationFrame || window.requestAnimationFrame;
+
+    const signal = options.signal;
+
+    const makePromise = () =>
+        new Promise((resolve, reject) => {
+            if (signal?.aborted) {
+                return reject("aborted");
+            }
+
+            const beginTimestamp = performance.now();
+            const endTimestamp = beginTimestamp + (options.duration || 1000);
+
+            const from = typeof options.from == "number" ? options.from : 0;
+            const to = typeof options.to == "number" ? options.to : 1;
+            const ease = options.easingFunction || ((x) => x);
+
+            /** @param {number} x */
+            const toUnit = (x) =>
+                (x - beginTimestamp) / (endTimestamp - beginTimestamp);
+
+            /** @param {number} x */
+            const toRange = (x) => x * (to - from) + from;
+
+            /** @param {number} x */
+            const clamp = (x) => Math.max(0, Math.min(1, x));
+
+            /** @param {number} stamp */
+            const step = (stamp) => {
+                if (signal?.aborted) {
+                    reject("aborted");
+                } else {
+                    options.onUpdate(toRange(ease(clamp(toUnit(stamp)))));
+                    if (stamp < endTimestamp) {
+                        requestAnimationFrame(step);
+                    } else {
+                        options.onUpdate(toRange(ease(1)));
+                        resolve();
+                    }
+                }
+            };
+
+            requestAnimationFrame(step);
+        });
+
+    if (options.delay) {
+        if (signal?.aborted) {
+            return Promise.reject("aborted");
+        }
+
+        return wait(options.delay).then(makePromise);
+    } else {
+        return makePromise();
+    }
+}

package/src/utils/ui/tooltip.js

@@ -0,0 +1,189 @@
+import clientPoint from "../point";
+import { html, render } from "lit-html";
+import { peek } from "../arrayUtils";
+
+export const SUPPRESS_TOOLTIP_CLASS_NAME = "gs-suppress-tooltip";
+
+export default class Tooltip {
+    /**
+     * @param {HTMLElement} container
+     */
+    constructor(container) {
+        this.container = container;
+
+        this.element = document.createElement("div");
+        this.element.className = "tooltip";
+        this._visible = true;
+        this.container.appendChild(this.element);
+
+        /** @type {any} */
+        this._previousTooltipDatum = undefined;
+
+        this.enabledStack = [true];
+
+        this._penaltyUntil = 0;
+        /** @type {[number, number]} */
+        this._lastCoords = undefined;
+
+        this._previousMove = 0;
+
+        this.clear();
+    }
+
+    /**
+     * @param {boolean} visible
+     */
+    set visible(visible) {
+        if (visible != this._visible) {
+            this.element.style.display = visible ? null : "none";
+            this._visible = visible;
+        }
+    }
+
+    get visible() {
+        return this._visible;
+    }
+
+    get enabled() {
+        return peek(this.enabledStack) ?? true;
+    }
+
+    /**
+     * @param {boolean} enabled True if tooltip is enabled (allowed to be shown)
+     */
+    pushEnabledState(enabled) {
+        this.enabledStack.push(enabled);
+        if (!enabled) {
+            this.visible = false;
+        }
+    }
+
+    popEnabledState() {
+        this.enabledStack.pop();
+    }
+
+    /**
+     * @param {MouseEvent} mouseEvent
+     */
+    handleMouseMove(mouseEvent) {
+        this.mouseCoords = clientPoint(this.container, mouseEvent);
+
+        const now = performance.now();
+
+        // Prevent the tooltip from flashing briefly before it becomes penalized
+        // because of a quickly moving mouse pointer
+        if (
+            !this.visible &&
+            !this._isPenalty() &&
+            now - this._previousMove > 500
+        ) {
+            this._penaltyUntil = now + 70;
+        }
+
+        // Disable the tooltip for a while if the mouse is being moved very quickly.
+        // Makes the tooltip less annoying.
+        // TODO: Should calculate speed: pixels per millisecond or something
+        if (
+            this._lastCoords &&
+            distance(this.mouseCoords, this._lastCoords) > 20
+        ) {
+            this._penaltyUntil = now + 400;
+        }
+
+        this._lastCoords = this.mouseCoords;
+
+        if (this.visible) {
+            this.updatePlacement();
+        }
+
+        this._previousMove = now;
+    }
+
+    updatePlacement() {
+        /** Space between pointer and tooltip box */
+        const spacing = 20;
+
+        const [mouseX, mouseY] = this.mouseCoords;
+
+        let x = mouseX + spacing;
+        if (x > this.container.clientWidth - this.element.offsetWidth) {
+            x = mouseX - spacing - this.element.offsetWidth;
+        }
+        this.element.style.left = x + "px";
+
+        this.element.style.top =
+            Math.min(
+                mouseY + spacing,
+                this.container.clientHeight - this.element.offsetHeight
+            ) + "px";
+    }
+
+    /**
+     * @param {string | import("lit").TemplateResult | HTMLElement} content
+     */
+    setContent(content) {
+        if (!content || !this.enabled || this._isPenalty()) {
+            if (this.visible) {
+                render("", this.element);
+                this.visible = false;
+            }
+            this._previousTooltipDatum = undefined;
+            return;
+        }
+
+        render(content, this.element);
+
+        this.visible = true;
+
+        this.updatePlacement();
+    }
+
+    clear() {
+        this._previousTooltipDatum = undefined;
+        this.setContent(undefined);
+    }
+
+    /**
+     * Updates the tooltip if the provided datum differs from the previous one.
+     * Otherwise this is nop.
+     *
+     * @param {T} datum
+     * @param {function(T):Promise<string | HTMLElement | import("lit").TemplateResult>} [converter]
+     * @template T
+     */
+    updateWithDatum(datum, converter) {
+        if (datum !== this._previousTooltipDatum) {
+            this._previousTooltipDatum = datum;
+            if (!converter) {
+                converter = (d) =>
+                    Promise.resolve(html` ${JSON.stringify(d)} `);
+            }
+
+            converter(datum)
+                .then((result) => this.setContent(result))
+                .catch((error) => {
+                    if (error !== "debounced") {
+                        throw error;
+                    }
+                });
+        }
+    }
+
+    _isPenalty() {
+        return this._penaltyUntil && this._penaltyUntil > performance.now();
+    }
+}
+
+/**
+ * Calculate euclidean distance
+ *
+ * @param {number[]} a
+ * @param {number[]} b
+ */
+function distance(a, b) {
+    let sum = 0;
+    for (let i = 0; i < a.length; i++) {
+        sum += (a[i] - b[i]) ** 2;
+    }
+    return Math.sqrt(sum);
+}

package/src/utils/url.js

@@ -0,0 +1,22 @@
+const protoRe = /^([A-Za-z]+:)?\/\//;
+
+/**
+ * Append a relative or absolute url to a base url.
+ * The base part is omitted if the append part is absolute.
+ *
+ * @param {function():string} baseAccessor
+ * @param {string} append
+ */
+export function appendToBaseUrl(baseAccessor, append) {
+    if (append && protoRe.test(append)) {
+        return append;
+    }
+
+    const base = baseAccessor();
+
+    if (base && append) {
+        return base.endsWith("/") ? base + append : base + "/" + append;
+    }
+
+    return base ?? append;
+}

package/src/utils/variableTools.js

@@ -0,0 +1,24 @@
+import { isBoolean, isNumber, isString } from "vega-util";
+
+/** A set of typical NA values */
+export const NAs = new Set(["", "NA", ".", "-"]);
+
+/**
+ * Tests whether the given array of strings can be interpreted as a numeric vector
+ *
+ * @param {string[]} values
+ */
+export function inferNumeric(values) {
+    return values
+        .filter((value) => typeof value == "string")
+        .filter((value) => !NAs.has(value))
+        .every((value) => /^[+-]?\d+(\.\d*)?$/.test(value));
+}
+
+/**
+ * @param {any} value
+ * @returns {value is string | number | boolean}
+ */
+export function isScalar(value) {
+    return isString(value) || isNumber(value) || isBoolean(value);
+}

package/src/utils/variableTools.test.js

@@ -0,0 +1,12 @@
+import * as vt from "./variableTools";
+
+test("InferNumerality", () => {
+    expect(vt.inferNumeric(["0", "1", "2.2", "-4"])).toBeTruthy();
+    expect(vt.inferNumeric(["0", ...vt.NAs.values()])).toBeTruthy();
+    expect(vt.inferNumeric([])).toBeTruthy();
+
+    expect(vt.inferNumeric(["0", "x"])).toBeFalsy();
+    expect(vt.inferNumeric(["0", " "])).toBeFalsy();
+    expect(vt.inferNumeric(["0", "1,2"])).toBeFalsy();
+    expect(vt.inferNumeric(["0", "20x"])).toBeFalsy();
+});

package/src/view/axisResolution.js

@@ -0,0 +1,135 @@
+import { isString } from "vega-util";
+import {
+    getChannelDefWithScale,
+    getPrimaryChannel,
+    isExprDef,
+    isFieldDef,
+    isSecondaryChannel,
+} from "../encoder/encoder";
+import { peek } from "../utils/arrayUtils";
+import coalesce from "../utils/coalesce";
+
+import mergeObjects from "../utils/mergeObjects";
+import { getCachedOrCall } from "../utils/propertyCacher";
+
+/**
+ *
+ * @typedef { import("./unitView").default} UnitView
+ */
+export default class AxisResolution {
+    /**
+     * @param {import("../spec/channel").Channel} channel
+     */
+    constructor(channel) {
+        this.channel = channel;
+        /** @type {import("./scaleResolution").ResolutionMember[]} The involved views */
+        this.members = [];
+    }
+
+    get scaleResolution() {
+        return peek(this.members)?.view.getScaleResolution(this.channel);
+    }
+
+    /**
+     * N.B. This is expected to be called in depth-first order, AFTER the
+     * scales have been resolved.
+     *
+     * @param {UnitView} view
+     * @param {import("../spec/channel").Channel} channel TODO: Do something for this
+     */
+    pushUnitView(view, channel) {
+        const newScaleResolution = view.getScaleResolution(this.channel);
+
+        if (!newScaleResolution) {
+            throw new Error("Cannot find a scale resolution!");
+        }
+
+        if (
+            this.scaleResolution &&
+            newScaleResolution !== this.scaleResolution
+        ) {
+            throw new Error("Shared axes must have a shared scale!");
+        }
+
+        this.members.push({ view, channel });
+    }
+
+    getAxisProps() {
+        return getCachedOrCall(this, "axisProps", () => {
+            const propArray = this.members.map(
+                (member) =>
+                    getChannelDefWithScale(member.view, member.channel).axis
+            );
+
+            if (
+                propArray.length > 0 &&
+                propArray.some((props) => props === null)
+            ) {
+                // No axis whatsoever is wanted
+                return null;
+            } else {
+                return /** @type { import("../spec/axis").Axis} */ (
+                    mergeObjects(
+                        propArray.filter((props) => props !== undefined),
+                        "axis",
+                        ["title"]
+                    )
+                );
+            }
+        });
+    }
+
+    getTitle() {
+        /** @param {import("./scaleResolution").ResolutionMember} member} */
+        const computeTitle = (member) => {
+            const channelDef = getChannelDefWithScale(
+                member.view,
+                member.channel
+            );
+
+            // Retain nulls as they indicate that no title should be shown
+
+            return {
+                member,
+                explicitTitle: coalesce(
+                    channelDef.axis?.title,
+                    channelDef.title
+                ),
+                implicitTitle: coalesce(
+                    isFieldDef(channelDef) ? channelDef.field : undefined,
+                    isExprDef(channelDef) ? channelDef.expr : undefined
+                ),
+            };
+        };
+
+        const titles = this.members.map(computeTitle);
+
+        // Skip implicit secondary channel titles if the primary channel has an explicit title
+        const filteredTitles = titles.filter((title) => {
+            if (
+                isSecondaryChannel(title.member.channel) &&
+                !title.explicitTitle
+            ) {
+                const primaryChannel = getPrimaryChannel(title.member.channel);
+                return (
+                    titles.find(
+                        (title2) =>
+                            title2.member.view == title.member.view &&
+                            title2.member.channel == primaryChannel
+                    )?.explicitTitle === undefined
+                );
+            }
+            return true;
+        });
+
+        const uniqueTitles = new Set(
+            filteredTitles
+                .map((title) =>
+                    coalesce(title.explicitTitle, title.implicitTitle)
+                )
+                .filter(isString)
+        );
+
+        return uniqueTitles.size ? [...uniqueTitles].join(", ") : null;
+    }
+}