@genome-spy/core 0.59.0 → 0.60.1

package/dist/src/selection/selection.js

@@ -25,6 +25,20 @@ export function createMultiPointSelection(data) {
     };
 }
 
+/**
+ *
+ * @param {import("../spec/channel.js").ChannelWithScale[]} channels
+ * @returns {import("../types/selectionTypes.js").IntervalSelection}
+ */
+export function createIntervalSelection(channels) {
+    return {
+        type: "interval",
+        intervals: Object.fromEntries(
+            channels.map((c) => [c, /** @type {number[]} */ (null)])
+        ),
+    };
+}
+
 /**
  * Updates the backing data and returns a new instance of the selection object.
  * A new instance is required to trigger reactivity in parameters.
@@ -78,6 +92,8 @@ export function selectionTest(selection, datum, empty = true) {
         return selection.data.size == 0
             ? empty
             : selection.data.has(datum[UNIQUE_ID_KEY]); // TODO: Binary search
+    } else if (isIntervalSelection(selection)) {
+        throw new Error("TODO: Implement interval selection test");
     } else {
         throw new Error("Not a selection: " + JSON.stringify(selection));
     }
@@ -94,10 +110,10 @@ export function makeSelectionTestExpression(params) {
 
 /**
  * @param {import("../types/selectionTypes.js").Selection} selection
- * @returns {selection is import("../types/selectionTypes.js").RangeSelection}
+ * @returns {selection is import("../types/selectionTypes.js").IntervalSelection}
  */
-export function isRangeSelection(selection) {
-    return selection.type === "range";
+export function isIntervalSelection(selection) {
+    return selection.type === "interval";
 }
 
 /**
@@ -152,3 +168,37 @@ export function asSelectionConfig(typeOrConfig) {
 export function isPointSelectionConfig(config) {
     return config && config.type == "point";
 }
+
+/**
+ *
+ * @param {import("../spec/parameter.js").SelectionConfig} config
+ * @returns {config is import("../spec/parameter.js").IntervalSelectionConfig}
+ */
+export function isIntervalSelectionConfig(config) {
+    return config && config.type == "interval";
+}
+
+/**
+ * @param {import("../types/selectionTypes.js").IntervalSelection} selection
+ */
+export function isActiveIntervalSelection(selection) {
+    return Object.values(selection.intervals).some(
+        (interval) => interval && interval.length === 2
+    );
+}
+
+/**
+ * @typedef {import("../types/selectionTypes.js").IntervalSelection} IntervalSelection
+ * @typedef {Partial<Record<keyof IntervalSelection["intervals"], number>>} IntervalPoint
+ * @param {IntervalSelection} selection
+ * @param {IntervalPoint} point
+ */
+export function selectionContainsPoint(selection, point) {
+    return Object.entries(selection.intervals).every(
+        ([channel, interval]) =>
+            (channel == "x" || channel == "y") &&
+            interval &&
+            interval[0] <= point[channel] &&
+            interval[1] >= point[channel]
+    );
+}

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

@@ -119,12 +119,29 @@ export interface DataBase {
     name?: string;
 }
 
+export interface UrlList {
+    /**
+     * A URL that returns a list of URLs to load the data set.
+     * The URLs in the list can be absolute or relative to the URL of the list.
+     */
+    urlsFromFile: string;
+
+    /**
+     * The format of the data in the list.
+     * If the type is `"json"`, the list is expected to be an array of strings.
+     * If the type is `"csv"` or `"tsv"`, the list is expected to be a table with a single column named `file`.
+     *
+     * __Default value:__ `"txt"`
+     */
+    type?: "json" | "csv" | "tsv";
+}
+
 export interface UrlData extends DataBase {
     /**
      * An URL or an array of URLs from which to load the data set.
      * Use the `format.type` property to ensure the loaded data is correctly parsed.
      */
-    url: string | string[] | ExprRef;
+    url: string | string[] | ExprRef | UrlList;
 }
 
 export interface InlineData extends DataBase {

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

@@ -110,6 +110,43 @@ export interface FillAndStrokeProps {
     strokeOpacity?: number | ExprRef;
 }
 
+export interface ShadowProps {
+    /**
+     * The color of the drop shadow. Any valid CSS color string is allowed.
+     *
+     * **Default value:** `"black"`
+     */
+    shadowColor?: string | ExprRef;
+
+    /**
+     * The opacity of the drop shadow. Value between `0` (fully transparent) and `1` (fully opaque).
+     *
+     * **Default value:** `0` (disabled)
+     */
+    shadowOpacity?: number | ExprRef;
+
+    /**
+     * The horizontal offset of the drop shadow in pixels. Positive values move the shadow to the right.
+     *
+     * **Default value:** `0`
+     */
+    shadowOffsetX?: number | ExprRef;
+
+    /**
+     * The vertical offset of the drop shadow in pixels. Positive values move the shadow downward.
+     *
+     * **Default value:** `0`
+     */
+    shadowOffsetY?: number | ExprRef;
+
+    /**
+     * The blur radius of the drop shadow in pixels. Higher values produce a more diffuse shadow.
+     *
+     * **Default value:** `0`
+     */
+    shadowBlur?: number | ExprRef;
+}
+
 export interface SecondaryPositionProps {
     /**
      * The secondary position on the x axis.
@@ -161,7 +198,8 @@ export interface ViewportEdgeFadeProps {
 export interface RectProps
     extends MarkPropsBase,
         SecondaryPositionProps,
-        FillAndStrokeProps {
+        FillAndStrokeProps,
+        ShadowProps {
     type: "rect";
 
     /**
@@ -232,6 +270,25 @@ export interface RectProps
      * **Default value:** (None)
      */
     cornerRadiusBottomRight?: number | ExprRef;
+
+    /**
+     * A hatch pattern drawn inside the mark using the stroke width, color, and opacity.
+     * The pattern is aligned in screen space and scaled by the stroke width.
+     *
+     * **Default value:** `"none"`
+     */
+    hatch?:
+        | "none"
+        | "diagonal"
+        | "antiDiagonal"
+        | "cross"
+        | "vertical"
+        | "horizontal"
+        | "grid"
+        | "dots"
+        | "rings"
+        | "ringsLarge"
+        | ExprRef;
 }
 
 export interface RuleProps

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

@@ -1,4 +1,5 @@
-import { ChannelWithScale, Scalar } from "./channel.js";
+import { PrimaryPositionalChannel, Scalar } from "./channel.js";
+import { ShadowProps } from "./mark.js";
 
 export interface ExprRef {
     /**
@@ -177,22 +178,6 @@ export interface BaseSelectionConfig<T extends SelectionType = SelectionType> {
     /**
      */
     on?: "click" | "mouseover" | "pointerover";
-
-    /**
-     * An array of encoding channels. The corresponding data field values
-     * must match for a data tuple to fall within the selection.
-     *
-     * __See also:__ The [projection with `encodings` and `fields` section](https://vega.github.io/vega-lite/docs/selection.html#project) in the documentation.
-     */
-    encodings?: ChannelWithScale[];
-
-    /**
-     * An array of field names whose values must match for a data tuple to
-     * fall within the selection.
-     *
-     * __See also:__ The [projection with `encodings` and `fields` section](https://vega.github.io/vega-lite/docs/selection.html#project) in the documentation.
-     */
-    fields?: string[];
 }
 
 export interface PointSelectionConfig extends BaseSelectionConfig<"point"> {
@@ -219,7 +204,67 @@ export interface PointSelectionConfig extends BaseSelectionConfig<"point"> {
 
 export interface IntervalSelectionConfig
     extends BaseSelectionConfig<"interval"> {
-    // TODO
+    type: "interval";
+
+    /**
+     * An array of encoding channels that define the interval selection.
+     */
+    encodings?: PrimaryPositionalChannel[];
+
+    /**
+     * Interval selections display a rectangle mark to show the selected range.
+     * Use the `mark` property to adjust the appearance of this rectangle.
+     */
+    mark?: BrushConfig;
+}
+
+export interface BrushConfig extends ShadowProps {
+    /**
+     * The fill color of the interval mark.
+     *
+     * __Default value:__ `"#808080"`
+     *
+     */
+    fill?: string;
+
+    /**
+     * The fill opacity of the interval mark (a value between `0` and `1`).
+     *
+     * __Default value:__ `0.05`
+     */
+    fillOpacity?: number;
+
+    /**
+     * The stroke color of the interval mark.
+     *
+     * __Default value:__ `"black"`
+     */
+    stroke?: string;
+
+    /**
+     * The stroke opacity of the interval mark (a value between `0` and `1`).
+     *
+     * __Default value:__ `0.2`
+     */
+    strokeOpacity?: number;
+
+    /**
+     * The stroke width of the interval mark.
+     *
+     * __Default value:__ `1`
+     */
+    strokeWidth?: number;
+
+    /**
+     * Where to display the measurement text (e.g., number of base pairs) for the interval selection.
+     *
+     * - `"none"` -- do not show the measurement.
+     * - `"inside"` -- show inside the brush rectangle.
+     * - `"outside"` -- show outside the brush rectangle.
+     *
+     * __Default value:__ `"none"`
+     */
+    measure?: "none" | "inside" | "outside";
 }
 
 export interface SelectionParameter<T extends SelectionType = SelectionType>
@@ -238,21 +283,16 @@ export interface SelectionParameter<T extends SelectionType = SelectionType>
                 ? IntervalSelectionConfig
                 : never);
 
-    /*
-     * Initialize the selection with a mapping between [projected channels or field names](https://vega.github.io/vega-lite/docs/selection.html#project) and initial values.
-     *
-     * __See also:__ [`init`](https://vega.github.io/vega-lite/docs/value.html) documentation.
-     */
-    /*
-    // TODO TODO TODO TODO TODO TODO TODO TODO 
-    value?: T extends "point"
-        ? SelectionInit | SelectionInitMapping[]
-        : T extends "interval"
-        ? SelectionInitIntervalMapping
-        : never;
-        */
+    /**
+     * Initial value for the selection.
+     */
+    value?: T extends "interval" ? SelectionInitIntervalMapping : never;
 }
 
+export type SelectionInitIntervalMapping = Partial<
+    Record<PrimaryPositionalChannel, [number, number]>
+>;
+
 export type SelectionConfig = PointSelectionConfig | IntervalSelectionConfig;
 export type SelectionTypeOrConfig = SelectionType | SelectionConfig;
 

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

@@ -6,7 +6,13 @@ import {
     FacetFieldDef,
     PrimaryPositionalChannel,
 } from "./channel.js";
-import { FillAndStrokeProps, MarkProps, MarkType, RectProps } from "./mark.js";
+import {
+    FillAndStrokeProps,
+    MarkProps,
+    MarkType,
+    RectProps,
+    ShadowProps,
+} from "./mark.js";
 import { ExprRef } from "./parameter.js";
 import { Title } from "./title.js";
 import { SampleSpec } from "./sampleView.js";
@@ -74,7 +80,8 @@ interface CompleteViewBackground extends RectProps, FillAndStrokeProps {
 export type ViewBackground = Pick<
     CompleteViewBackground,
     "fill" | "fillOpacity" | "stroke" | "strokeWidth" | "strokeOpacity"
->;
+> &
+    ShadowProps;
 
 export interface ViewSpecBase extends ResolveSpec {
     /**

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 .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  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 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";
 //# 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,4pIAiME"}
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,y/IA4ME"}

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

@@ -16,6 +16,9 @@ const css = `
   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;
@@ -87,9 +90,17 @@ const css = `
   padding: 10px;
   font-size: 12px;
   box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
-  pointer-events: none;
+  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;
 }

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

@@ -26,6 +26,11 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
         transition:
             transform 0.6s,
             opacity 0.6s;
+
+        &:focus,
+        &:focus-visible {
+            outline: none;
+        }
     }
 
     .loading-message {
@@ -121,7 +126,20 @@ $font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
 
         box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);
 
-        pointer-events: none;
+        &: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 {

package/dist/src/types/selectionTypes.d.ts

@@ -5,13 +5,10 @@ export interface SelectionBase {
     type: string;
 }
 
-export interface RangeSelection extends SelectionBase {
-    type: "range";
+export interface IntervalSelection extends SelectionBase {
+    type: "interval";
 
-    fields?: string[];
-    channels?: ChannelWithScale[];
-
-    ranges: number[][];
+    intervals: Partial<Record<ChannelWithScale, number[] | null>>;
 }
 
 export interface ProjectedSelection extends SelectionBase {
@@ -38,7 +35,7 @@ export interface MultiPointSelection extends SelectionBase {
 }
 
 export type Selection =
-    | RangeSelection
+    | IntervalSelection
     | ProjectedSelection
     | SinglePointSelection
     | MultiPointSelection;

package/dist/src/utils/expression.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expression.d.ts","sourceRoot":"","sources":["../../../src/utils/expression.js"],"names":[],"mappings":"AAkEA;;;;;;;;;;GAUG;AACH,6CAHW,MAAM,sBACJ,kBAAkB,CAgC9B;;YAvCU,MAAM,EAAE;aACR,MAAM,EAAE;UACR,MAAM;;iCAEH,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,qBAAqB,EAAE,KAAK,KAAK,GAAG,CAAC,GAAG,eAAe"}
+{"version":3,"file":"expression.d.ts","sourceRoot":"","sources":["../../../src/utils/expression.js"],"names":[],"mappings":"AAsEA;;;;;;;;;;GAUG;AACH,6CAHW,MAAM,sBACJ,kBAAkB,CAgC9B;;YAvCU,MAAM,EAAE;aACR,MAAM,EAAE;UACR,MAAM;;iCAEH,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,qBAAqB,EAAE,KAAK,KAAK,GAAG,CAAC,GAAG,eAAe"}

package/dist/src/utils/expression.js

@@ -8,6 +8,7 @@ import {
     isString,
     lerp,
 } from "vega-util";
+import { format as d3format } from "d3-format";
 import smoothstep from "./smoothstep.js";
 import clamp from "./clamp.js";
 import linearstep from "./linearstep.js";
@@ -18,6 +19,9 @@ import { selectionTest } from "../selection/selection.js";
  */
 const functionContext = {
     clamp,
+    format(/** @type {number} */ value, /** @type {string} */ format) {
+        return d3format(format)(value);
+    },
     isArray,
     isBoolean,
     isDefined(/** @type {any} */ _) {

package/dist/src/utils/ui/tooltip.d.ts

@@ -4,16 +4,11 @@ export default class Tooltip {
      * @param {HTMLElement} container
      */
     constructor(container: HTMLElement);
-    container: HTMLElement;
-    element: HTMLDivElement;
-    _visible: boolean;
-    /** @type {any} */
-    _previousTooltipDatum: any;
-    enabledStack: boolean[];
-    _penaltyUntil: number;
-    /** @type {[number, number]} */
-    _lastCoords: [number, number];
-    _previousMove: number;
+    /**
+     * @param {boolean} sticky
+     */
+    set sticky(sticky: boolean);
+    get sticky(): boolean;
     /**
      * @param {boolean} visible
      */
@@ -46,5 +41,6 @@ export default class Tooltip {
      */
     updateWithDatum<T>(datum: T, converter?: (arg0: T) => Promise<string | HTMLElement | import("lit").TemplateResult>): void;
     _isPenalty(): boolean;
+    #private;
 }
 //# sourceMappingURL=tooltip.d.ts.map

package/dist/src/utils/ui/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/utils/ui/tooltip.js"],"names":[],"mappings":"AAIA,0CAA2C,qBAAqB,CAAC;AAEjE;IACI;;OAEG;IACH,uBAFW,WAAW,EAsBrB;IAnBG,uBAA0B;IAE1B,wBAA4C;IAE5C,kBAAoB;IAGpB,kBAAkB;IAClB,uBADW,GAAG,CACwB;IAEtC,wBAA0B;IAE1B,sBAAsB;IACtB,+BAA+B;IAC/B,aADW,CAAC,MAAM,EAAE,MAAM,CAAC,CACC;IAE5B,sBAAsB;IAK1B;;OAEG;IACH,qBAFW,OAAO,EAOjB;IAED,eATW,OAAO,CAWjB;IAED,uBAEC;IAED;;OAEG;IACH,0BAFW,OAAO,QAOjB;IAED,wBAEC;IAED;;OAEG;IACH,4BAFW,UAAU,QAkCpB;IA/BG,8BAA0D;IAiC9D,wBAiBC;IAED;;OAEG;IACH,oBAFW,MAAM,GAAG,OAAO,KAAK,EAAE,cAAc,GAAG,WAAW,QAiB7D;IAED,cAGC;IAED;;;;;;;OAOG;IACH,gBAFa,CAAC,SAFH,CAAC,cACD,CAAS,IAAC,EAAD,CAAC,KAAE,OAAO,CAAC,MAAM,GAAG,WAAW,GAAG,OAAO,KAAK,EAAE,cAAc,CAAC,QAmBlF;IAED,sBAEC;CACJ"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/utils/ui/tooltip.js"],"names":[],"mappings":"AAIA,0CAA2C,qBAAqB,CAAC;AAEjE;IAsBI;;OAEG;IACH,uBAFW,WAAW,EAUrB;IAED;;OAEG;IACH,mBAFW,OAAO,EAQjB;IAED,cAVW,OAAO,CAYjB;IAED;;OAEG;IACH,qBAFW,OAAO,EAOjB;IAED,eATW,OAAO,CAWjB;IAED,uBAEC;IAED;;OAEG;IACH,0BAFW,OAAO,QAOjB;IAED,wBAEC;IAED;;OAEG;IACH,4BAFW,UAAU,QAsCpB;IA/BG,8BAA2D;IAiC/D,wBAiBC;IAED;;OAEG;IACH,oBAFW,MAAM,GAAG,OAAO,KAAK,EAAE,cAAc,GAAG,WAAW,QAqB7D;IAED,cAGC;IAED;;;;;;;OAOG;IACH,gBAFa,CAAC,SAFH,CAAC,cACD,CAAS,IAAC,EAAD,CAAC,KAAE,OAAO,CAAC,MAAM,GAAG,WAAW,GAAG,OAAO,KAAK,EAAE,cAAc,CAAC,QAmBlF;IAED,sBAEC;;CACJ"}