react-msaview 9.1.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, 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';
@@ -14,38 +13,34 @@ import { packDomainLanes } from './components/msa/packDomainLanes.js';
 import { visibleColRange } from './components/msa/visibleColRange.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 { collapse, find, forEachDescendant, hierarchy, layoutTree, leafIndex, leaves, mrca, nodeCoveringRows, 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.
@@ -69,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);
@@ -301,6 +116,7 @@ export const preservedOnReset = new Set([
     'drawNodeBubbles',
     'drawNodeLabels',
     'showTreeOverview',
+    'showTreeScaleBar',
     'overviewHeight',
     'turnedOffTracks',
     'trackHeights',
@@ -308,212 +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 = [];
-/**
- * Each tip of the full tree in the order the tree draws it, with the on-screen
- * row that shows it: its own, or the row of the collapsed node standing for it
- */
-function tipRows(root) {
-    const rows = new Map();
-    let row = 0;
-    const pushReversed = (stack, nodes) => {
-        for (let i = nodes.length - 1; i >= 0; i--) {
-            stack.push(nodes[i]);
-        }
-    };
-    const stack = [root];
-    while (stack.length > 0) {
-        const node = stack.pop();
-        if (node.children?.length) {
-            pushReversed(stack, node.children);
-        }
-        else {
-            const hidden = [node];
-            while (hidden.length > 0) {
-                const tip = hidden.pop();
-                const kids = tip.children ?? tip._children;
-                if (kids?.length) {
-                    pushReversed(hidden, kids);
-                }
-                else {
-                    rows.set(tip.data.name, { order: rows.size, row });
-                }
-            }
-            row++;
-        }
-    }
-    return rows;
-}
-/**
- * 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. A `range` counts its tips in the order
- * `tips` gives them, so a collapsed clade inside it counts every leaf it
- * stands for. `index` is the memoized leaf pass over the tree.
- */
-function cladeRows(clade, root, index, tips) {
-    if (clade.range) {
-        const [a, b] = clade.range.map(name => index.get(name) ? tips.get(name) : undefined);
-        if (a === undefined || b === undefined) {
-            return undefined;
-        }
-        const [first, last] = a.order <= b.order ? [a, b] : [b, a];
-        return last.order - first.order + 1 === clade.tips
-            ? { rows: [first.row, last.row] }
-            : undefined;
-    }
-    const node = clade.mrca ? mrca(root, clade.mrca, index) : undefined;
-    if (!node) {
-        return undefined;
-    }
-    const nodeTips = leaves(node);
-    if (nodeTips.length !== clade.tips) {
-        return undefined;
-    }
-    let first = Infinity;
-    let last = -Infinity;
-    for (const tip of nodeTips) {
-        const row = tips.get(tip.data.name)?.row;
-        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 rows of
- * `displayed`, the tree as drawn. 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, displayed) {
-    const index = leafIndex(root);
-    const tips = tipRows(displayed);
-    return clades.flatMap(clade => {
-        const resolved = cladeRows(clade, root, index, tips);
-        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 its xMin/xMax in a layout one
-// row per tip
-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',
@@ -538,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.
@@ -569,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
  *
@@ -619,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
@@ -647,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
@@ -771,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), {}),
         /**
@@ -854,6 +491,18 @@ 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
@@ -875,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
          */
@@ -1019,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
@@ -1156,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
@@ -1183,6 +862,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          */
         setRowHeight(n) {
             self.rowHeight = n;
+            self.zoomHeld = { ...self.zoomHeld, row: 0 };
         },
         /**
          * #action
@@ -1190,6 +870,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
          */
         setColWidth(n) {
             self.colWidth = n;
+            self.zoomHeld = { ...self.zoomHeld, col: 0 };
         },
         /**
          * #action
@@ -1340,22 +1021,6 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     self.showOnly !== undefined ||
                     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;
-        },
         /**
          * #getter
          * whether the host restores the loaded documents outside the snapshot.
@@ -1380,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 => ({
@@ -1427,7 +1092,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
             return !!this.tree.noTree;
         },
         get noDomains() {
-            return self.allAnnotations.length === 0;
+            return this.allAnnotations.length === 0;
         },
         /**
          * #getter
@@ -1528,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
          */
@@ -2056,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).
@@ -2433,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
@@ -2722,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);
@@ -2739,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);
         },
         /**
@@ -2789,8 +2493,38 @@ 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() {
             const { rowNamesSet } = self;
@@ -2866,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
          */
@@ -3062,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;
@@ -3077,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
          */
@@ -3155,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
@@ -3302,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);
         },
         /**
@@ -3362,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);
         },
@@ -3819,6 +3602,12 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
         setHideHeader(arg) {
             self.hideHeader = arg;
         },
+        /**
+         * #action
+         */
+        setEmbeddedMode(arg) {
+            self.embeddedMode = arg;
+        },
         /**
          * #action
          */
@@ -3883,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);
             }
         },
         /**
@@ -3899,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;
         },
@@ -3928,7 +3721,7 @@ 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);
             });
         },
@@ -3966,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);
                 }
             });
@@ -3998,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;
         },
@@ -4009,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) {
@@ -4049,7 +3838,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                 if (region &&
                     self.viewInitialized &&
                     self.numColumns > 0 &&
-                    !(self.treeFilehandle && !self.data.tree)) {
+                    !awaitingTree()) {
                     this.revealRegion(region);
                     self.setRegion(undefined);
                 }
@@ -4071,89 +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);
-                        if (!optional) {
-                            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 => {
@@ -4167,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,
@@ -4196,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,
@@ -4207,7 +3914,7 @@ function stateModelFactory({ maxInlineSnapshotBytes = defaultMaxInlineSnapshotBy
                     self.setGFFFilehandle(undefined);
                 },
             });
-            loadOnFilehandleChange({
+            installFilehandleLoader(self, {
                 what: 'alignment',
                 getFilehandle: () => self.msaFilehandle,
                 onLoad: text => {
@@ -4228,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);
             }));
         },
     }))