jbrowse-plugin-protein3d 0.0.2

package/src/ProteinView/genomeToProtein.ts

@@ -0,0 +1,21 @@
+import { getSession } from '@jbrowse/core/util'
+import { checkHovered } from './util'
+import { JBrowsePluginProteinViewModel } from './model'
+
+export function genomeToProtein({
+  model,
+}: {
+  model: JBrowsePluginProteinViewModel
+}): number | undefined {
+  const { hovered } = getSession(model)
+  const { genomeToTranscriptSeqMapping, connectedView } = model
+  if (
+    !connectedView?.initialized ||
+    !genomeToTranscriptSeqMapping ||
+    !checkHovered(hovered)
+  ) {
+    return undefined
+  }
+
+  return genomeToTranscriptSeqMapping.g2p[hovered.hoverPosition.coord]
+}

package/src/ProteinView/highlightResidue.ts

@@ -0,0 +1,23 @@
+import { PluginContext } from 'molstar/lib/mol-plugin/context'
+import { Structure, StructureSelection } from 'molstar/lib/mol-model/structure'
+import { getMolstarStructureSelection } from './util'
+
+export default function highlightResidue({
+  structure,
+  selectedResidue,
+  plugin,
+}: {
+  structure: Structure
+  selectedResidue: number
+  plugin: PluginContext
+}) {
+  const sel = getMolstarStructureSelection({
+    structure,
+    selectedResidue: selectedResidue + 1,
+  })
+  const loci = StructureSelection.toLociWithSourceUnits(sel)
+  plugin?.managers.interactivity.lociHighlights.clearHighlights()
+  plugin?.managers.interactivity.lociHighlights.highlight({
+    loci,
+  })
+}

package/src/ProteinView/index.ts

@@ -0,0 +1,18 @@
+import { lazy } from 'react'
+import PluginManager from '@jbrowse/core/PluginManager'
+import { ViewType } from '@jbrowse/core/pluggableElementTypes'
+
+import stateModelF from './model'
+
+const ReactComponent = lazy(() => import('./components/ProteinView'))
+
+export default function ProteinViewF(pluginManager: PluginManager) {
+  pluginManager.addViewType(() => {
+    return new ViewType({
+      name: 'ProteinView',
+      displayName: 'Protein view',
+      stateModel: stateModelF(),
+      ReactComponent,
+    })
+  })
+}

package/src/ProteinView/launchRemotePairwiseAlignment.ts

@@ -0,0 +1,113 @@
+import { textfetch, timeout } from '../fetchUtils'
+import { parsePairwise } from 'clustal-js'
+
+const base = `https://www.ebi.ac.uk/Tools/services/rest`
+
+async function runEmbossMatcher({
+  seq1,
+  seq2,
+  onProgress,
+}: {
+  seq1: string
+  seq2: string
+  onProgress: (arg: string) => void
+}) {
+  const jobId = await textfetch(`${base}/emboss_matcher/run`, {
+    method: 'POST',
+    body: new URLSearchParams({
+      email: 'colin.diesh@gmail.com',
+      asequence: `>a\n${seq1}`,
+      bsequence: `>b\n${seq2}`,
+    }),
+  })
+  await wait({
+    jobId,
+    algorithm: 'emboss_matcher',
+    onProgress,
+  })
+  const ret = await textfetch(`${base}/emboss_matcher/result/${jobId}/aln`)
+  return {
+    alignment: parsePairwise(
+      ret
+        .split('\n')
+        .filter(line => !line.startsWith('#'))
+        .join('\n'),
+    ),
+  }
+}
+
+async function runEmbossNeedle({
+  seq1,
+  seq2,
+  onProgress,
+}: {
+  seq1: string
+  seq2: string
+  onProgress: (arg: string) => void
+}) {
+  const jobId = await textfetch(`${base}/emboss_needle/run`, {
+    method: 'POST',
+    body: new URLSearchParams({
+      email: 'colin.diesh@gmail.com',
+      asequence: `>a\n${seq1}`,
+      bsequence: `>b\n${seq2}`,
+    }),
+  })
+  await wait({
+    jobId,
+    algorithm: 'emboss_needle',
+    onProgress,
+  })
+
+  const ret = await textfetch(`${base}/emboss_needle/result/${jobId}/aln`)
+  return {
+    alignment: parsePairwise(
+      ret
+        .split('\n')
+        .filter(line => !line.startsWith('#'))
+        .join('\n'),
+    ),
+  }
+}
+async function wait({
+  onProgress,
+  jobId,
+  algorithm,
+}: {
+  jobId: string
+  algorithm: string
+  onProgress: (arg: string) => void
+}) {
+  while (true) {
+    for (let i = 0; i < 10; i++) {
+      await timeout(1000)
+      onProgress(`Re-checking alignment to PDB seq1,seq2 in... ${10 - i}`)
+    }
+    const result = await textfetch(`${base}/${algorithm}/status/${jobId}`)
+
+    if (result === 'FINISHED') {
+      break
+    }
+  }
+}
+
+export async function launchPairwiseAlignment({
+  algorithm,
+  seq1,
+  seq2,
+  onProgress,
+}: {
+  algorithm: string
+  seq1: string
+  seq2: string
+  onProgress: (arg: string) => void
+}) {
+  onProgress(`Launching ${algorithm} MSA...`)
+  if (algorithm === 'emboss_matcher') {
+    return runEmbossMatcher({ seq1, seq2, onProgress })
+  } else if (algorithm === 'emboss_needle') {
+    return runEmbossNeedle({ seq1, seq2, onProgress })
+  } else {
+    throw new Error('unknown algorithm')
+  }
+}

package/src/ProteinView/loadStructureFromData.ts

@@ -0,0 +1,48 @@
+import { PluginContext } from 'molstar/lib/mol-plugin/context'
+import { BuiltInTrajectoryFormat } from 'molstar/lib/mol-plugin-state/formats/trajectory'
+import { StructureRepresentationPresetProvider } from 'molstar/lib/mol-plugin-state/builder/structure/representation-preset'
+
+export interface LoadStructureOptions {
+  representationParams?: StructureRepresentationPresetProvider.CommonParams
+}
+
+// adapted from https://github.com/molstar/molstar/blob/ab4130d42d0ab2591f62460292ade0203207d4d2/src/apps/viewer/app.ts#L255C1-L259C6
+export async function loadStructureFromData({
+  data,
+  format = 'pdb',
+  options,
+  plugin,
+}: {
+  data: string
+  format?: BuiltInTrajectoryFormat
+  options?: LoadStructureOptions & { label?: string; dataLabel?: string }
+  plugin: PluginContext
+}) {
+  await plugin.clear()
+
+  const _data = await plugin.builders.data.rawData({
+    data,
+    label: options?.dataLabel,
+  })
+
+  const trajectory = await plugin.builders.structure.parseTrajectory(
+    _data,
+    format,
+  )
+  const model = await plugin.builders.structure.createModel(trajectory)
+  const seq = model.obj?.data.sequence.sequences[0].sequence.label
+    .toArray()
+    // @ts-expect-error
+    .join('')
+
+  await plugin.builders.structure.hierarchy.applyPreset(
+    trajectory,
+    'all-models',
+    {
+      useDefaultIfSingleModel: true,
+      representationPresetParams: options?.representationParams,
+    },
+  )
+
+  return { seq: seq as string }
+}

package/src/ProteinView/loadStructureFromURL.ts

@@ -0,0 +1,50 @@
+import { PluginContext } from 'molstar/lib/mol-plugin/context'
+import { BuiltInTrajectoryFormat } from 'molstar/lib/mol-plugin-state/formats/trajectory'
+import { StructureRepresentationPresetProvider } from 'molstar/lib/mol-plugin-state/builder/structure/representation-preset'
+
+export interface LoadStructureOptions {
+  representationParams?: StructureRepresentationPresetProvider.CommonParams
+}
+
+// adapted from https://github.com/molstar/molstar/blob/ab4130d42d0ab2591f62460292ade0203207d4d2/src/apps/viewer/app.ts#L230
+export async function loadStructureFromURL({
+  url,
+  format = 'mmcif',
+  isBinary,
+  options,
+  plugin,
+}: {
+  url: string
+  format?: BuiltInTrajectoryFormat
+  isBinary?: boolean
+  options?: LoadStructureOptions & { label?: string }
+  plugin: PluginContext
+}) {
+  await plugin.clear()
+
+  const data = await plugin.builders.data.download(
+    { url, isBinary },
+    { state: { isGhost: true } },
+  )
+
+  const trajectory = await plugin.builders.structure.parseTrajectory(
+    data,
+    format,
+  )
+  const model = await plugin.builders.structure.createModel(trajectory)
+  const seq = model.obj?.data.sequence.sequences[0].sequence.label
+    .toArray()
+    // @ts-expect-error
+    .join('')
+
+  await plugin.builders.structure.hierarchy.applyPreset(
+    trajectory,
+    'all-models',
+    {
+      useDefaultIfSingleModel: true,
+      representationPresetParams: options?.representationParams,
+    },
+  )
+
+  return { seq: seq as string }
+}

package/src/ProteinView/model.ts

@@ -0,0 +1,384 @@
+import { autorun } from 'mobx'
+import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes'
+import { ElementId, Region } from '@jbrowse/core/util/types/mst'
+import { Region as IRegion } from '@jbrowse/core/util/types'
+import { Instance, addDisposer, cast, types } from 'mobx-state-tree'
+import {
+  SimpleFeature,
+  SimpleFeatureSerialized,
+  getSession,
+} from '@jbrowse/core/util'
+import { parsePairwise } from 'clustal-js'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import { checkHovered, invertMap, toStr } from './util'
+import { launchPairwiseAlignment } from './launchRemotePairwiseAlignment'
+import {
+  structureSeqVsTranscriptSeqMap,
+  genomeToTranscriptSeqMapping,
+  structurePositionToAlignmentMap,
+  transcriptPositionToAlignmentMap,
+} from '../mappings'
+
+type LGV = LinearGenomeViewModel
+type MaybeLGV = LGV | undefined
+
+/**
+ * #stateModel Protein3dViewPlugin
+ * extends
+ * - BaseViewModel
+ */
+function stateModelFactory() {
+  return types
+    .compose(
+      BaseViewModel,
+      types.model({
+        /**
+         * #property
+         */
+        id: ElementId,
+        /**
+         * #property
+         */
+        type: types.literal('ProteinView'),
+        /**
+         * #property
+         * url to structure file
+         */
+        url: types.maybe(types.string),
+        /**
+         * #property
+         * full string for structure data
+         */
+        data: types.maybe(types.string),
+        /**
+         * #property
+         */
+        clickGenomeHighlights: types.array(Region),
+        /**
+         * #property
+         */
+        hoverGenomeHighlights: types.array(Region),
+        /**
+         * #property
+         */
+        showControls: true,
+        /**
+         * #property
+         */
+        height: types.optional(types.number, 650),
+        /**
+         * #property
+         */
+        feature: types.frozen<SimpleFeatureSerialized>(),
+        /**
+         * #property
+         */
+        seq1: types.maybe(types.string),
+        /**
+         * #property
+         */
+        seq2: types.maybe(types.string),
+        /**
+         * #property
+         */
+        alignment: types.frozen<ReturnType<typeof parsePairwise> | undefined>(),
+
+        /**
+         * #property
+         */
+        connectedViewId: types.maybe(types.string),
+        /**
+         * #property
+         */
+        showHighlight: true,
+        /**
+         * #property
+         */
+        zoomToBaseLevel: false,
+        /**
+         * #property
+         */
+        showAlignment: true,
+      }),
+    )
+    .volatile(() => ({
+      /**
+       * #volatile
+       */
+      error: undefined as unknown,
+      /**
+       * #volatile
+       */
+      clickPosition: undefined as
+        | {
+            structureSeqPos: number
+            code: string
+            chain: string
+          }
+        | undefined,
+      /**
+       * #volatile
+       */
+      hoverPosition: undefined as
+        | {
+            structureSeqPos: number
+            code?: string
+            chain?: string
+          }
+        | undefined,
+      /**
+       * #volatile
+       */
+      progress: '',
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get connectedView() {
+        const { views } = getSession(self)
+        return views.find(f => f.id === self.connectedViewId) as MaybeLGV
+      },
+    }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      setShowAlignment(f: boolean) {
+        self.showAlignment = f
+      },
+      /**
+       * #action
+       */
+      setHoveredPosition(arg?: {
+        structureSeqPos: number
+        chain?: string
+        code?: string
+      }) {
+        self.hoverPosition = arg
+      },
+      /**
+       * #action
+       */
+      setSeqs(str1?: string, str2?: string) {
+        self.seq1 = str1
+        self.seq2 = str2
+      },
+      /**
+       * #action
+       */
+      setShowControls(arg: boolean) {
+        self.showControls = arg
+      },
+      /**
+       * #action
+       */
+      setProgress(str: string) {
+        self.progress = str
+      },
+      /**
+       * #action
+       */
+      setClickedPosition(arg?: {
+        structureSeqPos: number
+        code: string
+        chain: string
+      }) {
+        self.clickPosition = arg
+      },
+      /**
+       * #action
+       */
+      setClickGenomeHighlights(r: IRegion[]) {
+        self.clickGenomeHighlights = cast(r)
+      },
+      /**
+       * #action
+       */
+      clearClickGenomeHighlights() {
+        self.clickGenomeHighlights = cast([])
+      },
+      /**
+       * #action
+       */
+      setHoverGenomeHighlights(r: IRegion[]) {
+        self.hoverGenomeHighlights = cast(r)
+      },
+      /**
+       * #action
+       */
+      clearHoverGenomeHighlights() {
+        self.hoverGenomeHighlights = cast([])
+      },
+      /**
+       * #action
+       */
+      setError(e: unknown) {
+        self.error = e
+      },
+      /**
+       * #action
+       */
+      setAlignment(r?: ReturnType<typeof parsePairwise>) {
+        self.alignment = r
+      },
+      /**
+       * #action
+       */
+      setShowHighlight(arg: boolean) {
+        self.showHighlight = arg
+      },
+      /**
+       * #action
+       */
+      setZoomToBaseLevel(arg: boolean) {
+        self.zoomToBaseLevel = arg
+      },
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get structureSeqToTranscriptSeqPosition() {
+        return self.alignment
+          ? structureSeqVsTranscriptSeqMap(self.alignment)
+              .structureSeqToTranscriptSeqPosition
+          : undefined
+      },
+      /**
+       * #getter
+       */
+      get transcriptSeqToStructureSeqPosition() {
+        return self.alignment
+          ? structureSeqVsTranscriptSeqMap(self.alignment)
+              .transcriptSeqToStructureSeqPosition
+          : undefined
+      },
+      /**
+       * #getter
+       */
+      get structurePositionToAlignmentMap() {
+        return self.alignment
+          ? structurePositionToAlignmentMap(self.alignment)
+          : undefined
+      },
+      /**
+       * #getter
+       */
+      get transcriptPositionToAlignmentMap() {
+        return self.alignment
+          ? transcriptPositionToAlignmentMap(self.alignment)
+          : undefined
+      },
+      /**
+       * #getter
+       */
+      get alignmentToTranscriptPosition() {
+        return this.transcriptPositionToAlignmentMap
+          ? invertMap(this.transcriptPositionToAlignmentMap)
+          : undefined
+      },
+      /**
+       * #getter
+       */
+      get alignmentToStructurePosition() {
+        return this.structurePositionToAlignmentMap
+          ? invertMap(this.structurePositionToAlignmentMap)
+          : undefined
+      },
+      /**
+       * #getter
+       */
+      get clickString() {
+        const r = self.clickPosition
+        return r ? toStr(r) : ''
+      },
+      /**
+       * #getter
+       */
+      get hoverString() {
+        const r = self.hoverPosition
+        return r ? toStr(r) : ''
+      },
+      /**
+       * #getter
+       */
+      get genomeToTranscriptSeqMapping() {
+        return self.feature
+          ? genomeToTranscriptSeqMapping(new SimpleFeature(self.feature))
+          : undefined
+      },
+      /**
+       * #getter
+       */
+      get structureSeqHoverPos(): number | undefined {
+        return self.hoverPosition?.structureSeqPos
+      },
+    }))
+    .actions(self => ({
+      afterAttach() {
+        // pairwise align transcript sequence to structure sequence
+        addDisposer(
+          self,
+          autorun(async () => {
+            try {
+              const { seq1, seq2 } = self
+              if (!!self.alignment || !seq1 || !seq2) {
+                return
+              }
+              const alignment = await launchPairwiseAlignment({
+                seq1,
+                seq2,
+                algorithm: 'emboss_needle',
+                onProgress: arg => self.setProgress(arg),
+              })
+              self.setAlignment(alignment.alignment)
+            } catch (e) {
+              console.error(e)
+              self.setError(e)
+            }
+          }),
+        )
+
+        // convert hover over the genome to structure position
+        addDisposer(
+          self,
+          autorun(() => {
+            const { hovered } = getSession(self)
+            const {
+              transcriptSeqToStructureSeqPosition,
+              genomeToTranscriptSeqMapping,
+              connectedView,
+            } = self
+            if (
+              !connectedView?.initialized ||
+              !genomeToTranscriptSeqMapping ||
+              !checkHovered(hovered)
+            ) {
+              return undefined
+            }
+
+            const pos =
+              genomeToTranscriptSeqMapping.g2p[hovered.hoverPosition.coord]
+            const c0 = pos
+              ? transcriptSeqToStructureSeqPosition?.[pos]
+              : undefined
+            if (c0 !== undefined) {
+              self.setHoveredPosition({
+                structureSeqPos: c0,
+              })
+            }
+          }),
+        )
+      },
+    }))
+}
+
+export default stateModelFactory
+export type JBrowsePluginProteinViewStateModel = ReturnType<
+  typeof stateModelFactory
+>
+export type JBrowsePluginProteinViewModel =
+  Instance<JBrowsePluginProteinViewStateModel>

package/src/ProteinView/proteinAbbreviationMapping.ts

@@ -0,0 +1,24 @@
+export const proteinAbbreviationMapping = Object.fromEntries(
+  [
+    { name: 'alanine', abbreviation: 'Ala', singleLetterCode: 'A' },
+    { name: 'arginine', abbreviation: 'Arg', singleLetterCode: 'R' },
+    { name: 'asparagine', abbreviation: 'Asn', singleLetterCode: 'N' },
+    { name: 'aspartic acid', abbreviation: 'Asp', singleLetterCode: 'D' },
+    { name: 'cysteine', abbreviation: 'Cys', singleLetterCode: 'C' },
+    { name: 'glutamic acid', abbreviation: 'Glu', singleLetterCode: 'E' },
+    { name: 'glutamine', abbreviation: 'Gln', singleLetterCode: 'Q' },
+    { name: 'glycine', abbreviation: 'Gly', singleLetterCode: 'G' },
+    { name: 'histidine', abbreviation: 'His', singleLetterCode: 'H' },
+    { name: 'isoleucine', abbreviation: 'Ile', singleLetterCode: 'I' },
+    { name: 'leucine', abbreviation: 'Leu', singleLetterCode: 'L' },
+    { name: 'lysine', abbreviation: 'Lys', singleLetterCode: 'K' },
+    { name: 'methionine', abbreviation: 'Met', singleLetterCode: 'M' },
+    { name: 'phenylalanine', abbreviation: 'Phe', singleLetterCode: 'F' },
+    { name: 'proline', abbreviation: 'Pro', singleLetterCode: 'P' },
+    { name: 'serine', abbreviation: 'Ser', singleLetterCode: 'S' },
+    { name: 'threonine', abbreviation: 'Thr', singleLetterCode: 'T' },
+    { name: 'tryptophan', abbreviation: 'Trp', singleLetterCode: 'W' },
+    { name: 'tyrosine', abbreviation: 'Tyr', singleLetterCode: 'Y' },
+    { name: 'valine', abbreviation: 'Val', singleLetterCode: 'V' },
+  ].map(r => [r.abbreviation.toUpperCase(), r]),
+)