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
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
tranSMART Base UI
tranSMART Base UI
transmart base ui
transmart-base-ui
-
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.
Why AngularJS?
+ Crossfilter
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
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.jshttps://docs.google.com/document/u/1/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
Interactive Cohort Selection
Advanced Stats
Multiple RESTful Endpoints
Advanced Analysis as Module
Advanced Analysis - Fetch
Advanced Analysis - Run
OpenCPU
RestAPI
- Heatmap.R
- Boxplot.R
- ScatterPlot.R
- Survival Analysis.R
- ForestPlot.R
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
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
- Presentation
- Github
- Demo Server
-
http://transmart-gb.thehyve.net/
user/password to connect to tranSMART endpoint: tfannual15/tfannual15
-
- Wiki