156 fix and handle database failure for long time queries (#157)

* feat: removed nested study and task objects and minor bug fixes

* feat: deploy script removed for security

Author: nicoalee

package.json

@@ -58,7 +58,7 @@
         "build-dev": "ng build --configuration development --aot",
         "test": "ng test",
         "lint": "ng lint",
-        "deploy": "cd dist && scp -r . [email protected]:/home/nlee30",
+        "deploy": "cd dist && scp ...",
         "build-deploy": "npm run build && npm run sentry:generate-sourcemaps && npm run sentry:upload-sourcemaps && npm run remove-maps && npm run deploy",
         "lint-fix": "ng lint --fix=true",
         "sentry:generate-sourcemaps": "sentry-cli sourcemaps inject ./dist",

src/app/CustomErrorHandler.ts

@@ -5,30 +5,53 @@ import { environment } from 'src/environments/environment';
 import { TaskManagerService } from './services/task-manager.service';
 import { UserStateService } from './services/user-state-service';
 import { IErrorNavigationState } from './pages/error-page/error-page.component';
+import { HttpErrorResponse } from '@angular/common/http';
+import { SnackbarService } from './services/snackbar/snackbar.service';
 
 @Injectable()
 export default class CustomErrorHandler extends SentryErrorHandler {
     constructor(
         private _router: Router,
         private taskManager: TaskManagerService,
         private userStateService: UserStateService,
-        private injector: Injector
+        private injector: Injector,
+        private snackbarService: SnackbarService
     ) {
         super();
     }
 
-    handleError(error: string | Error): void {
+    handleError(error: string | Error | HttpErrorResponse): void {
         const ngZone = this.injector.get(NgZone);
-        ngZone.run(() => {
-            this._router.navigate(['task-error'], {
-                state: {
-                    taskIndex: this.taskManager?.currentStudyTask?.taskOrder,
-                    studyId: this.taskManager?.currentStudyTask?.studyId,
-                    stackTrace: error instanceof Error ? error.stack : error,
-                    userId: this.userStateService.currentlyLoggedInUserId,
-                } as IErrorNavigationState,
+
+        // check specifically to see if the CSRF is not responding...usually this means the server is offline
+        if (error instanceof HttpErrorResponse && error?.url?.includes('/api/auth/csrf') && error?.status === 504) {
+            this.snackbarService.openErrorSnackbar(
+                'The server is not responding. Please try again later.',
+                undefined,
+                10000
+            );
+            ngZone.run(() => {
+                this._router.navigate(['task-error'], {
+                    state: {
+                        taskIndex: undefined,
+                        studyId: undefined,
+                        stackTrace: error.message,
+                        userId: this.userStateService.currentlyLoggedInUserId,
+                    } as IErrorNavigationState,
+                });
+            });
+        } else {
+            ngZone.run(() => {
+                this._router.navigate(['task-error'], {
+                    state: {
+                        taskIndex: this.taskManager?.currentStudyTask?.taskOrder,
+                        studyId: this.taskManager?.currentStudyTask?.studyId,
+                        stackTrace: error instanceof Error ? error.stack : error,
+                        userId: this.userStateService.currentlyLoggedInUserId,
+                    } as IErrorNavigationState,
+                });
             });
-        });
+        }
 
         if (environment.production) {
             super.handleError(error);

src/app/ErrorHttpInterceptor.ts

@@ -1,11 +1,9 @@
 import { SupportedLangs } from './enums';
 import { NullTime } from './InternalDTOs';
-import { Study } from './Study';
-import { User } from './User';
 
 export class StudyUser {
-    user: Partial<User>;
-    study: Partial<Study>;
+    userId: number;
+    studyId: number;
     completionCode: string;
     registerDate: string;
     dueDate: NullTime;

src/app/models/StudyUser.ts

@@ -64,8 +64,8 @@ export function getStudyUserDataAsDataTableFormat(studyUsers: StudyUser[]): Data
 
         return {
             fields: {
-                userId: studyUser.user.id,
-                studyId: studyUser.study.id,
+                userId: studyUser.userId,
+                studyId: studyUser.studyId,
                 completionCode: studyUser.completionCode,
                 registerDate: formatDate(studyUser.registerDate),
                 dueDate: studyUser.dueDate.Valid ? formatDate(studyUser.dueDate.Time) : 'NONE',

src/app/pages/admin/admin-dashboard/data/data-tree/data-tree.component.helpers.ts

@@ -6,11 +6,13 @@
         <button
             [disabled]="node.disabled"
             (click)="node.clickAction()"
-            style="font-size: 1.25rem; padding: 1rem"
+            style="font-size: 1.25rem; padding: 0.5rem; width: 100%; text-align: left"
             mat-button
             color="primary"
         >
-            {{ node.studyTask?.taskOrder !== null ? node.studyTask.taskOrder + ': ' : '' }} {{ node.name }}
+            <mat-icon style="margin-right: 1rem">download</mat-icon>
+            {{ node.studyTask?.taskOrder !== null ? 'Task ' + (node.studyTask.taskOrder + 1) + ': ' : '' }}
+            {{ node.name }}
         </button>
     </mat-tree-node>
     <!-- This is the tree node template for expandable nodes -->

src/app/pages/admin/admin-dashboard/data/data-tree/data-tree.component.html

@@ -161,7 +161,7 @@ export class DataTreeComponent implements OnInit {
         this._study = study;
         this.dataSource.data = [
             {
-                name: 'Download Study Snapshots',
+                name: 'Study Snapshots',
                 clickAction: undefined,
                 disabled: Object.keys(study.snapshots).length === 0,
                 children: [
@@ -189,27 +189,39 @@ export class DataTreeComponent implements OnInit {
                 ],
             },
             {
-                name: 'Download user data for Account Holders',
-                clickAction: () => {
-                    this.downloadStudyUserData(study);
-                },
-                children: [],
+                name: 'User Data',
+                clickAction: undefined,
+                children: [
+                    {
+                        name: 'Download user data for Account Holders',
+                        clickAction: () => {
+                            this.downloadStudyUserData(study);
+                        },
+                        children: [],
+                    },
+                    {
+                        name: 'Download user data for Crowdsourced Users',
+                        clickAction: () => {
+                            this.downloadCrowdsourcedUserData(study);
+                        },
+                        children: [],
+                    },
+                ],
             },
             {
-                name: 'Download user data for Crowdsourced Users',
-                clickAction: () => {
-                    this.downloadCrowdsourcedUserData(study);
-                },
-                children: [],
+                name: 'Task Data',
+                clickAction: undefined,
+                children: [
+                    ...(this._study.studyTasks || []).map((studyTask) => ({
+                        name: `Download ${studyTask.task.name} Participant Data`,
+                        studyTask: studyTask,
+                        clickAction: () => {
+                            this.downloadParticipantData(study, studyTask);
+                        },
+                        children: [],
+                    })),
+                ],
             },
-            ...(this._study.studyTasks || []).map((studyTask) => ({
-                name: `Download ${studyTask.task.name} Participant Data`,
-                studyTask: studyTask,
-                clickAction: () => {
-                    this.downloadParticipantData(study, studyTask);
-                },
-                children: [],
-            })),
         ];
     }
 

src/app/pages/admin/admin-dashboard/data/data-tree/data-tree.component.ts

@@ -1,6 +1,6 @@
-<div *ngIf="!studyExists" class="error-text p-4">Could not find study</div>
+<div *ngIf="!studyExists && !isLoading" class="error-text p-4">Could not find study</div>
 
-<div *ngIf="studyExists" class="container-fluid">
+<div *ngIf="studyExists && !isLoading" class="container-fluid">
     <div class="d-flex flex-column">
         <div>
             <span class="badge"> Study Id: {{ study?.id }} </span>

src/app/pages/admin/admin-dashboard/data/data.component.html

@@ -35,6 +35,7 @@ export class DataComponent implements OnInit, OnDestroy {
     tableData: DataTableFormat[]; // json table to populate table component
     fileName: string = null;
     subscriptions: Subscription[] = [];
+    isLoading: boolean = false;
 
     constructor(
         private studyService: StudyService,
@@ -49,7 +50,15 @@ export class DataComponent implements OnInit, OnDestroy {
     ) {}
 
     ngOnInit(): void {
-        const sub = this.studyService.getOrUpdateStudies().subscribe(() => {});
+        this.isLoading = true;
+        this.loaderService.showLoader();
+        const sub = this.studyService
+            .getOrUpdateStudies()
+            .subscribe(() => {})
+            .add(() => {
+                this.isLoading = false;
+                this.loaderService.hideLoader();
+            });
         this.idFromURL = this.route.snapshot.paramMap.get('id');
         this.subscriptions.push(sub);
     }
@@ -212,8 +221,8 @@ export class DataComponent implements OnInit, OnDestroy {
 
             return {
                 fields: {
-                    userId: studyUser.user.id,
-                    studyId: studyUser.study.id,
+                    userId: studyUser.userId,
+                    studyId: studyUser.studyId,
                     completionCode: studyUser.completionCode,
                     registerDate: this.formatDate(studyUser.registerDate),
                     dueDate: studyUser.dueDate.Valid ? this.formatDate(studyUser.dueDate.Time) : 'NONE',

src/app/pages/admin/admin-dashboard/data/data.component.ts

@@ -1,6 +1,6 @@
 <div style="width: 100%; min-height: 100vh; padding: 4rem 0">
     <div class="flex-column-center">
-        <div style="width: 50%">
+        <div style="width: 70%">
             <h6 style="font-size: 2rem; color: salmon" class="mb-4">We encountered an error.</h6>
             <div style="font-size: 1.5rem; line-height: normal" class="mb-4">
                 While running the platform, we ran into an error. In order to report this and help us fix it as fast as