From 681f851a6b3663285f32bc380b48a8e80c6e7ade Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Tue, 12 Apr 2022 20:52:09 +0200
Subject: "Napravi eskperiment" stranica podesena da radi. Biranje/dodavanje
 dataseta -> preprocesiranje -> cuvanje eskperimenta

---
 frontend/package-lock.json                         | 167 +++++++++++++--------
 frontend/src/app/_data/Experiment.ts               |  37 ++++-
 frontend/src/app/_data/Model.ts                    |  31 +---
 .../_elements/model-load/model-load.component.html |  49 ------
 .../_elements/model-load/model-load.component.ts   |   5 +-
 .../src/app/experiment/experiment.component.html   | 127 +++++++++++++---
 .../src/app/experiment/experiment.component.ts     |  18 ++-
 7 files changed, 260 insertions(+), 174 deletions(-)

(limited to 'frontend')

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c79f4ea9..21efd709 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"
       }
@@ -3322,6 +3333,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"
@@ -3595,6 +3607,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"
       }
@@ -3691,6 +3704,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"
       },
@@ -3868,6 +3882,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -4886,6 +4901,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"
       }
@@ -5834,6 +5850,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"
       },
@@ -6002,6 +6019,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": [
@@ -6111,6 +6129,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"
       },
@@ -6703,6 +6722,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"
       },
@@ -6756,6 +6776,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"
       }
@@ -6772,6 +6793,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"
       },
@@ -6798,6 +6820,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"
       }
@@ -7663,6 +7686,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"
       },
@@ -7674,6 +7698,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"
       }
@@ -8296,6 +8321,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"
       }
@@ -8983,6 +9009,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"
       },
@@ -9788,6 +9815,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"
       },
@@ -9798,7 +9826,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",
@@ -10219,6 +10248,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"
       },
@@ -10603,7 +10633,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",
@@ -11004,6 +11035,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"
       },
@@ -11069,6 +11101,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"
@@ -11685,7 +11718,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",
@@ -12020,6 +12054,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",
@@ -12037,6 +12072,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"
           }
@@ -12045,6 +12081,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",
@@ -12066,7 +12103,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
             }
           }
         },
@@ -12074,6 +12112,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",
@@ -12083,7 +12122,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
         }
       }
     },
@@ -12228,6 +12268,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",
@@ -12249,12 +12290,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
         }
       }
     },
@@ -12262,6 +12305,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",
@@ -12271,7 +12315,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
         }
       }
     },
@@ -13429,8 +13474,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",
@@ -14022,8 +14066,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",
@@ -14146,6 +14189,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"
@@ -14343,7 +14387,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",
@@ -14414,8 +14459,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",
@@ -14430,6 +14474,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"
       }
@@ -14558,6 +14603,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",
@@ -14585,8 +14631,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",
@@ -15064,8 +15109,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",
@@ -15331,7 +15375,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",
@@ -15979,6 +16024,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"
       }
@@ -16101,6 +16147,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": {
@@ -16176,6 +16223,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"
       }
@@ -16432,8 +16480,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",
@@ -16630,6 +16677,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"
       }
@@ -16661,7 +16709,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",
@@ -16672,6 +16721,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"
       }
@@ -16691,7 +16741,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",
@@ -17115,8 +17166,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",
@@ -17338,6 +17388,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"
       }
@@ -17346,6 +17397,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"
       }
@@ -17813,7 +17865,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",
@@ -18338,7 +18391,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",
@@ -18454,8 +18508,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",
@@ -18525,15 +18578,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",
@@ -18559,8 +18610,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",
@@ -18587,22 +18637,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",
@@ -18646,15 +18693,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",
@@ -18719,8 +18764,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",
@@ -18885,6 +18929,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"
       }
@@ -18892,7 +18937,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",
@@ -19168,8 +19214,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",
@@ -19198,6 +19243,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"
       }
@@ -19513,7 +19559,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",
@@ -19721,8 +19768,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",
@@ -19796,6 +19842,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"
       }
@@ -19842,7 +19889,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",
@@ -20037,8 +20085,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",
@@ -20265,8 +20312,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",
@@ -20276,7 +20322,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/_data/Experiment.ts b/frontend/src/app/_data/Experiment.ts
index a5aad218..453f6ca0 100644
--- a/frontend/src/app/_data/Experiment.ts
+++ b/frontend/src/app/_data/Experiment.ts
@@ -2,7 +2,7 @@ export default class Experiment {
     _id: string = '';
     uploaderId: string = '';
     constructor(
-        public name: string = 'Novi experiment',
+        public name: string = 'Novi eksperiment',
         public description: string = '',
         public datasetId: string = '',
         public inputColumns: string[] = [],
@@ -10,7 +10,16 @@ export default class Experiment {
         public nullValues: NullValueOptions = NullValueOptions.DeleteRows,
         public nullValuesReplacers: NullValReplacer[] = [],
         public dateCreated: Date = new Date(),
-        public lastUpdated: Date = new Date()
+        public lastUpdated: Date = new Date(),
+        public modelIds: string[] = [],
+
+        // Test set settings
+        public randomOrder: boolean = true,
+        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
     ) { }
 }
 
@@ -32,4 +41,28 @@ export class NullValReplacer {
     "column": string;
     "option": NullValueOptions;
     "value": string;
+}
+
+export enum Encoding {
+    Label = 'label',
+    OneHot = 'onehot',
+    Ordinal = 'ordinal',
+    Hashing = 'hashing',
+    Binary = 'binary',
+    BaseN = 'baseN'
+    /*
+    BackwardDifference = 'backward difference',
+    CatBoost = 'cat boost',
+    Count = 'count',
+    GLMM = 'glmm',
+    Target = 'target',
+    Helmert = 'helmert',
+    JamesStein = 'james stein',
+    LeaveOneOut = 'leave one out',
+    MEstimate = 'MEstimate',
+    Sum = 'sum',
+    Polynomial = 'polynomial',
+    WOE = 'woe',
+    Quantile = 'quantile'
+    */
 }
\ No newline at end of file
diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts
index 9ea437b1..8a85e296 100644
--- a/frontend/src/app/_data/Model.ts
+++ b/frontend/src/app/_data/Model.ts
@@ -7,16 +7,10 @@ export default class Model {
         public description: string = '',
         public dateCreated: Date = new Date(),
         public lastUpdated: Date = new Date(),
-        public experimentId: string = '',
-
-        // Test set settings
-        public randomOrder: boolean = true,
-        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
+        //public experimentId: string = '',
 
         // Neural net training settings
         public type: ProblemType = ProblemType.Regression,
-        public encoding: Encoding = Encoding.Label,
         public optimizer: Optimizer = Optimizer.Adam,
         public lossFunction: LossFunction = LossFunction.MeanSquaredError,
         public inputNeurons: number = 1,
@@ -39,29 +33,6 @@ export enum ProblemType {
 
 // replaceMissing srednja vrednost mean, median, najcesca vrednost (mode)
 // removeOutliers
-export enum Encoding {
-    Label = 'label',
-    OneHot = 'onehot',
-    Ordinal = 'ordinal',
-    Hashing = 'hashing',
-    Binary = 'binary',
-    BaseN = 'baseN'
-    /*
-    BackwardDifference = 'backward difference',
-    CatBoost = 'cat boost',
-    Count = 'count',
-    GLMM = 'glmm',
-    Target = 'target',
-    Helmert = 'helmert',
-    JamesStein = 'james stein',
-    LeaveOneOut = 'leave one out',
-    MEstimate = 'MEstimate',
-    Sum = 'sum',
-    Polynomial = 'polynomial',
-    WOE = 'woe',
-    Quantile = 'quantile'
-    */
-}
 
 export enum ActivationFunction {
     // linear
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 0923c895..833b7181 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ b/frontend/src/app/_elements/model-load/model-load.component.html
@@ -85,18 +85,6 @@
             <div class="row p-2">
                 <div class="col-1">
                 </div>
-                <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)]="newModel.encoding">
-                        <option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
-                            [value]="option">
-                            {{ optionName }}
-                        </option>
-                    </select>
-                </div>
-
                 <div class="col-1">
                 </div>
                 <div class="col-3">
@@ -149,43 +137,6 @@
                     </select>
                 </div>
                 <div class="col-1"></div>
-                <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)]="newModel.randomOrder"
-                        type="checkbox" value="" checked>
-                </div>
-            </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]="newModel.randomTestSet"
-                                    (change)="newModel.randomTestSet = !newModel.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]="!newModel.randomTestSet"
-                            [(ngModel)]="tempTestSetDistribution">
-                        </mat-slider>
-                        test
-                    </div>
-                </div>
-
-                <div class="row p-2 mx-2">
-                    <div class="col-4">
-                        <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"
-                            [(ngModel)]="tempTestSetDistribution" [disabled]="!newModel.randomTestSet">
-                    </div>
-                </div>
             </div>
             <h3>Aktivacione funkcije:</h3>
 
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 ca6b8ea5..abf19d75 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ b/frontend/src/app/_elements/model-load/model-load.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, ViewChild, Output, EventEmitter } from '@angular/core';
 import Shared from 'src/app/Shared';
-import Model, { ActivationFunction, Encoding, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
+import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
 import { ModelsService } from 'src/app/_services/models.service';
 import { GraphComponent } from '../graph/graph.component';
 
@@ -20,7 +20,6 @@ export class ModelLoadComponent implements OnInit {
   selectedModel?: Model;
 
   ProblemType = ProblemType;
-  Encoding = Encoding;
   ActivationFunction = ActivationFunction;
   metrics: any = Metrics;
   LossFunction = LossFunction;
@@ -32,7 +31,6 @@ export class ModelLoadComponent implements OnInit {
   term: string = "";
   selectedProblemType: string = '';
   selectedMetrics = [];
-  tempTestSetDistribution = 90;
   lossFunction: any = LossFunction;
 
   showMyModels: boolean = true;
@@ -64,7 +62,6 @@ export class ModelLoadComponent implements OnInit {
   uploadModel() {   //console.log(this.selectedModel);
     this.getMetrics();
 
-    this.newModel.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
     this.newModel.username = Shared.username;
 
     this.modelsService.addModel(this.newModel).subscribe((response) => {
diff --git a/frontend/src/app/experiment/experiment.component.html b/frontend/src/app/experiment/experiment.component.html
index 42797579..6020cab5 100644
--- a/frontend/src/app/experiment/experiment.component.html
+++ b/frontend/src/app/experiment/experiment.component.html
@@ -21,7 +21,16 @@
 
             <div class="carousel-item">
                 <h2>2. Preprocesiranje</h2>
-                <h3>Biranje ulaznih i izlaznih kolona:</h3>
+
+                <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">
@@ -31,8 +40,9 @@
                                 <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]="this.selectedOutputColumnVal != item.columnName"
-                                        [disabled]="this.selectedOutputColumnVal == item.columnName">&nbsp;
+                                        [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>
@@ -44,8 +54,11 @@
                             <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" (change)="this.selectedOutputColumnVal = item.columnName">&nbsp;
+                                    <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>
@@ -54,11 +67,12 @@
                         </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">
+                        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"
@@ -66,29 +80,38 @@
                         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)">
+                    <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 selectedDataset.columnInfo; let i = index" class="my-3">
-                                    <div *ngIf="getInputById('cb_'+column.columnName).checked || selectedOutputColumnVal == column.columnName"
-                                        class="">
+                                <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)
+                                            {{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">
+
+                                        <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">
@@ -100,20 +123,22 @@
                                                         </label>
                                                     </div>
                                                     <input type="text" class="form-control" [id]="'fillText_'+column.columnName"
-                                                        (keyup)="checkFillColRadio(column.columnName)" placeholder="Unesi vrednost...">
-                
+                                                        (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);">
+                                                            *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"
+                                                        <select [id]="'replaceOptions'+i"
+                                                            class="form-control btn-outline-primary"
                                                             *ngIf="!column.isNumber && column.numNulls > 0"
-                                                            (change)="replace($event, column);">
+                                                            (change)="replace($event, column); checkFillColRadio(column.columnName);">
                                                             <option *ngFor="let option of column.uniqueValues" [value]="option">
                                                                 {{ option }}
                                                             </option>
@@ -121,7 +146,7 @@
                                                     </div>
                                                 </div>
                                             </div>
-                
+
                                             <div class="flex-shrink-1 mx-3">
                                                 <div class="input-group">
                                                     <label class="form-control" [for]="'delCol_'+column.columnName">Izbriši
@@ -131,7 +156,7 @@
                                                             (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
@@ -196,6 +221,60 @@
                     </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"
+                            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">
+                                <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"
+                                    [(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>
+                </div>
+
 
             </div>
 
diff --git a/frontend/src/app/experiment/experiment.component.ts b/frontend/src/app/experiment/experiment.component.ts
index 7ccca528..74ee9ee7 100644
--- a/frontend/src/app/experiment/experiment.component.ts
+++ b/frontend/src/app/experiment/experiment.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith } from '../_data/Experiment';
+import Experiment, { NullValReplacer, NullValueOptions, ReplaceWith, Encoding } from '../_data/Experiment';
 import Model from '../_data/Model';
 import Dataset, { ColumnInfo } from '../_data/Dataset';
 import { ModelsService } from '../_services/models.service';
@@ -20,12 +20,15 @@ export class ExperimentComponent implements OnInit {
 
   NullValueOptions = NullValueOptions;
   ReplaceWith = ReplaceWith;
+  Encoding = Encoding;
   Object = Object;
 
   selectedColumnsInfoArray: ColumnInfo[] = [];
-  selectedOutputColumnVal: string = '';
+  //selectedOutputColumnVal: string = '';
   selectedNullColumnsArray: string[] = [];
 
+  tempTestSetDistribution = 90;
+
   constructor(private modelsService: ModelsService, private experimentsService: ExperimentsService) { }
 
   ngOnInit(): void {
@@ -179,10 +182,13 @@ export class ExperimentComponent implements OnInit {
     for (let i = 0; i < pom.length; i++)
       this.experiment.inputColumns.push(pom[i].columnName);
 
-    this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.numNulls > 0);
-    //TREBAJU MI NULLVALUESREPLACERI  
+    //this.experiment.outputColumn = this.selectedOutputColumnVal;
+
+    this.selectedColumnsInfoArray = this.selectedColumnsInfoArray.filter(x => x.numNulls > 0); //obavezno
     this.experiment.nullValuesReplacers = this.getNullValuesReplacersArray();
 
+    this.experiment.randomTestSetDistribution = 1 - Math.round(this.tempTestSetDistribution / 100 * 10) / 10;
+
     console.log("Eksperiment:", this.experiment);
     
     this.experimentsService.addExperiment(this.experiment).subscribe((response) => {
@@ -193,7 +199,9 @@ export class ExperimentComponent implements OnInit {
 
       Shared.openDialog("Obaveštenje", "Eksperiment je uspešno kreiran.");
     }, (error) => {
-
+      if (error.error == "Experiment with this name exists") {
+        Shared.openDialog("Greška", "Eksperiment sa unetim nazivom već postoji u Vašoj kolekciji. Unesite neki drugi naziv.");
+      }
     });
   }
 
-- 
cgit v1.2.3