react-msaview 5.8.0 → 5.10.0

package/src/components/header/settingsMenuItems.ts

@@ -1,41 +1,34 @@
 import type { MsaViewModel } from '../../model.ts'
 import type { MenuItem } from '@jbrowse/core/ui/Menu'
 
+function toggle(label: string, checked: boolean, set: (arg: boolean) => void) {
+  return {
+    label,
+    type: 'checkbox' as const,
+    checked,
+    onClick: () => {
+      set(!checked)
+    },
+  }
+}
+
 export function msaSettingsMenuItems(model: MsaViewModel): MenuItem[] {
   const { drawMsaLetters, hideGaps, bgColor, showColumnStats } = model
   return [
-    {
-      label: 'Show column statistics on hover',
-      type: 'checkbox',
-      checked: showColumnStats,
-      onClick: () => {
-        model.setShowColumnStats(!showColumnStats)
-      },
-    },
-    {
-      label: 'Draw letters',
-      type: 'checkbox',
-      checked: drawMsaLetters,
-      onClick: () => {
-        model.setDrawMsaLetters(!drawMsaLetters)
-      },
-    },
-    {
-      label: 'Color letters instead of background of tiles',
-      type: 'checkbox',
-      checked: !bgColor,
-      onClick: () => {
-        model.setBgColor(!bgColor)
-      },
-    },
-    {
-      label: 'Enable hiding gappy columns?',
-      type: 'checkbox',
-      checked: hideGaps,
-      onClick: () => {
-        model.setHideGaps(!hideGaps)
-      },
-    },
+    toggle('Show column statistics on hover', showColumnStats, arg => {
+      model.setShowColumnStats(arg)
+    }),
+    toggle('Draw letters', drawMsaLetters, arg => {
+      model.setDrawMsaLetters(arg)
+    }),
+    // the checkbox reads as the inverse of the property it sets: bgColor draws
+    // the tile, and turning it off is what leaves the letter itself colored
+    toggle('Color letters instead of background of tiles', !bgColor, arg => {
+      model.setBgColor(!arg)
+    }),
+    toggle('Enable hiding gappy columns?', hideGaps, arg => {
+      model.setHideGaps(arg)
+    }),
   ]
 }
 
@@ -48,45 +41,20 @@ export function treeSettingsMenuItems(model: MsaViewModel): MenuItem[] {
     drawLabels,
   } = model
   return [
-    {
-      label: 'Show branch length',
-      type: 'checkbox',
-      checked: showBranchLen,
-      onClick: () => {
-        model.setShowBranchLen(!showBranchLen)
-      },
-    },
-    {
-      label: 'Show tree',
-      type: 'checkbox',
-      checked: drawTree,
-      onClick: () => {
-        model.setDrawTree(!drawTree)
-      },
-    },
-    {
-      label: 'Draw clickable bubbles on tree branches',
-      type: 'checkbox',
-      checked: drawNodeBubbles,
-      onClick: () => {
-        model.setDrawNodeBubbles(!drawNodeBubbles)
-      },
-    },
-    {
-      label: 'Tree labels align right',
-      type: 'checkbox',
-      checked: labelsAlignRight,
-      onClick: () => {
-        model.setLabelsAlignRight(!labelsAlignRight)
-      },
-    },
-    {
-      label: 'Draw labels',
-      type: 'checkbox',
-      checked: drawLabels,
-      onClick: () => {
-        model.setDrawLabels(!drawLabels)
-      },
-    },
+    toggle('Show branch length', showBranchLen, arg => {
+      model.setShowBranchLen(arg)
+    }),
+    toggle('Show tree', drawTree, arg => {
+      model.setDrawTree(arg)
+    }),
+    toggle('Draw clickable bubbles on tree branches', drawNodeBubbles, arg => {
+      model.setDrawNodeBubbles(arg)
+    }),
+    toggle('Tree labels align right', labelsAlignRight, arg => {
+      model.setLabelsAlignRight(arg)
+    }),
+    toggle('Draw labels', drawLabels, arg => {
+      model.setDrawLabels(arg)
+    }),
   ]
 }

package/src/components/msa/DomainLegend.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import ExpandLess from '@mui/icons-material/ExpandLess'
 import ExpandMore from '@mui/icons-material/ExpandMore'
@@ -8,11 +8,11 @@ import { observer } from 'mobx-react'
 import type { MsaViewModel } from '../../model.ts'
 
 const DomainLegend = observer(function ({ model }: { model: MsaViewModel }) {
-  const [expanded, setExpanded] = useState(true)
   const {
     actuallyShowDomains,
     visibleDomainTypes: visible,
     fillPalette,
+    showDomainLegend: expanded,
   } = model
   const ExpandIcon = expanded ? ExpandLess : ExpandMore
 
@@ -41,8 +41,9 @@ const DomainLegend = observer(function ({ model }: { model: MsaViewModel }) {
       >
         <IconButton
           size="small"
+          title={expanded ? 'Collapse domain key' : 'Expand domain key'}
           onClick={() => {
-            setExpanded(!expanded)
+            model.setShowDomainLegend(!expanded)
           }}
         >
           <ExpandIcon fontSize="small" />

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

@@ -16,21 +16,25 @@ const MSAMouseoverCanvas = observer(function ({
   const { height, msaAreaWidth, verticalScrollbarWidth, highResScaleFactor } =
     model
   const width = msaAreaWidth - verticalScrollbarWidth
-  const ref = useCanvasAutorun(
-    ctx => {
+  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/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/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)
@@ -39,48 +42,50 @@ export function renderMouseover({
   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/renderTreeCanvas.ts

@@ -45,7 +45,7 @@ export function getNodeX(
   return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * tipX
 }
 
-export function renderTree({
+function renderTree({
   offsetY,
   ctx,
   model,
@@ -89,7 +89,7 @@ export function renderTree({
   })
 }
 
-export function renderCollapsedTriangles({
+function renderCollapsedTriangles({
   ctx,
   clickMap,
   offsetY,
@@ -98,6 +98,7 @@ export function renderCollapsedTriangles({
   tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
+  collapsedSet,
 }: {
   ctx: RenderCtx
   clickMap?: ClickMapIndex
@@ -107,11 +108,11 @@ export function renderCollapsedTriangles({
   tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
+  collapsedSet: Set<string>
 }) {
   const {
     hierarchy,
     showBranchLenEffective: showBranchLen,
-    collapsed,
     blockSize,
     rowHeight,
     fontSize,
@@ -119,10 +120,9 @@ export function renderCollapsedTriangles({
   } = model
   // nothing collapsed is the common case, and the traversal below visits every
   // node in the tree on every block of every redraw
-  if (collapsed.length === 0) {
+  if (collapsedSet.size === 0) {
     return
   }
-  const collapsedSet = new Set(collapsed)
   const by = blockSizeYOverride ?? blockSize
   const halfHeight = Math.max(2, rowHeight * 0.42)
   forEachDescendant(hierarchy, node => {
@@ -171,7 +171,7 @@ export function renderCollapsedTriangles({
   })
 }
 
-export function renderNodeBubbles({
+function renderNodeBubbles({
   ctx,
   clickMap,
   offsetY,
@@ -179,6 +179,7 @@ export function renderNodeBubbles({
   tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
+  collapsedSet,
 }: {
   ctx: RenderCtx
   clickMap?: ClickMapIndex
@@ -187,16 +188,15 @@ export function renderNodeBubbles({
   tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
+  collapsedSet: Set<string>
 }) {
   const {
     hierarchy,
     showBranchLenEffective: showBranchLen,
-    collapsed,
     blockSize,
     marginLeft: ml,
   } = model
   const by = blockSizeYOverride ?? blockSize
-  const collapsedSet = new Set(collapsed)
   forEachDescendant(hierarchy, node => {
     const x = getNodeX(node, showBranchLen, tipX, maxDepthToLeaf)
     if (x === undefined) {
@@ -231,7 +231,7 @@ export function renderNodeBubbles({
   })
 }
 
-export function renderTreeLabels({
+function renderTreeLabels({
   theme,
   model,
   offsetY,
@@ -240,6 +240,7 @@ export function renderTreeLabels({
   tipX,
   maxDepthToLeaf,
   blockSizeYOverride,
+  collapsedSet,
 }: {
   model: MsaViewModel
   offsetY: number
@@ -249,6 +250,7 @@ export function renderTreeLabels({
   tipX: number
   maxDepthToLeaf: number
   blockSizeYOverride?: number
+  collapsedSet: Set<string>
 }) {
   const {
     fontSize,
@@ -262,16 +264,11 @@ export function renderTreeLabels({
     marginLeft,
     noTree,
     labelWidthMap,
-    collapsed,
   } = model
+  const by = blockSizeYOverride ?? blockSize
   // labels only exist for leaves, which are laid out top to bottom, so take the
   // same slice the MSA renderer uses instead of walking every tip per block
-  const visibleLeaves = getVisibleLeaves({
-    model,
-    offsetY,
-    blockSizeY: blockSizeYOverride ?? model.blockSize,
-  })
-  const by = blockSizeYOverride ?? blockSize
+  const visibleLeaves = getVisibleLeaves({ model, offsetY, blockSizeY: by })
   const emHeight = ctx.measureText('M').width
   if (labelsAlignRight) {
     ctx.textAlign = 'right'
@@ -289,7 +286,7 @@ export function renderTreeLabels({
     const displayName = treeMetadata[name]?.genome || name
     // a collapsed clade is drawn as a triangle + tip count; suppress its leaf
     // label when the "name" is just the auto-generated internal-node id
-    const isAnonymousCollapsed = collapsed.includes(id) && name === id
+    const isAnonymousCollapsed = collapsedSet.has(id) && name === id
     if (!isAnonymousCollapsed && inYBlock(y, offsetY, by)) {
       // note: +rowHeight/4 matches with -rowHeight/4 in msa
       const yp = y + fontSize / 4
@@ -389,6 +386,9 @@ export function renderTreeCanvas({
   // maxBranchLength for the cladogram would pin every node to x=0 for a tree
   // with no branch lengths -- which is exactly what forces cladogram mode.
   const tipX = showBranchLenEffective ? maxBranchLength : treeWidth
+  // built once for all three passes: each of them asks about a different node on
+  // every block of every redraw, and `collapsed` is a list
+  const collapsedSet = new Set(model.collapsed)
 
   if (!noTree && drawTree) {
     renderTree({
@@ -410,6 +410,7 @@ export function renderTreeCanvas({
       tipX,
       maxDepthToLeaf,
       blockSizeYOverride,
+      collapsedSet,
     })
 
     if (drawNodeBubbles) {
@@ -421,6 +422,7 @@ export function renderTreeCanvas({
         tipX,
         maxDepthToLeaf,
         blockSizeYOverride,
+        collapsedSet,
       })
     }
   }
@@ -435,6 +437,7 @@ export function renderTreeCanvas({
       tipX,
       maxDepthToLeaf,
       blockSizeYOverride,
+      collapsedSet,
     })
   }