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

9 files changed, 130 insertions, 82 deletions

diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
index b2f8857d..be1dc097 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
@@ -8,6 +8,7 @@ import { DatasetsService } from 'src/app/_services/datasets.service';
 import { CsvParseService } from 'src/app/_services/csv-parse.service';
 import { Output, EventEmitter } from '@angular/core';
 import { SignalRService } from 'src/app/_services/signal-r.service';
+import { AuthService } from 'src/app/_services/auth.service';
 
 @Component({
   selector: 'app-dataset-load',
@@ -33,7 +34,15 @@ export class DatasetLoadComponent implements OnInit {
 
   term: string = "";
 
-  constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService, private signalRService: SignalRService) {
+  constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService, private signalRService: SignalRService, private authService: AuthService) {
+    this.fetchDatasets();
+
+    authService.loggedInEvent.subscribe(_ => {
+      this.fetchDatasets();
+    })
+  }
+
+  fetchDatasets() {
     this.datasets.getMyDatasets().subscribe((datasets) => {
       this.myDatasets = datasets;
     });
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.html b/frontend/src/app/_elements/line-chart/line-chart.component.html
index 8607aac5..c8f406f4 100644
--- a/frontend/src/app/_elements/line-chart/line-chart.component.html
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.html
@@ -1,9 +1,5 @@
 <div class="chart-wrapper">
-    <canvas baseChart 
-        [datasets]="lineChartData" 
-        [labels]="lineChartLabels" 
-        [options]="lineChartOptions"
-        [legend]="lineChartLegend"  
-        [plugins]="lineChartPlugins">
+    <canvas  id="myChart">
+        
     </canvas>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.ts b/frontend/src/app/_elements/line-chart/line-chart.component.ts
index 7a06ecf5..68663861 100644
--- a/frontend/src/app/_elements/line-chart/line-chart.component.ts
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.ts
@@ -1,57 +1,39 @@
-import { Component, OnInit } from '@angular/core';
-import { ChartOptions } from 'chart.js';
+import { Component, OnInit,Input } from '@angular/core';
 import { BaseChartDirective } from 'ng2-charts';
-
+import {Chart} from 'chart.js';
 @Component({
   selector: 'app-line-chart',
   templateUrl: './line-chart.component.html',
   styleUrls: ['./line-chart.component.css']
 })
-export class LineChartComponent implements OnInit {
 
+export class LineChartComponent implements OnInit {
+  @Input() dataAcc=[] ;
+  @Input() dataEpoch=[];
   constructor() { }
 
   ngOnInit(): void {
-  }
-  lineChartData:Array<any> = [
-    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
-    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
-    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
-  ];
-  lineChartLabels: BaseChartDirective["labels"] = ['January', 'February', 'March', 'April', 'May', 'June'];
-  lineChartOptions = {
-    responsive: true,
-  };
-  lineChartColors:Array<any> = [
-    { // grey
-      backgroundColor: 'rgba(148,159,177,0.2)',
-      borderColor: 'rgba(148,159,177,1)',
-      pointBackgroundColor: 'rgba(148,159,177,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    var myChart=new Chart("myChart",
+      {
+        type: 'line',
+    data: {
+        labels:this.dataEpoch,
+        datasets: [{
+            label: 'Vrednost',
+            data: this.dataAcc,
+            borderWidth: 1
+        }]
     },
-    { // dark grey
-      backgroundColor: 'rgba(77,83,96,0.2)',
-      borderColor: 'rgba(77,83,96,1)',
-      pointBackgroundColor: 'rgba(77,83,96,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(77,83,96,1)'
-    },
-    { // grey
-      backgroundColor: 'rgba(148,159,177,0.2)',
-      borderColor: 'rgba(148,159,177,1)',
-      pointBackgroundColor: 'rgba(148,159,177,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    options: {
+        scales: {
+            y: {
+                beginAtZero: true
+            }
+        }
     }
-  ];
-  lineChartLegend = true;
-  lineChartPlugins = [];
-  lineChartType = 'line';
-  
+      }
+    );
+ 
+  }
 }
-
-
+ 
\ No newline at end of file
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.css b/frontend/src/app/_elements/metric-view/metric-view.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.css
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html
new file mode 100644
index 00000000..7408547a
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.html
@@ -0,0 +1,5 @@
+<div>
+    <app-line-chart [data]="myAcc">
+        
+    </app-line-chart>
+</div>
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts b/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts
new file mode 100644
index 00000000..c3ecc67f
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetricViewComponent } from './metric-view.component';
+
+describe('MetricViewComponent', () => {
+  let component: MetricViewComponent;
+  let fixture: ComponentFixture<MetricViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MetricViewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetricViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts
new file mode 100644
index 00000000..76dd7d20
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { SignalRService } from 'src/app/_services/signal-r.service';
+@Component({
+  selector: 'app-metric-view',
+  templateUrl: './metric-view.component.html',
+  styleUrls: ['./metric-view.component.css']
+})
+export class MetricViewComponent implements OnInit {
+  myAcc:[]=[];
+  myMae:[]=[];
+  myMse:[]=[];
+  myEpochs:[]=[];
+  constructor(private signalRService: SignalRService) { }
+
+  ngOnInit(): void {
+    if(this.signalRService.hubConnection)
+      {
+        this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
+        console.log(stat)
+        console.log(totalEpochs)
+        const data=JSON.parse(stat)
+        for (let key in data) 
+        {
+          let value = data[key];
+          console.log(value)
+        }
+      });
+      
+    }
+
+  }
+}
diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts
index 5f9caf9d..8bf8fd93 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ b/frontend/src/app/_elements/model-load/model-load.component.ts
@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild, Output, EventEmitter, Input } from '@angu
 import Shared from 'src/app/Shared';
 import Experiment from 'src/app/_data/Experiment';
 import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
+import { AuthService } from 'src/app/_services/auth.service';
 import { ModelsService } from 'src/app/_services/models.service';
 import { GraphComponent } from '../graph/graph.component';
 
@@ -14,7 +15,7 @@ import { GraphComponent } from '../graph/graph.component';
 export class ModelLoadComponent implements OnInit {
 
   @ViewChild(GraphComponent) graph!: GraphComponent;
-  @Input() forExperiment?:Experiment;
+  @Input() forExperiment?: Experiment;
   @Output() selectedModelChangeEvent = new EventEmitter<Model>();
 
   newModel: Model = new Model();
@@ -38,13 +39,20 @@ export class ModelLoadComponent implements OnInit {
 
   batchSizePower: number = 2;
 
-  constructor(private modelsService: ModelsService) {
+  constructor(private modelsService: ModelsService, private authService: AuthService) {
     //console.log("forExperiment = ", this.forExperiment);
-    
+    this.fetchModels();
+
+    this.authService.loggedInEvent.subscribe(_ => {
+      this.fetchModels();
+    })
+  }
+
+  fetchModels() {
     //if (this.forExperiment == undefined) {
-      this.modelsService.getMyModels().subscribe((models) => {
-        this.myModels = models;
-      });
+    this.modelsService.getMyModels().subscribe((models) => {
+      this.myModels = models;
+    });
     /*}
     else {
       this.modelsService.getMyModelsByType(ProblemType.Regression).subscribe((models) => {
@@ -56,10 +64,9 @@ export class ModelLoadComponent implements OnInit {
 
   ngOnInit(): void {
   }
-  
-  updateBatchSize()
-  {
-    this.newModel.batchSize=2**this.batchSizePower;
+
+  updateBatchSize() {
+    this.newModel.batchSize = 2 ** this.batchSizePower;
   }
 
   updateGraph() {
diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html
index 7d0c4cd8..1988b834 100644
--- a/frontend/src/app/_elements/navbar/navbar.component.html
+++ b/frontend/src/app/_elements/navbar/navbar.component.html
@@ -6,31 +6,25 @@
             </a>
 
             <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
-                <li><a routerLink="" class="nav-link px-2"
-                        [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li>
-                <li><a routerLink="experiment" class="nav-link px-2"
-                        [class]="(currentUrl === '/experiment') ? 'text-secondary' : 'text-white'">Napravi eksperiment</a>
+                <li><a routerLink="" class="nav-link px-2" [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li>
+                <li><a routerLink="experiment" class="nav-link px-2" [class]="(currentUrl === '/experiment') ? 'text-secondary' : 'text-white'">Napravi eksperiment</a>
                 </li>
-                <li><a routerLink="training" class="nav-link px-2"
-                        [class]="(currentUrl === '/training') ? 'text-secondary' : 'text-white'">Treniraj model</a>
+                <li><a routerLink="training" class="nav-link px-2" [class]="(currentUrl === '/training') ? 'text-secondary' : 'text-white'">Treniraj model</a>
                 </li>
-                <li><a routerLink="my-predictors" class="nav-link px-2"
-                        [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a>
+                <li><a routerLink="my-predictors" class="nav-link px-2" [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a>
                 </li>
             </ul>
 
             <div *ngIf="shared.loggedIn" class="dropdown text-end">
-                <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1"
-                    data-bs-toggle="dropdown" aria-expanded="false">
-                    <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32"
-                        class="rounded-circle">
+                <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
+                    <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" class="rounded-circle">
                 </a>
-                <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1"
-                    style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);"
-                    data-popper-placement="bottom-end">
-                    <li><a class="dropdown-item" routerLink="add-model">Nov model...</a></li>
-                    <li><a class="dropdown-item" routerLink="settings">Podešavanja</a></li>
+                <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" data-popper-placement="bottom-end">
+                    <li><a class="dropdown-item" routerLink="my-datasets">Moji izvori podataka</a></li>
+                    <li><a class="dropdown-item" routerLink="my-models">Moji modeli</a></li>
+                    <li><a class="dropdown-item" routerLink="my-predictors">Moji prediktori</a></li>
                     <li><a class="dropdown-item" routerLink="profile">Moj profil</a></li>
+                    <li><a class="dropdown-item" routerLink="settings" disabled>Podešavanja</a></li>
                     <li>
                         <hr class="dropdown-divider">
                     </li>
@@ -38,12 +32,10 @@
                 </ul>
             </div>
             <div *ngIf="!shared.loggedIn" class="dropdown text-end">
-                <button type="button" mat-raised-button color="primary" class="mx-2" data-bs-toggle="modal"
-                    data-bs-target="#modalForLogin">
+                <button type="button" mat-raised-button color="primary" class="mx-2" data-bs-toggle="modal" data-bs-target="#modalForLogin">
                     Prijavi se
                 </button>
-                <button type="button" mat-raised-button color="primary" data-bs-toggle="modal"
-                    data-bs-target="#modalForRegister">
+                <button type="button" mat-raised-button color="primary" data-bs-toggle="modal" data-bs-target="#modalForRegister">
                     Registruj se
                 </button>
             </div>