react-msaview 9.0.0 → 9.1.0

package/src/model/treeModel.ts

@@ -163,13 +163,6 @@ export function TreeModelF() {
       setShowTreeOverview(arg: boolean) {
         self.showTreeOverview = arg
       },
-      /**
-       * #action
-       * set the height of the tree overview band (px)
-       */
-      setOverviewHeight(n: number) {
-        self.overviewHeight = Math.round(n)
-      },
       /**
        * #action
        */

package/src/model.ts

@@ -19,7 +19,6 @@ import {
 import {
   generateNodeIds,
   gffToAnnotations,
-  interProScanToAnnotations,
   parseEmfTree,
   parseGFF,
   parseMSA,
@@ -34,7 +33,6 @@ import { columnCountsFromRows, letterOfResidueSlot } from './columnCounts.ts'
 import { columnStats } from './columnStats.ts'
 import { packDomainLanes } from './components/msa/packDomainLanes.ts'
 import { visibleColRange } from './components/msa/visibleColRange.ts'
-import TrackBlocks from './components/tracks/TrackBlocks.tsx'
 import { cladeGutterWidth } from './components/tree/cladeBrackets.ts'
 import { scaleBarLength } from './components/tree/scaleBar.ts'
 import {
@@ -83,8 +81,6 @@ import { featuresToAnnotations } from './featuresLayer.ts'
 import { fetchTextWithProgress, isAbortError } from './fetchUtils.ts'
 import { flatToTree } from './flatToTree.ts'
 import {
-  calcDepthToLeaf,
-  clusterLayout,
   collapse,
   find,
   forEachDescendant,
@@ -92,10 +88,8 @@ import {
   layoutTree,
   leafIndex,
   leaves,
-  maxLength,
   mrca,
   nodeCoveringRows,
-  setBrLength,
   sort,
   sum as hierarchySum,
 } from './hierarchy.ts'
@@ -179,7 +173,6 @@ import type {
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 import type { Instance } from '@jbrowse/mobx-state-tree'
 import type { IComputedValue } from 'mobx'
-import type { InterProScanResults } from 'msa-parsers'
 
 function parseTreeText(text: string) {
   if (text.startsWith('BioTreeContainer')) {
@@ -559,40 +552,80 @@ const seedingMarks = new Set<CladeMark>(['collapse', 'focus', 'rotate'])
 const noDomains: Annotation[] = []
 const noClades: ResolvedClade[] = []
 
+/**
+ * Each tip of the full tree in the order the tree draws it, with the on-screen
+ * row that shows it: its own, or the row of the collapsed node standing for it
+ */
+function tipRows(root: HierarchyNode<NodeWithIds>) {
+  const rows = new Map<string, { order: number; row: number }>()
+  let row = 0
+  const pushReversed = (
+    stack: HierarchyNode<NodeWithIds>[],
+    nodes: HierarchyNode<NodeWithIds>[],
+  ) => {
+    for (let i = nodes.length - 1; i >= 0; i--) {
+      stack.push(nodes[i]!)
+    }
+  }
+  const stack = [root]
+  while (stack.length > 0) {
+    const node = stack.pop()!
+    if (node.children?.length) {
+      pushReversed(stack, node.children)
+    } else {
+      const hidden = [node]
+      while (hidden.length > 0) {
+        const tip = hidden.pop()!
+        const kids = tip.children ?? tip._children
+        if (kids?.length) {
+          pushReversed(hidden, kids)
+        } else {
+          rows.set(tip.data.name, { order: rows.size, row })
+        }
+      }
+      row++
+    }
+  }
+  return rows
+}
+
 /**
  * The rows a clade covers and the node an `mrca` names, or undefined when the
  * clade does not resolve: a tip name the tree does not have or has twice, or a
- * leaf count `tips` disagrees with. `index` and `rowNamesSet` are the memoized
- * passes over the tree.
+ * leaf count `tips` disagrees with. A `range` counts its tips in the order
+ * `tips` gives them, so a collapsed clade inside it counts every leaf it
+ * stands for. `index` is the memoized leaf pass over the tree.
  */
 function cladeRows(
   clade: Clade,
   root: HierarchyNode<NodeWithIds>,
   index: Map<string, HierarchyNode<NodeWithIds> | undefined>,
-  rowNamesSet: Map<string, number>,
+  tips: Map<string, { order: number; row: number }>,
 ): { rows: [number, number]; nodeId?: string } | undefined {
   if (clade.range) {
     const [a, b] = clade.range.map(name =>
-      index.get(name) ? rowNamesSet.get(name) : undefined,
+      index.get(name) ? tips.get(name) : undefined,
     )
     if (a === undefined || b === undefined) {
       return undefined
     }
-    const rows: [number, number] = a <= b ? [a, b] : [b, a]
-    return rows[1] - rows[0] + 1 === clade.tips ? { rows } : undefined
+    const [first, last] = a.order <= b.order ? [a, b] : [b, a]
+    return last.order - first.order + 1 === clade.tips
+      ? { rows: [first.row, last.row] }
+      : undefined
   }
   const node = clade.mrca ? mrca(root, clade.mrca, index) : undefined
   if (!node) {
     return undefined
   }
-  const tips = leaves(node)
-  if (tips.length !== clade.tips) {
+  const nodeTips = leaves(node)
+  if (nodeTips.length !== clade.tips) {
     return undefined
   }
   let first = Infinity
   let last = -Infinity
-  for (const tip of tips) {
-    const row = rowNamesSet.get(tip.data.name)
+  for (const tip of nodeTips) {
+    const row = tips.get(tip.data.name)?.row
     if (row !== undefined) {
       first = Math.min(first, row)
       last = Math.max(last, row)
@@ -604,19 +637,21 @@ function cladeRows(
 }
 
 /**
- * Every clade that resolves, with its fill color settled, against the leaf
- * order `rowNamesSet` gives. The tree panel resolves against the displayed
- * rows and the overview against its own, so both take the tree they draw. A
- * `range` record names no node, so the seeding marks, which need one, drop it.
+ * Every clade that resolves, with its fill color settled, against the rows of
+ * `displayed`, the tree as drawn. The tree panel resolves against the
+ * displayed rows and the overview against its own, so both take the tree they
+ * draw. A `range` record names no node, so the seeding marks, which need one,
+ * drop it.
  */
 function resolveClades(
   clades: Clade[],
   root: HierarchyNode<NodeWithIds>,
-  rowNamesSet: Map<string, number>,
+  displayed: HierarchyNode<NodeWithIds>,
 ): ResolvedClade[] {
   const index = leafIndex(root)
+  const tips = tipRows(displayed)
   return clades.flatMap(clade => {
-    const resolved = cladeRows(clade, root, index, rowNamesSet)
+    const resolved = cladeRows(clade, root, index, tips)
     const seeding = seedingMarks.has(clade.mark)
     return resolved && !(seeding && resolved.nodeId === undefined)
       ? [
@@ -750,8 +785,8 @@ function rootTree(tree: NodeWithIds, treeRoot: TreeRoot) {
     : tree
 }
 
-// the inclusive tip indices a node covers, from the row-space extent
-// clusterLayout writes to xMin/xMax as tip centers
+// the inclusive tip indices a node covers, from its xMin/xMax in a layout one
+// row per tip
 function tipRange(node: HierarchyNode): [number, number] {
   return [Math.round(node.xMin! - 0.5), Math.round(node.xMax! - 0.5)]
 }
@@ -765,6 +800,16 @@ const featureChannels = new Set<EncodingChannel>([
 // seqPos -> column indexes per row, keyed on the parse so they are garbage
 // collected with it. A computed would rebuild every row's index when read
 // outside a reactive context.
+// Newick tools write a colon in a name as an underscore, so a tree's row
+// `chr1_100-200` is the GFF's `chr1:100-200`, as FastaMSA.getRow resolves it
+function annotationRowName(id: string, rowNames: Map<string, number>) {
+  if (rowNames.has(id)) {
+    return id
+  }
+  const underscored = id.replaceAll(':', '_')
+  return rowNames.has(underscored) ? underscored : id
+}
+
 const seqPosIndexCache = new WeakMap<object, Map<string, Int32Array>>()
 
 // A segment is a 1:1 run. A segment whose sides differ in length is malformed,
@@ -1096,9 +1141,10 @@ function stateModelFactory({
         /**
          * #property
          * where the view opens, in `highlights` coordinates: `{row, start,
-         * end}` zooms onto residues of that row, `{start, end}` onto alignment
-         * columns. Applied once the alignment and any tree file have loaded,
-         * then cleared, so a reloaded session keeps the reader's own scroll.
+         * end}` zooms onto residues of that row and scrolls the row to the
+         * middle, `{start, end}` zooms onto alignment columns. Applied once the
+         * alignment and any tree file have loaded, then cleared, so a reloaded
+         * session keeps the reader's own scroll.
          */
         region: types.frozen<Region | undefined>(),
         /**
@@ -1140,6 +1186,12 @@ function stateModelFactory({
        * of the snapshot so a link opened in the full app shows the toolbar.
        */
       hideHeader: false,
+      /**
+       * #volatile
+       * shows the import form while the view has no data. MSAViewer turns it
+       * off, since its host supplies the data and the form is the demo app's
+       */
+      importForm: true,
       /**
        * #volatile
        */
@@ -1651,20 +1703,18 @@ function stateModelFactory({
     .views(self => ({
       /**
        * #getter
-       * hideGaps takes effect when there are collapsed rows or allowedGappyness < 100
+       * hideGaps takes effect when a collapse or a focus hides rows, whose
+       * residues leave columns all gaps among the rest, or when
+       * allowedGappyness is under 100
        */
       get hideGapsEffective() {
         return (
           self.hideGaps &&
-          (self.collapsed.length > 0 || self.allowedGappyness < 100)
+          (self.collapsed.length > 0 ||
+            self.showOnly !== undefined ||
+            self.allowedGappyness < 100)
         )
       },
-      /**
-       * #getter
-       */
-      get realAllowedGappyness() {
-        return this.hideGapsEffective ? self.allowedGappyness : 100
-      },
       /**
        * #getter
        * the annotations the overlay, the legend and the encodings draw: the
@@ -1931,7 +1981,7 @@ function stateModelFactory({
         return resolveClades(
           self.clades,
           hierarchy(this.tree, d => d.children),
-          this.rowNamesSet,
+          this.root,
         )
       },
       /**
@@ -2120,21 +2170,19 @@ function stateModelFactory({
         if (!self.showTreeOverview) {
           return undefined
         }
-        const root = buildTreeRoot(this.tree, {
-          collapsed: self.collapsed,
-          rotated: self.rotated,
-          order: self.treeOrder,
-        })
-        const numTips = leaves(root).length
-        clusterLayout(root, numTips, 1)
-        const rootLen = Math.max(root.data.length || 0, 0)
-        const extent = maxLength(root) - rootLen
-        setBrLength(root, -rootLen, extent ? 1 / extent : 0)
+        const layout = layoutTree(
+          buildTreeRoot(this.tree, {
+            collapsed: self.collapsed,
+            rotated: self.rotated,
+            order: self.treeOrder,
+          }),
+          { rowHeight: 1, treeWidth: 1 },
+        )
         return {
-          root,
-          numTips,
-          maxDepthToLeaf: calcDepthToLeaf(root),
-          showBranchLen: self.showBranchLen && extent > 0,
+          root: layout.root,
+          numTips: layout.leaves.length,
+          maxDepthToLeaf: layout.root.depthToLeaf,
+          showBranchLen: self.showBranchLen && layout.rootToTipLength > 0,
         }
       },
 
@@ -2148,10 +2196,11 @@ function stateModelFactory({
         if (!layout || self.clades.length === 0) {
           return noClades
         }
-        const rowNames = new Map(
-          leaves(layout.root).map((leaf, index) => [leaf.data.name, index]),
+        return resolveClades(
+          self.clades,
+          hierarchy(this.tree, d => d.children),
+          layout.root,
         )
-        return resolveClades(self.clades, layout.root, rowNames)
       },
 
       /**
@@ -2244,7 +2293,7 @@ function stateModelFactory({
        * #getter
        */
       get blanks() {
-        const { hideGapsEffective, realAllowedGappyness } = self
+        const { hideGapsEffective, allowedGappyness } = self
         if (!hideGapsEffective) {
           return []
         }
@@ -2260,7 +2309,7 @@ function stateModelFactory({
         // row that stops early counts as gapped for the remainder
         const numCols = this.MSA?.getWidth() ?? 0
         const numRows = strs.length
-        const threshold = Math.ceil((realAllowedGappyness / 100) * numRows)
+        const threshold = Math.ceil((allowedGappyness / 100) * numRows)
         const blankCounts = new Uint32Array(numCols)
         for (let j = 0; j < numRows; j++) {
           const str = strs[j]!
@@ -2344,11 +2393,19 @@ function stateModelFactory({
         return index
       },
 
+      /**
+       * #method
+       * the row's aligned sequence by the name the tree gives it, including
+       * rows a collapsed clade hides. `MSA.getRow` resolves a FASTA name whose
+       * colon a Newick tool wrote as an underscore, which `rowMap` does not
+       */
+      rowSequence(name: string) {
+        return this.MSA?.getRow(name) || undefined
+      },
       /**
        * #getter
-       * every sequence in the alignment, keyed by row name, including rows a
-       * collapsed clade hides. `rows` holds only the rows on screen; lookups
-       * by row name use this
+       * every sequence in the alignment, keyed by the alignment's own row
+       * names, including rows a collapsed clade hides
        */
       get rowMap() {
         const MSA = this.MSA
@@ -2399,10 +2456,11 @@ function stateModelFactory({
        */
       get sequenceType(): 'dna' | 'rna' | 'amino' {
         const letters = this.colStats.lettersPresent
-        // 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'])
+        // the two-base IUPAC codes keep an ambiguous read nucleotide; the
+        // three-base ones (B, D, H, V) are common amino acids, so they don't
+        const ambiguous = ['N', 'R', 'Y', 'K', 'M', 'S', 'W']
+        const dna = new Set(['A', 'C', 'G', 'T', ...ambiguous])
+        const rna = new Set(['A', 'C', 'G', 'U', ...ambiguous])
         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'
@@ -2536,15 +2594,6 @@ function stateModelFactory({
         return this.treeLayout.rootToTipLength
       },
 
-      /**
-       * #getter
-       * x-position of the farthest tip in a phylogram, px: effectiveTreeWidth,
-       * or 0 for a tree with no branch lengths (drawn as a cladogram)
-       */
-      get maxBranchLength() {
-        return this.rootToTipLength ? this.effectiveTreeWidth : 0
-      },
-
       /**
        * #getter
        * pixels per unit of branch length in the phylogram layout, 0 in
@@ -2721,7 +2770,6 @@ function stateModelFactory({
                   data: content?.data,
                   arcs: content?.arcs,
                 },
-                ReactComponent: TrackBlocks,
               }
             })
             columnTrackModels.set(track, computedModel)
@@ -2783,7 +2831,6 @@ function stateModelFactory({
             data: hideGapsEffective ? skipBlanks(blanks, t.data!) : t.data,
             height: rowHeight,
           },
-          ReactComponent: TrackBlocks,
         }))
       },
 
@@ -2806,7 +2853,6 @@ function stateModelFactory({
                   height: self.trackHeight('arc'),
                   arcs,
                 },
-                ReactComponent: TrackBlocks,
               },
             ]
           : []
@@ -2854,7 +2900,6 @@ function stateModelFactory({
             heightKey: resizableKinds.has(model.kind) ? model.kind : undefined,
             height: self.trackHeight(model.kind),
           },
-          ReactComponent: TrackBlocks,
         }))
       },
 
@@ -2897,7 +2942,7 @@ function stateModelFactory({
        * @returns The character at that position
        */
       visibleColToRowLetter(rowName: string, visibleCol: number) {
-        return self.rowMap.get(rowName)?.[
+        return self.rowSequence(rowName)?.[
           this.visibleColToGlobalCol(visibleCol)
         ]
       },
@@ -2982,7 +3027,7 @@ function stateModelFactory({
        * @returns The global column index in the full MSA, or undefined
        */
       seqPosToGlobalCol(rowName: string, seqPos: number) {
-        const seq = self.rowMap.get(rowName)
+        const seq = self.rowSequence(rowName)
         if (seq === undefined) {
           return undefined
         }
@@ -3290,7 +3335,10 @@ function stateModelFactory({
         )
       },
       get annotationsByRow() {
-        return groupBy(this.filteredAnnotations, r => r.id)
+        const { rowNamesSet } = self
+        return groupBy(this.filteredAnnotations, r =>
+          annotationRowName(r.id, rowNamesSet),
+        )
       },
     }))
     .views(self => ({
@@ -3381,7 +3429,9 @@ function stateModelFactory({
         const { annotations, rowNamesSet } = self
         return self.dataInitialized &&
           annotations.length > 0 &&
-          !annotations.some(a => rowNamesSet.has(a.id))
+          !annotations.some(a =>
+            rowNamesSet.has(annotationRowName(a.id, rowNamesSet)),
+          )
           ? [
               `0 of ${annotations.length} annotations name a row in this alignment`,
             ]
@@ -3521,10 +3571,13 @@ function stateModelFactory({
        * #action
        * swap in a different tree over the same alignment. Clears `collapsed`,
        * `rotated` and `showOnly`, since path-derived node ids (node-0-0-1) from the old
-       * tree would match unrelated nodes in the new one.
+       * tree would match unrelated nodes in the new one, and the tree's
+       * filehandle, which the snapshot would otherwise reopen in place of
+       * the new tree
        */
       replaceTree(newick: string) {
         transaction(() => {
+          self.setTreeFilehandle(undefined)
           self.collapsed.clear()
           self.rotated.clear()
           self.setShowOnly(undefined)
@@ -3552,30 +3605,6 @@ function stateModelFactory({
           axis,
         )
       },
-      /**
-       * #action
-       */
-      zoomOutHorizontal() {
-        this.zoomAtCenter(0.75, 'horizontal')
-      },
-      /**
-       * #action
-       */
-      zoomInHorizontal() {
-        this.zoomAtCenter(1.5, 'horizontal')
-      },
-      /**
-       * #action
-       */
-      zoomInVertical() {
-        this.zoomAtCenter(1.5, 'vertical')
-      },
-      /**
-       * #action
-       */
-      zoomOutVertical() {
-        this.zoomAtCenter(0.75, 'vertical')
-      },
       /**
        * #action
        */
@@ -3668,16 +3697,6 @@ function stateModelFactory({
         self.annotations = annotations
       },
 
-      /**
-       * #action
-       * set the overlay from raw InterProScan results keyed by row name. Kept
-       * for downstream plugins that hold the EBI wire format; new code should
-       * adapt to Annotation[] and call setAnnotations.
-       */
-      setDomains(data?: Record<string, InterProScanResults>) {
-        this.setAnnotations(data ? interProScanToAnnotations(data) : [])
-      },
-
       applyGFFText(gffText: string) {
         this.setAnnotations(gffToAnnotations(parseGFF(gffText)))
       },
@@ -3765,7 +3784,7 @@ function stateModelFactory({
               column: column + 1,
               row,
               residue: self.visibleColToSeqPosOneBased(row, visibleCol),
-              letter: self.rowMap.get(row)?.[column],
+              letter: self.rowSequence(row)?.[column],
             }
       },
       /**
@@ -3954,7 +3973,7 @@ function stateModelFactory({
               : visibleDomainTypes.map(d => ({
                   id: d.accession,
                   label: d.name,
-                  color: fillPalette[d.accession]!,
+                  color: d.color ?? fillPalette[d.accession]!,
                 })),
             'domains',
           )
@@ -4221,7 +4240,7 @@ function stateModelFactory({
        * to `end`, gaps included
        */
       get selectionFasta() {
-        const { rowNames, rowMap } = self
+        const { rowNames } = self
         const resolved = this.resolvedSelection
         const span = this.selectionFileSpan
         if (!resolved || !span) {
@@ -4230,7 +4249,7 @@ function stateModelFactory({
         const rows = resolved.rowRuns
           .flatMap(([first, last]) => rowNames.slice(first, last + 1))
           .flatMap(name => {
-            const seq = rowMap.get(name)
+            const seq = self.rowSequence(name)
             return seq === undefined ? [] : [[name, seq] as const]
           })
         return blockFasta(rows, span.start, span.end)
@@ -4327,7 +4346,7 @@ function stateModelFactory({
                 this.visibleDomainTypes.map(d => ({
                   id: d.accession,
                   label: d.name,
-                  color: fillPalette[d.accession]!,
+                  color: d.color ?? fillPalette[d.accession]!,
                 })),
             }
           }
@@ -4504,6 +4523,12 @@ function stateModelFactory({
       setHideHeader(arg: boolean) {
         self.hideHeader = arg
       },
+      /**
+       * #action
+       */
+      setImportForm(arg: boolean) {
+        self.importForm = arg
+      },
       /**
        * #action
        * focus the subtree a click `y` pixels down the tree overview lands on.
@@ -4638,6 +4663,27 @@ function stateModelFactory({
           )
         })
       },
+      /**
+       * #action
+       * zoomToRegion, and for a region naming a row, also scroll that row to
+       * the middle of the alignment, as Go to does. What `region` opens on; a
+       * caller following a range as it moves wants zoomToRegion alone, which
+       * leaves the reader's vertical scroll where they put it.
+       */
+      revealRegion(region: Region) {
+        transaction(() => {
+          this.zoomToRegion(region)
+          const row =
+            region.row === undefined
+              ? undefined
+              : self.rowNamesSet.get(region.row)
+          if (row !== undefined && self.viewInitialized) {
+            self.setScrollY(
+              -(row + 0.5) * self.rowHeight + self.msaAreaHeight / 2,
+            )
+          }
+        })
+      },
       /**
        * #action
        * zoom and scroll so the selected columns fill the alignment's width,
@@ -4769,7 +4815,7 @@ function stateModelFactory({
               self.numColumns > 0 &&
               !(self.treeFilehandle && !self.data.tree)
             ) {
-              this.zoomToRegion(region)
+              this.revealRegion(region)
               self.setRegion(undefined)
             }
           }),
@@ -4853,7 +4899,9 @@ function stateModelFactory({
               }
               try {
                 setLoading?.(true)
-                self.setError(undefined)
+                if (!optional) {
+                  self.setError(undefined)
+                }
                 const text = await fetchTextWithProgress(
                   openLocation(filehandle),
                   status => {