@genome-spy/core 0.65.0 → 0.66.1

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

@@ -18,6 +18,14 @@ import Scrollbar from "./scrollbar.js";
 import SelectionRect from "./selectionRect.js";
 
 export default class GridChild {
+    /**
+     * Users guide:
+     * - GridChild is owned by GridView and is not meant to be instantiated or
+     *   managed directly by callers.
+     * - Use GridView/ConcatView APIs for insertion/removal so decorations and
+     *   dataflow are kept in sync.
+     */
+
     /**
      * @param {import("../view.js").default} view
      * @param {import("../containerView.js").default} layoutParent
@@ -137,7 +145,7 @@ export default class GridChild {
             const scaleResolutions = Object.fromEntries(
                 channels.map((channel) => {
                     const resolution = this.view.getScaleResolution(channel);
-                    const scale = resolution?.scale;
+                    const scale = resolution?.getScale();
 
                     if (!scale || !isContinuous(scale.type)) {
                         throw new Error(
@@ -214,7 +222,7 @@ export default class GridChild {
                 const np = view.coords.normalizePoint(point.x, point.y, true);
 
                 for (const channel of channels) {
-                    const scale = scaleResolutions[channel].scale;
+                    const scale = scaleResolutions[channel].getScale();
                     // @ts-ignore
                     const val = scale.invert(channel == "x" ? np.x : np.y);
                     inverted[channel] =
@@ -243,7 +251,7 @@ export default class GridChild {
                         /** @type {number} */ val
                     ) => {
                         if (val == null) return null;
-                        return scaleResolutions[channel].scale(val);
+                        return scaleResolutions[channel].getScale()(val);
                     };
                     const px = getCoord("x", xVal) ?? i;
                     const py = getCoord("y", yVal) ?? i;
@@ -477,10 +485,12 @@ export default class GridChild {
      * Create view decorations, grid lines, axes, etc.
      */
     async createAxes() {
+        this.disposeAxisViews();
+
         const { view, axes, gridLines } = this;
 
         /**
-         * @param {import("../axisResolution.js").default} r
+         * @param {import("../../scales/axisResolution.js").default} r
          * @param {import("../../spec/channel.js").PrimaryPositionalChannel} channel
          */
         const getAxisPropsWithDefaults = (r, channel) => {
@@ -521,7 +531,7 @@ export default class GridChild {
         };
 
         /**
-         * @param {import("../axisResolution.js").default} r
+         * @param {import("../../scales/axisResolution.js").default} r
          * @param {import("../../spec/channel.js").PrimaryPositionalChannel} channel
          * @param {import("../view.js").default} axisParent
          */
@@ -548,7 +558,7 @@ export default class GridChild {
         };
 
         /**
-         * @param {import("../axisResolution.js").default} r
+         * @param {import("../../scales/axisResolution.js").default} r
          * @param {import("../../spec/channel.js").PrimaryPositionalChannel} channel
          * @param {import("../view.js").default} axisParent
          */
@@ -644,6 +654,22 @@ export default class GridChild {
         );
     }
 
+    /**
+     * Disposes axis and gridline views so axes can be recreated safely.
+     */
+    disposeAxisViews() {
+        for (const axisView of Object.values(this.axes)) {
+            axisView.disposeSubtree();
+        }
+
+        for (const gridView of Object.values(this.gridLines)) {
+            gridView.disposeSubtree();
+        }
+
+        this.axes = {};
+        this.gridLines = {};
+    }
+
     getOverhang() {
         const calculate = (
             /** @type {import("../../spec/axis.js").AxisOrient} */ orient

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

@@ -43,6 +43,37 @@ export default class GridView extends ContainerView {
      * @param {View} view
      */
     appendChild(view: import("../view.js").default): void;
+    /**
+     * Appends a child view without initializing dataflow or axes.
+     * Intended for ConcatView when building the initial hierarchy.
+     *
+     * @param {View} view
+     * @returns {GridChild}
+     */
+    appendChildView(view: import("../view.js").default): GridChild;
+    /**
+     * Inserts a child view without initializing dataflow or axes.
+     * Callers should create axes, initialize subtree data, and request layout.
+     *
+     * @param {View} view
+     * @param {number} index
+     * @returns {GridChild}
+     */
+    insertChildViewAt(view: import("../view.js").default, index: number): GridChild;
+    /**
+     * Removes a child by instance and disposes its subtree.
+     * Callers should sync shared axes and request layout.
+     *
+     * @param {View} view
+     */
+    removeChildView(view: import("../view.js").default): void;
+    /**
+     * Removes a child by index and disposes its subtree.
+     * Callers should sync shared axes and request layout.
+     *
+     * @param {number} index
+     */
+    removeChildAt(index: number): void;
     /**
      * @param {View[]} views
      */
@@ -55,10 +86,17 @@ export default class GridView extends ContainerView {
     /**
      * @protected
      */
-    protected createAxes(): Promise<void[]>;
+    protected createAxes(): Promise<void>;
+    /**
+     * Recreates shared axes based on current axis resolutions.
+     *
+     * This is used after dynamic child insert/remove to keep shared axes in sync.
+     */
+    syncSharedAxes(): Promise<void>;
     #private;
 }
 import AxisView from "../axisView.js";
 import Rectangle from "../layout/rectangle.js";
 import ContainerView from "../containerView.js";
+import GridChild from "./gridChild.js";
 //# sourceMappingURL=gridView.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"gridView.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/gridView.js"],"names":[],"mappings":"AAkzBA;;GAEG;AACH,+EAUC;AAED;;;;;GAKG;AACH,4CAJW,OAAO,wBAAwB,EAAE,OAAO,UACxC,OAAO,oBAAoB,EAAE,UAAU,YACvC,QAAQ,aAmBlB;AAr0BD;;;;;;;;;;;;;;;GAeG;AACH;IA6BI;;;;;;;;;OASG;IACH,kBARW,OAAO,oBAAoB,EAAE,aAAa,WAC1C,OAAO,4BAA4B,EAAE,OAAO,gBAC5C,aAAa,kDAEb,MAAM,WACN,MAAM,YACN,OAAO,YAAY,EAAE,WAAW,EAoB1C;IARG,iDAAgB;IAOhB,uBAA0B;IAG9B;;OAEG;IACH,sDAIC;IAeD;;OAEG;IACH,mBAFW,8BAAM,QAUhB;IA+BD;;OAEG;IACH,+CAEC;IAED,yBAEC;IAED;;OAEG;IACH,wCAmCC;;CAwkBJ;qBA3wB0D,gBAAgB;sBADrD,wBAAwB;0BAEpB,qBAAqB"}
+{"version":3,"file":"gridView.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/gridView.js"],"names":[],"mappings":"AA42BA;;GAEG;AACH,+EAUC;AAED;;;;;GAKG;AACH,4CAJW,OAAO,wBAAwB,EAAE,OAAO,UACxC,OAAO,oBAAoB,EAAE,UAAU,YACvC,QAAQ,aAmBlB;AA/3BD;;;;;;;;;;;;;;;GAeG;AACH;IAoCI;;;;;;;;;OASG;IACH,kBARW,OAAO,oBAAoB,EAAE,aAAa,WAC1C,OAAO,4BAA4B,EAAE,OAAO,gBAC5C,aAAa,kDAEb,MAAM,WACN,MAAM,YACN,OAAO,YAAY,EAAE,WAAW,EAoB1C;IARG,iDAAgB;IAOhB,uBAA0B;IAG9B;;OAEG;IACH,sDAEC;IAED;;;;;;OAMG;IACH,qDAFa,SAAS,CAIrB;IAED;;;;;;;OAOG;IACH,6DAHW,MAAM,GACJ,SAAS,CAQrB;IAED;;;;;OAKG;IACH,0DAQC;IAED;;;;;OAKG;IACH,qBAFW,MAAM,QAShB;IAeD;;OAEG;IACH,mBAFW,8BAAM,QAUhB;IAYD;;OAEG;IACH,+CAEC;IAED,yBAEC;IAED;;OAEG;IACH,sCAKC;IAED;;;;OAIG;IACH,gCAqCC;;CAwkBJ;qBAr0B0D,gBAAgB;sBADrD,wBAAwB;0BAEpB,qBAAqB;sBAIzB,gBAAgB"}

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

@@ -34,6 +34,13 @@ import GridChild from "./gridChild.js";
  * - And later on, brushing, legend(?)
  */
 export default class GridView extends ContainerView {
+    /**
+     * Users guide:
+     * - GridView owns GridChild instances and manages decorations and shared axes.
+     * - Use ConcatView helpers for dynamic insertion/removal so dataflow and axes
+     *   lifecycle stays consistent.
+     */
+
     /**
      * @typedef {"row" | "column"} Direction
      * @typedef {"horizontal" | "vertical"} ScrollDirection
@@ -96,9 +103,65 @@ export default class GridView extends ContainerView {
      * @param {View} view
      */
     appendChild(view) {
+        this.appendChildView(view);
+    }
+
+    /**
+     * Appends a child view without initializing dataflow or axes.
+     * Intended for ConcatView when building the initial hierarchy.
+     *
+     * @param {View} view
+     * @returns {GridChild}
+     */
+    appendChildView(view) {
+        return this.insertChildViewAt(view, this.#children.length);
+    }
+
+    /**
+     * Inserts a child view without initializing dataflow or axes.
+     * Callers should create axes, initialize subtree data, and request layout.
+     *
+     * @param {View} view
+     * @param {number} index
+     * @returns {GridChild}
+     */
+    insertChildViewAt(view, index) {
         view.layoutParent ??= this;
-        this.#children.push(new GridChild(view, this, this.#childSerial));
+        const gridChild = new GridChild(view, this, this.#childSerial);
         this.#childSerial++;
+        this.#children.splice(index, 0, gridChild);
+        return gridChild;
+    }
+
+    /**
+     * Removes a child by instance and disposes its subtree.
+     * Callers should sync shared axes and request layout.
+     *
+     * @param {View} view
+     */
+    removeChildView(view) {
+        const index = this.#children.findIndex(
+            (gridChild) => gridChild.view === view
+        );
+        if (index < 0) {
+            throw new Error("Not my child view!");
+        }
+        this.removeChildAt(index);
+    }
+
+    /**
+     * Removes a child by index and disposes its subtree.
+     * Callers should sync shared axes and request layout.
+     *
+     * @param {number} index
+     */
+    removeChildAt(index) {
+        const gridChild = this.#children[index];
+        if (!gridChild) {
+            throw new Error("Child index out of range!");
+        }
+        this.#disposeGridChild(gridChild);
+        this.#children.splice(index, 1);
     }
 
     get #visibleChildren() {
@@ -127,30 +190,11 @@ export default class GridView extends ContainerView {
         }
     }
 
-    /**
-     * @param {View} child
-     * @param {View} replacement
-     */
-    replaceChild(child, replacement) {
-        const i = this.#children.findIndex(
-            (gridChild) => gridChild.view == child
-        );
-        if (i >= 0) {
-            this.#disposeGridChild(this.#children[i]);
-            this.#children[i] = new GridChild(
-                replacement,
-                this,
-                this.#childSerial
-            );
-        } else {
-            throw new Error("Not my child view!");
-        }
-    }
-
     /**
      * @param {GridChild} gridChild
      */
     #disposeGridChild(gridChild) {
+        gridChild.disposeAxisViews();
         for (const view of gridChild.getChildren()) {
             view.disposeSubtree();
         }
@@ -171,40 +215,54 @@ export default class GridView extends ContainerView {
      * @protected
      */
     async createAxes() {
+        await this.syncSharedAxes();
+        await Promise.all(
+            this.#children.map((gridChild) => gridChild.createAxes())
+        );
+    }
+
+    /**
+     * Recreates shared axes based on current axis resolutions.
+     *
+     * This is used after dynamic child insert/remove to keep shared axes in sync.
+     */
+    async syncSharedAxes() {
+        for (const axisView of Object.values(this.#sharedAxes)) {
+            axisView.disposeSubtree();
+        }
+        this.#sharedAxes = {};
+
         /** @type {Promise<void>[]} */
         const promises = [];
 
-        // Axis ticks, labels, etc. They should be created only if this view has caught
-        // the scale resolution for the channel.
         for (const channel of primaryPositionalChannels) {
             const r = this.resolutions.axis[channel];
-            if (r) {
-                const props = r.getAxisProps();
-                if (props) {
-                    const propsWithDefaults = {
-                        title: r.getTitle(),
-                        orient: CHANNEL_ORIENTS[channel][0],
-                        ...props,
-                    };
-                    // TODO: Validate that channel and orient are compatible
-                    const v = new AxisView(
-                        propsWithDefaults,
-                        r.scaleResolution.type,
-                        this.context,
-                        this,
-                        this
-                    );
-                    promises.push(v.initializeChildren());
-                    this.#sharedAxes[channel] = v;
-                }
+            if (!r) {
+                continue;
             }
+
+            const props = r.getAxisProps();
+            if (!props) {
+                continue;
+            }
+
+            const propsWithDefaults = {
+                title: r.getTitle(),
+                orient: CHANNEL_ORIENTS[channel][0],
+                ...props,
+            };
+            const axisView = new AxisView(
+                propsWithDefaults,
+                r.scaleResolution.type,
+                this.context,
+                this,
+                this
+            );
+            promises.push(axisView.initializeChildren());
+            this.#sharedAxes[channel] = axisView;
         }
 
-        // Create view decorations, grid lines, and independent axes for each child
-        return Promise.all([
-            ...promises,
-            ...this.#children.map((gridChild) => gridChild.createAxes()),
-        ]);
+        await Promise.all(promises);
     }
 
     /**
@@ -797,7 +855,7 @@ export default class GridView extends ContainerView {
  * @returns
  */
 function getZoomableResolutions(view) {
-    /** @type {Record<import("../../spec/channel.js").PrimaryPositionalChannel, Set<import("../scaleResolution.js").default>>} */
+    /** @type {Record<import("../../spec/channel.js").PrimaryPositionalChannel, Set<import("../../scales/scaleResolution.js").default>>} */
     const resolutions = {
         x: new Set(),
         y: new Set(),

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

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

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

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

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

@@ -1,31 +1,62 @@
 /**
+ * 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 {
     /**
      * @param {import("./gridChild.js").default} gridChild
      * @param {ScrollDirection} scrollDirection
+     * @param {{ onViewportOffsetChange?: (offset: number) => void }} [options]
+     */
+    constructor(gridChild: import("./gridChild.js").default, scrollDirection: ScrollDirection, options?: {
+        onViewportOffsetChange?: (offset: number) => void;
+    });
+    /**
+     * 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.
      */
-    constructor(gridChild: import("./gridChild.js").default, scrollDirection: ScrollDirection);
     viewportOffset: number;
     config: {
         scrollbarSize: number;
         scrollbarPadding: number;
-    };
-    interpolateViewportOffset: ((target: {
-        x: number;
-    }) => void) & {
-        stop: () => void;
+        scrollbarMinLength: number;
     };
     get scrollOffset(): number;
     /**
+     * @param {number} value
+     * @param {{ notify?: boolean, syncSmoother?: boolean }} [options]
+     */
+    setViewportOffset(value: number, { notify, syncSmoother }?: {
+        notify?: boolean;
+        syncSmoother?: boolean;
+    }): void;
+    /**
+     * 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: Rectangle, coords: Rectangle): void;
+    updateScrollbar(viewportCoords: Rectangle, contentCoords: Rectangle): void;
+    interpolateViewportOffset: ((target: {
+        x: number;
+    }) => void) & {
+        stop: () => void;
+    };
     #private;
 }
+/**
+ * This class represents a scrollbar thumb that can be used within a grid view
+ * to provide scrolling functionality for overflowing content.
+ */
 export type ScrollDirection = "horizontal" | "vertical";
 import UnitView from "../unitView.js";
 import Rectangle from "../layout/rectangle.js";

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

@@ -1 +1 @@
-{"version":3,"file":"scrollbar.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/scrollbar.js"],"names":[],"mappings":"AAKA;;GAEG;AACH;IAeI;;;OAGG;IACH,uBAHW,OAAO,gBAAgB,EAAE,OAAO,mBAChC,eAAe,EA2FzB;IA/FD,uBAAmB;IAsCf;;;MAAoB;IAIpB;;;;MAQC;IA+CL,2BAKC;IAWD;;;;OAIG;IACH,gCAHW,SAAS,UACT,SAAS,QA8CnB;;CACJ;8BAlLY,YAAY,GAAG,UAAU;qBAHjB,gBAAgB;sBADf,wBAAwB"}
+{"version":3,"file":"scrollbar.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/scrollbar.js"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH;IAwBI;;;;OAIG;IACH,uBAJW,OAAO,gBAAgB,EAAE,OAAO,mBAChC,eAAe,YACf;QAAE,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;KAAE,EAwH/D;IAvID;;;;;;OAMG;IACH,uBAAmB;IAiDf;;;;MAAoB;IAiFxB,2BAEC;IAED;;;OAGG;IACH,yBAHW,MAAM,6BACN;QAAE,MAAM,CAAC,EAAE,OAAO,CAAC;QAAC,YAAY,CAAC,EAAE,OAAO,CAAA;KAAE,QAYtD;IAqFD;;;;;;;;;OASG;IACH,gCAHW,SAAS,iBACT,SAAS,QASnB;IAMG;;;;MAWC;;CAER;;;;;8BAlSY,YAAY,GAAG,UAAU;qBANjB,gBAAgB;sBADf,wBAAwB"}