diff options
7 files changed, 103 insertions, 542 deletions
diff --git a/backend/api/api/appsettings.json b/backend/api/api/appsettings.json index 2eaf3e8f..513a81e3 100644 --- a/backend/api/api/appsettings.json +++ b/backend/api/api/appsettings.json @@ -16,15 +16,15 @@ "UserStoreDatabaseSettings": { /* LocalHost*/ - "ConnectionString": "mongodb://127.0.0.1:27017/", + /* "ConnectionString": "mongodb://127.0.0.1:27017/", "DatabaseName": "si_project", "CollectionName": "users", "DatasetCollectionName": "Dataset", "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment" - /* + "ExperimentCollectionName": "Experiment"*/ + "ConnectionString": "mongodb+srv://si_user:si_user@sidatabase.twtfm.mongodb.net/myFirstDatabase?retryWrites=true&w=majority", "DatabaseName": "si_db", "CollectionName": "users", @@ -32,6 +32,6 @@ "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment" */ + "ExperimentCollectionName": "Experiment" } }
\ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 9da54c53..ebe30390 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -435,7 +435,6 @@ }, "node_modules/@angular/compiler-cli": { "version": "13.2.5", - "dev": true, "license": "MIT", "dependencies": { "@babel/core": "^7.17.2", @@ -464,7 +463,6 @@ }, "node_modules/@angular/compiler-cli/node_modules/@ampproject/remapping": { "version": "2.1.2", - "dev": true, "license": "Apache-2.0", "dependencies": { "@jridgewell/trace-mapping": "^0.3.0" @@ -475,7 +473,6 @@ }, "node_modules/@angular/compiler-cli/node_modules/@babel/core": { "version": "7.17.5", - "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "^2.1.0", @@ -504,7 +501,6 @@ }, "node_modules/@angular/compiler-cli/node_modules/@babel/core/node_modules/semver": { "version": "6.3.0", - "dev": true, "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -512,7 +508,6 @@ }, "node_modules/@angular/compiler-cli/node_modules/@babel/generator": { "version": "7.17.3", - "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.17.0", @@ -525,7 +520,6 @@ }, "node_modules/@angular/compiler-cli/node_modules/source-map": { "version": "0.5.7", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -748,7 +742,6 @@ }, "node_modules/@babel/core": { "version": "7.16.12", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.16.7", @@ -777,7 +770,6 @@ }, "node_modules/@babel/core/node_modules/semver": { "version": "6.3.0", - "dev": true, "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -785,7 +777,6 @@ }, "node_modules/@babel/core/node_modules/source-map": { "version": "0.5.7", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -793,7 +784,6 @@ }, "node_modules/@babel/generator": { "version": "7.16.8", - "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.16.8", @@ -806,7 +796,6 @@ }, "node_modules/@babel/generator/node_modules/source-map": { "version": "0.5.7", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -3254,7 +3243,6 @@ }, "node_modules/anymatch": { "version": "3.1.2", - "dev": true, "license": "ISC", "dependencies": { "normalize-path": "^3.0.0", @@ -3505,7 +3493,6 @@ }, "node_modules/binary-extensions": { "version": "2.2.0", - "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -3593,7 +3580,6 @@ }, "node_modules/braces": { "version": "3.0.2", - "dev": true, "license": "MIT", "dependencies": { "fill-range": "^7.0.1" @@ -3771,7 +3757,6 @@ }, "node_modules/chokidar": { "version": "3.5.3", - "dev": true, "funding": [ { "type": "individual", @@ -4714,7 +4699,6 @@ }, "node_modules/dependency-graph": { "version": "0.11.0", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.6.0" @@ -4861,7 +4845,6 @@ }, "node_modules/encoding": { "version": "0.1.13", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -4870,7 +4853,6 @@ }, "node_modules/encoding/node_modules/iconv-lite": { "version": "0.6.3", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -5346,7 +5328,6 @@ }, "node_modules/fill-range": { "version": "7.0.1", - "dev": true, "license": "MIT", "dependencies": { "to-regex-range": "^5.0.1" @@ -5595,7 +5576,6 @@ }, "node_modules/glob-parent": { "version": "5.1.2", - "dev": true, "license": "ISC", "dependencies": { "is-glob": "^4.0.1" @@ -6133,7 +6113,6 @@ }, "node_modules/is-binary-path": { "version": "2.1.0", - "dev": true, "license": "MIT", "dependencies": { "binary-extensions": "^2.0.0" @@ -6183,7 +6162,6 @@ }, "node_modules/is-extglob": { "version": "2.1.1", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -6198,7 +6176,6 @@ }, "node_modules/is-glob": { "version": "4.0.3", - "dev": true, "license": "MIT", "dependencies": { "is-extglob": "^2.1.1" @@ -6222,7 +6199,6 @@ }, "node_modules/is-number": { "version": "7.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=0.12.0" @@ -7011,7 +6987,6 @@ }, "node_modules/lru-cache": { "version": "6.0.0", - "dev": true, "license": "ISC", "dependencies": { "yallist": "^4.0.0" @@ -7022,7 +6997,6 @@ }, "node_modules/magic-string": { "version": "0.25.7", - "dev": true, "license": "MIT", "dependencies": { "sourcemap-codec": "^1.4.4" @@ -7565,7 +7539,6 @@ }, "node_modules/normalize-path": { "version": "3.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -8202,7 +8175,6 @@ }, "node_modules/picomatch": { "version": "2.3.1", - "dev": true, "license": "MIT", "engines": { "node": ">=8.6" @@ -8953,7 +8925,6 @@ }, "node_modules/readdirp": { "version": "3.6.0", - "dev": true, "license": "MIT", "dependencies": { "picomatch": "^2.2.1" @@ -9228,7 +9199,7 @@ }, "node_modules/safer-buffer": { "version": "2.1.2", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/sass": { @@ -9348,7 +9319,6 @@ }, "node_modules/semver": { "version": "7.3.5", - "dev": true, "license": "ISC", "dependencies": { "lru-cache": "^6.0.0" @@ -9698,7 +9668,6 @@ }, "node_modules/sourcemap-codec": { "version": "1.4.8", - "dev": true, "license": "MIT" }, "node_modules/spdy": { @@ -10077,7 +10046,6 @@ }, "node_modules/to-regex-range": { "version": "5.0.1", - "dev": true, "license": "MIT", "dependencies": { "is-number": "^7.0.0" @@ -10159,7 +10127,6 @@ }, "node_modules/typescript": { "version": "4.5.5", - "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", @@ -10781,7 +10748,6 @@ }, "node_modules/yallist": { "version": "4.0.0", - "dev": true, "license": "ISC" }, "node_modules/yaml": { @@ -11067,7 +11033,6 @@ }, "@angular/compiler-cli": { "version": "13.2.5", - "dev": true, "requires": { "@babel/core": "^7.17.2", "chokidar": "^3.0.0", @@ -11083,14 +11048,12 @@ "dependencies": { "@ampproject/remapping": { "version": "2.1.2", - "dev": true, "requires": { "@jridgewell/trace-mapping": "^0.3.0" } }, "@babel/core": { "version": "7.17.5", - "dev": true, "requires": { "@ampproject/remapping": "^2.1.0", "@babel/code-frame": "^7.16.7", @@ -11110,14 +11073,12 @@ }, "dependencies": { "semver": { - "version": "6.3.0", - "dev": true + "version": "6.3.0" } } }, "@babel/generator": { "version": "7.17.3", - "dev": true, "requires": { "@babel/types": "^7.17.0", "jsesc": "^2.5.1", @@ -11125,8 +11086,7 @@ } }, "source-map": { - "version": "0.5.7", - "dev": true + "version": "0.5.7" } } }, @@ -11237,7 +11197,6 @@ }, "@babel/core": { "version": "7.16.12", - "dev": true, "requires": { "@babel/code-frame": "^7.16.7", "@babel/generator": "^7.16.8", @@ -11257,18 +11216,15 @@ }, "dependencies": { "semver": { - "version": "6.3.0", - "dev": true + "version": "6.3.0" }, "source-map": { - "version": "0.5.7", - "dev": true + "version": "0.5.7" } } }, "@babel/generator": { "version": "7.16.8", - "dev": true, "requires": { "@babel/types": "^7.16.8", "jsesc": "^2.5.1", @@ -11276,8 +11232,7 @@ }, "dependencies": { "source-map": { - "version": "0.5.7", - "dev": true + "version": "0.5.7" } } }, @@ -12210,7 +12165,8 @@ }, "dependencies": { "ws": { - "version": "7.5.7" + "version": "7.5.7", + "requires": {} } } }, @@ -12222,7 +12178,8 @@ }, "@ngtools/webpack": { "version": "13.2.5", - "dev": true + "dev": true, + "requires": {} }, "@nodelib/fs.scandir": { "version": "2.1.5", @@ -12774,7 +12731,8 @@ }, "acorn-import-assertions": { "version": "1.8.0", - "dev": true + "dev": true, + "requires": {} }, "adjust-sourcemap-loader": { "version": "4.0.0", @@ -12872,7 +12830,6 @@ }, "anymatch": { "version": "3.1.2", - "dev": true, "requires": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -13024,8 +12981,7 @@ "dev": true }, "binary-extensions": { - "version": "2.2.0", - "dev": true + "version": "2.2.0" }, "bl": { "version": "4.1.0", @@ -13082,7 +13038,8 @@ "dev": true }, "bootstrap": { - "version": "5.1.3" + "version": "5.1.3", + "requires": {} }, "brace-expansion": { "version": "1.1.11", @@ -13093,7 +13050,6 @@ }, "braces": { "version": "3.0.2", - "dev": true, "requires": { "fill-range": "^7.0.1" } @@ -13202,7 +13158,6 @@ }, "chokidar": { "version": "3.5.3", - "dev": true, "requires": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -13224,7 +13179,8 @@ }, "circular-dependency-plugin": { "version": "5.2.2", - "dev": true + "dev": true, + "requires": {} }, "clean-stack": { "version": "2.2.0", @@ -13595,7 +13551,8 @@ }, "css-prefers-color-scheme": { "version": "6.0.3", - "dev": true + "dev": true, + "requires": {} }, "css-select": { "version": "4.2.1", @@ -13795,8 +13752,7 @@ "dev": true }, "dependency-graph": { - "version": "0.11.0", - "dev": true + "version": "0.11.0" }, "destroy": { "version": "1.0.4", @@ -13895,7 +13851,6 @@ }, "encoding": { "version": "0.1.13", - "dev": true, "optional": true, "requires": { "iconv-lite": "^0.6.2" @@ -13903,7 +13858,6 @@ "dependencies": { "iconv-lite": { "version": "0.6.3", - "dev": true, "optional": true, "requires": { "safer-buffer": ">= 2.1.2 < 3.0.0" @@ -14216,7 +14170,6 @@ }, "fill-range": { "version": "7.0.1", - "dev": true, "requires": { "to-regex-range": "^5.0.1" } @@ -14365,7 +14318,6 @@ }, "glob-parent": { "version": "5.1.2", - "dev": true, "requires": { "is-glob": "^4.0.1" } @@ -14562,7 +14514,8 @@ }, "icss-utils": { "version": "5.1.0", - "dev": true + "dev": true, + "requires": {} }, "ieee754": { "version": "1.2.1", @@ -14709,7 +14662,6 @@ }, "is-binary-path": { "version": "2.1.0", - "dev": true, "requires": { "binary-extensions": "^2.0.0" } @@ -14733,15 +14685,13 @@ "dev": true }, "is-extglob": { - "version": "2.1.1", - "dev": true + "version": "2.1.1" }, "is-fullwidth-code-point": { "version": "3.0.0" }, "is-glob": { "version": "4.0.3", - "dev": true, "requires": { "is-extglob": "^2.1.1" } @@ -14755,8 +14705,7 @@ "dev": true }, "is-number": { - "version": "7.0.0", - "dev": true + "version": "7.0.0" }, "is-path-cwd": { "version": "2.2.0", @@ -15080,7 +15029,8 @@ }, "karma-jasmine-html-reporter": { "version": "1.7.0", - "dev": true + "dev": true, + "requires": {} }, "karma-source-map-support": { "version": "1.4.0", @@ -15248,14 +15198,12 @@ }, "lru-cache": { "version": "6.0.0", - "dev": true, "requires": { "yallist": "^4.0.0" } }, "magic-string": { "version": "0.25.7", - "dev": true, "requires": { "sourcemap-codec": "^1.4.4" } @@ -15590,8 +15538,7 @@ } }, "normalize-path": { - "version": "3.0.0", - "dev": true + "version": "3.0.0" }, "normalize-range": { "version": "0.1.2", @@ -16006,8 +15953,7 @@ "version": "1.0.0" }, "picomatch": { - "version": "2.3.1", - "dev": true + "version": "2.3.1" }, "pify": { "version": "2.3.0", @@ -16097,7 +16043,8 @@ }, "postcss-custom-media": { "version": "8.0.0", - "dev": true + "dev": true, + "requires": {} }, "postcss-custom-properties": { "version": "12.1.4", @@ -16151,11 +16098,13 @@ }, "postcss-font-variant": { "version": "5.0.0", - "dev": true + "dev": true, + "requires": {} }, "postcss-gap-properties": { "version": "3.0.3", - "dev": true + "dev": true, + "requires": {} }, "postcss-image-set-function": { "version": "4.0.6", @@ -16175,7 +16124,8 @@ }, "postcss-initial": { "version": "4.0.1", - "dev": true + "dev": true, + "requires": {} }, "postcss-lab-function": { "version": "4.1.1", @@ -16196,15 +16146,18 @@ }, "postcss-logical": { "version": "5.0.4", - "dev": true + "dev": true, + "requires": {} }, "postcss-media-minmax": { "version": "5.0.0", - "dev": true + "dev": true, + "requires": {} }, "postcss-modules-extract-imports": { "version": "3.0.0", - "dev": true + "dev": true, + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -16238,11 +16191,13 @@ }, "postcss-overflow-shorthand": { "version": "3.0.3", - "dev": true + "dev": true, + "requires": {} }, "postcss-page-break": { "version": "3.0.4", - "dev": true + "dev": true, + "requires": {} }, "postcss-place": { "version": "7.0.4", @@ -16299,7 +16254,8 @@ }, "postcss-replace-overflow-wrap": { "version": "4.0.0", - "dev": true + "dev": true, + "requires": {} }, "postcss-selector-not": { "version": "5.0.0", @@ -16427,7 +16383,6 @@ }, "readdirp": { "version": "3.6.0", - "dev": true, "requires": { "picomatch": "^2.2.1" } @@ -16599,7 +16554,7 @@ }, "safer-buffer": { "version": "2.1.2", - "dev": true + "devOptional": true }, "sass": { "version": "1.49.0", @@ -16643,7 +16598,8 @@ }, "ajv-keywords": { "version": "3.5.2", - "dev": true + "dev": true, + "requires": {} }, "json-schema-traverse": { "version": "0.4.1", @@ -16664,7 +16620,6 @@ }, "semver": { "version": "7.3.5", - "dev": true, "requires": { "lru-cache": "^6.0.0" } @@ -16910,8 +16865,7 @@ } }, "sourcemap-codec": { - "version": "1.4.8", - "dev": true + "version": "1.4.8" }, "spdy": { "version": "4.0.2", @@ -17081,7 +17035,8 @@ }, "ajv-keywords": { "version": "3.5.2", - "dev": true + "dev": true, + "requires": {} }, "json-schema-traverse": { "version": "0.4.1", @@ -17135,7 +17090,6 @@ }, "to-regex-range": { "version": "5.0.1", - "dev": true, "requires": { "is-number": "^7.0.0" } @@ -17184,8 +17138,7 @@ "dev": true }, "typescript": { - "version": "4.5.5", - "dev": true + "version": "4.5.5" }, "ua-parser-js": { "version": "0.7.31", @@ -17344,7 +17297,8 @@ }, "ajv-keywords": { "version": "3.5.2", - "dev": true + "dev": true, + "requires": {} }, "json-schema-traverse": { "version": "0.4.1", @@ -17538,7 +17492,8 @@ }, "ws": { "version": "8.2.3", - "dev": true + "dev": true, + "requires": {} }, "xlsx": { "version": "0.18.5", @@ -17556,8 +17511,7 @@ "version": "5.0.8" }, "yallist": { - "version": "4.0.0", - "dev": true + "version": "4.0.0" }, "yaml": { "version": "1.10.2", diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts index 9addd6bb..0b952392 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts @@ -25,8 +25,31 @@ export class BoxPlotComponent implements AfterViewInit { @Input()q1?: number; @Input()q3?: number; + updateChart(min: number, max: number, q1: number, q3: number, median: number){ + console.log(this.min, this.max); + const newBoxPlotData = { + labels: [""], + datasets: [{ + label: 'Dataset 1', + backgroundColor: '#0063AB', + borderColor: '#dfd7d7', + borderWidth: 1, + outlierColor: '#999999', + scaleFontColor: '#0063AB', + padding: 10, + itemRadius: 0, + data: [ + {min, q1, median, q3, max}/*, + [0, 25, 51, 75, 99]*/ + ]}] + }; + Object.assign(this.boxplotData, newBoxPlotData); + }; + @ViewChild('boxplot') chartRef!: ElementRef; - constructor() { } + constructor() { + //this.updateChart(); + } boxplotData = { // define label tree diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index 44a15f22..b3fcf9a3 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -12,6 +12,8 @@ import { ExperimentsService } from 'src/app/_services/experiments.service'; import { SaveExperimentDialogComponent } from 'src/app/_modals/save-experiment-dialog/save-experiment-dialog.component'; import { AlertDialogComponent } from 'src/app/_modals/alert-dialog/alert-dialog.component'; import Shared from 'src/app/Shared'; +import { PieChartComponent } from '../_charts/pie-chart/pie-chart.component'; +import { BoxPlotComponent } from '../_charts/box-plot/box-plot.component'; @Component({ selector: 'app-column-table', @@ -20,6 +22,8 @@ import Shared from 'src/app/Shared'; }) export class ColumnTableComponent implements AfterViewInit { + @ViewChildren(BoxPlotComponent) boxplotComp!: BoxPlotComponent[]; + @ViewChildren(PieChartComponent) piechartComp!: PieChartComponent[]; @Input() dataset?: Dataset; @Input() experiment!: Experiment; @Output() okPressed: EventEmitter<string> = new EventEmitter(); @@ -42,9 +46,13 @@ export class ColumnTableComponent implements AfterViewInit { //ovo mi nece trebati jer primam dataset iz druge komponente } + updateCharts(){ + //this.boxplotComp.forEach(bp => bp.updateChart()); + } + loadDataset(dataset: Dataset) { this.dataset = dataset; - + this.updateCharts(); this.setColumnTypeInitial(); this.dataset.columnInfo.forEach(column => { @@ -70,7 +78,8 @@ export class ColumnTableComponent implements AfterViewInit { } ngAfterViewInit(): void { - + console.log(this.dataset?.columnInfo); + } setColumnTypeInitial() { @@ -367,3 +376,7 @@ export class Tab { public value: Table ) { } } +function BoxplotComponent(BoxplotComponent: any) { + throw new Error('Function not implemented.'); +} + diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts deleted file mode 100644 index 73dbf2d2..00000000 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core'; -import { AddNewDatasetComponent } from '../add-new-dataset/add-new-dataset.component'; -import { ModelsService } from 'src/app/_services/models.service'; -import shared from 'src/app/Shared'; -import Dataset from 'src/app/_data/Dataset'; -import { DatatableComponent, TableData } from 'src/app/_elements/datatable/datatable.component'; -import { DatasetsService } from 'src/app/_services/datasets.service'; -import { CsvParseService } from 'src/app/_services/csv-parse.service'; -import { Output, EventEmitter } from '@angular/core'; -import { SignalRService } from 'src/app/_services/signal-r.service'; - -@Component({ - selector: 'app-dataset-load', - templateUrl: './dataset-load.component.html', - styleUrls: ['./dataset-load.component.css'] -}) -export class DatasetLoadComponent implements OnInit { - - @Output() selectedDatasetChangeEvent = new EventEmitter<Dataset>(); - - @ViewChild(AddNewDatasetComponent) addNewDatasetComponent!: AddNewDatasetComponent; - @ViewChild(AddNewDatasetComponent) datatable!: DatatableComponent; - - datasetLoaded: boolean = false; - selectedDatasetLoaded: boolean = false; - - showMyDatasets: boolean = true; - myDatasets?: Dataset[]; - existingDatasetSelected: boolean = false; - selectedDataset?: Dataset; - - tableData: TableData = new TableData(); - - term: string = ""; - - constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService, private signalRService: SignalRService) { - this.datasets.getMyDatasets().subscribe((datasets) => { - this.myDatasets = datasets; - }); - } - - viewMyDatasetsForm() { - this.showMyDatasets = true; - if (this.selectedDataset != undefined) - this.resetSelectedDataset(); - //this.resetCbsAndRbs(); //TREBA DA SE DESI - } - viewNewDatasetForm() { - this.showMyDatasets = false; - if (this.selectedDataset != undefined) - this.resetSelectedDataset(); - //this.resetCbsAndRbs(); //TREBA DA SE DESI - } - - refreshMyDatasets() { - this.datasets.getMyDatasets().subscribe((datasets) => { - this.myDatasets = datasets; - this.showMyDatasets = true; - }); - } - - selectThisDataset(dataset: Dataset) { - this.selectedDataset = dataset; - this.selectedDatasetLoaded = false; - this.existingDatasetSelected = true; - this.tableData.hasHeader = this.selectedDataset.hasHeader; - - this.tableData.hasInput = true; - this.tableData.loaded = false; - - this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => { - if (file) { - this.tableData.loaded = true; - this.tableData.numRows = this.selectedDataset!.rowCount; - this.tableData.numCols = this.selectedDataset!.columnInfo.length; - this.tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); - //this.resetCbsAndRbs(); //TREBA DA SE DESI - //this.refreshThreeNullValueRadioOptions(); //TREBA DA SE DESI - this.selectedDatasetLoaded = true; - - this.selectedDatasetChangeEvent.emit(this.selectedDataset); - } - }); - } - - resetSelectedDataset(): boolean { - this.selectedDatasetChangeEvent.emit(this.selectedDataset); - return true; - } - - ngOnInit(): void { - if (this.signalRService.hubConnection) { - this.signalRService.hubConnection.on("NotifyDataset", _ => { - this.refreshMyDatasets(); - }); - } else { - console.warn("Dataset-Load: No connection!"); - } - } -} diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html deleted file mode 100644 index dcb35c21..00000000 --- a/frontend/src/app/_elements/model-load/model-load.component.html +++ /dev/null @@ -1,215 +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|filter:(forExperiment ? forExperiment.type : '')" - [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}} - - </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 dbca3d17..00000000 --- a/frontend/src/app/_elements/model-load/model-load.component.ts +++ /dev/null @@ -1,114 +0,0 @@ -import { Component, OnInit, ViewChild, Output, EventEmitter, Input } from '@angular/core'; -import Shared from 'src/app/Shared'; -import Experiment from 'src/app/_data/Experiment'; -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; - @Input() forExperiment?:Experiment; - @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); - } - -} |