jbrowse-plugin-protein3d 0.0.2 → 0.0.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.2",
+  "version": "0.0.3",
   "name": "jbrowse-plugin-protein3d",
   "keywords": [
     "jbrowse",
@@ -28,7 +28,7 @@
     "pako": "^2.1.0"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.1.0",
+    "@eslint/compat": "^1.1.1",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@jbrowse/core": "^2.0.0",
     "@jbrowse/plugin-linear-genome-view": "^2.4.2",

package/src/LaunchProteinView/components/AlphaFoldDBSearch.tsx

@@ -1,6 +1,6 @@
 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,
@@ -18,15 +18,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 +37,7 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-type LGV = LinearGenomeViewModel
-
-const AlphaFoldDBSearch = observer(function AlphaFoldDBSearch({
+const AlphaFoldDBSearch = observer(function ({
   feature,
   model,
   handleClose,
@@ -53,59 +53,108 @@ 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 {
+    seq: structureSequence,
+    isLoading: isRemoteStructureSequenceLoading,
+    error: remoteStructureSequenceError,
+  } = useRemoteStructureFileSequence({ url })
+  const e =
+    myGeneError || isoformProteinSequencesError || remoteStructureSequenceError
+
   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 ? (
+          <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>
+        ) : null}
+        {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
@@ -118,12 +167,14 @@ const AlphaFoldDBSearch = observer(function AlphaFoldDBSearch({
         <Button
           variant="contained"
           color="primary"
-          disabled={!foundStructureId || !protein || !selectedTranscript}
+          disabled={
+            !uniprotId || !userSelectedProteinSequence || !selectedTranscript
+          }
           onClick={() => {
             session.addView('ProteinView', {
               type: 'ProteinView',
               url,
-              seq2: protein,
+              seq2: userSelectedProteinSequence?.seq,
               feature: selectedTranscript?.toJSON(),
               connectedViewId: view.id,
               displayName: `Protein view ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,

package/src/LaunchProteinView/components/AlphaFoldDBSearchStatus.tsx

@@ -1,43 +1,83 @@
-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 ? (
+  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>
       Searching {getDisplayName(selectedTranscript)} for UniProt ID
     </Typography>
   ) : (
     <>
-      <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} />
       )}
     </>
   )

package/src/LaunchProteinView/components/HelpDialog.tsx

@@ -18,18 +18,46 @@ 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 />

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'
@@ -27,9 +26,8 @@ export default function LaunchProteinViewDialog({
       open
     >
       <Tabs value={choice} onChange={(_, val) => setChoice(val)}>
-        <Tab value={0} label="AlphaFoldDB search" />
+        <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 +43,6 @@ export default function LaunchProteinViewDialog({
           handleClose={handleClose}
         />
       </TabPanel>
-      <TabPanel value={choice} index={2}>
-        <PreLoadedStructureMapping
-          feature={feature}
-          model={model}
-          handleClose={handleClose}
-        />
-      </TabPanel>
     </Dialog>
   )
 }

package/src/LaunchProteinView/components/MSATable.tsx

@@ -0,0 +1,96 @@
+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,15 +16,17 @@ 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
@@ -33,16 +35,40 @@ export default function TranscriptSelector({
       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