react-msaview 1.3.1 → 2.0.0

package/src/components/Track.tsx

@@ -0,0 +1,150 @@
+import React, { useState, useRef, useEffect } 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'
+import TrackInfoDialog from './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 ? (
+        <TrackInfoDialog
+          model={track.model}
+          onClose={() => setTrackInfoDlgOpen(false)}
+        />
+      ) : 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

package/src/components/TrackInfoDlg.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react'
+import copy from 'copy-to-clipboard'
+import { observer } from 'mobx-react'
+import { Dialog } from '@jbrowse/core/ui'
+import { Button, DialogActions, DialogContent } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()(theme => ({
+  textArea: {
+    padding: theme.spacing(2),
+    overflow: 'auto',
+    background: '#ddd',
+    wordBreak: 'break-word',
+  },
+}))
+
+const TrackInfoDialog = observer(function ({
+  model,
+  onClose,
+}: {
+  model: { name: string; data: string }
+  onClose: () => void
+}) {
+  const [label, setLabel] = useState('Copy to clipboard')
+  const { classes } = useStyles()
+  return (
+    <Dialog
+      open
+      onClose={onClose}
+      fullWidth
+      maxWidth="lg"
+      title={`Track info - ${model.name}`}
+    >
+      <DialogContent>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            copy(model.data)
+            setLabel('Copied!')
+            setTimeout(() => {
+              setLabel('Copy to clipboard')
+            }, 300)
+          }}
+        >
+          {label}
+        </Button>
+        <pre className={classes.textArea}>{model.data}</pre>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="contained" onClick={onClose} color="secondary">
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
+
+export default TrackInfoDialog

package/src/components/TracklistDlg.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { Dialog } from '@jbrowse/core/ui'
+import {
+  DialogContent,
+  FormControlLabel,
+  FormGroup,
+  Checkbox,
+  DialogActions,
+  Button,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+
+// locals
+import { MsaViewModel } from '../model'
+
+export default observer(function ({
+  model,
+  onClose,
+  open,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+  open: boolean
+}) {
+  const { tracks } = model
+
+  return (
+    <Dialog onClose={() => onClose()} open={open} title="Add track">
+      <DialogContent>
+        <Typography>
+          Open relevant per-alignment tracks e.g. protein domains
+        </Typography>
+
+        <FormGroup>
+          {tracks.map(track => {
+            return (
+              <FormControlLabel
+                key={track.model.id}
+                control={
+                  <Checkbox
+                    checked={!model.turnedOffTracks.has(track.model.id)}
+                    onChange={() => {
+                      model.toggleTrack(track.model.id)
+                    }}
+                  />
+                }
+                label={track.model.name}
+              />
+            )
+          })}
+        </FormGroup>
+        <DialogActions>
+          <Button onClick={() => onClose()} variant="contained" color="primary">
+            Close
+          </Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  )
+})