Skip to content

GitLab

Commit 8de7de10 authored by Laura Morel's avatar Laura Morel
Browse files

Update Dockerfiles and docker-compose config

parent a8600d10
Hide whitespace changes
Inline Side-by-side
Angular/Dockerfile
View file @ 8de7de10
# Stage 1 : build FROM node:14.13.1
FROM node:14.13.1 as build
WORKDIR /app WORKDIR /app
COPY package.json /app COPY package.json /app
RUN npm install RUN npm install
COPY . /app/ COPY . /app/
RUN npm run build --prod RUN npm run build
# 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/envar 0 → 100644
View file @ 8de7de10
HELLO=hello
BASE_URL=0.0.0.0:80
Angular/package-lock.json
View file @ 8de7de10
This source diff could not be displayed because it is too large. You can view the blob instead.
Angular/package.json
View file @ 8de7de10
...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
"zone.js": "~0.10.3" "zone.js": "~0.10.3"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.1000.4", "@angular-devkit/build-angular": "^0.1100.1",
"@angular/cli": "~10.1.7", "@angular/cli": "~10.1.7",
"@angular/compiler-cli": "~10.1.6", "@angular/compiler-cli": "~10.1.6",
"@types/jasmine": "~3.5.0", "@types/jasmine": "~3.5.0",
......
Angular/src/app/app.module.ts
View file @ 8de7de10
...@@ -22,7 +22,7 @@ import { CanvasComponent } from './main/view/heatmap/canvas/canvas.component'; ...@@ -22,7 +22,7 @@ import { CanvasComponent } from './main/view/heatmap/canvas/canvas.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCaretDown } from '@fortawesome/free-solid-svg-icons'; import { faCaretDown, faTimes } from '@fortawesome/free-solid-svg-icons';
@NgModule({ @NgModule({
declarations: [ declarations: [
...@@ -55,6 +55,6 @@ import { faCaretDown } from '@fortawesome/free-solid-svg-icons'; ...@@ -55,6 +55,6 @@ import { faCaretDown } from '@fortawesome/free-solid-svg-icons';
}) })
export class AppModule { export class AppModule {
constructor(private library: FaIconLibrary) { constructor(private library: FaIconLibrary) {
library.addIcons(faCaretDown); library.addIcons(faCaretDown, faTimes);
} }
} }
Angular/src/app/main/controller/controller.component.css
View file @ 8de7de10
.fhl { .fhl {
border-radius: 5px; border-radius: 5px;
border-color: black; border: solid;
border-width: thin;
border-color: #dcedf5;
padding: 5px;
overflow: visible;
}
.delete-button {
color: darkred;
} }
control-container { control-container {
...@@ -17,3 +26,7 @@ form { ...@@ -17,3 +26,7 @@ form {
background-color: #dcedf5; background-color: #dcedf5;
color: #577c95; color: #577c95;
} }
::ng-deep .accordion>.card {
overflow: visible;
}
Angular/src/app/main/controller/controller.component.html
View file @ 8de7de10
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<ngb-panel> <ngb-panel>
<ng-template ngbPanelHeader> <ng-template ngbPanelHeader>
<div fxLayout="row" fxLayoutAlign="space-between center"> <div fxLayout="row" fxLayoutAlign="space-between center">
<h5 class="panel-title">Species</h5> <h5 ngbPanelToggle class="panel-title">Species</h5>
<button ngbPanelToggle class="btn"> <button ngbPanelToggle class="btn">
<fa-icon [icon]="['fas','caret-down']"></fa-icon> <fa-icon [icon]="['fas','caret-down']"></fa-icon>
</button> </button>
...@@ -21,35 +21,62 @@ ...@@ -21,35 +21,62 @@
</select> </select>
</ng-template> </ng-template>
</ngb-panel> </ngb-panel>
<ngb-panel title="Filters">
<ngb-panel>
<ng-template ngbPanelHeader>
<div fxLayout="row" fxLayoutAlign="space-between center">
<h5 ngbPanelToggle class="panel-title">Filters</h5>
<button ngbPanelToggle class="btn">
<fa-icon [icon]="['fas','caret-down']"></fa-icon>
</button>
</div>
</ng-template>
<ng-template ngbPanelContent> <ng-template ngbPanelContent>
<div formArrayName="filters"> <div formArrayName="filters">
<p>Filters :</p> <div class="fhl" fxLayout="column" *ngFor="let control of formFilters.controls; let i = index">
<div class="fhl" *ngFor="let control of formFilters.controls; let i = index"> <button fxFlexAlign="end" type="button" (click)="delFromArray('filters', i)" class="btn btn-delete">
<button type="button" (click)="delFromArray('filters', i)">Delete</button> <fa-icon class="delete-button" [icon]="['fas','times']"></fa-icon>
</button>
<app-filter [formGroup] = "formGroup.controls.filters.controls[i]" <app-filter [formGroup] = "formGroup.controls.filters.controls[i]"
[METADATA] = "METADATA"></app-filter> [METADATA] = "METADATA"></app-filter>
</div> </div>
<button type="button" (click)="addFilter()">Add Filter</button> <button type="button" class="btn btn-outline-success" (click)="addFilter()">Add Filter</button>
</div> </div>
</ng-template> </ng-template>
</ngb-panel> </ngb-panel>
<ngb-panel title="Highlights"> <ngb-panel>
<ng-template ngbPanelHeader>
<div fxLayout="row" fxLayoutAlign="space-between center">
<h5 ngbPanelToggle class="panel-title">Highlights</h5>
<button ngbPanelToggle class="btn">
<fa-icon [icon]="['fas','caret-down']"></fa-icon>
</button>
</div>
</ng-template>
<ng-template ngbPanelContent> <ng-template ngbPanelContent>
<div formArrayName="highlights"> <div formArrayName="highlights">
<p>Highlights :</p> <div class="fhl" fxLayout="column" *ngFor="let control of formHighlights.controls; let i = index">
<div class="fhl" *ngFor="let control of formHighlights.controls; let i = index"> <button fxFlexAlign="end" type="button" (click)="delFromArray('highlights', i)" class="btn btn-delete">
<button type="button" (click)="delFromArray('highlights', i)">Delete</button> <fa-icon class="delete-button" [icon]="['fas','times']"></fa-icon>
</button>
<app-highlight [formGroup] = "formGroup.controls.highlights.controls[i]" <app-highlight [formGroup] = "formGroup.controls.highlights.controls[i]"
[METADATA] = "METADATA"></app-highlight> [METADATA] = "METADATA"></app-highlight>
</div> </div>
<button type="button" (click)="addHighlight()">Add Highlight</button> <button type="button" class="btn btn-outline-success" (click)="addHighlight()">Add Highlight</button>
</div> </div>
</ng-template> </ng-template>
</ngb-panel> </ngb-panel>
<ngb-panel title="Annotation"> <ngb-panel>
<ng-template ngbPanelHeader>
<div fxLayout="row" fxLayoutAlign="space-between center">
<h5 ngbPanelToggle class="panel-title">Annotation</h5>
<button ngbPanelToggle class="btn">
<fa-icon [icon]="['fas','caret-down']"></fa-icon>
</button>
</div>
</ng-template>
<ng-template ngbPanelContent> <ng-template ngbPanelContent>
<label for="annotated">Annotate : </label> <label for="annotated">Annotate : </label>
<select class="form-control" id="annotated" formControlname="annotated" (change)="changeAnnotation($event)"> <select class="form-control" id="annotated" formControlname="annotated" (change)="changeAnnotation($event)">
...@@ -58,10 +85,17 @@ ...@@ -58,10 +85,17 @@
</select> </select>
<app-legend *ngIf="formGroup.controls['annotated'] != ''"></app-legend> <app-legend *ngIf="formGroup.controls['annotated'] != ''"></app-legend>
</ng-template> </ng-template>
</ngb-panel> </ngb-panel>
<ngb-panel title="Graph options"> <ngb-panel>
<ng-template ngbPanelHeader>
<div fxLayout="row" fxLayoutAlign="space-between center">
<h5 ngbPanelToggle class="panel-title">Graph options</h5>
<button ngbPanelToggle class="btn">
<fa-icon [icon]="['fas','caret-down']"></fa-icon>
</button>
</div>
</ng-template>
<ng-template ngbPanelContent> <ng-template ngbPanelContent>
<label for="size">Size : </label> <label for="size">Size : </label>
<select class="form-control" id="size" formControlname="options" (change)="changeSize($event)"> <select class="form-control" id="size" formControlname="options" (change)="changeSize($event)">
......
Angular/src/app/main/controller/filter/filter.component.html
View file @ 8de7de10
<form [formGroup]="formGroup" novalidate> <div fxLayout="column">
<label for="field">Field : </label> <form [formGroup]="formGroup" novalidate>
<ng-multiselect-dropdown <div fxLayout="row" fxLayoutAlign="center center">
id = "field" <label fxFlex="15" for="field">Field : </label>
[placeholder]= "'Choose field'" <ng-multiselect-dropdown
[data]="fields" fxFlex
[settings]="fieldDropdownSettings" fxFlexOffset = "5"
(onSelect) = "getValues($event)" id = "field"
> </ng-multiselect-dropdown> [placeholder]= "'Choose field'"
<label for="values">Values : </label> [data]="fields"
<ng-multiselect-dropdown [settings]="fieldDropdownSettings"
id = "values" (onSelect) = "getValues($event)"
[placeholder]="'Choose values'" ></ng-multiselect-dropdown>
[data]="values" </div>
[settings]="valuesDropdownSettings" <div fxLayout="row" fxLayoutAlign="center center">
(onSelect) = "onSelectValue($event)" <label fxFlex="15" for="values">Values : </label>
(onDeSelect) = "onDeSelectValue($event)" <ng-multiselect-dropdown
> </ng-multiselect-dropdown> fxFlex
</form> fxFlexOffset = "5"
id = "values"
[placeholder]="'Choose values'"
[data]="values"
[settings]="valuesDropdownSettings"
(onSelect) = "onSelectValue($event)"
(onDeSelect) = "onDeSelectValue($event)"
></ng-multiselect-dropdown>
</div>
</form>
</div>
Angular/src/app/main/controller/filter/filter.component.ts
View file @ 8de7de10
...@@ -33,6 +33,7 @@ export class FilterComponent implements OnInit { ...@@ -33,6 +33,7 @@ export class FilterComponent implements OnInit {
}; };
this.valuesDropdownSettings = { this.valuesDropdownSettings = {
singleSelection: false, singleSelection: false,
allowSearchFilter: true,
} }
} }
......
Angular/src/app/main/controller/highlight/highlight.component.html
View file @ 8de7de10
<form [formGroup]="formGroup" novalidate> <form [formGroup]="formGroup" novalidate>
<input [style.background]="color" <div fxLayout="row" fxLayoutAlign="center center">
[colorPicker]="color" <label fxFlex="15" for="field">Color : </label>
(colorPickerChange)="onChangeColor($event)"/> <input
<label for="field">Field : </label> fxFlex
<ng-multiselect-dropdown fxFlexOffset = "5"
id = "field" [style.background]="color"
[placeholder]= "'Choose field'" [colorPicker]="color"
[data]="fields" (colorPickerChange)="onChangeColor($event)"/>
[settings]="fieldDropdownSettings" </div>
(onSelect) = "getValues($event)" <div fxLayout="row" fxLayoutAlign="center center">
> </ng-multiselect-dropdown> <label fxFlex="15" for="field">Field : </label>
<label for="values">Values : </label> <ng-multiselect-dropdown
<ng-multiselect-dropdown fxFlex
id = "values" fxFlexOffset = "5"
[placeholder]="'Choose values'" id = "field"
[data]="values" [placeholder]= "'Choose field'"
[settings]="valuesDropdownSettings" [data]="fields"
(onSelect) = "onSelectValue($event)" [settings]="fieldDropdownSettings"
(onDeSelect) = "onDeSelectValue($event)" (onSelect) = "getValues($event)"
> </ng-multiselect-dropdown> ></ng-multiselect-dropdown>
</form> </div>
<div fxLayout="row" fxLayoutAlign="center center">
<label fxFlex="15" for="values">Values : </label>
<ng-multiselect-dropdown
fxFlex
fxFlexOffset = "5"
id = "values"
[placeholder]="'Choose values'"
[data]="values"
[settings]="valuesDropdownSettings"
(onSelect) = "onSelectValue($event)"
(onDeSelect) = "onDeSelectValue($event)"
></ng-multiselect-dropdown>
</div>
Angular/src/app/main/controller/highlight/highlight.component.ts
View file @ 8de7de10
...@@ -34,6 +34,7 @@ export class HighlightComponent implements OnInit { ...@@ -34,6 +34,7 @@ export class HighlightComponent implements OnInit {
}; };
this.valuesDropdownSettings = { this.valuesDropdownSettings = {
singleSelection: false, singleSelection: false,
allowSearchFilter: true,
} }
} }
......
Angular/src/app/main/data.service.ts
View file @ 8de7de10
...@@ -9,7 +9,7 @@ import { CookieService } from "ngx-cookie-service"; ...@@ -9,7 +9,7 @@ import { CookieService } from "ngx-cookie-service";
}) })
export class DataService { export class DataService {
private baseURL = 'http://127.0.0.1:80'; private baseURL = 'http://127.0.0.1:8000';
public submittedData = new Subject; public submittedData = new Subject;
constructor(private http: HttpClient, private cookieService: CookieService) { constructor(private http: HttpClient, private cookieService: CookieService) {
......
Angular/src/app/main/view/heatmap/heatmap.component.html
View file @ 8de7de10
...@@ -11,8 +11,6 @@ ...@@ -11,8 +11,6 @@
size = "medium" size = "medium"
color = "#ffffff" color = "#ffffff"
type = "ball-newton-cradle" type = "ball-newton-cradle"
[fullScreen] = "false"> [fullScreen] = "true">
<p style="color: white" > Loading... </p></ngx-spinner> <p style="color: white" > Loading... </p></ngx-spinner>
</ng-template> </ng-template>
<app-legend></app-legend>
Angular/src/app/main/view/heatmap/heatmap.component.ts
View file @ 8de7de10
...@@ -15,7 +15,6 @@ import { CanvasComponent } from './canvas/canvas.component'; ...@@ -15,7 +15,6 @@ import { CanvasComponent } from './canvas/canvas.component';
}) })
export class HeatmapComponent implements OnInit { export class HeatmapComponent implements OnInit {
@ViewChild(LegendComponent) legend: LegendComponent;
@ViewChild(CanvasComponent) canvas: CanvasComponent; @ViewChild(CanvasComponent) canvas: CanvasComponent;
public formdata: Object; public formdata: Object;
...@@ -64,7 +63,6 @@ export class HeatmapComponent implements OnInit { ...@@ -64,7 +63,6 @@ export class HeatmapComponent implements OnInit {
reader.addEventListener("load", () => { reader.addEventListener("load", () => {
this.setSrc(reader.result as string); this.setSrc(reader.result as string);
this.canvas.setImg(this.src); this.canvas.setImg(this.src);
this.legend.get_legend();
this.imgLoading = false; this.imgLoading = false;
this.heatmapInfoService.img_loaded(true); this.heatmapInfoService.img_loaded(true);
console.log("Heatmap src changed to: ", this.src); console.log("Heatmap src changed to: ", this.src);
......
Angular/src/app/main/view/heatmap/legend/legend.component.css
View file @ 8de7de10
...@@ -19,9 +19,11 @@ ...@@ -19,9 +19,11 @@
.legend-container { .legend-container {
padding: 5px; padding: 5px;
border: solid;
border-radius: 5px; border-radius: 5px;
border-color: black; border-color: #DCEDF5;
border-width: thick; border-width: thin;
overflow: auto;
} }
p { p {
......
Django/.dockerignore
View file @ 8de7de10
./venv ./venv
./db.sqlite3 ./db.sqlite3
./assets/Bos_taurus/10/
./assets/Bos_taurus/15/
./assets/Bos_taurus/20/
./assets/Bos_taurus/corPickle
./assets/Bos_taurus/metaPickle
./assets/Gallus_gallus/10/
./assets/Gallus_gallus/15/
./assets/Gallus_gallus/20/
./assets/Gallus_gallus/corPickle
./assets/Gallus_gallus/metaPickle
./assets/Ovis_aries/10/
./assets/Ovis_aries/15/
./assets/Ovis_aries/20/
./assets/Ovis_aries/corPickle
./assets/Ovis_aries/metaPickle
./assets/Sus_scrofa/10/
./assets/Sus_scrofa/15/
./assets/Sus_scrofa/20/
./assets/Sus_scrofa/corPickle
./assets/Sus_scrofa/metaPickle
./assets/Equus_caballus/10/
./assets/Equus_caballus/15/
./assets/Equus_caballus/20/
./assets/Equus_caballus/corPickle
./assets/Equus_caballus/metaPickle
./assets/Capra_hircus/10/
./assets/Capra_hircus/15/
./assets/Capra_hircus/20/
./assets/Capra_hircus/corPickle
./assets/Capra_hircus/metaPickle
Django/Dockerfile
View file @ 8de7de10
...@@ -4,14 +4,12 @@ COPY requirements.txt / ...@@ -4,14 +4,12 @@ COPY requirements.txt /
RUN apt-get update RUN apt-get update
RUN apt-get install libgirepository1.0-dev python-cairo python3-gi gobject-introspection gir1.2-gtk-3.0 -y 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 pip3.8 install -r /requirements.txt
RUN mkdir /code RUN mkdir /code
WORKDIR /code WORKDIR /code
COPY . /code/ COPY . /code/
RUN python manage.py migrate RUN python3.8 manage.py makemigrations
RUN python manage.py fill_db True RUN python3.8 manage.py migrate --run-syncdb && python manage.py fill_db True
EXPOSE 80
Django/Dockerfile.prod 0 → 100644
View file @ 8de7de10
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 makemigrations
EXPOSE 80
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