Add model stranica zamenjena sa eksperiment stranicom.

12 files changed, 619 insertions, 1016 deletions

diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts
index c5b56957..dd751947 100644
--- a/frontend/src/app/_data/Dataset.ts
+++ b/frontend/src/app/_data/Dataset.ts
@@ -12,6 +12,22 @@ export default class Dataset {
         public lastUpdated: Date = new Date(),
         public username: string = '',
         public delimiter: string = '',
-        public hasHeader: boolean = true
+        public hasHeader: boolean = true,
+
+        public columnInfo: ColumnInfo[] = [],
+        public preview: string[][] = [[]]
+    ) { }
+}
+
+export class ColumnInfo {
+    constructor(
+        public name: string = '',
+        public isNumber: boolean = false,
+        public numNull: number = 0,
+        public uniqueValues?: string[],
+        public median?: number,
+        public mean?: number,
+        public min?: number,
+        public max?: number
     ) { }
 }
\ No newline at end of file
diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts
index 706231c7..10320ab6 100644
--- a/frontend/src/app/_data/Experiment.ts
+++ b/frontend/src/app/_data/Experiment.ts
@@ -6,7 +6,29 @@ export default class Experiment {
         public datasetId: string = '',
         public inputColumns: string[] = [],
         public columnToPredict: string = '',
+        public nullValues: NullValueOptions = NullValueOptions.DeleteRows,
+        public nullValuesReplacers: NullValReplacer[] = [],
         public dateCreated: Date = new Date(),
         public lastUpdated: Date = new Date()
     ) { }
+}
+
+export enum NullValueOptions {
+    DeleteRows = 'delete_rows',
+    DeleteColumns = 'delete_columns',
+    Replace = 'replace'
+}
+
+export enum ReplaceWith {
+    None = 'Popuni...',
+    Mean = 'Srednja vrednost',
+    Median = 'Medijana',
+    Min = 'Minimum',
+    Max = 'Maksimum'
+}
+
+export class NullValReplacer {
+    "column": string;
+    "option": NullValueOptions;
+    "value": string;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 85b6db2b..9ea437b1 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -24,11 +24,8 @@ export default class Model {
         public hiddenLayers: number = 1,
         public batchSize: number = 5,
         public hiddenLayerActivationFunctions: string[] = ['sigmoid'],
-        //public inputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
         public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
         public username: string = '',
-        public nullValues: NullValueOptions = NullValueOptions.DeleteRows,
-        public nullValuesReplacers: NullValReplacer[] = [],
         public metrics: string[] = [], // TODO add to add-model form
         public epochs: number = 5 // TODO add to add-model form
     ) { }
@@ -83,7 +80,6 @@ export enum ActivationFunction {
     Linear = 'linear',
     //Sigmoid='sigmoid',
     Softmax = 'softmax',
-
 }
 /*
 export enum ActivationFunctionHiddenLayer
@@ -115,7 +111,6 @@ export enum LossFunction {
     MeanSquaredError = 'mean_squared_error',
     MeanSquaredLogarithmicError = 'mean_squared_logarithmic_error',
     HuberLoss = 'Huber'
-
 }
 export enum LossFunctionRegression {
     MeanAbsoluteError = 'mean_absolute_error',
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 ced9b0d6..0c6735a9 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ b/frontend/src/app/_elements/model-load/model-load.component.html
@@ -1 +1,221 @@
-<p>model-load works!</p>
+<div>
+    <div class="form-group row mt-3 mb-2 d-flex justify-content-center">
+        <h2 class="col-2"> Nov model: </h2>
+        <div class="col-3">
+            <label for="name" class="col-form-label">Naziv modela:</label>
+            <input type="text" class="form-control" name="name" placeholder="Naziv..." [(ngModel)]="newModel.name">
+        </div>
+        <div class="col-5">
+            <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+            <div>
+                <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">Parametri treniranja:</h2>
+    <div>
+        <div class="row p-2">
+            <div class="col-1">
+            </div>
+            <div class="col-3">
+                <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()">
+                    <option
+                        *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+            <div class="col-1">
+            </div>
+            <div class="col-3">
+                <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])">
+            </div>
+        </div>
+
+        <div class="row p-2">
+            <div class="col-1">
+            </div>
+            <div class="col-3">
+                <label for="encoding" class="col-form-label">Enkoding: </label>
+            </div>
+            <div class="col-2">
+                <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
+                    <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+
+            <div class="col-1">
+            </div>
+            <div class="col-3">
+                <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">
+            </div>
+        </div>
+
+        <div class="row p-2">
+            <div class="col-1">
+            </div>
+            <div class="col-3">
+                <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">
+                    <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+            <div class="col-1">
+            </div>
+            <div class="col-3">
+                <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
+            </div>
+            <div class="col-1">
+                <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
+            </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>
+            </div>
+            <div class="col-2">
+                <select id=lossFunctionOptions class="form-control" name="lossFunction"
+                    [(ngModel)]="newModel.lossFunction" aria-checked="true">
+                    <option
+                        *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+            <div class="col-1"></div>
+            <div class="col-3 mt-2">
+                <label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
+                <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder" type="checkbox"
+                    value="" checked>
+            </div>
+        </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]="newModel.randomTestSet"
+                                (change)="newModel.randomTestSet = !newModel.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]="!newModel.randomTestSet"
+                        [(ngModel)]="tempTestSetDistribution">
+                    </mat-slider>
+                    test
+                </div>
+            </div>
+
+            <div class="row p-2 mx-2">
+                <div class="col-4">
+                    <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
+                        skup:</label>
+                </div>
+                <div class="col-2">
+                    <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
+                        [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet">
+                </div>
+            </div>
+        </div>
+        <h3>Aktivacione funkcije:</h3>
+
+        <div class="row p-2 m-2" style="align-self: center;">
+            <div class="col-3">
+                <label for="hiddenLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija
+                    aktivacije skrivenih
+                    slojeva:</label>
+            </div>
+            <div class="col-3">
+                <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index">
+                    <div class="input-group mb-2">
+                        <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]">
+                            <option
+                                *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                                [value]="option">
+                                {{ optionName }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+            </div>
+            <div class="col-3">
+                <label for="outputLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija
+                    aktivacije izlaznog
+                    sloja:</label>
+            </div>
+            <div class="col-3">
+                <select id=outputLayerActivationFunctionOptions class="form-control"
+                    name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
+                    <option
+                        *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
+                        [value]="option">
+                        {{ optionName }}
+                    </option>
+                </select>
+            </div>
+            <div class="col">
+            </div>
+        </div>
+    </div>
+    <br><br>
+    <hr>
+    <div class="form-check form-check-inline overflow-auto " style="width: max-content;">
+        <h3>Izaberite metrike:</h3>
+        <div id="divMetricsinput">
+
+            <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;">
+                <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2">
+                    {{optionName}}
+                </label>
+            </div>
+        </div>
+    </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)="addModel();">Sačuvaj
+            model</button>
+        <div class="col"></div>
+    </div>
+</div>
\ No newline at end of file
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 00532bea..1d38de68 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ b/frontend/src/app/_elements/model-load/model-load.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import Shared from 'src/app/Shared';
+import Model, { ActivationFunction, Encoding, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
+import { ModelsService } from 'src/app/_services/models.service';
 
 @Component({
   selector: 'app-model-load',
@@ -7,9 +10,70 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ModelLoadComponent implements OnInit {
 
-  constructor() { }
+  newModel: Model = new Model();
+
+  ProblemType = ProblemType;
+  Encoding = Encoding;
+  ActivationFunction = ActivationFunction;
+  metrics: any = Metrics;
+  LossFunction = LossFunction;
+  Optimizer = Optimizer;
+  Object = Object;
+  document = document;
+  shared = Shared;
+
+  term: string = "";
+  selectedProblemType: string = '';
+  selectedMetrics = [];
+  tempTestSetDistribution = 90;
+  lossFunction: any = LossFunction;
+
+  constructor(private models: ModelsService) { }
 
   ngOnInit(): void {
   }
 
+  getMetrics() {
+    this.newModel.metrics = [];
+    let cb = document.getElementsByName("cbmetrics");
+
+    for (let i = 0; i < cb.length; i++) {
+      let chb = <HTMLInputElement>cb[i];
+      if (chb.checked == true)
+        this.newModel.metrics.push(chb.value);
+    }
+  }
+
+  addModel() {
+    this.getMetrics();
+
+    this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
+    this.newModel.username = Shared.username;
+
+    this.models.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
+    }, (error) => {
+      Shared.openDialog('Greška', 'Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom.');
+    });
+  }
+
+  filterOptions() {
+    switch (this.newModel.type) {
+      case 'regresioni':
+        this.lossFunction = LossFunctionRegression;
+        this.metrics = MetricsRegression;
+        break;
+      case 'binarni-klasifikacioni':
+        this.lossFunction = LossFunctionBinaryClassification;
+        this.metrics = MetricsBinaryClassification;
+        break;
+      case 'multi-klasifikacioni':
+        this.lossFunction = LossFunctionMultiClassification;
+        this.metrics = MetricsMultiClassification;
+        break;
+      default:
+        break;
+    }
+  }
 }
diff --git a/frontend/src/app/_pages/add-model/add-model.component.css b/frontend/src/app/_pages/add-model/add-model.component.css
deleted file mode 100644
index 7f05af0f..00000000
--- a/frontend/src/app/_pages/add-model/add-model.component.css
+++ /dev/null
@@ -1,42 +0,0 @@
-#header {
-    background-color: #003459;
-    padding-top: 30px;
-    padding-bottom: 20px;
-}
-#header h1 {
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    text-align: center;
-    color: white;
-}
-
-#container {
-    border-radius: 8px;
-}
-
-#wrapper {
-    color: #003459;
-}
-
-.btnType1 {
-    background-color: #003459;
-    color: white;
-}
-.btnType2 {
-    background-color: white;
-    color: #003459;
-    border-color: #003459;
-}
-.selectedDatasetClass {
-    /*border-color: 2px solid #003459;*/
-    background-color: lightblue;
-}
-ul li:hover {
-    background-color: lightblue;
-}
-
-#divInputs {
-    margin-left: 20px;
-}
-#divOutputs {
-    margin-left: 20px;
-}
diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html
deleted file mode 100644
index 179e9aea..00000000
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ /dev/null
@@ -1,428 +0,0 @@
-<!--<div id="header">
-    <h1>Napravite svoj model veštačke neuronske mreže</h1>
-</div>
-
-<div id="wrapper">
-    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
-        <div class="form-group row mt-3 mb-2 d-flex justify-content-center">
-            <h2 class="col-2"> Nov model: </h2>
-            <div class="col-3">
-                <label for="name" class="col-form-label">Naziv modela:</label>
-                <input type="text" class="form-control" name="name" placeholder="Naziv..." [(ngModel)]="newModel.name">
-            </div>
-            <div class="col-5">
-                <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
-                <div>
-                    <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>
-
-        <div class="py-3 pr-5 justify-content-center">
-
-            <app-dataset-load (selectedDatasetChangeEvent)="datasetHasChanged($event)"></app-dataset-load>
-
-        </div>
-        <span id="selectInAndOuts"></span>
-        <div
-            *ngIf="selectedDataset && ((showMyDatasets && selectedDatasetLoaded) || (!showMyDatasets && datasetLoaded))">
-            <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.header; let i = index">
-                            <input class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}"
-                                name="cbsNew" [checked]="this.selectedOutputColumnVal != item"
-                                [disabled]="this.selectedOutputColumnVal == item">&nbsp;
-                            <label class="form-check-label" for="cb_{{item}}">
-                                {{item}}
-                            </label>
-                        </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.header; let i = index">
-                            <input class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbsNew"
-                                (change)="this.selectedOutputColumnVal = item">&nbsp;
-                            <label class="form-check-label" for="rb_{{item}}">
-                                {{item}}
-                            </label>
-                        </div>
-                    </div>
-                </div>
-
-
-                <div class="mt-5" *ngIf="datasetFile">
-                    <h2>Popunjavanje nedostajućih vrednosti:</h2>
-                    <div class="form-check">
-                        <input type="radio" [(ngModel)]="newModel.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</label><br>
-                        <input type="radio" [(ngModel)]="newModel.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</label><br>
-                        <input type="radio" [(ngModel)]="newModel.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 id="columnReplacers">
-                                    <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3">
-                                        <div *ngIf="getInputById('cb_'+column).checked" class="">
-                                            <span class="w-20 mx-3">
-                                                {{column}}&nbsp;<span class="small"
-                                                    style="color:gray;">({{calculateSumOfNullValuesInCol(column)}}
-                                                    null)</span>
-                                            </span>
-
-                                            <label *ngIf="calculateSumOfNullValuesInCol(column)==0"
-                                                class="text-center form-control mx-3 text-secondary">Ova kolona nema
-                                                nedostajućih
-                                                vrednosti.</label>
-
-                                            <div *ngIf="calculateSumOfNullValuesInCol(column)!=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" class="form-control">
-                                                                Zameni
-                                                                <input type="radio" [id]="'fillCol_'+column"
-                                                                    [name]="'delOp_'+column">
-                                                            </label>
-                                                        </div>
-                                                        <input type="text" class="form-control"
-                                                            [id]="'fillText_'+column"
-                                                            (keyup)="checkFillColRadio(column)"
-                                                            placeholder="Unesi vrednost...">
-
-                                                        <div class="input-group-append">
-                                                            <select [id]="'replaceOptions'+i"
-                                                                class="form-control btn-primary"
-                                                                *ngIf="isNumber(datasetFile[1][i])"
-                                                                (change)="replaceWithSelectedNumber($event);">
-                                                                <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="!isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0"
-                                                                (change)="replaceWithSelectedString($event);">
-                                                                <option
-                                                                    *ngFor="let option of arrayColumn(datasetFile, i)"
-                                                                    [value]="option">
-                                                                    {{ option }}
-                                                                </option>
-                                                            </select>
-                                                        </div>
-                                                    </div>
-                                                </div>
-
-                                                <div class="flex-shrink-1 mx-3">
-                                                    <div class="input-group">
-                                                        <label class="form-control" [for]="'delCol_'+column">Izbriši
-                                                            kolonu
-                                                            <input type="radio" [id]="'delCol_'+column"
-                                                                [name]="'delOp_'+column"
-                                                                (change)="emptyFillTextInput(column)"></label>
-                                                    </div>
-                                                </div>
-
-                                                <div class="flex-shrink-1 mx-3">
-                                                    <div class="input-group">
-                                                        <label class="form-control" [for]="'delRows_'+column">Izbriši
-                                                            redove
-                                                            <input type="radio" [id]="'delRows_'+column"
-                                                                [name]="'delOp_'+column" checked
-                                                                (change)="emptyFillTextInput(column)"></label>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3">
-                                        <div class="input-group row" *ngIf="getInputById('rb_'+column).checked">
-                                            <span class="input-group-text col-2 text-center">
-                                                {{column}}&nbsp;<span class="small"
-                                                    style="color:gray;">({{calculateSumOfNullValuesInCol(column)}}
-                                                    null)</span>
-                                            </span>
-                                            <label *ngIf="calculateSumOfNullValuesInCol(column)==0"
-                                                class="form-control">Ova kolona nema nedostajućih vrednosti.</label>
-
-                                            <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio"
-                                                [id]="'fillCol_'+column" class="col-1 mt-2" [name]="'delOp_'+column">
-                                            <select [id]="'replaceOptions'+i" class="form-control col-2"
-                                                *ngIf="isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0"
-                                                (change)="replaceWithSelectedNumber($event);">
-                                                <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 col-2"
-                                                *ngIf="!isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0"
-                                                (change)="replaceWithSelectedString($event);">
-                                                <option *ngFor="let option of arrayColumn(datasetFile, i)"
-                                                    [value]="option">
-                                                    {{ option }}
-                                                </option>
-                                            </select>
-                                            <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="text"
-                                                class="form-control col-1" [id]="'fillText_'+column"
-                                                (keyup)="checkFillColRadio(column)" placeholder="Unesi vrednost...">
-
-                                            <label *ngIf="calculateSumOfNullValuesInCol(column)!=0"
-                                                class="form-control col-2" [for]="'delCol_'+column">Izbriši kolonu
-                                                <input type="radio" [id]="'delCol_'+column" [name]="'delOp_'+column"
-                                                    (change)="emptyFillTextInput(column)"></label>
-                                            <label *ngIf="calculateSumOfNullValuesInCol(column)!=0"
-                                                class="form-control col-2" [for]="'delRows_'+column">Izbriši redove
-                                                <input type="radio" [id]="'delRows_'+column" [name]="'delOp_'+column"
-                                                    (change)="emptyFillTextInput(column)" checked></label>
-                                        </div>
-                                    </div>
-
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <h2 class="mt-5 mb-4">Parametri treniranja:</h2>
-        <div>
-            <div class="row p-2">
-                <div class="col-1">
-                </div>
-                <div class="col-3">
-                    <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()">
-                        <option
-                            *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-                <div class="col-1">
-                </div>
-                <div class="col-3">
-                    <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])">
-                </div>
-            </div>
-
-            <div class="row p-2">
-                <div class="col-1">
-                </div>
-                <div class="col-3">
-                    <label for="encoding" class="col-form-label">Enkoding: </label>
-                </div>
-                <div class="col-2">
-                    <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
-                        <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-
-                <div class="col-1">
-                </div>
-                <div class="col-3">
-                    <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">
-                </div>
-            </div>
-
-            <div class="row p-2">
-                <div class="col-1">
-                </div>
-                <div class="col-3">
-                    <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">
-                        <option
-                            *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-                <div class="col-1">
-                </div>
-                <div class="col-3">
-                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
-                </div>
-                <div class="col-1">
-                    <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
-                </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>
-                </div>
-                <div class="col-2">
-                    <select id=lossFunctionOptions class="form-control" name="lossFunction"
-                        [(ngModel)]="newModel.lossFunction" aria-checked="true">
-                        <option
-                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-                <div class="col-1"></div>
-                <div class="col-3 mt-2">
-                    <label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
-                    <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder"
-                        type="checkbox" value="" checked>
-                </div>
-            </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]="newModel.randomTestSet"
-                                    (change)="newModel.randomTestSet = !newModel.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]="!newModel.randomTestSet"
-                            [(ngModel)]="tempTestSetDistribution">
-                        </mat-slider>
-                        test
-                    </div>
-                </div>
-
-                <div class="row p-2 mx-2">
-                    <div class="col-4">
-                        <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
-                            skup:</label>
-                    </div>
-                    <div class="col-2">
-                        <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
-                            [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet">
-                    </div>
-                </div>
-            </div>
-            <h3>Aktivacione funkcije:</h3>
-
-            <div class="row p-2 m-2" style="align-self: center;">
-                <div class="col-3">
-                    <label for="hiddenLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija aktivacije skrivenih
-                        slojeva:</label>
-                </div>
-                <div class="col-3">
-                    <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index">
-                        <div class="input-group mb-2">
-                            <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]">
-                                <option
-                                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                                    [value]="option">
-                                    {{ optionName }}
-                                </option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-3">
-                    <label for="outputLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija aktivacije izlaznog
-                        sloja:</label>
-                </div>
-                <div class="col-3">
-                    <select id=outputLayerActivationFunctionOptions class="form-control"
-                        name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
-                        <option
-                            *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-                <div class="col">
-                </div>
-            </div>
-        </div>
-        <br><br>
-        <hr>
-        <div class="form-check form-check-inline overflow-auto " style="width: max-content;">
-            <h3>Izaberite metrike:</h3>
-            <div id="divMetricsinput">
-
-                <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;">
-                    <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2">
-                        {{optionName}}
-                    </label>
-                </div>
-            </div>
-        </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)="addModel();">Sačuvaj model</button>
-            <div class="col"></div>
-            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
-                (click)="trainModel();">Treniraj model</button>
-            <div class="col"></div>
-        </div>
-
-        <div class="m-3" *ngIf="trainingResult">
-            <h2>Rezultati treniranja</h2>
-            <p>
-                {{trainingResult}}
-            </p>
-        </div>
-    </div>
-</div>
--->
\ No newline at end of file
diff --git a/frontend/src/app/_pages/add-model/add-model.component.spec.ts b/frontend/src/app/_pages/add-model/add-model.component.spec.ts
deleted file mode 100644
index 2926e1c4..00000000
--- a/frontend/src/app/_pages/add-model/add-model.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AddModelComponent } from './add-model.component';
-
-describe('AddModelComponent', () => {
-  let component: AddModelComponent;
-  let fixture: ComponentFixture<AddModelComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AddModelComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AddModelComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts
deleted file mode 100644
index ba8f7d01..00000000
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ /dev/null
@@ -1,508 +0,0 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import Model, { LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, NullValReplacer, ReplaceWith } from 'src/app/_data/Model';
-import { ProblemType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions, Metrics, MetricsRegression, MetricsBinaryClassification, MetricsMultiClassification } from 'src/app/_data/Model';
-import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component';
-import { ModelsService } from 'src/app/_services/models.service';
-import shared from 'src/app/Shared';
-import Dataset from 'src/app/_data/Dataset';
-import { DatasetsService } from 'src/app/_services/datasets.service';
-import { CsvParseService } from 'src/app/_services/csv-parse.service';
-
-
-@Component({
-  selector: 'app-add-model',
-  templateUrl: './add-model.component.html',
-  styleUrls: ['./add-model.component.css']
-})
-export class AddModelComponent implements OnInit {
-
-  newModel: Model;
-
-  ProblemType = ProblemType;
-  Encoding = Encoding;
-  ActivationFunction = ActivationFunction;
-  metrics: any = Metrics;
-  LossFunction = LossFunction;
-  lossFunction: any = LossFunction;
-  Optimizer = Optimizer;
-  NullValueOptions = NullValueOptions;
-  ReplaceWith = ReplaceWith;
-  Object = Object;
-  document = document;
-  shared = shared;
-
-  selectedOutputColumnVal: string = '';
-
-  showMyDatasets: boolean = true;
-  myDatasets?: Dataset[];
-  existingDatasetSelected: boolean = false;
-  selectedDataset?: Dataset;
-  otherDataset?: Dataset;
-  otherDatasetFile?: any[];
-  datasetFile?: any[];
-  datasetHasHeader?: boolean = true;
-
-  tempTestSetDistribution: number = 90;
-
-  //accepted: Boolean;
-  term: string = "";
-
-  selectedProblemType: string = '';
-  selectedMetrics = [];
-
-  trainingResult: string | undefined;
-
-  constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService) {
-    this.newModel = new Model();
-
-    this.datasets.getMyDatasets().subscribe((datasets) => {
-      this.myDatasets = datasets;
-    });
-  }
-
-  ngOnInit(): void {
-    (<HTMLInputElement>document.getElementById("btnMyDataset")).focus();
-  }
-
-  datasetHasChanged(selectedDataset: Dataset) {
-    this.selectedDataset = selectedDataset;
-    this.resetCbsAndRbs();
-    this.refreshThreeNullValueRadioOptions();
-  }
-
-  /*viewMyDatasetsForm() {
-    this.showMyDatasets = true;
-    this.resetSelectedDataset();
-    //this.datasetLoaded = false;
-    this.resetCbsAndRbs();
-  }
-  viewNewDatasetForm() {
-    this.showMyDatasets = false;
-    this.resetSelectedDataset();
-    this.resetCbsAndRbs();
-  }*/
-
-  addModel() {
-    if (!this.showMyDatasets)
-      this.saveModelWithNewDataset(_ => { console.log('MODEL ADDED (with new dataset).') });
-    else
-      this.saveModelWithExistingDataset(_ => { console.log('MODEL ADDED (with existing dataset).') });
-  }
-
-  trainModel() {
-    let saveFunc;
-    this.trainingResult = undefined;
-
-    if (!this.showMyDatasets)
-      saveFunc = (x: (arg0: any) => void) => { this.saveModelWithNewDataset(x) };
-    else
-      saveFunc = (x: (arg0: any) => void) => { this.saveModelWithExistingDataset(x) };
-
-    saveFunc(((model: any) => {
-      console.log('Saved, training model...', model);
-      this.models.trainModel(model).subscribe(response => {
-        console.log('Train model complete!', response);
-        this.trainingResult = response;
-      });
-    })); //privremeno cuvanje modela => vraca id sacuvanog modela koji cemo da treniramo sad
-  }
-
-  saveModelWithNewDataset(callback: ((arg0: any) => void)) {
-    /*
-        this.getCheckedInputCols();
-        this.getCheckedOutputCol();
-        this.getMetrics();
-    
-        if (this.validationInputsOutput()) {
-          console.log('ADD MODEL: STEP 1 - UPLOAD FILE');
-          if (this.datasetLoadComponent) {
-            console.log("this.datasetLoadComponent.files:", this.datasetLoadComponent.files);
-            this.models.uploadData(this.datasetLoadComponent.files[0]).subscribe((file) => {
-              console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id);
-              if (this.datasetLoadComponent) {
-                this.datasetLoadComponent.dataset.fileId = file._id;
-                this.datasetLoadComponent.dataset.username = shared.username;
-    
-                this.datasets.addDataset(this.datasetLoadComponent.dataset).subscribe((dataset) => {
-                  console.log('ADD MODEL: STEP 3 - ADD MODEL WITH DATASET ID ', dataset._id);
-                  this.newModel.datasetId = dataset._id;
-    
-                  //da se doda taj dataset u listu postojecih, da bude izabran 
-                  this.refreshMyDatasetList();
-                  this.showMyDatasets = true;
-                  this.selectThisDataset(dataset);
-    
-                  this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
-                  this.tempTestSetDistribution = 90;
-                  this.newModel.username = shared.username;
-    
-                  this.newModel.nullValuesReplacers = this.getNullValuesReplacersArray();
-    
-                  this.models.addModel(this.newModel).subscribe((response) => {
-                    callback(response);
-                  }, (error) => {
-                    alert("Model sa unetim nazivom već postoji u Vašoj kolekciji.\nPromenite naziv modela i nastavite sa kreiranim datasetom.");
-                  }); //kraj addModel subscribe
-                }, (error) => {
-                  alert("Dataset sa unetim nazivom već postoji u Vašoj kolekciji.\nIzmenite naziv ili iskoristite postojeći dataset.");
-                }); //kraj addDataset subscribe
-              } //kraj treceg ifa
-            }, (error) => {
-              //alert("greska uploadData");
-            }); //kraj uploadData subscribe
-    
-          } //kraj drugog ifa
-        } //kraj prvog ifa*/
-  }
-
-  saveModelWithExistingDataset(callback: ((arg0: any) => void)): any {
-    /*if (this.selectedDataset) { //dataset je izabran
-      this.getCheckedInputCols();
-      this.getCheckedOutputCol();
-      this.getMetrics();
-      if (this.validationInputsOutput()) {
-        this.newModel.datasetId = this.selectedDataset._id;
-
-        this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
-        this.tempTestSetDistribution = 90;
-        this.newModel.username = shared.username;
-
-        this.newModel.nullValuesReplacers = this.getNullValuesReplacersArray();
-
-        this.models.addModel(this.newModel).subscribe((response) => {
-          callback(response);
-        }, (error) => {
-          shared.openDialog("Neuspeo pokušaj!", "Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom.");
-        });
-      }
-    }
-    else {
-      alert("Molimo Vas da izaberete neki dataset iz kolekcije.");
-    }*/
-  }
-
-  getCheckedInputCols() {
-    /*this.newModel.inputColumns = [];
-    let checkboxes: any;
-
-    checkboxes = document.getElementsByName("cbsNew");
-
-    for (let i = 0; i < checkboxes.length; i++) {
-      let thatCb = <HTMLInputElement>checkboxes[i];
-      if (thatCb.checked == true) // && thatCb.disabled == false ne treba nam ovo vise
-        this.newModel.inputColumns.push(thatCb.value);
-    }*/
-    //console.log(this.checkedInputCols);
-  }
-  getCheckedOutputCol() {
-    /*this.newModel.columnToPredict = '';
-    let radiobuttons: any;
-
-    radiobuttons = document.getElementsByName("rbsNew");
-
-    for (let i = 0; i < radiobuttons.length; i++) {
-      let thatRb = <HTMLInputElement>radiobuttons[i];
-      if (thatRb.checked) {
-        this.newModel.columnToPredict = thatRb.value;
-        break;
-      }
-    }*/
-    //console.log(this.checkedOutputCol);
-  }
-  validationInputsOutput() {
-    /*if (this.newModel.inputColumns.length == 0 && this.newModel.columnToPredict == '') {
-      alert("Molimo Vas da izaberete ulazne i izlazne kolone za mrežu.");
-      return false;
-    }
-    else if (this.newModel.inputColumns.length == 0) {
-      shared.openDialog("Neuspeo pokušaj!", "Molimo Vas da izaberete ulaznu kolonu/kolone za mrežu.");
-      return false;
-    }
-    else if (this.newModel.columnToPredict == '') {
-      shared.openDialog("Neuspeo pokušaj!", "Molimo Vas da izaberete izlaznu kolonu za mrežu.");
-      return false;
-    }
-    for (let i = 0; i < this.newModel.inputColumns.length; i++) {
-      if (this.newModel.inputColumns[i] == this.newModel.columnToPredict) {
-        let colName = this.newModel.columnToPredict;
-        shared.openDialog("Neuspeo pokušaj!", "Izabrali ste istu kolonu (" + colName + ") kao ulaznu i izlaznu iz mreže. Korigujte izbor.");
-        return false;
-      }
-    }
-    return true;*/
-  }
-
-  /*selectThisDataset(dataset: Dataset) {
-    this.selectedDataset = dataset;
-    //this.selectedDatasetLoaded = false;
-    this.existingDatasetSelected = true;
-    this.datasetHasHeader = this.selectedDataset.hasHeader;
-
-    this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => {
-      if (file) {
-        this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
-        //for (let i = this.datasetFile.length - 1; i >= 0; i--) {  //moguce da je vise redova na kraju fajla prazno i sl.
-          //if (this.datasetFile[i].length != this.datasetFile[0].length)
-            //this.datasetFile[i].pop();
-          //else
-          //  break; //nema potrebe dalje
-        //}
-        //console.log(this.datasetFile);
-        this.resetCbsAndRbs();
-        this.refreshThreeNullValueRadioOptions();
-        //this.selectedDatasetLoaded = true;
-        this.scrollToNextForm();
-      }
-    });
-    //this.datasetHasHeader = false;
-  }*/
-
-  scrollToNextForm() {
-    (<HTMLSelectElement>document.getElementById("selectInAndOuts")).scrollIntoView({
-      behavior: "smooth",
-      block: "start",
-      inline: "nearest"
-    });
-  }
-
-  /*resetSelectedDataset(): boolean {
-    const temp = this.selectedDataset;
-    this.selectedDataset = this.otherDataset;
-    this.otherDataset = temp;
-    const tempFile = this.datasetFile;
-    this.datasetFile = this.otherDatasetFile;
-    this.otherDatasetFile = tempFile;
-    return true;
-  }*/
-  resetCbsAndRbs(): boolean {
-    this.uncheckRbs();
-    this.checkAllCbs();
-    return true;
-  }
-  checkAllCbs() {
-    let checkboxes: any;
-
-    checkboxes = document.getElementsByName("cbsNew");
-    for (let i = 0; i < checkboxes.length; i++) {
-      (<HTMLInputElement>checkboxes[i]).checked = true;
-      (<HTMLInputElement>checkboxes[i]).disabled = false;
-    }
-  }
-  uncheckRbs() {
-    this.selectedOutputColumnVal = '';
-    let radiobuttons: any;
-
-    radiobuttons = document.getElementsByName("rbsNew");
-    for (let i = 0; i < radiobuttons.length; i++)
-      (<HTMLInputElement>radiobuttons[i]).checked = false;
-  }
-
-  refreshMyDatasetList() {
-    this.datasets.getMyDatasets().subscribe((datasets) => {
-      this.myDatasets = datasets;
-    });
-  }
-
-  refreshThreeNullValueRadioOptions() {
-    this.newModel.nullValues = NullValueOptions.DeleteRows;
-  }
-
-  isChecked(someId: string) { //proveri ako je element sa datim ID-em cek
-    return (<HTMLInputElement>document.getElementById(someId)).checked;
-  }
-
-  isNumber(value: string | number): boolean {
-    return ((value != null) &&
-      (value !== '') &&
-      !isNaN(Number(value.toString())));
-  }
-
-  findColIndexByName(colName: string): number {
-    if (this.datasetFile)
-      for (let i = 0; i < this.datasetFile[0].length; i++)
-        if (colName === this.datasetFile[0][i])
-          return i;
-    return -1;
-  }
-  findColNameByIndex(index: number): string {
-    if (this.datasetFile)
-      if (this.datasetHasHeader && index < this.datasetFile[0].length)
-        return this.datasetFile[0][index];
-    return '';
-  }
-  emptyFillTextInput(colName: string) {
-    (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = "";
-  }
-
-  checkFillColRadio(colName: string) {
-    (<HTMLInputElement>document.getElementById("fillCol_" + colName)).checked = true;
-  }
-  calculateSumOfNullValuesInCol(colName: string): number {
-    //console.log(this.datasetFile);
-    if (this.datasetFile) {
-      let colIndex = this.findColIndexByName(colName);
-      let sumOfNulls = 0;
-
-      let startValue = (this.selectedDataset!.hasHeader) ? 1 : 0;
-      for (let i = startValue; i < this.datasetFile.length; i++) {
-        if (this.datasetFile[i][colIndex] == "" || this.datasetFile[i][colIndex] == undefined)
-          ++sumOfNulls;
-      }
-      return sumOfNulls;
-    }
-    return -1;
-  }
-  calculateMeanColValue(colName: string): number {
-    if (this.datasetFile) {
-      let colIndex = this.findColIndexByName(colName);
-      let sum = 0;
-      let n = 0;
-
-      let startValue = (this.selectedDataset!.hasHeader) ? 1 : 0;
-      for (let i = startValue; i < this.datasetFile.length; i++)
-        if (this.datasetFile[i][colIndex] != '') {
-          sum += Number(this.datasetFile[i][colIndex]);
-          ++n;
-        }
-      console.log(sum / n);
-      return (sum != 0) ? (sum / n) : 0;
-    }
-    return 0;
-  }
-  calculateMedianColValue(colName: string): number {
-    if (this.datasetFile) {
-      let array = [];
-      let colIndex = this.findColIndexByName(colName);
-
-      let startValue = (this.datasetHasHeader) ? 1 : 0;
-      for (let i = startValue; i < this.datasetFile.length; i++)
-        if (this.datasetFile[i][colIndex] != '')
-          array.push(Number(this.datasetFile[i][colIndex]));
-
-      array.sort();
-      if (array.length % 2 == 0)
-        return array[array.length / 2 - 1] / 2;
-      else
-        return array[(array.length - 1) / 2];
-    }
-    return 0;
-  }
-  replaceWithSelectedString(event: Event) {
-    let value = (<HTMLInputElement>event.target).value;
-    let colIndex = Number(((<HTMLSelectElement>event.target).id).split("replaceOptions")[1]);
-    let colName = this.findColNameByIndex(colIndex);
-
-    (<HTMLInputElement>document.getElementById("fillCol_" + colName)).checked = true;
-
-    if (!this.datasetHasHeader)
-      (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = value;
-    else {
-      if (value == colName)
-        (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = "";
-      else
-        (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = value;
-    }
-  }
-  replaceWithSelectedNumber(event: Event) {
-    let option = (<HTMLInputElement>event.target).value;
-    let colIndex = Number(((<HTMLSelectElement>event.target).id).split("replaceOptions")[1]);
-    let colName = this.findColNameByIndex(colIndex);
-
-    (<HTMLInputElement>document.getElementById("fillCol_" + colName)).checked = true;
-
-    if (option == ReplaceWith.Mean)
-      (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = this.calculateMeanColValue(colName).toString();
-    else if (option == ReplaceWith.Median)
-      (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = this.calculateMedianColValue(colName).toString();
-    else if (option == ReplaceWith.None)
-      (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = "";
-  }
-
-
-  getNullValuesReplacersArray(): NullValReplacer[] {
-    let array: NullValReplacer[] = [];
-
-    if (this.datasetFile) {
-
-      if (this.newModel.nullValues == NullValueOptions.Replace) {
-
-        for (let i = 0; i < this.datasetFile[0].length; i++) {
-          let column = this.datasetFile[0][i];
-
-          if (this.calculateSumOfNullValuesInCol(column) > 0) { //ako kolona nema null vrednosti, ne dodajemo je u niz
-            if ((<HTMLInputElement>document.getElementById("delCol_" + column)).checked) {
-              array.push({
-                column: column,
-                option: NullValueOptions.DeleteColumns,
-                value: ""
-              });
-            }
-            else if ((<HTMLInputElement>document.getElementById("delRows_" + column)).checked) {
-              array.push({
-                column: column,
-                option: NullValueOptions.DeleteRows,
-                value: ""
-              });
-            }
-            else if (((<HTMLInputElement>document.getElementById("fillCol_" + column)).checked)) {
-              array.push({
-                column: column,
-                option: NullValueOptions.Replace,
-                value: (<HTMLInputElement>document.getElementById("fillText_" + column)).value
-              });
-            }
-          }
-        }
-      }
-    }
-    //console.log(array);
-    return array;
-  }
-
-  getInputById(id: string): HTMLInputElement {
-    return document.getElementById(id) as HTMLInputElement;
-  }
-
-  arrayColumn = (arr: any[][], n: number) => [...this.dropEmptyString(new Set(arr.map(x => x[n])))];
-
-  dropEmptyString(set: Set<any>): Set<string> {
-    if (set.has(""))
-      set.delete("");
-    if (set.has(null))
-      set.delete(null);
-    if (set.has(undefined))
-      set.delete(undefined);
-    return set;
-  }
-
-  filterOptions() {
-    switch (this.newModel.type) {
-      case 'regresioni':
-        this.lossFunction = LossFunctionRegression;
-        this.metrics = MetricsRegression;
-        break;
-      case 'binarni-klasifikacioni':
-        this.lossFunction = LossFunctionBinaryClassification;
-        this.metrics = MetricsBinaryClassification;
-        break;
-      case 'multi-klasifikacioni':
-        this.lossFunction = LossFunctionMultiClassification;
-        this.metrics = MetricsMultiClassification;
-        break;
-      default:
-        break;
-    }
-  }
-
-  getMetrics() {
-    this.newModel.metrics = [];
-    let cb = document.getElementsByName("cbmetrics");
-
-    for (let i = 0; i < cb.length; i++) {
-      let chb = <HTMLInputElement>cb[i];
-      if (chb.checked == true)
-        this.newModel.metrics.push(chb.value);
-    }
-
-  }
-}
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 04523989..c3a2ce7a 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -11,7 +11,6 @@ import { Ng2SearchPipeModule } from 'ng2-search-filter';
 import { AppComponent } from './app.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { DatasetLoadComponent } from './_elements/dataset-load/dataset-load.component';
-import { AddModelComponent } from './_pages/add-model/add-model.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LoginModalComponent } from './_modals/login-modal/login-modal.component';
 import { ReactiveFormsModule } from '@angular/forms';
@@ -49,7 +48,6 @@ import { AddNewDatasetComponent } from './_elements/add-new-dataset/add-new-data
   declarations: [
     AppComponent,
     DatasetLoadComponent,
-    AddModelComponent,
     LoginModalComponent,
     RegisterModalComponent,
     HomeComponent,
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index 42f2993d..8d2c86b3 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -1,13 +1,201 @@
 <div id="header">
-    <h1>Napravite svoj model veštačke neuronske mreže</h1>
+    <h1>Napravite svoju veštačku neuronske mrežu</h1>
 </div>
 <div id="wrapper">
     <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
+
+
         <h2>1. Izvor podataka</h2>
         <app-dataset-load></app-dataset-load>
+
+
         <h2>2. Preprocesiranje</h2>
+        <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.header; let i = index">
+                            <input class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}"
+                                name="cbsNew" [checked]="this.selectedOutputColumnVal != item"
+                                [disabled]="this.selectedOutputColumnVal == item">&nbsp;
+                            <label class="form-check-label" for="cb_{{item}}">
+                                {{item}}
+                            </label>
+                        </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.header; let i = index">
+                            <input class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbsNew"
+                                (change)="this.selectedOutputColumnVal = item">&nbsp;
+                            <label class="form-check-label" for="rb_{{item}}">
+                                {{item}}
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <h3>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</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</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
+                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 id="columnReplacers">
+                        <div *ngFor="let column of selectedDataset.columnInfo; let i = index" class="my-3">
+                            <div *ngIf="getInputById('cb_'+column).checked" class="">
+                                <span class="w-20 mx-3">
+                                    {{column.name}}&nbsp;<span class="small" style="color:gray;">(
+                                        <!--{{//column.numNulls}}-->
+                                        TODO BROJ null)
+                                    </span>
+                                </span>
+
+                                <label *ngIf="column.numNull <= 0" class="text-center form-control mx-3 text-secondary">
+                                    Ova kolona nema
+                                    nedostajućih
+                                    vrednosti.
+                                </label>
+
+                                <div *ngIf="column.numNull > 0" class="d-flex flex-row justify-content-end">
+                                    <!-- ngIf colummn.numNulls == 0 -->
+                                    <div class="flex-grow-3 mx-3 me-auto">
+                                        <div class="input-group">
+                                            <div class="input-group-prepend">
+                                                <label [for]="'fillCol_'+column.name" class="form-control">
+                                                    Zameni
+                                                    <input type="radio" [id]="'fillCol_'+column.name"
+                                                        [name]="'delOp_'+column.name">
+                                                </label>
+                                            </div>
+                                            <input type="text" class="form-control" [id]="'fillText_'+column.name"
+                                                (keyup)="checkFillColRadio(column.name)"
+                                                placeholder="Unesi vrednost...">
+
+                                            <div class="input-group-append">
+                                                <select [id]="'replaceOptions'+i" class="form-control btn-primary"
+                                                    *ngIf="column.isNumber" (change)="replace($event);">
+                                                    <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.numNull > 0"
+                                                    (change)="replace($event);">
+                                                    <option *ngFor="let option of column.uniqueValues" [value]="option">
+                                                        {{ option }}
+                                                    </option>
+                                                </select>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                    <div class="flex-shrink-1 mx-3">
+                                        <div class="input-group">
+                                            <label class="form-control" [for]="'delCol_'+column.name">Izbriši
+                                                kolonu
+                                                <input type="radio" [id]="'delCol_'+column"
+                                                    [name]="'delOp_'+column.name"
+                                                    (change)="emptyFillTextInput(column.name)"></label>
+                                        </div>
+                                    </div>
+
+                                    <div class="flex-shrink-1 mx-3">
+                                        <div class="input-group">
+                                            <label class="form-control" [for]="'delRows_'+column.name">Izbriši
+                                                redove
+                                                <input type="radio" [id]="'delRows_'+column.name"
+                                                    [name]="'delOp_'+column.name" checked
+                                                    (change)="emptyFillTextInput(column.name)"></label>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div *ngFor="let column of selectedDataset.columnInfo; let i = index" class="my-3">
+                            <div class="input-group row" *ngIf="getInputById('rb_'+column.name).checked">
+                                <span class="input-group-text col-2 text-center">
+                                    {{column}}&nbsp;<span class="small" style="color:gray;">(br
+                                        null)</span>
+                                </span>
+                                <label *ngIf="true" class="form-control">Ova
+                                    kolona nema nedostajućih vrednosti.</label>
+
+                                <input *ngIf="true" type="radio" [id]="'fillCol_'+column.name" class="col-1 mt-2"
+                                    [name]="'delOp_'+column.name">
+                                <select [id]="'replaceOptions'+i" class="form-control col-2" *ngIf="column.isNumber"
+                                    (change)="replace($event);">
+                                    <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 col-2" *ngIf="!column.isNumber"
+                                    (change)="replace($event);">
+                                    <option *ngFor="let option of []" [value]="option">
+                                        <!--/*arrayColumn(datasetFile, i)*/-->
+                                        {{ option }}
+                                    </option>
+                                </select>
+                                <input *ngIf="true" type="text" class="form-control col-1"
+                                    [id]="'fillText_'+column.name" (keyup)="checkFillColRadio(column.name)"
+                                    placeholder="Unesi vrednost...">
+
+                                <label *ngIf="true" class="form-control col-2" [for]="'delCol_'+column" .name>Izbriši
+                                    kolonu
+                                    <input type="radio" [id]="'delCol_'+column.name" [name]="'delOp_'+column.name"
+                                        (change)="emptyFillTextInput(column.name)"></label>
+                                <label *ngIf="true" class="form-control col-2" [for]="'delRows_'+column.name">Izbriši
+                                    redove
+                                    <input type="radio" [id]="'delRows_'+column.name" [name]="'delOp_'+column.name"
+                                        (change)="emptyFillTextInput(column.name)" checked></label>
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
         <h2>3. Podešavanja mreže</h2>
         <app-model-load></app-model-load>
-        <h2>4. Rezultati treniranja</h2>
+
+
+        <h2>4. Treniraj model</h2>
+        <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
+            model</button>
+        <h3>Rezultati treniranja</h3>
+        <div class="m-3" *ngIf="trainingResult">
+            <h2 class="my-2">Rezultati treniranja:</h2>
+            <p>
+                {{trainingResult}}
+            </p>
+        </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 16de7351..2309dcd7 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -1,4 +1,9 @@
 import { Component, OnInit } from '@angular/core';
+import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith } from '../_data/Experiment';
+import Model from '../_data/Model';
+import Dataset from '../_data/Dataset';
+import { ModelsService } from '../_services/models.service';
+import Shared from '../Shared';
 
 @Component({
   selector: 'app-experiment',
@@ -7,9 +12,107 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ExperimentComponent implements OnInit {
 
-  constructor() { }
+  experiment: Experiment = new Experiment();
+  selectedModel?: Model;
+  selectedDataset?: Dataset;
+  trainingResult: any; // any za sad, promeni kasnije
+
+  NullValueOptions = NullValueOptions;
+  ReplaceWith = ReplaceWith;
+  Object = Object;
+
+  selectedOutputColumnVal: string = '';
+
+  constructor(private models: ModelsService) { }
 
   ngOnInit(): void {
   }
 
+  getInputById(id: string): HTMLInputElement {
+    return document.getElementById(id) as HTMLInputElement;
+  }
+
+  arrayColumn = (arr: any[][], n: number) => [...this.dropEmptyString(new Set(arr.map(x => x[n])))];
+
+  dropEmptyString(set: Set<any>): Set<string> {
+    if (set.has(""))
+      set.delete("");
+    if (set.has(null))
+      set.delete(null);
+    if (set.has(undefined))
+      set.delete(undefined);
+    return set;
+  }
+
+  emptyFillTextInput(colName: string) {
+    (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = "";
+  }
+
+  checkFillColRadio(colName: string) {
+    (<HTMLInputElement>document.getElementById("fillCol_" + colName)).checked = true;
+  }
+
+  replace(event: Event) {
+    let option = (<HTMLInputElement>event.target).value;
+    // TODO
+  }
+
+  getNullValuesReplacersArray()/*: NullValReplacer[]*/ {
+    let array: NullValReplacer[] = [];
+
+    // TODO ispravi
+    /*if (this.datasetFile) {
+
+      if (this.newModel.nullValues == NullValueOptions.Replace) {
+
+        for (let i = 0; i < this.datasetFile[0].length; i++) {
+          let column = this.datasetFile[0][i];
+
+          if (this.calculateSumOfNullValuesInCol(column) > 0) { //ako kolona nema null vrednosti, ne dodajemo je u niz
+            if ((<HTMLInputElement>document.getElementById("delCol_" + column)).checked) {
+              array.push({
+                column: column,
+                option: NullValueOptions.DeleteColumns,
+                value: ""
+              });
+            }
+            else if ((<HTMLInputElement>document.getElementById("delRows_" + column)).checked) {
+              array.push({
+                column: column,
+                option: NullValueOptions.DeleteRows,
+                value: ""
+              });
+            }
+            else if (((<HTMLInputElement>document.getElementById("fillCol_" + column)).checked)) {
+              array.push({
+                column: column,
+                option: NullValueOptions.Replace,
+                value: (<HTMLInputElement>document.getElementById("fillText_" + column)).value
+              });
+            }
+          }
+        }
+      }
+    }
+    //console.log(array);
+    return array;*/
+  }
+
+  trainModel() {
+    this.trainingResult = undefined;
+    console.log('Training model...', this.selectedModel);
+    if (!this.selectedDataset) {
+      Shared.openDialog('Greška', 'Izvor podataka nije izabran!');
+      return;
+    }
+    // TODO proveri nullValues
+    if (!this.selectedModel) {
+      Shared.openDialog('Greška', 'Model nije izabran!');
+      return;
+    }
+    this.models.trainModel(this.selectedModel).subscribe((response: any) => {
+      console.log('Train model complete!', response);
+      this.trainingResult = response;
+    });
+  }
 }