working service updates. When changing searchbox, will reset the controls.

Added resetControl function.

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

@@ -74,7 +74,6 @@ export class MedicalSourcesComponent implements OnInit {
     private lighthouseApi: LighthouseService,
     private fastenApi: FastenApiService,
     private activatedRoute: ActivatedRoute,
-    private router: Router,
     private location: Location,
     private toastService: ToastService,
     private filterService: MedicalSourcesFilterService,
@@ -83,13 +82,6 @@ export class MedicalSourcesComponent implements OnInit {
 
   ngOnInit(): void {
 
-    //changing the form, should change the URL, BUT NOT do a query
-    this.filterForm.valueChanges.pipe(debounceTime(100)).subscribe(val => {
-      console.log("FILTER FORM CHANGED:", val, this.filterService.toQueryParams())
-
-      // change the browser url whenever the filter is updated.
-      this.updateBrowserUrl(this.filterService.toQueryParams())
-    })
 
     //TODO: handle Callbacks from the source connect window
     const callbackSourceType = this.activatedRoute.snapshot.paramMap.get('source_type')
@@ -112,6 +104,7 @@ export class MedicalSourcesComponent implements OnInit {
           this.availableSourceList = []
           this.resultLimits.totalItems = 0
           this.resultLimits.scrollComplete = false
+          this.filterService.resetControl("categories")
           // this.filterService.filterForm.setControl("categories", this.{: {}}, { emitEvent: false})
 
           //update the form with data from route (don't emit a new patch event), then submit query
@@ -191,11 +184,6 @@ export class MedicalSourcesComponent implements OnInit {
 
   }
 
-  updateBrowserUrl(queryParams: {[name: string]: string}){
-    console.log("update the browser url with query params data", queryParams)
-    this.router.navigate(['/sources'], { queryParams: queryParams })
-  }
-
   private querySources(filter?: MedicalSourcesFilter): Observable<LighthouseSourceSearch> {
     if(this.loading){
       return

frontend/src/app/services/medical-sources-filter.service.ts

@@ -1,5 +1,7 @@
 import { Injectable } from '@angular/core';
 import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
+import {debounceTime} from 'rxjs/operators';
+import {Router} from '@angular/router';
 
 
 export class MedicalSourcesFilter {
@@ -25,7 +27,28 @@ export class MedicalSourcesFilterService {
     showHidden: [false],
   })
 
-  constructor(private formBuilder: FormBuilder) { }
+  constructor(
+    private formBuilder: FormBuilder,
+    private router: Router,
+  ) {
+
+    //changing the form, should change the URL, BUT NOT do a query
+    this.filterForm.valueChanges.pipe(debounceTime(100)).subscribe(val => {
+      console.log("FILTER FORM CHANGED:", val, this.toQueryParams())
+
+      // change the browser url whenever the filter is updated.
+      this.updateBrowserUrl(this.toQueryParams())
+    })
+  }
+
+  updateBrowserUrl(queryParams: {[name: string]: string}){
+    console.log("update the browser url with query params data", queryParams)
+    this.router.navigate(['/sources'], { queryParams: queryParams })
+  }
+
+  resetControl(controlName: string){
+    this.filterForm.get(controlName).reset();
+  }
 
   //parse angular query string parameters
   parseQueryParams(queryParams: {[name:string]:string}){