Merge branch 'redesign' into 'master'

merge

See merge request igrannonica/neuronstellar!29

4 files changed, 24 insertions, 123 deletions

diff --git a/frontend/src/app/experiment/experiment.component.css b/frontend/src/app/experiment/experiment.component.css
deleted file mode 100644
index d84a897e..00000000
--- a/frontend/src/app/experiment/experiment.component.css
+++ /dev/null
@@ -1,48 +0,0 @@
-#header {
-    background-color: #003459;
-    padding-top: 30px;
-    padding-bottom: 20px;
-}
-
-#header h1 {
-    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
-    text-align: center;
-    color: white;
-}
-
-#container {
-    border-radius: 8px;
-}
-
-#wrapper {
-    color: #003459;
-}
-
-.btnType1 {
-    background-color: #003459;
-    color: white;
-}
-
-.btnType2 {
-    background-color: white;
-    color: #003459;
-    border-color: #003459;
-}
-
-.selectedDatasetClass {
-    /*border-color: 2px solid #003459;*/
-    background-color: lightblue;
-}
-
-ul li:hover {
-    background-color: lightblue;
-}
-
-h2 {
-    color: #003459;
-}
-
-.boldClass {
-    font-weight: bold;
-    font-size: 125%;
-}
\ No newline at end of file
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index 4bdd79b2..62236cce 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -4,15 +4,15 @@
 <div id="wrapper">
     <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
 
-        <div class="d-flex flex-row justify-content-center align-items-center my-3 links">
-            <a id="firstStep" href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" (click)="updateCarouselIndex(0);" [ngClass]="{'boldClass' : carouselIndex == 0}" style="text-decoration: none">Izvor podataka</a>
+        <div class="d-flex flex-row justify-content-center align-items-center my-3">
+            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="0">Izvor podataka</a>
             <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" (click)="updateCarouselIndex(1)" [ngClass]="{'boldClass' : carouselIndex == 1}" style="text-decoration: none">Preprocesiranje</a>
+            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1">Preprocesiranje</a>
             <mat-icon>arrow_forward</mat-icon>
-            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" (click)="updateCarouselIndex(2)" [ngClass]="{'boldClass' : carouselIndex == 2}" style="text-decoration: none">Dodaj eksperiment</a>
+            <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2">Dodaj eksperiment</a>
         </div>
 
-        <div id="carouselExampleControls" class="carousel px-5 mt-5" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false">
+        <div id="carouselExampleControls" class="carousel slide px-5 mt-5" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false">
             <div class="carousel-inner">
                 <div class="carousel-item active mt-2">
                     <h2 class="mb-5">1. Izvor podataka</h2>
@@ -63,10 +63,8 @@
                             <h3 class="mt-5">Popunjavanje nedostajućih vrednosti:</h3>
                             <div class="form-check" *ngIf="selectedDataset">
                                 <input type="radio" [(ngModel)]="experiment.nullValues " [value]="NullValueOptions.DeleteRows " class="form-check-input" value="deleteRows" name="fillMissing " id="delRows" checked data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
-                                <label *ngIf="selectedColumnsInfoArray.length == selectedDataset.columnInfo.length" for="delRows" class="form-check-label ">Obriši sve
-                            redove sa nedostajućim vrednostima ({{selectedDataset.nullRows}} od {{selectedDataset.rowCount}})</label>
-                                <label *ngIf="selectedColumnsInfoArray.length != selectedDataset.columnInfo.length" for="delRows" class="form-check-label ">Obriši sve
-                            redove sa nedostajućim vrednostima</label><br>
+                                <label for="delRows" class="form-check-label ">Obriši sve
+                            redove sa nedostajućim vrednostima ({{selectedDataset.nullRows}} od {{selectedDataset.rowCount}})</label><br>
                                 <input type="radio" [(ngModel)]="experiment.nullValues " [value]="NullValueOptions.DeleteColumns " class="form-check-input" value="deleteCols" name="fillMissing " id="delCols" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
                                 <label for="delCols" class="form-check-label ">Obriši sve
                             kolone sa nedostajućim vrednostima ({{countSelectedNullCols()}} od {{selectedDataset.columnInfo.length}})</label><br>
@@ -123,17 +121,13 @@
                                                         </div>
 
                                                         <div class="flex-shrink-1 mx-3">
-                                                            <div class="input-group" *ngIf="column.columnName != this.experiment.outputColumn">
+                                                            <div class="input-group">
                                                                 <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši
-                                                                kolonu
-                                                                <input type="radio" [id]="'delCol_'+column.columnName"
+                                                            kolonu
+                                                            <input type="radio" [id]="'delCol_'+column.columnName"
                                                                 [name]="'delOp_'+column.columnName"
-                                                                (change)="emptyFillTextInput(column.columnName)">
-                                                                </label>
+                                                                (change)="emptyFillTextInput(column.columnName)"></label>
                                                             </div>
-                                                            <label class="form-control text-secondary" role="alert" *ngIf="column.columnName == this.experiment.outputColumn">
-                                                                (Izlazna kolona)
-                                                            </label>
                                                         </div>
 
                                                         <div class="flex-shrink-1 mx-3">
@@ -213,7 +207,7 @@
                 </div>
 
                 <div class="carousel-item mt-2">
-                    <h2 class="mb-4">3. Dodaj eksperiment</h2>
+                    <h2 class="mb-4">3. Dodaj eskperiment</h2>
 
                     <div class="row">
                         <div class="col"></div>
@@ -248,11 +242,11 @@
 
             </div>
 
-            <div class="m-3 d-flex flex-row align-items-center" style=" margin-left: auto;">
-                <button class="me-auto" *ngIf="carouselIndex != 0" mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="prev" (click)="updateCarouselIndex(carouselIndex - 1)">
+            <div class="m-3 d-flex flex-row justify-content-between align-items-center" style=" margin-left: auto;">
+                <button mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                                 <mat-icon>arrow_backward</mat-icon>
                             </button>
-                <button class="ms-auto" *ngIf="carouselIndex != 2" mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="next" (click)="updateCarouselIndex(carouselIndex + 1)">
+                <button mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                                 <mat-icon>arrow_forward</mat-icon>
                             </button>
             </div>
diff --git a/frontend/src/app/experiment/experiment.component.spec.ts b/frontend/src/app/experiment/experiment.component.spec.ts
deleted file mode 100644
index fd2bbd30..00000000
--- a/frontend/src/app/experiment/experiment.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ExperimentComponent } from './experiment.component';
-
-describe('ExperimentComponent', () => {
-  let component: ExperimentComponent;
-  let fixture: ComponentFixture<ExperimentComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ExperimentComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ExperimentComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 64adce3f..2d0f6ec5 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -6,9 +6,6 @@ import { ModelsService } from '../_services/models.service';
 import Shared from '../Shared';
 import { ExperimentsService } from '../_services/experiments.service';
 import { ColumnEncoding } from '../_data/Experiment';
-import { Router } from '@angular/router';
-import { TrainingComponent } from '../training/training.component';
-import { NEVER, retryWhen } from 'rxjs';
 
 @Component({
   selector: 'app-experiment',
@@ -32,9 +29,8 @@ export class ExperimentComponent implements OnInit {
   selectedNotNullColumnsArray: string[] = [];
 
   tempTestSetDistribution = 90;
-  carouselIndex: number = 0;
 
-  constructor(private experimentsService: ExperimentsService, private router: Router) {
+  constructor(private modelsService: ModelsService, private experimentsService: ExperimentsService) {
   }
 
   ngOnInit(): void {
@@ -47,6 +43,7 @@ export class ExperimentComponent implements OnInit {
     this.experiment.outputColumn = this.selectedDataset.columnInfo[this.selectedDataset.columnInfo.length - 1].columnName;
 
     this.resetColumnEncodings();
+    console.log(this.experiment.encodings);
   }
 
   resetColumnEncodings() {
@@ -169,7 +166,7 @@ export class ExperimentComponent implements OnInit {
   }
 
   saveExperiment() {
-      if (this.selectedDataset == undefined) {
+    if (this.selectedDataset == undefined) {
       Shared.openDialog("Greška", "Izvor podataka nije izabran!");
       return;
     }
@@ -195,14 +192,16 @@ export class ExperimentComponent implements OnInit {
 
     this.experiment.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
 
-    //console.log("Eksperiment:", this.experiment);
+    console.log("Eksperiment:", this.experiment);
 
     this.experimentsService.addExperiment(this.experiment).subscribe((response) => {
       this.experiment = response;
 
-      Shared.openYesNoDialog("Obaveštenje", "Eksperiment je uspešno kreiran. Da li želite da pređete na treniranje modela?", () => {
-        this.router.navigate(['/training', this.experiment._id]);
-      });
+      this.selectedColumnsInfoArray = []; 
+      this.selectedNotNullColumnsArray = [];
+      this.experiment.encodings = [];
+
+      Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran.");
     }, (error) => {
       if (error.error == "Experiment with this name exists") {
         Shared.openDialog("Greška", "Eksperiment sa unetim nazivom već postoji u Vašoj kolekciji. Unesite neki drugi naziv.");
@@ -220,23 +219,4 @@ export class ExperimentComponent implements OnInit {
     }
     return counter;
   }
-
-  updateCarouselIndex(newIndex: number) {
-    if (newIndex > 2)
-      newIndex = 2;
-    else if (newIndex < 0)
-      newIndex = 0; 
-
-    if (this.carouselIndex == 0 && (newIndex == 1 || newIndex == 2))
-      this.checkRequiredData();
-    this.carouselIndex = newIndex;
-  }
-
-  checkRequiredData() {
-      if (this.selectedDataset == undefined) {
-        (<HTMLAnchorElement>document.getElementById("firstStep")).click();
-        Shared.openDialog("Pažnja", "Potrebno je da dodate ili izabere izvor podataka kako biste prešli na naredni korak (preprocesiranje).");
-        return;
-      }
-  }
 }