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

1 files changed, 74 insertions, 7 deletions

diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index abf4b697..398321f2 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren, Input } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, ViewChild, ViewChildren, Input, OnInit } from '@angular/core';
 import { StepperSelectionEvent } from '@angular/cdk/stepper';
 import { MatStepper } from '@angular/material/stepper';
 import Shared from 'src/app/Shared';
@@ -12,6 +12,9 @@ import Dataset from 'src/app/_data/Dataset';
 import { ColumnTableComponent } from 'src/app/_elements/column-table/column-table.component';
 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',
@@ -32,7 +35,12 @@ export class ExperimentComponent implements AfterViewInit {
   @ViewChild("folderModel") folderModel!: FolderComponent;
   @ViewChild("metricView") metricView!: MetricViewComponent;
 
-  constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private signalRService: SignalRService) {
+  step1: boolean = false;
+  step2: boolean = false;
+  step3: boolean = false;
+  step4: boolean = false;
+
+  constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private datasetsService: DatasetsService, private predictorsService: PredictorsService, private signalRService: SignalRService, private route: ActivatedRoute) {
     this.experiment = new Experiment("exp1");
   }
 
@@ -49,6 +57,7 @@ export class ExperimentComponent implements AfterViewInit {
       Shared.openDialog('Greška', 'Morate odabrati konfiguraciju neuronske mreže');
     } else {
       this.modelsService.trainModel(this.modelToTrain._id, this.experiment._id).subscribe(() => { console.log("pocelo treniranje") });
+      this.step4 = true;
     }
   }
 
@@ -82,11 +91,57 @@ export class ExperimentComponent implements AfterViewInit {
           stat = stat.replace(/'/g, '"');
           //console.log('JSON', this.trainingResult);
           this.history.push(JSON.parse(stat));
-          this.metricView.update(this.history);
+          this.metricView.update(this.history,this.modelToTrain.epochs);
         }
       });
 
     }
+
+    this.route.queryParams.subscribe(params => {
+
+      let experimentId = this.route.snapshot.paramMap.get("id");
+      let predictorId = this.route.snapshot.paramMap.get("predictorId");
+      console.log("paramexp: ", experimentId, ", parampredictor: ", predictorId);
+      if (predictorId != null) {
+        this.predictorsService.getPredictor(predictorId!).subscribe((response) => {
+          let predictor = response;
+          //console.log("predictor: ", predictor);
+          this.experimentsService.getExperimentById(predictor.experimentId).subscribe((response) => {
+            this.experiment = response;
+            //console.log("experiment: ", this.experiment);
+            this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => {
+              this.dataset = response;
+              //console.log("dataset: ", this.dataset);
+              this.folderDataset.forExperiment = this.experiment;
+              this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju
+
+              this.modelsService.getModelById(predictor.modelId).subscribe((response) => {
+                let model = response;
+                //console.log("model: ", model);
+                this.folderModel.formModel.newModel = model;
+                this.step3 = true;
+                let numOfEpochsArray = Array.from({length: model.epochs}, (_, i) => i + 1);
+                //console.log("metric view1:", this.metricView);
+                setTimeout(() => {
+                  this.metricView.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse);
+                })
+              });
+            });
+          });
+        });
+      }
+      else if (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);
+          });
+        });
+      }
+
+    });
   }
 
   history: any[] = [];
@@ -148,16 +203,27 @@ export class ExperimentComponent implements AfterViewInit {
   }
 
   experimentChangedEvent() {
-    this.folderModel.updateExperiment();
+    this.step2 = true;
+    setTimeout(() => {
+      this.folderModel.updateExperiment();
+    });
   }
 
-  setDataset(dataset: FolderFile) {
+  setDataset(dataset: FolderFile | null) {
+    if (dataset == null) {
+      this.columnTable.loaded = false;
+      this.dataset = undefined;
+      this.experiment.datasetId = '';
+      return;
+    }
     const d = <Dataset>dataset;
     this.experiment.datasetId = d._id;
     this.dataset = d;
 
-    this.columnTable.loadDataset(this.dataset);
-    
+    this.step1 = true;
+    setTimeout(() => {
+      this.columnTable.loadDataset(d);
+    });
   }
 
   modelToTrain?: Model;
@@ -165,5 +231,6 @@ export class ExperimentComponent implements AfterViewInit {
   setModel(model: FolderFile) {
     const m = <Model>model;
     this.modelToTrain = m;
+    this.step3 = true;
   }
 }