react-msaview 5.0.7 → 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,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.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))
 }

package/src/flatToTree.ts

@@ -1,10 +1,8 @@
-// Define the input item interface
 interface FlatItem {
   id: number
   parent?: number
 }
 
-// Define the tree node interface
 interface TreeNode {
   id: string
   name: string
@@ -12,46 +10,30 @@ interface TreeNode {
   children: TreeNode[]
 }
 
-/**
- * Parses a flat list of items into a tree structure
- * @param items - Array of flat items with id and optional parent
- * @returns Array of root tree nodes
- */
 export function flatToTree(items: FlatItem[]): TreeNode {
-  // Create a map to store all nodes by their id for quick lookup
-  const nodeMap = new Map<number, TreeNode>()
+  const nodeMap = new Map(
+    items.map(item => [
+      item.id,
+      {
+        id: `${item.id}`,
+        name: `${item.id}`,
+        parent: item.parent !== undefined ? `${item.parent}` : undefined,
+        children: [] as TreeNode[],
+      },
+    ]),
+  )
 
-  // First pass: Create all tree nodes
-  items.forEach(item => {
-    nodeMap.set(item.id, {
-      ...item,
-      id: `${item.id}`,
-      name: `${item.id}`,
-      parent: item.parent !== undefined ? `${item.parent}` : undefined,
-      children: [],
-    })
-  })
-
-  // Second pass: Build parent-child relationships
-  const roots: TreeNode[] = []
-
-  items.forEach(item => {
+  let root: TreeNode | undefined
+  for (const item of items) {
     const node = nodeMap.get(item.id)!
-
-    if (item.parent !== undefined) {
-      // This item has a parent, add it to parent's children
-      const parentNode = nodeMap.get(item.parent)
-      if (parentNode) {
-        parentNode.children.push(node)
-      } else {
-        // Parent doesn't exist, treat as root
-        roots.push(node)
-      }
+    const parent =
+      item.parent !== undefined ? nodeMap.get(item.parent) : undefined
+    if (parent) {
+      parent.children.push(node)
     } else {
-      // This item has no parent, it's a root node
-      roots.push(node)
+      root ??= node
     }
-  })
+  }
 
-  return roots[0]!
+  return root!
 }