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.

1. Include the fireworks javascript dependency in you HTML header

    <script type="text/javascript" language="javascript" src="http://plantreactome.gramene.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 "http://plantreactome.gramene.org"

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 plantreactome.gramene.org
    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) {
            console.info("Loaded ", loaded);
        });

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

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

Current available options for listeners and methods:

Method	Params	Description
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
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 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 */ });