react-msaview 6.5.0 → 8.0.0

package/src/components/tracks/TrackTooltipContent.tsx

@@ -0,0 +1,156 @@
+import React from 'react'
+
+import { observer } from 'mobx-react'
+
+import { columnLogoStack } from '../../sequenceLogo.ts'
+import { barTrackValues } from './drawTracks.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { BasicTrack } from '../../types.ts'
+
+const pct = (n: number) => `${Math.round(n * 100)}%`
+
+const MAX_PARTNERS = 8
+
+function ColumnLabel({ model, col }: { model: MsaViewModel; col: number }) {
+  const { relativeTo } = model
+  const pos = relativeTo
+    ? model.visibleColToSeqPosOneBased(relativeTo, col)
+    : undefined
+  return (
+    <b>
+      Column {col + 1}
+      {pos === undefined ? null : ` (${relativeTo}:${pos})`}
+    </b>
+  )
+}
+
+function BarTooltip({
+  model,
+  track,
+  col,
+}: {
+  model: MsaViewModel
+  track: BasicTrack
+  col: number
+}) {
+  const { id, name } = track.model
+  const value = barTrackValues(model, id)[col]
+  return value === undefined ? null : (
+    <div>
+      <ColumnLabel model={model} col={col} />
+      <br />
+      {name}: {value.toFixed(2)}
+    </div>
+  )
+}
+
+function LogoTooltip({ model, col }: { model: MsaViewModel; col: number }) {
+  const stats = model.columnStatsAt(col)
+  if (!stats) {
+    return null
+  }
+  const { total, consensusLetter, consensusFraction, gapFraction } = stats
+  const stack = columnLogoStack(model.colStats, col, model.alphabetMaxBits)
+  const bits = stack.reduce((a, b) => a + b.bits, 0)
+  return (
+    <div>
+      <ColumnLabel model={model} col={col} /> ({total} seqs)
+      <br />
+      Information: {bits.toFixed(2)} bits
+      <br />
+      Consensus: {consensusLetter || '-'} ({pct(consensusFraction)})
+      <br />
+      Gaps: {pct(gapFraction)}
+      <br />
+      {stats.distribution.slice(0, 6).map(([letter, count]) => (
+        <span key={letter} style={{ marginRight: 8 }}>
+          {letter} {pct(count / total)}
+        </span>
+      ))}
+    </div>
+  )
+}
+
+function TextTooltip({
+  model,
+  track,
+  col,
+}: {
+  model: MsaViewModel
+  track: BasicTrack
+  col: number
+}) {
+  const { name, data } = track.model
+  const letter = data?.[col]
+  return letter === undefined ? null : (
+    <div>
+      <ColumnLabel model={model} col={col} />
+      <br />
+      {name}: {letter === ' ' ? 'blank' : letter}
+    </div>
+  )
+}
+
+function ArcTooltip({
+  model,
+  track,
+  col,
+}: {
+  model: MsaViewModel
+  track: BasicTrack
+  col: number
+}) {
+  const { name, arcs } = track.model
+  const partners = (arcs ?? [])
+    .filter(arc => arc.start === col || arc.end === col)
+    .map(arc => (arc.start === col ? arc.end : arc.start) + 1)
+  return partners.length === 0 ? null : (
+    <div>
+      <ColumnLabel model={model} col={col} />
+      <br />
+      {name}: pairs with {partners.slice(0, MAX_PARTNERS).join(', ')}
+      {partners.length > MAX_PARTNERS ? '...' : null}
+    </div>
+  )
+}
+
+/**
+ * One track's reading at the hovered column: a bar track's value, the logo's
+ * information content and composition, the columns an arc joins, the letter on a
+ * text track. `drawTrackBlock` dispatches on the same `kind`, so a new kind
+ * needs a case in both.
+ */
+const TrackTooltipContent = observer(function ({
+  model,
+  track,
+  col,
+}: {
+  model: MsaViewModel
+  track: BasicTrack
+  col: number
+}) {
+  switch (track.model.kind) {
+    case 'bar': {
+      return <BarTooltip model={model} track={track} col={col} />
+    }
+    case 'logo': {
+      return <LogoTooltip model={model} col={col} />
+    }
+    case 'text': {
+      return <TextTooltip model={model} track={track} col={col} />
+    }
+    case 'arc': {
+      return <ArcTooltip model={model} track={track} col={col} />
+    }
+    case 'ruler': {
+      return (
+        <div>
+          <ColumnLabel model={model} col={col} />
+        </div>
+      )
+    }
+  }
+})
+
+export default TrackTooltipContent

package/src/components/tracks/drawTracks.ts

@@ -1,10 +1,11 @@
 import { columnLogoStack } from '../../sequenceLogo.ts'
 import { setFontSize } from '../../setFontSize.ts'
+import { contrastTextFn } from '../../util.ts'
 import { visibleColRange } from '../msa/visibleColRange.ts'
 
 import type { ColumnCounts } from '../../columnCounts.ts'
 import type { MsaViewModel } from '../../model.ts'
-import type { BasicTrack } from '../../types.ts'
+import type { Arc, BasicTrack } from '../../types.ts'
 import type { RenderCtx } from '../renderCtx.ts'
 import type { Theme } from '@mui/material'
 
@@ -40,8 +41,8 @@ export function drawConservationBars({
   }
 }
 
-// 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
+// bar-track values are model getters, off the plain track object, so the canvas
+// autorun stays reactive
 export function barTrackValues(model: MsaViewModel, trackId: string) {
   const supplied = model.columnTrackContent.get(trackId)?.values
   if (supplied) {
@@ -52,13 +53,63 @@ export function barTrackValues(model: MsaViewModel, trackId: string) {
     : model.conservation
 }
 
+// An arc's apex scales with the square root of its span. Contact-map spans skew
+// short, and a linear scale flattens them along the baseline.
+export function drawArcs({
+  ctx,
+  arcs,
+  color,
+  colWidth,
+  trackHeight,
+  offsetX,
+  blockSize,
+}: {
+  ctx: RenderCtx
+  arcs: Arc[] | undefined
+  color: string
+  colWidth: number
+  trackHeight: number
+  offsetX: number
+  blockSize: number
+}) {
+  if (!arcs?.length) {
+    return
+  }
+  const { xStart, xEnd } = visibleColRange({
+    offsetX,
+    blockWidth: blockSize,
+    colWidth,
+  })
+  let maxSpan = 1
+  for (const arc of arcs) {
+    maxSpan = Math.max(maxSpan, arc.end - arc.start)
+  }
+  // a full-height apex would put the stroke half outside the track
+  const apexRoom = trackHeight - 1
+  ctx.lineWidth = 1
+  for (const arc of arcs) {
+    // an arc that spans the block draws even though neither foot is inside it
+    if (arc.end < xStart || arc.start > xEnd) {
+      continue
+    }
+    const x1 = (arc.start + 0.5) * colWidth
+    const x2 = (arc.end + 0.5) * colWidth
+    const apex = apexRoom * Math.sqrt((arc.end - arc.start) / maxSpan)
+    ctx.strokeStyle = arc.color ?? color
+    ctx.beginPath()
+    ctx.moveTo(x1, trackHeight)
+    ctx.quadraticCurveTo((x1 + x2) / 2, trackHeight - 2 * apex, x2, trackHeight)
+    ctx.stroke()
+  }
+}
+
 export function drawTextTrackContent({
   ctx,
   data,
   colorScheme,
-  contrastScheme,
+  contrastText,
   bgColor,
-  textColor,
+  drawLetters,
   colWidth,
   rowHeight,
   offsetX,
@@ -67,9 +118,9 @@ export function drawTextTrackContent({
   ctx: RenderCtx
   data: string | undefined
   colorScheme: Record<string, string>
-  contrastScheme: Record<string, string>
+  contrastText: (color: string | undefined) => string
   bgColor: boolean
-  textColor: string
+  drawLetters: boolean
   colWidth: number
   rowHeight: number
   offsetX: number
@@ -81,7 +132,6 @@ export function drawTextTrackContent({
     colWidth,
   })
   const str = data?.slice(xStart, xEnd)
-  const drawLetters = rowHeight >= 10 && colWidth >= rowHeight / 2
 
   for (let i = 0; str && i < str.length; i++) {
     const letter = str[i]!
@@ -93,25 +143,77 @@ export function drawTextTrackContent({
       ctx.fillRect(x, 0, colWidth, rowHeight)
     }
     if (drawLetters) {
-      // a letter on a colored tile needs the tile's contrast color; otherwise it
-      // sits on the plain background and takes the theme's text color
-      ctx.fillStyle = fill ? (contrastScheme[upper] ?? 'black') : textColor
-      ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1)
+      ctx.fillStyle = contrastText(fill)
+      ctx.fillText(letter, x + colWidth / 2, rowHeight / 2)
+    }
+  }
+}
+
+// the smallest 1/2/5 x 10^n column step that leaves room for a label
+export function rulerStep(colWidth: number, minPixels = 55) {
+  let step = 1
+  const mantissas = [1, 2, 5]
+  for (let i = 0; step * colWidth < minPixels; i++) {
+    step = mantissas[i % 3]! * 10 ** Math.floor(i / 3)
+  }
+  return step
+}
+
+const RULER_FONT_SIZE = 10
+const TICK_HEIGHT = 4
+
+export function drawColumnRuler({
+  ctx,
+  numColumns,
+  label,
+  textColor,
+  colWidth,
+  trackHeight,
+  offsetX,
+  blockSize,
+}: {
+  ctx: RenderCtx
+  numColumns: number
+  label: (col: number) => string | undefined
+  textColor: string
+  colWidth: number
+  trackHeight: number
+  offsetX: number
+  blockSize: number
+}) {
+  const { xStart, xEnd } = visibleColRange({
+    offsetX,
+    blockWidth: blockSize,
+    colWidth,
+  })
+  const step = rulerStep(colWidth)
+  const end = Math.min(xEnd, numColumns)
+  setFontSize(ctx, RULER_FONT_SIZE)
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'alphabetic'
+  ctx.fillStyle = textColor
+  ctx.strokeStyle = textColor
+  ctx.lineWidth = 1
+
+  for (let col = Math.ceil(xStart / step) * step; col < end; col += step) {
+    const text = label(col)
+    if (text === undefined) {
+      continue
     }
+    const x = (col + 0.5) * colWidth
+    ctx.fillText(text, x, trackHeight - TICK_HEIGHT - 2)
+    ctx.beginPath()
+    ctx.moveTo(x, trackHeight - TICK_HEIGHT)
+    ctx.lineTo(x, trackHeight)
+    ctx.stroke()
   }
 }
 
-// Cap height as a fraction of the font size. Every logo letter is scaled from
-// one reference font size to the height its frequency earns, and that scale is
-// only right if we know how tall the glyph actually draws. Measuring per letter
-// would be exact but `measureText` reports no vertical box in the SVG export
-// backend, so the ratio is a constant: the cap height of the sans-serif faces
-// both backends use, within a percent or two. It only has to be consistent --
-// the same ratio for every letter is what makes the slices sum to the stack
-// height instead of drifting apart.
+// Cap height as a fraction of the font size, within a percent or two for the
+// sans-serif faces both backends use. `measureText` reports no vertical box in
+// the SVG export backend, so one constant ratio scales every logo letter, and
+// the slices sum to the stack height.
 const CAP_HEIGHT_RATIO = 0.72
-// letters below this many pixels are noise, and a stack that thin reads better
-// as the bar chart it approximates
 const MIN_LETTER_PX = 3
 
 export function drawSequenceLogo({
@@ -142,8 +244,8 @@ export function drawSequenceLogo({
   })
   const end = Math.min(xEnd, colStats.numColumns)
 
-  // one reference size for every glyph; each letter's own transform takes it
-  // from here to the height it earned, so the font is set once for the block
+  // one reference font size for the block; each letter's transform scales it to
+  // a height proportional to its frequency
   const referenceFontSize = trackHeight
   setFontSize(ctx, referenceFontSize)
   ctx.textAlign = 'left'
@@ -156,9 +258,7 @@ export function drawSequenceLogo({
       continue
     }
     const x = col * colWidth
-    // stack up from the baseline: the array is ascending, so the tallest letter
-    // lands on top, which is the convention that makes a logo readable at a
-    // glance
+    // the stack is ascending, so the tallest letter lands on top
     let bottom = trackHeight
     for (const { letter, bits } of stack) {
       const h = (bits / maxBits) * trackHeight
@@ -186,9 +286,9 @@ export function drawSequenceLogo({
 
 /**
  * Draw one track's content into a block of the alignment's column space, at
- * `offsetY` within the ctx. Owns the transform, so both callers -- the live
- * canvas blocks and the SVG export -- draw into the same coordinate space, and
- * adding a track kind means a `kind`, a draw function above, and a case here.
+ * `offsetY` within the ctx. Owns the transform, so the live canvas blocks and
+ * the SVG export draw into the same coordinate space. A new track kind needs a
+ * `kind`, a draw function above, and a case here.
  */
 export function drawTrackBlock({
   model,
@@ -197,7 +297,6 @@ export function drawTrackBlock({
   offsetX,
   offsetY = 0,
   theme,
-  contrastScheme,
   blockSizeXOverride,
   highResScaleFactorOverride,
 }: {
@@ -207,7 +306,6 @@ export function drawTrackBlock({
   offsetX: number
   offsetY?: number
   theme: Theme
-  contrastScheme: Record<string, string>
   blockSizeXOverride?: number
   highResScaleFactorOverride?: number
 }) {
@@ -219,6 +317,7 @@ export function drawTrackBlock({
     colorScheme: modelColorScheme,
     fontSize,
     rowHeight,
+    showMsaLetters,
     alphabetMaxBits,
     highResScaleFactor,
   } = model
@@ -227,6 +326,8 @@ export function drawTrackBlock({
     kind,
     height: trackHeight,
     barColor,
+    arcColor,
+    arcs,
     customColorScheme,
     data,
   } = track.model
@@ -251,6 +352,18 @@ export function drawTrackBlock({
       })
       break
     }
+    case 'arc': {
+      drawArcs({
+        ctx,
+        arcs,
+        color: arcColor ?? theme.palette.text.primary,
+        colWidth,
+        trackHeight,
+        offsetX,
+        blockSize: blockSizeX,
+      })
+      break
+    }
     case 'logo': {
       drawSequenceLogo({
         ctx,
@@ -265,16 +378,37 @@ export function drawTrackBlock({
       })
       break
     }
+    case 'ruler': {
+      const { relativeTo, numColumns } = model
+      drawColumnRuler({
+        ctx,
+        numColumns,
+        // with relativeTo set, number by the reference row's residues
+        label: relativeTo
+          ? col => {
+              const pos = model.visibleColToSeqPosOneBased(relativeTo, col)
+              return pos === undefined ? undefined : `${pos}`
+            }
+          : col => `${col + 1}`,
+        textColor,
+        colWidth,
+        trackHeight,
+        offsetX,
+        blockSize: blockSizeX,
+      })
+      break
+    }
     case 'text': {
       ctx.textAlign = 'center'
+      ctx.textBaseline = 'middle'
       setFontSize(ctx, fontSize)
       drawTextTrackContent({
         ctx,
         data,
         colorScheme: customColorScheme ?? modelColorScheme,
-        contrastScheme,
+        contrastText: contrastTextFn(theme),
         bgColor,
-        textColor,
+        drawLetters: showMsaLetters,
         colWidth,
         rowHeight,
         offsetX,
@@ -289,13 +423,12 @@ export function drawTrackBlock({
 
 /**
  * Every turned-on track stacked top to bottom, for the SVG export. The live
- * view draws the same content one canvas block at a time -- see TrackBlocks.
+ * view draws the same content one canvas block at a time in TrackBlocks.
  */
 export function renderAllTracks({
   model,
   ctx,
   offsetX,
-  contrastScheme,
   theme,
   blockSizeXOverride,
   highResScaleFactorOverride,
@@ -303,7 +436,6 @@ export function renderAllTracks({
   model: MsaViewModel
   ctx: RenderCtx
   offsetX: number
-  contrastScheme: Record<string, string>
   theme: Theme
   blockSizeXOverride?: number
   highResScaleFactorOverride?: number
@@ -317,7 +449,6 @@ export function renderAllTracks({
       offsetX,
       offsetY: currentY,
       theme,
-      contrastScheme,
       blockSizeXOverride,
       highResScaleFactorOverride,
     })

package/src/components/tracks/useTrackHover.ts

@@ -0,0 +1,42 @@
+import { useState } from 'react'
+
+import type { MsaViewModel } from '../../model.ts'
+import type React from 'react'
+
+/**
+ * Translates pointer events over a track's row into the hovered column and a
+ * tooltip anchor. The track shares the alignment's columns, so hovering it sets
+ * the model's mouse column too and the alignment's hover band follows along.
+ *
+ * `tooltip` off skips the anchor, so a track whose tooltip is turned off still
+ * drives the hover band without re-rendering on every mouse move.
+ */
+export function useTrackHover({
+  model,
+  tooltip,
+}: {
+  model: MsaViewModel
+  tooltip: boolean
+}) {
+  const [hover, setHover] = useState<{ col: number; x: number; y: number }>()
+
+  // the blocks are laid out in column space and scrolled by a transform on
+  // their container, so the pointer's column comes off the untransformed row
+  function onMouseMove(event: React.MouseEvent, el: HTMLElement) {
+    const { colWidth, scrollX, numColumns } = model
+    const { left } = el.getBoundingClientRect()
+    const col = Math.floor((event.clientX - left - scrollX) / colWidth)
+    const hit = col >= 0 && col < numColumns
+    model.setMousePos(hit ? col : undefined, undefined)
+    if (tooltip) {
+      setHover(hit ? { col, x: event.clientX, y: event.clientY } : undefined)
+    }
+  }
+
+  function onMouseLeave() {
+    setHover(undefined)
+    model.setMousePos(undefined, undefined)
+  }
+
+  return { hover: tooltip ? hover : undefined, onMouseMove, onMouseLeave }
+}

package/src/components/tree/CladeLabels.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+
+import { useTheme } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import {
+  bracketGap,
+  cladeHeight,
+  cladeInGutter,
+  cladeLabelHorizontal,
+  cladeLabelOffset,
+} from './cladeBrackets.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+
+/**
+ * The label of each bracket, in the gutter beside its bar, where the canvas
+ * draws the bar itself. The text is DOM text, turned on its side for a clade
+ * shorter than the font, the way the strip headers are; the SVG export draws
+ * the same labels with a `rotate(-90)`.
+ */
+const CladeLabels = observer(function ({ model }: { model: MsaViewModel }) {
+  const {
+    resolvedClades,
+    cladeGutterWidth,
+    rowHeight,
+    treeAreaWidth,
+    fontSize,
+  } = model
+  const theme = useTheme()
+  if (cladeGutterWidth === 0) {
+    return null
+  }
+  const gutterLeft = treeAreaWidth - cladeGutterWidth
+  return (
+    <>
+      {resolvedClades.map((clade, index) => {
+        const { label, markColor, rows } = clade
+        if (!label || !cladeInGutter(clade)) {
+          return null
+        }
+        const left = gutterLeft + cladeLabelOffset(clade)
+        const horizontal = cladeLabelHorizontal(clade, rowHeight, fontSize)
+        return (
+          <div
+            key={`${rows[0]}-${rows[1]}-${index}`}
+            title={label}
+            style={{
+              position: 'absolute',
+              left,
+              top: rows[0] * rowHeight,
+              width: treeAreaWidth - left - bracketGap,
+              height: cladeHeight(clade, rowHeight),
+              display: 'flex',
+              alignItems: 'center',
+              color: markColor ?? theme.palette.text.primary,
+              fontSize,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              pointerEvents: 'none',
+              // vertical-rl reads top to bottom, and the half turn makes it
+              // read upwards, which is what rotate(-90) exports
+              ...(horizontal
+                ? {}
+                : { writingMode: 'vertical-rl', transform: 'rotate(180deg)' }),
+            }}
+          >
+            {label}
+          </div>
+        )
+      })}
+    </>
+  )
+})
+
+export default CladeLabels

package/src/components/tree/TreeCanvas.tsx

@@ -6,14 +6,14 @@ import { observer } from 'mobx-react'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { useWheelScroll } from '../../useWheelScroll.ts'
 import { referenceColor, treeHoverColor } from '../overlayColors.ts'
+import CladeLabels from './CladeLabels.tsx'
 import TreeCanvasBlock from './TreeCanvasBlock.tsx'
-import { padding } from './renderTreeCanvas.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)
-  const { treeWidth, height, blocksY, treeAreaWidth, scrollY } = model
+  const { height, blocksY, treeAreaWidth, scrollY } = model
   const onScrollY = useCallback(
     (d: number) => {
       model.doScrollY(d)
@@ -77,7 +77,7 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
       style={{
         height,
         position: 'relative',
-        width: treeWidth + padding,
+        width: treeAreaWidth,
       }}
     >
       {/* one transform for the whole block set, matching MSACanvas: the tree
@@ -94,6 +94,7 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
         {blocksY.map(block => (
           <TreeCanvasBlock key={block} model={model} offsetY={block} />
         ))}
+        <CladeLabels model={model} />
       </div>
       <canvas
         ref={mouseoverRef}