diff options
Diffstat (limited to 'frontend/src/app/_pages/experiment')
3 files changed, 57 insertions, 10 deletions
diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index aca0562a..36c35484 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -49,7 +49,7 @@ mat-stepper { } .step-content-inside { - width: 90%; - height: 90%; + width: 98%; + height: 98%; overflow-y: auto; }
\ 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 08d709b2..baae864e 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -1,4 +1,4 @@ -<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px);"> +<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px); text-align: center;"> <div class="d-flex flex-colum align-items-center sidenav"> <mat-stepper orientation="vertical" (selectionChange)="changePage($event)"> <mat-step> @@ -18,22 +18,31 @@ <ng-template matStepLabel><span class="label">Treniranje</span></ng-template> <p>Odaberite parametre i trenirajte model</p> </mat-step> + <mat-step> + <ng-template matStepLabel><span class="label">Pregled rezultata treniranja</span></ng-template> + <p>Pregledajte tok treniranja i grafički prikaz rezultata</p> + </mat-step> </mat-stepper> </div> <div #stepsContainer class="steps-container"> <div #steps id="step_1" class="step-content"> <div class="step-content-inside"> - <app-folder [type]="FolderType.Dataset" [tabsToShow]="[TabType.MyDatasets, TabType.PublicDatasets, TabType.File]" (okPressed)="goToPage(1)"></app-folder> + <app-folder #folderDataset [type]="FolderType.Dataset" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyDatasets, TabType.PublicDatasets]" (okPressed)="goToPage(1)" (selectedFileChanged)="setDataset($event)"></app-folder> </div> </div> <div #steps id="step_2" class="step-content"> <div class="step-content-inside"> - <app-column-table (okPressed)="goToPage(2)"></app-column-table> + <app-column-table (okPressed)="goToPage(2)" (columnTableChanged)="columnTableChangedEvent()" [experiment]="experiment" [dataset]="dataset"></app-column-table> </div> </div> <div #steps id="step_3" class="step-content"> <div class="step-content-inside"> - <app-folder [type]="FolderType.Model" [tabsToShow]="[TabType.MyModels, TabType.PublicModels, TabType.File]" (okPressed)="goToPage(0)"></app-folder> + <app-folder #folderModel [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyModels]" (okPressed)="goToPage(3)"></app-folder> + </div> + </div> + <div #steps id="step_4" class="step-content"> + <div class="step-content-inside"> + <app-metric-view></app-metric-view> </div> </div> </div> diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 70f941b6..28552664 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -1,9 +1,15 @@ -import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren, Input } from '@angular/core'; import { StepperSelectionEvent } from '@angular/cdk/stepper'; import { MatStepper } from '@angular/material/stepper'; import Shared from 'src/app/Shared'; -import { FolderType } from 'src/app/_data/FolderFile'; -import { TabType } from 'src/app/_elements/folder/folder.component'; +import { FolderFile, FolderType } from 'src/app/_data/FolderFile'; +import { FolderComponent, TabType } from 'src/app/_elements/folder/folder.component'; +import Experiment from 'src/app/_data/Experiment'; +import { ExperimentsService } from 'src/app/_services/experiments.service'; +import { ModelsService } from 'src/app/_services/models.service'; +import Model from 'src/app/_data/Model'; +import Dataset from 'src/app/_data/Dataset'; +import { ColumnTableComponent } from 'src/app/_elements/column-table/column-table.component'; @Component({ selector: 'app-experiment', @@ -17,8 +23,28 @@ export class ExperimentComponent implements AfterViewInit { @ViewChildren('steps') steps!: ElementRef[]; event: number = 0; + experiment: Experiment; + dataset?: Dataset; + @ViewChild("folderDataset") folderDataset!: FolderComponent; + @ViewChild("folderModel") folderModel!: FolderComponent; + @ViewChild(ColumnTableComponent) columnTable!: ColumnTableComponent; - constructor() { } + + constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService) { + this.experiment = new Experiment("exp1"); + } + + /*updateExperiment(){ + + }*/ + + addNewExperiment() { + this.experimentsService.addExperiment(this.experiment).subscribe(() => { console.log("new Experiment") }); + } + + trainModel() { + this.modelsService.trainModel((<Model>this.folderModel.selectedFile)._id, this.experiment._id).subscribe(() => { console.log("pocelo treniranje") }) + } stepHeight = this.calcStepHeight(); @@ -92,4 +118,16 @@ export class ExperimentComponent implements AfterViewInit { TabType = TabType; + columnTableChangedEvent() { + //sta se desi kad se nesto promeni u column-table komponenti... + console.log("promenio se column-table"); + } + + setDataset(dataset: FolderFile) { + const d = <Dataset>dataset; + this.experiment.datasetId = d._id; + this.dataset = d; + + this.columnTable.loadDataset(this.dataset); + } } |