react-msaview 1.3.2 → 2.0.0

package/src/components/Rubberband.tsx

@@ -0,0 +1,271 @@
+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)
+  }
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  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,122 @@
+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,
+    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: 20,
+        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/SettingsDlg.tsx

@@ -0,0 +1,154 @@
+import React, { useState } from 'react'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import { Dialog } from '@jbrowse/core/ui'
+import {
+  Button,
+  Checkbox,
+  DialogActions,
+  DialogContent,
+  FormControlLabel,
+  MenuItem,
+  TextField,
+} from '@mui/material'
+
+import { MsaViewModel } from '../model'
+import colorSchemes from '../colorSchemes'
+
+const useStyles = makeStyles()(theme => ({
+  field: {
+    margin: theme.spacing(4),
+  },
+}))
+
+export default observer(function ({
+  model,
+  onClose,
+  open,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+  open: boolean
+}) {
+  const { classes } = useStyles()
+  const { colorSchemeName, noTree } = model
+  const [rowHeight, setRowHeight] = useState(`${model.rowHeight}`)
+  const [colWidth, setColWidth] = useState(`${model.colWidth}`)
+  const [treeWidth, setTreeWidth] = useState(`${model.treeWidth}`)
+
+  function error(n: string) {
+    return Number.isNaN(+n) || +n < 0
+  }
+  const rowHeightError = error(rowHeight)
+  const colWidthError = error(colWidth)
+  const treeWidthError = error(treeWidth)
+
+  return (
+    <Dialog onClose={() => onClose()} open={open} title="Settings">
+      <DialogContent>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={model.showBranchLen}
+              onChange={() => model.toggleBranchLen()}
+            />
+          }
+          label="Show branch length"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={model.bgColor}
+              onChange={() => model.toggleBgColor()}
+            />
+          }
+          label="Color background"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={model.drawNodeBubbles}
+              onChange={() => model.toggleNodeBubbles()}
+            />
+          }
+          label="Draw node bubbles"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={model.drawTree}
+              onChange={() => model.toggleDrawTree()}
+            />
+          }
+          label="Draw tree (if available)"
+        />
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={model.labelsAlignRight}
+              onChange={() => model.toggleLabelsAlignRight()}
+            />
+          }
+          label="Labels align right (note: labels may draw over tree, but can adjust tree width or tree area width in UI)"
+        />
+
+        <TextField
+          className={classes.field}
+          label="Row height (px)"
+          value={rowHeight}
+          error={rowHeightError}
+          onChange={event => setRowHeight(event.target.value)}
+        />
+        <TextField
+          className={classes.field}
+          label="Column width (px)"
+          value={colWidth}
+          error={colWidthError}
+          onChange={event => setColWidth(event.target.value)}
+        />
+        <br />
+        {!noTree ? (
+          <TextField
+            className={classes.field}
+            label="Tree width (px)"
+            value={treeWidth}
+            error={treeWidthError}
+            onChange={event => setTreeWidth(event.target.value)}
+          />
+        ) : null}
+
+        <br />
+
+        <TextField
+          select
+          label="Color scheme"
+          value={colorSchemeName}
+          onChange={event => model.setColorSchemeName(event.target.value)}
+        >
+          {Object.keys(colorSchemes).map(option => (
+            <MenuItem key={option} value={option}>
+              {option}
+            </MenuItem>
+          ))}
+        </TextField>
+        <DialogActions>
+          <Button
+            disabled={rowHeightError || colWidthError || treeWidthError}
+            onClick={() => {
+              model.setRowHeight(+rowHeight)
+              model.setColWidth(+colWidth)
+              if (!noTree) {
+                model.setTreeWidth(+treeWidth)
+              }
+              onClose()
+            }}
+            variant="contained"
+            color="primary"
+          >
+            Submit
+          </Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  )
+})

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