diff options
Diffstat (limited to 'frontend')
8 files changed, 88 insertions, 45 deletions
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index 3ecba343..4a06faa4 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -1,7 +1,5 @@ #folder { - /*position: absolute; - left: 50%; - transform: translateX(-50%);*/ + width: 100%; } #tabs { @@ -167,12 +165,13 @@ align-items: center; flex-grow: 1; height: 100%; + padding: 50px; } .folder-inside { width: 100%; - height: 40rem; - overflow-y: auto; + min-height: 40rem; + max-height: 100%; } .file-content { diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index b09cb543..735bfdaa 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -434,7 +434,9 @@ export class FolderComponent implements AfterViewInit { updateExperiment() { if (this.formModel) { - this.formModel.updateGraph(); + setTimeout(() => { + this.formModel.updateGraph(); + }); } } diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css index 95ace1ef..34c1a5c5 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -86,12 +86,12 @@ hr { max-height: 20 rem; } -mat-slider { - width: 50%; -} - .slider { background-color: transparent; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } .center-center { @@ -102,3 +102,29 @@ mat-slider { font-size: 20px !important; font-weight: 600; } + +.slider-pad { + min-width: 10%; + background-color: gray; + height: 2px; +} + +.slider-pad:first-child { + margin-right: -8px; +} + +.slider-pad:last-child { + margin-left: -8px; +} + +.slider-extended { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 95%; +} + +.slide { + width: 80%; +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index 1b4eb834..c7a9d5ca 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -91,24 +91,33 @@ <div class="m-2"> <div class="row"> - <div class="col-sm-3 rounded" style="border:1px solid var(--ns-primary);margin-top: 10px;"> - <div class="row slider rounded" style="margin-left: 10px;margin-bottom: 0;"> + <div class="col-sm-3 rounded" style="border:1px solid var(--ns-primary);margin-top: 10px; width: fit-content;"> + <!-- <label>Veličina skupa za validaciju: </label><b>{{validationSize}} %</b> <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div> - <div class="text-center pt-0 mt-0 p-0">Trening - <mat-slider min="10" max="90" step="5" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider> - Test</div> - </div> - <div class="row p-0" style="margin-left: 10px;margin-bottom: 0; padding: 0;"> - <mat-checkbox color="accent">Nasumični redosled podataka</mat-checkbox> + <div class="text-center pt-0 mt-0 p-0">Trening ////slider////// Test</div> + --> + <div class="slider mt-2"> + <div> + Trening {{testSetDistribution}}% : Test i validacija {{100-testSetDistribution}}% + </div> + <div class="slider-extended"> + <div class="slider-pad"></div> + <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider> + <div class="slider-pad"></div> + </div> + <div> + Test {{validationSize}}% : Validacija {{100-validationSize}}% + </div> + <div class="slider-extended"> + <div class="slider-pad"></div> + <mat-slider class="slide" min="10" max="90" step="5" [(ngModel)]="validationSize" (input)="updateValidation($event)"></mat-slider> + <div class="slider-pad"></div> + </div> </div> - <hr style="color:accent;"> - <div class="row "> - <label>Veličina skupa za validaciju: </label><b>{{validationSize}} %</b> - <mat-slider class="text-center justify-content-center " style="margin-left:80px;" min="10" max="90" step="5" [(ngModel)]="validationSize" (input)="updateValidation($event)"></mat-slider> + <div class="d-flex justify-content-center mt-3"> + <mat-checkbox color="accent">Nasumični redosled podataka</mat-checkbox> </div> - - </div> <div class="col-sm-9"> diff --git a/frontend/src/app/_elements/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 35753d40..411e8b53 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,4 +1,4 @@ -<div #graphWrapper class="w-100 position-relative" style="height: 14rem;"> +<div #graphWrapper class="position-relative" style="height: 14rem; width: 100%;"> <!-- <ng-container *ngFor="let layer of layers; let i = index"> <div [ngClass]="{'inputs': i==0}" class="node-text" *ngFor="let node of layer; let j = index" [style.left.%]="node.x * 99.4" [style.top.%]="node.y * 100"> {{ i == 0 ? (inputColumns && inputColumns.length >= j ? inputColumns[j] : 'nepoznato') : (i > 0 && i diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index 4c063f87..2298ae48 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -36,12 +36,14 @@ mat-stepper { display: flex; flex-direction: column; width: 100%; + height: 100%; overflow-y: auto; } .step-content { position: relative; - width: 100%; + width: 98%; + min-height: 100%; display: flex; flex-direction: row; justify-content: center; @@ -51,17 +53,17 @@ mat-stepper { .step-content-inside { width: 98%; height: 98%; - overflow-y: auto; } -.ekspName{ + +.ekspName { font-weight: bold; font-size: large; } - -.addedElement{ - color:var(--ns-accent); +.addedElement { + color: var(--ns-accent); } + .text-overflow { 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 e521ce23..8f462f86 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -55,17 +55,17 @@ <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 #steps id="step_2" class="step-content" *ngIf="step1"> <div class="step-content-inside"> <app-column-table (okPressed)="goToPage(2); experiment._columnsSelected = true;" (columnTableChanged)="columnTableChangedEvent()" (experimentChanged)="experimentChangedEvent()" [experiment]="experiment" [dataset]="dataset"></app-column-table> </div> </div> - <div #steps id="step_3" class="step-content"> + <div #steps id="step_3" class="step-content" *ngIf="step2"> <div class="step-content-inside"> <app-folder #folderModel [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyModels]" (okPressed)="goToPage(3); trainModel();" (selectedFileChanged)="setModel($event)"></app-folder> </div> </div> - <div #steps id="step_4" class="step-content"> + <div #steps id="step_4" class="step-content" *ngIf="step3"> <div class="step-content-inside"> <app-metric-view #metricView></app-metric-view> </div> diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 9af2a305..312b1af1 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -34,15 +34,15 @@ export class ExperimentComponent implements AfterViewInit, OnInit { @ViewChild("folderModel") folderModel!: FolderComponent; @ViewChild("metricView") metricView!: MetricViewComponent; - step1:boolean=false; - //step2:boolean=false; - step3:boolean=false; - step4:boolean=false; + step1: boolean = false; + step2: boolean = false; + step3: boolean = false; + step4: boolean = false; constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private datasetsService: DatasetsService, 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"); @@ -73,7 +73,7 @@ export class ExperimentComponent implements AfterViewInit, OnInit { Shared.openDialog('Greška', 'Morate odabrati konfiguraciju neuronske mreže'); } else { this.modelsService.trainModel(this.modelToTrain._id, this.experiment._id).subscribe(() => { console.log("pocelo treniranje") }); - this.step4=true; + this.step4 = true; } } @@ -173,7 +173,10 @@ export class ExperimentComponent implements AfterViewInit, OnInit { } experimentChangedEvent() { - this.folderModel.updateExperiment(); + this.step2 = true; + setTimeout(() => { + this.folderModel.updateExperiment(); + }); } setDataset(dataset: FolderFile | null) { @@ -187,8 +190,10 @@ export class ExperimentComponent implements AfterViewInit, OnInit { this.experiment.datasetId = d._id; this.dataset = d; - this.columnTable.loadDataset(this.dataset); - this.step1=true; + this.step1 = true; + setTimeout(() => { + this.columnTable.loadDataset(d); + }); } modelToTrain?: Model; @@ -196,6 +201,6 @@ export class ExperimentComponent implements AfterViewInit, OnInit { setModel(model: FolderFile) { const m = <Model>model; this.modelToTrain = m; - this.step3=true; + this.step3 = true; } } |