Reactome's DiagramJs widget is our diagram viewer in an ordinary JavaScript API. It is meant to be reused by third party resources in order to display Reactome Pathway Diagrams directly in their web pages and enable users to interact with them.

 

Reusing Reactome's Diagram Widget?

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="https://reactome.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
    //Take into account a proxy needs to be set up in your server side pointing to www.reactome.org
    function onReactomeDiagramReady(){  //This function is automatically called when the widget code is ready to be used
        var diagram = Reactome.Diagram.create({
            "placeHolder" : "diagramHolder",
            "width" : 900,
            "height" : 500
        });

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

        //Adding different listeners

        diagram.onDiagramLoaded(function (loaded) {
            console.info("Loaded ", loaded);
            diagram.flagItems("FYN");
if (loaded == "R-HSA-109582") diagram.selectItem("R-HSA-109582");
});

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

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

DiagramJs API

The current implementation supports the following listeners and methods:

MethodParamsDescription
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 width 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 */ });