TranSMART Base UI

An Angular approach to decoupling TranSMART's presentation layer

Riza Nugraha,  Software Developer at TheHyve

riza@thehyve.nl 

@rizanugraha

  TranSMART Base UI

An Angular approach to decoupling TranSMART's presentation layer

  • TransmartApp from time to time

  • What happened to view (UI) layer

  • UI Protoype

  • Challenges & Future Plans

  • Summary

transmartApp v1.0

  EXTJS 2.2.0

Released as Open Source

2013 Annual Meeting

2014 Annual Meeting

BOSTON HACKATHON

LONDON HACKATHON

UTRECHT HACKATHON

  • UI
    • New look & feel
  • Plugins
    • GWAS
    • Genome Browser
  • More analysis tools
    • aCGH & RNASeq analyses
    • Geneprint
    • Forest Plot
  • More data types support
    • miRNA
    • RNA
    • aCGH

Features after released as open source platform

Dalliance

MyDAS

RestAPI

CoreAPI

CoreDB

GRAILS 1.3.7

GRAILS 2.3.11

RModules

v1.1

v1.2.5

RModules

  EXTJS 2.2.0

  EXTJS 2.2.0

  • Widget based
  • Ready to use
  • By examples
  • Outdated (v2.2.0)
  • No longer supported by Sencha
  • Major re-writing from 2.x - 3.x
  • New version require licensing
  • Used to build main ui elements
  • Tightly coupled with other Grails' view elements (.gsp).

ExtJS, The Goods & Bads

  • Collections of unused legacy codes & libs
  • Spaghetti code, no structure on UI developments
  • Inconsistence look & feel
  • No testing frameworks (unit testing/e2e)

Current UI Issues

2.0 Architecture Workshop - Q1, 2015

https://wiki.transmartfoundation.org/display/TSMTGPL/TranSMART+2.0+Initial+Architecture+Workshop

getStudies

getObservations

getConcepts

getSubjects

getHighDimensional Data

New UI

RModules

CoreAPI

Dalliance

RestAPI

MyDAS

GRAILS 2.3.11

v1.2.x

CoreDB

  EXTJS 2.2.0

getStudies

getObservations

getConcepts

getSubjects

getHighDimensional Data

RModules

CoreAPI

Dalliance

RestAPI

MyDAS

GRAILS 2.3.11

v1.2.5

CoreDB

  EXTJS 2.2.0

New UI

X

X

X

X

X

X

getStudies

getObservations

getConcepts

getSubjects

getHighDimensional Data

CoreAPI

RestAPI

GRAILS 2.3.11

v1.2.5

CoreDB

New UI

Consumer

Endpoint

http://www.translocation.eu/

tranSMART Base UI

tranSMART Base UI

transmart base ui

http://transmart-gb.thehyve.net

transmart-base-ui

http://transmart-gb.thehyve.net

  • Everything you need to build a CRUD app in a cohesive set:
    Data-binding, basic templating directives, form validation, routing, deep-linking, reusable components and dependency injection.
  • Testability story:
    Unit-testing, end-to-end testing, mocks and test harnesses.
  • Seed application
    with directory layout and test scripts as a starting point.
  • Popular
    Maintained by Google, has active and large communities.

https://docs.angularjs.org/guide/introduction

Why AngularJS?

 + Crossfilter

https://dc-js.github.io/dc.js/

 D3 is a JavaScript library for producing dynamic, interactive data visualizations in web browsers. 

Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. 

Scaffolding

http://transmart-gb.thehyve.net

Contents

Development Tools

Unit Testing

E2E Testing

Build System

Package

Management

├──  src/
│   ├──  app/
│   │   ├──  main/
│   │   │   ├──  main.controller.js
│   │   │   ├──  main.controller.spec.js
│   │   │   └──  main.html
│   │   └──  index.js
│   │   └──  index.(css|less|scss)
│   │   └──  vendor.(css|less|scss)
│   ├──  assets/
│   │   └──  images/
│   ├──  components/
│   │   └──  navbar/
│   │   │   ├──  navbar.controller.js
│   │   │   └──  navbar.html
│   ├──  404.html
│   ├──  favico.ico
│   └──  index.html
├──  gulp/
├──  e2e/
├──  bower_components/
├──  nodes_modules/
├──  .bowerrc
├──  .editorconfig
├──  .gitignore
├──  .jshintrc
├──  bower.json
├──  gulpfile.js
├──  karma.conf.js
├──  package.json
├──  protractor.conf.js

https://docs.google.com/document/u/1/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub

Interactive Cohort Selection

http://transmart-gb.thehyve.net

Advanced Stats

http://transmart-gb.thehyve.net

Multiple RESTful Endpoints

http://transmart-gb.thehyve.net

Advanced Analysis as Module

http://transmart-gb.thehyve.net

Advanced Analysis - Fetch

http://transmart-gb.thehyve.net

Advanced Analysis - Run

http://transmart-gb.thehyve.net

OpenCPU

RestAPI

  • Heatmap.R
  • Boxplot.R
  • ScatterPlot.R
  • Survival Analysis.R
  • ForestPlot.R

https://www.opencpu.org/

uiCreator

OpenCPU

Analysis(title = "Heatmap",

  Step( title = "Fetch data",
        # Each step is represented by a function, func is the function name
        func = "fetchData",
        package = "opencpuRScripts",

    ConceptInput( title = "Select a highdimensional concept",
                  param = list("apiUrl", "auth.token", "study.name",
                   "concept.link")),

    DropdownInput(title = "Select a projection",
                  param = "projection",
                  options = list("zscore", "default_real_projection")),

    InfoTextOutput( when = "RUNNING",
                    message = "Fetching data..."),

    InfoTextOutput( when = "DONE",
                    message = "Data fetched, proceed to next step.")
  ),

  Step( title = "Pre-process data",

  ),
  Step( title = "Produce heatmap",

  )
)

heatmap.R

https://github.com/thehyve/opencpuRScripts

What next ..

  • Bring existing features 
    Program Explorer/Filters, Sample Explorer, Data Export, Saving workspace, Plugins (e.g. Genome Browser, GWAS)
  • OAuth 2.0 Workflow
    Implement oAuth 2.0 workflow 
  • High Dimensional Data
    Interactive  cohort filtering by High Dimensional data
  • Authorisation, Authentication
  • Longitudinal Data
    Presenting longitudinal data to be included in further processes
  • Feedback & Review
    Inputs from current prototype, technical and user perspective

ToDo List

  • AngularJS
    • ​Current stable version is 1.4.7 and version 2.0 is going to be a major rewrite. 
    • Reading javascript code will become not so straight forward.
    • PolymerJS, another alternative for component based UI development.
  • Multiple Endpoints
    • Cross study data analysis still not possible.
  • Performance
    • Moving the responsibility of data visualisation to UI requires good strategy on data retrieval.

Challenges

  • Emerging needs to upgrade tranSMART presentation layer.
     
  • RESTful API making it possible to create a new UI that's decoupled from backend codes.
     
  • AngularJS is used as main framework to develop UI client.
     
  • Challenges due to tranSMART's architecture in general.

Summary

Resources

TranSMART Base UI, an Angular approach to decoupling TranSMART's presentation layer

By Riza Nugraha

Made with Slides.com

TranSMART Base UI, an Angular approach to decoupling TranSMART's presentation layer

The architecture of the tranSMART platform has been under discussion in the tranSMART Foundation Architecture Working Group for quite some time. One of the main goals of 2.0 roadmap is to move towards a modular architectural design. A number of improvements have been made, such as the addition of a RESTful API developed by The Hyve, of which this project takes advantage. TranSMART REST API has opened up the opportunities to enable independent GUI client developments or consumed by 3rd parties. TranSMART Base UI is a new initiative funded by IMI as part of Translocation project to create tranSMART user interface that is modular, up to date with current technology to enhance the user experience, and decoupled from the backend code by only consuming tranSMART REST API. This presentation will also explain the use of AngularJS as the selected MVC framework for the UI. AngularJS offers many possibilities to make web applications not only more robust and extensible, but also more testable. Furthermore, we will demonstrate on how easy it is to embed useful components such as interactive charts and analytical tools within this new approach.

  • 2,965

More from Riza Nugraha