jbrowse-plugin-protein3d 0.0.2

package/src/LaunchProteinView/components/LaunchProteinViewDialog.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react'
+import { Dialog } from '@jbrowse/core/ui'
+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'
+
+export default function LaunchProteinViewDialog({
+  handleClose,
+  feature,
+  model,
+}: {
+  handleClose: () => void
+  feature: Feature
+  model: AbstractTrackModel
+}) {
+  const [choice, setChoice] = useState(0)
+  return (
+    <Dialog
+      maxWidth="xl"
+      title="Launch protein view"
+      onClose={() => handleClose()}
+      open
+    >
+      <Tabs value={choice} onChange={(_, val) => setChoice(val)}>
+        <Tab value={0} label="AlphaFoldDB search" />
+        <Tab value={1} label="Manual" />
+        <Tab value={2} label="Pre-configured" />
+      </Tabs>
+      <TabPanel value={choice} index={0}>
+        <AlphaFoldDBSearch
+          model={model}
+          feature={feature}
+          handleClose={handleClose}
+        />
+      </TabPanel>
+      <TabPanel value={choice} index={1}>
+        <UserProvidedStructure
+          model={model}
+          feature={feature}
+          handleClose={handleClose}
+        />
+      </TabPanel>
+      <TabPanel value={choice} index={2}>
+        <PreLoadedStructureMapping
+          feature={feature}
+          model={model}
+          handleClose={handleClose}
+        />
+      </TabPanel>
+    </Dialog>
+  )
+}

package/src/LaunchProteinView/components/PreLoadedStructureMapping.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { observer } from 'mobx-react'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  Link,
+  MenuItem,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
+import { AbstractTrackModel, Feature, getSession } from '@jbrowse/core/util'
+
+// locals
+import {
+  createMapFromData,
+  getDisplayName,
+  getTranscriptFeatures,
+  stripTrailingVersion,
+} from '../util'
+import { genomeToTranscriptMapping } from '../../genomeToTranscriptMapping'
+
+const useStyles = makeStyles()(theme => ({
+  section: {
+    marginTop: theme.spacing(6),
+  },
+
+  dialogContent: {
+    width: '80em',
+  },
+}))
+
+function foundF(f: Feature | undefined, map: Map<string, string>) {
+  return (
+    map.get(stripTrailingVersion(f?.get('name')) ?? '') ??
+    map.get(stripTrailingVersion(f?.get('id')) ?? '')
+  )
+}
+
+const AutoForm = observer(function AutoForm({
+  model,
+  feature,
+  handleClose,
+}: {
+  model: AbstractTrackModel
+  feature: Feature
+  handleClose: () => void
+}) {
+  const { classes } = useStyles()
+  const session = getSession(model)
+  // @ts-expect-error
+  const { proteinModel } = session
+  const { data, error } = proteinModel
+  // 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 transcriptIdToStructureMap = useMemo(
+    () => createMapFromData(data),
+    [data],
+  )
+
+  const hasDataForFeatures = useMemo(
+    () => options.filter(f => foundF(f, transcriptIdToStructureMap)),
+    [transcriptIdToStructureMap, options],
+  )
+  const [userSelection, setUserSelection] = useState('')
+  const userSelectionFeat = options.find(f => f.id() === userSelection)
+  const foundStructureId = foundF(userSelectionFeat, transcriptIdToStructureMap)
+
+  useEffect(() => {
+    setUserSelection(hasDataForFeatures[0]?.id())
+  }, [hasDataForFeatures])
+
+  const mapping =
+    foundStructureId && userSelectionFeat
+      ? genomeToTranscriptMapping(userSelectionFeat)
+      : []
+  const url = foundStructureId
+    ? `https://files.rcsb.org/view/${foundStructureId}.cif`
+    : undefined
+
+  return (
+    <>
+      <DialogContent className={classes.dialogContent}>
+        <div className={classes.section}>
+          {error ? (
+            <ErrorMessage error={error} />
+          ) : data ? (
+            <div>
+              <Intro />
+              {hasDataForFeatures.length === 0 ? (
+                <Typography color="error">No data for feature</Typography>
+              ) : (
+                <>
+                  <div className={classes.section}>
+                    <TextField
+                      value={userSelection}
+                      onChange={event => setUserSelection(event.target.value)}
+                      label="Choose isoform"
+                      select
+                    >
+                      {hasDataForFeatures.map(val => (
+                        <MenuItem value={val.id()} key={val.id()}>
+                          {getDisplayName(val)} (has data)
+                        </MenuItem>
+                      ))}
+                    </TextField>
+                  </div>
+                </>
+              )}
+            </div>
+          ) : (
+            <LoadingEllipses />
+          )}
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="contained" color="secondary" onClick={handleClose}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            session.addView('ProteinView', {
+              type: 'ProteinView',
+              url,
+              mapping,
+            })
+            handleClose()
+          }}
+        >
+          Submit
+        </Button>
+      </DialogActions>
+    </>
+  )
+})
+
+function Intro() {
+  return (
+    <div>
+      Find structure associated with gene ID:{' '}
+      <Link href="http://useast.ensembl.org/biomart/martview/4b20effd49654183333b81e98757976f?VIRTUALSCHEMANAME=default&ATTRIBUTES=hsapiens_gene_ensembl.default.feature_page.ensembl_gene_id|hsapiens_gene_ensembl.default.feature_page.ensembl_gene_id_version|hsapiens_gene_ensembl.default.feature_page.ensembl_transcript_id|hsapiens_gene_ensembl.default.feature_page.ensembl_transcript_id_version|hsapiens_gene_ensembl.default.feature_page.pdb|hsapiens_gene_ensembl.default.feature_page.refseq_mrna|hsapiens_gene_ensembl.default.feature_page.refseq_mrna_predicted&FILTERS=&VISIBLEPANEL=attributepanel">
+        Human mappings generated from BioMart (April 13, 2023)
+      </Link>
+    </div>
+  )
+}
+
+export default AutoForm

package/src/LaunchProteinView/components/TabPanel.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+// this is from MUI example
+export default function TabPanel({
+  children,
+  value,
+  index,
+  ...other
+}: {
+  children?: React.ReactNode
+  index: number
+  value: number
+}) {
+  return (
+    <div role="tabpanel" hidden={value !== index} {...other}>
+      {value === index && <div>{children}</div>}
+    </div>
+  )
+}

package/src/LaunchProteinView/components/TranscriptSelector.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { MenuItem, TextField, TextFieldProps } from '@mui/material'
+import { Feature } from '@jbrowse/core/util'
+
+// locals
+import { getGeneDisplayName, getTranscriptDisplayName } from '../util'
+
+function TextField2({ children, ...rest }: TextFieldProps) {
+  return (
+    <div>
+      <TextField {...rest}>{children}</TextField>
+    </div>
+  )
+}
+
+export default function TranscriptSelector({
+  val,
+  setVal,
+  options,
+  feature,
+  seqs,
+}: {
+  options: Feature[]
+  feature: Feature
+  val: string
+  setVal: (str: string) => void
+  seqs: Record<string, string>
+}) {
+  return (
+    <TextField2
+      value={val}
+      onChange={event => setVal(event.target.value)}
+      label="Choose transcript isoform"
+      select
+    >
+      {options
+        .filter(f => !!seqs[f.id()])
+        .map(f => (
+          <MenuItem value={f.id()} key={f.id()}>
+            {getGeneDisplayName(feature)} - {getTranscriptDisplayName(f)} (
+            {seqs[f.id()].length}aa)
+          </MenuItem>
+        ))}
+      {options
+        .filter(f => !seqs[f.id()])
+        .map(f => (
+          <MenuItem value={f.id()} key={f.id()} disabled>
+            {getGeneDisplayName(feature)} - {getTranscriptDisplayName(f)} (no
+            data)
+          </MenuItem>
+        ))}
+    </TextField2>
+  )
+}

package/src/LaunchProteinView/components/UserProvidedStructure.tsx

@@ -0,0 +1,226 @@
+import React, { useEffect, useState } from 'react'
+import { observer } from 'mobx-react'
+import {
+  Button,
+  DialogActions,
+  Radio,
+  RadioGroup,
+  DialogContent,
+  TextField,
+  FormControlLabel,
+  FormControl,
+  Link,
+  Typography,
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import {
+  AbstractTrackModel,
+  Feature,
+  getContainingView,
+  getSession,
+} from '@jbrowse/core/util'
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import {
+  getGeneDisplayName,
+  getId,
+  getTranscriptDisplayName,
+  getTranscriptFeatures,
+} from '../util'
+import TranscriptSelector from './TranscriptSelector'
+
+// hooks
+import useAllSequences from '../useProteinSequences'
+
+const useStyles = makeStyles()(theme => ({
+  dialogContent: {
+    marginTop: theme.spacing(6),
+    width: '80em',
+  },
+  textAreaFont: {
+    fontFamily: 'Courier New',
+  },
+}))
+
+type LGV = LinearGenomeViewModel
+
+function HelpText() {
+  return (
+    <div style={{ marginBottom: 20 }}>
+      Manually supply a protein structure (PDB, mmCIF, etc) for a given
+      transcript. You can open the file from the result of running, for example,{' '}
+      <Link target="_blank" href="https://github.com/sokrypton/ColabFold">
+        ColabFold
+      </Link>
+      . This plugin will align the protein sequence calculated from the genome
+      to the protein sequence embedded in the structure file which allows for
+      slight differences in these two representations.
+    </div>
+  )
+}
+
+const UserProvidedStructure = observer(function ({
+  feature,
+  model,
+  handleClose,
+}: {
+  feature: Feature
+  model: AbstractTrackModel
+  handleClose: () => void
+}) {
+  const { classes } = useStyles()
+  const session = getSession(model)
+  const [file, setFile] = useState<File>()
+  const [choice, setChoice] = useState('file')
+  const [error2, setError] = useState<unknown>()
+  const [structureURL, setStructureURL] = useState('')
+  const [selection, setSelection] = useState<string>()
+
+  // 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 ?? '']
+  useEffect(() => {
+    if (selection === undefined && seqs !== undefined) {
+      setSelection(options.find(f => !!seqs[f.id()])?.id())
+    }
+  }, [options, selection, seqs])
+
+  const e = error || error2
+  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 }}>
+          <FormControl component="fieldset">
+            <RadioGroup
+              value={choice}
+              onChange={event => setChoice(event.target.value)}
+            >
+              <FormControlLabel value="url" control={<Radio />} label="URL" />
+              <FormControlLabel value="file" control={<Radio />} label="File" />
+            </RadioGroup>
+          </FormControl>
+          {choice === 'url' ? (
+            <div>
+              <Typography>
+                Open a PDB/mmCIF/etc. file from remote URL
+              </Typography>
+              <TextField
+                label="URL"
+                value={structureURL}
+                onChange={event => setStructureURL(event.target.value)}
+              />
+            </div>
+          ) : null}
+          {choice === 'file' ? (
+            <div style={{ paddingTop: 20 }}>
+              <Typography>
+                Open a PDB/mmCIF/etc. file from your local drive
+              </Typography>
+              <Button variant="outlined" component="label">
+                Choose File
+                <input
+                  type="file"
+                  hidden
+                  onChange={({ target }) => {
+                    const file = target?.files?.[0]
+                    if (file) {
+                      setFile(file)
+                    }
+                  }}
+                />
+              </Button>
+            </div>
+          ) : null}
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => handleClose()}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          disabled={!(structureURL || file) || !protein || !selectedTranscript}
+          onClick={() => {
+            // 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)}`,
+                  })
+                }
+                handleClose()
+              } catch (e) {
+                console.error(e)
+                setError(e)
+              }
+            })()
+          }}
+        >
+          Submit
+        </Button>
+      </DialogActions>
+    </>
+  )
+})
+
+export default UserProvidedStructure

package/src/LaunchProteinView/components/useCheckAlphaFoldDBExistence.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+
+export function useCheckAlphaFoldDBExistence({
+  foundStructureId,
+}: {
+  foundStructureId?: string
+}) {
+  const [error, setError] = useState<unknown>()
+  const [loading, setLoading] = useState(false)
+  const [success, setSuccess] = useState(false)
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        if (foundStructureId) {
+          setLoading(true)
+          await fetch(
+            `https://alphafold.ebi.ac.uk/files/AF-${foundStructureId}-F1-model_v4.cif`,
+            { method: 'HEAD' },
+          )
+          setLoading(false)
+          setSuccess(true)
+        }
+      } catch (e) {
+        console.error(e)
+        setError(e)
+      }
+    })()
+  }, [foundStructureId])
+  return { error, loading, success }
+}

package/src/LaunchProteinView/index.ts

@@ -0,0 +1,56 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+import { PluggableElementType } from '@jbrowse/core/pluggableElementTypes'
+import { IAnyModelType } from 'mobx-state-tree'
+import { getSession, getContainingTrack } from '@jbrowse/core/util'
+
+// icons
+import AddIcon from '@mui/icons-material/Add'
+
+// locals
+import LaunchProteinViewDialog from './components/LaunchProteinViewDialog'
+
+function isDisplay(elt: { name: string }): elt is DisplayType {
+  return elt.name === 'LinearBasicDisplay'
+}
+
+function extendStateModel(stateModel: IAnyModelType) {
+  return stateModel.views(self => {
+    const superContextMenuItems = self.contextMenuItems
+    return {
+      contextMenuItems() {
+        const feature = self.contextMenuFeature
+        const track = getContainingTrack(self)
+        return [
+          ...superContextMenuItems(),
+          ...(feature
+            ? [
+                {
+                  label: 'Launch protein view',
+                  icon: AddIcon,
+                  onClick: () => {
+                    getSession(track).queueDialog(handleClose => [
+                      LaunchProteinViewDialog,
+                      { model: track, handleClose, feature },
+                    ])
+                  },
+                },
+              ]
+            : []),
+        ]
+      },
+    }
+  })
+}
+
+export default function LaunchProteinViewF(pluginManager: PluginManager) {
+  pluginManager.addToExtensionPoint(
+    'Core-extendPluggableElement',
+    (elt: PluggableElementType) => {
+      if (isDisplay(elt)) {
+        elt.stateModel = extendStateModel(elt.stateModel)
+      }
+      return elt
+    },
+  )
+}

package/src/LaunchProteinView/useMyGeneInfo.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react'
+import { jsonfetch } from '../fetchUtils'
+import { stripTrailingVersion } from './util'
+
+interface MyGeneInfoResults {
+  hits: {
+    uniprot: {
+      'Swiss-Prot': string
+    }
+  }[]
+}
+
+export default function useMyGeneInfo({ id }: { id: string }) {
+  const [result, setResult] = useState<MyGeneInfoResults>()
+  const [error, setError] = useState<unknown>()
+  const [loading, setLoading] = useState(false)
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        if (!id) {
+          return
+        }
+        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)
+      }
+    })()
+  }, [id])
+  return { loading, result: result?.hits[0]?.uniprot['Swiss-Prot'], error }
+}

package/src/LaunchProteinView/useProteinSequences.ts

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