@genome-spy/core 0.64.0 → 0.66.1

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

@@ -4,37 +4,57 @@ import Rectangle from "../layout/rectangle.js";
 import UnitView from "../unitView.js";
 
 /**
+ * This class represents a scrollbar thumb that can be used within a grid view
+ * to provide scrolling functionality for overflowing content.
+ *
  * @typedef {"horizontal" | "vertical"} ScrollDirection
  */
 export default class Scrollbar extends UnitView {
     /** @type {ScrollDirection} */
     #scrollDirection;
 
+    // NOTE: Keep this Rectangle instance stable. Buffered rendering caches
+    // a reference to coords; replacing it breaks dynamic updates.
     #scrollbarCoords = Rectangle.ZERO;
 
-    #maxScrollOffset = 0;
+    #viewportCoords = Rectangle.ZERO;
 
-    #maxViewportOffset = 0;
+    #contentCoords = Rectangle.ZERO;
 
-    // This is the actual state of the scrollbar. It's better to keep track of
-    // the viewport offset rather than the scrollbar offset because the former
-    // is more stable when the viewport size changes.
+    /**
+     * The actual state of the scrollbar.
+     *
+     * It's better to keep track of the viewport offset rather than the
+     * scrollbar offset because the former is more stable when the
+     * viewport size changes.
+     */
     viewportOffset = 0;
 
+    /** @type {(offset: number) => void} */
+    #onViewportOffsetChange;
+
     /**
      * @param {import("./gridChild.js").default} gridChild
      * @param {ScrollDirection} scrollDirection
+     * @param {{ onViewportOffsetChange?: (offset: number) => void }} [options]
      */
-    constructor(gridChild, scrollDirection) {
-        // TODO: Configurable
+    constructor(gridChild, scrollDirection, options = {}) {
+        // TODO: Configurable per view
         const config = {
             scrollbarSize: 8,
             scrollbarPadding: 2,
-            // TODO: inside/outside view
+            scrollbarMinLength: 20,
         };
 
         super(
             {
+                params: [
+                    {
+                        name: "scrollbarOpacity",
+                        value: 1,
+                    },
+                ],
+                opacity: { expr: "scrollbarOpacity" },
                 data: { values: [{}] },
                 mark: {
                     type: "rect",
@@ -59,22 +79,41 @@ export default class Scrollbar extends UnitView {
 
         this.config = config;
         this.#scrollDirection = scrollDirection;
+        this.#onViewportOffsetChange = options.onViewportOffsetChange;
 
-        // Make it smooth!
-        this.interpolateViewportOffset = makeLerpSmoother(
-            this.context.animator,
-            (value) => {
-                this.viewportOffset = value.x;
-            },
-            50,
-            0.4,
-            { x: this.viewportOffset }
-        );
+        const sPad = this.config.scrollbarPadding;
+        const sSize = this.config.scrollbarSize;
+
+        this.#scrollbarCoords =
+            this.#scrollDirection == "vertical"
+                ? new Rectangle(
+                      () =>
+                          this.#viewportCoords.x +
+                          this.#viewportCoords.width -
+                          sSize -
+                          sPad,
+                      () => this.#viewportCoords.y + sPad + this.scrollOffset,
+                      () => sSize,
+                      () => this.#getScrollLength()
+                  )
+                : new Rectangle(
+                      () => this.#viewportCoords.x + sPad + this.scrollOffset,
+                      () =>
+                          this.#viewportCoords.y +
+                          this.#viewportCoords.height -
+                          sSize -
+                          sPad,
+                      () => this.#getScrollLength(),
+                      () => sSize
+                  );
+
+        // Smooth viewport offset updates
+        this.#initViewportOffsetSmoother(this.viewportOffset);
 
         this.addInteractionEventListener("mousedown", (coords, event) => {
             event.stopPropagation();
 
-            if (this.#maxScrollOffset <= 0) {
+            if (this.#getMaxScrollOffset() <= 0) {
                 return;
             }
 
@@ -91,18 +130,21 @@ export default class Scrollbar extends UnitView {
             const onMousemove = /** @param {MouseEvent} moveEvent */ (
                 moveEvent
             ) => {
+                const maxScrollOffset = this.#getMaxScrollOffset();
+                if (maxScrollOffset <= 0) {
+                    return;
+                }
+
                 const scrollOffset = clamp(
                     getMouseOffset(moveEvent) -
                         initialOffset +
                         initialScrollOffset,
                     0,
-                    this.#maxScrollOffset
+                    maxScrollOffset
                 );
 
                 this.interpolateViewportOffset({
-                    x:
-                        (scrollOffset / this.#maxScrollOffset) *
-                        this.#maxViewportOffset,
+                    x: this.#getViewportOffsetFromScrollOffset(scrollOffset),
                 });
             };
 
@@ -117,9 +159,95 @@ export default class Scrollbar extends UnitView {
     }
 
     get scrollOffset() {
-        return (
-            (this.viewportOffset / this.#maxViewportOffset) *
-            this.#maxScrollOffset
+        return this.#getScrollOffsetFromViewportOffset(this.viewportOffset);
+    }
+
+    /**
+     * @param {number} value
+     * @param {{ notify?: boolean, syncSmoother?: boolean }} [options]
+     */
+    setViewportOffset(value, { notify = true, syncSmoother = false } = {}) {
+        this.viewportOffset = clamp(value, 0, this.#getMaxViewportOffset());
+
+        if (syncSmoother) {
+            this.#initViewportOffsetSmoother(this.viewportOffset);
+        }
+
+        if (notify && this.#onViewportOffsetChange) {
+            this.#onViewportOffsetChange(this.viewportOffset);
+        }
+    }
+
+    #getVisibleFraction() {
+        const dimension =
+            this.#scrollDirection == "horizontal" ? "width" : "height";
+
+        const viewportSize = this.#viewportCoords[dimension];
+        const contentSize = this.#contentCoords[dimension];
+
+        return contentSize > 0 ? Math.min(1, viewportSize / contentSize) : 1;
+    }
+
+    #getMaxScrollLength() {
+        const dimension =
+            this.#scrollDirection == "horizontal" ? "width" : "height";
+
+        return Math.max(
+            0,
+            this.#viewportCoords[dimension] - 2 * this.config.scrollbarPadding
+        );
+    }
+
+    #getScrollLength() {
+        const maxScrollLength = this.#getMaxScrollLength();
+        const scrollLength = this.#getVisibleFraction() * maxScrollLength;
+        const minLength = this.config.scrollbarMinLength;
+
+        return Math.min(maxScrollLength, Math.max(minLength, scrollLength));
+    }
+
+    #getMaxScrollOffset() {
+        return Math.max(
+            0,
+            this.#getMaxScrollLength() - this.#getScrollLength()
+        );
+    }
+
+    /**
+     * @param {number} viewportOffset
+     */
+    #getScrollOffsetFromViewportOffset(viewportOffset) {
+        const maxViewportOffset = this.#getMaxViewportOffset();
+        const maxScrollOffset = this.#getMaxScrollOffset();
+
+        if (maxViewportOffset <= 0 || maxScrollOffset <= 0) {
+            return 0;
+        }
+
+        return (viewportOffset / maxViewportOffset) * maxScrollOffset;
+    }
+
+    /**
+     * @param {number} scrollOffset
+     */
+    #getViewportOffsetFromScrollOffset(scrollOffset) {
+        const maxViewportOffset = this.#getMaxViewportOffset();
+        const maxScrollOffset = this.#getMaxScrollOffset();
+
+        if (maxViewportOffset <= 0 || maxScrollOffset <= 0) {
+            return 0;
+        }
+
+        return (scrollOffset / maxScrollOffset) * maxViewportOffset;
+    }
+
+    #getMaxViewportOffset() {
+        const dimension =
+            this.#scrollDirection == "horizontal" ? "width" : "height";
+
+        return Math.max(
+            0,
+            this.#contentCoords[dimension] - this.#viewportCoords[dimension]
         );
     }
 
@@ -129,57 +257,44 @@ export default class Scrollbar extends UnitView {
      * @param {import("../../types/rendering.js").RenderingOptions} [options]
      */
     render(context, coords, options) {
+        // NOTE: This only records layout coordinates for buffered rendering.
         super.render(context, this.#scrollbarCoords, options);
     }
 
     /**
+     * Updates the scrollbar with the latest viewport and content rectangles.
+     *
+     * Viewport coords are flattened to stay stable between layout passes, while
+     * content coords may be dynamic (e.g., peek transitions) and are evaluated
+     * on demand via accessors.
      *
      * @param {Rectangle} viewportCoords
-     * @param {Rectangle} coords
+     * @param {Rectangle} contentCoords
      */
-    updateScrollbar(viewportCoords, coords) {
-        const sPad = this.config.scrollbarPadding;
-        const sSize = this.config.scrollbarSize;
-
-        const dimension =
-            this.#scrollDirection == "horizontal" ? "width" : "height";
-
-        const visibleFraction = Math.min(
-            1,
-            viewportCoords[dimension] / coords[dimension]
-        );
-        const maxScrollLength = viewportCoords[dimension] - 2 * sPad;
-        const scrollLength = visibleFraction * maxScrollLength;
+    updateScrollbar(viewportCoords, contentCoords) {
+        this.#viewportCoords = viewportCoords.flatten();
+        this.#contentCoords = contentCoords;
+        this.setViewportOffset(this.viewportOffset, {
+            notify: false,
+            syncSmoother: true,
+        });
+    }
 
-        this.#maxScrollOffset = maxScrollLength - scrollLength;
-        this.#maxViewportOffset = coords[dimension] - viewportCoords[dimension];
-        this.viewportOffset = clamp(
-            this.viewportOffset,
-            0,
-            this.#maxViewportOffset
+    /**
+     * @param {number} value
+     */
+    #initViewportOffsetSmoother(value) {
+        this.interpolateViewportOffset = makeLerpSmoother(
+            this.context.animator,
+            (current) => {
+                this.setViewportOffset(current.x, {
+                    notify: true,
+                    syncSmoother: false,
+                });
+            },
+            35,
+            0.4,
+            { x: value }
         );
-
-        this.#scrollbarCoords =
-            this.#scrollDirection == "vertical"
-                ? new Rectangle(
-                      () =>
-                          viewportCoords.x +
-                          viewportCoords.width -
-                          sSize -
-                          sPad,
-                      () => viewportCoords.y + sPad + this.scrollOffset,
-                      () => sSize,
-                      () => scrollLength
-                  )
-                : new Rectangle(
-                      () => viewportCoords.x + sPad + this.scrollOffset,
-                      () =>
-                          viewportCoords.y +
-                          viewportCoords.height -
-                          sSize -
-                          sPad,
-                      () => scrollLength,
-                      () => sSize
-                  );
     }
 }

package/dist/src/view/gridView/selectionRect.d.ts

@@ -1,14 +1,18 @@
 export default class SelectionRect extends LayerView {
-    /**
-     * @typedef {import("../../spec/channel.js").PrimaryPositionalChannel} PrimaryPositionalChannel
-     * @typedef {import("../../types/selectionTypes.js").IntervalSelection} IntervalSelection
-     */
     /**
      * @param {import("./gridChild.js").default} gridChild
      * @param {import("../paramMediator.js").ExprRefFunction} selectionExpr
      * @param {import("../../spec/parameter.js").BrushConfig} [brushConfig]
      */
     constructor(gridChild: import("./gridChild.js").default, selectionExpr: import("../paramMediator.js").ExprRefFunction, brushConfig?: import("../../spec/parameter.js").BrushConfig);
+    /**
+     * @typedef {import("../../spec/channel.js").PrimaryPositionalChannel} PrimaryPositionalChannel
+     * @typedef {import("../../types/selectionTypes.js").IntervalSelection} IntervalSelection
+     */
+    /** @type {import("../paramMediator.js").ExprRefFunction} */
+    _selectionExpr: import("../paramMediator.js").ExprRefFunction;
+    /** @type {() => void} */
+    _selectionListener: () => void;
 }
 import LayerView from "../layerView.js";
 //# sourceMappingURL=selectionRect.d.ts.map

package/dist/src/view/gridView/selectionRect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectionRect.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/selectionRect.js"],"names":[],"mappings":"AAGA;IACI;;;OAGG;IAEH;;;;OAIG;IACH,uBAJW,OAAO,gBAAgB,EAAE,OAAO,iBAChC,OAAO,qBAAqB,EAAE,eAAe,gBAC7C,OAAO,yBAAyB,EAAE,WAAW,EA0IvD;CACJ;sBAtJqB,iBAAiB"}
+{"version":3,"file":"selectionRect.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/selectionRect.js"],"names":[],"mappings":"AAGA;IAYI;;;;OAIG;IACH,uBAJW,OAAO,gBAAgB,EAAE,OAAO,iBAChC,OAAO,qBAAqB,EAAE,eAAe,gBAC7C,OAAO,yBAAyB,EAAE,WAAW,EAqJvD;IAnKD;;;OAGG;IAEH,4DAA4D;IAC5D,gBADW,OAAO,qBAAqB,EAAE,eAAe,CACzC;IAEf,yBAAyB;IACzB,oBADW,MAAM,IAAI,CACF;CAmKtB;sBA/KqB,iBAAiB"}

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

@@ -7,6 +7,12 @@ export default class SelectionRect extends LayerView {
      * @typedef {import("../../types/selectionTypes.js").IntervalSelection} IntervalSelection
      */
 
+    /** @type {import("../paramMediator.js").ExprRefFunction} */
+    _selectionExpr;
+
+    /** @type {() => void} */
+    _selectionListener;
+
     /**
      * @param {import("./gridChild.js").default} gridChild
      * @param {import("../paramMediator.js").ExprRefFunction} selectionExpr
@@ -135,7 +141,10 @@ export default class SelectionRect extends LayerView {
             }
         );
 
-        selectionExpr.addListener(() => {
+        /** @type {import("../paramMediator.js").ExprRefFunction} */
+        this._selectionExpr = selectionExpr;
+
+        this._selectionListener = () => {
             const selection =
                 /** @type {import("../../types/selectionTypes.js").IntervalSelection} */ (
                     selectionExpr()
@@ -143,11 +152,27 @@ export default class SelectionRect extends LayerView {
 
             const datasource =
                 /** @type {import("../../data/sources/inlineSource.js").default} */ (
-                    this.context.dataFlow.findDataSourceByKey(this)
+                    this.flowHandle?.dataSource
                 );
 
+            if (!datasource) {
+                throw new Error(
+                    "Cannot find selection rect data source handle!"
+                );
+            }
+
             datasource.updateDynamicData(selectionToData(selection));
-        });
+        };
+
+        selectionExpr.addListener(this._selectionListener);
+    }
+
+    /**
+     * @override
+     */
+    dispose() {
+        this._selectionExpr.removeListener(this._selectionListener);
+        super.dispose();
     }
 }
 

package/dist/src/view/gridView/selectionRect.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=selectionRect.test.d.ts.map

package/dist/src/view/gridView/selectionRect.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionRect.test.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/selectionRect.test.js"],"names":[],"mappings":""}

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

@@ -10,6 +10,20 @@ export default class LayerView extends ContainerView {
      */
     constructor(spec: import("../spec/view.js").LayerSpec, context: import("../types/viewContext.js").default, layoutParent: ContainerView, dataParent: import("./view.js").default, name: string, options?: import("./view.js").ViewOptions);
     spec: import("../spec/view.js").LayerSpec;
+    /**
+     * Adds a child spec dynamically. Intended for post-initialization updates.
+     *
+     * @param {import("../spec/view.js").LayerSpec | import("../spec/view.js").UnitSpec | import("../spec/view.js").ImportSpec} childSpec
+     * @param {number} [index]
+     * @returns {Promise<LayerView | import("./unitView.js").default>}
+     */
+    addChildSpec(childSpec: import("../spec/view.js").LayerSpec | import("../spec/view.js").UnitSpec | import("../spec/view.js").ImportSpec, index?: number): Promise<LayerView | import("./unitView.js").default>;
+    /**
+     * Removes a child by index. Intended for post-initialization updates.
+     *
+     * @param {number} index
+     */
+    removeChildAt(index: number): Promise<void>;
     get children(): (import("./unitView.js").default | LayerView)[];
     #private;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"layerView.d.ts","sourceRoot":"","sources":["../../../src/view/layerView.js"],"names":[],"mappings":"AAIA;IAQI;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,SAAS,WACnC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,cACb,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAWzC;IAHG,0CAAgB;IAoCpB,gEAEC;;CA6CJ;0BA7GyB,oBAAoB"}
+{"version":3,"file":"layerView.d.ts","sourceRoot":"","sources":["../../../src/view/layerView.js"],"names":[],"mappings":"AAKA;IAQI;;;;;;;;OAQG;IACH,kBAPW,OAAO,iBAAiB,EAAE,SAAS,WACnC,OAAO,yBAAyB,EAAE,OAAO,gBACzC,aAAa,cACb,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAWzC;IAHG,0CAAgB;IAoCpB;;;;;;OAMG;IACH,wBAJW,OAAO,iBAAiB,EAAE,SAAS,GAAG,OAAO,iBAAiB,EAAE,QAAQ,GAAG,OAAO,iBAAiB,EAAE,UAAU,UAC/G,MAAM,GACJ,OAAO,CAAC,SAAS,GAAG,OAAO,eAAe,EAAE,OAAO,CAAC,CAMhE;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAIhB;IA6CD,gEAEC;;CA6CJ;0BA/KyB,oBAAoB"}

package/dist/src/view/layerView.js

@@ -1,6 +1,7 @@
 import { isLayerSpec, isUnitSpec } from "./viewFactory.js";
 import ContainerView from "./containerView.js";
 import ViewError from "./viewError.js";
+import ContainerMutationHelper from "./containerMutationHelper.js";
 
 export default class LayerView extends ContainerView {
     /**
@@ -61,6 +62,71 @@ export default class LayerView extends ContainerView {
         );
     }
 
+    /**
+     * Adds a child spec dynamically. Intended for post-initialization updates.
+     *
+     * @param {import("../spec/view.js").LayerSpec | import("../spec/view.js").UnitSpec | import("../spec/view.js").ImportSpec} childSpec
+     * @param {number} [index]
+     * @returns {Promise<LayerView | import("./unitView.js").default>}
+     */
+    async addChildSpec(childSpec, index) {
+        return /** @type {Promise<LayerView | import("./unitView.js").default>} */ (
+            this.#getMutationHelper().addChildSpec(childSpec, index)
+        );
+    }
+
+    /**
+     * Removes a child by index. Intended for post-initialization updates.
+     *
+     * @param {number} index
+     */
+    async removeChildAt(index) {
+        await this.#getMutationHelper().removeChildAt(index);
+    }
+
+    /**
+     * @returns {ContainerMutationHelper}
+     */
+    #getMutationHelper() {
+        return new ContainerMutationHelper(this, {
+            getChildSpecs: () => ({
+                specs: this.spec.layer,
+                insertAt: (index, spec) => {
+                    this.spec.layer.splice(
+                        index,
+                        0,
+                        /** @type {import("../spec/view.js").LayerSpec | import("../spec/view.js").UnitSpec | import("../spec/view.js").ImportSpec} */ (
+                            spec
+                        )
+                    );
+                },
+                removeAt: (index) => {
+                    this.spec.layer.splice(index, 1);
+                },
+            }),
+            insertView: (view, index) => {
+                view.layoutParent ??= this;
+                this.#children.splice(
+                    index,
+                    0,
+                    /** @type {LayerView | import("./unitView.js").default} */ (
+                        view
+                    )
+                );
+                return view;
+            },
+            removeView: (index) => {
+                const view = this.#children[index];
+                if (!view) {
+                    throw new Error("Child index out of range!");
+                }
+                view.disposeSubtree();
+                this.#children.splice(index, 1);
+            },
+            defaultName: (index) => "layer" + index,
+        });
+    }
+
     get children() {
         return this.#children.slice();
     }

package/dist/src/view/layerView.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=layerView.test.d.ts.map

package/dist/src/view/layerView.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layerView.test.d.ts","sourceRoot":"","sources":["../../../src/view/layerView.test.js"],"names":[],"mappings":""}

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

@@ -58,7 +58,7 @@ export function makeConstantExprRef(value: any): ExprRefFunction;
  * TODO: The proposed JavaScript signals may provide a better way to implement this.
  * https://github.com/proposal-signals/proposal-signals
  *
- * @typedef {import("../utils/expression.js").ExpressionFunction & { addListener: (listener: () => void) => void, invalidate: () => void, identifier: () => string}} ExprRefFunction
+ * @typedef {import("../utils/expression.js").ExpressionFunction & { addListener: (listener: () => void) => void, removeListener: (listener: () => void) => void, invalidate: () => void, identifier: () => string}} ExprRefFunction
  */
 export default class ParamMediator {
     /**
@@ -142,6 +142,7 @@ export default class ParamMediator {
  */
 export type ExprRefFunction = import("../utils/expression.js").ExpressionFunction & {
     addListener: (listener: () => void) => void;
+    removeListener: (listener: () => void) => void;
     invalidate: () => void;
     identifier: () => string;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"paramMediator.d.ts","sourceRoot":"","sources":["../../../src/view/paramMediator.js"],"names":[],"mappings":"AAmVA;;;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,CAW3B;AAtcD;;;;;;;;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,mBA4EhB;IAED;;;;OAIG;IACH,qBAFW,MAAM,OAKhB;IAED;;;;;OAKG;IACH,sBAFa,OAAO,CAiBnB;;CACJ;;;;;;;;8BA/TY,OAAO,wBAAwB,EAAE,kBAAkB,GAAG;IAAE,WAAW,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":"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"}

package/dist/src/view/paramMediator.js

@@ -16,7 +16,7 @@ import {
  * TODO: The proposed JavaScript signals may provide a better way to implement this.
  * https://github.com/proposal-signals/proposal-signals
  *
- * @typedef {import("../utils/expression.js").ExpressionFunction & { addListener: (listener: () => void) => void, invalidate: () => void, identifier: () => string}} ExprRefFunction
+ * @typedef {import("../utils/expression.js").ExpressionFunction & { addListener: (listener: () => void) => void, removeListener: (listener: () => void) => void, invalidate: () => void, identifier: () => string}} ExprRefFunction
  */
 export default class ParamMediator {
     /**
@@ -280,6 +280,16 @@ export default class ParamMediator {
             }
         };
 
+        /**
+         * @param {() => void} listener
+         */
+        fn.removeListener = (listener) => {
+            for (const [param, mediator] of mediatorsForParams) {
+                mediator.paramListeners.get(param)?.delete(listener);
+            }
+            myListeners.delete(listener);
+        };
+
         /**
          * Detach listeners. This must be called if the expression is no longer used.
          * TODO: What if the expression is used in multiple places?
@@ -290,6 +300,7 @@ export default class ParamMediator {
                     mediator.paramListeners.get(param)?.delete(listener);
                 }
             }
+            myListeners.clear();
         };
 
         // TODO: This should contain unique identifier for each parameter.
@@ -457,6 +468,7 @@ export function validateParameterName(name) {
 export function makeConstantExprRef(value) {
     return Object.assign(() => value, {
         addListener: () => /** @type {void} */ (undefined),
+        removeListener: () => /** @type {void} */ (undefined),
         invalidate: () => /** @type {void} */ (undefined),
         identifier: () => "constant",
         fields: [],

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

@@ -1 +1 @@
-{"version":3,"file":"testUtils.d.ts","sourceRoot":"","sources":["../../../src/view/testUtils.js"],"names":[],"mappings":"AAiBA;;;GAGG;AACH,2DAHW,OAAO,kBAAkB,EAAE,kBAAkB,6CA+CvD;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;;;;;uBAhFpL,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,6CA0DvD;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;;;;;uBA9FpL,OAAO,iBAAiB,EAAE,QAAQ;;;;;0BAClC,OAAO,yBAAyB,EAAE,OAAO"}

package/dist/src/view/testUtils.js

@@ -6,12 +6,15 @@
  * @typedef {import("../types/viewContext.js").default} ViewContext
  */
 
-import { checkForDuplicateScaleNames, initializeData } from "./viewUtils.js";
+import { checkForDuplicateScaleNames } from "./viewUtils.js";
+import {
+    initializeViewSubtree,
+    loadViewSubtreeData,
+} from "../data/flowInit.js";
 import DataFlow from "../data/dataFlow.js";
 import { VIEW_ROOT_NAME, ViewFactory } from "./viewFactory.js";
 import GenomeStore from "../genome/genomeStore.js";
 import BmFontManager from "../fonts/bmFontManager.js";
-import { reconfigureScales } from "./scaleResolution.js";
 import UnitView from "./unitView.js";
 import ContainerView from "./containerView.js";
 
@@ -56,6 +59,17 @@ export function createTestViewContext(viewFactoryOptions = {}) {
         genomeStore,
 
         fontManager: new BmFontManager(),
+        animator: /** @type {import("../utils/animator.js").default} */ (
+            /** @type {any} */ ({
+                requestRender: /** @type {() => void} */ (() => undefined),
+                requestTransition:
+                    /** @type {(callback: () => void) => void} */ (
+                        (callback) => callback()
+                    ),
+            })
+        ),
+
+        requestLayoutReflow: () => undefined,
 
         isViewConfiguredVisible: () => true,
 
@@ -88,7 +102,6 @@ export async function createAndInitialize(spec, viewClass) {
     const view = await create(spec, viewClass);
 
     checkForDuplicateScaleNames(view);
-
     if (view instanceof UnitView) {
         view.mark.initializeEncoders();
     } else if (view instanceof ContainerView) {
@@ -99,7 +112,7 @@ export async function createAndInitialize(spec, viewClass) {
         });
     }
 
-    await initializeData(view, view.context.dataFlow);
-    reconfigureScales(view);
+    const { dataSources } = initializeViewSubtree(view, view.context.dataFlow);
+    await loadViewSubtreeData(view, dataSources);
     return view;
 }