react-msaview 5.0.6 → 5.0.13

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,106 +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<number>(0)
-  const prevY = useRef<number>(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(() => {
-    let cleanup = () => {}
-
-    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) {
-        // use rAF to make it so multiple event handlers aren't fired per-frame
-        // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
-        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
-      if (mouseDragging) {
-        setMouseDragging(false)
-      }
-    }
-
-    if (mouseDragging) {
-      window.addEventListener('mousemove', globalMouseMove, true)
-      window.addEventListener('mouseup', globalMouseUp, true)
-      cleanup = () => {
-        window.removeEventListener('mousemove', globalMouseMove, true)
-        window.removeEventListener('mouseup', globalMouseUp, true)
-      }
-    }
-    return cleanup
-  }, [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,166 +6,103 @@ 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<number>(0)
-  const { treeWidth, height, blocksY, treeAreaWidth, scrollY } = 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)
-    return () => {
-      curr.removeEventListener('wheel', onWheel)
-    }
-  }, [model])
-
-  useEffect(() => {
-    let cleanup = () => {}
-
-    function globalMouseMove(event: MouseEvent) {
-      event.preventDefault()
-      const currY = event.clientY
-      const distanceY = currY - prevY.current
-      if (distanceY) {
-        // use rAF to make it so multiple event handlers aren't fired per-frame
-        // see
-        // https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
-        if (!scheduled.current) {
-          scheduled.current = true
-          window.requestAnimationFrame(() => {
-            model.doScrollY(distanceY)
-            scheduled.current = false
-            prevY.current = event.clientY
-          })
-        }
-      }
-    }
-
-    function globalMouseUp() {
-      prevY.current = 0
-      if (mouseDragging) {
-        setMouseDragging(false)
-      }
-    }
-
-    if (mouseDragging) {
-      window.addEventListener('mousemove', globalMouseMove, true)
-      window.addEventListener('mouseup', globalMouseUp, true)
-      cleanup = () => {
-        window.removeEventListener('mousemove', globalMouseMove, true)
-        window.removeEventListener('mouseup', globalMouseUp, true)
-      }
-    }
-    return cleanup
-  }, [model, mouseDragging])
+  const { treeWidth, height, blocksY, treeAreaWidth } = model
+  const onScrollY = useCallback(
+    (d: number) => {
+      model.doScrollY(d)
+    },
+    [model],
+  )
+  const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
 
-  // Global tree mouseover effect
   useEffect(() => {
     const ctx = mouseoverRef.current?.getContext('2d')
     return ctx
       ? autorun(() => {
           if (isAlive(model)) {
+            const {
+              relativeTo,
+              leaves,
+              rowHeight,
+              hoveredTreeNode,
+              treeAreaWidth: w,
+              height: h,
+              scrollY: sy,
+              mouseOverRowName,
+            } = model
             ctx.resetTransform()
-            ctx.clearRect(0, 0, treeAreaWidth, height)
+            ctx.clearRect(0, 0, w, h)
 
-            // Highlight reference row (relativeTo) persistently
-            const { relativeTo, leaves, rowHeight, hoveredTreeNode } = model
             if (relativeTo) {
               const referenceLeaf = leaves.find(
                 leaf => leaf.data.name === relativeTo,
               )
               if (referenceLeaf) {
-                const y = referenceLeaf.x! + scrollY
-                ctx.fillStyle = 'rgba(0,128,255,0.3)' // Blue highlight for reference row
-                ctx.fillRect(0, y - rowHeight / 2, treeAreaWidth, 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! + scrollY
-                  ctx.fillRect(0, y - rowHeight / 2, treeAreaWidth, 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)
-            const { mouseOverRowName } = model
             if (
               mouseOverRowName &&
               mouseOverRowName !== relativeTo &&
               !hoveredTreeNode?.descendantNames.includes(mouseOverRowName)
             ) {
-              // Find the leaf node that matches the hovered row
               const matchingLeaf = leaves.find(
                 leaf => leaf.data.name === mouseOverRowName,
               )
               if (matchingLeaf) {
-                const y = matchingLeaf.x! + scrollY
-                ctx.fillStyle = 'rgba(255,165,0,0.2)' // Orange highlight for MSA sync
-                ctx.fillRect(0, y - rowHeight / 2, treeAreaWidth, rowHeight)
+                ctx.fillStyle = treeHoverColor
+                ctx.fillRect(
+                  0,
+                  matchingLeaf.x! + sy - rowHeight / 2,
+                  w,
+                  rowHeight,
+                )
               }
             }
           }
         })
       : undefined
-  }, [model, treeAreaWidth, height, scrollY])
-
-  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)
-    }
-  }
+  }, [model])
 
   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/TreeCanvasBlock.tsx

@@ -4,6 +4,7 @@ import { useTheme } from '@mui/material'
 import Flatbush from 'flatbush'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
 
 import TreeBranchMenu from './TreeBranchMenu.tsx'
 import TreeNodeMenu from './TreeNodeMenu.tsx'
@@ -11,6 +12,23 @@ import { padding, renderTreeCanvas } from './renderTreeCanvas.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
+const useStyles = makeStyles()(theme => ({
+  tooltip: {
+    position: 'fixed',
+    pointerEvents: 'none',
+    zIndex: 10000,
+    backgroundColor: theme.palette.grey[700],
+    color: theme.palette.common.white,
+    padding: '4px 8px',
+    borderRadius: 4,
+    fontSize: 12,
+    whiteSpace: 'nowrap',
+    maxWidth: 300,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+}))
+
 interface TooltipData {
   name: string
   id: string
@@ -75,6 +93,7 @@ const TreeCanvasBlock = observer(function ({
   model: MsaViewModel
   offsetY: number
 }) {
+  const { classes } = useStyles()
   const theme = useTheme()
   const ref = useRef<HTMLCanvasElement>(null)
   const clickMap = useRef(new ClickMapIndex())
@@ -82,6 +101,11 @@ const TreeCanvasBlock = observer(function ({
   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 { scrollY, treeAreaWidth, blockSize, highResScaleFactor } = model
 
@@ -217,6 +241,17 @@ const TreeCanvasBlock = observer(function ({
           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,
+              x: event.clientX,
+              y: event.clientY,
+            })
+          } else {
+            setTooltipInfo(undefined)
+          }
+
           // Handle tree node hover for multi-row highlighting
           if (hoveredAny) {
             model.setHoveredTreeNode(hoveredAny.id)
@@ -249,6 +284,7 @@ const TreeCanvasBlock = observer(function ({
         }}
         onMouseLeave={() => {
           setHoverElt(undefined)
+          setTooltipInfo(undefined)
           // Clear all highlighting when leaving tree area
           model.setHoveredTreeNode(undefined)
           model.setMousePos(undefined, undefined)
@@ -265,6 +301,14 @@ const TreeCanvasBlock = observer(function ({
         height={height}
         ref={mouseoverRef}
       />
+      {tooltipInfo ? (
+        <div
+          className={classes.tooltip}
+          style={{ left: tooltipInfo.x + 12, top: tooltipInfo.y + 12 }}
+        >
+          {tooltipInfo.name}
+        </div>
+      ) : null}
     </>
   )
 })

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.ts

@@ -1,3 +1,5 @@
+import { descendants, links } from '../../hierarchy.ts'
+
 import type { MsaViewModel } from '../../model.ts'
 import type { Theme } from '@mui/material'
 
@@ -45,15 +47,15 @@ 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()) {
+  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 = showBranchLen ? target.len : target.y
+    const sx = showBranchLen ? source.len : source.y
     if (tx === undefined || sx === undefined) {
       continue
     }
@@ -94,8 +96,8 @@ 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
+  for (const node of descendants(hierarchy)) {
+    const x = showBranchLen ? node.len : node.y
     if (x === undefined) {
       continue
     }
@@ -146,14 +148,10 @@ export function renderTreeLabels({
     fontSize,
     showBranchLenEffective: showBranchLen,
     treeMetadata,
-    hierarchy,
-    collapsed,
-    collapsedLeaves,
     blockSize,
     labelsAlignRight,
     drawTree,
     treeAreaWidth,
-    treeWidth,
     treeAreaWidthMinusMargin,
     marginLeft,
     leaves,
@@ -171,7 +169,7 @@ export function renderTreeLabels({
     const {
       data: { name, id },
     } = node
-    const len = (node as { len?: number }).len
+    const len = node.len
     const y = node.x!
     const x = node.y!
 
@@ -182,17 +180,6 @@ export function renderTreeLabels({
       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
-        }
       }
 
       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))
 }