jbrowse-plugin-protein3d 0.0.3 → 0.0.4

package/src/ProteinView/proteinToGenomeMapping.ts

@@ -1,22 +1,21 @@
 import { getSession } from '@jbrowse/core/util'
-import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 // locals
-import { JBrowsePluginProteinViewModel } from './model'
+import { JBrowsePluginProteinStructureModel } from './model'
 
 export function proteinToGenomeMapping({
   model,
   structureSeqPos,
 }: {
   structureSeqPos: number
-  model: JBrowsePluginProteinViewModel
+  model: JBrowsePluginProteinStructureModel
 }) {
   const {
     genomeToTranscriptSeqMapping,
-    alignment,
+    pairwiseAlignment,
     structureSeqToTranscriptSeqPosition,
   } = model
-  if (!genomeToTranscriptSeqMapping || !alignment) {
+  if (!genomeToTranscriptSeqMapping || !pairwiseAlignment) {
     return undefined
   }
   const { p2g, strand } = genomeToTranscriptSeqMapping
@@ -28,9 +27,10 @@ export function proteinToGenomeMapping({
   if (s0 === undefined) {
     return undefined
   }
+
   const start = s0
   const end = start + 3 * strand
-  return [Math.min(start, end), Math.max(start, end)]
+  return [Math.min(start, end), Math.max(start, end)] as const
 }
 
 export async function clickProteinToGenome({
@@ -38,17 +38,16 @@ export async function clickProteinToGenome({
   structureSeqPos,
 }: {
   structureSeqPos: number
-  model: JBrowsePluginProteinViewModel
+  model: JBrowsePluginProteinStructureModel
 }) {
   const session = getSession(model)
   const result = proteinToGenomeMapping({ structureSeqPos, model })
-  const { genomeToTranscriptSeqMapping, zoomToBaseLevel } = model
+  const { connectedView, 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([
     {
@@ -58,15 +57,18 @@ export async function clickProteinToGenome({
       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]' : ''}`,
-    )
+  if (connectedView) {
+    if (zoomToBaseLevel) {
+      await connectedView.navToLocString(
+        `${refName}:${s1}-${s2}${strand === -1 ? '[rev]' : ''}`,
+      )
+    } else {
+      const assembly = assemblyManager.get(connectedView.assemblyNames[0]!)
+      connectedView.centerAt(
+        s1,
+        assembly?.getCanonicalRefName(refName) ?? refName,
+      )
+    }
   }
 }
 
@@ -74,26 +76,26 @@ export function hoverProteinToGenome({
   model,
   structureSeqPos,
 }: {
-  structureSeqPos: number
-  model: JBrowsePluginProteinViewModel
+  structureSeqPos?: number
+  model: JBrowsePluginProteinStructureModel
 }) {
-  const session = getSession(model)
-  const result = proteinToGenomeMapping({ structureSeqPos, model })
-  const { genomeToTranscriptSeqMapping } = model
-  if (!genomeToTranscriptSeqMapping || !result) {
-    return
-  }
-  if (!result) {
-    session.notify('Genome position not found')
+  if (structureSeqPos === undefined) {
+    model.setHoverGenomeHighlights([])
+  } else {
+    const mappedGenomeCoordinate = proteinToGenomeMapping({
+      structureSeqPos,
+      model,
+    })
+    const { genomeToTranscriptSeqMapping } = model
+    if (genomeToTranscriptSeqMapping && mappedGenomeCoordinate) {
+      model.setHoverGenomeHighlights([
+        {
+          assemblyName: 'hg38',
+          refName: genomeToTranscriptSeqMapping.refName,
+          start: mappedGenomeCoordinate[0],
+          end: mappedGenomeCoordinate[1],
+        },
+      ])
+    }
   }
-  const [s1, s2] = result
-  const { refName } = genomeToTranscriptSeqMapping
-  model.setHoverGenomeHighlights([
-    {
-      assemblyName: 'hg38',
-      refName,
-      start: s1,
-      end: s2,
-    },
-  ])
 }

package/src/ProteinView/selectResidue.ts

@@ -13,7 +13,7 @@ export default function selectResidue({
 }) {
   const sel = getMolstarStructureSelection({ structure, selectedResidue })
   const loci = StructureSelection.toLociWithSourceUnits(sel)
-  plugin?.managers.interactivity.lociSelects.select({
+  plugin.managers.interactivity.lociSelects.select({
     loci,
   })
 }

package/src/ProteinView/structureModel.ts

@@ -0,0 +1,512 @@
+import { autorun } from 'mobx'
+import { Region as IRegion } from '@jbrowse/core/util/types'
+import { Instance, addDisposer, getParent, types } from 'mobx-state-tree'
+import {
+  SimpleFeature,
+  SimpleFeatureSerialized,
+  getSession,
+} from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import { checkHovered, invertMap, toStr } from './util'
+import { launchPairwiseAlignment } from './launchRemotePairwiseAlignment'
+import {
+  genomeToTranscriptSeqMapping,
+  structureSeqVsTranscriptSeqMap,
+  structurePositionToAlignmentMap,
+  transcriptPositionToAlignmentMap,
+  PairwiseAlignment,
+} from '../mappings'
+import { PluginContext } from 'molstar/lib/mol-plugin/context'
+import {
+  StructureElement,
+  StructureProperties,
+} from 'molstar/lib/mol-model/structure'
+import {
+  clickProteinToGenome,
+  hoverProteinToGenome,
+} from './proteinToGenomeMapping'
+import selectResidue from './selectResidue'
+import clearSelection from './clearSelection'
+import highlightResidue from './highlightResidue'
+
+type LGV = LinearGenomeViewModel
+type MaybeLGV = LGV | undefined
+type MaybePairwiseAlignment = PairwiseAlignment | undefined
+type StructureModel = Awaited<
+  ReturnType<PluginContext['builders']['structure']['createModel']>
+>
+
+const Structure = types
+  .model({
+    /**
+     * #property
+     */
+    url: types.maybe(types.string),
+    /**
+     * #property
+     */
+    data: types.maybe(types.string),
+    /**
+     * #property
+     */
+    connectedViewId: types.maybe(types.string),
+    /**
+     * #property
+     */
+    pairwiseAlignment: types.frozen<MaybePairwiseAlignment>(),
+    /**
+     * #property
+     */
+    feature: types.frozen<SimpleFeatureSerialized | undefined>(),
+    /**
+     * #property
+     */
+    userProvidedTranscriptSequence: types.string,
+  })
+  .volatile(() => ({
+    /**
+     * #volatile
+     */
+    model: undefined as StructureModel | undefined,
+    /**
+     * #volatile
+     */
+    clickGenomeHighlights: [] as IRegion[],
+    /**
+     * #volatile
+     */
+    hoverGenomeHighlights: [] as IRegion[],
+
+    /**
+     * #volatile
+     */
+    clickPosition: undefined as
+      | {
+          structureSeqPos: number
+          code: string
+          chain: string
+        }
+      | undefined,
+    /**
+     * #volatile
+     */
+    hoverPosition: undefined as
+      | {
+          structureSeqPos?: number
+          code?: string
+          chain?: string
+        }
+      | undefined,
+    /**
+     * #volatile
+     */
+    pairwiseAlignmentStatus: '',
+    /**
+     * #volatile
+     */
+    structureSequences: undefined as string[] | undefined,
+  }))
+  .actions(self => ({
+    /**
+     * #action
+     */
+    setModel(model: StructureModel) {
+      self.model = model
+    },
+
+    setSequences(str?: string[]) {
+      self.structureSequences = str
+    },
+  }))
+  .views(self => ({
+    /**
+     * #getter
+     */
+    get connectedView() {
+      const { views } = getSession(self)
+      return views.find(f => f.id === self.connectedViewId) as MaybeLGV
+    },
+  }))
+  .actions(self => ({
+    /**
+     * #action
+     */
+    setClickedPosition(arg?: {
+      structureSeqPos: number
+      code: string
+      chain: string
+    }) {
+      self.clickPosition = arg
+    },
+    /**
+     * #action
+     */
+    setClickGenomeHighlights(r: IRegion[]) {
+      self.clickGenomeHighlights = r
+    },
+    /**
+     * #action
+     */
+    clearClickGenomeHighlights() {
+      self.clickGenomeHighlights = []
+    },
+    /**
+     * #action
+     */
+    setHoverGenomeHighlights(r: IRegion[]) {
+      self.hoverGenomeHighlights = r
+    },
+    /**
+     * #action
+     */
+    clearHoverGenomeHighlights() {
+      self.hoverGenomeHighlights = []
+    },
+    /**
+     * #action
+     */
+    setHoveredPosition(arg?: {
+      structureSeqPos?: number
+      chain?: string
+      code?: string
+    }) {
+      self.hoverPosition = arg
+    },
+    /**
+     * #action
+     */
+    setAlignment(r?: PairwiseAlignment) {
+      self.pairwiseAlignment = r
+    },
+    /**
+     * #action
+     */
+    setAlignmentStatus(str: string) {
+      self.pairwiseAlignmentStatus = str
+    },
+  }))
+  .views(self => ({
+    /**
+     * #getter
+     */
+    get structureSeqToTranscriptSeqPosition() {
+      return self.pairwiseAlignment
+        ? structureSeqVsTranscriptSeqMap(self.pairwiseAlignment)
+            .structureSeqToTranscriptSeqPosition
+        : undefined
+    },
+    /**
+     * #getter
+     */
+    get transcriptSeqToStructureSeqPosition() {
+      return self.pairwiseAlignment
+        ? structureSeqVsTranscriptSeqMap(self.pairwiseAlignment)
+            .transcriptSeqToStructureSeqPosition
+        : undefined
+    },
+    /**
+     * #getter
+     */
+    get structurePositionToAlignmentMap() {
+      return self.pairwiseAlignment
+        ? structurePositionToAlignmentMap(self.pairwiseAlignment)
+        : undefined
+    },
+    /**
+     * #getter
+     */
+    get transcriptPositionToAlignmentMap() {
+      return self.pairwiseAlignment
+        ? transcriptPositionToAlignmentMap(self.pairwiseAlignment)
+        : undefined
+    },
+    /**
+     * #getter
+     */
+    get pairwiseAlignmentToTranscriptPosition() {
+      return this.transcriptPositionToAlignmentMap
+        ? invertMap(this.transcriptPositionToAlignmentMap)
+        : undefined
+    },
+    /**
+     * #getter
+     */
+    get pairwiseAlignmentToStructurePosition() {
+      return this.structurePositionToAlignmentMap
+        ? invertMap(this.structurePositionToAlignmentMap)
+        : undefined
+    },
+    /**
+     * #getter
+     */
+    get clickString() {
+      const r = self.clickPosition
+      return r === undefined ? '' : toStr(r)
+    },
+    /**
+     * #getter
+     */
+    get hoverString() {
+      const r = self.hoverPosition
+      return r === undefined ? '' : toStr(r)
+    },
+    /**
+     * #getter
+     */
+    get genomeToTranscriptSeqMapping() {
+      return self.feature
+        ? genomeToTranscriptSeqMapping(new SimpleFeature(self.feature))
+        : undefined
+    },
+    /**
+     * #getter
+     */
+    get structureSeqHoverPos() {
+      return self.hoverPosition?.structureSeqPos
+    },
+
+    /**
+     * #getter
+     */
+    get exactMatch() {
+      const r1 = self.userProvidedTranscriptSequence.replaceAll('*', '')
+      const r2 = self.structureSequences?.[0]?.replaceAll('*', '')
+      return r1 === r2
+    },
+
+    get zoomToBaseLevel(): boolean {
+      // @ts-expect-error
+      return getParent(self, 2).zoomToBaseLevel
+    },
+    get showHighlight(): boolean {
+      // @ts-expect-error
+      return getParent(self, 2).showHighlight
+    },
+    get molstarPluginContext(): PluginContext | undefined {
+      // @ts-expect-error
+      return getParent(self, 2).molstarPluginContext
+    },
+  }))
+  .actions(self => ({
+    afterAttach() {
+      // pairwise align transcript sequence to structure residues
+      addDisposer(
+        self,
+        autorun(async () => {
+          try {
+            const {
+              userProvidedTranscriptSequence,
+              structureSequences,
+              exactMatch,
+            } = self
+            const seq1 = userProvidedTranscriptSequence
+            const seq2 = structureSequences?.[0]
+
+            if (!!self.pairwiseAlignment || !seq1 || !seq2) {
+              return
+            }
+            const r1 = seq1.replaceAll('*', '')
+            const r2 = seq2.replaceAll('*', '')
+            if (exactMatch) {
+              let consensus = ''
+              // eslint-disable-next-line @typescript-eslint/prefer-for-of
+              for (let i = 0; i < r1.length; i++) {
+                consensus += '|'
+              }
+              self.setAlignment({
+                consensus,
+                alns: [
+                  { id: 'seq1', seq: r1 },
+                  { id: 'seq2', seq: r2 },
+                ],
+              })
+            } else {
+              const pairwiseAlignment = await launchPairwiseAlignment({
+                seq1: r1,
+                seq2: r2,
+                algorithm: 'emboss_needle',
+                onProgress: arg => {
+                  self.setAlignmentStatus(arg)
+                },
+              })
+              self.setAlignment(pairwiseAlignment.pairwiseAlignment)
+
+              // showHighlight when we are
+              // @ts-expect-error
+              getParent(self, 2).setShowHighlight(true)
+              // @ts-expect-error
+              getParent(self, 2).setShowAlignment(true)
+            }
+          } catch (e) {
+            console.error(e)
+            // @ts-expect-error
+            getParent(self, 2).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)
+          ) {
+            const { hoverPosition } = hovered
+            const pos = genomeToTranscriptSeqMapping.g2p[hoverPosition.coord]
+            const c0 =
+              pos === undefined
+                ? undefined
+                : transcriptSeqToStructureSeqPosition?.[pos]
+
+            if (c0 !== undefined) {
+              self.setHoveredPosition({
+                structureSeqPos: c0,
+              })
+            }
+          }
+        }),
+      )
+
+      addDisposer(
+        self,
+        autorun(() => {
+          const { molstarPluginContext } = self
+          if (molstarPluginContext) {
+            const ret =
+              molstarPluginContext.behaviors.interaction.click.subscribe(e => {
+                if (StructureElement.Loci.is(e.current.loci)) {
+                  const loc = StructureElement.Loci.getFirstLocation(
+                    e.current.loci,
+                  )
+                  if (loc) {
+                    const pos = StructureProperties.residue.auth_seq_id(loc)
+                    const code = StructureProperties.atom.label_comp_id(loc)
+                    const chain = StructureProperties.chain.auth_asym_id(loc)
+                    self.setHoveredPosition({
+                      structureSeqPos: pos - 1,
+                      code,
+                      chain,
+                    })
+
+                    clickProteinToGenome({
+                      model: self as JBrowsePluginProteinStructureModel,
+                      structureSeqPos: pos - 1,
+                    }).catch((e: unknown) => {
+                      console.error(e)
+                      // @ts-expect-error
+                      getParent(self, 2).setError(e)
+                    })
+                  }
+                }
+              })
+            return () => {
+              ret.unsubscribe()
+            }
+          }
+          return () => {}
+        }),
+      )
+
+      addDisposer(
+        self,
+        autorun(() => {
+          const { molstarPluginContext } = self
+          if (molstarPluginContext) {
+            const ret =
+              molstarPluginContext.behaviors.interaction.hover.subscribe(e => {
+                if (StructureElement.Loci.is(e.current.loci)) {
+                  const loc = StructureElement.Loci.getFirstLocation(
+                    e.current.loci,
+                  )
+                  if (loc) {
+                    // example code for this label
+                    // https://github.com/molstar/molstar/blob/60550cfea1f62a50a764d5714307d6d1049be71d/src/mol-theme/label.ts#L255-L264
+                    const pos = StructureProperties.residue.auth_seq_id(loc)
+                    const code = StructureProperties.atom.label_comp_id(loc)
+                    const chain = StructureProperties.chain.auth_asym_id(loc)
+                    self.setHoveredPosition({
+                      structureSeqPos: pos - 1,
+                      code,
+                      chain,
+                    })
+                    hoverProteinToGenome({
+                      model: self as JBrowsePluginProteinStructureModel,
+                      structureSeqPos: pos - 1,
+                    })
+                  }
+                }
+              })
+            return () => {
+              ret.unsubscribe()
+            }
+          }
+          return () => {}
+        }),
+      )
+
+      addDisposer(
+        self,
+        autorun(() => {
+          const {
+            showHighlight,
+            structureSeqToTranscriptSeqPosition,
+            molstarPluginContext,
+          } = self
+          const structure =
+            molstarPluginContext?.managers.structure.hierarchy.current
+              .structures[0]?.cell.obj?.data
+          if (structure && structureSeqToTranscriptSeqPosition) {
+            if (showHighlight) {
+              for (const coord of Object.keys(
+                structureSeqToTranscriptSeqPosition,
+              )) {
+                selectResidue({
+                  structure,
+                  plugin: molstarPluginContext,
+                  selectedResidue: +coord + 1,
+                })
+              }
+            } else {
+              clearSelection({
+                plugin: molstarPluginContext,
+              })
+            }
+          }
+        }),
+      )
+
+      addDisposer(
+        self,
+        autorun(() => {
+          const { structureSeqHoverPos, molstarPluginContext } = self
+          const structure =
+            molstarPluginContext?.managers.structure.hierarchy.current
+              .structures[0]?.cell.obj?.data
+          if (structure && structureSeqHoverPos !== undefined) {
+            highlightResidue({
+              structure,
+              plugin: molstarPluginContext,
+              selectedResidue: structureSeqHoverPos,
+            })
+          }
+        }),
+      )
+    },
+  }))
+
+export default Structure
+
+export type JBrowsePluginProteinStructureStateModel = typeof Structure
+export type JBrowsePluginProteinStructureModel =
+  Instance<JBrowsePluginProteinStructureStateModel>

package/src/ProteinView/useProteinView.ts

@@ -5,23 +5,14 @@ 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
@@ -48,14 +39,6 @@ export default function useProteinView({
         })
         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)
@@ -64,7 +47,7 @@ export default function useProteinView({
     return () => {
       p?.unmount()
     }
-  }, [url, data, showControls])
+  }, [showControls])
 
-  return { parentRef, error, plugin, seq }
+  return { parentRef, error, plugin }
 }