aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/app/_elements/column-table/column-table.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/app/_elements/column-table/column-table.component.ts')
-rw-r--r--frontend/src/app/_elements/column-table/column-table.component.ts117
1 files changed, 92 insertions, 25 deletions
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 c200e674..217eda30 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren } from '@angular/core';
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';
@@ -12,6 +12,8 @@ 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';
+import { PieChartComponent } from '../_charts/pie-chart/pie-chart.component';
+import { BoxPlotComponent } from '../_charts/box-plot/box-plot.component';
@Component({
selector: 'app-column-table',
@@ -20,10 +22,13 @@ import Shared from 'src/app/Shared';
})
export class ColumnTableComponent implements AfterViewInit {
+ @ViewChildren(BoxPlotComponent) boxplotComp!: QueryList<BoxPlotComponent>;
+ @ViewChildren(PieChartComponent) piechartComp!: QueryList<PieChartComponent>;
@Input() dataset?: Dataset;
@Input() experiment!: Experiment;
@Output() okPressed: EventEmitter<string> = new EventEmitter();
@Output() columnTableChanged = new EventEmitter();
+ @Output() experimentChanged = new EventEmitter();
Object = Object;
Encoding = Encoding;
@@ -41,9 +46,35 @@ export class ColumnTableComponent implements AfterViewInit {
//ovo mi nece trebati jer primam dataset iz druge komponente
}
+ updateCharts() {
+ //min: number, max: number, q1: number, q3: number, median: number
+ let i = 0;
+ this.boxplotComp.changes.subscribe(() => {
+ const bps = this.boxplotComp.toArray();
+ this.dataset?.columnInfo.forEach(colInfo => {
+ if (this.experiment.columnTypes[i] == ColumnType.numerical) {
+ bps[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median);
+ i++;
+ }
+ });
+ });
+ }
+
+ updatePieChart() {
+ //min: number, max: number, q1: number, q3: number, median: number
+ let i = 0;
+ const pieChart = this.piechartComp.toArray();
+ this.dataset?.columnInfo.forEach(colInfo => {
+ if (this.experiment.columnTypes[i] == ColumnType.categorical) {
+ pieChart[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent);
+ i++;
+ }
+ });
+ }
+
loadDataset(dataset: Dataset) {
+ console.log("LOADED DATASET");
this.dataset = dataset;
-
this.setColumnTypeInitial();
this.dataset.columnInfo.forEach(column => {
@@ -62,13 +93,17 @@ export class ColumnTableComponent implements AfterViewInit {
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.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter);
}
});
this.loaded = true;
+
+ this.updateCharts();
+ this.updatePieChart();
}
ngAfterViewInit(): void {
+ console.log(this.dataset?.columnInfo);
}
@@ -89,7 +124,10 @@ export class ColumnTableComponent implements AfterViewInit {
}
}
resetOutputColumn() {
- this.experiment.outputColumn = this.experiment.inputColumns[0];
+ if (this.experiment.inputColumns.length > 0)
+ this.experiment.outputColumn = this.experiment.inputColumns[0];
+ else
+ this.experiment.outputColumn = '-';
}
setDeleteRowsForMissingValTreatment() {
@@ -112,7 +150,7 @@ export class ColumnTableComponent implements AfterViewInit {
columnTypeChanged(columnName: string) {
if (this.experiment.outputColumn == columnName)
- this.changeOutputColumn(columnName);
+ this.changeProblemType();
else
this.columnTableChangeDetected();
}
@@ -124,6 +162,8 @@ export class ColumnTableComponent implements AfterViewInit {
if (this.experiment.inputColumns.filter(x => x == columnName)[0] == undefined) {
this.experiment.inputColumns.push(columnName);
}
+ if (this.experiment.inputColumns.length == 1)
+ this.experiment.outputColumn = this.experiment.inputColumns[0];
}
else {
this.experiment.inputColumns = this.experiment.inputColumns.filter(x => x != columnName);
@@ -131,17 +171,21 @@ export class ColumnTableComponent implements AfterViewInit {
//TODO: da se zatamni kolona koja je unchecked
//this.experiment.encodings = this.experiment.encodings.filter(x => x.columnName != columnName); samo na kraju iz enkodinga skloni necekirane
this.experiment.nullValuesReplacers = this.experiment.nullValuesReplacers.filter(x => x.column != columnName);
- if (columnName == this.experiment.outputColumn)
- this.experiment.outputColumn = this.experiment.inputColumns[0];
+ if (columnName == this.experiment.outputColumn) {
+ if (this.experiment.inputColumns.length > 0)
+ this.experiment.outputColumn = this.experiment.inputColumns[0];
+ else
+ this.experiment.outputColumn = '-';
+ }
}
this.columnTableChangeDetected();
}
}
- changeOutputColumn(columnName: string) {
+ changeProblemType() {
if (this.experiment != undefined && this.dataset != undefined) {
let i = this.dataset.columnInfo.findIndex(x => x.columnName == this.experiment!.outputColumn);
- if (this.experiment.columnTypes[i] == ColumnType.numerical) {
+ if (i == -1 || this.experiment.columnTypes[i] == ColumnType.numerical) {
this.experiment.type = ProblemType.Regression;
}
else {
@@ -157,20 +201,30 @@ export class ColumnTableComponent implements AfterViewInit {
resetColumnEncodings(encodingType: Encoding) {
if (this.experiment != undefined && this.dataset != undefined) {
this.experiment.encodings = [];
- for (let i = 0; i < this.dataset?.columnInfo.length; i++) {
+ for (let i = 0; i < this.dataset.columnInfo.length; i++) {
this.experiment.encodings.push(new ColumnEncoding(this.dataset?.columnInfo[i].columnName, encodingType));
//console.log(this.experiment.encodings);
}
this.columnTableChangeDetected();
}
}
+ resetColumnEncodingsGlobalSetting(encodingType: Encoding) {
+ if (this.experiment != undefined && this.dataset != undefined) {
+ for (let i = 0; i < this.dataset.columnInfo.length; i++) {
+ if (this.experiment.columnTypes[i] == ColumnType.categorical && this.dataset.columnInfo[i].columnName != this.experiment.outputColumn) //promeni
+ this.experiment.encodings[i].encoding = encodingType;
+ }
+ this.columnTableChangeDetected();
+ }
+ }
openEncodingDialog() {
const dialogRef = this.dialog.open(EncodingDialogComponent, {
- width: '300px'
+ width: '400px',
+ data: { experiment: this.experiment, dataset: this.dataset }
});
dialogRef.afterClosed().subscribe(selectedEncoding => {
if (selectedEncoding != undefined)
- this.resetColumnEncodings(selectedEncoding);
+ this.resetColumnEncodingsGlobalSetting(selectedEncoding);
});
}
@@ -217,21 +271,24 @@ export class ColumnTableComponent implements AfterViewInit {
openSaveExperimentDialog() {
const dialogRef = this.dialog.open(SaveExperimentDialogComponent, {
- width: '400px'
+ width: '400px',
+ data: { experiment: this.experiment }
});
- 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) => {
- this.experiment._id = response._id;
- this.okPressed.emit();
- });
+ dialogRef.afterClosed().subscribe(experiment => {
+ if (experiment) {
+ Object.assign(this.experiment, experiment);
+ this.experiment._columnsSelected = true;
+ this.experimentChanged.emit();
+ console.log(this.experiment);
+ }
});
}
openUpdateExperimentDialog() {
this.experimentService.updateExperiment(this.experiment).subscribe((response) => {
- this.experiment = response;
+ Object.assign(this.experiment, response);
+ this.experiment._columnsSelected = true;
+ this.experimentChanged.emit();
Shared.openDialog("Izmena eksperimenta", "Uspešno ste izmenili podatke o eksperimentu.");
});
}
@@ -286,10 +343,20 @@ export class ColumnTableComponent implements AfterViewInit {
return '0';
}
saveExperiment() {
- this.openSaveExperimentDialog();
+ if (this.experiment.inputColumns.length == 0)
+ Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti.");
+ else if (this.experiment.inputColumns.length == 1)
+ Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti (mora postojati bar jedna ulazna i jedna izlazna kolona).");
+ else
+ this.openSaveExperimentDialog();
}
updateExperiment() {
- this.openUpdateExperimentDialog();
+ if (this.experiment.inputColumns.length == 0)
+ Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti.");
+ else if (this.experiment.inputColumns.length == 1)
+ Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti (mora postojati bar jedna ulazna i jedna izlazna kolona).");
+ else
+ this.openUpdateExperimentDialog();
}
@@ -312,10 +379,8 @@ export class ColumnTableComponent implements AfterViewInit {
hoverOverTab(index: number) {
if (index < 0) {
this.hoveringOverTab = null;
- this.tabToDisplay = this.selectedTab.value;
} else {
this.hoveringOverTab = this.tabs[index];
- this.tabToDisplay = this.tabs[index].value;
}
}
@@ -344,3 +409,5 @@ export class Tab {
public value: Table
) { }
}
+
+