From ca049bd93441f509aae546e9c4cce528e86a5284 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 30 Mar 2022 15:48:24 +0200
Subject: Add-model - null vrednosti. Sredjen niz za slanje back-u, unos
 korisnika i dugmici koji se medjusobno iskljucuju. Sredjen prikaz korisniku
 onda kad kolona nema nedostajucih vrednosti.

---
 frontend/src/app/_data/Model.ts                    |   2 +-
 .../app/_pages/add-model/add-model.component.html  |  42 ++++---
 .../app/_pages/add-model/add-model.component.ts    | 134 +++++++++++++++------
 frontend/src/app/_services/csv-parse.service.ts    |   2 +-
 4 files changed, 120 insertions(+), 60 deletions(-)

(limited to 'frontend/src/app')

diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 7a82cc5c..dd3cb760 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -118,7 +118,7 @@ export enum ReplaceWith {
 export class NullValReplacer {
     "column": string;
     "option": NullValueOptions;
-    "value" : any;
+    "value" : string;
 }
 
 export enum Metric {
diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html
index 28c84570..3516805b 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.html
+++ b/frontend/src/app/_pages/add-model/add-model.component.html
@@ -55,7 +55,7 @@
                 </div>
             </div>
 
-            <app-dataset-load *ngIf="!showMyDatasets" id="dataset"
+            <app-dataset-load [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset"
                 (loaded)="scrollToNextForm(); datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.dataset!.hasHeader">
             </app-dataset-load>
             <div class="px-5 mt-5">
@@ -124,11 +124,12 @@
                                             <span class="input-group-text col-2 text-center">
                                                 {{column}}&nbsp;<span class="small" style="color:gray;">({{calculateSumOfNullValuesInCol(column)}} null)</span>
                                             </span>
-                                            <input type="text" class="form-control col-1" [id]="'fillText_'+column">
-                                            <input type="radio" [id]="'fillCol_'+column" class="col-1"  
+                                            <label *ngIf="calculateSumOfNullValuesInCol(column)==0" class="form-control col-2">Ova kolona nema nedostajućih vrednosti.</label>
+                                            <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="text" class="form-control col-1" [id]="'fillText_'+column" (keyup)="checkFillColRadio(column)">
+                                            <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'fillCol_'+column" class="col-1"  
                                                 [name]="'delOp_'+column">  <!--OVDE SREDI IZGLED-->
                                             <select [id]="'replaceOptions'+i" class="form-control col-2"
-                                                *ngIf="isNumber(datasetFile[1][i])">
+                                                *ngIf="isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedNumber($event);">
                                                 <option
                                                     *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
                                                     [value]="option">
@@ -136,18 +137,18 @@
                                                 </option>
                                             </select>
                                             <select [id]="'replaceOptions'+i" class="form-control col-2"
-                                                *ngIf="!isNumber(datasetFile[1][i])">
+                                                *ngIf="!isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedString($event);">
                                                 <option *ngFor="let option of arrayColumn(datasetFile, i)"
                                                     [value]="option">
                                                     {{ option }}
                                                 </option>
                                             </select>
-                                            <label class="form-control col-2" [for]="'delCol_'+column">Izbriši kolonu
-                                                <input type="radio" [id]="'delCol_'+column"
-                                                    [name]="'delOp_'+column"></label>
-                                            <label class="form-control col-2" [for]="'delRows_'+column">Izbriši redove
-                                                <input type="radio" [id]="'delRows_'+column" [name]="'delOp_'+column"
-                                                    checked></label>
+                                            <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" class="form-control col-2" [for]="'delCol_'+column">Izbriši kolonu
+                                                <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'delCol_'+column"
+                                                    [name]="'delOp_'+column" (change)="emptyFillTextInput(column)"></label>
+                                            <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" class="form-control col-2" [for]="'delRows_'+column">Izbriši redove
+                                                <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'delRows_'+column" [name]="'delOp_'+column"
+                                                    checked (change)="emptyFillTextInput(column)"></label>
                                         </div>
                                     </div>
                                     <!--Izlazna kolona - popunjavanje null vrednosti -->
@@ -156,11 +157,12 @@
                                             <span class="input-group-text col-2 text-center">
                                                 {{column}}&nbsp;<span class="small" style="color:gray;">({{calculateSumOfNullValuesInCol(column)}} null)</span>
                                             </span>
-                                            <input type="text" class="form-control col-1" [id]="'fillText_'+column">
-                                            <input type="radio" [id]="'fillCol_'+column" class="col-1"  
+                                            <label *ngIf="calculateSumOfNullValuesInCol(column)==0" class="form-control">Ova kolona nema nedostajućih vrednosti.</label>
+                                            <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="text" class="form-control col-1" [id]="'fillText_'+column" (keyup)="checkFillColRadio(column)">
+                                            <input *ngIf="calculateSumOfNullValuesInCol(column)!=0" type="radio" [id]="'fillCol_'+column" class="col-1"  
                                                 [name]="'delOp_'+column">  <!--OVDE SREDI IZGLED-->
                                             <select [id]="'replaceOptions'+i" class="form-control col-2"
-                                                *ngIf="isNumber(datasetFile[1][i])">
+                                                *ngIf="isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedNumber($event);">
                                                 <option
                                                     *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
                                                     [value]="option">
@@ -168,17 +170,17 @@
                                                 </option>
                                             </select>
                                             <select [id]="'replaceOptions'+i" class="form-control col-2"
-                                                *ngIf="!isNumber(datasetFile[1][i])">
+                                                *ngIf="!isNumber(datasetFile[1][i]) && calculateSumOfNullValuesInCol(column)!=0" (change)="replaceWithSelectedString($event);">
                                                 <option *ngFor="let option of arrayColumn(datasetFile, i)"
                                                     [value]="option">
                                                     {{ option }}
                                                 </option>
                                             </select>
-                                            <label class="form-control col-2" [for]="'delCol_'+column">Izbriši kolonu
+                                            <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" class="form-control col-2" [for]="'delCol_'+column">Izbriši kolonu
                                                 <input type="radio" [id]="'delCol_'+column"
-                                                    [name]="'delOp_'+column"></label>
-                                            <label class="form-control col-2" [for]="'delRows_'+column">Izbriši redove
-                                                <input type="radio" [id]="'delRows_'+column" [name]="'delOp_'+column"
+                                                    [name]="'delOp_'+column" (change)="emptyFillTextInput(column)"></label>
+                                            <label *ngIf="calculateSumOfNullValuesInCol(column)!=0" class="form-control col-2" [for]="'delRows_'+column">Izbriši redove
+                                                <input type="radio" [id]="'delRows_'+column" [name]="'delOp_'+column" (change)="emptyFillTextInput(column)"
                                                     checked></label>
                                         </div>
                                     </div>
@@ -386,4 +388,4 @@
     </div>
 </div>
 
-<button (click)="calculateMeanColValue('Age');calculateMedianColValue('Age');">DUGME</button>
\ No newline at end of file
+<button (click)="calculateSumOfNullValuesInCol('Embarked'); calculateMeanColValue('Age');calculateMedianColValue('Age'); getNullValuesReplacersArray();">DUGME</button>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts
index d47e7426..b12ff825 100644
--- a/frontend/src/app/_pages/add-model/add-model.component.ts
+++ b/frontend/src/app/_pages/add-model/add-model.component.ts
@@ -125,6 +125,8 @@ export class AddModelComponent implements OnInit {
               this.tempTestSetDistribution = 90;
               this.newModel.username = shared.username;
 
+              this.newModel.nullValuesReplacers = this.getNullValuesReplacersArray();
+
               this.models.addModel(this.newModel).subscribe((response) => {
                 callback(response);
               }, (error) => {
@@ -317,46 +319,65 @@ export class AddModelComponent implements OnInit {
       !isNaN(Number(value.toString())));
   }
 
-  findIndexOfCol(colName: string) : number {
+  findColIndexByName(colName: string) : number {
     if (this.datasetFile) 
       for (let i = 0; i < this.datasetFile[0].length; i++) 
         if (colName === this.datasetFile[0][i]) 
           return i;
     return -1;
   }
+  findColNameByIndex(index: number) : string {
+    if (this.datasetFile) 
+      if (this.datasetHasHeader && index < this.datasetFile[0].length)
+        return this.datasetFile[0][index];
+    return '';
+  }
+  emptyFillTextInput(colName: string) {
+    (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = "";
+  }
+
+  checkFillColRadio(colName: string) {
+    (<HTMLInputElement>document.getElementById("fillCol_" + colName)).checked = true;
+  }
   calculateSumOfNullValuesInCol(colName: string): number {
     //console.log(this.datasetFile);
-    if (this.datasetFile) {
-      let colIndex = this.findIndexOfCol(colName);
+    if (this.datasetFile) { 
+      let colIndex = this.findColIndexByName(colName);
       let sumOfNulls = 0;
-      for (let i = 1; i < this.datasetFile.length; i++) 
-        if (this.datasetFile[i][colIndex] == '')
+
+      let startValue = (this.datasetLoadComponent?.dataset.hasHeader) ? 1 : 0;
+      for (let i = startValue; i < this.datasetFile.length; i++) {
+        if (this.datasetFile[i][colIndex] == "" || this.datasetFile[i][colIndex] == undefined)
           ++sumOfNulls;
-      //console.log(sumOfNulls);
+      }
       return sumOfNulls;
     }
     return -1;
   }
   calculateMeanColValue(colName: string): number {
     if (this.datasetFile) {
-      let colIndex = this.findIndexOfCol(colName);
+      let colIndex = this.findColIndexByName(colName);
       let sum = 0;
       let n = 0;
-      for (let i = 1; i < this.datasetFile.length; i++)
+
+      let startValue = (this.datasetLoadComponent?.dataset.hasHeader) ? 1 : 0;
+      for (let i = startValue; i < this.datasetFile.length; i++)
         if (this.datasetFile[i][colIndex] != '') {
           sum += Number(this.datasetFile[i][colIndex]);
           ++n;
         }
         console.log(sum / n);
-      return sum / n;
+      return (sum != 0)? (sum / n) : 0;
     }
     return 0;
   }
   calculateMedianColValue(colName: string): number {
     if (this.datasetFile) {
       let array = [];
-      let colIndex = this.findIndexOfCol(colName);
-      for (let i = 1; i < this.datasetFile.length; i++)
+      let colIndex = this.findColIndexByName(colName);
+
+      let startValue = (this.datasetHasHeader) ? 1 : 0;
+      for (let i = startValue; i < this.datasetFile.length; i++)
         if (this.datasetFile[i][colIndex] != '')
           array.push(Number(this.datasetFile[i][colIndex]));
           
@@ -368,39 +389,76 @@ export class AddModelComponent implements OnInit {
     }
     return 0;
   }
+  replaceWithSelectedString(event: Event) {
+    let value = (<HTMLInputElement>event.target).value;
+    let colIndex = Number(((<HTMLSelectElement>event.target).id).split("replaceOptions")[1]);
+    let colName = this.findColNameByIndex(colIndex);
+
+    (<HTMLInputElement>document.getElementById("fillCol_" + colName)).checked = true;
+
+    if (!this.datasetHasHeader)
+      (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = value;
+    else {
+      if (value == colName)
+        (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = "";
+      else 
+        (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = value;
+    }
+  }
+  replaceWithSelectedNumber(event: Event) {
+    let option = (<HTMLInputElement>event.target).value;
+    let colIndex = Number(((<HTMLSelectElement>event.target).id).split("replaceOptions")[1]);
+    let colName = this.findColNameByIndex(colIndex);
+
+    (<HTMLInputElement>document.getElementById("fillCol_" + colName)).checked = true;
+
+    if (option == ReplaceWith.Mean)
+      (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = this.calculateMeanColValue(colName).toString();
+    else if (option == ReplaceWith.Median)
+      (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = this.calculateMedianColValue(colName).toString();
+    else if (option == ReplaceWith.None)
+      (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = "";
+  }
+
   
   getNullValuesReplacersArray() : NullValReplacer[] {
-    /*let array: NullValReplacer[] = [];
+    let array: NullValReplacer[] = [];
 
-    //za svaku kolonu
     if (this.datasetFile) {
 
-      if ((<HTMLInputElement>document.getElementById("delRows")).checked) { //obrisi sve redove
-        this.newModel.nullValues = NullValueOptions.DeleteRows;
-      }
-      else if ((<HTMLInputElement>document.getElementById("delCols")).checked) {
-        this.newModel.nullValues = NullValueOptions.DeleteColumns;
+      if (this.newModel.nullValues == NullValueOptions.Replace) {
+
+        for (let i = 0; i < this.datasetFile[0].length; i++) {
+          let column = this.datasetFile[0][i];
+
+          if (this.calculateSumOfNullValuesInCol(column) > 0) { //ako kolona nema null vrednosti, ne dodajemo je u niz
+            if ((<HTMLInputElement>document.getElementById("delCol_" + column)).checked) {
+              array.push({
+                column: column,
+                option: NullValueOptions.DeleteColumns,
+                value: ""
+              });
+            }
+            else if ((<HTMLInputElement>document.getElementById("delRows_" + column)).checked) {
+              array.push({
+                column: column,
+                option: NullValueOptions.DeleteRows,
+                value: ""
+              });
+            }
+            else if (((<HTMLInputElement>document.getElementById("fillCol_" + column)).checked)) {
+              array.push({
+                column: column,
+                option: NullValueOptions.Replace,
+                value: (<HTMLInputElement>document.getElementById("fillText_" + column)).value
+              });
+            }
+          } 
+        }
       }
-      else if ((<HTMLInputElement>document.getElementById("replace")).checked) {
-        this.newModel.nullValues = NullValueOptions.Replace;*/
-
-        //for petlje
-        
-      //}
-
-      //proveri ova prva tri rba, ako je 3. cekiran, ide for petlja
-      //if ((<HTMLInputElement>document.getElementById("delCol_" + column)).checked)
-
-      //for (let i = 0; i < this.datasetFile[0].length; i++) { //svi hederi
-        //let column = this.datasetFile[0][i];
-
-        //if ((<HTMLInputElement>document.getElementById("delCol_" + column)).checked) //obrisi celu kolonu
-          //var e = (<HTMLInputElement>document.getElementById("organization")).value;
-      //}
-    //}
-    
-      
-    return [];
+    }
+    console.log(array);
+    return array;
   }
 
   getInputById(id: string): HTMLInputElement {
diff --git a/frontend/src/app/_services/csv-parse.service.ts b/frontend/src/app/_services/csv-parse.service.ts
index b9b761a0..e44af238 100644
--- a/frontend/src/app/_services/csv-parse.service.ts
+++ b/frontend/src/app/_services/csv-parse.service.ts
@@ -45,7 +45,7 @@ export class CsvParseService {
         strMatchedValue = arrMatches[3];
       }
 
-      if (strMatchedValue.length > 0)
+      //if (strMatchedValue.length > 0)
         arrData[arrData.length - 1].push(strMatchedValue);
     }
 
-- 
cgit v1.2.3