react-msaview 5.0.7 → 5.0.16

package/src/components/tree/renderTreeCanvas.ts

@@ -1,3 +1,6 @@
+import { descendants, links } from '../../hierarchy.ts'
+
+import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
 import type { Theme } from '@mui/material'
 
@@ -7,6 +10,53 @@ const extendBounds = 5
 const radius = 2.5
 const d = radius * 2
 
+// Cladogram positioning algorithm based on ape package's plot.phylo
+// Uses topological depth (steps to tips) instead of branch length for x-positioning
+// This ensures all leaf nodes align at the same x-coordinate (rightmost position)
+// See: https://github.com/emmanuelparadis/ape/blob/master/R/plot.phylo.R
+function calcDepthToLeaf(node: HierarchyNode): number {
+  if (node.depthToLeaf !== undefined) {
+    return node.depthToLeaf
+  }
+  if (!node.children || node.children.length === 0) {
+    node.depthToLeaf = 0
+  } else {
+    let maxDepth = 0
+    for (const child of node.children) {
+      maxDepth = Math.max(maxDepth, 1 + calcDepthToLeaf(child))
+    }
+    node.depthToLeaf = maxDepth
+  }
+  return node.depthToLeaf
+}
+
+function findMaxBranchLen(node: HierarchyNode): number {
+  let maxLen = node.len || 0
+  if (node.children) {
+    for (const child of node.children) {
+      maxLen = Math.max(maxLen, findMaxBranchLen(child))
+    }
+  }
+  return maxLen
+}
+
+// Calculate node x-coordinate for both phylogram (with branch lengths) and cladogram (topology only) modes
+// For cladograms: x = (maxDepthToLeaf - nodeDepthToLeaf) / maxDepthToLeaf * maxWidth
+// This positions: leaves at maxWidth (rightmost), root at 0 (leftmost), internal nodes proportionally in between
+// Matches ape's: xx <- max(xx) - xx (where xx is depth from each node to tips)
+function getNodeX(
+  node: HierarchyNode,
+  showBranchLen: boolean,
+  maxBranchLen: number,
+  maxDepthToLeaf: number,
+): number | undefined {
+  if (showBranchLen) {
+    return node.len
+  }
+  const depthToLeaf = calcDepthToLeaf(node)
+  return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * maxBranchLen
+}
+
 interface ClickEntry {
   name: string
   id: string
@@ -45,15 +95,14 @@ export function renderTree({
   const { hierarchy, showBranchLenEffective: showBranchLen, blockSize } = model
   const by = blockSizeYOverride || blockSize
   ctx.strokeStyle = theme.palette.text.primary
-  for (const link of hierarchy.links()) {
+  const maxBranchLen = findMaxBranchLen(hierarchy)
+  const maxDepthToLeaf = calcDepthToLeaf(hierarchy)
+  for (const link of links(hierarchy)) {
     const { source, target } = link
-    if (target.height === 0 && !showBranchLen) {
-      continue
-    }
     const sy = source.x!
     const ty = target.x!
-    const tx = showBranchLen ? (target as { len?: number }).len : target.y
-    const sx = showBranchLen ? (source as { len?: number }).len : source.y
+    const tx = getNodeX(target, showBranchLen, maxBranchLen, maxDepthToLeaf)
+    const sx = getNodeX(source, showBranchLen, maxBranchLen, maxDepthToLeaf)
     if (tx === undefined || sx === undefined) {
       continue
     }
@@ -94,8 +143,10 @@ export function renderNodeBubbles({
     marginLeft: ml,
   } = model
   const by = blockSizeYOverride || blockSize
-  for (const node of hierarchy.descendants()) {
-    const x = showBranchLen ? (node as { len?: number }).len : node.y
+  const maxBranchLen = findMaxBranchLen(hierarchy)
+  const maxDepthToLeaf = calcDepthToLeaf(hierarchy)
+  for (const node of descendants(hierarchy)) {
+    const x = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf)
     if (x === undefined) {
       continue
     }
@@ -103,7 +154,7 @@ export function renderNodeBubbles({
     const y = node.x!
     const { id, name } = data
     if (
-      node.height > 1 &&
+      node.height >= 1 &&
       y > offsetY - extendBounds &&
       y < offsetY + by + extendBounds
     ) {
@@ -146,18 +197,15 @@ export function renderTreeLabels({
     fontSize,
     showBranchLenEffective: showBranchLen,
     treeMetadata,
-    hierarchy,
-    collapsed,
-    collapsedLeaves,
     blockSize,
     labelsAlignRight,
     drawTree,
     treeAreaWidth,
-    treeWidth,
     treeAreaWidthMinusMargin,
     marginLeft,
     leaves,
     noTree,
+    hierarchy,
   } = model
   const by = blockSizeYOverride || blockSize
   const emHeight = ctx.measureText('M').width
@@ -167,13 +215,13 @@ export function renderTreeLabels({
   } else {
     ctx.textAlign = 'start'
   }
+  const maxBranchLen = findMaxBranchLen(hierarchy)
+  const maxDepthToLeaf = calcDepthToLeaf(hierarchy)
   for (const node of leaves) {
     const {
       data: { name, id },
     } = node
-    const len = (node as { len?: number }).len
     const y = node.x!
-    const x = node.y!
 
     const displayName = treeMetadata[name]?.genome || name
     if (y > offsetY - extendBounds && y < offsetY + by + extendBounds) {
@@ -181,18 +229,7 @@ export function renderTreeLabels({
       const yp = y + fontSize / 4
       let xp = 0
       if (!noTree) {
-        xp = (showBranchLen ? len : x) || 0
-        if (
-          !showBranchLen &&
-          !collapsed.includes(id) &&
-          !collapsedLeaves.includes(id)
-        ) {
-          // this subtraction is a hack to compensate for the leafnode rendering
-          // glitch (issue #71). the context is that an extra leaf node is added
-          // so that 'collapsing/hiding leaf nodes is possible' but this causes
-          // weird workarounds
-          xp -= treeWidth / hierarchy.height
-        }
+        xp = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf) || 0
       }
 
       const { width } = ctx.measureText(displayName)

package/src/constants.ts

@@ -8,7 +8,6 @@ export const defaultCurrentAlignment = 0
 export const defaultShowDomains = false
 export const defaultHideGaps = true
 export const defaultAllowedGappyness = 100
-export const defaultContrastLettering = true
 export const defaultSubFeatureRows = false
 export const defaultDrawMsaLetters = true
 
@@ -21,7 +20,6 @@ export const defaultDrawLabels = true
 export const defaultLabelsAlignRight = false
 export const defaultTreeAreaWidth = 400
 export const defaultTreeWidth = 300
-export const defaultTreeWidthMatchesArea = true
 export const defaultShowBranchLen = true
 export const defaultDrawTree = true
 export const defaultDrawNodeBubbles = true

package/src/fetchUtils.ts

@@ -20,11 +20,6 @@ export async function jsonfetch<T>(url: string, args?: RequestInit) {
   return response.json() as T
 }
 
-export async function arraybufferfetch(url: string) {
-  const res = await myfetch(url)
-  return res.arrayBuffer()
-}
-
 export function timeout(time: number) {
   return new Promise(res => setTimeout(res, time))
 }

package/src/flatToTree.ts

@@ -1,10 +1,8 @@
-// Define the input item interface
 interface FlatItem {
   id: number
   parent?: number
 }
 
-// Define the tree node interface
 interface TreeNode {
   id: string
   name: string
@@ -12,46 +10,30 @@ interface TreeNode {
   children: TreeNode[]
 }
 
-/**
- * Parses a flat list of items into a tree structure
- * @param items - Array of flat items with id and optional parent
- * @returns Array of root tree nodes
- */
 export function flatToTree(items: FlatItem[]): TreeNode {
-  // Create a map to store all nodes by their id for quick lookup
-  const nodeMap = new Map<number, 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[],
+      },
+    ]),
+  )
 
-  // First pass: Create all tree nodes
-  items.forEach(item => {
-    nodeMap.set(item.id, {
-      ...item,
-      id: `${item.id}`,
-      name: `${item.id}`,
-      parent: item.parent !== undefined ? `${item.parent}` : undefined,
-      children: [],
-    })
-  })
-
-  // Second pass: Build parent-child relationships
-  const roots: TreeNode[] = []
-
-  items.forEach(item => {
+  let root: TreeNode | undefined
+  for (const item of items) {
     const node = nodeMap.get(item.id)!
-
-    if (item.parent !== undefined) {
-      // This item has a parent, add it to parent's children
-      const parentNode = nodeMap.get(item.parent)
-      if (parentNode) {
-        parentNode.children.push(node)
-      } else {
-        // Parent doesn't exist, treat as root
-        roots.push(node)
-      }
+    const parent =
+      item.parent !== undefined ? nodeMap.get(item.parent) : undefined
+    if (parent) {
+      parent.children.push(node)
     } else {
-      // This item has no parent, it's a root node
-      roots.push(node)
+      root ??= node
     }
-  })
+  }
 
-  return roots[0]!
+  return root!
 }

package/src/hierarchy.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, test } from 'vitest'
+
+import { collapse, find, hierarchy, leaves, sort, sum } from './hierarchy.ts'
+
+import type { NodeWithIds } from './types.ts'
+
+function makeTree(): NodeWithIds {
+  return {
+    id: 'root',
+    name: 'root',
+    children: [
+      {
+        id: 'A',
+        name: 'A',
+        children: [
+          { id: 'A1', name: 'A1', children: [] },
+          { id: 'A2', name: 'A2', children: [] },
+        ],
+      },
+      {
+        id: 'B',
+        name: 'B',
+        children: [
+          { id: 'B1', name: 'B1', children: [] },
+          { id: 'B2', name: 'B2', children: [] },
+        ],
+      },
+    ],
+  }
+}
+
+describe('hierarchy', () => {
+  test('builds hierarchy from tree data', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    expect(h.data.id).toBe('root')
+    expect(h.children?.length).toBe(2)
+    expect(h.height).toBe(2)
+  })
+
+  test('sets parent references', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    expect(h.parent).toBeNull()
+    expect(h.children![0]!.parent).toBe(h)
+    expect(h.children![0]!.children![0]!.parent).toBe(h.children![0])
+  })
+})
+
+describe('leaves', () => {
+  test('returns leaf nodes', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const l = leaves(h)
+    expect(l.map(n => n.data.name)).toEqual(['A1', 'A2', 'B1', 'B2'])
+  })
+})
+
+describe('find', () => {
+  test('finds node by id', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const node = find(h, n => n.data.id === 'B1')
+    expect(node?.data.name).toBe('B1')
+  })
+
+  test('returns undefined for missing id', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    expect(find(h, n => n.data.id === 'Z')).toBeUndefined()
+  })
+})
+
+describe('collapse', () => {
+  test('hides children of a branch node', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const nodeA = find(h, n => n.data.id === 'A')!
+    collapse(nodeA)
+    expect(nodeA.children).toBeNull()
+    expect(nodeA._children?.length).toBe(2)
+    expect(leaves(h).map(n => n.data.name)).toEqual(['A', 'B1', 'B2'])
+  })
+
+  test('does nothing on a leaf node', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const leaf = find(h, n => n.data.id === 'A1')!
+    collapse(leaf)
+    expect(leaves(h).map(n => n.data.name)).toEqual(['A1', 'A2', 'B1', 'B2'])
+  })
+})
+
+describe('leaf removal via parent.children filter', () => {
+  test('removing a leaf from its parent hides it from leaves()', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const leaf = find(h, n => n.data.id === 'A1')!
+    leaf.parent!.children = leaf.parent!.children!.filter(
+      c => c.data.id !== 'A1',
+    )
+    expect(leaves(h).map(n => n.data.name)).toEqual(['A2', 'B1', 'B2'])
+  })
+
+  test('removing all leaves from a branch makes the branch a leaf', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    const nodeA = find(h, n => n.data.id === 'A')!
+    nodeA.children = []
+    expect(leaves(h).map(n => n.data.name)).toEqual(['B1', 'B2'])
+  })
+})
+
+describe('sort', () => {
+  test('sorts children', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    sort(h, (a, b) => b.data.name.localeCompare(a.data.name))
+    expect(h.children!.map(c => c.data.name)).toEqual(['B', 'A'])
+  })
+})
+
+describe('sum', () => {
+  test('computes leaf counts', () => {
+    const h = hierarchy(makeTree(), d => d.children)
+    sum(h, d => (d.children.length > 0 ? 0 : 1))
+    expect(h.value).toBe(4)
+    expect(find(h, n => n.data.id === 'A')?.value).toBe(2)
+  })
+})

package/src/hierarchy.ts

@@ -0,0 +1,221 @@
+import type { NodeWithIds } from './types.ts'
+
+export interface HierarchyNode<T = NodeWithIds> {
+  data: T
+  children: HierarchyNode<T>[] | null
+  parent: HierarchyNode<T> | null
+  depth: number
+  height: number
+  value?: number
+  x?: number
+  y?: number
+  len?: number
+  depthToLeaf?: number
+  _children?: HierarchyNode<T>[] | null
+}
+
+export interface HierarchyLink<T = NodeWithIds> {
+  source: HierarchyNode<T>
+  target: HierarchyNode<T>
+}
+
+function computeHeight<T>(node: HierarchyNode<T>): number {
+  let h = 0
+  if (node.children) {
+    for (const child of node.children) {
+      const ch = computeHeight(child) + 1
+      if (ch > h) {
+        h = ch
+      }
+    }
+  }
+  node.height = h
+  return h
+}
+
+function wrap<T>(
+  data: T,
+  childrenAccessor: (d: T) => T[] | undefined,
+  parent: HierarchyNode<T> | null,
+  depth: number,
+): HierarchyNode<T> {
+  const kids = childrenAccessor(data)
+  const node: HierarchyNode<T> = {
+    data,
+    children: null,
+    parent,
+    depth,
+    height: 0,
+  }
+  if (kids?.length) {
+    node.children = kids.map(d => wrap(d, childrenAccessor, node, depth + 1))
+  }
+  return node
+}
+
+export function hierarchy<T>(
+  data: T,
+  childrenAccessor: (d: T) => T[] | undefined,
+): HierarchyNode<T> {
+  const root = wrap(data, childrenAccessor, null, 0)
+  computeHeight(root)
+  return root
+}
+
+export function sum<T>(
+  node: HierarchyNode<T>,
+  valueFn: (d: T) => number,
+): HierarchyNode<T> {
+  function visit(n: HierarchyNode<T>): number {
+    let s = valueFn(n.data)
+    if (n.children) {
+      for (const child of n.children) {
+        s += visit(child)
+      }
+    }
+    n.value = s
+    return s
+  }
+  visit(node)
+  return node
+}
+
+export function sort<T>(
+  node: HierarchyNode<T>,
+  compareFn: (a: HierarchyNode<T>, b: HierarchyNode<T>) => number,
+): HierarchyNode<T> {
+  function visit(n: HierarchyNode<T>) {
+    if (n.children) {
+      n.children.sort(compareFn)
+      for (const child of n.children) {
+        visit(child)
+      }
+    }
+  }
+  visit(node)
+  return node
+}
+
+export function find<T>(
+  node: HierarchyNode<T>,
+  predicate: (n: HierarchyNode<T>) => boolean,
+): HierarchyNode<T> | undefined {
+  if (predicate(node)) {
+    return node
+  }
+  if (node.children) {
+    for (const child of node.children) {
+      const result = find(child, predicate)
+      if (result) {
+        return result
+      }
+    }
+  }
+  return undefined
+}
+
+export function leaves<T>(node: HierarchyNode<T>): HierarchyNode<T>[] {
+  const result: HierarchyNode<T>[] = []
+  function visit(n: HierarchyNode<T>) {
+    if (n.children) {
+      for (const child of n.children) {
+        visit(child)
+      }
+    } else {
+      result.push(n)
+    }
+  }
+  visit(node)
+  return result
+}
+
+export function descendants<T>(node: HierarchyNode<T>): HierarchyNode<T>[] {
+  const result: HierarchyNode<T>[] = []
+  function visit(n: HierarchyNode<T>) {
+    result.push(n)
+    if (n.children) {
+      for (const child of n.children) {
+        visit(child)
+      }
+    }
+  }
+  visit(node)
+  return result
+}
+
+export function links<T>(node: HierarchyNode<T>): HierarchyLink<T>[] {
+  const result: HierarchyLink<T>[] = []
+  function visit(n: HierarchyNode<T>) {
+    if (n.children) {
+      for (const child of n.children) {
+        result.push({ source: n, target: child })
+        visit(child)
+      }
+    }
+  }
+  visit(node)
+  return result
+}
+
+export function clusterLayout<T>(
+  root: HierarchyNode<T>,
+  sizeX: number,
+  sizeY: number,
+) {
+  const leafNodes = leaves(root)
+  const n = leafNodes.length
+  const step = sizeX / n
+
+  for (let i = 0; i < n; i++) {
+    leafNodes[i]!.x = (i + 0.5) * step
+  }
+
+  function assignX(node: HierarchyNode<T>) {
+    if (!node.children) {
+      return
+    }
+    for (const child of node.children) {
+      assignX(child)
+    }
+    let sum = 0
+    for (const child of node.children) {
+      sum += child.x!
+    }
+    node.x = sum / node.children.length
+  }
+  assignX(root)
+
+  const rootHeight = root.height
+  function assignY(node: HierarchyNode<T>, depth: number) {
+    node.y = rootHeight === 0 ? sizeY : (depth / rootHeight) * sizeY
+    if (node.children) {
+      for (const child of node.children) {
+        assignY(child, depth + 1)
+      }
+    }
+  }
+  assignY(root, 0)
+}
+
+export function collapse<T>(node: HierarchyNode<T>) {
+  if (node.children) {
+    node._children = node.children
+    node.children = null
+  }
+}
+
+export function maxLength(d: HierarchyNode): number {
+  return (
+    (d.data.length || 0) +
+    (d.children ? d.children.reduce((m, c) => Math.max(m, maxLength(c)), 0) : 0)
+  )
+}
+
+export function setBrLength(d: HierarchyNode, y0: number, k: number) {
+  d.len = (y0 += Math.max(d.data.length || 0, 0)) * k
+  if (d.children) {
+    for (const child of d.children) {
+      setBrLength(child, y0, k)
+    }
+  }
+}

package/src/index.ts

@@ -1,6 +1,8 @@
 export { default as MSAView } from './components/Loading.tsx'
+export { default as MSAViewer } from './components/MSAViewer.tsx'
 export { type MsaViewModel, default as MSAModelF } from './model.ts'
 export type { MSAParserType } from 'msa-parsers'
+export type { HierarchyNode } from './hierarchy.ts'
 export type { InterProScanResults } from './launchInterProScan.ts'
 export type {
   Accession,

package/src/launchInterProScan.ts

@@ -52,7 +52,7 @@ async function runInterProScan({
   await loadInterProScanResultsWithStatus({ jobId, model })
 }
 
-export function loadInterProScanResults(jobId: string) {
+function loadInterProScanResults(jobId: string) {
   return jsonfetch<InterProScanResponse>(
     `${base}/iprscan5/result/${jobId}/json`,
   )
@@ -111,14 +111,15 @@ export async function launchInterProScan({
         programs,
         model,
       })
+    } else {
+      throw new Error('unknown algorithm')
     }
-    throw new Error('unknown algorithm')
   } finally {
     onProgress()
   }
 }
 
-export async function loadInterProScanResultsWithStatus({
+async function loadInterProScanResultsWithStatus({
   jobId,
   model,
 }: {

package/src/model/DataModel.ts

@@ -22,6 +22,10 @@ export function DataModelF() {
        * #property
        */
       treeMetadata: types.maybe(types.string),
+      /**
+       * #property
+       */
+      gff: types.maybe(types.string),
     })
     .actions(self => ({
       /**
@@ -42,15 +46,22 @@ export function DataModelF() {
       setTreeMetadata(treeMetadata?: string) {
         self.treeMetadata = treeMetadata
       },
+      /**
+       * #action
+       */
+      setGFF(gff?: string) {
+        self.gff = gff
+      },
     }))
     .postProcessSnapshot(snap => {
-      const { tree, msa, treeMetadata } = snap
+      const { tree, msa, treeMetadata, gff } = snap
       const max = 50_000
       return {
         tree: tree && tree.length > max ? undefined : tree,
         msa: msa && msa.length > max ? undefined : msa,
         treeMetadata:
           treeMetadata && treeMetadata.length > max ? undefined : treeMetadata,
+        gff: gff && gff.length > max ? undefined : gff,
       }
     })
 }

package/src/model/msaModel.ts

@@ -5,8 +5,6 @@ import { defaultBgColor, defaultColorSchemeName } from '../constants.ts'
 /**
  * #stateModel MSAModel
  */
-function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
-
 export function MSAModelF() {
   return types
     .model({