react-msaview 1.3.1 → 2.0.0

package/src/components/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 { [key: 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/BoxTrack.tsx

@@ -0,0 +1,225 @@
+import React, { useRef, useMemo, useEffect } from 'react'
+import { observer } from 'mobx-react'
+import { getSnapshot, isStateTreeNode } from 'mobx-state-tree'
+
+// locals
+import { IBoxTrack, MsaViewModel } from '../model'
+import Layout from '../layout'
+
+interface Feat {
+  start: number
+  end: number
+}
+const AnnotationBlock = observer(function ({
+  track,
+  model,
+  offsetX,
+}: {
+  track: IBoxTrack
+  model: MsaViewModel
+  offsetX: number
+}) {
+  const {
+    blockSize,
+    colWidth,
+    blanks,
+    rowHeight,
+    highResScaleFactor,
+    scrollX,
+  } = model
+  const {
+    model: { height, features, associatedRowName },
+  } = track
+
+  const feats: Feat[] = isStateTreeNode(features)
+    ? // @ts-expect-error
+      getSnapshot(features)
+    : features
+
+  const layout = useMemo(() => {
+    const temp = new Layout()
+
+    feats?.forEach((feature, index) => {
+      const { start, end } = feature
+      if (associatedRowName) {
+        const s = model.rowSpecificBpToPx(associatedRowName, start - 1)
+        const e = model.rowSpecificBpToPx(associatedRowName, end)
+        temp.addRect(`${index}`, s, e, rowHeight, feature)
+      } else {
+        const s = model.globalBpToPx(start - 1)
+        const e = model.globalBpToPx(end)
+        temp.addRect(`${index}`, s, e, rowHeight, feature)
+      }
+    })
+    return temp
+
+    // might convert to autorun based drawing
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowHeight, feats, associatedRowName, model, blanks])
+
+  const ref = useRef<HTMLCanvasElement>(null)
+  const labelRef = useRef<HTMLCanvasElement>(null)
+  const mouseoverRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    if (!ref.current) {
+      return
+    }
+
+    const ctx = ref.current.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    ctx.resetTransform()
+    ctx.scale(highResScaleFactor, highResScaleFactor)
+    ctx.clearRect(0, 0, blockSize, height)
+    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))
+    ctx.fillStyle = 'goldenrod'
+    layout.rectangles.forEach(value => {
+      const { minX, maxX, minY, maxY } = value
+
+      const x1 = (minX - xStart) * colWidth + offsetX - (offsetX % colWidth)
+      const x2 = (maxX - xStart) * colWidth + offsetX - (offsetX % colWidth)
+
+      if (x2 - x1 > 0) {
+        ctx.fillRect(x1, minY, x2 - x1, (maxY - minY) / 2)
+      }
+    })
+  }, [
+    associatedRowName,
+    blockSize,
+    colWidth,
+    layout.rectangles,
+    model,
+    rowHeight,
+    height,
+    offsetX,
+    highResScaleFactor,
+    features,
+    blanks,
+  ])
+
+  useEffect(() => {
+    if (!labelRef.current) {
+      return
+    }
+
+    const ctx = labelRef.current.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    // this logic is very similar to MSACanvas
+    ctx.resetTransform()
+    ctx.scale(highResScaleFactor, highResScaleFactor)
+    ctx.clearRect(0, 0, blockSize, height)
+    ctx.translate(-offsetX, 0)
+    ctx.textAlign = 'center'
+    ctx.font = ctx.font.replace(/\d+px/, `${Math.max(8, rowHeight - 8)}px`)
+
+    ctx.fillStyle = 'black'
+    ctx.textAlign = 'left'
+    layout.rectangles.forEach(value => {
+      const { minX, maxX, maxY, minY } = value
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const feature = value.data as any
+
+      const x1 = minX * colWidth
+      const x2 = maxX * colWidth
+
+      if (x2 - x1 > 0) {
+        const note = feature.attributes?.Note?.[0]
+        const name = feature.attributes?.Name?.[0]
+        const type = feature.type
+        ctx.fillText(
+          [type, name, note].filter(f => !!f).join(' - '),
+          Math.max(Math.min(-scrollX, x2), x1),
+          minY + (maxY - minY),
+        )
+      }
+    })
+  }, [
+    blockSize,
+    colWidth,
+    scrollX,
+    highResScaleFactor,
+    height,
+    layout.rectangles,
+    offsetX,
+    features,
+    model,
+    rowHeight,
+    blanks,
+  ])
+
+  return !features ? null : (
+    <>
+      <canvas
+        ref={ref}
+        height={height * highResScaleFactor}
+        width={blockSize * highResScaleFactor}
+        style={{
+          position: 'absolute',
+          left: scrollX + offsetX,
+          width: blockSize,
+          height,
+        }}
+      />
+      <canvas
+        ref={labelRef}
+        height={height * highResScaleFactor}
+        width={blockSize * highResScaleFactor}
+        style={{
+          position: 'absolute',
+          left: scrollX + offsetX,
+          width: blockSize,
+          height,
+        }}
+      />
+      <canvas
+        ref={mouseoverRef}
+        height={height * highResScaleFactor}
+        width={blockSize * highResScaleFactor}
+        style={{
+          position: 'absolute',
+          left: scrollX + offsetX,
+          width: blockSize,
+          height,
+        }}
+      />
+    </>
+  )
+})
+const AnnotationTrack = observer(function ({
+  model,
+  track,
+}: {
+  model: MsaViewModel
+  track: IBoxTrack
+}) {
+  const { blocksX, msaAreaWidth } = model
+  const {
+    model: { height },
+  } = track
+  return (
+    <div
+      style={{
+        position: 'relative',
+        height,
+        width: msaAreaWidth,
+        overflow: 'hidden',
+      }}
+    >
+      {blocksX.map(bx => (
+        <AnnotationBlock track={track} key={bx} model={model} offsetX={bx} />
+      ))}
+    </div>
+  )
+})
+
+export default AnnotationTrack

package/src/components/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'
+
+export default observer(function ({
+  model,
+  onClose,
+  open,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+  open: boolean
+}) {
+  const { header } = model
+
+  return (
+    <Dialog onClose={() => onClose()} open={open} title="Metadata">
+      <DialogContent>
+        <Attributes attributes={header} />
+      </DialogContent>
+    </Dialog>
+  )
+})

package/src/components/Header.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react'
+import { IconButton, Select, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+// locals
+import { MsaViewModel } from '../model'
+import SettingsDialog from './SettingsDlg'
+import AboutDialog from './AboutDlg'
+import DetailsDialog from './DetailsDlg'
+import TracklistDialog from './TracklistDlg'
+
+// icons
+import FolderOpenIcon from '@mui/icons-material/FolderOpen'
+import SettingsIcon from '@mui/icons-material/Settings'
+import HelpIcon from '@mui/icons-material/Help'
+import AssignmentIcon from '@mui/icons-material/Assignment'
+import ListIcon from '@mui/icons-material/List'
+
+const InfoArea = observer(({ model }: { model: MsaViewModel }) => {
+  const { mouseOverRowName, mouseCol } = model
+  return (
+    <div>
+      <Typography display="inline">Row name: {mouseOverRowName}</Typography>
+      <span style={{ marginLeft: 10 }} />
+      <Typography display="inline">Position: {mouseCol}</Typography>
+    </div>
+  )
+})
+
+const Header = observer(({ model }: { model: MsaViewModel }) => {
+  const [settingsDialogViz, setSettingsDialogViz] = useState(false)
+  const [aboutDialogViz, setAboutDialogViz] = useState(false)
+  const [detailsDialogViz, setDetailsDialogViz] = useState(false)
+  const [tracklistDialogViz, setTracklistDialogViz] = useState(false)
+  const { currentAlignment, alignmentNames } = model
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <IconButton
+        onClick={async () => {
+          try {
+            model.setData({ tree: '', msa: '' })
+            await model.setTreeFilehandle(undefined)
+            await model.setMSAFilehandle(undefined)
+            model.setScrollY(0)
+            model.setScrollX(0)
+            model.setCurrentAlignment(0)
+          } catch (e) {
+            console.error(e)
+            model.setError(e)
+          }
+        }}
+      >
+        <FolderOpenIcon />
+      </IconButton>
+      <IconButton onClick={() => setSettingsDialogViz(true)}>
+        <SettingsIcon />
+      </IconButton>
+      <IconButton onClick={() => setDetailsDialogViz(true)}>
+        <AssignmentIcon />
+      </IconButton>
+      <IconButton onClick={() => setTracklistDialogViz(true)}>
+        <ListIcon />
+      </IconButton>
+      {settingsDialogViz ? (
+        <SettingsDialog
+          open
+          model={model}
+          onClose={() => setSettingsDialogViz(false)}
+        />
+      ) : null}
+      {aboutDialogViz ? (
+        <AboutDialog open onClose={() => setAboutDialogViz(false)} />
+      ) : null}
+      {detailsDialogViz ? (
+        <DetailsDialog
+          open
+          model={model}
+          onClose={() => setDetailsDialogViz(false)}
+        />
+      ) : null}
+
+      {tracklistDialogViz ? (
+        <TracklistDialog
+          open
+          model={model}
+          onClose={() => setTracklistDialogViz(false)}
+        />
+      ) : null}
+      {alignmentNames.length > 0 ? (
+        <Select
+          native
+          value={currentAlignment}
+          size="small"
+          onChange={event => {
+            model.setCurrentAlignment(+(event.target.value as string))
+            model.setScrollX(0)
+            model.setScrollY(0)
+          }}
+        >
+          {alignmentNames.map((option, index) => (
+            <option key={`${option}-${index}`} value={index}>
+              {option}
+            </option>
+          ))}
+        </Select>
+      ) : null}
+      <InfoArea model={model} />
+      <div style={{ flex: 1 }} />
+      <IconButton onClick={() => setAboutDialogViz(true)}>
+        <HelpIcon />
+      </IconButton>
+    </div>
+  )
+})
+
+export default Header

package/src/components/ImportForm.tsx

@@ -0,0 +1,192 @@
+import React, { useState } from 'react'
+import { Button, Container, Grid, Typography, Link } from '@mui/material'
+import { observer } from 'mobx-react'
+import { FileSelector } from '@jbrowse/core/ui'
+import { FileLocation } from '@jbrowse/core/util/types'
+
+// locals
+import { MsaViewModel } from '../model'
+import { smallTree, smallMSA, smallMSAOnly } from './data/seq2'
+
+async function load(
+  model: MsaViewModel,
+  msaFile?: FileLocation,
+  treeFile?: FileLocation,
+) {
+  model.setError(undefined)
+  try {
+    if (msaFile) {
+      await model.setMSAFilehandle(msaFile)
+    }
+    if (treeFile) {
+      await model.setTreeFilehandle(treeFile)
+    }
+  } catch (e) {
+    model.setError(e)
+  }
+}
+
+const ListItem = ({
+  onClick,
+  model,
+  children,
+}: {
+  onClick: () => void
+  model: MsaViewModel
+  children: React.ReactNode
+}) => (
+  <li>
+    <Link
+      onClick={event => {
+        model.setError(undefined)
+        event.preventDefault()
+        onClick()
+      }}
+      href="#"
+    >
+      <Typography display="inline">{children}</Typography>
+    </Link>
+  </li>
+)
+export default observer(({ model }: { model: MsaViewModel }) => {
+  const [msaFile, setMsaFile] = useState<FileLocation>()
+  const [treeFile, setTreeFile] = useState<FileLocation>()
+  const { error } = model
+
+  return (
+    <Container>
+      <div style={{ width: '50%' }}>
+        {error ? (
+          <div style={{ padding: 20 }}>
+            <Typography color="error">Error: {`${error}`}</Typography>
+          </div>
+        ) : null}
+        <Typography>
+          Open an MSA file (stockholm or clustal format) and/or a tree file
+          (newick format).
+        </Typography>
+        <Typography color="error">
+          Note: you can open up just an MSA or just a tree, both are not
+          required. Some MSA files e.g. stockholm format have an embedded tree
+          also and this is fine, and opening a separate tree file is not
+          required.
+        </Typography>
+      </div>
+
+      <Grid container spacing={10} justifyContent="center" alignItems="center">
+        <Grid item>
+          <Typography>MSA file or URL</Typography>
+          <FileSelector location={msaFile} setLocation={setMsaFile} />
+          <Typography>Tree file or URL</Typography>
+          <FileSelector location={treeFile} setLocation={setTreeFile} />
+        </Grid>
+
+        <Grid item>
+          <Button
+            onClick={() => load(model, msaFile, treeFile)}
+            variant="contained"
+            color="primary"
+            disabled={!msaFile && !treeFile}
+          >
+            Open
+          </Button>
+        </Grid>
+
+        <Grid item>
+          <Typography>Examples</Typography>
+          <ul>
+            <ListItem
+              model={model}
+              onClick={() =>
+                load(model, undefined, {
+                  uri: 'https://jbrowse.org/genomes/newick_trees/sarscov2phylo.pub.ft.nh',
+                  locationType: 'UriLocation',
+                })
+              }
+            >
+              230k COVID-19 samples (tree only)
+            </ListItem>
+            <ListItem
+              model={model}
+              onClick={() => {
+                model.setData({ msa: smallMSA, tree: smallTree })
+              }}
+            >
+              Small protein MSA+tree
+            </ListItem>
+            <ListItem
+              model={model}
+              onClick={() => {
+                model.setData({ msa: smallMSAOnly })
+              }}
+            >
+              Small MSA only
+            </ListItem>
+            <ListItem
+              model={model}
+              onClick={() =>
+                load(model, {
+                  uri: 'https://ihh.github.io/abrowse/build/pfam-cov2.stock',
+                  locationType: 'UriLocation',
+                })
+              }
+            >
+              PFAM SARS-CoV2 multi-stockholm
+            </ListItem>
+            <ListItem
+              model={model}
+              onClick={() =>
+                load(model, {
+                  uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/Lysine.stock',
+                  locationType: 'UriLocation',
+                })
+              }
+            >
+              Lysine stockholm file
+            </ListItem>
+            <ListItem
+              model={model}
+              onClick={() =>
+                load(model, {
+                  uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/PF01601_full.txt',
+                  locationType: 'UriLocation',
+                })
+              }
+            >
+              PF01601 stockholm file (SARS-CoV2 spike protein)
+            </ListItem>
+            <ListItem
+              model={model}
+              onClick={() =>
+                load(model, {
+                  uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/europe_covid.fa',
+                  locationType: 'UriLocation',
+                })
+              }
+            >
+              Europe COVID full genomes (LR883044.1 and 199 other sequences)
+            </ListItem>
+            <ListItem
+              model={model}
+              onClick={() =>
+                load(
+                  model,
+                  {
+                    uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.fa',
+                    locationType: 'UriLocation',
+                  },
+                  {
+                    uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.nh',
+                    locationType: 'UriLocation',
+                  },
+                )
+              }
+            >
+              MAFFT+VeryFastTree(17.9k samples)
+            </ListItem>
+          </ul>
+        </Grid>
+      </Grid>
+    </Container>
+  )
+})