diff options
Diffstat (limited to 'frontend/src/app/_elements')
8 files changed, 73 insertions, 45 deletions
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts index c2bd3262..cba5252a 100644 --- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts @@ -14,16 +14,16 @@ export class PieChartComponent implements AfterViewInit { @Input()uniqueValuesPercent?: number[] = []; updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){ - console.log(this.uniqueValues, this.uniqueValuesPercent); - const newPieChartData = { - datasets: [{ - label: "Population (millions)", - backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], - data: [2478,5267,734,784,433], - }] - - } - }; + //console.log(this.uniqueValues, this.uniqueValuesPercent); + this.pieChartData.datasets = [{ + label: "%", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"], + data: uniqueValuesPercent, + }]; + this.pieChartData.labels = uniqueValues + console.log(this.uniqueValues, this.uniqueValuesPercent); + this.myChart?.update() + }; @ViewChild('piechart') chartRef!: ElementRef; constructor() { } @@ -33,13 +33,30 @@ export class PieChartComponent implements AfterViewInit { label: "Population (millions)", backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], data: [2478,5267,734,784,433] - }] + }], labels : [""] } + myChart?: Chart; ngAfterViewInit(): void { - const myChart = new Chart(this.chartRef.nativeElement, { + let rem = 100; + const percents : number[] = [] + this.uniqueValuesPercent?.forEach(percent => { + rem-=percent*100; + percents.push(percent*100) + + }) + const data = { + datasets: [{ + label: "%", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"], + data: [...percents, rem] + }], labels : [...this.uniqueValues!,"Ostalo"] + } + + const myChart = new Chart(this.chartRef.nativeElement, { type: 'pie', - data: this.pieChartData, + data: data + , options: { /*title: { display: true, diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index f7f07e62..311773f7 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -22,7 +22,7 @@ table.fixed td { table.fixed th { overflow: hidden; - max-width: 120px; + max-width: 250px; min-width: 120px; vertical-align: middle; background-color: var(--ns-primary-50); 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 31c32dfd..bb5914bd 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -35,7 +35,7 @@ </thead> <tbody> <tr *ngFor="let row of tableData; let i = index"> - <th>#{{i}}</th> + <th>#{{((this.begin/10)+1)*10-10+i+1}}</th> <td *ngFor="let col of row; let j = index" [ngClass]="{'text-disabled' : !columnsChecked[j]}"> <div class="text-overflow"> {{col}} @@ -200,7 +200,7 @@ </mat-menu> </div> <div *ngIf="colInfo.numNulls == 0" class="text-left"> - Nema null vrednosti. + Nema nedostajućih vrednosti. </div> </td> </tr> 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 9fdb6936..ad78feaf 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -83,8 +83,8 @@ export class ColumnTableComponent implements AfterViewInit { let i = 0; this.boxplotComp.changes.subscribe(() => { const bps = this.boxplotComp.toArray(); - this.dataset?.columnInfo.forEach(colInfo => { - if (this.experiment.columnTypes[i] == ColumnType.numerical) { + this.dataset?.columnInfo.forEach((colInfo, index) => { + if (this.experiment.columnTypes[index] == ColumnType.numerical) { bps[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median); i++; } @@ -96,8 +96,11 @@ export class ColumnTableComponent implements AfterViewInit { //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) { + console.log(pieChart) + this.dataset?.columnInfo.forEach((colInfo, index) => { + console.log(i) + if (this.experiment.columnTypes[index] == ColumnType.categorical) { + console.log("prosao IF") pieChart[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent); i++; } diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index 4a06faa4..1a1e70ec 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -183,7 +183,7 @@ .file-bottom-buttons { position: absolute; bottom: 15px; - right: 15px; + right: 4%; display: flex; flex-direction: row-reverse; } diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 97ccc311..97ae0d23 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -57,10 +57,10 @@ <div class="file-content" [ngClass]="{'form-hidden' : listView}"> <div class="file-bottom-buttons" *ngIf="selectedTab != TabType.NewFile"> <button *ngIf="this.selectedFile && selectedTab == TabType.File" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)"> - <mat-icon>delete</mat-icon> + <mat-icon matTooltip="Obriši" matTooltipPosition="right">delete</mat-icon> </button> <button *ngIf="this.selectedFile && selectedTab==TabType.File && FolderType.Dataset==this.type" class="btn-clear file-button" (click)="downloadFile(this.selectedFile,$event)" style="display: inline-block;"> - <mat-icon>download</mat-icon> + <mat-icon matTooltip="Preuzmi" matTooltipPosition="before">download</mat-icon> </button> @@ -82,20 +82,20 @@ </div> <div class="mx-2 hover-show" *ngIf="selectedTab !== TabType.PublicDatasets && selectedTab !== TabType.PublicModels"> <button *ngIf="selectedTab==TabType.MyDatasets" class="btn-clear file-button" (click)="downloadFile(file,$event)" style="display: inline-block;"> - <mat-icon>download</mat-icon> + <mat-icon matTooltip="Preuzmi" matTooltipPosition="before">download</mat-icon> </button> <button class="btn-clear file-button" (click)="deleteFile(file, $event)" style="display: inline-block;"> - <mat-icon>delete</mat-icon> + <mat-icon matTooltip="Obriši" matTooltipPosition="right">delete</mat-icon> </button> </div> <div class="mx-2 hover-show" *ngIf="selectedTab == TabType.PublicDatasets || selectedTab == TabType.PublicModels"> <button class="btn-clear file-button" (click)="addFile(file, $event)"> - <mat-icon>note_add</mat-icon> + <mat-icon matTooltip="Uvezi" matTooltipPosition="right">note_add</mat-icon> </button> </div> </div> <div *ngIf="type == FolderType.Experiment" class="list-view"> - <div *ngFor="let predictor of predictorsForExp[file._id];" class="list-item"> + <div *ngFor="let predictor of predictorsForExp[file._id];" class="list-item" (click)="goToExperimentPageWithPredictor(file, predictor)"> <div class="mx-3"> <div class="f-row"> diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index f13635e9..254298fb 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -107,7 +107,7 @@ export class FolderComponent implements AfterViewInit { this.selectedFile = file; this.fileToDisplay = file; if (this.type == FolderType.Experiment && file) { - this.router.navigate(['/experiment/', file._id]); + this.router.navigate(['/experiment/' + file._id]); } this.newFileSelected = false; this.listView = false; @@ -118,12 +118,10 @@ export class FolderComponent implements AfterViewInit { if (this.type == FolderType.Dataset) this.formDataset.loadExisting(); } - /* - goToExperimentPage(file: FolderFile) { - console.log(<Experiment>file); - //this.router.navigate(['/experiment/', this.experiment._id]); + + goToExperimentPageWithPredictor(file: FolderFile, predictor: Predictor) { + this.router.navigate(['/experiment/' + file._id + "/" + predictor._id]); } - */ createNewFile() { if (this.type == FolderType.Dataset) { @@ -140,10 +138,7 @@ export class FolderComponent implements AfterViewInit { _initialized: boolean = false; refreshFiles(selectedDatasetId: string | null = null, selectedModelId: string | null = null) { - this.files = [] - this.filteredFiles.length = 0; - this.folders[TabType.NewFile] = []; - this.folders[TabType.File] = []; + this.tabsToShow.forEach(tab => { this.folders[tab] = []; }); @@ -203,6 +198,7 @@ export class FolderComponent implements AfterViewInit { refreshDatasets(selectedDatasetId: string | null) { this.datasetsService.getMyDatasets().subscribe((datasets) => { this.folders[TabType.MyDatasets] = datasets; + console.log(this.filteredFiles); if (selectedDatasetId) { this.selectFile(datasets.filter(x => x._id == selectedDatasetId)[0]); } @@ -239,7 +235,7 @@ export class FolderComponent implements AfterViewInit { case FolderType.Dataset: this.formDataset!.uploadDataset((dataset: Dataset) => { this.newFile = undefined; - Shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se procesira."); + Shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se obradi."); this.refreshFiles(); }, () => { @@ -288,17 +284,20 @@ export class FolderComponent implements AfterViewInit { deleteFile(file: FolderFile, event: Event) { event.stopPropagation(); - //console.log('delete'); + this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1); + this.files.splice(this.files.indexOf(file), 1); switch (this.type) { case FolderType.Dataset: this.datasetsService.deleteDataset(<Dataset>file).subscribe((response) => { - this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1); - this.refreshFiles(null); + Shared.openDialog("Obaveštenje", "Uspešno ste obrisali odabrani izvor podataka."); + //this.filteredFiles.splice(this.files.indexOf(file), 1); + //this.refreshFiles(); }); break; case FolderType.Model: this.modelsService.deleteModel(<Model>file).subscribe((response) => { - this.refreshFiles(null); + Shared.openDialog("Obaveštenje", "Uspešno ste obrisali odabranu konfiguraciju neuronske mreže."); + //this.refreshFiles(); }); break; case FolderType.Experiment: @@ -332,13 +331,22 @@ export class FolderComponent implements AfterViewInit { (<Dataset>file).isPreProcess = true; (<Dataset>file).isPublic = false; this.datasetsService.stealDataset(<Dataset>file).subscribe((response) => { - this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1); + Shared.openDialog("Obaveštenje", "Uspešno ste dodali javni izvor podataka u vašu kolekciju."); this.refreshFiles(null); + }, (error:any) => { + if (error.error == "Dataset with this name already exists") { + Shared.openDialog("Obaveštenje", "Izvor podataka sa ovim imenom postoji u vašoj kolekciji."); + } }); break; case FolderType.Model: - this.modelsService.addModel(<Model>file).subscribe((response) => { + this.modelsService.stealModel(<Model>file).subscribe((response) => { + Shared.openDialog("Obaveštenje", "Uspešno ste dodali javnu konfiguraciju neuronske mreže u vašu kolekciju."); this.refreshFiles(null); + }, (error:any) => { + if (error.error == "Model already exisits or validation size is not between 0-1") { + Shared.openDialog("Obaveštenje", "Model sa ovim imenom postoji u vašoj kolekciji."); + } }); break; case FolderType.Experiment: diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts index c9e2fc8e..9e6082c4 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -84,7 +84,7 @@ export class FormModelComponent implements AfterViewInit { } addLayer() { - if (this.newModel.hiddenLayers < 128) { + if (this.newModel.hiddenLayers < 150) { this.newModel.layers.push(new Layer(this.newModel.layers.length, this.selectedActivation, this.selectedNumberOfNeurons, this.selectedRegularisation, this.selectedRegularisationRate)); this.newModel.hiddenLayers += 1; |