diff options
Diffstat (limited to 'frontend/src/app/_elements/column-table')
| -rw-r--r-- | frontend/src/app/_elements/column-table/column-table.component.html | 390 | ||||
| -rw-r--r-- | frontend/src/app/_elements/column-table/column-table.component.ts | 82 |
2 files changed, 252 insertions, 220 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 53372574..543a0018 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -1,125 +1,126 @@ -<div id="tabs"> - <div class="folder-tab p-1 rounded-top" *ngFor="let tab of tabs; let i = index" [style]="'z-index:' + calcZIndex(i) + ' ;'" [ngClass]="{'selected-tab' : selectedTab.index == i, 'hover-tab' : hoveringOverTab?.index == i}"> - <a class="m-1 stretched-link tab-link" (click)="selectTab(i)" (mouseenter)="hoverOverTab(i)" (mouseleave)="hoverOverTab(-1)"> +<div *ngIf="loaded"> + <div id="tabs"> + <div class="folder-tab p-1 rounded-top" *ngFor="let tab of tabs; let i = index" [style]="'z-index:' + calcZIndex(i) + ' ;'" [ngClass]="{'selected-tab' : selectedTab.index == i, 'hover-tab' : hoveringOverTab?.index == i}"> + <a class="m-1 stretched-link tab-link" (click)="selectTab(i)" (mouseenter)="hoverOverTab(i)" (mouseleave)="hoverOverTab(-1)"> {{tab.name}} </a> - </div> - <!-- + </div> + <!-- <button mat-button class="p-1 folder-tab-end rounded-top"> Kolone <mat-icon>keyboard_double_arrow_down</mat-icon> </button> --> -</div> -<div id="folder-table" *ngIf="dataset && experiment"> - <!--<div [ngSwitch]="tabToDisplay">--> - <div id="divTable"> + </div> + <div id="folder-table" *ngIf="dataset && experiment"> + <!--<div [ngSwitch]="tabToDisplay">--> + <div id="divTable"> - <div [ngClass]="{'hidden': tabToDisplay != Table.Data}"> - <table class="table text-offwhite fixed bg-blur"> - <colgroup> - <col class="col-first"> - <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}"> - </colgroup> - <thead> - <tr> - <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}} - <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> - </div> - </th> - </tr> - </thead> - <tbody> - <tr *ngFor="let row of tableData; let i = index"> - <th>#{{i}}</th> - <td *ngFor="let col of row; let j = index" [ngClass]="{'text-disabled' : !columnsChecked[j]}"> - <div class="text-overflow"> - {{col}} - </div> - </td> - </tr> - </tbody> - </table> - </div> + <div [ngClass]="{'hidden': tabToDisplay != Table.Data}"> + <table class="table text-offwhite fixed bg-blur"> + <colgroup> + <col class="col-first"> + <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}"> + </colgroup> + <thead> + <tr> + <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}} + <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> + </div> + </th> + </tr> + </thead> + <tbody> + <tr *ngFor="let row of tableData; let i = index"> + <th>#{{i}}</th> + <td *ngFor="let col of row; let j = index" [ngClass]="{'text-disabled' : !columnsChecked[j]}"> + <div class="text-overflow"> + {{col}} + </div> + </td> + </tr> + </tbody> + </table> + </div> - <div [ngClass]="{'hidden': tabToDisplay != Table.CorrelationMatrix}"> - <table class="table text-offwhite fixed bg-blur"> - <colgroup> - <col class="col-first"> - <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}"> - </colgroup> - <thead> - <tr> - <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}} - <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> - </div> - </th> - </tr> - </thead> - <tbody> - <tr *ngFor="let colInfo of dataset.columnInfo; let i = index"> - <th [ngClass]="{'header-disabled col-disabled' : !columnsChecked[i]}"> - <div class="text-left"> - {{colInfo.columnName}} - </div> - </th> - <td *ngFor="let colInfo of dataset.columnInfo; let j = index" [ngClass]="{'text-disabled col-disabled' : !columnsChecked[j] || !columnsChecked[i]}"> - <div class="text-overflow"> - 0.1 - </div> - </td> - </tr> - </tbody> - </table> - </div> + <div [ngClass]="{'hidden': tabToDisplay != Table.CorrelationMatrix}"> + <table class="table text-offwhite fixed bg-blur"> + <colgroup> + <col class="col-first"> + <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}"> + </colgroup> + <thead> + <tr> + <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}} + <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> + </div> + </th> + </tr> + </thead> + <tbody> + <tr *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <th [ngClass]="{'header-disabled col-disabled' : !columnsChecked[i]}"> + <div class="text-left"> + {{colInfo.columnName}} + </div> + </th> + <td *ngFor="let colInfo of dataset.columnInfo; let j = index" [ngClass]="{'text-disabled col-disabled' : !columnsChecked[j] || !columnsChecked[i]}"> + <div class="text-overflow"> + 0.1 + </div> + </td> + </tr> + </tbody> + </table> + </div> - <div [ngClass]="{'hidden': tabToDisplay != Table.Columns}"> - <table class="table text-offwhite fixed bg-blur"> - <colgroup> - <col class="col-first"> - <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}"> - </colgroup> - <thead> - <tr> - <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}} - <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> - </div> - </th> - </tr> - </thead> - <tbody> - <tr> - <th>Tip</th> - <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)="columnTableChangeDetected()"> - <mat-option [value]="ColumnType.categorical">Kategorijski</mat-option> - <mat-option [value]="ColumnType.numerical">Numerički</mat-option> - </mat-select> - </mat-form-field> - </td> - </tr> - <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> - </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"> + <div [ngClass]="{'hidden': tabToDisplay != Table.Columns}"> + <table class="table text-offwhite fixed bg-blur"> + <colgroup> + <col class="col-first"> + <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}"> + </colgroup> + <thead> + <tr> + <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}} + <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> + </div> + </th> + </tr> + </thead> + <tbody> + <tr> + <th>Tip</th> + <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-option [value]="ColumnType.categorical">Kategorijski</mat-option> + <mat-option [value]="ColumnType.numerical">Numerički</mat-option> + </mat-select> + </mat-form-field> + </td> + </tr> + <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> + </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"> Mean: {{colInfo.mean}}<br> Median: {{colInfo.median}}<br> Min: {{colInfo.min}}<br> @@ -127,104 +128,104 @@ Q1: {{colInfo.q1}}<br> Q3: {{colInfo.q3}}<br> </span> - <div class="text-overflow" *ngIf="colInfo.columnType == ColumnType.categorical && colInfo.uniqueValuesPercent"> - <span *ngFor="let uniqueValue of colInfo.uniqueValues | slice:0:6; let i = index"> - ({{colInfo.uniqueValuesPercent[i].toFixed(4)}}%) {{uniqueValue}}<br> + <div class="text-overflow" *ngIf="colInfo.columnType == 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> - </div> - </td> - </tr> - <tr style="padding: 0"> - <th class="brighter cell-align long" (click)="openEncodingDialog()"> - <span class="verticalAlign">Enkodiranje</span> - <span class="material-icons-round verticalAlign rotate">settings</span> - </th> - <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix" [ngClass]="{'text-disabled' : !columnsChecked[i]}"> - <mat-form-field> - <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding" [disabled]="!columnsChecked[i]" (selectionChange)="columnTableChangeDetected()"> - <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option"> - {{ optionName }} - </mat-option> - </mat-select> - </mat-form-field> - </td> - </tr> - <tr> - <th class="brighter cell-align" (click)="openMissingValuesDialog()"> - <div id="missingValuesHeader">Nedostajuće<br>vrednosti<br></div> - <span class="material-icons-round rotate">settings</span> - </th> - <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}"> + </div> + </td> + </tr> + <tr style="padding: 0"> + <th class="brighter cell-align long" (click)="openEncodingDialog()"> + <span class="verticalAlign">Enkodiranje</span> + <span class="material-icons-round verticalAlign rotate">settings</span> + </th> + <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix" [ngClass]="{'text-disabled' : !columnsChecked[i]}"> + <mat-form-field> + <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding" [disabled]="!columnsChecked[i]" (selectionChange)="columnTableChangeDetected()"> + <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option"> + {{ optionName }} + </mat-option> + </mat-select> + </mat-form-field> + </td> + </tr> + <tr> + <th class="brighter cell-align" (click)="openMissingValuesDialog()"> + <div id="missingValuesHeader">Nedostajuće<br>vrednosti<br></div> + <span class="material-icons-round rotate">settings</span> + </th> + <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}"> - <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 *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> - <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> - <button mat-menu-item [matMenuTriggerFor]="fillWith">Popuni sa</button> - </mat-menu> + <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> + <button mat-menu-item [matMenuTriggerFor]="fillWith">Popuni sa</button> + </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> + <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="!colInfo.isNumber" mat-menu-item [matMenuTriggerFor]="uniques">Najčešće vrednosti</button> + <button *ngIf="!colInfo.isNumber" mat-menu-item [matMenuTriggerFor]="uniques">Najčešće vrednosti</button> - <button mat-menu-item [matMenuTriggerFor]="replaceWith">Unesi vrednost...</button> - </mat-menu> + <button mat-menu-item [matMenuTriggerFor]="replaceWith">Unesi vrednost...</button> + </mat-menu> - <mat-menu #uniques="matMenu"> - <button mat-menu-item *ngFor="let uniqueValue of colInfo.uniqueValues" (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{uniqueValue}}>{{uniqueValue}}</button> - </mat-menu> + <mat-menu #uniques="matMenu"> + <button mat-menu-item *ngFor="let uniqueValue of colInfo.uniqueValues" (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{uniqueValue}}>{{uniqueValue}}</button> + </mat-menu> - <mat-menu #replaceWith="matMenu"> - <input type="text" id={{colInfo.columnName}} mat-menu-item placeholder="Unesi vrednost..." [value]> - <button [disabled]="getValue(colInfo.columnName) == ''" mat-menu-item value={{getValue(colInfo.columnName)}} (click)="MissValsReplaceClicked($event, colInfo.columnName, i)">Potvrdi unos</button> - </mat-menu> - </div> - <div *ngIf="colInfo.numNulls == 0" class="text-left"> - Nema nedostajućih vrednosti. - </div> - </td> - </tr> - </tbody> - </table> + <mat-menu #replaceWith="matMenu"> + <input type="text" id={{colInfo.columnName}} mat-menu-item placeholder="Unesi vrednost..." [value]> + <button [disabled]="getValue(colInfo.columnName) == ''" mat-menu-item value={{getValue(colInfo.columnName)}} (click)="MissValsReplaceClicked($event, colInfo.columnName, i)">Potvrdi unos</button> + </mat-menu> + </div> + <div *ngIf="colInfo.numNulls == 0" class="text-left"> + Nema nedostajućih vrednosti. + </div> + </td> + </tr> + </tbody> + </table> + </div> </div> </div> -</div> -<div *ngIf="dataset && experiment" class="container-fluid text-offwhite belowColumn mt-3"> - <div class="ns-row"> - <div class="break-2"></div> + <div *ngIf="dataset && experiment" class="container-fluid text-offwhite belowColumn mt-3"> + <div class="ns-row"> + <div class="break-2"></div> - <div class="ns-col rounded"> - <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100"> - <mat-label>Tip problema</mat-label> - <mat-select [(value)]="experiment.type"> - <mat-option [value]="ProblemType.Regression">Regresioni</mat-option> - <mat-option [value]="ProblemType.BinaryClassification">Binarni-klasifikacioni</mat-option> - <mat-option [value]="ProblemType.MultiClassification">Multi-klasifikacioni</mat-option> - </mat-select> - </mat-form-field> - </div> - <div class="ns-col rounded"> - <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100"> - <mat-label>Izlazna kolona</mat-label> - <mat-select [(value)]="experiment.outputColumn" (selectionChange)="changeOutputColumn()"> - <mat-option *ngFor="let inputColumn of experiment.inputColumns" [value]="inputColumn">{{inputColumn}}</mat-option> - </mat-select> - </mat-form-field> - </div> - <div class="break-1"></div> - <div class="ns-col d-flex align-items-center justify-content-center"> - <button mat-button (click)="ok()" class="bottom-button text-offwhite rounded-bottom"> + <div class="ns-col rounded"> + <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100"> + <mat-label>Izlazna kolona</mat-label> + <mat-select [(value)]="experiment.outputColumn" (selectionChange)="changeOutputColumn(this.experiment.inputColumns[0])"> + <mat-option *ngFor="let inputColumn of experiment.inputColumns" [value]="inputColumn">{{inputColumn}}</mat-option> + </mat-select> + </mat-form-field> + </div> + <div class="ns-col rounded"> + <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100"> + <mat-label>Tip problema</mat-label> + <mat-select [(value)]="experiment.type"> + <mat-option [value]="ProblemType.Regression">Regresioni</mat-option> + <mat-option [value]="ProblemType.BinaryClassification">Binarni-klasifikacioni</mat-option> + <mat-option [value]="ProblemType.MultiClassification">Multi-klasifikacioni</mat-option> + </mat-select> + </mat-form-field> + </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"> @@ -233,6 +234,7 @@ </div> </div> </button> + </div> </div> </div> </div>
\ No newline at end of file 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 01e4e564..c3d4f206 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -8,6 +8,8 @@ import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dial import { MatCheckboxChange } from '@angular/material/checkbox'; 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'; @Component({ selector: 'app-column-table', @@ -17,7 +19,7 @@ import { ProblemType } from 'src/app/_data/Model'; export class ColumnTableComponent implements AfterViewInit { @Input() dataset?: Dataset; - @Input() experiment?: Experiment; + @Input() experiment!: Experiment; @ViewChildren("nullValMenu") nullValMenus!: ElementRef[]; @Output() okPressed: EventEmitter<string> = new EventEmitter(); @Output() columnTableChanged = new EventEmitter(); @@ -31,37 +33,44 @@ export class ColumnTableComponent implements AfterViewInit { nullValOption: string[] = []; columnsChecked: boolean[] = []; //niz svih kolona + loaded: boolean = false; - constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { + constructor(private datasetService: DatasetsService, private experimentService: ExperimentsService, public csvParseService: CsvParseService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente } - ngAfterViewInit(): void { - this.datasetService.getMyDatasets().subscribe((datasets) => { - this.dataset = datasets[2]; + loadDataset(dataset: Dataset) { + this.dataset = dataset; - this.setColumnTypeInitial(); - this.experiment = new Experiment(); - this.dataset.columnInfo.forEach(column => { - this.columnsChecked.push(true); - }); - console.log(datasets); - 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.resetColumnEncodings(Encoding.Label); - this.setDeleteRowsForMissingValTreatment(); + 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.resetColumnEncodings(Encoding.Label); + this.setDeleteRowsForMissingValTreatment(); - this.nullValOption = [].constructor(this.dataset.columnInfo.length).fill('Obriši redove'); + this.nullValOption = []; + this.dataset.columnInfo.forEach(colInfo => { + this.nullValOption.push(`Obriši redove (${colInfo.numNulls})`); + }); - this.datasetService.getDatasetFilePartial(this.dataset.fileId, 0, 10).subscribe((response: string | undefined) => { - if (response && this.dataset != undefined) { - this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter.toString() == "") ? "," : this.dataset.delimiter); - } - }); + this.datasetService.getDatasetFilePartial(this.dataset.fileId, 0, 10).subscribe((response: string | undefined) => { + if (response && this.dataset != undefined) { + this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter.toString() == "") ? "," : this.dataset.delimiter); + } }); + this.loaded = true; + } + + ngAfterViewInit(): void { + } setColumnTypeInitial() { @@ -90,6 +99,13 @@ export class ColumnTableComponent implements AfterViewInit { this.columnTableChanged.emit(); } + columnTypeChanged(columnName: string) { + if (this.experiment.outputColumn == columnName) + this.changeOutputColumn(columnName); + else + this.columnTableChangeDetected(); + } + changeInputColumns(targetMatCheckbox: MatCheckboxChange, columnName: string) { if (this.experiment != undefined) { @@ -111,7 +127,7 @@ export class ColumnTableComponent implements AfterViewInit { } } - changeOutputColumn() { + 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) { @@ -187,6 +203,20 @@ export class ColumnTableComponent implements AfterViewInit { this.resetMissingValuesTreatment(selectedMissingValuesOption); }); } + + openSaveExperimentDialog() { + const dialogRef = this.dialog.open(SaveExperimentDialogComponent, { + width: '400px' + }); + dialogRef.afterClosed().subscribe(selectedName => { + 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.okPressed.emit(); + }); + }); + } @@ -239,8 +269,8 @@ export class ColumnTableComponent implements AfterViewInit { return (<HTMLInputElement>document.getElementById(columnName)).value; return '0'; } - ok() { - this.okPressed.emit(); + saveExperiment() { + this.openSaveExperimentDialog(); } |