react-msaview 5.3.0 → 5.4.1

package/src/model.ts

@@ -1,10 +1,4 @@
-import {
-  clamp,
-  fetchAndMaybeUnzipText,
-  groupBy,
-  notEmpty,
-  sum,
-} from '@jbrowse/core/util'
+import { clamp, groupBy, notEmpty, sum } from '@jbrowse/core/util'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst'
 import { addDisposer, cast, types } from '@jbrowse/mobx-state-tree'
@@ -51,13 +45,16 @@ import {
   minRowHeight,
 } from './constants.ts'
 import { createPaletteMap } from './createPaletteMap.ts'
+import { fetchTextWithProgress, isAbortError } from './fetchUtils.ts'
 import { flatToTree } from './flatToTree.ts'
 import {
   calcDepthToLeaf,
   clusterLayout,
   collapse,
+  collapsedSubtreeLengthExtent,
   find,
   findMaxBranchLen,
+  forEachDescendant,
   hierarchy,
   leaves,
   links,
@@ -252,6 +249,15 @@ function stateModelFactory() {
          * #property
          */
         relativeTo: types.maybe(types.string),
+        /**
+         * #property
+         * declarative seed for the highlighted-columns overlay (visible column
+         * indices). Unlike the volatile `highlightedColumns` (driven by
+         * transient genome-hover sync), this persists in the snapshot/URL so a
+         * shared link can open with specific columns highlighted. Applied once
+         * in afterCreate.
+         */
+        highlightColumns: types.frozen<number[] | undefined>(),
       }),
     )
     .volatile(() => ({
@@ -669,7 +675,9 @@ function stateModelFactory() {
         const text = self.data.msa
         // uses parseMSA so the named MSAParserType return type is portable
         // to downstream consumers (avoids TS2883 with default exports)
-        return text ? parseMSA(text, self.currentAlignment) : null
+        return text
+          ? parseMSA(text, self.currentAlignment, self.msaFormat)
+          : null
       },
       /**
        * #getter
@@ -945,7 +953,10 @@ function stateModelFactory() {
       get colConsensus() {
         const { colStats, colStatsSums } = this
         return colStats.map((stats, i) => {
-          const total = colStatsSums[i]!
+          const total = colStatsSums[i]
+          if (!total) {
+            return { letter: '', color: undefined }
+          }
           let maxCount = 0
           let letter = ''
           for (const [key, val] of Object.entries(stats)) {
@@ -1023,7 +1034,18 @@ function stateModelFactory() {
         clusterLayout(r, this.totalHeight, self.treeWidth)
         r.data.length = 0
         const max = maxLength(r)
-        setBrLength(r, 0, max ? self.treeWidth / max : 0)
+        const k = max ? self.treeWidth / max : 0
+        setBrLength(r, 0, k)
+        // for each collapsed clade, record the pixel x-positions of its
+        // nearest/farthest tips so the renderer can draw a triangle that spans
+        // the branch-length extent of the hidden subtree
+        forEachDescendant(r, node => {
+          if (node._children) {
+            const { min, max: mx } = collapsedSubtreeLengthExtent(node)
+            node.collapsedTipXNear = (node.len ?? 0) + min * k
+            node.collapsedTipXFar = (node.len ?? 0) + mx * k
+          }
+        })
         return r as HierarchyNode<NodeWithIdsAndLength>
       },
 
@@ -1249,12 +1271,8 @@ function stateModelFactory() {
        */
       zoomIn() {
         transaction(() => {
-          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)
+          this.zoomInHorizontal()
+          this.zoomInVertical()
         })
       },
       /**
@@ -1262,15 +1280,8 @@ function stateModelFactory() {
        */
       zoomOut() {
         transaction(() => {
-          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)
+          this.zoomOutHorizontal()
+          this.zoomOutVertical()
         })
       },
       /**
@@ -1304,9 +1315,13 @@ function stateModelFactory() {
           )
 
           const anchoredScrollY = offsetY - rowInView * self.rowHeight
-          const overflow = Math.max(0, self.totalHeight - self.height)
+          // maxScrollY is -(totalHeight - visibleMsaHeight) when the alignment
+          // overflows, so -maxScrollY is exactly that overflow past the
+          // scrollable MSA viewport (0 when it fits)
+          const overflow = Math.max(0, -self.maxScrollY)
+          const visibleHeight = self.totalHeight - overflow
           const topBias =
-            self.height > 0 ? clamp(1 - overflow / self.height, 0, 1) : 0
+            visibleHeight > 0 ? clamp(1 - overflow / visibleHeight, 0, 1) : 1
           self.scrollY = clamp(
             anchoredScrollY * (1 - topBias),
             self.maxScrollY,
@@ -1693,22 +1708,8 @@ function stateModelFactory() {
        * #action
        */
       fit() {
-        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
+        this.fitVertically()
+        this.fitHorizontally()
       },
       /**
        * #action
@@ -1738,6 +1739,13 @@ function stateModelFactory() {
       },
 
       afterCreate() {
+        // seed the highlighted-columns overlay from the declarative property so
+        // a shared snapshot/URL opens with those columns highlighted (the
+        // volatile highlightedColumns can later be driven by genome-hover sync)
+        if (self.highlightColumns?.length) {
+          self.setHighlightedColumns(self.highlightColumns)
+        }
+
         addDisposer(
           self,
           autorun(() => {
@@ -1759,8 +1767,13 @@ function stateModelFactory() {
               const generation = ++treeGeneration
               try {
                 self.setLoadingTree(true)
-                const text = await fetchAndMaybeUnzipText(
+                const text = await fetchTextWithProgress(
                   openLocation(treeFilehandle),
+                  status => {
+                    if (generation === treeGeneration) {
+                      self.setStatus(status)
+                    }
+                  },
                 )
                 if (generation === treeGeneration) {
                   transaction(() => {
@@ -1773,8 +1786,14 @@ function stateModelFactory() {
                 }
               } catch (e) {
                 if (generation === treeGeneration) {
-                  console.error(e)
-                  self.setError(e)
+                  if (isAbortError(e)) {
+                    // cancelled by the user: drop the filehandle so the view
+                    // returns to the import form instead of a stuck spinner
+                    self.setTreeFilehandle(undefined)
+                  } else {
+                    console.error(e)
+                    self.setError(e)
+                  }
                 }
               } finally {
                 if (generation === treeGeneration) {
@@ -1792,13 +1811,19 @@ function stateModelFactory() {
             if (treeMetadataFilehandle) {
               try {
                 self.setTreeMetadata(
-                  await fetchAndMaybeUnzipText(
+                  await fetchTextWithProgress(
                     openLocation(treeMetadataFilehandle),
+                    status => {
+                      self.setStatus(status)
+                    },
                   ),
                 )
               } catch (e) {
-                console.error(e)
-                self.setError(e)
+                // ignore user cancel (isAbortError); treeMetadata is optional
+                if (!isAbortError(e)) {
+                  console.error(e)
+                  self.setError(e)
+                }
               }
             }
           }),
@@ -1827,16 +1852,24 @@ function stateModelFactory() {
             const { gffFilehandle } = self
             if (gffFilehandle) {
               try {
-                const gffText = await fetchAndMaybeUnzipText(
+                const gffText = await fetchTextWithProgress(
                   openLocation(gffFilehandle),
+                  status => {
+                    self.setStatus(status)
+                  },
                 )
                 self.applyGFFText(gffText)
                 if (gffFilehandle.locationType === 'BlobLocation') {
                   self.setGFFFilehandle(undefined)
                 }
               } catch (e) {
-                console.error(e)
-                self.setError(e)
+                // on user cancel (isAbortError) drop the filehandle
+                if (isAbortError(e)) {
+                  self.setGFFFilehandle(undefined)
+                } else {
+                  console.error(e)
+                  self.setError(e)
+                }
               }
             }
           }),
@@ -1853,8 +1886,13 @@ function stateModelFactory() {
               try {
                 self.setLoadingMSA(true)
                 self.setError(undefined)
-                const txt = await fetchAndMaybeUnzipText(
+                const txt = await fetchTextWithProgress(
                   openLocation(msaFilehandle),
+                  status => {
+                    if (generation === msaGeneration) {
+                      self.setStatus(status)
+                    }
+                  },
                 )
                 if (generation === msaGeneration) {
                   transaction(() => {
@@ -1867,8 +1905,14 @@ function stateModelFactory() {
                 }
               } catch (e) {
                 if (generation === msaGeneration) {
-                  console.error(e)
-                  self.setError(e)
+                  if (isAbortError(e)) {
+                    // cancelled by the user: drop the filehandle so the view
+                    // returns to the import form instead of a stuck spinner
+                    self.setMSAFilehandle(undefined)
+                  } else {
+                    console.error(e)
+                    self.setError(e)
+                  }
                 }
               } finally {
                 if (generation === msaGeneration) {

package/src/neighborJoining.ts

@@ -194,16 +194,10 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
     const ri = r.get(minI)!
     const rj = r.get(minJ)!
 
-    let limbI: number
-    let limbJ: number
-
-    if (remaining > 2) {
-      limbI = dij / 2 + (ri - rj) / (2 * (remaining - 2))
-      limbJ = dij - limbI
-    } else {
-      limbI = dij / 2
-      limbJ = dij / 2
-    }
+    // remaining is always > 2 inside this loop; the final two nodes are
+    // connected after it
+    let limbI = dij / 2 + (ri - rj) / (2 * (remaining - 2))
+    let limbJ = dij - limbI
 
     // Ensure non-negative branch lengths
     limbI = Math.max(0, limbI)
@@ -217,19 +211,18 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
       rightLength: limbJ,
     }
 
-    // Update distance matrix
-    const newIdx = minI
+    // Update distance matrix, reusing minI's slot for the merged node
     for (const k of active) {
       if (k !== minI && k !== minJ) {
         const newDist = (D[minI]![k]! + D[minJ]![k]! - dij) / 2
-        D[newIdx]![k] = Math.max(0, newDist)
-        D[k]![newIdx] = Math.max(0, newDist)
+        D[minI]![k] = Math.max(0, newDist)
+        D[k]![minI] = Math.max(0, newDist)
       }
     }
 
     // Mark minJ as removed
     nodes[minJ] = undefined
-    nodes[newIdx] = newNode
+    nodes[minI] = newNode
 
     remaining--
   }
@@ -257,25 +250,45 @@ function neighborJoining(distances: number[][], names: string[]): NJNode {
   return nodes[finalActive[0]!]!
 }
 
-function nodeToNewick(node: NJNode, branchLength?: number): string {
-  let result: string
-
-  if (node.name !== undefined && !node.left && !node.right) {
-    const quotedName = node.name.replaceAll("'", "''")
-    result = `'${quotedName}'`
-  } else {
-    const leftNewick = node.left ? nodeToNewick(node.left, node.leftLength) : ''
-    const rightNewick = node.right
-      ? nodeToNewick(node.right, node.rightLength)
-      : ''
-    result = `(${leftNewick},${rightNewick})`
-  }
+function withBranchLength(newick: string, branchLength?: number) {
+  return branchLength === undefined
+    ? newick
+    : `${newick}:${branchLength.toFixed(6)}`
+}
 
-  if (branchLength !== undefined) {
-    result += `:${branchLength.toFixed(6)}`
+// Emit Newick iteratively rather than recursively: an NJ tree of N leaves can
+// be a caterpillar of depth ~N, so recursion risks a stack overflow on large
+// alignments (matching the iterative-traversal convention in hierarchy.ts).
+function nodeToNewick(root: NJNode): string {
+  const postOrder: NJNode[] = []
+  const stack: NJNode[] = [root]
+  while (stack.length > 0) {
+    const node = stack.pop()!
+    postOrder.push(node)
+    if (node.left) {
+      stack.push(node.left)
+    }
+    if (node.right) {
+      stack.push(node.right)
+    }
   }
 
-  return result
+  const newickByNode = new Map<NJNode, string>()
+  for (let i = postOrder.length - 1; i >= 0; i--) {
+    const node = postOrder[i]!
+    if (node.name !== undefined && !node.left && !node.right) {
+      newickByNode.set(node, `'${node.name.replaceAll("'", "''")}'`)
+    } else {
+      const left = node.left
+        ? withBranchLength(newickByNode.get(node.left)!, node.leftLength)
+        : ''
+      const right = node.right
+        ? withBranchLength(newickByNode.get(node.right)!, node.rightLength)
+        : ''
+      newickByNode.set(node, `(${left},${right})`)
+    }
+  }
+  return newickByNode.get(root)!
 }
 
 export function calculateNeighborJoiningTree(

package/src/version.ts

@@ -1 +1 @@
-export const version = '5.3.0'
+export const version = '5.4.1'