Fixed fetching of tiles and planes

src/app/executions/execution/execution-detail/execution-detail.component.ts

@@ -6,7 +6,7 @@ import {FormControl, FormGroup, FormArray} from "@angular/forms";
 import {ConfigurationService} from "../../../env/configuration.service";
 import {faCheckCircle, faCopy, faList, faSave, faStickyNote} from "@fortawesome/free-solid-svg-icons";
 import {AlertService} from "../../../services/alert.service";
-import {auditTime, takeUntil} from "rxjs/operators";
+import {takeUntil, debounceTime} from "rxjs/operators";
 import { Tile } from 'src/app/model/tile';
 
 @Component({
@@ -46,9 +46,11 @@ export class ExecutionDetailComponent implements OnInit, OnDestroy, OnChanges {
 
   ngOnInit() {
     // autosave the form on changes
-    this.noteFormGroup.valueChanges.pipe(auditTime(2000),takeUntil(this.ngUnsubscribe)).subscribe(() => this.updateNotes());
+    this.noteFormGroup.valueChanges.pipe(debounceTime(2000),takeUntil(this.ngUnsubscribe)).subscribe(() => this.updateNotes());
   }
 
+  // Listen for changes to @Input properties
+  // Source: https://angular.io/guide/lifecycle-hooks#onchanges
   ngOnChanges(changes: SimpleChanges) {
     const job = changes.job.currentValue as Job;
     // Only need to get these when `@Input() job` changes
@@ -58,28 +60,30 @@ export class ExecutionDetailComponent implements OnInit, OnDestroy, OnChanges {
         this.noteFormGroup.get('notes').setValue(j.notes);
         this.noteFormGroup.get('id').setValue(j.id);
 
+        // this.loadWeblogUrl, this.canSelectTiles, and this.canSelectPlanes depend on this.jobDetail,
+        //  so need to wait for it to be set to run them
         this.loadWeblogUrl();
+        if (this.canSelectTiles()) {
+          this.jobService.getTiles(job.job_id).pipe(takeUntil(this.ngUnsubscribe)).subscribe(
+            (response: Tile[]) => this.refreshTiles(response),
+            error => {
+              this.alertService.error(`Could not retrieve tiles: ${error}`);
+          });
+        }
+        if (this.canSelectPlanes()) {
+          this.jobService.getPlanes(job.job_id).subscribe((response: string) => {
+            this.planeKeys = response.split(/\r?\n|\r|\n/g);  // Source: https://stackoverflow.com/a/21712066
+            for (const controlName in this.planesFormGroup.controls) {
+              this.planesFormGroup.removeControl(controlName);
+            }
+            this.planeKeys.forEach(key => this.planesFormGroup.addControl(key, new FormControl(true)));
+          },
+            error => {
+            this.alertService.error('Could not retrieve planes from planes.json. ' + error);
+          });
+        }
       }
     });
-    if (this.canSelectTiles()) {
-      this.jobService.getTiles(job.job_id).pipe(takeUntil(this.ngUnsubscribe)).subscribe(
-        (response: Tile[]) => this.refreshTiles(response),
-        error => {
-          this.alertService.error(`Could not retrieve tiles: ${error}`);
-      });
-    }
-    if (this.canSelectPlanes()) {
-      this.jobService.getPlanes(job.job_id).subscribe((response: string) => {
-        this.planeKeys = response.split(/\r?\n|\r|\n/g);  // Source: https://stackoverflow.com/a/21712066
-        for (const controlName in this.planesFormGroup.controls) {
-          this.planesFormGroup.removeControl(controlName);
-        }
-        this.planeKeys.forEach(key => this.planesFormGroup.addControl(key, new FormControl(true)));
-      },
-        error => {
-        this.alertService.error('Could not retrieve planes from planes.json. ' + error);
-      });
-    }
   }
 
   refreshTiles(newTiles: Tile[]) {