jbrowse-plugin-protein3d 0.0.2

package/src/LaunchProteinView/util.ts

@@ -0,0 +1,74 @@
+import { Feature } from '@jbrowse/core/util'
+
+export interface Row {
+  gene_id: string
+  gene_id_version: string
+  transcript_id_version: string
+  transcript_id: string
+  pdb_id: string
+  refseq_mrna_predicted_id: string
+  refseq_mrna_id: string
+}
+
+export function getTranscriptFeatures(feature: Feature) {
+  // 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 subfeatures = feature.get('subfeatures') ?? []
+  return subfeatures.some(
+    f => f.get('type') === 'CDS' || f.get('type') === 'exon',
+  )
+    ? [feature]
+    : subfeatures
+}
+
+export function stripTrailingVersion(s?: string) {
+  return s?.replace(/\.[^/.]+$/, '')
+}
+
+export function z(n: number) {
+  return n.toLocaleString('en-US')
+}
+
+export function createMapFromData(data?: Row[]) {
+  const map = new Map<string, string>()
+  if (data) {
+    for (const d of data) {
+      const { pdb_id, transcript_id, refseq_mrna_id, transcript_id_version } = d
+      if (!pdb_id) {
+        continue
+      }
+      if (transcript_id) {
+        map.set(transcript_id, pdb_id)
+      }
+      if (refseq_mrna_id) {
+        map.set(refseq_mrna_id, pdb_id)
+      }
+      if (transcript_id_version) {
+        map.set(transcript_id_version, pdb_id)
+      }
+    }
+  }
+  return map
+}
+
+export function getDisplayName(f: Feature): string {
+  return f.get('id')
+}
+
+export function getId(val?: Feature): string {
+  return val === undefined ? '' : val.id()
+}
+
+export function getTranscriptDisplayName(val?: Feature): string {
+  return val === undefined
+    ? ''
+    : [val.get('name'), val.get('id')].filter(f => !!f).join(' ')
+}
+
+export function getGeneDisplayName(val?: Feature): string {
+  return val === undefined
+    ? ''
+    : [val.get('gene_name') || val.get('name'), val.get('id')]
+        .filter(f => !!f)
+        .join(' ')
+}

package/src/ProteinModelSessionExtension.ts

@@ -0,0 +1,71 @@
+import { addDisposer, types } from 'mobx-state-tree'
+import { autorun } from 'mobx'
+import { ungzip } from 'pako'
+
+// locals
+import { Row } from './LaunchProteinView/util'
+import { abfetch } from './fetchUtils'
+
+const ProteinModelSessionExtension = types
+  .model({})
+  .volatile(() => ({
+    data: undefined as Row[] | undefined,
+    error: undefined as unknown,
+  }))
+  .actions(self => ({
+    setData(a?: Row[]) {
+      self.data = a
+    },
+    setError(e: unknown) {
+      self.error = e
+    },
+  }))
+  .actions(self => {
+    return {
+      afterCreate() {
+        const url = 'https://jbrowse.org/demos/protein3d/mart_export.txt.gz'
+        addDisposer(
+          self,
+          autorun(async () => {
+            try {
+              const ret = new TextDecoder('utf8').decode(
+                ungzip(await abfetch(url)),
+              )
+              const d = ret
+                .split('\n')
+                .slice(1)
+                .filter(line => !!line)
+                .map(line => {
+                  const res = line.split('\t')
+                  const [
+                    gene_id,
+                    gene_id_version,
+                    transcript_id,
+                    transcript_id_version,
+                    pdb_id,
+                    refseq_mrna_id,
+                    refseq_mrna_predicted_id,
+                  ] = res
+
+                  return {
+                    gene_id,
+                    gene_id_version,
+                    transcript_id_version,
+                    transcript_id,
+                    pdb_id,
+                    refseq_mrna_predicted_id,
+                    refseq_mrna_id,
+                  }
+                })
+
+              self.setData(d)
+            } catch (error) {
+              self.setError(error)
+            }
+          }),
+        )
+      },
+    }
+  })
+
+export default ProteinModelSessionExtension

package/src/ProteinView/clearSelection.ts

@@ -0,0 +1,5 @@
+import { PluginContext } from 'molstar/lib/mol-plugin/context'
+
+export default function clearSelection({ plugin }: { plugin: PluginContext }) {
+  plugin?.managers.interactivity.lociSelects.deselectAll()
+}

package/src/ProteinView/components/Header.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+
+// icons
+import MenuIcon from '@mui/icons-material/Menu'
+import Visibility from '@mui/icons-material/Visibility'
+
+// locals
+import { JBrowsePluginProteinViewModel } from '../model'
+import ProteinAlignment from './ProteinAlignment'
+import { LoadingEllipses } from '@jbrowse/core/ui'
+
+const ProteinViewHeader = observer(function ({
+  model,
+}: {
+  model: JBrowsePluginProteinViewModel
+}) {
+  const { alignment, showAlignment } = model
+  return (
+    <div>
+      <InformativeHeaderArea model={model} />
+      {showAlignment && alignment ? (
+        <ProteinAlignment model={model} />
+      ) : (
+        <LoadingEllipses message="Loading pairwise alignment" />
+      )}
+    </div>
+  )
+})
+
+const InformativeHeaderArea = observer(function ({
+  model,
+}: {
+  model: JBrowsePluginProteinViewModel
+}) {
+  const {
+    showAlignment,
+    clickString,
+    hoverString,
+    showHighlight,
+    zoomToBaseLevel,
+  } = model
+  return (
+    <div style={{ display: 'flex' }}>
+      <span>
+        {[
+          clickString ? `Click: ${clickString}` : '',
+          hoverString ? `Hover: ${hoverString}` : '',
+        ].join(' ')}
+      </span>
+      <span style={{ flexGrow: 1 }} />
+      <CascadingMenuButton
+        menuItems={[
+          {
+            label: 'Show pairwise alignment area',
+            type: 'checkbox',
+            checked: showAlignment,
+            icon: Visibility,
+            onClick: () => model.setShowAlignment(!showAlignment),
+          },
+          {
+            label: 'Show pairwise alignment as highlight',
+            type: 'checkbox',
+            checked: showHighlight,
+            icon: Visibility,
+            onClick: () => model.setShowHighlight(!showHighlight),
+          },
+          {
+            label: 'Zoom to base level on click',
+            type: 'checkbox',
+            checked: zoomToBaseLevel,
+            icon: Visibility,
+            onClick: () => model.setZoomToBaseLevel(!zoomToBaseLevel),
+          },
+        ]}
+      >
+        <MenuIcon />
+      </CascadingMenuButton>
+    </div>
+  )
+})
+
+export default ProteinViewHeader

package/src/ProteinView/components/ProteinAlignment.tsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Tooltip, Typography } from '@mui/material'
+
+// locals
+import { JBrowsePluginProteinViewModel } from '../model'
+import ProteinAlignmentHelpButton from './ProteinAlignmentHelpButton'
+import {
+  clickProteinToGenome,
+  hoverProteinToGenome,
+} from '../proteinToGenomeMapping'
+import SplitString from './SplitString'
+
+const ProteinAlignment = observer(function ({
+  model,
+}: {
+  model: JBrowsePluginProteinViewModel
+}) {
+  const {
+    structureSeqHoverPos,
+    alignment,
+    structurePositionToAlignmentMap,
+    alignmentToStructurePosition,
+    showHighlight,
+  } = model
+  const a0 = alignment!.alns[0].seq as string
+  const a1 = alignment!.alns[1].seq as string
+  const con = alignment!.consensus
+  const set = new Set<number>()
+  // eslint-disable-next-line unicorn/no-for-loop
+  for (let i = 0; i < con.length; i++) {
+    const letter = con[i]
+    if (letter === '|') {
+      set.add(i)
+    }
+  }
+
+  const alignmentHoverPos =
+    structureSeqHoverPos !== undefined
+      ? structurePositionToAlignmentMap?.[structureSeqHoverPos]
+      : undefined
+
+  function onMouseOver(alignmentPos: number) {
+    const structureSeqPos = alignmentToStructurePosition[alignmentPos]
+    model.setHoveredPosition({ structureSeqPos })
+    hoverProteinToGenome({ model, structureSeqPos })
+  }
+  function onClick(alignmentPos: number) {
+    const structureSeqPos = alignmentToStructurePosition[alignmentPos]
+    clickProteinToGenome({ model, structureSeqPos }).catch(e => {
+      console.error(e)
+    })
+  }
+  return (
+    <div>
+      <ProteinAlignmentHelpButton model={model} />
+
+      <Typography>
+        Alignment of the protein structure file&apos;s sequence with the
+        selected transcript&apos;s sequence. Green is the aligned portion
+      </Typography>
+      <div
+        style={{
+          fontSize: 9,
+          fontFamily: 'monospace',
+          cursor: 'pointer',
+          margin: 8,
+          paddingBottom: 8,
+          overflow: 'auto',
+          whiteSpace: 'nowrap',
+        }}
+        onMouseLeave={() => {
+          model.setHoveredPosition(undefined)
+          model.clearHoverGenomeHighlights()
+        }}
+      >
+        <div>
+          <Tooltip title="This is the sequence of the protein from the structure file">
+            <span>STRUCT&nbsp;</span>
+          </Tooltip>
+          <SplitString
+            str={a0}
+            showHighlight={showHighlight}
+            col={alignmentHoverPos}
+            set={set}
+            onMouseOver={onMouseOver}
+            onClick={onClick}
+          />
+        </div>
+        <div>
+          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+          <SplitString
+            showHighlight={showHighlight}
+            str={con}
+            col={alignmentHoverPos}
+            set={set}
+            onMouseOver={onMouseOver}
+            onClick={onClick}
+          />
+        </div>
+        <div>
+          <Tooltip title="This is the sequence of the protein from the reference genome transcript">
+            <span>GENOME&nbsp;</span>
+          </Tooltip>
+          <SplitString
+            str={a1}
+            col={alignmentHoverPos}
+            showHighlight={showHighlight}
+            set={set}
+            onMouseOver={onMouseOver}
+            onClick={onClick}
+          />
+        </div>
+      </div>
+    </div>
+  )
+})
+
+export default ProteinAlignment

package/src/ProteinView/components/ProteinAlignmentHelpButton.tsx

@@ -0,0 +1,33 @@
+import React, { lazy } from 'react'
+import { IconButton } from '@mui/material'
+import { getSession } from '@jbrowse/core/util'
+
+// locals
+import { JBrowsePluginProteinViewModel } from '../model'
+
+// icons
+import Help from '@mui/icons-material/Help'
+
+const ProteinAlignmentHelpDialog = lazy(
+  () => import('./ProteinAlignmentHelpDialog'),
+)
+
+export default function ProteinAlignmentHelpButton({
+  model,
+}: {
+  model: JBrowsePluginProteinViewModel
+}) {
+  return (
+    <IconButton
+      style={{ float: 'right' }}
+      onClick={() =>
+        getSession(model).queueDialog(handleClose => [
+          ProteinAlignmentHelpDialog,
+          { handleClose },
+        ])
+      }
+    >
+      <Help />
+    </IconButton>
+  )
+}

package/src/ProteinView/components/ProteinAlignmentHelpDialog.tsx

@@ -0,0 +1,59 @@
+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,
+        marginBottom: 12,
+      }}
+    >
+      {children}
+    </Typography>
+  )
+}
+export default function ProteinAlignmentHelpDialog({
+  handleClose,
+}: {
+  handleClose: () => void
+}) {
+  return (
+    <Dialog open maxWidth="lg" onClose={handleClose} title="Protein alignment">
+      <DialogContent>
+        <Typography2>
+          This panel shows the computed alignment of the reference genome
+          sequence to the structure sequence. The structure file (PDB file,
+          mmCIF file, etc) has a stored representation of the e.g. amino acid
+          sequence but the sequence in the structure file can differ from the
+          sequence from the gene on the genome browser
+        </Typography2>
+        <Typography2>
+          In order to resolve this, we align the two sequences together (using
+          EMBOSS needle) to get alignment of the genome&apos;s representation of
+          the protein and the structure file&apos;s representation of the
+          protein.
+        </Typography2>
+        <Typography2>
+          If you need a 100% fidelity protein, you can do a folding with e.g.
+          AlphaFold to make sure the structure you are using matches exactly the
+          sequence of the transcript
+        </Typography2>
+      </DialogContent>
+      <Divider />
+      <DialogActions>
+        <Button onClick={() => handleClose()} color="primary">
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

package/src/ProteinView/components/ProteinView.tsx

@@ -0,0 +1,131 @@
+import React, { useEffect } from 'react'
+import { observer } from 'mobx-react'
+import { ErrorMessage } from '@jbrowse/core/ui'
+import { PluginContext } from 'molstar/lib/mol-plugin/context'
+
+// locals
+import { JBrowsePluginProteinViewModel } from '../model'
+import Header from './Header'
+
+// hooks
+import useProteinView from '../useProteinView'
+import useProteinViewClickBehavior from '../useProteinViewClickBehavior'
+import useProteinViewHoverBehavior from '../useProteinViewHoverBehavior'
+
+// utils
+import selectResidue from '../selectResidue'
+import highlightResidue from '../highlightResidue'
+import clearSelection from '../clearSelection'
+
+// css
+import css from '../css/molstar'
+
+if (document?.head) {
+  const style = document.createElement('style')
+  style.append(css)
+  document.head?.append(style)
+}
+
+const ProteinView = observer(function ({
+  model,
+}: {
+  model: JBrowsePluginProteinViewModel
+}) {
+  const { url, data, showControls } = model
+  const { plugin, seq, parentRef, error } = useProteinView({
+    url,
+    data,
+    showControls,
+  })
+  return error ? (
+    <ErrorMessage error={error} />
+  ) : (
+    <ProteinViewContainer
+      model={model}
+      plugin={plugin}
+      seq={seq}
+      parentRef={parentRef}
+    />
+  )
+})
+
+const ProteinViewContainer = observer(function ({
+  model,
+  plugin,
+  seq,
+  parentRef,
+}: {
+  model: JBrowsePluginProteinViewModel
+  plugin?: PluginContext
+  seq?: string
+  parentRef?: React.RefObject<HTMLDivElement>
+}) {
+  const {
+    width,
+    height,
+    structureSeqToTranscriptSeqPosition,
+    seq2,
+    structureSeqHoverPos,
+    showHighlight,
+    alignment,
+  } = model
+
+  const { error } = useProteinViewClickBehavior({ plugin, model })
+  useProteinViewHoverBehavior({ plugin, model })
+
+  const structure =
+    plugin?.managers.structure.hierarchy.current.structures[0]?.cell.obj?.data
+
+  useEffect(() => {
+    model.setSeqs(seq, seq2)
+  }, [seq, model, seq2])
+
+  useEffect(() => {
+    if (!plugin || !structureSeqToTranscriptSeqPosition || !structure) {
+      return
+    }
+    if (showHighlight) {
+      for (const coord of Object.keys(structureSeqToTranscriptSeqPosition)) {
+        selectResidue({
+          structure,
+          plugin,
+          selectedResidue: +coord + 1,
+        })
+      }
+    } else {
+      clearSelection({ plugin })
+    }
+  }, [plugin, structure, showHighlight, structureSeqToTranscriptSeqPosition])
+
+  useEffect(() => {
+    if (!plugin || !structure || structureSeqHoverPos === undefined) {
+      return
+    }
+    if (structureSeqHoverPos !== undefined) {
+      highlightResidue({
+        structure,
+        plugin,
+        selectedResidue: structureSeqHoverPos,
+      })
+    } else {
+      console.warn('not found')
+    }
+  }, [plugin, structure, structureSeqHoverPos])
+
+  return (
+    <div style={{ background: !alignment ? '#ccc' : undefined }}>
+      {error ? <ErrorMessage error={error} /> : null}
+      <Header model={model} />
+      <div
+        ref={parentRef}
+        style={{
+          position: 'relative',
+          width,
+          height,
+        }}
+      />
+    </div>
+  )
+})
+
+export default ProteinView

package/src/ProteinView/components/SplitString.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+export default function SplitString({
+  str,
+  col,
+  set,
+  onMouseOver,
+  onClick,
+  showHighlight,
+}: {
+  str: string
+  col?: number
+  set?: Set<number>
+  onMouseOver?: (arg: number) => void
+  onClick?: (arg: number) => void
+  showHighlight: boolean
+}) {
+  return str.split('').map((d, i) => (
+    <span
+      key={`${d}-${i}`}
+      onMouseOver={() => onMouseOver?.(i)}
+      onClick={() => onClick?.(i)}
+      style={{
+        background:
+          col !== undefined && i === col
+            ? '#f69'
+            : set?.has(i) && showHighlight
+              ? '#33ff19'
+              : undefined,
+      }}
+    >
+      {d === ' ' ? <>&nbsp;</> : d}
+    </span>
+  ))
+}