react-msaview 3.1.4 → 3.1.6

package/src/components/MSAPanel/MSABlock.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useMemo } from 'react'
-import { autorun } from 'mobx'
 import { useTheme } from '@mui/material'
+import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
 // locals
@@ -24,6 +24,8 @@ const MSABlock = observer(function ({
     scrollX,
     colorScheme,
     blockSize,
+    mouseClickCol,
+    mouseClickRow,
     highResScaleFactor,
   } = model
   const theme = useTheme()
@@ -36,19 +38,18 @@ const MSABlock = observer(function ({
   const ref = useRef<HTMLCanvasElement>(null)
   useEffect(() => {
     const ctx = ref.current?.getContext('2d')
-    if (!ctx) {
-      return
-    }
-    return autorun(() => {
-      renderMSABlock({
-        ctx,
-        theme,
-        offsetX,
-        offsetY,
-        contrastScheme,
-        model,
-      })
-    })
+    return ctx
+      ? autorun(() => {
+          renderMSABlock({
+            ctx,
+            theme,
+            offsetX,
+            offsetY,
+            contrastScheme,
+            model,
+          })
+        })
+      : undefined
   }, [model, offsetX, offsetY, theme, contrastScheme])
   return (
     <canvas
@@ -60,10 +61,24 @@ const MSABlock = observer(function ({
         const { left, top } = ref.current.getBoundingClientRect()
         const mouseX = event.clientX - left + offsetX
         const mouseY = event.clientY - top + offsetY
-        model.setMousePos(
-          Math.floor(mouseX / colWidth) + 1,
-          Math.floor(mouseY / rowHeight),
-        )
+        const x = Math.floor(mouseX / colWidth) + 1
+        const y = Math.floor(mouseY / rowHeight)
+        model.setMousePos(x, y)
+      }}
+      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) + 1
+        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}

package/src/components/MSAPanel/renderMSABlock.ts

@@ -136,7 +136,6 @@ function drawText({
   model,
   offsetX,
   contrastScheme,
-  theme,
   ctx,
   visibleLeaves,
   xStart,

package/src/components/MSAPanel/renderMSAMouseover.ts

@@ -1,5 +1,8 @@
 import { MsaViewModel } from '../../model'
 
+const hoverColor = 'rgba(0,0,0,0.15)'
+const highlightColor = 'rgba(128,128,0,0.2)'
+
 export function renderMouseover({
   ctx,
   model,
@@ -18,19 +21,29 @@ export function renderMouseover({
     mouseRow,
     // @ts-expect-error
     mouseCol2,
+    mouseClickRow,
+    mouseClickCol,
   } = model
   ctx.resetTransform()
   ctx.clearRect(0, 0, width, height)
   if (mouseCol !== undefined) {
-    ctx.fillStyle = 'rgba(0,0,0,0.15)'
+    ctx.fillStyle = hoverColor
     ctx.fillRect((mouseCol - 1) * colWidth + scrollX, 0, colWidth, height)
   }
   if (mouseRow !== undefined) {
-    ctx.fillStyle = 'rgba(0,0,0,0.15)'
+    ctx.fillStyle = hoverColor
     ctx.fillRect(0, mouseRow * rowHeight + scrollY, width, rowHeight)
   }
+  if (mouseClickCol !== undefined) {
+    ctx.fillStyle = highlightColor
+    ctx.fillRect((mouseClickCol - 1) * colWidth + scrollX, 0, colWidth, height)
+  }
+  if (mouseClickRow !== undefined) {
+    ctx.fillStyle = highlightColor
+    ctx.fillRect(0, mouseClickRow * rowHeight + scrollY, width, rowHeight)
+  }
   if (mouseCol2 !== undefined) {
-    ctx.fillStyle = 'rgba(255,255,0,0.2)'
+    ctx.fillStyle = highlightColor
     ctx.fillRect((mouseCol2 - 1) * colWidth + scrollX, 0, colWidth, height)
   }
 }

package/src/components/MSAView.tsx

@@ -2,11 +2,11 @@ import React, { Suspense } from 'react'
 import { observer } from 'mobx-react'
 
 // locals
+import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles'
+import { MsaViewModel } from '../model'
 import TreeRuler from './TreePanel/TreeRuler'
 import Header from './Header'
 import Track from './Track'
-import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles'
-import { MsaViewModel } from '../model'
 import MSAPanel from './MSAPanel'
 import TreePanel from './TreePanel'
 import Minimap from './Minimap'
@@ -32,7 +32,7 @@ function MainArea({ model }: { model: MsaViewModel }) {
 const View = observer(function ({ model }: { model: MsaViewModel }) {
   const { turnedOnTracks } = model
   return (
-    <div style={{ paddingLeft: 20, position: 'relative' }}>
+    <div style={{ position: 'relative' }}>
       <TopArea model={model} />
       {turnedOnTracks?.map(track => (
         <Track key={track.model.id} model={model} track={track} />

package/src/components/TreePanel/TreeNodeMenu.tsx

@@ -5,6 +5,7 @@ import { observer } from 'mobx-react'
 // locals
 import { MsaViewModel } from '../../model'
 
+// lazies
 const TreeNodeInfoDialog = lazy(() => import('./dialogs/TreeNodeInfoDialog'))
 
 const TreeMenu = observer(function ({
@@ -16,104 +17,112 @@ const TreeMenu = observer(function ({
   model: MsaViewModel
   onClose: () => void
 }) {
-  const { structures } = model
+  const { selectedStructures, collapsed, collapsed2, structures } = model
   const nodeDetails = node ? model.getRowData(node.name) : undefined
 
   return (
-    <>
-      <Menu
-        anchorReference="anchorPosition"
-        anchorPosition={{
-          top: node.y,
-          left: node.x,
+    <Menu
+      anchorReference="anchorPosition"
+      anchorPosition={{
+        top: node.y,
+        left: node.x,
+      }}
+      transitionDuration={0}
+      keepMounted
+      open={Boolean(node)}
+      onClose={onClose}
+    >
+      <MenuItem dense disabled>
+        {node.name}
+      </MenuItem>
+
+      <MenuItem
+        dense
+        onClick={() => {
+          model.queueDialog(onClose => [
+            TreeNodeInfoDialog,
+            {
+              info: model.getRowData(node.name),
+              model,
+              nodeName: node.name,
+              onClose,
+            },
+          ])
+          onClose()
         }}
-        transitionDuration={0}
-        keepMounted
-        open={Boolean(node)}
-        onClose={onClose}
       >
-        <MenuItem dense disabled>
-          {node.name}
-        </MenuItem>
-
-        <MenuItem
-          dense
-          onClick={() => {
-            model.queueDialog(onClose => [
-              TreeNodeInfoDialog,
-              {
-                info: model.getRowData(node.name),
-                model,
-                nodeName: node.name,
-                onClose,
-              },
-            ])
-            onClose()
-          }}
-        >
-          More info...
-        </MenuItem>
-        <MenuItem
-          dense
-          onClick={() => {
-            model.hideNode(node.id)
-            onClose()
-          }}
-        >
-          Hide node
-        </MenuItem>
-
-        {structures[node.name]?.map(entry => {
-          return !model.selectedStructures.some(n => n.id === node.name) ? (
-            <MenuItem
-              key={JSON.stringify(entry)}
-              dense
-              onClick={() => {
-                model.addStructureToSelection({
-                  structure: entry,
-                  id: node.name,
-                })
-                onClose()
-              }}
-            >
-              Add PDB to selection ({entry.pdb})
-            </MenuItem>
-          ) : (
-            <MenuItem
-              key={JSON.stringify(entry)}
-              dense
-              onClick={() => {
-                model.removeStructureFromSelection({
-                  structure: entry,
-                  id: node.name,
-                })
-                onClose()
-              }}
-            >
-              Remove PDB from selection ({entry.pdb})
-            </MenuItem>
-          )
-        })}
+        More info...
+      </MenuItem>
+      <MenuItem
+        dense
+        onClick={() => {
+          if (collapsed.includes(node.id)) {
+            model.toggleCollapsed(node.id)
+          } else {
+            if (node.id.endsWith('-leafnode')) {
+              model.toggleCollapsed2(`${node.id}`)
+            } else {
+              model.toggleCollapsed2(`${node.id}-leafnode`)
+            }
+          }
+          onClose()
+        }}
+      >
+        {collapsed.includes(node.id) || collapsed2.includes(node.id)
+          ? 'Show node'
+          : 'Hide node'}
+      </MenuItem>
 
-        {// @ts-expect-error
-        nodeDetails?.data.accession?.map(accession => (
+      {structures[node.name]?.map(entry =>
+        !selectedStructures.some(n => n.id === node.name) ? (
+          <MenuItem
+            key={JSON.stringify(entry)}
+            dense
+            onClick={() => {
+              model.addStructureToSelection({
+                structure: entry,
+                id: node.name,
+              })
+              onClose()
+            }}
+          >
+            Add PDB to selection ({entry.pdb})
+          </MenuItem>
+        ) : (
           <MenuItem
+            key={JSON.stringify(entry)}
             dense
-            key={accession}
             onClick={() => {
-              model.addUniprotTrack({
-                // @ts-expect-error
-                name: nodeDetails?.data.name,
-                accession,
+              model.removeStructureFromSelection({
+                structure: entry,
+                id: node.name,
               })
               onClose()
             }}
           >
-            Open UniProt track ({accession})
+            Remove PDB from selection ({entry.pdb})
           </MenuItem>
-        ))}
-      </Menu>
-    </>
+        ),
+      )}
+
+      {// @ts-expect-error
+      nodeDetails?.data.accession?.map(accession => (
+        <MenuItem
+          dense
+          key={accession}
+          onClick={() => {
+            model.addUniprotTrack({
+              // @ts-expect-error
+              name: nodeDetails?.data.name,
+              accession,
+            })
+            onClose()
+          }}
+        >
+          Open UniProt track ({accession})
+        </MenuItem>
+      ))}
+    </Menu>
   )
 })
 

package/src/components/TreePanel/renderTreeCanvas.ts

@@ -71,7 +71,13 @@ export function renderNodeBubbles({
   theme: Theme
   blockSizeYOverride?: number
 }) {
-  const { hierarchy, showBranchLen, collapsed, blockSize } = model
+  const {
+    hierarchy,
+    showBranchLen,
+    collapsed,
+    blockSize,
+    marginLeft: ml,
+  } = model
   const by = blockSizeYOverride || blockSize
   for (const node of hierarchy.descendants()) {
     const val = showBranchLen ? 'len' : 'y'
@@ -84,6 +90,7 @@ export function renderNodeBubbles({
     } = node
     const { branchset, id = '', name = '' } = data
     if (
+      !id.endsWith('-leafnode') &&
       branchset.length &&
       y > offsetY - extendBounds &&
       y < offsetY + by + extendBounds
@@ -96,8 +103,8 @@ export function renderNodeBubbles({
       ctx.stroke()
 
       clickMap?.insert({
-        minX: x - radius,
-        maxX: x - radius + d,
+        minX: x - radius + ml,
+        maxX: x - radius + d + ml,
         minY: y - radius,
         maxY: y - radius + d,
         branch: true,
@@ -133,6 +140,8 @@ export function renderTreeLabels({
     drawTree,
     structures,
     treeAreaWidth,
+    treeAreaWidthMinusMargin,
+    marginLeft: ml,
     noTree,
   } = model
   const by = blockSizeYOverride || blockSize
@@ -169,8 +178,8 @@ export function renderTreeLabels({
       if (!drawTree && !labelsAlignRight) {
         ctx.fillText(displayName, 0, yp)
         clickMap?.insert({
-          minX: 0,
-          maxX: width,
+          minX: 0 + ml,
+          maxX: width + ml,
           minY: yp - height,
           maxY: yp,
           name,
@@ -178,7 +187,7 @@ export function renderTreeLabels({
         })
       } else if (labelsAlignRight) {
         const smallPadding = 2
-        const offset = treeAreaWidth - smallPadding
+        const offset = treeAreaWidthMinusMargin - smallPadding
         if (drawTree && !noTree) {
           const { width } = ctx.measureText(displayName)
           ctx.moveTo(xp + radius + 2, y)
@@ -197,8 +206,8 @@ export function renderTreeLabels({
       } else {
         ctx.fillText(displayName, xp + d, yp)
         clickMap?.insert({
-          minX: xp + d,
-          maxX: xp + d + width,
+          minX: xp + d + ml,
+          maxX: xp + d + width + ml,
           minY: yp - height,
           maxY: yp,
           name,
@@ -237,6 +246,7 @@ export function renderTreeCanvas({
     blockSize,
     fontSize,
     rowHeight,
+    marginLeft,
     nref,
   } = model
   const by = blockSizeYOverride || blockSize
@@ -252,7 +262,7 @@ export function renderTreeCanvas({
     nref < 0 ? -Infinity : highResScaleFactorOverride || highResScaleFactor
   ctx.scale(k, k)
   ctx.clearRect(0, 0, treeWidth + padding, by)
-  ctx.translate(0, -offsetY)
+  ctx.translate(marginLeft, -offsetY)
 
   const font = ctx.font
   ctx.font = font.replace(/\d+px/, `${fontSize}px`)