react-msaview 6.5.0 → 7.0.0

package/src/components/msa/msaRaster.ts

@@ -63,6 +63,20 @@ export function cssColorToPixel(css: string) {
   return packed
 }
 
+function cellPixelFn(spec: RasterSpec, toPixel: (css: string) => number) {
+  const { columns, relativeTo, colorAt, bg, hover } = spec
+  const bgPixel = toPixel(bg)
+  const hoverPixel = toPixel(hover)
+  const reference = relativeTo ? columns.get(relativeTo) : undefined
+  return (name: string, col: number, letter: string) => {
+    if (reference && name !== relativeTo && letter === reference[col]) {
+      return hoverPixel
+    }
+    const color = colorAt(col, letter)
+    return color === undefined ? bgPixel : toPixel(color)
+  }
+}
+
 /**
  * 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
@@ -70,7 +84,9 @@ export function cssColorToPixel(css: string) {
  * also leaves behind.
  *
  * `colStep`/`rowStep` sample instead of covering, which is how the minimap fits
- * a whole alignment into a 12px bar.
+ * 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.
  */
 export function rasterPixels({
   spec,
@@ -80,7 +96,10 @@ export function rasterPixels({
   height,
   colStep = 1,
   rowStep = 1,
+  colSpan = 1,
+  rowSpan = 1,
   toPixel = cssColorToPixel,
+  out = new Uint32Array(width * height),
 }: {
   spec: RasterSpec
   col0: number
@@ -89,13 +108,27 @@ export function rasterPixels({
   height: number
   colStep?: number
   rowStep?: number
+  colSpan?: number
+  rowSpan?: number
   toPixel?: (css: string) => number
+  out?: Uint32Array
 }) {
-  const { rowNames, columns, relativeTo, colorAt, bg, hover } = spec
-  const out = new Uint32Array(width * height)
-  const bgPixel = toPixel(bg)
-  const hoverPixel = toPixel(hover)
-  const reference = relativeTo ? columns.get(relativeTo) : undefined
+  if (colSpan > 1 || rowSpan > 1) {
+    averagePixels({
+      spec,
+      col0,
+      row0,
+      width,
+      height,
+      colSpan,
+      rowSpan,
+      toPixel,
+      out,
+    })
+    return out
+  }
+  const { rowNames, columns } = spec
+  const cellPixel = cellPixelFn(spec, toPixel)
 
   for (let r = 0; r < height; r++) {
     const name = rowNames[row0 + r * rowStep]
@@ -106,7 +139,6 @@ export function rasterPixels({
     if (!str) {
       continue
     }
-    const isReference = name === relativeTo
     const base = r * width
     for (let c = 0; c < width; c++) {
       const col = col0 + c * colStep
@@ -114,21 +146,92 @@ export function rasterPixels({
       if (letter === undefined) {
         break
       }
-      if (reference && !isReference && letter === reference[col]) {
-        out[base + c] = hoverPixel
-      } else {
-        const color = colorAt(col, letter)
-        out[base + c] = color === undefined ? bgPixel : toPixel(color)
-      }
+      out[base + c] = cellPixel(name, col, letter)
     }
   }
   return out
 }
 
-// Getting a context object back is not the same as getting one that can do
-// this: the headless render shim hands back a context carrying only measureText,
-// which a truthiness test accepts and putImageData then does not survive. Name
-// the methods the raster actually calls, so every caller degrades together.
+function averagePixels({
+  spec,
+  col0,
+  row0,
+  width,
+  height,
+  colSpan,
+  rowSpan,
+  toPixel,
+  out,
+}: {
+  spec: RasterSpec
+  col0: number
+  row0: number
+  width: number
+  height: number
+  colSpan: number
+  rowSpan: number
+  toPixel: (css: string) => number
+  out: Uint32Array
+}) {
+  const { rowNames, columns } = spec
+  const cellPixel = cellPixelFn(spec, toPixel)
+  const cells = colSpan * rowSpan
+  const rShift = littleEndian ? 0 : 24
+  const gShift = littleEndian ? 8 : 16
+  const bShift = littleEndian ? 16 : 8
+  const aShift = littleEndian ? 24 : 0
+  const names: string[] = []
+  const strs: string[] = []
+
+  for (let r = 0; r < height; r++) {
+    names.length = 0
+    strs.length = 0
+    for (let dr = 0; dr < rowSpan; dr++) {
+      const name = rowNames[row0 + r * rowSpan + dr]
+      const str = name === undefined ? undefined : columns.get(name)
+      if (name !== undefined && str) {
+        names.push(name)
+        strs.push(str)
+      }
+    }
+    const base = r * width
+    for (let c = 0; c < width; c++) {
+      // premultiplied, so a cell past the end of a row dilutes the alpha of its
+      // pixel rather than darkening its color
+      let sumR = 0
+      let sumG = 0
+      let sumB = 0
+      let sumA = 0
+      for (let i = 0; i < strs.length; i++) {
+        const str = strs[i]!
+        const name = names[i]!
+        for (let dc = 0; dc < colSpan; dc++) {
+          const col = col0 + c * colSpan + dc
+          const letter = str[col]
+          if (letter === undefined) {
+            break
+          }
+          const p = cellPixel(name, col, letter)
+          const a = (p >>> aShift) & 255
+          sumR += ((p >>> rShift) & 255) * a
+          sumG += ((p >>> gShift) & 255) * a
+          sumB += ((p >>> bShift) & 255) * a
+          sumA += a
+        }
+      }
+      out[base + c] =
+        sumA === 0
+          ? 0
+          : packRgba(
+              Math.round(sumR / sumA),
+              Math.round(sumG / sumA),
+              Math.round(sumB / sumA),
+              Math.round(sumA / cells),
+            )
+    }
+  }
+}
+
 function usableRasterCtx(ctx: unknown): ctx is RasterCtx {
   const c = ctx as Record<string, unknown> | null
   return (
@@ -154,13 +257,17 @@ function makeRasterCanvas(width: number, height: number) {
     : undefined
 }
 
-function paint(pixels: Uint32Array, width: number, height: number) {
+function paint(
+  width: number,
+  height: number,
+  fill: (out: Uint32Array) => void,
+) {
   const made = makeRasterCanvas(width, height)
   if (!made) {
     return undefined
   }
   const image = made.ctx.createImageData(width, height)
-  new Uint32Array(image.data.buffer).set(pixels)
+  fill(new Uint32Array(image.data.buffer))
   made.ctx.putImageData(image, 0, 0)
   return made.canvas
 }
@@ -223,8 +330,29 @@ function getCache(model: MsaViewModel, theme: Theme) {
   return next
 }
 
-function getTile(cache: RasterCache, tileRow: number, tileCol: number) {
-  const key = `${tileRow}_${tileCol}`
+// Cells averaged into one tile pixel along an axis: the smallest power of two
+// that brings a pixel back to at least one device pixel. Powers of two keep the
+// number of distinct tile sets a zoom sweep builds to a handful.
+function cellsPerPixel(devicePixelsPerCell: number) {
+  return devicePixelsPerCell >= 1
+    ? 1
+    : 2 ** Math.ceil(Math.log2(1 / devicePixelsPerCell))
+}
+
+function getTile({
+  cache,
+  tileRow,
+  tileCol,
+  colSpan,
+  rowSpan,
+}: {
+  cache: RasterCache
+  tileRow: number
+  tileCol: number
+  colSpan: number
+  rowSpan: number
+}) {
+  const key = `${colSpan}_${rowSpan}_${tileRow}_${tileCol}`
   const hit = cache.tiles.get(key)
   if (hit) {
     // re-inserting makes this the newest entry: a Map iterates in insertion
@@ -233,18 +361,31 @@ function getTile(cache: RasterCache, tileRow: number, tileCol: number) {
     cache.tiles.set(key, hit)
     return hit
   }
-  const col0 = tileCol * rasterTileSize
-  const row0 = tileRow * rasterTileSize
-  const width = Math.min(rasterTileSize, cache.numColumns - col0)
-  const height = Math.min(rasterTileSize, cache.numRows - row0)
+  const col0 = tileCol * rasterTileSize * colSpan
+  const row0 = tileRow * rasterTileSize * rowSpan
+  const width = Math.min(
+    rasterTileSize,
+    Math.ceil((cache.numColumns - col0) / colSpan),
+  )
+  const height = Math.min(
+    rasterTileSize,
+    Math.ceil((cache.numRows - row0) / rowSpan),
+  )
   if (width <= 0 || height <= 0) {
     return undefined
   }
-  const canvas = paint(
-    rasterPixels({ spec: cache.spec, col0, row0, width, height }),
-    width,
-    height,
-  )
+  const canvas = paint(width, height, out => {
+    rasterPixels({
+      spec: cache.spec,
+      col0,
+      row0,
+      width,
+      height,
+      colSpan,
+      rowSpan,
+      out,
+    })
+  })
   if (!canvas) {
     return undefined
   }
@@ -263,6 +404,11 @@ function getTile(cache: RasterCache, tileRow: number, tileCol: number) {
  * 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.
+ *
+ * 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.
  */
 export function drawMsaRaster({
   ctx,
@@ -279,17 +425,18 @@ export function drawMsaRaster({
 }) {
   const { colWidth, rowHeight, blockSize, highResScaleFactor } = model
   const cache = getCache(model, theme)
+  const colSpan = cellsPerPixel(colWidth * highResScaleFactor)
+  const rowSpan = cellsPerPixel(rowHeight * highResScaleFactor)
 
   ctx.resetTransform()
   ctx.scale(highResScaleFactor, highResScaleFactor)
   ctx.translate(-offsetX, -offsetY)
-  // below a pixel per cell a tile carries more cells than the block has room
-  // for, so let the browser downsample it rather than letting whichever cell
-  // landed last win
-  ctx.imageSmoothingEnabled = colWidth < 1 || rowHeight < 1
+  ctx.imageSmoothingEnabled = false
 
-  const tileWidth = rasterTileSize * colWidth
-  const tileHeight = rasterTileSize * rowHeight
+  const pixelWidth = colWidth * colSpan
+  const pixelHeight = rowHeight * rowSpan
+  const tileWidth = rasterTileSize * pixelWidth
+  const tileHeight = rasterTileSize * pixelHeight
   const firstCol = Math.max(0, Math.floor(offsetX / tileWidth))
   const lastCol = Math.floor((offsetX + blockSize) / tileWidth)
   const firstRow = Math.max(0, Math.floor(offsetY / tileHeight))
@@ -297,7 +444,7 @@ export function drawMsaRaster({
 
   for (let tileRow = firstRow; tileRow <= lastRow; tileRow++) {
     for (let tileCol = firstCol; tileCol <= lastCol; tileCol++) {
-      const tile = getTile(cache, tileRow, tileCol)
+      const tile = getTile({ cache, tileRow, tileCol, colSpan, rowSpan })
       if (tile) {
         ctx.drawImage(
           tile,
@@ -307,8 +454,8 @@ export function drawMsaRaster({
           tile.height,
           tileCol * tileWidth,
           tileRow * tileHeight,
-          tile.width * colWidth,
-          tile.height * rowHeight,
+          tile.width * pixelWidth,
+          tile.height * pixelHeight,
         )
       }
     }
@@ -353,7 +500,9 @@ 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 samples down.
+// 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.
 const maxImagePixels = 64e6
@@ -391,31 +540,40 @@ export function rasterImageHref({
     return undefined
   }
   const cache = getCache(model, theme)
-  let step = 1
+  let colSpan = 1
+  let rowSpan = 1
+  while (Math.ceil(numCols / colSpan) > maxImageSide) {
+    colSpan *= 2
+  }
+  while (Math.ceil(numRows / rowSpan) > maxImageSide) {
+    rowSpan *= 2
+  }
   while (
-    Math.ceil(numCols / step) * Math.ceil(numRows / step) > maxImagePixels ||
-    Math.ceil(numCols / step) > maxImageSide ||
-    Math.ceil(numRows / step) > maxImageSide
+    Math.ceil(numCols / colSpan) * Math.ceil(numRows / rowSpan) >
+    maxImagePixels
   ) {
-    step *= 2
+    if (numCols / colSpan >= numRows / rowSpan) {
+      colSpan *= 2
+    } else {
+      rowSpan *= 2
+    }
   }
-  const width = Math.ceil(numCols / step)
-  const height = Math.ceil(numRows / step)
+  const width = Math.ceil(numCols / colSpan)
+  const height = Math.ceil(numRows / rowSpan)
 
   return canvasHref(
-    paint(
+    paint(width, height, out => {
       rasterPixels({
         spec: cache.spec,
         col0,
         row0,
         width,
         height,
-        colStep: step,
-        rowStep: step,
-      }),
-      width,
-      height,
-    ),
+        colSpan,
+        rowSpan,
+        out,
+      })
+    }),
   )
 }
 
@@ -447,7 +605,7 @@ export function msaThumbnail({
     const h = Math.ceil(numRows / rowStep)
     cache.thumbnail = {
       height,
-      canvas: paint(
+      canvas: paint(w, h, out => {
         rasterPixels({
           spec: cache.spec,
           col0: 0,
@@ -456,10 +614,9 @@ export function msaThumbnail({
           height: h,
           colStep,
           rowStep,
-        }),
-        w,
-        h,
-      ),
+          out,
+        })
+      }),
     }
   }
   return cache.thumbnail.canvas

package/src/components/msa/renderHighlights.ts

@@ -1,16 +1,40 @@
 import { setFontSize } from '../../setFontSize.ts'
+import { referenceColor } from '../overlayColors.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { RenderCtx } from '../renderCtx.ts'
 import type { Theme } from '@mui/material'
 
+// 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)
 export const highlightFill = 'rgba(255,140,0,0.28)'
 export const highlightBorder = 'rgba(210,90,0,0.95)'
 export const highlightRowFill = 'rgba(255,140,0,0.18)'
 
 export const labelFontSize = 11
 const labelPad = 3
+// the label box a highlight draws above its band, and the reason a tree block
+// has to consider rows a little outside itself
+export const highlightLabelHeight = labelFontSize + labelPad * 2
 
+export interface LabelBox {
+  left: number
+  right: number
+  top: number
+  bottom: number
+}
+
+/**
+ * A highlight's label, over its band where it fits and beside it where it does
+ * not, kept inside `bounds` and out of the way of the labels already placed.
+ *
+ * Two single-residue highlights a column apart both want the same few pixels to
+ * the right of their bands, and a band scrolled off the left edge wants its
+ * label off-frame with it: the first overdrew two labels into an unreadable
+ * smudge, the second left the visible band untitled. Pass `placed` and each
+ * later label steps down a row instead of over the one before.
+ */
 export function drawHighlightLabel({
   ctx,
   theme,
@@ -18,6 +42,8 @@ export function drawHighlightLabel({
   x,
   y,
   spanWidth,
+  bounds,
+  placed,
 }: {
   ctx: RenderCtx
   theme: Theme
@@ -25,16 +51,33 @@ export function drawHighlightLabel({
   x: number
   y: number
   spanWidth: number
+  bounds?: { min: number; max: number }
+  placed?: LabelBox[]
 }) {
   setFontSize(ctx, labelFontSize)
   ctx.textAlign = 'start'
   const boxWidth = ctx.measureText(label).width + labelPad * 2
-  const boxHeight = labelFontSize + labelPad * 2
-  const left = boxWidth <= spanWidth ? x : x + spanWidth + 2
+  const boxHeight = highlightLabelHeight
+  let left = boxWidth <= spanWidth ? x : x + spanWidth + 2
+  if (bounds) {
+    left = Math.max(bounds.min, Math.min(left, bounds.max - boxWidth))
+  }
+  let top = y
+  if (placed) {
+    const overlaps = (box: LabelBox) =>
+      box.left < left + boxWidth &&
+      box.right > left &&
+      box.top < top + boxHeight &&
+      box.bottom > top
+    while (placed.some(overlaps)) {
+      top += boxHeight
+    }
+    placed.push({ left, right: left + boxWidth, top, bottom: top + boxHeight })
+  }
   ctx.fillStyle = theme.palette.background.paper
-  ctx.fillRect(left, y, boxWidth, boxHeight)
+  ctx.fillRect(left, top, boxWidth, boxHeight)
   ctx.fillStyle = theme.palette.text.primary
-  ctx.fillText(label, left + labelPad, y + labelPad + labelFontSize - 2)
+  ctx.fillText(label, left + labelPad, top + labelPad + labelFontSize - 2)
 }
 
 /**
@@ -62,6 +105,7 @@ export function renderHighlights({
   height: number
 }) {
   const { resolvedHighlights, colWidth, rowHeight } = model
+  const placed: LabelBox[] = []
   ctx.lineWidth = 2
   for (const { rowIndices, color } of resolvedHighlights) {
     ctx.fillStyle = color ?? highlightRowFill
@@ -80,7 +124,61 @@ export function renderHighlights({
     ctx.strokeStyle = color ?? highlightBorder
     ctx.strokeRect(x, 0, spanWidth, height)
     if (label) {
-      drawHighlightLabel({ ctx, theme, label, x, y: 0, spanWidth })
+      drawHighlightLabel({
+        ctx,
+        theme,
+        label,
+        x,
+        y: 0,
+        spanWidth,
+        bounds: { min: 0, max: width },
+        placed,
+      })
     }
   }
 }
+
+/**
+ * Everything the alignment overlay owes to the document rather than to the
+ * mouse: the reference row's tint, a bordered band per run of highlighted
+ * columns, and the `highlights` layer. The live overlay canvas draws these
+ * under its hover and click bands, and the SVG export draws them and stops --
+ * a shared link that opens with columns highlighted exports with them too.
+ */
+export function renderPersistentHighlights({
+  ctx,
+  model,
+  theme,
+  offsetX,
+  offsetY,
+  width,
+  height,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  theme: Theme
+  offsetX: number
+  offsetY: number
+  width: number
+  height: number
+}) {
+  const { colWidth, rowHeight, referenceRowIndex, highlightedColumnRuns } =
+    model
+
+  if (referenceRowIndex !== undefined) {
+    ctx.fillStyle = referenceColor
+    ctx.fillRect(0, referenceRowIndex * rowHeight - offsetY, width, rowHeight)
+  }
+
+  ctx.lineWidth = 2
+  for (const { start, end } of highlightedColumnRuns) {
+    const x = start * colWidth - offsetX
+    const w = (end - start + 1) * colWidth
+    ctx.fillStyle = highlightFill
+    ctx.fillRect(x, 0, w, height)
+    ctx.strokeStyle = highlightBorder
+    ctx.strokeRect(x, 0, w, height)
+  }
+
+  renderHighlights({ ctx, model, theme, offsetX, offsetY, width, height })
+}

package/src/components/msa/renderMSABlock.ts

@@ -1,5 +1,5 @@
 import { setFontSize } from '../../setFontSize.ts'
-import { adjustColorForContrast } from '../../util.ts'
+import { adjustColorForContrast, contrastTextFn } from '../../util.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 import { domainBandCursor } from './domainBandCursor.ts'
 import { tileColorFn } from './tileColor.ts'
@@ -15,7 +15,6 @@ export function renderMSABlock({
   model,
   offsetX,
   offsetY,
-  contrastScheme,
   ctx,
   theme,
   highResScaleFactorOverride,
@@ -27,7 +26,6 @@ export function renderMSABlock({
   offsetY: number
   theme: Theme
   model: MsaViewModel
-  contrastScheme: Record<string, string>
   ctx: RenderCtx
   highResScaleFactorOverride?: number
   blockSizeXOverride?: number
@@ -68,7 +66,6 @@ export function renderMSABlock({
     model,
     ctx,
     theme,
-    contrastScheme,
     xStart,
     xEnd,
     visibleLeaves,
@@ -90,23 +87,10 @@ export function renderMSABlock({
   ctx.resetTransform()
 }
 
-// Letter color to use over a domain box, keyed by accession. Domain fills come
-// from a categorical palette that has no fixed lightness, so ask the theme for a
-// readable text color per fill instead of assuming dark-on-light.
-function domainLetterColors(model: MsaViewModel, theme: Theme) {
-  return new Map(
-    Object.entries(model.fillPalette).map(([accession, fill]) => [
-      accession,
-      theme.palette.getContrastText(fill),
-    ]),
-  )
-}
-
 function drawTilesAndText({
   model,
   ctx,
   theme,
-  contrastScheme,
   visibleLeaves,
   xStart,
   xEnd,
@@ -117,7 +101,6 @@ function drawTilesAndText({
   model: MsaViewModel
   theme: Theme
   ctx: RenderCtx
-  contrastScheme: Record<string, string>
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number
   xEnd: number
@@ -139,10 +122,14 @@ function drawTilesAndText({
   const tiles = drawTiles && bgColor
   const paintTiles = tiles && !rasterTiles
   if (paintTiles || showMsaLetters) {
-    // over raster tiles the letters take their color from contrastScheme, so
-    // the scheme lookup per cell is pure waste
-    const needsColor = paintTiles || !tiles
+    // a letter takes its color from the cell it lands on, so the scheme lookup
+    // is only waste when nothing draws letters
+    const needsColor = paintTiles || showMsaLetters
     const tileColor = tileColorFn(model)
+    // Domain fills come from a categorical palette with no fixed lightness, and
+    // a dynamic scheme colors a cell from its column, so a readable letter color
+    // is a question about the cell's own color rather than about its letter.
+    const contrastText = contrastTextFn(theme)
     const offsetXAligned = xStart * colWidth
     const halfColWidth = colWidth / 2
     // note: -rowHeight/4 matches +rowHeight/4 in tree
@@ -151,9 +138,6 @@ function drawTilesAndText({
     // on a domain box or on the plain background; sub-row layout stacks the boxes
     // above the letters, so those rows are all plain background
     const overDomains = !drawTiles && !subFeatureRows
-    const domainColors = overDomains
-      ? domainLetterColors(model, theme)
-      : undefined
 
     for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
       const node = visibleLeaves[i]!
@@ -186,18 +170,23 @@ function drawTilesAndText({
             const covering = bandAt(col)
             ctx.fillStyle = covering
               ? // on top of a domain box: contrast against the box fill
-                domainColors!.get(covering.annotation.accession)!
-              : tiles
-                ? // on top of a colored tile
-                  (contrastScheme[letter] ?? 'black')
-                : !drawTiles || !color
-                  ? // plain background, uncolored letters
-                    theme.palette.text.primary
-                  : // letter-color mode: darken/lighten to stay readable
-                    adjustColorForContrast(
-                      color,
-                      theme.palette.background.default,
-                    )
+                contrastText(model.fillPalette[covering.annotation.accession])
+              : isMatchingReference
+                ? // the dot sits on the faint reference-match wash, which is
+                  // the theme's background with a little of its text color in it
+                  theme.palette.text.primary
+                : tiles
+                  ? // on top of a colored tile, or on the background where the
+                    // scheme gives that cell no color
+                    contrastText(color)
+                  : !drawTiles || !color
+                    ? // plain background, uncolored letters
+                      theme.palette.text.primary
+                    : // letter-color mode: darken/lighten to stay readable
+                      adjustColorForContrast(
+                        color,
+                        theme.palette.background.default,
+                      )
             ctx.fillText(
               isMatchingReference ? '.' : letter,
               x + halfColWidth,