sync w reactome plugin

GMOD · Feb 22, 2022 · 8fd16d0 · 8fd16d0
1 parent fa7e0d0
commit 8fd16d0
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 15 deletions.
diff --git a/src/IdeogramFeatureWidget/IdeogramFeatureWidget.tsx b/src/IdeogramFeatureWidget/IdeogramFeatureWidget.tsx
@@ -13,12 +13,15 @@ import {
   Link,
   Chip,
   Button,
+  IconButton,
+  Tooltip,
   makeStyles,
 } from '@material-ui/core'
-import { navToAnnotation } from '../util'
+import { navToAnnotation, openReactomeView } from '../util'
 import { TreeView, TreeItem } from '@material-ui/lab'
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 import ChevronRightIcon from '@material-ui/icons/ChevronRight'
+import MenuOpenIcon from '@material-ui/icons/MenuOpen'
 
 const useStyles = makeStyles(() => ({
   table: {
@@ -135,24 +138,52 @@ function NavLink(props: any) {
   )
 }
 
-function Hierarchy(props: any) {
-  const { hierarchy } = props
+function ReactomeItem(props: any) {
+  const { node, model, pathways, geneName } = props
   const classes = useStyles()
 
+  return (
+    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+      <Link
+        className={classes.link}
+        target="_blank"
+        rel="noopener"
+        href={`https://idg.reactome.org/PathwayBrowser/#/${node.stId}&FLG=${node.name}`}
+        underline="always"
+      >
+        {node.name}
+      </Link>
+      {model.hasPlugin('ReactomePlugin') ? (
+        <Tooltip title="Open pathway in Reactome Plugin">
+          <IconButton
+            color="primary"
+            component="span"
+            onClick={() => {
+              openReactomeView(node.stId, pathways, node.name, geneName, model)
+            }}
+          >
+            <MenuOpenIcon />
+          </IconButton>
+        </Tooltip>
+      ) : null}
+    </div>
+  )
+}
+
+function Hierarchy(props: any) {
+  const { hierarchy, model, pathways, geneName } = props
+
   const renderTree = (nodes: any) => (
     <TreeItem
       key={nodes.stId}
       nodeId={nodes.stId}
       label={
-        <Link
-          className={classes.link}
-          target="_blank"
-          rel="noopener"
-          href={`https://idg.reactome.org/PathwayBrowser/#/${nodes.stId}&FLG=${nodes.name}`}
-          underline="always"
-        >
-          {nodes.name}
-        </Link>
+        <ReactomeItem
+          node={nodes}
+          model={model}
+          pathways={pathways}
+          geneName={geneName}
+        />
       }
     >
       {Array.isArray(nodes.children)
@@ -200,7 +231,12 @@ function IdeoFeatureDetails(props: any) {
       {fullFeature.externalLinks && <ExternalLinks feature={fullFeature} />}
       {fullFeature.synonyms && <Synonyms feature={fullFeature} />}
       {fullFeature.hierarchy.length > 0 && (
-        <Hierarchy hierarchy={fullFeature.hierarchy} />
+        <Hierarchy
+          hierarchy={fullFeature.hierarchy}
+          model={model}
+          pathways={fullFeature.pathways}
+          geneName={fullFeature.name}
+        />
       )}
     </Paper>
   )

diff --git a/src/IdeogramFeatureWidget/index.tsx b/src/IdeogramFeatureWidget/index.tsx
@@ -4,14 +4,16 @@ import { ElementId } from '@jbrowse/core/util/types/mst'
 import { types } from 'mobx-state-tree'
 import ReactComponent from './IdeogramFeatureWidget'
 
-export default (_: PluginManager) => {
+export default (pluginManager: PluginManager) => {
   const configSchema = ConfigurationSchema('IdeogramFeatureWidget', {})
   const stateModel = types
     .model('IdeogramFeatureWidget', {
       id: ElementId,
       type: types.literal('IdeogramFeatureWidget'),
       featureData: types.frozen({}),
-      view: types.safeReference(_.pluggableMstType('view', 'stateModel')),
+      view: types.safeReference(
+        pluginManager.pluggableMstType('view', 'stateModel'),
+      ),
     })
     .actions(self => ({
       setFeatureData(data: any) {
@@ -20,6 +22,9 @@ export default (_: PluginManager) => {
       clearFeatureData() {
         self.featureData = {}
       },
+      hasPlugin(name: string) {
+        return pluginManager.hasPlugin(name)
+      },
     }))
 
   return { configSchema, stateModel, ReactComponent }

diff --git a/src/util.tsx b/src/util.tsx
@@ -66,6 +66,37 @@ export const tierLegend = [
   },
 ]
 
+export async function openReactomeView(
+  pwId: string,
+  pathways: any,
+  pwName: string,
+  geneName: string,
+  model: IdeogramViewModel,
+) {
+  const session = getSession(model)
+  const rv = session.views.find(view => view.type === 'ReactomeView') as any
+
+  if (rv) {
+    rv.setPathways(pathways)
+    rv.setSelectedPathway(pwId)
+    rv.setGene(geneName)
+    rv.setMessage(
+      `Pathways relating to ${geneName} are being displayed. "${pwName}" has been selected.`,
+    )
+  } else {
+    const view = session.addView('ReactomeView', {
+      displayName: 'Reactome View',
+    }) as any
+    view.setPathways(pathways)
+    view.setSelectedPathway(pwId)
+    view.setGene(geneName)
+    view.setMessage(
+      `Pathways relating to ${geneName} are being displayed. "${pwName}" has been selected.`,
+    )
+    await when(() => view.initialized)
+  }
+}
+
 export async function navToAnnotation(
   locString: string,
   model: IdeogramViewModel,