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

6 files changed, 64 insertions, 90 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 07976da3..b3d25280 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,25 +16,16 @@ 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) {
-    if (this.myChart) {
-      this.boxplotData.datasets[0].data = [[min, q1, median, q3, max]]
-      this.myChart?.update();
-    }
-    /*this.boxplotData.datasets = [{
-      data: [[min, q1, median, q3, max]],
-    }]*/
-
-  };
+  
 
   /*
   updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){
@@ -55,27 +46,29 @@ export class BoxPlotComponent implements AfterViewInit {
     //this.updateChart();
   }
 
-  boxplotData = {
-    // define label tree
-    //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
-    datasets: [{
-      label: 'Dataset 1',
-      backgroundColor: '#0063AB',
-      borderColor: '#dfd7d7',
-      borderWidth: 1,
-      outlierColor: '#999999',
-      scaleFontColor: '#0063AB',
-      padding: 10,
-      itemRadius: 0,
-      data: [
-        randomValues(100, 0, 100),
-      ]
-    }]
-  };
+  
   ngAfterViewInit(): void {
-    this.myChart = new Chart(this.chartRef.nativeElement, {
+    const boxplotData = {
+      // define label tree
+      //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
+      labels:[""],
+      datasets: [{
+        label: 'Dataset 1',
+        backgroundColor: '#0063AB',
+        borderColor: '#dfd7d7',
+        borderWidth: 1,
+        outlierColor: '#999999',
+        scaleFontColor: '#0063AB',
+        padding: 10,
+        itemRadius: 0,
+        data: [
+          {min:this.min,q1:this.q1,q3:this.q3,median:this.median,max:this.max,mean:this.mean}
+        ]
+      }]
+    };
+    const myChart = new Chart(this.chartRef.nativeElement, {
       type: "boxplot",
-      data: this.boxplotData,
+      data: boxplotData,
       options: {
         plugins: {
           legend: {
@@ -92,8 +85,6 @@ export class BoxPlotComponent implements AfterViewInit {
             }
           },
           y: {
-            min: this.min,
-            max: this.max,
             ticks: {
               color: '#dfd7d7'
             },
@@ -106,5 +97,4 @@ export class BoxPlotComponent implements AfterViewInit {
     });
   }
 
-  myChart?: Chart;
 }
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
index 89a76a44..7d21129c 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
@@ -41,32 +41,33 @@ export class LineChartComponent implements AfterViewInit {
     }
   }
   update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc:number[],myValLoss:number[],myValMae:number[],myValMse:number[]) {
-    this.dataAcc.length = 0;
-    this.dataAcc.push(...myAcc);
-
+   
     this.dataEpoch.length = 0;
     this.dataEpoch.push(...myEpochs);
 
-    this.dataMAE.length = 0;
-    this.dataMAE.push(...myMae);
+    this.dataAcc.length = 0;
+    this.dataAcc.push(...myAcc);
 
     this.dataLOSS.length = 0;
     this.dataLOSS.push(...myLoss);
 
-    this.dataMSE.length = 0;
-    this.dataMSE.push(...myValAcc);
+    this.dataMAE.length = 0;
+    this.dataMAE.push(...myMae);
 
     this.dataMSE.length = 0;
-    this.dataMSE.push(...myValLoss);
+    this.dataMSE.push(...myMse);
 
-    this.dataMSE.length = 0;
-    this.dataMSE.push(...myValMae);
+    this.dataValAcc.length = 0;
+    this.dataValAcc.push(...myValAcc);
 
-    this.dataMSE.length = 0;
-    this.dataMSE.push(...myValMse);
+    this.dataValLoss.length = 0;
+    this.dataValLoss.push(...myValLoss);
 
-    this.dataMSE.length = 0;
-    this.dataMSE.push(...myMse);
+    this.dataValMAE.length = 0;
+    this.dataValMAE.push(...myValMae);
+
+    this.dataValMSE.length = 0;
+    this.dataValMSE.push(...myValMse);
 
     this.myChart.update();
   }
@@ -89,7 +90,7 @@ export class LineChartComponent implements AfterViewInit {
           },
           {
             label: 'Val_Accuracy',
-            data: this.dataMSE,
+            data: this.dataValAcc,
             borderWidth: 1
           },
           {
@@ -99,7 +100,7 @@ export class LineChartComponent implements AfterViewInit {
           },
           {
             label: 'Val_Loss',
-            data: this.dataMSE,
+            data: this.dataValLoss,
             borderWidth: 1
           },
           {
@@ -109,7 +110,7 @@ export class LineChartComponent implements AfterViewInit {
           },
           {
             label: 'Val_MAE',
-            data: this.dataMSE,
+            data: this.dataValMAE,
             borderWidth: 1
           },
           {
@@ -119,7 +120,7 @@ export class LineChartComponent implements AfterViewInit {
           },
           {
             label: 'Val_MSE',
-            data: this.dataMSE,
+            data: this.dataValMSE,
             borderWidth: 1
           }
           ]
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 694b1a83..9a8cbeee 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -78,39 +78,14 @@ export class ColumnTableComponent implements AfterViewInit {
   }
 
 
-  updateCharts() {
-    //min: number, max: number, q1: number, q3: number, median: number
-    let i = 0;
-    this.boxplotComp.changes.subscribe(() => {
-      const bps = this.boxplotComp.toArray();
-      this.dataset?.columnInfo.forEach((colInfo, index) => {
-        if (this.experiment.columnTypes[index] == 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();
-    console.log(pieChart)
-    this.dataset?.columnInfo.forEach((colInfo, index) => {
-      console.log(i)
-      if (this.experiment.columnTypes[index] == ColumnType.categorical) {
-        console.log("prosao IF")
-        pieChart[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent);
-        i++;
-      }
-    });
-  }
 
   loadDataset(dataset: Dataset) {
     console.log("LOADED DATASET");
 
-    if (this.route.snapshot.paramMap.get("id") == null) {
+    if (this.route.snapshot.paramMap.get("id") == null && this.route.snapshot.paramMap.get("predictorId") == null) {
       this.dataset = dataset;
       this.setColumnTypeInitial();
   
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index 13ec8937..ed38bbd6 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -122,7 +122,7 @@ export class FolderComponent implements AfterViewInit {
   }
 
   goToExperimentPageWithPredictor(file: FolderFile, predictor: Predictor) {
-    this.router.navigate(['/experiment/' + file._id + "/" + predictor._id]);
+    this.router.navigate(['/experiment/p/' + predictor._id]);
   }
 
   createNewFile() {
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
index 78bb4bd1..024f58e8 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -10,7 +10,7 @@
             <div role="group">
                 <mat-form-field class="example-full-width" appearance="fill">
                     <mat-label>Naziv</mat-label>
-                    <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name" (change)="editEvent.emit()">
+                    <input type="text" matInput value="{{dataset?.name}}" [(ngModel)]="dataset.name" (input)="editEvent.emit()">
 
 
                     <mat-error *ngIf="nameFormControl.hasError('required')">
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts
index fbca2edf..65b1ef9b 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.ts
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts
@@ -16,7 +16,7 @@ export class MetricViewComponent implements OnInit {
 
   history: any[] = [];
 
-  update(history: any[]) {
+  update(history: any[],totalEpochs:number) {
     const myAcc: number[] = [];
     const myMae: number[] = [];
     const myMse: number[] = [];
@@ -29,7 +29,15 @@ export class MetricViewComponent implements OnInit {
     const myEpochs: number[] = [];
     this.history = history;
     this.history.forEach((metrics, epoch) => {
-      myEpochs.push(epoch + 1);
+      if(totalEpochs>100)
+      {
+        let epochEstimate=epoch*Math.round(Math.sqrt(totalEpochs))
+        if(epochEstimate>totalEpochs)
+          epochEstimate=totalEpochs;
+        myEpochs.push(epochEstimate);
+      }
+      else
+        myEpochs.push(epoch + 1);
       for (let key in metrics) {
         let value = metrics[key];
         //console.log(key, ':::', value, epoch);