Add spinner when loading heatmap

Angular/package-lock.json

@@ -2057,6 +2057,11 @@
       "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
       "dev": true
     },
+    "angularjs-slider": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/angularjs-slider/-/angularjs-slider-7.0.0.tgz",
+      "integrity": "sha512-qNWPARWEktSthHj0/SAMVhy+3AIRnyVCXRK58gXT+3uRORXu/3QJ2L9MjCZvA9yeZxFceEYMOrtK8sSsTKobUw=="
+    },
     "ansi-colors": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
@@ -7774,6 +7779,14 @@
         "tslib": "^2.0.0"
       }
     },
+    "ngx-spinner": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-10.0.1.tgz",
+      "integrity": "sha512-3fkzS4t+oKg1jobUmWxeGD3zLymdIOMijib517tgrDnW4Q2fKKwZPVCfTR5ztm9G0/l9G/DRoOoBcHPPupUBdg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",

Angular/package.json

@@ -19,8 +19,10 @@
     "@angular/platform-browser": "~10.0.5",
     "@angular/platform-browser-dynamic": "~10.0.5",
     "@angular/router": "~10.0.5",
+    "angularjs-slider": "^7.0.0",
     "ng-multiselect-dropdown": "^0.2.10",
     "ngx-color-picker": "^10.0.1",
+    "ngx-spinner": "^10.0.1",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.3"

Angular/src/app/app.component.html

 <h1>VizFaDa</h1>
 
-<ngx-spinner
-  bdColor = "rgba(51, 51, 51, 0.8)"
-  size = "medium"
-  color = "#fff"
-  type = "ball-clip-rotate"></ngx-spinner>
-
 <app-controller></app-controller>

Angular/src/app/app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -28,6 +29,7 @@ import { HighlightComponent } from './highlight/highlight.component';
     HttpClientModule,
     NgMultiSelectDropDownModule,
     ColorPickerModule,
+    NgxSpinnerModule,
   ],
   providers: [],
   bootstrap: [AppComponent],

Angular/src/app/controller/controller.component.ts

@@ -114,8 +114,7 @@ export class ControllerComponent implements OnInit {
 
   updateMap(): void {
     console.log("Updating map");
-    this.img=this.dataService.filter_highlight(this.formGroup.value);
-    this.heatmap.setImg(this.img);
+    this.heatmap.setImg(this.formGroup.value);
   }
 
 }

Angular/src/app/data.service.ts

@@ -7,7 +7,7 @@ import { Observable } from 'rxjs';
 })
 export class DataService {
 
-  private baseURL = 'http://127.0.0.1:8000'
+  private baseURL = 'http://127.0.0.1:8000';
 
   constructor(private http: HttpClient) { }
 
@@ -21,20 +21,20 @@ export class DataService {
     return result;
   }
 
-  filter_highlight(data: Object): string {
+  filter_highlight(data: Object): Observable<Blob> {
 //    const sp = data['species'].replace(" ", "_");
     let url: string = `${this.baseURL}/api/img`;
+    console.log(data);
     url = url + `?q=${JSON.stringify(data)}`;
-    console.log("Fetching data at ", url);
-    return url;
-//    const options = {responseType: 'blob' as 'blob'};
-//    return this.http.get<any>(url, options);
+    console.log("Fetching image at ", url);
+//    return url;
+    return this.http.get(`${url}`, {responseType: 'blob', reportProgress: true});
   }
 
   get_fields(data: Object): Observable<Object> {
     let url = `${this.baseURL}/api/fields`;
     url = url + `?q=${JSON.stringify(data)}`;
     console.log("Fetching metadata at ", url);
-    return this.http.get<Object>(url)
+    return this.http.get(url, {responseType: 'json'})
   }
 }

Angular/src/app/heatmap/heatmap.component.html

-<ng-container *ngIf="src; else elseTemplate">
-  <img  id="heatmap" [src]="src" />
+<ng-container *ngIf="img; else noImg">
+  <img  id="heatmap" [src]="img" *ngIf="!imgLoading; else spinner" />
+  <ng-template #spinner>
+    <ngx-spinner bdColor = "rgba(51,51,51,0.8)"
+                 size = "medium"
+                 color = "#ffffff"
+                 type = "ball-newton-cradle"
+                 [fullScreen] = "false">
+      <p style="color: white" > Loading... </p></ngx-spinner>
+  </ng-template>
 </ng-container>
 <ng-template #elseTemplate>
-    <p> No heatmap </p>
+  <p> No heatmap </p>
 </ng-template>

Angular/src/app/heatmap/heatmap.component.ts

-import { Component, OnInit, Input, AfterViewChecked } from '@angular/core';
+import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { NgxSpinnerService } from 'ngx-spinner';
 
 import { DataService } from '../data.service';
 
@@ -11,14 +12,37 @@ import { DataService } from '../data.service';
 export class HeatmapComponent implements OnInit {
 
   public src: String = "no_heatmap";
+  public img: any;
+  private imgLoading: boolean = false;
 
-  constructor(private dataService: DataService, private sanitizer: DomSanitizer) { }
+  constructor(private dataService: DataService,
+              private sanitizer: DomSanitizer,
+              private spinner: NgxSpinnerService) { }
 
   ngOnInit(): void {
+    this.spinner.show();
   }
 
-  setImg(img: string): void{
-    this.src = img;
+  setImg(data: Object): void{
+    this.imgLoading = true;
+    this.dataService.filter_highlight(data).subscribe(img => {
+      this.imgFromBlob(img);
+      this.imgLoading = false;
+    }, error => {
+      this.imgLoading = false;
+      console.log(error);
+    });
+  }
+
+  imgFromBlob(img: Blob) {
+    let reader = new FileReader();
+    reader.addEventListener("load", () => {
+      this.img = reader.result;
+    }, false);
+
+    if (img) {
+      reader.readAsDataURL(img);
+    }
   }
 
 }