react-msaview 5.2.0 → 5.2.1

package/dist/model.js

@@ -10,7 +10,7 @@ import { clustalXColumnColors } from "./clustalX.js";
 import colorSchemes from "./colorSchemes.js";
 import ConservationTrack from "./components/ConservationTrack.js";
 import TextTrack from "./components/TextTrack.js";
-import { defaultAllowedGappyness, defaultBgColor, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawLabels, defaultDrawMsaLetters, defaultDrawNodeBubbles, defaultDrawTree, defaultHeight, defaultHideGaps, defaultLabelsAlignRight, defaultRowHeight, defaultScrollX, defaultScrollY, defaultShowBranchLen, defaultShowDomains, defaultSubFeatureRows, defaultTreeAreaWidth, defaultTreeWidth, } from "./constants.js";
+import { defaultAllowedGappyness, defaultBgColor, defaultColWidth, defaultColorSchemeName, defaultCurrentAlignment, defaultDrawLabels, defaultDrawMsaLetters, defaultDrawNodeBubbles, defaultDrawTree, defaultHeight, defaultHideGaps, defaultLabelsAlignRight, defaultRowHeight, defaultScrollX, defaultScrollY, defaultScrollZoom, defaultShowBranchLen, defaultShowDomains, defaultSubFeatureRows, defaultTreeAreaWidth, defaultTreeWidth, maxCellSize, minColWidth, minRowHeight, } from "./constants.js";
 import { createPaletteMap } from "./createPaletteMap.js";
 import { flatToTree } from "./flatToTree.js";
 import { calcDepthToLeaf, clusterLayout, collapse, find, findMaxBranchLen, hierarchy, leaves, links, maxLength, setBrLength, sort, sum as hierarchySum, } from "./hierarchy.js";
@@ -23,14 +23,25 @@ import { calculateNeighborJoiningTree } from "./neighborJoining.js";
 import { parseAsn1 } from "./parseAsn1.js";
 import { globalColToVisibleCol, visibleColToGlobalCol, visibleColToSeqPosForRow, } from "./rowCoordinateCalculations.js";
 import { seqPosToGlobalCol } from "./seqPosToGlobalCol.js";
-import { len, skipBlanks } from "./util.js";
+import { computeRowInsertions, len, skipBlanks, transform } from "./util.js";
 import { saveAs } from "./vendor/fileSaver.js";
+function parseTreeText(text) {
+    if (text.startsWith('BioTreeContainer')) {
+        return flatToTree(parseAsn1(text));
+    }
+    return parseNewick(text.startsWith('SEQ') ? parseEmfTree(text).tree : text);
+}
 /**
  * #stateModel MsaView
- * extends
- * - [DialogQueueSessionMixin](../dialogqueuesessionmixin)
- * - [MSAModel](../msamodel)
- * - [Tree](../tree)
+ * #example
+ * ```js
+ * import { MSAModelF } from 'react-msaview'
+ * import { types } from '@jbrowse/mobx-state-tree'
+ *
+ * const RootModel = types.model({ view: types.optional(MSAModelF(), {}) })
+ * const root = RootModel.create({})
+ * root.view.setData({ msa: '>seq1\nACGT\n>seq2\nACGT' })
+ * ```
  */
 function stateModelFactory() {
     return types
@@ -65,6 +76,11 @@ function stateModelFactory() {
          * #property
          */
         drawMsaLetters: defaultDrawMsaLetters,
+        /**
+         * #property
+         * zoom in/out on plain mouse-wheel without holding ctrl
+         */
+        scrollZoom: defaultScrollZoom,
         /**
          * #property
          * height of the div containing the view, px
@@ -162,9 +178,10 @@ function stateModelFactory() {
         /**
          * #volatile
          * high resolution scale factor, helps make canvas look better on hi-dpi
-         * screens
+         * screens. derived from the device pixel ratio so canvases are crisp on
+         * retina/4k displays and not needlessly oversized on standard ones
          */
-        highResScaleFactor: 2,
+        highResScaleFactor: typeof window === 'undefined' ? 1 : window.devicePixelRatio,
         /**
          * #volatile
          */
@@ -276,6 +293,14 @@ function stateModelFactory() {
         setWidth(arg) {
             self.volatileWidth = arg;
         },
+        /**
+         * #action
+         * high-res scale factor, tracks the device pixel ratio so canvases stay
+         * crisp when the window moves between monitors or the browser zooms
+         */
+        setHighResScaleFactor(arg) {
+            self.highResScaleFactor = arg;
+        },
         /**
          * #action
          * set the height of the view in px
@@ -302,23 +327,6 @@ function stateModelFactory() {
             self.mouseCol = col;
             self.mouseRow = row;
         },
-        /**
-         * #action
-         * set hovered tree node and its descendants
-         */
-        setHoveredTreeNode(nodeId) {
-            if (!nodeId) {
-                self.hoveredTreeNode = undefined;
-                return;
-            }
-            const node = find(self.hierarchy, n => n.data.id === nodeId);
-            if (!node) {
-                self.hoveredTreeNode = undefined;
-                return;
-            }
-            const descendantNames = leaves(node).map(leaf => leaf.data.name);
-            self.hoveredTreeNode = { nodeId, descendantNames };
-        },
         /**
          * #action
          * set highlighted columns
@@ -484,13 +492,16 @@ function stateModelFactory() {
          * #getter
          */
         get colorScheme() {
-            return colorSchemes[self.colorSchemeName];
+            // colorSchemeName is a free string (menus, snapshots, URL params); fall
+            // back to the default rather than returning undefined on a stale name
+            return (colorSchemes[self.colorSchemeName] ??
+                colorSchemes[defaultColorSchemeName]);
         },
         /**
          * #getter
          */
         get header() {
-            return (this.MSA?.getHeader() ?? {});
+            return this.MSA?.getHeader() ?? {};
         },
         /**
          * #getter
@@ -537,19 +548,14 @@ function stateModelFactory() {
         get tree() {
             const text = self.data.tree;
             return text
-                ? generateNodeIds(text.startsWith('BioTreeContainer')
-                    ? flatToTree(parseAsn1(text))
-                    : parseNewick(text.startsWith('SEQ') ? parseEmfTree(text).tree : text))
-                : this.MSA?.getTree() || {
+                ? generateNodeIds(parseTreeText(text))
+                : (this.MSA?.getTree() ?? {
                     noTree: true,
                     children: [],
                     id: 'empty',
                     name: 'empty',
-                };
+                });
         },
-        /**
-         * #getter
-         */
         /**
          * #getter
          * Returns the list of row (sequence) names in display order.
@@ -562,11 +568,7 @@ function stateModelFactory() {
          * #getter
          */
         get rowNamesSet() {
-            const map = new Map();
-            this.leaves.forEach((leaf, index) => {
-                map.set(leaf.data.name, index);
-            });
-            return map;
+            return new Map(this.leaves.map((leaf, index) => [leaf.data.name, index]));
         },
         /**
          * #getter
@@ -583,24 +585,16 @@ function stateModelFactory() {
          */
         get hoveredInsertion() {
             const { mouseCol, mouseRow } = self;
-            if (mouseCol === undefined || mouseRow === undefined) {
-                return undefined;
-            }
-            const rowName = this.leaves[mouseRow]?.data.name;
-            if (!rowName) {
-                return undefined;
-            }
-            const insertions = this.insertionPositions.get(rowName);
-            if (!insertions) {
-                return undefined;
-            }
-            const insertion = insertions.find(ins => ins.pos === mouseCol);
-            if (insertion) {
-                return {
-                    rowName,
-                    col: mouseCol,
-                    letters: insertion.letters,
-                };
+            if (mouseCol !== undefined && mouseRow !== undefined) {
+                const rowName = this.leaves[mouseRow]?.data.name;
+                if (rowName) {
+                    const insertion = this.insertionPositions
+                        .get(rowName)
+                        ?.find(ins => ins.pos === mouseCol);
+                    if (insertion) {
+                        return { rowName, col: mouseCol, letters: insertion.letters };
+                    }
+                }
             }
             return undefined;
         },
@@ -619,14 +613,13 @@ function stateModelFactory() {
             }
             for (const collapsedId of self.collapsed) {
                 const node = find(hier, n => n.data.id === collapsedId);
-                if (!node) {
-                    continue;
-                }
-                if (node.children) {
-                    collapse(node);
-                }
-                else if (node.parent?.children) {
-                    node.parent.children = node.parent.children.filter(c => c.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;
@@ -636,7 +629,7 @@ function stateModelFactory() {
          * widget width minus the tree area gives the space for the MSA
          */
         get msaAreaWidth() {
-            return self.width - self.treeAreaWidth;
+            return self.width - self.treeAreaWidth - self.resizeHandleWidth;
         },
         /**
          * #getter
@@ -690,51 +683,13 @@ function stateModelFactory() {
          * Returns a map of row name to array of insertions with display position and letters
          */
         get insertionPositions() {
-            const { hideGapsEffective } = self;
             const { blanks, rows } = this;
-            const blanksLen = blanks.length;
-            if (blanksLen === 0 || !hideGapsEffective) {
+            if (blanks.length === 0 || !self.hideGapsEffective) {
                 return new Map();
             }
             const result = new Map();
             for (const [name, seq] of rows) {
-                const insertions = [];
-                let displayPos = 0;
-                let blankIdx = 0;
-                let currentInsertPos = -1;
-                let letterChars = [];
-                const seqLen = seq.length;
-                for (let i = 0; i < seqLen; i++) {
-                    if (blankIdx < blanksLen && blanks[blankIdx] === i) {
-                        // bit trick: (code - 45) >>> 0 <= 1 checks for '-' (45) or '.' (46)
-                        const code = seq.charCodeAt(i);
-                        if (!((code - 45) >>> 0 <= 1)) {
-                            if (currentInsertPos === displayPos) {
-                                letterChars.push(seq[i]);
-                            }
-                            else {
-                                if (letterChars.length > 0) {
-                                    insertions.push({
-                                        pos: currentInsertPos,
-                                        letters: letterChars.join(''),
-                                    });
-                                }
-                                currentInsertPos = displayPos;
-                                letterChars = [seq[i]];
-                            }
-                        }
-                        blankIdx++;
-                    }
-                    else {
-                        displayPos++;
-                    }
-                }
-                if (letterChars.length > 0) {
-                    insertions.push({
-                        pos: currentInsertPos,
-                        letters: letterChars.join(''),
-                    });
-                }
+                const insertions = computeRowInsertions(blanks, seq);
                 if (insertions.length > 0) {
                     result.set(name, insertions);
                 }
@@ -766,16 +721,15 @@ function stateModelFactory() {
          * #getter
          */
         get columns() {
-            return new Map(this.rows.map((row, index) => [row[0], this.columns2d[index]]));
+            const columns2d = this.columns2d;
+            return new Map(this.rows.map((row, index) => [row[0], columns2d[index]]));
         },
         /**
          * #getter
          */
         get columns2d() {
             const { hideGapsEffective } = self;
-            return this.rows
-                .map(r => r[1])
-                .map(str => (hideGapsEffective
+            return this.rows.map(([, str]) => (hideGapsEffective
                 ? skipBlanks(this.blanks, str)
                 : str).toUpperCase());
         },
@@ -804,13 +758,7 @@ function stateModelFactory() {
          * #getter
          */
         get colStatsSums() {
-            return this.colStats.map(col => {
-                let s = 0;
-                for (const k in col) {
-                    s += col[k];
-                }
-                return s;
-            });
+            return this.colStats.map(col => sum(Object.values(col)));
         },
         /**
          * #getter
@@ -826,17 +774,13 @@ function stateModelFactory() {
                     }
                 }
             }
+            // 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']);
-            const isDna = [...letters].every(l => dna.has(l));
-            const isRna = [...letters].every(l => rna.has(l));
-            if (isDna && !letters.has('U')) {
-                return 'dna';
-            }
-            if (isRna && !letters.has('T')) {
-                return 'rna';
-            }
-            return 'amino';
+            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';
         },
         /**
          * #getter
@@ -849,8 +793,7 @@ function stateModelFactory() {
                 const total = colStatsSums[i];
                 let maxCount = 0;
                 let letter = '';
-                for (const key in stats) {
-                    const val = stats[key];
+                for (const [key, val] of Object.entries(stats)) {
                     if (val > maxCount && key !== '-' && key !== '.') {
                         maxCount = val;
                         letter = key;
@@ -896,12 +839,9 @@ function stateModelFactory() {
                     return 0;
                 }
                 let entropy = 0;
-                for (const letter of Object.keys(stats)) {
-                    if (letter === '-' || letter === '.') {
-                        continue;
-                    }
-                    const freq = stats[letter] / nonGapTotal;
-                    if (freq > 0) {
+                for (const [letter, count] of Object.entries(stats)) {
+                    if (letter !== '-' && letter !== '.') {
+                        const freq = count / nonGapTotal;
                         entropy -= freq * Math.log2(freq);
                     }
                 }
@@ -918,7 +858,8 @@ function stateModelFactory() {
             const r = this.root;
             clusterLayout(r, this.totalHeight, self.treeWidth);
             r.data.length = 0;
-            setBrLength(r, 0, self.treeWidth / maxLength(r));
+            const max = maxLength(r);
+            setBrLength(r, 0, max ? self.treeWidth / max : 0);
             return r;
         },
         /**
@@ -974,7 +915,7 @@ function stateModelFactory() {
          * #getter
          */
         get dataInitialized() {
-            return (self.data.msa || self.data.tree) && !self.error;
+            return (self.data.msa !== '' || self.data.tree !== '') && !self.error;
         },
         /**
          * #getter
@@ -1018,6 +959,18 @@ function stateModelFactory() {
         get maxScrollX() {
             return Math.min(-self.totalWidth + (self.msaAreaWidth - 100), 0);
         },
+        /**
+         * #getter
+         * most-negative allowed scrollY, keeping the last row in view rather than
+         * letting the whole alignment scroll off the top. visible MSA height is
+         * computed inline here because msaAreaHeight is defined later in the chain.
+         */
+        get maxScrollY() {
+            const visibleHeight = self.height -
+                self.headerHeight -
+                (self.msaAreaWidth < self.totalWidth ? self.minimapHeight : 0);
+            return Math.min(-self.totalHeight + visibleHeight, 0);
+        },
         /**
          * #getter
          */
@@ -1040,6 +993,30 @@ function stateModelFactory() {
         setDrawMsaLetters(arg) {
             self.drawMsaLetters = arg;
         },
+        /**
+         * #action
+         */
+        setScrollZoom(arg) {
+            self.scrollZoom = arg;
+        },
+        /**
+         * #action
+         * set hovered tree node and its descendants
+         */
+        setHoveredTreeNode(nodeId) {
+            if (nodeId) {
+                const node = find(self.hierarchy, n => n.data.id === nodeId);
+                self.hoveredTreeNode = node
+                    ? {
+                        nodeId,
+                        descendantNames: leaves(node).map(leaf => leaf.data.name),
+                    }
+                    : undefined;
+            }
+            else {
+                self.hoveredTreeNode = undefined;
+            }
+        },
         /**
          * #action
          * Calculate a neighbor joining tree from the current MSA using BLOSUM62 distances
@@ -1062,35 +1039,35 @@ function stateModelFactory() {
          * #action
          */
         zoomOutHorizontal() {
-            self.colWidth = Math.max(1, Math.floor(self.colWidth * 0.75));
+            self.colWidth = Math.max(minColWidth, Math.floor(self.colWidth * 0.75));
             self.scrollX = clamp(self.scrollX, self.maxScrollX, 0);
         },
         /**
          * #action
          */
         zoomInHorizontal() {
-            self.colWidth = Math.ceil(self.colWidth * 1.5);
+            self.colWidth = Math.min(maxCellSize, Math.ceil(self.colWidth * 1.5));
             self.scrollX = clamp(self.scrollX, self.maxScrollX, 0);
         },
         /**
          * #action
          */
         zoomInVertical() {
-            self.rowHeight = Math.ceil(self.rowHeight * 1.5);
+            self.rowHeight = Math.min(maxCellSize, Math.ceil(self.rowHeight * 1.5));
         },
         /**
          * #action
          */
         zoomOutVertical() {
-            self.rowHeight = Math.max(1.5, Math.floor(self.rowHeight * 0.75));
+            self.rowHeight = Math.max(minRowHeight, Math.floor(self.rowHeight * 0.75));
         },
         /**
          * #action
          */
         zoomIn() {
             transaction(() => {
-                self.colWidth = Math.ceil(self.colWidth * 1.5);
-                self.rowHeight = Math.ceil(self.rowHeight * 1.5);
+                self.colWidth = Math.min(maxCellSize, Math.ceil(self.colWidth * 1.5));
+                self.rowHeight = Math.min(maxCellSize, Math.ceil(self.rowHeight * 1.5));
                 self.scrollX = clamp(self.scrollX, self.maxScrollX, 0);
             });
         },
@@ -1099,25 +1076,53 @@ function stateModelFactory() {
          */
         zoomOut() {
             transaction(() => {
-                self.colWidth = Math.max(1, Math.floor(self.colWidth * 0.75));
-                self.rowHeight = Math.max(1.5, Math.floor(self.rowHeight * 0.75));
+                self.colWidth = Math.max(minColWidth, Math.floor(self.colWidth * 0.75));
+                self.rowHeight = Math.max(minRowHeight, Math.floor(self.rowHeight * 0.75));
                 self.scrollX = clamp(self.scrollX, self.maxScrollX, 0);
             });
         },
+        /**
+         * #action
+         * Smoothly zoom by a continuous scaleFactor. The column under the cursor
+         * (offsetX/offsetY, px relative to the MSA area) stays anchored
+         * horizontally. Vertically the anchor is biased toward the top: when the
+         * alignment nearly fits the viewport, snap to y=0 rather than pinning a
+         * random row under the cursor, with the bias fading out as the alignment
+         * grows taller than the viewport (where cursor-anchoring is useful).
+         * Drives wheel/trackpad-pinch zoom.
+         */
+        zoomToPos(scaleFactor, offsetX, offsetY) {
+            transaction(() => {
+                const colInView = (-self.scrollX + offsetX) / self.colWidth;
+                const rowInView = (-self.scrollY + offsetY) / self.rowHeight;
+                self.colWidth = clamp(self.colWidth * scaleFactor, minColWidth, maxCellSize);
+                self.rowHeight = clamp(self.rowHeight * scaleFactor, minRowHeight, maxCellSize);
+                self.scrollX = clamp(offsetX - colInView * self.colWidth, self.maxScrollX, 0);
+                const anchoredScrollY = offsetY - rowInView * self.rowHeight;
+                const overflow = Math.max(0, self.totalHeight - self.height);
+                const topBias = self.height > 0 ? clamp(1 - overflow / self.height, 0, 1) : 0;
+                self.scrollY = clamp(anchoredScrollY * (1 - topBias), self.maxScrollY, 0);
+            });
+        },
         /**
          * #action
          */
         doScrollY(deltaY) {
-            self.scrollY = clamp(self.scrollY + deltaY, -self.totalHeight + 10, 0);
+            self.scrollY = clamp(self.scrollY + deltaY, self.maxScrollY, 0);
         },
-        setInterProAnnotations(data) {
+        /**
+         * #action
+         * Set domain annotations and reveal the overlay in a single step (or clear
+         * both when passed undefined). Shared by every domain source: InterProScan,
+         * GFF, user-provided uploads, and NCBI CDD.
+         */
+        setDomains(data) {
             self.interProAnnotations = data;
+            self.setShowDomains(!!data);
         },
         applyGFFText(gffText) {
             const gffRecords = parseGFF(gffText);
-            const interProResults = gffToInterProResults(gffRecords);
-            self.interProAnnotations = interProResults;
-            self.setShowDomains(true);
+            this.setDomains(gffToInterProResults(gffRecords));
         },
         /**
          * #action
@@ -1155,14 +1160,13 @@ function stateModelFactory() {
          */
         get labelWidthMap() {
             const { rowHeight, leaves, treeMetadata, fontSize } = self;
-            if (rowHeight <= 5) {
-                return new Map();
-            }
-            return new Map(leaves.map(node => {
-                const { name } = node.data;
-                const displayName = treeMetadata[name]?.genome || name;
-                return [name, measureTextCanvas(displayName, fontSize)];
-            }));
+            return rowHeight <= 5
+                ? new Map()
+                : new Map(leaves.map(node => {
+                    const { name } = node.data;
+                    const displayName = treeMetadata[name]?.genome ?? name;
+                    return [name, measureTextCanvas(displayName, fontSize)];
+                }));
         },
         get labelsWidth() {
             const widths = this.labelWidthMap;
@@ -1185,15 +1189,13 @@ function stateModelFactory() {
          */
         get adapterTrackModels() {
             const { rowHeight, MSA, hideGapsEffective, blanks } = self;
-            const tracks = (MSA?.tracks ?? []);
+            const tracks = MSA?.tracks ?? [];
             return tracks
                 .filter(t => !!t.data)
                 .map(t => ({
                 model: {
                     ...t,
-                    data: hideGapsEffective && t.data
-                        ? skipBlanks(blanks, t.data)
-                        : t.data,
+                    data: hideGapsEffective ? skipBlanks(blanks, t.data) : t.data,
                     height: rowHeight,
                 },
                 ReactComponent: TextTrack,
@@ -1335,22 +1337,23 @@ function stateModelFactory() {
             return new Map(this.tidyInterProAnnotations.map(annot => [annot.accession, annot]));
         },
         get tidyInterProAnnotations() {
-            const { interProAnnotations } = self;
-            if (!interProAnnotations) {
-                return [];
-            }
-            return Object.entries(interProAnnotations)
-                .flatMap(([id, val]) => val.matches.flatMap(({ signature, locations }) => signature.entry
-                ? locations.map(({ start, end }) => ({
-                    id,
-                    name: signature.entry.name,
-                    accession: signature.entry.accession,
-                    description: signature.entry.description,
-                    start,
-                    end,
+            return self.interProAnnotations
+                ? Object.entries(self.interProAnnotations)
+                    .flatMap(([id, val]) => val.matches.flatMap(({ signature, locations }) => {
+                    const { entry } = signature;
+                    return entry
+                        ? locations.map(({ start, end }) => ({
+                            id,
+                            name: entry.name,
+                            accession: entry.accession,
+                            description: entry.description,
+                            start,
+                            end,
+                        }))
+                        : [];
                 }))
-                : []))
-                .toSorted((a, b) => len(b) - len(a));
+                    .toSorted((a, b) => len(b) - len(a))
+                : [];
         },
         get tidyFilteredInterProAnnotations() {
             return this.tidyInterProAnnotations.filter(r => self.featureFilters.get(r.accession));
@@ -1378,10 +1381,10 @@ function stateModelFactory() {
             return createPaletteMap([...self.tidyInterProAnnotationTypes.keys()]);
         },
         get strokePalette() {
-            return Object.fromEntries(Object.entries(this.fillPalette).map(([key, val]) => [
+            return transform(this.fillPalette, ([key, val]) => [
                 key,
                 colord(val).darken(0.1).toHex(),
-            ]));
+            ]);
         },
         /**
          * #method
@@ -1422,8 +1425,7 @@ function stateModelFactory() {
             self.setTreeFilehandle(undefined);
             self.setMSAFilehandle(undefined);
             self.setGFFFilehandle(undefined);
-            self.setInterProAnnotations(undefined);
-            self.setShowDomains(false);
+            self.setDomains(undefined);
         },
         /**
          * #action
@@ -1446,8 +1448,12 @@ function stateModelFactory() {
          * #action
          */
         fit() {
-            self.rowHeight = self.msaAreaHeight / self.numRows;
-            self.colWidth = self.msaAreaWidth / self.numColumns;
+            if (self.numRows > 0) {
+                self.rowHeight = clamp(self.msaAreaHeight / self.numRows, minRowHeight, maxCellSize);
+            }
+            if (self.numColumns > 0) {
+                self.colWidth = clamp(self.msaAreaWidth / self.numColumns, minColWidth, maxCellSize);
+            }
             self.scrollX = 0;
             self.scrollY = 0;
         },
@@ -1455,14 +1461,18 @@ function stateModelFactory() {
          * #action
          */
         fitVertically() {
-            self.rowHeight = self.msaAreaHeight / self.numRows;
+            if (self.numRows > 0) {
+                self.rowHeight = clamp(self.msaAreaHeight / self.numRows, minRowHeight, maxCellSize);
+            }
             self.scrollY = 0;
         },
         /**
          * #action
          */
         fitHorizontally() {
-            self.colWidth = self.msaAreaWidth / self.numColumns;
+            if (self.numColumns > 0) {
+                self.colWidth = clamp(self.msaAreaWidth / self.numColumns, minColWidth, maxCellSize);
+            }
             self.scrollX = 0;
         },
         afterCreate() {
@@ -1471,24 +1481,37 @@ function stateModelFactory() {
                     this.initFilter(key);
                 }
             }));
-            // autorun opens treeFilehandle
+            // autorun opens treeFilehandle. generation guard: if the filehandle
+            // changes mid-fetch, a slower earlier request must not clobber the data
+            // (or loading flag) set by the newer one
+            let treeGeneration = 0;
             addDisposer(self, autorun(async () => {
                 const { treeFilehandle } = self;
                 if (treeFilehandle) {
+                    const generation = ++treeGeneration;
                     try {
                         self.setLoadingTree(true);
-                        self.setTree(await fetchAndMaybeUnzipText(openLocation(treeFilehandle)));
-                        if (treeFilehandle.locationType === 'BlobLocation') {
-                            // clear filehandle after loading if from a local file
-                            self.setTreeFilehandle(undefined);
+                        const text = await fetchAndMaybeUnzipText(openLocation(treeFilehandle));
+                        if (generation === treeGeneration) {
+                            transaction(() => {
+                                self.setTree(text);
+                                if (treeFilehandle.locationType === 'BlobLocation') {
+                                    // clear filehandle after loading if from a local file
+                                    self.setTreeFilehandle(undefined);
+                                }
+                            });
                         }
                     }
                     catch (e) {
-                        console.error(e);
-                        self.setError(e);
+                        if (generation === treeGeneration) {
+                            console.error(e);
+                            self.setError(e);
+                        }
                     }
                     finally {
-                        self.setLoadingTree(false);
+                        if (generation === treeGeneration) {
+                            self.setLoadingTree(false);
+                        }
                     }
                 }
             }));
@@ -1535,32 +1558,43 @@ function stateModelFactory() {
                     }
                 }
             }));
-            // autorun opens msaFilehandle
+            // autorun opens msaFilehandle. generation guard: see treeFilehandle
+            let msaGeneration = 0;
             addDisposer(self, autorun(async () => {
                 const { msaFilehandle } = self;
                 if (msaFilehandle) {
+                    const generation = ++msaGeneration;
                     try {
                         self.setLoadingMSA(true);
                         self.setError(undefined);
                         const txt = await fetchAndMaybeUnzipText(openLocation(msaFilehandle));
-                        transaction(() => {
-                            self.setMSA(txt);
-                            if (msaFilehandle.locationType === 'BlobLocation') {
-                                // clear filehandle after loading if from a local file
-                                self.setMSAFilehandle(undefined);
-                            }
-                        });
+                        if (generation === msaGeneration) {
+                            transaction(() => {
+                                self.setMSA(txt);
+                                if (msaFilehandle.locationType === 'BlobLocation') {
+                                    // clear filehandle after loading if from a local file
+                                    self.setMSAFilehandle(undefined);
+                                }
+                            });
+                        }
                     }
                     catch (e) {
-                        console.error(e);
-                        self.setError(e);
+                        if (generation === msaGeneration) {
+                            console.error(e);
+                            self.setError(e);
+                        }
                     }
                     finally {
-                        self.setLoadingMSA(false);
+                        if (generation === msaGeneration) {
+                            self.setLoadingMSA(false);
+                        }
                     }
                 }
             }));
-            // force colStats not to go stale
+            // Keep the parse chain warm: reading self.columns transitively holds
+            // self.MSA (parseMSA) computed alive, so it is parsed once per data
+            // change rather than re-parsed on every non-reactive access. colStats is
+            // additionally held for dynamic color schemes. Do not remove.
             // xref solution https://github.com/mobxjs/mobx/issues/266#issuecomment-222007278
             // xref problem https://github.com/GMOD/react-msaview/issues/75
             addDisposer(self, autorun(() => {