react-msaview 8.2.0 → 8.3.0

package/dist/model.js

@@ -2,7 +2,7 @@ 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 { calculateBlocks } from './calculateBlocks.js';
 import { clustalXColumnColors } from './clustalX.js';
@@ -20,7 +20,7 @@ import { exportFileName } from './exportFileName.js';
 import { featureField, featureName } from './featureFields.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 +29,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 +37,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 +75,24 @@ 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));
+}
+// 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
@@ -209,10 +225,19 @@ function resolveFeatureScale(field, scale, annotations) {
         ...resolveScale(scale, annotations.map(a => featureField(a, field)).filter(notEmpty)),
     };
 }
+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) {
     const sizes = columnTrackSizes(tracks);
@@ -246,6 +271,7 @@ export const preservedOnReset = new Set([
     'treeAreaWidth',
     'treeWidth',
     'showBranchLen',
+    'treeOrder',
     'drawTree',
     'drawNodeBubbles',
     'drawNodeLabels',
@@ -266,6 +292,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 +337,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 +357,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 +403,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) {
@@ -535,6 +621,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
@@ -619,7 +719,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 +836,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 +933,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
@@ -952,8 +1053,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 +1064,7 @@ function stateModelFactory() {
             transaction(() => {
                 self.currentAlignment = n;
                 self.collapsed.clear();
+                self.rotated.clear();
                 this.setShowOnly(undefined);
                 this.drawRelativeTo(undefined);
                 self.scrollX = 0;
@@ -980,6 +1083,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
@@ -1134,12 +1271,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 8,000 characters, 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) {
@@ -1230,8 +1368,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 +1381,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 +1412,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 +1466,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 +1505,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 +1581,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 +1625,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 +1750,7 @@ function stateModelFactory() {
          * #getter
          */
         get colStats() {
-            return columnCountsFromRows(this.columns2d);
+            return columnCountsFromRows(this.columns2d, this.numColumns);
         },
         /**
          * #getter
@@ -1669,38 +1842,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 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;
-                }
+        get treeLayout() {
+            return layoutTree(this.root, {
+                get rowHeight() {
+                    return self.rowHeight;
+                },
+                get treeWidth() {
+                    return self.treeWidth;
+                },
             });
-            return r;
+        },
+        /**
+         * #getter
+         * the laid-out tree, with pixel positions on every node
+         */
+        get hierarchy() {
+            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 +1882,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 +1906,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 +2115,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 +2247,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 +2340,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 +2383,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;
                 }
@@ -2457,6 +2641,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 +2677,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 maxScrollX() {
-            return Math.min(-self.totalWidth + (self.msaAreaWidth - 100), 0);
+        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 warnings() {
+            return [
+                ...self.loadWarnings,
+                ...this.dataWarnings.filter(w => !self.dismissedWarnings.includes(w)),
+            ];
         },
         /**
          * #getter
@@ -2499,6 +2725,13 @@ function stateModelFactory() {
         setDrawMsaLetters(arg) {
             self.drawMsaLetters = arg;
         },
+        /**
+         * #action
+         */
+        clearWarnings() {
+            self.loadWarnings = [];
+            self.dismissedWarnings = self.dataWarnings;
+        },
         /**
          * #action
          */
@@ -2553,13 +2786,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 +2828,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 +2999,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 +3050,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 +3187,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 +3229,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;
                     }
@@ -3173,45 +3414,30 @@ function stateModelFactory() {
         },
         /**
          * #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)
                         : 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 +3449,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 +3527,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 +3542,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 +3621,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 +3642,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
@@ -3465,23 +3715,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 +3741,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 +3899,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',