react-msaview 3.1.12 → 3.2.1

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,
@@ -74,7 +75,7 @@ const MSABlock = observer(function ({
         const { left, top } = ref.current.getBoundingClientRect()
         const mouseX = event.clientX - left + offsetX
         const mouseY = event.clientY - top + offsetY
-        const x = Math.floor(mouseX / colWidth) + 1
+        const x = Math.floor(mouseX / colWidth)
         const y = Math.floor(mouseY / rowHeight)
         model.setMousePos(x, y)
       }}
@@ -85,7 +86,7 @@ const MSABlock = observer(function ({
         const { left, top } = ref.current.getBoundingClientRect()
         const mouseX = event.clientX - left + offsetX
         const mouseY = event.clientY - top + offsetY
-        const x = Math.floor(mouseX / colWidth) + 1
+        const x = Math.floor(mouseX / colWidth)
         const y = Math.floor(mouseY / rowHeight)
         if (x === mouseClickCol && y === mouseClickRow) {
           model.setMouseClickPos(undefined, undefined)
@@ -93,7 +94,9 @@ const MSABlock = observer(function ({
           model.setMouseClickPos(x, y)
         }
       }}
-      onMouseLeave={() => model.setMousePos()}
+      onMouseLeave={() => {
+        model.setMousePos()
+      }}
       width={blockSize * highResScaleFactor}
       height={blockSize * highResScaleFactor}
       style={{
@@ -107,4 +110,4 @@ const MSABlock = observer(function ({
   )
 })
 
-export default MSABlock
+export default MSACanvasBlock

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -3,7 +3,7 @@ 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 ({

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)
@@ -56,7 +55,7 @@ function drawTiles({
     rowHeight,
     fillPalette,
     strokePalette,
-    tidyFilteredGatheredAnnotations,
+    tidyFilteredGatheredInterProAnnotations,
   } = model
 
   for (const node of visibleLeaves) {
@@ -66,7 +65,7 @@ function drawTiles({
     } = node
     const y = x!
 
-    const entry = tidyFilteredGatheredAnnotations?.[name]
+    const entry = tidyFilteredGatheredInterProAnnotations[name]
 
     let j = 0
     if (entry) {
@@ -74,8 +73,8 @@ function drawTiles({
         const m1 = model.seqCoordToRowSpecificGlobalCoord(name, start - 1)
         const m2 = model.seqCoordToRowSpecificGlobalCoord(name, end)
         const x = m1 * colWidth
-        ctx.fillStyle = fillPalette[accession]
-        ctx.strokeStyle = strokePalette[accession]
+        ctx.fillStyle = fillPalette[accession]!
+        ctx.strokeStyle = strokePalette[accession]!
         const h = subFeatureRows ? 4 : rowHeight
         const t = y - rowHeight + (subFeatureRows ? j * h : 0)
         const lw = colWidth * (m2 - m1)

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,
@@ -111,24 +110,35 @@ function drawTiles({
       data: { name },
     } = node
     const y = node.x!
-    const str = columns[name]?.slice(xStart, xEnd)
-    for (let i = 0; i < str?.length; i++) {
-      const letter = str[i]
+    const str = columns[name]!.slice(xStart, xEnd)
+    for (let i = 0; i < str.length; i++) {
+      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],
+                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,23 +162,33 @@ 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 },
       } = node
       const y = node.x!
-      const str = columns[name]?.slice(xStart, xEnd)
-      for (let i = 0; i < str?.length; i++) {
-        const letter = str[i]
+      const str = columns[name]!.slice(xStart, xEnd)
+      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)'
@@ -28,7 +28,7 @@ export function renderMouseover({
   ctx.clearRect(0, 0, width, height)
   if (mouseCol !== undefined) {
     ctx.fillStyle = hoverColor
-    ctx.fillRect((mouseCol - 1) * colWidth + scrollX, 0, colWidth, height)
+    ctx.fillRect(mouseCol * colWidth + scrollX, 0, colWidth, height)
   }
   if (mouseRow !== undefined) {
     ctx.fillStyle = hoverColor
@@ -36,7 +36,7 @@ export function renderMouseover({
   }
   if (mouseClickCol !== undefined) {
     ctx.fillStyle = highlightColor
-    ctx.fillRect((mouseClickCol - 1) * colWidth + scrollX, 0, colWidth, height)
+    ctx.fillRect(mouseClickCol * colWidth + scrollX, 0, colWidth, height)
   }
   if (mouseClickRow !== undefined) {
     ctx.fillStyle = highlightColor
@@ -44,6 +44,6 @@ export function renderMouseover({
   }
   if (mouseCol2 !== undefined) {
     ctx.fillStyle = highlightColor
-    ctx.fillRect((mouseCol2 - 1) * colWidth + scrollX, 0, colWidth, height)
+    ctx.fillRect(mouseCol2 * colWidth + scrollX, 0, colWidth, height)
   }
 }

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
@@ -50,9 +50,11 @@ const TreeBranchMenu = observer(function ({
       <MenuItem
         dense
         onClick={() => {
-          model.showOnly === node.id
-            ? model.setShowOnly(undefined)
-            : model.setShowOnly(node.id)
+          if (model.showOnly === node.id) {
+            model.setShowOnly(undefined)
+          } else {
+            model.setShowOnly(node.id)
+          }
           onClose()
         }}
       >

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'
@@ -49,6 +50,7 @@ const TreeCanvasBlock = observer(function ({
   const w2 = width * highResScaleFactor
   const h2 = height * highResScaleFactor
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
   const vref = useCallback(
     (arg: HTMLCanvasElement) => {
       model.incrementRef()
@@ -135,7 +137,9 @@ const TreeCanvasBlock = observer(function ({
         <TreeBranchMenu
           node={branchMenu}
           model={model}
-          onClose={() => setBranchMenu(undefined)}
+          onClose={() => {
+            setBranchMenu(undefined)
+          }}
         />
       ) : null}
 
@@ -143,7 +147,9 @@ const TreeCanvasBlock = observer(function ({
         <TreeNodeMenu
           node={toggleNodeMenu}
           model={model}
-          onClose={() => setToggleNodeMenu(undefined)}
+          onClose={() => {
+            setToggleNodeMenu(undefined)
+          }}
         />
       ) : null}
 
@@ -165,7 +171,7 @@ const TreeCanvasBlock = observer(function ({
 
           const data = hoverBranchClickMap(event)
           if (data?.id) {
-            setBranchMenu({ ...data, x, y })
+            setBranchMenu({ x, y, id: data.id, name: data.name })
           }
 
           const data2 = hoverNameClickMap(event)
@@ -173,7 +179,9 @@ const TreeCanvasBlock = observer(function ({
             setToggleNodeMenu({ ...data2, x, y })
           }
         }}
-        onMouseLeave={() => setHoverElt(undefined)}
+        onMouseLeave={() => {
+          setHoverElt(undefined)
+        }}
         ref={vref}
       />
       <canvas

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"
@@ -58,7 +58,7 @@ const TreeMenu = observer(function ({
             model.toggleCollapsed(node.id)
           } else {
             if (node.id.endsWith('-leafnode')) {
-              model.toggleCollapsed2(`${node.id}`)
+              model.toggleCollapsed2(node.id)
             } else {
               model.toggleCollapsed2(`${node.id}-leafnode`)
             }
@@ -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,10 +8,10 @@ import {
 } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 
 // locals
-import { MsaViewModel } from '../../../model'
+import type { MsaViewModel } from '../../../model'
 import SequenceTextArea from '../../SequenceTextArea'
 
-export default observer(function ({
+const TreeNodeInfoDialog = observer(function ({
   info,
   model,
   nodeName,
@@ -26,7 +26,14 @@ export default observer(function ({
   const metadata = treeMetadata[nodeName]
   const [name, sequence] = rows.find(f => f[0] === nodeName)!
   return (
-    <Dialog onClose={() => onClose()} open title="Tree node info" maxWidth="xl">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="Tree node info"
+      maxWidth="xl"
+    >
       <DialogContent>
         <BaseCard title="Attributes">
           <Attributes attributes={{ nodeName, ...info }} />
@@ -43,3 +50,5 @@ export default observer(function ({
     </Dialog>
   )
 })
+
+export default TreeNodeInfoDialog