Reusing Reactome's Diagram Widget?

What is it?

The 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 Reactome as 'reactions'. Reactions are the core unit of 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="//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. Create and initialise the diagram viewer from your javascript code

    //Creating the Reactome Diagram widget
    function onReactomeDiagramReady(){  //This function is automatically called when the widget code is ready to be used
        var diagram = Reactome.Diagram.create({
            "placeHolder" : "diagramHolder",
            "width" : 650,
            "height" : 450
        });

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

        //Adding different listeners

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

        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, filter) :: void Analysis token
token : string
Analysis results filter
filter :: json object
 {
   'resource' : string,
   'pValue' : number (optional),
   'includeDisease' : boolean (optional),
   'min' : int (optional),
   'max' : int (optional)
   'speciesList' : Array<string> (optional)
 } 		Overlays the analysis result corresponding to the specified (token, filter)
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 */ });