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

2. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Index 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 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 Implementation Demonstration Further Work

4. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel DASGenExp 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

5. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Client-side drawing: Why? 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 DASGenExp Client-side Drawing Features Implementation Demonstration Further Work

6. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Client-side drawing: How? 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 DASGenExp Client-side Drawing Features Implementation Demonstration Further Work

7. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Client-side drawing: Canvas DASGenExp Client-side Drawing Features Implementation Demonstration 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 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 DASGenExp Client-side Drawing Features Implementation Demonstration Further Work

9. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel DASGenExp Features 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 DASGenExp Client-side Drawing Features Implementation Demonstration Further Work

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

11. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Implementation: Client Written in Javascript – Prototype – Ext Object Oriented Javascript DataProxyTrack TrackViewTrackContainer TrackContainerGrou p Drawer Colore r GenEx p DASGenExp Client-side Drawing Features Implementation Demonstration Further Work

12. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Implementation: Client 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); }; DASGenExp Client-side Drawing Features Implementation Demonstration Further Work

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

14. DASGenExp – interactive web-based genome browser - DAS Workshop 09 - Bernat Gel Implementation: Server 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 DASGenExp Client-side Drawing Features Implementation Demonstration Further Work

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

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

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

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