Fix frontend test errors and remove logs (#462)

* add karma verbose reporter

* Move fontawesome imports to separate module for easier testing imports

* add some missing imports/declarations

* remove console.logs

* add .catch where i got rid of empty .then

frontend/karma.conf.js

@@ -8,7 +8,8 @@ module.exports = function(config) {
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('karma-verbose-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma'),
     ],
     client: {
       jasmine: {
@@ -41,7 +42,11 @@ module.exports = function(config) {
     },
 
     // coverage reporter generates the coverage
-    reporters: ['progress', 'coverage'],
+    reporters: [
+      'progress',
+      'coverage',
+      // 'verbose'
+    ],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

frontend/package.json

@@ -86,6 +86,7 @@
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
+    "karma-verbose-reporter": "^0.0.8",
     "protractor": "~7.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

frontend/src/app/app.component.spec.ts

@@ -2,6 +2,7 @@ import { TestBed, async } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
+import { ToastComponent } from './components/toast/toast.component';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
@@ -11,7 +12,7 @@ describe('AppComponent', () => {
         HttpClientTestingModule
       ],
       declarations: [
-        AppComponent
+        AppComponent, ToastComponent
       ],
     }).compileComponents();
   }));

frontend/src/app/app.component.ts

@@ -39,7 +39,6 @@ export class AppComponent implements OnInit {
       if (event.url?.startsWith('/auth') || event.url?.startsWith('/desktop')) {
         this.showHeader = false;
       } else {
-        // console.log("NU")
         this.showHeader = true;
       }
 
@@ -48,5 +47,3 @@ export class AppComponent implements OnInit {
     }
   }
 }
-
-

frontend/src/app/app.module.ts

@@ -10,9 +10,6 @@ import { DashboardComponent } from './pages/dashboard/dashboard.component';
 import { MedicalSourcesComponent } from './pages/medical-sources/medical-sources.component';
 import { NgChartsModule } from 'ng2-charts';
 import {SharedModule} from './components/shared.module';
-import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'
-import { fas } from '@fortawesome/free-solid-svg-icons';
-import { far } from '@fortawesome/free-regular-svg-icons';
 import { ResourceDetailComponent } from './pages/resource-detail/resource-detail.component';
 import { AuthSignupComponent } from './pages/auth-signup/auth-signup.component';
 import { AuthSigninComponent } from './pages/auth-signin/auth-signin.component';
@@ -42,6 +39,7 @@ import {FhirCardModule} from './components/fhir-card/fhir-card.module';
 import {FhirDatatableModule} from './components/fhir-datatable/fhir-datatable.module';
 import { AuthSignupWizardComponent } from './pages/auth-signup-wizard/auth-signup-wizard.component';
 import {ShowFirstRunWizardGuard} from './auth-guards/show-first-run-wizard-guard';
+import { IconsModule } from './icon-module';
 
 @NgModule({
   declarations: [
@@ -67,7 +65,6 @@ import {ShowFirstRunWizardGuard} from './auth-guards/show-first-run-wizard-guard
     FormsModule,
     ReactiveFormsModule,
     BrowserModule,
-    FontAwesomeModule,
     SharedModule,
     FhirCardModule,
     FhirDatatableModule,
@@ -82,7 +79,8 @@ import {ShowFirstRunWizardGuard} from './auth-guards/show-first-run-wizard-guard
     InfiniteScrollModule,
     NgSelectModule,
     WidgetsModule,
-    DirectivesModule
+    DirectivesModule,
+    IconsModule,
   ],
   providers: [
     {
@@ -112,8 +110,4 @@ import {ShowFirstRunWizardGuard} from './auth-guards/show-first-run-wizard-guard
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA] //required for lhncbc/lforms (webcomponent)
 })
-export class AppModule {
+export class AppModule {}
-  constructor(library: FaIconLibrary) {
-    library.addIconPacks(fas, far);
-  }
-}

frontend/src/app/components/fhir-card/common/table/table.component.spec.ts

@@ -41,7 +41,7 @@ describe('TableComponent', () => {
   it('encodes urls properly', () => {
     spyOn(console, 'log').and.callThrough();
     const link = fixture.debugElement.nativeElement.querySelector('a');
-    console.log(link);
+
     expect(link.href).toContain(
       '/explore/123-456-789%3D/resource/aHR0cHM6Ly93d3cubWVyY3kubmV0L3NpdGVzL2RlZmF1bHQvZmlsZXMvZG9jdG9yX2ltYWdlcy9kZXNrdG9wLzE2NTk4ODYwNTktbS5qcGc%3D'
     );

frontend/src/app/components/fhir-card/datatypes/rtf/rtf.component.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { RtfComponent } from './rtf.component';
 import { BinaryModel } from 'src/lib/models/resources/binary-model';
+import { RTFJS } from 'rtf.js';
 
 describe('RtfComponent', () => {
   let component: RtfComponent;
@@ -15,6 +16,8 @@ describe('RtfComponent', () => {
     })
     .compileComponents();
 
+    RTFJS.loggingEnabled(false);
+
     fixture = TestBed.createComponent(RtfComponent);
     component = fixture.componentInstance;
     component.displayModel = new BinaryModel({});

frontend/src/app/components/fhir-card/fhir-card/fhir-card.component.ts

@@ -62,7 +62,6 @@ export class FhirCardComponent implements OnInit, OnChanges {
 
     let componentType = this.typeLookup(this.displayModel?.source_resource_type)
     if(componentType != null){
-      console.log("Attempting to create fhir display component", this.displayModel, componentType)
       const componentRef = viewContainerRef.createComponent<FhirCardComponentInterface>(componentType);
       componentRef.instance.displayModel = this.displayModel;
       componentRef.instance.showDetails = this.showDetails;

frontend/src/app/components/fhir-card/resources/fallback/fallback.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FallbackComponent } from './fallback.component';
+import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 
 describe('FallbackComponent', () => {
   let component: FallbackComponent;
@@ -8,7 +9,19 @@ describe('FallbackComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ FallbackComponent ]
+      imports: [ FallbackComponent ],
+      providers: [
+        {
+          provide: HIGHLIGHT_OPTIONS,
+          useValue: {
+            coreLibraryLoader: () => import('highlight.js/lib/core'),
+            lineNumbersLoader: () => import('highlightjs-line-numbers.js'), // Optional, only if you want the line numbers
+            languages: {
+              json: () => import('highlight.js/lib/languages/json')
+            },
+          }
+        },
+      ]
     })
     .compileComponents();
 

frontend/src/app/components/fhir-datatable/datatable-generic-resource/datatable-generic-resource.component.spec.ts

@@ -4,6 +4,7 @@ import { DatatableGenericResourceComponent } from './datatable-generic-resource.
 import {HTTP_CLIENT_TOKEN} from '../../../dependency-injection';
 import {HttpClient} from '@angular/common/http';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 
 describe('ListGenericResourceComponent', () => {
   let component: DatatableGenericResourceComponent;
@@ -12,7 +13,7 @@ describe('ListGenericResourceComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ DatatableGenericResourceComponent ],
-      imports: [HttpClientTestingModule],
+      imports: [HttpClientTestingModule, NgxDatatableModule],
       providers: [
         {
           provide: HTTP_CLIENT_TOKEN,

frontend/src/app/components/fhir-datatable/datatable-generic-resource/datatable-generic-resource.component.ts

@@ -65,7 +65,6 @@ export class DatatableGenericResourceComponent implements OnInit, ResourceListCo
   }
 
   ngOnInit(): void {
-    console.log("INIT GENERIC RESOURCE")
     this.currentPage = {offset: 0}
 
     this.changePage(this.currentPage)
@@ -75,7 +74,6 @@ export class DatatableGenericResourceComponent implements OnInit, ResourceListCo
   }
 
   changePage(page: PageInfo){
-    console.log("Requesting page:" + JSON.stringify(page))
     this.currentPage = page;
     this.fastenApi.getResources(this.resourceListType, this.sourceId, null, this.currentPage.offset)
       .subscribe((resourceList: ResourceFhir[]) => {
@@ -100,7 +98,6 @@ export class DatatableGenericResourceComponent implements OnInit, ResourceListCo
 
 
   renderList(resourceList: ResourceFhir[]){
-    console.log("GENERIC RESOURCE RENDERLSIT")
     this.columns = this.columnDefinitions.map((defn) => {
       let column = {name: defn.title, prop: defn.title.replace(/[^A-Z0-9]/ig, "_"), sortable: false}
       return column
@@ -152,15 +149,3 @@ export class DatatableGenericResourceComponent implements OnInit, ResourceListCo
 ///////////////////////////////////////////////////////////////////////////////////////
 // START OVERRIDES
 ///////////////////////////////////////////////////////////////////////////////////////
-
-
-
-
-
-
-
-
-
-
-
-

frontend/src/app/components/fhir-datatable/fhir-datatable/fhir-datatable.component.ts

@@ -68,7 +68,6 @@ export class FhirDatatableComponent implements OnInit, OnChanges {
 
     let componentType = this.typeLookup(this.resourceListType)
     if(componentType != null){
-      console.log("Attempting to create component", this.resourceListType, componentType)
       const componentRef = viewContainerRef.createComponent<ResourceListComponentInterface>(componentType);
       componentRef.instance.totalElements = this.selectedTotalElements;
       componentRef.instance.resourceListType = this.resourceListType;

frontend/src/app/components/glossary-lookup/glossary-lookup.component.ts

@@ -30,7 +30,6 @@ export class GlossaryLookupComponent implements OnInit {
   ngOnInit(): void {
     this.fastenApi.getGlossarySearchByCode(this.code, this.codeSystem).subscribe(result => {
       this.loading = false
-      console.log(result)
       this.url  = result?.url
       this.source = result?.publisher
       this.description = this.sanitized.bypassSecurityTrustHtml(result?.description)

frontend/src/app/components/glossary-lookup/glossary-lookup.stories.ts

@@ -32,12 +32,10 @@ const withHttpClientProvider: DecoratorFunction<any> = (storyFunc, context) => {
   class MockHttpClient extends HttpClient {
 
     get(): Observable<any> {
-      // console.log("CALLED getGlossarySearchByCode in MockFastenApiService")
       return of(httpClientResp)
     }
   }
 
-  // console.log("Inside withHttpClientProvider DecoratorFunction", code, codeSystem)
   return moduleMetadata({ providers: [{ provide: HTTP_CLIENT_TOKEN, useClass: MockHttpClient }] })(
     storyFunc,
     context

frontend/src/app/components/header/header.component.spec.ts

@@ -6,6 +6,7 @@ import {RouterModule} from '@angular/router';
 import {RouterTestingModule} from '@angular/router/testing';
 import {HTTP_CLIENT_TOKEN} from '../../dependency-injection';
 import {HttpClient} from '@angular/common/http';
+import { IconsModule } from 'src/app/icon-module';
 
 describe('HeaderComponent', () => {
   let component: HeaderComponent;
@@ -13,7 +14,7 @@ describe('HeaderComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [ HttpClientTestingModule, RouterTestingModule, RouterModule ],
+      imports: [ HttpClientTestingModule, RouterTestingModule, RouterModule, IconsModule ],
       declarations: [ HeaderComponent ],
       providers: [
         {

frontend/src/app/components/header/header.component.ts

@@ -95,12 +95,10 @@ export class HeaderComponent implements OnInit, OnDestroy {
     this.newSupportRequest = newSupportRequest
   }
   submitSupportForm() {
-    console.log("submitting support form", this.newSupportRequest)
     this.loading = false
 
     this.fastenApi.supportRequest(this.newSupportRequest).subscribe((resp: any) => {
         this.loading = false
-        console.log(resp);
         this.submitSuccess = true
         //show success toast? close modal?
       },

frontend/src/app/components/medical-record-wizard-add-attachment/medical-record-wizard-add-attachment.component.ts

@@ -38,7 +38,6 @@ export class MedicalRecordWizardAddAttachmentComponent implements OnInit {
   }
 
   onAttachmentFileChange($event){
-    console.log("onAttachmentFileChange")
     let fileInput = $event.target as HTMLInputElement;
     if (fileInput.files && fileInput.files[0]) {
       let processingFile = fileInput.files[0]

frontend/src/app/components/medical-record-wizard-add-encounter/medical-record-wizard-add-encounter.component.ts

@@ -72,7 +72,6 @@ export class MedicalRecordWizardAddEncounterComponent implements OnInit {
     }
   }
   selectionChanged(event) {
-    console.log("SELECTION CHANGED", event)
     this.selectedEncounter = event
   }
   get submitEnabled() {
@@ -108,7 +107,6 @@ export class MedicalRecordWizardAddEncounterComponent implements OnInit {
           let parsed = RecResourceRelatedDisplayModel(graphResponse.results["Encounter"]?.[0])
           let encounterDisplayModelWithRelated = parsed.displayModel as EncounterModel
 
-          console.log("Found encounter (and related resources)", encounterDisplayModelWithRelated)
           this.activeModal.close({
             action: this.activeId,
             data: encounterDisplayModelWithRelated

frontend/src/app/components/medical-record-wizard-add-lab-results/medical-record-wizard-add-lab-results.component.ts

@@ -43,7 +43,6 @@ export class MedicalRecordWizardAddLabResultsComponent implements OnInit {
   ngOnInit(): void {
 
     // const parent: HTMLElement = document.getElementById('lhcFormContainer');
-    // console.log("Adding Form to page", this.questionnaire)
     // LForms.Util.addFormToPage(this.questionnaire, parent);
     this.resetLabPanelForm()
   }
@@ -60,26 +59,18 @@ export class MedicalRecordWizardAddLabResultsComponent implements OnInit {
       null,
       {bundleType: "transaction"}
     )
-    console.log(formData)
 
     this.activeModal.close({
       action: 'create',
       data: formData
     });
   }
-  onFormReady(e){
-    console.log("onFormReady", e)
-  }
-  onError(e){
-    console.log("onError", e)
-  }
 
   private resetLabPanelForm() {
     this.newLabPanelTypeaheadForm = new FormGroup({
       data: new FormControl(null, Validators.required),
     })
     this.newLabPanelTypeaheadForm.valueChanges.subscribe(form => {
-      console.log("CHANGE LabPanel IN MODAL", form)
       let val = form.data
       if(val && val.id){
         this.loading = true

frontend/src/app/components/medical-record-wizard-add-organization/medical-record-wizard-add-organization.component.ts

@@ -74,7 +74,6 @@ export class MedicalRecordWizardAddOrganizationComponent implements OnInit {
     }
   }
   selectionChanged(event) {
-    console.log("SELECTION CHANGED", event)
     this.selectedOrganization = event
   }
   get submitEnabled() {
@@ -160,7 +159,6 @@ export class MedicalRecordWizardAddOrganizationComponent implements OnInit {
       data: new FormControl(null, Validators.required),
     })
     this.newOrganizationTypeaheadForm.valueChanges.subscribe(form => {
-      console.log("CHANGE Organization IN MODAL", form)
       let val = form.data
 
       if(val == null){

frontend/src/app/components/medical-record-wizard-add-practitioner/medical-record-wizard-add-practitioner.component.ts

@@ -74,7 +74,6 @@ export class MedicalRecordWizardAddPractitionerComponent implements OnInit {
     }
   }
   selectionChanged(event) {
-    console.log("SELECTION CHANGED", event)
     this.selectedPractitioner = event
   }
   get submitEnabled() {
@@ -168,7 +167,6 @@ export class MedicalRecordWizardAddPractitionerComponent implements OnInit {
       data: new FormControl(null, Validators.required),
     })
     this.newPractitionerTypeaheadForm.valueChanges.subscribe(form => {
-      console.log("CHANGE INDIVIDUAL IN MODAL", form)
       let val = form.data
       if(val == null){
         //reset the dependant fields (user cleared the text box)

frontend/src/app/components/medical-record-wizard/medical-record-wizard.component.ts

@@ -242,13 +242,11 @@ export class MedicalRecordWizardComponent implements OnInit {
     modalRef.componentInstance.debugMode = this.debugMode;
     modalRef.result.then(
       (result) => {
-        console.log('Closing, saving form', result);
         // add this to the list of organization
         //TODO
         this.addEncounter(result);
       },
       (err) => {
-        console.log('Closed without saving', err);
       },
     );
 
@@ -268,7 +266,6 @@ export class MedicalRecordWizardComponent implements OnInit {
     modalRef.componentInstance.disabledResourceIds = disabledResourceIds;
     modalRef.result.then(
       (result) => {
-        console.log('Closing, saving form', result);
         // add this to the list of organization
         this.addPractitioner(result);
         if(formGroup && controlName){
@@ -277,7 +274,6 @@ export class MedicalRecordWizardComponent implements OnInit {
         }
       },
       (err) => {
-        console.log('Closed without saving', err);
       },
     );
 
@@ -296,7 +292,6 @@ export class MedicalRecordWizardComponent implements OnInit {
     modalRef.componentInstance.disabledResourceIds = disabledResourceIds;
     modalRef.result.then(
       (result) => {
-        console.log('Closing, saving form', result);
         //add this to the list of organization
         this.addOrganization(result);
         if(formGroup && controlName){
@@ -305,7 +300,6 @@ export class MedicalRecordWizardComponent implements OnInit {
         }
       },
       (err) => {
-        console.log('Closed without saving', err);
       },
     );
   }
@@ -317,12 +311,10 @@ export class MedicalRecordWizardComponent implements OnInit {
     modalRef.componentInstance.debugMode = this.debugMode;
     modalRef.result.then(
       (result) => {
-        console.log('Closing, saving form', result);
         //add this to the list of organization
         this.addLabResultsBundle(result);
       },
       (err) => {
-        console.log('Closed without saving', err);
       },
     );
   }
@@ -335,7 +327,6 @@ export class MedicalRecordWizardComponent implements OnInit {
     modalRef.componentInstance.debugMode = this.debugMode;
     modalRef.result.then(
       (result) => {
-        console.log('Closing, saving form',  result);
         //add this to the list of organization
         result.id = uuidV4();
         this.addAttachment(result);
@@ -349,7 +340,6 @@ export class MedicalRecordWizardComponent implements OnInit {
         }
       },
       (err) => {
-        console.log('Closed without saving', err);
       },
     );
   }
@@ -358,10 +348,8 @@ export class MedicalRecordWizardComponent implements OnInit {
 
 
   onSubmit() {
-    console.log(this.form.getRawValue())
     this.form.markAllAsTouched()
     if (this.form.valid) {
-      console.log('form submitted');
       this.submitWizardLoading = true;
 
       let resourceStorage = GenerateR4ResourceLookup(this.form.getRawValue());
@@ -413,12 +401,10 @@ export class MedicalRecordWizardComponent implements OnInit {
 
       this.fastenApi.createRelatedResourcesFastenSource(fhirListResource).subscribe(
         (resp) => {
-          console.log(resp)
           this.submitWizardLoading = false;
           this.activeModal.close()
         },
         (err) => {
-          console.log(err)
           this.submitWizardLoading = false;
         }
       )

frontend/src/app/components/medical-sources-connected/medical-sources-connected.component.spec.ts

@@ -5,6 +5,7 @@ import {HTTP_CLIENT_TOKEN} from '../../dependency-injection';
 import {HttpClient} from '@angular/common/http';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {RouterTestingModule} from '@angular/router/testing';
+import { LoadingSpinnerComponent } from '../loading-spinner/loading-spinner.component';
 
 describe('MedicalSourcesConnectedComponent', () => {
   let component: MedicalSourcesConnectedComponent;
@@ -13,7 +14,7 @@ describe('MedicalSourcesConnectedComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ MedicalSourcesConnectedComponent ],
-      imports: [HttpClientTestingModule, RouterTestingModule],
+      imports: [HttpClientTestingModule, RouterTestingModule, LoadingSpinnerComponent],
       providers: [
         {
           provide: HTTP_CLIENT_TOKEN,

frontend/src/app/components/medical-sources-filter/medical-sources-category-lookup.pipe.ts

@@ -11,7 +11,6 @@ export class MedicalSourcesCategoryLookupPipe implements PipeTransform {
     }
     let lookupDescription = SOURCE_CATEGORY_CODE_LOOKUP[categoryCode];
     if (!lookupDescription){
-      console.log("COULD NOT FIND CATEGORY CODE", categoryCode, "IN LOOKUP")
       return categoryCode;
     } else {
       return lookupDescription;

frontend/src/app/components/medical-sources-filter/medical-sources-filter.component.ts

@@ -23,11 +23,9 @@ export class MedicalSourcesFilterComponent implements OnInit {
   }
 
   categorySelected(category: string){
-    console.log("SELECTED CATEGORY", category)
     this.filterService.filterForm.patchValue({'categories': {[category]: true}})
   }
   platformTypeSelected(platformType: string){
-    console.log("SELECTED PLATFORMTYPE", platformType)
     this.filterService.filterForm.patchValue({'platformTypes': {[platformType]: true}})
   }
 

frontend/src/app/components/nlm-typeahead/nlm-typeahead.component.ts

@@ -180,8 +180,6 @@ export class NlmTypeaheadComponent implements ControlValueAccessor {
       tap(() => { this.searching = true }),
       switchMap((term): ObservableInput<any> => {
 
-        console.log("searching for", term)
-
         //must use bind
         return searchOpFn(term).pipe(
           tap(() => {this.searchFailed = false}),
@@ -197,7 +195,7 @@ export class NlmTypeaheadComponent implements ControlValueAccessor {
 
   typeAheadChangeEvent(event){
     this.markAsTouched()
-    console.log("bubbling modelChange event", event)
+
     if(typeof event === 'string'){
       if(this.idResult){
         this.onChange(null);

frontend/src/app/components/report-header/report-header.component.spec.ts

@@ -2,8 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ReportHeaderComponent } from './report-header.component';
 import {FastenApiService} from '../../services/fasten-api.service';
-import {NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
 import {of} from 'rxjs';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('ReportHeaderComponent', () => {
   let component: ReportHeaderComponent;
@@ -14,6 +14,7 @@ describe('ReportHeaderComponent', () => {
     mockedFastenApiService = jasmine.createSpyObj('FastenApiService', ['getResources'])
 
     await TestBed.configureTestingModule({
+      imports: [ RouterTestingModule ],
       declarations: [ ReportHeaderComponent ],
       providers: [{
         provide: FastenApiService,

frontend/src/app/components/report-header/report-header.component.ts

@@ -21,17 +21,14 @@ export class ReportHeaderComponent implements OnInit {
 
   ngOnInit(): void {
     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()")
-      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 => {
             if (primaryResults.length > 0){
               this.primaryCare = new PractitionerModel(primaryResults[0].resource_raw)

frontend/src/app/components/report-medical-history-condition/report-medical-history-condition.component.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ReportMedicalHistoryConditionComponent } from './report-medical-history-condition.component';
 import {PipesModule} from '../../pipes/pipes.module';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('ReportMedicalHistoryConditionComponent', () => {
   let component: ReportMedicalHistoryConditionComponent;
@@ -10,7 +11,7 @@ describe('ReportMedicalHistoryConditionComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ ReportMedicalHistoryConditionComponent ],
-      imports: [PipesModule]
+      imports: [PipesModule, RouterTestingModule]
     })
     .compileComponents();
 

frontend/src/app/components/report-medical-history-condition/report-medical-history-condition.component.ts

@@ -139,7 +139,6 @@ export class ReportMedicalHistoryConditionComponent implements OnInit {
 
     }
 
-    console.log("GENERATED INVOLVED IN CARE MAP", involvedInCareMap)
     for(let resourceId in involvedInCareMap){
       this.involvedInCare.push(involvedInCareMap[resourceId])
     }

frontend/src/app/components/report-medical-history-editor/report-medical-history-editor.component.spec.ts

@@ -4,6 +4,8 @@ import { ReportMedicalHistoryEditorComponent } from './report-medical-history-ed
 import {NgbActiveModal, NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
 import {FastenApiService} from '../../services/fasten-api.service';
 import {HttpClient} from '@angular/common/http';
+import { TreeModule } from '@circlon/angular-tree-component';
+import { FormsModule } from '@angular/forms';
 
 describe('ReportMedicalHistoryEditorComponent', () => {
   let component: ReportMedicalHistoryEditorComponent;
@@ -12,7 +14,7 @@ describe('ReportMedicalHistoryEditorComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ ReportMedicalHistoryEditorComponent ],
-      imports: [],
+      imports: [ TreeModule, FormsModule ],
       providers: [NgbActiveModal, {
         provide: FastenApiService,
         useValue: jasmine.createSpyObj('FastenApiService', ['createResourceComposition'])

frontend/src/app/components/report-medical-history-editor/report-medical-history-editor.component.ts

@@ -65,7 +65,6 @@ export class ReportMedicalHistoryEditorComponent implements OnInit {
   ) { }
 
   ngOnInit(): void {
-    console.log("ngOnInit STATUS", this.conditions)
     this.nodes = this.generateNodes(this.conditions)
   }
 
@@ -81,7 +80,6 @@ export class ReportMedicalHistoryEditorComponent implements OnInit {
       //delete this key (unselected)
       delete this.selectedResources[key]
     }
-    console.log("selected resources", this.selectedResources)
   }
 
   onMergeResourcesClick() {
@@ -91,8 +89,7 @@ export class ReportMedicalHistoryEditorComponent implements OnInit {
       resources.push(this.selectedResources[key])
     }
 
-    this.fastenApi.createResourceComposition(this.compositionTitle, resources).subscribe(results => {
+    this.fastenApi.createResourceComposition(this.compositionTitle, resources).subscribe((results) => {
-      console.log(results)
       this.activeModal.close()
     },(err) => {})
   }
@@ -112,7 +109,6 @@ export class ReportMedicalHistoryEditorComponent implements OnInit {
       }
     }
 
-    console.log("NODES:", relatedNodes)
     return relatedNodes
   }
 

frontend/src/app/components/report-medical-history-explanation-of-benefit/report-medical-history-explanation-of-benefit.component.spec.ts

@@ -1,6 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ReportMedicalHistoryExplanationOfBenefitComponent } from './report-medical-history-explanation-of-benefit.component';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('ReportMedicalHistoryExplanationOfBenefitComponent', () => {
   let component: ReportMedicalHistoryExplanationOfBenefitComponent;
@@ -8,7 +9,8 @@ describe('ReportMedicalHistoryExplanationOfBenefitComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ReportMedicalHistoryExplanationOfBenefitComponent ]
+      declarations: [ ReportMedicalHistoryExplanationOfBenefitComponent ],
+      imports: [ RouterTestingModule ]
     })
     .compileComponents();
 

frontend/src/app/components/report-medical-history-explanation-of-benefit/report-medical-history-explanation-of-benefit.component.ts

@@ -57,7 +57,6 @@ export class ReportMedicalHistoryExplanationOfBenefitComponent implements OnInit
     this.eobDisplayModel = result.displayModel
 
 
-    console.log("Resources Lookup", this.resourcesLookup)
 
     let involvedInCareMap: {[resource_id: string]: {displayName: string, role?: string, email?: string}} = {}
 
@@ -86,7 +85,6 @@ export class ReportMedicalHistoryExplanationOfBenefitComponent implements OnInit
       this.procedures.push(procedureModel)
     })
 
-    console.log("CONDITION", this.condition)
 
     // this.medications = this.eobDisplayModel.prescription
 
@@ -157,7 +155,6 @@ export class ReportMedicalHistoryExplanationOfBenefitComponent implements OnInit
 
     }
 
-    console.log("GENERATED INVOLVED IN CARE MAP", involvedInCareMap)
     for(let resourceId in involvedInCareMap){
       this.involvedInCare.push(involvedInCareMap[resourceId])
     }

frontend/src/app/components/report-medical-history-timeline-panel/report-medical-history-timeline-panel.component.spec.ts

@@ -2,6 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ReportMedicalHistoryTimelinePanelComponent } from './report-medical-history-timeline-panel.component';
 import {MomentModule} from 'ngx-moment';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 
 describe('ReportMedicalHistoryTimelinePanelComponent', () => {
   let component: ReportMedicalHistoryTimelinePanelComponent;
@@ -9,8 +11,8 @@ describe('ReportMedicalHistoryTimelinePanelComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ MomentModule ],
+      imports: [ MomentModule, RouterTestingModule, NgbDropdownModule ],
-      declarations: [ ReportMedicalHistoryTimelinePanelComponent ]
+      declarations: [ ReportMedicalHistoryTimelinePanelComponent ],
     })
     .compileComponents();
 

frontend/src/app/components/report-medical-history-timeline-panel/report-medical-history-timeline-panel.component.ts

@@ -20,6 +20,9 @@ export class ReportMedicalHistoryTimelinePanelComponent implements OnInit {
   constructor(private modalService: NgbModal) { }
 
   ngOnInit(): void {
+    if (!this.resourceFhir) {
+      return;
+    }
 
     let parsed = RecResourceRelatedDisplayModel(this.resourceFhir)
     this.displayModel = parsed.displayModel as EncounterModel

frontend/src/app/icon-module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';
+
+// Taken from https://stackoverflow.com/questions/55328832/testing-components-with-font-awesome-icons-module
+@NgModule({
+  imports: [ FontAwesomeModule ],
+  exports: [ FontAwesomeModule ]
+})
+export class IconsModule {
+  constructor(library: FaIconLibrary) {
+    library.addIconPacks(fas, far);
+  }
+}

frontend/src/app/pages/auth-signin/auth-signin.component.ts

@@ -90,8 +90,6 @@ export class AuthSigninComponent implements OnInit {
   }
 
   idpConnectHello($event){
-
+    this.authService.IdpConnect('hello').catch(console.error)
-    this.authService.IdpConnect('hello')
-      .then(console.log)
   }
 }

frontend/src/app/pages/auth-signup-wizard/auth-signup-wizard.component.ts

@@ -126,10 +126,8 @@ export class AuthSignupWizardComponent implements OnInit {
     this.loading = true
     this.submitted = true;
 
-    console.log("starting signup process...",this.newUser)
     this.authService.Signup(this.newUser).then((tokenResp: any) => {
         this.loading = false
-        console.log(tokenResp);
         this.router.navigateByUrl('/dashboard');
       },
       (err)=>{

frontend/src/app/pages/auth-signup/auth-signup.component.ts

@@ -32,7 +32,6 @@ export class AuthSignupComponent implements OnInit {
 
     this.authService.Signup(this.newUser).then((tokenResp: any) => {
         this.loading = false
-        console.log(tokenResp);
         this.router.navigateByUrl('/dashboard');
       },
       (err)=>{

frontend/src/app/pages/background-jobs/background-jobs.component.ts

@@ -25,7 +25,6 @@ export class BackgroundJobsComponent implements OnInit, OnDestroy {
         mergeMap(() => this.fastenApi.getBackgroundJobs())
       )
       .subscribe((jobs) => {
-        console.log("Background jobs updated")
         this.backgroundJobs = jobs
       })
   }

frontend/src/app/pages/dashboard/dashboard.component.spec.ts

@@ -6,6 +6,7 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {RouterModule} from '@angular/router';
 import {HTTP_CLIENT_TOKEN} from '../../dependency-injection';
 import {HttpClient} from '@angular/common/http';
+import { GridstackComponent } from 'src/app/components/gridstack/gridstack.component';
 
 describe('DashboardComponent', () => {
   let component: DashboardComponent;
@@ -13,7 +14,7 @@ describe('DashboardComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, RouterTestingModule, RouterModule],
+      imports: [HttpClientTestingModule, RouterTestingModule, RouterModule, GridstackComponent],
       declarations: [ DashboardComponent ],
       providers: [
         {

frontend/src/app/pages/dashboard/dashboard.component.ts

@@ -59,7 +59,6 @@ export class DashboardComponent implements OnInit {
 
 
       //setup dashboard configs
-      console.log("DASHBOARDS!", this.dashboardConfigs)
       this.changeSelectedDashboard(0)
 
     }, error => {
@@ -115,7 +114,6 @@ export class DashboardComponent implements OnInit {
     this.gridComp?.grid?.removeAll() //clear the grid
 
     this.dashboardConfigs?.[this.selectedDashboardConfigNdx]?.widgets?.forEach((widgetConfig) => {
-      console.log("Adding Widgets to Dashboard Grid")
 
       this.gridComp?.grid?.addWidget({
         x: widgetConfig.x,
@@ -131,7 +129,6 @@ export class DashboardComponent implements OnInit {
 
   public toggleEditableGrid() {
     this.gridEditDisabled = !this.gridEditDisabled;
-    console.log('toggle - is disabled', this.gridEditDisabled)
 
     this.gridEditDisabled ? this.gridComp.grid?.disable(true) : this.gridComp.grid?.enable(true);
 
@@ -141,7 +138,6 @@ export class DashboardComponent implements OnInit {
     this.addDashboardLoading = true
     this.dashboardLocationError = ''
     this.fastenApi.addDashboardLocation(this.dashboardLocation).subscribe((result) => {
-      console.log("Added Remote Dashboard", result)
       this.addDashboardLoading = false
 
       this.modalService.dismissAll()
@@ -149,37 +145,21 @@ export class DashboardComponent implements OnInit {
       //reload the page
       window.location.reload()
     }, (error) => {
-      console.log("Error Adding Remote Dashboard", error)
       this.addDashboardLoading = false
       this.dashboardLocationError = error
 
       },
     () => {
-      console.log("Completed Adding Remote Dashboard")
       this.addDashboardLoading = false
     })
   }
 
   public showAddDashboardLocationModal(content) {
     this.dashboardLocation = ''
-    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.catch(console.error);
-      (result) => {
-        console.log(`Closed with: ${result}`)
-      },
-      (reason) => {
-        console.log(`Dismissed ${reason}`)
-      },
-    );
   }
   public showDashboardSettingsModal(content) {
-    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then(
+    this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.catch(console.error);
-      (result) => {
-        console.log(`Closed with: ${result}`)
-      },
-      (reason) => {
-        console.log(`Dismissed ${reason}`)
-      },
-    );
   }
 
 }

frontend/src/app/pages/desktop-callback/desktop-callback.component.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { DesktopCallbackComponent } from './desktop-callback.component';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {RouterTestingModule} from '@angular/router/testing';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { LoadingSpinnerComponent } from 'src/app/components/loading-spinner/loading-spinner.component';
 
 describe('DesktopCallbackComponent', () => {
   let component: DesktopCallbackComponent;
@@ -11,7 +11,7 @@ describe('DesktopCallbackComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, RouterTestingModule],
+      imports: [HttpClientTestingModule, RouterTestingModule, LoadingSpinnerComponent],
       declarations: [ DesktopCallbackComponent ]
     })
     .compileComponents();

frontend/src/app/pages/explore/explore.component.spec.ts

@@ -4,6 +4,9 @@ import { ExploreComponent } from './explore.component';
 import {HTTP_CLIENT_TOKEN} from '../../dependency-injection';
 import {HttpClient} from '@angular/common/http';
 import {HttpClientTestingModule} from '@angular/common/http/testing';
+import { ReportHeaderComponent } from 'src/app/components/report-header/report-header.component';
+import { LoadingSpinnerComponent } from 'src/app/components/loading-spinner/loading-spinner.component';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('ExploreComponent', () => {
   let component: ExploreComponent;
@@ -11,8 +14,8 @@ describe('ExploreComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ExploreComponent ],
+      declarations: [ ExploreComponent, ReportHeaderComponent ],
-      imports: [HttpClientTestingModule],
+      imports: [HttpClientTestingModule, LoadingSpinnerComponent, RouterTestingModule],
       providers: [
         {
           provide: HTTP_CLIENT_TOKEN,

frontend/src/app/pages/medical-history/medical-history.component.spec.ts

@@ -2,9 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { MedicalHistoryComponent } from './medical-history.component';
 import {FastenApiService} from '../../services/fasten-api.service';
-import {HttpClient} from '@angular/common/http';
+import {NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
-import {NgbModal, NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
 import {of} from 'rxjs';
+import { ReportHeaderComponent } from 'src/app/components/report-header/report-header.component';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('MedicalHistoryComponent', () => {
   let component: MedicalHistoryComponent;
@@ -15,7 +16,8 @@ describe('MedicalHistoryComponent', () => {
 
     mockedFastenApiService = jasmine.createSpyObj('FastenApiService', ['getResources', 'getResourceGraph'])
     await TestBed.configureTestingModule({
-      declarations: [ MedicalHistoryComponent ],
+      declarations: [ MedicalHistoryComponent, ReportHeaderComponent ],
+      imports: [ RouterTestingModule ],
       providers: [{
         provide: FastenApiService,
         useValue: mockedFastenApiService

frontend/src/app/pages/medical-history/medical-history.component.ts

@@ -67,7 +67,6 @@ export class MedicalHistoryComponent implements OnInit {
     this.fastenApi.getResourceGraph(null, encounterIds).subscribe((graphResponse: ResourceGraphResponse) => {
         this.loading = false
 
-        console.log("FLATTENED RESOURCES RESPONSE", graphResponse)
         this.encounters = graphResponse.results["Encounter"] || []
 
       },

frontend/src/app/pages/medical-sources/medical-sources.component.spec.ts

@@ -5,7 +5,11 @@ import {HttpClientTestingModule} from '@angular/common/http/testing';
 import {RouterTestingModule} from '@angular/router/testing';
 import {HTTP_CLIENT_TOKEN} from '../../dependency-injection';
 import {HttpClient} from '@angular/common/http';
-import {FormBuilder, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import { LoadingSpinnerComponent } from 'src/app/components/loading-spinner/loading-spinner.component';
+import { MedicalSourcesFilterComponent } from 'src/app/components/medical-sources-filter/medical-sources-filter.component';
+import { MedicalSourcesConnectedComponent } from 'src/app/components/medical-sources-connected/medical-sources-connected.component';
+import { NgxDropzoneModule } from 'ngx-dropzone';
 
 describe('MedicalSourcesComponent', () => {
   let component: MedicalSourcesComponent;
@@ -13,8 +17,8 @@ describe('MedicalSourcesComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ MedicalSourcesComponent ],
+      declarations: [ MedicalSourcesComponent, MedicalSourcesFilterComponent, MedicalSourcesConnectedComponent ],
-      imports: [HttpClientTestingModule, RouterTestingModule, FormsModule, ReactiveFormsModule],
+      imports: [HttpClientTestingModule, RouterTestingModule, FormsModule, ReactiveFormsModule, LoadingSpinnerComponent, NgxDropzoneModule],
       providers: [
         {
           provide: HTTP_CLIENT_TOKEN,

frontend/src/app/pages/medical-sources/medical-sources.component.ts

@@ -89,17 +89,13 @@ export class MedicalSourcesComponent implements OnInit {
   ) {
     this.filterService.filterChanges.subscribe((filterInfo) => {
 
-      console.log("medical-sources - filterChanges", filterInfo)
-
       //this function should only trigger when there's a change to the filter values -- which requires a new query
       this.availableLighthouseBrandList = []
       this.resultLimits.totalItems = 0
       this.resultLimits.scrollComplete = false
 
       //update the form with data from route (don't emit a new patch event), then submit query
-      this.querySources(filterInfo?.filter).subscribe(null, null, () => {
+      this.querySources(filterInfo?.filter).subscribe(null, null, () => {})
-        console.log("querySources() complete")
-      })
     })
   }
 
@@ -133,7 +129,6 @@ export class MedicalSourcesComponent implements OnInit {
         distinctUntilChanged(),
       )
       .subscribe(value => {
-        console.log("search term changed:", value)
         let currentQuery = this.filterService.filterForm.value.query || ""
         if(value != null && currentQuery != value){
           this.filterService.filterForm.patchValue({query: value})
@@ -143,9 +138,7 @@ export class MedicalSourcesComponent implements OnInit {
   }
 
   private querySources(filter?: MedicalSourcesFilter): Observable<LighthouseSourceSearch> {
-    console.log("querySources()", filter)
     if(this.loading){
-      console.log("already loading, ignoring querySources()")
       return of(null)
     }
     //TODO: pass filter to function.
@@ -153,7 +146,6 @@ export class MedicalSourcesComponent implements OnInit {
 
     if(!filter){
       filter = this.filterService.toMedicalSourcesFilter(this.filterForm.value)
-      console.log("querySources() - no filter provided, using current form value", filter)
     }
 
 
@@ -161,7 +153,6 @@ export class MedicalSourcesComponent implements OnInit {
     this.loading = true
     var searchObservable = this.lighthouseApi.searchLighthouseSources(filter);
     searchObservable.subscribe(wrapper => {
-      console.log("search sources", wrapper);
       // this.searchResults = wrapper.hits.hits;
       this.resultLimits.totalItems = wrapper.hits.total.value;
 
@@ -174,11 +165,9 @@ export class MedicalSourcesComponent implements OnInit {
 
       //check if scroll is complete.
       if(!wrapper?.hits || !wrapper?.hits?.hits || wrapper?.hits?.hits?.length == 0 || wrapper?.hits?.total?.value == wrapper?.hits?.hits?.length){
-        console.log("SCROLL_COMPLETE!@@@@@@@@")
         this.resultLimits.scrollComplete = true;
       } else {
         //change the current Page (but don't cause a new query)
-        console.log("SETTING NEXT SORT KEY:", wrapper.hits.hits[wrapper.hits.hits.length - 1].sort.join(','))
         this.filterService.filterForm.patchValue({searchAfter: wrapper.hits.hits[wrapper.hits.hits.length - 1].sort.join(",")}, {emitEvent: false})
       }
 
@@ -229,7 +218,6 @@ export class MedicalSourcesComponent implements OnInit {
       },
       () => {
         this.loading = false
-        console.log("sources finished")
       }
     );
     return searchObservable;
@@ -297,10 +285,8 @@ export class MedicalSourcesComponent implements OnInit {
         sourceMetadata.brand_id = brandId
         sourceMetadata.portal_id = portalId
 
-        console.log(sourceMetadata);
         let authorizationUrl = await this.lighthouseApi.generateSourceAuthorizeUrl(sourceMetadata)
 
-        console.log('authorize url:', authorizationUrl.toString());
         // redirect to lighthouse with uri's (or open a new window in desktop mode)
         this.lighthouseApi.redirectWithOriginAndDestination(authorizationUrl.toString(), sourceMetadata).subscribe((desktopRedirectData) => {
           if(!desktopRedirectData){
@@ -335,10 +321,8 @@ export class MedicalSourcesComponent implements OnInit {
       let shouldConvert = await this.showCcdaWarningModal()
       if(shouldConvert){
         let convertedFile = await this.platformApi.convertCcdaToFhir(processingFile).toPromise()
-        console.log("converted file: ", convertedFile.name)
         processingFile = convertedFile
       } else {
-        console.log("removing file from list")
         this.uploadedFile = []
         return
       }
@@ -348,7 +332,6 @@ export class MedicalSourcesComponent implements OnInit {
     //TODO: handle manual bundles.
     this.fastenApi.createManualSource(processingFile).subscribe(
       (respData) => {
-        console.log("source manual source create response:", respData)
       },
       (err) => {console.log(err)},
       () => {
@@ -359,7 +342,6 @@ export class MedicalSourcesComponent implements OnInit {
 
   showCcdaWarningModal(): Promise<boolean> {
 
-    console.log("SHOWING CCDA Warning MODAL")
 
     return this.modalService.open(this.ccdaWarningModalRef).result.then<boolean>(
       (result) => {

frontend/src/app/pages/patient-profile/patient-profile.component.spec.ts

@@ -2,9 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { PatientProfileComponent } from './patient-profile.component';
 import {FastenApiService} from '../../services/fasten-api.service';
-import {NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
 import {of} from 'rxjs';
 import {PipesModule} from '../../pipes/pipes.module';
+import { ReportHeaderComponent } from 'src/app/components/report-header/report-header.component';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('PatientProfileComponent', () => {
   let component: PatientProfileComponent;
@@ -14,8 +15,8 @@ describe('PatientProfileComponent', () => {
   beforeEach(async () => {
     mockedFastenApiService = jasmine.createSpyObj('FastenApiService', ['getResources'])
     await TestBed.configureTestingModule({
-      declarations: [ PatientProfileComponent ],
+      declarations: [ PatientProfileComponent, ReportHeaderComponent ],
-      imports: [PipesModule],
+      imports: [PipesModule, RouterTestingModule],
       providers: [{
         provide: FastenApiService,
         useValue: mockedFastenApiService

frontend/src/app/pages/patient-profile/patient-profile.component.ts

@@ -35,7 +35,6 @@ export class PatientProfileComponent implements OnInit {
       this.fastenApi.getResources("AllergyIntolerance")
     ]).subscribe(results => {
       this.loading['page'] = false
-      console.log(results)
       this.patient = results[0][0]
       this.immunizations = results[1].map((immunization) => {
         return fhirModelFactory(immunization.source_resource_type as ResourceType, immunization) as ImmunizationModel
@@ -52,7 +51,6 @@ export class PatientProfileComponent implements OnInit {
     this.loading['delete'] = true
     this.fastenApi.deleteAccount().subscribe(result => {
       this.loading['delete'] = false
-      console.log(result)
     }, error => {
       this.loading['delete'] = false
       console.log(error)

frontend/src/app/pages/report-labs/report-labs.component.spec.ts

@@ -2,9 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ReportLabsComponent } from './report-labs.component';
 import {FastenApiService} from '../../services/fasten-api.service';
-import {NgbModalModule} from '@ng-bootstrap/ng-bootstrap';
 import {of} from 'rxjs';
 import {RouterTestingModule} from '@angular/router/testing';
+import { ReportHeaderComponent } from 'src/app/components/report-header/report-header.component';
+import { LoadingSpinnerComponent } from 'src/app/components/loading-spinner/loading-spinner.component';
 
 describe('ReportLabsComponent', () => {
   let component: ReportLabsComponent;
@@ -15,8 +16,8 @@ describe('ReportLabsComponent', () => {
 
     mockedFastenApiService = jasmine.createSpyObj('FastenApiService', ['getResources', 'queryResources'])
     await TestBed.configureTestingModule({
-      declarations: [ ReportLabsComponent ],
+      declarations: [ ReportLabsComponent, ReportHeaderComponent ],
-      imports: [RouterTestingModule],
+      imports: [RouterTestingModule, LoadingSpinnerComponent, RouterTestingModule],
       providers: [{
         provide: FastenApiService,
         useValue: mockedFastenApiService

frontend/src/app/pages/report-labs/report-labs.component.ts

@@ -67,13 +67,10 @@ export class ReportLabsComponent implements OnInit {
       this.reportSourceId = routeParams['source_id']
       this.reportResourceType = routeParams['resource_type']
       this.reportResourceId = routeParams['resource_id']
-      console.log("Selected Report changed!", this.reportSourceId,this.reportResourceType, this.reportResourceId)
 
       if(this.reportSourceId && this.reportResourceType && this.reportResourceId){
         //we're requesting a single report
-        console.log("REQUSTING REPORT", this.reportSourceId, this.reportResourceType, this.reportResourceId)
         this.findLabResultCodesFilteredToReport(this.reportSourceId, this.reportResourceType, this.reportResourceId).subscribe((data) => {
-          console.log("REPORT result codes", data)
           this.allObservationGroups = data
           this.currentPage = 1 //reset to first page when changing report
           return this.populateObservationsForCurrentPage()
@@ -81,7 +78,6 @@ export class ReportLabsComponent implements OnInit {
       } else {
         this.findLabResultCodesSortedByLatest().subscribe((data) => {
           // this.loading = false
-          console.log("ALL lab result codes", data)
           this.allObservationGroups = data.map((item) => item.label)
           return this.populateObservationsForCurrentPage()
         })
@@ -95,7 +91,6 @@ export class ReportLabsComponent implements OnInit {
 
     let observationGroups = this.allObservationGroups.slice((this.currentPage-1) * this.pageSize, this.currentPage * this.pageSize)
 
-    console.log("FILTERED OBSERVATION GROUPS", observationGroups, (this.currentPage -1) * this.pageSize, this.currentPage * this.pageSize)
     this.loading = true
     this.getObservationsByCodes(observationGroups).subscribe((data) => {
       this.loading = false
@@ -116,7 +111,6 @@ export class ReportLabsComponent implements OnInit {
       .pipe(
         mergeMap((diagnosticReports) => {
           let diagnosticReport = diagnosticReports?.[0]
-          console.log("diagnosticReport", diagnosticReport)
           this.reportDisplayModel = fhirModelFactory(diagnosticReport.source_resource_type as ResourceType, diagnosticReport)
 
 
@@ -142,7 +136,6 @@ export class ReportLabsComponent implements OnInit {
               allObservationGroups.push('http://loinc.org|' + observationGroup)
             }
           }
-          console.log("FOUND REPORT LAB CODES", allObservationGroups)
           return allObservationGroups
         })
       )

frontend/src/app/pages/resource-detail/resource-detail.component.spec.ts

@@ -6,6 +6,7 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {ActivatedRoute, convertToParamMap} from '@angular/router';
 import {HTTP_CLIENT_TOKEN} from '../../dependency-injection';
 import {HttpClient} from '@angular/common/http';
+import { LoadingSpinnerComponent } from 'src/app/components/loading-spinner/loading-spinner.component';
 
 describe('ResourceDetailComponent', () => {
   let component: ResourceDetailComponent;
@@ -14,7 +15,7 @@ describe('ResourceDetailComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [ ResourceDetailComponent ],
-      imports: [HttpClientTestingModule, RouterTestingModule],
+      imports: [HttpClientTestingModule, RouterTestingModule, LoadingSpinnerComponent],
       providers: [
         {
           provide: ActivatedRoute,

frontend/src/app/pages/resource-detail/resource-detail.component.ts

@@ -28,7 +28,6 @@ export class ResourceDetailComponent implements OnInit {
     this.loading = true
     this.fastenApi.getResourceBySourceId(this.route.snapshot.paramMap.get('source_id'), this.route.snapshot.paramMap.get('resource_id')).subscribe((resourceFhir) => {
       this.loading = false
-      console.log("RESOURECE FHIR", resourceFhir)
       this.resource = resourceFhir;
       this.sourceId = this.route.snapshot.paramMap.get('source_id')
       this.sourceName = "unknown" //TODO popualte this
@@ -36,9 +35,7 @@ export class ResourceDetailComponent implements OnInit {
       try{
         let parsed = fhirModelFactory(resourceFhir.source_resource_type as ResourceType, resourceFhir)
         this.displayModel = parsed
-        console.log("Successfully parsed model", parsed)
       } catch (e) {
-        console.log("FAILED TO PARSE", resourceFhir)
         console.error(e)
       }
     }, error => {

frontend/src/app/pages/source-detail/source-detail.component.spec.ts

@@ -6,6 +6,7 @@ import {RouterTestingModule} from '@angular/router/testing';
 import {ActivatedRoute, convertToParamMap, RouterModule} from '@angular/router';
 import {HTTP_CLIENT_TOKEN} from '../../dependency-injection';
 import {HttpClient} from '@angular/common/http';
+import { FhirDatatableModule } from 'src/app/components/fhir-datatable/fhir-datatable.module';
 
 describe('SourceDetailComponent', () => {
   let component: SourceDetailComponent;
@@ -13,7 +14,7 @@ describe('SourceDetailComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [HttpClientTestingModule, RouterTestingModule, RouterModule],
+      imports: [HttpClientTestingModule, RouterTestingModule, RouterModule, FhirDatatableModule],
       declarations: [ SourceDetailComponent ],
       providers: [
         {

frontend/src/app/pipes/dataset-latest-entry.pipe.ts

@@ -18,7 +18,6 @@ export class DatasetLatestEntryPipe implements PipeTransform {
       }
       let lastItem = dataset?.data?.[dataset?.data?.length - 1] || ''
       // let valueKey = this.chartOptions?.parsing?.['yAxisKey'] || dataset?.parsing?.['key']
-      console.log('latestEntryConfig', lastItem, valLookupKey, unitLookupKey, round)
       let lastItemUnit = ""
       let lastItemValue
 
@@ -26,7 +25,6 @@ export class DatasetLatestEntryPipe implements PipeTransform {
         lastItemValue = _.flatten(lastItem?.[0]?.[valLookupKey])?.[0] as string
         lastItemUnit = _.flatten(lastItem?.[0]?.[unitLookupKey])?.[0] as string
       } else if (typeof lastItem === 'object') {
-        console.log('lastItem-object', lastItem?.[valLookupKey])
         lastItemValue = lastItem?.[valLookupKey]
         lastItemUnit = lastItem?.[unitLookupKey]
       } else {

frontend/src/app/services/event-bus.service.ts

@@ -35,11 +35,8 @@ export class EventBusService {
     // Ideally we want consistently listen to events, but only when the user is authenticated.
     //TODO: find a way to abort the event bus connection.
     this.authService.IsAuthenticatedSubject.subscribe((isAuthenticated) => {
-      console.log("isAuthenticated changed:", isAuthenticated)
       if(isAuthenticated){
-        console.log("Started listening to event bus")
         this.eventBusSubscription = this.listenEventBus().subscribe((event: Event | EventSourceSync | EventSourceComplete)=>{
-          console.log("eventbus event:", event)
           //TODO: start toasts.
           if(event.event_type == "source_sync"){
             this.SourceSyncMessages.next(event as EventSourceSync)
@@ -49,7 +46,6 @@ export class EventBusService {
         })
       } else {
         //no longer authenticated, unsubscribe from eventbus and abort/terminate connection
-        console.log("Stopped listening to event bus")
         this.abortEventBus()
       }
     });

frontend/src/app/services/fasten-api.service.ts

@@ -50,7 +50,6 @@ export class FastenApiService {
     return this._httpClient.get<any>(endpointUrl.toString())
       .pipe(
         map((response: ValueSet) => {
-          console.log("Glossary RESPONSE", response)
           return response
         })
       );
@@ -60,7 +59,6 @@ export class FastenApiService {
     return this._httpClient.get<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/health`)
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("Health RESPONSE", response)
           return response.data
         })
       );
@@ -75,7 +73,6 @@ export class FastenApiService {
     return this._httpClient.delete<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/account/me`)
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("DELETE ACCOUNT RESPONSE", response)
           if(response.success) {
             this.authService.Logout().then(() => {
               this.router.navigateByUrl('/auth/signup')
@@ -101,7 +98,6 @@ export class FastenApiService {
     return this._httpClient.get<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/summary`, )
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("Summary RESPONSE", response)
           return response.data as Summary
         })
       );
@@ -111,7 +107,6 @@ export class FastenApiService {
     return this._httpClient.post<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/source`, source)
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("SOURCE RESPONSE", response)
           // @ts-ignore
           return {summary: response.data, source: response.source}
         })
@@ -126,7 +121,6 @@ export class FastenApiService {
     return this._httpClient.post<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/source/manual`, formData)
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("MANUAL SOURCE RESPONSE", response)
           return response.data as Source
         })
       );
@@ -134,7 +128,6 @@ export class FastenApiService {
 
   createRelatedResourcesFastenSource(resourceList: List): Observable<Source> {
 
-    console.log(resourceList)
     let bundleBlob = new Blob([JSON.stringify(resourceList)], { type: 'application/json' });
     let bundleFile = new File([ bundleBlob ], 'related.json', { type: 'application/json' });
 
@@ -144,7 +137,6 @@ export class FastenApiService {
     return this._httpClient.post<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/resource/related`, formData)
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("RELATED RESOURCES RESPONSE", response)
           return response.data as Source
         })
       );
@@ -155,7 +147,6 @@ export class FastenApiService {
     return this._httpClient.get<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/source`)
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("SOURCE RESPONSE", response)
           return response.data as Source[]
         })
       );
@@ -165,7 +156,6 @@ export class FastenApiService {
     return this._httpClient.get<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/source/${sourceId}`)
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("SOURCE RESPONSE", response)
           return response.data as Source
         })
       );
@@ -175,7 +165,6 @@ export class FastenApiService {
     return this._httpClient.get<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/source/${sourceId}/summary`)
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("SOURCE RESPONSE", response)
           return response.data as SourceSummary
         })
       );
@@ -194,7 +183,6 @@ export class FastenApiService {
     return this._httpClient.post<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/source/${sourceId}/sync`, {})
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("SOURCE RESPONSE", response)
           return response.data
         })
       );
@@ -219,7 +207,6 @@ export class FastenApiService {
     return this._httpClient.get<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/resource/fhir`, {params: queryParams})
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("RESPONSE", response)
           return response.data as ResourceFhir[]
         })
       );
@@ -246,7 +233,6 @@ export class FastenApiService {
     return this._httpClient.post<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/resource/graph/${graphType}`, {resource_ids: selectedResourceIds})
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("RESPONSE", response)
           return response.data as ResourceGraphResponse
         })
       );
@@ -257,7 +243,6 @@ export class FastenApiService {
     return this._httpClient.get<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/resource/fhir/${sourceId}/${resourceId}`)
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("RESPONSE", response)
           return response.data as ResourceFhir
         })
       );
@@ -269,7 +254,6 @@ export class FastenApiService {
     })
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("RESPONSE", response)
           return response
         })
       );
@@ -284,7 +268,6 @@ export class FastenApiService {
     })
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("RESPONSE", response)
           return response.data
         })
       );
@@ -339,7 +322,6 @@ export class FastenApiService {
     return this._httpClient.get<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/jobs`, {params: queryParams})
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("RESPONSE", response)
           return response.data as BackgroundJob[]
         })
       );
@@ -350,7 +332,6 @@ export class FastenApiService {
     return this._httpClient.post<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/secure/jobs/error`, errorData)
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("RESPONSE", response)
           return response.data
         })
       );
@@ -361,7 +342,6 @@ export class FastenApiService {
     return this._httpClient.post<any>(`${GetEndpointAbsolutePath(globalThis.location, environment.fasten_api_endpoint_base)}/support/request`, request)
       .pipe(
         map((response: ResponseWrapper) => {
-          console.log("Support request response", response)
           // @ts-ignore
           return {}
         })

frontend/src/app/services/nlm-clinical-table-search.service.ts

@@ -58,7 +58,6 @@ export class NlmClinicalTableSearchService {
       `${this.nlm_clinical_table_search_endpoint}/conditions/v3/search`, {params: queryParams}
     ).pipe(
         map((response) => {
-          console.log("RESPONSE", response)
           let results =  response[3].map((item: any):NlmSearchResults => {
             return {
               id: item[0],

frontend/src/app/services/platform.service.ts

@@ -26,7 +26,6 @@ export class PlatformService {
     return this._httpClient.post<string>(endpointUrl.toString(), ccdaFile, { headers: {'Content-Type': 'application/cda+xml'} })
       .pipe(
         map((responseJson: string) => {
-          console.log("Converter RESPONSE", responseJson)
           return new File([JSON.stringify(responseJson)], ccdaFile.name + ".converted.json", {type: "application/json", lastModified: ccdaFile.lastModified || Date.now()})
         })
       );

frontend/src/app/widgets/dashboard-widget/dashboard-widget.component.ts

@@ -70,9 +70,6 @@ export class DashboardWidgetComponent implements OnInit, DashboardWidgetComponen
       this.chartProcessQueryResults.bind(currentThis),
       (error) => {
         this.loading = false
-      },
-      () => {
-        console.log("complete")
       })
   }
 
@@ -84,7 +81,6 @@ export class DashboardWidgetComponent implements OnInit, DashboardWidgetComponen
 
       for (let queryNdx in queryResults) {
         let queryResult = queryResults[queryNdx]
-        console.log(`QUERY RESULTS FOR ${this.widgetConfig.title_text}`, queryResult)
         this.chartLabels = []
         // console.log(`CHART LABELS BEFORE ${this.widgetConfig.title_text}`, this.chartLabels)
         for(let result of queryResult){
@@ -97,8 +93,6 @@ export class DashboardWidgetComponent implements OnInit, DashboardWidgetComponen
           // }
         }
 
-        console.log(`CHART LABELS FOR ${this.widgetConfig.title_text}`, this.chartLabels)
-
         this.chartDatasets.push(_.extend(
           this.chartDatasetsDefaults?.[queryNdx] || {},
           this.widgetConfig.queries?.[queryNdx]?.dataset_options || {},
@@ -115,10 +109,6 @@ export class DashboardWidgetComponent implements OnInit, DashboardWidgetComponen
       console.error("ERROR DURING PROCESSING")
       console.error(e)
     }
-
-
-
-    console.log(`Loading COmpleted for ${this.widgetConfig.title_text}, ${this.loading}`)
   }
 
 
@@ -127,9 +117,7 @@ export class DashboardWidgetComponent implements OnInit, DashboardWidgetComponen
   // fhirPathMapQueryFn will also assign aliases where appropriate.
   // `where` clause filtering is processed in the backend.
   processQueryResourcesSelectClause(query: DashboardWidgetQuery, response: ResponseWrapper): any[]{
-    console.log("RESPONSE", response)
     if(!response.data || !response.data.length){
-      console.log("NO QUERY DATA FOUND")
       return []
     }
     let results = response.data

frontend/src/app/widgets/patient-vitals-widget/patient-vitals-widget.component.ts

@@ -193,8 +193,6 @@ export class PatientVitalsWidgetComponent extends DashboardWidgetComponent imple
     for(let key in vitalSignCodeLookup){
       this.vitalSigns.push(vitalSignCodeLookup[key])
     }
-
-    console.log("PRINTING DETECTED PATIENT DATA", this.name, this.age, this.gender, vitalSignCodeLookup, this.vitalSigns)
   }
 
 

frontend/src/app/widgets/records-summary-widget/records-summary-widget.component.ts

@@ -206,9 +206,6 @@ export class RecordsSummaryWidgetComponent extends DashboardWidgetComponent impl
       },
       (error) => {
         this.loading = false
-      },
-      () => {
-        console.log('completed getting summary')
       })
   }
 }

frontend/src/app/widgets/simple-line-chart-widget/simple-line-chart-widget.stories.ts

@@ -95,4 +95,3 @@ export const Example: Story = {
     }
   }
 };
-

frontend/src/lib/models/resources/document-reference-model.ts

@@ -81,7 +81,6 @@ export class DocumentReferenceModel extends FastenDisplayModel {
   };
 
   contentDTO(fhirResource: any, fhirVersion: fhirVersions){
-    console.log('INSIDE CONTENTDTO', fhirResource)
     this.category = new CodableConceptModel(_.get(fhirResource, 'category[0]') || {});
     this.content = _.get(fhirResource, 'content', []).map((content: any) => {
       const attachment: Attachment = _.get(content, 'attachment');

frontend/yarn.lock

@@ -8461,6 +8461,13 @@ karma-source-map-support@1.4.0:
   dependencies:
     source-map-support "^0.5.5"
 
+karma-verbose-reporter@^0.0.8:
+  version "0.0.8"
+  resolved "https://registry.yarnpkg.com/karma-verbose-reporter/-/karma-verbose-reporter-0.0.8.tgz#472d1062af5402d8f2d38d534a8614a5b77b84e8"
+  integrity sha512-wHgevIcEpfgKwR3CnWd8t1ErzWeVlctO7ZtXkKFR1inb006ogz+7ZKg95eIVOnHCYWL3Gdy1dRMOGjVP0n4MlA==
+  dependencies:
+    colors "1.4.0"
+
 karma@~6.4.3:
   version "6.4.3"
   resolved "https://registry.yarnpkg.com/karma/-/karma-6.4.3.tgz#763e500f99597218bbb536de1a14acc4ceea7ce8"