@genome-spy/core 0.58.1 → 0.60.0

package/dist/src/marks/rect.js

@@ -10,6 +10,20 @@ import { asArray } from "../utils/arrayUtils.js";
 import { isValueDef } from "../encoder/encoder.js";
 import { getCachedOrCall } from "../utils/propertyCacher.js";
 import { isDiscrete } from "vega-scale";
+import { cssColorToArray } from "../gl/colorUtils.js";
+
+const hatchPatterns = [
+    "none",
+    "diagonal",
+    "antiDiagonal",
+    "cross",
+    "vertical",
+    "horizontal",
+    "grid",
+    "dots",
+    "rings",
+    "ringsLarge",
+];
 
 /**
  * @extends {Mark<import("../spec/mark.js").RectProps>}
@@ -79,6 +93,7 @@ export default class RectMark extends Mark {
                 () =>
                     !this.#isRoundedCorners() &&
                     !this.#isStroked() &&
+                    !this.properties.shadowOpacity &&
                     isValueDef(this.encoding.fillOpacity) &&
                     this.encoding.fillOpacity.value == 1.0 &&
                     this.properties.minOpacity == 1.0
@@ -141,6 +156,9 @@ export default class RectMark extends Mark {
         if (this.#isStroked()) {
             defines.push("STROKED");
         }
+        if (this.properties.shadowOpacity) {
+            defines.push("SHADOW");
+        }
 
         this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER, [
             COMMON_SHADER,
@@ -174,6 +192,29 @@ export default class RectMark extends Mark {
             "uCornerRadiusBottomLeft",
             props.cornerRadiusBottomLeft ?? props.cornerRadius ?? 0
         );
+
+        this.registerMarkUniformValue("uHatchPattern", props.hatch, (x) =>
+            Math.max(0, hatchPatterns.indexOf(x ?? "none"))
+        );
+
+        this.registerMarkUniformValue("uShadowBlur", props.shadowBlur ?? 0);
+        this.registerMarkUniformValue(
+            "uShadowOpacity",
+            props.shadowOpacity ?? 0
+        );
+        this.registerMarkUniformValue(
+            "uShadowOffsetX",
+            props.shadowOffsetX ?? 0
+        );
+        this.registerMarkUniformValue(
+            "uShadowOffsetY",
+            props.shadowOffsetY ?? 0
+        );
+        this.registerMarkUniformValue(
+            "uShadowColor",
+            props.shadowColor ?? "black",
+            cssColorToArray
+        );
     }
 
     updateGraphicsData() {

package/dist/src/marks/rect.vertex.glsl.js

@@ -1,2 +1,2 @@
-const shader = "out lowp vec4 vFillColor;out lowp vec4 vStrokeColor;out float vHalfStrokeWidth;out vec4 vCornerRadii;\n#if defined(ROUNDED_CORNERS) || defined(STROKED)\nout vec2 vPosInPixels;\n#endif\nout vec2 vHalfSizeInPixels;/***Clamps the minimumSize and returns an opacity that reflects the amount of clamping.*/float clampMinSize(inout float pos,float frac,float size,float minSize){if(minSize>0.0&&abs(size)<minSize){pos+=(frac-0.5)*(minSize*sign(size)-size);return abs(size)/minSize;}return 1.0;}void sort(inout float a,inout float b){if(a>b){float tmp=b;b=a;a=tmp;}}/***The vertex position wrt the rectangle specified by(x,x2,y,y2).*[0,0]=[x,y],[1,1]=[x2,y2].*The x or y component may contain fractional values if the rectangle*have been tessellated.*/vec2 getVertexPos(){int index=gl_VertexID % 6;return vec2(index==0||index==1||index==3 ? 0.0 : 1.0,index==0||index==1||index==2 ? 0.0 : 1.0);}void main(void){vec2 frac=getVertexPos();vec2 normalizedMinSize=vec2(uMinWidth,uMinHeight)/uViewportSize;vec4 cornerRadii=vec4(uCornerRadiusTopRight,uCornerRadiusBottomRight,uCornerRadiusTopLeft,uCornerRadiusBottomLeft);float x=getScaled_x();float x2=getScaled_x2();float y=getScaled_y();float y2=getScaled_y2();sort(x,x2);sort(y,y2);float clampMargin=1.0;vec2 pos1=vec2(clamp(x,0.0-clampMargin,1.0+clampMargin),y);vec2 pos2=vec2(clamp(x2,0.0-clampMargin,1.0+clampMargin),y2);vec2 size=pos2-pos1;if(size.x<=0.0||size.y<=0.0){gl_Position=vec4(0.0,0.0,0.0,1.0);return;}vec2 pos=pos1+frac*size;size.y*=getSampleFacetHeight(pos);float opaFactor=uViewOpacity*max(uMinOpacity,clampMinSize(pos.x,frac.x,size.x,normalizedMinSize.x)*clampMinSize(pos.y,frac.y,size.y,normalizedMinSize.y));pos=applySampleFacet(pos);\n#if defined(ROUNDED_CORNERS) || defined(STROKED)\nfloat aaPadding=1.0/uDevicePixelRatio;float strokeWidth=getScaled_strokeWidth();float strokeOpacity=getScaled_strokeOpacity()*opaFactor;vec2 centeredFrac=frac-0.5;vec2 expand=centeredFrac*(strokeWidth+aaPadding)/uViewportSize;pos+=expand;vec2 sizeInPixels=size*uViewportSize;vPosInPixels=(centeredFrac+expand/size)*sizeInPixels;vHalfSizeInPixels=sizeInPixels/2.0;vCornerRadii=min(cornerRadii,min(vHalfSizeInPixels.x,vHalfSizeInPixels.y));vHalfStrokeWidth=strokeWidth/2.0;vStrokeColor=vec4(getScaled_stroke()*strokeOpacity,strokeOpacity);\n#endif\ngl_Position=unitToNdc(pos);float fillOpacity=getScaled_fillOpacity()*opaFactor;vFillColor=vec4(getScaled_fill()*fillOpacity,fillOpacity);setupPicking();}";
+const shader = "out lowp vec4 vFillColor;out lowp vec4 vStrokeColor;out float vHalfStrokeWidth;out vec4 vCornerRadii;\n#if defined(ROUNDED_CORNERS) || defined(STROKED) || defined(SHADOW)\nout vec2 vPosInPixels;\n#endif\nout vec2 vHalfSizeInPixels;/***Clamps the minimumSize and returns an opacity that reflects the amount of clamping.*/float clampMinSize(inout float pos,float frac,float size,float minSize){if(minSize>0.0&&abs(size)<minSize){pos+=(frac-0.5)*(minSize*sign(size)-size);return abs(size)/minSize;}return 1.0;}void sort(inout float a,inout float b){if(a>b){float tmp=b;b=a;a=tmp;}}/***The vertex position wrt the rectangle specified by(x,x2,y,y2).*[0,0]=[x,y],[1,1]=[x2,y2].*The x or y component may contain fractional values if the rectangle*have been tessellated.*/vec2 getVertexPos(){int index=gl_VertexID % 6;return vec2(index==0||index==1||index==3 ? 0.0 : 1.0,index==0||index==1||index==2 ? 0.0 : 1.0);}void main(void){vec2 frac=getVertexPos();vec2 normalizedMinSize=vec2(uMinWidth,uMinHeight)/uViewportSize;vec4 cornerRadii=vec4(uCornerRadiusTopRight,uCornerRadiusBottomRight,uCornerRadiusTopLeft,uCornerRadiusBottomLeft);float x=getScaled_x();float x2=getScaled_x2();float y=getScaled_y();float y2=getScaled_y2();sort(x,x2);sort(y,y2);float clampMargin=1.0;vec2 pos1=vec2(clamp(x,0.0-clampMargin,1.0+clampMargin),y);vec2 pos2=vec2(clamp(x2,0.0-clampMargin,1.0+clampMargin),y2);vec2 size=pos2-pos1;if(size.x<=0.0||size.y<=0.0){gl_Position=vec4(0.0,0.0,0.0,1.0);return;}vec2 pos=pos1+frac*size;size.y*=getSampleFacetHeight(pos);float opaFactor=uViewOpacity*max(uMinOpacity,clampMinSize(pos.x,frac.x,size.x,normalizedMinSize.x)*clampMinSize(pos.y,frac.y,size.y,normalizedMinSize.y));pos=applySampleFacet(pos);\n#if defined(ROUNDED_CORNERS) || defined(STROKED) || defined(SHADOW)\nfloat aaPadding=1.0/uDevicePixelRatio;float shadowPadding=uShadowBlur+max(abs(uShadowOffsetX),abs(uShadowOffsetY));float strokeWidth=getScaled_strokeWidth();float strokeOpacity=getScaled_strokeOpacity()*opaFactor;vec2 centeredFrac=frac-0.5;vec2 expand=centeredFrac*(strokeWidth+aaPadding+shadowPadding*2.0)/uViewportSize;pos+=expand;vec2 sizeInPixels=size*uViewportSize;vPosInPixels=(centeredFrac+expand/size)*sizeInPixels;vHalfSizeInPixels=sizeInPixels/2.0;vCornerRadii=min(cornerRadii,min(vHalfSizeInPixels.x,vHalfSizeInPixels.y));vHalfStrokeWidth=strokeWidth/2.0;vStrokeColor=vec4(getScaled_stroke()*strokeOpacity,strokeOpacity);\n#endif\ngl_Position=unitToNdc(pos);float fillOpacity=getScaled_fillOpacity()*opaFactor;vFillColor=vec4(getScaled_fill()*fillOpacity,fillOpacity);setupPicking();}";
 export default shader;

package/dist/src/selection/selection.d.ts

@@ -8,6 +8,12 @@ export function createSinglePointSelection(datum: import("../data/flowNode.js").
  * @returns {import("../types/selectionTypes.js").MultiPointSelection}
  */
 export function createMultiPointSelection(data?: import("../data/flowNode.js").Datum[]): import("../types/selectionTypes.js").MultiPointSelection;
+/**
+ *
+ * @param {import("../spec/channel.js").ChannelWithScale[]} channels
+ * @returns {import("../types/selectionTypes.js").IntervalSelection}
+ */
+export function createIntervalSelection(channels: import("../spec/channel.js").ChannelWithScale[]): import("../types/selectionTypes.js").IntervalSelection;
 /**
  * Updates the backing data and returns a new instance of the selection object.
  * A new instance is required to trigger reactivity in parameters.
@@ -32,9 +38,9 @@ export function makeSelectionTestExpression(params: {
 }): string;
 /**
  * @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: import("../types/selectionTypes.js").Selection): selection is import("../types/selectionTypes.js").RangeSelection;
+export function isIntervalSelection(selection: import("../types/selectionTypes.js").Selection): selection is import("../types/selectionTypes.js").IntervalSelection;
 /**
  * @param {import("../types/selectionTypes.js").Selection} selection
  * @returns {selection is import("../types/selectionTypes.js").SinglePointSelection}
@@ -60,4 +66,23 @@ export function asSelectionConfig(typeOrConfig: import("../spec/parameter.js").S
  * @returns {config is import("../spec/parameter.js").PointSelectionConfig}
  */
 export function isPointSelectionConfig(config: import("../spec/parameter.js").SelectionConfig): config is import("../spec/parameter.js").PointSelectionConfig;
+/**
+ *
+ * @param {import("../spec/parameter.js").SelectionConfig} config
+ * @returns {config is import("../spec/parameter.js").IntervalSelectionConfig}
+ */
+export function isIntervalSelectionConfig(config: import("../spec/parameter.js").SelectionConfig): config is import("../spec/parameter.js").IntervalSelectionConfig;
+/**
+ * @param {import("../types/selectionTypes.js").IntervalSelection} selection
+ */
+export function isActiveIntervalSelection(selection: import("../types/selectionTypes.js").IntervalSelection): boolean;
+/**
+ * @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: IntervalSelection, point: IntervalPoint): boolean;
+export type IntervalSelection = import("../types/selectionTypes.js").IntervalSelection;
+export type IntervalPoint = Partial<Record<keyof IntervalSelection["intervals"], number>>;
 //# sourceMappingURL=selection.d.ts.map

package/dist/src/selection/selection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../../src/selection/selection.js"],"names":[],"mappings":"AAGA;;;GAGG;AACH,kDAHW,OAAO,qBAAqB,EAAE,KAAK,GACjC,OAAO,4BAA4B,EAAE,oBAAoB,CAQrE;AAED;;;GAGG;AACH,iDAHW,OAAO,qBAAqB,EAAE,KAAK,EAAE,GACnC,OAAO,4BAA4B,EAAE,mBAAmB,CAQpE;AAED;;;;;;;GAOG;AACH,qDAJW,OAAO,4BAA4B,EAAE,mBAAmB,2BACxD,OAAO,CAAC,MAAM,CAAC,KAAK,GAAG,QAAQ,GAAG,QAAQ,EAAE,QAAQ,CAAC,OAAO,qBAAqB,EAAE,KAAK,CAAC,CAAC,CAAC,GACzF,OAAO,4BAA4B,EAAE,mBAAmB,CA2BpE;AAED;;;;GAIG;AACH,yCAJW,OAAO,4BAA4B,EAAE,SAAS,SAC9C,OAAO,qBAAqB,EAAE,KAAK,UACnC,OAAO,WAkBjB;AAED;;GAEG;AACH,oDAFW;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAC,UAM1C;AAED;;;GAGG;AACH,4CAHW,OAAO,4BAA4B,EAAE,SAAS,GAC5C,SAAS,IAAI,OAAO,4BAA4B,EAAE,cAAc,CAI5E;AAED;;;GAGG;AACH,kDAHW,OAAO,4BAA4B,EAAE,SAAS,GAC5C,SAAS,IAAI,OAAO,4BAA4B,EAAE,oBAAoB,CAIlF;AAED;;;GAGG;AACH,iDAHW,OAAO,4BAA4B,EAAE,SAAS,GAC5C,SAAS,IAAI,OAAO,4BAA4B,EAAE,mBAAmB,CAIjF;AAED;;;GAGG;AACH,gDAHW,OAAO,4BAA4B,EAAE,SAAS,GAC5C,SAAS,IAAI,OAAO,4BAA4B,EAAE,kBAAkB,CAIhF;AAED;;;GAGG;AACH,gDAHW,OAAO,sBAAsB,EAAE,qBAAqB,GAClD,OAAO,sBAAsB,EAAE,eAAe,CAiB1D;AAED;;;GAGG;AACH,+CAHW,OAAO,sBAAsB,EAAE,eAAe,GAC5C,MAAM,IAAI,OAAO,sBAAsB,EAAE,oBAAoB,CAIzE"}
+{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../../../src/selection/selection.js"],"names":[],"mappings":"AAGA;;;GAGG;AACH,kDAHW,OAAO,qBAAqB,EAAE,KAAK,GACjC,OAAO,4BAA4B,EAAE,oBAAoB,CAQrE;AAED;;;GAGG;AACH,iDAHW,OAAO,qBAAqB,EAAE,KAAK,EAAE,GACnC,OAAO,4BAA4B,EAAE,mBAAmB,CAQpE;AAED;;;;GAIG;AACH,kDAHW,OAAO,oBAAoB,EAAE,gBAAgB,EAAE,GAC7C,OAAO,4BAA4B,EAAE,iBAAiB,CASlE;AAED;;;;;;;GAOG;AACH,qDAJW,OAAO,4BAA4B,EAAE,mBAAmB,2BACxD,OAAO,CAAC,MAAM,CAAC,KAAK,GAAG,QAAQ,GAAG,QAAQ,EAAE,QAAQ,CAAC,OAAO,qBAAqB,EAAE,KAAK,CAAC,CAAC,CAAC,GACzF,OAAO,4BAA4B,EAAE,mBAAmB,CA2BpE;AAED;;;;GAIG;AACH,yCAJW,OAAO,4BAA4B,EAAE,SAAS,SAC9C,OAAO,qBAAqB,EAAE,KAAK,UACnC,OAAO,WAoBjB;AAED;;GAEG;AACH,oDAFW;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAC,UAM1C;AAED;;;GAGG;AACH,+CAHW,OAAO,4BAA4B,EAAE,SAAS,GAC5C,SAAS,IAAI,OAAO,4BAA4B,EAAE,iBAAiB,CAI/E;AAED;;;GAGG;AACH,kDAHW,OAAO,4BAA4B,EAAE,SAAS,GAC5C,SAAS,IAAI,OAAO,4BAA4B,EAAE,oBAAoB,CAIlF;AAED;;;GAGG;AACH,iDAHW,OAAO,4BAA4B,EAAE,SAAS,GAC5C,SAAS,IAAI,OAAO,4BAA4B,EAAE,mBAAmB,CAIjF;AAED;;;GAGG;AACH,gDAHW,OAAO,4BAA4B,EAAE,SAAS,GAC5C,SAAS,IAAI,OAAO,4BAA4B,EAAE,kBAAkB,CAIhF;AAED;;;GAGG;AACH,gDAHW,OAAO,sBAAsB,EAAE,qBAAqB,GAClD,OAAO,sBAAsB,EAAE,eAAe,CAiB1D;AAED;;;GAGG;AACH,+CAHW,OAAO,sBAAsB,EAAE,eAAe,GAC5C,MAAM,IAAI,OAAO,sBAAsB,EAAE,oBAAoB,CAIzE;AAED;;;;GAIG;AACH,kDAHW,OAAO,sBAAsB,EAAE,eAAe,GAC5C,MAAM,IAAI,OAAO,sBAAsB,EAAE,uBAAuB,CAI5E;AAED;;GAEG;AACH,qDAFW,OAAO,4BAA4B,EAAE,iBAAiB,WAMhE;AAED;;;;;GAKG;AACH,kDAHW,iBAAiB,SACjB,aAAa,WAUvB;gCAbY,OAAO,4BAA4B,EAAE,iBAAiB;4BACtD,OAAO,CAAC,MAAM,CAAC,MAAM,iBAAiB,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,CAAC"}

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

@@ -35,7 +35,7 @@ export interface SampleAttributeDef {
     /**
      * The attribute type. One of `"nominal"`, `"ordinal"`, or `"quantitative"`.
      */
-    type: Type; // TODO: Omit index/locus from available types
+    type?: Type; // TODO: Omit index/locus from available types
 
     /**
      * Scale definition for the (default) color channel
@@ -57,6 +57,11 @@ export interface SampleAttributeDef {
      * Whether the attribute is visible by default.
      */
     visible?: boolean;
+
+    /**
+     * The title of the attribute. Defaults to attribute name.
+     */
+    title?: string;
 }
 
 export interface SampleDef {
@@ -65,6 +70,12 @@ export interface SampleDef {
      */
     data?: Data;
 
+    /**
+     * If attributes form a hierarchy, specify the separator character to
+     * split the attribute names into paths.
+     */
+    attributeGroupSeparator?: string;
+
     /**
      * Explicitly specify the sample attributes.
      */

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

@@ -98,21 +98,6 @@ export default interface ViewContext {
 
     isViewSpec: (spec: any) => boolean;
 
-    /**
-     * @deprecated Use createOrImportView instead.
-     * @param spec
-     * @param layoutParent
-     * @param dataParent
-     * @param defaultName
-     * @returns
-     */
-    createView: (
-        spec: ViewSpec,
-        layoutParent?: ContainerView,
-        dataParent?: View,
-        defaultName?: string
-    ) => View;
-
     /**
      *
      * @param spec

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"}