react-msaview 1.3.2 → 2.1.0

package/src/components/Rubberband.tsx

@@ -0,0 +1,270 @@
+import React, { useRef, useEffect, useState } 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 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 Rubberband({
+  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.clearAnnotPos()
+  }
+
+  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.setOffsets(leftBpOffset, rightBpOffset)
+        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(Rubberband)

package/src/components/Ruler.tsx

@@ -0,0 +1,123 @@
+import React, { useRef } from 'react'
+import { makeStyles } from 'tss-react/mui'
+import { observer } from 'mobx-react'
+// locals
+import { MsaViewModel } from '../model'
+import { makeTicks, mathPower } from './util'
+
+const useStyles = makeStyles()({
+  majorTickLabel: {
+    fontSize: '11px',
+  },
+  majorTick: {
+    stroke: '#555',
+  },
+  minorTick: {
+    stroke: '#999',
+  },
+})
+
+function RulerBlock({
+  start,
+  end,
+  bpPerPx,
+  reversed,
+  major,
+  minor,
+}: {
+  start: number
+  end: number
+  bpPerPx: number
+  reversed?: boolean
+  major?: boolean
+  minor?: boolean
+}) {
+  const { classes } = useStyles()
+  const ticks = makeTicks(start, end, bpPerPx, major, minor)
+  return (
+    <>
+      {ticks.map(tick => {
+        const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx
+        return (
+          <line
+            key={tick.base}
+            x1={x}
+            x2={x}
+            y1={11}
+            y2={tick.type === 'major' ? 11 + 6 : 11 + 4}
+            strokeWidth={1}
+            stroke={tick.type === 'major' ? '#555' : '#999'}
+            className={
+              tick.type === 'major' ? classes.majorTick : classes.minorTick
+            }
+            data-bp={tick.base}
+          />
+        )
+      })}
+      {ticks
+        .filter(tick => tick.type === 'major')
+        .map(tick => {
+          const x = (reversed ? end - tick.base : tick.base - start) / bpPerPx
+          return (
+            <text
+              x={x}
+              y={10}
+              key={`label-${tick.base}`}
+              textAnchor="middle"
+              style={{ fontSize: '11px' }}
+              className={classes.majorTickLabel}
+            >
+              {mathPower(tick.base + 1)}
+            </text>
+          )
+        })}
+    </>
+  )
+}
+
+const Ruler = observer(function ({ model }: { model: MsaViewModel }) {
+  const {
+    MSA,
+    colWidth,
+    msaAreaWidth,
+    rulerHeight,
+    resizeHandleWidth,
+    scrollX,
+    blocksX,
+    blockSize,
+  } = model
+  const ref = useRef<HTMLDivElement>(null)
+  const offsetX = blocksX[0]
+
+  return !MSA ? null : (
+    <div
+      ref={ref}
+      style={{
+        position: 'relative',
+        width: msaAreaWidth,
+        cursor: 'crosshair',
+        overflow: 'hidden',
+        height: rulerHeight,
+        background: '#ccc',
+      }}
+    >
+      <svg
+        style={{
+          width: blocksX.length * blockSize,
+          position: 'absolute',
+          left: scrollX + offsetX + resizeHandleWidth,
+          pointerEvents: 'none',
+        }}
+      >
+        <RulerBlock
+          key={offsetX}
+          start={offsetX / colWidth}
+          end={offsetX / colWidth + (blockSize * blocksX.length) / colWidth}
+          bpPerPx={1 / colWidth}
+        />
+      </svg>
+    </div>
+  )
+})
+
+export default Ruler

package/src/components/TextTrack.tsx

@@ -0,0 +1,120 @@
+import React, { useRef, useMemo, useEffect } from 'react'
+import { useTheme } from '@mui/material'
+import { observer } from 'mobx-react'
+// locals
+import { MsaViewModel, ITextTrack } from '../model'
+import { colorContrast } from '../util'
+
+const AnnotationBlock = observer(function ({
+  track,
+  model,
+  offsetX,
+}: {
+  track: ITextTrack
+  model: MsaViewModel
+  offsetX: number
+}) {
+  const {
+    blockSize,
+    scrollX,
+    bgColor,
+    colorScheme: modelColorScheme,
+    colWidth,
+    rowHeight,
+    highResScaleFactor,
+  } = model
+  const {
+    model: { customColorScheme, data },
+  } = track
+
+  const colorScheme = customColorScheme || modelColorScheme
+  const theme = useTheme()
+  const ref = useRef<HTMLCanvasElement>(null)
+  const contrastScheme = useMemo(
+    () => colorContrast(colorScheme, theme),
+    [colorScheme, theme],
+  )
+  useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    const ctx = ref.current.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    // this logic is very similar to MSACanvas
+    ctx.resetTransform()
+    ctx.scale(highResScaleFactor, highResScaleFactor)
+    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`)
+
+    const xStart = Math.max(0, Math.floor(offsetX / colWidth))
+    const xEnd = Math.max(0, Math.ceil((offsetX + blockSize) / colWidth))
+    const str = data?.slice(xStart, xEnd)
+    for (let i = 0; str && i < str.length; i++) {
+      const letter = str[i]
+      const color = colorScheme[letter.toUpperCase()]
+      if (bgColor) {
+        const x = i * colWidth + offsetX - (offsetX % colWidth)
+        ctx.fillStyle = color || 'white'
+        ctx.fillRect(x, 0, colWidth, rowHeight)
+        if (rowHeight >= 10 && colWidth >= rowHeight / 2) {
+          ctx.fillStyle = contrastScheme[letter.toUpperCase()] || 'black'
+          ctx.fillText(letter, x + colWidth / 2, rowHeight / 2 + 1) // +1 to avoid cutoff at height:10
+        }
+      }
+    }
+  }, [
+    bgColor,
+    blockSize,
+    colWidth,
+    rowHeight,
+    offsetX,
+    contrastScheme,
+    colorScheme,
+    highResScaleFactor,
+    data,
+  ])
+  return (
+    <canvas
+      ref={ref}
+      height={rowHeight * highResScaleFactor}
+      width={blockSize * highResScaleFactor}
+      style={{
+        position: 'absolute',
+        left: scrollX + offsetX,
+        width: blockSize,
+        height: rowHeight,
+      }}
+    />
+  )
+})
+const AnnotationTrack = observer(function ({
+  track,
+  model,
+}: {
+  track: ITextTrack
+  model: MsaViewModel
+}) {
+  const { blocksX, msaAreaWidth, rowHeight } = model
+  return (
+    <div
+      style={{
+        position: 'relative',
+        height: rowHeight,
+        width: msaAreaWidth,
+        overflow: 'hidden',
+      }}
+    >
+      {blocksX.map(bx => (
+        <AnnotationBlock key={bx} track={track} model={model} offsetX={bx} />
+      ))}
+    </div>
+  )
+})
+
+export default AnnotationTrack

package/src/components/Track.tsx

@@ -0,0 +1,153 @@
+import React, { useState, useRef, useEffect, lazy, Suspense } from 'react'
+import normalizeWheel from 'normalize-wheel'
+import { observer } from 'mobx-react'
+import { IconButton, Menu, MenuItem } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+// icons
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
+
+// locals
+import { MsaViewModel } from '../model'
+
+const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDlg'))
+
+const useStyles = makeStyles()({
+  button: {
+    padding: 0,
+  },
+})
+
+export const TrackLabel = observer(function ({
+  model,
+  track,
+}: {
+  model: MsaViewModel
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  track: any
+}) {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>()
+  const [trackInfoDlgOpen, setTrackInfoDlgOpen] = useState(false)
+  const { rowHeight, treeAreaWidth: width } = model
+  const {
+    height,
+    model: { name },
+  } = track
+  const { classes } = useStyles()
+  const trackLabelHeight = Math.max(8, rowHeight - 8)
+
+  return (
+    <div
+      style={{
+        width,
+        height,
+        flexShrink: 0,
+        textAlign: 'right',
+        fontSize: trackLabelHeight,
+      }}
+    >
+      {name}{' '}
+      <IconButton
+        className={classes.button}
+        style={{
+          width: trackLabelHeight,
+          height: trackLabelHeight,
+        }}
+        onClick={event => setAnchorEl(event.currentTarget)}
+      >
+        <ArrowDropDownIcon />
+      </IconButton>
+      {anchorEl ? (
+        <Menu
+          anchorEl={anchorEl}
+          transitionDuration={0}
+          open
+          onClose={() => setAnchorEl(undefined)}
+        >
+          <MenuItem
+            dense
+            onClick={() => {
+              model.toggleTrack(track.model.id)
+              setAnchorEl(undefined)
+            }}
+          >
+            Close
+          </MenuItem>
+          <MenuItem
+            dense
+            onClick={() => {
+              setTrackInfoDlgOpen(true)
+              setAnchorEl(undefined)
+            }}
+          >
+            Get info
+          </MenuItem>
+        </Menu>
+      ) : null}
+      {trackInfoDlgOpen ? (
+        <Suspense fallback={null}>
+          <TrackInfoDialog
+            model={track.model}
+            onClose={() => setTrackInfoDlgOpen(false)}
+          />
+        </Suspense>
+      ) : null}
+    </div>
+  )
+})
+
+const Track = observer(function ({
+  model,
+  track,
+}: {
+  model: MsaViewModel
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  track: any
+}) {
+  const { resizeHandleWidth } = model
+  const {
+    model: { height, error },
+  } = track
+  const ref = useRef<HTMLDivElement>(null)
+  const scheduled = useRef(false)
+  const deltaX = useRef(0)
+  useEffect(() => {
+    const curr = ref.current
+    if (!curr) {
+      return
+    }
+    function onWheel(origEvent: WheelEvent) {
+      const event = normalizeWheel(origEvent)
+      deltaX.current += event.pixelX
+
+      if (!scheduled.current) {
+        scheduled.current = true
+        requestAnimationFrame(() => {
+          model.doScrollX(-deltaX.current)
+          deltaX.current = 0
+          scheduled.current = false
+        })
+      }
+      origEvent.preventDefault()
+    }
+    curr.addEventListener('wheel', onWheel)
+    return () => {
+      curr.removeEventListener('wheel', onWheel)
+    }
+  }, [model])
+  return (
+    <div key={track.id} style={{ display: 'flex', height }}>
+      <TrackLabel model={model} track={track} />
+      <div style={{ width: resizeHandleWidth, flexShrink: 0 }} />
+      <div ref={ref}>
+        {error ? (
+          <div style={{ color: 'red', fontSize: 10 }}>{`${error}`}</div>
+        ) : (
+          <track.ReactComponent model={model} track={track} />
+        )}
+      </div>
+    </div>
+  )
+})
+
+export default Track