Merge branch 'redesign' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into redesign

28 files changed, 538 insertions, 299 deletions

diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
index bf5e3fd6..b3d25280 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
@@ -16,48 +16,59 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);
 })
 export class BoxPlotComponent implements AfterViewInit {
 
-  @Input() width?: number;
-  @Input() height?: number;
-  @Input() mean?: number;
-  @Input() median?: number;
-  @Input() min?: number;
-  @Input() max?: number;
-  @Input() q1?: number;
-  @Input() q3?: number;
+  @Input() width!: number;
+  @Input() height!: number;
+  @Input() mean!: number;
+  @Input() median!: number;
+  @Input() min!: number;
+  @Input() max!: number;
+  @Input() q1!: number;
+  @Input() q3!: number;
 
-  updateChart(min: number, max: number, q1: number, q3: number, median: number) {
-    if (this.myChart) {
-      this.boxplotData.datasets[0].data = [[min, q1, median, q3, max]]
-      this.myChart.update();
-    }
-  };
+  
+
+  /*
+  updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){
+    //console.log(this.uniqueValues, this.uniqueValuesPercent);
+    this.pieChartData.datasets =  [{
+        label: "%",
+        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"],
+        data: uniqueValuesPercent,
+      }];
+      this.pieChartData.labels = uniqueValues
+      console.log(this.uniqueValues, this.uniqueValuesPercent);
+      this.myChart?.update() 
+    };
+  */
 
   @ViewChild('boxplot') chartRef!: ElementRef;
   constructor() {
     //this.updateChart();
   }
 
-  boxplotData = {
-    // define label tree
-    //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
-    datasets: [{
-      label: 'Dataset 1',
-      backgroundColor: '#0063AB',
-      borderColor: '#dfd7d7',
-      borderWidth: 1,
-      outlierColor: '#999999',
-      scaleFontColor: '#0063AB',
-      padding: 10,
-      itemRadius: 0,
-      data: [
-        randomValues(100, 0, 100),
-      ]
-    }]
-  };
+  
   ngAfterViewInit(): void {
-    this.myChart = new Chart(this.chartRef.nativeElement, {
+    const boxplotData = {
+      // define label tree
+      //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
+      labels:[""],
+      datasets: [{
+        label: 'Dataset 1',
+        backgroundColor: '#0063AB',
+        borderColor: '#dfd7d7',
+        borderWidth: 1,
+        outlierColor: '#999999',
+        scaleFontColor: '#0063AB',
+        padding: 10,
+        itemRadius: 0,
+        data: [
+          {min:this.min,q1:this.q1,q3:this.q3,median:this.median,max:this.max,mean:this.mean}
+        ]
+      }]
+    };
+    const myChart = new Chart(this.chartRef.nativeElement, {
       type: "boxplot",
-      data: this.boxplotData,
+      data: boxplotData,
       options: {
         plugins: {
           legend: {
@@ -74,8 +85,6 @@ export class BoxPlotComponent implements AfterViewInit {
             }
           },
           y: {
-            min: this.min,
-            max: this.max,
             ticks: {
               color: '#dfd7d7'
             },
@@ -88,5 +97,4 @@ export class BoxPlotComponent implements AfterViewInit {
     });
   }
 
-  myChart?: Chart;
 }
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
index 89a76a44..7d21129c 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
@@ -41,32 +41,33 @@ export class LineChartComponent implements AfterViewInit {
     }
   }
   update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc:number[],myValLoss:number[],myValMae:number[],myValMse:number[]) {
-    this.dataAcc.length = 0;
-    this.dataAcc.push(...myAcc);
-
+   
     this.dataEpoch.length = 0;
     this.dataEpoch.push(...myEpochs);
 
-    this.dataMAE.length = 0;
-    this.dataMAE.push(...myMae);
+    this.dataAcc.length = 0;
+    this.dataAcc.push(...myAcc);
 
     this.dataLOSS.length = 0;
     this.dataLOSS.push(...myLoss);
 
-    this.dataMSE.length = 0;
-    this.dataMSE.push(...myValAcc);
+    this.dataMAE.length = 0;
+    this.dataMAE.push(...myMae);
 
     this.dataMSE.length = 0;
-    this.dataMSE.push(...myValLoss);
+    this.dataMSE.push(...myMse);
 
-    this.dataMSE.length = 0;
-    this.dataMSE.push(...myValMae);
+    this.dataValAcc.length = 0;
+    this.dataValAcc.push(...myValAcc);
 
-    this.dataMSE.length = 0;
-    this.dataMSE.push(...myValMse);
+    this.dataValLoss.length = 0;
+    this.dataValLoss.push(...myValLoss);
 
-    this.dataMSE.length = 0;
-    this.dataMSE.push(...myMse);
+    this.dataValMAE.length = 0;
+    this.dataValMAE.push(...myValMae);
+
+    this.dataValMSE.length = 0;
+    this.dataValMSE.push(...myValMse);
 
     this.myChart.update();
   }
@@ -89,7 +90,7 @@ export class LineChartComponent implements AfterViewInit {
           },
           {
             label: 'Val_Accuracy',
-            data: this.dataMSE,
+            data: this.dataValAcc,
             borderWidth: 1
           },
           {
@@ -99,7 +100,7 @@ export class LineChartComponent implements AfterViewInit {
           },
           {
             label: 'Val_Loss',
-            data: this.dataMSE,
+            data: this.dataValLoss,
             borderWidth: 1
           },
           {
@@ -109,7 +110,7 @@ export class LineChartComponent implements AfterViewInit {
           },
           {
             label: 'Val_MAE',
-            data: this.dataMSE,
+            data: this.dataValMAE,
             borderWidth: 1
           },
           {
@@ -119,7 +120,7 @@ export class LineChartComponent implements AfterViewInit {
           },
           {
             label: 'Val_MSE',
-            data: this.dataMSE,
+            data: this.dataValMSE,
             borderWidth: 1
           }
           ]
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
index cba5252a..9264e41c 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
@@ -58,10 +58,6 @@ export class PieChartComponent implements AfterViewInit {
     data: data     
   ,
     options: {
-      /*title: {
-        display: true,
-        text: 'Predicted world population (millions) in 2050'
-      }*/
       plugins:{   
         legend: {
           display: false
diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts
index 694b1a83..9a8cbeee 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -78,39 +78,14 @@ export class ColumnTableComponent implements AfterViewInit {
   }
 
 
-  updateCharts() {
-    //min: number, max: number, q1: number, q3: number, median: number
-    let i = 0;
-    this.boxplotComp.changes.subscribe(() => {
-      const bps = this.boxplotComp.toArray();
-      this.dataset?.columnInfo.forEach((colInfo, index) => {
-        if (this.experiment.columnTypes[index] == ColumnType.numerical) {
-          bps[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median);
-          i++;
-        }
-      });
-    });
-  }
+  
+
 
-  updatePieChart() {
-    //min: number, max: number, q1: number, q3: number, median: number
-    let i = 0;
-    const pieChart = this.piechartComp.toArray();
-    console.log(pieChart)
-    this.dataset?.columnInfo.forEach((colInfo, index) => {
-      console.log(i)
-      if (this.experiment.columnTypes[index] == ColumnType.categorical) {
-        console.log("prosao IF")
-        pieChart[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent);
-        i++;
-      }
-    });
-  }
 
   loadDataset(dataset: Dataset) {
     console.log("LOADED DATASET");
 
-    if (this.route.snapshot.paramMap.get("id") == null) {
+    if (this.route.snapshot.paramMap.get("id") == null && this.route.snapshot.paramMap.get("predictorId") == null) {
       this.dataset = dataset;
       this.setColumnTypeInitial();
   
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index 9e7644b6..97c13299 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -105,8 +105,9 @@
 .bottom-button {
     font-size: large;
     position: relative;
+    text-align: center;
     background-color: var(--ns-primary);
-    width: 10rem;
+    width: 12rem;
     height: 2.3rem;
     border-color: var(--ns-primary);
     border-style: solid;
@@ -170,7 +171,8 @@
 
 .folder-inside {
     width: 100%;
-    min-height: 40rem;
+    min-height: 33rem;
+    height: 100%;
     max-height: 100%;
 }
 
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index 97ae0d23..da182945 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -29,47 +29,48 @@
                     <button matSuffix class="btn-clear input-icon" (click)="clearSearchTerm()"><mat-icon>clear</mat-icon></button>
                 </mat-form-field>
             </div>
-            <div id="search-options">
-                <!-- <div id="collapseFilters" class="collapse collapse-horizontal">
+            <div id="modelFilter" *ngIf="type == FolderType.Model && forExperiment">
+                Filter: {{forExperiment.type}}
+            </div>
+            <!--<div id="search-options">
+                <div id="collapseFilters" class="collapse collapse-horizontal">
                     <mat-icon class="text-offwhite ">timeline</mat-icon>
                     Regresioni
                     <mat-icon class="text-offwhite ">looks_two</mat-icon>
                     Binarni klasifikacioni
                     <mat-icon class="text-offwhite ">auto_awesome_motion</mat-icon>
                     Multiklasifikacioni
-                </div> -->
+                </div>
                 <button class="btn-clear icon-toggle" data-bs-toggle="collapse" data-bs-target="#collapseFilters" aria-expanded="false" aria-controls="collapseFilters">
                     <mat-icon>filter_alt</mat-icon>
                 </button>
-                <!-- <div id="collapseSort" class="collapse collapse-horizontal">
+                <div id="collapseSort" class="collapse collapse-horizontal">
                     [sort options here TODO]
-                </div> -->
+                </div>
                 <button class="btn-clear icon-toggle" data-bs-toggle="collapse" data-bs-target="#collapseSort" aria-expanded="false" aria-controls="collapseSort">
                     <mat-icon>sort</mat-icon>
                 </button>
-                <!-- <button class="btn-clear icon-toggle separator" [ngClass]="{'icon-toggle-on': listView}" (click)="toggleListView()">
+                <button class="btn-clear icon-toggle separator" [ngClass]="{'icon-toggle-on': listView}" (click)="toggleListView()">
                     <mat-icon>view_list</mat-icon>
-                </button> -->
-            </div>
+                </button>
+            </div>-->
         </div>
         <!--{{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}-->
         <div class="folder-inside bg-blur">
             <div class="file-content" [ngClass]="{'form-hidden' : listView}">
                 <div class="file-bottom-buttons" *ngIf="selectedTab != TabType.NewFile">
-                    <button *ngIf="this.selectedFile && selectedTab == TabType.File" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)">
+                    <button *ngIf="this.selectedFile && selectedTab == TabType.File && privacy != Privacy.Public" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)">
                         <mat-icon matTooltip="Obriši" matTooltipPosition="right">delete</mat-icon>
                     </button>
                     <button *ngIf="this.selectedFile && selectedTab==TabType.File && FolderType.Dataset==this.type" class="btn-clear file-button" (click)="downloadFile(this.selectedFile,$event)" style="display: inline-block;">
                         <mat-icon matTooltip="Preuzmi" matTooltipPosition="before">download</mat-icon>
                     </button>
-
-                    
                     <!-- <button class="btn-clear file-button">
                         <mat-icon>zoom_out_map</mat-icon>
                     </button> -->
                 </div>
-                <app-form-model [ngClass]="{'form-hidden': type != FolderType.Model}" [forExperiment]="forExperiment" [hideProblemType]="(forExperiment ? true : false)" [forProblemType]="(forExperiment ? forExperiment.type : ProblemType.Regression)"></app-form-model>
-                <app-form-dataset [ngClass]="{'form-hidden': type != FolderType.Dataset}" [forExperiment]="forExperiment"></app-form-dataset>
+                <app-form-model [ngClass]="{'form-hidden': type != FolderType.Model}" [forExperiment]="forExperiment" [hideProblemType]="(forExperiment ? true : false)" [forProblemType]="(forExperiment ? forExperiment.type : ProblemType.Regression)" (editEvent)="onFileChange()"></app-form-model>
+                <app-form-dataset [ngClass]="{'form-hidden': type != FolderType.Dataset}" [forExperiment]="forExperiment" (editEvent)="onFileChange()"></app-form-dataset>
             </div>
             <div [ngClass]="{'form-hidden' : !listView}" class="list-view">
                 <div *ngFor="let file of filteredFiles; let i = index">
@@ -107,7 +108,7 @@
                                 {{predictor.lastUpdated | date}}
                             </div>
                             <div class="mx-2 hover-show">
-                                <button class="btn-clear file-button" (click)="deleteFile(predictor, $event)">
+                                <button class="btn-clear file-button" (click)="deleteFile(predictor, $event, true)">
                                     <mat-icon>delete</mat-icon>
                                 </button>
                             </div>
@@ -132,14 +133,30 @@
                 </div>
             </div>
         </button>
-        <button mat-button (click)="ok()" class="bottom-button text-offwhite rounded-bottom" *ngSwitchCase="false">
-            <div class="f-row">
-                <div>Ok</div>
-                <div class="icon-double pt-1">
-                    <mat-icon>check</mat-icon>
-                    <mat-icon>check</mat-icon>
+        <ng-container *ngSwitchCase="false">
+            <button mat-button (click)="ok()" class="bottom-button text-offwhite rounded-bottom" *ngIf="!selectedFileHasChanges">
+                <div class="f-row">
+                    <div>Ok</div>
+                    <div class="p-1 w-100" *ngIf="loadingAction">
+                        <app-spinner></app-spinner>
+                    </div>
+                    <div class="icon-double pt-1" *ngIf="!loadingAction">
+                        <mat-icon>check</mat-icon>
+                        <mat-icon>check</mat-icon>
+                    </div>
                 </div>
-            </div>
-        </button>
+            </button>
+            <button mat-button (click)="updateFile()" class="bottom-button text-offwhite rounded-bottom" *ngIf="selectedFileHasChanges" [disabled]="loadingAction">
+                <div class="f-row">
+                    <div *ngIf="!loadingAction">Sačuvaj izmene</div>
+                    <div class="pt-1" *ngIf="!loadingAction">
+                        <mat-icon>edit</mat-icon>
+                    </div>
+                    <div class="pt-1 w-100" *ngIf="loadingAction">
+                        <app-spinner></app-spinner>
+                    </div>
+                </div>
+            </button>
+        </ng-container>
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index 254298fb..beff6012 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -14,6 +14,7 @@ import { FormModelComponent } from '../form-model/form-model.component';
 import { ActivatedRoute, Router } from '@angular/router';
 import Predictor from 'src/app/_data/Predictor';
 import FileSaver from 'file-saver';
+import isEqual from 'lodash.isequal';
 
 @Component({
   selector: 'app-folder',
@@ -105,6 +106,7 @@ export class FolderComponent implements AfterViewInit {
   selectFile(file?: FolderFile) {
     this.formDataset.resetPagging();
     this.selectedFile = file;
+    Object.assign(this.lastFileData, this.selectedFile);
     this.fileToDisplay = file;
     if (this.type == FolderType.Experiment && file) {
       this.router.navigate(['/experiment/' + file._id]);
@@ -118,9 +120,9 @@ export class FolderComponent implements AfterViewInit {
     if (this.type == FolderType.Dataset)
       this.formDataset.loadExisting();
   }
-  
+
   goToExperimentPageWithPredictor(file: FolderFile, predictor: Predictor) {
-    this.router.navigate(['/experiment/' + file._id + "/" + predictor._id]);
+    this.router.navigate(['/experiment/p/' + predictor._id]);
   }
 
   createNewFile() {
@@ -138,7 +140,7 @@ export class FolderComponent implements AfterViewInit {
   _initialized: boolean = false;
 
   refreshFiles(selectedDatasetId: string | null = null, selectedModelId: string | null = null) {
-    
+
     this.tabsToShow.forEach(tab => {
       this.folders[tab] = [];
     });
@@ -221,7 +223,7 @@ export class FolderComponent implements AfterViewInit {
           this.predictorsForExp[exp._id].forEach(pred => {
             const model = this.folders[TabType.MyModels].find(model => model._id == pred.modelId);
             pred.name = model?.name!;
-            pred.lastUpdated = model?.lastUpdated!;
+            //pred.lastUpdated = model?.lastUpdated!;
           })
           /* ------------------------------------------------ */
           this.searchTermsChanged();
@@ -267,7 +269,12 @@ export class FolderComponent implements AfterViewInit {
   searchTermsChanged() {
     this.filteredFiles.length = 0;
     if (!this.files) return;
-    this.filteredFiles.push(...this.files.filter((file) => file.name.toLowerCase().includes(this.searchTerm.toLowerCase())));
+    this.filteredFiles.push(...this.files.filter((file) => {
+      return (file.name.toLowerCase().includes(this.searchTerm.toLowerCase())
+        && (!this.forExperiment
+          || this.type != FolderType.Model
+          || (this.type == FolderType.Model && (<Model>file).type == this.forExperiment.type)))
+    }));
     /*if (this.selectedFile) {
       if (!this.filteredFiles.includes(this.selectedFile)) {
         if (this.hoverTab === TabType.None && this.getFolderType(this.selectedTab) === this.type) {
@@ -282,41 +289,102 @@ export class FolderComponent implements AfterViewInit {
 
   listView: boolean = true;
 
-  deleteFile(file: FolderFile, event: Event) {
-    event.stopPropagation();
-    this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1);
-    this.files.splice(this.files.indexOf(file), 1);
+  loadingAction = false;
+  selectedFileHasChanges = false;
+  lastFileData = {};
+
+  onFileChange() {
+    console.log(this.selectedFile, this.lastFileData)
+    setTimeout(() => {
+      this.selectedFileHasChanges = !((this.selectedTab == TabType.NewFile) || isEqual(this.selectedFile, this.lastFileData));
+    });
+  }
+
+  updateFile() {
+    const file = this.selectedFile;
+    this.loadingAction = true;
     switch (this.type) {
       case FolderType.Dataset:
-        this.datasetsService.deleteDataset(<Dataset>file).subscribe((response) => {
-          Shared.openDialog("Obaveštenje", "Uspešno ste obrisali odabrani izvor podataka.");
-          //this.filteredFiles.splice(this.files.indexOf(file), 1);
-          //this.refreshFiles();
+        this.datasetsService.editDataset(<Dataset>file).subscribe((response) => {
+          this.fileUpdatedSuccess();
         });
         break;
       case FolderType.Model:
-        this.modelsService.deleteModel(<Model>file).subscribe((response) => {
-          Shared.openDialog("Obaveštenje", "Uspešno ste obrisali odabranu konfiguraciju neuronske mreže.");
-          //this.refreshFiles();
+        this.modelsService.editModel(<Model>file).subscribe((response) => {
+          this.fileUpdatedSuccess();
         });
         break;
+    }
+  }
+
+  fileUpdatedSuccess() {
+    this.loadingAction = false;
+    this.selectedFileHasChanges = false;
+    Object.assign(this.lastFileData, this.selectedFile);
+    this.refreshFiles();
+  }
+
+  deleteFile(file: FolderFile, event: Event, deletePredictor: boolean = false) {
+    event.stopPropagation();
+
+    switch (this.type) {
+      case FolderType.Dataset:
+        const dataset = <Dataset>file;
+        Shared.openYesNoDialog("Obriši izvor podataka", "Eksperimenti i trenirani modeli nad ovim izvorom podataka će takođe biti obrisani, da li ste sigurni da želite da obrišete izvor: " + dataset.name + "?", () => {
+          this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1);
+          this.files.splice(this.files.indexOf(file), 1);
+          this.loadingAction = true;
+          this.datasetsService.deleteDataset(dataset).subscribe((response) => {
+            this.loadingAction = false;
+          });
+        })
+        break;
+      case FolderType.Model:
+        const model = <Model>file;
+        Shared.openYesNoDialog("Obriši konfiguraciju neuronske mreže", "Trenirani modeli za ovu konfiguraciju će takođe biti obrisani, da li ste sigurni da želite da obrišete konfiguraciju: " + model.name + "?", () => {
+          this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1);
+          this.files.splice(this.files.indexOf(file), 1);
+          this.loadingAction = true;
+          this.modelsService.deleteModel(<Model>file).subscribe((response) => {
+            this.loadingAction = false;
+          });
+        })
+
+        break;
       case FolderType.Experiment:
-        // this.experimentsService.deleteExperiment(<Model>file).subscribe((response) => {
-        //   console.log(response);
-        // });
-        //todo delete za predictor
+        if (deletePredictor) {
+          const predictor = <Predictor>file;
+          Shared.openYesNoDialog("Obriši trenirani model", "Da li ste sigurni da želite da obrišete trenirani model: " + predictor.name + "?", () => {
+            this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1);
+            this.files.splice(this.files.indexOf(file), 1);
+            this.loadingAction = true;
+            this.predictorsService.deletePredictor(predictor).subscribe((response) => {
+              this.loadingAction = false;
+            });
+          });
+        } else {
+          const experiment = <Experiment>file;
+          Shared.openYesNoDialog("Obriši eksperiment", "Trenirani modeli za ovaj eksperiment će takođe biti obrisani, da li ste sigurni da želite da obrišete eksperiment: " + experiment.name + "?", () => {
+            this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1);
+            this.files.splice(this.files.indexOf(file), 1);
+            this.loadingAction = true;
+            this.experimentsService.deleteExperiment(experiment).subscribe((response) => {
+              this.loadingAction = false;
+            });
+          });
+        }
         break;
     }
   }
   downloadFile(file: FolderFile, event: Event) {
     event.stopPropagation();
-    if (this.type==FolderType.Dataset) {
-        const fileId=(<Dataset>file).fileId;
-        const name=(<Dataset>file).name;
-        const ext=(<Dataset>file).extension;
-        if(fileId!=undefined)
-        this.datasetsService.downloadFile(fileId).subscribe((response)=>{
-          FileSaver.saveAs(response,name+ext);
+    if (this.type == FolderType.Dataset) {
+      const fileId = (<Dataset>file).fileId;
+      const name = (<Dataset>file).name;
+      const ext = (<Dataset>file).extension;
+      if (fileId != undefined)
+        this.datasetsService.downloadFile(fileId).subscribe((response) => {
+          FileSaver.saveAs(response, name + ext);
 
         });
 
@@ -333,7 +401,7 @@ export class FolderComponent implements AfterViewInit {
         this.datasetsService.stealDataset(<Dataset>file).subscribe((response) => {
           Shared.openDialog("Obaveštenje", "Uspešno ste dodali javni izvor podataka u vašu kolekciju.");
           this.refreshFiles(null);
-        }, (error:any) => {
+        }, (error: any) => {
           if (error.error == "Dataset with this name already exists") {
             Shared.openDialog("Obaveštenje", "Izvor podataka sa ovim imenom postoji u vašoj kolekciji.");
           }
@@ -343,7 +411,7 @@ export class FolderComponent implements AfterViewInit {
         this.modelsService.stealModel(<Model>file).subscribe((response) => {
           Shared.openDialog("Obaveštenje", "Uspešno ste dodali javnu konfiguraciju neuronske mreže u vašu kolekciju.");
           this.refreshFiles(null);
-        }, (error:any) => {
+        }, (error: any) => {
           if (error.error == "Model already exisits or validation size is not between 0-1") {
             Shared.openDialog("Obaveštenje", "Model sa ovim imenom postoji u vašoj kolekciji.");
           }
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
index 7be838f1..024f58e8 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -1,49 +1,48 @@
 <div class="folderBox" *ngIf="dataset">
- 
-        <div class="topBar">
-                <div class="kolona mb-3">
-                    <div class="fileButton">
-                        <button type="button" mat-raised-button (click)="fileInput.click()"><span *ngIf="!firstInput">Dodaj izvor podataka</span><span *ngIf="firstInput">{{filename}}</span></button>
-                    </div>
-                </div>
+    <div class="topBar">
+        <div class="kolona mb-3">
+            <div class="fileButton">
+                <button type="button" mat-raised-button (click)="fileInput.click()"><span *ngIf="!firstInput">Dodaj izvor podataka</span><span *ngIf="firstInput">{{filename}}</span></button>
+            </div>
+        </div>
 
-                <div class="kolona">
-                    <div role="group">
-                            <mat-form-field class="example-full-width" appearance="fill">
-                                <mat-label>Naziv</mat-label>
-                                <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name">
+        <div class="kolona">
+            <div role="group">
+                <mat-form-field class="example-full-width" appearance="fill">
+                    <mat-label>Naziv</mat-label>
+                    <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name" (input)="editEvent.emit()">
 
 
-                                <mat-error *ngIf="nameFormControl.hasError('required')">
-                                    Naziv je <strong>obavezan</strong>
-                                </mat-error>
-                            </mat-form-field>
-                    </div>
-                </div>
-                <div class="kolona">
-                    <mat-form-field appearance="fill">
-                        <mat-label>Delimiter</mat-label>
-                        <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (selectionChange)="update()" value=",">
-                            <mat-option *ngFor="let option of delimiterOptions" [value]="option">
-                                {{ option }}
-                            </mat-option>
-                        </mat-select>
-                    </mat-form-field>
-                </div>
+                    <mat-error *ngIf="nameFormControl.hasError('required')">
+                        Naziv je <strong>obavezan</strong>
+                    </mat-error>
+                </mat-form-field>
+            </div>
+        </div>
+        <div class="kolona">
+            <mat-form-field appearance="fill">
+                <mat-label>Delimiter</mat-label>
+                <mat-select id="delimiterOptions" [(ngModel)]="dataset.delimiter" (selectionChange)="update(); editEvent.emit();" value=",">
+                    <mat-option *ngFor="let option of delimiterOptions" [value]="option">
+                        {{ option }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
         </div>
-     
+    </div>
+
 
     <div class="row" style="margin-right: 0;">
         <div class="file-container" [ngClass]="{'dottedClass': !tableData.hasInput}">
 
             <i class="material-icons-outlined icon-display" [ngClass]="{'hidden': tableData.hasInput}">file_upload</i>
-            
 
-            <input class="file" id="file-upload" (change)="changeListener($event)" #fileInput type="file" accept=".csv">
+
+            <input class="file" id="file-upload" (change)="changeListener($event)" (valueChange)="dataset.isPreProcess = false; editEvent.emit()" #fileInput type="file" accept=".csv">
 
             <div class="mt-5 datatable">
                 <div [ngClass]="{'hidden': (!existingFlag)}" class="text-center">
-                    <button mat-button  (click)="goBack()"><mat-icon>keyboard_arrow_left</mat-icon></button>
+                    <button mat-button (click)="goBack()"><mat-icon>keyboard_arrow_left</mat-icon></button>
                     <div style="display: inline;">{{(this.begin/10)+1}}...{{getPage()}}</div>
                     <button mat-button (click)="goForward()"><mat-icon>keyboard_arrow_right</mat-icon></button>
                 </div>
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
index 19c0083c..35d68526 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
@@ -24,11 +24,12 @@ export class FormDatasetComponent {
   files: File[] = [];
   rowsNumber: number = 0;
   colsNumber: number = 0;
-  begin:number=0;
-  step:number=10;
-  existingFlag:boolean=false;
+  begin: number = 0;
+  step: number = 10;
+  existingFlag: boolean = false;
 
   @Input() dataset: Dataset; //dodaj ! potencijalno
+  @Output() editEvent = new EventEmitter();
 
   tableData: TableData = new TableData();
 
@@ -43,31 +44,30 @@ export class FormDatasetComponent {
   }
 
   //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo?
-  resetPagging(){
-    this.begin=0;
+  resetPagging() {
+    this.begin = 0;
   }
-  goBack(){
-    if(this.begin-10<0)
-      this.begin=0;
-    else
-    {
-      this.begin-=10;
+  goBack() {
+    if (this.begin - 10 < 0)
+      this.begin = 0;
+    else {
+      this.begin -= 10;
       this.loadExisting();
     }
 
   }
-  goForward(){
-    this.begin+=10;
-    if(this.dataset.rowCount<this.begin)
-      this.begin-=10;
+  goForward() {
+    this.begin += 10;
+    if (this.dataset.rowCount < this.begin)
+      this.begin -= 10;
     else
       this.loadExisting();
   }
-  clear(){
+  clear() {
     this.tableData.hasInput = false;
   }
-  getPage(){
-    return Math.ceil(this.dataset.rowCount/10)
+  getPage() {
+    return Math.ceil(this.dataset.rowCount / 10)
   }
 
   changeListener($event: any): void {
@@ -81,7 +81,7 @@ export class FormDatasetComponent {
 
     this.filename = this.files[0].name;
     this.tableData.loaded = false;
-    this.existingFlag=false;
+    this.existingFlag = false;
     this.update();
   }
 
@@ -115,30 +115,30 @@ export class FormDatasetComponent {
     this.dataset.name = this.filename.slice(0, this.filename.length - 4);
   }
 
-  loadExisting(){
-    this.existingFlag=true;
+  loadExisting() {
+    this.existingFlag = true;
     this.firstInput = false;
 
     this.tableData.hasInput = true;
     this.tableData.loaded = false;
-    this.datasetsService.getDatasetHeader(this.dataset.fileId).subscribe((header: string | undefined)=>{
-    
-    this.datasetsService.getDatasetFilePaging(this.dataset.fileId,this.begin,this.step).subscribe((file: string | undefined) => {
-      if (file) {
-        this.tableData.loaded = true;
-        this.tableData.numRows = this.dataset.rowCount;
-        this.tableData.numCols = this.dataset.columnInfo.length;
-        this.tableData.data = this.csv.csvToArray(header+'\n'+file, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter);
-
-      }
-      else{
-        this.begin-=10;
-        this.loadExisting();
-      }
+    this.datasetsService.getDatasetHeader(this.dataset.fileId).subscribe((header: string | undefined) => {
+
+      this.datasetsService.getDatasetFilePaging(this.dataset.fileId, this.begin, this.step).subscribe((file: string | undefined) => {
+        if (file) {
+          this.tableData.loaded = true;
+          this.tableData.numRows = this.dataset.rowCount;
+          this.tableData.numCols = this.dataset.columnInfo.length;
+          this.tableData.data = this.csv.csvToArray(header + '\n' + file, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter);
+
+        }
+        else {
+          this.begin -= 10;
+          this.loadExisting();
+        }
+      });
     });
-  });
 
-    
+
   }
 
   /*exportAsXLSX():void {
diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html
index c7a9d5ca..bed69998 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -5,13 +5,13 @@
             <div class="ns-col">
                 <mat-form-field class="example-full-width" appearance="fill" class="mat-fix">
                     <mat-label>Naziv</mat-label>
-                    <input type="text" matInput [(ngModel)]="newModel.name">
+                    <input type="text" matInput [(ngModel)]="newModel.name" (valueChange)="editEvent.emit()">
                 </mat-form-field>
             </div>
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Tip problema</mat-label>
-                    <mat-select [(ngModel)]="forProblemType" [disabled]="this.hideProblemType">
+                    <mat-select [(ngModel)]="forProblemType" [disabled]="this.hideProblemType" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -24,7 +24,7 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Optimizacija</mat-label>
-                    <mat-select [(ngModel)]="newModel.optimizer">
+                    <mat-select [(ngModel)]="newModel.optimizer" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -35,7 +35,7 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Funkcija troška</mat-label>
-                    <mat-select [(ngModel)]="newModel.lossFunction">
+                    <mat-select [(ngModel)]="newModel.lossFunction" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(lossFunctions[forProblemType]); let optionName of Object.values(lossFunctions[forProblemType])" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -48,7 +48,7 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Funkcija aktivacije izlaznog sloja</mat-label>
-                    <mat-select name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
+                    <mat-select name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -58,7 +58,7 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Stopa učenja</mat-label>
-                    <mat-select [(ngModel)]="newModel.learningRate">
+                    <mat-select [(ngModel)]="newModel.learningRate" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(LearningRate); let optionName of Object.values(LearningRate)" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -71,14 +71,14 @@
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Broj epoha</mat-label>
-                    <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000">
+                    <input type="number" matInput [(ngModel)]="newModel.epochs" min="1" max="1000" (valueChange)="editEvent.emit()">
                 </mat-form-field>
             </div>
             <div class="ns-col">
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Broj uzoraka po iteraciji</mat-label>
 
-                    <mat-select matNativeControl [(value)]="newModel.batchSize">
+                    <mat-select matNativeControl [(value)]="newModel.batchSize" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(BatchSize); let optionName of Object.values(BatchSize)" [value]="option">{{option}}</mat-option>
                     </mat-select>
                 </mat-form-field>
@@ -102,7 +102,7 @@
                     </div>
                     <div class="slider-extended">
                         <div class="slider-pad"></div>
-                        <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider>
+                        <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)" (valueChange)="editEvent.emit()"></mat-slider>
                         <div class="slider-pad"></div>
                     </div>
                     <div>
@@ -110,13 +110,13 @@
                     </div>
                     <div class="slider-extended">
                         <div class="slider-pad"></div>
-                        <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="validationSize" (input)="updateValidation($event)"></mat-slider>
+                        <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="validationSize" (input)="updateValidation($event)" (valueChange)="editEvent.emit()"></mat-slider>
                         <div class="slider-pad"></div>
                     </div>
                 </div>
 
                 <div class="d-flex justify-content-center mt-3">
-                    <mat-checkbox color="accent">Nasumični redosled podataka</mat-checkbox>
+                    <mat-checkbox color="accent" (valueChange)="editEvent.emit()">Nasumični redosled podataka</mat-checkbox>
                 </div>
             </div>
 
@@ -220,7 +220,7 @@
 
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Regularizacija</mat-label>
-                    <mat-select [(ngModel)]="newModel.layers[i].regularisation">
+                    <mat-select [(ngModel)]="newModel.layers[i].regularisation" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(Regularisation); let optionName of Object.values(Regularisation)" [value]="option">
                             {{ optionName }}
                         </mat-option>
@@ -229,7 +229,7 @@
 
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Stopa regularizacije</mat-label>
-                    <mat-select [(ngModel)]="newModel.layers[i].regularisationRate">
+                    <mat-select [(ngModel)]="newModel.layers[i].regularisationRate" (valueChange)="editEvent.emit()">
                         <mat-option *ngFor="let option of Object.keys(RegularisationRate); let optionName of Object.values(RegularisationRate)" [value]="option">
                             {{ optionName }}
                         </mat-option>
diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts
index 9e6082c4..196d575b 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -24,6 +24,8 @@ export class FormModelComponent implements AfterViewInit {
     this.forProblemType = ProblemType.BinaryClassification;
   }
 
+  @Output() editEvent = new EventEmitter();
+
   ngAfterViewInit(): void { }
 
   selectFormControl = new FormControl('', Validators.required);
@@ -80,6 +82,7 @@ export class FormModelComponent implements AfterViewInit {
       this.newModel.layers.splice(this.newModel.layers.length - 1, 1);
       this.newModel.hiddenLayers -= 1;
       this.updateGraph();
+      this.editEvent.emit();
     }
   }
 
@@ -89,6 +92,7 @@ export class FormModelComponent implements AfterViewInit {
 
       this.newModel.hiddenLayers += 1;
       this.updateGraph();
+      this.editEvent.emit();
     }
   }
 
@@ -100,6 +104,7 @@ export class FormModelComponent implements AfterViewInit {
     if (this.newModel.layers[index].neurons > 1) {
       this.newModel.layers[index].neurons -= 1;
       this.updateGraph();
+      this.editEvent.emit();
     }
   }
 
@@ -107,6 +112,7 @@ export class FormModelComponent implements AfterViewInit {
     if (this.newModel.layers[index].neurons < 18) {
       this.newModel.layers[index].neurons += 1;
       this.updateGraph();
+      this.editEvent.emit();
     }
   }
 
@@ -119,22 +125,26 @@ export class FormModelComponent implements AfterViewInit {
     for (let i = 0; i < this.newModel.layers.length; i++) {
       this.newModel.layers[i].activationFunction = this.selectedActivation;
     }
+    this.editEvent.emit();
   }
   changeAllRegularisation() {
     for (let i = 0; i < this.newModel.layers.length; i++) {
       this.newModel.layers[i].regularisation = this.selectedRegularisation;
     }
+    this.editEvent.emit();
   }
   changeAllRegularisationRate() {
     for (let i = 0; i < this.newModel.layers.length; i++) {
       this.newModel.layers[i].regularisationRate = this.selectedRegularisationRate;
     }
+    this.editEvent.emit();
   }
   changeAllNumberOfNeurons() {
     for (let i = 0; i < this.newModel.layers.length; i++) {
       this.newModel.layers[i].neurons = this.selectedNumberOfNeurons;
-      this.updateGraph();
     }
+    this.updateGraph();
+    this.editEvent.emit();
   }
   updateTestSet(event: MatSliderChange) {
     this.testSetDistribution = event.value!;
@@ -149,5 +159,6 @@ export class FormModelComponent implements AfterViewInit {
 
   updateValidation(event: MatSliderChange) {
     this.validationSize = event.value!;
+    this.editEvent.emit();
   }
 }
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts
index fbca2edf..65b1ef9b 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.ts
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts
@@ -16,7 +16,7 @@ export class MetricViewComponent implements OnInit {
 
   history: any[] = [];
 
-  update(history: any[]) {
+  update(history: any[],totalEpochs:number) {
     const myAcc: number[] = [];
     const myMae: number[] = [];
     const myMse: number[] = [];
@@ -29,7 +29,15 @@ export class MetricViewComponent implements OnInit {
     const myEpochs: number[] = [];
     this.history = history;
     this.history.forEach((metrics, epoch) => {
-      myEpochs.push(epoch + 1);
+      if(totalEpochs>100)
+      {
+        let epochEstimate=epoch*Math.round(Math.sqrt(totalEpochs))
+        if(epochEstimate>totalEpochs)
+          epochEstimate=totalEpochs;
+        myEpochs.push(epochEstimate);
+      }
+      else
+        myEpochs.push(epoch + 1);
       for (let key in metrics) {
         let value = metrics[key];
         //console.log(key, ':::', value, epoch);
diff --git a/frontend/src/app/_elements/spinner/spinner.component.css b/frontend/src/app/_elements/spinner/spinner.component.css
new file mode 100644
index 00000000..78adc872
--- /dev/null
+++ b/frontend/src/app/_elements/spinner/spinner.component.css
@@ -0,0 +1,78 @@
+.wrap {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.loader {
+    color: #ffffff;
+    font-size: 20px;
+    margin: auto;
+    width: 1em;
+    height: 1em;
+    border-radius: 50%;
+    text-indent: -9999em;
+    -webkit-animation: load4 1.3s infinite linear;
+    animation: load4 1.3s infinite linear;
+    -webkit-transform: scale(0.2);
+    -ms-transform: scale(0.2);
+    transform: scale(0.2);
+}
+
+@-webkit-keyframes load4 {
+    0%,
+    100% {
+        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+    }
+    12.5% {
+        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    }
+    25% {
+        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    }
+    37.5% {
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    }
+    50% {
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    }
+    62.5% {
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+    }
+    75% {
+        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    }
+    87.5% {
+        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    }
+}
+
+@keyframes load4 {
+    0%,
+    100% {
+        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+    }
+    12.5% {
+        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    }
+    25% {
+        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+    }
+    37.5% {
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    }
+    50% {
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+    }
+    62.5% {
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+    }
+    75% {
+        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+    }
+    87.5% {
+        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/spinner/spinner.component.html b/frontend/src/app/_elements/spinner/spinner.component.html
new file mode 100644
index 00000000..c655abf0
--- /dev/null
+++ b/frontend/src/app/_elements/spinner/spinner.component.html
@@ -0,0 +1,3 @@
+<div class="wrap">
+    <div class="loader">Loading...</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/spinner/spinner.component.spec.ts b/frontend/src/app/_elements/spinner/spinner.component.spec.ts
new file mode 100644
index 00000000..061f78d5
--- /dev/null
+++ b/frontend/src/app/_elements/spinner/spinner.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SpinnerComponent } from './spinner.component';
+
+describe('SpinnerComponent', () => {
+  let component: SpinnerComponent;
+  let fixture: ComponentFixture<SpinnerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SpinnerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SpinnerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/spinner/spinner.component.ts b/frontend/src/app/_elements/spinner/spinner.component.ts
new file mode 100644
index 00000000..f0080edd
--- /dev/null
+++ b/frontend/src/app/_elements/spinner/spinner.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.css']
+})
+export class SpinnerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.css b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.css
index e69de29b..e99a1e1e 100644
--- a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.css
+++ b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.css
@@ -0,0 +1,8 @@
+#btnYes {
+    background-color: var(--offwhite);
+    color: var(--ns-bg-dark-100);
+}
+
+#btnNo {
+    color: gray;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html
index 77e7be42..0470d395 100644
--- a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html
+++ b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html
@@ -1,10 +1,10 @@
-<h2 mat-dialog-title class="text-muted">{{data.title}}</h2>
-<div mat-dialog-content class="mt-4" style="color: rgb(81, 76, 76);">
+<h2 mat-dialog-title class="text-center">{{data.title}}</h2>
+<div mat-dialog-content class="mt-5 mb-4 mx-1">
     <form (keydown)="withEnterKey($event)">
         {{data.message}}
     </form>
 </div>
 <div mat-dialog-actions class="d-flex justify-content-center mt-4">
-    <button mat-button cdkFocusInitial (click)="onYesClick()" style="background-color: lightgray;">Da</button>
-    <button mat-button cdkFocusInitial (click)="onNoClick()" style="background-color: lightgray;">Ne</button>
+    <button id="btnYes" mat-stroked-button color="basic" (click)="onYesClick()">Da</button>
+    <button id="btnNo" mat-stroked-button (click)="onNoClick()">Ne</button>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index e807dd06..17a6539d 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -42,7 +42,7 @@
                 <mat-step [completed]="this.step4">
                     <ng-template matStepLabel>
                         <span *ngIf="!this.step3" class="align-middle"><mat-icon>lock</mat-icon></span>
-                        <span class="label text-overflow">Pregled rezultata<br> treniranja</span>
+                        <span class="label text-overflow align-middle">Pregled rezultata<br> treniranja</span>
                     </ng-template>
                     <p class="text-left text-overflow">Pregledajte tok treniranja i<br> grafički prikaz rezultata</p>
                 </mat-step>
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 6c8e96b3..398321f2 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -21,7 +21,7 @@ import { PredictorsService } from 'src/app/_services/predictors.service';
   templateUrl: './experiment.component.html',
   styleUrls: ['./experiment.component.css']
 })
-export class ExperimentComponent implements AfterViewInit, OnInit {
+export class ExperimentComponent implements AfterViewInit {
 
   @ViewChild(MatStepper) stepper!: MatStepper;
   @ViewChild('stepsContainer') stepsContainer!: ElementRef;
@@ -44,46 +44,6 @@ export class ExperimentComponent implements AfterViewInit, OnInit {
     this.experiment = new Experiment("exp1");
   }
 
-  ngOnInit(): void {
-    this.route.queryParams.subscribe(params => {
-
-      let experimentId = this.route.snapshot.paramMap.get("id");
-      let predictorId = this.route.snapshot.paramMap.get("predictorId");
-
-      if (predictorId != null && experimentId != null) {
-        this.experimentsService.getExperimentById(experimentId).subscribe((response) => {
-          this.experiment = response;
-          this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => {
-            this.dataset = response;
-            this.folderDataset.forExperiment = this.experiment;
-            this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju
-  
-            //this.predictorsService.getPredictor(predictorId!).subscribe((response) => {
-              let predictor = response;
-              //this.modelsService.getModelById(predictor.modelId).subscribe((response) => {
-                this.modelsService.getModelById("62853d70696d62ceeb8db7cd").subscribe((response) => {
-                //imamo model
-                this.folderModel.formModel.newModel = response;
-                //this.metricView.update(predictor.metrics);
-              });
-            //});
-          });
-        });
-      }
-      else if (predictorId == null && experimentId != null) {
-        this.experimentsService.getExperimentById(experimentId).subscribe((response) => {
-          this.experiment = response;
-          this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => {
-            this.dataset = response;
-            this.folderDataset.forExperiment = this.experiment;
-            this.folderDataset.selectFile(this.dataset);
-          });
-        });
-      }
-
-    });
-  }
-
   /*updateExperiment(){
 
   }*/
@@ -131,11 +91,57 @@ export class ExperimentComponent implements AfterViewInit, OnInit {
           stat = stat.replace(/'/g, '"');
           //console.log('JSON', this.trainingResult);
           this.history.push(JSON.parse(stat));
-          this.metricView.update(this.history);
+          this.metricView.update(this.history,this.modelToTrain.epochs);
         }
       });
 
     }
+
+    this.route.queryParams.subscribe(params => {
+
+      let experimentId = this.route.snapshot.paramMap.get("id");
+      let predictorId = this.route.snapshot.paramMap.get("predictorId");
+      console.log("paramexp: ", experimentId, ", parampredictor: ", predictorId);
+      if (predictorId != null) {
+        this.predictorsService.getPredictor(predictorId!).subscribe((response) => {
+          let predictor = response;
+          //console.log("predictor: ", predictor);
+          this.experimentsService.getExperimentById(predictor.experimentId).subscribe((response) => {
+            this.experiment = response;
+            //console.log("experiment: ", this.experiment);
+            this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => {
+              this.dataset = response;
+              //console.log("dataset: ", this.dataset);
+              this.folderDataset.forExperiment = this.experiment;
+              this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju
+
+              this.modelsService.getModelById(predictor.modelId).subscribe((response) => {
+                let model = response;
+                //console.log("model: ", model);
+                this.folderModel.formModel.newModel = model;
+                this.step3 = true;
+                let numOfEpochsArray = Array.from({length: model.epochs}, (_, i) => i + 1);
+                //console.log("metric view1:", this.metricView);
+                setTimeout(() => {
+                  this.metricView.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse);
+                })
+              });
+            });
+          });
+        });
+      }
+      else if (experimentId != null) {
+        this.experimentsService.getExperimentById(experimentId).subscribe((response) => {
+          this.experiment = response;
+          this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => {
+            this.dataset = response;
+            this.folderDataset.forExperiment = this.experiment;
+            this.folderDataset.selectFile(this.dataset);
+          });
+        });
+      }
+
+    });
   }
 
   history: any[] = [];
diff --git a/frontend/src/app/_pages/profile/profile.component.css b/frontend/src/app/_pages/profile/profile.component.css
index bbd4c9ba..48b1304b 100644
--- a/frontend/src/app/_pages/profile/profile.component.css
+++ b/frontend/src/app/_pages/profile/profile.component.css
@@ -22,4 +22,9 @@ mat-form-field {
 
 .selectedPicture {
     background-color: var(--ns-accent);
+}
+
+.mat-raised-button {
+    width: 180px !important;
+    height: 50px !important;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html
index 8d655513..39f33255 100644
--- a/frontend/src/app/_pages/profile/profile.component.html
+++ b/frontend/src/app/_pages/profile/profile.component.html
@@ -27,11 +27,11 @@
                             <div class="row gx-3 mb-3">
                                 <!-- Form Group (password)-->
                                 <div class="col-md-6">
-                                    <small *ngIf="wrongPassBool" class="form-text danger-Text">Neispravna lozinka.</small>
                                     <mat-form-field appearance="fill">
                                         <mat-label>Važeća lozinka</mat-label>
                                         <input matInput id="inputPassword" name="inputPassword" type="password" placeholder="" [(ngModel)]="this.oldPass">
                                     </mat-form-field>
+                                    <small *ngIf="wrongPassBool" class="form-text danger-Text">Neispravna lozinka.</small>
                                     <small *ngIf="wrongOldPassBool" class="form-text danger-Text">Pogrešan format.</small>
                                 </div>
                                 <!-- Form Group (new password)-->
@@ -50,7 +50,7 @@
                                 <div class="col-md-6">
                                     <div class="col text-center">
                                         <!-- Save changes button-->
-                                        <button mat-raised-button color="primary" (click)="savePasswordChanges()">Promeni lozinku</button>
+                                        <button mat-raised-button color="basic" (click)="savePasswordChanges()">Promeni lozinku</button>
                                     </div>
                                 </div>
                                 <!-- Form Group (new password again)-->
@@ -122,7 +122,7 @@
                             <div class="container">
                                 <div class="card-group">
                                     <!--bootstrap card with 3 horizontal images-->
-                                    <div class="row overflow-auto" style="max-height: 200px;">
+                                    <div class="row overflow-auto" style="max-height: 255px;">
                                         <div class="card col-md-3" *ngFor="let picture of this.pictures" (click)="this.photoId = picture.photoId.toString()" [ngClass]="{'selectedPicture': this.photoId == picture.photoId.toString()}">
                                             <img src="{{picture.path}}">
                                         </div>
@@ -134,7 +134,7 @@
                         <div class="row mt-5">
                             <div class="col text-center">
                                 <!-- Save changes button-->
-                                <button mat-raised-button color="primary" (click)="saveInfoChanges()">Sačuvaj izmene</button>
+                                <button mat-raised-button color="basic" (click)="saveInfoChanges()">Sačuvaj izmene</button>
                             </div>
                         </div>
                     </form>
diff --git a/frontend/src/app/_pages/profile/profile.component.ts b/frontend/src/app/_pages/profile/profile.component.ts
index fdcd347c..aed8e40c 100644
--- a/frontend/src/app/_pages/profile/profile.component.ts
+++ b/frontend/src/app/_pages/profile/profile.component.ts
@@ -7,7 +7,8 @@ import { PICTURES } from 'src/app/_data/ProfilePictures';
 import { Picture } from 'src/app/_data/ProfilePictures';
 import shared from '../../Shared';
 import { share } from 'rxjs';
-
+import { MatDialog } from '@angular/material/dialog';
+import { AlertDialogComponent } from 'src/app/_modals/alert-dialog/alert-dialog.component';
 
 @Component({
   selector: 'app-profile',
@@ -43,13 +44,13 @@ export class ProfileComponent implements OnInit {
   wrongNewPass2Bool: boolean = false;
 
   pattName: RegExp = /^[a-zA-ZšŠđĐčČćĆžŽ]+([ \-][a-zA-ZšŠđĐčČćĆžŽ]+)*$/;
-  pattUsername: RegExp = /^[a-zA-Z0-9]{6,18}$/;
+  pattUsername: RegExp = /^[a-zA-Z0-9]{4,18}$/;
   pattTwoSpaces: RegExp = /  /;
   pattEmail: RegExp = /^[a-zA-Z0-9]+([\.\-\+][a-zA-Z0-9]+)*\@([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}$/;
   pattPassword: RegExp = /.{6,30}$/;
 
 
-  constructor(private userInfoService: UserInfoService, private authService: AuthService, private router: Router) { }
+  constructor(private userInfoService: UserInfoService, private authService: AuthService, private router: Router, public dialog?: MatDialog) { }
 
   ngOnInit(): void {
     this.userInfoService.getUserInfo().subscribe((response) => {
@@ -95,19 +96,24 @@ export class ProfileComponent implements OnInit {
       if (this.user.username != editedUser.username) { //promenio username, ide logout
         this.user = editedUser;
         this.resetInfo();
-        shared.openDialog("Obaveštenje", "Nakon promene korisničkog imena, moraćete ponovo da se ulogujete.");
-        this.authService.logOut();
-        this.router.navigate(['']);
-        return;
+        const dialogRef = this.dialog?.open(AlertDialogComponent, {
+          width: '350px',
+          data: { title: "Obaveštenje", message: "Nakon promene korisničkog imena, moraćete ponovo da se ulogujete." }
+        });
+        dialogRef?.afterClosed().subscribe(res => {
+          this.authService.logOut();
+          this.router.navigate(['']);
+          return;
+        });
+      }
+      else {
+        shared.openDialog("Obaveštenje", "Podaci su uspešno promenjeni.");
+        this.user = editedUser;
+        this.resetInfo();
       }
-      shared.openDialog("Obaveštenje", "Podaci su uspešno promenjeni.");
-      this.user = editedUser;
-      this.resetInfo();
     }, (error: any) =>{
       if (error.error == "Username already exists!") {
         shared.openDialog("Obaveštenje", "Ukucano korisničko ime je već zauzeto! Izaberite neko drugo.");
-        //(<HTMLSelectElement>document.getElementById("inputUsername")).focus();
-        //poruka obavestenja ispod inputa
         this.resetInfo();
       }
     });
@@ -122,12 +128,10 @@ export class ProfileComponent implements OnInit {
 
     if (this.newPass1 == '' && this.newPass2 == '') //ne zeli da promeni lozinku
       return;
-    //console.log("zeli da promeni lozinku");
 
     if (this.newPass1 != this.newPass2) { //netacno ponovio novu lozinku
       this.wrongNewPassBool = true;
       this.resetNewPassInputs();
-      //console.log("Netacno ponovljena lozinka");
       return;
     }
 
@@ -135,19 +139,23 @@ export class ProfileComponent implements OnInit {
     this.userInfoService.changeUserPassword(passwordArray).subscribe((response: any) => {
       //console.log("PROMENIO LOZINKU");
       this.resetNewPassInputs();
-      shared.openDialog("Obaveštenje", "Nakon promene lozinke, moraćete ponovo da se ulogujete.");
-      this.authService.logOut();
-      this.router.navigate(['']);
+      const dialogRef = this.dialog?.open(AlertDialogComponent, {
+        width: '350px',
+        data: { title: "Obaveštenje", message: "Nakon promene lozinke, moraćete ponovo da se ulogujete." }
+      });
+      dialogRef?.afterClosed().subscribe(res => {
+        this.authService.logOut();
+        this.router.navigate(['']);
+        return;
+      });
     }, (error: any) => {
       if (error.error == 'Wrong old password!') {
         this.wrongPassBool = true;
-        //(<HTMLSelectElement>document.getElementById("inputPassword")).focus();
         return;
       }
       else if (error.error == 'Identical password!') {
         shared.openDialog("Obaveštenje", "Stara i nova lozinka su identične."); 
         this.resetNewPassInputs();
-        //(<HTMLSelectElement>document.getElementById("inputNewPassword")).focus();
         return;
       }
     });
diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts
index 3fb4e8f2..2775613c 100644
--- a/frontend/src/app/_services/datasets.service.ts
+++ b/frontend/src/app/_services/datasets.service.ts
@@ -44,8 +44,8 @@ export class DatasetsService {
     return this.http.get<Dataset>(`${Configuration.settings.apiURL}/dataset/get/${datasetId}`, { headers: this.authService.authHeader() });
   }
 
-  editDataset(dataset: Dataset): Observable<Dataset> {
-    return this.http.put<Dataset>(`${Configuration.settings.apiURL}/dataset/` + dataset._id, dataset, { headers: this.authService.authHeader() });
+  editDataset(dataset: Dataset){
+    return this.http.put(`${Configuration.settings.apiURL}/dataset/` + dataset._id, dataset, { headers: this.authService.authHeader() ,responseType:'text'});
   }
 
   deleteDataset(dataset: Dataset) {
diff --git a/frontend/src/app/_services/experiments.service.ts b/frontend/src/app/_services/experiments.service.ts
index f4473c8c..4b209ff0 100644
--- a/frontend/src/app/_services/experiments.service.ts
+++ b/frontend/src/app/_services/experiments.service.ts
@@ -27,4 +27,8 @@ export class ExperimentsService {
   updateExperiment(experiment: Experiment): Observable<Experiment> {
     return this.http.put<Experiment>(`${Configuration.settings.apiURL}/experiment/` + experiment._id, experiment, { headers: this.authService.authHeader() });
   }
+
+  deleteExperiment(experiment: Experiment) {
+    return this.http.delete(`${Configuration.settings.apiURL}/experiment/` + experiment._id, { headers: this.authService.authHeader(), responseType: "text" });
+  }
 }
diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts
index f5d95ec1..2b8fe8f2 100644
--- a/frontend/src/app/_services/models.service.ts
+++ b/frontend/src/app/_services/models.service.ts
@@ -51,7 +51,7 @@ export class ModelsService {
   }
 
   editModel(model: Model): Observable<Model> {
-    return this.http.put<Model>(`${Configuration.settings.apiURL}/model/`, model, { headers: this.authService.authHeader() });
+    return this.http.put<Model>(`${Configuration.settings.apiURL}/model/` + model.name, model, { headers: this.authService.authHeader() });
   }
 
   deleteModel(model: Model) {
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 56442842..d5552ce9 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -12,7 +12,7 @@ import { TestComponent } from './_pages/test/test.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent, data: { title: 'Početna strana' } },
-  { path: 'experiment/:id/:predictorId', component: ExperimentComponent, data: { title: 'Eksperiment' } },
+  { path: 'experiment/p/:predictorId', component: ExperimentComponent, data: { title: 'Eksperiment' } },
   { path: 'experiment/:id', component: ExperimentComponent, data: { title: 'Eksperiment' } },
   { path: 'experiment', component: ExperimentComponent, data: { title: 'Eksperiment' } },
   { path: 'archive', component: ArchiveComponent, data: { title: 'Arhiva' } },
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index d44bf6ad..89d53115 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -52,6 +52,7 @@ import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/dough
 import { HeatmapComponent } from './_elements/_charts/heatmap/heatmap.component';
 import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap';
 import { MetricViewComponent } from './_elements/metric-view/metric-view.component';
+import { SpinnerComponent } from './_elements/spinner/spinner.component';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -91,7 +92,8 @@ export function initializeApp(appConfig: Configuration) {
     HeatmapComponent,
     MetricViewComponent,
     LineChartComponent,
-    SaveExperimentDialogComponent
+    SaveExperimentDialogComponent,
+    SpinnerComponent
   ],
   imports: [
     BrowserModule,