@genome-spy/core 0.78.0 → 0.79.0

package/dist/src/utils/suspension.js

@@ -0,0 +1,41 @@
+/**
+ * Reference-counted suspension guard. Nested suspensions are supported and the
+ * resume callback runs only when the outermost release happens.
+ */
+export default class Suspension {
+    #count = 0;
+
+    /** @type {() => void} */
+    #onResume;
+
+    /**
+     * @param {() => void} [onResume]
+     */
+    constructor(onResume = () => undefined) {
+        this.#onResume = onResume;
+    }
+
+    get active() {
+        return this.#count > 0;
+    }
+
+    /**
+     * @returns {() => void}
+     */
+    suspend() {
+        this.#count += 1;
+        let released = false;
+
+        return () => {
+            if (released) {
+                return;
+            }
+
+            released = true;
+            this.#count -= 1;
+            if (this.#count == 0) {
+                this.#onResume();
+            }
+        };
+    }
+}

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

@@ -1 +1 @@
-{"version":3,"file":"axisGridView.d.ts","sourceRoot":"","sources":["../../../src/view/axisGridView.js"],"names":[],"mappings":"AAIA;;;GAGG;AAEH;;;;;;GAMG;AACH;IACI;;;;;;;OAOG;IACH,uBAPW,IAAI,QAEJ,MAAM,WADN,OAAO,yBAAyB,EAAE,OAAO,gBAEzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,YAC3B,OAAO,WAAW,EAAE,WAAW,EAmBzC;IAJG,0CAA0B;IAM9B,kDAEC;CAKJ;gCA9CY,OAAO,oBAAoB,EAAE,wBAAwB;iCACrD,OAAO,iBAAiB,EAAE,kBAAkB;;;;mBAM5C,OAAO,WAAW,EAAE,OAAO;;;;mBAC3B,OAAO,iBAAiB,EAAE,IAAI;;;;yBAC9B,OAAO,iBAAiB,EAAE,UAAU;sBAd3B,gBAAgB"}
+{"version":3,"file":"axisGridView.d.ts","sourceRoot":"","sources":["../../../src/view/axisGridView.js"],"names":[],"mappings":"AAIA;;;GAGG;AAEH;;;;;;GAMG;AACH;IACI;;;;;;;OAOG;IACH,uBAPW,IAAI,QAEJ,MAAM,WADN,OAAO,yBAAyB,EAAE,OAAO,gBAEzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,YAC3B,OAAO,WAAW,EAAE,WAAW,EAgBzC;IAJG,0CAA0B;IAM9B,kDAEC;CAKJ;gCA3CY,OAAO,oBAAoB,EAAE,wBAAwB;iCACrD,OAAO,iBAAiB,EAAE,kBAAkB;;;;mBAM5C,OAAO,WAAW,EAAE,OAAO;;;;mBAC3B,OAAO,iBAAiB,EAAE,IAAI;;;;yBAC9B,OAAO,iBAAiB,EAAE,UAAU;sBAd3B,gBAAgB"}

package/dist/src/view/axisGridView.js

@@ -30,10 +30,7 @@ export default class AxisGridView extends LayerView {
             layoutParent,
             dataParent,
             `axisGrid_${axisProps.orient}`,
-            {
-                blockEncodingInheritance: true,
-                ...options,
-            }
+            options
         );
 
         this.axisProps = axisProps;

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

@@ -2,6 +2,14 @@
  * @param {AxisOrient} slot
  */
 export function orient2channel(slot: import("../spec/axis.js").AxisOrient): import("../spec/channel.js").PrimaryPositionalChannel;
+/**
+ * Returns the horizontal or vertical space reserved by an outside axis.
+ * Inside axes are drawn over the plot and therefore reserve no external space.
+ *
+ * @param {AxisView | undefined} axisView
+ * @returns {number}
+ */
+export function getExternalAxisOverhang(axisView: AxisView | undefined): number;
 /**
  * @param {GenomeAxis} axisProps
  * @param {string} type
@@ -31,6 +39,9 @@ export default class AxisView extends LayerView<import("../spec/view.js").LayerS
      * @typedef {import("../spec/axis.js").GenomeAxis} GenomeAxis
      * @typedef {import("../spec/axis.js").AxisOrient} AxisOrient
      * @typedef {import("./layout/flexLayout.js").SizeDef} SizeDef
+     * @typedef {import("./view.js").ViewOptions & {
+     *     labelClipPolicy?: AxisLabelClipPolicy
+     * }} AxisViewOptions
      */
     /**
      * @param {Axis} axisProps
@@ -38,12 +49,17 @@ export default class AxisView extends LayerView<import("../spec/view.js").LayerS
      * @param {string} type Data type (quantitative, ..., locus)
      * @param {import("./containerView.js").default} layoutParent
      * @param {import("./view.js").default} dataParent
-     * @param {import("./view.js").ViewOptions} [options]
+     * @param {AxisViewOptions} [options]
      */
-    constructor(axisProps: import("../spec/axis.js").Axis, type: string, context: import("../types/viewContext.js").default, layoutParent: import("./containerView.js").default, dataParent: import("./view.js").default, options?: import("./view.js").ViewOptions);
+    constructor(axisProps: import("../spec/axis.js").Axis, type: string, context: import("../types/viewContext.js").default, layoutParent: import("./containerView.js").default, dataParent: import("./view.js").default, options?: import("../types/viewContext.js").ViewOptions & {
+        labelClipPolicy?: AxisLabelClipPolicy;
+    });
+    /** @type {AxisLabelClipPolicy} */
+    labelClipPolicy: AxisLabelClipPolicy;
     axisProps: import("../spec/axis.js").Axis | import("../spec/axis.js").GenomeAxis;
     getPerpendicularSize(): number;
     #private;
 }
+export type AxisLabelClipPolicy = "pixel" | "anchor";
 import LayerView from "./layerView.js";
 //# sourceMappingURL=axisView.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"axisView.d.ts","sourceRoot":"","sources":["../../../src/view/axisView.js"],"names":[],"mappings":"AAuCA;;GAEG;AACH,kIAEC;AAshBD;;;;GAIG;AACH,wFAHW,MAAM,uCAqNhB;AAnwBD;;GAEG;AACH,8BAFU,MAAM,CAAC,OAAO,oBAAoB,EAAE,wBAAwB,EAAE,sCAAY,CAAC,CAKnF;AAEF;;GAEG;AACH,8BAFU,MAAM,uCAAa,OAAO,oBAAoB,EAAE,wBAAwB,CAAC,CAMjF;AASF;;;;;GAKG;AACH;IAeI;;;;;;;;OAQG;IAEH;;;;;;;OAOG;IACH,6DALW,MAAM,WADN,OAAO,yBAAyB,EAAE,OAAO,gBAEzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,YAC3B,OAAO,WAAW,EAAE,WAAW,EAuDzC;IATG,iFAA8B;IA+ClC,+BAEC;;CAuEJ;sBAzPqB,gBAAgB"}
+{"version":3,"file":"axisView.d.ts","sourceRoot":"","sources":["../../../src/view/axisView.js"],"names":[],"mappings":"AA8CA;;GAEG;AACH,kIAEC;AAyCD;;;;;;GAMG;AACH,kDAHW,QAAQ,GAAG,SAAS,GAClB,MAAM,CAWlB;AAwlBD;;;;GAIG;AACH,wFAHW,MAAM,uCA4LhB;AAr2BD;;GAEG;AACH,8BAFU,MAAM,CAAC,OAAO,oBAAoB,EAAE,wBAAwB,EAAE,sCAAY,CAAC,CAKnF;AAEF;;GAEG;AACH,8BAFU,MAAM,uCAAa,OAAO,oBAAoB,EAAE,wBAAwB,CAAC,CAMjF;AAkEF;;;;;GAKG;AACH;IAeI;;;;;;;;;;;OAWG;IAEH;;;;;;;OAOG;IACH,6DALW,MAAM,WADN,OAAO,yBAAyB,EAAE,OAAO,gBAEzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO;0BATb,mBAAmB;OAwE3C;IAZG,kCAAkC;IAClC,iBADW,mBAAmB,CAC4B;IAE1D,iFAA8B;IA+ClC,+BAEC;;CA8EJ;kCAxTY,OAAO,GAAG,QAAQ;sBAhBT,gBAAgB"}

package/dist/src/view/axisView.js

@@ -1,8 +1,11 @@
+import { isContinuous } from "vega-scale";
+
 import LayerView from "./layerView.js";
 import { FlexDimensions } from "./layout/flexLayout.js";
 import UnitView from "./unitView.js";
 import { markViewAsChrome, markViewAsNonAddressable } from "./viewSelectors.js";
 import { getConfiguredAxisDefaults } from "../config/axisConfig.js";
+import { getProjectedTextExtent, getTextHeight } from "../fonts/textMetrics.js";
 
 const CHROM_LAYER_NAME = "chromosome_ticks_and_labels";
 const LABELS_LAYER_NAME = "labels_main";
@@ -12,6 +15,10 @@ const LABEL_WIDTH_FIELD = "_labelWidth";
 const Y_AXIS_LABEL_HEURISTIC_PX = 10;
 const AUTO_EXTENT_GROW_THRESHOLD_PX = 2;
 
+/**
+ * @typedef {"pixel" | "anchor"} AxisLabelClipPolicy
+ */
+
 /**
  * @param {import("../spec/channel.js").PrimaryPositionalChannel} channel
  * @returns {import("../spec/channel.js").PrimaryPositionalChannel}
@@ -44,6 +51,63 @@ export function orient2channel(slot) {
     return ORIENT_CHANNELS[slot];
 }
 
+/**
+ * @param {AxisOrient} orient
+ * @returns {AxisOrient}
+ */
+function getOppositeOrient(orient) {
+    switch (orient) {
+        case "left":
+            return "right";
+        case "right":
+            return "left";
+        case "top":
+            return "bottom";
+        case "bottom":
+            return "top";
+        default:
+            throw new Error("Invalid axis orient: " + orient);
+    }
+}
+
+/**
+ * @param {Axis} axisProps
+ */
+function getAxisGeometry(axisProps) {
+    const tickSide =
+        axisProps.placement === "inside"
+            ? getOppositeOrient(axisProps.orient)
+            : axisProps.orient;
+
+    const anchor = tickSide == "bottom" || tickSide == "left" ? 1 : 0;
+    const offsetDirection =
+        tickSide == "bottom" || tickSide == "right" ? 1 : -1;
+
+    return {
+        tickSide,
+        anchor,
+        offsetDirection,
+    };
+}
+
+/**
+ * Returns the horizontal or vertical space reserved by an outside axis.
+ * Inside axes are drawn over the plot and therefore reserve no external space.
+ *
+ * @param {AxisView | undefined} axisView
+ * @returns {number}
+ */
+export function getExternalAxisOverhang(axisView) {
+    if (!axisView || axisView.axisProps.placement === "inside") {
+        return 0;
+    }
+
+    return Math.max(
+        axisView.getPerpendicularSize() + (axisView.axisProps.offset ?? 0),
+        0
+    );
+}
+
 /**
  * An internal view that renders an axis.
  *
@@ -73,6 +137,9 @@ export default class AxisView extends LayerView {
      * @typedef {import("../spec/axis.js").GenomeAxis} GenomeAxis
      * @typedef {import("../spec/axis.js").AxisOrient} AxisOrient
      * @typedef {import("./layout/flexLayout.js").SizeDef} SizeDef
+     * @typedef {import("./view.js").ViewOptions & {
+     *     labelClipPolicy?: AxisLabelClipPolicy
+     * }} AxisViewOptions
      */
 
     /**
@@ -81,7 +148,7 @@ export default class AxisView extends LayerView {
      * @param {string} type Data type (quantitative, ..., locus)
      * @param {import("./containerView.js").default} layoutParent
      * @param {import("./view.js").default} dataParent
-     * @param {import("./view.js").ViewOptions} [options]
+     * @param {AxisViewOptions} [options]
      */
     constructor(axisProps, type, context, layoutParent, dataParent, options) {
         const channel = orient2channel(axisProps.orient);
@@ -101,32 +168,39 @@ export default class AxisView extends LayerView {
             ...axisProps,
         };
 
+        // Now the presence of genomeAxis is based on field type, not scale type.
+        // TODO: Use scale instead. However, it would make the initialization much more
+        // complex because scales are not available before scale resolution.
+        const genomeAxis = type == "locus";
+
         /** @type {Axis | GenomeAxis} */
         const fullAxisProps = {
             ...configuredDefaults,
             ...getDefaultAngleAndAlign(type, preliminaryAxisProps),
             ...axisProps,
+            ...(genomeAxis
+                ? getFixedGenomeAxisProps(preliminaryAxisProps)
+                : {}),
         };
 
-        // Now the presence of genomeAxis is based on field type, not scale type.
-        // TODO: Use scale instead. However, it would make the initialization much more
-        // complex because scales are not available before scale resolution.
-        const genomeAxis = type == "locus";
-
         super(
             genomeAxis
                 ? createGenomeAxis(fullAxisProps, type)
-                : createAxis(fullAxisProps, type),
+                : createAxis(
+                      fullAxisProps,
+                      type,
+                      options?.labelClipPolicy ?? "pixel"
+                  ),
             context,
             layoutParent,
             dataParent,
             `axis_${axisProps.orient}`,
-            {
-                blockEncodingInheritance: true,
-                ...options,
-            }
+            options
         );
 
+        /** @type {AxisLabelClipPolicy} */
+        this.labelClipPolicy = options?.labelClipPolicy ?? "pixel";
+
         this.axisProps = fullAxisProps;
         this.#effectiveExtent = getExtent(fullAxisProps);
         this.#axisExtentSetter = this.paramRuntime.allocateSetter(
@@ -225,6 +299,13 @@ export default class AxisView extends LayerView {
             return;
         }
 
+        if (scaleResolution) {
+            const scale = scaleResolution.getScale();
+            if (hasDegenerateContinuousDomain(scale)) {
+                return;
+            }
+        }
+
         const measuredLabelExtent = getMeasuredLabelExtent(
             this.axisProps,
             this.context,
@@ -249,6 +330,18 @@ export default class AxisView extends LayerView {
     }
 }
 
+/**
+ * @param {import("../types/encoder.js").VegaScale} scale
+ */
+function hasDegenerateContinuousDomain(scale) {
+    const domain = /** @type {unknown[]} */ (scale.domain());
+    return (
+        isContinuous(scale.type) &&
+        domain.length >= 2 &&
+        domain.every((value) => value === domain[0])
+    );
+}
+
 /**
  * @param {Axis} axisProps
  * @param {number} [measuredLabelExtent]
@@ -335,28 +428,48 @@ function getMeasuredLabelExtent(axisProps, context, labelsView) {
         return undefined;
     }
 
-    const labelHeight =
-        ((metrics.capHeight + metrics.descent) / metrics.common.base) *
-        axisProps.labelFontSize;
-
-    const radians = (axisProps.labelAngle * Math.PI) / 180;
-    const absSin = Math.abs(Math.sin(radians));
-    const absCos = Math.abs(Math.cos(radians));
-
-    const perpendicularExtent =
-        orient2channel(axisProps.orient) == "x"
-            ? maxWidth * absSin + labelHeight * absCos
-            : maxWidth * absCos + labelHeight * absSin;
+    const labelHeight = getTextHeight(metrics, axisProps.labelFontSize);
+    const perpendicularExtent = getProjectedTextExtent(
+        { width: maxWidth, height: labelHeight },
+        axisProps.labelAngle,
+        orient2channel(axisProps.orient) == "x" ? "vertical" : "horizontal"
+    );
 
     return Math.ceil(perpendicularExtent);
 }
 
+/**
+ * @param {GenomeAxis} axisProps
+ * @returns {Axis}
+ */
+function getFixedGenomeAxisProps(axisProps) {
+    switch (getAxisGeometry(axisProps).tickSide) {
+        case "bottom":
+        case "top":
+            return {};
+        case "left":
+            return {
+                labelAngle: -90,
+                labelAlign: "center",
+                labelPadding: 6,
+            };
+        case "right":
+            return {
+                labelAngle: 90,
+                labelAlign: "center",
+                labelPadding: 6,
+            };
+        default:
+            throw new Error("Invalid axis orient: " + axisProps.orient);
+    }
+}
+
 /**
  * @param {string} type
  * @param {Axis} axisProps
  */
 function getDefaultAngleAndAlign(type, axisProps) {
-    const orient = axisProps.orient;
+    const orient = getAxisGeometry(axisProps).tickSide;
     const discrete = type == "nominal" || type == "ordinal";
 
     /** @type {import("../spec/font.js").Align} */
@@ -400,9 +513,10 @@ function getDefaultAngleAndAlign(type, axisProps) {
 /**
  * @param {Axis} axisProps
  * @param {string} type
+ * @param {"pixel" | "anchor"} labelClipPolicy
  * @returns {LayerSpec}
  */
-function createAxis(axisProps, type) {
+function createAxis(axisProps, type, labelClipPolicy = "pixel") {
     // TODO: Ensure that no channels except the positional ones are shared
 
     const ap = axisProps;
@@ -410,10 +524,7 @@ function createAxis(axisProps, type) {
     const main = orient2channel(ap.orient);
     const secondary = getPerpendicularChannel(main);
 
-    const offsetDirection =
-        ap.orient == "bottom" || ap.orient == "right" ? 1 : -1;
-
-    const anchor = ap.orient == "bottom" || ap.orient == "left" ? 1 : 0;
+    const { anchor, offsetDirection, tickSide } = getAxisGeometry(ap);
 
     const makeMainDomainDef = () => ({
         field: "value",
@@ -455,7 +566,8 @@ function createAxis(axisProps, type) {
         ],
         mark: {
             type: "text",
-            clip: false,
+            clip: labelClipPolicy === "anchor" ? "never" : false,
+            cullByVisibleRange: labelClipPolicy === "anchor" ? main : undefined,
             align: ap.labelAlign,
             angle: ap.labelAngle,
             baseline: ap.labelBaseline,
@@ -504,23 +616,41 @@ function createAxis(axisProps, type) {
     /**
      * @return {import("../spec/view.js").UnitSpec}
      */
-    const createTitle = () => ({
-        name: "title",
-        data: { values: [{}] },
-        mark: {
-            type: "text",
-            clip: false,
-            align: "center",
-            baseline: ap.orient == "bottom" ? "bottom" : "top",
-            angle: [0, 90, 0, -90][
-                ["top", "right", "bottom", "left"].indexOf(ap.orient)
-            ],
-            text: ap.title,
-            color: ap.titleColor,
-            [main]: 0.5,
-            [secondary]: 1 - anchor,
-        },
-    });
+    const createTitle = () => {
+        /** @type {Partial<import("../spec/mark.js").TextProps>} */
+        const rangedTitleProps =
+            ap.titleFit === "range"
+                ? {
+                      [main]: 0,
+                      [main + "2"]: 1,
+                      [main === "x" ? "flushX" : "flushY"]: true,
+                  }
+                : {
+                      [main]: 0.5,
+                  };
+
+        return {
+            name: "title",
+            data: { values: [{}] },
+            mark: {
+                ...rangedTitleProps,
+                type: "text",
+                clip: false,
+                align: "center",
+                baseline: tickSide == "bottom" ? "bottom" : "top",
+                angle: [0, 90, 0, -90][
+                    ["top", "right", "bottom", "left"].indexOf(tickSide)
+                ],
+                text: ap.title,
+                color: ap.titleColor,
+                font: ap.titleFont,
+                size: ap.titleFontSize,
+                fontStyle: ap.titleFontStyle,
+                fontWeight: ap.titleFontWeight,
+                [secondary]: 1 - anchor,
+            },
+        };
+    };
 
     /**
      * @return {import("../spec/view.js").LayerSpec}
@@ -587,7 +717,7 @@ export function createGenomeAxis(axisProps, type) {
     const main = orient2channel(ap.orient);
     const secondary = getPerpendicularChannel(main);
 
-    const anchor = ap.orient == "bottom" || ap.orient == "left" ? 1 : 0;
+    const { anchor, tickSide } = getAxisGeometry(ap);
 
     /**
      * @return {import("../spec/view.js").UnitSpec}
@@ -615,7 +745,7 @@ export function createGenomeAxis(axisProps, type) {
     const createChromosomeLabels = () => {
         /** @type {Partial<import("../spec/mark.js").TextProps>} */
         let chromLabelMarkProps;
-        switch (ap.orient) {
+        switch (tickSide) {
             case "top":
                 chromLabelMarkProps = {
                     y: 0,
@@ -691,36 +821,11 @@ export function createGenomeAxis(axisProps, type) {
         return labels;
     };
 
-    /** @type {Axis} */
-    let fixedAxisProps;
-    switch (ap.orient) {
-        case "bottom":
-        case "top":
-            fixedAxisProps = {};
-            break;
-        case "left":
-            fixedAxisProps = {
-                labelAngle: -90,
-                labelAlign: "center",
-                labelPadding: 6,
-            };
-            break;
-        case "right":
-            fixedAxisProps = {
-                labelAngle: 90,
-                labelAlign: "center",
-                labelPadding: 6,
-            };
-            break;
-        default:
-            fixedAxisProps = {};
-    }
-
     // Create an ordinary axis
     const axisSpec = createAxis(
         {
             ...axisProps,
-            ...fixedAxisProps,
+            ...getFixedGenomeAxisProps(axisProps),
             // TODO: Allow the user to override fixedAxisProps
         },
         type

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

@@ -21,17 +21,25 @@ export default class ConcatView<TSpec extends import("../spec/view.js").AnyConca
      * Callers should prefer this over direct GridView insertion to ensure
      * dataflow initialization, axis wiring, and layout reflow are handled.
      *
-     * @param {import("../spec/view.js").ViewSpec} childSpec
+     * @param {import("../spec/view.js").ViewSpec | import("../spec/view.js").ImportSpec} childSpec
      * @param {number} [index]
      * @returns {Promise<import("./view.js").default>}
      */
-    addChildSpec(childSpec: import("../spec/view.js").ViewSpec, index?: number): Promise<import("./view.js").default>;
+    addChildSpec(childSpec: import("../spec/view.js").ViewSpec | import("../spec/view.js").ImportSpec, index?: number): Promise<import("./view.js").default>;
     /**
      * Removes a child by index. Intended for post-initialization updates.
      *
      * @param {number} index
      */
     removeChildAt(index: number): Promise<void>;
+    /**
+     * Moves a child within the concat container without recreating it.
+     *
+     * @param {number} fromIndex
+     * @param {number} index Destination index after temporarily removing the child.
+     * @returns {Promise<void>}
+     */
+    moveChildAt(fromIndex: number, index: number): Promise<void>;
     #private;
 }
 import GridView from "./gridView/gridView.js";

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

@@ -1 +1 @@
-{"version":3,"file":"concatView.d.ts","sourceRoot":"","sources":["../../../src/view/concatView.js"],"names":[],"mappings":"AAQA;;;;;GAKG;AACH,gCAHwD,KAAK,SAAhD,OAAQ,iBAAiB,EAAE,aAAc;IAIlD;;;;;;;;OAQG;IACH,kBAPW,KAAK,WACL,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAkBzC;IA6BD;;;;;;;;;OASG;IACH,wBAJW,OAAO,iBAAiB,EAAE,QAAQ,UAClC,MAAM,GACJ,OAAO,CAAC,OAAO,WAAW,EAAE,OAAO,CAAC,CAIhD;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAIhB;;CA2EJ;qBAhKoB,wBAAwB"}
+{"version":3,"file":"concatView.d.ts","sourceRoot":"","sources":["../../../src/view/concatView.js"],"names":[],"mappings":"AASA;;;;;GAKG;AACH,gCAHwD,KAAK,SAAhD,OAAQ,iBAAiB,EAAE,aAAc;IAIlD;;;;;;;;OAQG;IACH,kBAPW,KAAK,WACL,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,YACN,OAAO,WAAW,EAAE,WAAW,EAkBzC;IAsCD;;;;;;;;;OASG;IACH,wBAJW,OAAO,iBAAiB,EAAE,QAAQ,GAAG,OAAO,iBAAiB,EAAE,UAAU,UACzE,MAAM,GACJ,OAAO,CAAC,OAAO,WAAW,EAAE,OAAO,CAAC,CAIhD;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAIhB;IAED;;;;;;OAMG;IACH,uBAJW,MAAM,SACN,MAAM,GACJ,OAAO,CAAC,IAAI,CAAC,CAYzB;;CAmFJ;qBArMoB,wBAAwB"}

package/dist/src/view/concatView.js

@@ -5,6 +5,7 @@ import {
 } from "./viewSpecGuards.js";
 import GridView from "./gridView/gridView.js";
 import ContainerMutationHelper from "./containerMutationHelper.js";
+import { moveArrayItem } from "../utils/arrayUtils.js";
 
 /**
  * Creates a vertically or horizontally concatenated layout for children.
@@ -50,6 +51,13 @@ export default class ConcatView extends GridView {
             : isVConcatSpec(spec)
               ? spec.vconcat
               : spec.hconcat;
+        /** @type {import("./view.js").ViewOptions} */
+        const childOptions = {
+            inheritEncoding: true,
+        };
+        if (this.options.layoutSizeParams == "force") {
+            childOptions.layoutSizeParams = "force";
+        }
 
         this.setChildren(
             await Promise.all(
@@ -58,7 +66,9 @@ export default class ConcatView extends GridView {
                         childSpec,
                         this,
                         this,
-                        this.getNextAutoName("grid")
+                        this.getNextAutoName("grid"),
+                        undefined,
+                        childOptions
                     )
                 )
             )
@@ -73,7 +83,7 @@ export default class ConcatView extends GridView {
      * Callers should prefer this over direct GridView insertion to ensure
      * dataflow initialization, axis wiring, and layout reflow are handled.
      *
-     * @param {import("../spec/view.js").ViewSpec} childSpec
+     * @param {import("../spec/view.js").ViewSpec | import("../spec/view.js").ImportSpec} childSpec
      * @param {number} [index]
      * @returns {Promise<import("./view.js").default>}
      */
@@ -90,6 +100,25 @@ export default class ConcatView extends GridView {
         await this.#getMutationHelper().removeChildAt(index);
     }
 
+    /**
+     * Moves a child within the concat container without recreating it.
+     *
+     * @param {number} fromIndex
+     * @param {number} index Destination index after temporarily removing the child.
+     * @returns {Promise<void>}
+     */
+    async moveChildAt(fromIndex, index) {
+        const mutationHelper = this.#getMutationHelper();
+        const { specs } = this.#getChildSpecs();
+        moveArrayItem(specs, fromIndex, index);
+        super.moveChildAt(fromIndex, index);
+        // Reordering can move shared guide ownership without changing existing
+        // child-local guides.
+        await this.syncGuideViews({ gridChildren: [] });
+        await mutationHelper.initializeUninitializedChromeViews();
+        this.context.requestLayoutReflow();
+    }
+
     /**
      * @param {import("../spec/channel.js").Channel} channel
      * @param {import("../spec/view.js").ResolutionTarget} resolutionType
@@ -149,18 +178,26 @@ export default class ConcatView extends GridView {
      * @returns {ContainerMutationHelper}
      */
     #getMutationHelper() {
+        /** @type {import("./view.js").ViewOptions} */
+        const createViewOptions = {
+            inheritEncoding: true,
+        };
+        if (this.options.layoutSizeParams == "force") {
+            createViewOptions.layoutSizeParams = "force";
+        }
+
         return new ContainerMutationHelper(this, {
             getChildSpecs: this.#getChildSpecs.bind(this),
             insertView: (view, index) => this.insertChildViewAt(view, index),
             removeView: (index) => super.removeChildAt(index),
-            prepareView: async (view, _index, gridChild) => {
-                await gridChild.createAxes();
-                await this.syncSharedAxes();
-            },
-            afterRemove: async () => {
-                await this.syncSharedAxes();
-            },
+            syncMutationGuideViews: (_view, _index, gridChild) =>
+                this.syncGuideViews({
+                    // Only inserted grid children need new local guides. Shared
+                    // guides are synced by GridView regardless of this filter.
+                    gridChildren: gridChild ? [gridChild] : [],
+                }),
             defaultName: () => this.getNextAutoName("grid"),
+            createViewOptions,
         });
     }
 }