Reusing Plant Reactome's Diagram Widget?

What is it?

The Plant Reactome Pathway Diagram Viewer provides users an intuitive means of viewing and interacting with pathway diagrams. Pathway diagrams represent the steps of a pathway as a series of interconnected molecular events, known in Plant Reactome as 'reactions'. Reactions are the core unit of Plant Reactome's data model. They encapsulate 'changes of state' in biology, such as the familiar biochemical reaction where substrates are converted into products by the action of a catalyst, but also include processes such as transport of molecules from one cellular compartment to another, binding, dissociation, phosphorylation, degradation and more.

How to use it?

To reuse our viewer you need to follow the following steps

1. Include the diagram javascript dependency in you HTML header

    <script type="text/javascript" language="javascript" src="http://plantreactome.gramene.org/DiagramJs/diagram/diagram.nocache.js"></script>
        

2. Add a place holder in the body of your web page

    <div id="diagramHolder"></div>
        

3. Set a proxy in your server under "/reactome" pointing to "http://plantreactome.gramene.org"

4. Create and initialise the diagram viewer from your javascript code

    //Creating the Plant Reactome Diagram widget
    //Take into account a proxy needs to be set up in your server side pointing to plantreactome.gramene.org
    function onReactomeDiagramReady(){  //This function is automatically called when the widget code is ready to be used
        var diagram = Reactome.Diagram.create({
            "proxyPrefix" : "http://plantreactome.gramene.org",
            "placeHolder" : "diagramHolder",
            "width" : 650,
            "height" : 450
        });

        //Initialising it to the "Metabolism of nucleotides" pathway
        diagram.loadDiagram("R-OSA-8933811");

        //Adding different listeners

        diagram.onDiagramLoaded(function (loaded) {
            console.info("Loaded ", loaded);
            diagram.flagItems("ELF3");
            diagram.selectItem("R-OSA-8933859");
        });

        diagram.onObjectHovered(function (hovered){
            console.info("Hovered ", hovered);
        });

        diagram.onObjectSelected(function (selected){
            console.info("Selected ", selected);
        });
    }
        

Current available options for listeners and methods:

Method Params Description
create :: Constructor
  Reactome.Diagram.create(params);
param :: json object
 {
   'proxyPrefix' : string,
   'placeHolder' : string,
   'width' : int (optional),
   'height' : int (optional)
 }
Creates and returns a new Reactome.Diagram object
loadDiagram(stId) :: void Pathway stable identifier
stId : string
Loads the specified pathway
flagItems(term) :: void Entity identifier (gene name)
term : string
Flags all entities matching with the "term"
highlightItem(stId) :: void Item stable identifier
stId : string
Highlights the specified item if it exists in the diagram
resetAnalysis() :: void Resets the analysis overlay
resetFlaggedItems() :: void Resets the flagged items
resetHighlight() :: void Clears the highlights in the diagram
resetSelection() :: void Clears the selection in the diagram
resize(width, height) :: void widht: int
height: int
Resizes the viewport to the specified with and height
selectItem(stId) :: void Item stable identifier
stId : string
Selects the specified item if it exists in the diagram
setAnalysisToken(token, resource) :: void Analysis token
token : string
Resource
resource : string
Overlays the analysis result corresponding to the specified (token, resource)
onObjectSelected(function(obj)) :: void obj is selected item:
 {
   'stId' : string,
   'displayName' : string,
   'schemaClass' : string,
   'identifier' : string (optional),
   'geneNames' : Array<string> (optional)
 }
The function is called when an object in the diagram is selected by the user action
onObjectHovered(function(obj)) :: void obj is hovered item:
 {
   'stId' : string,
   'displayName' : string,
   'schemaClass' : string,
   'identifier' : string (optional),
   'geneNames' : Array<string> (optional)
 }
The function is called when an object in the diagram is hovered by the user action
onDiagramLoaded(function(stId)) :: void The stable identifier of the loaded diagram
stId: string
The function is called when a diagram is loaded in the viewer
onFlagsReset(function()) :: void The function receives no parameters The function is called when the flagged items have been reset by the user action
onAnalysisReset(function()) :: void The function receives no parameters The function is called when the users resets the analysis overlay

diagram.onAnalysisReset(function(){ /* your code here */ });
onCanvasNotSupported(function()) :: void The function receives no parameters. The function is called when the browser doesn't support HTML5 Canvas so the viewer cannot be instantiated

diagram.onCanvasNotSupported(function(){ /* your code here */ });