Podesio korake eksperimenta tako da korisnik ne moze da skroluje do koraka koje nije otkljucao. Promenio slajdere za trening, test, validacione skupove tako da se vide minimumi od 10%. Popravio skrolove koji nisu trebali da se pojavljuju, i dimenzije nekih elemenata.

3 files changed, 27 insertions, 20 deletions

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;
   }
 }