diff options
Diffstat (limited to 'frontend/src/app/_pages/experiment')
3 files changed, 56 insertions, 24 deletions
diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index 2298ae48..59e004e9 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -48,6 +48,7 @@ mat-stepper { flex-direction: row; justify-content: center; align-items: center; + /*margin-bottom: 100px;*/ } .step-content-inside { @@ -66,4 +67,11 @@ mat-stepper { .text-overflow { overflow-wrap: break-word; + width: 170px; + display: inline-block; + text-align: left; +} + +.text-overflow-experiment-name { + overflow-wrap: break-word; }
\ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 8f462f86..e807dd06 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -2,10 +2,10 @@ <div class="d-flex flex-colum align-items-center sidenav"> <div> <div class="ekspName " style="width: 250px;"> - <div class="text-overflow" *ngIf="experiment.name=='exp1'" style="width: 250px;"> + <div class="text-overflow-experiment-name" *ngIf="experiment.name=='exp1'" style="width: 250px;"> Novi Eksperiment </div> - <div class="text-overflow" *ngIf="experiment.name!='exp1'" style="width: 250px;"> + <div class="text-overflow-experiment-name" *ngIf="experiment.name!='exp1'" style="width: 250px;"> {{experiment.name}} </div> @@ -14,37 +14,37 @@ <mat-step [completed]="this.step1"> <!--editable="false"--> <ng-template matStepLabel> - <span class="label" *ngIf="dataset==undefined">Izvor podataka </span> - <span class="label addedElement" *ngIf="dataset!=undefined">{{dataset.name}}</span> + <span class="label text-overflow" *ngIf="dataset==undefined">Izvor podataka </span> + <span class="label addedElement text-overflow" *ngIf="dataset!=undefined">{{dataset.name}}</span> </ng-template> <ng-template matStepContent> - <p class="text-left">Izaberite izvor podataka</p> + <p class="text-left text-overflow">Izaberite izvor podataka</p> </ng-template> </mat-step> <mat-step [completed]="experiment._id!=''"> <ng-template matStepLabel> - <span class="label addedElement" *ngIf="experiment._id!=''">Predvideti:{{experiment.outputColumn}}</span> + <span class="label addedElement text-overflow" *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> + <span class="label text-overflow" *ngIf="experiment._id==''">Odabir kolona </span> </ng-template> <ng-template matStepContent> - <p class="text-left">Pripremite podatke i izaberite izlazne kolone</p> + <p class="text-left text-overflow">Pripremite podatke i izaberite izlazne kolone</p> </ng-template> </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> + <span class="label addedElement text-overflow" *ngIf="modelToTrain!=undefined">{{modelToTrain.name}}</span> + <span class="label text-overflow" *ngIf="modelToTrain==undefined">Treniranje</span> </ng-template> - <p class="text-left">Odaberite parametre i trenirajte model</p> + <p class="text-left text-overflow">Odaberite parametre i trenirajte model</p> </mat-step> <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> + <span class="label text-overflow">Pregled rezultata<br> treniranja</span> </ng-template> - <p class="text-left">Pregledajte tok treniranja i<br> grafički prikaz rezultata</p> + <p class="text-left text-overflow">Pregledajte tok treniranja i<br> grafički prikaz rezultata</p> </mat-step> </mat-stepper> </div> diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 312b1af1..6c8e96b3 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,47 @@ 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) => { + 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); + }); + }); + } + }); } |