@genome-spy/core 0.14.0

package/src/view/view.test.js

@@ -0,0 +1,213 @@
+import UnitView from "./unitView";
+import LayerView from "./layerView";
+
+import { create, createAndInitialize } from "./testUtils";
+import { toRegularArray as r } from "../utils/domainArray";
+import ConcatView from "./concatView";
+import PointMark from "../marks/pointMark";
+import View from "./view";
+
+describe("Trivial creations and initializations", () => {
+    test("Fails on empty spec", () => {
+        // @ts-ignore
+        expect(() => create({}, View)).toThrow();
+    });
+
+    test("Parses a trivial spec", () => {
+        expect(create({ mark: "point" }, View)).toBeInstanceOf(UnitView);
+        expect(create({ layer: [] }, View)).toBeInstanceOf(LayerView);
+    });
+
+    test("Parses a more comples spec", () => {
+        const view = create(
+            {
+                concat: [
+                    {
+                        layer: [{ mark: "point" }, { mark: "rect" }],
+                    },
+                    { mark: "rect" },
+                ],
+            },
+            ConcatView
+        );
+
+        expect(view).toBeInstanceOf(ConcatView);
+        expect(view.children[0]).toBeInstanceOf(LayerView);
+        expect(view.children[0].children[0]).toBeInstanceOf(UnitView);
+        expect(view.children[0].children[0].mark).toBeInstanceOf(PointMark);
+        expect(view.children[1]).toBeInstanceOf(UnitView);
+        expect(view.children[2]).toBeUndefined();
+    });
+
+    test("Parses and initializes a trivial spec", () => {
+        const spec = {
+            data: { values: [1] },
+            mark: "point",
+            encoding: {
+                x: { field: "data", type: "quantitative" },
+                y: { field: "data", type: "quantitative" },
+            },
+        };
+
+        expect(createAndInitialize(spec, View)).resolves.toBeInstanceOf(
+            UnitView
+        );
+    });
+});
+
+describe("Test domain handling", () => {
+    const dataSpec = {
+        values: [
+            { a: 1, b: 3 },
+            { a: 2, b: 4 },
+            { a: 3, b: 5 },
+        ],
+    };
+
+    test("Uses domain from the scale properties", () => {
+        const spec = {
+            data: dataSpec,
+            mark: "point",
+            encoding: {
+                x: { field: "a", type: "quantitative" },
+                y: {
+                    field: "a",
+                    type: "quantitative",
+                    scale: { domain: [0, 1000] },
+                },
+            },
+        };
+
+        return createAndInitialize(spec, UnitView).then((view) =>
+            expect(r(view.getConfiguredDomain("y"))).toEqual([0, 1000])
+        );
+    });
+
+    test("Includes a constant in the data domain", () => {
+        const spec = {
+            data: dataSpec,
+            mark: "point",
+            encoding: {
+                x: { datum: 123, type: "quantitative" },
+                y: { field: "a", type: "quantitative" },
+            },
+        };
+
+        return createAndInitialize(spec, UnitView).then((view) =>
+            expect(r(view.extractDataDomain("x"))).toEqual([123, 123])
+        );
+    });
+
+    test("Extracts domain from the data", () => {
+        const spec = {
+            data: dataSpec,
+            mark: "point",
+            encoding: {
+                x: { field: "a", type: "quantitative" },
+                y: { field: "a", type: "quantitative" },
+            },
+        };
+
+        return createAndInitialize(spec, UnitView).then((view) =>
+            expect(r(view.extractDataDomain("y"))).toEqual([1, 3])
+        );
+    });
+
+    test("Extracts domain from the data when a secondary channel is being used", () => {
+        const spec = {
+            data: dataSpec,
+            mark: "rect",
+            encoding: {
+                x: { field: "a", type: "quantitative" },
+                y: { field: "a", type: "quantitative" },
+                y2: { field: "b", type: "quantitative" },
+            },
+        };
+
+        return createAndInitialize(spec, UnitView).then((view) =>
+            expect(r(view.extractDataDomain("y"))).toEqual([1, 5])
+        );
+    });
+});
+
+describe("Utility methods", () => {
+    test("BaseUrl is handled correctly", async () => {
+        createAndInitialize(
+            {
+                layer: [],
+            },
+            LayerView
+        ).then((view) => expect(view.getBaseUrl()).toBeUndefined());
+
+        await createAndInitialize(
+            {
+                baseUrl: "blaa",
+                layer: [],
+            },
+            LayerView
+        ).then((view) => expect(view.getBaseUrl()).toEqual("blaa"));
+
+        await createAndInitialize(
+            {
+                baseUrl: "https://site.com",
+                layer: [],
+            },
+            LayerView
+        ).then((view) => expect(view.getBaseUrl()).toEqual("https://site.com"));
+
+        await createAndInitialize(
+            {
+                baseUrl: "https://site.com",
+                layer: [
+                    {
+                        baseUrl: "blaa",
+                        layer: [],
+                    },
+                ],
+            },
+            LayerView
+        ).then((view) =>
+            expect(view.children[0].getBaseUrl()).toEqual(
+                "https://site.com/blaa"
+            )
+        );
+
+        await createAndInitialize(
+            {
+                baseUrl: "https://site.com",
+                layer: [
+                    {
+                        baseUrl: "https://another-site.com",
+                        layer: [],
+                    },
+                ],
+            },
+            LayerView
+        ).then((view) =>
+            expect(view.children[0].getBaseUrl()).toEqual(
+                "https://another-site.com"
+            )
+        );
+
+        await createAndInitialize(
+            {
+                baseUrl: "https://site.com",
+                layer: [
+                    {
+                        layer: [
+                            {
+                                baseUrl: "blaa",
+                                layer: [],
+                            },
+                        ],
+                    },
+                ],
+            },
+            LayerView
+        ).then((view) =>
+            expect(view.children[0].children[0].getBaseUrl()).toEqual(
+                "https://site.com/blaa"
+            )
+        );
+    });
+});

package/src/view/viewContext.d.ts

@@ -0,0 +1,57 @@
+import { TemplateResult } from "lit-html";
+import View from "./view";
+import DataFlow from "../data/dataFlow";
+import AccessorFactory from "../encoder/accessor";
+import WebGLHelper from "../gl/webGLHelper";
+import Animator from "../utils/animator";
+import GenomeStore from "../genome/genomeStore";
+import BmFontManager from "../fonts/bmFontManager";
+import Mark from "../marks/mark";
+import { Datum } from "../data/flowNode";
+import { ViewSpec } from "../spec/view";
+import ContainerView from "./containerView";
+
+/**
+ * ViewContext provides essential data and interfaces to View classes.
+ */
+export default interface ViewContext {
+    dataFlow: DataFlow<View>;
+    accessorFactory: AccessorFactory;
+    glHelper: WebGLHelper;
+    animator: Animator;
+    genomeStore?: GenomeStore;
+    fontManager: BmFontManager;
+
+    requestLayoutReflow: () => void;
+
+    updateTooltip: <T>(
+        datum: T,
+        converter?: (datum: T) => Promise<TemplateResult>
+    ) => void;
+
+    getCurrentHover: () => { mark: Mark; datum: Datum };
+
+    /**
+     * Adds a keyboard event listener to the document. Cleanup is performed automatically
+     * when GenomeSpy is finalized.
+     *
+     * TODO: Listeners should be called only when the mouse pointer is inside the
+     * container or the app covers the full document.
+     */
+    addKeyboardListener: (
+        type: "keydown" | "keyup",
+        listener: (event: KeyboardEvent) => void
+    ) => void;
+
+    getNamedData: (name: string) => any[];
+
+    isViewVisible: (view: View) => boolean;
+
+    isViewSpec: (spec: any) => boolean;
+
+    createView: (
+        spec: ViewSpec,
+        parent?: ContainerView,
+        defaultName?: string
+    ) => View;
+}

package/src/view/viewFactory.js

@@ -0,0 +1,179 @@
+// eslint-disable-next-line no-unused-vars
+import View from "./view";
+
+import UnitView from "./unitView";
+import ImportView from "./importView";
+import LayerView from "./layerView";
+import ConcatView from "./concatView";
+import { isArray, isObject, isString } from "vega-util";
+
+/**
+ * @typedef {import("./viewContext").default} ViewContext
+ * @typedef {import("../spec/view").UnitSpec} UnitSpec
+ * @typedef {import("../spec/view").ViewSpec} ViewSpec
+ * @typedef {import("../spec/view").LayerSpec} LayerSpec
+ * @typedef {import("../spec/view").ImportSpec} ImportSpec
+ * @typedef {import("../spec/view").SampleSpec} SampleSpec
+ * @typedef {import("../spec/view").VConcatSpec} VConcatSpec
+ * @typedef {import("../spec/view").HConcatSpec} HConcatSpec
+ * @typedef {import("../spec/view").ConcatSpec} ConcatSpec
+ * @typedef {VConcatSpec | HConcatSpec | ConcatSpec} AnyConcatSpec
+ *
+ * @typedef {(spec: ViewSpec) => boolean} specGuard
+ * @typedef {(spec: ViewSpec, context: ViewContext, parent?: import("./containerView").default, defaultName?: string) => View} factory
+ */
+
+export class ViewFactory {
+    constructor() {
+        /** @type {{specGuard: specGuard, factory: factory}[]} */
+        this.types = [];
+
+        const makeDefaultFactory =
+            (/** @type {typeof View} */ ViewClass) =>
+            /** @type {factory} */
+            (spec, context, parent, defaultName) =>
+                /** @type {View} */ (
+                    new ViewClass(
+                        spec,
+                        context,
+                        parent,
+                        spec.name ?? defaultName
+                    )
+                );
+
+        this.addViewType(isImportSpec, makeDefaultFactory(ImportView));
+        this.addViewType(isLayerSpec, makeDefaultFactory(LayerView));
+        this.addViewType(isUnitSpec, makeDefaultFactory(UnitView));
+        this.addViewType(isVConcatSpec, makeDefaultFactory(ConcatView));
+        this.addViewType(isHConcatSpec, makeDefaultFactory(ConcatView));
+        this.addViewType(isConcatSpec, makeDefaultFactory(ConcatView));
+        //this.addViewType(isFacetSpec, makeDefaultFactory(FacetView));
+    }
+
+    /**
+     * @param {specGuard} specGuard
+     * @param {factory} factory
+     */
+    addViewType(specGuard, factory) {
+        this.types.push({ specGuard, factory });
+    }
+
+    /**
+     * @param {ViewSpec} spec
+     * @param {ViewContext} context
+     * @param {import("./containerView").default} [parent]
+     * @param {string} [defaultName]
+     */
+    createView(spec, context, parent, defaultName) {
+        const type = this.types.find((type) => type.specGuard(spec));
+        if (type) {
+            return type.factory(
+                spec,
+                context,
+                parent,
+                defaultName ?? "unnamed"
+            );
+        } else {
+            throw new Error(
+                "Invalid spec, cannot figure out the view type from the properties: " +
+                    JSON.stringify([...Object.keys(spec)])
+            );
+        }
+    }
+
+    /**
+     *
+     * @param {ViewSpec} spec
+     * @returns {spec is ViewSpec}
+     */
+    isViewSpec(spec) {
+        const matches = this.types.filter((type) => type.specGuard(spec));
+
+        if (matches.length > 1) {
+            throw new Error("Ambiguous spec. Cannot create a view!");
+        }
+
+        return matches.length == 1;
+    }
+}
+
+/**
+ *
+ * @param {ViewSpec} spec
+ * @returns {spec is UnitSpec}
+ */
+export function isUnitSpec(spec) {
+    return "mark" in spec && (isString(spec.mark) || isObject(spec.mark));
+}
+
+/**
+ *
+ * @param {ViewSpec} spec
+ * @returns {spec is LayerSpec}
+ */
+export function isLayerSpec(spec) {
+    return "layer" in spec && isObject(spec.layer);
+}
+
+/**
+ *
+ * @param {ViewSpec} spec
+ * @returns {spec is LayerSpec}
+ */
+export function isFacetSpec(spec) {
+    return (
+        "facet" in spec &&
+        isObject(spec.facet) &&
+        "spec" in spec &&
+        isObject(spec.spec)
+    );
+}
+
+/**
+ *
+ * @param {ViewSpec} spec
+ * @returns {spec is import("../spec/view").AggregateSamplesSpec}
+ */
+export function isAggregateSamplesSpec(spec) {
+    return (
+        spec &&
+        (isUnitSpec(spec) || isLayerSpec(spec)) &&
+        "aggregateSamples" in spec
+    );
+}
+
+/**
+ *
+ * @param {object} spec
+ * @returns {spec is ImportSpec}
+ */
+export function isImportSpec(spec) {
+    return "import" in spec;
+}
+
+/**
+ *
+ * @param {ViewSpec} spec
+ * @returns {spec is VConcatSpec}
+ */
+export function isVConcatSpec(spec) {
+    return "vconcat" in spec && isArray(spec.vconcat);
+}
+
+/**
+ *
+ * @param {ViewSpec} spec
+ * @returns {spec is HConcatSpec}
+ */
+export function isHConcatSpec(spec) {
+    return "hconcat" in spec && isArray(spec.hconcat);
+}
+
+/**
+ *
+ * @param {ViewSpec} spec
+ * @returns {spec is ConcatSpec}
+ */
+export function isConcatSpec(spec) {
+    return "concat" in spec && isArray(spec.concat);
+}

package/src/view/viewFactory.test.js

@@ -0,0 +1,16 @@
+import { ViewFactory } from "./viewFactory";
+
+test("isViewSpec", () => {
+    const factory = new ViewFactory();
+
+    // @ts-ignore
+    expect(factory.isViewSpec({})).toBeFalsy();
+
+    expect(factory.isViewSpec({ mark: "rect" })).toBeTruthy();
+    expect(factory.isViewSpec({ layer: [] })).toBeTruthy();
+    expect(factory.isViewSpec({ hconcat: [] })).toBeTruthy();
+    expect(factory.isViewSpec({ vconcat: [] })).toBeTruthy();
+    expect(factory.isViewSpec({ concat: [] })).toBeTruthy();
+
+    expect(() => factory.isViewSpec({ mark: "rect", layer: [] })).toThrow();
+});