@genome-spy/core 0.43.3 → 0.45.0

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

@@ -1,2 +1,2 @@
-const shader = "out float vRadius;out float vRadiusWithPadding;out lowp vec4 vFillColor;out lowp vec4 vStrokeColor;out lowp float vShape;out lowp float vHalfStrokeWidth;out mat2 vRotationMatrix;const float CIRCLE=0.0;const float SQUARE=1.0;const float CROSS=2.0;const float DIAMOND=3.0;const float TRIANGLE_UP=4.0;const float TRIANGLE_RIGHT=5.0;const float TRIANGLE_DOWN=6.0;const float TRIANGLE_LEFT=7.0;const float TICK_UP=8.0;const float TICK_RIGHT=9.0;const float TICK_DOWN=10.0;const float TICK_LEFT=11.0;float computeSemanticThresholdFactor(){return getScaled_semanticScore()>=uSemanticThreshold ? 1.0 : 0.0;}/***Computes a scaling factor for the points in a sample-faceted view.*/float getDownscaleFactor(vec2 pos){if(!isFacetedSamples()){return 1.0;}float sampleFacetHeight=getSampleFacetHeight(pos);float maxPointDiameter=sqrt(uMaxPointSize);float factor=sampleFacetHeight*uViewportSize.y*uMaxRelativePointDiameter;return clamp(0.0,maxPointDiameter,factor)/maxPointDiameter;}vec2 getDxDy(){\n#if defined(dx_DEFINED) || defined(dy_DEFINED)\nreturn vec2(getScaled_dx(),getScaled_dy())/uViewportSize;\n#else\nreturn vec2(0.0,0.0);\n#endif\n}void main(void){float shapeAngle=0.0;float semanticThresholdFactor=computeSemanticThresholdFactor();if(semanticThresholdFactor<=0.0){gl_PointSize=0.0;gl_Position=vec4(100.0,0.0,0.0,0.0);return;}float size=getScaled_size();vec2 pos=vec2(getScaled_x(),getScaled_y())+getDxDy();gl_Position=unitToNdc(applySampleFacet(pos));float strokeWidth=getScaled_strokeWidth();float diameter=sqrt(size)*uScaleFactor*semanticThresholdFactor*getDownscaleFactor(pos);float opacity=uViewOpacity;if(strokeWidth<=0.0||uInwardStroke){float minDiameter=1.0/uDevicePixelRatio;if(diameter<minDiameter){opacity*=pow(diameter/minDiameter,2.5);diameter=minDiameter;}}float fillOpa=getScaled_fillOpacity()*opacity;float strokeOpa=getScaled_strokeOpacity()*opacity;vShape=getScaled_shape();bool circle=vShape==0.0;if(vShape>TICK_UP&&vShape<=TICK_LEFT){shapeAngle=(vShape-TICK_UP)*90.0;vShape=TICK_UP;}else if(vShape>TRIANGLE_UP&&vShape<=TRIANGLE_LEFT){shapeAngle=(vShape-TRIANGLE_UP)*90.0;vShape=TRIANGLE_UP;}float angleInDegrees=getScaled_angle();float angle=-(shapeAngle+angleInDegrees)*PI/180.0;float sinTheta=sin(angle);float cosTheta=cos(angle);vRotationMatrix=mat2(cosTheta,sinTheta,-sinTheta,cosTheta);float roomForRotation=circle ? 1.0 : sin(mod(angle,PI/2.0)+PI/4.0)/sin(PI/4.0);float aaPadding=1.0/uDevicePixelRatio;float rotationPadding=(diameter*roomForRotation)-diameter;float strokePadding=uInwardStroke ? 0.0 : strokeWidth*(circle ? 1.0 : sqrt(3.0));float padding=rotationPadding+strokePadding+aaPadding;gl_PointSize=(diameter+padding)*uDevicePixelRatio;vRadius=diameter/2.0;vRadiusWithPadding=vRadius+padding/2.0;vHalfStrokeWidth=strokeWidth/2.0;vFillColor=vec4(getScaled_fill()*fillOpa,fillOpa);vStrokeColor=vec4(getScaled_stroke()*strokeOpa,strokeOpa);setupPicking();}";
+const shader = "out float vRadius;out float vRadiusWithPadding;out lowp vec4 vFillColor;out lowp vec4 vStrokeColor;out lowp float vShape;out lowp float vHalfStrokeWidth;out mat2 vRotationMatrix;const float CIRCLE=0.0;const float SQUARE=1.0;const float CROSS=2.0;const float DIAMOND=3.0;const float TRIANGLE_UP=4.0;const float TRIANGLE_RIGHT=5.0;const float TRIANGLE_DOWN=6.0;const float TRIANGLE_LEFT=7.0;const float TICK_UP=8.0;const float TICK_RIGHT=9.0;const float TICK_DOWN=10.0;const float TICK_LEFT=11.0;float computeSemanticThresholdFactor(){return getScaled_semanticScore()>=uSemanticThreshold ? 1.0 : 0.0;}vec2 getDxDy(){\n#if defined(dx_DEFINED) || defined(dy_DEFINED)\nreturn vec2(getScaled_dx(),getScaled_dy())/uViewportSize;\n#else\nreturn vec2(0.0,0.0);\n#endif\n}void main(void){float shapeAngle=0.0;float semanticThresholdFactor=computeSemanticThresholdFactor();if(semanticThresholdFactor<=0.0){gl_PointSize=0.0;gl_Position=vec4(100.0,0.0,0.0,0.0);return;}float size=getScaled_size();vec2 pos=vec2(getScaled_x(),getScaled_y())+getDxDy();gl_Position=unitToNdc(applySampleFacet(pos));float strokeWidth=getScaled_strokeWidth();float diameter=sqrt(size)*uScaleFactor*semanticThresholdFactor;float opacity=uViewOpacity;if(strokeWidth<=0.0||uInwardStroke){float minDiameter=1.0/uDevicePixelRatio;if(diameter<minDiameter){opacity*=pow(diameter/minDiameter,2.5);diameter=minDiameter;}}float fillOpa=getScaled_fillOpacity()*opacity;float strokeOpa=getScaled_strokeOpacity()*opacity;vShape=getScaled_shape();bool circle=vShape==0.0;if(vShape>TICK_UP&&vShape<=TICK_LEFT){shapeAngle=(vShape-TICK_UP)*90.0;vShape=TICK_UP;}else if(vShape>TRIANGLE_UP&&vShape<=TRIANGLE_LEFT){shapeAngle=(vShape-TRIANGLE_UP)*90.0;vShape=TRIANGLE_UP;}float angleInDegrees=getScaled_angle();float angle=-(shapeAngle+angleInDegrees)*PI/180.0;float sinTheta=sin(angle);float cosTheta=cos(angle);vRotationMatrix=mat2(cosTheta,sinTheta,-sinTheta,cosTheta);float roomForRotation=circle ? 1.0 : sin(mod(angle,PI/2.0)+PI/4.0)/sin(PI/4.0);float aaPadding=1.0/uDevicePixelRatio;float rotationPadding=(diameter*roomForRotation)-diameter;float strokePadding=uInwardStroke ? 0.0 : strokeWidth*(circle ? 1.0 : sqrt(3.0));float padding=rotationPadding+strokePadding+aaPadding;gl_PointSize=(diameter+padding)*uDevicePixelRatio;vRadius=diameter/2.0;vRadiusWithPadding=vRadius+padding/2.0;vHalfStrokeWidth=strokeWidth/2.0;vFillColor=vec4(getScaled_fill()*fillOpa,fillOpa);vStrokeColor=vec4(getScaled_stroke()*strokeOpa,strokeOpa);setupPicking();}";
 export default shader;

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

@@ -0,0 +1,2 @@
+const shader = "layout(std140)uniform Mark{uniform float uMinWidth;uniform float uMinHeight;uniform float uMinOpacity;uniform float uCornerRadiusTopRight;uniform float uCornerRadiusBottomRight;uniform float uCornerRadiusTopLeft;uniform float uCornerRadiusBottomLeft;\n#pragma markUniforms\n};";
+export default shader;

package/dist/src/marks/rect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rect.d.ts","sourceRoot":"","sources":["../../../src/marks/rect.js"],"names":[],"mappings":"AAYA;IA0NI;;;;;;;;;;OAUG;IACH,8BALW,GAAG,KACH,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAyBf;;CACJ;iBAnQgB,WAAW"}
+{"version":3,"file":"rect.d.ts","sourceRoot":"","sources":["../../../src/marks/rect.js"],"names":[],"mappings":"AAaA;IAyNI;;;;;;;;;;OAUG;IACH,8BALW,GAAG,KACH,OAAO,oBAAoB,EAAE,MAAM,GACjC,GAAG,CAyBf;;CACJ;iBAlQgB,WAAW"}

package/dist/src/marks/rect.js

@@ -1,6 +1,7 @@
 import { drawBufferInfo, setBuffersAndAttributes } from "twgl.js";
 import VERTEX_SHADER from "./rect.vertex.glsl.js";
 import FRAGMENT_SHADER from "./rect.fragment.glsl.js";
+import COMMON_SHADER from "./rect.common.glsl.js";
 import { RectVertexBuilder } from "../gl/dataToVertices.js";
 
 import Mark from "./mark.js";
@@ -140,11 +141,10 @@ export default class RectMark extends Mark {
             defines.push("STROKED");
         }
 
-        this.createAndLinkShaders(
-            VERTEX_SHADER,
-            FRAGMENT_SHADER,
-            defines.map((d) => "#define " + d)
-        );
+        this.createAndLinkShaders(VERTEX_SHADER, FRAGMENT_SHADER, [
+            COMMON_SHADER,
+            ...defines.map((d) => "#define " + d),
+        ]);
     }
 
     finalizeGraphicsInitialization() {
@@ -154,22 +154,22 @@ export default class RectMark extends Mark {
 
         const props = this.properties;
 
-        this.registerMarkUniform("uMinWidth", props.minWidth);
-        this.registerMarkUniform("uMinHeight", props.minHeight);
-        this.registerMarkUniform("uMinOpacity", props.minOpacity);
-        this.registerMarkUniform(
+        this.registerMarkUniformValue("uMinWidth", props.minWidth);
+        this.registerMarkUniformValue("uMinHeight", props.minHeight);
+        this.registerMarkUniformValue("uMinOpacity", props.minOpacity);
+        this.registerMarkUniformValue(
             "uCornerRadiusTopRight",
             props.cornerRadiusTopRight ?? props.cornerRadius ?? 0
         );
-        this.registerMarkUniform(
+        this.registerMarkUniformValue(
             "uCornerRadiusBottomRight",
             props.cornerRadiusBottomRight ?? props.cornerRadius ?? 0
         );
-        this.registerMarkUniform(
+        this.registerMarkUniformValue(
             "uCornerRadiusTopLeft",
             props.cornerRadiusTopLeft ?? props.cornerRadius ?? 0
         );
-        this.registerMarkUniform(
+        this.registerMarkUniformValue(
             "uCornerRadiusBottomLeft",
             props.cornerRadiusBottomLeft ?? props.cornerRadius ?? 0
         );

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

@@ -1,2 +1,2 @@
-const shader = "uniform Mark{uniform float uMinWidth;uniform float uMinHeight;uniform float uMinOpacity;uniform float uCornerRadiusTopRight;uniform float uCornerRadiusBottomRight;uniform float uCornerRadiusTopLeft;uniform float uCornerRadiusBottomLeft;};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,uCornerRadiusBottomLeft,uCornerRadiusTopLeft);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)\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,uCornerRadiusBottomLeft,uCornerRadiusTopLeft);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();}";
 export default shader;

package/dist/src/marks/rule.common.glsl.js

@@ -1,2 +1,2 @@
-const shader = "uniform Mark{uniform mediump float uMinLength;uniform mediump float uDashTextureSize;uniform lowp int uStrokeCap;uniform mediump float uStrokeDashOffset;};";
+const shader = "layout(std140)uniform Mark{uniform mediump float uMinLength;uniform mediump float uDashTextureSize;uniform lowp int uStrokeCap;uniform mediump float uStrokeDashOffset;\n#pragma markUniforms\n};";
 export default shader;

package/dist/src/marks/rule.js

@@ -150,8 +150,8 @@ export default class RuleMark extends Mark {
 
         const props = this.properties;
 
-        this.registerMarkUniform("uMinLength", props.minLength);
-        this.registerMarkUniform(
+        this.registerMarkUniformValue("uMinLength", props.minLength);
+        this.registerMarkUniformValue(
             "uStrokeCap",
             props.strokeCap ?? "butt",
             (cap) => ["butt", "square", "round"].indexOf(cap)

package/dist/src/marks/text.common.glsl.js

@@ -1,2 +1,2 @@
-const shader = "uniform Mark{uniform mediump float uSdfNumerator;uniform mediump vec2 uD;uniform mediump vec4 uViewportEdgeFadeWidth;uniform mediump vec4 uViewportEdgeFadeDistance;uniform bool uSqueeze;uniform bool uLogoLetter;uniform lowp ivec2 uAlign;uniform mediump float uPaddingX;uniform bool uFlushX;uniform mediump float uPaddingY;uniform bool uFlushY;};";
+const shader = "layout(std140)uniform Mark{uniform mediump float uSdfNumerator;uniform mediump vec2 uD;uniform mediump vec4 uViewportEdgeFadeWidth;uniform mediump vec4 uViewportEdgeFadeDistance;uniform bool uSqueeze;uniform bool uLogoLetter;uniform lowp ivec2 uAlign;uniform mediump float uPaddingX;uniform bool uFlushX;uniform mediump float uPaddingY;uniform bool uFlushY;\n#pragma markUniforms\n};";
 export default shader;

package/dist/src/marks/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AAgCA;;;;;;;GAOG;AACH;IAsDQ,oDAMmD;CAgM1D;iBAvRgB,WAAW"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/marks/text.js"],"names":[],"mappings":"AAgCA;;;;;;;GAOG;AACH;IAyDQ,oDAMmD;CAqM1D;iBA/RgB,WAAW"}

package/dist/src/marks/text.js

@@ -39,6 +39,9 @@ const baselines = {
  * - Google's web fonts as SDFs: https://github.com/etiennepinchon/aframe-fonts
  */
 export default class TextMark extends Mark {
+    /**
+     * @typedef {import("../spec/mark.js").MarkProps} MarkProps
+     */
     /**
      * @param {import("../view/unitView.js").default} unitView
      */
@@ -99,6 +102,12 @@ export default class TextMark extends Mark {
                   this.properties.fontWeight
               )
             : unitView.context.fontManager.getDefaultFont();
+
+        this.setupExprRefsNeedingGraphicsUpdate([
+            "text",
+            "fitToBand",
+            "logoLetters",
+        ]);
     }
 
     getAttributes() {
@@ -160,9 +169,9 @@ export default class TextMark extends Mark {
 
         const props = this.properties;
 
-        this.registerMarkUniform(
+        this.registerMarkUniformValue(
             "uSdfNumerator",
-            /** @type {import("../spec/mark.js").ExprRef | number} */
+            /** @type {import("../spec/parameter.js").ExprRef | number} */
             ({ expr: "devicePixelRatio" }),
             (dpr) => {
                 let q = 0.35; // TODO: Ensure that this makes sense. Now chosen by trial & error
@@ -176,19 +185,18 @@ export default class TextMark extends Mark {
             }
         );
 
-        // TODO: Use uniform block.
-        setBlockUniforms(this.markUniformInfo, {
-            uPaddingX: props.paddingX,
-            uPaddingY: props.paddingY,
-            uFlushX: !!props.flushX,
-            uFlushY: !!props.flushY,
+        this.registerMarkUniformValue("uPaddingX", props.paddingX);
+        this.registerMarkUniformValue("uPaddingY", props.paddingY);
+        this.registerMarkUniformValue("uFlushX", props.flushX, (x) => !!x);
+        this.registerMarkUniformValue("uFlushY", props.flushY, (x) => !!x);
+        this.registerMarkUniformValue("uSqueeze", props.squeeze, (x) => !!x);
 
+        setBlockUniforms(this.markUniformInfo, {
             uAlign: [alignments[props.align], baselines[props.baseline]],
 
             uD: [props.dx, -props.dy],
 
             uLogoLetter: !!props.logoLetters,
-            uSqueeze: !!props.squeeze,
 
             uViewportEdgeFadeWidth: [
                 props.viewportEdgeFadeWidthTop,

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

@@ -8,11 +8,12 @@
  * BSD-3-Clause License: https://github.com/vega/vega-lite/blob/master/LICENSE
  */
 
+import { ExprRef } from "./parameter.js";
 import { Scale } from "./scale.js";
 import { GenomeAxis } from "./axis.js";
 
 export type Scalar = string | number | boolean;
-export type Value = Scalar | null;
+export type Value = Scalar | ExprRef | null;
 
 export type FieldName = string;
 export type Field = FieldName;
@@ -149,7 +150,7 @@ export interface ValueDefBase<V extends Value = Scalar> {
     /**
      * A constant value in visual domain (e.g., `"red"` / `"#0099ff"`, values between `0` to `1` for opacity).
      */
-    value: V;
+    value: V | ExprRef;
 }
 
 export type ValueDef<V extends Value = Scalar> = ValueDefBase<V> & TitleMixins;
@@ -158,7 +159,7 @@ export interface DatumDefBase {
     /**
      * A constant value in data domain.
      */
-    datum?: Scalar;
+    datum?: Scalar | ExprRef;
 }
 
 export type DatumDef = DatumDefBase & TitleMixins;

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

@@ -13,6 +13,7 @@
  */
 import { Axis } from "./axis.js";
 import { FieldName, PrimaryPositionalChannel } from "./channel.js";
+import { ExprRef } from "./parameter.js";
 
 export type ParseValue =
     | null
@@ -123,7 +124,7 @@ 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[];
+    url: string | string[] | ExprRef;
 }
 
 export interface InlineData extends DataBase {
@@ -169,24 +170,24 @@ export interface SequenceParams {
     /**
      * The starting value of the sequence (inclusive).
      */
-    start: number;
+    start: number | ExprRef;
     /**
      * The ending value of the sequence (exclusive).
      */
-    stop: number;
+    stop: number | ExprRef;
     /**
      * The step value between sequence entries.
      *
      * __Default value:__ `1`
      */
-    step?: number;
+    step?: number | ExprRef;
 
     /**
      * The name of the generated sequence field.
      *
      * __Default value:__ `"data"`
      */
-    as?: FieldName;
+    as?: FieldName | ExprRef;
 }
 
 export interface LazyData {
@@ -209,7 +210,7 @@ export interface DebouncedData {
      *
      * __Default value:__ `200`
      */
-    debounce?: number;
+    debounce?: number | ExprRef;
 
     /**
      * The debounce mode for data updates. If set to `"domain"`, domain change
@@ -286,14 +287,14 @@ export interface BigWigData extends DebouncedData {
     /**
      * URL of the BigWig file.
      */
-    url: string;
+    url: string | ExprRef;
 
     /**
      * The approximate minimum width of each data bin, in pixels.
      *
      * __Default value:__ `2`
      */
-    pixelsPerBin?: number;
+    pixelsPerBin?: number | ExprRef;
 }
 
 export interface BigBedData extends DebouncedData {
@@ -309,7 +310,7 @@ export interface BigBedData extends DebouncedData {
     /**
      * URL of the BigBed file.
      */
-    url: string;
+    url: string | ExprRef;
 
     /**
      * Size of each chunk when fetching the BigBed file. Data is only fetched
@@ -317,7 +318,7 @@ export interface BigBedData extends DebouncedData {
      *
      * __Default value:__ `1000000`
      */
-    windowSize?: number;
+    windowSize?: number | ExprRef;
 }
 
 export interface BamData extends DebouncedData {

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

@@ -1,35 +1,27 @@
 import { Scalar } from "./channel.js";
+import { ExprRef } from "./parameter.js";
 import { Align, Baseline, FontStyle, FontWeight } from "./font.js";
 import { Tooltip } from "./tooltip.js";
 
-// TODO: This may not be the best place for this type.
-// Also, this is now similar to the ExprDef type in channel.d.ts
-export interface ExprRef {
-    /**
-     * The expression string.
-     */
-    expr: string;
-}
-
 export type MarkType = "rect" | "point" | "rule" | "text" | "link";
 
 export interface FillAndStrokeProps {
     /** The fill color */
-    fill?: string;
+    fill?: string | ExprRef;
 
     /** The fill opacity. Value between [0, 1]. */
-    fillOpacity?: number;
+    fillOpacity?: number | ExprRef;
 
     /** The stroke color */
-    stroke?: string;
+    stroke?: string | ExprRef;
 
     /** The stroke opacity. Value between [0, 1]. */
-    strokeOpacity?: number;
+    strokeOpacity?: number | ExprRef;
 }
 
 export interface SecondaryPositionProps {
-    x2?: number;
-    y2?: number;
+    x2?: number | ExprRef;
+    y2?: number | ExprRef;
 }
 
 export interface AngleProps {
@@ -38,7 +30,7 @@ export interface AngleProps {
      *
      * **Default value:** `0`
      */
-    angle?: number;
+    angle?: number | ExprRef;
 }
 
 /**
@@ -170,14 +162,14 @@ export interface TextProps
      *
      * **Default value:** `""`
      */
-    text?: Scalar;
+    text?: Scalar | ExprRef;
 
     /**
      * The font size in pixels.
      *
      * **Default value:** `11`
      */
-    size?: number;
+    size?: number | ExprRef;
 
     /**
      * The font typeface. GenomeSpy uses [SDF](https://github.com/Chlumsky/msdfgen)
@@ -242,33 +234,33 @@ export interface TextProps
      *
      * **Default value:** `false`
      */
-    fitToBand?: boolean;
+    fitToBand?: boolean | ExprRef;
 
     /**
      * The horizontal padding, in pixels, when the `x2` channel is used for ranged text.
      *
      * **Default value:** `0`
      */
-    paddingX?: number;
+    paddingX?: number | ExprRef;
 
     /**
      * The vertical padding, in pixels, when the `y2` channel is used for ranged text.
      *
      * **Default value:** `0`
      */
-    paddingY?: number;
+    paddingY?: number | ExprRef;
 
     /**
      * If true, the text is kept inside the viewport when the range of `x` and `x2`
      * intersect the viewport.
      */
-    flushX?: boolean;
+    flushX?: boolean | ExprRef;
 
     /**
      * If true, the text is kept inside the viewport when the range of `y` and `y2`
      * intersect the viewport.
      */
-    flushY?: boolean;
+    flushY?: boolean | ExprRef;
 
     /**
      * If the `squeeze` property is true and secondary positional channels (`x2` and/or `y2`)
@@ -276,12 +268,12 @@ export interface TextProps
      *
      * **Default value:** `true`
      */
-    squeeze?: boolean;
+    squeeze?: boolean | ExprRef;
 
     /**
      * Stretch letters so that they can be used with [sequence logos](https://en.wikipedia.org/wiki/Sequence_logo), etc...
      */
-    logoLetters?: boolean;
+    logoLetters?: boolean | ExprRef;
 }
 
 export interface PointProps extends AngleProps {
@@ -300,7 +292,7 @@ export interface PointProps extends AngleProps {
      *
      * **Default value:** `false`
      */
-    inwardStroke?: boolean;
+    inwardStroke?: boolean | ExprRef;
 
     /**
      * Gradient strength controls the amount of the gradient eye-candy effect in the fill color.
@@ -308,24 +300,14 @@ export interface PointProps extends AngleProps {
      *
      * **Default value:** `0`
      */
-    fillGradientStrength?: number;
-
-    /**
-     * Padding between sample facet's upper/lower edge and the maximum point size. This property
-     * controls how tightly points are squeezed when facet's height is smaller than the maximum
-     * point size. The unit is a proportion of facet's height. The value must be between `0`
-     * and `0.5`. This property has no effect when sample faceting is not used.
-     *
-     * **Default value:** `0.1`
-     */
-    sampleFacetPadding?: number;
+    fillGradientStrength?: number | ExprRef;
 
     /**
      * TODO
      *
      * **Default value:** `0.02`
      */
-    semanticZoomFraction?: number;
+    semanticZoomFraction?: number | ExprRef;
 
     /**
      * Enables geometric zooming. The value is the base two logarithmic zoom level where the maximum
@@ -414,7 +396,7 @@ export interface LinkProps extends SecondaryPositionProps {
 }
 
 // TODO: Mark-specific configs
-export interface MarkConfig
+export interface MarkProps
     extends PointProps,
         RectProps,
         TextProps,
@@ -422,11 +404,11 @@ export interface MarkConfig
         LinkProps,
         FillAndStrokeProps {
     // Channels.
-    x?: number;
-    y?: number;
-    color?: string;
-    opacity?: number;
-    size?: number;
+    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`).
@@ -463,7 +445,7 @@ export interface MarkConfig
     /**
      * The stroke width in pixels.
      */
-    strokeWidth?: number;
+    strokeWidth?: number | ExprRef;
 
     /**
      * Minimum size for WebGL buffers (number of data items).
@@ -474,6 +456,6 @@ export interface MarkConfig
     minBufferSize?: number;
 }
 
-export interface MarkConfigAndType extends MarkConfig {
+export interface MarkConfigAndType extends MarkProps {
     type: MarkType;
 }

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

@@ -0,0 +1,127 @@
+export interface ExprRef {
+    /**
+     * The expression string.
+     */
+    expr: string;
+}
+
+// Adapted from: https://github.com/vega/vega-lite/blob/main/src/parameter.ts
+
+export interface VariableParameter {
+    /**
+     * A unique name for the variable parameter. Parameter names should be valid
+     * JavaScript identifiers: they should contain only alphanumeric characters
+     * (or "$", or "_") and may not start with a digit. Reserved keywords that
+     * may not be used as parameter names are: "datum".
+     */
+    name: string;
+
+    /**
+     * The [initial value](http://vega.github.io/vega-lite/docs/value.html) of the parameter.
+     *
+     * __Default value:__ `undefined`
+     */
+    value?: any;
+
+    /**
+     * An expression for the value of the parameter. This expression may include other parameters,
+     * in which case the parameter will automatically update in response to upstream parameter changes.
+     */
+    expr?: string;
+
+    /**
+     * Binds the parameter to an external input element such as a slider, selection list or radio button group.
+     */
+    bind?: Binding;
+}
+
+// ----------------------------------------------------------------------------
+// Adapted from: https://github.com/vega/vega/blob/main/packages/vega-typings/types/spec/bind.d.ts
+
+export type Element = string;
+
+export interface BindBase {
+    /**
+     * If defined, delays event handling until the specified milliseconds have
+     * elapsed since the last event was fired.
+     */
+    debounce?: number;
+
+    /**
+     * By default, the parameter name is used to label input elements.
+     * This `name` property can be used instead to specify a custom
+     * label for the bound parameter.
+     */
+    name?: string;
+
+    /**
+     * An optional description or help text that is shown below the input element.
+     */
+    description?: string;
+}
+
+export interface BindCheckbox extends BindBase {
+    input: "checkbox";
+}
+
+export interface BindRadioSelect extends BindBase {
+    input: "radio" | "select";
+    /**
+     * An array of options to select from.
+     */
+    options: any[];
+
+    /**
+     * An array of label strings to represent the `options` values. If
+     * unspecified, the `options` value will be coerced to a string and
+     * used as the label.
+     */
+    labels?: string[];
+}
+
+export interface BindRange extends BindBase {
+    input: "range";
+
+    /**
+     * Sets the minimum slider value. Defaults to the smaller of the signal value and `0`.
+     */
+    min?: number;
+
+    /**
+     * Sets the maximum slider value. Defaults to the larger of the signal value and `100`.
+     */
+    max?: number;
+
+    /**
+     * Sets the minimum slider increment. If undefined, the step size will be
+     * automatically determined based on the `min` and `max` values.
+     */
+    step?: number;
+}
+
+export interface BindDirect {
+    /**
+     * An input element that exposes a _value_ property and supports the
+     * [EventTarget](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget)
+     * interface, or a CSS selector string to such an element. When the element
+     * updates and dispatches an event, the _value_ property will be used as the
+     * new, bound signal value. When the signal updates independent of the
+     * element, the _value_ property will be set to the signal value and a new
+     * event will be dispatched on the element.
+     */
+    element: Element | EventTarget;
+
+    /**
+     * The event (default `"input"`) to listen for to track changes on the
+     * external element.
+     */
+    event?: string;
+
+    /**
+     * If defined, delays event handling until the specified milliseconds have
+     * elapsed since the last event was fired.
+     */
+    debounce?: number;
+}
+
+export type Binding = BindCheckbox | BindRadioSelect | BindRange;

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

@@ -1,4 +1,5 @@
 import { GenomeConfig } from "./genome.js";
+import { VariableParameter } from "./parameter.js";
 import { ViewSpec } from "./view.js";
 
 interface RootConfig {

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

@@ -9,6 +9,7 @@
  */
 
 import { ChromosomalLocus } from "./genome.js";
+import { ExprRef } from "./parameter.js";
 
 export type ScaleType =
     | "null"
@@ -94,7 +95,7 @@ export interface Scale {
      *
      * 2) Any directly specified `range` for `x` and `y` channels will be ignored. Range can be customized via the view's corresponding [size](https://vega.github.io/vega-lite/docs/size.html) (`width` and `height`).
      */
-    range?: number[] | string[] | string;
+    range?: number[] | string[] | string | ExprRef[];
 
     // ordinal