Status : Implemented. View Details
Main Goals :
-
Design a Canvas Interface for the visualization of relations and connectedness of multiple pathways of any species with nodes representing the pathways and arcs representing the relationships.
-
Allow the user to visually interpret the relations of the expression analysis and species comparison analysis, by redirecting and plotting the output to our interface.
Project Functionalities :
Pathway Summary Visualization Interface :
An HTML5 Canvas Interface could be designed which would effectively replace the Sky View or the SkyPainter View used previously for the visual summary of all the pathways in the Reactome Database. The data related to the pathways, the total number of entities(proteins, complexes, chemicals) in any pathway, the common entities between any pathways, can all be stored in a local XML/JSON file which would be parsed.
An algorithm would need to be decided on the degree of linkage between any two pathways. It would have the parameters like the number of common entities between the two pathways, or the number of common reactions etc. This would then be used to calculate the thickness and the length of the edges connecting the two pathways.
There is also a static approach towards this to avoid the unnecessary parsing of the local file, but I am not able to comprehend, how it would assist the dynamic expression analysis/species comparison analysis that we plan to visualize using this interface as a frontend. This would remain a challenge and the approach would need to be worked out. We could also use SVG instead of Canvas.
Nodes would be pathways, arcs would be relationships between them. A node’s size indicates the numbers of proteins contained by the pathway. Edges between pathways are used to show overlapping among pathways (may be protein overlapping or reaction overlapping, or perhaps even interactions); the edge weights are proportional to the size of overlapping. In this way, we may draw a complete graph.
The Nodes would be of varied sizes depending on the number of entities in any pathway. We can choose a certain level of cutoff for edges, so that the number of edges is visually manageable for the user. A better solution would be to embed zoom and pan controls so that the user can move across the canvas.
Currently we are only visualizing the top level pathways in the heirarchy, but we can include controls (maybe right clicking a node etc.) which would allow the user to move down the heirarchy. This would be another challenge, but it would always be interesting to show pathways as subsets to another pathways. Some controls could be added for any user to move up and down the heirarchy.
The main reason I think over choosing HTML 5 Canvas over ImageMaps (used in Sky View) for the visualization would be to allow dynamic coloring of the nodes for the expression analysis purposes. Moreover I would like to integrate various event handlers which would trigger specific events when the user hovers his mouse or clicks/right-clicks on any particular node or an arc.
The Interface would also allow the user to categorize the pathways on the basis of their type (like Signalling, Disease etc.) We could add these categories in the bottom, and glow the particular nodes whenever the user hovers the mouse over one category (like in Sky View) Another way to categorize would be whether the pathway is manually curated, experimental etc. Some other interface controls would be for the user to switch between species, as well as on-the-fly expression analysis and species comparison analysis.
Expression Analysis & Species Comparison Analysis:
We can develop a more visual overview of the result set returned by the expression analysis and species comparison analysis (tabular format, where each row indicates a Reactome Pathway and the columns indicate the total number of proteins in that pathway and the number of common proteins) , by superimposing the output on our Interface, and changing the color of the nodes, to indicate the ratio of common proteins present in submitted data. The color would be varied according to the standard color scale (Dark Blue for pathway with maximum number of submitted proteins etc.). Hovering on the Node would indicate the ratio, pathway name and other details. Clicking on any node redirects to the associated pathway diagram and displays it on the Pathway Browser. The color scale here would indicate the expression data.
The User would always have the option to view in old tabular formats.
UI Mockups :
Implementation Plan :
We can develop the GUI using the Google Web Toolkit which also provides the HTML 5 Canvas API Support. 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 application written in Java source code.