@genome-spy/core 0.49.0 → 0.50.1

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

@@ -5,22 +5,120 @@ import { Tooltip } from "./tooltip.js";
 
 export type MarkType = "rect" | "point" | "rule" | "text" | "link";
 
+export interface MarkPropsBase {
+    type: MarkType;
+
+    // Channels.
+
+    /**
+     * Position on the x axis.
+     */
+    x?: number | ExprRef;
+
+    /**
+     * Position on the y axis.
+     */
+    y?: number | ExprRef;
+
+    /**
+     * Color of the mark. Affects either `fill` or `stroke`, depending on the `filled` property.
+     */
+    color?: string | ExprRef;
+
+    /**
+     * Opacity of the mark. Affects `fillOpacity` or `strokeOpacity`, depending on the `filled` property.
+     */
+    opacity?: number | ExprRef;
+
+    /**
+     * If true, the mark is clipped to the UnitView's rectangle. By default, clipping
+     * is enabled for marks that have zoomable positional scales.
+     */
+    clip?: boolean | "never";
+
+    /**
+     * Offsets of the `x` and `x2` coordinates in pixels. The offset is applied
+     * after the viewport scaling and translation.
+     *
+     * **Default value:** `0`
+     */
+    xOffset?: number;
+
+    /**
+     * Offsets of the `y` and `y2` coordinates in pixels. The offset is applied
+     * after the viewport scaling and translation.
+     *
+     * **Default value:** `0`
+     */
+    yOffset?: number;
+
+    /**
+     * Minimum size for WebGL buffers (number of data items).
+     * Allows for using `bufferSubData()` to update graphics.
+     *
+     * This property is intended for internal use.
+     *
+     * @internal
+     */
+    minBufferSize?: number;
+
+    /**
+     * Tooltip handler. If `null`, no tooltip is shown. If string, specifies
+     * the [tooltip handler](https://genomespy.app/docs/api/#custom-tooltip-handlers)
+     * to use.
+     */
+    tooltip?: Tooltip;
+}
+
+export interface SizeProps {
+    /**
+     * Stroke width of `"link"` and `"rule"` marks in pixels, the area of the
+     * bounding square of `"point"` mark, or the font size of `"text"` mark.
+     */
+    size?: number | ExprRef;
+}
+
 export interface FillAndStrokeProps {
-    /** The fill color */
+    /**
+     * The stroke width in pixels.
+     */
+    strokeWidth?: number | ExprRef;
+
+    /**
+     * Whether the `color` represents the `fill` color (`true`) or the `stroke` color (`false`).
+     */
+    filled?: boolean;
+
+    /**
+     * The fill color.
+     */
     fill?: string | ExprRef;
 
-    /** The fill opacity. Value between [0, 1]. */
+    /**
+     * The fill opacity. Value between `0` and `1`.
+     */
     fillOpacity?: number | ExprRef;
 
-    /** The stroke color */
+    /**
+     * The stroke color
+     */
     stroke?: string | ExprRef;
 
-    /** The stroke opacity. Value between [0, 1]. */
+    /**
+     * The stroke opacity. Value between `0` and `1`.
+     */
     strokeOpacity?: number | ExprRef;
 }
 
 export interface SecondaryPositionProps {
+    /**
+     * The secondary position on the x axis.
+     */
     x2?: number | ExprRef;
+
+    /**
+     * The secondary position on the y axis.
+     */
     y2?: number | ExprRef;
 }
 
@@ -33,6 +131,17 @@ export interface AngleProps {
     angle?: number | ExprRef;
 }
 
+export interface MinPickingSizeProps {
+    /**
+     * The minimum picking size invisibly increases the stroke width or point diameter
+     * of marks when pointing them with the mouse cursor, making it easier to select them.
+     * The valus is the minimum size in pixels.
+     *
+     * **Default value:** `3.0` for `"link"` and `2.0` for `"point"`
+     */
+    minPickingSize?: number | ExprRef;
+}
+
 /**
  * Specifies how mark should be faded at the viewport edges.
  * This is mainly used to make axis labels pretty.
@@ -49,7 +158,12 @@ export interface ViewportEdgeFadeProps {
     viewportEdgeFadeDistanceLeft?: number;
 }
 
-export interface RectProps extends SecondaryPositionProps {
+export interface RectProps
+    extends MarkPropsBase,
+        SecondaryPositionProps,
+        FillAndStrokeProps {
+    type: "rect";
+
     /**
      * Clamps the minimum size-dependent opacity. The property does not affect the
      * `opacity` channel. Valid values are between `0` and `1`.
@@ -120,7 +234,12 @@ export interface RectProps extends SecondaryPositionProps {
     cornerRadiusBottomRight?: number | ExprRef;
 }
 
-export interface RuleProps extends SecondaryPositionProps {
+export interface RuleProps
+    extends MarkPropsBase,
+        SecondaryPositionProps,
+        SizeProps {
+    type: "rule";
+
     /**
      * The minimum length of the rule in pixels. Use this property to ensure that
      * very short ranged rules remain visible even when the user zooms out.
@@ -152,9 +271,13 @@ export interface RuleProps extends SecondaryPositionProps {
 }
 
 export interface TextProps
-    extends SecondaryPositionProps,
+    extends MarkPropsBase,
+        SecondaryPositionProps,
         AngleProps,
-        ViewportEdgeFadeProps {
+        ViewportEdgeFadeProps,
+        SizeProps {
+    type: "text";
+
     /**
      * The text to display. The format of numeric data can be customized by
      * setting a [format specifier](https://github.com/d3/d3-format#locale_format)
@@ -276,14 +399,22 @@ export interface TextProps
     logoLetters?: boolean | ExprRef;
 }
 
-export interface PointProps extends AngleProps {
+export interface PointProps
+    extends MarkPropsBase,
+        FillAndStrokeProps,
+        AngleProps,
+        SizeProps,
+        MinPickingSizeProps {
+    type: "point";
+
     /**
      * One of `"circle"`, `"square"`, `"cross"`, `"diamond"`, `"triangle-up"`,
-     * `"triangle-down"`, `"triangle-right"`, or `"triangle-left"`.
+     * `"triangle-down"`, `"triangle-right"`, `"triangle-left"`, `"tick-up"`,
+     * `"tick-down"`, `"tick-right"`, or `"tick-left"`
      *
      * **Default value:** `"circle"`
      */
-    shape?: string;
+    shape?: string | ExprRef;
 
     /**
      * Should the stroke only grow inwards, e.g, the diameter/outline is not affected by the stroke width.
@@ -296,7 +427,7 @@ export interface PointProps extends AngleProps {
 
     /**
      * Gradient strength controls the amount of the gradient eye-candy effect in the fill color.
-     * Valid values are between 0 and 1.
+     * Valid values are between `0` and `1`.
      *
      * **Default value:** `0`
      */
@@ -318,9 +449,24 @@ export interface PointProps extends AngleProps {
     geometricZoomBound?: number;
 }
 
-export interface LinkProps extends SecondaryPositionProps {
+export interface LinkProps
+    extends MarkPropsBase,
+        SecondaryPositionProps,
+        SizeProps,
+        MinPickingSizeProps {
+    type: "link";
+
     /**
-     * The shape of the link path. Either `"arc"`, `"diagonal"`, `"line"`, or `"dome"`.
+     * The shape of the link path.
+     *
+     * The `"arc"` shape draws a circular arc between the two points. The apex of the
+     * arc resides on the left side of the line that connects the two points.
+     * The `"dome"` shape draws a vertical or horizontal arc with a specific height.
+     * The primary positional channel determines the apex of the arc and the secondary
+     * determines the endpoint placement.
+     * The `"diagonal"` shape draws an "S"-shaped curve between the two points.
+     * The `"line"` shape draws a straight line between the two points. See an
+     * [example](#different-link-shapes-and-orientations) of the different shapes below.
      *
      * **Default value:** `"arc"`
      */
@@ -347,7 +493,7 @@ export interface LinkProps extends SecondaryPositionProps {
      * The number of segments in the bézier curve. Affects the rendering quality and performance.
      * Use a higher value for a smoother curve.
      *
-     * **Default value:* `101`
+     * **Default value:** `101`
      */
     segments?: number | ExprRef;
 
@@ -394,77 +540,11 @@ export interface LinkProps extends SecondaryPositionProps {
      * **Default value:** `true`
      */
     noFadingOnPointSelection?: boolean | ExprRef;
-
-    /**
-     * The minimum stroke width of the links when pointing with the mouse cursor.
-     * Allows making very thin links easier to point at.
-     *
-     * **Default value:** `3.0`
-     */
-    minPickingSize?: number | ExprRef;
 }
 
-// TODO: Mark-specific configs
-export interface MarkProps
-    extends PointProps,
-        RectProps,
-        TextProps,
-        RuleProps,
-        LinkProps,
-        FillAndStrokeProps {
-    // Channels.
-    x?: number | ExprRef;
-    y?: number | ExprRef;
-    color?: string | ExprRef;
-    opacity?: number | ExprRef;
-    size?: number | ExprRef;
-
-    /**
-     * Whether the `color` represents the `fill` color (`true`) or the `stroke` color (`false`).
-     */
-    filled?: boolean;
-
-    /**
-     * If true, the mark is clipped to the UnitView's rectangle. By default, clipping
-     * is enabled for marks that have zoomable positional scales.
-     */
-    clip?: boolean | "never";
-
-    /**
-     * Offsets of the `x` and `x2` coordinates in pixels. The offset is applied
-     * after the viewport scaling and translation.
-     *
-     * **Default value:** `0`
-     */
-    xOffset?: number;
-
-    /**
-     * Offsets of the `y` and `y2` coordinates in pixels. The offset is applied
-     * after the viewport scaling and translation.
-     *
-     * **Default value:** `0`
-     */
-    yOffset?: number;
-
-    /**
-     * TODO
-     */
-    tooltip?: Tooltip;
-
-    /**
-     * The stroke width in pixels.
-     */
-    strokeWidth?: number | ExprRef;
-
-    /**
-     * Minimum size for WebGL buffers (number of data items).
-     * Allows for using `bufferSubData()` to update graphics.
-     *
-     * This property is intended for internal use.
-     */
-    minBufferSize?: number;
-}
-
-export interface MarkConfigAndType extends MarkProps {
-    type: MarkType;
-}
+export type MarkProps =
+    | RectProps
+    | TextProps
+    | RuleProps
+    | LinkProps
+    | PointProps;

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

@@ -6,22 +6,23 @@ import {
     FacetFieldDef,
     PrimaryPositionalChannel,
 } from "./channel.js";
-import {
-    FillAndStrokeProps,
-    MarkConfigAndType,
-    MarkType,
-    RectProps,
-} from "./mark.js";
+import { FillAndStrokeProps, MarkProps, MarkType, RectProps } 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 {
-    /** Size in pixels */
+    /**
+     * Size in pixels
+     */
     px?: number;
 
-    /** Share of the remaining space */
+    /**
+     * Share of the remaining space. See [child
+     * sizing](https://genomespy.app/docs/grammar/composition/concat/#child-sizing)
+     * for details.
+     */
     grow?: number;
 }
 
@@ -39,9 +40,15 @@ export interface FacetMapping {
  */
 export interface DynamicOpacity {
     channel?: PrimaryPositionalChannel;
-    /** Stops expressed as units (base pairs, for example) per pixel. */
+
+    /**
+     * Stops expressed as units (base pairs, for example) per pixel.
+     */
     unitsPerPixel: number[];
-    /** Opacity values that match the given stops. */
+
+    /**
+     * Opacity values that match the given stops.
+     */
     values: number[];
 }
 
@@ -70,17 +77,25 @@ export type ViewBackground = Pick<
 >;
 
 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.
+     */
     name?: string;
 
     /**
      * Height of the view. If a number, it is interpreted as pixels.
+     * Check [child sizing](https://genomespy.app/docs/grammar/composition/concat/#child-sizing)
+     * for details.
      *
-     * **Default:** `"container"`
+     * **Default value:** `"container"`
      */
     height?: SizeDef | number | Step | "container";
 
     /**
      * Width of the view. If a number, it is interpreted as pixels.
+     * Check [child sizing](https://genomespy.app/docs/grammar/composition/concat/#child-sizing)
+     * for details.
      *
      * **Default:** `"container"`
      */
@@ -88,7 +103,8 @@ export interface ViewSpecBase extends ResolveSpec {
 
     /**
      * Optional viewport height of the view. If the view size exceeds the viewport height,
-     * it will be shown with scrollbars. This property implicitly enables clipping.
+     * it will be shown with [scrollbars](https://genomespy.app/docs/grammar/composition/concat/#scrollable-viewports).
+     * This property implicitly enables clipping.
      *
      * **Default:** `null` (same as `height`)
      */
@@ -96,85 +112,140 @@ export interface ViewSpecBase extends ResolveSpec {
 
     /**
      * Optional viewport width of the view. If the view size exceeds the viewport width,
-     * it will be shown with scrollbars. This property implicitly enables clipping.
+     * it will be shown with [scrollbars](https://genomespy.app/docs/grammar/composition/concat/#scrollable-viewports).
+     * This property implicitly enables clipping.
      *
      * **Default:** `null` (same as `width`)
      */
     viewportWidth?: SizeDef | number | "container";
 
     /**
-     * Padding in pixels.
+     * Padding applied to the view. Accepts either a number representing pixels or an
+     * object specifying separate paddings for each edge.
+     *
+     * Examples:
+     * - `padding: 10`
+     * - `padding: { top: 10, right: 20, bottom: 10, left: 20 }`
      *
-     * **Default:* `0`
+     * **Default value:** `0`
      */
     padding?: PaddingConfig;
 
     /**
-     * Dynamic variables that parameterize a visualization.
+     * Dynamic variables that [parameterize](https://genomespy.app/docs/grammar/parameters/)
+     * a visualization.
      */
     params?: Parameter[];
 
+    /**
+     * Specifies a [data source](https://genomespy.app/docs/grammar/data/).
+     * If omitted, the data source is inherited from the parent view.
+     */
     data?: Data;
+
+    /**
+     * An array of [transformations](https://genomespy.app/docs/grammar/transform/)
+     * applied to the data before visual encoding.
+     */
     transform?: TransformParams[];
+
+    /**
+     * Specifies how data are [encoded](https://genomespy.app/docs/grammar/mark/#encoding)
+     * using the visual channels.
+     */
     encoding?: Encoding;
-    title?: string | Title;
 
     /**
-     * A description of the view. Multiple lines can be provided as an array.
+     * 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.
      */
-    description?: string | string[];
+    title?: string | Title;
 
     /**
-     * Optional base URL for constructing request URLs. When set, all views
-     * deeper in the hierarchy inherit this base URL, using it for importing
-     * loading data and importing specifications.
+     * A description of the view. Can be used for documentation. The description
+     * of the top-level view is shown in the toolbar of the [GenomeSpy
+     * App](https://genomespy.app/docs/sample-collections/).
      */
-    baseUrl?: string;
+    description?: string | string[];
 
     /**
-     * Opacity of the view and all its children.
-     *
-     * **Default:** `1.0`
+     * The base URL for relative URL data sources and URL
+     * [imports](https://genomespy.app/docs/grammar/import/#importing-from-a-url).
+     * The base URLs are inherited in the view hierarchy unless overridden with
+     * this property. By default, the top-level view's base URL equals to the
+     * visualization specification's base URL.
      */
-    // TODO: Should be available only in Unit and Layer views.
-    opacity?: ViewOpacityDef;
+    baseUrl?: string;
 
     /**
-     * Visibility of the view. An invisible view is removed from the layout
-     * and not rendered.
+     * The default visibility of the view. An invisible view is removed from the
+     * layout and not rendered. For context, see [toggleable view
+     * visibility](https://genomespy.app/docs/sample-collections/visualizing/#toggleable-view-visibility).
      *
      * **Default:** `true`
      */
-    // TODO: Detach invisible views from the data flow.
     visible?: boolean;
 
     /**
-     * Is the visibility configurable interactively from the App.
+     * 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 specification.
+     * that is *unique* in within the view hierarchy.
      *
      * **Default:** `false` for children of `layer`, `true` for others.
      */
     configurableVisibility?: boolean;
 
     /**
-     * Templates that can be reused within the view specification by importing
-     * them with the template key.
+     * [Templates](https://genomespy.app/docs/grammar/import/#repeating-with-named-templates)
+     * that can be reused within the view specification by importing them with the template key.
      */
     templates?: Record<string, ViewSpec>;
 }
 
-export interface UnitSpec extends ViewSpecBase, AggregateSamplesSpec {
+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.
+     *
+     * TODO: Write proper documentation with examples.
+     *
+     * **Default:** `1.0`
+     */
+    opacity?: ViewOpacityDef;
+}
+
+export interface UnitSpec
+    extends ViewSpecBase,
+        DynamicOpacitySpec,
+        AggregateSamplesSpec {
+    /**
+     * The background of the view, including fill, stroke, and stroke width.
+     */
     view?: ViewBackground;
-    mark: MarkType | MarkConfigAndType;
+
+    /**
+     * The graphical mark presenting the data objects.
+     */
+    mark: MarkType | MarkProps;
 }
 
+// TODO: Some fancy generic typing that would make Aggregating available only
+// inside SampleSpec.
 export interface AggregateSamplesSpec {
-    // TODO: Introduce a type (UnitSpec | LayerSpec) that can ba used in SampleView and here
+    /**
+     * Specifies views that [aggregate](https://genomespy.app/docs/sample-collections/visualizing/#aggregation)
+     * multiple samples within the GenomeSpy App.
+     */
     aggregateSamples?: (UnitSpec | LayerSpec)[];
 }
 
-export interface LayerSpec extends ViewSpecBase, AggregateSamplesSpec {
+export interface LayerSpec
+    extends ViewSpecBase,
+        DynamicOpacitySpec,
+        AggregateSamplesSpec {
     view?: ViewBackground;
     layer: (LayerSpec | UnitSpec | ImportSpec)[];
 }
@@ -201,6 +272,11 @@ export type ResolutionBehavior =
     | "forced";
 
 export interface ResolveSpec {
+    /**
+     * Specifies how scales and axes are
+     * [resolved](https://genomespy.app/docs/grammar/composition/#scale-and-axis-resolution)
+     * in the view hierarchy.
+     */
     resolve?: Partial<
         Record<
             ResolutionTarget,

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

@@ -1,3 +1,3 @@
 export default css;
-declare const css: "\n.genome-spy {\n  font-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.genome-spy .canvas-wrapper {\n  position: relative;\n  flex-grow: 1;\n  overflow: hidden;\n}\n.genome-spy canvas {\n  transform: scale(1, 1);\n  opacity: 1;\n  transition: transform 0.6s, opacity 0.6s;\n}\n.genome-spy .loading-message {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.genome-spy .loading-message .message {\n  color: #666;\n  opacity: 0;\n  transition: opacity 0.7s;\n}\n.genome-spy .loading > canvas {\n  transform: scale(0.95, 0.95);\n  opacity: 0;\n}\n.genome-spy .loading > .loading-message .message {\n  opacity: 1;\n}\n.genome-spy .loading > .loading-message .message .ellipsis {\n  animation: blinker 1s linear infinite;\n}\n@keyframes blinker {\n  50% {\n    opacity: 0;\n  }\n}\n.genome-spy .loading-indicators {\n  position: absolute;\n  inset: 0;\n  user-select: none;\n  pointer-events: none;\n}\n.genome-spy .loading-indicators div {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.genome-spy .loading-indicators div > div {\n  font-size: 11px;\n  transition: opacity 0.2s;\n  background: white;\n  padding: 2px 5px;\n  display: flex;\n  border-radius: 3px;\n  gap: 0.5em;\n  opacity: 0;\n}\n.genome-spy .loading-indicators div > div.loading {\n  opacity: 0.5;\n}\n.genome-spy .loading-indicators div > div.error {\n  opacity: 0.8;\n  color: firebrick;\n}\n.genome-spy .loading-indicators div > div > * {\n  display: block;\n}\n.genome-spy .loading-indicators div > div img {\n  width: 1.5em;\n  height: 1.5em;\n}\n.genome-spy .tooltip {\n  position: absolute;\n  max-width: 450px;\n  overflow: hidden;\n  background: #f6f6f6;\n  padding: 10px;\n  font-size: 13px;\n  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n  pointer-events: none;\n  z-index: 100;\n}\n.genome-spy .tooltip > :last-child {\n  margin-bottom: 0;\n}\n.genome-spy .tooltip > .title {\n  padding-bottom: 5px;\n  margin-bottom: 5px;\n  border-bottom: 1px dashed #b6b6b6;\n}\n.genome-spy .tooltip .summary {\n  font-size: 12px;\n}\n.genome-spy .tooltip table {\n  border-collapse: collapse;\n}\n.genome-spy .tooltip table:first-child {\n  margin-top: 0;\n}\n.genome-spy .tooltip table th,\n.genome-spy .tooltip table td {\n  padding: 2px 0.4em;\n  vertical-align: top;\n}\n.genome-spy .tooltip table th:first-child,\n.genome-spy .tooltip table td:first-child {\n  padding-left: 0;\n}\n.genome-spy .tooltip table th {\n  text-align: left;\n  font-weight: bold;\n}\n.genome-spy .tooltip .color-legend {\n  display: inline-block;\n  width: 0.8em;\n  height: 0.8em;\n  margin-left: 0.4em;\n  box-shadow: 0px 0px 3px 1px white;\n}\n.genome-spy .tooltip .attributes .hovered {\n  background-color: #e0e0e0;\n}\n.genome-spy .tooltip .na {\n  color: #aaa;\n  font-style: italic;\n  font-size: 80%;\n}\n.genome-spy .gene-track-tooltip .summary {\n  font-size: 90%;\n}\n.genome-spy .message-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 100%;\n}\n.genome-spy .message-box > div {\n  border: 1px solid red;\n  padding: 10px;\n  background: #fff0f0;\n}\n\n.gs-input-binding {\n  display: grid;\n  grid-template-columns: max-content max-content;\n  column-gap: 1em;\n  row-gap: 0.3em;\n  justify-items: start;\n}\n.gs-input-binding > select,\n.gs-input-binding > input:not([type=checkbox]) {\n  width: 100%;\n}\n.gs-input-binding input[type=range] + span {\n  display: inline-block;\n  margin-left: 0.3em;\n  min-width: 2.2em;\n  font-variant-numeric: tabular-nums;\n}\n.gs-input-binding input[type=range],\n.gs-input-binding input[type=radio] {\n  vertical-align: text-bottom;\n}\n.gs-input-binding .radio-group {\n  display: flex;\n  align-items: center;\n}\n.gs-input-binding .description {\n  max-width: 26em;\n  grid-column: 1/-1;\n  color: #777;\n  font-size: 90%;\n  margin-top: -0.5em;\n}\n\n.gs-input-bindings {\n  flex-basis: content;\n  font-size: 14px;\n  padding: 10px;\n}\n";
+declare const css: "\n.genome-spy {\n  font-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n.genome-spy .canvas-wrapper {\n  position: relative;\n  flex-grow: 1;\n  overflow: hidden;\n}\n.genome-spy canvas {\n  display: block;\n  transform: scale(1, 1);\n  opacity: 1;\n  transition: transform 0.6s, opacity 0.6s;\n}\n.genome-spy .loading-message {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.genome-spy .loading-message .message {\n  color: #666;\n  opacity: 0;\n  transition: opacity 0.7s;\n}\n.genome-spy .loading > canvas {\n  transform: scale(0.95, 0.95);\n  opacity: 0;\n}\n.genome-spy .loading > .loading-message .message {\n  opacity: 1;\n}\n.genome-spy .loading > .loading-message .message .ellipsis {\n  animation: blinker 1s linear infinite;\n}\n@keyframes blinker {\n  50% {\n    opacity: 0;\n  }\n}\n.genome-spy .loading-indicators {\n  position: absolute;\n  inset: 0;\n  user-select: none;\n  pointer-events: none;\n}\n.genome-spy .loading-indicators div {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.genome-spy .loading-indicators div > div {\n  font-size: 11px;\n  transition: opacity 0.2s;\n  background: white;\n  padding: 2px 5px;\n  display: flex;\n  border-radius: 3px;\n  gap: 0.5em;\n  opacity: 0;\n}\n.genome-spy .loading-indicators div > div.loading {\n  opacity: 0.5;\n}\n.genome-spy .loading-indicators div > div.error {\n  opacity: 0.8;\n  color: firebrick;\n}\n.genome-spy .loading-indicators div > div > * {\n  display: block;\n}\n.genome-spy .loading-indicators div > div img {\n  width: 1.5em;\n  height: 1.5em;\n}\n.genome-spy .tooltip {\n  position: absolute;\n  max-width: 450px;\n  overflow: hidden;\n  background: #f6f6f6;\n  padding: 10px;\n  font-size: 13px;\n  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n  pointer-events: none;\n  z-index: 100;\n}\n.genome-spy .tooltip > :last-child {\n  margin-bottom: 0;\n}\n.genome-spy .tooltip > .title {\n  padding-bottom: 5px;\n  margin-bottom: 5px;\n  border-bottom: 1px dashed #b6b6b6;\n}\n.genome-spy .tooltip .summary {\n  font-size: 12px;\n}\n.genome-spy .tooltip table {\n  border-collapse: collapse;\n}\n.genome-spy .tooltip table:first-child {\n  margin-top: 0;\n}\n.genome-spy .tooltip table th,\n.genome-spy .tooltip table td {\n  padding: 2px 0.4em;\n  vertical-align: top;\n}\n.genome-spy .tooltip table th:first-child,\n.genome-spy .tooltip table td:first-child {\n  padding-left: 0;\n}\n.genome-spy .tooltip table th {\n  text-align: left;\n  font-weight: bold;\n}\n.genome-spy .tooltip .color-legend {\n  display: inline-block;\n  width: 0.8em;\n  height: 0.8em;\n  margin-left: 0.4em;\n  box-shadow: 0px 0px 3px 1px white;\n}\n.genome-spy .tooltip .attributes .hovered {\n  background-color: #e0e0e0;\n}\n.genome-spy .tooltip .na {\n  color: #aaa;\n  font-style: italic;\n  font-size: 80%;\n}\n.genome-spy .gene-track-tooltip .summary {\n  font-size: 90%;\n}\n.genome-spy .message-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 100%;\n}\n.genome-spy .message-box > div {\n  border: 1px solid red;\n  padding: 10px;\n  background: #fff0f0;\n}\n\n.gs-input-binding {\n  display: grid;\n  grid-template-columns: max-content max-content;\n  column-gap: 1em;\n  row-gap: 0.3em;\n  justify-items: start;\n}\n.gs-input-binding > select,\n.gs-input-binding > input:not([type=checkbox]) {\n  width: 100%;\n}\n.gs-input-binding input[type=range] + span {\n  display: inline-block;\n  margin-left: 0.3em;\n  min-width: 2.2em;\n  font-variant-numeric: tabular-nums;\n}\n.gs-input-binding input[type=range],\n.gs-input-binding input[type=radio] {\n  vertical-align: text-bottom;\n}\n.gs-input-binding .radio-group {\n  display: flex;\n  align-items: center;\n}\n.gs-input-binding .description {\n  max-width: 26em;\n  grid-column: 1/-1;\n  color: #777;\n  font-size: 90%;\n  margin-top: -0.5em;\n}\n\n.gs-input-bindings {\n  flex-basis: content;\n  font-size: 14px;\n  padding: 10px;\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,yoIAgME"}
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,4pIAiME"}

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

@@ -11,6 +11,7 @@ const css = `
   overflow: hidden;
 }
 .genome-spy canvas {
+  display: block;
   transform: scale(1, 1);
   opacity: 1;
   transition: transform 0.6s, opacity 0.6s;

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

@@ -20,6 +20,7 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
     }
 
     canvas {
+        display: block;
         transform: scale(1, 1);
         opacity: 1;
         transition: transform 0.6s, opacity 0.6s;

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 | HTMLElement | import("lit-html").TemplateResult>;
+export default function dataTooltipHandler(datum: Record<string, any>, mark: import("../marks/mark.js").default<import("../spec/mark.js").MarkProps>, params?: Record<string, any>): Promise<string | HTMLElement | import("lit-html").TemplateResult>;
 //# sourceMappingURL=dataTooltipHandler.d.ts.map

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

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

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

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

package/dist/src/tooltip/refseqGeneTooltipHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"refseqGeneTooltipHandler.d.ts","sourceRoot":"","sources":["../../../src/tooltip/refseqGeneTooltipHandler.js"],"names":[],"mappings":"AAOC,wNAQW"}
+{"version":3,"file":"refseqGeneTooltipHandler.d.ts","sourceRoot":"","sources":["../../../src/tooltip/refseqGeneTooltipHandler.js"],"names":[],"mappings":"AAOC,6PAQW"}

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

@@ -25,7 +25,7 @@ export default class AxisResolution {
      *
      * @param {AxisResolutionMember} newMember
      */
-    pushUnitView(newMember: AxisResolutionMember): void;
+    addMember(newMember: AxisResolutionMember): void;
     getAxisProps(): import("../spec/axis.js").GenomeAxis;
     getTitle(): string;
 }