From 8392d3cf8ba8cdecc7676e2e3d55edae11c048ef Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 13 Apr 2022 20:56:09 +0200
Subject: Sredjen izgled stranica "Napravi eksperiment" i "Treniraj model", kao
 i komponenti model-load i dataset-load. Kod dodavanja modela, postavljeno da
 sve metrike budu automatski cekirane.

---
 .../src/app/experiment/experiment.component.css    |   4 +
 .../src/app/experiment/experiment.component.html   | 427 ++++++++++-----------
 .../src/app/experiment/experiment.component.ts     |   6 -
 3 files changed, 197 insertions(+), 240 deletions(-)

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

diff --git a/frontend/src/app/experiment/experiment.component.css b/frontend/src/app/experiment/experiment.component.css
index ee4b0448..4a3d7741 100644
--- a/frontend/src/app/experiment/experiment.component.css
+++ b/frontend/src/app/experiment/experiment.component.css
@@ -36,4 +36,8 @@
 
 ul li:hover {
     background-color: lightblue;
+}
+
+h2 {
+    color: #003459;
 }
\ 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 36cf9eda..337d7369 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -1,5 +1,5 @@
 <div id="header">
-    <h1>Napravite svoju veštačku neuronske mrežu</h1>
+    <h1>Napravite svoju veštačku neuronsku mrežu</h1>
 </div>
 <div id="wrapper">
     <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
@@ -12,277 +12,236 @@
             <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2">Dodaj eksperiment</a>
         </div>
 
-        <div id="carouselExampleControls" class="carousel slide" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false">
+        <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">
-                <h2>1. Izvor podataka</h2>
+            <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">
-                <h2>2. Preprocesiranje</h2>
+            <div class="carousel-item mt-2">
+                <h2 class="mb-4">2. Preprocesiranje</h2>
 
-                <label for="name" class="col-form-label">Naziv eksperimenta:</label>
-                <input type="text" class="form-control mb-1" 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>
-
-                <h3 class="mt-3">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}}">
-                                        {{item.columnName}}
-                                    </label>
+                <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}}">
+                                            {{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}}">
-                                        {{item.columnName}}
-                                    </label>
+                            <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}}">
+                                            {{item.columnName}}
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <br>
-                <h3>Popunjavanje nedostajućih vrednosti:</h3>
-                <div class="form-check" *ngIf="selectedDataset">
-                    <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.DeleteRows"
-                        class="form-check-input" value="deleteRows" name="fillMissing" id="delRows" checked
-                        data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
-                    <label for="delRows" class="form-check-label">Obriši sve
-                        redove sa nedostajućim vrednostima ({{selectedDataset.nullRows}} / TODO)</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 ({{selectedDataset.nullCols}} / TODO)</label><br>
-                    <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace"
-                        class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse"
-                        data-bs-target="#fillMissingCustom:not(.show)">
-                    <label for="replace" class="form-check-label">Izabraću
-                        vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br>
-                    <div class="collapse" id="fillMissingCustom">
-                        <div>
-                            <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
-                            <div class="my-3" *ngIf="getSelectedNullColumnsArray().length > 0" >
-                                <label class="text-center form-control mx-3 text-secondary">
-                                    Kolone <span style="font-style: italic;" *ngFor="let colname of getSelectedNullColumnsArray(); let i = index">
-                                        <span *ngIf="i != getSelectedNullColumnsArray().length - 1">{{colname}}, </span> 
-                                        <span *ngIf="i == getSelectedNullColumnsArray().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>
+                    
+                    <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}} / TODO)</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 ({{selectedDataset.nullCols}} / TODO)</label><br>
+                        <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace"
+                            class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse"
+                            data-bs-target="#fillMissingCustom:not(.show)">
+                        <label for="replace" class="form-check-label">Izabraću
+                            vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br>
+                        <div class="collapse" id="fillMissingCustom">
+                            <div>
+                                <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
+                                <div class="my-3" *ngIf="getSelectedNullColumnsArray().length > 0" >
+                                    <label class="text-center form-control mx-3 text-secondary">
+                                        Kolone <span style="font-style: italic;" *ngFor="let colname of getSelectedNullColumnsArray(); let i = index">
+                                            <span *ngIf="i != getSelectedNullColumnsArray().length - 1">{{colname}}, </span> 
+                                            <span *ngIf="i == getSelectedNullColumnsArray().length - 1">{{colname}} </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">
-                                                            Zameni
-                                                            <input type="radio" [id]="'fillCol_'+column.columnName"
-                                                                [name]="'delOp_'+column.columnName">
-                                                        </label>
-                                                    </div>
-                                                    <input type="text" class="form-control" [id]="'fillText_'+column.columnName"
-                                                        (keyup)="checkFillColRadio(column.columnName)"
-                                                        placeholder="Unesi vrednost...">
-
-                                                    <div class="input-group-append">
-                                                        <select [id]="'replaceOptions'+i" class="form-control btn-primary"
-                                                            *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);">
-                                                            <option
-                                                                *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
-                                                                [value]="option">
-                                                                {{ optionName }}
-                                                            </option>
-                                                        </select>
-                                                        <select [id]="'replaceOptions'+i"
-                                                            class="form-control btn-outline-primary"
-                                                            *ngIf="!column.isNumber && column.numNulls > 0"
-                                                            (change)="replace($event, column); checkFillColRadio(column.columnName);">
-                                                            <option *ngFor="let option of column.uniqueValues" [value]="option">
-                                                                {{ option }}
-                                                            </option>
-                                                        </select>
+                                        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">
+                                                                Zameni
+                                                                <input type="radio" [id]="'fillCol_'+column.columnName"
+                                                                    [name]="'delOp_'+column.columnName">
+                                                            </label>
+                                                        </div>
+                                                        <input type="text" class="form-control" [id]="'fillText_'+column.columnName"
+                                                            (keyup)="checkFillColRadio(column.columnName)"
+                                                            placeholder="Unesi vrednost...">
+    
+                                                        <div class="input-group-append">
+                                                            <select [id]="'replaceOptions'+i" class="form-control btn-primary"
+                                                                *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);">
+                                                                <option
+                                                                    *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
+                                                                    [value]="option">
+                                                                    {{ optionName }}
+                                                                </option>
+                                                            </select>
+                                                            <select [id]="'replaceOptions'+i"
+                                                                class="form-control btn-outline-primary"
+                                                                *ngIf="!column.isNumber && column.numNulls > 0"
+                                                                (change)="replace($event, column); checkFillColRadio(column.columnName);">
+                                                                <option *ngFor="let option of column.uniqueValues" [value]="option">
+                                                                    {{ option }}
+                                                                </option>
+                                                            </select>
+                                                        </div>
                                                     </div>
                                                 </div>
-                                            </div>
-
-                                            <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 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
-                                                        redove
-                                                        <input type="radio" [id]="'delRows_'+column.columnName"
-                                                            [name]="'delOp_'+column.columnName" checked
-                                                            (change)="emptyFillTextInput(column.columnName)"></label>
+    
+                                                <div class="flex-shrink-1 mx-3">
+                                                    <div class="input-group">
+                                                        <label class="form-control" [for]="'delRows_'+column.columnName">Izbriši
+                                                            redove
+                                                            <input type="radio" [id]="'delRows_'+column.columnName"
+                                                                [name]="'delOp_'+column.columnName" checked
+                                                                (change)="emptyFillTextInput(column.columnName)"></label>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <!--
-                                        <div *ngFor="let column of selectedDataset.columnInfo; let i = index" class="my-3">
-                                            <div class="input-group row" *ngIf="getInputById('rb_'+column.columnName).checked">
-                                                <span class="input-group-text col-2 text-center">
-                                                    {{column.columnName}}&nbsp;<span class="small" style="color:gray;">(br
-                                                        null)</span>
-                                                </span>
-                                                <label *ngIf="true" class="form-control">Ova
-                                                    kolona nema nedostajućih vrednosti.</label>
-                
-                                                <input *ngIf="true" type="radio" [id]="'fillCol_'+column.columnName" class="col-1 mt-2"
-                                                    [name]="'delOp_'+column.columnName">
-                                                <select [id]="'replaceOptions'+i" class="form-control col-2" *ngIf="column.isNumber"
-                                                    (change)="replace($event, column);">
-                                                    <option
-                                                        *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
-                                                        [value]="option">
-                                                        {{ optionName }}
-                                                    </option>
-                                                </select>
-                                                <select [id]="'replaceOptions'+i"
-                                                    class="form-control btn-outline-primary"
-                                                    *ngIf="!column.isNumber && column.numNulls > 0"
-                                                    (change)="replace($event, column); checkFillColRadio(column.columnName);">
-                                                    <option *ngFor="let option of column.uniqueValues" [value]="option">
-                                                        {{ option }}
-                                                    </option>
-                                                </select>
-                                                <input *ngIf="true" type="text" class="form-control col-1"
-                                                    [id]="'fillText_'+column.columnName" (keyup)="checkFillColRadio(column.columnName)"
-                                                    placeholder="Unesi vrednost...">
-                
-                                                <label *ngIf="true" class="form-control col-2" [for]="'delCol_'+column.columnName"
-                                                    .name>Izbriši
-                                                    kolonu
-                                                    <input type="radio" [id]="'delCol_'+column.columnName"
-                                                        [name]="'delOp_'+column.columnName"
-                                                        (change)="emptyFillTextInput(column.columnName)"></label>
-                                                <label *ngIf="true" class="form-control col-2"
-                                                    [for]="'delRows_'+column.columnName">Izbriši
-                                                    redove
-                                                    <input type="radio" [id]="'delRows_'+column.columnName"
-                                                        [name]="'delOp_'+column.columnName"
-                                                        (change)="emptyFillTextInput(column.columnName)" checked></label>
-                                            </div>
-                                        </div>
-                                        -->
                             </div>
                         </div>
                     </div>
-                </div>
-
-                <div id="randomOptions">
-                    <div class="col-3 mt-2">
-                        <label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
-                        <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="experiment.randomOrder"
+    
+                    <div id="randomOptions" class="mt-5">
+                        <div class="p-2 m-2">
+                            <label for="type" class="form-check-label">Želite li da redosled podataka bude nasumičan?</label>
+                            <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="experiment.randomOrder"
                             type="checkbox" value="" checked>
-                    </div>
-                    <div class="border m-3">
-                        <div class="row p-2 m-2">
-                            <div class="col-4">
-                                <label for="splitYesNo" class="form-check-label">
-                                    <h3>Podela test skupa:&nbsp;&nbsp;
-                                        <input id="splitYesNo" class="form-check-input" type="checkbox"
-                                            [checked]="experiment.randomTestSet"
-                                            (change)="experiment.randomTestSet = !experiment.randomTestSet">
-                                    </h3>
-                                </label>
-                            </div>
-                            <div class="col-8">
-                                trening
-                                <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10"
-                                    name="randomTestSetDistribution" thumbLabel [disabled]="!experiment.randomTestSet"
-                                    [(ngModel)]="tempTestSetDistribution">
-                                </mat-slider>
-                                test
-                            </div>
                         </div>
-        
-                        <div class="row p-2 mx-2">
-                            <div class="col-4">
+                        <div class="border m-3">
+                            <div class="row p-2 m-2">
+                                <div class="col-4">
+                                    <label for="splitYesNo" class="form-check-label">
+                                        <h3>Podela test skupa:&nbsp;&nbsp;
+                                            <input id="splitYesNo" class="form-check-input" type="checkbox"
+                                                [checked]="experiment.randomTestSet"
+                                                (change)="experiment.randomTestSet = !experiment.randomTestSet">
+                                        </h3>
+                                    </label>
+                                </div>
+                                <div class="col-8">
+                                    trening
+                                    <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10"
+                                        name="randomTestSetDistribution" thumbLabel [disabled]="!experiment.randomTestSet"
+                                        [(ngModel)]="tempTestSetDistribution">
+                                    </mat-slider>
+                                    test
+                                </div>
+                            </div>
+            
+                            <div class="row p-2 m-2">
                                 <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
                                     skup:</label>
-                            </div>
-                            <div class="col-2">
-                                <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
+                                <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">
-                    <div class="col-3">
-                        <label for="encoding" class="col-form-label">Enkoding: </label>
-                    </div>
-                    <div class="col-2">
-                        <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="experiment.encoding">
-                            <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
-                                [value]="option">
-                                {{ optionName }}
-                            </option>
-                        </select>
+    
+                    <div id="encodingForColumns" class="my-5">
+                        <div class="col-3">
+                            <label for="encoding" class="col-form-label">Enkoding: </label>
+                        </div>
+                        <div class="col-2">
+                            <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="experiment.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 class="carousel-item">
-                <div class="form-group row mt-5 mb-3">
+            <div class="carousel-item mt-2">
+                <h2 class="mb-4">3. Dodaj eskperiment</h2>
+
+                <div class="row">
                     <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-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>
+                    </div>
                     <div class="col"></div>
                 </div>
             </div>
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 8a1b7d70..a2b5602b 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -24,7 +24,6 @@ export class ExperimentComponent implements OnInit {
   Object = Object;
 
   selectedColumnsInfoArray: ColumnInfo[] = [];
-  //selectedOutputColumnVal: string = '';
   selectedNullColumnsArray: string[] = [];
 
   tempTestSetDistribution = 90;
@@ -35,11 +34,9 @@ export class ExperimentComponent implements OnInit {
   }
 
   updateDataset(dataset: Dataset) {
-    //console.log(dataset);
     this.selectedDataset = dataset;
     this.selectedColumnsInfoArray = this.selectedDataset.columnInfo;
     this.selectedNullColumnsArray = [];
-    //console.log("array:", this.selectedColumnsInfoArray);
   }
 
   getInputById(id: string): HTMLInputElement {
@@ -151,7 +148,6 @@ export class ExperimentComponent implements OnInit {
         }
       }
     }
-    //console.log(array);
     return array;
   }
 
@@ -177,8 +173,6 @@ export class ExperimentComponent implements OnInit {
     for (let i = 0; i < pom.length; i++)
       this.experiment.inputColumns.push(pom[i].columnName);
 
-    //this.experiment.outputColumn = this.selectedOutputColumnVal;
-
     this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.numNulls > 0); //obavezno
     this.experiment.nullValuesReplacers = this.getNullValuesReplacersArray();
 
-- 
cgit v1.2.3