biological modeling, powered by angularjs
TRANSCRIPT
Biological Modeling, Powered by
AngularJS
Gil Fink CEO and Senior Consultant, sparXys @gilfink
This session is about working
with graphics
But…
I’m not a graphics designer
This is how I draw toilets…
I wish…
And somebody let me speak
about graphics…
Ok, so let’s get serious!
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
Agenda • SVG in a Nutshell
• SVG + AngularJS = <3
• Use Case: Biological Modeling
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>
What we can do with SVG? Demo
http://www.themaninblue.com/experiment/Blobular/
http://lavadip.com/experiments/jigsaw/
SVG + AngularJS = <3
Combining SVG and AngularJS isn’t hard
SVG elements are part of the DOM!
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'
SVG & AngularJS 1 Directive Demo
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"/>
SVG + Angular 2 Component Demo
Use Case Using SVG + AngularJS for Biological Modeling
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? Preferable with AngularJS support?
Maybe in BioJS? http://www.biojs.io/
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
Demo AngularPlasmid + $compile
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?
Can we do better? Maybe infinite scrolling?
Not good enough!
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/
Front-end Architecture
AngularPlasmid
Each row is a directive
Demo Genome Viewer
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
Thank You!