react-msaview 9.0.0 → 9.1.1

package/src/model.ts

@@ -1,12 +1,10 @@
 import { clamp, groupBy, notEmpty, sum } from '@jbrowse/core/util'
-import { openLocation } from '@jbrowse/core/util/io'
 import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst'
 import {
   addDisposer,
   applySnapshot,
   cast,
   getSnapshot,
-  isAlive,
   types,
 } from '@jbrowse/mobx-state-tree'
 import {
@@ -19,11 +17,8 @@ import {
 import {
   generateNodeIds,
   gffToAnnotations,
-  interProScanToAnnotations,
-  parseEmfTree,
   parseGFF,
   parseMSA,
-  parseNewick,
 } from 'msa-parsers'
 
 import { blockFasta } from './blockFasta.ts'
@@ -34,18 +29,14 @@ 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 {
-  cladeHighlightAlpha,
-  cladeHighlightColor,
   defaultAllowedGappyness,
   defaultColWidth,
   defaultColorSchemeName,
   defaultCurrentAlignment,
   defaultDrawMsaLetters,
-  defaultFeaturePanelWidth,
   defaultHeight,
   defaultHideGaps,
   defaultRowHeight,
@@ -74,39 +65,37 @@ import {
   scrollZoomAxes,
   segmentFeatureTypes,
   segmentShades,
+  settingsPanelWidth,
   treeScaleBarHeight,
 } from './constants.ts'
 import { createPaletteMap } from './createPaletteMap.ts'
 import { exportFileName } from './exportFileName.ts'
-import { featureField, featureName } from './featureFields.ts'
+import { featureName } from './featureFields.ts'
+import {
+  colorByRow,
+  featureColorMap,
+  featureLabelMap,
+  featurePanelSpans,
+  resolveFeatureScale,
+  rowPanelWidth,
+  stringFields,
+} from './featurePanels.ts'
 import { featuresToAnnotations } from './featuresLayer.ts'
-import { fetchTextWithProgress, isAbortError } from './fetchUtils.ts'
-import { flatToTree } from './flatToTree.ts'
+import { installFilehandleLoader } from './filehandleLoader.ts'
 import {
-  calcDepthToLeaf,
-  clusterLayout,
-  collapse,
   find,
-  forEachDescendant,
   hierarchy,
   layoutTree,
-  leafIndex,
   leaves,
-  maxLength,
-  mrca,
   nodeCoveringRows,
-  setBrLength,
-  sort,
-  sum as hierarchySum,
 } from './hierarchy.ts'
 import { DataModelF } from './model/DataModel.ts'
 import { DialogQueueSessionMixin } from './model/DialogQueue.ts'
 import { MSAModelF } from './model/msaModel.ts'
 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 { preorder } from './rerootTree.ts'
 import {
   globalColToVisibleCol,
   seqPosOfGlobalCol,
@@ -116,33 +105,43 @@ import {
 import { resolveScale } from './scales.ts'
 import { buildSeqPosIndex } from './seqPosToGlobalCol.ts'
 import { maxBitsFor } from './sequenceLogo.ts'
+import {
+  blosum62ColumnColors,
+  identityColumnColors,
+} from './similarityColors.ts'
 import { stripDefault } from './stripDefault.ts'
 import { treeTips, widestLabel } from './tipLabels.ts'
+import {
+  buildTreeRoot,
+  outgroupNode,
+  parseTreeText,
+  resolveClades,
+  rootTree,
+  tipRange,
+} from './treeDisplay.ts'
 import {
   computeRowInsertions,
   dropBlanks,
   len,
-  outlineColor,
+  readComputed,
   skipBlanks,
   withAlpha,
 } from './util.ts'
 import { saveAs } from './vendor/fileSaver.ts'
 import { writeNewick } from './writeNewick.ts'
 import { parseWuss } from './wuss.ts'
+import { takeZoomSnapshot, zoomSnapshotCovers } from './zoomSnapshot.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,
   Arc,
   BasicTrack,
   Cell,
   Clade,
-  CladeMark,
   ResidueMappingProblem,
   ColumnTrackSpec,
   DomainBand,
@@ -160,14 +159,11 @@ import type {
   ResolvedClade,
   ResolvedEncoding,
   ResolvedFeaturePanel,
+  ResolvedStripPanel,
   ResolvedHighlight,
   ResolvedSelection,
-  TreeOrder,
   TreeRoot,
   ResolvedRowPanel,
-  ResolvedStripPanel,
-  RowFeaturesSpec,
-  RowPanelSpan,
   RowDataInput,
   RowPanelSpec,
   RowResidue,
@@ -176,17 +172,10 @@ import type {
   UnshareableData,
   Viewport,
 } from './types.ts'
+import type { ZoomSnapshot } from './zoomSnapshot.ts'
 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')) {
-    return flatToTree(parseAsn1(text))
-  }
-  return parseNewick(text.startsWith('SEQ') ? parseEmfTree(text).tree : text)
-}
 
 // The height each kind draws at before the user drags a divider. A text track
 // is absent: it is one alignment row tall and follows rowHeight, so the zoom
@@ -216,262 +205,6 @@ const ownHeightKey = (id: string) => `own:${id}`
 const HELIX_ARC = '#4e79a7'
 const PSEUDOKNOT_ARC = '#e15759'
 
-// the fill of a span under a scale that gives its value no color, such as a
-// gene a `map` over gene names leaves out
-const UNSCALED_FEATURE = '#d9d9d9'
-
-// the fraction of a span a following one may cover before it takes a lane of
-// its own in a `features` panel
-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. 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 : 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
-function featureColorMap(
-  annotations: Annotation[],
-  encoding:
-    | { field: string; colorOf: (value: string) => string | undefined }
-    | undefined,
-  fillPalette: Record<string, string>,
-) {
-  const strokes = new Map<string, string>()
-  const strokeOf = (fill: string) => {
-    const hit = strokes.get(fill)
-    if (hit !== undefined) {
-      return hit
-    }
-    const stroke = outlineColor(fill)
-    strokes.set(fill, stroke)
-    return stroke
-  }
-  return new Map(
-    annotations.map(annotation => {
-      const value = encoding
-        ? featureField(annotation, encoding.field)
-        : undefined
-      const fill =
-        annotation.color ??
-        (value === undefined ? undefined : encoding!.colorOf(value)) ??
-        (encoding ? UNSCALED_FEATURE : fillPalette[annotation.accession]!)
-      return [annotation, { fill, stroke: strokeOf(fill) }]
-    }),
-  )
-}
-
-// the text a label channel draws inside each span, for the features carrying
-// the field it names
-function featureLabelMap(annotations: Annotation[], field: string) {
-  const labels = new Map<Annotation, string>()
-  for (const annotation of annotations) {
-    const value = featureField(annotation, field)
-    if (value !== undefined) {
-      labels.set(annotation, value)
-    }
-  }
-  return labels
-}
-
-/** what `packDomainLanes` needs to lay a row out, before it has its lane */
-type Unlaned = Omit<RowPanelSpan, 'lane' | 'laneCount'> & {
-  startCol: number
-  endCol: number
-}
-
-/**
- * Lanes for `position: "strandpile"`, gggenomes' `position_strandpile`: the
- * forward features stack above the line and the reverse below it, each strand
- * packing on its own. The deepest row on each side sets the grid every row lays
- * out on, so the line between the strands sits at one height down the panel and
- * a reader can scan it. A feature with no strand piles with the forward ones.
- */
-function strandpileLanes(
-  rows: [string, Unlaned[]][],
-): Map<string, RowPanelSpan[]> {
-  const piled = rows.map(([name, bands]) => {
-    const reverse = packDomainLanes(
-      bands.filter(b => b.annotation.strand === -1),
-    )
-    const forward = packDomainLanes(
-      bands.filter(b => b.annotation.strand !== -1),
-    )
-    return { name, forward, reverse }
-  })
-  const up = Math.max(0, ...piled.map(p => p.forward[0]?.laneCount ?? 0))
-  const down = Math.max(0, ...piled.map(p => p.reverse[0]?.laneCount ?? 0))
-  const laneCount = up + down
-  return new Map(
-    piled.map(({ name, forward, reverse }) => [
-      name,
-      [
-        // forward level 0 is the lane just above the line, stacking upward
-        ...forward.map(b => ({ ...b, lane: up - 1 - b.lane, laneCount })),
-        ...reverse.map(b => ({ ...b, lane: up + b.lane, laneCount })),
-      ],
-    ]),
-  )
-}
-
-/** one row's spans laid out by the panel's `position` */
-function panelLanes(
-  panel: RowFeaturesSpec,
-  rows: [string, Unlaned[]][],
-): Map<string, RowPanelSpan[]> {
-  return panel.position === 'strandpile'
-    ? strandpileLanes(rows)
-    : new Map(rows.map(([name, bands]) => [name, packDomainLanes(bands)]))
-}
-
-/**
- * The spans a `features` panel draws, keyed by row name and measured in the
- * panel's own pixels. `column` takes the bands the overlay draws, at the
- * alignment's column width. `position` packs each row's features in its own
- * residue positions, shifted by an `align` transform, and maps the extent they
- * cover across every row onto the panel width, so a row with no alignment
- * still has an x.
- */
-function featurePanelSpans({
-  panel,
-  width,
-  colWidth,
-  domainBands,
-  annotationsByRow,
-  shifts,
-}: {
-  panel: RowFeaturesSpec
-  width: number
-  colWidth: number
-  domainBands: Map<string, DomainBand[]>
-  annotationsByRow: Record<string, Annotation[]>
-  shifts: Map<string, number> | undefined
-}): Map<string, RowPanelSpan[]> {
-  if (panel.x === 'column') {
-    return panelLanes(
-      panel,
-      [...domainBands].map(([name, bands]) => [
-        name,
-        bands.map(band => ({
-          ...band,
-          xStart: band.startCol * colWidth,
-          xEnd: band.endCol * colWidth,
-        })),
-      ]),
-    )
-  }
-  const shifted = Object.entries(annotationsByRow).map(
-    ([name, annotations]) => {
-      const shift = shifts?.get(name) ?? 0
-      return [
-        name,
-        annotations.map(annotation => ({
-          annotation,
-          start: annotation.start - 1 + shift,
-          end: annotation.end + shift,
-        })),
-      ] as const
-    },
-  )
-  let min = Infinity
-  let max = -Infinity
-  for (const [, features] of shifted) {
-    for (const { start, end } of features) {
-      min = Math.min(min, start)
-      max = Math.max(max, end)
-    }
-  }
-  // a gene arrow ends where its feature does, so the extent maps onto the whole
-  // panel less the pixel the rightmost stroke needs
-  const drawable = Math.max(1, width - 1)
-  const scale = max > min ? drawable / (max - min) : 0
-  // a lane opens where a span covers more than a tenth of the one before it,
-  // which keeps the genes of an operon on one lane: adjacent genes commonly
-  // share a few bases, and a stop codon overlapping the next start reads as a
-  // second lane over the whole row
-  return panelLanes(
-    panel,
-    shifted.map(([name, features]) => [
-      name,
-      features.map(({ annotation, start, end }) => ({
-        annotation,
-        xStart: (start - min) * scale,
-        xEnd: (end - min) * scale,
-        startCol: start,
-        endCol: end - (end - start) * laneOverlap,
-      })),
-    ]),
-  )
-}
-
-// 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,
-    ...resolved,
-    legend: resolved.legend.filter(entry => shown.has(entry.id)),
-  }
-}
-
 const columnTrackBytes = new WeakMap<ColumnTrackSpec, number>()
 
 function columnTrackSize(track: ColumnTrackSpec) {
@@ -531,6 +264,7 @@ export const preservedOnReset = new Set([
   'drawNodeBubbles',
   'drawNodeLabels',
   'showTreeOverview',
+  'showTreeScaleBar',
   'overviewHeight',
   'turnedOffTracks',
   'trackHeights',
@@ -538,224 +272,23 @@ export const preservedOnReset = new Set([
   'allowedGappyness',
   'subFeatureRows',
   'showDomainLegend',
+  'domainFill',
+  'embeddedMode',
 ])
 
 // `turnedOffTracks` holds only the user's explicit choices, so a hidden-by-default
-// track writes nothing into the snapshot. A file-supplied track passes its own
-// `defaultOff`, since the count varies by file: a Pfam seed has a couple of #=GR
-// lines, an Rfam family one per row.
+// track writes nothing into the snapshot
 function trackIsOff(
   turnedOffTracks: { get: (id: string) => boolean | undefined },
   id: string,
-  defaultOff?: boolean,
 ) {
-  return turnedOffTracks.get(id) ?? (defaultOff || defaultOffTracks.has(id))
+  return turnedOffTracks.get(id) ?? 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[] = []
 
-/**
- * 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.
- */
-function cladeRows(
-  clade: Clade,
-  root: HierarchyNode<NodeWithIds>,
-  index: Map<string, HierarchyNode<NodeWithIds> | undefined>,
-  rowNamesSet: Map<string, number>,
-): { rows: [number, number]; nodeId?: string } | undefined {
-  if (clade.range) {
-    const [a, b] = clade.range.map(name =>
-      index.get(name) ? rowNamesSet.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 node = clade.mrca ? mrca(root, clade.mrca, index) : undefined
-  if (!node) {
-    return undefined
-  }
-  const tips = leaves(node)
-  if (tips.length !== clade.tips) {
-    return undefined
-  }
-  let first = Infinity
-  let last = -Infinity
-  for (const tip of tips) {
-    const row = rowNamesSet.get(tip.data.name)
-    if (row !== undefined) {
-      first = Math.min(first, row)
-      last = Math.max(last, row)
-    }
-  }
-  return first <= last
-    ? { rows: [first, last], nodeId: node.data.id }
-    : undefined
-}
-
-/**
- * Every clade that resolves, with its fill color settled, against the leaf
- * order `rowNamesSet` gives. The tree panel resolves against the displayed
- * rows and the overview against its own, so both take the tree they draw. A
- * `range` record names no node, so the seeding marks, which need one, drop it.
- */
-function resolveClades(
-  clades: Clade[],
-  root: HierarchyNode<NodeWithIds>,
-  rowNamesSet: Map<string, number>,
-): ResolvedClade[] {
-  const index = leafIndex(root)
-  return clades.flatMap(clade => {
-    const resolved = cladeRows(clade, root, index, rowNamesSet)
-    const seeding = seedingMarks.has(clade.mark)
-    return resolved && !(seeding && resolved.nodeId === undefined)
-      ? [
-          {
-            ...resolved,
-            mark: clade.mark,
-            color: withAlpha(
-              clade.color ?? cladeHighlightColor,
-              cladeHighlightAlpha,
-            ),
-            markColor: clade.color,
-            label: clade.label,
-          },
-        ]
-      : []
-  })
-}
-
-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
- * 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,
-    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))
-  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)
-    if (res) {
-      hier = res
-    }
-  }
-
-  for (const collapsedId of collapsed) {
-    const node = find(hier, n => n.data.id === collapsedId)
-    if (node) {
-      if (node.children) {
-        collapse(node)
-      } else if (node.parent?.children) {
-        node.parent.children = node.parent.children.filter(
-          c => c.data.id !== collapsedId,
-        )
-      }
-    }
-  }
-
-  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] {
-  return [Math.round(node.xMin! - 0.5), Math.round(node.xMax! - 0.5)]
-}
-
 // the channels reading the feature table; every other channel reads rowData
 const featureChannels = new Set<EncodingChannel>([
   'featureFill',
@@ -765,6 +298,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,
@@ -776,6 +319,31 @@ function sameLength(segment: ResidueSegment) {
   )
 }
 
+// A zoom that passes the default cell size stops on it, and one that starts on
+// it holds there until the wheel has gathered `zoomDetent` worth of scale, so
+// a zoom in or out finds its way back to the default
+const zoomDetent = Math.log(1.3)
+
+function detentZoom(
+  value: number,
+  scale: number,
+  home: number,
+  held: number,
+  min: number,
+  canHold: boolean,
+) {
+  if (value === home && canHold) {
+    const total = held + Math.log(scale)
+    return Math.abs(total) < zoomDetent
+      ? { value, held: total }
+      : { value: clamp(home * Math.exp(total), min, maxCellSize), held: 0 }
+  }
+  const next = clamp(value * scale, min, maxCellSize)
+  return (value - home) * (next - home) < 0
+    ? { value: home, held: 0 }
+    : { value: next, held: 0 }
+}
+
 // fit() divides the viewport by the row or column count and multiplies back, so
 // an exact fit can land a fraction of a pixel over. A plain `>` would then show
 // a scrollbar that shrinks the viewport and leaves a gap.
@@ -810,19 +378,11 @@ function sharedValue(values: (string | undefined)[]) {
     : undefined
 }
 
-// preorder, so reversing the list puts every node after its descendants
-function preorder(tree: NodeWithIds) {
-  const order: NodeWithIds[] = []
-  const stack = [tree]
-  while (stack.length > 0) {
-    const node = stack.pop()!
-    order.push(node)
-    for (const child of node.children) {
-      stack.push(child)
-    }
-  }
-  return order
-}
+type StripPanelScale = Omit<ResolvedStripPanel, 'id' | 'width' | 'offsetX'>
+type FeaturePanelScale = Omit<
+  ResolvedFeaturePanel,
+  'id' | 'width' | 'offsetX' | 'spans'
+>
 
 /**
  * #stateModel MsaView
@@ -868,6 +428,13 @@ function stateModelFactory({
          * #property
          */
         showDomains: stripDefault(types.boolean, defaultShowDomains),
+        /**
+         * #property
+         * whether shown domains fill the cells they cover. Off, the residue
+         * scheme keeps the cells and each domain draws as a bar under its
+         * row. See `cellFill`.
+         */
+        domainFill: stripDefault(types.boolean, true),
         /**
          * #property
          * whether the domain legend is expanded. The legend floats over the
@@ -899,6 +466,13 @@ function stateModelFactory({
          */
         drawMsaLetters: stripDefault(types.boolean, defaultDrawMsaLetters),
 
+        /**
+         * #property
+         * draws the toolbar's menus and Settings as icons without text, for a
+         * host with little room, such as a JBrowse view
+         */
+        embeddedMode: stripDefault(types.boolean, false),
+
         /**
          * #property
          * zoom in/out on plain mouse-wheel without holding ctrl
@@ -1051,10 +625,10 @@ function stateModelFactory({
 
         /**
          * #property
-         * the user's explicit hide choices per annotation accession, keyed by
-         * accession with the value meaning "off", like `turnedOffTracks`. An
-         * untouched accession is absent and drawn, so the shared URL grows
-         * only with the user's filters
+         * the user's departures from each annotation accession's default,
+         * keyed by accession with the value meaning "off", like
+         * `turnedOffTracks`. An untouched accession is absent and takes its
+         * default, so the shared URL grows only with the user's filters
          */
         turnedOffFeatures: stripDefault(types.map(types.boolean), {}),
         /**
@@ -1096,9 +670,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>(),
         /**
@@ -1134,12 +709,30 @@ function stateModelFactory({
        * #volatile
        */
       headerHeight: 0,
+      /**
+       * #volatile
+       * whether the settings panel docks beside the alignment, taking
+       * `settingsPanelWidth` out of the width the view lays out in
+       */
+      settingsOpen: false,
+      /**
+       * #volatile
+       * the log scale a wheel zoom has gathered against the detent at the
+       * default column width and row height, per axis
+       */
+      zoomHeld: { col: 0, row: 0 },
       /**
        * #volatile
        * leaves the toolbar out, for a host drawing its own controls. Kept out
        * 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
        */
@@ -1151,6 +744,13 @@ function stateModelFactory({
       highResScaleFactor:
         typeof window === 'undefined' ? 1 : window.devicePixelRatio,
 
+      /**
+       * #volatile
+       * the cell size and block grid the alignment last drew at, held from a
+       * wheel-zoom frame until the gesture settles. MSACanvas stretches those
+       * blocks to the current cell size with one CSS transform
+       */
+      zoomSnapshot: undefined as ZoomSnapshot | undefined,
       /**
        * #volatile
        */
@@ -1313,6 +913,12 @@ function stateModelFactory({
       setWidth(arg: number) {
         self.volatileWidth = arg
       },
+      /**
+       * #action
+       */
+      setSettingsOpen(arg: boolean) {
+        self.settingsOpen = arg
+      },
       /**
        * #action
        * update the canvas scale factor when the device pixel ratio changes
@@ -1456,6 +1062,23 @@ function stateModelFactory({
       setShowDomains(arg: boolean) {
         self.showDomains = arg
       },
+      /**
+       * #action
+       */
+      setDomainFill(arg: boolean) {
+        self.domainFill = arg
+      },
+      /**
+       * #action
+       * hand the cell fill to the residue scheme, the domains, or neither,
+       * which colors the letters instead
+       */
+      setCellFill(mode: 'residue' | 'domain' | 'none') {
+        self.setBgColor(mode !== 'none')
+        if (mode !== 'none') {
+          self.domainFill = mode === 'domain'
+        }
+      },
       /**
        * #action
        * expand or collapse the domain legend that floats over the alignment
@@ -1484,6 +1107,7 @@ function stateModelFactory({
        */
       setRowHeight(n: number) {
         self.rowHeight = n
+        self.zoomHeld = { ...self.zoomHeld, row: 0 }
       },
 
       /**
@@ -1492,6 +1116,7 @@ function stateModelFactory({
        */
       setColWidth(n: number) {
         self.colWidth = n
+        self.zoomHeld = { ...self.zoomHeld, col: 0 }
       },
 
       /**
@@ -1651,36 +1276,19 @@ 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
-       * 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 && this.allAnnotations.length > 0
-      },
+
       /**
        * #getter
        * whether the host restores the loaded documents outside the snapshot.
@@ -1705,7 +1313,7 @@ function stateModelFactory({
         if (self.volatileWidth === undefined) {
           throw new Error('not initialized')
         }
-        return self.volatileWidth
+        return self.volatileWidth - (self.settingsOpen ? settingsPanelWidth : 0)
       },
     }))
     .views(self => ({
@@ -1755,7 +1363,7 @@ function stateModelFactory({
         return !!this.tree.noTree
       },
       get noDomains() {
-        return self.allAnnotations.length === 0
+        return this.allAnnotations.length === 0
       },
 
       /**
@@ -1864,6 +1472,27 @@ function stateModelFactory({
           ? parseMSA(text, self.currentAlignment, self.msaFormat)
           : null
       },
+      /**
+       * #getter
+       * the annotations the overlay, the legend and the encodings draw: the
+       * GFF's, the `features` layer's, then the file's own per-row lines
+       */
+      get allAnnotations(): Annotation[] {
+        const inline = this.MSA?.annotations ?? []
+        return self.features.length > 0 || inline.length > 0
+          ? [
+              ...self.annotations,
+              ...featuresToAnnotations(self.features),
+              ...inline,
+            ]
+          : self.annotations
+      },
+      /**
+       * #getter
+       */
+      get actuallyShowDomains() {
+        return self.showDomains && this.allAnnotations.length > 0
+      },
       /**
        * #getter
        */
@@ -1931,7 +1560,7 @@ function stateModelFactory({
         return resolveClades(
           self.clades,
           hierarchy(this.tree, d => d.children),
-          this.rowNamesSet,
+          this.root,
         )
       },
       /**
@@ -2120,21 +1749,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,
         }
       },
 
@@ -2148,10 +1775,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)
       },
 
       /**
@@ -2244,7 +1872,7 @@ function stateModelFactory({
        * #getter
        */
       get blanks() {
-        const { hideGapsEffective, realAllowedGappyness } = self
+        const { hideGapsEffective, allowedGappyness } = self
         if (!hideGapsEffective) {
           return []
         }
@@ -2260,7 +1888,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]!
@@ -2344,11 +1972,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
@@ -2399,10 +2035,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'
@@ -2449,6 +2086,22 @@ function stateModelFactory({
         )
       },
 
+      /**
+       * #getter
+       * Pre-computed similarity shades per column, for blosum62_dynamic.
+       * Returns a map of letter -> color for each column. Amino acids shade by
+       * BLOSUM62 similarity to the rest of the column, and an alignment of
+       * nucleotides by identity, since the matrix names amino acids.
+       */
+      get colSimilarity() {
+        const { colStats, sequenceType } = this
+        const columnColors =
+          sequenceType === 'amino' ? blosum62ColumnColors : identityColumnColors
+        return Array.from({ length: colStats.numColumns }, (_, col) =>
+          columnColors(colStats, col),
+        )
+      },
+
       /**
        * #getter
        * Conservation score per column using Shannon entropy (biojs-msa style).
@@ -2536,15 +2189,6 @@ function stateModelFactory({
         return this.treeLayout.rootToTipLength
       },
 
-      /**
-       * #getter
-       * x-position of the farthest tip in a phylogram, px: effectiveTreeWidth,
-       * or 0 for a tree with no branch lengths (drawn as a cladogram)
-       */
-      get maxBranchLength() {
-        return this.rootToTipLength ? this.effectiveTreeWidth : 0
-      },
-
       /**
        * #getter
        * pixels per unit of branch length in the phylogram layout, 0 in
@@ -2721,7 +2365,6 @@ function stateModelFactory({
                   data: content?.data,
                   arcs: content?.arcs,
                 },
-                ReactComponent: TrackBlocks,
               }
             })
             columnTrackModels.set(track, computedModel)
@@ -2783,7 +2426,6 @@ function stateModelFactory({
             data: hideGapsEffective ? skipBlanks(blanks, t.data!) : t.data,
             height: rowHeight,
           },
-          ReactComponent: TrackBlocks,
         }))
       },
 
@@ -2806,7 +2448,6 @@ function stateModelFactory({
                   height: self.trackHeight('arc'),
                   arcs,
                 },
-                ReactComponent: TrackBlocks,
               },
             ]
           : []
@@ -2854,7 +2495,6 @@ function stateModelFactory({
             heightKey: resizableKinds.has(model.kind) ? model.kind : undefined,
             height: self.trackHeight(model.kind),
           },
-          ReactComponent: TrackBlocks,
         }))
       },
 
@@ -2874,8 +2514,7 @@ function stateModelFactory({
        */
       get turnedOnTracks() {
         return this.tracks.filter(
-          f =>
-            !trackIsOff(self.turnedOffTracks, f.model.id, f.model.defaultOff),
+          f => !trackIsOff(self.turnedOffTracks, f.model.id),
         )
       },
 
@@ -2897,7 +2536,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)
         ]
       },
@@ -2982,7 +2621,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
         }
@@ -3205,7 +2844,11 @@ function stateModelFactory({
           if (mapping.structure.id !== structureId) {
             continue
           }
-          if (asymId !== undefined && mapping.structure.asymId !== asymId) {
+          if (
+            asymId !== undefined &&
+            mapping.structure.asymId !== undefined &&
+            mapping.structure.asymId !== asymId
+          ) {
             continue
           }
           const segment = mapping.segments.find(
@@ -3225,10 +2868,14 @@ function stateModelFactory({
     .views(self => ({
       /**
        * #getter
-       * the branch-length scale bar over the tree, undefined in cladogram mode
-       * or when the tree area is too narrow for one
+       * the branch-length scale bar over the tree, undefined while
+       * `showTreeScaleBar` is off, in cladogram mode, or when the tree area is
+       * too narrow for one
        */
       get treeScaleBar() {
+        if (!self.showTreeScaleBar) {
+          return undefined
+        }
         return scaleBarLength(
           self.pxPerBranchLength,
           self.effectiveTreeAreaWidth - self.marginLeft * 2,
@@ -3284,13 +2931,48 @@ function stateModelFactory({
         }
         return types
       },
-      get filteredAnnotations() {
-        return self.allAnnotations.filter(
-          r => !self.turnedOffFeatures.get(r.accession),
+      /**
+       * accessions hidden until the user turns them on, such as a Stockholm
+       * file's #=GR lines
+       */
+      get defaultOffAccessions() {
+        return new Set(
+          self.allAnnotations.filter(a => a.defaultOff).map(a => a.accession),
         )
       },
+      /**
+       * #method
+       */
+      featureOff(accession: string) {
+        return (
+          self.turnedOffFeatures.get(accession) ??
+          this.defaultOffAccessions.has(accession)
+        )
+      },
+      get filteredAnnotations() {
+        return self.allAnnotations.filter(r => !this.featureOff(r.accession))
+      },
+      /**
+       * #getter
+       * what colors the alignment's cells: the residue scheme, the domains
+       * covering them, or nothing, which leaves the scheme to the letters.
+       * Domains own the fill only while some are drawn, so a file whose
+       * annotations all start hidden keeps its residue colors
+       */
+      get cellFill(): 'residue' | 'domain' | 'none' {
+        return !self.bgColor
+          ? 'none'
+          : self.actuallyShowDomains &&
+              self.domainFill &&
+              this.filteredAnnotations.length > 0
+            ? 'domain'
+            : 'residue'
+      },
       get annotationsByRow() {
-        return groupBy(this.filteredAnnotations, r => r.id)
+        const { rowNamesSet } = self
+        return groupBy(this.filteredAnnotations, r =>
+          annotationRowName(r.id, rowNamesSet),
+        )
       },
     }))
     .views(self => ({
@@ -3364,6 +3046,12 @@ function stateModelFactory({
           self.blocksX.map(bx => [bx, by] as const),
         )
       },
+      /**
+       * #getter
+       */
+      get wheelZooming() {
+        return self.zoomSnapshot !== undefined
+      },
 
       /**
        * #getter
@@ -3381,7 +3069,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`,
             ]
@@ -3521,10 +3211,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)
@@ -3552,30 +3245,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
        */
@@ -3608,19 +3277,35 @@ function stateModelFactory({
         transaction(() => {
           const colInView = (-self.scrollX + offsetX) / self.colWidth
           const rowInView = (-self.scrollY + offsetY) / self.rowHeight
+          // zooming both axes, an axis holds at the default only while the
+          // other sits there too, or one would hold while the other grows
+          const canHold =
+            axis !== 'both' ||
+            (self.colWidth === defaultColWidth &&
+              self.rowHeight === defaultRowHeight)
           if (axis !== 'vertical') {
-            self.colWidth = clamp(
-              self.colWidth * scaleFactor,
+            const { value, held } = detentZoom(
+              self.colWidth,
+              scaleFactor,
+              defaultColWidth,
+              self.zoomHeld.col,
               minColWidth,
-              maxCellSize,
+              canHold,
             )
+            self.colWidth = value
+            self.zoomHeld = { ...self.zoomHeld, col: held }
           }
           if (axis !== 'horizontal') {
-            self.rowHeight = clamp(
-              self.rowHeight * scaleFactor,
+            const { value, held } = detentZoom(
+              self.rowHeight,
+              scaleFactor,
+              defaultRowHeight,
+              self.zoomHeld.row,
               minRowHeight,
-              maxCellSize,
+              canHold,
             )
+            self.rowHeight = value
+            self.zoomHeld = { ...self.zoomHeld, row: held }
           }
           self.scrollX = clamp(
             offsetX - colInView * self.colWidth,
@@ -3641,6 +3326,25 @@ function stateModelFactory({
           )
         })
       },
+      /**
+       * #action
+       * zoomToPos for one wheel or pinch frame. The alignment keeps the blocks
+       * it drew at the start of the gesture, scaled, and redraws them only once
+       * they stop covering the viewport; endWheelZoom redraws them sharp
+       */
+      wheelZoomToPos(scaleFactor: number, offsetX: number, offsetY: number) {
+        self.zoomSnapshot ??= takeZoomSnapshot(self, false)
+        this.zoomToPos(scaleFactor, offsetX, offsetY, self.wheelZoomAxis)
+        if (!zoomSnapshotCovers(self, self.zoomSnapshot)) {
+          self.zoomSnapshot = takeZoomSnapshot(self, true)
+        }
+      },
+      /**
+       * #action
+       */
+      endWheelZoom() {
+        self.zoomSnapshot = undefined
+      },
       /**
        * #action
        */
@@ -3668,16 +3372,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)))
       },
@@ -3735,11 +3429,22 @@ function stateModelFactory({
        * #action
        */
       toggleTrack(id: string) {
-        const defaultOff = self.MSA?.tracks.find(t => t.id === id)?.defaultOff
-        self.turnedOffTracks.set(
-          id,
-          !trackIsOff(self.turnedOffTracks, id, defaultOff),
-        )
+        self.turnedOffTracks.set(id, !trackIsOff(self.turnedOffTracks, id))
+      },
+      /**
+       * #action
+       * show or hide several tracks at once, as the track selector's Show all
+       * and Hide all do. A choice matching the track's default is dropped, so
+       * it stays out of the shared URL
+       */
+      setTracksShown(ids: string[], shown: boolean) {
+        for (const id of ids) {
+          if (defaultOffTracks.has(id) === !shown) {
+            self.turnedOffTracks.delete(id)
+          } else {
+            self.turnedOffTracks.set(id, !shown)
+          }
+        }
       },
       /**
        * #action
@@ -3765,7 +3470,7 @@ function stateModelFactory({
               column: column + 1,
               row,
               residue: self.visibleColToSeqPosOneBased(row, visibleCol),
-              letter: self.rowMap.get(row)?.[column],
+              letter: self.rowSequence(row)?.[column],
             }
       },
       /**
@@ -3904,7 +3609,7 @@ function stateModelFactory({
        */
       get visibleDomainTypes() {
         return this.categoricalDomainTypes
-          .filter(d => !self.turnedOffFeatures.get(d.accession))
+          .filter(d => !self.featureOff(d.accession))
           .toSorted((a, b) => a.start - b.start)
       },
 
@@ -3954,7 +3659,7 @@ function stateModelFactory({
               : visibleDomainTypes.map(d => ({
                   id: d.accession,
                   label: d.name,
-                  color: fillPalette[d.accession]!,
+                  color: d.color ?? fillPalette[d.accession]!,
                 })),
             'domains',
           )
@@ -3973,16 +3678,16 @@ function stateModelFactory({
       /**
        * #getter
        * whether the overlay marks each domain with a bar under its row instead
-       * of filling the row behind the letters. Letter-color mode hands the
-       * background to the color scheme, so a filled box would paint over it and
-       * leave the setting with nothing to show. Sub-row layout already stacks
+       * of filling the row behind the letters: whenever the domains do not own
+       * the cell fill (`cellFill`), a filled box would paint over the residue
+       * colors the user picked. Sub-row layout already stacks
        * the boxes clear of the letters, and with the letters too small to draw
        * the filled box is the only thing left to read.
        */
       get domainUnderline() {
         return (
           self.actuallyShowDomains &&
-          !self.bgColor &&
+          self.cellFill !== 'domain' &&
           !self.subFeatureRows &&
           self.showMsaLetters
         )
@@ -4221,7 +3926,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) {
@@ -4230,7 +3935,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)
@@ -4327,7 +4032,7 @@ function stateModelFactory({
                 this.visibleDomainTypes.map(d => ({
                   id: d.accession,
                   label: d.name,
-                  color: fillPalette[d.accession]!,
+                  color: d.color ?? fillPalette[d.accession]!,
                 })),
             }
           }
@@ -4504,6 +4209,18 @@ function stateModelFactory({
       setHideHeader(arg: boolean) {
         self.hideHeader = arg
       },
+      /**
+       * #action
+       */
+      setEmbeddedMode(arg: boolean) {
+        self.embeddedMode = arg
+      },
+      /**
+       * #action
+       */
+      setImportForm(arg: boolean) {
+        self.importForm = arg
+      },
       /**
        * #action
        * focus the subtree a click `y` pixels down the tree overview lands on.
@@ -4577,14 +4294,15 @@ function stateModelFactory({
       },
       /**
        * #action
-       * show or hide an annotation type. Only hidden types are recorded; see
-       * `turnedOffFeatures`
+       * show or hide an annotation type. Only a choice that differs from the
+       * type's default is recorded; see `turnedOffFeatures`
        */
       setFilter(accession: string, shown: boolean) {
-        if (shown) {
-          self.turnedOffFeatures.delete(accession)
+        // only a departure from the accession's default is recorded
+        if (shown === self.defaultOffAccessions.has(accession)) {
+          self.turnedOffFeatures.set(accession, !shown)
         } else {
-          self.turnedOffFeatures.set(accession, true)
+          self.turnedOffFeatures.delete(accession)
         }
       },
 
@@ -4593,23 +4311,28 @@ function stateModelFactory({
        */
       fit() {
         // two passes: each direction's viewport depends on whether the other
-        // overflows (the minimap takes height, the vertical scrollbar width)
+        // overflows (the minimap takes height, the vertical scrollbar width).
+        // Fit shrinks an alignment into the window but never grows one past
+        // the default cell size, which would stretch a small alignment's rows
+        // and columns out of proportion
         transaction(() => {
           for (let pass = 0; pass < 2; pass++) {
-            this.fitHorizontally()
-            this.fitVertically()
+            this.fitHorizontally(defaultColWidth)
+            this.fitVertically(defaultRowHeight)
           }
         })
       },
       /**
        * #action
        */
-      fitVertically() {
+      fitVertically(maxRowHeight = maxCellSize) {
         if (self.numRows > 0) {
-          self.rowHeight = clamp(
-            self.msaAreaHeight / self.numRows,
-            minRowHeight,
-            maxCellSize,
+          self.setRowHeight(
+            clamp(
+              self.msaAreaHeight / self.numRows,
+              minRowHeight,
+              maxRowHeight,
+            ),
           )
         }
         self.scrollY = 0
@@ -4626,10 +4349,12 @@ function stateModelFactory({
           return
         }
         transaction(() => {
-          self.colWidth = clamp(
-            self.msaCanvasWidth / (span.endCol - span.startCol + 1),
-            minColWidth,
-            maxCellSize,
+          self.setColWidth(
+            clamp(
+              self.msaCanvasWidth / (span.endCol - span.startCol + 1),
+              minColWidth,
+              maxCellSize,
+            ),
           )
           self.scrollX = clamp(
             -span.startCol * self.colWidth,
@@ -4638,6 +4363,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,
@@ -4654,10 +4400,12 @@ function stateModelFactory({
             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.setRowHeight(
+              clamp(
+                self.msaAreaHeight / (last - first + 1),
+                minRowHeight,
+                maxCellSize,
+              ),
             )
             self.scrollY = clamp(-first * self.rowHeight, self.maxScrollY, 0)
           }
@@ -4698,13 +4446,15 @@ function stateModelFactory({
       /**
        * #action
        */
-      fitHorizontally() {
+      fitHorizontally(maxColWidth = maxCellSize) {
         if (self.numColumns > 0) {
           // msaCanvasWidth excludes the vertical scrollbar's 20px
-          self.colWidth = clamp(
-            self.msaCanvasWidth / self.numColumns,
-            minColWidth,
-            maxCellSize,
+          self.setColWidth(
+            clamp(
+              self.msaCanvasWidth / self.numColumns,
+              minColWidth,
+              maxColWidth,
+            ),
           )
         }
         self.scrollX = 0
@@ -4715,21 +4465,18 @@ function stateModelFactory({
           self.setHighlightedColumns(self.highlightColumns)
         }
 
-        // 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.
+        const awaitingTree = () => !!self.treeFilehandle && !self.data.tree
+
+        // `collapse`, `focus` and `rotate` marks seed `collapsed`, `showOnly`
+        // and `rotated`. Seeding runs once per data load, `clades` change and
+        // reroot, so expanding a seeded clade sticks until one of those. A tree
+        // filehandle holds it back, since `dataInitialized` is true while the
+        // tree is still the flat stub.
         addDisposer(
           self,
           reaction(
             () =>
-              self.dataInitialized && !(self.treeFilehandle && !self.data.tree)
+              self.dataInitialized && !awaitingTree()
                 ? { clades: getSnapshot(self.clades), treeRoot: self.treeRoot }
                 : undefined,
             seed => {
@@ -4767,9 +4514,9 @@ function stateModelFactory({
               region &&
               self.viewInitialized &&
               self.numColumns > 0 &&
-              !(self.treeFilehandle && !self.data.tree)
+              !awaitingTree()
             ) {
-              this.zoomToRegion(region)
+              this.revealRegion(region)
               self.setRegion(undefined)
             }
           }),
@@ -4796,105 +4543,7 @@ function stateModelFactory({
           })
         }
 
-        /**
-         * Fetch a filehandle whenever it changes, and hand the text to
-         * `onLoad`.
-         *
-         * A generation guard keeps a slower superseded request from overwriting
-         * the newer one's data, status or loading flag. A superseded or cleared
-         * request is aborted and clears its status line.
-         *
-         * `clearFilehandle` runs after a local file loads, since a blob has no
-         * URL to refetch, and when the user cancels, which returns the view to
-         * the import form.
-         *
-         * `what` names the layer in a failure message. An `optional` layer
-         * (annotations, row metadata) that fails adds a warning instead of an
-         * error.
-         */
-        const loadOnFilehandleChange = ({
-          what,
-          getFilehandle,
-          onLoad,
-          setLoading,
-          clearFilehandle,
-          optional = false,
-        }: {
-          what: string
-          getFilehandle: () => FileLocationType | undefined
-          onLoad: (text: string) => void
-          setLoading?: (arg: boolean) => void
-          clearFilehandle?: () => void
-          optional?: boolean
-        }) => {
-          let generation = 0
-          let cancelInFlight: (() => void) | undefined
-          addDisposer(self, () => {
-            cancelInFlight?.()
-          })
-          addDisposer(
-            self,
-            autorun(async () => {
-              const filehandle = getFilehandle()
-              const current = ++generation
-              cancelInFlight?.()
-              cancelInFlight = undefined
-              if (!filehandle) {
-                setLoading?.(false)
-                return
-              }
-              const isCurrent = () => current === generation && isAlive(self)
-              const controller = new AbortController()
-              cancelInFlight = () => {
-                controller.abort()
-                if (isAlive(self)) {
-                  self.setStatus(undefined)
-                }
-              }
-              try {
-                setLoading?.(true)
-                self.setError(undefined)
-                const text = await fetchTextWithProgress(
-                  openLocation(filehandle),
-                  status => {
-                    if (isCurrent()) {
-                      self.setStatus(status)
-                    }
-                  },
-                  { controller },
-                )
-                if (isCurrent()) {
-                  transaction(() => {
-                    onLoad(text)
-                    if (filehandle.locationType === 'BlobLocation') {
-                      clearFilehandle?.()
-                    }
-                  })
-                }
-              } catch (e) {
-                if (isCurrent()) {
-                  if (isAbortError(e)) {
-                    clearFilehandle?.()
-                  } else {
-                    console.error(e)
-                    if (optional) {
-                      self.addWarning(`The ${what} did not load: ${e}`)
-                    } else {
-                      self.setError(e)
-                    }
-                  }
-                }
-              } finally {
-                if (isCurrent()) {
-                  cancelInFlight = undefined
-                  setLoading?.(false)
-                }
-              }
-            }),
-          )
-        }
-
-        loadOnFilehandleChange({
+        installFilehandleLoader(self, {
           what: 'tree',
           getFilehandle: () => self.treeFilehandle,
           onLoad: text => {
@@ -4909,7 +4558,7 @@ function stateModelFactory({
         })
 
         // treeMetadata has no import-form step, so no loading flag or cancel
-        loadOnFilehandleChange({
+        installFilehandleLoader(self, {
           what: 'row metadata',
           optional: true,
           getFilehandle: () => self.treeMetadataFilehandle,
@@ -4941,7 +4590,7 @@ function stateModelFactory({
         )
 
         // gffFilehandle loads into data.gff, which the autorun above parses
-        loadOnFilehandleChange({
+        installFilehandleLoader(self, {
           what: 'annotations',
           optional: true,
           getFilehandle: () => self.gffFilehandle,
@@ -4953,7 +4602,7 @@ function stateModelFactory({
           },
         })
 
-        loadOnFilehandleChange({
+        installFilehandleLoader(self, {
           what: 'alignment',
           getFilehandle: () => self.msaFilehandle,
           onLoad: text => {
@@ -4977,20 +4626,16 @@ function stateModelFactory({
           self,
           autorun(() => {
             if (self.dynamicColorSchemeName) {
-              // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
-              self.colStats
+              readComputed(self.colStats)
             }
             if (self.showColumnStats) {
-              // everything the hover tooltip reads per column
-              // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
-              self.colStats
-              // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
-              self.conservation
-              // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
-              self.propertyConservation
+              readComputed(
+                self.colStats,
+                self.conservation,
+                self.propertyConservation,
+              )
             }
-            // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
-            self.columns
+            readComputed(self.columns)
           }),
         )
       },