react-msaview 5.0.16 → 5.1.1

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

@@ -1,4 +1,4 @@
-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'
@@ -10,36 +10,6 @@ const extendBounds = 5
 const radius = 2.5
 const d = radius * 2
 
-// Cladogram positioning algorithm based on ape package's plot.phylo
-// Uses topological depth (steps to tips) instead of branch length for x-positioning
-// This ensures all leaf nodes align at the same x-coordinate (rightmost position)
-// See: https://github.com/emmanuelparadis/ape/blob/master/R/plot.phylo.R
-function calcDepthToLeaf(node: HierarchyNode): 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: HierarchyNode): number {
-  let maxLen = node.len || 0
-  if (node.children) {
-    for (const child of node.children) {
-      maxLen = Math.max(maxLen, findMaxBranchLen(child))
-    }
-  }
-  return maxLen
-}
-
 // 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
@@ -84,19 +54,21 @@ 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
   const by = blockSizeYOverride || blockSize
   ctx.strokeStyle = theme.palette.text.primary
-  const maxBranchLen = findMaxBranchLen(hierarchy)
-  const maxDepthToLeaf = calcDepthToLeaf(hierarchy)
   for (const link of links(hierarchy)) {
     const { source, target } = link
     const sy = source.x!
@@ -127,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 {
@@ -143,8 +119,6 @@ export function renderNodeBubbles({
     marginLeft: ml,
   } = model
   const by = blockSizeYOverride || blockSize
-  const maxBranchLen = findMaxBranchLen(hierarchy)
-  const maxDepthToLeaf = calcDepthToLeaf(hierarchy)
   for (const node of descendants(hierarchy)) {
     const x = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf)
     if (x === undefined) {
@@ -184,6 +158,8 @@ export function renderTreeLabels({
   offsetY,
   ctx,
   clickMap,
+  maxBranchLen,
+  maxDepthToLeaf,
   blockSizeYOverride,
 }: {
   model: MsaViewModel
@@ -191,6 +167,8 @@ export function renderTreeLabels({
   ctx: CanvasRenderingContext2D
   clickMap?: ClickMapIndex
   theme: Theme
+  maxBranchLen: number
+  maxDepthToLeaf: number
   blockSizeYOverride?: number
 }) {
   const {
@@ -205,7 +183,6 @@ export function renderTreeLabels({
     marginLeft,
     leaves,
     noTree,
-    hierarchy,
   } = model
   const by = blockSizeYOverride || blockSize
   const emHeight = ctx.measureText('M').width
@@ -215,8 +192,6 @@ export function renderTreeLabels({
   } else {
     ctx.textAlign = 'start'
   }
-  const maxBranchLen = findMaxBranchLen(hierarchy)
-  const maxDepthToLeaf = calcDepthToLeaf(hierarchy)
   for (const node of leaves) {
     const {
       data: { name, id },
@@ -319,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,
     })
 
@@ -334,6 +315,8 @@ export function renderTreeCanvas({
         offsetY,
         clickMap,
         model,
+        maxBranchLen,
+        maxDepthToLeaf,
         blockSizeYOverride,
       })
     }
@@ -346,6 +329,8 @@ export function renderTreeCanvas({
       model,
       clickMap,
       theme,
+      maxBranchLen,
+      maxDepthToLeaf,
       blockSizeYOverride,
     })
   }

package/src/fetchUtils.ts

@@ -20,6 +20,20 @@ export async function jsonfetch<T>(url: string, args?: RequestInit) {
   return response.json() as T
 }
 
-export function timeout(time: number) {
-  return new Promise(res => setTimeout(res, time))
+export function timeout(time: number, signal?: AbortSignal) {
+  return new Promise<void>((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(new DOMException('Aborted', 'AbortError'))
+    } else {
+      const id = setTimeout(resolve, time)
+      signal?.addEventListener('abort', () => {
+        clearTimeout(id)
+        reject(new DOMException('Aborted', 'AbortError'))
+      })
+    }
+  })
+}
+
+export function isAbortError(e: unknown) {
+  return e instanceof DOMException && e.name === 'AbortError'
 }

package/src/hierarchy.ts

@@ -204,6 +204,33 @@ export function collapse<T>(node: HierarchyNode<T>) {
   }
 }
 
+// Cladogram positioning based on ape's plot.phylo: uses topological depth (max
+// steps to a tip) instead of branch length so all leaves align at the rightmost
+// x. Memoizes onto node.depthToLeaf since the layout walks the tree repeatedly.
+// See https://github.com/emmanuelparadis/ape/blob/master/R/plot.phylo.R
+export function calcDepthToLeaf(node: HierarchyNode): number {
+  if (node.depthToLeaf === undefined) {
+    let maxDepth = 0
+    if (node.children) {
+      for (const child of node.children) {
+        maxDepth = Math.max(maxDepth, 1 + calcDepthToLeaf(child))
+      }
+    }
+    node.depthToLeaf = maxDepth
+  }
+  return node.depthToLeaf
+}
+
+export function findMaxBranchLen(node: HierarchyNode): number {
+  let maxLen = node.len || 0
+  if (node.children) {
+    for (const child of node.children) {
+      maxLen = Math.max(maxLen, findMaxBranchLen(child))
+    }
+  }
+  return maxLen
+}
+
 export function maxLength(d: HierarchyNode): number {
   return (
     (d.data.length || 0) +

package/src/launchInterProScan.ts

@@ -1,6 +1,6 @@
 import { getSession } from '@jbrowse/core/util'
 
-import { jsonfetch, textfetch, timeout } from './fetchUtils.ts'
+import { isAbortError, jsonfetch, textfetch, timeout } from './fetchUtils.ts'
 
 import type { MsaViewModel } from './model.ts'
 
@@ -29,12 +29,14 @@ async function runInterProScan({
   onJobId,
   programs,
   model,
+  signal,
 }: {
   seq: string
   programs: string[]
   onProgress: (arg?: { msg: string; url?: string }) => void
   onJobId?: (arg: string) => void
   model: MsaViewModel
+  signal?: AbortSignal
 }) {
   const jobId = await textfetch(`${base}/iprscan5/run`, {
     method: 'POST',
@@ -43,37 +45,42 @@ async function runInterProScan({
       sequence: seq,
       programs: programs.join(','),
     }),
+    signal,
   })
   onJobId?.(jobId)
   await wait({
     jobId,
     onProgress,
+    signal,
   })
-  await loadInterProScanResultsWithStatus({ jobId, model })
+  await loadInterProScanResultsWithStatus({ jobId, model, onProgress, signal })
 }
 
-function loadInterProScanResults(jobId: string) {
+function loadInterProScanResults(jobId: string, signal?: AbortSignal) {
   return jsonfetch<InterProScanResponse>(
     `${base}/iprscan5/result/${jobId}/json`,
+    { signal },
   )
 }
 
 async function wait({
   onProgress,
   jobId,
+  signal,
 }: {
   jobId: string
   onProgress: (arg?: { msg: string; url?: string }) => void
+  signal?: AbortSignal
 }) {
   const url = `${base}/iprscan5/status/${jobId}`
   try {
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     while (true) {
       for (let i = 0; i < 10; i++) {
-        await timeout(1000)
+        await timeout(1000, signal)
         onProgress({ msg: `Checking status ${10 - i}`, url })
       }
-      const result = await textfetch(url)
+      const result = await textfetch(url, { signal })
       if (result.includes('FINISHED')) {
         break
       }
@@ -93,6 +100,7 @@ export async function launchInterProScan({
   onJobId,
   onProgress,
   model,
+  signal,
 }: {
   algorithm: string
   seq: string
@@ -100,6 +108,7 @@ export async function launchInterProScan({
   onProgress: (arg?: { msg: string; url?: string }) => void
   onJobId?: (arg: string) => void
   model: MsaViewModel
+  signal?: AbortSignal
 }) {
   try {
     onProgress({ msg: `Launching ${algorithm} MSA` })
@@ -110,10 +119,17 @@ export async function launchInterProScan({
         onProgress,
         programs,
         model,
+        signal,
       })
     } else {
       throw new Error('unknown algorithm')
     }
+  } catch (e) {
+    if (isAbortError(e)) {
+      getSession(model).notify('Cancelled InterProScan query', 'info')
+    } else {
+      throw e
+    }
   } finally {
     onProgress()
   }
@@ -122,25 +138,33 @@ export async function launchInterProScan({
 async function loadInterProScanResultsWithStatus({
   jobId,
   model,
+  onProgress,
+  signal,
 }: {
   jobId: string
   model: MsaViewModel
+  onProgress: (arg?: { msg: string; url?: string }) => void
+  signal?: AbortSignal
 }) {
   try {
-    model.setStatus({
+    onProgress({
       msg: `Downloading results of ${jobId} (for larger sequences this can be slow, click status to download and upload in the manual tab)`,
       url: `https://www.ebi.ac.uk/Tools/services/rest/iprscan5/result/${jobId}/json`,
     })
-    const ret = await loadInterProScanResults(jobId)
+    const ret = await loadInterProScanResults(jobId, signal)
     model.setInterProAnnotations(
       Object.fromEntries(ret.results.map(r => [r.xref[0]!.id, r])),
     )
     model.setShowDomains(true)
     getSession(model).notify(`Loaded interproscan ${jobId} results`, 'success')
   } catch (e) {
-    console.error(e)
-    getSession(model).notifyError(`${e}`, e)
+    if (isAbortError(e)) {
+      getSession(model).notify('Cancelled InterProScan query', 'info')
+    } else {
+      console.error(e)
+      getSession(model).notifyError(`${e}`, e)
+    }
   } finally {
-    model.setStatus()
+    onProgress()
   }
 }