react-msaview 6.0.0 → 6.1.0

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}
     </>
   )
 })

package/src/components/tree/renderTreeCanvas.ts

@@ -264,6 +264,7 @@ function renderTreeLabels({
     marginLeft,
     noTree,
     labelWidthMap,
+    labelWidthScale,
   } = model
   const by = blockSizeYOverride ?? blockSize
   // labels only exist for leaves, which are laid out top to bottom, so take the
@@ -295,8 +296,11 @@ function renderTreeLabels({
         xp = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf) ?? 0
       }
 
+      const measured = labelWidthMap.get(name)
       const width =
-        labelWidthMap.get(name) ?? ctx.measureText(displayName).width
+        measured === undefined
+          ? ctx.measureText(displayName).width
+          : measured * labelWidthScale
 
       ctx.fillStyle = theme.palette.text.primary
       if (labelsAlignRight) {

package/src/constants.ts

@@ -31,6 +31,16 @@ export const segmentShades = ['#9fb6d4', '#d4dcea']
 export const defaultDrawMsaLetters = true
 export const defaultScrollZoom = false
 
+// Cell size floors for drawing residue letters and tree labels. Below these a
+// 500px block holds thousands of glyphs, and fillText -- which no sprite atlas
+// beats, measured -- dominates every zoom frame.
+export const minLetterRowHeight = 8
+export const minLetterColWidth = 5
+
+// Tree labels are measured once at this size and scaled to the current font
+// size, so a vertical zoom never re-measures the tree.
+export const labelReferenceFontSize = 16
+
 // Zoom limits, px per cell. maxCellSize caps both smooth zoom and the stepwise
 // zoom-in buttons (which otherwise grow unbounded). minColWidth/minRowHeight are
 // the smooth-zoom floors.

package/src/impgRender.test.tsx

@@ -12,67 +12,12 @@ import { enableStaticRendering } from 'mobx-react'
 import { beforeAll, expect, test } from 'vitest'
 
 import MSAModelF from './model.ts'
+import { installRenderTestEnv } from './renderTestEnv.ts'
 import { renderToSvg } from './renderToSvg.tsx'
 
-class Mat {
-  constructor(
-    public a = 1,
-    public b = 0,
-    public c = 0,
-    public d = 1,
-    public e = 0,
-    public f = 0,
-  ) {}
-  multiply(o: Mat) {
-    return new Mat(
-      this.a * o.a + this.c * o.b,
-      this.b * o.a + this.d * o.b,
-      this.a * o.c + this.c * o.d,
-      this.b * o.c + this.d * o.d,
-      this.a * o.e + this.c * o.f + this.e,
-      this.b * o.e + this.d * o.f + this.f,
-    )
-  }
-  translate(x: number, y = 0) {
-    return this.multiply(new Mat(1, 0, 0, 1, x, y))
-  }
-  scale(x: number, y = x) {
-    return this.multiply(new Mat(x, 0, 0, y, 0, 0))
-  }
-}
-class Pt {
-  constructor(
-    public x = 0,
-    public y = 0,
-  ) {}
-  matrixTransform(m: Mat) {
-    return new Pt(
-      m.a * this.x + m.c * this.y + m.e,
-      m.b * this.x + m.d * this.y + m.f,
-    )
-  }
-}
-
 beforeAll(() => {
   enableStaticRendering(true)
-  const g = globalThis as Record<string, unknown>
-  g.DOMMatrix = Mat
-  g.DOMPoint = Pt
-  HTMLCanvasElement.prototype.getContext = function () {
-    let font = '10px sans-serif'
-    return {
-      get font() {
-        return font
-      },
-      set font(v: string) {
-        font = v
-      },
-      measureText(t: string) {
-        const size = Number.parseFloat(font) || 10
-        return { width: t.length * size * 0.6 } as TextMetrics
-      },
-    } as unknown as CanvasRenderingContext2D
-  } as unknown as typeof HTMLCanvasElement.prototype.getContext
+  installRenderTestEnv()
 })
 
 // representative `impg query -o fasta-aln` block: PanSN names with region

package/src/largeTree.test.ts

@@ -26,8 +26,9 @@ test('a tree far past the argument limit still lays out', () => {
   model.setWidth(1000)
 
   expect(model.numRows).toBe(200_000)
-  // 's199999' is the longest name, at 7 chars * 7px
-  expect(model.labelsWidth).toBe(49)
+  // 's199999' is the longest name, at 7 chars * 7px, scaled from the reference
+  // font size the labels are measured at down to the current one (13/16)
+  expect(model.labelsWidth).toBeCloseTo((49 * 13) / 16)
   expect(model.treeWidth).toBeGreaterThan(0)
 })
 
@@ -51,3 +52,16 @@ test('re-hovering the same tree node does not re-walk the tree', () => {
   model.setHoveredTreeNode(undefined)
   expect(model.hoveredTreeNode).toBeUndefined()
 })
+
+test('a vertical zoom does not re-measure every label', () => {
+  const model = MSAModelF().create({
+    type: 'MsaView',
+    data: { tree: flatNewick(200_000) },
+  })
+  model.setWidth(1000)
+
+  const before = model.labelWidthMap
+  model.setRowHeight(24)
+  expect(model.labelWidthMap).toBe(before)
+  expect(model.labelsWidth).toBeCloseTo((49 * 18) / 16)
+})

package/src/model/DataModel.ts

@@ -53,15 +53,15 @@ export function DataModelF() {
         self.gff = gff
       },
     }))
-    .postProcessSnapshot(snap => {
-      const { tree, msa, treeMetadata, gff } = snap
-      const max = 50_000
-      return {
-        tree: tree && tree.length > max ? undefined : tree,
-        msa: msa && msa.length > max ? undefined : msa,
-        treeMetadata:
-          treeMetadata && treeMetadata.length > max ? undefined : treeMetadata,
-        gff: gff && gff.length > max ? undefined : gff,
-      }
-    })
+    .postProcessSnapshot(snap =>
+      // a large document is dropped from the snapshot rather than inlined
+      // into a session or a shared URL, and every field here holds one, so
+      // the rule is the same for all of them
+      Object.fromEntries(
+        Object.entries(snap).map(([key, text]) => [
+          key,
+          text && text.length > 50_000 ? undefined : text,
+        ]),
+      ),
+    )
 }