From b1c19a1729f5a875ab486e06d5bc70c9d59cc44c Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Sat, 30 Apr 2022 21:01:57 +0200
Subject: Regulisan odabir kolona i zatamnjenje kolona koje su unchecked
 (column-table). Backend: u klasu Experiment dodat type i u ColumnInfo
 columnType. Frontend: u ColumnInfo columnType. Promenjene boje boxplota.

---
 frontend/src/app/_data/Dataset.ts                  | 13 ++++-
 .../_charts/box-plot/box-plot.component.ts         |  8 +--
 .../column-table/column-table.component.css        | 32 ++++++++++--
 .../column-table/column-table.component.html       | 58 ++++++++++++++--------
 .../column-table/column-table.component.ts         |  6 ++-
 5 files changed, 85 insertions(+), 32 deletions(-)

(limited to 'frontend/src/app')

diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts
index e8207718..36eced88 100644
--- a/frontend/src/app/_data/Dataset.ts
+++ b/frontend/src/app/_data/Dataset.ts
@@ -29,6 +29,7 @@ export default class Dataset extends FolderFile {
 export class ColumnInfo {
     constructor(
         public columnName: string = '',
+        public columnType: ColumnType,
         public isNumber: boolean = false,
         public numNulls: number = 0,
         public uniqueValues?: string[],
@@ -36,5 +37,15 @@ export class ColumnInfo {
         public mean?: number,
         public min?: number,
         public max?: number
-    ) { }
+    ) { 
+        if (isNumber)
+            columnType = ColumnType.numerical;
+        else 
+            columnType = ColumnType.categorical;
+    }
 }
+
+export enum ColumnType {
+    categorical = "Kategorijski",
+    numerical = "Numerički"
+}
\ No newline at end of file
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 3faa4794..d6f4b6ec 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
@@ -27,8 +27,8 @@ export class BoxPlotComponent implements AfterViewInit {
     labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
       datasets: [{
       label: 'Dataset 1',
-      backgroundColor: 'rgba(0, 65, 101, 1.0)',
-      borderColor: '#0063AB',
+      backgroundColor: '#0063AB',
+      borderColor: '#dfd7d7',
       borderWidth: 1,
       outlierColor: '#999999',
       scaleFontColor: '#0063AB',
@@ -78,7 +78,7 @@ export class BoxPlotComponent implements AfterViewInit {
              scales : {
                x: {
                 ticks: {
-                  color: 'rgba(0, 65, 101, 1.0)'
+                  color: '#dfd7d7'
                 },
                 grid: {
                   color: "rgba(0, 99, 171, 0.5)"
@@ -88,7 +88,7 @@ export class BoxPlotComponent implements AfterViewInit {
                   min: -50,
                   max: 200,
                   ticks: {
-                    color: 'rgba(0, 65, 101, 1.0)'
+                    color: '#dfd7d7'
                   },
                   grid: {
                     color: "rgba(0, 99, 171, 0.5)"
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 108efb32..5dc2e9ec 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.css
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
@@ -3,7 +3,6 @@ table.fixed {
     display: block;
     overflow-x: auto;
     white-space: nowrap;
-    border: 1px solid var(--ns-primary-50);
     font-size: 12px;
     border-radius: 4px;
 }
@@ -18,7 +17,6 @@ table.fixed td {
     max-width: 200px;
     min-width: 200px;
     vertical-align: middle;
-    background-color: var(--ns-bg-dark-100);
     margin: 4px;
 }
 
@@ -27,13 +25,12 @@ table.fixed th {
     max-width: 120px;
     min-width: 120px;
     vertical-align: middle;
-    background-color: var(--ns-bg-dark-100);
+    background-color: var(--ns-primary-50);
     font-size: 14px;
 }
 
 table.fixed th:first-child {
     text-align: center;
-    background-color: var(--ns-primary-25);
 }
 
 .columnNames {
@@ -107,7 +104,7 @@ table ::ng-deep .mat-form-field-wrapper {
 }
 
 .graphic-class {
-    background-color: white !important;
+    opacity: 0.5;
 }
 
 
@@ -220,4 +217,29 @@ table ::ng-deep .mat-form-field-wrapper {
 
 .long {
     height: 3rem;
+}
+
+.col-disabled {
+    background-color: rgb(0, 45, 69);
+}
+
+.text-disabled {
+    color: gray;
+}
+
+.header-disabled {
+    color: gray;
+}
+
+.menu-disabled {
+    pointer-events: none;
+    opacity: .5;
+}
+
+col:not(.col-disabled) {
+    background-color: var(--ns-bg-dark-100);
+}
+
+.col-first {
+    background-color: rgb(1, 56, 86) !important;
 }
\ 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 53cb3551..42c43138 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -4,11 +4,12 @@
             {{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">-->
@@ -16,13 +17,17 @@
 
         <div [ngClass]="{'hidden': tabToDisplay != Table.Data}">
             <table class="table text-offwhite fixed bg-blur">
+                <colgroup>
+                    <col class="col-first">
+                    <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}">
+                </colgroup>
                 <thead>
                     <tr>
                         <th>#</th>
-                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}">
                             <div class="cell-align">
                                 #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
-                                <mat-checkbox color="primary" checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                                <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
                             </div>
                         </th>
                     </tr>
@@ -30,7 +35,7 @@
                 <tbody>
                     <tr *ngFor="let row of tableData; let i = index">
                         <th>#{{i}}</th>
-                        <td *ngFor="let col of row; let j = index">
+                        <td *ngFor="let col of row; let j = index" [ngClass]="{'text-disabled' : !columnsChecked[j]}">
                             <div class="text-overflow">
                                 {{col}}
                             </div>
@@ -42,22 +47,29 @@
 
         <div [ngClass]="{'hidden': tabToDisplay != Table.CorrelationMatrix}">
             <table class="table text-offwhite fixed bg-blur">
+                <colgroup>
+                    <col class="col-first">
+                    <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}">
+                </colgroup>
                 <thead>
                     <tr>
-                        <th>Naziv</th>
-                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                            #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
+                        <th>Kolona</th>
+                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}">
+                            <div class="cell-align">
+                                #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
+                                <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                            </div>
                         </th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                        <th>
+                        <th [ngClass]="{'header-disabled col-disabled' : !columnsChecked[i]}">
                             <div class="text-left">
                                 {{colInfo.columnName}}
                             </div>
                         </th>
-                        <td *ngFor="let colInfo of dataset.columnInfo; let j = index">
+                        <td *ngFor="let colInfo of dataset.columnInfo; let j = index" [ngClass]="{'text-disabled col-disabled' : !columnsChecked[j] || !columnsChecked[i]}">
                             <div class="text-overflow">
                                 0.1
                             </div>
@@ -69,13 +81,17 @@
 
         <div [ngClass]="{'hidden': tabToDisplay != Table.Columns}">
             <table class="table text-offwhite fixed bg-blur">
+                <colgroup>
+                    <col class="col-first">
+                    <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}">
+                </colgroup>
                 <thead>
                     <tr>
                         <th>Naziv</th>
-                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}">
                             <div class="cell-align">
                                 #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
-                                <mat-checkbox color="primary" checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                                <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
                             </div>
                         </th>
                     </tr>
@@ -83,9 +99,9 @@
                 <tbody>
                     <tr>
                         <th>Tip</th>
-                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix">
+                        <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">
+                                <mat-select matNativeControl [(value)]="colInfo.isNumber" [disabled]="!columnsChecked[i]">
                                     <mat-option [value]="false">Kategorijski</mat-option>
                                     <mat-option [value]="true">Numerički</mat-option>
                                 </mat-select>
@@ -93,15 +109,15 @@
                         </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">
+                        <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>
                         </td>
                     </tr>
                     <tr>
-                        <th class="brighter">Statistika</th>
-                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                        <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">
                     Mean: {{colInfo.mean}}<br>
                     Median: {{colInfo.median}}<br>
@@ -124,9 +140,9 @@
                             <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" class="pad-fix">
+                        <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">
+                                <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding" [disabled]="!columnsChecked[i]">
                                     <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option">
                                         {{ optionName }}
                                     </mat-option>
@@ -139,9 +155,9 @@
                             <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">
+                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}">
 
-                            <button class="w-100" mat-raised-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu>
+                            <button class="w-100" mat-raised-button [ngClass]="{ 'menu-disabled' : !columnsChecked[i]}" [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu>
                     <div class="cell-align">
                         {{nullValOption[i]}}
                         <mat-icon>arrow_drop_down</mat-icon>
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 9cabf190..4499196c 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -26,6 +26,8 @@ export class ColumnTableComponent implements AfterViewInit {
   tableData?: any[][];
   nullValOption: string[] = [];
 
+  columnsChecked: boolean[] = []; //niz svih kolona
+
   testSetDistribution: number = 70;
   constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) {
     //ovo mi nece trebati jer primam dataset iz druge komponente
@@ -35,7 +37,9 @@ export class ColumnTableComponent implements AfterViewInit {
     this.datasetService.getMyDatasets().subscribe((datasets) => {
       this.dataset = datasets[0];
       this.experiment = new Experiment();
-
+      this.dataset.columnInfo.forEach(column => {
+        this.columnsChecked.push(true);
+      });
       console.log(datasets);
       for (let i = 0; i < this.dataset?.columnInfo.length; i++) {
         this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName);
-- 
cgit v1.2.3