react-msaview 2.1.5 → 3.0.1

package/src/components/Minimap.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { observer } from 'mobx-react'
+import { MsaViewModel } from '../model'
+
+const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
+  const [mouseDown, setMouseDown] = useState<{
+    clientX: number
+    scrollX: number
+  }>()
+  const scheduled = useRef(false)
+  const [hovered, setHovered] = useState(false)
+  const {
+    scrollX,
+    msaAreaWidth: W,
+    minimapHeight: H,
+    colWidth,
+    numColumns,
+  } = model
+  const unit = W / numColumns / colWidth
+  const left = -scrollX
+  const right = left + W
+  const s = left * unit
+  const e = right * unit
+  const fill = 'rgba(66, 119, 127, 0.3)'
+
+  useEffect(() => {
+    function fn(event: MouseEvent) {
+      if (mouseDown !== undefined) {
+        if (!scheduled.current) {
+          scheduled.current = true
+          window.requestAnimationFrame(() => {
+            model.setScrollX(
+              mouseDown.scrollX - (event.clientX - mouseDown.clientX) / unit,
+            )
+            scheduled.current = false
+          })
+        }
+      }
+    }
+    function fn2() {
+      setMouseDown(undefined)
+    }
+    if (mouseDown !== undefined) {
+      document.addEventListener('mousemove', fn)
+      document.addEventListener('mouseup', fn2)
+      return () => {
+        document.removeEventListener('mousemove', fn)
+        document.removeEventListener('mousemove', fn2)
+      }
+    }
+  }, [model, unit, mouseDown])
+
+  const BAR_HEIGHT = 12
+  const H2 = H - 12
+  return (
+    <div style={{ position: 'relative', height: H, width: '100%' }}>
+      <div
+        style={{
+          boxSizing: 'border-box',
+          height: BAR_HEIGHT,
+          border: '1px solid #555',
+        }}
+      />
+      <div
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: Math.max(0, s),
+          background: hovered ? 'rgba(66,119,127,0.6)' : fill,
+          cursor: 'pointer',
+          border: '1px solid #555',
+          boxSizing: 'border-box',
+          height: BAR_HEIGHT,
+          width: e - s,
+          zIndex: 100,
+        }}
+        onMouseOver={() => setHovered(true)}
+        onMouseOut={() => setHovered(false)}
+        onMouseDown={event => {
+          setMouseDown({
+            clientX: event.clientX,
+            scrollX: model.scrollX,
+          })
+        }}
+      />
+
+      <svg height={H2} style={{ width: '100%' }}>
+        <polygon
+          fill={fill}
+          points={[
+            [e, 0],
+            [s, 0],
+            [0, H2],
+            [W, H2],
+          ].toString()}
+        />
+      </svg>
+    </div>
+  )
+})
+
+export default Minimap

package/src/components/TextTrack.tsx

@@ -20,6 +20,7 @@ const AnnotationBlock = observer(function ({
     bgColor,
     colorScheme: modelColorScheme,
     colWidth,
+    fontSize,
     rowHeight,
     highResScaleFactor,
   } = model
@@ -50,7 +51,7 @@ const AnnotationBlock = observer(function ({
     ctx.clearRect(0, 0, blockSize, rowHeight)
     ctx.translate(-offsetX, 0)
     ctx.textAlign = 'center'
-    ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
+    ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
 
     const xStart = Math.max(0, Math.floor(offsetX / colWidth))
     const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth))
@@ -69,6 +70,7 @@ const AnnotationBlock = observer(function ({
       }
     }
   }, [
+    fontSize,
     bgColor,
     blockSize,
     colWidth,

package/src/components/Track.tsx

@@ -10,7 +10,7 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 // locals
 import { MsaViewModel } from '../model'
 
-const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDlg'))
+const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDialog'))
 
 const useStyles = makeStyles()({
   button: {
@@ -27,7 +27,7 @@ export const TrackLabel = observer(function ({
   track: any
 }) {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>()
-  const [trackInfoDlgOpen, setTrackInfoDlgOpen] = useState(false)
+  const [trackInfoDialogOpen, setTrackInfoDialogOpen] = useState(false)
   const { rowHeight, treeAreaWidth: width } = model
   const {
     height,
@@ -76,7 +76,7 @@ export const TrackLabel = observer(function ({
           <MenuItem
             dense
             onClick={() => {
-              setTrackInfoDlgOpen(true)
+              setTrackInfoDialogOpen(true)
               setAnchorEl(undefined)
             }}
           >
@@ -84,11 +84,11 @@ export const TrackLabel = observer(function ({
           </MenuItem>
         </Menu>
       ) : null}
-      {trackInfoDlgOpen ? (
+      {trackInfoDialogOpen ? (
         <Suspense fallback={null}>
           <TrackInfoDialog
             model={track.model}
-            onClose={() => setTrackInfoDlgOpen(false)}
+            onClose={() => setTrackInfoDialogOpen(false)}
           />
         </Suspense>
       ) : null}

package/src/components/{TreeBranchMenu.tsx → TreePanel/TreeBranchMenu.tsx}

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

package/src/components/{TreeCanvas.tsx → TreePanel/TreeCanvas.tsx}

@@ -3,10 +3,9 @@ import normalizeWheel from 'normalize-wheel'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 import TreeCanvasBlock from './TreeCanvasBlock'
-
-const padding = 600
+import { padding } from './renderTreeCanvas'
 
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)

package/src/components/TreePanel/TreeCanvasBlock.tsx

@@ -0,0 +1,195 @@
+import React, { 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 TreeNodeMenu from './TreeNodeMenu'
+import TreeBranchMenu from './TreeBranchMenu'
+import { padding, renderTreeCanvas } from './renderTreeCanvas'
+
+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 theme = useTheme()
+  const ref = useRef<HTMLCanvasElement>()
+  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 { scrollY, treeAreaWidth, margin, blockSize, highResScaleFactor } =
+    model
+
+  const width = treeAreaWidth + padding
+  const height = blockSize
+  const w2 = width * highResScaleFactor
+  const h2 = height * highResScaleFactor
+
+  const vref = useCallback(
+    (arg: HTMLCanvasElement) => {
+      model.incrementRef()
+      ref.current = arg
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [model, height, width],
+  )
+  useEffect(() => {
+    const ctx = ref.current?.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    return autorun(() => {
+      renderTreeCanvas({
+        ctx,
+        model,
+        offsetY,
+        clickMap: clickMap.current,
+        theme,
+      })
+    })
+  }, [model, offsetY, theme])
+
+  useEffect(() => {
+    const ctx = mouseoverRef.current?.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    ctx.resetTransform()
+    ctx.clearRect(0, 0, treeAreaWidth + 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, treeAreaWidth])
+
+  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
+  }
+  const style = {
+    width,
+    height,
+    top: scrollY + offsetY,
+    left: 0,
+    position: 'absolute',
+  } as const
+  return (
+    <>
+      {branchMenu?.id ? (
+        <TreeBranchMenu
+          node={branchMenu}
+          model={model}
+          onClose={() => setBranchMenu(undefined)}
+        />
+      ) : null}
+
+      {toggleNodeMenu?.id ? (
+        <TreeNodeMenu
+          node={toggleNodeMenu}
+          model={model}
+          onClose={() => setToggleNodeMenu(undefined)}
+        />
+      ) : null}
+
+      <canvas
+        width={w2}
+        height={h2}
+        style={style}
+        onMouseMove={event => {
+          if (!ref.current) {
+            return
+          }
+
+          const ret = hoverNameClickMap(event) || hoverBranchClickMap(event)
+          console.log({ ret })
+          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 })
+          }
+        }}
+        onMouseLeave={() => setHoverElt(undefined)}
+        ref={vref}
+      />
+      <canvas
+        style={{
+          ...style,
+          pointerEvents: 'none',
+          zIndex: 100,
+        }}
+        width={width}
+        height={height}
+        ref={mouseoverRef}
+      />
+    </>
+  )
+})
+
+export default TreeCanvasBlock

package/src/components/{TreeMenu.tsx → TreePanel/TreeNodeMenu.tsx}

@@ -3,16 +3,16 @@ import { Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 
-const TreeNodeInfoDlg = lazy(() => import('./dialogs/TreeNodeInfoDlg'))
+const TreeNodeInfoDialog = lazy(() => import('./dialogs/TreeNodeInfoDialog'))
 
 const TreeMenu = observer(function ({
   node,
   onClose,
   model,
 }: {
-  node: { x: number; y: number; name: string }
+  node: { x: number; y: number; name: string; id: string }
   model: MsaViewModel
   onClose: () => void
 }) {
@@ -39,16 +39,29 @@ const TreeMenu = observer(function ({
         <MenuItem
           dense
           onClick={() => {
-            model.setDialogComponent(TreeNodeInfoDlg, {
-              info: model.getRowData(node.name),
-              model,
-              nodeName: node.name,
-            })
+            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) ? (

package/src/components/{TreeRuler.tsx → TreePanel/TreeRuler.tsx}

@@ -2,11 +2,11 @@ import React from 'react'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../model'
+import { MsaViewModel } from '../../model'
 
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {
-  const { treeWidth } = model
-  return <div style={{ width: treeWidth }} />
+  const { treeAreaWidth } = model
+  return <div style={{ flexShrink: 0, width: treeAreaWidth }} />
 })
 
 export default TreeRuler

package/src/components/{dialogs/TreeNodeInfoDlg.tsx → TreePanel/dialogs/TreeNodeInfoDialog.tsx}

@@ -6,7 +6,7 @@ import {
   Attributes,
   BaseCard,
 } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-import { MsaViewModel } from '../../model'
+import { MsaViewModel } from '../../../model'
 
 export default observer(function ({
   info,
@@ -25,7 +25,7 @@ export default observer(function ({
     <Dialog onClose={() => onClose()} open title="Tree node info">
       <DialogContent>
         <BaseCard title="Attributes">
-          <Attributes attributes={info} />
+          <Attributes attributes={{ nodeName, ...info }} />
         </BaseCard>
         {metadata ? (
           <BaseCard title="Extra metadata">

package/src/components/TreePanel/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+
+import { MsaViewModel } from '../../model'
+import TreeCanvas from './TreeCanvas'
+
+const TreePanel = observer(function ({ model }: { model: MsaViewModel }) {
+  const { treeAreaWidth } = model
+  return (
+    <div style={{ flexShrink: 0, width: treeAreaWidth }}>
+      <TreeCanvas model={model} />
+    </div>
+  )
+})
+
+export default TreePanel