react-msaview 3.1.12 → 3.2.0

package/src/components/msa/MSACanvas.tsx

@@ -2,12 +2,19 @@ import React, { useEffect, useState, useRef } from 'react'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import MSACanvasBlock from './MSACanvasBlock'
 import Loading from './Loading'
 
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
-  const { MSA, msaFilehandle, height, msaAreaWidth, blocks2d } = model
+  const {
+    MSA,
+    verticalScrollbarWidth,
+    msaFilehandle,
+    height,
+    msaAreaWidth,
+    blocks2d,
+  } = model
   const ref = useRef<HTMLDivElement>(null)
   // wheel
   const scheduled = useRef(false)
@@ -39,7 +46,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       event.preventDefault()
       event.stopPropagation()
     }
-    curr.addEventListener('wheel', onWheel)
+    curr.addEventListener('wheel', onWheel, { passive: false })
     return () => {
       curr.removeEventListener('wheel', onWheel)
     }
@@ -115,7 +122,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       style={{
         position: 'relative',
         height,
-        width: msaAreaWidth,
+        width: msaAreaWidth - verticalScrollbarWidth,
         overflow: 'hidden',
       }}
     >

package/src/components/msa/MSACanvasBlock.tsx

@@ -5,11 +5,11 @@ import { observer } from 'mobx-react'
 
 // locals
 import { renderMSABlock } from './renderMSABlock'
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import { colorContrast } from '../../util'
 import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock'
 
-const MSABlock = observer(function ({
+const MSACanvasBlock = observer(function ({
   model,
   offsetX,
   offsetY,
@@ -45,7 +45,8 @@ const MSABlock = observer(function ({
     return autorun(() => {
       ctx.resetTransform()
       ctx.clearRect(0, 0, blockSize, blockSize)
-      if (model.showDomains) {
+      const { actuallyShowDomains } = model
+      if (actuallyShowDomains) {
         renderBoxFeatureCanvasBlock({
           ctx,
           offsetX,
@@ -107,4 +108,4 @@ const MSABlock = observer(function ({
   )
 })
 
-export default MSABlock
+export default MSACanvasBlock

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -3,14 +3,10 @@ import { observer } from 'mobx-react'
 import { autorun } from 'mobx'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import { renderMouseover } from './renderMSAMouseover'
 
-const MSAMouseoverCanvas = observer(function ({
-  model,
-}: {
-  model: MsaViewModel
-}) {
+const MSAMouseoverCanvas = observer(({ model }: { model: MsaViewModel }) => {
   const ref = useRef<HTMLCanvasElement>(null)
   const { height, width } = model
   useEffect(() => {

package/src/components/msa/MSAPanel.tsx

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react'
 import MSACanvas from './MSACanvas'
 import MSAMouseoverCanvas from './MSAMouseoverCanvas'
 // types
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 const MSAPanel = observer(function ({ model }: { model: MsaViewModel }) {
   return (

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,8 +1,8 @@
-import { HierarchyNode } from 'd3-hierarchy'
+import type { HierarchyNode } from 'd3-hierarchy'
 
 // locals
-import { MsaViewModel } from '../../model'
-import { NodeWithIdsAndLength } from '../../util'
+import type { MsaViewModel } from '../../model'
+import type { NodeWithIdsAndLength } from '../../util'
 
 export function renderBoxFeatureCanvasBlock({
   model,
@@ -19,7 +19,7 @@ export function renderBoxFeatureCanvasBlock({
   highResScaleFactorOverride?: number
   blockSizeYOverride?: number
 }) {
-  const { hierarchy, blockSize, rowHeight, highResScaleFactor, showDomains } =
+  const { leaves, blockSize, rowHeight, highResScaleFactor, showDomains } =
     model
   if (showDomains) {
     const k = highResScaleFactorOverride || highResScaleFactor
@@ -28,7 +28,6 @@ export function renderBoxFeatureCanvasBlock({
     ctx.scale(k, k)
     ctx.translate(-offsetX, rowHeight / 2 - offsetY)
 
-    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 visibleLeaves = leaves.slice(yStart, yEnd)

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,
-    showDomains,
+    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 (!showDomains) {
+  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, showDomains, 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 = showDomains
+        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/launchInterProScan.ts

@@ -1,8 +1,8 @@
 import { getSession } from '@jbrowse/core/util'
 import { jsonfetch, textfetch, timeout } from './fetchUtils'
-import { MsaViewModel } from './model'
+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: {
@@ -65,7 +65,6 @@ async function wait({
 }) {
   const url = `${base}/iprscan5/status/${jobId}`
   try {
-    // eslint-disable-next-line no-constant-condition
     while (true) {
       for (let i = 0; i < 10; i++) {
         await timeout(1000)
@@ -75,6 +74,9 @@ async function wait({
       if (result.includes('FINISHED')) {
         break
       }
+      if (result.includes('FAILURE')) {
+        throw new Error(`Failed to run: jobId ${jobId}`)
+      }
     }
   } finally {
     onProgress()
@@ -107,9 +109,8 @@ export async function launchInterProScan({
         model,
       })
       return result
-    } else {
-      throw new Error('unknown algorithm')
     }
+    throw new Error('unknown algorithm')
   } finally {
     onProgress()
   }
@@ -124,14 +125,11 @@ export async function loadInterProScanResultsWithStatus({
 }) {
   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)',
+      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.setLoadedInterProAnnotations(
+    model.setInterProAnnotations(
       Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])),
     )
     model.setShowDomains(true)

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'
 
 /**