From 87b1858bfb9d53f9932767d48e1b21bdc7d536fb Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sun, 17 Apr 2022 21:56:08 +0200 Subject: Promenio komponentu za iscrtavanje reaktivne pozadine tako da je transparentna, dodao komponentu za iscrtavanje gradijentne pozadine. Ispravio razne BUG-ove vezane za reaktivnu pozadinu, i promenio stil. --- .../app/_pages/playground/playground.component.css | 0 .../_pages/playground/playground.component.html | 1 + .../_pages/playground/playground.component.spec.ts | 25 ++++++++++++++++++++++ .../app/_pages/playground/playground.component.ts | 15 +++++++++++++ 4 files changed, 41 insertions(+) create mode 100644 frontend/src/app/_pages/playground/playground.component.css create mode 100644 frontend/src/app/_pages/playground/playground.component.html create mode 100644 frontend/src/app/_pages/playground/playground.component.spec.ts create mode 100644 frontend/src/app/_pages/playground/playground.component.ts (limited to 'frontend/src/app/_pages') diff --git a/frontend/src/app/_pages/playground/playground.component.css b/frontend/src/app/_pages/playground/playground.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_pages/playground/playground.component.html b/frontend/src/app/_pages/playground/playground.component.html new file mode 100644 index 00000000..5622cd83 --- /dev/null +++ b/frontend/src/app/_pages/playground/playground.component.html @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/frontend/src/app/_pages/playground/playground.component.spec.ts b/frontend/src/app/_pages/playground/playground.component.spec.ts new file mode 100644 index 00000000..bf66b27e --- /dev/null +++ b/frontend/src/app/_pages/playground/playground.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PlaygroundComponent } from './playground.component'; + +describe('PlaygroundComponent', () => { + let component: PlaygroundComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PlaygroundComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PlaygroundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/playground/playground.component.ts b/frontend/src/app/_pages/playground/playground.component.ts new file mode 100644 index 00000000..007a455e --- /dev/null +++ b/frontend/src/app/_pages/playground/playground.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-playground', + templateUrl: './playground.component.html', + styleUrls: ['./playground.component.css'] +}) +export class PlaygroundComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} -- cgit v1.2.3 From 56fbc59007fe5064168af33c9770a0d378343b85 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sun, 17 Apr 2022 23:20:18 +0200 Subject: Promenio stil home strane. --- .../reactive-background.component.ts | 6 ++- frontend/src/app/_pages/home/home.component.html | 62 +++++++++++++--------- frontend/src/app/app.component.html | 8 +-- frontend/src/styles.css | 16 ++++++ 4 files changed, 60 insertions(+), 32 deletions(-) (limited to 'frontend/src/app/_pages') diff --git a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts index 9d7f5522..73cdb326 100644 --- a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts +++ b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts @@ -22,6 +22,8 @@ export class ReactiveBackgroundComponent implements AfterViewInit { @Input() pointColor: string = '#ffffff'; @Input() cursorLineColor: string = '#ff0000'; + private fleeSpeed = 0.005; + private points: Point[] = []; private width = 200; @@ -160,8 +162,8 @@ export class ReactiveBackgroundComponent implements AfterViewInit { const distToCursor = this.distance(p.x, p.y, mx, my); if (distToCursor < this.cursorDistance) { - p.x -= ((mx - p.x) / distToCursor) / 500; - p.y -= ((my - p.y) / distToCursor) / 500; + p.x -= ((mx - p.x) / distToCursor) * this.fleeSpeed; + p.y -= ((my - p.y) / distToCursor) * this.fleeSpeed; const grd = this.ctx.createLinearGradient(p.x * this.width, p.y * this.height, mx * this.width, my * this.height); const alpha = HEX[Math.round(p.size / this.maxSize * (HEX.length - 1))]; diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 08f95a69..8294a73b 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -1,56 +1,66 @@ -
+
-

Započnite sa treniranjem!

-
-
+ +
+ +

Započnite sa eksperimentisanjem! + lightbulb +

+ +
+ +
+
- storage + storage

Moji izvori podataka

- Preuredite vaše izvore - podataka, ili - dodajte novi. + Preuredite vaše izvore podataka, ili dodajte novi.

-
+
- model_training + model_training

Moji modeli

- Pregledajte vaše modele, menjajte ih, - napravite nove modele, ili - ih obrišite. + Pregledajte vaše modele, menjajte ih, napravite nove modele, ili ih obrišite.

-
+
- batch_prediction + batch_prediction

Rezultati treniranja

- Pregledajte sve vaše trenirane - modele, - koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite. + Pregledajte sve vaše trenirane modele, koristite ih da predvidite vrednosti za red ili skup podataka, ili ih obrišite.

-

Pogledajte javne izvore podataka!

- +
+

Pogledajte javne izvore podataka!

+
+ -

Pogledaj sve javne izvore podataka...

-

Iskoristite već trenirane modele!

+ +
+ Pogledaj sve javne izvore podataka... +
+ +
+

Iskoristite već trenirane modele!

+
-

Pogledaj sve javne trenirane modele...

+ +
+ Pogledaj sve javne trenirane modele... +
\ No newline at end of file diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 1bd207e1..ba7743b5 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,9 +1,9 @@ - - + + - + - +
diff --git a/frontend/src/styles.css b/frontend/src/styles.css index 802b8bd0..b6555f43 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -2,4 +2,20 @@ body { /*background-image: url('/assets/images/add_model_background.jpg');*/ background-color: #003459; +} + +.shadowed { + box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px; +} + +.shadowed:last-child { + box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px; +} + +.shadowed:first-child { + box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px; +} + +.shadow-accent { + box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px; } \ No newline at end of file -- cgit v1.2.3 From bcd4852ea7964e15f4ad7d0061522da42d866d37 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Tue, 19 Apr 2022 02:28:18 +0200 Subject: Dodao komponentu za prikaz dataseta sa tabelama. Promenio scrollbar i home stranicu. Zapoceo trening stranicu. --- frontend/angular.json | 7 +- .../carousel-vertical.component.css | 3 + .../carousel-vertical.component.html | 12 +++ .../carousel-vertical.component.spec.ts | 25 ++++++ .../carousel-vertical.component.ts | 65 ++++++++++++++ .../src/app/_elements/graph/graph.component.html | 2 +- .../src/app/_elements/navbar/navbar.component.html | 30 +++---- .../notifications/notifications.component.ts | 1 + .../app/_elements/playlist/playlist.component.css | 57 +++++++++++++ .../app/_elements/playlist/playlist.component.html | 19 +++++ .../_elements/playlist/playlist.component.spec.ts | 25 ++++++ .../app/_elements/playlist/playlist.component.ts | 49 +++++++++++ .../select-item-list.component.css | 0 .../select-item-list.component.html | 1 + .../select-item-list.component.spec.ts | 25 ++++++ .../select-item-list/select-item-list.component.ts | 15 ++++ frontend/src/app/_pages/home/home.component.html | 46 +++++----- frontend/src/app/app.module.ts | 8 +- frontend/src/app/training/training.component.html | 17 ++-- .../src/assets/images/add_model_background.jpg | Bin 56906 -> 0 bytes .../assets/images/logo_igrannonica_temp - Copy.png | Bin 0 -> 16336 bytes .../src/assets/images/logo_igrannonica_temp.png | Bin 0 -> 29448 bytes frontend/src/styles.css | 94 +++++++++++++++++++-- 23 files changed, 441 insertions(+), 60 deletions(-) create mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css create mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html create mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts create mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts create mode 100644 frontend/src/app/_elements/playlist/playlist.component.css create mode 100644 frontend/src/app/_elements/playlist/playlist.component.html create mode 100644 frontend/src/app/_elements/playlist/playlist.component.spec.ts create mode 100644 frontend/src/app/_elements/playlist/playlist.component.ts create mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.css create mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.html create mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts create mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.ts delete mode 100644 frontend/src/assets/images/add_model_background.jpg create mode 100644 frontend/src/assets/images/logo_igrannonica_temp - Copy.png create mode 100644 frontend/src/assets/images/logo_igrannonica_temp.png (limited to 'frontend/src/app/_pages') diff --git a/frontend/angular.json b/frontend/angular.json index 6653e4b1..d1983d31 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -108,5 +108,10 @@ } } }, - "defaultProject": "frontend" + "defaultProject": "frontend", + "cli": { + "warnings": { + "versionMismatch": false + } + } } \ No newline at end of file diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css new file mode 100644 index 00000000..3d4a2432 --- /dev/null +++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css @@ -0,0 +1,3 @@ +.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 new file mode 100644 index 00000000..f52aee12 --- /dev/null +++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html @@ -0,0 +1,12 @@ +

+ {{scroll}} +

+
+
+
+ +

{{item.name}}

+ +
+
+
\ 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 new file mode 100644 index 00000000..0c736e90 --- /dev/null +++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CarouselVerticalComponent } from './carousel-vertical.component'; + +describe('CarouselVerticalComponent', () => { + let component: CarouselVerticalComponent; + let fixture: ComponentFixture; + + 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 new file mode 100644 index 00000000..d8849ea6 --- /dev/null +++ b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts @@ -0,0 +1,65 @@ +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/graph/graph.component.html b/frontend/src/app/_elements/graph/graph.component.html index 1c21fb6c..92e9df38 100644 --- a/frontend/src/app/_elements/graph/graph.component.html +++ b/frontend/src/app/_elements/graph/graph.component.html @@ -1,3 +1,3 @@
- +
\ No newline at end of file diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 7d0c4cd8..41105405 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -2,32 +2,24 @@
- +
- -
- -
diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts index 9b460240..d64530b9 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.ts +++ b/frontend/src/app/_elements/notifications/notifications.component.ts @@ -25,6 +25,7 @@ export class NotificationsComponent implements OnInit { const existingNotification = this.notifications.find(x => x.id === mId) const progress = ((currentEpoch + 1) / totalEpochs); console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch); + console.log("stat:", stat); if (!existingNotification) this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true)); else { diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css new file mode 100644 index 00000000..7ce320d9 --- /dev/null +++ b/frontend/src/app/_elements/playlist/playlist.component.css @@ -0,0 +1,57 @@ +.ns-wrapper { + width: 100%; + max-width: 800px; + max-height: 600px; + height: 100%; + transform-style: preserve-3d; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; +} + +.ns-cards { + position: relative; + width: 300%; + height: 36rem; + margin-bottom: 20px; +} + +.ns-card { + position: absolute; + width: 60%; + height: 100%; + left: 0; + right: 0; + margin: auto; + transition: transform 0.4s ease; + cursor: pointer; +} + +input[type=radio] { + display: none; +} + +#item-1:checked~.ns-cards #view-item-3, +#item-2:checked~.ns-cards #view-item-1, +#item-3:checked~.ns-cards #view-item-2 { + transform: translatex(-40%) scale(0.8); + opacity: 0.4; + z-index: 0; +} + +#item-1:checked~.ns-cards #view-item-2, +#item-2:checked~.ns-cards #view-item-3, +#item-3:checked~.ns-cards #view-item-1 { + transform: translatex(40%) scale(0.8); + opacity: 0.4; + z-index: 0; +} + +#item-1:checked~.ns-cards #view-item-1, +#item-2:checked~.ns-cards #view-item-2, +#item-3:checked~.ns-cards #view-item-3 { + transform: translatex(0) scale(1); + opacity: 1; + z-index: 1; +} \ No newline at end of file diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html new file mode 100644 index 00000000..fdb426ed --- /dev/null +++ b/frontend/src/app/_elements/playlist/playlist.component.html @@ -0,0 +1,19 @@ +
+ + + +
+ + + +
+
+ +
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/playlist/playlist.component.spec.ts b/frontend/src/app/_elements/playlist/playlist.component.spec.ts new file mode 100644 index 00000000..0afe8041 --- /dev/null +++ b/frontend/src/app/_elements/playlist/playlist.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PlaylistComponent } from './playlist.component'; + +describe('PlaylistComponent', () => { + let component: PlaylistComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PlaylistComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PlaylistComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/playlist/playlist.component.ts b/frontend/src/app/_elements/playlist/playlist.component.ts new file mode 100644 index 00000000..74527b39 --- /dev/null +++ b/frontend/src/app/_elements/playlist/playlist.component.ts @@ -0,0 +1,49 @@ +import { Component, Input, OnInit } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import { TableData } from 'src/app/_elements/datatable/datatable.component'; +import { CsvParseService } from 'src/app/_services/csv-parse.service'; +import { DatasetsService } from 'src/app/_services/datasets.service'; + +@Component({ + selector: 'app-playlist', + templateUrl: './playlist.component.html', + styleUrls: ['./playlist.component.css'] +}) +export class PlaylistComponent implements OnInit { + + selectedId: string = "0"; + + @Input() datasets!: Dataset[]; + + tableDatas?: TableData[]; + + constructor(private datasetService: DatasetsService, private csv: CsvParseService) { + + } + + getIndex(str: string) { + return parseInt(str); + } + + ngOnInit(): void { + this.tableDatas = []; + + this.datasets.forEach((dataset, index) => { + if (index < 3) { + this.datasetService.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => { + if (file) { + const tableData = new TableData(); + tableData.hasInput = true; + tableData.loaded = true; + tableData.numRows = dataset.rowCount; + tableData.numCols = dataset.columnInfo.length; + tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); + this.tableDatas!.push(tableData); + } + }); + } + }); + + console.log(this.tableDatas); + } +} diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.css b/frontend/src/app/_elements/select-item-list/select-item-list.component.css new file mode 100644 index 00000000..e69de29b 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 new file mode 100644 index 00000000..b92b7adb --- /dev/null +++ b/frontend/src/app/_elements/select-item-list/select-item-list.component.html @@ -0,0 +1 @@ +

select-item-list works!

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 new file mode 100644 index 00000000..0abc7ab5 --- /dev/null +++ b/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SelectItemListComponent } from './select-item-list.component'; + +describe('SelectItemListComponent', () => { + let component: SelectItemListComponent; + let fixture: ComponentFixture; + + 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 new file mode 100644 index 00000000..f6aae7a0 --- /dev/null +++ b/frontend/src/app/_elements/select-item-list/select-item-list.component.ts @@ -0,0 +1,15 @@ +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 { + } + +} diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 8294a73b..b673d074 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -1,5 +1,8 @@
- + +
@@ -11,7 +14,7 @@
-
+
storage

Moji izvori podataka

@@ -20,7 +23,7 @@

-
+
model_training @@ -30,7 +33,7 @@

-
+
batch_prediction @@ -44,23 +47,28 @@
-
-

Pogledajte javne izvore podataka!

-
- - +
+ + -
- Pogledaj sve javne izvore podataka... +
+ Pogledaj sve javne izvore podataka... +
-
-

Iskoristite već trenirane modele!

-
- - +
\ No newline at end of file diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 26417373..7862c872 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -50,6 +50,9 @@ import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.comp import { Configuration } from './configuration.service'; import { PlaygroundComponent } from './_pages/playground/playground.component'; import { GradientBackgroundComponent } from './_elements/gradient-background/gradient-background.component'; +import { CarouselVerticalComponent } from './_elements/carousel-vertical/carousel-vertical.component'; +import { SelectItemListComponent } from './_elements/select-item-list/select-item-list.component'; +import { PlaylistComponent } from './_elements/playlist/playlist.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); @@ -91,7 +94,10 @@ export function initializeApp(appConfig: Configuration) { ItemExperimentComponent, YesNoDialogComponent, PlaygroundComponent, - GradientBackgroundComponent + GradientBackgroundComponent, + CarouselVerticalComponent, + SelectItemListComponent, + PlaylistComponent ], imports: [ BrowserModule, diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html index 0ce4cc89..9f2481a2 100644 --- a/frontend/src/app/training/training.component.html +++ b/frontend/src/app/training/training.component.html @@ -2,36 +2,33 @@

Trenirajte veštačku neuronsku mrežu

-
+

1. Izaberite eksperiment iz kolekcije

- +
    -
  • - +
  • +
- +

2. Izaberite model

- +

3. Treniranje modela

- +

Rezultati treniranja

Rezultati treniranja:

diff --git a/frontend/src/assets/images/add_model_background.jpg b/frontend/src/assets/images/add_model_background.jpg deleted file mode 100644 index d86f0566..00000000 Binary files a/frontend/src/assets/images/add_model_background.jpg and /dev/null differ diff --git a/frontend/src/assets/images/logo_igrannonica_temp - Copy.png b/frontend/src/assets/images/logo_igrannonica_temp - Copy.png new file mode 100644 index 00000000..a9d7d396 Binary files /dev/null and b/frontend/src/assets/images/logo_igrannonica_temp - Copy.png differ diff --git a/frontend/src/assets/images/logo_igrannonica_temp.png b/frontend/src/assets/images/logo_igrannonica_temp.png new file mode 100644 index 00000000..9e8e8855 Binary files /dev/null and b/frontend/src/assets/images/logo_igrannonica_temp.png differ diff --git a/frontend/src/styles.css b/frontend/src/styles.css index b6555f43..5e59e735 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -4,18 +4,96 @@ body { background-color: #003459; } -.shadowed { - box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px; +.shadowed:hover { + box-shadow: rgba(0, 152, 189, 0.4) 0px 5px, rgba(0, 152, 189, 0.3) 0px 10px, rgba(0, 152, 189, 0.2) 0px 15px, rgba(0, 152, 189, 0.1) 0px 20px, rgba(0, 152, 189, 0.05) 0px 25px; } -.shadowed:last-child { - box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px; +.shadowed:first-child:hover { + box-shadow: rgba(0, 152, 189, 0.4) -5px 5px, rgba(0, 152, 189, 0.3) -10px 10px, rgba(0, 152, 189, 0.2) -15px 15px, rgba(0, 152, 189, 0.1) -20px 20px, rgba(0, 152, 189, 0.05) -25px 25px; } -.shadowed:first-child { - box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px; +.shadowed:last-child:hover { + box-shadow: rgba(0, 152, 189, 0.4) 5px 5px, rgba(0, 152, 189, 0.3) 10px 10px, rgba(0, 152, 189, 0.2) 15px 15px, rgba(0, 152, 189, 0.1) 20px 20px, rgba(0, 152, 189, 0.05) 25px 25px; } -.shadow-accent { - box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px; +.shadow-accent:hover { + box-shadow: rgba(0, 152, 189, 0.4) 0px 5px, rgba(0, 152, 189, 0.3) 0px 10px, rgba(0, 152, 189, 0.2) 0px 15px, rgba(0, 152, 189, 0.1) 0px 20px, rgba(0, 152, 189, 0.05) 0px 25px; + animation-name: holo-hover; + animation-duration: 300ms; + transform: perspective(100em) rotateX(10deg); +} + + +/*Mora da se ispravi za media kada je ekran premali pa se poredjaju u kolonu*/ + +.align-items-view>*:first-child { + transform: perspective(100em) rotateY(25deg) translateZ(1em); +} + +.align-items-view>* { + transform: perspective(100em) translateZ(-2em); +} + +.align-items-view>*:last-child { + transform: perspective(100em) rotateY(-25deg) translateZ(1em); +} + +.bg-light { + background-color: rgba(0, 152, 189, 0.3) !important; +} + +a { + color: #00a8e8 !important; +} + +@keyframes holo-hover { + to { + transform: perspective(100em) rotateX(10deg); + } +} + +@keyframes logo-animation { + from { + transform: perspective(100em) rotateX(50deg) rotateZ(0deg); + } + to { + transform: perspective(100em) rotateX(50deg) rotateZ(360deg); + } +} + +.ann-logo { + animation-name: logo-animation; + animation-duration: 3140ms; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + + +/* width */ + +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + + +/* Track */ + +::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0); +} + + +/* Handle */ + +::-webkit-scrollbar-thumb { + background: rgba(0, 188, 252, 0.6); + border-radius: 25px; +} + + +/* Handle on hover */ + +::-webkit-scrollbar-thumb:hover { + background: rgba(0, 188, 252, 0.8); } \ No newline at end of file -- cgit v1.2.3 From f897b364af1c814ef2ffed2da989c4e35947a4cb Mon Sep 17 00:00:00 2001 From: Ivan Ljubisavljevic Date: Mon, 18 Apr 2022 01:14:31 +0200 Subject: Izmena na frontu i ml-u(username -> userId) #71 --- backend/api/api/Controllers/DatasetController.cs | 24 +++++++++++----------- backend/api/api/Controllers/ModelController.cs | 2 +- backend/api/api/Controllers/PredictorController.cs | 2 +- backend/api/api/Services/DatasetService.cs | 12 +++++------ backend/api/api/Services/IDatasetService.cs | 6 +++--- backend/microservice/api/controller.py | 2 +- frontend/src/app/_data/Dataset.ts | 2 +- frontend/src/app/_data/Model.ts | 2 +- frontend/src/app/_data/Predictor.ts | 3 ++- .../add-new-dataset/add-new-dataset.component.ts | 2 +- .../_elements/model-load/model-load.component.ts | 2 +- .../filter-datasets/filter-datasets.component.ts | 2 +- .../app/_pages/my-models/my-models.component.html | 2 +- .../app/_pages/my-models/my-models.component.ts | 8 +++++++- frontend/src/app/_services/datasets.service.ts | 4 ++-- frontend/src/app/_services/predictors.service.ts | 2 +- 16 files changed, 42 insertions(+), 35 deletions(-) (limited to 'frontend/src/app/_pages') diff --git a/backend/api/api/Controllers/DatasetController.cs b/backend/api/api/Controllers/DatasetController.cs index bdac9ed9..58a903eb 100644 --- a/backend/api/api/Controllers/DatasetController.cs +++ b/backend/api/api/Controllers/DatasetController.cs @@ -149,46 +149,46 @@ namespace api.Controllers // PUT api//{name} - [HttpPut("{name}")] + [HttpPut("{id}")] [Authorize(Roles = "User")] - public ActionResult Put(string name, [FromBody] Dataset dataset) + public ActionResult Put(string id, [FromBody] Dataset dataset) { string uploaderId = getUserId(); if (uploaderId == null) return BadRequest(); - var existingDataset = _datasetService.GetOneDataset(uploaderId, name); + var existingDataset = _datasetService.GetOneDataset(uploaderId, id); //ne mora da se proverava if (existingDataset == null) - return NotFound($"Dataset with name = {name} or user with ID = {uploaderId} not found"); + return NotFound($"Dataset with ID = {id} or user with ID = {uploaderId} not found"); dataset.lastUpdated = DateTime.UtcNow; - _datasetService.Update(uploaderId, name, dataset); + _datasetService.Update(uploaderId, id, dataset); - return Ok($"Dataset with name = {name} updated"); + return Ok($"Dataset with ID = {id} updated"); } // DELETE api//name - [HttpDelete("{name}")] + [HttpDelete("{id}")] [Authorize(Roles = "User")] - public ActionResult Delete(string name) + public ActionResult Delete(string id) { string uploaderId = getUserId(); if (uploaderId == null) return BadRequest(); - var dataset = _datasetService.GetOneDataset(uploaderId, name); + var dataset = _datasetService.GetOneDataset(uploaderId, id); if (dataset == null) - return NotFound($"Dataset with name = {name} or user with ID = {uploaderId} not found"); + return NotFound($"Dataset with ID = {id} or user with ID = {uploaderId} not found"); - _datasetService.Delete(dataset.uploaderId, dataset.name); + _datasetService.Delete(dataset.uploaderId, dataset._id); - return Ok($"Dataset with name = {name} deleted"); + return Ok($"Dataset with ID = {id} deleted"); } } diff --git a/backend/api/api/Controllers/ModelController.cs b/backend/api/api/Controllers/ModelController.cs index 1ec01ab8..fe16507b 100644 --- a/backend/api/api/Controllers/ModelController.cs +++ b/backend/api/api/Controllers/ModelController.cs @@ -82,7 +82,7 @@ namespace api.Controllers { var model=_modelService.GetOneModel(info.ModelId); - var user = _userService.GetUserByUsername(model.uploaderId); + var user = _userService.GetUserById(model.uploaderId); if (ChatHub.CheckUser(user._id)) await _ichat.Clients.Client(ChatHub.Users[user._id]).SendAsync("NotifyEpoch",model.name,info.ModelId,info.Stat,model.epochs,info.EpochNum); diff --git a/backend/api/api/Controllers/PredictorController.cs b/backend/api/api/Controllers/PredictorController.cs index 26fe8f1d..dd5aa5fd 100644 --- a/backend/api/api/Controllers/PredictorController.cs +++ b/backend/api/api/Controllers/PredictorController.cs @@ -213,7 +213,7 @@ namespace api.Controllers } // DELETE api//name - [HttpDelete("{name}")] + [HttpDelete("{id}")] [Authorize(Roles = "User")] public ActionResult Delete(string id) { diff --git a/backend/api/api/Services/DatasetService.cs b/backend/api/api/Services/DatasetService.cs index 33026687..6c2efe14 100644 --- a/backend/api/api/Services/DatasetService.cs +++ b/backend/api/api/Services/DatasetService.cs @@ -27,9 +27,9 @@ namespace api.Services } //brisanje odredjenog name-a - public void Delete(string userId, string name) + public void Delete(string userId, string id) { - _dataset.DeleteOne(dataset => (dataset.uploaderId == userId && dataset.name == name)); + _dataset.DeleteOne(dataset => (dataset.uploaderId == userId && dataset._id == id)); } public List GetMyDatasets(string userId) @@ -62,9 +62,9 @@ namespace api.Services return _dataset.Find(dataset => dataset.isPublic == true && dataset.isPreProcess).ToList(); } - public Dataset GetOneDataset(string userId, string name) + public Dataset GetOneDataset(string userId, string id) { - return _dataset.Find(dataset => dataset.uploaderId == userId && dataset.name == name && dataset.isPreProcess).FirstOrDefault(); + return _dataset.Find(dataset => dataset.uploaderId == userId && dataset._id == id && dataset.isPreProcess).FirstOrDefault(); } //odraditi za pretragu getOne @@ -74,9 +74,9 @@ namespace api.Services } //ako je potrebno da se zameni name ili ekstenzija - public void Update(string userId, string name, Dataset dataset ) + public void Update(string userId, string id, Dataset dataset ) { - _dataset.ReplaceOne(dataset => dataset.uploaderId == userId && dataset.name == name, dataset); + _dataset.ReplaceOne(dataset => dataset.uploaderId == userId && dataset._id == id, dataset); } public void Update(Dataset dataset) { diff --git a/backend/api/api/Services/IDatasetService.cs b/backend/api/api/Services/IDatasetService.cs index b700e87c..bb06208d 100644 --- a/backend/api/api/Services/IDatasetService.cs +++ b/backend/api/api/Services/IDatasetService.cs @@ -5,15 +5,15 @@ namespace api.Services { public interface IDatasetService { - Dataset GetOneDataset(string userId, string name); + Dataset GetOneDataset(string userId, string id); Dataset GetOneDataset(string id); List SearchDatasets(string name); List GetMyDatasets(string userId); List SortDatasets(string userId, bool ascdsc, int latest); List GetPublicDatasets(); Dataset Create(Dataset dataset); - void Update(string userId, string name, Dataset dataset); - void Delete(string userId, string name); + void Update(string userId, string id, Dataset dataset); + void Delete(string userId, string id); public List GetGuestDatasets(); public void Update(Dataset dataset); string GetDatasetId(string fileId); diff --git a/backend/microservice/api/controller.py b/backend/microservice/api/controller.py index e6515e7b..9b83b8e7 100644 --- a/backend/microservice/api/controller.py +++ b/backend/microservice/api/controller.py @@ -78,7 +78,7 @@ def train(): m.append({"Name" : attribute, "JsonValue" : value}) predictor = { "_id" : "", - "username" : paramsModel["username"], + "uploaderId" : paramsModel["uploaderId"], "inputs" : paramsExperiment["inputColumns"], "output" : paramsExperiment["outputColumn"], "isPublic" : False, diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index 732d1c56..766040a3 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -10,7 +10,7 @@ export default class Dataset { public accessibleByLink: boolean = false, public dateCreated: Date = new Date(), public lastUpdated: Date = new Date(), - public username: string = '', + public uploaderId: string = '', public delimiter: string = '', public hasHeader: boolean = true, diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 1af3fe30..b273f56a 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -19,7 +19,7 @@ export default class Model { public batchSize: number = 5, public hiddenLayerActivationFunctions: string[] = ['sigmoid'], public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, - public username: string = '', + public uploaderId: string = '', public metrics: string[] = [], // TODO add to add-model form public epochs: number = 5 // TODO add to add-model form ) { } diff --git a/frontend/src/app/_data/Predictor.ts b/frontend/src/app/_data/Predictor.ts index 7e902eae..8aa2b6cb 100644 --- a/frontend/src/app/_data/Predictor.ts +++ b/frontend/src/app/_data/Predictor.ts @@ -7,6 +7,7 @@ export default class Predictor { public output: string = '', public isPublic: boolean = false, public accessibleByLink: boolean = false, - public dateCreated: Date = new Date() + public dateCreated: Date = new Date(), + public uploaderId: string = '' ) { } } \ No newline at end of file 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 index 6ff108ce..3e1b5c73 100644 --- 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 @@ -90,7 +90,7 @@ export class AddNewDatasetComponent { 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.username = shared.username; + this.dataset.uploaderId = shared.userId; this.datasetsService.addDataset(this.dataset).subscribe((dataset) => { this.newDatasetAdded.emit("added"); diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts index aa0797bd..73872694 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.ts +++ b/frontend/src/app/_elements/model-load/model-load.component.ts @@ -67,7 +67,7 @@ export class ModelLoadComponent implements OnInit { uploadModel() { this.getMetrics(); - this.newModel.username = Shared.username; + this.newModel.uploaderId = Shared.userId; this.modelsService.addModel(this.newModel).subscribe((response) => { Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.'); diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts index c83bf208..66b3755e 100644 --- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts +++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts @@ -33,7 +33,7 @@ export class FilterDatasetsComponent implements OnInit { newDataset._id = ""; newDataset.isPublic = false; newDataset.lastUpdated = new Date(); - newDataset.username = decodedToken.name; + newDataset.uploaderId = decodedToken.uploaderId; let name=prompt("Unesite naziv dataset-a",newDataset.name); newDataset.name=name as string; if(name!=null && name!="") diff --git a/frontend/src/app/_pages/my-models/my-models.component.html b/frontend/src/app/_pages/my-models/my-models.component.html index b0e9c4ef..9b281239 100644 --- a/frontend/src/app/_pages/my-models/my-models.component.html +++ b/frontend/src/app/_pages/my-models/my-models.component.html @@ -15,7 +15,7 @@
- diff --git a/frontend/src/app/_pages/my-models/my-models.component.ts b/frontend/src/app/_pages/my-models/my-models.component.ts index 92d3fbaa..d379fa69 100644 --- a/frontend/src/app/_pages/my-models/my-models.component.ts +++ b/frontend/src/app/_pages/my-models/my-models.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; import shared from 'src/app/Shared'; import Model from 'src/app/_data/Model'; import { ModelsService } from 'src/app/_services/models.service'; @@ -12,7 +13,7 @@ export class MyModelsComponent implements OnInit { myModels: Model[] = []; //myModel: Model; - constructor(private modelsS : ModelsService) { + constructor(private modelsS : ModelsService, private router : Router) { @@ -44,6 +45,11 @@ deleteThisModel(model: Model): void{ } +useThisModel(model: Model): void{ + + this.router.navigate(['/training']) + +} getAllMyModels(): void{ this.modelsS.getMyModels().subscribe(m => { this.myModels = m; diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts index c3281be6..b2272f0a 100644 --- a/frontend/src/app/_services/datasets.service.ts +++ b/frontend/src/app/_services/datasets.service.ts @@ -29,10 +29,10 @@ export class DatasetsService { } editDataset(dataset: Dataset): Observable { - return this.http.put(`${Configuration.settings.apiURL}/dataset/`, dataset, { headers: this.authService.authHeader() }); + return this.http.put(`${Configuration.settings.apiURL}/dataset/` + dataset._id, dataset, { headers: this.authService.authHeader() }); } deleteDataset(dataset: Dataset) { - return this.http.delete(`${Configuration.settings.apiURL}/dataset/` + dataset.name, { headers: this.authService.authHeader(), responseType: "text" }); + return this.http.delete(`${Configuration.settings.apiURL}/dataset/` + dataset._id, { headers: this.authService.authHeader(), responseType: "text" }); } } diff --git a/frontend/src/app/_services/predictors.service.ts b/frontend/src/app/_services/predictors.service.ts index 9e8383aa..a24ee708 100644 --- a/frontend/src/app/_services/predictors.service.ts +++ b/frontend/src/app/_services/predictors.service.ts @@ -24,7 +24,7 @@ export class PredictorsService { } deletePredictor(predictor: Predictor) { - return this.http.delete(`${Configuration.settings.apiURL}/predictor/` + predictor.name, { headers: this.authService.authHeader(), responseType: "text" }); + return this.http.delete(`${Configuration.settings.apiURL}/predictor/` + predictor._id, { headers: this.authService.authHeader(), responseType: "text" }); } getMyPredictors(): Observable { -- cgit v1.2.3 From 1177f4b29b616a59af39f4aef11b116f9660357d Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 01:28:46 +0200 Subject: Reorganizovao stranice i komponente. --- .../_charts/barchart/barchart.component.css | 6 + .../_charts/barchart/barchart.component.html | 4 + .../_charts/barchart/barchart.component.spec.ts | 25 +++ .../_charts/barchart/barchart.component.ts | 54 +++++ .../_charts/box-plot/box-plot.component.css | 0 .../_charts/box-plot/box-plot.component.html | 1 + .../_charts/box-plot/box-plot.component.spec.ts | 25 +++ .../_charts/box-plot/box-plot.component.ts | 15 ++ .../_charts/line-chart/line-chart.component.css | 0 .../_charts/line-chart/line-chart.component.html | 5 + .../line-chart/line-chart.component.spec.ts | 25 +++ .../_charts/line-chart/line-chart.component.ts | 88 ++++++++ .../_charts/mixed-chart/mixed-chart.component.css | 0 .../_charts/mixed-chart/mixed-chart.component.html | 2 + .../mixed-chart/mixed-chart.component.spec.ts | 25 +++ .../_charts/mixed-chart/mixed-chart.component.ts | 56 +++++ .../_charts/pie-chart/pie-chart.component.css | 0 .../_charts/pie-chart/pie-chart.component.html | 1 + .../_charts/pie-chart/pie-chart.component.spec.ts | 25 +++ .../_charts/pie-chart/pie-chart.component.ts | 15 ++ .../point-linechart/point-linechart.component.css | 0 .../point-linechart/point-linechart.component.html | 2 + .../point-linechart.component.spec.ts | 25 +++ .../point-linechart/point-linechart.component.ts | 57 +++++ .../scatterchart/scatterchart.component.css | 6 + .../scatterchart/scatterchart.component.html | 4 + .../scatterchart/scatterchart.component.spec.ts | 25 +++ .../_charts/scatterchart/scatterchart.component.ts | 39 ++++ .../add-new-dataset/add-new-dataset.component.css | 0 .../add-new-dataset/add-new-dataset.component.html | 49 ----- .../add-new-dataset.component.spec.ts | 25 --- .../add-new-dataset/add-new-dataset.component.ts | 106 --------- .../_elements/annvisual/annvisual.component.css | 4 - .../_elements/annvisual/annvisual.component.html | 5 - .../annvisual/annvisual.component.spec.ts | 25 --- .../app/_elements/annvisual/annvisual.component.ts | 45 ---- .../carousel-vertical.component.css | 3 - .../carousel-vertical.component.html | 12 - .../carousel-vertical.component.spec.ts | 25 --- .../carousel-vertical.component.ts | 65 ------ .../app/_elements/carousel/carousel.component.css | 0 .../app/_elements/carousel/carousel.component.html | 17 -- .../_elements/carousel/carousel.component.spec.ts | 25 --- .../app/_elements/carousel/carousel.component.ts | 18 -- .../column-table/column-table.component.css | 0 .../column-table/column-table.component.html | 1 + .../column-table/column-table.component.spec.ts | 25 +++ .../column-table/column-table.component.ts | 15 ++ .../dataset-load/dataset-load.component.css | 18 -- .../dataset-load/dataset-load.component.html | 40 ---- .../dataset-load/dataset-load.component.spec.ts | 25 --- .../dataset-load/dataset-load.component.ts | 100 --------- .../form-dataset/form-dataset.component.css | 0 .../form-dataset/form-dataset.component.html | 1 + .../form-dataset/form-dataset.component.spec.ts | 25 +++ .../form-dataset/form-dataset.component.ts | 15 ++ .../_elements/form-model/form-model.component.css | 0 .../_elements/form-model/form-model.component.html | 1 + .../form-model/form-model.component.spec.ts | 25 +++ .../_elements/form-model/form-model.component.ts | 15 ++ .../item-dataset/item-dataset.component.css | 23 -- .../item-dataset/item-dataset.component.html | 41 ---- .../item-dataset/item-dataset.component.spec.ts | 25 --- .../item-dataset/item-dataset.component.ts | 40 ---- .../item-experiment/item-experiment.component.css | 0 .../item-experiment/item-experiment.component.html | 10 - .../item-experiment.component.spec.ts | 25 --- .../item-experiment/item-experiment.component.ts | 15 -- .../_elements/item-model/item-model.component.css | 23 -- .../_elements/item-model/item-model.component.html | 58 ----- .../item-model/item-model.component.spec.ts | 25 --- .../_elements/item-model/item-model.component.ts | 33 --- .../item-predictor/item-predictor.component.css | 0 .../item-predictor/item-predictor.component.html | 35 --- .../item-predictor.component.spec.ts | 25 --- .../item-predictor/item-predictor.component.ts | 23 -- .../metric-view/metric-view.component.css | 0 .../metric-view/metric-view.component.html | 5 + .../metric-view/metric-view.component.spec.ts | 25 +++ .../_elements/metric-view/metric-view.component.ts | 49 +++++ .../_elements/model-load/model-load.component.css | 17 -- .../_elements/model-load/model-load.component.html | 227 ------------------- .../model-load/model-load.component.spec.ts | 25 --- .../_elements/model-load/model-load.component.ts | 112 ---------- .../select-item-list.component.css | 0 .../select-item-list.component.html | 1 - .../select-item-list.component.spec.ts | 25 --- .../select-item-list/select-item-list.component.ts | 15 -- .../src/app/_pages/archive/archive.component.css | 0 .../src/app/_pages/archive/archive.component.html | 1 + .../app/_pages/archive/archive.component.spec.ts | 25 +++ .../src/app/_pages/archive/archive.component.ts | 15 ++ .../browse-datasets/browse-datasets.component.css | 0 .../browse-datasets/browse-datasets.component.html | 1 - .../browse-datasets.component.spec.ts | 25 --- .../browse-datasets/browse-datasets.component.ts | 15 -- .../browse-predictors.component.css | 7 - .../browse-predictors.component.html | 40 ---- .../browse-predictors.component.spec.ts | 25 --- .../browse-predictors.component.ts | 26 --- .../app/_pages/experiment/experiment.component.css | 0 .../_pages/experiment/experiment.component.html | 1 + .../_pages/experiment/experiment.component.spec.ts | 25 +++ .../app/_pages/experiment/experiment.component.ts | 15 ++ .../filter-datasets/filter-datasets.component.css | 0 .../filter-datasets/filter-datasets.component.html | 38 ---- .../filter-datasets.component.spec.ts | 25 --- .../filter-datasets/filter-datasets.component.ts | 48 ---- frontend/src/app/_pages/home/home.component.ts | 5 - .../_pages/my-datasets/my-datasets.component.css | 8 - .../_pages/my-datasets/my-datasets.component.html | 39 ---- .../my-datasets/my-datasets.component.spec.ts | 25 --- .../_pages/my-datasets/my-datasets.component.ts | 63 ------ .../app/_pages/my-models/my-models.component.css | 12 - .../app/_pages/my-models/my-models.component.html | 43 ---- .../_pages/my-models/my-models.component.spec.ts | 25 --- .../app/_pages/my-models/my-models.component.ts | 59 ----- .../my-predictors/my-predictors.component.css | 13 -- .../my-predictors/my-predictors.component.html | 23 -- .../my-predictors/my-predictors.component.spec.ts | 25 --- .../my-predictors/my-predictors.component.ts | 43 ---- .../src/app/_pages/predict/predict.component.css | 3 - .../src/app/_pages/predict/predict.component.html | 73 ------- .../app/_pages/predict/predict.component.spec.ts | 25 --- .../src/app/_pages/predict/predict.component.ts | 45 ---- frontend/src/app/_services/auth.service.ts | 4 +- .../app/_services/configuration.service.spec.ts | 16 ++ .../src/app/_services/configuration.service.ts | 20 ++ frontend/src/app/_services/datasets.service.ts | 2 +- frontend/src/app/_services/predictors.service.ts | 10 +- frontend/src/app/_services/signal-r.service.ts | 2 +- frontend/src/app/_services/user-info.service.ts | 2 +- frontend/src/app/app-routing.module.ts | 25 +-- frontend/src/app/app.module.ts | 81 +++---- frontend/src/app/barchart/barchart.component.css | 6 - frontend/src/app/barchart/barchart.component.html | 4 - .../src/app/barchart/barchart.component.spec.ts | 25 --- frontend/src/app/barchart/barchart.component.ts | 54 ----- frontend/src/app/configuration.service.spec.ts | 16 -- frontend/src/app/configuration.service.ts | 20 -- .../src/app/experiment/experiment.component.css | 43 ---- .../src/app/experiment/experiment.component.html | 243 --------------------- .../app/experiment/experiment.component.spec.ts | 25 --- .../src/app/experiment/experiment.component.ts | 221 ------------------- .../app/scatterchart/scatterchart.component.css | 6 - .../app/scatterchart/scatterchart.component.html | 4 - .../scatterchart/scatterchart.component.spec.ts | 25 --- .../src/app/scatterchart/scatterchart.component.ts | 39 ---- frontend/src/app/training/training.component.css | 39 ---- frontend/src/app/training/training.component.html | 43 ---- .../src/app/training/training.component.spec.ts | 25 --- frontend/src/app/training/training.component.ts | 55 ----- 152 files changed, 895 insertions(+), 3183 deletions(-) create mode 100644 frontend/src/app/_elements/_charts/barchart/barchart.component.css create mode 100644 frontend/src/app/_elements/_charts/barchart/barchart.component.html create mode 100644 frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts create mode 100644 frontend/src/app/_elements/_charts/barchart/barchart.component.ts create mode 100644 frontend/src/app/_elements/_charts/box-plot/box-plot.component.css create mode 100644 frontend/src/app/_elements/_charts/box-plot/box-plot.component.html create mode 100644 frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts create mode 100644 frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts create mode 100644 frontend/src/app/_elements/_charts/line-chart/line-chart.component.css create mode 100644 frontend/src/app/_elements/_charts/line-chart/line-chart.component.html create mode 100644 frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts create mode 100644 frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts create mode 100644 frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.css create mode 100644 frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html create mode 100644 frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.spec.ts create mode 100644 frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.ts create mode 100644 frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.css create mode 100644 frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html create mode 100644 frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts create mode 100644 frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts create mode 100644 frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.css create mode 100644 frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html create mode 100644 frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts create mode 100644 frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts create mode 100644 frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css create mode 100644 frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html create mode 100644 frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts create mode 100644 frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts delete mode 100644 frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css delete mode 100644 frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html delete mode 100644 frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts delete mode 100644 frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts delete mode 100644 frontend/src/app/_elements/annvisual/annvisual.component.css delete mode 100644 frontend/src/app/_elements/annvisual/annvisual.component.html delete mode 100644 frontend/src/app/_elements/annvisual/annvisual.component.spec.ts delete mode 100644 frontend/src/app/_elements/annvisual/annvisual.component.ts delete mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css delete mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html delete mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts delete mode 100644 frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts delete mode 100644 frontend/src/app/_elements/carousel/carousel.component.css delete mode 100644 frontend/src/app/_elements/carousel/carousel.component.html delete mode 100644 frontend/src/app/_elements/carousel/carousel.component.spec.ts delete mode 100644 frontend/src/app/_elements/carousel/carousel.component.ts create mode 100644 frontend/src/app/_elements/column-table/column-table.component.css create mode 100644 frontend/src/app/_elements/column-table/column-table.component.html create mode 100644 frontend/src/app/_elements/column-table/column-table.component.spec.ts create mode 100644 frontend/src/app/_elements/column-table/column-table.component.ts delete mode 100644 frontend/src/app/_elements/dataset-load/dataset-load.component.css delete mode 100644 frontend/src/app/_elements/dataset-load/dataset-load.component.html delete mode 100644 frontend/src/app/_elements/dataset-load/dataset-load.component.spec.ts delete mode 100644 frontend/src/app/_elements/dataset-load/dataset-load.component.ts create mode 100644 frontend/src/app/_elements/form-dataset/form-dataset.component.css create mode 100644 frontend/src/app/_elements/form-dataset/form-dataset.component.html create mode 100644 frontend/src/app/_elements/form-dataset/form-dataset.component.spec.ts create mode 100644 frontend/src/app/_elements/form-dataset/form-dataset.component.ts create mode 100644 frontend/src/app/_elements/form-model/form-model.component.css create mode 100644 frontend/src/app/_elements/form-model/form-model.component.html create mode 100644 frontend/src/app/_elements/form-model/form-model.component.spec.ts create mode 100644 frontend/src/app/_elements/form-model/form-model.component.ts delete mode 100644 frontend/src/app/_elements/item-dataset/item-dataset.component.css delete mode 100644 frontend/src/app/_elements/item-dataset/item-dataset.component.html delete mode 100644 frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts delete mode 100644 frontend/src/app/_elements/item-dataset/item-dataset.component.ts delete mode 100644 frontend/src/app/_elements/item-experiment/item-experiment.component.css delete mode 100644 frontend/src/app/_elements/item-experiment/item-experiment.component.html delete mode 100644 frontend/src/app/_elements/item-experiment/item-experiment.component.spec.ts delete mode 100644 frontend/src/app/_elements/item-experiment/item-experiment.component.ts delete mode 100644 frontend/src/app/_elements/item-model/item-model.component.css delete mode 100644 frontend/src/app/_elements/item-model/item-model.component.html delete mode 100644 frontend/src/app/_elements/item-model/item-model.component.spec.ts delete mode 100644 frontend/src/app/_elements/item-model/item-model.component.ts delete mode 100644 frontend/src/app/_elements/item-predictor/item-predictor.component.css delete mode 100644 frontend/src/app/_elements/item-predictor/item-predictor.component.html delete mode 100644 frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts delete mode 100644 frontend/src/app/_elements/item-predictor/item-predictor.component.ts create mode 100644 frontend/src/app/_elements/metric-view/metric-view.component.css create mode 100644 frontend/src/app/_elements/metric-view/metric-view.component.html create mode 100644 frontend/src/app/_elements/metric-view/metric-view.component.spec.ts create mode 100644 frontend/src/app/_elements/metric-view/metric-view.component.ts delete mode 100644 frontend/src/app/_elements/model-load/model-load.component.css delete mode 100644 frontend/src/app/_elements/model-load/model-load.component.html delete mode 100644 frontend/src/app/_elements/model-load/model-load.component.spec.ts delete mode 100644 frontend/src/app/_elements/model-load/model-load.component.ts delete mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.css delete mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.html delete mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts delete mode 100644 frontend/src/app/_elements/select-item-list/select-item-list.component.ts create mode 100644 frontend/src/app/_pages/archive/archive.component.css create mode 100644 frontend/src/app/_pages/archive/archive.component.html create mode 100644 frontend/src/app/_pages/archive/archive.component.spec.ts create mode 100644 frontend/src/app/_pages/archive/archive.component.ts delete mode 100644 frontend/src/app/_pages/browse-datasets/browse-datasets.component.css delete mode 100644 frontend/src/app/_pages/browse-datasets/browse-datasets.component.html delete mode 100644 frontend/src/app/_pages/browse-datasets/browse-datasets.component.spec.ts delete mode 100644 frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts delete mode 100644 frontend/src/app/_pages/browse-predictors/browse-predictors.component.css delete mode 100644 frontend/src/app/_pages/browse-predictors/browse-predictors.component.html delete mode 100644 frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts delete mode 100644 frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts create mode 100644 frontend/src/app/_pages/experiment/experiment.component.css create mode 100644 frontend/src/app/_pages/experiment/experiment.component.html create mode 100644 frontend/src/app/_pages/experiment/experiment.component.spec.ts create mode 100644 frontend/src/app/_pages/experiment/experiment.component.ts delete mode 100644 frontend/src/app/_pages/filter-datasets/filter-datasets.component.css delete mode 100644 frontend/src/app/_pages/filter-datasets/filter-datasets.component.html delete mode 100644 frontend/src/app/_pages/filter-datasets/filter-datasets.component.spec.ts delete mode 100644 frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts delete mode 100644 frontend/src/app/_pages/my-datasets/my-datasets.component.css delete mode 100644 frontend/src/app/_pages/my-datasets/my-datasets.component.html delete mode 100644 frontend/src/app/_pages/my-datasets/my-datasets.component.spec.ts delete mode 100644 frontend/src/app/_pages/my-datasets/my-datasets.component.ts delete mode 100644 frontend/src/app/_pages/my-models/my-models.component.css delete mode 100644 frontend/src/app/_pages/my-models/my-models.component.html delete mode 100644 frontend/src/app/_pages/my-models/my-models.component.spec.ts delete mode 100644 frontend/src/app/_pages/my-models/my-models.component.ts delete mode 100644 frontend/src/app/_pages/my-predictors/my-predictors.component.css delete mode 100644 frontend/src/app/_pages/my-predictors/my-predictors.component.html delete mode 100644 frontend/src/app/_pages/my-predictors/my-predictors.component.spec.ts delete mode 100644 frontend/src/app/_pages/my-predictors/my-predictors.component.ts delete mode 100644 frontend/src/app/_pages/predict/predict.component.css delete mode 100644 frontend/src/app/_pages/predict/predict.component.html delete mode 100644 frontend/src/app/_pages/predict/predict.component.spec.ts delete mode 100644 frontend/src/app/_pages/predict/predict.component.ts create mode 100644 frontend/src/app/_services/configuration.service.spec.ts create mode 100644 frontend/src/app/_services/configuration.service.ts delete mode 100644 frontend/src/app/barchart/barchart.component.css delete mode 100644 frontend/src/app/barchart/barchart.component.html delete mode 100644 frontend/src/app/barchart/barchart.component.spec.ts delete mode 100644 frontend/src/app/barchart/barchart.component.ts delete mode 100644 frontend/src/app/configuration.service.spec.ts delete mode 100644 frontend/src/app/configuration.service.ts delete mode 100644 frontend/src/app/experiment/experiment.component.css delete mode 100644 frontend/src/app/experiment/experiment.component.html delete mode 100644 frontend/src/app/experiment/experiment.component.spec.ts delete mode 100644 frontend/src/app/experiment/experiment.component.ts delete mode 100644 frontend/src/app/scatterchart/scatterchart.component.css delete mode 100644 frontend/src/app/scatterchart/scatterchart.component.html delete mode 100644 frontend/src/app/scatterchart/scatterchart.component.spec.ts delete mode 100644 frontend/src/app/scatterchart/scatterchart.component.ts delete mode 100644 frontend/src/app/training/training.component.css delete mode 100644 frontend/src/app/training/training.component.html delete mode 100644 frontend/src/app/training/training.component.spec.ts delete mode 100644 frontend/src/app/training/training.component.ts (limited to 'frontend/src/app/_pages') 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 @@ +

Bar chart:

+
+ +
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts new file mode 100644 index 00000000..8b346d1c --- /dev/null +++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BarchartComponent } from './barchart.component'; + +describe('BarchartComponent', () => { + let component: BarchartComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ BarchartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BarchartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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/_charts/box-plot/box-plot.component.css b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.css new file mode 100644 index 00000000..e69de29b 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 @@ +

box-plot works!

diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts new file mode 100644 index 00000000..759e7c5e --- /dev/null +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BoxPlotComponent } from './box-plot.component'; + +describe('BoxPlotComponent', () => { + let component: BoxPlotComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ BoxPlotComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BoxPlotComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css new file mode 100644 index 00000000..e69de29b 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 @@ +
+ + + +
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts new file mode 100644 index 00000000..0c5e7ef5 --- /dev/null +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LineChartComponent } from './line-chart.component'; + +describe('LineChartComponent', () => { + let component: LineChartComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LineChartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LineChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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/_charts/mixed-chart/mixed-chart.component.css b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.css new file mode 100644 index 00000000..e69de29b 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 @@ + + 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; + + 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/_charts/pie-chart/pie-chart.component.css b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.css new file mode 100644 index 00000000..e69de29b 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 @@ +

pie-chart works!

diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts new file mode 100644 index 00000000..64f36b7d --- /dev/null +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PieChartComponent } from './pie-chart.component'; + +describe('PieChartComponent', () => { + let component: PieChartComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PieChartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PieChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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/_charts/point-linechart/point-linechart.component.css b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.css new file mode 100644 index 00000000..e69de29b 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 @@ +Point line chart: + diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts new file mode 100644 index 00000000..fe08fe7c --- /dev/null +++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PointLinechartComponent } from './point-linechart.component'; + +describe('PointLinechartComponent', () => { + let component: PointLinechartComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PointLinechartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PointLinechartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 @@ +

Scatter chart:

+
+ +
\ 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; + + 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.css b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css deleted file mode 100644 index e69de29b..00000000 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 @@ -
-
-
-
- - - - -
- -
- - - - -
-
-
-
- - - - - - - -
- -
-
- -
- -
- -
- -
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; - - 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(); - @ViewChild(DatatableComponent) datatable!: DatatableComponent; - - delimiterOptions: Array = [",", ";", "\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 @@ -
- -
-
- diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts b/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts deleted file mode 100644 index cb07ef1d..00000000 --- a/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AnnvisualComponent } from './annvisual.component'; - -describe('AnnvisualComponent', () => { - let component: AnnvisualComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ AnnvisualComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(AnnvisualComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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 @@ -

- {{scroll}} -

-
-
-
- -

{{item.name}}

- -
-
-
\ 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; - - 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.css b/frontend/src/app/_elements/carousel/carousel.component.css deleted file mode 100644 index e69de29b..00000000 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 @@ -
-
-
- - Unknown item type - - - - - - - - - -
-
-
\ No newline at end of file diff --git a/frontend/src/app/_elements/carousel/carousel.component.spec.ts b/frontend/src/app/_elements/carousel/carousel.component.spec.ts deleted file mode 100644 index 9196e044..00000000 --- a/frontend/src/app/_elements/carousel/carousel.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CarouselComponent } from './carousel.component'; - -describe('CarouselComponent', () => { - let component: CarouselComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ CarouselComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(CarouselComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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 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 @@ +

column-table works!

diff --git a/frontend/src/app/_elements/column-table/column-table.component.spec.ts b/frontend/src/app/_elements/column-table/column-table.component.spec.ts new file mode 100644 index 00000000..360a8109 --- /dev/null +++ b/frontend/src/app/_elements/column-table/column-table.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ColumnTableComponent } from './column-table.component'; + +describe('ColumnTableComponent', () => { + let component: ColumnTableComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ColumnTableComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ColumnTableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 @@ -
- - - -
- -

ili

- -
- -
- -
-
-
-
    -
  • - -
    • -
-
-
- -
-
- - - - -
\ No newline at end of file diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.spec.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.spec.ts deleted file mode 100644 index 5601b57b..00000000 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { DatasetLoadComponent } from './dataset-load.component'; - -describe('DatasetLoadComponent', () => { - let component: DatasetLoadComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ DatasetLoadComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(DatasetLoadComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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(); - - @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 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 @@ +

form-dataset works!

diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.spec.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.spec.ts new file mode 100644 index 00000000..51491c58 --- /dev/null +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FormDatasetComponent } from './form-dataset.component'; + +describe('FormDatasetComponent', () => { + let component: FormDatasetComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ FormDatasetComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(FormDatasetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 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 @@ +

form-model works!

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; + + 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 @@ -
-
- -
Naziv
-
{{dataset.name}}
-
-
- Opis -

{{dataset.description}}

-
-
-
-

{{dataset.extension}}

-
-
- {{visibleicon}} -
-
- {{accessibleicon}} -
-
-
-
- -
- - - - -
{{column.columnName}}
-
-
- - - -
calendar_today Kreirano{{dataset.dateCreated |date}}
edit_calendar Poslednja izmena{{dataset.lastUpdated |date}}
- -
-
- -
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts b/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts deleted file mode 100644 index 603889b2..00000000 --- a/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ItemDatasetComponent } from './item-dataset.component'; - -describe('ItemDatasetComponent', () => { - let component: ItemDatasetComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ItemDatasetComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ItemDatasetComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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.css b/frontend/src/app/_elements/item-experiment/item-experiment.component.css deleted file mode 100644 index e69de29b..00000000 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 @@ -
-
- Naziv eksperimenta: {{experiment.name}} -
-
-

- Opis: {{experiment.description}} -

-
-
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.spec.ts b/frontend/src/app/_elements/item-experiment/item-experiment.component.spec.ts deleted file mode 100644 index 1da7d05d..00000000 --- a/frontend/src/app/_elements/item-experiment/item-experiment.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ItemExperimentComponent } from './item-experiment.component'; - -describe('ItemExperimentComponent', () => { - let component: ItemExperimentComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ItemExperimentComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ItemExperimentComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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 @@ -
-
- -
Naziv
-
{{model.name}}
-
-
- -
- Opis
-

- {{model.description}} -

-
- -
- - - -
calendar_today Kreirano{{model.dateCreated |date}}
edit_calendar Poslednja izmena{{model.lastUpdated |date}}
-
- -
- -
- -
- - - - - - - - - - - - - - - - - -
Tip problema{{model.type}}
Optimizator{{model.optimizer}}
Funkcija gubitka{{model.lossFunction}}
Batch size{{model.batchSize}}
Broj epoha{{model.epochs}}
- -
-
\ 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/item-model/item-model.component.spec.ts deleted file mode 100644 index f696a160..00000000 --- a/frontend/src/app/_elements/item-model/item-model.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ItemModelComponent } from './item-model.component'; - -describe('ItemModelComponent', () => { - let component: ItemModelComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ItemModelComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ItemModelComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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.css b/frontend/src/app/_elements/item-predictor/item-predictor.component.css deleted file mode 100644 index e69de29b..00000000 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 @@ -
-
- -
Prediktor
- -
-
- Opis
-

- {{predictor.description}} -

- - Ulazne kolone -
- - - - - -
{{column}}
-
- Izlazna kolona: {{predictor.output}} -
-
- - -
calendar_today Kreirano{{predictor.dateCreated |date}}
-
-
-
- - -
-
\ 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; - - 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 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 @@ +
+ + + +
\ 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; + + 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 @@ -
-
- -

ili

- -
- -
- -
-
-
-
    -
  • - - -
    • -
-
- -
-
-
- - -
-
- -
- - -
-
- -
- -
-
- -
-

Parametri treniranja modela:

-
- -
-
-
- -
-
- -
-
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
-
- -
-
- -
-
-
- -
-
- - - {{newModel.batchSize}} - -
- -
-
-
- -
-
- -
-
-
- -
- -
- -

Aktivacione funkcije:

- -
-
-
- -
-
-
-
-
- #{{i+1}} -
- -
-
-
-
-
- -
-
- -
-
-
-
-
- -
-

Izaberite metrike:

-
- -
- - - -
-
-
- -
-
- -
-
-
-
\ No newline at end of file diff --git a/frontend/src/app/_elements/model-load/model-load.component.spec.ts b/frontend/src/app/_elements/model-load/model-load.component.spec.ts deleted file mode 100644 index 1dafd966..00000000 --- a/frontend/src/app/_elements/model-load/model-load.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ModelLoadComponent } from './model-load.component'; - -describe('ModelLoadComponent', () => { - let component: ModelLoadComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ModelLoadComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ModelLoadComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); 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(); - - 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 = 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.css b/frontend/src/app/_elements/select-item-list/select-item-list.component.css deleted file mode 100644 index e69de29b..00000000 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 @@ -

select-item-list works!

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; - - 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 { - } - -} diff --git a/frontend/src/app/_pages/archive/archive.component.css b/frontend/src/app/_pages/archive/archive.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_pages/archive/archive.component.html b/frontend/src/app/_pages/archive/archive.component.html new file mode 100644 index 00000000..44c4d9c2 --- /dev/null +++ b/frontend/src/app/_pages/archive/archive.component.html @@ -0,0 +1 @@ +

archive works!

diff --git a/frontend/src/app/_pages/archive/archive.component.spec.ts b/frontend/src/app/_pages/archive/archive.component.spec.ts new file mode 100644 index 00000000..41fc8e77 --- /dev/null +++ b/frontend/src/app/_pages/archive/archive.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ArchiveComponent } from './archive.component'; + +describe('ArchiveComponent', () => { + let component: ArchiveComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ArchiveComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ArchiveComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/archive/archive.component.ts b/frontend/src/app/_pages/archive/archive.component.ts new file mode 100644 index 00000000..e3ffd6e2 --- /dev/null +++ b/frontend/src/app/_pages/archive/archive.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-archive', + templateUrl: './archive.component.html', + styleUrls: ['./archive.component.css'] +}) +export class ArchiveComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.css b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.css deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.html b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.html deleted file mode 100644 index fa38a1bc..00000000 --- a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.html +++ /dev/null @@ -1 +0,0 @@ -

browse-datasets works!

diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.spec.ts b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.spec.ts deleted file mode 100644 index fda74dbe..00000000 --- a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { BrowseDatasetsComponent } from './browse-datasets.component'; - -describe('BrowseDatasetsComponent', () => { - let component: BrowseDatasetsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ BrowseDatasetsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(BrowseDatasetsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts b/frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts deleted file mode 100644 index dba6c25e..00000000 --- a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-browse-datasets', - templateUrl: './browse-datasets.component.html', - styleUrls: ['./browse-datasets.component.css'] -}) -export class BrowseDatasetsComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css deleted file mode 100644 index b4ac9669..00000000 --- a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.css +++ /dev/null @@ -1,7 +0,0 @@ -#container { - border-radius: 8px; -} - -#wrapper { - color: #003459; -} \ No newline at end of file diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html deleted file mode 100644 index 27e06884..00000000 --- a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.html +++ /dev/null @@ -1,40 +0,0 @@ - -
- -
-
- -
-

- - -
- -
-
-
-
-

{{predictor.name}}

-

{{predictor.description}}

- Iskoristi -
-
- Kreirao: {{predictor.username}}
- Datum kreiranja: {{predictor.dateCreated |date}} -
-
-
- - -
-
-

Nema rezultata

-
-
- -
- - - - -
\ No newline at end of file diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts deleted file mode 100644 index 6d13fedf..00000000 --- a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { BrowsePredictorsComponent } from './browse-predictors.component'; - -describe('BrowsePredictorsComponent', () => { - let component: BrowsePredictorsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ BrowsePredictorsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(BrowsePredictorsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts b/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts deleted file mode 100644 index 891b3cab..00000000 --- a/frontend/src/app/_pages/browse-predictors/browse-predictors.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { PredictorsService } from 'src/app/_services/predictors.service'; -import Predictor from 'src/app/_data/Predictor'; -import {Router} from '@angular/router' -@Component({ - selector: 'app-browse-predictors', - templateUrl: './browse-predictors.component.html', - styleUrls: ['./browse-predictors.component.css'] -}) -export class BrowsePredictorsComponent implements OnInit { - - publicPredictors? :Predictor[]; - term: string=""; - constructor(private predictors: PredictorsService,private router:Router) { - this.predictors.getPublicPredictors().subscribe((predictors) => { - this.publicPredictors = predictors; - }); - } - - ngOnInit(): void { - } - openPredictor(id:string):void{ - this.router.navigate(['predict/'+id]); - }; - -} diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html new file mode 100644 index 00000000..bcecd284 --- /dev/null +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -0,0 +1 @@ +

experiment works!

diff --git a/frontend/src/app/_pages/experiment/experiment.component.spec.ts b/frontend/src/app/_pages/experiment/experiment.component.spec.ts new file mode 100644 index 00000000..fd2bbd30 --- /dev/null +++ b/frontend/src/app/_pages/experiment/experiment.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ExperimentComponent } from './experiment.component'; + +describe('ExperimentComponent', () => { + let component: ExperimentComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ExperimentComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ExperimentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts new file mode 100644 index 00000000..16de7351 --- /dev/null +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-experiment', + templateUrl: './experiment.component.html', + styleUrls: ['./experiment.component.css'] +}) +export class ExperimentComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.css b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.css deleted file mode 100644 index e69de29b..00000000 diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.html b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.html deleted file mode 100644 index 84f5ebaf..00000000 --- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.html +++ /dev/null @@ -1,38 +0,0 @@ - -
- -
-
- -
- -
- -
-
-
-
-

{{dataset.name}}

-

{{dataset.description}}

- Dodaj dataset -
-
- Kreirao: {{dataset.username}}
- Datum kreiranja: {{dataset.dateCreated |date}} -
-
-
- - -
-
-

Nema rezultata

-
-
- -
- - - - -
diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.spec.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.spec.ts deleted file mode 100644 index 6ab894fd..00000000 --- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { FilterDatasetsComponent } from './filter-datasets.component'; - -describe('FilterDatasetsComponent', () => { - let component: FilterDatasetsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ FilterDatasetsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(FilterDatasetsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts deleted file mode 100644 index 66b3755e..00000000 --- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { DatasetsService } from 'src/app/_services/datasets.service'; -import Dataset from 'src/app/_data/Dataset'; -import {Router} from '@angular/router' -import { JwtHelperService } from '@auth0/angular-jwt'; -import { CookieService } from 'ngx-cookie-service'; -import shared from 'src/app/Shared'; - -@Component({ - selector: 'app-filter-datasets', - templateUrl: './filter-datasets.component.html', - styleUrls: ['./filter-datasets.component.css'] -}) -export class FilterDatasetsComponent implements OnInit { - - shared = shared; - publicDatasets?: Dataset[]; - term: string = ""; - constructor(private datasets: DatasetsService,private router:Router, private cookie: CookieService) { - this.datasets.getPublicDatasets().subscribe((datasets) => { - this.publicDatasets = datasets; - }); - } - - ngOnInit(): void { - - } - addDataset(dataset: Dataset):void{ - //this.router.navigateByUrl('/predict?id='+id); - const helper = new JwtHelperService(); - const decodedToken = helper.decodeToken(this.cookie.get("token")); - const newDataset={...dataset}; - newDataset._id = ""; - newDataset.isPublic = false; - newDataset.lastUpdated = new Date(); - newDataset.uploaderId = decodedToken.uploaderId; - let name=prompt("Unesite naziv dataset-a",newDataset.name); - newDataset.name=name as string; - if(name!=null && name!="") - this.datasets.addDataset(newDataset).subscribe((response:string)=>{ - shared.openDialog("Obaveštenje", "Uspešno ste dodali dataset sa nazivom " + newDataset.name); - },(error)=>{ - shared.openDialog("Obaveštenje", "U svojoj kolekciji već imate dataset sa ovim imenom. Molimo Vas da unesete drugo ime."); - }); - - }; - -} diff --git a/frontend/src/app/_pages/home/home.component.ts b/frontend/src/app/_pages/home/home.component.ts index 0575c4c0..28ba2cbb 100644 --- a/frontend/src/app/_pages/home/home.component.ts +++ b/frontend/src/app/_pages/home/home.component.ts @@ -1,7 +1,6 @@ import { Component, OnInit } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; import Predictor from 'src/app/_data/Predictor'; -import { ItemDatasetComponent } from 'src/app/_elements/item-dataset/item-dataset.component'; import shared from 'src/app/Shared'; import { DatasetsService } from 'src/app/_services/datasets.service'; import { PredictorsService } from 'src/app/_services/predictors.service'; @@ -14,7 +13,6 @@ import { PredictorsService } from 'src/app/_services/predictors.service'; export class HomeComponent implements OnInit { publicDatasets: Dataset[] = []; - publicPredictors: Predictor[] = []; shared = shared; @@ -25,9 +23,6 @@ export class HomeComponent implements OnInit { this.publicDatasets[index] = (element); }) }); - this.predictorsService.getPublicPredictors().subscribe((predictors) => { - this.publicPredictors = predictors; - }); } ngOnInit(): void { diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.css b/frontend/src/app/_pages/my-datasets/my-datasets.component.css deleted file mode 100644 index 57889937..00000000 --- a/frontend/src/app/_pages/my-datasets/my-datasets.component.css +++ /dev/null @@ -1,8 +0,0 @@ -#header { - background-color: #003459; - padding-top: 20px; - padding-bottom: 15px; - text-align: center; - color: white; - border-radius: 5px; -} \ No newline at end of file diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.html b/frontend/src/app/_pages/my-datasets/my-datasets.component.html deleted file mode 100644 index 0c83dc85..00000000 --- a/frontend/src/app/_pages/my-datasets/my-datasets.component.html +++ /dev/null @@ -1,39 +0,0 @@ - -
-
-
- -
-
- -
-
- - -
-
-
-
- -
- -
-
-
-
-
-
-

Nema rezultata

-
-
- - -
- - - - - -
diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.spec.ts b/frontend/src/app/_pages/my-datasets/my-datasets.component.spec.ts deleted file mode 100644 index fc1fc3f3..00000000 --- a/frontend/src/app/_pages/my-datasets/my-datasets.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MyDatasetsComponent } from './my-datasets.component'; - -describe('MyDatasetsComponent', () => { - let component: MyDatasetsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ MyDatasetsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(MyDatasetsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_pages/my-datasets/my-datasets.component.ts b/frontend/src/app/_pages/my-datasets/my-datasets.component.ts deleted file mode 100644 index 8857e371..00000000 --- a/frontend/src/app/_pages/my-datasets/my-datasets.component.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import {Router} from '@angular/router'; -import { DatasetsService } from 'src/app/_services/datasets.service'; -import Dataset from 'src/app/_data/Dataset'; -import { JwtHelperService } from '@auth0/angular-jwt'; -import { CookieService } from 'ngx-cookie-service'; -import shared from 'src/app/Shared'; -import { share } from 'rxjs'; - -@Component({ - selector: 'app-my-datasets', - templateUrl: './my-datasets.component.html', - styleUrls: ['./my-datasets.component.css'] -}) -export class MyDatasetsComponent implements OnInit { - myDatasets: Dataset[] = []; - - constructor(private datasetsS : DatasetsService) { - - - - } - - ngOnInit(): void { - - this.datasetsS.getMyDatasets().subscribe((response) => { - this.myDatasets = response; - }, (error) => { - if (error.error == "Dataset with...") { - shared.openDialog("Greska", "Niste dobro uneli nesto"); - } - }); - } - -/* - editModel(): void{ - this.modelsS.editModel().subscribe(m => { - this.myModel = m; - - }) - } -*/ - -deleteThisDataset(dataset: Dataset): void{ - shared.openYesNoDialog('Brisanje seta podataka','Da li ste sigurni da želite da obrišete ovaj set podataka?',() => { - this.datasetsS.deleteDataset(dataset).subscribe((response) => { - this.getAllMyDatasets(); - }, (error) =>{ - if (error.error == "Dataset with name = {name} deleted") { - shared.openDialog("Greška","Greška pri brisanju dataseta!"); - } - }); - }); -} - - getAllMyDatasets(): void{ - this.datasetsS.getMyDatasets().subscribe(m => { - this.myDatasets = m; - }); - } - - -} diff --git a/frontend/src/app/_pages/my-models/my-models.component.css b/frontend/src/app/_pages/my-models/my-models.component.css deleted file mode 100644 index 19d29595..00000000 --- a/frontend/src/app/_pages/my-models/my-models.component.css +++ /dev/null @@ -1,12 +0,0 @@ -button{ - margin-left: 5%; - margin-right: 5%; -} -#header { - background-color: #003459; - padding-top: 20px; - padding-bottom: 15px; - text-align: center; - color: white; - border-radius: 5px; -} \ No newline at end of file diff --git a/frontend/src/app/_pages/my-models/my-models.component.html b/frontend/src/app/_pages/my-models/my-models.component.html deleted file mode 100644 index 9b281239..00000000 --- a/frontend/src/app/_pages/my-models/my-models.component.html +++ /dev/null @@ -1,43 +0,0 @@ - -
-
-
- -
-
- -
-
- - -
-
-
- - - - -
-
-
- - - -
-
-
-

Nema rezultata

-
-
- -
- - - - - -
diff --git a/frontend/src/app/_pages/my-models/my-models.component.spec.ts b/frontend/src/app/_pages/my-models/my-models.component.spec.ts deleted file mode 100644 index e431d04c..00000000 --- a/frontend/src/app/_pages/my-models/my-models.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MyModelsComponent } from './my-models.component'; - -describe('MyModelsComponent', () => { - let component: MyModelsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ MyModelsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(MyModelsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_pages/my-models/my-models.component.ts b/frontend/src/app/_pages/my-models/my-models.component.ts deleted file mode 100644 index d379fa69..00000000 --- a/frontend/src/app/_pages/my-models/my-models.component.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import shared from 'src/app/Shared'; -import Model from 'src/app/_data/Model'; -import { ModelsService } from 'src/app/_services/models.service'; - -@Component({ - selector: 'app-my-models', - templateUrl: './my-models.component.html', - styleUrls: ['./my-models.component.css'] -}) -export class MyModelsComponent implements OnInit { - myModels: Model[] = []; - //myModel: Model; - - constructor(private modelsS : ModelsService, private router : Router) { - - - - } - - ngOnInit(): void { - this.getAllMyModels(); - - } -/* - editModel(): void{ - this.modelsS.editModel().subscribe(m => { - this.myModel = m; - - }) - } -*/ - -deleteThisModel(model: Model): void{ - shared.openYesNoDialog('Brisanje seta podataka','Da li ste sigurni da želite da obrišete model?',() => { - this.modelsS.deleteModel(model).subscribe((response) => { - this.getAllMyModels(); - }, (error) =>{ - if (error.error == "Model with name = {name} deleted") { - shared.openDialog("Obaveštenje", "Greška prilikom brisanja modela."); - } - }); - }); -} - - -useThisModel(model: Model): void{ - - this.router.navigate(['/training']) - -} - getAllMyModels(): void{ - this.modelsS.getMyModels().subscribe(m => { - this.myModels = m; - }); - } - -} diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.css b/frontend/src/app/_pages/my-predictors/my-predictors.component.css deleted file mode 100644 index ccb9fb7b..00000000 --- a/frontend/src/app/_pages/my-predictors/my-predictors.component.css +++ /dev/null @@ -1,13 +0,0 @@ -#header { - background-color: #003459; - padding-top: 20px; - padding-bottom: 15px; - text-align: center; - color: white; - border-radius: 5px; -} - -.row{ - margin-top: 10px; - margin-bottom: 30px; -} \ No newline at end of file diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.html b/frontend/src/app/_pages/my-predictors/my-predictors.component.html deleted file mode 100644 index 31fa786c..00000000 --- a/frontend/src/app/_pages/my-predictors/my-predictors.component.html +++ /dev/null @@ -1,23 +0,0 @@ - -
-
-
- -
-
-
-
- -
- -
-
-
-
-
-
- - - diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.spec.ts b/frontend/src/app/_pages/my-predictors/my-predictors.component.spec.ts deleted file mode 100644 index 37dddf6d..00000000 --- a/frontend/src/app/_pages/my-predictors/my-predictors.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { MyPredictorsComponent } from './my-predictors.component'; - -describe('MyPredictorsComponent', () => { - let component: MyPredictorsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ MyPredictorsComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(MyPredictorsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts deleted file mode 100644 index 4dc5300d..00000000 --- a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import Predictor from 'src/app/_data/Predictor'; -import { PredictorsService } from 'src/app/_services/predictors.service'; -import shared from 'src/app/Shared'; -@Component({ - selector: 'app-my-predictors', - templateUrl: './my-predictors.component.html', - styleUrls: ['./my-predictors.component.css'] -}) -export class MyPredictorsComponent implements OnInit { - predictors: Predictor[] = []; - constructor(private predictorsS : PredictorsService) { - } - ngOnInit(): void { - this.predictorsS.getMyPredictors().subscribe((response) => { - this.predictors = response; - }, (error) => { - if (error.error == "Predictor with...") { - shared.openDialog("Greska", "Greska"); - } - }); - } - - deleteThisPredictor(predictor: Predictor): void{ - shared.openYesNoDialog('Brisanje prediktora','Da li ste sigurni da želite da obrišete prediktor?',() => { - this.predictorsS.deletePredictor(predictor).subscribe((response) => { - this.getAllMyPredictors(); - }, (error) =>{ - if (error.error == "Predictor with name = {name} deleted") { - shared.openDialog("Obaveštenje", "Greška prilikom brisanja prediktora."); - } - }); - }); - } - - getAllMyPredictors(): void{ - this.predictorsS.getMyPredictors().subscribe(p => { - this.predictors = p; - }); - } - - -} diff --git a/frontend/src/app/_pages/predict/predict.component.css b/frontend/src/app/_pages/predict/predict.component.css deleted file mode 100644 index dab059a5..00000000 --- a/frontend/src/app/_pages/predict/predict.component.css +++ /dev/null @@ -1,3 +0,0 @@ -#wrapper { - color: #003459; -} \ No newline at end of file diff --git a/frontend/src/app/_pages/predict/predict.component.html b/frontend/src/app/_pages/predict/predict.component.html deleted file mode 100644 index 13afa8e4..00000000 --- a/frontend/src/app/_pages/predict/predict.component.html +++ /dev/null @@ -1,73 +0,0 @@ - -
-
-
- - - -
- -
- -

Izabrani prediktor:

-
- -
-
- -
- - -
-
- -
- -
-
- -
-
-
- - -
- - -
-
- -

Popunite ulazne kolone:

-
-
-
- - - -
- -
-
- -
- -
-
- -
- -
-
- -
- -
- - - -
-
\ No newline at end of file diff --git a/frontend/src/app/_pages/predict/predict.component.spec.ts b/frontend/src/app/_pages/predict/predict.component.spec.ts deleted file mode 100644 index 65871ecc..00000000 --- a/frontend/src/app/_pages/predict/predict.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { PredictComponent } from './predict.component'; - -describe('PredictComponent', () => { - let component: PredictComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ PredictComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(PredictComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_pages/predict/predict.component.ts b/frontend/src/app/_pages/predict/predict.component.ts deleted file mode 100644 index 39dec0ae..00000000 --- a/frontend/src/app/_pages/predict/predict.component.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute } from '@angular/router'; -import Predictor from 'src/app/_data/Predictor'; -import { PredictorsService } from 'src/app/_services/predictors.service'; -import shared from 'src/app/Shared'; - -@Component({ - selector: 'app-predict', - templateUrl: './predict.component.html', - styleUrls: ['./predict.component.css'] -}) -export class PredictComponent implements OnInit { - - inputs : Column[] = []; - - - predictor:Predictor; - constructor(private predictS : PredictorsService, private route: ActivatedRoute) { - this.predictor = new Predictor(); - } - - ngOnInit(): void { - this.route.params.subscribe(url => { - this.predictS.getPredictor(url["id"]).subscribe(p => { - - this.predictor = p; - this.predictor.inputs.forEach((p,index)=> this.inputs[index] = new Column(p, "")); - }) - }); - } - - usePredictor(): void{ - this.predictS.usePredictor(this.predictor, this.inputs).subscribe(p => { - shared.openDialog("Obaveštenje", "Prediktor je uspešno poslat na probu."); //pisalo je "na treniranje" ?? - }) - } -} - - -export class Column { - constructor( - public name : string, - public value : (number | string)){ - } -} \ No newline at end of file diff --git a/frontend/src/app/_services/auth.service.ts b/frontend/src/app/_services/auth.service.ts index ef340684..b7d28d77 100644 --- a/frontend/src/app/_services/auth.service.ts +++ b/frontend/src/app/_services/auth.service.ts @@ -3,7 +3,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http'; import { JwtHelperService } from '@auth0/angular-jwt'; import { CookieService } from 'ngx-cookie-service'; import shared from '../Shared'; -import { Configuration } from '../configuration.service'; +import { Configuration } from './configuration.service'; const jwtHelper = new JwtHelperService(); @@ -52,7 +52,7 @@ export class AuthService { var property = jwtHelper.decodeToken(this.cookie.get('token')); var username = property['name']; if (username != "") { - + this.refresher = setTimeout(() => { this.http.post(`${Configuration.settings.apiURL}/auth/renewJwt`, {}, { headers: this.authHeader(), responseType: 'text' }).subscribe((response) => { this.authenticate(response); diff --git a/frontend/src/app/_services/configuration.service.spec.ts b/frontend/src/app/_services/configuration.service.spec.ts new file mode 100644 index 00000000..4b9322b5 --- /dev/null +++ b/frontend/src/app/_services/configuration.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { Configuration as ConfigurationService } from './configuration.service'; + +describe('ConfigurationService', () => { + let service: ConfigurationService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ConfigurationService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_services/configuration.service.ts b/frontend/src/app/_services/configuration.service.ts new file mode 100644 index 00000000..cda1091a --- /dev/null +++ b/frontend/src/app/_services/configuration.service.ts @@ -0,0 +1,20 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { IConfig } from '../_data/IConfig' + +@Injectable() +export class Configuration { + static settings: IConfig; + constructor(private http: HttpClient) { } + load() { + const jsonFile = 'assets/config.json'; + return new Promise((resolve, reject) => { + this.http.get(jsonFile).toPromise().then((response) => { + Configuration.settings = response; + resolve(); + }).catch((response: any) => { + reject(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`); + }); + }); + } +} \ No newline at end of file diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts index b2272f0a..ff96c39b 100644 --- a/frontend/src/app/_services/datasets.service.ts +++ b/frontend/src/app/_services/datasets.service.ts @@ -1,7 +1,7 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; -import { Configuration } from '../configuration.service'; +import { Configuration } from './configuration.service'; import Dataset from '../_data/Dataset'; import { AuthService } from './auth.service'; diff --git a/frontend/src/app/_services/predictors.service.ts b/frontend/src/app/_services/predictors.service.ts index a24ee708..e2033e3e 100644 --- a/frontend/src/app/_services/predictors.service.ts +++ b/frontend/src/app/_services/predictors.service.ts @@ -1,9 +1,8 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; -import { Configuration } from '../configuration.service'; +import { Configuration } from './configuration.service'; import Predictor from '../_data/Predictor'; -import { Column } from '../_pages/predict/predict.component'; import { AuthService } from './auth.service'; @Injectable({ @@ -31,3 +30,10 @@ export class PredictorsService { return this.http.get(`${Configuration.settings.apiURL}/predictor/mypredictors`, { headers: this.authService.authHeader() }); } } + +export class Column { + constructor( + public name: string, + public value: (number | string)) { + } +} \ No newline at end of file diff --git a/frontend/src/app/_services/signal-r.service.ts b/frontend/src/app/_services/signal-r.service.ts index b279b5ca..234636fe 100644 --- a/frontend/src/app/_services/signal-r.service.ts +++ b/frontend/src/app/_services/signal-r.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import * as signalR from "@microsoft/signalr"; import { CookieService } from 'ngx-cookie-service'; -import { Configuration } from '../configuration.service'; +import { Configuration } from './configuration.service'; @Injectable({ providedIn: 'root' }) diff --git a/frontend/src/app/_services/user-info.service.ts b/frontend/src/app/_services/user-info.service.ts index 5d3394f6..8efeb903 100644 --- a/frontend/src/app/_services/user-info.service.ts +++ b/frontend/src/app/_services/user-info.service.ts @@ -1,7 +1,7 @@ import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; -import { Configuration } from '../configuration.service'; +import { Configuration } from './configuration.service'; import User from '../_data/User'; import { AuthService } from './auth.service'; diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 4ffec95c..cd742cfc 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -3,33 +3,16 @@ import { RouterModule, Routes } from '@angular/router'; import { AuthGuardService } from './_services/auth-guard.service'; import { HomeComponent } from './_pages/home/home.component'; -import { MyDatasetsComponent } from './_pages/my-datasets/my-datasets.component'; -import { MyModelsComponent } from './_pages/my-models/my-models.component'; -import { MyPredictorsComponent } from './_pages/my-predictors/my-predictors.component'; -import { BrowsePredictorsComponent } from './_pages/browse-predictors/browse-predictors.component'; -import { BrowseDatasetsComponent } from './_pages/browse-datasets/browse-datasets.component'; -import { SettingsComponent } from './_pages/settings/settings.component'; import { ProfileComponent } from './_pages/profile/profile.component'; -import { PredictComponent } from './_pages/predict/predict.component'; -import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-datasets.component'; -import { ExperimentComponent } from './experiment/experiment.component'; -import { TrainingComponent } from './training/training.component'; import { PlaygroundComponent } from './_pages/playground/playground.component'; +import { ExperimentComponent } from './_pages/experiment/experiment.component'; +import { ArchiveComponent } from './_pages/archive/archive.component'; const routes: Routes = [ { path: '', component: HomeComponent, data: { title: 'Početna strana' } }, - /*{ path: 'add-model', component: AddModelComponent, data: { title: 'Dodaj model' } },*/ - { path: 'experiment', component: ExperimentComponent, data: { title: 'Dodaj eksperiment' } }, - { path: 'training', component: TrainingComponent, data: { title: 'Treniraj model' } }, - { path: 'training/:id', component: TrainingComponent, data: { title: 'Treniraj model' } }, - { path: 'my-datasets', component: MyDatasetsComponent, canActivate: [AuthGuardService], data: { title: 'Moji izvori podataka' } }, - { path: 'my-models', component: MyModelsComponent, canActivate: [AuthGuardService], data: { title: 'Moji modeli' } }, - { path: 'my-predictors', component: MyPredictorsComponent, canActivate: [AuthGuardService], data: { title: 'Moji trenirani modeli' } }, - { path: 'settings', component: SettingsComponent, canActivate: [AuthGuardService], data: { title: 'Podešavanja' } }, + { path: 'experiment', component: ExperimentComponent, data: { title: 'Eksperiment' } }, + { path: 'archive', component: ArchiveComponent, data: { title: 'Arhiva' } }, { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService], data: { title: 'Profil' } }, - { path: 'browse-datasets', component: FilterDatasetsComponent, data: { title: 'Javni izvori podataka' } }, - { path: 'browse-predictors', component: BrowsePredictorsComponent, data: { title: 'Javni trenirani modeli' } }, - { path: 'predict/:id', component: PredictComponent, data: { title: 'Predvidi vrednosti' } }, { path: 'playground', component: PlaygroundComponent, data: { title: 'Zabava' } } ]; diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 7862c872..1bedfbfb 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -8,51 +8,40 @@ import { MatIconModule } from '@angular/material/icon'; import { NgMultiSelectDropDownModule } from 'ng-multiselect-dropdown'; import { NgChartsModule } from 'ng2-charts'; import { Ng2SearchPipeModule } from 'ng2-search-filter'; -import { AppComponent } from './app.component'; import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; -import { DatasetLoadComponent } from './_elements/dataset-load/dataset-load.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { LoginModalComponent } from './_modals/login-modal/login-modal.component'; import { ReactiveFormsModule } from '@angular/forms'; -import { RegisterModalComponent } from './_modals/register-modal/register-modal.component'; - +import { AppComponent } from './app.component'; +// Modules and modals +import { Configuration } from './_services/configuration.service'; import { MaterialModule } from './material.module'; +import { LoginModalComponent } from './_modals/login-modal/login-modal.component'; +import { RegisterModalComponent } from './_modals/register-modal/register-modal.component'; +import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component'; +import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.component'; +// Pages import { HomeComponent } from './_pages/home/home.component'; -import { NavbarComponent } from './_elements/navbar/navbar.component'; -import { ItemPredictorComponent } from './_elements/item-predictor/item-predictor.component'; -import { ItemDatasetComponent } from './_elements/item-dataset/item-dataset.component'; -import { CarouselComponent } from './_elements/carousel/carousel.component'; -import { SettingsComponent } from './_pages/settings/settings.component'; import { ProfileComponent } from './_pages/profile/profile.component'; -import { MyPredictorsComponent } from './_pages/my-predictors/my-predictors.component'; -import { MyDatasetsComponent } from './_pages/my-datasets/my-datasets.component'; -import { MyModelsComponent } from './_pages/my-models/my-models.component'; -import { BrowseDatasetsComponent } from './_pages/browse-datasets/browse-datasets.component'; -import { BrowsePredictorsComponent } from './_pages/browse-predictors/browse-predictors.component'; -import { PredictComponent } from './_pages/predict/predict.component'; -import { ScatterchartComponent } from './scatterchart/scatterchart.component'; -import { BarchartComponent } from './barchart/barchart.component'; +import { ExperimentComponent } from './_pages/experiment/experiment.component'; +import { PlaygroundComponent } from './_pages/playground/playground.component'; +import { ArchiveComponent } from './_pages/archive/archive.component'; +// Charts +import { ScatterchartComponent } from './_elements/_charts/scatterchart/scatterchart.component'; +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'; +// Elements +import { NavbarComponent } from './_elements/navbar/navbar.component'; import { NotificationsComponent } from './_elements/notifications/notifications.component'; import { DatatableComponent } from './_elements/datatable/datatable.component'; -import { FilterDatasetsComponent } from './_pages/filter-datasets/filter-datasets.component'; import { ReactiveBackgroundComponent } from './_elements/reactive-background/reactive-background.component'; -import { ItemModelComponent } from './_elements/item-model/item-model.component'; -import { AnnvisualComponent } from './_elements/annvisual/annvisual.component'; -import { ExperimentComponent } from './experiment/experiment.component'; import { LoadingComponent } from './_elements/loading/loading.component'; -import { ModelLoadComponent } from './_elements/model-load/model-load.component'; -import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component'; -import { AddNewDatasetComponent } from './_elements/add-new-dataset/add-new-dataset.component'; import { GraphComponent } from './_elements/graph/graph.component'; -import { TrainingComponent } from './training/training.component'; -import { ItemExperimentComponent } from './_elements/item-experiment/item-experiment.component'; -import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.component'; -import { Configuration } from './configuration.service'; -import { PlaygroundComponent } from './_pages/playground/playground.component'; import { GradientBackgroundComponent } from './_elements/gradient-background/gradient-background.component'; -import { CarouselVerticalComponent } from './_elements/carousel-vertical/carousel-vertical.component'; -import { SelectItemListComponent } from './_elements/select-item-list/select-item-list.component'; import { PlaylistComponent } from './_elements/playlist/playlist.component'; +import { FormDatasetComponent } from './_elements/form-dataset/form-dataset.component'; +import { FormModelComponent } from './_elements/form-model/form-model.component'; +import { ColumnTableComponent } from './_elements/column-table/column-table.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); @@ -60,44 +49,30 @@ export function initializeApp(appConfig: Configuration) { @NgModule({ declarations: [ AppComponent, - DatasetLoadComponent, LoginModalComponent, RegisterModalComponent, HomeComponent, NavbarComponent, - ItemPredictorComponent, - ItemDatasetComponent, - CarouselComponent, - SettingsComponent, ProfileComponent, - MyPredictorsComponent, - MyDatasetsComponent, - MyModelsComponent, - BrowseDatasetsComponent, - BrowsePredictorsComponent, - PredictComponent, ScatterchartComponent, BarchartComponent, NotificationsComponent, DatatableComponent, - FilterDatasetsComponent, ReactiveBackgroundComponent, - ItemModelComponent, - AnnvisualComponent, ExperimentComponent, LoadingComponent, - ModelLoadComponent, AlertDialogComponent, - AddNewDatasetComponent, GraphComponent, - TrainingComponent, - ItemExperimentComponent, YesNoDialogComponent, PlaygroundComponent, GradientBackgroundComponent, - CarouselVerticalComponent, - SelectItemListComponent, - PlaylistComponent + PlaylistComponent, + ArchiveComponent, + FormDatasetComponent, + FormModelComponent, + ColumnTableComponent, + PieChartComponent, + BoxPlotComponent ], imports: [ BrowserModule, diff --git a/frontend/src/app/barchart/barchart.component.css b/frontend/src/app/barchart/barchart.component.css deleted file mode 100644 index c3634c9f..00000000 --- a/frontend/src/app/barchart/barchart.component.css +++ /dev/null @@ -1,6 +0,0 @@ -#divBarChart{ - background-color: beige; - display: block; - width: 400px; - height: 200px; -} diff --git a/frontend/src/app/barchart/barchart.component.html b/frontend/src/app/barchart/barchart.component.html deleted file mode 100644 index 48b7bd3e..00000000 --- a/frontend/src/app/barchart/barchart.component.html +++ /dev/null @@ -1,4 +0,0 @@ -

Bar chart:

-
- -
\ No newline at end of file diff --git a/frontend/src/app/barchart/barchart.component.spec.ts b/frontend/src/app/barchart/barchart.component.spec.ts deleted file mode 100644 index 8b346d1c..00000000 --- a/frontend/src/app/barchart/barchart.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { BarchartComponent } from './barchart.component'; - -describe('BarchartComponent', () => { - let component: BarchartComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ BarchartComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(BarchartComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/barchart/barchart.component.ts b/frontend/src/app/barchart/barchart.component.ts deleted file mode 100644 index def64b7d..00000000 --- a/frontend/src/app/barchart/barchart.component.ts +++ /dev/null @@ -1,54 +0,0 @@ -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/configuration.service.spec.ts b/frontend/src/app/configuration.service.spec.ts deleted file mode 100644 index ec51dfa5..00000000 --- a/frontend/src/app/configuration.service.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { TestBed } from '@angular/core/testing'; - -import { ConfigurationService } from './configuration.service'; - -describe('ConfigurationService', () => { - let service: ConfigurationService; - - beforeEach(() => { - TestBed.configureTestingModule({}); - service = TestBed.inject(ConfigurationService); - }); - - it('should be created', () => { - expect(service).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/configuration.service.ts b/frontend/src/app/configuration.service.ts deleted file mode 100644 index 4d2b0987..00000000 --- a/frontend/src/app/configuration.service.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpClient } from '@angular/common/http'; -import { IConfig } from '../app/_data/IConfig' - -@Injectable() -export class Configuration { - static settings: IConfig; - constructor(private http: HttpClient) { } - load() { - const jsonFile = 'assets/config.json'; - return new Promise((resolve, reject) => { - this.http.get(jsonFile).toPromise().then((response) => { - Configuration.settings = response; - resolve(); - }).catch((response: any) => { - reject(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`); - }); - }); - } -} \ No newline at end of file diff --git a/frontend/src/app/experiment/experiment.component.css b/frontend/src/app/experiment/experiment.component.css deleted file mode 100644 index 4a3d7741..00000000 --- a/frontend/src/app/experiment/experiment.component.css +++ /dev/null @@ -1,43 +0,0 @@ -#header { - background-color: #003459; - padding-top: 30px; - padding-bottom: 20px; -} - -#header h1 { - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; - text-align: center; - color: white; -} - -#container { - border-radius: 8px; -} - -#wrapper { - color: #003459; -} - -.btnType1 { - background-color: #003459; - color: white; -} - -.btnType2 { - background-color: white; - color: #003459; - border-color: #003459; -} - -.selectedDatasetClass { - /*border-color: 2px solid #003459;*/ - background-color: lightblue; -} - -ul li:hover { - background-color: lightblue; -} - -h2 { - color: #003459; -} \ No newline at end of file diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html deleted file mode 100644 index 5b3b2c43..00000000 --- a/frontend/src/app/experiment/experiment.component.html +++ /dev/null @@ -1,243 +0,0 @@ - -
-
- -
- Izvor podataka - arrow_forward - Preprocesiranje - arrow_forward - Dodaj eksperiment -
- - -
-
\ No newline at end of file diff --git a/frontend/src/app/experiment/experiment.component.spec.ts b/frontend/src/app/experiment/experiment.component.spec.ts deleted file mode 100644 index fd2bbd30..00000000 --- a/frontend/src/app/experiment/experiment.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ExperimentComponent } from './experiment.component'; - -describe('ExperimentComponent', () => { - let component: ExperimentComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ExperimentComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ExperimentComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts deleted file mode 100644 index 036db326..00000000 --- a/frontend/src/app/experiment/experiment.component.ts +++ /dev/null @@ -1,221 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith, Encoding } from '../_data/Experiment'; -import Model from '../_data/Model'; -import Dataset, { ColumnInfo } from '../_data/Dataset'; -import { ModelsService } from '../_services/models.service'; -import Shared from '../Shared'; -import { ExperimentsService } from '../_services/experiments.service'; -import { ColumnEncoding } from '../_data/Experiment'; - -@Component({ - selector: 'app-experiment', - templateUrl: './experiment.component.html', - styleUrls: ['./experiment.component.css'] -}) -export class ExperimentComponent implements OnInit { - - experiment: Experiment = new Experiment(); - selectedModel?: Model; - selectedDataset?: Dataset; - trainingResult: any; // any za sad, promeni kasnije - - NullValueOptions = NullValueOptions; - ReplaceWith = ReplaceWith; - Encoding = Encoding; - ColumnEncoding = ColumnEncoding; - Object = Object; - - selectedColumnsInfoArray: ColumnInfo[] = []; - selectedNotNullColumnsArray: string[] = []; - - tempTestSetDistribution = 90; - - constructor(private modelsService: ModelsService, private experimentsService: ExperimentsService) { - } - - ngOnInit(): void { - } - - updateDataset(dataset: Dataset) { - this.selectedDataset = dataset; - this.selectedColumnsInfoArray = this.selectedDataset.columnInfo; - this.selectedNotNullColumnsArray = []; - - this.resetColumnEncodings(); - console.log(this.experiment.encodings); - } - - resetColumnEncodings() { - this.experiment.encodings = []; - for (let i = 0; i < this.selectedColumnsInfoArray.length; i++) { - this.experiment.encodings.push(new ColumnEncoding(this.selectedColumnsInfoArray[i].columnName, Encoding.Label)); - } - } - - getInputById(id: string): HTMLInputElement { - return document.getElementById(id) as HTMLInputElement; - } - - arrayColumn = (arr: any[][], n: number) => [...this.dropEmptyString(new Set(arr.map(x => x[n])))]; - - dropEmptyString(set: Set): Set { - if (set.has("")) - set.delete(""); - if (set.has(null)) - set.delete(null); - if (set.has(undefined)) - set.delete(undefined); - return set; - } - - emptyFillTextInput(colName: string) { - (document.getElementById("fillText_" + colName)).value = ""; - } - - checkFillColRadio(colName: string) { - (document.getElementById("fillCol_" + colName)).checked = true; - } - - checkedColumnsChanged(checkedColumnInfo: ColumnInfo, buttonType: number) { //0-input,1-output - let col = this.selectedColumnsInfoArray.find(x => x.columnName == checkedColumnInfo.columnName); - if (buttonType == 0) { //inputCol - if (col == undefined) - this.selectedColumnsInfoArray.push(checkedColumnInfo); - else - this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.columnName != checkedColumnInfo.columnName); - } - else { //outputCol - if (col == undefined) //ako je vec cekiran neki output, samo dodaj sad ovaj, a taj output postaje input i ostaje u nizu - this.selectedColumnsInfoArray.push(checkedColumnInfo); - } - //console.log(this.selectedColumnsInfoArray); - } - - replace(event: Event, column: ColumnInfo) { - let option = (event.target).value; - - const input = (document.getElementById("fillText_" + column.columnName)); - if (column.isNumber) { - switch (option) { - case ReplaceWith.Max: - input.value = "" + column.max; - break; - case ReplaceWith.Min: - input.value = "" + column.min; - break; - case ReplaceWith.Mean: - input.value = "" + column.mean; - break; - case ReplaceWith.Median: - input.value = "" + column.median; - break; - case ReplaceWith.None: - break; - } - } else { - input.value = option; - } - } - - getSelectedColumnsArrayWithoutNullVals(): string[] { - let colNames: string[] = []; - - for (let i = 0; i < this.selectedColumnsInfoArray.length; i++) { - let oneColInfo = this.selectedColumnsInfoArray[i]; - if (oneColInfo.numNulls == 0) - colNames.push(oneColInfo.columnName); - } - return colNames; - } - - getNullValuesReplacersArray(): NullValReplacer[] { - let array: NullValReplacer[] = []; - - if (this.experiment.nullValues == NullValueOptions.Replace) { - - for (let i = 0; i < this.selectedColumnsInfoArray.length; i++) { - let oneColInfo = this.selectedColumnsInfoArray[i]; - - if (oneColInfo.numNulls > 0) { //ako kolona nema null vrednosti, ne dodajemo je u niz - if ((document.getElementById("delCol_" + oneColInfo.columnName)).checked) { - array.push({ - column: oneColInfo.columnName, - option: NullValueOptions.DeleteColumns, - value: "" - }); - } - else if ((document.getElementById("delRows_" + oneColInfo.columnName)).checked) { - array.push({ - column: oneColInfo.columnName, - option: NullValueOptions.DeleteRows, - value: "" - }); - } - else if (((document.getElementById("fillCol_" + oneColInfo.columnName)).checked)) { - array.push({ - column: oneColInfo.columnName, - option: NullValueOptions.Replace, - value: (document.getElementById("fillText_" + oneColInfo.columnName)).value - }); - } - } - } - } - return array; - } - - saveExperiment() { - if (this.selectedDataset == undefined) { - Shared.openDialog("Greška", "Izvor podataka nije izabran!"); - return; - } - if (this.experiment.outputColumn == '') { - Shared.openDialog("Greška", "Molimo Vas da izaberete izlaznu kolonu."); - return; - } - if (this.selectedColumnsInfoArray.length <= 1) { //jer izlazna je izabrana - Shared.openDialog("Greška", "Molimo Vas da izaberete ulazne kolone."); - return; - } - - this.experiment._id = ''; - this.experiment.uploaderId = ''; - this.experiment.datasetId = this.selectedDataset._id; - - let pom = this.selectedColumnsInfoArray.filter(x => x.columnName != this.experiment.outputColumn); - for (let i = 0; i < pom.length; i++) - this.experiment.inputColumns.push(pom[i].columnName); - - this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.numNulls > 0); //obavezno - this.experiment.nullValuesReplacers = this.getNullValuesReplacersArray(); - - this.experiment.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10; - - console.log("Eksperiment:", this.experiment); - - this.experimentsService.addExperiment(this.experiment).subscribe((response) => { - this.experiment = response; - - this.selectedColumnsInfoArray = []; - this.selectedNotNullColumnsArray = []; - this.experiment.encodings = []; - - Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran."); - }, (error) => { - if (error.error == "Experiment with this name exists") { - Shared.openDialog("Greška", "Eksperiment sa unetim nazivom već postoji u Vašoj kolekciji. Unesite neki drugi naziv."); - } - }); - } - - countSelectedNullCols(): number { - let counter: number = 0; - - for (let i = 0; i < this.selectedColumnsInfoArray.length; i++) { - let oneColInfo = this.selectedColumnsInfoArray[i]; - if (oneColInfo.numNulls > 0) - ++counter; - } - return counter; - } -} diff --git a/frontend/src/app/scatterchart/scatterchart.component.css b/frontend/src/app/scatterchart/scatterchart.component.css deleted file mode 100644 index 5735217e..00000000 --- a/frontend/src/app/scatterchart/scatterchart.component.css +++ /dev/null @@ -1,6 +0,0 @@ -#divScatterChart{ - background-color: beige; - display: block; - width: 400px; - height: 200px; -} \ No newline at end of file diff --git a/frontend/src/app/scatterchart/scatterchart.component.html b/frontend/src/app/scatterchart/scatterchart.component.html deleted file mode 100644 index 2b30fe1f..00000000 --- a/frontend/src/app/scatterchart/scatterchart.component.html +++ /dev/null @@ -1,4 +0,0 @@ -

Scatter chart:

-
- -
\ No newline at end of file diff --git a/frontend/src/app/scatterchart/scatterchart.component.spec.ts b/frontend/src/app/scatterchart/scatterchart.component.spec.ts deleted file mode 100644 index 1db81051..00000000 --- a/frontend/src/app/scatterchart/scatterchart.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ScatterchartComponent } from './scatterchart.component'; - -describe('ScatterchartComponent', () => { - let component: ScatterchartComponent; - let fixture: ComponentFixture; - - 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/scatterchart/scatterchart.component.ts b/frontend/src/app/scatterchart/scatterchart.component.ts deleted file mode 100644 index 9dfef4c3..00000000 --- a/frontend/src/app/scatterchart/scatterchart.component.ts +++ /dev/null @@ -1,39 +0,0 @@ -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/training/training.component.css b/frontend/src/app/training/training.component.css deleted file mode 100644 index 490c56b5..00000000 --- a/frontend/src/app/training/training.component.css +++ /dev/null @@ -1,39 +0,0 @@ -#header { - background-color: #003459; - padding-top: 30px; - padding-bottom: 20px; -} - -#header h1 { - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; - text-align: center; - color: white; -} - -#container { - border-radius: 8px; -} - -#wrapper { - color: #003459; -} - -.btnType1 { - background-color: #003459; - color: white; -} - -.btnType2 { - background-color: white; - color: #003459; - border-color: #003459; -} - -.selectedExperimentClass { - /*border-color: 2px solid #003459;*/ - background-color: lightblue; -} - -ul li:hover { - background-color: lightblue; -} \ No newline at end of file diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html deleted file mode 100644 index 9f2481a2..00000000 --- a/frontend/src/app/training/training.component.html +++ /dev/null @@ -1,43 +0,0 @@ - -
-
-
- -
- -

1. Izaberite eksperiment iz kolekcije

-
- -
-
-
    -
  • - -
    • -
-
- -

2. Izaberite model

- - -

3. Treniranje modela

- -
- -
- -

Rezultati treniranja

-
-

Rezultati treniranja:

-

- {{trainingResult}} -

-
-
- -
-
-
\ No newline at end of file diff --git a/frontend/src/app/training/training.component.spec.ts b/frontend/src/app/training/training.component.spec.ts deleted file mode 100644 index 1222cb40..00000000 --- a/frontend/src/app/training/training.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { TrainingComponent } from './training.component'; - -describe('TrainingComponent', () => { - let component: TrainingComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ TrainingComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(TrainingComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts deleted file mode 100644 index 027d2c22..00000000 --- a/frontend/src/app/training/training.component.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import Shared from '../Shared'; -import Experiment from '../_data/Experiment'; -import Model from '../_data/Model'; -import { DatasetsService } from '../_services/datasets.service'; -import { ExperimentsService } from '../_services/experiments.service'; -import { ModelsService } from '../_services/models.service'; - -@Component({ - selector: 'app-training', - templateUrl: './training.component.html', - styleUrls: ['./training.component.css'] -}) -export class TrainingComponent{ - - myExperiments?: Experiment[]; - selectedExperiment?: Experiment; - selectedModel?: Model; - - trainingResult: any; - - term: string = ""; - - constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private experimentsService: ExperimentsService) { - this.experimentsService.getMyExperiments().subscribe((experiments) => { - this.myExperiments = experiments; - }); - } - - selectThisExperiment(experiment: Experiment) { - this.selectedExperiment = experiment; - } - - selectModel(model: Model) { - this.selectedModel = model; - } - - trainModel() { - this.trainingResult = undefined; - - if (this.selectedExperiment == undefined) { - Shared.openDialog("Greška", "Molimo Vas da izaberete eksperiment iz kolekcije."); - return; - } - if (this.selectedModel == undefined) { - Shared.openDialog("Greška", "Molimo Vas da izaberete model."); - return; - } - this.modelsService.trainModel(this.selectedModel._id, this.selectedExperiment._id).subscribe((response: any) => { - //console.log('Train model complete!', response); - Shared.openDialog("Obaveštenje", "Treniranje modela je uspešno završeno!"); - this.trainingResult = response; - }); - } -} -- cgit v1.2.3 From 6fe49c5cd6ef20dc477f11dac098e4c18c2584ee Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 03:01:02 +0200 Subject: Dodao korisnička podešavanja za pozadinu. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../reactive-background.component.ts | 52 +++++++++++++++------- .../_pages/playground/playground.component.html | 19 +++++++- .../app/_pages/playground/playground.component.ts | 18 +++++++- frontend/src/app/app.component.html | 7 +-- frontend/src/app/app.component.ts | 15 ++++--- frontend/src/app/material.module.ts | 6 ++- frontend/src/styles/helper.css | 12 +++++ 7 files changed, 100 insertions(+), 29 deletions(-) (limited to 'frontend/src/app/_pages') diff --git a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts index 73cdb326..4cafbc6d 100644 --- a/frontend/src/app/_elements/reactive-background/reactive-background.component.ts +++ b/frontend/src/app/_elements/reactive-background/reactive-background.component.ts @@ -1,4 +1,5 @@ import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-reactive-background', @@ -22,6 +23,9 @@ export class ReactiveBackgroundComponent implements AfterViewInit { @Input() pointColor: string = '#ffffff'; @Input() cursorLineColor: string = '#ff0000'; + @Input() animate: boolean = true; + @Input() fill: number = 1.0; + private fleeSpeed = 0.005; private points: Point[] = []; @@ -35,7 +39,7 @@ export class ReactiveBackgroundComponent implements AfterViewInit { private time: number = 0; - constructor() { } + constructor(private cookie: CookieService) { } private mouseX = 0; private mouseY = 0; @@ -77,6 +81,13 @@ export class ReactiveBackgroundComponent implements AfterViewInit { this.resize(); setInterval(() => { + if (this.cookie.check('animateBackground')) { + this.animate = this.cookie.get('animateBackground') == 'true'; + } + if (this.cookie.check('backgroundFill')) { + this.fill = parseFloat(this.cookie.get('backgroundFill')); + } + this.drawBackground(); }, 1000 / 60); } @@ -85,7 +96,8 @@ export class ReactiveBackgroundComponent implements AfterViewInit { scrollBackground(e: Event) { const scrolledAmount = window.scrollY - this.lastScrollY; - this.points.forEach((point) => { + this.points.forEach((point, index) => { + if (index > this.numPoints * this.fill) return; point.y = point.y - (scrolledAmount / this.height) * this.scrollSpeed; this.keepPointWithinBounds(point); }) @@ -100,19 +112,21 @@ export class ReactiveBackgroundComponent implements AfterViewInit { //this.ctx.fillRect(0, 0, this.width, this.height); this.points.forEach((point, index) => { - this.updatePoint(point); + if (index > this.numPoints * this.fill) return; + this.drawLines(point, index); this.drawPoint(point); + + if (this.animate) + this.updatePoint(point); }); //this.drawPoint(new Point(this.mouseX, this.mouseY, 12, 0)); - - this.time += 1; } drawLines(p: Point, index: number) { let i = index + 1; - while (i < this.points.length) { + while (i < this.points.length * this.fill) { const otherPoint = this.points[i]; const dist = this.distance(p.x, p.y, otherPoint.x, otherPoint.y); @@ -151,24 +165,22 @@ export class ReactiveBackgroundComponent implements AfterViewInit { } updatePoint(p: Point) { - const vx = Math.sin(p.direction); - const vy = Math.cos(p.direction); - - p.x = p.x + vx * this.speed; - p.y = p.y + vy * this.speed; - const mx = this.mouseX; const my = this.mouseY; const distToCursor = this.distance(p.x, p.y, mx, my); + if (distToCursor < this.cursorDistance) { - p.x -= ((mx - p.x) / distToCursor) * this.fleeSpeed; - p.y -= ((my - p.y) / distToCursor) * this.fleeSpeed; + const t = (distToCursor / this.cursorDistance); + p.x -= ((mx - p.x) / distToCursor) * this.speed * (1 + t * 2); + p.y -= ((my - p.y) / distToCursor) * this.speed * (1 + t * 2); + + p.direction = this.lerp(p.direction, Math.atan2(my - p.y, mx - p.x) * 180 / Math.PI, t); const grd = this.ctx.createLinearGradient(p.x * this.width, p.y * this.height, mx * this.width, my * this.height); const alpha = HEX[Math.round(p.size / this.maxSize * (HEX.length - 1))]; grd.addColorStop(0, this.cursorLineColor + alpha); - grd.addColorStop(1, this.cursorLineColor + '00'); + grd.addColorStop(0.5, this.cursorLineColor + '00'); this.ctx.strokeStyle = grd; this.ctx.beginPath(); this.ctx.moveTo(p.x * this.width, p.y * this.height); @@ -176,9 +188,19 @@ export class ReactiveBackgroundComponent implements AfterViewInit { this.ctx.stroke(); } + const vx = Math.sin(p.direction); + const vy = Math.cos(p.direction); + + p.x = p.x + vx * this.speed; + p.y = p.y + vy * this.speed; + this.keepPointWithinBounds(p); } + lerp(start: number, end: number, amt: number) { + return (1 - amt) * start + amt * end + } + keepPointWithinBounds(p: Point) { p.x = p.x % 1.0; p.y = p.y % 1.0; diff --git a/frontend/src/app/_pages/playground/playground.component.html b/frontend/src/app/_pages/playground/playground.component.html index 5622cd83..d3751d5c 100644 --- a/frontend/src/app/_pages/playground/playground.component.html +++ b/frontend/src/app/_pages/playground/playground.component.html @@ -1 +1,18 @@ -
\ No newline at end of file +
+
+

+ Broj tačaka: +

+ + + +
+
+

+ Animacija:

+ + +
+
+
+
\ No newline at end of file diff --git a/frontend/src/app/_pages/playground/playground.component.ts b/frontend/src/app/_pages/playground/playground.component.ts index 007a455e..f8ea8bb4 100644 --- a/frontend/src/app/_pages/playground/playground.component.ts +++ b/frontend/src/app/_pages/playground/playground.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-playground', @@ -7,9 +8,24 @@ import { Component, OnInit } from '@angular/core'; }) export class PlaygroundComponent implements OnInit { - constructor() { } + animateBackground = true; + backgroundFill = 1.0; + + constructor(private cookie: CookieService) { } + + updateBGPrefs() { + this.cookie.set('animateBackground', "" + this.animateBackground); + this.cookie.set('backgroundFill', "" + this.backgroundFill); + console.log(this.animateBackground, this.backgroundFill); + } ngOnInit(): void { + if (this.cookie.check('animateBackground')) { + this.animateBackground = this.cookie.get('animateBackground') == 'true'; + } + if (this.cookie.check('backgroundFill')) { + this.backgroundFill = parseFloat(this.cookie.get('backgroundFill')); + } } } diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index ba7743b5..984389c4 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,11 +1,12 @@ - + - + - + +pozadina
- - -
- Pogledaj sve javne izvore podataka... -
- -
\ No newline at end of file diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index bd9a3b0d..4a0d85c8 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -6,7 +6,6 @@ import { AuthService } from './_services/auth.service'; import { SignalRService } from './_services/signal-r.service'; import { HttpClient } from '@angular/common/http'; import Shared from './Shared'; -import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index bcd02646..58f00c20 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -24,4 +24,21 @@ margin-top: 50%; margin-left: auto; transform: translateX(-50%); +} + +.footer-center { + position: relative; + height: 1rem; +} + +.footer-center>* { + position: fixed; + bottom: 8%; + left: 50%; + transform: translateX(-50%); +} + +.row-height { + white-space: nowrap; + height: 1rem; } \ No newline at end of file diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index 3ef44e54..820f5a5a 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -1,7 +1,10 @@ :root { --ns-primary: #00a8e8; --ns-bg: #003459; - --ns-bg-transparent: rgba(0, 152, 189, 0.3) + --ns-bg-light-30: rgba(0, 152, 189, 0.3); + --ns-bg-dark-100: rgba(0, 65, 101, 1.0); + --ns-bg-dark-50: rgba(0, 65, 101, 0.5); + --offwhite: #ebe6e6; } body { @@ -10,9 +13,19 @@ body { } .bg-light { - background-color: var(--ns-bg-transparent) !important; + background-color: var(--ns-bg-light-30) !important; +} + +.ns-bg-dark-50 {} + +.ns-bg-dark-100 { + background-color: var(--ns-bg-dark-100) !important; } a { color: var(--ns-primary) !important; +} + +.text-offwhite { + color: var(--offwhite); } \ No newline at end of file -- cgit v1.2.3 From 036d29ecf68214704de77956a88cdb2af228f37b Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 23:16:45 +0200 Subject: Dodao folder komponentu, odradjeni tabovi i selekcija, ulazi i izlazi komponente, stil. --- .../src/app/_elements/folder/folder.component.css | 124 +++++++++++++++++++++ .../src/app/_elements/folder/folder.component.html | 69 +++++++++++- .../src/app/_elements/folder/folder.component.ts | 95 +++++++++++++++- .../app/_elements/playlist/playlist.component.css | 2 +- .../app/_elements/playlist/playlist.component.html | 6 +- .../_pages/experiment/experiment.component.html | 1 + frontend/src/app/app.component.html | 6 +- frontend/src/styles/helper.css | 12 +- frontend/src/styles/theme.css | 15 ++- 9 files changed, 315 insertions(+), 15 deletions(-) (limited to 'frontend/src/app/_pages') diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index e69de29b..cfb0d087 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -0,0 +1,124 @@ +#folder { + position: absolute; + left: 50%; + transform: translateX(-50%); +} + +#tabs { + display: flex; + flex-direction: row; + align-items: flex-end; + height: 4rem; +} + +#tabs>.folder-tab:not(:first-child) { + margin-left: -5px; +} + +.folder-tab { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: relative; + overflow-x: hidden; + background-color: var(--ns-bg-dark-100); + height: 2.5rem; + border-color: var(--ns-primary); + border-style: solid; + border-width: 1px 1px 0 1px; +} + +.folder-tab:not(:first-child) { + margin-block-start: auto; + width: 4rem; +} + +.selected-tab { + height: 3rem; + background-color: var(--ns-primary); +} + +.hover-tab { + height: 3.2rem; +} + +.selected-tab, +.hover-tab { + width: fit-content !important; +} + +.tab-link { + color: var(--offwhite) !important; + text-decoration: none !important; + cursor: pointer; +} + +.tab-link:active { + color: var(--ns-accent) !important; +} + +.selected-tab { + background-color: var(--ns-primary); +} + +#searchbar { + height: 2.5rem; + background-color: var(--ns-bg-dark-100); + border-bottom: 1px solid var(--ns-primary); + display: flex; + flex-direction: row; + align-items: center; + justify-content: flex-start; + width: 100%; +} + +.collapse-horizontal { + white-space: nowrap; + height: 2.5rem; + overflow-x: hidden; +} + +#search-options { + margin-left: auto; + margin-top: 7px; + display: flex; + flex-direction: row; + align-items: center; +} + +#selected-content { + background-color: var(--ns-bg-dark-50); + width: 100%; + height: 36rem; + backdrop-filter: blur(2px); + border-color: var(--ns-primary); + border-style: solid; + border-width: 1px 1px 1px 1px; + border-top-right-radius: 4px; +} + +#footer { + display: flex; + flex-direction: row; + justify-content: center; +} + +.folder-bottom-button { + font-size: large; + position: relative; + background-color: var(--ns-bg-dark-100); + width: 10rem; + height: 2.5rem; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + border-color: var(--ns-primary); + border-style: solid; + border-width: 0px 1px 1px 1px; +} + +.folder-bottom-button:hover { + background-color: var(--ns-primary); +} \ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index e4c376a7..455d43cc 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -1 +1,68 @@ -

folder works!

+
+
+ +
+ {{file.name}} +
+
+
+ + {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}} +
+ +
\ No newline at end of file diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index c5ff3c45..34c8db82 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -1,4 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import Model from 'src/app/_data/Model'; @Component({ selector: 'app-folder', @@ -7,9 +9,98 @@ import { Component, OnInit } from '@angular/core'; }) export class FolderComponent implements OnInit { - constructor() { } + @Input() folderName: string = 'Moji podaci'; + + @Input() files!: (Dataset | Model)[] + + newFile!: Dataset | Model; + + @Input() type: FolderType = FolderType.Dataset; + + newFileSelected: boolean = true; + + selectedFileIndex: number = -1; + hoveringOverFileIndex: number = -1; + + fileToDisplay?: (Dataset | Model); + + @Output() selectedFileChanged: EventEmitter<(Dataset | Model)> = new EventEmitter(); + + constructor() { + //PLACEHOLDER + this.files = [ + new Dataset('Titanik'), + new Dataset('Dijamanti'), + new Dataset('Filmovi'), + ] + } ngOnInit(): void { + if (this.files.length > 0) + this.selectFile(0); + else { + this.selectNewFile(); + } + } + + hoverOverFile(i: number) { + this.hoveringOverFileIndex = i; + if (i != -1) { + this.fileToDisplay = this.files[i]; + } else { + if (this.newFileSelected) { + this.fileToDisplay = this.newFile; + } else { + this.fileToDisplay = this.files[this.selectedFileIndex]; + } + } + } + + selectNewFile() { + if (!this.newFile) { + this.createNewFile(); + } + this.fileToDisplay = this.newFile; + this.selectedFileIndex = -1; + this.newFileSelected = true; + this.selectedFileChanged.emit(this.newFile); + } + + selectFile(index: number) { + this.selectedFileIndex = index; + this.fileToDisplay = this.files[index]; + this.newFileSelected = false; + this.selectedFileChanged.emit(this.files[index]); + } + + createNewFile() { + if (this.type == FolderType.Dataset) { + this.newFile = new Dataset(); + } else if (this.type == FolderType.Model) { + this.newFile = new Model(); + } + } + + saveNewFile() { + // TODO + } + + calcZIndex(i: number) { + let zIndex = (this.files.length - i - 1) + if (this.selectedFileIndex == i) + zIndex = this.files.length + 2; + if (this.hoveringOverFileIndex == i) + zIndex = this.files.length + 3; + return zIndex; + } + + newFileZIndex() { + return (this.files.length + 1); } } + +export enum FolderType { + Dataset, + Model +} diff --git a/frontend/src/app/_elements/playlist/playlist.component.css b/frontend/src/app/_elements/playlist/playlist.component.css index 83448e51..353a094c 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.css +++ b/frontend/src/app/_elements/playlist/playlist.component.css @@ -13,7 +13,7 @@ .ns-cards { position: relative; width: 300%; - height: 26rem; + height: 25rem; margin-bottom: 20px; } diff --git a/frontend/src/app/_elements/playlist/playlist.component.html b/frontend/src/app/_elements/playlist/playlist.component.html index 97ebe6a5..b82de163 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.html +++ b/frontend/src/app/_elements/playlist/playlist.component.html @@ -3,13 +3,13 @@
-
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index bcecd284..7f4e14ec 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -1 +1,2 @@

experiment works!

+ \ No newline at end of file diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 06416791..93c27eb8 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -1,9 +1,9 @@ - + - + - + pozadina diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index 58f00c20..9c520ac3 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -33,7 +33,7 @@ .footer-center>* { position: fixed; - bottom: 8%; + bottom: 15px; left: 50%; transform: translateX(-50%); } @@ -41,4 +41,14 @@ .row-height { white-space: nowrap; height: 1rem; +} + +.icon-double>*:nth-child(2) { + margin-left: -1rem; +} + +.no-wrap { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } \ No newline at end of file diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index 820f5a5a..d0ccc935 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -1,10 +1,11 @@ :root { - --ns-primary: #00a8e8; + --ns-primary: #0063AB; + --ns-accent: #00a8e8; --ns-bg: #003459; --ns-bg-light-30: rgba(0, 152, 189, 0.3); --ns-bg-dark-100: rgba(0, 65, 101, 1.0); --ns-bg-dark-50: rgba(0, 65, 101, 0.5); - --offwhite: #ebe6e6; + --offwhite: #dfd7d7; } body { @@ -16,7 +17,13 @@ body { background-color: var(--ns-bg-light-30) !important; } -.ns-bg-dark-50 {} +.ns-border-primary { + border: 1px solid var(--ns-primary); +} + +.ns-bg-dark-50 { + background-color: var(--ns-bg-dark-50) !important; +} .ns-bg-dark-100 { background-color: var(--ns-bg-dark-100) !important; @@ -27,5 +34,5 @@ a { } .text-offwhite { - color: var(--offwhite); + color: var(--offwhite) !important; } \ No newline at end of file -- cgit v1.2.3 From b3f9842a4d0400b1267959ff328c47c4b5ca52be Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 23:46:21 +0200 Subject: Dodao hover za novi element tab u folderu, promenio input za kolicinu tacaka u pozadini da se odmah update-uje. --- frontend/src/app/_elements/folder/folder.component.html | 8 ++++---- frontend/src/app/_pages/playground/playground.component.html | 4 ++-- frontend/src/app/_pages/playground/playground.component.ts | 10 +++++++--- frontend/src/app/app.component.html | 4 +++- 4 files changed, 16 insertions(+), 10 deletions(-) (limited to 'frontend/src/app/_pages') diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 455d43cc..11fccc56 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -1,8 +1,8 @@
-
+ @@ -21,7 +21,7 @@
-
+
timeline @@ -37,7 +37,7 @@
- +
diff --git a/frontend/src/app/_pages/playground/playground.component.html b/frontend/src/app/_pages/playground/playground.component.html index d3751d5c..1dd7e331 100644 --- a/frontend/src/app/_pages/playground/playground.component.html +++ b/frontend/src/app/_pages/playground/playground.component.html @@ -3,14 +3,14 @@

Broj tačaka:

- +

Animacija:

- +
diff --git a/frontend/src/app/_pages/playground/playground.component.ts b/frontend/src/app/_pages/playground/playground.component.ts index f8ea8bb4..831132a4 100644 --- a/frontend/src/app/_pages/playground/playground.component.ts +++ b/frontend/src/app/_pages/playground/playground.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { MatSliderChange } from '@angular/material/slider'; import { CookieService } from 'ngx-cookie-service'; @Component({ @@ -13,10 +14,13 @@ export class PlaygroundComponent implements OnInit { constructor(private cookie: CookieService) { } - updateBGPrefs() { - this.cookie.set('animateBackground', "" + this.animateBackground); + updateFillPref(event: MatSliderChange) { + this.backgroundFill = event.value!; this.cookie.set('backgroundFill', "" + this.backgroundFill); - console.log(this.animateBackground, this.backgroundFill); + } + + updateAnimPref() { + this.cookie.set('animateBackground', "" + this.animateBackground); } ngOnInit(): void { diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html index 93c27eb8..8c3f4e9e 100644 --- a/frontend/src/app/app.component.html +++ b/frontend/src/app/app.component.html @@ -6,7 +6,9 @@ -pozadina + + settings_suggest +
-- cgit v1.2.3 From 9d9cab4488805993ff6f8134f1a31ba6930f8c5e Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Sun, 24 Apr 2022 02:45:18 +0200 Subject: Dodat navbar sa leve strane. Odradjen dizajn. Dodat poziv test funkcije po promeni steppera. --- .../app/_pages/experiment/experiment.component.css | 36 ++++++++++++++++++++ .../_pages/experiment/experiment.component.html | 39 ++++++++++++++++++++-- .../app/_pages/experiment/experiment.component.ts | 6 +++- 3 files changed, 78 insertions(+), 3 deletions(-) (limited to 'frontend/src/app/_pages') diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index e69de29b..4b16b450 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -0,0 +1,36 @@ +ul{ + list-style: none; +} +.navmenu{ + position: absolute; + background-color: var(--ns-bg-dark-50); + height: 100%; +} +.navmenuwrapper{ + position: relative; + top:40%; + transform: translateY(-50%); +} + + +mat-stepper{ + background-color: transparent; +} + +::ng-deep .mat-step-header .mat-step-icon .mat-step-content{ + background-color: white; + color:var(--ns-primary); + } +::ng-deep .mat-step-header .mat-step-icon{ + color:white; +} +::ng-deep .mat-step-header .mat-step-icon-state-done{ + background: var(--ns-primary); + color:var(--ns-primary) +} +::ng-deep .mat-step-header .mat-step-icon-state-done .label{ + color:var(--ns-primary) +} +.label{ + color: white; +} \ 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 7f4e14ec..e0746d4a 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -1,2 +1,37 @@ -

experiment works!

- \ No newline at end of file + +
+ + + + + + + +
+ + + diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 16de7351..f06a7c48 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit } from '@angular/core'; - +import { StepperSelectionEvent } from '@angular/cdk/stepper'; @Component({ selector: 'app-experiment', templateUrl: './experiment.component.html', @@ -12,4 +12,8 @@ export class ExperimentComponent implements OnInit { ngOnInit(): void { } + test(event:StepperSelectionEvent){ + console.log(event); + } + } -- cgit v1.2.3 From 357704209277dad75ab6e52202029677bd5a4b19 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Sun, 24 Apr 2022 03:16:44 +0200 Subject: Smanjena visina i sirina. --- frontend/src/app/_pages/experiment/experiment.component.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'frontend/src/app/_pages') diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index 4b16b450..34e412ef 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -4,7 +4,8 @@ ul{ .navmenu{ position: absolute; background-color: var(--ns-bg-dark-50); - height: 100%; + height: 90%; + width: 250px; } .navmenuwrapper{ position: relative; -- cgit v1.2.3 From 8141381f7caefb7b14e02e7a19224c563db4df9b Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Sun, 24 Apr 2022 17:45:07 +0200 Subject: Omogucen rad navigacionom menija. --- .../src/app/_pages/experiment/experiment.component.html | 13 +++++++++++-- frontend/src/app/_pages/experiment/experiment.component.ts | 9 +++++++-- 2 files changed, 18 insertions(+), 4 deletions(-) (limited to 'frontend/src/app/_pages') diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index e0746d4a..2f1a86fd 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -1,9 +1,9 @@ - +