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

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

9 files changed, 84 insertions, 33 deletions

diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
index 35c7c8d5..2eea561e 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
@@ -6,5 +6,6 @@ canvas{
     background-color: var(--ns-bg-dark-100);
     border-radius: 5px;
     margin: 10px;
-    font-size: 10px !important;
-  }
\ No newline at end of file
+    font-size: 11 !important;
+  }
+ 
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
index 5bb7aae6..d48212cd 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
@@ -1,4 +1,4 @@
-
-    <canvas  id="myChart" >   
+<div #wrapper style="width:100%;height:95%;">
+    <canvas  id="myChart" #canvas>   
     </canvas>
-    
\ No newline at end of file
+</div>
\ No newline at end of file
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 e873618c..89a76a44 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
@@ -1,4 +1,4 @@
-import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
 import { Chart } from 'chart.js';
 
 @Component({
@@ -19,11 +19,27 @@ export class LineChartComponent implements AfterViewInit {
   dataValLoss:number[]=[];
   dataEpoch: number[] = [];
 
+  @ViewChild('wrapper')
+  wrapper!: ElementRef;
+  @ViewChild('canvas')
+  canvas!: ElementRef;
+
   constructor() {
+    
   }
-
+  width = 700;
+  height = 400;
+  
   myChart!: Chart;
-
+  resize() {
+    this.width = this.wrapper.nativeElement.offsetWidth;
+    this.height = this.wrapper.nativeElement.offsetHeight;
+
+    if (this.canvas) {
+      this.canvas.nativeElement.width = this.width;
+      this.canvas.nativeElement.height = this.height;
+    }
+  }
   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);
@@ -56,6 +72,9 @@ export class LineChartComponent implements AfterViewInit {
   }
 
   ngAfterViewInit(): void {
+    
+    window.addEventListener('resize', () => { this.resize() });
+    this.resize();
     this.myChart = new Chart("myChart",
       {
         type: 'line',
@@ -69,7 +88,7 @@ export class LineChartComponent implements AfterViewInit {
             
           },
           {
-            label: 'VAl_Accuracy',
+            label: 'Val_Accuracy',
             data: this.dataMSE,
             borderWidth: 1
           },
@@ -150,3 +169,4 @@ export class LineChartComponent implements AfterViewInit {
     );
   }
 }
+
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 8af56c43..31c32dfd 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -46,7 +46,7 @@
                 </table>
                 <div class="mb-3">
                     <button mat-button (click)="goBack()"><mat-icon>keyboard_arrow_left</mat-icon></button>
-                    <div style="display: inline;">{{(this.begin/10)+1}}</div>
+                    <div style="display: inline;">{{(this.begin/10)+1}}...{{getPage()}}</div>
                     <button mat-button (click)="goForward()"><mat-icon>keyboard_arrow_right</mat-icon></button>
 
                 </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 7c2f8cef..8824ecf4 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -52,16 +52,28 @@ export class ColumnTableComponent implements AfterViewInit {
     this.begin=0;
   }
   goBack(){
-    if(this.begin-10<=0)
+    if(this.begin-10<0)
       this.begin=0;
     else
+    {
       this.begin-=10;
-    this.loadData();
+      this.loadData();
+    }
 
   }
   goForward(){
+    if(this.dataset!=undefined){
     this.begin+=10;
-    this.loadData();
+    if(this.dataset.rowCount<this.begin)
+      this.begin-=10;
+    else
+      this.loadData();
+    }
+  }
+  getPage(){
+    if(this.dataset!=undefined)
+      return Math.ceil(this.dataset.rowCount/this.step);
+    return 0;
   }
 
 
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 9f8e9e6f..7be838f1 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -3,8 +3,7 @@
         <div class="topBar">
                 <div class="kolona mb-3">
                     <div class="fileButton">
-                        <button type="button" mat-raised-button (click)="fileInput.click()">Dodaj izvor podataka</button>
-                        
+                        <button type="button" mat-raised-button (click)="fileInput.click()"><span *ngIf="!firstInput">Dodaj izvor podataka</span><span *ngIf="firstInput">{{filename}}</span></button>
                     </div>
                 </div>
 
@@ -32,11 +31,7 @@
                     </mat-form-field>
                 </div>
         </div>
-        
-    <div class="row" *ngIf="firstInput">
-        <label class="naslov mt-2">{{filename}}</label>
-
-    </div>
+     
 
     <div class="row" style="margin-right: 0;">
         <div class="file-container" [ngClass]="{'dottedClass': !tableData.hasInput}">
@@ -49,7 +44,7 @@
             <div class="mt-5 datatable">
                 <div [ngClass]="{'hidden': (!existingFlag)}" class="text-center">
                     <button mat-button  (click)="goBack()"><mat-icon>keyboard_arrow_left</mat-icon></button>
-                    <div style="display: inline;">{{(this.begin/10)+1}}</div>
+                    <div style="display: inline;">{{(this.begin/10)+1}}...{{getPage()}}</div>
                     <button mat-button (click)="goForward()"><mat-icon>keyboard_arrow_right</mat-icon></button>
                 </div>
                 <app-datatable [tableData]="tableData"></app-datatable>
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
index d801b5fb..19c0083c 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
@@ -47,20 +47,28 @@ export class FormDatasetComponent {
     this.begin=0;
   }
   goBack(){
-    if(this.begin-10<=0)
+    if(this.begin-10<0)
       this.begin=0;
     else
+    {
       this.begin-=10;
-    this.loadExisting();
+      this.loadExisting();
+    }
 
   }
   goForward(){
     this.begin+=10;
-    this.loadExisting();
+    if(this.dataset.rowCount<this.begin)
+      this.begin-=10;
+    else
+      this.loadExisting();
   }
   clear(){
     this.tableData.hasInput = false;
   }
+  getPage(){
+    return Math.ceil(this.dataset.rowCount/10)
+  }
 
   changeListener($event: any): void {
     this.files = $event.srcElement.files;
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 20ff33d1..e521ce23 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -10,35 +10,40 @@
                 </div>
 
             </div>
-            <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
-                <mat-step>
+            <mat-stepper orientation="vertical" (selectionChange)="changePage($event)" [linear]="true">
+                <mat-step [completed]="this.step1">
                     <!--editable="false"-->
                     <ng-template matStepLabel>
-                        <span class="label" *ngIf="dataset==undefined">Izvor podataka</span>
+                        <span class="label" *ngIf="dataset==undefined">Izvor podataka </span>
                         <span class="label addedElement" *ngIf="dataset!=undefined">{{dataset.name}}</span>
                     </ng-template>
                     <ng-template matStepContent>
                         <p class="text-left">Izaberite izvor podataka</p>
                     </ng-template>
                 </mat-step>
-                <mat-step>
+                <mat-step [completed]="experiment._id!=''">
                     <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>
+                        <span class="label addedElement" *ngIf="experiment._id!=''">Predvideti:{{experiment.outputColumn}}</span>
+                        <span *ngIf="!this.step1" class="align-middle"><mat-icon>lock</mat-icon></span>
+                        <span class="label" *ngIf="experiment._id==''">Odabir kolona </span>
                     </ng-template>
                     <ng-template matStepContent>
                         <p class="text-left">Pripremite podatke i izaberite izlazne kolone</p>
                     </ng-template>
                 </mat-step>
-                <mat-step>
+                <mat-step [completed]="this.step3">
                     <ng-template matStepLabel>
+                        <span *ngIf="experiment._id==''" class="align-middle"><mat-icon>lock</mat-icon></span>
                         <span class="label addedElement" *ngIf="modelToTrain!=undefined">{{modelToTrain.name}}</span>
                         <span class="label" *ngIf="modelToTrain==undefined">Treniranje</span>
                     </ng-template>
                     <p class="text-left">Odaberite parametre i trenirajte model</p>
                 </mat-step>
-                <mat-step>
-                    <ng-template matStepLabel><span class="label">Pregled rezultata<br> treniranja</span></ng-template>
+                <mat-step [completed]="this.step4">
+                    <ng-template matStepLabel>
+                        <span *ngIf="!this.step3" class="align-middle"><mat-icon>lock</mat-icon></span>
+                        <span class="label">Pregled rezultata<br> treniranja</span>
+                    </ng-template>
                     <p class="text-left">Pregledajte tok treniranja i<br> grafički prikaz rezultata</p>
                 </mat-step>
             </mat-stepper>
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 62ef9257..6345307c 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -34,9 +34,15 @@ export class ExperimentComponent implements AfterViewInit, OnInit {
   @ViewChild("folderModel") folderModel!: FolderComponent;
   @ViewChild("metricView") metricView!: MetricViewComponent;
 
+  step1:boolean=false;
+  //step2:boolean=false;
+  step3:boolean=false;
+  step4:boolean=false;
+
   constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private datasetsService: DatasetsService, private signalRService: SignalRService, private route: ActivatedRoute) {
     this.experiment = new Experiment("exp1");
   }
+  
   ngOnInit(): void {
     this.route.queryParams.subscribe(params => {
       let experimentId = this.route.snapshot.paramMap.get("id");
@@ -78,6 +84,7 @@ export class ExperimentComponent implements AfterViewInit, OnInit {
       Shared.openDialog('Greška', 'Morate odabrati konfiguraciju neuronske mreže');
     } else {
       this.modelsService.trainModel(this.modelToTrain._id, this.experiment._id).subscribe(() => { console.log("pocelo treniranje") });
+      this.step4=true;
     }
   }
 
@@ -192,6 +199,8 @@ export class ExperimentComponent implements AfterViewInit, OnInit {
     this.dataset = d;
 
     this.columnTable.loadDataset(this.dataset);
+    this.step1=true;
+    
   }
 
   modelToTrain?: Model;
@@ -199,5 +208,6 @@ export class ExperimentComponent implements AfterViewInit, OnInit {
   setModel(model: FolderFile) {
     const m = <Model>model;
     this.modelToTrain = m;
+    this.step3=true;
   }
 }