react-msaview 6.0.0 → 6.1.1

package/src/components/minimap/Minimap.tsx

@@ -1,19 +1,56 @@
 import React, { useCallback } from 'react'
 
+import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import ScrollbarThumb, { scrollbarThumbFill } from '../ScrollbarThumb.tsx'
+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 type { MsaViewModel } from '../../model.ts'
 
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
-  const { minimapHeight, msaCanvasWidth } = model
+  const { minimapHeight, msaCanvasWidth, highResScaleFactor } = model
+  const theme = useTheme()
   const { unit, s, w, polygonHeight, polygonPoints } = getMinimapLayout(
     model,
     msaCanvasWidth,
   )
 
+  // the whole alignment, sampled down to the bar: it says where the conserved
+  // blocks and the gappy stretches are, which is what a scroll aims at
+  const barWidth = Math.round(msaCanvasWidth * highResScaleFactor)
+  const barHeight = Math.round(MINIMAP_BAR_HEIGHT * highResScaleFactor)
+  const ref = useCanvasAutorun({
+    draw: ctx => {
+      ctx.resetTransform()
+      ctx.clearRect(0, 0, barWidth, barHeight)
+      const thumbnail = msaThumbnail({
+        model,
+        theme,
+        height: MINIMAP_BAR_HEIGHT,
+      })
+      if (thumbnail) {
+        ctx.imageSmoothingEnabled = true
+        ctx.drawImage(
+          thumbnail,
+          0,
+          0,
+          thumbnail.width,
+          thumbnail.height,
+          0,
+          0,
+          barWidth,
+          barHeight,
+        )
+      }
+    },
+    width: barWidth,
+    height: barHeight,
+    deps: [model, theme],
+  })
+
   const onDrag = useCallback(
     (delta: number, startScroll: number) => {
       model.setScrollX(startScroll - delta / unit)
@@ -33,15 +70,21 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
         flexShrink: 0,
       }}
     >
-      <div
+      <canvas
+        ref={ref}
+        width={barWidth}
+        height={barHeight}
         style={{
+          display: 'block',
+          width: msaCanvasWidth,
           height: MINIMAP_BAR_HEIGHT,
           boxSizing: 'border-box',
           border: '1px solid #555',
         }}
       />
-      <ScrollbarThumb
+      <DragHandle
         axis="x"
+        variant="thumb"
         getStart={() => model.scrollX}
         onDrag={onDrag}
         style={{

package/src/components/msa/MSACanvas.tsx

@@ -9,8 +9,16 @@ import MSACanvasBlock from './MSACanvasBlock.tsx'
 import type { MsaViewModel } from '../../model.ts'
 
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
-  const { MSA, msaFilehandle, height, msaCanvasWidth, blocks2d, scrollZoom } =
-    model
+  const {
+    MSA,
+    msaFilehandle,
+    height,
+    msaCanvasWidth,
+    blocks2d,
+    scrollZoom,
+    scrollX,
+    scrollY,
+  } = model
   const ref = useRef<HTMLDivElement>(null)
   const onScrollX = useCallback(
     (d: number) => {
@@ -59,14 +67,26 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       }}
     >
       {!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/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
+}