Dodao prikaz treniranih modela u listi experimenta za svaki model.

11 files changed, 127 insertions, 147 deletions

diff --git a/frontend/src/app/_data/Predictor.ts b/frontend/src/app/_data/Predictor.ts
index e15ae8f9..55d610ed 100644
--- a/frontend/src/app/_data/Predictor.ts
+++ b/frontend/src/app/_data/Predictor.ts
@@ -1,22 +1,28 @@
-export default class Predictor {
-    _id: string = '';
+import { FolderFile } from "./FolderFile";
+
+export default class Predictor extends FolderFile {
     constructor(
-        public name: string = 'Novi prediktor',
+        name: string = 'Novi prediktor',
         public description: string = '',
         public inputs: string[] = [],
         public output: string = '',
         public isPublic: boolean = false,
         public accessibleByLink: boolean = false,
-        public dateCreated: Date = new Date(),
+        dateCreated: Date = new Date(),
+        lastUpdated: Date = new Date(),
         public uploaderId: string = '',
         //public finalMetrics: Metric[] = []
-    ) { }
+        public experimentId: string = "",
+        public modelId: string = "",
+    ) {
+        super(name, dateCreated, lastUpdated);
+    }
 }
 
 export class Metric {
     constructor(
         public name: string = '',
         public jsonValue: string = ''
-    ) {}
+    ) { }
 
 }
\ No newline at end of file
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();
diff --git a/frontend/src/app/_pages/archive/archive.component.html b/frontend/src/app/_pages/archive/archive.component.html
index fc3c4763..f9cce56b 100644
--- a/frontend/src/app/_pages/archive/archive.component.html
+++ b/frontend/src/app/_pages/archive/archive.component.html
@@ -1,5 +1,5 @@
 <div class="d-flex flex-column align-items-center my-5">
-    <app-folder></app-folder>
+    <app-folder [archive]="true" [startingTab]="TabType.MyExperiments"></app-folder>
 
     <!--<div class="my-5" style="height: fit-content;">
         <app-playlist [datasets]="publicDatasets"></app-playlist>
diff --git a/frontend/src/app/_pages/archive/archive.component.ts b/frontend/src/app/_pages/archive/archive.component.ts
index 47f96218..bb4bd9e9 100644
--- a/frontend/src/app/_pages/archive/archive.component.ts
+++ b/frontend/src/app/_pages/archive/archive.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import Dataset from 'src/app/_data/Dataset';
+import { TabType } from 'src/app/_elements/folder/folder.component';
 import { DatasetsService } from 'src/app/_services/datasets.service';
 
 @Component({
@@ -10,6 +11,7 @@ import { DatasetsService } from 'src/app/_services/datasets.service';
 export class ArchiveComponent implements OnInit {
 
   publicDatasets: Dataset[] = [];
+  TabType = TabType;
 
   constructor(private datasetsService: DatasetsService) { }
 
diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
deleted file mode 100644
index 66b3755e..00000000
--- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { DatasetsService } from 'src/app/_services/datasets.service';
-import Dataset from 'src/app/_data/Dataset';
-import {Router} from '@angular/router'
-import { JwtHelperService } from '@auth0/angular-jwt';
-import { CookieService } from 'ngx-cookie-service';
-import shared from 'src/app/Shared';
-
-@Component({
-  selector: 'app-filter-datasets',
-  templateUrl: './filter-datasets.component.html',
-  styleUrls: ['./filter-datasets.component.css']
-})
-export class FilterDatasetsComponent implements OnInit {
-
-  shared = shared;
-  publicDatasets?: Dataset[];
-  term: string = "";
-  constructor(private datasets: DatasetsService,private router:Router, private cookie: CookieService) {
-    this.datasets.getPublicDatasets().subscribe((datasets) => {
-      this.publicDatasets = datasets;
-    });
-  }
-
-  ngOnInit(): void {
-
-  }
-  addDataset(dataset: Dataset):void{
-    //this.router.navigateByUrl('/predict?id='+id);
-    const helper = new JwtHelperService();
-    const decodedToken = helper.decodeToken(this.cookie.get("token"));
-    const newDataset={...dataset};
-    newDataset._id = "";
-    newDataset.isPublic = false;
-    newDataset.lastUpdated = new Date();
-    newDataset.uploaderId = decodedToken.uploaderId;
-    let name=prompt("Unesite naziv dataset-a",newDataset.name);
-    newDataset.name=name as string;
-    if(name!=null && name!="")
-    this.datasets.addDataset(newDataset).subscribe((response:string)=>{
-      shared.openDialog("Obaveštenje", "Uspešno ste dodali dataset sa nazivom " + newDataset.name);
-    },(error)=>{
-      shared.openDialog("Obaveštenje", "U svojoj kolekciji već imate dataset sa ovim imenom. Molimo Vas da unesete drugo ime.");
-    });
-  
-  };
-
-}
diff --git a/frontend/src/app/_pages/settings/settings.component.css b/frontend/src/app/_pages/settings/settings.component.css
deleted file mode 100644
index e69de29b..00000000
--- a/frontend/src/app/_pages/settings/settings.component.css
+++ /dev/null
diff --git a/frontend/src/app/_pages/settings/settings.component.html b/frontend/src/app/_pages/settings/settings.component.html
deleted file mode 100644
index 4ab2a415..00000000
--- a/frontend/src/app/_pages/settings/settings.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>settings works!</p>
diff --git a/frontend/src/app/_pages/settings/settings.component.spec.ts b/frontend/src/app/_pages/settings/settings.component.spec.ts
deleted file mode 100644
index a3a508b0..00000000
--- a/frontend/src/app/_pages/settings/settings.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SettingsComponent } from './settings.component';
-
-describe('SettingsComponent', () => {
-  let component: SettingsComponent;
-  let fixture: ComponentFixture<SettingsComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ SettingsComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SettingsComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/_pages/settings/settings.component.ts b/frontend/src/app/_pages/settings/settings.component.ts
deleted file mode 100644
index 19862fb0..00000000
--- a/frontend/src/app/_pages/settings/settings.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-settings',
-  templateUrl: './settings.component.html',
-  styleUrls: ['./settings.component.css']
-})
-export class SettingsComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}