Download to read offline
Uploaded byGil Fink
Biological Modeling, Powered by AngularJS
This document discusses using SVG and AngularJS for biological modeling. It begins with an introduction to SVG and how it can be used to create 2D vector graphics in the browser. It then explains how SVG can be combined with AngularJS using directives and manipulating SVG elements in the DOM. As a use case, it presents using SVG and AngularJS to build components for visualizing DNA plasmids and sequences, including challenges faced and solutions developed like lazy loading data. A demo is shown of an AngularJS-based genome viewer for synchronized plasmid and sequence views.
Biological Modeling, Powered by AngularJS
- 1. Biological Modeling, Poweredby AngularJS Gil Fink CEO and Senior Consultant, sparXys @gilfink
- 2. This session isabout graphics (SVG)
- 3. This is howI draw a man…
- 5. And this ishow I draw a bus…
- 7. This is howI draw a toilet…
- 9.
- 11. And somebody letme speak about graphics… My Codemotion Session Me
- 13. Ok, so let’sget serious!
- 14. About Me • sparXysCEO and Senior consultant • ASP.NET/IIS Microsoft MVP • Co-author of Pro Single Page Application Development (Apress) • ng-conf Israel co-organizer and GDG Rashlatz Meetup co-organizer
- 15. Agenda • SVG ina Nutshell • SVG + AngularJS = <3 • Use Case: Biological Modelling
- 16. SVG in aNutshell • Graphics model in the browser • Create and draw 2D vector graphics using HTML • Support for: o Full DOM access o Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views
- 17. 2D Vector Graphics <svgwidth="400" height="200" xmlns="http://www.w3.org/2000/svg"> <rect fill="red" x="20" y="20" width="100" height="75" /> <rect fill="blue" x="50" y="50" width="100" height="75" /> </svg>
- 18.
- 19. SVG + AngularJS= <3 Combining SVG and AngularJS isn’t hard SVG elements are part of the DOM!
- 20. SVG + AngularJSCaveats • In directives that generate SVG, use templateNamespace in the DDO: • Set SVG attributes by using ng-attr- prefix: <circle ng-attr-cx="{{radius}}" ng-attr-cy="{{radius}}" ng-attr-r="{{radius}}"/> templateNamespace: 'svg'
- 21.
- 22. Use Case SVG +AngularJS for Biological Modeling
- 23.
- 24. Biology 101 • Plasmids- small DNA molecules represented as a circle with annotations
- 25. Biology 101 • Sequence– primary structure of a biological molecule written in characters (A, T, G, C)
- 26. Customer Needs • Synchronizeplasmid and sequence views • Fast scrolling • Sequence and plasmid selection • Annotation layers
- 27.
- 28. Are there anyJavaScript libraries for plasmids or sequences? With AngularJS support?
- 29. AngularPlasmid • DNA plasmidvisualization component using AngularJS and SVG • http://angularplasmid.vixis.com/index.php <plasmid sequencelength='1000'> <plasmidtrack radius='50'> <tracklabel text='Demo'></tracklabel> <trackscale interval='100' showlabels='1'></trackscale> <trackmarker start='212' end='345'></trackmarker> <trackmarker start='530' end='650'> <markerlabel text='Ecol'></markerlabel> </trackmarker> <trackmarker start='677' end='820'></trackmarker> </plasmidtrack> </plasmid>
- 30. Problems We Faced •Generating the plasmid dynamically from specific files o Solved by dynamically adding AngularPlasmid elements o Then, we use the $compile service • Adding selection to the plasmid o Solved by adding our own implementation
- 31.
- 32. No DNA sequencelibrary
- 33. Building the Sequence– The Naïve Way • Let AngularJS generate the whole sequence o Use ng-repeat, SVG and browser scrolling • Add annotation layers with SVG • The problem is…
- 35. What’s the problemyou ask?
- 37. Can we dobetter? Maybe infinite scrolling? Not good enough!
- 38. Virtual Scrolling • Generateonly the current viewport • Good reading reference: o http://blog.stackfull.com/2013/02/angularjs-virtual-scrolling-part-1/ o http://blog.stackfull.com/2013/03/angularjs-virtual-scrolling-part-2/
- 39. Front-end Architecture AngularPlasmid Every rowis a directive
- 40. Demo Genome Viewer (workin progress)
- 41.
- 42. Summary • SVG isone of the options to create graphics in the browser • SVG and AngularJS can work well together • You can create sophisticated modelling using SVG and AngularJS
- 43.