react-msaview 4.4.4 → 4.4.5

package/src/components/msa/renderMSABlock.ts

@@ -101,8 +101,14 @@ function drawTiles({
     columns,
     colWidth,
     rowHeight,
+    relativeTo,
   } = model
 
+  // Get reference sequence if relativeTo is set
+  const referenceSeq = relativeTo
+    ? columns[relativeTo]?.slice(xStart, xEnd)
+    : null
+
   for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
     const node = visibleLeaves[i]!
     const {
@@ -113,6 +119,11 @@ function drawTiles({
     if (str) {
       for (let i = 0, l2 = str.length; i < l2; i++) {
         const letter = str[i]!
+
+        // 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
@@ -137,7 +148,11 @@ function drawTiles({
               )
             : colorScheme[letter.toUpperCase()]
         if (bgColor || r1 || r2) {
-          ctx.fillStyle = color || theme.palette.background.default
+          // 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),
             y - rowHeight,
@@ -177,7 +192,14 @@ function drawText({
     colWidth,
     contrastLettering,
     rowHeight,
+    relativeTo,
   } = model
+
+  // Get reference sequence if relativeTo is set
+  const referenceSeq = relativeTo
+    ? columns[relativeTo]?.slice(xStart, xEnd)
+    : null
+
   if (showMsaLetters) {
     for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
       const node = visibleLeaves[i]!
@@ -189,6 +211,14 @@ function drawText({
       if (str) {
         for (let i = 0, l2 = str.length; i < l2; i++) {
           const letter = str[i]!
+
+          // Check if this position matches the reference
+          const isMatchingReference =
+            referenceSeq && name !== relativeTo && letter === referenceSeq[i]
+
+          // Show dot for matching positions, original letter for differences
+          const displayLetter = isMatchingReference ? '.' : letter
+
           const color = colorScheme[letter.toUpperCase()]
           const contrast = contrastLettering
             ? contrastScheme[letter.toUpperCase()] || 'black'
@@ -201,7 +231,7 @@ function drawText({
             : bgColor
               ? contrast
               : color || 'black'
-          ctx.fillText(letter, x + colWidth / 2, y - rowHeight / 4)
+          ctx.fillText(displayLetter, x + colWidth / 2, y - rowHeight / 4)
         }
       }
     }

package/src/components/msa/renderMSAMouseover.ts

@@ -2,6 +2,8 @@ import type { MsaViewModel } from '../../model'
 
 const hoverColor = 'rgba(0,0,0,0.15)'
 const highlightColor = 'rgba(128,128,0,0.2)'
+const referenceColor = 'rgba(0,128,255,0.3)' // Blue highlight for reference row
+const multiRowHoverColor = 'rgba(255,165,0,0.15)' // Orange highlight for multi-row tree hover
 
 export function renderMouseover({
   ctx,
@@ -23,9 +25,33 @@ export function renderMouseover({
     mouseCol2,
     mouseClickRow,
     mouseClickCol,
+    relativeTo,
+    rowNamesSet,
+    hoveredTreeNode,
   } = model
   ctx.resetTransform()
   ctx.clearRect(0, 0, width, height)
+
+  // Highlight reference row (relativeTo) persistently
+  if (relativeTo) {
+    const referenceRowIndex = rowNamesSet.get(relativeTo)
+    if (referenceRowIndex !== undefined) {
+      ctx.fillStyle = referenceColor
+      ctx.fillRect(0, referenceRowIndex * rowHeight + scrollY, width, rowHeight)
+    }
+  }
+
+  // Highlight multiple rows when hovering over tree nodes with children
+  if (hoveredTreeNode) {
+    ctx.fillStyle = multiRowHoverColor
+    for (const descendantName of hoveredTreeNode.descendantNames) {
+      const rowIndex = rowNamesSet.get(descendantName)
+      if (rowIndex !== undefined) {
+        ctx.fillRect(0, rowIndex * rowHeight + scrollY, width, rowHeight)
+      }
+    }
+  }
+
   if (mouseCol !== undefined) {
     ctx.fillStyle = hoverColor
     ctx.fillRect(mouseCol * colWidth + scrollX, 0, colWidth, height)

package/src/components/tree/TreeCanvas.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react'
 
+import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
+import { isAlive } from 'mobx-state-tree'
 
 import TreeCanvasBlock from './TreeCanvasBlock'
 import { padding } from './renderTreeCanvas'
@@ -9,10 +11,11 @@ import type { MsaViewModel } from '../../model'
 
 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 } = model
+  const { treeWidth, height, blocksY, treeAreaWidth, scrollY } = model
   const [mouseDragging, setMouseDragging] = useState(false)
 
   useEffect(() => {
@@ -80,6 +83,64 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
     return cleanup
   }, [model, mouseDragging])
 
+  // Global tree mouseover effect
+  useEffect(() => {
+    const ctx = mouseoverRef.current?.getContext('2d')
+    return ctx
+      ? autorun(() => {
+          if (isAlive(model)) {
+            ctx.resetTransform()
+            ctx.clearRect(0, 0, treeAreaWidth, height)
+
+            // 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)
+              }
+            }
+
+            // Highlight multiple rows when hovering over tree nodes
+            if (hoveredTreeNode) {
+              ctx.fillStyle = 'rgba(255,165,0,0.2)' // Orange highlight for tree hover
+              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)
+                }
+              }
+            }
+
+            // 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)
+              }
+            }
+          }
+        })
+      : 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
@@ -117,6 +178,20 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
       {blocksY.map(block => (
         <TreeCanvasBlock key={block} model={model} offsetY={block} />
       ))}
+      <canvas
+        ref={mouseoverRef}
+        width={treeAreaWidth}
+        height={height}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: treeAreaWidth,
+          height,
+          zIndex: 1000,
+          pointerEvents: 'none',
+        }}
+      />
     </div>
   )
 })

package/src/components/tree/TreeCanvasBlock.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useTheme } from '@mui/material'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
-import RBush from 'rbush'
+import Flatbush from 'flatbush'
 
 import TreeBranchMenu from './TreeBranchMenu'
 import TreeNodeMenu from './TreeNodeMenu'
@@ -28,6 +28,46 @@ interface ClickEntry {
   maxY: number
 }
 
+class ClickMapIndex {
+  private flatbush: Flatbush | null = null
+  private entries: ClickEntry[] = []
+
+  clear() {
+    this.flatbush = null
+    this.entries = []
+  }
+
+  insert(entry: ClickEntry) {
+    this.entries.push(entry)
+  }
+
+  finish() {
+    if (this.entries.length === 0) {
+      this.flatbush = null
+      return
+    } else {
+      this.flatbush = new Flatbush(this.entries.length)
+      for (const entry of this.entries) {
+        this.flatbush.add(entry.minX, entry.minY, entry.maxX, entry.maxY)
+      }
+      this.flatbush.finish()
+    }
+  }
+
+  search(box: {
+    minX: number
+    maxX: number
+    minY: number
+    maxY: number
+  }): ClickEntry[] {
+    return (
+      this.flatbush
+        ?.search(box.minX, box.minY, box.maxX, box.maxY)
+        .map(i => this.entries[i]!) ?? []
+    )
+  }
+}
+
 const TreeCanvasBlock = observer(function ({
   model,
   offsetY,
@@ -37,7 +77,7 @@ const TreeCanvasBlock = observer(function ({
 }) {
   const theme = useTheme()
   const ref = useRef<HTMLCanvasElement>(null)
-  const clickMap = useRef(new RBush<ClickEntry>())
+  const clickMap = useRef(new ClickMapIndex())
   const mouseoverRef = useRef<HTMLCanvasElement>(null)
   const [branchMenu, setBranchMenu] = useState<TooltipData>()
   const [toggleNodeMenu, setToggleNodeMenu] = useState<TooltipData>()
@@ -93,6 +133,7 @@ const TreeCanvasBlock = observer(function ({
     ctx.clearRect(0, 0, treeAreaWidth + padding, blockSize)
     ctx.translate(0, -offsetY)
 
+    // Highlight tree element being directly hovered
     if (hoverElt) {
       const { minX, maxX, minY, maxY } = hoverElt
 
@@ -169,9 +210,29 @@ const TreeCanvasBlock = observer(function ({
             return
           }
 
-          const ret = hoverNameClickMap(event) || hoverBranchClickMap(event)
-          ref.current.style.cursor = ret ? 'pointer' : 'default'
-          setHoverElt(hoverNameClickMap(event))
+          const hoveredLeaf = hoverNameClickMap(event)
+          const hoveredBranch = hoverBranchClickMap(event)
+          const hoveredAny = hoveredLeaf || hoveredBranch
+
+          ref.current.style.cursor = hoveredAny ? 'pointer' : 'default'
+          setHoverElt(hoveredLeaf) // Only show direct hover highlight for leaf nodes
+
+          // Handle tree node hover for multi-row highlighting
+          if (hoveredAny) {
+            model.setHoveredTreeNode(hoveredAny.id)
+
+            // For leaf nodes, also set single row highlight for backward compatibility
+            if (hoveredLeaf?.name) {
+              const rowIndex = model.rowNamesSet.get(hoveredLeaf.name)
+              if (rowIndex !== undefined) {
+                model.setMousePos(undefined, rowIndex)
+              }
+            }
+          } else {
+            // Clear all highlighting when not hovering over any tree node
+            model.setHoveredTreeNode(undefined)
+            model.setMousePos(undefined, undefined)
+          }
         }}
         onClick={event => {
           const { clientX: x, clientY: y } = event
@@ -188,6 +249,9 @@ const TreeCanvasBlock = observer(function ({
         }}
         onMouseLeave={() => {
           setHoverElt(undefined)
+          // Clear all highlighting when leaving tree area
+          model.setHoveredTreeNode(undefined)
+          model.setMousePos(undefined, undefined)
         }}
         ref={vref}
       />

package/src/components/tree/TreeNodeMenu.tsx

@@ -79,12 +79,23 @@ const TreeMenu = observer(function ({
       <MenuItem
         dense
         onClick={() => {
-          model.drawRelativeTo(node.id)
+          model.drawRelativeTo(node.name)
           onClose()
         }}
       >
         Indicate differences from this row
       </MenuItem>
+      {model.relativeTo ? (
+        <MenuItem
+          dense
+          onClick={() => {
+            model.drawRelativeTo(undefined)
+            onClose()
+          }}
+        >
+          Clear reference row
+        </MenuItem>
+      ) : null}
     </Menu>
   )
 })

package/src/components/tree/renderTreeCanvas.ts

@@ -1,6 +1,5 @@
 import type { MsaViewModel } from '../../model'
 import type { Theme } from '@mui/material'
-import type RBush from 'rbush'
 
 export const padding = 600
 
@@ -18,6 +17,18 @@ interface ClickEntry {
   maxY: number
 }
 
+interface ClickMapIndex {
+  clear(): void
+  insert(entry: ClickEntry): void
+  finish(): void
+  search(box: {
+    minX: number
+    maxX: number
+    minY: number
+    maxY: number
+  }): ClickEntry[]
+}
+
 export function renderTree({
   offsetY,
   ctx,
@@ -75,7 +86,7 @@ export function renderNodeBubbles({
   blockSizeYOverride,
 }: {
   ctx: CanvasRenderingContext2D
-  clickMap?: RBush<ClickEntry>
+  clickMap?: ClickMapIndex
   offsetY: number
   model: MsaViewModel
   theme: Theme
@@ -133,7 +144,7 @@ export function renderTreeLabels({
   model: MsaViewModel
   offsetY: number
   ctx: CanvasRenderingContext2D
-  clickMap?: RBush<ClickEntry>
+  clickMap?: ClickMapIndex
   theme: Theme
   blockSizeYOverride?: number
 }) {
@@ -239,12 +250,14 @@ export function renderTreeCanvas({
   model: MsaViewModel
   offsetY: number
   ctx: CanvasRenderingContext2D
-  clickMap?: RBush<ClickEntry>
+  clickMap?: ClickMapIndex
   theme: Theme
   highResScaleFactorOverride?: number
   blockSizeYOverride?: number
 }) {
   clickMap?.clear()
+
+  // Defer the finish call until after all inserts are done
   const {
     noTree,
     drawTree,
@@ -306,4 +319,7 @@ export function renderTreeCanvas({
       blockSizeYOverride,
     })
   }
+
+  // Finish the index so it's ready for queries
+  clickMap?.finish()
 }

package/src/components/util.ts

@@ -11,7 +11,7 @@ export function chooseGridPitch(
   scale = Math.abs(scale)
   const minMajorPitchBp = minMajorPitchPx * scale
   const majorMagnitude = Number.parseInt(
-    Number(minMajorPitchBp).toExponential().split(/e/i)[1]!,
+    minMajorPitchBp.toExponential().split(/e/i)[1]!,
     10,
   )
 

package/src/layout.ts

@@ -1,4 +1,4 @@
-import RBush from 'rbush'
+import Flatbush from 'flatbush'
 
 export default class Layout {
   public rectangles: Map<
@@ -13,11 +13,13 @@ export default class Layout {
     }
   >
 
-  public maxHeightReached: boolean
+  public maxHeightReached = false
 
   private maxHeight: number
 
-  private rbush: RBush<{ id: string }>
+  private flatbush: Flatbush | null = null
+
+  private indexToId: string[] = []
 
   private pTotalHeight: number
 
@@ -26,13 +28,51 @@ export default class Layout {
   }: {
     maxHeight?: number
   } = {}) {
-    this.maxHeightReached = false
-    this.rbush = new RBush()
     this.rectangles = new Map()
     this.maxHeight = Math.ceil(maxHeight)
     this.pTotalHeight = 0 // total height, in units of bitmap squares (px/pitchY)
   }
 
+  private rebuildIndex() {
+    // Rebuild the spatial index with current rectangles
+    const rects = Array.from(this.rectangles.values())
+    if (rects.length === 0) {
+      this.flatbush = null
+      this.indexToId = []
+      return
+    }
+
+    this.flatbush = new Flatbush(rects.length)
+    this.indexToId = []
+
+    for (const rect of rects) {
+      this.flatbush.add(rect.minX, rect.minY, rect.maxX, rect.maxY)
+      this.indexToId.push(rect.id)
+    }
+
+    this.flatbush.finish()
+  }
+
+  private collides(box: {
+    minX: number
+    minY: number
+    maxX: number
+    maxY: number
+  }): boolean {
+    if (!this.flatbush) {
+      return false
+    }
+
+    const results = this.flatbush.search(
+      box.minX,
+      box.minY,
+      box.maxX,
+      box.maxY,
+    )
+
+    return results.length > 0
+  }
+
   /**
    * @returns top position for the rect, or Null if laying
    *  out the rect would exceed maxHeighe
@@ -44,7 +84,7 @@ export default class Layout {
     height: number,
     data: unknown,
   ): number | null {
-    // add to rbush
+    // add to flatbush
     const existingRecord = this.rectangles.get(id)
     if (existingRecord) {
       return existingRecord.minY
@@ -52,7 +92,7 @@ export default class Layout {
 
     let currHeight = 0
     while (
-      this.rbush.collides({
+      this.collides({
         minX: left,
         minY: currHeight,
         maxX: right,
@@ -71,8 +111,8 @@ export default class Layout {
       id,
       data,
     }
-    this.rbush.insert(record)
     this.rectangles.set(id, record)
+    this.rebuildIndex()
     this.pTotalHeight = Math.max(this.pTotalHeight, currHeight)
     return currHeight
   }

package/src/model/treeModel.ts

@@ -70,14 +70,14 @@ export function TreeModelF() {
        * set tree area width (px)
        */
       setTreeAreaWidth(n: number) {
-        self.treeAreaWidth = n
+        self.treeAreaWidth = Math.round(n)
       },
       /**
        * #action
        * set tree width (px)
        */
       setTreeWidth(n: number) {
-        self.treeWidth = n
+        self.treeWidth = Math.round(n)
       },
 
       /**