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" : 950, // minimum recommended width
"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:
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 width and height |
selectItem(stId) :: void | Item stable identifier stId : string |
Selects the specified item if it exists in the diagram |
setAnalysisToken(token, resultFilter) :: void |
Analysis token obj resultFilter: {
'resource' : string, 'pValue' : double,(optional) 'includeDisease' : boolean,(optional) 'min' : Integer, (optional) 'max':Integer, (optioinal)
'speciesList': [List<String>]
} |
Overlays the analysis result corresponding to the specified (token, resultFilter) |
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 */ }); |