From ec6816d0d9a737f9fe70ec8d77f15afcd4720354 Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Thu, 26 May 2022 00:58:36 +0200
Subject: Ispravljen raspored prikaza metrika, svaka vrednost i odgovarajuća
 vrednost na validacionom skupu se prikazuju na pojedinačnom grafiku. Metrike
 su filtrirane u zavisnosti od tipa problema.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/_pages/experiment/experiment.component.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'frontend/src/app/_pages/experiment/experiment.component.html')

diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 17a6539d..b11729a7 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -67,7 +67,12 @@
         </div>
         <div #steps id="step_4" class="step-content" *ngIf="step3">
             <div class="step-content-inside">
-                <app-metric-view #metricView></app-metric-view>
+                <app-line-chart [experiment]="experiment"></app-line-chart>
+            </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>
-- 
cgit v1.2.3


From a4154ab61bb1410fe1153c06cc31a0a770662236 Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Sun, 29 May 2022 18:11:37 +0200
Subject: Zakomentarisan step 5.

---
 frontend/src/app/_pages/experiment/experiment.component.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'frontend/src/app/_pages/experiment/experiment.component.html')

diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index b11729a7..abb5a6d5 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -70,10 +70,11 @@
                 <app-line-chart [experiment]="experiment"></app-line-chart>
             </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>
 </div>
\ No newline at end of file
-- 
cgit v1.2.3


From 854e21f08d1c876cf62c7a360bd5bd142675d705 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Fri, 3 Jun 2022 22:17:06 +0200
Subject: Dodao mogucnost download-ovanja H5 fajla za prediktor. Popravio bug
 kada se tooltipovi nisu uvak pojavljivali kada bi trebalo. Popravio bug sa
 layout-om grafa modela.

---
 .../_charts/line-chart/line-chart.component.css    |  45 +++-
 .../_charts/line-chart/line-chart.component.html   |  29 +--
 .../_charts/line-chart/line-chart.component.ts     | 230 +++++++++++----------
 .../src/app/_elements/folder/folder.component.html |  22 +-
 .../_elements/form-model/form-model.component.html |   6 +-
 .../_pages/experiment/experiment.component.html    |   2 +-
 .../app/_pages/experiment/experiment.component.ts  |   8 +-
 frontend/src/app/_services/predictors.service.ts   |   4 +
 8 files changed, 200 insertions(+), 146 deletions(-)

(limited to 'frontend/src/app/_pages/experiment/experiment.component.html')

diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
index 7dbbde7a..9694119d 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
@@ -1,17 +1,46 @@
-canvas{
+.canvas-container {
+    height: 50%;
+    margin: 5px;
+}
+
+.bottom {
+    height: 10%;
+}
 
-    width:100% !important;
-    height:100% !important;
+canvas {
+    max-height: 100%;
     border: 1px solid var(--ns-primary);
     background-color: var(--ns-bg-dark-100);
     border-radius: 5px;
     margin: 0;
     font-size: 11 !important;
     padding: 0;
-  }
-.ns-col{
-  margin: 5px;
 }
-.hide{
-  display: none;
+
+.ns-col {
+    margin: 5px;
+}
+
+.hide {
+    display: none;
 }
+
+.dl-button {
+    position: relative;
+    color: var(--offwhite);
+    border-radius: 4px;
+    border: 1px solid var(--ns-primary);
+    background-color: var(--ns-bg-dark-50);
+    margin: 5px;
+    padding: 10px;
+    cursor: pointer;
+    z-index: 1001;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.dl-button:hover {
+    background-color: var(--ns-primary);
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
index e36d0dcf..a81f9dc4 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
@@ -1,24 +1,29 @@
-<div #wrapper class="position-relative " style="width:100%;height:95%;">
-    <div class="ns-row" [ngClass]="{'hide':experiment.type != ProblemType.Regression}">
-        <div class="ns-col" >
-            <canvas id="myChartmae" #canvasmae>   
+<div #wrapper class="position-relative" style="width:100%;height:95%;">
+    <div class="d-flex flex-column align-items-stretch" [ngClass]="{'hide':experiment.type != ProblemType.Regression}" style="width: 100%; height: 90%;">
+        <div class="canvas-container">
+            <canvas id="myChartmae" #canvas>   
             </canvas>
         </div>
-        <div class="ns-col">
-            <canvas id="myChartmse" #canvasmse>   
+        <div class="canvas-container">
+            <canvas id="myChartmse" #canvas>   
             </canvas>
         </div>
     </div>
-    <div class="ns-row"  [ngClass]="{'hide':experiment.type == ProblemType.Regression}">
-        <div class="ns-col" >
-            <canvas id="myChartloss" #canvasloss>   
+    <div class="ns-row" [ngClass]="{'hide':experiment.type == ProblemType.Regression}">
+        <div class="ns-col">
+            <canvas id="myChartloss" #canvas>   
             </canvas>
         </div>
-        <div class="ns-col" >
-            <canvas id="myChartacc" #canvasacc>   
+        <div class="ns-col">
+            <canvas id="myChartacc" #canvas>   
             </canvas>
         </div>
+    </div>
+
 
+    <div class="bottom d-flex flex-row align-items-center">
+        <button *ngIf="predictor" class="btn-clear dl-button d-flex flex-row" (click)="downloadFile();" style="display: inline-block;" matTooltip="Preuzmi H5" matTooltipPosition="above">
+            <mat-icon>download</mat-icon> <div>H5</div>
+        </button>
     </div>
-    
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
index 2b97d6b4..ceff02bd 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
@@ -1,7 +1,10 @@
-import { Component, AfterViewInit, ElementRef, ViewChild, Input } from '@angular/core';
+import { Component, AfterViewInit, ElementRef, ViewChild, Input, ViewChildren, QueryList } from '@angular/core';
 import { Chart } from 'chart.js';
+import FileSaver from 'file-saver';
 import Experiment from 'src/app/_data/Experiment';
 import Model, { ProblemType } from 'src/app/_data/Model';
+import Predictor from 'src/app/_data/Predictor';
+import { PredictorsService } from 'src/app/_services/predictors.service';
 
 @Component({
   selector: 'app-line-chart',
@@ -15,19 +18,34 @@ export class LineChartComponent implements AfterViewInit {
   dataMAE: number[] = [];
   dataMSE: number[] = [];
   dataLOSS: number[] = [];
-  dataValAcc:number[]=[];
-  dataValMAE:number[]=[];
-  dataValMSE:number[]=[];
-  dataValLoss:number[]=[];
+  dataValAcc: number[] = [];
+  dataValMAE: number[] = [];
+  dataValMSE: number[] = [];
+  dataValLoss: number[] = [];
   dataEpoch: number[] = [];
 
   @ViewChild('wrapper')
   wrapper!: ElementRef;
-  @ViewChild('canvas')
-  canvas!: ElementRef;
-  @Input() experiment!:Experiment;
-  constructor() {
-    
+  @ViewChildren('canvas')
+  canvas!: QueryList<ElementRef>;
+  @Input() experiment!: Experiment;
+  @Input() predictor?: Predictor;
+
+
+  downloadFile() {
+    if (!this.predictor) {
+      return;
+    }
+
+    const fileId = this.predictor.h5FileId;
+    if (fileId != undefined)
+      this.predictorsService.downloadH5(fileId).subscribe((response) => {
+        FileSaver.saveAs(response, fileId + '.h5');
+      });
+  }
+
+  constructor(private predictorsService: PredictorsService) {
+
   }
   width = 700;
   height = 400;
@@ -36,18 +54,13 @@ export class LineChartComponent implements AfterViewInit {
   myChartMae!: Chart;
   myChartMse!: Chart;
   myChartLoss!: Chart;
-  ProblemType=ProblemType;
+  ProblemType = ProblemType;
   resize() {
-    this.width = this.wrapper.nativeElement.offsetWidth;
+    //this.width = this.wrapper.nativeElement.offsetWidth;
     this.height = this.wrapper.nativeElement.offsetHeight;
-
-    if (this.canvas) {
-      this.canvas.nativeElement.width = this.width;
-      this.canvas.nativeElement.height = this.height;
-    }
   }
-  update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc:number[],myValLoss:number[],myValMae:number[],myValMse:number[]) {
-   
+  update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc: number[], myValLoss: number[], myValMae: number[], myValMse: number[]) {
+
     this.dataEpoch.length = 0;
     this.dataEpoch.push(...myEpochs);
 
@@ -80,7 +93,7 @@ export class LineChartComponent implements AfterViewInit {
     this.myChartMae.update();
     this.myChartMse.update();
   }
-  updateAll(history: any[],totalEpochs:number) {
+  updateAll(history: any[], totalEpochs: number) {
     const myAcc: number[] = [];
     const myMae: number[] = [];
     const myMse: number[] = [];
@@ -93,11 +106,10 @@ export class LineChartComponent implements AfterViewInit {
     const myEpochs: number[] = [];
     this.history = history;
     this.history.forEach((metrics, epoch) => {
-      if(totalEpochs>100)
-      {
-        let epochEstimate=epoch*Math.round(Math.sqrt(totalEpochs))
-        if(epochEstimate>totalEpochs)
-          epochEstimate=totalEpochs;
+      if (totalEpochs > 100) {
+        let epochEstimate = epoch * Math.round(Math.sqrt(totalEpochs))
+        if (epochEstimate > totalEpochs)
+          epochEstimate = totalEpochs;
         myEpochs.push(epochEstimate);
       }
       else
@@ -131,10 +143,10 @@ export class LineChartComponent implements AfterViewInit {
       }
     });
 
-    this.update(myEpochs, myAcc, myLoss, myMae, myMse, myValAcc,myValLoss,myValMAE,myValMSE);
+    this.update(myEpochs, myAcc, myLoss, myMae, myMse, myValAcc, myValLoss, myValMAE, myValMSE);
   }
   ngAfterViewInit(): void {
-    
+
     window.addEventListener('resize', () => { this.resize() });
     this.resize();
     this.myChartAcc = new Chart("myChartacc",
@@ -147,27 +159,27 @@ export class LineChartComponent implements AfterViewInit {
             label: 'Accuracy',
             data: this.dataAcc,
             borderWidth: 1,
-            
+
           },
           {
             label: 'Val_Accuracy',
             data: this.dataValAcc,
             borderWidth: 1
-          }          
+          }
           ]
         },
         options: {
-          responsive: true,
-          maintainAspectRatio: true,
+          //responsive: true,
+          //maintainAspectRatio: true,
           plugins: {
             legend: {
-                labels: {
-                    // This more specific font property overrides the global property
-                    color:'white',
-                    font: {
-                      size: 10
-                  }
+              labels: {
+                // This more specific font property overrides the global property
+                color: 'white',
+                font: {
+                  size: 10
                 }
+              }
             }
           },
           scales: {
@@ -181,14 +193,14 @@ export class LineChartComponent implements AfterViewInit {
               title: {
                 display: true,
                 text: 'Epoha',
-                color:"white"
+                color: "white"
               }
             },
             y: {
               beginAtZero: true,
               ticks: {
                 color: 'white'
-              
+
               },
               grid: {
                 color: "rgba(0, 99, 171, 0.5)"
@@ -196,7 +208,7 @@ export class LineChartComponent implements AfterViewInit {
               title: {
                 display: true,
                 text: 'Vrednost',
-                color:"white"
+                color: "white"
               }
             }
 
@@ -207,40 +219,40 @@ export class LineChartComponent implements AfterViewInit {
 
         }
       },
-      
+
     );
-    if(this.experiment.type==ProblemType.BinaryClassification || this.experiment.type==ProblemType.MultiClassification){}
+    if (this.experiment.type == ProblemType.BinaryClassification || this.experiment.type == ProblemType.MultiClassification) { }
     this.myChartLoss = new Chart("myChartloss",
       {
         type: 'line',
         data: {
           labels: this.dataEpoch,
           datasets: [
-          {
-            label: 'Loss',
-            data: this.dataLOSS,
-            borderWidth: 1
-          },
-          {
-            label: 'Val_Loss',
-            data: this.dataValLoss,
-            borderWidth: 1
-          },
+            {
+              label: 'Loss',
+              data: this.dataLOSS,
+              borderWidth: 1
+            },
+            {
+              label: 'Val_Loss',
+              data: this.dataValLoss,
+              borderWidth: 1
+            },
           ]
         },
         options: {
-          responsive: true,
-          maintainAspectRatio: true,
+          //responsive: true,
+          //maintainAspectRatio: true,
 
           plugins: {
             legend: {
-                labels: {
-                    // This more specific font property overrides the global property
-                    color:'white',
-                    font: {
-                      size: 10
-                  }
+              labels: {
+                // This more specific font property overrides the global property
+                color: 'white',
+                font: {
+                  size: 10
                 }
+              }
             }
           },
           scales: {
@@ -254,14 +266,14 @@ export class LineChartComponent implements AfterViewInit {
               title: {
                 display: true,
                 text: 'Epoha',
-                color:"white"
+                color: "white"
               }
             },
             y: {
               beginAtZero: true,
               ticks: {
                 color: 'white'
-              
+
               },
               grid: {
                 color: "rgba(0, 99, 171, 0.5)"
@@ -269,7 +281,7 @@ export class LineChartComponent implements AfterViewInit {
               title: {
                 display: true,
                 text: 'Vrednost',
-                color:"white"
+                color: "white"
               }
             }
 
@@ -280,7 +292,7 @@ export class LineChartComponent implements AfterViewInit {
 
         }
       },
-      
+
     );
     this.myChartMse = new Chart("myChartmse",
       {
@@ -288,31 +300,31 @@ export class LineChartComponent implements AfterViewInit {
         data: {
           labels: this.dataEpoch,
           datasets: [
-          {
-            label: 'MSE',
-            data: this.dataMSE,
-            borderWidth: 1
-          },
-          {
-            label: 'Val_MSE',
-            data: this.dataValMSE,
-            borderWidth: 1
-          }
+            {
+              label: 'MSE',
+              data: this.dataMSE,
+              borderWidth: 1
+            },
+            {
+              label: 'Val_MSE',
+              data: this.dataValMSE,
+              borderWidth: 1
+            }
           ]
         },
         options: {
-          responsive: true,
-          maintainAspectRatio: true,
+          //responsive: true,
+          //maintainAspectRatio: true,
 
           plugins: {
             legend: {
-                labels: {
-                    // This more specific font property overrides the global property
-                    color:'white',
-                    font: {
-                      size: 10
-                  }
+              labels: {
+                // This more specific font property overrides the global property
+                color: 'white',
+                font: {
+                  size: 10
                 }
+              }
             }
           },
           scales: {
@@ -326,14 +338,14 @@ export class LineChartComponent implements AfterViewInit {
               title: {
                 display: true,
                 text: 'Epoha',
-                color:"white"
+                color: "white"
               }
             },
             y: {
               beginAtZero: true,
               ticks: {
                 color: 'white'
-              
+
               },
               grid: {
                 color: "rgba(0, 99, 171, 0.5)"
@@ -341,7 +353,7 @@ export class LineChartComponent implements AfterViewInit {
               title: {
                 display: true,
                 text: 'Vrednost',
-                color:"white"
+                color: "white"
               }
             }
 
@@ -352,7 +364,7 @@ export class LineChartComponent implements AfterViewInit {
 
         }
       },
-      
+
     );
     this.myChartMae = new Chart("myChartmae",
       {
@@ -360,31 +372,31 @@ export class LineChartComponent implements AfterViewInit {
         data: {
           labels: this.dataEpoch,
           datasets: [
-          {
-            label: 'MAE',
-            data: this.dataMAE,
-            borderWidth: 1
-          },
-          {
-            label: 'Val_MAE',
-            data: this.dataValMAE,
-            borderWidth: 1
-          },
+            {
+              label: 'MAE',
+              data: this.dataMAE,
+              borderWidth: 1
+            },
+            {
+              label: 'Val_MAE',
+              data: this.dataValMAE,
+              borderWidth: 1
+            },
           ]
         },
         options: {
-          responsive: true,
-          maintainAspectRatio: true,
+          //responsive: true,
+          //maintainAspectRatio: true,
 
           plugins: {
             legend: {
-                labels: {
-                    // This more specific font property overrides the global property
-                    color:'white',
-                    font: {
-                      size: 10
-                  }
+              labels: {
+                // This more specific font property overrides the global property
+                color: 'white',
+                font: {
+                  size: 10
                 }
+              }
             }
           },
           scales: {
@@ -398,14 +410,14 @@ export class LineChartComponent implements AfterViewInit {
               title: {
                 display: true,
                 text: 'Epoha',
-                color:"white"
+                color: "white"
               }
             },
             y: {
               beginAtZero: true,
               ticks: {
                 color: 'white'
-              
+
               },
               grid: {
                 color: "rgba(0, 99, 171, 0.5)"
@@ -413,7 +425,7 @@ export class LineChartComponent implements AfterViewInit {
               title: {
                 display: true,
                 text: 'Vrednost',
-                color:"white"
+                color: "white"
               }
             }
 
@@ -424,9 +436,9 @@ export class LineChartComponent implements AfterViewInit {
 
         }
       },
-      
+
     );
-    
+
   }
 }
 
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index 34cd4693..5d5e7822 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -76,16 +76,16 @@
                             {{file.lastUpdated | date}}
                         </div>
                         <div class="mx-2 hover-show" *ngIf="selectedTab !== TabType.PublicDatasets && selectedTab !== TabType.PublicModels">
-                            <button *ngIf="selectedTab==TabType.MyDatasets" class="btn-clear file-button" (click)="downloadFile(file,$event)" style="display: inline-block;">
-                                <mat-icon matTooltip="Preuzmi" matTooltipPosition="above">download</mat-icon>
+                            <button *ngIf="selectedTab==TabType.MyDatasets" class="btn-clear file-button" (click)="downloadFile(file,$event)" style="display: inline-block;" matTooltip="Preuzmi" matTooltipPosition="above">
+                                <mat-icon>download</mat-icon>
                             </button>
-                            <button class="btn-clear file-button" (click)="deleteFile(file, $event)" style="display: inline-block;">
-                                <mat-icon matTooltip="Obriši" matTooltipPosition="above">delete</mat-icon>
+                            <button class="btn-clear file-button" (click)="deleteFile(file, $event)" style="display: inline-block;" matTooltip="Obriši" matTooltipPosition="above">
+                                <mat-icon>delete</mat-icon>
                             </button>
                         </div>
-                        <div class="mx-2 hover-show" *ngIf="selectedTab == TabType.PublicDatasets || selectedTab == TabType.PublicModels">
+                        <div class="mx-2 hover-show" *ngIf="selectedTab == TabType.PublicDatasets || selectedTab == TabType.PublicModels" matTooltip="Uvezi" matTooltipPosition="right">
                             <button class="btn-clear file-button" (click)="addFile(file, $event)">
-                                <mat-icon matTooltip="Uvezi" matTooltipPosition="right">note_add</mat-icon>
+                                <mat-icon>note_add</mat-icon>
                             </button>
                         </div>
                     </div>
@@ -122,11 +122,11 @@
     <div [ngSwitch]="newFileSelected" *ngIf="!listView">
         <div class="file-bottom-buttons" *ngIf="selectedTab != TabType.NewFile">
             <div class="file-bottom-buttons-helper">
-                <button *ngIf="this.selectedFile && selectedTab == TabType.File && privacy != Privacy.Public" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)">
-                    <mat-icon matTooltip="Obriši" matTooltipPosition="above">delete</mat-icon>
+                <button *ngIf="this.selectedFile && selectedTab == TabType.File && privacy != Privacy.Public" class="btn-clear file-button" (click)="deleteFile(this.selectedFile, $event)" matTooltip="Obriši" matTooltipPosition="above">
+                    <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 matTooltip="Preuzmi" matTooltipPosition="above">download</mat-icon>
+                <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;" matTooltip="Preuzmi" matTooltipPosition="above">
+                    <mat-icon>download</mat-icon>
                 </button>
             </div>
             <!-- <button class="btn-clear file-button">
@@ -169,6 +169,6 @@
             </button>
         </ng-container>
     </div>
-    
+
 
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html
index 9051a2d4..0d770fc1 100644
--- a/frontend/src/app/_elements/form-model/form-model.component.html
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -90,8 +90,8 @@
     <!-- GRAF -->
 
     <div class="m-2">
-        <div class="row">
-            <div class="col-sm-3 rounded" style="border:1px solid var(--ns-primary);margin-top: 10px; width: fit-content;">
+        <div class="ns-row">
+            <div class="ns-col rounded" style="border:1px solid var(--ns-primary);margin-top: 10px; min-width: fit-content; max-width: 30%;">
                 <!-- <label>Veličina skupa za validaciju: </label><b>{{validationSize}} %</b> 
                     <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div>
                     <div class="text-center pt-0 mt-0 p-0">Trening ////slider////// Test</div>
@@ -120,7 +120,7 @@
                 </div>
             </div>
 
-            <div class="col-sm-9">
+            <div class="ns-col">
                 <!-- {{forExperiment._columnsSelected}} -->
                 <app-graph [model]="newModel" [inputColumns]="getInputColumns()"></app-graph>
             </div>
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index abb5a6d5..2e5a269c 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -67,7 +67,7 @@
         </div>
         <div #steps id="step_4" class="step-content" *ngIf="step3">
             <div class="step-content-inside">
-                <app-line-chart [experiment]="experiment"></app-line-chart>
+                <app-line-chart [experiment]="experiment" [predictor]="predictor!"></app-line-chart>
             </div>
         </div>
         <!--
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 36abca16..4ceb9a03 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -16,6 +16,7 @@ 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',
@@ -31,6 +32,8 @@ 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;
@@ -90,7 +93,7 @@ export class ExperimentComponent implements AfterViewInit {
         if (this.modelToTrain?._id == mId) {
           stat = stat.replace(/'/g, '"');
           this.history.push(JSON.parse(stat));
-          this.linechartComponent.updateAll(this.history,this.modelToTrain.epochs);
+          this.linechartComponent.updateAll(this.history, this.modelToTrain.epochs);
         }
       });
 
@@ -103,6 +106,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) => {
@@ -114,7 +118,7 @@ export class ExperimentComponent implements AfterViewInit {
                 let model = response;
                 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.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse);
                 })
diff --git a/frontend/src/app/_services/predictors.service.ts b/frontend/src/app/_services/predictors.service.ts
index e2033e3e..5859634d 100644
--- a/frontend/src/app/_services/predictors.service.ts
+++ b/frontend/src/app/_services/predictors.service.ts
@@ -29,6 +29,10 @@ export class PredictorsService {
   getMyPredictors(): Observable<Predictor[]> {
     return this.http.get<Predictor[]>(`${Configuration.settings.apiURL}/predictor/mypredictors`, { headers: this.authService.authHeader() });
   }
+
+  downloadH5(id: string): Observable<Blob> {
+    return this.http.get(`${Configuration.settings.apiURL}/file/Download?id=` + id, { headers: this.authService.authHeader(), responseType: 'blob' });
+  }
 }
 
 export class Column {
-- 
cgit v1.2.3


From 60782001174dc7f6f8f5670bff5aaca54667b734 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Sat, 4 Jun 2022 01:17:55 +0200
Subject: Dodao poredjenje modela/prediktora nad eksperimentom. Popravio bug sa
 dodavanjem novog prediktora.

---
 backend/api/api/Controllers/PredictorController.cs | 22 ++++---
 backend/microservice/api/controller.py             |  5 +-
 .../_charts/line-chart/line-chart.component.css    |  2 +-
 .../_charts/line-chart/line-chart.component.html   | 15 ++---
 .../_charts/line-chart/line-chart.component.ts     | 23 +++++--
 .../app/_pages/experiment/experiment.component.css | 30 +++++++++
 .../_pages/experiment/experiment.component.html    | 19 ++++--
 .../app/_pages/experiment/experiment.component.ts  | 71 ++++++++++++++++++++--
 8 files changed, 154 insertions(+), 33 deletions(-)

(limited to 'frontend/src/app/_pages/experiment/experiment.component.html')

diff --git a/backend/api/api/Controllers/PredictorController.cs b/backend/api/api/Controllers/PredictorController.cs
index 6ff7746a..56095553 100644
--- a/backend/api/api/Controllers/PredictorController.cs
+++ b/backend/api/api/Controllers/PredictorController.cs
@@ -21,7 +21,7 @@ namespace api.Controllers
         private readonly IHubContext<ChatHub> _ichat;
         private readonly IModelService _modelService;
 
-        public PredictorController(IPredictorService predictorService, IConfiguration configuration, IJwtToken Token, IMlConnectionService mlConnectionService, IExperimentService experimentService,IUserService userService, IHubContext<ChatHub> ichat,IModelService modelService)
+        public PredictorController(IPredictorService predictorService, IConfiguration configuration, IJwtToken Token, IMlConnectionService mlConnectionService, IExperimentService experimentService, IUserService userService, IHubContext<ChatHub> ichat, IModelService modelService)
         {
             _predictorService = predictorService;
             jwtToken = Token;
@@ -78,7 +78,7 @@ namespace api.Controllers
         //public ActionResult<List<Predictor>> Search(string name)
         //{
         //    string username = getUsername();
-            
+
         //    if (username == null)
         //        return BadRequest();
 
@@ -138,7 +138,7 @@ namespace api.Controllers
 
             List<Predictor> lista = _predictorService.SortPredictors(userId, ascdsc, latest);
 
-            if(latest == 0)
+            if (latest == 0)
                 return lista;
             else
             {
@@ -155,19 +155,23 @@ namespace api.Controllers
         [HttpPost("add")]
         public async Task<ActionResult<Predictor>> Post([FromBody] Predictor predictor)
         {
-            var user=_userService.GetUserById(predictor.uploaderId);
+            var user = _userService.GetUserById(predictor.uploaderId);
             predictor.dateCreated = DateTime.Now.ToUniversalTime();
             var model = _modelService.GetOneModel(predictor.modelId);
-            if (model == null || user==null)
+            if (model == null || user == null)
                 return BadRequest("Model not found or user doesnt exist");
-            Predictor p=_predictorService.Exists(predictor.modelId, predictor.experimentId);
-            if (p == null)
+            Predictor p = _predictorService.Exists(predictor.modelId, predictor.experimentId);
+
+            if (p == null) {
                 _predictorService.Create(predictor);
-            else
+            }
+            else {
+                predictor._id = p._id;
                 _predictorService.Update(p._id, predictor);
+            }
             if (ChatHub.CheckUser(user._id))
                 foreach(var connection in ChatHub.getAllConnectionsOfUser(user._id))
-                    await _ichat.Clients.Client(connection).SendAsync("NotifyPredictor", predictor._id,model.name);
+                    await _ichat.Clients.Client(connection).SendAsync("NotifyPredictor", predictor._id, model._id);
             return CreatedAtAction(nameof(Get), new { id = predictor._id }, predictor);
             
         }
diff --git a/backend/microservice/api/controller.py b/backend/microservice/api/controller.py
index c82634a2..bc8c17a0 100644
--- a/backend/microservice/api/controller.py
+++ b/backend/microservice/api/controller.py
@@ -1,3 +1,4 @@
+from asyncio.windows_events import NULL
 from cmath import log
 from dataclasses import dataclass
 from distutils.command.upload import upload
@@ -112,12 +113,12 @@ def train():
         "metricsMse":histMetrics[6],
         "metricsValMse":histMetrics[7]
     }
-    #print(predictor)
+    print(predictor)
     
     url = config.api_url + "/Predictor/add"
     r = requests.post(url, json=predictor).text
     
-    #print(r)
+    print(r)
     return r
 
 @app.route('/predict', methods = ['POST'])
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
index 9694119d..862a86e1 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
@@ -4,7 +4,7 @@
 }
 
 .bottom {
-    height: 10%;
+    height: 30px;
 }
 
 canvas {
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
index a81f9dc4..cc1c0121 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
@@ -1,28 +1,29 @@
-<div #wrapper class="position-relative" style="width:100%;height:95%;">
+<div #wrapper class="position-relative" style="width:100%;height:95%; border: 1px solid var(--ns-accent); background-color: var(--ns-bg-dark-100); border-radius: 15px;">
     <div class="d-flex flex-column align-items-stretch" [ngClass]="{'hide':experiment.type != ProblemType.Regression}" style="width: 100%; height: 90%;">
         <div class="canvas-container">
-            <canvas id="myChartmae" #canvas>   
+            <canvas #myChartmae>   
             </canvas>
         </div>
         <div class="canvas-container">
-            <canvas id="myChartmse" #canvas>   
+            <canvas #myChartmse>   
             </canvas>
         </div>
     </div>
     <div class="ns-row" [ngClass]="{'hide':experiment.type == ProblemType.Regression}">
         <div class="ns-col">
-            <canvas id="myChartloss" #canvas>   
+            <canvas #myChartloss>   
             </canvas>
         </div>
         <div class="ns-col">
-            <canvas id="myChartacc" #canvas>   
+            <canvas #myChartacc>
             </canvas>
         </div>
     </div>
 
 
-    <div class="bottom d-flex flex-row align-items-center">
-        <button *ngIf="predictor" class="btn-clear dl-button d-flex flex-row" (click)="downloadFile();" style="display: inline-block;" matTooltip="Preuzmi H5" matTooltipPosition="above">
+    <div class="bottom d-flex flex-row" style="justify-content: space-between; align-items: center;">
+        <h3 class="mt-5 mx-2"><span *ngIf="modelName.length > 0 && predictor">Model treniran za konfiguraciju: {{modelName}}</span><span *ngIf="modelName.length > 0 && !predictor">Model se trenira za konfiguraciju: {{modelName}}</span></h3>
+        <button *ngIf="predictor" class="mt-5 mx-2 btn-clear dl-button d-flex flex-row" (click)="downloadFile();" style="display: inline-block;" matTooltip="Preuzmi H5" matTooltipPosition="above">
             <mat-icon>download</mat-icon> <div>H5</div>
         </button>
     </div>
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
index ceff02bd..b2eec377 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
@@ -26,8 +26,12 @@ export class LineChartComponent implements AfterViewInit {
 
   @ViewChild('wrapper')
   wrapper!: ElementRef;
-  @ViewChildren('canvas')
-  canvas!: QueryList<ElementRef>;
+
+  @ViewChild('myChartacc') myChartacc!: ElementRef;
+  @ViewChild('myChartloss') myChartloss!: ElementRef;
+  @ViewChild('myChartmse') myChartmse!: ElementRef;
+  @ViewChild('myChartmae') myChartmae!: ElementRef;
+
   @Input() experiment!: Experiment;
   @Input() predictor?: Predictor;
 
@@ -149,7 +153,7 @@ export class LineChartComponent implements AfterViewInit {
 
     window.addEventListener('resize', () => { this.resize() });
     this.resize();
-    this.myChartAcc = new Chart("myChartacc",
+    this.myChartAcc = new Chart(this.myChartacc.nativeElement,
       {
         type: 'line',
         data: {
@@ -222,7 +226,7 @@ export class LineChartComponent implements AfterViewInit {
 
     );
     if (this.experiment.type == ProblemType.BinaryClassification || this.experiment.type == ProblemType.MultiClassification) { }
-    this.myChartLoss = new Chart("myChartloss",
+    this.myChartLoss = new Chart(this.myChartloss.nativeElement,
       {
         type: 'line',
         data: {
@@ -294,7 +298,7 @@ export class LineChartComponent implements AfterViewInit {
       },
 
     );
-    this.myChartMse = new Chart("myChartmse",
+    this.myChartMse = new Chart(this.myChartmse.nativeElement,
       {
         type: 'line',
         data: {
@@ -366,7 +370,7 @@ export class LineChartComponent implements AfterViewInit {
       },
 
     );
-    this.myChartMae = new Chart("myChartmae",
+    this.myChartMae = new Chart(this.myChartmae.nativeElement,
       {
         type: 'line',
         data: {
@@ -440,5 +444,12 @@ export class LineChartComponent implements AfterViewInit {
     );
 
   }
+
+  modelName: string = '';
+
+  setName(name: string) {
+    this.modelName = name;
+    this.predictor = undefined;
+  }
 }
 
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 2e5a269c..a0ed26ef 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">
@@ -62,12 +62,23 @@
         </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)="goToPage(3); trainModel();" (selectedFileChanged)="setModel($event);"></app-folder>
+                    <app-folder #folderModelCompare [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.MyModels" [tabsToShow]="[TabType.MyModels]" (okPressed)="goToPage(3); 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-line-chart [experiment]="experiment" [predictor]="predictor!"></app-line-chart>
+                <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>
         <!--
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 4ceb9a03..5822eedf 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -37,13 +37,27 @@ export class ExperimentComponent implements AfterViewInit {
   @ViewChild("folderDataset") folderDataset!: FolderComponent;
   @ViewChild(ColumnTableComponent) columnTable!: ColumnTableComponent;
   @ViewChild("folderModel") folderModel!: FolderComponent;
-  @ViewChild(LineChartComponent) linechartComponent!: LineChartComponent;
+  @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");
   }
@@ -65,6 +79,15 @@ export class ExperimentComponent implements AfterViewInit {
     }
   }
 
+  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.step4 = true;
+    }
+  }
+
   stepHeight = this.calcStepHeight();
 
   calcStepHeight() {
@@ -87,16 +110,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.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 => {
@@ -142,6 +197,7 @@ export class ExperimentComponent implements AfterViewInit {
   }
 
   history: any[] = [];
+  historyCmp: any[] = [];
 
   updatePageIfScrolled() {
     if (this.scrolling) return;
@@ -227,10 +283,17 @@ export class ExperimentComponent implements AfterViewInit {
   }
 
   modelToTrain?: Model;
+  modelToTrainCmp?: Model;
 
   setModel(model: FolderFile) {
     const m = <Model>model;
     this.modelToTrain = m;
     this.step3 = true;
   }
+
+  setModelCmp(model: FolderFile) {
+    const m = <Model>model;
+    this.modelToTrainCmp = m;
+    this.step3 = true;
+  }
 }
-- 
cgit v1.2.3


From 542acf92fd69fea61afbef34f12cd6147f919bc8 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Sun, 5 Jun 2022 19:19:56 +0200
Subject: Ispravljeno da kod ucitavanje prediktora iz kolekcije bude lepo
 ucitan model. Disable-ovani dugmici za cuvanje dataseta i modela da se ne bi
 vise puta slao zahtev backu za cuvanje istog. Biranje drugog dataseta nakon
 izbora prvog (refresh).

---
 .../app/_elements/column-table/column-table.component.ts  |  6 +++++-
 frontend/src/app/_elements/folder/folder.component.ts     | 15 ++++++++++++++-
 .../app/_elements/form-dataset/form-dataset.component.ts  |  1 +
 .../src/app/_pages/experiment/experiment.component.html   |  2 +-
 .../src/app/_pages/experiment/experiment.component.ts     | 11 +++++++----
 5 files changed, 28 insertions(+), 7 deletions(-)

(limited to 'frontend/src/app/_pages/experiment/experiment.component.html')

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 8d2875a5..96818976 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -88,6 +88,7 @@ export class ColumnTableComponent implements AfterViewInit {
     if (this.route.snapshot.paramMap.get("id") == null && this.route.snapshot.paramMap.get("predictorId") == null) {
       this.dataset = dataset;
       this.setColumnTypeInitial();
+      this.resetColumnEncodings(Encoding.Label);
   
       this.columnsChecked = [];
       this.dataset.columnInfo.forEach(column => {
@@ -96,7 +97,6 @@ export class ColumnTableComponent implements AfterViewInit {
   
       this.resetInputColumns();
       this.resetOutputColumn();
-      this.resetColumnEncodings(Encoding.Label);
       this.setDeleteRowsForMissingValTreatment();
   
       this.nullValOption = [];
@@ -258,9 +258,11 @@ export class ColumnTableComponent implements AfterViewInit {
   resetColumnEncodings(encodingType: Encoding) {
     if (this.experiment != undefined && this.dataset != undefined) {
       this.experiment.encodings = [];
+      console.log("prvi: RESET COLUMN ENC, DUZINA ENCODINGS NIZA:", this.experiment.encodings.length);
       for (let i = 0; i < this.dataset.columnInfo.length; i++) {
         this.experiment.encodings.push(new ColumnEncoding(this.dataset?.columnInfo[i].columnName, encodingType));
       }
+      console.log("drugi: RESET COLUMN ENC, DUZINA ENCODINGS NIZA:", this.experiment.encodings.length);
       this.columnTableChangeDetected();
     }
   }
@@ -366,6 +368,7 @@ export class ColumnTableComponent implements AfterViewInit {
         Object.assign(this.experiment, experiment);
         this.experiment._columnsSelected = true;
         this.experimentChanged.emit();
+        this.okPressed.emit();
       }
     });
   }
@@ -385,6 +388,7 @@ export class ColumnTableComponent implements AfterViewInit {
       Object.assign(this.experiment, experiment);
       this.experiment._columnsSelected = true;
       this.experimentChanged.emit();
+      this.okPressed.emit();
     });
   }
 
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index fc3b98b2..60f6857c 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -62,6 +62,8 @@ export class FolderComponent implements AfterViewInit {
         if (this.type == FolderType.Dataset) {
           this.refreshFiles(dId);
         }
+        this.saveDisabled = false;
+        console.log("Notify dataset ", this.saveDisabled);
       });
     } else {
       console.warn("Dataset-Load: No connection!");
@@ -140,6 +142,9 @@ export class FolderComponent implements AfterViewInit {
   createNewFile() {
     if (this.type == FolderType.Dataset) {
       this.newFile = new Dataset();
+      this.formNewDataset.files = [];
+      this.formNewDataset.firstInput = false;
+      this.formNewDataset.filename = "";
     } else if (this.type == FolderType.Model) {
       this.newFile = new Model();
     }
@@ -251,6 +256,11 @@ export class FolderComponent implements AfterViewInit {
   }
 
   saveNewFile() {
+    console.log("USAO U saveDisabled: ", this.saveDisabled);
+    if (this.saveDisabled) {
+      console.log("USAO U IF");
+      return;
+    }
     this.saveDisabled = true;
     this.loadingAction = true;
     switch (this.type) {
@@ -261,9 +271,11 @@ export class FolderComponent implements AfterViewInit {
           this.okPressed.emit();
           //Shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se obradi.");
           this.refreshFiles();
+          this.createNewFile();
         },
           () => {
             Shared.openDialog("Neuspeo pokušaj!", "Izvor podataka sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset.");
+            this.saveDisabled = false;
           });
         break;
       case FolderType.Model:
@@ -273,12 +285,13 @@ export class FolderComponent implements AfterViewInit {
           this.loadingAction = false;
           //Shared.openDialog("Obaveštenje", "Uspešno ste dodali novu konfiguraciju neuronske mreže u kolekciju.");
           this.refreshFiles(null, model._id); // todo select model
+          this.createNewFile();
         }, (err) => {
           Shared.openDialog("Neuspeo pokušaj!", "Konfiguracija neuronske mreže sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeću konfiguraciju.");
+          this.saveDisabled = false;
         });
         break;
     }
-    this.saveDisabled = false;
   }
 
   predictorsForExp: { [expId: string]: Predictor[] } = {}
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
index 8714ae7f..3df76aa5 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
@@ -155,6 +155,7 @@ export class FormDatasetComponent {
   uploadDataset(onSuccess: Function = (dataset: Dataset) => { }, onError: Function = () => { }) {
     if (this.files[0] == undefined) {
       shared.openDialog("Greška", "Niste izabrali fajl za učitavanje.");
+      onError();
       return;
     }
 
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index a0ed26ef..6bd921fd 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -57,7 +57,7 @@
         </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">
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 5822eedf..20a3afb0 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -171,11 +171,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);
                 setTimeout(() => {
                   this.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse);
+                  this.goToPage(3);
                 })
               });
             });
@@ -189,6 +191,7 @@ export class ExperimentComponent implements AfterViewInit {
             this.dataset = response;
             this.folderDataset.forExperiment = this.experiment;
             this.folderDataset.selectFile(this.dataset);
+            this.goToPage(1);
           });
         });
       }
@@ -258,6 +261,9 @@ export class ExperimentComponent implements AfterViewInit {
     this.step2 = true;
     setTimeout(() => {
       this.folderModel.updateExperiment();
+      this.folderModel.selectFile(undefined);
+      this.folderModel.selectTab(TabType.NewFile);
+      this.goToPage(2);
     });
   }
 
@@ -276,9 +282,6 @@ export class ExperimentComponent implements AfterViewInit {
     setTimeout(() => {
       this.columnTable.loadDataset(d);
     });
-
-    this.folderModel.selectFile(undefined);
-    this.folderModel.selectTab(TabType.NewFile);
     // REFRESH GRAFIKA (4. KORAKA) URADITI 
   }
 
-- 
cgit v1.2.3


From 0b356a0892d9630d5eaf325f3ef5b1b087500141 Mon Sep 17 00:00:00 2001
From: Ognjen Cirkovic <ciraboxkg@gmail.com>
Date: Mon, 6 Jun 2022 05:22:28 +0200
Subject: Ispravke.

---
 .../_elements/column-table/column-table.component.html  |  2 +-
 frontend/src/app/_elements/folder/folder.component.ts   |  3 ++-
 .../src/app/_pages/experiment/experiment.component.html |  4 ++--
 .../src/app/_pages/experiment/experiment.component.ts   | 17 ++++++++++++-----
 .../src/app/_pages/page-model/page-model.component.html |  4 +++-
 .../src/app/_pages/page-model/page-model.component.ts   | 14 +++++++-------
 6 files changed, 27 insertions(+), 17 deletions(-)

(limited to 'frontend/src/app/_pages/experiment/experiment.component.html')

diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html
index d5273d59..27e0f3bf 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -147,7 +147,7 @@
                                 </div>
                             </td>
                         </tr>
-                        <tr style="padding: 0;">
+                        <tr style="padding: 0;" *ngIf="experiment.encodings!=undefined">
                             <th style="background-color:  var(--ns-primary);" (click)="openEncodingDialog()">
                                 <span class="verticalAlign">Enkodiranje</span>&nbsp;
                                 <span class="material-icons-round verticalAlign rotate">settings</span>
diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts
index 418b5a7f..9dfabdb3 100644
--- a/frontend/src/app/_elements/folder/folder.component.ts
+++ b/frontend/src/app/_elements/folder/folder.component.ts
@@ -63,6 +63,7 @@ export class FolderComponent implements AfterViewInit {
       this.signalRService.hubConnection.on("NotifyDataset", (dName: string, dId: string) => {
         if (this.type == FolderType.Dataset) {
           this.refreshFiles(dId);
+          this.okPressed.emit();
         }
         this.saveDisabled = false;
         console.log("Notify dataset ", this.saveDisabled);
@@ -298,7 +299,7 @@ export class FolderComponent implements AfterViewInit {
         this.formNewDataset!.uploadDataset((dataset: Dataset) => {
           this.newFile = undefined;
           this.loadingAction = false;
-          this.okPressed.emit();
+          //this.okPressed.emit();
           //Shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se obradi.");
           this.refreshFiles();
           this.createNewFile();
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 6bd921fd..3176f58c 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -67,8 +67,8 @@
                     <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)="goToPage(3); trainModel();" (selectedFileChanged)="setModel($event);"></app-folder>
-                    <app-folder #folderModelCompare [type]="FolderType.Model" [forExperiment]="experiment" [startingTab]="TabType.MyModels" [tabsToShow]="[TabType.MyModels]" (okPressed)="goToPage(3); trainModelCmp();" (selectedFileChanged)="setModelCmp($event);" style="width: 50%;"
+                    <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>
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 20a3afb0..e4d444b2 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -75,7 +75,10 @@ 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);
+      });
     }
   }
 
@@ -84,7 +87,10 @@ export class ExperimentComponent implements AfterViewInit {
       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.step4 = true;
+      this.step3 = true;
+      setTimeout(() => {
+        this.goToPage(3);
+      });
     }
   }
 
@@ -268,10 +274,11 @@ export class ExperimentComponent implements AfterViewInit {
   }
 
   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;
@@ -291,12 +298,12 @@ export class ExperimentComponent implements AfterViewInit {
   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;
+    //this.step3 = true;
   }
 }
diff --git a/frontend/src/app/_pages/page-model/page-model.component.html b/frontend/src/app/_pages/page-model/page-model.component.html
index e494542f..0ac8aaae 100644
--- a/frontend/src/app/_pages/page-model/page-model.component.html
+++ b/frontend/src/app/_pages/page-model/page-model.component.html
@@ -1,4 +1,6 @@
 <div class="force-centered" style="color: var(--offwhite);">
-    <app-form-model [disableAll]="true"></app-form-model>
+    <div>
+        {{JSON.stringify(model)}}
+    </div>
     <button mat-raised-button class="m-3 p-2" (click)="import()">Uvezi</button>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/page-model/page-model.component.ts b/frontend/src/app/_pages/page-model/page-model.component.ts
index f988ef0d..0ccd0f9a 100644
--- a/frontend/src/app/_pages/page-model/page-model.component.ts
+++ b/frontend/src/app/_pages/page-model/page-model.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import Shared from 'src/app/Shared';
+import Experiment from 'src/app/_data/Experiment';
 import Model from 'src/app/_data/Model';
 import { FormModelComponent } from 'src/app/_elements/form-model/form-model.component';
 import { ModelsService } from 'src/app/_services/models.service';
@@ -12,16 +13,14 @@ import { ModelsService } from 'src/app/_services/models.service';
 })
 export class PageModelComponent implements OnInit {
 
-  @ViewChild(FormModelComponent) formModel!: FormModelComponent;
-
   constructor(private route: ActivatedRoute, private router: Router, private modelsService: ModelsService) { }
-
+  model!:Model;
   ngOnInit(): void {
     this.route.queryParams.subscribe(params => {
       let id = this.route.snapshot.paramMap.get("id");
       if (id) {
         this.modelsService.getModelById(id).subscribe((model) => {
-          this.formModel.newModel = model;
+          this.model = model;
         });
       } else {
         this.router.navigate(['']);
@@ -30,12 +29,13 @@ export class PageModelComponent implements OnInit {
   }
 
   import() {
-    this.formModel.newModel._id = "";
-    this.formModel.newModel.isPublic = false;
-    this.modelsService.stealModel(this.formModel.newModel).subscribe((response) => {
+    this.model._id = "";
+    this.model.isPublic = false;
+    this.modelsService.stealModel(this.model).subscribe((response) => {
       Shared.openDialog("Obaveštenje", "Uspešno ste dodali javnu konfiguraciju neuronske mreže u vašu kolekciju.");
     }, (error: any) => {
       Shared.openDialog("Obaveštenje", "Konfiguracija neuronske mreže sa ovim imenom postoji u vašoj kolekciji.");
     });
   }
+  JSON=JSON;
 }
-- 
cgit v1.2.3