react-msaview 9.0.0 → 9.1.1

package/dist/model.js

@@ -1,9 +1,8 @@
 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 { addDisposer, applySnapshot, cast, getSnapshot, types, } from '@jbrowse/mobx-state-tree';
 import { autorun, compareStructural, computed, reaction, transaction, } from 'mobx';
-import { generateNodeIds, gffToAnnotations, interProScanToAnnotations, parseEmfTree, parseGFF, parseMSA, parseNewick, } from 'msa-parsers';
+import { generateNodeIds, gffToAnnotations, parseGFF, parseMSA, } from 'msa-parsers';
 import { blockFasta } from './blockFasta.js';
 import { calculateBlocks } from './calculateBlocks.js';
 import { clustalXColumnColors } from './clustalX.js';
@@ -12,41 +11,36 @@ import { columnCountsFromRows, letterOfResidueSlot } from './columnCounts.js';
 import { columnStats } from './columnStats.js';
 import { packDomainLanes } from './components/msa/packDomainLanes.js';
 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, fontSizeFor, labelFitFontSize, maxCellSize, maxFitTreeWidth, maxTreeAreaShare, maxInlineSnapshotBytes as defaultMaxInlineSnapshotBytes, maxNeighborJoiningRows, minColWidth, minLetterColWidth, minLetterRowHeight, minRowHeight, minTreeWidth, pxPerTreeDepth, rowPanelHeaderHeight, rowTintAlpha, scrollZoomAxes, segmentFeatureTypes, segmentShades, treeScaleBarHeight, } from './constants.js';
+import { defaultAllowedGappyness, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawMsaLetters, defaultHeight, defaultHideGaps, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultScrollZoomAxis, defaultShowDomainLegend, defaultShowDomains, defaultSubFeatureRows, fontSizeFor, labelFitFontSize, maxCellSize, maxFitTreeWidth, maxTreeAreaShare, maxInlineSnapshotBytes as defaultMaxInlineSnapshotBytes, maxNeighborJoiningRows, minColWidth, minLetterColWidth, minLetterRowHeight, minRowHeight, minTreeWidth, pxPerTreeDepth, rowPanelHeaderHeight, rowTintAlpha, scrollZoomAxes, segmentFeatureTypes, segmentShades, settingsPanelWidth, treeScaleBarHeight, } from './constants.js';
 import { createPaletteMap } from './createPaletteMap.js';
 import { exportFileName } from './exportFileName.js';
-import { featureField, featureName } from './featureFields.js';
+import { featureName } from './featureFields.js';
+import { colorByRow, featureColorMap, featureLabelMap, featurePanelSpans, resolveFeatureScale, rowPanelWidth, stringFields, } from './featurePanels.js';
 import { featuresToAnnotations } from './featuresLayer.js';
-import { fetchTextWithProgress, isAbortError } from './fetchUtils.js';
-import { flatToTree } from './flatToTree.js';
-import { calcDepthToLeaf, clusterLayout, collapse, find, forEachDescendant, hierarchy, layoutTree, leafIndex, leaves, maxLength, mrca, nodeCoveringRows, setBrLength, sort, sum as hierarchySum, } from './hierarchy.js';
+import { installFilehandleLoader } from './filehandleLoader.js';
+import { find, hierarchy, layoutTree, leaves, nodeCoveringRows, } from './hierarchy.js';
 import { DataModelF } from './model/DataModel.js';
 import { DialogQueueSessionMixin } from './model/DialogQueue.js';
 import { MSAModelF } from './model/msaModel.js';
 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 { preorder } from './rerootTree.js';
 import { globalColToVisibleCol, seqPosOfGlobalCol, visibleColToGlobalCol, visibleColsBefore, } from './rowCoordinateCalculations.js';
 import { resolveScale } from './scales.js';
 import { buildSeqPosIndex } from './seqPosToGlobalCol.js';
 import { maxBitsFor } from './sequenceLogo.js';
+import { blosum62ColumnColors, identityColumnColors, } from './similarityColors.js';
 import { stripDefault } from './stripDefault.js';
 import { treeTips, widestLabel } from './tipLabels.js';
-import { computeRowInsertions, dropBlanks, len, outlineColor, skipBlanks, withAlpha, } from './util.js';
+import { buildTreeRoot, outgroupNode, parseTreeText, resolveClades, rootTree, tipRange, } from './treeDisplay.js';
+import { computeRowInsertions, dropBlanks, len, readComputed, 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')) {
-        return flatToTree(parseAsn1(text));
-    }
-    return parseNewick(text.startsWith('SEQ') ? parseEmfTree(text).tree : text);
-}
+import { takeZoomSnapshot, zoomSnapshotCovers } from './zoomSnapshot.js';
 // The height each kind draws at before the user drags a divider. A text track
 // is absent: it is one alignment row tall and follows rowHeight, so the zoom
 // controls already size it.
@@ -70,186 +64,6 @@ const ownHeightKey = (id) => `own:${id}`;
 // them
 const HELIX_ARC = '#4e79a7';
 const PSEUDOKNOT_ARC = '#e15759';
-// the fill of a span under a scale that gives its value no color, such as a
-// gene a `map` over gene names leaves out
-const UNSCALED_FEATURE = '#d9d9d9';
-// the fraction of a span a following one may cover before it takes a lane of
-// its own in a `features` panel
-const laneOverlap = 0.1;
-// a row panel's own width, or a default: the row height, which makes a strip
-// cell square, and a gene neighborhood's width for a features panel. The row
-// height is read only when used, so a panel with a width of its own does not
-// recompute on a vertical zoom
-function rowPanelWidth(panel, view) {
-    return (panel.width ??
-        (panel.kind === 'features' ? defaultFeaturePanelWidth : view.rowHeight));
-}
-// one row of the row table as the channels read it. A number or a boolean
-// reads as its string, the way a GFF value does, and null or an object drops
-function stringFields(row) {
-    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
-// accession palette
-function featureColorMap(annotations, encoding, fillPalette) {
-    const strokes = new Map();
-    const strokeOf = (fill) => {
-        const hit = strokes.get(fill);
-        if (hit !== undefined) {
-            return hit;
-        }
-        const stroke = outlineColor(fill);
-        strokes.set(fill, stroke);
-        return stroke;
-    };
-    return new Map(annotations.map(annotation => {
-        const value = encoding
-            ? featureField(annotation, encoding.field)
-            : undefined;
-        const fill = annotation.color ??
-            (value === undefined ? undefined : encoding.colorOf(value)) ??
-            (encoding ? UNSCALED_FEATURE : fillPalette[annotation.accession]);
-        return [annotation, { fill, stroke: strokeOf(fill) }];
-    }));
-}
-// the text a label channel draws inside each span, for the features carrying
-// the field it names
-function featureLabelMap(annotations, field) {
-    const labels = new Map();
-    for (const annotation of annotations) {
-        const value = featureField(annotation, field);
-        if (value !== undefined) {
-            labels.set(annotation, value);
-        }
-    }
-    return labels;
-}
-/**
- * Lanes for `position: "strandpile"`, gggenomes' `position_strandpile`: the
- * forward features stack above the line and the reverse below it, each strand
- * packing on its own. The deepest row on each side sets the grid every row lays
- * out on, so the line between the strands sits at one height down the panel and
- * a reader can scan it. A feature with no strand piles with the forward ones.
- */
-function strandpileLanes(rows) {
-    const piled = rows.map(([name, bands]) => {
-        const reverse = packDomainLanes(bands.filter(b => b.annotation.strand === -1));
-        const forward = packDomainLanes(bands.filter(b => b.annotation.strand !== -1));
-        return { name, forward, reverse };
-    });
-    const up = Math.max(0, ...piled.map(p => p.forward[0]?.laneCount ?? 0));
-    const down = Math.max(0, ...piled.map(p => p.reverse[0]?.laneCount ?? 0));
-    const laneCount = up + down;
-    return new Map(piled.map(({ name, forward, reverse }) => [
-        name,
-        [
-            // forward level 0 is the lane just above the line, stacking upward
-            ...forward.map(b => ({ ...b, lane: up - 1 - b.lane, laneCount })),
-            ...reverse.map(b => ({ ...b, lane: up + b.lane, laneCount })),
-        ],
-    ]));
-}
-/** one row's spans laid out by the panel's `position` */
-function panelLanes(panel, rows) {
-    return panel.position === 'strandpile'
-        ? strandpileLanes(rows)
-        : new Map(rows.map(([name, bands]) => [name, packDomainLanes(bands)]));
-}
-/**
- * The spans a `features` panel draws, keyed by row name and measured in the
- * panel's own pixels. `column` takes the bands the overlay draws, at the
- * alignment's column width. `position` packs each row's features in its own
- * residue positions, shifted by an `align` transform, and maps the extent they
- * cover across every row onto the panel width, so a row with no alignment
- * still has an x.
- */
-function featurePanelSpans({ panel, width, colWidth, domainBands, annotationsByRow, shifts, }) {
-    if (panel.x === 'column') {
-        return panelLanes(panel, [...domainBands].map(([name, bands]) => [
-            name,
-            bands.map(band => ({
-                ...band,
-                xStart: band.startCol * colWidth,
-                xEnd: band.endCol * colWidth,
-            })),
-        ]));
-    }
-    const shifted = Object.entries(annotationsByRow).map(([name, annotations]) => {
-        const shift = shifts?.get(name) ?? 0;
-        return [
-            name,
-            annotations.map(annotation => ({
-                annotation,
-                start: annotation.start - 1 + shift,
-                end: annotation.end + shift,
-            })),
-        ];
-    });
-    let min = Infinity;
-    let max = -Infinity;
-    for (const [, features] of shifted) {
-        for (const { start, end } of features) {
-            min = Math.min(min, start);
-            max = Math.max(max, end);
-        }
-    }
-    // a gene arrow ends where its feature does, so the extent maps onto the whole
-    // panel less the pixel the rightmost stroke needs
-    const drawable = Math.max(1, width - 1);
-    const scale = max > min ? drawable / (max - min) : 0;
-    // a lane opens where a span covers more than a tenth of the one before it,
-    // which keeps the genes of an operon on one lane: adjacent genes commonly
-    // share a few bases, and a stop codon overlapping the next start reads as a
-    // second lane over the whole row
-    return panelLanes(panel, shifted.map(([name, features]) => [
-        name,
-        features.map(({ annotation, start, end }) => ({
-            annotation,
-            xStart: (start - min) * scale,
-            xEnd: (end - min) * scale,
-            startCol: start,
-            endCol: end - (end - start) * laneOverlap,
-        })),
-    ]));
-}
-// a scale over the values a field takes across every feature loaded, so hiding
-// a type in the filter dialog leaves the rest in their colors, and a legend of
-// the values the features drawn carry
-function resolveFeatureScale(field, 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,
-        ...resolved,
-        legend: resolved.legend.filter(entry => shown.has(entry.id)),
-    };
-}
 const columnTrackBytes = new WeakMap();
 function columnTrackSize(track) {
     let bytes = columnTrackBytes.get(track);
@@ -302,6 +116,7 @@ export const preservedOnReset = new Set([
     'drawNodeBubbles',
     'drawNodeLabels',
     'showTreeOverview',
+    'showTreeScaleBar',
     'overviewHeight',
     'turnedOffTracks',
     'trackHeights',
@@ -309,172 +124,17 @@ export const preservedOnReset = new Set([
     'allowedGappyness',
     'subFeatureRows',
     'showDomainLegend',
+    'domainFill',
+    'embeddedMode',
 ]);
 // `turnedOffTracks` holds only the user's explicit choices, so a hidden-by-default
-// track writes nothing into the snapshot. A file-supplied track passes its own
-// `defaultOff`, since the count varies by file: a Pfam seed has a couple of #=GR
-// lines, an Rfam family one per row.
-function trackIsOff(turnedOffTracks, id, defaultOff) {
-    return turnedOffTracks.get(id) ?? (defaultOff || defaultOffTracks.has(id));
+// track writes nothing into the snapshot
+function trackIsOff(turnedOffTracks, id) {
+    return turnedOffTracks.get(id) ?? 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 = [];
-/**
- * The rows a clade covers and the node an `mrca` names, or undefined when the
- * clade does not resolve: a tip name the tree does not have or has twice, or a
- * leaf count `tips` disagrees with. `index` and `rowNamesSet` are the memoized
- * passes over the tree.
- */
-function cladeRows(clade, root, index, rowNamesSet) {
-    if (clade.range) {
-        const [a, b] = clade.range.map(name => index.get(name) ? rowNamesSet.get(name) : undefined);
-        if (a === undefined || b === undefined) {
-            return undefined;
-        }
-        const rows = a <= b ? [a, b] : [b, a];
-        return rows[1] - rows[0] + 1 === clade.tips ? { rows } : undefined;
-    }
-    const node = clade.mrca ? mrca(root, clade.mrca, index) : undefined;
-    if (!node) {
-        return undefined;
-    }
-    const tips = leaves(node);
-    if (tips.length !== clade.tips) {
-        return undefined;
-    }
-    let first = Infinity;
-    let last = -Infinity;
-    for (const tip of tips) {
-        const row = rowNamesSet.get(tip.data.name);
-        if (row !== undefined) {
-            first = Math.min(first, row);
-            last = Math.max(last, row);
-        }
-    }
-    return first <= last
-        ? { rows: [first, last], nodeId: node.data.id }
-        : undefined;
-}
-/**
- * Every clade that resolves, with its fill color settled, against the leaf
- * order `rowNamesSet` gives. The tree panel resolves against the displayed
- * rows and the overview against its own, so both take the tree they draw. A
- * `range` record names no node, so the seeding marks, which need one, drop it.
- */
-function resolveClades(clades, root, rowNamesSet) {
-    const index = leafIndex(root);
-    return clades.flatMap(clade => {
-        const resolved = cladeRows(clade, root, index, rowNamesSet);
-        const seeding = seedingMarks.has(clade.mark);
-        return resolved && !(seeding && resolved.nodeId === undefined)
-            ? [
-                {
-                    ...resolved,
-                    mark: clade.mark,
-                    color: withAlpha(clade.color ?? cladeHighlightColor, cladeHighlightAlpha),
-                    markColor: clade.color,
-                    label: clade.label,
-                },
-            ]
-            : [];
-    });
-}
-const childOrders = {
-    input: undefined,
-    branchLength: (a, b) => (a.data.length ?? 1) - (b.data.length ?? 1),
-    ladderize: (a, b) => a.value - b.value,
-    ladderizeReverse: (a, b) => b.value - a.value,
-};
-/**
- * The tree with the display transforms applied: leaf counts summed, children
- * put in `order` and each `rotated` node's reversed, `showOnly` taken as the
- * new root, and each `collapsed` clade folded. The overview builds the same
- * tree without the focus, so it shows the focused subtree inside the whole.
- */
-function buildTreeRoot(tree, { collapsed, rotated, order, showOnly, }) {
-    let hier = hierarchy(tree, d => d.children);
-    hierarchySum(hier, d => (d.children.length > 0 ? 0 : 1));
-    const compare = childOrders[order];
-    if (compare) {
-        sort(hier, compare);
-    }
-    if (rotated.length > 0) {
-        const flip = new Set(rotated);
-        forEachDescendant(hier, n => {
-            if (flip.has(n.data.id)) {
-                n.children?.reverse();
-            }
-        });
-    }
-    if (showOnly) {
-        const res = find(hier, n => n.data.id === showOnly);
-        if (res) {
-            hier = res;
-        }
-    }
-    for (const collapsedId of collapsed) {
-        const node = find(hier, n => n.data.id === collapsedId);
-        if (node) {
-            if (node.children) {
-                collapse(node);
-            }
-            else if (node.parent?.children) {
-                node.parent.children = node.parent.children.filter(c => c.data.id !== collapsedId);
-            }
-        }
-    }
-    return hier;
-}
-/**
- * The node whose branch an outgroup roots the tree on: the outgroup's most
- * recent common ancestor, or the rest of the tips' where that ancestor is the
- * root, since the outgroup then straddles the root and the branch above the
- * other side is the same branch of the unrooted tree.
- */
-function outgroupNode(root, 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) {
-    return [Math.round(node.xMin - 0.5), Math.round(node.xMax - 0.5)];
-}
 // the channels reading the feature table; every other channel reads rowData
 const featureChannels = new Set([
     'featureFill',
@@ -483,6 +143,15 @@ const featureChannels = new Set([
 // seqPos -> column indexes per row, keyed on the parse so they are garbage
 // collected with it. A computed would rebuild every row's index when read
 // outside a reactive context.
+// Newick tools write a colon in a name as an underscore, so a tree's row
+// `chr1_100-200` is the GFF's `chr1:100-200`, as FastaMSA.getRow resolves it
+function annotationRowName(id, rowNames) {
+    if (rowNames.has(id)) {
+        return id;
+    }
+    const underscored = id.replaceAll(':', '_');
+    return rowNames.has(underscored) ? underscored : id;
+}
 const seqPosIndexCache = new WeakMap();
 // A segment is a 1:1 run. A segment whose sides differ in length is malformed,
 // and the lookups treat it like an uncovered position.
@@ -490,6 +159,22 @@ function sameLength(segment) {
     return (segment.rowEnd - segment.rowStart ===
         segment.structEnd - segment.structStart);
 }
+// A zoom that passes the default cell size stops on it, and one that starts on
+// it holds there until the wheel has gathered `zoomDetent` worth of scale, so
+// a zoom in or out finds its way back to the default
+const zoomDetent = Math.log(1.3);
+function detentZoom(value, scale, home, held, min, canHold) {
+    if (value === home && canHold) {
+        const total = held + Math.log(scale);
+        return Math.abs(total) < zoomDetent
+            ? { value, held: total }
+            : { value: clamp(home * Math.exp(total), min, maxCellSize), held: 0 };
+    }
+    const next = clamp(value * scale, min, maxCellSize);
+    return (value - home) * (next - home) < 0
+        ? { value: home, held: 0 }
+        : { value: next, held: 0 };
+}
 // fit() divides the viewport by the row or column count and multiplies back, so
 // an exact fit can land a fraction of a pixel over. A plain `>` would then show
 // a scrollbar that shrinks the viewport and leaves a gap.
@@ -521,19 +206,6 @@ function sharedValue(values) {
         ? first
         : undefined;
 }
-// preorder, so reversing the list puts every node after its descendants
-function preorder(tree) {
-    const order = [];
-    const stack = [tree];
-    while (stack.length > 0) {
-        const node = stack.pop();
-        order.push(node);
-        for (const child of node.children) {
-            stack.push(child);
-        }
-    }
-    return order;
-}
 /**
  * #stateModel MsaView
  *
@@ -571,6 +243,13 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * #property
          */
         showDomains: stripDefault(types.boolean, defaultShowDomains),
+        /**
+         * #property
+         * whether shown domains fill the cells they cover. Off, the residue
+         * scheme keeps the cells and each domain draws as a bar under its
+         * row. See `cellFill`.
+         */
+        domainFill: stripDefault(types.boolean, true),
         /**
          * #property
          * whether the domain legend is expanded. The legend floats over the
@@ -599,6 +278,12 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * #property
          */
         drawMsaLetters: stripDefault(types.boolean, defaultDrawMsaLetters),
+        /**
+         * #property
+         * draws the toolbar's menus and Settings as icons without text, for a
+         * host with little room, such as a JBrowse view
+         */
+        embeddedMode: stripDefault(types.boolean, false),
         /**
          * #property
          * zoom in/out on plain mouse-wheel without holding ctrl
@@ -723,10 +408,10 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         data: types.optional(DataModelF(maxInlineSnapshotBytes), {}),
         /**
          * #property
-         * the user's explicit hide choices per annotation accession, keyed by
-         * accession with the value meaning "off", like `turnedOffTracks`. An
-         * untouched accession is absent and drawn, so the shared URL grows
-         * only with the user's filters
+         * the user's departures from each annotation accession's default,
+         * keyed by accession with the value meaning "off", like
+         * `turnedOffTracks`. An untouched accession is absent and takes its
+         * default, so the shared URL grows only with the user's filters
          */
         turnedOffFeatures: stripDefault(types.map(types.boolean), {}),
         /**
@@ -768,9 +453,10 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         /**
          * #property
          * where the view opens, in `highlights` coordinates: `{row, start,
-         * end}` zooms onto residues of that row, `{start, end}` onto alignment
-         * columns. Applied once the alignment and any tree file have loaded,
-         * then cleared, so a reloaded session keeps the reader's own scroll.
+         * end}` zooms onto residues of that row and scrolls the row to the
+         * middle, `{start, end}` zooms onto alignment columns. Applied once the
+         * alignment and any tree file have loaded, then cleared, so a reloaded
+         * session keeps the reader's own scroll.
          */
         region: types.frozen(),
         /**
@@ -805,12 +491,30 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * #volatile
          */
         headerHeight: 0,
+        /**
+         * #volatile
+         * whether the settings panel docks beside the alignment, taking
+         * `settingsPanelWidth` out of the width the view lays out in
+         */
+        settingsOpen: false,
+        /**
+         * #volatile
+         * the log scale a wheel zoom has gathered against the detent at the
+         * default column width and row height, per axis
+         */
+        zoomHeld: { col: 0, row: 0 },
         /**
          * #volatile
          * leaves the toolbar out, for a host drawing its own controls. Kept out
          * of the snapshot so a link opened in the full app shows the toolbar.
          */
         hideHeader: false,
+        /**
+         * #volatile
+         * shows the import form while the view has no data. MSAViewer turns it
+         * off, since its host supplies the data and the form is the demo app's
+         */
+        importForm: true,
         /**
          * #volatile
          */
@@ -820,6 +524,13 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * canvas scale factor, from the device pixel ratio
          */
         highResScaleFactor: typeof window === 'undefined' ? 1 : window.devicePixelRatio,
+        /**
+         * #volatile
+         * the cell size and block grid the alignment last drew at, held from a
+         * wheel-zoom frame until the gesture settles. MSACanvas stretches those
+         * blocks to the current cell size with one CSS transform
+         */
+        zoomSnapshot: undefined,
         /**
          * #volatile
          */
@@ -964,6 +675,12 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         setWidth(arg) {
             self.volatileWidth = arg;
         },
+        /**
+         * #action
+         */
+        setSettingsOpen(arg) {
+            self.settingsOpen = arg;
+        },
         /**
          * #action
          * update the canvas scale factor when the device pixel ratio changes
@@ -1101,6 +818,23 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         setShowDomains(arg) {
             self.showDomains = arg;
         },
+        /**
+         * #action
+         */
+        setDomainFill(arg) {
+            self.domainFill = arg;
+        },
+        /**
+         * #action
+         * hand the cell fill to the residue scheme, the domains, or neither,
+         * which colors the letters instead
+         */
+        setCellFill(mode) {
+            self.setBgColor(mode !== 'none');
+            if (mode !== 'none') {
+                self.domainFill = mode === 'domain';
+            }
+        },
         /**
          * #action
          * expand or collapse the domain legend that floats over the alignment
@@ -1128,6 +862,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          */
         setRowHeight(n) {
             self.rowHeight = n;
+            self.zoomHeld = { ...self.zoomHeld, row: 0 };
         },
         /**
          * #action
@@ -1135,6 +870,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          */
         setColWidth(n) {
             self.colWidth = n;
+            self.zoomHeld = { ...self.zoomHeld, col: 0 };
         },
         /**
          * #action
@@ -1275,33 +1011,15 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         .views(self => ({
         /**
          * #getter
-         * hideGaps takes effect when there are collapsed rows or allowedGappyness < 100
+         * hideGaps takes effect when a collapse or a focus hides rows, whose
+         * residues leave columns all gaps among the rest, or when
+         * allowedGappyness is under 100
          */
         get hideGapsEffective() {
             return (self.hideGaps &&
-                (self.collapsed.length > 0 || self.allowedGappyness < 100));
-        },
-        /**
-         * #getter
-         */
-        get realAllowedGappyness() {
-            return this.hideGapsEffective ? self.allowedGappyness : 100;
-        },
-        /**
-         * #getter
-         * the annotations the overlay, the legend and the encodings draw: the
-         * GFF's, then the `features` layer's
-         */
-        get allAnnotations() {
-            return self.features.length > 0
-                ? [...self.annotations, ...featuresToAnnotations(self.features)]
-                : self.annotations;
-        },
-        /**
-         * #getter
-         */
-        get actuallyShowDomains() {
-            return self.showDomains && this.allAnnotations.length > 0;
+                (self.collapsed.length > 0 ||
+                    self.showOnly !== undefined ||
+                    self.allowedGappyness < 100));
         },
         /**
          * #getter
@@ -1327,7 +1045,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             if (self.volatileWidth === undefined) {
                 throw new Error('not initialized');
             }
-            return self.volatileWidth;
+            return self.volatileWidth - (self.settingsOpen ? settingsPanelWidth : 0);
         },
     }))
         .views(self => ({
@@ -1374,7 +1092,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             return !!this.tree.noTree;
         },
         get noDomains() {
-            return self.allAnnotations.length === 0;
+            return this.allAnnotations.length === 0;
         },
         /**
          * #getter
@@ -1475,6 +1193,27 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 ? parseMSA(text, self.currentAlignment, self.msaFormat)
                 : null;
         },
+        /**
+         * #getter
+         * the annotations the overlay, the legend and the encodings draw: the
+         * GFF's, the `features` layer's, then the file's own per-row lines
+         */
+        get allAnnotations() {
+            const inline = this.MSA?.annotations ?? [];
+            return self.features.length > 0 || inline.length > 0
+                ? [
+                    ...self.annotations,
+                    ...featuresToAnnotations(self.features),
+                    ...inline,
+                ]
+                : self.annotations;
+        },
+        /**
+         * #getter
+         */
+        get actuallyShowDomains() {
+            return self.showDomains && this.allAnnotations.length > 0;
+        },
         /**
          * #getter
          */
@@ -1534,7 +1273,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             if (self.clades.length === 0) {
                 return noClades;
             }
-            return resolveClades(self.clades, hierarchy(this.tree, d => d.children), this.rowNamesSet);
+            return resolveClades(self.clades, hierarchy(this.tree, d => d.children), this.root);
         },
         /**
          * #getter
@@ -1702,21 +1441,16 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             if (!self.showTreeOverview) {
                 return undefined;
             }
-            const root = buildTreeRoot(this.tree, {
+            const layout = layoutTree(buildTreeRoot(this.tree, {
                 collapsed: self.collapsed,
                 rotated: self.rotated,
                 order: self.treeOrder,
-            });
-            const numTips = leaves(root).length;
-            clusterLayout(root, numTips, 1);
-            const rootLen = Math.max(root.data.length || 0, 0);
-            const extent = maxLength(root) - rootLen;
-            setBrLength(root, -rootLen, extent ? 1 / extent : 0);
+            }), { rowHeight: 1, treeWidth: 1 });
             return {
-                root,
-                numTips,
-                maxDepthToLeaf: calcDepthToLeaf(root),
-                showBranchLen: self.showBranchLen && extent > 0,
+                root: layout.root,
+                numTips: layout.leaves.length,
+                maxDepthToLeaf: layout.root.depthToLeaf,
+                showBranchLen: self.showBranchLen && layout.rootToTipLength > 0,
             };
         },
         /**
@@ -1729,8 +1463,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             if (!layout || self.clades.length === 0) {
                 return noClades;
             }
-            const rowNames = new Map(leaves(layout.root).map((leaf, index) => [leaf.data.name, index]));
-            return resolveClades(self.clades, layout.root, rowNames);
+            return resolveClades(self.clades, hierarchy(this.tree, d => d.children), layout.root);
         },
         /**
          * #getter
@@ -1811,7 +1544,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * #getter
          */
         get blanks() {
-            const { hideGapsEffective, realAllowedGappyness } = self;
+            const { hideGapsEffective, allowedGappyness } = self;
             if (!hideGapsEffective) {
                 return [];
             }
@@ -1827,7 +1560,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             // row that stops early counts as gapped for the remainder
             const numCols = this.MSA?.getWidth() ?? 0;
             const numRows = strs.length;
-            const threshold = Math.ceil((realAllowedGappyness / 100) * numRows);
+            const threshold = Math.ceil((allowedGappyness / 100) * numRows);
             const blankCounts = new Uint32Array(numCols);
             for (let j = 0; j < numRows; j++) {
                 const str = strs[j];
@@ -1909,11 +1642,19 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             }
             return index;
         },
+        /**
+         * #method
+         * the row's aligned sequence by the name the tree gives it, including
+         * rows a collapsed clade hides. `MSA.getRow` resolves a FASTA name whose
+         * colon a Newick tool wrote as an underscore, which `rowMap` does not
+         */
+        rowSequence(name) {
+            return this.MSA?.getRow(name) || undefined;
+        },
         /**
          * #getter
-         * every sequence in the alignment, keyed by row name, including rows a
-         * collapsed clade hides. `rows` holds only the rows on screen; lookups
-         * by row name use this
+         * every sequence in the alignment, keyed by the alignment's own row
+         * names, including rows a collapsed clade hides
          */
         get rowMap() {
             const MSA = this.MSA;
@@ -1956,10 +1697,11 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          */
         get sequenceType() {
             const letters = this.colStats.lettersPresent;
-            // isDna already excludes U (not in the DNA set) and isRna excludes T,
-            // so the set membership alone disambiguates the two
-            const dna = new Set(['A', 'C', 'G', 'T', 'N']);
-            const rna = new Set(['A', 'C', 'G', 'U', 'N']);
+            // the two-base IUPAC codes keep an ambiguous read nucleotide; the
+            // three-base ones (B, D, H, V) are common amino acids, so they don't
+            const ambiguous = ['N', 'R', 'Y', 'K', 'M', 'S', 'W'];
+            const dna = new Set(['A', 'C', 'G', 'T', ...ambiguous]);
+            const rna = new Set(['A', 'C', 'G', 'U', ...ambiguous]);
             const isDna = letters.size > 0 && [...letters].every(l => dna.has(l));
             const isRna = letters.size > 0 && [...letters].every(l => rna.has(l));
             return isDna ? 'dna' : isRna ? 'rna' : 'amino';
@@ -2000,6 +1742,18 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             const { colStats } = this;
             return Array.from({ length: colStats.numColumns }, (_, col) => clustalXColumnColors(colStats, col));
         },
+        /**
+         * #getter
+         * Pre-computed similarity shades per column, for blosum62_dynamic.
+         * Returns a map of letter -> color for each column. Amino acids shade by
+         * BLOSUM62 similarity to the rest of the column, and an alignment of
+         * nucleotides by identity, since the matrix names amino acids.
+         */
+        get colSimilarity() {
+            const { colStats, sequenceType } = this;
+            const columnColors = sequenceType === 'amino' ? blosum62ColumnColors : identityColumnColors;
+            return Array.from({ length: colStats.numColumns }, (_, col) => columnColors(colStats, col));
+        },
         /**
          * #getter
          * Conservation score per column using Shannon entropy (biojs-msa style).
@@ -2082,14 +1836,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         get rootToTipLength() {
             return this.treeLayout.rootToTipLength;
         },
-        /**
-         * #getter
-         * x-position of the farthest tip in a phylogram, px: effectiveTreeWidth,
-         * or 0 for a tree with no branch lengths (drawn as a cladogram)
-         */
-        get maxBranchLength() {
-            return this.rootToTipLength ? this.effectiveTreeWidth : 0;
-        },
         /**
          * #getter
          * pixels per unit of branch length in the phylogram layout, 0 in
@@ -2245,7 +1991,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                                 data: content?.data,
                                 arcs: content?.arcs,
                             },
-                            ReactComponent: TrackBlocks,
                         };
                     });
                     columnTrackModels.set(track, computedModel);
@@ -2303,7 +2048,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     data: hideGapsEffective ? skipBlanks(blanks, t.data) : t.data,
                     height: rowHeight,
                 },
-                ReactComponent: TrackBlocks,
             }));
         },
         /**
@@ -2325,7 +2069,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                             height: self.trackHeight('arc'),
                             arcs,
                         },
-                        ReactComponent: TrackBlocks,
                     },
                 ]
                 : [];
@@ -2372,7 +2115,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     heightKey: resizableKinds.has(model.kind) ? model.kind : undefined,
                     height: self.trackHeight(model.kind),
                 },
-                ReactComponent: TrackBlocks,
             }));
         },
         get tracks() {
@@ -2389,7 +2131,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * #getter
          */
         get turnedOnTracks() {
-            return this.tracks.filter(f => !trackIsOff(self.turnedOffTracks, f.model.id, f.model.defaultOff));
+            return this.tracks.filter(f => !trackIsOff(self.turnedOffTracks, f.model.id));
         },
         /**
          * #getter
@@ -2408,7 +2150,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * @returns The character at that position
          */
         visibleColToRowLetter(rowName, visibleCol) {
-            return self.rowMap.get(rowName)?.[this.visibleColToGlobalCol(visibleCol)];
+            return self.rowSequence(rowName)?.[this.visibleColToGlobalCol(visibleCol)];
         },
         /**
          * #method
@@ -2483,7 +2225,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * @returns The global column index in the full MSA, or undefined
          */
         seqPosToGlobalCol(rowName, seqPos) {
-            const seq = self.rowMap.get(rowName);
+            const seq = self.rowSequence(rowName);
             if (seq === undefined) {
                 return undefined;
             }
@@ -2678,7 +2420,9 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 if (mapping.structure.id !== structureId) {
                     continue;
                 }
-                if (asymId !== undefined && mapping.structure.asymId !== asymId) {
+                if (asymId !== undefined &&
+                    mapping.structure.asymId !== undefined &&
+                    mapping.structure.asymId !== asymId) {
                     continue;
                 }
                 const segment = mapping.segments.find(seg => position >= seg.structStart && position <= seg.structEnd);
@@ -2695,10 +2439,14 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         .views(self => ({
         /**
          * #getter
-         * the branch-length scale bar over the tree, undefined in cladogram mode
-         * or when the tree area is too narrow for one
+         * the branch-length scale bar over the tree, undefined while
+         * `showTreeScaleBar` is off, in cladogram mode, or when the tree area is
+         * too narrow for one
          */
         get treeScaleBar() {
+            if (!self.showTreeScaleBar) {
+                return undefined;
+            }
             return scaleBarLength(self.pxPerBranchLength, self.effectiveTreeAreaWidth - self.marginLeft * 2);
         },
         /**
@@ -2745,11 +2493,42 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             }
             return types;
         },
+        /**
+         * accessions hidden until the user turns them on, such as a Stockholm
+         * file's #=GR lines
+         */
+        get defaultOffAccessions() {
+            return new Set(self.allAnnotations.filter(a => a.defaultOff).map(a => a.accession));
+        },
+        /**
+         * #method
+         */
+        featureOff(accession) {
+            return (self.turnedOffFeatures.get(accession) ??
+                this.defaultOffAccessions.has(accession));
+        },
         get filteredAnnotations() {
-            return self.allAnnotations.filter(r => !self.turnedOffFeatures.get(r.accession));
+            return self.allAnnotations.filter(r => !this.featureOff(r.accession));
+        },
+        /**
+         * #getter
+         * what colors the alignment's cells: the residue scheme, the domains
+         * covering them, or nothing, which leaves the scheme to the letters.
+         * Domains own the fill only while some are drawn, so a file whose
+         * annotations all start hidden keeps its residue colors
+         */
+        get cellFill() {
+            return !self.bgColor
+                ? 'none'
+                : self.actuallyShowDomains &&
+                    self.domainFill &&
+                    this.filteredAnnotations.length > 0
+                    ? 'domain'
+                    : 'residue';
         },
         get annotationsByRow() {
-            return groupBy(this.filteredAnnotations, r => r.id);
+            const { rowNamesSet } = self;
+            return groupBy(this.filteredAnnotations, r => annotationRowName(r.id, rowNamesSet));
         },
     }))
         .views(self => ({
@@ -2821,6 +2600,12 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         get blocks2d() {
             return self.blocksY.flatMap(by => self.blocksX.map(bx => [bx, by]));
         },
+        /**
+         * #getter
+         */
+        get wheelZooming() {
+            return self.zoomSnapshot !== undefined;
+        },
         /**
          * #getter
          */
@@ -2837,7 +2622,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             const { annotations, rowNamesSet } = self;
             return self.dataInitialized &&
                 annotations.length > 0 &&
-                !annotations.some(a => rowNamesSet.has(a.id))
+                !annotations.some(a => rowNamesSet.has(annotationRowName(a.id, rowNamesSet)))
                 ? [
                     `0 of ${annotations.length} annotations name a row in this alignment`,
                 ]
@@ -2962,10 +2747,13 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * #action
          * swap in a different tree over the same alignment. Clears `collapsed`,
          * `rotated` and `showOnly`, since path-derived node ids (node-0-0-1) from the old
-         * tree would match unrelated nodes in the new one.
+         * tree would match unrelated nodes in the new one, and the tree's
+         * filehandle, which the snapshot would otherwise reopen in place of
+         * the new tree
          */
         replaceTree(newick) {
             transaction(() => {
+                self.setTreeFilehandle(undefined);
                 self.collapsed.clear();
                 self.rotated.clear();
                 self.setShowOnly(undefined);
@@ -2987,30 +2775,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         zoomAtCenter(scaleFactor, axis = 'both') {
             this.zoomToPos(scaleFactor, self.msaCanvasWidth / 2, self.msaAreaHeight / 2, axis);
         },
-        /**
-         * #action
-         */
-        zoomOutHorizontal() {
-            this.zoomAtCenter(0.75, 'horizontal');
-        },
-        /**
-         * #action
-         */
-        zoomInHorizontal() {
-            this.zoomAtCenter(1.5, 'horizontal');
-        },
-        /**
-         * #action
-         */
-        zoomInVertical() {
-            this.zoomAtCenter(1.5, 'vertical');
-        },
-        /**
-         * #action
-         */
-        zoomOutVertical() {
-            this.zoomAtCenter(0.75, 'vertical');
-        },
         /**
          * #action
          */
@@ -3038,11 +2802,20 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             transaction(() => {
                 const colInView = (-self.scrollX + offsetX) / self.colWidth;
                 const rowInView = (-self.scrollY + offsetY) / self.rowHeight;
+                // zooming both axes, an axis holds at the default only while the
+                // other sits there too, or one would hold while the other grows
+                const canHold = axis !== 'both' ||
+                    (self.colWidth === defaultColWidth &&
+                        self.rowHeight === defaultRowHeight);
                 if (axis !== 'vertical') {
-                    self.colWidth = clamp(self.colWidth * scaleFactor, minColWidth, maxCellSize);
+                    const { value, held } = detentZoom(self.colWidth, scaleFactor, defaultColWidth, self.zoomHeld.col, minColWidth, canHold);
+                    self.colWidth = value;
+                    self.zoomHeld = { ...self.zoomHeld, col: held };
                 }
                 if (axis !== 'horizontal') {
-                    self.rowHeight = clamp(self.rowHeight * scaleFactor, minRowHeight, maxCellSize);
+                    const { value, held } = detentZoom(self.rowHeight, scaleFactor, defaultRowHeight, self.zoomHeld.row, minRowHeight, canHold);
+                    self.rowHeight = value;
+                    self.zoomHeld = { ...self.zoomHeld, row: held };
                 }
                 self.scrollX = clamp(offsetX - colInView * self.colWidth, self.maxScrollX, 0);
                 const anchoredScrollY = offsetY - rowInView * self.rowHeight;
@@ -3053,6 +2826,25 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 self.scrollY = clamp(anchoredScrollY * (1 - topBias), self.maxScrollY, 0);
             });
         },
+        /**
+         * #action
+         * zoomToPos for one wheel or pinch frame. The alignment keeps the blocks
+         * it drew at the start of the gesture, scaled, and redraws them only once
+         * they stop covering the viewport; endWheelZoom redraws them sharp
+         */
+        wheelZoomToPos(scaleFactor, offsetX, offsetY) {
+            self.zoomSnapshot ??= takeZoomSnapshot(self, false);
+            this.zoomToPos(scaleFactor, offsetX, offsetY, self.wheelZoomAxis);
+            if (!zoomSnapshotCovers(self, self.zoomSnapshot)) {
+                self.zoomSnapshot = takeZoomSnapshot(self, true);
+            }
+        },
+        /**
+         * #action
+         */
+        endWheelZoom() {
+            self.zoomSnapshot = undefined;
+        },
         /**
          * #action
          */
@@ -3077,15 +2869,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         setAnnotations(annotations) {
             self.annotations = annotations;
         },
-        /**
-         * #action
-         * set the overlay from raw InterProScan results keyed by row name. Kept
-         * for downstream plugins that hold the EBI wire format; new code should
-         * adapt to Annotation[] and call setAnnotations.
-         */
-        setDomains(data) {
-            this.setAnnotations(data ? interProScanToAnnotations(data) : []);
-        },
         applyGFFText(gffText) {
             this.setAnnotations(gffToAnnotations(parseGFF(gffText)));
         },
@@ -3140,8 +2923,23 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * #action
          */
         toggleTrack(id) {
-            const defaultOff = self.MSA?.tracks.find(t => t.id === id)?.defaultOff;
-            self.turnedOffTracks.set(id, !trackIsOff(self.turnedOffTracks, id, defaultOff));
+            self.turnedOffTracks.set(id, !trackIsOff(self.turnedOffTracks, id));
+        },
+        /**
+         * #action
+         * show or hide several tracks at once, as the track selector's Show all
+         * and Hide all do. A choice matching the track's default is dropped, so
+         * it stays out of the shared URL
+         */
+        setTracksShown(ids, shown) {
+            for (const id of ids) {
+                if (defaultOffTracks.has(id) === !shown) {
+                    self.turnedOffTracks.delete(id);
+                }
+                else {
+                    self.turnedOffTracks.set(id, !shown);
+                }
+            }
         },
         /**
          * #action
@@ -3166,7 +2964,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     column: column + 1,
                     row,
                     residue: self.visibleColToSeqPosOneBased(row, visibleCol),
-                    letter: self.rowMap.get(row)?.[column],
+                    letter: self.rowSequence(row)?.[column],
                 };
         },
         /**
@@ -3287,7 +3085,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          */
         get visibleDomainTypes() {
             return this.categoricalDomainTypes
-                .filter(d => !self.turnedOffFeatures.get(d.accession))
+                .filter(d => !self.featureOff(d.accession))
                 .toSorted((a, b) => a.start - b.start);
         },
         /**
@@ -3331,7 +3129,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     : visibleDomainTypes.map(d => ({
                         id: d.accession,
                         label: d.name,
-                        color: fillPalette[d.accession],
+                        color: d.color ?? fillPalette[d.accession],
                     })), 'domains');
             }
             for (const { channel, field, legend } of this.resolvedEncodings) {
@@ -3347,15 +3145,15 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         /**
          * #getter
          * whether the overlay marks each domain with a bar under its row instead
-         * of filling the row behind the letters. Letter-color mode hands the
-         * background to the color scheme, so a filled box would paint over it and
-         * leave the setting with nothing to show. Sub-row layout already stacks
+         * of filling the row behind the letters: whenever the domains do not own
+         * the cell fill (`cellFill`), a filled box would paint over the residue
+         * colors the user picked. Sub-row layout already stacks
          * the boxes clear of the letters, and with the letters too small to draw
          * the filled box is the only thing left to read.
          */
         get domainUnderline() {
             return (self.actuallyShowDomains &&
-                !self.bgColor &&
+                self.cellFill !== 'domain' &&
                 !self.subFeatureRows &&
                 self.showMsaLetters);
         },
@@ -3567,7 +3365,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          * to `end`, gaps included
          */
         get selectionFasta() {
-            const { rowNames, rowMap } = self;
+            const { rowNames } = self;
             const resolved = this.resolvedSelection;
             const span = this.selectionFileSpan;
             if (!resolved || !span) {
@@ -3576,7 +3374,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             const rows = resolved.rowRuns
                 .flatMap(([first, last]) => rowNames.slice(first, last + 1))
                 .flatMap(name => {
-                const seq = rowMap.get(name);
+                const seq = self.rowSequence(name);
                 return seq === undefined ? [] : [[name, seq]];
             });
             return blockFasta(rows, span.start, span.end);
@@ -3655,7 +3453,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                             this.visibleDomainTypes.map(d => ({
                                 id: d.accession,
                                 label: d.name,
-                                color: fillPalette[d.accession],
+                                color: d.color ?? fillPalette[d.accession],
                             })),
                     };
                 }
@@ -3804,6 +3602,18 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         setHideHeader(arg) {
             self.hideHeader = arg;
         },
+        /**
+         * #action
+         */
+        setEmbeddedMode(arg) {
+            self.embeddedMode = arg;
+        },
+        /**
+         * #action
+         */
+        setImportForm(arg) {
+            self.importForm = arg;
+        },
         /**
          * #action
          * focus the subtree a click `y` pixels down the tree overview lands on.
@@ -3862,15 +3672,16 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         },
         /**
          * #action
-         * show or hide an annotation type. Only hidden types are recorded; see
-         * `turnedOffFeatures`
+         * show or hide an annotation type. Only a choice that differs from the
+         * type's default is recorded; see `turnedOffFeatures`
          */
         setFilter(accession, shown) {
-            if (shown) {
-                self.turnedOffFeatures.delete(accession);
+            // only a departure from the accession's default is recorded
+            if (shown === self.defaultOffAccessions.has(accession)) {
+                self.turnedOffFeatures.set(accession, !shown);
             }
             else {
-                self.turnedOffFeatures.set(accession, true);
+                self.turnedOffFeatures.delete(accession);
             }
         },
         /**
@@ -3878,20 +3689,23 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          */
         fit() {
             // two passes: each direction's viewport depends on whether the other
-            // overflows (the minimap takes height, the vertical scrollbar width)
+            // overflows (the minimap takes height, the vertical scrollbar width).
+            // Fit shrinks an alignment into the window but never grows one past
+            // the default cell size, which would stretch a small alignment's rows
+            // and columns out of proportion
             transaction(() => {
                 for (let pass = 0; pass < 2; pass++) {
-                    this.fitHorizontally();
-                    this.fitVertically();
+                    this.fitHorizontally(defaultColWidth);
+                    this.fitVertically(defaultRowHeight);
                 }
             });
         },
         /**
          * #action
          */
-        fitVertically() {
+        fitVertically(maxRowHeight = maxCellSize) {
             if (self.numRows > 0) {
-                self.rowHeight = clamp(self.msaAreaHeight / self.numRows, minRowHeight, maxCellSize);
+                self.setRowHeight(clamp(self.msaAreaHeight / self.numRows, minRowHeight, maxRowHeight));
             }
             self.scrollY = 0;
         },
@@ -3907,10 +3721,28 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 return;
             }
             transaction(() => {
-                self.colWidth = clamp(self.msaCanvasWidth / (span.endCol - span.startCol + 1), minColWidth, maxCellSize);
+                self.setColWidth(clamp(self.msaCanvasWidth / (span.endCol - span.startCol + 1), minColWidth, maxCellSize));
                 self.scrollX = clamp(-span.startCol * self.colWidth, self.maxScrollX, 0);
             });
         },
+        /**
+         * #action
+         * zoomToRegion, and for a region naming a row, also scroll that row to
+         * the middle of the alignment, as Go to does. What `region` opens on; a
+         * caller following a range as it moves wants zoomToRegion alone, which
+         * leaves the reader's vertical scroll where they put it.
+         */
+        revealRegion(region) {
+            transaction(() => {
+                this.zoomToRegion(region);
+                const row = region.row === undefined
+                    ? undefined
+                    : self.rowNamesSet.get(region.row);
+                if (row !== undefined && self.viewInitialized) {
+                    self.setScrollY(-(row + 0.5) * self.rowHeight + self.msaAreaHeight / 2);
+                }
+            });
+        },
         /**
          * #action
          * zoom and scroll so the selected columns fill the alignment's width,
@@ -3927,7 +3759,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     const { rowRuns } = resolvedSelection;
                     const first = rowRuns[0][0];
                     const last = rowRuns.at(-1)[1];
-                    self.rowHeight = clamp(self.msaAreaHeight / (last - first + 1), minRowHeight, maxCellSize);
+                    self.setRowHeight(clamp(self.msaAreaHeight / (last - first + 1), minRowHeight, maxCellSize));
                     self.scrollY = clamp(-first * self.rowHeight, self.maxScrollY, 0);
                 }
             });
@@ -3959,10 +3791,10 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         /**
          * #action
          */
-        fitHorizontally() {
+        fitHorizontally(maxColWidth = maxCellSize) {
             if (self.numColumns > 0) {
                 // msaCanvasWidth excludes the vertical scrollbar's 20px
-                self.colWidth = clamp(self.msaCanvasWidth / self.numColumns, minColWidth, maxCellSize);
+                self.setColWidth(clamp(self.msaCanvasWidth / self.numColumns, minColWidth, maxColWidth));
             }
             self.scrollX = 0;
         },
@@ -3970,17 +3802,13 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             if (self.highlightColumns?.length) {
                 self.setHighlightedColumns(self.highlightColumns);
             }
-            // The `collapse`, `focus` and `rotate` clade marks seed the collapsed
-            // list, the subtree in focus and the rotated nodes, which the tree,
-            // `hideGapsEffective` and the alignment all read. The tree arrives with
-            // the model for inline data and later for a filehandle, so the seeding
-            // waits for it and then runs once per data load, per change of
-            // `clades` and per reroot, which clears the node ids the seeding
-            // wrote: expanding a seeded clade sticks until one of those changes.
-            // `dataInitialized` is true once the MSA alone has loaded, when the
-            // tree is still the flat stub, so a tree filehandle holds the seeding
-            // until its text lands.
-            addDisposer(self, reaction(() => self.dataInitialized && !(self.treeFilehandle && !self.data.tree)
+            const awaitingTree = () => !!self.treeFilehandle && !self.data.tree;
+            // `collapse`, `focus` and `rotate` marks seed `collapsed`, `showOnly`
+            // and `rotated`. Seeding runs once per data load, `clades` change and
+            // reroot, so expanding a seeded clade sticks until one of those. A tree
+            // filehandle holds it back, since `dataInitialized` is true while the
+            // tree is still the flat stub.
+            addDisposer(self, reaction(() => self.dataInitialized && !awaitingTree()
                 ? { clades: getSnapshot(self.clades), treeRoot: self.treeRoot }
                 : undefined, seed => {
                 if (!seed?.clades.length) {
@@ -4010,8 +3838,8 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 if (region &&
                     self.viewInitialized &&
                     self.numColumns > 0 &&
-                    !(self.treeFilehandle && !self.data.tree)) {
-                    this.zoomToRegion(region);
+                    !awaitingTree()) {
+                    this.revealRegion(region);
                     self.setRegion(undefined);
                 }
             }));
@@ -4032,87 +3860,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     mql.removeEventListener('change', onChange);
                 });
             }
-            /**
-             * Fetch a filehandle whenever it changes, and hand the text to
-             * `onLoad`.
-             *
-             * A generation guard keeps a slower superseded request from overwriting
-             * the newer one's data, status or loading flag. A superseded or cleared
-             * request is aborted and clears its status line.
-             *
-             * `clearFilehandle` runs after a local file loads, since a blob has no
-             * URL to refetch, and when the user cancels, which returns the view to
-             * the import form.
-             *
-             * `what` names the layer in a failure message. An `optional` layer
-             * (annotations, row metadata) that fails adds a warning instead of an
-             * error.
-             */
-            const loadOnFilehandleChange = ({ what, getFilehandle, onLoad, setLoading, clearFilehandle, optional = false, }) => {
-                let generation = 0;
-                let cancelInFlight;
-                addDisposer(self, () => {
-                    cancelInFlight?.();
-                });
-                addDisposer(self, autorun(async () => {
-                    const filehandle = getFilehandle();
-                    const current = ++generation;
-                    cancelInFlight?.();
-                    cancelInFlight = undefined;
-                    if (!filehandle) {
-                        setLoading?.(false);
-                        return;
-                    }
-                    const isCurrent = () => current === generation && isAlive(self);
-                    const controller = new AbortController();
-                    cancelInFlight = () => {
-                        controller.abort();
-                        if (isAlive(self)) {
-                            self.setStatus(undefined);
-                        }
-                    };
-                    try {
-                        setLoading?.(true);
-                        self.setError(undefined);
-                        const text = await fetchTextWithProgress(openLocation(filehandle), status => {
-                            if (isCurrent()) {
-                                self.setStatus(status);
-                            }
-                        }, { controller });
-                        if (isCurrent()) {
-                            transaction(() => {
-                                onLoad(text);
-                                if (filehandle.locationType === 'BlobLocation') {
-                                    clearFilehandle?.();
-                                }
-                            });
-                        }
-                    }
-                    catch (e) {
-                        if (isCurrent()) {
-                            if (isAbortError(e)) {
-                                clearFilehandle?.();
-                            }
-                            else {
-                                console.error(e);
-                                if (optional) {
-                                    self.addWarning(`The ${what} did not load: ${e}`);
-                                }
-                                else {
-                                    self.setError(e);
-                                }
-                            }
-                        }
-                    }
-                    finally {
-                        if (isCurrent()) {
-                            cancelInFlight = undefined;
-                            setLoading?.(false);
-                        }
-                    }
-                }));
-            };
-            loadOnFilehandleChange({
+            installFilehandleLoader(self, {
                 what: 'tree',
                 getFilehandle: () => self.treeFilehandle,
                 onLoad: text => {
@@ -4126,7 +3874,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 },
             });
             // treeMetadata has no import-form step, so no loading flag or cancel
-            loadOnFilehandleChange({
+            installFilehandleLoader(self, {
                 what: 'row metadata',
                 optional: true,
                 getFilehandle: () => self.treeMetadataFilehandle,
@@ -4155,7 +3903,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 }
             }));
             // gffFilehandle loads into data.gff, which the autorun above parses
-            loadOnFilehandleChange({
+            installFilehandleLoader(self, {
                 what: 'annotations',
                 optional: true,
                 getFilehandle: () => self.gffFilehandle,
@@ -4166,7 +3914,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     self.setGFFFilehandle(undefined);
                 },
             });
-            loadOnFilehandleChange({
+            installFilehandleLoader(self, {
                 what: 'alignment',
                 getFilehandle: () => self.msaFilehandle,
                 onLoad: text => {
@@ -4187,20 +3935,12 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             // xref problem https://github.com/GMOD/react-msaview/issues/75
             addDisposer(self, autorun(() => {
                 if (self.dynamicColorSchemeName) {
-                    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
-                    self.colStats;
+                    readComputed(self.colStats);
                 }
                 if (self.showColumnStats) {
-                    // everything the hover tooltip reads per column
-                    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
-                    self.colStats;
-                    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
-                    self.conservation;
-                    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
-                    self.propertyConservation;
+                    readComputed(self.colStats, self.conservation, self.propertyConservation);
                 }
-                // eslint-disable-next-line  @typescript-eslint/no-unused-expressions
-                self.columns;
+                readComputed(self.columns);
             }));
         },
     }))