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".

---
 .../src/app/experiment/experiment.component.html   | 297 ++++++++++-----------
 1 file changed, 140 insertions(+), 157 deletions(-)

(limited to 'frontend/src/app/experiment/experiment.component.html')

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
-- 
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/experiment/experiment.component.html')

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 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/experiment/experiment.component.html')

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


From 6c0ba41002e53bd6b314d0cc961866acbbb07c9a Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Mon, 18 Apr 2022 22:06:53 +0200
Subject: Uradjeno da kad se klikne na ,,sacuvaj eksperiment,, redirektuje ga
 na stranicu za treniranje modela gde ce biti izabran taj eskperiment za dalji
 rad; Izmenjen ispis kod opcije za brisanje svih redova.

---
 frontend/src/app/app-routing.module.ts                |  2 +-
 frontend/src/app/experiment/experiment.component.html |  6 ++++--
 frontend/src/app/experiment/experiment.component.ts   | 12 ++++++++----
 frontend/src/app/training/training.component.ts       | 18 +++++++++++++-----
 4 files changed, 26 insertions(+), 12 deletions(-)

(limited to 'frontend/src/app/experiment/experiment.component.html')

diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 238668d9..a0952d21 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -19,8 +19,8 @@ const routes: Routes = [
   { path: '', component: HomeComponent, data: { title: 'Početna strana' } },
   /*{ path: 'add-model', component: AddModelComponent, data: { title: 'Dodaj model' } },*/
   { path: 'experiment', component: ExperimentComponent, data: { title: 'Dodaj eksperiment' } },
-  { path: 'training', component: TrainingComponent, data: { title: 'Treniraj model' } },
   { path: 'training/:id', component: TrainingComponent, data: { title: 'Treniraj model' } },
+  { path: 'training', component: TrainingComponent, data: { title: 'Treniraj model' } },
   { path: 'my-datasets', component: MyDatasetsComponent, canActivate: [AuthGuardService], data: { title: 'Moji izvori podataka' } },
   { path: 'my-models', component: MyModelsComponent, canActivate: [AuthGuardService], data: { title: 'Moji modeli' } },
   { path: 'my-predictors', component: MyPredictorsComponent, canActivate: [AuthGuardService], data: { title: 'Moji trenirani modeli' } },
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index 62236cce..ffc1db9d 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -63,8 +63,10 @@
                             <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>
+                                <label *ngIf="selectedColumnsInfoArray.length == selectedDataset.columnInfo.length" for="delRows" class="form-check-label ">Obriši sve
+                            redove sa nedostajućim vrednostima ({{selectedDataset.nullRows}} od {{selectedDataset.rowCount}})</label>
+                                <label *ngIf="selectedColumnsInfoArray.length != selectedDataset.columnInfo.length" for="delRows" class="form-check-label ">Obriši sve
+                            redove sa nedostajućim vrednostima</label><br>
                                 <input type="radio" [(ngModel)]="experiment.nullValues " [value]="NullValueOptions.DeleteColumns " class="form-check-input" value="deleteCols" name="fillMissing " id="delCols" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
                                 <label for="delCols" class="form-check-label ">Obriši sve
                             kolone sa nedostajućim vrednostima ({{countSelectedNullCols()}} od {{selectedDataset.columnInfo.length}})</label><br>
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 2d0f6ec5..7e2f0b29 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -6,6 +6,9 @@ import { ModelsService } from '../_services/models.service';
 import Shared from '../Shared';
 import { ExperimentsService } from '../_services/experiments.service';
 import { ColumnEncoding } from '../_data/Experiment';
+import { Router } from '@angular/router';
+import { TrainingComponent } from '../training/training.component';
+import { retryWhen } from 'rxjs';
 
 @Component({
   selector: 'app-experiment',
@@ -30,7 +33,7 @@ export class ExperimentComponent implements OnInit {
 
   tempTestSetDistribution = 90;
 
-  constructor(private modelsService: ModelsService, private experimentsService: ExperimentsService) {
+  constructor(private experimentsService: ExperimentsService, private router: Router) {
   }
 
   ngOnInit(): void {
@@ -43,7 +46,6 @@ export class ExperimentComponent implements OnInit {
     this.experiment.outputColumn = this.selectedDataset.columnInfo[this.selectedDataset.columnInfo.length - 1].columnName;
 
     this.resetColumnEncodings();
-    console.log(this.experiment.encodings);
   }
 
   resetColumnEncodings() {
@@ -166,7 +168,7 @@ export class ExperimentComponent implements OnInit {
   }
 
   saveExperiment() {
-    if (this.selectedDataset == undefined) {
+      if (this.selectedDataset == undefined) {
       Shared.openDialog("Greška", "Izvor podataka nije izabran!");
       return;
     }
@@ -192,7 +194,7 @@ 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;
@@ -202,6 +204,8 @@ export class ExperimentComponent implements OnInit {
       this.experiment.encodings = [];
 
       Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran.");
+
+      this.router.navigate(['/training', this.experiment._id]);
     }, (error) => {
       if (error.error == "Experiment with this name exists") {
         Shared.openDialog("Greška", "Eksperiment sa unetim nazivom već postoji u Vašoj kolekciji. Unesite neki drugi naziv.");
diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts
index 027d2c22..f60734cc 100644
--- a/frontend/src/app/training/training.component.ts
+++ b/frontend/src/app/training/training.component.ts
@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import Shared from '../Shared';
 import Experiment from '../_data/Experiment';
 import Model from '../_data/Model';
-import { DatasetsService } from '../_services/datasets.service';
 import { ExperimentsService } from '../_services/experiments.service';
 import { ModelsService } from '../_services/models.service';
 
@@ -11,7 +11,7 @@ import { ModelsService } from '../_services/models.service';
   templateUrl: './training.component.html',
   styleUrls: ['./training.component.css']
 })
-export class TrainingComponent{
+export class TrainingComponent implements OnInit{
 
   myExperiments?: Experiment[];
   selectedExperiment?: Experiment;
@@ -21,9 +21,17 @@ export class TrainingComponent{
 
   term: string = "";
 
-  constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private experimentsService: ExperimentsService) { 
-    this.experimentsService.getMyExperiments().subscribe((experiments) => {
-      this.myExperiments = experiments;
+  constructor(private modelsService: ModelsService, private route: ActivatedRoute, private experimentsService: ExperimentsService) { 
+  }
+
+  ngOnInit(): void { 
+    this.route.queryParams.subscribe(params => {
+      let expId =this.route.snapshot.paramMap.get("id");
+
+      this.experimentsService.getMyExperiments().subscribe((experiments) => {
+        this.myExperiments = experiments;
+        this.selectedExperiment = this.myExperiments.filter(x => x._id == expId)[0];
+      });
     });
   }
 
-- 
cgit v1.2.3


From 314e7ff51cdbb49e5d30c6a67bcfa80a42736948 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 20 Apr 2022 01:13:38 +0200
Subject: Dugme za treniranje se disable-uje dok traje treniranje. Podesene
 strelice za navigaciju i linkovi kod pravljenja eksperimenta.
 Obrisani/zakomentarisani console.logovi na frontu.

---
 .../src/app/_elements/metric-view/metric-view.component.ts |  6 +++---
 .../src/app/_elements/model-load/model-load.component.ts   |  2 +-
 .../app/_elements/notifications/notifications.component.ts |  2 +-
 frontend/src/app/_services/signal-r.service.ts             |  6 +++---
 frontend/src/app/app.component.ts                          |  1 -
 frontend/src/app/experiment/experiment.component.css       |  5 +++++
 frontend/src/app/experiment/experiment.component.html      | 14 +++++++-------
 frontend/src/app/experiment/experiment.component.ts        | 12 +++++++++++-
 frontend/src/app/training/training.component.html          |  2 +-
 frontend/src/app/training/training.component.ts            |  7 +++++--
 10 files changed, 37 insertions(+), 20 deletions(-)

(limited to 'frontend/src/app/experiment/experiment.component.html')

diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts
index 76dd7d20..18b0d1ad 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.ts
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts
@@ -16,13 +16,13 @@ export class MetricViewComponent implements OnInit {
     if(this.signalRService.hubConnection)
       {
         this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
-        console.log(stat)
-        console.log(totalEpochs)
+        //console.log(stat)
+        //console.log(totalEpochs)
         const data=JSON.parse(stat)
         for (let key in data) 
         {
           let value = data[key];
-          console.log(value)
+          //console.log(value)
         }
       });
       
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 8bf8fd93..8fe864b7 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ b/frontend/src/app/_elements/model-load/model-load.component.ts
@@ -57,7 +57,7 @@ export class ModelLoadComponent implements OnInit {
     else {
       this.modelsService.getMyModelsByType(ProblemType.Regression).subscribe((models) => {
         this.myModels = models;
-        console.log("modeli po tipu: ", this.myModels);
+        //console.log("modeli po tipu: ", this.myModels);
       });
     }*/
   }
diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts
index 9b460240..f324662a 100644
--- a/frontend/src/app/_elements/notifications/notifications.component.ts
+++ b/frontend/src/app/_elements/notifications/notifications.component.ts
@@ -24,7 +24,7 @@ export class NotificationsComponent implements OnInit {
       this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
         const existingNotification = this.notifications.find(x => x.id === mId)
         const progress = ((currentEpoch + 1) / totalEpochs);
-        console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch);
+        //console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch);
         if (!existingNotification)
           this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true));
         else {
diff --git a/frontend/src/app/_services/signal-r.service.ts b/frontend/src/app/_services/signal-r.service.ts
index b279b5ca..109fc9e5 100644
--- a/frontend/src/app/_services/signal-r.service.ts
+++ b/frontend/src/app/_services/signal-r.service.ts
@@ -16,13 +16,13 @@ export class SignalRService {
       }).build();
 
     this.hubConnection.on("Notify", (message: string) => {
-      console.log(" " + message);
+      //console.log(" " + message);
     });
 
     this.hubConnection
       .start()
-      .then(() => console.log("con Started"))
-      .catch(err => console.log("Error" + err))
+      .then(() => {})
+      .catch(err => {})
   }
   constructor(private cookie: CookieService) { }
 }
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 59f247ed..54c18bec 100644
--- a/frontend/src/app/app.component.ts
+++ b/frontend/src/app/app.component.ts
@@ -50,7 +50,6 @@ export class AppComponent implements OnInit {
   private startHttpRequest = () => {
     this.http.get('http://localhost:5283/chatHub')
       .subscribe(res => {
-        console.log(res);
       })
   }
 
diff --git a/frontend/src/app/experiment/experiment.component.css b/frontend/src/app/experiment/experiment.component.css
index 4a3d7741..d84a897e 100644
--- a/frontend/src/app/experiment/experiment.component.css
+++ b/frontend/src/app/experiment/experiment.component.css
@@ -40,4 +40,9 @@ ul li:hover {
 
 h2 {
     color: #003459;
+}
+
+.boldClass {
+    font-weight: bold;
+    font-size: 125%;
 }
\ No newline at end of file
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index ffc1db9d..4675236c 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -4,12 +4,12 @@
 <div id="wrapper">
     <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
 
-        <div class="d-flex flex-row justify-content-center align-items-center my-3">
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="0">Izvor podataka</a>
+        <div class="d-flex flex-row justify-content-center align-items-center my-3 links">
+            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" (click)="updateCarouselIndex(0)" [ngClass]="{'boldClass' : carouselIndex == 0}" style="text-decoration: none">Izvor podataka</a>
             <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1">Preprocesiranje</a>
+            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" (click)="updateCarouselIndex(1)" [ngClass]="{'boldClass' : carouselIndex == 1}" style="text-decoration: none">Preprocesiranje</a>
             <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2">Dodaj eksperiment</a>
+            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" (click)="updateCarouselIndex(2)" [ngClass]="{'boldClass' : carouselIndex == 2}" style="text-decoration: none">Dodaj eksperiment</a>
         </div>
 
         <div id="carouselExampleControls" class="carousel slide px-5 mt-5" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false">
@@ -244,11 +244,11 @@
 
             </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 class="m-3 d-flex flex-row align-items-center" style=" margin-left: auto;">
+                <button class="me-auto" *ngIf="carouselIndex != 0" mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="prev" (click)="updateCarouselIndex(carouselIndex - 1)">
                                 <mat-icon>arrow_backward</mat-icon>
                             </button>
-                <button mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="next">
+                <button class="ms-auto" *ngIf="carouselIndex != 2" mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="next" (click)="updateCarouselIndex(carouselIndex + 1)">
                                 <mat-icon>arrow_forward</mat-icon>
                             </button>
             </div>
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 75c8e0d8..1533ceb3 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -8,7 +8,7 @@ import { ExperimentsService } from '../_services/experiments.service';
 import { ColumnEncoding } from '../_data/Experiment';
 import { Router } from '@angular/router';
 import { TrainingComponent } from '../training/training.component';
-import { retryWhen } from 'rxjs';
+import { NEVER, retryWhen } from 'rxjs';
 
 @Component({
   selector: 'app-experiment',
@@ -32,6 +32,7 @@ export class ExperimentComponent implements OnInit {
   selectedNotNullColumnsArray: string[] = [];
 
   tempTestSetDistribution = 90;
+  carouselIndex: number = 0;
 
   constructor(private experimentsService: ExperimentsService, private router: Router) {
   }
@@ -219,4 +220,13 @@ export class ExperimentComponent implements OnInit {
     }
     return counter;
   }
+
+  updateCarouselIndex(newIndex: number) {
+    if (newIndex > 2)
+      newIndex = 2;
+    else if (newIndex < 0)
+      newIndex = 0; 
+
+    this.carouselIndex = newIndex;
+  }
 }
diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html
index 2bee3b12..0849d0c3 100644
--- a/frontend/src/app/training/training.component.html
+++ b/frontend/src/app/training/training.component.html
@@ -26,7 +26,7 @@
             <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
+                <button id="trainButton" #trainButton class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
                     model</button>
             </div>
 
diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts
index 4c38f166..bff3304f 100644
--- a/frontend/src/app/training/training.component.ts
+++ b/frontend/src/app/training/training.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import Shared from '../Shared';
 import Experiment from '../_data/Experiment';
@@ -17,6 +17,8 @@ import { SignalRService } from '../_services/signal-r.service';
 export class TrainingComponent implements OnInit {
 
   @ViewChild(ModelLoadComponent) modelLoadComponent?: ModelLoadComponent;
+  @ViewChild("trainButton") trainButtonRef!: ElementRef;
+  
 
   myExperiments?: Experiment[];
   selectedExperiment?: Experiment;
@@ -55,7 +57,6 @@ export class TrainingComponent implements OnInit {
       this.myExperiments = experiments;
 
       this.selectedExperiment = this.myExperiments.filter(x => x._id == andSelectWithId)[0];
-      console.log("selektovan exp u training comp: ", this.selectedExperiment);
     });
   }
 
@@ -80,8 +81,10 @@ export class TrainingComponent implements OnInit {
       Shared.openDialog("Greška", "Molimo Vas da izaberete model.");
       return;
     }
+    this.trainButtonRef.nativeElement.disabled = true;
     this.modelsService.trainModel(this.selectedModel._id, this.selectedExperiment._id).subscribe((response: any) => {
       //console.log('Train model complete!', response);
+      this.trainButtonRef.nativeElement.disabled = false;
       Shared.openDialog("Obaveštenje", "Treniranje modela je uspešno završeno!");
       this.trainingResult = response;
     });
-- 
cgit v1.2.3


From decbc2dc6b583dcf11cccf77f057cc7ec7b52adc Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Wed, 20 Apr 2022 01:28:53 +0200
Subject: Uklonio mogucnost da korisnik izabere da izbrise izlaznu kolonu,
 umesto opcije pise izbrisi kolonu sada samo pise (izlazna kolona). Ispravio
 neke bug-ove.

---
 .gitignore                                         |  3 ++
 .../src/app/_elements/navbar/navbar.component.ts   |  8 +++-
 frontend/src/app/_services/signal-r.service.ts     |  5 +++
 .../src/app/experiment/experiment.component.html   | 16 ++++---
 frontend/src/app/training/training.component.html  | 50 ++++++++++++----------
 5 files changed, 53 insertions(+), 29 deletions(-)

(limited to 'frontend/src/app/experiment/experiment.component.html')

diff --git a/.gitignore b/.gitignore
index 247afbd9..bdd28b3f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,6 @@ backend/microservice/api/__pycache__/
 production/app/node_modules/
 production/app/dist/
 backend/microservice/api/temp/
+backend/microservice/Boston.csv
+backend/microservice/diamonds.csv
+backend/microservice/IMDB-Movie-Data.csv
diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts
index 368508ed..d5d1744f 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.ts
+++ b/frontend/src/app/_elements/navbar/navbar.component.ts
@@ -4,6 +4,7 @@ import { AuthService } from '../../_services/auth.service';
 import shared from 'src/app/Shared';
 import { UserInfoService } from 'src/app/_services/user-info.service';
 import { MatDialog } from '@angular/material/dialog';
+import { SignalRService } from 'src/app/_services/signal-r.service';
 
 @Component({
   selector: 'app-navbar',
@@ -15,11 +16,15 @@ export class NavbarComponent implements OnInit {
   currentUrl: string;
   shared = shared;
 
-  constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService, private matDialog: MatDialog) {
+  constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService, private matDialog: MatDialog, private signalRService: SignalRService) {
     shared.dialog = matDialog;
     this.currentUrl = this.location.path();
     this.location.onUrlChange(() => {
       this.currentUrl = this.location.path();
+    });
+
+    this.auth.loggedInEvent.subscribe(_ => {
+      this.signalRService.startConnection();
     })
   }
 
@@ -34,5 +39,6 @@ export class NavbarComponent implements OnInit {
 
   logOut() {
     this.auth.logOut();
+    this.signalRService.stopConnection();
   }
 }
diff --git a/frontend/src/app/_services/signal-r.service.ts b/frontend/src/app/_services/signal-r.service.ts
index 109fc9e5..6a2e61e9 100644
--- a/frontend/src/app/_services/signal-r.service.ts
+++ b/frontend/src/app/_services/signal-r.service.ts
@@ -24,5 +24,10 @@ export class SignalRService {
       .then(() => {})
       .catch(err => {})
   }
+
+  public stopConnection = () => {
+    this.hubConnection?.stop();
+  }
+
   constructor(private cookie: CookieService) { }
 }
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index 4675236c..569d1bfc 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -12,7 +12,7 @@
             <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" (click)="updateCarouselIndex(2)" [ngClass]="{'boldClass' : carouselIndex == 2}" style="text-decoration: none">Dodaj eksperiment</a>
         </div>
 
-        <div id="carouselExampleControls" class="carousel slide px-5 mt-5" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false">
+        <div id="carouselExampleControls" class="carousel px-5 mt-5" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false">
             <div class="carousel-inner">
                 <div class="carousel-item active mt-2">
                     <h2 class="mb-5">1. Izvor podataka</h2>
@@ -123,13 +123,17 @@
                                                         </div>
 
                                                         <div class="flex-shrink-1 mx-3">
-                                                            <div class="input-group">
+                                                            <div class="input-group" *ngIf="column.columnName != this.experiment.outputColumn">
                                                                 <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši
-                                                            kolonu
-                                                            <input type="radio" [id]="'delCol_'+column.columnName"
+                                                                kolonu
+                                                                <input type="radio" [id]="'delCol_'+column.columnName"
                                                                 [name]="'delOp_'+column.columnName"
-                                                                (change)="emptyFillTextInput(column.columnName)"></label>
+                                                                (change)="emptyFillTextInput(column.columnName)">
+                                                                </label>
                                                             </div>
+                                                            <label class="form-control text-secondary" role="alert" *ngIf="column.columnName == this.experiment.outputColumn">
+                                                                (Izlazna kolona)
+                                                            </label>
                                                         </div>
 
                                                         <div class="flex-shrink-1 mx-3">
@@ -209,7 +213,7 @@
                 </div>
 
                 <div class="carousel-item mt-2">
-                    <h2 class="mb-4">3. Dodaj eskperiment</h2>
+                    <h2 class="mb-4">3. Dodaj eksperiment</h2>
 
                     <div class="row">
                         <div class="col"></div>
diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html
index 25a29828..f20b0085 100644
--- a/frontend/src/app/training/training.component.html
+++ b/frontend/src/app/training/training.component.html
@@ -2,32 +2,40 @@
     <h1>Trenirajte veštačku neuronsku mrežu</h1>
 </div>
 <div id="wrapper" class="mb-4">
-    <div id="container" class="container p-5 row" style="background-color: white; min-height: 100%;">
-        <div class="col"></div>
+    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
+        <div class="row">
+            <div class="col"></div>
 
-        <div class="col-10">
+            <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>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 *ngIf="selectedExperiment" (selectedModelChangeEvent)="selectModel($event)" [forExperiment]="selectedExperiment"></app-model-load>
-            <h3 *ngIf="!selectedExperiment">Morate prvo izabrati eksperiment.</h3>
+                <h2 class="mt-5 mb-2">2. Izaberite model</h2>
+                <app-model-load *ngIf="selectedExperiment" (selectedModelChangeEvent)="selectModel($event)" [forExperiment]="selectedExperiment"></app-model-load>
+                <h3 *ngIf="!selectedExperiment">Morate prvo izabrati eksperiment.</h3>
 
-            <h2 class="my-5">3. Treniranje modela</h2>
+                <h2 class="my-5">3. Treniranje modela</h2>
 
-            <div class="d-flex flex-row justify-content-center align-items-center my-3">
-                <button id="trainButton" #trainButton class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
+                <div class="d-flex flex-row justify-content-center align-items-center my-3">
+                    <button 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>
+                    <app-metric-view *ngIf="trainingResult" [metrics]="trainingResult"></app-metric-view>
+                </div>
             </div>
 
             <h2 class="mt-5">Rezultati treniranja</h2>
@@ -36,7 +44,5 @@
                 <app-metric-view *ngIf="trainingResult" [metrics]="trainingResult"></app-metric-view>
             </div>
         </div>
-
-        <div class="col"></div>
     </div>
 </div>
\ No newline at end of file
-- 
cgit v1.2.3


From cb6a492ab9a54777eb4583bfeb97f4c48442e16d Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 20 Apr 2022 01:42:18 +0200
Subject: Napravi eksperiment: podeseno da ne moze da se ode na naredni korak
 dok se ne zavrsi trenutni.

---
 frontend/src/app/experiment/experiment.component.html |  2 +-
 frontend/src/app/experiment/experiment.component.ts   | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

(limited to 'frontend/src/app/experiment/experiment.component.html')

diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index 4675236c..a2a45f20 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -5,7 +5,7 @@
     <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 links">
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" (click)="updateCarouselIndex(0)" [ngClass]="{'boldClass' : carouselIndex == 0}" style="text-decoration: none">Izvor podataka</a>
+            <a id="firstStep" href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" (click)="updateCarouselIndex(0);" [ngClass]="{'boldClass' : carouselIndex == 0}" style="text-decoration: none">Izvor podataka</a>
             <mat-icon>arrow_forward</mat-icon>
             <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" (click)="updateCarouselIndex(1)" [ngClass]="{'boldClass' : carouselIndex == 1}" style="text-decoration: none">Preprocesiranje</a>
             <mat-icon>arrow_forward</mat-icon>
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 1533ceb3..64adce3f 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -227,6 +227,16 @@ export class ExperimentComponent implements OnInit {
     else if (newIndex < 0)
       newIndex = 0; 
 
+    if (this.carouselIndex == 0 && (newIndex == 1 || newIndex == 2))
+      this.checkRequiredData();
     this.carouselIndex = newIndex;
   }
+
+  checkRequiredData() {
+      if (this.selectedDataset == undefined) {
+        (<HTMLAnchorElement>document.getElementById("firstStep")).click();
+        Shared.openDialog("Pažnja", "Potrebno je da dodate ili izabere izvor podataka kako biste prešli na naredni korak (preprocesiranje).");
+        return;
+      }
+  }
 }
-- 
cgit v1.2.3