jbrowse-plugin-protein3d 0.0.3 → 0.0.4

package/src/LaunchProteinView/components/AlphaFoldDBSearch.tsx

@@ -7,6 +7,7 @@ import {
   Feature,
   getContainingView,
   getSession,
+  isSessionWithAddTracks,
 } from '@jbrowse/core/util'
 import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
 import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
@@ -78,13 +79,14 @@ const AlphaFoldDBSearch = observer(function ({
     ? `https://alphafold.ebi.ac.uk/files/AF-${uniprotId}-F1-model_v4.cif`
     : undefined
   const {
-    seq: structureSequence,
+    sequences: structureSequences,
     isLoading: isRemoteStructureSequenceLoading,
     error: remoteStructureSequenceError,
   } = useRemoteStructureFileSequence({ url })
   const e =
     myGeneError || isoformProteinSequencesError || remoteStructureSequenceError
 
+  const structureSequence = structureSequences?.[0]
   useEffect(() => {
     if (isoformSequences !== undefined) {
       const ret =
@@ -116,7 +118,7 @@ const AlphaFoldDBSearch = observer(function ({
             variant="h6"
             message="Looking up UniProt ID from mygene.info"
           />
-        ) : !uniprotId ? (
+        ) : uniprotId ? null : (
           <div>
             UniProt ID not found. Search sequence on AlphaFoldDB{' '}
             <a
@@ -130,7 +132,7 @@ const AlphaFoldDBSearch = observer(function ({
             After visiting the above link, then paste the structure URL into the
             Manual tab
           </div>
-        ) : null}
+        )}
         {isIsoformProteinSequencesLoading ? (
           <LoadingEllipses
             variant="h6"
@@ -160,7 +162,9 @@ const AlphaFoldDBSearch = observer(function ({
         <Button
           variant="contained"
           color="secondary"
-          onClick={() => handleClose()}
+          onClick={() => {
+            handleClose()
+          }}
         >
           Cancel
         </Button>
@@ -173,16 +177,174 @@ const AlphaFoldDBSearch = observer(function ({
           onClick={() => {
             session.addView('ProteinView', {
               type: 'ProteinView',
-              url,
-              seq2: userSelectedProteinSequence?.seq,
-              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

@@ -39,11 +39,7 @@ export default function AlphaFoldDBSearchStatus({
     : undefined
   const [showAllProteinSequences, setShowAllProteinSequences] = useState(false)
 
-  return !uniprotId ? (
-    <Typography>
-      Searching {getDisplayName(selectedTranscript)} for UniProt ID
-    </Typography>
-  ) : (
+  return uniprotId ? (
     <>
       <Typography>
         Found Uniprot ID:{' '}
@@ -62,7 +58,9 @@ export default function AlphaFoldDBSearchStatus({
           <Button
             variant="contained"
             color="primary"
-            onClick={() => setShowAllProteinSequences(!showAllProteinSequences)}
+            onClick={() => {
+              setShowAllProteinSequences(!showAllProteinSequences)
+            }}
           >
             {showAllProteinSequences
               ? 'Hide all isoform protein sequences'
@@ -80,5 +78,9 @@ export default function AlphaFoldDBSearchStatus({
         <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

@@ -62,7 +62,12 @@ export default function HelpDialog({
       </DialogContent>
       <Divider />
       <DialogActions>
-        <Button onClick={() => handleClose()} color="primary">
+        <Button
+          onClick={() => {
+            handleClose()
+          }}
+          color="primary"
+        >
           Close
         </Button>
       </DialogActions>

package/src/LaunchProteinView/components/LaunchProteinViewDialog.tsx

@@ -22,10 +22,17 @@ export default function LaunchProteinViewDialog({
     <Dialog
       maxWidth="xl"
       title="Launch protein view"
-      onClose={() => handleClose()}
+      onClose={() => {
+        handleClose()
+      }}
       open
     >
-      <Tabs value={choice} onChange={(_, val) => setChoice(val)}>
+      <Tabs
+        value={choice}
+        onChange={(_, val) => {
+          setChoice(val)
+        }}
+      >
         <Tab value={0} label="Automatic lookup" />
         <Tab value={1} label="Manual" />
       </Tabs>

package/src/LaunchProteinView/components/MSATable.tsx

@@ -71,7 +71,9 @@ export default function MSATable({
         className={classes.margin}
         control={
           <Checkbox
-            onChange={event => setShowInFastaFormat(event.target.checked)}
+            onChange={event => {
+              setShowInFastaFormat(event.target.checked)
+            }}
             checked={showInFastaFormat}
           />
         }

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>

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) {