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

19 files changed, 224 insertions, 120 deletions

diff --git a/backend/api/api/Controllers/DatasetController.cs b/backend/api/api/Controllers/DatasetController.cs
index 80c9f2a9..6fb139bd 100644
--- a/backend/api/api/Controllers/DatasetController.cs
+++ b/backend/api/api/Controllers/DatasetController.cs
@@ -196,7 +196,7 @@ namespace api.Controllers
                 
                 string ext = ".csv";
 
-                //nesto
+                
 
                 //Check Directory
                 if (!Directory.Exists(folderPath))
@@ -227,8 +227,6 @@ namespace api.Controllers
 
                 dataset.fileId = fileModel1._id;
 
-                //nesto
-
 
                 dataset.isPreProcess = true;
                 _datasetService.Create(dataset);
@@ -281,19 +279,4 @@ namespace api.Controllers
 
         }
     }
-}
-
-/*
-{
-    "_id": "",
-    "name": "name",
-    "description": "description",
-    "header" : ["ag","rt"],
-    "fileId" : "652",
-    "extension": "csb",
-    "isPublic" : true,
-    "accessibleByLink": true,
-    "dateCreated": "dateCreated",
-    "lastUpdated" : "proba12"
-}
-*/
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/backend/api/api/Controllers/ModelController.cs b/backend/api/api/Controllers/ModelController.cs
index c9e36ca4..be30ae6f 100644
--- a/backend/api/api/Controllers/ModelController.cs
+++ b/backend/api/api/Controllers/ModelController.cs
@@ -149,6 +149,26 @@ namespace api.Controllers
             return model;
         }
 
+
+        // GET api/<ModelController>/byid/{id}
+        [HttpGet("byid/{id}")]
+        [Authorize(Roles = "User,Guest")]
+        public ActionResult<Model> GetModelById(string id)
+        {
+            string userId = getUserId();
+
+            if (userId == null)
+                return BadRequest();
+
+            var model = _modelService.GetOneModelById(userId, id);
+
+            if (model == null)
+                return NotFound($"Model with id = {id} not found");
+
+            return model;
+        }
+
+
         //odraditi da vraca modele prema nekom imenu
 
 
@@ -191,6 +211,8 @@ namespace api.Controllers
                 return BadRequest("Bad parameters!");*/
 
             model.uploaderId = getUserId();
+            model.dateCreated = DateTime.Now;
+            model.lastUpdated = DateTime.Now;
 
             var existingModel = _modelService.GetOneModel(model.uploaderId, model.name);
 
@@ -212,6 +234,44 @@ namespace api.Controllers
             }
         }
 
+        // POST api/<ModelController>/stealModel
+        [HttpPost("stealModel")]
+        [Authorize(Roles = "User,Guest")]
+        public ActionResult<Model> StealModel([FromBody] Model model)//, bool overwrite)
+        {
+            bool overwrite = false;
+            //username="" ako je GUEST
+            //Experiment e = _experimentService.Get(model.experimentId); umesto 1 ide e.inputColumns.Length   TODO!!!!!!!!!!!!!!!!!
+            //model.inputNeurons = e.inputColumns.Length;
+            /*if (_modelService.CheckHyperparameters(1, model.hiddenLayerNeurons, model.hiddenLayers, model.outputNeurons) == false)
+                return BadRequest("Bad parameters!");*/
+
+            model.uploaderId = getUserId();
+            model._id = "";
+            model.dateCreated = DateTime.Now;
+            model.lastUpdated = DateTime.Now;
+            model.isPublic = false;
+
+            var existingModel = _modelService.GetOneModel(model.uploaderId, model.name);
+
+
+            if (existingModel != null && !overwrite && model.validationSize < 1 && model.validationSize > 0)
+                return NotFound($"Model already exisits or validation size is not between 0-1");
+            else
+            {
+                //_modelService.Create(model);
+                //return Ok();
+                if (existingModel == null)
+                    _modelService.Create(model);
+                else
+                {
+                    _modelService.Replace(model);
+                }
+
+                return CreatedAtAction(nameof(Get), new { id = model._id }, model);
+            }
+        }
+
         // PUT api/<ModelController>/{name}
         [HttpPut("{name}")]
         [Authorize(Roles = "User,Guest")]
diff --git a/backend/api/api/Interfaces/IModelService.cs b/backend/api/api/Interfaces/IModelService.cs
index 8c4543de..41cd279c 100644
--- a/backend/api/api/Interfaces/IModelService.cs
+++ b/backend/api/api/Interfaces/IModelService.cs
@@ -6,6 +6,7 @@ namespace api.Services
     public interface IModelService
     {
         Model GetOneModel(string userId, string name);
+        Model GetOneModelById(string userId, string name);
         Model GetOneModel(string id);
         List<Model> GetMyModels(string userId);
         List<Model> GetMyModelsByType(string userId, string problemType);
diff --git a/backend/api/api/Models/Model.cs b/backend/api/api/Models/Model.cs
index a807316f..bbbf201e 100644
--- a/backend/api/api/Models/Model.cs
+++ b/backend/api/api/Models/Model.cs
@@ -14,18 +14,14 @@ namespace api.Models
 
         public string name { get; set; }
         public string description { get; set; }
-        //datetime
         public DateTime dateCreated { get; set; }
         public DateTime lastUpdated { get; set; }
-        //proveriti id
-        //public string experimentId { get; set; }
 
 
         //Neural net training
         public string type { get; set; }
         public string optimizer { get; set; }
         public string lossFunction { get; set; }
-        //public int inputNeurons { get; set; }
         public int hiddenLayers { get; set; }
         public string batchSize { get; set; }
         public string learningRate { get; set; }
@@ -36,8 +32,6 @@ namespace api.Models
 
         public string[] metrics { get; set; }
         public int epochs { get; set; }
-        //public bool isTrained { get; set; }
-        //public NullValues[] nullValues { get; set; }
         public bool randomOrder { get; set; }
         public bool randomTestSet { get; set; }
         public float randomTestSetDistribution { get; set; }
diff --git a/backend/api/api/Models/Predictor.cs b/backend/api/api/Models/Predictor.cs
index 530257b2..bfe95a0f 100644
--- a/backend/api/api/Models/Predictor.cs
+++ b/backend/api/api/Models/Predictor.cs
@@ -29,27 +29,4 @@ namespace api.Models
 
     }
 
-}
-
-/** 
-* Paste one or more documents here
-
-{
-	"_id": {
-		"$oid": "625dc348b7856ace8a6f8702"
-
-	},
-		"uploaderId" : "6242ea59486c664208d4255c",
-		"inputs": ["proba",
-		  "proba2", 
-		  "proba3"
-		],
-		"output" : "izlaz",
-		"isPublic" : true,
-		"accessibleByLink" : true,
-		"dateCreated" : "2022-04-11T20:33:26.937+00:00",
-    "experimentId" : "Neki id eksperimenta",
-    "modelId" : "Neki id eksperimenta",
-    "h5FileId" : "Neki id eksperimenta",
-    "metrics" : [{ }]
-}*/
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/backend/api/api/Services/DatasetService.cs b/backend/api/api/Services/DatasetService.cs
index f38a363b..0b84721e 100644
--- a/backend/api/api/Services/DatasetService.cs
+++ b/backend/api/api/Services/DatasetService.cs
@@ -104,16 +104,6 @@ namespace api.Services
 
             return dataset._id;
         }
-        /*
-public bool CheckDb()
-{
-   Dataset? dataset = null;
-   dataset = _dataset.Find(dataset => dataset.username == "igrannonica").FirstOrDefault();
-
-   if (dataset != null)
-       return false;
-   else
-       return true;
-}*/
+        
     }
 }
diff --git a/backend/api/api/Services/FillAnEmptyDb.cs b/backend/api/api/Services/FillAnEmptyDb.cs
index 811e723a..cd35dc78 100644
--- a/backend/api/api/Services/FillAnEmptyDb.cs
+++ b/backend/api/api/Services/FillAnEmptyDb.cs
@@ -54,7 +54,7 @@ namespace api.Services
 
                 dataset._id = "";
                 dataset.uploaderId = "000000000000000000000000";
-                dataset.name = "Titanik dataset(public)";
+                dataset.name = "Titanik dataset (public)";
                 dataset.description = "Titanik dataset";
                 dataset.fileId = _fileService.GetFileId(fullPath);
                 dataset.extension = ".csv";
@@ -277,6 +277,7 @@ namespace api.Services
                 model.lossFunction = "sparse_categorical_crossentropy";
                 model.hiddenLayers = 5;
                 model.batchSize = "64";
+                model.learningRate = "1";
                 model.outputNeurons = 0;
                 model.layers = new[]
                 {
@@ -368,7 +369,7 @@ namespace api.Services
                 dataset._id = "";
                 dataset.uploaderId = "000000000000000000000000";
                 dataset.name = "IMDB-Movie-Data Dataset (public)";
-                dataset.description = "IMDB-Movie-Data Dataset(public)";
+                dataset.description = "IMDB-Movie-Data Dataset (public)";
                 dataset.fileId = _fileService.GetFileId(fullPath);
                 dataset.extension = ".csv";
                 dataset.isPublic = true;
@@ -421,8 +422,8 @@ namespace api.Services
 
                 model._id = "";
                 model.uploaderId = "000000000000000000000000";
-                model.name = "IMDB model";
-                model.description = "IMDB model";
+                model.name = "IMDB model  (public)";
+                model.description = "IMDB model  (public)";
                 model.dateCreated = DateTime.Now;
                 model.lastUpdated = DateTime.Now;
                 model.type = "regresioni";
@@ -579,8 +580,8 @@ namespace api.Services
 
                 model._id = "";
                 model.uploaderId = "000000000000000000000000";
-                model.name = "Churn model";
-                model.description = "Churn model";
+                model.name = "Churn model (public)";
+                model.description = "Churn model (public)";
                 model.dateCreated = DateTime.Now;
                 model.lastUpdated = DateTime.Now;
                 model.type = "binarni-klasifikacioni";
diff --git a/backend/api/api/Services/ModelService.cs b/backend/api/api/Services/ModelService.cs
index e852d71f..71db6340 100644
--- a/backend/api/api/Services/ModelService.cs
+++ b/backend/api/api/Services/ModelService.cs
@@ -65,6 +65,11 @@ namespace api.Services
             return _model.Find(model => model.uploaderId == userId && model.name == name).FirstOrDefault();
         }
 
+        public Model GetOneModelById(string userId, string id)
+        {
+            return _model.Find(model => model.uploaderId == userId && model._id == id).FirstOrDefault();
+        }
+
         public Model GetOneModel(string id)
         {
             return _model.Find(model => model._id == id).FirstOrDefault();
diff --git a/backend/api/api/appsettings.json b/backend/api/api/appsettings.json
index ec8f7dd8..44d63ac3 100644
--- a/backend/api/api/appsettings.json
+++ b/backend/api/api/appsettings.json
@@ -16,22 +16,22 @@
     "UserStoreDatabaseSettings": {
         /* LocalHost*/
 
-        "ConnectionString": "mongodb://127.0.0.1:27017/",
+        /*"ConnectionString": "mongodb://127.0.0.1:27017/",
         "DatabaseName": "si_project",
         "CollectionName": "users",
         "DatasetCollectionName": "Dataset",
         "ModelCollectionName": "Model",
         "PredictorCollectionName": "Predictor",
         "FilesCollectionName": "Files",
-        "ExperimentCollectionName": "Experiment"
+        "ExperimentCollectionName": "Experiment"*/
 
-        /*"ConnectionString": "mongodb+srv://si_user:si_user@sidatabase.twtfm.mongodb.net/myFirstDatabase?retryWrites=true&w=majority",
+        "ConnectionString": "mongodb+srv://si_user:si_user@sidatabase.twtfm.mongodb.net/myFirstDatabase?retryWrites=true&w=majority",
         "DatabaseName": "si_db",
         "CollectionName": "users",
         "DatasetCollectionName": "Dataset",
         "ModelCollectionName": "Model",
         "PredictorCollectionName": "Predictor",
         "FilesCollectionName": "Files",
-        "ExperimentCollectionName": "Experiment" */
+        "ExperimentCollectionName": "Experiment" 
     }
 }
\ No newline at end of file
diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts
index 73b77bd0..c8d5771a 100644
--- a/frontend/src/app/_data/Dataset.ts
+++ b/frontend/src/app/_data/Dataset.ts
@@ -4,7 +4,7 @@ export default class Dataset extends FolderFile {
     constructor(
         name: string = 'Novi izvor podataka',
         public description: string = '',
-        public fileId?: number,
+        public fileId?: string,
         public extension: string = '.csv',
         public isPublic: boolean = false,
         public accessibleByLink: boolean = false,
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
index c2bd3262..cba5252a 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
@@ -14,16 +14,16 @@ export class PieChartComponent implements AfterViewInit {
   @Input()uniqueValuesPercent?: number[] = [];
 
   updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){
-    console.log(this.uniqueValues, this.uniqueValuesPercent);
-    const newPieChartData = {
-      datasets: [{
-        label: "Population (millions)",
-        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
-        data: [2478,5267,734,784,433],
-      }]
-        
-    }
-  };
+    //console.log(this.uniqueValues, this.uniqueValuesPercent);
+    this.pieChartData.datasets =  [{
+        label: "%",
+        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"],
+        data: uniqueValuesPercent,
+      }];
+      this.pieChartData.labels = uniqueValues
+      console.log(this.uniqueValues, this.uniqueValuesPercent);
+      this.myChart?.update() 
+    };
   
   @ViewChild('piechart') chartRef!: ElementRef;
   constructor() { }
@@ -33,13 +33,30 @@ export class PieChartComponent implements AfterViewInit {
       label: "Population (millions)",
       backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
       data: [2478,5267,734,784,433]
-    }]
+    }], labels : [""]
 }
 
+  myChart?: Chart;
   ngAfterViewInit(): void {
-  const myChart = new Chart(this.chartRef.nativeElement, {
+    let rem = 100;
+    const percents : number[] = []
+    this.uniqueValuesPercent?.forEach(percent => {
+      rem-=percent*100;
+      percents.push(percent*100)
+      
+    })
+    const data = {
+      datasets: [{
+        label: "%",
+        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"],
+        data: [...percents, rem]
+      }], labels : [...this.uniqueValues!,"Ostalo"]
+    }
+    
+    const myChart = new Chart(this.chartRef.nativeElement, {
     type: 'pie',
-    data: this.pieChartData,
+    data: data     
+  ,
     options: {
       /*title: {
         display: true,
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 0477b7be..f7f07e62 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.css
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
@@ -198,7 +198,7 @@ table ::ng-deep .mat-form-field-wrapper {
     font-size: large;
     position: relative;
     background-color: var(--ns-primary);
-    width: 10rem;
+    width: 13rem;
     height: 2.3rem;
     border-color: var(--ns-primary);
     border-style: solid;
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 9fdb6936..ad78feaf 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -83,8 +83,8 @@ export class ColumnTableComponent implements AfterViewInit {
     let i = 0;
     this.boxplotComp.changes.subscribe(() => {
       const bps = this.boxplotComp.toArray();
-      this.dataset?.columnInfo.forEach(colInfo => {
-        if (this.experiment.columnTypes[i] == ColumnType.numerical) {
+      this.dataset?.columnInfo.forEach((colInfo, index) => {
+        if (this.experiment.columnTypes[index] == ColumnType.numerical) {
           bps[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median);
           i++;
         }
@@ -96,8 +96,11 @@ export class ColumnTableComponent implements AfterViewInit {
     //min: number, max: number, q1: number, q3: number, median: number
     let i = 0;
     const pieChart = this.piechartComp.toArray();
-    this.dataset?.columnInfo.forEach(colInfo => {
-      if (this.experiment.columnTypes[i] == ColumnType.categorical) {
+    console.log(pieChart)
+    this.dataset?.columnInfo.forEach((colInfo, index) => {
+      console.log(i)
+      if (this.experiment.columnTypes[index] == ColumnType.categorical) {
+        console.log("prosao IF")
         pieChart[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent);
         i++;
       }
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index da04b219..de9a6353 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -59,6 +59,11 @@
                     <button *ngIf="this.selectedFile && selectedTab == TabType.File" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)">
                         <mat-icon>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>
+                    </button>
+
+                    
                     <!-- <button class="btn-clear file-button">
                         <mat-icon>zoom_out_map</mat-icon>
                     </button> -->
@@ -76,7 +81,10 @@
                             {{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)">
+                            <button *ngIf="selectedTab==TabType.MyDatasets" class="btn-clear file-button" (click)="downloadFile(file,$event)" style="display: inline-block;">
+                                <mat-icon>download</mat-icon>
+                            </button>
+                            <button class="btn-clear file-button" (click)="deleteFile(file, $event)" style="display: inline-block;">
                                 <mat-icon>delete</mat-icon>
                             </button>
                         </div>
@@ -87,7 +95,7 @@
                         </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 735bfdaa..254298fb 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -13,6 +13,7 @@ import { SignalRService } from 'src/app/_services/signal-r.service';
 import { FormModelComponent } from '../form-model/form-model.component';
 import { ActivatedRoute, Router } from '@angular/router';
 import Predictor from 'src/app/_data/Predictor';
+import FileSaver from 'file-saver';
 
 @Component({
   selector: 'app-folder',
@@ -106,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;
@@ -117,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) {
@@ -139,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] = [];
     });
@@ -191,12 +187,18 @@ export class FolderComponent implements AfterViewInit {
       this.folders[TabType.PublicModels] = models;
       this.searchTermsChanged();
     });*/
-    this.folders[TabType.PublicModels] = [];
+
+    this.modelsService.getPublicModels().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;
+      console.log(this.filteredFiles);
       if (selectedDatasetId) {
         this.selectFile(datasets.filter(x => x._id == selectedDatasetId)[0]);
       }
@@ -233,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();
         },
           () => {
@@ -282,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:
@@ -303,6 +308,20 @@ export class FolderComponent implements AfterViewInit {
         break;
     }
   }
+  downloadFile(file: FolderFile, event: Event) {
+    event.stopPropagation();
+    if (this.type==FolderType.Dataset) {
+        const fileId=(<Dataset>file).fileId;
+        const name=(<Dataset>file).name;
+        const ext=(<Dataset>file).extension;
+        if(fileId!=undefined)
+        this.datasetsService.downloadFile(fileId).subscribe((response)=>{
+          FileSaver.saveAs(response,name+ext);
+
+        });
+
+    }
+  }
 
   addFile(file: FolderFile, event: Event) {
     event.stopPropagation();
@@ -312,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/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 312b1af1..22894131 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -14,6 +14,7 @@ import { SignalRService } from 'src/app/_services/signal-r.service';
 import { MetricViewComponent } from 'src/app/_elements/metric-view/metric-view.component';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DatasetsService } from 'src/app/_services/datasets.service';
+import { PredictorsService } from 'src/app/_services/predictors.service';
 
 @Component({
   selector: 'app-experiment',
@@ -39,24 +40,47 @@ export class ExperimentComponent implements AfterViewInit, OnInit {
   step3: boolean = false;
   step4: boolean = false;
 
-  constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private datasetsService: DatasetsService, private signalRService: SignalRService, private route: ActivatedRoute) {
+  constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private datasetsService: DatasetsService, private predictorsService: PredictorsService, private signalRService: SignalRService, private route: ActivatedRoute) {
     this.experiment = new Experiment("exp1");
   }
 
   ngOnInit(): void {
     this.route.queryParams.subscribe(params => {
+
       let experimentId = this.route.snapshot.paramMap.get("id");
-      if (experimentId == null)
-        return;
-      this.experimentsService.getExperimentById(experimentId).subscribe((response) => {
-        this.experiment = response;
-        this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => {
-          this.dataset = response;
-
-          this.folderDataset.forExperiment = this.experiment;
-          this.folderDataset.selectFile(this.dataset);
+      let predictorId = this.route.snapshot.paramMap.get("predictorId");
+
+      if (predictorId != null && experimentId != null) {
+        this.experimentsService.getExperimentById(experimentId).subscribe((response) => {
+          this.experiment = response;
+          this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => {
+            this.dataset = response;
+            this.folderDataset.forExperiment = this.experiment;
+            this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju
+
+            //this.predictorsService.getPredictor(predictorId!).subscribe((response) => {
+              let predictor = response;
+              //this.modelsService.getModelById(predictor.modelId).subscribe((response) => {
+                this.modelsService.getModelById("62853d70696d62ceeb8db7cd").subscribe((response) => {
+                //imamo model
+                this.folderModel.formModel.newModel = response;
+                //this.metricView.update(predictor.metrics);
+              });
+            //});
+          });
         });
-      });
+      }
+      else if (predictorId == null && experimentId != null) {
+        this.experimentsService.getExperimentById(experimentId).subscribe((response) => {
+          this.experiment = response;
+          this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => {
+            this.dataset = response;
+            this.folderDataset.forExperiment = this.experiment;
+            this.folderDataset.selectFile(this.dataset);
+          });
+        });
+      }
+
     });
   }
 
diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts
index 8d07674d..3fb4e8f2 100644
--- a/frontend/src/app/_services/datasets.service.ts
+++ b/frontend/src/app/_services/datasets.service.ts
@@ -51,4 +51,8 @@ export class DatasetsService {
   deleteDataset(dataset: Dataset) {
     return this.http.delete(`${Configuration.settings.apiURL}/dataset/` + dataset._id, { headers: this.authService.authHeader(), responseType: "text" });
   }
+
+  downloadFile(id:string):Observable<Blob>{
+    return this.http.get(`${Configuration.settings.apiURL}/file/Download?id=`+id, { headers: this.authService.authHeader(), responseType: 'blob' });
+  }
 }
diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts
index fc888556..f5d95ec1 100644
--- a/frontend/src/app/_services/models.service.ts
+++ b/frontend/src/app/_services/models.service.ts
@@ -31,6 +31,10 @@ export class ModelsService {
   addModel(model: Model): Observable<any> {
     return this.http.post(`${Configuration.settings.apiURL}/model/add`, model, { headers: this.authService.authHeader() });
   }
+
+  stealModel(model: Model): Observable<any> {
+    return this.http.post(`${Configuration.settings.apiURL}/model/stealModel`, model, { headers: this.authService.authHeader() });
+  }
   addDataset(dataset: Dataset): Observable<any> {
     return this.http.post(`${Configuration.settings.apiURL}/dataset/add`, dataset, { headers: this.authService.authHeader() });
   }
@@ -58,4 +62,8 @@ export class ModelsService {
     return this.http.get<Model[]>(`${Configuration.settings.apiURL}/model/publicmodels`, { headers: this.authService.authHeader() });
   }
 
+  getModelById(modelId: string): Observable<Model> {
+    return this.http.get<Model>(`${Configuration.settings.apiURL}/model/byid/${modelId}`, { headers: this.authService.authHeader() });
+  }
+
 }
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index 9f8c623d..8c60a666 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -12,6 +12,7 @@ import { TestComponent } from './_pages/test/test.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent, data: { title: 'Početna strana' } },
+  { path: 'experiment/:id/:predictorId', component: ExperimentComponent, data: { title: 'Eksperiment' } },
   { path: 'experiment/:id', component: ExperimentComponent, data: { title: 'Eksperiment' } },
   { path: 'experiment', component: ExperimentComponent, data: { title: 'Eksperiment' } },
   { path: 'archive', component: ArchiveComponent, data: { title: 'Arhiva' } },