Draft Protype for Visualization of phylogenetic data

From Evolutionary Informatics Working Group
Revision as of 13:48, 3 March 2009 by Vgopalan (talk)
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.

  • 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? )

  • 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).
  • NeXML file
  • PhyloWS url
  • Newick Tree string

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
Programming language & Packages
  • I spend the whole day yesterday (10 hours) and try 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).
Screenshot of the partial implementation of the web application