@genome-spy/core 0.63.0 → 0.65.0

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

@@ -166,9 +166,27 @@ export type SelectionInitInterval =
 
 export type InteractionEventType = "click" | "dblclick" | "mouseover";
 
+// TODO: merge with InteractionEventType
+export type DomEventType = "click" | "dblclick" | "mouseover" | "pointerover";
+
+export interface EventConfig {
+    /**
+     * The type of event to listen to. For example, `"click"` or `"mouseover"`.
+     */
+    type: DomEventType;
+
+    /**
+     * An optional filter expression to further filter events of the specified type.
+     * The expression can only refer to the event object as `event`, and should
+     * evaluate to a boolean value indicating whether to include the event.
+     * No other data or parameters are in scope.
+     */
+    filter?: string;
+}
+
 export interface BaseSelectionConfig<T extends SelectionType = SelectionType> {
     /**
-     * Determines the default event processing and data query for the selection. Vega-Lite currently supports two selection types:
+     * The selection type.
      *
      * - `"point"` -- to select multiple discrete data values; the first value is selected on `click` and additional values toggled on shift-click.
      * - `"interval"` -- to select a continuous range of data values on `drag`.
@@ -176,8 +194,16 @@ export interface BaseSelectionConfig<T extends SelectionType = SelectionType> {
     type: T;
 
     /**
+     * A string or object that defines the events to which the selection should listen.
+     */
+    on?: DomEventType | EventConfig | string;
+
+    /**
+     * A string or object that defines the events that should clear the selection.
+     *
+     * __Default value:__ `"dblclick"`
      */
-    on?: "click" | "mouseover" | "pointerover";
+    clear?: DomEventType | EventConfig | string | boolean;
 }
 
 export interface PointSelectionConfig extends BaseSelectionConfig<"point"> {

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

@@ -1,4 +1,3 @@
-import { Type } from "./channel.js";
 import { Data } from "./data.js";
 import { Align, FontStyle, FontWeight } from "./font.js";
 import { Scale } from "./scale.js";
@@ -31,11 +30,13 @@ export interface SampleSpec extends ViewSpecBase {
     stickySummaries?: boolean;
 }
 
+export type SampleAttributeType = "nominal" | "ordinal" | "quantitative";
+
 export interface SampleAttributeDef {
     /**
      * The attribute type. One of `"nominal"`, `"ordinal"`, or `"quantitative"`.
      */
-    type?: Type; // TODO: Omit index/locus from available types
+    type?: SampleAttributeType;
 
     /**
      * Scale definition for the (default) color channel

package/dist/src/styles/{genome-spy.scss → genome-spy.css}

@@ -1,12 +1,17 @@
-@use "sass:math";
-
-$basic-spacing: 10px;
+: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";
+}
 
-$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: $font-family;
+    font-family: var(--genome-spy-font-family);
 
     position: relative;
 
@@ -58,13 +63,7 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
             opacity: 1;
 
             .ellipsis {
-                animation: blinker 1s linear infinite;
-            }
-
-            @keyframes blinker {
-                50% {
-                    opacity: 0;
-                }
+                animation: genome-spy-blinker 1s linear infinite;
             }
         }
     }
@@ -119,10 +118,12 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
         max-width: 450px;
         overflow: hidden;
 
-        $background-color: #f6f6f6;
-        background: $background-color;
-        padding: $basic-spacing;
-        font-size: 12px;
+        --background-color: #f6f6f6;
+        background: var(--background-color);
+        padding: var(--genome-spy-basic-spacing);
+
+        --font-size: 12px;
+        font-size: var(--font-size);
 
         box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
 
@@ -147,9 +148,11 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
         }
 
         > .title {
-            padding-bottom: math.div($basic-spacing, 2);
-            margin-bottom: math.div($basic-spacing, 2);
-            border-bottom: 1px dashed darken($background-color, 25%);
+            padding-bottom: calc(var(--genome-spy-basic-spacing) / 2);
+            margin-bottom: calc(var(--genome-spy-basic-spacing) / 2);
+            border-bottom: 1px dashed var(--background-color);
+            border-bottom: 1px dashed
+                color-mix(in srgb, black 25%, var(--background-color));
         }
 
         .summary {
@@ -167,6 +170,7 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
             td {
                 padding: 2px 0.4em;
                 vertical-align: top;
+                font-size: var(--font-size);
 
                 &:first-child {
                     padding-left: 0;
@@ -264,5 +268,5 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
 .gs-input-bindings {
     flex-basis: content;
     font-size: 14px;
-    padding: $basic-spacing;
+    padding: var(--genome-spy-basic-spacing);
 }

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  display: block;\n  transform: scale(1, 1);\n  opacity: 1;\n  transition: transform 0.6s, opacity 0.6s;\n}\n.genome-spy canvas:focus, .genome-spy canvas:focus-visible {\n  outline: none;\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: 12px;\n  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n  transition: outline-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;\n  outline: 0px solid transparent;\n  z-index: 100;\n}\n.genome-spy .tooltip:not(.sticky) {\n  pointer-events: none;\n}\n.genome-spy .tooltip.sticky {\n  outline: 2px solid black;\n  box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);\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: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";
 //# 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,y/IA4ME"}
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,+5HAiRE"}

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

@@ -1,206 +1,275 @@
 const css = `
+: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";
-  position: relative;
-  display: flex;
-  flex-direction: column;
-}
-.genome-spy .canvas-wrapper {
-  position: relative;
-  flex-grow: 1;
-  overflow: hidden;
-}
-.genome-spy canvas {
-  display: block;
-  transform: scale(1, 1);
-  opacity: 1;
-  transition: transform 0.6s, opacity 0.6s;
-}
-.genome-spy canvas:focus, .genome-spy canvas:focus-visible {
-  outline: none;
-}
-.genome-spy .loading-message {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.genome-spy .loading-message .message {
-  color: #666;
-  opacity: 0;
-  transition: opacity 0.7s;
-}
-.genome-spy .loading > canvas {
-  transform: scale(0.95, 0.95);
-  opacity: 0;
-}
-.genome-spy .loading > .loading-message .message {
-  opacity: 1;
-}
-.genome-spy .loading > .loading-message .message .ellipsis {
-  animation: blinker 1s linear infinite;
-}
-@keyframes blinker {
-  50% {
-    opacity: 0;
-  }
-}
-.genome-spy .loading-indicators {
-  position: absolute;
-  inset: 0;
-  user-select: none;
-  pointer-events: none;
-}
-.genome-spy .loading-indicators div {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.genome-spy .loading-indicators div > div {
-  font-size: 11px;
-  transition: opacity 0.2s;
-  background: white;
-  padding: 2px 5px;
-  display: flex;
-  border-radius: 3px;
-  gap: 0.5em;
-  opacity: 0;
-}
-.genome-spy .loading-indicators div > div.loading {
-  opacity: 0.5;
-}
-.genome-spy .loading-indicators div > div.error {
-  opacity: 0.8;
-  color: firebrick;
-}
-.genome-spy .loading-indicators div > div > * {
-  display: block;
-}
-.genome-spy .loading-indicators div > div img {
-  width: 1.5em;
-  height: 1.5em;
-}
-.genome-spy .tooltip {
-  position: absolute;
-  max-width: 450px;
-  overflow: hidden;
-  background: #f6f6f6;
-  padding: 10px;
-  font-size: 12px;
-  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
-  transition: outline-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-  outline: 0px solid transparent;
-  z-index: 100;
-}
-.genome-spy .tooltip:not(.sticky) {
-  pointer-events: none;
-}
-.genome-spy .tooltip.sticky {
-  outline: 2px solid black;
-  box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);
-}
-.genome-spy .tooltip > :last-child {
-  margin-bottom: 0;
-}
-.genome-spy .tooltip > .title {
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-  border-bottom: 1px dashed #b6b6b6;
-}
-.genome-spy .tooltip .summary {
-  font-size: 12px;
-}
-.genome-spy .tooltip table {
-  border-collapse: collapse;
-}
-.genome-spy .tooltip table:first-child {
-  margin-top: 0;
-}
-.genome-spy .tooltip table th,
-.genome-spy .tooltip table td {
-  padding: 2px 0.4em;
-  vertical-align: top;
-}
-.genome-spy .tooltip table th:first-child,
-.genome-spy .tooltip table td:first-child {
-  padding-left: 0;
-}
-.genome-spy .tooltip table th {
-  text-align: left;
-  font-weight: bold;
-}
-.genome-spy .tooltip .color-legend {
-  display: inline-block;
-  width: 0.8em;
-  height: 0.8em;
-  margin-left: 0.4em;
-  box-shadow: 0px 0px 3px 1px white;
-}
-.genome-spy .tooltip .attributes .hovered {
-  background-color: #e0e0e0;
-}
-.genome-spy .tooltip .na {
-  color: #aaa;
-  font-style: italic;
-  font-size: 80%;
-}
-.genome-spy .gene-track-tooltip .summary {
-  font-size: 90%;
-}
-.genome-spy .message-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  height: 100%;
-  width: 100%;
-}
-.genome-spy .message-box > div {
-  border: 1px solid red;
-  padding: 10px;
-  background: #fff0f0;
+font-family: var(--genome-spy-font-family);
+
+position: relative;
+
+display: flex;
+flex-direction: column;
+
+.canvas-wrapper {
+position: relative;
+flex-grow: 1;
+overflow: hidden;
+}
+
+canvas {
+display: block;
+transform: scale(1, 1);
+opacity: 1;
+transition:
+transform 0.6s,
+opacity 0.6s;
+
+&:focus,
+&:focus-visible {
+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 {
+position: absolute;
+inset: 0;
+
+user-select: none;
+pointer-events: none;
+
+div {
+position: absolute;
+display: flex;
+align-items: center;
+justify-content: center;
+
+> div {
+font-size: 11px;
+transition: opacity 0.2s;
+background: white;
+padding: 2px 5px;
+display: flex;
+border-radius: 3px;
+gap: 0.5em;
+opacity: 0;
+
+&.loading {
+opacity: 0.5;
+}
+
+&.error {
+opacity: 0.8;
+color: firebrick;
+}
+
+> * {
+display: block;
+}
+
+img {
+width: 1.5em;
+height: 1.5em;
+}
+}
+}
+}
+
+.tooltip {
+position: absolute;
+
+max-width: 450px;
+overflow: hidden;
+
+--background-color: #f6f6f6;
+background: var(--background-color);
+padding: var(--genome-spy-basic-spacing);
+
+--font-size: 12px;
+font-size: var(--font-size);
+
+box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
+
+&:not(.sticky) {
+pointer-events: none;
+}
+
+transition:
+outline-color 0.3s ease-in-out,
+box-shadow 0.3s ease-in-out;
+
+outline: 0px solid transparent;
+&.sticky {
+outline: 2px solid black;
+box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);
+}
+
+z-index: 100;
+
+> :last-child {
+margin-bottom: 0;
+}
+
+> .title {
+padding-bottom: calc(var(--genome-spy-basic-spacing) / 2);
+margin-bottom: calc(var(--genome-spy-basic-spacing) / 2);
+border-bottom: 1px dashed var(--background-color);
+border-bottom: 1px dashed
+color-mix(in srgb, black 25%, var(--background-color));
+}
+
+.summary {
+font-size: 12px;
+}
+
+table {
+&:first-child {
+margin-top: 0;
+}
+
+border-collapse: collapse;
+
+th,
+td {
+padding: 2px 0.4em;
+vertical-align: top;
+font-size: var(--font-size);
+
+&:first-child {
+padding-left: 0;
+}
+}
+
+th {
+text-align: left;
+font-weight: bold;
+}
+}
+
+.color-legend {
+display: inline-block;
+width: 0.8em;
+height: 0.8em;
+margin-left: 0.4em;
+box-shadow: 0px 0px 3px 1px white;
+}
+
+.attributes {
+.hovered {
+background-color: #e0e0e0;
+}
+}
+
+.na {
+color: #aaa;
+font-style: italic;
+font-size: 80%;
+}
+}
+
+.gene-track-tooltip {
+.summary {
+font-size: 90%;
+}
+}
+
+.message-box {
+display: flex;
+align-items: center;
+justify-content: center;
+position: absolute;
+top: 0;
+height: 100%;
+width: 100%;
+
+> div {
+border: 1px solid red;
+padding: 10px;
+background: #fff0f0;
+}
+}
 }
 
 .gs-input-binding {
-  display: grid;
-  grid-template-columns: max-content max-content;
-  column-gap: 1em;
-  row-gap: 0.3em;
-  justify-items: start;
-}
-.gs-input-binding > select,
-.gs-input-binding > input:not([type=checkbox]) {
-  width: 100%;
-}
-.gs-input-binding input[type=range] + span {
-  display: inline-block;
-  margin-left: 0.3em;
-  min-width: 2.2em;
-  font-variant-numeric: tabular-nums;
-}
-.gs-input-binding input[type=range],
-.gs-input-binding input[type=radio] {
-  vertical-align: text-bottom;
-}
-.gs-input-binding .radio-group {
-  display: flex;
-  align-items: center;
-}
-.gs-input-binding .description {
-  max-width: 26em;
-  grid-column: 1/-1;
-  color: #777;
-  font-size: 90%;
-  margin-top: -0.5em;
+display: grid;
+grid-template-columns: max-content max-content;
+column-gap: 1em;
+row-gap: 0.3em;
+justify-items: start;
+
+> select,
+> input:not([type="checkbox"]) {
+width: 100%;
+}
+
+input[type="range"] + span {
+display: inline-block;
+margin-left: 0.3em;
+min-width: 2.2em;
+font-variant-numeric: tabular-nums;
+}
+
+input[type="range"],
+input[type="radio"] {
+vertical-align: text-bottom;
+}
+
+.radio-group {
+display: flex;
+align-items: center;
+}
+
+.description {
+max-width: 26em;
+grid-column: 1 / -1;
+color: #777;
+font-size: 90%;
+margin-top: -0.5em;
+}
 }
 
 .gs-input-bindings {
-  flex-basis: content;
-  font-size: 14px;
-  padding: 10px;
+flex-basis: content;
+font-size: 14px;
+padding: var(--genome-spy-basic-spacing);
 }
 `;
 export default css;