A session I delivered in DevDay 2016

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

23. Biology Disclaimer

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? 

29. Maybe in BioJS?
http://www.biojs.io/

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

32. Demo
AngularPlasmid + $compile

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…

36. What’s the problem?

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

41. Demo
Genome Viewer

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!