react-msaview 8.4.1 → 9.1.0

package/src/model.ts

@@ -19,7 +19,6 @@ import {
 import {
   generateNodeIds,
   gffToAnnotations,
-  interProScanToAnnotations,
   parseEmfTree,
   parseGFF,
   parseMSA,
@@ -34,7 +33,6 @@ import { columnCountsFromRows, letterOfResidueSlot } from './columnCounts.ts'
 import { columnStats } from './columnStats.ts'
 import { packDomainLanes } from './components/msa/packDomainLanes.ts'
 import { visibleColRange } from './components/msa/visibleColRange.ts'
-import TrackBlocks from './components/tracks/TrackBlocks.tsx'
 import { cladeGutterWidth } from './components/tree/cladeBrackets.ts'
 import { scaleBarLength } from './components/tree/scaleBar.ts'
 import {
@@ -56,15 +54,19 @@ import {
   defaultShowDomainLegend,
   defaultShowDomains,
   defaultSubFeatureRows,
-  defaultTreeWidth,
-  labelReferenceFontSize,
+  fontSizeFor,
+  labelFitFontSize,
   maxCellSize,
+  maxFitTreeWidth,
+  maxTreeAreaShare,
   maxInlineSnapshotBytes as defaultMaxInlineSnapshotBytes,
   maxNeighborJoiningRows,
   minColWidth,
   minLetterColWidth,
   minLetterRowHeight,
   minRowHeight,
+  minTreeWidth,
+  pxPerTreeDepth,
   rowPanelHeaderHeight,
   rowTintAlpha,
   scrollZoomAxes,
@@ -79,8 +81,6 @@ import { featuresToAnnotations } from './featuresLayer.ts'
 import { fetchTextWithProgress, isAbortError } from './fetchUtils.ts'
 import { flatToTree } from './flatToTree.ts'
 import {
-  calcDepthToLeaf,
-  clusterLayout,
   collapse,
   find,
   forEachDescendant,
@@ -88,14 +88,11 @@ import {
   layoutTree,
   leafIndex,
   leaves,
-  maxLength,
   mrca,
   nodeCoveringRows,
-  setBrLength,
   sort,
   sum as hierarchySum,
 } from './hierarchy.ts'
-import { measureTextCanvas } from './measureTextCanvas.ts'
 import { DataModelF } from './model/DataModel.ts'
 import { DialogQueueSessionMixin } from './model/DialogQueue.ts'
 import { MSAModelF } from './model/msaModel.ts'
@@ -114,6 +111,7 @@ import { resolveScale } from './scales.ts'
 import { buildSeqPosIndex } from './seqPosToGlobalCol.ts'
 import { maxBitsFor } from './sequenceLogo.ts'
 import { stripDefault } from './stripDefault.ts'
+import { treeTips, widestLabel } from './tipLabels.ts'
 import {
   computeRowInsertions,
   dropBlanks,
@@ -175,7 +173,6 @@ import type {
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 import type { Instance } from '@jbrowse/mobx-state-tree'
 import type { IComputedValue } from 'mobx'
-import type { InterProScanResults } from 'msa-parsers'
 
 function parseTreeText(text: string) {
   if (text.startsWith('BioTreeContainer')) {
@@ -528,7 +525,6 @@ export const preservedOnReset = new Set([
   'drawNodeLabels',
   'showTreeOverview',
   'overviewHeight',
-  'autoTreeAreaWidth',
   'turnedOffTracks',
   'trackHeights',
   'hideGaps',
@@ -556,40 +552,80 @@ const seedingMarks = new Set<CladeMark>(['collapse', 'focus', 'rotate'])
 const noDomains: Annotation[] = []
 const noClades: ResolvedClade[] = []
 
+/**
+ * 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: HierarchyNode<NodeWithIds>) {
+  const rows = new Map<string, { order: number; row: number }>()
+  let row = 0
+  const pushReversed = (
+    stack: HierarchyNode<NodeWithIds>[],
+    nodes: HierarchyNode<NodeWithIds>[],
+  ) => {
+    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: Clade,
   root: HierarchyNode<NodeWithIds>,
   index: Map<string, HierarchyNode<NodeWithIds> | undefined>,
-  rowNamesSet: Map<string, number>,
+  tips: Map<string, { order: number; row: number }>,
 ): { rows: [number, number]; nodeId?: string } | undefined {
   if (clade.range) {
     const [a, b] = clade.range.map(name =>
-      index.get(name) ? rowNamesSet.get(name) : undefined,
+      index.get(name) ? tips.get(name) : undefined,
     )
     if (a === undefined || b === undefined) {
       return undefined
     }
-    const rows: [number, number] = 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)
@@ -601,19 +637,21 @@ function cladeRows(
 }
 
 /**
- * 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: Clade[],
   root: HierarchyNode<NodeWithIds>,
-  rowNamesSet: Map<string, number>,
+  displayed: HierarchyNode<NodeWithIds>,
 ): ResolvedClade[] {
   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)
       ? [
@@ -747,8 +785,8 @@ function rootTree(tree: NodeWithIds, treeRoot: TreeRoot) {
     : 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: HierarchyNode): [number, number] {
   return [Math.round(node.xMin! - 0.5), Math.round(node.xMax! - 0.5)]
 }
@@ -762,6 +800,16 @@ const featureChannels = new Set<EncodingChannel>([
 // 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: string, rowNames: Map<string, number>) {
+  if (rowNames.has(id)) {
+    return id
+  }
+  const underscored = id.replaceAll(':', '_')
+  return rowNames.has(underscored) ? underscored : id
+}
+
 const seqPosIndexCache = new WeakMap<object, Map<string, Int32Array>>()
 
 // A segment is a 1:1 run. A segment whose sides differ in length is malformed,
@@ -1093,9 +1141,10 @@ function stateModelFactory({
         /**
          * #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<Region | undefined>(),
         /**
@@ -1137,6 +1186,12 @@ function stateModelFactory({
        * 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
        */
@@ -1648,20 +1703,18 @@ function stateModelFactory({
     .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)
+          (self.collapsed.length > 0 ||
+            self.showOnly !== undefined ||
+            self.allowedGappyness < 100)
         )
       },
-      /**
-       * #getter
-       */
-      get realAllowedGappyness() {
-        return this.hideGapsEffective ? self.allowedGappyness : 100
-      },
       /**
        * #getter
        * the annotations the overlay, the legend and the encodings draw: the
@@ -1804,10 +1857,10 @@ function stateModelFactory({
        * 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(): Record<string, Record<string, string> | undefined> {
         const text = self.data.treeMetadata
@@ -1928,7 +1981,7 @@ function stateModelFactory({
         return resolveClades(
           self.clades,
           hierarchy(this.tree, d => d.children),
-          this.rowNamesSet,
+          this.root,
         )
       },
       /**
@@ -1938,11 +1991,107 @@ function stateModelFactory({
        * 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
@@ -2021,21 +2170,19 @@ function stateModelFactory({
         if (!self.showTreeOverview) {
           return undefined
         }
-        const root = 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)
+        const layout = layoutTree(
+          buildTreeRoot(this.tree, {
+            collapsed: self.collapsed,
+            rotated: self.rotated,
+            order: self.treeOrder,
+          }),
+          { 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,
         }
       },
 
@@ -2049,10 +2196,11 @@ function stateModelFactory({
         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,
+          hierarchy(this.tree, d => d.children),
+          layout.root,
         )
-        return resolveClades(self.clades, layout.root, rowNames)
       },
 
       /**
@@ -2125,7 +2273,7 @@ function stateModelFactory({
       get msaAreaWidth() {
         return (
           self.width -
-          self.treeAreaWidth -
+          this.effectiveTreeAreaWidth -
           this.rowPanelsWidth -
           self.resizeHandleWidth
         )
@@ -2137,13 +2285,15 @@ function stateModelFactory({
        * 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 []
         }
@@ -2159,7 +2309,7 @@ function stateModelFactory({
         // 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]!
@@ -2243,11 +2393,19 @@ function stateModelFactory({
         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: string) {
+        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
@@ -2282,7 +2440,7 @@ function stateModelFactory({
        * #getter
        */
       get fontSize() {
-        return Math.min(Math.max(6, self.rowHeight - 3), 18)
+        return fontSizeFor(self.rowHeight)
       },
       /**
        * #getter
@@ -2298,10 +2456,11 @@ function stateModelFactory({
        */
       get sequenceType(): 'dna' | 'rna' | 'amino' {
         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'
@@ -2388,17 +2547,18 @@ function stateModelFactory({
       /**
        * #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()
           },
         })
       },
@@ -2434,15 +2594,6 @@ function stateModelFactory({
         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
@@ -2450,7 +2601,9 @@ function stateModelFactory({
        */
       get pxPerBranchLength() {
         const max = this.rootToTipLength
-        return this.showBranchLenEffective && max ? self.treeWidth / max : 0
+        return this.showBranchLenEffective && max
+          ? this.effectiveTreeWidth / max
+          : 0
       },
 
       /**
@@ -2497,12 +2650,6 @@ function stateModelFactory({
           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
@@ -2623,7 +2770,6 @@ function stateModelFactory({
                   data: content?.data,
                   arcs: content?.arcs,
                 },
-                ReactComponent: TrackBlocks,
               }
             })
             columnTrackModels.set(track, computedModel)
@@ -2639,53 +2785,6 @@ function stateModelFactory({
       }
     })
     .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),
-                ] as const
-              }),
-            )
-          : new Map<string, number>()
-      },
-
-      /**
-       * #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
        */
@@ -2732,7 +2831,6 @@ function stateModelFactory({
             data: hideGapsEffective ? skipBlanks(blanks, t.data!) : t.data,
             height: rowHeight,
           },
-          ReactComponent: TrackBlocks,
         }))
       },
 
@@ -2755,7 +2853,6 @@ function stateModelFactory({
                   height: self.trackHeight('arc'),
                   arcs,
                 },
-                ReactComponent: TrackBlocks,
               },
             ]
           : []
@@ -2803,7 +2900,6 @@ function stateModelFactory({
             heightKey: resizableKinds.has(model.kind) ? model.kind : undefined,
             height: self.trackHeight(model.kind),
           },
-          ReactComponent: TrackBlocks,
         }))
       },
 
@@ -2846,7 +2942,7 @@ function stateModelFactory({
        * @returns The character at that position
        */
       visibleColToRowLetter(rowName: string, visibleCol: number) {
-        return self.rowMap.get(rowName)?.[
+        return self.rowSequence(rowName)?.[
           this.visibleColToGlobalCol(visibleCol)
         ]
       },
@@ -2931,7 +3027,7 @@ function stateModelFactory({
        * @returns The global column index in the full MSA, or undefined
        */
       seqPosToGlobalCol(rowName: string, seqPos: number) {
-        const seq = self.rowMap.get(rowName)
+        const seq = self.rowSequence(rowName)
         if (seq === undefined) {
           return undefined
         }
@@ -3180,7 +3276,7 @@ function stateModelFactory({
       get treeScaleBar() {
         return scaleBarLength(
           self.pxPerBranchLength,
-          self.treeAreaWidth - self.marginLeft * 2,
+          self.effectiveTreeAreaWidth - self.marginLeft * 2,
         )
       },
       /**
@@ -3239,7 +3335,10 @@ function stateModelFactory({
         )
       },
       get annotationsByRow() {
-        return groupBy(this.filteredAnnotations, r => r.id)
+        const { rowNamesSet } = self
+        return groupBy(this.filteredAnnotations, r =>
+          annotationRowName(r.id, rowNamesSet),
+        )
       },
     }))
     .views(self => ({
@@ -3330,7 +3429,9 @@ function stateModelFactory({
         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`,
             ]
@@ -3470,10 +3571,13 @@ function stateModelFactory({
        * #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: string) {
         transaction(() => {
+          self.setTreeFilehandle(undefined)
           self.collapsed.clear()
           self.rotated.clear()
           self.setShowOnly(undefined)
@@ -3501,30 +3605,6 @@ function stateModelFactory({
           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
        */
@@ -3617,16 +3697,6 @@ function stateModelFactory({
         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?: Record<string, InterProScanResults>) {
-        this.setAnnotations(data ? interProScanToAnnotations(data) : [])
-      },
-
       applyGFFText(gffText: string) {
         this.setAnnotations(gffToAnnotations(parseGFF(gffText)))
       },
@@ -3714,7 +3784,7 @@ function stateModelFactory({
               column: column + 1,
               row,
               residue: self.visibleColToSeqPosOneBased(row, visibleCol),
-              letter: self.rowMap.get(row)?.[column],
+              letter: self.rowSequence(row)?.[column],
             }
       },
       /**
@@ -3903,7 +3973,7 @@ function stateModelFactory({
               : visibleDomainTypes.map(d => ({
                   id: d.accession,
                   label: d.name,
-                  color: fillPalette[d.accession]!,
+                  color: d.color ?? fillPalette[d.accession]!,
                 })),
             'domains',
           )
@@ -4170,7 +4240,7 @@ function stateModelFactory({
        * to `end`, gaps included
        */
       get selectionFasta() {
-        const { rowNames, rowMap } = self
+        const { rowNames } = self
         const resolved = this.resolvedSelection
         const span = this.selectionFileSpan
         if (!resolved || !span) {
@@ -4179,7 +4249,7 @@ function stateModelFactory({
         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] as const]
           })
         return blockFasta(rows, span.start, span.end)
@@ -4276,7 +4346,7 @@ function stateModelFactory({
                 this.visibleDomainTypes.map(d => ({
                   id: d.accession,
                   label: d.name,
-                  color: fillPalette[d.accession]!,
+                  color: d.color ?? fillPalette[d.accession]!,
                 })),
             }
           }
@@ -4453,6 +4523,12 @@ function stateModelFactory({
       setHideHeader(arg: boolean) {
         self.hideHeader = arg
       },
+      /**
+       * #action
+       */
+      setImportForm(arg: boolean) {
+        self.importForm = arg
+      },
       /**
        * #action
        * focus the subtree a click `y` pixels down the tree overview lands on.
@@ -4587,6 +4663,27 @@ function stateModelFactory({
           )
         })
       },
+      /**
+       * #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: 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,
@@ -4718,7 +4815,7 @@ function stateModelFactory({
               self.numColumns > 0 &&
               !(self.treeFilehandle && !self.data.tree)
             ) {
-              this.zoomToRegion(region)
+              this.revealRegion(region)
               self.setRegion(undefined)
             }
           }),
@@ -4802,7 +4899,9 @@ function stateModelFactory({
               }
               try {
                 setLoading?.(true)
-                self.setError(undefined)
+                if (!optional) {
+                  self.setError(undefined)
+                }
                 const text = await fetchTextWithProgress(
                   openLocation(filehandle),
                   status => {
@@ -4942,52 +5041,6 @@ function stateModelFactory({
             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 }) => ({