react-msaview 5.4.1 → 5.6.0

package/src/components/tracks/renderTracksSvg.ts

@@ -7,14 +7,16 @@ import type { RenderCtx } from '../renderCtx.ts'
 
 export function drawConservationBars({
   ctx,
-  conservation,
+  values,
+  color,
   colWidth,
   trackHeight,
   offsetX,
   blockSize,
 }: {
   ctx: RenderCtx
-  conservation: number[]
+  values: number[]
+  color: string
   colWidth: number
   trackHeight: number
   offsetX: number
@@ -26,15 +28,23 @@ export function drawConservationBars({
     colWidth,
   })
 
-  ctx.fillStyle = 'gray'
-  for (let i = xStart; i < xEnd && i < conservation.length; i++) {
-    const value = conservation[i]!
+  ctx.fillStyle = color
+  for (let i = xStart; i < xEnd && i < values.length; i++) {
+    const value = values[i]!
     const barHeight = value * trackHeight
     const x = i * colWidth
     ctx.fillRect(x, trackHeight - barHeight, colWidth, barHeight)
   }
 }
 
+// the bar-track values live on model getters (kept off the plain track object so
+// the live canvas autorun stays reactive); select the right one by track id
+export function barTrackValues(model: MsaViewModel, trackId: string) {
+  return trackId === 'property-conservation'
+    ? model.propertyConservation
+    : model.conservation
+}
+
 export function drawTextTrackContent({
   ctx,
   data,
@@ -65,13 +75,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)
       }
     }
@@ -81,6 +91,7 @@ export function drawTextTrackContent({
 export function renderConservationTrack({
   model,
   ctx,
+  track,
   offsetX,
   offsetY,
   trackHeight,
@@ -89,13 +100,14 @@ export function renderConservationTrack({
 }: {
   model: MsaViewModel
   ctx: RenderCtx
+  track: BasicTrack
   offsetX: number
   offsetY: number
   trackHeight: number
   blockSizeXOverride?: number
   highResScaleFactorOverride?: number
 }) {
-  const { blockSize, colWidth, highResScaleFactor, conservation } = model
+  const { blockSize, colWidth, highResScaleFactor } = model
   const bx = blockSizeXOverride ?? blockSize
   const k = highResScaleFactorOverride ?? highResScaleFactor
 
@@ -105,7 +117,8 @@ export function renderConservationTrack({
 
   drawConservationBars({
     ctx,
-    conservation,
+    values: barTrackValues(model, track.model.id),
+    color: track.model.barColor ?? 'gray',
     colWidth,
     trackHeight,
     offsetX,
@@ -191,10 +204,11 @@ export function renderAllTracks({
   for (const track of turnedOnTracks) {
     const trackHeight = track.model.height
 
-    if (track.model.id === 'conservation') {
+    if (track.model.barColor !== undefined) {
       renderConservationTrack({
         model,
         ctx,
+        track,
         offsetX,
         offsetY: currentY,
         trackHeight,

package/src/components/tree/TreeCanvas.tsx

@@ -1,21 +1,18 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useRef } from 'react'
 
 import { isAlive } from '@jbrowse/mobx-state-tree'
-import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
 import TreeCanvasBlock from './TreeCanvasBlock.tsx'
 import { padding } from './renderTreeCanvas.ts'
+import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 import { useWheelScroll } from '../../useWheelScroll.ts'
+import { referenceColor, treeHoverColor } from '../overlayColors.ts'
 
 import type { MsaViewModel } from '../../model.ts'
 
-const referenceColor = 'rgba(0,128,255,0.3)'
-const treeHoverColor = 'rgba(255,165,0,0.2)'
-
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)
-  const mouseoverRef = useRef<HTMLCanvasElement>(null)
   const { treeWidth, height, blocksY, treeAreaWidth } = model
   const onScrollY = useCallback(
     (d: number) => {
@@ -25,58 +22,54 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   )
   const { onMouseDown, onMouseUp } = useWheelScroll({ ref, onScrollY })
 
-  useEffect(() => {
-    const ctx = mouseoverRef.current?.getContext('2d')
-    return ctx
-      ? autorun(() => {
-          if (isAlive(model)) {
-            const {
-              relativeTo,
-              leaves,
-              rowHeight,
-              hoveredTreeNode,
-              treeAreaWidth: w,
-              height: h,
-              scrollY: sy,
-              mouseOverRowName,
-            } = model
-            ctx.resetTransform()
-            ctx.clearRect(0, 0, w, h)
-
-            const leafByName = new Map(
-              leaves.map(leaf => [leaf.data.name, leaf]),
-            )
-            const fillRow = (name: string) => {
-              const leaf = leafByName.get(name)
-              if (leaf) {
-                ctx.fillRect(0, leaf.x! + sy - rowHeight / 2, w, rowHeight)
-              }
-            }
+  const mouseoverRef = useCanvasAutorun(
+    ctx => {
+      if (isAlive(model)) {
+        const {
+          relativeTo,
+          leaves,
+          rowHeight,
+          hoveredTreeNode,
+          treeAreaWidth: w,
+          height: h,
+          scrollY: sy,
+          mouseOverRowName,
+        } = model
+        ctx.resetTransform()
+        ctx.clearRect(0, 0, w, h)
 
-            if (relativeTo) {
-              ctx.fillStyle = referenceColor
-              fillRow(relativeTo)
-            }
+        const leafByName = new Map(leaves.map(leaf => [leaf.data.name, leaf]))
+        const fillRow = (name: string) => {
+          const leaf = leafByName.get(name)
+          if (leaf) {
+            ctx.fillRect(0, leaf.x! + sy - rowHeight / 2, w, rowHeight)
+          }
+        }
 
-            if (hoveredTreeNode) {
-              ctx.fillStyle = treeHoverColor
-              for (const descendantName of hoveredTreeNode.descendantNames) {
-                fillRow(descendantName)
-              }
-            }
+        if (relativeTo) {
+          ctx.fillStyle = referenceColor
+          fillRow(relativeTo)
+        }
 
-            if (
-              mouseOverRowName &&
-              mouseOverRowName !== relativeTo &&
-              !hoveredTreeNode?.descendantNames.includes(mouseOverRowName)
-            ) {
-              ctx.fillStyle = treeHoverColor
-              fillRow(mouseOverRowName)
-            }
+        if (hoveredTreeNode) {
+          ctx.fillStyle = treeHoverColor
+          for (const descendantName of hoveredTreeNode.descendantNames) {
+            fillRow(descendantName)
           }
-        })
-      : undefined
-  }, [model])
+        }
+
+        if (
+          mouseOverRowName &&
+          mouseOverRowName !== relativeTo &&
+          !hoveredTreeNode?.descendantNames.includes(mouseOverRowName)
+        ) {
+          ctx.fillStyle = treeHoverColor
+          fillRow(mouseOverRowName)
+        }
+      }
+    },
+    [model],
+  )
 
   return (
     <div

package/src/components/tree/TreeCanvasBlock.tsx

@@ -1,15 +1,16 @@
 import React, { useEffect, useRef, useState } from 'react'
 
+import { makeStyles } from '@jbrowse/core/util/tss-react'
 import { useTheme } from '@mui/material'
-import Flatbush from 'flatbush'
-import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
 
 import TreeBranchMenu from './TreeBranchMenu.tsx'
 import TreeNodeMenu from './TreeNodeMenu.tsx'
+import { ClickMapIndex } from './clickMap.ts'
 import { padding, renderTreeCanvas } from './renderTreeCanvas.ts'
+import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
 
+import type { ClickEntry } from './clickMap.ts'
 import type { MsaViewModel } from '../../model.ts'
 
 const useStyles = makeStyles()(theme => ({
@@ -36,55 +37,6 @@ interface TooltipData {
   y: number
 }
 
-interface ClickEntry {
-  name: string
-  id: string
-  branch?: boolean
-  minX: number
-  maxX: number
-  minY: number
-  maxY: number
-}
-
-class ClickMapIndex {
-  private flatbush: Flatbush | null = null
-  private entries: ClickEntry[] = []
-
-  clear() {
-    this.flatbush = null
-    this.entries = []
-  }
-
-  insert(entry: ClickEntry) {
-    this.entries.push(entry)
-  }
-
-  finish() {
-    if (this.entries.length === 0) {
-      this.flatbush = null
-    } else {
-      this.flatbush = new Flatbush(this.entries.length)
-      for (const entry of this.entries) {
-        this.flatbush.add(entry.minX, entry.minY, entry.maxX, entry.maxY)
-      }
-      this.flatbush.finish()
-    }
-  }
-
-  search(box: {
-    minX: number
-    maxX: number
-    minY: number
-    maxY: number
-  }): ClickEntry[] {
-    return (
-      this.flatbush
-        ?.search(box.minX, box.minY, box.maxX, box.maxY)
-        .map(i => this.entries[i]!) ?? []
-    )
-  }
-}
-
 const TreeCanvasBlock = observer(function ({
   model,
   offsetY,
@@ -94,7 +46,6 @@ const TreeCanvasBlock = observer(function ({
 }) {
   const { classes } = useStyles()
   const theme = useTheme()
-  const ref = useRef<HTMLCanvasElement>(null)
   const clickMap = useRef(new ClickMapIndex())
   const mouseoverRef = useRef<HTMLCanvasElement>(null)
   const [branchMenu, setBranchMenu] = useState<TooltipData>()
@@ -113,20 +64,10 @@ const TreeCanvasBlock = observer(function ({
   const w2 = width * highResScaleFactor
   const h2 = height * highResScaleFactor
 
-  useEffect(() => {
-    const ctx = ref.current?.getContext('2d')
-    if (!ctx) {
-      return
-    }
-
-    return autorun(() => {
+  const ref = useCanvasAutorun(
+    ctx => {
       ctx.resetTransform()
-      ctx.clearRect(
-        0,
-        0,
-        (treeAreaWidth + padding) * highResScaleFactor,
-        blockSize * highResScaleFactor,
-      )
+      ctx.clearRect(0, 0, w2, h2)
       renderTreeCanvas({
         ctx,
         model,
@@ -134,8 +75,9 @@ const TreeCanvasBlock = observer(function ({
         clickMap: clickMap.current,
         theme,
       })
-    })
-  }, [model, blockSize, highResScaleFactor, treeAreaWidth, offsetY, theme])
+    },
+    [model, blockSize, highResScaleFactor, treeAreaWidth, offsetY, theme],
+  )
 
   useEffect(() => {
     const ctx = mouseoverRef.current?.getContext('2d')

package/src/components/tree/clickMap.ts

@@ -0,0 +1,55 @@
+import Flatbush from 'flatbush'
+
+export interface ClickEntry {
+  name: string
+  id: string
+  branch?: boolean
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+interface Box {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+// Spatial index of clickable tree elements (leaf labels, node bubbles,
+// collapsed-clade triangles). Entries are collected during a render pass, then
+// finish() builds the Flatbush index queried by hit-testing.
+export class ClickMapIndex {
+  private flatbush: Flatbush | null = null
+  private entries: ClickEntry[] = []
+
+  clear() {
+    this.flatbush = null
+    this.entries = []
+  }
+
+  insert(entry: ClickEntry) {
+    this.entries.push(entry)
+  }
+
+  finish() {
+    if (this.entries.length === 0) {
+      this.flatbush = null
+    } else {
+      this.flatbush = new Flatbush(this.entries.length)
+      for (const entry of this.entries) {
+        this.flatbush.add(entry.minX, entry.minY, entry.maxX, entry.maxY)
+      }
+      this.flatbush.finish()
+    }
+  }
+
+  search(box: Box): ClickEntry[] {
+    return (
+      this.flatbush
+        ?.search(box.minX, box.minY, box.maxX, box.maxY)
+        .map(i => this.entries[i]!) ?? []
+    )
+  }
+}

package/src/components/tree/renderTreeCanvas.ts

@@ -5,6 +5,7 @@ import {
 } from '../../hierarchy.ts'
 import { setFontSize } from '../../setFontSize.ts'
 
+import type { ClickMapIndex } from './clickMap.ts'
 import type { HierarchyNode } from '../../hierarchy.ts'
 import type { MsaViewModel } from '../../model.ts'
 import type { RenderCtx } from '../renderCtx.ts'
@@ -16,6 +17,12 @@ const extendBounds = 5
 const radius = 2.5
 const d = radius * 2
 
+// whether a node's row-center y falls within the block being drawn, padded by
+// extendBounds so bubbles/labels/triangles straddling the edge still render
+function inYBlock(y: number, offsetY: number, by: number) {
+  return y > offsetY - extendBounds && y < offsetY + by + extendBounds
+}
+
 // Calculate node x-coordinate for both phylogram (with branch lengths) and cladogram (topology only) modes
 // For cladograms: x = (maxDepthToLeaf - nodeDepthToLeaf) / maxDepthToLeaf * maxWidth
 // This positions: leaves at maxWidth (rightmost), root at 0 (leftmost), internal nodes proportionally in between
@@ -36,28 +43,6 @@ function getNodeX(
   return ((maxDepthToLeaf - depthToLeaf) / maxDepthToLeaf) * maxBranchLen
 }
 
-interface ClickEntry {
-  name: string
-  id: string
-  branch?: boolean
-  minX: number
-  maxX: number
-  minY: number
-  maxY: number
-}
-
-interface ClickMapIndex {
-  clear(): void
-  insert(entry: ClickEntry): void
-  finish(): void
-  search(box: {
-    minX: number
-    maxX: number
-    minY: number
-    maxY: number
-  }): ClickEntry[]
-}
-
 export function renderTree({
   offsetY,
   ctx,
@@ -137,8 +122,7 @@ 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 = inYBlock(y, offsetY, by)
       // 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
@@ -214,11 +198,7 @@ export function renderNodeBubbles({
     const { data } = node
     const y = node.x!
     const { id, name } = data
-    if (
-      node.height >= 1 &&
-      y > offsetY - extendBounds &&
-      y < offsetY + by + extendBounds
-    ) {
+    if (node.height >= 1 && inYBlock(y, offsetY, by)) {
       const isCollapsed = collapsed.includes(id)
       ctx.strokeStyle = 'black'
       ctx.fillStyle = isCollapsed ? 'black' : 'white'
@@ -296,11 +276,7 @@ export function renderTreeLabels({
     // 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
-    if (
-      !isAnonymousCollapsed &&
-      y > offsetY - extendBounds &&
-      y < offsetY + by + extendBounds
-    ) {
+    if (!isAnonymousCollapsed && inYBlock(y, offsetY, by)) {
       // note: +rowHeight/4 matches with -rowHeight/4 in msa
       const yp = y + fontSize / 4
       let xp = 0

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
 
@@ -22,6 +40,7 @@ export const maxCellSize = 80
 // MSA model defaults
 export const defaultBgColor = true
 export const defaultColorSchemeName = 'maeditor'
+export const defaultShowColumnStats = true
 
 // Tree model defaults
 export const defaultDrawLabels = true

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/fetchUtils.ts

@@ -1,4 +1,6 @@
-import { fetchAndMaybeUnzipText } from '@jbrowse/core/util'
+import { fetchAndMaybeUnzipText, statusMessageText } from '@jbrowse/core/util'
+
+import type { RpcStatus } from '@jbrowse/core/util'
 
 export interface FetchStatus {
   msg: string
@@ -10,7 +12,7 @@ type Filehandle = Parameters<typeof fetchAndMaybeUnzipText>[0]
 
 type ProgressFetcher = (
   loc: Filehandle,
-  opts: { signal: AbortSignal; statusCallback: (msg: string) => void },
+  opts: { signal: AbortSignal; statusCallback: (status: RpcStatus) => void },
 ) => Promise<string>
 
 /**
@@ -28,7 +30,8 @@ export async function fetchTextWithProgress(
   try {
     return await fetcher(loc, {
       signal: controller.signal,
-      statusCallback: msg => {
+      statusCallback: status => {
+        const msg = statusMessageText(status)
         setStatus(
           msg
             ? {

package/src/index.ts

@@ -9,7 +9,7 @@ export { renderToSvg } from './renderToSvg.tsx'
 export { default as MSAView } from './components/Loading.tsx'
 export { default as MSAViewer } from './components/MSAViewer.tsx'
 export { type MsaViewModel, default as MSAModelF } from './model.ts'
-export type { MSAParserType } from 'msa-parsers'
+export type { MSAFormat, MSAParserType } from 'msa-parsers'
 export type { HierarchyNode } from './hierarchy.ts'
 export type { InterProScanResults } from './launchInterProScan.ts'
 export type {

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

@@ -1,6 +1,10 @@
 import { types } from '@jbrowse/mobx-state-tree'
 
-import { defaultBgColor, defaultColorSchemeName } from '../constants.ts'
+import {
+  defaultBgColor,
+  defaultColorSchemeName,
+  defaultShowColumnStats,
+} from '../constants.ts'
 
 import type { MSAFormat } from 'msa-parsers'
 
@@ -16,13 +20,20 @@ export function MSAModelF() {
        * #property
        * draw MSA tiles with a background color
        */
-      bgColor: defaultBgColor,
+      bgColor: types.stripDefault(types.boolean, defaultBgColor),
 
       /**
        * #property
        * default color scheme name
        */
-      colorSchemeName: defaultColorSchemeName,
+      colorSchemeName: types.stripDefault(types.string, defaultColorSchemeName),
+
+      /**
+       * #property
+       * show a per-column statistics tooltip (consensus, conservation, gaps,
+       * residue distribution) while hovering the alignment
+       */
+      showColumnStats: types.stripDefault(types.boolean, defaultShowColumnStats),
 
       /**
        * #property
@@ -49,6 +60,13 @@ export function MSAModelF() {
         self.bgColor = arg
       },
 
+      /**
+       * #action
+       */
+      setShowColumnStats(arg: boolean) {
+        self.showColumnStats = arg
+      },
+
       /**
        * #action
        * force a specific MSA parser, or pass undefined to auto-detect