@genome-spy/core 0.36.1 → 0.37.0

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

@@ -0,0 +1,9 @@
+/**
+ * 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: () => string, append: string): string;
+//# sourceMappingURL=url.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../../src/utils/url.js"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,oDAHsB,MAAM,UACjB,MAAM,UAchB"}

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

@@ -0,0 +1,14 @@
+/**
+ * Tests whether the given array of strings can be interpreted as a numeric vector
+ *
+ * @param {string[]} values
+ */
+export function inferNumeric(values: string[]): boolean;
+/**
+ * @param {any} value
+ * @returns {value is string | number | boolean}
+ */
+export function isScalar(value: any): value is string | number | boolean;
+/** A set of typical NA values */
+export const NAs: Set<string>;
+//# sourceMappingURL=variableTools.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"variableTools.d.ts","sourceRoot":"","sources":["../../../src/utils/variableTools.js"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,qCAFW,MAAM,EAAE,WAOlB;AAED;;;GAGG;AACH,gCAHW,GAAG,sCAKb;AArBD,iCAAiC;AACjC,8BAAiD"}

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

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

@@ -0,0 +1,39 @@
+/**
+ * @typedef {import("../spec/channel").PrimaryPositionalChannel} PositionalChannel
+ * @typedef {import("../spec/view").GeometricDimension} GeometricDimension
+ */
+/**
+ * An internal view that renders an axis grid.
+ *
+ * @typedef {import("./view").default} View
+ * @typedef {import("../spec/axis").Axis} Axis
+ * @typedef {import("../spec/axis").GenomeAxis} GenomeAxis
+ */
+export default class AxisGridView extends LayerView {
+    /**
+     * @param {Axis} axisProps
+     * @param {import("../types/viewContext").default} context
+     * @param {string} type Data type (quantitative, ..., locus)
+     * @param {import("./containerView").default} layoutParent
+     * @param {import("./view").default} dataParent
+     */
+    constructor(axisProps: Axis, type: string, context: import("../types/viewContext").default, layoutParent: import("./containerView").default, dataParent: import("./view").default);
+    axisProps: import("../spec/axis").GenomeAxis | import("../spec/axis").Axis;
+    getOrient(): import("../spec/axis").AxisOrient;
+}
+export type PositionalChannel = import("../spec/channel").PrimaryPositionalChannel;
+export type GeometricDimension = import("../spec/view").GeometricDimension;
+/**
+ * An internal view that renders an axis grid.
+ */
+export type View = import("./view").default;
+/**
+ * An internal view that renders an axis grid.
+ */
+export type Axis = import("../spec/axis").Axis;
+/**
+ * An internal view that renders an axis grid.
+ */
+export type GenomeAxis = import("../spec/axis").GenomeAxis;
+import LayerView from "./layerView";
+//# sourceMappingURL=axisGridView.d.ts.map

package/dist/src/view/axisGridView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axisGridView.d.ts","sourceRoot":"","sources":["../../../src/view/axisGridView.js"],"names":[],"mappings":"AAGA;;;GAGG;AAEH;;;;;;GAMG;AACH;IACI;;;;;;OAMG;IACH,uBANW,IAAI,QAEJ,MAAM,WADN,OAAO,sBAAsB,EAAE,OAAO,gBAEtC,OAAO,iBAAiB,EAAE,OAAO,cACjC,OAAO,QAAQ,EAAE,OAAO,EAyBlC;IAHG,2EAA8B;IAKlC,+CAEC;CAKJ;gCAnDY,OAAO,iBAAiB,EAAE,wBAAwB;iCAClD,OAAO,cAAc,EAAE,kBAAkB;;;;mBAMzC,OAAO,QAAQ,EAAE,OAAO;;;;mBACxB,OAAO,cAAc,EAAE,IAAI;;;;yBAC3B,OAAO,cAAc,EAAE,UAAU;sBAbxB,aAAa"}

package/dist/src/view/axisGridView.js

@@ -0,0 +1,246 @@
+import LayerView from "./layerView";
+import { orient2channel } from "./axisView";
+
+/**
+ * @typedef {import("../spec/channel").PrimaryPositionalChannel} PositionalChannel
+ * @typedef {import("../spec/view").GeometricDimension} GeometricDimension
+ */
+
+/**
+ * An internal view that renders an axis grid.
+ *
+ * @typedef {import("./view").default} View
+ * @typedef {import("../spec/axis").Axis} Axis
+ * @typedef {import("../spec/axis").GenomeAxis} GenomeAxis
+ */
+export default class AxisGridView extends LayerView {
+    /**
+     * @param {Axis} axisProps
+     * @param {import("../types/viewContext").default} context
+     * @param {string} type Data type (quantitative, ..., locus)
+     * @param {import("./containerView").default} layoutParent
+     * @param {import("./view").default} dataParent
+     */
+    constructor(axisProps, type, context, layoutParent, dataParent) {
+        // Now the presence of genomeAxis is based on field type, not scale type.
+        // TODO: Use scale instead. However, it would make the initialization much more
+        // complex because scales are not available before scale resolution.
+        const genomeAxis = type == "locus";
+
+        /** @type {Axis | GenomeAxis} */
+        const fullAxisProps = {
+            ...(genomeAxis ? defaultGenomeAxisProps : defaultAxisProps),
+            ...axisProps,
+        };
+
+        super(
+            createAxisGrid(fullAxisProps, type),
+            context,
+            layoutParent,
+            dataParent,
+            `axisGrid_${axisProps.orient}`
+        );
+
+        this.axisProps = fullAxisProps;
+        this.blockEncodingInheritance = true;
+        this.contributesToScaleDomain = false;
+    }
+
+    getOrient() {
+        return this.axisProps.orient;
+    }
+
+    isPickingSupported() {
+        return false;
+    }
+}
+
+/**
+ * Based on: https://vega.github.io/vega-lite/docs/axis.html
+ * TODO: The defaults should be taken from config (theme)
+ *
+ * @type {Axis}
+ */
+const defaultAxisProps = {
+    values: null,
+
+    grid: false,
+    gridCap: "butt",
+    gridColor: "lightgray",
+    gridDash: null,
+    gridOpacity: 1,
+    gridWidth: 1,
+
+    tickCount: null,
+    tickMinStep: null,
+};
+
+/**
+ * @type {import("../spec/axis").GenomeAxis}
+ */
+const defaultGenomeAxisProps = {
+    ...defaultAxisProps,
+
+    chromGrid: false,
+    chromGridCap: "butt",
+    chromGridColor: "gray",
+    chromGridDash: [1, 5],
+    chromGridOpacity: 1,
+    chromGridWidth: 1,
+};
+
+/**
+ * @param {Axis} axisProps
+ * @param {string} type
+ * @returns {import("../spec/view").UnitSpec}
+ */
+function createRegularAxisGrid(axisProps, type) {
+    const ap = axisProps;
+    const channel = orient2channel(ap.orient);
+
+    return {
+        name: "grid_lines",
+        data: {
+            lazy: {
+                type: "axisTicks",
+                channel,
+                axis: axisProps,
+            },
+        },
+        mark: {
+            type: "rule",
+            strokeDash: ap.gridDash,
+            strokeCap: ap.gridCap,
+            color: ap.gridColor,
+            size: ap.gridWidth,
+            opacity: ap.gridOpacity,
+            minBufferSize: 300,
+        },
+        encoding: {
+            [channel]: { field: "value", type },
+        },
+    };
+}
+
+/**
+ * @param {import("../spec/axis").GenomeAxis} axisProps
+ * @param {string} type
+ * @returns {import("../spec/view").UnitSpec}
+ */
+function createChromAxisGrid(axisProps, type) {
+    const ap = axisProps;
+    const channel = orient2channel(ap.orient);
+
+    return {
+        name: "chromosome_lines",
+        data: {
+            lazy: {
+                type: "axisGenome",
+                channel,
+            },
+        },
+        mark: {
+            type: "rule",
+            strokeDash: ap.chromGridDash,
+            strokeCap: ap.chromGridCap,
+            color: ap.chromGridColor,
+            size: ap.chromGridWidth,
+            opacity: ap.chromGridOpacity,
+        },
+        encoding: {
+            // TODO: { chrom: "name", type: "locus" } // without pos = pos is 0
+            [channel]: { field: "continuousStart", type, band: 0 },
+        },
+    };
+}
+
+/**
+ * @param {import("../spec/axis").GenomeAxis} axisProps
+ * @param {string} type
+ * @returns {import("../spec/view").UnitSpec}
+ */
+function createChromAxisFill(axisProps, type) {
+    const ap = axisProps;
+    const channel = orient2channel(ap.orient);
+
+    return {
+        name: "chromosome_fill",
+        data: {
+            lazy: {
+                type: "axisGenome",
+                channel,
+            },
+        },
+        mark: {
+            type: "rect",
+        },
+        encoding: {
+            // TODO: { chrom: "name", type: "locus" } // without pos = pos is 0
+            [channel]: { field: "continuousStart", type, band: 0 },
+            [channel + "2"]: { field: "continuousEnd", band: 0 },
+            fill: {
+                field: "odd",
+                type: "nominal",
+                scale: {
+                    domain: [false, true],
+                    range: [
+                        ap.chromGridFillEven ?? "white",
+                        ap.chromGridFillOdd ?? "white",
+                    ],
+                },
+            },
+            // Could be replaced with filter transform...
+            opacity: {
+                field: "odd",
+                type: "nominal",
+                scale: {
+                    type: "ordinal",
+                    domain: [false, true],
+                    range: [
+                        ap.chromGridFillEven ? 1 : 0,
+                        ap.chromGridFillOdd ? 1 : 0,
+                    ],
+                },
+            },
+        },
+    };
+}
+
+/**
+ * @param {GenomeAxis} axisProps
+ * @param {string} type
+ * @returns {import("../spec/view").LayerSpec}
+ */
+function createAxisGrid(axisProps, type) {
+    const ap = { ...axisProps };
+
+    /**
+     * @type {(import("../spec/view").UnitSpec | import("../spec/view").LayerSpec)[]}
+     */
+    const layers = [];
+
+    if (ap.chromGrid && (ap.chromGridFillOdd || ap.chromGridFillEven)) {
+        layers.push(createChromAxisFill(ap, type));
+    }
+
+    if (ap.chromGrid && ap.chromGridOpacity > 0) {
+        layers.push(createChromAxisGrid(ap, type));
+    }
+
+    if (ap.grid && ap.gridOpacity > 0) {
+        layers.push(createRegularAxisGrid(ap, type));
+    }
+
+    return {
+        name: "grid_layers",
+        configurableVisibility: false,
+        resolve: {
+            scale: {
+                [orient2channel(axisProps.orient)]: "forced",
+                fill: "independent",
+                opacity: "independent",
+            },
+        },
+        layer: layers,
+    };
+}

package/dist/src/view/axisResolution.d.ts

@@ -0,0 +1,24 @@
+export default class AxisResolution {
+    /**
+     * @typedef { import("./unitView").default} UnitView
+     */
+    /**
+     * @param {import("../spec/channel").PrimaryPositionalChannel} channel
+     */
+    constructor(channel: import("../spec/channel").PrimaryPositionalChannel);
+    channel: import("../spec/channel").PrimaryPositionalChannel;
+    /** @type {import("./scaleResolution").ResolutionMember<import("../spec/channel").PositionalChannel>[]} The involved views */
+    members: import("./scaleResolution").ResolutionMember<import("../spec/channel").PositionalChannel>[];
+    get scaleResolution(): import("./scaleResolution").default;
+    /**
+     * 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").PositionalChannel} channel TODO: Do something for this
+     */
+    pushUnitView(view: import("./unitView").default, channel: import("../spec/channel").PositionalChannel): void;
+    getAxisProps(): import("../spec/axis").GenomeAxis;
+    getTitle(): string;
+}
+//# sourceMappingURL=axisResolution.d.ts.map

package/dist/src/view/axisResolution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axisResolution.d.ts","sourceRoot":"","sources":["../../../src/view/axisResolution.js"],"names":[],"mappings":"AAeA;IACI;;OAEG;IAEH;;OAEG;IACH,qBAFW,OAAO,iBAAiB,EAAE,wBAAwB,EAM5D;IAHG,4DAAsB;IACtB,6HAA6H;IAC7H,SADW,OAAO,mBAAmB,EAAE,gBAAgB,CAAC,OAAO,iBAAiB,EAAE,iBAAiB,CAAC,EAAE,CACrF;IAGrB,2DAEC;IAED;;;;;;OAMG;IACH,0DAFW,OAAO,iBAAiB,EAAE,iBAAiB,QAiBrD;IAED,kDAuBC;IAED,mBAyDC;CACJ"}