jbrowse-plugin-msaview 2.1.0 → 2.2.1

package/src/LaunchMsaView/components/ManualMSALoader/ManualMSALoader.tsx

@@ -0,0 +1,219 @@
+import React, { useState } from 'react'
+
+import { ErrorMessage, FileSelector } from '@jbrowse/core/ui'
+import {
+  AbstractTrackModel,
+  Feature,
+  FileLocation,
+  getContainingView,
+  getSession,
+} from '@jbrowse/core/util'
+import { openLocation } from '@jbrowse/core/util/io'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import { launchView } from './launchView'
+import TextField2 from '../../../TextField2'
+import { getGeneDisplayName, getId, getTranscriptFeatures } from '../../util'
+import TranscriptSelector from '../TranscriptSelector'
+import { useFeatureSequence } from '../useFeatureSequence'
+
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+const useStyles = makeStyles()({
+  dialogContent: {
+    width: '80em',
+  },
+  textAreaFont: {
+    fontFamily: 'Courier New',
+  },
+})
+
+const ManualMSALoader = observer(function PreLoadedMSA2({
+  model,
+  feature,
+  handleClose,
+}: {
+  model: AbstractTrackModel
+  feature: Feature
+  handleClose: () => void
+}) {
+  const session = getSession(model)
+  const view = getContainingView(model) as LinearGenomeViewModel
+  const { classes } = useStyles()
+  const [launchViewError, setLaunchViewError] = useState<unknown>()
+  const [inputMethod, setInputMethod] = useState<'file' | 'text'>('file')
+  const [msaText, setMsaText] = useState('')
+  const [treeText, setTreeText] = useState('')
+  const [msaFileLocation, setMsaFileLocation] = useState<FileLocation>()
+  const [treeFileLocation, setTreeFileLocation] = useState<FileLocation>()
+  const options = getTranscriptFeatures(feature)
+  const [userSelection, setUserSelection] = useState(getId(options[0]))
+  const ret = options.find(val => userSelection === getId(val))
+  const selectedTranscript = options.find(val => getId(val) === userSelection)!
+  const { proteinSequence, error: error2 } = useFeatureSequence({
+    view,
+    feature: selectedTranscript,
+  })
+
+  const e = launchViewError ?? error2
+  return (
+    <>
+      <DialogContent className={classes.dialogContent}>
+        {e ? <ErrorMessage error={e} /> : null}
+        <FormControl component="fieldset">
+          <RadioGroup
+            row
+            value={inputMethod}
+            onChange={event => {
+              setInputMethod(event.target.value as 'file' | 'text')
+            }}
+          >
+            <FormControlLabel
+              value="file"
+              control={<Radio />}
+              label="Open files"
+            />
+            <FormControlLabel
+              value="text"
+              control={<Radio />}
+              label="Paste text"
+            />
+          </RadioGroup>
+        </FormControl>
+
+        <div style={{ marginBottom: 30 }}>
+          {inputMethod === 'file' ? (
+            <div style={{ maxWidth: 500 }}>
+              <FileSelector
+                name="MSA File .aln (Clustal), .fa/.mfa (aligned FASTA), .stock (Stockholm), etc)"
+                inline
+                location={msaFileLocation}
+                setLocation={setMsaFileLocation}
+              />
+              <FileSelector
+                name="Tree file .nh (Newick) or .asn (NCBI COBALT ASN.1)"
+                inline
+                location={treeFileLocation}
+                setLocation={setTreeFileLocation}
+              />
+            </div>
+          ) : (
+            <>
+              <TextField2
+                variant="outlined"
+                name="MSA"
+                multiline
+                minRows={5}
+                style={{ marginBottom: '20px' }}
+                maxRows={10}
+                fullWidth
+                placeholder="Paste MSA here"
+                value={msaText}
+                onChange={event => {
+                  setMsaText(event.target.value)
+                }}
+              />
+              <TextField2
+                variant="outlined"
+                name="Tree"
+                multiline
+                minRows={5}
+                maxRows={10}
+                fullWidth
+                placeholder="Paste newick tree (optional)"
+                value={treeText}
+                onChange={event => {
+                  setTreeText(event.target.value)
+                }}
+              />
+            </>
+          )}
+        </div>
+
+        <TranscriptSelector
+          feature={feature}
+          options={options}
+          selectedTranscriptId={userSelection}
+          onTranscriptChange={setUserSelection}
+          proteinSequence={proteinSequence}
+        />
+      </DialogContent>
+
+      <DialogActions>
+        <Button
+          color="primary"
+          variant="contained"
+          disabled={
+            !ret ||
+            (inputMethod === 'file' && !msaFileLocation) ||
+            (inputMethod === 'text' && !msaText.trim())
+          }
+          onClick={() => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;(async () => {
+              try {
+                if (!ret) {
+                  return
+                }
+
+                setLaunchViewError(undefined)
+                launchView({
+                  session,
+                  newViewTitle: getGeneDisplayName(ret),
+                  view,
+                  feature: ret,
+                  data:
+                    inputMethod === 'file'
+                      ? {
+                          msa: msaFileLocation
+                            ? await openLocation(msaFileLocation).readFile(
+                                'utf8',
+                              )
+                            : '',
+                          tree: treeFileLocation
+                            ? await openLocation(treeFileLocation).readFile(
+                                'utf8',
+                              )
+                            : undefined,
+                        }
+                      : {
+                          msa: msaText,
+                          tree: treeText,
+                        },
+                })
+
+                handleClose()
+              } catch (e) {
+                console.error(e)
+                setLaunchViewError(e)
+              }
+            })()
+          }}
+        >
+          Submit
+        </Button>
+        <Button
+          color="secondary"
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </>
+  )
+})
+
+export default ManualMSALoader

package/src/LaunchMsaView/components/ManualMSALoader/launchView.ts

@@ -0,0 +1,34 @@
+import { AbstractSessionModel, Feature, FileLocation } from '@jbrowse/core/util'
+
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+export function launchView({
+  session,
+  newViewTitle,
+  view,
+  feature,
+  msaFileLocation,
+  treeFileLocation,
+  data,
+}: {
+  session: AbstractSessionModel
+  newViewTitle: string
+  view: LinearGenomeViewModel
+  feature: Feature
+  msaFileLocation?: FileLocation
+  treeFileLocation?: FileLocation
+  data?: {
+    msa: string
+    tree?: string
+  }
+}) {
+  session.addView('MsaView', {
+    type: 'MsaView',
+    displayName: newViewTitle,
+    connectedViewId: view.id,
+    connectedFeature: feature.toJSON(),
+    msaFileLocation,
+    treeFileLocation,
+    data,
+  })
+}

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastAutomaticPanel.tsx

@@ -0,0 +1,226 @@
+import React, { useEffect, useState } from 'react'
+
+import { ErrorMessage } from '@jbrowse/core/ui'
+import {
+  AbstractTrackModel,
+  Feature,
+  getContainingView,
+} from '@jbrowse/core/util'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  MenuItem,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import { blastLaunchView } from './blastLaunchView'
+import TextField2 from '../../../TextField2'
+import {
+  getGeneDisplayName,
+  getId,
+  getTranscriptDisplayName,
+  getTranscriptFeatures,
+} from '../../util'
+import TranscriptSelector from '../TranscriptSelector'
+import { useFeatureSequence } from '../useFeatureSequence'
+
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+const useStyles = makeStyles()({
+  dialogContent: {
+    width: '80em',
+  },
+  textAreaFont: {
+    fontFamily: 'Courier New',
+  },
+})
+
+const blastDatabaseOptions = ['nr', 'nr_cluster_seq'] as const
+const msaAlgorithms = ['clustalo', 'muscle', 'kalign', 'mafft'] as const
+const blastPrograms = ['blastp', 'quick-blastp'] as const
+
+type blastDatabaseOptionsT = (typeof blastDatabaseOptions)[number]
+type msaAlgorithmsT = (typeof msaAlgorithms)[number]
+type blastProgramsT = (typeof blastPrograms)[number]
+
+const NCBIBlastAutomaticPanel = observer(function ({
+  handleClose,
+  feature,
+  model,
+  children,
+  baseUrl,
+}: {
+  model: AbstractTrackModel
+  feature: Feature
+  baseUrl: string
+  handleClose: () => void
+  children: React.ReactNode
+}) {
+  const { classes } = useStyles()
+  const view = getContainingView(model) as LinearGenomeViewModel
+  const [launchViewError, setLaunchViewError] = useState<unknown>()
+  const [selectedBlastDatabase, setSelectedBlastDatabase] =
+    useState<blastDatabaseOptionsT>('nr')
+  const [selectedMsaAlgorithm, setSelectedMsaAlgorithm] =
+    useState<msaAlgorithmsT>('clustalo')
+  const options = getTranscriptFeatures(feature)
+  const [selectedTranscriptId, setSelectedTranscriptId] = useState(
+    getId(options[0]),
+  )
+  const [selectedBlastProgram, setSelectedBlastProgram] =
+    useState<blastProgramsT>('blastp')
+  const selectedTranscript = options.find(
+    val => getId(val) === selectedTranscriptId,
+  )!
+  const { error, proteinSequence } = useFeatureSequence({
+    view,
+    feature: selectedTranscript,
+  })
+
+  useEffect(() => {
+    if (selectedBlastDatabase === 'nr_cluster_seq') {
+      setSelectedBlastProgram('blastp')
+    }
+  }, [selectedBlastDatabase])
+  const e = error ?? launchViewError
+  return (
+    <>
+      <DialogContent className={classes.dialogContent}>
+        {children}
+        {e ? <ErrorMessage error={e} /> : null}
+        <TextField2
+          variant="outlined"
+          label="BLAST database"
+          style={{ width: 150 }}
+          select
+          value={selectedBlastDatabase}
+          onChange={event => {
+            setSelectedBlastDatabase(
+              event.target.value as (typeof blastDatabaseOptions)[number],
+            )
+          }}
+        >
+          {blastDatabaseOptions.map(val => (
+            <MenuItem value={val} key={val}>
+              {val}
+            </MenuItem>
+          ))}
+        </TextField2>
+
+        <TextField2
+          variant="outlined"
+          label="MSA Algorithm"
+          style={{ width: 150 }}
+          select
+          value={selectedMsaAlgorithm}
+          onChange={event => {
+            setSelectedMsaAlgorithm(
+              event.target.value as (typeof msaAlgorithms)[number],
+            )
+          }}
+        >
+          {msaAlgorithms.map(val => (
+            <MenuItem value={val} key={val}>
+              {val}
+            </MenuItem>
+          ))}
+        </TextField2>
+
+        <div style={{ display: 'flex' }}>
+          <TextField2
+            variant="outlined"
+            label="BLAST program"
+            disabled={selectedBlastDatabase === 'nr_cluster_seq'}
+            style={{ width: 150 }}
+            select
+            value={selectedBlastProgram}
+            onChange={event => {
+              setSelectedBlastProgram(
+                event.target.value as (typeof blastPrograms)[number],
+              )
+            }}
+          >
+            {blastPrograms.map(val => (
+              <MenuItem value={val} key={val}>
+                {val}
+              </MenuItem>
+            ))}
+          </TextField2>
+          {selectedBlastDatabase === 'nr_cluster_seq' ? (
+            <Typography
+              variant="subtitle2"
+              style={{ marginLeft: 4, alignContent: 'center' }}
+            >
+              Can only use blastp on nr_cluster_seq
+            </Typography>
+          ) : null}
+        </div>
+
+        <TranscriptSelector
+          feature={feature}
+          options={options}
+          selectedTranscriptId={selectedTranscriptId}
+          onTranscriptChange={setSelectedTranscriptId}
+          proteinSequence={proteinSequence}
+        />
+
+        <Typography style={{ marginTop: 20 }}>
+          This panel will automatically submit a query to NCBI. Using blastp can
+          take 10+ minutes to run, quick-blastp is generally a lot faster but is
+          not available for the clustered database. After completion, all the
+          hits will be run through a multiple sequence alignment. Note: we are
+          not able to currently run NCBI COBALT automatically on the BLAST
+          results, even though that is the method NCBI uses on their website. If
+          you need a COBALT alignment, please use the manual approach of
+          submitting BLAST yourself and downloading the resulting files
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={() => {
+            try {
+              setLaunchViewError(undefined)
+              blastLaunchView({
+                feature: selectedTranscript,
+                view,
+                newViewTitle: `BLAST - ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
+                blastParams: {
+                  baseUrl,
+                  blastProgram: selectedBlastProgram,
+                  blastDatabase: selectedBlastDatabase,
+                  msaAlgorithm: selectedMsaAlgorithm,
+                  selectedTranscript,
+                  proteinSequence,
+                },
+              })
+            } catch (e) {
+              console.error(e)
+              setLaunchViewError(e)
+            }
+
+            handleClose()
+          }}
+          disabled={!proteinSequence}
+        >
+          Submit
+        </Button>
+        <Button
+          color="secondary"
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </>
+  )
+})
+
+export default NCBIBlastAutomaticPanel

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastManualPanel.tsx

@@ -0,0 +1,111 @@
+import React, { useState } from 'react'
+
+import { ErrorMessage } from '@jbrowse/core/ui'
+import { getContainingView, shorten2 } from '@jbrowse/core/util'
+import { Button, DialogActions, DialogContent, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import ExternalLink from '../../../ExternalLink'
+import { getId, getTranscriptFeatures } from '../../util'
+import TranscriptSelector from '../TranscriptSelector'
+import { useFeatureSequence } from '../useFeatureSequence'
+
+import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+const useStyles = makeStyles()({
+  dialogContent: {
+    width: '80em',
+  },
+  textAreaFont: {
+    fontFamily: 'Courier New',
+  },
+  ncbiLink: {
+    wordBreak: 'break-all',
+    margin: 30,
+    maxWidth: 600,
+  },
+})
+
+const NCBIBlastManualPanel = observer(function ({
+  handleClose,
+  feature,
+  model,
+  children,
+  baseUrl,
+}: {
+  children: React.ReactNode
+  model: AbstractTrackModel
+  feature: Feature
+  baseUrl: string
+  handleClose: () => void
+}) {
+  const { classes } = useStyles()
+  const view = getContainingView(model) as LinearGenomeViewModel
+  const options = getTranscriptFeatures(feature)
+  const [userSelection, setUserSelection] = useState(getId(options[0]))
+  const selectedTranscript = options.find(val => getId(val) === userSelection)!
+  const { proteinSequence, error } = useFeatureSequence({
+    view,
+    feature: selectedTranscript,
+  })
+
+  const s2 = proteinSequence.replaceAll('*', '').replaceAll('&', '')
+  const link = `${baseUrl}?PAGE_TYPE=BlastSearch&PAGE=Proteins&PROGRAM=blastp&QUERY=${s2}`
+  const link2 = `${baseUrl}?PAGE_TYPE=BlastSearch&PAGE=Proteins&PROGRAM=blastp&QUERY=${shorten2(s2, 10)}`
+
+  return (
+    <>
+      <DialogContent className={classes.dialogContent}>
+        {children}
+        {error ? <ErrorMessage error={error} /> : null}
+
+        <TranscriptSelector
+          feature={feature}
+          options={options}
+          selectedTranscriptId={userSelection}
+          onTranscriptChange={setUserSelection}
+          proteinSequence={proteinSequence}
+        />
+
+        {proteinSequence ? (
+          <div className={classes.ncbiLink}>
+            Link to NCBI BLAST: <ExternalLink href={link}>{link2}</ExternalLink>
+          </div>
+        ) : null}
+
+        <Typography style={{ marginTop: 20 }}>
+          Click the link above and run your BLAST query, and once you have
+          results, click "Multiple Alignment" at the top of the results page to
+          be redirected to COBALT, NCBI's multiple sequence aligner. Once COBALT
+          completes, you can download an MSA (.aln file) and optionally a Newick
+          tree (.nh) and paste the results into JBrowse
+        </Typography>
+      </DialogContent>
+
+      <DialogActions>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Submit
+        </Button>
+        <Button
+          color="secondary"
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Close
+        </Button>
+      </DialogActions>
+    </>
+  )
+})
+
+export default NCBIBlastManualPanel

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastMethodSelector.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material'
+
+export default function NCBIBlastMethodSelector({
+  lookupMethod,
+  setLookupMethod,
+}: {
+  lookupMethod: string
+  setLookupMethod: (method: string) => void
+}) {
+  return (
+    <FormControl component="fieldset">
+      <RadioGroup
+        row
+        value={lookupMethod}
+        onChange={event => {
+          setLookupMethod(event.target.value)
+        }}
+      >
+        <FormControlLabel
+          value="automatic"
+          control={<Radio />}
+          label="Run NCBI BLAST and load results automatically"
+        />
+        <FormControlLabel
+          value="manual"
+          control={<Radio />}
+          label="Link to NCBI BLAST and import results manually"
+        />
+      </RadioGroup>
+    </FormControl>
+  )
+}

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastPanel.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+
+import { useLocalStorage } from '@jbrowse/core/util'
+import SettingsIcon from '@mui/icons-material/Settings'
+import { IconButton } from '@mui/material'
+
+import NCBIBlastAutomaticPanel from './NCBIBlastAutomaticPanel'
+import NCBIBlastManualPanel from './NCBIBlastManualPanel'
+import NCBIBlastMethodSelector from './NCBIBlastMethodSelector'
+import NCBISettingsDialog from './NCBISettingsDialog'
+import { BASE_BLAST_URL } from './consts'
+
+import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
+
+export default function NCBIBlastPanel({
+  handleClose,
+  model,
+  feature,
+}: {
+  handleClose: () => void
+  model: AbstractTrackModel
+  feature: Feature
+}) {
+  const [lookupMethod, setLookupMethod] = useState('automatic')
+  const [baseUrl, setBaseUrl] = useLocalStorage(
+    'msa-blastRootUrl',
+    BASE_BLAST_URL,
+  )
+  const [settingsOpen, setSettingsOpen] = useState(false)
+
+  return (
+    <>
+      <IconButton
+        style={{ float: 'right' }}
+        size="small"
+        onClick={() => {
+          setSettingsOpen(true)
+        }}
+      >
+        <SettingsIcon />
+      </IconButton>
+
+      {lookupMethod === 'automatic' ? (
+        <NCBIBlastAutomaticPanel
+          model={model}
+          feature={feature}
+          handleClose={handleClose}
+          baseUrl={baseUrl}
+        >
+          <NCBIBlastMethodSelector
+            lookupMethod={lookupMethod}
+            setLookupMethod={setLookupMethod}
+          />
+        </NCBIBlastAutomaticPanel>
+      ) : null}
+      {lookupMethod === 'manual' ? (
+        <NCBIBlastManualPanel
+          model={model}
+          feature={feature}
+          handleClose={handleClose}
+          baseUrl={baseUrl}
+        >
+          <NCBIBlastMethodSelector
+            lookupMethod={lookupMethod}
+            setLookupMethod={setLookupMethod}
+          />
+        </NCBIBlastManualPanel>
+      ) : null}
+      {settingsOpen ? (
+        <NCBISettingsDialog
+          baseUrl={baseUrl}
+          handleClose={arg => {
+            if (arg) {
+              setBaseUrl(arg)
+            }
+            setSettingsOpen(false)
+          }}
+        />
+      ) : null}
+    </>
+  )
+}