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.

---
 .../_charts/line-chart/line-chart.component.css    |  2 +-
 .../_charts/line-chart/line-chart.component.html   | 15 +++++++-------
 .../_charts/line-chart/line-chart.component.ts     | 23 ++++++++++++++++------
 3 files changed, 26 insertions(+), 14 deletions(-)

(limited to 'frontend/src/app/_elements/_charts/line-chart')

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;
+  }
 }
 
-- 
cgit v1.2.3