react-msaview 5.0.7 → 5.0.16

package/src/components/msa/MSACanvas.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useRef } from 'react'
 
 import { observer } from 'mobx-react'
 
 import Loading from './Loading.tsx'
 import MSACanvasBlock from './MSACanvasBlock.tsx'
+import { useWheelScroll } from '../../useWheelScroll.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
@@ -17,100 +18,29 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
     blocks2d,
   } = model
   const ref = useRef<HTMLDivElement>(null)
-  // wheel
-  const scheduled = useRef(false)
-  const deltaX = useRef(0)
-  const deltaY = useRef(0)
-  // mouse click-and-drag scrolling
-  const prevX = useRef(0)
-  const prevY = useRef(0)
-  const [mouseDragging, setMouseDragging] = useState(false)
-  useEffect(() => {
-    const curr = ref.current
-    if (!curr) {
-      return
-    }
-    function onWheel(event: WheelEvent) {
-      deltaX.current += event.deltaX
-      deltaY.current += event.deltaY
-
-      if (!scheduled.current) {
-        scheduled.current = true
-        requestAnimationFrame(() => {
-          model.doScrollX(-deltaX.current)
-          model.doScrollY(-deltaY.current)
-          deltaX.current = 0
-          deltaY.current = 0
-          scheduled.current = false
-        })
-      }
-      event.preventDefault()
-      event.stopPropagation()
-    }
-    curr.addEventListener('wheel', onWheel, { passive: false })
-    return () => {
-      curr.removeEventListener('wheel', onWheel)
-    }
-  }, [model])
-
-  useEffect(() => {
-    if (mouseDragging) {
-      function globalMouseMove(event: MouseEvent) {
-        event.preventDefault()
-        const currX = event.clientX
-        const currY = event.clientY
-        const distanceX = currX - prevX.current
-        const distanceY = currY - prevY.current
-        if (distanceX || distanceY) {
-          if (!scheduled.current) {
-            scheduled.current = true
-            window.requestAnimationFrame(() => {
-              model.doScrollX(distanceX)
-              model.doScrollY(distanceY)
-              scheduled.current = false
-              prevX.current = event.clientX
-              prevY.current = event.clientY
-            })
-          }
-        }
-      }
-
-      function globalMouseUp() {
-        prevX.current = 0
-        setMouseDragging(false)
-      }
-
-      window.addEventListener('mousemove', globalMouseMove, true)
-      window.addEventListener('mouseup', globalMouseUp, true)
-      return () => {
-        window.removeEventListener('mousemove', globalMouseMove, true)
-        window.removeEventListener('mouseup', globalMouseUp, true)
-      }
-    }
-    return undefined
-  }, [model, mouseDragging])
+  const onScrollX = useCallback(
+    (d: number) => {
+      model.doScrollX(d)
+    },
+    [model],
+  )
+  const onScrollY = useCallback(
+    (d: number) => {
+      model.doScrollY(d)
+    },
+    [model],
+  )
+  const { onMouseDown, onMouseUp } = useWheelScroll({
+    ref,
+    onScrollX,
+    onScrollY,
+  })
 
   return (
     <div
       ref={ref}
-      onMouseDown={event => {
-        // check if clicking a draggable element or a resize handle
-        const target = event.target as HTMLElement
-        if (target.draggable || target.dataset.resizer) {
-          return
-        }
-
-        // otherwise do click and drag scroll
-        if (event.button === 0) {
-          prevX.current = event.clientX
-          prevY.current = event.clientY
-          setMouseDragging(true)
-        }
-      }}
-      onMouseUp={event => {
-        event.preventDefault()
-        setMouseDragging(false)
-      }}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
       onMouseLeave={event => {
         event.preventDefault()
       }}

package/src/components/msa/MSACanvasBlock.tsx

@@ -52,8 +52,7 @@ const MSACanvasBlock = observer(function ({
         blockSize * highResScaleFactor,
         blockSize * highResScaleFactor,
       )
-      const { actuallyShowDomains } = model
-      if (actuallyShowDomains) {
+      if (model.actuallyShowDomains) {
         renderBoxFeatureCanvasBlock({
           ctx,
           offsetX,
@@ -102,7 +101,6 @@ const MSACanvasBlock = observer(function ({
           if (x >= 0 && x < model.numColumns && y >= 0 && y < model.numRows) {
             model.setMousePos(x, y)
           } else {
-            // Clear mouse position when outside bounds
             model.setMousePos(undefined, undefined)
           }
         }}

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,6 +1,6 @@
+import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
 import type { NodeWithIdsAndLength } from '../../types.ts'
-import type { HierarchyNode } from 'd3-hierarchy'
 
 export function renderBoxFeatureCanvasBlock({
   model,

package/src/components/msa/renderMSABlock.ts

@@ -1,7 +1,7 @@
+import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
 import type { NodeWithIdsAndLength } from '../../types.ts'
 import type { Theme } from '@mui/material'
-import type { HierarchyNode } from 'd3-hierarchy'
 
 export function renderMSABlock({
   model,
@@ -180,7 +180,6 @@ function drawText({
     colorScheme,
     columns,
     colWidth,
-    contrastLettering,
     rowHeight,
     relativeTo,
   } = model
@@ -214,9 +213,7 @@ function drawText({
           const displayLetter = isMatchingReference ? '.' : letter
 
           const color = colorScheme[letter.toUpperCase()]
-          const contrast = contrastLettering
-            ? contrastScheme[letter.toUpperCase()] || 'black'
-            : 'black'
+          const contrast = contrastScheme[letter.toUpperCase()] || 'black'
 
           // note: -rowHeight/4 matches +rowHeight/4 in tree
           ctx.fillStyle = actuallyShowDomains

package/src/components/msa/renderMSAMouseover.ts

@@ -22,8 +22,6 @@ export function renderMouseover({
     scrollX,
     scrollY,
     mouseRow,
-    // @ts-expect-error
-    mouseCol2,
     mouseClickRow,
     mouseClickCol,
     relativeTo,
@@ -79,8 +77,4 @@ export function renderMouseover({
     ctx.fillStyle = highlightColor
     ctx.fillRect(0, mouseClickRow * rowHeight + scrollY, width, rowHeight)
   }
-  if (mouseCol2 !== undefined) {
-    ctx.fillStyle = highlightColor
-    ctx.fillRect(mouseCol2 * colWidth + scrollX, 0, colWidth, height)
-  }
 }

package/src/components/tree/TreeCanvas.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef } from 'react'
 
 import { isAlive } from '@jbrowse/mobx-state-tree'
 import { autorun } from 'mobx'
@@ -6,79 +6,25 @@ import { observer } from 'mobx-react'
 
 import TreeCanvasBlock from './TreeCanvasBlock.tsx'
 import { padding } from './renderTreeCanvas.ts'
+import { useWheelScroll } from '../../useWheelScroll.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
+const referenceColor = 'rgba(0,128,255,0.3)'
+const treeHoverColor = 'rgba(255,165,0,0.2)'
+
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)
   const mouseoverRef = useRef<HTMLCanvasElement>(null)
-  const scheduled = useRef(false)
-  const deltaY = useRef(0)
-  const prevY = useRef(0)
   const { treeWidth, height, blocksY, treeAreaWidth } = model
-  const [mouseDragging, setMouseDragging] = useState(false)
-
-  useEffect(() => {
-    const curr = ref.current
-    if (!curr) {
-      return
-    }
-    function onWheel(event: WheelEvent) {
-      deltaY.current += event.deltaY
-
-      if (!scheduled.current) {
-        scheduled.current = true
-        requestAnimationFrame(() => {
-          model.doScrollY(-deltaY.current)
-          deltaY.current = 0
-          scheduled.current = false
-        })
-      }
-      event.preventDefault()
-      event.stopPropagation()
-    }
-    curr.addEventListener('wheel', onWheel, { passive: false })
-    return () => {
-      curr.removeEventListener('wheel', onWheel)
-    }
-  }, [model])
-
-  useEffect(() => {
-    if (mouseDragging) {
-      function globalMouseMove(event: MouseEvent) {
-        event.preventDefault()
-        const currY = event.clientY
-        const distanceY = currY - prevY.current
-        if (distanceY) {
-          if (!scheduled.current) {
-            scheduled.current = true
-            window.requestAnimationFrame(() => {
-              model.doScrollY(distanceY)
-              scheduled.current = false
-              prevY.current = event.clientY
-            })
-          }
-        }
-      }
-
-      function globalMouseUp() {
-        prevY.current = 0
-        setMouseDragging(false)
-      }
-
-      window.addEventListener('mousemove', globalMouseMove, true)
-      window.addEventListener('mouseup', globalMouseUp, true)
-      return () => {
-        window.removeEventListener('mousemove', globalMouseMove, true)
-        window.removeEventListener('mouseup', globalMouseUp, true)
-      }
-    }
-    return undefined
-  }, [model, mouseDragging])
+  const onScrollY = useCallback(
+    (d: number) => {
+      model.doScrollY(d)
+    },
+    [model],
+  )
+  const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
 
-  // Global tree mouseover effect. Only [model] is needed in the dependency
-  // array because autorun internally tracks all accessed observables
-  // (treeAreaWidth, height, scrollY, etc.) and re-runs when they change
   useEffect(() => {
     const ctx = mouseoverRef.current?.getContext('2d')
     return ctx
@@ -97,33 +43,38 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
             ctx.resetTransform()
             ctx.clearRect(0, 0, w, h)
 
-            // Highlight reference row (relativeTo) persistently
             if (relativeTo) {
               const referenceLeaf = leaves.find(
                 leaf => leaf.data.name === relativeTo,
               )
               if (referenceLeaf) {
-                const y = referenceLeaf.x! + sy
-                ctx.fillStyle = 'rgba(0,128,255,0.3)' // Blue highlight for reference row
-                ctx.fillRect(0, y - rowHeight / 2, w, rowHeight)
+                ctx.fillStyle = referenceColor
+                ctx.fillRect(
+                  0,
+                  referenceLeaf.x! + sy - rowHeight / 2,
+                  w,
+                  rowHeight,
+                )
               }
             }
 
-            // Highlight multiple rows when hovering over tree nodes
             if (hoveredTreeNode) {
-              ctx.fillStyle = 'rgba(255,165,0,0.2)' // Orange highlight for tree hover
+              ctx.fillStyle = treeHoverColor
               for (const descendantName of hoveredTreeNode.descendantNames) {
                 const matchingLeaf = leaves.find(
                   leaf => leaf.data.name === descendantName,
                 )
                 if (matchingLeaf) {
-                  const y = matchingLeaf.x! + sy
-                  ctx.fillRect(0, y - rowHeight / 2, w, rowHeight)
+                  ctx.fillRect(
+                    0,
+                    matchingLeaf.x! + sy - rowHeight / 2,
+                    w,
+                    rowHeight,
+                  )
                 }
               }
             }
 
-            // Highlight single tree row corresponding to MSA mouseover (if not part of multi-row hover)
             if (
               mouseOverRowName &&
               mouseOverRowName !== relativeTo &&
@@ -133,9 +84,13 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
                 leaf => leaf.data.name === mouseOverRowName,
               )
               if (matchingLeaf) {
-                const y = matchingLeaf.x! + sy
-                ctx.fillStyle = 'rgba(255,165,0,0.2)' // Orange highlight for MSA sync
-                ctx.fillRect(0, y - rowHeight / 2, w, rowHeight)
+                ctx.fillStyle = treeHoverColor
+                ctx.fillRect(
+                  0,
+                  matchingLeaf.x! + sy - rowHeight / 2,
+                  w,
+                  rowHeight,
+                )
               }
             }
           }
@@ -143,31 +98,11 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
       : undefined
   }, [model])
 
-  function mouseDown(event: React.MouseEvent) {
-    // check if clicking a draggable element or a resize handle
-    const target = event.target as HTMLElement
-    if (target.draggable || target.dataset.resizer) {
-      return
-    }
-
-    // otherwise do click and drag scroll
-    if (event.button === 0) {
-      prevY.current = event.clientY
-      setMouseDragging(true)
-    }
-  }
-
   return (
     <div
       ref={ref}
-      onMouseDown={mouseDown}
-      onMouseUp={event => {
-        // this local mouseup is used in addition to the global because
-        // sometimes the global add/remove are not called in time, resulting in
-        // issue #533
-        event.preventDefault()
-        setMouseDragging(false)
-      }}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
       onMouseLeave={event => {
         event.preventDefault()
       }}

package/src/components/tree/TreeNodeMenu.tsx

@@ -24,8 +24,9 @@ const TreeMenu = observer(function ({
   model: MsaViewModel
   onClose: () => void
 }) {
-  const { collapsed, collapsedLeaves } = model
-  const { name } = node
+  const { collapsed } = model
+  const { name, id } = node
+  const isCollapsed = collapsed.includes(id)
   return (
     <Menu
       anchorReference="anchorPosition"
@@ -62,21 +63,11 @@ const TreeMenu = observer(function ({
       <MenuItem
         dense
         onClick={() => {
-          if (collapsed.includes(node.id)) {
-            model.toggleCollapsed(node.id)
-          } else {
-            if (node.id.endsWith('-leafnode')) {
-              model.toggleCollapsedLeaf(node.id)
-            } else {
-              model.toggleCollapsedLeaf(`${node.id}-leafnode`)
-            }
-          }
+          model.toggleCollapsed(id)
           onClose()
         }}
       >
-        {collapsed.includes(node.id) || collapsedLeaves.includes(node.id)
-          ? 'Show node'
-          : 'Hide node'}
+        {isCollapsed ? 'Show node' : 'Hide node'}
       </MenuItem>
       <MenuItem
         dense

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)
+    })
+  })
+})