@genome-spy/core 0.36.0 → 0.37.0

package/dist/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/dist/src/utils/interactionEvent.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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: import("./layout/point").default, uiEvent: UIEvent);
+    point: import("./layout/point").default;
+    uiEvent: UIEvent;
+    stopped: boolean;
+    /**
+     * The target is known only in the bubbling phase
+     *
+     * @type {import("../view/view").default}
+     */
+    target: import("../view/view").default;
+    stopPropagation(): void;
+    get type(): string;
+}
+//# sourceMappingURL=interactionEvent.d.ts.map

package/dist/src/utils/interactionEvent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interactionEvent.d.ts","sourceRoot":"","sources":["../../../src/utils/interactionEvent.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH;IACI;;;;;OAKG;IACH,mBAJW,OAAO,gBAAgB,EAAE,OAAO,WAEhC,OAAO,EAajB;IAVG,wCAAkB;IAClB,iBAAsB;IACtB,iBAAoB;IAEpB;;;;OAIG;IACH,QAFU,OAAO,cAAc,EAAE,OAAO,CAEjB;IAG3B,wBAEC;IAED,mBAEC;CACJ"}

package/dist/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/dist/src/utils/iterateNestedMaps.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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: Map<any, any>, path?: any[]): Generator<[any[], any[]]>;
+//# sourceMappingURL=iterateNestedMaps.d.ts.map

package/dist/src/utils/iterateNestedMaps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iterateNestedMaps.d.ts","sourceRoot":"","sources":["../../../src/utils/iterateNestedMaps.js"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,+CAJW,IAAI,GAAG,EAAE,GAAG,CAAC,SACb,GAAG,EAAE,GACH,UAAU,CAAC,GAAG,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,CAarC"}

package/dist/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/dist/src/utils/iterateNestedMaps.test.js

@@ -0,0 +1,33 @@
+import { expect, test } from "vitest";
+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/dist/src/utils/kWayMerge.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns an iterator that merges multiple sorted arrays.
+ *
+ * @param {T[][]} arrays
+ * @param {function(T):number} [accessor]
+ * @template T
+ */
+export default function kWayMerge<T>(arrays: T[][], accessor?: (arg0: T) => number): Generator<T, void, unknown>;
+//# sourceMappingURL=kWayMerge.d.ts.map

package/dist/src/utils/kWayMerge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kWayMerge.d.ts","sourceRoot":"","sources":["../../../src/utils/kWayMerge.js"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,4EAHuB,MAAM,+BAmC5B"}

package/dist/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/dist/src/utils/kWayMerge.test.js

@@ -0,0 +1,26 @@
+import { expect, test } from "vitest";
+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);
+});

package/dist/src/utils/layout/flexLayout.d.ts

@@ -0,0 +1,182 @@
+/**
+ *
+ * Layout calculation inspired by flexbox. The elements may have an
+ * absolute size (in pixels) and a growth component for filling the
+ * remaining space. Spacing around zero-sized items are collapsed.
+ *
+ * Read more at https://css-tricks.com/flex-grow-is-weird/
+ *
+ * @typedef {object} SizeDef Size definition inspired by CSS flexbox
+ * @prop {number} [px] Size in pixels
+ * @prop {number} [grow] Share of remaining space
+ *
+ * @typedef {object} LocSize One-dimensional location and size
+ * @prop {number} location
+ * @prop {number} size
+ *
+ * @typedef {object} FlexOptions
+ * @prop {number} [spacing] gap between items in pixels
+ * @prop {number} [devicePixelRatio] allows for snapping to "retina" pixels.
+ *      Default: `undefined`, which disables the snapping.
+ * @prop {number} [offset] add the offset to all locations. Default: `0`.
+ * @prop {boolean} [reverse] fill from "right to left".
+ *
+ * @param {SizeDef[]} items
+ * @param {number} containerSize in pixels
+ * @param {FlexOptions} [options]
+ * @returns {LocSize[]}
+ */
+export function mapToPixelCoords(items: SizeDef[], containerSize: number, { spacing, devicePixelRatio, offset, reverse }?: FlexOptions): LocSize[];
+/**
+ * Returns the minimum size  (the sum of pixels sizes) for the flex items
+ *
+ * @param {Iterable<SizeDef>} items
+ * @param {FlexOptions} [options]
+ */
+export function getMinimumSize(items: Iterable<SizeDef>, { spacing }?: FlexOptions): number;
+/**
+ * @param {Iterable<SizeDef>} items
+ * @returns {SizeDef}
+ */
+export function getLargestSize(items: Iterable<SizeDef>): SizeDef;
+/**
+ * Returns true if relative (stretching) elements are present
+ * @param {SizeDef[]} items
+ */
+export function isStretching(items: SizeDef[]): boolean;
+/**
+ *
+ * @param {SizeDef[]} sizeDefs
+ */
+export function sumSizeDefs(sizeDefs: SizeDef[]): {
+    px: number;
+    grow: number;
+};
+/**
+ * Is the sizeDef taking no space at all
+ *
+ * @param {SizeDef} sizeDef
+ */
+export function isZeroSizeDef(sizeDef: SizeDef): boolean;
+/**
+ *
+ * @param {*} spec
+ * @returns {spec is SizeDef}
+ */
+export function isSizeDef(spec: any): spec is SizeDef;
+/**
+ *
+ * @param {"container" | number | SizeDef | import("../../spec/view").Step} size
+ * @returns {SizeDef}
+ */
+export function parseSizeDef(size: "container" | number | SizeDef | import("../../spec/view").Step): SizeDef;
+/**
+ * Interpolates between two LocSizes
+ *
+ * @param {LocSize} from
+ * @param {LocSize} to
+ * @param {function():number} ratio
+ * @returns {LocSize}
+ */
+export function interpolateLocSizes(from: LocSize, to: LocSize, ratio: () => number): LocSize;
+/**
+ * Wraps a LocSize and allows scrolling.
+ *
+ * @param {LocSize} locSize
+ * @param {number | function():number} offset
+ * @returns {LocSize}
+ */
+export function translateLocSize(locSize: LocSize, offset: number | (() => number)): LocSize;
+/**
+ * Wraps a LocSize and allows scaling.
+ *
+ * @param {LocSize} locSize
+ * @param {number | function():number} factor
+ * @returns {LocSize}
+ */
+export function scaleLocSize(locSize: LocSize, factor: number | (() => number)): LocSize;
+/**
+ * @param {LocSize} locSize
+ * @param {number} value
+ */
+export function locSizeEncloses(locSize: LocSize, value: number): boolean;
+export class FlexDimensions {
+    /**
+     *
+     * @param {SizeDef} width
+     * @param {SizeDef} height
+     */
+    constructor(width: SizeDef, height: SizeDef);
+    /** @readonly */
+    readonly width: SizeDef;
+    /** @readonly */
+    readonly height: SizeDef;
+    /**
+     * Adds padding to absolute (px) dimensions
+     *
+     * @param {import("./padding").default} padding
+     */
+    addPadding(padding: import("./padding").default): FlexDimensions;
+    /**
+     * Subtracts padding from absolute (px) dimensions
+     *
+     * @param {import("./padding").default} padding
+     */
+    subtractPadding(padding: import("./padding").default): FlexDimensions;
+    #private;
+}
+/**
+ * A sizedef that takes no space at all.
+ *
+ * @type {SizeDef}
+ */
+export const ZERO_SIZEDEF: SizeDef;
+export const ZERO_FLEXDIMENSIONS: FlexDimensions;
+/**
+ * Size definition inspired by CSS flexbox
+ */
+export type SizeDef = {
+    /**
+     * Size in pixels
+     */
+    px?: number;
+    /**
+     * Share of remaining space
+     */
+    grow?: number;
+};
+/**
+ * One-dimensional location and size
+ */
+export type LocSize = {
+    location: number;
+    size: number;
+};
+/**
+ *
+ * Layout calculation inspired by flexbox. The elements may have an
+ * absolute size (in pixels) and a growth component for filling the
+ * remaining space. Spacing around zero-sized items are collapsed.
+ *
+ * Read more at https://css-tricks.com/flex-grow-is-weird/
+ */
+export type FlexOptions = {
+    /**
+     * gap between items in pixels
+     */
+    spacing?: number;
+    /**
+     * allows for snapping to "retina" pixels.
+     * Default: `undefined`, which disables the snapping.
+     */
+    devicePixelRatio?: number;
+    /**
+     * add the offset to all locations. Default: `0`.
+     */
+    offset?: number;
+    /**
+     * fill from "right to left".
+     */
+    reverse?: boolean;
+};
+//# sourceMappingURL=flexLayout.d.ts.map

package/dist/src/utils/layout/flexLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flexLayout.d.ts","sourceRoot":"","sources":["../../../../src/utils/layout/flexLayout.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wCALW,OAAO,EAAE,iBACT,MAAM,mDACN,WAAW,GACT,OAAO,EAAE,CAqGrB;AAED;;;;;GAKG;AACH,sCAHW,SAAS,OAAO,CAAC,gBACjB,WAAW,UAQrB;AAED;;;GAGG;AACH,sCAHW,SAAS,OAAO,CAAC,GACf,OAAO,CAWnB;AAED;;;GAGG;AACH,oCAFW,OAAO,EAAE,WAInB;AAED;;;GAGG;AACH,sCAFW,OAAO,EAAE;;;EASnB;AAmED;;;;GAIG;AACH,uCAFW,OAAO,WAIjB;AAWD;;;;GAIG;AACH,sDAEC;AAED;;;;GAIG;AACH,mCAHW,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,iBAAiB,EAAE,IAAI,GAC7D,OAAO,CAiBnB;AAID;;;;;;;GAOG;AACH,0CALW,OAAO,MACP,OAAO,eACI,MAAM,GACf,OAAO,CA4BnB;AAED;;;;;;GAMG;AACH,0CAJW,OAAO,UACP,MAAM,UAAc,MAAM,CAAA,GACxB,OAAO,CAanB;AAED;;;;;;GAMG;AACH,sCAJW,OAAO,UACP,MAAM,UAAc,MAAM,CAAA,GACxB,OAAO,CAanB;AAED;;;GAGG;AACH,yCAHW,OAAO,SACP,MAAM,WAIhB;AAtMD;IACI;;;;OAIG;IACH,mBAHW,OAAO,UACP,OAAO,EAQjB;IAJG,gBAAgB;IAChB,wBAAkB;IAClB,gBAAgB;IAChB,yBAAoB;IAGxB;;;;OAIG;IACH,oBAFW,OAAO,WAAW,EAAE,OAAO,kBAIrC;IAED;;;;OAIG;IACH,yBAFW,OAAO,WAAW,EAAE,OAAO,kBAIrC;;CAkBJ;AAED;;;;GAIG;AACH,2BAFU,OAAO,CAKd;AAEH,iDAGE;;;;;;;;SAzOQ,MAAM;;;;WACN,MAAM;;;;;;cAGN,MAAM;UACN,MAAM;;;;;;;;;;;;;;cAGN,MAAM;;;;;uBACN,MAAM;;;;aAEN,MAAM;;;;cACN,OAAO"}