react-msaview 5.6.0 → 5.6.2

package/src/components/msa/renderMSABlock.ts

@@ -1,7 +1,7 @@
-import { getVisibleLeaves } from './getVisibleLeaves.ts'
 import { visibleColRange } from './visibleColRange.ts'
 import { setFontSize } from '../../setFontSize.ts'
 import { adjustColorForContrast } from '../../util.ts'
+import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
@@ -60,27 +60,19 @@ export function renderMSABlock({
     ? columns.get(relativeTo)?.slice(xStart, xEnd)
     : null
 
-  if (!actuallyShowDomains) {
-    drawTilesAndText({
-      model,
-      ctx,
-      theme,
-      contrastScheme,
-      xStart,
-      xEnd,
-      visibleLeaves,
-      referenceSeq,
-    })
-  } else {
-    drawText({
-      model,
-      ctx,
-      xStart,
-      xEnd,
-      visibleLeaves,
-      referenceSeq,
-    })
-  }
+  drawTilesAndText({
+    model,
+    ctx,
+    theme,
+    contrastScheme,
+    xStart,
+    xEnd,
+    visibleLeaves,
+    referenceSeq,
+    // when domains are shown the background tiles come from
+    // renderBoxFeatureCanvasBlock, so only the letters are drawn here
+    drawTiles: !actuallyShowDomains,
+  })
   drawInsertionIndicators({
     model,
     ctx,
@@ -91,6 +83,35 @@ export function renderMSABlock({
   ctx.resetTransform()
 }
 
+// Per-cell tile color for the active scheme. The scheme is fixed for the whole
+// block, so resolve which rule applies once rather than re-testing the scheme
+// name inside the innermost loop.
+function tileColorFn(model: MsaViewModel) {
+  const { colorSchemeName, colorScheme, colClustalX, colConsensus } = model
+  if (colorSchemeName === 'clustalx_protein_dynamic') {
+    return (col: number, letter: string) => colClustalX[col]![letter]
+  }
+  if (colorSchemeName === 'percent_identity_dynamic') {
+    return (col: number, letter: string) => {
+      const consensus = colConsensus[col]!
+      return letter === consensus.letter ? consensus.color : undefined
+    }
+  }
+  return (_col: number, letter: string) => colorScheme[letter]
+}
+
+// Letter color to use over a domain box, keyed by accession. Domain fills come
+// from a categorical palette that has no fixed lightness, so ask the theme for a
+// readable text color per fill instead of assuming dark-on-light.
+function domainLetterColors(model: MsaViewModel, theme: Theme) {
+  return new Map(
+    Object.entries(model.fillPalette).map(([accession, fill]) => [
+      accession,
+      theme.palette.getContrastText(fill),
+    ]),
+  )
+}
+
 function drawTilesAndText({
   model,
   ctx,
@@ -100,6 +121,7 @@ function drawTilesAndText({
   xStart,
   xEnd,
   referenceSeq,
+  drawTiles,
 }: {
   model: MsaViewModel
   theme: Theme
@@ -109,128 +131,94 @@ function drawTilesAndText({
   xStart: number
   xEnd: number
   referenceSeq: string | null | undefined
+  drawTiles: boolean
 }) {
   const {
     bgColor,
-    colorSchemeName,
-    colorScheme,
     columns,
     colWidth,
     rowHeight,
     relativeTo,
     showMsaLetters,
-    colClustalX,
-    colConsensus,
+    subFeatureRows,
+    domainBandsByStart,
   } = model
 
-  const isClustalX = colorSchemeName === 'clustalx_protein_dynamic'
-  const isPercentIdentity = colorSchemeName === 'percent_identity_dynamic'
-  if (!bgColor && !showMsaLetters) {
-    return
-  }
-  const offsetXAligned = xStart * colWidth
-  const halfColWidth = colWidth / 2
-  const quarterRowHeight = rowHeight / 4
-
-  for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
-    const node = visibleLeaves[i]!
-    const { name } = node.data
-    const y = node.x!
-    const str = columns.get(name)?.slice(xStart, xEnd)
-    if (!str) {
-      continue
-    }
-    const tileY = y - rowHeight
-    const textY = y - quarterRowHeight
+  const tiles = drawTiles && bgColor
+  if (tiles || showMsaLetters) {
+    const tileColor = tileColorFn(model)
+    const offsetXAligned = xStart * colWidth
+    const halfColWidth = colWidth / 2
+    // note: -rowHeight/4 matches +rowHeight/4 in tree
+    const quarterRowHeight = rowHeight / 4
+    // with the tiles coming from the domain overlay instead, letters sit either
+    // on a domain box or on the plain background; sub-row layout stacks the boxes
+    // above the letters, so those rows are all plain background
+    const overDomains = !drawTiles && !subFeatureRows
+    const domainColors = overDomains
+      ? domainLetterColors(model, theme)
+      : undefined
 
-    for (let j = 0, l2 = str.length; j < l2; j++) {
-      const letter = str[j]!
-      const x = j * colWidth + offsetXAligned
-      const isMatchingReference =
-        referenceSeq && name !== relativeTo && letter === referenceSeq[j]
+    for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
+      const node = visibleLeaves[i]!
+      const { name } = node.data
+      const y = node.x!
+      const str = columns.get(name)?.slice(xStart, xEnd)
+      if (str) {
+        const tileY = y - rowHeight
+        const textY = y - quarterRowHeight
+        const bands = overDomains ? domainBandsByStart.get(name) : undefined
+        let band = 0
 
-      let color: string | undefined
-      if (isClustalX) {
-        color = colClustalX[xStart + j]![letter]
-      } else if (isPercentIdentity) {
-        const consensus = colConsensus[xStart + j]!
-        color = letter === consensus.letter ? consensus.color : undefined
-      } else {
-        color = colorScheme[letter]
-      }
+        for (let j = 0, l2 = str.length; j < l2; j++) {
+          const col = xStart + j
+          const letter = str[j]!
+          const x = j * colWidth + offsetXAligned
+          const isMatchingReference =
+            referenceSeq && name !== relativeTo && letter === referenceSeq[j]
+          const color = tileColor(col, letter)
 
-      if (bgColor) {
-        ctx.fillStyle = isMatchingReference
-          ? theme.palette.action.hover
-          : color || theme.palette.background.default
-        ctx.fillRect(x, tileY, colWidth, rowHeight)
-      }
+          if (tiles) {
+            ctx.fillStyle = isMatchingReference
+              ? theme.palette.action.hover
+              : color || theme.palette.background.default
+            ctx.fillRect(x, tileY, colWidth, rowHeight)
+          }
 
-      if (showMsaLetters) {
-        ctx.fillStyle = bgColor
-          ? (contrastScheme[letter] ?? 'black')
-          : color
-            ? adjustColorForContrast(color, theme.palette.background.default)
-            : theme.palette.text.primary
-        ctx.fillText(
-          isMatchingReference ? '.' : letter,
-          x + halfColWidth,
-          textY,
-        )
+          if (showMsaLetters) {
+            // bands are sorted by start column and the sweep is left to right,
+            // so one forward-only cursor finds the band covering each column
+            while (bands && band < bands.length && bands[band]!.endCol <= col) {
+              band++
+            }
+            const covering = bands?.[band]
+            ctx.fillStyle =
+              covering && covering.startCol <= col
+                ? // on top of a domain box: contrast against the box fill
+                  domainColors!.get(covering.annotation.accession)!
+                : tiles
+                  ? // on top of a colored tile
+                    (contrastScheme[letter] ?? 'black')
+                  : !drawTiles || !color
+                    ? // plain background, uncolored letters
+                      theme.palette.text.primary
+                    : // letter-color mode: darken/lighten to stay readable
+                      adjustColorForContrast(
+                        color,
+                        theme.palette.background.default,
+                      )
+            ctx.fillText(
+              isMatchingReference ? '.' : letter,
+              x + halfColWidth,
+              textY,
+            )
+          }
+        }
       }
     }
   }
 }
 
-// When domains are shown the background tiles come from renderBoxFeatureCanvasBlock,
-// so we only need to draw text here.
-function drawText({
-  model,
-  ctx,
-  visibleLeaves,
-  xStart,
-  xEnd,
-  referenceSeq,
-}: {
-  model: MsaViewModel
-  ctx: RenderCtx
-  visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
-  xStart: number
-  xEnd: number
-  referenceSeq: string | null | undefined
-}) {
-  const { showMsaLetters, columns, colWidth, rowHeight, relativeTo } = model
-
-  if (!showMsaLetters) {
-    return
-  }
-  const offsetXAligned = xStart * colWidth
-  const halfColWidth = colWidth / 2
-  const quarterRowHeight = rowHeight / 4
-  // note: -rowHeight/4 matches +rowHeight/4 in tree
-  ctx.fillStyle = 'black'
-
-  for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
-    const node = visibleLeaves[i]!
-    const { name } = node.data
-    const y = node.x! - quarterRowHeight
-    const str = columns.get(name)?.slice(xStart, xEnd)
-    if (!str) {
-      continue
-    }
-    for (let j = 0, l2 = str.length; j < l2; j++) {
-      const letter = str[j]!
-      const isMatchingReference =
-        referenceSeq && name !== relativeTo && letter === referenceSeq[j]
-      ctx.fillText(
-        isMatchingReference ? '.' : letter,
-        j * colWidth + offsetXAligned + halfColWidth,
-        y,
-      )
-    }
-  }
-}
-
 function drawInsertionIndicators({
   model,
   ctx,

package/src/components/msa/renderMSAMouseover.ts

@@ -10,23 +10,6 @@ const highlightColor = 'rgba(128,128,0,0.2)'
 const highlightColumnsFill = 'rgba(255,140,0,0.28)'
 const highlightColumnsBorder = 'rgba(210,90,0,0.95)'
 
-// Collapse sorted column indices into contiguous [start,end] runs so a run of
-// highlighted columns draws as one bordered band rather than per-column slices
-// (which would draw internal borders).
-function contiguousRuns(columns: number[]) {
-  const sorted = [...columns].sort((a, b) => a - b)
-  const runs: { start: number; end: number }[] = []
-  for (const col of sorted) {
-    const last = runs.at(-1)
-    if (last && col === last.end + 1) {
-      last.end = col
-    } else {
-      runs.push({ start: col, end: col })
-    }
-  }
-  return runs
-}
-
 export function renderMouseover({
   ctx,
   model,
@@ -46,10 +29,10 @@ export function renderMouseover({
     mouseRow,
     mouseClickRow,
     mouseClickCol,
-    relativeTo,
-    hoveredTreeNode,
-    highlightedColumns,
     highResScaleFactor,
+    referenceRowIndex,
+    hoveredRowIndices,
+    highlightedColumnRuns,
   } = model
   const width = msaAreaWidth - verticalScrollbarWidth
   ctx.resetTransform()
@@ -57,30 +40,24 @@ export function renderMouseover({
   ctx.scale(highResScaleFactor, highResScaleFactor)
 
   // Highlight reference row (relativeTo) persistently
-  if (relativeTo) {
-    const referenceRowIndex = model.rowNamesSet.get(relativeTo)
-    if (referenceRowIndex !== undefined) {
-      ctx.fillStyle = referenceColor
-      ctx.fillRect(0, referenceRowIndex * rowHeight + scrollY, width, rowHeight)
-    }
+  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) {
+  if (hoveredRowIndices.length > 0) {
     ctx.fillStyle = multiRowHoverColor
-    for (const descendantName of hoveredTreeNode.descendantNames) {
-      const rowIndex = model.rowNamesSet.get(descendantName)
-      if (rowIndex !== undefined) {
-        ctx.fillRect(0, rowIndex * rowHeight + scrollY, width, rowHeight)
-      }
+    for (const rowIndex of hoveredRowIndices) {
+      ctx.fillRect(0, rowIndex * rowHeight + scrollY, width, rowHeight)
     }
   }
 
   // Highlight multiple columns — draw each contiguous run as a filled, bordered
   // band so a domain/motif highlight is clearly visible over the alignment
-  if (highlightedColumns?.length) {
+  if (highlightedColumnRuns.length > 0) {
     ctx.lineWidth = 2
-    for (const { start, end } of contiguousRuns(highlightedColumns)) {
+    for (const { start, end } of highlightedColumnRuns) {
       const x = start * colWidth + scrollX
       const w = (end - start + 1) * colWidth
       ctx.fillStyle = highlightColumnsFill

package/src/components/msa/useMsaBlockMouse.ts

@@ -0,0 +1,81 @@
+import { useState } from 'react'
+import type React from 'react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+function eventToColRow({
+  event,
+  el,
+  offsetX,
+  offsetY,
+  colWidth,
+  rowHeight,
+}: {
+  event: React.MouseEvent
+  el: HTMLElement
+  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),
+  }
+}
+
+/**
+ * Translates pointer events over one MSA block into model column/row hover and
+ * click state, and reports where a tooltip should be anchored.
+ *
+ * The anchor is only tracked when there is something to show (an insertion, a
+ * domain under the cursor, or column stats), so plain mouse movement over the
+ * alignment updates the canvas overlay without re-rendering this component.
+ */
+export function useMsaBlockMouse({
+  model,
+  offsetX,
+  offsetY,
+}: {
+  model: MsaViewModel
+  offsetX: number
+  offsetY: number
+}) {
+  const [tooltipPoint, setTooltipPoint] = useState<{ x: number; y: number }>()
+
+  function colRow(event: React.MouseEvent, el: HTMLElement) {
+    const { colWidth, rowHeight } = model
+    return eventToColRow({ event, el, offsetX, offsetY, colWidth, rowHeight })
+  }
+
+  function onMouseMove(event: React.MouseEvent, el: HTMLElement) {
+    const { col, row } = colRow(event, el)
+    const inBounds =
+      col >= 0 && col < model.numColumns && row >= 0 && row < model.numRows
+    model.setMousePos(inBounds ? col : undefined, inBounds ? row : undefined)
+
+    const hasTooltip =
+      !!model.hoveredInsertion ||
+      model.mouseOverDomains.length > 0 ||
+      (model.showColumnStats && !!model.mouseOverColumnStats)
+    setTooltipPoint(
+      hasTooltip ? { x: event.clientX, y: event.clientY } : undefined,
+    )
+  }
+
+  function onClick(event: React.MouseEvent, el: HTMLElement) {
+    const { col, row } = colRow(event, el)
+    const { mouseClickCol, mouseClickRow } = model
+    // clicking the same cell again clears the pinned crosshair
+    const same = col === mouseClickCol && row === mouseClickRow
+    model.setMouseClickPos(same ? undefined : col, same ? undefined : row)
+  }
+
+  function onMouseLeave() {
+    model.setMousePos()
+    setTooltipPoint(undefined)
+  }
+
+  return { tooltipPoint, onMouseMove, onClick, onMouseLeave }
+}

package/src/components/tree/TreeCanvas.tsx

@@ -26,45 +26,38 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
     ctx => {
       if (isAlive(model)) {
         const {
-          relativeTo,
-          leaves,
           rowHeight,
-          hoveredTreeNode,
           treeAreaWidth: w,
           height: h,
           scrollY: sy,
-          mouseOverRowName,
+          mouseRow,
+          referenceRowIndex,
+          hoveredRowIndices,
         } = model
         ctx.resetTransform()
         ctx.clearRect(0, 0, w, h)
 
-        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)
-          }
+        // rows are laid out at a fixed pitch, so a row index is all that is
+        // needed to place its band (leaf.x is rowHeight*(index+0.5))
+        const fillRow = (index: number) => {
+          ctx.fillRect(0, index * rowHeight + sy, w, rowHeight)
         }
 
-        if (relativeTo) {
+        if (referenceRowIndex !== undefined) {
           ctx.fillStyle = referenceColor
-          fillRow(relativeTo)
+          fillRow(referenceRowIndex)
         }
 
-        if (hoveredTreeNode) {
-          ctx.fillStyle = treeHoverColor
-          for (const descendantName of hoveredTreeNode.descendantNames) {
-            fillRow(descendantName)
-          }
+        ctx.fillStyle = treeHoverColor
+        for (const index of hoveredRowIndices) {
+          fillRow(index)
         }
-
         if (
-          mouseOverRowName &&
-          mouseOverRowName !== relativeTo &&
-          !hoveredTreeNode?.descendantNames.includes(mouseOverRowName)
+          mouseRow !== undefined &&
+          mouseRow !== referenceRowIndex &&
+          !hoveredRowIndices.includes(mouseRow)
         ) {
-          ctx.fillStyle = treeHoverColor
-          fillRow(mouseOverRowName)
+          fillRow(mouseRow)
         }
       }
     },