Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Laura Morel
VizFaDa-app
Commits
e42b0d57
Commit
e42b0d57
authored
Sep 28, 2020
by
Laura Morel
Browse files
Add spinner when loading heatmap
parent
b9c96c9b
Changes
8
Hide whitespace changes
Inline
Side-by-side
Angular/package-lock.json
View file @
e42b0d57
...
...
@@ -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
View file @
e42b0d57
...
...
@@ -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
View file @
e42b0d57
<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
View file @
e42b0d57
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
View file @
e42b0d57
...
...
@@ -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
View file @
e42b0d57
...
...
@@ -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
View file @
e42b0d57
<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
View file @
e42b0d57
import
{
Component
,
OnInit
,
Input
,
AfterView
Checked
}
from
'
@angular/core
'
;
import
{
Component
,
OnInit
,
Input
,
AfterView
Init
}
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
);
}
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment