react-msaview 1.3.2 → 2.1.0

package/src/components/ZoomControls.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import { IconButton } from '@mui/material'
+import { observer } from 'mobx-react'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+
+// locals
+import { MsaViewModel } from '../model'
+
+// icons
+import MoreVert from '@mui/icons-material/MoreVert'
+import ZoomIn from '@mui/icons-material/ZoomIn'
+import ZoomOut from '@mui/icons-material/ZoomOut'
+
+const ZoomControls = observer(function ZoomControls({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const { colWidth, rowHeight } = model
+  return (
+    <>
+      <IconButton
+        onClick={() => {
+          model.setColWidth(Math.ceil(colWidth * 1.5))
+          model.setRowHeight(Math.ceil(rowHeight * 1.5))
+        }}
+      >
+        <ZoomIn />
+      </IconButton>
+      <IconButton
+        onClick={() => {
+          model.setColWidth(Math.max(1, Math.floor(colWidth * 0.75)))
+          model.setRowHeight(Math.max(1.5, Math.floor(rowHeight * 0.75)))
+        }}
+      >
+        <ZoomOut />
+      </IconButton>
+      <CascadingMenuButton
+        menuItems={[
+          {
+            label: 'Decrease row height',
+            onClick: () => {
+              model.setRowHeight(Math.max(1.5, rowHeight * 0.75))
+            },
+          },
+          {
+            label: 'Increase row height',
+            onClick: () => {
+              model.setRowHeight(rowHeight * 1.5)
+            },
+          },
+          {
+            label: 'Decrease col width',
+            onClick: () => {
+              model.setColWidth(Math.max(1, colWidth * 0.75))
+            },
+          },
+          {
+            label: 'Increase col width',
+            onClick: () => {
+              model.setColWidth(colWidth * 1.5)
+            },
+          },
+          {
+            label: 'Reset zoom to default',
+            onClick: () => {
+              model.setColWidth(16)
+              model.setRowHeight(20)
+            },
+          },
+        ]}
+      >
+        <MoreVert />
+      </CascadingMenuButton>
+    </>
+  )
+})
+export default ZoomControls

package/src/components/data/seq2.ts

@@ -0,0 +1,35 @@
+export const smallMSA = `CLUSTAL O(1.2.3) multiple sequence alignment
+UniProt/Swiss-Prot|P26898|IL2RA_SHEEP      MEPSLLMWRFFVFIVVPGCVTEACHDDPPSLRNA----------MFKVLRYE----VGTM
+UniProt/Swiss-Prot|P01590|IL2RA_MOUSE      MEPRLLMLGFLSLTIVPSCRAELCLYDPPEVPNA----------TFKALSYK----NGTI
+UniProt/Swiss-Prot|P41690|IL2RA_FELCA      MEPSLLLWGILTFVVVHGHVTELCDENPPDIQHA----------TFKALTYK----TGTM
+UniProt/Swiss-Prot|P01589|IL2RA_HUMAN      MDSYLLMWGLLTFIMVPGCQAELCDDDPPEIPHA----------TFKAMAYK----EGTM
+UniProt/Swiss-Prot|Q5MNY4|IL2RA_MACMU      MDPYLLMWGLLTFITVPGCQAELCDDDPPKITHA----------TFKAVAYK----EGTM
+UniProt/Swiss-Prot|Q95118|IL2RG_BOVIN      -----------------------------------LLMWGLLT-----------------
+UniProt/Swiss-Prot|P40321|IL2RG_CANFA      MLKPPLPLRSLLFLQLSLLGVGLNSTVPMPNGNEDIT------PDFFLTATPSETLSVSS
+UniProt/Swiss-Prot|P26896|IL2RB_RAT        MATVDLSWRLPLYILLLLLATT--------------------------------WVSAAV
+UniProt/Swiss-Prot|Q8BZM1|GLMN_MOUSE       PLPLRSLLFLQLPLLGVGLNP------------------PLPLRSLLFLQLPLLGVGLNP
+UniProt/Swiss-Prot|P36835|IL2_CAPHI        -----------LLGVGLNPKFLTP------------------------------------
+UniProt/Swiss-Prot|Q7JFM4|IL2_AOTVO        MLKPPLPLRSLLFLQLPLLGVGLNPKFLTPSGNEDIGGKPGTGGDFFLTSTPAGTLDVST
+UniProt/Swiss-Prot|Q29416|IL2_CANFA        --------------LFLQLSLLG-------------------------------------
+`
+
+export const smallMSAOnly = `CLUSTAL O(1.2.4) multiple sequence alignment
+
+
+sp|P69905|HBA_HUMAN       MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTTKTYFPHFDLSHGSAQVKGHG	60
+sp|P01942|HBA_MOUSE       MVLSGEDKSNIKAAWGKIGGHGAEYGAEALERMFASFPTTKTYFPHFDVSHGSAQVKGHG	60
+sp|P13786|HBAZ_CAPHI      MSLTRTERTIILSLWSKISTQADVIGTETLERLFSCYPQAKTYFPHFDLHSGSAQLRAHG	60
+                          * *:  ::: : : *.*:. :.   *:*:***:* .:* :********:  ****::.**
+
+sp|P69905|HBA_HUMAN       KKVADALTNAVAHVDDMPNALSALSDLHAHKLRVDPVNFKLLSHCLLVTLAAHLPAEFTP	120
+sp|P01942|HBA_MOUSE       KKVADALASAAGHLDDLPGALSALSDLHAHKLRVDPVNFKLLSHCLLVTLASHHPADFTP	120
+sp|P13786|HBAZ_CAPHI      SKVVAAVGDAVKSIDNVTSALSKLSELHAYVLRVDPVNFKFLSHCLLVTLASHFPADFTA	120
+                          .**. *: .*.  :*:: .*** **:***: *********:**********:* **:**
+
+sp|P69905|HBA_HUMAN       AVHASLDKFLASVSTVLTSKYR	142
+sp|P01942|HBA_MOUSE       AVHASLDKFLASVSTVLTSKYR	142
+sp|P13786|HBAZ_CAPHI      DAHAAWDKFLSIVSGVLTEKYR	142
+                           .**: ****: ** ***.***`
+
+export const smallTree =
+  '(((UniProt/Swiss-Prot|P26898|IL2RA_SHEEP:0.24036,(UniProt/Swiss-Prot|P41690|IL2RA_FELCA:0.17737,(UniProt/Swiss-Prot|P01589|IL2RA_HUMAN:0.03906,UniProt/Swiss-Prot|Q5MNY4|IL2RA_MACMU:0.03787):0.13033):0.04964):0.02189,UniProt/Swiss-Prot|P01590|IL2RA_MOUSE:0.23072):0.06814,(((UniProt/Swiss-Prot|Q95118|IL2RG_BOVIN:0.09600,UniProt/Swiss-Prot|P40321|IL2RG_CANFA:0.09845):0.25333,UniProt/Swiss-Prot|Q29416|IL2_CANFA:-0.35055):0.10231,(UniProt/Swiss-Prot|P26896|IL2RB_RAT:0.33631,UniProt/Swiss-Prot|Q7JFM4|IL2_AOTVO:-0.33631):0.10166):0.01607,(UniProt/Swiss-Prot|Q8BZM1|GLMN_MOUSE:0.32378,UniProt/Swiss-Prot|P36835|IL2_CAPHI:-0.32378):0.09999)'

package/src/components/dialogs/AboutDlg.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Dialog } from '@jbrowse/core/ui'
+import { DialogContent, Typography, Link } from '@mui/material'
+import { version } from '../../version'
+
+export default function AboutDialog({ onClose }: { onClose: () => void }) {
+  return (
+    <Dialog onClose={() => onClose()} open title="About this plugin">
+      <DialogContent>
+        <Typography>
+          MSAView {version} (
+          <Link href="https://github.com/gmod/jbrowse-plugin-msaview">
+            Github
+          </Link>
+          )
+        </Typography>
+
+        <ul>
+          <li>
+            <Typography>
+              We use some color schemes from the{' '}
+              <Link href="https://github.com/biotite-dev/biotite">biotite</Link>{' '}
+              project, and their license is reproduced{' '}
+              <Link href="https://github.com/biotite-dev/biotite/blob/master/LICENSE.rst">
+                here
+              </Link>
+            </Typography>
+          </li>
+          <li>
+            <Typography>
+              See this page for some information on jalview colorings{' '}
+              <Link href="https://www.jalview.org/help/html/colourSchemes/">
+                here
+              </Link>
+            </Typography>
+          </li>
+          <li>
+            <Typography>
+              See this page for some info on the clustal, cinema, maeditor, and
+              lesk color schemes{' '}
+              <Link href="http://www.bioinformatics.nl/~berndb/aacolour.html">
+                here
+              </Link>
+            </Typography>
+          </li>
+          <li>
+            <Typography>
+              See this paper about the flower color scheme{' '}
+              <Link href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7245768/">
+                here
+              </Link>
+            </Typography>
+          </li>
+        </ul>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/dialogs/AddTrackDlg.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from 'react'
+import {
+  DialogContent,
+  DialogActions,
+  Button,
+  TextField,
+  MenuItem,
+  Typography,
+} from '@mui/material'
+import { Dialog, FileSelector } from '@jbrowse/core/ui'
+import { FileLocation } from '@jbrowse/core/util/types'
+import { observer } from 'mobx-react'
+import { MsaViewModel } from '../../model'
+
+export default observer(function ({
+  model,
+  onClose,
+  open,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+  open: boolean
+}) {
+  const options = model.rows.map(r => r[0])
+  const [trackFile, setTrackFile] = useState<FileLocation>()
+  const [currentOption, setCurrentOption] = useState('')
+
+  return (
+    <Dialog onClose={() => onClose()} open={open} title="Add track">
+      <DialogContent>
+        <Typography>
+          Open relevant per-alignment tracks e.g. protein domains
+        </Typography>
+        <TextField
+          select
+          helperText="Which row does this track apply to?"
+          value={currentOption}
+          onChange={event => {
+            setCurrentOption(event.target.value)
+          }}
+        >
+          {options.map((option, index) => (
+            <MenuItem key={`${option}-${index}`} value={option}>
+              {option}
+            </MenuItem>
+          ))}
+        </TextField>
+        <FileSelector location={trackFile} setLocation={setTrackFile} />
+        <DialogActions>
+          <Button
+            onClick={() => {
+              model.setError(undefined)
+              if (trackFile) {
+                // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                model.setMSAFilehandle(trackFile)
+              }
+            }}
+            variant="contained"
+            color="primary"
+          >
+            Open
+          </Button>
+          <Button
+            color="secondary"
+            variant="contained"
+            onClick={() => onClose()}
+          >
+            Cancel
+          </Button>
+        </DialogActions>
+      </DialogContent>
+    </Dialog>
+  )
+})

package/src/components/dialogs/AnnotationDlg.tsx

@@ -0,0 +1,144 @@
+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>
+    )
+  },
+)

package/src/components/dialogs/DetailsDlg.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { DialogContent } from '@mui/material'
+import { observer } from 'mobx-react'
+import { Dialog } from '@jbrowse/core/ui'
+import { Attributes } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+
+// locals
+import { MsaViewModel } from '../../model'
+
+const DetailsDialog = observer(function ({
+  model,
+  onClose,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+}) {
+  const { header } = model
+
+  return (
+    <Dialog onClose={() => onClose()} open title="Metadata">
+      <DialogContent>
+        <Attributes attributes={header} />
+      </DialogContent>
+    </Dialog>
+  )
+})
+
+export default DetailsDialog

package/src/components/dialogs/MoreInfoDlg.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { Dialog } from '@jbrowse/core/ui'
+import { DialogContent } from '@mui/material'
+import { observer } from 'mobx-react'
+import { Attributes } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+
+export default observer(function ({
+  info,
+  onClose,
+}: {
+  info: Record<string, unknown>
+  onClose: () => void
+}) {
+  return (
+    <Dialog onClose={() => onClose()} open title="Metadata">
+      <DialogContent>
+        <Attributes attributes={info} />
+      </DialogContent>
+    </Dialog>
+  )
+})

package/src/components/dialogs/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),
+  },
+}))
+
+const SettingsDialog = observer(function ({
+  model,
+  onClose,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+}) {
+  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 open onClose={() => onClose()} 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>
+  )
+})
+
+export default SettingsDialog

package/src/components/dialogs/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