@genome-spy/core 0.71.0 → 0.73.0

package/dist/src/scales/zoomDomainUtils.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @typedef {import("../types/encoder.js").VegaScale} VegaScale
+ */
+/**
+ * Zooms a numeric two-point domain according to scale type.
+ *
+ * @param {VegaScale} scale
+ * @param {[number, number]} domain
+ * @param {number} anchor
+ * @param {number} scaleFactor
+ * @param {{ onUnsupported?: "throw" | "identity" }} [options]
+ * @returns {[number, number]}
+ */
+export function zoomDomainByScaleType(scale: VegaScale, domain: [number, number], anchor: number, scaleFactor: number, options?: {
+    onUnsupported?: "throw" | "identity";
+}): [number, number];
+export type VegaScale = import("../types/encoder.js").VegaScale;
+//# sourceMappingURL=zoomDomainUtils.d.ts.map

package/dist/src/scales/zoomDomainUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoomDomainUtils.d.ts","sourceRoot":"","sources":["../../../src/scales/zoomDomainUtils.js"],"names":[],"mappings":"AAEA;;GAEG;AAEH;;;;;;;;;GASG;AACH,6CAPW,SAAS,UACT,CAAC,MAAM,EAAE,MAAM,CAAC,UAChB,MAAM,eACN,MAAM,YACN;IAAE,aAAa,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;CAAE,GACtC,CAAC,MAAM,EAAE,MAAM,CAAC,CAsD5B;wBAjEY,OAAO,qBAAqB,EAAE,SAAS"}

package/dist/src/scales/zoomDomainUtils.js

@@ -0,0 +1,69 @@
+import { zoomLinear, zoomLog, zoomPow, zoomSymlog } from "vega-util";
+
+/**
+ * @typedef {import("../types/encoder.js").VegaScale} VegaScale
+ */
+
+/**
+ * Zooms a numeric two-point domain according to scale type.
+ *
+ * @param {VegaScale} scale
+ * @param {[number, number]} domain
+ * @param {number} anchor
+ * @param {number} scaleFactor
+ * @param {{ onUnsupported?: "throw" | "identity" }} [options]
+ * @returns {[number, number]}
+ */
+export function zoomDomainByScaleType(
+    scale,
+    domain,
+    anchor,
+    scaleFactor,
+    options = {}
+) {
+    const onUnsupported = options.onUnsupported ?? "throw";
+
+    switch (scale.type) {
+        case "linear":
+        case "index":
+        case "locus":
+            return /** @type {[number, number]} */ (
+                zoomLinear(domain, anchor, scaleFactor)
+            );
+
+        case "log":
+            return /** @type {[number, number]} */ (
+                zoomLog(domain, anchor, scaleFactor)
+            );
+
+        case "pow":
+        case "sqrt": {
+            const powScale =
+                /** @type {import("d3-scale").ScalePower<number, number>} */ (
+                    /** @type {any} */ (scale)
+                );
+            return /** @type {[number, number]} */ (
+                zoomPow(domain, anchor, scaleFactor, powScale.exponent())
+            );
+        }
+
+        case "symlog": {
+            const symlogScale =
+                /** @type {import("d3-scale").ScaleSymLog<number, number>} */ (
+                    /** @type {any} */ (scale)
+                );
+            return /** @type {[number, number]} */ (
+                zoomSymlog(domain, anchor, scaleFactor, symlogScale.constant())
+            );
+        }
+
+        default:
+            if (onUnsupported === "identity") {
+                return domain;
+            } else {
+                throw new Error(
+                    "Zooming is not implemented for: " + scale.type
+                );
+            }
+    }
+}

package/dist/src/screenshotHarness.d.ts

@@ -0,0 +1,16 @@
+export type ScreenshotState = {
+    status: string;
+    detail: string;
+    error: string;
+    capture: () => Promise<{
+        logicalSize: {
+            width: number;
+            height: number;
+        };
+        dataUrl: string;
+    }>;
+};
+export type ScreenshotWindow = Window & typeof globalThis & {
+    __genomeSpyScreenshot: ScreenshotState;
+};
+//# sourceMappingURL=screenshotHarness.d.ts.map

package/dist/src/screenshotHarness.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screenshotHarness.d.ts","sourceRoot":"","sources":["../../src/screenshotHarness.js"],"names":[],"mappings":"8BAQa;IACR,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,OAAO,CAAC;QAAE,WAAW,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC5F;+BAIS,MAAM,GAAG,OAAO,UAAU,GAAG;IAAE,qBAAqB,EAAE,eAAe,CAAA;CAAE"}

package/dist/src/screenshotHarness.js

@@ -0,0 +1,242 @@
+import { embed, loadSpec } from "./index.js";
+
+const DEFAULT_CONTAINER_WIDTH = 600;
+const DEFAULT_CONTAINER_HEIGHT = 320;
+const DEFAULT_LAZY_READY_TIMEOUT_MS = 30_000;
+const READY_DELAY_MS = 100;
+
+/**
+ * @typedef {{
+ *   status: string,
+ *   detail: string,
+ *   error: string,
+ *   capture: () => Promise<{ logicalSize: { width: number, height: number }, dataUrl: string }>
+ * }} ScreenshotState
+ */
+
+/**
+ * @typedef {Window & typeof globalThis & { __genomeSpyScreenshot: ScreenshotState }} ScreenshotWindow
+ */
+
+const frameElement = /** @type {HTMLElement} */ (
+    document.querySelector("#frame")
+);
+const specPathElement = /** @type {HTMLElement} */ (
+    document.querySelector("#spec-path")
+);
+const statusElement = /** @type {HTMLElement} */ (
+    document.querySelector("#status")
+);
+const screenshotWindow = /** @type {ScreenshotWindow} */ (window);
+
+const query = new URLSearchParams(window.location.search);
+const specUrl = query.get("spec");
+const lazyReadyTimeoutMs = parseTimeoutMs(
+    query.get("lazy-timeout-ms"),
+    DEFAULT_LAZY_READY_TIMEOUT_MS
+);
+
+screenshotWindow.__genomeSpyScreenshot = {
+    status: "booting",
+    detail: "Booting screenshot harness",
+    error: "",
+    async capture() {
+        throw new Error("Screenshot harness is not ready yet.");
+    },
+};
+
+if (!specUrl) {
+    setFailure("Missing required ?spec=... query parameter.");
+} else {
+    specPathElement.textContent = specUrl;
+    frameElement.style.width = `${DEFAULT_CONTAINER_WIDTH}px`;
+    frameElement.style.height = `${DEFAULT_CONTAINER_HEIGHT}px`;
+    void initializeHarness(specUrl);
+}
+
+/**
+ * @param {string} url
+ */
+async function initializeHarness(url) {
+    try {
+        setState("loading", "Loading spec…");
+        await loadSpec(url);
+
+        setState("embedding", "Embedding visualization…");
+        const api = await embed(frameElement, url, {
+            onError(error) {
+                throw error;
+            },
+        });
+
+        if (
+            typeof api.getLogicalCanvasSize !== "function" ||
+            typeof api.getRenderedBounds !== "function" ||
+            typeof api.awaitVisibleLazyData !== "function"
+        ) {
+            throw new Error(
+                "Embed did not return a usable GenomeSpy instance."
+            );
+        }
+
+        setState("waitingForData", "Waiting for visible lazy data…");
+        await waitForVisibleLazyData(api, lazyReadyTimeoutMs);
+
+        setState("rendering", "Waiting for initial render…");
+        await waitForSettledRender();
+
+        const logicalSize = resolveExportSize(
+            api.getRenderedBounds(),
+            api.getLogicalCanvasSize()
+        );
+
+        screenshotWindow.__genomeSpyScreenshot = {
+            status: "ready",
+            detail: `Ready (${logicalSize.width}x${logicalSize.height}, DPR 1)`,
+            error: "",
+            async capture() {
+                const currentSize = resolveExportSize(
+                    api.getRenderedBounds(),
+                    api.getLogicalCanvasSize()
+                );
+                return {
+                    logicalSize: currentSize,
+                    dataUrl: api.exportCanvas(
+                        currentSize.width,
+                        currentSize.height,
+                        1,
+                        "white"
+                    ),
+                };
+            },
+        };
+
+        setStatus(
+            `Ready (${logicalSize.width}x${logicalSize.height}, DPR 1)`
+        );
+    } catch (error) {
+        setFailure(error instanceof Error ? error.message : String(error));
+    }
+}
+
+async function waitForSettledRender() {
+    await waitForAnimationFrame();
+    await waitForAnimationFrame();
+    await wait(READY_DELAY_MS);
+}
+
+/**
+ * @param {{
+ *   awaitVisibleLazyData: (signal?: AbortSignal) => Promise<void>
+ * }} api
+ * @param {number} timeoutMs
+ */
+async function waitForVisibleLazyData(api, timeoutMs) {
+    const controller = new AbortController();
+    let timedOut = false;
+    const timeoutId = window.setTimeout(() => {
+        timedOut = true;
+        controller.abort();
+    }, timeoutMs);
+
+    try {
+        await api.awaitVisibleLazyData(controller.signal);
+    } catch (error) {
+        if (timedOut) {
+            throw new Error(
+                `Timed out after ${timeoutMs} ms while waiting for visible lazy data.`
+            );
+        }
+
+        throw error;
+    } finally {
+        window.clearTimeout(timeoutId);
+    }
+}
+
+function waitForAnimationFrame() {
+    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+}
+
+/**
+ * @param {number} milliseconds
+ */
+function wait(milliseconds) {
+    return new Promise((resolve) => window.setTimeout(resolve, milliseconds));
+}
+
+/**
+ * @param {string | null} value
+ * @param {number} fallback
+ */
+function parseTimeoutMs(value, fallback) {
+    if (value == null) {
+        return fallback;
+    }
+
+    const parsed = Number(value);
+    if (!Number.isFinite(parsed) || parsed <= 0) {
+        throw new Error(
+            `Invalid lazy-data timeout value: ${value}. Expected a positive number.`
+        );
+    }
+
+    return parsed;
+}
+
+/**
+ * @param {{ width: number | undefined, height: number | undefined }} renderedBounds
+ * @param {{ width: number, height: number }} logicalSize
+ */
+function resolveExportSize(renderedBounds, logicalSize) {
+    return {
+        width:
+            Number.isFinite(renderedBounds.width) && renderedBounds.width > 0
+                ? Math.ceil(renderedBounds.width)
+                : Number.isFinite(logicalSize.width) && logicalSize.width > 0
+                  ? logicalSize.width
+                  : DEFAULT_CONTAINER_WIDTH,
+        height:
+            Number.isFinite(renderedBounds.height) && renderedBounds.height > 0
+                ? Math.ceil(renderedBounds.height)
+                : Number.isFinite(logicalSize.height) && logicalSize.height > 0
+                  ? logicalSize.height
+                  : DEFAULT_CONTAINER_HEIGHT,
+    };
+}
+
+/**
+ * @param {string} message
+ */
+function setStatus(message) {
+    statusElement.textContent = message;
+}
+
+/**
+ * @param {string} status
+ * @param {string} detail
+ */
+function setState(status, detail) {
+    screenshotWindow.__genomeSpyScreenshot = {
+        ...screenshotWindow.__genomeSpyScreenshot,
+        status,
+        detail,
+    };
+    setStatus(detail);
+}
+
+/**
+ * @param {string} message
+ */
+function setFailure(message) {
+    screenshotWindow.__genomeSpyScreenshot = {
+        status: "error",
+        detail: message,
+        error: message,
+        async capture() {
+            throw new Error(message);
+        },
+    };
+    statusElement.textContent = message;
+    statusElement.style.color = "#a03018";
+}

package/dist/src/singlePageApp.js

@@ -9,5 +9,5 @@ if (specUrl) {
     document.body.innerHTML = `
         <p style="color: firebrick">No 'spec' url parameter defined!</p>
         <p>Try this one from the "static" folder, for example:
-        <a href="?spec=examples/first.json">examples/first.json</a></p>`;
+        <a href="?spec=examples/core/first.json">examples/core/first.json</a></p>`;
 }

package/dist/src/spec/data.d.ts

@@ -42,6 +42,7 @@ export interface DataFormatBase {
      * Type of input data: `"json"`, `"csv"`, `"tsv"`, `"dsv"`.
      *
      * __Default value:__  The default format type is determined by the extension of the file URL.
+     * Compression suffixes such as `.gz` are ignored during inference.
      * If no extension is detected, `"json"` will be used by default.
      */
     type?: DataFormatType;
@@ -75,10 +76,25 @@ export interface JsonDataFormat extends DataFormatBase {
     property?: string;
 }
 
+export interface BedDataFormat extends DataFormatBase {
+    type: "bed";
+}
+
+export interface BedpeDataFormat extends DataFormatBase {
+    type: "bedpe";
+
+    /**
+     * Optional ordered list of field names for headerless BEDPE input.
+     * If omitted, BEDPE fields are resolved from the default BEDPE column
+     * order or from a matching header row when present.
+     */
+    columns?: string[];
+}
+
 /**
  * Other data format, such as `"fasta"`
  */
-export interface OtherDataFormat {
+export interface OtherDataFormat extends DataFormatBase {
     type: string;
 }
 
@@ -86,6 +102,8 @@ export type DataFormat =
     | CsvDataFormat
     | DsvDataFormat
     | JsonDataFormat
+    | BedDataFormat
+    | BedpeDataFormat
     | OtherDataFormat;
 
 export type DataFormatType = "json" | "csv" | "tsv" | "dsv" | string;
@@ -129,7 +147,7 @@ export interface UrlList {
     /**
      * The format of the data in the list.
      * If the type is `"json"`, the list is expected to be an array of strings.
-     * If the type is `"csv"` or `"tsv"`, the list is expected to be a table with a single column named `file`.
+     * If the type is `"csv"` or `"tsv"`, the list is expected to be a table with a single column named `url`.
      *
      * __Default value:__ `"txt"`
      */
@@ -139,7 +157,9 @@ export interface UrlList {
 export interface UrlData extends DataBase {
     /**
      * An URL or an array of URLs from which to load the data set.
-     * Use the `format.type` property to ensure the loaded data is correctly parsed.
+     * Gzip-compressed resources are decompressed transparently when the URL,
+     * MIME type, or payload indicates gzip content. Use the `format.type`
+     * property to ensure the loaded data is correctly parsed.
      */
     url: string | string[] | ExprRef | UrlList;
 }

package/dist/src/spec/genome.d.ts

@@ -10,7 +10,7 @@ export interface GenomeConfigBase {
     name: string;
 }
 
-export interface UrlGenomeConfig extends GenomeConfigBase {
+export interface UrlGenomeDefinition {
     /**
      * A URL to a `chrom.sizes` file, which is a tab-separated file with two
      * columns: the sequence name and its size.
@@ -23,13 +23,33 @@ export interface UrlGenomeConfig extends GenomeConfigBase {
     url: string;
 }
 
-export interface InlineGenomeConfig extends GenomeConfigBase {
+export interface InlineGenomeDefinition {
     /**
      * An array of contigs/sequences in the genome assembly.
      */
     contigs: Contig[];
 }
 
+/**
+ * Genome definition for contexts where the name is provided externally
+ * (for example, as a key in root `genomes`) or not needed
+ * (for example, inline `scale.assembly`).
+ */
+export type GenomeDefinition = UrlGenomeDefinition | InlineGenomeDefinition;
+
+/**
+ * @deprecated Use `GenomeDefinition` in root `genomes` entries and `scale.assembly`.
+ */
+export type UrlGenomeConfig = GenomeConfigBase & UrlGenomeDefinition;
+
+/**
+ * @deprecated Use `GenomeDefinition` in root `genomes` entries and `scale.assembly`.
+ */
+export type InlineGenomeConfig = GenomeConfigBase & InlineGenomeDefinition;
+
+/**
+ * @deprecated Use root `genomes` and `assembly` instead of root `genome`.
+ */
 export type GenomeConfig =
     | UrlGenomeConfig
     | InlineGenomeConfig

package/dist/src/spec/parameter.d.ts

@@ -177,10 +177,21 @@ export type SelectionInitInterval =
     | Vector2<number>
     | Vector2<string>;
 
-export type InteractionEventType = "click" | "dblclick" | "mouseover";
+export type InteractionEventType =
+    | "click"
+    | "dblclick"
+    | "mouseover"
+    | "mousedown"
+    | "wheel";
 
 // TODO: merge with InteractionEventType
-export type DomEventType = "click" | "dblclick" | "mouseover" | "pointerover";
+export type DomEventType =
+    | "click"
+    | "dblclick"
+    | "mouseover"
+    | "pointerover"
+    | "mousedown"
+    | "wheel";
 
 export interface EventConfig {
     /**
@@ -208,6 +219,13 @@ export interface BaseSelectionConfig<T extends SelectionType = SelectionType> {
 
     /**
      * A string or object that defines the events to which the selection should listen.
+     *
+     * __Default value:__
+     *
+     * - point selections: `"click"`
+     * - interval selections:
+     *   - `"mousedown[event.shiftKey]"` when any brushed channel is zoomable
+     *   - `"mousedown"` otherwise
      */
     on?: DomEventType | EventConfig | string;
 
@@ -247,6 +265,25 @@ export interface IntervalSelectionConfig extends BaseSelectionConfig<"interval">
      * Use the `mark` property to adjust the appearance of this rectangle.
      */
     mark?: BrushConfig;
+
+    /**
+     * Controls whether an active interval selection can be resized by mouse wheel.
+     * The wheel interaction only applies when the cursor is over the interval.
+     *
+     * Can be:
+     *
+     * - `true` / `false`
+     * - event type string such as `"wheel"` or `"wheel[event.altKey]"`
+     * - an `EventConfig` object
+     *
+     * Currently, only `"wheel"` events are supported.
+     *
+     * __Default value:__
+     *
+     * - `false` when any brushed channel uses a zoomable scale
+     * - `true` otherwise
+     */
+    zoom?: DomEventType | EventConfig | string | boolean;
 }
 
 export interface BrushConfig extends ShadowProps {

package/dist/src/spec/root.d.ts

@@ -1,9 +1,28 @@
-import { GenomeConfig } from "./genome.js";
+import { GenomeConfig, GenomeDefinition } from "./genome.js";
 import { ViewSpec } from "./view.js";
 
+export type NamedGenomeConfig = GenomeDefinition | Record<string, never>;
+
 export interface RootConfig {
     $schema?: string;
 
+    /**
+     * Named genome assembly definitions.
+     *
+     * Each object key is the assembly name.
+     */
+    genomes?: Record<string, NamedGenomeConfig>;
+
+    /**
+     * Default assembly for locus scales that do not define `scale.assembly`.
+     *
+     * Can reference either a key in `genomes` or a built-in assembly name.
+     */
+    assembly?: string;
+
+    /**
+     * @deprecated Legacy root-level genome config. Use `genomes` and `assembly` instead.
+     */
     genome?: GenomeConfig;
 
     baseUrl?: string;

package/dist/src/spec/scale.d.ts

@@ -8,7 +8,7 @@
  * BSD-3-Clause License: https://github.com/vega/vega-lite/blob/master/LICENSE
  */
 
-import { ChromosomalLocus } from "./genome.js";
+import { ChromosomalLocus, GenomeDefinition } from "./genome.js";
 import { ExprRef } from "./parameter.js";
 
 export type ScaleType =
@@ -48,10 +48,16 @@ export interface Scale {
     type?: ScaleType;
 
     /**
-     * The genome assembly name for locus scales. If undefined, the default
-     * genome from the genome store is used.
+     * Genome assembly definition for locus scales.
+     *
+     * This can be:
+     *
+     * - A string reference to a named assembly (built-in or root-configured).
+     * - An inline anonymous assembly that defines either `contigs` or `url`.
+     *
+     * If undefined, the default genome from the genome store is used.
      */
-    assembly?: string;
+    assembly?: string | InlineLocusAssembly;
 
     /**
      * Customized domain values.
@@ -62,7 +68,7 @@ export interface Scale {
      *
      * For _ordinal_ and _nominal_ fields, `domain` can be an array that lists valid input values.
      */
-    domain?: ScalarDomain | ComplexDomain;
+    domain?: ScalarDomain | ComplexDomain | SelectionDomainRef;
 
     /**
      * Inserts a single mid-point value into a two-element domain. The mid-point value must lie between the domain minimum and maximum values. This property can be useful for setting a midpoint for [diverging color scales](https://vega.github.io/vega-lite/docs/scale.html#piecewise). The domainMid property is only intended for use with scales supporting continuous, piecewise domains.
@@ -230,6 +236,36 @@ export interface Scale {
     zoom?: boolean | ZoomParams;
 }
 
+export type InlineLocusAssembly = GenomeDefinition;
+
+export interface SelectionDomainRef {
+    /**
+     * Name of an interval selection parameter that provides the domain.
+     */
+    param: string;
+
+    /**
+     * Selection interval channel to use.
+     *
+     * If omitted, GenomeSpy infers the channel from the scale channel when
+     * possible (e.g., `x` -> `x`, `x2` -> `x`, `y` -> `y`, `y2` -> `y`).
+     */
+    encoding?: "x" | "y";
+
+    /**
+     * Domain synchronization mode.
+     *
+     * - `"oneWay"`: selection drives the domain.
+     * - `"twoWay"`: selection drives the domain and zoom/pan updates selection.
+     *
+     * __Default value:__ implicit auto mode:
+     *
+     * - `"twoWay"` when the linked scale is zoomable
+     * - `"oneWay"` otherwise
+     */
+    sync?: "oneWay" | "twoWay";
+}
+
 export interface SchemeParams {
     /**
      * A color scheme name for ordinal scales (e.g., `"category10"` or `"blues"`).

package/dist/src/styles/genome-spy.css

@@ -21,6 +21,7 @@
 
     canvas {
         display: block;
+        touch-action: none;
         transform: scale(1, 1);
         opacity: 1;
         transition:
@@ -163,6 +164,13 @@
             box-shadow: 0px 0px 3px 1px white;
         }
 
+        .color-legend-unmapped {
+            background-color: transparent;
+            border: 1px solid black;
+            box-sizing: border-box;
+            box-shadow: none;
+        }
+
         .attributes {
             .hovered {
                 background-color: #e0e0e0;

package/dist/src/styles/genome-spy.css.d.ts

@@ -1,3 +1,3 @@
 export default css;
-declare const css: "\n:root {\n--genome-spy-basic-spacing: 10px;\n--genome-spy-font-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial,\nsans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\n.genome-spy {\nfont-family: var(--genome-spy-font-family);\n\nposition: relative;\n\ndisplay: flex;\nflex-direction: column;\n\n.canvas-wrapper {\nposition: relative;\nflex-grow: 1;\noverflow: hidden;\n}\n\ncanvas {\ndisplay: block;\ntransform: scale(1, 1);\nopacity: 1;\ntransition:\ntransform 0.6s,\nopacity 0.6s;\n\n&:focus,\n&:focus-visible {\noutline: none;\n}\n}\n\n.loading {\n> canvas {\ntransform: scale(0.95, 0.95);\nopacity: 0;\n}\n}\n\n.loading-indicators {\nposition: absolute;\ninset: 0;\n\nuser-select: none;\npointer-events: none;\n\ndiv {\nposition: absolute;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n\n> div {\nfont-size: 11px;\ntransition: opacity 0.2s;\nbackground: white;\npadding: 2px 5px;\ndisplay: flex;\nborder-radius: 3px;\ngap: 0.5em;\nopacity: 0;\n\n&.loading {\nopacity: 0.5;\n}\n\n&.error {\nopacity: 0.8;\ncolor: firebrick;\n}\n\n> * {\ndisplay: block;\n}\n\nimg {\nwidth: 1.5em;\nheight: 1.5em;\n}\n}\n}\n}\n\n.tooltip {\nposition: absolute;\n\nmax-width: 450px;\noverflow: hidden;\n\n--background-color: #f6f6f6;\nbackground: var(--background-color);\npadding: var(--genome-spy-basic-spacing);\n\n--font-size: 12px;\nfont-size: var(--font-size);\n\nbox-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n\n&:not(.sticky) {\npointer-events: none;\n}\n\ntransition:\noutline-color 0.3s ease-in-out,\nbox-shadow 0.3s ease-in-out;\n\noutline: 0px solid transparent;\n&.sticky {\noutline: 2px solid black;\nbox-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);\n}\n\nz-index: 100;\n\n> :last-child {\nmargin-bottom: 0;\n}\n\n> .title {\npadding-bottom: calc(var(--genome-spy-basic-spacing) / 2);\nmargin-bottom: calc(var(--genome-spy-basic-spacing) / 2);\nborder-bottom: 1px dashed var(--background-color);\nborder-bottom: 1px dashed\ncolor-mix(in srgb, black 25%, var(--background-color));\n}\n\n.summary {\nfont-size: 12px;\n}\n\ntable {\n&:first-child {\nmargin-top: 0;\n}\n\nborder-collapse: collapse;\n\nth,\ntd {\npadding: 2px 0.4em;\nvertical-align: top;\nfont-size: var(--font-size);\n\n&:first-child {\npadding-left: 0;\n}\n}\n\nth {\ntext-align: left;\nfont-weight: bold;\n}\n}\n\n.color-legend {\ndisplay: inline-block;\nwidth: 0.8em;\nheight: 0.8em;\nmargin-left: 0.4em;\nbox-shadow: 0px 0px 3px 1px white;\n}\n\n.attributes {\n.hovered {\nbackground-color: #e0e0e0;\n}\n}\n\n.na {\ncolor: #aaa;\nfont-style: italic;\nfont-size: 80%;\n}\n}\n\n.gene-track-tooltip {\n.summary {\nfont-size: 90%;\n}\n}\n\n.message-box {\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nposition: absolute;\ntop: 0;\nheight: 100%;\nwidth: 100%;\n\n> div {\nborder: 1px solid red;\npadding: 10px;\nbackground: #fff0f0;\n}\n}\n}\n\n.gs-input-binding {\ndisplay: grid;\ngrid-template-columns: max-content max-content;\ncolumn-gap: 1em;\nrow-gap: 0.3em;\njustify-items: start;\n\n> select,\n> input:not([type=\"checkbox\"]) {\nwidth: 100%;\n}\n\ninput[type=\"range\"] + span {\ndisplay: inline-block;\nmargin-left: 0.3em;\nmin-width: 2.2em;\nfont-variant-numeric: tabular-nums;\n}\n\ninput[type=\"range\"],\ninput[type=\"radio\"] {\nvertical-align: text-bottom;\n}\n\n.radio-group {\ndisplay: flex;\nalign-items: center;\n}\n\n.description {\nmax-width: 26em;\ngrid-column: 1 / -1;\ncolor: #777;\nfont-size: 90%;\nmargin-top: -0.5em;\n}\n}\n\n.gs-input-bindings {\nflex-basis: content;\nfont-size: 14px;\npadding: var(--genome-spy-basic-spacing);\n}\n";
+declare const css: "\n:root {\n--genome-spy-basic-spacing: 10px;\n--genome-spy-font-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial,\nsans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\n.genome-spy {\nfont-family: var(--genome-spy-font-family);\n\nposition: relative;\n\ndisplay: flex;\nflex-direction: column;\n\n.canvas-wrapper {\nposition: relative;\nflex-grow: 1;\noverflow: hidden;\n}\n\ncanvas {\ndisplay: block;\ntouch-action: none;\ntransform: scale(1, 1);\nopacity: 1;\ntransition:\ntransform 0.6s,\nopacity 0.6s;\n\n&:focus,\n&:focus-visible {\noutline: none;\n}\n}\n\n.loading {\n> canvas {\ntransform: scale(0.95, 0.95);\nopacity: 0;\n}\n}\n\n.loading-indicators {\nposition: absolute;\ninset: 0;\n\nuser-select: none;\npointer-events: none;\n\ndiv {\nposition: absolute;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n\n> div {\nfont-size: 11px;\ntransition: opacity 0.2s;\nbackground: white;\npadding: 2px 5px;\ndisplay: flex;\nborder-radius: 3px;\ngap: 0.5em;\nopacity: 0;\n\n&.loading {\nopacity: 0.5;\n}\n\n&.error {\nopacity: 0.8;\ncolor: firebrick;\n}\n\n> * {\ndisplay: block;\n}\n\nimg {\nwidth: 1.5em;\nheight: 1.5em;\n}\n}\n}\n}\n\n.tooltip {\nposition: absolute;\n\nmax-width: 450px;\noverflow: hidden;\n\n--background-color: #f6f6f6;\nbackground: var(--background-color);\npadding: var(--genome-spy-basic-spacing);\n\n--font-size: 12px;\nfont-size: var(--font-size);\n\nbox-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n\n&:not(.sticky) {\npointer-events: none;\n}\n\ntransition:\noutline-color 0.3s ease-in-out,\nbox-shadow 0.3s ease-in-out;\n\noutline: 0px solid transparent;\n&.sticky {\noutline: 2px solid black;\nbox-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);\n}\n\nz-index: 100;\n\n> :last-child {\nmargin-bottom: 0;\n}\n\n> .title {\npadding-bottom: calc(var(--genome-spy-basic-spacing) / 2);\nmargin-bottom: calc(var(--genome-spy-basic-spacing) / 2);\nborder-bottom: 1px dashed var(--background-color);\nborder-bottom: 1px dashed\ncolor-mix(in srgb, black 25%, var(--background-color));\n}\n\n.summary {\nfont-size: 12px;\n}\n\ntable {\n&:first-child {\nmargin-top: 0;\n}\n\nborder-collapse: collapse;\n\nth,\ntd {\npadding: 2px 0.4em;\nvertical-align: top;\nfont-size: var(--font-size);\n\n&:first-child {\npadding-left: 0;\n}\n}\n\nth {\ntext-align: left;\nfont-weight: bold;\n}\n}\n\n.color-legend {\ndisplay: inline-block;\nwidth: 0.8em;\nheight: 0.8em;\nmargin-left: 0.4em;\nbox-shadow: 0px 0px 3px 1px white;\n}\n\n.color-legend-unmapped {\nbackground-color: transparent;\nborder: 1px solid black;\nbox-sizing: border-box;\nbox-shadow: none;\n}\n\n.attributes {\n.hovered {\nbackground-color: #e0e0e0;\n}\n}\n\n.na {\ncolor: #aaa;\nfont-style: italic;\nfont-size: 80%;\n}\n}\n\n.gene-track-tooltip {\n.summary {\nfont-size: 90%;\n}\n}\n\n.message-box {\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nposition: absolute;\ntop: 0;\nheight: 100%;\nwidth: 100%;\n\n> div {\nborder: 1px solid red;\npadding: 10px;\nbackground: #fff0f0;\n}\n}\n}\n\n.gs-input-binding {\ndisplay: grid;\ngrid-template-columns: max-content max-content;\ncolumn-gap: 1em;\nrow-gap: 0.3em;\njustify-items: start;\n\n> select,\n> input:not([type=\"checkbox\"]) {\nwidth: 100%;\n}\n\ninput[type=\"range\"] + span {\ndisplay: inline-block;\nmargin-left: 0.3em;\nmin-width: 2.2em;\nfont-variant-numeric: tabular-nums;\n}\n\ninput[type=\"range\"],\ninput[type=\"radio\"] {\nvertical-align: text-bottom;\n}\n\n.radio-group {\ndisplay: flex;\nalign-items: center;\n}\n\n.description {\nmax-width: 26em;\ngrid-column: 1 / -1;\ncolor: #777;\nfont-size: 90%;\nmargin-top: -0.5em;\n}\n}\n\n.gs-input-bindings {\nflex-basis: content;\nfont-size: 14px;\npadding: var(--genome-spy-basic-spacing);\n}\n";
 //# sourceMappingURL=genome-spy.css.d.ts.map

package/dist/src/styles/genome-spy.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,0iHAoPE"}
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,osHA4PE"}