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

3 files changed, 145 insertions, 16 deletions

diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css
index 59e004e9..37edd3c2 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.css
+++ b/frontend/src/app/_pages/experiment/experiment.component.css
@@ -74,4 +74,34 @@ mat-stepper {
 
 .text-overflow-experiment-name {
     overflow-wrap: break-word;
+}
+
+#compareButton {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+.side-by-side {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+}
+
+
+/* one item */
+
+.side-by-side>*:first-child:nth-last-child(1) {
+    /* -or- li:only-child { */
+    width: 100%;
+}
+
+
+/* two items */
+
+.side-by-side>*:first-child:nth-last-child(2),
+.side-by-side>*:first-child:nth-last-child(2)~li {
+    width: 50%;
+    margin: 5px;
 }
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 17a6539d..3176f58c 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -25,10 +25,10 @@
                     <ng-template matStepLabel>
                         <span class="label addedElement text-overflow" *ngIf="experiment._id!=''">Predvideti:{{experiment.outputColumn}}</span>
                         <span *ngIf="!this.step1" class="align-middle"><mat-icon>lock</mat-icon></span>
-                        <span class="label text-overflow" *ngIf="experiment._id==''">Odabir kolona </span>
+                        <span class="label text-overflow" *ngIf="experiment._id==''">Priprema podataka </span>
                     </ng-template>
                     <ng-template matStepContent>
-                        <p class="text-left text-overflow">Pripremite podatke i izaberite izlazne kolone</p>
+                        <p class="text-left text-overflow">Pripremite podatke i odaberite ulazne i izlaznu kolonu</p>
                     </ng-template>
                 </mat-step>
                 <mat-step [completed]="this.step3">
@@ -57,18 +57,35 @@
         </div>
         <div #steps id="step_2" class="step-content" *ngIf="step1">
             <div class="step-content-inside">
-                <app-column-table (okPressed)="goToPage(2); experiment._columnsSelected = true;" (columnTableChanged)="columnTableChangedEvent()" (experimentChanged)="experimentChangedEvent()" [experiment]="experiment" [dataset]="dataset"></app-column-table>
+                <app-column-table (columnTableChanged)="columnTableChangedEvent()" (experimentChanged)="experimentChangedEvent()" [experiment]="experiment" [dataset]="dataset"></app-column-table>
             </div>
         </div>
         <div #steps id="step_3" class="step-content" *ngIf="step2">
             <div class="step-content-inside">
-                <app-folder #folderModel [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyModels]" (okPressed)="goToPage(3); trainModel();" (selectedFileChanged)="setModel($event)"></app-folder>
+                <div id="compareButton">
+                    <button mat-raised-button color="accent" *ngIf="!comparing" (click)="toggleCompare()"><mat-icon>compare</mat-icon> Dodaj konfiguraciju za upoređivanje</button>
+                    <button mat-raised-button *ngIf="comparing" (click)="toggleCompare()"><mat-icon>not_interested</mat-icon> Prekini upoređivanje</button>
+                </div>
+                <div class="side-by-side">
+                    <app-folder #folderModel [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyModels]" (okPressed)="trainModel();" (selectedFileChanged)="setModel($event);"></app-folder>
+                    <app-folder #folderModelCompare [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.MyModels" [tabsToShow]="[TabType.MyModels]" (okPressed)=" trainModelCmp();" (selectedFileChanged)="setModelCmp($event);" style="width: 50%;"
+                        *ngIf="comparing"></app-folder>
+                </div>
             </div>
         </div>
         <div #steps id="step_4" class="step-content" *ngIf="step3">
             <div class="step-content-inside">
-                <app-metric-view #metricView></app-metric-view>
+                <div class="side-by-side">
+                    <app-line-chart #linechart [experiment]="experiment" [predictor]="predictor!"></app-line-chart>
+                    <app-line-chart #linechartCompare [experiment]="experiment" style="width: 50%;" *ngIf="comparing"></app-line-chart>
+                </div>
             </div>
         </div>
+        <!--
+        <div #steps id="step_5" class="step-content" *ngIf="step4">
+            <div class="step-content-inside">
+                <app-form-predictor></app-form-predictor>
+            </div>
+        </div>-->
     </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index ec4275fa..e4d444b2 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -15,6 +15,8 @@ import { MetricViewComponent } from 'src/app/_elements/metric-view/metric-view.c
 import { ActivatedRoute, Router } from '@angular/router';
 import { DatasetsService } from 'src/app/_services/datasets.service';
 import { PredictorsService } from 'src/app/_services/predictors.service';
+import { LineChartComponent } from 'src/app/_elements/_charts/line-chart/line-chart.component';
+import Predictor from 'src/app/_data/Predictor';
 
 @Component({
   selector: 'app-experiment',
@@ -30,16 +32,32 @@ export class ExperimentComponent implements AfterViewInit {
   event: number = 0;
   experiment: Experiment;
   dataset?: Dataset;
+  predictor?: Predictor;
+
   @ViewChild("folderDataset") folderDataset!: FolderComponent;
   @ViewChild(ColumnTableComponent) columnTable!: ColumnTableComponent;
   @ViewChild("folderModel") folderModel!: FolderComponent;
-  @ViewChild("metricView") metricView!: MetricViewComponent;
+  @ViewChild("folderModelCompare") folderModelCmp!: FolderComponent;
+  @ViewChild("linechart") linechartComponent!: LineChartComponent;
+  @ViewChild("linechartCompare") linechartComponentCmp!: LineChartComponent;
 
   step1: boolean = false;
   step2: boolean = false;
   step3: boolean = false;
   step4: boolean = false;
 
+  comparing: boolean = false;
+
+  toggleCompare() {
+    this.comparing = !this.comparing;
+    setTimeout(() => {
+      if (this.folderModel.formModel)
+        this.folderModel.formModel.graph.resize();
+      if (this.folderModel.formNewModel)
+        this.folderModel.formNewModel.graph.resize();
+    });
+  }
+
   constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private datasetsService: DatasetsService, private predictorsService: PredictorsService, private signalRService: SignalRService, private route: ActivatedRoute) {
     this.experiment = new Experiment("exp1");
   }
@@ -57,7 +75,22 @@ 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;
+      this.step3 = true;
+      setTimeout(() => {
+        this.goToPage(3);
+      });
+    }
+  }
+
+  trainModelCmp() {
+    if (!this.modelToTrainCmp) {
+      Shared.openDialog('Greška', 'Morate odabrati konfiguraciju neuronske mreže');
+    } else {
+      this.modelsService.trainModel(this.modelToTrainCmp._id, this.experiment._id).subscribe(() => { console.log("pocelo treniranje") });
+      this.step3 = true;
+      setTimeout(() => {
+        this.goToPage(3);
+      });
     }
   }
 
@@ -83,16 +116,48 @@ export class ExperimentComponent implements AfterViewInit {
 
     if (this.signalRService.hubConnection) {
       this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
-        if (currentEpoch == 0) {
-          this.history = [];
-        }
+
         if (this.modelToTrain?._id == mId) {
+          if (currentEpoch == 0) {
+            this.linechartComponent.setName(mName);
+            this.history = [];
+          }
+
           stat = stat.replace(/'/g, '"');
           this.history.push(JSON.parse(stat));
-          this.metricView.update(this.history,this.modelToTrain.epochs);
+
+          this.linechartComponent.updateAll(this.history, this.modelToTrain.epochs);
+        }
+
+        if (this.modelToTrainCmp?._id == mId) {
+          if (currentEpoch == 0) {
+            this.linechartComponentCmp.setName(mName);
+            this.historyCmp = [];
+          }
+
+          stat = stat.replace(/'/g, '"');
+
+          this.historyCmp.push(JSON.parse(stat));
+          this.linechartComponentCmp.updateAll(this.historyCmp, this.modelToTrainCmp.epochs);
         }
       });
 
+      this.signalRService.hubConnection.on("NotifyPredictor", (pId: string, mId: string) => {
+        console.log("Predictor trained: ", pId, "for model:", mId);
+
+        if (this.modelToTrain && mId == this.modelToTrain._id) {
+          this.predictorsService.getPredictor(pId).subscribe((predictor) => {
+            this.linechartComponent.predictor = predictor;
+          });
+        }
+
+        if (this.modelToTrainCmp && mId == this.modelToTrainCmp._id) {
+          this.predictorsService.getPredictor(pId).subscribe((predictor) => {
+            this.linechartComponentCmp.predictor = predictor;
+          });
+        }
+      })
+
     }
 
     this.route.queryParams.subscribe(params => {
@@ -102,6 +167,7 @@ export class ExperimentComponent implements AfterViewInit {
       if (predictorId != null) {
         this.predictorsService.getPredictor(predictorId!).subscribe((response) => {
           let predictor = response;
+          this.predictor = predictor;
           this.experimentsService.getExperimentById(predictor.experimentId).subscribe((response) => {
             this.experiment = response;
             this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => {
@@ -111,11 +177,13 @@ export class ExperimentComponent implements AfterViewInit {
 
               this.modelsService.getModelById(predictor.modelId).subscribe((response) => {
                 let model = response;
-                this.folderModel.formModel.newModel = model;
+                this.folderModel.selectFile(model);
+                //this.folderModel.formModel.newModel = model;
                 this.step3 = true;
-                let numOfEpochsArray = Array.from({length: model.epochs}, (_, i) => i + 1);
+                let numOfEpochsArray = Array.from({ length: model.epochs }, (_, i) => i + 1);
                 setTimeout(() => {
-                  this.metricView.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse);
+                  this.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse);
+                  this.goToPage(3);
                 })
               });
             });
@@ -129,6 +197,7 @@ export class ExperimentComponent implements AfterViewInit {
             this.dataset = response;
             this.folderDataset.forExperiment = this.experiment;
             this.folderDataset.selectFile(this.dataset);
+            this.goToPage(1);
           });
         });
       }
@@ -137,6 +206,7 @@ export class ExperimentComponent implements AfterViewInit {
   }
 
   history: any[] = [];
+  historyCmp: any[] = [];
 
   updatePageIfScrolled() {
     if (this.scrolling) return;
@@ -197,14 +267,18 @@ export class ExperimentComponent implements AfterViewInit {
     this.step2 = true;
     setTimeout(() => {
       this.folderModel.updateExperiment();
+      this.folderModel.selectFile(undefined);
+      this.folderModel.selectTab(TabType.NewFile);
+      this.goToPage(2);
     });
   }
 
   setDataset(dataset: FolderFile | null) {
-    if (dataset == null) {
+    if (dataset == null ||dataset==undefined) {
       this.columnTable.loaded = false;
       this.dataset = undefined;
       this.experiment.datasetId = '';
+      this.step1=false;
       return;
     }
     const d = <Dataset>dataset;
@@ -215,13 +289,21 @@ export class ExperimentComponent implements AfterViewInit {
     setTimeout(() => {
       this.columnTable.loadDataset(d);
     });
+    // REFRESH GRAFIKA (4. KORAKA) URADITI 
   }
 
   modelToTrain?: Model;
+  modelToTrainCmp?: Model;
 
   setModel(model: FolderFile) {
     const m = <Model>model;
     this.modelToTrain = m;
-    this.step3 = true;
+    //this.step3 = true;
+  }
+
+  setModelCmp(model: FolderFile) {
+    const m = <Model>model;
+    this.modelToTrainCmp = m;
+    //this.step3 = true;
   }
 }