diff options
Diffstat (limited to 'frontend/src/app/_elements')
12 files changed, 283 insertions, 142 deletions
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html index eb68b54c..bff8b022 100644 --- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html +++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html @@ -41,9 +41,9 @@ </div> <div class="px-5 mt-5"> - <app-datatable [data]="csvRecords" [hasHeader]="dataset.hasHeader"></app-datatable> + <app-datatable [tableData]="tableData"></app-datatable> </div> -<div class="d-flex flex-row align-items-center justify-content-center w-100"> +<div class="d-flex flex-row align-items-center justify-content-center w-100 my-2"> <button (click)="uploadDataset()" class="btn btn-lg col-4" style="background-color:#003459; color:white;">Dodaj izvor podataka</button> </div> diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts index 7421fbcf..3adc16f3 100644 --- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts +++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts @@ -4,7 +4,8 @@ import Dataset from 'src/app/_data/Dataset'; import { DatasetsService } from 'src/app/_services/datasets.service'; import { ModelsService } from 'src/app/_services/models.service'; import shared from 'src/app/Shared'; -import { DatatableComponent } from '../datatable/datatable.component'; +import { DatatableComponent, TableData } from '../datatable/datatable.component'; +import { CsvParseService } from 'src/app/_services/csv-parse.service'; @Component({ selector: 'app-add-new-dataset', @@ -14,13 +15,10 @@ import { DatatableComponent } from '../datatable/datatable.component'; export class AddNewDatasetComponent { @Output() newDatasetAdded = new EventEmitter<string>(); - @ViewChild(DatatableComponent) datatable?: DatatableComponent; + @ViewChild(DatatableComponent) datatable!: DatatableComponent; delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano "," - //hasHeader: boolean = true; - hasInput: boolean = false; - csvRecords: any[] = []; files: File[] = []; rowsNumber: number = 0; @@ -28,7 +26,9 @@ export class AddNewDatasetComponent { dataset: Dataset; //dodaj ! potencijalno - constructor(private ngxCsvParser: NgxCsvParser, private modelsService: ModelsService, private datasetsService: DatasetsService) { + tableData: TableData = new TableData(); + + constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private csv: CsvParseService) { this.dataset = new Dataset(); } @@ -39,12 +39,13 @@ export class AddNewDatasetComponent { if (this.files.length == 0 || this.files[0] == null) { //console.log("NEMA FAJLA"); //this.loaded.emit("not loaded"); - this.hasInput = false; + this.tableData.hasInput = false; return; } else - this.hasInput = true; + this.tableData.hasInput = true; + this.tableData.loaded = false; this.update(); } @@ -53,34 +54,27 @@ export class AddNewDatasetComponent { if (this.files.length < 1) return; - this.datatable!.loaded = false; - this.datatable!.hasInput = this.hasInput; - - this.ngxCsvParser.parse(this.files[0], { header: false, delimiter: (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter }) - .pipe().subscribe((result) => { - - console.log('Result', result); - if (result.constructor === Array) { - if(this.dataset.hasHeader) - this.csvRecords = result.splice(0,11); - else - this.csvRecords=result.splice(0,10); - if (this.dataset.hasHeader) - this.rowsNumber = this.csvRecords.length - 1; - else - this.rowsNumber = this.csvRecords.length; - this.colsNumber = this.csvRecords[0].length; - - if (this.dataset.hasHeader) - this.dataset.header = this.csvRecords[0]; - - this.datatable!.data = this.csvRecords; - this.datatable!.hasHeader = this.dataset.hasHeader; - this.datatable!.loaded = true; - } - }, (error: NgxCSVParserError) => { - console.log('Error', error); - }); + const fileReader = new FileReader(); + fileReader.onload = (e) => { + if (typeof fileReader.result === 'string') { + const result = this.csv.csvToArray(fileReader.result, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter) + + if (this.dataset.hasHeader) + this.csvRecords = result.splice(0, 11); + else + this.csvRecords = result.splice(0, 10); + + this.colsNumber = result[0].length; + this.rowsNumber = result.length; + + this.tableData.data = this.csvRecords + this.tableData.hasHeader = this.dataset.hasHeader; + this.tableData.loaded = true; + this.tableData.numCols = this.colsNumber; + this.tableData.numRows = this.rowsNumber; + } + } + fileReader.readAsText(this.files[0]); } checkAccessible() { @@ -96,17 +90,17 @@ export class AddNewDatasetComponent { this.modelsService.uploadData(this.files[0]).subscribe((file) => { //console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id); - this.dataset.fileId = file._id; - this.dataset.username = shared.username; - - this.datasetsService.addDataset(this.dataset).subscribe((dataset) => { - this.newDatasetAdded.emit("added"); - shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se procesira."); - }, (error) => { - shared.openDialog("Neuspeo pokušaj!", "Izvor podataka sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset."); - }); //kraj addDataset subscribe + this.dataset.fileId = file._id; + this.dataset.username = shared.username; + + this.datasetsService.addDataset(this.dataset).subscribe((dataset) => { + this.newDatasetAdded.emit("added"); + shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se procesira."); + }, (error) => { + shared.openDialog("Neuspeo pokušaj!", "Izvor podataka sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset."); + }); //kraj addDataset subscribe }, (error) => { - + }); //kraj uploadData subscribe } diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html index 09487b3b..6ab58021 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -30,7 +30,7 @@ </ul> </div> <div class="px-5 mt-5"> - <app-datatable [data]="datasetFile" [hasHeader]="datasetHasHeader"></app-datatable> + <app-datatable [tableData]="tableData"></app-datatable> </div> </div> diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts index 7329033c..dc78ab77 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -3,7 +3,7 @@ import { AddNewDatasetComponent } from '../add-new-dataset/add-new-dataset.compo import { ModelsService } from 'src/app/_services/models.service'; import shared from 'src/app/Shared'; import Dataset from 'src/app/_data/Dataset'; -import { DatatableComponent } from 'src/app/_elements/datatable/datatable.component'; +import { DatatableComponent, TableData } from 'src/app/_elements/datatable/datatable.component'; import { DatasetsService } from 'src/app/_services/datasets.service'; import { CsvParseService } from 'src/app/_services/csv-parse.service'; import { Output, EventEmitter } from '@angular/core'; @@ -17,8 +17,8 @@ export class DatasetLoadComponent { @Output() selectedDatasetChangeEvent = new EventEmitter<Dataset>(); - @ViewChild(AddNewDatasetComponent) addNewDatasetComponent?: AddNewDatasetComponent; - @ViewChild(AddNewDatasetComponent) datatable?: DatatableComponent; + @ViewChild(AddNewDatasetComponent) addNewDatasetComponent!: AddNewDatasetComponent; + @ViewChild(AddNewDatasetComponent) datatable!: DatatableComponent; datasetLoaded: boolean = false; selectedDatasetLoaded: boolean = false; @@ -27,10 +27,8 @@ export class DatasetLoadComponent { myDatasets?: Dataset[]; existingDatasetSelected: boolean = false; selectedDataset?: Dataset; - otherDataset?: Dataset; - otherDatasetFile?: any[]; - datasetFile?: any[]; - datasetHasHeader?: boolean = true; + + tableData: TableData = new TableData(); term: string = ""; @@ -63,27 +61,20 @@ export class DatasetLoadComponent { this.selectedDataset = dataset; this.selectedDatasetLoaded = false; this.existingDatasetSelected = true; - this.datasetHasHeader = this.selectedDataset.hasHeader; + this.tableData.hasHeader = this.selectedDataset.hasHeader; + + this.tableData.hasInput = true; + this.tableData.loaded = false; this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => { if (file) { - console.log(file); - this.datatable!.hasInput = true; - this.datatable!.loaded = true; - this.datasetFile = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); - /*for (let i = this.datasetFile.length - 1; i >= 0; i--) { //moguce da je vise redova na kraju fajla prazno i sl. - if (this.datasetFile[i].length != this.datasetFile[0].length) - this.datasetFile[i].pop(); - else - break; //nema potrebe dalje - }*/ - console.log(this.datatable!.data); - console.log(this.datasetFile); - console.log(this.datatable!.hasInput); + this.tableData.loaded = true; + this.tableData.numRows = this.selectedDataset!.rowCount; + this.tableData.numCols = this.selectedDataset!.columnInfo.length; + this.tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); //this.resetCbsAndRbs(); //TREBA DA SE DESI //this.refreshThreeNullValueRadioOptions(); //TREBA DA SE DESI this.selectedDatasetLoaded = true; - //this.scrollToNextForm(); this.selectedDatasetChangeEvent.emit(this.selectedDataset); } @@ -91,17 +82,7 @@ export class DatasetLoadComponent { } resetSelectedDataset(): boolean { - const temp = this.selectedDataset; - this.selectedDataset = this.otherDataset; - this.otherDataset = temp; - const tempFile = this.datasetFile; - this.datasetFile = this.otherDatasetFile; - this.otherDatasetFile = tempFile; - this.selectedDatasetChangeEvent.emit(this.selectedDataset); - return true; } - - } diff --git a/frontend/src/app/_elements/datatable/datatable.component.html b/frontend/src/app/_elements/datatable/datatable.component.html index b6cbd303..8db62aff 100644 --- a/frontend/src/app/_elements/datatable/datatable.component.html +++ b/frontend/src/app/_elements/datatable/datatable.component.html @@ -1,39 +1,43 @@ -PRE IFA -{{hasInput}} -<div *ngIf="data && hasInput"> - PROSLO IF - <div class="table-responsive" style="height: 34rem; overflow: auto; border-radius: 5px;" class="mh-5"> - <div *ngIf="!loaded" style="background-color: #003459; width: 100%; height: 100%;" +<div *ngIf="tableData.hasInput"> + <div> + <div *ngIf="!tableData.loaded" backgroundColor="secondary" style="width: 100%; height: 100%;" class="d-flex justify-content-center align-items-center"> <app-loading></app-loading> </div> - <div *ngIf="loaded"> - <table *ngIf="data.length > 0 && hasHeader && data[0].length > 0" class="table table-bordered table-light"> - <thead> - <tr> - <th *ngFor="let item of data[0]; let i = index">{{item}}</th> - </tr> - </thead> - <tbody> - <tr *ngFor="let row of data | slice:1"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> - - <table *ngIf="data.length > 0 && !hasHeader && data[0].length > 0" class="table table-bordered table-light"> - <tbody> - <tr *ngFor="let row of data"> - <td *ngFor="let col of row">{{col}}</td> - </tr> - </tbody> - </table> + <div *ngIf="tableData.loaded && tableData.data"> + <div id="info" *ngIf="tableData.data.length > 0 && tableData.data[0].length > 0" + class="d-flex flex-row justify-content-center align-items-center"> + <div class="fs-5 mb-3"> + Tabela {{tableData.numCols}}x{{tableData.numRows}} + </div> + </div> + <div class="table-responsive" style="overflow: auto; border-radius: 5px;"> + <table *ngIf="tableData.data.length > 0 && tableData.hasHeader && tableData.data[0].length > 0" class="table table-bordered table-light"> + <thead> + <tr> + <th *ngFor="let item of tableData.data[0]; let i = index">{{item}}</th> + </tr> + </thead> + <tbody> + <tr *ngFor="let row of tableData.data | slice:1"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + <tr> + <td colspan="100" class="text-lg-center fs-6">+ {{tableData.numRows - 11}} redova...</td> + </tr> + </tbody> + </table> + <table *ngIf="tableData.data.length > 0 && !tableData.hasHeader && tableData.data[0].length > 0" class="table table-bordered table-light"> + <tbody> + <tr *ngFor="let row of tableData.data"> + <td *ngFor="let col of row">{{col}}</td> + </tr> + <tr> + <td colspan="100" class="text-lg-center fs-6">+ {{tableData.numRows - 10}} redova...</td> + </tr> + </tbody> + </table> + </div> </div> </div> - - <div id="info" *ngIf="data.length > 0 && data[0].length > 0"> - <br> - <span *ngIf="hasHeader">{{data.length - 1}} x {{data[0].length}}</span> - <span *ngIf="!hasHeader">{{data.length}} x {{data[0].length}}</span> - </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/datatable/datatable.component.ts b/frontend/src/app/_elements/datatable/datatable.component.ts index 19fb204e..82374f4d 100644 --- a/frontend/src/app/_elements/datatable/datatable.component.ts +++ b/frontend/src/app/_elements/datatable/datatable.component.ts @@ -7,12 +7,7 @@ import { Component, Input, OnInit } from '@angular/core'; }) export class DatatableComponent implements OnInit { - @Input() hasHeader?: boolean = true; - - @Input() data?: any[] = []; - - hasInput = false; - loaded = false; + @Input() tableData!: TableData; constructor() { } @@ -20,3 +15,14 @@ export class DatatableComponent implements OnInit { } } + +export class TableData { + constructor( + public hasHeader = true, + public hasInput = false, + public loaded = false, + public numRows = 0, + public numCols = 0, + public data?: any[][] + ) { } +} diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.css b/frontend/src/app/_elements/item-dataset/item-dataset.component.css index e69de29b..dc851671 100644 --- a/frontend/src/app/_elements/item-dataset/item-dataset.component.css +++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.css @@ -0,0 +1,23 @@ +.card{ + margin-top:0; + padding: 0; +} +.p-2{ + margin: 0; + padding: 0; +} +hr{ + margin: 0; + padding: 0; +} +b{ + margin-left: 5px; + margin-right: 10px; +} +th{ + margin: 10px; + padding: 10px; +} +p{ + text-align: justify; +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.html b/frontend/src/app/_elements/item-dataset/item-dataset.component.html index dc4221f4..11ff61c3 100644 --- a/frontend/src/app/_elements/item-dataset/item-dataset.component.html +++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.html @@ -1,16 +1,41 @@ <div class="card" style="min-width: 12rem;"> - <div class="card-header"> - {{dataset.name}} +<div class="card-header d-flex mb-2 justify-content-" style="padding: 0;margin: 0;"> + + <div class=" p-2 float-left "><b style="color: gray;">Naziv</b></div> + <div class=" p-2 float-left"><b>{{dataset.name}}</b></div> +</div> +<div class="card-body overflow-hidden"> + <b style="color: gray;">Opis</b> + <hr style="width: 20%;"> <p> {{dataset.description}}</p> + <hr> + <div class="d-flex justify-content-center"> + <div class=" p-2" > + <h4><span class="badge bg-secondary">{{dataset.extension}}</span></h4> + </div> + <div class="p-2"> + <span class="material-icons">{{visibleicon}}</span> + </div> + <div class="p-2"> + <span class="material-icons">{{accessibleicon}}</span> + </div> </div> - <div class="card-body overflow-hidden"> - <p class="card-text"> - {{dataset.description}} - </p> - <table class="table table-bordered table-sm"> - <thead> - <th scope="col" *ngFor="let column of dataset.header">{{column}}</th> - <!-- treba da se namesti da kad nema hedere, da korisnik unese nazive kolona pa da se taj heder prikaze --> - </thead> - </table> - </div> -</div>
\ No newline at end of file + <hr> + <div class="col text-center"> +<button (click)=toggleDisplayDiv() class="btn btn-primary btn-sm active " mat-raised-button color="primary" style="margin: 0.5rem;">Kolone</button> + <div [hidden]="isShowDiv" style="overflow: scroll; overflow-y: hidden;"> + <table class="table table-bordered table-md" > + <thead> + <th scope="col" *ngFor="let column of dataset.columnInfo" >{{column.columnName}}</th> + </thead> + </table> + </div> +</div> + <table> + <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;"> <b> Kreirano</b></span></td><td>{{dataset.dateCreated |date}}</td></tr> + <tr><td><span class="material-icons">edit_calendar</span></td><td><span style="color: grey;"> <b> Poslednja izmena</b></span></td><td>{{dataset.lastUpdated |date}}</td></tr> + </table> + +</div> +<div class="card-footer"> + + </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.ts b/frontend/src/app/_elements/item-dataset/item-dataset.component.ts index e12de34d..44b95310 100644 --- a/frontend/src/app/_elements/item-dataset/item-dataset.component.ts +++ b/frontend/src/app/_elements/item-dataset/item-dataset.component.ts @@ -9,7 +9,32 @@ import Dataset from 'src/app/_data/Dataset'; export class ItemDatasetComponent { @Input() dataset: Dataset = new Dataset(); - + visibleicon=''; + accessibleicon=''; + isShowDiv = true; + toggleDisplayDiv() { + this.isShowDiv = !this.isShowDiv; + } constructor() { } + ngOnInit(): void { + if(this.dataset.isPublic==true) + { + this.visibleicon='visibility' + } + else + { + this.visibleicon='visibility_off'; + } + + if(this.dataset.accessibleByLink==true) + { + this.accessibleicon='link' + } + else + { + this.accessibleicon='link_off'; + } + } } + diff --git a/frontend/src/app/_elements/item-model/item-model.component.css b/frontend/src/app/_elements/item-model/item-model.component.css index e69de29b..5ea24c72 100644 --- a/frontend/src/app/_elements/item-model/item-model.component.css +++ b/frontend/src/app/_elements/item-model/item-model.component.css @@ -0,0 +1,23 @@ +.card{ + margin: 0.5rem; + padding: 0; +} +.p-2{ + margin: 0; + padding: 0; +} +hr{ + margin: 0; + padding: 0; +} +b{ + margin-left: 5px; + margin-right: 10px; +} +th{ + margin: 10px; + padding: 10px; +} +p{ + text-align: justify; +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-model/item-model.component.html b/frontend/src/app/_elements/item-model/item-model.component.html index 695c580e..447f023e 100644 --- a/frontend/src/app/_elements/item-model/item-model.component.html +++ b/frontend/src/app/_elements/item-model/item-model.component.html @@ -1,13 +1,58 @@ <div class="card" style="min-width: 12rem;"> - <div class="card-header"> - {{model.name}} + <div class="card-header d-flex mb-2 justify-content-" style="padding: 0;margin: 0;"> + + <div class=" p-2 float-left "><b style="color: gray;">Naziv</b></div> + <div class=" p-2 float-left"><b>{{model.name}}</b></div> </div> - <div class="card-body overflow-hidden"> + <div class="card-body overflow-hidden"> + <app-graph [model]="model"></app-graph> + <br> + <b style="color: gray;">Opis</b><hr style="width: 20%;"> <p class="card-text"> - {{"Opis: "+ model.description}}<br> - {{"Datum kreiranja: " + model.dateCreated}}<br> - {{"Poslednje ažuriranje: " + model.lastUpdated}}<br> + {{model.description}} </p> - <app-graph [model]="model"></app-graph> + <hr> + + <div> + <table> + <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;"> <b> Kreirano</b></span></td><td>{{model.dateCreated |date}}</td></tr> + <tr><td><span class="material-icons">edit_calendar</span></td><td><span style="color: grey;"> <b> Poslednja izmena</b></span></td><td>{{model.lastUpdated |date}}</td></tr> + </table> + </div> + </div> + <button (click)=toggleDisplayDiv() class="btn btn-default btn-lg " mat-raised-button color="primary" style="margin: 0.5rem;">Parametri</button> + <div [hidden]="isShowDiv"> + <!-- <table> + <tr> + <td><span style="color: grey;"> <b> Nasumično raspoređivanje podataka</b></span></td><td>{{randomOrd}}</td> + </tr> + <tr> + <td><span style="color: grey;"> <b> Podela podataka na trening i test skup</b></span></td><td>{{randomOrd}}</td> + </tr> + <tr> + <td><span style="color: grey;"> <b> Veličina skupa za treniranje</b></span></td><td>{{randomOrd}}</td> + </tr> + </table>--> + <hr> + <table> + <tr> + <td><span style="color: grey;"> <b> Tip problema</b></span></td><td>{{model.type}}</td> + </tr> + <tr> + <td><span style="color: grey;"> <b> Optimizator</b></span></td><td>{{model.optimizer}}</td> + </tr> + <tr> + <td> <span style="color: grey;"> <b> Funkcija gubitka</b></span></td><td>{{model.lossFunction}}</td> + </tr> + <tr> + <td><span style="color: grey;"> <b> Batch size</b></span></td><td>{{model.batchSize}}</td> + </tr> + <tr> + <td><span style="color: grey;"> <b> Broj epoha</b></span></td><td>{{model.epochs}}</td> + </tr> + + </table> + + </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-model/item-model.component.ts b/frontend/src/app/_elements/item-model/item-model.component.ts index 7f85f43f..b837667b 100644 --- a/frontend/src/app/_elements/item-model/item-model.component.ts +++ b/frontend/src/app/_elements/item-model/item-model.component.ts @@ -9,10 +9,25 @@ import Model from 'src/app/_data/Model'; export class ItemModelComponent implements OnInit { @Input() model: Model = new Model(); + isShowDiv = true; + randomOrd=''; + toggleDisplayDiv() { + this.isShowDiv = !this.isShowDiv; + } + constructor() { } ngOnInit(): void { + /*if(this.model.randomOrder) + { + this.randomOrd='Da'; + } + else + { + this.randomOrd='Ne'; + } +*/ } } |