react-msaview 5.9.0 → 6.0.0

package/src/components/msa/MSACanvasBlock.tsx

@@ -31,24 +31,17 @@ const MSACanvasBlock = observer(function ({
     },
   )
 
-  const ref = useCanvasAutorun(
-    ctx => {
-      const { blockSize, highResScaleFactor, actuallyShowDomains } = model
+  const canvasSize = blockSize * highResScaleFactor
+  const ref = useCanvasAutorun({
+    draw: ctx => {
       ctx.resetTransform()
-      ctx.clearRect(
-        0,
-        0,
-        blockSize * highResScaleFactor,
-        blockSize * highResScaleFactor,
-      )
-      if (actuallyShowDomains) {
-        renderBoxFeatureCanvasBlock({
-          ctx,
-          offsetX,
-          offsetY,
-          model,
-        })
-      }
+      ctx.clearRect(0, 0, canvasSize, canvasSize)
+      renderBoxFeatureCanvasBlock({
+        ctx,
+        offsetX,
+        offsetY,
+        model,
+      })
       renderMSABlock({
         ctx,
         theme,
@@ -58,8 +51,10 @@ const MSACanvasBlock = observer(function ({
         model,
       })
     },
-    [model, offsetX, offsetY, theme, contrastScheme],
-  )
+    width: canvasSize,
+    height: canvasSize,
+    deps: [model, offsetX, offsetY, theme, contrastScheme],
+  })
 
   const { hoveredInsertion, mouseOverDomains, showColumnStats } = model
 
@@ -80,8 +75,8 @@ const MSACanvasBlock = observer(function ({
         onMouseLeave={() => {
           onMouseLeave()
         }}
-        width={blockSize * highResScaleFactor}
-        height={blockSize * highResScaleFactor}
+        width={canvasSize}
+        height={canvasSize}
         style={{
           position: 'absolute',
           top: scrollY + offsetY,

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -13,24 +13,26 @@ const MSAMouseoverCanvas = observer(function ({
 }: {
   model: MsaViewModel
 }) {
-  const { height, msaAreaWidth, verticalScrollbarWidth, highResScaleFactor } =
-    model
-  const width = msaAreaWidth - verticalScrollbarWidth
-  const ref = useCanvasAutorun(
-    ctx => {
+  const { height, msaCanvasWidth: width, highResScaleFactor } = model
+  const canvasWidth = width * highResScaleFactor
+  const canvasHeight = height * highResScaleFactor
+  const ref = useCanvasAutorun({
+    draw: ctx => {
       if (isAlive(model)) {
         renderMouseover({ ctx, model })
       }
     },
-    [model],
-  )
+    width: canvasWidth,
+    height: canvasHeight,
+    deps: [model],
+  })
 
   return (
     <canvas
       ref={ref}
       id="mouseover"
-      width={width * highResScaleFactor}
-      height={height * highResScaleFactor}
+      width={canvasWidth}
+      height={canvasHeight}
       style={{
         position: 'absolute',
         top: 0,

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/renderBoxFeatureCanvasBlock.test.ts

@@ -0,0 +1,51 @@
+import { expect, test } from 'vitest'
+
+import stateModelFactory from '../../model.ts'
+import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
+
+import type { RenderCtx } from '../renderCtx.ts'
+
+const row = 'ACDEFGHIKLMNPQRSTVWY'.repeat(3)
+
+// only `human` carries the gene model; `mouse` is there to push it off the top
+// of the block
+const msa = `>mouse\n${row}\n>human\n${row}`
+
+const gff = `##gff-version 3
+human	src	exon	1	20	.	.	.	ID=human.exon1;Name=exon-1
+human	src	exon	21	40	.	.	.	ID=human.exon2;Name=exon-2
+human	src	exon	41	60	.	.	.	ID=human.exon3;Name=exon-3`
+
+function drawnLabels() {
+  const model = stateModelFactory().create({
+    type: 'MsaView',
+    data: { msa },
+  })
+  model.setWidth(1000)
+  model.setRowHeight(20)
+  // segment numbers are drawn in place of residue letters, never on top of them
+  model.setDrawMsaLetters(false)
+  model.applyGFFText(gff)
+  expect(model.rowNames).toEqual(['mouse', 'human'])
+
+  const labels: string[] = []
+  const ctx = {
+    font: '12px sans-serif',
+    resetTransform() {},
+    scale() {},
+    translate() {},
+    fillRect() {},
+    strokeRect() {},
+    measureText: (text: string) => ({ width: text.length * 6 }),
+    fillText(text: string) {
+      labels.push(text)
+    },
+  } as unknown as RenderCtx
+
+  renderBoxFeatureCanvasBlock({ model, ctx, offsetX: 0, offsetY: 0 })
+  return labels
+}
+
+test('segment numbers are drawn once each, even when row 0 has no gene model', () => {
+  expect(drawnLabels()).toEqual(['1', '2', '3'])
+})

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -77,8 +77,13 @@ function drawTiles({
   const xMin = offsetX - cull
   const xMax = offsetX + blockWidth + cull
 
-  for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
-    const node = visibleLeaves[i]!
+  // a segment (exon) number labels its band once per block, on the topmost
+  // visible row carrying that segment, so it reads as a column header for the
+  // whole band. Keyed by accession rather than drawn on row 0, because the rows
+  // carrying the gene model are often not the first ones in the alignment
+  const labelled = drawSegmentLabels ? new Set<string>() : undefined
+
+  for (const node of visibleLeaves) {
     const y = node.x!
     const bands = domainBands.get(node.data.name)
 
@@ -94,15 +99,15 @@ function drawTiles({
           if (strand === undefined) {
             ctx.fillRect(x, t, lw, h)
             ctx.strokeRect(x, t, lw, h)
-            // segment (exon) number drawn once per band, on the top visible row,
-            // so it reads as a column header for the whole band
-            const label = drawSegmentLabels
-              ? segmentLabels.get(accession)
-              : undefined
-            if (label !== undefined && i === 0) {
+            const label =
+              labelled && !labelled.has(accession)
+                ? segmentLabels.get(accession)
+                : undefined
+            if (label !== undefined) {
               const fontSize = Math.min(h - 2, 11)
               ctx.font = `${fontSize}px sans-serif`
               if (ctx.measureText(label).width + 2 <= lw) {
+                labelled!.add(accession)
                 ctx.fillStyle = '#222'
                 ctx.textAlign = 'center'
                 ctx.textBaseline = 'middle'

package/src/components/msa/renderMSABlock.ts

@@ -1,6 +1,7 @@
 import { setFontSize } from '../../setFontSize.ts'
 import { adjustColorForContrast } from '../../util.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
+import { domainBandCursor } from './domainBandCursor.ts'
 import { visibleColRange } from './visibleColRange.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
@@ -167,8 +168,9 @@ function drawTilesAndText({
       if (str) {
         const tileY = y - rowHeight
         const textY = y - quarterRowHeight
-        const bands = overDomains ? domainBandsByStart.get(name) : undefined
-        let band = 0
+        const bandAt = domainBandCursor(
+          overDomains ? domainBandsByStart.get(name) : undefined,
+        )
 
         for (let j = 0, l2 = str.length; j < l2; j++) {
           const col = xStart + j
@@ -186,27 +188,21 @@ function drawTilesAndText({
           }
 
           if (showMsaLetters) {
-            // bands are sorted by start column and the sweep is left to right,
-            // so one forward-only cursor finds the band covering each column
-            while (bands && band < bands.length && bands[band]!.endCol <= col) {
-              band++
-            }
-            const covering = bands?.[band]
-            ctx.fillStyle =
-              covering && covering.startCol <= col
-                ? // on top of a domain box: contrast against the box fill
-                  domainColors!.get(covering.annotation.accession)!
-                : tiles
-                  ? // on top of a colored tile
-                    (contrastScheme[letter] ?? 'black')
-                  : !drawTiles || !color
-                    ? // plain background, uncolored letters
-                      theme.palette.text.primary
-                    : // letter-color mode: darken/lighten to stay readable
-                      adjustColorForContrast(
-                        color,
-                        theme.palette.background.default,
-                      )
+            const covering = bandAt(col)
+            ctx.fillStyle = covering
+              ? // on top of a domain box: contrast against the box fill
+                domainColors!.get(covering.annotation.accession)!
+              : tiles
+                ? // on top of a colored tile
+                  (contrastScheme[letter] ?? 'black')
+                : !drawTiles || !color
+                  ? // plain background, uncolored letters
+                    theme.palette.text.primary
+                  : // letter-color mode: darken/lighten to stay readable
+                    adjustColorForContrast(
+                      color,
+                      theme.palette.background.default,
+                    )
             ctx.fillText(
               isMatchingReference ? '.' : letter,
               x + halfColWidth,

package/src/components/msa/renderMSAMouseover.ts

@@ -1,9 +1,12 @@
-import { multiRowHoverColor, referenceColor } from '../overlayColors.ts'
+import {
+  clickColor,
+  hoverColor,
+  multiRowHoverColor,
+  referenceColor,
+} from '../overlayColors.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
-const hoverColor = 'rgba(0,0,0,0.15)'
-const highlightColor = 'rgba(128,128,0,0.2)'
 // the persistent highlightColumns overlay: a stronger fill plus a solid border
 // so a domain/motif band reads clearly over the colored alignment cells (the
 // faint hover-style wash alone is invisible against clustalx coloring)
@@ -20,8 +23,7 @@ export function renderMouseover({
   const {
     mouseCol,
     colWidth,
-    msaAreaWidth,
-    verticalScrollbarWidth,
+    msaCanvasWidth: width,
     height,
     rowHeight,
     scrollX,
@@ -34,53 +36,54 @@ export function renderMouseover({
     hoveredRowIndices,
     highlightedColumnRuns,
   } = model
-  const width = msaAreaWidth - verticalScrollbarWidth
   ctx.resetTransform()
   ctx.clearRect(0, 0, width * highResScaleFactor, height * highResScaleFactor)
   ctx.scale(highResScaleFactor, highResScaleFactor)
 
-  // Highlight reference row (relativeTo) persistently
+  // rows and columns sit at a fixed pitch, so an index is all it takes to place
+  // a full-width or full-height band (matching fillRow in TreeCanvas)
+  const rowBand = (index: number) => {
+    ctx.fillRect(0, index * rowHeight + scrollY, width, rowHeight)
+  }
+  const colBand = (index: number) => {
+    ctx.fillRect(index * colWidth + scrollX, 0, colWidth, height)
+  }
+
+  // the reference row (relativeTo) stays lit, as does every tip under a hovered
+  // tree node
   if (referenceRowIndex !== undefined) {
     ctx.fillStyle = referenceColor
-    ctx.fillRect(0, referenceRowIndex * rowHeight + scrollY, width, rowHeight)
+    rowBand(referenceRowIndex)
   }
-
-  // Highlight multiple rows when hovering over tree nodes with children
-  if (hoveredRowIndices.length > 0) {
-    ctx.fillStyle = multiRowHoverColor
-    for (const rowIndex of hoveredRowIndices) {
-      ctx.fillRect(0, rowIndex * rowHeight + scrollY, width, rowHeight)
-    }
+  ctx.fillStyle = multiRowHoverColor
+  for (const rowIndex of hoveredRowIndices) {
+    rowBand(rowIndex)
   }
 
-  // Highlight multiple columns — draw each contiguous run as a filled, bordered
-  // band so a domain/motif highlight is clearly visible over the alignment
-  if (highlightedColumnRuns.length > 0) {
-    ctx.lineWidth = 2
-    for (const { start, end } of highlightedColumnRuns) {
-      const x = start * colWidth + scrollX
-      const w = (end - start + 1) * colWidth
-      ctx.fillStyle = highlightColumnsFill
-      ctx.fillRect(x, 0, w, height)
-      ctx.strokeStyle = highlightColumnsBorder
-      ctx.strokeRect(x, 0, w, height)
-    }
+  // each contiguous run of highlighted columns draws as one filled, bordered
+  // band, so a domain/motif highlight stays visible over the alignment
+  ctx.lineWidth = 2
+  for (const { start, end } of highlightedColumnRuns) {
+    const x = start * colWidth + scrollX
+    const w = (end - start + 1) * colWidth
+    ctx.fillStyle = highlightColumnsFill
+    ctx.fillRect(x, 0, w, height)
+    ctx.strokeStyle = highlightColumnsBorder
+    ctx.strokeRect(x, 0, w, height)
   }
 
+  ctx.fillStyle = hoverColor
   if (mouseCol !== undefined) {
-    ctx.fillStyle = hoverColor
-    ctx.fillRect(mouseCol * colWidth + scrollX, 0, colWidth, height)
+    colBand(mouseCol)
   }
   if (mouseRow !== undefined) {
-    ctx.fillStyle = hoverColor
-    ctx.fillRect(0, mouseRow * rowHeight + scrollY, width, rowHeight)
+    rowBand(mouseRow)
   }
+  ctx.fillStyle = clickColor
   if (mouseClickCol !== undefined) {
-    ctx.fillStyle = highlightColor
-    ctx.fillRect(mouseClickCol * colWidth + scrollX, 0, colWidth, height)
+    colBand(mouseClickCol)
   }
   if (mouseClickRow !== undefined) {
-    ctx.fillStyle = highlightColor
-    ctx.fillRect(0, mouseClickRow * rowHeight + scrollY, width, rowHeight)
+    rowBand(mouseClickRow)
   }
 }

package/src/components/overlayColors.ts

@@ -10,3 +10,9 @@ export const referenceColor = 'rgba(0,128,255,0.3)'
 // while the alignment cells are already colored so a lighter wash reads better.
 export const treeHoverColor = 'rgba(255,165,0,0.2)'
 export const multiRowHoverColor = 'rgba(255,165,0,0.15)'
+
+// the hovered column/row, and the one pinned by a click. Drawn on the alignment
+// overlay canvas and again as plain divs over the track area, which have to
+// match or the crosshair appears to change color as it crosses the tracks.
+export const hoverColor = 'rgba(0,0,0,0.15)'
+export const clickColor = 'rgba(128,128,0,0.2)'

package/src/components/tree/TreeCanvas.tsx

@@ -22,8 +22,8 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
   const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
 
-  const mouseoverRef = useCanvasAutorun(
-    ctx => {
+  const mouseoverRef = useCanvasAutorun({
+    draw: ctx => {
       if (isAlive(model)) {
         const {
           rowHeight,
@@ -61,8 +61,10 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
         }
       }
     },
-    [model],
-  )
+    width: treeAreaWidth,
+    height,
+    deps: [model],
+  })
 
   return (
     <div

package/src/components/tree/TreeCanvasBlock.tsx

@@ -60,15 +60,12 @@ const TreeCanvasBlock = observer(function ({
   const width = treeAreaWidth + padding
   const height = blockSize
 
-  const ref = useCanvasAutorun(
-    ctx => {
+  const canvasWidth = width * highResScaleFactor
+  const canvasHeight = height * highResScaleFactor
+  const ref = useCanvasAutorun({
+    draw: ctx => {
       ctx.resetTransform()
-      ctx.clearRect(
-        0,
-        0,
-        width * highResScaleFactor,
-        height * highResScaleFactor,
-      )
+      ctx.clearRect(0, 0, canvasWidth, canvasHeight)
       renderTreeCanvas({
         ctx,
         model,
@@ -77,8 +74,10 @@ const TreeCanvasBlock = observer(function ({
         theme,
       })
     },
-    [model, clickMap, offsetY, theme],
-  )
+    width: canvasWidth,
+    height: canvasHeight,
+    deps: [model, clickMap, offsetY, theme],
+  })
 
   const style = {
     width,
@@ -112,8 +111,8 @@ const TreeCanvasBlock = observer(function ({
 
       <canvas
         ref={ref}
-        width={width * highResScaleFactor}
-        height={height * highResScaleFactor}
+        width={canvasWidth}
+        height={canvasHeight}
         style={{ ...style, cursor: hovered ? 'pointer' : 'default' }}
         onMouseMove={event => {
           onMouseMove(event)

package/src/components/tree/TreeRuler.tsx

@@ -4,9 +4,14 @@ import { observer } from 'mobx-react'
 
 import type { MsaViewModel } from '../../model.ts'
 
+// The gutter above the tree panel. It spans the resize handle too, so whatever
+// follows it in the top row starts exactly where the alignment canvas does --
+// MainArea has TreePanel + VerticalResizeHandle before the alignment.
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
-  const { treeAreaWidth } = model
-  return <div style={{ flexShrink: 0, width: treeAreaWidth }} />
+  const { treeAreaWidth, resizeHandleWidth } = model
+  return (
+    <div style={{ flexShrink: 0, width: treeAreaWidth + resizeHandleWidth }} />
+  )
 })
 
 export default TreeRuler

package/src/components/tree/renderTreeCanvas.test.ts

@@ -117,8 +117,9 @@ describe('getNodeX cladogram positioning', () => {
   })
 })
 
-// the x values the tree pass actually strokes, for a model built from newick
-function drawnTreeXs(newick: string) {
+// the x values the tree pass actually strokes, for a model built from newick,
+// alongside the tree width they are expected to span
+function drawnTree(newick: string) {
   const model = stateModelFactory().create({
     type: 'MsaView',
     data: { msa: '>a\nA\n>b\nA\n>c\nA\n>d\nA', tree: newick },
@@ -150,19 +151,26 @@ function drawnTreeXs(newick: string) {
     offsetY: 0,
     theme: { palette: { text: { primary: '#000' } } } as Theme,
   })
-  return xs
+  return { xs, model }
 }
 
 describe('renderTreeCanvas horizontal extent', () => {
   it('spreads a cladogram across the tree area when branch lengths are absent', () => {
     // a lengthless newick forces cladogram mode; scaling it by the (zero) max
     // branch length would stack every node on x=0 as one vertical line
-    const xs = drawnTreeXs('((a,b),(c,d));')
-    expect(Math.max(...xs)).toBe(300)
+    const { xs, model } = drawnTree('((a,b),(c,d));')
+    expect(Math.max(...xs)).toBe(model.treeWidth)
   })
 
   it('scales a phylogram by branch length', () => {
-    const xs = drawnTreeXs('((a:0.1,b:0.2):0.3,(c:0.4,d:0.5):0.6);')
-    expect(Math.max(...xs)).toBeCloseTo(300)
+    const { xs, model } = drawnTree('((a:0.1,b:0.2):0.3,(c:0.4,d:0.5):0.6);')
+    expect(Math.max(...xs)).toBeCloseTo(model.treeWidth)
+  })
+
+  // labels off means no label gutter to reserve, so the tips reach the far edge
+  // of the tree area rather than stopping at the default treeWidth
+  it('hands the label gutter to the tree when labels are off', () => {
+    const { model } = drawnTree('((a,b),(c,d));')
+    expect(model.treeWidth).toBe(model.treeAreaWidth - 10 - model.marginLeft)
   })
 })