jbrowse-plugin-protein3d 0.0.2

package/package.json

@@ -0,0 +1,70 @@
+{
+  "version": "0.0.2",
+  "name": "jbrowse-plugin-protein3d",
+  "keywords": [
+    "jbrowse",
+    "jbrowse2"
+  ],
+  "main": "dist/index.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "test": "jest",
+    "clean": "rimraf dist",
+    "prebuild": "npm run clean",
+    "start": "node esbuild.mjs",
+    "build": "tsc && NODE_ENV=production node esbuild.mjs",
+    "lint": "eslint --report-unused-disable-directives --max-warnings 0  src/",
+    "prepack": "npm run build",
+    "postversion": "git push --follow-tags"
+  },
+  "dependencies": {
+    "@mui/icons-material": "^5.15.10",
+    "clustal-js": "^2.0.1",
+    "g2p_mapper": "^1.0.3",
+    "molstar": "^4.0.0",
+    "pako": "^2.1.0"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.1.0",
+    "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
+    "@jbrowse/core": "^2.0.0",
+    "@jbrowse/plugin-linear-genome-view": "^2.4.2",
+    "@mui/material": "^5.12.0",
+    "@mui/system": "^5.12.0",
+    "@mui/x-data-grid": "^7.3.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.16",
+    "@types/pako": "^2.0.0",
+    "@types/react": "^18.2.54",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "esbuild": "^0.23.0",
+    "eslint": "^9.0.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.8",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-unicorn": "^54.0.0",
+    "jest": "^29.7.0",
+    "mobx": "^6.0.0",
+    "mobx-react": "^9.0.1",
+    "mobx-state-tree": "5.4.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.5",
+    "pretty-bytes": "^6.1.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.0",
+    "rxjs": "^7.0.0",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.3.0",
+    "tss-react": "^4.9.4",
+    "typescript": "^5.3.3"
+  },
+  "author": "Colin <colin.diesh@gmail.com>",
+  "license": "MIT"
+}

package/src/AddHighlightModel/GenomeMouseoverHighlight.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { getSession } from '@jbrowse/core/util'
+// locals
+import Highlight from './Highlight'
+
+const GenomeMouseoverHighlight = observer(function ({
+  model,
+}: {
+  model: LinearGenomeViewModel
+}) {
+  const { hovered } = getSession(model)
+  return hovered &&
+    typeof hovered === 'object' &&
+    'hoverPosition' in hovered ? (
+    <HoverHighlight model={model} />
+  ) : null
+})
+
+const HoverHighlight = observer(function ({
+  model,
+}: {
+  model: LinearGenomeViewModel
+}) {
+  const session = getSession(model)
+  if (session.views.some(s => s.type === 'ProteinView')) {
+    const { hovered } = session
+    const { assemblyNames } = model
+    // @ts-expect-error
+    const { coord, refName } = hovered.hoverPosition
+    return (
+      <Highlight
+        model={model}
+        start={coord - 1}
+        end={coord}
+        refName={refName}
+        assemblyName={assemblyNames[0]}
+      />
+    )
+  }
+  return null
+})
+
+export default GenomeMouseoverHighlight

package/src/AddHighlightModel/Highlight.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { getSession } from '@jbrowse/core/util'
+
+// locals
+import { useStyles } from './util'
+
+const Highlight = observer(function Highlight({
+  assemblyName,
+  start,
+  end,
+  refName,
+  model,
+}: {
+  model: LinearGenomeViewModel
+  assemblyName: string
+  start: number
+  end: number
+  refName: string
+}) {
+  const { cx, classes } = useStyles()
+  const { assemblyManager } = getSession(model)
+  const { offsetPx } = model
+  const assembly = assemblyManager.get(assemblyName)
+  const ref = assembly?.getCanonicalRefName(refName) ?? refName
+  const s = model.bpToPx({ refName: ref, coord: start })
+  const e = model.bpToPx({ refName: ref, coord: end })
+  if (s && e) {
+    const width = Math.max(Math.abs(e.offsetPx - s.offsetPx), 3)
+    const left = Math.min(s.offsetPx, e.offsetPx) - offsetPx
+    return (
+      <div
+        className={cx(
+          classes.highlight,
+          width <= 3 ? classes.thinborder : undefined,
+        )}
+        style={{ left, width }}
+      />
+    )
+  } else {
+    return null
+  }
+})
+
+export default Highlight

package/src/AddHighlightModel/HighlightComponents.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import ProteinToGenomeClickHighlight from './ProteinToGenomeClickHighlight'
+import ProteinToGenomeHoverHighlight from './ProteinToGenomeHoverHighlight'
+import GenomeMouseoverHighlight from './GenomeMouseoverHighlight'
+
+type LGV = LinearGenomeViewModel
+
+const HighlightComponents = observer(function Highlight({
+  model,
+}: {
+  model: LGV
+}) {
+  return (
+    <>
+      <ProteinToGenomeClickHighlight model={model} />
+      <ProteinToGenomeHoverHighlight model={model} />
+      <GenomeMouseoverHighlight model={model} />
+    </>
+  )
+})
+
+export default HighlightComponents

package/src/AddHighlightModel/ProteinToGenomeClickHighlight.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { getSession } from '@jbrowse/core/util'
+
+// locals
+import { JBrowsePluginProteinViewModel } from '../ProteinView/model'
+import Highlight from './Highlight'
+
+type LGV = LinearGenomeViewModel
+
+const ProteinToGenomeClickHighlight = observer(function ({
+  model,
+}: {
+  model: LGV
+}) {
+  const { assemblyManager, views } = getSession(model)
+  const { assemblyNames } = model
+  const p = views.find(
+    f => f.type === 'ProteinView',
+  ) as JBrowsePluginProteinViewModel
+  const assembly = assemblyManager.get(assemblyNames[0])
+  return assembly ? (
+    <>
+      {p?.clickGenomeHighlights.map((r, idx) => (
+        <Highlight
+          key={`${JSON.stringify(r)}-${idx}}`}
+          start={r.start}
+          end={r.end}
+          refName={r.refName}
+          assemblyName={assemblyNames[0]}
+          model={model}
+        />
+      ))}
+    </>
+  ) : null
+})
+
+export default ProteinToGenomeClickHighlight

package/src/AddHighlightModel/ProteinToGenomeHoverHighlight.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { getSession } from '@jbrowse/core/util'
+
+// locals
+import { JBrowsePluginProteinViewModel } from '../ProteinView/model'
+import Highlight from './Highlight'
+
+type LGV = LinearGenomeViewModel
+
+const ProteinToGenomeHoverHighlight = observer(function ({
+  model,
+}: {
+  model: LGV
+}) {
+  const { assemblyManager, views } = getSession(model)
+  const { assemblyNames } = model
+  const p = views.find(
+    f => f.type === 'ProteinView',
+  ) as JBrowsePluginProteinViewModel
+  const assembly = assemblyManager.get(assemblyNames[0])
+  return assembly ? (
+    <>
+      {p?.hoverGenomeHighlights.map((r, idx) => (
+        <Highlight
+          key={`${JSON.stringify(r)}-${idx}`}
+          start={r.start}
+          end={r.end}
+          refName={r.refName}
+          assemblyName={assemblyNames[0]}
+          model={model}
+        />
+      ))}
+    </>
+  ) : null
+})
+
+export default ProteinToGenomeHoverHighlight

package/src/AddHighlightModel/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import HighlightComponents from './HighlightComponents'
+
+export default function AddHighlightModelF(pluginManager: PluginManager) {
+  pluginManager.addToExtensionPoint(
+    'LinearGenomeView-TracksContainerComponent',
+    // @ts-expect-error
+    (
+      rest: React.ReactNode[] = [],
+      { model }: { model: LinearGenomeViewModel },
+    ) => {
+      return [
+        ...rest,
+        <HighlightComponents
+          key="highlight_protein_viewer_protein3d"
+          model={model}
+        />,
+      ]
+    },
+  )
+}

package/src/AddHighlightModel/util.ts

@@ -0,0 +1,17 @@
+import { makeStyles } from 'tss-react/mui'
+
+export const useStyles = makeStyles()({
+  highlight: {
+    height: '100%',
+    background: 'rgba(255,255,0,0.2)',
+    border: '1px solid rgba(50,50,0,0.2)',
+    position: 'absolute',
+    zIndex: 1000,
+    textAlign: 'center',
+    pointerEvents: 'none',
+    overflow: 'hidden',
+  },
+  thinborder: {
+    border: '1px solid black',
+  },
+})

package/src/LaunchProteinView/calculateProteinSequence.ts

@@ -0,0 +1,127 @@
+import { getConf } from '@jbrowse/core/configuration'
+import {
+  Feature,
+  defaultCodonTable,
+  generateCodonTable,
+  getSession,
+  revcom,
+} from '@jbrowse/core/util'
+
+export interface Feat {
+  start: number
+  end: number
+  type: string
+}
+
+export function stitch(subfeats: Feat[], sequence: string) {
+  return subfeats.map(sub => sequence.slice(sub.start, sub.end)).join('')
+}
+
+export function calculateProteinSequence({
+  cds,
+  sequence,
+  codonTable,
+}: {
+  cds: Feat[]
+  sequence: string
+  codonTable: Record<string, string>
+}) {
+  const str = stitch(cds, sequence)
+  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)] || '&'
+  }
+  return protein
+}
+
+export function revlist(list: Feat[], seqlen: number) {
+  return list
+    .map(sub => ({
+      ...sub,
+      start: seqlen - sub.end,
+      end: seqlen - sub.start,
+    }))
+    .sort((a, b) => a.start - b.start)
+}
+
+// filter items if they have the same "ID" or location
+function getItemId(feat: Feat) {
+  return `${feat.start}-${feat.end}`
+}
+
+// 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]),
+  )
+}
+
+export function getProteinSequence({
+  feature,
+  seq,
+}: {
+  seq: string
+  feature: Feature
+}) {
+  // @ts-expect-error
+  const f = feature.toJSON() as {
+    start: number
+    end: number
+    strand: number
+    type: string
+    subfeatures: { start: number; end: number; type: string }[]
+  }
+  const cds = dedupe(
+    f.subfeatures
+      .sort((a, b) => a.start - b.start)
+      .map(sub => ({
+        ...sub,
+        start: sub.start - f.start,
+        end: sub.end - f.start,
+      }))
+      .filter(f => f.type === 'CDS'),
+  )
+
+  return calculateProteinSequence({
+    cds: f.strand === -1 ? revlist(cds, seq.length) : cds,
+    sequence: f.strand === -1 ? revcom(seq) : seq,
+    codonTable: generateCodonTable(defaultCodonTable),
+  })
+}
+
+export async function fetchProteinSeq({
+  feature,
+  view,
+}: {
+  feature: Feature
+  view: { assemblyNames?: string[] } | undefined
+}) {
+  const start = feature.get('start')
+  const end = feature.get('end')
+  const refName = feature.get('refName')
+  const session = getSession(view)
+  const { assemblyManager, rpcManager } = session
+  const [assemblyName] = view?.assemblyNames ?? []
+  const assembly = await assemblyManager.waitForAssembly(assemblyName)
+  if (!assembly) {
+    throw new Error('assembly not found')
+  }
+  const sessionId = 'getSequence'
+  const feats = await rpcManager.call(sessionId, 'CoreGetFeatures', {
+    adapterConfig: getConf(assembly, ['sequence', 'adapter']),
+    sessionId,
+    regions: [
+      {
+        start,
+        end,
+        refName: assembly.getCanonicalRefName(refName),
+        assemblyName,
+      },
+    ],
+  })
+
+  const [feat] = feats as Feature[]
+  const seq = feat?.get('seq') as string | undefined
+  return seq ? getProteinSequence({ seq, feature }) : undefined
+}

package/src/LaunchProteinView/components/AlphaFoldDBSearch.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from 'react'
+import { observer } from 'mobx-react'
+import { Button, DialogActions, DialogContent } 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 {
+  getDisplayName,
+  getGeneDisplayName,
+  getId,
+  getTranscriptDisplayName,
+  getTranscriptFeatures,
+} from '../util'
+import TranscriptSelector from './TranscriptSelector'
+import HelpButton from './HelpButton'
+
+// hooks
+import useMyGeneInfo from '../useMyGeneInfo'
+import useAllSequences from '../useProteinSequences'
+import { useCheckAlphaFoldDBExistence } from './useCheckAlphaFoldDBExistence'
+import AlphaFoldDBSearchStatus from './AlphaFoldDBSearchStatus'
+
+const useStyles = makeStyles()(theme => ({
+  dialogContent: {
+    marginTop: theme.spacing(6),
+    width: '80em',
+  },
+}))
+
+type LGV = LinearGenomeViewModel
+
+const AlphaFoldDBSearch = observer(function AlphaFoldDBSearch({
+  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 LGV
+  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) : '',
+  })
+
+  useEffect(() => {
+    if (userSelection === undefined && seqs !== undefined) {
+      setUserSelection(options.find(f => !!seqs[f.id()])?.id())
+    }
+  }, [options, userSelection, seqs])
+  const {
+    success,
+    loading,
+    error: error3,
+  } = useCheckAlphaFoldDBExistence({
+    foundStructureId,
+  })
+
+  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 ? (
+          <>
+            <TranscriptSelector
+              val={userSelection ?? ''}
+              setVal={setUserSelection}
+              options={options}
+              feature={feature}
+              seqs={seqs}
+            />
+            {selectedTranscript ? (
+              <AlphaFoldDBSearchStatus
+                foundStructureId={foundStructureId}
+                selectedTranscript={selectedTranscript}
+                success={success}
+                loading={loading}
+              />
+            ) : null}
+          </>
+        ) : (
+          <div style={{ margin: 20 }}>
+            <LoadingEllipses message="Loading protein sequences" variant="h6" />
+          </div>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => handleClose()}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          disabled={!foundStructureId || !protein || !selectedTranscript}
+          onClick={() => {
+            session.addView('ProteinView', {
+              type: 'ProteinView',
+              url,
+              seq2: protein,
+              feature: selectedTranscript?.toJSON(),
+              connectedViewId: view.id,
+              displayName: `Protein view ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
+            })
+            handleClose()
+          }}
+        >
+          Submit
+        </Button>
+      </DialogActions>
+    </>
+  )
+})
+
+export default AlphaFoldDBSearch

package/src/LaunchProteinView/components/AlphaFoldDBSearchStatus.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import { Link, Typography } from '@mui/material'
+import { Feature } from '@jbrowse/core/util'
+import { LoadingEllipses } from '@jbrowse/core/ui'
+
+// locals
+import { getDisplayName } from '../util'
+
+export default function AlphaFoldDBSearchStatus({
+  foundStructureId,
+  selectedTranscript,
+  success,
+  loading,
+}: {
+  foundStructureId?: string
+  selectedTranscript: Feature
+  success: boolean
+  loading: boolean
+}) {
+  return !foundStructureId ? (
+    <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}`}
+          >
+            (search for results)
+          </Link>
+        </Typography>
+      )}
+    </>
+  )
+}

package/src/LaunchProteinView/components/HelpButton.tsx

@@ -0,0 +1,23 @@
+import React, { Suspense, lazy, useState } from 'react'
+import { IconButton } from '@mui/material'
+// icons
+import Help from '@mui/icons-material/Help'
+
+// lazies
+const HelpDialog = lazy(() => import('./HelpDialog'))
+
+export default function HelpButton() {
+  const [show, setShow] = useState(false)
+  return (
+    <>
+      <IconButton onClick={() => setShow(true)}>
+        <Help />
+      </IconButton>
+      {show ? (
+        <Suspense fallback={null}>
+          <HelpDialog handleClose={() => setShow(false)} />
+        </Suspense>
+      ) : null}
+    </>
+  )
+}

package/src/LaunchProteinView/components/HelpDialog.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  Divider,
+  Typography,
+  TypographyProps,
+} from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
+
+function Typography2({ children }: TypographyProps) {
+  return <Typography style={{ margin: 4 }}>{children}</Typography>
+}
+export default function HelpDialog({
+  handleClose,
+}: {
+  handleClose: () => void
+}) {
+  return (
+    <Dialog open maxWidth="lg" onClose={handleClose} title="Protein alignment">
+      <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.
+        </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
+        </Typography2>
+      </DialogContent>
+      <Divider />
+      <DialogActions>
+        <Button onClick={() => handleClose()} color="primary">
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}