From 7c0c09c94246441bca36d873769fc420feb00937 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Wed, 18 May 2022 20:49:57 +0200
Subject: 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.

---
 .../src/app/_elements/folder/folder.component.css  |  9 +++---
 .../src/app/_elements/folder/folder.component.ts   |  4 ++-
 .../_elements/form-model/form-model.component.css  | 34 +++++++++++++++++---
 .../_elements/form-model/form-model.component.html | 37 ++++++++++++++--------
 .../src/app/_elements/graph/graph.component.html   |  2 +-
 .../app/_pages/experiment/experiment.component.css | 16 ++++++----
 .../_pages/experiment/experiment.component.html    |  6 ++--
 .../app/_pages/experiment/experiment.component.ts  | 25 +++++++++------
 8 files changed, 88 insertions(+), 45 deletions(-)

(limited to 'frontend/src')

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;
   }
 }
-- 
cgit v1.2.3