From 57f235fc814473f5be947e2b31e7d57f83fcbdd8 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Sun, 17 Apr 2022 21:52:27 +0200
Subject: Sredio komponentu za notifikacije, tako da moze da se skroluje ako
 ima puno notifikacija i da mogu da se obrisu notifikacije. Ako stigne
 notifikacija treniranja za isti model iz prethodne notifikacije, prethodna se
 prepisuje.

---
 frontend/src/app/_data/Notification.ts | 1 -
 1 file changed, 1 deletion(-)

(limited to 'frontend/src/app/_data')

diff --git a/frontend/src/app/_data/Notification.ts b/frontend/src/app/_data/Notification.ts
index c505d399..94a3be1d 100644
--- a/frontend/src/app/_data/Notification.ts
+++ b/frontend/src/app/_data/Notification.ts
@@ -1,5 +1,4 @@
 export default class Notification {
-    _id: string = '';
     constructor(
         public title: string = 'Treniranje u toku...',
         public id: string = '042',
-- 
cgit v1.2.3


From 07b11e07fc62d9ea9765595812ab68209be99a3a Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Mon, 18 Apr 2022 00:20:08 +0200
Subject: Omogucen izbor enkodiranja za svaku kolonu. Izmenjena klasa
 Experiment da sadrzi niz parova naziv kolone - enkoding. Ispravljen bag kod
 menjanja dugmica "izaberi" i "dodaj dataset".

---
 frontend/src/app/_data/Experiment.ts               |  11 +-
 .../dataset-load/dataset-load.component.ts         |   6 +-
 .../src/app/experiment/experiment.component.html   | 297 ++++++++++-----------
 .../src/app/experiment/experiment.component.ts     |  17 +-
 4 files changed, 168 insertions(+), 163 deletions(-)

(limited to 'frontend/src/app/_data')

diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts
index 453f6ca0..23fd77d4 100644
--- a/frontend/src/app/_data/Experiment.ts
+++ b/frontend/src/app/_data/Experiment.ts
@@ -18,8 +18,7 @@ export default class Experiment {
         public randomTestSet: boolean = true,
         public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U
 
-        //TODO - za svaku kolonu se bira enkoding
-        public encoding: Encoding = Encoding.Label
+        public encodings: ColumnEncoding[] = []//[{columnName: "", columnEncoding: Encoding.Label}]
     ) { }
 }
 
@@ -65,4 +64,12 @@ export enum Encoding {
     WOE = 'woe',
     Quantile = 'quantile'
     */
+}
+
+export class ColumnEncoding {
+    constructor (
+        public columnName: string,
+        public encoding: Encoding
+    ) 
+    {}
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
index 62cca456..73dbf2d2 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -41,12 +41,14 @@ export class DatasetLoadComponent implements OnInit {
 
   viewMyDatasetsForm() {
     this.showMyDatasets = true;
-    this.resetSelectedDataset();
+    if (this.selectedDataset != undefined)
+      this.resetSelectedDataset();
     //this.resetCbsAndRbs();        //TREBA DA SE DESI
   }
   viewNewDatasetForm() {
     this.showMyDatasets = false;
-    this.resetSelectedDataset();
+    if (this.selectedDataset != undefined)
+      this.resetSelectedDataset();
     //this.resetCbsAndRbs();        //TREBA DA SE DESI
   }
 
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index e46f5bd9..5b3b2c43 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -13,150 +13,131 @@
         </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-inner">
+                <div class="carousel-item active mt-2">
+                    <h2 class="mb-5">1. Izvor podataka</h2>
+                    <app-dataset-load (selectedDatasetChangeEvent)="updateDataset($event)"></app-dataset-load>
+                </div>
 
-            <div class="carousel-item mt-2">
-                <h2 class="mb-4">2. Preprocesiranje</h2>
+                <div class="carousel-item mt-2">
+                    <h2 class="mb-4">2. Preprocesiranje</h2>
 
-                <div class="px-5">
-                    <h3>Biranje ulaznih i izlaznih kolona:</h3>
-                    <div *ngIf="selectedDataset">
-                        <div class="row">
-                            <div class="col d-flex justify-content-center">
-                                <h3>Izaberite ulazne kolone:</h3>
-                                <div id="divInputs" class="form-check mt-2">
-                                    <br>
-                                    <div *ngFor="let item of selectedDataset.columnInfo; let i = index">
-                                        <input class="form-check-input" type="checkbox" value="{{item.columnName}}"
-                                            id="cb_{{item.columnName}}" name="cbsNew"
-                                            [checked]="experiment.outputColumn != item.columnName"
-                                            [disabled]="experiment.outputColumn == item.columnName"
-                                            (click)="checkedColumnsChanged(item, 0)">&nbsp;
-                                        <label class="form-check-label" for="cb_{{item.columnName}}">
+                    <div class="px-5">
+                        <h3>Biranje ulaznih i izlaznih kolona:</h3>
+                        <div *ngIf="selectedDataset">
+                            <div class="row">
+                                <div class="col d-flex justify-content-center">
+                                    <h3>Izaberite ulazne kolone:</h3>
+                                    <div id="divInputs" class="form-check mt-2">
+                                        <br>
+                                        <div *ngFor="let item of selectedDataset.columnInfo; let i = index">
+                                            <input class="form-check-input" type="checkbox" value="{{item.columnName}}" id="cb_{{item.columnName}}" name="cbsNew" [checked]="experiment.outputColumn != item.columnName" [disabled]="experiment.outputColumn == item.columnName" (change)="resetColumnEncodings()"
+                                                (click)="checkedColumnsChanged(item, 0)">&nbsp;
+                                            <label class="form-check-label" for="cb_{{item.columnName}}">
                                             {{item.columnName}}
                                         </label>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="col d-flex justify-content-left">
-                                <h3>Izaberite izlaznu kolonu:</h3>
-                                <div id="divOutputs" class="form-check mt-2">
-                                    <br>
-                                    <div *ngFor="let item of selectedDataset.columnInfo; let i = index">
-                                        <input class="form-check-input" type="radio" value="{{item.columnName}}"
-                                            id="rb_{{item.columnName}}" name="rbsNew"
-                                            [(ngModel)]="this.experiment.outputColumn"
-                                            (change)="experiment.outputColumn = item.columnName"
-                                            (click)="checkedColumnsChanged(item, 1);">&nbsp;
-                                        <label class="form-check-label" for="rb_{{item.columnName}}">
+                                <div class="col d-flex justify-content-left">
+                                    <h3>Izaberite izlaznu kolonu:</h3>
+                                    <div id="divOutputs" class="form-check mt-2">
+                                        <br>
+                                        <div *ngFor="let item of selectedDataset.columnInfo; let i = index">
+                                            <input class="form-check-input" type="radio" value="{{item.columnName}}" id="rb_{{item.columnName}}" name="rbsNew" [(ngModel)]="this.experiment.outputColumn" (change)="experiment.outputColumn = item.columnName; resetColumnEncodings();" (click)="checkedColumnsChanged(item, 1);">&nbsp;
+                                            <label class="form-check-label" for="rb_{{item.columnName}}">
                                             {{item.columnName}}
                                         </label>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    
-                    <h3 class="mt-5">Popunjavanje nedostajućih vrednosti:</h3>
-                    <div class="form-check" *ngIf="selectedDataset">
-                        <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.DeleteRows"
-                            class="form-check-input" value="deleteRows" name="fillMissing" id="delRows" checked
-                            data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
-                        <label for="delRows" class="form-check-label">Obriši sve
+
+                        <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
+                            <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.DeleteColumns" class="form-check-input" value="deleteCols" name="fillMissing" id="delCols" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
+                            <label for="delCols" class="form-check-label">Obriši sve
                             kolone sa nedostajućim vrednostima ({{countSelectedNullCols()}} od {{selectedDataset.columnInfo.length}})</label><br>
-                        <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace"
-                            class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse"
-                            data-bs-target="#fillMissingCustom:not(.show)">
-                        <label for="replace" class="form-check-label">Izabraću
+                            <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace" class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom:not(.show)">
+                            <label for="replace" class="form-check-label">Izabraću
                             vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br>
-                        <div class="collapse" id="fillMissingCustom">
-                            <div>
-                                <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
-                                <div class="my-3" *ngIf="getSelectedColumnsArrayWithoutNullVals().length > 0" >
-                                    <label class="text-center form-control mx-3 text-secondary">
+                            <div class="collapse" id="fillMissingCustom">
+                                <div>
+                                    <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
+                                    <div class="my-3" *ngIf="getSelectedColumnsArrayWithoutNullVals().length > 0">
+                                        <label class="text-center form-control mx-3 text-secondary">
                                         Kolone <span style="font-style: italic;" *ngFor="let colname of getSelectedColumnsArrayWithoutNullVals(); let i = index">
                                             <span *ngIf="i != getSelectedColumnsArrayWithoutNullVals().length - 1">{{colname}}, </span> 
                                             <span *ngIf="i == getSelectedColumnsArrayWithoutNullVals().length - 1">{{colname}} </span> 
                                         </span>
                                         nemaju nedostajućih vrednosti za popunjavanje.
                                     </label>
-                                </div>
-                                <div id="columnReplacers">
-                                    <div *ngFor="let column of selectedColumnsInfoArray; let i = index" class="my-3">
-                                        <div *ngIf="column.numNulls > 0">
-                                            <span class="w-20 mx-3">
+                                    </div>
+                                    <div id="columnReplacers">
+                                        <div *ngFor="let column of selectedColumnsInfoArray; let i = index" class="my-3">
+                                            <div *ngIf="column.numNulls > 0">
+                                                <span class="w-20 mx-3">
                                                 {{column.columnName}}&nbsp;<span class="small" style="color:gray;">({{column.numNulls}} null)
                                                 </span>
-                                            </span>
-    
-                                            <label *ngIf="column.numNulls <= 0"
-                                                class="text-center form-control mx-3 text-secondary">
+                                                </span>
+
+                                                <label *ngIf="column.numNulls <= 0" class="text-center form-control mx-3 text-secondary">
                                                 Ova kolona nema
                                                 nedostajućih
                                                 vrednosti.
                                             </label>
-    
-                                            <div *ngIf="column.numNulls > 0" class="d-flex flex-row justify-content-end">
-                                                <div class="flex-grow-3 mx-3 me-auto">
-                                                    <div class="input-group">
-                                                        <div class="input-group-prepend">
-                                                            <label [for]="'fillCol_'+column.columnName" class="form-control">
+
+                                                <div *ngIf="column.numNulls > 0" class="d-flex flex-row justify-content-end">
+                                                    <div class="flex-grow-3 mx-3 me-auto">
+                                                        <div class="input-group">
+                                                            <div class="input-group-prepend">
+                                                                <label [for]="'fillCol_'+column.columnName" class="form-control">
                                                                 Zameni
                                                                 <input type="radio" [id]="'fillCol_'+column.columnName"
                                                                     [name]="'delOp_'+column.columnName">
                                                             </label>
-                                                        </div>
-                                                        <input type="text" class="form-control" [id]="'fillText_'+column.columnName"
-                                                            (keyup)="checkFillColRadio(column.columnName)"
-                                                            placeholder="Unesi vrednost...">
-    
-                                                        <div class="input-group-append">
-                                                            <select [id]="'replaceOptions'+i" class="form-control btn-primary"
-                                                                *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);">
+                                                            </div>
+                                                            <input type="text" class="form-control" [id]="'fillText_'+column.columnName" (keyup)="checkFillColRadio(column.columnName)" placeholder="Unesi vrednost...">
+
+                                                            <div class="input-group-append">
+                                                                <select [id]="'replaceOptions'+i" class="form-control btn-primary" *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);">
                                                                 <option
                                                                     *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
                                                                     [value]="option">
                                                                     {{ optionName }}
                                                                 </option>
                                                             </select>
-                                                            <select [id]="'replaceOptions'+i"
-                                                                class="form-control btn-outline-primary"
-                                                                *ngIf="!column.isNumber && column.numNulls > 0"
-                                                                (change)="replace($event, column); checkFillColRadio(column.columnName);">
+                                                                <select [id]="'replaceOptions'+i" class="form-control btn-outline-primary" *ngIf="!column.isNumber && column.numNulls > 0" (change)="replace($event, column); checkFillColRadio(column.columnName);">
                                                                 <option *ngFor="let option of column.uniqueValues" [value]="option">
                                                                     {{ option }}
                                                                 </option>
                                                             </select>
+                                                            </div>
                                                         </div>
                                                     </div>
-                                                </div>
-    
-                                                <div class="flex-shrink-1 mx-3">
-                                                    <div class="input-group">
-                                                        <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši
+
+                                                    <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>
-    
-                                                <div class="flex-shrink-1 mx-3">
-                                                    <div class="input-group">
-                                                        <label class="form-control" [for]="'delRows_'+column.columnName">Izbriši
+
+                                                    <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>
@@ -165,96 +146,98 @@
                                 </div>
                             </div>
                         </div>
-                    </div>
-    
-                    <div id="randomOptions" class="mt-5">
-                        <div class="p-2 m-2">
-                            <label for="type" class="form-check-label">Želite li da redosled podataka bude nasumičan?</label>
-                            <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="experiment.randomOrder"
-                            type="checkbox" value="" checked>
-                        </div>
-                        <div class="border m-3">
-                            <div class="row p-2 m-2">
-                                <div class="col-4">
-                                    <label for="splitYesNo" class="form-check-label">
+
+                        <div id="randomOptions" class="mt-5">
+                            <div class="p-2 m-2">
+                                <label for="type" class="form-check-label">Želite li da redosled podataka bude nasumičan?</label>
+                                <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="experiment.randomOrder" type="checkbox" value="" checked>
+                            </div>
+                            <div class="border m-3">
+                                <div class="row p-2 m-2">
+                                    <div class="col-4">
+                                        <label for="splitYesNo" class="form-check-label">
                                         <h3>Podela test skupa:&nbsp;&nbsp;
                                             <input id="splitYesNo" class="form-check-input" type="checkbox"
                                                 [checked]="experiment.randomTestSet"
                                                 (change)="experiment.randomTestSet = !experiment.randomTestSet">
                                         </h3>
                                     </label>
+                                    </div>
+                                    <div class="col-8">
+                                        trening
+                                        <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10" name="randomTestSetDistribution" thumbLabel [disabled]="!experiment.randomTestSet" [(ngModel)]="tempTestSetDistribution">
+                                        </mat-slider>
+                                        test
+                                    </div>
                                 </div>
-                                <div class="col-8">
-                                    trening
-                                    <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10"
-                                        name="randomTestSetDistribution" thumbLabel [disabled]="!experiment.randomTestSet"
-                                        [(ngModel)]="tempTestSetDistribution">
-                                    </mat-slider>
-                                    test
-                                </div>
-                            </div>
-            
-                            <div class="row p-2 m-2">
-                                <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
+
+                                <div class="row p-2 m-2">
+                                    <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
                                     skup:</label>
-                                <input id="percentage" type="number" class="form-control mx-3" style=" max-width: 15%" min="10" max="90" step="10" value="90"
-                                    [(ngModel)]="tempTestSetDistribution" [disabled]="!experiment.randomTestSet">
+                                    <input id="percentage" type="number" class="form-control mx-3" style=" max-width: 15%" min="10" max="90" step="10" value="90" [(ngModel)]="tempTestSetDistribution" [disabled]="!experiment.randomTestSet">
+                                </div>
                             </div>
                         </div>
-                    </div>
-    
-                    <div id="encodingForColumns" class="row px-3 my-5">
-                        <div class="col-1">
-                            <label for="encoding" class="col-form-label">Enkoding: </label>
-                        </div>
-                        <div class="col-2">
-                            <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="experiment.encoding">
-                                <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
-                                    [value]="option">
-                                    {{ optionName }}
-                                </option>
-                            </select>
+
+                        <div id="encodingsForColumns" class="px-3 my-5">
+                            <label for="encoding" class="col-form-label mb-2">Enkoding za izabrane kolone:</label>
+
+                            <div class="row d-flex flex-row justify-content-between align-items-center">
+                                <div class="col-5" *ngFor="let item of [].constructor(selectedColumnsInfoArray.length); let i = index">
+                                    <div class="input-group mb-2">
+                                        <div class="input-group-prepend">
+                                            <span class="input-group-text">{{selectedColumnsInfoArray[i].columnName}}</span>
+                                        </div>
+                                        <select [id]="'encodingOption_'+i" class="form-control" [(ngModel)]="experiment.encodings[i].encoding">
+                                        <option
+                                            *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+                                            [value]="option">
+                                            {{ optionName }}
+                                        </option>
+                                    </select>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
+
                     </div>
-    
-                </div>
 
 
-            </div>
+                </div>
 
-            <div class="carousel-item mt-2">
-                <h2 class="mb-4">3. Dodaj eskperiment</h2>
+                <div class="carousel-item mt-2">
+                    <h2 class="mb-4">3. Dodaj 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>
-                        <div class="form-group row mt-5 mb-3">
-                            <div class="col"></div>
-                            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="saveExperiment();">Sačuvaj
+                    <div class="row">
+                        <div class="col"></div>
+                        <div class="col-8">
+                            <label for="name" class="col-form-label">Naziv eksperimenta:</label>
+                            <input type="text" class="form-control mb-3" name="name" placeholder="Naziv..." [(ngModel)]="experiment.name">
+
+                            <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+                            <div>
+                                <textarea class="form-control" name="desc" rows="3" [(ngModel)]="experiment.description"></textarea>
+                            </div>
+                            <div class="form-group row mt-5 mb-3">
+                                <div class="col"></div>
+                                <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="saveExperiment();">Sačuvaj
                                 eksperiment</button>
-                            <div class="col"></div>
+                                <div class="col"></div>
+                            </div>
                         </div>
+                        <div class="col"></div>
                     </div>
-                    <div class="col"></div>
                 </div>
-            </div>
 
-        </div>
-        <div class="m-3 d-flex flex-row justify-content-between align-items-center" style=" margin-left: auto;">
-            <button mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
+            </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">
+                <button mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                 <mat-icon>arrow_forward</mat-icon>
             </button>
-        </div>
+            </div>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index b5e1d1f4..036db326 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -5,6 +5,7 @@ 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',
@@ -21,6 +22,7 @@ export class ExperimentComponent implements OnInit {
   NullValueOptions = NullValueOptions;
   ReplaceWith = ReplaceWith;
   Encoding = Encoding;
+  ColumnEncoding = ColumnEncoding;
   Object = Object;
 
   selectedColumnsInfoArray: ColumnInfo[] = [];
@@ -38,6 +40,16 @@ export class ExperimentComponent implements OnInit {
     this.selectedDataset = dataset;
     this.selectedColumnsInfoArray = this.selectedDataset.columnInfo;
     this.selectedNotNullColumnsArray = [];
+
+    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 {
@@ -179,13 +191,14 @@ export class ExperimentComponent implements OnInit {
 
     this.experiment.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
 
-    //console.log("Eksperiment:", this.experiment);
+    console.log("Eksperiment:", this.experiment);
 
     this.experimentsService.addExperiment(this.experiment).subscribe((response) => {
       this.experiment = response;
 
-      this.selectedColumnsInfoArray = [];
+      this.selectedColumnsInfoArray = []; 
       this.selectedNotNullColumnsArray = [];
+      this.experiment.encodings = [];
 
       Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran.");
     }, (error) => {
-- 
cgit v1.2.3


From 1509314a97c1a122a50173382e976307f5ec9d40 Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Mon, 18 Apr 2022 00:21:57 +0200
Subject: Dodat tip problema u eksperiment

---
 frontend/src/app/_data/Experiment.ts               |  4 ++-
 .../_elements/model-load/model-load.component.html | 16 ++--------
 .../_elements/model-load/model-load.component.ts   |  4 ++-
 .../src/app/experiment/experiment.component.html   | 34 +++++++++++++++++-----
 .../src/app/experiment/experiment.component.ts     |  4 +--
 frontend/src/app/training/training.component.html  |  2 +-
 6 files changed, 38 insertions(+), 26 deletions(-)

(limited to 'frontend/src/app/_data')

diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts
index 23fd77d4..d2b6eea5 100644
--- a/frontend/src/app/_data/Experiment.ts
+++ b/frontend/src/app/_data/Experiment.ts
@@ -1,3 +1,4 @@
+import { ProblemType } from "./Model";
 export default class Experiment {
     _id: string = '';
     uploaderId: string = '';
@@ -18,7 +19,8 @@ export default class Experiment {
         public randomTestSet: boolean = true,
         public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U
 
-        public encodings: ColumnEncoding[] = []//[{columnName: "", columnEncoding: Encoding.Label}]
+        public encodings: ColumnEncoding[] = [],//[{columnName: "", columnEncoding: Encoding.Label}]
+        public type:ProblemType = ProblemType.Regression
     ) { }
 }
 
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 85caca0d..dcb35c21 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ b/frontend/src/app/_elements/model-load/model-load.component.html
@@ -17,7 +17,7 @@
     <div *ngIf="showMyModels" class="px-5">
         <div class="overflow-auto" style="max-height: 500px;">
             <ul class="list-group">
-                <li class="list-group-item p-3" *ngFor="let model of myModels|filter:term"
+                <li class="list-group-item p-3" *ngFor="let model of myModels|filter:term|filter:(forExperiment ? forExperiment.type : '')"
                     [ngClass]="{'selectedModelClass': this.selectedModel == model}">
                     <app-item-model name="usersModel" [model]="model" (click)="selectThisModel(model);">
                     </app-item-model>
@@ -124,19 +124,7 @@
                     
                     <input type="number" min="0" step="1" max="7" class="form-control" name="batchSizePower" [(ngModel)]="batchSizePower" (click)="updateBatchSize()" >
                     {{newModel.batchSize}}
-                    <!--<select id=BatchSizeOptions class="form-select" name="batchSize" [(ngModel)]="newModel.batchSize">
-                        <option value="1">1</option>
-                        <option value="2">2</option>
-                        <option value="4">4</option>
-                        <option value="8">8</option>
-                        <option value="16">16</option>
-                        <option value="32">32</option>
-                        <option value="64">64</option>
-                        <option value="128">128</option>
-                        <option value="256">256</option>
-                        <option value="512">512</option>
-                        <option value="1024">1024</option>
-                    </select>-->
+                 
                 </div>
                 
                 <div class="row p-2">
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 aa0797bd..9bd81f95 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ b/frontend/src/app/_elements/model-load/model-load.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, ViewChild, Output, EventEmitter, Input } from '@angular/core';
 import Shared from 'src/app/Shared';
+import Experiment from 'src/app/_data/Experiment';
 import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
 import { ModelsService } from 'src/app/_services/models.service';
 import { GraphComponent } from '../graph/graph.component';
@@ -13,6 +14,7 @@ import { GraphComponent } from '../graph/graph.component';
 export class ModelLoadComponent implements OnInit {
 
   @ViewChild(GraphComponent) graph!: GraphComponent;
+  @Input() forExperiment?:Experiment;
   @Output() selectedModelChangeEvent = new EventEmitter<Model>();
 
   newModel: Model = new Model();
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index 5b3b2c43..35124b98 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -214,13 +214,33 @@
                             <label for="name" class="col-form-label">Naziv eksperimenta:</label>
                             <input type="text" class="form-control mb-3" name="name" placeholder="Naziv..." [(ngModel)]="experiment.name">
 
-                            <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
-                            <div>
-                                <textarea class="form-control" name="desc" rows="3" [(ngModel)]="experiment.description"></textarea>
-                            </div>
-                            <div class="form-group row mt-5 mb-3">
-                                <div class="col"></div>
-                                <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="saveExperiment();">Sačuvaj
+            <div class="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">Tip problema:</label>
+                        <div class="col-2">
+                            <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>
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 036db326..71679243 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith, Encoding } from '../_data/Experiment';
-import Model from '../_data/Model';
+import Model,{ProblemType} from '../_data/Model';
 import Dataset, { ColumnInfo } from '../_data/Dataset';
 import { ModelsService } from '../_services/models.service';
 import Shared from '../Shared';
@@ -24,7 +24,7 @@ export class ExperimentComponent implements OnInit {
   Encoding = Encoding;
   ColumnEncoding = ColumnEncoding;
   Object = Object;
-
+  ProblemType=ProblemType;
   selectedColumnsInfoArray: ColumnInfo[] = [];
   selectedNotNullColumnsArray: string[] = [];
 
diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html
index 0ce4cc89..672e75fb 100644
--- a/frontend/src/app/training/training.component.html
+++ b/frontend/src/app/training/training.component.html
@@ -23,7 +23,7 @@
             </div>
     
             <h2 class="mt-5 mb-2">2. Izaberite model</h2>
-            <app-model-load (selectedModelChangeEvent)="selectModel($event)"></app-model-load>
+            <app-model-load (selectedModelChangeEvent)="selectModel($event)" [forExperiment]="selectedExperiment"></app-model-load>
     
             <h2 class="my-5">3. Treniranje modela</h2>
 
-- 
cgit v1.2.3


From 208394ff08cba0880746d9c7841be08e127f66d6 Mon Sep 17 00:00:00 2001
From: Ivan Ljubisavljevic <ivan996sk@gmail.com>
Date: Mon, 18 Apr 2022 01:14:31 +0200
Subject: Izmena na frontu i ml-u(username -> userId) #71

---
 backend/api/api/Controllers/DatasetController.cs   | 24 +++++++++++-----------
 backend/api/api/Controllers/ModelController.cs     |  2 +-
 backend/api/api/Controllers/PredictorController.cs |  2 +-
 backend/api/api/Services/DatasetService.cs         | 12 +++++------
 backend/api/api/Services/IDatasetService.cs        |  6 +++---
 backend/microservice/api/controller.py             |  2 +-
 frontend/src/app/_data/Dataset.ts                  |  2 +-
 frontend/src/app/_data/Model.ts                    |  2 +-
 frontend/src/app/_data/Predictor.ts                |  3 ++-
 .../add-new-dataset/add-new-dataset.component.ts   |  2 +-
 .../_elements/model-load/model-load.component.ts   |  2 +-
 .../filter-datasets/filter-datasets.component.ts   |  2 +-
 .../app/_pages/my-models/my-models.component.html  |  2 +-
 .../app/_pages/my-models/my-models.component.ts    |  8 +++++++-
 frontend/src/app/_services/datasets.service.ts     |  4 ++--
 frontend/src/app/_services/predictors.service.ts   |  2 +-
 16 files changed, 42 insertions(+), 35 deletions(-)

(limited to 'frontend/src/app/_data')

diff --git a/backend/api/api/Controllers/DatasetController.cs b/backend/api/api/Controllers/DatasetController.cs
index bdac9ed9..58a903eb 100644
--- a/backend/api/api/Controllers/DatasetController.cs
+++ b/backend/api/api/Controllers/DatasetController.cs
@@ -149,46 +149,46 @@ namespace api.Controllers
 
 
         // PUT api/<DatasetController>/{name}
-        [HttpPut("{name}")]
+        [HttpPut("{id}")]
         [Authorize(Roles = "User")]
-        public ActionResult Put(string name, [FromBody] Dataset dataset)
+        public ActionResult Put(string id, [FromBody] Dataset dataset)
         {
             string uploaderId = getUserId();
 
             if (uploaderId == null)
                 return BadRequest();
 
-            var existingDataset = _datasetService.GetOneDataset(uploaderId, name);
+            var existingDataset = _datasetService.GetOneDataset(uploaderId, id);
 
             //ne mora da se proverava
             if (existingDataset == null)
-                return NotFound($"Dataset with name = {name} or user with ID = {uploaderId} not found");
+                return NotFound($"Dataset with ID = {id} or user with ID = {uploaderId} not found");
 
             dataset.lastUpdated = DateTime.UtcNow;
 
-            _datasetService.Update(uploaderId, name, dataset);
+            _datasetService.Update(uploaderId, id, dataset);
 
-            return Ok($"Dataset with name = {name} updated");
+            return Ok($"Dataset with ID = {id} updated");
         }
 
         // DELETE api/<DatasetController>/name
-        [HttpDelete("{name}")]
+        [HttpDelete("{id}")]
         [Authorize(Roles = "User")]
-        public ActionResult Delete(string name)
+        public ActionResult Delete(string id)
         {
             string uploaderId = getUserId();
 
             if (uploaderId == null)
                 return BadRequest();
 
-            var dataset = _datasetService.GetOneDataset(uploaderId, name);
+            var dataset = _datasetService.GetOneDataset(uploaderId, id);
 
             if (dataset == null)
-                return NotFound($"Dataset with name = {name} or user with ID = {uploaderId} not found");
+                return NotFound($"Dataset with ID = {id} or user with ID = {uploaderId} not found");
 
-            _datasetService.Delete(dataset.uploaderId, dataset.name);
+            _datasetService.Delete(dataset.uploaderId, dataset._id);
 
-            return Ok($"Dataset with name = {name} deleted");
+            return Ok($"Dataset with ID = {id} deleted");
 
         }
     }
diff --git a/backend/api/api/Controllers/ModelController.cs b/backend/api/api/Controllers/ModelController.cs
index 1ec01ab8..fe16507b 100644
--- a/backend/api/api/Controllers/ModelController.cs
+++ b/backend/api/api/Controllers/ModelController.cs
@@ -82,7 +82,7 @@ namespace api.Controllers
         {
             
             var model=_modelService.GetOneModel(info.ModelId);
-            var user = _userService.GetUserByUsername(model.uploaderId);
+            var user = _userService.GetUserById(model.uploaderId);
 
             if (ChatHub.CheckUser(user._id))
                 await _ichat.Clients.Client(ChatHub.Users[user._id]).SendAsync("NotifyEpoch",model.name,info.ModelId,info.Stat,model.epochs,info.EpochNum);
diff --git a/backend/api/api/Controllers/PredictorController.cs b/backend/api/api/Controllers/PredictorController.cs
index 26fe8f1d..dd5aa5fd 100644
--- a/backend/api/api/Controllers/PredictorController.cs
+++ b/backend/api/api/Controllers/PredictorController.cs
@@ -213,7 +213,7 @@ namespace api.Controllers
         }
 
         // DELETE api/<PredictorController>/name
-        [HttpDelete("{name}")]
+        [HttpDelete("{id}")]
         [Authorize(Roles = "User")]
         public ActionResult Delete(string id)
         {
diff --git a/backend/api/api/Services/DatasetService.cs b/backend/api/api/Services/DatasetService.cs
index 33026687..6c2efe14 100644
--- a/backend/api/api/Services/DatasetService.cs
+++ b/backend/api/api/Services/DatasetService.cs
@@ -27,9 +27,9 @@ namespace api.Services
         }
 
         //brisanje odredjenog name-a
-        public void Delete(string userId, string name)
+        public void Delete(string userId, string id)
         {
-            _dataset.DeleteOne(dataset => (dataset.uploaderId == userId && dataset.name == name)); 
+            _dataset.DeleteOne(dataset => (dataset.uploaderId == userId && dataset._id == id)); 
         }
 
         public List<Dataset> GetMyDatasets(string userId)
@@ -62,9 +62,9 @@ namespace api.Services
             return _dataset.Find(dataset => dataset.isPublic == true && dataset.isPreProcess).ToList();
         }
 
-        public Dataset GetOneDataset(string userId, string name)
+        public Dataset GetOneDataset(string userId, string id)
         {
-            return _dataset.Find(dataset => dataset.uploaderId == userId && dataset.name == name && dataset.isPreProcess).FirstOrDefault();
+            return _dataset.Find(dataset => dataset.uploaderId == userId && dataset._id == id && dataset.isPreProcess).FirstOrDefault();
         }
         //odraditi za pretragu getOne
 
@@ -74,9 +74,9 @@ namespace api.Services
         }
 
         //ako je potrebno da se zameni name  ili ekstenzija
-        public void Update(string userId, string name, Dataset dataset )
+        public void Update(string userId, string id, Dataset dataset )
         {
-            _dataset.ReplaceOne(dataset => dataset.uploaderId == userId && dataset.name == name, dataset);
+            _dataset.ReplaceOne(dataset => dataset.uploaderId == userId && dataset._id == id, dataset);
         }
         public void Update(Dataset dataset)
         {
diff --git a/backend/api/api/Services/IDatasetService.cs b/backend/api/api/Services/IDatasetService.cs
index b700e87c..bb06208d 100644
--- a/backend/api/api/Services/IDatasetService.cs
+++ b/backend/api/api/Services/IDatasetService.cs
@@ -5,15 +5,15 @@ namespace api.Services
 {
     public interface IDatasetService
     {
-        Dataset GetOneDataset(string userId, string name);
+        Dataset GetOneDataset(string userId, string id);
         Dataset GetOneDataset(string id);
         List<Dataset> SearchDatasets(string name);
         List<Dataset> GetMyDatasets(string userId);
         List<Dataset> SortDatasets(string userId, bool ascdsc, int latest);
         List<Dataset> GetPublicDatasets();
         Dataset Create(Dataset dataset);
-        void Update(string userId, string name, Dataset dataset);
-        void Delete(string userId, string name);
+        void Update(string userId, string id, Dataset dataset);
+        void Delete(string userId, string id);
         public List<Dataset> GetGuestDatasets();
         public void Update(Dataset dataset);
         string GetDatasetId(string fileId);
diff --git a/backend/microservice/api/controller.py b/backend/microservice/api/controller.py
index e6515e7b..9b83b8e7 100644
--- a/backend/microservice/api/controller.py
+++ b/backend/microservice/api/controller.py
@@ -78,7 +78,7 @@ def train():
         m.append({"Name" : attribute, "JsonValue" : value})
     predictor = {
         "_id" : "",
-        "username" : paramsModel["username"],
+        "uploaderId" : paramsModel["uploaderId"],
         "inputs" : paramsExperiment["inputColumns"],
         "output" : paramsExperiment["outputColumn"],
         "isPublic" : False,
diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts
index 732d1c56..766040a3 100644
--- a/frontend/src/app/_data/Dataset.ts
+++ b/frontend/src/app/_data/Dataset.ts
@@ -10,7 +10,7 @@ export default class Dataset {
         public accessibleByLink: boolean = false,
         public dateCreated: Date = new Date(),
         public lastUpdated: Date = new Date(),
-        public username: string = '',
+        public uploaderId: string = '',
         public delimiter: string = '',
         public hasHeader: boolean = true,
 
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 1af3fe30..b273f56a 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -19,7 +19,7 @@ export default class Model {
         public batchSize: number = 5,
         public hiddenLayerActivationFunctions: string[] = ['sigmoid'],
         public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid,
-        public username: string = '',
+        public uploaderId: string = '',
         public metrics: string[] = [], // TODO add to add-model form
         public epochs: number = 5 // TODO add to add-model form
     ) { }
diff --git a/frontend/src/app/_data/Predictor.ts b/frontend/src/app/_data/Predictor.ts
index 7e902eae..8aa2b6cb 100644
--- a/frontend/src/app/_data/Predictor.ts
+++ b/frontend/src/app/_data/Predictor.ts
@@ -7,6 +7,7 @@ export default class Predictor {
         public output: string = '',
         public isPublic: boolean = false,
         public accessibleByLink: boolean = false,
-        public dateCreated: Date = new Date()
+        public dateCreated: Date = new Date(),
+        public uploaderId: string = ''
     ) { }
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts
index 6ff108ce..3e1b5c73 100644
--- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts
+++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts
@@ -90,7 +90,7 @@ export class AddNewDatasetComponent {
     this.modelsService.uploadData(this.files[0]).subscribe((file) => {
       //console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id);
       this.dataset.fileId = file._id;
-      this.dataset.username = shared.username;
+      this.dataset.uploaderId = shared.userId;
 
       this.datasetsService.addDataset(this.dataset).subscribe((dataset) => {
         this.newDatasetAdded.emit("added");
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 9bd81f95..dbca3d17 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ b/frontend/src/app/_elements/model-load/model-load.component.ts
@@ -69,7 +69,7 @@ export class ModelLoadComponent implements OnInit {
   uploadModel() {
     this.getMetrics();
 
-    this.newModel.username = Shared.username;
+    this.newModel.uploaderId = Shared.userId;
 
     this.modelsService.addModel(this.newModel).subscribe((response) => {
       Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.');
diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
index c83bf208..66b3755e 100644
--- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
+++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
@@ -33,7 +33,7 @@ export class FilterDatasetsComponent implements OnInit {
     newDataset._id = "";
     newDataset.isPublic = false;
     newDataset.lastUpdated = new Date();
-    newDataset.username = decodedToken.name;
+    newDataset.uploaderId = decodedToken.uploaderId;
     let name=prompt("Unesite naziv dataset-a",newDataset.name);
     newDataset.name=name as string;
     if(name!=null && name!="")
diff --git a/frontend/src/app/_pages/my-models/my-models.component.html b/frontend/src/app/_pages/my-models/my-models.component.html
index b0e9c4ef..9b281239 100644
--- a/frontend/src/app/_pages/my-models/my-models.component.html
+++ b/frontend/src/app/_pages/my-models/my-models.component.html
@@ -15,7 +15,7 @@
                 <div class="panel-footer row"><!-- panel-footer -->
                     <div class="col-xs-6 text-center">
                         <div>
-                            <button type="button" class="btn btn-default btn-lg"style="min-width: 7rem;float: left;" (click)="deleteThisModel(model)" mat-raised-button color="primary">Koristi
+                            <button type="button" class="btn btn-default btn-lg"style="min-width: 7rem;float: left;" (click)="useThisModel(model)" mat-raised-button color="primary">Koristi
                                 <span class="glyphicon glyphicon-search"></span>
                             </button>
                             <button (click)="deleteThisModel(model)" mat-raised-button color="warn" style="min-width: 7rem;float: right" ><mat-icon>delete</mat-icon></button>
diff --git a/frontend/src/app/_pages/my-models/my-models.component.ts b/frontend/src/app/_pages/my-models/my-models.component.ts
index 92d3fbaa..d379fa69 100644
--- a/frontend/src/app/_pages/my-models/my-models.component.ts
+++ b/frontend/src/app/_pages/my-models/my-models.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import shared from 'src/app/Shared';
 import Model from 'src/app/_data/Model';
 import { ModelsService } from 'src/app/_services/models.service';
@@ -12,7 +13,7 @@ export class MyModelsComponent implements OnInit {
   myModels: Model[] = [];
   //myModel: Model;
 
-  constructor(private modelsS : ModelsService) {
+  constructor(private modelsS : ModelsService, private router : Router) {
 
     
 
@@ -44,6 +45,11 @@ deleteThisModel(model: Model): void{
 }
 
 
+useThisModel(model: Model): void{
+
+  this.router.navigate(['/training'])
+  
+}
   getAllMyModels(): void{
     this.modelsS.getMyModels().subscribe(m => {
       this.myModels = m;
diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts
index c3281be6..b2272f0a 100644
--- a/frontend/src/app/_services/datasets.service.ts
+++ b/frontend/src/app/_services/datasets.service.ts
@@ -29,10 +29,10 @@ export class DatasetsService {
   }
 
   editDataset(dataset: Dataset): Observable<Dataset> {
-    return this.http.put<Dataset>(`${Configuration.settings.apiURL}/dataset/`, dataset, { headers: this.authService.authHeader() });
+    return this.http.put<Dataset>(`${Configuration.settings.apiURL}/dataset/` + dataset._id, dataset, { headers: this.authService.authHeader() });
   }
 
   deleteDataset(dataset: Dataset) {
-    return this.http.delete(`${Configuration.settings.apiURL}/dataset/` + dataset.name, { headers: this.authService.authHeader(), responseType: "text" });
+    return this.http.delete(`${Configuration.settings.apiURL}/dataset/` + dataset._id, { headers: this.authService.authHeader(), responseType: "text" });
   }
 }
diff --git a/frontend/src/app/_services/predictors.service.ts b/frontend/src/app/_services/predictors.service.ts
index 9e8383aa..a24ee708 100644
--- a/frontend/src/app/_services/predictors.service.ts
+++ b/frontend/src/app/_services/predictors.service.ts
@@ -24,7 +24,7 @@ export class PredictorsService {
   }
 
   deletePredictor(predictor: Predictor) {
-    return this.http.delete(`${Configuration.settings.apiURL}/predictor/` + predictor.name, { headers: this.authService.authHeader(), responseType: "text" });
+    return this.http.delete(`${Configuration.settings.apiURL}/predictor/` + predictor._id, { headers: this.authService.authHeader(), responseType: "text" });
   }
 
   getMyPredictors(): Observable<Predictor[]> {
-- 
cgit v1.2.3


From fdfe2da8c1e71ec1dddeb81bc32356fb746c0c7f Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Mon, 18 Apr 2022 14:29:54 +0200
Subject: Napravi eksperiment - sredjen bag u carousel-u, poslednja izlazna
 kolona cekirana, ispis poruke kad nema nedostajucih vrednosti za
 popunjavanje. Na back-u izmenjen DatasetController i Service (name umesto
 id-a u post requestu)

---
 backend/api/api/Controllers/DatasetController.cs   |  26 ++--
 backend/api/api/Services/DatasetService.cs         |   4 +-
 backend/api/api/Services/IDatasetService.cs        |   2 +-
 frontend/src/app/_data/Experiment.ts               |   4 +-
 .../src/app/experiment/experiment.component.html   | 154 ++++++++++-----------
 .../src/app/experiment/experiment.component.ts     |   1 +
 6 files changed, 92 insertions(+), 99 deletions(-)

(limited to 'frontend/src/app/_data')

diff --git a/backend/api/api/Controllers/DatasetController.cs b/backend/api/api/Controllers/DatasetController.cs
index 58a903eb..0a9fe0bd 100644
--- a/backend/api/api/Controllers/DatasetController.cs
+++ b/backend/api/api/Controllers/DatasetController.cs
@@ -136,7 +136,7 @@ namespace api.Controllers
             var existingDataset = _datasetService.GetOneDataset(dataset.uploaderId, dataset.name);
 
             if (existingDataset != null)
-                return NotFound($"Dateset with name = {dataset.name} exisits");
+                return NotFound($"Dataset with this name already exists");
             else
             {
                 FileModel fileModel = _fileService.getFile(dataset.fileId);
@@ -149,46 +149,46 @@ namespace api.Controllers
 
 
         // PUT api/<DatasetController>/{name}
-        [HttpPut("{id}")]
+        [HttpPut("{name}")]
         [Authorize(Roles = "User")]
-        public ActionResult Put(string id, [FromBody] Dataset dataset)
+        public ActionResult Put(string name, [FromBody] Dataset dataset)
         {
             string uploaderId = getUserId();
 
             if (uploaderId == null)
                 return BadRequest();
 
-            var existingDataset = _datasetService.GetOneDataset(uploaderId, id);
+            var existingDataset = _datasetService.GetOneDataset(uploaderId, name);
 
             //ne mora da se proverava
             if (existingDataset == null)
-                return NotFound($"Dataset with ID = {id} or user with ID = {uploaderId} not found");
+                return NotFound($"Dataset with name = {name} or user with ID = {uploaderId} not found");
 
             dataset.lastUpdated = DateTime.UtcNow;
 
-            _datasetService.Update(uploaderId, id, dataset);
+            _datasetService.Update(uploaderId, name, dataset);
 
-            return Ok($"Dataset with ID = {id} updated");
+            return Ok($"Dataset with name = {name} updated");
         }
 
         // DELETE api/<DatasetController>/name
-        [HttpDelete("{id}")]
+        [HttpDelete("{name}")]
         [Authorize(Roles = "User")]
-        public ActionResult Delete(string id)
+        public ActionResult Delete(string name)
         {
             string uploaderId = getUserId();
 
             if (uploaderId == null)
                 return BadRequest();
 
-            var dataset = _datasetService.GetOneDataset(uploaderId, id);
+            var dataset = _datasetService.GetOneDataset(uploaderId, name);
 
             if (dataset == null)
-                return NotFound($"Dataset with ID = {id} or user with ID = {uploaderId} not found");
+                return NotFound($"Dataset with name = {name} or user with ID = {uploaderId} not found");
 
-            _datasetService.Delete(dataset.uploaderId, dataset._id);
+            _datasetService.Delete(dataset.uploaderId, dataset.name);
 
-            return Ok($"Dataset with ID = {id} deleted");
+            return Ok($"Dataset with name = {name} deleted");
 
         }
     }
diff --git a/backend/api/api/Services/DatasetService.cs b/backend/api/api/Services/DatasetService.cs
index 6c2efe14..f260a1ba 100644
--- a/backend/api/api/Services/DatasetService.cs
+++ b/backend/api/api/Services/DatasetService.cs
@@ -62,9 +62,9 @@ namespace api.Services
             return _dataset.Find(dataset => dataset.isPublic == true && dataset.isPreProcess).ToList();
         }
 
-        public Dataset GetOneDataset(string userId, string id)
+        public Dataset GetOneDataset(string userId, string name)
         {
-            return _dataset.Find(dataset => dataset.uploaderId == userId && dataset._id == id && dataset.isPreProcess).FirstOrDefault();
+            return _dataset.Find(dataset => dataset.uploaderId == userId && dataset.name == name && dataset.isPreProcess).FirstOrDefault();
         }
         //odraditi za pretragu getOne
 
diff --git a/backend/api/api/Services/IDatasetService.cs b/backend/api/api/Services/IDatasetService.cs
index bb06208d..f493a2ec 100644
--- a/backend/api/api/Services/IDatasetService.cs
+++ b/backend/api/api/Services/IDatasetService.cs
@@ -5,7 +5,7 @@ namespace api.Services
 {
     public interface IDatasetService
     {
-        Dataset GetOneDataset(string userId, string id);
+        Dataset GetOneDataset(string userId, string name);
         Dataset GetOneDataset(string id);
         List<Dataset> SearchDatasets(string name);
         List<Dataset> GetMyDatasets(string userId);
diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts
index d2b6eea5..95ef6e1e 100644
--- a/frontend/src/app/_data/Experiment.ts
+++ b/frontend/src/app/_data/Experiment.ts
@@ -19,8 +19,8 @@ export default class Experiment {
         public randomTestSet: boolean = true,
         public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U
 
-        public encodings: ColumnEncoding[] = [],//[{columnName: "", columnEncoding: Encoding.Label}]
-        public type:ProblemType = ProblemType.Regression
+        public encodings: ColumnEncoding[] = [],
+        public type: ProblemType = ProblemType.Regression
     ) { }
 }
 
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index 35124b98..62236cce 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -31,8 +31,7 @@
                                     <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)="resetColumnEncodings()"
-                                                (click)="checkedColumnsChanged(item, 0)">&nbsp;
+                                            <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>
@@ -44,7 +43,8 @@
                                     <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; resetColumnEncodings();" (click)="checkedColumnsChanged(item, 1);">&nbsp;
+                                            <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>
@@ -54,89 +54,90 @@
                             </div>
                         </div>
 
-                        <h3 class="mt-5">Popunjavanje nedostajućih vrednosti:</h3>
-                        <div class="form-check" *ngIf="selectedDataset">
-                            <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.DeleteRows" class="form-check-input" value="deleteRows" name="fillMissing" id="delRows" checked data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
-                            <label for="delRows" class="form-check-label">Obriši sve
+
+                        <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
+                                <input type="radio" [(ngModel)]="experiment.nullValues " [value]="NullValueOptions.DeleteColumns " class="form-check-input" value="deleteCols" name="fillMissing " id="delCols" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
+                                <label for="delCols" class="form-check-label ">Obriši sve
                             kolone sa nedostajućim vrednostima ({{countSelectedNullCols()}} od {{selectedDataset.columnInfo.length}})</label><br>
-                            <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace" class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom:not(.show)">
-                            <label for="replace" class="form-check-label">Izabraću
+                                <input type="radio" [(ngModel)]="experiment.nullValues " [value]="NullValueOptions.Replace " class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom:not(.show)">
+                                <label for="replace" class="form-check-label">Izabraću
                             vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br>
-                            <div class="collapse" id="fillMissingCustom">
-                                <div>
-                                    <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
-                                    <div class="my-3" *ngIf="getSelectedColumnsArrayWithoutNullVals().length > 0">
-                                        <label class="text-center form-control mx-3 text-secondary">
+                                <div class="collapse" id="fillMissingCustom">
+                                    <div>
+                                        <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
+                                        <div class="my-3 " *ngIf="getSelectedColumnsArrayWithoutNullVals().length> 0">
+                                            <label class="text-center form-control mx-3 text-secondary">
                                         Kolone <span style="font-style: italic;" *ngFor="let colname of getSelectedColumnsArrayWithoutNullVals(); let i = index">
                                             <span *ngIf="i != getSelectedColumnsArrayWithoutNullVals().length - 1">{{colname}}, </span> 
                                             <span *ngIf="i == getSelectedColumnsArrayWithoutNullVals().length - 1">{{colname}} </span> 
                                         </span>
                                         nemaju nedostajućih vrednosti za popunjavanje.
                                     </label>
-                                    </div>
-                                    <div id="columnReplacers">
-                                        <div *ngFor="let column of selectedColumnsInfoArray; let i = index" class="my-3">
-                                            <div *ngIf="column.numNulls > 0">
-                                                <span class="w-20 mx-3">
-                                                {{column.columnName}}&nbsp;<span class="small" style="color:gray;">({{column.numNulls}} null)
-                                                </span>
-                                                </span>
-
-                                                <label *ngIf="column.numNulls <= 0" class="text-center form-control mx-3 text-secondary">
-                                                Ova kolona nema
-                                                nedostajućih
-                                                vrednosti.
-                                            </label>
-
-                                                <div *ngIf="column.numNulls > 0" class="d-flex flex-row justify-content-end">
-                                                    <div class="flex-grow-3 mx-3 me-auto">
-                                                        <div class="input-group">
-                                                            <div class="input-group-prepend">
-                                                                <label [for]="'fillCol_'+column.columnName" class="form-control">
+                                        </div>
+                                        <div id="columnReplacers">
+                                            <div *ngFor="let column of selectedColumnsInfoArray; let i = index" class="my-3">
+                                                <div *ngIf="column.numNulls > 0">
+                                                    <span class="w-20 mx-3">
+                                                        {{column.columnName}}&nbsp;
+                                                        <span class="small" style="color:gray;">({{column.numNulls}} null)</span>
+                                                    </span>
+
+                                                    <div class="d-flex flex-row justify-content-end">
+                                                        <div class="flex-grow-3 mx-3 me-auto">
+                                                            <div class="input-group">
+                                                                <div class="input-group-prepend">
+                                                                    <label [for]="'fillCol_'+column.columnName" class="form-control">
                                                                 Zameni
                                                                 <input type="radio" [id]="'fillCol_'+column.columnName"
                                                                     [name]="'delOp_'+column.columnName">
                                                             </label>
-                                                            </div>
-                                                            <input type="text" class="form-control" [id]="'fillText_'+column.columnName" (keyup)="checkFillColRadio(column.columnName)" placeholder="Unesi vrednost...">
+                                                                </div>
+                                                                <input type="text" class="form-control" [id]="'fillText_'+column.columnName" (keyup)="checkFillColRadio(column.columnName)" placeholder="Unesi vrednost...">
 
-                                                            <div class="input-group-append">
-                                                                <select [id]="'replaceOptions'+i" class="form-control btn-primary" *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);">
+                                                                <div class="input-group-append">
+                                                                    <select [id]="'replaceOptions'+i" class="form-control btn-primary" *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);">
                                                                 <option
                                                                     *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
                                                                     [value]="option">
                                                                     {{ optionName }}
                                                                 </option>
                                                             </select>
-                                                                <select [id]="'replaceOptions'+i" class="form-control btn-outline-primary" *ngIf="!column.isNumber && column.numNulls > 0" (change)="replace($event, column); checkFillColRadio(column.columnName);">
+                                                                    <select [id]="'replaceOptions'+i" class="form-control btn-outline-primary" *ngIf="!column.isNumber && column.numNulls > 0" (change)="replace($event, column); checkFillColRadio(column.columnName);">
                                                                 <option *ngFor="let option of column.uniqueValues" [value]="option">
                                                                     {{ option }}
                                                                 </option>
                                                             </select>
+                                                                </div>
                                                             </div>
                                                         </div>
-                                                    </div>
 
-                                                    <div class="flex-shrink-1 mx-3">
-                                                        <div class="input-group">
-                                                            <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši
+                                                        <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>
 
-                                                    <div class="flex-shrink-1 mx-3">
-                                                        <div class="input-group">
-                                                            <label class="form-control" [for]="'delRows_'+column.columnName">Izbriši
+                                                        <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>
@@ -188,7 +189,7 @@
                                         <div class="input-group-prepend">
                                             <span class="input-group-text">{{selectedColumnsInfoArray[i].columnName}}</span>
                                         </div>
-                                        <select [id]="'encodingOption_'+i" class="form-control" [(ngModel)]="experiment.encodings[i].encoding">
+                                        <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">
@@ -214,33 +215,23 @@
                             <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">
 
-            <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">Tip problema:</label>
-                        <div class="col-2">
-                            <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
+                            <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>
@@ -250,13 +241,14 @@
                 </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>
+                                <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>
+                                <mat-icon>arrow_forward</mat-icon>
+                            </button>
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 71679243..2d0f6ec5 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -40,6 +40,7 @@ export class ExperimentComponent implements OnInit {
     this.selectedDataset = dataset;
     this.selectedColumnsInfoArray = this.selectedDataset.columnInfo;
     this.selectedNotNullColumnsArray = [];
+    this.experiment.outputColumn = this.selectedDataset.columnInfo[this.selectedDataset.columnInfo.length - 1].columnName;
 
     this.resetColumnEncodings();
     console.log(this.experiment.encodings);
-- 
cgit v1.2.3