react-msaview 4.4.5 → 4.5.0

package/src/components/header/Header.tsx

@@ -5,6 +5,7 @@ import Help from '@mui/icons-material/Help'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
+import GappynessSlider from './GappynessSlider'
 import HeaderInfoArea from './HeaderInfoArea'
 import HeaderMenu from './HeaderMenu'
 import HeaderStatusArea from './HeaderStatusArea'
@@ -30,7 +31,8 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
       <ZoomControls model={model} />
       {model.showZoomStar ? <ZoomStar model={model} /> : null}
       <ZoomMenu model={model} />
-      <div style={{ margin: 'auto' }}>
+      <GappynessSlider model={model} />
+      <div style={{ paddingLeft: 20, margin: 'auto' }}>
         <MultiAlignmentSelector model={model} />
       </div>
       <HeaderInfoArea model={model} />

package/src/components/header/HeaderMenu.tsx

@@ -1,10 +1,10 @@
 import React, { lazy } from 'react'
 
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import AccountTree from '@mui/icons-material/AccountTree'
 import Assignment from '@mui/icons-material/Assignment'
 import FilterAlt from '@mui/icons-material/FilterAlt'
 import FolderOpen from '@mui/icons-material/FolderOpen'
-import List from '@mui/icons-material/List'
 import MoreVert from '@mui/icons-material/Menu'
 import PhotoCamera from '@mui/icons-material/PhotoCamera'
 import Search from '@mui/icons-material/Search'
@@ -16,7 +16,6 @@ import type { MsaViewModel } from '../../model'
 
 // lazies
 const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog'))
-const TracklistDialog = lazy(() => import('../dialogs/TracklistDialog'))
 const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog'))
 const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog'))
 const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'))
@@ -26,7 +25,14 @@ const UserProvidedDomainsDialog = lazy(
 const InterProScanDialog = lazy(() => import('../dialogs/InterProScanDialog'))
 
 const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
-  const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model
+  const {
+    showDomains,
+    actuallyShowDomains,
+    subFeatureRows,
+    noDomains,
+    tracks,
+    turnedOffTracks,
+  } = model
   return (
     <CascadingMenuButton
       menuItems={[
@@ -63,19 +69,18 @@ const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
           },
         },
         {
-          label: 'Extra tracks',
-          icon: List,
-          onClick: () => {
-            model.queueDialog(onClose => [
-              TracklistDialog,
-              {
-                model,
-                onClose,
-              },
-            ])
-          },
+          label: 'Tracks',
+          icon: Visibility,
+          type: 'subMenu',
+          subMenu: tracks.map(track => ({
+            label: track.model.name,
+            type: 'checkbox' as const,
+            checked: !turnedOffTracks.has(track.model.id),
+            onClick: () => {
+              model.toggleTrack(track.model.id)
+            },
+          })),
         },
-
         {
           label: 'Export SVG',
           icon: PhotoCamera,
@@ -89,6 +94,22 @@ const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
             ])
           },
         },
+        ...(model.rows.length >= 2
+          ? [
+              {
+                label: 'Calculate neighbor joining tree (BLOSUM62)',
+                icon: AccountTree,
+                onClick: () => {
+                  try {
+                    model.calculateNeighborJoiningTreeFromMSA()
+                  } catch (e) {
+                    console.error('Failed to calculate NJ tree:', e)
+                    model.setError(e)
+                  }
+                },
+              },
+            ]
+          : []),
         {
           label: 'Features/protein domains',
           type: 'subMenu',

package/src/components/minimap/MinimapSVG.tsx

@@ -21,7 +21,8 @@ const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
   const right = left + W
   const s = left * unit
   const e = right * unit
-  const fill = 'rgba(66, 119, 127, 0.3)'
+  const fillColor = 'rgb(66, 119, 127)'
+  const fillOpacity = 0.3
 
   return (
     <>
@@ -38,12 +39,14 @@ const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
         y={0}
         width={e - s}
         height={BAR_HEIGHT}
-        fill={fill}
+        fill={fillColor}
+        fillOpacity={fillOpacity}
         stroke="#555"
       />
       <g transform={`translate(0 ${BAR_HEIGHT})`}>
         <polygon
-          fill={fill}
+          fill={fillColor}
+          fillOpacity={fillOpacity}
           points={[
             [e, 0],
             [s, 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/TreeCanvasBlock.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import { useTheme } from '@mui/material'
+import Flatbush from 'flatbush'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
-import Flatbush from 'flatbush'
 
 import TreeBranchMenu from './TreeBranchMenu'
 import TreeNodeMenu from './TreeNodeMenu'

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 => ({
       /**