Difference between revisions of "Draft Protype for Visualization of phylogenetic data"

From Evolutionary Informatics Working Group
Jump to: navigation, search
(Added the demo link & wrote a note about Phylowidget)
(Visualization of phylogenetic data)
Line 17: Line 17:
 
* 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
 
* 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]]? )
 
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  
+
  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  
+
  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
 
  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,  
+
  is its ight-weightness, no requirement for user to install any application or plugin in the client side,
 
  availability of the [http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element drawing features] for the browers and current availability of
 
  availability of the [http://www.whatwg.org/specs/web-apps/current-work/#the-canvas-element 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
 
  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.
 
  a redundant one and I really like to get more feedback from other experts on approach before delving into it.
 +
--[[User:Vgopalan|vivek]] 00:17, 4 March 2009 (EST)
 
* System should provide options to manipulate  plotting properties (vertical spacing, line width, tree display type)
 
* 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 Options to control features to be displayed (meta data of the tree or node)
Line 49: Line 50:
  
 
;Implementation
 
;Implementation
* '''[http://exon.niaid.nih.gov/nexplorer3/ Demo link]'''  
+
* '''[http://exon.niaid.nih.gov/nexplorer3/ 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.
 
* 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 a simple parser for Newick Tree with only node labels (cannot parse branchlengths)

Revision as of 01:17, 4 March 2009

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