Biological modeling, powered by angular js

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>

SVG Demo

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 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!