@genome-spy/core 0.14.0

package/src/utils/html.js

@@ -0,0 +1,23 @@
+/* https://stackoverflow.com/a/41699140/1547896 */
+
+export function escapeHtml(str) {
+    var map = {
+        "&": "&",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#039;",
+    };
+    return str.replace(/[&<>"']/g, (m) => map[m]);
+}
+
+export function decodeHtml(str) {
+    var map = {
+        "&amp;": "&",
+        "&lt;": "<",
+        "&gt;": ">",
+        "&quot;": '"',
+        "&#039;": "'",
+    };
+    return str.replace(/&amp;|&lt;|&gt;|&quot;|&#039;/g, (m) => map[m]);
+}

package/src/utils/html.test.js

@@ -0,0 +1,13 @@
+import * as html from "./html";
+
+test("Escape HTML", () => {
+    expect(html.escapeHtml('< "x" & "y" >')).toEqual(
+        "&lt; &quot;x&quot; &amp; &quot;y&quot; &gt;"
+    );
+});
+
+test("Decode HTML", () => {
+    expect(
+        html.decodeHtml("&lt; &quot;x&quot; &amp; &quot;y&quot; &gt;")
+    ).toEqual('< "x" & "y" >');
+});

package/src/utils/indexer.js

@@ -0,0 +1,43 @@
+/**
+ * Assigns unique values an index number in the order they are encountered.
+ *
+ * TODO: What about undefined?
+ *
+ * @template T
+ */
+export default function createIndexer() {
+    let counter = 0;
+
+    /** @type {Map<T, number>} */
+    const values = new Map();
+
+    /** @param {T} value */
+    const indexer = (value) => {
+        let index = values.get(value);
+        if (index === undefined) {
+            index = counter++;
+            values.set(value, index);
+        }
+        return index;
+    };
+
+    /** @param {Iterable<T>} iterable */
+    indexer.addAll = (iterable) => {
+        for (const value of iterable) {
+            indexer(value);
+        }
+    };
+
+    /** @param {number} value */
+    indexer.invert = (value) => {
+        for (const entry of values.entries()) {
+            if (entry[1] == value) {
+                return entry[0];
+            }
+        }
+    };
+
+    indexer.domain = () => [...values.keys()];
+
+    return indexer;
+}

package/src/utils/indexer.test.js

@@ -0,0 +1,46 @@
+import createIndexer from "./indexer";
+
+test("Index values one by one", () => {
+    const indexer = createIndexer();
+
+    expect(indexer("a")).toEqual(0);
+    expect(indexer("b")).toEqual(1);
+    expect(indexer("c")).toEqual(2);
+    expect(indexer("a")).toEqual(0);
+    expect(indexer("c")).toEqual(2);
+});
+
+test("Index multiple values (predefined domain)", () => {
+    const indexer = createIndexer();
+
+    indexer.addAll(["a", "b", "c"]);
+
+    expect(indexer("d")).toEqual(3);
+    expect(indexer("a")).toEqual(0);
+    expect(indexer("b")).toEqual(1);
+    expect(indexer("c")).toEqual(2);
+    expect(indexer("d")).toEqual(3);
+});
+
+test("Indexer inverts index numbers", () => {
+    const indexer = createIndexer();
+
+    indexer.addAll(["a", "b", "c"]);
+
+    expect(indexer.invert(0)).toEqual("a");
+    expect(indexer.invert(1)).toEqual("b");
+    expect(indexer.invert(2)).toEqual("c");
+    expect(indexer.invert(3)).toBeUndefined();
+});
+
+test("Indexer return correct domain", () => {
+    const indexer = createIndexer();
+
+    expect(indexer("a")).toEqual(0);
+    expect(indexer("b")).toEqual(1);
+    expect(indexer("c")).toEqual(2);
+    expect(indexer("a")).toEqual(0);
+    expect(indexer("c")).toEqual(2);
+
+    expect(indexer.domain()).toEqual(["a", "b", "c"]);
+});

package/src/utils/inertia.js

@@ -0,0 +1,124 @@
+import { lerp } from "vega-util";
+
+/**
+ * Creates some inertia, mainly for zooming with a mechanical mouse wheel
+ */
+export default class Inertia {
+    /**
+     * @param {import("./animator").default} animator
+     * @param {boolean} [disabled] Just call the callback directly
+     */
+    constructor(animator, disabled) {
+        this.animator = animator;
+        this.disabled = !!disabled;
+        this.damping = 0.015;
+        this.acceleration = 0.3; // per event
+        /** Use acceleration if the momentum step is greater than X */
+        this.accelerationThreshold = 100;
+        this.lowerLimit = 0.5; // When to stop updating
+        this.loop = false;
+
+        this.momentum = 0;
+        this.timestamp = 0;
+        /** @type {function(number):void} */
+        this.callback = null;
+
+        this._transitionCallback = this.animate.bind(this);
+        this.clear();
+    }
+
+    clear() {
+        /** @type {number} */
+        this.momentum = 0;
+        this.timestamp = null;
+        this.loop = null;
+        this.callback = null;
+    }
+
+    cancel() {
+        if (this.loop) {
+            this.animator.cancelTransition(this._transitionCallback);
+            this.clear();
+        }
+    }
+
+    /**
+     *
+     * @param {number} value
+     * @param {function(number):void} callback
+     */
+    setMomentum(value, callback) {
+        if (this.disabled) {
+            callback(value);
+            return;
+        }
+
+        // This may have some use in the future to improve the behavior of
+        // a mechanical mouse wheel:
+        // https://github.com/w3c/uievents/issues/181
+
+        if (value * this.momentum < 0) {
+            this.momentum = 0; // Stop if the direction changes
+        } else if (Math.abs(value) > this.accelerationThreshold) {
+            this.momentum = lerp([this.momentum, value], this.acceleration);
+        } else {
+            this.momentum = value;
+        }
+
+        this.callback = callback;
+
+        if (!this.loop) {
+            this.animate();
+        }
+    }
+
+    /**
+     *
+     * @param {number} [timestamp]
+     */
+    animate(timestamp) {
+        this.callback(this.momentum); // TODO: This is actually a delta, should take the elapsed time into account
+
+        const timeDelta = timestamp - this.timestamp || 0;
+        this.timestamp = timestamp;
+
+        const velocity = Math.abs(this.momentum);
+
+        this.momentum =
+            Math.sign(this.momentum) *
+            Math.max(
+                0,
+                velocity - ((velocity * this.damping) ** 1.5 + 0.04) * timeDelta
+            );
+
+        if (Math.abs(this.momentum) > this.lowerLimit) {
+            this.loop = true;
+            this.animator.requestTransition(this._transitionCallback);
+        } else {
+            this.clear();
+        }
+    }
+}
+
+/**
+ * @param {T} event
+ * @template T
+ */
+export function makeEventTemplate(event) {
+    /** @type {Partial<Record<keyof T, any>>} */
+    const template = {};
+    const acceptedTypes = ["string", "number", "boolean"];
+    const rejectedProps = ["wheelDelta", "wheelDeltaX", "wheelDeltaY"];
+
+    // eslint-disable-next-line guard-for-in
+    for (const key in event) {
+        const k = /** @type {keyof T} */ (key);
+        if (
+            !rejectedProps.includes(key) &&
+            acceptedTypes.includes(typeof event[k])
+        ) {
+            template[k] = /** @type {any} */ (event[k]);
+        }
+    }
+    return template;
+}

package/src/utils/interactionEvent.js

@@ -0,0 +1,33 @@
+/**
+ * This class wraps a MouseEvent (or similar) and allows for
+ * its propagation through the view hierarchy in a similar manner
+ * as in the DOM.
+ */
+export default class InteractionEvent {
+    /**
+     *
+     * @param {import("./layout/point").default} point Event coordinates
+     *      inside the visualization canvas.
+     * @param {UIEvent} uiEvent The event to be wrapped
+     */
+    constructor(point, uiEvent) {
+        this.point = point;
+        this.uiEvent = uiEvent;
+        this.stopped = false;
+
+        /**
+         * The target is known only in the bubbling phase
+         *
+         * @type {import("../view/view").default}
+         */
+        this.target = undefined;
+    }
+
+    stopPropagation() {
+        this.stopped = true;
+    }
+
+    get type() {
+        return this.uiEvent.type;
+    }
+}

package/src/utils/iterateNestedMaps.js

@@ -0,0 +1,21 @@
+/**
+ * Iterates a nested Map structure created by d3-array's group() function.
+ *
+ * Yields arrays that contain the compound key and the grouped data items.
+ *
+ * @param {Map<any, any>} map The root
+ * @param {any[]} [path] The path so far.
+ * @returns {Generator<[any[], any[]]>}
+ */
+export default function* iterateNestedMaps(map, path = []) {
+    for (const [key, value] of map.entries()) {
+        if (value instanceof Map) {
+            for (const m of iterateNestedMaps(value, [...path, key])) {
+                yield m;
+            }
+        } else {
+            // TODO: Could recycle compound key arrays for better performance
+            yield [[...path, key], value];
+        }
+    }
+}

package/src/utils/iterateNestedMaps.test.js

@@ -0,0 +1,32 @@
+import { group } from "d3-array";
+import iterateNestedMaps from "./iterateNestedMaps";
+
+const data = [
+    { name: "jim", amount: "34.0", date: "11/12/2015" },
+    { name: "carl", amount: "120.11", date: "11/12/2015" },
+    { name: "stacy", amount: "12.01", date: "01/04/2016" },
+    { name: "stacy", amount: "34.05", date: "01/04/2016" },
+    { name: "stacy", amount: "1.5", date: "02/04/2016" },
+];
+
+const groups = group(
+    data,
+    (d) => d.name,
+    (d) => d.date
+);
+
+test("iterateNestedMaps iterates correctly", () => {
+    const expected = [
+        [["jim", "11/12/2015"], [data[0]]],
+        [["carl", "11/12/2015"], [data[1]]],
+        [
+            ["stacy", "01/04/2016"],
+            [data[2], data[3]],
+        ],
+        [["stacy", "02/04/2016"], [data[4]]],
+    ];
+
+    const result = [...iterateNestedMaps(groups)];
+
+    expect(result).toEqual(expected);
+});

package/src/utils/kWayMerge.js

@@ -0,0 +1,42 @@
+import FlatQueue from "flatqueue";
+
+/**
+ * Returns an iterator that merges multiple sorted arrays.
+ *
+ * @param {T[][]} arrays
+ * @param {function(T):number} [accessor]
+ * @template T
+ */
+export default function* kWayMerge(arrays, accessor = (x) => +x) {
+    // https://www.wikiwand.com/en/K-way_merge_algorithm
+
+    // This could be optimized by implementing a tournament tree or
+    // by adding replaceTop to the Heap.
+    // https://docs.python.org/2/library/heapq.html#heapq.heapreplace
+
+    const k = arrays.length;
+
+    const heap = new FlatQueue();
+    const pointers = new Array(k).fill(0);
+
+    for (const [i, array] of arrays.entries()) {
+        if (array.length) {
+            heap.push(i, accessor(array[0]));
+        }
+    }
+
+    let i = 0;
+    while ((i = heap.pop()) !== undefined) {
+        const array = arrays[i];
+        let pointer = pointers[i];
+        const element = array[pointer++];
+
+        yield element;
+
+        if (pointer < array.length) {
+            const newValue = accessor(array[pointer]);
+            heap.push(i, newValue);
+            pointers[i] = pointer;
+        }
+    }
+}

package/src/utils/kWayMerge.test.js

@@ -0,0 +1,25 @@
+import kWayMerge from "./kWayMerge";
+
+test("k-way merge merges multiple sorted arrays", () => {
+    /** @type {{a: number}[][]} */
+    const arrays = [];
+
+    for (let a = 0; a < 20; a++) {
+        /** @type {{a: number}[]} */
+        const array = [];
+        arrays.push(array);
+
+        let x = 0;
+        for (let i = 0; i < a; i++) {
+            x += Math.floor(Math.random() * 10);
+            array.push({ a: x });
+        }
+    }
+
+    const sorted = arrays.flat().sort((a, b) => a.a - b.a);
+
+    /** @type {function(any):number} */
+    const accessor = (d) => d.a;
+
+    expect([...kWayMerge(arrays, accessor)]).toEqual(sorted);
+});