Dodao tabove za razlicite tabele u column-table komponenti.

1 files changed, 186 insertions, 121 deletions

diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html
index 56b95c29..5f4412a1 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -1,38 +1,102 @@
-<table *ngIf="dataset && experiment" class="table text-offwhite fixed bg-blur">
-    <thead>
-        <tr>
-            <th>Naziv</th>
-            <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                <div class="cell-align">
-                    #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
-                    <mat-checkbox checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
-                </div>
-            </th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <th>Tip</th>
-            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                <mat-form-field>
-                    <mat-select matNativeControl [(value)]="colInfo.isNumber">
-                        <mat-option [value]="false">Kategorijski</mat-option>
-                        <mat-option [value]="true">Numerički</mat-option>
-                    </mat-select>
-                </mat-form-field>
-            </td>
-        </tr>
-        <tr class="graphics-row">
-            <th class="no-pad border-bottom">Grafik</th>
-            <td class="graphic-class no-pad" *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                <app-box-plot *ngIf="colInfo.isNumber" [width]="150" [height]="150"></app-box-plot>
-                <app-pie-chart *ngIf="!colInfo.isNumber" [width]="150" [height]="150"></app-pie-chart>
-            </td>
-        </tr>
-        <tr>
-            <th class="brighter">Statistika</th>
-            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                <span *ngIf="colInfo.isNumber">
+<div id="tabs">
+    <div class="folder-tab p-1 rounded-top" *ngFor="let tab of tabs; let i = index" [style]="'z-index:' + calcZIndex(i) + ' ;'" [ngClass]="{'selected-tab' : selectedTab.index == i, 'hover-tab' : hoveringOverTab?.index == i}">
+        <a class="m-1 stretched-link tab-link" (click)="selectTab(i)" (mouseenter)="hoverOverTab(i)" (mouseleave)="hoverOverTab(-1)">
+            {{tab.name}}
+        </a>
+    </div>
+    <button mat-button class="p-1 folder-tab-end rounded-top">
+        Kolone
+        <mat-icon>keyboard_double_arrow_down</mat-icon>
+        <!--meni ovde-->
+    </button>
+</div>
+<div id="folder-table" *ngIf="dataset && experiment">
+    <!--<div [ngSwitch]="tabToDisplay">-->
+    <div>
+
+        <div [ngClass]="{'hidden': tabToDisplay != Table.Data}">
+            <table class="table text-offwhite fixed bg-blur">
+                <thead>
+                    <tr>
+                        <th>#</th>
+                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                            #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
+                            <mat-checkbox checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let row of tableData; let i = index">
+                        <th>#{{i}}</th>
+                        <td *ngFor="let col of row; let j = index">
+                            <div class="text-overflow">
+                                {{col}}
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div [ngClass]="{'hidden': tabToDisplay != Table.CorrelationMatrix}">
+            <table class="table text-offwhite fixed bg-blur">
+                <thead>
+                    <tr>
+                        <th>Naziv</th>
+                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                            #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                        <th>#{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}</th>
+                        <td *ngFor="let colInfo of dataset.columnInfo; let j = index">
+                            <div class="text-overflow">
+                                0.1
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div [ngClass]="{'hidden': tabToDisplay != Table.Columns}">
+            <table class="table text-offwhite fixed bg-blur">
+                <thead>
+                    <tr>
+                        <th>Naziv</th>
+                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                            <div class="cell-align">
+                                #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
+                                <mat-checkbox checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                            </div>
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <th>Tip</th>
+                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                            <mat-form-field>
+                                <mat-select matNativeControl [(value)]="colInfo.isNumber">
+                                    <mat-option [value]="false">Kategorijski</mat-option>
+                                    <mat-option [value]="true">Numerički</mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                        </td>
+                    </tr>
+                    <tr class="graphics-row">
+                        <th class="no-pad border-bottom">Grafik</th>
+                        <td class="graphic-class no-pad" *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                            <app-box-plot *ngIf="colInfo.isNumber" [width]="150" [height]="150"></app-box-plot>
+                            <app-pie-chart *ngIf="!colInfo.isNumber" [width]="150" [height]="150"></app-pie-chart>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th class="brighter">Statistika</th>
+                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                            <span *ngIf="colInfo.isNumber">
                     Mean: {{colInfo.mean}}<br>
                     Median: {{colInfo.median}}<br>
                     Min: {{colInfo.min}}<br>
@@ -42,119 +106,122 @@
                     Q3: {{colInfo.q3}}<br>
                     -->
                 </span>
-                <div class="text-overflow" *ngIf="!colInfo.isNumber">
-                    <span *ngFor="let uniqueValue of colInfo.uniqueValues | slice:0:6; let i = index">
+                            <div class="text-overflow" *ngIf="!colInfo.isNumber">
+                                <span *ngFor="let uniqueValue of colInfo.uniqueValues | slice:0:6; let i = index">
                         {{uniqueValue}}<br><!-- TODO na ML-u: broj ponavljanja unique values-a u zagradi nek pise -->
                     </span>
-                </div>
-            </td>
-        </tr>
-        <tr style="padding: 0">
-            <th class="brighter cell-align" (click)="openEncodingDialog()">
-                <span class="verticalAlign">Enkodiranje</span>&nbsp;
-                <span class="material-icons-round verticalAlign">settings</span>
-            </th>
-            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                <mat-form-field>
-                    <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding">
-                        <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option">
-                            {{ optionName }}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-            </td>
-        </tr>
-        <tr>
-            <th class="brighter cell-align" (click)="openMissingValuesDialog()">
-                <div id="missingValuesHeader">Regulisanje<br>nedostajućih<br>vrednosti<br></div>
-                <span class="material-icons-round">settings</span>
-            </th>
-            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
-
-                <button class="w-100" mat-raised-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu>
+                            </div>
+                        </td>
+                    </tr>
+                    <tr style="padding: 0">
+                        <th class="brighter cell-align" (click)="openEncodingDialog()">
+                            <span class="verticalAlign">Enkodiranje</span>&nbsp;
+                            <span class="material-icons-round verticalAlign">settings</span>
+                        </th>
+                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                            <mat-form-field>
+                                <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding">
+                                    <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option">
+                                        {{ optionName }}
+                                    </mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                        </td>
+                    </tr>
+                    <tr>
+                        <th class="brighter cell-align" (click)="openMissingValuesDialog()">
+                            <div id="missingValuesHeader">Regulisanje<br>nedostajućih<br>vrednosti<br></div>
+                            <span class="material-icons-round">settings</span>
+                        </th>
+                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+
+                            <button class="w-100" mat-raised-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu>
                     <div class="cell-align">
                         {{nullValOption[i]}}
                         <mat-icon>arrow_drop_down</mat-icon>
                     </div>
                 </button>
-                <mat-menu #menu="matMenu">
-                    <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteColumns, i)" value={{colInfo.columnName}}>Obriši kolonu</button>
-                    <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteRows, i)" value={{colInfo.columnName}}>Obriši redove</button>
-                    <button mat-menu-item [matMenuTriggerFor]="fillWith">Popuni sa ____</button>
-                </mat-menu>
+                            <mat-menu #menu="matMenu">
+                                <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteColumns, i)" value={{colInfo.columnName}}>Obriši kolonu</button>
+                                <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteRows, i)" value={{colInfo.columnName}}>Obriši redove</button>
+                                <button mat-menu-item [matMenuTriggerFor]="fillWith">Popuni sa ____</button>
+                            </mat-menu>
 
-                <mat-menu #fillWith="matMenu">
-                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.mean}}>Mean ({{colInfo.mean}})</button>
-                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.median}}>Median ({{colInfo.median}})</button>
-                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.max}}>Max ({{colInfo.max}})</button>
-                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.min}}>Min ({{colInfo.min}})</button>
+                            <mat-menu #fillWith="matMenu">
+                                <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.mean}}>Mean ({{colInfo.mean}})</button>
+                                <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.median}}>Median ({{colInfo.median}})</button>
+                                <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.max}}>Max ({{colInfo.max}})</button>
+                                <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.min}}>Min ({{colInfo.min}})</button>
 
-                    <button *ngIf="!colInfo.isNumber" mat-menu-item [matMenuTriggerFor]="uniques">Najčešće vrednosti</button>
+                                <button *ngIf="!colInfo.isNumber" mat-menu-item [matMenuTriggerFor]="uniques">Najčešće vrednosti</button>
 
-                    <button mat-menu-item [matMenuTriggerFor]="replaceWith">Unesi vrednost...</button>
-                </mat-menu>
+                                <button mat-menu-item [matMenuTriggerFor]="replaceWith">Unesi vrednost...</button>
+                            </mat-menu>
 
-                <mat-menu #uniques="matMenu">
-                    <button mat-menu-item *ngFor="let uniqueValue of colInfo.uniqueValues" (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{uniqueValue}}>{{uniqueValue}}</button>
-                </mat-menu>
+                            <mat-menu #uniques="matMenu">
+                                <button mat-menu-item *ngFor="let uniqueValue of colInfo.uniqueValues" (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{uniqueValue}}>{{uniqueValue}}</button>
+                            </mat-menu>
 
-                <mat-menu #replaceWith="matMenu">
-                    <input type="text" id={{colInfo.columnName}} mat-menu-item placeholder="Unesi vrednost..." [value]>
-                    <button [disabled]="getValue(colInfo.columnName) == ''" mat-menu-item value={{getValue(colInfo.columnName)}} (click)="MissValsReplaceClicked($event, colInfo.columnName, i)">Potvrdi unos</button>
-                </mat-menu>
+                            <mat-menu #replaceWith="matMenu">
+                                <input type="text" id={{colInfo.columnName}} mat-menu-item placeholder="Unesi vrednost..." [value]>
+                                <button [disabled]="getValue(colInfo.columnName) == ''" mat-menu-item value={{getValue(colInfo.columnName)}} (click)="MissValsReplaceClicked($event, colInfo.columnName, i)">Potvrdi unos</button>
+                            </mat-menu>
 
-            </td>
-        </tr>
-        <tr class="row-height" *ngFor="let row of tableData; let i = index">
-            <th *ngIf="i == 0" [attr.rowspan]="tableData!.length">Vrednosti</th>
+                        </td>
+                    </tr>
+                    <!--<tr class="row-height" *ngFor="let row of tableData; let i = index">
+                    <th *ngIf="i == 0" [attr.rowspan]="tableData!.length">Vrednosti</th>
 
 
-            <td class="text-center" *ngFor="let col of row; let j = index">
-                <div class="text-overflow">
-                    {{col}}
-                </div>
-            </td>
-        </tr>
-    </tbody>
-</table>
+                    <td class="text-center" *ngFor="let col of row; let j = index">
+                        <div class="text-overflow">
+                            {{col}}
+                        </div>
+                    </td>
+                </tr>-->
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
 
 <div class="container-fluid text-offwhite belowColumn">
     <div class="row ">
         <div class="col-sm-3 slider rounded" style="border:1px solid var(--ns-primary)">
-            
-                <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div>
-                <div class="text-center pt-0 mt-0">Trening
+
+            <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div>
+            <div class="text-center pt-0 mt-0">Trening
                 <mat-slider min="10" max="90" step="10" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider>
                 Test</div>
-            
+
         </div>
         <div class="col-sm-3 slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;">
             <div class="text-center text-offwhite justify-content-center align-items-center">
-                <mat-checkbox class="pt-4" color="accent" >Nasumicni redosled podataka</mat-checkbox>
+                <mat-checkbox class="pt-4" color="accent">Nasumicni redosled podataka</mat-checkbox>
             </div>
         </div>
 
         <div class="col-sm-2 rounded">
-            
-                <mat-form-field appearance="fill"  class="align-items-center justify-content-center pt-3 w-100">
-                    <mat-label>Tip problema</mat-label>
-                    <mat-select value="ToDo1">
-                        <mat-option value="ToDo1">Regresioni</mat-option>
-                        <mat-option value="ToDo2">Binarni-Klasifikacioni</mat-option>
-                        <mat-option value="ToDo3">Multi-Klasifikacioni</mat-option>
-                    </mat-select>
-                </mat-form-field>
-            
+
+            <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100">
+                <mat-label>Tip problema</mat-label>
+                <mat-select value="ToDo1">
+                    <mat-option value="ToDo1">Regresioni</mat-option>
+                    <mat-option value="ToDo2">Binarni-Klasifikacioni</mat-option>
+                    <mat-option value="ToDo3">Multi-Klasifikacioni</mat-option>
+                </mat-select>
+            </mat-form-field>
+
         </div>
         <div class="col-sm-2 rounded">
-            
-                <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100">
-                    <mat-label>Izlazna kolona</mat-label>
-                    <mat-select>
-                        <mat-option *ngFor="let item of dataset?.columnInfo" [value]="item.columnName">{{item.columnName}}</mat-option>
-                    </mat-select>
-                </mat-form-field>
-           
+
+            <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100">
+                <mat-label>Izlazna kolona</mat-label>
+                <mat-select>
+                    <mat-option *ngFor="let item of dataset?.columnInfo" [value]="item.columnName">{{item.columnName}}</mat-option>
+                </mat-select>
+            </mat-form-field>
+
         </div>
         <div class="col-sm-1 d-flex align-items-center justify-content-center">
             <button mat-button (click)="ok()" class="bottom-button text-offwhite rounded-bottom">
@@ -168,6 +235,4 @@
             </button>
         </div>
     </div>
-</div>
-
-
+</div>
\ No newline at end of file