jbrowse-plugin-protein3d 0.0.3 → 0.0.4

package/src/LaunchProteinView/index.ts

@@ -2,45 +2,55 @@ import PluginManager from '@jbrowse/core/PluginManager'
 import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
 import { PluggableElementType } from '@jbrowse/core/pluggableElementTypes'
 import { IAnyModelType } from 'mobx-state-tree'
-import { getSession, getContainingTrack } from '@jbrowse/core/util'
+import { getSession, getContainingTrack, Feature } from '@jbrowse/core/util'
 
 // icons
 import AddIcon from '@mui/icons-material/Add'
 
 // locals
 import LaunchProteinViewDialog from './components/LaunchProteinViewDialog'
+import { MenuItem } from '@jbrowse/core/ui'
 
 function isDisplay(elt: { name: string }): elt is DisplayType {
   return elt.name === 'LinearBasicDisplay'
 }
 
 function extendStateModel(stateModel: IAnyModelType) {
-  return stateModel.views(self => {
-    const superContextMenuItems = self.contextMenuItems
-    return {
-      contextMenuItems() {
-        const feature = self.contextMenuFeature
-        const track = getContainingTrack(self)
-        return [
-          ...superContextMenuItems(),
-          ...(feature
-            ? [
-                {
-                  label: 'Launch 3-D protein view',
-                  icon: AddIcon,
-                  onClick: () => {
-                    getSession(track).queueDialog(handleClose => [
-                      LaunchProteinViewDialog,
-                      { model: track, handleClose, feature },
-                    ])
+  return stateModel.views(
+    (self: {
+      contextMenuItems: () => MenuItem[]
+      contextMenuFeature?: Feature
+    }) => {
+      const superContextMenuItems = self.contextMenuItems
+      return {
+        contextMenuItems() {
+          const feature = self.contextMenuFeature
+          const track = getContainingTrack(self)
+          return [
+            ...superContextMenuItems(),
+            ...(feature
+              ? [
+                  {
+                    label: 'Launch protein view',
+                    icon: AddIcon,
+                    onClick: () => {
+                      getSession(track).queueDialog(handleClose => [
+                        LaunchProteinViewDialog,
+                        {
+                          model: track,
+                          handleClose,
+                          feature,
+                        },
+                      ])
+                    },
                   },
-                },
-              ]
-            : []),
-        ]
-      },
-    }
-  })
+                ]
+              : []),
+          ]
+        },
+      }
+    },
+  )
 }
 
 export default function LaunchProteinViewF(pluginManager: PluginManager) {

package/src/ProteinView/{loadStructureFromData.ts → addStructureFromData.ts}

@@ -7,7 +7,7 @@ export interface LoadStructureOptions {
 }
 
 // adapted from https://github.com/molstar/molstar/blob/ab4130d42d0ab2591f62460292ade0203207d4d2/src/apps/viewer/app.ts#L255C1-L259C6
-export async function loadStructureFromData({
+export async function addStructureFromData({
   data,
   format = 'pdb',
   options,
@@ -18,8 +18,6 @@ export async function loadStructureFromData({
   options?: LoadStructureOptions & { label?: string; dataLabel?: string }
   plugin: PluginContext
 }) {
-  await plugin.clear()
-
   const _data = await plugin.builders.data.rawData({
     data,
     label: options?.dataLabel,
@@ -30,10 +28,6 @@ export async function loadStructureFromData({
     format,
   )
   const model = await plugin.builders.structure.createModel(trajectory)
-  const seq = model.obj?.data.sequence.sequences[0].sequence.label
-    .toArray()
-    // @ts-expect-error
-    .join('')
 
   await plugin.builders.structure.hierarchy.applyPreset(
     trajectory,
@@ -44,5 +38,5 @@ export async function loadStructureFromData({
     },
   )
 
-  return { seq: seq as string }
+  return { model }
 }

package/src/ProteinView/{loadStructureFromURL.ts → addStructureFromURL.ts}

@@ -7,7 +7,7 @@ export interface LoadStructureOptions {
 }
 
 // adapted from https://github.com/molstar/molstar/blob/ab4130d42d0ab2591f62460292ade0203207d4d2/src/apps/viewer/app.ts#L230
-export async function loadStructureFromURL({
+export async function addStructureFromURL({
   url,
   format = 'mmcif',
   isBinary,
@@ -20,11 +20,16 @@ export async function loadStructureFromURL({
   options?: LoadStructureOptions & { label?: string }
   plugin: PluginContext
 }) {
-  await plugin.clear()
-
   const data = await plugin.builders.data.download(
-    { url, isBinary },
-    { state: { isGhost: true } },
+    {
+      url,
+      isBinary,
+    },
+    {
+      state: {
+        isGhost: true,
+      },
+    },
   )
 
   const trajectory = await plugin.builders.structure.parseTrajectory(
@@ -32,10 +37,6 @@ export async function loadStructureFromURL({
     format,
   )
   const model = await plugin.builders.structure.createModel(trajectory)
-  const seq = model.obj?.data.sequence.sequences[0].sequence.label
-    .toArray()
-    // @ts-expect-error
-    .join('')
 
   await plugin.builders.structure.hierarchy.applyPreset(
     trajectory,
@@ -45,6 +46,5 @@ export async function loadStructureFromURL({
       representationPresetParams: options?.representationParams,
     },
   )
-
-  return { seq: seq as string }
+  return { model }
 }

package/src/ProteinView/clearSelection.ts

@@ -1,5 +1,5 @@
 import { PluginContext } from 'molstar/lib/mol-plugin/context'
 
 export default function clearSelection({ plugin }: { plugin: PluginContext }) {
-  plugin?.managers.interactivity.lociSelects.deselectAll()
+  plugin.managers.interactivity.lociSelects.deselectAll()
 }

package/src/ProteinView/components/ProteinAlignment.tsx

@@ -1,9 +1,9 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { observer } from 'mobx-react'
 import { Tooltip, Typography } from '@mui/material'
 
 // locals
-import { JBrowsePluginProteinViewModel } from '../model'
+import { JBrowsePluginProteinStructureModel } from '../model'
 import ProteinAlignmentHelpButton from './ProteinAlignmentHelpButton'
 import {
   clickProteinToGenome,
@@ -14,42 +14,58 @@ import SplitString from './SplitString'
 const ProteinAlignment = observer(function ({
   model,
 }: {
-  model: JBrowsePluginProteinViewModel
+  model: JBrowsePluginProteinStructureModel
 }) {
   const {
-    structureSeqHoverPos,
-    alignment,
+    pairwiseAlignment,
+    pairwiseAlignmentToStructurePosition,
     structurePositionToAlignmentMap,
-    alignmentToStructurePosition,
+    structureSeqHoverPos,
     showHighlight,
   } = model
-  const a0 = alignment!.alns[0].seq as string
-  const a1 = alignment!.alns[1].seq as string
-  const con = alignment!.consensus
-  const set = new Set<number>()
+
+  const [pairwiseAlignmentHoverPos, setPairwiseAlignmentHoverPos] =
+    useState<number>()
+
+  useEffect(() => {
+    setPairwiseAlignmentHoverPos(
+      structureSeqHoverPos === undefined
+        ? undefined
+        : structurePositionToAlignmentMap?.[structureSeqHoverPos],
+    )
+  }, [structurePositionToAlignmentMap, structureSeqHoverPos])
+
+  if (!pairwiseAlignment) {
+    return <div>No pairwiseAlignment</div>
+  }
+  const a0 = pairwiseAlignment.alns[0].seq
+  const a1 = pairwiseAlignment.alns[1].seq
+  const con = pairwiseAlignment.consensus
+  const gapSet = new Set<number>()
   // eslint-disable-next-line unicorn/no-for-loop
   for (let i = 0; i < con.length; i++) {
     const letter = con[i]
     if (letter === '|') {
-      set.add(i)
+      gapSet.add(i)
     }
   }
 
-  const alignmentHoverPos =
-    structureSeqHoverPos !== undefined
-      ? structurePositionToAlignmentMap?.[structureSeqHoverPos]
-      : undefined
-
-  function onMouseOver(alignmentPos: number) {
-    const structureSeqPos = alignmentToStructurePosition[alignmentPos]
-    model.setHoveredPosition({ structureSeqPos })
-    hoverProteinToGenome({ model, structureSeqPos })
+  function onMouseOver(p: number) {
+    setPairwiseAlignmentHoverPos(p)
+    if (pairwiseAlignmentToStructurePosition) {
+      const structureSeqPos = pairwiseAlignmentToStructurePosition[p]
+      model.setHoveredPosition({ structureSeqPos })
+      hoverProteinToGenome({ model, structureSeqPos })
+    }
   }
-  function onClick(alignmentPos: number) {
-    const structureSeqPos = alignmentToStructurePosition[alignmentPos]
-    clickProteinToGenome({ model, structureSeqPos }).catch(e => {
-      console.error(e)
-    })
+  function onClick(pairwiseAlignmentPos: number) {
+    if (pairwiseAlignmentToStructurePosition) {
+      const structureSeqPos =
+        pairwiseAlignmentToStructurePosition[pairwiseAlignmentPos]!
+      clickProteinToGenome({ model, structureSeqPos }).catch((e: unknown) => {
+        console.error(e)
+      })
+    }
   }
   return (
     <div>
@@ -75,14 +91,14 @@ const ProteinAlignment = observer(function ({
         }}
       >
         <div>
-          <Tooltip title="This is the sequence of the protein from the structure file">
-            <span>STRUCT&nbsp;</span>
+          <Tooltip title="This is the sequence of the protein from the reference genome transcript">
+            <span>GENOME&nbsp;</span>
           </Tooltip>
           <SplitString
             str={a0}
             showHighlight={showHighlight}
-            col={alignmentHoverPos}
-            set={set}
+            hoveredPosition={pairwiseAlignmentHoverPos}
+            gapSet={gapSet}
             onMouseOver={onMouseOver}
             onClick={onClick}
           />
@@ -92,21 +108,21 @@ const ProteinAlignment = observer(function ({
           <SplitString
             showHighlight={showHighlight}
             str={con}
-            col={alignmentHoverPos}
-            set={set}
+            hoveredPosition={pairwiseAlignmentHoverPos}
+            gapSet={gapSet}
             onMouseOver={onMouseOver}
             onClick={onClick}
           />
         </div>
         <div>
-          <Tooltip title="This is the sequence of the protein from the reference genome transcript">
-            <span>GENOME&nbsp;</span>
+          <Tooltip title="This is the sequence of the protein from the structure file">
+            <span>STRUCT&nbsp;</span>
           </Tooltip>
           <SplitString
             str={a1}
-            col={alignmentHoverPos}
+            hoveredPosition={pairwiseAlignmentHoverPos}
             showHighlight={showHighlight}
-            set={set}
+            gapSet={gapSet}
             onMouseOver={onMouseOver}
             onClick={onClick}
           />

package/src/ProteinView/components/ProteinAlignmentHelpButton.tsx

@@ -3,7 +3,7 @@ import { IconButton } from '@mui/material'
 import { getSession } from '@jbrowse/core/util'
 
 // locals
-import { JBrowsePluginProteinViewModel } from '../model'
+import { JBrowsePluginProteinStructureModel } from '../model'
 
 // icons
 import Help from '@mui/icons-material/Help'
@@ -15,17 +15,17 @@ const ProteinAlignmentHelpDialog = lazy(
 export default function ProteinAlignmentHelpButton({
   model,
 }: {
-  model: JBrowsePluginProteinViewModel
+  model: JBrowsePluginProteinStructureModel
 }) {
   return (
     <IconButton
       style={{ float: 'right' }}
-      onClick={() =>
+      onClick={() => {
         getSession(model).queueDialog(handleClose => [
           ProteinAlignmentHelpDialog,
           { handleClose },
         ])
-      }
+      }}
     >
       <Help />
     </IconButton>

package/src/ProteinView/components/ProteinAlignmentHelpDialog.tsx

@@ -3,7 +3,6 @@ import {
   Button,
   DialogActions,
   DialogContent,
-  Divider,
   Typography,
   TypographyProps,
 } from '@mui/material'
@@ -30,17 +29,17 @@ export default function ProteinAlignmentHelpDialog({
     <Dialog open maxWidth="lg" onClose={handleClose} title="Protein alignment">
       <DialogContent>
         <Typography2>
-          This panel shows the computed alignment of the reference genome
-          sequence to the structure sequence. The structure file (PDB file,
-          mmCIF file, etc) has a stored representation of the e.g. amino acid
-          sequence but the sequence in the structure file can differ from the
-          sequence from the gene on the genome browser
+          This panel shows the computed pairwise alignment of the reference
+          genome sequence to the structure sequence. The structure file (PDB
+          file, mmCIF file, etc) has a stored representation of the e.g. amino
+          acid sequence but the sequence in the structure file can differ from
+          the sequence from the gene on the genome browser
         </Typography2>
         <Typography2>
           In order to resolve this, we align the two sequences together (using
-          EMBOSS needle) to get alignment of the genome&apos;s representation of
-          the protein and the structure file&apos;s representation of the
-          protein.
+          EMBOSS needle) to get pairwise alignment of the genome&apos;s
+          representation of the protein and the structure file&apos;s
+          representation of the protein.
         </Typography2>
         <Typography2>
           If you need a 100% fidelity protein, you can do a folding with e.g.
@@ -48,9 +47,14 @@ export default function ProteinAlignmentHelpDialog({
           sequence of the transcript
         </Typography2>
       </DialogContent>
-      <Divider />
       <DialogActions>
-        <Button onClick={() => handleClose()} color="primary">
+        <Button
+          onClick={() => {
+            handleClose()
+          }}
+          variant="contained"
+          color="primary"
+        >
           Close
         </Button>
       </DialogActions>

package/src/ProteinView/components/ProteinView.tsx

@@ -1,121 +1,55 @@
 import React, { useEffect } from 'react'
 import { observer } from 'mobx-react'
-import { ErrorMessage } from '@jbrowse/core/ui'
-import { PluginContext } from 'molstar/lib/mol-plugin/context'
+import { ErrorMessage, ResizeHandle } from '@jbrowse/core/ui'
 
 // locals
 import { JBrowsePluginProteinViewModel } from '../model'
-import Header from './Header'
+import ProteinViewHeader from './ProteinViewHeader'
 
 // hooks
 import useProteinView from '../useProteinView'
-import useProteinViewClickBehavior from '../useProteinViewClickBehavior'
-import useProteinViewHoverBehavior from '../useProteinViewHoverBehavior'
-
-// utils
-import selectResidue from '../selectResidue'
-import highlightResidue from '../highlightResidue'
-import clearSelection from '../clearSelection'
 
 // css
 import css from '../css/molstar'
 
-if (document?.head) {
-  const style = document.createElement('style')
-  style.append(css)
-  document.head?.append(style)
-}
+const style = document.createElement('style')
+style.append(css)
+document.head.append(style)
 
 const ProteinView = observer(function ({
   model,
 }: {
   model: JBrowsePluginProteinViewModel
 }) {
-  const { url, data, showControls } = model
-  const { plugin, seq, parentRef, error } = useProteinView({
-    url,
-    data,
+  const { showControls } = model
+  const { plugin, parentRef, error } = useProteinView({
     showControls,
   })
+
+  useEffect(() => {
+    model.setMolstarPluginContext(plugin)
+  }, [plugin, model])
+
   return error ? (
     <ErrorMessage error={error} />
   ) : (
-    <ProteinViewContainer
-      model={model}
-      plugin={plugin}
-      seq={seq}
-      parentRef={parentRef}
-    />
+    <ProteinViewContainer model={model} parentRef={parentRef} />
   )
 })
 
 const ProteinViewContainer = observer(function ({
   model,
-  plugin,
-  seq,
   parentRef,
 }: {
   model: JBrowsePluginProteinViewModel
-  plugin?: PluginContext
-  seq?: string
   parentRef?: React.RefObject<HTMLDivElement>
 }) {
-  const {
-    width,
-    height,
-    structureSeqToTranscriptSeqPosition,
-    seq2,
-    structureSeqHoverPos,
-    showHighlight,
-    alignment,
-  } = model
-
-  const { error } = useProteinViewClickBehavior({ plugin, model })
-  useProteinViewHoverBehavior({ plugin, model })
-
-  const structure =
-    plugin?.managers.structure.hierarchy.current.structures[0]?.cell.obj?.data
-
-  useEffect(() => {
-    model.setSeqs(seq, seq2)
-  }, [seq, model, seq2])
-
-  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 || structureSeqHoverPos === undefined) {
-      return
-    }
-    if (structureSeqHoverPos !== undefined) {
-      highlightResidue({
-        structure,
-        plugin,
-        selectedResidue: structureSeqHoverPos,
-      })
-    } else {
-      console.warn('not found')
-    }
-  }, [plugin, structure, structureSeqHoverPos])
+  const { width, height, error } = model
 
   return (
-    <div style={{ background: !alignment ? '#ccc' : undefined }}>
+    <div style={{ background: '#ccc' }}>
       {error ? <ErrorMessage error={error} /> : null}
-      <Header model={model} />
+      <ProteinViewHeader model={model} />
       <div
         ref={parentRef}
         style={{
@@ -124,6 +58,12 @@ const ProteinViewContainer = observer(function ({
           height,
         }}
       />
+      <ResizeHandle
+        style={{ height: 4, background: 'grey' }}
+        onDrag={delta => {
+          model.setHeight(model.height + delta)
+        }}
+      />
     </div>
   )
 })

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,48 +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" />
-        )
-      ) : null}
+      {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={[
@@ -59,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)
+            },
           },
         ]}
       >