diff --git a/src/IdeogramFeatureWidget/IdeogramFeatureWidget.tsx b/src/IdeogramFeatureWidget/IdeogramFeatureWidget.tsx index 834c77e..3bcbcdf 100644 --- 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 ( +
+ + {node.name} + + {model.hasPlugin('ReactomePlugin') ? ( + + { + openReactomeView(node.stId, pathways, node.name, geneName, model) + }} + > + + + + ) : null} +
+ ) +} + +function Hierarchy(props: any) { + const { hierarchy, model, pathways, geneName } = props + const renderTree = (nodes: any) => ( - {nodes.name} - + } > {Array.isArray(nodes.children) @@ -200,7 +231,12 @@ function IdeoFeatureDetails(props: any) { {fullFeature.externalLinks && } {fullFeature.synonyms && } {fullFeature.hierarchy.length > 0 && ( - + )} ) diff --git a/src/IdeogramFeatureWidget/index.tsx b/src/IdeogramFeatureWidget/index.tsx index dbb3d50..9ca5f4b 100644 --- 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 index b6bc17b..057fa77 100644 --- 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,