react-msaview 5.1.1 → 5.2.1

package/dist/model.js

@@ -5,12 +5,12 @@ import { addDisposer, cast, types } from '@jbrowse/mobx-state-tree';
 import { colord } from 'colord';
 import { autorun, transaction } from 'mobx';
 import { generateNodeIds, gffToInterProResults, parseEmfTree, parseGFF, parseMSA, parseNewick, } from 'msa-parsers';
-import { blocksX, blocksY } from "./calculateBlocks.js";
+import { calculateBlocks } from "./calculateBlocks.js";
 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
          */
@@ -217,12 +234,6 @@ function stateModelFactory() {
          * array of column indices to highlight
          */
         highlightedColumns: undefined,
-        /**
-         * #volatile
-         * a dummy variable that is incremented when ref changes so autorun for
-         * drawing canvas commands will run
-         */
-        nref: 0,
         /**
          * #volatile
          */
@@ -282,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
@@ -299,31 +318,22 @@ function stateModelFactory() {
         /**
          * #action
          * set mouse position (row, column) in the MSA
+         *
+         * CROSS-REPO CONTRACT: jbrowse-plugin-protein3d calls this (and reads the
+         * `mouseCol` volatile) to sync MSA<->3D-structure hover. Keep the name and
+         * signature stable; see that repo's ProteinToMsaHoverSync.tsx.
          */
         setMousePos(col, row) {
             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
+         *
+         * CROSS-REPO CONTRACT: called by jbrowse-plugin-msaview
+         * (afterCreateAutoruns.ts) to highlight alignment columns. It has no
+         * in-repo caller, so do not flag it as dead code — it is public API.
          */
         setHighlightedColumns(columns) {
             self.highlightedColumns = columns;
@@ -482,19 +492,22 @@ 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
          */
         get alignmentNames() {
-            return this.MSA?.alignmentNames || [];
+            return this.MSA?.alignmentNames ?? [];
         },
         /**
          * #getter
@@ -527,7 +540,7 @@ function stateModelFactory() {
          * #getter
          */
         get numColumns() {
-            return (this.MSA?.getWidth() || 0) - this.blanks.length;
+            return (this.MSA?.getWidth() ?? 0) - this.blanks.length;
         },
         /**
          * #getter
@@ -535,28 +548,36 @@ 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
+         * Returns the list of row (sequence) names in display order.
+         * Part of the public API used by downstream consumers (e.g. jbrowse plugins).
          */
         get rowNames() {
             return this.leaves.map(n => n.data.name);
         },
+        /**
+         * #getter
+         */
+        get rowNamesSet() {
+            return new Map(this.leaves.map((leaf, index) => [leaf.data.name, index]));
+        },
         /**
          * #getter
          */
         get mouseOverRowName() {
             const { mouseRow } = self;
-            return mouseRow === undefined ? undefined : this.rowNames[mouseRow];
+            return mouseRow === undefined
+                ? undefined
+                : this.leaves[mouseRow]?.data.name;
         },
         /**
          * #getter
@@ -564,24 +585,16 @@ function stateModelFactory() {
          */
         get hoveredInsertion() {
             const { mouseCol, mouseRow } = self;
-            if (mouseCol === undefined || mouseRow === undefined) {
-                return undefined;
-            }
-            const rowName = this.rowNames[mouseRow];
-            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;
         },
@@ -600,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;
@@ -617,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
@@ -671,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);
                 }
@@ -747,16 +721,17 @@ function stateModelFactory() {
          * #getter
          */
         get columns() {
-            return Object.fromEntries(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 ? skipBlanks(this.blanks, str) : str));
+            return this.rows.map(([, str]) => (hideGapsEffective
+                ? skipBlanks(this.blanks, str)
+                : str).toUpperCase());
         },
         /**
          * #getter
@@ -783,7 +758,7 @@ function stateModelFactory() {
          * #getter
          */
         get colStatsSums() {
-            return this.colStats.map(val => sum(Object.values(val)));
+            return this.colStats.map(col => sum(Object.values(col)));
         },
         /**
          * #getter
@@ -794,23 +769,18 @@ function stateModelFactory() {
             const letters = new Set();
             for (const stats of this.colStats) {
                 for (const letter of Object.keys(stats)) {
-                    const upper = letter.toUpperCase();
-                    if (upper !== '-' && upper !== '.') {
-                        letters.add(upper);
+                    if (letter !== '-' && letter !== '.') {
+                        letters.add(letter);
                     }
                 }
             }
+            // 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
@@ -823,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;
@@ -864,23 +833,15 @@ function stateModelFactory() {
                 if (!total) {
                     return 0;
                 }
-                const gapCount = (stats['-'] || 0) + (stats['.'] || 0);
+                const gapCount = (stats['-'] ?? 0) + (stats['.'] ?? 0);
                 const nonGapTotal = total - gapCount;
                 if (nonGapTotal === 0) {
                     return 0;
                 }
-                const merged = {};
-                for (const letter of Object.keys(stats)) {
-                    if (letter === '-' || letter === '.') {
-                        continue;
-                    }
-                    const upper = letter.toUpperCase();
-                    merged[upper] = (merged[upper] || 0) + stats[letter];
-                }
                 let entropy = 0;
-                for (const key of Object.keys(merged)) {
-                    const freq = merged[key] / nonGapTotal;
-                    if (freq > 0) {
+                for (const [letter, count] of Object.entries(stats)) {
+                    if (letter !== '-' && letter !== '.') {
+                        const freq = count / nonGapTotal;
                         entropy -= freq * Math.log2(freq);
                     }
                 }
@@ -897,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;
         },
         /**
@@ -953,28 +915,28 @@ function stateModelFactory() {
          * #getter
          */
         get dataInitialized() {
-            return (self.data.msa || self.data.tree) && !self.error;
+            return (self.data.msa !== '' || self.data.tree !== '') && !self.error;
         },
         /**
          * #getter
          */
         get blocksX() {
-            return blocksX({
-                viewportWidth: self.msaAreaWidth,
-                viewportX: -self.scrollX,
+            return calculateBlocks({
+                viewportSize: self.msaAreaWidth,
+                viewportPos: -self.scrollX,
                 blockSize: self.blockSize,
-                mapWidth: self.totalWidth,
+                mapSize: self.totalWidth,
             });
         },
         /**
          * #getter
          */
         get blocksY() {
-            return blocksY({
-                viewportHeight: self.height,
-                viewportY: -self.scrollY,
+            return calculateBlocks({
+                viewportSize: self.height,
+                viewportPos: -self.scrollY,
                 blockSize: self.blockSize,
-                mapHeight: self.totalHeight,
+                mapSize: self.totalHeight,
             });
         },
     }))
@@ -997,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
          */
@@ -1019,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
@@ -1041,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);
             });
         },
@@ -1078,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
@@ -1132,12 +1158,19 @@ function stateModelFactory() {
         /**
          * #getter
          */
-        get labelsWidth() {
+        get labelWidthMap() {
             const { rowHeight, leaves, treeMetadata, fontSize } = self;
-            if (rowHeight <= 5) {
-                return 0;
-            }
-            return leaves.reduce((max, node) => Math.max(max, measureTextCanvas(treeMetadata[node.data.name]?.genome || node.data.name, fontSize)), 0);
+            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;
+            return widths.size === 0 ? 0 : Math.max(...widths.values());
         },
         /**
          * #getter
@@ -1156,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,
@@ -1196,12 +1227,6 @@ function stateModelFactory() {
         get showHorizontalScrollbar() {
             return self.msaAreaWidth < self.totalWidth;
         },
-        /**
-         * #getter
-         */
-        get rowNamesSet() {
-            return new Map(self.rowNames.map((r, idx) => [r, idx]));
-        },
         /**
          * #method
          * Return a row-specific letter at a visible column, or undefined if gap.
@@ -1219,6 +1244,11 @@ function stateModelFactory() {
          * Convert a visible column to a row-specific sequence position (0-based).
          * Returns undefined if the position is a gap in the sequence.
          *
+         * CROSS-REPO CONTRACT: this and the sibling coordinate converters
+         * (seqPosToVisibleCol, globalColToVisibleCol, seqPosToGlobalCol) are used
+         * by jbrowse-plugin-protein3d to translate between alignment columns and
+         * structure/sequence residue positions across gaps. Keep them stable.
+         *
          * @param rowName - The name of the row
          * @param visibleCol - The visible column index
          * @returns The sequence position (0-based), or undefined if it's a gap
@@ -1269,14 +1299,8 @@ function stateModelFactory() {
          * @returns The global column index in the full MSA
          */
         seqPosToGlobalCol(rowName, seqPos) {
-            const { rows } = self;
-            const index = this.rowNamesSet.get(rowName);
-            return index !== undefined && rows[index]
-                ? seqPosToGlobalCol({
-                    row: rows[index][1],
-                    seqPos,
-                })
-                : 0;
+            const seq = self.rowMap.get(rowName);
+            return seq ? seqPosToGlobalCol({ row: seq, seqPos }) : 0;
         },
         /**
          * #method
@@ -1293,29 +1317,6 @@ function stateModelFactory() {
         },
     }))
         .views(self => ({
-        /**
-         * #getter
-         * Returns information about the currently hovered cell
-         */
-        get hoveredCell() {
-            const { mouseCol, mouseRow } = self;
-            if (mouseCol === undefined || mouseRow === undefined) {
-                return undefined;
-            }
-            const rowName = self.rowNames[mouseRow];
-            if (!rowName) {
-                return undefined;
-            }
-            const seq = self.columns[rowName];
-            const base = seq?.[mouseCol];
-            const seqPos = self.visibleColToSeqPosOneBased(rowName, mouseCol);
-            return {
-                rowName,
-                col: mouseCol,
-                base,
-                seqPos,
-            };
-        },
         /**
          * #getter
          * widget width minus the tree area gives the space for the MSA
@@ -1336,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));
@@ -1379,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
@@ -1423,8 +1425,7 @@ function stateModelFactory() {
             self.setTreeFilehandle(undefined);
             self.setMSAFilehandle(undefined);
             self.setGFFFilehandle(undefined);
-            self.setInterProAnnotations({});
-            self.setShowDomains(false);
+            self.setDomains(undefined);
         },
         /**
          * #action
@@ -1435,13 +1436,6 @@ function stateModelFactory() {
             const blob = new Blob([html], { type: 'image/svg+xml' });
             saveAs(blob, 'image.svg');
         },
-        /**
-         * #action
-         * internal, used for drawing to canvas
-         */
-        incrementRef() {
-            self.nref++;
-        },
         initFilter(arg) {
             if (!self.featureFilters.has(arg)) {
                 self.featureFilters.set(arg, true);
@@ -1454,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;
         },
@@ -1463,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() {
@@ -1479,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);
+                        }
                     }
                 }
             }));
@@ -1543,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(() => {