jbrowse-plugin-protein3d 0.0.3 → 0.0.5

package/src/LaunchProteinView/components/ManualUniProtIDEntry.tsx

@@ -0,0 +1,332 @@
+import React, { useEffect, useState } from 'react'
+import { observer } from 'mobx-react'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  TextField,
+  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'
+
+// locals
+import {
+  getId,
+  getGeneDisplayName,
+  getTranscriptDisplayName,
+  getTranscriptFeatures,
+} from './util'
+
+// components
+import TranscriptSelector from './TranscriptSelector'
+import AlphaFoldDBSearchStatus from './AlphaFoldDBSearchStatus'
+
+// hooks
+import useRemoteStructureFileSequence from './useRemoteStructureFileSequence'
+import useIsoformProteinSequences from './useIsoformProteinSequences'
+
+const useStyles = makeStyles()(theme => ({
+  dialogContent: {
+    marginTop: theme.spacing(6),
+    width: '80em',
+  },
+}))
+
+const ManualUniProtIDEntry = observer(function ({
+  feature,
+  model,
+  handleClose,
+}: {
+  feature: Feature
+  model: AbstractTrackModel
+  handleClose: () => void
+}) {
+  const { classes } = useStyles()
+  const session = getSession(model)
+
+  // check if we are looking at a 'two-level' or 'three-level' feature by
+  // 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 LinearGenomeViewModel
+  const selectedTranscript = options.find(val => getId(val) === userSelection)
+  const {
+    isoformSequences,
+    isLoading: isIsoformProteinSequencesLoading,
+    error: isoformProteinSequencesError,
+  } = useIsoformProteinSequences({
+    feature,
+    view,
+  })
+  const userSelectedProteinSequence = isoformSequences?.[userSelection ?? '']
+  const [uniprotId, setUniprotId] = useState('')
+  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 = isoformProteinSequencesError || remoteStructureSequenceError
+
+  const structureSequence = structureSequences?.[0]
+  useEffect(() => {
+    if (isoformSequences !== undefined) {
+      const ret =
+        options.find(
+          f =>
+            isoformSequences[f.id()]?.seq.replaceAll('*', '') ==
+            structureSequence,
+        ) ?? options.find(f => !!isoformSequences[f.id()])
+      setUserSelection(ret?.id())
+    }
+  }, [options, structureSequence, isoformSequences])
+
+  return (
+    <>
+      <DialogContent className={classes.dialogContent}>
+        {e ? <ErrorMessage error={e} /> : null}
+        <Typography>Manually enter a UniProt ID</Typography>
+        {isRemoteStructureSequenceLoading ? (
+          <LoadingEllipses
+            variant="h6"
+            message="Loading sequence from remote structure file"
+          />
+        ) : null}
+
+        <TextField
+          label="UniProt ID"
+          value={uniprotId}
+          onChange={event => {
+            setUniprotId(event.target.value)
+          }}
+        />
+        {isIsoformProteinSequencesLoading ? (
+          <LoadingEllipses
+            variant="h6"
+            message="Loading protein sequences from transcript isoforms"
+          />
+        ) : null}
+        {isoformSequences && structureSequence && selectedTranscript ? (
+          <>
+            <TranscriptSelector
+              val={userSelection ?? ''}
+              setVal={setUserSelection}
+              structureSequence={structureSequence}
+              feature={feature}
+              isoforms={options}
+              isoformSequences={isoformSequences}
+            />
+            <AlphaFoldDBSearchStatus
+              uniprotId={uniprotId}
+              selectedTranscript={selectedTranscript}
+              structureSequence={structureSequence}
+              isoformSequences={isoformSequences}
+            />
+          </>
+        ) : null}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          disabled={
+            !uniprotId || !userSelectedProteinSequence || !selectedTranscript
+          }
+          onClick={() => {
+            session.addView('ProteinView', {
+              type: 'ProteinView',
+              isFloating: true,
+              structures: [
+                {
+                  url,
+                  userProvidedTranscriptSequence:
+                    userSelectedProteinSequence?.seq,
+                  feature: selectedTranscript?.toJSON(),
+                  connectedViewId: view.id,
+                },
+              ],
+              displayName: [
+                'Protein view',
+                uniprotId,
+                getGeneDisplayName(feature),
+                getTranscriptDisplayName(selectedTranscript),
+              ].join(' - '),
+            })
+            handleClose()
+          }}
+        >
+          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>
+    </>
+  )
+})
+
+export default ManualUniProtIDEntry

package/src/LaunchProteinView/components/TranscriptSelector.tsx

@@ -31,7 +31,9 @@ export default function TranscriptSelector({
   return (
     <TextField2
       value={val}
-      onChange={event => setVal(event.target.value)}
+      onChange={event => {
+        setVal(event.target.value)
+      }}
       label="Choose transcript isoform"
       select
     >
@@ -39,13 +41,13 @@ export default function TranscriptSelector({
         .filter(f => !!isoformSequences[f.id()])
         .filter(
           f =>
-            isoformSequences[f.id()].seq.replaceAll('*', '') ===
+            isoformSequences[f.id()]!.seq.replaceAll('*', '') ===
             structureSequence,
         )
         .map(f => (
           <MenuItem value={f.id()} key={f.id()}>
             {getGeneDisplayName(feature)} - {getTranscriptDisplayName(f)} (
-            {isoformSequences[f.id()].seq.length}aa) (matches structure
+            {isoformSequences[f.id()]!.seq.length}aa) (matches structure
             residues)
           </MenuItem>
         ))}
@@ -53,18 +55,18 @@ export default function TranscriptSelector({
         .filter(f => !!isoformSequences[f.id()])
         .filter(
           f =>
-            isoformSequences[f.id()].seq.replaceAll('*', '') !==
+            isoformSequences[f.id()]!.seq.replaceAll('*', '') !==
             structureSequence,
         )
         .sort(
           (a, b) =>
-            isoformSequences[b.id()].seq.length -
-            isoformSequences[a.id()].seq.length,
+            isoformSequences[b.id()]!.seq.length -
+            isoformSequences[a.id()]!.seq.length,
         )
         .map(f => (
           <MenuItem value={f.id()} key={f.id()}>
             {getGeneDisplayName(feature)} - {getTranscriptDisplayName(f)} (
-            {isoformSequences[f.id()].seq.length}aa)
+            {isoformSequences[f.id()]!.seq.length}aa)
           </MenuItem>
         ))}
       {isoforms

package/src/LaunchProteinView/components/UserProvidedStructure.tsx

@@ -96,16 +96,15 @@ const UserProvidedStructure = observer(function ({
     view,
   })
   const protein = isoformSequences?.[userSelection ?? '']
-  const { seq: structureSequence1, error: error3 } =
+  const { sequences: structureSequences1, error: error3 } =
     useLocalStructureFileSequence({ file })
 
-  const { seq: structureSequence2, error: error4 } =
+  const { sequences: structureSequences2, error: error4 } =
     useRemoteStructureFileSequence({ url: structureURL })
   const structureName =
-    file?.name ??
-    structureURL.slice(structureURL.lastIndexOf('/') + 1) ??
-    'structureSequence'
-  const structureSequence = structureSequence1 ?? structureSequence2
+    file?.name ?? structureURL.slice(structureURL.lastIndexOf('/') + 1)
+  const structureSequences = structureSequences1 ?? structureSequences2
+  const structureSequence = structureSequences?.[0]
 
   useEffect(() => {
     if (isoformSequences !== undefined) {
@@ -134,7 +133,9 @@ const UserProvidedStructure = observer(function ({
           <FormControl component="fieldset">
             <RadioGroup
               value={choice}
-              onChange={event => setChoice(event.target.value)}
+              onChange={event => {
+                setChoice(event.target.value)
+              }}
             >
               <FormControlLabel value="url" control={<Radio />} label="URL" />
               <FormControlLabel value="file" control={<Radio />} label="File" />
@@ -153,7 +154,9 @@ const UserProvidedStructure = observer(function ({
               <TextField
                 label="URL"
                 value={structureURL}
-                onChange={event => setStructureURL(event.target.value)}
+                onChange={event => {
+                  setStructureURL(event.target.value)
+                }}
               />
             </div>
           ) : null}
@@ -168,7 +171,7 @@ const UserProvidedStructure = observer(function ({
                   type="file"
                   hidden
                   onChange={({ target }) => {
-                    const file = target?.files?.[0]
+                    const file = target.files?.[0]
                     if (file) {
                       setFile(file)
                     }
@@ -205,9 +208,9 @@ const UserProvidedStructure = observer(function ({
                   <Button
                     variant="contained"
                     color="primary"
-                    onClick={() =>
+                    onClick={() => {
                       setShowAllProteinSequences(!showAllProteinSequences)
-                    }
+                    }}
                   >
                     {showAllProteinSequences
                       ? 'Hide all isoform protein sequences'
@@ -233,7 +236,9 @@ const UserProvidedStructure = observer(function ({
         <Button
           variant="contained"
           color="secondary"
-          onClick={() => handleClose()}
+          onClick={() => {
+            handleClose()
+          }}
         >
           Cancel
         </Button>
@@ -262,7 +267,7 @@ const UserProvidedStructure = observer(function ({
             })()
           }}
         >
-          Submit
+          Launch 3-D protein structure view
         </Button>
       </DialogActions>
     </>

package/src/LaunchProteinView/components/calculateProteinSequence.ts

@@ -30,7 +30,7 @@ export function calculateProteinSequence({
   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)] || '&'
+    protein += codonTable[str.slice(i, i + 3)] ?? '&'
   }
   return protein
 }
@@ -53,7 +53,7 @@ function getItemId(feat: Feat) {
 // filters if successive elements share same start/end
 export function dedupe(list: Feat[]) {
   return list.filter(
-    (item, pos, ary) => !pos || getItemId(item) !== getItemId(ary[pos - 1]),
+    (item, pos, ary) => !pos || getItemId(item) !== getItemId(ary[pos - 1]!),
   )
 }
 
@@ -102,8 +102,10 @@ export async function fetchProteinSeq({
   const refName = feature.get('refName')
   const session = getSession(view)
   const { assemblyManager, rpcManager } = session
-  const [assemblyName] = view?.assemblyNames ?? []
-  const assembly = await assemblyManager.waitForAssembly(assemblyName)
+  const assemblyName = view?.assemblyNames?.[0]
+  const assembly = assemblyName
+    ? await assemblyManager.waitForAssembly(assemblyName)
+    : undefined
   if (!assembly) {
     throw new Error('assembly not found')
   }

package/src/LaunchProteinView/components/useLocalStructureFileSequence.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { createPluginUI } from 'molstar/lib/mol-plugin-ui'
 import { renderReact18 } from 'molstar/lib/mol-plugin-ui/react18'
-import { loadStructureFromData } from '../../ProteinView/loadStructureFromData'
+import { addStructureFromData } from '../../ProteinView/addStructureFromData'
 
 async function structureFileSequenceFetcher(
   file: File,
@@ -12,11 +12,26 @@ async function structureFileSequenceFetcher(
     target: ret,
     render: renderReact18,
   })
-  const data = await file.text()
-  const { seq } = await loadStructureFromData({ data, plugin: p, format })
-  p.unmount()
-  ret.remove()
-  return seq
+
+  try {
+    const { model } = await addStructureFromData({
+      data: await file.text(),
+      plugin: p,
+      format,
+    })
+    return model.obj?.data.sequence.sequences.map(s => {
+      let seq = ''
+      const arr = s.sequence.label.toArray()
+      // eslint-disable-next-line unicorn/no-for-loop,@typescript-eslint/prefer-for-of
+      for (let i = 0; i < arr.length; i++) {
+        seq += arr[i]!
+      }
+      return seq
+    })
+  } finally {
+    p.unmount()
+    ret.remove()
+  }
 }
 
 export default function useLocalStructureFileSequence({
@@ -26,7 +41,7 @@ export default function useLocalStructureFileSequence({
 }) {
   const [error, setError] = useState<unknown>()
   const [isLoading, setLoading] = useState(false)
-  const [seq, setSeq] = useState<string>()
+  const [sequences, setSequences] = useState<string[]>()
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
@@ -39,7 +54,11 @@ export default function useLocalStructureFileSequence({
             file,
             (ext === 'cif' ? 'mmcif' : ext) as 'pdb' | 'mmcif',
           )
-          setSeq(seq)
+          if (seq) {
+            setSequences(seq)
+          } else {
+            throw new Error('no sequences detected in file')
+          }
         }
       } catch (e) {
         console.error(e)
@@ -49,5 +68,5 @@ export default function useLocalStructureFileSequence({
       }
     })()
   }, [file])
-  return { error, isLoading, seq }
+  return { error, isLoading, sequences }
 }

package/src/LaunchProteinView/components/useRemoteStructureFileSequence.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { createPluginUI } from 'molstar/lib/mol-plugin-ui'
 import { renderReact18 } from 'molstar/lib/mol-plugin-ui/react18'
-import { loadStructureFromURL } from '../../ProteinView/loadStructureFromURL'
+import { addStructureFromURL } from '../../ProteinView/addStructureFromURL'
 
 async function structureFileSequenceFetcher(url: string) {
   const ret = document.createElement('div')
@@ -9,10 +9,21 @@ async function structureFileSequenceFetcher(url: string) {
     target: ret,
     render: renderReact18,
   })
-  const { seq } = await loadStructureFromURL({ url, plugin: p })
-  p.unmount()
-  ret.remove()
-  return seq
+  try {
+    const { model } = await addStructureFromURL({ url, plugin: p })
+    return model.obj?.data.sequence.sequences.map(s => {
+      let seq = ''
+      const arr = s.sequence.label.toArray()
+      // eslint-disable-next-line unicorn/no-for-loop,@typescript-eslint/prefer-for-of
+      for (let i = 0; i < arr.length; i++) {
+        seq += arr[i]!
+      }
+      return seq
+    })
+  } finally {
+    p.unmount()
+    ret.remove()
+  }
 }
 
 export default function useRemoteStructureFileSequence({
@@ -22,7 +33,7 @@ export default function useRemoteStructureFileSequence({
 }) {
   const [error, setError] = useState<unknown>()
   const [isLoading, setLoading] = useState(false)
-  const [seq, setSeq] = useState<string>()
+  const [sequences, setSequences] = useState<string[]>()
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
@@ -30,7 +41,11 @@ export default function useRemoteStructureFileSequence({
         if (url) {
           setLoading(true)
           const seq = await structureFileSequenceFetcher(url)
-          setSeq(seq)
+          if (seq) {
+            setSequences(seq)
+          } else {
+            throw new Error('no sequences detected in file')
+          }
         }
       } catch (e) {
         console.error(e)
@@ -40,5 +55,5 @@ export default function useRemoteStructureFileSequence({
       }
     })()
   }, [url])
-  return { error, isLoading, seq }
+  return { error, isLoading, sequences }
 }

package/src/LaunchProteinView/components/util.ts

@@ -12,7 +12,7 @@ export function getTranscriptFeatures(feature: Feature) {
 }
 
 export function stripTrailingVersion(s?: string) {
-  return s?.replace(/\.[^/.]+$/, '')
+  return s?.replace(/\.[^./]+$/, '')
 }
 
 export function z(n: number) {