Misc

GMOD · Aug 23, 2024 · 8f872f3 · 8f872f3
1 parent 1f21e56
commit 8f872f3
Show file tree

Hide file tree

Showing 5 changed files with 233 additions and 93 deletions.
diff --git a/src/ProteinView/components/Header.tsx b/src/ProteinView/components/Header.tsx
@@ -16,18 +16,21 @@ const ProteinViewHeader = observer(function ({
 }: {
   model: JBrowsePluginProteinViewModel
 }) {
-  const { showAlignment } = model
+  const { structures, showAlignment } = model
   return (
     <div>
       <InformativeHeaderArea model={model} />
       {showAlignment
-        ? model.structures.map(s => {
-            const { alignment } = s
-
-            return alignment ? (
-              <ProteinAlignment model={s} />
-            ) : (
-              <LoadingEllipses message="Loading pairwise alignment" />
+        ? structures.map((structure, idx) => {
+            const { alignment } = structure
+            return (
+              <div key={idx}>
+                {alignment ? (
+                  <ProteinAlignment key={idx} model={structure} />
+                ) : (
+                  <LoadingEllipses message="Loading pairwise alignment" />
+                )}
+              </div>
             )
           })
         : null}

diff --git a/src/ProteinView/components/ProteinView.tsx b/src/ProteinView/components/ProteinView.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react'
 import { observer } from 'mobx-react'
-import { ErrorMessage } from '@jbrowse/core/ui'
+import { ErrorMessage, ResizeHandle } from '@jbrowse/core/ui'
 import { PluginContext } from 'molstar/lib/mol-plugin/context'
 
 // locals
@@ -54,57 +54,10 @@ const ProteinViewContainer = observer(function ({
   plugin?: PluginContext
   parentRef?: React.RefObject<HTMLDivElement>
 }) {
-  const {
-    width,
-    height,
-    showHighlight,
-    // structureSeqToTranscriptSeqPosition,
-    // structureSeqHoverPos,
-    // alignment,
-  } = model
+  const { width, height, error } = model
 
-  // const { error } = useProteinViewClickBehavior({ plugin, model })
-  // useProteinViewHoverBehavior({ plugin, model })
-
-  // const structure =
-  //   plugin?.managers.structure.hierarchy.current.structures[0]?.cell.obj?.data
-
-  // useEffect(() => {
-  //   if (!plugin || !structureSeqToTranscriptSeqPosition || !structure) {
-  //     return
-  //   }
-  //   if (showHighlight) {
-  //     for (const coord of Object.keys(structureSeqToTranscriptSeqPosition)) {
-  //       selectResidue({
-  //         structure,
-  //         plugin,
-  //         selectedResidue: +coord + 1,
-  //       })
-  //     }
-  //   } else {
-  //     clearSelection({ plugin })
-  //   }
-  // }, [plugin, structure, showHighlight, structureSeqToTranscriptSeqPosition])
-  //
-  // useEffect(() => {
-  //   if (!plugin || !structure) {
-  //     return
-  //   }
-  //
-  //   if (structureSeqHoverPos === undefined) {
-  //     console.warn('not found')
-  //   } else {
-  //     highlightResidue({
-  //       structure,
-  //       plugin,
-  //       selectedResidue: structureSeqHoverPos,
-  //     })
-  //   }
-  // }, [plugin, structure, structureSeqHoverPos])
-  const error = undefined
-  const alignment = undefined
   return (
-    <div style={{ background: alignment ? undefined : '#ccc' }}>
+    <div style={{ background: '#ccc' }}>
       {error ? <ErrorMessage error={error} /> : null}
       <Header model={model} />
       <div
@@ -115,6 +68,12 @@ const ProteinViewContainer = observer(function ({
           height,
         }}
       />
+      <ResizeHandle
+        style={{ height: 4, background: 'grey' }}
+        onDrag={delta => {
+          model.setHeight(model.height + delta)
+        }}
+      />
     </div>
   )
 })

diff --git a/src/ProteinView/model.ts b/src/ProteinView/model.ts
@@ -8,6 +8,12 @@ import { PluginContext } from 'molstar/lib/mol-plugin/context'
 import { addStructureFromData } from './addStructureFromData'
 import { addStructureFromURL } from './addStructureFromURL'
 import Structure from './structureModel'
+import highlightResidue from './highlightResidue'
+import {
+  StructureElement,
+  StructureProperties,
+} from 'molstar/lib/mol-model/structure'
+import { clickProteinToGenome } from './proteinToGenomeMapping'
 
 /**
  * #stateModel Protein3dViewPlugin
@@ -36,7 +42,7 @@ function stateModelFactory() {
         /**
          * #property
          */
-        showControls: true,
+        showControls: false,
         /**
          * #property
          */
@@ -72,6 +78,12 @@ function stateModelFactory() {
     }))
 
     .actions(self => ({
+      /**
+       * #action
+       */
+      setHeight(n: number) {
+        self.height = n
+      },
       /**
        * #action
        */
@@ -121,17 +133,30 @@ function stateModelFactory() {
             if (molstarPluginContext) {
               for (const structure of structures) {
                 try {
-                  if (structure.data) {
-                    await addStructureFromData({
-                      data: structure.data,
-                      plugin: molstarPluginContext,
-                    })
-                  } else if (structure.url) {
-                    await addStructureFromURL({
-                      url: structure.url,
-                      plugin: molstarPluginContext,
-                    })
-                  }
+                  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)
@@ -140,6 +165,28 @@ function stateModelFactory() {
             }
           }),
         )
+
+        addDisposer(
+          self,
+          autorun(() => {
+            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,
+                  })
+                }
+              }
+            }
+          }),
+        )
       },
     }))
 }