react-msaview 7.0.0 → 8.1.0

package/src/components/msa/AnnotationLegend.tsx

@@ -5,6 +5,9 @@ import ExpandMore from '@mui/icons-material/ExpandMore'
 import { IconButton, Paper, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { legendZIndex } from '../../constants.ts'
+import { legendRows } from './legendRows.ts'
+
 import type { MsaViewModel } from '../../model.ts'
 
 const AnnotationLegend = observer(function ({
@@ -12,65 +15,72 @@ const AnnotationLegend = observer(function ({
 }: {
   model: MsaViewModel
 }) {
-  const {
-    actuallyShowDomains,
-    visibleDomainTypes: visible,
-    fillPalette,
-    showDomainLegend: expanded,
-  } = model
+  const { legends, showDomainLegend: expanded } = model
+  const rows = legendRows(legends)
   const ExpandIcon = expanded ? ExpandLess : ExpandMore
 
-  return actuallyShowDomains && visible.length > 0 ? (
+  return rows.length > 0 ? (
     <Paper
       elevation={3}
       style={{
         position: 'absolute',
         top: 4,
         right: 4,
-        zIndex: 100,
-        maxWidth: 260,
+        zIndex: legendZIndex,
+        maxWidth: 220,
         maxHeight: '60%',
         display: 'flex',
         flexDirection: 'column',
         opacity: 0.95,
       }}
     >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'flex-end',
-          padding: '2px 4px 2px 8px',
+      <IconButton
+        size="small"
+        title={expanded ? 'Collapse key' : 'Expand key'}
+        style={
+          expanded
+            ? { position: 'absolute', top: 0, right: 0, padding: 1 }
+            : { padding: 1 }
+        }
+        onClick={() => {
+          model.setShowDomainLegend(!expanded)
         }}
       >
-        <IconButton
-          size="small"
-          title={expanded ? 'Collapse key' : 'Expand key'}
-          onClick={() => {
-            model.setShowDomainLegend(!expanded)
-          }}
-        >
-          <ExpandIcon fontSize="small" />
-        </IconButton>
-      </div>
+        <ExpandIcon style={{ fontSize: 14 }} />
+      </IconButton>
       {expanded ? (
-        <div style={{ overflow: 'auto', padding: '0 8px 6px' }}>
-          {visible.map(({ accession, name }) => (
+        <div style={{ overflow: 'auto', padding: '2px 6px 4px' }}>
+          {rows.map((row, i) => (
             <div
-              key={accession}
-              style={{ display: 'flex', alignItems: 'center', gap: 6 }}
-              title={accession}
+              key={row.key}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+                marginRight: i === 0 ? 18 : 0,
+              }}
+              title={row.hint}
             >
-              <div
+              {row.color ? (
+                <div
+                  style={{
+                    width: 9,
+                    height: 9,
+                    flexShrink: 0,
+                    background: row.color,
+                  }}
+                />
+              ) : null}
+              <Typography
+                variant="caption"
+                noWrap
                 style={{
-                  width: 12,
-                  height: 12,
-                  flexShrink: 0,
-                  background: fillPalette[accession],
+                  fontSize: 10,
+                  lineHeight: 1.4,
+                  fontWeight: row.color ? undefined : 'bold',
                 }}
-              />
-              <Typography variant="caption" noWrap>
-                {name}
+              >
+                {row.label}
               </Typography>
             </div>
           ))}

package/src/components/msa/MSACanvas.tsx

@@ -34,7 +34,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
   const onZoom = useCallback(
     (scaleFactor: number, offsetX: number, offsetY: number) => {
-      model.zoomToPos(scaleFactor, offsetX, offsetY)
+      model.zoomToPos(scaleFactor, offsetX, offsetY, model.wheelZoomAxis)
     },
     [model],
   )
@@ -49,16 +49,11 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <div
       ref={ref}
-      // the MSA viewport: its rect is the origin every column/row offset is
-      // measured from (col*colWidth + scrollX, row*rowHeight + scrollY), which
-      // is what lets a screenshot callout anchor to an alignment column instead
-      // of a hand-measured pixel
+      // screenshot callouts anchor to columns from this rect's origin:
+      // col*colWidth + scrollX, row*rowHeight + scrollY
       data-testid="msa_canvas"
       onMouseDown={onMouseDown}
       onMouseUp={onMouseUp}
-      onMouseLeave={event => {
-        event.preventDefault()
-      }}
       style={{
         position: 'relative',
         height,

package/src/components/msa/MSACanvasBlock.tsx

@@ -5,7 +5,6 @@ import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
-import ColumnStats from './ColumnStats.tsx'
 import { drawMsaRaster, rasterSupported } from './msaRaster.ts'
 import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
 import { renderMSABlock } from './renderMSABlock.ts'
@@ -39,6 +38,7 @@ const MSACanvasBlock = observer(function ({
       ctx.clearRect(0, 0, canvasSize, canvasSize)
       renderBoxFeatureCanvasBlock({
         ctx,
+        theme,
         offsetX,
         offsetY,
         model,
@@ -65,7 +65,7 @@ const MSACanvasBlock = observer(function ({
     deps: [model, offsetX, offsetY, theme],
   })
 
-  const { hoveredInsertion, mouseOverDomains, showColumnStats } = model
+  const { hoveredInsertion, mouseOverDomains } = model
 
   return (
     <>
@@ -107,20 +107,17 @@ const MSACanvasBlock = observer(function ({
                 : hoveredInsertion.letters}
             </>
           ) : (
-            <>
-              {mouseOverDomains.map(d => (
-                <div key={`${d.accession}-${d.start}-${d.end}`}>
-                  <b>{d.name}</b> ({d.accession}) {d.start}-{d.end}
-                  {d.description ? (
-                    <>
-                      <br />
-                      {d.description}
-                    </>
-                  ) : null}
-                </div>
-              ))}
-              {showColumnStats ? <ColumnStats model={model} /> : null}
-            </>
+            mouseOverDomains.map(d => (
+              <div key={`${d.accession}-${d.start}-${d.end}`}>
+                <b>{d.name}</b> ({d.accession}) {d.start}-{d.end}
+                {d.description ? (
+                  <>
+                    <br />
+                    {d.description}
+                  </>
+                ) : null}
+              </div>
+            ))
           )}
         </BaseTooltip>
       ) : null}

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -4,6 +4,7 @@ import { isAlive } from '@jbrowse/mobx-state-tree'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import { msaOverlayZIndex } from '../../constants.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { renderMouseover } from './renderMSAMouseover.ts'
 
@@ -41,7 +42,7 @@ const MSAMouseoverCanvas = observer(function ({
         left: 0,
         width,
         height,
-        zIndex: 1000,
+        zIndex: msaOverlayZIndex,
         pointerEvents: 'none',
       }}
     />

package/src/components/msa/domainBandCursor.ts

@@ -1,19 +1,15 @@
 import type { DomainBand } from '../../types.ts'
 
 /**
- * Left-to-right cursor over one row's domain bands, answering "which band is
- * drawn on top at this column" — the fill a letter there has to contrast
- * against.
+ * Left-to-right cursor over one row's domain bands that returns the band drawn
+ * on top at a column, for a letter's contrast color.
  *
- * Not simply the first band covering the column. The overlay paints in
- * `domainBands` order, largest first, so where signatures nest — a family
- * enclosing a domain, which InterProScan emits routinely — the box a reader
- * actually sees is the last one painted over that column. `stackIndex` is that
- * paint order.
+ * The overlay paints in `domainBands` order, largest first, so where signatures
+ * nest (InterProScan often emits a family enclosing a domain) the visible band
+ * is the last one painted. `stackIndex` is that paint order.
  *
- * `bands` must be sorted by start column (`domainBandsByStart`), and columns
- * must be visited in increasing order, which is what the block renderer does.
- * Both keep this to one pass over the bands per row rather than a scan per cell.
+ * `bands` must be sorted by start column (`domainBandsByStart`) and columns
+ * visited in increasing order, which keeps this to one pass per row.
  */
 export function domainBandCursor(bands: DomainBand[] | undefined) {
   let next = 0

package/src/components/msa/drawFeatureSpans.ts

@@ -0,0 +1,205 @@
+import { minFeatureLabelHeight } from '../../constants.ts'
+
+import type { HierarchyNode } from '../../hierarchy.ts'
+import type { Annotation, NodeWithIdsAndLength } from '../../types.ts'
+import type { RenderCtx } from '../renderCtx.ts'
+
+/** one drawn span: a feature, the lane it sits in, and its row's depth */
+export interface SpanBand {
+  annotation: Annotation
+  lane: number
+  laneCount: number
+}
+
+/** one row's spans, at the row baseline `y` the tree layout gives it */
+export interface SpanRow<T extends SpanBand> {
+  y: number
+  bands: T[]
+}
+
+/**
+ * Where a band lands inside its row. The alignment overlay fills the row, bars
+ * it along the bottom, or stacks thin sub-rows; a `features` row panel divides
+ * the row between its lanes.
+ */
+export interface SpanLayout {
+  /** the band height in a row needing `laneCount` lanes */
+  height: (laneCount: number) => number
+  /** the band's top edge, from its row baseline, its lane and its height */
+  top: (y: number, lane: number, height: number) => number
+  /** how far back from the feature's end the head starts */
+  headLength: (height: number) => number
+  /**
+   * how far the head rises above the band. A bar too thin to taper reads its
+   * direction off a head taller than itself, and the bar sits on the row's
+   * bottom edge, so the room is above.
+   */
+  headRise?: (height: number) => number
+}
+
+/** the rows of `bandsByRow` that `leaves` covers, in display order */
+export function spanRows<T extends SpanBand>(
+  leaves: HierarchyNode<NodeWithIdsAndLength>[],
+  bandsByRow: Map<string, T[]>,
+): SpanRow<T>[] {
+  const rows: SpanRow<T>[] = []
+  for (const leaf of leaves) {
+    const bands = bandsByRow.get(leaf.data.name)
+    if (bands && bands.length > 0) {
+      rows.push({ y: leaf.x!, bands })
+    }
+  }
+  return rows
+}
+
+/**
+ * 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.
+ *
+ * `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.
+ */
+export function drawFeatureSpans<T extends SpanBand>({
+  ctx,
+  rows,
+  layout,
+  xOf,
+  colors,
+  labelOf,
+  labelDrawn,
+  contrastText,
+  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
+  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
+  }[] = []
+
+  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
+
+    for (const band of bands) {
+      const [xStart, xEnd] = xOf(band)
+      const w = xEnd - xStart
+      if (xEnd < xMin || xStart > xMax) {
+        continue
+      }
+      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 })
+      }
+      if (labelled) {
+        placed.push({ band, xStart, w, t, head, fill })
+      }
+    }
+
+    if (placed.length > 0) {
+      ctx.font = `${Math.min(h - 2, 11)}px sans-serif`
+      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)
+        }
+      }
+    }
+  }
+}
+
+/**
+ * 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
+ * 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,
+  x,
+  t,
+  w,
+  h,
+  head,
+  rise,
+  strand,
+}: {
+  ctx: RenderCtx
+  x: number
+  t: number
+  w: number
+  h: number
+  head: number
+  rise: number
+  strand: 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)
+  }
+  ctx.closePath()
+  ctx.fill()
+  ctx.stroke()
+}

package/src/components/msa/legendRows.ts

@@ -0,0 +1,24 @@
+import type { Legend } from '../../types.ts'
+
+export interface LegendRow {
+  key: string
+  label: string
+  color?: string
+  hint?: string
+}
+
+// the legends flattened into the rows both the overlay and the export stack
+// top to bottom. A title row separates one legend from the next, and a lone
+// legend needs no title.
+export function legendRows(legends: Legend[]): LegendRow[] {
+  const titled = legends.length > 1
+  return legends.flatMap(legend => [
+    ...(titled ? [{ key: legend.id, label: legend.title }] : []),
+    ...legend.entries.map(entry => ({
+      key: `${legend.id}:${entry.id}`,
+      label: entry.label,
+      color: entry.color,
+      hint: entry.id,
+    })),
+  ])
+}

package/src/components/msa/msaRaster.ts

@@ -36,9 +36,8 @@ const colorCache = new Map<string, number>()
 
 /**
  * CSS color string -> the packed pixel an ImageData holds for it. Painting a 1x1
- * canvas and reading it back handles every form a color scheme can produce --
- * hex, rgb(), hsl(), named -- without a parser of our own, and the cache means
- * each distinct color is resolved once per session rather than once per cell.
+ * canvas and reading it back parses hex, rgb(), hsl() and named colors; the
+ * cache resolves each distinct color once per session.
  */
 export function cssColorToPixel(css: string) {
   const hit = colorCache.get(css)
@@ -80,13 +79,12 @@ function cellPixelFn(spec: RasterSpec, toPixel: (css: string) => number) {
 /**
  * Packs a rectangle of the alignment into one pixel per cell, in `rowNames`
  * order, ready to hand to putImageData. Cells past the end of a row, and rows
- * with no sequence at all, stay transparent -- what the per-cell tile painter
- * also leaves behind.
+ * with no sequence, stay transparent, as in the per-cell painter.
  *
- * `colStep`/`rowStep` sample instead of covering, which is how the minimap fits
- * a whole alignment into a 12px bar. `colSpan`/`rowSpan` average each block of
- * that many cells into one pixel instead, so a zoom below a device pixel per
- * column still shows every column's color without blending neighbouring rows.
+ * `colStep`/`rowStep` sample every nth cell, which fits a whole alignment into
+ * the minimap's 12px bar. `colSpan`/`rowSpan` average each block of that many
+ * cells into one pixel, so a zoom below a device pixel per column still shows
+ * every column's color without blending neighbouring rows.
  */
 export function rasterPixels({
   spec,
@@ -292,8 +290,8 @@ interface RasterCache {
 
 const caches = new WeakMap<object, RasterCache>()
 
-// Everything a cell's color depends on. A change to any of them makes every
-// cached tile stale, which a fresh cache expresses without tracking which.
+// Everything a cell's color depends on; a change to any of them starts a fresh
+// cache.
 function rasterKeys(model: MsaViewModel, theme: Theme) {
   return [
     model.columns,
@@ -402,13 +400,12 @@ function getTile({
 /**
  * Paints the alignment background of one MSA block from cached
  * one-pixel-per-cell tiles. The tiles do not depend on the zoom level, so a zoom
- * frame costs a handful of drawImage calls instead of a fillRect per visible
- * cell -- which ran to 885ms per block at the minimum column width.
+ * frame costs a handful of drawImage calls. A fillRect per visible cell measured
+ * 885ms per block at the minimum column width.
  *
- * Below a device pixel per cell the tiles average cells together instead, and
- * only along the axis that needs it. Leaving the downsampling to the browser's
- * image smoothing blurred both axes at once: at fit-to-width, where only the
- * columns are narrow, every row boundary turned into a gradient.
+ * Below a device pixel per cell the tiles average cells together, per axis.
+ * The browser's image smoothing blurs both axes, which turns every row
+ * boundary into a gradient at fit-to-width, where only the columns are narrow.
  */
 export function drawMsaRaster({
   ctx,
@@ -467,12 +464,11 @@ export function drawMsaRaster({
 /**
  * A raster canvas as a PNG data URI, for embedding in the SVG export.
  *
- * toDataURL is the synchronous read-back. The DOM canvas has it, and so does a
- * node canvas standing in for OffscreenCanvas headlessly; a browser
- * OffscreenCanvas -- which is what the tile and thumbnail caches hold wherever
- * it exists -- gets copied onto a DOM canvas first. Returns undefined wherever
- * the read-back is unavailable (jsdom) rather than throwing, which is the
- * signal to fall back to drawing the thing in vector.
+ * toDataURL is the synchronous read-back. The DOM canvas and a headless node
+ * canvas have it; a browser OffscreenCanvas, which the tile and thumbnail
+ * caches hold where it exists, is copied onto a DOM canvas first. Returns
+ * undefined where read-back is unavailable (jsdom), and the caller then draws
+ * in vector.
  */
 export function canvasHref(canvas: RasterCanvas | undefined) {
   if (!canvas) {
@@ -499,12 +495,10 @@ export function canvasHref(canvas: RasterCanvas | undefined) {
   }
 }
 
-// A canvas much past this many pixels fails to allocate, and the browser's own
-// per-side limit is lower still, so a raster bigger than either averages down,
-// per axis: an alignment wide enough to hit the limit on columns alone keeps
-// every row.
-// The result is still drawn across the same rectangle -- it loses cell-exact
-// detail at a size where no figure could show it anyway.
+// A canvas much past this many pixels fails to allocate, and the browser's
+// per-side limit is lower still, so a larger raster averages down per axis and
+// is drawn across the same rectangle. An alignment that hits the limit on
+// columns alone keeps every row.
 const maxImagePixels = 64e6
 const maxImageSide = 16384
 
@@ -512,14 +506,12 @@ const maxImageSide = 16384
  * The alignment rectangle [col0, col0+numCols) x [row0, row0+numRows) as a PNG
  * data URI, for the SVG export.
  *
- * SVG has no blit, so the export cannot reuse the tile cache the live canvas
- * draws from: one <image> is the whole background instead. That is the
- * difference between an export that scales and one that does not -- the vector
- * path emits a <rect> per cell, and a 200x500 alignment exhausts the heap
- * building them.
+ * SVG has no blit, so the export draws the whole background as one <image>. The
+ * vector path emits a <rect> per cell, and a 200x500 alignment exhausts the
+ * heap building them.
  *
- * Returns undefined wherever a canvas cannot be read back (jsdom, notably),
- * which is the signal to keep the per-cell path.
+ * Returns undefined where a canvas cannot be read back (jsdom), and the caller
+ * then keeps the per-cell path.
  */
 export function rasterImageHref({
   model,
@@ -578,9 +570,8 @@ export function rasterImageHref({
 }
 
 /**
- * The whole alignment sampled down to a strip small enough to sit behind the
- * minimap thumb, cached alongside the block tiles because it goes stale under
- * exactly the same conditions.
+ * The whole alignment sampled down to a strip behind the minimap thumb, cached
+ * with the block tiles since the same keys invalidate both.
  */
 export function msaThumbnail({
   model,

package/src/components/msa/packDomainLanes.ts

@@ -0,0 +1,36 @@
+/**
+ * Assigns each of one row's bands a lane: the first lane whose last band ends
+ * before this one starts, so only bands that actually overlap stack. A row of
+ * adjacent exons packs into a single lane; a family with a domain nested inside
+ * it takes two.
+ *
+ * Packing runs left to right, but the result keeps the input's largest-first
+ * paint order. `laneCount` is the row's depth, which the renderer divides the
+ * row height by so a deep stack stays inside its own row.
+ *
+ * The coordinates are whatever the caller packs in: alignment columns for the
+ * overlay, residue positions for a `features` row panel.
+ */
+export function packDomainLanes<T extends { startCol: number; endCol: number }>(
+  bands: T[],
+): (T & { lane: number; laneCount: number })[] {
+  const laneEnds: number[] = []
+  const lanes = new Array<number>(bands.length)
+  const byStart = bands
+    .map((_, i) => i)
+    .sort((a, b) => bands[a]!.startCol - bands[b]!.startCol)
+
+  for (const i of byStart) {
+    const { startCol, endCol } = bands[i]!
+    const found = laneEnds.findIndex(end => end <= startCol)
+    const lane = found === -1 ? laneEnds.length : found
+    laneEnds[lane] = endCol
+    lanes[i] = lane
+  }
+
+  return bands.map((band, i) => ({
+    ...band,
+    lane: lanes[i]!,
+    laneCount: laneEnds.length,
+  }))
+}