jbrowse-plugin-protein3d 0.0.2 → 0.0.4

package/src/LaunchProteinView/components/AlphaFoldDBSearch.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from 'react'
 import { observer } from 'mobx-react'
-import { Button, DialogActions, DialogContent } from '@mui/material'
+import { Button, DialogActions, DialogContent, Typography } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 import {
   AbstractTrackModel,
   Feature,
   getContainingView,
   getSession,
+  isSessionWithAddTracks,
 } from '@jbrowse/core/util'
 import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
 import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
@@ -18,15 +19,17 @@ import {
   getId,
   getTranscriptDisplayName,
   getTranscriptFeatures,
-} from '../util'
+} from './util'
+
+// components
 import TranscriptSelector from './TranscriptSelector'
 import HelpButton from './HelpButton'
+import AlphaFoldDBSearchStatus from './AlphaFoldDBSearchStatus'
 
 // hooks
-import useMyGeneInfo from '../useMyGeneInfo'
-import useAllSequences from '../useProteinSequences'
-import { useCheckAlphaFoldDBExistence } from './useCheckAlphaFoldDBExistence'
-import AlphaFoldDBSearchStatus from './AlphaFoldDBSearchStatus'
+import useMyGeneInfoUniprotIdLookup from './useMyGeneInfoUniprotIdLookup'
+import useRemoteStructureFileSequence from './useRemoteStructureFileSequence'
+import useIsoformProteinSequences from './useIsoformProteinSequences'
 
 const useStyles = makeStyles()(theme => ({
   dialogContent: {
@@ -35,9 +38,7 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-type LGV = LinearGenomeViewModel
-
-const AlphaFoldDBSearch = observer(function AlphaFoldDBSearch({
+const AlphaFoldDBSearch = observer(function ({
   feature,
   model,
   handleClose,
@@ -53,85 +54,297 @@ const AlphaFoldDBSearch = observer(function AlphaFoldDBSearch({
   // finding exon/CDS subfeatures. we want to select from transcript names
   const options = getTranscriptFeatures(feature)
   const [userSelection, setUserSelection] = useState<string>()
-  const view = getContainingView(model) as LGV
+  const view = getContainingView(model) as LinearGenomeViewModel
   const selectedTranscript = options.find(val => getId(val) === userSelection)
-  const { seqs, error: error2 } = useAllSequences({ feature, view })
-  const protein = seqs?.[userSelection ?? '']
-  const { result: foundStructureId, error } = useMyGeneInfo({
-    id: selectedTranscript ? getDisplayName(selectedTranscript) : '',
+  const {
+    isoformSequences,
+    isLoading: isIsoformProteinSequencesLoading,
+    error: isoformProteinSequencesError,
+  } = useIsoformProteinSequences({
+    feature,
+    view,
+  })
+  const userSelectedProteinSequence = isoformSequences?.[userSelection ?? '']
+  const {
+    uniprotId,
+    isLoading: isMyGeneLoading,
+    error: myGeneError,
+  } = useMyGeneInfoUniprotIdLookup({
+    id: selectedTranscript
+      ? getDisplayName(selectedTranscript)
+      : getDisplayName(feature),
   })
 
+  const url = uniprotId
+    ? `https://alphafold.ebi.ac.uk/files/AF-${uniprotId}-F1-model_v4.cif`
+    : undefined
+  const {
+    sequences: structureSequences,
+    isLoading: isRemoteStructureSequenceLoading,
+    error: remoteStructureSequenceError,
+  } = useRemoteStructureFileSequence({ url })
+  const e =
+    myGeneError || isoformProteinSequencesError || remoteStructureSequenceError
+
+  const structureSequence = structureSequences?.[0]
   useEffect(() => {
-    if (userSelection === undefined && seqs !== undefined) {
-      setUserSelection(options.find(f => !!seqs[f.id()])?.id())
+    if (isoformSequences !== undefined) {
+      const ret =
+        options.find(
+          f =>
+            isoformSequences[f.id()]?.seq.replaceAll('*', '') ==
+            structureSequence,
+        ) ?? options.find(f => !!isoformSequences[f.id()])
+      setUserSelection(ret?.id())
     }
-  }, [options, userSelection, seqs])
-  const {
-    success,
-    loading,
-    error: error3,
-  } = useCheckAlphaFoldDBExistence({
-    foundStructureId,
-  })
+  }, [options, structureSequence, isoformSequences])
 
-  const e = error || error2 || error3
-  const url = `https://alphafold.ebi.ac.uk/files/AF-${foundStructureId}-F1-model_v4.cif`
   return (
     <>
       <DialogContent className={classes.dialogContent}>
         {e ? <ErrorMessage error={e} /> : null}
-        <div>
-          Look up AlphaFoldDB structure for given transcript <HelpButton />
-        </div>
-        {seqs ? (
+        <Typography>
+          Automatically find AlphaFoldDB entry for given transcript{' '}
+          <HelpButton />
+        </Typography>
+        {isRemoteStructureSequenceLoading ? (
+          <LoadingEllipses
+            variant="h6"
+            message="Loading sequence from remote structure file"
+          />
+        ) : null}
+        {isMyGeneLoading ? (
+          <LoadingEllipses
+            variant="h6"
+            message="Looking up UniProt ID from mygene.info"
+          />
+        ) : uniprotId ? null : (
+          <div>
+            UniProt ID not found. Search sequence on AlphaFoldDB{' '}
+            <a
+              href={`https://alphafold.ebi.ac.uk/search/sequence/${userSelectedProteinSequence?.seq.replaceAll('*', '')}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              here
+            </a>{' '}
+            <br />
+            After visiting the above link, then paste the structure URL into the
+            Manual tab
+          </div>
+        )}
+        {isIsoformProteinSequencesLoading ? (
+          <LoadingEllipses
+            variant="h6"
+            message="Loading protein sequences from transcript isoforms"
+          />
+        ) : null}
+        {isoformSequences && structureSequence && selectedTranscript ? (
           <>
             <TranscriptSelector
               val={userSelection ?? ''}
               setVal={setUserSelection}
-              options={options}
+              structureSequence={structureSequence}
               feature={feature}
-              seqs={seqs}
+              isoforms={options}
+              isoformSequences={isoformSequences}
+            />
+            <AlphaFoldDBSearchStatus
+              uniprotId={uniprotId}
+              selectedTranscript={selectedTranscript}
+              structureSequence={structureSequence}
+              isoformSequences={isoformSequences}
             />
-            {selectedTranscript ? (
-              <AlphaFoldDBSearchStatus
-                foundStructureId={foundStructureId}
-                selectedTranscript={selectedTranscript}
-                success={success}
-                loading={loading}
-              />
-            ) : null}
           </>
-        ) : (
-          <div style={{ margin: 20 }}>
-            <LoadingEllipses message="Loading protein sequences" variant="h6" />
-          </div>
-        )}
+        ) : null}
       </DialogContent>
       <DialogActions>
         <Button
           variant="contained"
           color="secondary"
-          onClick={() => handleClose()}
+          onClick={() => {
+            handleClose()
+          }}
         >
           Cancel
         </Button>
         <Button
           variant="contained"
           color="primary"
-          disabled={!foundStructureId || !protein || !selectedTranscript}
+          disabled={
+            !uniprotId || !userSelectedProteinSequence || !selectedTranscript
+          }
           onClick={() => {
             session.addView('ProteinView', {
               type: 'ProteinView',
-              url,
-              seq2: protein,
-              feature: selectedTranscript?.toJSON(),
-              connectedViewId: view.id,
-              displayName: `Protein view ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
+              isFloating: true,
+              structures: [
+                {
+                  url,
+                  userProvidedTranscriptSequence:
+                    userSelectedProteinSequence?.seq,
+                  feature: selectedTranscript?.toJSON(),
+                  connectedViewId: view.id,
+                },
+              ],
+              displayName: [
+                'Protein view',
+                uniprotId,
+                getGeneDisplayName(feature),
+                getTranscriptDisplayName(selectedTranscript),
+              ].join(' - '),
             })
             handleClose()
           }}
         >
-          Submit
+          Launch 3-D protein structure view
+        </Button>
+        <Button
+          variant="contained"
+          disabled={
+            !uniprotId || !userSelectedProteinSequence || !selectedTranscript
+          }
+          onClick={() => {
+            if (uniprotId && isSessionWithAddTracks(session)) {
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
+              ;(async () => {
+                try {
+                  session.addTemporaryAssembly?.({
+                    name: uniprotId,
+                    sequence: {
+                      type: 'ReferenceSequenceTrack',
+                      trackId: `${uniprotId}-ReferenceSequenceTrack`,
+                      sequenceType: 'pep',
+                      adapter: {
+                        type: 'UnindexedFastaAdapter',
+                        rewriteRefNames: "jexl:split(refName,'|')[1]",
+                        fastaLocation: {
+                          uri: `https://rest.uniprot.org/uniprotkb/${uniprotId}.fasta`,
+                        },
+                      },
+                    },
+                  })
+                  const url = `https://rest.uniprot.org/uniprotkb/${uniprotId}.gff`
+                  const res = await fetch(url)
+                  if (!res.ok) {
+                    throw new Error(`HTTP ${res.status} fetching ${url}`)
+                  }
+                  const data = await res.text()
+
+                  const types = [
+                    ...new Set(
+                      data
+                        .split('\n')
+                        .filter(f => !f.startsWith('#'))
+                        .map(f => f.trim())
+                        .filter(f => !!f)
+                        .map(f => f.split('\t')[2]),
+                    ),
+                  ]
+                  types.forEach(type => {
+                    const s = `${uniprotId}-${type}`
+                    session.addTrackConf({
+                      type: 'FeatureTrack',
+                      trackId: s,
+                      name: type,
+                      adapter: {
+                        type: 'Gff3Adapter',
+                        gffLocation: {
+                          uri: `https://rest.uniprot.org/uniprotkb/${uniprotId}.gff`,
+                        },
+                      },
+                      assemblyNames: [uniprotId],
+                      displays: [
+                        {
+                          displayId: `${type}-LinearBasicDisplay`,
+                          type: 'LinearBasicDisplay',
+                          jexlFilters: [`get(feature,'type')=='${type}'`],
+                        },
+                      ],
+                    })
+                  })
+                  session.addTrackConf({
+                    type: 'FeatureTrack',
+                    trackId: 'Antigen',
+                    name: 'Antigen',
+                    adapter: {
+                      type: 'Gff3Adapter',
+                      gffLocation: {
+                        uri: `https://www.ebi.ac.uk/proteins/api/antigen/${uniprotId}?format=gff`,
+                      },
+                    },
+                    assemblyNames: [uniprotId],
+                  })
+                  session.addTrackConf({
+                    type: 'FeatureTrack',
+                    trackId: 'Variation',
+                    name: 'Variation',
+                    adapter: {
+                      type: 'UniProtVariationAdapter',
+                      location: {
+                        uri: `https://www.ebi.ac.uk/proteins/api/variation/${uniprotId}.json`,
+                      },
+                    },
+                    assemblyNames: [uniprotId],
+                  })
+                  session.addTrackConf({
+                    type: 'QuantitativeTrack',
+                    trackId: 'AlphaFold confidence',
+                    name: 'AlphaFold confidence',
+                    adapter: {
+                      type: 'AlphaFoldConfidenceAdapter',
+                      location: {
+                        uri: `https://alphafold.ebi.ac.uk/files/AF-${uniprotId}-F1-confidence_v4.json`,
+                      },
+                    },
+                    assemblyNames: [uniprotId],
+                  })
+                  session.addTrackConf({
+                    type: 'MultiQuantitativeTrack',
+                    trackId: 'AlphaMissense scores',
+                    name: 'AlphaMissense scores',
+                    assemblyNames: [uniprotId],
+                    adapter: {
+                      type: 'AlphaMissensePathogenicityAdapter',
+                      location: {
+                        uri: `https://alphafold.ebi.ac.uk/files/AF-${uniprotId}-F1-aa-substitutions.csv`,
+                      },
+                    },
+                    displays: [
+                      {
+                        type: 'MultiLinearWiggleDisplay',
+                        displayId:
+                          'AlphaMissense scores-MultiLinearWiggleDisplay',
+                        defaultRendering: 'multirowdensity',
+                        renderers: {
+                          MultiDensityRenderer: {
+                            type: 'MultiDensityRenderer',
+                            bicolorPivotValue: 0.5,
+                          },
+                        },
+                      },
+                    ],
+                  })
+                  const view = session.addView('LinearGenomeView', {
+                    type: 'LinearGenomeView',
+                    displayName: [
+                      'Protein view',
+                      uniprotId,
+                      getGeneDisplayName(feature),
+                      getTranscriptDisplayName(selectedTranscript),
+                    ].join(' - '),
+                  }) as LinearGenomeViewModel
+                  await view.navToLocString(uniprotId, uniprotId)
+                } catch (e) {
+                  console.error(e)
+                  session.notifyError(`${e}`, e)
+                }
+              })()
+            }
+            handleClose()
+          }}
+        >
+          Launch linear protein annotation view
         </Button>
       </DialogActions>
     </>

package/src/LaunchProteinView/components/AlphaFoldDBSearchStatus.tsx

@@ -1,44 +1,86 @@
-import React from 'react'
-import { Link, Typography } from '@mui/material'
+import React, { useState } from 'react'
+import { Button, Link, Typography } from '@mui/material'
 import { Feature } from '@jbrowse/core/util'
-import { LoadingEllipses } from '@jbrowse/core/ui'
 
 // locals
-import { getDisplayName } from '../util'
+import { getDisplayName } from './util'
+import MSATable from './MSATable'
+
+function NotFound({ uniprotId }: { uniprotId: string }) {
+  return (
+    <Typography>
+      No structure found for this UniProtID in AlphaFoldDB{' '}
+      <Link
+        target="_blank"
+        href={`https://alphafold.ebi.ac.uk/search/text/${uniprotId}`}
+      >
+        (search for results)
+      </Link>
+    </Typography>
+  )
+}
 
 export default function AlphaFoldDBSearchStatus({
-  foundStructureId,
+  uniprotId,
   selectedTranscript,
-  success,
-  loading,
+  structureSequence,
+  isoformSequences,
 }: {
-  foundStructureId?: string
+  uniprotId?: string
   selectedTranscript: Feature
-  success: boolean
-  loading: boolean
+  structureSequence?: string
+  isoformSequences: Record<string, { feature: Feature; seq: string }>
 }) {
-  return !foundStructureId ? (
-    <Typography>
-      Searching {getDisplayName(selectedTranscript)} for UniProt ID
-    </Typography>
-  ) : (
+  const url = uniprotId
+    ? `https://alphafold.ebi.ac.uk/files/AF-${uniprotId}-F1-model_v4.cif`
+    : undefined
+  const url2 = uniprotId
+    ? `https://www.uniprot.org/uniprotkb/${uniprotId}/entry`
+    : undefined
+  const [showAllProteinSequences, setShowAllProteinSequences] = useState(false)
+
+  return uniprotId ? (
     <>
-      <Typography>Found Uniprot ID: {foundStructureId}</Typography>
-      {loading ? (
-        <LoadingEllipses title="Looking up structure in AlphaFoldDB" />
-      ) : success ? (
-        <Typography>Found structure in AlphaFoldDB</Typography>
-      ) : (
-        <Typography>
-          No structure found for this UniProtID in AlphaFoldDB{' '}
-          <Link
-            target="_blank"
-            href={`https://alphafold.ebi.ac.uk/search/text/${foundStructureId}`}
+      <Typography>
+        Found Uniprot ID:{' '}
+        <a href={url2} target="_blank" rel="noreferrer">
+          {uniprotId}
+        </a>
+      </Typography>
+      <Typography>
+        AlphaFoldDB link:{' '}
+        <a href={url} target="_blank" rel="noreferrer">
+          {url}
+        </a>
+      </Typography>
+      {structureSequence ? (
+        <div style={{ margin: 20 }}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              setShowAllProteinSequences(!showAllProteinSequences)
+            }}
           >
-            (search for results)
-          </Link>
-        </Typography>
+            {showAllProteinSequences
+              ? 'Hide all isoform protein sequences'
+              : 'Show all isoform protein sequences'}
+          </Button>
+          {showAllProteinSequences ? (
+            <MSATable
+              structureSequence={structureSequence}
+              structureName={uniprotId}
+              isoformSequences={isoformSequences}
+            />
+          ) : null}
+        </div>
+      ) : (
+        <NotFound uniprotId={uniprotId} />
       )}
     </>
+  ) : (
+    <Typography>
+      Searching {getDisplayName(selectedTranscript)} for UniProt ID
+    </Typography>
   )
 }

package/src/LaunchProteinView/components/HelpButton.tsx

@@ -10,12 +10,20 @@ export default function HelpButton() {
   const [show, setShow] = useState(false)
   return (
     <>
-      <IconButton onClick={() => setShow(true)}>
+      <IconButton
+        onClick={() => {
+          setShow(true)
+        }}
+      >
         <Help />
       </IconButton>
       {show ? (
         <Suspense fallback={null}>
-          <HelpDialog handleClose={() => setShow(false)} />
+          <HelpDialog
+            handleClose={() => {
+              setShow(false)
+            }}
+          />
         </Suspense>
       ) : null}
     </>

package/src/LaunchProteinView/components/HelpDialog.tsx

@@ -18,23 +18,56 @@ export default function HelpDialog({
   handleClose: () => void
 }) {
   return (
-    <Dialog open maxWidth="lg" onClose={handleClose} title="Protein alignment">
+    <Dialog open maxWidth="lg" onClose={handleClose} title="Help">
       <DialogContent>
         <Typography2>
-          This process searches mygene.info for the transcript ID, in order to
-          retrieve the UniProt ID associated with a given transcript ID. Then,
-          it uses that UniProt ID to lookup the structure in AlphaFoldDB because
-          every UniProt ID has been processed by AlphaFold.
+          The procedure for the protein lookup is as follows:
+          <ul>
+            <li>
+              (Automatic lookup) Searches mygene.info for the transcript ID, in
+              order to retrieve the UniProt ID associated with a given
+              transcript ID and then, the UniProt ID is used to lookup the
+              structure in AlphaFoldDB
+            </li>
+            <li>
+              (Manual) Allows you to choose your own structure file from your
+              local machine (e.g. a PDB file predicted by e.g. ColabFold) or
+              supply a specific URL
+            </li>
+            <li>
+              The residues from the structure are downloaded, and then you can
+              choose the transcript isoform from the selected gene that best
+              represents the structure. Asterisks are displayed if there is an
+              exact sequence match
+            </li>
+            <li>
+              The residues from the structure are finally aligned to the to the
+              selected transcript&apos;s protein sequence representation, and
+              this creates a mapping from the reference genome coordinates to
+              positions in the 3-D structure
+            </li>
+            <li>
+              Finally the molstar panel is opened, and this contains many
+              specialized features features, plus additional mouseover and
+              selection features supplied by the plugin to connect mouse click
+              actions and mouse hover with coordinates on the linear genome view
+            </li>
+          </ul>
         </Typography2>
         <Typography2>
           If you run into challenges with this workflow e.g. your transcripts
-          are not being found in mygene.info and you are interested in using
-          this plugin, contact colin.diesh@gmail.com
+          are not being found in mygene.info then you can use the Manual import
+          form, or contact colin.diesh@gmail.com for troubleshooting
         </Typography2>
       </DialogContent>
       <Divider />
       <DialogActions>
-        <Button onClick={() => handleClose()} color="primary">
+        <Button
+          onClick={() => {
+            handleClose()
+          }}
+          color="primary"
+        >
           Close
         </Button>
       </DialogActions>

package/src/LaunchProteinView/components/LaunchProteinViewDialog.tsx

@@ -4,7 +4,6 @@ import { Tab, Tabs } from '@mui/material'
 import { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 
 // locals
-import PreLoadedStructureMapping from './PreLoadedStructureMapping'
 import AlphaFoldDBSearch from './AlphaFoldDBSearch'
 import UserProvidedStructure from './UserProvidedStructure'
 import TabPanel from './TabPanel'
@@ -23,13 +22,19 @@ export default function LaunchProteinViewDialog({
     <Dialog
       maxWidth="xl"
       title="Launch protein view"
-      onClose={() => handleClose()}
+      onClose={() => {
+        handleClose()
+      }}
       open
     >
-      <Tabs value={choice} onChange={(_, val) => setChoice(val)}>
-        <Tab value={0} label="AlphaFoldDB search" />
+      <Tabs
+        value={choice}
+        onChange={(_, val) => {
+          setChoice(val)
+        }}
+      >
+        <Tab value={0} label="Automatic lookup" />
         <Tab value={1} label="Manual" />
-        <Tab value={2} label="Pre-configured" />
       </Tabs>
       <TabPanel value={choice} index={0}>
         <AlphaFoldDBSearch
@@ -45,13 +50,6 @@ export default function LaunchProteinViewDialog({
           handleClose={handleClose}
         />
       </TabPanel>
-      <TabPanel value={choice} index={2}>
-        <PreLoadedStructureMapping
-          feature={feature}
-          model={model}
-          handleClose={handleClose}
-        />
-      </TabPanel>
     </Dialog>
   )
 }