diff options
Diffstat (limited to 'frontend/src/app/experiment')
| -rw-r--r-- | frontend/src/app/experiment/experiment.component.html | 255 | ||||
| -rw-r--r-- | frontend/src/app/experiment/experiment.component.ts | 222 |
2 files changed, 477 insertions, 0 deletions
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html new file mode 100644 index 00000000..62236cce --- /dev/null +++ b/frontend/src/app/experiment/experiment.component.html @@ -0,0 +1,255 @@ +<div id="header"> + <h1>Napravite svoju veštačku neuronsku mrežu</h1> +</div> +<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"> + <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">Preprocesiranje</a> + <mat-icon>arrow_forward</mat-icon> + <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2">Dodaj eksperiment</a> + </div> + + <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> + <app-dataset-load (selectedDatasetChangeEvent)="updateDataset($event)"></app-dataset-load> + </div> + + <div class="carousel-item mt-2"> + <h2 class="mb-4">2. Preprocesiranje</h2> + + <div class="px-5"> + <h3>Biranje ulaznih i izlaznih kolona:</h3> + <div *ngIf="selectedDataset"> + <div class="row"> + <div class="col d-flex justify-content-center"> + <h3>Izaberite ulazne kolone:</h3> + <div id="divInputs" class="form-check mt-2"> + <br> + <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]="experiment.outputColumn != item.columnName" [disabled]="experiment.outputColumn == item.columnName" (change)="checkedColumnsChanged(item, 0); resetColumnEncodings();"> + <label class="form-check-label" for="cb_{{item.columnName}}"> + {{item.columnName}} + </label> + </div> + </div> + </div> + <div class="col d-flex justify-content-left"> + <h3>Izaberite izlaznu kolonu:</h3> + <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" [(ngModel)]="this.experiment.outputColumn" (change)="experiment.outputColumn = item.columnName; checkedColumnsChanged(item, 1); resetColumnEncodings();" + checked> + <label class="form-check-label" for="rb_{{item.columnName}}"> + {{item.columnName}} + </label> + </div> + </div> + </div> + </div> + </div> + + + <div class="mt-5 mb-3 mx-3" *ngIf="countSelectedNullCols() == 0"> + <h3 class="border p-2 text-center"><i>Izabrane kolone nemaju nedostajuće vrednosti koje možete popuniti.</i></h3> + </div> + + <div *ngIf="countSelectedNullCols() != 0"> + <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 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> + <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="getSelectedColumnsArrayWithoutNullVals().length> 0"> + <label class="text-center form-control mx-3 text-secondary"> + Kolone <span style="font-style: italic;" *ngFor="let colname of getSelectedColumnsArrayWithoutNullVals(); let i = index"> + <span *ngIf="i != getSelectedColumnsArrayWithoutNullVals().length - 1">{{colname}}, </span> + <span *ngIf="i == getSelectedColumnsArrayWithoutNullVals().length - 1">{{colname}} </span> + </span> + nemaju nedostajućih vrednosti za popunjavanje. + </label> + </div> + <div id="columnReplacers"> + <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)</span> + </span> + + <div class="d-flex flex-row justify-content-end"> + <div class="flex-grow-3 mx-3 me-auto"> + <div class="input-group"> + <div class="input-group-prepend"> + <label [for]="'fillCol_'+column.columnName" class="form-control"> + Zameni + <input type="radio" [id]="'fillCol_'+column.columnName" + [name]="'delOp_'+column.columnName"> + </label> + </div> + <input type="text" class="form-control" [id]="'fillText_'+column.columnName" (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); 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" *ngIf="!column.isNumber && column.numNulls > 0" (change)="replace($event, column); checkFillColRadio(column.columnName);"> + <option *ngFor="let option of column.uniqueValues" [value]="option"> + {{ option }} + </option> + </select> + </div> + </div> + </div> + + <div class="flex-shrink-1 mx-3"> + <div class="input-group"> + <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši + kolonu + <input type="radio" [id]="'delCol_'+column.columnName" + [name]="'delOp_'+column.columnName" + (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 + redove + <input type="radio" [id]="'delRows_'+column.columnName" + [name]="'delOp_'+column.columnName" checked + (change)="emptyFillTextInput(column.columnName)"></label> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + </div> + + <div id="randomOptions" class="mt-5"> + <div class="p-2 m-2"> + <label for="type" class="form-check-label">Želite li da redosled podataka bude nasumičan?</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 m-2"> + <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening + skup:</label> + <input id="percentage" type="number" class="form-control mx-3" style=" max-width: 15%" min="10" max="90" step="10" value="90" [(ngModel)]="tempTestSetDistribution" [disabled]="!experiment.randomTestSet"> + </div> + </div> + </div> + + <div id="encodingsForColumns" class="px-3 my-5"> + <label for="encoding" class="col-form-label mb-2">Enkoding za izabrane kolone:</label> + + <div class="row d-flex flex-row justify-content-between align-items-center"> + <div class="col-5" *ngFor="let item of [].constructor(selectedColumnsInfoArray.length); let i = index"> + <div class="input-group mb-2"> + <div class="input-group-prepend"> + <span class="input-group-text">{{selectedColumnsInfoArray[i].columnName}}</span> + </div> + <select [id]="'encodingOption_'+i" class="form-select" [(ngModel)]="experiment.encodings[i].encoding"> + <option + *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + </div> + </div> + </div> + + </div> + + + </div> + + <div class="carousel-item mt-2"> + <h2 class="mb-4">3. Dodaj eskperiment</h2> + + <div class="row"> + <div class="col"></div> + <div class="col-8"> + <label for="name" class="col-form-label">Naziv eksperimenta:</label> + <input type="text" class="form-control mb-3" 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> + <label for="desc" class="col-sm-2 col-form-label mt-3">Tip problema:</label> + <div class="col-4"> + <select id="typeOptions" class="form-select" name="type" [(ngModel)]="experiment.type"> + <option + *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + <div class="form-group row mt-5 mb-3"> + <div class="col"></div> + <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="saveExperiment();">Sačuvaj + eksperiment</button> + <div class="col"></div> + </div> + </div> + <div class="col"></div> + </div> + </div> + + </div> + + <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 mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="next"> + <mat-icon>arrow_forward</mat-icon> + </button> + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts new file mode 100644 index 00000000..2d0f6ec5 --- /dev/null +++ b/frontend/src/app/experiment/experiment.component.ts @@ -0,0 +1,222 @@ +import { Component, OnInit } from '@angular/core'; +import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith, Encoding } from '../_data/Experiment'; +import Model,{ProblemType} from '../_data/Model'; +import Dataset, { ColumnInfo } from '../_data/Dataset'; +import { ModelsService } from '../_services/models.service'; +import Shared from '../Shared'; +import { ExperimentsService } from '../_services/experiments.service'; +import { ColumnEncoding } from '../_data/Experiment'; + +@Component({ + selector: 'app-experiment', + templateUrl: './experiment.component.html', + styleUrls: ['./experiment.component.css'] +}) +export class ExperimentComponent implements OnInit { + + experiment: Experiment = new Experiment(); + selectedModel?: Model; + selectedDataset?: Dataset; + trainingResult: any; // any za sad, promeni kasnije + + NullValueOptions = NullValueOptions; + ReplaceWith = ReplaceWith; + Encoding = Encoding; + ColumnEncoding = ColumnEncoding; + Object = Object; + ProblemType=ProblemType; + selectedColumnsInfoArray: ColumnInfo[] = []; + selectedNotNullColumnsArray: string[] = []; + + tempTestSetDistribution = 90; + + constructor(private modelsService: ModelsService, private experimentsService: ExperimentsService) { + } + + ngOnInit(): void { + } + + updateDataset(dataset: Dataset) { + this.selectedDataset = dataset; + this.selectedColumnsInfoArray = this.selectedDataset.columnInfo; + this.selectedNotNullColumnsArray = []; + this.experiment.outputColumn = this.selectedDataset.columnInfo[this.selectedDataset.columnInfo.length - 1].columnName; + + this.resetColumnEncodings(); + console.log(this.experiment.encodings); + } + + resetColumnEncodings() { + this.experiment.encodings = []; + for (let i = 0; i < this.selectedColumnsInfoArray.length; i++) { + this.experiment.encodings.push(new ColumnEncoding(this.selectedColumnsInfoArray[i].columnName, Encoding.Label)); + } + } + + getInputById(id: string): HTMLInputElement { + return document.getElementById(id) as HTMLInputElement; + } + + arrayColumn = (arr: any[][], n: number) => [...this.dropEmptyString(new Set(arr.map(x => x[n])))]; + + dropEmptyString(set: Set<any>): Set<string> { + if (set.has("")) + set.delete(""); + if (set.has(null)) + set.delete(null); + if (set.has(undefined)) + set.delete(undefined); + return set; + } + + emptyFillTextInput(colName: string) { + (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = ""; + } + + checkFillColRadio(colName: string) { + (<HTMLInputElement>document.getElementById("fillCol_" + colName)).checked = true; + } + + 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) + this.selectedColumnsInfoArray.push(checkedColumnInfo); + else + this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.columnName != checkedColumnInfo.columnName); + } + else { //outputCol + if (col == undefined) //ako je vec cekiran neki output, samo dodaj sad ovaj, a taj output postaje input i ostaje u nizu + this.selectedColumnsInfoArray.push(checkedColumnInfo); + } + //console.log(this.selectedColumnsInfoArray); + } + + replace(event: Event, column: ColumnInfo) { + let option = (<HTMLInputElement>event.target).value; + + const input = (<HTMLInputElement>document.getElementById("fillText_" + column.columnName)); + if (column.isNumber) { + switch (option) { + case ReplaceWith.Max: + input.value = "" + column.max; + break; + case ReplaceWith.Min: + input.value = "" + column.min; + break; + case ReplaceWith.Mean: + input.value = "" + column.mean; + break; + case ReplaceWith.Median: + input.value = "" + column.median; + break; + case ReplaceWith.None: + break; + } + } else { + input.value = option; + } + } + + getSelectedColumnsArrayWithoutNullVals(): string[] { + let colNames: string[] = []; + + for (let i = 0; i < this.selectedColumnsInfoArray.length; i++) { + let oneColInfo = this.selectedColumnsInfoArray[i]; + if (oneColInfo.numNulls == 0) + colNames.push(oneColInfo.columnName); + } + return colNames; + } + + getNullValuesReplacersArray(): NullValReplacer[] { + let array: NullValReplacer[] = []; + + if (this.experiment.nullValues == NullValueOptions.Replace) { + + for (let i = 0; i < this.selectedColumnsInfoArray.length; i++) { + let oneColInfo = this.selectedColumnsInfoArray[i]; + + if (oneColInfo.numNulls > 0) { //ako kolona nema null vrednosti, ne dodajemo je u niz + if ((<HTMLInputElement>document.getElementById("delCol_" + oneColInfo.columnName)).checked) { + array.push({ + column: oneColInfo.columnName, + option: NullValueOptions.DeleteColumns, + value: "" + }); + } + else if ((<HTMLInputElement>document.getElementById("delRows_" + oneColInfo.columnName)).checked) { + array.push({ + column: oneColInfo.columnName, + option: NullValueOptions.DeleteRows, + value: "" + }); + } + else if (((<HTMLInputElement>document.getElementById("fillCol_" + oneColInfo.columnName)).checked)) { + array.push({ + column: oneColInfo.columnName, + option: NullValueOptions.Replace, + value: (<HTMLInputElement>document.getElementById("fillText_" + oneColInfo.columnName)).value + }); + } + } + } + } + return array; + } + + saveExperiment() { + if (this.selectedDataset == undefined) { + Shared.openDialog("Greška", "Izvor podataka nije izabran!"); + return; + } + if (this.experiment.outputColumn == '') { + Shared.openDialog("Greška", "Molimo Vas da izaberete izlaznu kolonu."); + return; + } + if (this.selectedColumnsInfoArray.length <= 1) { //jer izlazna je izabrana + 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); //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) => { + this.experiment = response; + + 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."); + } + }); + } + + countSelectedNullCols(): number { + let counter: number = 0; + + for (let i = 0; i < this.selectedColumnsInfoArray.length; i++) { + let oneColInfo = this.selectedColumnsInfoArray[i]; + if (oneColInfo.numNulls > 0) + ++counter; + } + return counter; + } +} |