Dodao prikaz treniranih modela u listi experimenta za svaki model.

3 files changed, 112 insertions, 51 deletions

diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css
index 62324d62..ada2dba0 100644
--- a/frontend/src/app/_elements/folder/folder.component.css
+++ b/frontend/src/app/_elements/folder/folder.component.css
@@ -210,4 +210,13 @@
 
 .form-hidden {
     display: none;
+}
+
+.predictor {
+    text-decoration: underline;
+}
+
+.highlight-exp {
+    /*font-size: 16px;*/
+    font-weight: 700;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index bff066be..8896e7e5 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -67,17 +67,38 @@
                 <app-form-dataset [ngClass]="{'form-hidden': type != FolderType.Dataset}" [forExperiment]="forExperiment"></app-form-dataset>
             </div>
             <div [ngClass]="{'form-hidden' : !listView}" class="list-view">
-                <div *ngFor="let file of filteredFiles; let i = index" class="list-item force-link" (click)="selectFile(file)">
-                    <div class="mx-2">
-                        {{file.name}}
+                <div *ngFor="let file of filteredFiles; let i = index">
+                    <div class="list-item force-link" (click)="selectFile(file)">
+                        <div class="mx-2" [ngClass]="{'highlight-exp' : selectedTab == TabType.MyExperiments}">
+                            {{file.name}}
+                        </div>
+                        <div class="mx-2 hover-hide">
+                            {{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)">
+                                <mat-icon>delete</mat-icon>
+                            </button>
+                        </div>
                     </div>
-                    <div class="mx-2 hover-hide">
-                        {{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)">
-                            <mat-icon>delete</mat-icon>
-                        </button>
+                    <div *ngIf="type == FolderType.Experiment" class="list-view">
+                        <div *ngFor="let predictor of predictorsForExp[file._id];" class="list-item">
+
+                            <div class="mx-3">
+                                <div class="f-row">
+                                    <mat-icon>subdirectory_arrow_right</mat-icon>
+                                    <div class="mx-1">{{predictor.name}}</div>
+                                </div>
+                            </div>
+                            <div class="mx-2 hover-hide">
+                                {{predictor.lastUpdated | date}}
+                            </div>
+                            <div class="mx-2 hover-show">
+                                <button class="btn-clear file-button" (click)="deleteFile(predictor, $event)">
+                                    <mat-icon>delete</mat-icon>
+                                </button>
+                            </div>
+                        </div>
                     </div>
 
                 </div>
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index dbbc55e7..665659a8 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -32,7 +32,7 @@ export class FolderComponent implements AfterViewInit {
   @Input() type: FolderType = FolderType.Dataset;
   @Input() forExperiment!: Experiment;
   @Input() startingTab!: TabType;
-
+  @Input() archive: boolean = false;
   newFileSelected: boolean = true;
 
   selectedFileIndex: number = -1;
@@ -136,44 +136,28 @@ export class FolderComponent implements AfterViewInit {
       this.folders[tab] = [];
     });
 
-    switch (this.type) {
-      case FolderType.Dataset:
-        this.datasetsService.getMyDatasets().subscribe((datasets) => {
-          this.folders[TabType.MyDatasets] = datasets;
-          if (selectedDatasetId) {
-            this.selectFile(datasets.filter(x => x._id == selectedDatasetId)[0]);
-          }
-        });
-        this.datasetsService.getPublicDatasets().subscribe((datasets) => {
-          this.folders[TabType.PublicDatasets] = datasets;
-        });
-        break;
-
-      case FolderType.Model:
-        this.modelsService.getMyModels().subscribe((models) => {
-          this.folders[TabType.MyModels] = models;
-          if (selectedModelId) {
-            this.selectFile(models.filter(x => x._id == selectedModelId)[0]);
-          }
-        });
-        /*this.modelsService.getMyModels().subscribe((models) => {
-          this.folders[TabType.PublicModels] = models;
-        });*/
-        this.folders[TabType.PublicModels] = [];
-        break;
-
-      case FolderType.Experiment:
-        this.experimentsService.getMyExperiments().subscribe((experiments) => {
-          this.folders[TabType.MyExperiments] = experiments;
-        });
-        this.predictorsService.getMyPredictors().subscribe((predictors) => {
-          this.predictors = predictors;
-          console.log(predictors);
-        });
-        break;
-      default:
-        console.error("Bad folder type.");
-        break;
+    if (this.archive) {
+      this.refreshDatasets(selectedDatasetId);
+      this.refreshModels(selectedModelId);
+      this.refreshExperiments();
+    } else {
+      switch (this.type) {
+        case FolderType.Dataset:
+          this.refreshDatasets(selectedDatasetId);
+          break;
+
+        case FolderType.Model:
+          this.refreshModels(selectedModelId);
+          break;
+
+        case FolderType.Experiment:
+          this.refreshExperiments();
+          break;
+
+        default:
+          console.error("Bad folder type.");
+          break;
+      }
     }
 
     if (!this._initialized) {
@@ -182,11 +166,56 @@ export class FolderComponent implements AfterViewInit {
       this.selectTab(this.startingTab);
       this._initialized = true;
     }
+  }
 
-    this.searchTermsChanged();
+  refreshModels(selectedModelId: string | null) {
+    this.modelsService.getMyModels().subscribe((models) => {
+      this.folders[TabType.MyModels] = models;
+      if (selectedModelId) {
+        this.selectFile(models.filter(x => x._id == selectedModelId)[0]);
+      }
+      this.searchTermsChanged();
+    });
+    /*this.modelsService.getMyModels().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;
+      if (selectedDatasetId) {
+        this.selectFile(datasets.filter(x => x._id == selectedDatasetId)[0]);
+      }
+      this.searchTermsChanged();
+    });
+    this.datasetsService.getPublicDatasets().subscribe((datasets) => {
+      this.folders[TabType.PublicDatasets] = datasets;
+      this.searchTermsChanged();
+    });
   }
 
-  predictors: Predictor[] = [];
+  refreshExperiments() {
+    this.experimentsService.getMyExperiments().subscribe((experiments) => {
+      this.folders[TabType.MyExperiments] = experiments;
+      this.predictorsService.getMyPredictors().subscribe((predictors) => {
+        this.predictorsForExp = {};
+        experiments.forEach(exp => {
+          this.predictorsForExp[exp._id] = predictors.filter(pred => pred.experimentId == exp._id);
+          /* TODO IZMENI OVO DA SE SETUJE NA BACKU AUTOMATSKI */
+          this.predictorsForExp[exp._id].forEach(pred => {
+            const model = this.folders[TabType.MyModels].find(model => model._id == pred.modelId);
+            pred.name = model?.name!;
+            pred.lastUpdated = model?.lastUpdated!;
+          })
+          /* ------------------------------------------------ */
+          this.searchTermsChanged();
+        })
+      });
+    });
+  }
 
   saveNewFile() {
     switch (this.type) {
@@ -212,6 +241,8 @@ export class FolderComponent implements AfterViewInit {
     }
   }
 
+  predictorsForExp: { [expId: string]: Predictor[] } = {}
+
   clearSearchTerm() {
     this.searchTerm = '';
     this.searchTermsChanged();