@genome-spy/core 0.36.0 → 0.37.0

package/dist/src/view/viewUtils.js

@@ -0,0 +1,326 @@
+import { isObject, isString } from "vega-util";
+import { loader as vegaLoader } from "vega-loader";
+
+import UnitView from "./unitView";
+import ImportView from "./importView";
+// eslint-disable-next-line no-unused-vars
+import View, { VISIT_SKIP, VISIT_STOP } from "./view";
+import { buildDataFlow } from "./flowBuilder";
+import { optimizeDataFlow } from "../data/flowOptimizer";
+import { isFieldDef, primaryPositionalChannels } from "../encoder/encoder";
+import { rollup } from "d3-array";
+
+/**
+ *
+ * @param {import("../spec/channel").ChannelDef | import("../spec/view").FacetMapping} def
+ * @returns {spec is FacetFieldDef}
+ */
+export function isFacetFieldDef(def) {
+    return def && "field" in def && isString(def.field);
+}
+
+/**
+ *
+ * @param {import("../spec/channel").FacetFieldDef | import("../spec/view").FacetMapping} def
+ * @returns {spec is FacetMapping}
+ */
+export function isFacetMapping(def) {
+    return (
+        ("row" in def && isObject(def.row)) ||
+        ("column" in def && isObject(def.column))
+    );
+}
+
+/**
+ *
+ * @param {object} config
+ * @returns {config is ImportConfig}
+ */
+export function isImportConfig(config) {
+    return "name" in config || "url" in config;
+}
+
+/**
+ * Returns all marks in the order (DFS) they are rendered
+ * @param {View} root
+ */
+export function getMarks(root) {
+    return getFlattenedViews(root)
+        .filter((view) => view instanceof UnitView)
+        .map((view) => /** @type {UnitView} */ (view).mark);
+}
+
+/**
+ * Returns the nodes of the view hierarchy in depth-first order.
+ *
+ * @param {View} root
+ */
+export function getFlattenedViews(root) {
+    /** @type {View[]} */
+    const views = [];
+    root.visit((view) => {
+        views.push(view);
+    });
+    return views;
+}
+
+/**
+ * @param {View} root
+ */
+export function resolveScalesAndAxes(root) {
+    root.visit((view) => {
+        if (view instanceof UnitView) {
+            view.resolve("scale");
+        }
+    });
+
+    // Check that each scale resolution has a unique name
+    /** @type {Set<string>} */
+    const scaleNames = new Set();
+    root.visit((view) => {
+        for (const resolution of Object.values(view.resolutions.scale)) {
+            const name = resolution.name;
+            if (name && scaleNames.has(name)) {
+                throw new Error(
+                    `The same scale name "${name}" occurs in multiple scale resolutions!`
+                );
+            }
+            scaleNames.add(name);
+        }
+    });
+
+    root.visit((view) => {
+        if (view instanceof UnitView) {
+            view.resolve("axis");
+        }
+    });
+    root.visit((view) => view.onScalesResolved());
+}
+
+/**
+ * Gives names to zoomable scales that have been pulled to the root. This allows
+ * the zoomed domains to be bookmarked without explicitly specifying the names.
+ * This only affects the trivial but common cases, e.g., a genome-browser-like
+ * view with a shared x scale.
+ *
+ * @param {View} root
+ */
+export function setImplicitScaleNames(root) {
+    for (const channel of primaryPositionalChannels) {
+        const resolution = root.getScaleResolution(channel);
+        if (resolution && !resolution.name && resolution.isZoomable()) {
+            // TODO: Should actually check that the name is not already reserved
+            resolution.name = `${channel}_at_root`;
+        }
+    }
+}
+
+/**
+ * @param {View} root
+ * @param {import("../data/dataFlow").default<View>} [existingFlow] Add data flow
+ *      graphs to an existing DataFlow object.
+ */
+export async function initializeData(root, existingFlow) {
+    const flow = buildDataFlow(root, existingFlow);
+    optimizeDataFlow(flow);
+    flow.initialize();
+
+    /** @type {Promise<void>[]} */
+    const promises = flow.dataSources.map((dataSource) => dataSource.load());
+
+    await Promise.all(promises);
+
+    return flow;
+}
+
+/**
+ *
+ * @param {View} view
+ */
+export function findEncodedFields(view) {
+    /** @type {{view: UnitView, channel: import("../spec/channel").Channel, field: import("../spec/channel").Field, type: import("../spec/channel").Type}[]} */
+    const fieldInfos = [];
+
+    view.visit((view) => {
+        if (view instanceof UnitView) {
+            const encoding = view.getEncoding();
+            for (const [channel, def] of Object.entries(encoding)) {
+                if (isFieldDef(def) && "type" in def) {
+                    fieldInfos.push({
+                        view,
+                        channel,
+                        field: def.field,
+                        type: def.type,
+                    });
+                }
+            }
+            return VISIT_SKIP; // Skip sample summaries
+        }
+    });
+
+    return fieldInfos;
+}
+
+/**
+ * @param {import("../spec/view").ImportSpec} spec
+ * @param {string} baseUrl
+ * @param {import("../types/viewContext").default} viewContext
+ */
+async function loadExternalViewSpec(spec, baseUrl, viewContext) {
+    if (!spec.import.url) {
+        throw new Error(
+            "Cannot import, not an import spec: " + JSON.stringify(spec)
+        );
+    }
+
+    const loader = vegaLoader({ baseURL: baseUrl });
+    const url = spec.import.url;
+
+    const importedSpec = JSON.parse(
+        await loader.load(url).catch((/** @type {Error} */ e) => {
+            throw new Error(
+                `Could not load imported view spec: ${url} \nReason: ${e.message}`
+            );
+        })
+    );
+
+    if (viewContext.isViewSpec(importedSpec)) {
+        importedSpec.baseUrl = url.match(/^[^?#]*\//)?.[0];
+        return importedSpec;
+    } else {
+        throw new Error(
+            `The imported spec "${url}" is not a view spec: ${JSON.stringify(
+                spec
+            )}`
+        );
+    }
+}
+
+/**
+ * @param {import("./view").default} viewRoot
+ */
+export async function processImports(viewRoot) {
+    /** @type {ImportView[]} */
+    const importViews = [];
+
+    viewRoot.visit((view) => {
+        if (view instanceof ImportView) {
+            importViews.push(view);
+            return VISIT_SKIP;
+        }
+    });
+
+    for (const view of importViews) {
+        const context = view.context;
+
+        // TODO: Parallelize using promises, don't use await
+        const loadedSpec = await loadExternalViewSpec(
+            view.spec,
+            view.getBaseUrl(),
+            context
+        );
+
+        // TODO: Let importSpec have a name
+        const importedView = context.createView(
+            loadedSpec,
+            view.layoutParent,
+            view.dataParent,
+            view.name
+        );
+        // @ts-expect-error TODO: Fix typing issue
+        view.layoutParent.replaceChild(view, importedView);
+
+        // Import recursively
+        await processImports(importedView);
+    }
+}
+
+/**
+ * @param {function(View, View[]):void} visitor
+ */
+export function stackifyVisitor(visitor) {
+    /** @type {View[]} */
+    const stack = [];
+
+    /** @type {import("./view").Visitor} */
+    const stackified = (view) => visitor(view, stack);
+
+    stackified.beforeChildren = (view) => {
+        stack.push(view);
+    };
+
+    stackified.afterChildren = (view) => {
+        stack.pop();
+    };
+
+    return stackified;
+}
+
+/**
+ * Finds the descendants having the given name. The root is included in the search.
+ *
+ * @param {View} root
+ * @param {string} name View name
+ * @returns {View[]}
+ */
+export function findDescendantsByPath(root, name) {
+    /** @type {View[]} */
+    const descendants = [];
+
+    root.visit((view) => {
+        if (view.name == name) {
+            descendants.push(view);
+        }
+    });
+
+    return descendants;
+}
+
+/**
+ *
+ * @param {View} root
+ */
+export function findUniqueViewNames(root) {
+    /** @type {View[]} */
+    const descendants = [];
+
+    root.visit((view) => {
+        descendants.push(view);
+    });
+
+    return new Set(
+        [
+            ...rollup(
+                descendants,
+                (views) => views.length,
+                (view) => view.name
+            ),
+        ]
+            .filter(([name, count]) => count == 1 && name !== undefined)
+            .map(([name, count]) => name)
+    );
+}
+
+/**
+ * @param {string} name
+ */
+export const isCustomViewName = (name) => !/^(layer|concat)\d+$/.test(name);
+
+/**
+ * @param {View} viewRoot
+ */
+export function calculateCanvasSize(viewRoot) {
+    const size = viewRoot.getSize().addPadding(viewRoot.getOverhang());
+
+    // If a dimension has an absolutely specified size (in pixels), use it for the canvas size.
+    // However, if the dimension has a growing component, the canvas should be fit to the
+    // container.
+    // TODO: Enforce the minimum size (in case of both absolute and growing components).
+
+    /** @param {import("../utils/layout/flexLayout").SizeDef} dim */
+    const f = (dim) => (dim.grow > 0 ? undefined : dim.px);
+    return {
+        width: f(size.width),
+        height: f(size.height),
+    };
+}

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

@@ -0,0 +1,23 @@
+/**
+ * @typedef {object} ZoomEvent
+ * @prop {number} x
+ * @prop {number} y
+ * @prop {number} xDelta
+ * @prop {number} yDelta
+ * @prop {number} zDelta
+ */
+/**
+ * @param {import("../utils/interactionEvent").default} event
+ * @param {import("./renderingContext/layoutRecorderViewRenderingContext").Rectangle} coords The plot area
+ * @param {(zoomEvent: ZoomEvent) => void} handleZoom
+ * @param {import("../types/viewContext").Hover} [hover]
+ */
+export default function interactionToZoom(event: import("../utils/interactionEvent").default, coords: import("./renderingContext/layoutRecorderViewRenderingContext").Rectangle, handleZoom: (zoomEvent: ZoomEvent) => void, hover?: import("../types/viewContext").Hover): void;
+export type ZoomEvent = {
+    x: number;
+    y: number;
+    xDelta: number;
+    yDelta: number;
+    zDelta: number;
+};
+//# sourceMappingURL=zoom.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zoom.d.ts","sourceRoot":"","sources":["../../../src/view/zoom.js"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH;;;;;GAKG;AACH,iDALW,OAAO,2BAA2B,EAAE,OAAO,UAC3C,OAAO,uDAAuD,EAAE,SAAS,0BAC7D,SAAS,KAAK,IAAI,UAC9B,OAAO,sBAAsB,EAAE,KAAK,QA2E9C;;OAtFS,MAAM;OACN,MAAM;YACN,MAAM;YACN,MAAM;YACN,MAAM"}

package/dist/src/view/zoom.js

@@ -0,0 +1,89 @@
+/**
+ * @typedef {object} ZoomEvent
+ * @prop {number} x
+ * @prop {number} y
+ * @prop {number} xDelta
+ * @prop {number} yDelta
+ * @prop {number} zDelta
+ */
+
+/**
+ * @param {import("../utils/interactionEvent").default} event
+ * @param {import("./renderingContext/layoutRecorderViewRenderingContext").Rectangle} coords The plot area
+ * @param {(zoomEvent: ZoomEvent) => void} handleZoom
+ * @param {import("../types/viewContext").Hover} [hover]
+ */
+export default function interactionToZoom(event, coords, handleZoom, hover) {
+    if (event.type == "wheel") {
+        event.uiEvent.preventDefault(); // TODO: Only if there was something zoomable
+
+        const wheelEvent = /** @type {WheelEvent} */ (event.uiEvent);
+        const wheelMultiplier = wheelEvent.deltaMode ? 120 : 1;
+
+        let { x, y } = event.point;
+
+        // Snapping to the hovered item:
+        // We find the currently hovered object and move the pointed coordinates
+        // to its center if the mark has only primary positional channels.
+        // This allows the user to rapidly zoom closer without having to
+        // continuously adjust the cursor position.
+
+        if (hover) {
+            const e = hover.mark.encoders;
+            if (e.x && !e.x2 && !e.x.constantValue) {
+                x = +e.x(hover.datum) * coords.width + coords.x;
+            }
+            if (e.y && !e.y2 && !e.y.constantValue) {
+                y = (1 - +e.y(hover.datum)) * coords.height + coords.y;
+            }
+        }
+
+        if (Math.abs(wheelEvent.deltaX) < Math.abs(wheelEvent.deltaY)) {
+            handleZoom({
+                x,
+                y,
+                xDelta: 0,
+                yDelta: 0,
+                zDelta: (wheelEvent.deltaY * wheelMultiplier) / 300,
+            });
+        } else {
+            handleZoom({
+                x,
+                y,
+                xDelta: -wheelEvent.deltaX * wheelMultiplier,
+                yDelta: 0,
+                zDelta: 0,
+            });
+        }
+    } else if (
+        event.type == "mousedown" &&
+        /** @type {MouseEvent} */ (event.uiEvent).button === 0
+    ) {
+        const mouseEvent = /** @type {MouseEvent} */ (event.uiEvent);
+        mouseEvent.preventDefault();
+
+        let prevMouseEvent = mouseEvent;
+
+        const onMousemove = /** @param {MouseEvent} moveEvent */ (
+            moveEvent
+        ) => {
+            handleZoom({
+                x: prevMouseEvent.clientX,
+                y: prevMouseEvent.clientY,
+                xDelta: moveEvent.clientX - prevMouseEvent.clientX,
+                yDelta: moveEvent.clientY - prevMouseEvent.clientY,
+                zDelta: 0,
+            });
+
+            prevMouseEvent = moveEvent;
+        };
+
+        const onMouseup = /** @param {MouseEvent} upEvent */ (upEvent) => {
+            document.removeEventListener("mousemove", onMousemove);
+            document.removeEventListener("mouseup", onMouseup);
+        };
+
+        document.addEventListener("mouseup", onMouseup, false);
+        document.addEventListener("mousemove", onMousemove, false);
+    }
+}

package/package.json

@@ -7,17 +7,20 @@
   },
   "contributors": [],
   "license": "MIT",
-  "version": "0.36.0",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
+  "version": "0.37.0",
+  "jsdelivr": "dist/index.js",
+  "unpkg": "dist/index.js",
+  "browser": "dist/index.js",
+  "type": "module",
   "exports": {
-    ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.js"
-    },
+    ".": "./src/index.js",
     "./*": "./src/*",
-    "./schema.json": "./dist/schema.json",
-    "./style.css": "./dist/style.css"
+    "./schema.json": "./dist/schema.json"
+  },
+  "publishConfig": {
+    ".": "./dist/src/index.js",
+    "./*": "./dist/src/*",
+    "./schema.json": "./dist/schema.json"
   },
   "files": [
     "dist/"
@@ -29,11 +32,11 @@
   },
   "scripts": {
     "dev": "node dev-server.js",
-    "build": "vite build && npm run build:schema",
+    "build": "mkdir -p dist && node build.mjs && vite build && npm run build:schema && npm run build:typings",
     "prepublishOnly": "npm run build",
     "test:tsc": "tsc -p tsconfig.json --noEmit",
     "build:schema": "mkdir -p dist && ts-json-schema-generator --path 'src/spec/*.ts' --type RootSpec > dist/schema.json",
-    "build:typings": "tsc -p tsconfig.json --declaration --emitDeclarationOnly --declarationMap --outDir dist/types"
+    "build:typings": "tsc -p tsconfig.json --declaration --emitDeclarationOnly --declarationMap --outDir dist/src"
   },
   "dependencies": {
     "@gmod/bam": "^1.1.18",
@@ -63,5 +66,5 @@
     "vega-scale": "^7.1.1",
     "vega-util": "^1.16.0"
   },
-  "gitHead": "6f6720382d7d33c9ac9a5b9c392e8a3e5938a862"
+  "gitHead": "3bfc372fcc1aec61b44af525c379ec0527be4425"
 }

package/dist/style.css

@@ -1 +0,0 @@
-.genome-spy{font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;position:relative}.genome-spy canvas{transform:scale(1);opacity:1;transition:transform .6s,opacity .6s}.genome-spy .loading-message{position:absolute;top:0;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center}.genome-spy .loading-message .message{color:#666;opacity:0;transition:opacity .7s}.genome-spy.loading canvas{transform:scale(.95);opacity:0}.genome-spy.loading .loading-message .message{opacity:1}.genome-spy.loading .ellipsis{animation:blinker 1s linear infinite}@keyframes blinker{50%{opacity:0}}.genome-spy .tooltip{position:absolute;max-width:450px;overflow:hidden;background:#f6f6f6;padding:10px;font-size:13px;box-shadow:0 3px 15px #00000036;pointer-events:none;z-index:100}.genome-spy .tooltip>:last-child{margin-bottom:0}.genome-spy .tooltip>.title{padding-bottom:5px;margin-bottom:5px;border-bottom:1px dashed #b6b6b6}.genome-spy .tooltip .summary{font-size:12px}.genome-spy .tooltip table{border-collapse:collapse}.genome-spy .tooltip table:first-child{margin-top:0}.genome-spy .tooltip table th,.genome-spy .tooltip table td{padding:2px .4em;vertical-align:top}.genome-spy .tooltip table th:first-child,.genome-spy .tooltip table td:first-child{padding-left:0}.genome-spy .tooltip table th{text-align:left;font-weight:700}.genome-spy .tooltip .color-legend{display:inline-block;width:.8em;height:.8em;margin-left:.4em;box-shadow:0 0 3px 1px #fff}.genome-spy .tooltip .attributes .hovered{background-color:#e0e0e0}.genome-spy .tooltip .na{color:#aaa;font-style:italic;font-size:80%}.genome-spy .gene-track-tooltip .summary{font-size:90%}.genome-spy .message-box{display:flex;align-items:center;justify-content:center;position:absolute;top:0;height:100%;width:100%}.genome-spy .message-box>div{border:1px solid red;padding:10px;background:#fff0f0}