1. Bringing the power of SVG to a genome browser near you! Christopher T Lewis LewisCT@agr.gc.ca CMPT 856 – Presentation 1

2. Outline What the heck? What the heck? Oh, I see… and what is this “power” of which you speak? Oh, I see… and what is this “power” of which you speak? Ok, I guess that’s neat… but surely the existing browsers are good enough? Ok, I guess that’s neat… but surely the existing browsers are good enough? HMM… so what have you got? HMM… so what have you got? What do you propose? What do you propose? You’re thinking of doing it how? You’re thinking of doing it how?

3. What the heck? Where to start really? Where to start really? I don’t know how to do a choose your own adventure presentation, so let’s introduce genome browsers and then talk about SVG. I don’t know how to do a choose your own adventure presentation, so let’s introduce genome browsers and then talk about SVG.

4. What the … a genome browser? The genetic materials of an organism are contained in the genome. The genetic materials of an organism are contained in the genome. The genetic materials contains, among other things, the genes that make us what we are. The genetic materials contains, among other things, the genes that make us what we are. Biologists are often interested in studying the genome of one organism in the context of some other organism as this might help them to spot the meaningful parts. Biologists are often interested in studying the genome of one organism in the context of some other organism as this might help them to spot the meaningful parts.

5. What the … a genome browser? Kind of like you had a book in a language you don’t know, and a book in another related language where you knew a few paragraphs Kind of like you had a book in a language you don’t know, and a book in another related language where you knew a few paragraphs By identifying the similar paragraphs in the unknown languages, you might guess that they had approximately the same meaning By identifying the similar paragraphs in the unknown languages, you might guess that they had approximately the same meaning The visual inspection of a genome is generally performed by way of a genome browser The visual inspection of a genome is generally performed by way of a genome browser

6. What the heck is SVG? SVG – Scalable Vector Graphics SVG – Scalable Vector Graphics A W3C - World Wide Web Consortium - standard (the guys who brought us XML) A W3C - World Wide Web Consortium - standard (the guys who brought us XML) An XML based vector graphics format An XML based vector graphics format No native support in mainstream browsers No native support in mainstream browsers Though Mozilla is working on it Though Mozilla is working on it Most popular viewer – Adobe SVG Viewer Most popular viewer – Adobe SVG Viewer Available for Mac, Linux, Windows Available for Mac, Linux, Windows Though mileage outside Windows + IE might vary Though mileage outside Windows + IE might vary

7. What the heck is SVG? The SVG specification is clear and concise The SVG specification is clear and concise The grammar is quite easy to pick up The grammar is quite easy to pick up Example: Example: Produces 20x20 rectangle at position (10, 10) Produces 20x20 rectangle at position (10, 10) Similarly: Similarly: Produces a D=40 circle centered at (10, 10) Produces a D=40 circle centered at (10, 10)

8. What the heck is SVG? Of course this all needs to be wrapped in a document and there’s some namespace magic, but that’s all cut and paste Of course this all needs to be wrapped in a document and there’s some namespace magic, but that’s all cut and paste Let’s look at a real example: Let’s look at a real example: example1.svg example1.svg example1.svg Vector graphics allow infinite zooming Vector graphics allow infinite zooming Individual graphical elements respond to mouse events and can be declaratively animated Individual graphical elements respond to mouse events and can be declaratively animated

9. Oh, I see… and what is this “power” of which you speak? Infinite scaling and translation without loss of detail Infinite scaling and translation without loss of detail Interactivity on a per element basis Interactivity on a per element basis Plus, the document is a tree and events propagate… Plus, the document is a tree and events propagate… Declarative and scripted Declarative and scripted The ability to add document fragments to an existing document The ability to add document fragments to an existing document The ability to communicate with the server The ability to communicate with the server

10. Ok, I guess … but surely the existing browsers are good enough? The existing browsers are all function The existing browsers are all function Frankly, the existing browsers are more than my browser… and much more widely used Frankly, the existing browsers are more than my browser… and much more widely used However, they’re based on server generated bitmaps, which is a little restrictive However, they’re based on server generated bitmaps, which is a little restrictive You get one fixed view You get one fixed view You need to wait while the server prepares a new view and sends it to you in response to a zoom or translation request You need to wait while the server prepares a new view and sends it to you in response to a zoom or translation request GMOD - Generic Genome Browser GMOD - Generic Genome Browser GMOD - Generic Genome Browser GMOD - Generic Genome Browser

11. HMM… so what have you got? Time for show and tell… Time for show and tell… A GUI library implemented in SVG A GUI library implemented in SVG A GUI library implemented in SVG A GUI library implemented in SVG A more complete example A more complete example A more complete example A more complete example Use of CSS to style document Use of CSS to style document Use of CSS to style document Use of CSS to style document Declarative creation of widgets Declarative creation of widgets Declarative creation of widgets Declarative creation of widgets An SVG based genome browser An SVG based genome browser An SVG based genome browser An SVG based genome browser

12. What do you propose? Bringing the power of SVG to mainstream genome browsers using GBrowse as a starting point Bringing the power of SVG to mainstream genome browsers using GBrowse as a starting point

13. You’re thinking of doing it how? Declarative mechanism for creating the UI Declarative mechanism for creating the UI Plan to re-implement/refactor CGUI to conform to the SPARK framework Plan to re-implement/refactor CGUI to conform to the SPARK framework Rewrite server side of genome browser to allow the insertion of “data access modules” and “request handlers” Rewrite server side of genome browser to allow the insertion of “data access modules” and “request handlers” Write access modules to pull the information I’m interested in from GBrowse database Write access modules to pull the information I’m interested in from GBrowse database

14. You’re thinking of doing it how? Rewrite server so that the UI is generated from the GBrowse configuration file Rewrite server so that the UI is generated from the GBrowse configuration file Initially generate a GBrowse like interface in SVG, and then transition to a more powerful SVG based interface Initially generate a GBrowse like interface in SVG, and then transition to a more powerful SVG based interface

15. End product Ideally, the resulting SVG based genome browser would be a drop in replacement for GBrowse Ideally, the resulting SVG based genome browser would be a drop in replacement for GBrowse However, in all likelihood there will be views in GBrowse that don’t map well to my vision However, in all likelihood there will be views in GBrowse that don’t map well to my vision Thus, I’d like to ensure that the SVG based browser is interlinked with GBrowse Thus, I’d like to ensure that the SVG based browser is interlinked with GBrowse

16. Web References [SVG] http://www.w3.org/TR/SVG/ http://www.w3.org/TR/SVG/ [CGUI] http://homepage.usask.ca/~ctl271/cgui http://homepage.usask.ca/~ctl271/cgui [SPARK] http://www.schemasoft.org http://www.schemasoft.org [Bioviz] http://brassica.ca http://brassica.ca [GMOD] http://www.gmod.org/ http://www.gmod.org/ [GBrowse] http://www.gmod.org/ggb/ http://www.gmod.org/ggb/