react-msaview 3.1.11 → 3.2.0

package/src/components/msa/renderMSABlock.ts

@@ -1,10 +1,10 @@
-import { HierarchyNode } from 'd3-hierarchy'
-import { Theme } from '@mui/material'
+import type { HierarchyNode } from 'd3-hierarchy'
+import type { Theme } from '@mui/material'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes'
-import { NodeWithIdsAndLength } from '../../util'
+import type { NodeWithIdsAndLength } from '../../util'
 
 export function renderMSABlock({
   model,
@@ -28,13 +28,13 @@ export function renderMSABlock({
   blockSizeYOverride?: number
 }) {
   const {
-    hierarchy,
     colWidth,
     blockSize,
     rowHeight,
     fontSize,
     highResScaleFactor,
-    featureMode,
+    actuallyShowDomains,
+    leaves,
   } = model
   const k = highResScaleFactorOverride || highResScaleFactor
   const bx = blockSizeXOverride || blockSize
@@ -45,15 +45,13 @@ export function renderMSABlock({
   ctx.textAlign = 'center'
   ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
 
-  const leaves = hierarchy.leaves()
-
   const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
   const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight))
   const xStart = Math.max(0, Math.floor(offsetX / colWidth))
   const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth))
   const visibleLeaves = leaves.slice(yStart, yEnd)
 
-  if (!featureMode) {
+  if (!actuallyShowDomains) {
     drawTiles({
       model,
       ctx,
@@ -101,6 +99,7 @@ function drawTiles({
     colorSchemeName,
     colorScheme,
     colStats,
+    colStatsSums,
     columns,
     colWidth,
     rowHeight,
@@ -116,19 +115,30 @@ function drawTiles({
       const letter = str[i]
       const color =
         colorSchemeName === 'clustalx_protein_dynamic'
-          ? getClustalXColor(colStats[xStart + i], model, name, xStart + i)
+          ? getClustalXColor(
+              colStats[xStart + i],
+              colStatsSums[xStart + i],
+              model,
+              name,
+              xStart + i,
+            )
           : colorSchemeName === 'percent_identity_dynamic'
             ? getPercentIdentityColor(
                 colStats[xStart + i],
+                colStatsSums[xStart + i],
                 model,
                 name,
                 xStart + i,
               )
             : colorScheme[letter.toUpperCase()]
       if (bgColor) {
-        const x = i * colWidth + offsetX - (offsetX % colWidth)
         ctx.fillStyle = color || theme.palette.background.default
-        ctx.fillRect(x, y - rowHeight, colWidth, rowHeight)
+        ctx.fillRect(
+          i * colWidth + offsetX - (offsetX % colWidth),
+          y - rowHeight,
+          colWidth,
+          rowHeight,
+        )
       }
     }
   }
@@ -152,9 +162,17 @@ function drawText({
   xStart: number
   xEnd: number
 }) {
-  const { bgColor, featureMode, colorScheme, columns, colWidth, rowHeight } =
-    model
-  if (rowHeight >= 5 && colWidth > rowHeight / 2) {
+  const {
+    bgColor,
+    actuallyShowDomains,
+    showMsaLetters,
+    colorScheme,
+    columns,
+    colWidth,
+    contrastLettering,
+    rowHeight,
+  } = model
+  if (showMsaLetters) {
     for (const node of visibleLeaves) {
       const {
         data: { name },
@@ -164,11 +182,13 @@ function drawText({
       for (let i = 0; i < str?.length; i++) {
         const letter = str[i]
         const color = colorScheme[letter.toUpperCase()]
-        const contrast = contrastScheme[letter.toUpperCase()] || 'black'
+        const contrast = contrastLettering
+          ? contrastScheme[letter.toUpperCase()] || 'black'
+          : 'black'
         const x = i * colWidth + offsetX - (offsetX % colWidth)
 
         // note: -rowHeight/4 matches +rowHeight/4 in tree
-        ctx.fillStyle = featureMode
+        ctx.fillStyle = actuallyShowDomains
           ? 'black'
           : bgColor
             ? contrast

package/src/components/msa/renderMSAMouseover.ts

@@ -1,4 +1,4 @@
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 const hoverColor = 'rgba(0,0,0,0.15)'
 const highlightColor = 'rgba(128,128,0,0.2)'

package/src/components/tree/TreeBranchMenu.tsx

@@ -3,7 +3,7 @@ import { Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 interface Node {
   x: number

package/src/components/tree/TreeCanvas.tsx

@@ -1,8 +1,9 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import TreeCanvasBlock from './TreeCanvasBlock'
 import { padding } from './renderTreeCanvas'
 
@@ -48,7 +49,8 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
       const distanceY = currY - prevY.current
       if (distanceY) {
         // use rAF to make it so multiple event handlers aren't fired per-frame
-        // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
+        // see
+        // https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
         if (!scheduled.current) {
           scheduled.current = true
           window.requestAnimationFrame(() => {
@@ -92,23 +94,20 @@ const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
     }
   }
 
-  // this local mouseup is used in addition to the global because sometimes
-  // the global add/remove are not called in time, resulting in issue #533
-  function mouseUp(event: React.MouseEvent) {
-    event.preventDefault()
-    setMouseDragging(false)
-  }
-
-  function mouseLeave(event: React.MouseEvent) {
-    event.preventDefault()
-  }
-
   return (
     <div
       ref={ref}
       onMouseDown={mouseDown}
-      onMouseUp={mouseUp}
-      onMouseLeave={mouseLeave}
+      onMouseUp={event => {
+        // this local mouseup is used in addition to the global because
+        // sometimes the global add/remove are not called in time, resulting in
+        // issue #533
+        event.preventDefault()
+        setMouseDragging(false)
+      }}
+      onMouseLeave={event => {
+        event.preventDefault()
+      }}
       style={{
         height,
         position: 'relative',

package/src/components/tree/TreeCanvasBlock.tsx

@@ -1,11 +1,12 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 import { useTheme } from '@mui/material'
 import RBush from 'rbush'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import TreeNodeMenu from './TreeNodeMenu'
 import TreeBranchMenu from './TreeBranchMenu'
 import { padding, renderTreeCanvas } from './renderTreeCanvas'

package/src/components/tree/TreeNodeMenu.tsx

@@ -3,7 +3,7 @@ import { Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 // lazies
 const TreeNodeInfoDialog = lazy(() => import('./dialogs/TreeNodeInfoDialog'))
@@ -17,7 +17,7 @@ const TreeMenu = observer(function ({
   model: MsaViewModel
   onClose: () => void
 }) {
-  const { collapsed, collapsed2 } = model
+  const { collapsed, collapsedLeaves } = model
   return (
     <Menu
       anchorReference="anchorPosition"
@@ -66,7 +66,7 @@ const TreeMenu = observer(function ({
           onClose()
         }}
       >
-        {collapsed.includes(node.id) || collapsed2.includes(node.id)
+        {collapsed.includes(node.id) || collapsedLeaves.includes(node.id)
           ? 'Show node'
           : 'Hide node'}
       </MenuItem>

package/src/components/tree/TreePanel.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { observer } from 'mobx-react'
 
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import TreeCanvas from './TreeCanvas'
 
 const TreePanel = observer(function ({ model }: { model: MsaViewModel }) {

package/src/components/tree/TreeRuler.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
   const { treeAreaWidth } = model

package/src/components/tree/dialogs/TreeNodeInfoDialog.tsx

@@ -8,7 +8,7 @@ import {
 } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 
 // locals
-import { MsaViewModel } from '../../../model'
+import type { MsaViewModel } from '../../../model'
 import SequenceTextArea from '../../SequenceTextArea'
 
 export default observer(function ({

package/src/components/tree/renderTreeCanvas.ts

@@ -1,8 +1,8 @@
-import RBush from 'rbush'
-import { Theme } from '@mui/material'
+import type RBush from 'rbush'
+import type { Theme } from '@mui/material'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 export const padding = 600
 
@@ -38,6 +38,9 @@ export function renderTree({
   ctx.strokeStyle = theme.palette.text.primary
   for (const link of hierarchy.links()) {
     const { source, target } = link
+    if (target.height === 0 && !showBranchLen) {
+      continue
+    }
     const sy = source.x!
     const ty = target.x!
     // @ts-expect-error
@@ -87,10 +90,9 @@ export function renderNodeBubbles({
     // @ts-expect-error
     const { [val]: x, data } = node
     const y = node.x!
-    const { branchset, id = '', name = '' } = data
+    const { id = '', name = '' } = data
     if (
-      !id.endsWith('-leafnode') &&
-      branchset.length &&
+      node.height > 1 &&
       y > offsetY - extendBounds &&
       y < offsetY + by + extendBounds
     ) {
@@ -134,13 +136,19 @@ export function renderTreeLabels({
     showBranchLen,
     treeMetadata,
     hierarchy,
+    collapsed,
+    collapsedLeaves,
     blockSize,
     labelsAlignRight,
     drawTree,
     treeAreaWidth,
+    treeWidth,
     treeAreaWidthMinusMargin,
     marginLeft,
+    leaves,
     noTree,
+    // eslint-disable-next-line  @typescript-eslint/no-unused-vars
+    rowHeight: _rowHeight, // this is needed for redrawing after zoom change
   } = model
   const by = blockSizeYOverride || blockSize
   if (labelsAlignRight) {
@@ -149,7 +157,7 @@ export function renderTreeLabels({
   } else {
     ctx.textAlign = 'start'
   }
-  for (const node of hierarchy.leaves()) {
+  for (const node of leaves) {
     const {
       data: { name, id },
       // @ts-expect-error
@@ -162,7 +170,18 @@ export function renderTreeLabels({
     if (y > offsetY - extendBounds && y < offsetY + by + extendBounds) {
       // note: +rowHeight/4 matches with -rowHeight/4 in msa
       const yp = y + fontSize / 4
-      const xp = (showBranchLen ? len : x) || 0
+      let xp = (showBranchLen ? len : x) || 0
+      if (
+        !showBranchLen &&
+        !collapsed.includes(id) &&
+        !collapsedLeaves.includes(id)
+      ) {
+        // this subtraction is a hack to compensate for the leafnode rendering
+        // glitch (issue #71). the context is that an extra leaf node is added
+        // so that 'collapsing/hiding leaf nodes is possible' but this causes
+        // weird workarounds
+        xp -= treeWidth / hierarchy.height
+      }
 
       const { width } = ctx.measureText(displayName)
       const height = ctx.measureText('M').width // use an 'em' for height
@@ -223,13 +242,12 @@ export function renderTreeCanvas({
   const {
     noTree,
     drawTree,
-    drawLabels,
     drawNodeBubbles,
     treeWidth,
     highResScaleFactor,
     blockSize,
     fontSize,
-    rowHeight,
+    showTreeText,
     marginLeft,
     nref,
   } = model
@@ -243,7 +261,9 @@ export function renderTreeCanvas({
   // is updated and in order to convince bundlers like not to delete unused
   // usage with propertyReadSideEffects
   const k =
-    nref < 0 ? -Infinity : highResScaleFactorOverride || highResScaleFactor
+    nref < 0
+      ? Number.NEGATIVE_INFINITY
+      : highResScaleFactorOverride || highResScaleFactor
   ctx.scale(k, k)
   ctx.clearRect(0, 0, treeWidth + padding, by)
   ctx.translate(marginLeft, -offsetY)
@@ -272,7 +292,7 @@ export function renderTreeCanvas({
     }
   }
 
-  if (rowHeight >= 5 && drawLabels) {
+  if (showTreeText) {
     renderTreeLabels({
       ctx,
       offsetY,

package/src/components/util.ts

@@ -10,7 +10,7 @@ export function chooseGridPitch(
 ) {
   scale = Math.abs(scale)
   const minMajorPitchBp = minMajorPitchPx * scale
-  const majorMagnitude = parseInt(
+  const majorMagnitude = Number.parseInt(
     Number(minMajorPitchBp).toExponential().split(/e/i)[1],
     10,
   )

package/src/fetchUtils.ts

@@ -15,9 +15,9 @@ export async function textfetch(url: string, args?: RequestInit) {
   return response.text()
 }
 
-export async function jsonfetch(url: string, args?: RequestInit) {
+export async function jsonfetch<T>(url: string, args?: RequestInit) {
   const response = await myfetch(url, args)
-  return response.json()
+  return response.json() as T
 }
 
 export async function arraybufferfetch(url: string) {

package/src/launchInterProScan.ts

@@ -1,6 +1,8 @@
+import { getSession } from '@jbrowse/core/util'
 import { jsonfetch, textfetch, timeout } from './fetchUtils'
+import type { MsaViewModel } from './model'
 
-const base = `https://www.ebi.ac.uk/Tools/services/rest`
+const base = 'https://www.ebi.ac.uk/Tools/services/rest'
 
 export interface InterProScanResults {
   matches: {
@@ -24,11 +26,13 @@ async function runInterProScan({
   onProgress,
   onJobId,
   programs,
+  model,
 }: {
   seq: string
   programs: string[]
   onProgress: (arg?: { msg: string; url?: string }) => void
-  onJobId: (arg: string) => void
+  onJobId?: (arg: string) => void
+  model: MsaViewModel
 }) {
   const jobId = await textfetch(`${base}/iprscan5/run`, {
     method: 'POST',
@@ -38,18 +42,18 @@ async function runInterProScan({
       programs: programs.join(','),
     }),
   })
-  onJobId(jobId)
+  onJobId?.(jobId)
   await wait({
     jobId,
     onProgress,
   })
-  return loadInterProScanResults(jobId)
+  return loadInterProScanResultsWithStatus({ jobId, model })
 }
 
-export async function loadInterProScanResults(jobId: string) {
-  return (await jsonfetch(
+export function loadInterProScanResults(jobId: string) {
+  return jsonfetch<InterProScanResponse>(
     `${base}/iprscan5/result/${jobId}/json`,
-  )) as InterProScanResponse
+  )
 }
 
 async function wait({
@@ -60,17 +64,22 @@ async function wait({
   onProgress: (arg?: { msg: string; url?: string }) => void
 }) {
   const url = `${base}/iprscan5/status/${jobId}`
-  // eslint-disable-next-line no-constant-condition
-  while (true) {
-    for (let i = 0; i < 10; i++) {
-      await timeout(1000)
-      onProgress({ msg: `Checking status... ${10 - i}`, url })
-    }
-    const result = await textfetch(url)
-
-    if (result === 'FINISHED') {
-      break
+  try {
+    while (true) {
+      for (let i = 0; i < 10; i++) {
+        await timeout(1000)
+        onProgress({ msg: `Checking status ${10 - i}`, url })
+      }
+      const result = await textfetch(url)
+      if (result.includes('FINISHED')) {
+        break
+      }
+      if (result.includes('FAILURE')) {
+        throw new Error(`Failed to run: jobId ${jobId}`)
+      }
     }
+  } finally {
+    onProgress()
   }
 }
 
@@ -80,19 +89,55 @@ export async function launchInterProScan({
   programs,
   onJobId,
   onProgress,
+  model,
 }: {
   algorithm: string
   seq: string
   programs: string[]
   onProgress: (arg?: { msg: string; url?: string }) => void
-  onJobId: (arg: string) => void
+  onJobId?: (arg: string) => void
+  model: MsaViewModel
 }) {
-  onProgress({ msg: `Launching ${algorithm} MSA...` })
-  if (algorithm === 'interproscan') {
-    const result = await runInterProScan({ seq, onJobId, onProgress, programs })
-    onProgress()
-    return result
-  } else {
+  try {
+    onProgress({ msg: `Launching ${algorithm} MSA` })
+    if (algorithm === 'interproscan') {
+      const result = await runInterProScan({
+        seq,
+        onJobId,
+        onProgress,
+        programs,
+        model,
+      })
+      return result
+    }
     throw new Error('unknown algorithm')
+  } finally {
+    onProgress()
+  }
+}
+
+export async function loadInterProScanResultsWithStatus({
+  jobId,
+  model,
+}: {
+  jobId: string
+  model: MsaViewModel
+}) {
+  try {
+    model.setStatus({
+      msg: `Downloading results of ${jobId} (for larger sequences this can be slow, click status to download and upload in the manual tab)`,
+      url: `https://www.ebi.ac.uk/Tools/services/rest/iprscan5/result/${jobId}/json`,
+    })
+    const ret = await loadInterProScanResults(jobId)
+    model.setInterProAnnotations(
+      Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])),
+    )
+    model.setShowDomains(true)
+    getSession(model).notify(`Loaded interproscan ${jobId} results`, 'success')
+  } catch (e) {
+    console.error(e)
+    getSession(model).notifyError(`${e}`, e)
+  } finally {
+    model.setStatus()
   }
 }

package/src/model/DataModel.ts

@@ -43,4 +43,14 @@ export function DataModelF() {
         self.treeMetadata = treeMetadata
       },
     }))
+    .postProcessSnapshot(snap => {
+      const { tree, msa, treeMetadata } = snap
+      const max = 50_000
+      return {
+        tree: tree && tree.length > max ? undefined : tree,
+        msa: msa && msa.length > max ? undefined : msa,
+        treeMetadata:
+          treeMetadata && treeMetadata.length > max ? undefined : treeMetadata,
+      }
+    })
 }

package/src/model/DialogQueue.ts

@@ -1,4 +1,4 @@
-import { DialogComponentType } from '@jbrowse/core/util'
+import type { DialogComponentType } from '@jbrowse/core/util'
 import { types } from 'mobx-state-tree'
 
 /**