react-msaview 8.4.1 → 9.0.0

package/dist/model.d.ts

@@ -49,11 +49,11 @@ export declare const preservedOnReset: Set<string>;
  */
 declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
     maxInlineSnapshotBytes?: number;
-}): import("@jbrowse/mobx-state-tree").IModelType<Omit<Omit<Omit<{}, "autoTreeAreaWidth" | "drawLabels" | "drawNodeBubbles" | "drawNodeLabels" | "drawTree" | "labelsAlignRight" | "overviewHeight" | "showBranchLen" | "showTreeOverview" | "treeAreaWidth" | "treeOrder" | "treeWidth"> & {
+}): import("@jbrowse/mobx-state-tree").IModelType<Omit<Omit<Omit<{}, "drawLabels" | "drawNodeBubbles" | "drawNodeLabels" | "drawTree" | "labelsAlignRight" | "overviewHeight" | "showBranchLen" | "showTreeOverview" | "treeAreaWidth" | "treeOrder" | "treeWidth"> & {
     drawLabels: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     labelsAlignRight: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
-    treeAreaWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
-    treeWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
+    treeAreaWidth: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<number>>;
+    treeWidth: import("@jbrowse/mobx-state-tree").IMaybe<import("@jbrowse/mobx-state-tree").ISimpleType<number>>;
     showBranchLen: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     treeOrder: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<TreeOrder>, [undefined]>;
     drawTree: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
@@ -61,7 +61,6 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
     drawNodeLabels: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showTreeOverview: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     overviewHeight: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<number>, [undefined]>;
-    autoTreeAreaWidth: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
 }, "bgColor" | "colorSchemeName" | "customColorScheme" | "msaFormat" | "showColumnStats"> & {
     bgColor: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     colorSchemeName: import("@jbrowse/mobx-state-tree").IOptionalIType<import("@jbrowse/mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -643,11 +642,10 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
     removeActiveDialog(): void;
     queueDialog(cb: (doneCallback: () => void) => [import("@jbrowse/core/util").DialogComponentType, unknown]): void;
 } & {
-    setTreeAreaWidth(n: number): void;
-    setTreeWidth(n: number): void;
+    setTreeAreaWidth(n: number | undefined): void;
+    setTreeWidth(n: number | undefined): void;
     setLabelsAlignRight(arg: boolean): void;
     setDrawTree(arg: boolean): void;
-    setAutoTreeAreaWidth(arg: boolean): void;
     setShowBranchLen(arg: boolean): void;
     setTreeOrder(order: TreeOrder): void;
     setDrawNodeBubbles(arg: boolean): void;
@@ -1105,10 +1103,10 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
      * the row table: extra fields per row, keyed by row name, which the
      * `encodings` channels read. It is stored as the JSON string
      * `data.treeMetadata`, the name that travels in existing links, so the
-     * inline size limit and `treeMetadataFilehandle` cover it. labelWidthMap
-     * reads it on every layout, so a malformed user-supplied file returns {}
-     * instead of throwing out of rendering, and every field is a string by
-     * the time a scale sorts it.
+     * inline size limit and `treeMetadataFilehandle` cover it. The tree area
+     * fit reads it on every layout, so a malformed user-supplied file
+     * returns {} instead of throwing out of rendering, and every field is a
+     * string by the time a scale sorts it.
      */
     readonly rowData: Record<string, Record<string, string> | undefined>;
     /**
@@ -1168,6 +1166,60 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
      * where no clade draws a bar or a label.
      */
     readonly cladeGutterWidth: number;
+    /**
+     * #getter
+     * whether a tree draws beside the labels: false for a file with no
+     * tree, and with drawTree off
+     */
+    readonly treeDrawn: boolean;
+    /**
+     * #getter
+     * the leaf names of the whole tree and its depth in levels. The fit
+     * reads these, so a collapse or a focus leaves the tree area as it is
+     */
+    readonly treeTips: {
+        names: string[];
+        depth: number;
+    };
+    /**
+     * #getter
+     * the widest tip label at labelFitFontSize, measured whether or not a
+     * zoom hides the labels
+     */
+    readonly maxTipLabelWidth: number;
+    /**
+     * #getter
+     * the px the tip labels take across the tree area: the widest label at
+     * labelFitFontSize and the gaps either side of it, or 0 with drawLabels
+     * off
+     */
+    readonly labelColumnWidth: number;
+    /**
+     * #getter
+     * the tree area width while treeAreaWidth is undefined: the label column
+     * beside a tree that widens with its depth, up to maxTreeAreaShare of the
+     * view, or the room the row panels leave where there is no alignment.
+     * Where that binds, the tree keeps minTreeWidth and the renderer
+     * ellipsizes the labels
+     */
+    readonly fittedTreeAreaWidth: number;
+    /**
+     * #getter
+     * the width of the area the tree and its labels draw in, px:
+     * treeAreaWidth where set, the fit otherwise
+     */
+    readonly effectiveTreeAreaWidth: number;
+    /**
+     * #getter
+     * the width of the tree, px: treeWidth where set, otherwise the tree
+     * area less the label column, which a zoom hiding the labels gives to
+     * the tree
+     */
+    readonly effectiveTreeWidth: number;
+    /**
+     * #getter
+     */
+    readonly showTreeText: boolean;
     /**
      * #getter
      */
@@ -1357,9 +1409,9 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
     /**
      * #getter
      * `root` laid out on new nodes in row and branch-length units, read in
-     * pixels through `rowHeight` and `treeWidth`. A zoom leaves it and every
-     * node in it as they are, and an observer reading a node's `x` or `len`
-     * observes the size it scales by.
+     * pixels through `rowHeight` and `effectiveTreeWidth`. A zoom leaves it
+     * and every node in it as they are, and an observer reading a node's `x`
+     * or `len` observes the size it scales by.
      */
     readonly treeLayout: {
         root: import("./hierarchy.ts").LaidOutNode<NodeWithIds>;
@@ -1387,8 +1439,8 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
     readonly rootToTipLength: number;
     /**
      * #getter
-     * x-position of the farthest tip in a phylogram, px: treeWidth, or 0 for
-     * a tree with no branch lengths (drawn as a cladogram)
+     * x-position of the farthest tip in a phylogram, px: effectiveTreeWidth,
+     * or 0 for a tree with no branch lengths (drawn as a cladogram)
      */
     readonly maxBranchLength: number;
     /**
@@ -1421,10 +1473,6 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
      * #getter
      */
     readonly showMsaLetters: boolean;
-    /**
-     * #getter
-     */
-    readonly showTreeText: boolean;
 } & {
     /**
      * #getter
@@ -1456,17 +1504,6 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
      */
     readonly columnTrackModels: BasicTrack[];
 } & {
-    /**
-     * #getter
-     */
-    readonly labelWidthMap: Map<string, number>;
-    /**
-     * #getter
-     * factor turning a labelWidthMap entry into its width at the current
-     * font size
-     */
-    readonly labelWidthScale: number;
-    readonly labelsWidth: number;
     /**
      * #getter
      */
@@ -2271,8 +2308,8 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
     msaFormat: import("msa-parsers").MSAFormat | undefined;
     drawLabels: boolean;
     labelsAlignRight: boolean;
-    treeAreaWidth: number;
-    treeWidth: number;
+    treeAreaWidth: number | undefined;
+    treeWidth: number | undefined;
     showBranchLen: boolean;
     treeOrder: TreeOrder;
     drawTree: boolean;
@@ -2280,7 +2317,6 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
     drawNodeLabels: boolean;
     showTreeOverview: boolean;
     overviewHeight: number;
-    autoTreeAreaWidth: boolean;
     columnTracks: ColumnTrackSpec[];
     id: string;
     showDomains: boolean;
@@ -2409,8 +2445,8 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
     msaFormat: import("msa-parsers").MSAFormat | undefined;
     drawLabels: boolean;
     labelsAlignRight: boolean;
-    treeAreaWidth: number;
-    treeWidth: number;
+    treeAreaWidth: number | undefined;
+    treeWidth: number | undefined;
     showBranchLen: boolean;
     treeOrder: TreeOrder;
     drawTree: boolean;
@@ -2418,7 +2454,6 @@ declare function stateModelFactory({ maxInlineSnapshotBytes, }?: {
     drawNodeLabels: boolean;
     showTreeOverview: boolean;
     overviewHeight: number;
-    autoTreeAreaWidth: boolean;
     columnTracks?: undefined;
     id: string;
     showDomains: boolean;

package/dist/model.js

@@ -15,7 +15,7 @@ import { visibleColRange } from './components/msa/visibleColRange.js';
 import TrackBlocks from './components/tracks/TrackBlocks.js';
 import { cladeGutterWidth } from './components/tree/cladeBrackets.js';
 import { scaleBarLength } from './components/tree/scaleBar.js';
-import { cladeHighlightAlpha, cladeHighlightColor, defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultFeaturePanelWidth, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultScrollZoomAxis, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, defaultTreeWidth, labelReferenceFontSize, maxCellSize, maxInlineSnapshotBytes as defaultMaxInlineSnapshotBytes, maxNeighborJoiningRows, minColWidth, minLetterColWidth, minLetterRowHeight, minRowHeight, rowPanelHeaderHeight, rowTintAlpha, scrollZoomAxes, segmentFeatureTypes, segmentShades, treeScaleBarHeight, } from './constants.js';
+import { cladeHighlightAlpha, cladeHighlightColor, defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultFeaturePanelWidth, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultScrollZoomAxis, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, fontSizeFor, labelFitFontSize, maxCellSize, maxFitTreeWidth, maxTreeAreaShare, maxInlineSnapshotBytes as defaultMaxInlineSnapshotBytes, maxNeighborJoiningRows, minColWidth, minLetterColWidth, minLetterRowHeight, minRowHeight, minTreeWidth, pxPerTreeDepth, rowPanelHeaderHeight, rowTintAlpha, scrollZoomAxes, segmentFeatureTypes, segmentShades, treeScaleBarHeight, } from './constants.js';
 import { createPaletteMap } from './createPaletteMap.js';
 import { exportFileName } from './exportFileName.js';
 import { featureField, featureName } from './featureFields.js';
@@ -23,7 +23,6 @@ import { featuresToAnnotations } from './featuresLayer.js';
 import { fetchTextWithProgress, isAbortError } from './fetchUtils.js';
 import { flatToTree } from './flatToTree.js';
 import { calcDepthToLeaf, clusterLayout, collapse, find, forEachDescendant, hierarchy, layoutTree, leafIndex, leaves, maxLength, mrca, nodeCoveringRows, setBrLength, sort, sum as hierarchySum, } from './hierarchy.js';
-import { measureTextCanvas } from './measureTextCanvas.js';
 import { DataModelF } from './model/DataModel.js';
 import { DialogQueueSessionMixin } from './model/DialogQueue.js';
 import { MSAModelF } from './model/msaModel.js';
@@ -37,6 +36,7 @@ import { resolveScale } from './scales.js';
 import { buildSeqPosIndex } from './seqPosToGlobalCol.js';
 import { maxBitsFor } from './sequenceLogo.js';
 import { stripDefault } from './stripDefault.js';
+import { treeTips, widestLabel } from './tipLabels.js';
 import { computeRowInsertions, dropBlanks, len, outlineColor, skipBlanks, withAlpha, } from './util.js';
 import { saveAs } from './vendor/fileSaver.js';
 import { writeNewick } from './writeNewick.js';
@@ -303,7 +303,6 @@ export const preservedOnReset = new Set([
     'drawNodeLabels',
     'showTreeOverview',
     'overviewHeight',
-    'autoTreeAreaWidth',
     'turnedOffTracks',
     'trackHeights',
     'hideGaps',
@@ -1420,10 +1419,10 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * the row table: extra fields per row, keyed by row name, which the
          * `encodings` channels read. It is stored as the JSON string
          * `data.treeMetadata`, the name that travels in existing links, so the
-         * inline size limit and `treeMetadataFilehandle` cover it. labelWidthMap
-         * reads it on every layout, so a malformed user-supplied file returns {}
-         * instead of throwing out of rendering, and every field is a string by
-         * the time a scale sorts it.
+         * inline size limit and `treeMetadataFilehandle` cover it. The tree area
+         * fit reads it on every layout, so a malformed user-supplied file
+         * returns {} instead of throwing out of rendering, and every field is a
+         * string by the time a scale sorts it.
          */
         get rowData() {
             const text = self.data.treeMetadata;
@@ -1544,11 +1543,93 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * where no clade draws a bar or a label.
          */
         get cladeGutterWidth() {
-            return cladeGutterWidth({
-                clades: this.resolvedClades,
-                rowHeight: self.rowHeight,
-                fontSize: this.fontSize,
-            });
+            return cladeGutterWidth(self.clades);
+        },
+        /**
+         * #getter
+         * whether a tree draws beside the labels: false for a file with no
+         * tree, and with drawTree off
+         */
+        get treeDrawn() {
+            return self.drawTree && !this.noTree;
+        },
+        /**
+         * #getter
+         * the leaf names of the whole tree and its depth in levels. The fit
+         * reads these, so a collapse or a focus leaves the tree area as it is
+         */
+        get treeTips() {
+            return treeTips(this.tree);
+        },
+        /**
+         * #getter
+         * the widest tip label at labelFitFontSize, measured whether or not a
+         * zoom hides the labels
+         */
+        get maxTipLabelWidth() {
+            return widestLabel(this.treeTips.names.map(name => this.rowDataOf(name)?.genome || name), labelFitFontSize);
+        },
+        /**
+         * #getter
+         * the px the tip labels take across the tree area: the widest label at
+         * labelFitFontSize and the gaps either side of it, or 0 with drawLabels
+         * off
+         */
+        get labelColumnWidth() {
+            return self.drawLabels
+                ? this.maxTipLabelWidth + (this.treeDrawn ? 10 : 6)
+                : 0;
+        },
+        /**
+         * #getter
+         * the tree area width while treeAreaWidth is undefined: the label column
+         * beside a tree that widens with its depth, up to maxTreeAreaShare of the
+         * view, or the room the row panels leave where there is no alignment.
+         * Where that binds, the tree keeps minTreeWidth and the renderer
+         * ellipsizes the labels
+         */
+        get fittedTreeAreaWidth() {
+            const chrome = self.marginLeft + this.cladeGutterWidth;
+            const tree = this.treeDrawn
+                ? (self.treeWidth ??
+                    clamp(this.treeTips.depth * pxPerTreeDepth, minTreeWidth, maxFitTreeWidth))
+                : 0;
+            const fit = chrome + tree + this.labelColumnWidth;
+            const room = self.viewInitialized
+                ? this.numColumns > 0
+                    ? self.width * maxTreeAreaShare
+                    : self.width - this.rowPanelsWidth - self.resizeHandleWidth
+                : Infinity;
+            const cap = Math.max(room, chrome + Math.min(tree, minTreeWidth));
+            return Math.ceil(Math.min(fit, cap));
+        },
+        /**
+         * #getter
+         * the width of the area the tree and its labels draw in, px:
+         * treeAreaWidth where set, the fit otherwise
+         */
+        get effectiveTreeAreaWidth() {
+            return self.treeAreaWidth ?? this.fittedTreeAreaWidth;
+        },
+        /**
+         * #getter
+         * the width of the tree, px: treeWidth where set, otherwise the tree
+         * area less the label column, which a zoom hiding the labels gives to
+         * the tree
+         */
+        get effectiveTreeWidth() {
+            const labels = this.showTreeText ? this.labelColumnWidth : 0;
+            return (self.treeWidth ??
+                Math.max(minTreeWidth, Math.floor(this.effectiveTreeAreaWidth -
+                    self.marginLeft -
+                    this.cladeGutterWidth -
+                    labels)));
+        },
+        /**
+         * #getter
+         */
+        get showTreeText() {
+            return self.drawLabels && self.rowHeight >= minLetterRowHeight;
         },
         /**
          * #getter
@@ -1714,7 +1795,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          */
         get msaAreaWidth() {
             return (self.width -
-                self.treeAreaWidth -
+                this.effectiveTreeAreaWidth -
                 this.rowPanelsWidth -
                 self.resizeHandleWidth);
         },
@@ -1724,7 +1805,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * margin and the bracket gutter
          */
         get treeAreaWidthMinusMargin() {
-            return self.treeAreaWidth - self.marginLeft - this.cladeGutterWidth;
+            return (this.effectiveTreeAreaWidth - self.marginLeft - this.cladeGutterWidth);
         },
         /**
          * #getter
@@ -1860,7 +1941,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * #getter
          */
         get fontSize() {
-            return Math.min(Math.max(6, self.rowHeight - 3), 18);
+            return fontSizeFor(self.rowHeight);
         },
         /**
          * #getter
@@ -1959,17 +2040,18 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         /**
          * #getter
          * `root` laid out on new nodes in row and branch-length units, read in
-         * pixels through `rowHeight` and `treeWidth`. A zoom leaves it and every
-         * node in it as they are, and an observer reading a node's `x` or `len`
-         * observes the size it scales by.
+         * pixels through `rowHeight` and `effectiveTreeWidth`. A zoom leaves it
+         * and every node in it as they are, and an observer reading a node's `x`
+         * or `len` observes the size it scales by.
          */
         get treeLayout() {
+            const treeWidth = () => this.effectiveTreeWidth;
             return layoutTree(this.root, {
                 get rowHeight() {
                     return self.rowHeight;
                 },
                 get treeWidth() {
-                    return self.treeWidth;
+                    return treeWidth();
                 },
             });
         },
@@ -2002,11 +2084,11 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         },
         /**
          * #getter
-         * x-position of the farthest tip in a phylogram, px: treeWidth, or 0 for
-         * a tree with no branch lengths (drawn as a cladogram)
+         * x-position of the farthest tip in a phylogram, px: effectiveTreeWidth,
+         * or 0 for a tree with no branch lengths (drawn as a cladogram)
          */
         get maxBranchLength() {
-            return this.rootToTipLength ? self.treeWidth : 0;
+            return this.rootToTipLength ? this.effectiveTreeWidth : 0;
         },
         /**
          * #getter
@@ -2015,7 +2097,9 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          */
         get pxPerBranchLength() {
             const max = this.rootToTipLength;
-            return this.showBranchLenEffective && max ? self.treeWidth / max : 0;
+            return this.showBranchLenEffective && max
+                ? this.effectiveTreeWidth / max
+                : 0;
         },
         /**
          * #getter
@@ -2056,12 +2140,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 self.colWidth >= minLetterColWidth &&
                 self.colWidth > self.rowHeight / 2);
         },
-        /**
-         * #getter
-         */
-        get showTreeText() {
-            return self.drawLabels && self.rowHeight >= minLetterRowHeight;
-        },
     }))
         .views(self => {
         // a spec is a frozen value, so it keys its computed until setColumnTracks
@@ -2183,48 +2261,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         };
     })
         .views(self => ({
-        /**
-         * #getter
-         */
-        get labelWidthMap() {
-            const { showTreeText, leaves } = self;
-            // gated on the renderer's label condition, so hidden labels reserve no
-            // gutter. Measured once at a reference size and scaled by
-            // labelWidthScale: re-measuring per vertical-zoom frame cost ~200ms on a
-            // 50k-leaf tree
-            return showTreeText
-                ? new Map(leaves.map(node => {
-                    const { name } = node.data;
-                    // `||`, matching renderTreeLabels: an empty genome falls back
-                    // to the row name
-                    const displayName = self.rowDataOf(name)?.genome || name;
-                    return [
-                        name,
-                        measureTextCanvas(displayName, labelReferenceFontSize),
-                    ];
-                }))
-                : new Map();
-        },
-        /**
-         * #getter
-         * factor turning a labelWidthMap entry into its width at the current
-         * font size
-         */
-        get labelWidthScale() {
-            return self.fontSize / labelReferenceFontSize;
-        },
-        get labelsWidth() {
-            // a loop, not Math.max(...): spreading passes one argument per leaf,
-            // and the ~125k argument limit throws RangeError on the 230k-tip COVID
-            // tree
-            let max = 0;
-            for (const width of this.labelWidthMap.values()) {
-                if (width > max) {
-                    max = width;
-                }
-            }
-            return max * this.labelWidthScale;
-        },
         /**
          * #getter
          */
@@ -2663,7 +2699,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * or when the tree area is too narrow for one
          */
         get treeScaleBar() {
-            return scaleBarLength(self.pxPerBranchLength, self.treeAreaWidth - self.marginLeft * 2);
+            return scaleBarLength(self.pxPerBranchLength, self.effectiveTreeAreaWidth - self.marginLeft * 2);
         },
         /**
          * #getter
@@ -4166,34 +4202,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
                 self.columns;
             }));
-            // with autoTreeAreaWidth and no tree drawn, size the tree area to the
-            // labels. Gated on noTree/!drawTree so it does not loop with the
-            // treeWidth autorun below
-            addDisposer(self, autorun(() => {
-                if (self.autoTreeAreaWidth &&
-                    (self.noTree || !self.drawTree) &&
-                    self.labelsWidth) {
-                    self.setTreeAreaWidth(self.labelsWidth + self.marginLeft + 12 + self.cladeGutterWidth);
-                }
-            }));
-            // treeWidth follows the tree area less the labels. A non-default
-            // snapshot treeWidth (jbrowse-plugin-msaview opens at 100 in a 200px
-            // area) is kept until the tree area changes. Not a getter, because
-            // labelsWidth is measured off leaves laid out against treeWidth.
-            let pinnedAreaWidth = self.treeWidth === defaultTreeWidth ? undefined : self.treeAreaWidth;
-            addDisposer(self, autorun(() => {
-                const areaWidth = self.treeAreaWidth;
-                const labelsWidth = self.labelsWidth;
-                if (pinnedAreaWidth === areaWidth) {
-                    return;
-                }
-                pinnedAreaWidth = undefined;
-                self.setTreeWidth(Math.max(50, areaWidth -
-                    labelsWidth -
-                    10 -
-                    self.marginLeft -
-                    self.cladeGutterWidth));
-            }));
         },
     }))
         .postProcessSnapshot(({ data, columnTracks, ...rest }) => ({