@genome-spy/core 0.44.0 → 0.45.0

package/dist/src/marks/mark.js

@@ -40,7 +40,7 @@ import coalesceProperties from "../utils/propertyCoalescer.js";
 import { isScalar } from "../utils/variableTools.js";
 import { InternMap } from "internmap";
 import ViewError from "../view/viewError.js";
-import { isString } from "vega-util";
+import { isExprRef } from "../view/paramMediator.js";
 
 export const SAMPLE_FACET_UNIFORM = "SAMPLE_FACET_UNIFORM";
 export const SAMPLE_FACET_TEXTURE = "SAMPLE_FACET_TEXTURE";
@@ -221,6 +221,49 @@ export default class Mark {
         return encoding;
     }
 
+    /**
+     * Handles dynamic properties that are not bound to uniforms but need
+     * to trigger a graphics update, i.e., rebuild the vertex buffer.
+     *
+     * @param {(keyof MarkProps)[]} props
+     * @protected
+     */
+    setupExprRefsNeedingGraphicsUpdate(props) {
+        const channels = this.getSupportedChannels();
+        /** @type {Partial<MarkProps>} */
+        const exprProps = {};
+        for (const key of props) {
+            const prop = this.properties[key];
+            if (prop && isExprRef(prop)) {
+                const fn = this.unitView.paramMediator.createExpression(
+                    prop.expr
+                );
+                fn.addListener(() => {
+                    this.updateGraphicsData();
+                    this.unitView.context.animator.requestRender();
+                });
+                // @ts-ignore
+                if (!channels.includes(key)) {
+                    Object.defineProperty(exprProps, key, {
+                        get() {
+                            return fn();
+                        },
+                    });
+                } else {
+                    // Encoder takes care of evaluating the expression
+                    // N.B.: There are now two expression instances for the
+                    // same expression, which is no ideal
+                }
+            }
+        }
+        const originalProperties = this.properties;
+        // @ts-ignore
+        this.properties = coalesceProperties(
+            () => exprProps,
+            () => originalProperties
+        );
+    }
+
     /**
      * Returns the encoding spec supplemented with mark's default encodings
      *
@@ -644,10 +687,20 @@ export default class Mark {
      * @param {(x: Exclude<T, ExprRef>) => any} adjuster
      */
     registerMarkUniformValue(uniformName, propValue, adjuster = (x) => x) {
-        const setter = this.createMarkUniformSetter(uniformName);
+        const rawSetter = this.createMarkUniformSetter(uniformName);
+        const setter = (/** @type {any} */ value) => {
+            if (value == null) {
+                throw new Error(
+                    `Trying to set null/undefined value for uniform: ${uniformName}${
+                        isExprRef(propValue) ? `Expr: ${propValue.expr}` : ""
+                    }`
+                );
+            }
+            rawSetter(value);
+        };
 
         if (isExprRef(propValue)) {
-            const fn = this.unitView.context.paramBroker.createExpression(
+            const fn = this.unitView.paramMediator.createExpression(
                 propValue.expr
             );
 
@@ -1176,12 +1229,3 @@ class RangeMap extends InternMap {
         }
     }
 }
-
-// TODO: Find a better place for this function
-/**
- * @param {any} x
- * @returns {x is import("../spec/parameter.js").ExprRef}
- */
-export function isExprRef(x) {
-    return typeof x == "object" && x != null && "expr" in x && isString(x.expr);
-}

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

@@ -1,2 +1,2 @@
-const shader = "layout(std140)uniform Mark{/***The stroke should only grow inwards,e.g,the diameter/outline is not affected by the stroke width.*Thus,a point that has a zero size has no visible stroke. This allows strokes to be used with*geometric zoom,etc.*/uniform bool uInwardStroke;uniform lowp float uMaxRelativePointDiameter;uniform mediump float uScaleFactor;uniform mediump float uMaxPointSize;uniform mediump float uZoomLevel;uniform highp float uSemanticThreshold;uniform mediump float uGradientStrength;\n#pragma markUniforms\n};";
+const shader = "layout(std140)uniform Mark{/***The stroke should only grow inwards,e.g,the diameter/outline is not affected by the stroke width.*Thus,a point that has a zero size has no visible stroke. This allows strokes to be used with*geometric zoom,etc.*/uniform bool uInwardStroke;uniform mediump float uScaleFactor;uniform mediump float uZoomLevel;uniform highp float uSemanticThreshold;uniform mediump float uGradientStrength;\n#pragma markUniforms\n};";
 export default shader;

package/dist/src/marks/point.d.ts

@@ -1,11 +1,8 @@
 export default class PointMark extends Mark {
     sampledSemanticScores: Float32Array;
     _getGeometricScaleFactor(): number;
-    /**
-     * Returns the maximum size of the points in the data, before any scaling
-     */
-    _getMaxPointSize(): import("../spec/channel.js").Scalar;
     getSemanticThreshold(): number;
+    #private;
 }
 import Mark from "./mark.js";
 //# sourceMappingURL=point.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/marks/point.js"],"names":[],"mappings":"AAkBA;IAsGY,oCAMC;IA2CT,mCAQC;IAED;;OAEG;IACH,wDASC;IAED,+BAoBC;CAiDJ;iBA3PgB,WAAW"}
+{"version":3,"file":"point.d.ts","sourceRoot":"","sources":["../../../src/marks/point.js"],"names":[],"mappings":"AAmBA;IA0HY,oCAMC;IA+CT,mCAQC;IAED,+BAkBC;;CAgDJ;iBAnQgB,WAAW"}

package/dist/src/marks/point.js

@@ -10,6 +10,7 @@ import FRAGMENT_SHADER from "./point.fragment.glsl.js";
 import COMMON_SHADER from "./point.common.glsl.js";
 
 import Mark from "./mark.js";
+import { isExprRef } from "../view/paramMediator.js";
 import { sampleIterable } from "../data/transforms/sample.js";
 import { fixFill, fixStroke } from "./markUtils.js";
 
@@ -17,6 +18,8 @@ import { fixFill, fixStroke } from "./markUtils.js";
 const defaultEncoding = {};
 
 export default class PointMark extends Mark {
+    #semanticZoomFraction = () => 0;
+
     /**
      * @param {import("../view/unitView.js").default} unitView
      */
@@ -45,6 +48,24 @@ export default class PointMark extends Mark {
                 semanticZoomFraction: 0.02,
             })
         );
+
+        // TODO: This mess should be simplified
+        // TODO: createExpression should accept constant values or ExprRefs and allow
+        // easy registration of requestRender listeners
+        const szf = this.properties.semanticZoomFraction;
+        if (szf != null) {
+            if (isExprRef(szf)) {
+                const fn = this.unitView.paramMediator.createExpression(
+                    szf.expr
+                );
+                fn.addListener(() =>
+                    this.getContext().animator.requestRender()
+                );
+                this.#semanticZoomFraction = fn;
+            } else {
+                this.#semanticZoomFraction = () => szf;
+            }
+        }
     }
 
     getAttributes() {
@@ -143,11 +164,15 @@ export default class PointMark extends Mark {
 
         const props = this.properties;
 
-        setBlockUniforms(this.markUniformInfo, {
-            uInwardStroke: !!props.inwardStroke,
-            uGradientStrength: +props.fillGradientStrength,
-            uMaxRelativePointDiameter: 1 - 2 * props.sampleFacetPadding,
-        });
+        this.registerMarkUniformValue(
+            "uInwardStroke",
+            props.inwardStroke,
+            (x) => !!x
+        );
+        this.registerMarkUniformValue(
+            "uGradientStrength",
+            props.fillGradientStrength
+        );
     }
 
     updateGraphicsData() {
@@ -177,27 +202,11 @@ export default class PointMark extends Mark {
         );
     }
 
-    /**
-     * Returns the maximum size of the points in the data, before any scaling
-     */
-    _getMaxPointSize() {
-        const e = this.encoders.size;
-        if (e.constant) {
-            return e(null);
-        } else {
-            return /** @type {number[]} */ (e.scale.range()).reduce((a, b) =>
-                Math.max(a, b)
-            );
-        }
-    }
-
     getSemanticThreshold() {
         if (this.sampledSemanticScores) {
             const p = Math.max(
                 0,
-                1 -
-                    this.properties.semanticZoomFraction *
-                        this.unitView.getZoomLevel()
+                1 - this.#semanticZoomFraction() * this.unitView.getZoomLevel()
             );
             if (p <= 0) {
                 // The sampled scores may be missing the min/max values
@@ -222,7 +231,6 @@ export default class PointMark extends Mark {
         ops.push(() => {
             // TODO: Use bindUniformBlock if none of the uniform has changed
             setBlockUniforms(this.markUniformInfo, {
-                uMaxPointSize: this._getMaxPointSize(),
                 uScaleFactor: this._getGeometricScaleFactor(),
                 uSemanticThreshold: this.getSemanticThreshold(),
             });

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/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() {
@@ -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/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

@@ -162,7 +162,7 @@ export interface TextProps
      *
      * **Default value:** `""`
      */
-    text?: Scalar;
+    text?: Scalar | ExprRef;
 
     /**
      * The font size in pixels.
@@ -234,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`)
@@ -268,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 {
@@ -292,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.
@@ -300,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

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

@@ -23,6 +23,12 @@ export interface VariableParameter {
      */
     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.
      */
@@ -35,13 +41,6 @@ export interface VariableParameter {
 export type Element = string;
 
 export interface BindBase {
-    /**
-     * An optional CSS selector string indicating the parent element to which
-     * the input element should be added. By default, all input elements are
-     * added within the parent container of the Vega view.
-     */
-    element?: Element;
-
     /**
      * If defined, delays event handling until the specified milliseconds have
      * elapsed since the last event was fired.
@@ -54,6 +53,11 @@ export interface BindBase {
      * 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 {

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

@@ -14,14 +14,6 @@ interface RootConfig {
      */
     background?: string;
 
-    /**
-     * Dynamic variables that parameterize a visualization.
-     *
-     * For now, these are only supported in mark properties, i.e.,
-     * they are not supported in the filter and formula transforms (yet).
-     */
-    params?: VariableParameter[];
-
     /**
      * https://vega.github.io/vega-lite/docs/data.html#datasets
      */

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

@@ -9,6 +9,7 @@
  */
 
 import { Align, Baseline, FontStyle, FontWeight } from "./font.js";
+import { ExprRef } from "./parameter.js";
 
 export type TitleOrient = "none" | "left" | "right" | "top" | "bottom";
 export type TitleAnchor = null | "start" | "middle" | "end";
@@ -18,7 +19,7 @@ export interface Title {
     /**
      * The title text.
      */
-    text: string;
+    text: string | ExprRef;
 
     /**
      * A mark style property to apply to the title text mark. If not specified, a default style of `"group-title"` is applied.
@@ -54,7 +55,7 @@ export interface Title {
     /**
      * Angle in degrees of title and subtitle text.
      */
-    angle?: number;
+    angle?: number | ExprRef;
 
     /**
      * Vertical text baseline for title and subtitle text. One of `"alphabetic"` (default), `"top"`, `"middle"`, or `"bottom"`.
@@ -75,7 +76,7 @@ export interface Title {
     /**
      * Text color for title text.
      */
-    color?: string;
+    color?: string | ExprRef;
 
     /**
      * Font name for title text.
@@ -87,7 +88,7 @@ export interface Title {
      *
      * @minimum 0
      */
-    fontSize?: number;
+    fontSize?: number | ExprRef;
 
     /**
      * Font style for title text.

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

@@ -15,6 +15,7 @@ import {
 import { ExprRef } from "./parameter.js";
 import { Title } from "./title.js";
 import { SampleSpec } from "./sampleView.js";
+import { VariableParameter } from "./parameter.js";
 
 export interface SizeDef {
     /** Size in pixels */
@@ -108,6 +109,11 @@ export interface ViewSpecBase extends ResolveSpec {
      */
     padding?: PaddingConfig;
 
+    /**
+     * Dynamic variables that parameterize a visualization.
+     */
+    params?: VariableParameter[];
+
     data?: Data;
     transform?: TransformParams[];
     encoding?: Encoding;
@@ -212,14 +218,23 @@ export type ViewSpec =
     | ConcatSpec
     | SampleSpec;
 
-export interface ImportConfig {
-    name?: string;
+export interface ImportParams {
     url?: string;
-    params?: object;
+
+    /**
+     * Name for the imported view. Overrides the name defined in the imported spec.
+     */
+    name?: string;
+
+    /**
+     * Dynamic variables that parameterize a visualization. Parameters defined here
+     * override the parameters defined in the imported spec.
+     */
+    params?: VariableParameter[] | Record<string, any>;
 }
 
 export interface ImportSpec {
-    import: ImportConfig;
+    import: ImportParams;
 }
 
 export interface ConcatBase extends ViewSpecBase {

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,0jGA4IG"}
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,6iIA4LE"}