Merge branch 'redesign' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into redesign

8 files changed, 170 insertions, 93 deletions

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ebe30390..9da54c53 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -435,6 +435,7 @@
     },
     "node_modules/@angular/compiler-cli": {
       "version": "13.2.5",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/core": "^7.17.2",
@@ -463,6 +464,7 @@
     },
     "node_modules/@angular/compiler-cli/node_modules/@ampproject/remapping": {
       "version": "2.1.2",
+      "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.0"
@@ -473,6 +475,7 @@
     },
     "node_modules/@angular/compiler-cli/node_modules/@babel/core": {
       "version": "7.17.5",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
@@ -501,6 +504,7 @@
     },
     "node_modules/@angular/compiler-cli/node_modules/@babel/core/node_modules/semver": {
       "version": "6.3.0",
+      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -508,6 +512,7 @@
     },
     "node_modules/@angular/compiler-cli/node_modules/@babel/generator": {
       "version": "7.17.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.17.0",
@@ -520,6 +525,7 @@
     },
     "node_modules/@angular/compiler-cli/node_modules/source-map": {
       "version": "0.5.7",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -742,6 +748,7 @@
     },
     "node_modules/@babel/core": {
       "version": "7.16.12",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
@@ -770,6 +777,7 @@
     },
     "node_modules/@babel/core/node_modules/semver": {
       "version": "6.3.0",
+      "dev": true,
       "license": "ISC",
       "bin": {
         "semver": "bin/semver.js"
@@ -777,6 +785,7 @@
     },
     "node_modules/@babel/core/node_modules/source-map": {
       "version": "0.5.7",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -784,6 +793,7 @@
     },
     "node_modules/@babel/generator": {
       "version": "7.16.8",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.16.8",
@@ -796,6 +806,7 @@
     },
     "node_modules/@babel/generator/node_modules/source-map": {
       "version": "0.5.7",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -3243,6 +3254,7 @@
     },
     "node_modules/anymatch": {
       "version": "3.1.2",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -3493,6 +3505,7 @@
     },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -3580,6 +3593,7 @@
     },
     "node_modules/braces": {
       "version": "3.0.2",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.0.1"
@@ -3757,6 +3771,7 @@
     },
     "node_modules/chokidar": {
       "version": "3.5.3",
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -4699,6 +4714,7 @@
     },
     "node_modules/dependency-graph": {
       "version": "0.11.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.6.0"
@@ -4845,6 +4861,7 @@
     },
     "node_modules/encoding": {
       "version": "0.1.13",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -4853,6 +4870,7 @@
     },
     "node_modules/encoding/node_modules/iconv-lite": {
       "version": "0.6.3",
+      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -5328,6 +5346,7 @@
     },
     "node_modules/fill-range": {
       "version": "7.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -5576,6 +5595,7 @@
     },
     "node_modules/glob-parent": {
       "version": "5.1.2",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "is-glob": "^4.0.1"
@@ -6113,6 +6133,7 @@
     },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "binary-extensions": "^2.0.0"
@@ -6162,6 +6183,7 @@
     },
     "node_modules/is-extglob": {
       "version": "2.1.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -6176,6 +6198,7 @@
     },
     "node_modules/is-glob": {
       "version": "4.0.3",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -6199,6 +6222,7 @@
     },
     "node_modules/is-number": {
       "version": "7.0.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -6987,6 +7011,7 @@
     },
     "node_modules/lru-cache": {
       "version": "6.0.0",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "yallist": "^4.0.0"
@@ -6997,6 +7022,7 @@
     },
     "node_modules/magic-string": {
       "version": "0.25.7",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "sourcemap-codec": "^1.4.4"
@@ -7539,6 +7565,7 @@
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -8175,6 +8202,7 @@
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -8925,6 +8953,7 @@
     },
     "node_modules/readdirp": {
       "version": "3.6.0",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -9199,7 +9228,7 @@
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
-      "devOptional": true,
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/sass": {
@@ -9319,6 +9348,7 @@
     },
     "node_modules/semver": {
       "version": "7.3.5",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -9668,6 +9698,7 @@
     },
     "node_modules/sourcemap-codec": {
       "version": "1.4.8",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/spdy": {
@@ -10046,6 +10077,7 @@
     },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -10127,6 +10159,7 @@
     },
     "node_modules/typescript": {
       "version": "4.5.5",
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -10748,6 +10781,7 @@
     },
     "node_modules/yallist": {
       "version": "4.0.0",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/yaml": {
@@ -11033,6 +11067,7 @@
     },
     "@angular/compiler-cli": {
       "version": "13.2.5",
+      "dev": true,
       "requires": {
         "@babel/core": "^7.17.2",
         "chokidar": "^3.0.0",
@@ -11048,12 +11083,14 @@
       "dependencies": {
         "@ampproject/remapping": {
           "version": "2.1.2",
+          "dev": true,
           "requires": {
             "@jridgewell/trace-mapping": "^0.3.0"
           }
         },
         "@babel/core": {
           "version": "7.17.5",
+          "dev": true,
           "requires": {
             "@ampproject/remapping": "^2.1.0",
             "@babel/code-frame": "^7.16.7",
@@ -11073,12 +11110,14 @@
           },
           "dependencies": {
             "semver": {
-              "version": "6.3.0"
+              "version": "6.3.0",
+              "dev": true
             }
           }
         },
         "@babel/generator": {
           "version": "7.17.3",
+          "dev": true,
           "requires": {
             "@babel/types": "^7.17.0",
             "jsesc": "^2.5.1",
@@ -11086,7 +11125,8 @@
           }
         },
         "source-map": {
-          "version": "0.5.7"
+          "version": "0.5.7",
+          "dev": true
         }
       }
     },
@@ -11197,6 +11237,7 @@
     },
     "@babel/core": {
       "version": "7.16.12",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -11216,15 +11257,18 @@
       },
       "dependencies": {
         "semver": {
-          "version": "6.3.0"
+          "version": "6.3.0",
+          "dev": true
         },
         "source-map": {
-          "version": "0.5.7"
+          "version": "0.5.7",
+          "dev": true
         }
       }
     },
     "@babel/generator": {
       "version": "7.16.8",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
@@ -11232,7 +11276,8 @@
       },
       "dependencies": {
         "source-map": {
-          "version": "0.5.7"
+          "version": "0.5.7",
+          "dev": true
         }
       }
     },
@@ -12165,8 +12210,7 @@
       },
       "dependencies": {
         "ws": {
-          "version": "7.5.7",
-          "requires": {}
+          "version": "7.5.7"
         }
       }
     },
@@ -12178,8 +12222,7 @@
     },
     "@ngtools/webpack": {
       "version": "13.2.5",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -12731,8 +12774,7 @@
     },
     "acorn-import-assertions": {
       "version": "1.8.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "adjust-sourcemap-loader": {
       "version": "4.0.0",
@@ -12830,6 +12872,7 @@
     },
     "anymatch": {
       "version": "3.1.2",
+      "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -12981,7 +13024,8 @@
       "dev": true
     },
     "binary-extensions": {
-      "version": "2.2.0"
+      "version": "2.2.0",
+      "dev": true
     },
     "bl": {
       "version": "4.1.0",
@@ -13038,8 +13082,7 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "5.1.3",
-      "requires": {}
+      "version": "5.1.3"
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -13050,6 +13093,7 @@
     },
     "braces": {
       "version": "3.0.2",
+      "dev": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -13158,6 +13202,7 @@
     },
     "chokidar": {
       "version": "3.5.3",
+      "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -13179,8 +13224,7 @@
     },
     "circular-dependency-plugin": {
       "version": "5.2.2",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "clean-stack": {
       "version": "2.2.0",
@@ -13551,8 +13595,7 @@
     },
     "css-prefers-color-scheme": {
       "version": "6.0.3",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "css-select": {
       "version": "4.2.1",
@@ -13752,7 +13795,8 @@
       "dev": true
     },
     "dependency-graph": {
-      "version": "0.11.0"
+      "version": "0.11.0",
+      "dev": true
     },
     "destroy": {
       "version": "1.0.4",
@@ -13851,6 +13895,7 @@
     },
     "encoding": {
       "version": "0.1.13",
+      "dev": true,
       "optional": true,
       "requires": {
         "iconv-lite": "^0.6.2"
@@ -13858,6 +13903,7 @@
       "dependencies": {
         "iconv-lite": {
           "version": "0.6.3",
+          "dev": true,
           "optional": true,
           "requires": {
             "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -14170,6 +14216,7 @@
     },
     "fill-range": {
       "version": "7.0.1",
+      "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -14318,6 +14365,7 @@
     },
     "glob-parent": {
       "version": "5.1.2",
+      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -14514,8 +14562,7 @@
     },
     "icss-utils": {
       "version": "5.1.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ieee754": {
       "version": "1.2.1",
@@ -14662,6 +14709,7 @@
     },
     "is-binary-path": {
       "version": "2.1.0",
+      "dev": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -14685,13 +14733,15 @@
       "dev": true
     },
     "is-extglob": {
-      "version": "2.1.1"
+      "version": "2.1.1",
+      "dev": true
     },
     "is-fullwidth-code-point": {
       "version": "3.0.0"
     },
     "is-glob": {
       "version": "4.0.3",
+      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -14705,7 +14755,8 @@
       "dev": true
     },
     "is-number": {
-      "version": "7.0.0"
+      "version": "7.0.0",
+      "dev": true
     },
     "is-path-cwd": {
       "version": "2.2.0",
@@ -15029,8 +15080,7 @@
     },
     "karma-jasmine-html-reporter": {
       "version": "1.7.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "karma-source-map-support": {
       "version": "1.4.0",
@@ -15198,12 +15248,14 @@
     },
     "lru-cache": {
       "version": "6.0.0",
+      "dev": true,
       "requires": {
         "yallist": "^4.0.0"
       }
     },
     "magic-string": {
       "version": "0.25.7",
+      "dev": true,
       "requires": {
         "sourcemap-codec": "^1.4.4"
       }
@@ -15538,7 +15590,8 @@
       }
     },
     "normalize-path": {
-      "version": "3.0.0"
+      "version": "3.0.0",
+      "dev": true
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -15953,7 +16006,8 @@
       "version": "1.0.0"
     },
     "picomatch": {
-      "version": "2.3.1"
+      "version": "2.3.1",
+      "dev": true
     },
     "pify": {
       "version": "2.3.0",
@@ -16043,8 +16097,7 @@
     },
     "postcss-custom-media": {
       "version": "8.0.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-custom-properties": {
       "version": "12.1.4",
@@ -16098,13 +16151,11 @@
     },
     "postcss-font-variant": {
       "version": "5.0.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-gap-properties": {
       "version": "3.0.3",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-image-set-function": {
       "version": "4.0.6",
@@ -16124,8 +16175,7 @@
     },
     "postcss-initial": {
       "version": "4.0.1",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-lab-function": {
       "version": "4.1.1",
@@ -16146,18 +16196,15 @@
     },
     "postcss-logical": {
       "version": "5.0.4",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-media-minmax": {
       "version": "5.0.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -16191,13 +16238,11 @@
     },
     "postcss-overflow-shorthand": {
       "version": "3.0.3",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-page-break": {
       "version": "3.0.4",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-place": {
       "version": "7.0.4",
@@ -16254,8 +16299,7 @@
     },
     "postcss-replace-overflow-wrap": {
       "version": "4.0.0",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-selector-not": {
       "version": "5.0.0",
@@ -16383,6 +16427,7 @@
     },
     "readdirp": {
       "version": "3.6.0",
+      "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -16554,7 +16599,7 @@
     },
     "safer-buffer": {
       "version": "2.1.2",
-      "devOptional": true
+      "dev": true
     },
     "sass": {
       "version": "1.49.0",
@@ -16598,8 +16643,7 @@
         },
         "ajv-keywords": {
           "version": "3.5.2",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -16620,6 +16664,7 @@
     },
     "semver": {
       "version": "7.3.5",
+      "dev": true,
       "requires": {
         "lru-cache": "^6.0.0"
       }
@@ -16865,7 +16910,8 @@
       }
     },
     "sourcemap-codec": {
-      "version": "1.4.8"
+      "version": "1.4.8",
+      "dev": true
     },
     "spdy": {
       "version": "4.0.2",
@@ -17035,8 +17081,7 @@
         },
         "ajv-keywords": {
           "version": "3.5.2",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -17090,6 +17135,7 @@
     },
     "to-regex-range": {
       "version": "5.0.1",
+      "dev": true,
       "requires": {
         "is-number": "^7.0.0"
       }
@@ -17138,7 +17184,8 @@
       "dev": true
     },
     "typescript": {
-      "version": "4.5.5"
+      "version": "4.5.5",
+      "dev": true
     },
     "ua-parser-js": {
       "version": "0.7.31",
@@ -17297,8 +17344,7 @@
         },
         "ajv-keywords": {
           "version": "3.5.2",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -17492,8 +17538,7 @@
     },
     "ws": {
       "version": "8.2.3",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "xlsx": {
       "version": "0.18.5",
@@ -17511,7 +17556,8 @@
       "version": "5.0.8"
     },
     "yallist": {
-      "version": "4.0.0"
+      "version": "4.0.0",
+      "dev": true
     },
     "yaml": {
       "version": "1.10.2",
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
index d6f4b6ec..9addd6bb 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
@@ -18,7 +18,13 @@ export class BoxPlotComponent implements AfterViewInit {
 
   @Input()width?: number;
   @Input()height?: number;
-  
+  @Input()mean?: number;
+  @Input()median?: number;
+  @Input()min?: number;
+  @Input()max?: number;
+  @Input()q1?: number;
+  @Input()q3?: number;
+
   @ViewChild('boxplot') chartRef!: ElementRef;
   constructor() { }
 
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
index f141f522..932ed963 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
@@ -10,6 +10,8 @@ export class PieChartComponent implements AfterViewInit {
 
   @Input()width?: number;
   @Input()height?: number;
+  @Input()uniqueValues?: string[] = [];
+  @Input()uniqueValuesPercent?: number[] = [];
   
   @ViewChild('piechart') chartRef!: ElementRef;
   constructor() { }
diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html
index efc093d2..59c1899b 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -113,8 +113,8 @@
                         <tr class="graphics-row">
                             <th class="no-pad">Grafik</th>
                             <td class="no-pad" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'graphic-class' : !columnsChecked[i]}">
-                                <app-box-plot *ngIf="this.experiment.columnTypes[i] == ColumnType.numerical" [width]="150" [height]="150"></app-box-plot>
-                                <app-pie-chart *ngIf="this.experiment.columnTypes[i] == ColumnType.categorical" [width]="150" [height]="150"></app-pie-chart>
+                                <app-box-plot *ngIf="this.experiment.columnTypes[i] == ColumnType.numerical" [width]="150" [height]="150" [mean]="colInfo.mean" [median]="colInfo.median" [min]="colInfo.min" [max]="colInfo.max" [q1]="colInfo.q1" [q3]="colInfo.q3"></app-box-plot>
+                                <app-pie-chart *ngIf="this.experiment.columnTypes[i] == ColumnType.categorical" [width]="150" [height]="150" [uniqueValues]="colInfo.uniqueValues" [uniqueValuesPercent]="colInfo.uniqueValuesPercent"></app-pie-chart>
                             </td>
                         </tr>
                         <tr>
@@ -142,7 +142,7 @@
                             </th>
                             <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix" [ngClass]="{'text-disabled' : !columnsChecked[i]}">
                                 <mat-form-field>
-                                    <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding" [disabled]="!columnsChecked[i]" (selectionChange)="columnTableChangeDetected()">
+                                    <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding" [disabled]="!columnsChecked[i] || experiment.columnTypes[i] == ColumnType.numerical || colInfo.columnName == experiment.outputColumn" (selectionChange)="columnTableChangeDetected()">
                                         <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option">
                                             {{ optionName }}
                                         </mat-option>
@@ -208,8 +208,9 @@
             <div class="ns-col rounded">
                 <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100">
                     <mat-label>Izlazna kolona</mat-label>
-                    <mat-select [(value)]="experiment.outputColumn" (selectionChange)="changeOutputColumn(this.experiment.inputColumns[0])">
+                    <mat-select [(value)]="experiment.outputColumn" (selectionChange)="changeProblemType()">
                         <mat-option *ngFor="let inputColumn of experiment.inputColumns" [value]="inputColumn">{{inputColumn}}</mat-option>
+                        <mat-option *ngIf="experiment.inputColumns.length == 0" value="-">-</mat-option>
                     </mat-select>
                 </mat-form-field>
             </div>
diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts
index c200e674..0d17271d 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -62,7 +62,7 @@ export class ColumnTableComponent implements AfterViewInit {
 
     this.datasetService.getDatasetFilePartial(this.dataset.fileId, 0, 10).subscribe((response: string | undefined) => {
       if (response && this.dataset != undefined) {
-        this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter.toString() == "") ? "," : this.dataset.delimiter);
+        this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter);
       }
     });
     this.loaded = true;
@@ -89,7 +89,10 @@ export class ColumnTableComponent implements AfterViewInit {
     }
   }
   resetOutputColumn() {
-    this.experiment.outputColumn = this.experiment.inputColumns[0];
+    if (this.experiment.inputColumns.length > 0)
+      this.experiment.outputColumn = this.experiment.inputColumns[0];
+    else 
+      this.experiment.outputColumn = '-';
   }
 
   setDeleteRowsForMissingValTreatment() {
@@ -112,7 +115,7 @@ export class ColumnTableComponent implements AfterViewInit {
 
   columnTypeChanged(columnName: string) {
     if (this.experiment.outputColumn == columnName)
-      this.changeOutputColumn(columnName);
+      this.changeProblemType();
     else
       this.columnTableChangeDetected();
   }
@@ -124,6 +127,8 @@ export class ColumnTableComponent implements AfterViewInit {
         if (this.experiment.inputColumns.filter(x => x == columnName)[0] == undefined) {
           this.experiment.inputColumns.push(columnName);
         }
+        if (this.experiment.inputColumns.length == 1)
+          this.experiment.outputColumn = this.experiment.inputColumns[0];
       }
       else {
         this.experiment.inputColumns = this.experiment.inputColumns.filter(x => x != columnName);
@@ -131,17 +136,21 @@ export class ColumnTableComponent implements AfterViewInit {
         //TODO: da se zatamni kolona koja je unchecked
         //this.experiment.encodings = this.experiment.encodings.filter(x => x.columnName != columnName); samo na kraju iz enkodinga skloni necekirane
         this.experiment.nullValuesReplacers = this.experiment.nullValuesReplacers.filter(x => x.column != columnName);
-        if (columnName == this.experiment.outputColumn)
-          this.experiment.outputColumn = this.experiment.inputColumns[0];
+        if (columnName == this.experiment.outputColumn) {
+          if (this.experiment.inputColumns.length > 0)
+            this.experiment.outputColumn = this.experiment.inputColumns[0];
+          else 
+            this.experiment.outputColumn = '-';
+        }
       }
       this.columnTableChangeDetected();
     }
   }
 
-  changeOutputColumn(columnName: string) {
+  changeProblemType() {
     if (this.experiment != undefined && this.dataset != undefined) {
       let i = this.dataset.columnInfo.findIndex(x => x.columnName == this.experiment!.outputColumn);
-      if (this.experiment.columnTypes[i] == ColumnType.numerical) {
+      if (i == -1 || this.experiment.columnTypes[i] == ColumnType.numerical) {
         this.experiment.type = ProblemType.Regression;
       }
       else {
@@ -286,10 +295,20 @@ export class ColumnTableComponent implements AfterViewInit {
     return '0';
   }
   saveExperiment() {
-    this.openSaveExperimentDialog();
+    if (this.experiment.inputColumns.length == 0)
+      Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti.");
+    else if (this.experiment.inputColumns.length == 1)
+      Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti (mora postojati bar jedna ulazna i jedna izlazna kolona).");
+    else 
+      this.openSaveExperimentDialog();
   }
   updateExperiment() {
-    this.openUpdateExperimentDialog();
+    if (this.experiment.inputColumns.length == 0)
+      Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti.");
+    else if (this.experiment.inputColumns.length == 1)
+      Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti (mora postojati bar jedna ulazna i jedna izlazna kolona).");
+    else 
+      this.openUpdateExperimentDialog();
   }
 
 
diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
index 1eed2cdc..94ef9905 100644
--- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
+++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts
@@ -101,7 +101,7 @@ export class FormDatasetComponent {
         this.tableData.loaded = true;
         this.tableData.numRows = this.dataset.rowCount;
         this.tableData.numCols = this.dataset.columnInfo.length;
-        this.tableData.data = this.csv.csvToArray(file, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter);
+        this.tableData.data = this.csv.csvToArray(file, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter);
 
       }
     });
diff --git a/frontend/src/app/_pages/profile/profile.component.css b/frontend/src/app/_pages/profile/profile.component.css
index 428870da..bbd4c9ba 100644
--- a/frontend/src/app/_pages/profile/profile.component.css
+++ b/frontend/src/app/_pages/profile/profile.component.css
@@ -1,21 +1,25 @@
-.card{
+.card {
     background-color: transparent;
-    color:var(--offwhite)
+    color: var(--offwhite)
 }
 
-.card-header{
+.card-header {
     background-color: var(--ns-primary-50);
-    color:var(--offwhite)
+    color: var(--offwhite)
 }
-.card-body{
+
+.card-body {
     background-color: var(--ns-bg-dark-50);
 }
 
-mat-form-field{
+mat-form-field {
     width: 100%;
 }
 
-.danger-Text{
-    color:var(--ns-warn)
+.danger-Text {
+    color: var(--ns-warn)
 }
 
+.selectedPicture {
+    background-color: var(--ns-accent);
+}
\ No newline at end of file
diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html
index 37df4f14..8d655513 100644
--- a/frontend/src/app/_pages/profile/profile.component.html
+++ b/frontend/src/app/_pages/profile/profile.component.html
@@ -12,7 +12,7 @@
                         <img class="img-account-profile rounded-circle mb-2" src="{{this.photoPath}}" alt="profilePicture">
                         <!-- User's info -->
                         <span>@ {{this.user.username}}</span>
-                        <span class="mt-3" style="font-weight: bold;">{{this.user.firstName}} {{this.user.lastName}}</span> 
+                        <span class="mt-3" style="font-weight: bold;">{{this.user.firstName}} {{this.user.lastName}}</span>
                     </div>
                 </div>
             </div>
@@ -31,7 +31,7 @@
                                     <mat-form-field appearance="fill">
                                         <mat-label>Važeća lozinka</mat-label>
                                         <input matInput id="inputPassword" name="inputPassword" type="password" placeholder="" [(ngModel)]="this.oldPass">
-                                      </mat-form-field>
+                                    </mat-form-field>
                                     <small *ngIf="wrongOldPassBool" class="form-text danger-Text">Pogrešan format.</small>
                                 </div>
                                 <!-- Form Group (new password)-->
@@ -39,12 +39,12 @@
                                     <mat-form-field appearance="fill">
                                         <mat-label>Nova lozinka</mat-label>
                                         <input matInput id="inputNewPassword" name="inputNewPassword" type="password" placeholder="" [(ngModel)]="this.newPass1">
-                                      </mat-form-field>
+                                    </mat-form-field>
                                     <small *ngIf="wrongNewPassBool" class="form-text danger-Text">Lozinke se ne podudaraju.</small>
                                     <small *ngIf="wrongNewPass1Bool" class="form-text danger-Text">Pogrešan format.</small>
                                 </div>
                             </div>
-    
+
                             <!-- Form Row-->
                             <div class="row gx-3 mb-3">
                                 <div class="col-md-6">
@@ -118,24 +118,23 @@
 
                         <div>
                             <label class="small mt-2 mb-3">Kliknite na sliku kako biste je odabrali za profilnu:</label>
-                            
+
                             <div class="container">
                                 <div class="card-group">
                                     <!--bootstrap card with 3 horizontal images-->
                                     <div class="row overflow-auto" style="max-height: 200px;">
-                                        <div class="card col-md-3" *ngFor="let picture of this.pictures" (click)="this.photoId = picture.photoId.toString()"
-                                            [ngClass]="{'selectedPicture': this.photoId == picture.photoId.toString()}">
+                                        <div class="card col-md-3" *ngFor="let picture of this.pictures" (click)="this.photoId = picture.photoId.toString()" [ngClass]="{'selectedPicture': this.photoId == picture.photoId.toString()}">
                                             <img src="{{picture.path}}">
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        
+
                         <div class="row mt-5">
                             <div class="col text-center">
                                 <!-- Save changes button-->
-                                <button mat-raised-button color="primary" (click)="saveInfoChanges()" >Sačuvaj izmene</button>
+                                <button mat-raised-button color="primary" (click)="saveInfoChanges()">Sačuvaj izmene</button>
                             </div>
                         </div>
                     </form>
@@ -147,7 +146,7 @@
 
     <div class="row">
         <div class="col-xl-4">
-            
+
         </div>
     </div>