react-msaview 4.4.6 → 4.5.0

package/src/components/msa/MSACanvasBlock.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useMemo, useRef } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 
+import { BaseTooltip } from '@jbrowse/core/ui'
 import { useTheme } from '@mui/material'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
@@ -79,55 +80,72 @@ const MSACanvasBlock = observer(function ({
     contrastScheme,
   ])
 
+  const [mousePosition, setMousePosition] = useState<{ x: number; y: number }>()
+  const { hoveredInsertion } = model
+
   return (
-    <canvas
-      ref={ref}
-      onMouseMove={event => {
-        if (!ref.current) {
-          return
-        }
-        const { left, top } = ref.current.getBoundingClientRect()
-        const mouseX = event.clientX - left + offsetX
-        const mouseY = event.clientY - top + offsetY
-        const x = Math.floor(mouseX / colWidth)
-        const y = Math.floor(mouseY / rowHeight)
+    <>
+      <canvas
+        ref={ref}
+        onMouseMove={event => {
+          if (!ref.current) {
+            return
+          }
+          setMousePosition({ x: event.clientX, y: event.clientY })
+          const { left, top } = ref.current.getBoundingClientRect()
+          const mouseX = event.clientX - left + offsetX
+          const mouseY = event.clientY - top + offsetY
+          const x = Math.floor(mouseX / colWidth)
+          const y = Math.floor(mouseY / rowHeight)
 
-        // Only set mouse position if within valid MSA bounds
-        if (x >= 0 && x < model.numColumns && y >= 0 && y < model.numRows) {
-          model.setMousePos(x, y)
-        } else {
-          // Clear mouse position when outside bounds
-          model.setMousePos(undefined, undefined)
-        }
-      }}
-      onClick={event => {
-        if (!ref.current) {
-          return
-        }
-        const { left, top } = ref.current.getBoundingClientRect()
-        const mouseX = event.clientX - left + offsetX
-        const mouseY = event.clientY - top + offsetY
-        const x = Math.floor(mouseX / colWidth)
-        const y = Math.floor(mouseY / rowHeight)
-        if (x === mouseClickCol && y === mouseClickRow) {
-          model.setMouseClickPos(undefined, undefined)
-        } else {
-          model.setMouseClickPos(x, y)
-        }
-      }}
-      onMouseLeave={() => {
-        model.setMousePos()
-      }}
-      width={blockSize * highResScaleFactor}
-      height={blockSize * highResScaleFactor}
-      style={{
-        position: 'absolute',
-        top: scrollY + offsetY,
-        left: scrollX + offsetX,
-        width: blockSize,
-        height: blockSize,
-      }}
-    />
+          // Only set mouse position if within valid MSA bounds
+          if (x >= 0 && x < model.numColumns && y >= 0 && y < model.numRows) {
+            model.setMousePos(x, y)
+          } else {
+            // Clear mouse position when outside bounds
+            model.setMousePos(undefined, undefined)
+          }
+        }}
+        onClick={event => {
+          if (!ref.current) {
+            return
+          }
+          const { left, top } = ref.current.getBoundingClientRect()
+          const mouseX = event.clientX - left + offsetX
+          const mouseY = event.clientY - top + offsetY
+          const x = Math.floor(mouseX / colWidth)
+          const y = Math.floor(mouseY / rowHeight)
+          if (x === mouseClickCol && y === mouseClickRow) {
+            model.setMouseClickPos(undefined, undefined)
+          } else {
+            model.setMouseClickPos(x, y)
+          }
+        }}
+        onMouseLeave={() => {
+          model.setMousePos()
+          setMousePosition(undefined)
+        }}
+        width={blockSize * highResScaleFactor}
+        height={blockSize * highResScaleFactor}
+        style={{
+          position: 'absolute',
+          top: scrollY + offsetY,
+          left: scrollX + offsetX,
+          width: blockSize,
+          height: blockSize,
+        }}
+      />
+      {hoveredInsertion && mousePosition ? (
+        <BaseTooltip
+          clientPoint={{ x: mousePosition.x, y: mousePosition.y + 15 }}
+        >
+          Insertion ({hoveredInsertion.letters.length}bp):{' '}
+          {hoveredInsertion.letters.length > 20
+            ? `${hoveredInsertion.letters.slice(0, 20)}...`
+            : hoveredInsertion.letters}
+        </BaseTooltip>
+      ) : null}
+    </>
   )
 })
 

package/src/components/msa/renderMSABlock.ts

@@ -1,5 +1,3 @@
-import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes'
-
 import type { MsaViewModel } from '../../model'
 import type { NodeWithIdsAndLength } from '../../types'
 import type { Theme } from '@mui/material'
@@ -57,7 +55,6 @@ export function renderMSABlock({
       ctx,
       theme,
       offsetX,
-      offsetY,
       xStart,
       xEnd,
       visibleLeaves,
@@ -73,6 +70,13 @@ export function renderMSABlock({
     xEnd,
     visibleLeaves,
   })
+  drawInsertionIndicators({
+    model,
+    ctx,
+    xStart,
+    xEnd,
+    visibleLeaves,
+  })
   ctx.resetTransform()
 }
 
@@ -88,7 +92,6 @@ function drawTiles({
   model: MsaViewModel
   offsetX: number
   theme: Theme
-  offsetY: number
   ctx: CanvasRenderingContext2D
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number
@@ -127,25 +130,12 @@ function drawTiles({
         const r1 = colorSchemeName === 'clustalx_protein_dynamic'
         const r2 = colorSchemeName === 'percent_identity_dynamic'
         const color = r1
-          ? getClustalXColor(
-              // use model.colStats dot notation here: delay use of colStats
-              // until absolutely needed
-              model.colStats[xStart + i]!,
-              model.colStatsSums[xStart + i]!,
-              model,
-              name,
-              xStart + i,
-            )
+          ? model.colClustalX[xStart + i]![letter]
           : r2
-            ? getPercentIdentityColor(
-                // use model.colStats dot notation here: delay use of
-                // colStats until absolutely needed
-                model.colStats[xStart + i]!,
-                model.colStatsSums[xStart + i]!,
-                model,
-                name,
-                xStart + i,
-              )
+            ? (() => {
+                const consensus = model.colConsensus[xStart + i]!
+                return letter === consensus.letter ? consensus.color : undefined
+              })()
             : colorScheme[letter.toUpperCase()]
         if (bgColor || r1 || r2) {
           // Use a very light background for matching positions in relative mode
@@ -237,3 +227,73 @@ function drawText({
     }
   }
 }
+
+function drawInsertionIndicators({
+  model,
+  ctx,
+  visibleLeaves,
+  xStart,
+  xEnd,
+}: {
+  model: MsaViewModel
+  ctx: CanvasRenderingContext2D
+  visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
+  xStart: number
+  xEnd: number
+}) {
+  const { bgColor, hideGapsEffective } = model
+  if (!hideGapsEffective) {
+    return
+  }
+
+  ctx.lineWidth = 1
+  ctx.strokeStyle = '#f0f'
+  drawZigZag({ visibleLeaves, xStart, ctx, model, xEnd, offset: 0 })
+  ctx.strokeStyle = !bgColor ? '#000' : '#fff'
+  drawZigZag({ visibleLeaves, xStart, ctx, model, xEnd, offset: -1 })
+}
+
+function drawZigZag({
+  model,
+  ctx,
+  visibleLeaves,
+  xStart,
+  xEnd,
+  offset,
+}: {
+  model: MsaViewModel
+  ctx: CanvasRenderingContext2D
+  visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
+  xStart: number
+  xEnd: number
+  offset: number
+}) {
+  const zigSize = 1
+  const { colWidth, rowHeight, insertionPositions } = model
+  for (const node of visibleLeaves) {
+    const { name } = node.data
+    const insertions = insertionPositions.get(name)
+    if (insertions) {
+      const y = node.x!
+      for (const { pos } of insertions) {
+        if (pos >= xStart && pos < xEnd) {
+          const x = pos * colWidth
+          const top = y - rowHeight
+          const bottom = y
+          ctx.beginPath()
+          ctx.moveTo(x + offset, top + offset)
+          let currentY = top
+          let goRight = true
+          while (currentY < bottom) {
+            const nextY = Math.min(currentY + zigSize * 2, bottom)
+            const nextX = goRight ? x + zigSize : x - zigSize
+            ctx.lineTo(nextX + offset, nextY + offset)
+            currentY = nextY
+            goRight = !goRight
+          }
+          ctx.stroke()
+        }
+      }
+    }
+  }
+}

package/src/components/tracks/renderTracksSvg.ts

@@ -0,0 +1,157 @@
+import type { MsaViewModel } from '../../model'
+import type { BasicTrack } from '../../types'
+
+export function renderConservationTrack({
+  model,
+  ctx,
+  offsetX,
+  offsetY,
+  trackHeight,
+  blockSizeXOverride,
+  highResScaleFactorOverride,
+}: {
+  model: MsaViewModel
+  ctx: CanvasRenderingContext2D
+  offsetX: number
+  offsetY: number
+  trackHeight: number
+  blockSizeXOverride?: number
+  highResScaleFactorOverride?: number
+}) {
+  const { blockSize, colWidth, highResScaleFactor, conservation } = model
+  const bx = blockSizeXOverride ?? blockSize
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+
+  ctx.resetTransform()
+  ctx.scale(k, k)
+  ctx.translate(-offsetX, offsetY)
+
+  const xStart = Math.max(0, Math.floor(offsetX / colWidth))
+  const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth))
+
+  for (let i = xStart; i < xEnd && i < conservation.length; i++) {
+    const value = conservation[i]!
+    const barHeight = value * trackHeight
+    const x = i * colWidth
+
+    const hue = value * 120
+    ctx.fillStyle = `hsl(${hue}, 70%, 50%)`
+    ctx.fillRect(x, trackHeight - barHeight, colWidth, barHeight)
+  }
+
+  ctx.resetTransform()
+}
+
+export function renderTextTrack({
+  model,
+  ctx,
+  track,
+  offsetX,
+  offsetY,
+  contrastScheme,
+  blockSizeXOverride,
+  highResScaleFactorOverride,
+}: {
+  model: MsaViewModel
+  ctx: CanvasRenderingContext2D
+  track: BasicTrack
+  offsetX: number
+  offsetY: number
+  contrastScheme: Record<string, string>
+  blockSizeXOverride?: number
+  highResScaleFactorOverride?: number
+}) {
+  const {
+    blockSize,
+    bgColor,
+    colorScheme: modelColorScheme,
+    colWidth,
+    fontSize,
+    rowHeight,
+    highResScaleFactor,
+  } = model
+
+  const { customColorScheme, data } = track.model
+  const colorScheme = customColorScheme ?? modelColorScheme
+  const bx = blockSizeXOverride ?? blockSize
+  const k = highResScaleFactorOverride ?? highResScaleFactor
+
+  ctx.resetTransform()
+  ctx.scale(k, k)
+  ctx.translate(-offsetX, offsetY)
+  ctx.textAlign = 'center'
+  ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
+
+  const xStart = Math.max(0, Math.floor(offsetX / colWidth))
+  const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth))
+  const str = data?.slice(xStart, xEnd)
+
+  for (let i = 0; str && i < str.length; i++) {
+    const letter = str[i]!
+    const color = colorScheme[letter.toUpperCase()]
+    const x = i * colWidth + offsetX - (offsetX % colWidth)
+
+    if (bgColor && color) {
+      ctx.fillStyle = color
+      ctx.fillRect(x, 0, colWidth, rowHeight)
+    }
+
+    if (rowHeight >= 10 && colWidth >= rowHeight / 2) {
+      ctx.fillStyle =
+        bgColor && color
+          ? (contrastScheme[letter.toUpperCase()] ?? 'black')
+          : 'black'
+      ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1)
+    }
+  }
+
+  ctx.resetTransform()
+}
+
+export function renderAllTracks({
+  model,
+  ctx,
+  offsetX,
+  contrastScheme,
+  blockSizeXOverride,
+  highResScaleFactorOverride,
+}: {
+  model: MsaViewModel
+  ctx: CanvasRenderingContext2D
+  offsetX: number
+  contrastScheme: Record<string, string>
+  blockSizeXOverride?: number
+  highResScaleFactorOverride?: number
+}) {
+  const { turnedOnTracks } = model
+  let currentY = 0
+
+  for (const track of turnedOnTracks) {
+    const trackHeight = track.model.height
+
+    if (track.model.id === 'conservation') {
+      renderConservationTrack({
+        model,
+        ctx,
+        offsetX,
+        offsetY: currentY,
+        trackHeight,
+        blockSizeXOverride,
+        highResScaleFactorOverride,
+      })
+    } else {
+      renderTextTrack({
+        model,
+        ctx,
+        track,
+        offsetX,
+        offsetY: currentY,
+        contrastScheme,
+        blockSizeXOverride,
+        highResScaleFactorOverride,
+      })
+    }
+
+    currentY += trackHeight
+  }
+}

package/src/components/tree/TreeNodeMenu.tsx

@@ -64,9 +64,9 @@ const TreeMenu = observer(function ({
             model.toggleCollapsed(node.id)
           } else {
             if (node.id.endsWith('-leafnode')) {
-              model.toggleCollapsed2(node.id)
+              model.toggleCollapsedLeaf(node.id)
             } else {
-              model.toggleCollapsed2(`${node.id}-leafnode`)
+              model.toggleCollapsedLeaf(`${node.id}-leafnode`)
             }
           }
           onClose()

package/src/components/tree/renderTreeCanvas.ts

@@ -107,7 +107,7 @@ export function renderNodeBubbles({
     // @ts-expect-error
     const { [val]: x, data } = node
     const y = node.x!
-    const { id = '', name = '' } = data
+    const { id, name } = data
     if (
       node.height > 1 &&
       y > offsetY - extendBounds &&

package/src/constants.ts

@@ -0,0 +1,27 @@
+// Main model defaults
+export const defaultRowHeight = 16
+export const defaultColWidth = 12
+export const defaultHeight = 550
+export const defaultScrollX = 0
+export const defaultScrollY = 0
+export const defaultCurrentAlignment = 0
+export const defaultShowDomains = false
+export const defaultHideGaps = true
+export const defaultAllowedGappyness = 100
+export const defaultContrastLettering = true
+export const defaultSubFeatureRows = false
+export const defaultDrawMsaLetters = true
+
+// MSA model defaults
+export const defaultBgColor = true
+export const defaultColorSchemeName = 'maeditor'
+
+// Tree model defaults
+export const defaultDrawLabels = true
+export const defaultLabelsAlignRight = false
+export const defaultTreeAreaWidth = 400
+export const defaultTreeWidth = 300
+export const defaultTreeWidthMatchesArea = true
+export const defaultShowBranchLen = true
+export const defaultDrawTree = true
+export const defaultDrawNodeBubbles = true

package/src/layout.ts

@@ -63,12 +63,7 @@ export default class Layout {
       return false
     }
 
-    const results = this.flatbush.search(
-      box.minX,
-      box.minY,
-      box.maxX,
-      box.maxY,
-    )
+    const results = this.flatbush.search(box.minX, box.minY, box.maxX, box.maxY)
 
     return results.length > 0
   }

package/src/model/msaModel.ts

@@ -1,5 +1,7 @@
 import { types } from 'mobx-state-tree'
 
+import { defaultBgColor, defaultColorSchemeName } from '../constants'
+
 /**
  * #stateModel MSAModel
  */
@@ -12,13 +14,13 @@ export function MSAModelF() {
        * #property
        * draw MSA tiles with a background color
        */
-      bgColor: true,
+      bgColor: defaultBgColor,
 
       /**
        * #property
        * default color scheme name
        */
-      colorSchemeName: 'maeditor',
+      colorSchemeName: defaultColorSchemeName,
     })
     .actions(self => ({
       /**

package/src/model/treeModel.ts

@@ -1,5 +1,16 @@
 import { types } from 'mobx-state-tree'
 
+import {
+  defaultDrawLabels,
+  defaultDrawNodeBubbles,
+  defaultDrawTree,
+  defaultLabelsAlignRight,
+  defaultShowBranchLen,
+  defaultTreeAreaWidth,
+  defaultTreeWidth,
+  defaultTreeWidthMatchesArea,
+} from '../constants'
+
 /**
  * #stateModel Tree
  */
@@ -11,30 +22,30 @@ export function TreeModelF() {
       /**
        * #property
        */
-      drawLabels: true,
+      drawLabels: defaultDrawLabels,
       /**
        * #property
        * right-align the labels
        */
-      labelsAlignRight: false,
+      labelsAlignRight: defaultLabelsAlignRight,
 
       /**
        * #property
        * width of the area the tree is drawn in, px
        */
-      treeAreaWidth: types.optional(types.number, 400),
+      treeAreaWidth: types.optional(types.number, defaultTreeAreaWidth),
 
       /**
        * #property
        * width of the tree within the treeArea, px
        */
-      treeWidth: types.optional(types.number, 300),
+      treeWidth: types.optional(types.number, defaultTreeWidth),
 
       /**
        * #getter
        * synchronization that matches treeWidth to treeAreaWidth
        */
-      treeWidthMatchesArea: true,
+      treeWidthMatchesArea: defaultTreeWidthMatchesArea,
 
       /**
        * #property
@@ -42,19 +53,19 @@ export function TreeModelF() {
        * lengths. if false, the layout is a "cladogram" that does not take into
        * account evolutionary distances
        */
-      showBranchLen: true,
+      showBranchLen: defaultShowBranchLen,
 
       /**
        * #property
        * draw tree, boolean
        */
-      drawTree: true,
+      drawTree: defaultDrawTree,
 
       /**
        * #property
        * draw clickable node bubbles on the tree
        */
-      drawNodeBubbles: true,
+      drawNodeBubbles: defaultDrawNodeBubbles,
     })
     .actions(self => ({
       /**