@genome-spy/core 0.67.0 → 0.69.0

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

@@ -0,0 +1,53 @@
+import { RootConfig } from "./root.js";
+import {
+    ConcatSpec as CoreConcatSpec,
+    HConcatSpec as CoreHConcatSpec,
+    ImportSpec,
+    LayerSpec as CoreLayerSpec,
+    MultiscaleSpec as CoreMultiscaleSpec,
+    UnitSpec as CoreUnitSpec,
+    VConcatSpec as CoreVConcatSpec,
+} from "./view.js";
+
+interface SchemaViewConfig {
+    templates?: Record<string, ViewSpec>;
+}
+
+interface UnitSpec extends Omit<CoreUnitSpec, "templates">, SchemaViewConfig {}
+
+interface LayerSpec
+    extends Omit<CoreLayerSpec, "templates" | "layer">, SchemaViewConfig {
+    layer: (LayerSpec | UnitSpec | MultiscaleSpec | ImportSpec)[];
+}
+
+interface MultiscaleSpec
+    extends
+        Omit<CoreMultiscaleSpec, "templates" | "multiscale">,
+        SchemaViewConfig {
+    multiscale: (LayerSpec | UnitSpec | MultiscaleSpec | ImportSpec)[];
+}
+
+interface VConcatSpec
+    extends Omit<CoreVConcatSpec, "templates" | "vconcat">, SchemaViewConfig {
+    vconcat: (ViewSpec | ImportSpec)[];
+}
+
+interface HConcatSpec
+    extends Omit<CoreHConcatSpec, "templates" | "hconcat">, SchemaViewConfig {
+    hconcat: (ViewSpec | ImportSpec)[];
+}
+
+interface ConcatSpec
+    extends Omit<CoreConcatSpec, "templates" | "concat">, SchemaViewConfig {
+    concat: (ViewSpec | ImportSpec)[];
+}
+
+type ViewSpec =
+    | UnitSpec
+    | LayerSpec
+    | MultiscaleSpec
+    | VConcatSpec
+    | HConcatSpec
+    | ConcatSpec;
+
+export type CoreRootSpec = ViewSpec & RootConfig;

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

@@ -414,3 +414,7 @@ export interface Gff3Data extends TabixData {
 export interface VcfData extends TabixData {
     type: "vcf";
 }
+
+/**
+ * Testing-only lazy data source. Not intended for production use.
+ */

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

@@ -20,9 +20,22 @@ export interface ParameterBase {
     push?: "outer";
 }
 
+export interface PersistedParameter {
+    /**
+     * Whether the parameter should be persisted in bookmarks and provenance.
+     *
+     * This primarily affects GenomeSpy App behavior.
+     * Set to `false` for ephemeral params (e.g., hover selections) or when the
+     * selection cannot be persisted due to missing `encoding.key`.
+     *
+     * __Default value:__ `true`
+     */
+    persist?: boolean;
+}
+
 // Adapted from: https://github.com/vega/vega-lite/blob/main/src/parameter.ts
 
-export interface VariableParameter extends ParameterBase {
+export interface VariableParameter extends ParameterBase, PersistedParameter {
     /**
      * The [initial value](http://vega.github.io/vega-lite/docs/value.html) of the parameter.
      *
@@ -219,17 +232,9 @@ export interface PointSelectionConfig extends BaseSelectionConfig<"point"> {
      * __Default value:__ `true`
      */
     toggle?: boolean;
-    /**
-     * A set of fields that uniquely identify a tuple. Used for bookmarking point selections
-     * in the GenomeSpy App. Still work in progress.
-     *
-     * TODO: Or maybe use the `key` channel? https://vega.github.io/vega-lite/docs/encoding.html#key
-     */
-    //keyFields?: string[];
 }
 
-export interface IntervalSelectionConfig
-    extends BaseSelectionConfig<"interval"> {
+export interface IntervalSelectionConfig extends BaseSelectionConfig<"interval"> {
     type: "interval";
 
     /**
@@ -294,7 +299,7 @@ export interface BrushConfig extends ShadowProps {
 }
 
 export interface SelectionParameter<T extends SelectionType = SelectionType>
-    extends ParameterBase {
+    extends ParameterBase, PersistedParameter {
     /**
      * Determines the default event processing and data query for the selection. Vega-Lite currently supports two selection types:
      *

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

@@ -1,7 +1,7 @@
 import { GenomeConfig } from "./genome.js";
 import { ViewSpec } from "./view.js";
 
-interface RootConfig {
+export interface RootConfig {
     $schema?: string;
 
     genome?: GenomeConfig;

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

@@ -0,0 +1,12 @@
+export type PrimaryPositionalChannel = import("./channel.js").PrimaryPositionalChannel;
+export type Datum = import("../data/flowNode.js").Datum;
+/**
+ * Testing-only lazy data source parameters.
+ */
+export type MockLazyData = {
+    type: "mockLazy";
+    channel?: PrimaryPositionalChannel;
+    delay?: number;
+    data?: Datum[];
+};
+//# sourceMappingURL=testing.d.ts.map

package/dist/src/spec/testing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/spec/testing.js"],"names":[],"mappings":"uCAKa,OAAO,cAAc,EAAE,wBAAwB;oBAC/C,OAAO,qBAAqB,EAAE,KAAK;;;;;UAOtC,UAAU;cACV,wBAAwB;YACxB,MAAM;WACN,KAAK,EAAE"}

package/dist/src/spec/testing.js

@@ -0,0 +1,20 @@
+/**
+ * Test-only spec typings for internal helpers and fixtures.
+ */
+
+/**
+ * @typedef {import("./channel.js").PrimaryPositionalChannel} PrimaryPositionalChannel
+ * @typedef {import("../data/flowNode.js").Datum} Datum
+ */
+
+/**
+ * Testing-only lazy data source parameters.
+ *
+ * @typedef {object} MockLazyData
+ * @prop {"mockLazy"} type
+ * @prop {PrimaryPositionalChannel} [channel]
+ * @prop {number} [delay]
+ * @prop {Datum[]} [data]
+ */
+
+export {};

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

@@ -11,11 +11,11 @@ import {
     MarkProps,
     MarkType,
     RectProps,
+    RuleProps,
     ShadowProps,
 } from "./mark.js";
 import { ExprRef } from "./parameter.js";
 import { Title } from "./title.js";
-import { SampleSpec } from "./sampleView.js";
 import { Parameter } from "./parameter.js";
 
 export interface SizeDef {
@@ -45,19 +45,33 @@ export interface FacetMapping {
  * The opacity is interpolated between the specified stops.
  */
 export interface DynamicOpacity {
-    channel?: PrimaryPositionalChannel;
+    /**
+     * The positional channel whose scale domain controls the opacity.
+     * If set to `"auto"`, both `x` and `y` scales may contribute.
+     *
+     * If omitted, `x` is used when available and `y` is used as a fallback.
+     */
+    channel?: PrimaryPositionalChannel | "auto";
 
     /**
-     * Stops expressed as units (base pairs, for example) per pixel.
+     * Opacity stops expressed as units (base pairs, for example) per pixel.
+     * The values must be positive.
+     *
+     * Each stop is paired with an opacity in `values` at the same index.
+     * Stops can be constants or expression references.
      */
-    unitsPerPixel: number[];
+    unitsPerPixel: NumericStopDef[];
 
     /**
-     * Opacity values that match the given stops.
+     * Opacity values that match the given `unitsPerPixel` stops.
+     *
+     * Values outside the stop range are clamped to the nearest stop.
      */
     values: number[];
 }
 
+export type NumericStopDef = number | ExprRef;
+
 export type ViewOpacityDef = number | DynamicOpacity | ExprRef;
 
 export interface Step {
@@ -83,10 +97,24 @@ export type ViewBackground = Pick<
 > &
     ShadowProps;
 
+export interface SeparatorProps extends Omit<RuleProps, "type"> {
+    type?: "rule";
+
+    /**
+     * Whether separators extend into the plot margin (axes/padding) around
+     * the grid.
+     *
+     * __Default value:__ `true`
+     */
+    includePlotMargin?: boolean;
+}
+
 export interface ViewSpecBase extends ResolveSpec {
     /**
-     * An internal name that can be used for referring the view. For referencing
-     * purposes, the name should be unique within the view hierarchy.
+     * An explicit name used to address the view. It is recommended to keep
+     * names unique among siblings. In the App (where view state is
+     * bookmarkable), the name must be unique within its import scope for
+     * views with configurable visibility, etc.
      */
     name?: string;
 
@@ -162,6 +190,16 @@ export interface ViewSpecBase extends ResolveSpec {
      */
     encoding?: Encoding;
 
+    /**
+     * If true, this view and its descendants do not contribute to scale domains.
+     * Child views inherit this flag automatically.
+     *
+     * **Default value:** `false`
+     *
+     * @internal
+     */
+    domainInert?: boolean;
+
     /**
      * View title.
      * N.B.: Currently, GenomeSpy doesn't do bound calculation, and you need to
@@ -199,7 +237,7 @@ export interface ViewSpecBase extends ResolveSpec {
      * Is the visibility configurable interactively from the [GenomeSpy
      * App](https://genomespy.app/docs/sample-collections/).
      * Configurability requires that the view has an explicitly specified name
-     * that is *unique* in within the view hierarchy.
+     * that is unique within its import scope.
      *
      * **Default:** `false` for children of `layer`, `true` for others.
      */
@@ -214,20 +252,35 @@ export interface ViewSpecBase extends ResolveSpec {
 
 export interface DynamicOpacitySpec {
     /**
-     * Opacity of the view and all its children. Allows implementing semantic
-     * zooming where the layers are faded in and out as the user zooms in and out.
+     * Opacity of the view and all its children.
      *
-     * TODO: Write proper documentation with examples.
+     * This can be:
      *
-     * **Default:** `1.0`
+     * - a fixed number between `0` and `1`
+     * - an expression reference (`ExprRef`)
+     * - a `DynamicOpacity` definition for zoom-dependent opacity
+     *
+     * Dynamic opacity is useful for semantic zooming where layers are faded in
+     * and out as the user zooms.
+     *
+     * Example:
+     *
+     * ```json
+     * "opacity": {
+     *   "unitsPerPixel": [100000, 40000],
+     *   "values": [0, 1]
+     * }
+     * ```
+     *
+     * In this example, the view fades in while zooming in from 100 000 to
+     * 40 000 units per pixel.
+     *
+     * __Default value:__ `1.0`
      */
     opacity?: ViewOpacityDef;
 }
 
-export interface UnitSpec
-    extends ViewSpecBase,
-        DynamicOpacitySpec,
-        AggregateSamplesSpec {
+export interface UnitSpec extends ViewSpecBase, DynamicOpacitySpec {
     /**
      * The background of the view, including fill, stroke, and stroke width.
      */
@@ -239,22 +292,66 @@ export interface UnitSpec
     mark: MarkType | MarkProps;
 }
 
-// TODO: Some fancy generic typing that would make Aggregating available only
-// inside SampleSpec.
-export interface AggregateSamplesSpec {
+export interface LayerSpec extends ViewSpecBase, DynamicOpacitySpec {
+    view?: ViewBackground;
+    layer: (LayerSpec | UnitSpec | MultiscaleSpec | ImportSpec)[];
+}
+
+export interface MultiscaleStops {
+    /**
+     * The metric used to evaluate zoom stops.
+     *
+     * __Default value:__ `"unitsPerPixel"`
+     */
+    metric?: "unitsPerPixel";
+
+    /**
+     * Stop values in descending order.
+     */
+    values: NumericStopDef[];
+
+    /**
+     * Which positional channel controls the stop metric.
+     *
+     * - `"auto"` averages `x` and `y` when both are available.
+     * - `"x"` uses only the `x` channel.
+     * - `"y"` uses only the `y` channel.
+     *
+     * __Default value:__ `"auto"`
+     */
+    channel?: PrimaryPositionalChannel | "auto";
+
     /**
-     * Specifies views that [aggregate](https://genomespy.app/docs/sample-collections/visualizing/#aggregation)
-     * multiple samples within the GenomeSpy App.
+     * Relative transition width around each stop.
+     *
+     * For each stop value `s`, the fade transition is evaluated in the range:
+     *
+     * - upper edge: `s * (1 + fade)`
+     * - lower edge: `s * (1 - fade)`
+     *
+     * __Default value:__ `0.5`
      */
-    aggregateSamples?: (UnitSpec | LayerSpec)[];
+    fade?: number;
 }
 
-export interface LayerSpec
-    extends ViewSpecBase,
-        DynamicOpacitySpec,
-        AggregateSamplesSpec {
+export type MultiscaleStopsDef = NumericStopDef[] | MultiscaleStops;
+
+export interface MultiscaleSpec extends ViewSpecBase, DynamicOpacitySpec {
     view?: ViewBackground;
-    layer: (LayerSpec | UnitSpec | ImportSpec)[];
+
+    /**
+     * Child views ordered from zoomed-out to zoomed-in detail levels.
+     */
+    multiscale: (LayerSpec | UnitSpec | MultiscaleSpec | ImportSpec)[];
+
+    /**
+     * Stop definition that controls transitions between the multiscale levels.
+     *
+     * - `number[]` is shorthand for `{ metric: "unitsPerPixel", values: ... }`
+     * - `(number | ExprRef)[]` supports mixed constants and expressions
+     * - Object form allows configuring metric, channel, and fade.
+     */
+    stops: MultiscaleStopsDef;
 }
 
 export interface FacetSpec extends ViewSpecBase {
@@ -292,25 +389,23 @@ export interface ResolveSpec {
     >;
 }
 
-export type ContainerSpec = (
-    | LayerSpec
-    //    | FacetSpec
-    | SampleSpec
-    | VConcatSpec
-    | HConcatSpec
-    | ConcatSpec
-    | UnitSpec
-) &
-    ResolveSpec;
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface ViewSpecExtensions {}
+
+export type ViewSpecExtension = ViewSpecExtensions[keyof ViewSpecExtensions];
 
-export type ViewSpec =
+export type CoreViewSpec =
     | UnitSpec
     | LayerSpec
+    | MultiscaleSpec
     //    | FacetSpec
     | VConcatSpec
     | HConcatSpec
-    | ConcatSpec
-    | SampleSpec;
+    | ConcatSpec;
+
+export type ContainerSpec = (CoreViewSpec | ViewSpecExtension) & ResolveSpec;
+
+export type ViewSpec = CoreViewSpec | ViewSpecExtension;
 
 export interface UrlImport {
     /**
@@ -330,7 +425,8 @@ export interface TemplateImport {
 export interface ImportSpec {
     /**
      * The name given to the imported view. This property overrides the name
-     * specified in the imported specification.
+     * specified in the imported specification and defines an import scope that
+     * is used for bookmarkable view visibility and parameter addressing.
      */
     name?: string;
 
@@ -340,6 +436,13 @@ export interface ImportSpec {
      */
     params?: Parameter[] | Record<string, any>;
 
+    /**
+     * Overrides the visibility of the imported view.
+     *
+     * If not specified, the imported specification's `visible` property is used.
+     */
+    visible?: boolean;
+
     /**
      * The method to import a specification.
      */
@@ -351,6 +454,19 @@ export interface ConcatBase extends ViewSpecBase {
      * The gap between the views, in pixels.
      */
     spacing?: number;
+
+    /**
+     * Draws separator rules between visible child views. The separators are
+     * centered within the spacing gaps and do not affect layout.
+     *
+     * If `true`, the defaults are equivalent to:
+     * `{"type":"rule","size":1,"color":"#ccc","opacity":1,"strokeDash":[4,4],"strokeCap":"butt"}`
+     * Use `includePlotMargin` to control whether the separators extend into the
+     * plot margin.
+     *
+     * __Default value:__ `false`
+     */
+    separator?: boolean | SeparatorProps;
 }
 
 export interface VConcatSpec extends ConcatBase {

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

@@ -1,13 +1,8 @@
 :root {
     --genome-spy-basic-spacing: 10px;
-    --genome-spy-font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial,
-        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-@keyframes genome-spy-blinker {
-    50% {
-        opacity: 0;
-    }
+    --genome-spy-font-family:
+        system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 .genome-spy {
@@ -38,34 +33,11 @@
         }
     }
 
-    .loading-message {
-        position: absolute;
-        inset: 0;
-        display: flex;
-
-        align-items: center;
-        justify-content: center;
-
-        .message {
-            color: #666;
-            opacity: 0;
-            transition: opacity 0.7s;
-        }
-    }
-
     .loading {
         > canvas {
             transform: scale(0.95, 0.95);
             opacity: 0;
         }
-
-        > .loading-message .message {
-            opacity: 1;
-
-            .ellipsis {
-                animation: genome-spy-blinker 1s linear infinite;
-            }
-        }
     }
 
     .loading-indicators {

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@keyframes genome-spy-blinker {\n50% {\nopacity: 0;\n}\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-message {\nposition: absolute;\ninset: 0;\ndisplay: flex;\n\nalign-items: center;\njustify-content: center;\n\n.message {\ncolor: #666;\nopacity: 0;\ntransition: opacity 0.7s;\n}\n}\n\n.loading {\n> canvas {\ntransform: scale(0.95, 0.95);\nopacity: 0;\n}\n\n> .loading-message .message {\nopacity: 1;\n\n.ellipsis {\nanimation: genome-spy-blinker 1s linear infinite;\n}\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;\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";
 //# 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,+5HAiRE"}
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,0iHAoPE"}

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

@@ -5,12 +5,6 @@ const css = `
 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
-@keyframes genome-spy-blinker {
-50% {
-opacity: 0;
-}
-}
-
 .genome-spy {
 font-family: var(--genome-spy-font-family);
 
@@ -39,34 +33,11 @@ outline: none;
 }
 }
 
-.loading-message {
-position: absolute;
-inset: 0;
-display: flex;
-
-align-items: center;
-justify-content: center;
-
-.message {
-color: #666;
-opacity: 0;
-transition: opacity 0.7s;
-}
-}
-
 .loading {
 > canvas {
 transform: scale(0.95, 0.95);
 opacity: 0;
 }
-
-> .loading-message .message {
-opacity: 1;
-
-.ellipsis {
-animation: genome-spy-blinker 1s linear infinite;
-}
-}
 }
 
 .loading-indicators {

package/dist/src/tooltip/dataTooltipHandler.d.ts

@@ -1,2 +1,2 @@
-export default function dataTooltipHandler(datum: Record<string, any>, mark: import("../marks/mark.js").default, params?: Record<string, any>): Promise<string | import("lit-html").TemplateResult | HTMLElement>;
+export default function dataTooltipHandler(datum: Record<string, any>, mark: import("../marks/mark.js").default, params?: import("./tooltipHandler.js").TooltipHandlerParams, context?: import("./tooltipHandler.js").TooltipContext): Promise<string | import("lit-html").TemplateResult | HTMLElement>;
 //# sourceMappingURL=dataTooltipHandler.d.ts.map

package/dist/src/tooltip/dataTooltipHandler.js

@@ -1,10 +1,12 @@
 import { html } from "lit";
 import formatObject from "../utils/formatObject.js";
+import { flattenDatumRows } from "./flattenDatumRows.js";
+import createTooltipContext from "./tooltipContext.js";
 
 /**
  * @type {import("./tooltipHandler.js").TooltipHandler}
  */
-export default async function dataTooltipHandler(datum, mark, params) {
+export default async function dataTooltipHandler(datum, mark, params, context) {
     /**
      * @param {string} key
      * @param {object} datum
@@ -30,41 +32,30 @@ export default async function dataTooltipHandler(datum, mark, params) {
         return "";
     };
 
-    /**
-     *
-     * @param {[string, any][]} entries
-     * @param {string} [prefix]
-     * @returns {ReturnType<typeof html>[]}
-     */
-    const entriesToHtml = (entries, prefix) => {
-        const strippedEntries = entries.filter(
-            ([key, _value]) => !key.startsWith("_")
-        );
-
-        if (strippedEntries.length === 0) {
-            return;
-        }
+    const tooltipContext = context ?? createTooltipContext(datum, mark, params);
+    const rawRows = tooltipContext.flattenDatumRows
+        ? tooltipContext.flattenDatumRows()
+        : flattenDatumRows(datum);
+    const genomicRows = tooltipContext.genomicRows ?? [];
+    const hiddenRowKeys = new Set(tooltipContext.hiddenRowKeys ?? []);
 
-        return strippedEntries.map(([key, value]) =>
-            value !== null && typeof value === "object" && !Array.isArray(value)
-                ? html`${entriesToHtml(
-                      Object.entries(value),
-                      (prefix ? prefix : "") + key + "."
-                  )}`
-                : html`
-                      <tr>
-                          <th>${prefix}${key}</th>
-                          <td>${formatObject(value)} ${legend(key, datum)}</td>
-                      </tr>
-                  `
-        );
-    };
-
-    const tableContents = entriesToHtml(Object.entries(datum));
-    if (!tableContents) {
+    const visibleRawRows = rawRows.filter((row) => !hiddenRowKeys.has(row.key));
+    const orderedRows = [...genomicRows, ...visibleRawRows];
+    if (!orderedRows.length) {
         return;
     }
 
+    const tableContents = orderedRows.map((row) => {
+        const value = formatObject(row.value);
+        const valueLegend = legend(row.key, datum);
+        return html`
+            <tr>
+                <th>${row.key}</th>
+                <td>${value} ${valueLegend}</td>
+            </tr>
+        `;
+    });
+
     const table = html`
         <table class="attributes">
             ${tableContents}

package/dist/src/tooltip/dataTooltipHandler.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dataTooltipHandler.test.d.ts.map

package/dist/src/tooltip/dataTooltipHandler.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataTooltipHandler.test.d.ts","sourceRoot":"","sources":["../../../src/tooltip/dataTooltipHandler.test.js"],"names":[],"mappings":""}