diff options
Diffstat (limited to 'frontend/src/app/_elements')
5 files changed, 94 insertions, 38 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 0477b7be..f7f07e62 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -198,7 +198,7 @@ table ::ng-deep .mat-form-field-wrapper { font-size: large; position: relative; background-color: var(--ns-primary); - width: 10rem; + width: 13rem; height: 2.3rem; border-color: var(--ns-primary); border-style: solid; 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.html b/frontend/src/app/_elements/folder/folder.component.html index da04b219..de9a6353 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -59,6 +59,11 @@ <button *ngIf="this.selectedFile && selectedTab == TabType.File" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)"> <mat-icon>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> + </button> + + <!-- <button class="btn-clear file-button"> <mat-icon>zoom_out_map</mat-icon> </button> --> @@ -76,7 +81,10 @@ {{file.lastUpdated | date}} </div> <div class="mx-2 hover-show" *ngIf="selectedTab !== TabType.PublicDatasets && selectedTab !== TabType.PublicModels"> - <button class="btn-clear file-button" (click)="deleteFile(file, $event)"> + <button *ngIf="selectedTab==TabType.MyDatasets" class="btn-clear file-button" (click)="downloadFile(file,$event)" style="display: inline-block;"> + <mat-icon>download</mat-icon> + </button> + <button class="btn-clear file-button" (click)="deleteFile(file, $event)" style="display: inline-block;"> <mat-icon>delete</mat-icon> </button> </div> @@ -87,7 +95,7 @@ </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 735bfdaa..254298fb 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -13,6 +13,7 @@ import { SignalRService } from 'src/app/_services/signal-r.service'; import { FormModelComponent } from '../form-model/form-model.component'; import { ActivatedRoute, Router } from '@angular/router'; import Predictor from 'src/app/_data/Predictor'; +import FileSaver from 'file-saver'; @Component({ selector: 'app-folder', @@ -106,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; @@ -117,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) { @@ -139,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] = []; }); @@ -191,12 +187,18 @@ export class FolderComponent implements AfterViewInit { this.folders[TabType.PublicModels] = models; this.searchTermsChanged(); });*/ - this.folders[TabType.PublicModels] = []; + + this.modelsService.getPublicModels().subscribe((models) => { + this.folders[TabType.PublicModels] = models; + this.searchTermsChanged(); + }); + //this.folders[TabType.PublicModels] = []; } 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]); } @@ -233,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(); }, () => { @@ -282,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: @@ -303,6 +308,20 @@ export class FolderComponent implements AfterViewInit { break; } } + downloadFile(file: FolderFile, event: Event) { + event.stopPropagation(); + if (this.type==FolderType.Dataset) { + const fileId=(<Dataset>file).fileId; + const name=(<Dataset>file).name; + const ext=(<Dataset>file).extension; + if(fileId!=undefined) + this.datasetsService.downloadFile(fileId).subscribe((response)=>{ + FileSaver.saveAs(response,name+ext); + + }); + + } + } addFile(file: FolderFile, event: Event) { event.stopPropagation(); @@ -312,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: |