react-msaview 8.2.0 → 8.4.0

package/dist/model.js

@@ -2,11 +2,12 @@ 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 { autorun, computed, transaction } from 'mobx';
+import { autorun, compareStructural, computed, reaction, transaction, } from 'mobx';
 import { generateNodeIds, gffToAnnotations, interProScanToAnnotations, parseEmfTree, parseGFF, parseMSA, parseNewick, } from 'msa-parsers';
+import { blockFasta } from './blockFasta.js';
 import { calculateBlocks } from './calculateBlocks.js';
 import { clustalXColumnColors } from './clustalX.js';
-import colorSchemes from './colorSchemes.js';
+import colorSchemes, { letterColorTable } from './colorSchemes.js';
 import { columnCountsFromRows, letterOfResidueSlot } from './columnCounts.js';
 import { columnStats } from './columnStats.js';
 import { packDomainLanes } from './components/msa/packDomainLanes.js';
@@ -14,13 +15,14 @@ import { visibleColRange } from './components/msa/visibleColRange.js';
 import TrackBlocks from './components/tracks/TrackBlocks.js';
 import { cladeGutterWidth } from './components/tree/cladeBrackets.js';
 import { scaleBarLength } from './components/tree/scaleBar.js';
-import { cladeHighlightAlpha, cladeHighlightColor, defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultFeaturePanelWidth, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultScrollZoomAxis, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, defaultTreeWidth, labelReferenceFontSize, maxCellSize, maxInlineSnapshotBytes, maxNeighborJoiningRows, minColWidth, minLetterColWidth, minLetterRowHeight, minRowHeight, rowPanelHeaderHeight, rowTintAlpha, scrollZoomAxes, segmentFeatureTypes, segmentShades, treeScaleBarHeight, } from './constants.js';
+import { cladeHighlightAlpha, cladeHighlightColor, defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultFeaturePanelWidth, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultScrollZoomAxis, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, defaultTreeWidth, labelReferenceFontSize, maxCellSize, maxInlineSnapshotBytes as defaultMaxInlineSnapshotBytes, maxNeighborJoiningRows, minColWidth, minLetterColWidth, minLetterRowHeight, minRowHeight, rowPanelHeaderHeight, rowTintAlpha, scrollZoomAxes, segmentFeatureTypes, segmentShades, treeScaleBarHeight, } from './constants.js';
 import { createPaletteMap } from './createPaletteMap.js';
 import { exportFileName } from './exportFileName.js';
 import { featureField, featureName } from './featureFields.js';
+import { featuresToAnnotations } from './featuresLayer.js';
 import { fetchTextWithProgress, isAbortError } from './fetchUtils.js';
 import { flatToTree } from './flatToTree.js';
-import { calcDepthToLeaf, clusterLayout, collapse, collapsedSubtreeMaxLength, find, forEachDescendant, hierarchy, leafIndex, leaves, maxLength, mrca, nodeCoveringRows, setBrLength, sort, sum as hierarchySum, } from './hierarchy.js';
+import { calcDepthToLeaf, clusterLayout, collapse, find, forEachDescendant, hierarchy, layoutTree, leafIndex, leaves, maxLength, mrca, nodeCoveringRows, setBrLength, sort, sum as hierarchySum, } from './hierarchy.js';
 import { measureTextCanvas } from './measureTextCanvas.js';
 import { DataModelF } from './model/DataModel.js';
 import { DialogQueueSessionMixin } from './model/DialogQueue.js';
@@ -29,6 +31,7 @@ import { TreeModelF } from './model/treeModel.js';
 import { calculateNeighborJoiningTree } from './neighborJoining.js';
 import { parseAsn1 } from './parseAsn1.js';
 import { calculatePropertyConservation } from './propertyConservation.js';
+import { midpointRoot, rerootTree } from './rerootTree.js';
 import { globalColToVisibleCol, seqPosOfGlobalCol, visibleColToGlobalCol, visibleColsBefore, } from './rowCoordinateCalculations.js';
 import { resolveScale } from './scales.js';
 import { buildSeqPosIndex } from './seqPosToGlobalCol.js';
@@ -36,6 +39,7 @@ import { maxBitsFor } from './sequenceLogo.js';
 import { stripDefault } from './stripDefault.js';
 import { computeRowInsertions, dropBlanks, len, outlineColor, skipBlanks, withAlpha, } from './util.js';
 import { saveAs } from './vendor/fileSaver.js';
+import { writeNewick } from './writeNewick.js';
 import { parseWuss } from './wuss.js';
 function parseTreeText(text) {
     if (text.startsWith('BioTreeContainer')) {
@@ -73,10 +77,41 @@ const UNSCALED_FEATURE = '#d9d9d9';
 // 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
-function rowPanelWidth(panel, rowHeight) {
+// 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, view) {
     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) {
+    if (typeof row !== 'object' || row === null) {
+        return undefined;
+    }
+    const fields = {};
+    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, field, colorOf) {
+    const colors = new Map();
+    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;
 }
 // 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
@@ -202,19 +237,34 @@ function featurePanelSpans({ panel, width, colWidth, domainBands, annotationsByR
         })),
     ]));
 }
-// a scale over the values a field takes across the features drawn
-function resolveFeatureScale(field, scale, annotations) {
+// 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, scale, annotations, drawn) {
+    const valuesOf = (list) => 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();
+function columnTrackSize(track) {
+    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) {
-    return (tracks ?? []).map(t => JSON.stringify(t).length);
+    return (tracks ?? []).map(columnTrackSize);
 }
-function smallColumnTracks(tracks) {
+function smallColumnTracks(tracks, maxInlineSnapshotBytes) {
     const sizes = columnTrackSizes(tracks);
     const kept = tracks?.filter((_t, i) => sizes[i] <= maxInlineSnapshotBytes);
     return kept?.length ? { columnTracks: kept } : {};
@@ -240,12 +290,14 @@ export const preservedOnReset = new Set([
     'scrollZoomAxis',
     'bgColor',
     'colorSchemeName',
+    'customColorScheme',
     'showColumnStats',
     'drawLabels',
     'labelsAlignRight',
     'treeAreaWidth',
     'treeWidth',
     'showBranchLen',
+    'treeOrder',
     'drawTree',
     'drawNodeBubbles',
     'drawNodeLabels',
@@ -266,6 +318,8 @@ export const preservedOnReset = new Set([
 function trackIsOff(turnedOffTracks, id, defaultOff) {
     return turnedOffTracks.get(id) ?? (defaultOff || defaultOffTracks.has(id));
 }
+// the marks that set tree state from a node rather than drawing
+const seedingMarks = new Set(['collapse', 'focus', 'rotate']);
 // shared empty results, so observers don't see a fresh [] as a change
 const noDomains = [];
 const noClades = [];
@@ -309,14 +363,13 @@ function cladeRows(clade, root, index, rowNamesSet) {
  * 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, root, rowNamesSet) {
     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)
             ? [
                 {
@@ -330,16 +383,33 @@ function resolveClades(clades, root, rowNamesSet) {
             : [];
     });
 }
+const childOrders = {
+    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, collapsed, showOnly) {
+function buildTreeRoot(tree, { collapsed, rotated, order, showOnly, }) {
     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);
         if (res) {
@@ -359,6 +429,48 @@ function buildTreeRoot(tree, collapsed, showOnly) {
     }
     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, outgroup) {
+    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, treeRoot) {
+    const plain = new Map();
+    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) {
@@ -388,6 +500,20 @@ function overflows(content, viewport) {
 function inRanges(ranges, position) {
     return !!ranges?.some(([start, end]) => position >= start && position <= end);
 }
+// sorted integers as inclusive [first, last] runs of consecutive values
+function consecutiveRuns(sorted) {
+    const runs = [];
+    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) {
@@ -428,8 +554,13 @@ function preorder(tree) {
  * 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, } = {}) {
     return types
         .compose(DialogQueueSessionMixin(), TreeModelF(), MSAModelF(), types.model('MsaView', {
         /**
@@ -535,6 +666,20 @@ function stateModelFactory() {
          * hidden)
          */
         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(),
         /**
          * #property
          * focus on particular subtree
@@ -576,7 +721,7 @@ function stateModelFactory() {
          * data from the loaded tree/msa/treeMetadata, generally loaded by
          * autorun
          */
-        data: types.optional(DataModelF(), {}),
+        data: types.optional(DataModelF(maxInlineSnapshotBytes), {}),
         /**
          * #property
          * the user's explicit hide choices per annotation accession, keyed by
@@ -606,6 +751,21 @@ function stateModelFactory() {
          * Persists in the snapshot and the URL.
          */
         highlights: stripDefault(types.array(types.frozen()), []),
+        /**
+         * #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()), []),
+        /**
+         * #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(),
         /**
          * #property
          * where the view opens, in `highlights` coordinates: `{row, start,
@@ -619,7 +779,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()), []),
@@ -735,9 +896,15 @@ 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
+         */
+        loadWarnings: [],
+        /**
+         * #volatile
+         * derived warnings the user dismissed, which stay hidden while the data
+         * behind them holds
          */
-        warnings: [],
+        dismissedWarnings: [],
         /**
          * #volatile
          * bumped by reset(). The error boundary above the view uses it as its key,
@@ -826,16 +993,10 @@ function stateModelFactory() {
          * that failed to parse. A message already on the list is not added again
          */
         addWarning(warning) {
-            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
@@ -879,6 +1040,33 @@ function stateModelFactory() {
         setHighlights(highlights) {
             self.highlights.replace(highlights);
         },
+        /**
+         * #action
+         */
+        setFeatures(features) {
+            self.features.replace(features);
+        },
+        /**
+         * #action
+         * select a block, in `selection` coordinates. `start` and `end` may come
+         * in either order.
+         */
+        setSelection(selection) {
+            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
          * replace the clades the viewer marks (see docs/layers.md)
@@ -952,8 +1140,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) {
             if (n === self.currentAlignment) {
@@ -962,6 +1151,7 @@ function stateModelFactory() {
             transaction(() => {
                 self.currentAlignment = n;
                 self.collapsed.clear();
+                self.rotated.clear();
                 this.setShowOnly(undefined);
                 this.drawRelativeTo(undefined);
                 self.scrollX = 0;
@@ -980,6 +1170,40 @@ function stateModelFactory() {
                 self.collapsed.push(node);
             }
         },
+        /**
+         * #action
+         * reverse the order of the given node's children, or restore it
+         */
+        toggleRotated(node) {
+            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) {
+            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
@@ -1043,7 +1267,7 @@ 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) {
             self.data.setGFF(result);
@@ -1064,11 +1288,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() {
+            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
@@ -1102,10 +1336,25 @@ 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;
         },
         /**
          * #getter
@@ -1126,7 +1375,7 @@ function stateModelFactory() {
             return !!this.tree.noTree;
         },
         get noDomains() {
-            return self.annotations.length === 0;
+            return self.allAnnotations.length === 0;
         },
         /**
          * #getter
@@ -1134,12 +1383,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() {
             if (self.hostRestoresData) {
@@ -1172,7 +1422,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() {
             const text = self.data.treeMetadata;
@@ -1182,7 +1433,10 @@ function stateModelFactory() {
             try {
                 const parsed = JSON.parse(text);
                 return typeof parsed === 'object' && parsed !== null
-                    ? parsed
+                    ? Object.fromEntries(Object.entries(parsed).map(([name, row]) => [
+                        name,
+                        stringFields(row),
+                    ]))
                     : {};
             }
             catch (e) {
@@ -1230,8 +1484,9 @@ function stateModelFactory() {
         },
         /**
          * #getter
+         * the tree the file or the alignment gives, before `treeRoot`
          */
-        get tree() {
+        get inputTree() {
             const text = self.data.tree;
             return text
                 ? generateNodeIds(parseTreeText(text))
@@ -1242,6 +1497,18 @@ function stateModelFactory() {
                     name: 'empty',
                 });
         },
+        /**
+         * #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() {
+            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.
@@ -1261,8 +1528,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() {
             if (self.clades.length === 0) {
@@ -1315,7 +1582,24 @@ 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,
+            }));
         },
         /**
          * #getter
@@ -1337,7 +1621,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);
@@ -1409,7 +1697,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
@@ -1453,9 +1741,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);
@@ -1577,7 +1866,7 @@ function stateModelFactory() {
          * #getter
          */
         get colStats() {
-            return columnCountsFromRows(this.columns2d);
+            return columnCountsFromRows(this.columns2d, this.numColumns);
         },
         /**
          * #getter
@@ -1669,38 +1958,39 @@ function stateModelFactory() {
         },
         /**
          * #getter
-         * generates a new tree that is clustered with x,y positions
+         * `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;
+                },
+            });
+        },
+        /**
+         * #getter
+         * the laid-out tree, with pixel positions on every node
          */
         get hierarchy() {
-            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;
-                }
-            });
-            return r;
+            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);
+            return this.treeLayout.leaves;
         },
         /**
          * #getter
@@ -1708,8 +1998,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;
         },
         /**
          * #getter
@@ -1733,7 +2022,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;
         },
         /**
          * #getter
@@ -1942,12 +2231,6 @@ function stateModelFactory() {
         get secondaryStructureConsensus() {
             return self.MSA?.secondaryStructureConsensus;
         },
-        /**
-         * #getter
-         */
-        get seqConsensus() {
-            return self.MSA?.seqConsensus;
-        },
         /**
          * #getter
          * the base pairs of the consensus secondary structure, as arcs, in
@@ -2080,11 +2363,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, visibleCol) {
             return self.rowMap.get(rowName)?.[this.visibleColToGlobalCol(visibleCol)];
@@ -2171,6 +2456,21 @@ function stateModelFactory() {
             // row, otherwise one past the last column
             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, seqPos) {
+            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.
@@ -2199,10 +2499,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;
                 }
@@ -2402,7 +2702,7 @@ function stateModelFactory() {
             // first occurrence wins; only name, description and segment start are
             // read from it
             const types = new Map();
-            for (const annot of self.annotations) {
+            for (const annot of self.allAnnotations) {
                 if (!types.has(annot.accession)) {
                     types.set(annot.accession, annot);
                 }
@@ -2410,7 +2710,7 @@ function stateModelFactory() {
             return types;
         },
         get filteredAnnotations() {
-            return self.annotations.filter(r => !self.turnedOffFeatures.get(r.accession));
+            return self.allAnnotations.filter(r => !self.turnedOffFeatures.get(r.accession));
         },
         get annotationsByRow() {
             return groupBy(this.filteredAnnotations, r => r.id);
@@ -2457,6 +2757,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
          */
@@ -2471,9 +2793,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() {
+            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() {
+            return [
+                ...self.loadWarnings,
+                ...this.dataWarnings.filter(w => !self.dismissedWarnings.includes(w)),
+            ];
         },
         /**
          * #getter
@@ -2499,6 +2841,13 @@ function stateModelFactory() {
         setDrawMsaLetters(arg) {
             self.drawMsaLetters = arg;
         },
+        /**
+         * #action
+         */
+        clearWarnings() {
+            self.loadWarnings = [];
+            self.dismissedWarnings = self.dataWarnings;
+        },
         /**
          * #action
          */
@@ -2553,13 +2902,36 @@ 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) {
+            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) {
             transaction(() => {
                 self.collapsed.clear();
+                self.rotated.clear();
                 self.setShowOnly(undefined);
                 self.setTree(newick);
             });
@@ -2572,49 +2944,48 @@ function stateModelFactory() {
             self.setColWidth(defaultColWidth);
             self.setRowHeight(defaultRowHeight);
         },
+        /**
+         * #action
+         * zoom by `scaleFactor` about the center of the alignment area
+         */
+        zoomAtCenter(scaleFactor, axis = '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
@@ -2744,25 +3115,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, rowIndex) {
             const column = self.visibleColToGlobalCol(visibleCol);
@@ -2809,7 +3166,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);
@@ -2946,7 +3303,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()];
@@ -2988,7 +3345,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;
                     }
@@ -3065,18 +3422,7 @@ function stateModelFactory() {
          * on every mouse move.
          */
         get highlightedColumnRuns() {
-            const { highlightedColumns } = self;
-            const runs = [];
-            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 }));
         },
         /**
          * #method
@@ -3127,6 +3473,78 @@ function stateModelFactory() {
                 return span ? [{ ...base, ...span, rowIndices: [] }] : [];
             });
         },
+        /**
+         * #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() {
+            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]]
+                    : [];
+            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]];
+            });
+            return blockFasta(rows, span.start, span.end);
+        },
         /**
          * #method
          * per-column summary statistics: consensus residue and its identity
@@ -3155,63 +3573,45 @@ 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() {
             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() {
-            const rows = Object.entries(self.rowData);
+        get rowPanelScales() {
+            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,
@@ -3223,26 +3623,53 @@ function stateModelFactory() {
                             })),
                     };
                 }
-                const { colorOf, legend } = resolveScale(panel.scale, rows.map(([, row]) => row?.[panel.field]).filter(notEmpty));
-                const colors = new Map();
-                for (const [name, row] of rows) {
-                    const value = row?.[panel.field];
-                    const color = value === undefined ? undefined : colorOf(value);
-                    if (color) {
-                        colors.set(name, color);
-                    }
-                }
+                const { colorOf, legend } = resolveScale(panel.scale, Object.values(rowData)
+                    .map(row => row?.[panel.field])
+                    .filter(notEmpty));
                 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() {
+            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],
+                        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] };
+            });
+        },
         /**
          * #getter
          * the shift an `align` transform gives each row, keyed by the feature
@@ -3274,18 +3701,9 @@ function stateModelFactory() {
          */
         get tipLabelColors() {
             const encoding = this.resolvedEncodings.find(e => e.channel === 'tipLabel');
-            if (!encoding) {
-                return undefined;
-            }
-            const colors = new Map();
-            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;
         },
         /**
          * #getter
@@ -3298,13 +3716,10 @@ 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);
             });
         },
         /**
@@ -3380,7 +3795,8 @@ function stateModelFactory() {
          */
         reset() {
             self.resetCount++;
-            self.clearWarnings();
+            self.loadWarnings = [];
+            self.dismissedWarnings = [];
             self.setStatus(undefined);
             applySnapshot(self, Object.fromEntries(Object.entries(getSnapshot(self)).filter(([key]) => preservedOnReset.has(key))));
             self.setError(undefined);
@@ -3400,6 +3816,14 @@ 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
@@ -3451,6 +3875,51 @@ function stateModelFactory() {
                 self.scrollX = clamp(-span.startCol * self.colWidth, self.maxScrollX, 0);
             });
         },
+        /**
+         * #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, head) {
+            const { numColumns, numRows, rowNames } = self;
+            if (numColumns === 0 || numRows === 0) {
+                return;
+            }
+            const ordered = (a, b, last) => [clamp(a, 0, last), clamp(b, 0, last)].sort((x, y) => x - y);
+            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
          */
@@ -3465,23 +3934,22 @@ function stateModelFactory() {
             if (self.highlightColumns?.length) {
                 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;
-            addDisposer(self, autorun(() => {
-                if (cladesSeeded ||
-                    !self.dataInitialized ||
-                    (self.treeFilehandle && !self.data.tree) ||
-                    self.clades.length === 0) {
+            // 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, reaction(() => self.dataInitialized && !(self.treeFilehandle && !self.data.tree)
+                ? { clades: getSnapshot(self.clades), treeRoot: self.treeRoot }
+                : undefined, seed => {
+                if (!seed?.clades.length) {
                     return;
                 }
-                cladesSeeded = true;
                 for (const { mark, nodeId } of self.resolvedClades) {
                     if (nodeId === undefined) {
                         continue;
@@ -3492,8 +3960,12 @@ function stateModelFactory() {
                     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
             // columns, so this waits for both, and for a tree file whose collapsed
             // clades would hide columns and move the target after the zoom
@@ -3646,16 +4118,6 @@ function stateModelFactory() {
                     self.setAnnotations([]);
                 }
             }));
-            // 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',
@@ -3688,7 +4150,7 @@ function stateModelFactory() {
             // xref solution https://github.com/mobxjs/mobx/issues/266#issuecomment-222007278
             // xref problem https://github.com/GMOD/react-msaview/issues/75
             addDisposer(self, autorun(() => {
-                if (self.colorSchemeName.includes('dynamic')) {
+                if (self.dynamicColorSchemeName) {
                     // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
                     self.colStats;
                 }
@@ -3738,7 +4200,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 }),