Merge branch 'redesign' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into redesign

7 files changed, 72 insertions, 40 deletions

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..e6a781be 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>
@@ -217,7 +217,7 @@
             <div class="ns-col rounded">
                 <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100">
                     <mat-label>Izlazna kolona</mat-label>
-                    <mat-select [(value)]="experiment.outputColumn" (selectionChange)="changeProblemType()">
+                    <mat-select [(value)]="experiment.outputColumn" (selectionChange)="outputColumnChanged()">
                         <mat-option *ngFor="let inputColumn of experiment.inputColumns" [value]="inputColumn">{{inputColumn}}</mat-option>
                         <mat-option *ngIf="experiment.inputColumns.length == 0" value="-">-</mat-option>
                     </mat-select>
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 ad78feaf..694b1a83 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -131,6 +131,7 @@ export class ColumnTableComponent implements AfterViewInit {
     }
     else {
       this.dataset = dataset;
+      this.experimentChanged.emit();
       this.columnsChecked = [];
       this.dataset.columnInfo.forEach(column => {
         if (this.experiment.inputColumns.find(x => x == column.columnName) != undefined)
@@ -157,9 +158,6 @@ export class ColumnTableComponent implements AfterViewInit {
     this.resetPagging();
     this.loadData();
     this.loaded = true;
-
-    this.updateCharts();
-    this.updatePieChart();
   }
 
   loadData(){
@@ -249,6 +247,19 @@ export class ColumnTableComponent implements AfterViewInit {
     }
   }
 
+  outputColumnChanged() {
+    let outputColReplacer = this.experiment.nullValuesReplacers.find(x => x.column == this.experiment.outputColumn);
+    let index = this.experiment.nullValuesReplacers.findIndex(x => x.column == this.experiment.outputColumn);
+    if (outputColReplacer != undefined) {
+      outputColReplacer.option = NullValueOptions.DeleteRows;
+      
+      let numOfRowsToDelete = (this.dataset!.columnInfo.filter(x => x.columnName == this.experiment.outputColumn)[0]).numNulls;
+      this.nullValOption[index] = "Obriši redove (" + numOfRowsToDelete + ")";
+    }
+
+    this.changeProblemType();
+  }
+
   changeProblemType() {
     if (this.experiment != undefined && this.dataset != undefined) {
       let i = this.dataset.columnInfo.findIndex(x => x.columnName == this.experiment!.outputColumn);
@@ -300,14 +311,26 @@ export class ColumnTableComponent implements AfterViewInit {
 
       if (selectedMissingValuesOption == NullValueOptions.DeleteColumns) {
         this.experiment.nullValues = NullValueOptions.DeleteColumns;
+
+        let outputColReplacer = this.experiment.nullValuesReplacers.find(x => x.column == this.experiment.outputColumn);
+
         this.experiment.nullValuesReplacers = [];
         for (let i = 0; i < this.experiment.inputColumns.length; i++) {
-          this.experiment.nullValuesReplacers.push({ //ovo zakomentarisano
-            column: this.experiment.inputColumns[i],
-            option: NullValueOptions.DeleteColumns,
-            value: ""
-          });
-          this.nullValOption[i] = "Obriši kolonu";
+          if (this.experiment.inputColumns[i] != this.experiment.outputColumn) {
+            this.experiment.nullValuesReplacers.push({ //ovo zakomentarisano
+              column: this.experiment.inputColumns[i],
+              option: NullValueOptions.DeleteColumns,
+              value: ""
+            });
+            this.nullValOption[i] = "Obriši kolonu";
+          }
+          else {
+            if (outputColReplacer != undefined) {
+              this.experiment.nullValuesReplacers.push(outputColReplacer);
+              let numOfRowsToDelete = (this.dataset.columnInfo.filter(x => x.columnName == this.experiment!.inputColumns[i])[0]).numNulls;
+              this.nullValOption[i] = (outputColReplacer.option == NullValueOptions.DeleteRows) ? "Obriši redove (" + numOfRowsToDelete + ")" : "Popuni sa " + outputColReplacer.value + "";
+            }
+          }
         }
         //obrisi kolone koje sadrze nedostajuce vrednosti iz input kolona 
         /*for (let i = 0; i < this.dataset.columnInfo.length; i++) {
@@ -336,7 +359,8 @@ export class ColumnTableComponent implements AfterViewInit {
   }
   openMissingValuesDialog() {
     const dialogRef = this.dialog.open(MissingvaluesDialogComponent, {
-      width: '500px'
+      width: '500px',
+      panelClass: 'custom-modalbox'
     });
     dialogRef.afterClosed().subscribe(selectedMissingValuesOption => {
       if (selectedMissingValuesOption != undefined)
diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index 4a06faa4..9e7644b6 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -182,8 +182,8 @@
 
 .file-bottom-buttons {
     position: absolute;
-    bottom: 15px;
-    right: 15px;
+    bottom: 5px;
+    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;