Merge branch 'redesign' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into Guest-Koristik-Ispravka-FrontEnd

2 files changed, 36 insertions, 8 deletions

diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index baae864e..2b32db81 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -32,17 +32,17 @@
         </div>
         <div #steps id="step_2" class="step-content">
             <div class="step-content-inside">
-                <app-column-table (okPressed)="goToPage(2)" (columnTableChanged)="columnTableChangedEvent()" [experiment]="experiment" [dataset]="dataset"></app-column-table>
+                <app-column-table (okPressed)="goToPage(2); experiment._columnsSelected = true;" (columnTableChanged)="columnTableChangedEvent()" [experiment]="experiment" [dataset]="dataset"></app-column-table>
             </div>
         </div>
         <div #steps id="step_3" class="step-content">
             <div class="step-content-inside">
-                <app-folder #folderModel [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyModels]" (okPressed)="goToPage(3)"></app-folder>
+                <app-folder #folderModel [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.NewFile" [tabsToShow]="[TabType.MyModels]" (okPressed)="goToPage(3); trainModel();" (selectedFileChanged)="setModel($event)"></app-folder>
             </div>
         </div>
         <div #steps id="step_4" class="step-content">
             <div class="step-content-inside">
-                <app-metric-view></app-metric-view>
+                <app-metric-view #metricView></app-metric-view>
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 28552664..c4d6063c 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -10,6 +10,8 @@ import { ModelsService } from 'src/app/_services/models.service';
 import Model from 'src/app/_data/Model';
 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';
 
 @Component({
   selector: 'app-experiment',
@@ -26,11 +28,11 @@ export class ExperimentComponent implements AfterViewInit {
   experiment: Experiment;
   dataset?: Dataset;
   @ViewChild("folderDataset") folderDataset!: FolderComponent;
-  @ViewChild("folderModel") folderModel!: FolderComponent;
   @ViewChild(ColumnTableComponent) columnTable!: ColumnTableComponent;
+  @ViewChild("folderModel") folderModel!: FolderComponent;
+  @ViewChild("metricView") metricView!: MetricViewComponent;
 
-
-  constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService) {
+  constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService, private signalRService: SignalRService) {
     this.experiment = new Experiment("exp1");
   }
 
@@ -43,7 +45,11 @@ export class ExperimentComponent implements AfterViewInit {
   }
 
   trainModel() {
-    this.modelsService.trainModel((<Model>this.folderModel.selectedFile)._id, this.experiment._id).subscribe(() => { console.log("pocelo treniranje") })
+    if (!this.modelToTrain) {
+      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") });
+    }
   }
 
   stepHeight = this.calcStepHeight();
@@ -65,8 +71,23 @@ export class ExperimentComponent implements AfterViewInit {
     this.stepsContainer.nativeElement.addEventListener('scroll', (event: Event) => {
       Shared.emitBGScrollEvent(this.stepsContainer.nativeElement.scrollTop);
     });
+
+    if (this.signalRService.hubConnection) {
+      this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
+        console.log(this.modelToTrain?._id, mId);
+        if (this.modelToTrain?._id == mId) {
+          stat = stat.replace(/'/g, '"');
+          //console.log('JSON', this.trainingResult);
+          this.history.push(JSON.parse(stat));
+          this.metricView.update(this.history);
+        }
+      });
+
+    }
   }
 
+  history: any[] = [];
+
   updatePageIfScrolled() {
     if (this.scrolling) return;
     const currentPage = Math.round(this.stepsContainer.nativeElement.scrollTop / this.stepHeight)
@@ -120,7 +141,7 @@ export class ExperimentComponent implements AfterViewInit {
 
   columnTableChangedEvent() {
     //sta se desi kad se nesto promeni u column-table komponenti...
-    console.log("promenio se column-table");
+    //console.log("promenio se column-table");
   }
 
   setDataset(dataset: FolderFile) {
@@ -130,4 +151,11 @@ export class ExperimentComponent implements AfterViewInit {
 
     this.columnTable.loadDataset(this.dataset);
   }
+
+  modelToTrain?: Model;
+
+  setModel(model: FolderFile) {
+    const m = <Model>model;
+    this.modelToTrain = m;
+  }
 }