Biological Modeling, Powered by AngularJS
1 like467 views
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, Powered by AngularJS Gil Fink CEO and Senior Consultant, sparXys @gilfink
- 2. This session is about graphics (SVG)
- 3. This is how I draw a man…
- 5. And this is how I draw a bus…
- 7. This is how I draw a toilet…
- 9. I wish…
- 11. And somebody let me speak about graphics… My Codemotion Session Me
- 13. Ok, so let’s get serious!
- 14. About Me • sparXys CEO 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 in a Nutshell • SVG + AngularJS = <3 • Use Case: Biological Modelling
- 16. SVG in a Nutshell • 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 <svg width="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. SVG Demo
- 19. SVG + AngularJS = <3 Combining SVG and AngularJS isn’t hard SVG elements are part of the DOM!
- 20. SVG + AngularJS Caveats • 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. SVG & AngularJS Directive Demo
- 22. Use Case SVG + AngularJS for Biological Modeling
- 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 • Synchronize plasmid and sequence views • Fast scrolling • Sequence and plasmid selection • Annotation layers
- 27. Lazy Developer
- 28. Are there any JavaScript libraries for plasmids or sequences? With AngularJS support?
- 29. AngularPlasmid • DNA plasmid visualization 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
- 32. No DNA sequence library
- 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 problem you ask?
- 37. Can we do better? Maybe infinite scrolling? Not good enough!
- 38. Virtual Scrolling • Generate only 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 row is a directive
- 40. Demo Genome Viewer (work in progress)
- 41. Questions?
- 42. Summary • SVG is one 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. Thank You!