Reusing Plant Reactome's Fireworks Widget?

What is it?

The Pathways Overview is a genome-wide, hierarchical visualization of Plant Reactome pathways in a space-filling graph. Each node represents a pathway, and the size of the node reflects the number of entities (proteins, small molecules, genes, etc) belonging to that pathway. The edges represent the connection between the different pathway nodes within the Plant Reactome pathway hierarchy.

The central node within each pathway burst is the parent (or top-level) pathway node. Each child (or sub level) pathway belonging to the pathway hierarchy is represented as a node, which is projected outwards from the central node and connected to the subsequent pathway in the hierarchy, until the lowest level pathway is reached. When the graph initially loads, the Pathways Overview display automatically fits all the nodes and edges into the existing area.

How to use it?

To reuse our viewer you need to follow the following steps

1. Include the fireworks javascript dependency in you HTML header

    <script type="text/javascript" language="javascript" src=""></script>

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

    <div id="fireworksHolder"></div>

3. Set a proxy in your server under "/reactome" pointing to ""

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

    //Creating the Plant Reactome Fireworks widget
    //Take into account a proxy needs to be set up in your server side pointing to
    function onReactomeFireworksReady(){  //This function is automatically called when the widget code is ready to be used
        var fireworks = Reactome.Fireworks.create({
            "proxyPrefix" : "/reactome",
            "placeHolder" : "fireworksHolder",
            "width" : 900,
            "height" : 450

        //Adding different listeners

        fireworks.onFireworksLoaded(function (loaded) {
  "Loaded ", loaded);

        fireworks.onNodeHovered(function (hovered){
  "Hovered ", hovered);

        fireworks.onNodeSelected(function (selected){
  "Selected ", selected);

Current available options for listeners and methods:

Method Params Description
create :: Constructor
param :: json object
   'proxyPrefix' : string,
   'placeHolder' : string,
   'width' : int (optional),
   'height' : int (optional)
Creates and returns a new Reactome.Fireworks object
highlightNode(stId) :: void Item stable identifier
stId : string
Highlights the specified item if it exists in the fireworks
resetAnalysis() :: void Resets the analysis overlay
resetHighlight() :: void Clears the highlights in the fireworks
resetSelection() :: void Clears the selection in the fireworks
resize(width, height) :: void widht: int
height: int
Resizes the viewport to the specified with and height
selectNode(stId) :: void Item stable identifier
stId : string
Selects the specified item if it exists in the fireworks
setAnalysisToken(token, resource) :: void Analysis token
token : string
resource : string
Overlays the analysis result corresponding to the specified (token, resource)
showAll() :: void Shows all the pathways in the viewport
onNodeSelected(function(obj)) :: void obj is selected item:
   'stId' : string,
   'displayName' : string,
   'schemaClass' : string,
The function is called when an object in the fireworks is selected by the user action
onNodeHovered(function(obj)) :: void obj is hovered item:
   'stId' : string,
   'displayName' : string,
   'schemaClass' : string,
The function is called when an object in the fireworks is hovered by the user action
onFireworksLoaded(function(id)) :: void The db identifier of the loaded species in fireworks
id: string
The function is called when a fireworks is loaded in the viewer
onAnalysisReset(function()) :: void The function receives no parameters The function is called when the users resets the analysis overlay

fireworks.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

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