Implement Docker containers for Front-end and Back-end

* Minor improvement for presentation
* Add remaining species

.gitignore

 Angular/node_modules
+
 Django/assets/Bos_taurus/10/
 Django/assets/Bos_taurus/15/
 Django/assets/Bos_taurus/20/
 Django/assets/Bos_taurus/corPickle
 Django/assets/Bos_taurus/metaPickle
+
 Django/assets/Gallus_gallus/10/
 Django/assets/Gallus_gallus/15/
 Django/assets/Gallus_gallus/20/
 Django/assets/Gallus_gallus/corPickle
 Django/assets/Gallus_gallus/metaPickle
+
 Django/assets/Ovis_aries/10/
 Django/assets/Ovis_aries/15/
 Django/assets/Ovis_aries/20/
 Django/assets/Ovis_aries/corPickle
 Django/assets/Ovis_aries/metaPickle
+
+Django/assets/Sus_scrofa/10/
+Django/assets/Sus_scrofa/15/
+Django/assets/Sus_scrofa/20/
+Django/assets/Sus_scrofa/corPickle
+Django/assets/Sus_scrofa/metaPickle
+
+Django/assets/Equus_caballus/10/
+Django/assets/Equus_caballus/15/
+Django/assets/Equus_caballus/20/
+Django/assets/Equus_caballus/corPickle
+Django/assets/Equus_caballus/metaPickle
+
+Django/assets/Capra_hircus/10/
+Django/assets/Capra_hircus/15/
+Django/assets/Capra_hircus/20/
+Django/assets/Capra_hircus/corPickle
+Django/assets/Capra_hircus/metaPickle
+
 Django/data/heatmap/__pycache__
 Django/data/management/commands/__pycache__
 Django/data/migrations/__pycache__

Angular/Dockerfile

@@ -8,4 +8,6 @@ RUN npm run build --prod
 
 # Stage 2: serve
 FROM nginx:1.17.1
+RUN rm -rf /usr/shar/nginx/html/*
 COPY --from=build /app/dist/VizFaDa /usr/share/nginx/html
+COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf

Angular/nginx/nginx.conf

+server {
+	listen 80;
+	
+	gzip on;
+
+	location / {
+		root /usr/share/nginx/html;
+		index index.html index.html;
+	}
+}
+		

Angular/package.json

@@ -11,47 +11,52 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~10.0.5",
-    "@angular/cdk": "^10.2.4",
-    "@angular/common": "~10.0.5",
-    "@angular/compiler": "~10.0.5",
-    "@angular/core": "~10.0.5",
+    "@angular/animations": "~10.1.6",
+    "@angular/cdk": "^10.2.5",
+    "@angular/common": "~10.1.6",
+    "@angular/compiler": "~10.1.6",
+    "@angular/core": "~10.1.6",
     "@angular/flex-layout": "^10.0.0-beta.32",
-    "@angular/forms": "~10.0.5",
-    "@angular/localize": "~10.0.5",
-    "@angular/platform-browser": "~10.0.5",
-    "@angular/platform-browser-dynamic": "~10.0.5",
-    "@angular/router": "~10.0.5",
+    "@angular/forms": "~10.1.6",
+    "@angular/localize": "~10.1.6",
+    "@angular/platform-browser": "~10.1.6",
+    "@angular/platform-browser-dynamic": "~10.1.6",
+    "@angular/router": "~10.1.6",
+    "@fortawesome/angular-fontawesome": "^0.7.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-regular-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@ng-bootstrap/ng-bootstrap": "^7.0.0",
     "@nguniversal/express-engine": "^10.1.0",
     "angularjs-slider": "^7.0.0",
-    "bootstrap": "^4.5.2",
+    "bootstrap": "^4.5.3",
     "ng-multiselect-dropdown": "^0.2.10",
-    "ngx-color-picker": "^10.0.1",
+    "ngx-color-picker": "^10.1.0",
     "ngx-cookie-service": "^10.1.1",
     "ngx-spinner": "^10.0.1",
-    "rxjs": "~6.5.5",
-    "tslib": "^2.0.0",
+    "node": "^14.13.1",
+    "rxjs": "~6.6.3",
+    "tslib": "^2.0.3",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1000.4",
-    "@angular/cli": "~10.0.4",
-    "@angular/compiler-cli": "~10.0.5",
-    "@types/node": "^12.11.1",
+    "@angular/cli": "~10.1.7",
+    "@angular/compiler-cli": "~10.1.6",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
-    "codelyzer": "^6.0.0",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "@types/node": "^14.11.8",
+    "codelyzer": "^6.0.1",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~6.0.0",
+    "karma": "~5.2.3",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~3.3.0",
+    "karma-jasmine": "~4.0.1",
     "karma-jasmine-html-reporter": "^1.5.0",
     "protractor": "~7.0.0",
-    "ts-node": "~8.3.0",
+    "ts-node": "~9.0.0",
     "tslint": "~6.1.0",
-    "typescript": "~3.9.5"
+    "typescript": "~4.0.3"
   }
 }

Angular/src/app/app.module.ts

@@ -20,6 +20,9 @@ import { ViewComponent } from './main/view/view.component';
 import { MainComponent } from './main/main.component';
 import { CanvasComponent } from './main/view/heatmap/canvas/canvas.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
+
+import { faCaretDown } from '@fortawesome/free-solid-svg-icons';
 
 @NgModule({
   declarations: [
@@ -44,9 +47,14 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
     BrowserAnimationsModule,
     NgbModule,
     FlexLayoutModule,
+    FontAwesomeModule,
   ],
   providers: [CookieService],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class AppModule { }
+export class AppModule {
+  constructor(private library: FaIconLibrary) {
+    library.addIcons(faCaretDown);
+  }
+}

Angular/src/app/main/controller/controller.component.css

@@ -12,3 +12,8 @@ form {
   margin: 5px;
   height: 100%;
 }
+
+::ng-deep .card-header {
+  background-color: #dcedf5;
+  color: #577c95;
+}

Angular/src/app/main/controller/controller.component.html

@@ -2,7 +2,15 @@
 <form [formGroup]="formGroup" novalidate (ngSubmit)=onSubmit()
       fxLayout="column" fxLayoutAlign="space-between stretch">
   <ngb-accordion #acc="ngbAccordion" name="form" activeIds="ngb-panel-0, ngb-panel-3">
-    <ngb-panel title="Species">
+    <ngb-panel>
+    <ng-template ngbPanelHeader>
+      <div fxLayout="row" fxLayoutAlign="space-between center">
+        <h5 class="panel-title">Species</h5>
+        <button ngbPanelToggle class="btn">
+          <fa-icon [icon]="['fas','caret-down']"></fa-icon>
+        </button>
+      </div>
+    </ng-template>
       <ng-template ngbPanelContent>
         <select id="species"
             formControlname="species"
@@ -13,9 +21,7 @@
         </select>
       </ng-template>
     </ngb-panel>
-
-    <ngb-panel title="Filters"><form [formGroup]="formGroup" novalidate (ngSubmit)=onSubmit()
-      fxLayout="column" fxLayoutAlign="space-between stretch
+    <ngb-panel title="Filters">
       <ng-template ngbPanelContent>
         <div formArrayName="filters">
           <p>Filters :</p>
@@ -66,6 +72,6 @@
     </ngb-panel>
 
   </ngb-accordion>
-  <button fxFlexAlign="end" type="submit">Submit</button>
+  <button class="btn btn-success" fxFlexAlign="end" type="submit">Submit</button>
 </form>
 </div>

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

@@ -17,7 +17,7 @@ export class ControllerComponent implements OnInit {
 
   @ViewChild(LegendComponent) legend: LegendComponent;
 
-  public SPECIES = ["Gallus_gallus", "Bos_taurus", "Ovis_aries"];
+  public SPECIES = ["Gallus_gallus", "Bos_taurus", "Ovis_aries", "Capra_hircus", "Equus_caballus", "Sus_scrofa"];
   public SIZES = ["10", "15", "20"];
   public METADATA: Object;
 

Angular/src/app/main/data.service.ts

@@ -9,7 +9,7 @@ import { CookieService } from "ngx-cookie-service";
 })
 export class DataService {
 
-  private baseURL = 'http://127.0.0.1:8000';
+  private baseURL = 'http://127.0.0.1:80';
   public submittedData = new Subject;
 
   constructor(private http: HttpClient, private cookieService: CookieService) {
@@ -41,4 +41,10 @@ export class DataService {
     console.log("Fetching metadata at ", url);
     return this.http.get(url, {responseType: 'json'})
   }
+
+  get_species(): Observable<Object> {
+    let url = `${this.baseURL}/api/species`;
+    console.log("Fetching available species");
+    return this.http.get(url, {responseType: 'json'})
+  }
 }

Django/.dockerignore

+./venv
+./db.sqlite3

Django/Dockerfile

+FROM python:3.8.6
+
+COPY requirements.txt /
+
+RUN apt-get update
+RUN apt-get install libgirepository1.0-dev python-cairo python3-gi gobject-introspection gir1.2-gtk-3.0 -y
+RUN pip install -r /requirements.txt
+
+RUN mkdir /code
+WORKDIR /code
+
+COPY . /code/
+
+RUN python manage.py migrate
+RUN python manage.py fill_db True
+
+EXPOSE 80

Django/VizFaDa/settings/base.py

@@ -36,7 +36,9 @@ ALLOWED_HOSTS = ['127.0.0.1']
 CORS_ORIGIN_ALLOW_ALL = False
 CORS_ALLOWED_ORIGINS = [
     'http://localhost:4200',
-    'http://127.0.0.1:4200'
+    'http://127.0.0.1:4200',
+    'http://localhost:8080',
+    'http://127.0.0.1:8080'
 ]
 CORS_ALLOW_CREDENTIALS = True
 CORS_EXPOSE_HEADERS = [