From 8392d3cf8ba8cdecc7676e2e3d55edae11c048ef Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 13 Apr 2022 20:56:09 +0200
Subject: Sredjen izgled stranica "Napravi eksperiment" i "Treniraj model", kao
 i komponenti model-load i dataset-load. Kod dodavanja modela, postavljeno da
 sve metrike budu automatski cekirane.

---
 frontend/package-lock.json                         | 178 ++++++---
 .../dataset-load/dataset-load.component.css        |   5 +
 .../dataset-load/dataset-load.component.html       |  23 +-
 .../_elements/model-load/model-load.component.css  |   4 +
 .../_elements/model-load/model-load.component.html |  82 ++--
 .../src/app/experiment/experiment.component.css    |   4 +
 .../src/app/experiment/experiment.component.html   | 427 ++++++++++-----------
 .../src/app/experiment/experiment.component.ts     |   6 -
 frontend/src/app/training/training.component.html  |  70 ++--
 frontend/src/app/training/training.component.ts    |   4 +-
 10 files changed, 409 insertions(+), 394 deletions(-)

(limited to 'frontend')

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 488653db..82cd01e6 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -452,6 +452,7 @@
       "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",
@@ -481,6 +482,7 @@
       "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"
       },
@@ -492,6 +494,7 @@
       "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",
@@ -521,6 +524,7 @@
       "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"
       }
@@ -529,6 +533,7 @@
       "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",
@@ -542,6 +547,7 @@
       "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"
       }
@@ -781,6 +787,7 @@
       "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",
@@ -810,6 +817,7 @@
       "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"
       }
@@ -818,6 +826,7 @@
       "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"
       }
@@ -826,6 +835,7 @@
       "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",
@@ -839,6 +849,7 @@
       "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"
       }
@@ -3365,6 +3376,7 @@
       "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"
@@ -3638,6 +3650,7 @@
       "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"
       }
@@ -3734,6 +3747,7 @@
       "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"
       },
@@ -3911,6 +3925,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -4929,6 +4944,7 @@
       "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"
       }
@@ -5093,6 +5109,7 @@
       "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"
@@ -5102,6 +5119,7 @@
       "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"
@@ -5905,6 +5923,7 @@
       "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"
       },
@@ -6073,6 +6092,7 @@
       "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": [
@@ -6182,6 +6202,7 @@
       "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"
       },
@@ -6774,6 +6795,7 @@
       "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"
       },
@@ -6827,6 +6849,7 @@
       "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"
       }
@@ -6843,6 +6866,7 @@
       "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"
       },
@@ -6869,6 +6893,7 @@
       "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"
       }
@@ -7734,6 +7759,7 @@
       "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"
       },
@@ -7745,6 +7771,7 @@
       "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"
       }
@@ -8369,6 +8396,7 @@
       "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"
       }
@@ -9064,6 +9092,7 @@
       "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"
       },
@@ -9878,6 +9907,7 @@
       "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"
       },
@@ -9888,7 +9918,8 @@
     "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=="
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
+      "dev": true
     },
     "node_modules/regenerate": {
       "version": "1.4.2",
@@ -10178,7 +10209,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/sass": {
       "version": "1.49.0",
@@ -10308,6 +10339,7 @@
       "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"
       },
@@ -10692,7 +10724,8 @@
     "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=="
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
     },
     "node_modules/spdy": {
       "version": "4.0.2",
@@ -11093,6 +11126,7 @@
       "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"
       },
@@ -11184,6 +11218,7 @@
       "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"
@@ -11823,7 +11858,8 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "node_modules/yaml": {
       "version": "1.10.2",
@@ -12158,6 +12194,7 @@
       "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",
@@ -12175,6 +12212,7 @@
           "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"
           }
@@ -12183,6 +12221,7 @@
           "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",
@@ -12204,7 +12243,8 @@
             "semver": {
               "version": "6.3.0",
               "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+              "dev": true
             }
           }
         },
@@ -12212,6 +12252,7 @@
           "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",
@@ -12221,7 +12262,8 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         }
       }
     },
@@ -12366,6 +12408,7 @@
       "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",
@@ -12387,12 +12430,14 @@
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
         },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         }
       }
     },
@@ -12400,6 +12445,7 @@
       "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",
@@ -12409,7 +12455,8 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         }
       }
     },
@@ -13570,8 +13617,7 @@
         "ws": {
           "version": "7.5.7",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz",
-          "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
-          "requires": {}
+          "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A=="
         }
       }
     },
@@ -13587,8 +13633,7 @@
       "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,
-      "requires": {}
+      "dev": true
     },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -14188,8 +14233,7 @@
       "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,
-      "requires": {}
+      "dev": true
     },
     "adjust-sourcemap-loader": {
       "version": "4.0.0",
@@ -14312,6 +14356,7 @@
       "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"
@@ -14509,7 +14554,8 @@
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
     },
     "bl": {
       "version": "4.1.0",
@@ -14580,8 +14626,7 @@
     "bootstrap": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
-      "requires": {}
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -14596,6 +14641,7 @@
       "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"
       }
@@ -14724,6 +14770,7 @@
       "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",
@@ -14751,8 +14798,7 @@
       "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,
-      "requires": {}
+      "dev": true
     },
     "clean-stack": {
       "version": "2.2.0",
@@ -15230,8 +15276,7 @@
       "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,
-      "requires": {}
+      "dev": true
     },
     "css-select": {
       "version": "4.2.1",
@@ -15497,7 +15542,8 @@
     "dependency-graph": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
-      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg=="
+      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+      "dev": true
     },
     "destroy": {
       "version": "1.0.4",
@@ -15632,6 +15678,7 @@
       "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"
@@ -15641,6 +15688,7 @@
           "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"
@@ -16164,6 +16212,7 @@
       "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"
       }
@@ -16286,6 +16335,7 @@
       "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": {
@@ -16361,6 +16411,7 @@
       "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"
       }
@@ -16617,8 +16668,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ieee754": {
       "version": "1.2.1",
@@ -16815,6 +16865,7 @@
       "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"
       }
@@ -16846,7 +16897,8 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
     },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
@@ -16857,6 +16909,7 @@
       "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"
       }
@@ -16876,7 +16929,8 @@
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
     },
     "is-path-cwd": {
       "version": "2.2.0",
@@ -17300,8 +17354,7 @@
       "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,
-      "requires": {}
+      "dev": true
     },
     "karma-source-map-support": {
       "version": "1.4.0",
@@ -17523,6 +17576,7 @@
       "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"
       }
@@ -17531,6 +17585,7 @@
       "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"
       }
@@ -17991,7 +18046,8 @@
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -18524,7 +18580,8 @@
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
     },
     "pify": {
       "version": "2.3.0",
@@ -18640,8 +18697,7 @@
       "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,
-      "requires": {}
+      "dev": true
     },
     "postcss-custom-properties": {
       "version": "12.1.4",
@@ -18711,15 +18767,13 @@
       "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,
-      "requires": {}
+      "dev": true
     },
     "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,
-      "requires": {}
+      "dev": true
     },
     "postcss-image-set-function": {
       "version": "4.0.6",
@@ -18745,8 +18799,7 @@
       "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,
-      "requires": {}
+      "dev": true
     },
     "postcss-lab-function": {
       "version": "4.1.1",
@@ -18773,22 +18826,19 @@
       "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,
-      "requires": {}
+      "dev": true
     },
     "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,
-      "requires": {}
+      "dev": true
     },
     "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,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -18832,15 +18882,13 @@
       "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,
-      "requires": {}
+      "dev": true
     },
     "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,
-      "requires": {}
+      "dev": true
     },
     "postcss-place": {
       "version": "7.0.4",
@@ -18905,8 +18953,7 @@
       "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,
-      "requires": {}
+      "dev": true
     },
     "postcss-selector-not": {
       "version": "5.0.0",
@@ -19080,6 +19127,7 @@
       "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"
       }
@@ -19087,7 +19135,8 @@
     "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=="
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
+      "dev": true
     },
     "regenerate": {
       "version": "1.4.2",
@@ -19306,7 +19355,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "devOptional": true
+      "dev": true
     },
     "sass": {
       "version": "1.49.0",
@@ -19362,8 +19411,7 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -19392,6 +19440,7 @@
       "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"
       }
@@ -19707,7 +19756,8 @@
     "sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
     },
     "spdy": {
       "version": "4.0.2",
@@ -19915,8 +19965,7 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -19990,6 +20039,7 @@
       "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"
       }
@@ -20058,7 +20108,8 @@
     "typescript": {
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
-      "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA=="
+      "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
+      "dev": true
     },
     "ua-parser-js": {
       "version": "0.7.31",
@@ -20267,8 +20318,7 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -20504,8 +20554,7 @@
       "version": "8.2.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
       "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "y18n": {
       "version": "5.0.8",
@@ -20515,7 +20564,8 @@
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "yaml": {
       "version": "1.10.2",
diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.css b/frontend/src/app/_elements/dataset-load/dataset-load.component.css
index 54e0738e..ff6e2750 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.css
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.css
@@ -1,11 +1,16 @@
 .btnType1 {
     background-color: #003459;
     color: white;
+    padding-top: 2vh;
+    padding-bottom: 2vh;
 }
 .btnType2 {
     background-color: white;
     color: #003459;
     border-color: #003459;
+    padding-top: 2vh;
+    padding-bottom: 2vh;
+    
 }
 .selectedDatasetClass {
     /*border-color: 2px solid #003459;*/
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 6ab58021..56a3b3c9 100644
--- a/frontend/src/app/_elements/dataset-load/dataset-load.component.html
+++ b/frontend/src/app/_elements/dataset-load/dataset-load.component.html
@@ -2,19 +2,18 @@
 
   <!--Sklonjeno ucitavanje novog dataseta i sve opcije u vezi sa tim, premesteno u add-new-dataset-->
 
-  <div class="col-12 d-flex my-5">
-    <div class="col-3">
+    <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5">
+        <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()"
+            [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}">
+            Izaberite dataset iz kolekcije
+        </button>
+        <h3 class="mt-3 mx-3">ili</h3>
+        <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()"
+            [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}">
+            Dodajte novi dataset
+        </button>
     </div>
-    <button type="button" id="btnMyDataset" class="btn" (click)="viewMyDatasetsForm()"
-        [ngClass]="{'btnType1': showMyDatasets, 'btnType2': !showMyDatasets}">
-        Izaberite dataset iz kolekcije
-    </button>
-    <h3 class="mt-3 mx-3">ili</h3>
-    <button type="button" id="btnNewDataset" class="btn" (click)="viewNewDatasetForm()"
-        [ngClass]="{'btnType1': !showMyDatasets, 'btnType2': showMyDatasets}">
-        Dodajte novi dataset
-    </button>
-  </div>
+
   <div class="px-5 my-2">
       <input *ngIf="showMyDatasets" type="text" class="form-control" placeholder="Pretraga"
           [(ngModel)]="term">
diff --git a/frontend/src/app/_elements/model-load/model-load.component.css b/frontend/src/app/_elements/model-load/model-load.component.css
index 8e9a66f6..c716f964 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.css
+++ b/frontend/src/app/_elements/model-load/model-load.component.css
@@ -1,11 +1,15 @@
 .btnType1 {
     background-color: #003459;
     color: white;
+    padding-top: 2vh;
+    padding-bottom: 2vh;
 }
 .btnType2 {
     background-color: white;
     color: #003459;
     border-color: #003459;
+    padding-top: 2vh;
+    padding-bottom: 2vh;
 }
 .selectedModelClass {
     /*border-color: 2px solid #003459;*/
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 833b7181..f40ea476 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ b/frontend/src/app/_elements/model-load/model-load.component.html
@@ -1,7 +1,5 @@
 <div>
-    <div class="col-12 d-flex my-5">
-        <div class="col-3">
-        </div>
+    <div class="d-flex flex-row justify-content-center align-items-center mt-3 mb-5">
         <button type="button" id="btnMyModel" class="btn" (click)="viewMyModelsForm()"
             [ngClass]="{'btnType1': showMyModels, 'btnType2': !showMyModels}">
             Izaberite model iz kolekcije
@@ -13,7 +11,7 @@
         </button>
     </div>
 
-    <div *ngIf="showMyModels" class="px-5 my-2">
+    <div *ngIf="showMyModels" class="px-5 my-3">
         <input *ngIf="showMyModels" type="text" class="form-control" placeholder="Pretraga" [(ngModel)]="term">
     </div>
     <div *ngIf="showMyModels" class="px-5">
@@ -51,11 +49,11 @@
                     value="{{newModel.dateCreated | date: 'dd/MM/yyyy'}}" readonly>
             </div>
         </div>
-        <h2 class="mt-5 mb-4">Parametri treniranja:</h2>
+        <h2 class="mt-5 mb-4 mx-5">Parametri treniranja modela:</h2>
         <div>
+
             <div class="row p-2">
-                <div class="col-1">
-                </div>
+                <div class="col-1"></div>
                 <div class="col-3">
                     <label for="type" class="col-form-label">Tip problema: </label>
                 </div>
@@ -69,8 +67,7 @@
                         </option>
                     </select>
                 </div>
-                <div class="col-1">
-                </div>
+                <div class="col-1"></div>
                 <div class="col-3">
                     <label for="hiddenLayers" class="col-form-label">Broj skrivenih slojeva: </label>
                 </div>
@@ -82,20 +79,6 @@
                 </div>
             </div>
 
-            <div class="row p-2">
-                <div class="col-1">
-                </div>
-                <div class="col-1">
-                </div>
-                <div class="col-3">
-                    <label for="hiddenLayerNeurons" class="col-form-label">Broj neurona skrivenih slojeva: </label>
-                </div>
-                <div class="col-1">
-                    <input type="number" min="1" class="form-control" name="hiddenLayerNeurons"
-                        [(ngModel)]="newModel.hiddenLayerNeurons" (ngModelChange)="updateGraph()">
-                </div>
-            </div>
-
             <div class="row p-2">
                 <div class="col-1">
                 </div>
@@ -114,15 +97,16 @@
                 <div class="col-1">
                 </div>
                 <div class="col-3">
-                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
+                    <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="batchSize" [(ngModel)]="newModel.batchSize">
+                    <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-1"></div>
                 <div class="col-3">
                     <label for="lossFunction" class="col-form-label">Funkcija obrade gubitka: </label>
                 </div>
@@ -137,17 +121,27 @@
                     </select>
                 </div>
                 <div class="col-1"></div>
+                <div class="col-3">
+                    <label for="batchSize" class="col-form-label">Broj uzorka po iteraciji: </label>
+                </div>
+                <div class="col-1">
+                    <input type="number" min="1" class="form-control" name="batchSize" [(ngModel)]="newModel.batchSize">
+                </div>
+            </div>
+
+            <div class="m-5">
+                <app-graph [model]="newModel" [inputCols]="1"></app-graph>
             </div>
-            <h3>Aktivacione funkcije:</h3>
 
-            <div class="row p-2 m-2" style="align-self: center;">
+            <h3 class="mx-5 mt-4">Aktivacione funkcije:</h3>
+
+            <div class="row p-2" style="align-self: center;">
+                <div class="col-1"></div>
                 <div class="col-3">
                     <label for="hiddenLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija
-                        aktivacije skrivenih
-                        slojeva:</label>
+                        style="text-align: center;">Funkcija aktivacije<br>skrivenih slojeva:</label>
                 </div>
-                <div class="col-3">
+                <div class="col-2 mt-2">
                     <div *ngFor="let item of [].constructor(newModel.hiddenLayers); let i = index">
                         <div class="input-group mb-2">
                             <div class="input-group-prepend">
@@ -164,13 +158,12 @@
                         </div>
                     </div>
                 </div>
-                <div class="col-3">
+                <div class="col-1"></div>
+                <div class="col-2">
                     <label for="outputLayerActivationFunction" class="col-form-label"
-                        style="text-align: center;">Funkcija
-                        aktivacije izlaznog
-                        sloja:</label>
+                        style="text-align: center;">Funkcija aktivacije<br>izlaznog sloja:</label>
                 </div>
-                <div class="col-3">
+                <div class="col-2 mt-2">
                     <select id=outputLayerActivationFunctionOptions class="form-control"
                         name="outputLayerActivationFunction" [(ngModel)]="newModel.outputLayerActivationFunction">
                         <option
@@ -184,25 +177,24 @@
                 </div>
             </div>
         </div>
-        <br><br>
-        <hr>
-        <div class="form-check form-check-inline overflow-auto " 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">
+            <div id="divMetricsinput" class="mt-2 mx-5">
 
                 <div *ngFor="let option of Object.keys(metrics); let optionName of Object.values(metrics) "
                     class="form-check form-check-inline">
 
                     <input name="cbmetrics" class="form-check-input" type="checkbox" value="{{option}}"
-                        id="metrics_{{option}}" style="float: left;">
+                        id="metrics_{{option}}" style="float: left;" checked>
                     <label class="form-check-label" for="metrics_{{option}}" for="inlineCheckbox2">
                         {{optionName}}
                     </label>
                 </div>
             </div>
         </div>
-        <app-graph [model]="newModel" [inputCols]="1"></app-graph>
-        <div class="form-group row mt-5 mb-3">
+        
+        <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
diff --git a/frontend/src/app/experiment/experiment.component.css b/frontend/src/app/experiment/experiment.component.css
index ee4b0448..4a3d7741 100644
--- a/frontend/src/app/experiment/experiment.component.css
+++ b/frontend/src/app/experiment/experiment.component.css
@@ -36,4 +36,8 @@
 
 ul li:hover {
     background-color: lightblue;
+}
+
+h2 {
+    color: #003459;
 }
\ No newline at end of file
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index 36cf9eda..337d7369 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -1,5 +1,5 @@
 <div id="header">
-    <h1>Napravite svoju veštačku neuronske mrežu</h1>
+    <h1>Napravite svoju veštačku neuronsku mrežu</h1>
 </div>
 <div id="wrapper">
     <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
@@ -12,277 +12,236 @@
             <a href="#" data-bs-target="#carouselExampleControls" data-bs-slide-to="2">Dodaj eksperiment</a>
         </div>
 
-        <div id="carouselExampleControls" class="carousel slide" data-bs-wrap="false" data-bs-ride="carousel" data-bs-interval="false">
+        <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">
-                <h2>1. Izvor podataka</h2>
+            <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">
-                <h2>2. Preprocesiranje</h2>
+            <div class="carousel-item mt-2">
+                <h2 class="mb-4">2. Preprocesiranje</h2>
 
-                <label for="name" class="col-form-label">Naziv eksperimenta:</label>
-                <input type="text" class="form-control mb-1" 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>
-
-                <h3 class="mt-3">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)">&nbsp;
-                                    <label class="form-check-label" for="cb_{{item.columnName}}">
-                                        {{item.columnName}}
-                                    </label>
+                <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)">&nbsp;
+                                        <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);">&nbsp;
-                                    <label class="form-check-label" for="rb_{{item.columnName}}">
-                                        {{item.columnName}}
-                                    </label>
+                            <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);">&nbsp;
+                                        <label class="form-check-label" for="rb_{{item.columnName}}">
+                                            {{item.columnName}}
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <br>
-                <h3>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}} / TODO)</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 ({{selectedDataset.nullCols}} / TODO)</label><br>
-                    <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace"
-                        class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse"
-                        data-bs-target="#fillMissingCustom:not(.show)">
-                    <label for="replace" class="form-check-label">Izabraću
-                        vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br>
-                    <div class="collapse" id="fillMissingCustom">
-                        <div>
-                            <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
-                            <div class="my-3" *ngIf="getSelectedNullColumnsArray().length > 0" >
-                                <label class="text-center form-control mx-3 text-secondary">
-                                    Kolone <span style="font-style: italic;" *ngFor="let colname of getSelectedNullColumnsArray(); let i = index">
-                                        <span *ngIf="i != getSelectedNullColumnsArray().length - 1">{{colname}}, </span> 
-                                        <span *ngIf="i == getSelectedNullColumnsArray().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}}&nbsp;<span class="small" style="color:gray;">({{column.numNulls}} null)
-                                            </span>
+                    
+                    <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}} / TODO)</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 ({{selectedDataset.nullCols}} / TODO)</label><br>
+                        <input type="radio" [(ngModel)]="experiment.nullValues" [value]="NullValueOptions.Replace"
+                            class="form-check-input" name="fillMissing" id="replace" data-bs-toggle="collapse"
+                            data-bs-target="#fillMissingCustom:not(.show)">
+                        <label for="replace" class="form-check-label">Izabraću
+                            vrednosti koje će da zamene nedostajuće vrednosti za svaku kolonu...</label><br><br>
+                        <div class="collapse" id="fillMissingCustom">
+                            <div>
+                                <label for="columnReplacers" class="form-label">Unesite zamenu za svaku kolonu:</label>
+                                <div class="my-3" *ngIf="getSelectedNullColumnsArray().length > 0" >
+                                    <label class="text-center form-control mx-3 text-secondary">
+                                        Kolone <span style="font-style: italic;" *ngFor="let colname of getSelectedNullColumnsArray(); let i = index">
+                                            <span *ngIf="i != getSelectedNullColumnsArray().length - 1">{{colname}}, </span> 
+                                            <span *ngIf="i == getSelectedNullColumnsArray().length - 1">{{colname}} </span> 
                                         </span>
-
-                                        <label *ngIf="column.numNulls <= 0"
-                                            class="text-center form-control mx-3 text-secondary">
-                                            Ova kolona nema
-                                            nedostajućih
-                                            vrednosti.
-                                        </label>
-
-                                        <div *ngIf="column.numNulls > 0" class="d-flex flex-row justify-content-end">
-                                            <div class="flex-grow-3 mx-3 me-auto">
-                                                <div class="input-group">
-                                                    <div class="input-group-prepend">
-                                                        <label [for]="'fillCol_'+column.columnName" class="form-control">
-                                                            Zameni
-                                                            <input type="radio" [id]="'fillCol_'+column.columnName"
-                                                                [name]="'delOp_'+column.columnName">
-                                                        </label>
-                                                    </div>
-                                                    <input type="text" class="form-control" [id]="'fillText_'+column.columnName"
-                                                        (keyup)="checkFillColRadio(column.columnName)"
-                                                        placeholder="Unesi vrednost...">
-
-                                                    <div class="input-group-append">
-                                                        <select [id]="'replaceOptions'+i" class="form-control btn-primary"
-                                                            *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);">
-                                                            <option
-                                                                *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
-                                                                [value]="option">
-                                                                {{ optionName }}
-                                                            </option>
-                                                        </select>
-                                                        <select [id]="'replaceOptions'+i"
-                                                            class="form-control btn-outline-primary"
-                                                            *ngIf="!column.isNumber && column.numNulls > 0"
-                                                            (change)="replace($event, column); checkFillColRadio(column.columnName);">
-                                                            <option *ngFor="let option of column.uniqueValues" [value]="option">
-                                                                {{ option }}
-                                                            </option>
-                                                        </select>
+                                        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}}&nbsp;<span class="small" style="color:gray;">({{column.numNulls}} null)
+                                                </span>
+                                            </span>
+    
+                                            <label *ngIf="column.numNulls <= 0"
+                                                class="text-center form-control mx-3 text-secondary">
+                                                Ova kolona nema
+                                                nedostajućih
+                                                vrednosti.
+                                            </label>
+    
+                                            <div *ngIf="column.numNulls > 0" class="d-flex flex-row justify-content-end">
+                                                <div class="flex-grow-3 mx-3 me-auto">
+                                                    <div class="input-group">
+                                                        <div class="input-group-prepend">
+                                                            <label [for]="'fillCol_'+column.columnName" class="form-control">
+                                                                Zameni
+                                                                <input type="radio" [id]="'fillCol_'+column.columnName"
+                                                                    [name]="'delOp_'+column.columnName">
+                                                            </label>
+                                                        </div>
+                                                        <input type="text" class="form-control" [id]="'fillText_'+column.columnName"
+                                                            (keyup)="checkFillColRadio(column.columnName)"
+                                                            placeholder="Unesi vrednost...">
+    
+                                                        <div class="input-group-append">
+                                                            <select [id]="'replaceOptions'+i" class="form-control btn-primary"
+                                                                *ngIf="column.isNumber" (change)="replace($event, column); checkFillColRadio(column.columnName);">
+                                                                <option
+                                                                    *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
+                                                                    [value]="option">
+                                                                    {{ optionName }}
+                                                                </option>
+                                                            </select>
+                                                            <select [id]="'replaceOptions'+i"
+                                                                class="form-control btn-outline-primary"
+                                                                *ngIf="!column.isNumber && column.numNulls > 0"
+                                                                (change)="replace($event, column); checkFillColRadio(column.columnName);">
+                                                                <option *ngFor="let option of column.uniqueValues" [value]="option">
+                                                                    {{ option }}
+                                                                </option>
+                                                            </select>
+                                                        </div>
                                                     </div>
                                                 </div>
-                                            </div>
-
-                                            <div class="flex-shrink-1 mx-3">
-                                                <div class="input-group">
-                                                    <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši
-                                                        kolonu
-                                                        <input type="radio" [id]="'delCol_'+column.columnName"
-                                                            [name]="'delOp_'+column.columnName"
-                                                            (change)="emptyFillTextInput(column.columnName)"></label>
+    
+                                                <div class="flex-shrink-1 mx-3">
+                                                    <div class="input-group">
+                                                        <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši
+                                                            kolonu
+                                                            <input type="radio" [id]="'delCol_'+column.columnName"
+                                                                [name]="'delOp_'+column.columnName"
+                                                                (change)="emptyFillTextInput(column.columnName)"></label>
+                                                    </div>
                                                 </div>
-                                            </div>
-
-                                            <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 class="flex-shrink-1 mx-3">
+                                                    <div class="input-group">
+                                                        <label class="form-control" [for]="'delRows_'+column.columnName">Izbriši
+                                                            redove
+                                                            <input type="radio" [id]="'delRows_'+column.columnName"
+                                                                [name]="'delOp_'+column.columnName" checked
+                                                                (change)="emptyFillTextInput(column.columnName)"></label>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
-                                <!--
-                                        <div *ngFor="let column of selectedDataset.columnInfo; let i = index" class="my-3">
-                                            <div class="input-group row" *ngIf="getInputById('rb_'+column.columnName).checked">
-                                                <span class="input-group-text col-2 text-center">
-                                                    {{column.columnName}}&nbsp;<span class="small" style="color:gray;">(br
-                                                        null)</span>
-                                                </span>
-                                                <label *ngIf="true" class="form-control">Ova
-                                                    kolona nema nedostajućih vrednosti.</label>
-                
-                                                <input *ngIf="true" type="radio" [id]="'fillCol_'+column.columnName" class="col-1 mt-2"
-                                                    [name]="'delOp_'+column.columnName">
-                                                <select [id]="'replaceOptions'+i" class="form-control col-2" *ngIf="column.isNumber"
-                                                    (change)="replace($event, column);">
-                                                    <option
-                                                        *ngFor="let option of Object.keys(ReplaceWith); let optionName of Object.values(ReplaceWith)"
-                                                        [value]="option">
-                                                        {{ optionName }}
-                                                    </option>
-                                                </select>
-                                                <select [id]="'replaceOptions'+i"
-                                                    class="form-control btn-outline-primary"
-                                                    *ngIf="!column.isNumber && column.numNulls > 0"
-                                                    (change)="replace($event, column); checkFillColRadio(column.columnName);">
-                                                    <option *ngFor="let option of column.uniqueValues" [value]="option">
-                                                        {{ option }}
-                                                    </option>
-                                                </select>
-                                                <input *ngIf="true" type="text" class="form-control col-1"
-                                                    [id]="'fillText_'+column.columnName" (keyup)="checkFillColRadio(column.columnName)"
-                                                    placeholder="Unesi vrednost...">
-                
-                                                <label *ngIf="true" class="form-control col-2" [for]="'delCol_'+column.columnName"
-                                                    .name>Izbriši
-                                                    kolonu
-                                                    <input type="radio" [id]="'delCol_'+column.columnName"
-                                                        [name]="'delOp_'+column.columnName"
-                                                        (change)="emptyFillTextInput(column.columnName)"></label>
-                                                <label *ngIf="true" class="form-control col-2"
-                                                    [for]="'delRows_'+column.columnName">Izbriši
-                                                    redove
-                                                    <input type="radio" [id]="'delRows_'+column.columnName"
-                                                        [name]="'delOp_'+column.columnName"
-                                                        (change)="emptyFillTextInput(column.columnName)" checked></label>
-                                            </div>
-                                        </div>
-                                        -->
                             </div>
                         </div>
                     </div>
-                </div>
-
-                <div id="randomOptions">
-                    <div class="col-3 mt-2">
-                        <label for="type" class="form-check-label">Nasumičan redosled podataka?</label>
-                        <input class="mx-3 form-check-input" type="checkbox" [(ngModel)]="experiment.randomOrder"
+    
+                    <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:&nbsp;&nbsp;
-                                        <input id="splitYesNo" class="form-check-input" type="checkbox"
-                                            [checked]="experiment.randomTestSet"
-                                            (change)="experiment.randomTestSet = !experiment.randomTestSet">
-                                    </h3>
-                                </label>
-                            </div>
-                            <div class="col-8">
-                                trening
-                                <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10"
-                                    name="randomTestSetDistribution" thumbLabel [disabled]="!experiment.randomTestSet"
-                                    [(ngModel)]="tempTestSetDistribution">
-                                </mat-slider>
-                                test
-                            </div>
                         </div>
-        
-                        <div class="row p-2 mx-2">
-                            <div class="col-4">
+                        <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:&nbsp;&nbsp;
+                                            <input id="splitYesNo" class="form-check-input" type="checkbox"
+                                                [checked]="experiment.randomTestSet"
+                                                (change)="experiment.randomTestSet = !experiment.randomTestSet">
+                                        </h3>
+                                    </label>
+                                </div>
+                                <div class="col-8">
+                                    trening
+                                    <mat-slider style="width: 85%;" min="10" max="90" step="10" value="10"
+                                        name="randomTestSetDistribution" thumbLabel [disabled]="!experiment.randomTestSet"
+                                        [(ngModel)]="tempTestSetDistribution">
+                                    </mat-slider>
+                                    test
+                                </div>
+                            </div>
+            
+                            <div class="row p-2 m-2">
                                 <label for="percentage" class="form-label">Procenat podataka koji se uzima za trening
                                     skup:</label>
-                            </div>
-                            <div class="col-2">
-                                <input id="percentage" type="number" class="form-control" min="10" max="90" step="10" value="90"
+                                <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">
-                    <div class="col-3">
-                        <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="encodingForColumns" class="my-5">
+                        <div class="col-3">
+                            <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>
                     </div>
+    
                 </div>
 
 
             </div>
 
-            <div class="carousel-item">
-                <div class="form-group row mt-5 mb-3">
+            <div class="carousel-item mt-2">
+                <h2 class="mb-4">3. Dodaj eskperiment</h2>
+
+                <div class="row">
                     <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-8">
+                        <label for="name" class="col-form-label">Naziv eksperimenta:</label>
+                        <input type="text" class="form-control mb-3" name="name" placeholder="Naziv..." [(ngModel)]="experiment.name">
+        
+                        <label for="desc" class="col-sm-2 col-form-label">Opis:</label>
+                        <div>
+                            <textarea class="form-control" name="desc" rows="3" [(ngModel)]="experiment.description"></textarea>
+                        </div>
+                        <div class="form-group row mt-5 mb-3">
+                            <div class="col"></div>
+                            <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="saveExperiment();">Sačuvaj
+                                eksperiment</button>
+                            <div class="col"></div>
+                        </div>
+                    </div>
                     <div class="col"></div>
                 </div>
             </div>
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 8a1b7d70..a2b5602b 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -24,7 +24,6 @@ export class ExperimentComponent implements OnInit {
   Object = Object;
 
   selectedColumnsInfoArray: ColumnInfo[] = [];
-  //selectedOutputColumnVal: string = '';
   selectedNullColumnsArray: string[] = [];
 
   tempTestSetDistribution = 90;
@@ -35,11 +34,9 @@ export class ExperimentComponent implements OnInit {
   }
 
   updateDataset(dataset: Dataset) {
-    //console.log(dataset);
     this.selectedDataset = dataset;
     this.selectedColumnsInfoArray = this.selectedDataset.columnInfo;
     this.selectedNullColumnsArray = [];
-    //console.log("array:", this.selectedColumnsInfoArray);
   }
 
   getInputById(id: string): HTMLInputElement {
@@ -151,7 +148,6 @@ export class ExperimentComponent implements OnInit {
         }
       }
     }
-    //console.log(array);
     return array;
   }
 
@@ -177,8 +173,6 @@ export class ExperimentComponent implements OnInit {
     for (let i = 0; i < pom.length; i++)
       this.experiment.inputColumns.push(pom[i].columnName);
 
-    //this.experiment.outputColumn = this.selectedOutputColumnVal;
-
     this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.numNulls > 0); //obavezno
     this.experiment.nullValuesReplacers = this.getNullValuesReplacersArray();
 
diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html
index 2e574c12..0ce4cc89 100644
--- a/frontend/src/app/training/training.component.html
+++ b/frontend/src/app/training/training.component.html
@@ -1,38 +1,46 @@
 <div id="header">
-    <h1>Trenirajte veštačku neuronske mrežu</h1>
+    <h1>Trenirajte veštačku neuronsku mrežu</h1>
 </div>
-<div id="wrapper">
-    <div id="container" class="container p-5" style="background-color: white; min-height: 100%;">
+<div id="wrapper" class="mb-4">
+    <div id="container" class="container p-5 row" style="background-color: white; min-height: 100%;">
+        <div class="col"></div>
 
-<h2>1. Izaberite eksperiment iz kolekcije</h2>
-<div class="px-5 my-2">
-    <input type="text" class="form-control" placeholder="Pretraga"
-        [(ngModel)]="term">
-</div>
-<div class="overflow-auto" 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>2.Izaberite model</h2>
-<app-model-load (selectedModelChangeEvent)="selectModel($event)"></app-model-load>
+            <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>3. Trenirajte model</h2>
-<button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
-    model</button>
+            <div class="d-flex flex-row justify-content-center align-items-center my-3">
+                <button class="btn btn-lg col-4" style="background-color:#003459; color:white;" (click)="trainModel();">Treniraj
+                    model</button>
+            </div>
+    
+            <h2 class="mt-5">Rezultati treniranja</h2>
+            <div class="m-3" *ngIf="trainingResult">
+                <h2 class="my-2">Rezultati treniranja:</h2>
+                <p>
+                    {{trainingResult}}
+                </p>
+            </div>
+        </div>
 
-<h2>Rezultati treniranja</h2>
-<div class="m-3" *ngIf="trainingResult">
-    <h2 class="my-2">Rezultati treniranja:</h2>
-    <p>
-        {{trainingResult}}
-    </p>
-</div>
-
-</div>
+        <div class="col"></div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts
index 4f20bc87..027d2c22 100644
--- a/frontend/src/app/training/training.component.ts
+++ b/frontend/src/app/training/training.component.ts
@@ -24,7 +24,6 @@ export class TrainingComponent{
   constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private experimentsService: ExperimentsService) { 
     this.experimentsService.getMyExperiments().subscribe((experiments) => {
       this.myExperiments = experiments;
-      console.log(this.myExperiments);
     });
   }
 
@@ -48,7 +47,8 @@ export class TrainingComponent{
       return;
     }
     this.modelsService.trainModel(this.selectedModel._id, this.selectedExperiment._id).subscribe((response: any) => {
-      console.log('Train model complete!', response);
+      //console.log('Train model complete!', response);
+      Shared.openDialog("Obaveštenje", "Treniranje modela je uspešno završeno!");
       this.trainingResult = response;
     });
   }
-- 
cgit v1.2.3