diff options
Diffstat (limited to 'frontend/src/app/_pages')
| -rw-r--r-- | frontend/src/app/_pages/add-model/add-model.component.html | 130 | ||||
| -rw-r--r-- | frontend/src/app/_pages/add-model/add-model.component.ts | 70 |
2 files changed, 105 insertions, 95 deletions
diff --git a/frontend/src/app/_pages/add-model/add-model.component.html b/frontend/src/app/_pages/add-model/add-model.component.html index 33066f80..afd4ceb4 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.html +++ b/frontend/src/app/_pages/add-model/add-model.component.html @@ -3,9 +3,7 @@ </div> <div id="wrapper"> - <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> - <div class="form-group row mt-3 mb-2 d-flex justify-content-center"> <!--justify-content-center--> <h2 class="col-2"> Nov model: </h2> @@ -38,42 +36,39 @@ </button> <h3 class="mt-3 mx-3">ili</h3> <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()" - [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}"> + [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}"> Dodajte novi dataset </button> </div> - <!-- POSTOJECI ILI NOVI DATASET --> - - <!-- POSTOJECI --> - <div class="px-5"> - <div *ngIf="showMyDatasets" class="overflow-auto" style="max-height: 500px;"> - <ul class="list-group"> - <li class="list-group-item p-3" *ngFor="let dataset of myDatasets" [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}"> - <app-item-dataset name="usersDataset" [dataset]="dataset" (click)="selectThisDataset(dataset)"></app-item-dataset> - </li> - </ul> - </div> + <div class="px-5"> + <div *ngIf="showMyDatasets" class="overflow-auto" style="max-height: 500px;"> + <ul class="list-group"> + <li class="list-group-item p-3" *ngFor="let dataset of myDatasets" + [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}"> + <app-item-dataset name="usersDataset" [dataset]="dataset" + (click)="selectThisDataset(dataset)"></app-item-dataset> + </li> + </ul> </div> - - <!-- NOVI --> - <app-dataset-load *ngIf="!showMyDatasets" id="dataset" (loaded)="datasetLoaded = true"></app-dataset-load> - </div> + </div> + <app-dataset-load *ngIf="!showMyDatasets" id="dataset" + (loaded)="datasetLoaded = true; selectedDataset = datasetLoadComponent?.dataset; datasetFile = datasetLoadComponent?.csvRecords; datasetHasHeader = datasetLoadComponent?.hasHeader"> + </app-dataset-load> + <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable> + </div> - <!-- ULAZNE/IZLAZNE KOLONE - POSTOJECI DATASET --> - <div *ngIf="showMyDatasets && this.selectedDataset" class="mt-4"> - <h2 class="text-center"> - Izabrali ste dataset: <span style="color: #003459; font-weight: bold">{{this.selectedDataset.name}}</span> - </h2> - <div class="row mt-5"> + <!-- ULAZNE/IZLAZNE KOLONE --> + <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 this.selectedDataset.header; let i = index"> - <input class="form-check-input" type="checkbox" value="{{item}}" - id="cb_{{item}}" name="cbsExisting" checked [disabled]="this.selectedOutputColumnVal == item"> + <div *ngFor="let item of selectedDataset.header; let i = index"> + <input class="form-check-input" type="checkbox" value="{{item}}" id="cb_{{item}}" + name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item"> <label class="form-check-label" for="cb_{{item}}"> {{item}} </label> @@ -84,45 +79,57 @@ <h3>Izaberite izlaznu kolonu:</h3> <div id="divOutputs" class="form-check mt-2"> <br> - <div *ngFor="let item of this.selectedDataset.header; let i = index"> - <input class="form-check-input" type="radio" value="{{item}}" - id="rb_{{item}}" name="rbsExisting" (change)="this.selectedOutputColumnVal = item"> + <div *ngFor="let item of selectedDataset.header; let i = index"> + <input class="form-check-input" type="radio" value="{{item}}" id="rb_{{item}}" name="rbsNew" + (change)="this.selectedOutputColumnVal = item"> <label class="form-check-label" for="rb_{{item}}"> {{item}} </label> </div> </div> </div> - </div> - </div> - <!-- ULAZNE/IZLAZNE KOLONE - NOVI DATASET--> - <div *ngIf="!showMyDatasets && datasetLoaded"> - <div *ngIf="datasetLoadComponent && datasetLoadComponent.files[0]" 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 datasetLoadComponent.dataset.header; let i = index"> - <input class="form-check-input" type="checkbox" value="{{item}}" - id="cb_{{item}}" name="cbsNew" checked [disabled]="this.selectedOutputColumnVal == item"> - <label class="form-check-label" for="cb_{{item}}"> - {{item}} - </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 datasetLoadComponent.dataset.header; let i = index"> - <input class="form-check-input" type="radio" value="{{item}}" - id="rb_{{item}}" name="rbsNew" (change)="this.selectedOutputColumnVal = item"> - <label class="form-check-label" for="rb_{{item}}"> - {{item}} - </label> + <div class="my-2" *ngIf="datasetFile"> + <h2>Popunjavanje nedostajućih vrednosti:</h2> + <div class="form-check"> + <input type="radio" [(ngModel)]="newModel.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 + redove sa nedostajućim vrednostima</label><br> + <input type="radio" [(ngModel)]="newModel.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 + kolone sa nedostajućim vrednostima</label><br> + <input type="radio" [(ngModel)]="newModel.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 id="columnReplacers"> + <div *ngFor="let column of selectedDataset.header; let i = index" class="my-3"> + <div class="input-group row" *ngIf="getInputById('cb_'+column).checked"> + <span class="input-group-text col-4 text-center"> + {{column}} + </span> + <input type="text" class="form-control col-4"> + <select [id]="'replaceOptions'+i" class="form-control col-4" + *ngIf="isNumber(datasetFile[1][i])"> + <option + *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)" + [value]="option"> + {{ optionName }} + </option> + </select> + </div> + </div> + </div> + </div> </div> </div> </div> @@ -257,7 +264,8 @@ </div> <div class="col-5"> <label for="splitYesNo" class="form-check-label">Podela test skupa: - <input id="splitYesNo" class="form-check-input" type="checkbox" [checked]="newModel.randomTestSet" + <input id="splitYesNo" class="form-check-input" type="checkbox" + [checked]="newModel.randomTestSet" (change)="newModel.randomTestSet = !newModel.randomTestSet"> </label> </div> @@ -288,8 +296,8 @@ <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening skup:</label> </div> <div class="col-1"> - <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90" [(ngModel)]="tempTestSetDistribution" - [disabled] = "!newModel.randomTestSet"> + <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90" + [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet"> </div> </div> diff --git a/frontend/src/app/_pages/add-model/add-model.component.ts b/frontend/src/app/_pages/add-model/add-model.component.ts index 7bfb7204..1c9198a3 100644 --- a/frontend/src/app/_pages/add-model/add-model.component.ts +++ b/frontend/src/app/_pages/add-model/add-model.component.ts @@ -1,10 +1,11 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import Model from 'src/app/_data/Model'; -import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer } from 'src/app/_data/Model'; +import Model, { ReplaceWith } from 'src/app/_data/Model'; +import { ANNType, Encoding, ActivationFunction, LossFunction, Optimizer, NullValueOptions } from 'src/app/_data/Model'; import { DatasetLoadComponent } from 'src/app/_elements/dataset-load/dataset-load.component'; import { ModelsService } from 'src/app/_services/models.service'; import shared from 'src/app/Shared'; import Dataset from 'src/app/_data/Dataset'; +import { DatatableComponent } from 'src/app/_elements/datatable/datatable.component'; @Component({ @@ -15,6 +16,7 @@ import Dataset from 'src/app/_data/Dataset'; export class AddModelComponent implements OnInit { @ViewChild(DatasetLoadComponent) datasetLoadComponent?: DatasetLoadComponent; + @ViewChild(DatatableComponent) datatable?: DatatableComponent; datasetLoaded: boolean = false; newModel: Model; @@ -24,7 +26,10 @@ export class AddModelComponent implements OnInit { ActivationFunction = ActivationFunction; LossFunction = LossFunction; Optimizer = Optimizer; + NullValueOptions = NullValueOptions; + ReplaceWith = ReplaceWith; Object = Object; + document = document; shared = shared; selectedOutputColumnVal: string = ''; @@ -33,6 +38,8 @@ export class AddModelComponent implements OnInit { myDatasets?: Dataset[]; existingDatasetSelected: boolean = false; selectedDataset?: Dataset; + datasetFile?: any[]; + datasetHasHeader?: boolean = true; tempTestSetDistribution: number = 90; @@ -62,9 +69,9 @@ export class AddModelComponent implements OnInit { addModel() { if (!this.showMyDatasets) - this.saveModelWithNewDataset(); + this.saveModelWithNewDataset(); else - this.saveModelWithExistingDataset(); + this.saveModelWithExistingDataset(); } trainModel() { @@ -124,14 +131,14 @@ export class AddModelComponent implements OnInit { if (this.selectedDataset) { //dataset je izabran this.getCheckedInputCols(); this.getCheckedOutputCol(); - - if (this.validationInputsOutput()) { + + if (this.validationInputsOutput()) { this.newModel.datasetId = this.selectedDataset._id; - + this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10; this.tempTestSetDistribution = 90; this.newModel.username = shared.username; - + this.models.addModel(this.newModel).subscribe((response) => { console.log('ADD MODEL: DONE! REPLY:\n', response); }, (error) => { @@ -147,11 +154,9 @@ export class AddModelComponent implements OnInit { getCheckedInputCols() { this.newModel.inputColumns = []; let checkboxes: any; - if (this.showMyDatasets) - checkboxes = document.getElementsByName("cbsExisting"); - else - checkboxes = document.getElementsByName("cbsNew"); - + + checkboxes = document.getElementsByName("cbsNew"); + for (let i = 0; i < checkboxes.length; i++) { let thatCb = <HTMLInputElement>checkboxes[i]; if (thatCb.checked == true && thatCb.disabled == false) @@ -162,10 +167,8 @@ export class AddModelComponent implements OnInit { getCheckedOutputCol() { this.newModel.columnToPredict = ''; let radiobuttons: any; - if (this.showMyDatasets) - radiobuttons = document.getElementsByName("rbsExisting"); - else - radiobuttons = document.getElementsByName("rbsNew"); + + radiobuttons = document.getElementsByName("rbsNew"); for (let i = 0; i < radiobuttons.length; i++) { let thatRb = <HTMLInputElement>radiobuttons[i]; @@ -208,6 +211,10 @@ export class AddModelComponent implements OnInit { if (datasets[i]._id == dataset._id) }*/ + + //this.datasetFile = csvRecords; + this.datasetHasHeader = false; + this.resetCbsAndRbs(); } @@ -223,17 +230,8 @@ export class AddModelComponent implements OnInit { } checkAllCbs() { let checkboxes: any; - //if (this.showMyDatasets) - checkboxes = document.getElementsByName("cbsExisting"); - //else - //checkboxes = document.getElementsByName("cbsNew"); - - for (let i = 0; i < checkboxes.length; i++) { - (<HTMLInputElement>checkboxes[i]).checked = true; - (<HTMLInputElement>checkboxes[i]).disabled = false; - } - checkboxes = document.getElementsByName("cbsNew"); + checkboxes = document.getElementsByName("cbsNew"); for (let i = 0; i < checkboxes.length; i++) { (<HTMLInputElement>checkboxes[i]).checked = true; (<HTMLInputElement>checkboxes[i]).disabled = false; @@ -242,16 +240,10 @@ export class AddModelComponent implements OnInit { uncheckRbs() { this.selectedOutputColumnVal = ''; let radiobuttons: any; - //if (this.showMyDatasets) - radiobuttons = document.getElementsByName("rbsExisting"); - //else - //radiobuttons = document.getElementsByName("rbsNew"); + radiobuttons = document.getElementsByName("rbsNew"); for (let i = 0; i < radiobuttons.length; i++) (<HTMLInputElement>radiobuttons[i]).checked = false; - radiobuttons = document.getElementsByName("rbsNew"); - for (let i = 0; i < radiobuttons.length; i++) - (<HTMLInputElement>radiobuttons[i]).checked = false; } refreshMyDatasetList() { @@ -260,4 +252,14 @@ export class AddModelComponent implements OnInit { }); } + isNumber(value: string | number): boolean { + return ((value != null) && + (value !== '') && + !isNaN(Number(value.toString()))); + } + + + getInputById(id: string): HTMLInputElement { + return document.getElementById(id) as HTMLInputElement; + } } |