Reorganizovao stranice i komponente.

76 files changed, 599 insertions, 1297 deletions

diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.css b/frontend/src/app/_elements/_charts/barchart/barchart.component.css
new file mode 100644
index 00000000..c3634c9f
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.css
@@ -0,0 +1,6 @@
+#divBarChart{
+    background-color: beige;
+    display: block;
+    width: 400px;
+    height: 200px;   
+}
diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.html b/frontend/src/app/_elements/_charts/barchart/barchart.component.html
new file mode 100644
index 00000000..48b7bd3e
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.html
@@ -0,0 +1,4 @@
+<p>Bar chart:</p>
+<div id="divBarChart">
+    <canvas id="Barchart"> </canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/carousel/carousel.component.spec.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts
index 9196e044..8b346d1c 100644
--- a/frontend/src/app/_elements/carousel/carousel.component.spec.ts
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { CarouselComponent } from './carousel.component';
+import { BarchartComponent } from './barchart.component';
 
-describe('CarouselComponent', () => {
-  let component: CarouselComponent;
-  let fixture: ComponentFixture<CarouselComponent>;
+describe('BarchartComponent', () => {
+  let component: BarchartComponent;
+  let fixture: ComponentFixture<BarchartComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ CarouselComponent ]
+      declarations: [ BarchartComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(CarouselComponent);
+    fixture = TestBed.createComponent(BarchartComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts
new file mode 100644
index 00000000..def64b7d
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-barchart',
+  templateUrl: './barchart.component.html',
+  styleUrls: ['./barchart.component.css']
+})
+export class BarchartComponent implements OnInit {
+
+  constructor() { }
+
+    ngOnInit(){
+      const myChart = new Chart("Barchart", {
+        type: 'bar',
+        data: {
+            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+            datasets: [{
+                label: 'Number of Votes',
+                data: [12, 19, 3, 5, 2, 3],
+                backgroundColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+
+        
+    });
+
+    
+  }
+
+}
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.css
index e69de29b..e69de29b 100644
--- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.css
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
new file mode 100644
index 00000000..20cf6487
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
@@ -0,0 +1 @@
+<p>box-plot works!</p>
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts
index cb07ef1d..759e7c5e 100644
--- a/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { AnnvisualComponent } from './annvisual.component';
+import { BoxPlotComponent } from './box-plot.component';
 
-describe('AnnvisualComponent', () => {
-  let component: AnnvisualComponent;
-  let fixture: ComponentFixture<AnnvisualComponent>;
+describe('BoxPlotComponent', () => {
+  let component: BoxPlotComponent;
+  let fixture: ComponentFixture<BoxPlotComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ AnnvisualComponent ]
+      declarations: [ BoxPlotComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(AnnvisualComponent);
+    fixture = TestBed.createComponent(BoxPlotComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
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
new file mode 100644
index 00000000..0cef8f90
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-box-plot',
+  templateUrl: './box-plot.component.html',
+  styleUrls: ['./box-plot.component.css']
+})
+export class BoxPlotComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_elements/carousel/carousel.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
index e69de29b..e69de29b 100644
--- a/frontend/src/app/_elements/carousel/carousel.component.css
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
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
new file mode 100644
index 00000000..c8f406f4
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
@@ -0,0 +1,5 @@
+<div class="chart-wrapper">
+    <canvas  id="myChart">
+        
+    </canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-model/item-model.component.spec.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts
index f696a160..0c5e7ef5 100644
--- a/frontend/src/app/_elements/item-model/item-model.component.spec.ts
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ItemModelComponent } from './item-model.component';
+import { LineChartComponent } from './line-chart.component';
 
-describe('ItemModelComponent', () => {
-  let component: ItemModelComponent;
-  let fixture: ComponentFixture<ItemModelComponent>;
+describe('LineChartComponent', () => {
+  let component: LineChartComponent;
+  let fixture: ComponentFixture<LineChartComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ItemModelComponent ]
+      declarations: [ LineChartComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ItemModelComponent);
+    fixture = TestBed.createComponent(LineChartComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
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
new file mode 100644
index 00000000..49558025
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
@@ -0,0 +1,88 @@
+import { Component, AfterViewInit } from '@angular/core';
+import { Chart } from 'chart.js';
+
+@Component({
+  selector: 'app-line-chart',
+  templateUrl: './line-chart.component.html',
+  styleUrls: ['./line-chart.component.css']
+})
+
+export class LineChartComponent implements AfterViewInit {
+
+  dataAcc: number[] = [];
+  dataMAE: number[] = [];
+  dataMSE: number[] = [];
+  dataLOSS: number[] = [];
+
+  dataEpoch: number[] = [];
+
+  constructor() {
+    /*let i = 0;
+    setInterval(() => {
+      this.dataAcc.push(0.5);
+      this.dataEpoch.push(i);
+      i++;
+      this.update();
+    }, 200);*/
+  }
+
+  myChart!: Chart;
+
+  update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[]) {
+    this.dataAcc.length = 0;
+    this.dataAcc.push(...myAcc);
+
+    this.dataEpoch.length = 0;
+    this.dataEpoch.push(...myEpochs);
+
+    this.dataMAE.length = 0;
+    this.dataMAE.push(...myMae);
+
+    this.dataLOSS.length = 0;
+    this.dataLOSS.push(...myLoss);
+
+    this.dataMSE.length = 0;
+    this.dataMSE.push(...myMse);
+
+    this.myChart.update();
+  }
+
+  ngAfterViewInit(): void {
+    this.myChart = new Chart("myChart",
+      {
+        type: 'line',
+        data: {
+          labels: this.dataEpoch,
+          datasets: [{
+            label: 'Accuracy',
+            data: this.dataAcc,
+            borderWidth: 1
+          },
+          {
+            label: 'Loss',
+            data: this.dataLOSS,
+            borderWidth: 1
+          },
+          {
+            label: 'MAE',
+            data: this.dataMAE,
+            borderWidth: 1
+          },
+          {
+            label: 'MSE',
+            data: this.dataMSE,
+            borderWidth: 1
+          }
+          ]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        }
+      }
+    );
+  }
+}
diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.css b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.css
index e69de29b..e69de29b 100644
--- a/frontend/src/app/_elements/item-experiment/item-experiment.component.css
+++ b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.css
diff --git a/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html
new file mode 100644
index 00000000..806ea9e8
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html
@@ -0,0 +1,2 @@
+<canvas #mixedchart width="800" height="450"></canvas>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
diff --git a/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.spec.ts b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.spec.ts
new file mode 100644
index 00000000..361cd047
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MixedChartComponent } from './mixed-chart.component';
+
+describe('MixedChartComponent', () => {
+  let component: MixedChartComponent;
+  let fixture: ComponentFixture<MixedChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MixedChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MixedChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.ts b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.ts
new file mode 100644
index 00000000..2524ee36
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.ts
@@ -0,0 +1,56 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-mixed-chart',
+  templateUrl: './mixed-chart.component.html',
+  styleUrls: ['./mixed-chart.component.css']
+})
+export class MixedChartComponent implements AfterViewInit {
+
+  @ViewChild('mixedchart') chartRef!: ElementRef;
+  constructor() { }
+
+  ngAfterViewInit(): void {
+    const myChart = new Chart(this.chartRef.nativeElement, {
+      type: 'bar',
+      data: {
+        labels: ["1900", "1950", "1999", "2050"],
+        datasets: [{
+            label: "Europe",
+            type: "line",
+            borderColor: "#8e5ea2",
+            data: [408,547,675,734],
+            fill: false
+          }, {
+            label: "Africa",
+            type: "line",
+            borderColor: "#3e95cd",
+            data: [133,221,783,2478],
+            fill: false
+          }, {
+            label: "Europe",
+            type: "bar",
+            backgroundColor: "rgba(0,0,0,0.2)",
+            data: [408,547,675,734],
+          }, {
+            label: "Africa",
+            type: "bar",
+            backgroundColor: "rgba(0,0,0,0.2)",
+            //backgroundColorHover: "#3e95cd",
+            data: [133,221,783,2478]
+          }
+        ]
+      },
+      /*options: {
+        title: {
+          display: true,
+          text: 'Population growth (millions): Europe & Africa'
+        },
+        legend: { display: false }
+      }*/
+
+    });
+  }
+
+}
diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.css b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.css
index e69de29b..e69de29b 100644
--- a/frontend/src/app/_elements/item-predictor/item-predictor.component.css
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.css
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
new file mode 100644
index 00000000..43a2d766
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
@@ -0,0 +1 @@
+<p>pie-chart works!</p>
diff --git a/frontend/src/app/_elements/model-load/model-load.component.spec.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts
index 1dafd966..64f36b7d 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.spec.ts
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ModelLoadComponent } from './model-load.component';
+import { PieChartComponent } from './pie-chart.component';
 
-describe('ModelLoadComponent', () => {
-  let component: ModelLoadComponent;
-  let fixture: ComponentFixture<ModelLoadComponent>;
+describe('PieChartComponent', () => {
+  let component: PieChartComponent;
+  let fixture: ComponentFixture<PieChartComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ModelLoadComponent ]
+      declarations: [ PieChartComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ModelLoadComponent);
+    fixture = TestBed.createComponent(PieChartComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
new file mode 100644
index 00000000..dde5cbab
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-pie-chart',
+  templateUrl: './pie-chart.component.html',
+  styleUrls: ['./pie-chart.component.css']
+})
+export class PieChartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.css b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.css
index e69de29b..e69de29b 100644
--- a/frontend/src/app/_elements/select-item-list/select-item-list.component.css
+++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.css
diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html
new file mode 100644
index 00000000..f9f9a24a
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html
@@ -0,0 +1,2 @@
+<canvas #linechart width="800" height="450">Point line chart:</canvas>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.spec.ts b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts
index 1da7d05d..fe08fe7c 100644
--- a/frontend/src/app/_elements/item-experiment/item-experiment.component.spec.ts
+++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ItemExperimentComponent } from './item-experiment.component';
+import { PointLinechartComponent } from './point-linechart.component';
 
-describe('ItemExperimentComponent', () => {
-  let component: ItemExperimentComponent;
-  let fixture: ComponentFixture<ItemExperimentComponent>;
+describe('PointLinechartComponent', () => {
+  let component: PointLinechartComponent;
+  let fixture: ComponentFixture<PointLinechartComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ItemExperimentComponent ]
+      declarations: [ PointLinechartComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ItemExperimentComponent);
+    fixture = TestBed.createComponent(PointLinechartComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts
new file mode 100644
index 00000000..3497a20c
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts
@@ -0,0 +1,57 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+
+@Component({
+  selector: 'app-point-linechart',
+  templateUrl: './point-linechart.component.html',
+  styleUrls: ['./point-linechart.component.css']
+})
+export class PointLinechartComponent implements AfterViewInit {
+
+  @ViewChild('linechart') chartRef!: ElementRef;
+  constructor() { }
+  ngAfterViewInit(): void {
+    const myChart = new Chart(this.chartRef.nativeElement, {
+      type: 'line',
+      data: {
+        labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
+        datasets: [{ 
+            data: [86,114,106,106,107,111,133,221,783,2478],
+            label: "Africa",
+            borderColor: "#3e95cd",
+            fill: false
+          }, { 
+            data: [282,350,411,502,635,809,947,1402,3700,5267],
+            label: "Asia",
+            borderColor: "#8e5ea2",
+            fill: false
+          }, { 
+            data: [168,170,178,190,203,276,408,547,675,734],
+            label: "Europe",
+            borderColor: "#3cba9f",
+            fill: false
+          }, { 
+            data: [40,20,10,16,24,38,74,167,508,784],
+            label: "Latin America",
+            borderColor: "#e8c3b9",
+            fill: false
+          }, { 
+            data: [6,3,2,2,7,26,82,172,312,433],
+            label: "North America",
+            borderColor: "#c45850",
+            fill: false
+          }
+        ]
+      },
+      /*options: {
+        title: {
+          display: true,
+          text: 'World population per region (in millions)'
+        }
+      }*/
+      
+    });
+  
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
new file mode 100644
index 00000000..5735217e
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
@@ -0,0 +1,6 @@
+#divScatterChart{
+    background-color: beige;
+    display: block;
+    width: 400px;
+    height: 200px;   
+}
\ 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
new file mode 100644
index 00000000..2b30fe1f
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
@@ -0,0 +1,4 @@
+<p>Scatter chart:</p>
+<div id="divScatterChart">
+    <canvas id="ScatterCharts"> </canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts
new file mode 100644
index 00000000..1db81051
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScatterchartComponent } from './scatterchart.component';
+
+describe('ScatterchartComponent', () => {
+  let component: ScatterchartComponent;
+  let fixture: ComponentFixture<ScatterchartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ScatterchartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScatterchartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
new file mode 100644
index 00000000..9dfef4c3
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-scatterchart',
+  templateUrl: './scatterchart.component.html',
+  styleUrls: ['./scatterchart.component.css']
+})
+export class ScatterchartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(){
+    const myChart = new Chart("ScatterCharts", {
+      type: 'scatter',
+      data: {
+          datasets: [{
+              label: 'Scatter Example:',
+              data: [{x: 1, y: 11}, {x:2, y:12}, {x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}, {x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9},
+                {x: 11, y: 9},
+                {x: 12, y: 8},
+                {x: 13, y: 6},
+                {x: 14, y: 0},
+                {x: 15, y: 5},
+                {x: 16, y: 3},
+                {x: 17, y: 2}],
+              backgroundColor: 'rgb(255, 99, 132)'
+            }]
+      },
+      options: {
+          scales: {
+              y: {
+                  beginAtZero: true
+              }
+          }
+      }
+  });
+  }
+}
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html
deleted file mode 100644
index bff8b022..00000000
--- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<div class="row mb-4">
-    <div class="col-2">
-    </div>
-    <div class="col-3">
-      <label for="name" class="col-form-label">Naziv dataseta:</label>
-      <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name">
-
-      <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
-      <div>
-        <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea>
-      </div>
-
-      <label for="checkboxIsPublic" class="form-check-label mt-3 mb-1">Želite li da dataset bude javan?
-        <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.isPublic" (change)="checkAccessible()" type="checkbox"
-          value="" id="checkboxIsPublic">
-      </label>    
-      
-      <label for="checkboxAccessibleByLink" class="form-check-label">Želite li da bude deljiv linkom? &nbsp;
-        <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.accessibleByLink" type="checkbox"
-          value="" id="checkboxAccessibleByLink">
-      </label>
-    </div>
-    <div class="col-1">
-    </div>
-    <div class="col-4 mt-4">
-
-      <input list="delimiterOptions" placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2"
-        [(ngModel)]="dataset.delimiter" (input)="update()">
-      <datalist id="delimiterOptions">
-        <option *ngFor="let option of delimiterOptions">{{option}}</option>
-      </datalist>
-
-      <label for="type" class="form-check-label my-5">Da li .csv ima header?
-        <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="dataset.hasHeader" type="checkbox"
-          value="" id="checkboxHeader" checked>
-      </label>
-      <br>
-      <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)"
-        accept=".csv">
-    </div>
-</div>
-
-<div class="px-5 mt-5">
-  <app-datatable [tableData]="tableData"></app-datatable>
-</div>
-
-<div class="d-flex flex-row align-items-center justify-content-center w-100 my-2">
-  <button (click)="uploadDataset()" class="btn btn-lg col-4" style="background-color:#003459; color:white;">Dodaj izvor podataka</button>
-</div>
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts
deleted file mode 100644
index a9ea25b4..00000000
--- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { AddNewDatasetComponent } from './add-new-dataset.component';
-
-describe('AddNewDatasetComponent', () => {
-  let component: AddNewDatasetComponent;
-  let fixture: ComponentFixture<AddNewDatasetComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ AddNewDatasetComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(AddNewDatasetComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts
deleted file mode 100644
index 3e1b5c73..00000000
--- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Component, EventEmitter, Output, ViewChild } from '@angular/core';
-import Dataset from 'src/app/_data/Dataset';
-import { DatasetsService } from 'src/app/_services/datasets.service';
-import { ModelsService } from 'src/app/_services/models.service';
-import shared from 'src/app/Shared';
-import { DatatableComponent, TableData } from '../datatable/datatable.component';
-import { CsvParseService } from 'src/app/_services/csv-parse.service';
-
-@Component({
-  selector: 'app-add-new-dataset',
-  templateUrl: './add-new-dataset.component.html',
-  styleUrls: ['./add-new-dataset.component.css']
-})
-export class AddNewDatasetComponent {
-
-  @Output() newDatasetAdded = new EventEmitter<string>();
-  @ViewChild(DatatableComponent) datatable!: DatatableComponent;
-
-  delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano ","
-
-  csvRecords: any[] = [];
-  files: File[] = [];
-  rowsNumber: number = 0;
-  colsNumber: number = 0;
-
-  dataset: Dataset; //dodaj ! potencijalno
-
-  tableData: TableData = new TableData();
-
-  constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private csv: CsvParseService) {
-    this.dataset = new Dataset();
-  }
-
-  //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo?
-
-  changeListener($event: any): void {
-    this.files = $event.srcElement.files;
-    if (this.files.length == 0 || this.files[0] == null) {
-      //console.log("NEMA FAJLA");
-      //this.loaded.emit("not loaded");
-      this.tableData.hasInput = false;
-      return;
-    }
-    else
-      this.tableData.hasInput = true;
-
-    this.tableData.loaded = false;
-    this.update();
-  }
-
-  update() {
-
-    if (this.files.length < 1)
-      return;
-
-    const fileReader = new FileReader();
-    fileReader.onload = (e) => {
-      if (typeof fileReader.result === 'string') {
-        const result = this.csv.csvToArray(fileReader.result, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter)
-
-        if (this.dataset.hasHeader)
-          this.csvRecords = result.splice(0, 11);
-        else
-          this.csvRecords = result.splice(0, 10);
-
-        this.colsNumber = result[0].length;
-        this.rowsNumber = result.length;
-
-        this.tableData.data = this.csvRecords
-        this.tableData.hasHeader = this.dataset.hasHeader;
-        this.tableData.loaded = true;
-        this.tableData.numCols = this.colsNumber;
-        this.tableData.numRows = this.rowsNumber;
-      }
-    }
-    fileReader.readAsText(this.files[0]);
-  }
-
-  checkAccessible() {
-    if (this.dataset.isPublic)
-      this.dataset.accessibleByLink = true;
-  }
-
-  uploadDataset() {
-    if (this.files[0] == undefined) {
-      shared.openDialog("Greška", "Niste izabrali fajl za učitavanje.");
-      return;
-    }
-
-    this.modelsService.uploadData(this.files[0]).subscribe((file) => {
-      //console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id);
-      this.dataset.fileId = file._id;
-      this.dataset.uploaderId = shared.userId;
-
-      this.datasetsService.addDataset(this.dataset).subscribe((dataset) => {
-        this.newDatasetAdded.emit("added");
-        shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se procesira.");
-      }, (error) => {
-        shared.openDialog("Neuspeo pokušaj!", "Izvor podataka sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset.");
-      }); //kraj addDataset subscribe
-    }, (error) => {
-
-    }); //kraj uploadData subscribe
-  }
-
-}
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.css b/frontend/src/app/_elements/annvisual/annvisual.component.css
deleted file mode 100644
index 857a3390..00000000
--- a/frontend/src/app/_elements/annvisual/annvisual.component.css
+++ /dev/null
@@ -1,4 +0,0 @@
-#graph{
-    width: 100%;
-    text-align: center;
-}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.html b/frontend/src/app/_elements/annvisual/annvisual.component.html
deleted file mode 100644
index 09251398..00000000
--- a/frontend/src/app/_elements/annvisual/annvisual.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div style="text-align: center; " >
-    <button (click)="d3()" mat-raised-button color="primary">Prikaz veštačke neuronske mreže</button>
-    <div id="graph" align-items-center style="width: 12rem;"></div>
-  </div>
-
diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.ts b/frontend/src/app/_elements/annvisual/annvisual.component.ts
deleted file mode 100644
index df0a3898..00000000
--- a/frontend/src/app/_elements/annvisual/annvisual.component.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import Model from 'src/app/_data/Model';
-import { graphviz } from 'd3-graphviz';
-
-@Component({
-  selector: 'app-annvisual',
-  templateUrl: './annvisual.component.html',
-  styleUrls: ['./annvisual.component.css']
-})
-export class AnnvisualComponent implements OnInit {
-  ngOnInit(): void {
-  }
-
-  @Input() model: Model = new Model();
-
-  d3() {
-    let inputlayerstring: string = '';
-    let hiddenlayerstring: string = '';
-    let digraphstring: string = 'digraph {';
-
-    for (let i = 0; i < /*this.model.inputColumns.length*/ 10; i++) {
-      inputlayerstring = inputlayerstring + 'i' + i + ',';
-    }
-    inputlayerstring = inputlayerstring.slice(0, -1);
-
-    digraphstring = digraphstring + inputlayerstring + '->';
-
-    for (let j = 0; j < this.model.hiddenLayers; j++) {
-      for (let i = 0; i < this.model.hiddenLayerNeurons; i++) {
-        hiddenlayerstring = hiddenlayerstring + 'h' + j + '_' + i + ',';
-      }
-      hiddenlayerstring = hiddenlayerstring.slice(0, -1);
-      digraphstring = digraphstring + hiddenlayerstring + '->';
-      hiddenlayerstring = '';
-    }
-    digraphstring = digraphstring + 'o}';
-
-    graphviz('#graph').renderDot(digraphstring);
-  }
-
-  //'digraph {i0,i1,i2->h1,h2,h3->h21,h22,h23->o}'
-}
-
-
-
diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css
deleted file mode 100644
index 3d4a2432..00000000
--- a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.carousel {
-    overscroll-behavior: contain;
-}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html
deleted file mode 100644
index f52aee12..00000000
--- a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<h1>
-    {{scroll}}
-</h1>
-<div #wrapper class="carousel position-relative" style="overflow-y: scroll;" [style]="'height:'+ shownElements * height+'rem;'">
-    <div class="my-2" *ngFor="let item of itemsToShow; let i = index;" [style]="'height:'+ height+'rem; width: 90%; margin: auto;'">
-        <div class="position-absolute text-dark bg-white" [style]="calcStyle(i)">
-            <a class="stretched-link" (click)="clickItem">
-                <p class="title">{{item.name}}</p>
-            </a>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts
deleted file mode 100644
index 0c736e90..00000000
--- a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CarouselVerticalComponent } from './carousel-vertical.component';
-
-describe('CarouselVerticalComponent', () => {
-  let component: CarouselVerticalComponent;
-  let fixture: ComponentFixture<CarouselVerticalComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ CarouselVerticalComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(CarouselVerticalComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts
deleted file mode 100644
index d8849ea6..00000000
--- a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
-
-@Component({
-  selector: 'app-carousel-vertical',
-  templateUrl: './carousel-vertical.component.html',
-  styleUrls: ['./carousel-vertical.component.css']
-})
-export class CarouselVerticalComponent implements OnInit, AfterViewInit {
-
-  @ViewChild('wrapper') wrapper!: ElementRef;
-
-  @Input() items!: any[];
-
-  itemsToShow: any[] = [];
-
-  @Input() type: string = "Object";
-
-  scroll = 0;
-  height = 9; //rem
-
-  currentIndex = 0;
-
-  @Input() shownElements: number = 5;
-
-  constructor() {
-  }
-
-  ngOnInit(): void {
-    this.itemsToShow = [...this.items.slice(0, this.shownElements)];
-    console.log('0', this.itemsToShow);
-  }
-
-  ngAfterViewInit(): void {
-    const container = this.wrapper.nativeElement
-
-    container.addEventListener('scroll', (event: Event) => {
-      this.scroll = (container.scrollTop / (container.scrollHeight - container.clientHeight));
-      if (this.scroll == 1.0) {
-        //console.log('removed', this.itemsToShow.splice(0, 1)[0].name);
-        const itemToAdd = this.items[(this.currentIndex + this.shownElements) % (this.items.length - 1)];
-        this.itemsToShow.push(itemToAdd);
-        //console.log('added', itemToAdd.name);
-        this.currentIndex = (this.currentIndex + 1);
-        container.scrollTop = (container.scrollHeight - container.clientHeight) / 2;
-      }
-    });
-  }
-
-  clickItem(index: number) {
-  }
-
-  calcVisibility(i: number) {
-    //return ((Math.sin((((i) / this.shownElements) - this.scroll) * Math.PI) + 1) / 2)
-    const iPercent = (i + 1 - this.scroll) / this.shownElements;
-    return iPercent;
-  }
-
-  calcStyle(i: number) {
-    const a = this.calcVisibility(i)
-    const v = (Math.sin(a * Math.PI) + 1) / 2;
-    return `transform: translateY(${v * 100}%) scale(${v}) perspective(${v * 200}em) rotateX(${(1 - a) * 180 - 90}deg);
-            opacity: ${v};
-            height: ${this.height}rem;`;
-  }
-}
diff --git a/frontend/src/app/_elements/carousel/carousel.component.html b/frontend/src/app/_elements/carousel/carousel.component.html
deleted file mode 100644
index eb1041ce..00000000
--- a/frontend/src/app/_elements/carousel/carousel.component.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="container">
-    <div class="row d-flex align-items-stretch flex-row mx-5 align-items-stretch">
-        <div class="col my-1" *ngFor="let item of items" [ngSwitch]="type">
-            <ng-template ngSwitchCase="Object">
-                Unknown item type
-            </ng-template>
-            <ng-template ngSwitchCase="Dataset">
-                <app-item-dataset [dataset]="item">
-                </app-item-dataset>
-            </ng-template>
-            <ng-template ngSwitchCase="Predictor">
-                <app-item-predictor [predictor]="item">
-                </app-item-predictor>
-            </ng-template>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/carousel/carousel.component.ts b/frontend/src/app/_elements/carousel/carousel.component.ts
deleted file mode 100644
index e0112121..00000000
--- a/frontend/src/app/_elements/carousel/carousel.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-carousel',
-  templateUrl: './carousel.component.html',
-  styleUrls: ['./carousel.component.css']
-})
-export class CarouselComponent {
-
-  @Input() items: any[] = [];
-  @Input() type: string = "Object";
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html
new file mode 100644
index 00000000..7b18afc8
--- /dev/null
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -0,0 +1 @@
+<p>column-table works!</p>
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts b/frontend/src/app/_elements/column-table/column-table.component.spec.ts
index 603889b2..360a8109 100644
--- a/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ItemDatasetComponent } from './item-dataset.component';
+import { ColumnTableComponent } from './column-table.component';
 
-describe('ItemDatasetComponent', () => {
-  let component: ItemDatasetComponent;
-  let fixture: ComponentFixture<ItemDatasetComponent>;
+describe('ColumnTableComponent', () => {
+  let component: ColumnTableComponent;
+  let fixture: ComponentFixture<ColumnTableComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ItemDatasetComponent ]
+      declarations: [ ColumnTableComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ItemDatasetComponent);
+    fixture = TestBed.createComponent(ColumnTableComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts
new file mode 100644
index 00000000..f8c5f5f3
--- /dev/null
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-column-table',
+  templateUrl: './column-table.component.html',
+  styleUrls: ['./column-table.component.css']
+})
+export class ColumnTableComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.css b/frontend/src/app/_elements/dataset-load/dataset-load.component.css
deleted file mode 100644
index ff6e2750..00000000
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.btnType1 {
-    background-color: #003459;
-    color: white;
-    padding-top: 2vh;
-    padding-bottom: 2vh;
-}
-.btnType2 {
-    background-color: white;
-    color: #003459;
-    border-color: #003459;
-    padding-top: 2vh;
-    padding-bottom: 2vh;
-    
-}
-.selectedDatasetClass {
-    /*border-color: 2px solid #003459;*/
-    background-color: lightblue;
-}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
deleted file mode 100644
index 56a3b3c9..00000000
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<div>
-
-  <!--Sklonjeno ucitavanje novog dataseta i sve opcije u vezi sa tim, premesteno u add-new-dataset-->
-
-    <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5">
-        <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()"
-            [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}">
-            Izaberite dataset iz kolekcije
-        </button>
-        <h3 class="mt-3 mx-3">ili</h3>
-        <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()"
-            [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}">
-            Dodajte novi dataset
-        </button>
-    </div>
-
-  <div class="px-5 my-2">
-      <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga"
-          [(ngModel)]="term">
-  </div>
-  <div class="px-5" *ngIf="showMyDatasets">
-        <div class="overflow-auto" style="max-height: 500px;">
-            <ul class="list-group">
-                <li class="list-group-item p-3" *ngFor="let dataset of myDatasets|filter:term"
-                    [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}">
-                    <app-item-dataset name="usersDataset" [dataset]="dataset"
-                        (click)="selectThisDataset(dataset);"></app-item-dataset>
-                </li>
-            </ul>
-        </div>
-        <div class="px-5 mt-5">
-            <app-datatable [tableData]="tableData"></app-datatable>
-        </div>
-  </div>
-
-  <app-add-new-dataset [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset"
-      (newDatasetAdded)="refreshMyDatasets()">
-  </app-add-new-dataset>
-
-</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
deleted file mode 100644
index 73dbf2d2..00000000
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core';
-import { AddNewDatasetComponent } from '../add-new-dataset/add-new-dataset.component';
-import { ModelsService } from 'src/app/_services/models.service';
-import shared from 'src/app/Shared';
-import Dataset from 'src/app/_data/Dataset';
-import { DatatableComponent, TableData } from 'src/app/_elements/datatable/datatable.component';
-import { DatasetsService } from 'src/app/_services/datasets.service';
-import { CsvParseService } from 'src/app/_services/csv-parse.service';
-import { Output, EventEmitter } from '@angular/core';
-import { SignalRService } from 'src/app/_services/signal-r.service';
-
-@Component({
-  selector: 'app-dataset-load',
-  templateUrl: './dataset-load.component.html',
-  styleUrls: ['./dataset-load.component.css']
-})
-export class DatasetLoadComponent implements OnInit {
-
-  @Output() selectedDatasetChangeEvent = new EventEmitter<Dataset>();
-
-  @ViewChild(AddNewDatasetComponent) addNewDatasetComponent!: AddNewDatasetComponent;
-  @ViewChild(AddNewDatasetComponent) datatable!: DatatableComponent;
-
-  datasetLoaded: boolean = false;
-  selectedDatasetLoaded: boolean = false;
-
-  showMyDatasets: boolean = true;
-  myDatasets?: Dataset[];
-  existingDatasetSelected: boolean = false;
-  selectedDataset?: Dataset;
-
-  tableData: TableData = new TableData();
-
-  term: string = "";
-
-  constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService, private signalRService: SignalRService) {
-    this.datasets.getMyDatasets().subscribe((datasets) => {
-      this.myDatasets = datasets;
-    });
-  }
-
-  viewMyDatasetsForm() {
-    this.showMyDatasets = true;
-    if (this.selectedDataset != undefined)
-      this.resetSelectedDataset();
-    //this.resetCbsAndRbs();        //TREBA DA SE DESI
-  }
-  viewNewDatasetForm() {
-    this.showMyDatasets = false;
-    if (this.selectedDataset != undefined)
-      this.resetSelectedDataset();
-    //this.resetCbsAndRbs();        //TREBA DA SE DESI
-  }
-
-  refreshMyDatasets() {
-    this.datasets.getMyDatasets().subscribe((datasets) => {
-      this.myDatasets = datasets;
-      this.showMyDatasets = true;
-    });
-  }
-
-  selectThisDataset(dataset: Dataset) {
-    this.selectedDataset = dataset;
-    this.selectedDatasetLoaded = false;
-    this.existingDatasetSelected = true;
-    this.tableData.hasHeader = this.selectedDataset.hasHeader;
-
-    this.tableData.hasInput = true;
-    this.tableData.loaded = false;
-
-    this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => {
-      if (file) {
-        this.tableData.loaded = true;
-        this.tableData.numRows = this.selectedDataset!.rowCount;
-        this.tableData.numCols = this.selectedDataset!.columnInfo.length;
-        this.tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
-        //this.resetCbsAndRbs();                        //TREBA DA SE DESI
-        //this.refreshThreeNullValueRadioOptions();       //TREBA DA SE DESI
-        this.selectedDatasetLoaded = true;
-
-        this.selectedDatasetChangeEvent.emit(this.selectedDataset);
-      }
-    });
-  }
-
-  resetSelectedDataset(): boolean {
-    this.selectedDatasetChangeEvent.emit(this.selectedDataset);
-    return true;
-  }
-
-  ngOnInit(): void {
-    if (this.signalRService.hubConnection) {
-      this.signalRService.hubConnection.on("NotifyDataset", _ => {
-        this.refreshMyDatasets();
-      });
-    } else {
-      console.warn("Dataset-Load: No connection!");
-    }
-  }
-}
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.css b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
new file mode 100644
index 00000000..1bc3c3f7
--- /dev/null
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html
@@ -0,0 +1 @@
+<p>form-dataset works!</p>
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.spec.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.spec.ts
index 5601b57b..51491c58 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.spec.ts
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.spec.ts
@@ -1,20 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { DatasetLoadComponent } from './dataset-load.component';
+import { FormDatasetComponent } from './form-dataset.component';
 
-describe('DatasetLoadComponent', () => {
-  let component: DatasetLoadComponent;
-  let fixture: ComponentFixture<DatasetLoadComponent>;
+describe('FormDatasetComponent', () => {
+  let component: FormDatasetComponent;
+  let fixture: ComponentFixture<FormDatasetComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ DatasetLoadComponent ]
+      declarations: [ FormDatasetComponent ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(DatasetLoadComponent);
+    fixture = TestBed.createComponent(FormDatasetComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
new file mode 100644
index 00000000..092e943f
--- /dev/null
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-form-dataset',
+  templateUrl: './form-dataset.component.html',
+  styleUrls: ['./form-dataset.component.css']
+})
+export class FormDatasetComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/form-model/form-model.component.css
diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html
new file mode 100644
index 00000000..8f284c46
--- /dev/null
+++ b/frontend/src/app/_elements/form-model/form-model.component.html
@@ -0,0 +1 @@
+<p>form-model works!</p>
diff --git a/frontend/src/app/_elements/form-model/form-model.component.spec.ts b/frontend/src/app/_elements/form-model/form-model.component.spec.ts
new file mode 100644
index 00000000..af1091cc
--- /dev/null
+++ b/frontend/src/app/_elements/form-model/form-model.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormModelComponent } from './form-model.component';
+
+describe('FormModelComponent', () => {
+  let component: FormModelComponent;
+  let fixture: ComponentFixture<FormModelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FormModelComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormModelComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts
new file mode 100644
index 00000000..2ff8c605
--- /dev/null
+++ b/frontend/src/app/_elements/form-model/form-model.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-form-model',
+  templateUrl: './form-model.component.html',
+  styleUrls: ['./form-model.component.css']
+})
+export class FormModelComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.css b/frontend/src/app/_elements/item-dataset/item-dataset.component.css
deleted file mode 100644
index dc851671..00000000
--- a/frontend/src/app/_elements/item-dataset/item-dataset.component.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.card{
-    margin-top:0;
-    padding: 0;
-}
-.p-2{
-    margin: 0;
-    padding: 0;
-}
-hr{
-    margin: 0;
-    padding: 0;
-}
-b{
-    margin-left: 5px;
-    margin-right: 10px;
-}
-th{
-    margin: 10px;
-    padding: 10px;
-}
-p{
-    text-align: justify;
-}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.html b/frontend/src/app/_elements/item-dataset/item-dataset.component.html
deleted file mode 100644
index 11ff61c3..00000000
--- a/frontend/src/app/_elements/item-dataset/item-dataset.component.html
+++ /dev/null
@@ -1,41 +0,0 @@
-<div class="card" style="min-width: 12rem;">
-<div class="card-header d-flex mb-2 justify-content-" style="padding: 0;margin: 0;">
-    
-        <div class=" p-2 float-left "><b   style="color: gray;">Naziv</b></div> 
-        <div class=" p-2 float-left"><b>{{dataset.name}}</b></div>
-</div>
-<div class="card-body overflow-hidden">
-    <b style="color: gray;">Opis</b>
-     <hr style="width: 20%;"> <p> {{dataset.description}}</p>
-    <hr>
-    <div class="d-flex justify-content-center">
-        <div  class=" p-2" >
-            <h4><span class="badge bg-secondary">{{dataset.extension}}</span></h4>
-        </div> 
-        <div class="p-2">
-            <span class="material-icons">{{visibleicon}}</span>
-        </div>
-        <div class="p-2">
-            <span class="material-icons">{{accessibleicon}}</span>
-        </div>
-    </div>
-    <hr>
-    <div class="col text-center">
-<button (click)=toggleDisplayDiv() class="btn btn-primary btn-sm active " mat-raised-button color="primary" style="margin: 0.5rem;">Kolone</button>
-        <div [hidden]="isShowDiv" style="overflow: scroll; overflow-y: hidden;">
-            <table class="table table-bordered table-md" >
-                <thead>
-                    <th scope="col" *ngFor="let column of dataset.columnInfo" >{{column.columnName}}</th> 
-                </thead>
-            </table>
-        </div>
-</div>
-    <table>
-        <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;">   <b> Kreirano</b></span></td><td>{{dataset.dateCreated |date}}</td></tr>
-        <tr><td><span class="material-icons">edit_calendar</span></td><td><span style="color: grey;">  <b> Poslednja izmena</b></span></td><td>{{dataset.lastUpdated |date}}</td></tr> 
-    </table>
-    
-</div>
-<div class="card-footer">	
-        
-    </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.ts b/frontend/src/app/_elements/item-dataset/item-dataset.component.ts
deleted file mode 100644
index 44b95310..00000000
--- a/frontend/src/app/_elements/item-dataset/item-dataset.component.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import Dataset from 'src/app/_data/Dataset';
-
-@Component({
-  selector: 'app-item-dataset',
-  templateUrl: './item-dataset.component.html',
-  styleUrls: ['./item-dataset.component.css']
-})
-export class ItemDatasetComponent {
-
-  @Input() dataset: Dataset = new Dataset();
-  visibleicon='';
-  accessibleicon='';
-  isShowDiv = true;
-  toggleDisplayDiv() {
-    this.isShowDiv = !this.isShowDiv;
-  }
-  constructor() {
-  }
-  ngOnInit(): void {
-    if(this.dataset.isPublic==true)
-    {
-      this.visibleicon='visibility'
-    }
-    else
-    {
-      this.visibleicon='visibility_off';
-    }
-
-    if(this.dataset.accessibleByLink==true)
-    {
-      this.accessibleicon='link'
-    }
-    else
-    {
-      this.accessibleicon='link_off';
-    }
-  }
-}
-
diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.html b/frontend/src/app/_elements/item-experiment/item-experiment.component.html
deleted file mode 100644
index 51fbfef3..00000000
--- a/frontend/src/app/_elements/item-experiment/item-experiment.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="card" style="min-width: 12rem;">
-    <div class="card-header">
-        Naziv eksperimenta: <b>{{experiment.name}}</b>
-    </div>
-    <div class="card-body overflow-hidden">
-        <p class="card-text">
-            Opis: {{experiment.description}}
-        </p>
-    </div>
-</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.ts b/frontend/src/app/_elements/item-experiment/item-experiment.component.ts
deleted file mode 100644
index 31900d35..00000000
--- a/frontend/src/app/_elements/item-experiment/item-experiment.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import Experiment from 'src/app/_data/Experiment';
-
-@Component({
-  selector: 'app-item-experiment',
-  templateUrl: './item-experiment.component.html',
-  styleUrls: ['./item-experiment.component.css']
-})
-export class ItemExperimentComponent{
-
-  @Input() experiment: Experiment = new Experiment();
-
-  constructor() { }
-
-}
diff --git a/frontend/src/app/_elements/item-model/item-model.component.css b/frontend/src/app/_elements/item-model/item-model.component.css
deleted file mode 100644
index 5ea24c72..00000000
--- a/frontend/src/app/_elements/item-model/item-model.component.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.card{
-    margin: 0.5rem;
-    padding: 0;
-}
-.p-2{
-    margin: 0;
-    padding: 0;
-}
-hr{
-    margin: 0;
-    padding: 0;
-}
-b{
-    margin-left: 5px;
-    margin-right: 10px;
-}
-th{
-    margin: 10px;
-    padding: 10px;
-}
-p{
-    text-align: justify;
-}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-model/item-model.component.html b/frontend/src/app/_elements/item-model/item-model.component.html
deleted file mode 100644
index 447f023e..00000000
--- a/frontend/src/app/_elements/item-model/item-model.component.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<div class="card" style="min-width: 12rem;">
-    <div class="card-header d-flex mb-2 justify-content-" style="padding: 0;margin: 0;">
-    
-        <div class=" p-2 float-left "><b   style="color: gray;">Naziv</b></div> 
-        <div class=" p-2 float-left"><b>{{model.name}}</b></div>
-    </div>
-    <div class="card-body overflow-hidden"> 
-        <app-graph [model]="model"></app-graph>
-        <br>
-        <b style="color: gray;">Opis</b><hr  style="width: 20%;">
-        <p class="card-text">
-           {{model.description}}
-        </p>
-        <hr>
-        
-        <div>
-            <table>
-                <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;">   <b> Kreirano</b></span></td><td>{{model.dateCreated |date}}</td></tr>
-                <tr><td><span class="material-icons">edit_calendar</span></td><td><span style="color: grey;">  <b> Poslednja izmena</b></span></td><td>{{model.lastUpdated |date}}</td></tr> 
-            </table> 
-        </div>
-       
-    </div>
-    <button (click)=toggleDisplayDiv() class="btn btn-default btn-lg " mat-raised-button color="primary" style="margin: 0.5rem;">Parametri</button>
-        <div [hidden]="isShowDiv">
-        <!--  <table>
-            <tr>
-            <td><span style="color: grey;">  <b> Nasumično raspoređivanje podataka</b></span></td><td>{{randomOrd}}</td>
-            </tr>
-            <tr>
-            <td><span style="color: grey;">  <b> Podela podataka na trening i test skup</b></span></td><td>{{randomOrd}}</td>
-            </tr>
-            <tr>
-            <td><span style="color: grey;">  <b> Veličina skupa za treniranje</b></span></td><td>{{randomOrd}}</td>
-            </tr>
-            </table>-->
-            <hr>
-            <table>
-            <tr>
-            <td><span style="color: grey;">  <b> Tip problema</b></span></td><td>{{model.type}}</td>
-        </tr>
-        <tr>
-            <td><span style="color: grey;">  <b> Optimizator</b></span></td><td>{{model.optimizer}}</td>
-        </tr>
-        <tr>
-           <td> <span style="color: grey;">  <b> Funkcija gubitka</b></span></td><td>{{model.lossFunction}}</td>
-        </tr>
-        <tr>
-            <td><span style="color: grey;">  <b> Batch size</b></span></td><td>{{model.batchSize}}</td>
-        </tr>
-        <tr>
-            <td><span style="color: grey;">  <b> Broj epoha</b></span></td><td>{{model.epochs}}</td>
-        </tr>
-        
-            </table>
-
-        </div>
-</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-model/item-model.component.ts b/frontend/src/app/_elements/item-model/item-model.component.ts
deleted file mode 100644
index b837667b..00000000
--- a/frontend/src/app/_elements/item-model/item-model.component.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import Model from 'src/app/_data/Model';
-
-@Component({
-  selector: 'app-item-model',
-  templateUrl: './item-model.component.html',
-  styleUrls: ['./item-model.component.css']
-})
-export class ItemModelComponent implements OnInit {
-
-  @Input() model: Model = new Model();
-  isShowDiv = true;
-  randomOrd='';
-
-  toggleDisplayDiv() {
-    this.isShowDiv = !this.isShowDiv;
-  }
- 
-  constructor() { }
-
-  ngOnInit(): void {
-    /*if(this.model.randomOrder)
-    {
-      this.randomOrd='Da';
-    }
-    else
-    {
-      this.randomOrd='Ne';
-    }
-*/
-  }
-
-}
diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.html b/frontend/src/app/_elements/item-predictor/item-predictor.component.html
deleted file mode 100644
index 3199dcc8..00000000
--- a/frontend/src/app/_elements/item-predictor/item-predictor.component.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<div class="card" style="min-width: 12rem;">
-    <div class="card-header d-flex mb-2 justify-content-" style="padding: 0;margin: 0;">
-    
-        <div class=" p-2 float-left "><b   style="color: gray;">Prediktor</b></div> 
-        
-    </div>
-    <div class="card-body overflow-hidden">
-        <b style="color: gray;">Opis</b><hr  style="width: 20%;">
-        <p class="card-text">
-           {{predictor.description}}
-        </p>
-        
-        <b style="color: gray;">Ulazne kolone</b>
-        <div style="overflow: scroll; overflow-y: hidden;">
-            
-            <table class="table table-bordered table-md" >
-                <thead>
-                    <th scope="col" *ngFor="let column of predictor.inputs" >{{column}}</th> 
-                </thead>
-            </table>
-        </div>
-        <b style="color: gray;">Izlazna kolona: </b><b>{{predictor.output}}</b>
-        <hr>
-        <div>
-            <table>
-                <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;">   <b> Kreirano</b></span></td><td>{{predictor.dateCreated |date}}</td></tr> 
-            </table> 
-        </div>
-    </div>
-    <div class="card-footer text-center">
-        <button class="btn btn-md col-4" style="background-color:#003459; color:white;"
-        (click)="openPredictor();">Iskoristi</button>
-       
-    </div>
-</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts
deleted file mode 100644
index b5c2d91c..00000000
--- a/frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ItemPredictorComponent } from './item-predictor.component';
-
-describe('ItemPredictorComponent', () => {
-  let component: ItemPredictorComponent;
-  let fixture: ComponentFixture<ItemPredictorComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ ItemPredictorComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ItemPredictorComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
deleted file mode 100644
index 246032e0..00000000
--- a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Component, Input, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import Predictor from 'src/app/_data/Predictor';
-
-@Component({
-  selector: 'app-item-predictor',
-  templateUrl: './item-predictor.component.html',
-  styleUrls: ['./item-predictor.component.css']
-})
-export class ItemPredictorComponent implements OnInit {
-
-  @Input() predictor: Predictor = new Predictor();
-
-  constructor(private router: Router) { }
-
-  ngOnInit(): void {
-  }
-
-  openPredictor() {
-    this.router.navigate(['predict/'+ this.predictor._id]);
-    }
-
-}
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.css b/frontend/src/app/_elements/metric-view/metric-view.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.css
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html
new file mode 100644
index 00000000..e7a4c547
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.html
@@ -0,0 +1,5 @@
+<div>
+    <app-line-chart>
+
+    </app-line-chart>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts b/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts
new file mode 100644
index 00000000..c3ecc67f
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetricViewComponent } from './metric-view.component';
+
+describe('MetricViewComponent', () => {
+  let component: MetricViewComponent;
+  let fixture: ComponentFixture<MetricViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MetricViewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetricViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts
new file mode 100644
index 00000000..3840692a
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts
@@ -0,0 +1,49 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { LineChartComponent } from '../_charts/line-chart/line-chart.component';
+
+@Component({
+  selector: 'app-metric-view',
+  templateUrl: './metric-view.component.html',
+  styleUrls: ['./metric-view.component.css']
+})
+export class MetricViewComponent implements OnInit {
+  @ViewChild(LineChartComponent) linechartComponent!: LineChartComponent;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  history: any[] = [];
+
+  update(history: any[]) {
+    const myAcc: number[] = [];
+    const myMae: number[] = [];
+    const myMse: number[] = [];
+    const myLoss: number[] = [];
+
+    const myEpochs: number[] = [];
+    this.history = history;
+    this.history.forEach((metrics, epoch) => {
+      myEpochs.push(epoch + 1);
+      for (let key in metrics) {
+        let value = metrics[key];
+        console.log(key, ':::', value, epoch);
+        if (key === 'accuracy') {
+          myAcc.push(parseFloat(value));
+        }
+        else if (key === 'loss') {
+          myLoss.push(parseFloat(value));
+        }
+        else if (key === 'mae') {
+          myMae.push(parseFloat(value));
+        }
+        else if (key === 'mse') {
+          myMse.push(parseFloat(value));
+        }
+      }
+    });
+
+    this.linechartComponent.update(myEpochs, myAcc, myLoss, myMae, myMse);
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/model-load/model-load.component.css b/frontend/src/app/_elements/model-load/model-load.component.css
deleted file mode 100644
index c716f964..00000000
--- a/frontend/src/app/_elements/model-load/model-load.component.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.btnType1 {
-    background-color: #003459;
-    color: white;
-    padding-top: 2vh;
-    padding-bottom: 2vh;
-}
-.btnType2 {
-    background-color: white;
-    color: #003459;
-    border-color: #003459;
-    padding-top: 2vh;
-    padding-bottom: 2vh;
-}
-.selectedModelClass {
-    /*border-color: 2px solid #003459;*/
-    background-color: lightblue;
-}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html
deleted file mode 100644
index 85caca0d..00000000
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ /dev/null
@@ -1,227 +0,0 @@
-<div>
-    <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5">
-        <button type="button" id="btnMyModel" class="btn" (click)="viewMyModelsForm()"
-            [ngClass]="{'btnType1': showMyModels, 'btnType2': !showMyModels}">
-            Izaberite model iz kolekcije
-        </button>
-        <h3 class="mt-3 mx-3">ili</h3>
-        <button type="button" id="btnNewModel" class="btn" (click)="viewNewModelForm()"
-            [ngClass]="{'btnType1': !showMyModels, 'btnType2': showMyModels}">
-            Dodajte novi model
-        </button>
-    </div>
-
-    <div *ngIf="showMyModels" class="px-5 my-3">
-        <input *ngIf="showMyModels" type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term">
-    </div>
-    <div *ngIf="showMyModels" class="px-5">
-        <div class="overflow-auto" style="max-height: 500px;">
-            <ul class="list-group">
-                <li class="list-group-item p-3" *ngFor="let model of myModels|filter:term"
-                    [ngClass]="{'selectedModelClass': this.selectedModel == model}">
-                    <app-item-model name="usersModel" [model]="model" (click)="selectThisModel(model);">
-                    </app-item-model>
-                </li>
-            </ul>
-            <div class="px-5 mt-5">
-                <!--prikaz izabranog modela-->
-            </div>
-        </div>
-    </div>
-
-
-    <div *ngIf="!showMyModels">
-        <div class="form-group row mt-3 mb-2 d-flex justify-content-center">
-
-            <div class="col-3">
-                <label for="name" class="col-form-label">Naziv modela:</label>
-                <input type="text" class="form-control" name="name" placeholder="Naziv..." [(ngModel)]="newModel.name">
-            </div>
-            <div class="col-5">
-                <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
-                <div>
-                    <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea>
-                </div>
-            </div>
-            
-        </div>
-        <h2 class="mt-5 mb-4 mx-5">Parametri treniranja modela:</h2>
-        <div>
-
-            <div class="row p-2">
-                <div class="col-1"></div>
-                <div class="col-3">
-                    <label for="type" class="col-form-label">Tip problema: </label>
-                </div>
-                <div class="col-2">
-                    <select id=typeOptions class="form-select" name="type" [(ngModel)]="newModel.type"
-                        (change)="filterOptions()">
-                        <option
-                            *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-                <div class="col-1"></div>
-                <div class="col-3">
-                    <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
-                </div>
-                <div class="col-1">
-                    <input type="number" min="1" class="form-control" name="hiddenLayers"
-                        [(ngModel)]="newModel.hiddenLayers"
-                        (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])"
-                        (ngModelChange)="updateGraph()">
-                </div>
-            </div>
-
-            <div class="row p-2">
-                <div class="col-1">
-                </div>
-                <div class="col-3">
-                    <label for="optimizer" class="col-form-label">Optimizacija: </label>
-                </div>
-                <div class="col-2">
-                    <select id=optimizerOptions class="form-select" name="optimizer" [(ngModel)]="newModel.optimizer">
-                        <option
-                            *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-                <div class="col-1">
-                </div>
-                <div class="col-3">
-                    <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label>
-                </div>
-                <div class="col-1">
-                    <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
-                        [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()">
-                </div>
-            </div>
-
-            <div class="row p-2">
-                <div class="col-1"></div>
-                <div class="col-3">
-                    <label for="lossFunction" class="col-form-label">Funkcija troška: </label>
-                </div>
-                <div class="col-2">
-                    <select id=lossFunctionOptions class="form-select" name="lossFunction" 
-                        [(ngModel)]="newModel.lossFunction" aria-checked="true">
-                        <option
-                            *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-                <div class="col-1"></div>
-                <div class="col-3">
-                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
-                </div>
-                <div class="col-1">
-                    
-                    <input type="number" min="0" step="1" max="7" class="form-control" name="batchSizePower" [(ngModel)]="batchSizePower" (click)="updateBatchSize()" >
-                    {{newModel.batchSize}}
-                    <!--<select id=BatchSizeOptions class="form-select" name="batchSize" [(ngModel)]="newModel.batchSize">
-                        <option value="1">1</option>
-                        <option value="2">2</option>
-                        <option value="4">4</option>
-                        <option value="8">8</option>
-                        <option value="16">16</option>
-                        <option value="32">32</option>
-                        <option value="64">64</option>
-                        <option value="128">128</option>
-                        <option value="256">256</option>
-                        <option value="512">512</option>
-                        <option value="1024">1024</option>
-                    </select>-->
-                </div>
-                
-                <div class="row p-2">
-                    <div class="col-1"></div>
-                    <div class="col-3 m-1">
-                        <label for="epochs" class="col-form-label">Broj epoha: </label>
-                    </div>
-                    <div class="col-1">
-                        <input type="number" min="1" max="1000" class="form-control" name="epochs"
-                            [(ngModel)]="newModel.epochs">
-                    </div>
-                </div>
-            </div>
-
-            <div class="m-5">
-                <app-graph [model]="newModel" [inputCols]="1"></app-graph>
-            </div>
-
-            <h3 class="mx-5 mt-4">Aktivacione funkcije:</h3>
-
-            <div class="row p-2" style="align-self: center;">
-                <div class="col-1"></div>
-                <div class="col-3">
-                    <label for="hiddenLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija aktivacije<br>skrivenih slojeva:</label>
-                </div>
-                <div class="col-2 mt-2">
-                    <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index">
-                        <div class="input-group mb-2">
-                            <div class="input-group-prepend">
-                                <span class="input-group-text">#{{i+1}}</span>
-                            </div>
-                            <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-select"
-                                [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]" >
-                                <option
-                                    *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                                    [value]="option">
-                                    {{ optionName }}
-                                </option>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-1"></div>
-                <div class="col-2">
-                    <label for="outputLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label>
-                </div>
-                <div class="col-2 mt-2">
-                    <select id=outputLayerActivationFunctionOptions class="form-select"
-                        name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
-                        <option
-                            *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-                <div class="col">
-                </div>
-            </div>
-        </div>
-
-        <div class="form-check form-check-inline overflow-auto m-4" style="width: max-content;">
-            <h3>Izaberite metrike:</h3>
-            <div id="divMetricsinput" class="mt-2 mx-5">
-
-                <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) "
-                    class="form-check form-check-inline">
-
-                    <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}"
-                        id="metrics_{{option}}" style="float: left;" checked>
-                    <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2">
-                        {{optionName}}
-                    </label>
-                </div>
-            </div>
-        </div>
-        
-        <div class="form-group row mt-3 mb-3">
-            <div class="col"></div>
-            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;"
-                (click)="uploadModel();">Sačuvaj
-                model</button>
-            <div class="col"></div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts
deleted file mode 100644
index 73872694..00000000
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
-import Shared from 'src/app/Shared';
-import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
-import { ModelsService } from 'src/app/_services/models.service';
-import { GraphComponent } from '../graph/graph.component';
-
-
-@Component({
-  selector: 'app-model-load',
-  templateUrl: './model-load.component.html',
-  styleUrls: ['./model-load.component.css']
-})
-export class ModelLoadComponent implements OnInit {
-
-  @ViewChild(GraphComponent) graph!: GraphComponent;
-  @Output() selectedModelChangeEvent = new EventEmitter<Model>();
-
-  newModel: Model = new Model();
-  myModels?: Model[];
-  selectedModel?: Model;
-
-  ProblemType = ProblemType;
-  ActivationFunction = ActivationFunction;
-  metrics: any = Metrics;
-  LossFunction = LossFunction;
-  Optimizer = Optimizer;
-  Object = Object;
-  document = document;
-  shared = Shared;
-
-  term: string = "";
-  selectedProblemType: string = '';
-  selectedMetrics = [];
-  lossFunction: any = LossFunction;
-
-  showMyModels: boolean = true;
-
-  constructor(private modelsService: ModelsService) {
-    this.modelsService.getMyModels().subscribe((models) => {
-      this.myModels = models;
-    });
-  }
-
-  ngOnInit(): void {
-  }
-  batchSizePower:number=1;
-  updateBatchSize()
-  {
-    this.newModel.batchSize=2**this.batchSizePower;
-  }
-
-  updateGraph() {
-    this.graph.update();
-  }
-
-  getMetrics() {
-    this.newModel.metrics = [];
-    let cb = document.getElementsByName("cbmetrics");
-
-    for (let i = 0; i < cb.length; i++) {
-      let chb = <HTMLInputElement>cb[i];
-      if (chb.checked == true)
-        this.newModel.metrics.push(chb.value);
-    }
-  }
-
-  uploadModel() {
-    this.getMetrics();
-
-    this.newModel.uploaderId = Shared.userId;
-
-    this.modelsService.addModel(this.newModel).subscribe((response) => {
-      Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.');
-      // treba da se selektuje nov model u listi modela
-      //this.selectedModel = 
-    }, (error) => {
-      Shared.openDialog('Greška', 'Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom.');
-    });
-  }
-
-  filterOptions() {
-    switch (this.newModel.type) {
-      case 'regresioni':
-        this.lossFunction = LossFunctionRegression;
-        this.metrics = MetricsRegression;
-        break;
-      case 'binarni-klasifikacioni':
-        this.lossFunction = LossFunctionBinaryClassification;
-        this.metrics = MetricsBinaryClassification;
-        break;
-      case 'multi-klasifikacioni':
-        this.lossFunction = LossFunctionMultiClassification;
-        this.metrics = MetricsMultiClassification;
-        break;
-      default:
-        break;
-    }
-  }
-
-  viewMyModelsForm() {
-    this.showMyModels = true;
-  }
-  viewNewModelForm() {
-    this.showMyModels = false;
-  }
-
-  selectThisModel(model: Model) {
-    this.selectedModel = model;
-    this.selectedModelChangeEvent.emit(this.selectedModel);
-  }
-
-}
diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.html b/frontend/src/app/_elements/select-item-list/select-item-list.component.html
deleted file mode 100644
index b92b7adb..00000000
--- a/frontend/src/app/_elements/select-item-list/select-item-list.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>select-item-list works!</p>
diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts b/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts
deleted file mode 100644
index 0abc7ab5..00000000
--- a/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SelectItemListComponent } from './select-item-list.component';
-
-describe('SelectItemListComponent', () => {
-  let component: SelectItemListComponent;
-  let fixture: ComponentFixture<SelectItemListComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ SelectItemListComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SelectItemListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.ts b/frontend/src/app/_elements/select-item-list/select-item-list.component.ts
deleted file mode 100644
index f6aae7a0..00000000
--- a/frontend/src/app/_elements/select-item-list/select-item-list.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-select-item-list',
-  templateUrl: './select-item-list.component.html',
-  styleUrls: ['./select-item-list.component.css']
-})
-export class SelectItemListComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}