react-msaview 5.1.1 → 5.2.1

package/src/model.ts

@@ -19,7 +19,7 @@ import {
   parseNewick,
 } from 'msa-parsers'
 
-import { blocksX, blocksY } from './calculateBlocks.ts'
+import { calculateBlocks } from './calculateBlocks.ts'
 import { clustalXColumnColors } from './clustalX.ts'
 import colorSchemes from './colorSchemes.ts'
 import ConservationTrack from './components/ConservationTrack.tsx'
@@ -40,11 +40,15 @@ import {
   defaultRowHeight,
   defaultScrollX,
   defaultScrollY,
+  defaultScrollZoom,
   defaultShowBranchLen,
   defaultShowDomains,
   defaultSubFeatureRows,
   defaultTreeAreaWidth,
   defaultTreeWidth,
+  maxCellSize,
+  minColWidth,
+  minRowHeight,
 } from './constants.ts'
 import { createPaletteMap } from './createPaletteMap.ts'
 import { flatToTree } from './flatToTree.ts'
@@ -75,27 +79,34 @@ import {
   visibleColToSeqPosForRow,
 } from './rowCoordinateCalculations.ts'
 import { seqPosToGlobalCol } from './seqPosToGlobalCol.ts'
-import { len, skipBlanks } from './util.ts'
+import { computeRowInsertions, len, skipBlanks, transform } from './util.ts'
 import { saveAs } from './vendor/fileSaver.ts'
 
 import type { HierarchyNode } from './hierarchy.ts'
 import type { InterProScanResults } from './launchInterProScan.ts'
-import type {
-  BasicTrack,
-  NodeWithIds,
-  NodeWithIdsAndLength,
-  TextTrackModel,
-} from './types.ts'
+import type { BasicTrack, NodeWithIds, NodeWithIdsAndLength } from './types.ts'
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 import type { Instance } from '@jbrowse/mobx-state-tree'
 import type { Theme } from '@mui/material'
 
+function parseTreeText(text: string) {
+  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
@@ -138,6 +149,12 @@ function stateModelFactory() {
          */
         drawMsaLetters: defaultDrawMsaLetters,
 
+        /**
+         * #property
+         * zoom in/out on plain mouse-wheel without holding ctrl
+         */
+        scrollZoom: defaultScrollZoom,
+
         /**
          * #property
          * height of the div containing the view, px
@@ -251,9 +268,11 @@ 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
@@ -317,13 +336,6 @@ function stateModelFactory() {
        */
       highlightedColumns: undefined as number[] | undefined,
 
-      /**
-       * #volatile
-       * a dummy variable that is incremented when ref changes so autorun for
-       * drawing canvas commands will run
-       */
-      nref: 0,
-
       /**
        * #volatile
        */
@@ -389,6 +401,14 @@ function stateModelFactory() {
       setWidth(arg: number) {
         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: number) {
+        self.highResScaleFactor = arg
+      },
       /**
        * #action
        * set the height of the view in px
@@ -408,38 +428,23 @@ 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?: number, row?: number) {
         self.mouseCol = col
         self.mouseRow = row
       },
 
-      /**
-       * #action
-       * set hovered tree node and its descendants
-       */
-      setHoveredTreeNode(nodeId?: string) {
-        if (!nodeId) {
-          self.hoveredTreeNode = undefined
-          return
-        }
-
-        const node = find(
-          (self as MsaViewModel).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?: number[]) {
         self.highlightedColumns = columns
@@ -618,21 +623,26 @@ 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() || {}) as Record<string, unknown>
+        return this.MSA?.getHeader() ?? {}
       },
 
       /**
        * #getter
        */
       get alignmentNames() {
-        return this.MSA?.alignmentNames || []
+        return this.MSA?.alignmentNames ?? []
       },
       /**
        * #getter
@@ -665,7 +675,7 @@ function stateModelFactory() {
        * #getter
        */
       get numColumns() {
-        return (this.MSA?.getWidth() || 0) - this.blanks.length
+        return (this.MSA?.getWidth() ?? 0) - this.blanks.length
       },
 
       /**
@@ -673,35 +683,40 @@ function stateModelFactory() {
        */
       get tree(): NodeWithIds {
         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(): string[] {
         return this.leaves.map(n => n.data.name)
       },
+      /**
+       * #getter
+       */
+      get rowNamesSet() {
+        return new Map(
+          this.leaves.map((leaf, index) => [leaf.data.name, index] as const),
+        )
+      },
       /**
        * #getter
        */
       get mouseOverRowName() {
         const { mouseRow } = self
-        return mouseRow === undefined ? undefined : this.rowNames[mouseRow]
+        return mouseRow === undefined
+          ? undefined
+          : this.leaves[mouseRow]?.data.name
       },
       /**
        * #getter
@@ -709,23 +724,15 @@ 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
@@ -748,15 +755,14 @@ 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,
+              )
+            }
           }
         }
 
@@ -768,7 +774,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
       },
 
       /**
@@ -823,49 +829,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<string, { pos: number; letters: string }[]>()
         }
         const result = new Map<string, { pos: number; letters: string }[]>()
         for (const [name, seq] of rows) {
-          const insertions: { pos: number; letters: string }[] = []
-          let displayPos = 0
-          let blankIdx = 0
-          let currentInsertPos = -1
-          let letterChars: string[] = []
-          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)
           }
@@ -898,10 +868,9 @@ function stateModelFactory() {
        * #getter
        */
       get columns() {
-        return Object.fromEntries(
-          this.rows.map(
-            (row, index) => [row[0], this.columns2d[index]!] as const,
-          ),
+        const columns2d = this.columns2d
+        return new Map(
+          this.rows.map((row, index) => [row[0], columns2d[index]!] as const),
         )
       },
       /**
@@ -909,9 +878,12 @@ function stateModelFactory() {
        */
       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
@@ -923,7 +895,7 @@ function stateModelFactory() {
        * #getter
        */
       get colStats() {
-        const r = [] as Record<string, number>[]
+        const r: Record<string, number>[] = []
         const columns = this.columns2d
         for (const column of columns) {
           for (let j = 0; j < column.length; j++) {
@@ -939,7 +911,7 @@ function stateModelFactory() {
        * #getter
        */
       get colStatsSums() {
-        return this.colStats.map(val => sum(Object.values(val)))
+        return this.colStats.map(col => sum(Object.values(col)))
       },
 
       /**
@@ -951,23 +923,18 @@ function stateModelFactory() {
         const letters = new Set<string>()
         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'
       },
 
       /**
@@ -981,8 +948,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
@@ -1029,25 +995,16 @@ function stateModelFactory() {
             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: Record<string, number> = {}
-          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)
             }
           }
@@ -1065,7 +1022,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 as HierarchyNode<NodeWithIdsAndLength>
       },
 
@@ -1128,28 +1086,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,
         })
       },
     }))
@@ -1175,6 +1133,19 @@ 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
        */
@@ -1200,6 +1171,31 @@ function stateModelFactory() {
         self.drawMsaLetters = arg
       },
 
+      /**
+       * #action
+       */
+      setScrollZoom(arg: boolean) {
+        self.scrollZoom = arg
+      },
+
+      /**
+       * #action
+       * set hovered tree node and its descendants
+       */
+      setHoveredTreeNode(nodeId?: string) {
+        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
@@ -1223,35 +1219,41 @@ 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)
         })
       },
@@ -1260,27 +1262,79 @@ 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: number, offsetX: number, offsetY: number) {
+        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: number) {
-        self.scrollY = clamp(self.scrollY + deltaY, -self.totalHeight + 10, 0)
+        self.scrollY = clamp(self.scrollY + deltaY, self.maxScrollY, 0)
       },
 
-      setInterProAnnotations(data: Record<string, InterProScanResults>) {
+      /**
+       * #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?: Record<string, InterProScanResults>) {
         self.interProAnnotations = data
+        self.setShowDomains(!!data)
       },
 
       applyGFFText(gffText: string) {
         const gffRecords = parseGFF(gffText)
-        const interProResults = gffToInterProResults(gffRecords)
-        self.interProAnnotations = interProResults
-        self.setShowDomains(true)
+        this.setDomains(gffToInterProResults(gffRecords))
       },
 
       /**
@@ -1318,22 +1372,22 @@ 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<string, number>()
+          : new Map(
+              leaves.map(node => {
+                const { name } = node.data
+                const displayName = treeMetadata[name]?.genome ?? name
+                return [name, measureTextCanvas(displayName, fontSize)] as const
+              }),
+            )
+      },
+
+      get labelsWidth() {
+        const widths = this.labelWidthMap
+        return widths.size === 0 ? 0 : Math.max(...widths.values())
       },
 
       /**
@@ -1355,18 +1409,13 @@ function stateModelFactory() {
        */
       get adapterTrackModels(): BasicTrack[] {
         const { rowHeight, MSA, hideGapsEffective, blanks } = self
-        const tracks = (MSA?.tracks ?? []) as (TextTrackModel & {
-          data?: string
-        })[]
+        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,
@@ -1402,13 +1451,6 @@ function stateModelFactory() {
         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.
@@ -1427,6 +1469,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
@@ -1480,14 +1527,8 @@ function stateModelFactory() {
        * @returns The global column index in the full MSA
        */
       seqPosToGlobalCol(rowName: string, seqPos: number) {
-        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
       },
 
       /**
@@ -1506,30 +1547,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
@@ -1554,26 +1571,25 @@ function stateModelFactory() {
         )
       },
       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,
-                  }))
-                : [],
-            ),
-          )
-          .toSorted((a, b) => len(b) - len(a))
+        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))
+          : []
       },
       get tidyFilteredInterProAnnotations() {
         return this.tidyInterProAnnotations.filter(r =>
@@ -1603,12 +1619,10 @@ function stateModelFactory() {
         return createPaletteMap([...self.tidyInterProAnnotationTypes.keys()])
       },
       get strokePalette() {
-        return Object.fromEntries(
-          Object.entries(this.fillPalette).map(([key, val]) => [
-            key,
-            colord(val).darken(0.1).toHex(),
-          ]),
-        )
+        return transform(this.fillPalette, ([key, val]) => [
+          key,
+          colord(val).darken(0.1).toHex(),
+        ])
       },
 
       /**
@@ -1650,8 +1664,7 @@ function stateModelFactory() {
         self.setTreeFilehandle(undefined)
         self.setMSAFilehandle(undefined)
         self.setGFFFilehandle(undefined)
-        self.setInterProAnnotations({})
-        self.setShowDomains(false)
+        self.setDomains(undefined)
       },
       /**
        * #action
@@ -1660,21 +1673,13 @@ function stateModelFactory() {
         theme: Theme
         includeMinimap?: boolean
         includeTracks?: boolean
-        exportType: string
+        exportType: 'entire' | 'viewport'
       }) {
         const { renderToSvg } = await import('./renderToSvg.tsx')
         const html = await renderToSvg(self as MsaViewModel, opts)
         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: string) {
         if (!self.featureFilters.has(arg)) {
           self.featureFilters.set(arg, true)
@@ -1688,8 +1693,20 @@ 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
       },
@@ -1697,14 +1714,26 @@ 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
       },
 
@@ -1718,26 +1747,39 @@ function stateModelFactory() {
           }),
         )
 
-        // 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)),
+                const text = await fetchAndMaybeUnzipText(
+                  openLocation(treeFilehandle),
                 )
-                if (treeFilehandle.locationType === 'BlobLocation') {
-                  // clear filehandle after loading if from a local file
-                  self.setTreeFilehandle(undefined)
+                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)
+                }
               }
             }
           }),
@@ -1800,36 +1842,47 @@ 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(