jbrowse-plugin-msaview 2.0.6 → 2.2.0

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}
+    </>
+  )
+}

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

@@ -0,0 +1,75 @@
+import React, { useState } from 'react'
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@mui/material'
+
+import { BASE_BLAST_URL } from './consts'
+import TextField2 from '../../../TextField2'
+
+export default function NCBISettingsDialog({
+  handleClose,
+  baseUrl,
+}: {
+  handleClose: (arg?: string) => void
+  baseUrl: string
+}) {
+  const [tempBaseUrl, setTempBaseUrl] = useState(baseUrl)
+  return (
+    <Dialog
+      open
+      maxWidth="lg"
+      onClose={() => {
+        handleClose()
+      }}
+    >
+      <DialogTitle>BLAST Settings</DialogTitle>
+      <DialogContent>
+        <TextField2
+          autoFocus
+          margin="dense"
+          label="BLAST Base URL"
+          fullWidth
+          variant="outlined"
+          value={tempBaseUrl}
+          style={{ minWidth: '300px' }}
+          onChange={e => {
+            setTempBaseUrl(e.target.value)
+          }}
+        />
+        <Button
+          variant="contained"
+          onClick={() => {
+            setTempBaseUrl(BASE_BLAST_URL)
+          }}
+        >
+          Reset
+        </Button>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={() => {
+            handleClose(tempBaseUrl)
+          }}
+        >
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

package/src/LaunchMsaView/components/{NewNCBIBlastQuery/ncbiBlastLaunchView.ts → NCBIBlastQuery/blastLaunchView.ts}

@@ -3,26 +3,25 @@ import { Feature, getSession } from '@jbrowse/core/util'
 import type { JBrowsePluginMsaViewModel } from '../../../MsaViewPanel/model'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
-export function ncbiBlastLaunchView({
+export function blastLaunchView({
   newViewTitle,
   view,
   feature,
+  blastParams,
 }: {
   newViewTitle: string
   view: LinearGenomeViewModel
   feature: Feature
+  blastParams: Record<string, unknown>
 }) {
   return getSession(view).addView('MsaView', {
     type: 'MsaView',
     displayName: newViewTitle,
     connectedViewId: view.id,
     connectedFeature: feature.toJSON(),
-    treeAreaWidth: 250,
-    treeWidth: 100,
     drawNodeBubbles: true,
-    labelsAlignRight: true,
     colWidth: 10,
     rowHeight: 12,
-    colorSchemeName: 'percent_identity_dynamic',
+    blastParams,
   }) as JBrowsePluginMsaViewModel
 }

package/src/LaunchMsaView/components/NCBIBlastQuery/consts.ts

@@ -0,0 +1 @@
+export const BASE_BLAST_URL = 'https://blast.ncbi.nlm.nih.gov/Blast.cgi'

package/src/LaunchMsaView/components/PreLoadedMSA/PreLoadedMSADataPanel.tsx

@@ -7,28 +7,20 @@ import {
   getContainingView,
   getSession,
 } from '@jbrowse/core/util'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  MenuItem,
-  TextField,
-  Typography,
-} from '@mui/material'
+import { Button, DialogActions, DialogContent, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import { fetchGeneList } from './fetchGeneList'
 import { preCalculatedLaunchView } from './preCalculatedLaunchView'
-import {
-  getGeneDisplayName,
-  getId,
-  getTranscriptDisplayName,
-  getTranscriptFeatures,
-} from '../../util'
+import ExternalLink from '../../../ExternalLink'
+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',
@@ -47,7 +39,7 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
   const session = getSession(model)
   const view = getContainingView(model) as LinearGenomeViewModel
   const { classes } = useStyles()
-  const [error, setError] = useState<unknown>()
+  const [error1, setError] = useState<unknown>()
   const [geneNameList, setGeneNameList] = useState<string[]>()
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -67,47 +59,39 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
       }
     })()
   }, [feature])
-  const set = new Set(geneNameList)
+  const validSet = new Set(geneNameList)
   const options = getTranscriptFeatures(feature)
-  const ret = options.find(val => set.has(getId(val)))
+  const ret = options.find(val => validSet.has(getId(val)))
   const [userSelection, setUserSelection] = useState(getId(options[0]))
+  const selectedTranscript = options.find(val => getId(val) === userSelection)!
+  const { proteinSequence, error: error2 } = useFeatureSequence({
+    view,
+    feature: selectedTranscript,
+  })
+
+  const e = error1 ?? error2
 
   return (
     <>
       <DialogContent className={classes.dialogContent}>
+        {e ? <ErrorMessage error={e} /> : null}
         <Typography>
           The source data for these multiple sequence alignments is from{' '}
-          <a href="https://hgdownload.soe.ucsc.edu/goldenPath/hg38/multiz100way/alignments/">
+          <ExternalLink href="https://hgdownload.soe.ucsc.edu/goldenPath/hg38/multiz100way/alignments/">
             knownCanonical.multiz100way.protAA.fa.gz
-          </a>
+          </ExternalLink>
         </Typography>
-        {error ? <ErrorMessage error={error} /> : null}
         {geneNameList && !ret ? (
-          <div style={{ color: 'red' }}>No MSA data for this gene found</div>
+          <Typography color="error">No MSA data for this gene found</Typography>
         ) : null}
-        <TextField
-          value={userSelection}
-          onChange={event => {
-            setUserSelection(event.target.value)
-          }}
-          label="Choose isoform to view MSA for"
-          select
-        >
-          {options
-            .filter(val => set.has(getId(val)))
-            .map(val => (
-              <MenuItem value={getId(val)} key={val.id()}>
-                {getTranscriptDisplayName(val)} (has data)
-              </MenuItem>
-            ))}
-          {options
-            .filter(val => !set.has(getId(val)))
-            .map(val => (
-              <MenuItem value={getId(val)} key={val.id()} disabled>
-                {getTranscriptDisplayName(val)}
-              </MenuItem>
-            ))}
-        </TextField>
+        <TranscriptSelector
+          feature={feature}
+          options={options}
+          selectedTranscriptId={userSelection}
+          onTranscriptChange={setUserSelection}
+          proteinSequence={proteinSequence}
+          validSet={validSet}
+        />
       </DialogContent>
 
       <DialogActions>

package/src/LaunchMsaView/components/TabPanel.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+// this is from MUI example
+export default function TabPanel({
+  children,
+  value,
+  index,
+  ...other
+}: {
+  children?: React.ReactNode
+  index: number
+  value: number
+}) {
+  return (
+    <div role="tabpanel" hidden={value !== index} {...other}>
+      {value === index && <div>{children}</div>}
+    </div>
+  )
+}

package/src/LaunchMsaView/components/TranscriptSelector.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+
+import { Feature } from '@jbrowse/core/util'
+import { Button, MenuItem } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+import ReadOnlyTextField2 from '../../ReadOnlyTextField2'
+import TextField2 from '../../TextField2'
+import {
+  getGeneDisplayName,
+  getId,
+  getTranscriptDisplayName,
+  getTranscriptLength,
+} from '../util'
+
+const useStyles = makeStyles()({
+  flex: {
+    display: 'flex',
+  },
+  minWidth: {
+    minWidth: 300,
+  },
+})
+
+export default function TranscriptSelector({
+  feature,
+  options,
+  selectedTranscriptId,
+  onTranscriptChange,
+  proteinSequence,
+  validSet,
+}: {
+  feature: Feature
+  options: Feature[]
+  selectedTranscriptId: string
+  onTranscriptChange: (transcriptId: string) => void
+  proteinSequence: string | undefined
+  validSet?: Set<string>
+}) {
+  const { classes } = useStyles()
+  const [showSequence, setShowSequence] = useState(false)
+  const selectedTranscript = options.find(
+    val => getId(val) === selectedTranscriptId,
+  )!
+
+  return (
+    <>
+      <div className={classes.flex}>
+        <TextField2
+          variant="outlined"
+          label={`Choose isoform of ${getGeneDisplayName(feature)}`}
+          select
+          className={classes.minWidth}
+          value={selectedTranscriptId}
+          onChange={event => {
+            onTranscriptChange(event.target.value)
+          }}
+        >
+          {options
+            .toSorted(
+              (a, b) => getTranscriptLength(b).len - getTranscriptLength(a).len,
+            )
+            .map(val => {
+              const inSet = validSet ? validSet.has(getId(val)) : true
+              const { len, mod } = getTranscriptLength(val)
+              return (
+                <MenuItem value={getId(val)} key={val.id()} disabled={!inSet}>
+                  {getTranscriptDisplayName(val)} ({len} aa){' '}
+                  {mod ? ` (possible fragment)` : ''}
+                  {validSet ? (inSet ? ' (has data)' : ' (no data)') : ''}
+                </MenuItem>
+              )
+            })}
+        </TextField2>
+        <div style={{ alignContent: 'center', marginLeft: 20 }}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              setShowSequence(!showSequence)
+            }}
+          >
+            {showSequence ? 'Hide sequence' : 'Show sequence'}
+          </Button>
+        </div>
+      </div>
+
+      {showSequence && (
+        <ReadOnlyTextField2
+          value={
+            proteinSequence
+              ? `>${getTranscriptDisplayName(selectedTranscript)}\n${proteinSequence}`
+              : 'Loading...'
+          }
+        />
+      )}
+    </>
+  )
+}

package/src/LaunchMsaView/components/calculateProteinSequence.ts

@@ -0,0 +1,68 @@
+import {
+  dedupe,
+  defaultCodonTable,
+  generateCodonTable,
+  revcom,
+} from '@jbrowse/core/util'
+
+import type { Feat } from './types'
+import type { Feature } from '@jbrowse/core/util'
+
+export function stitch(subfeats: Feat[], sequence: string) {
+  return subfeats.map(sub => sequence.slice(sub.start, sub.end)).join('')
+}
+
+export function calculateProteinSequence({
+  cds,
+  sequence,
+  codonTable,
+}: {
+  cds: Feat[]
+  sequence: string
+  codonTable: Record<string, string>
+}) {
+  const str = stitch(cds, sequence)
+  let protein = ''
+  for (let i = 0; i < str.length; i += 3) {
+    // use & symbol for undefined codon, or partial slice
+    protein += codonTable[str.slice(i, i + 3)] ?? '&'
+  }
+  return protein
+}
+
+export function revlist(list: Feat[], seqlen: number) {
+  return list
+    .map(sub => ({
+      ...sub,
+      start: seqlen - sub.end,
+      end: seqlen - sub.start,
+    }))
+    .toSorted((a, b) => a.start - b.start)
+}
+
+export function getProteinSequenceFromFeature({
+  selectedTranscript,
+  seq,
+}: {
+  seq: string
+  selectedTranscript: Feature
+}) {
+  const { subfeatures, start, strand } = selectedTranscript.toJSON()
+  const cds = dedupe(
+    subfeatures
+      ?.toSorted((a, b) => a.start - b.start)
+      .map(sub => ({
+        ...sub,
+        start: sub.start - start,
+        end: sub.end - start,
+      }))
+      .filter(subfeature => subfeature.type === 'CDS') ?? [],
+    feat => `${feat.start}-${feat.end}`,
+  )
+
+  return calculateProteinSequence({
+    cds: strand === -1 ? revlist(cds, seq.length) : cds,
+    sequence: strand === -1 ? revcom(seq) : seq,
+    codonTable: generateCodonTable(defaultCodonTable),
+  })
+}

package/src/LaunchMsaView/components/fetchSeq.ts

@@ -0,0 +1,37 @@
+import { getConf } from '@jbrowse/core/configuration'
+
+import type { AbstractSessionModel, Feature } from '@jbrowse/core/util'
+
+export async function fetchSeq({
+  start,
+  end,
+  refName,
+  session,
+  assemblyName,
+}: {
+  start: number
+  end: number
+  refName: string
+  assemblyName: string
+  session: AbstractSessionModel
+}) {
+  const { assemblyManager, rpcManager } = session
+  const assembly = await assemblyManager.waitForAssembly(assemblyName)
+  if (!assembly) {
+    throw new Error('assembly not found')
+  }
+  const sessionId = 'getSequence'
+  const feats = (await rpcManager.call(sessionId, 'CoreGetFeatures', {
+    adapterConfig: getConf(assembly, ['sequence', 'adapter']),
+    sessionId,
+    regions: [
+      {
+        start,
+        end,
+        refName: assembly.getCanonicalRefName(refName),
+        assemblyName,
+      },
+    ],
+  })) as Feature[]
+  return (feats[0]?.get('seq') as string | undefined) ?? ''
+}

package/src/LaunchMsaView/components/types.ts

@@ -0,0 +1,11 @@
+export interface Feat {
+  start: number
+  end: number
+  type?: string
+}
+
+export interface SeqState {
+  seq: string
+  upstream?: string
+  downstream?: string
+}

package/src/LaunchMsaView/components/{NewNCBIBlastQuery/useFeatureSequence.ts → useFeatureSequence.ts}

@@ -1,53 +1,18 @@
 import { useEffect, useState } from 'react'
 
-import { getConf } from '@jbrowse/core/configuration'
-import { AbstractSessionModel, Feature, getSession } from '@jbrowse/core/util'
+import { getSession } from '@jbrowse/core/util'
 
-export interface SeqState {
-  seq: string
-  upstream?: string
-  downstream?: string
-}
+import { getProteinSequenceFromFeature } from './calculateProteinSequence'
+import { fetchSeq } from './fetchSeq'
+
+import type { SeqState } from './types'
+import type { Feature } from '@jbrowse/core/util'
 
 export interface ErrorState {
   error: string
 }
 const BPLIMIT = 500_000
 
-async function fetchSeq({
-  start,
-  end,
-  refName,
-  session,
-  assemblyName,
-}: {
-  start: number
-  end: number
-  refName: string
-  assemblyName: string
-  session: AbstractSessionModel
-}) {
-  const { assemblyManager, rpcManager } = session
-  const assembly = await assemblyManager.waitForAssembly(assemblyName)
-  if (!assembly) {
-    throw new Error('assembly not found')
-  }
-  const sessionId = 'getSequence'
-  const feats = (await rpcManager.call(sessionId, 'CoreGetFeatures', {
-    adapterConfig: getConf(assembly, ['sequence', 'adapter']),
-    sessionId,
-    regions: [
-      {
-        start,
-        end,
-        refName: assembly.getCanonicalRefName(refName),
-        assemblyName,
-      },
-    ],
-  })) as Feature[]
-  return (feats[0]?.get('seq') as string | undefined) ?? ''
-}
-
 export function useFeatureSequence({
   view,
   feature,
@@ -116,5 +81,18 @@ export function useFeatureSequence({
       })()
     }
   }, [feature, view, upDownBp, assemblyName, forceLoad])
-  return { sequence, error }
+
+  const proteinSequence =
+    sequence && !('error' in sequence)
+      ? getProteinSequenceFromFeature({
+          seq: sequence.seq,
+          selectedTranscript: feature,
+        })
+      : ''
+
+  return {
+    proteinSequence,
+    sequence,
+    error,
+  }
 }

package/src/LaunchMsaView/util.ts

@@ -1,4 +1,6 @@
-import { Feature } from '@jbrowse/core/util'
+import { sum } from '@jbrowse/core/util'
+
+import type { Feature } from '@jbrowse/core/util'
 
 export function getTranscriptFeatures(feature: Feature) {
   // check if we are looking at a 'two-level' or 'three-level' feature by
@@ -11,6 +13,21 @@ export function getTranscriptFeatures(feature: Feature) {
         f.get('subfeatures')?.some(f => f.get('type') === 'CDS'),
       )
 }
+
+export function getTranscriptLength(feature: Feature) {
+  const cdsLen = sum(
+    feature
+      .get('subfeatures')
+      ?.filter(
+        f => (f.get('type') as string | undefined)?.toLowerCase() === 'cds',
+      )
+      .map(s => s.get('end') - s.get('start')) ?? [],
+  )
+  return {
+    len: Math.floor(cdsLen / 3),
+    mod: cdsLen % 3,
+  }
+}
 export function getId(val?: Feature): string {
   return val?.get('name') ?? val?.get('id') ?? ''
 }
@@ -24,7 +41,10 @@ export function getTranscriptDisplayName(val?: Feature) {
 export function getGeneDisplayName(val?: Feature) {
   return val === undefined
     ? ''
-    : [val.get('gene_name') ?? val.get('name'), val.get('id')]
+    : [
+        val.get('gene_name') ?? val.get('name'),
+        val.get('id') ? `(${val.get('id')})` : '',
+      ]
         .filter(f => !!f)
         .join(' ')
 }