react-msaview 7.0.0 → 8.0.0

package/src/components/rowpanels/RowPanels.tsx

@@ -0,0 +1,77 @@
+import React, { useCallback, useRef } from 'react'
+
+import { observer } from 'mobx-react'
+
+import { useWheelScroll } from '../../useWheelScroll.ts'
+import RowPanelBlock from './RowPanelBlock.tsx'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { ResolvedRowPanel } from '../../types.ts'
+
+const RowPanel = observer(function ({
+  model,
+  panel,
+}: {
+  model: MsaViewModel
+  panel: ResolvedRowPanel
+}) {
+  const ref = useRef<HTMLDivElement>(null)
+  const { height, blocksY, scrollY } = model
+  const onScrollY = useCallback(
+    (d: number) => {
+      model.doScrollY(d)
+    },
+    [model],
+  )
+  const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
+
+  return (
+    <div
+      ref={ref}
+      data-testid={`rowpanel_${panel.id}`}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+      style={{
+        height,
+        width: panel.width,
+        flexShrink: 0,
+        overflow: 'hidden',
+        position: 'relative',
+      }}
+    >
+      {/* one transform for the whole block set, matching TreeCanvas: the
+      strips scroll in lockstep with the tree and the alignment */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          transform: `translateY(${scrollY}px)`,
+          willChange: 'transform',
+        }}
+      >
+        {blocksY.map(block => (
+          <RowPanelBlock
+            key={block}
+            model={model}
+            panel={panel}
+            offsetY={block}
+          />
+        ))}
+      </div>
+    </div>
+  )
+})
+
+const RowPanels = observer(function ({ model }: { model: MsaViewModel }) {
+  const { resolvedRowPanels } = model
+  return resolvedRowPanels.length > 0 ? (
+    <div style={{ display: 'flex', flexShrink: 0 }}>
+      {resolvedRowPanels.map(panel => (
+        <RowPanel key={panel.id} model={model} panel={panel} />
+      ))}
+    </div>
+  ) : null
+})
+
+export default RowPanels

package/src/components/rowpanels/headerLayout.ts

@@ -0,0 +1,5 @@
+import { rowPanelHeaderHeight } from '../../constants.ts'
+
+export function headerRunsAcross(panelWidth: number) {
+  return panelWidth > rowPanelHeaderHeight
+}

package/src/components/rowpanels/renderFeaturePanel.ts

@@ -0,0 +1,66 @@
+import { contrastTextFn } from '../../util.ts'
+import { getVisibleLeaves } from '../getVisibleLeaves.ts'
+import { drawFeatureSpans, spanRows } from '../msa/drawFeatureSpans.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { ResolvedFeaturePanel, RowPanelSpan } from '../../types.ts'
+import type { RenderCtx } from '../renderCtx.ts'
+import type { Theme } from '@mui/material'
+
+// a span keeps a pixel clear above and below it, so stacked lanes and adjacent
+// rows read apart
+const rowPadding = 2
+
+/**
+ * The spans of a `features` panel, drawn with the mark the alignment overlay
+ * draws: an arrow where the feature carries a strand, a box otherwise, labeled
+ * where the text fits. The x mapping is the panel's own, resolved in
+ * `resolvedRowPanels`; a row needing several lanes divides its height between
+ * them.
+ */
+export function renderFeaturePanel({
+  ctx,
+  model,
+  theme,
+  panel,
+  x,
+  offsetY,
+  blockSizeYOverride,
+  highResScaleFactorOverride,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  theme: Theme
+  panel: ResolvedFeaturePanel
+  x: number
+  offsetY: number
+  blockSizeYOverride?: number
+  highResScaleFactorOverride?: number
+}) {
+  const { rowHeight, blockSize, highResScaleFactor } = model
+  const by = blockSizeYOverride ?? blockSize
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+  ctx.resetTransform()
+  ctx.scale(k, k)
+  ctx.translate(x, rowHeight / 2 - offsetY)
+
+  drawFeatureSpans<RowPanelSpan>({
+    ctx,
+    rows: spanRows(
+      getVisibleLeaves({ model, offsetY, blockSizeY: by }),
+      panel.spans,
+    ),
+    layout: {
+      height: laneCount => Math.max(1, rowHeight / laneCount - rowPadding),
+      top: (y, lane, h) =>
+        y - rowHeight + lane * (h + rowPadding) + rowPadding / 2,
+      headLength: h => h,
+    },
+    xOf: span => [span.xStart, span.xEnd],
+    colors: panel.colors,
+    labelOf: span => panel.labels?.get(span.annotation),
+    contrastText: contrastTextFn(theme),
+    xMin: 0,
+    xMax: panel.width,
+  })
+}

package/src/components/rowpanels/renderRowPanel.ts

@@ -0,0 +1,41 @@
+import { renderFeaturePanel } from './renderFeaturePanel.ts'
+import { renderStrip } from './renderStrip.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { ResolvedRowPanel } from '../../types.ts'
+import type { RenderCtx } from '../renderCtx.ts'
+import type { Theme } from '@mui/material'
+
+interface PanelArgs {
+  ctx: RenderCtx
+  model: MsaViewModel
+  theme: Theme
+  panel: ResolvedRowPanel
+  x: number
+  offsetY: number
+  blockSizeYOverride?: number
+  highResScaleFactorOverride?: number
+}
+
+/**
+ * One row panel, by kind. `x` is the panel's left edge in the context: the
+ * live view gives each panel a canvas of its own and passes 0, and the export
+ * packs every panel into one context and passes the panel's own offset.
+ */
+export function renderRowPanel({ panel, ...rest }: PanelArgs) {
+  if (panel.kind === 'features') {
+    renderFeaturePanel({ panel, ...rest })
+  } else {
+    renderStrip({ panel, ...rest })
+  }
+}
+
+/** every row panel side by side in one context, for the SVG export */
+export function renderRowPanels({
+  model,
+  ...rest
+}: Omit<PanelArgs, 'panel' | 'x'>) {
+  for (const panel of model.resolvedRowPanels) {
+    renderRowPanel({ model, panel, x: panel.offsetX, ...rest })
+  }
+}

package/src/components/rowpanels/renderStrip.ts

@@ -0,0 +1,46 @@
+import { getVisibleLeaves } from '../getVisibleLeaves.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { ResolvedStripPanel } from '../../types.ts'
+import type { RenderCtx } from '../renderCtx.ts'
+
+/**
+ * One cell per row of a `strip` panel, in the color its field takes through
+ * the panel's scale. A row the table has no value for leaves the cell empty.
+ *
+ * `x` is the panel's left edge in the context: the live view gives each panel
+ * a canvas of its own and passes 0, and the export packs every panel into one
+ * context and passes the panel's own offset.
+ */
+export function renderStrip({
+  ctx,
+  model,
+  panel,
+  x,
+  offsetY,
+  blockSizeYOverride,
+  highResScaleFactorOverride,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  panel: ResolvedStripPanel
+  x: number
+  offsetY: number
+  blockSizeYOverride?: number
+  highResScaleFactorOverride?: number
+}) {
+  const { rowHeight, blockSize, highResScaleFactor } = model
+  const by = blockSizeYOverride ?? blockSize
+  ctx.resetTransform()
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+  ctx.scale(k, k)
+  ctx.translate(x, -offsetY)
+  for (const leaf of getVisibleLeaves({ model, offsetY, blockSizeY: by })) {
+    const color = panel.colors.get(leaf.data.name)
+    if (color) {
+      ctx.fillStyle = color
+      // leaf.x is the row's center, at rowHeight*(index+0.5)
+      ctx.fillRect(0, leaf.x! - rowHeight / 2, panel.width, rowHeight)
+    }
+  }
+}

package/src/components/tracks/TrackBlocks.tsx

@@ -64,11 +64,9 @@ const TrackBlocks = observer(function ({
   model: MsaViewModel
   track: BasicTrack
 }) {
-  // msaCanvasWidth, not msaAreaWidth: a track row is a legend for the columns
-  // directly below it, so it has to stop where the alignment canvas does rather
-  // than running on another 20px under the vertical scrollbar -- otherwise the
-  // last columns appear in the tracks but not in the alignment, and the hovered
-  // -column indicator (sized to the canvas) stops short of the track it crosses
+  // msaCanvasWidth, not msaAreaWidth: tracks stop where the alignment canvas
+  // does, not 20px further under the vertical scrollbar, so their columns and
+  // the hover indicator line up with the alignment
   const { blocksX, msaCanvasWidth, scrollX } = model
   const { kind, height, data, arcs } = track.model
 

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

@@ -41,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) {
@@ -53,10 +53,8 @@ export function barTrackValues(model: MsaViewModel, trackId: string) {
     : model.conservation
 }
 
-// An arc's apex scales with how far it reaches, so a short helix stays shallow
-// and a long-range pair sweeps the full track height. The scale is sqrt rather
-// than linear because a contact map's spans are heavily skewed towards short
-// ones, which linear scaling flattens into a smear along the baseline.
+// 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,
@@ -145,17 +143,13 @@ export function drawTextTrackContent({
       ctx.fillRect(x, 0, colWidth, rowHeight)
     }
     if (drawLetters) {
-      // a letter on a colored tile needs that tile's contrast color; otherwise
-      // it sits on the plain background and takes the theme's text color
       ctx.fillStyle = contrastText(fill)
       ctx.fillText(letter, x + colWidth / 2, rowHeight / 2)
     }
   }
 }
 
-// Column numbers every `step` columns, with a tick under each. The step is the
-// smallest 1/2/5 x 10^n that leaves room for a label, so a zoom changes how many
-// numbers appear rather than crowding them.
+// 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]
@@ -215,17 +209,11 @@ export function drawColumnRuler({
   }
 }
 
-// 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({
@@ -256,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'
@@ -270,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
@@ -300,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,
@@ -397,8 +383,7 @@ export function drawTrackBlock({
       drawColumnRuler({
         ctx,
         numColumns,
-        // numbered by the reference row's own residues when the alignment is
-        // drawn relative to one, which is what the rest of the view counts in
+        // with relativeTo set, number by the reference row's residues
         label: relativeTo
           ? col => {
               const pos = model.visibleColToSeqPosOneBased(relativeTo, col)
@@ -423,8 +408,6 @@ export function drawTrackBlock({
         colorScheme: customColorScheme ?? modelColorScheme,
         contrastText: contrastTextFn(theme),
         bgColor,
-        // a text track is one alignment row tall, so it shows letters exactly
-        // when the alignment does
         drawLetters: showMsaLetters,
         colWidth,
         rowHeight,
@@ -440,7 +423,7 @@ 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,

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,6 +6,7 @@ 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 type { MsaViewModel } from '../../model.ts'
@@ -93,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}