react-msaview 9.0.0 → 9.1.1

package/src/components/msa/msaRaster.ts

@@ -6,7 +6,7 @@ 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 rasterTileSize = 512
 const maxCachedTiles = 64
 const maxThumbnailColumns = 2000
 const maxColorCacheEntries = 4096
@@ -242,17 +242,30 @@ function usableRasterCtx(ctx: unknown): ctx is RasterCtx {
   )
 }
 
-function makeRasterCanvas(width: number, height: number) {
+/**
+ * A canvas off the page, an OffscreenCanvas where there is one, with its 2d
+ * context, or undefined where the context fails `usable` (jsdom has none).
+ */
+export function makeOffscreenCanvas<Ctx>(
+  width: number,
+  height: number,
+  usable: (ctx: unknown) => ctx is Ctx,
+  settings?: CanvasRenderingContext2DSettings,
+) {
   const canvas =
     typeof OffscreenCanvas !== 'undefined'
       ? new OffscreenCanvas(width, height)
       : typeof document !== 'undefined'
         ? Object.assign(document.createElement('canvas'), { width, height })
         : undefined
-  const ctx = canvas?.getContext('2d', { willReadFrequently: true })
-  return usableRasterCtx(ctx)
-    ? { canvas: canvas as RasterCanvas, ctx }
-    : undefined
+  const ctx = canvas?.getContext('2d', settings)
+  return usable(ctx) ? { canvas: canvas as RasterCanvas, ctx } : undefined
+}
+
+function makeRasterCanvas(width: number, height: number) {
+  return makeOffscreenCanvas(width, height, usableRasterCtx, {
+    willReadFrequently: true,
+  })
 }
 
 function paint(
@@ -272,11 +285,14 @@ function paint(
 
 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() {
+/**
+ * Whether the alignment background comes from the raster: true while the
+ * residue scheme fills the cells, with a 2d context that reads back, which
+ * jsdom lacks. renderMSABlock paints each cell otherwise.
+ */
+export function rasterApplies(model: Pick<MsaViewModel, 'cellFill'>) {
   supported ??= !!makeRasterCanvas(1, 1)
-  return supported
+  return model.cellFill === 'residue' && supported
 }
 
 interface RasterCache {

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -3,9 +3,11 @@ import { contrastTextFn } from '../../util.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 import { drawFeatureSpans, spanRows } from './drawFeatureSpans.ts'
 
+import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
-import type { DomainBand } from '../../types.ts'
+import type { DomainBand, NodeWithIdsAndLength } from '../../types.ts'
 import type { RenderCtx } from '../renderCtx.ts'
+import type { SpanSource } from './drawFeatureSpans.ts'
 import type { Theme } from '@mui/material'
 
 export function renderBoxFeatureCanvasBlock({
@@ -27,11 +29,64 @@ export function renderBoxFeatureCanvasBlock({
   blockSizeXOverride?: number
   blockSizeYOverride?: number
 }) {
+  const { blockSize, rowHeight, highResScaleFactor, actuallyShowDomains } =
+    model
+  if (!actuallyShowDomains) {
+    return
+  }
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+  const bx = blockSizeXOverride ?? blockSize
+  const by = blockSizeYOverride ?? blockSize
+  ctx.resetTransform()
+  ctx.scale(k, k)
+  ctx.translate(-offsetX, rowHeight / 2 - offsetY)
+
+  const source = domainOverlaySource(
+    model,
+    getVisibleLeaves({ model, offsetY, blockSizeY: by }),
+  )
+  const contrastText = contrastTextFn(theme)
+  if (model.cellFill === 'residue' && model.domainUnderline) {
+    // over residue colors a bar in a categorical color blends into the cells
+    // beside it, so a strip of the page background parts it from them
+    const { height } = source.layout
+    const halo = theme.palette.background.default
+    drawFeatureSpans<DomainBand>({
+      ctx,
+      ...source,
+      layout: { ...source.layout, height: n => height(n) + barHalo },
+      colors: new Map(
+        [...source.colors.keys()].map(a => [a, { fill: halo, stroke: halo }]),
+      ),
+      labelOf: undefined,
+      labelDrawn: undefined,
+      contrastText,
+      xMin: offsetX,
+      xMax: offsetX + bx,
+    })
+  }
+  drawFeatureSpans<DomainBand>({
+    ctx,
+    ...source,
+    contrastText,
+    xMin: offsetX,
+    xMax: offsetX + bx,
+  })
+}
+
+const barHalo = 1.5
+
+/**
+ * The domain overlay's spans over `leaves`, in alignment pixels: filled rows,
+ * an underline bar, or thin sub-rows, as `domainUnderline` and
+ * `subFeatureRows` decide.
+ */
+export function domainOverlaySource(
+  model: MsaViewModel,
+  leaves: HierarchyNode<NodeWithIdsAndLength>[],
+): SpanSource<DomainBand> {
   const {
-    blockSize,
     rowHeight,
-    highResScaleFactor,
-    actuallyShowDomains,
     subFeatureRows,
     colWidth,
     featureColors,
@@ -41,16 +96,6 @@ export function renderBoxFeatureCanvasBlock({
     domainUnderline,
     domainBands,
   } = model
-  if (!actuallyShowDomains) {
-    return
-  }
-  const k = highResScaleFactorOverride ?? highResScaleFactor
-  const bx = blockSizeXOverride ?? blockSize
-  const by = blockSizeYOverride ?? blockSize
-  ctx.resetTransform()
-  ctx.scale(k, k)
-  ctx.translate(-offsetX, rowHeight / 2 - offsetY)
-
   // the plain and underline modes give every band the same height; a sub-row
   // band is thinner, and how thin depends on how many lanes its row needs
   const barHeight = domainUnderline
@@ -67,12 +112,8 @@ export function renderBoxFeatureCanvasBlock({
   // carrying the gene model are often not the first ones in the alignment
   const labelled = drawSegmentLabels ? new Set<string>() : undefined
 
-  drawFeatureSpans<DomainBand>({
-    ctx,
-    rows: spanRows(
-      getVisibleLeaves({ model, offsetY, blockSizeY: by }),
-      domainBands,
-    ),
+  return {
+    rows: spanRows(leaves, domainBands),
     layout: {
       // sub-rows are thin, but a row whose lanes would spill onto the row below
       // shares out the row height between them instead
@@ -98,8 +139,5 @@ export function renderBoxFeatureCanvasBlock({
         ? segmentLabels.get(band.annotation.accession)
         : undefined),
     labelDrawn: band => labelled?.add(band.annotation.accession),
-    contrastText: contrastTextFn(theme),
-    xMin: offsetX,
-    xMax: offsetX + bx,
-  })
+  }
 }

package/src/components/msa/renderHighlights.ts

@@ -11,11 +11,11 @@ import type { Theme } from '@mui/material'
 
 // a fill plus a solid border; the hover wash alone is invisible over clustalx
 // coloring
-export const highlightFill = 'rgba(255,140,0,0.28)'
-export const highlightBorder = 'rgba(210,90,0,0.95)'
+const highlightFill = 'rgba(255,140,0,0.28)'
+const highlightBorder = 'rgba(210,90,0,0.95)'
 export const highlightRowFill = 'rgba(255,140,0,0.18)'
 
-export const labelFontSize = 11
+const labelFontSize = 11
 const labelPad = 3
 // the label box above a highlight band; tree blocks also check rows this far
 // outside themselves
@@ -215,8 +215,8 @@ export function renderSelection({
 
 /**
  * The overlay parts that come from the snapshot: the reference row's tint, a
- * bordered band per run of highlighted columns, the `highlights` layer and the
- * selected block. The live overlay draws these under its hover and click
+ * bordered band per run of highlighted columns and the `highlights` layer. The
+ * live overlay draws these under the selected block and its hover and click
  * bands; the SVG export draws only these.
  */
 export function renderPersistentHighlights({
@@ -255,5 +255,4 @@ export function renderPersistentHighlights({
   }
 
   renderHighlights({ ctx, model, theme, offsetX, offsetY, width, height })
-  renderSelection({ ctx, model, offsetX, offsetY, height })
 }

package/src/components/msa/renderMSABlock.ts

@@ -1,7 +1,9 @@
+import { zoomFrameMaxLetters } from '../../constants.ts'
 import { setFontSize } from '../../setFontSize.ts'
 import { adjustColorForContrast, contrastTextFn } from '../../util.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 import { domainBandCursor } from './domainBandCursor.ts'
+import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
 import { tileColorFn } from './tileColor.ts'
 import { visibleColRange } from './visibleColRange.ts'
 
@@ -21,6 +23,7 @@ export function renderMSABlock({
   blockSizeXOverride,
   blockSizeYOverride,
   rasterTiles,
+  domains,
 }: {
   offsetX: number
   offsetY: number
@@ -31,6 +34,11 @@ export function renderMSABlock({
   blockSizeXOverride?: number
   blockSizeYOverride?: number
   rasterTiles?: boolean
+  /**
+   * draw the domain overlay too, over the cell colors and under the letters,
+   * which is the one order every cell fill reads right in
+   */
+  domains?: boolean
 }) {
   const {
     colWidth,
@@ -38,18 +46,21 @@ export function renderMSABlock({
     rowHeight,
     fontSize,
     highResScaleFactor,
-    actuallyShowDomains,
+    cellFill,
     bgColor,
   } = model
   const k = highResScaleFactorOverride ?? highResScaleFactor
   const bx = blockSizeXOverride ?? blockSize
   const by = blockSizeYOverride ?? blockSize
-  ctx.resetTransform()
-  ctx.scale(k, k)
-  ctx.translate(-offsetX, rowHeight / 2 - offsetY)
-  ctx.textAlign = 'center'
-  ctx.textBaseline = 'alphabetic'
-  setFontSize(ctx, fontSize, !bgColor)
+  const setup = () => {
+    ctx.resetTransform()
+    ctx.scale(k, k)
+    ctx.translate(-offsetX, rowHeight / 2 - offsetY)
+    ctx.textAlign = 'center'
+    ctx.textBaseline = 'alphabetic'
+    setFontSize(ctx, fontSize, !bgColor)
+  }
+  setup()
 
   const { xStart, xEnd } = visibleColRange({
     offsetX,
@@ -62,7 +73,7 @@ export function renderMSABlock({
     ? columns.get(relativeTo)?.slice(xStart, xEnd)
     : null
 
-  drawTilesAndText({
+  const cells = {
     model,
     ctx,
     theme,
@@ -70,13 +81,34 @@ export function renderMSABlock({
     xEnd,
     visibleLeaves,
     referenceSeq,
-    // when domains are shown the background tiles come from
+    // when the domains fill the cells the background comes from
     // renderBoxFeatureCanvasBlock, so only the letters are drawn here
-    drawTiles: !actuallyShowDomains,
+    drawTiles: cellFill !== 'domain',
     // ...and when the caller has already laid the raster down, the tiles are
     // there but nothing here has to paint them
     rasterTiles,
-  })
+    letters:
+      model.showMsaLetters &&
+      (!model.wheelZooming ||
+        (bx * by) / (colWidth * rowHeight) <= zoomFrameMaxLetters),
+  }
+  if (domains) {
+    drawTilesAndText({ ...cells, pass: 'tiles' })
+    renderBoxFeatureCanvasBlock({
+      model,
+      theme,
+      ctx,
+      offsetX,
+      offsetY,
+      highResScaleFactorOverride,
+      blockSizeXOverride,
+      blockSizeYOverride,
+    })
+    setup()
+    drawTilesAndText({ ...cells, pass: 'letters' })
+  } else {
+    drawTilesAndText({ ...cells, pass: 'both' })
+  }
   drawInsertionIndicators({
     model,
     ctx,
@@ -97,6 +129,8 @@ function drawTilesAndText({
   referenceSeq,
   drawTiles,
   rasterTiles,
+  letters: lettersOn,
+  pass,
 }: {
   model: MsaViewModel
   theme: Theme
@@ -107,6 +141,8 @@ function drawTilesAndText({
   referenceSeq: string | null | undefined
   drawTiles: boolean
   rasterTiles?: boolean
+  letters: boolean
+  pass: 'tiles' | 'letters' | 'both'
 }) {
   const {
     bgColor,
@@ -115,7 +151,6 @@ function drawTilesAndText({
     rowHeight,
     fontSize,
     relativeTo,
-    showMsaLetters,
     subFeatureRows,
     domainUnderline,
     domainBandsByStart,
@@ -123,8 +158,9 @@ function drawTilesAndText({
   } = model
 
   const tiles = drawTiles && bgColor
-  const paintTiles = tiles && !rasterTiles
-  if (paintTiles || showMsaLetters) {
+  const paintTiles = tiles && !rasterTiles && pass !== 'letters'
+  const letters = lettersOn && pass !== 'tiles'
+  if (paintTiles || letters) {
     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
@@ -169,7 +205,7 @@ function drawTilesAndText({
             ctx.fillRect(x, tileY, colWidth, rowHeight)
           }
 
-          if (showMsaLetters) {
+          if (letters) {
             const covering = bandAt(col)
             ctx.fillStyle = covering
               ? // on top of a domain box: contrast against the box fill

package/src/components/msa/renderMSAMouseover.ts

@@ -1,5 +1,8 @@
 import { clickColor, hoverColor, multiRowHoverColor } from '../overlayColors.ts'
-import { renderPersistentHighlights } from './renderHighlights.ts'
+import {
+  renderPersistentHighlights,
+  renderSelection,
+} from './renderHighlights.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { Theme } from '@mui/material'
@@ -49,6 +52,7 @@ export function renderMouseover({
     width,
     height,
   })
+  renderSelection({ ctx, model, offsetX: -scrollX, offsetY: -scrollY, height })
 
   // every tip under a hovered tree node stays lit
   ctx.fillStyle = multiRowHoverColor

package/src/components/msa/tileColor.ts

@@ -9,6 +9,10 @@ export function tileColorFn(model: MsaViewModel) {
     const { colClustalX } = model
     return (col: number, letter: string) => colClustalX[col]![letter]
   }
+  if (dynamicColorSchemeName === 'blosum62_dynamic') {
+    const { colSimilarity } = model
+    return (col: number, letter: string) => colSimilarity[col]![letter]
+  }
   if (dynamicColorSchemeName === 'percent_identity_dynamic') {
     const { colConsensus } = model
     return (col: number, letter: string) => {
@@ -28,6 +32,9 @@ export function tileColorTable(model: MsaViewModel) {
   if (dynamicColorSchemeName === 'clustalx_protein_dynamic') {
     return model.colClustalX
   }
+  if (dynamicColorSchemeName === 'blosum62_dynamic') {
+    return model.colSimilarity
+  }
   if (dynamicColorSchemeName === 'percent_identity_dynamic') {
     return model.colConsensus
   }

package/src/components/renderCtx.ts

@@ -8,7 +8,6 @@ export type RenderCtx = Pick<
   CanvasRenderingContext2D,
   | 'arc'
   | 'beginPath'
-  | 'clearRect'
   | 'closePath'
   | 'fill'
   | 'fillRect'

package/src/components/rowpanels/RowPanelBlock.tsx

@@ -1,9 +1,9 @@
 import React 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 { featureField, featureName } from '../../featureFields.ts'
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { useHoverAnchor } from '../useHoverAnchor.ts'
@@ -64,7 +64,7 @@ const RowPanelBlock = observer(function ({
     name: string
     lines: string[]
   }>()
-  const theme = useTheme()
+  const theme = useCanvasTheme()
   const { blockSize, highResScaleFactor, rowHeight } = model
   const width = panel.width
   const height = blockSize

package/src/components/rowpanels/renderFeaturePanel.ts

@@ -2,8 +2,14 @@ import { contrastTextFn } from '../../util.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 import { drawFeatureSpans, spanRows } from '../msa/drawFeatureSpans.ts'
 
+import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
-import type { ResolvedFeaturePanel, RowPanelSpan } from '../../types.ts'
+import type {
+  NodeWithIdsAndLength,
+  ResolvedFeaturePanel,
+  RowPanelSpan,
+} from '../../types.ts'
+import type { SpanSource } from '../msa/drawFeatureSpans.ts'
 import type { RenderCtx } from '../renderCtx.ts'
 import type { Theme } from '@mui/material'
 
@@ -46,10 +52,26 @@ export function renderFeaturePanel({
 
   drawFeatureSpans<RowPanelSpan>({
     ctx,
-    rows: spanRows(
+    ...featurePanelSource(
+      model,
+      panel,
       getVisibleLeaves({ model, offsetY, blockSizeY: by }),
-      panel.spans,
     ),
+    contrastText: contrastTextFn(theme),
+    xMin: 0,
+    xMax: panel.width,
+  })
+}
+
+/** a features panel's spans over `leaves`, in panel pixels, a lane apiece */
+export function featurePanelSource(
+  model: MsaViewModel,
+  panel: ResolvedFeaturePanel,
+  leaves: HierarchyNode<NodeWithIdsAndLength>[],
+): SpanSource<RowPanelSpan> {
+  const { rowHeight } = model
+  return {
+    rows: spanRows(leaves, panel.spans),
     layout: {
       height: laneCount => Math.max(1, rowHeight / laneCount - rowPadding),
       top: (y, lane, h) =>
@@ -59,8 +81,5 @@ export function renderFeaturePanel({
     xOf: span => [span.xStart, span.xEnd],
     colors: panel.colors,
     labelOf: span => panel.labels?.get(span.annotation),
-    contrastText: contrastTextFn(theme),
-    xMin: 0,
-    xMax: panel.width,
-  })
+  }
 }