react-msaview 5.4.1 → 5.5.0

package/src/components/MSAViewer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
 import useMeasure from '@jbrowse/core/util/useMeasure'
@@ -9,6 +9,8 @@ import Loading from './Loading.tsx'
 
 import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 
+const theme = createJBrowseTheme()
+
 interface MSAViewerProps {
   msa?: string
   tree?: string
@@ -18,6 +20,12 @@ interface MSAViewerProps {
   gffFilehandle?: FileLocationType
   colorScheme?: string
   height?: number
+  /** initial per-column pixel width (zoom level) */
+  colWidth?: number
+  /** initial per-row pixel height */
+  rowHeight?: number
+  /** alignment columns (0-based) to highlight with a persistent overlay */
+  highlightColumns?: number[]
   /** row name to diff every other row against (matches render as ".") */
   relativeTo?: string
 }
@@ -31,25 +39,29 @@ export default function MSAViewer({
   gffFilehandle,
   colorScheme,
   height,
+  colWidth,
+  rowHeight,
+  highlightColumns,
   relativeTo,
 }: MSAViewerProps) {
-  const theme = useMemo(() => createJBrowseTheme(), [])
-  const model = useMemo(
-    () =>
-      MSAModelF().create({
-        type: 'MsaView',
-        ...(msa || tree || gff
-          ? { data: { msa: msa ?? '', tree: tree ?? '', gff } }
-          : {}),
-        ...(msaFilehandle ? { msaFilehandle } : {}),
-        ...(treeFilehandle ? { treeFilehandle } : {}),
-        ...(gffFilehandle ? { gffFilehandle } : {}),
-        ...(colorScheme ? { colorSchemeName: colorScheme } : {}),
-        ...(height ? { height } : {}),
-        ...(relativeTo ? { relativeTo } : {}),
-      }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
+  // lazy initializer: the model is created exactly once from the initial props
+  // (a stable MST instance — not a value safe to recompute, so not useMemo)
+  const [model] = useState(() =>
+    MSAModelF().create({
+      type: 'MsaView',
+      ...(msa || tree || gff
+        ? { data: { msa: msa ?? '', tree: tree ?? '', gff } }
+        : {}),
+      ...(msaFilehandle ? { msaFilehandle } : {}),
+      ...(treeFilehandle ? { treeFilehandle } : {}),
+      ...(gffFilehandle ? { gffFilehandle } : {}),
+      ...(colorScheme ? { colorSchemeName: colorScheme } : {}),
+      ...(height ? { height } : {}),
+      ...(colWidth ? { colWidth } : {}),
+      ...(rowHeight ? { rowHeight } : {}),
+      ...(highlightColumns ? { highlightColumns } : {}),
+      ...(relativeTo ? { relativeTo } : {}),
+    }),
   )
 
   const [ref, { width }] = useMeasure()

package/src/components/Track.tsx

@@ -26,12 +26,15 @@ const TrackLabel = observer(function TrackLabel({
   track: BasicTrack
 }) {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>()
-  const { drawLabels, rowHeight, treeAreaWidth: width } = model
+  const closeMenu = () => {
+    setAnchorEl(undefined)
+  }
+  const { drawLabels, fontSize, treeAreaWidth: width } = model
   const {
     model: { name, height },
   } = track
   const { classes } = useStyles()
-  const trackLabelHeight = Math.min(height, Math.max(8, rowHeight - 8))
+  const trackLabelHeight = Math.min(height, fontSize)
 
   return (
     <div
@@ -62,14 +65,14 @@ const TrackLabel = observer(function TrackLabel({
           transitionDuration={0}
           open
           onClose={() => {
-            setAnchorEl(undefined)
+            closeMenu()
           }}
         >
           <MenuItem
             dense
             onClick={() => {
               model.toggleTrack(track.model.id)
-              setAnchorEl(undefined)
+              closeMenu()
             }}
           >
             Close
@@ -81,7 +84,7 @@ const TrackLabel = observer(function TrackLabel({
                 TrackInfoDialog,
                 { onClose, model: track.model },
               ])
-              setAnchorEl(undefined)
+              closeMenu()
             }}
           >
             Get info

package/src/components/dialogs/FeatureDialog.tsx

@@ -1,11 +1,18 @@
 import React from 'react'
 
 import { Dialog } from '@jbrowse/core/ui'
-import { Button, DialogContent } from '@mui/material'
+import {
+  Button,
+  Checkbox,
+  DialogContent,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { getPalette } from '../../ggplotPalettes.ts'
-
 import type { MsaViewModel } from '../../model.ts'
 
 const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
@@ -35,53 +42,60 @@ const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
   )
 })
 
-const Table = observer(function ({ model }: { model: MsaViewModel }) {
-  const { tidyInterProAnnotationTypes, featureFilters } = model
-  const values = [...tidyInterProAnnotationTypes.values()]
-  const palette = getPalette(values.length - 1)
+const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
+  const { tidyInterProAnnotationTypes, tidyInterProAnnotations, fillPalette } =
+    model
+  const counts = new Map<string, number>()
+  for (const annot of tidyInterProAnnotations) {
+    counts.set(annot.accession, (counts.get(annot.accession) ?? 0) + 1)
+  }
   return (
     <>
       <Toggles model={model} />
-      <table>
-        <thead>
-          <tr>
-            <td />
-            <td>accession</td>
-            <td>name</td>
-            <td>description</td>
-          </tr>
-        </thead>
-        <tbody>
-          {values.map(({ accession, name, description }, idx) => (
-            <tr key={accession}>
-              <td>
-                <input
-                  type="checkbox"
-                  checked={featureFilters.get(accession) ?? false}
-                  onChange={() => {
-                    model.setFilter(
-                      accession,
-                      !model.featureFilters.get(accession),
-                    )
-                  }}
-                />
-              </td>
-              <td>{accession}</td>
-              <td>{name}</td>
-              <td>{description}</td>
-              <td>
-                <div
-                  style={{
-                    width: 20,
-                    height: 20,
-                    background: palette[idx] || 'black',
-                  }}
-                />
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
+      <Table size="small">
+        <TableHead>
+          <TableRow>
+            <TableCell padding="checkbox" />
+            <TableCell>color</TableCell>
+            <TableCell>accession</TableCell>
+            <TableCell>name</TableCell>
+            <TableCell>count</TableCell>
+            <TableCell>description</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {[...tidyInterProAnnotationTypes.values()].map(
+            ({ accession, name, description }) => (
+              <TableRow key={accession}>
+                <TableCell padding="checkbox">
+                  <Checkbox
+                    checked={model.featureFilters.get(accession) ?? false}
+                    onChange={() => {
+                      model.setFilter(
+                        accession,
+                        !model.featureFilters.get(accession),
+                      )
+                    }}
+                  />
+                </TableCell>
+                <TableCell>
+                  <div
+                    style={{
+                      width: 20,
+                      height: 20,
+                      background: fillPalette[accession],
+                    }}
+                  />
+                </TableCell>
+                <TableCell>{accession}</TableCell>
+                <TableCell>{name}</TableCell>
+                <TableCell>{counts.get(accession)}</TableCell>
+                <TableCell>{description}</TableCell>
+              </TableRow>
+            ),
+          )}
+        </TableBody>
+      </Table>
     </>
   )
 })
@@ -103,7 +117,7 @@ const FeatureTypeDialog = observer(function ({
       maxWidth="xl"
     >
       <DialogContent>
-        <Table model={model} />
+        <FeatureTable model={model} />
       </DialogContent>
     </Dialog>
   )

package/src/components/msa/DomainLegend.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react'
+
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+import { IconButton, Paper, Typography } from '@mui/material'
+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 } = model
+  const ExpandIcon = expanded ? ExpandLess : ExpandMore
+
+  return actuallyShowDomains && visible.length > 0 ? (
+    <Paper
+      elevation={3}
+      style={{
+        position: 'absolute',
+        top: 4,
+        right: 4,
+        zIndex: 100,
+        maxWidth: 260,
+        maxHeight: '60%',
+        display: 'flex',
+        flexDirection: 'column',
+        opacity: 0.95,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          padding: '2px 4px 2px 8px',
+        }}
+      >
+        <IconButton
+          size="small"
+          onClick={() => {
+            setExpanded(!expanded)
+          }}
+        >
+          <ExpandIcon fontSize="small" />
+        </IconButton>
+      </div>
+      {expanded ? (
+        <div style={{ overflow: 'auto', padding: '0 8px 6px' }}>
+          {visible.map(({ accession, name }) => (
+            <div
+              key={accession}
+              style={{ display: 'flex', alignItems: 'center', gap: 6 }}
+              title={accession}
+            >
+              <div
+                style={{
+                  width: 12,
+                  height: 12,
+                  flexShrink: 0,
+                  background: fillPalette[accession],
+                }}
+              />
+              <Typography variant="caption" noWrap>
+                {name}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      ) : null}
+    </Paper>
+  ) : null
+})
+
+export default DomainLegend

package/src/components/msa/MSACanvasBlock.tsx

@@ -89,7 +89,7 @@ const MSACanvasBlock = observer(function ({
   ])
 
   const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>()
-  const { hoveredInsertion } = model
+  const { hoveredInsertion, mouseOverDomains } = model
 
   return (
     <>
@@ -116,10 +116,11 @@ const MSACanvasBlock = observer(function ({
             } else {
               model.setMousePos(undefined, undefined)
             }
-            // only track client coords when an insertion is hovered (the only
-            // consumer is the tooltip below); avoids a re-render on every move
+            // only track client coords when there's something to show in the
+            // tooltip (insertion or a domain under the cursor); avoids a
+            // re-render on every move over plain alignment cells
             setMousePosition(
-              model.hoveredInsertion
+              model.hoveredInsertion || model.mouseOverDomains.length > 0
                 ? { x: event.clientX, y: event.clientY }
                 : undefined,
             )
@@ -167,6 +168,23 @@ const MSACanvasBlock = observer(function ({
             : hoveredInsertion.letters}
         </BaseTooltip>
       ) : null}
+      {!hoveredInsertion && mouseOverDomains.length > 0 && mousePosition ? (
+        <BaseTooltip
+          clientPoint={{ x: mousePosition.x, y: mousePosition.y + 15 }}
+        >
+          {mouseOverDomains.map(d => (
+            <div key={`${d.accession}-${d.start}-${d.end}`}>
+              <b>{d.name}</b> ({d.accession}) {d.start}-{d.end}
+              {d.description ? (
+                <>
+                  <br />
+                  {d.description}
+                </>
+              ) : null}
+            </div>
+          ))}
+        </BaseTooltip>
+      ) : null}
     </>
   )
 })

package/src/components/msa/MSAPanel.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
+import DomainLegend from './DomainLegend.tsx'
 import MSACanvas from './MSACanvas.tsx'
 import MSAMouseoverCanvas from './MSAMouseoverCanvas.tsx'
 
@@ -13,6 +14,7 @@ const MSAPanel = observer(function ({ model }: { model: MsaViewModel }) {
     <div style={{ position: 'relative' }}>
       <MSACanvas model={model} />
       <MSAMouseoverCanvas model={model} />
+      <DomainLegend model={model} />
     </div>
   )
 })

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({
@@ -124,8 +125,7 @@ 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 = xStart * colWidth
@@ -159,7 +159,7 @@ function drawTilesAndText({
         color = colorScheme[letter]
       }
 
-      if (drawBgTiles) {
+      if (bgColor) {
         ctx.fillStyle = isMatchingReference
           ? theme.palette.action.hover
           : color || theme.palette.background.default

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 = (xStart + i) * colWidth
-      ctx.fillStyle = color || 'white'
+      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/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