react-msaview 2.0.0 → 2.1.1

package/src/components/TreeCanvasBlock.tsx

@@ -0,0 +1,359 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { observer } from 'mobx-react'
+import RBush from 'rbush'
+
+// locals
+import { MsaViewModel } from '../model'
+import TreeMenu from './TreeMenu'
+import TreeBranchMenu from './TreeBranchMenu'
+
+const extendBounds = 5
+const radius = 3.5
+const d = radius * 2
+
+const padding = 600
+
+interface TooltipData {
+  name: string
+  id: string
+  x: number
+  y: number
+}
+
+interface ClickEntry {
+  name: string
+  id: string
+  branch?: boolean
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+const TreeCanvasBlock = observer(function ({
+  model,
+  offsetY,
+}: {
+  model: MsaViewModel
+  offsetY: number
+}) {
+  const ref = useRef<HTMLCanvasElement>(null)
+  const clickMap = useRef(new RBush<ClickEntry>())
+  const mouseoverRef = useRef<HTMLCanvasElement>(null)
+  const [branchMenu, setBranchMenu] = useState<TooltipData>()
+  const [toggleNodeMenu, setToggleNodeMenu] = useState<TooltipData>()
+  const [hoverElt, setHoverElt] = useState<ClickEntry>()
+
+  const {
+    hierarchy,
+    rowHeight,
+    scrollY,
+    treeWidth,
+    showBranchLen,
+    collapsed,
+    margin,
+    labelsAlignRight,
+    noTree,
+    blockSize,
+    drawNodeBubbles,
+    drawTree,
+    treeAreaWidth,
+    structures,
+    highResScaleFactor,
+  } = model
+
+  useEffect(() => {
+    clickMap.current.clear()
+
+    if (!ref.current) {
+      return
+    }
+    const ctx = ref.current.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    ctx.resetTransform()
+    ctx.scale(highResScaleFactor, highResScaleFactor)
+    ctx.clearRect(0, 0, treeWidth + padding, blockSize)
+    ctx.translate(margin.left, -offsetY)
+
+    const font = ctx.font
+    ctx.font = font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
+
+    if (!noTree && drawTree) {
+      for (const { source, target } of hierarchy.links()) {
+        const y = showBranchLen ? 'len' : 'y'
+        // @ts-expect-error
+        const { x: sy, [y]: sx } = source
+        // @ts-expect-error
+        const { x: ty, [y]: tx } = target
+
+        const y1 = Math.min(sy, ty)
+        const y2 = Math.max(sy, ty)
+        // 1d line intersection to check if line crosses block at all, this is
+        // an optimization that allows us to skip drawing most tree links
+        // outside the block
+        if (offsetY + blockSize >= y1 && y2 >= offsetY) {
+          ctx.beginPath()
+          ctx.moveTo(sx, sy)
+          ctx.lineTo(sx, ty)
+          ctx.lineTo(tx, ty)
+          ctx.stroke()
+        }
+      }
+
+      if (drawNodeBubbles) {
+        for (const node of hierarchy.descendants()) {
+          const val = showBranchLen ? 'len' : 'y'
+          const {
+            // @ts-expect-error
+            x: y,
+            // @ts-expect-error
+            [val]: x,
+            data,
+          } = node
+          const { id = '', name = '' } = data
+
+          if (
+            y > offsetY - extendBounds &&
+            y < offsetY + blockSize + extendBounds
+          ) {
+            ctx.strokeStyle = 'black'
+            ctx.fillStyle = collapsed.includes(id) ? 'black' : 'white'
+            ctx.beginPath()
+            ctx.arc(x, y, radius, 0, 2 * Math.PI)
+            ctx.fill()
+            ctx.stroke()
+
+            clickMap.current.insert({
+              minX: x - radius,
+              maxX: x - radius + d,
+              minY: y - radius,
+              maxY: y - radius + d,
+              branch: true,
+              id,
+              name,
+            })
+          }
+        }
+      }
+    }
+
+    if (rowHeight >= 5) {
+      if (labelsAlignRight) {
+        ctx.textAlign = 'right'
+        ctx.setLineDash([1, 3])
+      } else {
+        ctx.textAlign = 'start'
+      }
+      for (const node of hierarchy.leaves()) {
+        const {
+          // @ts-expect-error
+          x: y,
+          // @ts-expect-error
+          y: x,
+          data: { name, id },
+          // @ts-expect-error
+          len,
+        } = node
+
+        if (
+          y > offsetY - extendBounds &&
+          y < offsetY + blockSize + extendBounds
+        ) {
+          // note: +rowHeight/4 matches with -rowHeight/4 in msa
+          const yp = y + rowHeight / 4
+          const xp = showBranchLen ? len : x
+
+          const { width } = ctx.measureText(name)
+          const height = ctx.measureText('M').width // use an 'em' for height
+
+          const hasStructure = structures[name]
+          ctx.fillStyle = hasStructure ? 'blue' : 'black'
+
+          if (!drawTree && !labelsAlignRight) {
+            ctx.fillText(name, 0, yp)
+            clickMap.current.insert({
+              minX: 0,
+              maxX: width,
+              minY: yp - height,
+              maxY: yp,
+              name,
+              id,
+            })
+          } else if (labelsAlignRight) {
+            const smallPadding = 2
+            const offset = treeAreaWidth - smallPadding - margin.left
+            if (drawTree && !noTree) {
+              const { width } = ctx.measureText(name)
+              ctx.moveTo(xp + radius + 2, y)
+              ctx.lineTo(offset - smallPadding - width, y)
+              ctx.stroke()
+            }
+            ctx.fillText(name, offset, yp)
+            clickMap.current.insert({
+              minX: treeAreaWidth - margin.left - width,
+              maxX: treeAreaWidth - margin.left,
+              minY: yp - height,
+              maxY: yp,
+              name,
+              id,
+            })
+          } else {
+            ctx.fillText(name, xp + d, yp)
+            clickMap.current.insert({
+              minX: xp + d,
+              maxX: xp + d + width,
+              minY: yp - height,
+              maxY: yp,
+              name,
+              id,
+            })
+          }
+        }
+      }
+      ctx.setLineDash([])
+    }
+  }, [
+    collapsed,
+    rowHeight,
+    margin.left,
+    hierarchy,
+    offsetY,
+    treeWidth,
+    showBranchLen,
+    noTree,
+    blockSize,
+    drawNodeBubbles,
+    drawTree,
+    labelsAlignRight,
+    treeAreaWidth,
+    structures,
+    highResScaleFactor,
+  ])
+
+  useEffect(() => {
+    const canvas = mouseoverRef.current
+    if (!canvas) {
+      return
+    }
+    const ctx = canvas.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    ctx.resetTransform()
+    ctx.clearRect(0, 0, treeWidth + padding, blockSize)
+    ctx.translate(margin.left, -offsetY)
+
+    if (hoverElt) {
+      const { minX, maxX, minY, maxY } = hoverElt
+
+      ctx.fillStyle = 'rgba(0,0,0,0.1)'
+      ctx.fillRect(minX, minY, maxX - minX, maxY - minY)
+    }
+  }, [hoverElt, margin.left, offsetY, blockSize, treeWidth])
+
+  function hoverBranchClickMap(event: React.MouseEvent) {
+    const x = event.nativeEvent.offsetX - margin.left
+    const y = event.nativeEvent.offsetY
+
+    const [entry] = clickMap.current.search({
+      minX: x,
+      maxX: x + 1,
+      minY: y + offsetY,
+      maxY: y + 1 + offsetY,
+    })
+
+    return entry && entry.branch
+      ? { ...entry, x: event.clientX, y: event.clientY }
+      : undefined
+  }
+
+  function hoverNameClickMap(event: React.MouseEvent) {
+    const x = event.nativeEvent.offsetX - margin.left
+    const y = event.nativeEvent.offsetY
+    const [entry] = clickMap.current.search({
+      minX: x,
+      maxX: x + 1,
+      minY: y + offsetY,
+      maxY: y + 1 + offsetY,
+    })
+
+    return entry && !entry.branch
+      ? { ...entry, x: event.clientX, y: event.clientY }
+      : undefined
+  }
+
+  return (
+    <>
+      {branchMenu?.id ? (
+        <TreeBranchMenu
+          node={branchMenu}
+          model={model}
+          onClose={() => setBranchMenu(undefined)}
+        />
+      ) : null}
+
+      {toggleNodeMenu?.id ? (
+        <TreeMenu
+          node={toggleNodeMenu}
+          model={model}
+          onClose={() => setToggleNodeMenu(undefined)}
+        />
+      ) : null}
+
+      <canvas
+        width={(treeWidth + padding) * highResScaleFactor}
+        height={blockSize * highResScaleFactor}
+        style={{
+          width: treeWidth + padding,
+          height: blockSize,
+          top: scrollY + offsetY,
+          left: 0,
+          position: 'absolute',
+        }}
+        onMouseMove={event => {
+          if (!ref.current) {
+            return
+          }
+
+          const ret = hoverNameClickMap(event) || hoverBranchClickMap(event)
+          ref.current.style.cursor = ret ? 'pointer' : 'default'
+          setHoverElt(hoverNameClickMap(event))
+        }}
+        onClick={event => {
+          const { clientX: x, clientY: y } = event
+
+          const data = hoverBranchClickMap(event)
+          if (data?.id) {
+            setBranchMenu({ ...data, x, y })
+          }
+
+          const data2 = hoverNameClickMap(event)
+          if (data2?.id) {
+            setToggleNodeMenu({ ...data2, x, y })
+          }
+        }}
+        ref={ref}
+      />
+      <canvas
+        style={{
+          width: treeWidth + padding,
+          height: blockSize,
+          top: scrollY + offsetY,
+          left: 0,
+          position: 'absolute',
+          pointerEvents: 'none',
+          zIndex: 100,
+        }}
+        width={treeWidth + padding}
+        height={blockSize}
+        ref={mouseoverRef}
+      />
+    </>
+  )
+})
+
+export default TreeCanvasBlock

package/src/components/TreeMenu.tsx

@@ -0,0 +1,105 @@
+import React, { lazy } from 'react'
+import { Menu, MenuItem } from '@mui/material'
+import { observer } from 'mobx-react'
+
+// locals
+import { MsaViewModel } from '../model'
+
+const MoreInfoDlg = lazy(() => import('./dialogs/MoreInfoDlg'))
+
+const TreeMenu = observer(function ({
+  node,
+  onClose,
+  model,
+}: {
+  node: { x: number; y: number; name: string }
+  model: MsaViewModel
+  onClose: () => void
+}) {
+  const { structures } = model
+  const nodeDetails = node ? model.getRowData(node.name) : undefined
+
+  return (
+    <>
+      <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.setDialogComponent(MoreInfoDlg, {
+              info: model.getRowData(node.name),
+            })
+            onClose()
+          }}
+        >
+          More info...
+        </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>
+          )
+        })}
+
+        {// @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>
+    </>
+  )
+})
+
+export default TreeMenu

package/src/components/ZoomControls.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { IconButton } from '@mui/material'
+import { observer } from 'mobx-react'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+
+// locals
+import { MsaViewModel } from '../model'
+
+// icons
+import MoreVert from '@mui/icons-material/MoreVert'
+import ZoomIn from '@mui/icons-material/ZoomIn'
+import ZoomOut from '@mui/icons-material/ZoomOut'
+
+const ZoomControls = observer(function ZoomControls({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const { colWidth, rowHeight } = model
+  return (
+    <>
+      <IconButton
+        onClick={() => {
+          model.setColWidth(Math.ceil(colWidth * 1.5))
+          model.setRowHeight(Math.ceil(rowHeight * 1.5))
+        }}
+      >
+        <ZoomIn />
+      </IconButton>
+      <IconButton
+        onClick={() => {
+          model.setColWidth(Math.max(1, Math.floor(colWidth * 0.75)))
+          model.setRowHeight(Math.max(1.5, Math.floor(rowHeight * 0.75)))
+        }}
+      >
+        <ZoomOut />
+      </IconButton>
+      <CascadingMenuButton
+        menuItems={[
+          {
+            label: 'Decrease row height',
+            onClick: () => {
+              model.setRowHeight(Math.max(1.5, rowHeight * 0.75))
+            },
+          },
+          {
+            label: 'Increase row height',
+            onClick: () => {
+              model.setRowHeight(rowHeight * 1.5)
+            },
+          },
+          {
+            label: 'Decrease col width',
+            onClick: () => {
+              model.setColWidth(Math.max(1, colWidth * 0.75))
+            },
+          },
+          {
+            label: 'Increase col width',
+            onClick: () => {
+              model.setColWidth(colWidth * 1.5)
+            },
+          },
+          {
+            label: 'Reset zoom to default',
+            onClick: () => {
+              model.setColWidth(16)
+              model.setRowHeight(20)
+            },
+          },
+        ]}
+      >
+        <MoreVert />
+      </CascadingMenuButton>
+    </>
+  )
+})
+export default ZoomControls

package/src/components/{AboutDlg.tsx → dialogs/AboutDlg.tsx}

@@ -1,17 +1,11 @@
 import React from 'react'
 import { Dialog } from '@jbrowse/core/ui'
 import { DialogContent, Typography, Link } from '@mui/material'
-import { version } from '../version'
+import { version } from '../../version'
 
-export default function AboutDialog({
-  onClose,
-  open,
-}: {
-  onClose: () => void
-  open: boolean
-}) {
+export default function AboutDialog({ onClose }: { onClose: () => void }) {
   return (
-    <Dialog onClose={() => onClose()} open={open} title="About this plugin">
+    <Dialog onClose={() => onClose()} open title="About this plugin">
       <DialogContent>
         <Typography>
           MSAView {version} (

package/src/components/{AddTrackDlg.tsx → dialogs/AddTrackDlg.tsx}

@@ -10,7 +10,7 @@ import {
 import { Dialog, FileSelector } from '@jbrowse/core/ui'
 import { FileLocation } from '@jbrowse/core/util/types'
 import { observer } from 'mobx-react'
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 
 export default observer(function ({
   model,

package/src/components/{AnnotationDlg.tsx → dialogs/AnnotationDlg.tsx}

@@ -14,10 +14,10 @@ import { Dialog } from '@jbrowse/core/ui'
 import DeleteIcon from '@mui/icons-material/Delete'
 
 // locals
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 
 const specialFromEntries = (val: string[][]) => {
-  const ret = {} as { [key: string]: string[] }
+  const ret = {} as Record<string, string[]>
   val.forEach(([key, val]) => {
     if (!ret[key]) {
       ret[key] = [] as string[]

package/src/components/{DetailsDlg.tsx → dialogs/DetailsDlg.tsx}

@@ -5,24 +5,24 @@ import { Dialog } from '@jbrowse/core/ui'
 import { Attributes } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 
 // locals
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 
-export default observer(function ({
+const DetailsDialog = observer(function ({
   model,
   onClose,
-  open,
 }: {
   model: MsaViewModel
   onClose: () => void
-  open: boolean
 }) {
   const { header } = model
 
   return (
-    <Dialog onClose={() => onClose()} open={open} title="Metadata">
+    <Dialog onClose={() => onClose()} open title="Metadata">
       <DialogContent>
         <Attributes attributes={header} />
       </DialogContent>
     </Dialog>
   )
 })
+
+export default DetailsDialog

package/src/components/{SettingsDlg.tsx → dialogs/SettingsDlg.tsx}

@@ -12,8 +12,8 @@ import {
   TextField,
 } from '@mui/material'
 
-import { MsaViewModel } from '../model'
-import colorSchemes from '../colorSchemes'
+import { MsaViewModel } from '../../model'
+import colorSchemes from '../../colorSchemes'
 
 const useStyles = makeStyles()(theme => ({
   field: {
@@ -21,14 +21,12 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-export default observer(function ({
+const SettingsDialog = observer(function ({
   model,
   onClose,
-  open,
 }: {
   model: MsaViewModel
   onClose: () => void
-  open: boolean
 }) {
   const { classes } = useStyles()
   const { colorSchemeName, noTree } = model
@@ -44,7 +42,7 @@ export default observer(function ({
   const treeWidthError = error(treeWidth)
 
   return (
-    <Dialog onClose={() => onClose()} open={open} title="Settings">
+    <Dialog open onClose={() => onClose()} title="Settings">
       <DialogContent>
         <FormControlLabel
           control={
@@ -152,3 +150,5 @@ export default observer(function ({
     </Dialog>
   )
 })
+
+export default SettingsDialog

package/src/components/{TracklistDlg.tsx → dialogs/TracklistDlg.tsx}

@@ -12,21 +12,19 @@ import {
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 
 export default observer(function ({
   model,
   onClose,
-  open,
 }: {
   model: MsaViewModel
   onClose: () => void
-  open: boolean
 }) {
   const { tracks } = model
 
   return (
-    <Dialog onClose={() => onClose()} open={open} title="Add track">
+    <Dialog onClose={() => onClose()} open title="Add track">
       <DialogContent>
         <Typography>
           Open relevant per-alignment tracks e.g. protein domains

package/src/components/util.ts

@@ -55,7 +55,6 @@ export function makeTicks(
   }
 
   if (bpPerPx < 0) {
-    // eslint-disable-next-line @typescript-eslint/no-extra-semi
     ;[minBase, maxBase] = [maxBase, minBase]
   }
 

package/src/declare.d.ts

@@ -1,2 +1 @@
 declare module 'stockholm-js'
-declare module 'normalize-wheel'