"Napravi eskperiment" stranica podesena da radi. Biranje/dodavanje dataseta -> preprocesiranje -> cuvanje eskperimenta

6 files changed, 153 insertions, 114 deletions

diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts
index a5aad218..453f6ca0 100644
--- a/frontend/src/app/_data/Experiment.ts
+++ b/frontend/src/app/_data/Experiment.ts
@@ -2,7 +2,7 @@ export default class Experiment {
     _id: string = '';
     uploaderId: string = '';
     constructor(
-        public name: string = 'Novi experiment',
+        public name: string = 'Novi eksperiment',
         public description: string = '',
         public datasetId: string = '',
         public inputColumns: string[] = [],
@@ -10,7 +10,16 @@ export default class Experiment {
         public nullValues: NullValueOptions = NullValueOptions.DeleteRows,
         public nullValuesReplacers: NullValReplacer[] = [],
         public dateCreated: Date = new Date(),
-        public lastUpdated: Date = new Date()
+        public lastUpdated: Date = new Date(),
+        public modelIds: string[] = [],
+
+        // Test set settings
+        public randomOrder: boolean = true,
+        public randomTestSet: boolean = true,
+        public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U
+
+        //TODO - za svaku kolonu se bira enkoding
+        public encoding: Encoding = Encoding.Label
     ) { }
 }
 
@@ -32,4 +41,28 @@ export class NullValReplacer {
     "column": string;
     "option": NullValueOptions;
     "value": string;
+}
+
+export enum Encoding {
+    Label = 'label',
+    OneHot = 'onehot',
+    Ordinal = 'ordinal',
+    Hashing = 'hashing',
+    Binary = 'binary',
+    BaseN = 'baseN'
+    /*
+    BackwardDifference = 'backward difference',
+    CatBoost = 'cat boost',
+    Count = 'count',
+    GLMM = 'glmm',
+    Target = 'target',
+    Helmert = 'helmert',
+    JamesStein = 'james stein',
+    LeaveOneOut = 'leave one out',
+    MEstimate = 'MEstimate',
+    Sum = 'sum',
+    Polynomial = 'polynomial',
+    WOE = 'woe',
+    Quantile = 'quantile'
+    */
 }
\ No newline at end of file
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 9ea437b1..8a85e296 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -7,16 +7,10 @@ export default class Model {
         public description: string = '',
         public dateCreated: Date = new Date(),
         public lastUpdated: Date = new Date(),
-        public experimentId: string = '',
-
-        // Test set settings
-        public randomOrder: boolean = true,
-        public randomTestSet: boolean = true,
-        public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U
+        //public experimentId: string = '',
 
         // Neural net training settings
         public type: ProblemType = ProblemType.Regression,
-        public encoding: Encoding = Encoding.Label,
         public optimizer: Optimizer = Optimizer.Adam,
         public lossFunction: LossFunction = LossFunction.MeanSquaredError,
         public inputNeurons: number = 1,
@@ -39,29 +33,6 @@ export enum ProblemType {
 
 // replaceMissing srednja vrednost mean, median, najcesca vrednost (mode)
 // removeOutliers
-export enum Encoding {
-    Label = 'label',
-    OneHot = 'onehot',
-    Ordinal = 'ordinal',
-    Hashing = 'hashing',
-    Binary = 'binary',
-    BaseN = 'baseN'
-    /*
-    BackwardDifference = 'backward difference',
-    CatBoost = 'cat boost',
-    Count = 'count',
-    GLMM = 'glmm',
-    Target = 'target',
-    Helmert = 'helmert',
-    JamesStein = 'james stein',
-    LeaveOneOut = 'leave one out',
-    MEstimate = 'MEstimate',
-    Sum = 'sum',
-    Polynomial = 'polynomial',
-    WOE = 'woe',
-    Quantile = 'quantile'
-    */
-}
 
 export enum ActivationFunction {
     // linear
diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html
index 0923c895..833b7181 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ b/frontend/src/app/_elements/model-load/model-load.component.html
@@ -85,18 +85,6 @@
             <div class="row p-2">
                 <div class="col-1">
                 </div>
-                <div class="col-3">
-                    <label for="encoding" class="col-form-label">Enkoding: </label>
-                </div>
-                <div class="col-2">
-                    <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="newModel.encoding">
-                        <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-
                 <div class="col-1">
                 </div>
                 <div class="col-3">
@@ -149,43 +137,6 @@
                     </select>
                 </div>
                 <div class="col-1"></div>
-                <div class="col-3 mt-2">
-                    <label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
-                    <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="newModel.randomOrder"
-                        type="checkbox" value="" checked>
-                </div>
-            </div>
-            <div class="border m-3">
-                <div class="row p-2 m-2">
-                    <div class="col-4">
-                        <label for="splitYesNo" class="form-check-label">
-                            <h3>Podela test skupa:&nbsp;&nbsp;
-                                <input id="splitYesNo" class="form-check-input" type="checkbox"
-                                    [checked]="newModel.randomTestSet"
-                                    (change)="newModel.randomTestSet = !newModel.randomTestSet">
-                            </h3>
-                        </label>
-                    </div>
-                    <div class="col-8">
-                        trening
-                        <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10"
-                            name="randomTestSetDistribution" thumbLabel [disabled]="!newModel.randomTestSet"
-                            [(ngModel)]="tempTestSetDistribution">
-                        </mat-slider>
-                        test
-                    </div>
-                </div>
-
-                <div class="row p-2 mx-2">
-                    <div class="col-4">
-                        <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
-                            skup:</label>
-                    </div>
-                    <div class="col-2">
-                        <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
-                            [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet">
-                    </div>
-                </div>
             </div>
             <h3>Aktivacione funkcije:</h3>
 
diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts
index ca6b8ea5..abf19d75 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ b/frontend/src/app/_elements/model-load/model-load.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
 import Shared from 'src/app/Shared';
-import Model, { ActivationFunction, Encoding, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
+import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
 import { ModelsService } from 'src/app/_services/models.service';
 import { GraphComponent } from '../graph/graph.component';
 
@@ -20,7 +20,6 @@ export class ModelLoadComponent implements OnInit {
   selectedModel?: Model;
 
   ProblemType = ProblemType;
-  Encoding = Encoding;
   ActivationFunction = ActivationFunction;
   metrics: any = Metrics;
   LossFunction = LossFunction;
@@ -32,7 +31,6 @@ export class ModelLoadComponent implements OnInit {
   term: string = "";
   selectedProblemType: string = '';
   selectedMetrics = [];
-  tempTestSetDistribution = 90;
   lossFunction: any = LossFunction;
 
   showMyModels: boolean = true;
@@ -64,7 +62,6 @@ export class ModelLoadComponent implements OnInit {
   uploadModel() {   //console.log(this.selectedModel);
     this.getMetrics();
 
-    this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
     this.newModel.username = Shared.username;
 
     this.modelsService.addModel(this.newModel).subscribe((response) => {
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index 42797579..6020cab5 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -21,7 +21,16 @@
 
             <div class="carousel-item">
                 <h2>2. Preprocesiranje</h2>
-                <h3>Biranje ulaznih i izlaznih kolona:</h3>
+
+                <label for="name" class="col-form-label">Naziv eksperimenta:</label>
+                <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="experiment.name">
+
+                <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+                <div>
+                    <textarea class="form-control" name="desc" rows="3" [(ngModel)]="experiment.description"></textarea>
+                </div>
+
+                <h3 class="mt-3">Biranje ulaznih i izlaznih kolona:</h3>
                 <div *ngIf="selectedDataset">
                     <div class="row">
                         <div class="col d-flex justify-content-center">
@@ -31,8 +40,9 @@
                                 <div *ngFor="let item of selectedDataset.columnInfo; let i = index">
                                     <input class="form-check-input" type="checkbox" value="{{item.columnName}}"
                                         id="cb_{{item.columnName}}" name="cbsNew"
-                                        [checked]="this.selectedOutputColumnVal != item.columnName"
-                                        [disabled]="this.selectedOutputColumnVal == item.columnName">&nbsp;
+                                        [checked]="experiment.outputColumn != item.columnName"
+                                        [disabled]="experiment.outputColumn == item.columnName"
+                                        (click)="checkedColumnsChanged(item, 0)">&nbsp;
                                     <label class="form-check-label" for="cb_{{item.columnName}}">
                                         {{item.columnName}}
                                     </label>
@@ -44,8 +54,11 @@
                             <div id="divOutputs" class="form-check mt-2">
                                 <br>
                                 <div *ngFor="let item of selectedDataset.columnInfo; let i = index">
-                                    <input class="form-check-input" type="radio" value="{{item.columnName}}" id="rb_{{item.columnName}}"
-                                        name="rbsNew" (change)="this.selectedOutputColumnVal = item.columnName">&nbsp;
+                                    <input class="form-check-input" type="radio" value="{{item.columnName}}"
+                                        id="rb_{{item.columnName}}" name="rbsNew"
+                                        [(ngModel)]="this.experiment.outputColumn"
+                                        (change)="experiment.outputColumn = item.columnName"
+                                        (click)="checkedColumnsChanged(item, 1);">&nbsp;
                                     <label class="form-check-label" for="rb_{{item.columnName}}">
                                         {{item.columnName}}
                                     </label>
@@ -54,11 +67,12 @@
                         </div>
                     </div>
                 </div>
+                <br>
                 <h3>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">
+                        class="form-check-input" value="deleteRows" name="fillMissing" id="delRows" checked
+                        data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show">
                     <label for="delRows" class="form-check-label">Obriši sve
                         redove sa nedostajućim vrednostima ({{selectedDataset.nullRows}} / TODO)</label><br>
                     <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.DeleteColumns"
@@ -66,29 +80,38 @@
                         data-bs-target="#fillMissingCustom.show">
                     <label for="delCols" class="form-check-label">Obriši sve
                         kolone sa nedostajućim vrednostima ({{selectedDataset.nullCols}} / TODO)</label><br>
-                    <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace" class="form-check-input"
-                        name="fillMissing" id="replace" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom:not(.show)">
+                    <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace"
+                        class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse"
+                        data-bs-target="#fillMissingCustom:not(.show)">
                     <label for="replace" class="form-check-label">Izabraću
                         vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br>
                     <div class="collapse" id="fillMissingCustom">
                         <div>
                             <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
+                            <div class="my-3" *ngIf="getSelectedNullColumnsArray().length > 0" >
+                                <label class="text-center form-control mx-3 text-secondary">
+                                    Kolone <span style="font-style: italic;" *ngFor="let colname of getSelectedNullColumnsArray(); let i = index">
+                                        <span *ngIf="i != getSelectedNullColumnsArray().length - 1">{{colname}}, </span> 
+                                        <span *ngIf="i == getSelectedNullColumnsArray().length - 1">{{colname}} </span> 
+                                    </span>
+                                    nemaju nedostajućih vrednosti za popunjavanje.
+                                </label>
+                            </div>
                             <div id="columnReplacers">
-                                <div *ngFor="let column of selectedDataset.columnInfo; let i = index" class="my-3">
-                                    <div *ngIf="getInputById('cb_'+column.columnName).checked || selectedOutputColumnVal == column.columnName"
-                                        class="">
+                                <div *ngFor="let column of selectedColumnsInfoArray; let i = index" class="my-3">
+                                    <div *ngIf="column.numNulls > 0">
                                         <span class="w-20 mx-3">
-                                            {{column.columnName}}&nbsp;<span class="small" style="color:gray;">({{column.numNulls}}
-                                                null)
+                                            {{column.columnName}}&nbsp;<span class="small" style="color:gray;">({{column.numNulls}} null)
                                             </span>
                                         </span>
-                
-                                        <label *ngIf="column.numNulls <= 0" class="text-center form-control mx-3 text-secondary">
+
+                                        <label *ngIf="column.numNulls <= 0"
+                                            class="text-center form-control mx-3 text-secondary">
                                             Ova kolona nema
                                             nedostajućih
                                             vrednosti.
                                         </label>
-                
+
                                         <div *ngIf="column.numNulls > 0" class="d-flex flex-row justify-content-end">
                                             <div class="flex-grow-3 mx-3 me-auto">
                                                 <div class="input-group">
@@ -100,20 +123,22 @@
                                                         </label>
                                                     </div>
                                                     <input type="text" class="form-control" [id]="'fillText_'+column.columnName"
-                                                        (keyup)="checkFillColRadio(column.columnName)" placeholder="Unesi vrednost...">
-                
+                                                        (keyup)="checkFillColRadio(column.columnName)"
+                                                        placeholder="Unesi vrednost...">
+
                                                     <div class="input-group-append">
                                                         <select [id]="'replaceOptions'+i" class="form-control btn-primary"
-                                                            *ngIf="column.isNumber" (change)="replace($event, column);">
+                                                            *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);">
                                                             <option
                                                                 *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
                                                                 [value]="option">
                                                                 {{ optionName }}
                                                             </option>
                                                         </select>
-                                                        <select [id]="'replaceOptions'+i" class="form-control btn-outline-primary"
+                                                        <select [id]="'replaceOptions'+i"
+                                                            class="form-control btn-outline-primary"
                                                             *ngIf="!column.isNumber && column.numNulls > 0"
-                                                            (change)="replace($event, column);">
+                                                            (change)="replace($event, column); checkFillColRadio(column.columnName);">
                                                             <option *ngFor="let option of column.uniqueValues" [value]="option">
                                                                 {{ option }}
                                                             </option>
@@ -121,7 +146,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                
+
                                             <div class="flex-shrink-1 mx-3">
                                                 <div class="input-group">
                                                     <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši
@@ -131,7 +156,7 @@
                                                             (change)="emptyFillTextInput(column.columnName)"></label>
                                                 </div>
                                             </div>
-                
+
                                             <div class="flex-shrink-1 mx-3">
                                                 <div class="input-group">
                                                     <label class="form-control" [for]="'delRows_'+column.columnName">Izbriši
@@ -196,6 +221,60 @@
                     </div>
                 </div>
 
+                <div id="randomOptions">
+                    <div class="col-3 mt-2">
+                        <label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
+                        <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="experiment.randomOrder"
+                            type="checkbox" value="" checked>
+                    </div>
+                    <div class="border m-3">
+                        <div class="row p-2 m-2">
+                            <div class="col-4">
+                                <label for="splitYesNo" class="form-check-label">
+                                    <h3>Podela test skupa:&nbsp;&nbsp;
+                                        <input id="splitYesNo" class="form-check-input" type="checkbox"
+                                            [checked]="experiment.randomTestSet"
+                                            (change)="experiment.randomTestSet = !experiment.randomTestSet">
+                                    </h3>
+                                </label>
+                            </div>
+                            <div class="col-8">
+                                trening
+                                <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10"
+                                    name="randomTestSetDistribution" thumbLabel [disabled]="!experiment.randomTestSet"
+                                    [(ngModel)]="tempTestSetDistribution">
+                                </mat-slider>
+                                test
+                            </div>
+                        </div>
+        
+                        <div class="row p-2 mx-2">
+                            <div class="col-4">
+                                <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
+                                    skup:</label>
+                            </div>
+                            <div class="col-2">
+                                <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
+                                    [(ngModel)]="tempTestSetDistribution" [disabled]="!experiment.randomTestSet">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div id="encodingForColumns">
+                    <div class="col-3">
+                        <label for="encoding" class="col-form-label">Enkoding: </label>
+                    </div>
+                    <div class="col-2">
+                        <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="experiment.encoding">
+                            <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+                                [value]="option">
+                                {{ optionName }}
+                            </option>
+                        </select>
+                    </div>
+                </div>
+
 
             </div>
 
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 7ccca528..74ee9ee7 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith } from '../_data/Experiment';
+import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith, Encoding } from '../_data/Experiment';
 import Model from '../_data/Model';
 import Dataset, { ColumnInfo } from '../_data/Dataset';
 import { ModelsService } from '../_services/models.service';
@@ -20,12 +20,15 @@ export class ExperimentComponent implements OnInit {
 
   NullValueOptions = NullValueOptions;
   ReplaceWith = ReplaceWith;
+  Encoding = Encoding;
   Object = Object;
 
   selectedColumnsInfoArray: ColumnInfo[] = [];
-  selectedOutputColumnVal: string = '';
+  //selectedOutputColumnVal: string = '';
   selectedNullColumnsArray: string[] = [];
 
+  tempTestSetDistribution = 90;
+
   constructor(private modelsService: ModelsService, private experimentsService: ExperimentsService) { }
 
   ngOnInit(): void {
@@ -179,10 +182,13 @@ export class ExperimentComponent implements OnInit {
     for (let i = 0; i < pom.length; i++)
       this.experiment.inputColumns.push(pom[i].columnName);
 
-    this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.numNulls > 0);
-    //TREBAJU MI NULLVALUESREPLACERI  
+    //this.experiment.outputColumn = this.selectedOutputColumnVal;
+
+    this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.numNulls > 0); //obavezno
     this.experiment.nullValuesReplacers = this.getNullValuesReplacersArray();
 
+    this.experiment.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
+
     console.log("Eksperiment:", this.experiment);
     
     this.experimentsService.addExperiment(this.experiment).subscribe((response) => {
@@ -193,7 +199,9 @@ export class ExperimentComponent implements OnInit {
 
       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.");
+      }
     });
   }