jbrowse-plugin-protein3d 0.0.2 → 0.0.4

package/src/ProteinView/components/{Header.tsx → ProteinViewHeader.tsx}

@@ -1,5 +1,6 @@
 import React from 'react'
 import { observer } from 'mobx-react'
+import { LoadingEllipses } from '@jbrowse/core/ui'
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
 // icons
@@ -9,46 +10,62 @@ 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
+  const { structures, showAlignment } = model
   return (
     <div>
       <InformativeHeaderArea model={model} />
-      {showAlignment && alignment ? (
-        <ProteinAlignment model={model} />
-      ) : (
-        <LoadingEllipses message="Loading pairwise alignment" />
-      )}
+      {showAlignment
+        ? structures.map((structure, idx) => {
+            const { pairwiseAlignment } = structure
+            return (
+              <div key={idx}>
+                {pairwiseAlignment ? (
+                  <ProteinAlignment key={idx} model={structure} />
+                ) : (
+                  <LoadingEllipses message="Loading pairwise alignment" />
+                )}
+              </div>
+            )
+          })
+        : null}
     </div>
   )
 })
 
-const InformativeHeaderArea = observer(function ({
+const StructureInfoHeaderArea = observer(function ({
   model,
 }: {
   model: JBrowsePluginProteinViewModel
 }) {
-  const {
-    showAlignment,
-    clickString,
-    hoverString,
-    showHighlight,
-    zoomToBaseLevel,
-  } = model
-  return (
-    <div style={{ display: 'flex' }}>
-      <span>
+  return model.structures.map((s, id) => {
+    const { clickString, hoverString } = s
+
+    return (
+      <span key={id}>
         {[
           clickString ? `Click: ${clickString}` : '',
           hoverString ? `Hover: ${hoverString}` : '',
         ].join(' ')}
       </span>
+    )
+  })
+})
+
+const InformativeHeaderArea = observer(function ({
+  model,
+}: {
+  model: JBrowsePluginProteinViewModel
+}) {
+  const { showAlignment, showHighlight, zoomToBaseLevel } = model
+  return (
+    <div style={{ display: 'flex' }}>
+      <StructureInfoHeaderArea model={model} />
       <span style={{ flexGrow: 1 }} />
       <CascadingMenuButton
         menuItems={[
@@ -57,21 +74,27 @@ const InformativeHeaderArea = observer(function ({
             type: 'checkbox',
             checked: showAlignment,
             icon: Visibility,
-            onClick: () => model.setShowAlignment(!showAlignment),
+            onClick: () => {
+              model.setShowAlignment(!showAlignment)
+            },
           },
           {
             label: 'Show pairwise alignment as highlight',
             type: 'checkbox',
             checked: showHighlight,
             icon: Visibility,
-            onClick: () => model.setShowHighlight(!showHighlight),
+            onClick: () => {
+              model.setShowHighlight(!showHighlight)
+            },
           },
           {
             label: 'Zoom to base level on click',
             type: 'checkbox',
             checked: zoomToBaseLevel,
             icon: Visibility,
-            onClick: () => model.setZoomToBaseLevel(!zoomToBaseLevel),
+            onClick: () => {
+              model.setZoomToBaseLevel(!zoomToBaseLevel)
+            },
           },
         ]}
       >

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
-            ? '#f69'
-            : set?.has(i) && showHighlight
+          hoveredPosition !== undefined && i === hoveredPosition
+            ? '#f698'
+            : 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
@@ -32,6 +18,7 @@ type MaybeLGV = LGV | undefined
 function stateModelFactory() {
   return types
     .compose(
+      'ProteinView',
       BaseViewModel,
       types.model({
         /**
@@ -42,188 +29,77 @@ function stateModelFactory() {
          * #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),
+        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),
+        showHighlight: false,
         /**
          * #property
          */
-        showHighlight: true,
+        zoomToBaseLevel: true,
         /**
          * #property
          */
-        zoomToBaseLevel: false,
-        /**
-         * #property
-         */
-        showAlignment: true,
+        showAlignment: false,
       }),
     )
     .volatile(() => ({
       /**
        * #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
        */
@@ -236,139 +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
+      setMolstarPluginContext(p?: PluginContext) {
+        self.molstarPluginContext = p
       },
     }))
     .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 { 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 }
+
+                  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)
+                }
               }
-              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,
-              })
+            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,
+                  })
+                }
+              }
             }
           }),
         )
@@ -377,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>