biological modelling, powered by angularjs
TRANSCRIPT
Biological Modelling, Powered by AngularJS Gil Fink CEO and Senior Consultant, sparXys @gilfink
This session is about graphics (SVG)
This is how I draw a man…
And this is how I draw a bus…
This is how I draw a toilet…
I wish…
And somebody let me speak about graphics…
Me
My AngularConnect Session
Ok, so let’s get serious!
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
Agenda • SVG in a Nutshell
• SVG + AngularJS = <3
• Use Case: Biological Modelling
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
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>
SVG Goodies Demo
SVG + AngularJS = <3 Combining Angular and SVG is not hard
SVG elements are part of the DOM
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'
SVG & AngularJS Directive Demo
Use Case SVG + AngularJS for Biological Modelling
Biology Disclaimer
Biology 101 • Plasmids - small DNA molecules represented as a
circle with annotations
Biology 101 • Sequence – primary structure of a biological
molecule written in characters (A, T, G, C)
Customer Needs • Synchronize plasmid and sequence views
• Fast scrolling
• Sequence and plasmid selection
• Annotation layers
Lazy Developer
Are there any JavaScript libraries for plasmids or sequences?
With AngularJS support?
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>
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
No DNA sequence library
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…
What’s the problem you ask?
Can we do better? Maybe infinite scrolling?
Not good enough!
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/
Demo Genome Viewer (work in progress)
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
Thank You!