react-msaview 9.0.0 → 9.1.0

package/src/components/msa/drawFeatureSpans.ts

@@ -37,6 +37,42 @@ export interface SpanLayout {
   headRise?: (height: number) => number
 }
 
+/**
+ * What a renderer hands the span mark: its rows, where a band lands in them,
+ * its x mapping, the colors and the label each feature takes.
+ */
+export interface SpanSource<T extends SpanBand> {
+  rows: SpanRow<T>[]
+  layout: SpanLayout
+  xOf: (band: T) => [number, number]
+  colors: Map<Annotation, { fill: string; stroke: string }>
+  labelOf?: (band: T) => string | undefined
+  labelDrawn?: (band: T) => void
+}
+
+/** a span as drawn: a box, or an arrow's outline where it carries a strand */
+export interface SpanShape<T extends SpanBand> {
+  band: T
+  fill: string
+  stroke: string
+  box?: { x: number; y: number; w: number; h: number }
+  outline?: [number, number][]
+}
+
+export interface SpanLabel {
+  text: string
+  x: number
+  y: number
+  fill: string
+}
+
+/** one row's shapes, then the labels drawn over them at `fontSize` */
+export interface SpanMarkRow<T extends SpanBand> {
+  shapes: SpanShape<T>[]
+  labels: SpanLabel[]
+  fontSize: number
+}
+
 /** the rows of `bandsByRow` that `leaves` covers, in display order */
 export function spanRows<T extends SpanBand>(
   leaves: HierarchyNode<NodeWithIdsAndLength>[],
@@ -53,56 +89,49 @@ export function spanRows<T extends SpanBand>(
 }
 
 /**
- * The span mark, in whatever x space the caller maps its bands into: alignment
- * columns for the domain overlay, panel pixels for a `features` row panel. A
- * feature with a strand draws as an arrow, one without as a box, and a label
- * draws inside the span wherever the text fits.
+ * The span mark as geometry, in whatever x space `xOf` maps its bands into:
+ * alignment columns for the domain overlay, panel pixels for a `features` row
+ * panel. A feature with a strand is an arrow, one without a box, and a label
+ * lands inside the span wherever `measureText` says the text fits.
  *
- * `xOf` returns the span's `[xStart, xEnd]` in the context's coordinates, and
- * the context is translated so that `y - rowHeight` is the row's top edge.
+ * `y - rowHeight` is the row's top edge in the coordinates `rows` gives.
  */
-export function drawFeatureSpans<T extends SpanBand>({
-  ctx,
+export function featureSpanMarks<T extends SpanBand>({
   rows,
   layout,
   xOf,
   colors,
   labelOf,
   labelDrawn,
-  contrastText,
+  measureText,
   xMin,
   xMax,
-}: {
-  ctx: RenderCtx
-  rows: SpanRow<T>[]
-  layout: SpanLayout
-  xOf: (band: T) => [number, number]
-  colors: Map<Annotation, { fill: string; stroke: string }>
-  labelOf?: (band: T) => string | undefined
-  labelDrawn?: (band: T) => void
-  contrastText: (color: string) => string
+}: SpanSource<T> & {
+  measureText: (text: string, fontSize: number) => number
   xMin: number
   xMax: number
-}) {
-  // one row's spans are drawn before any of its labels. Bands are ordered
-  // longest-first so a nested one lands on top, and drawing each label with its
-  // own span put the child's box over the parent's text: `S` covered `RBD`, and
-  // `RBD` read as `RB`. Reused across rows rather than allocated per row.
-  const placed: {
-    band: T
-    xStart: number
-    w: number
-    t: number
-    head: number
-    fill: string
-  }[] = []
-
+}): SpanMarkRow<T>[] {
+  const out: SpanMarkRow<T>[] = []
   for (const { y, bands } of rows) {
     const h = layout.height(bands[0]!.laneCount)
     const headLen = layout.headLength(h)
     const rise = layout.headRise?.(h) ?? 0
     const labelled = labelOf !== undefined && h >= minFeatureLabelHeight
-    placed.length = 0
+    const fontSize = Math.min(h - 2, 11)
+    const shapes: SpanShape<T>[] = []
+    const labels: SpanLabel[] = []
+    // one row's spans are drawn before any of its labels. Bands are ordered
+    // longest-first so a nested one lands on top, and drawing each label with
+    // its own span put the child's box over the parent's text: `S` covered
+    // `RBD`, and `RBD` read as `RB`.
+    const placed: {
+      band: T
+      xStart: number
+      w: number
+      t: number
+      head: number
+      fill: string
+    }[] = []
 
     for (const band of bands) {
       const [xStart, xEnd] = xOf(band)
@@ -112,55 +141,111 @@ export function drawFeatureSpans<T extends SpanBand>({
       }
       const t = layout.top(y, band.lane, h)
       const { fill, stroke } = colors.get(band.annotation)!
-      ctx.fillStyle = fill
-      ctx.strokeStyle = stroke
       const { strand } = band.annotation
       const head = strand === undefined ? 0 : Math.min(headLen, w)
-      if (strand === undefined) {
-        ctx.fillRect(xStart, t, w, h)
-        ctx.strokeRect(xStart, t, w, h)
-      } else {
-        drawGeneArrow({ ctx, x: xStart, t, w, h, head, rise, strand })
-      }
+      shapes.push(
+        strand === undefined
+          ? { band, fill, stroke, box: { x: xStart, y: t, w, h } }
+          : {
+              band,
+              fill,
+              stroke,
+              outline: geneArrow({ x: xStart, t, w, h, head, rise, strand }),
+            },
+      )
       if (labelled) {
         placed.push({ band, xStart, w, t, head, fill })
       }
     }
 
-    if (placed.length > 0) {
-      ctx.font = `${Math.min(h - 2, 11)}px sans-serif`
+    for (const { band, xStart, w, t, head, fill } of placed) {
+      // asking for the label here rather than in the pass above keeps the
+      // once-per-block segment numbering in drawing order
+      const text = labelOf!(band)
+      // the head narrows to a point, so only about half of it holds text
+      if (
+        text !== undefined &&
+        measureText(text, fontSize) + 2 <= w - head / 2
+      ) {
+        labelDrawn?.(band)
+        labels.push({ text, x: xStart + w / 2, y: t + h / 2, fill })
+      }
+    }
+    out.push({ shapes, labels, fontSize })
+  }
+  return out
+}
+
+/**
+ * The span mark, drawn into `ctx` from `featureSpanMarks`, with the context
+ * translated so that `y - rowHeight` is the row's top edge.
+ */
+export function drawFeatureSpans<T extends SpanBand>({
+  ctx,
+  contrastText,
+  ...source
+}: SpanSource<T> & {
+  ctx: RenderCtx
+  contrastText: (color: string) => string
+  xMin: number
+  xMax: number
+}) {
+  let font = ''
+  const setFont = (fontSize: number) => {
+    const next = `${fontSize}px sans-serif`
+    if (next !== font) {
+      ctx.font = next
+      font = next
+    }
+  }
+  const rows = featureSpanMarks({
+    ...source,
+    measureText: (text, fontSize) => {
+      setFont(fontSize)
+      return ctx.measureText(text).width
+    },
+  })
+  for (const { shapes, labels, fontSize } of rows) {
+    for (const { fill, stroke, box, outline } of shapes) {
+      ctx.fillStyle = fill
+      ctx.strokeStyle = stroke
+      if (box) {
+        ctx.fillRect(box.x, box.y, box.w, box.h)
+        ctx.strokeRect(box.x, box.y, box.w, box.h)
+      } else if (outline) {
+        ctx.beginPath()
+        ctx.moveTo(...outline[0]!)
+        for (let i = 1; i < outline.length; i++) {
+          ctx.lineTo(...outline[i]!)
+        }
+        ctx.closePath()
+        ctx.fill()
+        ctx.stroke()
+      }
+    }
+    if (labels.length > 0) {
+      setFont(fontSize)
       ctx.textAlign = 'center'
       ctx.textBaseline = 'middle'
-      for (const { band, xStart, w, t, head, fill } of placed) {
-        // asking for the label here rather than in the pass above keeps the
-        // once-per-block segment numbering in drawing order
-        const label = labelOf!(band)
-        // the head narrows to a point, so only about half of it holds text
-        if (
-          label !== undefined &&
-          ctx.measureText(label).width + 2 <= w - head / 2
-        ) {
-          labelDrawn?.(band)
-          ctx.fillStyle = contrastText(fill)
-          ctx.fillText(label, xStart + w / 2, t + h / 2)
-        }
+      for (const { text, x, y, fill } of labels) {
+        ctx.fillStyle = contrastText(fill)
+        ctx.fillText(text, x, y)
       }
     }
   }
 }
 
 /**
- * A gene arrow, drawn the way gggenes and gggenomes draw one: the head is the
- * last `head` pixels *of* the feature, tapering to a point at its end, and a
- * feature shorter than the head is all head. The glyph therefore covers its
+ * A gene arrow's outline, the way gggenes and gggenomes draw one: the head is
+ * the last `head` pixels *of* the feature, tapering to a point at its end, and
+ * a feature shorter than the head is all head. The glyph therefore covers its
  * start..end span and nothing else, so adjacent genes butt together instead of
  * biting triangles out of each other, a neighbour never draws over a label, and
  * a gene 20 columns wide reads as 20 columns wide.
  *
  * `rise` lifts the head above the band, for a bar too thin to taper.
  */
-function drawGeneArrow({
-  ctx,
+function geneArrow({
   x,
   t,
   w,
@@ -169,7 +254,6 @@ function drawGeneArrow({
   rise,
   strand,
 }: {
-  ctx: RenderCtx
   x: number
   t: number
   w: number
@@ -177,29 +261,26 @@ function drawGeneArrow({
   head: number
   rise: number
   strand: number
-}) {
+}): [number, number][] {
   const tip = strand > 0 ? x + w : x
   const tail = strand > 0 ? x : x + w
   const flange = strand > 0 ? tip - head : tip + head
   const bottom = t + h
   const crown = t - rise
   const point = (crown + bottom) / 2
-  ctx.beginPath()
   if (head >= w) {
-    ctx.moveTo(tail, crown)
-    ctx.lineTo(tip, point)
-    ctx.lineTo(tail, bottom)
-  } else {
-    ctx.moveTo(tail, t)
-    ctx.lineTo(flange, t)
-    if (rise > 0) {
-      ctx.lineTo(flange, crown)
-    }
-    ctx.lineTo(tip, point)
-    ctx.lineTo(flange, bottom)
-    ctx.lineTo(tail, bottom)
+    return [
+      [tail, crown],
+      [tip, point],
+      [tail, bottom],
+    ]
   }
-  ctx.closePath()
-  ctx.fill()
-  ctx.stroke()
+  return [
+    [tail, t],
+    [flange, t],
+    ...(rise > 0 ? [[flange, crown] as [number, number]] : []),
+    [tip, point],
+    [flange, bottom],
+    [tail, bottom],
+  ]
 }

package/src/components/msa/msaRaster.ts

@@ -242,17 +242,30 @@ function usableRasterCtx(ctx: unknown): ctx is RasterCtx {
   )
 }
 
-function makeRasterCanvas(width: number, height: number) {
+/**
+ * A canvas off the page, an OffscreenCanvas where there is one, with its 2d
+ * context, or undefined where the context fails `usable` (jsdom has none).
+ */
+export function makeOffscreenCanvas<Ctx>(
+  width: number,
+  height: number,
+  usable: (ctx: unknown) => ctx is Ctx,
+  settings?: CanvasRenderingContext2DSettings,
+) {
   const canvas =
     typeof OffscreenCanvas !== 'undefined'
       ? new OffscreenCanvas(width, height)
       : typeof document !== 'undefined'
         ? Object.assign(document.createElement('canvas'), { width, height })
         : undefined
-  const ctx = canvas?.getContext('2d', { willReadFrequently: true })
-  return usableRasterCtx(ctx)
-    ? { canvas: canvas as RasterCanvas, ctx }
-    : undefined
+  const ctx = canvas?.getContext('2d', settings)
+  return usable(ctx) ? { canvas: canvas as RasterCanvas, ctx } : undefined
+}
+
+function makeRasterCanvas(width: number, height: number) {
+  return makeOffscreenCanvas(width, height, usableRasterCtx, {
+    willReadFrequently: true,
+  })
 }
 
 function paint(
@@ -272,11 +285,16 @@ function paint(
 
 let supported: boolean | undefined
 
-// jsdom, and any browser without a 2d context, has no raster to draw; the
-// per-cell painter in renderMSABlock stays the fallback
-export function rasterSupported() {
+/**
+ * Whether the alignment background comes from the raster: true with
+ * background coloring on, the domain overlay off, and a 2d context that reads
+ * back, which jsdom lacks. renderMSABlock paints each cell otherwise.
+ */
+export function rasterApplies(
+  model: Pick<MsaViewModel, 'actuallyShowDomains' | 'bgColor'>,
+) {
   supported ??= !!makeRasterCanvas(1, 1)
-  return supported
+  return !model.actuallyShowDomains && model.bgColor && supported
 }
 
 interface RasterCache {

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -3,9 +3,11 @@ import { contrastTextFn } from '../../util.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 import { drawFeatureSpans, spanRows } from './drawFeatureSpans.ts'
 
+import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
-import type { DomainBand } from '../../types.ts'
+import type { DomainBand, NodeWithIdsAndLength } from '../../types.ts'
 import type { RenderCtx } from '../renderCtx.ts'
+import type { SpanSource } from './drawFeatureSpans.ts'
 import type { Theme } from '@mui/material'
 
 export function renderBoxFeatureCanvasBlock({
@@ -27,11 +29,41 @@ export function renderBoxFeatureCanvasBlock({
   blockSizeXOverride?: number
   blockSizeYOverride?: number
 }) {
+  const { blockSize, rowHeight, highResScaleFactor, actuallyShowDomains } =
+    model
+  if (!actuallyShowDomains) {
+    return
+  }
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+  const bx = blockSizeXOverride ?? blockSize
+  const by = blockSizeYOverride ?? blockSize
+  ctx.resetTransform()
+  ctx.scale(k, k)
+  ctx.translate(-offsetX, rowHeight / 2 - offsetY)
+
+  drawFeatureSpans<DomainBand>({
+    ctx,
+    ...domainOverlaySource(
+      model,
+      getVisibleLeaves({ model, offsetY, blockSizeY: by }),
+    ),
+    contrastText: contrastTextFn(theme),
+    xMin: offsetX,
+    xMax: offsetX + bx,
+  })
+}
+
+/**
+ * The domain overlay's spans over `leaves`, in alignment pixels: filled rows,
+ * an underline bar, or thin sub-rows, as `domainUnderline` and
+ * `subFeatureRows` decide.
+ */
+export function domainOverlaySource(
+  model: MsaViewModel,
+  leaves: HierarchyNode<NodeWithIdsAndLength>[],
+): SpanSource<DomainBand> {
   const {
-    blockSize,
     rowHeight,
-    highResScaleFactor,
-    actuallyShowDomains,
     subFeatureRows,
     colWidth,
     featureColors,
@@ -41,16 +73,6 @@ export function renderBoxFeatureCanvasBlock({
     domainUnderline,
     domainBands,
   } = model
-  if (!actuallyShowDomains) {
-    return
-  }
-  const k = highResScaleFactorOverride ?? highResScaleFactor
-  const bx = blockSizeXOverride ?? blockSize
-  const by = blockSizeYOverride ?? blockSize
-  ctx.resetTransform()
-  ctx.scale(k, k)
-  ctx.translate(-offsetX, rowHeight / 2 - offsetY)
-
   // the plain and underline modes give every band the same height; a sub-row
   // band is thinner, and how thin depends on how many lanes its row needs
   const barHeight = domainUnderline
@@ -67,12 +89,8 @@ export function renderBoxFeatureCanvasBlock({
   // carrying the gene model are often not the first ones in the alignment
   const labelled = drawSegmentLabels ? new Set<string>() : undefined
 
-  drawFeatureSpans<DomainBand>({
-    ctx,
-    rows: spanRows(
-      getVisibleLeaves({ model, offsetY, blockSizeY: by }),
-      domainBands,
-    ),
+  return {
+    rows: spanRows(leaves, domainBands),
     layout: {
       // sub-rows are thin, but a row whose lanes would spill onto the row below
       // shares out the row height between them instead
@@ -98,8 +116,5 @@ export function renderBoxFeatureCanvasBlock({
         ? segmentLabels.get(band.annotation.accession)
         : undefined),
     labelDrawn: band => labelled?.add(band.annotation.accession),
-    contrastText: contrastTextFn(theme),
-    xMin: offsetX,
-    xMax: offsetX + bx,
-  })
+  }
 }

package/src/components/msa/renderHighlights.ts

@@ -215,8 +215,8 @@ export function renderSelection({
 
 /**
  * The overlay parts that come from the snapshot: the reference row's tint, a
- * bordered band per run of highlighted columns, the `highlights` layer and the
- * selected block. The live overlay draws these under its hover and click
+ * bordered band per run of highlighted columns and the `highlights` layer. The
+ * live overlay draws these under the selected block and its hover and click
  * bands; the SVG export draws only these.
  */
 export function renderPersistentHighlights({
@@ -255,5 +255,4 @@ export function renderPersistentHighlights({
   }
 
   renderHighlights({ ctx, model, theme, offsetX, offsetY, width, height })
-  renderSelection({ ctx, model, offsetX, offsetY, height })
 }

package/src/components/msa/renderMSAMouseover.ts

@@ -1,5 +1,8 @@
 import { clickColor, hoverColor, multiRowHoverColor } from '../overlayColors.ts'
-import { renderPersistentHighlights } from './renderHighlights.ts'
+import {
+  renderPersistentHighlights,
+  renderSelection,
+} from './renderHighlights.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { Theme } from '@mui/material'
@@ -49,6 +52,7 @@ export function renderMouseover({
     width,
     height,
   })
+  renderSelection({ ctx, model, offsetX: -scrollX, offsetY: -scrollY, height })
 
   // every tip under a hovered tree node stays lit
   ctx.fillStyle = multiRowHoverColor

package/src/components/renderCtx.ts

@@ -8,7 +8,6 @@ export type RenderCtx = Pick<
   CanvasRenderingContext2D,
   | 'arc'
   | 'beginPath'
-  | 'clearRect'
   | 'closePath'
   | 'fill'
   | 'fillRect'

package/src/components/rowpanels/renderFeaturePanel.ts

@@ -2,8 +2,14 @@ import { contrastTextFn } from '../../util.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 import { drawFeatureSpans, spanRows } from '../msa/drawFeatureSpans.ts'
 
+import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
-import type { ResolvedFeaturePanel, RowPanelSpan } from '../../types.ts'
+import type {
+  NodeWithIdsAndLength,
+  ResolvedFeaturePanel,
+  RowPanelSpan,
+} from '../../types.ts'
+import type { SpanSource } from '../msa/drawFeatureSpans.ts'
 import type { RenderCtx } from '../renderCtx.ts'
 import type { Theme } from '@mui/material'
 
@@ -46,10 +52,26 @@ export function renderFeaturePanel({
 
   drawFeatureSpans<RowPanelSpan>({
     ctx,
-    rows: spanRows(
+    ...featurePanelSource(
+      model,
+      panel,
       getVisibleLeaves({ model, offsetY, blockSizeY: by }),
-      panel.spans,
     ),
+    contrastText: contrastTextFn(theme),
+    xMin: 0,
+    xMax: panel.width,
+  })
+}
+
+/** a features panel's spans over `leaves`, in panel pixels, a lane apiece */
+export function featurePanelSource(
+  model: MsaViewModel,
+  panel: ResolvedFeaturePanel,
+  leaves: HierarchyNode<NodeWithIdsAndLength>[],
+): SpanSource<RowPanelSpan> {
+  const { rowHeight } = model
+  return {
+    rows: spanRows(leaves, panel.spans),
     layout: {
       height: laneCount => Math.max(1, rowHeight / laneCount - rowPadding),
       top: (y, lane, h) =>
@@ -59,8 +81,5 @@ export function renderFeaturePanel({
     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/tracks/drawTracks.ts

@@ -9,7 +9,7 @@ import type { Arc, BasicTrack } from '../../types.ts'
 import type { RenderCtx } from '../renderCtx.ts'
 import type { Theme } from '@mui/material'
 
-export function drawConservationBars({
+function drawConservationBars({
   ctx,
   values,
   color,
@@ -55,7 +55,7 @@ export function barTrackValues(model: MsaViewModel, trackId: string) {
 
 // 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({
+function drawArcs({
   ctx,
   arcs,
   color,
@@ -103,7 +103,7 @@ export function drawArcs({
   }
 }
 
-export function drawTextTrackContent({
+function drawTextTrackContent({
   ctx,
   data,
   colorScheme,
@@ -176,7 +176,7 @@ export function rulerCols(xStart: number, end: number, colWidth: number) {
 const RULER_FONT_SIZE = 10
 const TICK_HEIGHT = 4
 
-export function drawColumnRuler({
+function drawColumnRuler({
   ctx,
   numColumns,
   label,
@@ -229,7 +229,7 @@ export function drawColumnRuler({
 const CAP_HEIGHT_RATIO = 0.72
 const MIN_LETTER_PX = 3
 
-export function drawSequenceLogo({
+function drawSequenceLogo({
   ctx,
   colStats,
   colorScheme,