diff options
Diffstat (limited to 'frontend/src/app/experiment')
| -rw-r--r-- | frontend/src/app/experiment/experiment.component.html | 129 | ||||
| -rw-r--r-- | frontend/src/app/experiment/experiment.component.ts | 57 |
2 files changed, 125 insertions, 61 deletions
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html index 42797579..36cf9eda 100644 --- a/frontend/src/app/experiment/experiment.component.html +++ b/frontend/src/app/experiment/experiment.component.html @@ -13,7 +13,7 @@ </div> <div id="carouselExampleControls" class="carousel slide" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false"> - <div class="carousel-inner border"> + <div class="carousel-inner"> <div class="carousel-item active"> <h2>1. Izvor podataka</h2> <app-dataset-load (selectedDatasetChangeEvent)="updateDataset($event)"></app-dataset-load> @@ -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"> + [checked]="experiment.outputColumn != item.columnName" + [disabled]="experiment.outputColumn == item.columnName" + (click)="checkedColumnsChanged(item, 0)"> <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"> + <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);"> <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}} <span class="small" style="color:gray;">({{column.numNulls}} - null) + {{column.columnName}} <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: + <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..8a1b7d70 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 { @@ -36,12 +39,7 @@ export class ExperimentComponent implements OnInit { this.selectedDataset = dataset; this.selectedColumnsInfoArray = this.selectedDataset.columnInfo; this.selectedNullColumnsArray = []; - console.log("array:", this.selectedColumnsInfoArray); - } - - updateModel(model: Model) { - //console.log(model); - this.selectedModel = model; + //console.log("array:", this.selectedColumnsInfoArray); } getInputById(id: string): HTMLInputElement { @@ -71,9 +69,9 @@ export class ExperimentComponent implements OnInit { checkedColumnsChanged(checkedColumnInfo: ColumnInfo, buttonType: number) { //0-input,1-output let col = this.selectedColumnsInfoArray.find(x => x.columnName == checkedColumnInfo.columnName); if (buttonType == 0) { //inputCol - if (col == undefined) + if (col == undefined) this.selectedColumnsInfoArray.push(checkedColumnInfo); - else + else this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.columnName != checkedColumnInfo.columnName); } else { //outputCol @@ -81,7 +79,7 @@ export class ExperimentComponent implements OnInit { this.selectedColumnsInfoArray.push(checkedColumnInfo); } //console.log(this.selectedColumnsInfoArray); - } + } replace(event: Event, column: ColumnInfo) { let option = (<HTMLInputElement>event.target).value; @@ -170,21 +168,24 @@ export class ExperimentComponent implements OnInit { Shared.openDialog("Greška", "Molimo Vas da izaberete ulazne kolone."); return; } - + this.experiment._id = ''; this.experiment.uploaderId = ''; this.experiment.datasetId = this.selectedDataset._id; - + let pom = this.selectedColumnsInfoArray.filter(x => x.columnName != this.experiment.outputColumn); 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(); - console.log("Eksperiment:", this.experiment); - + this.experiment.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10; + + //console.log("Eksperiment:", this.experiment); + this.experimentsService.addExperiment(this.experiment).subscribe((response) => { this.experiment = response; @@ -193,25 +194,9 @@ export class ExperimentComponent implements OnInit { Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran."); }, (error) => { - - }); - } - - trainModel() { - this.trainingResult = undefined; - //console.log('Training model...', this.selectedModel); - if (!this.selectedDataset) { - Shared.openDialog('Greška', 'Izvor podataka nije izabran!'); - return; - } - // TODO proveri nullValues - if (!this.selectedModel) { - Shared.openDialog('Greška', 'Model nije izabran!'); - return; - } - this.modelsService.trainModel(this.selectedModel).subscribe((response: any) => { - console.log('Train model complete!', response); - this.trainingResult = response; + 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."); + } }); } } |