The radar-dashboard from radar-base

Study view: compliance plot

Currently we do not have a REST API implementation for this. However, the data will look like the /stats/RECEIVED_MESSAGES call. I suggest you create a mock data file with the schema of the latter call and work off that.

Create Dockerized RADAR-Dashboard

Create a fb489ae Dockerfile in this repo for the RADAR-Dashboard based on the default node container https://hub.docker.com/_/node/ deploy the dashboard. Needed for RADAR-base/RADAR-Docker#11

/cc @kerzmaximilian

ScrollY capability for multiple plots

Heart Rate Chart v1.0

add chart structure for heart-rate data
add service and store for heart-rate data
plot [avg, median] data values to chart-heart-rate
plot [min, max] data values to chart-heart-rate

Bar plot

Implement bar chart

We'll probably need a bar chart component

Dashboard does not work in Safari

The Dashboard does not work in Safari and Safari Technology Preview: it does not show any grid. Errors in the developer console:

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (user, line 0)
[Error] EXCEPTION: Response with status: 404 Not Found for URL: http://radar-restapi.eu-west-1.elasticbeanstalk.com/api/HeartRate/avg/user
	handleError (main.0e356cc5de3e1e044091.bundle.js:1220:244)
	next (main.0e356cc5de3e1e044091.bundle.js:739:1976)
	(anonymous function) (main.0e356cc5de3e1e044091.bundle.js:788:562)
	__tryOrUnsub (main.0e356cc5de3e1e044091.bundle.js:1:7384)
	next (main.0e356cc5de3e1e044091.bundle.js:1:6738)
	_next (main.0e356cc5de3e1e044091.bundle.js:1:6049)
	next (main.0e356cc5de3e1e044091.bundle.js:1:5721)
	next (main.0e356cc5de3e1e044091.bundle.js:22:18324)
	emit (main.0e356cc5de3e1e044091.bundle.js:788:336)
	triggerError (main.0e356cc5de3e1e044091.bundle.js:839:3342)
	onHandleError (main.0e356cc5de3e1e044091.bundle.js:839:2932)
	runTask (main.0e356cc5de3e1e044091.bundle.js:2107:4493)
	invoke (main.0e356cc5de3e1e044091.bundle.js:2107:8195)
[Error] Response with status: 404 Not Found for URL: http://radar-restapi.eu-west-1.elasticbeanstalk.com/api/HeartRate/avg/user
	__tryOrUnsub (main.0e356cc5de3e1e044091.bundle.js:1:7437)
	next (main.0e356cc5de3e1e044091.bundle.js:1:6738)
	_next (main.0e356cc5de3e1e044091.bundle.js:1:6049)
	next (main.0e356cc5de3e1e044091.bundle.js:1:5721)
	next (main.0e356cc5de3e1e044091.bundle.js:22:18324)
	emit (main.0e356cc5de3e1e044091.bundle.js:788:336)
	triggerError (main.0e356cc5de3e1e044091.bundle.js:839:3342)
	onHandleError (main.0e356cc5de3e1e044091.bundle.js:839:2932)
	runTask (main.0e356cc5de3e1e044091.bundle.js:2107:4493)
	invoke (main.0e356cc5de3e1e044091.bundle.js:2107:8195)

It does work in the latest versions of Firefox and Chrome. They give similar errors though (in Chrome):

Failed to load resource: the server responded with a status of 404 (Not Found)
error_handler.js:50EXCEPTION: Response with status: 404 Not Found for URL: http://radar-restapi.eu-west-1.elasticbeanstalk.com/api/HeartRate/avg/usert.handleError @ error_handler.js:50
Subscriber.js:227Uncaught e_body: "<!DOCTYPE html><html><head><title>Apache Tomcat/8.0.36 - Error report</title><style type="text/css">H1 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:22px;} H2 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:16px;} H3 {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;font-size:14px;} BODY {font-family:Tahoma,Arial,sans-serif;color:black;background-color:white;} B {font-family:Tahoma,Arial,sans-serif;color:white;background-color:#525D76;} P {font-family:Tahoma,Arial,sans-serif;background:white;color:black;font-size:12px;}A {color : black;}A.name {color : black;}.line {height: 1px; background-color: #525D76; border: none;}</style> </head><body><h1>HTTP Status 404 - Not Found</h1><div class="line"></div><p><b>type</b> Status report</p><p><b>message</b> <u>Not Found</u></p><p><b>description</b> <u>The requested resource is not available.</u></p><hr class="line"><h3>Apache Tomcat/8.0.36</h3></body></html>"headers: tok: falsestatus: 404statusText: "Not Found"type: 2url: "http://radar-restapi.eu-west-1.elasticbeanstalk.com/api/HeartRate/avg/user"__proto__: t

Refactor the ChartExternalXAxisComponent and GraphExternalXAxisComponent

The component should have only the common data axis, without any zoom functionality.

Study view: Participant enrolement

Subjects: Remove non functional parts from table

There are a few parts in the table that are neither working nor doing anything, these should be removed.

PlatformHealth Service

Forward to platform health view
Get response from RADAR REST enpoint

Containing information:
Device Status

A list of connected devices (and potentially recently disconnected devices) with:
Battery level
Temperature (indicator if watch is worn or not)
Hearth rate (e.g. mean over last 10 seconds)
Android device name (of RPi/UDOO device to which device is connected over Bluetooth) [not shown in mock]

Server status/health

Connection status (connected, disconnected or connecting)
Cold storage status (raw data stored to HDFS)
Hot storage status (aggregated to MongoDB)
Log of recent database activies (e.g. what activities were written)
Server connection name [not shown in mock]
Number of active topics [not shown in mock]
Records written per topic [not shown in mock]

Subject: Resolution adjustment

Subject: Chart tooltip, axis labels, and legend

Show tooltip with actual value on mouse-over (maybe also show a vertical line)
Show labels on axis (for example: on vertical axis average bpm and on horizontal axis datetime)
Add legend (will be useful especially for multi line chart or for categorical data shown in a bar chart)

Move AppConfig to config in the Store

Replace AppConfig with a config store object, since AppConfig properties are not constants or immutable.

Heart Rate Chart v1.1

add config for plot and data
add time interval config and component
plot [min, max] data values to chart-heart-rate

Study: Compliance table refreshes data

Compliance data should not be refreshed when going back and forth from the subjects to the study view.

Pie chart

Subject: Event markers on timeline and charts

Events:
Such as hospital visit.

Implement status component

Displaying summary information on a certain aspect of the platform / study
(See Sketch prototypes)

Implement list/table component

Suggesting to split list component into two components:

Row component
List component

Does that make sense?

Dashboard Grid v0.0.1

Add grid service and store
Build grid from store

Study view: Overall compliance of study plot

Column plot with combined compliance from all participants of study with time on x-axis

Implement component for managing users and roles

To discuss how this is related to the Participant Management Dashboard #4
Example types of users: patient, researcher, technician

Study: Table detail view of sensors status

Subjects: Add subjects count to table

There should a counter of subjects in the bottom left corner, check designs.

Questionnaires: Functionality to configure questionnaires

For now the questionnaires will be configured per study and later on it might be needed to configure per patient. Would then this be part of the Participant Management Dashboard (#4)?

Subject: Tooltip is hidden when the mouse is at the bottom

Implement workbook component

Proposing that we need to define a new type of component that is able to handle multiple tabs/pages of grids.

If charts are part of tiles, tiles are configured in a grid, and a grid is added in a dashboard, then multiple dashboards (i.e. multiple tabs with the same general focus and audience) could be grouped in a workbook.

Duplicate header in table and missing row

When you press on a subject on the table and then go back the table shows a duplicate header and the last row has no content.

In PR: #231

ERROR in console:

CompliancePlotTableComponent.html:2 
ERROR TypeError: Cannot read property 'unsubscribe' of undefined
    at ChartBaseMultiBarTableComponent.webpackJsonp.../../../../../src/app/components/charts/chart-base/chart-base.component.ts.ChartBaseComponent.ngOnDestroy (chart-base.component.ts:65)
    at callProviderLifecycles (core.es5.js:11188)
    at callElementProvidersLifecycles (core.es5.js:11157)
    at callLifecycleHooksChildrenFirst (core.es5.js:11141)
    at destroyView (core.es5.js:12477)
    at callViewAction (core.es5.js:12623)
    at execComponentViewsAction (core.es5.js:12535)
    at destroyView (core.es5.js:12476)
    at callViewAction (core.es5.js:12623)
    at execEmbeddedViewsAction (core.es5.js:12561)

Subject: Implement time filter/zoom

Implement time filter/zoom based on the sketch mockups for patient view.

Also, we will have event markers for some of the data (start and stop datetimestamp for tasks performed during visits), so we need to think how to represent these.

Study view: Patient Cohort Table

To be implemented:

Pull paginator-bar to the bottom of tile.
Instead of intra-row scroll to display multiple sources, implement tip-box (hovering over row) to display individual connectedness. Within row, show summary connectedness status (see sketch file).

Tooltip: show only information for visible items

Subject: Sources list with visibility toggle

expandable list of devices and their sensor
toggle visible/non-visible charts

Alerts based on n consecutive days without data

It may be useful to the study teams to have email alerts if there is substantial loss of data. The information to make such an alert is possible already is provided to the Dashboard (it might be better to even make this window days a configurable length and include logic like ">= 3 days"). The platform already can send emails.

It may also be good to be able to filter the list view of participants in the Dashboard based on some criteria (e.g. no data for 3 days or more). We'll have to add it to the post v1.0 features.

Explore whether we can use an existing framework for managing the grid and tiles

Looked for a framework that could provide us with the functionality for the tiles in the grid to be moved, resized, and added on the fly, and found this one:

angular2-grid // demo

And it seems pretty easy to configure to look more like this implementation or like the theme we have in our sketches for the dashboard.

Restructure project

Restructure the project to create modules that carry their component dependencies inside them, so that we can better lazy load and separate not only the pages but also the store reducers and effects.

A good example of this idea that we can use as a guide:
https://github.com/ngrx/platform/tree/master/example-app

Notice that the store reducers and effects are also nicely separated:
https://github.com/ngrx/platform/blob/5573ec0d1d13a90c217227313ff57dc287d9e777/example-app/app/books/books.module.ts#L35-L51