react-msaview 5.4.0 → 5.5.0

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,4 +1,5 @@
 import { getVisibleLeaves } from './getVisibleLeaves.ts'
+import { subFeatureRowHeight } from '../../constants.ts'
 
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
@@ -53,38 +54,93 @@ function drawTiles({
     rowHeight,
     fillPalette,
     strokePalette,
+    segmentLabels,
+    showMsaLetters,
     tidyFilteredGatheredInterProAnnotations,
   } = model
+  const h = subFeatureRows ? subFeatureRowHeight : 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
 
   for (let i = 0, l1 = visibleLeaves.length; i < l1; i++) {
     const node = visibleLeaves[i]!
-    const {
-      x,
-      data: { name },
-    } = node
-    const y = x!
-
+    const { name } = node.data
+    const y = node.x!
     const entry = tidyFilteredGatheredInterProAnnotations[name]
 
     if (entry) {
       for (let j = 0, l2 = entry.length; j < l2; j++) {
-        const { start, end, accession } = entry[j]!
+        const { start, end, accession, strand } = entry[j]!
         // Convert sequence positions to visible column positions
         // seqPos is 1-based from InterPro, so subtract 1 for 0-based
         const m1 = model.seqPosToVisibleCol(name, start - 1)
         const m2 = model.seqPosToVisibleCol(name, end)
-        if (m1 === undefined || m2 === undefined) {
-          continue // Skip if either position is hidden
+        if (m1 !== undefined && m2 !== undefined) {
+          const x = m1 * colWidth
+          const t = y - rowHeight + (subFeatureRows ? j * h : 0)
+          const lw = colWidth * (m2 - m1)
+          ctx.fillStyle = fillPalette[accession]!
+          ctx.strokeStyle = strokePalette[accession]!
+          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 fontSize = Math.min(h - 2, 11)
+              ctx.font = `${fontSize}px sans-serif`
+              if (ctx.measureText(label).width + 2 <= lw) {
+                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 })
+          }
         }
-        const x = m1 * colWidth
-        ctx.fillStyle = fillPalette[accession]!
-        ctx.strokeStyle = strokePalette[accession]!
-        const h = subFeatureRows ? 4 : rowHeight
-        const t = y - rowHeight + (subFeatureRows ? j * h : 0)
-        const lw = colWidth * (m2 - m1)
-        ctx.fillRect(x, t, lw, h)
-        ctx.strokeRect(x, t, lw, h)
       }
     }
   }
 }
+
+// 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()
+}

package/src/components/msa/renderMSABlock.ts

@@ -46,6 +46,7 @@ export function renderMSABlock({
   ctx.scale(k, k)
   ctx.translate(-offsetX, rowHeight / 2 - offsetY)
   ctx.textAlign = 'center'
+  ctx.textBaseline = 'alphabetic'
   setFontSize(ctx, fontSize, !bgColor)
 
   const { xStart, xEnd } = visibleColRange({
@@ -65,7 +66,6 @@ export function renderMSABlock({
       ctx,
       theme,
       contrastScheme,
-      offsetX,
       xStart,
       xEnd,
       visibleLeaves,
@@ -75,7 +75,6 @@ export function renderMSABlock({
     drawText({
       model,
       ctx,
-      offsetX,
       xStart,
       xEnd,
       visibleLeaves,
@@ -94,7 +93,6 @@ export function renderMSABlock({
 
 function drawTilesAndText({
   model,
-  offsetX,
   ctx,
   theme,
   contrastScheme,
@@ -104,7 +102,6 @@ function drawTilesAndText({
   referenceSeq,
 }: {
   model: MsaViewModel
-  offsetX: number
   theme: Theme
   ctx: RenderCtx
   contrastScheme: Record<string, string>
@@ -128,11 +125,10 @@ function drawTilesAndText({
 
   const isClustalX = colorSchemeName === 'clustalx_protein_dynamic'
   const isPercentIdentity = colorSchemeName === 'percent_identity_dynamic'
-  const drawBgTiles = bgColor || isClustalX || isPercentIdentity
-  if (!drawBgTiles && !showMsaLetters) {
+  if (!bgColor && !showMsaLetters) {
     return
   }
-  const offsetXAligned = offsetX - (offsetX % colWidth)
+  const offsetXAligned = xStart * colWidth
   const halfColWidth = colWidth / 2
   const quarterRowHeight = rowHeight / 4
 
@@ -163,7 +159,7 @@ function drawTilesAndText({
         color = colorScheme[letter]
       }
 
-      if (drawBgTiles) {
+      if (bgColor) {
         ctx.fillStyle = isMatchingReference
           ? theme.palette.action.hover
           : color || theme.palette.background.default
@@ -190,14 +186,12 @@ function drawTilesAndText({
 // so we only need to draw text here.
 function drawText({
   model,
-  offsetX,
   ctx,
   visibleLeaves,
   xStart,
   xEnd,
   referenceSeq,
 }: {
-  offsetX: number
   model: MsaViewModel
   ctx: RenderCtx
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
@@ -210,7 +204,7 @@ function drawText({
   if (!showMsaLetters) {
     return
   }
-  const offsetXAligned = offsetX - (offsetX % colWidth)
+  const offsetXAligned = xStart * colWidth
   const halfColWidth = colWidth / 2
   const quarterRowHeight = rowHeight / 4
   // note: -rowHeight/4 matches +rowHeight/4 in tree

package/src/components/msa/renderMSAMouseover.ts

@@ -2,9 +2,31 @@ 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)
+const highlightColumnsFill = 'rgba(255,140,0,0.28)'
+const highlightColumnsBorder = 'rgba(210,90,0,0.95)'
 const referenceColor = 'rgba(0,128,255,0.3)' // Blue highlight for reference row
 const multiRowHoverColor = 'rgba(255,165,0,0.15)' // Orange highlight for multi-row tree hover
 
+// Collapse sorted column indices into contiguous [start,end] runs so a run of
+// highlighted columns draws as one bordered band rather than per-column slices
+// (which would draw internal borders).
+function contiguousRuns(columns: number[]) {
+  const sorted = [...columns].sort((a, b) => a - b)
+  const runs: { start: number; end: number }[] = []
+  for (const col of sorted) {
+    const last = runs.at(-1)
+    if (last && col === last.end + 1) {
+      last.end = col
+    } else {
+      runs.push({ start: col, end: col })
+    }
+  }
+  return runs
+}
+
 export function renderMouseover({
   ctx,
   model,
@@ -54,11 +76,17 @@ export function renderMouseover({
     }
   }
 
-  // Highlight multiple columns
+  // Highlight multiple columns — draw each contiguous run as a filled, bordered
+  // band so a domain/motif highlight is clearly visible over the alignment
   if (highlightedColumns?.length) {
-    ctx.fillStyle = highlightColor
-    for (const col of highlightedColumns) {
-      ctx.fillRect(col * colWidth + scrollX, 0, colWidth, height)
+    ctx.lineWidth = 2
+    for (const { start, end } of contiguousRuns(highlightedColumns)) {
+      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)
     }
   }
 

package/src/components/renderCtx.ts

@@ -26,5 +26,6 @@ export type RenderCtx = Pick<
   | 'strokeRect'
   | 'strokeStyle'
   | 'textAlign'
+  | 'textBaseline'
   | 'translate'
 >

package/src/components/tracks/renderTracksSvg.ts

@@ -65,13 +65,13 @@ export function drawTextTrackContent({
 
   for (let i = 0; str && i < str.length; i++) {
     const letter = str[i]!
-    const color = colorScheme[letter.toUpperCase()]
+    const upper = letter.toUpperCase()
     if (bgColor) {
-      const x = i * colWidth + offsetX - (offsetX % colWidth)
-      ctx.fillStyle = color || 'white'
+      const x = (xStart + i) * colWidth
+      ctx.fillStyle = colorScheme[upper] || 'white'
       ctx.fillRect(x, 0, colWidth, rowHeight)
       if (rowHeight >= 10 && colWidth >= rowHeight / 2) {
-        ctx.fillStyle = contrastScheme[letter.toUpperCase()] || 'black'
+        ctx.fillStyle = contrastScheme[upper] || 'black'
         ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1)
       }
     }

package/src/components/tree/renderTreeCanvas.ts

@@ -29,6 +29,9 @@ function getNodeX(
   if (showBranchLen) {
     return node.len
   }
+  if (maxDepthToLeaf === 0) {
+    return 0
+  }
   const depthToLeaf = calcDepthToLeaf(node)
   return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * maxBranchLen
 }
@@ -134,7 +137,8 @@ export function renderCollapsedTriangles({
     if (collapsed.includes(id)) {
       const apexX = getNodeX(node, showBranchLen, maxBranchLen, maxDepthToLeaf)
       const y = node.x!
-      const inBlock = y > offsetY - extendBounds && y < offsetY + by + extendBounds
+      const inBlock =
+        y > offsetY - extendBounds && y < offsetY + by + extendBounds
       // in cladogram mode the hidden tips align at the right edge, otherwise use
       // the branch-length extent recorded in the model's hierarchy getter
       const baseX = showBranchLen

package/src/constants.ts

@@ -9,6 +9,24 @@ export const defaultShowDomains = false
 export const defaultHideGaps = true
 export const defaultAllowedGappyness = 100
 export const defaultSubFeatureRows = false
+// row height for each stacked feature when subFeatureRows is on
+export const subFeatureRowHeight = 4
+
+// Feature types that are ordinal *segments* of a single transcript (exons and
+// the like) rather than categorical domains. Their identity is their position,
+// so the overlay alternates two shades to mark boundaries and labels them by
+// number, instead of assigning every one a distinct hue + legend row.
+export const segmentFeatureTypes = new Set([
+  'exon',
+  'CDS',
+  'five_prime_UTR',
+  'three_prime_UTR',
+  'UTR',
+  'intron',
+])
+
+// the two shades alternated across adjacent segments (exons)
+export const segmentShades = ['#9fb6d4', '#d4dcea']
 export const defaultDrawMsaLetters = true
 export const defaultScrollZoom = false
 

package/src/createPaletteMap.ts

@@ -1,11 +1,24 @@
+import { colord } from 'colord'
+
 import palettes from './ggplotPalettes.ts'
 
 /**
- * Creates a map from keys to colors using ggplot-style palettes.
- * The palette is selected based on the number of keys.
+ * Creates a map from keys to colors. Up to the largest ggplot palette (8 keys)
+ * we use the hand-picked ggplot colors; beyond that — e.g. a gene-structure
+ * overlay with one feature per exon — we generate evenly spaced HSL hues so
+ * every key still gets a distinct, stable color instead of running off the end
+ * of the palette.
  */
 export function createPaletteMap(keys: string[]) {
-  const k = Math.min(keys.length - 1, palettes.length - 1)
-  const palette = palettes[k]!
-  return Object.fromEntries(keys.map((key, i) => [key, palette[i]!]))
+  const n = keys.length
+  if (n <= palettes.length) {
+    const palette = palettes[n - 1]!
+    return Object.fromEntries(keys.map((key, i) => [key, palette[i]!]))
+  }
+  return Object.fromEntries(
+    keys.map((key, i) => [
+      key,
+      colord({ h: (i * 360) / n, s: 60, l: 60 }).toHex(),
+    ]),
+  )
 }

package/src/hierarchy.ts

@@ -269,7 +269,10 @@ export function collapsedSubtreeLengthExtent<T extends { length?: number }>(
       const kids = n.children ?? n._children
       if (kids?.length) {
         for (const child of kids) {
-          stack.push({ node: child, acc: acc + Math.max(child.data.length ?? 0, 0) })
+          stack.push({
+            node: child,
+            acc: acc + Math.max(child.data.length ?? 0, 0),
+          })
         }
       } else {
         min = Math.min(min, acc)

package/src/launchInterProScan.ts

@@ -13,9 +13,11 @@ export interface InterProScanResults {
         name: string
         description: string
         accession: string
+        // original GFF feature type (exon, CDS, ...) when sourced from GFF
+        featureType?: string
       }
     }
-    locations: { start: number; end: number }[]
+    locations: { start: number; end: number; strand?: number }[]
   }[]
   xref: { id: string }[]
 }

package/src/model/msaModel.ts

@@ -29,7 +29,9 @@ export function MSAModelF() {
        * force the MSA data to be parsed as a specific format instead of relying
        * on auto-detection (which is ambiguous between e.g. fasta and a3m)
        */
-      msaFormat: types.maybe(types.enumeration<MSAFormat>('MSAFormat', msaFormats)),
+      msaFormat: types.maybe(
+        types.enumeration<MSAFormat>('MSAFormat', msaFormats),
+      ),
     })
     .actions(self => ({
       /**