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

15 files changed, 175 insertions, 62 deletions

diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts
index 16fe95a5..525d371a 100644
--- a/frontend/src/app/_data/Dataset.ts
+++ b/frontend/src/app/_data/Dataset.ts
@@ -28,6 +28,7 @@ export default class Dataset extends FolderFile {
 export class ColumnInfo {
     constructor(
         public columnName: string = '',
+        public columnType: ColumnType,
         public isNumber: boolean = false,
         public numNulls: number = 0,
         public uniqueValues?: string[],
@@ -35,5 +36,15 @@ export class ColumnInfo {
         public mean?: number,
         public min?: number,
         public max?: number
-    ) { }
+    ) { 
+        if (isNumber)
+            columnType = ColumnType.numerical;
+        else 
+            columnType = ColumnType.categorical;
+    }
 }
+
+export enum ColumnType {
+    categorical = "Kategorijski",
+    numerical = "Numerički"
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
index 3faa4794..d6f4b6ec 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
@@ -27,8 +27,8 @@ export class BoxPlotComponent implements AfterViewInit {
     labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
       datasets: [{
       label: 'Dataset 1',
-      backgroundColor: 'rgba(0, 65, 101, 1.0)',
-      borderColor: '#0063AB',
+      backgroundColor: '#0063AB',
+      borderColor: '#dfd7d7',
       borderWidth: 1,
       outlierColor: '#999999',
       scaleFontColor: '#0063AB',
@@ -78,7 +78,7 @@ export class BoxPlotComponent implements AfterViewInit {
              scales : {
                x: {
                 ticks: {
-                  color: 'rgba(0, 65, 101, 1.0)'
+                  color: '#dfd7d7'
                 },
                 grid: {
                   color: "rgba(0, 99, 171, 0.5)"
@@ -88,7 +88,7 @@ export class BoxPlotComponent implements AfterViewInit {
                   min: -50,
                   max: 200,
                   ticks: {
-                    color: 'rgba(0, 65, 101, 1.0)'
+                    color: '#dfd7d7'
                   },
                   grid: {
                     color: "rgba(0, 99, 171, 0.5)"
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 c8f406f4..7f18256a 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,5 +1,3 @@
-<div class="chart-wrapper">
-    <canvas  id="myChart">
-        
-    </canvas>
-</div>
\ No newline at end of file
+
+    <canvas  id="myChart" style="width: 100%; height: 530px;">   
+    </canvas>
\ 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 49558025..34df38bc 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,4 +1,4 @@
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
 import { Chart } from 'chart.js';
 
 @Component({
@@ -9,12 +9,12 @@ import { Chart } from 'chart.js';
 
 export class LineChartComponent implements AfterViewInit {
 
-  dataAcc: number[] = [];
-  dataMAE: number[] = [];
-  dataMSE: number[] = [];
-  dataLOSS: number[] = [];
+  dataAcc: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
+  dataMAE: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
+  dataMSE: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
+  dataLOSS: number[] =[2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
 
-  dataEpoch: number[] = [];
+  dataEpoch: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
 
   constructor() {
     /*let i = 0;
@@ -77,11 +77,28 @@ export class LineChartComponent implements AfterViewInit {
         },
         options: {
           scales: {
-            y: {
-              beginAtZero: true
-            }
+              x:{
+                ticks: {
+                  color: 'white'
+                },
+                grid: {
+                  color: "rgba(0, 99, 171, 0.5)"
+                }
+              },
+              y: {
+                  beginAtZero: true,
+                  ticks: {
+                    color: 'white'
+                  },
+                  grid: {
+                    color: "rgba(0, 99, 171, 0.5)"
+                  }
+              }
+              
           }
-        }
+          
+          
+      }
       }
     );
   }
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
index 5735217e..005cb692 100644
--- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
@@ -1,6 +1,4 @@
 #divScatterChart{
-    background-color: beige;
-    display: block;
-    width: 400px;
-    height: 200px;   
+
+    display: block;   
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
index 2b30fe1f..ef41775a 100644
--- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
@@ -1,4 +1,4 @@
-<p>Scatter chart:</p>
-<div id="divScatterChart">
-    <canvas id="ScatterCharts"> </canvas>
+
+<div id="divScatterChart" style="width: 100%;height: 100%;">
+    <canvas id="ScatterCharts" style="width: 100%;height: 280px;"> </canvas>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
index 9dfef4c3..12795c70 100644
--- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
@@ -24,15 +24,32 @@ export class ScatterchartComponent implements OnInit {
                 {x: 15, y: 5},
                 {x: 16, y: 3},
                 {x: 17, y: 2}],
-              backgroundColor: 'rgb(255, 99, 132)'
+                borderColor: 'white',
             }]
       },
       options: {
           scales: {
+              x:{
+                ticks: {
+                  color: 'white'
+                },
+                grid: {
+                  color: "rgba(0, 99, 171, 0.5)"
+                }
+              },
               y: {
-                  beginAtZero: true
+                  beginAtZero: true,
+                  ticks: {
+                    color: 'white'
+                  },
+                  grid: {
+                    color: "rgba(0, 99, 171, 0.5)"
+                  }
               }
+              
           }
+          
+          
       }
   });
   }
diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css
index 108efb32..5dc2e9ec 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.css
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
@@ -3,7 +3,6 @@ table.fixed {
     display: block;
     overflow-x: auto;
     white-space: nowrap;
-    border: 1px solid var(--ns-primary-50);
     font-size: 12px;
     border-radius: 4px;
 }
@@ -18,7 +17,6 @@ table.fixed td {
     max-width: 200px;
     min-width: 200px;
     vertical-align: middle;
-    background-color: var(--ns-bg-dark-100);
     margin: 4px;
 }
 
@@ -27,13 +25,12 @@ table.fixed th {
     max-width: 120px;
     min-width: 120px;
     vertical-align: middle;
-    background-color: var(--ns-bg-dark-100);
+    background-color: var(--ns-primary-50);
     font-size: 14px;
 }
 
 table.fixed th:first-child {
     text-align: center;
-    background-color: var(--ns-primary-25);
 }
 
 .columnNames {
@@ -107,7 +104,7 @@ table ::ng-deep .mat-form-field-wrapper {
 }
 
 .graphic-class {
-    background-color: white !important;
+    opacity: 0.5;
 }
 
 
@@ -220,4 +217,29 @@ table ::ng-deep .mat-form-field-wrapper {
 
 .long {
     height: 3rem;
+}
+
+.col-disabled {
+    background-color: rgb(0, 45, 69);
+}
+
+.text-disabled {
+    color: gray;
+}
+
+.header-disabled {
+    color: gray;
+}
+
+.menu-disabled {
+    pointer-events: none;
+    opacity: .5;
+}
+
+col:not(.col-disabled) {
+    background-color: var(--ns-bg-dark-100);
+}
+
+.col-first {
+    background-color: rgb(1, 56, 86) !important;
 }
\ No newline at end of file
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 53cb3551..42c43138 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -4,11 +4,12 @@
             {{tab.name}}
         </a>
     </div>
+    <!--
     <button mat-button class="p-1 folder-tab-end rounded-top">
         Kolone
         <mat-icon>keyboard_double_arrow_down</mat-icon>
-        <!--meni ovde-->
     </button>
+    -->
 </div>
 <div id="folder-table" *ngIf="dataset && experiment">
     <!--<div [ngSwitch]="tabToDisplay">-->
@@ -16,13 +17,17 @@
 
         <div [ngClass]="{'hidden': tabToDisplay != Table.Data}">
             <table class="table text-offwhite fixed bg-blur">
+                <colgroup>
+                    <col class="col-first">
+                    <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}">
+                </colgroup>
                 <thead>
                     <tr>
                         <th>#</th>
-                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}">
                             <div class="cell-align">
                                 #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
-                                <mat-checkbox color="primary" checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                                <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
                             </div>
                         </th>
                     </tr>
@@ -30,7 +35,7 @@
                 <tbody>
                     <tr *ngFor="let row of tableData; let i = index">
                         <th>#{{i}}</th>
-                        <td *ngFor="let col of row; let j = index">
+                        <td *ngFor="let col of row; let j = index" [ngClass]="{'text-disabled' : !columnsChecked[j]}">
                             <div class="text-overflow">
                                 {{col}}
                             </div>
@@ -42,22 +47,29 @@
 
         <div [ngClass]="{'hidden': tabToDisplay != Table.CorrelationMatrix}">
             <table class="table text-offwhite fixed bg-blur">
+                <colgroup>
+                    <col class="col-first">
+                    <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}">
+                </colgroup>
                 <thead>
                     <tr>
-                        <th>Naziv</th>
-                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                            #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
+                        <th>Kolona</th>
+                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}">
+                            <div class="cell-align">
+                                #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
+                                <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                            </div>
                         </th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                        <th>
+                        <th [ngClass]="{'header-disabled col-disabled' : !columnsChecked[i]}">
                             <div class="text-left">
                                 {{colInfo.columnName}}
                             </div>
                         </th>
-                        <td *ngFor="let colInfo of dataset.columnInfo; let j = index">
+                        <td *ngFor="let colInfo of dataset.columnInfo; let j = index" [ngClass]="{'text-disabled col-disabled' : !columnsChecked[j] || !columnsChecked[i]}">
                             <div class="text-overflow">
                                 0.1
                             </div>
@@ -69,13 +81,17 @@
 
         <div [ngClass]="{'hidden': tabToDisplay != Table.Columns}">
             <table class="table text-offwhite fixed bg-blur">
+                <colgroup>
+                    <col class="col-first">
+                    <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}">
+                </colgroup>
                 <thead>
                     <tr>
                         <th>Naziv</th>
-                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}">
                             <div class="cell-align">
                                 #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
-                                <mat-checkbox color="primary" checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                                <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
                             </div>
                         </th>
                     </tr>
@@ -83,9 +99,9 @@
                 <tbody>
                     <tr>
                         <th>Tip</th>
-                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix">
+                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix" [ngClass]="{'text-disabled' : !columnsChecked[i]}">
                             <mat-form-field>
-                                <mat-select matNativeControl [(value)]="colInfo.isNumber">
+                                <mat-select matNativeControl [(value)]="colInfo.isNumber" [disabled]="!columnsChecked[i]">
                                     <mat-option [value]="false">Kategorijski</mat-option>
                                     <mat-option [value]="true">Numerički</mat-option>
                                 </mat-select>
@@ -93,15 +109,15 @@
                         </td>
                     </tr>
                     <tr class="graphics-row">
-                        <th class="no-pad border-bottom">Grafik</th>
-                        <td class="graphic-class no-pad" *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                        <th class="no-pad">Grafik</th>
+                        <td class="no-pad" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'graphic-class' : !columnsChecked[i]}">
                             <app-box-plot *ngIf="colInfo.isNumber" [width]="150" [height]="150"></app-box-plot>
                             <app-pie-chart *ngIf="!colInfo.isNumber" [width]="150" [height]="150"></app-pie-chart>
                         </td>
                     </tr>
                     <tr>
-                        <th class="brighter">Statistika</th>
-                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                        <th class="border-bottom">Statistika</th>
+                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}">
                             <span *ngIf="colInfo.isNumber">
                     Mean: {{colInfo.mean}}<br>
                     Median: {{colInfo.median}}<br>
@@ -124,9 +140,9 @@
                             <span class="verticalAlign">Enkodiranje</span>&nbsp;
                             <span class="material-icons-round verticalAlign">settings</span>
                         </th>
-                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix">
+                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix" [ngClass]="{'text-disabled' : !columnsChecked[i]}">
                             <mat-form-field>
-                                <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding">
+                                <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding" [disabled]="!columnsChecked[i]">
                                     <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option">
                                         {{ optionName }}
                                     </mat-option>
@@ -139,9 +155,9 @@
                             <div id="missingValuesHeader">Regulisanje<br>nedostajućih<br>vrednosti<br></div>
                             <span class="material-icons-round">settings</span>
                         </th>
-                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}">
 
-                            <button class="w-100" mat-raised-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu>
+                            <button class="w-100" mat-raised-button [ngClass]="{ 'menu-disabled' : !columnsChecked[i]}" [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu>
                     <div class="cell-align">
                         {{nullValOption[i]}}
                         <mat-icon>arrow_drop_down</mat-icon>
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 9cabf190..4499196c 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -26,6 +26,8 @@ export class ColumnTableComponent implements AfterViewInit {
   tableData?: any[][];
   nullValOption: string[] = [];
 
+  columnsChecked: boolean[] = []; //niz svih kolona
+
   testSetDistribution: number = 70;
   constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) {
     //ovo mi nece trebati jer primam dataset iz druge komponente
@@ -35,7 +37,9 @@ export class ColumnTableComponent implements AfterViewInit {
     this.datasetService.getMyDatasets().subscribe((datasets) => {
       this.dataset = datasets[0];
       this.experiment = new Experiment();
-
+      this.dataset.columnInfo.forEach(column => {
+        this.columnsChecked.push(true);
+      });
       console.log(datasets);
       for (let i = 0; i < this.dataset?.columnInfo.length; i++) {
         this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName);
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.css b/frontend/src/app/_elements/metric-view/metric-view.component.css
index e69de29b..f91c1ccc 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.css
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.css
@@ -0,0 +1,10 @@
+#container{
+    width: 100%;
+    height: 90%;
+    border-radius: 5px;
+    background-color:var(--ns-primary-25);
+    border:1px solid var(--ns-accent);
+}
+#line{
+    background-color:#dfd7d7f0 ;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html
index 3a6cce8d..d72bc92b 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.html
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.html
@@ -1,3 +1,8 @@
-<div>
-
+<div id="container" class="d-flex justify-content-center flex-row w-100">
+    <div id="line" style="width: 100%;height: 100%;background-color:var(--ns-bg-dark-100);">
+        <app-line-chart></app-line-chart>
+    </div>
+    <div style="background-color: var(--ns-bg-dark-100);width: 50%;height: 50%;">
+        <app-scatterchart></app-scatterchart>
+    </div>
 </div>
\ 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 08d709b2..86faeb2a 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -1,4 +1,4 @@
-<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px);">
+<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px); text-align: center;">
     <div class="d-flex flex-colum align-items-center sidenav">
         <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
             <mat-step>
@@ -18,6 +18,10 @@
                 <ng-template matStepLabel><span class="label">Treniranje</span></ng-template>
                 <p>Odaberite parametre i trenirajte model</p>
             </mat-step>
+            <mat-step>
+                <ng-template matStepLabel><span class="label">Pregled rezultata treniranja</span></ng-template>
+                <p>Pregledajte tok treniranja i grafički prikaz rezultata</p>
+            </mat-step>
         </mat-stepper>
     </div>
     <div #stepsContainer class="steps-container">
@@ -33,7 +37,12 @@
         </div>
         <div #steps id="step_3" class="step-content">
             <div class="step-content-inside">
-                <app-folder [type]="FolderType.Model" [tabsToShow]="[TabType.MyModels, TabType.PublicModels, TabType.File]" (okPressed)="goToPage(0)"></app-folder>
+                <app-folder [type]="FolderType.Model" (okPressed)="goToPage(3)"></app-folder>
+            </div>
+        </div>
+        <div #steps id="step_4" class="step-content">
+            <div class="step-content-inside" >
+                <app-metric-view></app-metric-view>
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index 508382da..2825b3bf 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -27,6 +27,7 @@
                 </p>
             </div>
         </div>
-    </div>
 
+
+    </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index fc6d3c6b..5a763152 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -32,6 +32,7 @@ import { ScatterchartComponent } from './_elements/_charts/scatterchart/scatterc
 import { BarchartComponent } from './_elements/_charts/barchart/barchart.component';
 import { PieChartComponent } from './_elements/_charts/pie-chart/pie-chart.component';
 import { BoxPlotComponent } from './_elements/_charts/box-plot/box-plot.component';
+import {LineChartComponent} from './_elements/_charts/line-chart/line-chart.component';
 // Elements
 import { NavbarComponent } from './_elements/navbar/navbar.component';
 import { NotificationsComponent } from './_elements/notifications/notifications.component';
@@ -49,6 +50,7 @@ import { TestComponent } from './_pages/test/test.component';
 import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component';
 import { HeatmapComponent } from './_elements/_charts/heatmap/heatmap.component';
 import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap';
+import { MetricViewComponent } from './_elements/metric-view/metric-view.component';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -85,7 +87,10 @@ export function initializeApp(appConfig: Configuration) {
     MissingvaluesDialogComponent,
     TestComponent,
     DoughnutChartComponent,
-    HeatmapComponent
+    HeatmapComponent,
+    MetricViewComponent,
+    LineChartComponent
+    
   ],
   imports: [
     BrowserModule,