diff options
124 files changed, 483 insertions, 2771 deletions
diff --git a/frontend/src/app/barchart/barchart.component.css b/frontend/src/app/_elements/_charts/barchart/barchart.component.css index c3634c9f..c3634c9f 100644 --- a/frontend/src/app/barchart/barchart.component.css +++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.css diff --git a/frontend/src/app/barchart/barchart.component.html b/frontend/src/app/_elements/_charts/barchart/barchart.component.html index 48b7bd3e..48b7bd3e 100644 --- a/frontend/src/app/barchart/barchart.component.html +++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.html diff --git a/frontend/src/app/barchart/barchart.component.spec.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts index 8b346d1c..8b346d1c 100644 --- a/frontend/src/app/barchart/barchart.component.spec.ts +++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts diff --git a/frontend/src/app/barchart/barchart.component.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts index def64b7d..def64b7d 100644 --- a/frontend/src/app/barchart/barchart.component.ts +++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.css +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.css diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html new file mode 100644 index 00000000..20cf6487 --- /dev/null +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html @@ -0,0 +1 @@ +<p>box-plot works!</p> diff --git a/frontend/src/app/training/training.component.spec.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts index 1222cb40..759e7c5e 100644 --- a/frontend/src/app/training/training.component.spec.ts +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { TrainingComponent } from './training.component'; +import { BoxPlotComponent } from './box-plot.component'; -describe('TrainingComponent', () => { - let component: TrainingComponent; - let fixture: ComponentFixture<TrainingComponent>; +describe('BoxPlotComponent', () => { + let component: BoxPlotComponent; + let fixture: ComponentFixture<BoxPlotComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ TrainingComponent ] + declarations: [ BoxPlotComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(TrainingComponent); + fixture = TestBed.createComponent(BoxPlotComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts new file mode 100644 index 00000000..0cef8f90 --- /dev/null +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-box-plot', + templateUrl: './box-plot.component.html', + styleUrls: ['./box-plot.component.css'] +}) +export class BoxPlotComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_elements/carousel/carousel.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_elements/carousel/carousel.component.css +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html new file mode 100644 index 00000000..c8f406f4 --- /dev/null +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html @@ -0,0 +1,5 @@ +<div class="chart-wrapper"> + <canvas id="myChart"> + + </canvas> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts index cb07ef1d..0c5e7ef5 100644 --- a/frontend/src/app/_elements/annvisual/annvisual.component.spec.ts +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { AnnvisualComponent } from './annvisual.component'; +import { LineChartComponent } from './line-chart.component'; -describe('AnnvisualComponent', () => { - let component: AnnvisualComponent; - let fixture: ComponentFixture<AnnvisualComponent>; +describe('LineChartComponent', () => { + let component: LineChartComponent; + let fixture: ComponentFixture<LineChartComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ AnnvisualComponent ] + declarations: [ LineChartComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(AnnvisualComponent); + fixture = TestBed.createComponent(LineChartComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts new file mode 100644 index 00000000..49558025 --- /dev/null +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts @@ -0,0 +1,88 @@ +import { Component, AfterViewInit } from '@angular/core'; +import { Chart } from 'chart.js'; + +@Component({ + selector: 'app-line-chart', + templateUrl: './line-chart.component.html', + styleUrls: ['./line-chart.component.css'] +}) + +export class LineChartComponent implements AfterViewInit { + + dataAcc: number[] = []; + dataMAE: number[] = []; + dataMSE: number[] = []; + dataLOSS: number[] = []; + + dataEpoch: number[] = []; + + constructor() { + /*let i = 0; + setInterval(() => { + this.dataAcc.push(0.5); + this.dataEpoch.push(i); + i++; + this.update(); + }, 200);*/ + } + + myChart!: Chart; + + update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[]) { + this.dataAcc.length = 0; + this.dataAcc.push(...myAcc); + + this.dataEpoch.length = 0; + this.dataEpoch.push(...myEpochs); + + this.dataMAE.length = 0; + this.dataMAE.push(...myMae); + + this.dataLOSS.length = 0; + this.dataLOSS.push(...myLoss); + + this.dataMSE.length = 0; + this.dataMSE.push(...myMse); + + this.myChart.update(); + } + + ngAfterViewInit(): void { + this.myChart = new Chart("myChart", + { + type: 'line', + data: { + labels: this.dataEpoch, + datasets: [{ + label: 'Accuracy', + data: this.dataAcc, + borderWidth: 1 + }, + { + label: 'Loss', + data: this.dataLOSS, + borderWidth: 1 + }, + { + label: 'MAE', + data: this.dataMAE, + borderWidth: 1 + }, + { + label: 'MSE', + data: this.dataMSE, + borderWidth: 1 + } + ] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + } + } + ); + } +} diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.css b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_elements/item-experiment/item-experiment.component.css +++ b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.css diff --git a/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html new file mode 100644 index 00000000..806ea9e8 --- /dev/null +++ b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html @@ -0,0 +1,2 @@ +<canvas #mixedchart width="800" height="450"></canvas> +<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> diff --git a/frontend/src/app/_elements/carousel/carousel.component.spec.ts b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.spec.ts index 9196e044..361cd047 100644 --- a/frontend/src/app/_elements/carousel/carousel.component.spec.ts +++ b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { CarouselComponent } from './carousel.component'; +import { MixedChartComponent } from './mixed-chart.component'; -describe('CarouselComponent', () => { - let component: CarouselComponent; - let fixture: ComponentFixture<CarouselComponent>; +describe('MixedChartComponent', () => { + let component: MixedChartComponent; + let fixture: ComponentFixture<MixedChartComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ CarouselComponent ] + declarations: [ MixedChartComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(CarouselComponent); + fixture = TestBed.createComponent(MixedChartComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.ts b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.ts new file mode 100644 index 00000000..2524ee36 --- /dev/null +++ b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.ts @@ -0,0 +1,56 @@ +import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import {Chart} from 'node_modules/chart.js'; + +@Component({ + selector: 'app-mixed-chart', + templateUrl: './mixed-chart.component.html', + styleUrls: ['./mixed-chart.component.css'] +}) +export class MixedChartComponent implements AfterViewInit { + + @ViewChild('mixedchart') chartRef!: ElementRef; + constructor() { } + + ngAfterViewInit(): void { + const myChart = new Chart(this.chartRef.nativeElement, { + type: 'bar', + data: { + labels: ["1900", "1950", "1999", "2050"], + datasets: [{ + label: "Europe", + type: "line", + borderColor: "#8e5ea2", + data: [408,547,675,734], + fill: false + }, { + label: "Africa", + type: "line", + borderColor: "#3e95cd", + data: [133,221,783,2478], + fill: false + }, { + label: "Europe", + type: "bar", + backgroundColor: "rgba(0,0,0,0.2)", + data: [408,547,675,734], + }, { + label: "Africa", + type: "bar", + backgroundColor: "rgba(0,0,0,0.2)", + //backgroundColorHover: "#3e95cd", + data: [133,221,783,2478] + } + ] + }, + /*options: { + title: { + display: true, + text: 'Population growth (millions): Europe & Africa' + }, + legend: { display: false } + }*/ + + }); + } + +} diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.css b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_elements/item-predictor/item-predictor.component.css +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.css diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html new file mode 100644 index 00000000..43a2d766 --- /dev/null +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html @@ -0,0 +1 @@ +<p>pie-chart works!</p> diff --git a/frontend/src/app/_pages/my-models/my-models.component.spec.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts index e431d04c..64f36b7d 100644 --- a/frontend/src/app/_pages/my-models/my-models.component.spec.ts +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { MyModelsComponent } from './my-models.component'; +import { PieChartComponent } from './pie-chart.component'; -describe('MyModelsComponent', () => { - let component: MyModelsComponent; - let fixture: ComponentFixture<MyModelsComponent>; +describe('PieChartComponent', () => { + let component: PieChartComponent; + let fixture: ComponentFixture<PieChartComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ MyModelsComponent ] + declarations: [ PieChartComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(MyModelsComponent); + fixture = TestBed.createComponent(PieChartComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts new file mode 100644 index 00000000..dde5cbab --- /dev/null +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-pie-chart', + templateUrl: './pie-chart.component.html', + styleUrls: ['./pie-chart.component.css'] +}) +export class PieChartComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.css b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_elements/select-item-list/select-item-list.component.css +++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.css diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html new file mode 100644 index 00000000..f9f9a24a --- /dev/null +++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html @@ -0,0 +1,2 @@ +<canvas #linechart width="800" height="450">Point line chart:</canvas> +<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.spec.ts b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts index 1da7d05d..fe08fe7c 100644 --- a/frontend/src/app/_elements/item-experiment/item-experiment.component.spec.ts +++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ItemExperimentComponent } from './item-experiment.component'; +import { PointLinechartComponent } from './point-linechart.component'; -describe('ItemExperimentComponent', () => { - let component: ItemExperimentComponent; - let fixture: ComponentFixture<ItemExperimentComponent>; +describe('PointLinechartComponent', () => { + let component: PointLinechartComponent; + let fixture: ComponentFixture<PointLinechartComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ItemExperimentComponent ] + declarations: [ PointLinechartComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(ItemExperimentComponent); + fixture = TestBed.createComponent(PointLinechartComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts new file mode 100644 index 00000000..3497a20c --- /dev/null +++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts @@ -0,0 +1,57 @@ +import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import {Chart} from 'node_modules/chart.js'; + + +@Component({ + selector: 'app-point-linechart', + templateUrl: './point-linechart.component.html', + styleUrls: ['./point-linechart.component.css'] +}) +export class PointLinechartComponent implements AfterViewInit { + + @ViewChild('linechart') chartRef!: ElementRef; + constructor() { } + ngAfterViewInit(): void { + const myChart = new Chart(this.chartRef.nativeElement, { + type: 'line', + data: { + labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050], + datasets: [{ + data: [86,114,106,106,107,111,133,221,783,2478], + label: "Africa", + borderColor: "#3e95cd", + fill: false + }, { + data: [282,350,411,502,635,809,947,1402,3700,5267], + label: "Asia", + borderColor: "#8e5ea2", + fill: false + }, { + data: [168,170,178,190,203,276,408,547,675,734], + label: "Europe", + borderColor: "#3cba9f", + fill: false + }, { + data: [40,20,10,16,24,38,74,167,508,784], + label: "Latin America", + borderColor: "#e8c3b9", + fill: false + }, { + data: [6,3,2,2,7,26,82,172,312,433], + label: "North America", + borderColor: "#c45850", + fill: false + } + ] + }, + /*options: { + title: { + display: true, + text: 'World population per region (in millions)' + } + }*/ + + }); + + } +}
\ No newline at end of file diff --git a/frontend/src/app/scatterchart/scatterchart.component.css b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css index 5735217e..5735217e 100644 --- a/frontend/src/app/scatterchart/scatterchart.component.css +++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css diff --git a/frontend/src/app/scatterchart/scatterchart.component.html b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html index 2b30fe1f..2b30fe1f 100644 --- a/frontend/src/app/scatterchart/scatterchart.component.html +++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html diff --git a/frontend/src/app/scatterchart/scatterchart.component.spec.ts b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts index 1db81051..1db81051 100644 --- a/frontend/src/app/scatterchart/scatterchart.component.spec.ts +++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts diff --git a/frontend/src/app/scatterchart/scatterchart.component.ts b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts index 9dfef4c3..9dfef4c3 100644 --- a/frontend/src/app/scatterchart/scatterchart.component.ts +++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html deleted file mode 100644 index bff8b022..00000000 --- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html +++ /dev/null @@ -1,49 +0,0 @@ -<div class="row mb-4"> - <div class="col-2"> - </div> - <div class="col-3"> - <label for="name" class="col-form-label">Naziv dataseta:</label> - <input type="text" class="form-control mb-1" name="name" placeholder="Naziv..." [(ngModel)]="dataset.name"> - - <label for="desc" class="col-sm-2 col-form-label">Opis:</label> - <div> - <textarea class="form-control" name="desc" rows="3" [(ngModel)]="dataset.description"></textarea> - </div> - - <label for="checkboxIsPublic" class="form-check-label mt-3 mb-1">Želite li da dataset bude javan? - <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.isPublic" (change)="checkAccessible()" type="checkbox" - value="" id="checkboxIsPublic"> - </label> - - <label for="checkboxAccessibleByLink" class="form-check-label">Želite li da bude deljiv linkom? - <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="dataset.accessibleByLink" type="checkbox" - value="" id="checkboxAccessibleByLink"> - </label> - </div> - <div class="col-1"> - </div> - <div class="col-4 mt-4"> - - <input list="delimiterOptions" placeholder="Izaberite ili ukucajte delimiter za .csv fajl" class="form-control mt-2" - [(ngModel)]="dataset.delimiter" (input)="update()"> - <datalist id="delimiterOptions"> - <option *ngFor="let option of delimiterOptions">{{option}}</option> - </datalist> - - <label for="type" class="form-check-label my-5">Da li .csv ima header? - <input class="mx-3 form-check-input" type="checkbox" (input)="update()" [(ngModel)]="dataset.hasHeader" type="checkbox" - value="" id="checkboxHeader" checked> - </label> - <br> - <input id="fileInput" class="form-control" type="file" class="upload" (change)="changeListener($event)" - accept=".csv"> - </div> -</div> - -<div class="px-5 mt-5"> - <app-datatable [tableData]="tableData"></app-datatable> -</div> - -<div class="d-flex flex-row align-items-center justify-content-center w-100 my-2"> - <button (click)="uploadDataset()" class="btn btn-lg col-4" style="background-color:#003459; color:white;">Dodaj izvor podataka</button> -</div> diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts deleted file mode 100644 index a9ea25b4..00000000 --- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { AddNewDatasetComponent } from './add-new-dataset.component'; - -describe('AddNewDatasetComponent', () => { - let component: AddNewDatasetComponent; - let fixture: ComponentFixture<AddNewDatasetComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ AddNewDatasetComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(AddNewDatasetComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts deleted file mode 100644 index 3e1b5c73..00000000 --- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { Component, EventEmitter, Output, ViewChild } from '@angular/core'; -import Dataset from 'src/app/_data/Dataset'; -import { DatasetsService } from 'src/app/_services/datasets.service'; -import { ModelsService } from 'src/app/_services/models.service'; -import shared from 'src/app/Shared'; -import { DatatableComponent, TableData } from '../datatable/datatable.component'; -import { CsvParseService } from 'src/app/_services/csv-parse.service'; - -@Component({ - selector: 'app-add-new-dataset', - templateUrl: './add-new-dataset.component.html', - styleUrls: ['./add-new-dataset.component.css'] -}) -export class AddNewDatasetComponent { - - @Output() newDatasetAdded = new EventEmitter<string>(); - @ViewChild(DatatableComponent) datatable!: DatatableComponent; - - delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano "," - - csvRecords: any[] = []; - files: File[] = []; - rowsNumber: number = 0; - colsNumber: number = 0; - - dataset: Dataset; //dodaj ! potencijalno - - tableData: TableData = new TableData(); - - constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private csv: CsvParseService) { - this.dataset = new Dataset(); - } - - //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo? - - changeListener($event: any): void { - this.files = $event.srcElement.files; - if (this.files.length == 0 || this.files[0] == null) { - //console.log("NEMA FAJLA"); - //this.loaded.emit("not loaded"); - this.tableData.hasInput = false; - return; - } - else - this.tableData.hasInput = true; - - this.tableData.loaded = false; - this.update(); - } - - update() { - - if (this.files.length < 1) - return; - - const fileReader = new FileReader(); - fileReader.onload = (e) => { - if (typeof fileReader.result === 'string') { - const result = this.csv.csvToArray(fileReader.result, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter) - - if (this.dataset.hasHeader) - this.csvRecords = result.splice(0, 11); - else - this.csvRecords = result.splice(0, 10); - - this.colsNumber = result[0].length; - this.rowsNumber = result.length; - - this.tableData.data = this.csvRecords - this.tableData.hasHeader = this.dataset.hasHeader; - this.tableData.loaded = true; - this.tableData.numCols = this.colsNumber; - this.tableData.numRows = this.rowsNumber; - } - } - fileReader.readAsText(this.files[0]); - } - - checkAccessible() { - if (this.dataset.isPublic) - this.dataset.accessibleByLink = true; - } - - uploadDataset() { - if (this.files[0] == undefined) { - shared.openDialog("Greška", "Niste izabrali fajl za učitavanje."); - return; - } - - this.modelsService.uploadData(this.files[0]).subscribe((file) => { - //console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id); - this.dataset.fileId = file._id; - this.dataset.uploaderId = shared.userId; - - this.datasetsService.addDataset(this.dataset).subscribe((dataset) => { - this.newDatasetAdded.emit("added"); - shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se procesira."); - }, (error) => { - shared.openDialog("Neuspeo pokušaj!", "Izvor podataka sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset."); - }); //kraj addDataset subscribe - }, (error) => { - - }); //kraj uploadData subscribe - } - -} diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.css b/frontend/src/app/_elements/annvisual/annvisual.component.css deleted file mode 100644 index 857a3390..00000000 --- a/frontend/src/app/_elements/annvisual/annvisual.component.css +++ /dev/null @@ -1,4 +0,0 @@ -#graph{ - width: 100%; - text-align: center; -}
\ No newline at end of file diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.html b/frontend/src/app/_elements/annvisual/annvisual.component.html deleted file mode 100644 index 09251398..00000000 --- a/frontend/src/app/_elements/annvisual/annvisual.component.html +++ /dev/null @@ -1,5 +0,0 @@ -<div style="text-align: center; " > - <button (click)="d3()" mat-raised-button color="primary">Prikaz veštačke neuronske mreže</button> - <div id="graph" align-items-center style="width: 12rem;"></div> - </div> - diff --git a/frontend/src/app/_elements/annvisual/annvisual.component.ts b/frontend/src/app/_elements/annvisual/annvisual.component.ts deleted file mode 100644 index df0a3898..00000000 --- a/frontend/src/app/_elements/annvisual/annvisual.component.ts +++ /dev/null @@ -1,45 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core'; -import Model from 'src/app/_data/Model'; -import { graphviz } from 'd3-graphviz'; - -@Component({ - selector: 'app-annvisual', - templateUrl: './annvisual.component.html', - styleUrls: ['./annvisual.component.css'] -}) -export class AnnvisualComponent implements OnInit { - ngOnInit(): void { - } - - @Input() model: Model = new Model(); - - d3() { - let inputlayerstring: string = ''; - let hiddenlayerstring: string = ''; - let digraphstring: string = 'digraph {'; - - for (let i = 0; i < /*this.model.inputColumns.length*/ 10; i++) { - inputlayerstring = inputlayerstring + 'i' + i + ','; - } - inputlayerstring = inputlayerstring.slice(0, -1); - - digraphstring = digraphstring + inputlayerstring + '->'; - - for (let j = 0; j < this.model.hiddenLayers; j++) { - for (let i = 0; i < this.model.hiddenLayerNeurons; i++) { - hiddenlayerstring = hiddenlayerstring + 'h' + j + '_' + i + ','; - } - hiddenlayerstring = hiddenlayerstring.slice(0, -1); - digraphstring = digraphstring + hiddenlayerstring + '->'; - hiddenlayerstring = ''; - } - digraphstring = digraphstring + 'o}'; - - graphviz('#graph').renderDot(digraphstring); - } - - //'digraph {i0,i1,i2->h1,h2,h3->h21,h22,h23->o}' -} - - - diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css deleted file mode 100644 index 3d4a2432..00000000 --- a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.css +++ /dev/null @@ -1,3 +0,0 @@ -.carousel { - overscroll-behavior: contain; -}
\ No newline at end of file diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html deleted file mode 100644 index f52aee12..00000000 --- a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.html +++ /dev/null @@ -1,12 +0,0 @@ -<h1> - {{scroll}} -</h1> -<div #wrapper class="carousel position-relative" style="overflow-y: scroll;" [style]="'height:'+ shownElements * height+'rem;'"> - <div class="my-2" *ngFor="let item of itemsToShow; let i = index;" [style]="'height:'+ height+'rem; width: 90%; margin: auto;'"> - <div class="position-absolute text-dark bg-white" [style]="calcStyle(i)"> - <a class="stretched-link" (click)="clickItem"> - <p class="title">{{item.name}}</p> - </a> - </div> - </div> -</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts deleted file mode 100644 index 0c736e90..00000000 --- a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CarouselVerticalComponent } from './carousel-vertical.component'; - -describe('CarouselVerticalComponent', () => { - let component: CarouselVerticalComponent; - let fixture: ComponentFixture<CarouselVerticalComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ CarouselVerticalComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(CarouselVerticalComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts b/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts deleted file mode 100644 index d8849ea6..00000000 --- a/frontend/src/app/_elements/carousel-vertical/carousel-vertical.component.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; - -@Component({ - selector: 'app-carousel-vertical', - templateUrl: './carousel-vertical.component.html', - styleUrls: ['./carousel-vertical.component.css'] -}) -export class CarouselVerticalComponent implements OnInit, AfterViewInit { - - @ViewChild('wrapper') wrapper!: ElementRef; - - @Input() items!: any[]; - - itemsToShow: any[] = []; - - @Input() type: string = "Object"; - - scroll = 0; - height = 9; //rem - - currentIndex = 0; - - @Input() shownElements: number = 5; - - constructor() { - } - - ngOnInit(): void { - this.itemsToShow = [...this.items.slice(0, this.shownElements)]; - console.log('0', this.itemsToShow); - } - - ngAfterViewInit(): void { - const container = this.wrapper.nativeElement - - container.addEventListener('scroll', (event: Event) => { - this.scroll = (container.scrollTop / (container.scrollHeight - container.clientHeight)); - if (this.scroll == 1.0) { - //console.log('removed', this.itemsToShow.splice(0, 1)[0].name); - const itemToAdd = this.items[(this.currentIndex + this.shownElements) % (this.items.length - 1)]; - this.itemsToShow.push(itemToAdd); - //console.log('added', itemToAdd.name); - this.currentIndex = (this.currentIndex + 1); - container.scrollTop = (container.scrollHeight - container.clientHeight) / 2; - } - }); - } - - clickItem(index: number) { - } - - calcVisibility(i: number) { - //return ((Math.sin((((i) / this.shownElements) - this.scroll) * Math.PI) + 1) / 2) - const iPercent = (i + 1 - this.scroll) / this.shownElements; - return iPercent; - } - - calcStyle(i: number) { - const a = this.calcVisibility(i) - const v = (Math.sin(a * Math.PI) + 1) / 2; - return `transform: translateY(${v * 100}%) scale(${v}) perspective(${v * 200}em) rotateX(${(1 - a) * 180 - 90}deg); - opacity: ${v}; - height: ${this.height}rem;`; - } -} diff --git a/frontend/src/app/_elements/carousel/carousel.component.html b/frontend/src/app/_elements/carousel/carousel.component.html deleted file mode 100644 index eb1041ce..00000000 --- a/frontend/src/app/_elements/carousel/carousel.component.html +++ /dev/null @@ -1,17 +0,0 @@ -<div class="container"> - <div class="row d-flex align-items-stretch flex-row mx-5 align-items-stretch"> - <div class="col my-1" *ngFor="let item of items" [ngSwitch]="type"> - <ng-template ngSwitchCase="Object"> - Unknown item type - </ng-template> - <ng-template ngSwitchCase="Dataset"> - <app-item-dataset [dataset]="item"> - </app-item-dataset> - </ng-template> - <ng-template ngSwitchCase="Predictor"> - <app-item-predictor [predictor]="item"> - </app-item-predictor> - </ng-template> - </div> - </div> -</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/carousel/carousel.component.ts b/frontend/src/app/_elements/carousel/carousel.component.ts deleted file mode 100644 index e0112121..00000000 --- a/frontend/src/app/_elements/carousel/carousel.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-carousel', - templateUrl: './carousel.component.html', - styleUrls: ['./carousel.component.css'] -}) -export class CarouselComponent { - - @Input() items: any[] = []; - @Input() type: string = "Object"; - - constructor() { } - - ngOnInit(): void { - } - -} diff --git a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_pages/browse-datasets/browse-datasets.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html new file mode 100644 index 00000000..7b18afc8 --- /dev/null +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -0,0 +1 @@ +<p>column-table works!</p> diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts b/frontend/src/app/_elements/column-table/column-table.component.spec.ts index 603889b2..360a8109 100644 --- a/frontend/src/app/_elements/item-dataset/item-dataset.component.spec.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ItemDatasetComponent } from './item-dataset.component'; +import { ColumnTableComponent } from './column-table.component'; -describe('ItemDatasetComponent', () => { - let component: ItemDatasetComponent; - let fixture: ComponentFixture<ItemDatasetComponent>; +describe('ColumnTableComponent', () => { + let component: ColumnTableComponent; + let fixture: ComponentFixture<ColumnTableComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ItemDatasetComponent ] + declarations: [ ColumnTableComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(ItemDatasetComponent); + fixture = TestBed.createComponent(ColumnTableComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts new file mode 100644 index 00000000..f8c5f5f3 --- /dev/null +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-column-table', + templateUrl: './column-table.component.html', + styleUrls: ['./column-table.component.css'] +}) +export class ColumnTableComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.css b/frontend/src/app/_elements/dataset-load/dataset-load.component.css deleted file mode 100644 index ff6e2750..00000000 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.css +++ /dev/null @@ -1,18 +0,0 @@ -.btnType1 { - background-color: #003459; - color: white; - padding-top: 2vh; - padding-bottom: 2vh; -} -.btnType2 { - background-color: white; - color: #003459; - border-color: #003459; - padding-top: 2vh; - padding-bottom: 2vh; - -} -.selectedDatasetClass { - /*border-color: 2px solid #003459;*/ - background-color: lightblue; -}
\ No newline at end of file diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html deleted file mode 100644 index 56a3b3c9..00000000 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html +++ /dev/null @@ -1,40 +0,0 @@ -<div> - - <!--Sklonjeno ucitavanje novog dataseta i sve opcije u vezi sa tim, premesteno u add-new-dataset--> - - <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5"> - <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()" - [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}"> - Izaberite dataset iz kolekcije - </button> - <h3 class="mt-3 mx-3">ili</h3> - <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()" - [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}"> - Dodajte novi dataset - </button> - </div> - - <div class="px-5 my-2"> - <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga" - [(ngModel)]="term"> - </div> - <div class="px-5" *ngIf="showMyDatasets"> - <div class="overflow-auto" style="max-height: 500px;"> - <ul class="list-group"> - <li class="list-group-item p-3" *ngFor="let dataset of myDatasets|filter:term" - [ngClass]="{'selectedDatasetClass': this.selectedDataset == dataset}"> - <app-item-dataset name="usersDataset" [dataset]="dataset" - (click)="selectThisDataset(dataset);"></app-item-dataset> - </li> - </ul> - </div> - <div class="px-5 mt-5"> - <app-datatable [tableData]="tableData"></app-datatable> - </div> - </div> - - <app-add-new-dataset [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset" - (newDatasetAdded)="refreshMyDatasets()"> - </app-add-new-dataset> - -</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts deleted file mode 100644 index 73dbf2d2..00000000 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core'; -import { AddNewDatasetComponent } from '../add-new-dataset/add-new-dataset.component'; -import { ModelsService } from 'src/app/_services/models.service'; -import shared from 'src/app/Shared'; -import Dataset from 'src/app/_data/Dataset'; -import { DatatableComponent, TableData } from 'src/app/_elements/datatable/datatable.component'; -import { DatasetsService } from 'src/app/_services/datasets.service'; -import { CsvParseService } from 'src/app/_services/csv-parse.service'; -import { Output, EventEmitter } from '@angular/core'; -import { SignalRService } from 'src/app/_services/signal-r.service'; - -@Component({ - selector: 'app-dataset-load', - templateUrl: './dataset-load.component.html', - styleUrls: ['./dataset-load.component.css'] -}) -export class DatasetLoadComponent implements OnInit { - - @Output() selectedDatasetChangeEvent = new EventEmitter<Dataset>(); - - @ViewChild(AddNewDatasetComponent) addNewDatasetComponent!: AddNewDatasetComponent; - @ViewChild(AddNewDatasetComponent) datatable!: DatatableComponent; - - datasetLoaded: boolean = false; - selectedDatasetLoaded: boolean = false; - - showMyDatasets: boolean = true; - myDatasets?: Dataset[]; - existingDatasetSelected: boolean = false; - selectedDataset?: Dataset; - - tableData: TableData = new TableData(); - - term: string = ""; - - constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService, private signalRService: SignalRService) { - this.datasets.getMyDatasets().subscribe((datasets) => { - this.myDatasets = datasets; - }); - } - - viewMyDatasetsForm() { - this.showMyDatasets = true; - if (this.selectedDataset != undefined) - this.resetSelectedDataset(); - //this.resetCbsAndRbs(); //TREBA DA SE DESI - } - viewNewDatasetForm() { - this.showMyDatasets = false; - if (this.selectedDataset != undefined) - this.resetSelectedDataset(); - //this.resetCbsAndRbs(); //TREBA DA SE DESI - } - - refreshMyDatasets() { - this.datasets.getMyDatasets().subscribe((datasets) => { - this.myDatasets = datasets; - this.showMyDatasets = true; - }); - } - - selectThisDataset(dataset: Dataset) { - this.selectedDataset = dataset; - this.selectedDatasetLoaded = false; - this.existingDatasetSelected = true; - this.tableData.hasHeader = this.selectedDataset.hasHeader; - - this.tableData.hasInput = true; - this.tableData.loaded = false; - - this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => { - if (file) { - this.tableData.loaded = true; - this.tableData.numRows = this.selectedDataset!.rowCount; - this.tableData.numCols = this.selectedDataset!.columnInfo.length; - this.tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); - //this.resetCbsAndRbs(); //TREBA DA SE DESI - //this.refreshThreeNullValueRadioOptions(); //TREBA DA SE DESI - this.selectedDatasetLoaded = true; - - this.selectedDatasetChangeEvent.emit(this.selectedDataset); - } - }); - } - - resetSelectedDataset(): boolean { - this.selectedDatasetChangeEvent.emit(this.selectedDataset); - return true; - } - - ngOnInit(): void { - if (this.signalRService.hubConnection) { - this.signalRService.hubConnection.on("NotifyDataset", _ => { - this.refreshMyDatasets(); - }); - } else { - console.warn("Dataset-Load: No connection!"); - } - } -} diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.css b/frontend/src/app/_elements/form-dataset/form-dataset.component.css index e69de29b..e69de29b 100644 --- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.css +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html new file mode 100644 index 00000000..1bc3c3f7 --- /dev/null +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html @@ -0,0 +1 @@ +<p>form-dataset works!</p> diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.spec.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.spec.ts index 5601b57b..51491c58 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.spec.ts +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { DatasetLoadComponent } from './dataset-load.component'; +import { FormDatasetComponent } from './form-dataset.component'; -describe('DatasetLoadComponent', () => { - let component: DatasetLoadComponent; - let fixture: ComponentFixture<DatasetLoadComponent>; +describe('FormDatasetComponent', () => { + let component: FormDatasetComponent; + let fixture: ComponentFixture<FormDatasetComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ DatasetLoadComponent ] + declarations: [ FormDatasetComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(DatasetLoadComponent); + fixture = TestBed.createComponent(FormDatasetComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts new file mode 100644 index 00000000..092e943f --- /dev/null +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-form-dataset', + templateUrl: './form-dataset.component.html', + styleUrls: ['./form-dataset.component.css'] +}) +export class FormDatasetComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/form-model/form-model.component.css diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html new file mode 100644 index 00000000..8f284c46 --- /dev/null +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -0,0 +1 @@ +<p>form-model works!</p> diff --git a/frontend/src/app/_elements/item-model/item-model.component.spec.ts b/frontend/src/app/_elements/form-model/form-model.component.spec.ts index f696a160..af1091cc 100644 --- a/frontend/src/app/_elements/item-model/item-model.component.spec.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ItemModelComponent } from './item-model.component'; +import { FormModelComponent } from './form-model.component'; -describe('ItemModelComponent', () => { - let component: ItemModelComponent; - let fixture: ComponentFixture<ItemModelComponent>; +describe('FormModelComponent', () => { + let component: FormModelComponent; + let fixture: ComponentFixture<FormModelComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ItemModelComponent ] + declarations: [ FormModelComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(ItemModelComponent); + fixture = TestBed.createComponent(FormModelComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts new file mode 100644 index 00000000..2ff8c605 --- /dev/null +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-form-model', + templateUrl: './form-model.component.html', + styleUrls: ['./form-model.component.css'] +}) +export class FormModelComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.css b/frontend/src/app/_elements/item-dataset/item-dataset.component.css deleted file mode 100644 index dc851671..00000000 --- a/frontend/src/app/_elements/item-dataset/item-dataset.component.css +++ /dev/null @@ -1,23 +0,0 @@ -.card{ - margin-top:0; - padding: 0; -} -.p-2{ - margin: 0; - padding: 0; -} -hr{ - margin: 0; - padding: 0; -} -b{ - margin-left: 5px; - margin-right: 10px; -} -th{ - margin: 10px; - padding: 10px; -} -p{ - text-align: justify; -}
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.html b/frontend/src/app/_elements/item-dataset/item-dataset.component.html deleted file mode 100644 index 11ff61c3..00000000 --- a/frontend/src/app/_elements/item-dataset/item-dataset.component.html +++ /dev/null @@ -1,41 +0,0 @@ -<div class="card" style="min-width: 12rem;"> -<div class="card-header d-flex mb-2 justify-content-" style="padding: 0;margin: 0;"> - - <div class=" p-2 float-left "><b style="color: gray;">Naziv</b></div> - <div class=" p-2 float-left"><b>{{dataset.name}}</b></div> -</div> -<div class="card-body overflow-hidden"> - <b style="color: gray;">Opis</b> - <hr style="width: 20%;"> <p> {{dataset.description}}</p> - <hr> - <div class="d-flex justify-content-center"> - <div class=" p-2" > - <h4><span class="badge bg-secondary">{{dataset.extension}}</span></h4> - </div> - <div class="p-2"> - <span class="material-icons">{{visibleicon}}</span> - </div> - <div class="p-2"> - <span class="material-icons">{{accessibleicon}}</span> - </div> - </div> - <hr> - <div class="col text-center"> -<button (click)=toggleDisplayDiv() class="btn btn-primary btn-sm active " mat-raised-button color="primary" style="margin: 0.5rem;">Kolone</button> - <div [hidden]="isShowDiv" style="overflow: scroll; overflow-y: hidden;"> - <table class="table table-bordered table-md" > - <thead> - <th scope="col" *ngFor="let column of dataset.columnInfo" >{{column.columnName}}</th> - </thead> - </table> - </div> -</div> - <table> - <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;"> <b> Kreirano</b></span></td><td>{{dataset.dateCreated |date}}</td></tr> - <tr><td><span class="material-icons">edit_calendar</span></td><td><span style="color: grey;"> <b> Poslednja izmena</b></span></td><td>{{dataset.lastUpdated |date}}</td></tr> - </table> - -</div> -<div class="card-footer"> - - </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-dataset/item-dataset.component.ts b/frontend/src/app/_elements/item-dataset/item-dataset.component.ts deleted file mode 100644 index 44b95310..00000000 --- a/frontend/src/app/_elements/item-dataset/item-dataset.component.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import Dataset from 'src/app/_data/Dataset'; - -@Component({ - selector: 'app-item-dataset', - templateUrl: './item-dataset.component.html', - styleUrls: ['./item-dataset.component.css'] -}) -export class ItemDatasetComponent { - - @Input() dataset: Dataset = new Dataset(); - visibleicon=''; - accessibleicon=''; - isShowDiv = true; - toggleDisplayDiv() { - this.isShowDiv = !this.isShowDiv; - } - constructor() { - } - ngOnInit(): void { - if(this.dataset.isPublic==true) - { - this.visibleicon='visibility' - } - else - { - this.visibleicon='visibility_off'; - } - - if(this.dataset.accessibleByLink==true) - { - this.accessibleicon='link' - } - else - { - this.accessibleicon='link_off'; - } - } -} - diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.html b/frontend/src/app/_elements/item-experiment/item-experiment.component.html deleted file mode 100644 index 51fbfef3..00000000 --- a/frontend/src/app/_elements/item-experiment/item-experiment.component.html +++ /dev/null @@ -1,10 +0,0 @@ -<div class="card" style="min-width: 12rem;"> - <div class="card-header"> - Naziv eksperimenta: <b>{{experiment.name}}</b> - </div> - <div class="card-body overflow-hidden"> - <p class="card-text"> - Opis: {{experiment.description}} - </p> - </div> -</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-experiment/item-experiment.component.ts b/frontend/src/app/_elements/item-experiment/item-experiment.component.ts deleted file mode 100644 index 31900d35..00000000 --- a/frontend/src/app/_elements/item-experiment/item-experiment.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import Experiment from 'src/app/_data/Experiment'; - -@Component({ - selector: 'app-item-experiment', - templateUrl: './item-experiment.component.html', - styleUrls: ['./item-experiment.component.css'] -}) -export class ItemExperimentComponent{ - - @Input() experiment: Experiment = new Experiment(); - - constructor() { } - -} diff --git a/frontend/src/app/_elements/item-model/item-model.component.css b/frontend/src/app/_elements/item-model/item-model.component.css deleted file mode 100644 index 5ea24c72..00000000 --- a/frontend/src/app/_elements/item-model/item-model.component.css +++ /dev/null @@ -1,23 +0,0 @@ -.card{ - margin: 0.5rem; - padding: 0; -} -.p-2{ - margin: 0; - padding: 0; -} -hr{ - margin: 0; - padding: 0; -} -b{ - margin-left: 5px; - margin-right: 10px; -} -th{ - margin: 10px; - padding: 10px; -} -p{ - text-align: justify; -}
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-model/item-model.component.html b/frontend/src/app/_elements/item-model/item-model.component.html deleted file mode 100644 index 447f023e..00000000 --- a/frontend/src/app/_elements/item-model/item-model.component.html +++ /dev/null @@ -1,58 +0,0 @@ -<div class="card" style="min-width: 12rem;"> - <div class="card-header d-flex mb-2 justify-content-" style="padding: 0;margin: 0;"> - - <div class=" p-2 float-left "><b style="color: gray;">Naziv</b></div> - <div class=" p-2 float-left"><b>{{model.name}}</b></div> - </div> - <div class="card-body overflow-hidden"> - <app-graph [model]="model"></app-graph> - <br> - <b style="color: gray;">Opis</b><hr style="width: 20%;"> - <p class="card-text"> - {{model.description}} - </p> - <hr> - - <div> - <table> - <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;"> <b> Kreirano</b></span></td><td>{{model.dateCreated |date}}</td></tr> - <tr><td><span class="material-icons">edit_calendar</span></td><td><span style="color: grey;"> <b> Poslednja izmena</b></span></td><td>{{model.lastUpdated |date}}</td></tr> - </table> - </div> - - </div> - <button (click)=toggleDisplayDiv() class="btn btn-default btn-lg " mat-raised-button color="primary" style="margin: 0.5rem;">Parametri</button> - <div [hidden]="isShowDiv"> - <!-- <table> - <tr> - <td><span style="color: grey;"> <b> Nasumično raspoređivanje podataka</b></span></td><td>{{randomOrd}}</td> - </tr> - <tr> - <td><span style="color: grey;"> <b> Podela podataka na trening i test skup</b></span></td><td>{{randomOrd}}</td> - </tr> - <tr> - <td><span style="color: grey;"> <b> Veličina skupa za treniranje</b></span></td><td>{{randomOrd}}</td> - </tr> - </table>--> - <hr> - <table> - <tr> - <td><span style="color: grey;"> <b> Tip problema</b></span></td><td>{{model.type}}</td> - </tr> - <tr> - <td><span style="color: grey;"> <b> Optimizator</b></span></td><td>{{model.optimizer}}</td> - </tr> - <tr> - <td> <span style="color: grey;"> <b> Funkcija gubitka</b></span></td><td>{{model.lossFunction}}</td> - </tr> - <tr> - <td><span style="color: grey;"> <b> Batch size</b></span></td><td>{{model.batchSize}}</td> - </tr> - <tr> - <td><span style="color: grey;"> <b> Broj epoha</b></span></td><td>{{model.epochs}}</td> - </tr> - - </table> - - </div> -</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-model/item-model.component.ts b/frontend/src/app/_elements/item-model/item-model.component.ts deleted file mode 100644 index b837667b..00000000 --- a/frontend/src/app/_elements/item-model/item-model.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import Model from 'src/app/_data/Model'; - -@Component({ - selector: 'app-item-model', - templateUrl: './item-model.component.html', - styleUrls: ['./item-model.component.css'] -}) -export class ItemModelComponent implements OnInit { - - @Input() model: Model = new Model(); - isShowDiv = true; - randomOrd=''; - - toggleDisplayDiv() { - this.isShowDiv = !this.isShowDiv; - } - - constructor() { } - - ngOnInit(): void { - /*if(this.model.randomOrder) - { - this.randomOrd='Da'; - } - else - { - this.randomOrd='Ne'; - } -*/ - } - -} diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.html b/frontend/src/app/_elements/item-predictor/item-predictor.component.html deleted file mode 100644 index 3199dcc8..00000000 --- a/frontend/src/app/_elements/item-predictor/item-predictor.component.html +++ /dev/null @@ -1,35 +0,0 @@ -<div class="card" style="min-width: 12rem;"> - <div class="card-header d-flex mb-2 justify-content-" style="padding: 0;margin: 0;"> - - <div class=" p-2 float-left "><b style="color: gray;">Prediktor</b></div> - - </div> - <div class="card-body overflow-hidden"> - <b style="color: gray;">Opis</b><hr style="width: 20%;"> - <p class="card-text"> - {{predictor.description}} - </p> - - <b style="color: gray;">Ulazne kolone</b> - <div style="overflow: scroll; overflow-y: hidden;"> - - <table class="table table-bordered table-md" > - <thead> - <th scope="col" *ngFor="let column of predictor.inputs" >{{column}}</th> - </thead> - </table> - </div> - <b style="color: gray;">Izlazna kolona: </b><b>{{predictor.output}}</b> - <hr> - <div> - <table> - <tr><td><span class="material-icons">calendar_today</span></td><td><span style="color: grey;"> <b> Kreirano</b></span></td><td>{{predictor.dateCreated |date}}</td></tr> - </table> - </div> - </div> - <div class="card-footer text-center"> - <button class="btn btn-md col-4" style="background-color:#003459; color:white;" - (click)="openPredictor();">Iskoristi</button> - - </div> -</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts deleted file mode 100644 index b5c2d91c..00000000 --- a/frontend/src/app/_elements/item-predictor/item-predictor.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ItemPredictorComponent } from './item-predictor.component'; - -describe('ItemPredictorComponent', () => { - let component: ItemPredictorComponent; - let fixture: ComponentFixture<ItemPredictorComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ItemPredictorComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(ItemPredictorComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts b/frontend/src/app/_elements/item-predictor/item-predictor.component.ts deleted file mode 100644 index 246032e0..00000000 --- a/frontend/src/app/_elements/item-predictor/item-predictor.component.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import Predictor from 'src/app/_data/Predictor'; - -@Component({ - selector: 'app-item-predictor', - templateUrl: './item-predictor.component.html', - styleUrls: ['./item-predictor.component.css'] -}) -export class ItemPredictorComponent implements OnInit { - - @Input() predictor: Predictor = new Predictor(); - - constructor(private router: Router) { } - - ngOnInit(): void { - } - - openPredictor() { - this.router.navigate(['predict/'+ this.predictor._id]); - } - -} diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.css b/frontend/src/app/_elements/metric-view/metric-view.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/metric-view/metric-view.component.css diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html new file mode 100644 index 00000000..e7a4c547 --- /dev/null +++ b/frontend/src/app/_elements/metric-view/metric-view.component.html @@ -0,0 +1,5 @@ +<div> + <app-line-chart> + + </app-line-chart> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/model-load/model-load.component.spec.ts b/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts index 1dafd966..c3ecc67f 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.spec.ts +++ b/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { ModelLoadComponent } from './model-load.component'; +import { MetricViewComponent } from './metric-view.component'; -describe('ModelLoadComponent', () => { - let component: ModelLoadComponent; - let fixture: ComponentFixture<ModelLoadComponent>; +describe('MetricViewComponent', () => { + let component: MetricViewComponent; + let fixture: ComponentFixture<MetricViewComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ ModelLoadComponent ] + declarations: [ MetricViewComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(ModelLoadComponent); + fixture = TestBed.createComponent(MetricViewComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts new file mode 100644 index 00000000..3840692a --- /dev/null +++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts @@ -0,0 +1,49 @@ +import { Component, Input, OnInit, ViewChild } from '@angular/core'; +import { LineChartComponent } from '../_charts/line-chart/line-chart.component'; + +@Component({ + selector: 'app-metric-view', + templateUrl: './metric-view.component.html', + styleUrls: ['./metric-view.component.css'] +}) +export class MetricViewComponent implements OnInit { + @ViewChild(LineChartComponent) linechartComponent!: LineChartComponent; + + constructor() { } + + ngOnInit(): void { + } + + history: any[] = []; + + update(history: any[]) { + const myAcc: number[] = []; + const myMae: number[] = []; + const myMse: number[] = []; + const myLoss: number[] = []; + + const myEpochs: number[] = []; + this.history = history; + this.history.forEach((metrics, epoch) => { + myEpochs.push(epoch + 1); + for (let key in metrics) { + let value = metrics[key]; + console.log(key, ':::', value, epoch); + if (key === 'accuracy') { + myAcc.push(parseFloat(value)); + } + else if (key === 'loss') { + myLoss.push(parseFloat(value)); + } + else if (key === 'mae') { + myMae.push(parseFloat(value)); + } + else if (key === 'mse') { + myMse.push(parseFloat(value)); + } + } + }); + + this.linechartComponent.update(myEpochs, myAcc, myLoss, myMae, myMse); + } +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/model-load/model-load.component.css b/frontend/src/app/_elements/model-load/model-load.component.css deleted file mode 100644 index c716f964..00000000 --- a/frontend/src/app/_elements/model-load/model-load.component.css +++ /dev/null @@ -1,17 +0,0 @@ -.btnType1 { - background-color: #003459; - color: white; - padding-top: 2vh; - padding-bottom: 2vh; -} -.btnType2 { - background-color: white; - color: #003459; - border-color: #003459; - padding-top: 2vh; - padding-bottom: 2vh; -} -.selectedModelClass { - /*border-color: 2px solid #003459;*/ - background-color: lightblue; -}
\ No newline at end of file diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html deleted file mode 100644 index 85caca0d..00000000 --- a/frontend/src/app/_elements/model-load/model-load.component.html +++ /dev/null @@ -1,227 +0,0 @@ -<div> - <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5"> - <button type="button" id="btnMyModel" class="btn" (click)="viewMyModelsForm()" - [ngClass]="{'btnType1': showMyModels, 'btnType2': !showMyModels}"> - Izaberite model iz kolekcije - </button> - <h3 class="mt-3 mx-3">ili</h3> - <button type="button" id="btnNewModel" class="btn" (click)="viewNewModelForm()" - [ngClass]="{'btnType1': !showMyModels, 'btnType2': showMyModels}"> - Dodajte novi model - </button> - </div> - - <div *ngIf="showMyModels" class="px-5 my-3"> - <input *ngIf="showMyModels" type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> - </div> - <div *ngIf="showMyModels" class="px-5"> - <div class="overflow-auto" style="max-height: 500px;"> - <ul class="list-group"> - <li class="list-group-item p-3" *ngFor="let model of myModels|filter:term" - [ngClass]="{'selectedModelClass': this.selectedModel == model}"> - <app-item-model name="usersModel" [model]="model" (click)="selectThisModel(model);"> - </app-item-model> - </li> - </ul> - <div class="px-5 mt-5"> - <!--prikaz izabranog modela--> - </div> - </div> - </div> - - - <div *ngIf="!showMyModels"> - <div class="form-group row mt-3 mb-2 d-flex justify-content-center"> - - <div class="col-3"> - <label for="name" class="col-form-label">Naziv modela:</label> - <input type="text" class="form-control" name="name" placeholder="Naziv..." [(ngModel)]="newModel.name"> - </div> - <div class="col-5"> - <label for="desc" class="col-sm-2 col-form-label">Opis:</label> - <div> - <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea> - </div> - </div> - - </div> - <h2 class="mt-5 mb-4 mx-5">Parametri treniranja modela:</h2> - <div> - - <div class="row p-2"> - <div class="col-1"></div> - <div class="col-3"> - <label for="type" class="col-form-label">Tip problema: </label> - </div> - <div class="col-2"> - <select id=typeOptions class="form-select" name="type" [(ngModel)]="newModel.type" - (change)="filterOptions()"> - <option - *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" - [value]="option"> - {{ optionName }} - </option> - </select> - </div> - <div class="col-1"></div> - <div class="col-3"> - <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label> - </div> - <div class="col-1"> - <input type="number" min="1" class="form-control" name="hiddenLayers" - [(ngModel)]="newModel.hiddenLayers" - (change)="newModel.hiddenLayerActivationFunctions = [].constructor(newModel.hiddenLayers).fill(newModel.hiddenLayerActivationFunctions[0])" - (ngModelChange)="updateGraph()"> - </div> - </div> - - <div class="row p-2"> - <div class="col-1"> - </div> - <div class="col-3"> - <label for="optimizer" class="col-form-label">Optimizacija: </label> - </div> - <div class="col-2"> - <select id=optimizerOptions class="form-select" name="optimizer" [(ngModel)]="newModel.optimizer"> - <option - *ngFor="let option of Object.keys(Optimizer); let optionName of Object.values(Optimizer)" - [value]="option"> - {{ optionName }} - </option> - </select> - </div> - <div class="col-1"> - </div> - <div class="col-3"> - <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label> - </div> - <div class="col-1"> - <input type="number" min="1" class="form-control" name="hiddenLayerNeurons" - [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()"> - </div> - </div> - - <div class="row p-2"> - <div class="col-1"></div> - <div class="col-3"> - <label for="lossFunction" class="col-form-label">Funkcija troška: </label> - </div> - <div class="col-2"> - <select id=lossFunctionOptions class="form-select" name="lossFunction" - [(ngModel)]="newModel.lossFunction" aria-checked="true"> - <option - *ngFor="let option of Object.keys(lossFunction); let optionName of Object.values(lossFunction)" - [value]="option"> - {{ optionName }} - </option> - </select> - </div> - <div class="col-1"></div> - <div class="col-3"> - <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label> - </div> - <div class="col-1"> - - <input type="number" min="0" step="1" max="7" class="form-control" name="batchSizePower" [(ngModel)]="batchSizePower" (click)="updateBatchSize()" > - {{newModel.batchSize}} - <!--<select id=BatchSizeOptions class="form-select" name="batchSize" [(ngModel)]="newModel.batchSize"> - <option value="1">1</option> - <option value="2">2</option> - <option value="4">4</option> - <option value="8">8</option> - <option value="16">16</option> - <option value="32">32</option> - <option value="64">64</option> - <option value="128">128</option> - <option value="256">256</option> - <option value="512">512</option> - <option value="1024">1024</option> - </select>--> - </div> - - <div class="row p-2"> - <div class="col-1"></div> - <div class="col-3 m-1"> - <label for="epochs" class="col-form-label">Broj epoha: </label> - </div> - <div class="col-1"> - <input type="number" min="1" max="1000" class="form-control" name="epochs" - [(ngModel)]="newModel.epochs"> - </div> - </div> - </div> - - <div class="m-5"> - <app-graph [model]="newModel" [inputCols]="1"></app-graph> - </div> - - <h3 class="mx-5 mt-4">Aktivacione funkcije:</h3> - - <div class="row p-2" style="align-self: center;"> - <div class="col-1"></div> - <div class="col-3"> - <label for="hiddenLayerActivationFunction" class="col-form-label" - style="text-align: center;">Funkcija aktivacije<br>skrivenih slojeva:</label> - </div> - <div class="col-2 mt-2"> - <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index"> - <div class="input-group mb-2"> - <div class="input-group-prepend"> - <span class="input-group-text">#{{i+1}}</span> - </div> - <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-select" - [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]" > - <option - *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" - [value]="option"> - {{ optionName }} - </option> - </select> - </div> - </div> - </div> - <div class="col-1"></div> - <div class="col-2"> - <label for="outputLayerActivationFunction" class="col-form-label" - style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label> - </div> - <div class="col-2 mt-2"> - <select id=outputLayerActivationFunctionOptions class="form-select" - name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> - <option - *ngFor="let option of Object.keys(ActivationFunction); let optionName of Object.values(ActivationFunction)" - [value]="option"> - {{ optionName }} - </option> - </select> - </div> - <div class="col"> - </div> - </div> - </div> - - <div class="form-check form-check-inline overflow-auto m-4" style="width: max-content;"> - <h3>Izaberite metrike:</h3> - <div id="divMetricsinput" class="mt-2 mx-5"> - - <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) " - class="form-check form-check-inline"> - - <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}" - id="metrics_{{option}}" style="float: left;" checked> - <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2"> - {{optionName}} - </label> - </div> - </div> - </div> - - <div class="form-group row mt-3 mb-3"> - <div class="col"></div> - <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" - (click)="uploadModel();">Sačuvaj - model</button> - <div class="col"></div> - </div> - </div> -</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts deleted file mode 100644 index 73872694..00000000 --- a/frontend/src/app/_elements/model-load/model-load.component.ts +++ /dev/null @@ -1,112 +0,0 @@ -import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core'; -import Shared from 'src/app/Shared'; -import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; -import { ModelsService } from 'src/app/_services/models.service'; -import { GraphComponent } from '../graph/graph.component'; - - -@Component({ - selector: 'app-model-load', - templateUrl: './model-load.component.html', - styleUrls: ['./model-load.component.css'] -}) -export class ModelLoadComponent implements OnInit { - - @ViewChild(GraphComponent) graph!: GraphComponent; - @Output() selectedModelChangeEvent = new EventEmitter<Model>(); - - newModel: Model = new Model(); - myModels?: Model[]; - selectedModel?: Model; - - ProblemType = ProblemType; - ActivationFunction = ActivationFunction; - metrics: any = Metrics; - LossFunction = LossFunction; - Optimizer = Optimizer; - Object = Object; - document = document; - shared = Shared; - - term: string = ""; - selectedProblemType: string = ''; - selectedMetrics = []; - lossFunction: any = LossFunction; - - showMyModels: boolean = true; - - constructor(private modelsService: ModelsService) { - this.modelsService.getMyModels().subscribe((models) => { - this.myModels = models; - }); - } - - ngOnInit(): void { - } - batchSizePower:number=1; - updateBatchSize() - { - this.newModel.batchSize=2**this.batchSizePower; - } - - updateGraph() { - this.graph.update(); - } - - getMetrics() { - this.newModel.metrics = []; - let cb = document.getElementsByName("cbmetrics"); - - for (let i = 0; i < cb.length; i++) { - let chb = <HTMLInputElement>cb[i]; - if (chb.checked == true) - this.newModel.metrics.push(chb.value); - } - } - - uploadModel() { - this.getMetrics(); - - this.newModel.uploaderId = Shared.userId; - - this.modelsService.addModel(this.newModel).subscribe((response) => { - Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.'); - // treba da se selektuje nov model u listi modela - //this.selectedModel = - }, (error) => { - Shared.openDialog('Greška', 'Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom.'); - }); - } - - filterOptions() { - switch (this.newModel.type) { - case 'regresioni': - this.lossFunction = LossFunctionRegression; - this.metrics = MetricsRegression; - break; - case 'binarni-klasifikacioni': - this.lossFunction = LossFunctionBinaryClassification; - this.metrics = MetricsBinaryClassification; - break; - case 'multi-klasifikacioni': - this.lossFunction = LossFunctionMultiClassification; - this.metrics = MetricsMultiClassification; - break; - default: - break; - } - } - - viewMyModelsForm() { - this.showMyModels = true; - } - viewNewModelForm() { - this.showMyModels = false; - } - - selectThisModel(model: Model) { - this.selectedModel = model; - this.selectedModelChangeEvent.emit(this.selectedModel); - } - -} diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.html b/frontend/src/app/_elements/select-item-list/select-item-list.component.html deleted file mode 100644 index b92b7adb..00000000 --- a/frontend/src/app/_elements/select-item-list/select-item-list.component.html +++ /dev/null @@ -1 +0,0 @@ -<p>select-item-list works!</p> diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts b/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts deleted file mode 100644 index 0abc7ab5..00000000 --- a/frontend/src/app/_elements/select-item-list/select-item-list.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { SelectItemListComponent } from './select-item-list.component'; - -describe('SelectItemListComponent', () => { - let component: SelectItemListComponent; - let fixture: ComponentFixture<SelectItemListComponent>; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ SelectItemListComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(SelectItemListComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/frontend/src/app/_elements/select-item-list/select-item-list.component.ts b/frontend/src/app/_elements/select-item-list/select-item-list.component.ts deleted file mode 100644 index f6aae7a0..00000000 --- a/frontend/src/app/_elements/select-item-list/select-item-list.component.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'app-select-item-list', - templateUrl: './select-item-list.component.html', - styleUrls: ['./select-item-list.component.css'] -}) -export class SelectItemListComponent implements OnInit { - - constructor() { } - - ngOnInit(): void { - } - -} 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 --- /dev/null +++ b/frontend/src/app/_pages/archive/archive.component.css 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 @@ +<p>archive works!</p> diff --git a/frontend/src/app/_pages/predict/predict.component.spec.ts b/frontend/src/app/_pages/archive/archive.component.spec.ts index 65871ecc..41fc8e77 100644 --- a/frontend/src/app/_pages/predict/predict.component.spec.ts +++ b/frontend/src/app/_pages/archive/archive.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { PredictComponent } from './predict.component'; +import { ArchiveComponent } from './archive.component'; -describe('PredictComponent', () => { - let component: PredictComponent; - let fixture: ComponentFixture<PredictComponent>; +describe('ArchiveComponent', () => { + let component: ArchiveComponent; + let fixture: ComponentFixture<ArchiveComponent>; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ PredictComponent ] + declarations: [ ArchiveComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(PredictComponent); + fixture = TestBed.createComponent(ArchiveComponent); component = fixture.componentInstance; fixture.detectChanges(); }); 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.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 @@ -<p>browse-datasets works!</p> 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<BrowseDatasetsComponent>; - - 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 @@ - -<div id="wrapper"> - - <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> - <div class="row mt-3 mb-2 d-flex justify-content-center"> - - <div class="col-sm-6" style="margin-bottom: 10px;"> - <p class="glyphicon glyphicon-search"></p> - <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> - - </div> - - <div class="row"> - <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let predictor of publicPredictors | filter:term"> - <div class="card h-100"> - <div class="card-body"> - <h3 class="card-title"><b>{{predictor.name}}</b></h3> - <p class="card-text">{{predictor.description}}</p> - <a class="btn btn-primary" (click)="openPredictor(predictor._id)">Iskoristi</a> - </div> - <div class="card-footer text-muted"> - Kreirao: {{predictor.username}} <br> - Datum kreiranja: {{predictor.dateCreated |date}} - </div> - </div> - </div> - - - </div> - <div class="text-center"*ngIf="( publicPredictors != undefined && publicPredictors|filter:term).length === 0"> - <h2>Nema rezultata</h2> - </div> - </div> - - </div> - - - - -</div>
\ 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<BrowsePredictorsComponent>; - - 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 --- /dev/null +++ b/frontend/src/app/_pages/experiment/experiment.component.css 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 @@ +<p>experiment works!</p> diff --git a/frontend/src/app/experiment/experiment.component.spec.ts b/frontend/src/app/_pages/experiment/experiment.component.spec.ts index fd2bbd30..fd2bbd30 100644 --- a/frontend/src/app/experiment/experiment.component.spec.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.spec.ts 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.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 @@ - -<div id="wrapper"> - - <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> - <div class="row mt-3 mb-2 d-flex justify-content-center"> - - <div class="col-sm-6" style="margin-bottom: 10px;"> - <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> - </div> - - <div class="row"> - <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let dataset of publicDatasets | filter:term"> - <div class="card h-100"> - <div class="card-body"> - <h3 class="card-title"><b>{{dataset.name}}</b></h3> - <p class="card-text">{{dataset.description}}</p> - <a class="btn btn-primary" (click)="addDataset(dataset)">Dodaj dataset</a> - </div> - <div class="card-footer text-muted"> - Kreirao: {{dataset.username}} <br> - Datum kreiranja: {{dataset.dateCreated |date}} - </div> - </div> - </div> - - - </div> - <div class="text-center"*ngIf="( publicDatasets != undefined && publicDatasets|filter:term).length === 0"> - <h2>Nema rezultata</h2> - </div> - </div> - - </div> - - - - -</div> 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<FilterDatasetsComponent>; - - 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] = (<Dataset>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 @@ -<div id="header"> - <h1>Moji setovi podataka</h1> -</div> -<div id="wrapper"> - <div id="container" class="container p-5" style="background-color: rgba(255, 255, 255, 0.8); min-height: 100%;"> - <div class="row mt-3 mb-2 d-flex justify-content-center"> - - <div class="col-sm-6" style="margin-bottom: 10px;"> - </div> - - <div class="row"> - <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let dataset of myDatasets"> - <app-item-dataset [dataset]="dataset"></app-item-dataset> - - <div class="panel-footer row"><!-- panel-footer --> - <div class="col-xs-6 text-center"> - <div> - <div> - <button (click)="deleteThisDataset(dataset)" mat-raised-button color="warn" style="min-width: 10rem;float: right" ><mat-icon>delete</mat-icon></button> - </div> - - </div> - </div> - </div><!-- end panel-footer --> - </div> - </div> - <div class="text-center" *ngIf="this.myDatasets.length == 0" > - <h2>Nema rezultata</h2> - </div> - </div> - - - </div> - - - - - - </div> 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<MyDatasetsComponent>; - - 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 @@ -<div id="header"> - <h1>Moji modeli</h1> -</div> -<div id="wrapper"> - <div id="container" class="container p-5" style="background-color: rgba(255, 255, 255, 0.8); min-height: 100%;"> - <div class="row mt-3 mb-2 d-flex justify-content-center"> - - <div class="col-sm-6" style="margin-bottom: 10px;"> - </div> - - <div class="row"> - <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let model of myModels"> - <app-item-model [model]="model"></app-item-model> - - <div class="panel-footer row"><!-- panel-footer --> - <div class="col-xs-6 text-center"> - <div> - <button type="button" class="btn btn-default btn-lg"style="min-width: 7rem;float: left;" (click)="useThisModel(model)" mat-raised-button color="primary">Koristi - <span class="glyphicon glyphicon-search"></span> - </button> - <button (click)="deleteThisModel(model)" mat-raised-button color="warn" style="min-width: 7rem;float: right" ><mat-icon>delete</mat-icon></button> - - - </div> - </div> - </div><!-- end panel-footer --> - - - - </div> - </div> - <div class="text-center" *ngIf="this.myModels.length == 0" > - <h2>Nema rezultata</h2> - </div> - </div> - - </div> - - - - - - </div> 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 @@ -<div id="header"> - <h1>Trenirani modeli</h1> -</div> -<div id="wrapper"> -<div id="container" class="container p-5" style="background-color:rgba(255, 255, 255, 0.8); min-height: 100%;"> - <div class="row mt-3 mb-2 d-flex justify-content-center"> - - <div class="col-sm-6" style="margin-bottom: 10px;"> - </div> - <div class="row"> - <div class="col-sm-4" style="margin-bottom: 10px;" *ngFor="let predictor of predictors"> - <app-item-predictor [predictor]="predictor"></app-item-predictor> - <div> - <button (click)="deleteThisPredictor(predictor)" mat-raised-button color="warn" style="min-width: 10rem;float: right" ><mat-icon>delete</mat-icon></button> - </div> - </div> - </div> -</div> -</div> -</div> - - - 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<MyPredictorsComponent>; - - 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 @@ - -<div id="wrapper"> - <br> - <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> - - <div id="header"> - <h1>Iskoristite prediktor</h1> - </div> - - <br> - - <div class="form-group row mt-3 mb-2 d-flex justify-content-left"> - <!--justify-content-center--> - <h2> Izabrani prediktor: </h2> - <div class="col-10"> - <label for="output" class="col-sm-5 col-form-label">Naziv prediktora: <b>{{predictor.name}}</b></label> - </div> - <div> - <label for="output" class="col-sm-5 col-form-label">Opis prediktora: <b>{{predictor.description}}</b></label> - </div> - - - </div> - <br> - <label for="type" class="form-check-label" ><b>Informacije o prediktoru</b></label> - <div class="col-5 mt-2"> - <label for="type" class="form-check-label" >Prediktor {{predictor.isPublic?"je":"nije"}} javni.</label> - </div> - <div class="col-5 mt-2"> - <label for="type" class="form-check-label" >Prediktor {{predictor.accessibleByLink?"je":"nije"}} dostupan za deljenje.</label> - </div> - <br> - <div class="col-2"> - <label for="dateCreated" class="col-form-label">Datum:</label> - <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--" - value="{{predictor.dateCreated | date: 'dd/MM/yyyy'}}" readonly> - </div> - - - <br> - <div > - <!--input --> - <h3>Popunite ulazne kolone:</h3> - <div id="divInputs" class="form-check mt-2"> - <div *ngIf="predictor" class="form-group row mt-3 mb-2 d-flex justify-content-left"> - <div *ngFor="let input of predictor.inputs; let i = index"> - <label for="{{input}}" class="col-sm-2 col-form-label"><b>{{input}}</b></label> - <input name="{{input}}" type="text" [(ngModel)]="inputs[i].value" > - - </div> - - </div> - </div> - - <br> - - </div> - <div> - <label for="output" class="col-sm-2 col-form-label">Izlaz: <b>{{predictor.output}}</b></label> - </div> - - <div class="form-group row mt-5 mb-3"> - <div class="col"></div> - <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" - (click)="usePredictor();">Iskoristi prediktor</button> - <div class="col"></div> - - </div> - - - - </div> -</div>
\ No newline at end of file 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/configuration.service.spec.ts b/frontend/src/app/_services/configuration.service.spec.ts index ec51dfa5..4b9322b5 100644 --- a/frontend/src/app/configuration.service.spec.ts +++ b/frontend/src/app/_services/configuration.service.spec.ts @@ -1,6 +1,6 @@ import { TestBed } from '@angular/core/testing'; -import { ConfigurationService } from './configuration.service'; +import { Configuration as ConfigurationService } from './configuration.service'; describe('ConfigurationService', () => { let service: ConfigurationService; diff --git a/frontend/src/app/configuration.service.ts b/frontend/src/app/_services/configuration.service.ts index 4d2b0987..cda1091a 100644 --- a/frontend/src/app/configuration.service.ts +++ b/frontend/src/app/_services/configuration.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; -import { IConfig } from '../app/_data/IConfig' +import { IConfig } from '../_data/IConfig' @Injectable() export class Configuration { 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<Predictor[]>(`${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/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 @@ -<div id="header"> - <h1>Napravite svoju veštačku neuronsku mrežu</h1> -</div> -<div id="wrapper"> - <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> - - <div class="d-flex flex-row justify-content-center align-items-center my-3"> - <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="0">Izvor podataka</a> - <mat-icon>arrow_forward</mat-icon> - <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1">Preprocesiranje</a> - <mat-icon>arrow_forward</mat-icon> - <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2">Dodaj eksperiment</a> - </div> - - <div id="carouselExampleControls" class="carousel slide px-5 mt-5" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false"> - <div class="carousel-inner"> - <div class="carousel-item active mt-2"> - <h2 class="mb-5">1. Izvor podataka</h2> - <app-dataset-load (selectedDatasetChangeEvent)="updateDataset($event)"></app-dataset-load> - </div> - - <div class="carousel-item mt-2"> - <h2 class="mb-4">2. Preprocesiranje</h2> - - <div class="px-5"> - <h3>Biranje ulaznih i izlaznih kolona:</h3> - <div *ngIf="selectedDataset"> - <div class="row"> - <div class="col d-flex justify-content-center"> - <h3>Izaberite ulazne kolone:</h3> - <div id="divInputs" class="form-check mt-2"> - <br> - <div *ngFor="let item of selectedDataset.columnInfo; let i = index"> - <input class="form-check-input" type="checkbox" value="{{item.columnName}}" id="cb_{{item.columnName}}" name="cbsNew" [checked]="experiment.outputColumn != item.columnName" [disabled]="experiment.outputColumn == item.columnName" (change)="resetColumnEncodings()" - (click)="checkedColumnsChanged(item, 0)"> - <label class="form-check-label" for="cb_{{item.columnName}}"> - {{item.columnName}} - </label> - </div> - </div> - </div> - <div class="col d-flex justify-content-left"> - <h3>Izaberite izlaznu kolonu:</h3> - <div id="divOutputs" class="form-check mt-2"> - <br> - <div *ngFor="let item of selectedDataset.columnInfo; let i = index"> - <input class="form-check-input" type="radio" value="{{item.columnName}}" id="rb_{{item.columnName}}" name="rbsNew" [(ngModel)]="this.experiment.outputColumn" (change)="experiment.outputColumn = item.columnName; resetColumnEncodings();" (click)="checkedColumnsChanged(item, 1);"> - <label class="form-check-label" for="rb_{{item.columnName}}"> - {{item.columnName}} - </label> - </div> - </div> - </div> - </div> - </div> - - <h3 class="mt-5">Popunjavanje nedostajućih vrednosti:</h3> - <div class="form-check" *ngIf="selectedDataset"> - <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.DeleteRows" class="form-check-input" value="deleteRows" name="fillMissing" id="delRows" checked data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show"> - <label for="delRows" class="form-check-label">Obriši sve - redove sa nedostajućim vrednostima ({{selectedDataset.nullRows}} od {{selectedDataset.rowCount}})</label><br> - <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.DeleteColumns" class="form-check-input" value="deleteCols" name="fillMissing" id="delCols" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom.show"> - <label for="delCols" class="form-check-label">Obriši sve - kolone sa nedostajućim vrednostima ({{countSelectedNullCols()}} od {{selectedDataset.columnInfo.length}})</label><br> - <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace" class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse" data-bs-target="#fillMissingCustom:not(.show)"> - <label for="replace" class="form-check-label">Izabraću - vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br> - <div class="collapse" id="fillMissingCustom"> - <div> - <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label> - <div class="my-3" *ngIf="getSelectedColumnsArrayWithoutNullVals().length > 0"> - <label class="text-center form-control mx-3 text-secondary"> - Kolone <span style="font-style: italic;" *ngFor="let colname of getSelectedColumnsArrayWithoutNullVals(); let i = index"> - <span *ngIf="i != getSelectedColumnsArrayWithoutNullVals().length - 1">{{colname}}, </span> - <span *ngIf="i == getSelectedColumnsArrayWithoutNullVals().length - 1">{{colname}} </span> - </span> - nemaju nedostajućih vrednosti za popunjavanje. - </label> - </div> - <div id="columnReplacers"> - <div *ngFor="let column of selectedColumnsInfoArray; let i = index" class="my-3"> - <div *ngIf="column.numNulls > 0"> - <span class="w-20 mx-3"> - {{column.columnName}} <span class="small" style="color:gray;">({{column.numNulls}} null) - </span> - </span> - - <label *ngIf="column.numNulls <= 0" class="text-center form-control mx-3 text-secondary"> - Ova kolona nema - nedostajućih - vrednosti. - </label> - - <div *ngIf="column.numNulls > 0" class="d-flex flex-row justify-content-end"> - <div class="flex-grow-3 mx-3 me-auto"> - <div class="input-group"> - <div class="input-group-prepend"> - <label [for]="'fillCol_'+column.columnName" class="form-control"> - Zameni - <input type="radio" [id]="'fillCol_'+column.columnName" - [name]="'delOp_'+column.columnName"> - </label> - </div> - <input type="text" class="form-control" [id]="'fillText_'+column.columnName" (keyup)="checkFillColRadio(column.columnName)" placeholder="Unesi vrednost..."> - - <div class="input-group-append"> - <select [id]="'replaceOptions'+i" class="form-control btn-primary" *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);"> - <option - *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)" - [value]="option"> - {{ optionName }} - </option> - </select> - <select [id]="'replaceOptions'+i" class="form-control btn-outline-primary" *ngIf="!column.isNumber && column.numNulls > 0" (change)="replace($event, column); checkFillColRadio(column.columnName);"> - <option *ngFor="let option of column.uniqueValues" [value]="option"> - {{ option }} - </option> - </select> - </div> - </div> - </div> - - <div class="flex-shrink-1 mx-3"> - <div class="input-group"> - <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši - kolonu - <input type="radio" [id]="'delCol_'+column.columnName" - [name]="'delOp_'+column.columnName" - (change)="emptyFillTextInput(column.columnName)"></label> - </div> - </div> - - <div class="flex-shrink-1 mx-3"> - <div class="input-group"> - <label class="form-control" [for]="'delRows_'+column.columnName">Izbriši - redove - <input type="radio" [id]="'delRows_'+column.columnName" - [name]="'delOp_'+column.columnName" checked - (change)="emptyFillTextInput(column.columnName)"></label> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - - <div id="randomOptions" class="mt-5"> - <div class="p-2 m-2"> - <label for="type" class="form-check-label">Želite li da redosled podataka bude nasumičan?</label> - <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="experiment.randomOrder" type="checkbox" value="" checked> - </div> - <div class="border m-3"> - <div class="row p-2 m-2"> - <div class="col-4"> - <label for="splitYesNo" class="form-check-label"> - <h3>Podela test skupa: - <input id="splitYesNo" class="form-check-input" type="checkbox" - [checked]="experiment.randomTestSet" - (change)="experiment.randomTestSet = !experiment.randomTestSet"> - </h3> - </label> - </div> - <div class="col-8"> - trening - <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10" name="randomTestSetDistribution" thumbLabel [disabled]="!experiment.randomTestSet" [(ngModel)]="tempTestSetDistribution"> - </mat-slider> - test - </div> - </div> - - <div class="row p-2 m-2"> - <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening - skup:</label> - <input id="percentage" type="number" class="form-control mx-3" style=" max-width: 15%" min="10" max="90" step="10" value="90" [(ngModel)]="tempTestSetDistribution" [disabled]="!experiment.randomTestSet"> - </div> - </div> - </div> - - <div id="encodingsForColumns" class="px-3 my-5"> - <label for="encoding" class="col-form-label mb-2">Enkoding za izabrane kolone:</label> - - <div class="row d-flex flex-row justify-content-between align-items-center"> - <div class="col-5" *ngFor="let item of [].constructor(selectedColumnsInfoArray.length); let i = index"> - <div class="input-group mb-2"> - <div class="input-group-prepend"> - <span class="input-group-text">{{selectedColumnsInfoArray[i].columnName}}</span> - </div> - <select [id]="'encodingOption_'+i" class="form-control" [(ngModel)]="experiment.encodings[i].encoding"> - <option - *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" - [value]="option"> - {{ optionName }} - </option> - </select> - </div> - </div> - </div> - </div> - - </div> - - - </div> - - <div class="carousel-item mt-2"> - <h2 class="mb-4">3. Dodaj eskperiment</h2> - - <div class="row"> - <div class="col"></div> - <div class="col-8"> - <label for="name" class="col-form-label">Naziv eksperimenta:</label> - <input type="text" class="form-control mb-3" name="name" placeholder="Naziv..." [(ngModel)]="experiment.name"> - - <label for="desc" class="col-sm-2 col-form-label">Opis:</label> - <div> - <textarea class="form-control" name="desc" rows="3" [(ngModel)]="experiment.description"></textarea> - </div> - <div class="form-group row mt-5 mb-3"> - <div class="col"></div> - <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="saveExperiment();">Sačuvaj - eksperiment</button> - <div class="col"></div> - </div> - </div> - <div class="col"></div> - </div> - </div> - - </div> - <div class="m-3 d-flex flex-row justify-content-between align-items-center" style=" margin-left: auto;"> - <button mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="prev"> - <mat-icon>arrow_backward</mat-icon> - </button> - <button mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="next"> - <mat-icon>arrow_forward</mat-icon> - </button> - </div> - </div> - </div> -</div>
\ No newline at end of file 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<any>): Set<string> { - if (set.has("")) - set.delete(""); - if (set.has(null)) - set.delete(null); - if (set.has(undefined)) - set.delete(undefined); - return set; - } - - emptyFillTextInput(colName: string) { - (<HTMLInputElement>document.getElementById("fillText_" + colName)).value = ""; - } - - checkFillColRadio(colName: string) { - (<HTMLInputElement>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 = (<HTMLInputElement>event.target).value; - - const input = (<HTMLInputElement>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 ((<HTMLInputElement>document.getElementById("delCol_" + oneColInfo.columnName)).checked) { - array.push({ - column: oneColInfo.columnName, - option: NullValueOptions.DeleteColumns, - value: "" - }); - } - else if ((<HTMLInputElement>document.getElementById("delRows_" + oneColInfo.columnName)).checked) { - array.push({ - column: oneColInfo.columnName, - option: NullValueOptions.DeleteRows, - value: "" - }); - } - else if (((<HTMLInputElement>document.getElementById("fillCol_" + oneColInfo.columnName)).checked)) { - array.push({ - column: oneColInfo.columnName, - option: NullValueOptions.Replace, - value: (<HTMLInputElement>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/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 @@ -<div id="header"> - <h1>Trenirajte veštačku neuronsku mrežu</h1> -</div> -<div id="wrapper" class="mb-4"> - <div id="container" class="container p-5 row text-light"> - <div class="col"></div> - - <div class="col-10"> - - <h2>1. Izaberite eksperiment iz kolekcije</h2> - <div class="px-5 mt-5 mb-3"> - <input type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term"> - </div> - <div class="overflow-auto px-5" style="max-height: 500px;"> - <ul class="list-group"> - <li class="list-group-item p-3" *ngFor="let experiment of myExperiments|filter:term" [ngClass]="{'selectedExperimentClass': this.selectedExperiment == experiment}"> - <app-item-experiment [experiment]="experiment" (click)="selectThisExperiment(experiment);"></app-item-experiment> - </li> - </ul> - </div> - - <h2 class="mt-5 mb-2">2. Izaberite model</h2> - <app-model-load (selectedModelChangeEvent)="selectModel($event)"></app-model-load> - - <h2 class="my-5">3. Treniranje modela</h2> - - <div class="d-flex flex-row justify-content-center align-items-center my-3"> - <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj - model</button> - </div> - - <h2 class="mt-5">Rezultati treniranja</h2> - <div class="m-3" *ngIf="trainingResult"> - <h2 class="my-2">Rezultati treniranja:</h2> - <p> - {{trainingResult}} - </p> - </div> - </div> - - <div class="col"></div> - </div> -</div>
\ No newline at end of file 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; - }); - } -} |