Merge branch 'dev' into 'master'

Merge master

See merge request igrannonica/neuronstellar!27

52 files changed, 998 insertions, 440 deletions

diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts
index 732d1c56..766040a3 100644
--- a/frontend/src/app/_data/Dataset.ts
+++ b/frontend/src/app/_data/Dataset.ts
@@ -10,7 +10,7 @@ export default class Dataset {
         public accessibleByLink: boolean = false,
         public dateCreated: Date = new Date(),
         public lastUpdated: Date = new Date(),
-        public username: string = '',
+        public uploaderId: string = '',
         public delimiter: string = '',
         public hasHeader: boolean = true,
 
diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts
index 453f6ca0..95ef6e1e 100644
--- a/frontend/src/app/_data/Experiment.ts
+++ b/frontend/src/app/_data/Experiment.ts
@@ -1,3 +1,4 @@
+import { ProblemType } from "./Model";
 export default class Experiment {
     _id: string = '';
     uploaderId: string = '';
@@ -18,8 +19,8 @@ export default class Experiment {
         public randomTestSet: boolean = true,
         public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U
 
-        //TODO - za svaku kolonu se bira enkoding
-        public encoding: Encoding = Encoding.Label
+        public encodings: ColumnEncoding[] = [],
+        public type: ProblemType = ProblemType.Regression
     ) { }
 }
 
@@ -65,4 +66,12 @@ export enum Encoding {
     WOE = 'woe',
     Quantile = 'quantile'
     */
+}
+
+export class ColumnEncoding {
+    constructor (
+        public columnName: string,
+        public encoding: Encoding
+    ) 
+    {}
 }
\ No newline at end of file
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 8a85e296..7d383584 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -16,10 +16,10 @@ export default class Model {
         public inputNeurons: number = 1,
         public hiddenLayerNeurons: number = 1,
         public hiddenLayers: number = 1,
-        public batchSize: number = 5,
+        public batchSize: number = 4,
         public hiddenLayerActivationFunctions: string[] = ['sigmoid'],
         public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
-        public username: string = '',
+        public uploaderId: string = '',
         public metrics: string[] = [], // TODO add to add-model form
         public epochs: number = 5 // TODO add to add-model form
     ) { }
@@ -73,7 +73,7 @@ export enum LossFunction {
     HingeLoss = 'hinge_loss',
     // multi-class classification loss functions
     CategoricalCrossEntropy = 'categorical_crossentropy',
-    SparseCategoricalCrossEntropy = 'sparse_categorical_crosentropy',
+    SparseCategoricalCrossEntropy = 'sparse_categorical_crossentropy',
     KLDivergence = 'kullback_leibler_divergence',
 
     // regression loss functions
@@ -94,8 +94,8 @@ export enum LossFunctionBinaryClassification {
     HingeLoss = 'hinge_loss',
 }
 export enum LossFunctionMultiClassification {
-    CategoricalCrossEntropy = 'categorical_crossentropy',
-    SparseCategoricalCrossEntropy = 'sparse_categorical_crosentropy',
+    //CategoricalCrossEntropy = 'categorical_crossentropy',
+    SparseCategoricalCrossEntropy = 'sparse_categorical_crossentropy',
     KLDivergence = 'kullback_leibler_divergence',
 }
 
diff --git a/frontend/src/app/_data/Notification.ts b/frontend/src/app/_data/Notification.ts
index c505d399..94a3be1d 100644
--- a/frontend/src/app/_data/Notification.ts
+++ b/frontend/src/app/_data/Notification.ts
@@ -1,5 +1,4 @@
 export default class Notification {
-    _id: string = '';
     constructor(
         public title: string = 'Treniranje u toku...',
         public id: string = '042',
diff --git a/frontend/src/app/_data/Predictor.ts b/frontend/src/app/_data/Predictor.ts
index 7e902eae..8aa2b6cb 100644
--- a/frontend/src/app/_data/Predictor.ts
+++ b/frontend/src/app/_data/Predictor.ts
@@ -7,6 +7,7 @@ export default class Predictor {
         public output: string = '',
         public isPublic: boolean = false,
         public accessibleByLink: boolean = false,
-        public dateCreated: Date = new Date()
+        public dateCreated: Date = new Date(),
+        public uploaderId: string = ''
     ) { }
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html
index bff8b022..e5d4cd23 100644
--- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html
+++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html
@@ -2,48 +2,54 @@
     <div class="col-2">
     </div>
     <div class="col-3">
-      <label for="name" class="col-form-label">Naziv dataseta:</label>
-      <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name">
+        <label for="name" class="col-form-label">Naziv dataseta:</label>
+        <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name">
 
-      <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
-      <div>
-        <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea>
-      </div>
+        <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+        <div>
+            <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea>
+        </div>
 
-      <label for="checkboxIsPublic" class="form-check-label mt-3 mb-1">Želite li da dataset bude javan?
+        <label for="checkboxIsPublic" class="form-check-label mt-3 mb-1">Želite li da dataset bude javan?
         <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.isPublic" (change)="checkAccessible()" type="checkbox"
           value="" id="checkboxIsPublic">
-      </label>    
-      
-      <label for="checkboxAccessibleByLink" class="form-check-label">Želite li da bude deljiv linkom? &nbsp;
+        </label>
+
+        <label for="checkboxAccessibleByLink" class="form-check-label">Želite li da bude deljiv linkom? &nbsp;
         <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.accessibleByLink" type="checkbox"
           value="" id="checkboxAccessibleByLink">
       </label>
     </div>
     <div class="col-1">
     </div>
-    <div class="col-4 mt-4">
+    <div class="col-3 mt-4">
 
-      <input list="delimiterOptions" placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2"
-        [(ngModel)]="dataset.delimiter" (input)="update()">
-      <datalist id="delimiterOptions">
+        <label for="type" class="col-form-label">Izaberite delimiter za .csv fajl</label>
+        <select id="delimiterOptions" class="form-select" name="type" [(ngModel)]="dataset.delimiter" (change)="update()">
+            <option
+                *ngFor="let option of delimiterOptions">
+                {{ option }}
+            </option>
+        </select>
+        <!--
+        <input list="delimiterOptions" placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" [(ngModel)]="dataset.delimiter" (input)="update()">
+        <datalist id="delimiterOptions">
         <option *ngFor="let option of delimiterOptions">{{option}}</option>
       </datalist>
-
-      <label for="type" class="form-check-label my-5">Da li .csv ima header?
+-->
+        <label for="type" class="form-check-label my-5">Da li .csv ima header?
         <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="dataset.hasHeader" type="checkbox"
           value="" id="checkboxHeader" checked>
       </label>
-      <br>
-      <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)"
-        accept=".csv">
+        <br>
+        <input id="fileInput" class="form-control btn-lg" type="file" class="upload" (change)="changeListener($event)" accept=".csv">
     </div>
 </div>
 
 <div class="px-5 mt-5">
-  <app-datatable [tableData]="tableData"></app-datatable>
+    <app-datatable [tableData]="tableData"></app-datatable>
 </div>
 
 <div class="d-flex flex-row align-items-center justify-content-center w-100 my-2">
-  <button (click)="uploadDataset()" class="btn btn-lg col-4" style="background-color:#003459; color:white;">Dodaj izvor podataka</button>
-</div>
+    <button (click)="uploadDataset()" class="btn btn-lg col-4" style="background-color:#003459; color:white;">Dodaj izvor podataka</button>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts
index 6ff108ce..1f395105 100644
--- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts
+++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts
@@ -13,10 +13,9 @@ import { CsvParseService } from 'src/app/_services/csv-parse.service';
 })
 export class AddNewDatasetComponent {
 
-  @Output() newDatasetAdded = new EventEmitter<string>();
   @ViewChild(DatatableComponent) datatable!: DatatableComponent;
 
-  delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
+  delimiterOptions: Array<string> = [",", ";",  "|", "razmak", "novi red"]; //podrazumevano ","
 
   csvRecords: any[] = [];
   files: File[] = [];
@@ -29,6 +28,7 @@ export class AddNewDatasetComponent {
 
   constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private csv: CsvParseService) {
     this.dataset = new Dataset();
+    this.dataset.delimiter = ',';
   }
 
   //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo?
@@ -36,8 +36,6 @@ export class AddNewDatasetComponent {
   changeListener($event: any): void {
     this.files = $event.srcElement.files;
     if (this.files.length == 0 || this.files[0] == null) {
-      //console.log("NEMA FAJLA");
-      //this.loaded.emit("not loaded");
       this.tableData.hasInput = false;
       return;
     }
@@ -56,7 +54,7 @@ export class AddNewDatasetComponent {
     const fileReader = new FileReader();
     fileReader.onload = (e) => {
       if (typeof fileReader.result === 'string') {
-        const result = this.csv.csvToArray(fileReader.result, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter)
+        const result = this.csv.csvToArray(fileReader.result, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter)
 
         if (this.dataset.hasHeader)
           this.csvRecords = result.splice(0, 11);
@@ -90,10 +88,9 @@ export class AddNewDatasetComponent {
     this.modelsService.uploadData(this.files[0]).subscribe((file) => {
       //console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id);
       this.dataset.fileId = file._id;
-      this.dataset.username = shared.username;
+      this.dataset.uploaderId = shared.userId;
 
       this.datasetsService.addDataset(this.dataset).subscribe((dataset) => {
-        this.newDatasetAdded.emit("added");
         shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se procesira.");
       }, (error) => {
         shared.openDialog("Neuspeo pokušaj!", "Izvor podataka sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset.");
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
index 56a3b3c9..f244a882 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
@@ -1,40 +1,34 @@
 <div>
 
-  <!--Sklonjeno ucitavanje novog dataseta i sve opcije u vezi sa tim, premesteno u add-new-dataset-->
+    <!--Sklonjeno ucitavanje novog dataseta i sve opcije u vezi sa tim, premesteno u add-new-dataset-->
 
     <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5">
-        <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()"
-            [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}">
+        <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()" [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}">
             Izaberite dataset iz kolekcije
         </button>
         <h3 class="mt-3 mx-3">ili</h3>
-        <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()"
-            [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}">
+        <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()" [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}">
             Dodajte novi dataset
         </button>
     </div>
 
-  <div class="px-5 my-2">
-      <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga"
-          [(ngModel)]="term">
-  </div>
-  <div class="px-5" *ngIf="showMyDatasets">
+    <div class="px-5 my-2">
+        <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term">
+    </div>
+    <div class="px-5" *ngIf="showMyDatasets">
         <div class="overflow-auto" style="max-height: 500px;">
             <ul class="list-group">
-                <li class="list-group-item p-3" *ngFor="let dataset of myDatasets|filter:term"
-                    [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
-                    <app-item-dataset name="usersDataset" [dataset]="dataset"
-                        (click)="selectThisDataset(dataset);"></app-item-dataset>
+                <li class="list-group-item p-3" *ngFor="let dataset of myDatasets|filter:term" [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
+                    <app-item-dataset name="usersDataset" [dataset]="dataset" (click)="selectThisDataset(dataset);"></app-item-dataset>
                 </li>
             </ul>
         </div>
         <div class="px-5 mt-5">
             <app-datatable [tableData]="tableData"></app-datatable>
         </div>
-  </div>
+    </div>
 
-  <app-add-new-dataset [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset"
-      (newDatasetAdded)="refreshMyDatasets()">
-  </app-add-new-dataset>
+    <app-add-new-dataset [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset">
+    </app-add-new-dataset>
 
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
index 62cca456..be1dc097 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -8,6 +8,7 @@ import { DatasetsService } from 'src/app/_services/datasets.service';
 import { CsvParseService } from 'src/app/_services/csv-parse.service';
 import { Output, EventEmitter } from '@angular/core';
 import { SignalRService } from 'src/app/_services/signal-r.service';
+import { AuthService } from 'src/app/_services/auth.service';
 
 @Component({
   selector: 'app-dataset-load',
@@ -33,7 +34,15 @@ export class DatasetLoadComponent implements OnInit {
 
   term: string = "";
 
-  constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService, private signalRService: SignalRService) {
+  constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService, private signalRService: SignalRService, private authService: AuthService) {
+    this.fetchDatasets();
+
+    authService.loggedInEvent.subscribe(_ => {
+      this.fetchDatasets();
+    })
+  }
+
+  fetchDatasets() {
     this.datasets.getMyDatasets().subscribe((datasets) => {
       this.myDatasets = datasets;
     });
@@ -41,22 +50,17 @@ export class DatasetLoadComponent implements OnInit {
 
   viewMyDatasetsForm() {
     this.showMyDatasets = true;
-    this.resetSelectedDataset();
+    if (this.selectedDataset != undefined)
+      this.resetSelectedDataset();
     //this.resetCbsAndRbs();        //TREBA DA SE DESI
   }
   viewNewDatasetForm() {
     this.showMyDatasets = false;
-    this.resetSelectedDataset();
+    if (this.selectedDataset != undefined)
+      this.resetSelectedDataset();
     //this.resetCbsAndRbs();        //TREBA DA SE DESI
   }
 
-  refreshMyDatasets() {
-    this.datasets.getMyDatasets().subscribe((datasets) => {
-      this.myDatasets = datasets;
-      this.showMyDatasets = true;
-    });
-  }
-
   selectThisDataset(dataset: Dataset) {
     this.selectedDataset = dataset;
     this.selectedDatasetLoaded = false;
@@ -86,10 +90,19 @@ export class DatasetLoadComponent implements OnInit {
     return true;
   }
 
+  refreshMyDatasets(selectedDatasetId: string | null) {
+    this.datasets.getMyDatasets().subscribe((datasets) => {
+      this.myDatasets = datasets.reverse();
+      this.showMyDatasets = true; 
+      this.selectedDataset = this.myDatasets.filter(x => x._id == selectedDatasetId)[0];
+      this.resetSelectedDataset();
+    });
+  }
+
   ngOnInit(): void {
     if (this.signalRService.hubConnection) {
-      this.signalRService.hubConnection.on("NotifyDataset", _ => {
-        this.refreshMyDatasets();
+      this.signalRService.hubConnection.on("NotifyDataset", (dName: string, dId: string) => {
+        this.refreshMyDatasets(dId);
       });
     } else {
       console.warn("Dataset-Load: No connection!");
diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.html b/frontend/src/app/_elements/item-predictor/item-predictor.component.html
index 7ae26fd3..3199dcc8 100644
--- a/frontend/src/app/_elements/item-predictor/item-predictor.component.html
+++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.html
@@ -1,26 +1,35 @@
 <div class="card" style="min-width: 12rem;">
-    <div class="card-header">
-        {{predictor.name}}
+    <div class="card-header d-flex mb-2 justify-content-" style="padding: 0;margin: 0;">
+    
+        <div class=" p-2 float-left "><b   style="color: gray;">Prediktor</b></div> 
+        
     </div>
-    <div class="card-body">
+    <div class="card-body overflow-hidden">
+        <b style="color: gray;">Opis</b><hr  style="width: 20%;">
         <p class="card-text">
-            {{predictor.description}}
+           {{predictor.description}}
         </p>
-        <div class="d-flex flex-column align-items-center">
-            <table class="table table-bordered table-sm">
+        
+        <b style="color: gray;">Ulazne kolone</b>
+        <div style="overflow: scroll; overflow-y: hidden;">
+            
+            <table class="table table-bordered table-md" >
                 <thead>
-                    <th class="text-center" *ngFor="let column of predictor.inputs">{{column}}</th>
+                    <th scope="col" *ngFor="let column of predictor.inputs" >{{column}}</th> 
                 </thead>
             </table>
-            <mat-icon>arrow_downward</mat-icon>
-            <p>
-                {{predictor.output}}
-            </p>
+        </div>
+        <b style="color: gray;">Izlazna kolona: </b><b>{{predictor.output}}</b>
+        <hr>
+        <div>
+            <table>
+                <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;">   <b> Kreirano</b></span></td><td>{{predictor.dateCreated |date}}</td></tr> 
+            </table> 
         </div>
     </div>
     <div class="card-footer text-center">
-        <button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
+        <button class="btn btn-md col-4" style="background-color:#003459; color:white;"
         (click)="openPredictor();">Iskoristi</button>
-        <!--<a routerLink="/predict" mat-raised-button color="primary">Iskoristi</a>-->
+       
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.css b/frontend/src/app/_elements/line-chart/line-chart.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.css
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.html b/frontend/src/app/_elements/line-chart/line-chart.component.html
new file mode 100644
index 00000000..c8f406f4
--- /dev/null
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.html
@@ -0,0 +1,5 @@
+<div class="chart-wrapper">
+    <canvas  id="myChart">
+        
+    </canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.spec.ts b/frontend/src/app/_elements/line-chart/line-chart.component.spec.ts
new file mode 100644
index 00000000..0c5e7ef5
--- /dev/null
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LineChartComponent } from './line-chart.component';
+
+describe('LineChartComponent', () => {
+  let component: LineChartComponent;
+  let fixture: ComponentFixture<LineChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LineChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LineChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.ts b/frontend/src/app/_elements/line-chart/line-chart.component.ts
new file mode 100644
index 00000000..1a8579a0
--- /dev/null
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.ts
@@ -0,0 +1,88 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { Chart } from 'chart.js';
+
+@Component({
+  selector: 'app-line-chart',
+  templateUrl: './line-chart.component.html',
+  styleUrls: ['./line-chart.component.css']
+})
+
+export class LineChartComponent implements OnInit {
+
+  dataAcc: number[] = [];
+  dataMAE: number[] = [];
+  dataMSE: number[] = [];
+  dataLOSS: number[] = [];
+
+  dataEpoch: number[] = [];
+
+  constructor() {
+    /*let i = 0;
+    setInterval(() => {
+      this.dataAcc.push(0.5);
+      this.dataEpoch.push(i);
+      i++;
+      this.update();
+    }, 200);*/
+  }
+
+  myChart!: Chart;
+
+  update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: 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.dataLOSS.length = 0;
+    this.dataLOSS.push(...myLoss);
+
+    this.dataMSE.length = 0;
+    this.dataMSE.push(...myMse);
+
+    this.myChart.update();
+  }
+
+  ngOnInit(): void {
+    this.myChart = new Chart("myChart",
+      {
+        type: 'line',
+        data: {
+          labels: this.dataEpoch,
+          datasets: [{
+            label: 'Accuracy',
+            data: this.dataAcc,
+            borderWidth: 1
+          },
+          {
+            label: 'Loss',
+            data: this.dataLOSS,
+            borderWidth: 1
+          },
+          {
+            label: 'MAE',
+            data: this.dataMAE,
+            borderWidth: 1
+          },
+          {
+            label: 'MSE',
+            data: this.dataMSE,
+            borderWidth: 1
+          }
+          ]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        }
+      }
+    );
+  }
+}
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.css b/frontend/src/app/_elements/metric-view/metric-view.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.css
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html
new file mode 100644
index 00000000..e7a4c547
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.html
@@ -0,0 +1,5 @@
+<div>
+    <app-line-chart>
+
+    </app-line-chart>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts b/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts
new file mode 100644
index 00000000..c3ecc67f
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetricViewComponent } from './metric-view.component';
+
+describe('MetricViewComponent', () => {
+  let component: MetricViewComponent;
+  let fixture: ComponentFixture<MetricViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MetricViewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetricViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts
new file mode 100644
index 00000000..9193a0e5
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts
@@ -0,0 +1,49 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { SignalRService } from 'src/app/_services/signal-r.service';
+import { LineChartComponent } from '../line-chart/line-chart.component';
+@Component({
+  selector: 'app-metric-view',
+  templateUrl: './metric-view.component.html',
+  styleUrls: ['./metric-view.component.css']
+})
+export class MetricViewComponent implements OnInit {
+  @ViewChild(LineChartComponent) linechartComponent!: LineChartComponent;
+
+  @Input() history!: any[];
+
+  constructor(private signalRService: SignalRService) { }
+
+  ngOnInit(): void {
+  }
+
+  update(history: any[]) {
+    const myAcc: number[] = [];
+    const myMae: number[] = [];
+    const myMse: number[] = [];
+    const myLoss: number[] = [];
+
+    const myEpochs: number[] = [];
+    this.history = history;
+    this.history.forEach((metrics, epoch) => {
+      myEpochs.push(epoch + 1);
+      for (let key in metrics) {
+        let value = metrics[key];
+        console.log(key, ':::', value, epoch);
+        if (key === 'accuracy') {
+          myAcc.push(parseFloat(value));
+        }
+        else if (key === 'loss') {
+          myLoss.push(parseFloat(value));
+        }
+        else if (key === 'mae') {
+          myMae.push(parseFloat(value));
+        }
+        else if (key === 'mse') {
+          myMse.push(parseFloat(value));
+        }
+      }
+    });
+
+    this.linechartComponent.update(myEpochs, myAcc, myLoss, myMae, myMse);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html
index f40ea476..1f9852d1 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ b/frontend/src/app/_elements/model-load/model-load.component.html
@@ -1,12 +1,10 @@
 <div>
     <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5">
-        <button type="button" id="btnMyModel" class="btn" (click)="viewMyModelsForm()"
-            [ngClass]="{'btnType1': showMyModels, 'btnType2': !showMyModels}">
+        <button type="button" id="btnMyModel" class="btn" (click)="viewMyModelsForm()" [ngClass]="{'btnType1': showMyModels, 'btnType2': !showMyModels}">
             Izaberite model iz kolekcije
         </button>
         <h3 class="mt-3 mx-3">ili</h3>
-        <button type="button" id="btnNewModel" class="btn" (click)="viewNewModelForm()"
-            [ngClass]="{'btnType1': !showMyModels, 'btnType2': showMyModels}">
+        <button type="button" id="btnNewModel" class="btn" (click)="viewNewModelForm()" [ngClass]="{'btnType1': !showMyModels, 'btnType2': showMyModels}">
             Dodajte novi model
         </button>
     </div>
@@ -17,8 +15,7 @@
     <div *ngIf="showMyModels" class="px-5">
         <div class="overflow-auto" style="max-height: 500px;">
             <ul class="list-group">
-                <li class="list-group-item p-3" *ngFor="let model of myModels|filter:term"
-                    [ngClass]="{'selectedModelClass': this.selectedModel == model}">
+                <li class="list-group-item p-3" *ngFor="let model of myModels|filter:((forExperiment != undefined) ? forExperiment.type : '')" [ngClass]="{'selectedModelClass': this.selectedModel == model}">
                     <app-item-model name="usersModel" [model]="model" (click)="selectThisModel(model);">
                     </app-item-model>
                 </li>
@@ -43,11 +40,7 @@
                     <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
                 </div>
             </div>
-            <div class="col-2">
-                <label for="dateCreated" class="col-form-label">Datum:</label> &nbsp;&nbsp;
-                <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--"
-                    value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
-            </div>
+
         </div>
         <h2 class="mt-5 mb-4 mx-5">Parametri treniranja modela:</h2>
         <div>
@@ -58,8 +51,7 @@
                     <label for="type" class="col-form-label">Tip problema: </label>
                 </div>
                 <div class="col-2">
-                    <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type"
-                        (change)="filterOptions()">
+                    <select id="typeOptions" class="form-select" name="type" [(ngModel)]="newModel.type" (change)="filterOptions()">
                         <option
                             *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
                             [value]="option">
@@ -72,10 +64,7 @@
                     <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
                 </div>
                 <div class="col-1">
-                    <input type="number" min="1" class="form-control" name="hiddenLayers"
-                        [(ngModel)]="newModel.hiddenLayers"
-                        (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])"
-                        (ngModelChange)="updateGraph()">
+                    <input type="number" min="1" class="form-control" name="hiddenLayers" [(ngModel)]="newModel.hiddenLayers" (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" (ngModelChange)="updateGraph()">
                 </div>
             </div>
 
@@ -86,7 +75,7 @@
                     <label for="optimizer" class="col-form-label">Optimizacija: </label>
                 </div>
                 <div class="col-2">
-                    <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer">
+                    <select id="optimizerOptions" class="form-select" name="optimizer" [(ngModel)]="newModel.optimizer">
                         <option
                             *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
                             [value]="option">
@@ -100,19 +89,17 @@
                     <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label>
                 </div>
                 <div class="col-1">
-                    <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
-                        [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()">
+                    <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()">
                 </div>
             </div>
 
             <div class="row p-2">
                 <div class="col-1"></div>
                 <div class="col-3">
-                    <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label>
+                    <label for="lossFunction" class="col-form-label">Funkcija troška: </label>
                 </div>
                 <div class="col-2">
-                    <select id=lossFunctionOptions class="form-control" name="lossFunction"
-                        [(ngModel)]="newModel.lossFunction" aria-checked="true">
+                    <select id="lossFunctionOptions" class="form-select" name="lossFunction" [(ngModel)]="newModel.lossFunction" aria-checked="true">
                         <option
                             *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
                             [value]="option">
@@ -122,10 +109,22 @@
                 </div>
                 <div class="col-1"></div>
                 <div class="col-3">
-                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
+                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji:&nbsp;<b>{{newModel.batchSize}}</b><br>(izaberite stepen dvojke)</label>
                 </div>
                 <div class="col-1">
-                    <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
+
+                    <input type="number" min="0" step="1" max="7" class="form-control" name="batchSizePower" [(ngModel)]="batchSizePower" (click)="updateBatchSize()">
+
+                </div>
+
+                <div class="row p-2">
+                    <div class="col-1"></div>
+                    <div class="col-3 m-1">
+                        <label for="epochs" class="col-form-label">Broj epoha: </label>
+                    </div>
+                    <div class="col-1">
+                        <input type="number" min="1" max="1000" class="form-control" name="epochs" [(ngModel)]="newModel.epochs">
+                    </div>
                 </div>
             </div>
 
@@ -138,8 +137,7 @@
             <div class="row p-2" style="align-self: center;">
                 <div class="col-1"></div>
                 <div class="col-3">
-                    <label for="hiddenLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija aktivacije<br>skrivenih slojeva:</label>
+                    <label for="hiddenLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija aktivacije<br>skrivenih slojeva:</label>
                 </div>
                 <div class="col-2 mt-2">
                     <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index">
@@ -147,8 +145,7 @@
                             <div class="input-group-prepend">
                                 <span class="input-group-text">#{{i+1}}</span>
                             </div>
-                            <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-control"
-                                [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]">
+                            <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-select" [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]">
                                 <option
                                     *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
                                     [value]="option">
@@ -160,12 +157,10 @@
                 </div>
                 <div class="col-1"></div>
                 <div class="col-2">
-                    <label for="outputLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label>
+                    <label for="outputLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label>
                 </div>
                 <div class="col-2 mt-2">
-                    <select id=outputLayerActivationFunctionOptions class="form-control"
-                        name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
+                    <select id="outputLayerActivationFunctionOptions" class="form-select" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
                         <option
                             *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
                             [value]="option">
@@ -178,26 +173,23 @@
             </div>
         </div>
 
-        <div class="form-check form-check-inline overflow-auto m-4" style="width: max-content;">
+        <!--<div class="form-check form-check-inline overflow-auto m-4" style="width: max-content;">
             <h3>Izaberite metrike:</h3>
             <div id="divMetricsinput" class="mt-2 mx-5">
 
-                <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) "
-                    class="form-check form-check-inline">
+                <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) " class="form-check form-check-inline">
 
-                    <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}"
-                        id="metrics_{{option}}" style="float: left;" checked>
+                    <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}" id="metrics_{{option}}" style="float: left;" checked>
                     <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2">
                         {{optionName}}
                     </label>
                 </div>
             </div>
-        </div>
-        
+        </div>-->
+
         <div class="form-group row mt-3 mb-3">
             <div class="col"></div>
-            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
-                (click)="uploadModel();">Sačuvaj
+            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="uploadModel();">Sačuvaj
                 model</button>
             <div class="col"></div>
         </div>
diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts
index 745dc12e..fb4b3fd0 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ b/frontend/src/app/_elements/model-load/model-load.component.ts
@@ -1,7 +1,10 @@
-import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, ViewChild, Output, EventEmitter, Input } from '@angular/core';
 import Shared from 'src/app/Shared';
+import Experiment from 'src/app/_data/Experiment';
 import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
+import { AuthService } from 'src/app/_services/auth.service';
 import { ModelsService } from 'src/app/_services/models.service';
+import { SignalRService } from 'src/app/_services/signal-r.service';
 import { GraphComponent } from '../graph/graph.component';
 
 
@@ -13,6 +16,7 @@ import { GraphComponent } from '../graph/graph.component';
 export class ModelLoadComponent implements OnInit {
 
   @ViewChild(GraphComponent) graph!: GraphComponent;
+  @Input() forExperiment?: Experiment;
   @Output() selectedModelChangeEvent = new EventEmitter<Model>();
 
   newModel: Model = new Model();
@@ -29,21 +33,44 @@ export class ModelLoadComponent implements OnInit {
   shared = Shared;
 
   term: string = "";
-  selectedProblemType: string = '';
   selectedMetrics = [];
   lossFunction: any = LossFunction;
 
   showMyModels: boolean = true;
 
-  constructor(private modelsService: ModelsService) {
+  batchSizePower: number = 2;
+
+  constructor(private modelsService: ModelsService, private authService: AuthService) {
+    //console.log("forExperiment = ", this.forExperiment);
+    this.fetchModels();
+
+    this.authService.loggedInEvent.subscribe(_ => {
+      this.fetchModels();
+    })
+  }
+
+  fetchModels(andSelectWithId: string | null = '') {
+    //if (this.forExperiment == undefined) {
     this.modelsService.getMyModels().subscribe((models) => {
-      this.myModels = models;
+      this.myModels = models.reverse();
+      this.selectThisModel(this.myModels.filter(x => x._id == andSelectWithId)[0]);
     });
+    /*}
+    else {
+      this.modelsService.getMyModelsByType(ProblemType.Regression).subscribe((models) => {
+        this.myModels = models;
+        //console.log("modeli po tipu: ", this.myModels);
+      });
+    }*/
   }
 
   ngOnInit(): void {
   }
 
+  updateBatchSize() {
+    this.newModel.batchSize = 2 ** this.batchSizePower;
+  }
+
   updateGraph() {
     this.graph.update();
   }
@@ -62,12 +89,17 @@ export class ModelLoadComponent implements OnInit {
   uploadModel() {
     this.getMetrics();
 
-    this.newModel.username = Shared.username;
+    this.newModel.uploaderId = Shared.userId;
 
     this.modelsService.addModel(this.newModel).subscribe((response) => {
-      Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.');
-      // treba da se selektuje nov model u listi modela
-      //this.selectedModel = 
+      console.log(this.newModel);
+      //Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.');
+
+      Shared.openYesNoDialog("Model dodat", "Model je uspešno dodat u bazu. Da li želite da nastavite treniranje sa dodatim modelom?", () => {
+        this.fetchModels(response._id);
+        this.showMyModels = true;
+      });
+      this.fetchModels();
     }, (error) => {
       Shared.openDialog('Greška', 'Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom.');
     });
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html
index 7d0c4cd8..1988b834 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.html
+++ b/frontend/src/app/_elements/navbar/navbar.component.html
@@ -6,31 +6,25 @@
             </a>
 
             <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
-                <li><a routerLink="" class="nav-link px-2"
-                        [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li>
-                <li><a routerLink="experiment" class="nav-link px-2"
-                        [class]="(currentUrl === '/experiment') ? 'text-secondary' : 'text-white'">Napravi eksperiment</a>
+                <li><a routerLink="" class="nav-link px-2" [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li>
+                <li><a routerLink="experiment" class="nav-link px-2" [class]="(currentUrl === '/experiment') ? 'text-secondary' : 'text-white'">Napravi eksperiment</a>
                 </li>
-                <li><a routerLink="training" class="nav-link px-2"
-                        [class]="(currentUrl === '/training') ? 'text-secondary' : 'text-white'">Treniraj model</a>
+                <li><a routerLink="training" class="nav-link px-2" [class]="(currentUrl === '/training') ? 'text-secondary' : 'text-white'">Treniraj model</a>
                 </li>
-                <li><a routerLink="my-predictors" class="nav-link px-2"
-                        [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a>
+                <li><a routerLink="my-predictors" class="nav-link px-2" [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a>
                 </li>
             </ul>
 
             <div *ngIf="shared.loggedIn" class="dropdown text-end">
-                <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1"
-                    data-bs-toggle="dropdown" aria-expanded="false">
-                    <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32"
-                        class="rounded-circle">
+                <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
+                    <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" class="rounded-circle">
                 </a>
-                <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1"
-                    style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);"
-                    data-popper-placement="bottom-end">
-                    <li><a class="dropdown-item" routerLink="add-model">Nov model...</a></li>
-                    <li><a class="dropdown-item" routerLink="settings">Podešavanja</a></li>
+                <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" data-popper-placement="bottom-end">
+                    <li><a class="dropdown-item" routerLink="my-datasets">Moji izvori podataka</a></li>
+                    <li><a class="dropdown-item" routerLink="my-models">Moji modeli</a></li>
+                    <li><a class="dropdown-item" routerLink="my-predictors">Moji prediktori</a></li>
                     <li><a class="dropdown-item" routerLink="profile">Moj profil</a></li>
+                    <li><a class="dropdown-item" routerLink="settings" disabled>Podešavanja</a></li>
                     <li>
                         <hr class="dropdown-divider">
                     </li>
@@ -38,12 +32,10 @@
                 </ul>
             </div>
             <div *ngIf="!shared.loggedIn" class="dropdown text-end">
-                <button type="button" mat-raised-button color="primary" class="mx-2" data-bs-toggle="modal"
-                    data-bs-target="#modalForLogin">
+                <button type="button" mat-raised-button color="primary" class="mx-2" data-bs-toggle="modal" data-bs-target="#modalForLogin">
                     Prijavi se
                 </button>
-                <button type="button" mat-raised-button color="primary" data-bs-toggle="modal"
-                    data-bs-target="#modalForRegister">
+                <button type="button" mat-raised-button color="primary" data-bs-toggle="modal" data-bs-target="#modalForRegister">
                     Registruj se
                 </button>
             </div>
diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts
index 368508ed..d5d1744f 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.ts
+++ b/frontend/src/app/_elements/navbar/navbar.component.ts
@@ -4,6 +4,7 @@ import { AuthService } from '../../_services/auth.service';
 import shared from 'src/app/Shared';
 import { UserInfoService } from 'src/app/_services/user-info.service';
 import { MatDialog } from '@angular/material/dialog';
+import { SignalRService } from 'src/app/_services/signal-r.service';
 
 @Component({
   selector: 'app-navbar',
@@ -15,11 +16,15 @@ export class NavbarComponent implements OnInit {
   currentUrl: string;
   shared = shared;
 
-  constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService, private matDialog: MatDialog) {
+  constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService, private matDialog: MatDialog, private signalRService: SignalRService) {
     shared.dialog = matDialog;
     this.currentUrl = this.location.path();
     this.location.onUrlChange(() => {
       this.currentUrl = this.location.path();
+    });
+
+    this.auth.loggedInEvent.subscribe(_ => {
+      this.signalRService.startConnection();
     })
   }
 
@@ -34,5 +39,6 @@ export class NavbarComponent implements OnInit {
 
   logOut() {
     this.auth.logOut();
+    this.signalRService.stopConnection();
   }
 }
diff --git a/frontend/src/app/_elements/notifications/notifications.component.html b/frontend/src/app/_elements/notifications/notifications.component.html
index ef897cfc..3b2f4eaa 100644
--- a/frontend/src/app/_elements/notifications/notifications.component.html
+++ b/frontend/src/app/_elements/notifications/notifications.component.html
@@ -11,14 +11,18 @@
         </button>
     </h2>
 
-    <div id="collapseNotifs" class="collapse show">
+    <div id="collapseNotifs" class="collapse show overflow-auto" style="max-height: 32rem;">
         <div *ngFor="let notification of notifications" class="p-2 m-1 border rounded">
-            <div class="d-flex flex-row">
-                <p>{{notification.title}}</p>
-            </div>
-            <div *ngIf="notification.hasProgress" class="border-3 border-primary bg-dark m-1" style="height: 5px; margin-top: -10px !important;">
-                <div class="bg-primary" style="height: 5px;" [style]="'width: '+(notification.progress*100)+'%;'">
+            <div class="d-flex flex-row ">
+                <div>
+                    <p>{{notification.title}}</p>
+                    <div *ngIf="notification.hasProgress" class="border-3 border-primary bg-dark m-1" style="height: 5px; margin-top: -10px !important; min-width: 12rem;">
+                        <div class="bg-primary" style="height: 5px;" [style]="'width: '+(notification.progress*100)+'%;'">
+                        </div>
+                    </div>
                 </div>
+                <button type="button" class="btn-close ms-auto align-self-center" aria-label="Close" (click)="removeNotification(notification);"></button>
             </div>
+
         </div>
     </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts
index e199f70a..f324662a 100644
--- a/frontend/src/app/_elements/notifications/notifications.component.ts
+++ b/frontend/src/app/_elements/notifications/notifications.component.ts
@@ -21,13 +21,33 @@ export class NotificationsComponent implements OnInit {
         this.notifications.push(new Notification(`Obrađen izvor podataka: ${dName}`, dId, 1.0, false));
       });
 
-      this.signalRService.hubConnection.on("NotifyEpoch", (epoch: string, mName: string, mId: string, numEpochs) => {
-        //todo epoch
-        this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, 0.5));
+      this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
+        const existingNotification = this.notifications.find(x => x.id === mId)
+        const progress = ((currentEpoch + 1) / totalEpochs);
+        //console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch);
+        if (!existingNotification)
+          this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true));
+        else {
+          existingNotification.progress = progress;
+        }
+      });
+
+      this.signalRService.hubConnection.on("NotifyModel", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
+        const existingNotification = this.notifications.find(x => x.id === mId)
+        const progress = ((currentEpoch + 1) / totalEpochs);
+        if (!existingNotification)
+          this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true));
+        else {
+          existingNotification.progress = progress;
+        }
       });
     } else {
       console.warn("Notifications: No connection!");
     }
   }
 
+  removeNotification(notification: Notification) {
+    this.notifications.splice(this.notifications.indexOf(notification), 1);
+  }
+
 }
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 06e74093..572e8c4c 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,8 +1,8 @@
 <h2 mat-dialog-title class="text-muted">{{data.title}}</h2>
 <div mat-dialog-content class="mt-4" style="color: rgb(81, 76, 76);">
-  {{data.message}}
+    {{data.message}}
 </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 mat-button cdkFocusInitial (click)="onYesClick()" class="btn-lg" style="background-color: #003459; color:white;">Da</button>
+    <button mat-button cdkFocusInitial (click)="onNoClick()" class="btn-lg" style="background-color: lightgray;">Ne</button>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
index c83bf208..66b3755e 100644
--- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
+++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
@@ -33,7 +33,7 @@ export class FilterDatasetsComponent implements OnInit {
     newDataset._id = "";
     newDataset.isPublic = false;
     newDataset.lastUpdated = new Date();
-    newDataset.username = decodedToken.name;
+    newDataset.uploaderId = decodedToken.uploaderId;
     let name=prompt("Unesite naziv dataset-a",newDataset.name);
     newDataset.name=name as string;
     if(name!=null && name!="")
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index 08f95a69..f5e94d27 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -53,4 +53,5 @@
     <app-carousel [items]="publicPredictors" [type]="'Predictor'">
     </app-carousel>
     <h3><a routerLink="browse-predictors">Pogledaj sve javne trenirane modele...</a></h3>
+
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/my-models/my-models.component.html b/frontend/src/app/_pages/my-models/my-models.component.html
index b0e9c4ef..9b281239 100644
--- a/frontend/src/app/_pages/my-models/my-models.component.html
+++ b/frontend/src/app/_pages/my-models/my-models.component.html
@@ -15,7 +15,7 @@
                 <div class="panel-footer row"><!-- panel-footer -->
                     <div class="col-xs-6 text-center">
                         <div>
-                            <button type="button" class="btn btn-default btn-lg"style="min-width: 7rem;float: left;" (click)="deleteThisModel(model)" mat-raised-button color="primary">Koristi
+                            <button type="button" class="btn btn-default btn-lg"style="min-width: 7rem;float: left;" (click)="useThisModel(model)" mat-raised-button color="primary">Koristi
                                 <span class="glyphicon glyphicon-search"></span>
                             </button>
                             <button (click)="deleteThisModel(model)" mat-raised-button color="warn" style="min-width: 7rem;float: right" ><mat-icon>delete</mat-icon></button>
diff --git a/frontend/src/app/_pages/my-models/my-models.component.ts b/frontend/src/app/_pages/my-models/my-models.component.ts
index 92d3fbaa..d379fa69 100644
--- a/frontend/src/app/_pages/my-models/my-models.component.ts
+++ b/frontend/src/app/_pages/my-models/my-models.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import shared from 'src/app/Shared';
 import Model from 'src/app/_data/Model';
 import { ModelsService } from 'src/app/_services/models.service';
@@ -12,7 +13,7 @@ export class MyModelsComponent implements OnInit {
   myModels: Model[] = [];
   //myModel: Model;
 
-  constructor(private modelsS : ModelsService) {
+  constructor(private modelsS : ModelsService, private router : Router) {
 
     
 
@@ -44,6 +45,11 @@ deleteThisModel(model: Model): void{
 }
 
 
+useThisModel(model: Model): void{
+
+  this.router.navigate(['/training'])
+  
+}
   getAllMyModels(): void{
     this.modelsS.getMyModels().subscribe(m => {
       this.myModels = m;
diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.html b/frontend/src/app/_pages/my-predictors/my-predictors.component.html
index d38f93e4..31fa786c 100644
--- a/frontend/src/app/_pages/my-predictors/my-predictors.component.html
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.html
@@ -1,16 +1,23 @@
 <div id="header">
     <h1>Trenirani modeli</h1>
 </div>
-<div id="container" style="background-color:rgba(255, 255, 255, 0.8);">
-<div class="row" *ngFor="let predictor of predictors">
-    <div class="left">
-        <app-item-predictor [predictor]="predictor"></app-item-predictor>
-    </div>
-    <div>
-        <button (click)="delete(predictor)" mat-raised-button color="warn" style="min-width: 15rem;float: right" ><mat-icon>delete</mat-icon></button>
-    </div>
-    
+<div id="wrapper">
+<div id="container" class="container p-5" style="background-color:rgba(255, 255, 255, 0.8); min-height: 100%;">
+    <div class="row mt-3 mb-2 d-flex justify-content-center">
+        
+        <div class="col-sm-6" style="margin-bottom: 10px;">
+        </div>
+        <div class="row">
+            <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let predictor of predictors">
+                <app-item-predictor [predictor]="predictor"></app-item-predictor>
+                <div>
+                    <button (click)="deleteThisPredictor(predictor)" mat-raised-button color="warn" style="min-width: 10rem;float: right" ><mat-icon>delete</mat-icon></button>
+                </div>
+            </div>
+        </div>
+</div>
 </div>
-
 </div>
 
+
+
diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
index 17c496fd..4dc5300d 100644
--- a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
+++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import Predictor from 'src/app/_data/Predictor';
 import { PredictorsService } from 'src/app/_services/predictors.service';
-
+import shared from 'src/app/Shared';
 @Component({
   selector: 'app-my-predictors',
   templateUrl: './my-predictors.component.html',
@@ -12,28 +12,30 @@ export class MyPredictorsComponent implements OnInit {
   constructor(private predictorsS : PredictorsService) {
   }
   ngOnInit(): void {
-    this.getAllMyPredictors();
-
+    this.predictorsS.getMyPredictors().subscribe((response) => {
+      this.predictors = response;
+    }, (error) => {
+      if (error.error == "Predictor with...") {
+        shared.openDialog("Greska", "Greska");
+      }
+    });
   }
 
-  delete(predictor: Predictor){
-    if(window.confirm("IZABRANI MODEL ĆE BITI IZBRISAN"))
-      {
-      this.predictorsS.deletePredictor(predictor).subscribe((response) => {
-        this.getAllMyPredictors();
-      }, (error) =>{
-          if (error.error == "Predictor with name = {name} deleted") {
-            alert("Greška pri brisanju modela!");
-          }
-        });
-    }
-    
-    
+  deleteThisPredictor(predictor: Predictor): void{
+    shared.openYesNoDialog('Brisanje prediktora','Da li ste sigurni da želite da obrišete prediktor?',() => {
+    this.predictorsS.deletePredictor(predictor).subscribe((response) => {
+      this.getAllMyPredictors();
+    }, (error) =>{
+        if (error.error == "Predictor with name = {name} deleted") {
+          shared.openDialog("Obaveštenje", "Greška prilikom brisanja prediktora.");
+        }
+      });
+    });
   }
 
   getAllMyPredictors(): void{
-    this.predictorsS.getMyPredictors().subscribe(m => {
-      this.predictors = m;
+    this.predictorsS.getMyPredictors().subscribe(p => {
+      this.predictors = p;
     });
   }
 
diff --git a/frontend/src/app/_services/auth.service.ts b/frontend/src/app/_services/auth.service.ts
index 92cebe7f..9e3f9f2f 100644
--- a/frontend/src/app/_services/auth.service.ts
+++ b/frontend/src/app/_services/auth.service.ts
@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { EventEmitter, Injectable } from '@angular/core';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { JwtHelperService } from '@auth0/angular-jwt';
 import { CookieService } from 'ngx-cookie-service';
@@ -12,6 +12,8 @@ const jwtHelper = new JwtHelperService();
 })
 export class AuthService {
 
+  public loggedInEvent: EventEmitter<boolean> = new EventEmitter();
+
   shared = shared;
 
   constructor(private http: HttpClient, private cookie: CookieService) { }
@@ -44,6 +46,7 @@ export class AuthService {
 
   enableAutoRefresh() {
     this.lastToken = this.cookie.get('token');
+    clearTimeout(this.refresher);
     let exp = jwtHelper.getTokenExpirationDate(this.lastToken);
     if (!exp) {
       exp = new Date();
@@ -51,6 +54,7 @@ export class AuthService {
     var property = jwtHelper.decodeToken(this.cookie.get('token'));
     var username = property['name'];
     if (username != "") {
+
       this.refresher = setTimeout(() => {
         this.http.post(`${Configuration.settings.apiURL}/auth/renewJwt`, {}, { headers: this.authHeader(), responseType: 'text' }).subscribe((response) => {
           this.authenticate(response);
@@ -79,6 +83,7 @@ export class AuthService {
     }
     this.cookie.set('token', token, exp);
     this.updateUser();
+    this.loggedInEvent.emit(true);
   }
 
   updateUser() {
diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts
index c3281be6..b2272f0a 100644
--- a/frontend/src/app/_services/datasets.service.ts
+++ b/frontend/src/app/_services/datasets.service.ts
@@ -29,10 +29,10 @@ export class DatasetsService {
   }
 
   editDataset(dataset: Dataset): Observable<Dataset> {
-    return this.http.put<Dataset>(`${Configuration.settings.apiURL}/dataset/`, dataset, { headers: this.authService.authHeader() });
+    return this.http.put<Dataset>(`${Configuration.settings.apiURL}/dataset/` + dataset._id, dataset, { headers: this.authService.authHeader() });
   }
 
   deleteDataset(dataset: Dataset) {
-    return this.http.delete(`${Configuration.settings.apiURL}/dataset/` + dataset.name, { headers: this.authService.authHeader(), responseType: "text" });
+    return this.http.delete(`${Configuration.settings.apiURL}/dataset/` + dataset._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 44383828..1130b12c 100644
--- a/frontend/src/app/_services/models.service.ts
+++ b/frontend/src/app/_services/models.service.ts
@@ -1,6 +1,6 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import Model from '../_data/Model';
+import Model, { ProblemType } from '../_data/Model';
 import { AuthService } from './auth.service';
 import { Observable } from 'rxjs';
 import Dataset from '../_data/Dataset';
@@ -31,20 +31,16 @@ export class ModelsService {
   addModel(model: Model): Observable<any> {
     return this.http.post(`${Configuration.settings.apiURL}/model/add`, model, { headers: this.authService.authHeader() });
   }
-  addDataset(dataset: Dataset): Observable<any> {
-    return this.http.post(`${Configuration.settings.apiURL}/dataset/add`, dataset, { headers: this.authService.authHeader() });
-  }
   trainModel(modelId: string, experimentId: string): Observable<any> {
     return this.http.post(`${Configuration.settings.apiURL}/model/trainmodel`, { ModelId: modelId, ExperimentId: experimentId }, { headers: this.authService.authHeader(), responseType: 'text' });
   }
 
-  getMyDatasets(): Observable<Dataset[]> {
-    return this.http.get<Dataset[]>(`${Configuration.settings.apiURL}/dataset/mydatasets`, { headers: this.authService.authHeader() });
-  }
-
   getMyModels(): Observable<Model[]> {
     return this.http.get<Model[]>(`${Configuration.settings.apiURL}/model/mymodels`, { headers: this.authService.authHeader() });
   }
+  getMyModelsByType(problemType: ProblemType): Observable<Model[]> {
+    return this.http.get<Model[]>(`${Configuration.settings.apiURL}/model/mymodelsbytype/` + problemType, { headers: this.authService.authHeader() });
+  }
 
   editModel(model: Model): Observable<Model> {
     return this.http.put<Model>(`${Configuration.settings.apiURL}/model/`, model, { headers: this.authService.authHeader() });
@@ -53,4 +49,5 @@ export class ModelsService {
   deleteModel(model: Model) {
     return this.http.delete(`${Configuration.settings.apiURL}/model/` + model.name, { headers: this.authService.authHeader(), responseType: "text" });
   }
+  
 }
diff --git a/frontend/src/app/_services/predictors.service.ts b/frontend/src/app/_services/predictors.service.ts
index 9e8383aa..a24ee708 100644
--- a/frontend/src/app/_services/predictors.service.ts
+++ b/frontend/src/app/_services/predictors.service.ts
@@ -24,7 +24,7 @@ export class PredictorsService {
   }
 
   deletePredictor(predictor: Predictor) {
-    return this.http.delete(`${Configuration.settings.apiURL}/predictor/` + predictor.name, { headers: this.authService.authHeader(), responseType: "text" });
+    return this.http.delete(`${Configuration.settings.apiURL}/predictor/` + predictor._id, { headers: this.authService.authHeader(), responseType: "text" });
   }
 
   getMyPredictors(): Observable<Predictor[]> {
diff --git a/frontend/src/app/_services/signal-r.service.ts b/frontend/src/app/_services/signal-r.service.ts
index b279b5ca..6a2e61e9 100644
--- a/frontend/src/app/_services/signal-r.service.ts
+++ b/frontend/src/app/_services/signal-r.service.ts
@@ -16,13 +16,18 @@ export class SignalRService {
       }).build();
 
     this.hubConnection.on("Notify", (message: string) => {
-      console.log(" " + message);
+      //console.log(" " + message);
     });
 
     this.hubConnection
       .start()
-      .then(() => console.log("con Started"))
-      .catch(err => console.log("Error" + err))
+      .then(() => {})
+      .catch(err => {})
   }
+
+  public stopConnection = () => {
+    this.hubConnection?.stop();
+  }
+
   constructor(private cookie: CookieService) { }
 }
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index e22f7a88..a0952d21 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -19,6 +19,7 @@ const routes: Routes = [
   { path: '', component: HomeComponent, data: { title: 'Početna strana' } },
   /*{ path: 'add-model', component: AddModelComponent, data: { title: 'Dodaj model' } },*/
   { path: 'experiment', component: ExperimentComponent, data: { title: 'Dodaj eksperiment' } },
+  { path: 'training/:id', component: TrainingComponent, data: { title: 'Treniraj model' } },
   { path: 'training', component: TrainingComponent, data: { title: 'Treniraj model' } },
   { path: 'my-datasets', component: MyDatasetsComponent, canActivate: [AuthGuardService], data: { title: 'Moji izvori podataka' } },
   { path: 'my-models', component: MyModelsComponent, canActivate: [AuthGuardService], data: { title: 'Moji modeli' } },
@@ -28,6 +29,7 @@ const routes: Routes = [
   { path: 'browse-datasets', component: FilterDatasetsComponent, data: { title: 'Javni izvori podataka' } },
   { path: 'browse-predictors', component: BrowsePredictorsComponent, data: { title: 'Javni trenirani modeli' } },
   { path: 'predict/:id', component: PredictComponent, data: { title: 'Predvidi vrednosti' } },
+  
 ];
 
 @NgModule({
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 59f247ed..54c18bec 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -50,7 +50,6 @@ export class AppComponent implements OnInit {
   private startHttpRequest = () => {
     this.http.get('http://localhost:5283/chatHub')
       .subscribe(res => {
-        console.log(res);
       })
   }
 
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index c4f89ad8..51374bd4 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -48,7 +48,11 @@ import { TrainingComponent } from './training/training.component';
 import { ItemExperimentComponent } from './_elements/item-experiment/item-experiment.component';
 import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.component';
 import { Configuration } from './configuration.service';
+import { PointLinechartComponent } from './point-linechart/point-linechart.component';
+import { MixedChartComponent } from './mixed-chart/mixed-chart.component';
 
+import { LineChartComponent } from './_elements/line-chart/line-chart.component';
+import { MetricViewComponent } from './_elements/metric-view/metric-view.component';
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
 }
@@ -87,7 +91,14 @@ export function initializeApp(appConfig: Configuration) {
     GraphComponent,
     TrainingComponent,
     ItemExperimentComponent,
-    YesNoDialogComponent
+    YesNoDialogComponent,
+    LineChartComponent,
+    PointLinechartComponent,
+    MixedChartComponent,
+    LineChartComponent,
+    MetricViewComponent,
+
+
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/experiment/experiment.component.css b/frontend/src/app/experiment/experiment.component.css
index 4a3d7741..d84a897e 100644
--- a/frontend/src/app/experiment/experiment.component.css
+++ b/frontend/src/app/experiment/experiment.component.css
@@ -40,4 +40,9 @@ ul li:hover {
 
 h2 {
     color: #003459;
+}
+
+.boldClass {
+    font-weight: bold;
+    font-size: 125%;
 }
\ No newline at end of file
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index e46f5bd9..4bdd79b2 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -4,159 +4,147 @@
 <div id="wrapper">
     <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
 
-        <div class="d-flex flex-row justify-content-center align-items-center my-3">
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="0">Izvor podataka</a>
+        <div class="d-flex flex-row justify-content-center align-items-center my-3 links">
+            <a id="firstStep" href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" (click)="updateCarouselIndex(0);" [ngClass]="{'boldClass' : carouselIndex == 0}" style="text-decoration: none">Izvor podataka</a>
             <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1">Preprocesiranje</a>
+            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" (click)="updateCarouselIndex(1)" [ngClass]="{'boldClass' : carouselIndex == 1}" style="text-decoration: none">Preprocesiranje</a>
             <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2">Dodaj eksperiment</a>
+            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" (click)="updateCarouselIndex(2)" [ngClass]="{'boldClass' : carouselIndex == 2}" style="text-decoration: none">Dodaj eksperiment</a>
         </div>
 
-        <div id="carouselExampleControls" class="carousel slide px-5 mt-5" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false">
-        <div class="carousel-inner">
-            <div class="carousel-item active mt-2">
-                <h2 class="mb-5">1. Izvor podataka</h2>
-                <app-dataset-load (selectedDatasetChangeEvent)="updateDataset($event)"></app-dataset-load>
-            </div>
+        <div id="carouselExampleControls" class="carousel px-5 mt-5" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false">
+            <div class="carousel-inner">
+                <div class="carousel-item active mt-2">
+                    <h2 class="mb-5">1. Izvor podataka</h2>
+                    <app-dataset-load (selectedDatasetChangeEvent)="updateDataset($event)"></app-dataset-load>
+                </div>
 
-            <div class="carousel-item mt-2">
-                <h2 class="mb-4">2. Preprocesiranje</h2>
+                <div class="carousel-item mt-2">
+                    <h2 class="mb-4">2. Preprocesiranje</h2>
 
-                <div class="px-5">
-                    <h3>Biranje ulaznih i izlaznih kolona:</h3>
-                    <div *ngIf="selectedDataset">
-                        <div class="row">
-                            <div class="col d-flex justify-content-center">
-                                <h3>Izaberite ulazne kolone:</h3>
-                                <div id="divInputs" class="form-check mt-2">
-                                    <br>
-                                    <div *ngFor="let item of selectedDataset.columnInfo; let i = index">
-                                        <input class="form-check-input" type="checkbox" value="{{item.columnName}}"
-                                            id="cb_{{item.columnName}}" name="cbsNew"
-                                            [checked]="experiment.outputColumn != item.columnName"
-                                            [disabled]="experiment.outputColumn == item.columnName"
-                                            (click)="checkedColumnsChanged(item, 0)">&nbsp;
-                                        <label class="form-check-label" for="cb_{{item.columnName}}">
+                    <div class="px-5">
+                        <h3>Biranje ulaznih i izlaznih kolona:</h3>
+                        <div *ngIf="selectedDataset">
+                            <div class="row">
+                                <div class="col d-flex justify-content-center">
+                                    <h3>Izaberite ulazne kolone:</h3>
+                                    <div id="divInputs" class="form-check mt-2">
+                                        <br>
+                                        <div *ngFor="let item of selectedDataset.columnInfo; let i = index">
+                                            <input class="form-check-input" type="checkbox" value="{{item.columnName}}" id="cb_{{item.columnName}}" name="cbsNew" [checked]="experiment.outputColumn != item.columnName" [disabled]="experiment.outputColumn == item.columnName" (change)="checkedColumnsChanged(item, 0); resetColumnEncodings();">&nbsp;
+                                            <label class="form-check-label" for="cb_{{item.columnName}}">
                                             {{item.columnName}}
                                         </label>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="col d-flex justify-content-left">
-                                <h3>Izaberite izlaznu kolonu:</h3>
-                                <div id="divOutputs" class="form-check mt-2">
-                                    <br>
-                                    <div *ngFor="let item of selectedDataset.columnInfo; let i = index">
-                                        <input class="form-check-input" type="radio" value="{{item.columnName}}"
-                                            id="rb_{{item.columnName}}" name="rbsNew"
-                                            [(ngModel)]="this.experiment.outputColumn"
-                                            (change)="experiment.outputColumn = item.columnName"
-                                            (click)="checkedColumnsChanged(item, 1);">&nbsp;
-                                        <label class="form-check-label" for="rb_{{item.columnName}}">
+                                <div class="col d-flex justify-content-left">
+                                    <h3>Izaberite izlaznu kolonu:</h3>
+                                    <div id="divOutputs" class="form-check mt-2">
+                                        <br>
+                                        <div *ngFor="let item of selectedDataset.columnInfo; let i = index">
+                                            <input class="form-check-input" type="radio" value="{{item.columnName}}" id="rb_{{item.columnName}}" name="rbsNew" [(ngModel)]="this.experiment.outputColumn" (change)="experiment.outputColumn = item.columnName; checkedColumnsChanged(item, 1); resetColumnEncodings();"
+                                                checked>&nbsp;
+                                            <label class="form-check-label" for="rb_{{item.columnName}}">
                                             {{item.columnName}}
                                         </label>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    
-                    <h3 class="mt-5">Popunjavanje nedostajućih vrednosti:</h3>
-                    <div class="form-check" *ngIf="selectedDataset">
-                        <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.DeleteRows"
-                            class="form-check-input" value="deleteRows" name="fillMissing" id="delRows" checked
-                            data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
-                        <label for="delRows" class="form-check-label">Obriši sve
-                            redove sa nedostajućim vrednostima ({{selectedDataset.nullRows}} od {{selectedDataset.rowCount}})</label><br>
-                        <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.DeleteColumns"
-                            class="form-check-input" value="deleteCols" name="fillMissing" id="delCols" data-bs-toggle="collapse"
-                            data-bs-target="#fillMissingCustom.show">
-                        <label for="delCols" class="form-check-label">Obriši sve
+
+
+                        <div class="mt-5 mb-3 mx-3" *ngIf="countSelectedNullCols() == 0">
+                            <h3 class="border p-2 text-center"><i>Izabrane kolone nemaju nedostajuće vrednosti koje možete popuniti.</i></h3>
+                        </div>
+
+                        <div *ngIf="countSelectedNullCols() != 0">
+                            <h3 class="mt-5">Popunjavanje nedostajućih vrednosti:</h3>
+                            <div class="form-check" *ngIf="selectedDataset">
+                                <input type="radio" [(ngModel)]="experiment.nullValues " [value]="NullValueOptions.DeleteRows " class="form-check-input" value="deleteRows" name="fillMissing " id="delRows" checked data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
+                                <label *ngIf="selectedColumnsInfoArray.length == selectedDataset.columnInfo.length" for="delRows" class="form-check-label ">Obriši sve
+                            redove sa nedostajućim vrednostima ({{selectedDataset.nullRows}} od {{selectedDataset.rowCount}})</label>
+                                <label *ngIf="selectedColumnsInfoArray.length != selectedDataset.columnInfo.length" for="delRows" class="form-check-label ">Obriši sve
+                            redove sa nedostajućim vrednostima</label><br>
+                                <input type="radio" [(ngModel)]="experiment.nullValues " [value]="NullValueOptions.DeleteColumns " class="form-check-input" value="deleteCols" name="fillMissing " id="delCols" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
+                                <label for="delCols" class="form-check-label ">Obriši sve
                             kolone sa nedostajućim vrednostima ({{countSelectedNullCols()}} od {{selectedDataset.columnInfo.length}})</label><br>
-                        <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace"
-                            class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse"
-                            data-bs-target="#fillMissingCustom:not(.show)">
-                        <label for="replace" class="form-check-label">Izabraću
+                                <input type="radio" [(ngModel)]="experiment.nullValues " [value]="NullValueOptions.Replace " class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom:not(.show)">
+                                <label for="replace" class="form-check-label">Izabraću
                             vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br>
-                        <div class="collapse" id="fillMissingCustom">
-                            <div>
-                                <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
-                                <div class="my-3" *ngIf="getSelectedColumnsArrayWithoutNullVals().length > 0" >
-                                    <label class="text-center form-control mx-3 text-secondary">
+                                <div class="collapse" id="fillMissingCustom">
+                                    <div>
+                                        <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
+                                        <div class="my-3 " *ngIf="getSelectedColumnsArrayWithoutNullVals().length> 0">
+                                            <label class="text-center form-control mx-3 text-secondary">
                                         Kolone <span style="font-style: italic;" *ngFor="let colname of getSelectedColumnsArrayWithoutNullVals(); let i = index">
                                             <span *ngIf="i != getSelectedColumnsArrayWithoutNullVals().length - 1">{{colname}}, </span> 
                                             <span *ngIf="i == getSelectedColumnsArrayWithoutNullVals().length - 1">{{colname}} </span> 
                                         </span>
                                         nemaju nedostajućih vrednosti za popunjavanje.
                                     </label>
-                                </div>
-                                <div id="columnReplacers">
-                                    <div *ngFor="let column of selectedColumnsInfoArray; let i = index" class="my-3">
-                                        <div *ngIf="column.numNulls > 0">
-                                            <span class="w-20 mx-3">
-                                                {{column.columnName}}&nbsp;<span class="small" style="color:gray;">({{column.numNulls}} null)
-                                                </span>
-                                            </span>
-    
-                                            <label *ngIf="column.numNulls <= 0"
-                                                class="text-center form-control mx-3 text-secondary">
-                                                Ova kolona nema
-                                                nedostajućih
-                                                vrednosti.
-                                            </label>
-    
-                                            <div *ngIf="column.numNulls > 0" class="d-flex flex-row justify-content-end">
-                                                <div class="flex-grow-3 mx-3 me-auto">
-                                                    <div class="input-group">
-                                                        <div class="input-group-prepend">
-                                                            <label [for]="'fillCol_'+column.columnName" class="form-control">
+                                        </div>
+                                        <div id="columnReplacers">
+                                            <div *ngFor="let column of selectedColumnsInfoArray; let i = index" class="my-3">
+                                                <div *ngIf="column.numNulls > 0">
+                                                    <span class="w-20 mx-3">
+                                                        {{column.columnName}}&nbsp;
+                                                        <span class="small" style="color:gray;">({{column.numNulls}} null)</span>
+                                                    </span>
+
+                                                    <div class="d-flex flex-row justify-content-end">
+                                                        <div class="flex-grow-3 mx-3 me-auto">
+                                                            <div class="input-group">
+                                                                <div class="input-group-prepend">
+                                                                    <label [for]="'fillCol_'+column.columnName" class="form-control">
                                                                 Zameni
                                                                 <input type="radio" [id]="'fillCol_'+column.columnName"
                                                                     [name]="'delOp_'+column.columnName">
                                                             </label>
-                                                        </div>
-                                                        <input type="text" class="form-control" [id]="'fillText_'+column.columnName"
-                                                            (keyup)="checkFillColRadio(column.columnName)"
-                                                            placeholder="Unesi vrednost...">
-    
-                                                        <div class="input-group-append">
-                                                            <select [id]="'replaceOptions'+i" class="form-control btn-primary"
-                                                                *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);">
+                                                                </div>
+                                                                <input type="text" class="form-control" [id]="'fillText_'+column.columnName" (keyup)="checkFillColRadio(column.columnName)" placeholder="Unesi vrednost...">
+
+                                                                <div class="input-group-append">
+                                                                    <select [id]="'replaceOptions'+i" class="form-control btn-primary" *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);">
                                                                 <option
                                                                     *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
                                                                     [value]="option">
                                                                     {{ optionName }}
                                                                 </option>
                                                             </select>
-                                                            <select [id]="'replaceOptions'+i"
-                                                                class="form-control btn-outline-primary"
-                                                                *ngIf="!column.isNumber && column.numNulls > 0"
-                                                                (change)="replace($event, column); checkFillColRadio(column.columnName);">
+                                                                    <select [id]="'replaceOptions'+i" class="form-control btn-outline-primary" *ngIf="!column.isNumber && column.numNulls > 0" (change)="replace($event, column); checkFillColRadio(column.columnName);">
                                                                 <option *ngFor="let option of column.uniqueValues" [value]="option">
                                                                     {{ option }}
                                                                 </option>
                                                             </select>
+                                                                </div>
+                                                            </div>
                                                         </div>
-                                                    </div>
-                                                </div>
-    
-                                                <div class="flex-shrink-1 mx-3">
-                                                    <div class="input-group">
-                                                        <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši
-                                                            kolonu
-                                                            <input type="radio" [id]="'delCol_'+column.columnName"
+
+                                                        <div class="flex-shrink-1 mx-3">
+                                                            <div class="input-group" *ngIf="column.columnName != this.experiment.outputColumn">
+                                                                <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši
+                                                                kolonu
+                                                                <input type="radio" [id]="'delCol_'+column.columnName"
                                                                 [name]="'delOp_'+column.columnName"
-                                                                (change)="emptyFillTextInput(column.columnName)"></label>
-                                                    </div>
-                                                </div>
-    
-                                                <div class="flex-shrink-1 mx-3">
-                                                    <div class="input-group">
-                                                        <label class="form-control" [for]="'delRows_'+column.columnName">Izbriši
+                                                                (change)="emptyFillTextInput(column.columnName)">
+                                                                </label>
+                                                            </div>
+                                                            <label class="form-control text-secondary" role="alert" *ngIf="column.columnName == this.experiment.outputColumn">
+                                                                (Izlazna kolona)
+                                                            </label>
+                                                        </div>
+
+                                                        <div class="flex-shrink-1 mx-3">
+                                                            <div class="input-group">
+                                                                <label class="form-control" [for]="'delRows_'+column.columnName">Izbriši
                                                             redove
                                                             <input type="radio" [id]="'delRows_'+column.columnName"
                                                                 [name]="'delOp_'+column.columnName" checked
                                                                 (change)="emptyFillTextInput(column.columnName)"></label>
+                                                            </div>
+                                                        </div>
                                                     </div>
                                                 </div>
                                             </div>
@@ -165,96 +153,109 @@
                                 </div>
                             </div>
                         </div>
-                    </div>
-    
-                    <div id="randomOptions" class="mt-5">
-                        <div class="p-2 m-2">
-                            <label for="type" class="form-check-label">Želite li da redosled podataka bude nasumičan?</label>
-                            <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="experiment.randomOrder"
-                            type="checkbox" value="" checked>
-                        </div>
-                        <div class="border m-3">
-                            <div class="row p-2 m-2">
-                                <div class="col-4">
-                                    <label for="splitYesNo" class="form-check-label">
+
+                        <div id="randomOptions" class="mt-5">
+                            <div class="p-2 m-2">
+                                <label for="type" class="form-check-label">Želite li da redosled podataka bude nasumičan?</label>
+                                <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="experiment.randomOrder" type="checkbox" value="" checked>
+                            </div>
+                            <div class="border m-3">
+                                <div class="row p-2 m-2">
+                                    <div class="col-4">
+                                        <label for="splitYesNo" class="form-check-label">
                                         <h3>Podela test skupa:&nbsp;&nbsp;
                                             <input id="splitYesNo" class="form-check-input" type="checkbox"
                                                 [checked]="experiment.randomTestSet"
                                                 (change)="experiment.randomTestSet = !experiment.randomTestSet">
                                         </h3>
                                     </label>
+                                    </div>
+                                    <div class="col-8">
+                                        trening
+                                        <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10" name="randomTestSetDistribution" thumbLabel [disabled]="!experiment.randomTestSet" [(ngModel)]="tempTestSetDistribution">
+                                        </mat-slider>
+                                        test
+                                    </div>
                                 </div>
-                                <div class="col-8">
-                                    trening
-                                    <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10"
-                                        name="randomTestSetDistribution" thumbLabel [disabled]="!experiment.randomTestSet"
-                                        [(ngModel)]="tempTestSetDistribution">
-                                    </mat-slider>
-                                    test
-                                </div>
-                            </div>
-            
-                            <div class="row p-2 m-2">
-                                <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
+
+                                <div class="row p-2 m-2">
+                                    <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
                                     skup:</label>
-                                <input id="percentage" type="number" class="form-control mx-3" style=" max-width: 15%" min="10" max="90" step="10" value="90"
-                                    [(ngModel)]="tempTestSetDistribution" [disabled]="!experiment.randomTestSet">
+                                    <input id="percentage" type="number" class="form-control mx-3" style=" max-width: 15%" min="10" max="90" step="10" value="90" [(ngModel)]="tempTestSetDistribution" [disabled]="!experiment.randomTestSet">
+                                </div>
                             </div>
                         </div>
-                    </div>
-    
-                    <div id="encodingForColumns" class="row px-3 my-5">
-                        <div class="col-1">
-                            <label for="encoding" class="col-form-label">Enkoding: </label>
-                        </div>
-                        <div class="col-2">
-                            <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="experiment.encoding">
-                                <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
-                                    [value]="option">
-                                    {{ optionName }}
-                                </option>
-                            </select>
+
+                        <div id="encodingsForColumns" class="px-3 my-5">
+                            <label for="encoding" class="col-form-label mb-2">Enkoding za izabrane kolone:</label>
+
+                            <div class="row d-flex flex-row justify-content-between align-items-center">
+                                <div class="col-5" *ngFor="let item of [].constructor(selectedColumnsInfoArray.length); let i = index">
+                                    <div class="input-group mb-2">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text">{{selectedColumnsInfoArray[i].columnName}}</span>
+                                        </div>
+                                        <select [id]="'encodingOption_'+i" class="form-select" [(ngModel)]="experiment.encodings[i].encoding">
+                                        <option
+                                            *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+                                            [value]="option">
+                                            {{ optionName }}
+                                        </option>
+                                    </select>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
+
                     </div>
-    
-                </div>
 
 
-            </div>
+                </div>
 
-            <div class="carousel-item mt-2">
-                <h2 class="mb-4">3. Dodaj eskperiment</h2>
+                <div class="carousel-item mt-2">
+                    <h2 class="mb-4">3. Dodaj eksperiment</h2>
 
-                <div class="row">
-                    <div class="col"></div>
-                    <div class="col-8">
-                        <label for="name" class="col-form-label">Naziv eksperimenta:</label>
-                        <input type="text" class="form-control mb-3" name="name" placeholder="Naziv..." [(ngModel)]="experiment.name">
-        
-                        <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
-                        <div>
-                            <textarea class="form-control" name="desc" rows="3" [(ngModel)]="experiment.description"></textarea>
-                        </div>
-                        <div class="form-group row mt-5 mb-3">
-                            <div class="col"></div>
-                            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="saveExperiment();">Sačuvaj
+                    <div class="row">
+                        <div class="col"></div>
+                        <div class="col-8">
+                            <label for="name" class="col-form-label">Naziv eksperimenta:</label>
+                            <input type="text" class="form-control mb-3" name="name" placeholder="Naziv..." [(ngModel)]="experiment.name">
+
+                            <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+                            <div>
+                                <textarea class="form-control" name="desc" rows="3" [(ngModel)]="experiment.description"></textarea>
+                            </div>
+                            <label for="desc" class="col-sm-2 col-form-label mt-3">Tip problema:</label>
+                            <div class="col-4">
+                                <select id="typeOptions" class="form-select" name="type" [(ngModel)]="experiment.type">
+                                    <option
+                                        *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
+                                        [value]="option">
+                                        {{ optionName }}
+                                    </option>
+                                </select>
+                            </div>
+                            <div class="form-group row mt-5 mb-3">
+                                <div class="col"></div>
+                                <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="saveExperiment();">Sačuvaj
                                 eksperiment</button>
-                            <div class="col"></div>
+                                <div class="col"></div>
+                            </div>
                         </div>
+                        <div class="col"></div>
                     </div>
-                    <div class="col"></div>
                 </div>
+
             </div>
 
-        </div>
-        <div class="m-3 d-flex flex-row justify-content-between align-items-center" style=" margin-left: auto;">
-            <button mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
-                <mat-icon>arrow_backward</mat-icon>
-            </button>
-            <button mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="next">
-                <mat-icon>arrow_forward</mat-icon>
-            </button>
-        </div>
+            <div class="m-3 d-flex flex-row align-items-center" style=" margin-left: auto;">
+                <button class="me-auto" *ngIf="carouselIndex != 0" mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="prev" (click)="updateCarouselIndex(carouselIndex - 1)">
+                                <mat-icon>arrow_backward</mat-icon>
+                            </button>
+                <button class="ms-auto" *ngIf="carouselIndex != 2" mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="next" (click)="updateCarouselIndex(carouselIndex + 1)">
+                                <mat-icon>arrow_forward</mat-icon>
+                            </button>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index b5e1d1f4..64adce3f 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -1,10 +1,14 @@
 import { Component, OnInit } from '@angular/core';
 import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith, Encoding } from '../_data/Experiment';
-import Model from '../_data/Model';
+import Model,{ProblemType} from '../_data/Model';
 import Dataset, { ColumnInfo } from '../_data/Dataset';
 import { ModelsService } from '../_services/models.service';
 import Shared from '../Shared';
 import { ExperimentsService } from '../_services/experiments.service';
+import { ColumnEncoding } from '../_data/Experiment';
+import { Router } from '@angular/router';
+import { TrainingComponent } from '../training/training.component';
+import { NEVER, retryWhen } from 'rxjs';
 
 @Component({
   selector: 'app-experiment',
@@ -21,14 +25,16 @@ export class ExperimentComponent implements OnInit {
   NullValueOptions = NullValueOptions;
   ReplaceWith = ReplaceWith;
   Encoding = Encoding;
+  ColumnEncoding = ColumnEncoding;
   Object = Object;
-
+  ProblemType=ProblemType;
   selectedColumnsInfoArray: ColumnInfo[] = [];
   selectedNotNullColumnsArray: string[] = [];
 
   tempTestSetDistribution = 90;
+  carouselIndex: number = 0;
 
-  constructor(private modelsService: ModelsService, private experimentsService: ExperimentsService) {
+  constructor(private experimentsService: ExperimentsService, private router: Router) {
   }
 
   ngOnInit(): void {
@@ -38,6 +44,16 @@ export class ExperimentComponent implements OnInit {
     this.selectedDataset = dataset;
     this.selectedColumnsInfoArray = this.selectedDataset.columnInfo;
     this.selectedNotNullColumnsArray = [];
+    this.experiment.outputColumn = this.selectedDataset.columnInfo[this.selectedDataset.columnInfo.length - 1].columnName;
+
+    this.resetColumnEncodings();
+  }
+
+  resetColumnEncodings() {
+    this.experiment.encodings = [];
+    for (let i = 0; i < this.selectedColumnsInfoArray.length; i++) {
+      this.experiment.encodings.push(new ColumnEncoding(this.selectedColumnsInfoArray[i].columnName, Encoding.Label));
+    }
   }
 
   getInputById(id: string): HTMLInputElement {
@@ -153,7 +169,7 @@ export class ExperimentComponent implements OnInit {
   }
 
   saveExperiment() {
-    if (this.selectedDataset == undefined) {
+      if (this.selectedDataset == undefined) {
       Shared.openDialog("Greška", "Izvor podataka nije izabran!");
       return;
     }
@@ -184,10 +200,9 @@ export class ExperimentComponent implements OnInit {
     this.experimentsService.addExperiment(this.experiment).subscribe((response) => {
       this.experiment = response;
 
-      this.selectedColumnsInfoArray = [];
-      this.selectedNotNullColumnsArray = [];
-
-      Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran.");
+      Shared.openYesNoDialog("Obaveštenje", "Eksperiment je uspešno kreiran. Da li želite da pređete na treniranje modela?", () => {
+        this.router.navigate(['/training', this.experiment._id]);
+      });
     }, (error) => {
       if (error.error == "Experiment with this name exists") {
         Shared.openDialog("Greška", "Eksperiment sa unetim nazivom već postoji u Vašoj kolekciji. Unesite neki drugi naziv.");
@@ -205,4 +220,23 @@ export class ExperimentComponent implements OnInit {
     }
     return counter;
   }
+
+  updateCarouselIndex(newIndex: number) {
+    if (newIndex > 2)
+      newIndex = 2;
+    else if (newIndex < 0)
+      newIndex = 0; 
+
+    if (this.carouselIndex == 0 && (newIndex == 1 || newIndex == 2))
+      this.checkRequiredData();
+    this.carouselIndex = newIndex;
+  }
+
+  checkRequiredData() {
+      if (this.selectedDataset == undefined) {
+        (<HTMLAnchorElement>document.getElementById("firstStep")).click();
+        Shared.openDialog("Pažnja", "Potrebno je da dodate ili izabere izvor podataka kako biste prešli na naredni korak (preprocesiranje).");
+        return;
+      }
+  }
 }
diff --git a/frontend/src/app/mixed-chart/mixed-chart.component.css b/frontend/src/app/mixed-chart/mixed-chart.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/mixed-chart/mixed-chart.component.css
diff --git a/frontend/src/app/mixed-chart/mixed-chart.component.html b/frontend/src/app/mixed-chart/mixed-chart.component.html
new file mode 100644
index 00000000..806ea9e8
--- /dev/null
+++ b/frontend/src/app/mixed-chart/mixed-chart.component.html
@@ -0,0 +1,2 @@
+<canvas #mixedchart width="800" height="450"></canvas>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
diff --git a/frontend/src/app/mixed-chart/mixed-chart.component.spec.ts b/frontend/src/app/mixed-chart/mixed-chart.component.spec.ts
new file mode 100644
index 00000000..361cd047
--- /dev/null
+++ b/frontend/src/app/mixed-chart/mixed-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MixedChartComponent } from './mixed-chart.component';
+
+describe('MixedChartComponent', () => {
+  let component: MixedChartComponent;
+  let fixture: ComponentFixture<MixedChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MixedChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MixedChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/mixed-chart/mixed-chart.component.ts b/frontend/src/app/mixed-chart/mixed-chart.component.ts
new file mode 100644
index 00000000..2524ee36
--- /dev/null
+++ b/frontend/src/app/mixed-chart/mixed-chart.component.ts
@@ -0,0 +1,56 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-mixed-chart',
+  templateUrl: './mixed-chart.component.html',
+  styleUrls: ['./mixed-chart.component.css']
+})
+export class MixedChartComponent implements AfterViewInit {
+
+  @ViewChild('mixedchart') chartRef!: ElementRef;
+  constructor() { }
+
+  ngAfterViewInit(): void {
+    const myChart = new Chart(this.chartRef.nativeElement, {
+      type: 'bar',
+      data: {
+        labels: ["1900", "1950", "1999", "2050"],
+        datasets: [{
+            label: "Europe",
+            type: "line",
+            borderColor: "#8e5ea2",
+            data: [408,547,675,734],
+            fill: false
+          }, {
+            label: "Africa",
+            type: "line",
+            borderColor: "#3e95cd",
+            data: [133,221,783,2478],
+            fill: false
+          }, {
+            label: "Europe",
+            type: "bar",
+            backgroundColor: "rgba(0,0,0,0.2)",
+            data: [408,547,675,734],
+          }, {
+            label: "Africa",
+            type: "bar",
+            backgroundColor: "rgba(0,0,0,0.2)",
+            //backgroundColorHover: "#3e95cd",
+            data: [133,221,783,2478]
+          }
+        ]
+      },
+      /*options: {
+        title: {
+          display: true,
+          text: 'Population growth (millions): Europe & Africa'
+        },
+        legend: { display: false }
+      }*/
+
+    });
+  }
+
+}
diff --git a/frontend/src/app/point-linechart/point-linechart.component.css b/frontend/src/app/point-linechart/point-linechart.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/point-linechart/point-linechart.component.css
diff --git a/frontend/src/app/point-linechart/point-linechart.component.html b/frontend/src/app/point-linechart/point-linechart.component.html
new file mode 100644
index 00000000..f9f9a24a
--- /dev/null
+++ b/frontend/src/app/point-linechart/point-linechart.component.html
@@ -0,0 +1,2 @@
+<canvas #linechart width="800" height="450">Point line chart:</canvas>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
diff --git a/frontend/src/app/point-linechart/point-linechart.component.spec.ts b/frontend/src/app/point-linechart/point-linechart.component.spec.ts
new file mode 100644
index 00000000..fe08fe7c
--- /dev/null
+++ b/frontend/src/app/point-linechart/point-linechart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PointLinechartComponent } from './point-linechart.component';
+
+describe('PointLinechartComponent', () => {
+  let component: PointLinechartComponent;
+  let fixture: ComponentFixture<PointLinechartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PointLinechartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PointLinechartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/point-linechart/point-linechart.component.ts b/frontend/src/app/point-linechart/point-linechart.component.ts
new file mode 100644
index 00000000..3497a20c
--- /dev/null
+++ b/frontend/src/app/point-linechart/point-linechart.component.ts
@@ -0,0 +1,57 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+
+@Component({
+  selector: 'app-point-linechart',
+  templateUrl: './point-linechart.component.html',
+  styleUrls: ['./point-linechart.component.css']
+})
+export class PointLinechartComponent implements AfterViewInit {
+
+  @ViewChild('linechart') chartRef!: ElementRef;
+  constructor() { }
+  ngAfterViewInit(): void {
+    const myChart = new Chart(this.chartRef.nativeElement, {
+      type: 'line',
+      data: {
+        labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
+        datasets: [{ 
+            data: [86,114,106,106,107,111,133,221,783,2478],
+            label: "Africa",
+            borderColor: "#3e95cd",
+            fill: false
+          }, { 
+            data: [282,350,411,502,635,809,947,1402,3700,5267],
+            label: "Asia",
+            borderColor: "#8e5ea2",
+            fill: false
+          }, { 
+            data: [168,170,178,190,203,276,408,547,675,734],
+            label: "Europe",
+            borderColor: "#3cba9f",
+            fill: false
+          }, { 
+            data: [40,20,10,16,24,38,74,167,508,784],
+            label: "Latin America",
+            borderColor: "#e8c3b9",
+            fill: false
+          }, { 
+            data: [6,3,2,2,7,26,82,172,312,433],
+            label: "North America",
+            borderColor: "#c45850",
+            fill: false
+          }
+        ]
+      },
+      /*options: {
+        title: {
+          display: true,
+          text: 'World population per region (in millions)'
+        }
+      }*/
+      
+    });
+  
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html
index 0ce4cc89..deac88cc 100644
--- a/frontend/src/app/training/training.component.html
+++ b/frontend/src/app/training/training.component.html
@@ -2,45 +2,40 @@
     <h1>Trenirajte veštačku neuronsku mrežu</h1>
 </div>
 <div id="wrapper" class="mb-4">
-    <div id="container" class="container p-5 row" style="background-color: white; min-height: 100%;">
-        <div class="col"></div>
+    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
+        <h2>1. Izaberite eksperiment iz kolekcije</h2>
+        <div class="px-5 mt-5 mb-3">
+            <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term">
+        </div>
+        <div class="overflow-auto px-5" style="max-height: 500px;">
+            <ul class="list-group">
+                <li class="list-group-item p-3" *ngFor="let experiment of myExperiments|filter:term" [ngClass]="{'selectedExperimentClass': this.selectedExperiment == experiment}">
+                    <app-item-experiment [experiment]="experiment" (click)="selectThisExperiment(experiment);"></app-item-experiment>
+                </li>
+            </ul>
+        </div>
 
-        <div class="col-10">
+        <h2 class="mt-5 mb-2">2. Izaberite model</h2>
+        <app-model-load *ngIf="selectedExperiment" (selectedModelChangeEvent)="selectModel($event)" [forExperiment]="selectedExperiment"></app-model-load>
+        <h3 *ngIf="!selectedExperiment">Morate prvo izabrati eksperiment.</h3>
 
-            <h2>1. Izaberite eksperiment iz kolekcije</h2>
-            <div class="px-5 mt-5 mb-3">
-                <input type="text" class="form-control" placeholder="Pretraga"
-                    [(ngModel)]="term">
-            </div>
-            <div class="overflow-auto px-5" style="max-height: 500px;">
-                <ul class="list-group">
-                    <li class="list-group-item p-3" *ngFor="let experiment of myExperiments|filter:term"
-                        [ngClass]="{'selectedExperimentClass': this.selectedExperiment == experiment}">
-                        <app-item-experiment [experiment]="experiment"
-                            (click)="selectThisExperiment(experiment);"></app-item-experiment>
-                    </li>
-                </ul>
-            </div>
-    
-            <h2 class="mt-5 mb-2">2. Izaberite model</h2>
-            <app-model-load (selectedModelChangeEvent)="selectModel($event)"></app-model-load>
-    
-            <h2 class="my-5">3. Treniranje modela</h2>
+        <h2 class="my-5">3. Treniranje modela</h2>
 
-            <div class="d-flex flex-row justify-content-center align-items-center my-3">
-                <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
+        <div class="d-flex flex-row justify-content-center align-items-center my-3">
+            <button #trainButton class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
                     model</button>
-            </div>
-    
-            <h2 class="mt-5">Rezultati treniranja</h2>
-            <div class="m-3" *ngIf="trainingResult">
-                <h2 class="my-2">Rezultati treniranja:</h2>
-                <p>
-                    {{trainingResult}}
-                </p>
-            </div>
         </div>
 
-        <div class="col"></div>
+        <h2 class="mt-5">Rezultati treniranja</h2>
+        <div class="m-3" *ngIf="trainingResult">
+            <h2 class="my-2">Rezultati treniranja:</h2>
+            <app-metric-view *ngIf="trainingResult" [metrics]="trainingResult"></app-metric-view>
+        </div>
+    </div>
+
+    <h2 class="mt-5">Rezultati treniranja</h2>
+    <div class="m-3" *ngIf="trainingResult">
+        <h2 class="my-2">Rezultati treniranja:</h2>
+        <app-metric-view *ngIf="trainingResult" [metrics]="trainingResult"></app-metric-view>
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts
index 027d2c22..a0bec8e2 100644
--- a/frontend/src/app/training/training.component.ts
+++ b/frontend/src/app/training/training.component.ts
@@ -1,17 +1,26 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import Shared from '../Shared';
 import Experiment from '../_data/Experiment';
-import Model from '../_data/Model';
-import { DatasetsService } from '../_services/datasets.service';
+import Model, { ProblemType } from '../_data/Model';
+import { MetricViewComponent } from '../_elements/metric-view/metric-view.component';
+import { ModelLoadComponent } from '../_elements/model-load/model-load.component';
+import { AuthService } from '../_services/auth.service';
 import { ExperimentsService } from '../_services/experiments.service';
 import { ModelsService } from '../_services/models.service';
+import { SignalRService } from '../_services/signal-r.service';
 
 @Component({
   selector: 'app-training',
   templateUrl: './training.component.html',
   styleUrls: ['./training.component.css']
 })
-export class TrainingComponent{
+export class TrainingComponent implements OnInit {
+
+  @ViewChild(ModelLoadComponent) modelLoadComponent?: ModelLoadComponent;
+  @ViewChild("trainButton") trainButtonRef!: ElementRef;
+  
+  @ViewChild(MetricViewComponent) metricViewComponent!: MetricViewComponent;
 
   myExperiments?: Experiment[];
   selectedExperiment?: Experiment;
@@ -19,16 +28,55 @@ export class TrainingComponent{
 
   trainingResult: any;
 
+  history: any[] = [];
+
   term: string = "";
 
-  constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private experimentsService: ExperimentsService) { 
+  constructor(private modelsService: ModelsService, private route: ActivatedRoute, private experimentsService: ExperimentsService, private authService: AuthService, private signalRService: SignalRService) {
+  }
+
+  ngOnInit(): void {
+    this.route.queryParams.subscribe(params => {
+      let experimentId = this.route.snapshot.paramMap.get("id");
+
+      this.fetchExperiments(experimentId);
+
+      this.authService.loggedInEvent.subscribe(_ => {
+        this.fetchExperiments(experimentId);
+
+        this.signalRService.startConnection();
+      });
+
+      console.log(this.signalRService.hubConnection);
+      if (this.signalRService.hubConnection) {
+        this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
+          console.log(this.selectedModel?._id, mId);
+          if (this.selectedModel?._id == mId) {
+            stat = stat.replace(/'/g, '"');
+            this.trainingResult = JSON.parse(stat);
+            //console.log('JSON', this.trainingResult);
+            this.history.push(this.trainingResult);
+            this.metricViewComponent.update(this.history);
+          }
+        });
+      }
+    });
+  }
+
+  fetchExperiments(andSelectWithId: string | null = '') {
     this.experimentsService.getMyExperiments().subscribe((experiments) => {
-      this.myExperiments = experiments;
+      this.myExperiments = experiments.reverse();
+
+      this.selectedExperiment = this.myExperiments.filter(x => x._id == andSelectWithId)[0];
+      if (this.modelLoadComponent)
+        this.modelLoadComponent.newModel.type = this.selectedExperiment.type;
     });
   }
 
   selectThisExperiment(experiment: Experiment) {
     this.selectedExperiment = experiment;
+    if (this.modelLoadComponent)
+      this.modelLoadComponent.newModel.type = this.selectedExperiment.type;
   }
 
   selectModel(model: Model) {
@@ -46,9 +94,11 @@ export class TrainingComponent{
       Shared.openDialog("Greška", "Molimo Vas da izaberete model.");
       return;
     }
+    this.trainButtonRef.nativeElement.disabled = true;
     this.modelsService.trainModel(this.selectedModel._id, this.selectedExperiment._id).subscribe((response: any) => {
       //console.log('Train model complete!', response);
-      Shared.openDialog("Obaveštenje", "Treniranje modela je uspešno završeno!");
+      this.trainButtonRef.nativeElement.disabled = false;
+      Shared.openDialog("Obaveštenje", "Treniranje modela je počelo!");
       this.trainingResult = response;
     });
   }