react-msaview 6.5.0 → 8.0.0

package/src/components/msa/packDomainLanes.ts

@@ -0,0 +1,36 @@
+/**
+ * Assigns each of one row's bands a lane: the first lane whose last band ends
+ * before this one starts, so only bands that actually overlap stack. A row of
+ * adjacent exons packs into a single lane; a family with a domain nested inside
+ * it takes two.
+ *
+ * Packing runs left to right, but the result keeps the input's largest-first
+ * paint order. `laneCount` is the row's depth, which the renderer divides the
+ * row height by so a deep stack stays inside its own row.
+ *
+ * The coordinates are whatever the caller packs in: alignment columns for the
+ * overlay, residue positions for a `features` row panel.
+ */
+export function packDomainLanes<T extends { startCol: number; endCol: number }>(
+  bands: T[],
+): (T & { lane: number; laneCount: number })[] {
+  const laneEnds: number[] = []
+  const lanes = new Array<number>(bands.length)
+  const byStart = bands
+    .map((_, i) => i)
+    .sort((a, b) => bands[a]!.startCol - bands[b]!.startCol)
+
+  for (const i of byStart) {
+    const { startCol, endCol } = bands[i]!
+    const found = laneEnds.findIndex(end => end <= startCol)
+    const lane = found === -1 ? laneEnds.length : found
+    laneEnds[lane] = endCol
+    lanes[i] = lane
+  }
+
+  return bands.map((band, i) => ({
+    ...band,
+    lane: lanes[i]!,
+    laneCount: laneEnds.length,
+  }))
+}

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,13 +1,16 @@
-import { subFeatureRowHeight } from '../../constants.ts'
+import { domainUnderlineHeight, subFeatureRowHeight } from '../../constants.ts'
+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 { NodeWithIdsAndLength } from '../../types.ts'
+import type { DomainBand } from '../../types.ts'
 import type { RenderCtx } from '../renderCtx.ts'
+import type { Theme } from '@mui/material'
 
 export function renderBoxFeatureCanvasBlock({
   model,
+  theme,
   offsetX,
   offsetY,
   ctx,
@@ -18,144 +21,87 @@ export function renderBoxFeatureCanvasBlock({
   offsetX: number
   offsetY: number
   model: MsaViewModel
+  theme: Theme
   ctx: RenderCtx
   highResScaleFactorOverride?: number
   blockSizeXOverride?: number
   blockSizeYOverride?: number
-}) {
-  const { blockSize, rowHeight, highResScaleFactor, actuallyShowDomains } =
-    model
-  if (actuallyShowDomains) {
-    const k = highResScaleFactorOverride ?? highResScaleFactor
-    const bx = blockSizeXOverride ?? blockSize
-    const by = blockSizeYOverride ?? blockSize
-    ctx.resetTransform()
-    ctx.scale(k, k)
-    ctx.translate(-offsetX, rowHeight / 2 - offsetY)
-
-    drawTiles({
-      model,
-      ctx,
-      visibleLeaves: getVisibleLeaves({ model, offsetY, blockSizeY: by }),
-      offsetX,
-      blockWidth: bx,
-    })
-  }
-}
-
-function drawTiles({
-  model,
-  ctx,
-  visibleLeaves,
-  offsetX,
-  blockWidth,
-}: {
-  model: MsaViewModel
-  ctx: RenderCtx
-  visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
-  offsetX: number
-  blockWidth: number
 }) {
   const {
+    blockSize,
+    rowHeight,
+    highResScaleFactor,
+    actuallyShowDomains,
     subFeatureRows,
     colWidth,
-    rowHeight,
-    fillPalette,
-    strokePalette,
+    featureColors,
+    featureLabels,
     segmentLabels,
     showMsaLetters,
+    domainUnderline,
     domainBands,
   } = model
-  const h = subFeatureRows ? subFeatureRowHeight : rowHeight
+  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
+    ? Math.min(domainUnderlineHeight, rowHeight)
+    : rowHeight
   // exon numbers label the bands only when residue letters aren't drawn (zoomed
   // out); when letters show, the alternating shades alone mark the boundaries
-  // and a number would collide with the sequence
-  const drawSegmentLabels = !showMsaLetters && !subFeatureRows && h >= 9
-  // gene arrow heads stick out one row-height past the band, so pad the cull
-  // window enough that a band just outside the block still draws its head
-  const cull = h + colWidth
-  const xMin = offsetX - cull
-  const xMax = offsetX + blockWidth + cull
-
+  // and a number would collide with the sequence. A featureLabel encoding names
+  // what every span carries instead
+  const drawSegmentLabels =
+    !featureLabels && !showMsaLetters && !subFeatureRows && barHeight >= 9
   // 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
+  // gene arrow heads stick out up to a row height past the band, so pad the
+  // cull window enough that a band just outside the block still draws its head
+  const cull = rowHeight + colWidth
 
-  for (const node of visibleLeaves) {
-    const y = node.x!
-    const bands = domainBands.get(node.data.name)
-
-    if (bands) {
-      for (const { annotation, startCol, endCol, stackIndex } of bands) {
-        const { accession, strand } = annotation
-        const x = startCol * colWidth
-        const lw = colWidth * (endCol - startCol)
-        if (x + lw >= xMin && x <= xMax) {
-          const t = y - rowHeight + (subFeatureRows ? stackIndex * h : 0)
-          ctx.fillStyle = fillPalette[accession]!
-          ctx.strokeStyle = strokePalette[accession]!
-          if (strand === undefined) {
-            ctx.fillRect(x, t, lw, h)
-            ctx.strokeRect(x, t, lw, h)
-            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'
-                ctx.fillText(label, x + lw / 2, t + h / 2)
-              }
-            }
-          } else {
-            drawGeneArrow({ ctx, x, t, w: lw, h, strand })
-          }
-        }
-      }
-    }
-  }
-}
-
-// A gene arrow: a full-width rectangular body spanning the feature's
-// start..end columns, plus a triangular head that points *beyond* that end in
-// the strand direction (right for +, left for -). Keeping the body aligned to
-// the exact start/end columns means + and - strand features read as having the
-// same boundaries; the arrow lives outside them purely to show transcription
-// direction, preserving the column-by-column homology down the rows.
-function drawGeneArrow({
-  ctx,
-  x,
-  t,
-  w,
-  h,
-  strand,
-}: {
-  ctx: RenderCtx
-  x: number
-  t: number
-  w: number
-  h: number
-  strand: number
-}) {
-  // body spans bodyStart..bodyEnd (the exact columns); the head extends one
-  // row-height past bodyEnd in the strand direction
-  const dir = strand > 0 ? 1 : -1
-  const bodyStart = strand > 0 ? x : x + w
-  const bodyEnd = strand > 0 ? x + w : x
-  ctx.beginPath()
-  ctx.moveTo(bodyStart, t)
-  ctx.lineTo(bodyEnd, t)
-  ctx.lineTo(bodyEnd + dir * h, t + h / 2)
-  ctx.lineTo(bodyEnd, t + h)
-  ctx.lineTo(bodyStart, t + h)
-  ctx.closePath()
-  ctx.fill()
-  ctx.stroke()
+  drawFeatureSpans<DomainBand>({
+    ctx,
+    rows: spanRows(
+      getVisibleLeaves({ model, offsetY, blockSizeY: by }),
+      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
+      height: laneCount =>
+        subFeatureRows
+          ? Math.min(subFeatureRowHeight, rowHeight / laneCount)
+          : barHeight,
+      top: (y, lane, h) =>
+        y -
+        rowHeight +
+        (subFeatureRows ? lane * h : domainUnderline ? rowHeight - h : 0),
+      // the head keeps its full size on an underline bar, since a head as short
+      // as the bar reads as a nub rather than as a direction
+      headLength: h => (domainUnderline ? rowHeight / 2 : h),
+    },
+    xOf: band => [band.startCol * colWidth, band.endCol * colWidth],
+    colors: featureColors,
+    labelOf: band =>
+      featureLabels?.get(band.annotation) ??
+      (labelled && !labelled.has(band.annotation.accession)
+        ? segmentLabels.get(band.annotation.accession)
+        : undefined),
+    labelDrawn: band => labelled?.add(band.annotation.accession),
+    contrastText: contrastTextFn(theme),
+    xMin: offsetX - cull,
+    xMax: offsetX + bx + cull,
+  })
 }

package/src/components/msa/renderHighlights.ts

@@ -1,16 +1,37 @@
 import { setFontSize } from '../../setFontSize.ts'
+import { referenceColor } from '../overlayColors.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { RenderCtx } from '../renderCtx.ts'
 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)'
 export const highlightRowFill = 'rgba(255,140,0,0.18)'
 
 export const labelFontSize = 11
 const labelPad = 3
+// the label box above a highlight band; tree blocks also check rows this far
+// outside themselves
+export const highlightLabelHeight = labelFontSize + labelPad * 2
 
+export interface LabelBox {
+  left: number
+  right: number
+  top: number
+  bottom: number
+}
+
+/**
+ * A highlight's label, over its band where it fits and beside it where it does
+ * not, kept inside `bounds` and out of the way of the labels already placed.
+ *
+ * `bounds` keeps the label of a band scrolled partly off the left edge visible.
+ * With `placed`, a label that would overlap an earlier one, as two
+ * single-residue highlights a column apart do, steps down a row.
+ */
 export function drawHighlightLabel({
   ctx,
   theme,
@@ -18,6 +39,8 @@ export function drawHighlightLabel({
   x,
   y,
   spanWidth,
+  bounds,
+  placed,
 }: {
   ctx: RenderCtx
   theme: Theme
@@ -25,24 +48,46 @@ export function drawHighlightLabel({
   x: number
   y: number
   spanWidth: number
+  bounds?: { min: number; max: number }
+  placed?: LabelBox[]
 }) {
   setFontSize(ctx, labelFontSize)
   ctx.textAlign = 'start'
   const boxWidth = ctx.measureText(label).width + labelPad * 2
-  const boxHeight = labelFontSize + labelPad * 2
-  const left = boxWidth <= spanWidth ? x : x + spanWidth + 2
+  const boxHeight = highlightLabelHeight
+  let left = boxWidth <= spanWidth ? x : x + spanWidth + 2
+  if (bounds) {
+    left = Math.max(bounds.min, Math.min(left, bounds.max - boxWidth))
+  }
+  let top = y
+  if (placed) {
+    const overlaps = (box: LabelBox) =>
+      box.left < left + boxWidth &&
+      box.right > left &&
+      box.top < top + boxHeight &&
+      box.bottom > top
+    while (placed.some(overlaps)) {
+      top += boxHeight
+    }
+    placed.push({ left, right: left + boxWidth, top, bottom: top + boxHeight })
+  }
   ctx.fillStyle = theme.palette.background.paper
-  ctx.fillRect(left, y, boxWidth, boxHeight)
+  ctx.fillRect(left, top, boxWidth, boxHeight)
   ctx.fillStyle = theme.palette.text.primary
-  ctx.fillText(label, left + labelPad, y + labelPad + labelFontSize - 2)
+  ctx.fillText(label, left + labelPad, top + labelPad + labelFontSize - 2)
 }
 
 /**
- * The persistent `highlights` overlay on the alignment: row tints, bordered
- * column bands, and a label above each band. `offsetX`/`offsetY` are the
- * content coordinates at the canvas origin, the convention renderMSABlock
+ * The persistent overlay on the alignment: the band behind each clade of
+ * `clades`, the `rowTint` encoding's wash, the row tints and bordered column
+ * bands of `highlights`, and a label above each band. `offsetX`/`offsetY` are
+ * the content coordinates at the canvas origin, the convention renderMSABlock
  * uses, so the live overlay passes -scrollX/-scrollY and the export passes its
  * layout offsets.
+ *
+ * Rows are culled to the ones this block covers. A tint over every row of a
+ * large alignment would otherwise draw the whole column of rects in each block,
+ * and again on every pointer move through renderMouseover.
  */
 export function renderHighlights({
   ctx,
@@ -61,12 +106,45 @@ export function renderHighlights({
   width: number
   height: number
 }) {
-  const { resolvedHighlights, colWidth, rowHeight } = model
+  const { resolvedClades, resolvedHighlights, rowTints, colWidth, rowHeight } =
+    model
+  const placed: LabelBox[] = []
   ctx.lineWidth = 2
+  const firstRow = Math.max(0, Math.floor(offsetY / rowHeight))
+  const lastRow = Math.ceil((offsetY + height) / rowHeight)
+  const fillRow = (index: number) => {
+    ctx.fillRect(0, index * rowHeight - offsetY, width, rowHeight)
+  }
+  for (const { rows, color, mark } of resolvedClades) {
+    if (mark === 'highlight' && rows[1] >= firstRow && rows[0] <= lastRow) {
+      ctx.fillStyle = color
+      ctx.fillRect(
+        0,
+        rows[0] * rowHeight - offsetY,
+        width,
+        (rows[1] - rows[0] + 1) * rowHeight,
+      )
+    }
+  }
+  if (rowTints) {
+    for (
+      let index = firstRow;
+      index <= Math.min(lastRow, rowTints.length - 1);
+      index++
+    ) {
+      const color = rowTints[index]
+      if (color) {
+        ctx.fillStyle = color
+        fillRow(index)
+      }
+    }
+  }
   for (const { rowIndices, color } of resolvedHighlights) {
     ctx.fillStyle = color ?? highlightRowFill
     for (const index of rowIndices) {
-      ctx.fillRect(0, index * rowHeight - offsetY, width, rowHeight)
+      if (index >= firstRow && index <= lastRow) {
+        fillRow(index)
+      }
     }
   }
   for (const { startCol, endCol, label, color } of resolvedHighlights) {
@@ -80,7 +158,60 @@ export function renderHighlights({
     ctx.strokeStyle = color ?? highlightBorder
     ctx.strokeRect(x, 0, spanWidth, height)
     if (label) {
-      drawHighlightLabel({ ctx, theme, label, x, y: 0, spanWidth })
+      drawHighlightLabel({
+        ctx,
+        theme,
+        label,
+        x,
+        y: 0,
+        spanWidth,
+        bounds: { min: 0, max: width },
+        placed,
+      })
     }
   }
 }
+
+/**
+ * The overlay parts that come from the snapshot: the reference row's tint, a
+ * bordered band per run of highlighted columns, and the `highlights` layer. The
+ * live overlay draws these under its hover and click bands; the SVG export
+ * draws only these.
+ */
+export function renderPersistentHighlights({
+  ctx,
+  model,
+  theme,
+  offsetX,
+  offsetY,
+  width,
+  height,
+}: {
+  ctx: RenderCtx
+  model: MsaViewModel
+  theme: Theme
+  offsetX: number
+  offsetY: number
+  width: number
+  height: number
+}) {
+  const { colWidth, rowHeight, referenceRowIndex, highlightedColumnRuns } =
+    model
+
+  if (referenceRowIndex !== undefined) {
+    ctx.fillStyle = referenceColor
+    ctx.fillRect(0, referenceRowIndex * rowHeight - offsetY, width, rowHeight)
+  }
+
+  ctx.lineWidth = 2
+  for (const { start, end } of highlightedColumnRuns) {
+    const x = start * colWidth - offsetX
+    const w = (end - start + 1) * colWidth
+    ctx.fillStyle = highlightFill
+    ctx.fillRect(x, 0, w, height)
+    ctx.strokeStyle = highlightBorder
+    ctx.strokeRect(x, 0, w, height)
+  }
+
+  renderHighlights({ ctx, model, theme, offsetX, offsetY, width, height })
+}

package/src/components/msa/renderMSABlock.ts

@@ -1,5 +1,5 @@
 import { setFontSize } from '../../setFontSize.ts'
-import { adjustColorForContrast } from '../../util.ts'
+import { adjustColorForContrast, contrastTextFn } from '../../util.ts'
 import { getVisibleLeaves } from '../getVisibleLeaves.ts'
 import { domainBandCursor } from './domainBandCursor.ts'
 import { tileColorFn } from './tileColor.ts'
@@ -15,7 +15,6 @@ export function renderMSABlock({
   model,
   offsetX,
   offsetY,
-  contrastScheme,
   ctx,
   theme,
   highResScaleFactorOverride,
@@ -27,7 +26,6 @@ export function renderMSABlock({
   offsetY: number
   theme: Theme
   model: MsaViewModel
-  contrastScheme: Record<string, string>
   ctx: RenderCtx
   highResScaleFactorOverride?: number
   blockSizeXOverride?: number
@@ -68,7 +66,6 @@ export function renderMSABlock({
     model,
     ctx,
     theme,
-    contrastScheme,
     xStart,
     xEnd,
     visibleLeaves,
@@ -90,23 +87,10 @@ export function renderMSABlock({
   ctx.resetTransform()
 }
 
-// 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.
-function domainLetterColors(model: MsaViewModel, theme: Theme) {
-  return new Map(
-    Object.entries(model.fillPalette).map(([accession, fill]) => [
-      accession,
-      theme.palette.getContrastText(fill),
-    ]),
-  )
-}
-
 function drawTilesAndText({
   model,
   ctx,
   theme,
-  contrastScheme,
   visibleLeaves,
   xStart,
   xEnd,
@@ -117,7 +101,6 @@ function drawTilesAndText({
   model: MsaViewModel
   theme: Theme
   ctx: RenderCtx
-  contrastScheme: Record<string, string>
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number
   xEnd: number
@@ -133,27 +116,30 @@ function drawTilesAndText({
     relativeTo,
     showMsaLetters,
     subFeatureRows,
+    domainUnderline,
     domainBandsByStart,
   } = model
 
   const tiles = drawTiles && bgColor
   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
+    // a letter takes its color from the cell it lands on, so the scheme lookup
+    // is only waste when nothing draws letters
+    const needsColor = paintTiles || showMsaLetters
     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
+    // is a question about the cell's own color rather than about its letter.
+    const contrastText = contrastTextFn(theme)
     const offsetXAligned = xStart * colWidth
     const halfColWidth = colWidth / 2
     // note: -rowHeight/4 matches +rowHeight/4 in tree
     const quarterRowHeight = rowHeight / 4
     // with the tiles coming from the domain overlay instead, letters sit either
     // on a domain box or on the plain background; sub-row layout stacks the boxes
-    // above the letters, so those rows are all plain background
-    const overDomains = !drawTiles && !subFeatureRows
-    const domainColors = overDomains
-      ? domainLetterColors(model, theme)
-      : undefined
+    // above the letters and letter-color mode shrinks them to a bar under the
+    // row, so neither leaves anything behind a letter
+    const overDomains = !drawTiles && !subFeatureRows && !domainUnderline
 
     for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
       const node = visibleLeaves[i]!
@@ -186,18 +172,23 @@ function drawTilesAndText({
             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,
-                    )
+                contrastText(model.fillPalette[covering.annotation.accession])
+              : isMatchingReference
+                ? // the dot sits on the faint reference-match wash, which is
+                  // the theme's background with a little of its text color in it
+                  theme.palette.text.primary
+                : tiles
+                  ? // on top of a colored tile, or on the background where the
+                    // scheme gives that cell no color
+                    contrastText(color)
+                  : bgColor || !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,20 +1,9 @@
-import {
-  clickColor,
-  hoverColor,
-  multiRowHoverColor,
-  referenceColor,
-} from '../overlayColors.ts'
-import { renderHighlights } from './renderHighlights.ts'
+import { clickColor, hoverColor, multiRowHoverColor } from '../overlayColors.ts'
+import { renderPersistentHighlights } from './renderHighlights.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 import type { Theme } from '@mui/material'
 
-// 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)
-const highlightColumnsFill = 'rgba(255,140,0,0.28)'
-const highlightColumnsBorder = 'rgba(210,90,0,0.95)'
-
 export function renderMouseover({
   ctx,
   model,
@@ -36,9 +25,7 @@ export function renderMouseover({
     mouseClickRow,
     mouseClickCol,
     highResScaleFactor,
-    referenceRowIndex,
     hoveredRowIndices,
-    highlightedColumnRuns,
   } = model
   ctx.resetTransform()
   ctx.clearRect(0, 0, width * highResScaleFactor, height * highResScaleFactor)
@@ -53,30 +40,7 @@ export function renderMouseover({
     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
-    rowBand(referenceRowIndex)
-  }
-  ctx.fillStyle = multiRowHoverColor
-  for (const rowIndex of hoveredRowIndices) {
-    rowBand(rowIndex)
-  }
-
-  // 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)
-  }
-
-  renderHighlights({
+  renderPersistentHighlights({
     ctx,
     model,
     theme,
@@ -86,6 +50,12 @@ export function renderMouseover({
     height,
   })
 
+  // every tip under a hovered tree node stays lit
+  ctx.fillStyle = multiRowHoverColor
+  for (const rowIndex of hoveredRowIndices) {
+    rowBand(rowIndex)
+  }
+
   ctx.fillStyle = hoverColor
   if (mouseCol !== undefined) {
     colBand(mouseCol)