Merge branch 'redesign' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into redesign

# Conflicts:
#	frontend/src/app/_elements/column-table/column-table.component.ts

4 files changed, 103 insertions, 152 deletions

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 1dd3354d..bf5e3fd6 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
@@ -16,97 +16,22 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);
 })
 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;
+  @Input() width?: number;
+  @Input() height?: number;
+  @Input() mean?: number;
+  @Input() median?: number;
+  @Input() min?: number;
+  @Input() max?: number;
+  @Input() q1?: number;
+  @Input() q3?: number;
 
-
-  updateChart(min: number, max: number, q1: number, q3: number, median: number){
-    console.log(this.min, this.max);
-    const newBoxPlotData = {
-      labels: [""],
-        datasets: [{
-        label: 'Dataset 1',
-        backgroundColor: '#0063AB',
-        borderColor: '#dfd7d7',
-        borderWidth: 1,
-        outlierColor: '#999999',
-        scaleFontColor: '#0063AB',
-        padding: 10,
-        itemRadius: 0,
-        data: [
-          {min, q1, median, q3, max}/*,
-          [0, 25, 51, 75, 99]*/
-        
-      ]}]
-    };
-
-    const newOptionsTmp = {
-     
-        plugins:{   
-          legend: {
-            display: false
-                  },
-               },
-               scales : {
-                 x: {
-                  ticks: {
-                    color: '#dfd7d7'
-                  },
-                  grid: {
-                    color: "rgba(0, 99, 171, 0.5)"
-                  }
-                 },
-                y : {
-                    min: this.min,
-                    max: this.max,
-                    ticks: {
-                      color: '#dfd7d7'
-                    },
-                    grid: {
-                      color: "rgba(0, 99, 171, 0.5)"
-                    }
-                }
-            
-      }
-    };
-    Object.assign(this.boxplotData, newBoxPlotData);
-    Object.assign(this.options, newOptionsTmp);
+  updateChart(min: number, max: number, q1: number, q3: number, median: number) {
+    if (this.myChart) {
+      this.boxplotData.datasets[0].data = [[min, q1, median, q3, max]]
+      this.myChart.update();
+    }
   };
 
-  options = {
-    plugins:{   
-      legend: {
-        display: false
-              },
-           },
-           scales : {
-             x: {
-              ticks: {
-                color: '#dfd7d7'
-              },
-              grid: {
-                color: "rgba(0, 99, 171, 0.5)"
-              }
-             },
-            y : {
-                min: this.min,
-                max: this.max,
-                ticks: {
-                  color: '#dfd7d7'
-                },
-                grid: {
-                  color: "rgba(0, 99, 171, 0.5)"
-                }
-            }
-        }
-  }
-
   @ViewChild('boxplot') chartRef!: ElementRef;
   constructor() {
     //this.updateChart();
@@ -115,7 +40,7 @@ export class BoxPlotComponent implements AfterViewInit {
   boxplotData = {
     // define label tree
     //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
-      datasets: [{
+    datasets: [{
       label: 'Dataset 1',
       backgroundColor: '#0063AB',
       borderColor: '#dfd7d7',
@@ -125,38 +50,43 @@ export class BoxPlotComponent implements AfterViewInit {
       padding: 10,
       itemRadius: 0,
       data: [
-      randomValues(100, 0, 100),
-      /*randomValues(100, 0, 20),
-      randomValues(100, 20, 70),
-      randomValues(100, 60, 100),
-      randomValues(40, 50, 100),
-      randomValues(100, 60, 120),
-      randomValues(100, 80, 100)*/
-    ]}/*, {
-    label: 'Dataset 2',
-    backgroundColor: 'rgba(0,0,255,0.5)',
-    borderColor: 'blue',
-    borderWidth: 1,
-    outlierColor: '#999999',
-    padding: 10,
-    itemRadius: 0,
-    data: [
-    randomValues(100, 60, 100),
-    randomValues(100, 0, 100),
-    randomValues(100, 0, 20),
-    randomValues(100, 20, 70),
-    randomValues(40, 60, 120),
-    randomValues(100, 20, 100),
-    randomValues(100, 80, 100)
-    ]
-    }*/]
-    };
+        randomValues(100, 0, 100),
+      ]
+    }]
+  };
   ngAfterViewInit(): void {
-  const myChart = new Chart(this.chartRef.nativeElement, {
-    type: "boxplot",
-    data: this.boxplotData,
-    options: this.options
-  });
-}
+    this.myChart = new Chart(this.chartRef.nativeElement, {
+      type: "boxplot",
+      data: this.boxplotData,
+      options: {
+        plugins: {
+          legend: {
+            display: false
+          },
+        },
+        scales: {
+          x: {
+            ticks: {
+              color: '#dfd7d7'
+            },
+            grid: {
+              color: "rgba(0, 99, 171, 0.5)"
+            }
+          },
+          y: {
+            min: this.min,
+            max: this.max,
+            ticks: {
+              color: '#dfd7d7'
+            },
+            grid: {
+              color: "rgba(0, 99, 171, 0.5)"
+            }
+          }
+        }
+      }
+    });
+  }
 
+  myChart?: Chart;
 }
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 4150a704..6ed76ba4 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren } from '@angular/core';
 import Dataset from 'src/app/_data/Dataset';
 import Experiment, { ColumnEncoding, Encoding, ColumnType, NullValueOptions } from 'src/app/_data/Experiment';
 import { DatasetsService } from 'src/app/_services/datasets.service';
@@ -22,8 +22,8 @@ import { BoxPlotComponent } from '../_charts/box-plot/box-plot.component';
 })
 export class ColumnTableComponent implements AfterViewInit {
 
-  @ViewChildren(BoxPlotComponent) boxplotComp!: BoxPlotComponent[];
-  @ViewChildren(PieChartComponent) piechartComp!: PieChartComponent[];
+  @ViewChildren(BoxPlotComponent) boxplotComp!: QueryList<BoxPlotComponent>;
+  @ViewChildren(PieChartComponent) piechartComp!: QueryList<PieChartComponent>;
   @Input() dataset?: Dataset;
   @Input() experiment!: Experiment;
   @Output() okPressed: EventEmitter<string> = new EventEmitter();
@@ -46,34 +46,36 @@ export class ColumnTableComponent implements AfterViewInit {
     //ovo mi nece trebati jer primam dataset iz druge komponente
   }
 
-  updateCharts(){
+  updateCharts() {
     //min: number, max: number, q1: number, q3: number, median: number
-    let i=0;
-    this.dataset?.columnInfo.forEach(colInfo =>
-                                  { if (this.experiment.columnTypes[i] == ColumnType.numerical)
-                                    {
-                                      this.boxplotComp[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median);
-                                      i++;
-                                    } 
-                                  });
+    let i = 0;
+    this.boxplotComp.changes.subscribe(() => {
+      const bps = this.boxplotComp.toArray();
+      this.dataset?.columnInfo.forEach(colInfo => {
+        if (this.experiment.columnTypes[i] == ColumnType.numerical) {
+          bps[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median);
+          i++;
+        }
+      });
+    });
   }
 
   updatePieChart(){
     //min: number, max: number, q1: number, q3: number, median: number
     let i=0;
+    const pieChart = this.piechartComp.toArray();
     this.dataset?.columnInfo.forEach(colInfo =>
                                   { if (this.experiment.columnTypes[i] == ColumnType.categorical)
                                     {
-                                      this.piechartComp[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent);
+                                      pieChart[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent);
                                       i++;
                                     } 
                                   });
   }
 
   loadDataset(dataset: Dataset) {
+    console.log("LOADED DATASET");
     this.dataset = dataset;
-    this.updateCharts();
-    this.updatePieChart();
     this.setColumnTypeInitial();
 
     this.dataset.columnInfo.forEach(column => {
@@ -96,11 +98,14 @@ export class ColumnTableComponent implements AfterViewInit {
       }
     });
     this.loaded = true;
+
+    this.updateCharts();
+    this.updatePieChart();
   }
 
   ngAfterViewInit(): void {
     console.log(this.dataset?.columnInfo);
-    
+
   }
 
   setColumnTypeInitial() {
@@ -122,7 +127,7 @@ export class ColumnTableComponent implements AfterViewInit {
   resetOutputColumn() {
     if (this.experiment.inputColumns.length > 0)
       this.experiment.outputColumn = this.experiment.inputColumns[0];
-    else 
+    else
       this.experiment.outputColumn = '-';
   }
 
@@ -170,7 +175,7 @@ export class ColumnTableComponent implements AfterViewInit {
         if (columnName == this.experiment.outputColumn) {
           if (this.experiment.inputColumns.length > 0)
             this.experiment.outputColumn = this.experiment.inputColumns[0];
-          else 
+          else
             this.experiment.outputColumn = '-';
         }
       }
@@ -258,7 +263,7 @@ export class ColumnTableComponent implements AfterViewInit {
   openSaveExperimentDialog() {
     const dialogRef = this.dialog.open(SaveExperimentDialogComponent, {
       width: '400px',
-      data: { experiment: this.experiment } 
+      data: { experiment: this.experiment }
     });
     dialogRef.afterClosed().subscribe(experiment => {
       if (experiment) {
@@ -333,7 +338,7 @@ export class ColumnTableComponent implements AfterViewInit {
       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 
+    else
       this.openSaveExperimentDialog();
   }
   updateExperiment() {
@@ -341,7 +346,7 @@ export class ColumnTableComponent implements AfterViewInit {
       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 
+    else
       this.openUpdateExperimentDialog();
   }
 
diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css
index a709c98e..4c063f87 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.css
+++ b/frontend/src/app/_pages/experiment/experiment.component.css
@@ -56,4 +56,12 @@ mat-stepper {
 .ekspName{
     font-weight: bold;
     font-size: large;
-}
\ No newline at end of file
+}
+
+
+.addedElement{
+    color:var(--ns-accent);
+}
+.text-overflow {
+    overflow-wrap: break-word;
+}
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index edae1fc2..a2ede838 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -1,37 +1,45 @@
 <div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px); text-align: center;">
     <div class="d-flex flex-colum align-items-center sidenav">
         <div>
-        <div class="ekspName">Eskperiment:{{experiment.name}}</div>
+        <div class="ekspName " style="width: 250px;">
+            <div class="text-overflow" *ngIf="experiment.name=='exp1'" style="width: 250px;">
+                Novi Eksperiment
+            </div>
+            <div class="text-overflow" *ngIf="experiment.name!='exp1'" style="width: 250px;">
+                {{experiment.name}}
+            </div>
+
+        </div>
         <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
             <mat-step>
                 <!--editable="false"-->
                 <ng-template matStepLabel>
                     <span class="label" *ngIf="dataset==undefined">Izvor podataka</span>
-                    <span class="label" *ngIf="dataset!=undefined">Izvor podataka:{{dataset.name}}</span>
+                    <span class="label addedElement" *ngIf="dataset!=undefined">{{dataset.name}}</span>
                 </ng-template>
                 <ng-template matStepContent>
-                    <p>Izaberite vas izvor podataka</p>
+                    <p class="text-left">Izaberite vas izvor podataka</p>
                 </ng-template>
             </mat-step>
             <mat-step>
-                <ng-template matStepLabel> 
-                    <span class="label" *ngIf="experiment.name!='exp1'">Predvideti:{{experiment.outputColumn}}</span>
+                <ng-template matStepLabel>
+                    <span class="label addedElement" *ngIf="experiment.name!='exp1'">Predvideti:{{experiment.outputColumn}}</span>
                     <span class="label" *ngIf="experiment.name=='exp1'">Odabir kolona</span>
                 </ng-template>
                 <ng-template matStepContent>
-                    <p>Pripremite podatke i izaberite izlazne kolone</p>
+                    <p class="text-left">Pripremite podatke i izaberite izlazne kolone</p>
                 </ng-template>
             </mat-step>
             <mat-step>
                 <ng-template matStepLabel>
-                    <span class="label" *ngIf="modelToTrain!=undefined">Model:{{modelToTrain.name}}</span>
+                    <span class="label addedElement" *ngIf="modelToTrain!=undefined">{{modelToTrain.name}}</span>
                     <span class="label" *ngIf="modelToTrain==undefined">Treniranje</span>
                 </ng-template>
-                <p>Odaberite parametre i trenirajte model</p>
+                <p class="text-left">Odaberite parametre i trenirajte model</p>
             </mat-step>
             <mat-step>
                 <ng-template matStepLabel><span class="label">Pregled rezultata treniranja</span></ng-template>
-                <p>Pregledajte tok treniranja i grafički prikaz rezultata</p>
+                <p class="text-left">Pregledajte tok treniranja i grafički prikaz rezultata</p>
             </mat-step>
         </mat-stepper>
         </div>