Skip to content

GitLab

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

Add session support for Django 

* Allow Angular to make requests from back-end with a sessionid in order to
  get the correct legend for heatmap annotation
* Restructure Angular apps (divide form controls and 'views' (only heatmap for now)
* Add Ovis aries data
parent c463b03a
Hide whitespace changes
Inline Side-by-side
Angular/package-lock.json
View file @ f23cbd33
......@@ -1559,6 +1559,23 @@
"webpack-sources": "1.4.3"
}
},
"@nguniversal/common": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/@nguniversal/common/-/common-10.1.0.tgz",
"integrity": "sha512-AIfLORs+LLHx9d+8kRNDq+GZj/2ToyXgg5Boi2RfgUhV5Rywey082XRlFmPwyVHxltYJzoMPeNWxzV6hrSMCzA==",
"requires": {
"tslib": "^2.0.0"
}
},
"@nguniversal/express-engine": {
"version": "10.1.0",
"resolved": "https://registry.npmjs.org/@nguniversal/express-engine/-/express-engine-10.1.0.tgz",
"integrity": "sha512-UYQB8662Qnx9Y2TblZmC8QbfAZtiCE6OeLNdwWIz8rVY9jhWi4P5SFb0slvcPMyPL5JAb+FHHOKjsH1NJztsCQ==",
"requires": {
"@nguniversal/common": "10.1.0",
"tslib": "^2.0.0"
}
},
"@nodelib/fs.scandir": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
......@@ -7779,6 +7796,14 @@
"tslib": "^2.0.0"
}
},
"ngx-cookie-service": {
"version": "10.1.1",
"resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-10.1.1.tgz",
"integrity": "sha512-HvBrYHdxMN1NvFJGEIF/8EuAg2fjxj8QwqTv9h6qZGqNLU+lUba8Pb2zRPw1YA+gqKkJawOy5dYNeH0kyPyipw==",
"requires": {
"tslib": "^2.0.0"
}
},
"ngx-spinner": {
"version": "10.0.1",
"resolved": "https://registry.npmjs.org/ngx-spinner/-/ngx-spinner-10.0.1.tgz",
......@@ -7805,9 +7830,9 @@
}
},
"node-forge": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
"integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
"integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
"dev": true
},
"node-libs-browser": {
......@@ -10762,12 +10787,12 @@
}
},
"selfsigned": {
"version": "1.10.7",
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
"integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
"version": "1.10.8",
"resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
"integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
"dev": true,
"requires": {
"node-forge": "0.9.0"
"node-forge": "^0.10.0"
}
},
"semver": {
......
Angular/package.json
View file @ f23cbd33
......@@ -19,9 +19,11 @@
"@angular/platform-browser": "~10.0.5",
"@angular/platform-browser-dynamic": "~10.0.5",
"@angular/router": "~10.0.5",
"@nguniversal/express-engine": "^10.1.0",
"angularjs-slider": "^7.0.0",
"ng-multiselect-dropdown": "^0.2.10",
"ngx-color-picker": "^10.0.1",
"ngx-cookie-service": "^10.1.1",
"ngx-spinner": "^10.0.1",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
......
Angular/src/app/app.component.html
View file @ f23cbd33
<h1>VizFaDa</h1>
<app-controller></app-controller>
<app-main></app-main>
Angular/src/app/app.module.ts
View file @ f23cbd33
......@@ -7,12 +7,17 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown';
import { ColorPickerModule } from 'ngx-color-picker';
import { NgxSpinnerModule } from "ngx-spinner";
import { CookieService } from "ngx-cookie-service";
import { AppComponent } from './app.component';
import { ControllerComponent } from './controller/controller.component';
import { HeatmapComponent } from './heatmap/heatmap.component';
import { FilterComponent } from './filter/filter.component';
import { HighlightComponent } from './highlight/highlight.component';
import { ControllerComponent } from './main/controller/controller.component';
import { HeatmapComponent } from './main/view/heatmap/heatmap.component';
import { FilterComponent } from './main/controller/filter/filter.component';
import { HighlightComponent } from './main/controller/highlight/highlight.component';
import { LegendComponent } from './main/view/heatmap/legend/legend.component';
import { ViewComponent } from './main/view/view.component';
import { MainComponent } from './main/main.component';
import { CanvasComponent } from './main/view/heatmap/canvas/canvas.component';
@NgModule({
declarations: [
......@@ -20,7 +25,11 @@ import { HighlightComponent } from './highlight/highlight.component';
ControllerComponent,
HeatmapComponent,
FilterComponent,
HighlightComponent
HighlightComponent,
LegendComponent,
ViewComponent,
MainComponent,
CanvasComponent
],
imports: [
BrowserModule,
......@@ -30,8 +39,9 @@ import { HighlightComponent } from './highlight/highlight.component';
NgMultiSelectDropDownModule,
ColorPickerModule,
NgxSpinnerModule,
BrowserAnimationsModule,
],
providers: [],
providers: [CookieService],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
......
Angular/src/app/heatmap/heatmap.component.html deleted 100644 → 0
View file @ c463b03a
<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 #noImg>
<p> No heatmap </p>
</ng-template>
Angular/src/app/controller/controller.component.ts → Angular/src/app/main/controller/controller.component.ts
View file @ f23cbd33
......@@ -3,8 +3,7 @@ import { Validators, FormGroup, FormArray, FormBuilder, FormControl } from '@ang
import { NgxSpinnerService } from "ngx-spinner";
import { HeatmapComponent } from '../heatmap/heatmap.component';
import { FilterComponent } from '../filter/filter.component';
import { FilterComponent } from './filter/filter.component';
import { DataService } from '../data.service';
@Component({
......@@ -13,16 +12,13 @@ import { DataService } from '../data.service';
styleUrls: ['./controller.component.css']
})
export class ControllerComponent implements OnInit {
@ViewChild(HeatmapComponent) heatmap: HeatmapComponent;
public SPECIES = ["Gallus_gallus", "Bos_taurus"];
public SPECIES = ["Gallus_gallus", "Bos_taurus", "Ovis_aries"];
public SIZES = ["10", "15", "20"];
public METADATA: Object;
public fields: string[];
public img;
public formGroup: FormGroup;
constructor(private builder: FormBuilder,
......@@ -108,13 +104,7 @@ export class ControllerComponent implements OnInit {
onSubmit(): void {
console.log("Submitting data")
console.log(this.formGroup.value);
this.updateMap();
}
updateMap(): void {
console.log("Updating map");
this.heatmap.setImg(this.formGroup.value);
this.dataService.submit_data(this.formGroup.value);
}
}
Angular/src/app/filter/filter.component.ts → Angular/src/app/main/controller/filter/filter.component.ts
View file @ f23cbd33
......@@ -3,7 +3,7 @@ import { FormGroup } from '@angular/forms';
import { IDropdownSettings } from 'ng-multiselect-dropdown';
import { DataService } from '../data.service';
import { DataService } from '../../data.service';
@Component({
selector: 'app-filter',
......
Angular/src/app/highlight/highlight.component.ts → Angular/src/app/main/controller/highlight/highlight.component.ts
View file @ f23cbd33
......@@ -3,7 +3,7 @@ import { FormGroup } from '@angular/forms';
import { IDropdownSettings } from 'ng-multiselect-dropdown';
import { DataService } from '../data.service';
import { DataService } from '../../data.service';
@Component({
selector: 'app-highlight',
......
Angular/src/app/data.service.ts → Angular/src/app/main/data.service.ts
View file @ f23cbd33
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Observable, Subject } from 'rxjs';
import { CookieService } from "ngx-cookie-service";
@Injectable({
providedIn: 'root'
......@@ -8,8 +10,11 @@ import { Observable } from 'rxjs';
export class DataService {
private baseURL = 'http://127.0.0.1:8000';
public submittedData = new Subject;
private headers: HttpHeaders;
constructor(private http: HttpClient) { }
constructor(private http: HttpClient, private cookieService: CookieService) {
}
get_img(species, size): Observable<any> {
const sp = species.replace(" ", "_");
......@@ -21,6 +26,16 @@ export class DataService {
return result;
}
get_legend(): Observable<Object> {
let url = `${this.baseURL}/api/legend`;
console.log("Fetching legend at ", url);
return this.http.get(url, {responseType: 'json', withCredentials: true})
}
submit_data(data: Object): void {
this.submittedData.next(data);
}
filter_highlight(data: Object): Observable<Blob> {
// const sp = data['species'].replace(" ", "_");
let url: string = `${this.baseURL}/api/img`;
......@@ -28,7 +43,7 @@ export class DataService {
url = url + `?q=${JSON.stringify(data)}`;
console.log("Fetching image at ", url);
// return url;
return this.http.get(`${url}`, {responseType: 'blob', reportProgress: true});
return this.http.get(`${url}`, {headers: this.headers, responseType: 'blob', reportProgress: true});
}
get_fields(data: Object): Observable<Object> {
......
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