react-msaview 6.4.2 → 7.0.0

package/src/components/msa/renderMSAMouseover.ts

@@ -1,20 +1,9 @@
-import {
-  clickColor,
-  hoverColor,
-  multiRowHoverColor,
-  referenceColor,
-} from '../overlayColors.ts'
-import { renderHighlights } from './renderHighlights.ts'
+import { clickColor, hoverColor, multiRowHoverColor } from '../overlayColors.ts'
+import { renderPersistentHighlights } from './renderHighlights.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { Theme } from '@mui/material'
 
-// 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)'
-
 export function renderMouseover({
   ctx,
   model,
@@ -36,9 +25,7 @@ export function renderMouseover({
     mouseClickRow,
     mouseClickCol,
     highResScaleFactor,
-    referenceRowIndex,
     hoveredRowIndices,
-    highlightedColumnRuns,
   } = model
   ctx.resetTransform()
   ctx.clearRect(0, 0, width * highResScaleFactor, height * highResScaleFactor)
@@ -53,30 +40,7 @@ export function renderMouseover({
     ctx.fillRect(index * colWidth + scrollX, 0, colWidth, height)
   }
 
-  // the reference row (relativeTo) stays lit, as does every tip under a hovered
-  // tree node
-  if (referenceRowIndex !== undefined) {
-    ctx.fillStyle = referenceColor
-    rowBand(referenceRowIndex)
-  }
-  ctx.fillStyle = multiRowHoverColor
-  for (const rowIndex of hoveredRowIndices) {
-    rowBand(rowIndex)
-  }
-
-  // each contiguous run of highlighted columns draws as one filled, bordered
-  // band, so a domain/motif highlight stays visible over the alignment
-  ctx.lineWidth = 2
-  for (const { start, end } of highlightedColumnRuns) {
-    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)
-  }
-
-  renderHighlights({
+  renderPersistentHighlights({
     ctx,
     model,
     theme,
@@ -86,6 +50,12 @@ export function renderMouseover({
     height,
   })
 
+  // every tip under a hovered tree node stays lit
+  ctx.fillStyle = multiRowHoverColor
+  for (const rowIndex of hoveredRowIndices) {
+    rowBand(rowIndex)
+  }
+
   ctx.fillStyle = hoverColor
   if (mouseCol !== undefined) {
     colBand(mouseCol)

package/src/components/renderCtx.ts

@@ -19,6 +19,7 @@ export type RenderCtx = Pick<
   | 'lineWidth'
   | 'measureText'
   | 'moveTo'
+  | 'quadraticCurveTo'
   | 'resetTransform'
   | 'restore'
   | 'save'

package/src/components/tracks/TrackBlocks.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
+import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
-import { useColorContrast } from '../../useColorContrast.ts'
 import { TrackResizeHandle } from '../ResizeHandles.tsx'
 import { drawTrackBlock } from './drawTracks.ts'
 
@@ -19,11 +19,9 @@ const TrackBlock = observer(function ({
   track: BasicTrack
   offsetX: number
 }) {
-  const { blockSize, colorScheme, highResScaleFactor } = model
-  const { height, customColorScheme } = track.model
-  const { theme, contrastScheme } = useColorContrast(
-    customColorScheme ?? colorScheme,
-  )
+  const { blockSize, highResScaleFactor } = model
+  const { height } = track.model
+  const theme = useTheme()
   const canvasWidth = blockSize * highResScaleFactor
   const canvasHeight = height * highResScaleFactor
 
@@ -31,11 +29,11 @@ const TrackBlock = observer(function ({
     draw: ctx => {
       ctx.resetTransform()
       ctx.clearRect(0, 0, canvasWidth, canvasHeight)
-      drawTrackBlock({ model, ctx, track, offsetX, theme, contrastScheme })
+      drawTrackBlock({ model, ctx, track, offsetX, theme })
     },
     width: canvasWidth,
     height: canvasHeight,
-    deps: [model, track, offsetX, theme, contrastScheme],
+    deps: [model, track, offsetX, theme],
   })
 
   return (
@@ -72,11 +70,10 @@ const TrackBlocks = observer(function ({
   // 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
   const { blocksX, msaCanvasWidth, scrollX } = model
-  const { kind, height, data } = track.model
+  const { kind, height, data, arcs } = track.model
 
-  // a text track with no data draws nothing, and an empty row of its own would
-  // still take up vertical space
-  if (kind === 'text' && !data) {
+  // a track with nothing to draw would still take up its vertical space
+  if ((kind === 'text' && !data) || (kind === 'arc' && !arcs?.length)) {
     return null
   }
 
@@ -103,7 +100,7 @@ const TrackBlocks = observer(function ({
           <TrackBlock key={bx} model={model} track={track} offsetX={bx} />
         ))}
       </div>
-      <TrackResizeHandle model={model} kind={kind} />
+      <TrackResizeHandle model={model} track={track} />
     </div>
   )
 })

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'
 
@@ -52,13 +53,65 @@ 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.
+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 +120,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 +134,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,11 +145,73 @@ 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)
+      // 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.
+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()
   }
 }
 
@@ -197,7 +311,6 @@ export function drawTrackBlock({
   offsetX,
   offsetY = 0,
   theme,
-  contrastScheme,
   blockSizeXOverride,
   highResScaleFactorOverride,
 }: {
@@ -207,7 +320,6 @@ export function drawTrackBlock({
   offsetX: number
   offsetY?: number
   theme: Theme
-  contrastScheme: Record<string, string>
   blockSizeXOverride?: number
   highResScaleFactorOverride?: number
 }) {
@@ -219,6 +331,7 @@ export function drawTrackBlock({
     colorScheme: modelColorScheme,
     fontSize,
     rowHeight,
+    showMsaLetters,
     alphabetMaxBits,
     highResScaleFactor,
   } = model
@@ -227,6 +340,8 @@ export function drawTrackBlock({
     kind,
     height: trackHeight,
     barColor,
+    arcColor,
+    arcs,
     customColorScheme,
     data,
   } = track.model
@@ -251,6 +366,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 +392,40 @@ export function drawTrackBlock({
       })
       break
     }
+    case 'ruler': {
+      const { relativeTo, numColumns } = model
+      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
+        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,
+        // a text track is one alignment row tall, so it shows letters exactly
+        // when the alignment does
+        drawLetters: showMsaLetters,
         colWidth,
         rowHeight,
         offsetX,
@@ -295,7 +446,6 @@ export function renderAllTracks({
   model,
   ctx,
   offsetX,
-  contrastScheme,
   theme,
   blockSizeXOverride,
   highResScaleFactorOverride,
@@ -303,7 +453,6 @@ export function renderAllTracks({
   model: MsaViewModel
   ctx: RenderCtx
   offsetX: number
-  contrastScheme: Record<string, string>
   theme: Theme
   blockSizeXOverride?: number
   highResScaleFactorOverride?: number
@@ -317,7 +466,6 @@ export function renderAllTracks({
       offsetX,
       offsetY: currentY,
       theme,
-      contrastScheme,
       blockSizeXOverride,
       highResScaleFactorOverride,
     })

package/src/components/tree/TreeCanvas.tsx

@@ -7,13 +7,12 @@ import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { useWheelScroll } from '../../useWheelScroll.ts'
 import { referenceColor, treeHoverColor } from '../overlayColors.ts'
 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 +76,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

package/src/components/tree/TreeCanvasBlock.tsx

@@ -8,7 +8,7 @@ import { createPortal } from 'react-dom'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import TreeBranchMenu from './TreeBranchMenu.tsx'
 import TreeNodeMenu from './TreeNodeMenu.tsx'
-import { padding, renderTreeCanvas } from './renderTreeCanvas.ts'
+import { renderTreeCanvas } from './renderTreeCanvas.ts'
 import { useTreeHover } from './useTreeHover.ts'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -58,7 +58,9 @@ const TreeCanvasBlock = observer(function ({
     useTreeHover({ model, offsetY })
 
   const { treeAreaWidth, blockSize, highResScaleFactor } = model
-  const width = treeAreaWidth + padding
+  // TreePanel clips to treeAreaWidth, so anything wider is backing store the
+  // viewer never sees -- it was 600px of it per block, at dpr squared
+  const width = treeAreaWidth
   const height = blockSize
 
   const canvasWidth = width * highResScaleFactor

package/src/components/tree/TreeRuler.tsx

@@ -1,16 +1,51 @@
 import React from 'react'
 
+import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { scaleBarLength } from './scaleBar.ts'
+
 import type { MsaViewModel } from '../../model.ts'
 
+const BAR_HEIGHT = 22
+
 // The gutter above the tree panel. It spans the resize handle too, so whatever
 // follows it in the top row starts exactly where the alignment canvas does --
-// MainArea has TreePanel + VerticalResizeHandle before the alignment.
+// MainArea has TreePanel + VerticalResizeHandle before the alignment. A
+// phylogram fills it with a scale bar: without one the branch lengths are drawn
+// to a scale nothing states.
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
-  const { treeAreaWidth, resizeHandleWidth } = model
+  const { treeAreaWidth, resizeHandleWidth, marginLeft, pxPerBranchLength } =
+    model
+  const theme = useTheme()
+  const width = treeAreaWidth + resizeHandleWidth
+  const bar = scaleBarLength(pxPerBranchLength, treeAreaWidth - marginLeft * 2)
+
   return (
-    <div style={{ flexShrink: 0, width: treeAreaWidth + resizeHandleWidth }} />
+    <div style={{ flexShrink: 0, width }}>
+      {bar ? (
+        <svg
+          width={width}
+          height={BAR_HEIGHT}
+          style={{ display: 'block' }}
+          color={theme.palette.text.primary}
+        >
+          <text
+            x={marginLeft}
+            y={BAR_HEIGHT - 9}
+            fontSize={10}
+            fill="currentColor"
+          >
+            {bar.label}
+          </text>
+          <path
+            d={`M${marginLeft} ${BAR_HEIGHT - 7} v6 h${bar.px} v-6`}
+            fill="none"
+            stroke="currentColor"
+          />
+        </svg>
+      ) : null}
+    </div>
   )
 })