@genome-spy/core 0.77.0 → 0.79.0

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/title.d.ts

@@ -22,6 +22,11 @@ export interface Title extends ZIndexProps {
      */
     text: string | ExprRef;
 
+    /**
+     * The subtitle text.
+     */
+    subtitle?: string | ExprRef;
+
     /**
      * A mark style property to apply to the title text mark. If not specified, a default style of `"group-title"` is applied.
      */
@@ -33,7 +38,11 @@ export interface Title extends ZIndexProps {
     anchor?: TitleAnchor;
 
     /**
-     * The reference frame for the anchor position, one of `"bounds"` (to anchor relative to the full bounding box) or `"group"` (to anchor relative to the group width or height).
+     * The reference frame for the title anchor. `"group"` anchors the title
+     * along the plot area. `"bounds"` anchors the title along the full bounds,
+     * including axes, legends, and other reserved space.
+     *
+     * __Default value:__ `"group"`
      */
     frame?: TitleFrame;
 
@@ -42,6 +51,18 @@ export interface Title extends ZIndexProps {
      */
     offset?: number;
 
+    /**
+     * Whether the title reserves layout space outside the plot area. Reserved
+     * titles are placed outside axes, legends, and other guide space on the same
+     * side.
+     *
+     * Setting this to `false` lets the title render without affecting layout,
+     * enabling wilder layouts where titles may overlap nearby content.
+     *
+     * __Default value:__ `true`
+     */
+    reserve?: boolean;
+
     /**
      * Z-order of the title relative to the view content.
      *
@@ -111,4 +132,40 @@ export interface Title extends ZIndexProps {
      * This can be either a string (e.g `"bold"`, `"normal"`) or a number (`100`, `200`, `300`, ..., `900` where `"normal"` = `400` and `"bold"` = `700`).
      */
     fontWeight?: FontWeight;
+
+    // ---------- Subtitle Text ----------
+    /**
+     * Text color for subtitle text.
+     */
+    subtitleColor?: string | ExprRef;
+
+    /**
+     * Font name for subtitle text.
+     */
+    subtitleFont?: string;
+
+    /**
+     * Font size in pixels for subtitle text.
+     *
+     * @minimum 0
+     */
+    subtitleFontSize?: number | ExprRef;
+
+    /**
+     * Font style for subtitle text.
+     */
+    subtitleFontStyle?: FontStyle;
+
+    /**
+     * Font weight for subtitle text.
+     * This can be either a string (e.g `"bold"`, `"normal"`) or a number (`100`, `200`, `300`, ..., `900` where `"normal"` = `400` and `"bold"` = `700`).
+     */
+    subtitleFontWeight?: FontWeight;
+
+    /**
+     * Padding in pixels between title and subtitle text.
+     *
+     * __Default value:__ `3`
+     */
+    subtitlePadding?: number;
 }

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

@@ -474,6 +474,153 @@ export interface MeasureTextParams extends TransformParamsBase {
     as: string;
 }
 
+export interface TruncateTextParams extends TransformParamsBase {
+    type: "truncateText";
+
+    /**
+     * The field that contains the text to be truncated.
+     */
+    field: Field;
+
+    /**
+     * Maximum text width in pixels.
+     */
+    limit?: number;
+
+    /**
+     * The font size in pixels.
+     */
+    fontSize: number;
+
+    /**
+     * The font typeface. Uses the same asynchronously loaded SDF fonts as the
+     * `"text"` mark.
+     *
+     * **Default:** `"Lato"`
+     */
+    font?: string;
+
+    /**
+     * The font style. Valid values: `"normal"` and `"italic"`.
+     *
+     * **Default:** `"normal"`
+     */
+    fontStyle?: FontStyle;
+
+    /**
+     * The font weight.
+     *
+     * **Default:** `"regular"`
+     */
+    fontWeight?: FontWeight;
+
+    /**
+     * Text appended after truncation.
+     *
+     * **Default:** `"..."`.
+     */
+    ellipsis?: string;
+
+    /**
+     * The output field where the truncated text is written.
+     *
+     * **Default:** Same as `field`.
+     */
+    as?: string;
+}
+
+export interface PackLegendLabelsParams extends TransformParamsBase {
+    type: "packLegendLabels";
+
+    /**
+     * The field that contains measured label width in pixels.
+     */
+    labelWidth: Field;
+
+    /**
+     * The direction in which entries are laid out.
+     *
+     * **Default:** `"vertical"`
+     */
+    direction?: "vertical" | "horizontal";
+
+    /**
+     * The number of columns in which to arrange entries.
+     */
+    columns?: number;
+
+    /**
+     * Symbol size in pixels squared, or a field containing per-entry symbol
+     * sizes in pixels squared.
+     *
+     * **Default:** `100`
+     */
+    symbolSize?: number | Field;
+
+    /**
+     * Symbol stroke width in pixels, or a field containing per-entry stroke
+     * widths in pixels.
+     *
+     * **Default:** `0`
+     */
+    symbolStrokeWidth?: number | Field;
+
+    /**
+     * Offset between the symbol and label in pixels.
+     *
+     * **Default:** `0`
+     */
+    labelOffset?: number;
+
+    /**
+     * Label font size in pixels.
+     *
+     * **Default:** `10`
+     */
+    fontSize?: number;
+
+    /**
+     * Padding between rows in pixels.
+     *
+     * **Default:** `0`
+     */
+    rowPadding?: number;
+
+    /**
+     * Padding between columns in pixels.
+     *
+     * **Default:** `0`
+     */
+    columnPadding?: number;
+
+    /**
+     * Horizontal offset for all generated entry coordinates in pixels.
+     *
+     * **Default:** `0`
+     */
+    xOffset?: number;
+
+    /**
+     * Horizontal offset for generated symbol coordinates in pixels.
+     *
+     * **Default:** `0`
+     */
+    symbolOffset?: number;
+
+    /**
+     * Vertical offset for all generated entry coordinates in pixels.
+     *
+     * **Default:** `0`
+     */
+    yOffset?: number;
+
+    /**
+     * Height of the pixel-space layout area. When provided, the transform also
+     * emits inverted y coordinates for GenomeSpy's unit y range.
+     */
+    yExtent?: number | ExprRef;
+}
+
 export interface MergeFacetsParams extends TransformParamsBase {
     type: "mergeFacets";
 }
@@ -606,6 +753,8 @@ export type TransformParams =
     | IdentifierParams
     | LinearizeGenomicCoordinateParams
     | MeasureTextParams
+    | TruncateTextParams
+    | PackLegendLabelsParams
     | MergeFacetsParams
     | PileupParams
     | ProjectParams

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

@@ -2,8 +2,10 @@ import { Data } from "./data.js";
 import { TransformParams } from "./transform.js";
 import {
     Channel,
+    ChannelWithScale,
     Encoding,
     FacetFieldDef,
+    NonPositionalChannelWithScale,
     PrimaryPositionalChannel,
 } from "./channel.js";
 import { MarkProps, MarkType, RuleProps } from "./mark.js";
@@ -12,6 +14,9 @@ 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";
+import { Axis, GenomeAxis } from "./axis.js";
+import { Legend } from "./legend.js";
 
 export interface SizeDef {
     /**
@@ -25,6 +30,16 @@ export interface SizeDef {
      * for details.
      */
     grow?: number;
+
+    /**
+     * Minimum size in pixels.
+     */
+    minPx?: number;
+
+    /**
+     * Maximum size in pixels.
+     */
+    maxPx?: number;
 }
 
 // TODO: Perhaps this should be in "utils"
@@ -211,6 +226,35 @@ 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>>;
+
+    /**
+     * Configures axis resolutions used by this view subtree.
+     *
+     * Use this when a composed view shares an axis across child views and the
+     * axis settings belong to the composed view rather than an individual
+     * encoding.
+     */
+    axes?: Partial<
+        Record<PrimaryPositionalChannel, Partial<Axis & GenomeAxis>>
+    >;
+
+    /**
+     * Configures legend resolutions used by this view subtree.
+     *
+     * Use this when a composed view shares a legend across child views and the
+     * legend settings belong to the composed view rather than an individual
+     * encoding.
+     */
+    legends?: Partial<Record<NonPositionalChannelWithScale, Legend>>;
+
     /**
      * Specifies a [data source](https://genomespy.app/docs/grammar/data/).
      * If omitted, the data source is inherited from the parent view.
@@ -241,9 +285,6 @@ export interface ViewSpecBase extends ResolveSpec {
 
     /**
      * View title.
-     * N.B.: Currently, GenomeSpy doesn't do bound calculation, and you need to
-     * manually specify proper padding for the view to ensure that the title is
-     * visible.
      */
     title?: string | Title;
 
@@ -390,7 +431,7 @@ export interface FacetSpec extends ViewSpecBase {
     spacing?: number;
 }
 
-export type ResolutionTarget = "scale" | "axis";
+export type ResolutionTarget = "scale" | "axis" | "legend";
 
 /**
  * `"independent"` and `"shared"` behave similarly to Vega-Lite.
@@ -406,9 +447,12 @@ export type ResolutionBehavior =
 
 export interface ResolveSpec {
     /**
-     * Specifies how scales and axes are
-     * [resolved](https://genomespy.app/docs/grammar/composition/#scale-and-axis-resolution)
+     * Specifies how scales, axes, and legends are
+     * [resolved](https://genomespy.app/docs/grammar/composition/#scale-axis-and-legend-resolution)
      * in the view hierarchy.
+     *
+     * If legend resolution is not configured explicitly, it follows the
+     * corresponding scale resolution.
      */
     resolve?: Partial<
         Record<

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;

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.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";
+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,i5HAqQE"}
+{"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;