jbrowse-plugin-protein3d 0.0.2

package/src/ProteinView/proteinToGenomeMapping.ts

@@ -0,0 +1,99 @@
+import { getSession } from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import { JBrowsePluginProteinViewModel } from './model'
+
+export function proteinToGenomeMapping({
+  model,
+  structureSeqPos,
+}: {
+  structureSeqPos: number
+  model: JBrowsePluginProteinViewModel
+}) {
+  const {
+    genomeToTranscriptSeqMapping,
+    alignment,
+    structureSeqToTranscriptSeqPosition,
+  } = model
+  if (!genomeToTranscriptSeqMapping || !alignment) {
+    return undefined
+  }
+  const { p2g, strand } = genomeToTranscriptSeqMapping
+  const r1 = structureSeqToTranscriptSeqPosition?.[structureSeqPos]
+  if (r1 === undefined) {
+    return undefined
+  }
+  const s0 = p2g[r1]
+  if (s0 === undefined) {
+    return undefined
+  }
+  const start = s0
+  const end = start + 3 * strand
+  return [Math.min(start, end), Math.max(start, end)]
+}
+
+export async function clickProteinToGenome({
+  model,
+  structureSeqPos,
+}: {
+  structureSeqPos: number
+  model: JBrowsePluginProteinViewModel
+}) {
+  const session = getSession(model)
+  const result = proteinToGenomeMapping({ structureSeqPos, model })
+  const { genomeToTranscriptSeqMapping, zoomToBaseLevel } = model
+  const { assemblyManager } = session
+  if (!genomeToTranscriptSeqMapping || result === undefined) {
+    return undefined
+  }
+  const [s1, s2] = result
+  const lgv = session.views[0] as LinearGenomeViewModel
+  const { strand, refName } = genomeToTranscriptSeqMapping
+  model.setClickGenomeHighlights([
+    {
+      assemblyName: 'hg38',
+      refName,
+      start: s1,
+      end: s2,
+    },
+  ])
+
+  if (!zoomToBaseLevel) {
+    const assembly = assemblyManager.get(lgv.assemblyNames[0])
+    const r = assembly?.getCanonicalRefName(refName) ?? refName
+    lgv.centerAt(s1, r)
+  } else {
+    await lgv.navToLocString(
+      `${refName}:${s1}-${s2}${strand === -1 ? '[rev]' : ''}`,
+    )
+  }
+}
+
+export function hoverProteinToGenome({
+  model,
+  structureSeqPos,
+}: {
+  structureSeqPos: number
+  model: JBrowsePluginProteinViewModel
+}) {
+  const session = getSession(model)
+  const result = proteinToGenomeMapping({ structureSeqPos, model })
+  const { genomeToTranscriptSeqMapping } = model
+  if (!genomeToTranscriptSeqMapping || !result) {
+    return
+  }
+  if (!result) {
+    session.notify('Genome position not found')
+  }
+  const [s1, s2] = result
+  const { refName } = genomeToTranscriptSeqMapping
+  model.setHoverGenomeHighlights([
+    {
+      assemblyName: 'hg38',
+      refName,
+      start: s1,
+      end: s2,
+    },
+  ])
+}

package/src/ProteinView/selectResidue.ts

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

package/src/ProteinView/useProteinView.ts

@@ -0,0 +1,70 @@
+import { useState, useEffect, useRef } from 'react'
+// molstar
+import { PluginContext } from 'molstar/lib/mol-plugin/context'
+import { createPluginUI } from 'molstar/lib/mol-plugin-ui'
+import { renderReact18 } from 'molstar/lib/mol-plugin-ui/react18'
+import { DefaultPluginUISpec } from 'molstar/lib/mol-plugin-ui/spec'
+
+// locals
+import { loadStructureFromURL } from './loadStructureFromURL'
+import { loadStructureFromData } from './loadStructureFromData'
+
+export default function useProteinView({
+  url,
+  data,
+  showControls,
+}: {
+  url?: string
+  data?: string
+  showControls: boolean
+}) {
+  const parentRef = useRef<HTMLDivElement>(null)
+  const [plugin, setPlugin] = useState<PluginContext>()
+  const [error, setError] = useState<unknown>()
+  const [seq, setSeq] = useState('')
+
+  useEffect(() => {
+    let p: PluginContext | undefined
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        if (!parentRef.current) {
+          return
+        }
+        const d = document.createElement('div')
+        parentRef.current.append(d)
+        p = await createPluginUI({
+          target: d,
+          render: renderReact18,
+          spec: {
+            ...DefaultPluginUISpec(),
+            layout: {
+              initial: {
+                controlsDisplay: 'reactive',
+                showControls,
+              },
+            },
+          },
+        })
+        await p.initialized
+        setPlugin(p)
+
+        if (url) {
+          const { seq } = await loadStructureFromURL({ url, plugin: p })
+          setSeq(seq)
+        } else if (data) {
+          const { seq } = await loadStructureFromData({ data, plugin: p })
+          setSeq(seq)
+        }
+      } catch (e) {
+        console.error(e)
+        setError(e)
+      }
+    })()
+    return () => {
+      p?.unmount()
+    }
+  }, [url, data, showControls])
+
+  return { parentRef, error, plugin, seq }
+}

package/src/ProteinView/useProteinViewClickBehavior.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+import { getSession } from '@jbrowse/core/util'
+import { PluginContext } from 'molstar/lib/mol-plugin/context'
+
+// local
+import { JBrowsePluginProteinViewModel } from './model'
+import { clickProteinToGenome } from './proteinToGenomeMapping'
+import {
+  StructureElement,
+  StructureProperties as Props,
+} from 'molstar/lib/mol-model/structure'
+
+export default function useProteinViewClickActionBehavior({
+  plugin,
+  model,
+}: {
+  plugin?: PluginContext
+  model: JBrowsePluginProteinViewModel
+}) {
+  const [error, setError] = useState<unknown>()
+  const session = getSession(model)
+  useEffect(() => {
+    if (!plugin) {
+      return
+    }
+    plugin.behaviors.interaction.click.subscribe(event => {
+      if (StructureElement.Loci.is(event.current.loci)) {
+        const loc = StructureElement.Loci.getFirstLocation(event.current.loci)
+        if (loc) {
+          const pos = Props.residue.auth_seq_id(loc)
+          const code = Props.atom.label_comp_id(loc)
+          const chain = Props.chain.auth_asym_id(loc)
+          model.setHoveredPosition({
+            structureSeqPos: pos - 1,
+            code,
+            chain,
+          })
+
+          clickProteinToGenome({ model, structureSeqPos: pos - 1 }).catch(e => {
+            console.error(e)
+            setError(e)
+          })
+        }
+      }
+    })
+  }, [plugin, session, model])
+  return { error }
+}

package/src/ProteinView/useProteinViewHoverBehavior.ts

@@ -0,0 +1,44 @@
+import { useEffect } from 'react'
+import { getSession } from '@jbrowse/core/util'
+import { PluginContext } from 'molstar/lib/mol-plugin/context'
+
+// local
+import { JBrowsePluginProteinViewModel } from './model'
+import {
+  StructureElement,
+  StructureProperties as Props,
+} from 'molstar/lib/mol-model/structure'
+import { hoverProteinToGenome } from './proteinToGenomeMapping'
+
+export default function useProteinViewClickActionBehavior({
+  plugin,
+  model,
+}: {
+  plugin?: PluginContext
+  model: JBrowsePluginProteinViewModel
+}) {
+  const session = getSession(model)
+  useEffect(() => {
+    if (!plugin) {
+      return
+    }
+    plugin.behaviors.interaction.hover.subscribe(event => {
+      if (StructureElement.Loci.is(event.current.loci)) {
+        const loc = StructureElement.Loci.getFirstLocation(event.current.loci)
+        if (loc) {
+          // example code for this label
+          // https://github.com/molstar/molstar/blob/60550cfea1f62a50a764d5714307d6d1049be71d/src/mol-theme/label.ts#L255-L264
+          const structureSeqPos = Props.residue.auth_seq_id(loc)
+          const code = Props.atom.label_comp_id(loc)
+          const chain = Props.chain.auth_asym_id(loc)
+          model.setHoveredPosition({
+            structureSeqPos: structureSeqPos - 1,
+            code,
+            chain,
+          })
+          hoverProteinToGenome({ model, structureSeqPos: structureSeqPos - 1 })
+        }
+      }
+    })
+  }, [plugin, session, model])
+}

package/src/ProteinView/util.ts

@@ -0,0 +1,56 @@
+import { Feature } from '@jbrowse/core/util'
+import { Structure } from 'molstar/lib/mol-model/structure'
+import { Script } from 'molstar/lib/mol-script/script'
+import { proteinAbbreviationMapping } from './proteinAbbreviationMapping'
+
+export function checkHovered(hovered: unknown): hovered is {
+  hoverFeature: Feature
+  hoverPosition: { coord: number; refName: string }
+} {
+  return (
+    !!hovered &&
+    typeof hovered == 'object' &&
+    'hoverFeature' in hovered &&
+    'hoverPosition' in hovered
+  )
+}
+
+export function getMolstarStructureSelection({
+  structure,
+  selectedResidue,
+}: {
+  structure: Structure
+  selectedResidue: number
+}) {
+  return Script.getStructureSelection(
+    Q =>
+      Q.struct.generator.atomGroups({
+        'residue-test': Q.core.rel.eq([
+          Q.struct.atomProperty.macromolecular.label_seq_id(),
+          selectedResidue,
+        ]),
+        'group-by': Q.struct.atomProperty.macromolecular.residueKey(),
+      }),
+    structure,
+  )
+}
+
+export function toStr(r: {
+  structureSeqPos: number
+  code?: string
+  chain?: string
+}) {
+  return [
+    `Position: ${r.structureSeqPos}`,
+    r.code
+      ? `Letter: ${r.code} (${proteinAbbreviationMapping[r.code]?.singleLetterCode})`
+      : '',
+    r.chain ? `Chain: ${r.chain}` : '',
+  ]
+    .filter(f => !!f)
+    .join(', ')
+}
+
+export function invertMap(arg: Record<number, number | undefined>) {
+  return Object.fromEntries(Object.entries(arg).map(([a, b]) => [b, a]))
+}