From af38871b73f737ee8b3a3c8208e6b866d5ca8f19 Mon Sep 17 00:00:00 2001
From: "Jakob E. Bardram" <jakba@dtu.dk>
Date: Fri, 26 Jan 2024 10:23:29 +0100
Subject: [PATCH] Fix of Device and Data Viz pages (#210)

Co-authored-by: Lars Refsgaard <1552887+LarsRefsgaard@users.noreply.github.com>

Fixes #204, #186, #207

Added support for health in devices page
---
 android/app/src/main/AndroidManifest.xml      |  55 +++++++++
 android/gradle.properties                     |   3 +-
 assets/lang/da.json                           |   2 +
 assets/lang/en.json                           |   2 +
 ios/Runner/Info.plist                         |   4 +-
 ios/Runner/Runner.entitlements                |   6 +-
 ios/Runner/RunnerRelease.entitlements         |   6 +-
 lib/blocs/app_bloc.dart                       |  14 ++-
 lib/blocs/common.dart                         |  19 ++-
 lib/carp_study_app.dart                       |  12 +-
 lib/main.dart                                 |   4 +-
 lib/sensing/sensing.dart                      |   2 +-
 lib/ui/cards/distance_card.dart               |  10 +-
 lib/ui/cards/heart_rate_card.dart             |   3 +-
 lib/ui/pages/data_visualization_page.dart     | 112 +++++++-----------
 lib/ui/pages/devices_page.dart                |  50 +++++---
 lib/ui/widgets/details_banner.dart            |   3 +-
 .../cards/activity_data_model.dart            |   6 +-
 .../cards/heart_rate_data_model.dart          |  10 +-
 .../cards/mobility_data_model.dart            |   4 +-
 lib/view_models/cards/steps_data_model.dart   |   4 +-
 .../data_visualization_page_model.dart        |  23 ++--
 lib/view_models/devices_page_model.dart       |   3 +
 lib/view_models/view_model.dart               |  26 ++--
 24 files changed, 229 insertions(+), 154 deletions(-)

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index a5b1500f..79ef3089 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,6 +1,14 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools">
 
+    <!-- Check whether Health Connect is installed or not -->
+    <queries>
+        <package android:name="com.google.android.apps.healthdata" />
+        <intent>
+            <action android:name="androidx.health.ACTION_SHOW_PERMISSIONS_RATIONALE" />
+        </intent>
+    </queries>  
+
     <uses-feature
         android:name="android.hardware.bluetooth_le"
         android:required="false" />
@@ -49,6 +57,48 @@
     <uses-permission android:name="android.permission.RECORD_AUDIO" />
     <uses-permission android:name="android.permission.CAMERA" />
 
+    <!-- Permissions for Health Connect API -->
+    <uses-permission android:name="android.permission.health.READ_STEPS"/>
+    <uses-permission android:name="android.permission.health.WRITE_STEPS"/>
+    <uses-permission android:name="android.permission.health.READ_WEIGHT"/>
+    <uses-permission android:name="android.permission.health.WRITE_WEIGHT"/>
+    <uses-permission android:name="android.permission.health.READ_HEIGHT"/>
+    <uses-permission android:name="android.permission.health.WRITE_HEIGHT"/>
+    <uses-permission android:name="android.permission.health.READ_HEART_RATE"/>
+    <uses-permission android:name="android.permission.health.WRITE_HEART_RATE"/>
+    <uses-permission android:name="android.permission.health.READ_EXERCISE"/>
+    <uses-permission android:name="android.permission.health.WRITE_EXERCISE"/>
+    <uses-permission android:name="android.permission.health.READ_SLEEP"/>
+    <uses-permission android:name="android.permission.health.WRITE_SLEEP"/>
+    <uses-permission android:name="android.permission.health.READ_SPEED"/>
+    <uses-permission android:name="android.permission.health.WRITE_SPEED"/>
+    <uses-permission android:name="android.permission.health.READ_DISTANCE"/>
+    <uses-permission android:name="android.permission.health.WRITE_DISTANCE"/>
+    <uses-permission android:name="android.permission.health.READ_TOTAL_CALORIES_BURNED"/>
+    <uses-permission android:name="android.permission.health.WRITE_TOTAL_CALORIES_BURNED"/>
+    <uses-permission android:name="android.permission.health.READ_ACTIVE_CALORIES_BURNED"/>
+    <uses-permission android:name="android.permission.health.WRITE_ACTIVE_CALORIES_BURNED"/>
+    <uses-permission android:name="android.permission.health.READ_BLOOD_GLUCOSE"/>
+    <uses-permission android:name="android.permission.health.WRITE_BLOOD_GLUCOSE"/>
+    <uses-permission android:name="android.permission.health.READ_BLOOD_PRESSURE"/>
+    <uses-permission android:name="android.permission.health.WRITE_BLOOD_PRESSURE"/>
+    <uses-permission android:name="android.permission.health.READ_BODY_FAT"/>
+    <uses-permission android:name="android.permission.health.WRITE_BODY_FAT"/>
+    <uses-permission android:name="android.permission.health.READ_BODY_TEMPERATURE"/>
+    <uses-permission android:name="android.permission.health.WRITE_BODY_TEMPERATURE"/>
+    <uses-permission android:name="android.permission.health.READ_OXYGEN_SATURATION"/>
+    <uses-permission android:name="android.permission.health.WRITE_OXYGEN_SATURATION"/>
+    <uses-permission android:name="android.permission.health.READ_HYDRATION"/>
+    <uses-permission android:name="android.permission.health.WRITE_HYDRATION"/>
+    <uses-permission android:name="android.permission.health.READ_RESTING_HEART_RATE"/>
+    <uses-permission android:name="android.permission.health.WRITE_RESTING_HEART_RATE"/>
+    <uses-permission android:name="android.permission.health.WRITE_FLOORS_CLIMBED"/>
+    <uses-permission android:name="android.permission.health.READ_FLOORS_CLIMBED"/>
+    <uses-permission android:name="android.permission.health.WRITE_BASAL_METABOLIC_RATE"/>
+    <uses-permission android:name="android.permission.health.READ_BASAL_METABOLIC_RATE"/>
+    <uses-permission android:name="android.permission.health.READ_RESPIRATORY_RATE"/>
+    <uses-permission android:name="android.permission.health.WRITE_RESPIRATORY_RATE"/>
+
     <!-- io.flutter.app.FlutterApplication is an android.app.Application that
          calls FlutterMain.startInitialization(this); in its onCreate method.
          In most cases you can leave this as-is, but you if you want to provide
@@ -125,6 +175,11 @@
 
                 <data android:scheme="carp-studies" />
             </intent-filter>
+
+            <!-- Intention to show Permissions screen for Health Connect API -->
+            <intent-filter>
+                <action android:name="androidx.health.ACTION_SHOW_PERMISSIONS_RATIONALE" />
+            </intent-filter>
         </activity>
 
         <!-- service for using the Android activity recognition API
diff --git a/android/gradle.properties b/android/gradle.properties
index 94adc3a3..d2032bce 100644
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -1,3 +1,4 @@
 org.gradle.jvmargs=-Xmx1536M
-android.useAndroidX=true
 android.enableJetifier=true
+android.useAndroidX=true
+android.enableR8=true
diff --git a/assets/lang/da.json b/assets/lang/da.json
index 95639b38..80866b27 100644
--- a/assets/lang/da.json
+++ b/assets/lang/da.json
@@ -91,12 +91,14 @@
     "pages.devices.type.weather.name": "Vejr",
     "pages.devices.type.air_quality.name": "Luftkvalitet",
     "pages.devices.type.location.name": "Lokalitet",
+    "pages.devices.type.health.name": "Sundhed",
     "pages.devices.type.smartphone.description": "Denne telefon",
     "pages.devices.type.esense.description": "eSense ear plug",
     "pages.devices.type.polar.description": "Polar hjertemonitor",
     "pages.devices.type.weather.description": "Vejrtjeneste",
     "pages.devices.type.air_quality.description": "Luftkvalitetstjeneste",
     "pages.devices.type.location.description": "Lokalitetstjeneste",
+    "pages.devices.type.health.description": "Sundhedstjeneste",
     "pages.devices.type.smartphone.instructions": "Denne telefon ",
     "pages.devices.type.esense.instructions": "Du skal forbinde den VENSTRE øreprop til dette studie. Tænd øreprobben ved at trykke knappen ned indtil den blinker rød. Nu skulle du kunne vælge den venstre øreprop i listen.\n\nHvis du vil anvende eSense ørepropperne til lyd og telefoni, skal du forbinde den HØJRE øreprop til telefonen. Dette gøres gennem telefonens Bluetooth INDSTILLINGER. For at parre ørepropperne til telefonen skal du trykke knappen på den HØJRE øreprop ned indtil den begyder at blinke rød og blå. Så er ørepropperne i parringstilstand. Når ørepropperne er forbundet til telefonen, vil de blinke blå.",
     "pages.devices.type.polar.instructions": "Sørg for at din Polar enhed er tændt. Polar H10 pulsmåleren tændes automatisk når du tager den på. Polar Verity Sense armbåndet tændes ved at trykke den blanke knap på siden ind indtil LED dioderne lyser.\n\nFor a parre Polar enheden med telefonen skal du åbne instillingerne på telefonen og trykke på Polar enheden.",
diff --git a/assets/lang/en.json b/assets/lang/en.json
index e2735f00..6d5bcd38 100644
--- a/assets/lang/en.json
+++ b/assets/lang/en.json
@@ -92,12 +92,14 @@
     "pages.devices.type.weather.name": "Weather",
     "pages.devices.type.air_quality.name": "Air quality",
     "pages.devices.type.location.name": "Location",
+    "pages.devices.type.health.name": "Health",
     "pages.devices.type.smartphone.description": "This phone",
     "pages.devices.type.esense.description": "eSense ear plug",
     "pages.devices.type.polar.description": "Polar heart rate monitor",
     "pages.devices.type.weather.description": "Weather service",
     "pages.devices.type.air_quality.description": "Air quality service",
     "pages.devices.type.location.description": "Location service",
+    "pages.devices.type.health.description": "Health service",
     "pages.devices.type.smartphone.instructions": "This phone is already connected to the study",
     "pages.devices.type.esense.instructions": "You should connect the LEFT earbud to this study. Turn on the left earbud by pressing and holding the push button until it blinks red. Now you should be able to select the left earbud in the list of devices.\n\nIf you want to use the eSense earbuds for audio streaming, you should connect the RIGT earbud to the phone using the phone's Bluetooth SETTINGS. To pair an earbud to the phone, press and hold the button until it starts blinking blue and red. Now the earbud is in paring mode. Once the earbud is connected to the phone, it will indicate so by blinking in blue.",
     "pages.devices.type.polar.instructions": "Make sure that your Polar device is turned on. The Polar H10 chest strap is automatically turned on when it is attached to your chest. The Polar Verity Sense arm strap needs to be turned on by pressing the button on the side until the LEDs turns on.\n\nTo pair the Polar device with the phone, open the Bluetooth settings of the phone and click on the Polar device.",
diff --git a/ios/Runner/Info.plist b/ios/Runner/Info.plist
index f1c19ac2..f80c71f2 100644
--- a/ios/Runner/Info.plist
+++ b/ios/Runner/Info.plist
@@ -74,9 +74,9 @@
 	<key>NSContactsUsageDescription</key>
 	<string>CARP uses contacts</string>
 	<key>NSHealthShareUsageDescription</key>
-	<string>CARP collects data from the Apple Health app to give you better health insights</string>
+	<string>CARP collects data from the Apple Health database to give you better health insights</string>
 	<key>NSHealthUpdateUsageDescription</key>
-	<string>CARP collects data from the Apple Health app to give you better health insights</string>
+	<string>CARP collects data from the Apple Health database to give you better health insights</string>
 	<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
 	<string>CARP uses the location API to extract overall mobility patterns</string>
 	<key>NSLocationAlwaysUsageDescription</key>
diff --git a/ios/Runner/Runner.entitlements b/ios/Runner/Runner.entitlements
index 6663b21f..b8ebe5cc 100644
--- a/ios/Runner/Runner.entitlements
+++ b/ios/Runner/Runner.entitlements
@@ -11,6 +11,10 @@
 	<key>com.apple.developer.healthkit</key>
 	<true/>
 	<key>com.apple.developer.healthkit.access</key>
-	<array/>
+	<array>
+		<string>health-records</string>
+	</array>
+	<key>com.apple.developer.healthkit.background-delivery</key>
+	<true/>
 </dict>
 </plist>
diff --git a/ios/Runner/RunnerRelease.entitlements b/ios/Runner/RunnerRelease.entitlements
index 577ed040..94a192bd 100644
--- a/ios/Runner/RunnerRelease.entitlements
+++ b/ios/Runner/RunnerRelease.entitlements
@@ -14,6 +14,10 @@
 	<key>com.apple.developer.healthkit</key>
 	<true/>
 	<key>com.apple.developer.healthkit.access</key>
-	<array/>
+	<array>
+		<string>health-records</string>
+	</array>
+	<key>com.apple.developer.healthkit.background-delivery</key>
+	<true/>
 </dict>
 </plist>
diff --git a/lib/blocs/app_bloc.dart b/lib/blocs/app_bloc.dart
index 51b447c7..db9b3647 100644
--- a/lib/blocs/app_bloc.dart
+++ b/lib/blocs/app_bloc.dart
@@ -17,7 +17,7 @@ enum StudyAppState {
 class StudyAppBLoC {
   StudyAppState _state = StudyAppState.created;
   final CarpBackend _backend = CarpBackend();
-  final CarpStudyAppViewModel _data = CarpStudyAppViewModel();
+  final CarpStudyAppViewModel _appViewModel = CarpStudyAppViewModel();
   StudyDeploymentStatus? _status;
   final StreamController<StudiesAppState> _stateStream =
       StreamController.broadcast();
@@ -102,8 +102,8 @@ class StudyAppBLoC {
   DateTime? get studyStartTimestamp => deployment?.deployed;
 
   /// The overall data model for this app
-  CarpStudyAppViewModel get data => _data;
-  Future<void>? dataPageInitialization;
+  CarpStudyAppViewModel get appViewModel => _appViewModel;
+  // Future<void>? dataPageInitialization;
 
   /// Initialize this BLOC. Called before being used for anything.
   Future<void> initialize() async {
@@ -149,7 +149,6 @@ class StudyAppBLoC {
     if (isConfiguring) return;
 
     stateStream.sink.add(StudiesAppState.configuring);
-    info('$runtimeType configuring...');
 
     // set up and initialize sensing
     await Sensing().initialize();
@@ -158,7 +157,9 @@ class StudyAppBLoC {
     await Sensing().addStudy();
 
     // initialize the UI data models
-    dataPageInitialization = data.init(Sensing().controller!);
+    appViewModel.init(Sensing().controller!);
+
+    debug('$runtimeType - done init() of view model');
 
     // set up the messaging part
     messageManager.initialize().then(
@@ -241,7 +242,8 @@ class StudyAppBLoC {
       ? user!.username
       : Sensing().controller!.deployment!.userId!;
 
-  /// The name used for friendly greeting - '' if no user logged in.
+  /// The name used for friendly greeting.
+  /// Returns an empty string if no user logged in.
   String? get friendlyUsername => (user != null) ? user!.firstName : '';
 
   /// Does this [deployment] have any measures?
diff --git a/lib/blocs/common.dart b/lib/blocs/common.dart
index 5830d876..2dd6a144 100644
--- a/lib/blocs/common.dart
+++ b/lib/blocs/common.dart
@@ -1,5 +1,6 @@
 part of '../main.dart';
 
+/// Enumeration of different types of deployments on the CARP Web Service (CAWS).
 enum DeploymentMode {
   /// Use the CARP production server to get the study deployment and store data.
   production,
@@ -14,20 +15,26 @@ enum DeploymentMode {
   dev,
 }
 
+/// Enumeration of of different user authentication states.
 enum LoginStatus {
-  /// No invitation selected (tap outside the invitation box) - Navigate to login screen
+  /// No invitation selected (tap outside the invitation box).
+  /// Navigate to login screen.
   noSelection,
 
-  /// Informed Consent not accepted - Navigate to message screen / login
+  /// Informed Consent not accepted.
+  /// Navigate to message screen or login.
   noConsent,
 
-  /// User registered but no current ongoing studies - Navigate to message screen
+  /// User registered but no current ongoing studies.
+  /// Navigate to message screen.
   noInvitation,
 
-  /// User temporary blocked for introducing the login credentials wrongly 3 times - Navigate to message screen
+  /// User temporary blocked based on 3 wrongly login credentials.
+  /// Navigate to message screen.
   temporaryBlock,
 
-  /// Successful login - Navigate to home page
+  /// Successful login.
+  /// Navigate to home page.
   successful,
 }
 
@@ -37,9 +44,9 @@ enum ProcessStatus {
   other,
 }
 
+/// Enumeration of different app states.
 enum StudiesAppState {
   initialized,
-  loginpage,
   authenticating,
   accessTokenRetrieved,
   configuring,
diff --git a/lib/carp_study_app.dart b/lib/carp_study_app.dart
index 9a0d65af..50b9fd2b 100644
--- a/lib/carp_study_app.dart
+++ b/lib/carp_study_app.dart
@@ -48,7 +48,7 @@ class CarpStudyAppState extends State<CarpStudyApp> {
             parentNavigatorKey: _shellNavigatorKey,
             pageBuilder: (context, state) => CustomTransitionPage(
               child: TaskListPage(
-                bloc.data.taskListPageViewModel,
+                bloc.appViewModel.taskListPageViewModel,
               ),
               transitionsBuilder: bottomNavigationBarAnimation,
             ),
@@ -58,7 +58,7 @@ class CarpStudyAppState extends State<CarpStudyApp> {
             parentNavigatorKey: _shellNavigatorKey,
             pageBuilder: (context, state) => CustomTransitionPage(
               child: StudyPage(
-                bloc.data.studyPageViewModel,
+                bloc.appViewModel.studyPageViewModel,
               ),
               transitionsBuilder: bottomNavigationBarAnimation,
             ),
@@ -68,7 +68,7 @@ class CarpStudyAppState extends State<CarpStudyApp> {
             parentNavigatorKey: _shellNavigatorKey,
             pageBuilder: (context, state) => CustomTransitionPage(
               child: DataVisualizationPage(
-                  bloc.data.dataVisualizationPageViewModel),
+                  bloc.appViewModel.dataVisualizationPageViewModel),
               transitionsBuilder: bottomNavigationBarAnimation,
             ),
           ),
@@ -84,7 +84,7 @@ class CarpStudyAppState extends State<CarpStudyApp> {
             path: '/profile',
             parentNavigatorKey: _shellNavigatorKey,
             pageBuilder: (context, state) => CustomTransitionPage(
-              child: ProfilePage(bloc.data.profilePageViewModel),
+              child: ProfilePage(bloc.appViewModel.profilePageViewModel),
               transitionsBuilder: bottomNavigationBarAnimation,
             ),
           ),
@@ -111,7 +111,7 @@ class CarpStudyAppState extends State<CarpStudyApp> {
             ? firstRoute
             : (bloc.studyId == null ? '/invitations' : null),
         builder: (context, state) => InformedConsentPage(
-          bloc.data.informedConsentViewModel,
+          bloc.appViewModel.informedConsentViewModel,
         ),
       ),
       GoRoute(
@@ -139,7 +139,7 @@ class CarpStudyAppState extends State<CarpStudyApp> {
             ? '/consent'
             : (bloc.user == null ? '/login' : null),
         builder: (context, state) =>
-            InvitationListPage(bloc.data.invitationsListViewModel),
+            InvitationListPage(bloc.appViewModel.invitationsListViewModel),
       ),
     ],
     debugLogDiagnostics: true,
diff --git a/lib/main.dart b/lib/main.dart
index 0a00cee7..8601aa51 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -28,7 +28,7 @@ import 'package:carp_serializable/carp_serializable.dart';
 import 'package:carp_core/carp_core.dart';
 import 'package:carp_mobile_sensing/carp_mobile_sensing.dart';
 import 'package:carp_audio_package/media.dart';
-//import 'package:carp_health_package/health_package.dart';
+import 'package:carp_health_package/health_package.dart';
 //import 'package:carp_connectivity_package/connectivity.dart';
 //import 'package:carp_communication_package/communication.dart';
 import 'package:carp_context_package/carp_context_package.dart';
@@ -140,6 +140,6 @@ void main() async {
 /// Configure the debug level and deployment mode here before running the app
 /// or deploying it.
 final bloc = StudyAppBLoC(
-  debugLevel: DebugLevel.info,
+  debugLevel: DebugLevel.debug,
   deploymentMode: DeploymentMode.dev,
 );
diff --git a/lib/sensing/sensing.dart b/lib/sensing/sensing.dart
index e4ace7ef..eee84ac6 100644
--- a/lib/sensing/sensing.dart
+++ b/lib/sensing/sensing.dart
@@ -68,7 +68,7 @@ class Sensing {
     //SamplingPackageRegistry.register(CommunicationSamplingPackage());
     SamplingPackageRegistry().register(MediaSamplingPackage());
     SamplingPackageRegistry().register(SurveySamplingPackage());
-    //SamplingPackageRegistry.register(HealthSamplingPackage());
+    SamplingPackageRegistry().register(HealthSamplingPackage());
     SamplingPackageRegistry().register(ESenseSamplingPackage());
     SamplingPackageRegistry().register(PolarSamplingPackage());
 
diff --git a/lib/ui/cards/distance_card.dart b/lib/ui/cards/distance_card.dart
index 3acdb7ae..3b59531e 100644
--- a/lib/ui/cards/distance_card.dart
+++ b/lib/ui/cards/distance_card.dart
@@ -98,15 +98,7 @@ class _DistanceCardState extends State<DistanceCard> {
               width: MediaQuery.of(context).size.width * 0.9,
               child: StreamBuilder(
                 stream: widget.model.mobilityEvents,
-                builder: (context, snapshot) {
-                  if (snapshot.hasData) {
-                    return barCharts;
-                  } else {
-                    return const Center(
-                      child: CircularProgressIndicator(),
-                    );
-                  }
-                },
+                builder: (context, snapshot) => barCharts,
               ),
             ),
           ],
diff --git a/lib/ui/cards/heart_rate_card.dart b/lib/ui/cards/heart_rate_card.dart
index 8a425f86..964303e9 100644
--- a/lib/ui/cards/heart_rate_card.dart
+++ b/lib/ui/cards/heart_rate_card.dart
@@ -102,7 +102,8 @@ class HeartRateCardWidgetState extends State<HeartRateCardWidget>
           margin: const EdgeInsets.only(left: 8, right: 2),
           child: Text(
             min == null || max == null
-                ? locale.translate('cards.no_data')
+                // ? locale.translate('cards.no_data')
+                ? '-'
                 : '${(min.toInt())} - ${(max.toInt())}',
             style: hrVisualisationTextStyle(
               fontSize: 40,
diff --git a/lib/ui/pages/data_visualization_page.dart b/lib/ui/pages/data_visualization_page.dart
index 14c8cd2d..eb8d6060 100644
--- a/lib/ui/pages/data_visualization_page.dart
+++ b/lib/ui/pages/data_visualization_page.dart
@@ -10,79 +10,64 @@ class DataVisualizationPage extends StatefulWidget {
 }
 
 class _DataVisualizationPageState extends State<DataVisualizationPage> {
-  final dataPageInitialization = bloc.dataPageInitialization ??
-      bloc.data._dataVisualizationPageViewModel.init(Sensing().controller!);
-
   @override
   Widget build(BuildContext context) {
     RPLocalizations locale = RPLocalizations.of(context)!;
     return Scaffold(
-      backgroundColor: Theme.of(context).colorScheme.secondary,
-      body: SafeArea(
-        child: FutureBuilder(
-          future: dataPageInitialization,
-          builder: (context, data) {
-            if (data.connectionState == ConnectionState.waiting) {
-              return const Center(child: CircularProgressIndicator());
-            } else {
-              return Column(
-                crossAxisAlignment: CrossAxisAlignment.center,
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: <Widget>[
-                  const CarpAppBar(),
-                  Container(
-                    color: Theme.of(context).colorScheme.secondary,
-                    child: Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 15),
-                      child: Align(
-                        alignment: Alignment.centerLeft,
-                        child: Column(
-                          mainAxisAlignment: MainAxisAlignment.start,
-                          crossAxisAlignment: CrossAxisAlignment.start,
-                          children: [
-                            Text(
-                              '${locale.translate('pages.data_viz.hello')} ${bloc.friendlyUsername}'
-                                  .toUpperCase(),
-                              style: dataCardTitleStyle.copyWith(
-                                  color: Theme.of(context).primaryColor),
-                            ),
-                            Text(locale.translate('pages.data_viz.thanks'),
-                                style: aboutCardSubtitleStyle),
-                            const SizedBox(height: 15),
-                          ],
-                        ),
+        backgroundColor: Theme.of(context).colorScheme.secondary,
+        body: SafeArea(
+            child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: <Widget>[
+            const CarpAppBar(),
+            Container(
+              color: Theme.of(context).colorScheme.secondary,
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 15),
+                child: Align(
+                  alignment: Alignment.centerLeft,
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        '${locale.translate('pages.data_viz.hello')} ${bloc.friendlyUsername}'
+                            .toUpperCase(),
+                        style: dataCardTitleStyle.copyWith(
+                            color: Theme.of(context).primaryColor),
                       ),
-                    ),
+                      Text(locale.translate('pages.data_viz.thanks'),
+                          style: aboutCardSubtitleStyle),
+                      const SizedBox(height: 15),
+                    ],
                   ),
-                  Expanded(
-                    flex: 4,
-                    child: SingleChildScrollView(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.center,
-                        mainAxisAlignment: MainAxisAlignment.center,
-                        children: _dataVizCards,
-                      ),
-                    ),
-                  )
-                ],
-              );
-            }
-          },
-        ),
-      ),
-    );
+                ),
+              ),
+            ),
+            Expanded(
+              flex: 4,
+              child: SingleChildScrollView(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: _dataVizCards,
+                ),
+              ),
+            )
+          ],
+        )));
   }
 
   // The list of cards, depending on what measures are defined in the study.
   List<Widget> get _dataVizCards {
     final List<Widget> widgets = [];
 
-    // always show tasks progress
-    widgets
-        .add(StudyProgressCardWidget(widget.model.studyProgressCardDataModel));
-
-    // check to show overall measure stats
-    //if (bloc.hasMeasures()) widgets.add(MeasuresCardWidget(model.measuresCardDataModel));
+    // Show user task progress, if study has any tasks.
+    if (bloc.hasSurveys()) {
+      widgets.add(
+          StudyProgressCardWidget(widget.model.studyProgressCardDataModel));
+    }
 
     // check to show heart rate stats, if there is a POLAR device in the study
     if (bloc.hasMeasure(PolarSamplingPackage.HR)) {
@@ -111,11 +96,6 @@ class _DataVisualizationPageState extends State<DataVisualizationPage> {
       widgets.add(MediaCardWidget(mediaModelsList));
     }
 
-    // check to show device data visualizations
-    if (bloc.hasDevices()) {
-      //TODO ADD DEVICES VIZ?
-    }
-
     if (bloc.hasMeasure(SensorSamplingPackage.STEP_COUNT)) {
       widgets.add(StepsCardWidget(widget.model.stepsCardDataModel));
     }
diff --git a/lib/ui/pages/devices_page.dart b/lib/ui/pages/devices_page.dart
index f46015c5..4331eb31 100644
--- a/lib/ui/pages/devices_page.dart
+++ b/lib/ui/pages/devices_page.dart
@@ -1,6 +1,6 @@
 part of '../../main.dart';
 
-/// State of Bluetoth connection UI.
+/// State of Bluetooth connection UI.
 enum CurrentStep { scan, instructions, done }
 
 class DevicesPage extends StatefulWidget {
@@ -76,11 +76,11 @@ class DevicesPageState extends State<DevicesPage> {
               flex: 4,
               child: CustomScrollView(
                 slivers: [
-                  ...smartphoneDeviceListWidget(locale),
+                  ..._smartphoneDeviceListWidget(locale),
                   if (physicalDevices.isNotEmpty)
-                    ...physicalDevicesListWidget(locale),
+                    ..._physicalDevicesListWidget(locale),
                   if (onlineServices.isNotEmpty)
-                    ...onlineServicesListWidget(locale),
+                    ..._onlineServicesListWidget(locale),
                 ],
               ),
             ),
@@ -90,14 +90,14 @@ class DevicesPageState extends State<DevicesPage> {
     );
   }
 
-  List<Widget> smartphoneDeviceListWidget(RPLocalizations locale) => [
+  List<Widget> _smartphoneDeviceListWidget(RPLocalizations locale) => [
         DevicesPageListTitle(locale: locale, type: DevicesPageTypes.phone),
         SliverList(
           delegate:
               SliverChildBuilderDelegate((BuildContext context, int index) {
             return Center(
               child: StudiesCard(
-                child: cardListBuilder(
+                child: _cardListBuilder(
                   smartphoneDevice[index].icon!,
                   smartphoneDevice[index].phoneInfo['name']!,
                   (
@@ -111,20 +111,20 @@ class DevicesPageState extends State<DevicesPage> {
         ),
       ];
 
-  List<Widget> physicalDevicesListWidget(RPLocalizations locale) => [
+  List<Widget> _physicalDevicesListWidget(RPLocalizations locale) => [
         DevicesPageListTitle(locale: locale, type: DevicesPageTypes.devices),
         SliverList(
           delegate:
               SliverChildBuilderDelegate((BuildContext context, int index) {
             DeviceModel device = physicalDevices[index];
-            return devicesPageCardStream(
+            return _devicesPageCardStream(
                 device.deviceEvents,
-                () => cardListBuilder(
+                () => _cardListBuilder(
                     device.icon!,
                     locale.translate(device.name!),
                     (device.id, device.batteryLevel ?? 0),
                     enableFeedback: true,
-                    onTap: () => physicalDeviceClicked(device),
+                    onTap: () => _physicalDeviceClicked(device),
                     trailing: device.getDeviceStatusIcon is String
                         ? Text(
                             locale
@@ -138,15 +138,15 @@ class DevicesPageState extends State<DevicesPage> {
         ),
       ];
 
-  List<Widget> onlineServicesListWidget(RPLocalizations locale) => [
+  List<Widget> _onlineServicesListWidget(RPLocalizations locale) => [
         DevicesPageListTitle(locale: locale, type: DevicesPageTypes.services),
         SliverList(
           delegate:
               SliverChildBuilderDelegate((BuildContext context, int index) {
             DeviceModel service = onlineServices[index];
-            return devicesPageCardStream(
+            return _devicesPageCardStream(
                 service.deviceEvents,
-                () => cardListBuilder(
+                () => _cardListBuilder(
                       service.icon!,
                       locale.translate(service.name!),
                       null,
@@ -159,13 +159,14 @@ class DevicesPageState extends State<DevicesPage> {
                                   color: Theme.of(context).primaryColor))
                           : service.getServiceStatusIcon,
                       isThreeLine: false,
+                      onTap: () => _onlineServiceClicked(service),
                     ),
                 DeviceStatus.unknown);
           }, childCount: onlineServices.length),
         ),
       ];
 
-  Widget cardListBuilder(
+  Widget _cardListBuilder(
     Icon leading,
     String title,
     (String, int)? subtitle, {
@@ -207,7 +208,7 @@ class DevicesPageState extends State<DevicesPage> {
         onTap: onTap,
       );
 
-  Widget devicesPageCardStream<T>(
+  Widget _devicesPageCardStream<T>(
           Stream<T> stream, Widget Function() childBuilder, T? initialData) =>
       Center(
         child: StudiesCard(
@@ -219,7 +220,24 @@ class DevicesPageState extends State<DevicesPage> {
         ),
       );
 
-  void physicalDeviceClicked(DeviceModel device) async {
+  void _onlineServiceClicked(DeviceModel service) {
+    if (service.status == DeviceStatus.connected ||
+        service.status == DeviceStatus.connecting) {
+      return;
+    }
+
+    service.deviceManager.hasPermissions().then((permissions) {
+      if (permissions) {
+        service.deviceManager.connect();
+      } else {
+        service.deviceManager.requestPermissions().then((_) {
+          service.deviceManager.connect();
+        });
+      }
+    });
+  }
+
+  void _physicalDeviceClicked(DeviceModel device) async {
     if (await FlutterBluePlus.isSupported == false) {
       return;
     }
diff --git a/lib/ui/widgets/details_banner.dart b/lib/ui/widgets/details_banner.dart
index bde0294d..20f42ddb 100644
--- a/lib/ui/widgets/details_banner.dart
+++ b/lib/ui/widgets/details_banner.dart
@@ -17,7 +17,8 @@ class DetailsBanner extends StatelessWidget {
         if (imagePath != null && imagePath!.isNotEmpty)
           SizedBox(
             height: 300,
-            child: bloc.data.studyPageViewModel.getMessageImage(imagePath),
+            child:
+                bloc.appViewModel.studyPageViewModel.getMessageImage(imagePath),
           ),
         Padding(
           padding: const EdgeInsets.all(16),
diff --git a/lib/view_models/cards/activity_data_model.dart b/lib/view_models/cards/activity_data_model.dart
index 74e6b09a..d99c3614 100644
--- a/lib/view_models/cards/activity_data_model.dart
+++ b/lib/view_models/cards/activity_data_model.dart
@@ -10,15 +10,13 @@ class ActivityCardViewModel extends SerializableViewModel<WeeklyActivities> {
   List<DailyActivity> activitiesByType(ActivityType type) =>
       model.activitiesByType(type);
 
-  ActivityCardViewModel() : super();
-
   /// Stream of activity measurements.
   Stream<Measurement>? get activityEvents => controller?.measurements
       .where((measurement) => measurement.data is Activity);
 
   @override
-  Future<void> init(SmartphoneDeploymentController ctrl) async {
-    await super.init(ctrl);
+  void init(SmartphoneDeploymentController ctrl) {
+    super.init(ctrl);
 
     // listen for activity events and count the minutes
     activityEvents?.listen((measurement) {
diff --git a/lib/view_models/cards/heart_rate_data_model.dart b/lib/view_models/cards/heart_rate_data_model.dart
index 1c87c824..6f73692a 100644
--- a/lib/view_models/cards/heart_rate_data_model.dart
+++ b/lib/view_models/cards/heart_rate_data_model.dart
@@ -11,8 +11,10 @@ class HeartRateCardViewModel extends SerializableViewModel<HourlyHeartRate> {
   /// The current heart rate
   double? get currentHeartRate => model.currentHeartRate;
 
-  // If the device is touching skin. Returns true if the device is touching skin, false otherwise.
-  // If the device is not capable of detecting skin contact, this value is always true.
+  /// Is the device is touching skin?
+  ///
+  /// Returns true if the device is touching skin, false otherwise. If the device
+  /// is not capable of detecting skin contact, this value is always true.
   bool contactStatus = false;
 
   HeartRateMinMaxPrHour get dayMinMax =>
@@ -23,8 +25,8 @@ class HeartRateCardViewModel extends SerializableViewModel<HourlyHeartRate> {
       .where((measurement) => measurement.data is PolarHR);
 
   @override
-  Future<void> init(SmartphoneDeploymentController ctrl) async {
-    await super.init(ctrl);
+  void init(SmartphoneDeploymentController ctrl) {
+    super.init(ctrl);
 
     heartRateEvents?.listen(
       (heartRateDataPoint) {
diff --git a/lib/view_models/cards/mobility_data_model.dart b/lib/view_models/cards/mobility_data_model.dart
index 8a7b4b29..138ae7d0 100644
--- a/lib/view_models/cards/mobility_data_model.dart
+++ b/lib/view_models/cards/mobility_data_model.dart
@@ -12,8 +12,8 @@ class MobilityCardViewModel extends SerializableViewModel<WeeklyMobility> {
 
   MobilityCardViewModel();
   @override
-  Future<void> init(SmartphoneDeploymentController ctrl) async {
-    await super.init(ctrl);
+  void init(SmartphoneDeploymentController ctrl) {
+    super.init(ctrl);
 
     // listen for mobility events and update the features
     mobilityEvents?.listen((measurement) {
diff --git a/lib/view_models/cards/steps_data_model.dart b/lib/view_models/cards/steps_data_model.dart
index 2e5d8c6b..8ae1aa98 100644
--- a/lib/view_models/cards/steps_data_model.dart
+++ b/lib/view_models/cards/steps_data_model.dart
@@ -17,8 +17,8 @@ class StepsCardViewModel extends SerializableViewModel<WeeklySteps> {
       .where((dataPoint) => dataPoint.data is StepCount);
 
   @override
-  Future<void> init(SmartphoneDeploymentController ctrl) async {
-    await super.init(ctrl);
+  void init(SmartphoneDeploymentController ctrl) {
+    super.init(ctrl);
 
     // listen for pedometer events and count them
     pedometerEvents?.listen((pedometerDataPoint) {
diff --git a/lib/view_models/data_visualization_page_model.dart b/lib/view_models/data_visualization_page_model.dart
index dcd84693..4c9f11dc 100644
--- a/lib/view_models/data_visualization_page_model.dart
+++ b/lib/view_models/data_visualization_page_model.dart
@@ -49,19 +49,18 @@ class DataVisualizationPageViewModel extends ViewModel {
   DataVisualizationPageViewModel();
 
   @override
-  Future<int> init(SmartphoneDeploymentController ctrl) async {
+  void init(SmartphoneDeploymentController ctrl) {
     super.init(ctrl);
-    await _activityCardDataModel.init(ctrl);
-    await _stepsCardDataModel.init(ctrl);
-    await _heartRateCardDataModel.init(ctrl);
-    await _mobilityCardDataModel.init(ctrl);
-    await _measuresCardDataModel.init(ctrl);
-    await _surveysCardDataModel.init(ctrl);
-    await _audioCardDataModel.init(ctrl);
-    await _videoCardDataModel.init(ctrl);
-    await _imageCardDataModel.init(ctrl);
-    await _studyProgressCardDataModel.init(ctrl);
-    return 1;
+    _activityCardDataModel.init(ctrl);
+    _stepsCardDataModel.init(ctrl);
+    _heartRateCardDataModel.init(ctrl);
+    _mobilityCardDataModel.init(ctrl);
+    _measuresCardDataModel.init(ctrl);
+    _surveysCardDataModel.init(ctrl);
+    _audioCardDataModel.init(ctrl);
+    _videoCardDataModel.init(ctrl);
+    _imageCardDataModel.init(ctrl);
+    _studyProgressCardDataModel.init(ctrl);
   }
 
   /// Delete all persistent view models.
diff --git a/lib/view_models/devices_page_model.dart b/lib/view_models/devices_page_model.dart
index 8e974438..30617a98 100644
--- a/lib/view_models/devices_page_model.dart
+++ b/lib/view_models/devices_page_model.dart
@@ -73,6 +73,7 @@ class DeviceModel {
         LocationService.DEVICE_TYPE: "pages.devices.type.location.name",
         ESenseDevice.DEVICE_TYPE: "pages.devices.type.esense.name",
         PolarDevice.DEVICE_TYPE: "pages.devices.type.polar.name",
+        HealthService.DEVICE_TYPE: "pages.devices.type.health.name",
       };
 
   static Map<String, String> get deviceTypeDescription => {
@@ -83,6 +84,7 @@ class DeviceModel {
         LocationService.DEVICE_TYPE: "pages.devices.type.location.description",
         ESenseDevice.DEVICE_TYPE: "pages.devices.type.esense.description",
         PolarDevice.DEVICE_TYPE: "pages.devices.type.polar.description",
+        HealthService.DEVICE_TYPE: "pages.devices.type.health.description",
       };
 
   static Map<String, Icon> get deviceTypeIcon => {
@@ -92,6 +94,7 @@ class DeviceModel {
         LocationService.DEVICE_TYPE: const Icon(Icons.location_on),
         ESenseDevice.DEVICE_TYPE: const Icon(Icons.headphones, size: 30),
         PolarDevice.DEVICE_TYPE: const Icon(Icons.monitor_heart, size: 30),
+        HealthService.DEVICE_TYPE: const Icon(Icons.favorite_rounded, size: 30),
       };
 
   static Map<DeviceStatus, dynamic> get deviceStatusIcon => {
diff --git a/lib/view_models/view_model.dart b/lib/view_models/view_model.dart
index 99f4007d..4a20679e 100644
--- a/lib/view_models/view_model.dart
+++ b/lib/view_models/view_model.dart
@@ -8,7 +8,9 @@ abstract class ViewModel {
 
   /// Initialize this view model before use.
   @mustCallSuper
-  Future<void> init(SmartphoneDeploymentController ctrl) async {
+  void init(SmartphoneDeploymentController ctrl) {
+    debug('$runtimeType - init()');
+
     _controller = ctrl;
   }
 }
@@ -43,12 +45,12 @@ abstract class SerializableViewModel<D extends DataModel> extends ViewModel {
 
   @override
   @mustCallSuper
-  Future<void> init(SmartphoneDeploymentController ctrl) async {
+  void init(SmartphoneDeploymentController ctrl) {
     super.init(ctrl);
     _model = createModel();
 
     // restore the data model (if any saved)
-    await restore().then((savedModel) => _model = savedModel ?? _model);
+    restore().then((savedModel) => _model = savedModel ?? _model);
 
     // save the data model on a regular basis.
     Timer.periodic(const Duration(minutes: 3), (_) => save(model.toJson()));
@@ -170,13 +172,15 @@ class CarpStudyAppViewModel extends ViewModel {
       _informedConsentViewModel;
 
   @override
-  Future<void> init(SmartphoneDeploymentController ctrl) async {
-    await super.init(ctrl);
-    await _studyPageViewModel.init(ctrl);
-    await _taskListPageViewModel.init(ctrl);
-    await _profilePageViewModel.init(ctrl);
-    await _devicesPageViewModel.init(ctrl);
-    await _invitationsListViewModel.init(ctrl);
-    await _informedConsentViewModel.init(ctrl);
+  // Future<void> init(SmartphoneDeploymentController ctrl) async {
+  void init(SmartphoneDeploymentController ctrl) {
+    super.init(ctrl);
+    _studyPageViewModel.init(ctrl);
+    _taskListPageViewModel.init(ctrl);
+    _profilePageViewModel.init(ctrl);
+    _devicesPageViewModel.init(ctrl);
+    _invitationsListViewModel.init(ctrl);
+    _informedConsentViewModel.init(ctrl);
+    _dataVisualizationPageViewModel.init(ctrl);
   }
 }