@genome-spy/core 0.72.0 → 0.74.0

package/dist/src/view/axisView.js

@@ -1,14 +1,16 @@
 import LayerView from "./layerView.js";
 import { FlexDimensions } from "./layout/flexLayout.js";
+import UnitView from "./unitView.js";
 import { markViewAsNonAddressable } from "./viewSelectors.js";
+import { getConfiguredAxisDefaults } from "../config/axisConfig.js";
 
 const CHROM_LAYER_NAME = "chromosome_ticks_and_labels";
-
-/** @type {Record<import("../spec/channel.js").PrimaryPositionalChannel, import("../spec/view.js").GeometricDimension>} */
-const CHANNEL_DIMENSIONS = {
-    x: "width",
-    y: "height",
-};
+const LABELS_LAYER_NAME = "labels_main";
+const TICKS_AND_LABELS_LAYER_NAME = "ticks_and_labels";
+const AXIS_EXTENT_PARAM = "axisExtent";
+const LABEL_WIDTH_FIELD = "_labelWidth";
+const Y_AXIS_LABEL_HEURISTIC_PX = 10;
+const AUTO_EXTENT_GROW_THRESHOLD_PX = 2;
 
 /**
  * @param {import("../spec/channel.js").PrimaryPositionalChannel} channel
@@ -49,6 +51,20 @@ export function orient2channel(slot) {
  *
  */
 export default class AxisView extends LayerView {
+    #effectiveExtent;
+
+    #axisExtentSetter;
+
+    /** @type {UnitView | undefined} */
+    #labelsView;
+
+    // This assumes the labels collector identity stays stable for the lifetime
+    // of the AxisView. If flow reinitialization starts replacing collectors for
+    // existing axis views, track the collector instance instead of a boolean.
+    #labelsObserverAttached = false;
+
+    #measurementScheduled = false;
+
     /**
      *
      * @typedef {import("../spec/view.js").LayerSpec} LayerSpec
@@ -57,8 +73,6 @@ 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 {Axis & { extent: number }} AugmentedAxis
      */
 
     /**
@@ -70,20 +84,35 @@ export default class AxisView extends LayerView {
      * @param {import("./view.js").ViewOptions} [options]
      */
     constructor(axisProps, type, context, layoutParent, dataParent, options) {
-        // 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";
+        const channel = orient2channel(axisProps.orient);
+        const configuredDefaults = getConfiguredAxisDefaults(
+            dataParent.getConfigScopes(),
+            {
+                channel,
+                orient: axisProps.orient,
+                type: /** @type {import("../spec/channel.js").Type} */ (type),
+                style: axisProps.style,
+            }
+        );
 
-        // TODO: Compute extent
+        /** @type {Axis} */
+        const preliminaryAxisProps = {
+            ...configuredDefaults,
+            ...axisProps,
+        };
 
         /** @type {Axis | GenomeAxis} */
         const fullAxisProps = {
-            ...(genomeAxis ? defaultGenomeAxisProps : defaultAxisProps),
-            ...getDefaultAngleAndAlign(type, axisProps),
+            ...configuredDefaults,
+            ...getDefaultAngleAndAlign(type, preliminaryAxisProps),
             ...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";
+
         super(
             genomeAxis
                 ? createGenomeAxis(fullAxisProps, type)
@@ -99,10 +128,37 @@ export default class AxisView extends LayerView {
         );
 
         this.axisProps = fullAxisProps;
+        this.#effectiveExtent = getExtent(fullAxisProps);
+        this.#axisExtentSetter = this.paramRuntime.allocateSetter(
+            AXIS_EXTENT_PARAM,
+            this.#effectiveExtent
+        );
 
         markViewAsNonAddressable(this, { skipSubtree: true });
     }
 
+    async initializeChildren() {
+        await super.initializeChildren();
+
+        const labelsView = this.getDescendants().find(
+            (view) =>
+                view instanceof UnitView && view.name === LABELS_LAYER_NAME
+        );
+        if (labelsView instanceof UnitView) {
+            this.#labelsView = labelsView;
+        }
+
+        if (!this.axisProps.labels || !this.#labelsView) {
+            return;
+        }
+
+        this.registerDisposer(
+            this._addBroadcastHandler("subtreeDataReady", () =>
+                this.#ensureLabelsObserver()
+            )
+        );
+    }
+
     getSize() {
         /** @type {SizeDef} */
         const perpendicularSize = { px: this.getPerpendicularSize() };
@@ -118,91 +174,181 @@ export default class AxisView extends LayerView {
     }
 
     getPerpendicularSize() {
-        return getExtent(this.axisProps);
+        return this.#effectiveExtent;
     }
 
     isPickingSupported() {
         return false;
     }
+
+    #scheduleAutoExtentMeasurement() {
+        if (this.#measurementScheduled) {
+            return;
+        }
+
+        this.#measurementScheduled = true;
+        queueMicrotask(() => {
+            this.#measurementScheduled = false;
+            this.#updateAutoExtent();
+        });
+    }
+
+    #ensureLabelsObserver() {
+        if (this.#labelsObserverAttached) {
+            return;
+        }
+
+        const collector = this.#labelsView?.getCollector();
+        if (!collector) {
+            return;
+        }
+
+        this.#labelsObserverAttached = true;
+        this.registerDisposer(
+            collector.observe(() => this.#scheduleAutoExtentMeasurement())
+        );
+
+        if (collector.completed) {
+            this.#scheduleAutoExtentMeasurement();
+        }
+    }
+
+    #updateAutoExtent() {
+        const channel = orient2channel(this.axisProps.orient);
+        const scaleResolution = this.dataParent.getScaleResolution(channel);
+        if (
+            scaleResolution &&
+            !scaleResolution.isDomainDefinedExplicitly() &&
+            !scaleResolution.isDomainInitialized()
+        ) {
+            return;
+        }
+
+        const measuredLabelExtent = getMeasuredLabelExtent(
+            this.axisProps,
+            this.context,
+            this.#labelsView
+        );
+        if (measuredLabelExtent === undefined) {
+            return;
+        }
+
+        const nextExtent = getExtent(this.axisProps, measuredLabelExtent);
+        const willGrow =
+            nextExtent >= this.#effectiveExtent + AUTO_EXTENT_GROW_THRESHOLD_PX;
+
+        if (!willGrow) {
+            return;
+        }
+
+        this.#effectiveExtent = nextExtent;
+        this.#axisExtentSetter(nextExtent);
+        this.invalidateSizeCache();
+        this.context.requestLayoutReflow();
+    }
 }
 
 /**
  * @param {Axis} axisProps
+ * @param {number} [measuredLabelExtent]
  */
-function getExtent(axisProps) {
-    const mainChannel = orient2channel(axisProps.orient);
-
+function getExtent(axisProps, measuredLabelExtent) {
     /** @type {number} */
+    let extent = getFixedAxisExtent(axisProps);
+
+    if (axisProps.labels) {
+        extent += measuredLabelExtent ?? getHeuristicLabelExtent(axisProps);
+    }
+
+    // TODO: Include chrom ticks and labels!
+
+    return clampAxisExtent(axisProps, extent);
+}
+
+/**
+ * @param {Axis} axisProps
+ */
+function getFixedAxisExtent(axisProps) {
     let extent = (axisProps.ticks && axisProps.tickSize) || 0;
 
     if (axisProps.labels) {
         extent += axisProps.labelPadding;
-        if (mainChannel == "x") {
-            extent += axisProps.labelFontSize;
-        } else {
-            extent += 30; // TODO: Measure label lengths!
-        }
     }
+
     if (axisProps.title) {
         extent += axisProps.titlePadding + axisProps.titleFontSize;
     }
 
-    // TODO: Include chrom ticks and labels!
+    return extent;
+}
+
+/**
+ * @param {Axis} axisProps
+ */
+function getHeuristicLabelExtent(axisProps) {
+    return orient2channel(axisProps.orient) == "x"
+        ? axisProps.labelFontSize
+        : Y_AXIS_LABEL_HEURISTIC_PX;
+}
 
-    extent = Math.min(
+/**
+ * @param {Axis} axisProps
+ * @param {number} extent
+ */
+function clampAxisExtent(axisProps, extent) {
+    return Math.min(
         axisProps.maxExtent || Infinity,
         Math.max(axisProps.minExtent || 0, extent)
     );
-
-    return extent;
 }
 
-// Based on: https://vega.github.io/vega-lite/docs/axis.html
-// TODO: The defaults should be taken from config (theme)
-/** @type {Axis} */
-const defaultAxisProps = {
-    values: null,
-
-    minExtent: 20,
-    maxExtent: Infinity,
-    offset: 0, // TODO: Implement
-
-    domain: true,
-    domainWidth: 1,
-    domainColor: "gray",
-    domainDash: null,
-    domainDashOffset: 0,
-    domainCap: "square", // Make 1px caps crisp
-
-    ticks: true,
-    tickSize: 5,
-    tickWidth: 1,
-    tickColor: "gray",
-    tickDash: null,
-    tickDashOffset: 0,
-    tickCap: "square", // Make 1px caps crisp
-
-    // TODO: tickBand
-
-    tickCount: null,
-    tickMinStep: null,
-
-    labels: true,
-    labelAlign: "center",
-    labelBaseline: "middle",
-    labelPadding: 4,
-    labelFontSize: 10,
-    labelLimit: 180, // TODO
-    labelColor: "black",
-    format: null,
-
-    titleColor: "black",
-    titleFont: "sans-serif",
-    titleFontSize: 10,
-    titlePadding: 3,
-
-    // TODO: titleX, titleY, titleAngle, titleAlign, etc
-};
+/**
+ * @param {Axis} axisProps
+ * @param {import("../types/viewContext.js").default} context
+ * @param {UnitView | undefined} labelsView
+ */
+function getMeasuredLabelExtent(axisProps, context, labelsView) {
+    const collector = labelsView?.getCollector();
+    if (!collector?.completed) {
+        return undefined;
+    }
+
+    let maxWidth = 0;
+    collector.visitData((datum) => {
+        maxWidth = Math.max(maxWidth, Number(datum[LABEL_WIDTH_FIELD]) || 0);
+    });
+
+    const font = axisProps.labelFont
+        ? context.fontManager.getFont(
+              axisProps.labelFont,
+              /** @type {import("../spec/font.js").FontStyle | undefined} */ (
+                  axisProps.labelFontStyle
+              ),
+              /** @type {import("../spec/font.js").FontWeight | undefined} */ (
+                  axisProps.labelFontWeight
+              )
+          )
+        : context.fontManager.getDefaultFont();
+    const metrics = font.metrics;
+    if (!metrics) {
+        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;
+
+    return Math.ceil(perpendicularExtent);
+}
 
 /**
  * @param {string} type
@@ -258,7 +404,7 @@ function getDefaultAngleAndAlign(type, axisProps) {
 function createAxis(axisProps, type) {
     // TODO: Ensure that no channels except the positional ones are shared
 
-    const ap = { ...axisProps, extent: getExtent(axisProps) };
+    const ap = axisProps;
 
     const main = orient2channel(ap.orient);
     const secondary = getPerpendicularChannel(main);
@@ -294,13 +440,27 @@ function createAxis(axisProps, type) {
      * @return {import("../spec/view.js").UnitSpec}
      */
     const createLabels = () => ({
-        name: "labels",
+        name: LABELS_LAYER_NAME,
+        transform: [
+            {
+                type: "measureText",
+                field: "label",
+                as: LABEL_WIDTH_FIELD,
+                fontSize: ap.labelFontSize,
+                font: ap.labelFont,
+                fontStyle: ap.labelFontStyle,
+                fontWeight: ap.labelFontWeight,
+            },
+        ],
         mark: {
             type: "text",
             clip: false,
             align: ap.labelAlign,
             angle: ap.labelAngle,
             baseline: ap.labelBaseline,
+            font: ap.labelFont,
+            fontStyle: ap.labelFontStyle,
+            fontWeight: ap.labelFontWeight,
             [secondary + "Offset"]:
                 (ap.tickSize + ap.labelPadding) * offsetDirection,
             [secondary]: anchor,
@@ -331,7 +491,11 @@ function createAxis(axisProps, type) {
         encoding: {
             [secondary]: { value: anchor },
             [secondary + "2"]: {
-                value: anchor - (ap.tickSize / ap.extent) * (anchor ? 1 : -1),
+                value: {
+                    expr: `${anchor} - ${ap.tickSize} / ${AXIS_EXTENT_PARAM} * ${
+                        anchor ? 1 : -1
+                    }`,
+                },
             },
         },
     });
@@ -363,7 +527,7 @@ function createAxis(axisProps, type) {
     const createTicksAndLabels = () => {
         /** @type {LayerSpec} */
         const spec = {
-            name: "ticks_and_labels",
+            name: TICKS_AND_LABELS_LAYER_NAME,
             encoding: {
                 [main]: makeMainDomainDef(),
             },
@@ -386,7 +550,6 @@ function createAxis(axisProps, type) {
         // Force the resolution towards the parent view even if it has "independent" behavior
         resolve: { scale: { [main]: "forced" } },
         domainInert: true,
-        [CHANNEL_DIMENSIONS[getPerpendicularChannel(main)]]: ap.extent,
         data: {
             lazy: {
                 type: "axisTicks",
@@ -412,34 +575,13 @@ function createAxis(axisProps, type) {
     return axisSpec;
 }
 
-/** @type {import("../spec/axis.js").GenomeAxis} */
-const defaultGenomeAxisProps = {
-    ...defaultAxisProps,
-
-    chromTicks: true,
-    chromTickSize: 18,
-    chromTickWidth: 1,
-    chromTickColor: "#989898",
-    chromTickDash: [4, 2],
-    chromTickDashOffset: 1,
-
-    chromLabels: true,
-    chromLabelFontSize: 13,
-    chromLabelFontWeight: "normal",
-    chromLabelFontStyle: "normal",
-    chromLabelColor: "black",
-    chromLabelAlign: "left",
-    chromLabelPadding: 7,
-    // TODO: chromLabelAngle
-};
-
 /**
  * @param {GenomeAxis} axisProps
  * @param {string} type
  * @returns {LayerSpec}
  */
 export function createGenomeAxis(axisProps, type) {
-    const ap = { ...axisProps, extent: getExtent(axisProps) };
+    const ap = axisProps;
 
     const main = orient2channel(ap.orient);
     const secondary = getPerpendicularChannel(main);
@@ -456,8 +598,11 @@ export function createGenomeAxis(axisProps, type) {
             strokeDash: axisProps.chromTickDash,
             strokeDashOffset: axisProps.chromTickDashOffset,
             [secondary]: anchor,
-            [secondary + "2"]:
-                anchor - (ap.chromTickSize / ap.extent) * (anchor ? 1 : -1),
+            [secondary + "2"]: {
+                expr: `${anchor} - ${ap.chromTickSize} / ${AXIS_EXTENT_PARAM} * ${
+                    anchor ? 1 : -1
+                }`,
+            },
             color: axisProps.chromTickColor,
             size: ap.chromTickWidth,
         },
@@ -467,7 +612,7 @@ export function createGenomeAxis(axisProps, type) {
      * @return {import("../spec/view.js").UnitSpec}
      */
     const createChromosomeLabels = () => {
-        /** @type {Partial<import("../spec/mark.js").MarkProps>} */
+        /** @type {Partial<import("../spec/mark.js").TextProps>} */
         let chromLabelMarkProps;
         switch (ap.orient) {
             case "top":
@@ -614,10 +759,10 @@ export function createGenomeAxis(axisProps, type) {
 
             // TODO: Simplify the following mess
             axisSpec.layer
-                .filter((view) => view.name == "ticks_and_labels")
+                .filter((view) => view.name == TICKS_AND_LABELS_LAYER_NAME)
                 .forEach((/** @type {LayerSpec} */ view) =>
                     view.layer
-                        .filter((view) => view.name == "labels")
+                        .filter((view) => view.name == LABELS_LAYER_NAME)
                         .forEach(
                             (
                                 /** @type {import("../spec/view.js").UnitSpec} */ view

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

@@ -12,8 +12,9 @@ export default class ConcatView<TSpec extends import("../spec/view.js").AnyConca
      * @param {import("./containerView.js").default} layoutParent
      * @param {import("./view.js").default} dataParent
      * @param {string} name
+     * @param {import("./view.js").ViewOptions} [options]
      */
-    constructor(spec: TSpec, context: import("../types/viewContext.js").default, layoutParent: import("./containerView.js").default, dataParent: import("./view.js").default, name: string);
+    constructor(spec: TSpec, context: import("../types/viewContext.js").default, layoutParent: import("./containerView.js").default, dataParent: import("./view.js").default, name: string, options?: import("./view.js").ViewOptions);
     /**
      * Adds a child spec dynamically. Intended for post-initialization updates.
      *

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;;;;;;;OAOG;IACH,kBANW,KAAK,WACL,OAAO,yBAAyB,EAAE,OAAO,gBACzC,OAAO,oBAAoB,EAAE,OAAO,cACpC,OAAO,WAAW,EAAE,OAAO,QAC3B,MAAM,EAiBhB;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;qBA9JoB,wBAAwB"}
+{"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"}

package/dist/src/view/concatView.js

@@ -20,8 +20,9 @@ export default class ConcatView extends GridView {
      * @param {import("./containerView.js").default} layoutParent
      * @param {import("./view.js").default} dataParent
      * @param {string} name
+     * @param {import("./view.js").ViewOptions} [options]
      */
-    constructor(spec, context, layoutParent, dataParent, name) {
+    constructor(spec, context, layoutParent, dataParent, name, options) {
         super(
             spec,
             context,
@@ -32,7 +33,8 @@ export default class ConcatView extends GridView {
                 ? spec.columns
                 : isVConcatSpec(spec)
                   ? 1
-                  : Infinity
+                  : Infinity,
+            options
         );
 
         this.spec = spec;

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

@@ -22,6 +22,7 @@ export default class ContainerMutationHelper {
      *   prepareView?: (view: View, index: number, insertionResult: any) => Promise<void>,
      *   afterRemove?: (index: number) => Promise<void>,
      *   defaultName?: (index: number, spec: ViewSpec | ImportSpec) => string,
+     *   createViewOptions?: import("../types/viewContext.js").CreateViewOptions,
      *   requestLayout?: boolean
      * }} MutationOptions
      */
@@ -40,6 +41,7 @@ export default class ContainerMutationHelper {
         prepareView?: (view: import("./view.js").default<import("../spec/view.js").ViewSpec>, index: number, insertionResult: any) => Promise<void>;
         afterRemove?: (index: number) => Promise<void>;
         defaultName?: (index: number, spec: import("../spec/view.js").ViewSpec | import("../spec/view.js").ImportSpec) => string;
+        createViewOptions?: import("../types/viewContext.js").CreateViewOptions;
         requestLayout?: boolean;
     });
     container: import("./containerView.js").default<import("../spec/view.js").ContainerSpec>;
@@ -54,6 +56,7 @@ export default class ContainerMutationHelper {
         prepareView?: (view: import("./view.js").default<import("../spec/view.js").ViewSpec>, index: number, insertionResult: any) => Promise<void>;
         afterRemove?: (index: number) => Promise<void>;
         defaultName?: (index: number, spec: import("../spec/view.js").ViewSpec | import("../spec/view.js").ImportSpec) => string;
+        createViewOptions?: import("../types/viewContext.js").CreateViewOptions;
         requestLayout?: boolean;
     };
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"containerMutationHelper.d.ts","sourceRoot":"","sources":["../../../src/view/containerMutationHelper.js"],"names":[],"mappings":"AAOA;;;GAGG;AACH;IACI;;;;;;;;;;OAUG;IAEH;;;;;;;;;;OAUG;IAEH;;;OAGG;IACH,uBAHW,OAAO,oBAAoB,EAAE,OAAO;uBAX3B;mBARR,CAAC,yEAAqB,CAAC,EAAE;sBACtB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,IAAI;sBACpD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;SAMF;oBACnB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sBACrB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC;sBAClE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;sBAChC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,MAAM;wBACpD,OAAO;OAW3B;IAFG,yFAA0B;IAC1B;uBAhBgB;mBARR,CAAC,yEAAqB,CAAC,EAAE;sBACtB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,IAAI;sBACpD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;SAMF;oBACnB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sBACrB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC;sBAClE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;sBAChC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,MAAM;wBACpD,OAAO;MAUF;IAG1B;;;;;;OAMG;IACH,wBAJW,OAAO,iBAAiB,EAAE,QAAQ,GAAG,OAAO,iBAAiB,EAAE,UAAU,UACzE,MAAM,GACJ,OAAO,iEAAM,CA8CzB;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAehB;CACJ"}
+{"version":3,"file":"containerMutationHelper.d.ts","sourceRoot":"","sources":["../../../src/view/containerMutationHelper.js"],"names":[],"mappings":"AAQA;;;GAGG;AACH;IACI;;;;;;;;;;OAUG;IAEH;;;;;;;;;;;OAWG;IAEH;;;OAGG;IACH,uBAHW,OAAO,oBAAoB,EAAE,OAAO;uBAZ3B;mBARR,CAAC,yEAAqB,CAAC,EAAE;sBACtB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,IAAI;sBACpD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;SAMF;oBACnB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sBACrB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC;sBAClE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;sBAChC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,MAAM;4BAChD,OAAO,yBAAyB,EAAE,iBAAiB;wBACvD,OAAO;OAW3B;IAFG,yFAA0B;IAC1B;uBAjBgB;mBARR,CAAC,yEAAqB,CAAC,EAAE;sBACtB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,IAAI;sBACpD,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;SAMF;oBACnB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG;oBAClC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;sBACrB,CAAC,IAAI,iEAAM,EAAE,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC;sBAClE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC;sBAChC,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,yEAAqB,KAAK,MAAM;4BAChD,OAAO,yBAAyB,EAAE,iBAAiB;wBACvD,OAAO;MAUF;IAG1B;;;;;;OAMG;IACH,wBAJW,OAAO,iBAAiB,EAAE,QAAQ,GAAG,OAAO,iBAAiB,EAAE,UAAU,UACzE,MAAM,GACJ,OAAO,iEAAM,CAuDzB;IAED;;;;OAIG;IACH,qBAFW,MAAM,iBAehB;CACJ"}

package/dist/src/view/containerMutationHelper.js

@@ -3,6 +3,7 @@ import {
     loadViewSubtreeData,
 } from "../data/flowInit.js";
 import { configureViewOpacity } from "../genomeSpy/viewHierarchyConfig.js";
+import { ensureAssembliesForView } from "../genome/assemblyPreflight.js";
 import { finalizeSubtreeGraphics } from "./viewUtils.js";
 
 /**
@@ -30,6 +31,7 @@ export default class ContainerMutationHelper {
      *   prepareView?: (view: View, index: number, insertionResult: any) => Promise<void>,
      *   afterRemove?: (index: number) => Promise<void>,
      *   defaultName?: (index: number, spec: ViewSpec | ImportSpec) => string,
+     *   createViewOptions?: import("../types/viewContext.js").CreateViewOptions,
      *   requestLayout?: boolean
      * }} MutationOptions
      */
@@ -61,7 +63,16 @@ export default class ContainerMutationHelper {
             childSpec,
             this.container,
             this.container,
-            name
+            name,
+            undefined,
+            this.options.createViewOptions
+        );
+
+        // Reminder: ensure assemblies from the real child hierarchy before any
+        // downstream work that may initialize scales (axis prep / encoders).
+        await ensureAssembliesForView(
+            childView,
+            this.container.context.genomeStore
         );
 
         insertAt(insertIndex, childSpec);

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

@@ -35,12 +35,12 @@ export function isSubtreeLazyReady(subtreeRoot: View, readinessRequest: DataRead
  *
  * @param {import("../types/viewContext.js").default} context
  * @param {View} subtreeRoot
- * @param {DataReadinessRequest} readinessRequest
+ * @param {DataReadinessRequest | undefined} readinessRequest
  * @param {AbortSignal} [signal]
  * @param {(view: View) => boolean} [viewFilter]
  * @returns {Promise<void>}
  */
-export function awaitSubtreeLazyReady(context: import("../types/viewContext.js").default, subtreeRoot: View, readinessRequest: DataReadinessRequest, signal?: AbortSignal, viewFilter?: (view: View) => boolean): Promise<void>;
+export function awaitSubtreeLazyReady(context: import("../types/viewContext.js").default, subtreeRoot: View, readinessRequest: DataReadinessRequest | undefined, signal?: AbortSignal, viewFilter?: (view: View) => boolean): Promise<void>;
 export type View = import("../view/view.js").default;
 export type DataReadinessRequest = import("../data/sources/lazy/singleAxisLazySource.js").DataReadinessRequest;
 //# sourceMappingURL=dataReadiness.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"dataReadiness.d.ts","sourceRoot":"","sources":["../../../src/view/dataReadiness.js"],"names":[],"mappings":"AAGA;;;GAGG;AAEH;;;;;;GAMG;AACH,4CAJW,IAAI,YACJ,OAAO,oBAAoB,EAAE,wBAAwB,EAAE,GACrD,oBAAoB,GAAG,SAAS,CAe5C;AAED;;;;;;;GAOG;AACH,4CALW,IAAI,oBACJ,oBAAoB,eACpB,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,GACrB,OAAO,CAiDnB;AAED;;;;;;;;GAQG;AACH,gDALW,IAAI,oBACJ,oBAAoB,GAAG,SAAS,eAChC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,GACrB,OAAO,CAwDnB;AAED;;;;;;;;;;GAUG;AACH,+CAPW,OAAO,yBAAyB,EAAE,OAAO,eACzC,IAAI,oBACJ,oBAAoB,WACpB,WAAW,eACX,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,GACrB,OAAO,CAAC,IAAI,CAAC,CAyGzB;mBAtQY,OAAO,iBAAiB,EAAE,OAAO;mCACjC,OAAO,8CAA8C,EAAE,oBAAoB"}
+{"version":3,"file":"dataReadiness.d.ts","sourceRoot":"","sources":["../../../src/view/dataReadiness.js"],"names":[],"mappings":"AAIA;;;GAGG;AAEH;;;;;;GAMG;AACH,4CAJW,IAAI,YACJ,OAAO,oBAAoB,EAAE,wBAAwB,EAAE,GACrD,oBAAoB,GAAG,SAAS,CAe5C;AAED;;;;;;;GAOG;AACH,4CALW,IAAI,oBACJ,oBAAoB,eACpB,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,GACrB,OAAO,CAiDnB;AAED;;;;;;;;GAQG;AACH,gDALW,IAAI,oBACJ,oBAAoB,GAAG,SAAS,eAChC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,GACrB,OAAO,CAgBnB;AAED;;;;;;;;;;GAUG;AACH,+CAPW,OAAO,yBAAyB,EAAE,OAAO,eACzC,IAAI,oBACJ,oBAAoB,GAAG,SAAS,WAChC,WAAW,eACX,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,GACrB,OAAO,CAAC,IAAI,CAAC,CA0FzB;mBA/MY,OAAO,iBAAiB,EAAE,OAAO;mCACjC,OAAO,8CAA8C,EAAE,oBAAoB"}