react-msaview 8.2.0 → 8.4.0

package/src/model.ts

@@ -9,7 +9,13 @@ import {
   isAlive,
   types,
 } from '@jbrowse/mobx-state-tree'
-import { autorun, computed, transaction } from 'mobx'
+import {
+  autorun,
+  compareStructural,
+  computed,
+  reaction,
+  transaction,
+} from 'mobx'
 import {
   generateNodeIds,
   gffToAnnotations,
@@ -20,9 +26,10 @@ import {
   parseNewick,
 } from 'msa-parsers'
 
+import { blockFasta } from './blockFasta.ts'
 import { calculateBlocks } from './calculateBlocks.ts'
 import { clustalXColumnColors } from './clustalX.ts'
-import colorSchemes from './colorSchemes.ts'
+import colorSchemes, { letterColorTable } from './colorSchemes.ts'
 import { columnCountsFromRows, letterOfResidueSlot } from './columnCounts.ts'
 import { columnStats } from './columnStats.ts'
 import { packDomainLanes } from './components/msa/packDomainLanes.ts'
@@ -52,7 +59,7 @@ import {
   defaultTreeWidth,
   labelReferenceFontSize,
   maxCellSize,
-  maxInlineSnapshotBytes,
+  maxInlineSnapshotBytes as defaultMaxInlineSnapshotBytes,
   maxNeighborJoiningRows,
   minColWidth,
   minLetterColWidth,
@@ -68,16 +75,17 @@ import {
 import { createPaletteMap } from './createPaletteMap.ts'
 import { exportFileName } from './exportFileName.ts'
 import { featureField, featureName } from './featureFields.ts'
+import { featuresToAnnotations } from './featuresLayer.ts'
 import { fetchTextWithProgress, isAbortError } from './fetchUtils.ts'
 import { flatToTree } from './flatToTree.ts'
 import {
   calcDepthToLeaf,
   clusterLayout,
   collapse,
-  collapsedSubtreeMaxLength,
   find,
   forEachDescendant,
   hierarchy,
+  layoutTree,
   leafIndex,
   leaves,
   maxLength,
@@ -95,6 +103,7 @@ import { TreeModelF } from './model/treeModel.ts'
 import { calculateNeighborJoiningTree } from './neighborJoining.ts'
 import { parseAsn1 } from './parseAsn1.ts'
 import { calculatePropertyConservation } from './propertyConservation.ts'
+import { midpointRoot, rerootTree } from './rerootTree.ts'
 import {
   globalColToVisibleCol,
   seqPosOfGlobalCol,
@@ -114,12 +123,14 @@ import {
   withAlpha,
 } from './util.ts'
 import { saveAs } from './vendor/fileSaver.ts'
+import { writeNewick } from './writeNewick.ts'
 import { parseWuss } from './wuss.ts'
 
 import type { ColumnStats } from './columnStats.ts'
 import type { ScrollZoomAxis } from './constants.ts'
 import type { HierarchyNode } from './hierarchy.ts'
 import type { ExportSvgOptions } from './renderToSvg.tsx'
+import type { TreeNode } from './rerootTree.ts'
 import type { ScaleSpec } from './scales.ts'
 import type {
   Annotation,
@@ -127,25 +138,33 @@ import type {
   BasicTrack,
   Cell,
   Clade,
+  CladeMark,
   ResidueMappingProblem,
   ColumnTrackSpec,
   DomainBand,
   Encoding,
   EncodingChannel,
+  Feature,
   Highlight,
   Legend,
   LegendEntry,
+  MsaSelection,
   NodeWithIds,
-  NodeWithIdsAndLength,
   Region,
   ResidueMapping,
   ResidueSegment,
   ResolvedClade,
   ResolvedEncoding,
+  ResolvedFeaturePanel,
   ResolvedHighlight,
+  ResolvedSelection,
+  TreeOrder,
+  TreeRoot,
   ResolvedRowPanel,
+  ResolvedStripPanel,
   RowFeaturesSpec,
   RowPanelSpan,
+  RowDataInput,
   RowPanelSpec,
   RowResidue,
   StructureResidue,
@@ -202,14 +221,56 @@ const UNSCALED_FEATURE = '#d9d9d9'
 const laneOverlap = 0.1
 
 // a row panel's own width, or a default: the row height, which makes a strip
-// cell square, and a gene neighborhood's width for a features panel
-function rowPanelWidth(panel: RowPanelSpec, rowHeight: number) {
+// cell square, and a gene neighborhood's width for a features panel. The row
+// height is read only when used, so a panel with a width of its own does not
+// recompute on a vertical zoom
+function rowPanelWidth(panel: RowPanelSpec, view: { rowHeight: number }) {
   return (
     panel.width ??
-    (panel.kind === 'features' ? defaultFeaturePanelWidth : rowHeight)
+    (panel.kind === 'features' ? defaultFeaturePanelWidth : view.rowHeight)
   )
 }
 
+// one row of the row table as the channels read it. A number or a boolean
+// reads as its string, the way a GFF value does, and null or an object drops
+function stringFields(row: unknown) {
+  if (typeof row !== 'object' || row === null) {
+    return undefined
+  }
+  const fields: Record<string, string> = {}
+  for (const [field, value] of Object.entries(row)) {
+    if (typeof value === 'string') {
+      fields[field] = value
+    } else if (typeof value === 'number' || typeof value === 'boolean') {
+      fields[field] = String(value)
+    }
+  }
+  return fields
+}
+
+// the color each row takes from a field of the row table under a scale
+function colorByRow(
+  rowData: Record<string, Record<string, string> | undefined>,
+  field: string,
+  colorOf: (value: string) => string | undefined,
+) {
+  const colors = new Map<string, string>()
+  for (const [name, row] of Object.entries(rowData)) {
+    const value = row?.[field]
+    const color = value === undefined ? undefined : colorOf(value)
+    if (color) {
+      colors.set(name, color)
+    }
+  }
+  return colors
+}
+
+type StripPanelScale = Omit<ResolvedStripPanel, 'id' | 'width' | 'offsetX'>
+type FeaturePanelScale = Omit<
+  ResolvedFeaturePanel,
+  'id' | 'width' | 'offsetX' | 'spans'
+>
+
 // the fill and outline of every feature in a list: its own GFF `color=` first,
 // then the scale an encoding resolves over one of its fields, then the
 // accession palette
@@ -387,28 +448,47 @@ function featurePanelSpans({
   )
 }
 
-// a scale over the values a field takes across the features drawn
+// a scale over the values a field takes across every feature loaded, so hiding
+// a type in the filter dialog leaves the rest in their colors, and a legend of
+// the values the features drawn carry
 function resolveFeatureScale(
   field: string,
   scale: ScaleSpec | undefined,
   annotations: Annotation[],
+  drawn: Annotation[],
 ) {
+  const valuesOf = (list: Annotation[]) =>
+    list.map(a => featureField(a, field)).filter(notEmpty)
+  const resolved = resolveScale(scale, valuesOf(annotations))
+  const shown = new Set(valuesOf(drawn))
   return {
     field,
-    ...resolveScale(
-      scale,
-      annotations.map(a => featureField(a, field)).filter(notEmpty),
-    ),
+    ...resolved,
+    legend: resolved.legend.filter(entry => shown.has(entry.id)),
+  }
+}
+
+const columnTrackBytes = new WeakMap<ColumnTrackSpec, number>()
+
+function columnTrackSize(track: ColumnTrackSpec) {
+  let bytes = columnTrackBytes.get(track)
+  if (bytes === undefined) {
+    bytes = JSON.stringify(track).length
+    columnTrackBytes.set(track, bytes)
   }
+  return bytes
 }
 
 // a data track over this size stays in the live model but leaves the snapshot,
 // the same rule DataModel applies to an inline document
 function columnTrackSizes(tracks?: readonly ColumnTrackSpec[]) {
-  return (tracks ?? []).map(t => JSON.stringify(t).length)
+  return (tracks ?? []).map(columnTrackSize)
 }
 
-function smallColumnTracks(tracks?: ColumnTrackSpec[]) {
+function smallColumnTracks(
+  tracks: ColumnTrackSpec[] | undefined,
+  maxInlineSnapshotBytes: number,
+) {
   const sizes = columnTrackSizes(tracks)
   const kept = tracks?.filter((_t, i) => sizes[i]! <= maxInlineSnapshotBytes)
   return kept?.length ? { columnTracks: kept } : {}
@@ -435,12 +515,14 @@ export const preservedOnReset = new Set([
   'scrollZoomAxis',
   'bgColor',
   'colorSchemeName',
+  'customColorScheme',
   'showColumnStats',
   'drawLabels',
   'labelsAlignRight',
   'treeAreaWidth',
   'treeWidth',
   'showBranchLen',
+  'treeOrder',
   'drawTree',
   'drawNodeBubbles',
   'drawNodeLabels',
@@ -467,6 +549,9 @@ function trackIsOff(
   return turnedOffTracks.get(id) ?? (defaultOff || defaultOffTracks.has(id))
 }
 
+// the marks that set tree state from a node rather than drawing
+const seedingMarks = new Set<CladeMark>(['collapse', 'focus', 'rotate'])
+
 // shared empty results, so observers don't see a fresh [] as a change
 const noDomains: Annotation[] = []
 const noClades: ResolvedClade[] = []
@@ -519,8 +604,7 @@ 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 `collapse` and `focus`, which need one,
- * drop it.
+ * `range` record names no node, so the seeding marks, which need one, drop it.
  */
 function resolveClades(
   clades: Clade[],
@@ -530,7 +614,7 @@ function resolveClades(
   const index = leafIndex(root)
   return clades.flatMap(clade => {
     const resolved = cladeRows(clade, root, index, rowNamesSet)
-    const seeding = clade.mark === 'collapse' || clade.mark === 'focus'
+    const seeding = seedingMarks.has(clade.mark)
     return resolved && !(seeding && resolved.nodeId === undefined)
       ? [
           {
@@ -548,20 +632,50 @@ function resolveClades(
   })
 }
 
+const childOrders: Record<
+  TreeOrder,
+  ((a: HierarchyNode, b: HierarchyNode) => number) | undefined
+> = {
+  input: undefined,
+  branchLength: (a, b) => (a.data.length ?? 1) - (b.data.length ?? 1),
+  ladderize: (a, b) => a.value! - b.value!,
+  ladderizeReverse: (a, b) => b.value! - a.value!,
+}
+
 /**
  * The tree with the display transforms applied: leaf counts summed, children
- * sorted by branch length, `showOnly` taken as the new root, and each
- * `collapsed` clade folded. The overview builds the same tree without the
- * focus, so it shows the focused subtree inside the whole.
+ * put in `order` and each `rotated` node's reversed, `showOnly` taken as the
+ * new root, and each `collapsed` clade folded. The overview builds the same
+ * tree without the focus, so it shows the focused subtree inside the whole.
  */
 function buildTreeRoot(
   tree: NodeWithIds,
-  collapsed: readonly string[],
-  showOnly?: string,
+  {
+    collapsed,
+    rotated,
+    order,
+    showOnly,
+  }: {
+    collapsed: readonly string[]
+    rotated: readonly string[]
+    order: TreeOrder
+    showOnly?: string
+  },
 ) {
   let hier = hierarchy(tree, d => d.children)
   hierarchySum(hier, d => (d.children.length > 0 ? 0 : 1))
-  sort(hier, (a, b) => (a.data.length ?? 1) - (b.data.length ?? 1))
+  const compare = childOrders[order]
+  if (compare) {
+    sort(hier, compare)
+  }
+  if (rotated.length > 0) {
+    const flip = new Set(rotated)
+    forEachDescendant(hier, n => {
+      if (flip.has(n.data.id)) {
+        n.children?.reverse()
+      }
+    })
+  }
 
   if (showOnly) {
     const res = find(hier, n => n.data.id === showOnly)
@@ -586,6 +700,53 @@ function buildTreeRoot(
   return hier
 }
 
+/**
+ * The node whose branch an outgroup roots the tree on: the outgroup's most
+ * recent common ancestor, or the rest of the tips' where that ancestor is the
+ * root, since the outgroup then straddles the root and the branch above the
+ * other side is the same branch of the unrooted tree.
+ */
+function outgroupNode(root: HierarchyNode, outgroup: string[]) {
+  const index = leafIndex(root)
+  const node = mrca(root, outgroup, index)
+  if (node !== root) {
+    return node
+  }
+  const out = new Set(outgroup)
+  const rest = leaves(root)
+    .map(n => n.data.name)
+    .filter(name => !out.has(name))
+  const other = mrca(root, rest, index)
+  return other === root ? undefined : other
+}
+
+/**
+ * `tree` rerooted as `treeRoot` asks, with fresh path ids. The ids of the tree
+ * as written become names on unnamed nodes, and a rerooting would carry them
+ * along as labels, so they come off first.
+ */
+function rootTree(tree: NodeWithIds, treeRoot: TreeRoot) {
+  const plain = new Map<NodeWithIds, TreeNode>()
+  for (const node of preorder(tree).reverse()) {
+    plain.set(node, {
+      name: node.name === node.id ? undefined : node.name,
+      length: node.length,
+      children: node.children.map(c => plain.get(c)!),
+    })
+  }
+  const input = plain.get(tree)!
+  if (treeRoot === 'midpoint') {
+    return generateNodeIds(midpointRoot(input))
+  }
+  const target = outgroupNode(
+    hierarchy(tree, d => d.children),
+    treeRoot.outgroup,
+  )
+  return target
+    ? 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
 function tipRange(node: HierarchyNode): [number, number] {
@@ -623,6 +784,20 @@ function inRanges(ranges: [number, number][] | undefined, position: number) {
   return !!ranges?.some(([start, end]) => position >= start && position <= end)
 }
 
+// sorted integers as inclusive [first, last] runs of consecutive values
+function consecutiveRuns(sorted: number[]) {
+  const runs: [number, number][] = []
+  for (const n of sorted) {
+    const last = runs.at(-1)
+    if (last && n <= last[1] + 1) {
+      last[1] = Math.max(last[1], n)
+    } else {
+      runs.push([n, n])
+    }
+  }
+  return runs
+}
+
 // the value every one of a node's children reports, or undefined where one of
 // them has no value or they disagree
 function sharedValue(values: (string | undefined)[]) {
@@ -665,8 +840,15 @@ function preorder(tree: NodeWithIds) {
  * const root = RootModel.create({})
  * root.view.setData({ msa: '>seq1\nACGT\n>seq2\nACGT' })
  * ```
+ *
+ * `maxInlineSnapshotBytes` is the largest pasted or local document, and the
+ * largest data track, the snapshot keeps; a larger one stays in the live model
+ * and `unshareableData` names it. The standalone app, whose links carry the
+ * snapshot in the URL fragment, raises it.
  */
-function stateModelFactory() {
+function stateModelFactory({
+  maxInlineSnapshotBytes = defaultMaxInlineSnapshotBytes,
+}: { maxInlineSnapshotBytes?: number } = {}) {
   return types
     .compose(
       DialogQueueSessionMixin(),
@@ -796,6 +978,22 @@ function stateModelFactory() {
          */
         collapsed: stripDefault(types.array(types.string), []),
 
+        /**
+         * #property
+         * tree nodes whose children draw in reverse order, which is ggtree's
+         * `rotate`: the same tree, with the clades on either side of the node
+         * swapped
+         */
+        rotated: stripDefault(types.array(types.string), []),
+
+        /**
+         * #property
+         * where the tree is rooted: `midpoint` roots it halfway along the
+         * longest path between two tips, `{outgroup}` on the branch above
+         * the tips named, and undefined keeps the file's root
+         */
+        treeRoot: types.frozen<TreeRoot | undefined>(),
+
         /**
          * #property
          * focus on particular subtree
@@ -846,7 +1044,7 @@ function stateModelFactory() {
          * data from the loaded tree/msa/treeMetadata, generally loaded by
          * autorun
          */
-        data: types.optional(DataModelF(), {}),
+        data: types.optional(DataModelF(maxInlineSnapshotBytes), {}),
 
         /**
          * #property
@@ -877,6 +1075,21 @@ function stateModelFactory() {
          * Persists in the snapshot and the URL.
          */
         highlights: stripDefault(types.array(types.frozen<Highlight>()), []),
+        /**
+         * #property
+         * features on the rows as data, `{row, start, end, name, ...}` in
+         * residues of each row, drawn with the GFF's annotations. Persists in
+         * the snapshot and the URL.
+         */
+        features: stripDefault(types.array(types.frozen<Feature>()), []),
+        /**
+         * #property
+         * the block the reader selected: `{start, end}` columns of the file,
+         * 1-based inclusive like a column highlight, and `rows` by name, every
+         * row where absent. Undefined until something is selected, so a view
+         * without one adds nothing to the shared URL.
+         */
+        selection: types.frozen<MsaSelection | undefined>(),
         /**
          * #property
          * where the view opens, in `highlights` coordinates: `{row, start,
@@ -890,7 +1103,8 @@ function stateModelFactory() {
          * clades of the tree with a mark drawn over them. `mrca` names tips
          * whose common ancestor is the clade, or `range` its first and last
          * tip in display order, and `tips` is the leaf count the producer
-         * measured. `mark` is `highlight`, `bracket`, `collapse` or `focus`.
+         * measured. `mark` is `highlight`, `bracket`, `collapse`, `focus` or
+         * `rotate`.
          * See docs/layers.md
          */
         clades: stripDefault(types.array(types.frozen<Clade>()), []),
@@ -1023,9 +1237,16 @@ function stateModelFactory() {
        * #volatile
        * non-fatal load problems: an optional layer that failed to load, an
        * overlay that failed to parse. `error` replaces the view and is for the
-       * alignment itself
+       * alignment itself. `warnings` adds the ones derived from the data
        */
-      warnings: [] as string[],
+      loadWarnings: [] as string[],
+
+      /**
+       * #volatile
+       * derived warnings the user dismissed, which stay hidden while the data
+       * behind them holds
+       */
+      dismissedWarnings: [] as string[],
 
       /**
        * #volatile
@@ -1119,18 +1340,11 @@ function stateModelFactory() {
        * that failed to parse. A message already on the list is not added again
        */
       addWarning(warning: string) {
-        if (!self.warnings.includes(warning)) {
-          self.warnings = [...self.warnings, warning]
+        if (!self.loadWarnings.includes(warning)) {
+          self.loadWarnings = [...self.loadWarnings, warning]
         }
       },
 
-      /**
-       * #action
-       */
-      clearWarnings() {
-        self.warnings = []
-      },
-
       /**
        * #action
        * declare that this host restores the loaded documents itself, which
@@ -1176,6 +1390,33 @@ function stateModelFactory() {
       setHighlights(highlights: Highlight[]) {
         self.highlights.replace(highlights)
       },
+      /**
+       * #action
+       */
+      setFeatures(features: Feature[]) {
+        self.features.replace(features)
+      },
+      /**
+       * #action
+       * select a block, in `selection` coordinates. `start` and `end` may come
+       * in either order.
+       */
+      setSelection(selection?: MsaSelection) {
+        const next = selection && {
+          start: Math.min(selection.start, selection.end),
+          end: Math.max(selection.start, selection.end),
+          ...(selection.rows ? { rows: selection.rows } : {}),
+        }
+        if (!compareStructural(next, self.selection)) {
+          self.selection = next
+        }
+      },
+      /**
+       * #action
+       */
+      clearSelection() {
+        this.setSelection(undefined)
+      },
 
       /**
        * #action
@@ -1253,8 +1494,9 @@ function stateModelFactory() {
       /**
        * #action
        * switch to another alignment of a multi-alignment file (Stockholm).
-       * Clears the collapsed node ids, the subtree in focus, the reference row
-       * and the scroll position, which all refer to the previous alignment
+       * Clears the collapsed and rotated node ids, the subtree in focus, the
+       * reference row and the scroll position, which all refer to the
+       * previous alignment
        */
       setCurrentAlignment(n: number) {
         if (n === self.currentAlignment) {
@@ -1263,6 +1505,7 @@ function stateModelFactory() {
         transaction(() => {
           self.currentAlignment = n
           self.collapsed.clear()
+          self.rotated.clear()
           this.setShowOnly(undefined)
           this.drawRelativeTo(undefined)
           self.scrollX = 0
@@ -1282,6 +1525,42 @@ function stateModelFactory() {
         }
       },
 
+      /**
+       * #action
+       * reverse the order of the given node's children, or restore it
+       */
+      toggleRotated(node: string) {
+        if (self.rotated.includes(node)) {
+          self.rotated.remove(node)
+        } else {
+          self.rotated.push(node)
+        }
+      },
+
+      /**
+       * #action
+       */
+      clearRotated() {
+        self.rotated.clear()
+      },
+
+      /**
+       * #action
+       * reroot the tree. Clears `collapsed`, `rotated` and `showOnly`, whose
+       * path-derived node ids name other nodes in the rerooted tree
+       */
+      setTreeRoot(treeRoot?: TreeRoot) {
+        if (compareStructural(self.treeRoot, treeRoot)) {
+          return
+        }
+        transaction(() => {
+          self.treeRoot = treeRoot
+          self.collapsed.clear()
+          self.rotated.clear()
+          this.setShowOnly(undefined)
+        })
+      },
+
       /**
        * #action
        * show only the subtree rooted at the given node id (pass undefined to
@@ -1359,9 +1638,9 @@ function stateModelFactory() {
        * store the GFF text in the snapshot like the alignment and tree. The
        * parsed annotations are volatile and a blob filehandle is cleared once
        * read, so the text is the only persisted copy. An autorun parses it
-       * into annotations.
+       * into annotations, and clears the ones it drew when the text goes.
        */
-      setGFF(result: string) {
+      setGFF(result?: string) {
         self.data.setGFF(result)
       },
     }))
@@ -1383,11 +1662,21 @@ function stateModelFactory() {
       get realAllowedGappyness() {
         return this.hideGapsEffective ? self.allowedGappyness : 100
       },
+      /**
+       * #getter
+       * the annotations the overlay, the legend and the encodings draw: the
+       * GFF's, then the `features` layer's
+       */
+      get allAnnotations(): Annotation[] {
+        return self.features.length > 0
+          ? [...self.annotations, ...featuresToAnnotations(self.features)]
+          : self.annotations
+      },
       /**
        * #getter
        */
       get actuallyShowDomains() {
-        return self.showDomains && self.annotations.length > 0
+        return self.showDomains && this.allAnnotations.length > 0
       },
       /**
        * #getter
@@ -1421,12 +1710,26 @@ function stateModelFactory() {
        * #getter
        */
       get colorScheme() {
+        const { customColorScheme, colorSchemeName } = self
         // colorSchemeName is a free string (menus, snapshots, URL params), so a
         // stale name falls back to the default
-        return (
-          colorSchemes[self.colorSchemeName] ??
-          colorSchemes[defaultColorSchemeName]!
-        )
+        return customColorScheme
+          ? letterColorTable(customColorScheme)
+          : (colorSchemes[colorSchemeName] ??
+              colorSchemes[defaultColorSchemeName]!)
+      },
+
+      /**
+       * #getter
+       * the scheme coloring each cell from its column's statistics, or
+       * undefined while the cells take a fixed color per letter, from the
+       * built-in table or from `customColorScheme`
+       */
+      get dynamicColorSchemeName() {
+        const { customColorScheme, colorSchemeName } = self
+        return !customColorScheme && colorSchemeName.includes('dynamic')
+          ? colorSchemeName
+          : undefined
       },
 
       /**
@@ -1449,7 +1752,7 @@ function stateModelFactory() {
         return !!this.tree.noTree
       },
       get noDomains() {
-        return self.annotations.length === 0
+        return self.allAnnotations.length === 0
       },
 
       /**
@@ -1458,12 +1761,13 @@ function stateModelFactory() {
        * from disk or pasted in becomes inline text, and DataModel drops an
        * inline document past `maxInlineSnapshotBytes`.
        *
-       * The header lists these, and the standalone app stops rewriting the
-       * address bar while the list is non-empty, so a copied link does not
-       * open an empty viewer unannounced. A document fetched from a URL never
-       * appears here, since the snapshot keeps its filehandle.
+       * The header lists these, and the standalone app drops `#data=` from
+       * the address bar while the list is non-empty or the encoded link would
+       * pass its `maxLinkLength`, so a copied link never opens an empty viewer
+       * unannounced. A document fetched from a URL never appears here, since
+       * the snapshot keeps its filehandle.
        *
-       * Empty when `hostRestoresData` is true.
+       * Empty when `hostCarriesData` is true.
        */
       get unshareableData(): UnshareableData[] {
         if (self.hostRestoresData) {
@@ -1502,7 +1806,8 @@ function stateModelFactory() {
        * `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.
+       * 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
@@ -1512,7 +1817,12 @@ function stateModelFactory() {
         try {
           const parsed: unknown = JSON.parse(text)
           return typeof parsed === 'object' && parsed !== null
-            ? (parsed as Record<string, Record<string, string> | undefined>)
+            ? Object.fromEntries(
+                Object.entries(parsed).map(([name, row]) => [
+                  name,
+                  stringFields(row),
+                ]),
+              )
             : {}
         } catch (e) {
           console.error('failed to parse rowData', e)
@@ -1560,8 +1870,9 @@ function stateModelFactory() {
 
       /**
        * #getter
+       * the tree the file or the alignment gives, before `treeRoot`
        */
-      get tree(): NodeWithIds {
+      get inputTree(): NodeWithIds {
         const text = self.data.tree
         return text
           ? generateNodeIds(parseTreeText(text))
@@ -1573,6 +1884,19 @@ function stateModelFactory() {
             })
       },
 
+      /**
+       * #getter
+       * the tree as the file or the alignment gives it, rerooted where
+       * `treeRoot` asks. Every node id, and so `collapsed`, `rotated` and
+       * `showOnly`, refers to this tree.
+       */
+      get tree(): NodeWithIds {
+        const tree = this.inputTree
+        return self.treeRoot && !tree.noTree
+          ? rootTree(tree, self.treeRoot)
+          : tree
+      },
+
       /**
        * #getter
        * Returns the list of row (sequence) names in display order.
@@ -1594,8 +1918,8 @@ function stateModelFactory() {
        * `clades` resolved to the rows each one covers. The tip names resolve
        * against `tree` rather than `root`, so a clade whose ancestor the user
        * collapsed keeps its rows. One leaf pass over the tree serves every
-       * clade. A `range` record names no node, so `collapse` and `focus`, which
-       * need one, drop it.
+       * clade. A `range` record names no node, so `collapse`, `focus` and
+       * `rotate`, which need one, drop it.
        */
       get resolvedClades(): ResolvedClade[] {
         if (self.clades.length === 0) {
@@ -1653,7 +1977,27 @@ function stateModelFactory() {
        * #getter
        */
       get root() {
-        return buildTreeRoot(this.tree, self.collapsed, self.showOnly)
+        return buildTreeRoot(this.tree, {
+          collapsed: self.collapsed,
+          rotated: self.rotated,
+          order: self.treeOrder,
+          showOnly: self.showOnly,
+        })
+      },
+
+      /**
+       * #getter
+       * the tree as Newick in the order and with the root it is drawn, with
+       * every clade, collapsed or out of focus
+       */
+      get treeNewick() {
+        return writeNewick(
+          buildTreeRoot(this.tree, {
+            collapsed: [],
+            rotated: self.rotated,
+            order: self.treeOrder,
+          }),
+        )
       },
 
       /**
@@ -1677,7 +2021,11 @@ function stateModelFactory() {
         if (!self.showTreeOverview) {
           return undefined
         }
-        const root = buildTreeRoot(this.tree, self.collapsed)
+        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)
@@ -1759,7 +2107,7 @@ function stateModelFactory() {
        * alignment, the sum of each record's width
        */
       get rowPanelsWidth() {
-        return sum(self.rowPanels.map(p => rowPanelWidth(p, self.rowHeight)))
+        return sum(self.rowPanels.map(p => rowPanelWidth(p, self)))
       },
       /**
        * #getter
@@ -1806,9 +2154,10 @@ function stateModelFactory() {
           return []
         }
         // ragged input (a3m, hand-edited fasta) can have rows shorter than the
-        // alignment; the widest row defines the column count and a row that
-        // stops early counts as gapped for the remainder
-        const numCols = strs.reduce((max, str) => Math.max(max, str.length), 0)
+        // alignment; the widest row of the whole alignment, collapsed rows
+        // included, defines the column count as it does for numColumns, and a
+        // 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 blankCounts = new Uint32Array(numCols)
@@ -1939,7 +2288,7 @@ function stateModelFactory() {
        * #getter
        */
       get colStats() {
-        return columnCountsFromRows(this.columns2d)
+        return columnCountsFromRows(this.columns2d, this.numColumns)
       },
 
       /**
@@ -2038,40 +2387,42 @@ function stateModelFactory() {
       },
       /**
        * #getter
-       * generates a new tree that is clustered with x,y positions
-       */
-      get hierarchy(): HierarchyNode<NodeWithIdsAndLength> {
-        const r = this.root
-        clusterLayout(r, this.totalHeight, self.treeWidth)
-        const max = this.rootToTipLength
-        const k = max ? self.treeWidth / max : 0
-        // the displayed root starts at x=0, so subtract its length here; `root`
-        // returns the cached parse, which must not be mutated
-        setBrLength(r, -Math.max(r.data.length || 0, 0), k)
-        // for each collapsed clade, record the pixel x-position of its farthest
-        // tip so the renderer can draw a triangle spanning the branch-length
-        // extent of the hidden subtree
-        forEachDescendant(r, node => {
-          if (node._children) {
-            node.collapsedTipXFar =
-              (node.len ?? 0) + collapsedSubtreeMaxLength(node) * k
-          }
+       * `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.
+       */
+      get treeLayout() {
+        return layoutTree(this.root, {
+          get rowHeight() {
+            return self.rowHeight
+          },
+          get treeWidth() {
+            return self.treeWidth
+          },
         })
-        return r as HierarchyNode<NodeWithIdsAndLength>
+      },
+
+      /**
+       * #getter
+       * the laid-out tree, with pixel positions on every node
+       */
+      get hierarchy(): HierarchyNode<NodeWithIds> {
+        return this.treeLayout.root
       },
 
       /**
        * #getter
        */
       get totalHeight() {
-        return leaves(this.root).length * self.rowHeight
+        return this.leaves.length * self.rowHeight
       },
 
       /**
        * #getter
        */
-      get leaves() {
-        return leaves(this.hierarchy)
+      get leaves(): HierarchyNode<NodeWithIds>[] {
+        return this.treeLayout.leaves
       },
 
       /**
@@ -2080,8 +2431,7 @@ function stateModelFactory() {
        * the tree's own units
        */
       get rootToTipLength() {
-        const r = this.root
-        return maxLength(r) - Math.max(r.data.length || 0, 0)
+        return this.treeLayout.rootToTipLength
       },
 
       /**
@@ -2108,7 +2458,7 @@ function stateModelFactory() {
        * max topological depth to a tip, used to scale cladogram x-positions
        */
       get maxDepthToLeaf() {
-        return calcDepthToLeaf(this.hierarchy)
+        return this.treeLayout.root.depthToLeaf
       },
 
       /**
@@ -2343,13 +2693,6 @@ function stateModelFactory() {
         return self.MSA?.secondaryStructureConsensus
       },
 
-      /**
-       * #getter
-       */
-      get seqConsensus() {
-        return self.MSA?.seqConsensus
-      },
-
       /**
        * #getter
        * the base pairs of the consensus secondary structure, as arcs, in
@@ -2494,11 +2837,13 @@ function stateModelFactory() {
 
       /**
        * #method
-       * Return a row-specific letter at a visible column, or undefined if gap.
+       * Return the character a row holds at a visible column: a residue, or
+       * the gap character (`-` or `.`) on a gap. Undefined for a row name the
+       * alignment does not have or a column past the row's end.
        *
        * @param rowName - The name of the row
        * @param visibleCol - The visible column index (what the user sees on screen)
-       * @returns The letter at that position, or undefined if it's a gap
+       * @returns The character at that position
        */
       visibleColToRowLetter(rowName: string, visibleCol: number) {
         return self.rowMap.get(rowName)?.[
@@ -2596,6 +2941,22 @@ function stateModelFactory() {
         return col ?? (seqPos === 0 ? 0 : seq.length)
       },
 
+      /**
+       * #method
+       * the global column of a span's last residue, clamping a position past
+       * the end of the row to its last residue. Undefined for a row name the
+       * alignment does not have, or a row with no residues.
+       *
+       * @param rowName - The name of the row
+       * @param seqPos - The sequence position (0-based, ungapped)
+       */
+      seqEndToGlobalCol(rowName: string, seqPos: number) {
+        const index = self.seqPosIndex(rowName)
+        return index && index.length > 0
+          ? index[Math.min(seqPos, index.length - 1)]
+          : undefined
+      },
+
       /**
        * #method
        * Convert a sequence position (ungapped) directly to a visible column index.
@@ -2625,10 +2986,10 @@ function stateModelFactory() {
         const start = Math.max(1, Math.floor(rawStart))
         const end = Math.ceil(rawEnd)
         let startGlobal = start - 1
-        let endGlobal = end - 1
+        let endGlobal = Math.min(end, self.MSA?.getWidth() ?? end) - 1
         if (row !== undefined) {
           const rowStart = this.seqPosToGlobalCol(row, start - 1)
-          const rowEnd = this.seqPosToGlobalCol(row, end - 1)
+          const rowEnd = this.seqEndToGlobalCol(row, end - 1)
           if (rowStart === undefined || rowEnd === undefined) {
             return undefined
           }
@@ -2865,7 +3226,7 @@ function stateModelFactory() {
         // first occurrence wins; only name, description and segment start are
         // read from it
         const types = new Map<string, Annotation>()
-        for (const annot of self.annotations) {
+        for (const annot of self.allAnnotations) {
           if (!types.has(annot.accession)) {
             types.set(annot.accession, annot)
           }
@@ -2873,7 +3234,7 @@ function stateModelFactory() {
         return types
       },
       get filteredAnnotations() {
-        return self.annotations.filter(
+        return self.allAnnotations.filter(
           r => !self.turnedOffFeatures.get(r.accession),
         )
       },
@@ -2922,6 +3283,28 @@ function stateModelFactory() {
       },
     }))
     .views(self => ({
+      /**
+       * #getter
+       */
+      get verticalScrollbarWidth() {
+        return self.showVerticalScrollbar ? 20 : 0
+      },
+      /**
+       * #getter
+       * width of the alignment canvas: the msa area less the vertical
+       * scrollbar. showHorizontalScrollbar must not read it, since that feeds
+       * msaAreaHeight -> showVerticalScrollbar and would form a cycle
+       */
+      get msaCanvasWidth() {
+        return self.msaAreaWidth - this.verticalScrollbarWidth
+      },
+      /**
+       * #getter
+       * most-negative allowed scrollX, which keeps the last column in view
+       */
+      get maxScrollX() {
+        return Math.min(-self.totalWidth + this.msaCanvasWidth, 0)
+      },
       /**
        * #getter
        */
@@ -2939,9 +3322,29 @@ function stateModelFactory() {
       },
       /**
        * #getter
+       * warnings that follow from the loaded data and clear when it changes. A
+       * GFF whose first column names rows of some other alignment parses
+       * without error and draws nothing
+       */
+      get dataWarnings(): string[] {
+        const { annotations, rowNamesSet } = self
+        return self.dataInitialized &&
+          annotations.length > 0 &&
+          !annotations.some(a => rowNamesSet.has(a.id))
+          ? [
+              `0 of ${annotations.length} annotations name a row in this alignment`,
+            ]
+          : []
+      },
+      /**
+       * #getter
+       * the load warnings and the undismissed data warnings, for the header
        */
-      get maxScrollX() {
-        return Math.min(-self.totalWidth + (self.msaAreaWidth - 100), 0)
+      get warnings(): string[] {
+        return [
+          ...self.loadWarnings,
+          ...this.dataWarnings.filter(w => !self.dismissedWarnings.includes(w)),
+        ]
       },
       /**
        * #getter
@@ -2968,6 +3371,14 @@ function stateModelFactory() {
         self.drawMsaLetters = arg
       },
 
+      /**
+       * #action
+       */
+      clearWarnings() {
+        self.loadWarnings = []
+        self.dismissedWarnings = self.dataWarnings
+      },
+
       /**
        * #action
        */
@@ -3028,13 +3439,43 @@ function stateModelFactory() {
 
       /**
        * #action
-       * swap in a different tree over the same alignment. Clears `collapsed`
-       * and `showOnly`, since path-derived node ids (node-0-0-1) from the old
+       * root the tree on the branch above the given node. The node's tips are
+       * a split of the unrooted tree, and the side of it that is a clade in
+       * the tree as written stands for it as an outgroup, by its first and
+       * last tip, so the root survives the path ids changing under it
+       */
+      rerootAt(nodeId: string) {
+        const shown = find(
+          hierarchy(self.tree, d => d.children),
+          n => n.data.id === nodeId,
+        )
+        if (!shown?.parent) {
+          return
+        }
+        const node = outgroupNode(
+          hierarchy(self.inputTree, d => d.children),
+          leaves(shown).map(n => n.data.name),
+        )
+        if (node) {
+          const tips = leaves(node)
+          self.setTreeRoot({
+            outgroup: [
+              ...new Set([tips[0]!.data.name, tips.at(-1)!.data.name]),
+            ],
+          })
+        }
+      },
+
+      /**
+       * #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.
        */
       replaceTree(newick: string) {
         transaction(() => {
           self.collapsed.clear()
+          self.rotated.clear()
           self.setShowOnly(undefined)
           self.setTree(newick)
         })
@@ -3048,52 +3489,53 @@ function stateModelFactory() {
         self.setColWidth(defaultColWidth)
         self.setRowHeight(defaultRowHeight)
       },
+      /**
+       * #action
+       * zoom by `scaleFactor` about the center of the alignment area
+       */
+      zoomAtCenter(scaleFactor: number, axis: ScrollZoomAxis = 'both') {
+        this.zoomToPos(
+          scaleFactor,
+          self.msaCanvasWidth / 2,
+          self.msaAreaHeight / 2,
+          axis,
+        )
+      },
       /**
        * #action
        */
       zoomOutHorizontal() {
-        self.colWidth = Math.max(minColWidth, Math.floor(self.colWidth * 0.75))
-        self.scrollX = clamp(self.scrollX, self.maxScrollX, 0)
+        this.zoomAtCenter(0.75, 'horizontal')
       },
       /**
        * #action
        */
       zoomInHorizontal() {
-        self.colWidth = Math.min(maxCellSize, Math.ceil(self.colWidth * 1.5))
-        self.scrollX = clamp(self.scrollX, self.maxScrollX, 0)
+        this.zoomAtCenter(1.5, 'horizontal')
       },
       /**
        * #action
        */
       zoomInVertical() {
-        self.rowHeight = Math.min(maxCellSize, Math.ceil(self.rowHeight * 1.5))
+        this.zoomAtCenter(1.5, 'vertical')
       },
       /**
        * #action
        */
       zoomOutVertical() {
-        self.rowHeight = Math.max(
-          minRowHeight,
-          Math.floor(self.rowHeight * 0.75),
-        )
+        this.zoomAtCenter(0.75, 'vertical')
       },
       /**
        * #action
        */
       zoomIn() {
-        transaction(() => {
-          this.zoomInHorizontal()
-          this.zoomInVertical()
-        })
+        this.zoomAtCenter(1.5)
       },
       /**
        * #action
        */
       zoomOut() {
-        transaction(() => {
-          this.zoomOutHorizontal()
-          this.zoomOutVertical()
-        })
+        this.zoomAtCenter(0.75)
       },
       /**
        * #action
@@ -3214,7 +3656,7 @@ function stateModelFactory() {
        * replace the row table, which the model keeps as the JSON string
        * `data.treeMetadata` (see docs/layers.md)
        */
-      setRowData(rowData: Record<string, Record<string, string>>) {
+      setRowData(rowData: RowDataInput) {
         self.data.setTreeMetadata(JSON.stringify(rowData))
       },
       /**
@@ -3256,25 +3698,11 @@ function stateModelFactory() {
       },
     }))
     .views(self => ({
-      /**
-       * #getter
-       */
-      get verticalScrollbarWidth() {
-        return self.showVerticalScrollbar ? 20 : 0
-      },
-      /**
-       * #getter
-       * width of the alignment canvas: the msa area less the vertical
-       * scrollbar. showHorizontalScrollbar must not read it, since that feeds
-       * msaAreaHeight -> showVerticalScrollbar and would form a cycle
-       */
-      get msaCanvasWidth() {
-        return self.msaAreaWidth - this.verticalScrollbarWidth
-      },
       /**
        * #method
        * the cell at a visible column and row index, in the coordinates a host
-       * writes highlights in
+       * writes highlights in. On a gap `residue` is undefined and `letter` is
+       * the gap character
        */
       cellAt(visibleCol: number, rowIndex?: number): Cell {
         const column = self.visibleColToGlobalCol(visibleCol)
@@ -3322,7 +3750,7 @@ function stateModelFactory() {
         }
         const { xStart, xEnd } = visibleColRange({
           offsetX: -scrollX,
-          blockWidth: this.msaCanvasWidth,
+          blockWidth: self.msaCanvasWidth,
           colWidth,
         })
         const last = Math.max(0, Math.min(xEnd, numColumns) - 1)
@@ -3485,7 +3913,7 @@ function stateModelFactory() {
             add(field, legend)
           }
         }
-        for (const { legendTitle, legend } of this.resolvedRowPanels) {
+        for (const { legendTitle, legend } of this.rowPanelScales) {
           add(legendTitle, legend)
         }
         return [...byKey.values()]
@@ -3533,7 +3961,7 @@ function stateModelFactory() {
               // column moves to the neighboring boundary. Bands with no visible
               // columns, or naming a missing row, are dropped.
               const start = self.seqPosToGlobalCol(name, annotation.start - 1)
-              const end = self.seqPosToGlobalCol(name, annotation.end - 1)
+              const end = self.seqEndToGlobalCol(name, annotation.end - 1)
               if (start === undefined || end === undefined) {
                 return undefined
               }
@@ -3620,19 +4048,9 @@ function stateModelFactory() {
        * on every mouse move.
        */
       get highlightedColumnRuns() {
-        const { highlightedColumns } = self
-        const runs: { start: number; end: number }[] = []
-        for (const col of [...(highlightedColumns ?? [])].sort(
-          (a, b) => a - b,
-        )) {
-          const last = runs.at(-1)
-          if (last && col === last.end + 1) {
-            last.end = col
-          } else {
-            runs.push({ start: col, end: col })
-          }
-        }
-        return runs
+        return consecutiveRuns(
+          [...(self.highlightedColumns ?? [])].sort((a, b) => a - b),
+        ).map(([start, end]) => ({ start, end }))
       },
 
       /**
@@ -3688,6 +4106,85 @@ function stateModelFactory() {
         })
       },
 
+      /**
+       * #getter
+       * `selection` projected onto what is on screen, the way
+       * `resolvedHighlights` projects a column span and a row set. A
+       * selection whose columns are all hidden, or whose rows are all
+       * collapsed away or unknown, resolves to undefined.
+       */
+      get resolvedSelection(): ResolvedSelection | undefined {
+        const { selection, rowNamesSet, numRows } = self
+        const span =
+          selection &&
+          self.visibleSpan({ start: selection.start, end: selection.end })
+        if (!selection || !span) {
+          return undefined
+        }
+        const rowRuns = selection.rows
+          ? consecutiveRuns(
+              selection.rows
+                .map(name => rowNamesSet.get(name))
+                .filter(notEmpty)
+                .sort((a, b) => a - b),
+            )
+          : numRows > 0
+            ? [[0, numRows - 1] as [number, number]]
+            : []
+        return rowRuns.length > 0 ? { ...span, rowRuns } : undefined
+      },
+
+      /**
+       * #getter
+       * the columns and rows the selection covers, for the header's readout.
+       * Columns count the file's columns from `start` to `end`, hidden ones
+       * included, as `selectionFasta` copies them.
+       */
+      get selectionSize() {
+        const resolved = this.resolvedSelection
+        const span = this.selectionFileSpan
+        return resolved && span
+          ? {
+              columns: span.end - span.start + 1,
+              rows: sum(resolved.rowRuns.map(([a, b]) => b - a + 1)),
+            }
+          : undefined
+      },
+
+      /**
+       * #getter
+       * `selection`'s columns clamped to the file's
+       */
+      get selectionFileSpan() {
+        const { selection } = self
+        const width = self.MSA?.getWidth() ?? 0
+        const start = Math.max(1, Math.floor(selection?.start ?? 0))
+        const end = Math.min(width, Math.ceil(selection?.end ?? 0))
+        return selection && start <= end ? { start, end } : undefined
+      },
+
+      /**
+       * #getter
+       * the selected block as FASTA: the selected rows on screen, top to
+       * bottom, each with its letters across the file's columns from `start`
+       * to `end`, gaps included
+       */
+      get selectionFasta() {
+        const { rowNames, rowMap } = self
+        const resolved = this.resolvedSelection
+        const span = this.selectionFileSpan
+        if (!resolved || !span) {
+          return ''
+        }
+        const rows = resolved.rowRuns
+          .flatMap(([first, last]) => rowNames.slice(first, last + 1))
+          .flatMap(name => {
+            const seq = rowMap.get(name)
+            return seq === undefined ? [] : [[name, seq] as const]
+          })
+        return blockFasta(rows, span.start, span.end)
+      },
+
       /**
        * #method
        * per-column summary statistics: consensus residue and its identity
@@ -3718,67 +4215,59 @@ function stateModelFactory() {
       /**
        * #getter
        * each encoding with its scale resolved against the values its field
-       * takes: a feature channel reads them across the features drawn, every
+       * takes: a feature channel reads them across every feature loaded, every
        * other channel across the row table. Resolved once per change of that
        * table or the encodings, never per row per frame.
        */
       get resolvedEncodings(): ResolvedEncoding[] {
         const rows = Object.values(self.rowData)
-        const features = self.filteredAnnotations
         return self.encodings.map(encoding => ({
           ...encoding,
-          ...resolveScale(
-            encoding.scale,
-            featureChannels.has(encoding.channel)
-              ? features
-                  .map(a => featureField(a, encoding.field))
-                  .filter(notEmpty)
-              : rows.map(row => row?.[encoding.field]).filter(notEmpty),
-          ),
+          ...(featureChannels.has(encoding.channel)
+            ? resolveFeatureScale(
+                encoding.field,
+                encoding.scale,
+                self.allAnnotations,
+                self.filteredAnnotations,
+              )
+            : resolveScale(
+                encoding.scale,
+                rows.map(row => row?.[encoding.field]).filter(notEmpty),
+              )),
         }))
       },
 
       /**
        * #getter
-       * each row panel with its scale resolved against the values its field
-       * takes across the row table, giving the color per row name, the pixel
-       * column it draws in, and the entries its legend lists. Resolved once
-       * per change of that table or the panels, never per block per frame.
+       * each row panel's scale resolved against the values its field takes,
+       * giving the colors, labels and legend entries. Reads no cell size, so
+       * a zoom reuses it and the legends built from it.
        */
-      get resolvedRowPanels(): ResolvedRowPanel[] {
-        const rows = Object.entries(self.rowData)
+      get rowPanelScales(): (StripPanelScale | FeaturePanelScale)[] {
+        const { rowData } = self
         const { fillPalette, featureFillEncoding, featureLabels } = this
         const annotations = self.filteredAnnotations
-        let offsetX = 0
-        return self.rowPanels.map((panel, index) => {
-          const width = rowPanelWidth(panel, self.rowHeight)
-          const base = { id: `rowpanel-${index}`, width, offsetX }
-          offsetX += width
+        return self.rowPanels.map(panel => {
           if (panel.kind === 'features') {
             const color = panel.encoding?.color
             const encoding = color
-              ? resolveFeatureScale(color.field, color.scale, annotations)
+              ? resolveFeatureScale(
+                  color.field,
+                  color.scale,
+                  self.allAnnotations,
+                  annotations,
+                )
               : featureFillEncoding
             const label = panel.encoding?.label
-            const align = panel.transform?.find(t => t.type === 'align')
             return {
-              ...base,
               kind: panel.kind,
               x: panel.x,
               header: panel.header ?? '',
               field: encoding?.field,
               legendTitle: encoding?.field,
-              spans: featurePanelSpans({
-                panel,
-                width,
-                colWidth: self.colWidth,
-                domainBands: this.domainBands,
-                annotationsByRow: self.annotationsByRow,
-                shifts: align
-                  ? this.featureAlignShifts.get(align.on)
-                  : undefined,
-              }),
-              colors: featureColorMap(annotations, encoding, fillPalette),
+              colors: color
+                ? featureColorMap(annotations, encoding, fillPalette)
+                : this.featureColors,
               labels: label
                 ? featureLabelMap(annotations, label)
                 : featureLabels,
@@ -3793,28 +4282,56 @@ function stateModelFactory() {
           }
           const { colorOf, legend } = resolveScale(
             panel.scale,
-            rows.map(([, row]) => row?.[panel.field]).filter(notEmpty),
+            Object.values(rowData)
+              .map(row => row?.[panel.field])
+              .filter(notEmpty),
           )
-          const colors = new Map<string, string>()
-          for (const [name, row] of rows) {
-            const value = row?.[panel.field]
-            const color = value === undefined ? undefined : colorOf(value)
-            if (color) {
-              colors.set(name, color)
-            }
-          }
           return {
-            ...base,
             kind: panel.kind,
             field: panel.field,
             header: panel.header ?? panel.field,
             legendTitle: panel.legend ?? panel.field,
-            colors,
+            colors: colorByRow(rowData, panel.field, colorOf),
             legend,
           }
         })
       },
 
+      /**
+       * #getter
+       * each row panel with its scale from `rowPanelScales` and its geometry:
+       * the pixel column it draws in and, for a features panel, the spans per
+       * row. Resolved once per change of those inputs, never per block per
+       * frame.
+       */
+      get resolvedRowPanels(): ResolvedRowPanel[] {
+        const scales = this.rowPanelScales
+        let offsetX = 0
+        return self.rowPanels.map((panel, index) => {
+          const width = rowPanelWidth(panel, self)
+          const base = { id: `rowpanel-${index}`, width, offsetX }
+          offsetX += width
+          if (panel.kind === 'features') {
+            const align = panel.transform?.find(t => t.type === 'align')
+            return {
+              ...base,
+              ...(scales[index] as FeaturePanelScale),
+              spans: featurePanelSpans({
+                panel,
+                width,
+                colWidth: self.colWidth,
+                domainBands: this.domainBands,
+                annotationsByRow: self.annotationsByRow,
+                shifts: align
+                  ? this.featureAlignShifts.get(align.on)
+                  : undefined,
+              }),
+            }
+          }
+          return { ...base, ...(scales[index] as StripPanelScale) }
+        })
+      },
+
       /**
        * #getter
        * the shift an `align` transform gives each row, keyed by the feature
@@ -3857,19 +4374,9 @@ function stateModelFactory() {
         const encoding = this.resolvedEncodings.find(
           e => e.channel === 'tipLabel',
         )
-        if (!encoding) {
-          return undefined
-        }
-        const colors = new Map<string, string>()
-        for (const [name, row] of Object.entries(self.rowData)) {
-          const value = row?.[encoding.field]
-          const color =
-            value === undefined ? undefined : encoding.colorOf(value)
-          if (color) {
-            colors.set(name, color)
-          }
-        }
-        return colors
+        return encoding
+          ? colorByRow(self.rowData, encoding.field, encoding.colorOf)
+          : undefined
       },
 
       /**
@@ -3885,14 +4392,14 @@ function stateModelFactory() {
         if (!encoding) {
           return undefined
         }
+        const colors = colorByRow(
+          self.rowData,
+          encoding.field,
+          encoding.colorOf,
+        )
         return self.rowNames.map(name => {
-          const value = self.rowDataOf(name)?.[encoding.field]
-          const color =
-            value === undefined ? undefined : encoding.colorOf(value)
-          if (!color) {
-            return undefined
-          }
-          return withAlpha(color, rowTintAlpha)
+          const color = colors.get(name)
+          return color && withAlpha(color, rowTintAlpha)
         })
       },
 
@@ -3974,7 +4481,8 @@ function stateModelFactory() {
        */
       reset() {
         self.resetCount++
-        self.clearWarnings()
+        self.loadWarnings = []
+        self.dismissedWarnings = []
         self.setStatus(undefined)
         applySnapshot(
           self,
@@ -4001,6 +4509,21 @@ function stateModelFactory() {
         const blob = new Blob([html], { type: 'image/svg+xml' })
         saveAs(blob, exportFileName(self.msaFilehandle, 'svg'))
       },
+      /**
+       * #action
+       * save `treeNewick` as a file
+       */
+      exportNewick() {
+        const blob = new Blob([self.treeNewick], { type: 'text/plain' })
+        saveAs(
+          blob,
+          exportFileName(
+            self.treeFilehandle ?? self.msaFilehandle,
+            'nwk',
+            'tree',
+          ),
+        )
+      },
       /**
        * #action
        * show or hide an annotation type. Only hidden types are recorded; see
@@ -4064,6 +4587,63 @@ function stateModelFactory() {
           )
         })
       },
+      /**
+       * #action
+       * zoom and scroll so the selected columns fill the alignment's width,
+       * and, where the selection names its rows, so those rows fill its height
+       */
+      zoomToSelection() {
+        const { selection, resolvedSelection } = self
+        if (!selection || !resolvedSelection) {
+          return
+        }
+        transaction(() => {
+          this.zoomToRegion({ start: selection.start, end: selection.end })
+          if (selection.rows && self.viewInitialized) {
+            const { rowRuns } = resolvedSelection
+            const first = rowRuns[0]![0]
+            const last = rowRuns.at(-1)![1]
+            self.rowHeight = clamp(
+              self.msaAreaHeight / (last - first + 1),
+              minRowHeight,
+              maxCellSize,
+            )
+            self.scrollY = clamp(-first * self.rowHeight, self.maxScrollY, 0)
+          }
+        })
+      },
+      /**
+       * #action
+       * select the block between two cells given as visible column and row
+       * indices, the coordinates a drag reports, clamped to the alignment. A
+       * cell with no `row` selects the columns across every row, and so does a
+       * block spanning every row on screen.
+       */
+      selectBlock(
+        anchor: { col: number; row?: number },
+        head: { col: number; row?: number },
+      ) {
+        const { numColumns, numRows, rowNames } = self
+        if (numColumns === 0 || numRows === 0) {
+          return
+        }
+        const ordered = (a: number, b: number, last: number) =>
+          [clamp(a, 0, last), clamp(b, 0, last)].sort((x, y) => x - y) as [
+            number,
+            number,
+          ]
+        const [startCol, endCol] = ordered(anchor.col, head.col, numColumns - 1)
+        const [firstRow, lastRow] =
+          anchor.row === undefined || head.row === undefined
+            ? [0, numRows - 1]
+            : ordered(anchor.row, head.row, numRows - 1)
+        const everyRow = firstRow === 0 && lastRow === numRows - 1
+        self.setSelection({
+          start: self.visibleColToGlobalCol(startCol) + 1,
+          end: self.visibleColToGlobalCol(endCol) + 1,
+          ...(everyRow ? {} : { rows: rowNames.slice(firstRow, lastRow + 1) }),
+        })
+      },
       /**
        * #action
        */
@@ -4084,38 +4664,45 @@ function stateModelFactory() {
           self.setHighlightedColumns(self.highlightColumns)
         }
 
-        // The `collapse` and `focus` clade marks seed the collapsed list and
-        // the subtree in focus, which the tree, `hideGapsEffective` and the
-        // alignment all read. The tree arrives with the model for inline data
-        // and later for a filehandle, so the seeding waits for it and then runs
-        // once: expanding a seeded clade sticks, and the record collapses it
-        // again only on reload. `dataInitialized` is true once the MSA alone
-        // has loaded, when the tree is still the flat stub, so a tree
-        // filehandle holds the seeding until its text lands.
-        let cladesSeeded = false
+        // The `collapse`, `focus` and `rotate` clade marks seed the collapsed
+        // list, the subtree in focus and the rotated nodes, which the tree,
+        // `hideGapsEffective` and the alignment all read. The tree arrives with
+        // the model for inline data and later for a filehandle, so the seeding
+        // waits for it and then runs once per data load, per change of
+        // `clades` and per reroot, which clears the node ids the seeding
+        // wrote: expanding a seeded clade sticks until one of those changes.
+        // `dataInitialized` is true once the MSA alone has loaded, when the
+        // tree is still the flat stub, so a tree filehandle holds the seeding
+        // until its text lands.
         addDisposer(
           self,
-          autorun(() => {
-            if (
-              cladesSeeded ||
-              !self.dataInitialized ||
-              (self.treeFilehandle && !self.data.tree) ||
-              self.clades.length === 0
-            ) {
-              return
-            }
-            cladesSeeded = true
-            for (const { mark, nodeId } of self.resolvedClades) {
-              if (nodeId === undefined) {
-                continue
+          reaction(
+            () =>
+              self.dataInitialized && !(self.treeFilehandle && !self.data.tree)
+                ? { clades: getSnapshot(self.clades), treeRoot: self.treeRoot }
+                : undefined,
+            seed => {
+              if (!seed?.clades.length) {
+                return
               }
-              if (mark === 'collapse' && !self.collapsed.includes(nodeId)) {
-                self.toggleCollapsed(nodeId)
-              } else if (mark === 'focus') {
-                self.setShowOnly(nodeId)
+              for (const { mark, nodeId } of self.resolvedClades) {
+                if (nodeId === undefined) {
+                  continue
+                }
+                if (mark === 'collapse' && !self.collapsed.includes(nodeId)) {
+                  self.toggleCollapsed(nodeId)
+                } else if (mark === 'focus') {
+                  self.setShowOnly(nodeId)
+                } else if (
+                  mark === 'rotate' &&
+                  !self.rotated.includes(nodeId)
+                ) {
+                  self.toggleRotated(nodeId)
+                }
               }
-            }
-          }),
+            },
+            { fireImmediately: true, equals: compareStructural },
+          ),
         )
 
         // zoomToRegion needs a width and resolves residues through the visible
@@ -4302,24 +4889,6 @@ function stateModelFactory() {
           }),
         )
 
-        // a GFF whose first column names rows of some other alignment parses
-        // without error and draws nothing
-        addDisposer(
-          self,
-          autorun(() => {
-            const { annotations, rowNamesSet } = self
-            if (
-              annotations.length > 0 &&
-              rowNamesSet.size > 0 &&
-              !annotations.some(a => rowNamesSet.has(a.id))
-            ) {
-              self.addWarning(
-                `0 of ${annotations.length} annotations name a row in this alignment`,
-              )
-            }
-          }),
-        )
-
         // gffFilehandle loads into data.gff, which the autorun above parses
         loadOnFilehandleChange({
           what: 'annotations',
@@ -4356,7 +4925,7 @@ function stateModelFactory() {
         addDisposer(
           self,
           autorun(() => {
-            if (self.colorSchemeName.includes('dynamic')) {
+            if (self.dynamicColorSchemeName) {
               // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
               self.colStats
             }
@@ -4425,7 +4994,7 @@ function stateModelFactory() {
       // stripDefault handles per-property defaults; this drops inline documents
       // whose filehandle can refetch them
       ...rest,
-      ...smallColumnTracks(columnTracks),
+      ...smallColumnTracks(columnTracks, maxInlineSnapshotBytes),
       data: {
         ...(rest.treeFilehandle ? {} : { tree: data.tree }),
         ...(rest.msaFilehandle ? {} : { msa: data.msa }),