react-msaview 5.0.13 → 5.0.16

package/src/components/tree/renderTreeCanvas.test.ts

@@ -0,0 +1,205 @@
+import { describe, expect, it } from 'vitest'
+
+function calcDepthToLeaf(node: any): 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: any): number {
+  let maxLen = node.len || 0
+  if (node.children) {
+    for (const child of node.children) {
+      maxLen = Math.max(maxLen, findMaxBranchLen(child))
+    }
+  }
+  return maxLen
+}
+
+function getNodeX(
+  node: any,
+  showBranchLen: boolean,
+  maxBranchLen: number,
+  maxDepthToLeaf: number,
+): number | undefined {
+  if (showBranchLen) {
+    return node.len
+  }
+  const depthToLeaf = calcDepthToLeaf(node)
+  return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * maxBranchLen
+}
+
+describe('Tree rendering positioning', () => {
+  describe('calcDepthToLeaf', () => {
+    it('should return 0 for leaf nodes', () => {
+      const leaf: any = { id: 'leaf', data: { id: 'leaf' }, children: null }
+      expect(calcDepthToLeaf(leaf)).toBe(0)
+    })
+
+    it('should return 1 for nodes with only leaf children', () => {
+      const leaf1: any = { id: 'leaf1', data: { id: 'leaf1' }, children: null }
+      const leaf2: any = { id: 'leaf2', data: { id: 'leaf2' }, children: null }
+      const parent: any = {
+        id: 'parent',
+        data: { id: 'parent' },
+        children: [leaf1, leaf2],
+      }
+      expect(calcDepthToLeaf(parent)).toBe(1)
+    })
+
+    it('should return correct depth for nested tree', () => {
+      const leaf1: any = { id: 'leaf1', data: { id: 'leaf1' }, children: null }
+      const leaf2: any = { id: 'leaf2', data: { id: 'leaf2' }, children: null }
+      const intermediate: any = {
+        id: 'int',
+        data: { id: 'int' },
+        children: [leaf1, leaf2],
+      }
+      const root: any = {
+        id: 'root',
+        data: { id: 'root' },
+        children: [intermediate],
+      }
+
+      expect(calcDepthToLeaf(leaf1)).toBe(0)
+      expect(calcDepthToLeaf(intermediate)).toBe(1)
+      expect(calcDepthToLeaf(root)).toBe(2)
+    })
+
+    it('should cache result', () => {
+      const leaf: any = { id: 'leaf', data: { id: 'leaf' }, children: null }
+      const depth1 = calcDepthToLeaf(leaf)
+      const depth2 = calcDepthToLeaf(leaf)
+      expect(depth1).toBe(depth2)
+      expect(leaf.depthToLeaf).toBeDefined()
+    })
+  })
+
+  describe('findMaxBranchLen', () => {
+    it('should return node len for leaf', () => {
+      const leaf: any = {
+        id: 'leaf',
+        data: { id: 'leaf' },
+        len: 1.5,
+        children: null,
+      }
+      expect(findMaxBranchLen(leaf)).toBe(1.5)
+    })
+
+    it('should return max len from descendants', () => {
+      const leaf1: any = {
+        id: 'leaf1',
+        data: { id: 'leaf1' },
+        len: 0.5,
+        children: null,
+      }
+      const leaf2: any = {
+        id: 'leaf2',
+        data: { id: 'leaf2' },
+        len: 1.5,
+        children: null,
+      }
+      const parent: any = {
+        id: 'parent',
+        data: { id: 'parent' },
+        len: 0.3,
+        children: [leaf1, leaf2],
+      }
+      expect(findMaxBranchLen(parent)).toBe(1.5)
+    })
+
+    it('should handle undefined len', () => {
+      const leaf: any = { id: 'leaf', data: { id: 'leaf' }, children: null }
+      expect(findMaxBranchLen(leaf)).toBe(0)
+    })
+  })
+
+  describe('getNodeX cladogram positioning', () => {
+    it('should position all leaves at rightmost for cladogram', () => {
+      const leaf1: any = { id: 'leaf1', data: { id: 'leaf1' }, children: null }
+      const leaf2: any = { id: 'leaf2', data: { id: 'leaf2' }, children: null }
+      const root: any = {
+        id: 'root',
+        data: { id: 'root' },
+        children: [leaf1, leaf2],
+      }
+
+      calcDepthToLeaf(root)
+      const maxBranchLen = 100
+      const maxDepthToLeaf = 1
+
+      const x1 = getNodeX(leaf1, false, maxBranchLen, maxDepthToLeaf)
+      const x2 = getNodeX(leaf2, false, maxBranchLen, maxDepthToLeaf)
+
+      expect(x1).toBe(maxBranchLen)
+      expect(x2).toBe(maxBranchLen)
+      expect(x1).toBe(x2)
+    })
+
+    it('should position root at leftmost for cladogram', () => {
+      const leaf1: any = { id: 'leaf1', data: { id: 'leaf1' }, children: null }
+      const leaf2: any = { id: 'leaf2', data: { id: 'leaf2' }, children: null }
+      const root: any = {
+        id: 'root',
+        data: { id: 'root' },
+        children: [leaf1, leaf2],
+      }
+
+      calcDepthToLeaf(root)
+      const maxBranchLen = 100
+      const maxDepthToLeaf = 1
+
+      const xRoot = getNodeX(root, false, maxBranchLen, maxDepthToLeaf)
+      expect(xRoot).toBe(0)
+    })
+
+    it('should position internal nodes between root and leaves', () => {
+      const leaf1: any = { id: 'leaf1', data: { id: 'leaf1' }, children: null }
+      const leaf2: any = { id: 'leaf2', data: { id: 'leaf2' }, children: null }
+      const intermediate: any = {
+        id: 'int',
+        data: { id: 'int' },
+        children: [leaf1, leaf2],
+      }
+      const root: any = {
+        id: 'root',
+        data: { id: 'root' },
+        children: [intermediate],
+      }
+
+      calcDepthToLeaf(root)
+      const maxBranchLen = 100
+      const maxDepthToLeaf = 2
+
+      const xRoot = getNodeX(root, false, maxBranchLen, maxDepthToLeaf)!
+      const xInt = getNodeX(intermediate, false, maxBranchLen, maxDepthToLeaf)!
+      const xLeaf = getNodeX(leaf1, false, maxBranchLen, maxDepthToLeaf)!
+
+      expect(xRoot).toBe(0)
+      expect(xInt).toBeGreaterThan(xRoot)
+      expect(xLeaf).toBeGreaterThan(xInt)
+      expect(xLeaf).toBe(maxBranchLen)
+    })
+
+    it('should use branch length when showBranchLen is true', () => {
+      const leaf: any = {
+        id: 'leaf',
+        data: { id: 'leaf' },
+        len: 2.5,
+        children: null,
+      }
+      const x = getNodeX(leaf, true, 100, 1)
+      expect(x).toBe(2.5)
+    })
+  })
+})

package/src/components/tree/renderTreeCanvas.ts

@@ -1,5 +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'
 
@@ -9,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
@@ -47,15 +95,14 @@ export function renderTree({
   const { hierarchy, showBranchLenEffective: showBranchLen, blockSize } = model
   const by = blockSizeYOverride || blockSize
   ctx.strokeStyle = theme.palette.text.primary
+  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.len : target.y
-    const sx = showBranchLen ? source.len : source.y
+    const tx = getNodeX(target, showBranchLen, maxBranchLen, maxDepthToLeaf)
+    const sx = getNodeX(source, showBranchLen, maxBranchLen, maxDepthToLeaf)
     if (tx === undefined || sx === undefined) {
       continue
     }
@@ -96,8 +143,10 @@ export function renderNodeBubbles({
     marginLeft: ml,
   } = model
   const by = blockSizeYOverride || blockSize
+  const maxBranchLen = findMaxBranchLen(hierarchy)
+  const maxDepthToLeaf = calcDepthToLeaf(hierarchy)
   for (const node of descendants(hierarchy)) {
-    const x = showBranchLen ? node.len : node.y
+    const x = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf)
     if (x === undefined) {
       continue
     }
@@ -105,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
     ) {
@@ -156,6 +205,7 @@ export function renderTreeLabels({
     marginLeft,
     leaves,
     noTree,
+    hierarchy,
   } = model
   const by = blockSizeYOverride || blockSize
   const emHeight = ctx.measureText('M').width
@@ -165,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.len
     const y = node.x!
-    const x = node.y!
 
     const displayName = treeMetadata[name]?.genome || name
     if (y > offsetY - extendBounds && y < offsetY + by + extendBounds) {
@@ -179,7 +229,7 @@ export function renderTreeLabels({
       const yp = y + fontSize / 4
       let xp = 0
       if (!noTree) {
-        xp = (showBranchLen ? len : x) || 0
+        xp = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf) || 0
       }
 
       const { width } = ctx.measureText(displayName)

package/src/hierarchy.ts

@@ -10,6 +10,7 @@ export interface HierarchyNode<T = NodeWithIds> {
   x?: number
   y?: number
   len?: number
+  depthToLeaf?: number
   _children?: HierarchyNode<T>[] | null
 }
 

package/src/model.ts

@@ -337,6 +337,7 @@ function stateModelFactory() {
       /**
        * #volatile
        */
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
       error: undefined as unknown,
 
       /**

package/src/version.ts

@@ -1 +1 @@
-export const version = '5.0.13'
+export const version = '5.0.16'