react-msaview 1.3.2 → 2.1.0

package/src/components/MSACanvas.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useState, useRef } from 'react'
+import { Typography, CircularProgress } from '@mui/material'
+import { observer } from 'mobx-react'
+import normalizeWheel from 'normalize-wheel'
+
+// locals
+import { MsaViewModel } from '../model'
+import MSABlock from './MSABlock'
+
+const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
+  const { MSA, msaFilehandle, height, msaAreaWidth, blocks2d } = model
+  const ref = useRef<HTMLDivElement>(null)
+  // wheel
+  const scheduled = useRef(false)
+  const deltaX = useRef(0)
+  const deltaY = useRef(0)
+  // mouse click-and-drag scrolling
+  const prevX = useRef<number>(0)
+  const prevY = useRef<number>(0)
+  const [mouseDragging, setMouseDragging] = useState(false)
+  useEffect(() => {
+    const curr = ref.current
+    if (!curr) {
+      return
+    }
+    function onWheel(origEvent: WheelEvent) {
+      const event = normalizeWheel(origEvent)
+      deltaX.current += event.pixelX
+      deltaY.current += event.pixelY
+
+      if (!scheduled.current) {
+        scheduled.current = true
+        requestAnimationFrame(() => {
+          model.doScrollX(-deltaX.current)
+          model.doScrollY(-deltaY.current)
+          deltaX.current = 0
+          deltaY.current = 0
+          scheduled.current = false
+        })
+      }
+      origEvent.preventDefault()
+    }
+    curr.addEventListener('wheel', onWheel)
+    return () => {
+      curr.removeEventListener('wheel', onWheel)
+    }
+  }, [model])
+
+  useEffect(() => {
+    let cleanup = () => {}
+
+    function globalMouseMove(event: MouseEvent) {
+      event.preventDefault()
+      const currX = event.clientX
+      const currY = event.clientY
+      const distanceX = currX - prevX.current
+      const distanceY = currY - prevY.current
+      if (distanceX || 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/
+        if (!scheduled.current) {
+          scheduled.current = true
+          window.requestAnimationFrame(() => {
+            model.doScrollX(distanceX)
+            model.doScrollY(distanceY)
+            scheduled.current = false
+            prevX.current = event.clientX
+            prevY.current = event.clientY
+          })
+        }
+      }
+    }
+
+    function globalMouseUp() {
+      prevX.current = 0
+      if (mouseDragging) {
+        setMouseDragging(false)
+      }
+    }
+
+    if (mouseDragging) {
+      window.addEventListener('mousemove', globalMouseMove, true)
+      window.addEventListener('mouseup', globalMouseUp, true)
+      cleanup = () => {
+        window.removeEventListener('mousemove', globalMouseMove, true)
+        window.removeEventListener('mouseup', globalMouseUp, true)
+      }
+    }
+    return cleanup
+  }, [model, mouseDragging])
+
+  return (
+    <div
+      ref={ref}
+      onMouseDown={event => {
+        // check if clicking a draggable element or a resize handle
+        const target = event.target as HTMLElement
+        if (target.draggable || target.dataset.resizer) {
+          return
+        }
+
+        // otherwise do click and drag scroll
+        if (event.button === 0) {
+          prevX.current = event.clientX
+          prevY.current = event.clientY
+          setMouseDragging(true)
+        }
+      }}
+      onMouseUp={event => {
+        event.preventDefault()
+        setMouseDragging(false)
+      }}
+      onMouseLeave={event => {
+        event.preventDefault()
+      }}
+      style={{
+        position: 'relative',
+        height,
+        width: msaAreaWidth,
+        overflow: 'hidden',
+      }}
+    >
+      {!MSA && !msaFilehandle ? null : !MSA ? (
+        <div style={{ position: 'absolute', left: '50%', top: '50%' }}>
+          <CircularProgress />
+          <Typography>Loading...</Typography>
+        </div>
+      ) : (
+        blocks2d.map(([bx, by]) => (
+          <MSABlock
+            key={`${bx}_${by}`}
+            model={model}
+            offsetX={bx}
+            offsetY={by}
+          />
+        ))
+      )}
+    </div>
+  )
+})
+
+export default MSACanvas

package/src/components/MSAMouseoverCanvas.tsx

@@ -0,0 +1,87 @@
+import React, { useEffect, useRef } from 'react'
+import { observer } from 'mobx-react'
+
+// locals
+import { MsaViewModel } from '../model'
+import { sum } from '@jbrowse/core/util'
+
+const MSAMouseoverCanvas = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const ref = useRef<HTMLCanvasElement>(null)
+  const {
+    height,
+    width,
+    treeAreaWidth,
+    resizeHandleWidth,
+    rulerHeight,
+    turnedOnTracks,
+    scrollX,
+    scrollY,
+    mouseCol,
+    mouseRow,
+    rowHeight,
+    colWidth,
+  } = model
+  const totalTrackAreaHeight = sum(turnedOnTracks.map(r => r.model.height))
+  useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    const ctx = ref.current.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    ctx.resetTransform()
+    ctx.clearRect(0, 0, width, height)
+
+    ctx.fillStyle = 'rgba(0,0,0,0.15)'
+    if (mouseCol !== undefined) {
+      const x =
+        (mouseCol - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth
+
+      ctx.fillRect(x, 0, colWidth, height)
+    }
+    if (mouseRow !== undefined) {
+      const y =
+        mouseRow * rowHeight + scrollY + rulerHeight + totalTrackAreaHeight
+      ctx.fillRect(treeAreaWidth + resizeHandleWidth, y, width, rowHeight)
+    }
+  }, [
+    mouseCol,
+    colWidth,
+    scrollY,
+    totalTrackAreaHeight,
+    mouseRow,
+    rowHeight,
+    rulerHeight,
+    scrollX,
+    height,
+    resizeHandleWidth,
+    treeAreaWidth,
+    width,
+  ])
+
+  return (
+    <canvas
+      ref={ref}
+      width={width}
+      height={height}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width,
+        height,
+        zIndex: 1000,
+        pointerEvents: 'none',
+      }}
+    />
+  )
+})
+
+export default MSAMouseoverCanvas

package/src/components/MSAView.tsx

@@ -0,0 +1,88 @@
+import React, { lazy, 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 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'))
+
+export default observer(function ({ model }: { model: MsaViewModel }) {
+  const { done, initialized, treeAreaWidth, height, turnedOnTracks } = model
+
+  return (
+    <div>
+      {!initialized ? (
+        <ImportForm model={model} />
+      ) : !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>
+
+                  <Rubberband
+                    model={model}
+                    ControlComponent={<Ruler 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>
+          <HorizontalResizeHandle model={model} />
+        </div>
+      )}
+
+      {model.DialogComponent ? (
+        <Suspense fallback={null}>
+          <model.DialogComponent
+            {...(model.DialogProps || {})}
+            onClose={() => {
+              model.setDialogComponent(undefined, undefined)
+            }}
+          />
+        </Suspense>
+      ) : null}
+
+      {model.annotPos ? (
+        <Suspense fallback={null}>
+          <AnnotationDialog
+            data={model.annotPos}
+            model={model}
+            onClose={() => model.clearAnnotPos()}
+          />
+        </Suspense>
+      ) : null}
+    </div>
+  )
+})

package/src/components/MultiAlignmentSelector.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Select } from '@mui/material'
+
+// locals
+import { MsaViewModel } from '../model'
+
+const MultiAlignmentSelector = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const { currentAlignment, alignmentNames } = model
+  return alignmentNames.length > 0 ? (
+    <Select
+      native
+      value={currentAlignment}
+      size="small"
+      onChange={event => {
+        model.setCurrentAlignment(+(event.target.value as string))
+        model.setScrollX(0)
+        model.setScrollY(0)
+      }}
+    >
+      {alignmentNames.map((option, index) => (
+        <option key={`${option}-${index}`} value={index}>
+          {option}
+        </option>
+      ))}
+    </Select>
+  ) : null
+})
+export default MultiAlignmentSelector

package/src/components/ResizeHandles.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { observer } from 'mobx-react'
+
+// locals
+import { MsaViewModel } from '../model'
+
+export const VerticalResizeHandle = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const { resizeHandleWidth } = model
+  const [mouseDragging, setMouseDragging] = useState(false)
+  const scheduled = useRef(false)
+  const prevX = useRef(0)
+
+  useEffect(() => {
+    function globalMouseMove(event: MouseEvent) {
+      event.preventDefault()
+      const currX = event.clientX
+      if (prevX.current === 0) {
+        prevX.current = event.clientX
+      } else {
+        const distance = currX - prevX.current
+        if (distance) {
+          // use rAF to make it so multiple event handlers aren't fired per-frame
+          // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
+          if (!scheduled.current) {
+            scheduled.current = true
+            window.requestAnimationFrame(() => {
+              model.setTreeAreaWidth(model.treeAreaWidth + distance)
+              scheduled.current = false
+              prevX.current = event.clientX
+            })
+          }
+        }
+      }
+    }
+
+    function globalMouseUp() {
+      prevX.current = 0
+      if (mouseDragging) {
+        setMouseDragging(false)
+      }
+    }
+    if (mouseDragging) {
+      document.addEventListener('mousemove', globalMouseMove, true)
+      document.addEventListener('mouseup', globalMouseUp, true)
+      return () => {
+        document.removeEventListener('mousemove', globalMouseMove, true)
+        document.removeEventListener('mouseup', globalMouseUp, true)
+      }
+    }
+    return () => {}
+  }, [mouseDragging, model])
+
+  return (
+    <div>
+      <div
+        onMouseDown={() => setMouseDragging(true)}
+        style={{
+          cursor: 'ew-resize',
+          height: '100%',
+          width: resizeHandleWidth,
+          background: `rgba(200,200,200)`,
+          position: 'relative',
+        }}
+      />
+    </div>
+  )
+})
+
+export const HorizontalResizeHandle = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const { resizeHandleWidth } = model
+  const [mouseDragging, setMouseDragging] = useState(false)
+  const scheduled = useRef(false)
+  const prevY = useRef(0)
+
+  useEffect(() => {
+    function globalMouseMove(event: MouseEvent) {
+      event.preventDefault()
+      const currY = event.clientY
+      if (prevY.current === 0) {
+        prevY.current = event.clientY
+      } else {
+        const distance = currY - prevY.current
+        if (distance) {
+          // use rAF to make it so multiple event handlers aren't fired per-frame
+          // see https://calendar.perfplanet.com/2013/the-runtime-performance-checklist/
+          if (!scheduled.current) {
+            scheduled.current = true
+            window.requestAnimationFrame(() => {
+              model.setHeight(model.height + distance)
+              scheduled.current = false
+              prevY.current = event.clientY
+            })
+          }
+        }
+      }
+    }
+
+    function globalMouseUp() {
+      prevY.current = 0
+      if (mouseDragging) {
+        setMouseDragging(false)
+      }
+    }
+    if (mouseDragging) {
+      document.addEventListener('mousemove', globalMouseMove, true)
+      document.addEventListener('mouseup', globalMouseUp, true)
+      return () => {
+        document.removeEventListener('mousemove', globalMouseMove, true)
+        document.removeEventListener('mouseup', globalMouseUp, true)
+      }
+    }
+    return () => {}
+  }, [mouseDragging, model])
+
+  return (
+    <div>
+      <div
+        onMouseDown={() => setMouseDragging(true)}
+        style={{
+          cursor: 'ns-resize',
+          width: '100%',
+          height: resizeHandleWidth,
+          background: `rgba(200,200,200)`,
+          position: 'relative',
+        }}
+      />
+    </div>
+  )
+})