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!