diff options
Diffstat (limited to 'frontend/src/app/_elements/column-table')
| -rw-r--r-- | frontend/src/app/_elements/column-table/column-table.component.html | 45 | ||||
| -rw-r--r-- | frontend/src/app/_elements/column-table/column-table.component.ts | 59 |
2 files changed, 66 insertions, 38 deletions
diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 543a0018..efc093d2 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -64,15 +64,15 @@ </tr> </thead> <tbody> - <tr *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <tr *ngFor="let row of dataset.cMatrix; let i = index"> <th [ngClass]="{'header-disabled col-disabled' : !columnsChecked[i]}"> <div class="text-left"> - {{colInfo.columnName}} + {{dataset.columnInfo[i].columnName}} </div> </th> - <td *ngFor="let colInfo of dataset.columnInfo; let j = index" [ngClass]="{'text-disabled col-disabled' : !columnsChecked[j] || !columnsChecked[i]}"> + <td *ngFor="let corrVal of row; let j = index" [ngClass]="{'text-disabled col-disabled' : !columnsChecked[j] || !columnsChecked[i]}"> <div class="text-overflow"> - 0.1 + {{corrVal}} </div> </td> </tr> @@ -103,7 +103,7 @@ <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix" [ngClass]="{'text-disabled' : !columnsChecked[i]}"> <p class="verticalAlign text-left" style="font-size:13px;" *ngIf="!colInfo.isNumber">Kategorijski</p> <mat-form-field *ngIf="colInfo.isNumber"> - <mat-select matNativeControl [(value)]="colInfo.columnType" [disabled]="!columnsChecked[i]" (selectionChange)="columnTypeChanged(colInfo.columnName);"> + <mat-select matNativeControl [(value)]="this.experiment.columnTypes[i]" [disabled]="!columnsChecked[i]" (selectionChange)="columnTypeChanged(colInfo.columnName);"> <mat-option [value]="ColumnType.categorical">Kategorijski</mat-option> <mat-option [value]="ColumnType.numerical">Numerički</mat-option> </mat-select> @@ -113,14 +113,14 @@ <tr class="graphics-row"> <th class="no-pad">Grafik</th> <td class="no-pad" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'graphic-class' : !columnsChecked[i]}"> - <app-box-plot *ngIf="colInfo.columnType == ColumnType.numerical" [width]="150" [height]="150"></app-box-plot> - <app-pie-chart *ngIf="colInfo.columnType == ColumnType.categorical" [width]="150" [height]="150"></app-pie-chart> + <app-box-plot *ngIf="this.experiment.columnTypes[i] == ColumnType.numerical" [width]="150" [height]="150"></app-box-plot> + <app-pie-chart *ngIf="this.experiment.columnTypes[i] == ColumnType.categorical" [width]="150" [height]="150"></app-pie-chart> </td> </tr> <tr> <th class="border-bottom">Statistika</th> <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}" class="text-left"> - <span *ngIf="colInfo.columnType == ColumnType.numerical"> + <span *ngIf="this.experiment.columnTypes[i] == ColumnType.numerical"> Mean: {{colInfo.mean}}<br> Median: {{colInfo.median}}<br> Min: {{colInfo.min}}<br> @@ -128,7 +128,7 @@ Q1: {{colInfo.q1}}<br> Q3: {{colInfo.q3}}<br> </span> - <div class="text-overflow" *ngIf="colInfo.columnType == ColumnType.categorical && colInfo.uniqueValuesPercent"> + <div class="text-overflow" *ngIf="this.experiment.columnTypes[i] == ColumnType.categorical && colInfo.uniqueValuesPercent"> <span *ngFor="let uniqueValue of colInfo.uniqueValues | slice:0:6; let i = index"> ({{(colInfo.uniqueValuesPercent[i] * 100).toFixed(2)}}%) {{uniqueValue}}<br> </span> @@ -186,7 +186,7 @@ </mat-menu> <mat-menu #replaceWith="matMenu"> - <input type="text" id={{colInfo.columnName}} mat-menu-item placeholder="Unesi vrednost..." [value]> + <input type="text" id={{colInfo.columnName}} mat-menu-item placeholder="Unesi vrednost..." [value] #enterAValue> <button [disabled]="getValue(colInfo.columnName) == ''" mat-menu-item value={{getValue(colInfo.columnName)}} (click)="MissValsReplaceClicked($event, colInfo.columnName, i)">Potvrdi unos</button> </mat-menu> </div> @@ -225,15 +225,24 @@ </div> <div class="break-1"></div> <div class="ns-col d-flex align-items-center justify-content-center"> - <button mat-button (click)="saveExperiment()" class="bottom-button text-offwhite rounded-bottom"> - <div class="f-row" style="justify-content: space-around;"> - <div>Potvrdi</div> - <div class="icon-double pt-1"> - <mat-icon>check</mat-icon> - <mat-icon>check</mat-icon> + <button *ngIf="experiment._id == ''" mat-button (click)="saveExperiment()" class="bottom-button text-offwhite rounded-bottom"> + <div class="f-row" style="justify-content: space-around; width: 100%;"> + <div>Sačuvaj</div> + <div class="icon-double pt-1"> + <mat-icon>check</mat-icon> + <mat-icon>check</mat-icon> + </div> </div> - </div> - </button> + </button> + <button *ngIf="experiment._id != ''" mat-button (click)="updateExperiment()" class="bottom-button text-offwhite rounded-bottom"> + <div class="f-row" style="justify-content: space-around; width: 100%;"> + <div>Sačuvaj izmene</div> + <div class="icon-double pt-1"> + <mat-icon>check</mat-icon> + <mat-icon>check</mat-icon> + </div> + </div> + </button> </div> </div> </div> diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index c3d4f206..c200e674 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -1,6 +1,6 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core'; -import Dataset, { ColumnType } from 'src/app/_data/Dataset'; -import Experiment, { ColumnEncoding, Encoding, NullValReplacer, NullValueOptions } from 'src/app/_data/Experiment'; +import Dataset from 'src/app/_data/Dataset'; +import Experiment, { ColumnEncoding, Encoding, ColumnType, NullValueOptions } from 'src/app/_data/Experiment'; import { DatasetsService } from 'src/app/_services/datasets.service'; import { EncodingDialogComponent } from 'src/app/_modals/encoding-dialog/encoding-dialog.component'; import { MatDialog } from '@angular/material/dialog'; @@ -10,6 +10,8 @@ import { CsvParseService } from 'src/app/_services/csv-parse.service'; import { ProblemType } from 'src/app/_data/Model'; import { ExperimentsService } from 'src/app/_services/experiments.service'; import { SaveExperimentDialogComponent } from 'src/app/_modals/save-experiment-dialog/save-experiment-dialog.component'; +import { AlertDialogComponent } from 'src/app/_modals/alert-dialog/alert-dialog.component'; +import Shared from 'src/app/Shared'; @Component({ selector: 'app-column-table', @@ -20,7 +22,6 @@ export class ColumnTableComponent implements AfterViewInit { @Input() dataset?: Dataset; @Input() experiment!: Experiment; - @ViewChildren("nullValMenu") nullValMenus!: ElementRef[]; @Output() okPressed: EventEmitter<string> = new EventEmitter(); @Output() columnTableChanged = new EventEmitter(); @@ -35,7 +36,7 @@ export class ColumnTableComponent implements AfterViewInit { columnsChecked: boolean[] = []; //niz svih kolona loaded: boolean = false; - + constructor(private datasetService: DatasetsService, private experimentService: ExperimentsService, public csvParseService: CsvParseService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente } @@ -44,15 +45,13 @@ export class ColumnTableComponent implements AfterViewInit { this.dataset = dataset; this.setColumnTypeInitial(); - + this.dataset.columnInfo.forEach(column => { this.columnsChecked.push(true); }); - - for (let i = 0; i < this.dataset?.columnInfo.length; i++) { - this.experiment.inputColumns.push(this.dataset.columnInfo[i].columnName); - } - this.experiment.outputColumn = this.experiment.inputColumns[0]; + + this.resetInputColumns(); + this.resetOutputColumn(); this.resetColumnEncodings(Encoding.Label); this.setDeleteRowsForMissingValTreatment(); @@ -70,17 +69,29 @@ export class ColumnTableComponent implements AfterViewInit { } ngAfterViewInit(): void { - + } setColumnTypeInitial() { if (this.dataset != undefined) { for (let i = 0; i < this.dataset.columnInfo.length; i++) { - this.dataset.columnInfo[i].columnType = (this.dataset.columnInfo[i].isNumber) ? ColumnType.numerical : ColumnType.categorical; + this.experiment.columnTypes[i] = (this.dataset.columnInfo[i].isNumber) ? ColumnType.numerical : ColumnType.categorical; } } } + resetInputColumns() { + if (this.dataset != undefined) { + this.experiment.inputColumns = []; + for (let i = 0; i < this.dataset?.columnInfo.length; i++) { + this.experiment.inputColumns.push(this.dataset.columnInfo[i].columnName); + } + } + } + resetOutputColumn() { + this.experiment.outputColumn = this.experiment.inputColumns[0]; + } + setDeleteRowsForMissingValTreatment() { if (this.experiment != undefined) { this.experiment.nullValues = NullValueOptions.DeleteRows; @@ -102,7 +113,7 @@ export class ColumnTableComponent implements AfterViewInit { columnTypeChanged(columnName: string) { if (this.experiment.outputColumn == columnName) this.changeOutputColumn(columnName); - else + else this.columnTableChangeDetected(); } @@ -129,14 +140,14 @@ export class ColumnTableComponent implements AfterViewInit { changeOutputColumn(columnName: string) { if (this.experiment != undefined && this.dataset != undefined) { - let column = this.dataset.columnInfo.filter(x => x.columnName == this.experiment!.outputColumn)[0]; - if (column.columnType == ColumnType.numerical) { + let i = this.dataset.columnInfo.findIndex(x => x.columnName == this.experiment!.outputColumn); + if (this.experiment.columnTypes[i] == ColumnType.numerical) { this.experiment.type = ProblemType.Regression; } else { - if (column.uniqueValues!.length == 2) + if (this.dataset.columnInfo[i].uniqueValues!.length == 2) this.experiment.type = ProblemType.BinaryClassification; - else + else this.experiment.type = ProblemType.MultiClassification; } this.columnTableChangeDetected(); @@ -188,7 +199,7 @@ export class ColumnTableComponent implements AfterViewInit { value: "" }); let numOfRowsToDelete = (this.dataset.columnInfo.filter(x => x.columnName == this.experiment!.inputColumns[i])[0]).numNulls; - this.nullValOption[i] = "Obriši redove (" + numOfRowsToDelete + ")"; + this.nullValOption[i] = "Obriši redove (" + numOfRowsToDelete + ")"; } } this.columnTableChangeDetected(); @@ -212,13 +223,18 @@ export class ColumnTableComponent implements AfterViewInit { this.experiment.name = selectedName; //napravi odvojene dugmice za save i update -> za update nece da se otvara dijalog za ime this.experimentService.addExperiment(this.experiment).subscribe((response) => { - console.log(response); + this.experiment._id = response._id; this.okPressed.emit(); }); }); } - + openUpdateExperimentDialog() { + this.experimentService.updateExperiment(this.experiment).subscribe((response) => { + this.experiment = response; + Shared.openDialog("Izmena eksperimenta", "Uspešno ste izmenili podatke o eksperimentu."); + }); + } MissValsDeleteClicked(event: Event, replacementType: NullValueOptions, index: number) { if (this.experiment != undefined && this.dataset != undefined) { @@ -272,6 +288,9 @@ export class ColumnTableComponent implements AfterViewInit { saveExperiment() { this.openSaveExperimentDialog(); } + updateExperiment() { + this.openUpdateExperimentDialog(); + } tabs = [ |