diff --git a/index.html b/index.html
index e9b4d1d0..1b3cd7d9 100644
--- a/index.html
+++ b/index.html
@@ -16,11 +16,10 @@
 </head>
 
 <body class="sdfv">
-    <div class="w3-sidebar w3-bar-block w3-card w3-animate-right"
-        style="display:none;right:0;" id="sidebar">
+    <div class="w3-sidebar" style="display:none;right:0;" id="sidebar">
         <div class="dragbar" id="dragbar"></div>
         <div class="sidebar-inner">
-            <button id="menuclose" class="w3-bar-item w3-button w3-large">
+            <button id="menuclose" class="w3-sidebar-close">
                 Close &times;
             </button>
             <h3 id="sidebar-header">
@@ -30,19 +29,19 @@ <h3 id="sidebar-header">
         </div>
     </div>
     <div class="container-fluid" id="header-container">
-        <div class="row g-2">
+        <div class="row g-2 mb-2">
             <div class="col-auto">
                 <input type="file" id="sdfg-file-input"
                     accept=".sdfg,.json,.sdfgz,.sdfg.gz"
                     class="form-control form-control-sm">
             </div>
             <div class="col-auto">
-                <button class="btn btn-sm btn-light btn-sdfv-light" id="reload">
+                <button class="btn btn-sm btn-light" id="reload">
                     Refresh
                 </button>
             </div>
             <div class="col-auto">
-                <button class="btn btn-sm btn-light btn-sdfv-light" id="outline">
+                <button class="btn btn-sm btn-light" id="outline">
                     SDFG Outline
                 </button>
             </div>
@@ -50,7 +49,7 @@ <h3 id="sidebar-header">
                 <input type="file" accept=".json" id="instrumentation-report-file-input"
                        style="display: none;">
                 <button id="load-instrumentation-report-btn"
-                    class="btn btn-sm btn-light btn-sdfv-light"
+                    class="btn btn-sm btn-light"
                     onclick="document.getElementById('instrumentation-report-file-input').click();">
                     Load Instrumentation Report
                 </button>
@@ -61,7 +60,7 @@ <h3 id="sidebar-header">
                 <div class="input-group">
                     <input id="search" type="text" class="form-control form-control-sm"
                         placeholder="Search in graph elements">
-                    <button id="search-btn" class="btn btn-sm btn-light btn-sdfv-light">
+                    <button id="search-btn" class="btn btn-sm btn-light">
                         Search
                     </button>
                 </div>
@@ -76,7 +75,7 @@ <h3 id="sidebar-header">
             </div>
             <div class="col-auto">
                 <div class="dropdown">
-                    <button class="btn btn-sm btn-light btn-sdfv-light dropdown-toggle" type="button"
+                    <button class="btn btn-sm btn-light dropdown-toggle" type="button"
                         data-bs-toggle="dropdown">
                         Advanced Search
                     </button>
@@ -95,7 +94,7 @@ <h3 id="sidebar-header">
 }
 return false;
 };</textarea>
-                        <button id="advsearch-btn" class="btn btn-light btn-sdfv-light">
+                        <button id="advsearch-btn" class="btn btn-light">
                             Search
                         </button>
                     </form>
diff --git a/package-lock.json b/package-lock.json
index 04ec1cf2..40990008 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@spcl/sdfv",
-    "version": "1.2.6",
+    "version": "1.2.7",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@spcl/sdfv",
-            "version": "1.2.6",
+            "version": "1.2.7",
             "hasInstallScript": true,
             "license": "BSD-3-Clause",
             "dependencies": {
@@ -20,8 +20,7 @@
                 "coffeequate": "^1.3.0",
                 "dagre": "^0.8.5",
                 "jquery": "^3.6.3",
-                "material-icons": "^1.13.12",
-                "material-symbols": "^0.14.3",
+                "material-symbols": "^0.19.0",
                 "mathjs": "^12.2.1",
                 "monaco-editor": "^0.45.0",
                 "patch-package": "^8.0.0",
@@ -2052,9 +2051,9 @@
             }
         },
         "node_modules/@eslint-community/regexpp": {
-            "version": "4.10.0",
-            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz",
-            "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==",
+            "version": "4.10.1",
+            "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.1.tgz",
+            "integrity": "sha512-Zm2NGpWELsQAD1xsJzGQpYfvICSsFkEpU0jxBjfdC6uNEWXcHnfs9hScFWtXVDVl+rBQJGrl4g1vcKIejpH9dA==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -3991,9 +3990,9 @@
             }
         },
         "node_modules/@types/express-serve-static-core": {
-            "version": "4.19.1",
-            "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.1.tgz",
-            "integrity": "sha512-ej0phymbFLoCB26dbbq5PGScsf2JAJ4IJHjG10LalgUV36XKTmA4GdA+PVllKvRk0sEKt64X8975qFnkSi0hqA==",
+            "version": "4.19.3",
+            "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.3.tgz",
+            "integrity": "sha512-KOzM7MhcBFlmnlr/fzISFF5vGWVSvN6fTd4T+ExOt08bA/dA5kpSzY52nMsI1KDFmUREpJelPYyuslLRSjjgCg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -4100,9 +4099,9 @@
             "license": "MIT"
         },
         "node_modules/@types/node": {
-            "version": "20.12.12",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.12.tgz",
-            "integrity": "sha512-eWLDGF/FOSPtAvEqeRAQ4C8LSA7M1I7i0ky1I8U7kD1J5ITyW3AsRhQrKVoWf5pFKZ2kILsEGJhsI9r93PYnOw==",
+            "version": "20.14.1",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.1.tgz",
+            "integrity": "sha512-T2MzSGEu+ysB/FkWfqmhV3PLyQlowdptmmgD20C6QxsS8Fmv5SjpZ1ayXaEC0S21/h5UJ9iA6W/5vSNU5l00OA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -4850,16 +4849,16 @@
             }
         },
         "node_modules/ajv-formats/node_modules/ajv": {
-            "version": "8.14.0",
-            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.14.0.tgz",
-            "integrity": "sha512-oYs1UUtO97ZO2lJ4bwnWeQW8/zvOIQLGKcvPTsWmvc2SYgBb+upuNS5NxoLaMU4h8Ju3Nbj6Cq8mD2LQoqVKFA==",
+            "version": "8.15.0",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.15.0.tgz",
+            "integrity": "sha512-15BTtQUOsSrmHCy+B4VnAiJAJxJ8IFgu6fcjFQF3jQYZ78nLSQthlFg4ehp+NLIyfvFgOlxNsjKIEhydtFPVHQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "fast-deep-equal": "^3.1.3",
+                "fast-uri": "^2.3.0",
                 "json-schema-traverse": "^1.0.0",
-                "require-from-string": "^2.0.2",
-                "uri-js": "^4.4.1"
+                "require-from-string": "^2.0.2"
             },
             "funding": {
                 "type": "github",
@@ -6091,9 +6090,9 @@
             }
         },
         "node_modules/caniuse-lite": {
-            "version": "1.0.30001623",
-            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001623.tgz",
-            "integrity": "sha512-X/XhAVKlpIxWPpgRTnlgZssJrF0m6YtRA0QDWgsBNT12uZM6LPRydR7ip405Y3t1LamD8cP2TZFEDZFBf5ApcA==",
+            "version": "1.0.30001627",
+            "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001627.tgz",
+            "integrity": "sha512-4zgNiB8nTyV/tHhwZrFs88ryjls/lHiqFhrxCW4qSTeuRByBVnPYpDInchOIySWknznucaf31Z4KYqjfbrecVw==",
             "dev": true,
             "funding": [
                 {
@@ -6193,9 +6192,9 @@
             }
         },
         "node_modules/chrome-trace-event": {
-            "version": "1.0.3",
-            "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
-            "integrity": "sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==",
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
+            "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -6747,9 +6746,9 @@
             }
         },
         "node_modules/debug": {
-            "version": "4.3.4",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
-            "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+            "version": "4.3.5",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
+            "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -7054,9 +7053,9 @@
             "license": "MIT"
         },
         "node_modules/electron-to-chromium": {
-            "version": "1.4.783",
-            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.783.tgz",
-            "integrity": "sha512-bT0jEz/Xz1fahQpbZ1D7LgmPYZ3iHVY39NcWWro1+hA2IvjiPeaXtfSqrQ+nXjApMvQRE2ASt1itSLRrebHMRQ==",
+            "version": "1.4.789",
+            "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.789.tgz",
+            "integrity": "sha512-0VbyiaXoT++Fi2vHGo2ThOeS6X3vgRCWrjPeO2FeIAWL6ItiSJ9BqlH8LfCXe3X1IdcG+S0iLoNaxQWhfZoGzQ==",
             "dev": true,
             "license": "ISC"
         },
@@ -7804,6 +7803,13 @@
             "dev": true,
             "license": "MIT"
         },
+        "node_modules/fast-uri": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-2.3.0.tgz",
+            "integrity": "sha512-eel5UKGn369gGEWOqBShmFJWfq/xSJvsgDzgLYC845GneayWvXBf0lJCBn5qTABfewy1ZDPoaR5OZCP+kssfuw==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/fastest-levenshtein": {
             "version": "1.0.16",
             "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
@@ -9539,9 +9545,9 @@
             }
         },
         "node_modules/jackspeak": {
-            "version": "3.1.2",
-            "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.1.2.tgz",
-            "integrity": "sha512-kWmLKn2tRtfYMF/BakihVVRzBKOxz4gJMiL2Rj91WnAB5TPZumSH99R/Yf1qE1u4uRimvCSJfm6hnxohXeEXjQ==",
+            "version": "3.2.3",
+            "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.2.3.tgz",
+            "integrity": "sha512-htOzIMPbpLid/Gq9/zaz9SfExABxqRe1sSCdxntlO/aMD6u0issZQiY25n2GKQUtJ02j7z5sfptlAOMpWWOmvw==",
             "dev": true,
             "license": "BlueOak-1.0.0",
             "dependencies": {
@@ -11688,22 +11694,16 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
-        "node_modules/material-icons": {
-            "version": "1.13.12",
-            "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.13.12.tgz",
-            "integrity": "sha512-/2YoaB79IjUK2B2JB+vIXXYGtBfHb/XG66LvoKVM5ykHW7yfrV5SP6d7KLX6iijY6/G9GqwgtPQ/sbhFnOURVA==",
-            "license": "Apache-2.0"
-        },
         "node_modules/material-symbols": {
-            "version": "0.14.7",
-            "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.14.7.tgz",
-            "integrity": "sha512-65aJAnHtKx98tm41vz9gS6fQfUo+8pCg2sETOC/linpHKEv6gw7U+iHN5Bha6tfM8hDSGfjCwaKOWb+Rs/XyDg==",
+            "version": "0.19.0",
+            "resolved": "https://registry.npmjs.org/material-symbols/-/material-symbols-0.19.0.tgz",
+            "integrity": "sha512-/iWffKJzk8QZw2Wg6QjSS8f4oRbnesbU1Eodje1+jzBCtNYJupJwArjnXpiFeWBANkW0gvOx6AdQpnj9wsgAmA==",
             "license": "Apache-2.0"
         },
         "node_modules/mathjs": {
-            "version": "12.4.2",
-            "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-12.4.2.tgz",
-            "integrity": "sha512-lW14EzwAFgbNN7AZikxplmhs7wiXDhMphBOGCA3KS6T29ECEkHJsBtbEW5cnCz7sXtl4nDyvTdR+DqVsZyiiEw==",
+            "version": "12.4.3",
+            "resolved": "https://registry.npmjs.org/mathjs/-/mathjs-12.4.3.tgz",
+            "integrity": "sha512-oHdGPDbp7gO873xxG90RLq36IuicuKvbpr/bBG5g9c8Obm/VsKVrK9uoRZZHUodohzlnmCEqfDzbR3LH6m+aAQ==",
             "license": "Apache-2.0",
             "dependencies": {
                 "@babel/runtime": "^7.24.4",
@@ -14313,16 +14313,16 @@
             }
         },
         "node_modules/schema-utils/node_modules/ajv": {
-            "version": "8.14.0",
-            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.14.0.tgz",
-            "integrity": "sha512-oYs1UUtO97ZO2lJ4bwnWeQW8/zvOIQLGKcvPTsWmvc2SYgBb+upuNS5NxoLaMU4h8Ju3Nbj6Cq8mD2LQoqVKFA==",
+            "version": "8.15.0",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.15.0.tgz",
+            "integrity": "sha512-15BTtQUOsSrmHCy+B4VnAiJAJxJ8IFgu6fcjFQF3jQYZ78nLSQthlFg4ehp+NLIyfvFgOlxNsjKIEhydtFPVHQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "fast-deep-equal": "^3.1.3",
+                "fast-uri": "^2.3.0",
                 "json-schema-traverse": "^1.0.0",
-                "require-from-string": "^2.0.2",
-                "uri-js": "^4.4.1"
+                "require-from-string": "^2.0.2"
             },
             "funding": {
                 "type": "github",
@@ -15486,9 +15486,9 @@
             }
         },
         "node_modules/ts-jest": {
-            "version": "29.1.3",
-            "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.3.tgz",
-            "integrity": "sha512-6L9qz3ginTd1NKhOxmkP0qU3FyKjj5CPoY+anszfVn6Pmv/RIKzhiMCsH7Yb7UvJR9I2A64rm4zQl531s2F1iw==",
+            "version": "29.1.4",
+            "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.1.4.tgz",
+            "integrity": "sha512-YiHwDhSvCiItoAgsKtoLFCuakDzDsJ1DLDnSouTaTmdOcOwIkSzbLXduaQ6M5DRVhuZC/NYaaZ/mtHbWMv/S6Q==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -16621,9 +16621,9 @@
             "license": "ISC"
         },
         "node_modules/yaml": {
-            "version": "2.4.2",
-            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.2.tgz",
-            "integrity": "sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==",
+            "version": "2.4.3",
+            "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.3.tgz",
+            "integrity": "sha512-sntgmxj8o7DE7g/Qi60cqpLBA3HG3STcDA0kO+WfB05jEKhZMbY7umNm2rBpQvsmZ16/lPXCJGW2672dgOUkrg==",
             "license": "ISC",
             "bin": {
                 "yaml": "bin.mjs"
diff --git a/package.json b/package.json
index 7867fdf9..035b2cdb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@spcl/sdfv",
-    "version": "1.2.6",
+    "version": "1.2.7",
     "description": "A standalone viewer for SDFGs",
     "homepage": "https://github.com/spcl/dace-webclient",
     "main": "out/index.js",
@@ -78,8 +78,7 @@
         "coffeequate": "^1.3.0",
         "dagre": "^0.8.5",
         "jquery": "^3.6.3",
-        "material-icons": "^1.13.12",
-        "material-symbols": "^0.14.3",
+        "material-symbols": "^0.19.0",
         "mathjs": "^12.2.1",
         "monaco-editor": "^0.45.0",
         "patch-package": "^8.0.0",
diff --git a/scss/sdfv.scss b/scss/sdfv.scss
index 7ce94dfb..821d4a56 100644
--- a/scss/sdfv.scss
+++ b/scss/sdfv.scss
@@ -5,9 +5,7 @@
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/root";
 
-$material-icons-font-path: "~material-icons/iconfont/";
 $material-symbols-font-path: "~material-symbols/";
-@import "~material-icons/iconfont/material-icons";
 @import "~material-symbols";
 
 .sdfv {
@@ -25,22 +23,23 @@ body.sdfv {
   font-family: "Segoe UI", Arial, sans-serif;
 }
 
-// Loading animation
-.loader {
-  border: 4px solid #ffffff;
-  border-top: 7px solid #34db50;
-  border-radius: 50%;
-  width: 25px;
-  height: 25px;
-  animation: spin 1s linear infinite;
-}
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
 .sdfv {
 
+  // Loading animation
+  .loader {
+    border: 4px solid #ffffff;
+    border-top: 7px solid #34db50;
+    border-radius: 50%;
+    width: 25px;
+    height: 25px;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
   .hidden {
     display: none;
   }
@@ -53,37 +52,9 @@ body.sdfv {
     user-select: none;
   }
 
-  .btn-sdfv {
-    padding: 0.4rem 0.4rem 0 0.4rem !important;
-    margin-right: 0.2rem;
-  }
-
-  .btn-sdfv.selected {
-    background-color: var(--bs-gray-400);
-  }
-
-  .btn-sdfv > span {
-    margin: 0;
-  }
-
-  .btn-sdfv-light {
-    color: var(--bs-dark);
-    background-color: var(--bs-gray-200);
-    border-color: var(--bs-gray-400);
-  }
-
-  .btn-sdfv-light:hover {
-    color: var(--bs-dark);
-    background-color: var(--bs-gray-400);
-    border-color: var(--bs-gray-400);
-  }
-
   #header-container {
-    padding-left: 0;
-  }
-
-  #header-container .row {
-    margin-bottom: 0.3rem;
+    padding-top: 0.3rem;
+    padding-bottom: 0.3rem;
   }
 
   #advsearch {
@@ -124,47 +95,48 @@ body.sdfv {
     }
   }
 
-  #sidebar {
+  .w3-sidebar {
     height: 100%;
     width: 400px;
     background-color: #fff;
     position: fixed !important;
     z-index: 1;
     overflow: auto;
-    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
-      0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
     animation: animateright 0.4s;
-  }
+    
+    .w3-sidebar-close {
+      cursor: pointer;
+      width: 100%;
+      display: block;
+      padding: 8px 16px;
+      text-align: left;
+      border: none;
+      white-space: normal;
+      float: none;
+      outline: 0;
+
+      &:hover {
+        background-color: #ccc;
+      }
 
-  #sidebar #menuclose {
-    cursor: pointer;
-    width: 100%;
-    display: block;
-    padding: 8px 16px;
-    text-align: left;
-    border: none;
-    white-space: normal;
-    float: none;
-    outline: 0;
-  }
+    }
 
-  #sidebar #menuclose:hover {
-    background-color: #ccc;
-  }
+    .sidebar-inner {
+      display: block;
+      margin-left: 15px;
+    }
 
-  #sidebar .sidebar-inner {
-    display: block;
-    margin-left: 15px;
-  }
+    .dragbar {
+      padding: 3px;
+      height: 100%;
+      width: 2px;
+      display: flex;
+      position: fixed;
+      cursor: col-resize;
+      background-color: silver;
+    }
 
-  .dragbar {
-    padding: 3px;
-    height: 100%;
-    width: 2px;
-    display: flex;
-    position: fixed;
-    cursor: col-resize;
-    background-color: silver;
   }
 
   pre.code {
@@ -172,17 +144,18 @@ body.sdfv {
     margin-bottom: 0;
     display: block;
     white-space: pre-wrap;
-  }
 
-  pre.code code {
-    margin-top: 0;
-    margin-bottom: 0;
-    margin-right: auto;
-    padding: 0.3rem;
-    display: block;
-    color: #966;
-    border-radius: 3px;
-    background-color: #eee;
+    code {
+      margin-top: 0;
+      margin-bottom: 0;
+      margin-right: auto;
+      padding: 0.3rem;
+      display: block;
+      color: #966;
+      border-radius: 3px;
+      background-color: #eee;
+    }
+
   }
 
   .sdfvtooltip {
@@ -229,17 +202,6 @@ body.sdfv {
     display: none;
   }
 
-  #contextmenu {
-    position: absolute;
-    background-color: #fdfdfd;
-    box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    z-index: 2;
-  }
-
   .context_menu_option {
     font-size: 1rem;
     font-family: "Segoe UI", Arial, sans-serif;
@@ -251,49 +213,6 @@ body.sdfv {
     background-color: rgba(0, 0, 0, 0.1);
   }
 
-  /* Checkmarks for context menu items */
-  .checkmark {
-    position: absolute;
-    right: 5px;
-    height: 20px;
-    width: 20px;
-    background-color: #eee;
-  }
-
-  .checkmark_checked {
-    position: absolute;
-    right: 5px;
-    height: 20px;
-    width: 20px;
-    background-color: #2196f3;
-  }
-
-  .context_menu_option:hover .checkmark {
-    background-color: #ccc;
-  }
-
-  .checkmark:after {
-    content: "";
-    position: absolute;
-    display: none;
-  }
-
-  .context_menu_option .checkmark_checked:after {
-    content: "";
-    position: absolute;
-    display: block;
-    left: 6px;
-    top: 2px;
-    width: 5px;
-    height: 10px;
-    border: solid white;
-    border-width: 0 3px 3px 0;
-    -webkit-transform: rotate(45deg);
-    -moz-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    transform: rotate(45deg);
-  }
-
   .sdfv_modal_background {
     position: absolute;
     top: 0;
@@ -437,4 +356,38 @@ body.sdfv {
     font-size: 0.9rem;
     border-radius: 0.2rem;
   }
+
+  .button-bar {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: .3rem;
+  }
+
+  .btn.selected {
+    color: var(--bs-btn-active-color);
+    background-color: var(--bs-btn-active-bg);
+    border-color: var(--bs-btn-active-border-color);
+  }
+
+  .btn-material {
+    padding-bottom: 0;
+  }
+
+  .btn-material.dropdown-toggle {
+
+    &::after {
+      margin-bottom: var(--bs-btn-padding-y);
+    }
+
+  }
+
+  .btn-material.btn-sm {
+
+    span[class*="material-symbols"] {
+      font-size: 1.4rem;
+    }
+
+  }
+
 }
diff --git a/src/local_view/lview_parser.ts b/src/local_view/lview_parser.ts
index 0f156018..7eb4cf54 100644
--- a/src/local_view/lview_parser.ts
+++ b/src/local_view/lview_parser.ts
@@ -389,7 +389,7 @@ export class LViewParser {
             }).appendTo(headerBar);
             $('<div>', {
                 class: 'modal_close',
-                html: '<i class="material-icons">close</i>',
+                html: '<i class="material-symbols-outlined">close</i>',
                 click: () => {
                     dialogueBackground.remove();
                     throw new LViewGraphParseError(
diff --git a/src/local_view/overlays/access_pattern_overlay.ts b/src/local_view/overlays/access_pattern_overlay.ts
index 74f78630..7eebab59 100644
--- a/src/local_view/overlays/access_pattern_overlay.ts
+++ b/src/local_view/overlays/access_pattern_overlay.ts
@@ -16,7 +16,7 @@ export class AccessPatternOverlay extends NodeOverlay {
         });
         $('<div>', {
             id: 'clear-all-access-pattern-button',
-            class: 'button',
+            class: 'btn btn-sm btn-primary',
             text: 'Clear All',
             click: () => {
                 if (this.renderer.graph)
@@ -25,7 +25,7 @@ export class AccessPatternOverlay extends NodeOverlay {
         }).appendTo(container);
         $('<div>', {
             id: 'show-all-access-pattern-button',
-            class: 'button',
+            class: 'btn btn-sm btn-primary',
             text: 'Show All Accesses',
             click: () => {
                 if (this.renderer.graph) {
diff --git a/src/overlay_manager.ts b/src/overlay_manager.ts
index 7eae99c6..8df73349 100644
--- a/src/overlay_manager.ts
+++ b/src/overlay_manager.ts
@@ -173,7 +173,8 @@ export class SymbolResolver {
         const close_button = createElement(
             'div', '', ['modal_close'], header_bar
         );
-        close_button.innerHTML = '<i class="material-icons">close</i>';
+        close_button.innerHTML = '<i class="material-symbols-outlined">' +
+            'close</i>';
         close_button.addEventListener('click', () => {
             popup_dialogue._hide();
         });
@@ -213,7 +214,8 @@ export class SymbolResolver {
             'div', '', ['sdfv_modal_footer_bar'], this.popup_dialogue
         );
         const confirm_button = createElement(
-            'div', '', ['button', 'sdfv_modal_confirm_button'], footer_bar
+            'div', '', ['btn', 'btn-primary', 'sdfv_modal_confirm_button'],
+            footer_bar
         );
         confirm_button.addEventListener('click', (_ev: MouseEvent) => {
             set_val();
diff --git a/src/overlays/avg_parallelism_overlay.ts b/src/overlays/avg_parallelism_overlay.ts
index 1c1319b8..8b6b879b 100644
--- a/src/overlays/avg_parallelism_overlay.ts
+++ b/src/overlays/avg_parallelism_overlay.ts
@@ -228,14 +228,14 @@ export class AvgParallelismOverlay extends GenericSdfgOverlay {
             const block: ControlFlowBlock = graph.node(v);
 
             // If the node's invisible, we skip it.
-            if ((ctx as any).lod && !block.intersect(
+            if (this.renderer.viewportOnly && !block.intersect(
                 visibleRect.x, visibleRect.y,
                 visibleRect.w, visibleRect.h
             ))
                 return;
 
             const stateppp = Math.sqrt(block.width * block.height) / ppp;
-            if (((ctx as any).lod && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
                 block.attributes()?.is_collapsed) {
                 this.shadeNode(block, ctx);
             } else if (block instanceof State) {
@@ -245,8 +245,11 @@ export class AvgParallelismOverlay extends GenericSdfgOverlay {
                         const node = stateGraph.node(v);
 
                         // Skip the node if it's not visible.
-                        if ((ctx as any).lod && !node.intersect(visibleRect.x,
-                            visibleRect.y, visibleRect.w, visibleRect.h))
+                        if (this.renderer.viewportOnly &&
+                            !node.intersect(
+                                visibleRect.x, visibleRect.y, visibleRect.w,
+                                visibleRect.h
+                            ))
                             return;
 
                         if (node instanceof NestedSDFG &&
@@ -254,7 +257,8 @@ export class AvgParallelismOverlay extends GenericSdfgOverlay {
                             const nodeppp = Math.sqrt(
                                 node.width * node.height
                             ) / ppp;
-                            if ((ctx as any).lod && nodeppp < SDFV.STATE_LOD) {
+                            if (this.renderer.adaptiveHiding &&
+                                nodeppp < SDFV.STATE_LOD) {
                                 this.shadeNode(node, ctx);
                             } else if (node.attributes().sdfg &&
                                 node.attributes().sdfg.type !== 'SDFGShell') {
diff --git a/src/overlays/depth_overlay.ts b/src/overlays/depth_overlay.ts
index e1bc188e..f9772fba 100644
--- a/src/overlays/depth_overlay.ts
+++ b/src/overlays/depth_overlay.ts
@@ -213,14 +213,14 @@ export class DepthOverlay extends GenericSdfgOverlay {
             const state = graph.node(v);
 
             // If the node's invisible, we skip it.
-            if ((ctx as any).lod && !state.intersect(
+            if (this.renderer.viewportOnly && !state.intersect(
                 visible_rect.x, visible_rect.y,
                 visible_rect.w, visible_rect.h
             ))
                 return;
 
             const stateppp = Math.sqrt(state.width * state.height) / ppp;
-            if (((ctx as any).lod && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
                 state.data.state.attributes.is_collapsed) {
                 this.shade_node(state, ctx);
             } else {
@@ -230,8 +230,11 @@ export class DepthOverlay extends GenericSdfgOverlay {
                         const node = state_graph.node(v);
 
                         // Skip the node if it's not visible.
-                        if ((ctx as any).lod && !node.intersect(visible_rect.x,
-                            visible_rect.y, visible_rect.w, visible_rect.h))
+                        if (this.renderer.viewportOnly &&
+                            !node.intersect(
+                                visible_rect.x, visible_rect.y, visible_rect.w,
+                                visible_rect.h
+                            ))
                             return;
 
                         if (node instanceof NestedSDFG &&
@@ -239,7 +242,8 @@ export class DepthOverlay extends GenericSdfgOverlay {
                             const nodeppp = Math.sqrt(
                                 node.width * node.height
                             ) / ppp;
-                            if ((ctx as any).lod && nodeppp < SDFV.STATE_LOD) {
+                            if (this.renderer.adaptiveHiding &&
+                                nodeppp < SDFV.STATE_LOD) {
                                 this.shade_node(node, ctx);
                             } else if (node.attributes().sdfg &&
                                 node.attributes().sdfg.type !== 'SDFGShell') {
diff --git a/src/overlays/logical_group_overlay.ts b/src/overlays/logical_group_overlay.ts
index c1cb0455..9c1066f3 100644
--- a/src/overlays/logical_group_overlay.ts
+++ b/src/overlays/logical_group_overlay.ts
@@ -102,14 +102,14 @@ export class LogicalGroupOverlay extends GenericSdfgOverlay {
             const block = graph.node(v);
 
             // If the node's invisible, we skip it.
-            if ((ctx as any).lod && !block.intersect(
+            if (this.renderer.viewportOnly && !block.intersect(
                 visibleRect.x, visibleRect.y,
                 visibleRect.w, visibleRect.h
             ))
                 return;
 
             const blockppp = Math.sqrt(block.width * block.height) / ppp;
-            if (((ctx as any).lod && (blockppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding && (blockppp < SDFV.STATE_LOD)) ||
                 block.attributes().is_collapsed
             ) {
                 this.shadeNode(block, sdfgGroups, ctx);
@@ -121,14 +121,15 @@ export class LogicalGroupOverlay extends GenericSdfgOverlay {
                             const node = stateGraph.node(v);
 
                             // Skip the node if it's not visible.
-                            if ((ctx as any).lod && !node.intersect(
+                            if (this.renderer.viewportOnly && !node.intersect(
                                 visibleRect.x,
                                 visibleRect.y, visibleRect.w, visibleRect.h
                             ))
                                 return;
 
                             if (node.attributes().is_collapsed ||
-                                ((ctx as any).lod && ppp > SDFV.NODE_LOD)) {
+                                (this.renderer.adaptiveHiding &&
+                                 ppp > SDFV.NODE_LOD)) {
                                 this.shadeNode(node, sdfgGroups, ctx);
                             } else {
                                 if (node instanceof NestedSDFG &&
diff --git a/src/overlays/memory_location_overlay.ts b/src/overlays/memory_location_overlay.ts
index d29bb08f..6473be17 100644
--- a/src/overlays/memory_location_overlay.ts
+++ b/src/overlays/memory_location_overlay.ts
@@ -241,14 +241,14 @@ export class MemoryLocationOverlay extends GenericSdfgOverlay {
             const block: ControlFlowBlock = graph.node(v);
 
             // If the node's invisible, we skip it.
-            if ((ctx as any).lod && !block.intersect(
+            if (this.renderer.viewportOnly && !block.intersect(
                 visibleRect.x, visibleRect.y,
                 visibleRect.w, visibleRect.h
             ))
                 return;
 
             const stateppp = Math.sqrt(block.width * block.height) / ppp;
-            if (((ctx as any).lod && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
                 block.attributes()?.is_collapsed) {
                 // The state is collapsed or too small, so we don't need to
                 // traverse its insides.
@@ -260,8 +260,11 @@ export class MemoryLocationOverlay extends GenericSdfgOverlay {
                         const node = stateGraph.node(v);
 
                         // Skip the node if it's not visible.
-                        if ((ctx as any).lod && !node.intersect(visibleRect.x,
-                            visibleRect.y, visibleRect.w, visibleRect.h))
+                        if (this.renderer.viewportOnly &&
+                            !node.intersect(
+                                visibleRect.x, visibleRect.y, visibleRect.w,
+                                visibleRect.h
+                            ))
                             return;
 
                         if (node instanceof NestedSDFG &&
@@ -271,7 +274,8 @@ export class MemoryLocationOverlay extends GenericSdfgOverlay {
                                 node.data.graph, ctx, ppp, visibleRect
                             );
                         } else if (node instanceof AccessNode) {
-                            if (!(ctx as any).lod || ppp < SDFV.NODE_LOD)
+                            if (!this.renderer.adaptiveHiding ||
+                                ppp < SDFV.NODE_LOD)
                                 this.shadeNode(node, ctx);
                         }
                     });
diff --git a/src/overlays/memory_volume_overlay.ts b/src/overlays/memory_volume_overlay.ts
index bd5a2246..b8fe5685 100644
--- a/src/overlays/memory_volume_overlay.ts
+++ b/src/overlays/memory_volume_overlay.ts
@@ -178,7 +178,7 @@ export class MemoryVolumeOverlay extends GenericSdfgOverlay {
             const block: ControlFlowBlock = graph.node(v);
 
             // If the node's invisible, we skip it.
-            if ((ctx as any).lod && !block.intersect(
+            if (this.renderer.viewportOnly && !block.intersect(
                 visibleRect.x, visibleRect.y,
                 visibleRect.w, visibleRect.h
             ) || block.attributes()?.is_collapsed)
@@ -187,7 +187,7 @@ export class MemoryVolumeOverlay extends GenericSdfgOverlay {
             // If we're zoomed out enough that the contents aren't visible, we
             // skip the state.
             const stateppp = Math.sqrt(block.width * block.height) / ppp;
-            if ((ctx as any).lod && (stateppp < SDFV.STATE_LOD))
+            if (this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD))
                 return;
 
             if (block instanceof State) {
@@ -197,7 +197,7 @@ export class MemoryVolumeOverlay extends GenericSdfgOverlay {
                         const node: SDFGNode = state_graph.node(v);
 
                         // Skip the node if it's not visible.
-                        if ((ctx as any).lod && !node.intersect(
+                        if (this.renderer.viewportOnly && !node.intersect(
                             visibleRect.x, visibleRect.y,
                             visibleRect.w, visibleRect.h
                         ))
@@ -206,7 +206,8 @@ export class MemoryVolumeOverlay extends GenericSdfgOverlay {
                         // If we're zoomed out enough that the node's contents
                         // aren't visible or the node is collapsed, we skip it.
                         if (node.data.node.attributes.is_collapsed ||
-                            ((ctx as any).lod && ppp > SDFV.NODE_LOD))
+                            (this.renderer.adaptiveHiding &&
+                             ppp > SDFV.NODE_LOD))
                             return;
 
                         if (node instanceof NestedSDFG &&
@@ -222,7 +223,7 @@ export class MemoryVolumeOverlay extends GenericSdfgOverlay {
                         const edge: Edge = state_graph.edge(e);
 
                         // Skip if edge is invisible, or zoomed out far
-                        if ((ctx as any).lod && (!edge.intersect(
+                        if (this.renderer.adaptiveHiding && (!edge.intersect(
                             visibleRect.x, visibleRect.y,
                             visibleRect.w, visibleRect.h
                         ) || ppp > SDFV.EDGE_LOD))
diff --git a/src/overlays/operational_intensity_overlay.ts b/src/overlays/operational_intensity_overlay.ts
index 3f705df5..8b5f5b46 100644
--- a/src/overlays/operational_intensity_overlay.ts
+++ b/src/overlays/operational_intensity_overlay.ts
@@ -256,14 +256,14 @@ export class OperationalIntensityOverlay extends GenericSdfgOverlay {
             const state = graph.node(v);
 
             // If the node's invisible, we skip it.
-            if ((ctx as any).lod && !state.intersect(
+            if (this.renderer.viewportOnly && !state.intersect(
                 visible_rect.x, visible_rect.y,
                 visible_rect.w, visible_rect.h
             ))
                 return;
 
             const stateppp = Math.sqrt(state.width * state.height) / ppp;
-            if (((ctx as any).lod && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
                 state.data.state.attributes.is_collapsed) {
                 this.shade_node(state, ctx);
             } else {
@@ -273,8 +273,10 @@ export class OperationalIntensityOverlay extends GenericSdfgOverlay {
                         const node = state_graph.node(v);
 
                         // Skip the node if it's not visible.
-                        if ((ctx as any).lod && !node.intersect(visible_rect.x,
-                            visible_rect.y, visible_rect.w, visible_rect.h))
+                        if (this.renderer.viewportOnly && !node.intersect(
+                            visible_rect.x, visible_rect.y, visible_rect.w,
+                            visible_rect.h
+                        ))
                             return;
 
                         if (node instanceof NestedSDFG &&
@@ -282,7 +284,8 @@ export class OperationalIntensityOverlay extends GenericSdfgOverlay {
                             const nodeppp = Math.sqrt(
                                 node.width * node.height
                             ) / ppp;
-                            if ((ctx as any).lod && nodeppp < SDFV.STATE_LOD) {
+                            if (this.renderer.adaptiveHiding &&
+                                nodeppp < SDFV.STATE_LOD) {
                                 this.shade_node(node, ctx);
                             } else if (node.attributes().sdfg &&
                                 node.attributes().sdfg.type !== 'SDFGShell') {
diff --git a/src/overlays/runtime_micro_seconds_overlay.ts b/src/overlays/runtime_micro_seconds_overlay.ts
index c385fa54..59a2467d 100644
--- a/src/overlays/runtime_micro_seconds_overlay.ts
+++ b/src/overlays/runtime_micro_seconds_overlay.ts
@@ -125,14 +125,14 @@ export class RuntimeMicroSecondsOverlay extends RuntimeReportOverlay {
             const state: Node<SDFGNode> = graph.node(v);
 
             // If the node's invisible, we skip it.
-            if ((ctx as any).lod && !state.intersect(
+            if (this.renderer.viewportOnly && !state.intersect(
                 visible_rect.x, visible_rect.y,
                 visible_rect.w, visible_rect.h
             ))
                 return;
 
             const stateppp = Math.sqrt(state.width * state.height) / ppp;
-            if (((ctx as any).lod && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
                 state.data.state.attributes.is_collapsed) {
                 this.shade_node(state, ctx);
             } else {
@@ -142,8 +142,10 @@ export class RuntimeMicroSecondsOverlay extends RuntimeReportOverlay {
                         const node = state_graph.node(v);
 
                         // Skip the node if it's not visible.
-                        if ((ctx as any).lod && !node.intersect(visible_rect.x,
-                            visible_rect.y, visible_rect.w, visible_rect.h))
+                        if (this.renderer.viewportOnly && !node.intersect(
+                            visible_rect.x, visible_rect.y, visible_rect.w,
+                            visible_rect.h
+                        ))
                             return;
 
                         if (node instanceof NestedSDFG &&
@@ -151,7 +153,8 @@ export class RuntimeMicroSecondsOverlay extends RuntimeReportOverlay {
                             const nodeppp = Math.sqrt(
                                 node.width * node.height
                             ) / ppp;
-                            if ((ctx as any).lod && nodeppp < SDFV.STATE_LOD) {
+                            if (this.renderer.adaptiveHiding &&
+                                nodeppp < SDFV.STATE_LOD) {
                                 this.shade_node(node, ctx);
                             } else if (node.attributes().sdfg &&
                                 node.attributes().sdfg.type !== 'SDFGShell') {
diff --git a/src/overlays/simulated_operational_intensity_overlay.ts b/src/overlays/simulated_operational_intensity_overlay.ts
index f9d469aa..b69b3ebd 100644
--- a/src/overlays/simulated_operational_intensity_overlay.ts
+++ b/src/overlays/simulated_operational_intensity_overlay.ts
@@ -219,14 +219,14 @@ export class SimulatedOperationalIntensityOverlay extends GenericSdfgOverlay {
             const state = graph.node(v);
 
             // If the node's invisible, we skip it.
-            if ((ctx as any).lod && !state.intersect(
+            if (this.renderer.viewportOnly && !state.intersect(
                 visible_rect.x, visible_rect.y,
                 visible_rect.w, visible_rect.h
             ))
                 return;
 
             const stateppp = Math.sqrt(state.width * state.height) / ppp;
-            if (((ctx as any).lod && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
                 state.data.state.attributes.is_collapsed) {
                 this.shade_node(state, ctx);
             } else {
@@ -236,8 +236,10 @@ export class SimulatedOperationalIntensityOverlay extends GenericSdfgOverlay {
                         const node = state_graph.node(v);
 
                         // Skip the node if it's not visible.
-                        if ((ctx as any).lod && !node.intersect(visible_rect.x,
-                            visible_rect.y, visible_rect.w, visible_rect.h))
+                        if (this.renderer.viewportOnly && !node.intersect(
+                            visible_rect.x, visible_rect.y, visible_rect.w,
+                            visible_rect.h
+                        ))
                             return;
 
                         if (node instanceof NestedSDFG &&
@@ -245,7 +247,8 @@ export class SimulatedOperationalIntensityOverlay extends GenericSdfgOverlay {
                             const nodeppp = Math.sqrt(
                                 node.width * node.height
                             ) / ppp;
-                            if ((ctx as any).lod && nodeppp < SDFV.STATE_LOD) {
+                            if (this.renderer.adaptiveHiding &&
+                                nodeppp < SDFV.STATE_LOD) {
                                 this.shade_node(node, ctx);
                             } else if (node.attributes().sdfg &&
                                 node.attributes().sdfg.type !== 'SDFGShell') {
diff --git a/src/overlays/static_flops_overlay.ts b/src/overlays/static_flops_overlay.ts
index 7e8dc77d..b77fe76b 100644
--- a/src/overlays/static_flops_overlay.ts
+++ b/src/overlays/static_flops_overlay.ts
@@ -213,14 +213,14 @@ export class StaticFlopsOverlay extends GenericSdfgOverlay {
             const state = graph.node(v);
 
             // If the node's invisible, we skip it.
-            if ((ctx as any).lod && !state.intersect(
+            if (this.renderer.viewportOnly && !state.intersect(
                 visible_rect.x, visible_rect.y,
                 visible_rect.w, visible_rect.h
             ))
                 return;
 
             const stateppp = Math.sqrt(state.width * state.height) / ppp;
-            if (((ctx as any).lod && (stateppp < SDFV.STATE_LOD)) ||
+            if ((this.renderer.adaptiveHiding && (stateppp < SDFV.STATE_LOD)) ||
                 state.data.state.attributes.is_collapsed) {
                 this.shade_node(state, ctx);
             } else {
@@ -230,8 +230,10 @@ export class StaticFlopsOverlay extends GenericSdfgOverlay {
                         const node = state_graph.node(v);
 
                         // Skip the node if it's not visible.
-                        if ((ctx as any).lod && !node.intersect(visible_rect.x,
-                            visible_rect.y, visible_rect.w, visible_rect.h))
+                        if (this.renderer.viewportOnly && !node.intersect(
+                            visible_rect.x, visible_rect.y, visible_rect.w,
+                            visible_rect.h
+                        ))
                             return;
 
                         if (node instanceof NestedSDFG &&
@@ -239,7 +241,8 @@ export class StaticFlopsOverlay extends GenericSdfgOverlay {
                             const nodeppp = Math.sqrt(
                                 node.width * node.height
                             ) / ppp;
-                            if ((ctx as any).lod && nodeppp < SDFV.STATE_LOD) {
+                            if (this.renderer.adaptiveHiding &&
+                                nodeppp < SDFV.STATE_LOD) {
                                 this.shade_node(node, ctx);
                             } else if (node.attributes().sdfg &&
                                 node.attributes().sdfg.type !== 'SDFGShell') {
diff --git a/src/renderer/canvas_manager.ts b/src/renderer/canvas_manager.ts
index 16bcf037..fb7717a3 100644
--- a/src/renderer/canvas_manager.ts
+++ b/src/renderer/canvas_manager.ts
@@ -62,8 +62,6 @@ export class CanvasManager {
         private renderer: SDFGRenderer,
         private canvas: HTMLCanvasElement
     ) {
-        (this.ctx as any).lod = true;
-
         this._svg = document.createElementNS(
             'http://www.w3.org/2000/svg', 'svg'
         );
diff --git a/src/renderer/renderer.ts b/src/renderer/renderer.ts
index c08d18ae..e9ea886e 100644
--- a/src/renderer/renderer.ts
+++ b/src/renderer/renderer.ts
@@ -43,7 +43,11 @@ import {
     getPositioningInfo, getGraphElementUUID, findRootCFG,
 } from '../utils/sdfg/sdfg_utils';
 import { traverseSDFGScopes } from '../utils/sdfg/traversal';
-import { SDFVSettingValT, SDFVSettings } from '../utils/sdfv_settings';
+import {
+    SDFVSettingKey,
+    SDFVSettingValT,
+    SDFVSettings,
+} from '../utils/sdfv_settings';
 import { deepCopy, intersectRect, showErrorModal } from '../utils/utils';
 import { CanvasManager } from './canvas_manager';
 import {
@@ -112,6 +116,7 @@ export type CFGListType = {
     [id: string]: {
         jsonObj: JsonSDFGControlFlowRegion,
         graph: DagreGraph | null,
+        nsdfgNode: NestedSDFG | null,
     }
 };
 
@@ -150,7 +155,9 @@ export interface SDFGRendererEvent {
     'symbol_definition_changed': (symbol: string, definition?: number) => void;
     'active_overlays_changed': () => void;
     'backend_data_requested': (type: string, overlay: string) => void;
-    'settings_changed': (settings: Record<string, SDFVSettingValT>) => void;
+    'settings_changed': (
+        settings: ReadonlyMap<SDFVSettingKey, SDFVSettingValT>
+    ) => void;
 }
 
 /* eslint-disable @typescript-eslint/no-unsafe-declaration-merging */
@@ -195,6 +202,7 @@ export class SDFGRenderer extends EventEmitter {
     protected hovered_elements_cache: Set<SDFGElement> = new Set<SDFGElement>();
 
     // Toolbar related fields.
+    protected modeButtons: ModeButtons | null = null;
     protected toolbar: JQuery<HTMLElement> | null = null;
     protected panmode_btn: HTMLElement | null = null;
     protected movemode_btn: HTMLElement | null = null;
@@ -243,6 +251,12 @@ export class SDFGRenderer extends EventEmitter {
     // Selection related fields.
     protected selected_elements: SDFGElement[] = [];
 
+    // Determine whether rendering only happens in the viewport or also outside.
+    protected _viewportOnly: boolean = true;
+    // Determine whether content should adaptively be hidden when zooming out.
+    // Controlled by the SDFVSettings.
+    protected _adaptiveHiding: boolean = true;
+
     public constructor(
         protected sdfv_instance: SDFV,
         protected sdfg: JsonSDFG,
@@ -286,6 +300,9 @@ export class SDFGRenderer extends EventEmitter {
         this.on('selection_changed', () => {
             this.on_selection_changed();
         });
+        this.on('graph_edited', () => {
+            this.draw_async();
+        });
     }
 
     public destroy(): void {
@@ -340,8 +357,8 @@ export class SDFGRenderer extends EventEmitter {
 
     public view_settings(): any {
         return {
-            inclusive_ranges: SDFVSettings.inclusiveRanges,
-            omit_access_nodes: !SDFVSettings.showAccessNodes,
+            inclusive_ranges: SDFVSettings.get<boolean>('inclusiveRanges'),
+            omit_access_nodes: !SDFVSettings.get<boolean>('showAccessNodes'),
         };
     }
 
@@ -355,33 +372,24 @@ export class SDFGRenderer extends EventEmitter {
         if (this.interaction_info_text)
             this.interaction_info_text.innerHTML = '';
 
-        if (this.panmode_btn) {
-            this.panmode_btn.style.paddingBottom = '0px';
-            this.panmode_btn.style.userSelect = 'none';
+        if (this.panmode_btn)
             this.panmode_btn.classList.remove('selected');
-        }
-        if (this.movemode_btn) {
-            this.movemode_btn.style.paddingBottom = '0px';
-            this.movemode_btn.style.userSelect = 'none';
+
+        if (this.movemode_btn)
             this.movemode_btn.classList.remove('selected');
-        }
-        if (this.selectmode_btn) {
-            this.selectmode_btn.style.paddingBottom = '0px';
-            this.selectmode_btn.style.userSelect = 'none';
+
+        if (this.selectmode_btn)
             this.selectmode_btn.classList.remove('selected');
-        }
 
         this.mouse_follow_element.innerHTML = null;
 
         for (const add_btn of this.addmode_btns) {
             const btn_type = add_btn.getAttribute('type');
             if (btn_type === this.add_type && this.add_type) {
-                add_btn.style.userSelect = 'none';
                 add_btn.classList.add('selected');
                 this.mouse_follow_element.innerHTML =
                     this.mouse_follow_svgs[this.add_type];
             } else {
-                add_btn.style.userSelect = 'none';
                 add_btn.classList.remove('selected');
             }
         }
@@ -449,59 +457,23 @@ export class SDFGRenderer extends EventEmitter {
         }
     }
 
-    // Initializes the DOM
-    public init_elements(
-        user_transform: DOMMatrix | null,
-        background: string | null,
-        mode_buttons: ModeButtons | undefined | null
-    ): void {
-        this.canvas = document.createElement('canvas');
-        this.canvas.classList.add('sdfg_canvas');
-        if (background)
-            this.canvas.style.backgroundColor = background;
-        else
-            this.canvas.style.backgroundColor = 'inherit';
-        this.container.append(this.canvas);
-
-        if (SDFVSettings.minimap)
+    /**
+     * Initialize the UI based on the user's settings.
+     */
+    public initUI(): void {
+        if (SDFVSettings.get<boolean>('minimap'))
             this.enableMinimap();
         else
             this.disableMinimap();
 
-        if (this.debug_draw) {
-            this.dbg_info_box = document.createElement('div');
-            this.dbg_info_box.style.position = 'absolute';
-            this.dbg_info_box.style.bottom = '.5rem';
-            this.dbg_info_box.style.right = '.5rem';
-            this.dbg_info_box.style.backgroundColor = 'black';
-            this.dbg_info_box.style.padding = '.3rem';
-            this.dbg_mouse_coords = document.createElement('span');
-            this.dbg_mouse_coords.style.color = 'white';
-            this.dbg_mouse_coords.style.fontSize = '1rem';
-            this.dbg_mouse_coords.innerText = 'x: N/A / y: N/A';
-            this.dbg_info_box.appendChild(this.dbg_mouse_coords);
-            this.container.appendChild(this.dbg_info_box);
-        }
-
-        // Add an info box for interaction hints to the bottom left of the
-        // canvas.
-        this.interaction_info_box = document.createElement('div');
-        this.interaction_info_box.style.position = 'absolute';
-        this.interaction_info_box.style.bottom = '.5rem';
-        this.interaction_info_box.style.left = '.5rem';
-        this.interaction_info_box.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
-        this.interaction_info_box.style.borderRadius = '5px';
-        this.interaction_info_box.style.padding = '.3rem';
-        this.interaction_info_box.style.display = 'none';
-        this.interaction_info_text = document.createElement('span');
-        this.interaction_info_text.style.color = '#eeeeee';
-        this.interaction_info_text.innerHTML = '';
-        this.interaction_info_box.appendChild(this.interaction_info_text);
-        this.container.appendChild(this.interaction_info_box);
+        if (SDFVSettings.get<boolean>('toolbar')) {
+            // If the toolbar is already present, don't do anything.
+            if (this.toolbar)
+                return;
 
-        if (SDFVSettings.toolbar) {
             // Construct the toolbar.
             this.toolbar = $('<div>', {
+                class: 'button-bar',
                 css: {
                     position: 'absolute',
                     top: '10px',
@@ -515,8 +487,8 @@ export class SDFGRenderer extends EventEmitter {
                 class: 'dropdown',
             });
             $('<button>', {
-                class: 'btn btn-light btn-sdfv-light btn-sdfv',
-                html: '<i class="material-icons">menu</i>',
+                class: 'btn btn-secondary btn-sm btn-material',
+                html: '<i class="material-symbols-outlined">menu</i>',
                 title: 'Menu',
                 'data-bs-toggle': 'dropdown',
             }).appendTo(menuDropdown);
@@ -562,8 +534,8 @@ export class SDFGRenderer extends EventEmitter {
 
             // SDFV Options.
             $('<button>', {
-                class: 'btn btn-light btn-sdfv-light btn-sdfv',
-                html: '<i class="material-icons">settings</i>',
+                class: 'btn btn-secondary btn-sm btn-material',
+                html: '<i class="material-symbols-outlined">settings</i>',
                 title: 'Settings',
                 click: () => {
                     SDFVSettings.getInstance().show(this);
@@ -576,8 +548,9 @@ export class SDFGRenderer extends EventEmitter {
                     class: 'dropdown',
                 });
                 $('<button>', {
-                    class: 'btn btn-light btn-sdfv-light btn-sdfv',
-                    html: '<i class="material-icons">saved_search</i>',
+                    class: 'btn btn-secondary btn-sm btn-material',
+                    html: '<i class="material-symbols-outlined">' +
+                        'saved_search</i>',
                     title: 'Overlays',
                     'data-bs-toggle': 'dropdown',
                     'data-bs-auto-close': 'outside',
@@ -634,28 +607,36 @@ export class SDFGRenderer extends EventEmitter {
                 );
             }
 
+            const zoomButtonGroup = $('<div>', {
+                class: 'btn-group',
+                role: 'group',
+            }).appendTo(this.toolbar);
             // Zoom to fit.
             $('<button>', {
-                class: 'btn btn-light btn-sdfv-light btn-sdfv',
-                html: '<i class="material-icons">fit_screen</i>',
+                class: 'btn btn-secondary btn-sm btn-material',
+                html: '<i class="material-symbols-outlined">fit_screen</i>',
                 title: 'Zoom to fit SDFG',
                 click: () => {
                     this.zoom_to_view();
                 },
-            }).appendTo(this.toolbar);
+            }).appendTo(zoomButtonGroup);
             $('<button>', {
-                class: 'btn btn-light btn-sdfv-light btn-sdfv',
+                class: 'btn btn-secondary btn-sm btn-material',
                 html: '<i class="material-symbols-outlined">fit_width</i>',
                 title: 'Zoom to fit width',
                 click: () => {
                     this.zoomToFitWidth();
                 },
-            }).appendTo(this.toolbar);
+            }).appendTo(zoomButtonGroup);
 
+            const collapseButtonGroup = $('<div>', {
+                class: 'btn-group',
+                role: 'group',
+            }).appendTo(this.toolbar);
             // Collapse all.
             $('<button>', {
-                class: 'btn btn-light btn-sdfv-light btn-sdfv',
-                html: '<i class="material-icons">unfold_less</i>',
+                class: 'btn btn-secondary btn-sm btn-material',
+                html: '<i class="material-symbols-outlined">unfold_less</i>',
                 title: 'Collapse next level (Shift+click to collapse all)',
                 click: (e: MouseEvent) => {
                     if (e.shiftKey)
@@ -663,12 +644,12 @@ export class SDFGRenderer extends EventEmitter {
                     else
                         this.collapseNextLevel();
                 },
-            }).appendTo(this.toolbar);
+            }).appendTo(collapseButtonGroup);
 
             // Expand all.
             $('<button>', {
-                class: 'btn btn-light btn-sdfv-light btn-sdfv',
-                html: '<i class="material-icons">unfold_more</i>',
+                class: 'btn btn-secondary btn-sm btn-material',
+                html: '<i class="material-symbols-outlined">unfold_more</i>',
                 title: 'Expand next level (Shift+click to expand all)',
                 click: (e: MouseEvent) => {
                     if (e.shiftKey)
@@ -676,15 +657,15 @@ export class SDFGRenderer extends EventEmitter {
                     else
                         this.expandNextLevel();
                 },
-            }).appendTo(this.toolbar);
+            }).appendTo(collapseButtonGroup);
 
-            if (mode_buttons) {
+            if (this.modeButtons) {
                 // If we get the "external" mode buttons we are in vscode and do
                 // not need to create them.
-                this.panmode_btn = mode_buttons.pan;
-                this.movemode_btn = mode_buttons.move;
-                this.selectmode_btn = mode_buttons.select;
-                this.addmode_btns = mode_buttons.add_btns;
+                this.panmode_btn = this.modeButtons.pan;
+                this.movemode_btn = this.modeButtons.move;
+                this.selectmode_btn = this.modeButtons.select;
+                this.addmode_btns = this.modeButtons.add_btns;
                 for (const add_btn of this.addmode_btns) {
                     if (add_btn.getAttribute('type') ===
                         SDFGElementType.LibraryNode) {
@@ -716,25 +697,29 @@ export class SDFGRenderer extends EventEmitter {
                 this.addmode_btns = [];
 
                 // Enter pan mode.
+                const modeButtonGroup = $('<div>', {
+                    class: 'btn-group',
+                    role: 'group',
+                }).appendTo(this.toolbar);
                 this.panmode_btn = $('<button>', {
-                    class: 'btn btn-light btn-sdfv-light btn-sdfv selected',
-                    html: '<i class="material-icons">pan_tool</i>',
+                    class: 'btn btn-secondary btn-sm btn-material selected',
+                    html: '<i class="material-symbols-outlined">pan_tool</i>',
                     title: 'Pan mode',
-                }).appendTo(this.toolbar)[0];
+                }).appendTo(modeButtonGroup)[0];
 
                 // Enter move mode.
                 this.movemode_btn = $('<button>', {
-                    class: 'btn btn-light btn-sdfv-light btn-sdfv',
-                    html: '<i class="material-icons">open_with</i>',
+                    class: 'btn btn-secondary btn-sm btn-material',
+                    html: '<i class="material-symbols-outlined">open_with</i>',
                     title: 'Object moving mode',
-                }).appendTo(this.toolbar)[0];
+                }).appendTo(modeButtonGroup)[0];
 
                 // Enter box select mode.
                 this.selectmode_btn = $('<button>', {
-                    class: 'btn btn-light btn-sdfv-light btn-sdfv',
-                    html: '<i class="material-icons">border_style</i>',
+                    class: 'btn btn-secondary btn-sm btn-material',
+                    html: '<i class="material-symbols-outlined">select</i>',
                     title: 'Select mode',
-                }).appendTo(this.toolbar)[0];
+                }).appendTo(modeButtonGroup)[0];
             }
 
             // Enter pan mode
@@ -803,11 +788,11 @@ export class SDFGRenderer extends EventEmitter {
             // Filter graph to selection (visual cutout).
             this.cutoutBtn = $('<button>', {
                 id: 'cutout-button',
-                class: 'btn btn-light btn-sdfv-light btn-sdfv',
+                class: 'btn btn-secondary btn-sm btn-material',
                 css: {
                     'display': 'none',
                 },
-                html: '<i class="material-icons">content_cut</i>',
+                html: '<i class="material-symbols-outlined">content_cut</i>',
                 title: 'Filter selection (cutout)',
                 click: () => {
                     this.cutoutSelection();
@@ -817,11 +802,11 @@ export class SDFGRenderer extends EventEmitter {
             // Transition to local view with selection.
             this.localViewBtn = $('<button>', {
                 id: 'local-view-button',
-                class: 'btn btn-light btn-sdfv-light btn-sdfv',
+                class: 'btn btn-secondary btn-sm btn-material',
                 css: {
                     'display': 'none',
                 },
-                html: '<i class="material-icons">memory</i>',
+                html: '<i class="material-symbols-outlined">memory</i>',
                 title: 'Inspect access patterns (local view)',
                 click: () => {
                     this.localViewSelection();
@@ -832,11 +817,11 @@ export class SDFGRenderer extends EventEmitter {
             if (this.in_vscode) {
                 const exitPreviewBtn = $('<button>', {
                     id: 'exit-preview-button',
-                    class: 'btn btn-light btn-sdfv-light btn-sdfv',
+                    class: 'btn btn-secondary btn-sm btn-material',
                     css: {
                         'display': 'none',
                     },
-                    html: '<i class="material-icons">close</i>',
+                    html: '<i class="material-symbols-outlined">close</i>',
                     title: 'Exit preview',
                     click: () => {
                         exitPreviewBtn.hide();
@@ -844,7 +829,63 @@ export class SDFGRenderer extends EventEmitter {
                     },
                 }).appendTo(this.toolbar);
             }
+        } else {
+            if (this.toolbar) {
+                this.container.removeChild(this.toolbar[0]);
+                this.toolbar = null;
+            }
         }
+    }
+
+    // Initializes the DOM
+    public init_elements(
+        user_transform: DOMMatrix | null,
+        background: string | null,
+        mode_buttons: ModeButtons | null
+    ): void {
+        this.modeButtons = mode_buttons;
+
+        // Set up the canvas.
+        this.canvas = document.createElement('canvas');
+        this.canvas.classList.add('sdfg_canvas');
+        if (background)
+            this.canvas.style.backgroundColor = background;
+        else
+            this.canvas.style.backgroundColor = 'inherit';
+        this.container.append(this.canvas);
+
+        this.initUI();
+
+        if (this.debug_draw) {
+            this.dbg_info_box = document.createElement('div');
+            this.dbg_info_box.style.position = 'absolute';
+            this.dbg_info_box.style.bottom = '.5rem';
+            this.dbg_info_box.style.right = '.5rem';
+            this.dbg_info_box.style.backgroundColor = 'black';
+            this.dbg_info_box.style.padding = '.3rem';
+            this.dbg_mouse_coords = document.createElement('span');
+            this.dbg_mouse_coords.style.color = 'white';
+            this.dbg_mouse_coords.style.fontSize = '1rem';
+            this.dbg_mouse_coords.innerText = 'x: N/A / y: N/A';
+            this.dbg_info_box.appendChild(this.dbg_mouse_coords);
+            this.container.appendChild(this.dbg_info_box);
+        }
+
+        // Add an info box for interaction hints to the bottom left of the
+        // canvas.
+        this.interaction_info_box = document.createElement('div');
+        this.interaction_info_box.style.position = 'absolute';
+        this.interaction_info_box.style.bottom = '.5rem';
+        this.interaction_info_box.style.left = '.5rem';
+        this.interaction_info_box.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
+        this.interaction_info_box.style.borderRadius = '5px';
+        this.interaction_info_box.style.padding = '.3rem';
+        this.interaction_info_box.style.display = 'none';
+        this.interaction_info_text = document.createElement('span');
+        this.interaction_info_text.style.color = '#eeeeee';
+        this.interaction_info_text.innerHTML = '';
+        this.interaction_info_box.appendChild(this.interaction_info_text);
+        this.container.appendChild(this.interaction_info_box);
 
         // Tooltip HTML container
         this.tooltip_container = document.createElement('div');
@@ -872,7 +913,8 @@ export class SDFGRenderer extends EventEmitter {
         error_popover_dismiss.style.float = 'right';
         error_popover_dismiss.style.cursor = 'pointer';
         error_popover_dismiss.style.color = 'white';
-        error_popover_dismiss.innerHTML = '<i class="material-icons">close</i>';
+        error_popover_dismiss.innerHTML =
+            '<span class="material-symbols-outlined">close</span>';
         this.error_popover_container.appendChild(error_popover_dismiss);
         this.error_popover_container.appendChild(this.error_popover_text);
         this.container.appendChild(this.error_popover_container);
@@ -1034,6 +1076,9 @@ export class SDFGRenderer extends EventEmitter {
     }
 
     public draw_async(): void {
+        this._adaptiveHiding = SDFVSettings.get<boolean>(
+            'adaptiveContentHiding'
+        );
         this.clearCssPropertyCache();
         this.canvas_manager?.draw_async();
     }
@@ -1042,9 +1087,10 @@ export class SDFGRenderer extends EventEmitter {
         // Update SDFG metadata
         this.cfgTree = {};
         this.cfgList = {};
-        this.cfgList[0] = {
+        this.cfgList[this.sdfg.cfg_list_id] = {
             jsonObj: this.sdfg,
             graph: null,
+            nsdfgNode: null,
         };
 
         this.doForAllSDFGElements(
@@ -1057,12 +1103,14 @@ export class SDFGRenderer extends EventEmitter {
                     this.cfgList[obj.attributes.sdfg.cfg_list_id] = {
                         jsonObj: obj.attributes.sdfg as JsonSDFG,
                         graph: null,
+                        nsdfgNode: null,
                     };
                 } else if (cfgId !== undefined && cfgId >= 0) {
                     this.cfgTree[cfgId] = oInfo.cfgId;
                     this.cfgList[cfgId] = {
                         jsonObj: obj as JsonSDFGControlFlowRegion,
                         graph: null,
+                        nsdfgNode: null,
                     };
                 }
             }
@@ -1077,7 +1125,7 @@ export class SDFGRenderer extends EventEmitter {
             const uuid = getGraphElementUUID(this.selected_elements[0]);
             if (this.graph) {
                 this.sdfv_instance.fill_info(
-                    findGraphElementByUUID(this.cfgList, this.cfgTree, uuid)
+                    findGraphElementByUUID(this.cfgList, uuid)
                 );
             }
         }
@@ -1088,9 +1136,8 @@ export class SDFGRenderer extends EventEmitter {
             this.add_loading_animation();
             setTimeout(() => {
                 this.relayout();
+                this.draw_async();
             }, 10);
-
-            this.draw_async();
         }
     }
 
@@ -1185,11 +1232,14 @@ export class SDFGRenderer extends EventEmitter {
         if (!this.ctx)
             throw new Error('No context found while performing layouting');
 
-        for (const cfgId in this.cfgList)
+        for (const cfgId in this.cfgList) {
             this.cfgList[cfgId].graph = null;
+            this.cfgList[cfgId].nsdfgNode = null;
+        }
         this.graph = relayoutStateMachine(
             this.ctx, this.sdfg, this.sdfg, this.cfgList,
-            this.state_parent_list, !SDFVSettings.showAccessNodes, undefined
+            this.state_parent_list,
+            !SDFVSettings.get<boolean>('showAccessNodes'), undefined
         );
         this.onresize();
 
@@ -1427,9 +1477,8 @@ export class SDFGRenderer extends EventEmitter {
             // to reload the dom with the above loader element.
             setTimeout(() => {
                 this.relayout();
+                this.draw_async();
             }, 10);
-
-            this.draw_async();
         }
     }
 
@@ -1449,9 +1498,8 @@ export class SDFGRenderer extends EventEmitter {
         // to reload the dom with the above loader element.
         setTimeout(() => {
             this.relayout();
+            this.draw_async();
         }, 10);
-
-        this.draw_async();
     }
 
     public expandNextLevel(): void {
@@ -1475,9 +1523,8 @@ export class SDFGRenderer extends EventEmitter {
         // to reload the dom with the above loader element.
         setTimeout(() => {
             this.relayout();
+            this.draw_async();
         }, 10);
-
-        this.draw_async();
     }
 
     public expandAll(): void {
@@ -1496,9 +1543,8 @@ export class SDFGRenderer extends EventEmitter {
         // to reload the dom with the above loader element.
         setTimeout(() => {
             this.relayout();
+            this.draw_async();
         }, 10);
-
-        this.draw_async();
     }
 
     public reset_positions(): void {
@@ -1515,9 +1561,8 @@ export class SDFGRenderer extends EventEmitter {
         // to reload the dom with the above loader element.
         setTimeout(() => {
             this.relayout();
+            this.draw_async();
         }, 10);
-
-        this.draw_async();
     }
 
     // Save functions
@@ -1604,12 +1649,18 @@ export class SDFGRenderer extends EventEmitter {
 
             // Necessary for "what you see is what you get" in the exported pdf
             // file.
-            if (!save_all && (oldctx as any).lod) {
-                // User wants to save the view "as is" with details hidden
-                (this.ctx as any).lod = true;
+            const oldViewportOnly = this._viewportOnly;
+            const oldAdaptiveHiding = this._adaptiveHiding;
+            if (!save_all) {
+                // User wants to save the view as they see it on the screen.
+                this._viewportOnly = true;
+                this._adaptiveHiding = SDFVSettings.get<boolean>(
+                    'adaptiveContentHiding'
+                );
             } else {
-                // User wants to save all details in the view
-                (this.ctx as any).lod = false;
+                // User wants to save all details in the view.
+                this._viewportOnly = false;
+                this._adaptiveHiding = false;
             }
             (this.ctx as any).pdf = true;
             // Center on saved region
@@ -1624,6 +1675,8 @@ export class SDFGRenderer extends EventEmitter {
                     name + '.pdf', ctx.stream.toBlobURL('application/pdf')
                 );
                 this.ctx = oldctx;
+                this._viewportOnly = oldViewportOnly;
+                this._adaptiveHiding = oldAdaptiveHiding;
                 this.draw_async();
                 // Remove loading animation
                 const info_field = document.getElementById('task-info-field');
@@ -1941,8 +1994,7 @@ export class SDFGRenderer extends EventEmitter {
                 }
                 const sdfg_id = error.sdfg_id ?? 0;
                 const problemElem = findGraphElementByUUID(
-                    this.cfgList, this.cfgTree,
-                    sdfg_id + '/' + state_id + '/' + el_id + '/-1'
+                    this.cfgList, sdfg_id + '/' + state_id + '/' + el_id + '/-1'
                 );
                 if (problemElem) {
                     if (problemElem && problemElem instanceof SDFGElement)
@@ -2727,6 +2779,7 @@ export class SDFGRenderer extends EventEmitter {
             this.add_loading_animation();
             setTimeout(() => {
                 this.relayout();
+                this.draw_async();
             }, 10);
 
             return true;
@@ -2982,8 +3035,11 @@ export class SDFGRenderer extends EventEmitter {
                 return false;
             }
         } else if (evtype === 'wheel') {
-            if (SDFVSettings.useVerticalScrollNavigation && !event.ctrlKey ||
-                !SDFVSettings.useVerticalScrollNavigation && event.ctrlKey) {
+            const useScrollNav = SDFVSettings.get<boolean>(
+                'useVerticalScrollNavigation'
+            );
+            if (useScrollNav && !event.ctrlKey ||
+                !useScrollNav && event.ctrlKey) {
                 // If vertical scroll navigation is turned on, use this to
                 // move the viewport up and down. If the control key is held
                 // down while scrolling, treat it as a typical zoom operation.
@@ -3656,11 +3712,12 @@ export class SDFGRenderer extends EventEmitter {
                     this.add_loading_animation();
                     setTimeout(() => {
                         this.relayout();
+                        this.draw_async();
                     }, 10);
+                } else {
+                    this.draw_async();
                 }
 
-                this.draw_async();
-
                 if (element_moved)
                     this.emit('element_position_changed', 'manual_move');
             } else if (this.mouse_mode === 'add') {
@@ -3713,10 +3770,6 @@ export class SDFGRenderer extends EventEmitter {
         return false;
     }
 
-    public get_inclusive_ranges(): boolean {
-        return SDFVSettings.inclusiveRanges;
-    }
-
     public get_canvas(): HTMLCanvasElement | null {
         return this.canvas;
     }
@@ -3863,7 +3916,8 @@ export class SDFGRenderer extends EventEmitter {
                 // Set a button to exit the local view again.
                 const exitBtn = document.createElement('button');
                 exitBtn.className = 'button';
-                exitBtn.innerHTML = '<i class="material-icons">close</i>';
+                exitBtn.innerHTML =
+                    '<span class="material-symbols-outlined">close</span>';
                 exitBtn.style.paddingBottom = '0px';
                 exitBtn.style.userSelect = 'none';
                 exitBtn.style.position = 'absolute';
@@ -4014,6 +4068,14 @@ export class SDFGRenderer extends EventEmitter {
         }
     }
 
+    public get viewportOnly(): boolean {
+        return this._viewportOnly;
+    }
+
+    public get adaptiveHiding(): boolean {
+        return this._adaptiveHiding;
+    }
+
 }
 
 
@@ -4024,7 +4086,7 @@ function calculateNodeSize(
     switch (node.type) {
         case SDFGElementType.AccessNode:
             label = node.label;
-            if (SDFVSettings.showDataDescriptorSizes) {
+            if (SDFVSettings.get<boolean>('showDataDescriptorSizes')) {
                 const nodedesc = sdfg.attributes._arrays[label];
                 if (nodedesc && nodedesc.attributes.shape) {
                     label = ' ' + sdfg_property_to_string(
@@ -4192,7 +4254,7 @@ function relayoutStateMachine(
         ));
     }
 
-    if (SDFVSettings.useVerticalStateMachineLayout) {
+    if (SDFVSettings.get<boolean>('useVerticalStateMachineLayout')) {
         // Fall back to dagre for anything that cannot be laid out with
         // the vertical layout (e.g., irreducible control flow).
         try {
@@ -4283,11 +4345,11 @@ function relayoutSDFGState(
     const g: DagreGraph = new dagre.graphlib.Graph({ multigraph: true });
 
     // Set layout options and a simpler algorithm for large graphs.
-    const layoutOptions: any = { ranksep: SDFVSettings.ranksep };
+    const layoutOptions: any = { ranksep: SDFVSettings.get<number>('ranksep') };
     if (state.nodes.length >= 1000)
         layoutOptions.ranker = 'longest-path';
 
-    layoutOptions.nodesep = SDFVSettings.nodesep;
+    layoutOptions.nodesep = SDFVSettings.get<number>('nodesep');
     g.setGraph(layoutOptions);
 
     // Set an object for the graph label.
@@ -4371,8 +4433,10 @@ function relayoutSDFGState(
         // state's parent node.
         if ((node.type === SDFGElementType.NestedSDFG ||
              node.type === SDFGElementType.ExternalNestedSDFG) &&
-            node.attributes.sdfg && node.attributes.sdfg.type !== 'SDFGShell')
+            node.attributes.sdfg && node.attributes.sdfg.type !== 'SDFGShell') {
             stateParentList[node.attributes.sdfg.cfg_list_id] = obj;
+            sdfgList[node.attributes.sdfg.cfg_list_id].nsdfgNode = obj;
+        }
 
         // Add input connectors.
         let i = 0;
@@ -4589,7 +4653,7 @@ function relayoutSDFGState(
         }
 
         // Summarize edges for NestedSDFGs and ScopeNodes
-        if (SDFVSettings.summarizeLargeNumbersOfEdges) {
+        if (SDFVSettings.get<boolean>('summarizeLargeNumbersOfEdges')) {
             if (gnode instanceof NestedSDFG || gnode instanceof ScopeNode) {
                 const n_of_in_connectors = gnode.in_connectors.length;
                 const n_of_out_connectors = gnode.out_connectors.length;
diff --git a/src/renderer/renderer_elements.ts b/src/renderer/renderer_elements.ts
index c342cc56..3914a2df 100644
--- a/src/renderer/renderer_elements.ts
+++ b/src/renderer/renderer_elements.ts
@@ -291,7 +291,7 @@ export class SDFGElement {
         // Only draw if close enough
         const canvas_manager = renderer.get_canvas_manager();
         const ppp = canvas_manager?.points_per_pixel();
-        if (!(ctx as any).lod || (ppp && ppp < SDFV.EDGE_LOD)) {
+        if (!renderer.adaptiveHiding || (ppp && ppp < SDFV.EDGE_LOD)) {
             const topleft = this.topleft();
             ctx.strokeStyle = this.strokeStyle(renderer);
             ctx.fillStyle = ctx.strokeStyle;
@@ -460,7 +460,7 @@ export class ControlFlowRegion extends ControlFlowBlock {
         }
         clamped.w = clamped.x2 - clamped.x;
         clamped.h = clamped.y2 - clamped.y;
-        if (!(ctx as any).lod) {
+        if (!renderer.viewportOnly) {
             clamped = {
                 x: topleft.x,
                 y: topleft.y,
@@ -482,7 +482,7 @@ export class ControlFlowRegion extends ControlFlowBlock {
 
         // Only draw line if close enough.
         const ppp = renderer.get_canvas_manager()?.points_per_pixel();
-        if (!(ctx as any).lod || (ppp && ppp < SDFV.NODE_LOD))
+        if (!renderer.adaptiveHiding || (ppp && ppp < SDFV.NODE_LOD))
             ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
 
         ctx.fillStyle = this.getCssProperty(
@@ -491,8 +491,8 @@ export class ControlFlowRegion extends ControlFlowBlock {
 
         if (visibleRect && visibleRect.x <= topleft.x &&
             visibleRect.y <= topleft.y + SDFV.LINEHEIGHT &&
-            SDFVSettings.showStateNames) {
-            if (!too_far_away_for_text(renderer, ctx)) {
+            SDFVSettings.get<boolean>('showStateNames')) {
+            if (!too_far_away_for_text(renderer)) {
                 ctx.fillText(
                     this.label(), topleft.x + LoopRegion.META_LABEL_MARGIN,
                     topleft.y + SDFV.LINEHEIGHT
@@ -501,7 +501,7 @@ export class ControlFlowRegion extends ControlFlowBlock {
         }
 
         // If this state is selected or hovered
-        if (!(ctx as any).lod || (ppp && ppp < SDFV.NODE_LOD)) {
+        if (!renderer.adaptiveHiding || (ppp && ppp < SDFV.NODE_LOD)) {
             if ((this.selected || this.highlighted || this.hovered) &&
                 (clamped.x === topleft.x ||
                     clamped.y === topleft.y ||
@@ -615,7 +615,7 @@ export class State extends BasicBlock {
         }
         clamped.w = clamped.x2 - clamped.x;
         clamped.h = clamped.y2 - clamped.y;
-        if (!(ctx as any).lod) {
+        if (!renderer.viewportOnly) {
             clamped = {
                 x: topleft.x,
                 y: topleft.y,
@@ -636,8 +636,8 @@ export class State extends BasicBlock {
 
         if (visible_rect && visible_rect.x <= topleft.x &&
             visible_rect.y <= topleft.y + SDFV.LINEHEIGHT &&
-            SDFVSettings.showStateNames) {
-            if (!too_far_away_for_text(renderer, ctx)) {
+            SDFVSettings.get<boolean>('showStateNames')) {
+            if (!too_far_away_for_text(renderer)) {
                 ctx.fillText(
                     this.label(), topleft.x, topleft.y + SDFV.LINEHEIGHT
                 );
@@ -646,7 +646,7 @@ export class State extends BasicBlock {
 
         // If this state is selected or hovered
         const ppp = renderer.get_canvas_manager()?.points_per_pixel();
-        if (!(ctx as any).lod || (ppp && ppp < SDFV.NODE_LOD)) {
+        if (!renderer.adaptiveHiding || (ppp && ppp < SDFV.NODE_LOD)) {
             if ((this.selected || this.highlighted || this.hovered) &&
                 (clamped.x === topleft.x ||
                     clamped.y === topleft.y ||
@@ -685,25 +685,6 @@ export class State extends BasicBlock {
 
         if (mousepos && this.intersect(mousepos.x, mousepos.y))
             renderer.set_tooltip((c) => this.tooltip(c));
-
-        // Draw state name in center without contents (does not look good)
-        /*
-        let FONTSIZE = Math.min(
-            renderer.canvas_manager.points_per_pixel() * 16, 100
-        );
-        let label = this.label();
-
-        let oldfont = ctx.font;
-        ctx.font = FONTSIZE + "px Arial";
-
-        let textmetrics = ctx.measureText(label);
-        ctx.fillText(
-            label, this.x - textmetrics.width / 2.0,
-            this.y - this.height / 6.0 + FONTSIZE / 2.0
-        );
-
-        ctx.font = oldfont;
-        */
     }
 
     public shade(
@@ -801,7 +782,7 @@ export class LoopRegion extends ControlFlowRegion {
         }
         clamped.w = clamped.x2 - clamped.x;
         clamped.h = clamped.y2 - clamped.y;
-        if (!(ctx as any).lod) {
+        if (!renderer.viewportOnly) {
             clamped = {
                 x: topleft.x,
                 y: topleft.y,
@@ -823,7 +804,7 @@ export class LoopRegion extends ControlFlowRegion {
 
         // Only draw line if close enough.
         const ppp = renderer.get_canvas_manager()?.points_per_pixel();
-        if (!(ctx as any).lod || (ppp && ppp < SDFV.NODE_LOD))
+        if (!renderer.adaptiveHiding || (ppp && ppp < SDFV.NODE_LOD))
             ctx.strokeRect(clamped.x, clamped.y, clamped.w, clamped.h);
 
         ctx.fillStyle = this.getCssProperty(
@@ -843,7 +824,7 @@ export class LoopRegion extends ControlFlowRegion {
             ctx.lineTo(topleft.x + this.width, initBottomLineY);
             ctx.stroke();
 
-            if (!too_far_away_for_text(renderer, ctx)) {
+            if (!too_far_away_for_text(renderer)) {
                 ctx.font = LoopRegion.LOOP_STATEMENT_FONT;
                 const initStatement =
                     this.attributes().init_statement?.string_data;
@@ -885,7 +866,7 @@ export class LoopRegion extends ControlFlowRegion {
         ctx.stroke();
 
 
-        if (!too_far_away_for_text(renderer, ctx)) {
+        if (!too_far_away_for_text(renderer)) {
             ctx.font = LoopRegion.LOOP_STATEMENT_FONT;
             const condStatement = this.attributes().loop_condition?.string_data;
             const condTextY = (
@@ -915,7 +896,7 @@ export class LoopRegion extends ControlFlowRegion {
             ctx.stroke();
 
 
-            if (!too_far_away_for_text(renderer, ctx)) {
+            if (!too_far_away_for_text(renderer)) {
                 ctx.font = LoopRegion.LOOP_STATEMENT_FONT;
                 const updateStatement =
                     this.attributes().update_statement.string_data;
@@ -939,8 +920,8 @@ export class LoopRegion extends ControlFlowRegion {
 
         if (visibleRect && visibleRect.x <= topleft.x &&
             visibleRect.y <= topleft.y + SDFV.LINEHEIGHT &&
-            SDFVSettings.showStateNames) {
-            if (!too_far_away_for_text(renderer, ctx)) {
+            SDFVSettings.get<boolean>('showStateNames')) {
+            if (!too_far_away_for_text(renderer)) {
                 ctx.fillText(
                     this.label(), topleft.x + LoopRegion.META_LABEL_MARGIN,
                     topleft.y + topSpacing + SDFV.LINEHEIGHT
@@ -949,7 +930,7 @@ export class LoopRegion extends ControlFlowRegion {
         }
 
         // If this state is selected or hovered
-        if (!(ctx as any).lod || (ppp && ppp < SDFV.NODE_LOD)) {
+        if (!renderer.adaptiveHiding || (ppp && ppp < SDFV.NODE_LOD)) {
             if ((this.selected || this.highlighted || this.hovered) &&
                 (clamped.x === topleft.x ||
                     clamped.y === topleft.y ||
@@ -1016,7 +997,7 @@ export class SDFGNode extends SDFGElement {
         }
         clamped.w = clamped.x2 - clamped.x;
         clamped.h = clamped.y2 - clamped.y;
-        if (!(ctx as any).lod) {
+        if (!renderer.viewportOnly) {
             clamped = {
                 x: topleft.x,
                 y: topleft.y,
@@ -1032,7 +1013,7 @@ export class SDFGNode extends SDFGElement {
 
         // Only draw line if close enough to see it.
         const ppp = renderer.get_canvas_manager()?.points_per_pixel();
-        if (!(ctx as any).lod || (ppp && ppp < SDFV.NODE_LOD)) {
+        if (!renderer.adaptiveHiding || (ppp && ppp < SDFV.NODE_LOD)) {
             if (clamped.x === topleft.x &&
                 clamped.y === topleft.y &&
                 clamped.x2 === topleft.x + this.width &&
@@ -1042,7 +1023,7 @@ export class SDFGNode extends SDFGElement {
             }
         }
         if (this.label()) {
-            if (!too_far_away_for_text(renderer, ctx)) {
+            if (!too_far_away_for_text(renderer)) {
                 ctx.fillStyle = this.getCssProperty(renderer, fgstyle);
                 const textw = ctx.measureText(this.label()).width;
                 if (!visible_rect) {
@@ -1200,7 +1181,7 @@ export abstract class Edge extends SDFGElement {
     }
 
     public shade(
-        _renderer: SDFGRenderer, ctx: CanvasRenderingContext2D, color: string,
+        renderer: SDFGRenderer, ctx: CanvasRenderingContext2D, color: string,
         alpha: number = 0.4
     ): void {
         ctx.beginPath();
@@ -1224,9 +1205,9 @@ export abstract class Edge extends SDFGElement {
         if (this.points.length < 2)
             return;
 
-        const canvas_manager = _renderer.get_canvas_manager();
+        const canvas_manager = renderer.get_canvas_manager();
         const ppp = canvas_manager?.points_per_pixel();
-        if (!(ctx as any).lod || (ppp && ppp < SDFV.ARROW_LOD)) {
+        if (!renderer.adaptiveHiding || (ppp && ppp < SDFV.ARROW_LOD)) {
             this.drawArrow(ctx, this.points[this.points.length - 2],
                 this.points[this.points.length - 1], 3, 0, 4);
         }
@@ -1304,7 +1285,7 @@ export class Memlet extends Edge {
             ctx.lineTo(this.points[1].x, this.points[1].y);
         } else {
             let i;
-            if (SDFVSettings.curvedEdges) {
+            if (SDFVSettings.get<boolean>('curvedEdges')) {
                 for (i = 1; i < this.points.length - 2; i++) {
                     const xm = (this.points[i].x + this.points[i + 1].x) / 2.0;
                     const ym = (this.points[i].y + this.points[i + 1].y) / 2.0;
@@ -1365,7 +1346,7 @@ export class Memlet extends Edge {
         if (!skipArrow) {
             const canvas_manager = renderer.get_canvas_manager();
             const ppp = canvas_manager?.points_per_pixel();
-            if (!(ctx as any).lod || (ppp && ppp < SDFV.ARROW_LOD)) {
+            if (!renderer.adaptiveHiding || (ppp && ppp < SDFV.ARROW_LOD)) {
                 this.drawArrow(
                     ctx, this.points[this.points.length - 2],
                     this.points[this.points.length - 1], 3
@@ -1457,7 +1438,7 @@ export class InterstateEdge extends Edge {
         ctx.moveTo(this.points[0].x, this.points[0].y);
         let i;
 
-        if (SDFVSettings.curvedEdges) {
+        if (SDFVSettings.get<boolean>('curvedEdges')) {
             let lastX = this.points[0].x;
             let lastY = this.points[0].y;
             for (i = 1; i < this.points.length; i++) {
@@ -1487,7 +1468,7 @@ export class InterstateEdge extends Edge {
         // through arrow points rather than quadratic curves). As such, the
         // angle of the last line segment is different and needs to be
         // calculated differently.
-        if (!SDFVSettings.useVerticalStateMachineLayout) {
+        if (!SDFVSettings.get<boolean>('useVerticalStateMachineLayout')) {
             // This is not used if the 'old-style' layout is used.
             super.drawArrow(ctx, p1, p2, size, offset, padding);
         } else {
@@ -1542,14 +1523,14 @@ export class InterstateEdge extends Edge {
 
         const canvas_manager = renderer.get_canvas_manager();
         const ppp = canvas_manager?.points_per_pixel();
-        if (!(ctx as any).lod || (ppp && ppp < SDFV.ARROW_LOD)) {
+        if (!renderer.adaptiveHiding || (ppp && ppp < SDFV.ARROW_LOD)) {
             this.drawArrow(
                 ctx, this.points[this.points.length - 2],
                 this.points[this.points.length - 1], 3
             );
         }
 
-        if (SDFVSettings.alwaysOnISEdgeLabels)
+        if (SDFVSettings.get<boolean>('alwaysOnISEdgeLabels'))
             this.drawLabel(renderer, ctx);
 
         if (this.hovered)
@@ -1572,13 +1553,13 @@ export class InterstateEdge extends Edge {
         const ppp = renderer.get_canvas_manager()?.points_per_pixel();
         if (ppp === undefined)
             return;
-        if ((ctx as any).lod && ppp > SDFV.SCOPE_LOD)
+        if (renderer.adaptiveHiding && ppp > SDFV.SCOPE_LOD)
             return;
 
         const labelLines = [];
         if (this.attributes().assignments) {
             for (const k of Object.keys(this.attributes().assignments ?? []))
-                labelLines.push(k + ' 🡐 ' + this.attributes().assignments[k]);
+                labelLines.push(k + ' = ' + this.attributes().assignments[k]);
         }
         const cond = this.attributes().condition?.string_data;
         if (cond && cond !== '1' && cond !== 'true')
@@ -1853,7 +1834,7 @@ export class AccessNode extends SDFGNode {
         }
 
         // If we are far away, don't show the text
-        if (too_far_away_for_text(renderer, ctx))
+        if (too_far_away_for_text(renderer))
             return;
 
         const textmetrics = ctx.measureText(this.label());
@@ -1866,7 +1847,7 @@ export class AccessNode extends SDFGNode {
     public label(): string {
         const name = this.data.node.attributes.data;
         let lbl = name;
-        if (SDFVSettings.showDataDescriptorSizes) {
+        if (SDFVSettings.get<boolean>('showDataDescriptorSizes')) {
             const nodedesc = this.sdfg.attributes._arrays[name];
             if (nodedesc && nodedesc.attributes.shape)
                 lbl = ' ' + sdfg_property_to_string(nodedesc.attributes.shape);
@@ -1977,7 +1958,7 @@ export class ScopeNode extends SDFGNode {
         );
 
         // If we are far away, don't show the text
-        if (too_far_away_for_text(renderer, ctx))
+        if (too_far_away_for_text(renderer))
             return;
 
         drawAdaptiveText(
@@ -1987,7 +1968,7 @@ export class ScopeNode extends SDFGNode {
             SDFV.SCOPE_LOD
         );
 
-        if (SDFVSettings.showMapSchedules) {
+        if (SDFVSettings.get<boolean>('showMapSchedules')) {
             drawAdaptiveText(
                 ctx, renderer, '', this.schedule_label(), this.x, this.y,
                 this.width, this.height,
@@ -2417,11 +2398,11 @@ export class Tasklet extends SDFGNode {
         );
 
         // If we are far away, don't show the text
-        if (too_far_away_for_text(renderer, ctx))
+        if (too_far_away_for_text(renderer))
             return;
 
         const ppp = canvas_manager.points_per_pixel();
-        if (!(ctx as any).lod || ppp < SDFV.TASKLET_LOD) {
+        if (!renderer.adaptiveHiding || ppp < SDFV.TASKLET_LOD) {
             // If we are close to the tasklet, show its contents
             this.drawTaskletCode(renderer, ctx);
         } else {
@@ -2480,7 +2461,7 @@ export class Reduce extends SDFGNode {
             draw_shape();
         ctx.fill();
 
-        if (!too_far_away_for_text(renderer, ctx)) {
+        if (!too_far_away_for_text(renderer)) {
             ctx.fillStyle = this.getCssProperty(
                 renderer, '--node-foreground-color'
             );
@@ -2559,7 +2540,7 @@ export class NestedSDFG extends SDFGNode {
             ctx.fill();
 
 
-            if (!too_far_away_for_text(renderer, ctx)) {
+            if (!too_far_away_for_text(renderer)) {
                 ctx.fillStyle = this.getCssProperty(
                     renderer, '--node-foreground-color'
                 );
@@ -2585,7 +2566,7 @@ export class NestedSDFG extends SDFGNode {
                 drawSDFG(renderer, ctx, this.data.graph, mousepos);
             } else {
                 // Expanded, but no SDFG present or loaded yet.
-                if (!too_far_away_for_text(renderer, ctx)) {
+                if (!too_far_away_for_text(renderer)) {
                     const errColor = this.getCssProperty(
                         renderer, '--node-missing-background-color'
                     );
@@ -2701,7 +2682,7 @@ export class LibraryNode extends SDFGNode {
         );
 
         // If we are far away, don't show the text
-        if (too_far_away_for_text(renderer, ctx))
+        if (too_far_away_for_text(renderer))
             return;
 
         const textw = ctx.measureText(this.label()).width;
@@ -2737,12 +2718,12 @@ export class LibraryNode extends SDFGNode {
 // Points-per-Pixel. Used before ctx.fillText calls to only draw text when
 // zoomed in close enough.
 function too_far_away_for_text(
-    renderer: SDFGRenderer, ctx: CanvasRenderingContext2D
+    renderer: SDFGRenderer
 ): boolean {
     const canvas_manager = renderer.get_canvas_manager();
     const ppp = canvas_manager?.points_per_pixel();
     if (ppp) {
-        if ((ctx as any).lod && ppp > SDFV.TEXT_LOD)
+        if (renderer.adaptiveHiding && ppp > SDFV.TEXT_LOD)
             return true;
         else
             return false;
@@ -2781,7 +2762,7 @@ function batchedDrawEdges(
     ctx.beginPath();
     graph.edges().forEach((e: any) => {
         const edge: Edge = (graph.edge(e) as Edge);
-        if ((ctx as any).lod && visible_rect && !edge.intersect(
+        if (renderer.viewportOnly && visible_rect && !edge.intersect(
             visible_rect.x, visible_rect.y, visible_rect.w, visible_rect.h
         ))
             return;
@@ -2828,7 +2809,7 @@ function batchedDrawEdges(
     // Only draw Arrowheads when close enough to see them
     const canvas_manager = renderer.get_canvas_manager();
     const ppp = canvas_manager?.points_per_pixel();
-    if (!(ctx as any).lod || (ppp && ppp < SDFV.ARROW_LOD)) {
+    if (!renderer.adaptiveHiding || (ppp && ppp < SDFV.ARROW_LOD)) {
         arrowEdges.forEach(e => {
             e.drawArrow(
                 ctx,
@@ -2857,13 +2838,13 @@ function batchedDrawEdges(
 
 export function drawStateContents(
     stateGraph: DagreGraph, ctx: CanvasRenderingContext2D,
-    renderer: SDFGRenderer, ppp: number, lod?: boolean,
-    visibleRect?: SimpleRect, mousePos?: Point2D
+    renderer: SDFGRenderer, ppp: number, visibleRect?: SimpleRect,
+    mousePos?: Point2D
 ): void {
     for (const nodeId of stateGraph.nodes()) {
         const node = stateGraph.node(nodeId);
 
-        if (lod && visibleRect && !node.intersect(
+        if (renderer.viewportOnly && visibleRect && !node.intersect(
             visibleRect.x, visibleRect.y, visibleRect.w, visibleRect.h
         ))
             continue;
@@ -2872,14 +2853,14 @@ export function drawStateContents(
         if (node instanceof NestedSDFG &&
             !node.data.node.attributes.is_collapsed) {
             const nodeppp = Math.sqrt(node.width * node.height) / ppp;
-            if (lod && nodeppp < SDFV.STATE_LOD) {
+            if (renderer.adaptiveHiding && nodeppp < SDFV.STATE_LOD) {
                 node.simple_draw(renderer, ctx, mousePos);
                 node.debug_draw(renderer, ctx);
                 continue;
             }
         } else {
             // Simple draw node
-            if (lod && ppp > SDFV.NODE_LOD) {
+            if (renderer.adaptiveHiding && ppp > SDFV.NODE_LOD) {
                 node.simple_draw(renderer, ctx, mousePos);
                 node.debug_draw(renderer, ctx);
                 continue;
@@ -2890,7 +2871,7 @@ export function drawStateContents(
         node.debug_draw(renderer, ctx);
 
         // Only draw connectors when close enough to see them
-        if (!lod || ppp < SDFV.CONNECTOR_LOD) {
+        if (!renderer.adaptiveHiding || ppp < SDFV.CONNECTOR_LOD) {
             node.in_connectors.forEach((c: Connector) => {
                 // Only draw connectors if actually visible. This is needed for
                 // large nodes in the background like NestedSDFGs, that are
@@ -2931,7 +2912,7 @@ export function drawStateContents(
         }
     }
 
-    if (lod && ppp > SDFV.EDGE_LOD)
+    if (renderer.adaptiveHiding && ppp > SDFV.EDGE_LOD)
         return;
 
     batchedDrawEdges(
@@ -2942,13 +2923,14 @@ export function drawStateContents(
 
 export function drawStateMachine(
     stateMachineGraph: DagreGraph, ctx: CanvasRenderingContext2D,
-    renderer: SDFGRenderer, ppp: number, lod?: boolean,
-    visibleRect?: SimpleRect, mousePos?: Point2D
+    renderer: SDFGRenderer, ppp: number, visibleRect?: SimpleRect,
+    mousePos?: Point2D
 ): void {
-    if (!lod || ppp < SDFV.EDGE_LOD) {
+    if (!renderer.adaptiveHiding || ppp < SDFV.EDGE_LOD) {
         batchedDrawEdges(
             renderer, stateMachineGraph, ctx, visibleRect, mousePos,
-            '--interstate-edge-color', SDFVSettings.alwaysOnISEdgeLabels
+            '--interstate-edge-color',
+            SDFVSettings.get<boolean>('alwaysOnISEdgeLabels')
         );
     }
 
@@ -2956,13 +2938,13 @@ export function drawStateMachine(
         const block = stateMachineGraph.node(nodeId);
 
         // Skip invisible states.
-        if (lod && visibleRect && !block.intersect(
+        if (renderer.viewportOnly && visibleRect && !block.intersect(
             visibleRect.x, visibleRect.y, visibleRect.w, visibleRect.h
         ))
             continue;
 
         const blockppp = Math.sqrt(block.width * block.height) / ppp;
-        if (lod && blockppp < SDFV.STATE_LOD) {
+        if (renderer.adaptiveHiding && blockppp < SDFV.STATE_LOD) {
             block.simple_draw(renderer, ctx, mousePos);
             block.debug_draw(renderer, ctx);
             continue;
@@ -2975,11 +2957,11 @@ export function drawStateMachine(
         if (!block.attributes().is_collapsed && ng) {
             if (block instanceof State) {
                 drawStateContents(
-                    ng, ctx, renderer, ppp, lod, visibleRect, mousePos
+                    ng, ctx, renderer, ppp, visibleRect, mousePos
                 );
             } else {
                 drawStateMachine(
-                    ng, ctx, renderer, ppp, lod, visibleRect, mousePos
+                    ng, ctx, renderer, ppp, visibleRect, mousePos
                 );
             }
         }
@@ -2997,9 +2979,7 @@ export function drawSDFG(
     const ppp = cManager.points_per_pixel();
     const visibleRect = renderer.get_visible_rect() ?? undefined;
 
-    drawStateMachine(
-        g, ctx, renderer, ppp, (ctx as any).lod, visibleRect, mousePos
-    );
+    drawStateMachine(g, ctx, renderer, ppp, visibleRect, mousePos);
 }
 
 // Translate an SDFG by a given offset
@@ -3116,7 +3096,7 @@ export function drawAdaptiveText(
     if (ppp === undefined)
         return;
 
-    const is_far: boolean = (ctx as any).lod && ppp > ppp_thres;
+    const is_far: boolean = renderer.adaptiveHiding && ppp > ppp_thres;
     const label = is_far ? far_text : close_text;
 
     let font_size = Math.min(
diff --git a/src/sdfv.ts b/src/sdfv.ts
index d0ada346..61bb3ae5 100644
--- a/src/sdfv.ts
+++ b/src/sdfv.ts
@@ -169,9 +169,9 @@ export class SDFV {
         const d = document.createElement('div');
         d.className = 'context_menu_option';
         d.innerHTML = htmlSanitize`
-            <i class="material-icons" style="font-size: inherit">
+            <span class="material-symbols-outlined" style="font-size: inherit">
                 filter_center_focus
-            </i> SDFG ${renderer.get_sdfg().attributes.name}
+            </span> SDFG ${renderer.get_sdfg().attributes.name}
         `;
         d.onclick = () => renderer.zoom_to_view();
         sidebar.appendChild(d);
@@ -196,7 +196,7 @@ export class SDFV {
 
             // If a scope has children, remove the name "Entry" from the type
             if (node.type().endsWith('Entry') && node.parent_id && node.id) {
-                const state = node.parentElem?.data.state.nodes[node.parent_id];
+                const state = node.parentElem?.data.state;
                 if (state.scope_dict[node.id] !== undefined)
                     node_type = node_type.slice(0, -5);
             }
@@ -271,7 +271,7 @@ export class SDFV {
             });
             btnContainer.append($('<button>', {
                 text: 'Jump to start',
-                class: 'btn btn-sm btn-light btn-sdfv-light',
+                class: 'btn btn-sm btn-secondary',
                 css: {
                     'margin-right': '10px',
                 },
@@ -281,7 +281,7 @@ export class SDFV {
             }));
             btnContainer.append($('<button>', {
                 text: 'Jump to end',
-                class: 'btn btn-sm btn-light btn-sdfv-light',
+                class: 'btn btn-sm btn-secondary',
                 click: () => {
                     elem.setViewToDestination(this.get_renderer()!);
                 },
@@ -948,15 +948,15 @@ $(() => {
     // or URL parameters.
     const isEmbedded = document.getElementById('embedded') !== null;
     if (isEmbedded) {
-        SDFVSettings.setDefault('toolbar', false);
-        SDFVSettings.setDefault('minimap', false);
+        SDFVSettings.set<boolean>('toolbar', false);
+        SDFVSettings.set<boolean>('minimap', false);
     }
 
     // Check if any of the remaining settings are provided via the URL.
     for (const key of SDFVSettings.settingsKeys) {
         const overrideVal = settingReadDefault(key, undefined);
         if (overrideVal !== undefined)
-            SDFVSettings.setDefault(key, overrideVal);
+            SDFVSettings.set(key, overrideVal);
     }
 
     let sdfv = new SDFV();
diff --git a/src/settings_manifest.json b/src/settings_manifest.json
new file mode 100644
index 00000000..e674735d
--- /dev/null
+++ b/src/settings_manifest.json
@@ -0,0 +1,112 @@
+{
+    "viewerSettings": {
+        "categories": {
+            "view": {
+                "label": "View",
+                "settings": {
+                    "curvedEdges": {
+                        "label": "Draw curved edges (turn this off if you are experiencing performance issues)",
+                        "type": "boolean",
+                        "default": true
+                    },
+                    "toolbar": {
+                        "label": "Show toolbar",
+                        "type": "boolean",
+                        "default": true,
+                        "hidden": true
+                    },
+                    "minimap": {
+                        "label": "Show minimap",
+                        "type": "boolean",
+                        "default": true,
+                        "redrawUI": true
+                    },
+                    "alwaysOnISEdgeLabels": {
+                        "label": "Always show interstate edge labels",
+                        "type": "boolean",
+                        "default": true
+                    },
+                    "showAccessNodes": {
+                        "label": "Show access nodes",
+                        "type": "boolean",
+                        "default": true,
+                        "relayout": true
+                    },
+                    "showStateNames": {
+                        "label": "Show state names",
+                        "type": "boolean",
+                        "default": true
+                    },
+                    "showMapSchedules": {
+                        "label": "Show scope schedules",
+                        "type": "boolean",
+                        "default": true
+                    },
+                    "showDataDescriptorSizes": {
+                        "label": "Show data descriptor sizes on access nodes (hides data container names)",
+                        "type": "boolean",
+                        "default": false,
+                        "relayout": true
+                    },
+                    "inclusiveRanges": {
+                        "label": "Use inclusive ranges",
+                        "type": "boolean",
+                        "default": false,
+                        "relayout": true
+                    },
+                    "useVerticalStateMachineLayout": {
+                        "label": "Use vertical state machine layout",
+                        "type": "boolean",
+                        "default": true,
+                        "relayout": true
+                    },
+                    "ranksep": {
+                        "label": "Vertical node spacing",
+                        "type": "range",
+                        "default": 30,
+                        "minimum": 10,
+                        "maximum": 100,
+                        "step": 1,
+                        "relayout": true
+                    },
+                    "nodesep": {
+                        "label": "Horizontal node spacing",
+                        "type": "range",
+                        "default": 50,
+                        "minimum": 0,
+                        "maximum": 100,
+                        "step": 1,
+                        "relayout": true
+                    }
+                }
+            },
+            "mouse": {
+                "label": "Mouse",
+                "settings": {
+                    "useVerticalScrollNavigation": {
+                        "label": "Use vertical scroll navigation (binds zoom to Ctrl + scroll)",
+                        "type": "boolean",
+                        "default": false
+                    }
+                }
+            },
+            "performance": {
+                "label": "Performance",
+                "settings": {
+                    "adaptiveContentHiding": {
+                        "label": "Adaptively hide content when zooming out (Warning: turning this off can cause performance issues on large graphs)",
+                        "type": "boolean",
+                        "default": true
+                    },
+                    "summarizeLargeNumbersOfEdges": {
+                        "id": "summarizeLargeNumbersOfEdges",
+                        "label": "Hide and summarize edges for nodes with more than 10 incoming or outgoing edges",
+                        "type": "boolean",
+                        "default": false,
+                        "relayout": true
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/utils/sdfg/sdfg_utils.ts b/src/utils/sdfg/sdfg_utils.ts
index 16154a12..3a16d650 100644
--- a/src/utils/sdfg/sdfg_utils.ts
+++ b/src/utils/sdfg/sdfg_utils.ts
@@ -2,7 +2,6 @@
 
 import {
     CFGListType,
-    DagreGraph,
     JsonSDFGBlock,
     JsonSDFGControlFlowRegion,
     JsonSDFGEdge,
@@ -107,7 +106,7 @@ export function check_and_redirect_edge(
 }
 
 export function findGraphElementByUUID(
-    cfgList: CFGListType, cfgTree: { [key: number]: number },  uuid: string
+    cfgList: CFGListType, uuid: string
 ): SDFGElement | null {
     const uuidParts = uuid.split('/');
 
@@ -119,7 +118,8 @@ export function findGraphElementByUUID(
     if (!(cfgId in cfgList))
         return null;
 
-    const graph = cfgList[cfgId].graph;
+    const cfgListItem = cfgList[cfgId];
+    const graph = cfgListItem.graph;
     if (graph) {
         let state = null;
         if (stateId !== '-1')
@@ -139,13 +139,7 @@ export function findGraphElementByUUID(
             return state;
     }
 
-    const parentCfgId = cfgTree[Number(cfgId)];
-    if (parentCfgId === undefined || parentCfgId === null)
-        return null;
-    const parentCfg = cfgList[parentCfgId].graph;
-    if (!parentCfg)
-        return null;
-    return parentCfg.node(cfgList[cfgId].jsonObj.id.toString()) ?? null;
+    return cfgListItem.nsdfgNode;
 }
 
 /**
diff --git a/src/utils/sdfv_settings.ts b/src/utils/sdfv_settings.ts
index 6bce5501..be97a5fc 100644
--- a/src/utils/sdfv_settings.ts
+++ b/src/utils/sdfv_settings.ts
@@ -6,21 +6,58 @@ import {
     Modal,
 } from 'bootstrap';
 import { SDFGRenderer } from '../renderer/renderer';
+import * as settingsManifest from '../settings_manifest.json';
+import { AllFields } from './utils';
+
+export type SDFVSettingValT = boolean | string | number | null;
+
+export type SDFVSettingCategories = keyof (
+    typeof settingsManifest.viewerSettings.categories
+);
+export type SDFVSettingKey = keyof AllFields<
+    typeof settingsManifest.viewerSettings.categories[
+        SDFVSettingCategories
+    ]['settings']
+>;
+
+interface SDFVSetting {
+    label: string;
+    hidden?: boolean;
+    relayout?: boolean;
+    redrawUI?: boolean;
+    redraw?: boolean;
+}
 
-type RangeT = {
-    value: number,
-    min?: number,
-    max?: number,
-};
+interface SDFVSettingBoolean extends SDFVSetting {
+    type: 'boolean';
+    default: boolean;
+}
 
-export type SDFVSettingValT = boolean | string | number | RangeT;
+interface SDFVSettingRange extends SDFVSetting {
+    type: 'range';
+    default: number;
+    min?: number;
+    max?: number;
+    step?: number;
+}
 
 export class SDFVSettings {
 
+    private readonly _settingsDict: Map<
+        SDFVSettingKey, SDFVSettingValT
+    > = new Map();
+
     private static readonly INSTANCE: SDFVSettings = new SDFVSettings();
 
     private constructor() {
-        // Noop
+        const categories = settingsManifest.viewerSettings.categories;
+        for (const category of Object.values(categories)) {
+            for (const [sName, setting] of Object.entries(category.settings)) {
+                this._settingsDict.set(
+                    sName as SDFVSettingKey, setting.default
+                );
+            }
+        }
     }
 
     public static getInstance(): SDFVSettings {
@@ -30,37 +67,9 @@ export class SDFVSettings {
     private modal: Modal | null = null;
     private renderer: SDFGRenderer | null = null;
 
-    private readonly settingsDict: Record<string, SDFVSettingValT> = {
-        // User modifiable settings fields.
-        'minimap': true,
-        'alwaysOnISEdgeLabels': true,
-        'showAccessNodes': true,
-        'showStateNames': true,
-        'showMapSchedules': true,
-        'showDataDescriptorSizes': false,
-        'summarizeLargeNumbersOfEdges': false,
-        'inclusiveRanges': false,
-        'useVerticalStateMachineLayout': false,
-        'useVerticalScrollNavigation': false,
-        'adaptiveContentHiding': true,
-        'curvedEdges': true,
-        'ranksep': {
-            value: 30,
-            min: 10,
-            max: 100,
-        },
-        'nodesep': {
-            value: 50,
-            min: 0,
-            max: 100,
-        },
-        // Hidden settings fields.
-        'toolbar': true,
-    };
-
     private addSlider(
-        root: JQuery<HTMLElement>, label: string, valueKey: string,
-        requiresRelayout: boolean = false, customCallback?: CallableFunction
+        root: JQuery<HTMLElement>, key: SDFVSettingKey,
+        setting: SDFVSettingRange
     ): void {
         const settingRow = $('<div>', {
             class: 'row',
@@ -70,30 +79,28 @@ export class SDFVSettings {
         }).appendTo(settingRow);
         $('<label>', {
             class: 'form-label',
-            text: label,
+            text: setting.label,
         }).appendTo(settingContainer);
-        const settingsEntry = this.settingsDict[valueKey] as RangeT;
         const input = $('<input>', {
             class: 'form-range',
             type: 'range',
-            value: settingsEntry.value,
-            min: settingsEntry.min ?? 0,
-            max: settingsEntry.max ?? 100,
+            value: this._settingsDict.get(key),
+            min: setting.min ?? 0,
+            max: setting.max ?? 100,
+            step: setting.step ?? 1,
             change: () => {
                 const nVal = input.val();
                 if (nVal !== undefined) {
-                    settingsEntry.value = +nVal;
-                    if (customCallback)
-                        customCallback(settingsEntry);
-                    this.onSettingsChanged(requiresRelayout);
+                    this._settingsDict.set(key, +nVal);
+                    this.onSettingChanged(setting);
                 }
             },
         }).appendTo(settingContainer);
     }
 
     private addToggle(
-        root: JQuery<HTMLElement>, label: string, valueKey: string,
-        requiresRelayout: boolean = false, customCallback?: CallableFunction
+        root: JQuery<HTMLElement>, key: SDFVSettingKey,
+        setting: SDFVSettingBoolean
     ): void {
         const settingRow = $('<div>', {
             class: 'row',
@@ -107,17 +114,15 @@ export class SDFVSettings {
         const input = $('<input>', {
             class: 'form-check-input',
             type: 'checkbox',
-            checked: this.settingsDict[valueKey],
+            checked: this._settingsDict.get(key),
             change: () => {
-                this.settingsDict[valueKey] = input.prop('checked');
-                if (customCallback)
-                    customCallback(this.settingsDict[valueKey]);
-                this.onSettingsChanged(requiresRelayout);
+                this._settingsDict.set(key, input.prop('checked'));
+                this.onSettingChanged(setting);
             },
         }).appendTo(checkContainer);
         $('<label>', {
             class: 'form-check-label',
-            text: label,
+            text: setting.label,
         }).appendTo(checkContainer);
     }
 
@@ -151,81 +156,33 @@ export class SDFVSettings {
     }
 
     private constructSettings(root: JQuery<HTMLElement>): void {
-        // ---------------------------
-        // - View / Drawing Settings -
-        // ---------------------------
-        const viewGroup = this.addSettingsGroup(
-            root, 'View Settings', 'viewSettings', true
-        );
-        this.addToggle(
-            viewGroup,
-            'Show minimap', 'minimap', false, (value: boolean) => {
-                if (value)
-                    this.renderer?.enableMinimap();
-                else
-                    this.renderer?.disableMinimap();
-            }
-        );
-        this.addToggle(
-            viewGroup,
-            'Always show interstate edge labels', 'alwaysOnISEdgeLabels',
-            true
-        );
-        this.addToggle(viewGroup, 'Show access nodes', 'showAccessNodes', true);
-        this.addToggle(viewGroup, 'Show state names', 'showStateNames');
-        this.addToggle(viewGroup, 'Show map schedules', 'showMapSchedules');
-        this.addToggle(
-            viewGroup,
-            'Show data descriptor sizes on access nodes ' +
-            '(hides data container names)',
-            'showDataDescriptorSizes', true
-        );
-        this.addToggle(
-            viewGroup, 'Use inclusive ranges', 'inclusiveRanges', true
-        );
-        this.addToggle(
-            viewGroup, 'Use vertical state machine layout',
-            'useVerticalStateMachineLayout', true
-        );
-        this.addSlider(viewGroup, 'Vertical node spacing', 'ranksep', true);
-        this.addSlider(viewGroup, 'Horizontal node spacing', 'nodesep', true);
-
-        // ------------------
-        // - Mouse Settings -
-        // ------------------
-        const mouseGroup = this.addSettingsGroup(
-            root, 'Mouse Settings', 'mouseSettings'
-        );
-        this.addToggle(
-            mouseGroup, 'Use vertical scroll navigation',
-            'useVerticalScrollNavigation', false
-        );
-
-        // ------------------------
-        // - Performance Settings -
-        // ------------------------
-        const perfGroup = this.addSettingsGroup(
-            root, 'Performance Settings', 'performanceSettings'
-        );
-        this.addToggle(
-            perfGroup,
-            'Adaptively hide content when zooming out (Warning: turning this \
-                off can cause performance issues on big graphs)',
-            'adaptiveContentHiding', false, (value: boolean) => {
-                if (this.renderer)
-                    (this.renderer.get_context() as any).lod = value;
+        let first = true;
+        const categories = settingsManifest.viewerSettings.categories;
+        for (const [cName, category] of Object.entries(categories)) {
+            const catContainer = this.addSettingsGroup(
+                root, category.label, cName, first
+            );
+            first = false;
+            for (const [sName, setting] of Object.entries(category.settings)) {
+                if ((setting as SDFVSetting).hidden)
+                    continue;
+
+                switch (setting.type) {
+                    case 'boolean':
+                        this.addToggle(
+                            catContainer, sName as SDFVSettingKey,
+                            setting as SDFVSettingBoolean
+                        );
+                        break;
+                    case 'range':
+                        this.addSlider(
+                            catContainer, sName as SDFVSettingKey,
+                            setting as SDFVSettingRange
+                        );
+                        break;
+                }
             }
-        );
-        this.addToggle(
-            perfGroup, 'Curved Edges (turn off in case of performance issues)',
-            'curvedEdges', false
-        );
-        this.addToggle(
-            perfGroup,
-            'Hide / summarize edges for nodes where a large number of ' +
-                'edges are connected',
-            'summarizeLargeNumbersOfEdges', true
-        );
+        }
     }
 
     private constructModal(): JQuery<HTMLElement> {
@@ -261,38 +218,37 @@ export class SDFVSettings {
 
         const modalBody = $('<div>', {
             class: 'modal-body',
+            css: {
+                padding: 0,
+            },
         }).appendTo(modalContents);
 
         const container = $('<div>', {
-            class: 'accordion',
+            class: 'accordion accordion-flush',
             id: 'SDFVSettingsAccordion',
         }).appendTo(modalBody);
         this.constructSettings(container);
 
-        // Construct the modal footer.
-        $('<div>', {
-            class: 'modal-footer',
-        }).appendTo(modalContents).append($('<button>', {
-            type: 'button',
-            class: 'btn btn-secondary',
-            text: 'Close',
-            'data-bs-dismiss': 'modal',
-        }));
-
         return modalElement;
     }
 
-    private onSettingsChanged(relayout: boolean): void {
-        if (relayout) {
+    private onSettingChanged(setting: SDFVSetting): void {
+        if (setting.relayout) {
             this.renderer?.add_loading_animation();
             setTimeout(() => {
                 this.renderer?.relayout();
+                this.renderer?.draw_async();
             }, 10);
         }
-        this.renderer?.draw_async();
+
+        if (setting.redrawUI)
+            this.renderer?.initUI();
+
+        if (setting.redraw !== false && !setting.relayout)
+            this.renderer?.draw_async();
 
         if (this.renderer?.get_in_vscode())
-            this.renderer.emit('settings_changed', this.settingsDict);
+            this.renderer.emit('settings_changed', SDFVSettings.settingsDict);
     }
 
     public show(renderer?: SDFGRenderer): void {
@@ -316,94 +272,27 @@ export class SDFVSettings {
             this.modal.toggle();
     }
 
-    public static get settingsKeys(): string[] {
-        return Object.keys(SDFVSettings.getInstance().settingsDict);
-    }
-
-    public static setDefault(setting: string, def: any): void {
-        SDFVSettings.getInstance().settingsDict[setting] = def;
-    }
-
-    public static get toolbar(): boolean {
-        return SDFVSettings.getInstance().settingsDict['toolbar'] as boolean;
-    }
-
-    public static get minimap(): boolean {
-        return SDFVSettings.getInstance().settingsDict['minimap'] as boolean;
-    }
-
-    public static get alwaysOnISEdgeLabels(): boolean {
-        return SDFVSettings.getInstance().settingsDict[
-            'alwaysOnISEdgeLabels'
-        ] as boolean;
-    }
-
-    public static get showAccessNodes(): boolean {
-        return SDFVSettings.getInstance().settingsDict[
-            'showAccessNodes'
-        ] as boolean;
-    }
-
-    public static get inclusiveRanges(): boolean {
-        return SDFVSettings.getInstance().settingsDict[
-            'inclusiveRanges'
-        ] as boolean;
-    }
-
-    public static get adaptiveContentHiding(): boolean {
-        return SDFVSettings.getInstance().settingsDict[
-            'adaptiveContentHiding'
-        ] as boolean;
-    }
-
-    public static get showStateNames(): boolean {
-        return SDFVSettings.getInstance().settingsDict[
-            'showStateNames'
-        ] as boolean;
-    }
-
-    public static get showMapSchedules(): boolean {
-        return SDFVSettings.getInstance().settingsDict[
-            'showMapSchedules'
-        ] as boolean;
-    }
-
-    public static get showDataDescriptorSizes(): boolean {
-        return SDFVSettings.getInstance().settingsDict[
-            'showDataDescriptorSizes'
-        ] as boolean;
-    }
-
-    public static get summarizeLargeNumbersOfEdges(): boolean {
-        return SDFVSettings.getInstance().settingsDict[
-            'summarizeLargeNumbersOfEdges'
-        ] as boolean;
-    }
-
-    public static get useVerticalStateMachineLayout(): boolean {
-        return this.getInstance().settingsDict[
-            'useVerticalStateMachineLayout'
-        ] as boolean;
-    }
-
-    public static get useVerticalScrollNavigation(): boolean {
-        return this.getInstance().settingsDict[
-            'useVerticalScrollNavigation'
-        ] as boolean;
+    public static get settingsKeys(): SDFVSettingKey[] {
+        return Array.from(SDFVSettings.getInstance()._settingsDict.keys());
     }
 
-    public static get curvedEdges(): boolean {
-        return this.getInstance().settingsDict[
-            'curvedEdges'
-        ] as boolean;
+    public static get settingsDict(
+    ): ReadonlyMap<SDFVSettingKey, SDFVSettingValT> {
+        return SDFVSettings.getInstance()._settingsDict;
     }
 
-    public static get ranksep(): number {
-        return (this.getInstance().settingsDict['ranksep'] as RangeT).value;
+    public static set<T extends SDFVSettingValT>(
+        key: SDFVSettingKey, value: T
+    ) {
+        if (!SDFVSettings.getInstance()._settingsDict.has(key))
+            throw Error('Key error, key ' + key + ' not in settings');
+        SDFVSettings.getInstance()._settingsDict.set(key, value);
     }
 
-    public static get nodesep(): number {
-        return (this.getInstance().settingsDict['nodesep'] as RangeT).value;
+    public static get<T extends SDFVSettingValT>(key: SDFVSettingKey): T {
+        if (!SDFVSettings.getInstance()._settingsDict.has(key))
+            throw Error('Key error, key ' + key + ' not in settings');
+        return SDFVSettings.getInstance()._settingsDict.get(key)! as T;
     }
 
 }
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index e2f64cc5..ce5622c5 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -1,12 +1,5 @@
 // Copyright 2019-2024 ETH Zurich and the DaCe authors. All rights reserved.
 
-import {
-    MapExit,
-    NestedSDFG,
-    SDFGElement,
-    SDFGNode,
-    State,
-} from '../renderer/renderer_elements';
 import { Point2D } from '..';
 import { rgb2hex } from '@pixi/utils';
 import $ from 'jquery';
@@ -216,7 +209,7 @@ export function showErrorModal(message: string, title: string = 'Error'): void {
     }).appendTo(header);
     $('<div>', {
         class: 'modal_close',
-        html: '<i class="material-icons">close</i>',
+        html: '<i class="material-symbols-outlined">close</i>',
         click: () => errModalBg.remove(),
     }).appendTo(header);
 
@@ -231,3 +224,14 @@ export function showErrorModal(message: string, title: string = 'Error'): void {
     }).appendTo(content);
     errModalBg.show();
 }
+
+// A utility type to create a single type from a discriminate union of types.
+type UnionToIntersection<U> =
+    (U extends any ? (k: U) => void : never) extends (
+        (k: infer I) => void
+    ) ? I : never;
+
+type Indexify<T> = T & { [str: string]: undefined; };
+type UndefinedVals<T> = { [K in keyof T]: undefined };
+type AllUnionKeys<T> = keyof UnionToIntersection<UndefinedVals<T>>;
+export type AllFields<T> = { [K in AllUnionKeys<T> & string]: Indexify<T>[K] };
diff --git a/tsconfig.json b/tsconfig.json
index 0388522f..5fdcb048 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -8,6 +8,7 @@
         "skipLibCheck": true,
         "forceConsistentCasingInFileNames": true,
         "moduleResolution": "node",
+        "resolveJsonModule": true,
         "allowJs": true,
         "checkJs": false,
         "sourceMap": true,
