react-msaview 5.6.1 → 5.6.3

package/src/components/tree/TreeCanvasBlock.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useState } from 'react'
 
 import { makeStyles } from '@jbrowse/core/util/tss-react'
 import { useTheme } from '@mui/material'
@@ -6,11 +6,10 @@ import { observer } from 'mobx-react'
 
 import TreeBranchMenu from './TreeBranchMenu.tsx'
 import TreeNodeMenu from './TreeNodeMenu.tsx'
-import { ClickMapIndex } from './clickMap.ts'
 import { padding, renderTreeCanvas } from './renderTreeCanvas.ts'
+import { useTreeHover } from './useTreeHover.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 
-import type { ClickEntry } from './clickMap.ts'
 import type { MsaViewModel } from '../../model.ts'
 
 const useStyles = makeStyles()(theme => ({
@@ -28,9 +27,15 @@ const useStyles = makeStyles()(theme => ({
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
+  hover: {
+    position: 'absolute',
+    pointerEvents: 'none',
+    zIndex: 100,
+    background: 'rgba(0,0,0,0.1)',
+  },
 }))
 
-interface TooltipData {
+interface MenuData {
   name: string
   id: string
   x: number
@@ -46,88 +51,35 @@ const TreeCanvasBlock = observer(function ({
 }) {
   const { classes } = useStyles()
   const theme = useTheme()
-  const clickMap = useRef(new ClickMapIndex())
-  const mouseoverRef = useRef<HTMLCanvasElement>(null)
-  const [branchMenu, setBranchMenu] = useState<TooltipData>()
-  const [toggleNodeMenu, setToggleNodeMenu] = useState<TooltipData>()
-  const [hoverElt, setHoverElt] = useState<ClickEntry>()
-  const [tooltipInfo, setTooltipInfo] = useState<{
-    name: string
-    x: number
-    y: number
-  }>()
+  const [branchMenu, setBranchMenu] = useState<MenuData>()
+  const [nodeMenu, setNodeMenu] = useState<MenuData>()
+  const { clickMap, hovered, hitTest, onMouseMove, onMouseLeave } =
+    useTreeHover({ model, offsetY })
 
   const { scrollY, treeAreaWidth, blockSize, highResScaleFactor } = model
-
   const width = treeAreaWidth + padding
   const height = blockSize
-  const w2 = width * highResScaleFactor
-  const h2 = height * highResScaleFactor
 
   const ref = useCanvasAutorun(
     ctx => {
       ctx.resetTransform()
-      ctx.clearRect(0, 0, w2, h2)
+      ctx.clearRect(
+        0,
+        0,
+        width * highResScaleFactor,
+        height * highResScaleFactor,
+      )
       renderTreeCanvas({
         ctx,
         model,
         offsetY,
-        clickMap: clickMap.current,
+        clickMap,
         theme,
       })
     },
-    [model, blockSize, highResScaleFactor, treeAreaWidth, offsetY, theme],
+    [model, clickMap, offsetY, theme],
   )
 
-  useEffect(() => {
-    const ctx = mouseoverRef.current?.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    ctx.resetTransform()
-    ctx.clearRect(0, 0, treeAreaWidth + padding, blockSize)
-    ctx.translate(0, -offsetY)
-
-    // Highlight tree element being directly hovered
-    if (hoverElt) {
-      const { minX, maxX, minY, maxY } = hoverElt
-
-      ctx.fillStyle = 'rgba(0,0,0,0.1)'
-      ctx.fillRect(minX, minY, maxX - minX, maxY - minY)
-    }
-  }, [hoverElt, offsetY, blockSize, treeAreaWidth])
-
-  function hoverBranchClickMap(event: React.MouseEvent) {
-    const x = event.nativeEvent.offsetX
-    const y = event.nativeEvent.offsetY
-
-    const [entry] = clickMap.current.search({
-      minX: x,
-      maxX: x + 1,
-      minY: y + offsetY,
-      maxY: y + 1 + offsetY,
-    })
-
-    return entry?.branch
-      ? { ...entry, x: event.clientX, y: event.clientY }
-      : undefined
-  }
-
-  function hoverNameClickMap(event: React.MouseEvent) {
-    const x = event.nativeEvent.offsetX
-    const y = event.nativeEvent.offsetY
-    const [entry] = clickMap.current.search({
-      minX: x,
-      maxX: x + 1,
-      minY: y + offsetY,
-      maxY: y + 1 + offsetY,
-    })
-
-    return entry && !entry.branch
-      ? { ...entry, x: event.clientX, y: event.clientY }
-      : undefined
-  }
   const style = {
     width,
     height,
@@ -135,9 +87,10 @@ const TreeCanvasBlock = observer(function ({
     left: 0,
     position: 'absolute',
   } as const
+
   return (
     <>
-      {branchMenu?.id ? (
+      {branchMenu ? (
         <TreeBranchMenu
           node={branchMenu}
           model={model}
@@ -147,98 +100,64 @@ const TreeCanvasBlock = observer(function ({
         />
       ) : null}
 
-      {toggleNodeMenu?.id ? (
+      {nodeMenu ? (
         <TreeNodeMenu
-          node={toggleNodeMenu}
+          node={nodeMenu}
           model={model}
           onClose={() => {
-            setToggleNodeMenu(undefined)
+            setNodeMenu(undefined)
           }}
         />
       ) : null}
 
       <canvas
-        width={w2}
-        height={h2}
-        style={style}
+        ref={ref}
+        width={width * highResScaleFactor}
+        height={height * highResScaleFactor}
+        style={{ ...style, cursor: hovered ? 'pointer' : 'default' }}
         onMouseMove={event => {
-          if (!ref.current) {
-            return
-          }
-
-          const hoveredLeaf = hoverNameClickMap(event)
-          const hoveredBranch = hoverBranchClickMap(event)
-          const hoveredAny = hoveredLeaf || hoveredBranch
-
-          ref.current.style.cursor = hoveredAny ? 'pointer' : 'default'
-          setHoverElt(hoveredLeaf) // Only show direct hover highlight for leaf nodes
-
-          // Set tooltip info
-          if (hoveredAny) {
-            setTooltipInfo({
-              name: hoveredAny.name,
+          onMouseMove(event)
+        }}
+        onMouseLeave={() => {
+          onMouseLeave()
+        }}
+        onClick={event => {
+          const entry = hitTest(event)
+          if (entry) {
+            const menu = {
               x: event.clientX,
               y: event.clientY,
-            })
-          } else {
-            setTooltipInfo(undefined)
-          }
-
-          // Handle tree node hover for multi-row highlighting
-          if (hoveredAny) {
-            model.setHoveredTreeNode(hoveredAny.id)
-
-            // For leaf nodes, also set single row highlight for backward compatibility
-            if (hoveredLeaf?.name) {
-              const rowIndex = model.rowNamesSet.get(hoveredLeaf.name)
-              if (rowIndex !== undefined) {
-                model.setMousePos(undefined, rowIndex)
-              }
+              id: entry.id,
+              name: entry.name,
+            }
+            if (entry.branch) {
+              setBranchMenu(menu)
+            } else {
+              setNodeMenu(menu)
             }
-          } else {
-            // Clear all highlighting when not hovering over any tree node
-            model.setHoveredTreeNode(undefined)
-            model.setMousePos(undefined, undefined)
           }
         }}
-        onClick={event => {
-          const { clientX: x, clientY: y } = event
+      />
 
-          const data = hoverBranchClickMap(event)
-          if (data?.id) {
-            setBranchMenu({ x, y, id: data.id, name: data.name })
-          }
+      {/* direct-hover highlight, drawn only for leaf labels */}
+      {hovered && !hovered.branch ? (
+        <div
+          className={classes.hover}
+          style={{
+            left: hovered.minX,
+            top: hovered.minY + scrollY,
+            width: hovered.maxX - hovered.minX,
+            height: hovered.maxY - hovered.minY,
+          }}
+        />
+      ) : null}
 
-          const data2 = hoverNameClickMap(event)
-          if (data2?.id) {
-            setToggleNodeMenu({ ...data2, x, y })
-          }
-        }}
-        onMouseLeave={() => {
-          setHoverElt(undefined)
-          setTooltipInfo(undefined)
-          // Clear all highlighting when leaving tree area
-          model.setHoveredTreeNode(undefined)
-          model.setMousePos(undefined, undefined)
-        }}
-        ref={ref}
-      />
-      <canvas
-        style={{
-          ...style,
-          pointerEvents: 'none',
-          zIndex: 100,
-        }}
-        width={width}
-        height={height}
-        ref={mouseoverRef}
-      />
-      {tooltipInfo ? (
+      {hovered ? (
         <div
           className={classes.tooltip}
-          style={{ left: tooltipInfo.x + 12, top: tooltipInfo.y + 12 }}
+          style={{ left: hovered.clientX + 12, top: hovered.clientY + 12 }}
         >
-          {tooltipInfo.name}
+          {hovered.name}
         </div>
       ) : null}
     </>

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

@@ -1,205 +1,115 @@
 import { describe, expect, it } from 'vitest'
 
-function calcDepthToLeaf(node: any): number {
-  if (node.depthToLeaf !== undefined) {
-    return node.depthToLeaf
+import { getNodeX } from './renderTreeCanvas.ts'
+import { calcDepthToLeaf, findMaxBranchLen } from '../../hierarchy.ts'
+
+import type { HierarchyNode } from '../../hierarchy.ts'
+
+function leaf(id: string, len?: number): HierarchyNode {
+  return {
+    data: { id, name: id, children: [] },
+    children: null,
+    parent: null,
+    depth: 0,
+    height: 0,
+    len,
   }
-  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))
-    }
+function internal(
+  id: string,
+  children: HierarchyNode[],
+  len?: number,
+): HierarchyNode {
+  const node: HierarchyNode = {
+    data: { id, name: id, children: children.map(c => c.data) },
+    children,
+    parent: null,
+    depth: 0,
+    height: 1,
+    len,
   }
-  return maxLen
-}
-
-function getNodeX(
-  node: any,
-  showBranchLen: boolean,
-  maxBranchLen: number,
-  maxDepthToLeaf: number,
-): number | undefined {
-  if (showBranchLen) {
-    return node.len
+  for (const child of children) {
+    child.parent = node
   }
-  const depthToLeaf = calcDepthToLeaf(node)
-  return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * maxBranchLen
+  return node
 }
 
-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('calcDepthToLeaf', () => {
+  it('is 0 for a leaf', () => {
+    expect(calcDepthToLeaf(leaf('a'))).toBe(0)
+  })
+
+  it('counts steps to the deepest tip', () => {
+    const tips = [leaf('a'), leaf('b')]
+    const intermediate = internal('int', tips)
+    const root = internal('root', [intermediate])
+
+    expect(calcDepthToLeaf(tips[0]!)).toBe(0)
+    expect(calcDepthToLeaf(intermediate)).toBe(1)
+    expect(calcDepthToLeaf(root)).toBe(2)
+  })
+
+  it('memoizes without re-walking the subtree', () => {
+    // the renderer asks for every node's depth on every pass, so the memo has to
+    // short-circuit the traversal itself, not just the arithmetic. A sentinel
+    // planted on an already-computed child must survive a second root call.
+    const child = leaf('a')
+    const root = internal('root', [child])
+    expect(calcDepthToLeaf(root)).toBe(1)
+
+    child.depthToLeaf = 99
+    expect(calcDepthToLeaf(root)).toBe(1)
+    expect(child.depthToLeaf).toBe(99)
+  })
+})
+
+describe('findMaxBranchLen', () => {
+  it('uses the node itself when it is a leaf', () => {
+    expect(findMaxBranchLen(leaf('a', 1.5))).toBe(1.5)
+  })
+
+  it('takes the max across descendants', () => {
+    expect(
+      findMaxBranchLen(internal('p', [leaf('a', 0.5), leaf('b', 1.5)], 0.3)),
+    ).toBe(1.5)
+  })
+
+  it('treats a missing len as 0', () => {
+    expect(findMaxBranchLen(leaf('a'))).toBe(0)
+  })
+})
+
+describe('getNodeX cladogram positioning', () => {
+  it('aligns every tip at the rightmost x', () => {
+    const tips = [leaf('a'), leaf('b')]
+    calcDepthToLeaf(internal('root', tips))
+
+    const xs = tips.map(tip => getNodeX(tip, false, 100, 1))
+    expect(xs).toEqual([100, 100])
+  })
+
+  it('puts the root at the leftmost x and internal nodes in between', () => {
+    const tips = [leaf('a'), leaf('b')]
+    const intermediate = internal('int', tips)
+    const root = internal('root', [intermediate])
+    calcDepthToLeaf(root)
+
+    const xRoot = getNodeX(root, false, 100, 2)!
+    const xInt = getNodeX(intermediate, false, 100, 2)!
+    const xTip = getNodeX(tips[0]!, false, 100, 2)!
+
+    expect(xRoot).toBe(0)
+    expect(xInt).toBeGreaterThan(xRoot)
+    expect(xTip).toBeGreaterThan(xInt)
+    expect(xTip).toBe(100)
   })
 
-  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)
-    })
+  it('collapses to the root x when there is no topological depth', () => {
+    expect(getNodeX(leaf('a'), false, 100, 0)).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)
-    })
+  it('uses branch length in phylogram mode', () => {
+    expect(getNodeX(leaf('a', 2.5), true, 100, 1)).toBe(2.5)
   })
 })

package/src/components/tree/renderTreeCanvas.ts

@@ -4,6 +4,7 @@ import {
   forEachLink,
 } from '../../hierarchy.ts'
 import { setFontSize } from '../../setFontSize.ts'
+import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 
 import type { ClickMapIndex } from './clickMap.ts'
 import type { HierarchyNode } from '../../hierarchy.ts'
@@ -27,7 +28,7 @@ function inYBlock(y: number, offsetY: number, by: number) {
 // 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(
+export function getNodeX(
   node: HierarchyNode,
   showBranchLen: boolean,
   maxBranchLen: number,
@@ -253,20 +254,27 @@ export function renderTreeLabels({
     treeAreaWidth,
     treeAreaWidthMinusMargin,
     marginLeft,
-    leaves,
     noTree,
     labelWidthMap,
     collapsed,
   } = model
+  // labels only exist for leaves, which are laid out top to bottom, so take the
+  // same slice the MSA renderer uses instead of walking every tip per block
+  const visibleLeaves = getVisibleLeaves({
+    model,
+    offsetY,
+    blockSizeY: blockSizeYOverride ?? model.blockSize,
+  })
   const by = blockSizeYOverride ?? blockSize
   const emHeight = ctx.measureText('M').width
   if (labelsAlignRight) {
     ctx.textAlign = 'right'
     ctx.setLineDash([1, 3])
+    ctx.strokeStyle = theme.palette.text.primary
   } else {
     ctx.textAlign = 'start'
   }
-  for (const node of leaves) {
+  for (const node of visibleLeaves) {
     const {
       data: { name, id },
     } = node
@@ -292,6 +300,9 @@ export function renderTreeLabels({
         const smallPadding = 2
         const offset = treeAreaWidthMinusMargin - smallPadding
         if (drawTree && !noTree) {
+          // beginPath is load-bearing: without it every leader line re-strokes
+          // all the ones before it, which is quadratic in the label count
+          ctx.beginPath()
           ctx.moveTo(xp + radius + 2, y)
           ctx.lineTo(offset - smallPadding - width, y)
           ctx.stroke()