Bernat Gel and Xavier Messeguer ( bgel@lsi.upc )

1. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel DASGenExpInteractive Web-based genome browser Bernat Gel and Xavier Messeguer (bgel@lsi.upc.edu)

2. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Index DASGenExp Client-side Drawing Features ImplementationDemonstration Further Work • DASGenExp is a web-based interactive genomic DAS browser • It has direct interaction capabilities • It's based on the “smart client – dumb server” philosophy • In contrast to many other web-based browsers, it uses client-side drawing to represent the genomic data • DASGenExp • Client-side Drawing • Features • Implementation • Demonstration • Further Work

3. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel DASGenExp DASGenExp Client-side Drawing Features ImplementationDemonstration Further Work

4. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel DASGenExp DASGenExp Client-side Drawing Features ImplementationDemonstration Further Work • DASGenExp is a web-based interactive genomic DAS browser • It has direct interaction capabilities • It's based on the “smart client – dumb server” philosophy • In contrast to many other web-based browsers, it uses client-side drawing to represent the genomic data

5. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Client-side drawing: Why? DASGenExp Client-side Drawing Features ImplementationDemonstration Further Work • Increased control over the drawing process • Can change color, shapes, order easily • Information more accessible to the user • Removes load from servers • Most redraw action don't trigger server requests • Increased cacheability • Faster responding to user commands

6. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Client-side drawing: How? DASGenExp Client-side Drawing Features ImplementationDemonstration Further Work • Two cache levels: server and client • Data is transmitted only once to the client • JSON format, small • Except if removed from cache to save memory • Data is redrawn every time there is a change in: • Position • Zoom Level • It's fast

7. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Client-side drawing: Canvas DASGenExp Client-side Drawing Features ImplementationDemonstration Further Work • Drawing is made using the canvas element • Completely procedural • Small set of drawing primitives • Once drawn, not modifiable (different to SVG) • Canvas element • Present in Firefox and WebKit based browsers • So: no IE • iecanvas.js → canvas emulation using ie technologies

8. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel DASGenExp Features DASGenExp Client-side Drawing FeaturesImplementationDemonstration Further Work • Interactive • Direct interaction with data, just drag with the mouse • Zoom can be changed using the slider or scroll wheel • Flexible • Data representation configuration can be easily changed

9. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel DASGenExp Features DASGenExp Client-side Drawing Features ImplementationDemonstration Further Work • Feature Rich • Multiple independent viewers • Arbitrary number of linked zoom views • Filters • Broad zoom range : from base level to whole chromosome • Fast Responding • Most user actions do not require a server request

10. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Implementation: overview DASGenExp Client-side Drawing Features ImplementationDemonstration Further Work DASGenExp Implementation Client DAS Source DAS Source DASGenExp Server DAS Source DAS Source Client DAS Source AJAX + JSON HTTP + XML

11. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Implementation: Client DASGenExp Client-side Drawing Features Implementation Demonstration Further Work • Written in Javascript • Prototype • Ext • Object Oriented Javascript DataProxy Track TrackContainerGroup GenExp Drawer TrackView TrackContainer Colorer

12. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Implementation: Client DASGenExp Client-side Drawing Features ImplementationDemonstration Further Work • Easily extensible in specific points • Drawers • Colorers • Filters/Computers • A drawer drawFeature =function(ctx, x0, y0, x1, y1, baseColor,outlineColor){ y0 = y0+(+2); y1 = y1-2; if(this.darkerOutline){ ctx.fillStyle = outlineColor; ctx.fillRect(x0 -0.5, y0 -0.5, x1 - x0 +1, y1 - y0 +1); } ctx.fillStyle = baseColor; ctx.fillRect(x0,y0,x1-x0,y1-y0); };

13. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Implementation: Server DASGenExp Client-side Drawing Features Implementation Demonstration Further Work • Simple Server • Fetch • Translate XML → JSON • Cache • A set of CGI scripts running on apache • Uses Bio::Das::Lite to handle all DAS communication

14. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Implementation: Server DASGenExp Client-side Drawing Features Implementation Demonstration Further Work • Simple but not so dumb: multiscale • Multiscale data: we can go from 8 pixels per base to almost 1Mb per pixel • Data resampling • Chop regions in small chunks (servers respond fast) • No maxbins • Greater control • Cache

15. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Demonstration DASGenExp Client-side Drawing Features Implementation Demonstration Further Work http://gralggen.lsi.upc.edu/recerca/DASgenexp

16. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Further Work DASGenExp Client-side Drawing Features ImplementationDemonstrationFurther Work • Really parallel requests • XmlHttpRequest limits. Comet? Performance

17. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Further Work DASGenExp Client-side Drawing Features ImplementationDemonstration Further Work • DAS styleheets • Registry Integration • Arbitrary servers • Filters/Computations • Search Performance Extensions

18. Questions or Suggestions? DASGenExp Client-side Drawing Features ImplementationDemonstration Further Work DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel