react-msaview 8.4.1 → 9.1.0

package/dist/model.js

@@ -3,7 +3,7 @@ import { openLocation } from '@jbrowse/core/util/io';
 import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst';
 import { addDisposer, applySnapshot, cast, getSnapshot, isAlive, types, } from '@jbrowse/mobx-state-tree';
 import { autorun, compareStructural, computed, reaction, transaction, } from 'mobx';
-import { generateNodeIds, gffToAnnotations, interProScanToAnnotations, parseEmfTree, parseGFF, parseMSA, parseNewick, } from 'msa-parsers';
+import { generateNodeIds, gffToAnnotations, parseEmfTree, parseGFF, parseMSA, parseNewick, } from 'msa-parsers';
 import { blockFasta } from './blockFasta.js';
 import { calculateBlocks } from './calculateBlocks.js';
 import { clustalXColumnColors } from './clustalX.js';
@@ -12,18 +12,16 @@ import { columnCountsFromRows, letterOfResidueSlot } from './columnCounts.js';
 import { columnStats } from './columnStats.js';
 import { packDomainLanes } from './components/msa/packDomainLanes.js';
 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';
 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 { collapse, find, forEachDescendant, hierarchy, layoutTree, leafIndex, leaves, mrca, nodeCoveringRows, sort, sum as hierarchySum, } from './hierarchy.js';
 import { DataModelF } from './model/DataModel.js';
 import { DialogQueueSessionMixin } from './model/DialogQueue.js';
 import { MSAModelF } from './model/msaModel.js';
@@ -37,6 +35,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 +302,6 @@ export const preservedOnReset = new Set([
     'drawNodeLabels',
     'showTreeOverview',
     'overviewHeight',
-    'autoTreeAreaWidth',
     'turnedOffTracks',
     'trackHeights',
     'hideGaps',
@@ -323,33 +321,71 @@ const seedingMarks = new Set(['collapse', 'focus', 'rotate']);
 // shared empty results, so observers don't see a fresh [] as a change
 const noDomains = [];
 const noClades = [];
+/**
+ * Each tip of the full tree in the order the tree draws it, with the on-screen
+ * row that shows it: its own, or the row of the collapsed node standing for it
+ */
+function tipRows(root) {
+    const rows = new Map();
+    let row = 0;
+    const pushReversed = (stack, nodes) => {
+        for (let i = nodes.length - 1; i >= 0; i--) {
+            stack.push(nodes[i]);
+        }
+    };
+    const stack = [root];
+    while (stack.length > 0) {
+        const node = stack.pop();
+        if (node.children?.length) {
+            pushReversed(stack, node.children);
+        }
+        else {
+            const hidden = [node];
+            while (hidden.length > 0) {
+                const tip = hidden.pop();
+                const kids = tip.children ?? tip._children;
+                if (kids?.length) {
+                    pushReversed(hidden, kids);
+                }
+                else {
+                    rows.set(tip.data.name, { order: rows.size, row });
+                }
+            }
+            row++;
+        }
+    }
+    return rows;
+}
 /**
  * The rows a clade covers and the node an `mrca` names, or undefined when the
  * clade does not resolve: a tip name the tree does not have or has twice, or a
- * leaf count `tips` disagrees with. `index` and `rowNamesSet` are the memoized
- * passes over the tree.
+ * leaf count `tips` disagrees with. A `range` counts its tips in the order
+ * `tips` gives them, so a collapsed clade inside it counts every leaf it
+ * stands for. `index` is the memoized leaf pass over the tree.
  */
-function cladeRows(clade, root, index, rowNamesSet) {
+function cladeRows(clade, root, index, tips) {
     if (clade.range) {
-        const [a, b] = clade.range.map(name => index.get(name) ? rowNamesSet.get(name) : undefined);
+        const [a, b] = clade.range.map(name => index.get(name) ? tips.get(name) : undefined);
         if (a === undefined || b === undefined) {
             return undefined;
         }
-        const rows = a <= b ? [a, b] : [b, a];
-        return rows[1] - rows[0] + 1 === clade.tips ? { rows } : undefined;
+        const [first, last] = a.order <= b.order ? [a, b] : [b, a];
+        return last.order - first.order + 1 === clade.tips
+            ? { rows: [first.row, last.row] }
+            : undefined;
     }
     const node = clade.mrca ? mrca(root, clade.mrca, index) : undefined;
     if (!node) {
         return undefined;
     }
-    const tips = leaves(node);
-    if (tips.length !== clade.tips) {
+    const nodeTips = leaves(node);
+    if (nodeTips.length !== clade.tips) {
         return undefined;
     }
     let first = Infinity;
     let last = -Infinity;
-    for (const tip of tips) {
-        const row = rowNamesSet.get(tip.data.name);
+    for (const tip of nodeTips) {
+        const row = tips.get(tip.data.name)?.row;
         if (row !== undefined) {
             first = Math.min(first, row);
             last = Math.max(last, row);
@@ -360,15 +396,17 @@ function cladeRows(clade, root, index, rowNamesSet) {
         : undefined;
 }
 /**
- * Every clade that resolves, with its fill color settled, against the leaf
- * order `rowNamesSet` gives. The tree panel resolves against the displayed
- * rows and the overview against its own, so both take the tree they draw. A
- * `range` record names no node, so the seeding marks, which need one, drop it.
+ * Every clade that resolves, with its fill color settled, against the rows of
+ * `displayed`, the tree as drawn. The tree panel resolves against the
+ * displayed rows and the overview against its own, so both take the tree they
+ * draw. A `range` record names no node, so the seeding marks, which need one,
+ * drop it.
  */
-function resolveClades(clades, root, rowNamesSet) {
+function resolveClades(clades, root, displayed) {
     const index = leafIndex(root);
+    const tips = tipRows(displayed);
     return clades.flatMap(clade => {
-        const resolved = cladeRows(clade, root, index, rowNamesSet);
+        const resolved = cladeRows(clade, root, index, tips);
         const seeding = seedingMarks.has(clade.mark);
         return resolved && !(seeding && resolved.nodeId === undefined)
             ? [
@@ -471,8 +509,8 @@ function rootTree(tree, treeRoot) {
         ? generateNodeIds(rerootTree(input, plain.get(target.data)))
         : tree;
 }
-// the inclusive tip indices a node covers, from the row-space extent
-// clusterLayout writes to xMin/xMax as tip centers
+// the inclusive tip indices a node covers, from its xMin/xMax in a layout one
+// row per tip
 function tipRange(node) {
     return [Math.round(node.xMin - 0.5), Math.round(node.xMax - 0.5)];
 }
@@ -484,6 +522,15 @@ const featureChannels = new Set([
 // seqPos -> column indexes per row, keyed on the parse so they are garbage
 // collected with it. A computed would rebuild every row's index when read
 // outside a reactive context.
+// Newick tools write a colon in a name as an underscore, so a tree's row
+// `chr1_100-200` is the GFF's `chr1:100-200`, as FastaMSA.getRow resolves it
+function annotationRowName(id, rowNames) {
+    if (rowNames.has(id)) {
+        return id;
+    }
+    const underscored = id.replaceAll(':', '_');
+    return rowNames.has(underscored) ? underscored : id;
+}
 const seqPosIndexCache = new WeakMap();
 // A segment is a 1:1 run. A segment whose sides differ in length is malformed,
 // and the lookups treat it like an uncovered position.
@@ -769,9 +816,10 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         /**
          * #property
          * where the view opens, in `highlights` coordinates: `{row, start,
-         * end}` zooms onto residues of that row, `{start, end}` onto alignment
-         * columns. Applied once the alignment and any tree file have loaded,
-         * then cleared, so a reloaded session keeps the reader's own scroll.
+         * end}` zooms onto residues of that row and scrolls the row to the
+         * middle, `{start, end}` zooms onto alignment columns. Applied once the
+         * alignment and any tree file have loaded, then cleared, so a reloaded
+         * session keeps the reader's own scroll.
          */
         region: types.frozen(),
         /**
@@ -812,6 +860,12 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * of the snapshot so a link opened in the full app shows the toolbar.
          */
         hideHeader: false,
+        /**
+         * #volatile
+         * shows the import form while the view has no data. MSAViewer turns it
+         * off, since its host supplies the data and the form is the demo app's
+         */
+        importForm: true,
         /**
          * #volatile
          */
@@ -1276,17 +1330,15 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         .views(self => ({
         /**
          * #getter
-         * hideGaps takes effect when there are collapsed rows or allowedGappyness < 100
+         * hideGaps takes effect when a collapse or a focus hides rows, whose
+         * residues leave columns all gaps among the rest, or when
+         * allowedGappyness is under 100
          */
         get hideGapsEffective() {
             return (self.hideGaps &&
-                (self.collapsed.length > 0 || self.allowedGappyness < 100));
-        },
-        /**
-         * #getter
-         */
-        get realAllowedGappyness() {
-            return this.hideGapsEffective ? self.allowedGappyness : 100;
+                (self.collapsed.length > 0 ||
+                    self.showOnly !== undefined ||
+                    self.allowedGappyness < 100));
         },
         /**
          * #getter
@@ -1420,10 +1472,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;
@@ -1535,7 +1587,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             if (self.clades.length === 0) {
                 return noClades;
             }
-            return resolveClades(self.clades, hierarchy(this.tree, d => d.children), this.rowNamesSet);
+            return resolveClades(self.clades, hierarchy(this.tree, d => d.children), this.root);
         },
         /**
          * #getter
@@ -1544,11 +1596,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
@@ -1621,21 +1755,16 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             if (!self.showTreeOverview) {
                 return undefined;
             }
-            const root = buildTreeRoot(this.tree, {
+            const layout = layoutTree(buildTreeRoot(this.tree, {
                 collapsed: self.collapsed,
                 rotated: self.rotated,
                 order: self.treeOrder,
-            });
-            const numTips = leaves(root).length;
-            clusterLayout(root, numTips, 1);
-            const rootLen = Math.max(root.data.length || 0, 0);
-            const extent = maxLength(root) - rootLen;
-            setBrLength(root, -rootLen, extent ? 1 / extent : 0);
+            }), { rowHeight: 1, treeWidth: 1 });
             return {
-                root,
-                numTips,
-                maxDepthToLeaf: calcDepthToLeaf(root),
-                showBranchLen: self.showBranchLen && extent > 0,
+                root: layout.root,
+                numTips: layout.leaves.length,
+                maxDepthToLeaf: layout.root.depthToLeaf,
+                showBranchLen: self.showBranchLen && layout.rootToTipLength > 0,
             };
         },
         /**
@@ -1648,8 +1777,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             if (!layout || self.clades.length === 0) {
                 return noClades;
             }
-            const rowNames = new Map(leaves(layout.root).map((leaf, index) => [leaf.data.name, index]));
-            return resolveClades(self.clades, layout.root, rowNames);
+            return resolveClades(self.clades, hierarchy(this.tree, d => d.children), layout.root);
         },
         /**
          * #getter
@@ -1714,7 +1842,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          */
         get msaAreaWidth() {
             return (self.width -
-                self.treeAreaWidth -
+                this.effectiveTreeAreaWidth -
                 this.rowPanelsWidth -
                 self.resizeHandleWidth);
         },
@@ -1724,13 +1852,13 @@ 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
          */
         get blanks() {
-            const { hideGapsEffective, realAllowedGappyness } = self;
+            const { hideGapsEffective, allowedGappyness } = self;
             if (!hideGapsEffective) {
                 return [];
             }
@@ -1746,7 +1874,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             // row that stops early counts as gapped for the remainder
             const numCols = this.MSA?.getWidth() ?? 0;
             const numRows = strs.length;
-            const threshold = Math.ceil((realAllowedGappyness / 100) * numRows);
+            const threshold = Math.ceil((allowedGappyness / 100) * numRows);
             const blankCounts = new Uint32Array(numCols);
             for (let j = 0; j < numRows; j++) {
                 const str = strs[j];
@@ -1828,11 +1956,19 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             }
             return index;
         },
+        /**
+         * #method
+         * the row's aligned sequence by the name the tree gives it, including
+         * rows a collapsed clade hides. `MSA.getRow` resolves a FASTA name whose
+         * colon a Newick tool wrote as an underscore, which `rowMap` does not
+         */
+        rowSequence(name) {
+            return this.MSA?.getRow(name) || undefined;
+        },
         /**
          * #getter
-         * every sequence in the alignment, keyed by row name, including rows a
-         * collapsed clade hides. `rows` holds only the rows on screen; lookups
-         * by row name use this
+         * every sequence in the alignment, keyed by the alignment's own row
+         * names, including rows a collapsed clade hides
          */
         get rowMap() {
             const MSA = this.MSA;
@@ -1860,7 +1996,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * #getter
          */
         get fontSize() {
-            return Math.min(Math.max(6, self.rowHeight - 3), 18);
+            return fontSizeFor(self.rowHeight);
         },
         /**
          * #getter
@@ -1875,10 +2011,11 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          */
         get sequenceType() {
             const letters = this.colStats.lettersPresent;
-            // isDna already excludes U (not in the DNA set) and isRna excludes T,
-            // so the set membership alone disambiguates the two
-            const dna = new Set(['A', 'C', 'G', 'T', 'N']);
-            const rna = new Set(['A', 'C', 'G', 'U', 'N']);
+            // the two-base IUPAC codes keep an ambiguous read nucleotide; the
+            // three-base ones (B, D, H, V) are common amino acids, so they don't
+            const ambiguous = ['N', 'R', 'Y', 'K', 'M', 'S', 'W'];
+            const dna = new Set(['A', 'C', 'G', 'T', ...ambiguous]);
+            const rna = new Set(['A', 'C', 'G', 'U', ...ambiguous]);
             const isDna = letters.size > 0 && [...letters].every(l => dna.has(l));
             const isRna = letters.size > 0 && [...letters].every(l => rna.has(l));
             return isDna ? 'dna' : isRna ? 'rna' : 'amino';
@@ -1959,17 +2096,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();
                 },
             });
         },
@@ -2000,14 +2138,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         get rootToTipLength() {
             return this.treeLayout.rootToTipLength;
         },
-        /**
-         * #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)
-         */
-        get maxBranchLength() {
-            return this.rootToTipLength ? self.treeWidth : 0;
-        },
         /**
          * #getter
          * pixels per unit of branch length in the phylogram layout, 0 in
@@ -2015,7 +2145,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 +2188,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
@@ -2167,7 +2293,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                                 data: content?.data,
                                 arcs: content?.arcs,
                             },
-                            ReactComponent: TrackBlocks,
                         };
                     });
                     columnTrackModels.set(track, computedModel);
@@ -2183,48 +2308,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
          */
@@ -2267,7 +2350,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     data: hideGapsEffective ? skipBlanks(blanks, t.data) : t.data,
                     height: rowHeight,
                 },
-                ReactComponent: TrackBlocks,
             }));
         },
         /**
@@ -2289,7 +2371,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                             height: self.trackHeight('arc'),
                             arcs,
                         },
-                        ReactComponent: TrackBlocks,
                     },
                 ]
                 : [];
@@ -2336,7 +2417,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     heightKey: resizableKinds.has(model.kind) ? model.kind : undefined,
                     height: self.trackHeight(model.kind),
                 },
-                ReactComponent: TrackBlocks,
             }));
         },
         get tracks() {
@@ -2372,7 +2452,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * @returns The character at that position
          */
         visibleColToRowLetter(rowName, visibleCol) {
-            return self.rowMap.get(rowName)?.[this.visibleColToGlobalCol(visibleCol)];
+            return self.rowSequence(rowName)?.[this.visibleColToGlobalCol(visibleCol)];
         },
         /**
          * #method
@@ -2447,7 +2527,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * @returns The global column index in the full MSA, or undefined
          */
         seqPosToGlobalCol(rowName, seqPos) {
-            const seq = self.rowMap.get(rowName);
+            const seq = self.rowSequence(rowName);
             if (seq === undefined) {
                 return undefined;
             }
@@ -2663,7 +2743,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
@@ -2713,7 +2793,8 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             return self.allAnnotations.filter(r => !self.turnedOffFeatures.get(r.accession));
         },
         get annotationsByRow() {
-            return groupBy(this.filteredAnnotations, r => r.id);
+            const { rowNamesSet } = self;
+            return groupBy(this.filteredAnnotations, r => annotationRowName(r.id, rowNamesSet));
         },
     }))
         .views(self => ({
@@ -2801,7 +2882,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             const { annotations, rowNamesSet } = self;
             return self.dataInitialized &&
                 annotations.length > 0 &&
-                !annotations.some(a => rowNamesSet.has(a.id))
+                !annotations.some(a => rowNamesSet.has(annotationRowName(a.id, rowNamesSet)))
                 ? [
                     `0 of ${annotations.length} annotations name a row in this alignment`,
                 ]
@@ -2926,10 +3007,13 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * #action
          * swap in a different tree over the same alignment. Clears `collapsed`,
          * `rotated` and `showOnly`, since path-derived node ids (node-0-0-1) from the old
-         * tree would match unrelated nodes in the new one.
+         * tree would match unrelated nodes in the new one, and the tree's
+         * filehandle, which the snapshot would otherwise reopen in place of
+         * the new tree
          */
         replaceTree(newick) {
             transaction(() => {
+                self.setTreeFilehandle(undefined);
                 self.collapsed.clear();
                 self.rotated.clear();
                 self.setShowOnly(undefined);
@@ -2951,30 +3035,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         zoomAtCenter(scaleFactor, axis = 'both') {
             this.zoomToPos(scaleFactor, self.msaCanvasWidth / 2, self.msaAreaHeight / 2, axis);
         },
-        /**
-         * #action
-         */
-        zoomOutHorizontal() {
-            this.zoomAtCenter(0.75, 'horizontal');
-        },
-        /**
-         * #action
-         */
-        zoomInHorizontal() {
-            this.zoomAtCenter(1.5, 'horizontal');
-        },
-        /**
-         * #action
-         */
-        zoomInVertical() {
-            this.zoomAtCenter(1.5, 'vertical');
-        },
-        /**
-         * #action
-         */
-        zoomOutVertical() {
-            this.zoomAtCenter(0.75, 'vertical');
-        },
         /**
          * #action
          */
@@ -3041,15 +3101,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         setAnnotations(annotations) {
             self.annotations = annotations;
         },
-        /**
-         * #action
-         * set the overlay from raw InterProScan results keyed by row name. Kept
-         * for downstream plugins that hold the EBI wire format; new code should
-         * adapt to Annotation[] and call setAnnotations.
-         */
-        setDomains(data) {
-            this.setAnnotations(data ? interProScanToAnnotations(data) : []);
-        },
         applyGFFText(gffText) {
             this.setAnnotations(gffToAnnotations(parseGFF(gffText)));
         },
@@ -3130,7 +3181,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     column: column + 1,
                     row,
                     residue: self.visibleColToSeqPosOneBased(row, visibleCol),
-                    letter: self.rowMap.get(row)?.[column],
+                    letter: self.rowSequence(row)?.[column],
                 };
         },
         /**
@@ -3295,7 +3346,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     : visibleDomainTypes.map(d => ({
                         id: d.accession,
                         label: d.name,
-                        color: fillPalette[d.accession],
+                        color: d.color ?? fillPalette[d.accession],
                     })), 'domains');
             }
             for (const { channel, field, legend } of this.resolvedEncodings) {
@@ -3531,7 +3582,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * to `end`, gaps included
          */
         get selectionFasta() {
-            const { rowNames, rowMap } = self;
+            const { rowNames } = self;
             const resolved = this.resolvedSelection;
             const span = this.selectionFileSpan;
             if (!resolved || !span) {
@@ -3540,7 +3591,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             const rows = resolved.rowRuns
                 .flatMap(([first, last]) => rowNames.slice(first, last + 1))
                 .flatMap(name => {
-                const seq = rowMap.get(name);
+                const seq = self.rowSequence(name);
                 return seq === undefined ? [] : [[name, seq]];
             });
             return blockFasta(rows, span.start, span.end);
@@ -3619,7 +3670,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                             this.visibleDomainTypes.map(d => ({
                                 id: d.accession,
                                 label: d.name,
-                                color: fillPalette[d.accession],
+                                color: d.color ?? fillPalette[d.accession],
                             })),
                     };
                 }
@@ -3768,6 +3819,12 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         setHideHeader(arg) {
             self.hideHeader = arg;
         },
+        /**
+         * #action
+         */
+        setImportForm(arg) {
+            self.importForm = arg;
+        },
         /**
          * #action
          * focus the subtree a click `y` pixels down the tree overview lands on.
@@ -3875,6 +3932,24 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 self.scrollX = clamp(-span.startCol * self.colWidth, self.maxScrollX, 0);
             });
         },
+        /**
+         * #action
+         * zoomToRegion, and for a region naming a row, also scroll that row to
+         * the middle of the alignment, as Go to does. What `region` opens on; a
+         * caller following a range as it moves wants zoomToRegion alone, which
+         * leaves the reader's vertical scroll where they put it.
+         */
+        revealRegion(region) {
+            transaction(() => {
+                this.zoomToRegion(region);
+                const row = region.row === undefined
+                    ? undefined
+                    : self.rowNamesSet.get(region.row);
+                if (row !== undefined && self.viewInitialized) {
+                    self.setScrollY(-(row + 0.5) * self.rowHeight + self.msaAreaHeight / 2);
+                }
+            });
+        },
         /**
          * #action
          * zoom and scroll so the selected columns fill the alignment's width,
@@ -3975,7 +4050,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     self.viewInitialized &&
                     self.numColumns > 0 &&
                     !(self.treeFilehandle && !self.data.tree)) {
-                    this.zoomToRegion(region);
+                    this.revealRegion(region);
                     self.setRegion(undefined);
                 }
             }));
@@ -4037,7 +4112,9 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     };
                     try {
                         setLoading?.(true);
-                        self.setError(undefined);
+                        if (!optional) {
+                            self.setError(undefined);
+                        }
                         const text = await fetchTextWithProgress(openLocation(filehandle), status => {
                             if (isCurrent()) {
                                 self.setStatus(status);
@@ -4166,34 +4243,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 }) => ({