react-msaview 5.7.3 → 5.9.0

package/src/flatToTree.ts

@@ -1,26 +1,37 @@
 interface FlatItem {
   id: number
   parent?: number
+  // NCBI BioTreeContainer features, already un-remapped by parseAsn1. Both are
+  // strings there: the ASN.1 encodes every feature value as one.
+  label?: string
+  dist?: string
 }
 
 interface TreeNode {
   id: string
   name: string
-  parent?: string
+  length?: number
   children: TreeNode[]
 }
 
 export function flatToTree(items: FlatItem[]): TreeNode {
   const nodeMap = new Map(
-    items.map(item => [
-      item.id,
-      {
-        id: `${item.id}`,
-        name: `${item.id}`,
-        parent: item.parent !== undefined ? `${item.parent}` : undefined,
-        children: [] as TreeNode[],
-      },
-    ]),
+    items.map(item => {
+      const length = item.dist === undefined ? undefined : Number(item.dist)
+      return [
+        item.id,
+        {
+          id: `${item.id}`,
+          // the label is what NCBI's own tree viewer shows; falling back to the
+          // node id would render a tree of bare numbers
+          name: item.label || `${item.id}`,
+          ...(length !== undefined && Number.isFinite(length)
+            ? { length }
+            : {}),
+          children: [] as TreeNode[],
+        },
+      ]
+    }),
   )
 
   let root: TreeNode | undefined

package/src/hierarchy.ts

@@ -1,12 +1,28 @@
-import type { NodeWithIds } from './types.ts'
+import {
+  descendants,
+  find,
+  forEachDescendant,
+  forEachLink,
+  hierarchy as coreHierarchy,
+  leaves,
+  links,
+  sort,
+  sum,
+} from '@gmod/newick'
 
-export interface HierarchyNode<T = NodeWithIds> {
-  data: T
+import type { NodeWithIds } from './types.ts'
+import type { HierarchyNode as CoreHierarchyNode } from '@gmod/newick'
+
+/**
+ * A hierarchy node plus the fields this viewer hangs off it during layout.
+ *
+ * The traversals in `@gmod/newick` are generic over the node type rather than
+ * over its data, so they take and return this extended node rather than the base
+ * one, and no call site has to cast.
+ */
+export interface HierarchyNode<T = NodeWithIds> extends CoreHierarchyNode<T> {
   children: HierarchyNode<T>[] | null
   parent: HierarchyNode<T> | null
-  depth: number
-  height: number
-  value?: number
   x?: number
   y?: number
   len?: number
@@ -18,183 +34,32 @@ export interface HierarchyNode<T = NodeWithIds> {
   collapsedTipXFar?: number
 }
 
-export interface HierarchyLink<T = NodeWithIds> {
-  source: HierarchyNode<T>
-  target: HierarchyNode<T>
-}
-
-// All traversals below are iterative (explicit stack / reversed-preorder) rather
-// than recursive: phylogenetic trees can be deeply unbalanced (a caterpillar tree
-// has depth ~= leaf count), which overflows the JS call stack on recursion.
-
-// Pre-order: every parent precedes all of its descendants. Iterating the result
-// in reverse therefore yields a valid post-order (children before parents), which
-// the accumulation helpers rely on.
-export function descendants<T>(node: HierarchyNode<T>): HierarchyNode<T>[] {
-  const result: HierarchyNode<T>[] = []
-  const stack = [node]
-  while (stack.length > 0) {
-    const n = stack.pop()!
-    result.push(n)
-    if (n.children) {
-      for (let i = n.children.length - 1; i >= 0; i--) {
-        stack.push(n.children[i]!)
-      }
-    }
-  }
-  return result
-}
-
-function computeHeight<T>(node: HierarchyNode<T>) {
-  const nodes = descendants(node)
-  for (let i = nodes.length - 1; i >= 0; i--) {
-    const n = nodes[i]!
-    let h = 0
-    if (n.children) {
-      for (const child of n.children) {
-        if (child.height + 1 > h) {
-          h = child.height + 1
-        }
-      }
-    }
-    n.height = h
-  }
-}
-
+// The generic traversals live in @gmod/newick now, shared with the tree sidebar
+// in jbrowse-components. They are iterative there for the reason they were here:
+// a phylogenetic tree can be a caterpillar, whose depth equals its leaf count,
+// and the recursive form overflows the stack somewhere past 5000 tips.
+export {
+  descendants,
+  find,
+  forEachDescendant,
+  forEachLink,
+  leaves,
+  links,
+  sort,
+  sum,
+}
+export type { HierarchyLink } from '@gmod/newick'
+
+// coreHierarchy builds base nodes, and the layout fields above are written onto
+// them afterwards by this package. Every one of those fields is optional, so the
+// two node types are mutually assignable and this needs no cast -- it exists
+// only to declare the wider return type, which is what lets those later
+// assignments typecheck.
 export function hierarchy<T>(
   data: T,
   childrenAccessor: (d: T) => T[] | undefined,
 ): HierarchyNode<T> {
-  const root: HierarchyNode<T> = {
-    data,
-    children: null,
-    parent: null,
-    depth: 0,
-    height: 0,
-  }
-  const stack = [root]
-  while (stack.length > 0) {
-    const node = stack.pop()!
-    const kids = childrenAccessor(node.data)
-    if (kids?.length) {
-      node.children = kids.map(d => ({
-        data: d,
-        children: null,
-        parent: node,
-        depth: node.depth + 1,
-        height: 0,
-      }))
-      for (const child of node.children) {
-        stack.push(child)
-      }
-    }
-  }
-  computeHeight(root)
-  return root
-}
-
-export function sum<T>(
-  node: HierarchyNode<T>,
-  valueFn: (d: T) => number,
-): HierarchyNode<T> {
-  const nodes = descendants(node)
-  for (let i = nodes.length - 1; i >= 0; i--) {
-    const n = nodes[i]!
-    let s = valueFn(n.data)
-    if (n.children) {
-      for (const child of n.children) {
-        s += child.value!
-      }
-    }
-    n.value = s
-  }
-  return node
-}
-
-export function sort<T>(
-  node: HierarchyNode<T>,
-  compareFn: (a: HierarchyNode<T>, b: HierarchyNode<T>) => number,
-): HierarchyNode<T> {
-  const stack = [node]
-  while (stack.length > 0) {
-    const n = stack.pop()!
-    if (n.children) {
-      n.children.sort(compareFn)
-      for (const child of n.children) {
-        stack.push(child)
-      }
-    }
-  }
-  return node
-}
-
-export function find<T>(
-  node: HierarchyNode<T>,
-  predicate: (n: HierarchyNode<T>) => boolean,
-): HierarchyNode<T> | undefined {
-  const stack = [node]
-  let found: HierarchyNode<T> | undefined
-  while (stack.length > 0 && found === undefined) {
-    const n = stack.pop()!
-    if (predicate(n)) {
-      found = n
-    } else if (n.children) {
-      for (let i = n.children.length - 1; i >= 0; i--) {
-        stack.push(n.children[i]!)
-      }
-    }
-  }
-  return found
-}
-
-export function leaves<T>(node: HierarchyNode<T>): HierarchyNode<T>[] {
-  const result: HierarchyNode<T>[] = []
-  const stack = [node]
-  while (stack.length > 0) {
-    const n = stack.pop()!
-    if (n.children) {
-      for (let i = n.children.length - 1; i >= 0; i--) {
-        stack.push(n.children[i]!)
-      }
-    } else {
-      result.push(n)
-    }
-  }
-  return result
-}
-
-export function links<T>(node: HierarchyNode<T>): HierarchyLink<T>[] {
-  const result: HierarchyLink<T>[] = []
-  forEachLink(node, (source, target) => {
-    result.push({ source, target })
-  })
-  return result
-}
-
-export function forEachLink<T>(
-  node: HierarchyNode<T>,
-  cb: (source: HierarchyNode<T>, target: HierarchyNode<T>) => void,
-) {
-  const stack = [node]
-  while (stack.length > 0) {
-    const n = stack.pop()!
-    if (n.children) {
-      for (let i = n.children.length - 1; i >= 0; i--) {
-        const child = n.children[i]!
-        cb(n, child)
-        stack.push(child)
-      }
-    }
-  }
-}
-
-export function forEachDescendant<T>(
-  node: HierarchyNode<T>,
-  cb: (n: HierarchyNode<T>) => void,
-) {
-  for (const n of descendants(node)) {
-    cb(n)
-  }
+  return coreHierarchy(data, childrenAccessor)
 }
 
 export function clusterLayout<T>(

package/src/largeTree.test.ts

@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+import { expect, test } from 'vitest'
+
+import MSAModelF from './model.ts'
+
+// jsdom has no 2d context, and measureTextCanvas throws without one. Only the
+// width matters here, so a stub keeps the test about tree size.
+HTMLCanvasElement.prototype.getContext = (() => ({
+  font: '12px sans-serif',
+  measureText: (t: string) => ({ width: t.length * 7 }),
+})) as unknown as typeof HTMLCanvasElement.prototype.getContext
+
+// The import form ships a "230k COVID-19 samples (tree only)" example, so a tree
+// this size is a supported input rather than a hypothetical. Every leaf gets a
+// measured label, and anything that then reduces over them per row has to do it
+// without passing one argument per row.
+function flatNewick(n: number) {
+  return `(${Array.from({ length: n }, (_, i) => `s${i}:0.1`).join(',')});`
+}
+
+test('a tree far past the argument limit still lays out', () => {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    data: { tree: flatNewick(200_000) },
+  })
+  model.setWidth(1000)
+
+  expect(model.numRows).toBe(200_000)
+  // 's199999' is the longest name, at 7 chars * 7px
+  expect(model.labelsWidth).toBe(49)
+  expect(model.treeWidth).toBeGreaterThan(0)
+})

package/src/model.ts

@@ -31,6 +31,7 @@ import {
   defaultScrollX,
   defaultScrollY,
   defaultScrollZoom,
+  defaultShowDomainLegend,
   defaultShowDomains,
   defaultSubFeatureRows,
   maxCellSize,
@@ -132,6 +133,15 @@ function stateModelFactory() {
          * #property
          */
         showDomains: stripDefault(types.boolean, defaultShowDomains),
+        /**
+         * #property
+         * whether the domain legend is expanded. The legend floats over the
+         * top-right of the alignment, so on a tall panel it covers real
+         * residues -- persisting the state is what lets a reader collapse it
+         * and keep it collapsed, and what lets a session or a figure open with
+         * it already out of the way.
+         */
+        showDomainLegend: stripDefault(types.boolean, defaultShowDomainLegend),
         /**
          * #property
          */
@@ -475,6 +485,13 @@ function stateModelFactory() {
       setShowDomains(arg: boolean) {
         self.showDomains = arg
       },
+      /**
+       * #action
+       * expand or collapse the domain legend that floats over the alignment
+       */
+      setShowDomainLegend(arg: boolean) {
+        self.showDomainLegend = arg
+      },
       /**
        * #action
        */
@@ -1438,15 +1455,28 @@ function stateModelFactory() {
           : new Map(
               leaves.map(node => {
                 const { name } = node.data
-                const displayName = treeMetadata[name]?.genome ?? name
+                // `||`, matching renderTreeLabels: an empty genome falls back
+                // to the row name, and measuring '' would size the gutter (and
+                // the label's click target) to nothing
+                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())
+        // a loop, not Math.max(...widths.values()): spreading a map of every
+        // leaf passes one argument per row, and the argument limit is somewhere
+        // around 125k -- so the bundled 230k-tip COVID tree threw
+        // "RangeError: Maximum call stack size exceeded" out of a getter the
+        // treeWidth autorun reads on load
+        let max = 0
+        for (const width of this.labelWidthMap.values()) {
+          if (width > max) {
+            max = width
+          }
+        }
+        return max
       },
 
       /**
@@ -2298,6 +2328,7 @@ function stateModelFactory() {
         ...(rest.treeMetadataFilehandle
           ? {}
           : { treeMetadata: data.treeMetadata }),
+        ...(rest.gffFilehandle ? {} : { gff: data.gff }),
       },
     }))
 }

package/src/neighborJoining.test.ts

@@ -3,6 +3,8 @@ import { describe, expect, test } from 'vitest'
 
 import { calculateNeighborJoiningTree } from './neighborJoining.ts'
 
+import type { NewickNode } from '@gmod/newick'
+
 describe('calculateNeighborJoiningTree', () => {
   test('generates valid Newick tree for 2 sequences', () => {
     const rows: [string, string][] = [
@@ -81,6 +83,21 @@ describe('calculateNeighborJoiningTree', () => {
     expect(tree).toContain('seq3')
   })
 
+  test('treats a dot gap the same as a dash gap', () => {
+    // stockholm and a3m pad with '.', so the two spellings have to score alike
+    const withDashes: [string, string][] = [
+      ['seq1', 'MK-AYLSMFG'],
+      ['seq2', 'MKAAYLSMFG'],
+      ['seq3', 'MKA-YLSMFG'],
+    ]
+    const withDots = withDashes.map(
+      ([name, seq]) => [name, seq.replaceAll('-', '.')] as [string, string],
+    )
+    expect(calculateNeighborJoiningTree(withDots)).toBe(
+      calculateNeighborJoiningTree(withDashes),
+    )
+  })
+
   test('names with special characters round-trip through Newick parsing', () => {
     const rows: [string, string][] = [
       ['EU105457.1|chr09:67680268..67675529_LTR/Copia', 'MKAA'],
@@ -89,12 +106,10 @@ describe('calculateNeighborJoiningTree', () => {
     const newick = calculateNeighborJoiningTree(rows)
     const tree = parseNewick(newick)
 
-    function getLeafNames(node: Record<string, unknown>): string[] {
-      const children = node.children as Record<string, unknown>[] | undefined
-      if (!children?.length) {
-        return [node.name as string]
-      }
-      return children.flatMap(c => getLeafNames(c))
+    function getLeafNames(node: NewickNode): (string | undefined)[] {
+      return node.children?.length
+        ? node.children.flatMap(c => getLeafNames(c))
+        : [node.name]
     }
     const names = getLeafNames(tree)
     expect(names).toContain('EU105457.1|chr09:67680268..67675529_LTR/Copia')

package/src/neighborJoining.ts

@@ -44,6 +44,14 @@ function getBlosum62Score(a: string, b: string) {
   return BLOSUM62.get(a.toUpperCase())?.get(b.toUpperCase()) ?? -4
 }
 
+// stockholm and a3m write gaps as '.', not just '-'. Scoring a '.' as a residue
+// charges the pair the unknown-symbol penalty on every padded column, so two
+// sequences that differ only in where an unrelated row forced padding come out
+// as divergent.
+function isGap(c: string) {
+  return c === '-' || c === '.'
+}
+
 function computePairwiseDistance(seq1: string, seq2: string) {
   if (seq1.length !== seq2.length) {
     throw new Error('Sequences must have the same length (aligned)')
@@ -58,11 +66,13 @@ function computePairwiseDistance(seq1: string, seq2: string) {
     const a = seq1[i]!
     const b = seq2[i]!
 
-    if (a === '-' && b === '-') {
+    const aGap = isGap(a)
+    const bGap = isGap(b)
+    if (aGap && bGap) {
       continue
     }
 
-    if (a === '-' || b === '-') {
+    if (aGap || bGap) {
       mismatches++
       continue
     }

package/src/parseAsn1.test.ts

@@ -2,6 +2,8 @@ import { readFileSync } from 'node:fs'
 
 import { expect, test } from 'vitest'
 
+import { flatToTree } from './flatToTree.ts'
+import MSAModelF from './model.ts'
 import { parseAsn1 } from './parseAsn1.ts'
 
 const r = readFileSync(
@@ -18,3 +20,17 @@ test('throws a clear error on input missing required sections', () => {
     /missing/,
   )
 })
+
+test('the tree keeps the labels and branch lengths the file carries', () => {
+  // the parsed features have to survive into the tree the viewer draws, or a
+  // BLAST tree renders as a lengthless list of node ids
+  const model = MSAModelF().create({ type: 'MsaView', data: { tree: r } })
+  model.setWidth(1000)
+
+  expect(model.numRows).toBe(101)
+  expect(model.rowNames[0]).toBe(
+    'sodium/glucose cotransporter 4 [Gouania willdenowi]',
+  )
+  expect(model.allBranchesLength0).toBe(false)
+  expect(flatToTree(parseAsn1(r)).length).toBeUndefined()
+})

package/src/stripDefaultSnapshot.test.ts

@@ -55,3 +55,33 @@ test('inline data is stripped when a filehandle can refetch it', () => {
   expect(snap.data.msa).toBeUndefined()
   expect(snap.data.tree).toBe('(a,b);')
 })
+
+test('inline gff survives the snapshot when no gffFilehandle can refetch it', () => {
+  const gff = 's1\tx\tprotein_match\t1\t3\t.\t.\t.\tName=PF1'
+  const withInlineGff = MsaView.create({
+    type: 'MsaView',
+    data: { msa: '>s1\nACGT', gff },
+  })
+  expect(getSnapshot(withInlineGff).data.gff).toBe(gff)
+
+  const withFilehandle = MsaView.create({
+    type: 'MsaView',
+    data: { msa: '>s1\nACGT', gff },
+    gffFilehandle: {
+      uri: 'http://example.com/x.gff',
+      locationType: 'UriLocation',
+    },
+  })
+  expect(getSnapshot(withFilehandle).data.gff).toBeUndefined()
+})
+
+// The legend floats over the top-right of the alignment, so collapsing it is a
+// way of seeing the residues under it. As component state that choice was lost
+// on every reload and could not be set by a session or a figure at all.
+test('a collapsed domain legend survives into the snapshot', () => {
+  const model = MsaView.create({ type: 'MsaView' })
+  expect(getSnapshot(model).showDomainLegend).toBeUndefined()
+  model.setShowDomainLegend(false)
+  expect(getSnapshot(model).showDomainLegend).toBe(false)
+  expect(MsaView.create(getSnapshot(model)).showDomainLegend).toBe(false)
+})

package/src/version.ts

@@ -1 +1 @@
-export const version = '5.7.3'
+export const version = '5.9.0'