diff options
Diffstat (limited to 'frontend')
4 files changed, 93 insertions, 56 deletions
diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index dd751947..87f27d12 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -15,15 +15,17 @@ export default class Dataset { public hasHeader: boolean = true, public columnInfo: ColumnInfo[] = [], + public nullRows: number = 0, + public nullCols: number = 0, public preview: string[][] = [[]] ) { } } export class ColumnInfo { constructor( - public name: string = '', + public columnName: string = '', public isNumber: boolean = false, - public numNull: number = 0, + public numNulls: number = 0, public uniqueValues?: string[], public median?: number, public mean?: number, diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts index ed71dc3c..0148ac3a 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core'; import { AddNewDatasetComponent } from '../add-new-dataset/add-new-dataset.component'; import { ModelsService } from 'src/app/_services/models.service'; import shared from 'src/app/Shared'; @@ -19,6 +19,7 @@ export class DatasetLoadComponent { @ViewChild(AddNewDatasetComponent) addNewDatasetComponent?: AddNewDatasetComponent; @ViewChild(AddNewDatasetComponent) datatable?: DatatableComponent; + datasetLoaded: boolean = false; selectedDatasetLoaded: boolean = false; @@ -70,6 +71,8 @@ export class DatasetLoadComponent { //this.refreshThreeNullValueRadioOptions(); //TREBA DA SE DESI this.selectedDatasetLoaded = true; //this.scrollToNextForm(); + + this.selectedDatasetChangeEvent.emit(this.selectedDataset); } }); } diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html index 8d2c86b3..ac0735fb 100644 --- a/frontend/src/app/experiment/experiment.component.html +++ b/frontend/src/app/experiment/experiment.component.html @@ -6,7 +6,7 @@ <h2>1. Izvor podataka</h2> - <app-dataset-load></app-dataset-load> + <app-dataset-load (selectedDatasetChangeEvent)="updateDataset($event)"></app-dataset-load> <h2>2. Preprocesiranje</h2> @@ -17,12 +17,13 @@ <h3>Izaberite ulazne kolone:</h3> <div id="divInputs" class="form-check mt-2"> <br> - <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]="this.selectedOutputColumnVal != item" - [disabled]="this.selectedOutputColumnVal == item"> - <label class="form-check-label" for="cb_{{item}}"> - {{item}} + <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"> + <label class="form-check-label" for="cb_{{item.columnName}}"> + {{item.columnName}} </label> </div> </div> @@ -31,11 +32,12 @@ <h3>Izaberite izlaznu kolonu:</h3> <div id="divOutputs" class="form-check mt-2"> <br> - <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}} + <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"> + <label class="form-check-label" for="rb_{{item.columnName}}"> + {{item.columnName}} </label> </div> </div> @@ -48,12 +50,12 @@ 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</label><br> + redove sa nedostajućim vrednostima ({{selectedDataset.nullRows}} / TODO)</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</label><br> + 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)"> @@ -64,38 +66,38 @@ <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label> <div id="columnReplacers"> <div *ngFor="let column of selectedDataset.columnInfo; let i = index" class="my-3"> - <div *ngIf="getInputById('cb_'+column).checked" class=""> + <div *ngIf="getInputById('cb_'+column.columnName).checked" class=""> <span class="w-20 mx-3"> - {{column.name}} <span class="small" style="color:gray;">( - <!--{{//column.numNulls}}--> - TODO BROJ null) + {{column.columnName}} <span class="small" style="color:gray;">( + {{column.numNulls}} + null) </span> </span> - <label *ngIf="column.numNull <= 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.numNull > 0" class="d-flex flex-row justify-content-end"> - <!-- ngIf colummn.numNulls == 0 --> + <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"> <div class="input-group-prepend"> - <label [for]="'fillCol_'+column.name" class="form-control"> + <label [for]="'fillCol_'+column.columnName" class="form-control"> Zameni - <input type="radio" [id]="'fillCol_'+column.name" - [name]="'delOp_'+column.name"> + <input type="radio" [id]="'fillCol_'+column.columnName" + [name]="'delOp_'+column.columnName"> </label> </div> - <input type="text" class="form-control" [id]="'fillText_'+column.name" - (keyup)="checkFillColRadio(column.name)" + <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);"> + *ngIf="column.isNumber" (change)="replace($event, column);"> <option *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)" [value]="option"> @@ -104,8 +106,8 @@ </select> <select [id]="'replaceOptions'+i" class="form-control btn-outline-primary" - *ngIf="!column.isNumber && column.numNull > 0" - (change)="replace($event);"> + *ngIf="!column.isNumber && column.numNulls > 0" + (change)="replace($event, column);"> <option *ngFor="let option of column.uniqueValues" [value]="option"> {{ option }} </option> @@ -116,39 +118,39 @@ <div class="flex-shrink-1 mx-3"> <div class="input-group"> - <label class="form-control" [for]="'delCol_'+column.name">Izbriši + <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši kolonu - <input type="radio" [id]="'delCol_'+column" - [name]="'delOp_'+column.name" - (change)="emptyFillTextInput(column.name)"></label> + <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.name">Izbriši + <label class="form-control" [for]="'delRows_'+column.columnName">Izbriši redove - <input type="radio" [id]="'delRows_'+column.name" - [name]="'delOp_'+column.name" checked - (change)="emptyFillTextInput(column.name)"></label> + <input type="radio" [id]="'delRows_'+column.columnName" + [name]="'delOp_'+column.columnName" checked + (change)="emptyFillTextInput(column.columnName)"></label> </div> </div> </div> </div> </div> <div *ngFor="let column of selectedDataset.columnInfo; let i = index" class="my-3"> - <div class="input-group row" *ngIf="getInputById('rb_'+column.name).checked"> + <div class="input-group row" *ngIf="getInputById('rb_'+column.columnName).checked"> <span class="input-group-text col-2 text-center"> - {{column}} <span class="small" style="color:gray;">(br + {{column.columnName}} <span class="small" style="color:gray;">(br null)</span> </span> <label *ngIf="true" class="form-control">Ova kolona nema nedostajućih vrednosti.</label> - <input *ngIf="true" type="radio" [id]="'fillCol_'+column.name" class="col-1 mt-2" - [name]="'delOp_'+column.name"> + <input *ngIf="true" type="radio" [id]="'fillCol_'+column.columnName" class="col-1 mt-2" + [name]="'delOp_'+column.columnName"> <select [id]="'replaceOptions'+i" class="form-control col-2" *ngIf="column.isNumber" - (change)="replace($event);"> + (change)="replace($event, column);"> <option *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)" [value]="option"> @@ -156,24 +158,28 @@ </option> </select> <select [id]="'replaceOptions'+i" class="form-control col-2" *ngIf="!column.isNumber" - (change)="replace($event);"> + (change)="replace($event, column);"> <option *ngFor="let option of []" [value]="option"> <!--/*arrayColumn(datasetFile, i)*/--> {{ option }} </option> </select> <input *ngIf="true" type="text" class="form-control col-1" - [id]="'fillText_'+column.name" (keyup)="checkFillColRadio(column.name)" + [id]="'fillText_'+column.columnName" (keyup)="checkFillColRadio(column.columnName)" placeholder="Unesi vrednost..."> - <label *ngIf="true" class="form-control col-2" [for]="'delCol_'+column" .name>Izbriši + <label *ngIf="true" class="form-control col-2" [for]="'delCol_'+column.columnName" + .name>Izbriši kolonu - <input type="radio" [id]="'delCol_'+column.name" [name]="'delOp_'+column.name" - (change)="emptyFillTextInput(column.name)"></label> - <label *ngIf="true" class="form-control col-2" [for]="'delRows_'+column.name">Izbriši + <input type="radio" [id]="'delCol_'+column.columnName" + [name]="'delOp_'+column.columnName" + (change)="emptyFillTextInput(column.columnName)"></label> + <label *ngIf="true" class="form-control col-2" + [for]="'delRows_'+column.columnName">Izbriši redove - <input type="radio" [id]="'delRows_'+column.name" [name]="'delOp_'+column.name" - (change)="emptyFillTextInput(column.name)" checked></label> + <input type="radio" [id]="'delRows_'+column.columnName" + [name]="'delOp_'+column.columnName" + (change)="emptyFillTextInput(column.columnName)" checked></label> </div> </div> diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts index 2309dcd7..ada0484e 100644 --- a/frontend/src/app/experiment/experiment.component.ts +++ b/frontend/src/app/experiment/experiment.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith } from '../_data/Experiment'; import Model from '../_data/Model'; -import Dataset from '../_data/Dataset'; +import Dataset, { ColumnInfo } from '../_data/Dataset'; import { ModelsService } from '../_services/models.service'; import Shared from '../Shared'; @@ -28,6 +28,11 @@ export class ExperimentComponent implements OnInit { ngOnInit(): void { } + updateDataset(dataset: Dataset) { + console.log(dataset); + this.selectedDataset = dataset; + } + getInputById(id: string): HTMLInputElement { return document.getElementById(id) as HTMLInputElement; } @@ -52,9 +57,30 @@ export class ExperimentComponent implements OnInit { (<HTMLInputElement>document.getElementById("fillCol_" + colName)).checked = true; } - replace(event: Event) { + replace(event: Event, column: ColumnInfo) { let option = (<HTMLInputElement>event.target).value; - // TODO + + 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; + } } getNullValuesReplacersArray()/*: NullValReplacer[]*/ { |