jbrowse-plugin-protein3d 0.0.2 → 0.0.4

package/src/LaunchProteinView/components/MSATable.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import { Checkbox, FormControlLabel, TextField } from '@mui/material'
+import { Feature, max } from '@jbrowse/core/util'
+import { makeStyles } from 'tss-react/mui'
+
+// locals
+import { getTranscriptDisplayName } from './util'
+
+const useStyles = makeStyles()({
+  textAreaFont: {
+    fontFamily: 'Courier New',
+    whiteSpace: 'pre',
+  },
+  margin: {
+    marginLeft: 20,
+  },
+})
+
+export default function MSATable({
+  structureName,
+  structureSequence,
+  isoformSequences,
+}: {
+  structureName: string
+  structureSequence: string
+  isoformSequences: Record<string, { feature: Feature; seq: string }>
+}) {
+  const { classes } = useStyles()
+  const [showInFastaFormat, setShowInFastaFormat] = useState(false)
+  const removedStars = Object.fromEntries(
+    Object.entries(isoformSequences).map(([key, val]) => [
+      key,
+      { ...val, seq: val.seq.replaceAll('*', '') },
+    ]),
+  )
+  const exactMatchIsoformAndStructureSeq = Object.entries(removedStars).find(
+    ([_, val]) => structureSequence === val.seq,
+  )
+  const sname = `${structureName || ''} (structure residues)`
+  const maxKeyLen = max([
+    sname.length,
+    ...Object.entries(removedStars).map(
+      ([_, val]) => getTranscriptDisplayName(val.feature).length,
+    ),
+  ])
+
+  const l1 = [
+    `${sname.padEnd(maxKeyLen)}${exactMatchIsoformAndStructureSeq ? '*' : ' '} ${structureSequence}`,
+    exactMatchIsoformAndStructureSeq
+      ? `${getTranscriptDisplayName(exactMatchIsoformAndStructureSeq[1].feature).padEnd(maxKeyLen)}* ${exactMatchIsoformAndStructureSeq[1].seq}`
+      : undefined,
+    ...Object.entries(removedStars)
+      .map(
+        ([_, val]) =>
+          `${getTranscriptDisplayName(val.feature).padEnd(maxKeyLen)}  ${val.seq}`,
+      )
+      .filter(([k]) => k !== exactMatchIsoformAndStructureSeq?.[0]),
+  ]
+    .filter(f => !!f)
+    .join('\n')
+
+  const l2 = [
+    `>${sname}\n${structureSequence}`,
+    ...Object.values(removedStars).map(
+      ({ feature, seq }) => `>${getTranscriptDisplayName(feature)}\n${seq}`,
+    ),
+  ].join('\n')
+  return (
+    <>
+      <FormControlLabel
+        className={classes.margin}
+        control={
+          <Checkbox
+            onChange={event => {
+              setShowInFastaFormat(event.target.checked)
+            }}
+            checked={showInFastaFormat}
+          />
+        }
+        label="Show in FASTA format?"
+      />
+      <TextField
+        variant="outlined"
+        multiline
+        minRows={5}
+        maxRows={10}
+        fullWidth
+        value={showInFastaFormat ? l2 : l1}
+        InputProps={{
+          readOnly: true,
+          classes: {
+            input: classes.textAreaFont,
+          },
+        }}
+      />
+    </>
+  )
+}

package/src/LaunchProteinView/components/TranscriptSelector.tsx

@@ -3,7 +3,7 @@ import { MenuItem, TextField, TextFieldProps } from '@mui/material'
 import { Feature } from '@jbrowse/core/util'
 
 // locals
-import { getGeneDisplayName, getTranscriptDisplayName } from '../util'
+import { getGeneDisplayName, getTranscriptDisplayName } from './util'
 
 function TextField2({ children, ...rest }: TextFieldProps) {
   return (
@@ -16,33 +16,61 @@ function TextField2({ children, ...rest }: TextFieldProps) {
 export default function TranscriptSelector({
   val,
   setVal,
-  options,
+  isoforms,
+  isoformSequences,
+  structureSequence,
   feature,
-  seqs,
 }: {
-  options: Feature[]
+  isoforms: Feature[]
   feature: Feature
   val: string
   setVal: (str: string) => void
-  seqs: Record<string, string>
+  structureSequence: string
+  isoformSequences: Record<string, { feature: Feature; seq: string }>
 }) {
   return (
     <TextField2
       value={val}
-      onChange={event => setVal(event.target.value)}
+      onChange={event => {
+        setVal(event.target.value)
+      }}
       label="Choose transcript isoform"
       select
     >
-      {options
-        .filter(f => !!seqs[f.id()])
+      {isoforms
+        .filter(f => !!isoformSequences[f.id()])
+        .filter(
+          f =>
+            isoformSequences[f.id()]!.seq.replaceAll('*', '') ===
+            structureSequence,
+        )
         .map(f => (
           <MenuItem value={f.id()} key={f.id()}>
             {getGeneDisplayName(feature)} - {getTranscriptDisplayName(f)} (
-            {seqs[f.id()].length}aa)
+            {isoformSequences[f.id()]!.seq.length}aa) (matches structure
+            residues)
           </MenuItem>
         ))}
-      {options
-        .filter(f => !seqs[f.id()])
+      {isoforms
+        .filter(f => !!isoformSequences[f.id()])
+        .filter(
+          f =>
+            isoformSequences[f.id()]!.seq.replaceAll('*', '') !==
+            structureSequence,
+        )
+        .sort(
+          (a, b) =>
+            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)
+          </MenuItem>
+        ))}
+      {isoforms
+        .filter(f => !isoformSequences[f.id()])
         .map(f => (
           <MenuItem value={f.id()} key={f.id()} disabled>
             {getGeneDisplayName(feature)} - {getTranscriptDisplayName(f)} (no

package/src/LaunchProteinView/components/UserProvidedStructure.tsx

@@ -3,13 +3,13 @@ import { observer } from 'mobx-react'
 import {
   Button,
   DialogActions,
-  Radio,
-  RadioGroup,
   DialogContent,
-  TextField,
   FormControlLabel,
   FormControl,
   Link,
+  Radio,
+  RadioGroup,
+  TextField,
   Typography,
 } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
@@ -28,11 +28,17 @@ import {
   getId,
   getTranscriptDisplayName,
   getTranscriptFeatures,
-} from '../util'
+} from './util'
+
+// components
 import TranscriptSelector from './TranscriptSelector'
+import MSATable from './MSATable'
+import HelpButton from './HelpButton'
 
 // hooks
-import useAllSequences from '../useProteinSequences'
+import useIsoformProteinSequences from './useIsoformProteinSequences'
+import useLocalStructureFileSequence from './useLocalStructureFileSequence'
+import useRemoteStructureFileSequence from './useRemoteStructureFileSequence'
 
 const useStyles = makeStyles()(theme => ({
   dialogContent: {
@@ -73,69 +79,71 @@ const UserProvidedStructure = observer(function ({
   const { classes } = useStyles()
   const session = getSession(model)
   const [file, setFile] = useState<File>()
+  const [pdbId, setPdbId] = useState('')
   const [choice, setChoice] = useState('file')
   const [error2, setError] = useState<unknown>()
   const [structureURL, setStructureURL] = useState('')
-  const [selection, setSelection] = useState<string>()
+  const [userSelection, setUserSelection] = useState<string>()
+  const [showAllProteinSequences, setShowAllProteinSequences] = useState(false)
 
   // 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 view = getContainingView(model) as LGV
-  const selectedTranscript = options.find(val => getId(val) === selection)
-  const { seqs, error } = useAllSequences({ feature, view })
-  const protein = seqs?.[selection ?? '']
+  const selectedTranscript = options.find(val => getId(val) === userSelection)
+  const { isoformSequences, error } = useIsoformProteinSequences({
+    feature,
+    view,
+  })
+  const protein = isoformSequences?.[userSelection ?? '']
+  const { sequences: structureSequences1, error: error3 } =
+    useLocalStructureFileSequence({ file })
+
+  const { sequences: structureSequences2, error: error4 } =
+    useRemoteStructureFileSequence({ url: structureURL })
+  const structureName =
+    file?.name ?? structureURL.slice(structureURL.lastIndexOf('/') + 1)
+  const structureSequences = structureSequences1 ?? structureSequences2
+  const structureSequence = structureSequences?.[0]
+
   useEffect(() => {
-    if (selection === undefined && seqs !== undefined) {
-      setSelection(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, selection, seqs])
+  }, [options, structureSequence, isoformSequences])
 
-  const e = error || error2
+  const e = error || error2 || error3 || error4
   return (
     <>
       <DialogContent className={classes.dialogContent}>
         {e ? <ErrorMessage error={e} /> : null}
         <HelpText />
-        {seqs ? (
-          <>
-            <TranscriptSelector
-              val={selection ?? ''}
-              setVal={setSelection}
-              options={options}
-              feature={feature}
-              seqs={seqs}
-            />
-            {selectedTranscript ? (
-              <TextField
-                variant="outlined"
-                multiline
-                minRows={5}
-                maxRows={10}
-                fullWidth
-                value={`>${selectedTranscript.get('name') || selectedTranscript.get('id')}\n${protein}`}
-                InputProps={{
-                  readOnly: true,
-                  classes: {
-                    input: classes.textAreaFont,
-                  },
-                }}
-              />
-            ) : null}
-          </>
-        ) : (
-          <div style={{ margin: 20 }}>
-            <LoadingEllipses title="Loading protein sequences" variant="h6" />
-          </div>
-        )}
+
         <div style={{ display: 'flex', margin: 30 }}>
+          <Typography>
+            Open your structure file <HelpButton />
+          </Typography>
+
           <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" />
+              <FormControlLabel
+                value="pdb"
+                control={<Radio />}
+                label="PDB ID"
+              />
             </RadioGroup>
           </FormControl>
           {choice === 'url' ? (
@@ -146,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}
@@ -161,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)
                     }
@@ -170,13 +180,65 @@ const UserProvidedStructure = observer(function ({
               </Button>
             </div>
           ) : null}
+          {choice === 'pdb' ? (
+            <TextField
+              value={pdbId}
+              onChange={event => {
+                const s = event.target.value
+                setPdbId(s)
+                setStructureURL(`https://files.rcsb.org/download/${s}.cif`)
+              }}
+              label="PDB ID"
+            />
+          ) : null}
+        </div>
+        <div style={{ margin: 20 }}>
+          {isoformSequences ? (
+            structureSequence ? (
+              <>
+                <TranscriptSelector
+                  val={userSelection ?? ''}
+                  setVal={setUserSelection}
+                  structureSequence={structureSequence}
+                  isoforms={options}
+                  feature={feature}
+                  isoformSequences={isoformSequences}
+                />
+                <div style={{ margin: 10 }}>
+                  <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={() => {
+                      setShowAllProteinSequences(!showAllProteinSequences)
+                    }}
+                  >
+                    {showAllProteinSequences
+                      ? 'Hide all isoform protein sequences'
+                      : 'Show all isoform protein sequences'}
+                  </Button>
+
+                  {showAllProteinSequences ? (
+                    <MSATable
+                      structureSequence={structureSequence}
+                      structureName={structureName}
+                      isoformSequences={isoformSequences}
+                    />
+                  ) : null}
+                </div>
+              </>
+            ) : null
+          ) : (
+            <LoadingEllipses title="Loading protein sequences" variant="h6" />
+          )}
         </div>
       </DialogContent>
       <DialogActions>
         <Button
           variant="contained"
           color="secondary"
-          onClick={() => handleClose()}
+          onClick={() => {
+            handleClose()
+          }}
         >
           Cancel
         </Button>
@@ -188,26 +250,15 @@ const UserProvidedStructure = observer(function ({
             // eslint-disable-next-line @typescript-eslint/no-floating-promises
             ;(async () => {
               try {
-                if (file) {
-                  const data = await file.text()
-                  session.addView('ProteinView', {
-                    type: 'ProteinView',
-                    data,
-                    seq2: protein,
-                    feature: selectedTranscript?.toJSON(),
-                    connectedViewId: view.id,
-                    displayName: `Protein view ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
-                  })
-                } else if (structureURL) {
-                  session.addView('ProteinView', {
-                    type: 'ProteinView',
-                    url: structureURL,
-                    seq2: protein,
-                    feature: selectedTranscript?.toJSON(),
-                    connectedViewId: view.id,
-                    displayName: `Protein view ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
-                  })
-                }
+                session.addView('ProteinView', {
+                  type: 'ProteinView',
+                  seq2: protein,
+                  feature: selectedTranscript?.toJSON(),
+                  connectedViewId: view.id,
+                  displayName: `Protein view ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
+                  ...(file ? { data: await file.text() } : {}),
+                  ...(structureURL ? { url: structureURL } : {}),
+                })
                 handleClose()
               } catch (e) {
                 console.error(e)

package/src/LaunchProteinView/{calculateProteinSequence.ts → 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/{useProteinSequences.ts → components/useIsoformProteinSequences.ts}

@@ -5,32 +5,37 @@ import { Feature } from '@jbrowse/core/util'
 import { getTranscriptFeatures } from './util'
 import { fetchProteinSeq } from './calculateProteinSequence'
 
-export default function useAllSequences({
+export default function useIsoformProteinSequences({
   feature,
   view,
 }: {
   feature: Feature
-  view: { assemblyNames?: string[] } | undefined
+  view?: { assemblyNames?: string[] }
 }) {
   const [error, setError] = useState<unknown>()
-  const [seqs, setSeqs] = useState<Record<string, string>>()
+  const [isoformSequences, setIsoformSequences] =
+    useState<Record<string, { feature: Feature; seq: string }>>()
+  const [isLoading, setLoading] = useState(false)
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
       try {
-        const ret = [] as [string, string][]
+        setLoading(true)
+        const ret = [] as [string, { feature: Feature; seq: string }][]
         for (const f of getTranscriptFeatures(feature)) {
           const seq = await fetchProteinSeq({ view, feature: f })
           if (seq) {
-            ret.push([f.id(), seq])
+            ret.push([f.id(), { feature: f, seq }])
           }
         }
-        setSeqs(Object.fromEntries(ret))
+        setIsoformSequences(Object.fromEntries(ret))
       } catch (e) {
         console.error(e)
         setError(e)
+      } finally {
+        setLoading(false)
       }
     })()
   }, [feature, view])
-  return { seqs, error }
+  return { isLoading, isoformSequences, error }
 }

package/src/LaunchProteinView/components/useLocalStructureFileSequence.ts

@@ -0,0 +1,72 @@
+import { useEffect, useState } from 'react'
+import { createPluginUI } from 'molstar/lib/mol-plugin-ui'
+import { renderReact18 } from 'molstar/lib/mol-plugin-ui/react18'
+import { addStructureFromData } from '../../ProteinView/addStructureFromData'
+
+async function structureFileSequenceFetcher(
+  file: File,
+  format: 'pdb' | 'mmcif',
+) {
+  const ret = document.createElement('div')
+  const p = await createPluginUI({
+    target: ret,
+    render: renderReact18,
+  })
+
+  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({
+  file,
+}: {
+  file?: File
+}) {
+  const [error, setError] = useState<unknown>()
+  const [isLoading, setLoading] = useState(false)
+  const [sequences, setSequences] = useState<string[]>()
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        if (file) {
+          setLoading(true)
+
+          const ext = file.name.slice(file.name.lastIndexOf('.') + 1) || 'pdb'
+          const seq = await structureFileSequenceFetcher(
+            file,
+            (ext === 'cif' ? 'mmcif' : ext) as 'pdb' | 'mmcif',
+          )
+          if (seq) {
+            setSequences(seq)
+          } else {
+            throw new Error('no sequences detected in file')
+          }
+        }
+      } catch (e) {
+        console.error(e)
+        setError(e)
+      } finally {
+        setLoading(false)
+      }
+    })()
+  }, [file])
+  return { error, isLoading, sequences }
+}

package/src/LaunchProteinView/{useMyGeneInfo.ts → components/useMyGeneInfoUniprotIdLookup.ts}

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { jsonfetch } from '../fetchUtils'
+import { jsonfetch } from '../../fetchUtils'
 import { stripTrailingVersion } from './util'
 
 interface MyGeneInfoResults {
@@ -13,25 +13,30 @@ interface MyGeneInfoResults {
 export default function useMyGeneInfo({ id }: { id: string }) {
   const [result, setResult] = useState<MyGeneInfoResults>()
   const [error, setError] = useState<unknown>()
-  const [loading, setLoading] = useState(false)
+  const [isLoading, setLoading] = useState(false)
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     ;(async () => {
       try {
-        if (!id) {
-          return
+        if (id) {
+          setLoading(true)
+          const res = await jsonfetch(
+            `https://mygene.info/v3/query?q=${stripTrailingVersion(id)}&fields=uniprot,symbol`,
+          )
+          setResult(res)
         }
-        setLoading(true)
-        const res = await jsonfetch(
-          `https://mygene.info/v3/query?q=${stripTrailingVersion(id)}&fields=uniprot,symbol`,
-        )
-        setLoading(false)
-        setResult(res)
       } catch (e) {
         console.error(e)
         setError(e)
+      } finally {
+        setLoading(false)
       }
     })()
   }, [id])
-  return { loading, result: result?.hits[0]?.uniprot['Swiss-Prot'], error }
+
+  return {
+    isLoading,
+    uniprotId: result?.hits[0]?.uniprot?.['Swiss-Prot'],
+    error,
+  }
 }