react-msaview 3.0.0 → 3.0.1

package/src/components/OverviewRubberband.tsx

@@ -1,283 +0,0 @@
-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,283 +0,0 @@
-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 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.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(Rubberband)

package/src/components/dialogs/AnnotationDialog.tsx

@@ -1,144 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  IconButton,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-
-// icons
-import DeleteIcon from '@mui/icons-material/Delete'
-
-// locals
-import { MsaViewModel } from '../../model'
-
-const specialFromEntries = (val: string[][]) => {
-  const ret = {} as Record<string, string[]>
-  val.forEach(([key, val]) => {
-    if (!ret[key]) {
-      ret[key] = [] as string[]
-    }
-    ret[key].push(val)
-  })
-  return ret
-}
-
-const Row = observer(function ({
-  name,
-  value,
-  setValue,
-  setName,
-  onDelete,
-}: {
-  name: string
-  value: string
-  setValue: (arg: string) => void
-  setName: (arg: string) => void
-  onDelete: () => void
-}) {
-  return (
-    <div>
-      <IconButton onClick={onDelete} style={{ margin: 10 }}>
-        <DeleteIcon />
-      </IconButton>
-      <TextField
-        value={name}
-        onChange={event => setName(event.target.value)}
-        label="Key"
-      />
-      <TextField
-        value={value}
-        onChange={event => setValue(event.target.value)}
-        label="Value"
-      />
-    </div>
-  )
-})
-
-export default observer(
-  ({
-    onClose,
-    data,
-    model,
-  }: {
-    model: MsaViewModel
-    onClose: () => void
-    data: { left: number; right: number }
-  }) => {
-    const { blanks } = model
-    const { left: l, right: r } = data
-    const [rows, setRows] = useState([
-      ['Name', ''],
-      ['ID', ''],
-      ['Note', ''],
-    ])
-    return (
-      <Dialog
-        onClose={() => onClose()}
-        open
-        title="Create new region annotation"
-      >
-        <DialogContent>
-          <Typography>
-            Do you want to add an annotation to the MSA at {l}..{r}{' '}
-            {blanks.length
-              ? ` (gapped ${model.getPos(l)}..${model.getPos(r)}`
-              : ''}
-          </Typography>
-          {rows.map(([key, val], index) => (
-            <Row
-              key={index}
-              name={key}
-              value={val}
-              setValue={newValue => {
-                const newRows = [...rows]
-                newRows[index][1] = newValue
-                setRows(newRows)
-              }}
-              setName={newName => {
-                const newRows = [...rows]
-                newRows[index][0] = newName
-                setRows(newRows)
-              }}
-              onDelete={() => {
-                rows.splice(index, 1)
-                setRows([...rows])
-              }}
-            />
-          ))}
-          <Button
-            onClick={() => {
-              setRows([...rows, ['', '']])
-            }}
-          >
-            Add row
-          </Button>
-
-          <DialogActions>
-            <Button
-              onClick={() => {
-                model.addAnnotation(l, r, specialFromEntries(rows))
-                onClose()
-              }}
-              variant="contained"
-              color="primary"
-            >
-              Submit
-            </Button>
-            <Button
-              variant="contained"
-              color="secondary"
-              onClick={() => onClose()}
-            >
-              Cancel
-            </Button>
-          </DialogActions>
-        </DialogContent>
-      </Dialog>
-    )
-  },
-)