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 | 33 |
2 files changed, 53 insertions, 25 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 e6a781be..27e0f3bf 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -27,7 +27,9 @@ <th>#</th> <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}"> <div class="cell-align"> - #{{i + 1}} {{colInfo.columnName}} + <div class="text-overflow"> + #{{i + 1}} {{colInfo.columnName}} + </div> <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> </div> </th> @@ -63,7 +65,9 @@ <th>Kolona</th> <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}"> <div class="cell-align"> - #{{i + 1}} {{colInfo.columnName}} + <div class="text-overflow"> + #{{i + 1}} {{colInfo.columnName}} + </div> <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> </div> </th> @@ -72,7 +76,7 @@ <tbody> <tr *ngFor="let row of dataset.cMatrix; let i = index"> <th [ngClass]="{'header-disabled col-disabled' : !columnsChecked[i]}"> - <div class="text-left"> + <div class="text-left text-overflow"> {{dataset.columnInfo[i].columnName}} </div> </th> @@ -97,7 +101,9 @@ <th>Naziv</th> <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}"> <div class="cell-align"> - #{{i + 1}} {{colInfo.columnName}} + <div class="text-overflow"> + #{{i + 1}} {{colInfo.columnName}} + </div> <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> </div> </th> @@ -109,7 +115,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)]="this.experiment.columnTypes[i]" [disabled]="!columnsChecked[i]" (selectionChange)="columnTypeChanged(colInfo.columnName);"> + <mat-select matNativeControl [(value)]="this.experiment.columnTypes[i]" [disabled]="!columnsChecked[i]" (selectionChange)="columnTypeChanged(colInfo.columnName, i);"> <mat-option [value]="ColumnType.categorical">Kategorijski</mat-option> <mat-option [value]="ColumnType.numerical">Numerički</mat-option> </mat-select> @@ -141,8 +147,8 @@ </div> </td> </tr> - <tr style="padding: 0"> - <th class="brighter cell-align long" (click)="openEncodingDialog()"> + <tr style="padding: 0;" *ngIf="experiment.encodings!=undefined"> + <th style="background-color: var(--ns-primary);" (click)="openEncodingDialog()"> <span class="verticalAlign">Enkodiranje</span> <span class="material-icons-round verticalAlign rotate">settings</span> </th> @@ -168,11 +174,13 @@ <div *ngIf="colInfo.numNulls > 0"> <button class="w-100" mat-raised-button [ngClass]="{ 'menu-disabled' : !columnsChecked[i]}" [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu> - <div class="cell-align"> - {{nullValOption[i]}} - <mat-icon>arrow_drop_down</mat-icon> - </div> - </button> + <div class="cell-align"> + <div [ngClass]="{'text-overflow' : experiment.nullValuesReplacers[i].option == NullValueOptions.Replace}"> + {{nullValOption[i]}} + </div> + <mat-icon>arrow_drop_down</mat-icon> + </div> + </button> <mat-menu #menu="matMenu"> <!--<button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteColumns, i)" value={{colInfo.columnName}}>Obriši kolonu</button>--> <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteRows, i)" value={{colInfo.columnName}}>Obriši redove ({{colInfo.numNulls}})</button> @@ -180,12 +188,12 @@ </mat-menu> <mat-menu #fillWith="matMenu"> - <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.mean}}>Mean ({{colInfo.mean}})</button> - <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.median}}>Median ({{colInfo.median}})</button> - <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.max}}>Max ({{colInfo.max}})</button> - <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.min}}>Min ({{colInfo.min}})</button> + <button *ngIf="experiment.columnTypes[i] == ColumnType.numerical" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.mean}}>Mean ({{colInfo.mean}})</button> + <button *ngIf="experiment.columnTypes[i] == ColumnType.numerical" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.median}}>Median ({{colInfo.median}})</button> + <button *ngIf="experiment.columnTypes[i] == ColumnType.numerical" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.max}}>Max ({{colInfo.max}})</button> + <button *ngIf="experiment.columnTypes[i] == ColumnType.numerical" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.min}}>Min ({{colInfo.min}})</button> - <button *ngIf="!colInfo.isNumber" mat-menu-item [matMenuTriggerFor]="uniques">Najčešće vrednosti</button> + <button *ngIf="experiment.columnTypes[i] == ColumnType.categorical" mat-menu-item [matMenuTriggerFor]="uniques">Najčešće vrednosti</button> <button mat-menu-item [matMenuTriggerFor]="replaceWith">Unesi vrednost...</button> </mat-menu> @@ -195,7 +203,8 @@ </mat-menu> <mat-menu #replaceWith="matMenu"> - <input type="text" id={{colInfo.columnName}} mat-menu-item placeholder="Unesi vrednost..." [value] #enterAValue> + <input *ngIf="experiment.columnTypes[i] == ColumnType.categorical" type="text" id={{colInfo.columnName}} mat-menu-item placeholder="Unesi vrednost..." [value] #enterAValue> + <input *ngIf="experiment.columnTypes[i] == ColumnType.numerical" type="number" 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> 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 4b10401d..96818976 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -7,7 +7,7 @@ import { MatDialog } from '@angular/material/dialog'; import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dialog/missingvalues-dialog.component'; import { MatCheckboxChange } from '@angular/material/checkbox'; import { CsvParseService } from 'src/app/_services/csv-parse.service'; -import { ProblemType } from 'src/app/_data/Model'; +import { NullValReplacer, 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'; @@ -15,6 +15,7 @@ import Shared from 'src/app/Shared'; import { PieChartComponent } from '../_charts/pie-chart/pie-chart.component'; import { BoxPlotComponent } from '../_charts/box-plot/box-plot.component'; import { ActivatedRoute } from '@angular/router'; +import { UpdateExperimentDialogComponent } from 'src/app/_modals/update-experiment-dialog/update-experiment-dialog.component'; @Component({ selector: 'app-column-table', @@ -87,6 +88,7 @@ export class ColumnTableComponent implements AfterViewInit { if (this.route.snapshot.paramMap.get("id") == null && this.route.snapshot.paramMap.get("predictorId") == null) { this.dataset = dataset; this.setColumnTypeInitial(); + this.resetColumnEncodings(Encoding.Label); this.columnsChecked = []; this.dataset.columnInfo.forEach(column => { @@ -95,7 +97,6 @@ export class ColumnTableComponent implements AfterViewInit { this.resetInputColumns(); this.resetOutputColumn(); - this.resetColumnEncodings(Encoding.Label); this.setDeleteRowsForMissingValTreatment(); this.nullValOption = []; @@ -180,8 +181,13 @@ export class ColumnTableComponent implements AfterViewInit { this.columnTableChanged.emit(); } - columnTypeChanged(columnName: string) { - if (this.experiment.outputColumn == columnName) + columnTypeChanged(columnName: string, colIndex: number) { + + this.experiment.nullValuesReplacers[colIndex].option = NullValueOptions.DeleteRows; + this.experiment.nullValuesReplacers[colIndex].value = ""; + this.nullValOption[colIndex] = "Obriši redove (" + this.dataset?.columnInfo[colIndex].numNulls + ")"; + + if (this.experiment.outputColumn == columnName) this.changeProblemType(); else this.columnTableChangeDetected(); @@ -252,9 +258,11 @@ export class ColumnTableComponent implements AfterViewInit { resetColumnEncodings(encodingType: Encoding) { if (this.experiment != undefined && this.dataset != undefined) { this.experiment.encodings = []; + console.log("prvi: RESET COLUMN ENC, DUZINA ENCODINGS NIZA:", this.experiment.encodings.length); for (let i = 0; i < this.dataset.columnInfo.length; i++) { this.experiment.encodings.push(new ColumnEncoding(this.dataset?.columnInfo[i].columnName, encodingType)); } + console.log("drugi: RESET COLUMN ENC, DUZINA ENCODINGS NIZA:", this.experiment.encodings.length); this.columnTableChangeDetected(); } } @@ -360,16 +368,27 @@ export class ColumnTableComponent implements AfterViewInit { Object.assign(this.experiment, experiment); this.experiment._columnsSelected = true; this.experimentChanged.emit(); + this.okPressed.emit(); } }); } openUpdateExperimentDialog() { - this.experimentService.updateExperiment(this.experiment).subscribe((response) => { - Object.assign(this.experiment, response); + const dialogRef = this.dialog.open(UpdateExperimentDialogComponent, { + width: '350px', + data: { experiment: this.experiment } + }); + dialogRef.afterClosed().subscribe(experiment => { + if (experiment == undefined) + return; + if (this.experiment._id != experiment._id) + Shared.openDialog("Novi eksperiment", "Uspešno ste sačuvali novi eksperiment. Nastavite rad na njemu."); + else + Shared.openDialog("Izmena eksperimenta", "Uspešno ste izmenili podatke o eksperimentu."); + Object.assign(this.experiment, experiment); this.experiment._columnsSelected = true; this.experimentChanged.emit(); - Shared.openDialog("Izmena eksperimenta", "Uspešno ste izmenili podatke o eksperimentu."); + this.okPressed.emit(); }); } |