react-msaview 5.0.13 → 5.1.0

package/src/components/minimap/Minimap.tsx

@@ -1,18 +1,13 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model.ts'
+import { useDragScroll } from '../../useDragScroll.ts'
 
-interface ClickCoord {
-  clientX: number
-  scrollX: number
-}
+import type { MsaViewModel } from '../../model.ts'
 
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
-  const [mouseDown, setMouseDown] = useState<ClickCoord>()
   const [hovered, setHovered] = useState(false)
-  const scheduled = useRef(false)
   const { scrollX, msaAreaWidth, minimapHeight, colWidth, numColumns } = model
   const unit = msaAreaWidth / numColumns / colWidth
   const left = -scrollX
@@ -22,32 +17,15 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   const fill = 'rgba(66, 119, 127, 0.3)'
   const w = Math.max(e - s, 20)
 
-  useEffect(() => {
-    function fn(event: MouseEvent) {
-      if (mouseDown !== undefined) {
-        if (!scheduled.current) {
-          scheduled.current = true
-          window.requestAnimationFrame(() => {
-            model.setScrollX(
-              mouseDown.scrollX - (event.clientX - mouseDown.clientX) / unit,
-            )
-            scheduled.current = false
-          })
-        }
-      }
-    }
-    function fn2() {
-      setMouseDown(undefined)
-    }
-    if (mouseDown !== undefined) {
-      document.addEventListener('mousemove', fn)
-      document.addEventListener('mouseup', fn2)
-      return () => {
-        document.removeEventListener('mousemove', fn)
-        document.removeEventListener('mousemove', fn2)
-      }
-    }
-  }, [model, unit, mouseDown])
+  const { startDrag } = useDragScroll(
+    'x',
+    useCallback(
+      (delta: number, startScroll: number) => {
+        model.setScrollX(startScroll - delta / unit)
+      },
+      [model, unit],
+    ),
+  )
 
   const barHeight = 12
   const polygonHeight = minimapHeight - barHeight
@@ -84,10 +62,7 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
           setHovered(false)
         }}
         onMouseDown={event => {
-          setMouseDown({
-            clientX: event.clientX,
-            scrollX: model.scrollX,
-          })
+          startDrag(event, model.scrollX)
         }}
       />
 

package/src/components/msa/MSACanvasBlock.tsx

@@ -1,16 +1,30 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
 import { BaseTooltip } from '@jbrowse/core/ui'
-import { useTheme } from '@mui/material'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
 import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
 import { renderMSABlock } from './renderMSABlock.ts'
-import { colorContrast } from '../../util.ts'
+import { useColorContrast } from '../../useColorContrast.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
+function eventToColRow(
+  event: React.MouseEvent,
+  el: HTMLCanvasElement,
+  offsetX: number,
+  offsetY: number,
+  colWidth: number,
+  rowHeight: number,
+) {
+  const { left, top } = el.getBoundingClientRect()
+  return {
+    col: Math.floor((event.clientX - left + offsetX) / colWidth),
+    row: Math.floor((event.clientY - top + offsetY) / rowHeight),
+  }
+}
+
 const MSACanvasBlock = observer(function ({
   model,
   offsetX,
@@ -31,12 +45,7 @@ const MSACanvasBlock = observer(function ({
     mouseClickRow,
     highResScaleFactor,
   } = model
-  const theme = useTheme()
-
-  const contrastScheme = useMemo(
-    () => colorContrast(colorScheme, theme),
-    [colorScheme, theme],
-  )
+  const { theme, contrastScheme } = useColorContrast(colorScheme)
 
   const ref = useRef<HTMLCanvasElement>(null)
   useEffect(() => {
@@ -87,36 +96,44 @@ const MSACanvasBlock = observer(function ({
       <canvas
         ref={ref}
         onMouseMove={event => {
-          if (!ref.current) {
-            return
-          }
-          setMousePosition({ x: event.clientX, y: event.clientY })
-          const { left, top } = ref.current.getBoundingClientRect()
-          const mouseX = event.clientX - left + offsetX
-          const mouseY = event.clientY - top + offsetY
-          const x = Math.floor(mouseX / colWidth)
-          const y = Math.floor(mouseY / rowHeight)
-
-          // Only set mouse position if within valid MSA bounds
-          if (x >= 0 && x < model.numColumns && y >= 0 && y < model.numRows) {
-            model.setMousePos(x, y)
-          } else {
-            model.setMousePos(undefined, undefined)
+          if (ref.current) {
+            setMousePosition({ x: event.clientX, y: event.clientY })
+            const { col, row } = eventToColRow(
+              event,
+              ref.current,
+              offsetX,
+              offsetY,
+              colWidth,
+              rowHeight,
+            )
+            // Only set mouse position if within valid MSA bounds
+            if (
+              col >= 0 &&
+              col < model.numColumns &&
+              row >= 0 &&
+              row < model.numRows
+            ) {
+              model.setMousePos(col, row)
+            } else {
+              model.setMousePos(undefined, undefined)
+            }
           }
         }}
         onClick={event => {
-          if (!ref.current) {
-            return
-          }
-          const { left, top } = ref.current.getBoundingClientRect()
-          const mouseX = event.clientX - left + offsetX
-          const mouseY = event.clientY - top + offsetY
-          const x = Math.floor(mouseX / colWidth)
-          const y = Math.floor(mouseY / rowHeight)
-          if (x === mouseClickCol && y === mouseClickRow) {
-            model.setMouseClickPos(undefined, undefined)
-          } else {
-            model.setMouseClickPos(x, y)
+          if (ref.current) {
+            const { col, row } = eventToColRow(
+              event,
+              ref.current,
+              offsetX,
+              offsetY,
+              colWidth,
+              rowHeight,
+            )
+            if (col === mouseClickCol && row === mouseClickRow) {
+              model.setMouseClickPos(undefined, undefined)
+            } else {
+              model.setMouseClickPos(col, row)
+            }
           }
         }}
         onMouseLeave={() => {

package/src/components/msa/renderMSABlock.ts

@@ -41,7 +41,13 @@ export function renderMSABlock({
   ctx.scale(k, k)
   ctx.translate(-offsetX, rowHeight / 2 - offsetY)
   ctx.textAlign = 'center'
-  ctx.font = ctx.font.replace(/\d+px/, `${bgColor ? '' : 'bold '}${fontSize}px`)
+  // match an optional existing "bold " so re-renders don't accumulate it
+  // (an invalid "bold bold 16px" string would be silently ignored by canvas,
+  // freezing the font size against zoom changes)
+  ctx.font = ctx.font.replace(
+    /(?:bold )?\d+px/,
+    `${bgColor ? '' : 'bold '}${fontSize}px`,
+  )
 
   const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
   const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight))
@@ -130,14 +136,15 @@ function drawTiles({
         const isMatchingReference =
           referenceSeq && name !== relativeTo && letter === referenceSeq[j]
 
-        const color = isClustalX
-          ? model.colClustalX[xStart + j]![letter]
-          : isPercentIdentity
-            ? (() => {
-                const consensus = model.colConsensus[xStart + j]!
-                return letter === consensus.letter ? consensus.color : undefined
-              })()
-            : colorScheme[letter.toUpperCase()]
+        let color: string | undefined
+        if (isClustalX) {
+          color = model.colClustalX[xStart + j]![letter]
+        } else if (isPercentIdentity) {
+          const consensus = model.colConsensus[xStart + j]!
+          color = letter === consensus.letter ? consensus.color : undefined
+        } else {
+          color = colorScheme[letter.toUpperCase()]
+        }
         if (bgColor || isClustalX || isPercentIdentity) {
           // Use a very light background for matching positions in relative mode
           const finalColor = isMatchingReference

package/src/components/tree/TreeCanvas.tsx

@@ -43,35 +43,23 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
             ctx.resetTransform()
             ctx.clearRect(0, 0, w, h)
 
-            if (relativeTo) {
-              const referenceLeaf = leaves.find(
-                leaf => leaf.data.name === relativeTo,
-              )
-              if (referenceLeaf) {
-                ctx.fillStyle = referenceColor
-                ctx.fillRect(
-                  0,
-                  referenceLeaf.x! + sy - rowHeight / 2,
-                  w,
-                  rowHeight,
-                )
+            const leafByName = new Map(leaves.map(leaf => [leaf.data.name, leaf]))
+            const fillRow = (name: string) => {
+              const leaf = leafByName.get(name)
+              if (leaf) {
+                ctx.fillRect(0, leaf.x! + sy - rowHeight / 2, w, rowHeight)
               }
             }
 
+            if (relativeTo) {
+              ctx.fillStyle = referenceColor
+              fillRow(relativeTo)
+            }
+
             if (hoveredTreeNode) {
               ctx.fillStyle = treeHoverColor
               for (const descendantName of hoveredTreeNode.descendantNames) {
-                const matchingLeaf = leaves.find(
-                  leaf => leaf.data.name === descendantName,
-                )
-                if (matchingLeaf) {
-                  ctx.fillRect(
-                    0,
-                    matchingLeaf.x! + sy - rowHeight / 2,
-                    w,
-                    rowHeight,
-                  )
-                }
+                fillRow(descendantName)
               }
             }
 
@@ -80,18 +68,8 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
               mouseOverRowName !== relativeTo &&
               !hoveredTreeNode?.descendantNames.includes(mouseOverRowName)
             ) {
-              const matchingLeaf = leaves.find(
-                leaf => leaf.data.name === mouseOverRowName,
-              )
-              if (matchingLeaf) {
-                ctx.fillStyle = treeHoverColor
-                ctx.fillRect(
-                  0,
-                  matchingLeaf.x! + sy - rowHeight / 2,
-                  w,
-                  rowHeight,
-                )
-              }
+              ctx.fillStyle = treeHoverColor
+              fillRow(mouseOverRowName)
             }
           }
         })

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 { calcDepthToLeaf, 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,23 @@ const extendBounds = 5
 const radius = 2.5
 const d = radius * 2
 
+// 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
@@ -36,12 +54,16 @@ export function renderTree({
   ctx,
   model,
   theme,
+  maxBranchLen,
+  maxDepthToLeaf,
   blockSizeYOverride,
 }: {
   offsetY: number
   ctx: CanvasRenderingContext2D
   model: MsaViewModel
   theme: Theme
+  maxBranchLen: number
+  maxDepthToLeaf: number
   blockSizeYOverride?: number
 }) {
   const { hierarchy, showBranchLenEffective: showBranchLen, blockSize } = model
@@ -49,13 +71,10 @@ export function renderTree({
   ctx.strokeStyle = theme.palette.text.primary
   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
     }
@@ -80,12 +99,16 @@ export function renderNodeBubbles({
   clickMap,
   offsetY,
   model,
+  maxBranchLen,
+  maxDepthToLeaf,
   blockSizeYOverride,
 }: {
   ctx: CanvasRenderingContext2D
   clickMap?: ClickMapIndex
   offsetY: number
   model: MsaViewModel
+  maxBranchLen: number
+  maxDepthToLeaf: number
   blockSizeYOverride?: number
 }) {
   const {
@@ -97,7 +120,7 @@ export function renderNodeBubbles({
   } = model
   const by = blockSizeYOverride || blockSize
   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 +128,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
     ) {
@@ -135,6 +158,8 @@ export function renderTreeLabels({
   offsetY,
   ctx,
   clickMap,
+  maxBranchLen,
+  maxDepthToLeaf,
   blockSizeYOverride,
 }: {
   model: MsaViewModel
@@ -142,6 +167,8 @@ export function renderTreeLabels({
   ctx: CanvasRenderingContext2D
   clickMap?: ClickMapIndex
   theme: Theme
+  maxBranchLen: number
+  maxDepthToLeaf: number
   blockSizeYOverride?: number
 }) {
   const {
@@ -169,9 +196,7 @@ export function renderTreeLabels({
     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 +204,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)
@@ -269,12 +294,18 @@ export function renderTreeCanvas({
   const font = ctx.font
   ctx.font = font.replace(/\d+px/, `${fontSize}px`)
 
+  // memoized on the model and shared across the tree/bubble/label passes (and
+  // across all tree blocks) rather than re-traversing the hierarchy in each
+  const { maxBranchLength: maxBranchLen, maxDepthToLeaf } = model
+
   if (!noTree && drawTree) {
     renderTree({
       ctx,
       offsetY,
       model,
       theme,
+      maxBranchLen,
+      maxDepthToLeaf,
       blockSizeYOverride,
     })
 
@@ -284,6 +315,8 @@ export function renderTreeCanvas({
         offsetY,
         clickMap,
         model,
+        maxBranchLen,
+        maxDepthToLeaf,
         blockSizeYOverride,
       })
     }
@@ -296,6 +329,8 @@ export function renderTreeCanvas({
       model,
       clickMap,
       theme,
+      maxBranchLen,
+      maxDepthToLeaf,
       blockSizeYOverride,
     })
   }