@genome-spy/core 0.76.0 → 0.78.0

package/dist/src/scales/viewLevelScaleConfig.js

@@ -0,0 +1,138 @@
+/**
+ * @typedef {import("../spec/channel.js").ChannelWithScale} ChannelWithScale
+ * @typedef {import("../spec/scale.js").Scale} Scale
+ * @typedef {import("../view/view.js").default} View
+ * @typedef {import("./scaleResolution.js").default} ScaleResolution
+ *
+ * @typedef {object} ViewLevelScaleConfigMapping
+ * @prop {View} view
+ * @prop {ChannelWithScale} channel
+ * @prop {Scale} config
+ * @prop {ScaleResolution | undefined} resolution
+ */
+
+/**
+ * Maps view-level scale configs to the unique scale resolution visible from
+ * each configured subtree. Configs with no matching resolution stay pending.
+ *
+ * @param {View} root
+ * @returns {ViewLevelScaleConfigMapping[]}
+ */
+export function mapViewLevelScaleConfigs(root) {
+    /** @type {ViewLevelScaleConfigMapping[]} */
+    const mappings = [];
+
+    for (const view of root.getDescendants()) {
+        const scales = view.spec.scales;
+        if (!scales) {
+            continue;
+        }
+
+        for (const [channel, config] of Object.entries(scales)) {
+            mappings.push(
+                mapViewLevelScaleConfig(
+                    view,
+                    /** @type {ChannelWithScale} */ (channel),
+                    config
+                )
+            );
+        }
+    }
+
+    return mappings;
+}
+
+/**
+ * Maps view-level scale configs and attaches non-pending configs to their
+ * target resolutions.
+ *
+ * @param {View} root
+ * @returns {ViewLevelScaleConfigMapping[]}
+ */
+export function attachViewLevelScaleConfigs(root) {
+    clearViewLevelScaleConfigs(root);
+    const mappings = mapViewLevelScaleConfigs(root);
+    for (const mapping of mappings) {
+        if (mapping.resolution) {
+            mapping.resolution.attachViewLevelScaleConfig(
+                mapping.view,
+                mapping.config
+            );
+        }
+    }
+    return mappings;
+}
+
+/**
+ * Clears view-level scale configs owned by views in the subtree.
+ *
+ * @param {View} root
+ */
+export function clearViewLevelScaleConfigs(root) {
+    const views = new Set(root.getDescendants());
+    const resolutions = collectAllScaleResolutions(root);
+
+    for (const resolution of resolutions) {
+        const config = resolution.getViewLevelScaleConfig();
+        if (config && views.has(config.view)) {
+            resolution.clearViewLevelScaleConfig(config.view);
+        }
+    }
+}
+
+/**
+ * @param {View} view
+ * @param {ChannelWithScale} channel
+ * @param {Scale} config
+ * @returns {ViewLevelScaleConfigMapping}
+ */
+function mapViewLevelScaleConfig(view, channel, config) {
+    const resolutions = collectVisibleScaleResolutions(view, channel);
+
+    if (resolutions.size > 1) {
+        throw new Error(
+            `View-level scales.${channel} maps to multiple scale resolutions. ` +
+                `Move scales.${channel} closer to the intended subtree or configure scale resolution explicitly.`
+        );
+    }
+
+    const resolution = resolutions.values().next().value;
+    return {
+        view,
+        channel,
+        config,
+        resolution,
+    };
+}
+
+/**
+ * @param {View} view
+ * @param {ChannelWithScale} channel
+ * @returns {Set<ScaleResolution>}
+ */
+function collectVisibleScaleResolutions(view, channel) {
+    /** @type {Set<ScaleResolution>} */
+    const resolutions = new Set();
+    for (const descendant of view.getDescendants()) {
+        const resolution = descendant.getScaleResolution(channel);
+        if (resolution) {
+            resolutions.add(resolution);
+        }
+    }
+    return resolutions;
+}
+
+/**
+ * @param {View} view
+ * @returns {Set<ScaleResolution>}
+ */
+function collectAllScaleResolutions(view) {
+    /** @type {Set<ScaleResolution>} */
+    const resolutions = new Set();
+    for (const descendant of view.getDescendants()) {
+        for (const resolution of Object.values(descendant.resolutions.scale)) {
+            resolutions.add(resolution);
+        }
+    }
+    return resolutions;
+}

package/dist/src/selection/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Creates a runtime interval selection value for use with parameter APIs.
+ *
+ * @param {Partial<Record<import("../spec/channel.js").PositionalChannel, [number, number] | null>>} intervals
+ * @returns {import("../types/selectionTypes.js").IntervalSelection}
+ */
+export function intervalSelection(intervals: Partial<Record<import("../spec/channel.js").PositionalChannel, [number, number] | null>>): import("../types/selectionTypes.js").IntervalSelection;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/selection/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/selection/index.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,6CAHW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,iBAAiB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,GACtF,OAAO,4BAA4B,EAAE,iBAAiB,CAOlE"}

package/dist/src/selection/index.js

@@ -0,0 +1,12 @@
+/**
+ * Creates a runtime interval selection value for use with parameter APIs.
+ *
+ * @param {Partial<Record<import("../spec/channel.js").PositionalChannel, [number, number] | null>>} intervals
+ * @returns {import("../types/selectionTypes.js").IntervalSelection}
+ */
+export function intervalSelection(intervals) {
+    return {
+        type: "interval",
+        intervals: { ...intervals },
+    };
+}

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

@@ -67,8 +67,17 @@ export interface Scale {
      * For _temporal_ fields, `domain` can be a two-element array minimum and maximum values, in the form of either timestamps or the [DateTime definition objects](https://vega.github.io/vega-lite/docs/types.html#datetime).
      *
      * For _ordinal_ and _nominal_ fields, `domain` can be an array that lists valid input values.
+
+     * The domain can also be defined by an expression reference that evaluates to the domain array.
+     * Array elements may also be expression references.
+     *
      */
-    domain?: ScalarDomain | ComplexDomain | SelectionDomainRef | ExprRef;
+    domain?:
+        | ScalarDomain
+        | ComplexDomain
+        | SelectionDomainRef
+        | ExprRef
+        | DomainValueArray;
 
     /**
      * 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.
@@ -97,10 +106,10 @@ export interface Scale {
      * transition.
      *
      * Set this to `false` to apply domain updates immediately. The default is
-     * `true`, except for domains defined by an `ExprRef`, which default to
+     * `true`, except for domains that include `ExprRef`s, which default to
      * `false` unless overridden.
      *
-     * __Default value:__ `true`, except `false` for ExprRef-driven domains.
+     * __Default value:__ `true`, except `false` for `ExprRef`-driven domains.
      */
     domainTransition?: boolean | Record<string, unknown>;
 
@@ -109,9 +118,9 @@ export interface Scale {
      *
      * - A string indicating a [pre-defined named scale range](https://vega.github.io/vega-lite/docs/scale.html#range-config) (e.g., example, `"symbol"`, or `"diverging"`).
      *
-     * - For [continuous scales](https://vega.github.io/vega-lite/docs/scale.html#continuous), two-element array indicating  minimum and maximum values, or an array with more than two entries for specifying a [piecewise scale](https://vega.github.io/vega-lite/docs/scale.html#piecewise).
+     * - For [continuous scales](https://vega.github.io/vega-lite/docs/scale.html#continuous), two-element array indicating minimum and maximum values, or an array with more than two entries for specifying a [piecewise scale](https://vega.github.io/vega-lite/docs/scale.html#piecewise). Array elements may also be expression references.
      *
-     * - For [discrete](https://vega.github.io/vega-lite/docs/scale.html#discrete) and [discretizing](https://vega.github.io/vega-lite/docs/scale.html#discretizing) scales, an array of desired output values.
+     * - For [discrete](https://vega.github.io/vega-lite/docs/scale.html#discrete) and [discretizing](https://vega.github.io/vega-lite/docs/scale.html#discretizing) scales, an array of desired output values. Array elements may also be expression references.
      *
      * __Notes:__
      *
@@ -119,7 +128,7 @@ export interface Scale {
      *
      * 2) Any directly specified `range` for `x` and `y` channels will be ignored. Range can be customized via the view's corresponding [size](https://vega.github.io/vega-lite/docs/size.html) (`width` and `height`).
      */
-    range?: number[] | string[] | string | ExprRef[];
+    range?: (number | string | ExprRef)[] | string;
 
     // ordinal
 
@@ -257,6 +266,10 @@ export interface Scale {
 
 export type InlineLocusAssembly = GenomeDefinition;
 
+export type DomainValue = number | string | boolean | ExprRef;
+
+export type DomainValueArray = DomainValue[];
+
 export interface SelectionDomainRef {
     /**
      * Name of an interval selection parameter that provides the domain.

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

@@ -2,6 +2,7 @@ import { Data } from "./data.js";
 import { TransformParams } from "./transform.js";
 import {
     Channel,
+    ChannelWithScale,
     Encoding,
     FacetFieldDef,
     PrimaryPositionalChannel,
@@ -12,6 +13,7 @@ import { Title } from "./title.js";
 import { Parameter } from "./parameter.js";
 import { GenomeSpyConfig } from "./config.js";
 import { ViewBackgroundProps, ZIndexProps } from "./decoration.js";
+import { Scale } from "./scale.js";
 
 export interface SizeDef {
     /**
@@ -211,6 +213,15 @@ export interface ViewSpecBase extends ResolveSpec {
      */
     config?: GenomeSpyConfig;
 
+    /**
+     * Configures scale resolutions used by this view subtree.
+     *
+     * Use this when a composed view shares a scale across child views and the
+     * scale settings, such as the visible domain, belong to the composed view
+     * rather than an individual encoding.
+     */
+    scales?: Partial<Record<ChannelWithScale, Scale>>;
+
     /**
      * Specifies a [data source](https://genomespy.app/docs/grammar/data/).
      * If omitted, the data source is inherited from the parent view.

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

@@ -86,7 +86,10 @@
     }
 
     .tooltip {
-        position: absolute;
+        position: fixed;
+        inset: auto;
+        margin: 0;
+        border: 0;
 
         max-width: 450px;
         overflow: hidden;
@@ -177,6 +180,14 @@
             }
         }
 
+        .autoscroll-container {
+            max-height: min(40em, 50vh);
+            overflow-x: hidden;
+            overflow-y: auto;
+            padding-right: var(--genome-spy-basic-spacing);
+            margin-right: calc(-1 * var(--genome-spy-basic-spacing));
+        }
+
         .na {
             color: #aaa;
             font-style: italic;

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

@@ -1,3 +1,3 @@
 export default css;
-declare const css: "\n@scope {\n:scope {\n--genome-spy-basic-spacing: 10px;\n--genome-spy-font-family:\nsystem-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif,\n\"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n\nfont-family: var(--genome-spy-font-family);\n\nposition: relative;\n\ndisplay: flex;\nflex-direction: column;\n}\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.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\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";
+declare const css: "\n@scope {\n:scope {\n--genome-spy-basic-spacing: 10px;\n--genome-spy-font-family:\nsystem-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif,\n\"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n\nfont-family: var(--genome-spy-font-family);\n\nposition: relative;\n\ndisplay: flex;\nflex-direction: column;\n}\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: fixed;\ninset: auto;\nmargin: 0;\nborder: 0;\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.autoscroll-container {\nmax-height: min(40em, 50vh);\noverflow-x: hidden;\noverflow-y: auto;\npadding-right: var(--genome-spy-basic-spacing);\nmargin-right: calc(-1 * var(--genome-spy-basic-spacing));\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.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\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";
 //# 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,isHA6PE"}
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,o7HAwQE"}

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

@@ -87,7 +87,10 @@ height: 1.5em;
 }
 
 .tooltip {
-position: absolute;
+position: fixed;
+inset: auto;
+margin: 0;
+border: 0;
 
 max-width: 450px;
 overflow: hidden;
@@ -178,6 +181,14 @@ background-color: #e0e0e0;
 }
 }
 
+.autoscroll-container {
+max-height: min(40em, 50vh);
+overflow-x: hidden;
+overflow-y: auto;
+padding-right: var(--genome-spy-basic-spacing);
+margin-right: calc(-1 * var(--genome-spy-basic-spacing));
+}
+
 .na {
 color: #aaa;
 font-style: italic;

package/dist/src/types/embedApi.d.ts

@@ -2,6 +2,8 @@ import { ScaleResolutionApi } from "./scaleResolutionApi.js";
 import { TooltipHandler } from "../tooltip/tooltipHandler.js";
 import { RootSpec } from "../spec/root.js";
 import { GenomeSpyConfig } from "../spec/config.js";
+import { Scalar } from "../spec/channel.js";
+import { IntervalSelection } from "./selectionTypes.js";
 
 /**
  * Embeds GenomeSpy into the DOM
@@ -54,6 +56,47 @@ export interface EmbedOptions {
     onError?: (error: unknown, container: HTMLElement) => boolean | void;
 }
 
+/**
+ * Runtime value type covered by the default embed parameter API.
+ *
+ * The default type covers scalar variable parameters and interval selections.
+ * Object and array variable parameters are supported at runtime, but callers
+ * should provide their own generic type when accessing them:
+ *
+ * `const param = api.getParam<MyValue>("myParam")`
+ *
+ * Current limitations:
+ *
+ * - Parameters are addressed by name only. Independent same-name parameters
+ *   throw an ambiguity error.
+ * - Computed `expr` parameters are readable but cannot be written.
+ * - Point selections are readable as runtime values but are not supported for
+ *   writes through the initial API because valid values require
+ *   GenomeSpy-generated datum ids.
+ * - Projected selections are not supported.
+ */
+export type ParamValue = Scalar | null | undefined | IntervalSelection;
+
+/**
+ * A handle for reading, writing, and subscribing to an explicit parameter.
+ */
+export interface ParamApi<T = ParamValue> {
+    /**
+     * Returns the current parameter value.
+     */
+    getValue: () => T;
+
+    /**
+     * Sets the parameter value. Computed `expr` parameters throw when set.
+     */
+    setValue: (value: T) => void;
+
+    /**
+     * Subscribes to parameter changes. Returns an unsubscribe function.
+     */
+    subscribe: (listener: (value: T) => void) => () => void;
+}
+
 /**
  * An API for controlling the embedded GenomeSpy instance.
  */
@@ -82,6 +125,17 @@ export interface EmbedResult {
      */
     getScaleResolutionByName: (name: string) => ScaleResolutionApi;
 
+    /**
+     * Returns a handle for reading, writing, and subscribing to a named
+     * parameter.
+     *
+     * Parameters are addressed by name only. If the name resolves to multiple
+     * independent parameters, this method throws an ambiguity error. Parameters
+     * declared with `push: "outer"` are treated as aliases of the outer
+     * parameter they write to.
+     */
+    getParam: <T = ParamValue>(name: string) => ParamApi<T>;
+
     /**
      * Waits until lazy data sources have loaded data for the current visible
      * positional domain.

package/dist/src/types/scaleResolutionApi.d.ts

@@ -10,6 +10,25 @@ export interface ScaleResolutionEvent {
 
 export type ScaleResolutionListener = (event: ScaleResolutionEvent) => void;
 
+export interface ZoomToOptions {
+    /**
+     * Approximate transition duration. Zero or omitted zooms immediately.
+     * Boolean `true` indicates a default duration.
+     */
+    duration?: boolean | number;
+
+    /**
+     * Render immediately without scheduling an animation frame.
+     *
+     * This is intended for synchronizing multiple GenomeSpy instances, where
+     * the target view should be redrawn during the same animation frame as the
+     * source view. Use it only for zero-duration zooms. It is not supported for
+     * animated transitions and may do redundant work if several domains are
+     * applied before the browser has a chance to paint.
+     */
+    renderImmediately?: boolean;
+}
+
 /**
  * A public API for ScaleResolution
  */
@@ -59,6 +78,14 @@ export interface ScaleResolutionApi {
 
     zoomTo(
         domain: number[] | ComplexDomain,
-        duration?: boolean | number
+        options?: ZoomToOptions
+    ): Promise<void>;
+
+    /**
+     * @deprecated Use the options object form: `zoomTo(domain, { duration })`.
+     */
+    zoomTo(
+        domain: number[] | ComplexDomain,
+        duration: boolean | number
     ): Promise<void>;
 }

package/dist/src/types/viewContext.d.ts

@@ -34,6 +34,17 @@ export default interface ViewContext {
 
     requestLayoutReflow: () => void;
 
+    /**
+     * Renders the current scene immediately without scheduling an animation frame.
+     *
+     * This is intended for synchronization paths where another GenomeSpy
+     * instance is already rendering the current animation frame and this view
+     * must repaint after a synchronous state update, such as linked scale
+     * domains. Callers should use the animator for ordinary rendering. Calling
+     * this repeatedly before the browser paints may do redundant work.
+     */
+    renderImmediately: () => void;
+
     updateTooltip: <T>(
         datum: T,
         converter?: (datum: T) => Promise<TemplateResult>

package/dist/src/utils/ui/tooltip.d.ts

@@ -16,6 +16,10 @@ export default class Tooltip {
     set visible(visible: boolean);
     get visible(): boolean;
     get enabled(): boolean;
+    /**
+     * @param {Event} event
+     */
+    containsEvent(event: Event): boolean;
     /**
      * @param {boolean} enabled True if tooltip is enabled (allowed to be shown)
      */

package/dist/src/utils/ui/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/utils/ui/tooltip.js"],"names":[],"mappings":"AAIA,0CAA2C,qBAAqB,CAAC;AACjE,4CAA6C,uBAAuB,CAAC;AAErE;IAsBI;;OAEG;IACH,uBAFW,WAAW,EAUrB;IAED;;OAEG;IACH,mBAFW,OAAO,EAQjB;IAED,cAVW,OAAO,CAYjB;IAED;;OAEG;IACH,qBAFW,OAAO,EAOjB;IAED,eATW,OAAO,CAWjB;IAED,uBAEC;IAED;;OAEG;IACH,0BAFW,OAAO,QAOjB;IAED,wBAEC;IAED;;OAEG;IACH,4BAFW,UAAU,QAsCpB;IA/BG,8BAA2D;IAiC/D,wBAiBC;IAED;;OAEG;IACH,oBAFW,MAAM,GAAG,OAAO,KAAK,EAAE,cAAc,GAAG,WAAW,QAqB7D;IAED,cAGC;IAED;;;;;;;OAOG;IACH,gBAFa,CAAC,SAFH,CAAC,cACD,CAAS,IAAC,EAAD,CAAC,KAAE,OAAO,CAAC,MAAM,GAAG,WAAW,GAAG,OAAO,KAAK,EAAE,cAAc,CAAC,QAyBlF;IAED,sBAEC;;CACJ"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/utils/ui/tooltip.js"],"names":[],"mappings":"AAGA,0CAA2C,qBAAqB,CAAC;AACjE,4CAA6C,uBAAuB,CAAC;AAErE;IAqBI;;OAEG;IACH,uBAFW,WAAW,EASrB;IAED;;OAEG;IACH,mBAFW,OAAO,EAQjB;IAED,cAVW,OAAO,CAYjB;IAED;;OAEG;IACH,qBAFW,OAAO,EAQjB;IAED,eAVW,OAAO,CAYjB;IAED,uBAEC;IAED;;OAEG;IACH,qBAFW,KAAK,WAIf;IAED;;OAEG;IACH,0BAFW,OAAO,QAOjB;IAED,wBAEC;IAED;;OAEG;IACH,4BAFW,UAAU,QAyCpB;IAlCG,8BAGE;IAiCN,wBAiBC;IAED;;OAEG;IACH,oBAFW,MAAM,GAAG,OAAO,KAAK,EAAE,cAAc,GAAG,WAAW,QAwB7D;IAED,cAGC;IAED;;;;;;;OAOG;IACH,gBAFa,CAAC,SAFH,CAAC,cACD,CAAS,IAAC,EAAD,CAAC,KAAE,OAAO,CAAC,MAAM,GAAG,WAAW,GAAG,OAAO,KAAK,EAAE,cAAc,CAAC,QAyBlF;IAED,sBAEC;;CAkBJ"}

package/dist/src/utils/ui/tooltip.js

@@ -1,4 +1,3 @@
-import clientPoint from "../point.js";
 import { html, render } from "lit";
 import { peek } from "../arrayUtils.js";
 
@@ -22,8 +21,7 @@ export default class Tooltip {
     /** @type {HTMLDivElement} */
     #element;
 
-    /** @type {HTMLElement} */
-    #container;
+    #popoverOpen = false;
 
     #enabledStack = [true];
 
@@ -31,11 +29,10 @@ export default class Tooltip {
      * @param {HTMLElement} container
      */
     constructor(container) {
-        this.#container = container;
-
         this.#element = document.createElement("div");
         this.#element.className = "tooltip";
-        this.#container.appendChild(this.#element);
+        this.#element.setAttribute("popover", "manual");
+        container.appendChild(this.#element);
 
         this.clear();
     }
@@ -61,6 +58,7 @@ export default class Tooltip {
     set visible(visible) {
         if (visible != this.#visible) {
             this.#element.style.display = visible ? null : "none";
+            this.#setPopoverOpen(visible);
             this.#visible = visible;
         }
     }
@@ -73,6 +71,13 @@ export default class Tooltip {
         return peek(this.#enabledStack) ?? true;
     }
 
+    /**
+     * @param {Event} event
+     */
+    containsEvent(event) {
+        return event.composedPath().includes(this.#element);
+    }
+
     /**
      * @param {boolean} enabled True if tooltip is enabled (allowed to be shown)
      */
@@ -95,7 +100,10 @@ export default class Tooltip {
             return;
         }
 
-        this.mouseCoords = clientPoint(this.#container, mouseEvent);
+        this.mouseCoords = /** @type {[number, number]} */ ([
+            mouseEvent.clientX,
+            mouseEvent.clientY,
+        ]);
 
         const now = performance.now();
 
@@ -130,12 +138,12 @@ export default class Tooltip {
 
     updatePlacement() {
         /** Space between pointer and tooltip box */
-        const spacing = 20;
+        const spacing = 10;
 
         const [mouseX, mouseY] = this.mouseCoords;
 
         let x = mouseX + spacing;
-        if (x > this.#container.clientWidth - this.#element.offsetWidth) {
+        if (x > window.innerWidth - spacing - this.#element.offsetWidth) {
             x = mouseX - spacing - this.#element.offsetWidth;
         }
         this.#element.style.left = x + "px";
@@ -143,7 +151,7 @@ export default class Tooltip {
         this.#element.style.top =
             Math.min(
                 mouseY + spacing,
-                this.#container.clientHeight - this.#element.offsetHeight
+                window.innerHeight - spacing - this.#element.offsetHeight
             ) + "px";
     }
 
@@ -165,6 +173,9 @@ export default class Tooltip {
         }
 
         render(content, this.#element);
+        this.#element
+            .querySelectorAll(".autoscroll-container")
+            .forEach(scrollHoveredTooltipRow);
 
         this.visible = true;
 
@@ -211,6 +222,42 @@ export default class Tooltip {
     _isPenalty() {
         return this.#penaltyUntil && this.#penaltyUntil > performance.now();
     }
+
+    /**
+     * @param {boolean} open
+     */
+    #setPopoverOpen(open) {
+        if (open == this.#popoverOpen) {
+            return;
+        }
+
+        if (open && this.#element.showPopover) {
+            this.#element.showPopover();
+        } else if (!open && this.#element.hidePopover) {
+            this.#element.hidePopover();
+        }
+
+        this.#popoverOpen = open;
+    }
+}
+
+/**
+ * Scrolls the highlighted tooltip row into view after Lit has committed the
+ * current render.
+ *
+ * @param {Element | undefined} element
+ */
+function scrollHoveredTooltipRow(element) {
+    if (!element) {
+        return;
+    }
+
+    queueMicrotask(() => {
+        element.querySelector("tr.hovered")?.scrollIntoView({
+            block: "nearest",
+            inline: "nearest",
+        });
+    });
 }
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"containerMutationHelper.d.ts","sourceRoot":"","sources":["../../../src/view/containerMutationHelper.js"],"names":[],"mappings":"AAQA;;;GAGG;AACH;IACI;;;;;;;;;;OAUG;IAEH;;;;;;;;;;;OAWG;IAEH;;;OAGG;IACH,uBAHW,OAAO,oBAAoB,EAAE,OAAO;uBAZ3B;mBARR,CAAC,yEAAqB,CAAC,EAAE;sBACtB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,IAAI;sBACpD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;SAMF;oBACnB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sBACrB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC;sBAClE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;sBAChC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,MAAM;4BAChD,OAAO,yBAAyB,EAAE,iBAAiB;wBACvD,OAAO;OAW3B;IAFG,yFAA0B;IAC1B;uBAjBgB;mBARR,CAAC,yEAAqB,CAAC,EAAE;sBACtB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,IAAI;sBACpD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;SAMF;oBACnB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sBACrB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC;sBAClE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;sBAChC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,MAAM;4BAChD,OAAO,yBAAyB,EAAE,iBAAiB;wBACvD,OAAO;MAUF;IAG1B;;;;;;OAMG;IACH,wBAJW,OAAO,iBAAiB,EAAE,QAAQ,GAAG,OAAO,iBAAiB,EAAE,UAAU,UACzE,MAAM,GACJ,OAAO,iEAAM,CAuDzB;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAehB;CACJ"}
+{"version":3,"file":"containerMutationHelper.d.ts","sourceRoot":"","sources":["../../../src/view/containerMutationHelper.js"],"names":[],"mappings":"AAYA;;;GAGG;AACH;IACI;;;;;;;;;;OAUG;IAEH;;;;;;;;;;;OAWG;IAEH;;;OAGG;IACH,uBAHW,OAAO,oBAAoB,EAAE,OAAO;uBAZ3B;mBARR,CAAC,yEAAqB,CAAC,EAAE;sBACtB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,IAAI;sBACpD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;SAMF;oBACnB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sBACrB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC;sBAClE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;sBAChC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,MAAM;4BAChD,OAAO,yBAAyB,EAAE,iBAAiB;wBACvD,OAAO;OAW3B;IAFG,yFAA0B;IAC1B;uBAjBgB;mBARR,CAAC,yEAAqB,CAAC,EAAE;sBACtB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,IAAI;sBACpD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;SAMF;oBACnB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sBACrB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC;sBAClE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;sBAChC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,MAAM;4BAChD,OAAO,yBAAyB,EAAE,iBAAiB;wBACvD,OAAO;MAUF;IAG1B;;;;;;OAMG;IACH,wBAJW,OAAO,iBAAiB,EAAE,QAAQ,GAAG,OAAO,iBAAiB,EAAE,UAAU,UACzE,MAAM,GACJ,OAAO,iEAAM,CAyDzB;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAiBhB;CACJ"}