From 2c68a5c7926bfb62902ef9ad4b705d675c2293f7 Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Tue, 19 Apr 2022 21:27:47 +0200 Subject: Dodate ispravljena komponenta za kreiranje grafika i dodata komponenta za njegov prikaz. --- .../_elements/line-chart/line-chart.component.html | 8 +-- .../_elements/line-chart/line-chart.component.ts | 70 ++++++++-------------- .../metric-view/metric-view.component.css | 0 .../metric-view/metric-view.component.html | 5 ++ .../metric-view/metric-view.component.spec.ts | 25 ++++++++ .../_elements/metric-view/metric-view.component.ts | 32 ++++++++++ 6 files changed, 90 insertions(+), 50 deletions(-) create mode 100644 frontend/src/app/_elements/metric-view/metric-view.component.css create mode 100644 frontend/src/app/_elements/metric-view/metric-view.component.html create mode 100644 frontend/src/app/_elements/metric-view/metric-view.component.spec.ts create mode 100644 frontend/src/app/_elements/metric-view/metric-view.component.ts (limited to 'frontend/src/app/_elements') 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 @@
- + +
\ 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 = [ - {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 = [ - { // 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 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 @@ +
+ + + +
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; + + 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) + } + }); + + } + + } +} -- cgit v1.2.3 From 32d776709f2b5df14dbcfd3f610306a899959851 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Tue, 19 Apr 2022 21:44:08 +0200 Subject: Dodao event kada se korisnik uloguje tako da komponente koje treba da osveze vrednost mogu da osveze svoje vrednosti tako sto se prijave na taj event. --- .../dataset-load/dataset-load.component.ts | 11 ++++++- .../_elements/model-load/model-load.component.ts | 27 ++++++++++------- .../src/app/_elements/navbar/navbar.component.html | 34 ++++++++------------- frontend/src/app/_services/auth.service.ts | 7 +++-- frontend/src/app/training/training.component.ts | 35 +++++++++++++++++----- 5 files changed, 72 insertions(+), 42 deletions(-) (limited to 'frontend/src/app/_elements') 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 73dbf2d2..74640782 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/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(); 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 @@
- -
- -
diff --git a/frontend/src/app/_services/auth.service.ts b/frontend/src/app/_services/auth.service.ts index ef340684..9e3f9f2f 100644 --- a/frontend/src/app/_services/auth.service.ts +++ b/frontend/src/app/_services/auth.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { EventEmitter, Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { JwtHelperService } from '@auth0/angular-jwt'; import { CookieService } from 'ngx-cookie-service'; @@ -12,6 +12,8 @@ const jwtHelper = new JwtHelperService(); }) export class AuthService { + public loggedInEvent: EventEmitter = new EventEmitter(); + shared = shared; constructor(private http: HttpClient, private cookie: CookieService) { } @@ -52,7 +54,7 @@ export class AuthService { var property = jwtHelper.decodeToken(this.cookie.get('token')); var username = property['name']; if (username != "") { - + this.refresher = setTimeout(() => { this.http.post(`${Configuration.settings.apiURL}/auth/renewJwt`, {}, { headers: this.authHeader(), responseType: 'text' }).subscribe((response) => { this.authenticate(response); @@ -81,6 +83,7 @@ export class AuthService { } this.cookie.set('token', token, exp); this.updateUser(); + this.loggedInEvent.emit(true); } updateUser() { diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts index c82a6b79..1b85b947 100644 --- a/frontend/src/app/training/training.component.ts +++ b/frontend/src/app/training/training.component.ts @@ -4,15 +4,17 @@ import Shared from '../Shared'; import Experiment from '../_data/Experiment'; import Model, { ProblemType } from '../_data/Model'; import { ModelLoadComponent } from '../_elements/model-load/model-load.component'; +import { AuthService } from '../_services/auth.service'; import { ExperimentsService } from '../_services/experiments.service'; import { ModelsService } from '../_services/models.service'; +import { SignalRService } from '../_services/signal-r.service'; @Component({ selector: 'app-training', templateUrl: './training.component.html', styleUrls: ['./training.component.css'] }) -export class TrainingComponent implements OnInit{ +export class TrainingComponent implements OnInit { @ViewChild(ModelLoadComponent) modelLoadComponent?: ModelLoadComponent; @@ -24,22 +26,39 @@ export class TrainingComponent implements OnInit{ term: string = ""; - constructor(private modelsService: ModelsService, private route: ActivatedRoute, private experimentsService: ExperimentsService) { + constructor(private modelsService: ModelsService, private route: ActivatedRoute, private experimentsService: ExperimentsService, private authService: AuthService, private signalRService: SignalRService) { + if (this.signalRService.hubConnection) { + this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => { + if (this.selectedModel?._id == mId) { + this.trainingResult = stat; + } + }); + } } - ngOnInit(): void { + ngOnInit(): void { this.route.queryParams.subscribe(params => { - let experimentId =this.route.snapshot.paramMap.get("id"); + let experimentId = this.route.snapshot.paramMap.get("id"); - this.experimentsService.getMyExperiments().subscribe((experiments) => { - this.myExperiments = experiments; + this.fetchExperiments(experimentId); - this.selectedExperiment = this.myExperiments.filter(x => x._id == experimentId)[0]; - console.log("selektovan exp u training comp: ", this.selectedExperiment); + this.authService.loggedInEvent.subscribe(_ => { + this.fetchExperiments(experimentId); + + this.signalRService.startConnection() }); }); } + fetchExperiments(andSelectWithId: string | null = '') { + this.experimentsService.getMyExperiments().subscribe((experiments) => { + this.myExperiments = experiments; + + this.selectedExperiment = this.myExperiments.filter(x => x._id == andSelectWithId)[0]; + console.log("selektovan exp u training comp: ", this.selectedExperiment); + }); + } + selectThisExperiment(experiment: Experiment) { this.selectedExperiment = experiment; this.modelLoadComponent!.newModel.type = this.selectedExperiment.type; -- cgit v1.2.3