jbrowse-plugin-protein3d 0.0.3 → 0.0.4

package/src/ProteinView/components/SplitString.tsx

@@ -2,18 +2,18 @@ import React from 'react'
 
 export default function SplitString({
   str,
-  col,
-  set,
+  gapSet,
+  hoveredPosition,
+  showHighlight,
   onMouseOver,
   onClick,
-  showHighlight,
 }: {
   str: string
-  col?: number
-  set?: Set<number>
+  gapSet?: Set<number>
+  hoveredPosition?: number
+  showHighlight: boolean
   onMouseOver?: (arg: number) => void
   onClick?: (arg: number) => void
-  showHighlight: boolean
 }) {
   return str.split('').map((d, i) => (
     <span
@@ -22,9 +22,9 @@ export default function SplitString({
       onClick={() => onClick?.(i)}
       style={{
         background:
-          col !== undefined && i === col
+          hoveredPosition !== undefined && i === hoveredPosition
             ? '#f698'
-            : set?.has(i) && showHighlight
+            : gapSet?.has(i) && showHighlight
               ? '#33ff19'
               : undefined,
       }}

package/src/ProteinView/genomeToProtein.ts

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

package/src/ProteinView/highlightResidue.ts

@@ -16,8 +16,8 @@ export default function highlightResidue({
     selectedResidue: selectedResidue + 1,
   })
   const loci = StructureSelection.toLociWithSourceUnits(sel)
-  plugin?.managers.interactivity.lociHighlights.clearHighlights()
-  plugin?.managers.interactivity.lociHighlights.highlight({
+  plugin.managers.interactivity.lociHighlights.clearHighlights()
+  plugin.managers.interactivity.lociHighlights.highlight({
     loci,
   })
 }

package/src/ProteinView/launchRemotePairwiseAlignment.ts

@@ -27,7 +27,7 @@ async function runEmbossMatcher({
   })
   const ret = await textfetch(`${base}/emboss_matcher/result/${jobId}/aln`)
   return {
-    alignment: parsePairwise(
+    pairwiseAlignment: parsePairwise(
       ret
         .split('\n')
         .filter(line => !line.startsWith('#'))
@@ -61,7 +61,7 @@ async function runEmbossNeedle({
 
   const ret = await textfetch(`${base}/emboss_needle/result/${jobId}/aln`)
   return {
-    alignment: parsePairwise(
+    pairwiseAlignment: parsePairwise(
       ret
         .split('\n')
         .filter(line => !line.startsWith('#'))
@@ -78,15 +78,18 @@ async function wait({
   algorithm: string
   onProgress: (arg: string) => void
 }) {
+  // eslint-disable-next-line  @typescript-eslint/no-unnecessary-condition
   while (true) {
     for (let i = 0; i < 10; i++) {
       await timeout(1000)
-      onProgress(`Re-checking alignment to PDB seq1,seq2 in... ${10 - i}`)
+      onProgress(`Re-checking pairwiseAlignment to PDB seq1,seq2 in... ${10 - i}`)
     }
     const result = await textfetch(`${base}/${algorithm}/status/${jobId}`)
 
     if (result === 'FINISHED') {
       break
+    } else if (result.includes('FAILED')) {
+      throw new Error('Remote returned FAILED')
     }
   }
 }

package/src/ProteinView/model.ts

@@ -1,28 +1,14 @@
 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'
+import { ElementId } from '@jbrowse/core/util/types/mst'
+import { Instance, addDisposer, types } from 'mobx-state-tree'
 
 // 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
+import { PluginContext } from 'molstar/lib/mol-plugin/context'
+import { addStructureFromData } from './addStructureFromData'
+import { addStructureFromURL } from './addStructureFromURL'
+import Structure from './structureModel'
+import highlightResidue from './highlightResidue'
 
 /**
  * #stateModel Protein3dViewPlugin
@@ -45,51 +31,18 @@ function stateModelFactory() {
         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),
+        structures: types.array(Structure),
+
         /**
          * #property
          */
-        showControls: true,
+        showControls: false,
         /**
          * #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
          */
@@ -108,123 +61,45 @@ function stateModelFactory() {
       /**
        * #volatile
        */
-      error: undefined as unknown,
-      /**
-       * #volatile
-       */
-      clickPosition: undefined as
-        | {
-            structureSeqPos: number
-            code: string
-            chain: string
-          }
-        | undefined,
+      progress: '',
       /**
        * #volatile
        */
-      hoverPosition: undefined as
-        | {
-            structureSeqPos: number
-            code?: string
-            chain?: string
-          }
-        | undefined,
+      error: undefined as unknown,
       /**
        * #volatile
        */
-      progress: '',
-    }))
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get connectedView() {
-        const { views } = getSession(self)
-        return views.find(f => f.id === self.connectedViewId) as MaybeLGV
-      },
+      molstarPluginContext: undefined as PluginContext | undefined,
     }))
+
     .actions(self => ({
       /**
        * #action
        */
-      setShowAlignment(f: boolean) {
-        self.showAlignment = f
-      },
-      /**
-       * #action
-       */
-      setHoveredPosition(arg?: {
-        structureSeqPos: number
-        chain?: string
-        code?: string
-      }) {
-        self.hoverPosition = arg
+      setHeight(n: number) {
+        self.height = n
       },
       /**
        * #action
        */
-      setSeqs(str1?: string, str2?: string) {
-        self.seq1 = str1
-        self.seq2 = str2
+      setShowAlignment(f: boolean) {
+        self.showAlignment = f
       },
+
       /**
        * #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
        */
@@ -237,166 +112,73 @@ function stateModelFactory() {
       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
+       * #action
        */
-      get structureSeqHoverPos(): number | undefined {
-        return self.hoverPosition?.structureSeqPos
-      },
-
-      get exactMatch() {
-        const r1 = self.seq1?.replaceAll('*', '')
-        const r2 = self.seq2?.replaceAll('*', '')
-        return r1 === r2
+      setMolstarPluginContext(p?: PluginContext) {
+        self.molstarPluginContext = p
       },
     }))
     .actions(self => ({
       afterAttach() {
-        // pairwise align transcript sequence to structure residues
         addDisposer(
           self,
           autorun(async () => {
-            try {
-              const { seq1, seq2, exactMatch } = self
-              if (!!self.alignment || !seq1 || !seq2) {
-                return
-              }
-              const r1 = seq1.replaceAll('*', '')
-              const r2 = seq2.replaceAll('*', '')
-              if (!exactMatch) {
-                const alignment = await launchPairwiseAlignment({
-                  seq1: r1,
-                  seq2: r2,
-                  algorithm: 'emboss_needle',
-                  onProgress: arg => self.setProgress(arg),
-                })
-                self.setAlignment(alignment.alignment)
+            const { structures, molstarPluginContext } = self
+            if (molstarPluginContext) {
+              for (const structure of structures) {
+                try {
+                  const { model } = structure.data
+                    ? await addStructureFromData({
+                        data: structure.data,
+                        plugin: molstarPluginContext,
+                      })
+                    : structure.url
+                      ? await addStructureFromURL({
+                          url: structure.url,
+                          plugin: molstarPluginContext,
+                        })
+                      : { model: undefined }
 
-                // showHighlight when we are
-                self.setShowHighlight(true)
-                self.setShowAlignment(true)
-              } else {
-                let consensus = ''
-                // eslint-disable-next-line @typescript-eslint/prefer-for-of
-                for (let i = 0; i < r1.length; i++) {
-                  consensus += '|'
+                  const sequences = model?.obj?.data.sequence.sequences.map(
+                    s => {
+                      let seq = ''
+                      const arr = s.sequence.label.toArray()
+                      // eslint-disable-next-line unicorn/no-for-loop,@typescript-eslint/prefer-for-of
+                      for (let i = 0; i < arr.length; i++) {
+                        seq += arr[i]!
+                      }
+                      return seq
+                    },
+                  )
+                  structure.setSequences(sequences)
+                } catch (e) {
+                  self.setError(e)
+                  console.error(e)
                 }
-                self.setAlignment({
-                  consensus,
-                  alns: [
-                    { id: 'seq1', seq: r1 },
-                    { id: 'seq2', seq: r2 },
-                  ],
-                })
               }
-            } 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,
-              })
+            const { structures, molstarPluginContext } = self
+            if (molstarPluginContext) {
+              for (const [i, s0] of structures.entries()) {
+                const structure =
+                  molstarPluginContext.managers.structure.hierarchy.current
+                    .structures[i]?.cell.obj?.data
+                const pos = s0.structureSeqHoverPos
+                if (structure && pos !== undefined) {
+                  highlightResidue({
+                    structure,
+                    plugin: molstarPluginContext,
+                    selectedResidue: pos,
+                  })
+                }
+              }
             }
           }),
         )
@@ -405,8 +187,13 @@ function stateModelFactory() {
 }
 
 export default stateModelFactory
+
 export type JBrowsePluginProteinViewStateModel = ReturnType<
   typeof stateModelFactory
 >
 export type JBrowsePluginProteinViewModel =
   Instance<JBrowsePluginProteinViewStateModel>
+
+export type JBrowsePluginProteinStructureStateModel = typeof Structure
+export type JBrowsePluginProteinStructureModel =
+  Instance<JBrowsePluginProteinStructureStateModel>