react-msaview 5.1.1 → 5.2.1

package/src/components/msa/renderMSABlock.ts

@@ -1,6 +1,12 @@
+import { getVisibleLeaves } from './getVisibleLeaves.ts'
+import { visibleColRange } from './visibleColRange.ts'
+import { setFontSize } from '../../setFontSize.ts'
+import { adjustColorForContrast } from '../../util.ts'
+
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
 import type { NodeWithIdsAndLength } from '../../types.ts'
+import type { RenderCtx } from '../renderCtx.ts'
 import type { Theme } from '@mui/material'
 
 export function renderMSABlock({
@@ -19,7 +25,7 @@ export function renderMSABlock({
   theme: Theme
   model: MsaViewModel
   contrastScheme: Record<string, string>
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   highResScaleFactorOverride?: number
   blockSizeXOverride?: number
   blockSizeYOverride?: number
@@ -31,50 +37,51 @@ export function renderMSABlock({
     fontSize,
     highResScaleFactor,
     actuallyShowDomains,
-    leaves,
     bgColor,
   } = model
-  const k = highResScaleFactorOverride || highResScaleFactor
-  const bx = blockSizeXOverride || blockSize
-  const by = blockSizeYOverride || blockSize
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+  const bx = blockSizeXOverride ?? blockSize
+  const by = blockSizeYOverride ?? blockSize
   ctx.resetTransform()
   ctx.scale(k, k)
   ctx.translate(-offsetX, rowHeight / 2 - offsetY)
   ctx.textAlign = 'center'
-  // 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`,
-  )
+  setFontSize(ctx, fontSize, !bgColor)
 
-  const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
-  const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight))
-  const xStart = Math.max(0, Math.floor(offsetX / colWidth))
-  const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth))
-  const visibleLeaves = leaves.slice(yStart, yEnd)
+  const { xStart, xEnd } = visibleColRange({
+    offsetX,
+    blockWidth: bx,
+    colWidth,
+  })
+  const visibleLeaves = getVisibleLeaves({ model, offsetY, blockSizeY: by })
+  const { relativeTo, columns } = model
+  const referenceSeq = relativeTo
+    ? columns.get(relativeTo)?.slice(xStart, xEnd)
+    : null
 
   if (!actuallyShowDomains) {
-    drawTiles({
+    drawTilesAndText({
       model,
       ctx,
       theme,
+      contrastScheme,
       offsetX,
       xStart,
       xEnd,
       visibleLeaves,
+      referenceSeq,
+    })
+  } else {
+    drawText({
+      model,
+      ctx,
+      offsetX,
+      xStart,
+      xEnd,
+      visibleLeaves,
+      referenceSeq,
     })
   }
-  drawText({
-    model,
-    ctx,
-    offsetX,
-    contrastScheme,
-    xStart,
-    xEnd,
-    visibleLeaves,
-  })
   drawInsertionIndicators({
     model,
     ctx,
@@ -85,22 +92,26 @@ export function renderMSABlock({
   ctx.resetTransform()
 }
 
-function drawTiles({
+function drawTilesAndText({
   model,
   offsetX,
   ctx,
-  visibleLeaves,
   theme,
+  contrastScheme,
+  visibleLeaves,
   xStart,
   xEnd,
+  referenceSeq,
 }: {
   model: MsaViewModel
   offsetX: number
   theme: Theme
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
+  contrastScheme: Record<string, string>
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number
   xEnd: number
+  referenceSeq: string | null | undefined
 }) {
   const {
     bgColor,
@@ -110,131 +121,118 @@ function drawTiles({
     colWidth,
     rowHeight,
     relativeTo,
+    showMsaLetters,
+    colClustalX,
+    colConsensus,
   } = model
 
-  // Get reference sequence if relativeTo is set
-  const referenceSeq = relativeTo
-    ? columns[relativeTo]?.slice(xStart, xEnd)
-    : null
-
   const isClustalX = colorSchemeName === 'clustalx_protein_dynamic'
   const isPercentIdentity = colorSchemeName === 'percent_identity_dynamic'
+  const drawBgTiles = bgColor || isClustalX || isPercentIdentity
+  if (!drawBgTiles && !showMsaLetters) {
+    return
+  }
   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 { name } = node.data
     const y = node.x!
-    const str = columns[name]?.slice(xStart, xEnd)
-    if (str) {
-      for (let j = 0, l2 = str.length; j < l2; j++) {
-        const letter = str[j]!
+    const str = columns.get(name)?.slice(xStart, xEnd)
+    if (!str) {
+      continue
+    }
+    const tileY = y - rowHeight
+    const textY = y - quarterRowHeight
 
-        // Use a muted background for positions that match reference
-        const isMatchingReference =
-          referenceSeq && name !== relativeTo && letter === referenceSeq[j]
+    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]
 
-        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
-            ? theme.palette.action.hover
-            : color || theme.palette.background.default
-          ctx.fillStyle = finalColor
-          ctx.fillRect(
-            j * colWidth + offsetXAligned,
-            y - rowHeight,
-            colWidth,
-            rowHeight,
-          )
-        }
+      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]
+      }
+
+      if (drawBgTiles) {
+        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,
+        )
       }
     }
   }
 }
 
+// When domains are shown the background tiles come from renderBoxFeatureCanvasBlock,
+// so we only need to draw text here.
 function drawText({
   model,
   offsetX,
-  contrastScheme,
   ctx,
   visibleLeaves,
   xStart,
   xEnd,
+  referenceSeq,
 }: {
   offsetX: number
   model: MsaViewModel
-  contrastScheme: Record<string, string>
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number
   xEnd: number
+  referenceSeq: string | null | undefined
 }) {
-  const {
-    bgColor,
-    actuallyShowDomains,
-    showMsaLetters,
-    colorScheme,
-    columns,
-    colWidth,
-    rowHeight,
-    relativeTo,
-  } = model
+  const { showMsaLetters, columns, colWidth, rowHeight, relativeTo } = model
 
-  // Get reference sequence if relativeTo is set
-  const referenceSeq = relativeTo
-    ? columns[relativeTo]?.slice(xStart, xEnd)
-    : 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! - quarterRowHeight
-      const str = columns[name]?.slice(xStart, xEnd)
-      if (str) {
-        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[j]
-
-          // Show dot for matching positions, original letter for differences
-          const displayLetter = isMatchingReference ? '.' : letter
-
-          const color = colorScheme[letter.toUpperCase()]
-          const contrast = contrastScheme[letter.toUpperCase()] || 'black'
+  if (!showMsaLetters) {
+    return
+  }
+  const offsetXAligned = offsetX - (offsetX % colWidth)
+  const halfColWidth = colWidth / 2
+  const quarterRowHeight = rowHeight / 4
+  // note: -rowHeight/4 matches +rowHeight/4 in tree
+  ctx.fillStyle = 'black'
 
-          // note: -rowHeight/4 matches +rowHeight/4 in tree
-          ctx.fillStyle = actuallyShowDomains
-            ? 'black'
-            : bgColor
-              ? contrast
-              : color || 'black'
-          ctx.fillText(
-            displayLetter,
-            j * colWidth + offsetXAligned + halfColWidth,
-            y,
-          )
-        }
-      }
+  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,
+      )
     }
   }
 }
@@ -247,7 +245,7 @@ function drawInsertionIndicators({
   xEnd,
 }: {
   model: MsaViewModel
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number
   xEnd: number
@@ -273,7 +271,7 @@ function drawZigZag({
   offset,
 }: {
   model: MsaViewModel
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number
   xEnd: number

package/src/components/msa/renderMSAMouseover.ts

@@ -25,17 +25,18 @@ export function renderMouseover({
     mouseClickRow,
     mouseClickCol,
     relativeTo,
-    rowNamesSet,
     hoveredTreeNode,
     highlightedColumns,
+    highResScaleFactor,
   } = model
   const width = msaAreaWidth - verticalScrollbarWidth
   ctx.resetTransform()
-  ctx.clearRect(0, 0, width, height)
+  ctx.clearRect(0, 0, width * highResScaleFactor, height * highResScaleFactor)
+  ctx.scale(highResScaleFactor, highResScaleFactor)
 
   // Highlight reference row (relativeTo) persistently
   if (relativeTo) {
-    const referenceRowIndex = rowNamesSet.get(relativeTo)
+    const referenceRowIndex = model.rowNamesSet.get(relativeTo)
     if (referenceRowIndex !== undefined) {
       ctx.fillStyle = referenceColor
       ctx.fillRect(0, referenceRowIndex * rowHeight + scrollY, width, rowHeight)
@@ -46,7 +47,7 @@ export function renderMouseover({
   if (hoveredTreeNode) {
     ctx.fillStyle = multiRowHoverColor
     for (const descendantName of hoveredTreeNode.descendantNames) {
-      const rowIndex = rowNamesSet.get(descendantName)
+      const rowIndex = model.rowNamesSet.get(descendantName)
       if (rowIndex !== undefined) {
         ctx.fillRect(0, rowIndex * rowHeight + scrollY, width, rowHeight)
       }

package/src/components/msa/visibleColRange.ts

@@ -0,0 +1,17 @@
+// The half-open range of alignment columns [xStart, xEnd) intersecting a block
+// of width blockWidth at horizontal offset offsetX. X-axis counterpart to
+// getVisibleLeaves.
+export function visibleColRange({
+  offsetX,
+  blockWidth,
+  colWidth,
+}: {
+  offsetX: number
+  blockWidth: number
+  colWidth: number
+}) {
+  return {
+    xStart: Math.max(0, Math.floor(offsetX / colWidth)),
+    xEnd: Math.max(0, Math.ceil((offsetX + blockWidth) / colWidth)),
+  }
+}

package/src/components/renderCtx.ts

@@ -0,0 +1,29 @@
+/**
+ * The subset of the canvas 2D API that the block renderers use. Both a real
+ * `CanvasRenderingContext2D` and the `@jbrowse/svgcanvas` `Context` (used for
+ * SVG export) satisfy this, so renderers can be typed against it without an
+ * `as any` cast at the SVG-export boundary.
+ */
+export type RenderCtx = Pick<
+  CanvasRenderingContext2D,
+  | 'arc'
+  | 'beginPath'
+  | 'clearRect'
+  | 'fill'
+  | 'fillRect'
+  | 'fillStyle'
+  | 'fillText'
+  | 'font'
+  | 'lineTo'
+  | 'lineWidth'
+  | 'measureText'
+  | 'moveTo'
+  | 'resetTransform'
+  | 'scale'
+  | 'setLineDash'
+  | 'stroke'
+  | 'strokeRect'
+  | 'strokeStyle'
+  | 'textAlign'
+  | 'translate'
+>

package/src/components/tracks/renderTracksSvg.ts

@@ -1,5 +1,9 @@
+import { setFontSize } from '../../setFontSize.ts'
+import { visibleColRange } from '../msa/visibleColRange.ts'
+
 import type { MsaViewModel } from '../../model.ts'
 import type { BasicTrack } from '../../types.ts'
+import type { RenderCtx } from '../renderCtx.ts'
 
 export function drawConservationBars({
   ctx,
@@ -9,15 +13,18 @@ export function drawConservationBars({
   offsetX,
   blockSize,
 }: {
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   conservation: number[]
   colWidth: number
   trackHeight: number
   offsetX: number
   blockSize: number
 }) {
-  const xStart = Math.max(0, Math.floor(offsetX / colWidth))
-  const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth))
+  const { xStart, xEnd } = visibleColRange({
+    offsetX,
+    blockWidth: blockSize,
+    colWidth,
+  })
 
   ctx.fillStyle = 'gray'
   for (let i = xStart; i < xEnd && i < conservation.length; i++) {
@@ -39,7 +46,7 @@ export function drawTextTrackContent({
   offsetX,
   blockSize,
 }: {
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   data: string | undefined
   colorScheme: Record<string, string>
   contrastScheme: Record<string, string>
@@ -49,8 +56,11 @@ export function drawTextTrackContent({
   offsetX: number
   blockSize: number
 }) {
-  const xStart = Math.max(0, Math.floor(offsetX / colWidth))
-  const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth))
+  const { xStart, xEnd } = visibleColRange({
+    offsetX,
+    blockWidth: blockSize,
+    colWidth,
+  })
   const str = data?.slice(xStart, xEnd)
 
   for (let i = 0; str && i < str.length; i++) {
@@ -78,7 +88,7 @@ export function renderConservationTrack({
   highResScaleFactorOverride,
 }: {
   model: MsaViewModel
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   offsetX: number
   offsetY: number
   trackHeight: number
@@ -116,7 +126,7 @@ export function renderTextTrack({
   highResScaleFactorOverride,
 }: {
   model: MsaViewModel
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   track: BasicTrack
   offsetX: number
   offsetY: number
@@ -143,7 +153,7 @@ export function renderTextTrack({
   ctx.scale(k, k)
   ctx.translate(-offsetX, offsetY)
   ctx.textAlign = 'center'
-  ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
+  setFontSize(ctx, fontSize)
 
   drawTextTrackContent({
     ctx,
@@ -169,7 +179,7 @@ export function renderAllTracks({
   highResScaleFactorOverride,
 }: {
   model: MsaViewModel
-  ctx: CanvasRenderingContext2D
+  ctx: RenderCtx
   offsetX: number
   contrastScheme: Record<string, string>
   blockSizeXOverride?: number

package/src/components/tree/TreeCanvas.tsx

@@ -43,7 +43,9 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
             ctx.resetTransform()
             ctx.clearRect(0, 0, w, h)
 
-            const leafByName = new Map(leaves.map(leaf => [leaf.data.name, leaf]))
+            const leafByName = new Map(
+              leaves.map(leaf => [leaf.data.name, leaf]),
+            )
             const fillRow = (name: string) => {
               const leaf = leafByName.get(name)
               if (leaf) {

package/src/components/tree/TreeCanvasBlock.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
 import { useTheme } from '@mui/material'
 import Flatbush from 'flatbush'
@@ -62,7 +62,6 @@ class ClickMapIndex {
   finish() {
     if (this.entries.length === 0) {
       this.flatbush = null
-      return
     } else {
       this.flatbush = new Flatbush(this.entries.length)
       for (const entry of this.entries) {
@@ -114,15 +113,6 @@ const TreeCanvasBlock = observer(function ({
   const w2 = width * highResScaleFactor
   const h2 = height * highResScaleFactor
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
-  const vref = useCallback(
-    (arg: HTMLCanvasElement) => {
-      model.incrementRef()
-      ref.current = arg
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [model, height, width],
-  )
   useEffect(() => {
     const ctx = ref.current?.getContext('2d')
     if (!ctx) {
@@ -289,7 +279,7 @@ const TreeCanvasBlock = observer(function ({
           model.setHoveredTreeNode(undefined)
           model.setMousePos(undefined, undefined)
         }}
-        ref={vref}
+        ref={ref}
       />
       <canvas
         style={{