react-msaview 6.0.0 → 6.1.1

package/src/components/msa/renderMSABlock.ts

@@ -2,6 +2,7 @@ import { setFontSize } from '../../setFontSize.ts'
 import { adjustColorForContrast } from '../../util.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 import { domainBandCursor } from './domainBandCursor.ts'
+import { tileColorFn } from './tileColor.ts'
 import { visibleColRange } from './visibleColRange.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
@@ -20,6 +21,7 @@ export function renderMSABlock({
   highResScaleFactorOverride,
   blockSizeXOverride,
   blockSizeYOverride,
+  rasterTiles,
 }: {
   offsetX: number
   offsetY: number
@@ -30,6 +32,7 @@ export function renderMSABlock({
   highResScaleFactorOverride?: number
   blockSizeXOverride?: number
   blockSizeYOverride?: number
+  rasterTiles?: boolean
 }) {
   const {
     colWidth,
@@ -73,6 +76,9 @@ export function renderMSABlock({
     // when domains are shown the background tiles come from
     // renderBoxFeatureCanvasBlock, so only the letters are drawn here
     drawTiles: !actuallyShowDomains,
+    // ...and when the caller has already laid the raster down, the tiles are
+    // there but nothing here has to paint them
+    rasterTiles,
   })
   drawInsertionIndicators({
     model,
@@ -84,23 +90,6 @@ export function renderMSABlock({
   ctx.resetTransform()
 }
 
-// Per-cell tile color for the active scheme. The scheme is fixed for the whole
-// block, so resolve which rule applies once rather than re-testing the scheme
-// name inside the innermost loop.
-function tileColorFn(model: MsaViewModel) {
-  const { colorSchemeName, colorScheme, colClustalX, colConsensus } = model
-  if (colorSchemeName === 'clustalx_protein_dynamic') {
-    return (col: number, letter: string) => colClustalX[col]![letter]
-  }
-  if (colorSchemeName === 'percent_identity_dynamic') {
-    return (col: number, letter: string) => {
-      const consensus = colConsensus[col]!
-      return letter === consensus.letter ? consensus.color : undefined
-    }
-  }
-  return (_col: number, letter: string) => colorScheme[letter]
-}
-
 // 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.
@@ -123,6 +112,7 @@ function drawTilesAndText({
   xEnd,
   referenceSeq,
   drawTiles,
+  rasterTiles,
 }: {
   model: MsaViewModel
   theme: Theme
@@ -133,6 +123,7 @@ function drawTilesAndText({
   xEnd: number
   referenceSeq: string | null | undefined
   drawTiles: boolean
+  rasterTiles?: boolean
 }) {
   const {
     bgColor,
@@ -146,7 +137,11 @@ function drawTilesAndText({
   } = model
 
   const tiles = drawTiles && bgColor
-  if (tiles || showMsaLetters) {
+  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
     const tileColor = tileColorFn(model)
     const offsetXAligned = xStart * colWidth
     const halfColWidth = colWidth / 2
@@ -178,9 +173,9 @@ function drawTilesAndText({
           const x = j * colWidth + offsetXAligned
           const isMatchingReference =
             referenceSeq && name !== relativeTo && letter === referenceSeq[j]
-          const color = tileColor(col, letter)
+          const color = needsColor ? tileColor(col, letter) : undefined
 
-          if (tiles) {
+          if (paintTiles) {
             ctx.fillStyle = isMatchingReference
               ? theme.palette.action.hover
               : color || theme.palette.background.default

package/src/components/msa/tileColor.ts

@@ -0,0 +1,37 @@
+import type { MsaViewModel } from '../../model.ts'
+
+// Per-cell tile color for the active scheme. The scheme is fixed for the whole
+// block, so resolve which rule applies once rather than re-testing the scheme
+// name inside the innermost loop. Reading only the column table the active
+// scheme needs also keeps the other one -- a per-column map for every column of
+// the alignment -- from being computed at all.
+export function tileColorFn(model: MsaViewModel) {
+  const { colorSchemeName } = model
+  if (colorSchemeName === 'clustalx_protein_dynamic') {
+    const { colClustalX } = model
+    return (col: number, letter: string) => colClustalX[col]![letter]
+  }
+  if (colorSchemeName === 'percent_identity_dynamic') {
+    const { colConsensus } = model
+    return (col: number, letter: string) => {
+      const consensus = colConsensus[col]!
+      return letter === consensus.letter ? consensus.color : undefined
+    }
+  }
+  const { colorScheme } = model
+  return (_col: number, letter: string) => colorScheme[letter]
+}
+
+// The column table the active scheme colors from, or undefined for the static
+// schemes. Identity of this plus the scheme name is what a cache of rendered
+// colors has to key on.
+export function tileColorTable(model: MsaViewModel) {
+  const { colorSchemeName } = model
+  if (colorSchemeName === 'clustalx_protein_dynamic') {
+    return model.colClustalX
+  }
+  if (colorSchemeName === 'percent_identity_dynamic') {
+    return model.colConsensus
+  }
+  return model.colorScheme
+}

package/src/components/renderCtx.ts

@@ -20,6 +20,8 @@ export type RenderCtx = Pick<
   | 'measureText'
   | 'moveTo'
   | 'resetTransform'
+  | 'restore'
+  | 'save'
   | 'scale'
   | 'setLineDash'
   | 'stroke'

package/src/components/tracks/TrackBlocks.tsx

@@ -0,0 +1,111 @@
+import React from 'react'
+
+import { observer } from 'mobx-react'
+
+import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
+import { useColorContrast } from '../../useColorContrast.ts'
+import { TrackResizeHandle } from '../ResizeHandles.tsx'
+import { drawTrackBlock } from './drawTracks.ts'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { BasicTrack } from '../../types.ts'
+
+const TrackBlock = observer(function ({
+  model,
+  track,
+  offsetX,
+}: {
+  model: MsaViewModel
+  track: BasicTrack
+  offsetX: number
+}) {
+  const { blockSize, colorScheme, highResScaleFactor } = model
+  const { height, customColorScheme } = track.model
+  const { theme, contrastScheme } = useColorContrast(
+    customColorScheme ?? colorScheme,
+  )
+  const canvasWidth = blockSize * highResScaleFactor
+  const canvasHeight = height * highResScaleFactor
+
+  const ref = useCanvasAutorun({
+    draw: ctx => {
+      ctx.resetTransform()
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+      drawTrackBlock({ model, ctx, track, offsetX, theme, contrastScheme })
+    },
+    width: canvasWidth,
+    height: canvasHeight,
+    deps: [model, track, offsetX, theme, contrastScheme],
+  })
+
+  return (
+    <canvas
+      ref={ref}
+      width={canvasWidth}
+      height={canvasHeight}
+      style={{
+        position: 'absolute',
+        left: offsetX,
+        width: blockSize,
+        height,
+      }}
+    />
+  )
+})
+
+/**
+ * The canvas blocks covering one track's row of the alignment. Every track kind
+ * shares this host: what differs between conservation, sequence logo and the
+ * Stockholm text tracks is which draw function `drawTrackBlock` dispatches to,
+ * not how the blocks are laid out or kept in sync with the horizontal scroll.
+ */
+const TrackBlocks = observer(function ({
+  model,
+  track,
+}: {
+  model: MsaViewModel
+  track: BasicTrack
+}) {
+  // msaCanvasWidth, not msaAreaWidth: a track row is a legend for the columns
+  // directly below it, so it has to stop where the alignment canvas does rather
+  // than running on another 20px under the vertical scrollbar -- otherwise the
+  // last columns appear in the tracks but not in the alignment, and the hovered
+  // -column indicator (sized to the canvas) stops short of the track it crosses
+  const { blocksX, msaCanvasWidth, scrollX } = model
+  const { kind, height, data } = track.model
+
+  // a text track with no data draws nothing, and an empty row of its own would
+  // still take up vertical space
+  if (kind === 'text' && !data) {
+    return null
+  }
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        height,
+        width: msaCanvasWidth,
+        overflow: 'hidden',
+      }}
+    >
+      {/* one transform for the whole block set, matching MSACanvas */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          transform: `translateX(${scrollX}px)`,
+          willChange: 'transform',
+        }}
+      >
+        {blocksX.map(bx => (
+          <TrackBlock key={bx} model={model} track={track} offsetX={bx} />
+        ))}
+      </div>
+      <TrackResizeHandle model={model} kind={kind} />
+    </div>
+  )
+})
+
+export default TrackBlocks

package/src/components/tracks/drawTracks.ts

@@ -0,0 +1,323 @@
+import { columnLogoStack } from '../../sequenceLogo.ts'
+import { setFontSize } from '../../setFontSize.ts'
+import { visibleColRange } from '../msa/visibleColRange.ts'
+
+import type { ColumnCounts } from '../../columnCounts.ts'
+import type { MsaViewModel } from '../../model.ts'
+import type { BasicTrack } from '../../types.ts'
+import type { RenderCtx } from '../renderCtx.ts'
+import type { Theme } from '@mui/material'
+
+export function drawConservationBars({
+  ctx,
+  values,
+  color,
+  colWidth,
+  trackHeight,
+  offsetX,
+  blockSize,
+}: {
+  ctx: RenderCtx
+  values: number[]
+  color: string
+  colWidth: number
+  trackHeight: number
+  offsetX: number
+  blockSize: number
+}) {
+  const { xStart, xEnd } = visibleColRange({
+    offsetX,
+    blockWidth: blockSize,
+    colWidth,
+  })
+
+  ctx.fillStyle = color
+  for (let i = xStart; i < xEnd && i < values.length; i++) {
+    const value = values[i]!
+    const barHeight = value * trackHeight
+    const x = i * colWidth
+    ctx.fillRect(x, trackHeight - barHeight, colWidth, barHeight)
+  }
+}
+
+// the bar-track values live on model getters (kept off the plain track object so
+// the live canvas autorun stays reactive); select the right one by track id
+export function barTrackValues(model: MsaViewModel, trackId: string) {
+  return trackId === 'property-conservation'
+    ? model.propertyConservation
+    : model.conservation
+}
+
+export function drawTextTrackContent({
+  ctx,
+  data,
+  colorScheme,
+  contrastScheme,
+  bgColor,
+  textColor,
+  colWidth,
+  rowHeight,
+  offsetX,
+  blockSize,
+}: {
+  ctx: RenderCtx
+  data: string | undefined
+  colorScheme: Record<string, string>
+  contrastScheme: Record<string, string>
+  bgColor: boolean
+  textColor: string
+  colWidth: number
+  rowHeight: number
+  offsetX: number
+  blockSize: number
+}) {
+  const { xStart, xEnd } = visibleColRange({
+    offsetX,
+    blockWidth: blockSize,
+    colWidth,
+  })
+  const str = data?.slice(xStart, xEnd)
+  const drawLetters = rowHeight >= 10 && colWidth >= rowHeight / 2
+
+  for (let i = 0; str && i < str.length; i++) {
+    const letter = str[i]!
+    const upper = letter.toUpperCase()
+    const color = colorScheme[upper]
+    const x = (xStart + i) * colWidth
+    const filled = bgColor && !!color
+    if (filled) {
+      ctx.fillStyle = color!
+      ctx.fillRect(x, 0, colWidth, rowHeight)
+    }
+    if (drawLetters) {
+      // a letter on a colored tile needs the tile's contrast color; otherwise it
+      // sits on the plain background and takes the theme's text color
+      ctx.fillStyle = filled ? (contrastScheme[upper] ?? 'black') : textColor
+      ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1)
+    }
+  }
+}
+
+// Cap height as a fraction of the font size. Every logo letter is scaled from
+// one reference font size to the height its frequency earns, and that scale is
+// only right if we know how tall the glyph actually draws. Measuring per letter
+// would be exact but `measureText` reports no vertical box in the SVG export
+// backend, so the ratio is a constant: the cap height of the sans-serif faces
+// both backends use, within a percent or two. It only has to be consistent --
+// the same ratio for every letter is what makes the slices sum to the stack
+// height instead of drifting apart.
+const CAP_HEIGHT_RATIO = 0.72
+// letters below this many pixels are noise, and a stack that thin reads better
+// as the bar chart it approximates
+const MIN_LETTER_PX = 3
+
+export function drawSequenceLogo({
+  ctx,
+  colStats,
+  colorScheme,
+  maxBits,
+  textColor,
+  colWidth,
+  trackHeight,
+  offsetX,
+  blockSize,
+}: {
+  ctx: RenderCtx
+  colStats: ColumnCounts
+  colorScheme: Record<string, string>
+  maxBits: number
+  textColor: string
+  colWidth: number
+  trackHeight: number
+  offsetX: number
+  blockSize: number
+}) {
+  const { xStart, xEnd } = visibleColRange({
+    offsetX,
+    blockWidth: blockSize,
+    colWidth,
+  })
+  const end = Math.min(xEnd, colStats.numColumns)
+
+  // one reference size for every glyph; each letter's own transform takes it
+  // from here to the height it earned, so the font is set once for the block
+  const referenceFontSize = trackHeight
+  setFontSize(ctx, referenceFontSize)
+  ctx.textAlign = 'left'
+  ctx.textBaseline = 'alphabetic'
+  const capHeight = referenceFontSize * CAP_HEIGHT_RATIO
+
+  for (let col = xStart; col < end; col++) {
+    const stack = columnLogoStack(colStats, col, maxBits)
+    if (stack.length === 0) {
+      continue
+    }
+    const x = col * colWidth
+    // stack up from the baseline: the array is ascending, so the tallest letter
+    // lands on top, which is the convention that makes a logo readable at a
+    // glance
+    let bottom = trackHeight
+    for (const { letter, bits } of stack) {
+      const h = (bits / maxBits) * trackHeight
+      if (h < MIN_LETTER_PX) {
+        bottom -= h
+        continue
+      }
+      const width = ctx.measureText(letter).width
+      if (width === 0) {
+        bottom -= h
+        continue
+      }
+      ctx.fillStyle = colorScheme[letter] ?? textColor
+      ctx.save()
+      // land the glyph's baseline on the bottom of its slice, then stretch it to
+      // fill the slice vertically and the column horizontally
+      ctx.translate(x, bottom)
+      ctx.scale(colWidth / width, h / capHeight)
+      ctx.fillText(letter, 0, 0)
+      ctx.restore()
+      bottom -= h
+    }
+  }
+}
+
+/**
+ * Draw one track's content into a block of the alignment's column space, at
+ * `offsetY` within the ctx. Owns the transform, so both callers -- the live
+ * canvas blocks and the SVG export -- draw into the same coordinate space, and
+ * adding a track kind means a `kind`, a draw function above, and a case here.
+ */
+export function drawTrackBlock({
+  model,
+  ctx,
+  track,
+  offsetX,
+  offsetY = 0,
+  theme,
+  contrastScheme,
+  blockSizeXOverride,
+  highResScaleFactorOverride,
+}: {
+  model: MsaViewModel
+  ctx: RenderCtx
+  track: BasicTrack
+  offsetX: number
+  offsetY?: number
+  theme: Theme
+  contrastScheme: Record<string, string>
+  blockSizeXOverride?: number
+  highResScaleFactorOverride?: number
+}) {
+  const {
+    blockSize,
+    bgColor,
+    colWidth,
+    colStats,
+    colorScheme: modelColorScheme,
+    fontSize,
+    rowHeight,
+    alphabetMaxBits,
+    highResScaleFactor,
+  } = model
+  const {
+    id,
+    kind,
+    height: trackHeight,
+    barColor,
+    customColorScheme,
+    data,
+  } = track.model
+  const blockSizeX = blockSizeXOverride ?? blockSize
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+  const textColor = theme.palette.text.primary
+
+  ctx.resetTransform()
+  ctx.scale(k, k)
+  ctx.translate(-offsetX, offsetY)
+
+  switch (kind) {
+    case 'bar': {
+      drawConservationBars({
+        ctx,
+        values: barTrackValues(model, id),
+        color: barColor ?? 'gray',
+        colWidth,
+        trackHeight,
+        offsetX,
+        blockSize: blockSizeX,
+      })
+      break
+    }
+    case 'logo': {
+      drawSequenceLogo({
+        ctx,
+        colStats,
+        colorScheme: modelColorScheme,
+        maxBits: alphabetMaxBits,
+        textColor,
+        colWidth,
+        trackHeight,
+        offsetX,
+        blockSize: blockSizeX,
+      })
+      break
+    }
+    case 'text': {
+      ctx.textAlign = 'center'
+      setFontSize(ctx, fontSize)
+      drawTextTrackContent({
+        ctx,
+        data,
+        colorScheme: customColorScheme ?? modelColorScheme,
+        contrastScheme,
+        bgColor,
+        textColor,
+        colWidth,
+        rowHeight,
+        offsetX,
+        blockSize: blockSizeX,
+      })
+      break
+    }
+  }
+
+  ctx.resetTransform()
+}
+
+/**
+ * Every turned-on track stacked top to bottom, for the SVG export. The live
+ * view draws the same content one canvas block at a time -- see TrackBlocks.
+ */
+export function renderAllTracks({
+  model,
+  ctx,
+  offsetX,
+  contrastScheme,
+  theme,
+  blockSizeXOverride,
+  highResScaleFactorOverride,
+}: {
+  model: MsaViewModel
+  ctx: RenderCtx
+  offsetX: number
+  contrastScheme: Record<string, string>
+  theme: Theme
+  blockSizeXOverride?: number
+  highResScaleFactorOverride?: number
+}) {
+  let currentY = 0
+  for (const track of model.turnedOnTracks) {
+    drawTrackBlock({
+      model,
+      ctx,
+      track,
+      offsetX,
+      offsetY: currentY,
+      theme,
+      contrastScheme,
+      blockSizeXOverride,
+      highResScaleFactorOverride,
+    })
+    currentY += track.model.height
+  }
+}

package/src/components/tree/TreeCanvas.tsx

@@ -13,7 +13,7 @@ import type { MsaViewModel } from '../../model.ts'
 
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)
-  const { treeWidth, height, blocksY, treeAreaWidth } = model
+  const { treeWidth, height, blocksY, treeAreaWidth, scrollY } = model
   const onScrollY = useCallback(
     (d: number) => {
       model.doScrollY(d)
@@ -80,9 +80,21 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
         width: treeWidth + padding,
       }}
     >
-      {blocksY.map(block => (
-        <TreeCanvasBlock key={block} model={model} offsetY={block} />
-      ))}
+      {/* one transform for the whole block set, matching MSACanvas: the tree
+      scrolls in lockstep with the alignment and on the same compositor move */}
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          transform: `translateY(${scrollY}px)`,
+          willChange: 'transform',
+        }}
+      >
+        {blocksY.map(block => (
+          <TreeCanvasBlock key={block} model={model} offsetY={block} />
+        ))}
+      </div>
       <canvas
         ref={mouseoverRef}
         width={treeAreaWidth}

package/src/components/tree/TreeCanvasBlock.tsx

@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 import { makeStyles } from '@jbrowse/core/util/tss-react'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
+import { createPortal } from 'react-dom'
 
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import TreeBranchMenu from './TreeBranchMenu.tsx'
@@ -56,7 +57,7 @@ const TreeCanvasBlock = observer(function ({
   const { clickMap, hovered, hitTest, onMouseMove, onMouseLeave } =
     useTreeHover({ model, offsetY })
 
-  const { scrollY, treeAreaWidth, blockSize, highResScaleFactor } = model
+  const { treeAreaWidth, blockSize, highResScaleFactor } = model
   const width = treeAreaWidth + padding
   const height = blockSize
 
@@ -82,7 +83,7 @@ const TreeCanvasBlock = observer(function ({
   const style = {
     width,
     height,
-    top: scrollY + offsetY,
+    top: offsetY,
     left: 0,
     position: 'absolute',
   } as const
@@ -144,21 +145,27 @@ const TreeCanvasBlock = observer(function ({
           className={classes.hover}
           style={{
             left: hovered.minX,
-            top: hovered.minY + scrollY,
+            top: hovered.minY,
             width: hovered.maxX - hovered.minX,
             height: hovered.maxY - hovered.minY,
           }}
         />
       ) : null}
 
-      {hovered ? (
-        <div
-          className={classes.tooltip}
-          style={{ left: hovered.clientX + 12, top: hovered.clientY + 12 }}
-        >
-          {hovered.name}
-        </div>
-      ) : null}
+      {/* portaled: the block set sits under a transform, which would otherwise
+      make this fixed tooltip position against the scrolled tree instead of the
+      window */}
+      {hovered
+        ? createPortal(
+            <div
+              className={classes.tooltip}
+              style={{ left: hovered.clientX + 12, top: hovered.clientY + 12 }}
+            >
+              {hovered.name}
+            </div>,
+            document.body,
+          )
+        : null}
     </>
   )
 })