Commit e42b0d57 authored by Laura Morel's avatar Laura Morel
Browse files

Add spinner when loading heatmap

parent b9c96c9b
......@@ -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",
......
......@@ -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"
......
<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>
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],
......
......@@ -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);
}
}
......@@ -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'})
}
}
<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>
......
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);
}
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment