From 3e07b3304b65fcab6740a05231999dfc453ffbb9 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Mon, 25 Apr 2022 22:17:45 +0200
Subject: Column-table komponenta: prikazani i povezani naziv kolone, tip,
 grafik, statistika, enkoding i pocete nedostajuce vrednosti. Uradjene popup
 dialog komponente za encoding i missingvalues.

---
 .../encoding-dialog/encoding-dialog.component.css  |  0
 .../encoding-dialog/encoding-dialog.component.html | 16 +++++++++++++
 .../encoding-dialog.component.spec.ts              | 25 +++++++++++++++++++
 .../encoding-dialog/encoding-dialog.component.ts   | 28 ++++++++++++++++++++++
 4 files changed, 69 insertions(+)
 create mode 100644 frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css
 create mode 100644 frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html
 create mode 100644 frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.spec.ts
 create mode 100644 frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts

(limited to 'frontend/src/app/_modals/encoding-dialog')

diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html
new file mode 100644
index 00000000..8898a4e4
--- /dev/null
+++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html
@@ -0,0 +1,16 @@
+<h1 mat-dialog-title>Enkodiranje svih kolona</h1>
+<div mat-dialog-content>
+    <p>Odaberite tip enkodinga za sve kolone zajedno:</p>
+    <select matNativeControl class="form-control btn-primary" [(ngModel)]="selectedEncodingType">
+        <option
+            *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+            [value]="option">
+            {{ optionName }}
+        </option>
+    </select>
+    <p>Da li ste sigurni u izbor?</p>
+</div>
+<div mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="selectedEncodingType" cdkFocusInitial>Da</button>
+    <button mat-button (click)="onNoClick()">Odustani</button>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.spec.ts b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.spec.ts
new file mode 100644
index 00000000..77f30ae3
--- /dev/null
+++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EncodingDialogComponent } from './encoding-dialog.component';
+
+describe('EncodingDialogComponent', () => {
+  let component: EncodingDialogComponent;
+  let fixture: ComponentFixture<EncodingDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EncodingDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EncodingDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts
new file mode 100644
index 00000000..3b7560bf
--- /dev/null
+++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { Encoding } from 'src/app/_data/Experiment';
+
+
+@Component({
+  selector: 'app-encoding-dialog',
+  templateUrl: './encoding-dialog.component.html',
+  styleUrls: ['./encoding-dialog.component.css']
+})
+export class EncodingDialogComponent implements OnInit {
+
+  selectedEncodingType?: Encoding;
+  Encoding = Encoding;
+  Object = Object;
+
+  constructor(public dialogRef: MatDialogRef<EncodingDialogComponent>) 
+  { 
+    this.selectedEncodingType = Encoding.Label;
+  }
+
+  ngOnInit(): void {
+  }
+
+  onNoClick() {
+    this.dialogRef.close();
+  }
+}
-- 
cgit v1.2.3


From 25ac2c1b92de81de521897089f7d3dd14c52e657 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Tue, 26 Apr 2022 16:58:23 +0200
Subject: Column-table komponenta: zavrseno regulisanje nedostajucih vrednosti
 (padajuce liste). Promenjeni stilovi svih inputa (material design).

---
 .../column-table/column-table.component.html       | 65 +++++++++++-----------
 .../column-table/column-table.component.ts         | 65 +++++++++++++++++-----
 .../encoding-dialog/encoding-dialog.component.html | 14 ++---
 3 files changed, 90 insertions(+), 54 deletions(-)

(limited to 'frontend/src/app/_modals/encoding-dialog')

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 62699284..e6d9442c 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -4,7 +4,7 @@
             <th>Naziv</th>
             <th *ngFor="let colInfo of dataset.columnInfo; let i = index">
                 #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
-                <input type="checkbox" class="btn-primary" checked (click)="changeInputColumns($event, colInfo.columnName)">
+                <mat-checkbox checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
             </th>
         </tr>
     </thead>
@@ -13,19 +13,19 @@
             <th>Tip</th>
             <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
                 <mat-form-field>
-                    <select matNativeControl class="form-control btn-primary" (change)="changeColumnType($event, i)">
-                        <option [selected]="!colInfo.isNumber" value="Kategorijski">Kategorijski</option>
-                        <option [selected]="colInfo.isNumber" value="Numerički">Numerički</option>
-                    </select>
+                    <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>
             <th>Grafik</th>
             <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                <app-box-plot *ngIf="colInfo.isNumber"></app-box-plot>
+                <!--<app-box-plot *ngIf="colInfo.isNumber"></app-box-plot>-->
                 <!--TODO: dodati [data]-->
-                <app-pie-chart *ngIf="!colInfo.isNumber"></app-pie-chart>
+                <!--<app-pie-chart *ngIf="!colInfo.isNumber"></app-pie-chart>-->
             </td>
         </tr>
         <tr>
@@ -42,7 +42,7 @@
                     -->
                 </span>
                 <span *ngIf="!colInfo.isNumber">
-                    <span *ngFor="let uniqueValue of colInfo.uniqueValues | slice:0:5; let i = index">
+                    <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>
                 </span>
@@ -54,13 +54,11 @@
             </th>
             <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
                 <mat-form-field>
-                    <select matNativeControl class="form-control btn-primary" [(ngModel)]="experiment.encodings[i].encoding">
-                        <option
-                            *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
-                            [value]="option">
+                    <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 }}
-                        </option>
-                    </select>
+                        </mat-option>
+                    </mat-select>
                 </mat-form-field>
             </td>
         </tr>
@@ -69,35 +67,34 @@
                 <span class="material-icons-round">settings</span>
             </th>
             <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                <!--
-                <mat-form-field appearance="fill">
-                    <mat-select matNativeControl>
-                        <mat-option [value]="NullValueOptions.DeleteColumns">Obriši kolonu</mat-option>
-                        <mat-option [value]="NullValueOptions.DeleteRows">Obriši redove</mat-option>
-                        <mat-option>Popuni sa _____
-                            <mat-select matNativeControl>
-                                <mat-option>a</mat-option>
-                                <mat-option>b</mat-option>
-                                <mat-option>c</mat-option>
-                            </mat-select>
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-            -->
-                <button mat-button [matMenuTriggerFor]="animals">Izabrana opcija</button>
-                <mat-menu #animals="matMenu">
-                    <button mat-menu-item>Obriši kolonu</button>
-                    <button mat-menu-item>Obriši redove</button>
+
+                <button mat-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}">Prikaži opcije</button>
+                <mat-menu #menu="matMenu">
+                    <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteColumns)" value={{colInfo.columnName}}>Obriši kolonu</button>
+                    <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteRows)" 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)" value={{colInfo.mean}}>Mean ({{colInfo.mean}})</button>
+                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName)" value={{colInfo.median}}>Median ({{colInfo.median}})</button>
+                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName)" value={{colInfo.max}}>Max ({{colInfo.max}})</button>
+                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName)" value={{colInfo.min}}>Min ({{colInfo.min}})</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>
 
+                <mat-menu #uniques="matMenu">
+                    <button mat-menu-item *ngFor="let uniqueValue of colInfo.uniqueValues" (click)="MissValsReplaceClicked($event, colInfo.columnName)" value={{uniqueValue}}>{{uniqueValue}}</button>
+                </mat-menu>
+
                 <mat-menu #replaceWith="matMenu">
-                    <input type="text" mat-menu-item placeholder="Unesi vrednost...">
+                    <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)">Potvrdi unos</button>
                 </mat-menu>
+
             </td>
         </tr>
     </tbody>
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 18e38203..603de591 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -5,6 +5,8 @@ import { DatasetsService } from 'src/app/_services/datasets.service';
 import { EncodingDialogComponent } from 'src/app/_modals/encoding-dialog/encoding-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dialog/missingvalues-dialog.component';
+import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
   selector: 'app-column-table',
@@ -36,9 +38,9 @@ export class ColumnTableComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  changeInputColumns(target: any, columnName: string) {
+  changeInputColumns(targetMatCheckbox: MatCheckboxChange, columnName: string) {
     if (this.experiment != undefined) {
-      if (target.currentTarget.checked) {
+      if (targetMatCheckbox.checked) {
         if (this.experiment.inputColumns.filter(x => x == columnName)[0] == undefined) {
           this.experiment.inputColumns.push(columnName);
         }
@@ -51,17 +53,6 @@ export class ColumnTableComponent implements OnInit {
     }
   }
 
-  changeColumnType(target: any, indexOfCol: number) {
-    if (this.dataset != undefined) {
-      if (target.currentTarget.value == "Numerički") {
-        this.dataset.columnInfo[indexOfCol].isNumber = true;
-      }
-      else {
-        this.dataset.columnInfo[indexOfCol].isNumber = false;
-      }
-    }
-  }
-
   resetColumnEncodings(encodingType: Encoding) {
     if (this.experiment != undefined && this.dataset != undefined) {
       this.experiment.encodings = [];
@@ -118,4 +109,52 @@ export class ColumnTableComponent implements OnInit {
         this.resetMissingValuesTreatment(selectedMissingValuesOption);
     });
   }
+
+  MissValsDeleteClicked(event: Event, replacementType: NullValueOptions) {
+    if (this.experiment != undefined) {
+      let columnName = (<HTMLInputElement>event.currentTarget).value;
+      let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0];
+
+      if (arrayElement == undefined) {
+        this.experiment.nullValuesReplacers.push({
+          column: columnName,
+          option: (replacementType == NullValueOptions.DeleteColumns) ? NullValueOptions.DeleteColumns : NullValueOptions.DeleteRows,
+          value: ""
+        });
+      }
+      else {
+        arrayElement.option = (replacementType == NullValueOptions.DeleteColumns) ? NullValueOptions.DeleteColumns : NullValueOptions.DeleteRows;
+        arrayElement.value = "";
+      }
+
+      (<HTMLInputElement>document.getElementById("main_" + columnName)).textContent = (replacementType == NullValueOptions.DeleteColumns) ? "Obriši kolonu" : "Obriši redove";
+    }
+  }
+
+  MissValsReplaceClicked(event: Event, columnName: string) {
+    if (this.experiment != undefined) {
+      let fillValue = (<HTMLInputElement>event.currentTarget).value;
+      let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0];
+      
+      if (arrayElement == undefined) {
+        this.experiment.nullValuesReplacers.push({
+          column: columnName,
+          option: NullValueOptions.Replace,
+          value: fillValue
+        });
+      }
+      else {
+        arrayElement.option = NullValueOptions.Replace;
+        arrayElement.value = fillValue;
+      }
+
+      (<HTMLInputElement>document.getElementById("main_" + columnName)).textContent = "Popuni sa: " + fillValue;
+    }
+  }
+  getValue(columnName: string): string {
+    if (<HTMLInputElement>document.getElementById(columnName) != undefined)
+      return (<HTMLInputElement>document.getElementById(columnName)).value;
+    return '0';
+  }
+
 }
diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html
index 8898a4e4..7ba286cb 100644
--- a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html
+++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html
@@ -1,13 +1,13 @@
 <h1 mat-dialog-title>Enkodiranje svih kolona</h1>
 <div mat-dialog-content>
     <p>Odaberite tip enkodinga za sve kolone zajedno:</p>
-    <select matNativeControl class="form-control btn-primary" [(ngModel)]="selectedEncodingType">
-        <option
-            *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
-            [value]="option">
-            {{ optionName }}
-        </option>
-    </select>
+    <mat-form-field>
+        <mat-select matNativeControl [(value)]="selectedEncodingType">
+            <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>
     <p>Da li ste sigurni u izbor?</p>
 </div>
 <div mat-dialog-actions>
-- 
cgit v1.2.3