Doradjeno cuvanje eksperimenta i obavestavanje parent komponente. Ispravljen bag - graph se update-uje pri cuvanju/izmeni eksperimenta. Obrisane bespotrebne komponente.

9 files changed, 25 insertions, 531 deletions

diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts
index 330c42ee..44a15f22 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -24,6 +24,7 @@ export class ColumnTableComponent implements AfterViewInit {
   @Input() experiment!: Experiment;
   @Output() okPressed: EventEmitter<string> = new EventEmitter();
   @Output() columnTableChanged = new EventEmitter();
+  @Output() experimentChanged = new EventEmitter();
 
   Object = Object;
   Encoding = Encoding;
@@ -231,9 +232,9 @@ export class ColumnTableComponent implements AfterViewInit {
     });
     dialogRef.afterClosed().subscribe(experiment => {
       if (experiment) {
-        this.experiment = experiment;
-        /*this.experiment._id = experiment._id; //MORA OVAKO
-        this.experiment.name = experiment.name;*/
+        Object.assign(this.experiment, experiment);
+        this.experiment._columnsSelected = true;
+        this.experimentChanged.emit();
         console.log(this.experiment);
       }
     });
@@ -241,7 +242,9 @@ export class ColumnTableComponent implements AfterViewInit {
 
   openUpdateExperimentDialog() {
     this.experimentService.updateExperiment(this.experiment).subscribe((response) => {
-      this.experiment = response;
+      Object.assign(this.experiment, response);
+      this.experiment._columnsSelected = true;
+      this.experimentChanged.emit();
       Shared.openDialog("Izmena eksperimenta", "Uspešno ste izmenili podatke o eksperimentu.");
     });
   }
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index fabb524c..e60f041e 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -360,6 +360,12 @@ export class FolderComponent implements AfterViewInit {
     }
     this.searchTermsChanged();
   }
+
+  updateExperiment() {
+    if (this.formModel) {
+      this.formModel.updateGraph();
+    }
+  }
 }
 
 export enum Privacy {
diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html
index 8ec29a09..4e0d1cfb 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -109,7 +109,7 @@
 
             <div class="col-sm-9">
                 <!-- {{forExperiment._columnsSelected}} -->
-                <app-graph [model]="newModel" *ngIf="forExperiment._columnsSelected" [inputColumns]="forExperiment.inputColumns"></app-graph>
+                <app-graph [model]="newModel" *ngIf="forExperiment._columnsSelected" [inputColumns]="getInputColumns()"></app-graph>
                 <app-graph [model]="newModel" *ngIf="!forExperiment._columnsSelected" [inputColumns]="['Nisu odabrane ulazne kolone']"></app-graph>
             </div>
         </div>
@@ -124,9 +124,9 @@
             <button class="btn-clear btn-icon bubble" (click)="removeLayer()">
                 <mat-icon>remove</mat-icon>
             </button>
-            
+
             <div>{{newModel.hiddenLayers}}</div>
-            
+
             <button class="btn-clear btn-icon bubble" (click)="addLayer()">
                 <mat-icon>add</mat-icon>
             </button>
diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts
index 71b374b0..b9976b84 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.ts
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -135,4 +135,8 @@ export class FormModelComponent implements AfterViewInit {
   updateTestSet(event: MatSliderChange) {
     this.testSetDistribution = event.value!;
   }
+
+  getInputColumns() {
+    return this.forExperiment.inputColumns.filter(x => x != this.forExperiment.outputColumn);
+  }
 }
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 2b32db81..28bacf1f 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -32,7 +32,7 @@
         </div>
         <div #steps id="step_2" class="step-content">
             <div class="step-content-inside">
-                <app-column-table (okPressed)="goToPage(2); experiment._columnsSelected = true;" (columnTableChanged)="columnTableChangedEvent()" [experiment]="experiment" [dataset]="dataset"></app-column-table>
+                <app-column-table (okPressed)="goToPage(2); experiment._columnsSelected = true;" (columnTableChanged)="columnTableChangedEvent()" (experimentChanged)="experimentChangedEvent()" [experiment]="experiment" [dataset]="dataset"></app-column-table>
             </div>
         </div>
         <div #steps id="step_3" class="step-content">
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 1dc18a78..97029565 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -147,6 +147,10 @@ export class ExperimentComponent implements AfterViewInit {
     //console.log("promenio se column-table");
   }
 
+  experimentChangedEvent() {
+    this.folderModel.updateExperiment();
+  }
+
   setDataset(dataset: FolderFile) {
     const d = <Dataset>dataset;
     this.experiment.datasetId = d._id;
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
deleted file mode 100644
index 62236cce..00000000
--- a/frontend/src/app/experiment/experiment.component.html
+++ /dev/null
@@ -1,255 +0,0 @@
-<div id="header">
-    <h1>Napravite svoju veštačku neuronsku mrežu</h1>
-</div>
-<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>
-            <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1">Preprocesiranje</a>
-            <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2">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 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" (change)="checkedColumnsChanged(item, 0); resetColumnEncodings();">&nbsp;
-                                            <label class="form-check-label" for="cb_{{item.columnName}}">
-                                            {{item.columnName}}
-                                        </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.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 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 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
-                            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
-                            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">
-                                        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>
-
-                                                    <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);">
-                                                                <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);">
-                                                                <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.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
-                                                            redove
-                                                            <input type="radio" [id]="'delRows_'+column.columnName"
-                                                                [name]="'delOp_'+column.columnName" checked
-                                                                (change)="emptyFillTextInput(column.columnName)"></label>
-                                                            </div>
-                                                        </div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </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">
-                                        <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="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">
-                                </div>
-                            </div>
-                        </div>
-
-                        <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 class="carousel-item mt-2">
-                    <h2 class="mb-4">3. Dodaj eskperiment</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>
-                            <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>
-                        </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>
-    </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
deleted file mode 100644
index 2d0f6ec5..00000000
--- a/frontend/src/app/experiment/experiment.component.ts
+++ /dev/null
@@ -1,222 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith, Encoding } from '../_data/Experiment';
-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';
-
-@Component({
-  selector: 'app-experiment',
-  templateUrl: './experiment.component.html',
-  styleUrls: ['./experiment.component.css']
-})
-export class ExperimentComponent implements OnInit {
-
-  experiment: Experiment = new Experiment();
-  selectedModel?: Model;
-  selectedDataset?: Dataset;
-  trainingResult: any; // any za sad, promeni kasnije
-
-  NullValueOptions = NullValueOptions;
-  ReplaceWith = ReplaceWith;
-  Encoding = Encoding;
-  ColumnEncoding = ColumnEncoding;
-  Object = Object;
-  ProblemType=ProblemType;
-  selectedColumnsInfoArray: ColumnInfo[] = [];
-  selectedNotNullColumnsArray: string[] = [];
-
-  tempTestSetDistribution = 90;
-
-  constructor(private modelsService: ModelsService, private experimentsService: ExperimentsService) {
-  }
-
-  ngOnInit(): void {
-  }
-
-  updateDataset(dataset: Dataset) {
-    this.selectedDataset = dataset;
-    this.selectedColumnsInfoArray = this.selectedDataset.columnInfo;
-    this.selectedNotNullColumnsArray = [];
-    this.experiment.outputColumn = this.selectedDataset.columnInfo[this.selectedDataset.columnInfo.length - 1].columnName;
-
-    this.resetColumnEncodings();
-    console.log(this.experiment.encodings);
-  }
-
-  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 {
-    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;
-  }
-
-  checkedColumnsChanged(checkedColumnInfo: ColumnInfo, buttonType: number) { //0-input,1-output
-    let col = this.selectedColumnsInfoArray.find(x => x.columnName == checkedColumnInfo.columnName);
-    if (buttonType == 0) { //inputCol
-      if (col == undefined)
-        this.selectedColumnsInfoArray.push(checkedColumnInfo);
-      else
-        this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.columnName != checkedColumnInfo.columnName);
-    }
-    else { //outputCol
-      if (col == undefined) //ako je vec cekiran neki output, samo dodaj sad ovaj, a taj output postaje input i ostaje u nizu
-        this.selectedColumnsInfoArray.push(checkedColumnInfo);
-    }
-    //console.log(this.selectedColumnsInfoArray);
-  }
-
-  replace(event: Event, column: ColumnInfo) {
-    let option = (<HTMLInputElement>event.target).value;
-
-    const input = (<HTMLInputElement>document.getElementById("fillText_" + column.columnName));
-    if (column.isNumber) {
-      switch (option) {
-        case ReplaceWith.Max:
-          input.value = "" + column.max;
-          break;
-        case ReplaceWith.Min:
-          input.value = "" + column.min;
-          break;
-        case ReplaceWith.Mean:
-          input.value = "" + column.mean;
-          break;
-        case ReplaceWith.Median:
-          input.value = "" + column.median;
-          break;
-        case ReplaceWith.None:
-          break;
-      }
-    } else {
-      input.value = option;
-    }
-  }
-
-  getSelectedColumnsArrayWithoutNullVals(): string[] {
-    let colNames: string[] = [];
-
-    for (let i = 0; i < this.selectedColumnsInfoArray.length; i++) {
-      let oneColInfo = this.selectedColumnsInfoArray[i];
-      if (oneColInfo.numNulls == 0)
-        colNames.push(oneColInfo.columnName);
-    }
-    return colNames;
-  }
-
-  getNullValuesReplacersArray(): NullValReplacer[] {
-    let array: NullValReplacer[] = [];
-
-    if (this.experiment.nullValues == NullValueOptions.Replace) {
-
-      for (let i = 0; i < this.selectedColumnsInfoArray.length; i++) {
-        let oneColInfo = this.selectedColumnsInfoArray[i];
-
-        if (oneColInfo.numNulls > 0) { //ako kolona nema null vrednosti, ne dodajemo je u niz
-          if ((<HTMLInputElement>document.getElementById("delCol_" + oneColInfo.columnName)).checked) {
-            array.push({
-              column: oneColInfo.columnName,
-              option: NullValueOptions.DeleteColumns,
-              value: ""
-            });
-          }
-          else if ((<HTMLInputElement>document.getElementById("delRows_" + oneColInfo.columnName)).checked) {
-            array.push({
-              column: oneColInfo.columnName,
-              option: NullValueOptions.DeleteRows,
-              value: ""
-            });
-          }
-          else if (((<HTMLInputElement>document.getElementById("fillCol_" + oneColInfo.columnName)).checked)) {
-            array.push({
-              column: oneColInfo.columnName,
-              option: NullValueOptions.Replace,
-              value: (<HTMLInputElement>document.getElementById("fillText_" + oneColInfo.columnName)).value
-            });
-          }
-        }
-      }
-    }
-    return array;
-  }
-
-  saveExperiment() {
-    if (this.selectedDataset == undefined) {
-      Shared.openDialog("Greška", "Izvor podataka nije izabran!");
-      return;
-    }
-    if (this.experiment.outputColumn == '') {
-      Shared.openDialog("Greška", "Molimo Vas da izaberete izlaznu kolonu.");
-      return;
-    }
-    if (this.selectedColumnsInfoArray.length <= 1) { //jer izlazna je izabrana
-      Shared.openDialog("Greška", "Molimo Vas da izaberete ulazne kolone.");
-      return;
-    }
-
-    this.experiment._id = '';
-    this.experiment.uploaderId = '';
-    this.experiment.datasetId = this.selectedDataset._id;
-
-    let pom = this.selectedColumnsInfoArray.filter(x => x.columnName != this.experiment.outputColumn);
-    for (let i = 0; i < pom.length; i++)
-      this.experiment.inputColumns.push(pom[i].columnName);
-
-    this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.numNulls > 0); //obavezno
-    this.experiment.nullValuesReplacers = this.getNullValuesReplacersArray();
-
-    this.experiment.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
-
-    console.log("Eksperiment:", this.experiment);
-
-    this.experimentsService.addExperiment(this.experiment).subscribe((response) => {
-      this.experiment = response;
-
-      this.selectedColumnsInfoArray = []; 
-      this.selectedNotNullColumnsArray = [];
-      this.experiment.encodings = [];
-
-      Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran.");
-    }, (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.");
-      }
-    });
-  }
-
-  countSelectedNullCols(): number {
-    let counter: number = 0;
-
-    for (let i = 0; i < this.selectedColumnsInfoArray.length; i++) {
-      let oneColInfo = this.selectedColumnsInfoArray[i];
-      if (oneColInfo.numNulls > 0)
-        ++counter;
-    }
-    return counter;
-  }
-}
diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html
deleted file mode 100644
index 672e75fb..00000000
--- a/frontend/src/app/training/training.component.html
+++ /dev/null
@@ -1,46 +0,0 @@
-<div id="header">
-    <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 class="col-10">
-
-            <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)" [forExperiment]="selectedExperiment"></app-model-load>
-    
-            <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
-                    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>
-    </div>
-</div>
\ No newline at end of file