Reactome Canvas Browser for Pathway Visualization

Status : Implemented. View Details

Short description:

The project involves the development of a canvas-based network interaction visualization prototype for biological interaction networks and pathways having various common nodes of metabolism. Majority of the pathway visualization tools involve Flash. The project developed would have more features like real-time collaboration etc., as well as utilize HTML 5 features allowing it to be light-weight and that can run in both modern browsers in a full-fledged computer, or in a tablet.

Project Goals :

Basic Features :

A canvas-based network interaction visualization prototype for biological interaction networks and pathways having various common nodes of metabolism. It would be similar to [4] with more features and HTML 5 utilization instead of Flash.
Allow the user to import a network for visualization purposes by selecting a layout algorithm of his choice.
Allowing the user to save the network/pathway diagram in a SVG, XGMML, PDF, GraphML or simple PNG images.
Navigation interface (zoom, pan, overview window) & Graphical settings interface (color, size, shape) as panels on either side of the canvas.
Layout modifications (dragging of nodes and edges, change of algorithm settings)
Annotation changes(Sticky notes type)

Project Development Strategies :

I will have to search for open source graph libraries implemented in JavaScript/HTML5, and probably choose one of them as the rendering engine, possible candidates being: JavaScript InfoVis Toolkit, Protovis, RaphaÃ«l, arbor.js

The prototype GUI will assist the user with basic manipulation of the visualized reaction graphs. The GUI should provide functionality to enhance the usability of the framework for exploring graphs and basic annotation/editing of entities.

For import of any network or pathway diagram into the interface, the data format, as supported by the the Reactome pathway library would be utilized. Other text formats (e.g. XGMML, GraphML) would not need to be supported as of now.

SVG image formats could be utilized because we want to be able to easily export the images and manipulate them in other vector graphic programs. However its proper representation in HTML 5 Canvas is important.

The symbol language of the graphs should be SBGN because so far SBGN is the only effort to standardize images of biochemical reaction networks. That means that the shapes of (almost all) nodes are predefined, while the color and size may vary. SBGN defines symbolic notation for biochemical nodes that standardize the icons set that you can use and will thus make it easier to understand reaction network images (some examples [5])

The rendered graph must allow users to, at least, click-select elements (nodes/edges) and move nodes around. Major network layout algorithms like Grid, Border, Flex-Grid, Flow, and Spring Layout algorithms provided by jLayout Javascript Library, would be supported.

It will be written in JavaScript. The idea is to develop the GUI using the Google Web Toolkit [0] which also provides the HTML 5 Canvas API Support. An example of such an application can be found at LucidChart [1][2] which is a Web-based UML/Flow Chart developing software. It allows many researchers to collaborate in real time developing on computer networks (various nodes on left side panel). Basically GWT allows you to write client-side applications in Java and deploy them as JavaScript. JSNI could be utilized for integrating third party Javascript APIs and handwritten javascript with the applization written in Java source code.

It must facilitate navigation in large graphs by providing GUI elements like scroll bars, a pan tool and a zoom tool with a navigator window. It should also be possible for the user to select the desired layout algorithm and start a new layout.

A settings dialogue/menu that lets the user specify graphical properties like colors and node sizes within the limits of the SBGN specification must be designed.

It should also enable the user to modify annotations to nodes. If supported by the visualizer it should contain a dialogue for adding links to biological databases to nodes by clicking on them, or even an import dialogue for experimental data that can be mapped to the nodes.

Timeline :

May 1 – May 31 :

Search for appropriate graph rendering engines.
Studying the SBGN specifications thoroughly.
Develop the basic framework of the GUI. (Zoom, Pan controls, color controls, scroll bars, panels etc.)

June 1 – June 17 :

Develop the import functions for import of any network plot in the specified data format utilized by the Reactome project.

June 17- July 12 :

Deploying HTML 5 Canvas Functions for Drag/Drop of nodes in the network.
Annotations functionality, attributing important links and data to specific nodes.

July 12 : Midterm Submission

July 15 – August 15 :

Develop functionality to enable users to save the network in desired format.
Documentation, Deployment and Testing with user-defined test cases.
Discussion based on further goals of the project and development of few optional features.

August 16- August 20 : Final Report Submission

Challenges :

Major Challenge lies in the development of import functionality fo the network for manual manipulation in the editor. Understanding of the SVG format and appropriate layout of the nodes is an important aspect here. The same conditions apply for saving the network in a desired format for resusability.

Interoperability would be an issue (integrating rudimentary Javascript with Java source code application created by GWT), even though JSNI feature of GWT allows one to integrate third party Javascript APIs and handwritten Javascript with the Java source code of the application. This would require much pondering over.

Future Goals of the project:

Allow the user to import a network for editing purposes or to create a network from scratch by selecting a layout algorithm of his choice.
Real time collaboration between various researchers allowing them to simultaneously edit a biological interaction network from various parts of the world like Google Docs.
Tracking of Revision Changes depending on which user is editing the layout.
Provision of Optional feature for Group Chat