From 6a9016849d5b5e36897395efdb47c0aa39235c69 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Sun, 8 May 2022 22:06:01 +0200
Subject: Column-table: enkodiranje numerickih kolona i izlazne kolone
 disabled; ispravljen bag kad korisnik ne cekira nijednu kolonu ili cekira
 jednu za koriscenje (upozorenje). Napravljene input varijable za
 prosledjivanje potrebnih vrednosti pie-chart i boxplot komponentama od strane
 column-table. Profile page: dodata klasa za hover odabir profilne slike.

---
 .../_charts/box-plot/box-plot.component.ts         |  8 ++++-
 .../_charts/pie-chart/pie-chart.component.ts       |  2 ++
 .../column-table/column-table.component.html       |  9 +++---
 .../column-table/column-table.component.ts         | 35 +++++++++++++++++-----
 .../src/app/_pages/profile/profile.component.css   | 20 ++++++++-----
 .../src/app/_pages/profile/profile.component.html  | 19 ++++++------
 6 files changed, 62 insertions(+), 31 deletions(-)

(limited to 'frontend/src')

diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
index d6f4b6ec..9addd6bb 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
@@ -18,7 +18,13 @@ export class BoxPlotComponent implements AfterViewInit {
 
   @Input()width?: number;
   @Input()height?: number;
-  
+  @Input()mean?: number;
+  @Input()median?: number;
+  @Input()min?: number;
+  @Input()max?: number;
+  @Input()q1?: number;
+  @Input()q3?: number;
+
   @ViewChild('boxplot') chartRef!: ElementRef;
   constructor() { }
 
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
index f141f522..932ed963 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
@@ -10,6 +10,8 @@ export class PieChartComponent implements AfterViewInit {
 
   @Input()width?: number;
   @Input()height?: number;
+  @Input()uniqueValues?: string[] = [];
+  @Input()uniqueValuesPercent?: number[] = [];
   
   @ViewChild('piechart') chartRef!: ElementRef;
   constructor() { }
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 efc093d2..59c1899b 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -113,8 +113,8 @@
                         <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="this.experiment.columnTypes[i] == ColumnType.numerical" [width]="150" [height]="150"></app-box-plot>
-                                <app-pie-chart *ngIf="this.experiment.columnTypes[i] == ColumnType.categorical" [width]="150" [height]="150"></app-pie-chart>
+                                <app-box-plot *ngIf="this.experiment.columnTypes[i] == ColumnType.numerical" [width]="150" [height]="150" [mean]="colInfo.mean" [median]="colInfo.median" [min]="colInfo.min" [max]="colInfo.max" [q1]="colInfo.q1" [q3]="colInfo.q3"></app-box-plot>
+                                <app-pie-chart *ngIf="this.experiment.columnTypes[i] == ColumnType.categorical" [width]="150" [height]="150" [uniqueValues]="colInfo.uniqueValues" [uniqueValuesPercent]="colInfo.uniqueValuesPercent"></app-pie-chart>
                             </td>
                         </tr>
                         <tr>
@@ -142,7 +142,7 @@
                             </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)]="experiment.encodings[i].encoding" [disabled]="!columnsChecked[i]" (selectionChange)="columnTableChangeDetected()">
+                                    <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding" [disabled]="!columnsChecked[i] || experiment.columnTypes[i] == ColumnType.numerical || colInfo.columnName == experiment.outputColumn" (selectionChange)="columnTableChangeDetected()">
                                         <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option">
                                             {{ optionName }}
                                         </mat-option>
@@ -208,8 +208,9 @@
             <div class="ns-col 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 [(value)]="experiment.outputColumn" (selectionChange)="changeOutputColumn(this.experiment.inputColumns[0])">
+                    <mat-select [(value)]="experiment.outputColumn" (selectionChange)="changeProblemType()">
                         <mat-option *ngFor="let inputColumn of experiment.inputColumns" [value]="inputColumn">{{inputColumn}}</mat-option>
+                        <mat-option *ngIf="experiment.inputColumns.length == 0" value="-">-</mat-option>
                     </mat-select>
                 </mat-form-field>
             </div>
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 9085270f..0d17271d 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -89,7 +89,10 @@ export class ColumnTableComponent implements AfterViewInit {
     }
   }
   resetOutputColumn() {
-    this.experiment.outputColumn = this.experiment.inputColumns[0];
+    if (this.experiment.inputColumns.length > 0)
+      this.experiment.outputColumn = this.experiment.inputColumns[0];
+    else 
+      this.experiment.outputColumn = '-';
   }
 
   setDeleteRowsForMissingValTreatment() {
@@ -112,7 +115,7 @@ export class ColumnTableComponent implements AfterViewInit {
 
   columnTypeChanged(columnName: string) {
     if (this.experiment.outputColumn == columnName)
-      this.changeOutputColumn(columnName);
+      this.changeProblemType();
     else
       this.columnTableChangeDetected();
   }
@@ -124,6 +127,8 @@ export class ColumnTableComponent implements AfterViewInit {
         if (this.experiment.inputColumns.filter(x => x == columnName)[0] == undefined) {
           this.experiment.inputColumns.push(columnName);
         }
+        if (this.experiment.inputColumns.length == 1)
+          this.experiment.outputColumn = this.experiment.inputColumns[0];
       }
       else {
         this.experiment.inputColumns = this.experiment.inputColumns.filter(x => x != columnName);
@@ -131,17 +136,21 @@ export class ColumnTableComponent implements AfterViewInit {
         //TODO: da se zatamni kolona koja je unchecked
         //this.experiment.encodings = this.experiment.encodings.filter(x => x.columnName != columnName); samo na kraju iz enkodinga skloni necekirane
         this.experiment.nullValuesReplacers = this.experiment.nullValuesReplacers.filter(x => x.column != columnName);
-        if (columnName == this.experiment.outputColumn)
-          this.experiment.outputColumn = this.experiment.inputColumns[0];
+        if (columnName == this.experiment.outputColumn) {
+          if (this.experiment.inputColumns.length > 0)
+            this.experiment.outputColumn = this.experiment.inputColumns[0];
+          else 
+            this.experiment.outputColumn = '-';
+        }
       }
       this.columnTableChangeDetected();
     }
   }
 
-  changeOutputColumn(columnName: string) {
+  changeProblemType() {
     if (this.experiment != undefined && this.dataset != undefined) {
       let i = this.dataset.columnInfo.findIndex(x => x.columnName == this.experiment!.outputColumn);
-      if (this.experiment.columnTypes[i] == ColumnType.numerical) {
+      if (i == -1 || this.experiment.columnTypes[i] == ColumnType.numerical) {
         this.experiment.type = ProblemType.Regression;
       }
       else {
@@ -286,10 +295,20 @@ export class ColumnTableComponent implements AfterViewInit {
     return '0';
   }
   saveExperiment() {
-    this.openSaveExperimentDialog();
+    if (this.experiment.inputColumns.length == 0)
+      Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti.");
+    else if (this.experiment.inputColumns.length == 1)
+      Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti (mora postojati bar jedna ulazna i jedna izlazna kolona).");
+    else 
+      this.openSaveExperimentDialog();
   }
   updateExperiment() {
-    this.openUpdateExperimentDialog();
+    if (this.experiment.inputColumns.length == 0)
+      Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti.");
+    else if (this.experiment.inputColumns.length == 1)
+      Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti (mora postojati bar jedna ulazna i jedna izlazna kolona).");
+    else 
+      this.openUpdateExperimentDialog();
   }
 
 
diff --git a/frontend/src/app/_pages/profile/profile.component.css b/frontend/src/app/_pages/profile/profile.component.css
index 428870da..bbd4c9ba 100644
--- a/frontend/src/app/_pages/profile/profile.component.css
+++ b/frontend/src/app/_pages/profile/profile.component.css
@@ -1,21 +1,25 @@
-.card{
+.card {
     background-color: transparent;
-    color:var(--offwhite)
+    color: var(--offwhite)
 }
 
-.card-header{
+.card-header {
     background-color: var(--ns-primary-50);
-    color:var(--offwhite)
+    color: var(--offwhite)
 }
-.card-body{
+
+.card-body {
     background-color: var(--ns-bg-dark-50);
 }
 
-mat-form-field{
+mat-form-field {
     width: 100%;
 }
 
-.danger-Text{
-    color:var(--ns-warn)
+.danger-Text {
+    color: var(--ns-warn)
 }
 
+.selectedPicture {
+    background-color: var(--ns-accent);
+}
\ No newline at end of file
diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html
index 37df4f14..8d655513 100644
--- a/frontend/src/app/_pages/profile/profile.component.html
+++ b/frontend/src/app/_pages/profile/profile.component.html
@@ -12,7 +12,7 @@
                         <img class="img-account-profile rounded-circle mb-2" src="{{this.photoPath}}" alt="profilePicture">
                         <!-- User's info -->
                         <span>@ {{this.user.username}}</span>
-                        <span class="mt-3" style="font-weight: bold;">{{this.user.firstName}} {{this.user.lastName}}</span> 
+                        <span class="mt-3" style="font-weight: bold;">{{this.user.firstName}} {{this.user.lastName}}</span>
                     </div>
                 </div>
             </div>
@@ -31,7 +31,7 @@
                                     <mat-form-field appearance="fill">
                                         <mat-label>Važeća lozinka</mat-label>
                                         <input matInput id="inputPassword" name="inputPassword" type="password" placeholder="" [(ngModel)]="this.oldPass">
-                                      </mat-form-field>
+                                    </mat-form-field>
                                     <small *ngIf="wrongOldPassBool" class="form-text danger-Text">Pogrešan format.</small>
                                 </div>
                                 <!-- Form Group (new password)-->
@@ -39,12 +39,12 @@
                                     <mat-form-field appearance="fill">
                                         <mat-label>Nova lozinka</mat-label>
                                         <input matInput id="inputNewPassword" name="inputNewPassword" type="password" placeholder="" [(ngModel)]="this.newPass1">
-                                      </mat-form-field>
+                                    </mat-form-field>
                                     <small *ngIf="wrongNewPassBool" class="form-text danger-Text">Lozinke se ne podudaraju.</small>
                                     <small *ngIf="wrongNewPass1Bool" class="form-text danger-Text">Pogrešan format.</small>
                                 </div>
                             </div>
-    
+
                             <!-- Form Row-->
                             <div class="row gx-3 mb-3">
                                 <div class="col-md-6">
@@ -118,24 +118,23 @@
 
                         <div>
                             <label class="small mt-2 mb-3">Kliknite na sliku kako biste je odabrali za profilnu:</label>
-                            
+
                             <div class="container">
                                 <div class="card-group">
                                     <!--bootstrap card with 3 horizontal images-->
                                     <div class="row overflow-auto" style="max-height: 200px;">
-                                        <div class="card col-md-3" *ngFor="let picture of this.pictures" (click)="this.photoId = picture.photoId.toString()"
-                                            [ngClass]="{'selectedPicture': this.photoId == picture.photoId.toString()}">
+                                        <div class="card col-md-3" *ngFor="let picture of this.pictures" (click)="this.photoId = picture.photoId.toString()" [ngClass]="{'selectedPicture': this.photoId == picture.photoId.toString()}">
                                             <img src="{{picture.path}}">
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="row mt-5">
                             <div class="col text-center">
                                 <!-- Save changes button-->
-                                <button mat-raised-button color="primary" (click)="saveInfoChanges()" >Sačuvaj izmene</button>
+                                <button mat-raised-button color="primary" (click)="saveInfoChanges()">Sačuvaj izmene</button>
                             </div>
                         </div>
                     </form>
@@ -147,7 +146,7 @@
 
     <div class="row">
         <div class="col-xl-4">
-            
+
         </div>
     </div>
 
-- 
cgit v1.2.3