react-msaview 2.1.5 → 3.0.0

package/src/components/MSAView.tsx

@@ -1,26 +1,21 @@
-import React, { lazy, Suspense } from 'react'
+import React, { Suspense } from 'react'
 
 import { observer } from 'mobx-react'
 import { Typography } from '@mui/material'
 
 // locals
 import ImportForm from './ImportForm'
-import Rubberband from './Rubberband'
-import TreeCanvas from './TreeCanvas'
-import MSACanvas from './MSACanvas'
-import Ruler from './Ruler'
-import TreeRuler from './TreeRuler'
+import TreeRuler from './TreePanel/TreeRuler'
 import Header from './Header'
 import Track from './Track'
-
 import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles'
 import { MsaViewModel } from '../model'
-import MSAMouseoverCanvas from './MSAMouseoverCanvas'
-
-const AnnotationDialog = lazy(() => import('./dialogs/AnnotationDlg'))
+import MSAPanel from './MSAPanel'
+import TreePanel from './TreePanel'
+import Minimap from './Minimap'
 
-export default observer(function ({ model }: { model: MsaViewModel }) {
-  const { done, initialized, treeAreaWidth, height, turnedOnTracks } = model
+const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
+  const { done, initialized } = model
 
   return (
     <div>
@@ -29,58 +24,43 @@ export default observer(function ({ model }: { model: MsaViewModel }) {
       ) : !done ? (
         <Typography variant="h4">Loading...</Typography>
       ) : (
-        <div>
-          <div style={{ height, overflow: 'hidden' }}>
-            <Header model={model} />
-            <div>
-              <div style={{ position: 'relative' }}>
-                <div style={{ display: 'flex' }}>
-                  <div style={{ flexShrink: 0, width: treeAreaWidth }}>
-                    <TreeRuler model={model} />
-                  </div>
+        <MSAView2 model={model} />
+      )}
+    </div>
+  )
+})
 
-                  <Rubberband
-                    model={model}
-                    ControlComponent={<Ruler model={model} />}
-                  />
-                </div>
-                {turnedOnTracks?.map(track => (
-                  <Track key={track.model.id} model={model} track={track} />
-                ))}
+const MSAView2 = observer(function ({ model }: { model: MsaViewModel }) {
+  const { height, turnedOnTracks, DialogComponent, DialogProps } = model
+  return (
+    <div>
+      <div style={{ height, overflow: 'hidden' }}>
+        <Header model={model} />
+        <div style={{ position: 'relative' }}>
+          <div style={{ display: 'flex' }}>
+            <TreeRuler model={model} />
+            <Minimap model={model} />
+          </div>
+          {turnedOnTracks?.map(track => (
+            <Track key={track.model.id} model={model} track={track} />
+          ))}
 
-                <div style={{ display: 'flex' }}>
-                  <div style={{ flexShrink: 0, width: treeAreaWidth }}>
-                    <TreeCanvas model={model} />
-                  </div>
-                  <VerticalResizeHandle model={model} />
-                  <MSACanvas model={model} />
-                  <MSAMouseoverCanvas model={model} />
-                </div>
-              </div>
-            </div>
+          <div style={{ display: 'flex' }}>
+            <TreePanel model={model} />
+            <VerticalResizeHandle model={model} />
+            <MSAPanel model={model} />
           </div>
-          <HorizontalResizeHandle model={model} />
         </div>
-      )}
+      </div>
+      <HorizontalResizeHandle model={model} />
 
-      {model.DialogComponent ? (
+      {DialogComponent ? (
         <Suspense fallback={null}>
-          <model.DialogComponent
-            {...(model.DialogProps || {})}
-            onClose={() => model.setDialogComponent()}
-          />
-        </Suspense>
-      ) : null}
-
-      {model.annotPos ? (
-        <Suspense fallback={null}>
-          <AnnotationDialog
-            data={model.annotPos}
-            model={model}
-            onClose={() => model.clearAnnotationClickBoundaries()}
-          />
+          <DialogComponent {...DialogProps} />
         </Suspense>
       ) : null}
     </div>
   )
 })
+
+export default MSAView

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(() => {
+    if (mouseDown !== undefined) {
+      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)
+      }
+      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/OverviewRubberband.tsx

@@ -0,0 +1,283 @@
+import React, { useRef, useEffect, useState, lazy } from 'react'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import { Popover, Typography, alpha } from '@mui/material'
+import { Menu } from '@jbrowse/core/ui'
+
+// icons
+import AssignmentIcon from '@mui/icons-material/Assignment'
+
+// locals
+import { MsaViewModel } from '../model'
+import VerticalGuide from './VerticalGuide'
+
+const AnnotationDialog = lazy(() => import('./dialogs/AnnotationDialog'))
+
+const useStyles = makeStyles()(theme => {
+  const background =
+    'tertiary' in theme.palette && theme.palette.tertiary
+      ? alpha(theme.palette.tertiary.main, 0.7)
+      : alpha(theme.palette.primary.main, 0.7)
+  return {
+    rubberband: {
+      height: '100%',
+      background,
+      position: 'absolute',
+      zIndex: 10,
+      textAlign: 'center',
+      overflow: 'hidden',
+    },
+    rubberbandControl: {
+      cursor: 'crosshair',
+      width: '100%',
+      minHeight: 8,
+    },
+    rubberbandText: {
+      color: theme.palette.tertiary
+        ? theme.palette.tertiary.contrastText
+        : theme.palette.primary.contrastText,
+    },
+    popover: {
+      mouseEvents: 'none',
+      cursor: 'crosshair',
+    },
+    paper: {
+      paddingLeft: theme.spacing(1),
+      paddingRight: theme.spacing(1),
+    },
+  }
+})
+
+function OverviewRubberband({
+  model,
+  ControlComponent = <div />,
+}: {
+  model: MsaViewModel
+  ControlComponent?: React.ReactElement
+}) {
+  const { treeAreaWidth } = model
+  const [startX, setStartX] = useState<number>()
+  const [currentX, setCurrentX] = useState<number>()
+
+  // clientX and clientY used for anchorPosition for menu
+  // offsetX used for calculations about width of selection
+  const [anchorPosition, setAnchorPosition] = useState<{
+    offsetX: number
+    clientX: number
+    clientY: number
+  }>()
+  const [guideX, setGuideX] = useState<number | undefined>()
+  const controlsRef = useRef<HTMLDivElement>(null)
+  const rubberbandRef = useRef(null)
+  const { classes } = useStyles()
+  const mouseDragging = startX !== undefined && anchorPosition === undefined
+
+  useEffect(() => {
+    function globalMouseMove(event: MouseEvent) {
+      if (controlsRef.current && mouseDragging) {
+        const relativeX =
+          event.clientX - controlsRef.current.getBoundingClientRect().left
+        setCurrentX(relativeX)
+      }
+    }
+
+    function globalMouseUp(event: MouseEvent) {
+      if (startX !== undefined && controlsRef.current) {
+        const { clientX, clientY } = event
+        const ref = controlsRef.current
+        const offsetX = clientX - ref.getBoundingClientRect().left
+        // as stated above, store both clientX/Y and offsetX for different
+        // purposes
+        setAnchorPosition({
+          offsetX,
+          clientX,
+          clientY,
+        })
+        setGuideX(undefined)
+      }
+    }
+    if (mouseDragging) {
+      window.addEventListener('mousemove', globalMouseMove)
+      window.addEventListener('mouseup', globalMouseUp)
+      return () => {
+        window.removeEventListener('mousemove', globalMouseMove)
+        window.removeEventListener('mouseup', globalMouseUp)
+      }
+    }
+    return () => {}
+  }, [startX, mouseDragging, anchorPosition])
+
+  useEffect(() => {
+    if (
+      !mouseDragging &&
+      currentX !== undefined &&
+      startX !== undefined &&
+      Math.abs(currentX - startX) <= 3
+    ) {
+      handleClose()
+    }
+  }, [mouseDragging, currentX, startX, model.colWidth])
+
+  function mouseDown(event: React.MouseEvent<HTMLDivElement>) {
+    event.preventDefault()
+    event.stopPropagation()
+    const relativeX =
+      event.clientX -
+      (event.target as HTMLDivElement).getBoundingClientRect().left
+    setStartX(relativeX)
+    setCurrentX(relativeX)
+  }
+
+  function mouseMove(event: React.MouseEvent<HTMLDivElement>) {
+    const target = event.target as HTMLDivElement
+    setGuideX(event.clientX - target.getBoundingClientRect().left)
+  }
+
+  function mouseOut() {
+    setGuideX(undefined)
+    model.clearAnnotationClickBoundaries()
+  }
+
+  function handleClose() {
+    setAnchorPosition(undefined)
+    setStartX(undefined)
+    setCurrentX(undefined)
+  }
+
+  function handleMenuItemClick(_: unknown, callback: Function) {
+    callback()
+    handleClose()
+  }
+
+  if (startX === undefined) {
+    return (
+      <>
+        {guideX !== undefined ? (
+          <VerticalGuide model={model} coordX={guideX} />
+        ) : null}
+        <div
+          data-testid="rubberband_controls"
+          className={classes.rubberbandControl}
+          role="presentation"
+          ref={controlsRef}
+          onMouseDown={mouseDown}
+          onMouseOut={mouseOut}
+          onMouseMove={mouseMove}
+        >
+          {ControlComponent}
+        </div>
+      </>
+    )
+  }
+
+  const right = anchorPosition ? anchorPosition.offsetX : currentX || 0
+  const left = right < startX ? right : startX
+  const width = Math.abs(right - startX)
+  const leftBpOffset = model.pxToBp(left)
+  const rightBpOffset = model.pxToBp(left + width)
+  const numOfBpSelected = Math.ceil(width / model.colWidth)
+
+  const menuItems = [
+    {
+      label: 'Create annotation',
+      icon: AssignmentIcon,
+      onClick: () => {
+        model.setAnnotationClickBoundaries(leftBpOffset, rightBpOffset)
+        model.queueDialog(onClose => [
+          AnnotationDialog,
+          {
+            data: model.annotPos,
+            model,
+            onClose: () => {
+              model.clearAnnotationClickBoundaries()
+              onClose()
+            },
+          },
+        ])
+        handleClose()
+      },
+    },
+  ]
+  return (
+    <>
+      {rubberbandRef.current ? (
+        <>
+          <Popover
+            className={classes.popover}
+            classes={{
+              paper: classes.paper,
+            }}
+            open
+            anchorEl={rubberbandRef.current}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'left',
+            }}
+            transformOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right',
+            }}
+            keepMounted
+            disableRestoreFocus
+          >
+            <Typography>{leftBpOffset + 1}</Typography>
+          </Popover>
+          <Popover
+            className={classes.popover}
+            classes={{
+              paper: classes.paper,
+            }}
+            open
+            anchorEl={rubberbandRef.current}
+            anchorOrigin={{
+              vertical: 'top',
+              horizontal: 'right',
+            }}
+            transformOrigin={{
+              vertical: 'bottom',
+              horizontal: 'left',
+            }}
+            keepMounted
+            disableRestoreFocus
+          >
+            <Typography>{rightBpOffset + 1}</Typography>
+          </Popover>
+        </>
+      ) : null}
+      <div
+        ref={rubberbandRef}
+        className={classes.rubberband}
+        style={{ left: left + treeAreaWidth, width }}
+      >
+        <Typography variant="h6" className={classes.rubberbandText}>
+          {numOfBpSelected.toLocaleString('en-US')} bp
+        </Typography>
+      </div>
+      <div
+        data-testid="rubberband_controls"
+        className={classes.rubberbandControl}
+        role="presentation"
+        ref={controlsRef}
+        onMouseDown={mouseDown}
+        onMouseOut={mouseOut}
+        onMouseMove={mouseMove}
+      >
+        {ControlComponent}
+      </div>
+      {anchorPosition ? (
+        <Menu
+          anchorReference="anchorPosition"
+          anchorPosition={{
+            left: anchorPosition.clientX,
+            top: anchorPosition.clientY,
+          }}
+          onMenuItemClick={handleMenuItemClick}
+          open={Boolean(anchorPosition)}
+          onClose={handleClose}
+          menuItems={menuItems}
+        />
+      ) : null}
+    </>
+  )
+}
+export default observer(OverviewRubberband)

package/src/components/Rubberband.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from 'react'
+import React, { useRef, useEffect, useState, lazy } from 'react'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 import { Popover, Typography, alpha } from '@mui/material'
@@ -11,6 +11,8 @@ import AssignmentIcon from '@mui/icons-material/Assignment'
 import { MsaViewModel } from '../model'
 import VerticalGuide from './VerticalGuide'
 
+const AnnotationDialog = lazy(() => import('./dialogs/AnnotationDialog'))
+
 const useStyles = makeStyles()(theme => {
   const background =
     'tertiary' in theme.palette && theme.palette.tertiary
@@ -181,6 +183,17 @@ function Rubberband({
       icon: AssignmentIcon,
       onClick: () => {
         model.setAnnotationClickBoundaries(leftBpOffset, rightBpOffset)
+        model.queueDialog(onClose => [
+          AnnotationDialog,
+          {
+            data: model.annotPos,
+            model,
+            onClose: () => {
+              model.clearAnnotationClickBoundaries()
+              onClose()
+            },
+          },
+        ])
         handleClose()
       },
     },

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)