@genome-spy/core 0.67.0 → 0.68.0

package/dist/src/view/gridView/separatorView.js

@@ -0,0 +1,275 @@
+import UnitView from "../unitView.js";
+import { markViewAsNonAddressable } from "../viewSelectors.js";
+
+/**
+ * @typedef {"horizontal" | "vertical"} SeparatorDirection
+ */
+
+const DEFAULT_SEPARATOR_PROPS = Object.freeze({
+    size: 1,
+    color: "#ccc",
+    opacity: 1,
+    strokeDash: [4, 4],
+    strokeCap: "butt",
+});
+
+/**
+ * Draws separator rules for a single direction in a grid layout.
+ */
+export default class SeparatorView {
+    /** @type {SeparatorDirection} */
+    #direction;
+
+    /** @type {boolean} */
+    #includePlotMargin;
+
+    /** @type {UnitView} */
+    #view;
+
+    /** @type {import("../../data/flowNode.js").Datum[]} */
+    #data = [];
+
+    /** @type {number[]} */
+    #positions = [];
+
+    /** @type {{ x: number[]; y: number[] }} */
+    #domains = {
+        x: [0, 0],
+        y: [0, 0],
+    };
+
+    /**
+     * @param {{
+     *   direction: SeparatorDirection,
+     *   props: import("../../spec/view.js").SeparatorProps,
+     *   context: import("../../types/viewContext.js").default,
+     *   layoutParent: import("../containerView.js").default,
+     *   dataParent: import("../view.js").default,
+     *   getName: (prefix: string) => string
+     * }} options
+     */
+    constructor({
+        direction,
+        props,
+        context,
+        layoutParent,
+        dataParent,
+        getName,
+    }) {
+        this.#direction = direction;
+        this.#includePlotMargin = props.includePlotMargin ?? true;
+        const markProps = { ...props };
+        delete markProps.includePlotMargin;
+        this.#view = this.#createView(
+            markProps,
+            context,
+            layoutParent,
+            dataParent,
+            getName
+        );
+    }
+
+    /**
+     * @returns {UnitView}
+     */
+    get view() {
+        return this.#view;
+    }
+
+    /**
+     * @param {import("../layout/flexLayout.js").LocSize[]} flexCoords
+     * @param {number} count
+     * @param {import("../layout/rectangle.js").default} coords
+     * @param {(direction: "row" | "column", index: number) => number} getViewSlot
+     * @param {boolean} wrappingFacet
+     * @param {import("../layout/padding.js").default} overhang
+     */
+    update(flexCoords, count, coords, getViewSlot, wrappingFacet, overhang) {
+        this.#collectPositions(flexCoords, count, getViewSlot, wrappingFacet);
+        this.#updateDirection(coords, overhang);
+    }
+
+    /**
+     * @param {import("../renderingContext/viewRenderingContext.js").default} context
+     * @param {import("../layout/rectangle.js").default} coords
+     * @param {import("../../types/rendering.js").RenderingOptions} options
+     */
+    render(context, coords, options) {
+        this.#view.render(context, coords, options);
+    }
+
+    /**
+     * @param {import("../layout/flexLayout.js").LocSize[]} flexCoords
+     * @param {number} count
+     * @param {(direction: "row" | "column", index: number) => number} getViewSlot
+     * @param {boolean} wrappingFacet
+     */
+    #collectPositions(flexCoords, count, getViewSlot, wrappingFacet) {
+        this.#positions.length = 0;
+
+        if (count < 2) {
+            return;
+        }
+
+        const axis = this.#direction === "vertical" ? "column" : "row";
+        const spacingOffset = wrappingFacet ? 3 : 2;
+
+        for (let index = 1; index < count; index++) {
+            const viewSlot = getViewSlot(axis, index);
+            const spacingSlot = viewSlot - spacingOffset;
+            const spacing = flexCoords[spacingSlot];
+            const location = spacing ? spacing.location : 0;
+            const size = spacing ? spacing.size : 0;
+            this.#positions.push(location + size / 2);
+        }
+    }
+
+    /**
+     * @param {import("../layout/rectangle.js").default} coords
+     * @param {import("../layout/padding.js").default} overhang
+     */
+    #updateDirection(coords, overhang) {
+        const xStart = this.#includePlotMargin ? 0 : overhang.left;
+        const xEnd = this.#includePlotMargin
+            ? coords.width
+            : coords.width - overhang.right;
+        const yStart = this.#includePlotMargin ? 0 : overhang.bottom;
+        const yEnd = this.#includePlotMargin
+            ? coords.height
+            : coords.height - overhang.top;
+
+        this.#data.length = this.#positions.length;
+
+        for (let i = 0; i < this.#positions.length; i++) {
+            const pos = this.#positions[i];
+            const entry = this.#data[i] ?? {};
+
+            if (this.#direction === "vertical") {
+                entry.x = pos;
+                entry.x2 = pos;
+                entry.y = yStart;
+                entry.y2 = yEnd;
+            } else {
+                const y = coords.height - pos;
+                entry.x = xStart;
+                entry.x2 = xEnd;
+                entry.y = y;
+                entry.y2 = y;
+            }
+
+            this.#data[i] = entry;
+        }
+
+        const dataSource =
+            /** @type {import("../../data/sources/inlineSource.js").default} */ (
+                this.#view.flowHandle?.dataSource
+            );
+
+        if (!dataSource) {
+            return;
+        }
+
+        dataSource.updateDynamicData(this.#data);
+
+        this.#domains.x[1] = coords.width;
+        this.#domains.y[1] = coords.height;
+
+        const xScale = this.#view.getScaleResolution("x")?.getScale();
+        if (xScale) {
+            xScale.domain(this.#domains.x);
+        }
+
+        const yScale = this.#view.getScaleResolution("y")?.getScale();
+        if (yScale) {
+            yScale.domain(this.#domains.y);
+        }
+    }
+
+    /**
+     * @param {Omit<import("../../spec/view.js").SeparatorProps, "includePlotMargin">} props
+     * @param {import("../../types/viewContext.js").default} context
+     * @param {import("../containerView.js").default} layoutParent
+     * @param {import("../view.js").default} dataParent
+     * @param {(prefix: string) => string} getName
+     * @returns {UnitView}
+     */
+    #createView(props, context, layoutParent, dataParent, getName) {
+        const spec = createSeparatorSpec(props);
+        const name =
+            this.#direction === "horizontal"
+                ? getName("separatorHorizontal")
+                : getName("separatorVertical");
+
+        const view = new UnitView(
+            spec,
+            context,
+            layoutParent,
+            dataParent,
+            name,
+            {
+                blockEncodingInheritance: true,
+            }
+        );
+
+        markViewAsNonAddressable(view, { skipSubtree: true });
+
+        return view;
+    }
+}
+
+/**
+ * @param {import("../../spec/view.js").SeparatorProps | boolean | undefined} separator
+ * @returns {import("../../spec/view.js").SeparatorProps | null}
+ */
+export function resolveSeparatorProps(separator) {
+    if (!separator) {
+        return null;
+    }
+
+    const props =
+        separator === true
+            ? { ...DEFAULT_SEPARATOR_PROPS }
+            : { ...DEFAULT_SEPARATOR_PROPS, ...separator };
+
+    if (props.strokeDash === DEFAULT_SEPARATOR_PROPS.strokeDash) {
+        props.strokeDash = DEFAULT_SEPARATOR_PROPS.strokeDash.slice();
+    }
+
+    return props;
+}
+
+/**
+ * @param {Omit<import("../../spec/view.js").SeparatorProps, "includePlotMargin">} props
+ * @returns {import("../../spec/view.js").UnitSpec}
+ */
+function createSeparatorSpec(props) {
+    return {
+        configurableVisibility: false,
+        domainInert: true,
+        data: { values: [] },
+        resolve: {
+            scale: { x: "excluded", y: "excluded" },
+            axis: { x: "excluded", y: "excluded" },
+        },
+        mark: {
+            ...props,
+            type: "rule",
+            clip: props.clip ?? false,
+            tooltip: null,
+        },
+        encoding: {
+            x: {
+                field: "x",
+                type: "quantitative",
+                scale: { nice: false, zero: false },
+            },
+            y: {
+                field: "y",
+                type: "quantitative",
+                scale: { nice: false, zero: false },
+            },
+            x2: { field: "x2" },
+            y2: { field: "y2" },
+        },
+    };
+}

package/dist/src/view/layerView.js

@@ -37,13 +37,13 @@ export default class LayerView extends ContainerView {
     async initializeChildren() {
         this.#children = await Promise.all(
             this.spec.layer.map(
-                (childSpec, i) =>
+                (childSpec) =>
                     /** @type {(Promise<LayerView | import("./unitView.js").default>)} */ (
                         this.context.createOrImportView(
                             childSpec,
                             this,
                             this,
-                            "grid" + i,
+                            this.getNextAutoName("layer"),
                             (importedSpec) => {
                                 if (
                                     !isLayerSpec(importedSpec) &&
@@ -123,7 +123,7 @@ export default class LayerView extends ContainerView {
                 view.disposeSubtree();
                 this.#children.splice(index, 1);
             },
-            defaultName: (index) => "layer" + index,
+            defaultName: () => this.getNextAutoName("layer"),
         });
     }
 

package/dist/src/view/layout/flexLayout.d.ts

@@ -70,36 +70,6 @@ export function isSizeDef(spec: any): spec is SizeDef;
  * @returns {SizeDef}
  */
 export function parseSizeDef(size: "container" | number | SizeDef | import("../../spec/view.js").Step): SizeDef;
-/**
- * Interpolates between two LocSizes
- *
- * @param {LocSize} from
- * @param {LocSize} to
- * @param {function():number} ratio
- * @returns {LocSize}
- */
-export function interpolateLocSizes(from: LocSize, to: LocSize, ratio: () => number): LocSize;
-/**
- * Wraps a LocSize and allows scrolling.
- *
- * @param {LocSize} locSize
- * @param {number | function():number} offset
- * @returns {LocSize}
- */
-export function translateLocSize(locSize: LocSize, offset: number | (() => number)): LocSize;
-/**
- * Wraps a LocSize and allows scaling.
- *
- * @param {LocSize} locSize
- * @param {number | function():number} factor
- * @returns {LocSize}
- */
-export function scaleLocSize(locSize: LocSize, factor: number | (() => number)): LocSize;
-/**
- * @param {LocSize} locSize
- * @param {number} value
- */
-export function locSizeEncloses(locSize: LocSize, value: number): boolean;
 export class FlexDimensions {
     /**
      *

package/dist/src/view/layout/flexLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"flexLayout.d.ts","sourceRoot":"","sources":["../../../../src/view/layout/flexLayout.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wCALW,OAAO,EAAE,iBACT,MAAM,mDACN,WAAW,GACT,OAAO,EAAE,CAqGrB;AAED;;;;;GAKG;AACH,sCAHW,QAAQ,CAAC,OAAO,CAAC,gBACjB,WAAW,UAQrB;AAED;;;GAGG;AACH,sCAHW,QAAQ,CAAC,OAAO,CAAC,GACf,OAAO,CAWnB;AAED;;;GAGG;AACH,oCAFW,OAAO,EAAE,WAInB;AAED;;;GAGG;AACH,sCAFW,OAAO,EAAE;;;EASnB;AA4ED;;;;GAIG;AACH,uCAFW,OAAO,WAIjB;AAWD;;;;GAIG;AACH,gCAHW,GAAC,GACC,IAAI,IAAI,OAAO,CAI3B;AAED;;;;GAIG;AACH,mCAHW,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,oBAAoB,EAAE,IAAI,GAChE,OAAO,CAiBnB;AAID;;;;;;;GAOG;AACH,0CALW,OAAO,MACP,OAAO,SACP,MAAW,MAAM,GACf,OAAO,CA4BnB;AAED;;;;;;GAMG;AACH,0CAJW,OAAO,UACP,MAAM,IAAG,MAAW,MAAM,CAAA,GACxB,OAAO,CAanB;AAED;;;;;;GAMG;AACH,sCAJW,OAAO,UACP,MAAM,IAAG,MAAW,MAAM,CAAA,GACxB,OAAO,CAanB;AAED;;;GAGG;AACH,yCAHW,OAAO,SACP,MAAM,WAIhB;AA/MD;IACI;;;;OAIG;IACH,mBAHW,OAAO,UACP,OAAO,EAQjB;IAJG,gBAAgB;IAChB,wBAAkB;IAClB,gBAAgB;IAChB,yBAAoB;IAGxB;;;;OAIG;IACH,oBAFW,OAAO,cAAc,EAAE,OAAO,kBAIxC;IAED;;;;OAIG;IACH,yBAFW,OAAO,cAAc,EAAE,OAAO,kBAIxC;IAmBD;;;;OAIG;IACH,aAFa,OAAO,CAInB;;CACJ;AAED;;;;GAIG;AACH,2BAFU,OAAO,CAKd;AAEH,iDAGE;;;;;;;;SAlPQ,MAAM;;;;WACN,MAAM;;;;;;cAGN,MAAM;UACN,MAAM;;;;;;;;;;;;;;cAGN,MAAM;;;;;uBACN,MAAM;;;;aAEN,MAAM;;;;cACN,OAAO"}
+{"version":3,"file":"flexLayout.d.ts","sourceRoot":"","sources":["../../../../src/view/layout/flexLayout.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wCALW,OAAO,EAAE,iBACT,MAAM,mDACN,WAAW,GACT,OAAO,EAAE,CAqGrB;AAED;;;;;GAKG;AACH,sCAHW,QAAQ,CAAC,OAAO,CAAC,gBACjB,WAAW,UAQrB;AAED;;;GAGG;AACH,sCAHW,QAAQ,CAAC,OAAO,CAAC,GACf,OAAO,CAWnB;AAED;;;GAGG;AACH,oCAFW,OAAO,EAAE,WAInB;AAED;;;GAGG;AACH,sCAFW,OAAO,EAAE;;;EASnB;AA4ED;;;;GAIG;AACH,uCAFW,OAAO,WAIjB;AAWD;;;;GAIG;AACH,gCAHW,GAAC,GACC,IAAI,IAAI,OAAO,CAI3B;AAED;;;;GAIG;AACH,mCAHW,WAAW,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,oBAAoB,EAAE,IAAI,GAChE,OAAO,CAiBnB;AAzHD;IACI;;;;OAIG;IACH,mBAHW,OAAO,UACP,OAAO,EAQjB;IAJG,gBAAgB;IAChB,wBAAkB;IAClB,gBAAgB;IAChB,yBAAoB;IAGxB;;;;OAIG;IACH,oBAFW,OAAO,cAAc,EAAE,OAAO,kBAIxC;IAED;;;;OAIG;IACH,yBAFW,OAAO,cAAc,EAAE,OAAO,kBAIxC;IAmBD;;;;OAIG;IACH,aAFa,OAAO,CAInB;;CACJ;AAED;;;;GAIG;AACH,2BAFU,OAAO,CAKd;AAEH,iDAGE;;;;;;;;SAlPQ,MAAM;;;;WACN,MAAM;;;;;;cAGN,MAAM;UACN,MAAM;;;;;;;;;;;;;;cAGN,MAAM;;;;;uBACN,MAAM;;;;aAEN,MAAM;;;;cACN,OAAO"}

package/dist/src/view/layout/flexLayout.js

@@ -302,89 +302,3 @@ export function parseSizeDef(size) {
 
     throw new Error(`Invalid sizeDef: ${size}`);
 }
-
-// TODO: Find a better place for the following utilities: ////////////////////////////////////
-
-/**
- * Interpolates between two LocSizes
- *
- * @param {LocSize} from
- * @param {LocSize} to
- * @param {function():number} ratio
- * @returns {LocSize}
- */
-export function interpolateLocSizes(from, to, ratio) {
-    return {
-        get location() {
-            const r = ratio();
-            switch (r) {
-                case 0:
-                    return from.location;
-                case 1:
-                    return to.location;
-                default:
-                    return r * to.location + (1 - r) * from.location;
-            }
-        },
-
-        get size() {
-            const r = ratio();
-            switch (r) {
-                case 0:
-                    return from.size;
-                case 1:
-                    return to.size;
-                default:
-                    return r * to.size + (1 - r) * from.size;
-            }
-        },
-    };
-}
-
-/**
- * Wraps a LocSize and allows scrolling.
- *
- * @param {LocSize} locSize
- * @param {number | function():number} offset
- * @returns {LocSize}
- */
-export function translateLocSize(locSize, offset) {
-    const fn = isNumber(offset) ? () => offset : offset;
-    return {
-        get location() {
-            return locSize.location + fn();
-        },
-
-        get size() {
-            return locSize.size;
-        },
-    };
-}
-
-/**
- * Wraps a LocSize and allows scaling.
- *
- * @param {LocSize} locSize
- * @param {number | function():number} factor
- * @returns {LocSize}
- */
-export function scaleLocSize(locSize, factor) {
-    const fn = isNumber(factor) ? () => factor : factor;
-    return {
-        get location() {
-            return locSize.location * fn();
-        },
-
-        get size() {
-            return locSize.size * fn();
-        },
-    };
-}
-
-/**
- * @param {LocSize} locSize
- * @param {number} value
- */
-export function locSizeEncloses(locSize, value) {
-    return value >= locSize.location && value < locSize.location + locSize.size;
-}

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

@@ -22,6 +22,15 @@ export function isVariableParameter(param: import("../spec/parameter.js").Parame
  * @returns {param is import("../spec/parameter.js").SelectionParameter}
  */
 export function isSelectionParameter(param: import("../spec/parameter.js").Parameter): param is import("../spec/parameter.js").SelectionParameter;
+/**
+ * Computes the default value for a parameter specification.
+ *
+ * @param {Parameter} param
+ * @param {ParamMediator} [paramMediator]
+ * @param {ExprRefFunction} [exprFn]
+ * @returns {any}
+ */
+export function getDefaultParamValue(param: import("../spec/parameter.js").Parameter, paramMediator?: ParamMediator, exprFn?: ExprRefFunction): any;
 /**
  * Takes a record of properties that may have ExprRefs as values. Converts the
  * ExprRefs to getters and setups a listener that is called when any of the
@@ -97,6 +106,16 @@ export default class ParamMediator {
      * @param {string} paramName
      */
     getValue(paramName: string): any;
+    /**
+     * Subscribe to changes of a parameter's value. The listener is called only
+     * when the stored value changes. For expression parameters, the listener is
+     * called when upstream changes re-evaluate to a different value.
+     *
+     * @param {string} paramName
+     * @param {() => void} listener
+     * @returns {() => void}
+     */
+    subscribe(paramName: string, listener: () => void): () => void;
     /**
      * Get the value of a parameter from this mediator or the ancestors.
      * @param {string} paramName

package/dist/src/view/paramMediator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"paramMediator.d.ts","sourceRoot":"","sources":["../../../src/view/paramMediator.js"],"names":[],"mappings":"AA8VA;;;GAGG;AACH,6BAHW,GAAG,GACD,CAAC,IAAI,OAAO,sBAAsB,EAAE,OAAO,CAIvD;AAED;;;;;;;GAOG;AACH,+BAHa,CAAC,KADH,CAAC,GAAG,OAAO,sBAAsB,EAAE,OAAO,GAExC,CAAC,CAWb;AAED;;;GAGG;AACH,sFAFa,KAAK,IAAI,OAAO,sBAAsB,EAAE,iBAAiB,CAIrE;AAED;;;GAGG;AACH,uFAFa,KAAK,IAAI,OAAO,sBAAsB,EAAE,kBAAkB,CAItE;AAED;;;;;;;;;;GAUG;AACH,qCAF4E,CAAC,SAA/D,MAAM,CAAC,MAAM,EAAE,GAAG,GAAG,OAAO,sBAAsB,EAAE,OAAO,CAAE,iBAJhE,aAAa,SACb,CAAC,aACD,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,IAAI,GAuCjB,CAAC,CACtB;AAED;;;;;;GAMG;AACH,4CAHW,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;GAOG;AACH,2CAHW,GAAG,GACD,eAAe,CAY3B;AAldD;;;;;;;;GAQG;AACH;IA2BI;;;;;OAKG;IACH,2BALW,MAAM,aAAa,EAU7B;IA7BD;;;OAGG;IACH,0BAHU,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,CAGvB;IA2Bf;;;OAGG;IACH,wEAzCqB,GAAG,KAAK,IAAI,CA2GhC;IAED;;;;;;;OAOG;IACH,eAFa,CAAC,aAJH,MAAM,gBACN,CAAC,YACD,OAAO,GACL,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAgC9B;IAED;;;OAGG;IACH,qBAFW,MAAM,WA1Ic,GAAG,KAAK,IAAI,CAkJ1C;IAED;;;OAGG;IACH,oBAFW,MAAM,OAIhB;IAED;;;OAGG;IACH,qBAFW,MAAM,OAKhB;IAED;;OAEG;IACH,oBACsB,WAAW,CAAC,MAAM,2CAAY,CAGnD;IAED;;;;OAIG;IACH,gCAHW,MAAM,GACJ,aAAa,CAQzB;IAID;;;;OAIG;IACH,uBAFW,MAAM,mBAuFhB;IAED;;;;OAIG;IACH,qBAFW,MAAM,OAKhB;IAED;;;;;OAKG;IACH,sBAFa,OAAO,CAiBnB;;CACJ;;;;;;;;8BA1UY,OAAO,wBAAwB,EAAE,kBAAkB,GAAG;IAAE,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAAC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,MAAM,CAAA;CAAC"}
+{"version":3,"file":"paramMediator.d.ts","sourceRoot":"","sources":["../../../src/view/paramMediator.js"],"names":[],"mappings":"AAiXA;;;GAGG;AACH,6BAHW,GAAG,GACD,CAAC,IAAI,OAAO,sBAAsB,EAAE,OAAO,CAIvD;AAED;;;;;;;GAOG;AACH,+BAHa,CAAC,KADH,CAAC,GAAG,OAAO,sBAAsB,EAAE,OAAO,GAExC,CAAC,CAWb;AAED;;;GAGG;AACH,sFAFa,KAAK,IAAI,OAAO,sBAAsB,EAAE,iBAAiB,CAIrE;AAED;;;GAGG;AACH,uFAFa,KAAK,IAAI,OAAO,sBAAsB,EAAE,kBAAkB,CAItE;AAED;;;;;;;GAOG;AACH,sGAJW,aAAa,WACb,eAAe,GACb,GAAG,CAwCf;AAED;;;;;;;;;;GAUG;AACH,qCAF4E,CAAC,SAA/D,MAAM,CAAC,MAAM,EAAE,GAAG,GAAG,OAAO,sBAAsB,EAAE,OAAO,CAAE,iBAJhE,aAAa,SACb,CAAC,aACD,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,IAAI,GAuCjB,CAAC,CACtB;AAED;;;;;;GAMG;AACH,4CAHW,MAAM,GACJ,MAAM,CAUlB;AAED;;;;;;;GAOG;AACH,2CAHW,GAAG,GACD,eAAe,CAY3B;AArhBD;;;;;;;;GAQG;AACH;IA2BI;;;;;OAKG;IACH,2BALW,MAAM,aAAa,EAU7B;IA7BD;;;OAGG;IACH,0BAHU,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,IAAI,CAAC,CAAC,CAGvB;IA2Bf;;;OAGG;IACH,wEAzCqB,GAAG,KAAK,IAAI,CAkGhC;IAED;;;;;;;OAOG;IACH,eAFa,CAAC,aAJH,MAAM,gBACN,CAAC,YACD,OAAO,GACL,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAgC9B;IAED;;;OAGG;IACH,qBAFW,MAAM,WAjIc,GAAG,KAAK,IAAI,CAyI1C;IAED;;;OAGG;IACH,oBAFW,MAAM,OAIhB;IAED;;;;;;;;OAQG;IACH,qBAJW,MAAM,YACN,MAAM,IAAI,GACR,MAAM,IAAI,CAmBtB;IAED;;;OAGG;IACH,qBAFW,MAAM,OAKhB;IAED;;OAEG;IACH,oBACsB,WAAW,CAAC,MAAM,2CAAY,CAGnD;IAED;;;;OAIG;IACH,gCAHW,MAAM,GACJ,aAAa,CAQzB;IAID;;;;OAIG;IACH,uBAFW,MAAM,mBAuFhB;IAED;;;;OAIG;IACH,qBAFW,MAAM,OAKhB;IAED;;;;;OAKG;IACH,sBAFa,OAAO,CAiBnB;;CACJ;;;;;;;;8BA7VY,OAAO,wBAAwB,EAAE,kBAAkB,GAAG;IAAE,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAAC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,MAAM,CAAA;CAAC"}

package/dist/src/view/paramMediator.js

@@ -73,6 +73,7 @@ export default class ParamMediator {
 
         /** @type {ParameterSetter} */
         let setter;
+        let defaultValue;
 
         if (param.push == "outer") {
             const outerMediator = this.findMediatorForParam(name);
@@ -93,36 +94,26 @@ export default class ParamMediator {
             // support mutation (i.e. adding/removing children) in future.
             this.#allocatedSetters.set(name, setter);
         } else if ("value" in param) {
-            setter = this.allocateSetter(name, param.value);
+            defaultValue = getDefaultParamValue(param, this);
+            setter = this.allocateSetter(name, defaultValue);
         } else if ("expr" in param) {
             const expr = this.createExpression(param.expr);
             // TODO: getSetter(param) should return a setter that throws if
             // modifying the value is attempted.
-            const realSetter = this.allocateSetter(name, expr(null));
+            defaultValue = getDefaultParamValue(param, this, expr);
+            const realSetter = this.allocateSetter(name, defaultValue);
             expr.addListener(() => realSetter(expr(null)));
             // NOP
             setter = (_) => undefined;
         } else {
-            setter = this.allocateSetter(name, null);
+            defaultValue = getDefaultParamValue(param, this);
+            setter = this.allocateSetter(name, defaultValue);
         }
 
         if ("select" in param) {
-            const select = asSelectionConfig(param.select);
-            if (isPointSelectionConfig(select)) {
-                // Set initial value so that production rules in shaders can be generated, etc.
-                setter(
-                    select.toggle
-                        ? createMultiPointSelection()
-                        : createSinglePointSelection(null)
-                );
-            } else if (isIntervalSelectionConfig(select)) {
-                if (!select.encodings) {
-                    throw new Error(
-                        `Interval selection "${name}" must have encodings defined!`
-                    );
-                }
-                setter(createIntervalSelection(select.encodings));
-            }
+            defaultValue ??= getDefaultParamValue(param, this);
+            // Set initial value so that production rules in shaders can be generated, etc.
+            setter(defaultValue);
         }
 
         this.#paramConfigs.set(name, param);
@@ -189,6 +180,34 @@ export default class ParamMediator {
         return this.#paramValues.get(paramName);
     }
 
+    /**
+     * Subscribe to changes of a parameter's value. The listener is called only
+     * when the stored value changes. For expression parameters, the listener is
+     * called when upstream changes re-evaluate to a different value.
+     *
+     * @param {string} paramName
+     * @param {() => void} listener
+     * @returns {() => void}
+     */
+    subscribe(paramName, listener) {
+        validateParameterName(paramName);
+        const mediator = this.findMediatorForParam(paramName);
+        if (!mediator) {
+            throw new Error("Parameter not found: " + paramName);
+        }
+
+        const listeners = mediator.paramListeners.get(paramName) ?? new Set();
+        mediator.paramListeners.set(paramName, listeners);
+        listeners.add(listener);
+
+        return () => {
+            listeners.delete(listener);
+            if (!listeners.size) {
+                mediator.paramListeners.delete(paramName);
+            }
+        };
+    }
+
     /**
      * Get the value of a parameter from this mediator or the ancestors.
      * @param {string} paramName
@@ -391,6 +410,54 @@ export function isSelectionParameter(param) {
     return !("expr" in param || "bind" in param) && "select" in param;
 }
 
+/**
+ * Computes the default value for a parameter specification.
+ *
+ * @param {Parameter} param
+ * @param {ParamMediator} [paramMediator]
+ * @param {ExprRefFunction} [exprFn]
+ * @returns {any}
+ */
+export function getDefaultParamValue(param, paramMediator, exprFn) {
+    if ("select" in param) {
+        const select = asSelectionConfig(param.select);
+        if (isPointSelectionConfig(select)) {
+            return select.toggle
+                ? createMultiPointSelection()
+                : createSinglePointSelection(null);
+        }
+        if (isIntervalSelectionConfig(select)) {
+            if (!select.encodings) {
+                throw new Error(
+                    `Interval selection "${param.name}" must have encodings defined!`
+                );
+            }
+            return createIntervalSelection(select.encodings);
+        }
+        throw new Error(
+            `Unknown selection config for parameter "${param.name}".`
+        );
+    }
+
+    if ("expr" in param) {
+        const expr =
+            exprFn ??
+            paramMediator?.createExpression(/** @type {string} */ (param.expr));
+        if (!expr) {
+            throw new Error(
+                `Cannot evaluate expression for parameter "${param.name}".`
+            );
+        }
+        return expr(null);
+    }
+
+    if ("value" in param) {
+        return param.value;
+    }
+
+    return null;
+}
+
 /**
  * Takes a record of properties that may have ExprRefs as values. Converts the
  * ExprRefs to getters and setups a listener that is called when any of the

package/dist/src/view/testUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../../../src/view/testUtils.js"],"names":[],"mappings":"AAoBA;;;GAGG;AACH,2DAHW,OAAO,kBAAkB,EAAE,kBAAkB,6CA+DvD;AAGS,uBAAC,CAAC,SAAS,OAAO,WAAW,EAAE,OAAO,QAAQ,QAAQ,aAAa;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CAAE,uBAAuB,OAAO,kBAAkB,EAAE,kBAAkB,GAAK,OAAO,CAAC,CAAC,CAAC,CAAA;AAgBhL,oCAAC,CAAC,SAAS,OAAO,WAAW,EAAE,OAAO,QAAQ,QAAQ,aAAa;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CAAE,YAAY,WAAW,YAAY;IAAC,MAAM,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,OAAO,CAAA;CAAC,GAAK,OAAO,CAAC,CAAC,CAAC,CAAA;;;;;uBAnGpL,OAAO,iBAAiB,EAAE,QAAQ;;;;;0BAClC,OAAO,yBAAyB,EAAE,OAAO"}
+{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../../../src/view/testUtils.js"],"names":[],"mappings":"AAoBA;;;GAGG;AACH,2DAHW,OAAO,kBAAkB,EAAE,kBAAkB,6CAoEvD;AAGS,uBAAC,CAAC,SAAS,OAAO,WAAW,EAAE,OAAO,QAAQ,QAAQ,aAAa;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CAAE,uBAAuB,OAAO,kBAAkB,EAAE,kBAAkB,GAAK,OAAO,CAAC,CAAC,CAAC,CAAA;AAgBhL,oCAAC,CAAC,SAAS,OAAO,WAAW,EAAE,OAAO,QAAQ,QAAQ,aAAa;IAAE,KAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;CAAE,YAAY,WAAW,YAAY;IAAC,MAAM,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,OAAO,CAAA;CAAC,GAAK,OAAO,CAAC,CAAC,CAAC,CAAA;;;;;uBAxGpL,OAAO,iBAAiB,EAAE,QAAQ;;;;;0BAClC,OAAO,yBAAyB,EAAE,OAAO"}

package/dist/src/view/testUtils.js

@@ -38,6 +38,8 @@ export function createTestViewContext(viewFactoryOptions = {}) {
         ],
     });
 
+    const dataFlow = new DataFlow();
+
     // @ts-expect-error
     const c = /** @type {ViewContext} */ ({
         createOrImportView: async function (
@@ -55,7 +57,7 @@ export function createTestViewContext(viewFactoryOptions = {}) {
             );
         },
 
-        dataFlow: new DataFlow(),
+        dataFlow,
         genomeStore,
 
         fontManager: new BmFontManager(),
@@ -78,6 +80,9 @@ export function createTestViewContext(viewFactoryOptions = {}) {
 
         isViewConfiguredVisible: () => true,
 
+        addBroadcastListener: () => undefined,
+        removeBroadcastListener: () => undefined,
+
         //...partialContext,
     });