From 305dac6f0e327a2582dc4f93e83794b5169d7c8f Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Wed, 25 May 2022 23:45:24 +0200
Subject: Popravio dosta bugova vezane za prebacivanje izmedju novog dataseta,
 i postojeceg dataseta, isto i za modele, u folderu. Popravio presporo
 prebacivanje sa jednog taba na drugi u folderu. Popravio pogresan tip stope
 normalizacije na backendu.

---
 .../src/app/_elements/folder/folder.component.html |  19 ++-
 .../src/app/_elements/folder/folder.component.ts   | 160 ++++++++++++---------
 .../_elements/form-model/form-model.component.html |   2 +-
 3 files changed, 107 insertions(+), 74 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index afb6085d..ebee92d2 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -58,8 +58,13 @@
         <!--{{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}}-->
         <div class="folder-inside bg-blur">
             <div class="file-content" [ngClass]="{'form-hidden' : listView}">
-                <app-form-model [ngClass]="{'form-hidden': type != FolderType.Model}" [forExperiment]="forExperiment" [hideProblemType]="(forExperiment ? true : false)" [forProblemType]="(forExperiment ? forExperiment.type : ProblemType.Regression)" (editEvent)="onFileChange()"></app-form-model>
-                <app-form-dataset [ngClass]="{'form-hidden': type != FolderType.Dataset}" [forExperiment]="forExperiment" (editEvent)="onFileChange()"></app-form-dataset>
+                <!-- New File -->
+                <app-form-model #newModel [ngClass]="{'form-hidden': type != FolderType.Model || !newFileSelected}" [forExperiment]="forExperiment" [hideProblemType]="(forExperiment ? true : false)" [forProblemType]="(forExperiment ? forExperiment.type : ProblemType.Regression)"></app-form-model>
+                <app-form-dataset #newDataset [ngClass]="{'form-hidden': type != FolderType.Dataset || !newFileSelected}" [forExperiment]="forExperiment"></app-form-dataset>
+                <!-- Selected File -->
+                <app-form-model #selectedModel [ngClass]="{'form-hidden': type != FolderType.Model  || newFileSelected}" [forExperiment]="forExperiment" [hideProblemType]="(forExperiment ? true : false)" [forProblemType]="(forExperiment ? forExperiment.type : ProblemType.Regression)"
+                    (editEvent)="onFileChange()"></app-form-model>
+                <app-form-dataset #selectedDataset [ngClass]="{'form-hidden': type != FolderType.Dataset  || newFileSelected}" [forExperiment]="forExperiment" (editEvent)="onFileChange()"></app-form-dataset>
             </div>
             <div [ngClass]="{'form-hidden' : !listView}" class="list-view">
                 <div *ngFor="let file of filteredFiles; let i = index">
@@ -105,7 +110,7 @@
                     </div>
 
                 </div>
-                <div class="list-add" [ngSwitch]="type" *ngIf="privacy != Privacy.Public" >
+                <div class="list-add" [ngSwitch]="type" *ngIf="privacy != Privacy.Public">
                     <!-- {{privacy == Privacy.Public ? 'javni ' : ' '}} -->
                     <button mat-raised-button *ngSwitchCase="FolderType.Dataset" (click)="selectNewFile()">Dodaj izvor podataka</button>
                     <button mat-raised-button *ngSwitchCase="FolderType.Model" (click)="selectNewFile()">Dodaj konfiguraciju neuronske mreže</button>
@@ -152,17 +157,17 @@
     <div [ngSwitch]="newFileSelected" *ngIf="!listView">
         <div class="file-bottom-buttons" *ngIf="selectedTab != TabType.NewFile">
             <div class="file-bottom-buttons-helper">
-            <button *ngIf="this.selectedFile && selectedTab == TabType.File && privacy != Privacy.Public" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)">
+                <button *ngIf="this.selectedFile && selectedTab == TabType.File && privacy != Privacy.Public" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)">
                 <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;">
+                <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 matTooltip="Preuzmi" matTooltipPosition="before">download</mat-icon>
             </button>
-        </div>
+            </div>
             <!-- <button class="btn-clear file-button">
                 <mat-icon>zoom_out_map</mat-icon>
             </button> -->
         </div>
     </div>
-    
+
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index 93ef9043..de1dfae9 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -23,8 +23,10 @@ import isEqual from 'lodash.isequal';
 })
 export class FolderComponent implements AfterViewInit {
 
-  @ViewChild(FormDatasetComponent) formDataset!: FormDatasetComponent;
-  @ViewChild(FormModelComponent) formModel!: FormModelComponent;
+  @ViewChild('selectedDataset') formDataset!: FormDatasetComponent;
+  @ViewChild('selectedModel') formModel!: FormModelComponent;
+  @ViewChild('newDataset') formNewDataset!: FormDatasetComponent;
+  @ViewChild('newModel') formNewModel!: FormModelComponent;
 
   @Input() folderName: string = 'Moji podaci';
   @Input() files!: FolderFile[]
@@ -41,8 +43,6 @@ export class FolderComponent implements AfterViewInit {
   selectedFile?: FolderFile;
   hoveringOverFileIndex: number = -1;
 
-  fileToDisplay?: FolderFile;
-
   @Output() selectedFileChanged: EventEmitter<FolderFile> = new EventEmitter();
   @Output() fileFromRoute: EventEmitter<FolderFile> = new EventEmitter();
   @Output() okPressed: EventEmitter<string> = new EventEmitter();
@@ -68,59 +68,70 @@ export class FolderComponent implements AfterViewInit {
   }
 
   displayFile() {
-    if (this.type == FolderType.Dataset) {
-      this.formDataset.dataset = <Dataset>this.fileToDisplay;
-      this.formDataset.existingFlag = false;
-    }
-    else if (this.type == FolderType.Model)
-      this.formModel.newModel = <Model>this.fileToDisplay;
-  }
-
-  hoverOverFile(i: number) {
-    /*this.hoveringOverFileIndex = i;
-    if (i != -1) {
-      this.fileToDisplay = this.files[i];
+    if (this.newFileSelected) {
+      if (this.type == FolderType.Dataset) {
+        this.formNewDataset.dataset = <Dataset>this.newFile;
+        this.formNewDataset.existingFlag = false;
+      }
+      else if (this.type == FolderType.Model)
+        this.formNewModel.newModel = <Model>this.newFile;
     } else {
-      if (this.newFileSelected) {
-        this.fileToDisplay = this.newFile;
-      } else {
-        this.fileToDisplay = this.files[this.selectedFileIndex];
+      if (this.type == FolderType.Dataset) {
+        this.formDataset.dataset = <Dataset>this.selectedFile;
+        this.formDataset.existingFlag = false;
       }
+      else if (this.type == FolderType.Model)
+        this.formModel.newModel = <Model>this.selectedFile;
     }
-    this.displayFile();*/
   }
 
   selectNewFile() {
     if (!this.newFile) {
       this.createNewFile();
     }
-    this.fileToDisplay = this.newFile;
     this.newFileSelected = true;
     this.listView = false;
     this.displayFile();
+
+    this.selectedTab = TabType.NewFile;
+
     if (this.type == FolderType.Dataset) {
-      this.formDataset.clear();
+      this.formNewDataset.clear();
     }
   }
 
   selectFile(file?: FolderFile) {
     this.formDataset.resetPagging();
     this.selectedFile = file;
-    Object.assign(this.lastFileData, this.selectedFile);
-    this.fileToDisplay = file;
+    this.updateLastFileData(file);
     if (this.type == FolderType.Experiment && file) {
       this.router.navigate(['/experiment/' + file._id]);
     }
     this.newFileSelected = false;
     this.listView = false;
     this.selectedFileChanged.emit(this.selectedFile);
-    this.selectTab(TabType.File);
     this.displayFile();
 
+    this.selectedTab = TabType.File;
+
     if (this.type == FolderType.Dataset)
       this.formDataset.loadExisting();
   }
 
+  updateLastFileData(file: FolderFile | undefined) {
+    if (!file) return;
+
+    Object.assign(this.lastFileData, file);
+    if (this.type == FolderType.Model) {
+      const lastModel = (<Model>this.lastFileData)
+      lastModel.layers = [];
+      (<Model>file).layers.forEach(layer => {
+        const clone = Object.assign({}, layer);
+        lastModel.layers.push(clone);
+      })
+    }
+  }
+
   goToExperimentPageWithPredictor(file: FolderFile, predictor: Predictor) {
     this.router.navigate(['/experiment/p/' + predictor._id]);
   }
@@ -172,7 +183,7 @@ export class FolderComponent implements AfterViewInit {
     if (!this._initialized) {
       this.files = this.folders[this.startingTab];
       this.filteredFiles = [];
-      this.selectTab(this.startingTab);
+      setTimeout(() => this.selectTab(this.startingTab));
       this._initialized = true;
     }
   }
@@ -238,7 +249,7 @@ export class FolderComponent implements AfterViewInit {
     this.loadingAction = true;
     switch (this.type) {
       case FolderType.Dataset:
-        this.formDataset!.uploadDataset((dataset: Dataset) => {
+        this.formNewDataset!.uploadDataset((dataset: Dataset) => {
           this.newFile = undefined;
           this.loadingAction = false;
           this.okPressed.emit();
@@ -250,7 +261,7 @@ export class FolderComponent implements AfterViewInit {
           });
         break;
       case FolderType.Model:
-        this.formModel.newModel.type = this.formModel.forProblemType;
+        this.formNewModel.newModel.type = this.formModel.forProblemType;
         this.modelsService.addModel(this.formModel.newModel).subscribe(model => {
           this.newFile = undefined;
           this.loadingAction = false;
@@ -300,10 +311,29 @@ export class FolderComponent implements AfterViewInit {
 
   onFileChange() {
     setTimeout(() => {
-      this.selectedFileHasChanges = !((this.selectedTab == TabType.NewFile) || isEqual(this.selectedFile, this.lastFileData));
+      this.selectedFileHasChanges = !((this.selectedTab == TabType.NewFile) || this.checkFileDataEqualToLastFileData());
     });
   }
 
+  checkFileDataEqualToLastFileData() {
+    if (this.type == FolderType.Model) {
+      let layersEqual = true;
+      const oldModel = (<Model>this.lastFileData);
+      const selectedModel = (<Model>this.selectedFile)
+      const oldLayers = oldModel.layers;
+      oldModel.layers = selectedModel.layers;
+      const objEqual = isEqual(this.selectedFile, oldModel);
+      oldLayers.forEach((layer, index) => {
+        if (!isEqual(layer, selectedModel.layers[index])) {
+          layersEqual = false;
+        }
+      });
+      return objEqual && layersEqual;
+    } else {
+      return isEqual(this.selectedFile, this.lastFileData);
+    }
+  }
+
   updateFile() {
     const file = this.selectedFile;
     this.loadingAction = true;
@@ -324,7 +354,7 @@ export class FolderComponent implements AfterViewInit {
   fileUpdatedSuccess() {
     this.loadingAction = false;
     this.selectedFileHasChanges = false;
-    Object.assign(this.lastFileData, this.selectedFile);
+    this.updateLastFileData(this.selectedFile);
     this.refreshFiles();
     this.selectedFileChanged.emit(this.selectedFile);
   }
@@ -336,16 +366,16 @@ export class FolderComponent implements AfterViewInit {
       case FolderType.Dataset:
         const dataset = <Dataset>file;
         Shared.openYesNoDialog("Obriši izvor podataka", "Eksperimenti i trenirani modeli nad ovim izvorom podataka će takođe biti obrisani, da li ste sigurni da želite da obrišete izvor: " + dataset.name + "?", () => {
-          if(this.selectedTab==TabType.MyDatasets){
-          this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1);
-          this.files.splice(this.files.indexOf(file), 1);
+          if (this.selectedTab == TabType.MyDatasets) {
+            this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1);
+            this.files.splice(this.files.indexOf(file), 1);
           }
           this.loadingAction = true;
           this.datasetsService.deleteDataset(dataset).subscribe((response) => {
             this.loadingAction = false;
-            if(this.selectedTab==TabType.File){
+            if (this.selectedTab == TabType.File) {
               this.refreshDatasets(null);
-              this.selectedFile=undefined!;
+              this.selectedFile = undefined!;
               setTimeout(() => {
                 this.selectTab(TabType.MyDatasets);
               });
@@ -357,16 +387,16 @@ export class FolderComponent implements AfterViewInit {
       case FolderType.Model:
         const model = <Model>file;
         Shared.openYesNoDialog("Obriši konfiguraciju neuronske mreže", "Trenirani modeli za ovu konfiguraciju će takođe biti obrisani, da li ste sigurni da želite da obrišete konfiguraciju: " + model.name + "?", () => {
-          if(this.selectedTab==TabType.MyModels){
-          this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1);
-          this.files.splice(this.files.indexOf(file), 1);
+          if (this.selectedTab == TabType.MyModels) {
+            this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1);
+            this.files.splice(this.files.indexOf(file), 1);
           }
           this.loadingAction = true;
           this.modelsService.deleteModel(<Model>file).subscribe((response) => {
             this.loadingAction = false;
-            if(this.selectedTab==TabType.File){
+            if (this.selectedTab == TabType.File) {
               this.refreshModels(null);
-              this.selectedFile=undefined!;
+              this.selectedFile = undefined!;
               setTimeout(() => {
                 this.selectTab(TabType.MyModels);
               });
@@ -389,20 +419,20 @@ export class FolderComponent implements AfterViewInit {
         } else {
           const experiment = <Experiment>file;
           Shared.openYesNoDialog("Obriši eksperiment", "Trenirani modeli za ovaj eksperiment će takođe biti obrisani, da li ste sigurni da želite da obrišete eksperiment: " + experiment.name + "?", () => {
-            if(this.selectedTab==TabType.MyExperiments){
-            this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1);
-            this.files.splice(this.files.indexOf(file), 1);
+            if (this.selectedTab == TabType.MyExperiments) {
+              this.filteredFiles.splice(this.filteredFiles.indexOf(file), 1);
+              this.files.splice(this.files.indexOf(file), 1);
             }
             this.loadingAction = true;
             this.experimentsService.deleteExperiment(experiment).subscribe((response) => {
-            this.loadingAction = false;
-            if(this.selectedTab==TabType.File){
-              this.refreshExperiments();
-              this.selectedFile=undefined!;
-              setTimeout(() => {
-                this.selectTab(TabType.MyExperiments);
-              });
-            }
+              this.loadingAction = false;
+              if (this.selectedTab == TabType.File) {
+                this.refreshExperiments();
+                this.selectedFile = undefined!;
+                setTimeout(() => {
+                  this.selectTab(TabType.MyExperiments);
+                });
+              }
             });
           });
         }
@@ -489,21 +519,19 @@ export class FolderComponent implements AfterViewInit {
   hoverTab: TabType = TabType.None;
 
   selectTab(tab: TabType) {
-    setTimeout(() => {
-      if (tab == TabType.NewFile) {
-        this.selectNewFile();
-        this.selectedFile=undefined!;
-      }
-
-      this.listView = this.getListView(tab);
-      this.type = this.getFolderType(tab);
-      this.privacy = this.getPrivacy(tab);
-      this.selectedTab = tab;
-      this.files = this.folders[tab];
+    if (tab == TabType.NewFile) {
+      this.selectNewFile();
+    } else if (tab == TabType.File) {
+      this.selectFile(this.selectedFile);
+    }
+    this.listView = this.getListView(tab);
+    this.type = this.getFolderType(tab);
+    this.privacy = this.getPrivacy(tab);
+    this.selectedTab = tab;
+    this.files = this.folders[tab];
 
-      if (tab !== TabType.File && tab !== TabType.NewFile)
-        this.searchTermsChanged();
-    });
+    if (tab !== TabType.File && tab !== TabType.NewFile)
+      this.searchTermsChanged();
   }
 
   getListView(tab: TabType) {
diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html
index 1133eb52..9051a2d4 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -229,7 +229,7 @@
 
                 <mat-form-field appearance="fill" class="mat-fix">
                     <mat-label>Stopa regularizacije</mat-label>
-                    <mat-select [(ngModel)]="newModel.layers[i].regularisationRate">
+                    <mat-select [(ngModel)]="newModel.layers[i].regularisationRate" (selectionChange)="editEvent.emit();">
                         <mat-option *ngFor="let option of Object.keys(RegularisationRate); let optionName of Object.values(RegularisationRate)" [value]="option">
                             {{ optionName }}
                         </mat-option>
-- 
cgit v1.2.3