react-msaview 9.0.0 → 9.1.1

package/src/components/minimap/Minimap.tsx

@@ -1,18 +1,22 @@
 import React, { useCallback } from 'react'
 
-import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { useCanvasTheme } from '../../darkReader.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import DragHandle, { scrollbarThumbFill } from '../DragHandle.tsx'
 import { msaThumbnail } from '../msa/msaRaster.ts'
-import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
+import {
+  MINIMAP_BAR_HEIGHT,
+  getMinimapLayout,
+  minimapDomainRects,
+} from './minimapLayout.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   const { minimapHeight, msaCanvasWidth, highResScaleFactor } = model
-  const theme = useTheme()
+  const theme = useCanvasTheme()
   const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(model)
 
   // the whole alignment, sampled down to the bar
@@ -41,6 +45,10 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
           barHeight,
         )
       }
+      for (const r of minimapDomainRects(model, barWidth, barHeight)) {
+        ctx.fillStyle = r.fill
+        ctx.fillRect(r.x, r.y, r.w, r.h)
+      }
     },
     width: barWidth,
     height: barHeight,

package/src/components/minimap/MinimapSVG.tsx

@@ -2,7 +2,11 @@ import React from 'react'
 
 import { scrollbarThumbFill } from '../DragHandle.tsx'
 import { canvasHref, msaThumbnail } from '../msa/msaRaster.ts'
-import { MINIMAP_BAR_HEIGHT, getMinimapLayout } from './minimapLayout.ts'
+import {
+  MINIMAP_BAR_HEIGHT,
+  getMinimapLayout,
+  minimapDomainRects,
+} from './minimapLayout.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { Theme } from '@mui/material'
@@ -37,6 +41,18 @@ export default function MinimapSVG({
           preserveAspectRatio="none"
         />
       ) : null}
+      {minimapDomainRects(model, msaCanvasWidth, MINIMAP_BAR_HEIGHT).map(
+        ({ x, y, w, h, fill }) => (
+          <rect
+            key={`${x},${y},${w},${fill}`}
+            x={x}
+            y={y}
+            width={w}
+            height={h}
+            fill={fill}
+          />
+        ),
+      )}
       <rect
         x={0}
         y={0}

package/src/components/minimap/minimapLayout.ts

@@ -19,3 +19,30 @@ export function getMinimapLayout(model: MsaViewModel) {
   const polygonPoints = `${s + w},0 ${s},0 0,${polygonHeight} ${msaCanvasWidth},${polygonHeight}`
   return { unit, s, w, polygonHeight, polygonPoints }
 }
+
+/**
+ * The domain overlay's boxes scaled onto the minimap bar, one per row's band,
+ * in the colors the alignment draws them, so the overview shows the domains
+ * the alignment does. Empty unless the domains fill the cells.
+ */
+export function minimapDomainRects(
+  model: MsaViewModel,
+  width: number,
+  height: number,
+) {
+  const { cellFill, domainBands, featureColors, leaves, numColumns } = model
+  if (cellFill !== 'domain' || numColumns <= 0 || leaves.length === 0) {
+    return []
+  }
+  const colUnit = width / numColumns
+  const rowUnit = height / leaves.length
+  return leaves.flatMap((leaf, row) =>
+    (domainBands.get(leaf.data.name) ?? []).map(band => ({
+      x: band.startCol * colUnit,
+      y: row * rowUnit,
+      w: Math.max(1, (band.endCol - band.startCol) * colUnit),
+      h: Math.max(1, rowUnit),
+      fill: featureColors.get(band.annotation)?.fill ?? 'grey',
+    })),
+  )
+}

package/src/components/msa/MSACanvas.tsx

@@ -3,8 +3,11 @@ import React, { useCallback, useRef } from 'react'
 import { observer } from 'mobx-react'
 
 import { useWheelScroll } from '../../useWheelScroll.ts'
+import { zoomSnapshotScale } from '../../zoomSnapshot.ts'
+import { alignmentAriaLabel } from '../controls.ts'
 import Loading from './Loading.tsx'
 import MSACanvasBlock from './MSACanvasBlock.tsx'
+import { WheelZoomHint, useWheelZoomHint } from './WheelZoomHint.tsx'
 import { onMsaKey } from './msaKeys.ts'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -19,7 +22,16 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
     scrollZoom,
     scrollX,
     scrollY,
+    zoomSnapshot,
   } = model
+  const blocks = zoomSnapshot
+    ? zoomSnapshot.blocksY.flatMap(by =>
+        zoomSnapshot.blocksX.map(bx => [bx, by] as const),
+      )
+    : blocks2d
+  const scale = zoomSnapshot
+    ? zoomSnapshotScale(model, zoomSnapshot)
+    : undefined
   const ref = useRef<HTMLDivElement>(null)
   const onScrollX = useCallback(
     (d: number) => {
@@ -35,15 +47,21 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
   const onZoom = useCallback(
     (scaleFactor: number, offsetX: number, offsetY: number) => {
-      model.zoomToPos(scaleFactor, offsetX, offsetY, model.wheelZoomAxis)
+      model.wheelZoomToPos(scaleFactor, offsetX, offsetY)
     },
     [model],
   )
+  const onZoomSettle = useCallback(() => {
+    model.endWheelZoom()
+  }, [model])
+  const hint = useWheelZoomHint(model)
   const { onMouseDown, onMouseUp } = useWheelScroll({
     ref,
     onScrollX,
     onScrollY,
     onZoom,
+    onZoomSettle,
+    onWheelScroll: hint.onWheelScroll,
     scrollZoom,
   })
 
@@ -54,7 +72,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       // col*colWidth + scrollX, row*rowHeight + scrollY
       data-testid="msa_canvas"
       tabIndex={0}
-      aria-label="Alignment. Arrow keys scroll, shift pages, + and - zoom, Home and End jump to the first and last column. Shift-drag selects cells, and Escape clears the selection."
+      aria-label={alignmentAriaLabel}
       onKeyDown={event => {
         if (onMsaKey(model, event)) {
           event.preventDefault()
@@ -87,11 +105,12 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
             position: 'absolute',
             top: 0,
             left: 0,
-            transform: `translate(${scrollX}px, ${scrollY}px)`,
+            transform: `translate(${scrollX}px, ${scrollY}px)${scale ? ` scale(${scale.sx}, ${scale.sy})` : ''}`,
+            transformOrigin: '0 0',
             willChange: 'transform',
           }}
         >
-          {blocks2d.map(([bx, by]) => (
+          {blocks.map(([bx, by]) => (
             <MSACanvasBlock
               key={`${bx}_${by}`}
               model={model}
@@ -103,6 +122,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       ) : (
         <Loading />
       )}
+      {hint.visible ? <WheelZoomHint /> : null}
     </div>
   )
 })

package/src/components/msa/MSACanvasBlock.tsx

@@ -1,16 +1,16 @@
-import React from 'react'
+import React, { useRef } from 'react'
 
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
-import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { useCanvasTheme } from '../../darkReader.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
-import { drawMsaRaster, rasterSupported } from './msaRaster.ts'
-import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
+import { drawMsaRaster, rasterApplies } from './msaRaster.ts'
 import { renderMSABlock } from './renderMSABlock.ts'
 import { useMsaBlockMouse } from './useMsaBlockMouse.ts'
 
 import type { MsaViewModel } from '../../model.ts'
+import type { ZoomSnapshot } from '../../zoomSnapshot.ts'
 
 const MSACanvasBlock = observer(function ({
   model,
@@ -22,27 +22,29 @@ const MSACanvasBlock = observer(function ({
   offsetY: number
 }) {
   const { blockSize, highResScaleFactor } = model
-  const theme = useTheme()
+  const theme = useCanvasTheme()
   const { anchor, onMouseMove, onMouseDown, onClick, onMouseLeave } =
     useMsaBlockMouse({ model, offsetX, offsetY })
 
   const canvasSize = blockSize * highResScaleFactor
+  const drawnAt = useRef<ZoomSnapshot>(undefined)
   const ref = useCanvasAutorun({
     draw: ctx => {
+      // during a wheel zoom MSACanvas scales what this block drew at the
+      // snapshot, so the block redraws only when a new snapshot is taken
+      const snap = model.zoomSnapshot
+      if (
+        snap &&
+        (snap === drawnAt.current ||
+          snap.colWidth !== model.colWidth ||
+          snap.rowHeight !== model.rowHeight)
+      ) {
+        return
+      }
+      drawnAt.current = snap
       ctx.resetTransform()
       ctx.clearRect(0, 0, canvasSize, canvasSize)
-      renderBoxFeatureCanvasBlock({
-        ctx,
-        theme,
-        offsetX,
-        offsetY,
-        model,
-      })
-      // the alignment background comes from zoom-independent raster tiles; the
-      // domain overlay paints its own boxes instead, and letter-color mode has
-      // no background to paint
-      const rasterTiles =
-        !model.actuallyShowDomains && model.bgColor && rasterSupported()
+      const rasterTiles = rasterApplies(model)
       if (rasterTiles) {
         drawMsaRaster({ ctx, model, theme, offsetX, offsetY })
       }
@@ -53,6 +55,7 @@ const MSACanvasBlock = observer(function ({
         offsetY,
         model,
         rasterTiles,
+        domains: true,
       })
     },
     width: canvasSize,

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 
 import { isAlive } from '@jbrowse/mobx-state-tree'
-import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { msaOverlayZIndex } from '../../constants.ts'
+import { useCanvasTheme } from '../../darkReader.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { renderMouseover } from './renderMSAMouseover.ts'
 
@@ -16,7 +16,7 @@ const MSAMouseoverCanvas = observer(function ({
   model: MsaViewModel
 }) {
   const { height, msaCanvasWidth: width, highResScaleFactor } = model
-  const theme = useTheme()
+  const theme = useCanvasTheme()
   const canvasWidth = width * highResScaleFactor
   const canvasHeight = height * highResScaleFactor
   const ref = useCanvasAutorun({

package/src/components/msa/WheelZoomHint.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback, useRef, useState } from 'react'
+
+import { Paper, Typography } from '@mui/material'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const hinted = new WeakSet<MsaViewModel>()
+
+const zoomKey =
+  typeof navigator !== 'undefined' && navigator.platform.startsWith('Mac')
+    ? '⌘'
+    : 'Ctrl'
+
+export function useWheelZoomHint(model: MsaViewModel) {
+  const [visible, setVisible] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)
+  const onWheelScroll = useCallback(
+    (event: WheelEvent) => {
+      if (
+        !model.scrollZoom &&
+        Math.abs(event.deltaY) > Math.abs(event.deltaX) &&
+        !hinted.has(model)
+      ) {
+        hinted.add(model)
+        setVisible(true)
+        clearTimeout(timer.current)
+        timer.current = setTimeout(() => {
+          setVisible(false)
+        }, 2500)
+      }
+    },
+    [model],
+  )
+  return { visible, onWheelScroll }
+}
+
+export function WheelZoomHint() {
+  return (
+    <Paper
+      elevation={3}
+      style={{
+        position: 'absolute',
+        top: 12,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        padding: '4px 12px',
+        pointerEvents: 'none',
+        zIndex: 2,
+      }}
+    >
+      <Typography variant="body2">
+        {zoomKey} + scroll to zoom, or check Zoom on scroll
+      </Typography>
+    </Paper>
+  )
+}

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

@@ -27,6 +27,9 @@ export function onMsaKey(
     case '-':
       model.zoomOut()
       return true
+    case '0':
+      model.resetZoom()
+      return true
     case 'Home':
       model.setScrollX(0)
       return true