diff options
8 files changed, 66 insertions, 66 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 bff8b022..e5d4cd23 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 @@ -2,48 +2,54 @@ <div class="col-2"> </div> <div class="col-3"> - <label for="name" class="col-form-label">Naziv dataseta:</label> - <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name"> + <label for="name" class="col-form-label">Naziv dataseta:</label> + <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name"> - <label for="desc" class="col-sm-2 col-form-label">Opis:</label> - <div> - <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea> - </div> + <label for="desc" class="col-sm-2 col-form-label">Opis:</label> + <div> + <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea> + </div> - <label for="checkboxIsPublic" class="form-check-label mt-3 mb-1">Želite li da dataset bude javan? + <label for="checkboxIsPublic" class="form-check-label mt-3 mb-1">Želite li da dataset bude javan? <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.isPublic" (change)="checkAccessible()" type="checkbox" value="" id="checkboxIsPublic"> - </label> - - <label for="checkboxAccessibleByLink" class="form-check-label">Želite li da bude deljiv linkom? + </label> + + <label for="checkboxAccessibleByLink" class="form-check-label">Želite li da bude deljiv linkom? <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.accessibleByLink" type="checkbox" value="" id="checkboxAccessibleByLink"> </label> </div> <div class="col-1"> </div> - <div class="col-4 mt-4"> + <div class="col-3 mt-4"> - <input list="delimiterOptions" placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" - [(ngModel)]="dataset.delimiter" (input)="update()"> - <datalist id="delimiterOptions"> + <label for="type" class="col-form-label">Izaberite delimiter za .csv fajl</label> + <select id="delimiterOptions" class="form-select" name="type" [(ngModel)]="dataset.delimiter" (change)="update()"> + <option + *ngFor="let option of delimiterOptions"> + {{ option }} + </option> + </select> + <!-- + <input list="delimiterOptions" placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" [(ngModel)]="dataset.delimiter" (input)="update()"> + <datalist id="delimiterOptions"> <option *ngFor="let option of delimiterOptions">{{option}}</option> </datalist> - - <label for="type" class="form-check-label my-5">Da li .csv ima header? +--> + <label for="type" class="form-check-label my-5">Da li .csv ima header? <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="dataset.hasHeader" type="checkbox" value="" id="checkboxHeader" checked> </label> - <br> - <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" - accept=".csv"> + <br> + <input id="fileInput" class="form-control btn-lg" type="file" class="upload" (change)="changeListener($event)" accept=".csv"> </div> </div> <div class="px-5 mt-5"> - <app-datatable [tableData]="tableData"></app-datatable> + <app-datatable [tableData]="tableData"></app-datatable> </div> <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> + <button (click)="uploadDataset()" class="btn btn-lg col-4" style="background-color:#003459; color:white;">Dodaj izvor podataka</button> +</div>
\ No newline at end of file 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 3e1b5c73..1f395105 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 @@ -13,10 +13,9 @@ import { CsvParseService } from 'src/app/_services/csv-parse.service'; }) export class AddNewDatasetComponent { - @Output() newDatasetAdded = new EventEmitter<string>(); @ViewChild(DatatableComponent) datatable!: DatatableComponent; - delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano "," + delimiterOptions: Array<string> = [",", ";", "|", "razmak", "novi red"]; //podrazumevano "," csvRecords: any[] = []; files: File[] = []; @@ -29,6 +28,7 @@ export class AddNewDatasetComponent { constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private csv: CsvParseService) { this.dataset = new Dataset(); + this.dataset.delimiter = ','; } //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo? @@ -36,8 +36,6 @@ export class AddNewDatasetComponent { changeListener($event: any): void { this.files = $event.srcElement.files; if (this.files.length == 0 || this.files[0] == null) { - //console.log("NEMA FAJLA"); - //this.loaded.emit("not loaded"); this.tableData.hasInput = false; return; } @@ -56,7 +54,7 @@ export class AddNewDatasetComponent { 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) + const result = this.csv.csvToArray(fileReader.result, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter) if (this.dataset.hasHeader) this.csvRecords = result.splice(0, 11); @@ -93,7 +91,6 @@ export class AddNewDatasetComponent { this.dataset.uploaderId = shared.userId; 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."); 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 56a3b3c9..f244a882 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -1,40 +1,34 @@ <div> - <!--Sklonjeno ucitavanje novog dataseta i sve opcije u vezi sa tim, premesteno u add-new-dataset--> + <!--Sklonjeno ucitavanje novog dataseta i sve opcije u vezi sa tim, premesteno u add-new-dataset--> <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5"> - <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()" - [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}"> + <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()" [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}"> Izaberite dataset iz kolekcije </button> <h3 class="mt-3 mx-3">ili</h3> - <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()" - [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}"> + <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()" [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}"> Dodajte novi dataset </button> </div> - <div class="px-5 my-2"> - <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga" - [(ngModel)]="term"> - </div> - <div class="px-5" *ngIf="showMyDatasets"> + <div class="px-5 my-2"> + <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> + </div> + <div class="px-5" *ngIf="showMyDatasets"> <div class="overflow-auto" style="max-height: 500px;"> <ul class="list-group"> - <li class="list-group-item p-3" *ngFor="let dataset of myDatasets|filter:term" - [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}"> - <app-item-dataset name="usersDataset" [dataset]="dataset" - (click)="selectThisDataset(dataset);"></app-item-dataset> + <li class="list-group-item p-3" *ngFor="let dataset of myDatasets|filter:term" [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}"> + <app-item-dataset name="usersDataset" [dataset]="dataset" (click)="selectThisDataset(dataset);"></app-item-dataset> </li> </ul> </div> <div class="px-5 mt-5"> <app-datatable [tableData]="tableData"></app-datatable> </div> - </div> + </div> - <app-add-new-dataset [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset" - (newDatasetAdded)="refreshMyDatasets()"> - </app-add-new-dataset> + <app-add-new-dataset [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset"> + </app-add-new-dataset> </div>
\ No newline at end of file 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 73dbf2d2..b2f8857d 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -52,13 +52,6 @@ export class DatasetLoadComponent implements OnInit { //this.resetCbsAndRbs(); //TREBA DA SE DESI } - refreshMyDatasets() { - this.datasets.getMyDatasets().subscribe((datasets) => { - this.myDatasets = datasets; - this.showMyDatasets = true; - }); - } - selectThisDataset(dataset: Dataset) { this.selectedDataset = dataset; this.selectedDatasetLoaded = false; @@ -88,10 +81,19 @@ export class DatasetLoadComponent implements OnInit { return true; } + refreshMyDatasets(selectedDatasetId: string | null) { + this.datasets.getMyDatasets().subscribe((datasets) => { + this.myDatasets = datasets.reverse(); + this.showMyDatasets = true; + this.selectedDataset = this.myDatasets.filter(x => x._id == selectedDatasetId)[0]; + this.resetSelectedDataset(); + }); + } + ngOnInit(): void { if (this.signalRService.hubConnection) { - this.signalRService.hubConnection.on("NotifyDataset", _ => { - this.refreshMyDatasets(); + this.signalRService.hubConnection.on("NotifyDataset", (dName: string, dId: string) => { + this.refreshMyDatasets(dId); }); } else { console.warn("Dataset-Load: No connection!"); diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html index a1e6abd6..1afb1ecb 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.html +++ b/frontend/src/app/_elements/model-load/model-load.component.html @@ -51,7 +51,7 @@ <label for="type" class="col-form-label">Tip problema: </label> </div> <div class="col-2"> - <select id=typeOptions class="form-select" name="type" [(ngModel)]="newModel.type" (change)="filterOptions()"> + <select id="typeOptions" class="form-select" name="type" [(ngModel)]="newModel.type" (change)="filterOptions()"> <option *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" [value]="option"> @@ -75,7 +75,7 @@ <label for="optimizer" class="col-form-label">Optimizacija: </label> </div> <div class="col-2"> - <select id=optimizerOptions class="form-select" name="optimizer" [(ngModel)]="newModel.optimizer"> + <select id="optimizerOptions" class="form-select" name="optimizer" [(ngModel)]="newModel.optimizer"> <option *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" [value]="option"> @@ -99,7 +99,7 @@ <label for="lossFunction" class="col-form-label">Funkcija troška: </label> </div> <div class="col-2"> - <select id=lossFunctionOptions class="form-select" name="lossFunction" [(ngModel)]="newModel.lossFunction" aria-checked="true"> + <select id="lossFunctionOptions" class="form-select" name="lossFunction" [(ngModel)]="newModel.lossFunction" aria-checked="true"> <option *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)" [value]="option"> @@ -160,7 +160,7 @@ <label for="outputLayerActivationFunction" class="col-form-label" style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label> </div> <div class="col-2 mt-2"> - <select id=outputLayerActivationFunctionOptions class="form-select" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> + <select id="outputLayerActivationFunctionOptions" class="form-select" name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> <option *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" [value]="option"> diff --git a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html index 06e74093..572e8c4c 100644 --- a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html +++ b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html @@ -1,8 +1,8 @@ <h2 mat-dialog-title class="text-muted">{{data.title}}</h2> <div mat-dialog-content class="mt-4" style="color: rgb(81, 76, 76);"> - {{data.message}} + {{data.message}} </div> <div mat-dialog-actions class="d-flex justify-content-center mt-4"> - <button mat-button cdkFocusInitial (click)="onYesClick()" style="background-color: lightgray;">Da</button> - <button mat-button cdkFocusInitial (click)="onNoClick()" style="background-color: lightgray;">Ne</button> + <button mat-button cdkFocusInitial (click)="onYesClick()" class="btn-lg" style="background-color: #003459; color:white;">Da</button> + <button mat-button cdkFocusInitial (click)="onNoClick()" class="btn-lg" style="background-color: lightgray;">Ne</button> </div>
\ No newline at end of file diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts index 84fdbf0f..75c8e0d8 100644 --- a/frontend/src/app/experiment/experiment.component.ts +++ b/frontend/src/app/experiment/experiment.component.ts @@ -199,9 +199,9 @@ export class ExperimentComponent implements OnInit { this.experimentsService.addExperiment(this.experiment).subscribe((response) => { this.experiment = response; - Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran."); - - this.router.navigate(['/training', this.experiment._id]); + Shared.openYesNoDialog("Obaveštenje", "Eksperiment je uspešno kreiran. Da li želite da pređete na treniranje modela?", () => { + this.router.navigate(['/training', this.experiment._id]); + }); }, (error) => { if (error.error == "Experiment with this name exists") { Shared.openDialog("Greška", "Eksperiment sa unetim nazivom već postoji u Vašoj kolekciji. Unesite neki drugi naziv."); diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts index c82a6b79..cf5d44ea 100644 --- a/frontend/src/app/training/training.component.ts +++ b/frontend/src/app/training/training.component.ts @@ -42,7 +42,8 @@ export class TrainingComponent implements OnInit{ selectThisExperiment(experiment: Experiment) { this.selectedExperiment = experiment; - this.modelLoadComponent!.newModel.type = this.selectedExperiment.type; + if (this.modelLoadComponent) + this.modelLoadComponent.newModel.type = this.selectedExperiment.type; } selectModel(model: Model) { |