react-msaview 4.4.6 → 4.6.0

package/src/components/msa/MSACanvasBlock.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useMemo, useRef } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 
+import { BaseTooltip } from '@jbrowse/core/ui'
 import { useTheme } from '@mui/material'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
@@ -79,55 +80,72 @@ const MSACanvasBlock = observer(function ({
     contrastScheme,
   ])
 
+  const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>()
+  const { hoveredInsertion } = model
+
   return (
-    <canvas
-      ref={ref}
-      onMouseMove={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)
+    <>
+      <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 {
-          // Clear mouse position when outside bounds
-          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)
-        }
-      }}
-      onMouseLeave={() => {
-        model.setMousePos()
-      }}
-      width={blockSize * highResScaleFactor}
-      height={blockSize * highResScaleFactor}
-      style={{
-        position: 'absolute',
-        top: scrollY + offsetY,
-        left: scrollX + offsetX,
-        width: blockSize,
-        height: blockSize,
-      }}
-    />
+          // 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 {
+            // Clear mouse position when outside bounds
+            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)
+          }
+        }}
+        onMouseLeave={() => {
+          model.setMousePos()
+          setMousePosition(undefined)
+        }}
+        width={blockSize * highResScaleFactor}
+        height={blockSize * highResScaleFactor}
+        style={{
+          position: 'absolute',
+          top: scrollY + offsetY,
+          left: scrollX + offsetX,
+          width: blockSize,
+          height: blockSize,
+        }}
+      />
+      {hoveredInsertion && mousePosition ? (
+        <BaseTooltip
+          clientPoint={{ x: mousePosition.x, y: mousePosition.y + 15 }}
+        >
+          Insertion ({hoveredInsertion.letters.length}bp):{' '}
+          {hoveredInsertion.letters.length > 20
+            ? `${hoveredInsertion.letters.slice(0, 20)}...`
+            : hoveredInsertion.letters}
+        </BaseTooltip>
+      ) : null}
+    </>
   )
 })
 

package/src/components/msa/renderMSABlock.ts

@@ -1,5 +1,3 @@
-import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes'
-
 import type { MsaViewModel } from '../../model'
 import type { NodeWithIdsAndLength } from '../../types'
 import type { Theme } from '@mui/material'
@@ -57,7 +55,6 @@ export function renderMSABlock({
       ctx,
       theme,
       offsetX,
-      offsetY,
       xStart,
       xEnd,
       visibleLeaves,
@@ -68,7 +65,13 @@ export function renderMSABlock({
     ctx,
     offsetX,
     contrastScheme,
-    theme,
+    xStart,
+    xEnd,
+    visibleLeaves,
+  })
+  drawInsertionIndicators({
+    model,
+    ctx,
     xStart,
     xEnd,
     visibleLeaves,
@@ -88,7 +91,6 @@ function drawTiles({
   model: MsaViewModel
   offsetX: number
   theme: Theme
-  offsetY: number
   ctx: CanvasRenderingContext2D
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number
@@ -109,6 +111,10 @@ function drawTiles({
     ? columns[relativeTo]?.slice(xStart, xEnd)
     : null
 
+  const isClustalX = colorSchemeName === 'clustalx_protein_dynamic'
+  const isPercentIdentity = colorSchemeName === 'percent_identity_dynamic'
+  const offsetXAligned = offsetX - (offsetX % colWidth)
+
   for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
     const node = visibleLeaves[i]!
     const {
@@ -117,44 +123,29 @@ function drawTiles({
     const y = node.x!
     const str = columns[name]?.slice(xStart, xEnd)
     if (str) {
-      for (let i = 0, l2 = str.length; i < l2; i++) {
-        const letter = str[i]!
+      for (let j = 0, l2 = str.length; j < l2; j++) {
+        const letter = str[j]!
 
         // Use a muted background for positions that match reference
         const isMatchingReference =
-          referenceSeq && name !== relativeTo && letter === referenceSeq[i]
-
-        const r1 = colorSchemeName === 'clustalx_protein_dynamic'
-        const r2 = colorSchemeName === 'percent_identity_dynamic'
-        const color = r1
-          ? getClustalXColor(
-              // use model.colStats dot notation here: delay use of colStats
-              // until absolutely needed
-              model.colStats[xStart + i]!,
-              model.colStatsSums[xStart + i]!,
-              model,
-              name,
-              xStart + i,
-            )
-          : r2
-            ? getPercentIdentityColor(
-                // use model.colStats dot notation here: delay use of
-                // colStats until absolutely needed
-                model.colStats[xStart + i]!,
-                model.colStatsSums[xStart + i]!,
-                model,
-                name,
-                xStart + i,
-              )
+          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()]
-        if (bgColor || r1 || r2) {
+        if (bgColor || isClustalX || isPercentIdentity) {
           // Use a very light background for matching positions in relative mode
           const finalColor = isMatchingReference
             ? theme.palette.action.hover
             : color || theme.palette.background.default
           ctx.fillStyle = finalColor
           ctx.fillRect(
-            i * colWidth + offsetX - (offsetX % colWidth),
+            j * colWidth + offsetXAligned,
             y - rowHeight,
             colWidth,
             rowHeight,
@@ -177,7 +168,6 @@ function drawText({
   offsetX: number
   model: MsaViewModel
   contrastScheme: Record<string, string>
-  theme: Theme
   ctx: CanvasRenderingContext2D
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number
@@ -201,20 +191,24 @@ function drawText({
     : null
 
   if (showMsaLetters) {
+    const offsetXAligned = offsetX - (offsetX % colWidth)
+    const halfColWidth = colWidth / 2
+    const quarterRowHeight = rowHeight / 4
+
     for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
       const node = visibleLeaves[i]!
       const {
         data: { name },
       } = node
-      const y = node.x!
+      const y = node.x! - quarterRowHeight
       const str = columns[name]?.slice(xStart, xEnd)
       if (str) {
-        for (let i = 0, l2 = str.length; i < l2; i++) {
-          const letter = str[i]!
+        for (let j = 0, l2 = str.length; j < l2; j++) {
+          const letter = str[j]!
 
           // Check if this position matches the reference
           const isMatchingReference =
-            referenceSeq && name !== relativeTo && letter === referenceSeq[i]
+            referenceSeq && name !== relativeTo && letter === referenceSeq[j]
 
           // Show dot for matching positions, original letter for differences
           const displayLetter = isMatchingReference ? '.' : letter
@@ -223,7 +217,6 @@ function drawText({
           const contrast = contrastLettering
             ? contrastScheme[letter.toUpperCase()] || 'black'
             : 'black'
-          const x = i * colWidth + offsetX - (offsetX % colWidth)
 
           // note: -rowHeight/4 matches +rowHeight/4 in tree
           ctx.fillStyle = actuallyShowDomains
@@ -231,7 +224,77 @@ function drawText({
             : bgColor
               ? contrast
               : color || 'black'
-          ctx.fillText(displayLetter, x + colWidth / 2, y - rowHeight / 4)
+          ctx.fillText(displayLetter, j * colWidth + offsetXAligned + halfColWidth, y)
+        }
+      }
+    }
+  }
+}
+
+function drawInsertionIndicators({
+  model,
+  ctx,
+  visibleLeaves,
+  xStart,
+  xEnd,
+}: {
+  model: MsaViewModel
+  ctx: CanvasRenderingContext2D
+  visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
+  xStart: number
+  xEnd: number
+}) {
+  const { bgColor, hideGapsEffective } = model
+  if (!hideGapsEffective) {
+    return
+  }
+
+  ctx.lineWidth = 1
+  ctx.strokeStyle = '#f0f'
+  drawZigZag({ visibleLeaves, xStart, ctx, model, xEnd, offset: 0 })
+  ctx.strokeStyle = !bgColor ? '#000' : '#fff'
+  drawZigZag({ visibleLeaves, xStart, ctx, model, xEnd, offset: -1 })
+}
+
+function drawZigZag({
+  model,
+  ctx,
+  visibleLeaves,
+  xStart,
+  xEnd,
+  offset,
+}: {
+  model: MsaViewModel
+  ctx: CanvasRenderingContext2D
+  visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
+  xStart: number
+  xEnd: number
+  offset: number
+}) {
+  const zigSize = 1
+  const { colWidth, rowHeight, insertionPositions } = model
+  for (const node of visibleLeaves) {
+    const { name } = node.data
+    const insertions = insertionPositions.get(name)
+    if (insertions) {
+      const y = node.x!
+      for (const { pos } of insertions) {
+        if (pos >= xStart && pos < xEnd) {
+          const x = pos * colWidth
+          const top = y - rowHeight
+          const bottom = y
+          ctx.beginPath()
+          ctx.moveTo(x + offset, top + offset)
+          let currentY = top
+          let goRight = true
+          while (currentY < bottom) {
+            const nextY = Math.min(currentY + zigSize * 2, bottom)
+            const nextX = goRight ? x + zigSize : x - zigSize
+            ctx.lineTo(nextX + offset, nextY + offset)
+            currentY = nextY
+            goRight = !goRight
+          }
+          ctx.stroke()
         }
       }
     }

package/src/components/msa/renderMSAMouseover.ts

@@ -28,6 +28,7 @@ export function renderMouseover({
     relativeTo,
     rowNamesSet,
     hoveredTreeNode,
+    highlightedColumns,
   } = model
   ctx.resetTransform()
   ctx.clearRect(0, 0, width, height)
@@ -52,6 +53,14 @@ export function renderMouseover({
     }
   }
 
+  // Highlight multiple columns
+  if (highlightedColumns?.length) {
+    ctx.fillStyle = highlightColor
+    for (const col of highlightedColumns) {
+      ctx.fillRect(col * colWidth + scrollX, 0, colWidth, height)
+    }
+  }
+
   if (mouseCol !== undefined) {
     ctx.fillStyle = hoverColor
     ctx.fillRect(mouseCol * colWidth + scrollX, 0, colWidth, height)

package/src/components/tracks/renderTracksSvg.ts

@@ -0,0 +1,157 @@
+import type { MsaViewModel } from '../../model'
+import type { BasicTrack } from '../../types'
+
+export function renderConservationTrack({
+  model,
+  ctx,
+  offsetX,
+  offsetY,
+  trackHeight,
+  blockSizeXOverride,
+  highResScaleFactorOverride,
+}: {
+  model: MsaViewModel
+  ctx: CanvasRenderingContext2D
+  offsetX: number
+  offsetY: number
+  trackHeight: number
+  blockSizeXOverride?: number
+  highResScaleFactorOverride?: number
+}) {
+  const { blockSize, colWidth, highResScaleFactor, conservation } = model
+  const bx = blockSizeXOverride ?? blockSize
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+
+  ctx.resetTransform()
+  ctx.scale(k, k)
+  ctx.translate(-offsetX, offsetY)
+
+  const xStart = Math.max(0, Math.floor(offsetX / colWidth))
+  const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth))
+
+  for (let i = xStart; i < xEnd && i < conservation.length; i++) {
+    const value = conservation[i]!
+    const barHeight = value * trackHeight
+    const x = i * colWidth
+
+    const hue = value * 120
+    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`
+    ctx.fillRect(x, trackHeight - barHeight, colWidth, barHeight)
+  }
+
+  ctx.resetTransform()
+}
+
+export function renderTextTrack({
+  model,
+  ctx,
+  track,
+  offsetX,
+  offsetY,
+  contrastScheme,
+  blockSizeXOverride,
+  highResScaleFactorOverride,
+}: {
+  model: MsaViewModel
+  ctx: CanvasRenderingContext2D
+  track: BasicTrack
+  offsetX: number
+  offsetY: number
+  contrastScheme: Record<string, string>
+  blockSizeXOverride?: number
+  highResScaleFactorOverride?: number
+}) {
+  const {
+    blockSize,
+    bgColor,
+    colorScheme: modelColorScheme,
+    colWidth,
+    fontSize,
+    rowHeight,
+    highResScaleFactor,
+  } = model
+
+  const { customColorScheme, data } = track.model
+  const colorScheme = customColorScheme ?? modelColorScheme
+  const bx = blockSizeXOverride ?? blockSize
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+
+  ctx.resetTransform()
+  ctx.scale(k, k)
+  ctx.translate(-offsetX, offsetY)
+  ctx.textAlign = 'center'
+  ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
+
+  const xStart = Math.max(0, Math.floor(offsetX / colWidth))
+  const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth))
+  const str = data?.slice(xStart, xEnd)
+
+  for (let i = 0; str && i < str.length; i++) {
+    const letter = str[i]!
+    const color = colorScheme[letter.toUpperCase()]
+    const x = i * colWidth + offsetX - (offsetX % colWidth)
+
+    if (bgColor && color) {
+      ctx.fillStyle = color
+      ctx.fillRect(x, 0, colWidth, rowHeight)
+    }
+
+    if (rowHeight >= 10 && colWidth >= rowHeight / 2) {
+      ctx.fillStyle =
+        bgColor && color
+          ? (contrastScheme[letter.toUpperCase()] ?? 'black')
+          : 'black'
+      ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1)
+    }
+  }
+
+  ctx.resetTransform()
+}
+
+export function renderAllTracks({
+  model,
+  ctx,
+  offsetX,
+  contrastScheme,
+  blockSizeXOverride,
+  highResScaleFactorOverride,
+}: {
+  model: MsaViewModel
+  ctx: CanvasRenderingContext2D
+  offsetX: number
+  contrastScheme: Record<string, string>
+  blockSizeXOverride?: number
+  highResScaleFactorOverride?: number
+}) {
+  const { turnedOnTracks } = model
+  let currentY = 0
+
+  for (const track of turnedOnTracks) {
+    const trackHeight = track.model.height
+
+    if (track.model.id === 'conservation') {
+      renderConservationTrack({
+        model,
+        ctx,
+        offsetX,
+        offsetY: currentY,
+        trackHeight,
+        blockSizeXOverride,
+        highResScaleFactorOverride,
+      })
+    } else {
+      renderTextTrack({
+        model,
+        ctx,
+        track,
+        offsetX,
+        offsetY: currentY,
+        contrastScheme,
+        blockSizeXOverride,
+        highResScaleFactorOverride,
+      })
+    }
+
+    currentY += trackHeight
+  }
+}

package/src/components/tree/TreeNodeMenu.tsx

@@ -64,9 +64,9 @@ const TreeMenu = observer(function ({
             model.toggleCollapsed(node.id)
           } else {
             if (node.id.endsWith('-leafnode')) {
-              model.toggleCollapsed2(node.id)
+              model.toggleCollapsedLeaf(node.id)
             } else {
-              model.toggleCollapsed2(`${node.id}-leafnode`)
+              model.toggleCollapsedLeaf(`${node.id}-leafnode`)
             }
           }
           onClose()

package/src/components/tree/renderTreeCanvas.ts

@@ -42,15 +42,9 @@ export function renderTree({
   theme: Theme
   blockSizeYOverride?: number
 }) {
-  const {
-    hierarchy,
-    allBranchesLength0,
-    showBranchLen: showBranchLenPre,
-    blockSize,
-  } = model
+  const { hierarchy, showBranchLenEffective: showBranchLen, blockSize } = model
   const by = blockSizeYOverride || blockSize
   ctx.strokeStyle = theme.palette.text.primary
-  const showBranchLen = allBranchesLength0 ? false : showBranchLenPre
   for (const link of hierarchy.links()) {
     const { source, target } = link
     if (target.height === 0 && !showBranchLen) {
@@ -89,25 +83,22 @@ export function renderNodeBubbles({
   clickMap?: ClickMapIndex
   offsetY: number
   model: MsaViewModel
-  theme: Theme
   blockSizeYOverride?: number
 }) {
   const {
     hierarchy,
-    showBranchLen: showBranchLenPre,
-    allBranchesLength0,
+    showBranchLenEffective: showBranchLen,
     collapsed,
     blockSize,
     marginLeft: ml,
   } = model
   const by = blockSizeYOverride || blockSize
-  const showBranchLen = allBranchesLength0 ? false : showBranchLenPre
   for (const node of hierarchy.descendants()) {
     const val = showBranchLen ? 'len' : 'y'
     // @ts-expect-error
     const { [val]: x, data } = node
     const y = node.x!
-    const { id = '', name = '' } = data
+    const { id, name } = data
     if (
       node.height > 1 &&
       y > offsetY - extendBounds &&
@@ -150,8 +141,7 @@ export function renderTreeLabels({
 }) {
   const {
     fontSize,
-    showBranchLen: showBranchLenPre,
-    allBranchesLength0,
+    showBranchLenEffective: showBranchLen,
     treeMetadata,
     hierarchy,
     collapsed,
@@ -167,13 +157,13 @@ export function renderTreeLabels({
     noTree,
   } = model
   const by = blockSizeYOverride || blockSize
+  const emHeight = ctx.measureText('M').width
   if (labelsAlignRight) {
     ctx.textAlign = 'right'
     ctx.setLineDash([1, 3])
   } else {
     ctx.textAlign = 'start'
   }
-  const showBranchLen = allBranchesLength0 ? false : showBranchLenPre
   for (const node of leaves) {
     const {
       data: { name, id },
@@ -187,28 +177,29 @@ export function renderTreeLabels({
     if (y > offsetY - extendBounds && y < offsetY + by + extendBounds) {
       // note: +rowHeight/4 matches with -rowHeight/4 in msa
       const yp = y + fontSize / 4
-      let 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
+      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)
-      const height = ctx.measureText('M').width // use an 'em' for height
 
       ctx.fillStyle = theme.palette.text.primary
       if (labelsAlignRight) {
         const smallPadding = 2
         const offset = treeAreaWidthMinusMargin - smallPadding
         if (drawTree && !noTree) {
-          const { width } = ctx.measureText(displayName)
           ctx.moveTo(xp + radius + 2, y)
           ctx.lineTo(offset - smallPadding - width, y)
           ctx.stroke()
@@ -217,17 +208,18 @@ export function renderTreeLabels({
         clickMap?.insert({
           minX: treeAreaWidth - width,
           maxX: treeAreaWidth,
-          minY: yp - height,
+          minY: yp - emHeight,
           maxY: yp,
           name,
           id,
         })
       } else {
-        ctx.fillText(displayName, xp + d, yp)
+        const labelX = noTree ? 2 : xp + d
+        ctx.fillText(displayName, labelX, yp)
         clickMap?.insert({
-          minX: xp + d + marginLeft,
-          maxX: xp + d + width + marginLeft,
-          minY: yp - height,
+          minX: labelX + marginLeft,
+          maxX: labelX + width + marginLeft,
+          minY: yp - emHeight,
           maxY: yp,
           name,
           id,
@@ -303,7 +295,6 @@ export function renderTreeCanvas({
         offsetY,
         clickMap,
         model,
-        theme,
         blockSizeYOverride,
       })
     }