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

Add spinner when loading heatmap

parent b9c96c9b
...@@ -2057,6 +2057,11 @@ ...@@ -2057,6 +2057,11 @@
"integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=",
"dev": true "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": { "ansi-colors": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz",
...@@ -7774,6 +7779,14 @@ ...@@ -7774,6 +7779,14 @@
"tslib": "^2.0.0" "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": { "nice-try": {
"version": "1.0.5", "version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
......
...@@ -19,8 +19,10 @@ ...@@ -19,8 +19,10 @@
"@angular/platform-browser": "~10.0.5", "@angular/platform-browser": "~10.0.5",
"@angular/platform-browser-dynamic": "~10.0.5", "@angular/platform-browser-dynamic": "~10.0.5",
"@angular/router": "~10.0.5", "@angular/router": "~10.0.5",
"angularjs-slider": "^7.0.0",
"ng-multiselect-dropdown": "^0.2.10", "ng-multiselect-dropdown": "^0.2.10",
"ngx-color-picker": "^10.0.1", "ngx-color-picker": "^10.0.1",
"ngx-spinner": "^10.0.1",
"rxjs": "~6.5.5", "rxjs": "~6.5.5",
"tslib": "^2.0.0", "tslib": "^2.0.0",
"zone.js": "~0.10.3" "zone.js": "~0.10.3"
......
<h1>VizFaDa</h1> <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> <app-controller></app-controller>
import { BrowserModule } from '@angular/platform-browser'; import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; import { HttpClientModule } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...@@ -28,6 +29,7 @@ import { HighlightComponent } from './highlight/highlight.component'; ...@@ -28,6 +29,7 @@ import { HighlightComponent } from './highlight/highlight.component';
HttpClientModule, HttpClientModule,
NgMultiSelectDropDownModule, NgMultiSelectDropDownModule,
ColorPickerModule, ColorPickerModule,
NgxSpinnerModule,
], ],
providers: [], providers: [],
bootstrap: [AppComponent], bootstrap: [AppComponent],
......
...@@ -114,8 +114,7 @@ export class ControllerComponent implements OnInit { ...@@ -114,8 +114,7 @@ export class ControllerComponent implements OnInit {
updateMap(): void { updateMap(): void {
console.log("Updating map"); console.log("Updating map");
this.img=this.dataService.filter_highlight(this.formGroup.value); this.heatmap.setImg(this.formGroup.value);
this.heatmap.setImg(this.img);
} }
} }
...@@ -7,7 +7,7 @@ import { Observable } from 'rxjs'; ...@@ -7,7 +7,7 @@ import { Observable } from 'rxjs';
}) })
export class DataService { export class DataService {
private baseURL = 'http://127.0.0.1:8000' private baseURL = 'http://127.0.0.1:8000';
constructor(private http: HttpClient) { } constructor(private http: HttpClient) { }
...@@ -21,20 +21,20 @@ export class DataService { ...@@ -21,20 +21,20 @@ export class DataService {
return result; return result;
} }
filter_highlight(data: Object): string { filter_highlight(data: Object): Observable<Blob> {
// const sp = data['species'].replace(" ", "_"); // const sp = data['species'].replace(" ", "_");
let url: string = `${this.baseURL}/api/img`; let url: string = `${this.baseURL}/api/img`;
console.log(data);
url = url + `?q=${JSON.stringify(data)}`; url = url + `?q=${JSON.stringify(data)}`;
console.log("Fetching data at ", url); console.log("Fetching image at ", url);
return url; // return url;
// const options = {responseType: 'blob' as 'blob'}; return this.http.get(`${url}`, {responseType: 'blob', reportProgress: true});
// return this.http.get<any>(url, options);
} }
get_fields(data: Object): Observable<Object> { get_fields(data: Object): Observable<Object> {
let url = `${this.baseURL}/api/fields`; let url = `${this.baseURL}/api/fields`;
url = url + `?q=${JSON.stringify(data)}`; url = url + `?q=${JSON.stringify(data)}`;
console.log("Fetching metadata at ", url); 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"> <ng-container *ngIf="img; else noImg">
<img id="heatmap" [src]="src" /> <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-container>
<ng-template #elseTemplate> <ng-template #elseTemplate>
<p> No heatmap </p> <p> No heatmap </p>
</ng-template> </ng-template>
import { Component, OnInit, Input, AfterViewChecked } from '@angular/core'; import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; import { DomSanitizer } from '@angular/platform-browser';
import { NgxSpinnerService } from 'ngx-spinner';
import { DataService } from '../data.service'; import { DataService } from '../data.service';
...@@ -11,14 +12,37 @@ import { DataService } from '../data.service'; ...@@ -11,14 +12,37 @@ import { DataService } from '../data.service';
export class HeatmapComponent implements OnInit { export class HeatmapComponent implements OnInit {
public src: String = "no_heatmap"; 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 { ngOnInit(): void {
this.spinner.show();
} }
setImg(img: string): void{ setImg(data: Object): void{
this.src = img; 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