react-msaview 5.2.0 → 5.3.0

package/src/model.ts

@@ -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
@@ -382,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
@@ -411,29 +438,6 @@ function stateModelFactory() {
         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
@@ -619,14 +623,19 @@ 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() ?? {}
       },
 
       /**
@@ -674,26 +683,16 @@ 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
-       */
       /**
        * #getter
        * Returns the list of row (sequence) names in display order.
@@ -706,11 +705,9 @@ function stateModelFactory() {
        * #getter
        */
       get rowNamesSet() {
-        const map = new Map<string, number>()
-        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] as const),
+        )
       },
       /**
        * #getter
@@ -727,23 +724,15 @@ 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
@@ -766,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,
+              )
+            }
           }
         }
 
@@ -786,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
       },
 
       /**
@@ -841,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)
           }
@@ -916,10 +868,9 @@ function stateModelFactory() {
        * #getter
        */
       get columns() {
+        const columns2d = this.columns2d
         return new Map(
-          this.rows.map(
-            (row, index) => [row[0], this.columns2d[index]!] as const,
-          ),
+          this.rows.map((row, index) => [row[0], columns2d[index]!] as const),
         )
       },
       /**
@@ -927,14 +878,12 @@ function stateModelFactory() {
        */
       get columns2d() {
         const { hideGapsEffective } = self
-        return this.rows
-          .map(r => r[1])
-          .map(str =>
-            (hideGapsEffective
-              ? skipBlanks(this.blanks, str)
-              : str
-            ).toUpperCase(),
-          )
+        return this.rows.map(([, str]) =>
+          (hideGapsEffective
+            ? skipBlanks(this.blanks, str)
+            : str
+          ).toUpperCase(),
+        )
       },
       /**
        * #getter
@@ -946,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++) {
@@ -962,13 +911,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)))
       },
 
       /**
@@ -985,17 +928,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'
       },
 
       /**
@@ -1009,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
@@ -1064,12 +1002,9 @@ function stateModelFactory() {
           }
 
           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)
             }
           }
@@ -1087,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>
       },
 
@@ -1150,7 +1086,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
@@ -1197,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
        */
@@ -1222,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
@@ -1245,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)
         })
       },
@@ -1282,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))
       },
 
       /**
@@ -1342,16 +1374,15 @@ function stateModelFactory() {
        */
       get labelWidthMap() {
         const { rowHeight, leaves, treeMetadata, fontSize } = self
-        if (rowHeight <= 5) {
-          return new Map<string, number>()
-        }
-        return new Map(
-          leaves.map(node => {
-            const { name } = node.data
-            const displayName = treeMetadata[name]?.genome || name
-            return [name, measureTextCanvas(displayName, fontSize)] as const
-          }),
-        )
+        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() {
@@ -1378,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,
@@ -1545,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 =>
@@ -1594,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(),
+        ])
       },
 
       /**
@@ -1641,8 +1664,7 @@ function stateModelFactory() {
         self.setTreeFilehandle(undefined)
         self.setMSAFilehandle(undefined)
         self.setGFFFilehandle(undefined)
-        self.setInterProAnnotations(undefined)
-        self.setShowDomains(false)
+        self.setDomains(undefined)
       },
       /**
        * #action
@@ -1671,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
       },
@@ -1680,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
       },
 
@@ -1701,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)
+                }
               }
             }
           }),
@@ -1783,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(