diff options
| author | Danijel Andjelkovic <adanijel99@gmail.com> | 2022-04-20 00:12:42 +0000 |
|---|---|---|
| committer | Danijel Andjelkovic <adanijel99@gmail.com> | 2022-04-20 00:12:42 +0000 |
| commit | b814ef17d31dca80a3f23b3fbe4ce56885192a4c (patch) | |
| tree | d7a297db46d57267b5516a8c20ee906dd39571ed /frontend | |
| parent | 9a480b28ac9b93dee082925b9cb4beef3244b135 (diff) | |
| parent | e6d9e3fd2dcf83c90db8560e749544dfd9910d07 (diff) | |
Merge branch 'dev' into 'master'
Merge master
See merge request igrannonica/neuronstellar!27
Diffstat (limited to 'frontend')
54 files changed, 1118 insertions, 568 deletions
diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 82cd01e6..d44f86d1 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -25,14 +25,16 @@ "@ng-bootstrap/ng-bootstrap": "^12.0.0", "@popperjs/core": "^2.10.2", "bootstrap": "^5.1.3", + "canvasjs": "^1.8.3", "chart.js": "^3.7.1", + "chartjs-plugin-datalabels": "^0.7.0", "csv-parser": "^3.0.0", "d3-graphviz": "^2.6.1", "jquery": "^3.6.0", "mdb-angular-ui-kit": "^2.0.0", "ng-multiselect-dropdown": "^0.3.8", "ng-uikit-pro-standard": "^1.0.0", - "ng2-charts": "^3.0.8", + "ng2-charts": "^3.0.9", "ng2-search-filter": "^0.5.1", "ngx-cookie-service": "^13.1.2", "popper.js": "^1.16.1", @@ -45,6 +47,7 @@ "@angular-devkit/build-angular": "~13.2.5", "@angular/cli": "~13.2.5", "@angular/compiler-cli": "~13.2.0", + "@types/canvasjs": "^1.9.7", "@types/crypto-js": "^4.1.1", "@types/d3-graphviz": "^2.6.7", "@types/jasmine": "~3.10.0", @@ -452,7 +455,6 @@ "version": "13.2.5", "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-13.2.5.tgz", "integrity": "sha512-Xd8xj2Z0ilA4TJAM/JkTtA1CAa6SuebFsEEvabHCRO5MDvtdsIUP91ADUZIqDHy7qe6Qift/rAVN2PXxT2aaNA==", - "dev": true, "dependencies": { "@babel/core": "^7.17.2", "chokidar": "^3.0.0", @@ -482,7 +484,6 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz", "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==", - "dev": true, "dependencies": { "@jridgewell/trace-mapping": "^0.3.0" }, @@ -494,7 +495,6 @@ "version": "7.17.5", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz", "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==", - "dev": true, "dependencies": { "@ampproject/remapping": "^2.1.0", "@babel/code-frame": "^7.16.7", @@ -524,7 +524,6 @@ "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true, "bin": { "semver": "bin/semver.js" } @@ -533,7 +532,6 @@ "version": "7.17.3", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz", "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==", - "dev": true, "dependencies": { "@babel/types": "^7.17.0", "jsesc": "^2.5.1", @@ -547,7 +545,6 @@ "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -787,7 +784,6 @@ "version": "7.16.12", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz", "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==", - "dev": true, "dependencies": { "@babel/code-frame": "^7.16.7", "@babel/generator": "^7.16.8", @@ -817,7 +813,6 @@ "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true, "bin": { "semver": "bin/semver.js" } @@ -826,7 +821,6 @@ "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -835,7 +829,6 @@ "version": "7.16.8", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz", "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==", - "dev": true, "dependencies": { "@babel/types": "^7.16.8", "jsesc": "^2.5.1", @@ -849,7 +842,6 @@ "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -2748,6 +2740,12 @@ "@types/node": "*" } }, + "node_modules/@types/canvasjs": { + "version": "1.9.7", + "resolved": "https://registry.npmjs.org/@types/canvasjs/-/canvasjs-1.9.7.tgz", + "integrity": "sha512-/CfA3VtyTYVXDHvMy8F5hsvRUTiBX7TGe+nAHNONoJlNHbqakeIzxxt1MSNH619s8Oiu4CcFBMmJVg50El/0lw==", + "dev": true + }, "node_modules/@types/component-emitter": { "version": "1.2.11", "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz", @@ -3376,7 +3374,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", - "dev": true, "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -3432,9 +3429,9 @@ } }, "node_modules/async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "dependencies": { "lodash": "^4.17.14" @@ -3650,7 +3647,6 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true, "engines": { "node": ">=8" } @@ -3747,7 +3743,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, "dependencies": { "fill-range": "^7.0.1" }, @@ -3897,6 +3892,11 @@ "url": "https://opencollective.com/browserslist" } }, + "node_modules/canvasjs": { + "version": "1.8.3", + "resolved": "https://registry.npmjs.org/canvasjs/-/canvasjs-1.8.3.tgz", + "integrity": "sha512-60eUT0VjqRgYqdIQcOkXg0Zptfbl4HefA/O51YEf1m/P0uXvE3icI/1KPrXpY9aVxn8gG/BB8DzVoTGCcyBnYg==" + }, "node_modules/chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -3921,11 +3921,18 @@ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==" }, + "node_modules/chartjs-plugin-datalabels": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-0.7.0.tgz", + "integrity": "sha512-PKVUX14nYhH0wcdCpgOoC39Gbzvn6cZ7O9n+bwc02yKD9FTnJ7/TSrBcfebmolFZp1Rcicr9xbT0a5HUbigS7g==", + "peerDependencies": { + "chart.js": ">= 2.7.0 < 3" + } + }, "node_modules/chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, "funding": [ { "type": "individual", @@ -4944,7 +4951,6 @@ "version": "0.11.0", "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz", "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", - "dev": true, "engines": { "node": ">= 0.6.0" } @@ -5109,7 +5115,6 @@ "version": "0.1.13", "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", - "dev": true, "optional": true, "dependencies": { "iconv-lite": "^0.6.2" @@ -5119,7 +5124,6 @@ "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "dev": true, "optional": true, "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" @@ -5923,7 +5927,6 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, "dependencies": { "to-regex-range": "^5.0.1" }, @@ -6092,7 +6095,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -6202,7 +6204,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, "dependencies": { "is-glob": "^4.0.1" }, @@ -6795,7 +6796,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, "dependencies": { "binary-extensions": "^2.0.0" }, @@ -6849,7 +6849,6 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -6866,7 +6865,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "dependencies": { "is-extglob": "^2.1.1" }, @@ -6893,7 +6891,6 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true, "engines": { "node": ">=0.12.0" } @@ -7759,7 +7756,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, "dependencies": { "yallist": "^4.0.0" }, @@ -7771,7 +7767,6 @@ "version": "0.25.7", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==", - "dev": true, "dependencies": { "sourcemap-codec": "^1.4.4" } @@ -8240,9 +8235,9 @@ "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, "node_modules/ng2-charts": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.0.8.tgz", - "integrity": "sha512-ELlpN0b/IJO4ka/P2sFBKeng3bV7XOQuh40f0J5hx9UveWPaSxOYQAOiGxV7BN2VSnKq6GRkjRvqTrcQPyJYww==", + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.0.9.tgz", + "integrity": "sha512-VKUd0lMhDb/IC4WGYH/CW29HlMibXGMK+Ik/T+M0uR98Ox+YEQUPsrqbroF/cWMxVf2XuTkFGaUn2fbqlDBSOQ==", "dependencies": { "lodash-es": "^4.17.15", "tslib": "^2.3.0" @@ -8396,7 +8391,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -9092,7 +9086,6 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true, "engines": { "node": ">=8.6" }, @@ -9907,7 +9900,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, "dependencies": { "picomatch": "^2.2.1" }, @@ -9918,8 +9910,7 @@ "node_modules/reflect-metadata": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz", - "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==", - "dev": true + "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==" }, "node_modules/regenerate": { "version": "1.4.2", @@ -10209,7 +10200,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "dev": true + "devOptional": true }, "node_modules/sass": { "version": "1.49.0", @@ -10339,7 +10330,6 @@ "version": "7.3.5", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "dev": true, "dependencies": { "lru-cache": "^6.0.0" }, @@ -10724,8 +10714,7 @@ "node_modules/sourcemap-codec": { "version": "1.4.8", "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", - "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", - "dev": true + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" }, "node_modules/spdy": { "version": "4.0.2", @@ -11126,7 +11115,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, "dependencies": { "is-number": "^7.0.0" }, @@ -11218,7 +11206,6 @@ "version": "4.5.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz", "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==", - "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -11858,8 +11845,7 @@ "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, "node_modules/yaml": { "version": "1.10.2", @@ -12194,7 +12180,6 @@ "version": "13.2.5", "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-13.2.5.tgz", "integrity": "sha512-Xd8xj2Z0ilA4TJAM/JkTtA1CAa6SuebFsEEvabHCRO5MDvtdsIUP91ADUZIqDHy7qe6Qift/rAVN2PXxT2aaNA==", - "dev": true, "requires": { "@babel/core": "^7.17.2", "chokidar": "^3.0.0", @@ -12212,7 +12197,6 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz", "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==", - "dev": true, "requires": { "@jridgewell/trace-mapping": "^0.3.0" } @@ -12221,7 +12205,6 @@ "version": "7.17.5", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz", "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==", - "dev": true, "requires": { "@ampproject/remapping": "^2.1.0", "@babel/code-frame": "^7.16.7", @@ -12243,8 +12226,7 @@ "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" } } }, @@ -12252,7 +12234,6 @@ "version": "7.17.3", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz", "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==", - "dev": true, "requires": { "@babel/types": "^7.17.0", "jsesc": "^2.5.1", @@ -12262,8 +12243,7 @@ "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" } } }, @@ -12408,7 +12388,6 @@ "version": "7.16.12", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz", "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==", - "dev": true, "requires": { "@babel/code-frame": "^7.16.7", "@babel/generator": "^7.16.8", @@ -12430,14 +12409,12 @@ "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==" }, "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" } } }, @@ -12445,7 +12422,6 @@ "version": "7.16.8", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz", "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==", - "dev": true, "requires": { "@babel/types": "^7.16.8", "jsesc": "^2.5.1", @@ -12455,8 +12431,7 @@ "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", - "dev": true + "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" } } }, @@ -13617,7 +13592,8 @@ "ws": { "version": "7.5.7", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz", - "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==" + "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==", + "requires": {} } } }, @@ -13633,7 +13609,8 @@ "version": "13.2.5", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.2.5.tgz", "integrity": "sha512-obiPvwPe+UJUO8cfNbBxukLKG30F+gLF5/erexwklRknJzS4KP8ciH2on6XlTuXUahpDjbO0pffugFE2I/IszQ==", - "dev": true + "dev": true, + "requires": {} }, "@nodelib/fs.scandir": { "version": "2.1.5", @@ -13792,6 +13769,12 @@ "@types/node": "*" } }, + "@types/canvasjs": { + "version": "1.9.7", + "resolved": "https://registry.npmjs.org/@types/canvasjs/-/canvasjs-1.9.7.tgz", + "integrity": "sha512-/CfA3VtyTYVXDHvMy8F5hsvRUTiBX7TGe+nAHNONoJlNHbqakeIzxxt1MSNH619s8Oiu4CcFBMmJVg50El/0lw==", + "dev": true + }, "@types/component-emitter": { "version": "1.2.11", "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz", @@ -14233,7 +14216,8 @@ "version": "1.8.0", "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz", "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==", - "dev": true + "dev": true, + "requires": {} }, "adjust-sourcemap-loader": { "version": "4.0.0", @@ -14356,7 +14340,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz", "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==", - "dev": true, "requires": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -14400,9 +14383,9 @@ "dev": true }, "async": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz", - "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==", + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", "dev": true, "requires": { "lodash": "^4.17.14" @@ -14554,8 +14537,7 @@ "binary-extensions": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", - "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", - "dev": true + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==" }, "bl": { "version": "4.1.0", @@ -14626,7 +14608,8 @@ "bootstrap": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz", - "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==" + "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==", + "requires": {} }, "brace-expansion": { "version": "1.1.11", @@ -14641,7 +14624,6 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", - "dev": true, "requires": { "fill-range": "^7.0.1" } @@ -14745,6 +14727,11 @@ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz", "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==" }, + "canvasjs": { + "version": "1.8.3", + "resolved": "https://registry.npmjs.org/canvasjs/-/canvasjs-1.8.3.tgz", + "integrity": "sha512-60eUT0VjqRgYqdIQcOkXg0Zptfbl4HefA/O51YEf1m/P0uXvE3icI/1KPrXpY9aVxn8gG/BB8DzVoTGCcyBnYg==" + }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -14766,11 +14753,16 @@ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==" }, + "chartjs-plugin-datalabels": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-0.7.0.tgz", + "integrity": "sha512-PKVUX14nYhH0wcdCpgOoC39Gbzvn6cZ7O9n+bwc02yKD9FTnJ7/TSrBcfebmolFZp1Rcicr9xbT0a5HUbigS7g==", + "requires": {} + }, "chokidar": { "version": "3.5.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "dev": true, "requires": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -14798,7 +14790,8 @@ "version": "5.2.2", "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-5.2.2.tgz", "integrity": "sha512-g38K9Cm5WRwlaH6g03B9OEz/0qRizI+2I7n+Gz+L5DxXJAPAiWQvwlYNm1V1jkdpUv95bOe/ASm2vfi/G560jQ==", - "dev": true + "dev": true, + "requires": {} }, "clean-stack": { "version": "2.2.0", @@ -15276,7 +15269,8 @@ "version": "6.0.3", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz", "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==", - "dev": true + "dev": true, + "requires": {} }, "css-select": { "version": "4.2.1", @@ -15542,8 +15536,7 @@ "dependency-graph": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz", - "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==", - "dev": true + "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==" }, "destroy": { "version": "1.0.4", @@ -15678,7 +15671,6 @@ "version": "0.1.13", "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", - "dev": true, "optional": true, "requires": { "iconv-lite": "^0.6.2" @@ -15688,7 +15680,6 @@ "version": "0.6.3", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "dev": true, "optional": true, "requires": { "safer-buffer": ">= 2.1.2 < 3.0.0" @@ -16212,7 +16203,6 @@ "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", - "dev": true, "requires": { "to-regex-range": "^5.0.1" } @@ -16335,7 +16325,6 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "dev": true, "optional": true }, "function-bind": { @@ -16411,7 +16400,6 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", - "dev": true, "requires": { "is-glob": "^4.0.1" } @@ -16668,7 +16656,8 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", - "dev": true + "dev": true, + "requires": {} }, "ieee754": { "version": "1.2.1", @@ -16865,7 +16854,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", - "dev": true, "requires": { "binary-extensions": "^2.0.0" } @@ -16897,8 +16885,7 @@ "is-extglob": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", - "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=", - "dev": true + "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=" }, "is-fullwidth-code-point": { "version": "3.0.0", @@ -16909,7 +16896,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", - "dev": true, "requires": { "is-extglob": "^2.1.1" } @@ -16929,8 +16915,7 @@ "is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", - "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", - "dev": true + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==" }, "is-path-cwd": { "version": "2.2.0", @@ -17354,7 +17339,8 @@ "version": "1.7.0", "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz", "integrity": "sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==", - "dev": true + "dev": true, + "requires": {} }, "karma-source-map-support": { "version": "1.4.0", @@ -17576,7 +17562,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, "requires": { "yallist": "^4.0.0" } @@ -17585,7 +17570,6 @@ "version": "0.25.7", "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz", "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==", - "dev": true, "requires": { "sourcemap-codec": "^1.4.4" } @@ -17940,9 +17924,9 @@ } }, "ng2-charts": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.0.8.tgz", - "integrity": "sha512-ELlpN0b/IJO4ka/P2sFBKeng3bV7XOQuh40f0J5hx9UveWPaSxOYQAOiGxV7BN2VSnKq6GRkjRvqTrcQPyJYww==", + "version": "3.0.9", + "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.0.9.tgz", + "integrity": "sha512-VKUd0lMhDb/IC4WGYH/CW29HlMibXGMK+Ik/T+M0uR98Ox+YEQUPsrqbroF/cWMxVf2XuTkFGaUn2fbqlDBSOQ==", "requires": { "lodash-es": "^4.17.15", "tslib": "^2.3.0" @@ -18046,8 +18030,7 @@ "normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", - "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", - "dev": true + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==" }, "normalize-range": { "version": "0.1.2", @@ -18580,8 +18563,7 @@ "picomatch": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", - "dev": true + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==" }, "pify": { "version": "2.3.0", @@ -18697,7 +18679,8 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz", "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==", - "dev": true + "dev": true, + "requires": {} }, "postcss-custom-properties": { "version": "12.1.4", @@ -18767,13 +18750,15 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz", "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==", - "dev": true + "dev": true, + "requires": {} }, "postcss-gap-properties": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz", "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==", - "dev": true + "dev": true, + "requires": {} }, "postcss-image-set-function": { "version": "4.0.6", @@ -18799,7 +18784,8 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz", "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==", - "dev": true + "dev": true, + "requires": {} }, "postcss-lab-function": { "version": "4.1.1", @@ -18826,19 +18812,22 @@ "version": "5.0.4", "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz", "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==", - "dev": true + "dev": true, + "requires": {} }, "postcss-media-minmax": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", - "dev": true + "dev": true, + "requires": {} }, "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", - "dev": true + "dev": true, + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -18882,13 +18871,15 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.3.tgz", "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==", - "dev": true + "dev": true, + "requires": {} }, "postcss-page-break": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz", "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==", - "dev": true + "dev": true, + "requires": {} }, "postcss-place": { "version": "7.0.4", @@ -18953,7 +18944,8 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz", "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==", - "dev": true + "dev": true, + "requires": {} }, "postcss-selector-not": { "version": "5.0.0", @@ -19127,7 +19119,6 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", - "dev": true, "requires": { "picomatch": "^2.2.1" } @@ -19135,8 +19126,7 @@ "reflect-metadata": { "version": "0.1.13", "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz", - "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==", - "dev": true + "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==" }, "regenerate": { "version": "1.4.2", @@ -19355,7 +19345,7 @@ "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", - "dev": true + "devOptional": true }, "sass": { "version": "1.49.0", @@ -19411,7 +19401,8 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "dev": true, + "requires": {} }, "json-schema-traverse": { "version": "0.4.1", @@ -19440,7 +19431,6 @@ "version": "7.3.5", "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz", "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==", - "dev": true, "requires": { "lru-cache": "^6.0.0" } @@ -19756,8 +19746,7 @@ "sourcemap-codec": { "version": "1.4.8", "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", - "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", - "dev": true + "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" }, "spdy": { "version": "4.0.2", @@ -19965,7 +19954,8 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "dev": true, + "requires": {} }, "json-schema-traverse": { "version": "0.4.1", @@ -20039,7 +20029,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", - "dev": true, "requires": { "is-number": "^7.0.0" } @@ -20108,8 +20097,7 @@ "typescript": { "version": "4.5.5", "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz", - "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==", - "dev": true + "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==" }, "ua-parser-js": { "version": "0.7.31", @@ -20318,7 +20306,8 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "dev": true + "dev": true, + "requires": {} }, "json-schema-traverse": { "version": "0.4.1", @@ -20554,7 +20543,8 @@ "version": "8.2.3", "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz", "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==", - "dev": true + "dev": true, + "requires": {} }, "y18n": { "version": "5.0.8", @@ -20564,8 +20554,7 @@ "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, "yaml": { "version": "1.10.2", diff --git a/frontend/package.json b/frontend/package.json index c02a1fb0..87b21e05 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,14 +28,16 @@ "@ng-bootstrap/ng-bootstrap": "^12.0.0", "@popperjs/core": "^2.10.2", "bootstrap": "^5.1.3", + "canvasjs": "^1.8.3", "chart.js": "^3.7.1", + "chartjs-plugin-datalabels": "^0.7.0", "csv-parser": "^3.0.0", "d3-graphviz": "^2.6.1", "jquery": "^3.6.0", "mdb-angular-ui-kit": "^2.0.0", "ng-multiselect-dropdown": "^0.3.8", "ng-uikit-pro-standard": "^1.0.0", - "ng2-charts": "^3.0.8", + "ng2-charts": "^3.0.9", "ng2-search-filter": "^0.5.1", "ngx-cookie-service": "^13.1.2", "popper.js": "^1.16.1", @@ -48,6 +50,7 @@ "@angular-devkit/build-angular": "~13.2.5", "@angular/cli": "~13.2.5", "@angular/compiler-cli": "~13.2.0", + "@types/canvasjs": "^1.9.7", "@types/crypto-js": "^4.1.1", "@types/d3-graphviz": "^2.6.7", "@types/jasmine": "~3.10.0", diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index 732d1c56..766040a3 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -10,7 +10,7 @@ export default class Dataset { public accessibleByLink: boolean = false, public dateCreated: Date = new Date(), public lastUpdated: Date = new Date(), - public username: string = '', + public uploaderId: string = '', public delimiter: string = '', public hasHeader: boolean = true, diff --git a/frontend/src/app/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts index 453f6ca0..95ef6e1e 100644 --- a/frontend/src/app/_data/Experiment.ts +++ b/frontend/src/app/_data/Experiment.ts @@ -1,3 +1,4 @@ +import { ProblemType } from "./Model"; export default class Experiment { _id: string = ''; uploaderId: string = ''; @@ -18,8 +19,8 @@ export default class Experiment { public randomTestSet: boolean = true, public randomTestSetDistribution: number = 0.1, //0.1-0.9 (10% - 90%) JESTE OVDE ZAKUCANO 10, AL POSLATO JE KAO 0.1 BACK-U - //TODO - za svaku kolonu se bira enkoding - public encoding: Encoding = Encoding.Label + public encodings: ColumnEncoding[] = [], + public type: ProblemType = ProblemType.Regression ) { } } @@ -65,4 +66,12 @@ export enum Encoding { WOE = 'woe', Quantile = 'quantile' */ +} + +export class ColumnEncoding { + constructor ( + public columnName: string, + public encoding: Encoding + ) + {} }
\ No newline at end of file diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 8a85e296..7d383584 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -16,10 +16,10 @@ export default class Model { public inputNeurons: number = 1, public hiddenLayerNeurons: number = 1, public hiddenLayers: number = 1, - public batchSize: number = 5, + public batchSize: number = 4, public hiddenLayerActivationFunctions: string[] = ['sigmoid'], public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, - public username: string = '', + public uploaderId: string = '', public metrics: string[] = [], // TODO add to add-model form public epochs: number = 5 // TODO add to add-model form ) { } @@ -73,7 +73,7 @@ export enum LossFunction { HingeLoss = 'hinge_loss', // multi-class classification loss functions CategoricalCrossEntropy = 'categorical_crossentropy', - SparseCategoricalCrossEntropy = 'sparse_categorical_crosentropy', + SparseCategoricalCrossEntropy = 'sparse_categorical_crossentropy', KLDivergence = 'kullback_leibler_divergence', // regression loss functions @@ -94,8 +94,8 @@ export enum LossFunctionBinaryClassification { HingeLoss = 'hinge_loss', } export enum LossFunctionMultiClassification { - CategoricalCrossEntropy = 'categorical_crossentropy', - SparseCategoricalCrossEntropy = 'sparse_categorical_crosentropy', + //CategoricalCrossEntropy = 'categorical_crossentropy', + SparseCategoricalCrossEntropy = 'sparse_categorical_crossentropy', KLDivergence = 'kullback_leibler_divergence', } diff --git a/frontend/src/app/_data/Notification.ts b/frontend/src/app/_data/Notification.ts index c505d399..94a3be1d 100644 --- a/frontend/src/app/_data/Notification.ts +++ b/frontend/src/app/_data/Notification.ts @@ -1,5 +1,4 @@ export default class Notification { - _id: string = ''; constructor( public title: string = 'Treniranje u toku...', public id: string = '042', diff --git a/frontend/src/app/_data/Predictor.ts b/frontend/src/app/_data/Predictor.ts index 7e902eae..8aa2b6cb 100644 --- a/frontend/src/app/_data/Predictor.ts +++ b/frontend/src/app/_data/Predictor.ts @@ -7,6 +7,7 @@ export default class Predictor { public output: string = '', public isPublic: boolean = false, public accessibleByLink: boolean = false, - public dateCreated: Date = new Date() + public dateCreated: Date = new Date(), + public uploaderId: string = '' ) { } }
\ No newline at end of file diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.html index bff8b022..e5d4cd23 100644 --- 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 @@ -2,48 +2,54 @@ <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="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="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? + <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? + </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"> + <div class="col-3 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"> + <label for="type" class="col-form-label">Izaberite delimiter za .csv fajl</label> + <select id="delimiterOptions" class="form-select" name="type" [(ngModel)]="dataset.delimiter" (change)="update()"> + <option + *ngFor="let option of delimiterOptions"> + {{ option }} + </option> + </select> + <!-- + <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? +--> + <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"> + <br> + <input id="fileInput" class="form-control btn-lg" type="file" class="upload" (change)="changeListener($event)" accept=".csv"> </div> </div> <div class="px-5 mt-5"> - <app-datatable [tableData]="tableData"></app-datatable> + <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> + <button (click)="uploadDataset()" class="btn btn-lg col-4" style="background-color:#003459; color:white;">Dodaj izvor podataka</button> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts index 6ff108ce..1f395105 100644 --- a/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts +++ b/frontend/src/app/_elements/add-new-dataset/add-new-dataset.component.ts @@ -13,10 +13,9 @@ import { CsvParseService } from 'src/app/_services/csv-parse.service'; }) export class AddNewDatasetComponent { - @Output() newDatasetAdded = new EventEmitter<string>(); @ViewChild(DatatableComponent) datatable!: DatatableComponent; - delimiterOptions: Array<string> = [",", ";", "\t", "razmak", "|"]; //podrazumevano "," + delimiterOptions: Array<string> = [",", ";", "|", "razmak", "novi red"]; //podrazumevano "," csvRecords: any[] = []; files: File[] = []; @@ -29,6 +28,7 @@ export class AddNewDatasetComponent { constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private csv: CsvParseService) { this.dataset = new Dataset(); + this.dataset.delimiter = ','; } //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo? @@ -36,8 +36,6 @@ export class AddNewDatasetComponent { 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; } @@ -56,7 +54,7 @@ export class AddNewDatasetComponent { 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) + const result = this.csv.csvToArray(fileReader.result, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter) if (this.dataset.hasHeader) this.csvRecords = result.splice(0, 11); @@ -90,10 +88,9 @@ export class AddNewDatasetComponent { this.modelsService.uploadData(this.files[0]).subscribe((file) => { //console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id); this.dataset.fileId = file._id; - this.dataset.username = shared.username; + this.dataset.uploaderId = shared.userId; this.datasetsService.addDataset(this.dataset).subscribe((dataset) => { - this.newDatasetAdded.emit("added"); 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."); diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.html b/frontend/src/app/_elements/dataset-load/dataset-load.component.html index 56a3b3c9..f244a882 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html @@ -1,40 +1,34 @@ <div> - <!--Sklonjeno ucitavanje novog dataseta i sve opcije u vezi sa tim, premesteno u add-new-dataset--> + <!--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}"> + <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}"> + <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="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 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> + </div> - <app-add-new-dataset [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset" - (newDatasetAdded)="refreshMyDatasets()"> - </app-add-new-dataset> + <app-add-new-dataset [style]="(showMyDatasets)?'display:none;visibility:hidden;':''" id="dataset"> + </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 index 62cca456..be1dc097 100644 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts @@ -8,6 +8,7 @@ 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'; +import { AuthService } from 'src/app/_services/auth.service'; @Component({ selector: 'app-dataset-load', @@ -33,7 +34,15 @@ export class DatasetLoadComponent implements OnInit { term: string = ""; - constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService, private signalRService: SignalRService) { + constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService, private signalRService: SignalRService, private authService: AuthService) { + this.fetchDatasets(); + + authService.loggedInEvent.subscribe(_ => { + this.fetchDatasets(); + }) + } + + fetchDatasets() { this.datasets.getMyDatasets().subscribe((datasets) => { this.myDatasets = datasets; }); @@ -41,22 +50,17 @@ export class DatasetLoadComponent implements OnInit { viewMyDatasetsForm() { this.showMyDatasets = true; - this.resetSelectedDataset(); + if (this.selectedDataset != undefined) + this.resetSelectedDataset(); //this.resetCbsAndRbs(); //TREBA DA SE DESI } viewNewDatasetForm() { this.showMyDatasets = false; - this.resetSelectedDataset(); + 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; @@ -86,10 +90,19 @@ export class DatasetLoadComponent implements OnInit { return true; } + refreshMyDatasets(selectedDatasetId: string | null) { + this.datasets.getMyDatasets().subscribe((datasets) => { + this.myDatasets = datasets.reverse(); + this.showMyDatasets = true; + this.selectedDataset = this.myDatasets.filter(x => x._id == selectedDatasetId)[0]; + this.resetSelectedDataset(); + }); + } + ngOnInit(): void { if (this.signalRService.hubConnection) { - this.signalRService.hubConnection.on("NotifyDataset", _ => { - this.refreshMyDatasets(); + this.signalRService.hubConnection.on("NotifyDataset", (dName: string, dId: string) => { + this.refreshMyDatasets(dId); }); } else { console.warn("Dataset-Load: No connection!"); diff --git a/frontend/src/app/_elements/item-predictor/item-predictor.component.html b/frontend/src/app/_elements/item-predictor/item-predictor.component.html index 7ae26fd3..3199dcc8 100644 --- a/frontend/src/app/_elements/item-predictor/item-predictor.component.html +++ b/frontend/src/app/_elements/item-predictor/item-predictor.component.html @@ -1,26 +1,35 @@ <div class="card" style="min-width: 12rem;"> - <div class="card-header"> - {{predictor.name}} + <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"> + <div class="card-body overflow-hidden"> + <b style="color: gray;">Opis</b><hr style="width: 20%;"> <p class="card-text"> - {{predictor.description}} + {{predictor.description}} </p> - <div class="d-flex flex-column align-items-center"> - <table class="table table-bordered table-sm"> + + <b style="color: gray;">Ulazne kolone</b> + <div style="overflow: scroll; overflow-y: hidden;"> + + <table class="table table-bordered table-md" > <thead> - <th class="text-center" *ngFor="let column of predictor.inputs">{{column}}</th> + <th scope="col" *ngFor="let column of predictor.inputs" >{{column}}</th> </thead> </table> - <mat-icon>arrow_downward</mat-icon> - <p> - {{predictor.output}} - </p> + </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-lg col-4" style="background-color:#003459; color:white;" + <button class="btn btn-md col-4" style="background-color:#003459; color:white;" (click)="openPredictor();">Iskoristi</button> - <!--<a routerLink="/predict" mat-raised-button color="primary">Iskoristi</a>--> + </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.css b/frontend/src/app/_elements/line-chart/line-chart.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/line-chart/line-chart.component.css diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.html b/frontend/src/app/_elements/line-chart/line-chart.component.html new file mode 100644 index 00000000..c8f406f4 --- /dev/null +++ b/frontend/src/app/_elements/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/line-chart/line-chart.component.spec.ts b/frontend/src/app/_elements/line-chart/line-chart.component.spec.ts new file mode 100644 index 00000000..0c5e7ef5 --- /dev/null +++ b/frontend/src/app/_elements/line-chart/line-chart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LineChartComponent } from './line-chart.component'; + +describe('LineChartComponent', () => { + let component: LineChartComponent; + let fixture: ComponentFixture<LineChartComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ LineChartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(LineChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.ts b/frontend/src/app/_elements/line-chart/line-chart.component.ts new file mode 100644 index 00000000..1a8579a0 --- /dev/null +++ b/frontend/src/app/_elements/line-chart/line-chart.component.ts @@ -0,0 +1,88 @@ +import { Component, OnInit, Input } 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 OnInit { + + 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(); + } + + ngOnInit(): 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/metric-view/metric-view.component.css b/frontend/src/app/_elements/metric-view/metric-view.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/_elements/metric-view/metric-view.component.css diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html new file mode 100644 index 00000000..e7a4c547 --- /dev/null +++ b/frontend/src/app/_elements/metric-view/metric-view.component.html @@ -0,0 +1,5 @@ +<div> + <app-line-chart> + + </app-line-chart> +</div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts b/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts new file mode 100644 index 00000000..c3ecc67f --- /dev/null +++ b/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MetricViewComponent } from './metric-view.component'; + +describe('MetricViewComponent', () => { + let component: MetricViewComponent; + let fixture: ComponentFixture<MetricViewComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MetricViewComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MetricViewComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts new file mode 100644 index 00000000..9193a0e5 --- /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 { SignalRService } from 'src/app/_services/signal-r.service'; +import { LineChartComponent } from '../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; + + @Input() history!: any[]; + + constructor(private signalRService: SignalRService) { } + + ngOnInit(): void { + } + + 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.html b/frontend/src/app/_elements/model-load/model-load.component.html index f40ea476..1f9852d1 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.html +++ b/frontend/src/app/_elements/model-load/model-load.component.html @@ -1,12 +1,10 @@ <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}"> + <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}"> + <button type="button" id="btnNewModel" class="btn" (click)="viewNewModelForm()" [ngClass]="{'btnType1': !showMyModels, 'btnType2': showMyModels}"> Dodajte novi model </button> </div> @@ -17,8 +15,7 @@ <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}"> + <li class="list-group-item p-3" *ngFor="let model of myModels|filter:((forExperiment != undefined) ? forExperiment.type : '')" [ngClass]="{'selectedModelClass': this.selectedModel == model}"> <app-item-model name="usersModel" [model]="model" (click)="selectThisModel(model);"> </app-item-model> </li> @@ -43,11 +40,7 @@ <textarea class="form-control" name="desc" rows="3" [(ngModel)]="newModel.description"></textarea> </div> </div> - <div class="col-2"> - <label for="dateCreated" class="col-form-label">Datum:</label> - <input type="text" class="form-control-plaintext" id="dateCreated" placeholder="--/--/--" - value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly> - </div> + </div> <h2 class="mt-5 mb-4 mx-5">Parametri treniranja modela:</h2> <div> @@ -58,8 +51,7 @@ <label for="type" class="col-form-label">Tip problema: </label> </div> <div class="col-2"> - <select id=typeOptions class="form-control" name="type" [(ngModel)]="newModel.type" - (change)="filterOptions()"> + <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"> @@ -72,10 +64,7 @@ <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()"> + <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> @@ -86,7 +75,7 @@ <label for="optimizer" class="col-form-label">Optimizacija: </label> </div> <div class="col-2"> - <select id=optimizerOptions class="form-control" name="optimizer" [(ngModel)]="newModel.optimizer"> + <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"> @@ -100,19 +89,17 @@ <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()"> + <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 obrade gubitka: </label> + <label for="lossFunction" class="col-form-label">Funkcija troška: </label> </div> <div class="col-2"> - <select id=lossFunctionOptions class="form-control" name="lossFunction" - [(ngModel)]="newModel.lossFunction" aria-checked="true"> + <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"> @@ -122,10 +109,22 @@ </div> <div class="col-1"></div> <div class="col-3"> - <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label> + <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: <b>{{newModel.batchSize}}</b><br>(izaberite stepen dvojke)</label> </div> <div class="col-1"> - <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize"> + + <input type="number" min="0" step="1" max="7" class="form-control" name="batchSizePower" [(ngModel)]="batchSizePower" (click)="updateBatchSize()"> + + </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> @@ -138,8 +137,7 @@ <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> + <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"> @@ -147,8 +145,7 @@ <div class="input-group-prepend"> <span class="input-group-text">#{{i+1}}</span> </div> - <select [id]="'hiddenLayerActivationFunctionOption_'+i" class="form-control" - [(ngModel)]="newModel.hiddenLayerActivationFunctions[i]"> + <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"> @@ -160,12 +157,10 @@ </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> + <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-control" - name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction"> + <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"> @@ -178,26 +173,23 @@ </div> </div> - <div class="form-check form-check-inline overflow-auto m-4" style="width: max-content;"> + <!--<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"> + <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> + <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>--> + <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 + <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="uploadModel();">Sačuvaj model</button> <div class="col"></div> </div> diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts index 745dc12e..fb4b3fd0 100644 --- a/frontend/src/app/_elements/model-load/model-load.component.ts +++ b/frontend/src/app/_elements/model-load/model-load.component.ts @@ -1,7 +1,10 @@ -import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core'; +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 { AuthService } from 'src/app/_services/auth.service'; import { ModelsService } from 'src/app/_services/models.service'; +import { SignalRService } from 'src/app/_services/signal-r.service'; import { GraphComponent } from '../graph/graph.component'; @@ -13,6 +16,7 @@ import { GraphComponent } from '../graph/graph.component'; export class ModelLoadComponent implements OnInit { @ViewChild(GraphComponent) graph!: GraphComponent; + @Input() forExperiment?: Experiment; @Output() selectedModelChangeEvent = new EventEmitter<Model>(); newModel: Model = new Model(); @@ -29,21 +33,44 @@ export class ModelLoadComponent implements OnInit { shared = Shared; term: string = ""; - selectedProblemType: string = ''; selectedMetrics = []; lossFunction: any = LossFunction; showMyModels: boolean = true; - constructor(private modelsService: ModelsService) { + batchSizePower: number = 2; + + constructor(private modelsService: ModelsService, private authService: AuthService) { + //console.log("forExperiment = ", this.forExperiment); + this.fetchModels(); + + this.authService.loggedInEvent.subscribe(_ => { + this.fetchModels(); + }) + } + + fetchModels(andSelectWithId: string | null = '') { + //if (this.forExperiment == undefined) { this.modelsService.getMyModels().subscribe((models) => { - this.myModels = models; + this.myModels = models.reverse(); + this.selectThisModel(this.myModels.filter(x => x._id == andSelectWithId)[0]); }); + /*} + else { + this.modelsService.getMyModelsByType(ProblemType.Regression).subscribe((models) => { + this.myModels = models; + //console.log("modeli po tipu: ", this.myModels); + }); + }*/ } ngOnInit(): void { } + updateBatchSize() { + this.newModel.batchSize = 2 ** this.batchSizePower; + } + updateGraph() { this.graph.update(); } @@ -62,12 +89,17 @@ export class ModelLoadComponent implements OnInit { uploadModel() { this.getMetrics(); - this.newModel.username = Shared.username; + this.newModel.uploaderId = Shared.userId; this.modelsService.addModel(this.newModel).subscribe((response) => { - Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.'); - // treba da se selektuje nov model u listi modela - //this.selectedModel = + console.log(this.newModel); + //Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.'); + + Shared.openYesNoDialog("Model dodat", "Model je uspešno dodat u bazu. Da li želite da nastavite treniranje sa dodatim modelom?", () => { + this.fetchModels(response._id); + this.showMyModels = true; + }); + this.fetchModels(); }, (error) => { Shared.openDialog('Greška', 'Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom.'); }); diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 7d0c4cd8..1988b834 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -6,31 +6,25 @@ </a> <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"> - <li><a routerLink="" class="nav-link px-2" - [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li> - <li><a routerLink="experiment" class="nav-link px-2" - [class]="(currentUrl === '/experiment') ? 'text-secondary' : 'text-white'">Napravi eksperiment</a> + <li><a routerLink="" class="nav-link px-2" [class]="(currentUrl === '') ? 'text-secondary' : 'text-white'">Početna</a></li> + <li><a routerLink="experiment" class="nav-link px-2" [class]="(currentUrl === '/experiment') ? 'text-secondary' : 'text-white'">Napravi eksperiment</a> </li> - <li><a routerLink="training" class="nav-link px-2" - [class]="(currentUrl === '/training') ? 'text-secondary' : 'text-white'">Treniraj model</a> + <li><a routerLink="training" class="nav-link px-2" [class]="(currentUrl === '/training') ? 'text-secondary' : 'text-white'">Treniraj model</a> </li> - <li><a routerLink="my-predictors" class="nav-link px-2" - [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a> + <li><a routerLink="my-predictors" class="nav-link px-2" [class]="(currentUrl === '/my-predictors') ? 'text-secondary' : 'text-white' + (shared.loggedIn) ? '' : 'disabled'">Predvidi</a> </li> </ul> <div *ngIf="shared.loggedIn" class="dropdown text-end"> - <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1" - data-bs-toggle="dropdown" aria-expanded="false"> - <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" - class="rounded-circle"> + <a href="#" class="d-block link-light text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false"> + <img [src]="'/assets/profilePictures/'+ shared.photoId +'.png'" alt="mdo" width="32" height="32" class="rounded-circle"> </a> - <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" - style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" - data-popper-placement="bottom-end"> - <li><a class="dropdown-item" routerLink="add-model">Nov model...</a></li> - <li><a class="dropdown-item" routerLink="settings">Podešavanja</a></li> + <ul class="dropdown-menu text-small" aria-labelledby="dropdownUser1" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate(0px, 34px);" data-popper-placement="bottom-end"> + <li><a class="dropdown-item" routerLink="my-datasets">Moji izvori podataka</a></li> + <li><a class="dropdown-item" routerLink="my-models">Moji modeli</a></li> + <li><a class="dropdown-item" routerLink="my-predictors">Moji prediktori</a></li> <li><a class="dropdown-item" routerLink="profile">Moj profil</a></li> + <li><a class="dropdown-item" routerLink="settings" disabled>Podešavanja</a></li> <li> <hr class="dropdown-divider"> </li> @@ -38,12 +32,10 @@ </ul> </div> <div *ngIf="!shared.loggedIn" class="dropdown text-end"> - <button type="button" mat-raised-button color="primary" class="mx-2" data-bs-toggle="modal" - data-bs-target="#modalForLogin"> + <button type="button" mat-raised-button color="primary" class="mx-2" data-bs-toggle="modal" data-bs-target="#modalForLogin"> Prijavi se </button> - <button type="button" mat-raised-button color="primary" data-bs-toggle="modal" - data-bs-target="#modalForRegister"> + <button type="button" mat-raised-button color="primary" data-bs-toggle="modal" data-bs-target="#modalForRegister"> Registruj se </button> </div> diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts index 368508ed..d5d1744f 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.ts +++ b/frontend/src/app/_elements/navbar/navbar.component.ts @@ -4,6 +4,7 @@ import { AuthService } from '../../_services/auth.service'; import shared from 'src/app/Shared'; import { UserInfoService } from 'src/app/_services/user-info.service'; import { MatDialog } from '@angular/material/dialog'; +import { SignalRService } from 'src/app/_services/signal-r.service'; @Component({ selector: 'app-navbar', @@ -15,11 +16,15 @@ export class NavbarComponent implements OnInit { currentUrl: string; shared = shared; - constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService, private matDialog: MatDialog) { + constructor(public location: Location, private auth: AuthService, private userInfoService: UserInfoService, private matDialog: MatDialog, private signalRService: SignalRService) { shared.dialog = matDialog; this.currentUrl = this.location.path(); this.location.onUrlChange(() => { this.currentUrl = this.location.path(); + }); + + this.auth.loggedInEvent.subscribe(_ => { + this.signalRService.startConnection(); }) } @@ -34,5 +39,6 @@ export class NavbarComponent implements OnInit { logOut() { this.auth.logOut(); + this.signalRService.stopConnection(); } } diff --git a/frontend/src/app/_elements/notifications/notifications.component.html b/frontend/src/app/_elements/notifications/notifications.component.html index ef897cfc..3b2f4eaa 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.html +++ b/frontend/src/app/_elements/notifications/notifications.component.html @@ -11,14 +11,18 @@ </button> </h2> - <div id="collapseNotifs" class="collapse show"> + <div id="collapseNotifs" class="collapse show overflow-auto" style="max-height: 32rem;"> <div *ngFor="let notification of notifications" class="p-2 m-1 border rounded"> - <div class="d-flex flex-row"> - <p>{{notification.title}}</p> - </div> - <div *ngIf="notification.hasProgress" class="border-3 border-primary bg-dark m-1" style="height: 5px; margin-top: -10px !important;"> - <div class="bg-primary" style="height: 5px;" [style]="'width: '+(notification.progress*100)+'%;'"> + <div class="d-flex flex-row "> + <div> + <p>{{notification.title}}</p> + <div *ngIf="notification.hasProgress" class="border-3 border-primary bg-dark m-1" style="height: 5px; margin-top: -10px !important; min-width: 12rem;"> + <div class="bg-primary" style="height: 5px;" [style]="'width: '+(notification.progress*100)+'%;'"> + </div> + </div> </div> + <button type="button" class="btn-close ms-auto align-self-center" aria-label="Close" (click)="removeNotification(notification);"></button> </div> + </div> </div>
\ No newline at end of file diff --git a/frontend/src/app/_elements/notifications/notifications.component.ts b/frontend/src/app/_elements/notifications/notifications.component.ts index e199f70a..f324662a 100644 --- a/frontend/src/app/_elements/notifications/notifications.component.ts +++ b/frontend/src/app/_elements/notifications/notifications.component.ts @@ -21,13 +21,33 @@ export class NotificationsComponent implements OnInit { this.notifications.push(new Notification(`Obrađen izvor podataka: ${dName}`, dId, 1.0, false)); }); - this.signalRService.hubConnection.on("NotifyEpoch", (epoch: string, mName: string, mId: string, numEpochs) => { - //todo epoch - this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, 0.5)); + this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => { + const existingNotification = this.notifications.find(x => x.id === mId) + const progress = ((currentEpoch + 1) / totalEpochs); + //console.log("Ukupno epoha", totalEpochs, "Trenutna epoha:", currentEpoch); + if (!existingNotification) + this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true)); + else { + existingNotification.progress = progress; + } + }); + + this.signalRService.hubConnection.on("NotifyModel", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => { + const existingNotification = this.notifications.find(x => x.id === mId) + const progress = ((currentEpoch + 1) / totalEpochs); + if (!existingNotification) + this.notifications.push(new Notification(`Treniranje modela: ${mName}`, mId, progress, true)); + else { + existingNotification.progress = progress; + } }); } else { console.warn("Notifications: No connection!"); } } + removeNotification(notification: Notification) { + this.notifications.splice(this.notifications.indexOf(notification), 1); + } + } diff --git a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html index 06e74093..572e8c4c 100644 --- a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html +++ b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html @@ -1,8 +1,8 @@ <h2 mat-dialog-title class="text-muted">{{data.title}}</h2> <div mat-dialog-content class="mt-4" style="color: rgb(81, 76, 76);"> - {{data.message}} + {{data.message}} </div> <div mat-dialog-actions class="d-flex justify-content-center mt-4"> - <button mat-button cdkFocusInitial (click)="onYesClick()" style="background-color: lightgray;">Da</button> - <button mat-button cdkFocusInitial (click)="onNoClick()" style="background-color: lightgray;">Ne</button> + <button mat-button cdkFocusInitial (click)="onYesClick()" class="btn-lg" style="background-color: #003459; color:white;">Da</button> + <button mat-button cdkFocusInitial (click)="onNoClick()" class="btn-lg" style="background-color: lightgray;">Ne</button> </div>
\ No newline at end of file diff --git a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts index c83bf208..66b3755e 100644 --- a/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts +++ b/frontend/src/app/_pages/filter-datasets/filter-datasets.component.ts @@ -33,7 +33,7 @@ export class FilterDatasetsComponent implements OnInit { newDataset._id = ""; newDataset.isPublic = false; newDataset.lastUpdated = new Date(); - newDataset.username = decodedToken.name; + newDataset.uploaderId = decodedToken.uploaderId; let name=prompt("Unesite naziv dataset-a",newDataset.name); newDataset.name=name as string; if(name!=null && name!="") diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index 08f95a69..f5e94d27 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -53,4 +53,5 @@ <app-carousel [items]="publicPredictors" [type]="'Predictor'"> </app-carousel> <h3><a routerLink="browse-predictors">Pogledaj sve javne trenirane modele...</a></h3> + </div>
\ 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 index b0e9c4ef..9b281239 100644 --- a/frontend/src/app/_pages/my-models/my-models.component.html +++ b/frontend/src/app/_pages/my-models/my-models.component.html @@ -15,7 +15,7 @@ <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)="deleteThisModel(model)" mat-raised-button color="primary">Koristi + <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> diff --git a/frontend/src/app/_pages/my-models/my-models.component.ts b/frontend/src/app/_pages/my-models/my-models.component.ts index 92d3fbaa..d379fa69 100644 --- a/frontend/src/app/_pages/my-models/my-models.component.ts +++ b/frontend/src/app/_pages/my-models/my-models.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; import shared from 'src/app/Shared'; import Model from 'src/app/_data/Model'; import { ModelsService } from 'src/app/_services/models.service'; @@ -12,7 +13,7 @@ export class MyModelsComponent implements OnInit { myModels: Model[] = []; //myModel: Model; - constructor(private modelsS : ModelsService) { + constructor(private modelsS : ModelsService, private router : Router) { @@ -44,6 +45,11 @@ deleteThisModel(model: Model): void{ } +useThisModel(model: Model): void{ + + this.router.navigate(['/training']) + +} getAllMyModels(): void{ this.modelsS.getMyModels().subscribe(m => { this.myModels = m; diff --git a/frontend/src/app/_pages/my-predictors/my-predictors.component.html b/frontend/src/app/_pages/my-predictors/my-predictors.component.html index d38f93e4..31fa786c 100644 --- a/frontend/src/app/_pages/my-predictors/my-predictors.component.html +++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.html @@ -1,16 +1,23 @@ <div id="header"> <h1>Trenirani modeli</h1> </div> -<div id="container" style="background-color:rgba(255, 255, 255, 0.8);"> -<div class="row" *ngFor="let predictor of predictors"> - <div class="left"> - <app-item-predictor [predictor]="predictor"></app-item-predictor> - </div> - <div> - <button (click)="delete(predictor)" mat-raised-button color="warn" style="min-width: 15rem;float: right" ><mat-icon>delete</mat-icon></button> - </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.ts b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts index 17c496fd..4dc5300d 100644 --- a/frontend/src/app/_pages/my-predictors/my-predictors.component.ts +++ b/frontend/src/app/_pages/my-predictors/my-predictors.component.ts @@ -1,7 +1,7 @@ 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', @@ -12,28 +12,30 @@ export class MyPredictorsComponent implements OnInit { constructor(private predictorsS : PredictorsService) { } ngOnInit(): void { - this.getAllMyPredictors(); - + this.predictorsS.getMyPredictors().subscribe((response) => { + this.predictors = response; + }, (error) => { + if (error.error == "Predictor with...") { + shared.openDialog("Greska", "Greska"); + } + }); } - delete(predictor: Predictor){ - if(window.confirm("IZABRANI MODEL ĆE BITI IZBRISAN")) - { - this.predictorsS.deletePredictor(predictor).subscribe((response) => { - this.getAllMyPredictors(); - }, (error) =>{ - if (error.error == "Predictor with name = {name} deleted") { - alert("Greška pri brisanju modela!"); - } - }); - } - - + 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(m => { - this.predictors = m; + this.predictorsS.getMyPredictors().subscribe(p => { + this.predictors = p; }); } diff --git a/frontend/src/app/_services/auth.service.ts b/frontend/src/app/_services/auth.service.ts index 92cebe7f..9e3f9f2f 100644 --- a/frontend/src/app/_services/auth.service.ts +++ b/frontend/src/app/_services/auth.service.ts @@ -1,4 +1,4 @@ -import { Injectable } from '@angular/core'; +import { EventEmitter, Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { JwtHelperService } from '@auth0/angular-jwt'; import { CookieService } from 'ngx-cookie-service'; @@ -12,6 +12,8 @@ const jwtHelper = new JwtHelperService(); }) export class AuthService { + public loggedInEvent: EventEmitter<boolean> = new EventEmitter(); + shared = shared; constructor(private http: HttpClient, private cookie: CookieService) { } @@ -44,6 +46,7 @@ export class AuthService { enableAutoRefresh() { this.lastToken = this.cookie.get('token'); + clearTimeout(this.refresher); let exp = jwtHelper.getTokenExpirationDate(this.lastToken); if (!exp) { exp = new Date(); @@ -51,6 +54,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); @@ -79,6 +83,7 @@ export class AuthService { } this.cookie.set('token', token, exp); this.updateUser(); + this.loggedInEvent.emit(true); } updateUser() { diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts index c3281be6..b2272f0a 100644 --- a/frontend/src/app/_services/datasets.service.ts +++ b/frontend/src/app/_services/datasets.service.ts @@ -29,10 +29,10 @@ export class DatasetsService { } editDataset(dataset: Dataset): Observable<Dataset> { - return this.http.put<Dataset>(`${Configuration.settings.apiURL}/dataset/`, dataset, { headers: this.authService.authHeader() }); + return this.http.put<Dataset>(`${Configuration.settings.apiURL}/dataset/` + dataset._id, dataset, { headers: this.authService.authHeader() }); } deleteDataset(dataset: Dataset) { - return this.http.delete(`${Configuration.settings.apiURL}/dataset/` + dataset.name, { headers: this.authService.authHeader(), responseType: "text" }); + return this.http.delete(`${Configuration.settings.apiURL}/dataset/` + dataset._id, { headers: this.authService.authHeader(), responseType: "text" }); } } diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts index 44383828..1130b12c 100644 --- a/frontend/src/app/_services/models.service.ts +++ b/frontend/src/app/_services/models.service.ts @@ -1,6 +1,6 @@ import { HttpClient, HttpParams } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import Model from '../_data/Model'; +import Model, { ProblemType } from '../_data/Model'; import { AuthService } from './auth.service'; import { Observable } from 'rxjs'; import Dataset from '../_data/Dataset'; @@ -31,20 +31,16 @@ export class ModelsService { addModel(model: Model): Observable<any> { return this.http.post(`${Configuration.settings.apiURL}/model/add`, model, { headers: this.authService.authHeader() }); } - addDataset(dataset: Dataset): Observable<any> { - return this.http.post(`${Configuration.settings.apiURL}/dataset/add`, dataset, { headers: this.authService.authHeader() }); - } trainModel(modelId: string, experimentId: string): Observable<any> { return this.http.post(`${Configuration.settings.apiURL}/model/trainmodel`, { ModelId: modelId, ExperimentId: experimentId }, { headers: this.authService.authHeader(), responseType: 'text' }); } - getMyDatasets(): Observable<Dataset[]> { - return this.http.get<Dataset[]>(`${Configuration.settings.apiURL}/dataset/mydatasets`, { headers: this.authService.authHeader() }); - } - getMyModels(): Observable<Model[]> { return this.http.get<Model[]>(`${Configuration.settings.apiURL}/model/mymodels`, { headers: this.authService.authHeader() }); } + getMyModelsByType(problemType: ProblemType): Observable<Model[]> { + return this.http.get<Model[]>(`${Configuration.settings.apiURL}/model/mymodelsbytype/` + problemType, { headers: this.authService.authHeader() }); + } editModel(model: Model): Observable<Model> { return this.http.put<Model>(`${Configuration.settings.apiURL}/model/`, model, { headers: this.authService.authHeader() }); @@ -53,4 +49,5 @@ export class ModelsService { deleteModel(model: Model) { return this.http.delete(`${Configuration.settings.apiURL}/model/` + model.name, { headers: this.authService.authHeader(), responseType: "text" }); } + } diff --git a/frontend/src/app/_services/predictors.service.ts b/frontend/src/app/_services/predictors.service.ts index 9e8383aa..a24ee708 100644 --- a/frontend/src/app/_services/predictors.service.ts +++ b/frontend/src/app/_services/predictors.service.ts @@ -24,7 +24,7 @@ export class PredictorsService { } deletePredictor(predictor: Predictor) { - return this.http.delete(`${Configuration.settings.apiURL}/predictor/` + predictor.name, { headers: this.authService.authHeader(), responseType: "text" }); + return this.http.delete(`${Configuration.settings.apiURL}/predictor/` + predictor._id, { headers: this.authService.authHeader(), responseType: "text" }); } getMyPredictors(): Observable<Predictor[]> { diff --git a/frontend/src/app/_services/signal-r.service.ts b/frontend/src/app/_services/signal-r.service.ts index b279b5ca..6a2e61e9 100644 --- a/frontend/src/app/_services/signal-r.service.ts +++ b/frontend/src/app/_services/signal-r.service.ts @@ -16,13 +16,18 @@ export class SignalRService { }).build(); this.hubConnection.on("Notify", (message: string) => { - console.log(" " + message); + //console.log(" " + message); }); this.hubConnection .start() - .then(() => console.log("con Started")) - .catch(err => console.log("Error" + err)) + .then(() => {}) + .catch(err => {}) } + + public stopConnection = () => { + this.hubConnection?.stop(); + } + constructor(private cookie: CookieService) { } } diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index e22f7a88..a0952d21 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -19,6 +19,7 @@ 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/:id', component: TrainingComponent, data: { title: 'Treniraj model' } }, { path: 'training', 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' } }, @@ -28,6 +29,7 @@ const routes: Routes = [ { 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' } }, + ]; @NgModule({ diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index 59f247ed..54c18bec 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -50,7 +50,6 @@ export class AppComponent implements OnInit { private startHttpRequest = () => { this.http.get('http://localhost:5283/chatHub') .subscribe(res => { - console.log(res); }) } diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index c4f89ad8..51374bd4 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -48,7 +48,11 @@ 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 { PointLinechartComponent } from './point-linechart/point-linechart.component'; +import { MixedChartComponent } from './mixed-chart/mixed-chart.component'; +import { LineChartComponent } from './_elements/line-chart/line-chart.component'; +import { MetricViewComponent } from './_elements/metric-view/metric-view.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); } @@ -87,7 +91,14 @@ export function initializeApp(appConfig: Configuration) { GraphComponent, TrainingComponent, ItemExperimentComponent, - YesNoDialogComponent + YesNoDialogComponent, + LineChartComponent, + PointLinechartComponent, + MixedChartComponent, + LineChartComponent, + MetricViewComponent, + + ], imports: [ BrowserModule, diff --git a/frontend/src/app/experiment/experiment.component.css b/frontend/src/app/experiment/experiment.component.css index 4a3d7741..d84a897e 100644 --- a/frontend/src/app/experiment/experiment.component.css +++ b/frontend/src/app/experiment/experiment.component.css @@ -40,4 +40,9 @@ ul li:hover { h2 { color: #003459; +} + +.boldClass { + font-weight: bold; + font-size: 125%; }
\ No newline at end of file diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html index e46f5bd9..4bdd79b2 100644 --- a/frontend/src/app/experiment/experiment.component.html +++ b/frontend/src/app/experiment/experiment.component.html @@ -4,159 +4,147 @@ <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> + <div class="d-flex flex-row justify-content-center align-items-center my-3 links"> + <a id="firstStep" href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" (click)="updateCarouselIndex(0);" [ngClass]="{'boldClass' : carouselIndex == 0}" style="text-decoration: none">Izvor podataka</a> <mat-icon>arrow_forward</mat-icon> - <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1">Preprocesiranje</a> + <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" (click)="updateCarouselIndex(1)" [ngClass]="{'boldClass' : carouselIndex == 1}" style="text-decoration: none">Preprocesiranje</a> <mat-icon>arrow_forward</mat-icon> - <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2">Dodaj eksperiment</a> + <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2" (click)="updateCarouselIndex(2)" [ngClass]="{'boldClass' : carouselIndex == 2}" style="text-decoration: none">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 id="carouselExampleControls" class="carousel 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="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" - (click)="checkedColumnsChanged(item, 0)"> - <label class="form-check-label" for="cb_{{item.columnName}}"> + <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)="checkedColumnsChanged(item, 0); resetColumnEncodings();"> + <label class="form-check-label" for="cb_{{item.columnName}}"> {{item.columnName}} </label> + </div> </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" - (click)="checkedColumnsChanged(item, 1);"> - <label class="form-check-label" for="rb_{{item.columnName}}"> + <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; checkedColumnsChanged(item, 1); resetColumnEncodings();" + checked> + <label class="form-check-label" for="rb_{{item.columnName}}"> {{item.columnName}} </label> + </div> </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 + + + <div class="mt-5 mb-3 mx-3" *ngIf="countSelectedNullCols() == 0"> + <h3 class="border p-2 text-center"><i>Izabrane kolone nemaju nedostajuće vrednosti koje možete popuniti.</i></h3> + </div> + + <div *ngIf="countSelectedNullCols() != 0"> + <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 *ngIf="selectedColumnsInfoArray.length == selectedDataset.columnInfo.length" for="delRows" class="form-check-label ">Obriši sve + redove sa nedostajućim vrednostima ({{selectedDataset.nullRows}} od {{selectedDataset.rowCount}})</label> + <label *ngIf="selectedColumnsInfoArray.length != selectedDataset.columnInfo.length" for="delRows" class="form-check-label ">Obriši sve + redove sa nedostajućim vrednostima</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 + <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"> + <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"> + </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> + + <div 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);"> + </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);"> + <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> - </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" + + <div class="flex-shrink-1 mx-3"> + <div class="input-group" *ngIf="column.columnName != this.experiment.outputColumn"> + <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 + (change)="emptyFillTextInput(column.columnName)"> + </label> + </div> + <label class="form-control text-secondary" role="alert" *ngIf="column.columnName == this.experiment.outputColumn"> + (Izlazna kolona) + </label> + </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> @@ -165,96 +153,109 @@ </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"> + + <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="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 + + <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"> + <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> - - <div id="encodingForColumns" class="row px-3 my-5"> - <div class="col-1"> - <label for="encoding" class="col-form-label">Enkoding: </label> - </div> - <div class="col-2"> - <select id=encodingOptions class="form-control" name="encoding" [(ngModel)]="experiment.encoding"> - <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" - [value]="option"> - {{ optionName }} - </option> - </select> + + <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-select" [(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> + </div> - <div class="carousel-item mt-2"> - <h2 class="mb-4">3. Dodaj eskperiment</h2> + <div class="carousel-item mt-2"> + <h2 class="mb-4">3. Dodaj eksperiment</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 + <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> + <label for="desc" class="col-sm-2 col-form-label mt-3">Tip problema:</label> + <div class="col-4"> + <select id="typeOptions" class="form-select" name="type" [(ngModel)]="experiment.type"> + <option + *ngFor="let option of Object.keys(ProblemType); let optionName of Object.values(ProblemType)" + [value]="option"> + {{ optionName }} + </option> + </select> + </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 class="col"></div> + </div> </div> + <div class="col"></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 class="m-3 d-flex flex-row align-items-center" style=" margin-left: auto;"> + <button class="me-auto" *ngIf="carouselIndex != 0" mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="prev" (click)="updateCarouselIndex(carouselIndex - 1)"> + <mat-icon>arrow_backward</mat-icon> + </button> + <button class="ms-auto" *ngIf="carouselIndex != 2" mat-fab color="primary" data-bs-target="#carouselExampleControls" data-bs-slide="next" (click)="updateCarouselIndex(carouselIndex + 1)"> + <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 index b5e1d1f4..64adce3f 100644 --- a/frontend/src/app/experiment/experiment.component.ts +++ b/frontend/src/app/experiment/experiment.component.ts @@ -1,10 +1,14 @@ import { Component, OnInit } from '@angular/core'; import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith, Encoding } from '../_data/Experiment'; -import Model from '../_data/Model'; +import Model,{ProblemType} 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'; +import { Router } from '@angular/router'; +import { TrainingComponent } from '../training/training.component'; +import { NEVER, retryWhen } from 'rxjs'; @Component({ selector: 'app-experiment', @@ -21,14 +25,16 @@ export class ExperimentComponent implements OnInit { NullValueOptions = NullValueOptions; ReplaceWith = ReplaceWith; Encoding = Encoding; + ColumnEncoding = ColumnEncoding; Object = Object; - + ProblemType=ProblemType; selectedColumnsInfoArray: ColumnInfo[] = []; selectedNotNullColumnsArray: string[] = []; tempTestSetDistribution = 90; + carouselIndex: number = 0; - constructor(private modelsService: ModelsService, private experimentsService: ExperimentsService) { + constructor(private experimentsService: ExperimentsService, private router: Router) { } ngOnInit(): void { @@ -38,6 +44,16 @@ export class ExperimentComponent implements OnInit { this.selectedDataset = dataset; this.selectedColumnsInfoArray = this.selectedDataset.columnInfo; this.selectedNotNullColumnsArray = []; + this.experiment.outputColumn = this.selectedDataset.columnInfo[this.selectedDataset.columnInfo.length - 1].columnName; + + this.resetColumnEncodings(); + } + + 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 { @@ -153,7 +169,7 @@ export class ExperimentComponent implements OnInit { } saveExperiment() { - if (this.selectedDataset == undefined) { + if (this.selectedDataset == undefined) { Shared.openDialog("Greška", "Izvor podataka nije izabran!"); return; } @@ -184,10 +200,9 @@ export class ExperimentComponent implements OnInit { this.experimentsService.addExperiment(this.experiment).subscribe((response) => { this.experiment = response; - this.selectedColumnsInfoArray = []; - this.selectedNotNullColumnsArray = []; - - Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran."); + Shared.openYesNoDialog("Obaveštenje", "Eksperiment je uspešno kreiran. Da li želite da pređete na treniranje modela?", () => { + this.router.navigate(['/training', this.experiment._id]); + }); }, (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."); @@ -205,4 +220,23 @@ export class ExperimentComponent implements OnInit { } return counter; } + + updateCarouselIndex(newIndex: number) { + if (newIndex > 2) + newIndex = 2; + else if (newIndex < 0) + newIndex = 0; + + if (this.carouselIndex == 0 && (newIndex == 1 || newIndex == 2)) + this.checkRequiredData(); + this.carouselIndex = newIndex; + } + + checkRequiredData() { + if (this.selectedDataset == undefined) { + (<HTMLAnchorElement>document.getElementById("firstStep")).click(); + Shared.openDialog("Pažnja", "Potrebno je da dodate ili izabere izvor podataka kako biste prešli na naredni korak (preprocesiranje)."); + return; + } + } } diff --git a/frontend/src/app/mixed-chart/mixed-chart.component.css b/frontend/src/app/mixed-chart/mixed-chart.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/mixed-chart/mixed-chart.component.css diff --git a/frontend/src/app/mixed-chart/mixed-chart.component.html b/frontend/src/app/mixed-chart/mixed-chart.component.html new file mode 100644 index 00000000..806ea9e8 --- /dev/null +++ b/frontend/src/app/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/mixed-chart/mixed-chart.component.spec.ts b/frontend/src/app/mixed-chart/mixed-chart.component.spec.ts new file mode 100644 index 00000000..361cd047 --- /dev/null +++ b/frontend/src/app/mixed-chart/mixed-chart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { MixedChartComponent } from './mixed-chart.component'; + +describe('MixedChartComponent', () => { + let component: MixedChartComponent; + let fixture: ComponentFixture<MixedChartComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ MixedChartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(MixedChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/mixed-chart/mixed-chart.component.ts b/frontend/src/app/mixed-chart/mixed-chart.component.ts new file mode 100644 index 00000000..2524ee36 --- /dev/null +++ b/frontend/src/app/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/point-linechart/point-linechart.component.css b/frontend/src/app/point-linechart/point-linechart.component.css new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/frontend/src/app/point-linechart/point-linechart.component.css diff --git a/frontend/src/app/point-linechart/point-linechart.component.html b/frontend/src/app/point-linechart/point-linechart.component.html new file mode 100644 index 00000000..f9f9a24a --- /dev/null +++ b/frontend/src/app/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/point-linechart/point-linechart.component.spec.ts b/frontend/src/app/point-linechart/point-linechart.component.spec.ts new file mode 100644 index 00000000..fe08fe7c --- /dev/null +++ b/frontend/src/app/point-linechart/point-linechart.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PointLinechartComponent } from './point-linechart.component'; + +describe('PointLinechartComponent', () => { + let component: PointLinechartComponent; + let fixture: ComponentFixture<PointLinechartComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ PointLinechartComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(PointLinechartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/point-linechart/point-linechart.component.ts b/frontend/src/app/point-linechart/point-linechart.component.ts new file mode 100644 index 00000000..3497a20c --- /dev/null +++ b/frontend/src/app/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/training/training.component.html b/frontend/src/app/training/training.component.html index 0ce4cc89..deac88cc 100644 --- a/frontend/src/app/training/training.component.html +++ b/frontend/src/app/training/training.component.html @@ -2,45 +2,40 @@ <h1>Trenirajte veštačku neuronsku mrežu</h1> </div> <div id="wrapper" class="mb-4"> - <div id="container" class="container p-5 row" style="background-color: white; min-height: 100%;"> - <div class="col"></div> + <div id="container" class="container p-5" style="background-color: white; min-height: 100%;"> + <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> - <div class="col-10"> + <h2 class="mt-5 mb-2">2. Izaberite model</h2> + <app-model-load *ngIf="selectedExperiment" (selectedModelChangeEvent)="selectModel($event)" [forExperiment]="selectedExperiment"></app-model-load> + <h3 *ngIf="!selectedExperiment">Morate prvo izabrati eksperiment.</h3> - <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> + <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 + <div class="d-flex flex-row justify-content-center align-items-center my-3"> + <button #trainButton 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> + <h2 class="mt-5">Rezultati treniranja</h2> + <div class="m-3" *ngIf="trainingResult"> + <h2 class="my-2">Rezultati treniranja:</h2> + <app-metric-view *ngIf="trainingResult" [metrics]="trainingResult"></app-metric-view> + </div> + </div> + + <h2 class="mt-5">Rezultati treniranja</h2> + <div class="m-3" *ngIf="trainingResult"> + <h2 class="my-2">Rezultati treniranja:</h2> + <app-metric-view *ngIf="trainingResult" [metrics]="trainingResult"></app-metric-view> </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 index 027d2c22..a0bec8e2 100644 --- a/frontend/src/app/training/training.component.ts +++ b/frontend/src/app/training/training.component.ts @@ -1,17 +1,26 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; import Shared from '../Shared'; import Experiment from '../_data/Experiment'; -import Model from '../_data/Model'; -import { DatasetsService } from '../_services/datasets.service'; +import Model, { ProblemType } from '../_data/Model'; +import { MetricViewComponent } from '../_elements/metric-view/metric-view.component'; +import { ModelLoadComponent } from '../_elements/model-load/model-load.component'; +import { AuthService } from '../_services/auth.service'; import { ExperimentsService } from '../_services/experiments.service'; import { ModelsService } from '../_services/models.service'; +import { SignalRService } from '../_services/signal-r.service'; @Component({ selector: 'app-training', templateUrl: './training.component.html', styleUrls: ['./training.component.css'] }) -export class TrainingComponent{ +export class TrainingComponent implements OnInit { + + @ViewChild(ModelLoadComponent) modelLoadComponent?: ModelLoadComponent; + @ViewChild("trainButton") trainButtonRef!: ElementRef; + + @ViewChild(MetricViewComponent) metricViewComponent!: MetricViewComponent; myExperiments?: Experiment[]; selectedExperiment?: Experiment; @@ -19,16 +28,55 @@ export class TrainingComponent{ trainingResult: any; + history: any[] = []; + term: string = ""; - constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private experimentsService: ExperimentsService) { + constructor(private modelsService: ModelsService, private route: ActivatedRoute, private experimentsService: ExperimentsService, private authService: AuthService, private signalRService: SignalRService) { + } + + ngOnInit(): void { + this.route.queryParams.subscribe(params => { + let experimentId = this.route.snapshot.paramMap.get("id"); + + this.fetchExperiments(experimentId); + + this.authService.loggedInEvent.subscribe(_ => { + this.fetchExperiments(experimentId); + + this.signalRService.startConnection(); + }); + + console.log(this.signalRService.hubConnection); + if (this.signalRService.hubConnection) { + this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => { + console.log(this.selectedModel?._id, mId); + if (this.selectedModel?._id == mId) { + stat = stat.replace(/'/g, '"'); + this.trainingResult = JSON.parse(stat); + //console.log('JSON', this.trainingResult); + this.history.push(this.trainingResult); + this.metricViewComponent.update(this.history); + } + }); + } + }); + } + + fetchExperiments(andSelectWithId: string | null = '') { this.experimentsService.getMyExperiments().subscribe((experiments) => { - this.myExperiments = experiments; + this.myExperiments = experiments.reverse(); + + this.selectedExperiment = this.myExperiments.filter(x => x._id == andSelectWithId)[0]; + if (this.modelLoadComponent) + this.modelLoadComponent.newModel.type = this.selectedExperiment.type; }); } selectThisExperiment(experiment: Experiment) { this.selectedExperiment = experiment; + if (this.modelLoadComponent) + this.modelLoadComponent.newModel.type = this.selectedExperiment.type; } selectModel(model: Model) { @@ -46,9 +94,11 @@ export class TrainingComponent{ Shared.openDialog("Greška", "Molimo Vas da izaberete model."); return; } + this.trainButtonRef.nativeElement.disabled = true; 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.trainButtonRef.nativeElement.disabled = false; + Shared.openDialog("Obaveštenje", "Treniranje modela je počelo!"); this.trainingResult = response; }); } |