Draft Protype for Visualization of phylogenetic data

From Evolutionary Informatics Working Group
Jump to: navigation, search

Visualization of phylogenetic data

--vivek 00:52, 3 March 2009 (EST)

Design prototype

I have created a PowerPoint version of the draft prototype for visualization of phylogenetic data use case. Here is the PPT link (right click and save). You are welcome to download the powerpoint file and add your comments or suggestions or ideas.

Goal
  • To build a web-based application that provides tools for visualization and manipulation of phylogenetic trees obtained using PhyloWS service.
Scope & Requirements
  • The system is web application and requires a javascript enabled web browser.
  • The visualization system will handle only the trees in phylogenetic data. Later it should be extended for the characters data.
  • The system should be able to read Web services (PhyloWS)
  • The system should handle NeXML and display the phylogenetic trees it in the first version.
  • The tree should be drawn using the <Canvas> tag (firefox) and VML for IE in the first version and should support image-based manipulation of

trees later(the image and imagemaps should be generated from the web service??). -- (Rutger: Why not adapt PhyloWidget to NeXML? )

Phylowidget is a Java applet based web application build using processing framework. It has all the features for viewing phylogenetic tree and other related information and for processing PhyloWS or NeXML content . My suggestion for Ajax based client application instead of the applet is its ight-weightness, no requirement for user to install any application or plugin in the client side, availability of the drawing features for the browers and current availability of easy-to-build frameworks. If PhyloWidget fits all the requirement then this effort is more like a redundant one and I really like to get more feedback from other experts on approach before delving into it.

--vivek 00:17, 4 March 2009 (EST)

(Greg has added some continued discussion to the discussion page, 10:00 GMT March 4 2009)

  • System should provide options to manipulate plotting properties (vertical spacing, line width, tree display type)
  • System should provide Options to control features to be displayed (meta data of the tree or node)
  • System should provide simple animations on the nodes (optional)
  • System should process trees with 50 OTUs in less than 1 second in my MacBookPro (2GB RAM and 2.4Ghz Intel dual core).
Inputs
Output

One of the following outputs

  • A phylogenetic tree drawn using the <canvas> tag and clickable Popup-panel to manage, query or manipulate node properties
  • A phylogenetic tree image with the clickable Popup-panel to manage,query or manipulate node properties
References
Programming language & Packages
Implementation
  • Demo link
  • I spend the whole yesterday (10 hours) and to build a basic framework in GWT based on the draft protype PPT. See below for screen shot of the development page.
    • Implemented a simple parser for Newick Tree with only node labels (cannot parse branchlengths)
    • Implemented MouseListeners for the nodes in the tree
    • Created a basic control panel based on the draft prototype
    • A cladogram drawing utility is implemented to plot the tree in <Canvas> tag in firfox or VML in IE.
  • I did this to show that GWT could be used to build web applications in a short time. This is the first time I have ever used canvas and I am really surprised to build a simple interface in a day time.
  • The application worked in FireFox 3.0.6, Safari 3.2.1 and IE7 (my PC desktop and MacBookPro).
  • I do not have public server to host the development site now, so I have provided the screenshot.
  • I would go through the tol webservice documentation by Rutger and integrate a web-service call to the application (because of single-origin policy in browser, I cannot read XML directly from external source).
Screenshots

Demo link

Screenshot of the partial implementation of the web application