react-msaview 5.5.0 → 5.6.0

package/src/components/msa/MSACanvasBlock.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useState } from 'react'
 
 import { BaseTooltip } from '@jbrowse/core/ui'
-import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
+import ColumnStats from './ColumnStats.tsx'
 import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
 import { renderMSABlock } from './renderMSABlock.ts'
+import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { useColorContrast } from '../../useColorContrast.ts'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -47,13 +48,8 @@ const MSACanvasBlock = observer(function ({
   } = model
   const { theme, contrastScheme } = useColorContrast(colorScheme)
 
-  const ref = useRef<HTMLCanvasElement>(null)
-  useEffect(() => {
-    const ctx = ref.current?.getContext('2d')
-    if (!ctx) {
-      return
-    }
-    return autorun(() => {
+  const ref = useCanvasAutorun(
+    ctx => {
       ctx.resetTransform()
       ctx.clearRect(
         0,
@@ -77,19 +73,20 @@ const MSACanvasBlock = observer(function ({
         contrastScheme,
         model,
       })
-    })
-  }, [
-    model,
-    offsetX,
-    offsetY,
-    theme,
-    blockSize,
-    highResScaleFactor,
-    contrastScheme,
-  ])
+    },
+    [
+      model,
+      offsetX,
+      offsetY,
+      theme,
+      blockSize,
+      highResScaleFactor,
+      contrastScheme,
+    ],
+  )
 
   const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>()
-  const { hoveredInsertion, mouseOverDomains } = model
+  const { hoveredInsertion, mouseOverDomains, showColumnStats } = model
 
   return (
     <>
@@ -117,12 +114,15 @@ const MSACanvasBlock = observer(function ({
               model.setMousePos(undefined, undefined)
             }
             // only track client coords when there's something to show in the
-            // tooltip (insertion or a domain under the cursor); avoids a
-            // re-render on every move over plain alignment cells
+            // tooltip: an insertion, a domain under the cursor, or column stats
+            // (when that option is enabled). avoids a re-render on every move
+            // when nothing would be shown
+            const hasTooltip =
+              model.hoveredInsertion ||
+              model.mouseOverDomains.length > 0 ||
+              (model.showColumnStats && !!model.mouseOverColumnStats)
             setMousePosition(
-              model.hoveredInsertion || model.mouseOverDomains.length > 0
-                ? { x: event.clientX, y: event.clientY }
-                : undefined,
+              hasTooltip ? { x: event.clientX, y: event.clientY } : undefined,
             )
           }
         }}
@@ -168,7 +168,9 @@ const MSACanvasBlock = observer(function ({
             : hoveredInsertion.letters}
         </BaseTooltip>
       ) : null}
-      {!hoveredInsertion && mouseOverDomains.length > 0 && mousePosition ? (
+      {!hoveredInsertion &&
+      mousePosition &&
+      (mouseOverDomains.length > 0 || showColumnStats) ? (
         <BaseTooltip
           clientPoint={{ x: mousePosition.x, y: mousePosition.y + 15 }}
         >
@@ -183,6 +185,7 @@ const MSACanvasBlock = observer(function ({
               ) : null}
             </div>
           ))}
+          {showColumnStats ? <ColumnStats model={model} /> : null}
         </BaseTooltip>
       ) : null}
     </>

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect, useRef } from 'react'
+import React from 'react'
 
 import { isAlive } from '@jbrowse/mobx-state-tree'
-import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
 import { renderMouseover } from './renderMSAMouseover.ts'
+import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
@@ -13,20 +13,17 @@ const MSAMouseoverCanvas = observer(function ({
 }: {
   model: MsaViewModel
 }) {
-  const ref = useRef<HTMLCanvasElement>(null)
   const { height, msaAreaWidth, verticalScrollbarWidth, highResScaleFactor } =
     model
   const width = msaAreaWidth - verticalScrollbarWidth
-  useEffect(() => {
-    const ctx = ref.current?.getContext('2d')
-    return ctx
-      ? autorun(() => {
-          if (isAlive(model)) {
-            renderMouseover({ ctx, model })
-          }
-        })
-      : undefined
-  }, [model])
+  const ref = useCanvasAutorun(
+    ctx => {
+      if (isAlive(model)) {
+        renderMouseover({ ctx, model })
+      }
+    },
+    [model],
+  )
 
   return (
     <canvas

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -88,7 +88,9 @@ function drawTiles({
             ctx.strokeRect(x, t, lw, h)
             // segment (exon) number drawn once per band, on the top visible row,
             // so it reads as a column header for the whole band
-            const label = drawSegmentLabels ? segmentLabels.get(accession) : undefined
+            const label = drawSegmentLabels
+              ? segmentLabels.get(accession)
+              : undefined
             if (label !== undefined && i === 0) {
               const fontSize = Math.min(h - 2, 11)
               ctx.font = `${fontSize}px sans-serif`

package/src/components/msa/renderMSAMouseover.ts

@@ -1,3 +1,5 @@
+import { multiRowHoverColor, referenceColor } from '../overlayColors.ts'
+
 import type { MsaViewModel } from '../../model.ts'
 
 const hoverColor = 'rgba(0,0,0,0.15)'
@@ -7,8 +9,6 @@ const highlightColor = 'rgba(128,128,0,0.2)'
 // faint hover-style wash alone is invisible against clustalx coloring)
 const highlightColumnsFill = 'rgba(255,140,0,0.28)'
 const highlightColumnsBorder = 'rgba(210,90,0,0.95)'
-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
 
 // 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

package/src/components/overlayColors.ts

@@ -0,0 +1,12 @@
+// Shared highlight colors for the MSA/tree hover and selection overlay canvases.
+// Kept in one place so the reference-row color (drawn identically over both the
+// tree and the alignment) can't drift between the two surfaces.
+
+// reference (relativeTo) row, drawn over both the tree and the alignment
+export const referenceColor = 'rgba(0,128,255,0.3)'
+
+// tree-node descendant rows highlighted on hover. The alpha differs by surface
+// intentionally: the tree background is plain so it can take a stronger wash,
+// while the alignment cells are already colored so a lighter wash reads better.
+export const treeHoverColor = 'rgba(255,165,0,0.2)'
+export const multiRowHoverColor = 'rgba(255,165,0,0.15)'

package/src/components/tracks/renderTracksSvg.ts

@@ -7,14 +7,16 @@ import type { RenderCtx } from '../renderCtx.ts'
 
 export function drawConservationBars({
   ctx,
-  conservation,
+  values,
+  color,
   colWidth,
   trackHeight,
   offsetX,
   blockSize,
 }: {
   ctx: RenderCtx
-  conservation: number[]
+  values: number[]
+  color: string
   colWidth: number
   trackHeight: number
   offsetX: number
@@ -26,15 +28,23 @@ export function drawConservationBars({
     colWidth,
   })
 
-  ctx.fillStyle = 'gray'
-  for (let i = xStart; i < xEnd && i < conservation.length; i++) {
-    const value = conservation[i]!
+  ctx.fillStyle = color
+  for (let i = xStart; i < xEnd && i < values.length; i++) {
+    const value = values[i]!
     const barHeight = value * trackHeight
     const x = i * colWidth
     ctx.fillRect(x, trackHeight - barHeight, colWidth, barHeight)
   }
 }
 
+// the bar-track values live on model getters (kept off the plain track object so
+// the live canvas autorun stays reactive); select the right one by track id
+export function barTrackValues(model: MsaViewModel, trackId: string) {
+  return trackId === 'property-conservation'
+    ? model.propertyConservation
+    : model.conservation
+}
+
 export function drawTextTrackContent({
   ctx,
   data,
@@ -81,6 +91,7 @@ export function drawTextTrackContent({
 export function renderConservationTrack({
   model,
   ctx,
+  track,
   offsetX,
   offsetY,
   trackHeight,
@@ -89,13 +100,14 @@ export function renderConservationTrack({
 }: {
   model: MsaViewModel
   ctx: RenderCtx
+  track: BasicTrack
   offsetX: number
   offsetY: number
   trackHeight: number
   blockSizeXOverride?: number
   highResScaleFactorOverride?: number
 }) {
-  const { blockSize, colWidth, highResScaleFactor, conservation } = model
+  const { blockSize, colWidth, highResScaleFactor } = model
   const bx = blockSizeXOverride ?? blockSize
   const k = highResScaleFactorOverride ?? highResScaleFactor
 
@@ -105,7 +117,8 @@ export function renderConservationTrack({
 
   drawConservationBars({
     ctx,
-    conservation,
+    values: barTrackValues(model, track.model.id),
+    color: track.model.barColor ?? 'gray',
     colWidth,
     trackHeight,
     offsetX,
@@ -191,10 +204,11 @@ export function renderAllTracks({
   for (const track of turnedOnTracks) {
     const trackHeight = track.model.height
 
-    if (track.model.id === 'conservation') {
+    if (track.model.barColor !== undefined) {
       renderConservationTrack({
         model,
         ctx,
+        track,
         offsetX,
         offsetY: currentY,
         trackHeight,

package/src/components/tree/TreeCanvas.tsx

@@ -1,21 +1,18 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useRef } from 'react'
 
 import { isAlive } from '@jbrowse/mobx-state-tree'
-import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
 import TreeCanvasBlock from './TreeCanvasBlock.tsx'
 import { padding } from './renderTreeCanvas.ts'
+import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { useWheelScroll } from '../../useWheelScroll.ts'
+import { referenceColor, treeHoverColor } from '../overlayColors.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
-const referenceColor = 'rgba(0,128,255,0.3)'
-const treeHoverColor = 'rgba(255,165,0,0.2)'
-
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)
-  const mouseoverRef = useRef<HTMLCanvasElement>(null)
   const { treeWidth, height, blocksY, treeAreaWidth } = model
   const onScrollY = useCallback(
     (d: number) => {
@@ -25,58 +22,54 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
   const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
 
-  useEffect(() => {
-    const ctx = mouseoverRef.current?.getContext('2d')
-    return ctx
-      ? autorun(() => {
-          if (isAlive(model)) {
-            const {
-              relativeTo,
-              leaves,
-              rowHeight,
-              hoveredTreeNode,
-              treeAreaWidth: w,
-              height: h,
-              scrollY: sy,
-              mouseOverRowName,
-            } = 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)
-              }
-            }
+  const mouseoverRef = useCanvasAutorun(
+    ctx => {
+      if (isAlive(model)) {
+        const {
+          relativeTo,
+          leaves,
+          rowHeight,
+          hoveredTreeNode,
+          treeAreaWidth: w,
+          height: h,
+          scrollY: sy,
+          mouseOverRowName,
+        } = model
+        ctx.resetTransform()
+        ctx.clearRect(0, 0, w, h)
 
-            if (relativeTo) {
-              ctx.fillStyle = referenceColor
-              fillRow(relativeTo)
-            }
+        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 (hoveredTreeNode) {
-              ctx.fillStyle = treeHoverColor
-              for (const descendantName of hoveredTreeNode.descendantNames) {
-                fillRow(descendantName)
-              }
-            }
+        if (relativeTo) {
+          ctx.fillStyle = referenceColor
+          fillRow(relativeTo)
+        }
 
-            if (
-              mouseOverRowName &&
-              mouseOverRowName !== relativeTo &&
-              !hoveredTreeNode?.descendantNames.includes(mouseOverRowName)
-            ) {
-              ctx.fillStyle = treeHoverColor
-              fillRow(mouseOverRowName)
-            }
+        if (hoveredTreeNode) {
+          ctx.fillStyle = treeHoverColor
+          for (const descendantName of hoveredTreeNode.descendantNames) {
+            fillRow(descendantName)
           }
-        })
-      : undefined
-  }, [model])
+        }
+
+        if (
+          mouseOverRowName &&
+          mouseOverRowName !== relativeTo &&
+          !hoveredTreeNode?.descendantNames.includes(mouseOverRowName)
+        ) {
+          ctx.fillStyle = treeHoverColor
+          fillRow(mouseOverRowName)
+        }
+      }
+    },
+    [model],
+  )
 
   return (
     <div

package/src/components/tree/TreeCanvasBlock.tsx

@@ -1,15 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react'
 
+import { makeStyles } from '@jbrowse/core/util/tss-react'
 import { useTheme } from '@mui/material'
-import Flatbush from 'flatbush'
-import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
 
 import TreeBranchMenu from './TreeBranchMenu.tsx'
 import TreeNodeMenu from './TreeNodeMenu.tsx'
+import { ClickMapIndex } from './clickMap.ts'
 import { padding, renderTreeCanvas } from './renderTreeCanvas.ts'
+import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 
+import type { ClickEntry } from './clickMap.ts'
 import type { MsaViewModel } from '../../model.ts'
 
 const useStyles = makeStyles()(theme => ({
@@ -36,55 +37,6 @@ interface TooltipData {
   y: number
 }
 
-interface ClickEntry {
-  name: string
-  id: string
-  branch?: boolean
-  minX: number
-  maxX: number
-  minY: number
-  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
-    } 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,
@@ -94,7 +46,6 @@ const TreeCanvasBlock = observer(function ({
 }) {
   const { classes } = useStyles()
   const theme = useTheme()
-  const ref = useRef<HTMLCanvasElement>(null)
   const clickMap = useRef(new ClickMapIndex())
   const mouseoverRef = useRef<HTMLCanvasElement>(null)
   const [branchMenu, setBranchMenu] = useState<TooltipData>()
@@ -113,20 +64,10 @@ const TreeCanvasBlock = observer(function ({
   const w2 = width * highResScaleFactor
   const h2 = height * highResScaleFactor
 
-  useEffect(() => {
-    const ctx = ref.current?.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    return autorun(() => {
+  const ref = useCanvasAutorun(
+    ctx => {
       ctx.resetTransform()
-      ctx.clearRect(
-        0,
-        0,
-        (treeAreaWidth + padding) * highResScaleFactor,
-        blockSize * highResScaleFactor,
-      )
+      ctx.clearRect(0, 0, w2, h2)
       renderTreeCanvas({
         ctx,
         model,
@@ -134,8 +75,9 @@ const TreeCanvasBlock = observer(function ({
         clickMap: clickMap.current,
         theme,
       })
-    })
-  }, [model, blockSize, highResScaleFactor, treeAreaWidth, offsetY, theme])
+    },
+    [model, blockSize, highResScaleFactor, treeAreaWidth, offsetY, theme],
+  )
 
   useEffect(() => {
     const ctx = mouseoverRef.current?.getContext('2d')

package/src/components/tree/clickMap.ts

@@ -0,0 +1,55 @@
+import Flatbush from 'flatbush'
+
+export interface ClickEntry {
+  name: string
+  id: string
+  branch?: boolean
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+interface Box {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+// Spatial index of clickable tree elements (leaf labels, node bubbles,
+// collapsed-clade triangles). Entries are collected during a render pass, then
+// finish() builds the Flatbush index queried by hit-testing.
+export 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
+    } 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: Box): ClickEntry[] {
+    return (
+      this.flatbush
+        ?.search(box.minX, box.minY, box.maxX, box.maxY)
+        .map(i => this.entries[i]!) ?? []
+    )
+  }
+}

package/src/components/tree/renderTreeCanvas.ts

@@ -5,6 +5,7 @@ import {
 } from '../../hierarchy.ts'
 import { setFontSize } from '../../setFontSize.ts'
 
+import type { ClickMapIndex } from './clickMap.ts'
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
 import type { RenderCtx } from '../renderCtx.ts'
@@ -16,6 +17,12 @@ const extendBounds = 5
 const radius = 2.5
 const d = radius * 2
 
+// whether a node's row-center y falls within the block being drawn, padded by
+// extendBounds so bubbles/labels/triangles straddling the edge still render
+function inYBlock(y: number, offsetY: number, by: number) {
+  return y > offsetY - extendBounds && y < offsetY + by + extendBounds
+}
+
 // 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
@@ -36,28 +43,6 @@ function getNodeX(
   return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * maxBranchLen
 }
 
-interface ClickEntry {
-  name: string
-  id: string
-  branch?: boolean
-  minX: number
-  maxX: number
-  minY: number
-  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,
@@ -137,8 +122,7 @@ export function renderCollapsedTriangles({
     if (collapsed.includes(id)) {
       const apexX = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf)
       const y = node.x!
-      const inBlock =
-        y > offsetY - extendBounds && y < offsetY + by + extendBounds
+      const inBlock = inYBlock(y, offsetY, by)
       // in cladogram mode the hidden tips align at the right edge, otherwise use
       // the branch-length extent recorded in the model's hierarchy getter
       const baseX = showBranchLen
@@ -214,11 +198,7 @@ export function renderNodeBubbles({
     const { data } = node
     const y = node.x!
     const { id, name } = data
-    if (
-      node.height >= 1 &&
-      y > offsetY - extendBounds &&
-      y < offsetY + by + extendBounds
-    ) {
+    if (node.height >= 1 && inYBlock(y, offsetY, by)) {
       const isCollapsed = collapsed.includes(id)
       ctx.strokeStyle = 'black'
       ctx.fillStyle = isCollapsed ? 'black' : 'white'
@@ -296,11 +276,7 @@ export function renderTreeLabels({
     // a collapsed clade is drawn as a triangle + tip count; suppress its leaf
     // label when the "name" is just the auto-generated internal-node id
     const isAnonymousCollapsed = collapsed.includes(id) && name === id
-    if (
-      !isAnonymousCollapsed &&
-      y > offsetY - extendBounds &&
-      y < offsetY + by + extendBounds
-    ) {
+    if (!isAnonymousCollapsed && inYBlock(y, offsetY, by)) {
       // note: +rowHeight/4 matches with -rowHeight/4 in msa
       const yp = y + fontSize / 4
       let xp = 0

package/src/constants.ts

@@ -40,6 +40,7 @@ export const maxCellSize = 80
 // MSA model defaults
 export const defaultBgColor = true
 export const defaultColorSchemeName = 'maeditor'
+export const defaultShowColumnStats = true
 
 // Tree model defaults
 export const defaultDrawLabels = true