Biological Modeling, Powered by AngularJS
0 likes303 views
This document discusses using SVG and AngularJS for biological modeling. It provides an overview of SVG, how it can be used with AngularJS, and demonstrates a use case of building a genome viewer that combines AngularPlasmid and virtual scrolling to efficiently display long DNA sequences. Key challenges addressed include dynamically generating plasmid views, adding selection capabilities, and only rendering the visible portion of long sequences to enable fast scrolling.
![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-160915205447/85/Biological-Modeling-Powered-by-AngularJS-20-320.jpg)
Biological Modeling, Powered by AngularJS
- 1. Biological Modeling, Powered by AngularJS Gil Fink CEO and Senior Consultant, sparXys @gilfink
- 2. This session is about working with graphics
- 3. But…
- 4. I’m not a graphics designer
- 5. This is how I draw toilets…
- 7. I wish…
- 9. And somebody let me speak about graphics…
- 11. Ok, so let’s get serious!
- 12. About Me • sparXys CEO and senior consultant • Microsoft MVP • Co-author of Pro Single Page Application Development (Apress) • Angular UP conference and GDG Rashlatz Meetup co-organizer
- 13. Agenda • SVG in a Nutshell • SVG + AngularJS = <3 • Use Case: Biological Modeling
- 14. 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
- 15. 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>
- 16. What we can do with SVG? Demo http://www.themaninblue.com/experiment/Blobular/ http://lavadip.com/experiments/jigsaw/
- 17. SVG + AngularJS = <3 Combining SVG and AngularJS isn’t hard SVG elements are part of the DOM!
- 18. SVG + AngularJS 1 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'
- 19. SVG & AngularJS 1 Directive Demo
- 20. 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"/>
- 21. SVG + Angular 2 Component Demo
- 22. Use Case Using 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? Preferable with AngularJS support?
- 30. 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>
- 31. 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. No DNA sequence library
- 34. 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…
- 38. Can we do better? Maybe infinite scrolling? Not good enough!
- 39. Virtual Scrolling • Generate only the current viewport • Good reading reference: o https://developers.google.com/web/updates/2016/07/infinite-scroller?hl=en o http://blog.stackfull.com/2013/02/angularjs-virtual-scrolling-part-1/ o http://blog.stackfull.com/2013/03/angularjs-virtual-scrolling-part-2/
- 40. Front-end Architecture AngularPlasmid Each row is a directive
- 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 modeling using SVG and AngularJS
- 43. Thank You!