From 1b1c2ff5057985c5ab096fc1a68a4cd6e94dac31 Mon Sep 17 00:00:00 2001
From: Julian Martinsson Bonde <johnmartins1992@gmail.com>
Date: Wed, 21 Aug 2024 14:37:21 +0200
Subject: [PATCH] Version 1.16.0: Quality of Life 2 (#107)

* Plot tick and axis visibility improvement

* Clickable home logo

* Improved understandability of export data options

* Bumped version to 1.16.0

* Fixed number and text form components

* Checkboxes fixed

* Pressing enter while editing an axis will now trigger the update

* Adjusted selectors to have the same fontsize as other form items

* Adjusted selector bottom marigin
---
 package-lock.json                             | 493 +++++++++---------
 package.json                                  |   2 +-
 src/App.vue                                   |   5 +-
 src/components/inputs/CheckboxInput.vue       |  60 +++
 src/components/inputs/NumberInput.vue         |  75 +++
 src/components/inputs/RangeInput.vue          |  73 ---
 src/components/inputs/TextInput.vue           |  10 +-
 src/components/plot-layouts/PCPlot/PCPlot.vue |  23 +-
 .../sidemenu/analysis/ColorCodeForm.vue       |  39 +-
 .../analysis/SimilarityAnalysisPanel.vue      |   6 +-
 .../sidemenu/import-export/ExportForm.vue     |  23 +-
 .../sidemenu/import-export/SourceForm.vue     |   2 +-
 .../sidemenu/settings/EditCategoryForm.vue    |  10 +-
 .../sidemenu/settings/OptionsForm.vue         |  44 +-
 src/models/plots/Category.js                  |   2 +-
 src/scss/Forms.scss                           |   1 -
 src/store/OptionsStore.js                     |   1 +
 17 files changed, 479 insertions(+), 390 deletions(-)
 create mode 100644 src/components/inputs/CheckboxInput.vue
 create mode 100644 src/components/inputs/NumberInput.vue
 delete mode 100644 src/components/inputs/RangeInput.vue

diff --git a/package-lock.json b/package-lock.json
index 69a44a1..d24114d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "md-analysis-cli",
-  "version": "1.10.0",
+  "version": "1.16.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "md-analysis-cli",
-      "version": "1.10.0",
+      "version": "1.16.0",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "6.x",
         "@fortawesome/free-brands-svg-icons": "6.x",
@@ -442,19 +442,17 @@
       }
     },
     "node_modules/@babel/helper-string-parser": {
-      "version": "7.19.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
-      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
-      "dev": true,
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
-      "dev": true,
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
       "engines": {
         "node": ">=6.9.0"
       }
@@ -512,9 +510,12 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.20.15",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz",
-      "integrity": "sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg==",
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
+      "integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
+      "dependencies": {
+        "@babel/types": "^7.25.2"
+      },
       "bin": {
         "parser": "bin/babel-parser.js"
       },
@@ -1730,13 +1731,12 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz",
-      "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==",
-      "dev": true,
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
+      "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
       "dependencies": {
-        "@babel/helper-string-parser": "^7.19.4",
-        "@babel/helper-validator-identifier": "^7.19.1",
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
         "to-fast-properties": "^2.0.0"
       },
       "engines": {
@@ -2029,7 +2029,8 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.17",
@@ -2972,49 +2973,60 @@
       "dev": true
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
-      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.38.tgz",
+      "integrity": "sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==",
       "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.47",
+        "@babel/parser": "^7.24.7",
+        "@vue/shared": "3.4.38",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-core/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
-      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz",
+      "integrity": "sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==",
       "dependencies": {
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-core": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
-      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
-      "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/reactivity-transform": "3.2.47",
-        "@vue/shared": "3.2.47",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz",
+      "integrity": "sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==",
+      "dependencies": {
+        "@babel/parser": "^7.24.7",
+        "@vue/compiler-core": "3.4.38",
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/compiler-ssr": "3.4.38",
+        "@vue/shared": "3.4.38",
         "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
+        "magic-string": "^0.30.10",
+        "postcss": "^8.4.40",
+        "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
-      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz",
+      "integrity": "sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "node_modules/@vue/component-compiler-utils": {
@@ -3087,60 +3099,49 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
-      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
-      "dependencies": {
-        "@vue/shared": "3.2.47"
-      }
-    },
-    "node_modules/@vue/reactivity-transform": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
-      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.38.tgz",
+      "integrity": "sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==",
       "dependencies": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "estree-walker": "^2.0.2",
-        "magic-string": "^0.25.7"
+        "@vue/shared": "3.4.38"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
-      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.38.tgz",
+      "integrity": "sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==",
       "dependencies": {
-        "@vue/reactivity": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/reactivity": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
-      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz",
+      "integrity": "sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==",
       "dependencies": {
-        "@vue/runtime-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "csstype": "^2.6.8"
+        "@vue/reactivity": "3.4.38",
+        "@vue/runtime-core": "3.4.38",
+        "@vue/shared": "3.4.38",
+        "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
-      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.38.tgz",
+      "integrity": "sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-ssr": "3.4.38",
+        "@vue/shared": "3.4.38"
       },
       "peerDependencies": {
-        "vue": "3.2.47"
+        "vue": "3.4.38"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
-      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.38.tgz",
+      "integrity": "sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw=="
     },
     "node_modules/@vue/vue-loader-v15": {
       "name": "vue-loader",
@@ -4872,9 +4873,9 @@
       "dev": true
     },
     "node_modules/csstype": {
-      "version": "2.6.21",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/d3": {
       "version": "7.8.2",
@@ -8080,16 +8081,18 @@
       }
     },
     "node_modules/magic-string": {
-      "version": "0.29.0",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.29.0.tgz",
-      "integrity": "sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==",
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
       "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.4.13"
-      },
-      "engines": {
-        "node": ">=12"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/magic-string/node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
+    },
     "node_modules/make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -8406,9 +8409,15 @@
       }
     },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -8983,9 +8992,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -9085,9 +9094,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.21",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "version": "8.4.41",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -9096,12 +9105,16 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.4",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -10513,14 +10526,15 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11018,7 +11032,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
       "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -11243,15 +11256,23 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
-      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.38.tgz",
+      "integrity": "sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-sfc": "3.2.47",
-        "@vue/runtime-dom": "3.2.47",
-        "@vue/server-renderer": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/compiler-sfc": "3.4.38",
+        "@vue/runtime-dom": "3.4.38",
+        "@vue/server-renderer": "3.4.38",
+        "@vue/shared": "3.4.38"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
       }
     },
     "node_modules/vue-cli-plugin-pinia": {
@@ -12539,16 +12560,14 @@
       }
     },
     "@babel/helper-string-parser": {
-      "version": "7.19.4",
-      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.19.4.tgz",
-      "integrity": "sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==",
-      "dev": true
+      "version": "7.24.8",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
+      "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ=="
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-      "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
-      "dev": true
+      "version": "7.24.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
+      "integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w=="
     },
     "@babel/helper-validator-option": {
       "version": "7.18.6",
@@ -12591,9 +12610,12 @@
       }
     },
     "@babel/parser": {
-      "version": "7.20.15",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.20.15.tgz",
-      "integrity": "sha512-DI4a1oZuf8wC+oAJA9RW6ga3Zbe8RZFt7kD9i4qAspz3I/yHet1VvC3DiSy/fsUvv5pvJuNPh0LPOdCcqinDPg=="
+      "version": "7.25.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.25.3.tgz",
+      "integrity": "sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==",
+      "requires": {
+        "@babel/types": "^7.25.2"
+      }
     },
     "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
       "version": "7.18.6",
@@ -13410,13 +13432,12 @@
       }
     },
     "@babel/types": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.20.7.tgz",
-      "integrity": "sha512-69OnhBxSSgK0OzTJai4kyPDiKTIe3j+ctaHdIGVbRahTLAT7L3R9oeXHC2aVSuGYt3cVnoAMDmOCgJ2yaiLMvg==",
-      "dev": true,
+      "version": "7.25.2",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.25.2.tgz",
+      "integrity": "sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==",
       "requires": {
-        "@babel/helper-string-parser": "^7.19.4",
-        "@babel/helper-validator-identifier": "^7.19.1",
+        "@babel/helper-string-parser": "^7.24.8",
+        "@babel/helper-validator-identifier": "^7.24.7",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -13628,7 +13649,8 @@
     "@jridgewell/sourcemap-codec": {
       "version": "1.4.14",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
-      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
+      "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==",
+      "dev": true
     },
     "@jridgewell/trace-mapping": {
       "version": "0.3.17",
@@ -14398,49 +14420,56 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
-      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.38.tgz",
+      "integrity": "sha512-8IQOTCWnLFqfHzOGm9+P8OPSEDukgg3Huc92qSG49if/xI2SAwLHQO2qaPQbjCWPBcQoO1WYfXfTACUrWV3c5A==",
       "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.47",
+        "@babel/parser": "^7.24.7",
+        "@vue/shared": "3.4.38",
+        "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
-        "source-map": "^0.6.1"
+        "source-map-js": "^1.2.0"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+          "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+        }
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
-      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.38.tgz",
+      "integrity": "sha512-Osc/c7ABsHXTsETLgykcOwIxFktHfGSUDkb05V61rocEfsFDcjDLH/IHJSNJP+/Sv9KeN2Lx1V6McZzlSb9EhQ==",
       "requires": {
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-core": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
-      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
-      "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/reactivity-transform": "3.2.47",
-        "@vue/shared": "3.2.47",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.38.tgz",
+      "integrity": "sha512-s5QfZ+9PzPh3T5H4hsQDJtI8x7zdJaew/dCGgqZ2630XdzaZ3AD8xGZfBqpT8oaD/p2eedd+pL8tD5vvt5ZYJQ==",
+      "requires": {
+        "@babel/parser": "^7.24.7",
+        "@vue/compiler-core": "3.4.38",
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/compiler-ssr": "3.4.38",
+        "@vue/shared": "3.4.38",
         "estree-walker": "^2.0.2",
         "magic-string": "0.x",
-        "postcss": "^8.1.10",
-        "source-map": "^0.6.1"
+        "postcss": "^8.4.40",
+        "source-map-js": "^1.2.0"
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
-      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.38.tgz",
+      "integrity": "sha512-YXznKFQ8dxYpAz9zLuVvfcXhc31FSPFDcqr0kyujbOwNhlmaNvL2QfIy+RZeJgSn5Fk54CWoEUeW+NVBAogGaw==",
       "requires": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "@vue/component-compiler-utils": {
@@ -14506,57 +14535,46 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "@vue/reactivity": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
-      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.38.tgz",
+      "integrity": "sha512-4vl4wMMVniLsSYYeldAKzbk72+D3hUnkw9z8lDeJacTxAkXeDAP1uE9xr2+aKIN0ipOL8EG2GPouVTH6yF7Gnw==",
       "requires": {
-        "@vue/shared": "3.2.47"
-      }
-    },
-    "@vue/reactivity-transform": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
-      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
-      "requires": {
-        "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "estree-walker": "^2.0.2",
-        "magic-string": "0.x"
+        "@vue/shared": "3.4.38"
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
-      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.38.tgz",
+      "integrity": "sha512-21z3wA99EABtuf+O3IhdxP0iHgkBs1vuoCAsCKLVJPEjpVqvblwBnTj42vzHRlWDCyxu9ptDm7sI2ZMcWrQqlA==",
       "requires": {
-        "@vue/reactivity": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/reactivity": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
-      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.38.tgz",
+      "integrity": "sha512-afZzmUreU7vKwKsV17H1NDThEEmdYI+GCAK/KY1U957Ig2NATPVjCROv61R19fjZNzMmiU03n79OMnXyJVN0UA==",
       "requires": {
-        "@vue/runtime-core": "3.2.47",
-        "@vue/shared": "3.2.47",
-        "csstype": "^2.6.8"
+        "@vue/reactivity": "3.4.38",
+        "@vue/runtime-core": "3.4.38",
+        "@vue/shared": "3.4.38",
+        "csstype": "^3.1.3"
       }
     },
     "@vue/server-renderer": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
-      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.38.tgz",
+      "integrity": "sha512-NggOTr82FbPEkkUvBm4fTGcwUY8UuTsnWC/L2YZBmvaQ4C4Jl/Ao4HHTB+l7WnFCt5M/dN3l0XLuyjzswGYVCA==",
       "requires": {
-        "@vue/compiler-ssr": "3.2.47",
-        "@vue/shared": "3.2.47"
+        "@vue/compiler-ssr": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "@vue/shared": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
-      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.38.tgz",
+      "integrity": "sha512-q0xCiLkuWWQLzVrecPb0RMsNWyxICOjPrcrwxTUEHb1fsnvni4dcuyG7RT/Ie7VPTvnjzIaWzRMUBsrqNj/hhw=="
     },
     "@vue/vue-loader-v15": {
       "version": "npm:vue-loader@15.10.1",
@@ -15846,9 +15864,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.21",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
-      "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "d3": {
       "version": "7.8.2",
@@ -18243,11 +18261,18 @@
       }
     },
     "magic-string": {
-      "version": "0.29.0",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.29.0.tgz",
-      "integrity": "sha512-WcfidHrDjMY+eLjlU+8OvwREqHwpgCeKVBUpQ3OhYYuvfaYCUgcbuBzappNzZvg/v8onU3oQj+BYpkOJe9Iw4Q==",
+      "version": "0.30.11",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.11.tgz",
+      "integrity": "sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==",
       "requires": {
-        "@jridgewell/sourcemap-codec": "^1.4.13"
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      },
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": {
+          "version": "1.5.0",
+          "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+          "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="
+        }
       }
     },
     "make-dir": {
@@ -18492,9 +18517,9 @@
       }
     },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
     },
     "natural-compare": {
       "version": "1.4.0",
@@ -18923,9 +18948,9 @@
       "dev": true
     },
     "picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
     },
     "picomatch": {
       "version": "2.3.1",
@@ -18982,13 +19007,13 @@
       }
     },
     "postcss": {
-      "version": "8.4.21",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
-      "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
+      "version": "8.4.41",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.41.tgz",
+      "integrity": "sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==",
       "requires": {
-        "nanoid": "^3.3.4",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.0.2"
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
       }
     },
     "postcss-calc": {
@@ -19975,12 +20000,13 @@
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true
     },
     "source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg=="
     },
     "source-map-support": {
       "version": "0.5.21",
@@ -20346,8 +20372,7 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
-      "dev": true
+      "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog=="
     },
     "to-regex-range": {
       "version": "5.0.1",
@@ -20508,15 +20533,15 @@
       "dev": true
     },
     "vue": {
-      "version": "3.2.47",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
-      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
-      "requires": {
-        "@vue/compiler-dom": "3.2.47",
-        "@vue/compiler-sfc": "3.2.47",
-        "@vue/runtime-dom": "3.2.47",
-        "@vue/server-renderer": "3.2.47",
-        "@vue/shared": "3.2.47"
+      "version": "3.4.38",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.38.tgz",
+      "integrity": "sha512-f0ZgN+mZ5KFgVv9wz0f4OgVKukoXtS3nwET4c2vLBGQR50aI8G0cqbFtLlX9Yiyg3LFGBitruPHt2PxwTduJEw==",
+      "requires": {
+        "@vue/compiler-dom": "3.4.38",
+        "@vue/compiler-sfc": "3.4.38",
+        "@vue/runtime-dom": "3.4.38",
+        "@vue/server-renderer": "3.4.38",
+        "@vue/shared": "3.4.38"
       }
     },
     "vue-cli-plugin-pinia": {
diff --git a/package.json b/package.json
index fc7fa98..a6efcce 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "md-analysis-cli",
-  "version": "1.15.0",
+  "version": "1.16.0",
   "private": true,
   "author": {
     "name": "Julian Martinsson Bonde",
diff --git a/src/App.vue b/src/App.vue
index 6685582..d23c744 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,10 @@
 <template>
     <div id="app" style="height: 100%;">
         <div class="mdac-header px-3">
-            <div class="title-container">
+            <div 
+                class="title-container clickable"
+                @click="setView('pcp')"
+            >
                 MDAC
             </div>
 
diff --git a/src/components/inputs/CheckboxInput.vue b/src/components/inputs/CheckboxInput.vue
new file mode 100644
index 0000000..431374a
--- /dev/null
+++ b/src/components/inputs/CheckboxInput.vue
@@ -0,0 +1,60 @@
+<template>
+    <div class="labeled-input-container mb-1" >
+        <div @click="cbox.click()" class="clickable">
+            <span class="input-group-text">
+                <slot />
+            </span>
+        </div>
+        <div style="display:flex; justify-content: end;">
+            <input 
+                ref="cbox"
+                type="checkbox" 
+                v-model="model"
+            >
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineModel, ref } from "vue";
+
+const model = defineModel();
+
+const cbox = ref(null);
+
+</script>
+
+<style lang="scss" scoped>
+
+    .labeled-input-container {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 0.5em;
+    }
+    
+    .input-group-text {
+        font-size: 0.8em;
+        min-width: 50px;
+        padding: 0.1em 0.5em 0.1em 0.4em;
+
+
+    }
+    .input-group-prepend {
+        padding: 0;
+    }
+
+    .form-control  {
+        padding: 0.1rem 0 0.1rem 0.4rem;
+        font-size: 0.8em !important;
+        font-family: monospace;
+        text-align: right;
+        padding-right: 4px;
+    }
+
+    .input-number {
+        height: 1.8em;
+        font-size: 0.8em;
+        min-width: 30px;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/inputs/NumberInput.vue b/src/components/inputs/NumberInput.vue
new file mode 100644
index 0000000..dc2670b
--- /dev/null
+++ b/src/components/inputs/NumberInput.vue
@@ -0,0 +1,75 @@
+<template>
+    <div class="labeled-input-container mb-1">
+        <div>
+            <span class="input-group-text">
+                <slot />
+            </span>
+        </div>
+        <input 
+            class="input-number"
+            type="number" 
+            :step="props.step" 
+            :max="props.max" 
+            :min="props.min"
+            :value="model"
+            @input="$emit('update:modelValue', $event.target.value)"
+        >
+    </div>
+</template>
+
+<script setup>
+import { defineModel } from "vue";
+
+const model = defineModel();
+
+const props = defineProps({
+    'step': {
+        type: Number,
+        default: 0.1
+    },
+    'max': {
+        type: Number,
+        default: 1.0
+    },
+    'min': {
+        type: Number,
+        default: 0.0
+    },
+})
+
+</script>
+
+<style lang="scss" scoped>
+
+    .labeled-input-container {
+        display: grid;
+        grid-template-columns: 1fr 3fr;
+        gap: 0.5em;
+    }
+    
+    .input-group-text {
+        font-size: 0.8em;
+        min-width: 50px;
+        padding: 0.1em 0.5em 0.1em 0.4em;
+
+
+    }
+    .input-group-prepend {
+        padding: 0;
+    }
+
+    .form-control  {
+        padding: 0.1rem 0 0.1rem 0.4rem;
+        font-size: 0.8em !important;
+        font-family: monospace;
+        text-align: right;
+        padding-right: 4px;
+    }
+
+    .input-number {
+        height: 1.8em;
+        font-size: 0.8em;
+        min-width: 30px;
+    }
+
+</style>
\ No newline at end of file
diff --git a/src/components/inputs/RangeInput.vue b/src/components/inputs/RangeInput.vue
deleted file mode 100644
index 5cceaef..0000000
--- a/src/components/inputs/RangeInput.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <div class="title"><slot /></div>
-    <div class="range-input-container">
-        <div>
-            <input 
-                id="customRange1" 
-                ref="rangeInput" 
-                type="range" 
-                class="form-range"
-                min="0"
-                max="1"
-                step="0.01"
-                :value="props.value" 
-                @change="onChange"
-            >
-        </div>
-        <div>
-            <input 
-                ref="numberInput" 
-                type="number" 
-                step="0.01"
-                :value="props.value" disabled
-            >
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { reactive, ref, onMounted, onUpdated, inject } from "vue"
-
-const props = defineProps({
-    value: Number
-})
-const emit = defineEmits(['change'])
-
-const numberInput = ref(null)
-
-function onChange (evt) {
-    numberInput.value.value = evt.target.value
-    emit('change', parseFloat(evt.target.value))
-}
-
-</script>
-
-<style lang="scss" scoped>
-.title {
-    font-size: 0.8em;
-}
-
-.range-input-container {
-    display: grid;
-    grid-template-columns: auto 60px; 
-    margin: 0;
-    padding: 0;
-
-    label {
-        font-size: 0.8em;
-        margin-bottom: 0;
-    }
-
-    input[type=number] {
-        margin-left: 10px;
-        width: 50px;
-        font-size: 0.7em;
-        font-family: monospace;
-        font-weight: bold;
-    }
-
-}
-
-
-
-</style>
\ No newline at end of file
diff --git a/src/components/inputs/TextInput.vue b/src/components/inputs/TextInput.vue
index f13f56d..ccdf80d 100644
--- a/src/components/inputs/TextInput.vue
+++ b/src/components/inputs/TextInput.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="labeled-input-container mb-1">
         <div>
-            <span class="">
+            <span class="input-group-text">
                 <slot />
             </span>
         </div>
@@ -25,10 +25,12 @@ defineEmits(['update:modelValue'])
     .labeled-input-container {
         display: grid;
         grid-template-columns: 1fr 3fr;
+        gap: 0.5em;
     }
+    
     .input-group-text {
-        font-size: 1em;
-        width: 60px;
+        font-size: 0.8em;
+        width: 80px;
         padding: 0.1em 0 0.1em 0.4em;
 
 
@@ -39,7 +41,7 @@ defineEmits(['update:modelValue'])
 
     .form-control  {
         padding: 0.1rem 0 0.1rem 0.4rem;
-        font-size: 1em !important;
+        font-size: 0.8em !important;
         font-family: monospace;
         text-align: right;
         padding-right: 4px;
diff --git a/src/components/plot-layouts/PCPlot/PCPlot.vue b/src/components/plot-layouts/PCPlot/PCPlot.vue
index 1c14f6e..e0a2d11 100644
--- a/src/components/plot-layouts/PCPlot/PCPlot.vue
+++ b/src/components/plot-layouts/PCPlot/PCPlot.vue
@@ -11,12 +11,20 @@
                 tabindex="0"
                 height="100%" 
                 width="100%" 
-                style="font-size: 1em; font-family: monospace; position: absolute; left: 0; top: 0; "
+                style="font-size: 1em; font-family: monospace; position: absolute; left: 0; top: 0; user-select: none;"
                 @mousemove.prevent="onMouseMove"
                 @mouseup.prevent="dragFilterDone"
                 @keydown.delete="dataStore.deleteCategory(selectedCategory)"
             >
-				
+            <filter x="0" y="0" width="1" height="1" id="solid">
+                <feFlood flood-color="white" :flood-opacity="optionsStore.tickBackgroundOpacity" result="bg" />
+                <feMerge>
+                    <feMergeNode in="bg"/>
+                    <feMergeNode in="SourceGraphic"/>
+                </feMerge>
+            </filter>
+
+
                 <!-- Full graphics group -->
                 <g
                     v-if="data.length > 0"
@@ -460,7 +468,7 @@ function exportSVG () {
     let style = `<style>`
     style += 'svg {font-family: monospace;}'
     style += '.title {font-size: 0.8rem; text-anchor: start; x: 0px;}'
-    style += '.tick-string {font-size: 0.8rem; text-anchor: end; dominant-baseline: middle;}'
+    style += '.tick-string {font-size: 0.8rem; text-anchor: end; dominant-baseline: middle; filter: url(#solid);}'
     style += 'line {stroke: black; fill-opacity: 0;}'
     style += 'path {fill-opacity: 0;}'
     style += '.filter-box {stroke: white;stroke-opacity: 0.9;stroke-width: 2px;fill: #595959; fill-opacity: 0.6;x: -8px;width: 16px;}' 
@@ -513,10 +521,15 @@ function exportSVG () {
 
 		.filter-hitbox {
 			stroke: transparent;
-			fill-opacity: 0;
+			fill: transparent;
 			x: -10px;
 			y: -20px;
 			width: 20px;
+
+            &:hover {
+                stroke: rgb(0, 0, 0);
+                fill: rgba(255,255,255, 0.05);
+            }
 		}
 
 		.title {
@@ -528,6 +541,8 @@ function exportSVG () {
 			text-anchor: end;
 			dominant-baseline: middle;
 			font-weight: bold;
+            pointer-events: none;
+            filter: (url(#solid))
 		}
 	}
 
diff --git a/src/components/sidemenu/analysis/ColorCodeForm.vue b/src/components/sidemenu/analysis/ColorCodeForm.vue
index a10ad10..4a59473 100644
--- a/src/components/sidemenu/analysis/ColorCodeForm.vue
+++ b/src/components/sidemenu/analysis/ColorCodeForm.vue
@@ -4,7 +4,7 @@
         :start-maximized="props.startMaximized"
     >
         <div class="control-group">
-            <div class="labeled-form">                
+            <div class="labeled-form mb-2" style="font-size: 0.8em;">                
                 <span>Property:</span>
                 <select 
                     v-model="selectedColorCodeCategory" 
@@ -14,30 +14,20 @@
                     <option v-for="c in categories" :key="c.id" :value="c"> {{ c.displayTitle }}</option>
                 </select>
             </div>
-            <div class="control-group" title="If enabled, data points will be color-coded based on input similarity (euclidean proximity).">
-                <div style="display: flex; justify-content: space-between; flex-direction: row;">
-                    <label class="form-check-label m-0">
-                        Use similarity color coding
-                    </label>
-                    <input
-                        v-model="useSimilarityColorCoding"
-                        type="checkbox" 
-                        @change="onUseSimilarityColorCodingChange"
-                    >
-                </div>
-            </div>
 
-            <div class="control-group" title="If enabled, the plot will display a color code indicator.">
-                <div style="display: flex; justify-content: space-between; flex-direction: row;">
-                    <label class="form-check-label m-0">
-                        Show color code legend
-                    </label>
-                    <input
-                        v-model="showColorCodeLegend"
-                        type="checkbox" 
-                    >
-                </div>
-            </div>
+            <CheckboxInput 
+                v-model="useSimilarityColorCoding"
+                title="If enabled, selected data points will be color-coded based on input similarity (euclidean proximity)."
+            >
+                Use similarity color coding
+            </CheckboxInput>
+            
+            <CheckboxInput 
+                v-model="showColorCodeLegend"
+                title="If enabled, the plot will display a color code indicator."
+            >
+                Show color code legend
+            </CheckboxInput>
         </div>
     </SidebarSection>
 </template>
@@ -47,6 +37,7 @@ import { storeToRefs } from "pinia";
 import SidebarSection from "@/components/layouts/SidebarSection";
 import {useOptionsStore} from "@/store/OptionsStore";
 import {useDataStore} from "@/store/DataStore";
+import CheckboxInput from "@/components/inputs/CheckboxInput.vue";
 
 const optionsStore = useOptionsStore();
 const dataStore = useDataStore();
diff --git a/src/components/sidemenu/analysis/SimilarityAnalysisPanel.vue b/src/components/sidemenu/analysis/SimilarityAnalysisPanel.vue
index 41b2bc4..09fd18a 100644
--- a/src/components/sidemenu/analysis/SimilarityAnalysisPanel.vue
+++ b/src/components/sidemenu/analysis/SimilarityAnalysisPanel.vue
@@ -4,21 +4,21 @@
         :start-maximized="false"
     >
         <div class="control-group">            
-            <div class="labeled-form">
+            <div class="labeled-form" style="font-size: 0.8em;">
                 <span>Fidelity column: </span>
                 <select v-model="fidelityColumn" class="mb-2">
                     <option :value="null">None</option>
                     <option v-for="c in categories.filter(filterCategoricalColumns)" :key="c.id" :value="c"> {{ c.displayTitle }}</option>
                 </select>
             </div>
-            <div class="labeled-form">
+            <div class="labeled-form" style="font-size: 0.8em;">
                 <span>HiFi indicator: </span>
                 <select v-model="fidelityValue" class="mb-2" :disabled="fidelityColumn == null">
                     <option :value="null">None</option>
                     <option v-for="val, i in fidelityColumnValues" :key="i" :value="val"> {{ val }}</option>
                 </select>
             </div>
-            <div class="labeled-form">
+            <div class="labeled-form" style="font-size: 0.8em;">
                 <span>I/O similarity: </span>
                 <select v-model="ioType" class="mb-2">
                     <option value="input">Input</option>
diff --git a/src/components/sidemenu/import-export/ExportForm.vue b/src/components/sidemenu/import-export/ExportForm.vue
index 8f0654d..a2bb831 100644
--- a/src/components/sidemenu/import-export/ExportForm.vue
+++ b/src/components/sidemenu/import-export/ExportForm.vue
@@ -5,7 +5,7 @@
     >
         <div class="control-group">
             <strong>Plot export</strong>
-            <div class="labeled-form">
+            <div class="labeled-form" style="font-size: 0.8em;">
                 <span>Format: </span>
                 <select ref="formatSelector" @change="onImageFormatChange">
                     <option value="png">Image (PNG)</option>
@@ -18,22 +18,22 @@
         </div>
         <div class="control-group">
             <strong>Data export</strong>
-            <div style="display: flex; justify-content: space-between; flex-direction: row;">
-                <!-- Checkbox filtered data -->
-                <span>Include filtered data</span>
-                <input ref="filteredDataCheckbox" v-model="includeFilteredData" type="checkbox">
-            </div>
+
+            <CheckboxInput v-model="includeFilteredData" title="Checking this box will export data that has been excluded using filters">
+                Include all data
+            </CheckboxInput>
+
             <div class="d-grid gap-2 mt-2">
                 <button @click="exportDataRequest(includeFilteredData)">Download Data CSV</button>
             </div>
         </div>
         <div class="control-group">
             <strong>Filter export</strong>
-            <div style="display: flex; justify-content: space-between; flex-direction: row;">
-                <!-- Checkbox filtered data -->
-                <span>Interpret out-of-bounds limits as inf</span>
-                <input ref="filteredDataCheckbox" v-model="nearLimitAsInf" type="checkbox">
-            </div>
+
+            <CheckboxInput v-model="nearLimitAsInf" title="Checking this box will interpret filters that are out of bounds as infinity">
+                Interpret out-of-bounds limits as inf" 
+            </CheckboxInput>
+
             <div class="d-grid gap-2 mt-2">
                 <button @click="exportFilterRequest(nearLimitAsInf)">Download Filter CSV</button>
             </div>
@@ -50,6 +50,7 @@ import SidebarSection from "@/components/layouts/SidebarSection.vue";
 import { useDataStore } from "@/store/DataStore";
 import { usePCPStore } from "@/store/PCPStore";
 import { min } from "d3";
+import CheckboxInput from "@/components/inputs/CheckboxInput.vue";
 
 const dataStore = useDataStore();
 const pcpStore = usePCPStore();
diff --git a/src/components/sidemenu/import-export/SourceForm.vue b/src/components/sidemenu/import-export/SourceForm.vue
index 9c67198..1ce6ad6 100644
--- a/src/components/sidemenu/import-export/SourceForm.vue
+++ b/src/components/sidemenu/import-export/SourceForm.vue
@@ -14,7 +14,7 @@
                 @change="readFile"
             >
 
-            <div class="labeled-form">                
+            <div class="labeled-form" style="font-size: 0.8em;">                
                 <span>Delimiter:</span>
                 <select id="formFileDelimiter" ref="fileDelimiterSelect" name="delimiter" @change="readFile">
                     <option value="auto" selected>Auto (default)</option>
diff --git a/src/components/sidemenu/settings/EditCategoryForm.vue b/src/components/sidemenu/settings/EditCategoryForm.vue
index b62b9b9..e685cd0 100644
--- a/src/components/sidemenu/settings/EditCategoryForm.vue
+++ b/src/components/sidemenu/settings/EditCategoryForm.vue
@@ -1,16 +1,16 @@
 <template>    
     <SidebarSection 
         ref="sidebarSection"
-        title="Modify category"
+        title="Modify axis"
         :start-maximized="false"
     >
         <div v-if="editedCategory">
-            <div class="control-group">
-                <strong>Edit selected category</strong>
+            <div class="control-group" @keyup.enter="editCategory">
+                <strong>Edit selected axis</strong>
                 <TextInput v-model="editedCategory.displayTitle">Title</TextInput>
                 <div v-if="editedCategory.usesCategoricalData == false">
-                    <TextInput v-model.number="editedCategory.ub">UB</TextInput>
-                    <TextInput v-model.number="editedCategory.lb">LB</TextInput>
+                    <TextInput v-model.number="editedCategory.ub">Upper bound</TextInput>
+                    <TextInput v-model.number="editedCategory.lb">Lower bound</TextInput>
                     <TextInput v-model.number="editedCategory.ticks">Ticks</TextInput>
                 </div>
 
diff --git a/src/components/sidemenu/settings/OptionsForm.vue b/src/components/sidemenu/settings/OptionsForm.vue
index 6cdf0b6..c794d1f 100644
--- a/src/components/sidemenu/settings/OptionsForm.vue
+++ b/src/components/sidemenu/settings/OptionsForm.vue
@@ -4,7 +4,7 @@
         :start-maximized="false"
     >
         <div class="control-group">
-            <div v-if="stateStore.activeView === 'pcp'" class="labeled-form mb-2">
+            <div v-if="stateStore.activeView === 'pcp'" class="labeled-form mb-2" style="font-size: 0.8em;">
                 <span>Rendering: </span>
                 <select ref="lineFormatSelector" v-model="pcpStore.renderingType">
                     <option value="raster">Rasterized</option>
@@ -12,7 +12,7 @@
                 </select>
             </div>
 
-            <div v-if="stateStore.activeView === 'pcp' && pcpStore.renderingType==='raster'" class="labeled-form mb-2">
+            <div v-if="stateStore.activeView === 'pcp' && pcpStore.renderingType==='raster'" class="labeled-form mb-2" style="font-size: 0.8em;">
                 <span>Resolution: </span>
                 <select ref="lineFormatSelector" v-model="pcpStore.resolution" @change="setResolutionManualOverride(true)">
                     <option :value="0.3">0.3 - Potato</option>
@@ -25,7 +25,7 @@
                 </select>
             </div>
 
-            <div v-if="stateStore.activeView === 'pcp'" class="labeled-form mb-2">
+            <div v-if="stateStore.activeView === 'pcp'" class="labeled-form mb-2" style="font-size: 0.8em;">
                 <span>Curve type: </span>
                 <select ref="lineFormatSelector" v-model="optionsStore.curveType">
                     <option value="curve">Curve</option>
@@ -33,27 +33,22 @@
                 </select>
             </div>
 
-            <div class="control-group">
-                <div style="display: flex; justify-content: space-between; flex-direction: row;">
-                    <label class="form-check-label">Show filters in plot</label>
-                    <input v-model="optionsStore.showFilters" type="checkbox">
-                </div>
-            </div>
+            <CheckboxInput v-model="optionsStore.showFilters">Show filters in plot</CheckboxInput>
+
+            <NumberInput v-model="optionsStore.tickBackgroundOpacity" :step="0.05" :min="0" :max="1">
+                Tick background opacity
+            </NumberInput>
 
             <span class="title">Font size</span>
-            <div class="labeled-form size-and-opacity-forms">
-                <span>Title size:</span>
-                <input v-model="optionsStore.titleSize" class="me-2" type="number" step="0.1" max="5" min="0">
-                <span>Tick size:</span>
-                <input v-model="optionsStore.tickSize" type="number" step="0.1" max="5" min="0">
+            <div class="size-and-opacity-forms" style="display: flex; justify-content: space-between;">
+                <NumberInput v-model="optionsStore.titleSize" class="me-2" :step="0.1" :max="5" :min="0">Title size:</NumberInput>
+                <NumberInput v-model="optionsStore.tickSize" :step="0.1" :max="5" :min="0">Tick size:</NumberInput>
             </div>
 
             <span class="title">Data opacity</span>
-            <div class="labeled-form size-and-opacity-forms">
-                <span>Included:</span>
-                <input v-model="optionsStore.includedDataOpacity" class="me-2" type="number" step="0.05" max="1" min="0">
-                <span>Excluded:</span>
-                <input type="number" step="0.05" max="1" min="0" :value="optionsStore.excludedDataOpacity" @change="setFilteredDataOpacity">
+            <div class="size-and-opacity-forms" style="display: flex; justify-content: space-between;">
+                <NumberInput v-model="optionsStore.includedDataOpacity" class="me-2" :step="0.05" :max="1" :min="0">Included:</NumberInput>
+                <NumberInput v-model="optionsStore.excludedDataOpacity" :step="0.05" :max="1" :min="0" @change="setFilteredDataOpacity">Excluded:</NumberInput>
             </div>
         </div>
     </SidebarSection>
@@ -63,13 +58,14 @@
 import { reactive, ref } from "vue"
 
 // Components
-import RangeInput from '@/components/inputs/RangeInput.vue'
+import NumberInput from '@/components/inputs/NumberInput.vue'
 import SidebarSection from "@/components/layouts/SidebarSection.vue"
 
 // State
 import {useOptionsStore} from "@/store/OptionsStore"
 import {usePCPStore} from "@/store/PCPStore"
 import {useStateStore} from "@/store/StateStore"
+import CheckboxInput from "@/components/inputs/CheckboxInput.vue"
 
 // State references
 const optionsStore = useOptionsStore()
@@ -77,6 +73,7 @@ const pcpStore = usePCPStore()
 const stateStore = useStateStore()
 
 function setFilteredDataOpacity (evt) {
+    console.log("change")
     optionsStore.setExcludedDataOpacity(parseFloat(evt.target.value)) 
 }
 
@@ -91,11 +88,4 @@ function setResolutionManualOverride (override) {
         font-weight: bold;
     }
 
-    .labeled-form.size-and-opacity-forms {
-
-        span {
-            min-width: 50px !important;
-        }
-    }
-
 </style>
\ No newline at end of file
diff --git a/src/models/plots/Category.js b/src/models/plots/Category.js
index e702601..928adc9 100644
--- a/src/models/plots/Category.js
+++ b/src/models/plots/Category.js
@@ -7,7 +7,7 @@ class Category {
     static idLookupTable = new Map()
 
     constructor (title, lb, ub, {
-        ticks=5, 
+        ticks=3, 
         displayTitle=null, 
         overwrite=false, 
         position=Category.lookupTable.size, 
diff --git a/src/scss/Forms.scss b/src/scss/Forms.scss
index 9c6eee3..820ca8d 100644
--- a/src/scss/Forms.scss
+++ b/src/scss/Forms.scss
@@ -1,7 +1,6 @@
 .labeled-form {
     display: flex;
     justify-content: space-between;
-    font-size: 0.9em;
     align-items: center;
     span {
         display: inline-block;
diff --git a/src/store/OptionsStore.js b/src/store/OptionsStore.js
index d42d363..752746a 100644
--- a/src/store/OptionsStore.js
+++ b/src/store/OptionsStore.js
@@ -9,6 +9,7 @@ export const useOptionsStore = defineStore('options', {
         // Plot fonts
         titleSize: 1.0,
         tickSize: 0.8,
+        tickBackgroundOpacity: 0.6,
 
         // Color-coding
         selectedColorCodeCategory: null,