react-msaview 5.10.0 → 6.1.0

package/src/components/msa/{DomainLegend.tsx → AnnotationLegend.tsx}

@@ -7,7 +7,11 @@ import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model.ts'
 
-const DomainLegend = observer(function ({ model }: { model: MsaViewModel }) {
+const AnnotationLegend = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
   const {
     actuallyShowDomains,
     visibleDomainTypes: visible,
@@ -41,7 +45,7 @@ const DomainLegend = observer(function ({ model }: { model: MsaViewModel }) {
       >
         <IconButton
           size="small"
-          title={expanded ? 'Collapse domain key' : 'Expand domain key'}
+          title={expanded ? 'Collapse key' : 'Expand key'}
           onClick={() => {
             model.setShowDomainLegend(!expanded)
           }}
@@ -76,4 +80,4 @@ const DomainLegend = observer(function ({ model }: { model: MsaViewModel }) {
   ) : null
 })
 
-export default DomainLegend
+export default AnnotationLegend

package/src/components/msa/MSACanvas.tsx

@@ -11,12 +11,13 @@ import type { MsaViewModel } from '../../model.ts'
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const {
     MSA,
-    verticalScrollbarWidth,
     msaFilehandle,
     height,
-    msaAreaWidth,
+    msaCanvasWidth,
     blocks2d,
     scrollZoom,
+    scrollX,
+    scrollY,
   } = model
   const ref = useRef<HTMLDivElement>(null)
   const onScrollX = useCallback(
@@ -61,19 +62,31 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       style={{
         position: 'relative',
         height,
-        width: msaAreaWidth - verticalScrollbarWidth,
+        width: msaCanvasWidth,
         overflow: 'hidden',
       }}
     >
       {!MSA && !msaFilehandle ? null : MSA ? (
-        blocks2d.map(([bx, by]) => (
-          <MSACanvasBlock
-            key={`${bx}_${by}`}
-            model={model}
-            offsetX={bx}
-            offsetY={by}
-          />
-        ))
+        // one transform for the whole block set, so a scroll frame is a
+        // compositor move rather than a style write per block
+        <div
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            transform: `translate(${scrollX}px, ${scrollY}px)`,
+            willChange: 'transform',
+          }}
+        >
+          {blocks2d.map(([bx, by]) => (
+            <MSACanvasBlock
+              key={`${bx}_${by}`}
+              model={model}
+              offsetX={bx}
+              offsetY={by}
+            />
+          ))}
+        </div>
       ) : (
         <Loading />
       )}

package/src/components/msa/MSACanvasBlock.tsx

@@ -6,6 +6,7 @@ import { observer } from 'mobx-react'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { useColorContrast } from '../../useColorContrast.ts'
 import ColumnStats from './ColumnStats.tsx'
+import { drawMsaRaster, rasterSupported } from './msaRaster.ts'
 import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
 import { renderMSABlock } from './renderMSABlock.ts'
 import { useMsaBlockMouse } from './useMsaBlockMouse.ts'
@@ -21,7 +22,7 @@ const MSACanvasBlock = observer(function ({
   offsetX: number
   offsetY: number
 }) {
-  const { scrollY, scrollX, colorScheme, blockSize, highResScaleFactor } = model
+  const { colorScheme, blockSize, highResScaleFactor } = model
   const { theme, contrastScheme } = useColorContrast(colorScheme)
   const { tooltipPoint, onMouseMove, onClick, onMouseLeave } = useMsaBlockMouse(
     {
@@ -42,6 +43,14 @@ const MSACanvasBlock = observer(function ({
         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()
+      if (rasterTiles) {
+        drawMsaRaster({ ctx, model, theme, offsetX, offsetY })
+      }
       renderMSABlock({
         ctx,
         theme,
@@ -49,6 +58,7 @@ const MSACanvasBlock = observer(function ({
         offsetY,
         contrastScheme,
         model,
+        rasterTiles,
       })
     },
     width: canvasSize,
@@ -79,8 +89,8 @@ const MSACanvasBlock = observer(function ({
         height={canvasSize}
         style={{
           position: 'absolute',
-          top: scrollY + offsetY,
-          left: scrollX + offsetX,
+          top: offsetY,
+          left: offsetX,
           width: blockSize,
           height: blockSize,
         }}

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -13,9 +13,7 @@ const MSAMouseoverCanvas = observer(function ({
 }: {
   model: MsaViewModel
 }) {
-  const { height, msaAreaWidth, verticalScrollbarWidth, highResScaleFactor } =
-    model
-  const width = msaAreaWidth - verticalScrollbarWidth
+  const { height, msaCanvasWidth: width, highResScaleFactor } = model
   const canvasWidth = width * highResScaleFactor
   const canvasHeight = height * highResScaleFactor
   const ref = useCanvasAutorun({

package/src/components/msa/MSAPanel.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-import DomainLegend from './DomainLegend.tsx'
+import AnnotationLegend from './AnnotationLegend.tsx'
 import MSACanvas from './MSACanvas.tsx'
 import MSAMouseoverCanvas from './MSAMouseoverCanvas.tsx'
 
@@ -14,7 +14,7 @@ const MSAPanel = observer(function ({ model }: { model: MsaViewModel }) {
     <div style={{ position: 'relative' }}>
       <MSACanvas model={model} />
       <MSAMouseoverCanvas model={model} />
-      <DomainLegend model={model} />
+      <AnnotationLegend model={model} />
     </div>
   )
 })

package/src/components/msa/domainBandCursor.ts

@@ -0,0 +1,41 @@
+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.
+ *
+ * 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.
+ *
+ * `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.
+ */
+export function domainBandCursor(bands: DomainBand[] | undefined) {
+  let next = 0
+  let active: DomainBand[] = []
+
+  return (col: number) => {
+    if (!bands) {
+      return undefined
+    }
+    while (next < bands.length && bands[next]!.startCol <= col) {
+      active.push(bands[next]!)
+      next++
+    }
+    if (active.some(band => band.endCol <= col)) {
+      active = active.filter(band => band.endCol > col)
+    }
+    let top: DomainBand | undefined
+    for (const band of active) {
+      if (!top || band.stackIndex > top.stackIndex) {
+        top = band
+      }
+    }
+    return top
+  }
+}

package/src/components/msa/msaRaster.test.ts

@@ -0,0 +1,145 @@
+// @vitest-environment jsdom
+import { beforeAll, expect, test } from 'vitest'
+
+import MSAModelF from '../../model.ts'
+import { drawMsaRaster, rasterPixels } from './msaRaster.ts'
+
+import type { RasterSpec } from './msaRaster.ts'
+
+// the stub context resolves a color by parsing '#rrggbb', so every color the
+// raster asks about in this file is written that way
+function hexBytes(css: string) {
+  const hex = css.replace('#', '')
+  return [
+    Number.parseInt(hex.slice(0, 2), 16),
+    Number.parseInt(hex.slice(2, 4), 16),
+    Number.parseInt(hex.slice(4, 6), 16),
+    255,
+  ]
+}
+
+const drawn: unknown[] = []
+
+beforeAll(() => {
+  HTMLCanvasElement.prototype.getContext = function () {
+    let fillStyle = '#000000'
+    return {
+      get fillStyle() {
+        return fillStyle
+      },
+      set fillStyle(v: string) {
+        fillStyle = v
+      },
+      imageSmoothingEnabled: true,
+      font: '10px sans-serif',
+      measureText: (t: string) => ({ width: t.length * 6 }),
+      clearRect: () => {},
+      fillRect: () => {},
+      resetTransform: () => {},
+      scale: () => {},
+      translate: () => {},
+      getImageData: () => ({
+        data: Uint8ClampedArray.from(hexBytes(fillStyle)),
+      }),
+      createImageData: (width: number, height: number) => ({
+        data: new Uint8ClampedArray(width * height * 4),
+        width,
+        height,
+      }),
+      putImageData: () => {},
+      drawImage: (image: unknown) => {
+        drawn.push(image)
+      },
+    } as unknown as CanvasRenderingContext2D
+  } as unknown as typeof HTMLCanvasElement.prototype.getContext
+})
+
+const spec: RasterSpec = {
+  rowNames: ['a', 'b', 'c'],
+  columns: new Map([
+    ['a', 'MKL'],
+    ['b', 'MKL'],
+    ['c', 'MK'],
+  ]),
+  relativeTo: 'a',
+  colorAt: (_col, letter) => (letter === 'M' ? '#ff0000' : undefined),
+  bg: '#000000',
+  hover: '#00ff00',
+}
+
+const ids: Record<string, number> = { '#ff0000': 1, '#000000': 2, '#00ff00': 3 }
+const toPixel = (css: string) => ids[css]!
+
+test('one pixel per cell, reference matches and short rows', () => {
+  const px = rasterPixels({
+    spec,
+    col0: 0,
+    row0: 0,
+    width: 3,
+    height: 4,
+    toPixel,
+  })
+
+  // the reference row itself keeps its scheme colors
+  expect([...px.slice(0, 3)]).toEqual([1, 2, 2])
+  // every cell of an identical row reads as a match
+  expect([...px.slice(3, 6)]).toEqual([3, 3, 3])
+  // past the end of a short row, and past the last row, stays transparent
+  expect([...px.slice(6, 9)]).toEqual([3, 3, 0])
+  expect([...px.slice(9, 12)]).toEqual([0, 0, 0])
+})
+
+test('sampling steps over columns and rows', () => {
+  const px = rasterPixels({
+    spec,
+    col0: 0,
+    row0: 0,
+    width: 2,
+    height: 2,
+    colStep: 2,
+    rowStep: 2,
+    toPixel,
+  })
+  // the second sampled column falls past the end of the short row 'c'
+  expect([...px]).toEqual([1, 2, 3, 0])
+})
+
+function make() {
+  const model = MSAModelF().create({
+    id: 'raster',
+    type: 'MsaView',
+    msaFormat: 'fasta',
+    data: { msa: '>a\nMKLVIL\n>b\nMRLVIL\n>c\nMKLAIL' },
+  })
+  model.setWidth(1000)
+  return model
+}
+
+function tilesFor(model: ReturnType<typeof make>) {
+  drawn.length = 0
+  const ctx = document.createElement('canvas').getContext('2d')!
+  drawMsaRaster({ ctx, model, theme: theme(), offsetX: 0, offsetY: 0 })
+  return [...drawn]
+}
+
+// only the two palette entries the raster reads
+const theme = () =>
+  ({
+    palette: {
+      action: { hover: '#00ff00' },
+      background: { default: '#ffffff' },
+    },
+  }) as never
+
+test('a zoom reuses the tiles, a recolor rebuilds them', () => {
+  const model = make()
+  const tile = tilesFor(model)[0]
+  expect(tile).toBeDefined()
+
+  model.setColWidth(3)
+  model.setRowHeight(2)
+  expect(tilesFor(model)[0]).toBe(tile)
+
+  model.setColorSchemeName('clustalx_protein_dynamic')
+  expect(tilesFor(model)[0]).not.toBe(tile)
+})

package/src/components/msa/msaRaster.ts

@@ -0,0 +1,350 @@
+import { tileColorFn, tileColorTable } from './tileColor.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { Theme } from '@mui/material'
+
+// One raster tile holds this many cells on a side. A tile costs ~10ms to build
+// and ~1MB to hold, and is then drawn at any zoom for ~1ms, so the cache only
+// has to be large enough to cover a screen without thrashing.
+export const rasterTileSize = 512
+const maxCachedTiles = 64
+const maxThumbnailColumns = 2000
+const maxColorCacheEntries = 4096
+
+type RasterCanvas = HTMLCanvasElement | OffscreenCanvas
+type RasterCtx = CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D
+
+export interface RasterSpec {
+  rowNames: string[]
+  columns: Map<string, string>
+  relativeTo: string | undefined
+  colorAt: (col: number, letter: string) => string | undefined
+  bg: string
+  hover: string
+}
+
+const littleEndian = new Uint8Array(new Uint32Array([1]).buffer)[0] === 1
+
+function packRgba(r: number, g: number, b: number, a: number) {
+  return littleEndian
+    ? ((a << 24) | (b << 16) | (g << 8) | r) >>> 0
+    : ((r << 24) | (g << 16) | (b << 8) | a) >>> 0
+}
+
+let scratch: RasterCtx | null | undefined
+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.
+ */
+export function cssColorToPixel(css: string) {
+  const hit = colorCache.get(css)
+  if (hit !== undefined) {
+    return hit
+  }
+  if (scratch === undefined) {
+    scratch = makeRasterCanvas(1, 1)?.ctx ?? null
+  }
+  let packed = 0
+  if (scratch) {
+    scratch.clearRect(0, 0, 1, 1)
+    scratch.fillStyle = css
+    scratch.fillRect(0, 0, 1, 1)
+    const [r = 0, g = 0, b = 0, a = 0] = scratch.getImageData(0, 0, 1, 1).data
+    packed = packRgba(r, g, b, a)
+  }
+  if (colorCache.size >= maxColorCacheEntries) {
+    colorCache.clear()
+  }
+  colorCache.set(css, packed)
+  return packed
+}
+
+/**
+ * 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.
+ *
+ * `colStep`/`rowStep` sample instead of covering, which is how the minimap fits
+ * a whole alignment into a 12px bar.
+ */
+export function rasterPixels({
+  spec,
+  col0,
+  row0,
+  width,
+  height,
+  colStep = 1,
+  rowStep = 1,
+  toPixel = cssColorToPixel,
+}: {
+  spec: RasterSpec
+  col0: number
+  row0: number
+  width: number
+  height: number
+  colStep?: number
+  rowStep?: number
+  toPixel?: (css: string) => number
+}) {
+  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
+
+  for (let r = 0; r < height; r++) {
+    const name = rowNames[row0 + r * rowStep]
+    if (name === undefined) {
+      break
+    }
+    const str = columns.get(name)
+    if (!str) {
+      continue
+    }
+    const isReference = name === relativeTo
+    const base = r * width
+    for (let c = 0; c < width; c++) {
+      const col = col0 + c * colStep
+      const letter = str[col]
+      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)
+      }
+    }
+  }
+  return out
+}
+
+function makeRasterCanvas(width: number, height: number) {
+  if (typeof OffscreenCanvas !== 'undefined') {
+    const canvas = new OffscreenCanvas(width, height)
+    const ctx = canvas.getContext('2d', { willReadFrequently: true })
+    return ctx
+      ? { canvas: canvas as RasterCanvas, ctx: ctx as RasterCtx }
+      : undefined
+  }
+  if (typeof document === 'undefined') {
+    return undefined
+  }
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  const ctx = canvas.getContext('2d', { willReadFrequently: true })
+  return ctx
+    ? { canvas: canvas as RasterCanvas, ctx: ctx as RasterCtx }
+    : undefined
+}
+
+function paint(pixels: Uint32Array, width: number, height: number) {
+  const made = makeRasterCanvas(width, height)
+  if (!made) {
+    return undefined
+  }
+  const image = made.ctx.createImageData(width, height)
+  new Uint32Array(image.data.buffer).set(pixels)
+  made.ctx.putImageData(image, 0, 0)
+  return made.canvas
+}
+
+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() {
+  supported ??= !!makeRasterCanvas(1, 1)
+  return supported
+}
+
+interface RasterCache {
+  keys: unknown[]
+  spec: RasterSpec
+  numColumns: number
+  numRows: number
+  tiles: Map<string, RasterCanvas>
+  thumbnail?: RasterCanvas
+}
+
+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.
+function rasterKeys(model: MsaViewModel, theme: Theme) {
+  return [
+    model.columns,
+    model.leaves,
+    model.colorSchemeName,
+    tileColorTable(model),
+    model.relativeTo,
+    theme.palette.action.hover,
+    theme.palette.background.default,
+  ]
+}
+
+function getCache(model: MsaViewModel, theme: Theme) {
+  const keys = rasterKeys(model, theme)
+  const prev = caches.get(model)
+  if (prev && keys.every((key, i) => key === prev.keys[i])) {
+    return prev
+  }
+  const next: RasterCache = {
+    keys,
+    spec: {
+      rowNames: model.leaves.map(node => node.data.name),
+      columns: model.columns,
+      relativeTo: model.relativeTo,
+      colorAt: tileColorFn(model),
+      bg: theme.palette.background.default,
+      hover: theme.palette.action.hover,
+    },
+    numColumns: model.numColumns,
+    numRows: model.numRows,
+    tiles: new Map(),
+  }
+  caches.set(model, next)
+  return next
+}
+
+function getTile(cache: RasterCache, tileRow: number, tileCol: number) {
+  const key = `${tileRow}_${tileCol}`
+  const hit = cache.tiles.get(key)
+  if (hit) {
+    // re-inserting makes this the newest entry: a Map iterates in insertion
+    // order, so its first key is the least recently used one
+    cache.tiles.delete(key)
+    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)
+  if (width <= 0 || height <= 0) {
+    return undefined
+  }
+  const canvas = paint(
+    rasterPixels({ spec: cache.spec, col0, row0, width, height }),
+    width,
+    height,
+  )
+  if (!canvas) {
+    return undefined
+  }
+  cache.tiles.set(key, canvas)
+  for (const stale of cache.tiles.keys()) {
+    if (cache.tiles.size <= maxCachedTiles) {
+      break
+    }
+    cache.tiles.delete(stale)
+  }
+  return canvas
+}
+
+/**
+ * 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.
+ */
+export function drawMsaRaster({
+  ctx,
+  model,
+  theme,
+  offsetX,
+  offsetY,
+}: {
+  ctx: CanvasRenderingContext2D
+  model: MsaViewModel
+  theme: Theme
+  offsetX: number
+  offsetY: number
+}) {
+  const { colWidth, rowHeight, blockSize, highResScaleFactor } = model
+  const cache = getCache(model, theme)
+
+  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
+
+  const tileWidth = rasterTileSize * colWidth
+  const tileHeight = rasterTileSize * rowHeight
+  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))
+  const lastRow = Math.floor((offsetY + blockSize) / tileHeight)
+
+  for (let tileRow = firstRow; tileRow <= lastRow; tileRow++) {
+    for (let tileCol = firstCol; tileCol <= lastCol; tileCol++) {
+      const tile = getTile(cache, tileRow, tileCol)
+      if (tile) {
+        ctx.drawImage(
+          tile,
+          0,
+          0,
+          tile.width,
+          tile.height,
+          tileCol * tileWidth,
+          tileRow * tileHeight,
+          tile.width * colWidth,
+          tile.height * rowHeight,
+        )
+      }
+    }
+  }
+  ctx.resetTransform()
+  ctx.imageSmoothingEnabled = true
+}
+
+/**
+ * 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.
+ */
+export function msaThumbnail({
+  model,
+  theme,
+  height,
+}: {
+  model: MsaViewModel
+  theme: Theme
+  height: number
+}) {
+  const cache = getCache(model, theme)
+  const { numColumns, numRows } = cache
+  if (numColumns <= 0 || numRows <= 0) {
+    return undefined
+  }
+  if (!cache.thumbnail) {
+    const colStep = Math.max(1, Math.ceil(numColumns / maxThumbnailColumns))
+    const rowStep = Math.max(1, Math.ceil(numRows / height))
+    const w = Math.ceil(numColumns / colStep)
+    const h = Math.ceil(numRows / rowStep)
+    cache.thumbnail = paint(
+      rasterPixels({
+        spec: cache.spec,
+        col0: 0,
+        row0: 0,
+        width: w,
+        height: h,
+        colStep,
+        rowStep,
+      }),
+      w,
+      h,
+    )
+  }
+  return cache.thumbnail
+}