From 763eaf066e3b831facd278c32f5c6241c57fa639 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Mon, 2 May 2022 20:01:29 +0200
Subject: Column-table: difolt kategorijska kolona uvek ostaje kategorijska, a
 numericku korisnik moze da menja. Dodata rotacija na dugmice za podesavanje.
 Zakomentarisan hasHeader i neka dodavanja na beku da ne bi javljalo
 kompajlersku.

---
 backend/api/api/Models/Dataset.cs                  |  2 +-
 backend/api/api/Services/FillAnEmptyDb.cs          | 18 +++++++--------
 frontend/src/app/_data/Dataset.ts                  |  6 ++---
 .../column-table/column-table.component.css        | 24 +++++++++++++++++--
 .../column-table/column-table.component.html       | 27 +++++++++++-----------
 .../column-table/column-table.component.ts         | 15 ++++++++++--
 6 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/backend/api/api/Models/Dataset.cs b/backend/api/api/Models/Dataset.cs
index 0faa43d5..a01f3cf7 100644
--- a/backend/api/api/Models/Dataset.cs
+++ b/backend/api/api/Models/Dataset.cs
@@ -22,7 +22,7 @@ namespace api.Models
         public DateTime dateCreated { get; set; }
         public DateTime lastUpdated { get; set; }
         public string delimiter { get; set; }
-        public bool hasHeader { get; set; }
+        //public bool hasHeader { get; set; }
 
         public ColumnInfo[] columnInfo { get; set; }
         public int rowCount { get; set; }
diff --git a/backend/api/api/Services/FillAnEmptyDb.cs b/backend/api/api/Services/FillAnEmptyDb.cs
index 062eada3..2690ba93 100644
--- a/backend/api/api/Services/FillAnEmptyDb.cs
+++ b/backend/api/api/Services/FillAnEmptyDb.cs
@@ -63,9 +63,9 @@ namespace api.Services
                 dataset.dateCreated = DateTime.Now;
                 dataset.lastUpdated = DateTime.Now;
                 dataset.delimiter = "";
-                dataset.hasHeader = true;
+                //dataset.hasHeader = true;
                 dataset.columnInfo = new ColumnInfo[] { };
-                dataset.columnInfo = new[]
+                /*dataset.columnInfo = new[]
                 {
                     new ColumnInfo( "PassengerId", true, 0, 446, 1, 891, 446, new string[]{ }),
                     new ColumnInfo( "Survived", true, 0, 0.38383838534355164f, 0, 1, 0, new string[]{ }),
@@ -79,7 +79,7 @@ namespace api.Services
                     new ColumnInfo( "Fare", true, 0, 32.20420837402344f, 0, 512.3292236328125f, 14.45419979095459f, new string[]{ }),
                     new ColumnInfo( "Cabin", false, 687, 0, 0, 0, 0, new string[]{ "B96 B98", "G6", "C23 C25 C27", "C22 C26", "F33", "F2", "E101", "D", "C78", "C93" }),
                     new ColumnInfo( "Embarked", false, 2, 0.3815937042236328f, 0, 6, 0, new string[]{ "S", "C", "Q" }),
-                };
+                };*/
                 dataset.rowCount = 891;
                 dataset.nullCols = 3;
                 dataset.nullRows = 708;
@@ -179,8 +179,8 @@ namespace api.Services
                 dataset.dateCreated = DateTime.Now;
                 dataset.lastUpdated = DateTime.Now;
                 dataset.delimiter = "";
-                dataset.hasHeader = true;
-                dataset.columnInfo = new[]
+                //dataset.hasHeader = true;
+                /*dataset.columnInfo = new[]
                  {
                     new ColumnInfo( "Unnamed: 0", true, 0, 26969.5f, 0, 53939, 26969.5f, new string[]{ }),
                     new ColumnInfo( "carat", true, 0, 0.7979397773742676f, 0.20000000298023224f, 5.010000228881836f, 0.699999988079071f, new string[]{ }),
@@ -193,7 +193,7 @@ namespace api.Services
                     new ColumnInfo( "x", true, 0, 5.731157302856445f, 0, 10.739999771118164f, 5.699999809265137f, new string[]{  }),
                     new ColumnInfo( "y", true, 0, 5.73452615737915f, 0, 58.900001525878906f, 5.710000038146973f, new string[]{ }),
                     new ColumnInfo( "z", true, 0, 3.538733720779419f, 0, 31.799999237060547f, 3.5299999713897705f, new string[]{ })
-                    };
+                    };*/
                 dataset.rowCount = 53940;
                 dataset.nullCols = 0;
                 dataset.nullRows = 0;
@@ -297,15 +297,15 @@ namespace api.Services
                 dataset.dateCreated = DateTime.Now;
                 dataset.lastUpdated = DateTime.Now;
                 dataset.delimiter = "";
-                dataset.hasHeader = true;
-                dataset.columnInfo = new[]
+                //dataset.hasHeader = true;
+                /*dataset.columnInfo = new[]
                   {
                     new ColumnInfo( "sepal_length", true, 0, 5.8433332443237305f, 4.300000190734863f, 7.900000095367432f, 5.800000190734863f, new string[]{ }),
                     new ColumnInfo( "sepal_width", true, 0, 3.053999900817871f, 2, 4.400000095367432f, 3, new string[]{ }),
                     new ColumnInfo( "petal_length", true, 0, 3.758666753768921f, 1, 6.900000095367432f, 4.349999904632568f, new string[]{ }),
                     new ColumnInfo( "petal_width", true, 0, 1.1986666917800903f, 0.10000000149011612f, 2.5f, 1.2999999523162842f, new string[]{}),
                     new ColumnInfo( "class", false, 0, 0, 0, 0, 0, new string[]{ "Iris-setosa", "Iris-versicolor", "Iris-virginica" }),
-                };
+                };*/
                 dataset.nullCols = 150;
                 dataset.nullRows = 0;
                 dataset.isPreProcess = true;
diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts
index 525d371a..09e293fd 100644
--- a/frontend/src/app/_data/Dataset.ts
+++ b/frontend/src/app/_data/Dataset.ts
@@ -37,10 +37,10 @@ export class ColumnInfo {
         public min?: number,
         public max?: number
     ) { 
-        if (isNumber)
-            columnType = ColumnType.numerical;
+        /*if (isNumber)
+            this.columnType = ColumnType.numerical;
         else 
-            columnType = ColumnType.categorical;
+            this.columnType = ColumnType.categorical;*/
     }
 }
 
diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css
index 5dc2e9ec..c3f5e4e8 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.css
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
@@ -55,8 +55,8 @@ mat-slider {
 }
 
 #missingValuesHeader {
-    font-size: 12px;
-    line-height: 110% !important;
+    font-size: 13px;
+    line-height: 140% !important;
 }
 
 .verticalAlign {
@@ -242,4 +242,24 @@ col:not(.col-disabled) {
 
 .col-first {
     background-color: rgb(1, 56, 86) !important;
+}
+
+
+/* mat-icon rotate */
+
+.rotate {
+    animation: rotation 3s infinite linear;
+}
+
+.rotate:hover {
+    cursor: pointer;
+}
+
+@keyframes rotation {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(359deg);
+    }
 }
\ No newline at end of file
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 42c43138..22c9841f 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -100,10 +100,11 @@
                     <tr>
                         <th>Tip</th>
                         <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix" [ngClass]="{'text-disabled' : !columnsChecked[i]}">
-                            <mat-form-field>
-                                <mat-select matNativeControl [(value)]="colInfo.isNumber" [disabled]="!columnsChecked[i]">
-                                    <mat-option [value]="false">Kategorijski</mat-option>
-                                    <mat-option [value]="true">Numerički</mat-option>
+                            <p class="verticalAlign text-left" style="font-size:13px;" *ngIf="!colInfo.isNumber">Kategorijski</p>
+                            <mat-form-field *ngIf="colInfo.isNumber">
+                                <mat-select matNativeControl [(value)]="colInfo.columnType" [disabled]="!columnsChecked[i]">
+                                    <mat-option [value]="ColumnType.categorical">Kategorijski</mat-option>
+                                    <mat-option [value]="ColumnType.numerical">Numerički</mat-option>
                                 </mat-select>
                             </mat-form-field>
                         </td>
@@ -111,14 +112,14 @@
                     <tr class="graphics-row">
                         <th class="no-pad">Grafik</th>
                         <td class="no-pad" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'graphic-class' : !columnsChecked[i]}">
-                            <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>
+                            <app-box-plot *ngIf="colInfo.columnType == ColumnType.numerical" [width]="150" [height]="150"></app-box-plot>
+                            <app-pie-chart *ngIf="colInfo.columnType == ColumnType.categorical" [width]="150" [height]="150"></app-pie-chart>
                         </td>
                     </tr>
                     <tr>
                         <th class="border-bottom">Statistika</th>
                         <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}">
-                            <span *ngIf="colInfo.isNumber">
+                            <span *ngIf="colInfo.columnType == ColumnType.numerical">
                     Mean: {{colInfo.mean}}<br>
                     Median: {{colInfo.median}}<br>
                     Min: {{colInfo.min}}<br>
@@ -128,7 +129,7 @@
                     Q3: {{colInfo.q3}}<br>
                     -->
                 </span>
-                            <div class="text-overflow" *ngIf="!colInfo.isNumber">
+                            <div class="text-overflow" *ngIf="colInfo.columnType == ColumnType.categorical">
                                 <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>
@@ -138,7 +139,7 @@
                     <tr style="padding: 0">
                         <th class="brighter cell-align long" (click)="openEncodingDialog()">
                             <span class="verticalAlign">Enkodiranje</span>&nbsp;
-                            <span class="material-icons-round verticalAlign">settings</span>
+                            <span class="material-icons-round verticalAlign rotate">settings</span>
                         </th>
                         <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix" [ngClass]="{'text-disabled' : !columnsChecked[i]}">
                             <mat-form-field>
@@ -152,8 +153,8 @@
                     </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>
+                            <div id="missingValuesHeader">Nedostajuće<br>vrednosti<br></div>
+                            <span class="material-icons-round rotate">settings</span>
                         </th>
                         <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}">
 
@@ -164,9 +165,9 @@
                     </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.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>
+                                <button mat-menu-item [matMenuTriggerFor]="fillWith">Popuni sa</button>
                             </mat-menu>
 
                             <mat-menu #fillWith="matMenu">
diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts
index 4499196c..e4c41cd8 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -1,5 +1,5 @@
 import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
-import Dataset from 'src/app/_data/Dataset';
+import Dataset, { ColumnType } from 'src/app/_data/Dataset';
 import Experiment, { ColumnEncoding, Encoding, NullValReplacer, NullValueOptions } from 'src/app/_data/Experiment';
 import { DatasetsService } from 'src/app/_services/datasets.service';
 import { EncodingDialogComponent } from 'src/app/_modals/encoding-dialog/encoding-dialog.component';
@@ -23,6 +23,7 @@ export class ColumnTableComponent implements AfterViewInit {
   Object = Object;
   Encoding = Encoding;
   NullValueOptions = NullValueOptions;
+  ColumnType = ColumnType;
   tableData?: any[][];
   nullValOption: string[] = [];
 
@@ -35,7 +36,9 @@ export class ColumnTableComponent implements AfterViewInit {
 
   ngAfterViewInit(): void {
     this.datasetService.getMyDatasets().subscribe((datasets) => {
-      this.dataset = datasets[0];
+      this.dataset = datasets[1];
+
+      this.setColumnTypeInitial();
       this.experiment = new Experiment();
       this.dataset.columnInfo.forEach(column => {
         this.columnsChecked.push(true);
@@ -57,6 +60,14 @@ export class ColumnTableComponent implements AfterViewInit {
     });
   }
 
+  setColumnTypeInitial() {
+    if (this.dataset != undefined) {
+      for (let i = 0; i < this.dataset.columnInfo.length; i++) {
+        this.dataset.columnInfo[i].columnType = (this.dataset.columnInfo[i].isNumber) ? ColumnType.numerical : ColumnType.categorical;
+      }
+    }
+  }
+
   setDeleteColumnsForMissingValTreatment() {
     if (this.experiment != undefined) {
       this.experiment.nullValues = NullValueOptions.DeleteRows;
-- 
cgit v1.2.3