@genome-spy/core 0.76.0 → 0.77.0

package/dist/src/scales/scaleInteractionController.js

@@ -27,6 +27,7 @@ import {
  * @typedef {import("../spec/scale.js").ComplexDomain} ComplexDomain
  * @typedef {import("../spec/scale.js").ZoomParams} ZoomParams
  * @typedef {import("../types/encoder.js").VegaScale} VegaScale
+ * @typedef {import("../types/scaleResolutionApi.js").ZoomToOptions} ZoomToOptions
  * @typedef {VegaScale & { props: import("../spec/scale.js").Scale }} ScaleWithProps
  */
 
@@ -37,6 +38,9 @@ export default class ScaleInteractionController {
     /** @type {() => import("../utils/animator.js").default} */
     #getAnimator;
 
+    /** @type {() => void} */
+    #renderImmediately;
+
     /** @type {() => number[]} */
     #getInitialDomainSnapshot;
 
@@ -56,6 +60,7 @@ export default class ScaleInteractionController {
      * @param {object} options
      * @param {() => ScaleWithProps} options.getScale
      * @param {() => import("../utils/animator.js").default} options.getAnimator
+     * @param {() => void} options.renderImmediately
      * @param {() => number[]} options.getInitialDomainSnapshot
      * @param {() => number[]} options.getResetDomain
      * @param {(domain: ScalarDomain | ComplexDomain) => number[]} options.fromComplexInterval
@@ -64,6 +69,7 @@ export default class ScaleInteractionController {
     constructor({
         getScale,
         getAnimator,
+        renderImmediately,
         getInitialDomainSnapshot,
         getResetDomain,
         fromComplexInterval,
@@ -71,6 +77,7 @@ export default class ScaleInteractionController {
     }) {
         this.#getScale = getScale;
         this.#getAnimator = getAnimator;
+        this.#renderImmediately = renderImmediately;
         this.#getInitialDomainSnapshot = getInitialDomainSnapshot;
         this.#getResetDomain = getResetDomain;
         this.#fromComplexInterval = fromComplexInterval;
@@ -170,13 +177,11 @@ export default class ScaleInteractionController {
      * Immediately zooms to the given interval.
      *
      * @param {NumericDomain | ComplexDomain} domain
-     * @param {boolean | number} [duration] an approximate duration for transition.
-     *      Zero duration zooms immediately. Boolean `true` indicates a default duration.
+     * @param {ZoomToOptions | boolean | number} [options] Zoom options.
+     *      Passing the duration directly as a boolean or number is deprecated.
      */
-    async zoomTo(domain, duration = false) {
-        if (isBoolean(duration)) {
-            duration = duration ? 700 : 0;
-        }
+    async zoomTo(domain, options = false) {
+        const { duration, renderImmediately } = normalizeZoomToOptions(options);
 
         if (!this.isZoomingSupported()) {
             throw new Error("Not a zoomable scale!");
@@ -195,6 +200,12 @@ export default class ScaleInteractionController {
         const from = /** @type {number[]} */ (scale.domain());
 
         if (duration > 0 && from.length == 2) {
+            if (renderImmediately) {
+                throw new Error(
+                    "renderImmediately is not supported for animated zooms."
+                );
+            }
+
             // Spans
             const fw = from[1] - from[0];
             const tw = to[1] - to[0];
@@ -234,7 +245,11 @@ export default class ScaleInteractionController {
         } else {
             this.#cancelZoomTransition();
             scale.domain(to);
-            animator?.requestRender();
+            if (renderImmediately) {
+                this.#renderImmediately();
+            } else {
+                animator?.requestRender();
+            }
         }
     }
 
@@ -279,6 +294,39 @@ export default class ScaleInteractionController {
     }
 }
 
+/**
+ * @param {ZoomToOptions | boolean | number | undefined} options
+ * @returns {{ duration: number, renderImmediately: boolean }}
+ */
+function normalizeZoomToOptions(options) {
+    if (options === undefined) {
+        return {
+            duration: 0,
+            renderImmediately: false,
+        };
+    }
+
+    if (isBoolean(options)) {
+        return {
+            duration: options ? 700 : 0,
+            renderImmediately: false,
+        };
+    }
+
+    if (typeof options === "number") {
+        return {
+            duration: options,
+            renderImmediately: false,
+        };
+    }
+
+    const duration = options.duration ?? 0;
+    return {
+        duration: isBoolean(duration) ? (duration ? 700 : 0) : duration,
+        renderImmediately: options.renderImmediately === true,
+    };
+}
+
 /**
  * @param {ScaleWithProps} scale
  * @param {ZoomParams | boolean | undefined} zoom

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

@@ -185,10 +185,10 @@ export default class ScaleResolution implements ScaleResolutionApi {
      * Immediately zooms to the given interval.
      *
      * @param {NumericDomain | ComplexDomain} domain
-     * @param {boolean | number} [duration] an approximate duration for transition.
-     *      Zero duration zooms immediately. Boolean `true` indicates a default duration.
+     * @param {import("../types/scaleResolutionApi.js").ZoomToOptions | boolean | number} [options]
+     *      Zoom options. Passing the duration directly as a boolean or number is deprecated.
      */
-    zoomTo(domain: import("../spec/scale.js").NumericDomain | import("../spec/scale.js").ComplexDomain, duration?: boolean | number): Promise<void>;
+    zoomTo(domain: import("../spec/scale.js").NumericDomain | import("../spec/scale.js").ComplexDomain, options?: import("../types/scaleResolutionApi.js").ZoomToOptions | boolean | number): Promise<void>;
     /**
      * Resets the current domain to the initial one
      *

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

@@ -1 +1 @@
-{"version":3,"file":"scaleResolution.d.ts","sourceRoot":"","sources":["../../../src/scales/scaleResolution.js"],"names":[],"mappings":"AAoDA;;;;;;;;GAQG;AACH;;;;;;;;;;;;;;;;;;GAkBG;AACH;IA6cI;;;;;;;;OAQG;IACH,uBALa,CAAC,eACH,QAAQ,CAAC,eAAe,CAAC,YACzB,MAAM,CAAC,GACL,CAAC,CAqBb;IAlaD;;;OAGG;IACH,sEAFW,OAAO,iBAAiB,EAAE,OAAO,EAsC3C;IAnCG,8CAAsB;IACtB,0FAA0F;IAC1F,MADW,OAAO,oBAAoB,EAAE,IAAI,CAC5B;IAEhB,iEAAiE;IACjE,MADW,MAAM,CACI;IA0EzB,2BASC;IAwBD;;;;;;;OAOG;IACH,4KAEC;IAED;;;OAGG;IACH,+KAEC;IAiCD,sCA6CC;IA+MD;;;OAGG;IACH,uBAHW,qBAAqB,GACnB,MAAM,OAAO,CAazB;IAED,gBAMC;IAoFD;;;;OAIG;IACH,0CAJW,OAAO,sBAAsB,EAAE,OAAO,aACtC,QAAQ,CAAC,OAAO,qBAAqB,EAAE,aAAa,CAAC,GACnD,MAAM,IAAI,CAkCtB;IAED;;OAEG;IACH,qCAEC;IAED,+BAiBC;IAuED;;;;;;;;;;;OAWG;IACH,0BALa;QACR,QAAQ,EAAE,OAAO,kBAAkB,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;QACnE,oBAAoB,EAAE,OAAO,CAAA;KAC9B,CAeH;IAED;;;;;;;OAOG;IACH,wBAFa,OAAO,kBAAkB,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,SAAS,CAShE;IAgGD;;;;;OAKG;IACH,oBAYC;IAED;;;;;OAKG;IACH,0BA0BC;IAoID;;OAEG;IACH;eAlhCkC,OAAO,kBAAkB,EAAE,KAAK;MAyhCjE;IAED;;;;;;OAMG;IACH;eAliCkC,OAAO,kBAAkB,EAAE,KAAK;MAyiCjE;IAED;;;;OAIG;IACH;eAhjCkC,OAAO,kBAAkB,EAAE,KAAK;MAyjCjE;IAED,mBASC;IAED;;;;OAIG;IACH,+DAEC;IAED;;OAEG;IACH,oBAFa,mFAA6B,CASzC;IAED;;OAEG;IACH;;;;MAqBC;IAED;;;;OAIG;IACH,oBAEC;IAED;;OAEG;IACH,sBASC;IAED;;;;;;;OAOG;IACH,kBALW,MAAM,eACN,MAAM,OACN,MAAM,GACJ,OAAO,CAInB;IAED;;;;;;OAMG;IACH,eAJW,mFAA6B,aAC7B,OAAO,GAAG,MAAM,iBAK1B;IAED;;;;OAIG;IACH,qBAEC;IAED;;;;;OAKG;IACH,uBAEC;IAED;;;;;;;OAOG;IACH,wBAoBC;IAED;;;;;OAKG;IACH,uBAFW,MAAM,yDAUhB;IAED;;OAEG;IACH,iBAFW,MAAM,yDAIhB;IAED;;;OAGG;IACH,qBAHW,MAAM,+CAAmB,GACvB,MAAM,CAIlB;IAED;;;OAGG;IACH,8BAHW,kFAA4B,GAC1B,MAAM,EAAE,CAOpB;;CACJ;kCAvyC+B,CAAC,SAApB,6CAAkB;;;;UAGrB,OAAO,qBAAqB,EAAE,OAAO;aACrC,CAAC;gBACD,OAAO,oBAAoB,EAAE,mBAAmB;yBAChD,OAAO;;sBApCV,+BAA+B;sBAA/B,+BAA+B;wBAA/B,+BAA+B;wBAA/B,+BAA+B;6BAA/B,+BAA+B"}
+{"version":3,"file":"scaleResolution.d.ts","sourceRoot":"","sources":["../../../src/scales/scaleResolution.js"],"names":[],"mappings":"AAoDA;;;;;;;;GAQG;AACH;;;;;;;;;;;;;;;;;;GAkBG;AACH;IA8cI;;;;;;;;OAQG;IACH,uBALa,CAAC,eACH,QAAQ,CAAC,eAAe,CAAC,YACzB,MAAM,CAAC,GACL,CAAC,CAqBb;IAnaD;;;OAGG;IACH,sEAFW,OAAO,iBAAiB,EAAE,OAAO,EAuC3C;IApCG,8CAAsB;IACtB,0FAA0F;IAC1F,MADW,OAAO,oBAAoB,EAAE,IAAI,CAC5B;IAEhB,iEAAiE;IACjE,MADW,MAAM,CACI;IA2EzB,2BASC;IAwBD;;;;;;;OAOG;IACH,4KAEC;IAED;;;OAGG;IACH,+KAEC;IAiCD,sCA6CC;IA+MD;;;OAGG;IACH,uBAHW,qBAAqB,GACnB,MAAM,OAAO,CAazB;IAED,gBAMC;IAoFD;;;;OAIG;IACH,0CAJW,OAAO,sBAAsB,EAAE,OAAO,aACtC,QAAQ,CAAC,OAAO,qBAAqB,EAAE,aAAa,CAAC,GACnD,MAAM,IAAI,CAkCtB;IAED;;OAEG;IACH,qCAEC;IAED,+BAiBC;IAuED;;;;;;;;;;;OAWG;IACH,0BALa;QACR,QAAQ,EAAE,OAAO,kBAAkB,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC;QACnE,oBAAoB,EAAE,OAAO,CAAA;KAC9B,CAeH;IAED;;;;;;;OAOG;IACH,wBAFa,OAAO,kBAAkB,EAAE,KAAK,CAAC,MAAM,CAAC,GAAG,SAAS,CAShE;IAgGD;;;;;OAKG;IACH,oBAYC;IAED;;;;;OAKG;IACH,0BA0BC;IAoID;;OAEG;IACH;eAnhCkC,OAAO,kBAAkB,EAAE,KAAK;MA0hCjE;IAED;;;;;;OAMG;IACH;eAniCkC,OAAO,kBAAkB,EAAE,KAAK;MA0iCjE;IAED;;;;OAIG;IACH;eAjjCkC,OAAO,kBAAkB,EAAE,KAAK;MA0jCjE;IAED,mBASC;IAED;;;;OAIG;IACH,+DAEC;IAED;;OAEG;IACH,oBAFa,mFAA6B,CASzC;IAED;;OAEG;IACH;;;;MAqBC;IAED;;;;OAIG;IACH,oBAEC;IAED;;OAEG;IACH,sBASC;IAED;;;;;;;OAOG;IACH,kBALW,MAAM,eACN,MAAM,OACN,MAAM,GACJ,OAAO,CAInB;IAED;;;;;;OAMG;IACH,eAJW,mFAA6B,YAC7B,OAAO,gCAAgC,EAAE,aAAa,GAAG,OAAO,GAAG,MAAM,iBAKnF;IAED;;;;OAIG;IACH,qBAEC;IAED;;;;;OAKG;IACH,uBAEC;IAED;;;;;;;OAOG;IACH,wBAoBC;IAED;;;;;OAKG;IACH,uBAFW,MAAM,yDAUhB;IAED;;OAEG;IACH,iBAFW,MAAM,yDAIhB;IAED;;;OAGG;IACH,qBAHW,MAAM,+CAAmB,GACvB,MAAM,CAIlB;IAED;;;OAGG;IACH,8BAHW,kFAA4B,GAC1B,MAAM,EAAE,CAOpB;;CACJ;kCAxyC+B,CAAC,SAApB,6CAAkB;;;;UAGrB,OAAO,qBAAqB,EAAE,OAAO;aACrC,CAAC;gBACD,OAAO,oBAAoB,EAAE,mBAAmB;yBAChD,OAAO;;sBApCV,+BAA+B;sBAA/B,+BAA+B;wBAA/B,+BAA+B;wBAA/B,+BAA+B;6BAA/B,+BAA+B"}

package/dist/src/scales/scaleResolution.js

@@ -183,6 +183,7 @@ export default class ScaleResolution {
         this.#interactionController = new ScaleInteractionController({
             getScale: () => this.getScale(),
             getAnimator: () => this.#viewContext.animator,
+            renderImmediately: () => this.#viewContext.renderImmediately(),
             getInitialDomainSnapshot: () =>
                 this.#domainAggregator.initialDomainSnapshot,
             getResetDomain: () => this.#getConfiguredOrDefaultDomain(),
@@ -1273,11 +1274,11 @@ export default class ScaleResolution {
      * Immediately zooms to the given interval.
      *
      * @param {NumericDomain | ComplexDomain} domain
-     * @param {boolean | number} [duration] an approximate duration for transition.
-     *      Zero duration zooms immediately. Boolean `true` indicates a default duration.
+     * @param {import("../types/scaleResolutionApi.js").ZoomToOptions | boolean | number} [options]
+     *      Zoom options. Passing the duration directly as a boolean or number is deprecated.
      */
-    async zoomTo(domain, duration = false) {
-        return this.#interactionController.zoomTo(domain, duration);
+    async zoomTo(domain, options = false) {
+        return this.#interactionController.zoomTo(domain, options);
     }
 
     /**

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/styles/genome-spy.css

@@ -177,6 +177,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: 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.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,i5HAqQE"}

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

@@ -178,6 +178,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.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":"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,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;;CACJ"}

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

@@ -165,6 +165,9 @@ export default class Tooltip {
         }
 
         render(content, this.#element);
+        this.#element
+            .querySelectorAll(".autoscroll-container")
+            .forEach(scrollHoveredTooltipRow);
 
         this.visible = true;
 
@@ -213,6 +216,25 @@ export default class Tooltip {
     }
 }
 
+/**
+ * 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",
+        });
+    });
+}
+
 /**
  * Calculate euclidean distance
  *

package/package.json

@@ -7,7 +7,7 @@
   },
   "contributors": [],
   "license": "MIT",
-  "version": "0.76.0",
+  "version": "0.77.0",
   "jsdelivr": "dist/bundle/index.js",
   "unpkg": "dist/bundle/index.js",
   "browser": "dist/bundle/index.js",
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@gmod/bam": "^7.1.19",
-    "@gmod/bbi": "^9.0.0",
+    "@gmod/bbi": "^9.2.0",
     "@gmod/bed": "^2.1.10",
     "@gmod/indexedfasta": "^5.0.2",
     "@gmod/tabix": "^3.2.2",
@@ -78,5 +78,5 @@
   "devDependencies": {
     "@types/long": "^4.0.1"
   },
-  "gitHead": "34d821cf5e864972afaa65a3290719e2fdb209c2"
+  "gitHead": "2851e22e2069a70d7d02e3ab707b7556573aa17e"
 }

package/dist/bundle/browser-BTgw5ieH.js

@@ -1,126 +0,0 @@
-import { t as e } from "./chunk-DmhlhrBa.js";
-//#region ../../node_modules/generic-filehandle2/esm/blobFile.js
-var t = class {
-	constructor(e) {
-		this.blob = e;
-	}
-	async read(e, t = 0) {
-		if (!e) return new Uint8Array();
-		let n = t, r = n + e, i = this.blob.slice(n, r);
-		return i.bytes ? i.bytes() : new Uint8Array(await i.arrayBuffer());
-	}
-	async readFile(e) {
-		let t = typeof e == "string" ? e : e?.encoding;
-		if (t === "utf8") return this.blob.text();
-		if (t) throw Error(`unsupported encoding: ${t}`);
-		return this.blob.bytes ? this.blob.bytes() : new Uint8Array(await this.blob.arrayBuffer());
-	}
-	async stat() {
-		return { size: this.blob.size };
-	}
-	async close() {}
-};
-//#endregion
-//#region ../../node_modules/generic-filehandle2/esm/remoteFile.js
-function n(e) {
-	return (typeof e == "object" && e && "message" in e ? e.message : `${e}`).replace(/\.$/, "");
-}
-var r = class {
-	constructor(e, t = {}) {
-		this.baseOverrides = {}, this.url = e;
-		let n = t.fetch || globalThis.fetch.bind(globalThis);
-		t.overrides && (this.baseOverrides = t.overrides), this.fetchImplementation = n;
-	}
-	async fetch(e, t) {
-		let r = (t) => Error(`${n(t)} fetching ${e}`, { cause: t }), i;
-		try {
-			i = await this.fetchImplementation(e, t);
-		} catch (n) {
-			if (`${n}`.includes("Failed to fetch")) {
-				console.warn(`generic-filehandle: refetching ${e} to attempt to work around chrome CORS header caching bug`);
-				try {
-					i = await this.fetchImplementation(e, {
-						...t,
-						cache: "reload"
-					});
-				} catch (e) {
-					throw r(e);
-				}
-			} else throw r(n);
-		}
-		return i;
-	}
-	async read(e, t, n = {}) {
-		if (e === 0) return new Uint8Array();
-		let { headers: r = {}, signal: i, overrides: a = {} } = n;
-		e < Infinity ? r.range = `bytes=${t}-${t + e - 1}` : e === Infinity && t !== 0 && (r.range = `bytes=${t}-`);
-		let o = await this.fetch(this.url, {
-			...this.baseOverrides,
-			...a,
-			headers: {
-				...this.baseOverrides.headers,
-				...a.headers,
-				...r
-			},
-			method: "GET",
-			redirect: "follow",
-			mode: "cors",
-			signal: i
-		});
-		if (!o.ok) throw Error(`HTTP ${o.status} fetching ${this.url}`);
-		if (o.status === 200 && t === 0 || o.status === 206) {
-			let t = o.headers.get("content-range"), n = /\/(\d+)$/.exec(t || "");
-			n?.[1] && (this._stat = { size: parseInt(n[1], 10) });
-			let r = o.bytes ? await o.bytes() : new Uint8Array(await o.arrayBuffer());
-			return r.byteLength <= e ? r : r.subarray(0, e);
-		}
-		throw Error(o.status === 200 ? `${this.url} fetch returned status 200, expected 206` : `HTTP ${o.status} fetching ${this.url}`);
-	}
-	async readFile(e = {}) {
-		let t, n;
-		if (typeof e == "string") t = e, n = {};
-		else {
-			t = e.encoding;
-			let { encoding: r, ...i } = e;
-			n = i;
-		}
-		let { headers: r = {}, signal: i, overrides: a = {} } = n, o = await this.fetch(this.url, {
-			...this.baseOverrides,
-			...a,
-			headers: {
-				...this.baseOverrides.headers,
-				...a.headers,
-				...r
-			},
-			method: "GET",
-			redirect: "follow",
-			mode: "cors",
-			signal: i
-		});
-		if (!o.ok) throw Error(`HTTP ${o.status} fetching ${this.url}`);
-		if (t === "utf8") return o.text();
-		if (t) throw Error(`unsupported encoding: ${t}`);
-		return o.bytes ? o.bytes() : new Uint8Array(await o.arrayBuffer());
-	}
-	async stat() {
-		if (!this._stat && (await this.read(10, 0), !this._stat)) throw Error(`unable to determine size of file at ${this.url}`);
-		return this._stat;
-	}
-	async close() {}
-}, i = /* @__PURE__ */ e({
-	BlobFile: () => t,
-	LocalFile: () => a,
-	RemoteFile: () => r
-}), a = class {
-	readFile() {
-		throw Error("unimplemented");
-	}
-	read() {
-		throw Error("unimplemented");
-	}
-	close() {
-		throw Error("unimplemented");
-	}
-};
-//#endregion
-export { i as n, r, a as t };