react-msaview 5.4.1 → 5.6.0

package/src/components/header/ZoomControls.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
+import Mouse from '@mui/icons-material/Mouse'
 import ZoomIn from '@mui/icons-material/ZoomIn'
-import ZoomInMap from '@mui/icons-material/ZoomInMap'
 import ZoomOut from '@mui/icons-material/ZoomOut'
-import { IconButton, ToggleButton } from '@mui/material'
+import { IconButton, ToggleButton, Tooltip } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -15,23 +15,30 @@ const ZoomControls = observer(function ZoomControls({
 }) {
   return (
     <>
-      <IconButton
-        onClick={() => {
-          model.zoomIn()
-        }}
-      >
-        <ZoomIn />
-      </IconButton>
-      <IconButton
-        onClick={() => {
-          model.zoomOut()
-        }}
-      >
-        <ZoomOut />
-      </IconButton>
+      <Tooltip title="Zoom in">
+        <IconButton
+          aria-label="Zoom in"
+          onClick={() => {
+            model.zoomIn()
+          }}
+        >
+          <ZoomIn />
+        </IconButton>
+      </Tooltip>
+      <Tooltip title="Zoom out">
+        <IconButton
+          aria-label="Zoom out"
+          onClick={() => {
+            model.zoomOut()
+          }}
+        >
+          <ZoomOut />
+        </IconButton>
+      </Tooltip>
       <ToggleButton
         value="scrollZoom"
         selected={model.scrollZoom}
+        aria-label="Toggle scroll-to-zoom"
         title="Toggle scroll-to-zoom (zoom on plain mouse wheel; ctrl+wheel always zooms)"
         size="small"
         sx={{ border: 'none' }}
@@ -39,7 +46,7 @@ const ZoomControls = observer(function ZoomControls({
           model.setScrollZoom(!model.scrollZoom)
         }}
       >
-        <ZoomInMap />
+        <Mouse />
       </ToggleButton>
     </>
   )

package/src/components/header/ZoomMenu.tsx

@@ -10,6 +10,7 @@ import type { MsaViewModel } from '../../model.ts'
 const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <CascadingMenuButton
+      tooltip="Fit / zoom options"
       menuItems={[
         {
           label: 'Fit both vertically/horizontally',
@@ -37,16 +38,6 @@ const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
             model.resetZoom()
           },
         },
-        {
-          label: 'Scroll zoom',
-          type: 'checkbox',
-          checked: model.scrollZoom,
-          onClick: () => {
-            model.setScrollZoom(!model.scrollZoom)
-          },
-          helpText:
-            'When enabled, scrolling the mouse wheel zooms in and out without holding ctrl. Hold shift to pan instead. Ctrl/⌘+wheel always zooms.',
-        },
       ]}
     >
       <MoreVert />

package/src/components/header/settingsMenuItems.ts

@@ -2,8 +2,16 @@ import type { MsaViewModel } from '../../model.ts'
 import type { MenuItem } from '@jbrowse/core/ui/Menu'
 
 export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
-  const { drawMsaLetters, hideGaps, bgColor } = model
+  const { drawMsaLetters, hideGaps, bgColor, showColumnStats } = model
   return [
+    {
+      label: 'Show column statistics on hover',
+      type: 'checkbox',
+      checked: showColumnStats,
+      onClick: () => {
+        model.setShowColumnStats(!showColumnStats)
+      },
+    },
     {
       label: 'Draw letters',
       type: 'checkbox',

package/src/components/msa/ColumnStats.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const pct = (n: number) => `${Math.round(n * 100)}%`
+
+const ColumnStats = observer(function ({ model }: { model: MsaViewModel }) {
+  const stats = model.mouseOverColumnStats
+  if (!stats) {
+    return null
+  }
+  const {
+    col,
+    total,
+    conservation,
+    propertyConservation,
+    consensusLetter,
+    consensusFraction,
+    gapFraction,
+    distribution,
+  } = stats
+  const top = distribution.slice(0, 6)
+  return (
+    <div>
+      <b>Column {col + 1}</b> ({total} seqs)
+      <br />
+      Consensus: {consensusLetter || '-'} ({pct(consensusFraction)})
+      <br />
+      Conservation: {conservation.toFixed(2)}
+      {propertyConservation === undefined ? null : (
+        <>
+          <br />
+          Property conservation: {propertyConservation.toFixed(2)}
+        </>
+      )}
+      <br />
+      Gaps: {pct(gapFraction)}
+      {top.length > 0 ? (
+        <>
+          <br />
+          {top.map(([letter, count]) => (
+            <span key={letter} style={{ marginRight: 8 }}>
+              {letter} {pct(count / total)}
+            </span>
+          ))}
+        </>
+      ) : null}
+    </div>
+  )
+})
+
+export default ColumnStats

package/src/components/msa/DomainLegend.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import { IconButton, Paper, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const DomainLegend = observer(function ({ model }: { model: MsaViewModel }) {
+  const [expanded, setExpanded] = useState(true)
+  const {
+    actuallyShowDomains,
+    visibleDomainTypes: visible,
+    fillPalette,
+  } = model
+  const ExpandIcon = expanded ? ExpandLess : ExpandMore
+
+  return actuallyShowDomains && visible.length > 0 ? (
+    <Paper
+      elevation={3}
+      style={{
+        position: 'absolute',
+        top: 4,
+        right: 4,
+        zIndex: 100,
+        maxWidth: 260,
+        maxHeight: '60%',
+        display: 'flex',
+        flexDirection: 'column',
+        opacity: 0.95,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          padding: '2px 4px 2px 8px',
+        }}
+      >
+        <IconButton
+          size="small"
+          onClick={() => {
+            setExpanded(!expanded)
+          }}
+        >
+          <ExpandIcon fontSize="small" />
+        </IconButton>
+      </div>
+      {expanded ? (
+        <div style={{ overflow: 'auto', padding: '0 8px 6px' }}>
+          {visible.map(({ accession, name }) => (
+            <div
+              key={accession}
+              style={{ display: 'flex', alignItems: 'center', gap: 6 }}
+              title={accession}
+            >
+              <div
+                style={{
+                  width: 12,
+                  height: 12,
+                  flexShrink: 0,
+                  background: fillPalette[accession],
+                }}
+              />
+              <Typography variant="caption" noWrap>
+                {name}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </Paper>
+  ) : null
+})
+
+export default DomainLegend

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 } = model
+  const { hoveredInsertion, mouseOverDomains, showColumnStats } = model
 
   return (
     <>
@@ -116,12 +113,16 @@ const MSACanvasBlock = observer(function ({
             } else {
               model.setMousePos(undefined, undefined)
             }
-            // only track client coords when an insertion is hovered (the only
-            // consumer is the tooltip below); avoids a re-render on every move
+            // only track client coords when there's something to show in the
+            // 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
-                ? { x: event.clientX, y: event.clientY }
-                : undefined,
+              hasTooltip ? { x: event.clientX, y: event.clientY } : undefined,
             )
           }
         }}
@@ -167,6 +168,26 @@ const MSACanvasBlock = observer(function ({
             : hoveredInsertion.letters}
         </BaseTooltip>
       ) : null}
+      {!hoveredInsertion &&
+      mousePosition &&
+      (mouseOverDomains.length > 0 || showColumnStats) ? (
+        <BaseTooltip
+          clientPoint={{ x: mousePosition.x, y: mousePosition.y + 15 }}
+        >
+          {mouseOverDomains.map(d => (
+            <div key={`${d.accession}-${d.start}-${d.end}`}>
+              <b>{d.name}</b> ({d.accession}) {d.start}-{d.end}
+              {d.description ? (
+                <>
+                  <br />
+                  {d.description}
+                </>
+              ) : 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/MSAPanel.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
+import DomainLegend from './DomainLegend.tsx'
 import MSACanvas from './MSACanvas.tsx'
 import MSAMouseoverCanvas from './MSAMouseoverCanvas.tsx'
 
@@ -13,6 +14,7 @@ const MSAPanel = observer(function ({ model }: { model: MsaViewModel }) {
     <div style={{ position: 'relative' }}>
       <MSACanvas model={model} />
       <MSAMouseoverCanvas model={model} />
+      <DomainLegend model={model} />
     </div>
   )
 })

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,4 +1,5 @@
 import { getVisibleLeaves } from './getVisibleLeaves.ts'
+import { subFeatureRowHeight } from '../../constants.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
@@ -53,38 +54,95 @@ function drawTiles({
     rowHeight,
     fillPalette,
     strokePalette,
+    segmentLabels,
+    showMsaLetters,
     tidyFilteredGatheredInterProAnnotations,
   } = model
+  const h = subFeatureRows ? subFeatureRowHeight : rowHeight
+  // exon numbers label the bands only when residue letters aren't drawn (zoomed
+  // out); when letters show, the alternating shades alone mark the boundaries
+  // and a number would collide with the sequence
+  const drawSegmentLabels = !showMsaLetters && !subFeatureRows && h >= 9
 
   for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
     const node = visibleLeaves[i]!
-    const {
-      x,
-      data: { name },
-    } = node
-    const y = x!
-
+    const { name } = node.data
+    const y = node.x!
     const entry = tidyFilteredGatheredInterProAnnotations[name]
 
     if (entry) {
       for (let j = 0, l2 = entry.length; j < l2; j++) {
-        const { start, end, accession } = entry[j]!
+        const { start, end, accession, strand } = entry[j]!
         // Convert sequence positions to visible column positions
         // seqPos is 1-based from InterPro, so subtract 1 for 0-based
         const m1 = model.seqPosToVisibleCol(name, start - 1)
         const m2 = model.seqPosToVisibleCol(name, end)
-        if (m1 === undefined || m2 === undefined) {
-          continue // Skip if either position is hidden
+        if (m1 !== undefined && m2 !== undefined) {
+          const x = m1 * colWidth
+          const t = y - rowHeight + (subFeatureRows ? j * h : 0)
+          const lw = colWidth * (m2 - m1)
+          ctx.fillStyle = fillPalette[accession]!
+          ctx.strokeStyle = strokePalette[accession]!
+          if (strand === undefined) {
+            ctx.fillRect(x, t, lw, h)
+            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
+            if (label !== undefined && i === 0) {
+              const fontSize = Math.min(h - 2, 11)
+              ctx.font = `${fontSize}px sans-serif`
+              if (ctx.measureText(label).width + 2 <= lw) {
+                ctx.fillStyle = '#222'
+                ctx.textAlign = 'center'
+                ctx.textBaseline = 'middle'
+                ctx.fillText(label, x + lw / 2, t + h / 2)
+              }
+            }
+          } else {
+            drawGeneArrow({ ctx, x, t, w: lw, h, strand })
+          }
         }
-        const x = m1 * colWidth
-        ctx.fillStyle = fillPalette[accession]!
-        ctx.strokeStyle = strokePalette[accession]!
-        const h = subFeatureRows ? 4 : rowHeight
-        const t = y - rowHeight + (subFeatureRows ? j * h : 0)
-        const lw = colWidth * (m2 - m1)
-        ctx.fillRect(x, t, lw, h)
-        ctx.strokeRect(x, t, lw, h)
       }
     }
   }
 }
+
+// A gene arrow: a full-width rectangular body spanning the feature's
+// start..end columns, plus a triangular head that points *beyond* that end in
+// the strand direction (right for +, left for -). Keeping the body aligned to
+// the exact start/end columns means + and - strand features read as having the
+// same boundaries; the arrow lives outside them purely to show transcription
+// direction, preserving the column-by-column homology down the rows.
+function drawGeneArrow({
+  ctx,
+  x,
+  t,
+  w,
+  h,
+  strand,
+}: {
+  ctx: RenderCtx
+  x: number
+  t: number
+  w: number
+  h: number
+  strand: number
+}) {
+  // body spans bodyStart..bodyEnd (the exact columns); the head extends one
+  // row-height past bodyEnd in the strand direction
+  const dir = strand > 0 ? 1 : -1
+  const bodyStart = strand > 0 ? x : x + w
+  const bodyEnd = strand > 0 ? x + w : x
+  ctx.beginPath()
+  ctx.moveTo(bodyStart, t)
+  ctx.lineTo(bodyEnd, t)
+  ctx.lineTo(bodyEnd + dir * h, t + h / 2)
+  ctx.lineTo(bodyEnd, t + h)
+  ctx.lineTo(bodyStart, t + h)
+  ctx.closePath()
+  ctx.fill()
+  ctx.stroke()
+}

package/src/components/msa/renderMSABlock.ts

@@ -46,6 +46,7 @@ export function renderMSABlock({
   ctx.scale(k, k)
   ctx.translate(-offsetX, rowHeight / 2 - offsetY)
   ctx.textAlign = 'center'
+  ctx.textBaseline = 'alphabetic'
   setFontSize(ctx, fontSize, !bgColor)
 
   const { xStart, xEnd } = visibleColRange({
@@ -124,8 +125,7 @@ function drawTilesAndText({
 
   const isClustalX = colorSchemeName === 'clustalx_protein_dynamic'
   const isPercentIdentity = colorSchemeName === 'percent_identity_dynamic'
-  const drawBgTiles = bgColor || isClustalX || isPercentIdentity
-  if (!drawBgTiles && !showMsaLetters) {
+  if (!bgColor && !showMsaLetters) {
     return
   }
   const offsetXAligned = xStart * colWidth
@@ -159,7 +159,7 @@ function drawTilesAndText({
         color = colorScheme[letter]
       }
 
-      if (drawBgTiles) {
+      if (bgColor) {
         ctx.fillStyle = isMatchingReference
           ? theme.palette.action.hover
           : color || theme.palette.background.default

package/src/components/msa/renderMSAMouseover.ts

@@ -1,9 +1,31 @@
+import { multiRowHoverColor, referenceColor } from '../overlayColors.ts'
+
 import type { MsaViewModel } from '../../model.ts'
 
 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
+// the persistent highlightColumns overlay: a stronger fill plus a solid border
+// so a domain/motif band reads clearly over the colored alignment cells (the
+// 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)'
+
+// 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,
@@ -54,11 +76,17 @@ export function renderMouseover({
     }
   }
 
-  // Highlight multiple columns
+  // 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) {
-    ctx.fillStyle = highlightColor
-    for (const col of highlightedColumns) {
-      ctx.fillRect(col * colWidth + scrollX, 0, colWidth, height)
+    ctx.lineWidth = 2
+    for (const { start, end } of contiguousRuns(highlightedColumns)) {
+      const x = start * colWidth + scrollX
+      const w = (end - start + 1) * colWidth
+      ctx.fillStyle = highlightColumnsFill
+      ctx.fillRect(x, 0, w, height)
+      ctx.strokeStyle = highlightColumnsBorder
+      ctx.strokeRect(x, 0, w, height)
     }
   }
 

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/renderCtx.ts

@@ -26,5 +26,6 @@ export type RenderCtx = Pick<
   | 'strokeRect'
   | 'strokeStyle'
   | 'textAlign'
+  | 'textBaseline'
   | 'translate'
 >