Download as PDF, PPTX
![SVG + Angular 2 Caveats • In components that generate SVG, use svg: prefix when using SVG elements: • Set SVG attributes using attr. prefix: • Remember: SVG cannot accept elements it doesn't recognize! o Don’t create your own named components, use named attributes instead <svg:circle [attr.cx]="radius" [attr.cy]="radius" [attr.r]="radius"/> <svg:circle cx="10" cy="10" r="30"/>](https://image.slidesharecdn.com/biologicalmodelingpoweredbyangularjs-160714125328/75/Biological-modeling-powered-by-angular-js-21-2048.jpg)
Uploaded byGil Fink
Biological modeling, powered by angular js
This document discusses using SVG and AngularJS for biological modeling. It begins with an introduction to SVG and how it can be used with AngularJS. It then presents a use case of combining SVG, AngularJS and a pre-existing AngularPlasmid component to build interactive views of DNA plasmids and sequences. Problems in rendering large sequences are addressed through techniques like virtual scrolling to only generate the visible viewport. Finally, a demo is shown of a genome viewer application built with these technologies.
Biological modeling, powered by angular js
- 1. Biological Modeling, Poweredby AngularJS Gil Fink CEO and Senior Consultant, sparXys @gilfink
- 2. This session isabout working with graphics
- 3.
- 4. I’m not agraphics designer
- 6. This is howI draw toilets…
- 8.
- 10. And somebody letme speak about graphics…
- 12. Ok, so let’sget serious!
- 13. About Me • sparXysCEO and senior consultant • Microsoft MVP • Co-author of Pro Single Page Application Development (Apress) • Angular up conference and GDG Rashlatz Meetup co-organizer
- 14. Agenda • SVG ina Nutshell • SVG + AngularJS = <3 • Use Case: Biological Modeling
- 15. 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
- 16. 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>
- 17.
- 18. SVG + AngularJS= <3 Combining SVG and AngularJS isn’t hard SVG elements are part of the DOM!
- 19. SVG + AngularJS1 Caveats • In directives that generate SVG, use templateNamespace in the DDO: • Set SVG attributes using ng-attr- prefix: <circle ng-attr-cx="{{radius}}" ng-attr-cy="{{radius}}" ng-attr-r="{{radius}}"/> templateNamespace: 'svg'
- 20. SVG & AngularJS1 Directive Demo
- 21. SVG + Angular2 Caveats • In components that generate SVG, use svg: prefix when using SVG elements: • Set SVG attributes using attr. prefix: • Remember: SVG cannot accept elements it doesn't recognize! o Don’t create your own named components, use named attributes instead <svg:circle [attr.cx]="radius" [attr.cy]="radius" [attr.r]="radius"/> <svg:circle cx="10" cy="10" r="30"/>
- 22. SVG + Angular2 Component Demo
- 23. Use Case Using SVG+ AngularJS for Biological Modeling
- 24.
- 25. Biology 101 • Plasmids- small DNA molecules represented as a circle with annotations
- 26. Biology 101 • Sequence– primary structure of a biological molecule written in characters (A, T, G, C)
- 27. Customer Needs • Synchronizeplasmid and sequence views • Fast scrolling • Sequence and plasmid selection • Annotation layers
- 28.
- 29. Are there anyJavaScript libraries for plasmids or sequences? Preferable with AngularJS support?
- 30.
- 31. 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>
- 32. 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
- 33.
- 34. No DNA sequencelibrary
- 35. 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…
- 37.
- 39. Can we dobetter? Maybe infinite scrolling? Not good enough!
- 40. 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/
- 41. Front-end Architecture AngularPlasmid Each rowis a directive
- 42.
- 43. Summary • SVG isone of the options to create graphics in the browser • SVG and AngularJS can work well together • You can create sophisticated modeling using SVG and AngularJS
- 44.