From 9233e6f193f68a0477e2900ac7a82928ab7f4adc Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Wed, 18 May 2022 13:52:29 +0200 Subject: Ispravljen bag: kad se izmeni dataset, refreshuje se 2. korak na eksperiment strani. Dodata ruta kako bi se eksperiment iz kolekcije otvorio na eksperiment strani. Sredjivanje otvaranja - pocetak --- frontend/src/app/app-routing.module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'frontend/src/app/app-routing.module.ts') diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index f5f1ccae..9f8c623d 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -12,11 +12,11 @@ import { TestComponent } from './_pages/test/test.component'; const routes: Routes = [ { path: '', component: HomeComponent, data: { title: 'Početna strana' } }, + { path: 'experiment/:id', component: ExperimentComponent, data: { title: 'Eksperiment' } }, { path: 'experiment', component: ExperimentComponent, data: { title: 'Eksperiment' } }, { path: 'archive', component: ArchiveComponent, data: { title: 'Arhiva' } }, { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService], data: { title: 'Profil' } }, { path: 'playground', component: PlaygroundComponent, data: { title: 'Zabava' } }, - { path: 'sonja', component: ColumnTableComponent }, { path: 'test', component: TestComponent, data: { title: 'Test' } } ]; -- cgit v1.2.3 From e67d39d44bdb7d582964cbd643098b38dddd9c94 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Wed, 18 May 2022 21:55:36 +0200 Subject: Radjeno na otvaranju prediktora na eksperiment strani njegovim izborom u kolekciji. Dodata ruta i fja - poziv beku za prediktor. --- .../app/_pages/experiment/experiment.component.ts | 44 ++++++++++++++++------ frontend/src/app/_services/models.service.ts | 4 ++ frontend/src/app/app-routing.module.ts | 1 + 3 files changed, 38 insertions(+), 11 deletions(-) (limited to 'frontend/src/app/app-routing.module.ts') diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 312b1af1..2d4c138d 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -14,6 +14,7 @@ import { SignalRService } from 'src/app/_services/signal-r.service'; import { MetricViewComponent } from 'src/app/_elements/metric-view/metric-view.component'; import { ActivatedRoute, Router } from '@angular/router'; import { DatasetsService } from 'src/app/_services/datasets.service'; +import { PredictorsService } from 'src/app/_services/predictors.service'; @Component({ selector: 'app-experiment', @@ -39,24 +40,45 @@ export class ExperimentComponent implements AfterViewInit, OnInit { step3: boolean = false; step4: boolean = false; - constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private datasetsService: DatasetsService, private signalRService: SignalRService, private route: ActivatedRoute) { + constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private datasetsService: DatasetsService, private predictorsService: PredictorsService, 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"); - if (experimentId == null) - return; - this.experimentsService.getExperimentById(experimentId).subscribe((response) => { - this.experiment = response; - this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { - this.dataset = response; - - this.folderDataset.forExperiment = this.experiment; - this.folderDataset.selectFile(this.dataset); + let predictorId = this.route.snapshot.paramMap.get("predictorId"); + + if (predictorId != null && experimentId != null) { + this.experimentsService.getExperimentById(experimentId).subscribe((response) => { + this.experiment = response; + this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { + this.dataset = response; + this.folderDataset.forExperiment = this.experiment; + this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju + + this.predictorsService.getPredictor(predictorId!).subscribe((response) => { + let predictor = response; + this.modelsService.getModelById(predictor.modelId).subscribe((response) => { + //imamo model + this.folderModel.formModel.newModel = response; + }); + }); + }); }); - }); + } + else if (predictorId == null && experimentId != null) { + this.experimentsService.getExperimentById(experimentId).subscribe((response) => { + this.experiment = response; + this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { + this.dataset = response; + this.folderDataset.forExperiment = this.experiment; + this.folderDataset.selectFile(this.dataset); + }); + }); + } + }); } diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts index fc888556..7c315491 100644 --- a/frontend/src/app/_services/models.service.ts +++ b/frontend/src/app/_services/models.service.ts @@ -58,4 +58,8 @@ export class ModelsService { return this.http.get(`${Configuration.settings.apiURL}/model/publicmodels`, { headers: this.authService.authHeader() }); } + getModelById(modelId: string): Observable { + return this.http.get(`${Configuration.settings.apiURL}/model/byid/${modelId}`, { headers: this.authService.authHeader() }); + } + } diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 9f8c623d..8c60a666 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -12,6 +12,7 @@ import { TestComponent } from './_pages/test/test.component'; const routes: Routes = [ { path: '', component: HomeComponent, data: { title: 'Početna strana' } }, + { path: 'experiment/:id/:predictorId', component: ExperimentComponent, data: { title: 'Eksperiment' } }, { path: 'experiment/:id', component: ExperimentComponent, data: { title: 'Eksperiment' } }, { path: 'experiment', component: ExperimentComponent, data: { title: 'Eksperiment' } }, { path: 'archive', component: ArchiveComponent, data: { title: 'Arhiva' } }, -- cgit v1.2.3 From 84e02f0e7d895fe265be46e2f120076f92e3113f Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Thu, 19 May 2022 14:01:06 +0200 Subject: Ispravljen bag kod steppera (nije se ucitavao 3. korak kad se udje na exp iz kolekcije) i bag za updatePieChart pri ucitavanju eskperiment strane. --- frontend/src/app/_elements/column-table/column-table.component.ts | 4 +--- frontend/src/app/_pages/experiment/experiment.component.ts | 2 +- frontend/src/app/app-routing.module.ts | 3 ++- 3 files changed, 4 insertions(+), 5 deletions(-) (limited to 'frontend/src/app/app-routing.module.ts') 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 ad78feaf..27bb608f 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -131,6 +131,7 @@ export class ColumnTableComponent implements AfterViewInit { } else { this.dataset = dataset; + this.experimentChanged.emit(); this.columnsChecked = []; this.dataset.columnInfo.forEach(column => { if (this.experiment.inputColumns.find(x => x == column.columnName) != undefined) @@ -157,9 +158,6 @@ export class ColumnTableComponent implements AfterViewInit { this.resetPagging(); this.loadData(); this.loaded = true; - - this.updateCharts(); - this.updatePieChart(); } loadData(){ diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 22894131..6c8e96b3 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -57,7 +57,7 @@ export class ExperimentComponent implements AfterViewInit, OnInit { this.dataset = response; this.folderDataset.forExperiment = this.experiment; this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju - + //this.predictorsService.getPredictor(predictorId!).subscribe((response) => { let predictor = response; //this.modelsService.getModelById(predictor.modelId).subscribe((response) => { diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 8c60a666..56442842 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -18,7 +18,8 @@ const routes: Routes = [ { path: 'archive', component: ArchiveComponent, data: { title: 'Arhiva' } }, { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService], data: { title: 'Profil' } }, { path: 'playground', component: PlaygroundComponent, data: { title: 'Zabava' } }, - { path: 'test', component: TestComponent, data: { title: 'Test' } } + { path: 'test', component: TestComponent, data: { title: 'Test' } }, + { path: '**', redirectTo: '' } ]; @NgModule({ -- cgit v1.2.3 From 573019527eae41128b0716930dc0cfa0b019d317 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Thu, 19 May 2022 21:50:51 +0200 Subject: Radi prikaz prediktora iz kolekcije na experiment strani (prva 4 koraka sve popunjeno, iscrtan grafik). Ispravljeno crtanje grafika toka obuke - radi. YesNoDialog stil. --- .../_charts/line-chart/line-chart.component.ts | 37 ++++----- .../column-table/column-table.component.ts | 2 +- .../src/app/_elements/folder/folder.component.ts | 2 +- .../yes-no-dialog/yes-no-dialog.component.css | 8 ++ .../yes-no-dialog/yes-no-dialog.component.html | 8 +- .../app/_pages/experiment/experiment.component.ts | 88 ++++++++++++---------- .../app/_pages/my-models/my-models.component.html | 43 ----------- .../app/_pages/my-models/my-models.component.ts | 59 --------------- frontend/src/app/app-routing.module.ts | 2 +- 9 files changed, 81 insertions(+), 168 deletions(-) delete mode 100644 frontend/src/app/_pages/my-models/my-models.component.html delete mode 100644 frontend/src/app/_pages/my-models/my-models.component.ts (limited to 'frontend/src/app/app-routing.module.ts') 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..e12065a3 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -110,7 +110,7 @@ export class ColumnTableComponent implements AfterViewInit { 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 254298fb..d2175f73 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -120,7 +120,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/_modals/yes-no-dialog/yes-no-dialog.component.css b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.css index e69de29b..e99a1e1e 100644 --- a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.css +++ b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.css @@ -0,0 +1,8 @@ +#btnYes { + background-color: var(--offwhite); + color: var(--ns-bg-dark-100); +} + +#btnNo { + color: gray; +} \ No newline at end of file diff --git a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html index 77e7be42..259aec0d 100644 --- a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html +++ b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html @@ -1,10 +1,10 @@ -

{{data.title}}

-
+

{{data.title}}

+
{{data.message}}
- - + +
\ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 6c8e96b3..7cb5e7cd 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -21,7 +21,7 @@ import { PredictorsService } from 'src/app/_services/predictors.service'; templateUrl: './experiment.component.html', styleUrls: ['./experiment.component.css'] }) -export class ExperimentComponent implements AfterViewInit, OnInit { +export class ExperimentComponent implements AfterViewInit { @ViewChild(MatStepper) stepper!: MatStepper; @ViewChild('stepsContainer') stepsContainer!: ElementRef; @@ -44,46 +44,6 @@ export class ExperimentComponent implements AfterViewInit, OnInit { this.experiment = new Experiment("exp1"); } - ngOnInit(): void { - this.route.queryParams.subscribe(params => { - - let experimentId = this.route.snapshot.paramMap.get("id"); - let predictorId = this.route.snapshot.paramMap.get("predictorId"); - - if (predictorId != null && experimentId != null) { - this.experimentsService.getExperimentById(experimentId).subscribe((response) => { - this.experiment = response; - this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { - this.dataset = response; - this.folderDataset.forExperiment = this.experiment; - this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju - - //this.predictorsService.getPredictor(predictorId!).subscribe((response) => { - let predictor = response; - //this.modelsService.getModelById(predictor.modelId).subscribe((response) => { - this.modelsService.getModelById("62853d70696d62ceeb8db7cd").subscribe((response) => { - //imamo model - this.folderModel.formModel.newModel = response; - //this.metricView.update(predictor.metrics); - }); - //}); - }); - }); - } - else if (predictorId == null && experimentId != null) { - this.experimentsService.getExperimentById(experimentId).subscribe((response) => { - this.experiment = response; - this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { - this.dataset = response; - this.folderDataset.forExperiment = this.experiment; - this.folderDataset.selectFile(this.dataset); - }); - }); - } - - }); - } - /*updateExperiment(){ }*/ @@ -136,6 +96,52 @@ export class ExperimentComponent implements AfterViewInit, OnInit { }); } + + this.route.queryParams.subscribe(params => { + + let experimentId = this.route.snapshot.paramMap.get("id"); + let predictorId = this.route.snapshot.paramMap.get("predictorId"); + console.log("paramexp: ", experimentId, ", parampredictor: ", predictorId); + if (predictorId != null) { + this.predictorsService.getPredictor(predictorId!).subscribe((response) => { + let predictor = response; + //console.log("predictor: ", predictor); + this.experimentsService.getExperimentById(predictor.experimentId).subscribe((response) => { + this.experiment = response; + //console.log("experiment: ", this.experiment); + this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { + this.dataset = response; + //console.log("dataset: ", this.dataset); + this.folderDataset.forExperiment = this.experiment; + this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju + + this.modelsService.getModelById(predictor.modelId).subscribe((response) => { + let model = response; + //console.log("model: ", model); + this.folderModel.formModel.newModel = model; + this.step3 = true; + let numOfEpochsArray = Array.from({length: model.epochs}, (_, i) => i + 1); + //console.log("metric view1:", this.metricView); + setTimeout(() => { + this.metricView.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse); + }) + }); + }); + }); + }); + } + else if (experimentId != null) { + this.experimentsService.getExperimentById(experimentId).subscribe((response) => { + this.experiment = response; + this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { + this.dataset = response; + this.folderDataset.forExperiment = this.experiment; + this.folderDataset.selectFile(this.dataset); + }); + }); + } + + }); } history: any[] = []; diff --git a/frontend/src/app/_pages/my-models/my-models.component.html b/frontend/src/app/_pages/my-models/my-models.component.html deleted file mode 100644 index 9b281239..00000000 --- a/frontend/src/app/_pages/my-models/my-models.component.html +++ /dev/null @@ -1,43 +0,0 @@ - -
-
-
- -
-
- -
-
- - -
-
-
- - - - -
-
-
- - - -
-
-
-

Nema rezultata

-
-
- -
- - - - - -
diff --git a/frontend/src/app/_pages/my-models/my-models.component.ts b/frontend/src/app/_pages/my-models/my-models.component.ts deleted file mode 100644 index d379fa69..00000000 --- a/frontend/src/app/_pages/my-models/my-models.component.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import shared from 'src/app/Shared'; -import Model from 'src/app/_data/Model'; -import { ModelsService } from 'src/app/_services/models.service'; - -@Component({ - selector: 'app-my-models', - templateUrl: './my-models.component.html', - styleUrls: ['./my-models.component.css'] -}) -export class MyModelsComponent implements OnInit { - myModels: Model[] = []; - //myModel: Model; - - constructor(private modelsS : ModelsService, private router : Router) { - - - - } - - ngOnInit(): void { - this.getAllMyModels(); - - } -/* - editModel(): void{ - this.modelsS.editModel().subscribe(m => { - this.myModel = m; - - }) - } -*/ - -deleteThisModel(model: Model): void{ - shared.openYesNoDialog('Brisanje seta podataka','Da li ste sigurni da želite da obrišete model?',() => { - this.modelsS.deleteModel(model).subscribe((response) => { - this.getAllMyModels(); - }, (error) =>{ - if (error.error == "Model with name = {name} deleted") { - shared.openDialog("Obaveštenje", "Greška prilikom brisanja modela."); - } - }); - }); -} - - -useThisModel(model: Model): void{ - - this.router.navigate(['/training']) - -} - getAllMyModels(): void{ - this.modelsS.getMyModels().subscribe(m => { - this.myModels = m; - }); - } - -} diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 56442842..d5552ce9 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -12,7 +12,7 @@ import { TestComponent } from './_pages/test/test.component'; const routes: Routes = [ { path: '', component: HomeComponent, data: { title: 'Početna strana' } }, - { path: 'experiment/:id/:predictorId', component: ExperimentComponent, data: { title: 'Eksperiment' } }, + { path: 'experiment/p/:predictorId', component: ExperimentComponent, data: { title: 'Eksperiment' } }, { path: 'experiment/:id', component: ExperimentComponent, data: { title: 'Eksperiment' } }, { path: 'experiment', component: ExperimentComponent, data: { title: 'Eksperiment' } }, { path: 'archive', component: ArchiveComponent, data: { title: 'Arhiva' } }, -- cgit v1.2.3