Pathways Overview JS

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

 

Reusing Reactome's Pathways Overview Widget?

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="https://reactome.org/FireworksJs/fireworks/fireworks.nocache.js"></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 "https://reactome.org"

4. Create and initialise the pathways overview from your javascript code

    //Creating the Reactome pathways overview widget
    function onReactomeFireworksReady(){  //This function is automatically called when the widget code is ready to be used
        var fireworks = Reactome.Fireworks.create({
            "placeHolder" : "fireworksHolder",
            "width" : 930,
            "height" : 500
        });

        //Adding different listeners

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

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

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

FireworksJs API

The current implementation supports the following listeners and methods:

MethodParamsDescription
create :: Constructor
  Reactome.Fireworks.create(params);		 param :: json object
 {
   'proxyPrefix' : string,
   'placeHolder' : string,
   'width' : int (optional),
   'height' : int (optional)
 }		 Creates and returns a new Reactome.Fireworks object
flagItems(String identifier) :: void Item identifier
identifier : string		 Flags pathways where the identifier is found. It accepts main identifiers but also cross references, gene names and physical entity stable identifiers
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 width: 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
resource : string		 Overlays the analysis result corresponding to the specified (token, resource)
showAll() :: void   Shows all the pathways in the viewport
onNodesFlaggedReset(function()) :: void The function receives no parameters The function is called when the user resets the flagged items
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 */ });