From ad83fa7ae1040d5712b31f4f8276ad4034f11146 Mon Sep 17 00:00:00 2001
From: Jason Kulatunga <jason@thesparktree.com>
Date: Thu, 31 Aug 2023 00:08:35 -0700
Subject: [PATCH] adding explore functionality to header. make sure explore
 resource list has a pointer cursor. when report header doesnt return a
 patient, handle gracefully. when explore page has no connected sources,
 correctly display empty page.

---
 CONTRIBUTING.md                                              | 2 ++
 frontend/src/app/components/header/header.component.html     | 3 +++
 .../app/components/report-header/report-header.component.ts  | 5 +++--
 frontend/src/app/pages/explore/explore.component.html        | 3 +--
 frontend/src/app/pages/explore/explore.component.ts          | 2 ++
 .../src/app/pages/source-detail/source-detail.component.html | 2 +-
 6 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 31c30600..6059f5e0 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -66,6 +66,8 @@ web:
       path: ./dist
 database:
   location: 'fasten.db'
+cache:
+  location: ''
 log:
   file: '' #absolute or relative paths allowed, eg. web.log
   level: INFO
diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html
index 0fb5b223..b6b7a5a8 100644
--- a/frontend/src/app/components/header/header.component.html
+++ b/frontend/src/app/components/header/header.component.html
@@ -20,6 +20,9 @@
         <li class="nav-item" ngbDropdown [ngClass]="{ 'active': labs?.isActive }">
           <a routerLink="/labs" routerLinkActive="active" #labs="routerLinkActive" class="nav-link"><fa-icon [icon]="['fas', 'heart-pulse']"></fa-icon>&nbsp; Labs</a>
         </li>
+        <li class="nav-item" ngbDropdown [ngClass]="{ 'active': explore?.isActive }">
+          <a routerLink="/explore" routerLinkActive="active" #explore="routerLinkActive" class="nav-link"><fa-icon [icon]="['fas', 'folder-tree']"></fa-icon>&nbsp; Explore</a>
+        </li>
         <li class="nav-item" ngbDropdown [ngClass]="{ 'active': sources?.isActive }">
           <a routerLink="/sources" routerLinkActive="active" #sources="routerLinkActive" class="nav-link"><fa-icon [icon]="['fas', 'hospital']"></fa-icon>&nbsp; Sources</a>
         </li>
diff --git a/frontend/src/app/components/report-header/report-header.component.ts b/frontend/src/app/components/report-header/report-header.component.ts
index 35bffb6e..b77053c0 100644
--- a/frontend/src/app/components/report-header/report-header.component.ts
+++ b/frontend/src/app/components/report-header/report-header.component.ts
@@ -23,15 +23,16 @@ export class ReportHeaderComponent implements OnInit {
     this.fastenApi.getResources("Patient").subscribe(results => {
       console.log(results)
       this.patient = results[0]
+      if(!this.patient) return
 
-      let primaryCareId = fhirpath.evaluate(this.patient.resource_raw, "Patient.generalPractitioner.reference.first()")
+      let primaryCareId = fhirpath.evaluate(this.patient?.resource_raw, "Patient.generalPractitioner.reference.first()")
       console.log("GP:", primaryCareId)
       if(primaryCareId){
         let primaryCareIdStr = primaryCareId.join("")
         let primaryCareIdParts = primaryCareIdStr.split("/")
         if(primaryCareIdParts.length == 2) {
           console.log(primaryCareIdParts)
-          this.fastenApi.getResources(primaryCareIdParts[0], this.patient.source_id,  primaryCareIdParts[1]).subscribe(primaryResults => {
+          this.fastenApi.getResources(primaryCareIdParts[0], this.patient?.source_id,  primaryCareIdParts[1]).subscribe(primaryResults => {
             if (primaryResults.length > 0){
               this.primaryCare = new PractitionerModel(primaryResults[0].resource_raw)
             }
diff --git a/frontend/src/app/pages/explore/explore.component.html b/frontend/src/app/pages/explore/explore.component.html
index 69568707..6226d7da 100644
--- a/frontend/src/app/pages/explore/explore.component.html
+++ b/frontend/src/app/pages/explore/explore.component.html
@@ -6,8 +6,7 @@
       <report-header [reportHeaderTitle]="'Explore'" [reportHeaderSubTitle]="'Explore your Medical Records'"></report-header>
 
       <ng-container [ngTemplateOutlet]="loading ? isLoadingTemplate :
-      (connectedSources.length == 0) ? emptyReport :
-      report"></ng-container>
+      (connectedSources.length == 0) ? emptyReport : report"></ng-container>
 
       <ng-template #report>
         <div class="row">
diff --git a/frontend/src/app/pages/explore/explore.component.ts b/frontend/src/app/pages/explore/explore.component.ts
index 1010e41a..4ecf41fb 100644
--- a/frontend/src/app/pages/explore/explore.component.ts
+++ b/frontend/src/app/pages/explore/explore.component.ts
@@ -33,6 +33,8 @@ export class ExploreComponent implements OnInit {
         }
         this.loading = false
       })
+      if(connectedSources.length == 0) this.loading = false
+
     }, error => {
       this.loading = false
     })
diff --git a/frontend/src/app/pages/source-detail/source-detail.component.html b/frontend/src/app/pages/source-detail/source-detail.component.html
index 97b40374..2ed01a99 100644
--- a/frontend/src/app/pages/source-detail/source-detail.component.html
+++ b/frontend/src/app/pages/source-detail/source-detail.component.html
@@ -56,7 +56,7 @@
       </div>
 
       <ul class="list-group">
-        <li *ngFor="let resourceGroup of resourceTypeCounts | keyvalue" (click)="selectResourceType(resourceGroup.key)" class="list-group-item d-flex justify-content-between align-items-center">
+        <li *ngFor="let resourceGroup of resourceTypeCounts | keyvalue" (click)="selectResourceType(resourceGroup.key)" class="list-group-item d-flex justify-content-between align-items-center cursor-pointer">
           {{resourceGroup.key}} <span class="badge badge-primary badge-pill">{{resourceGroup.value}}</span>
         </li>
       </ul>