Prototyping a decoupled TranSMART user interface

Outline

  • TranSMART
  • AngularJS + Boostrap
  • Crossfilter D3 DC.js
  • OpenCPU

TranSMART

open source analysis and data warehouse cloud platform for clinical and translational research

User interface

  • Enables users to browse clinical and high-dimensional observations, generate summary statistics and do some advanced statistical analyses without any programming knowledge
  • Outdated, not intuitive, not interactive... unaprochable 

Version 2.0

  • prioritizes separation of concerns and a decoupled architecture
  • Standalone client
  • Opportunity

Goals

  • functionality for a basic use case, quickly improved with modern web technologies
  • Decoupled, REST API
  • Interactive
  • Open source
  • Multiple endpoints

Science gateways must provide intelligible access to data and tools while ensuring a rich user experience.

Implementation

  • AngularJS and bootstrap
    • Create better styled and easily maintainable websites, spending more time on designing and developing the user experience than wrestling with the underlying technology
  • Crossfilter and D3
  • MVC framework maintained by Google and a very large open source community
  • Easy to learn and encourages good design patterns
  • Immense number of open source library/plugins

Controllers

... can become huge structures of mixed business and view logic, as it’s all too easy to house anything you need for the view inside the controller.

Should:

  • contain only business logic
  • be as slim as possible
  • only serve to communicate between services and the view

$scope

<div ng-controller="MainController">  
  {{ someObj }}
</div> 
app.controller('MainController', function ($scope) {  
  $scope.someObj = 5

});
<div ng-controller="MainController as main">  
  {{ main.someProp }}
</div> 
app.controller('MainController', function () {  
  this.someProp = 5
});

$scope

angular.module('app').controller("MainController", function($scope){
    $scope.firstName = "Leon";
    $scope.lastName = "Revill";
});

angular.module('app').controller("SubController", function($scope){
    $scope.firstName = "Douglas";
});
  • Mostly to prevent confusion with many nested controllers
  • Use $scope for necessary functions ($emit, $broadcast)

Directives + Services

 

  • Directives allow for the creation of reusable HTML elements, attributes or classes in a conceptually similar way to Web Components

  • Modular, shareable and reusable

  • Possibly can be embedded in older versions of TranSMART

 

  • Used to fetch, contain and process data

  • Expose an internal API 

  • Plugin architechture

Bootsrap

  • provides a set of elements and classes to build consistent and responsive user interfaces

D3

  • JavaScript library for manipulating documents based on data
  • HTML, SVG, CSS
  • Wide adoption
  • Very flexible... but pretty low level and doesn't scale to large data-sets 

Binds data to the DOM

Crossfilter

  • For exploring large multivariate datasets in the browser
  • Supports extremely fast filtering, reducing, top(k) even with datasets containing a million or more records

DC (Crossfilter + D3)

  • Dimensional charting built to work natively with crossfilter rendered using d3.js
  • powerful tools for filtering and displaying data in interactive charts

UI 

UI Sidebar

  • search function
  • expandable concept tree
  • icon represents node type
  • resizable

UI Cohort selection

  • drop zone
  • selection values
  • charts according to concept data type

UI Chart

  • interactive, visual filtering
  • all charts update based on selection

UI Grid

  • sortable
  • tied to filtering on charts
  • data can be exported

UI Connection

  • possibilty to add multiple endpoints

Advanced Analysis

  • plugin architecture
  • delegate to a  scientific computing server, enforcing a separation of concerns and further decoupling the components of the application
  • An analysis plugin thus becomes a package of scripts
  • The user interface for the analysis must also be defined within this package
  • proof of concept was built on an OpenCPU server instance

Propose a more streamlined way of creating an analysis UI environment, with better analysis transparency and reproducibility

OpenCPU

  • Scientific computing engine built on R
  • straightforward approach to producing an API
  • encourages reproducability
  • The functions of R packages installed on the server are exposed to an HTTP API

 

 

POST .../ocpu/library/[packageName]/R/[functionName]
GET  .../ocpu/tmp/[session key]

Analysis

  • The example analysis was divided into steps each represented by a stateless function
  • The functions were made to take the data output of a preceding steps
  • Another essential function produces a JSON file describing the UI components
  • Front-end parses JSON file into UI 
  • R Library for producing JSON according to schema
Analysis(title = "Heatmap",
  Step(title = "Fetch data", func = "fetchData", package = "opencpuRScripts",    
    DropdownInput(title = "Select a projection", param = "proj", options = list("zscore", "default")),
    InfoTextOutput(when = "RUNNING", message = "Fetching data...")))

Open CPU

No persistent session :(

Thank you

Jeremy's Final Presentation

By Riza Nugraha

Made with Slides.com

Jeremy's Final Presentation

  • 1,011

More from Riza Nugraha