@genome-spy/core 0.65.0 → 0.67.0

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

@@ -1 +1 @@
-{"version":3,"file":"facetView.d.ts","sourceRoot":"","sources":["../../../src/view/facetView.js"],"names":[],"mappings":"AAmDA;;;;;;;;;;;;;;GAcG;AACH;IACI;;;;;;;OAOG;IACH;;;;;;OAMG;IACH,kBALW,OAAO,gBAAgB,EAAE,SAAS,WAClC,OAAO,gBAAgB,EAAE,WAAW,UACpC,aAAa,QACb,MAAM,EA8BhB;IAzBG,UAAgB;IAEhB,WAEC;IAED;;;;OAIG;IACH,aAFU,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,CAYvC;IAED,oDAAoD;IACpD,kBADY,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,CACa;IA4BjE,sBAIC;IAED;;;OAGG;IACH,qBAFW,KAAK,GAAG,QAAQ,OAwB1B;IAED,qBAyCC;IAED,qBASC;IA6BD,kDAgBC;IAOD;;;;OAIG;IACH,gBAJW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,WAAW,EAAE,gBAAgB,QA2L9C;IA3KO,wBAA0B;CA4KrC;2BAhcY,QAAQ,GAAG,KAAK;;;;;;aA4CnB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE;;;0BA1Df,oBAAoB;qBACzB,eAAe"}
+{"version":3,"file":"facetView.d.ts","sourceRoot":"","sources":["../../../src/view/facetView.js"],"names":[],"mappings":"AAmDA;;;;;;;;;;;;;;GAcG;AACH;IACI;;;;;;;OAOG;IACH;;;;;;OAMG;IACH,kBALW,OAAO,gBAAgB,EAAE,SAAS,WAClC,OAAO,gBAAgB,EAAE,WAAW,UACpC,aAAa,QACb,MAAM,EA8BhB;IAzBG,UAAgB;IAEhB,WAEC;IAED;;;;OAIG;IACH,aAFU,MAAM,CAAC,YAAY,EAAE,QAAQ,CAAC,CAYvC;IAED,oDAAoD;IACpD,kBADY,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,CACa;IAajE,sBAIC;IAED;;;OAGG;IACH,qBAFW,KAAK,GAAG,QAAQ,OAwB1B;IAED,qBAyCC;IAED,qBASC;IA6BD,kDAgBC;IAOD;;;;OAIG;IACH,gBAJW,OAAO,4CAA4C,EAAE,OAAO,UAC5D,OAAO,uBAAuB,EAAE,OAAO,YACvC,OAAO,WAAW,EAAE,gBAAgB,QA2L9C;IA3KO,wBAA0B;CA4KrC;2BAjbY,QAAQ,GAAG,KAAK;;;;;;aA4CnB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE;;;0BA1Df,oBAAoB;qBACzB,eAAe"}

package/dist/src/view/facetView.js

@@ -120,21 +120,6 @@ export default class FacetView extends ContainerView {
         }
     }
 
-    /**
-     * @param {import("./view.js").default} child
-     * @param {import("./view.js").default} replacement
-     */
-    replaceChild(child, replacement) {
-        if (child !== this.child) {
-            throw new Error("Not my child!");
-        }
-
-        child.disposeSubtree();
-        this.child = /** @type {UnitView | LayerView | DecoratorView} */ (
-            replacement
-        );
-    }
-
     transformData() {
         super.transformData();
         // A hacky solution for updating facets. TODO: Something more robust.

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

@@ -2,16 +2,18 @@
  * @param {View} root
  * @param {DataFlow} [existingFlow] Add data flow
  *      graphs to an existing DataFlow object.
+ * @param {(view: View) => boolean} [viewFilter]
+ * @param {(view: View) => boolean} [viewInitializationPredicate]
  */
-export function buildDataFlow(root: import("./view.js").default, existingFlow?: DataFlow): DataFlow;
+export function buildDataFlow(root: import("./view.js").default, existingFlow?: DataFlow, viewFilter?: (view: import("./view.js").default) => boolean, viewInitializationPredicate?: (view: import("./view.js").default) => boolean): DataFlow;
 /**
  * Changes the ChromPos channelDefs into FieldDefs and returns
  * LinearizeGenomicCoordinate transform(s) that should be inserted into
  * the data flow.
  *
- * @param {View} view
+ * @param {import("./unitView.js").default} view
  */
-export function linearizeLocusAccess(view: import("./view.js").default): {
+export function linearizeLocusAccess(view: import("./unitView.js").default): {
     transforms: import("../data/flowNode.js").default[];
     rewrittenEncoding: import("../spec/channel.js").Encoding;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"flowBuilder.d.ts","sourceRoot":"","sources":["../../../src/view/flowBuilder.js"],"names":[],"mappings":"AAwBA;;;;GAIG;AACH,gFAHW,QAAQ,YAmNlB;AAED;;;;;;GAMG;AACH;;;IAgGc;;;OAGG;;EAYhB;AAgCD;;;;;;GAMG;AACH,4BAFwB,CAAC,SAAZ,qCAAU,cAFZ,CAAC,iBACA,uCAAW;;;0BAwBG,OAAO,CAAC,QAAQ,CAAC,OAAO,qBAAqB,EAAE,KAAK,CAAC,CAAC;EAkB/E;qBA7aoB,qBAAqB;sBANpB,sBAAsB"}
+{"version":3,"file":"flowBuilder.d.ts","sourceRoot":"","sources":["../../../src/view/flowBuilder.js"],"names":[],"mappings":"AAyBA;;;;;;GAMG;AACH,gFALW,QAAQ,eAER,CAAC,IAAI,6BAAM,KAAK,OAAO,gCACvB,CAAC,IAAI,6BAAM,KAAK,OAAO,YAoPjC;AAuBD;;;;;;GAMG;AACH,2CAFW,OAAO,eAAe,EAAE,OAAO;;;IAuG5B;;;OAGG;;EAYhB;AAgCD;;;;;;GAMG;AACH,4BAFwB,CAAC,SAAZ,qCAAU,cAFZ,CAAC,iBACA,uCAAW;;;0BAwBG,OAAO,CAAC,QAAQ,CAAC,OAAO,qBAAqB,EAAE,KAAK,CAAC,CAAC;EAkB/E;qBA3eoB,qBAAqB;sBAPpB,sBAAsB"}

package/dist/src/view/flowBuilder.js

@@ -2,6 +2,7 @@ import Collector from "../data/collector.js";
 import createTransform from "../data/transforms/transformFactory.js";
 import createDataSource from "../data/sources/dataSourceFactory.js";
 import UnitView from "./unitView.js";
+import { VISIT_SKIP } from "./view.js";
 import { BEHAVIOR_MODIFIES } from "../data/flowNode.js";
 import CloneTransform from "../data/transforms/clone.js";
 import DataFlow from "../data/dataFlow.js";
@@ -26,8 +27,15 @@ import { nodesToTreesWithAccessor, visitTree } from "../utils/trees.js";
  * @param {View} root
  * @param {DataFlow} [existingFlow] Add data flow
  *      graphs to an existing DataFlow object.
+ * @param {(view: View) => boolean} [viewFilter]
+ * @param {(view: View) => boolean} [viewInitializationPredicate]
  */
-export function buildDataFlow(root, existingFlow) {
+export function buildDataFlow(
+    root,
+    existingFlow,
+    viewFilter,
+    viewInitializationPredicate
+) {
     /**
      * @typedef {import("./view.js").default} View
      * @typedef {import("../data/flowNode.js").default} FlowNode
@@ -47,6 +55,8 @@ export function buildDataFlow(root, existingFlow) {
     /** @type {(function():void)[]} */
     const postProcessOps = [];
 
+    const shouldInitializeView = viewInitializationPredicate ?? (() => true);
+
     /**
      * @param {FlowNode} node
      * @param {function():Error} [onMissingParent]
@@ -121,6 +131,27 @@ export function buildDataFlow(root, existingFlow) {
 
     /** @param {View} view */
     const processView = (view) => {
+        if (!shouldInitializeView(view)) {
+            const flowNode = view.flowHandle?.node;
+            if (flowNode) {
+                if (flowNode !== currentNode) {
+                    currentNode = flowNode;
+                    nodeStack.push(flowNode);
+                }
+                return;
+            }
+            if (
+                view.spec.data ||
+                view.spec.transform ||
+                view instanceof UnitView
+            ) {
+                throw new Error(
+                    "Cannot reuse missing flow nodes for " +
+                        view.getPathString()
+                );
+            }
+            return;
+        }
         if (view.spec.data) {
             const previousDataSource = view.flowHandle?.dataSource;
             if (
@@ -205,12 +236,18 @@ export function buildDataFlow(root, existingFlow) {
             view.flowHandle ??= {};
             view.flowHandle.collector = collector;
         }
+
+        if (currentNode) {
+            view.flowHandle ??= {};
+            view.flowHandle.node = currentNode;
+        }
     };
 
     // Views only keep track of their children based on the layout hierachy.
     // Thus, let's get traversable hierarchies using dataParents.
+    const views = collectSubtreeViews(root, viewFilter);
     const dataTrees = nodesToTreesWithAccessor(
-        root.getDescendants(),
+        views,
         (view) => view.dataParent
     );
 
@@ -237,16 +274,36 @@ export function buildDataFlow(root, existingFlow) {
     return dataFlow;
 }
 
+/**
+ * @param {import("./view.js").default} root
+ * @param {(view: import("./view.js").default) => boolean} [viewFilter]
+ * @returns {import("./view.js").default[]}
+ */
+function collectSubtreeViews(root, viewFilter) {
+    if (!viewFilter) {
+        return root.getDescendants();
+    }
+
+    /** @type {import("./view.js").default[]} */
+    const views = [];
+    root.visit((view) => {
+        if (!viewFilter(view)) {
+            return VISIT_SKIP;
+        }
+        views.push(view);
+    });
+    return views;
+}
+
 /**
  * Changes the ChromPos channelDefs into FieldDefs and returns
  * LinearizeGenomicCoordinate transform(s) that should be inserted into
  * the data flow.
  *
- * @param {View} view
+ * @param {import("./unitView.js").default} view
  */
 export function linearizeLocusAccess(view) {
     /**
-     * @typedef {import("./view.js").default} View
      * @typedef {import("../data/flowNode.js").default} FlowNode
      * @typedef {import("../spec/channel.js").Channel} Channel
      * @typedef {import("../spec/channel.js").Encoding} Encoding
@@ -258,12 +315,18 @@ export function linearizeLocusAccess(view) {
     /** @type {Encoding} */
     const rewrittenEncoding = {};
 
+    // Use mark.encoding so we see the same channel defs that encoders consume,
+    // including inherited channels and mark defaults. getEncoding() only returns
+    // spec/inherited encodings and can omit channels during lazy init (e.g.,
+    // summary views that inherit chrom/pos), which would skip chrom/pos rewrites.
+    const encoding = view.mark.encoding;
+
     /** @type {{ channel: Channel, chromPosDef: import("../spec/channel.js").ChromPosDef}[]} */
     const channelsAndChromPosDefs = [];
 
     // Optimize the number of transforms. Use only a single transform for positions
     // that share the chromosome field and channel.
-    for (const [c, channelDef] of Object.entries(view.getEncoding())) {
+    for (const [c, channelDef] of Object.entries(encoding)) {
         const channel = /** @type {Channel} */ (c);
         if (isPositionalChannel(channel) && isChromPosDef(channelDef)) {
             channelsAndChromPosDefs.push({ channel, chromPosDef: channelDef });
@@ -302,7 +365,7 @@ export function linearizeLocusAccess(view) {
                 /** @type {any} */
                 const newFieldDef = {
                     ...(view.spec.encoding?.[channel] ??
-                        view.getEncoding()[channel] ??
+                        encoding[channel] ??
                         {}),
                     field: linearizedField,
                 };

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

@@ -9,6 +9,13 @@ export function createBackground(viewBackground: import("../../spec/view.js").Vi
  */
 export function createBackgroundStroke(viewBackground: import("../../spec/view.js").ViewBackground): import("../../spec/view.js").UnitSpec;
 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
@@ -39,6 +46,10 @@ export default class GridChild {
      * Create view decorations, grid lines, axes, etc.
      */
     createAxes(): Promise<void>;
+    /**
+     * Disposes axis and gridline views so axes can be recreated safely.
+     */
+    disposeAxisViews(): void;
     getOverhang(): Padding;
     getOverhangAndPadding(): Padding;
     #private;

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

@@ -1 +1 @@
-{"version":3,"file":"gridChild.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/gridChild.js"],"names":[],"mappings":"AAkqBA;;;GAGG;AACH,iDAHW,OAAO,oBAAoB,EAAE,cAAc,GACzC,OAAO,oBAAoB,EAAE,QAAQ,CA8BjD;AAED;;;GAGG;AACH,uDAHW,OAAO,oBAAoB,EAAE,cAAc,GACzC,OAAO,oBAAoB,EAAE,QAAQ,CA6CjD;AAhuBD;IACI;;;;OAIG;IACH,kBAJW,OAAO,YAAY,EAAE,OAAO,gBAC5B,OAAO,qBAAqB,EAAE,OAAO,UACrC,MAAM,EAyFhB;IAtFG,oDAAgC;IAChC,mCAAgB;IAChB,eAAoB;IAEpB,uBAAuB;IACvB,YADW,QAAQ,CACQ;IAE3B,uBAAuB;IACvB,kBADW,QAAQ,CACc;IAEjC,sFAAsF;IACtF,MADW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAC/D;IAEd,+FAA+F;IAC/F,WADW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAC9D;IAEnB,mFAAmF;IACnF,YADW,OAAO,CAAC,MAAM,CAAC,OAAO,gBAAgB,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAC3D;IAEpB,4BAA4B;IAC5B,eADW,aAAa,CACM;IAE9B,uBAAuB;IACvB,OADW,QAAQ,CACG;IAEtB,wBAAwB;IACxB,QADW,SAAS,CACQ;IAoZhC,sEAiBC;IAED;;OAEG;IACH,4BAsKC;IAED,uBAqBC;IAED,iCAEC;;CACJ;qBAjpBoB,gBAAgB;qBANK,gBAAgB;yBADjC,oBAAoB;sBAQvB,gBAAgB;0BACZ,oBAAoB;sBAJxB,wBAAwB;oBAF1B,sBAAsB"}
+{"version":3,"file":"gridChild.d.ts","sourceRoot":"","sources":["../../../../src/view/gridView/gridChild.js"],"names":[],"mappings":"AA4rBA;;;GAGG;AACH,iDAHW,OAAO,oBAAoB,EAAE,cAAc,GACzC,OAAO,oBAAoB,EAAE,QAAQ,CA8BjD;AAED;;;GAGG;AACH,uDAHW,OAAO,oBAAoB,EAAE,cAAc,GACzC,OAAO,oBAAoB,EAAE,QAAQ,CA6CjD;AA1vBD;IACI;;;;;;OAMG;IAEH;;;;OAIG;IACH,kBAJW,OAAO,YAAY,EAAE,OAAO,gBAC5B,OAAO,qBAAqB,EAAE,OAAO,UACrC,MAAM,EAyFhB;IAtFG,oDAAgC;IAChC,mCAAgB;IAChB,eAAoB;IAEpB,uBAAuB;IACvB,YADW,QAAQ,CACQ;IAE3B,uBAAuB;IACvB,kBADW,QAAQ,CACc;IAEjC,sFAAsF;IACtF,MADW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC,CAC/D;IAEd,+FAA+F;IAC/F,WADW,OAAO,CAAC,MAAM,CAAC,OAAO,oBAAoB,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC,CAC9D;IAEnB,mFAAmF;IACnF,YADW,OAAO,CAAC,MAAM,CAAC,OAAO,gBAAgB,EAAE,eAAe,EAAE,SAAS,CAAC,CAAC,CAC3D;IAEpB,4BAA4B;IAC5B,eADW,aAAa,CACM;IAE9B,uBAAuB;IACvB,OADW,QAAQ,CACG;IAEtB,wBAAwB;IACxB,QADW,SAAS,CACQ;IAoZhC,sEAiBC;IAED;;OAEG;IACH,4BAwKC;IAED;;OAEG;IACH,yBAWC;IAED,uBAqBC;IAED,iCAEC;;CACJ;qBA3qBoB,gBAAgB;qBANK,gBAAgB;yBADjC,oBAAoB;sBAQvB,gBAAgB;0BACZ,oBAAoB;sBAJxB,wBAAwB;oBAF1B,sBAAsB"}

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";