diff --git a/electron/package-lock.json b/electron/package-lock.json
index 55457f2f..b178ac0f 100644
--- a/electron/package-lock.json
+++ b/electron/package-lock.json
@@ -30,7 +30,6 @@
         "babel-plugin-react-compiler": "^19.0.0-beta-714736e-20250131",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
-        "d3": "^7.9.0",
         "electron-squirrel-startup": "^1.0.1",
         "i18next": "^25.0.2",
         "immer": "^10.1.1",
@@ -69,7 +68,6 @@
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^14.6.1",
-        "@types/d3": "^7.4.3",
         "@types/electron-squirrel-startup": "^1.0.2",
         "@types/eslint-config-prettier": "^6.11.3",
         "@types/node": "^22.13.4",
@@ -4592,259 +4590,6 @@
         "@types/responselike": "^1.0.0"
       }
     },
-    "node_modules/@types/d3": {
-      "version": "7.4.3",
-      "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
-      "integrity": "sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==",
-      "dev": true,
-      "dependencies": {
-        "@types/d3-array": "*",
-        "@types/d3-axis": "*",
-        "@types/d3-brush": "*",
-        "@types/d3-chord": "*",
-        "@types/d3-color": "*",
-        "@types/d3-contour": "*",
-        "@types/d3-delaunay": "*",
-        "@types/d3-dispatch": "*",
-        "@types/d3-drag": "*",
-        "@types/d3-dsv": "*",
-        "@types/d3-ease": "*",
-        "@types/d3-fetch": "*",
-        "@types/d3-force": "*",
-        "@types/d3-format": "*",
-        "@types/d3-geo": "*",
-        "@types/d3-hierarchy": "*",
-        "@types/d3-interpolate": "*",
-        "@types/d3-path": "*",
-        "@types/d3-polygon": "*",
-        "@types/d3-quadtree": "*",
-        "@types/d3-random": "*",
-        "@types/d3-scale": "*",
-        "@types/d3-scale-chromatic": "*",
-        "@types/d3-selection": "*",
-        "@types/d3-shape": "*",
-        "@types/d3-time": "*",
-        "@types/d3-time-format": "*",
-        "@types/d3-timer": "*",
-        "@types/d3-transition": "*",
-        "@types/d3-zoom": "*"
-      }
-    },
-    "node_modules/@types/d3-array": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
-      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
-      "dev": true
-    },
-    "node_modules/@types/d3-axis": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.6.tgz",
-      "integrity": "sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==",
-      "dev": true,
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-brush": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.6.tgz",
-      "integrity": "sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==",
-      "dev": true,
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-chord": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.6.tgz",
-      "integrity": "sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==",
-      "dev": true
-    },
-    "node_modules/@types/d3-color": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
-      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
-      "dev": true
-    },
-    "node_modules/@types/d3-contour": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.6.tgz",
-      "integrity": "sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==",
-      "dev": true,
-      "dependencies": {
-        "@types/d3-array": "*",
-        "@types/geojson": "*"
-      }
-    },
-    "node_modules/@types/d3-delaunay": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
-      "integrity": "sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==",
-      "dev": true
-    },
-    "node_modules/@types/d3-dispatch": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz",
-      "integrity": "sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==",
-      "dev": true
-    },
-    "node_modules/@types/d3-drag": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.7.tgz",
-      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-dsv": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.7.tgz",
-      "integrity": "sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==",
-      "dev": true
-    },
-    "node_modules/@types/d3-ease": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
-      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
-      "dev": true
-    },
-    "node_modules/@types/d3-fetch": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.7.tgz",
-      "integrity": "sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==",
-      "dev": true,
-      "dependencies": {
-        "@types/d3-dsv": "*"
-      }
-    },
-    "node_modules/@types/d3-force": {
-      "version": "3.0.10",
-      "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.10.tgz",
-      "integrity": "sha512-ZYeSaCF3p73RdOKcjj+swRlZfnYpK1EbaDiYICEEp5Q6sUiqFaFQ9qgoshp5CzIyyb/yD09kD9o2zEltCexlgw==",
-      "dev": true
-    },
-    "node_modules/@types/d3-format": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.4.tgz",
-      "integrity": "sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==",
-      "dev": true
-    },
-    "node_modules/@types/d3-geo": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.1.0.tgz",
-      "integrity": "sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/geojson": "*"
-      }
-    },
-    "node_modules/@types/d3-hierarchy": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.7.tgz",
-      "integrity": "sha512-tJFtNoYBtRtkNysX1Xq4sxtjK8YgoWUNpIiUee0/jHGRwqvzYxkq0hGVbbOGSz+JgFxxRu4K8nb3YpG3CMARtg==",
-      "dev": true
-    },
-    "node_modules/@types/d3-interpolate": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
-      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
-      "dev": true,
-      "dependencies": {
-        "@types/d3-color": "*"
-      }
-    },
-    "node_modules/@types/d3-path": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
-      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
-      "dev": true
-    },
-    "node_modules/@types/d3-polygon": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.2.tgz",
-      "integrity": "sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==",
-      "dev": true
-    },
-    "node_modules/@types/d3-quadtree": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz",
-      "integrity": "sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==",
-      "dev": true
-    },
-    "node_modules/@types/d3-random": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.3.tgz",
-      "integrity": "sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==",
-      "dev": true
-    },
-    "node_modules/@types/d3-scale": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
-      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
-      "dev": true,
-      "dependencies": {
-        "@types/d3-time": "*"
-      }
-    },
-    "node_modules/@types/d3-scale-chromatic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
-      "integrity": "sha512-iWMJgwkK7yTRmWqRB5plb1kadXyQ5Sj8V/zYlFGMUBbIPKQScw+Dku9cAAMgJG+z5GYDoMjWGLVOvjghDEFnKQ==",
-      "dev": true
-    },
-    "node_modules/@types/d3-selection": {
-      "version": "3.0.11",
-      "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.11.tgz",
-      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
-      "dev": true
-    },
-    "node_modules/@types/d3-shape": {
-      "version": "3.1.7",
-      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
-      "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
-      "dev": true,
-      "dependencies": {
-        "@types/d3-path": "*"
-      }
-    },
-    "node_modules/@types/d3-time": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
-      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
-      "dev": true
-    },
-    "node_modules/@types/d3-time-format": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.3.tgz",
-      "integrity": "sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==",
-      "dev": true
-    },
-    "node_modules/@types/d3-timer": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
-      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
-      "dev": true
-    },
-    "node_modules/@types/d3-transition": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.9.tgz",
-      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
-      "dev": true,
-      "dependencies": {
-        "@types/d3-selection": "*"
-      }
-    },
-    "node_modules/@types/d3-zoom": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
-      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
-      "dev": true,
-      "dependencies": {
-        "@types/d3-interpolate": "*",
-        "@types/d3-selection": "*"
-      }
-    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -4888,12 +4633,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/geojson": {
-      "version": "7946.0.16",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
-      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
-      "dev": true
-    },
     "node_modules/@types/hast": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
@@ -6540,395 +6279,6 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
-    "node_modules/d3": {
-      "version": "7.9.0",
-      "resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
-      "integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
-      "dependencies": {
-        "d3-array": "3",
-        "d3-axis": "3",
-        "d3-brush": "3",
-        "d3-chord": "3",
-        "d3-color": "3",
-        "d3-contour": "4",
-        "d3-delaunay": "6",
-        "d3-dispatch": "3",
-        "d3-drag": "3",
-        "d3-dsv": "3",
-        "d3-ease": "3",
-        "d3-fetch": "3",
-        "d3-force": "3",
-        "d3-format": "3",
-        "d3-geo": "3",
-        "d3-hierarchy": "3",
-        "d3-interpolate": "3",
-        "d3-path": "3",
-        "d3-polygon": "3",
-        "d3-quadtree": "3",
-        "d3-random": "3",
-        "d3-scale": "4",
-        "d3-scale-chromatic": "3",
-        "d3-selection": "3",
-        "d3-shape": "3",
-        "d3-time": "3",
-        "d3-time-format": "4",
-        "d3-timer": "3",
-        "d3-transition": "3",
-        "d3-zoom": "3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-array": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
-      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
-      "dependencies": {
-        "internmap": "1 - 2"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-axis": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
-      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-brush": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
-      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-drag": "2 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-selection": "3",
-        "d3-transition": "3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-chord": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
-      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
-      "dependencies": {
-        "d3-path": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-color": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
-      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-contour": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
-      "integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
-      "dependencies": {
-        "d3-array": "^3.2.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-delaunay": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
-      "integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
-      "dependencies": {
-        "delaunator": "5"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-dispatch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
-      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-drag": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
-      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-selection": "3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-dsv": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
-      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
-      "dependencies": {
-        "commander": "7",
-        "iconv-lite": "0.6",
-        "rw": "1"
-      },
-      "bin": {
-        "csv2json": "bin/dsv2json.js",
-        "csv2tsv": "bin/dsv2dsv.js",
-        "dsv2dsv": "bin/dsv2dsv.js",
-        "dsv2json": "bin/dsv2json.js",
-        "json2csv": "bin/json2dsv.js",
-        "json2dsv": "bin/json2dsv.js",
-        "json2tsv": "bin/json2dsv.js",
-        "tsv2csv": "bin/dsv2dsv.js",
-        "tsv2json": "bin/dsv2json.js"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-dsv/node_modules/commander": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
-      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/d3-dsv/node_modules/iconv-lite": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
-      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dependencies": {
-        "safer-buffer": ">= 2.1.2 < 3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/d3-ease": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
-      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-fetch": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
-      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
-      "dependencies": {
-        "d3-dsv": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-force": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
-      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-quadtree": "1 - 3",
-        "d3-timer": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-format": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
-      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-geo": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
-      "integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
-      "dependencies": {
-        "d3-array": "2.5.0 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-hierarchy": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
-      "integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-interpolate": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
-      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
-      "dependencies": {
-        "d3-color": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-path": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
-      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-polygon": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
-      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-quadtree": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
-      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-random": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
-      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-scale": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
-      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
-      "dependencies": {
-        "d3-array": "2.10.0 - 3",
-        "d3-format": "1 - 3",
-        "d3-interpolate": "1.2.0 - 3",
-        "d3-time": "2.1.1 - 3",
-        "d3-time-format": "2 - 4"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-scale-chromatic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
-      "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
-      "dependencies": {
-        "d3-color": "1 - 3",
-        "d3-interpolate": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-selection": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
-      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-shape": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
-      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
-      "dependencies": {
-        "d3-path": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-time": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
-      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
-      "dependencies": {
-        "d3-array": "2 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-time-format": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
-      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
-      "dependencies": {
-        "d3-time": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-timer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
-      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/d3-transition": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
-      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
-      "dependencies": {
-        "d3-color": "1 - 3",
-        "d3-dispatch": "1 - 3",
-        "d3-ease": "1 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-timer": "1 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "d3-selection": "2 - 3"
-      }
-    },
-    "node_modules/d3-zoom": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
-      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
-      "dependencies": {
-        "d3-dispatch": "1 - 3",
-        "d3-drag": "2 - 3",
-        "d3-interpolate": "1 - 3",
-        "d3-selection": "2 - 3",
-        "d3-transition": "2 - 3"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/data-urls": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
@@ -7124,14 +6474,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/delaunator": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.1.tgz",
-      "integrity": "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw==",
-      "dependencies": {
-        "robust-predicates": "^3.0.2"
-      }
-    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -9835,14 +9177,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/internmap": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
-      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
-      "engines": {
-        "node": ">=12"
-      }
-    },
     "node_modules/interpret": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
@@ -13908,11 +13242,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/robust-predicates": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.2.tgz",
-      "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
-    },
     "node_modules/rollup": {
       "version": "4.34.8",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.34.8.tgz",
@@ -13979,11 +13308,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/rw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ=="
-    },
     "node_modules/safe-array-concat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
@@ -14059,7 +13383,8 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true
     },
     "node_modules/saxes": {
       "version": "6.0.0",
diff --git a/electron/src/control/EditValue.tsx b/electron/src/control/EditValue.tsx
index 41621945..c68740b5 100644
--- a/electron/src/control/EditValue.tsx
+++ b/electron/src/control/EditValue.tsx
@@ -2,7 +2,7 @@ import { Icon, IconName } from "@/components/Icon";
 import React, { useEffect } from "react";
 import {
   getUnitIcon,
-  renderUndefinedValue,
+  renderValueToReactNode,
   renderUnitSymbol,
   renderUnitSymbolLong,
   renderUnitSyntax,
@@ -128,7 +128,7 @@ export function EditValue({
         >
           <div className="flex flex-row items-center gap-2">
             <span className="font-mono text-4xl font-bold">
-              {renderUndefinedValue(value, unit, renderValue)}
+              {renderValueToReactNode(value, unit, renderValue)}
             </span>
             <span>{renderUnitSymbol(unit)}</span>
           </div>
diff --git a/electron/src/control/TimeSeriesValue.tsx b/electron/src/control/TimeSeriesValue.tsx
index 49d5eead..9cd83a1f 100644
--- a/electron/src/control/TimeSeriesValue.tsx
+++ b/electron/src/control/TimeSeriesValue.tsx
@@ -2,13 +2,17 @@ import { Icon, IconName } from "@/components/Icon";
 import React from "react";
 import {
   getUnitIcon,
-  renderUndefinedValue,
+  renderValueToReactNode,
   renderUnitSymbol,
   Unit,
 } from "./units";
 import { Label } from "./Label";
 import { TimeSeries } from "@/lib/timeseries";
 import { MiniGraph } from "@/helpers/MiniGraph";
+import {
+  useContainerDimensions,
+  useMaxContainerMaxDimension,
+} from "@/lib/useContainerWidth";
 
 type Props = {
   label: string;
@@ -18,9 +22,6 @@ type Props = {
   renderValue?: (value: number) => string;
 };
 
-type AllowedT = number | boolean;
-
-
 function _TimeSeriesValue({
   unit,
   timeseries,
@@ -30,45 +31,22 @@ function _TimeSeriesValue({
 }: Props) {
   const value = timeseries.current?.value;
 
-  const containerRef = React.useRef<HTMLDivElement>(null);
   const leftRef = React.useRef<HTMLDivElement>(null);
-  const [width, setWidth] = React.useState(0);
+  const minigraphContainerRef = React.useRef<HTMLDivElement>(null);
 
-  React.useEffect(() => {
-    if (!containerRef.current || !leftRef.current) return;
+  // observe width of minigraph container
+  const { width } = useContainerDimensions(minigraphContainerRef);
 
-    const container = containerRef.current;
-    const left = leftRef.current;
-
-    const calculateWidth = () => {
-      const containerWidth = container.getBoundingClientRect().width;
-      const leftWidth = left.getBoundingClientRect().width;
-      const padding = 16;
-      const remaining = Math.max(containerWidth - leftWidth - padding, 0);
-      setWidth(remaining);
-    };
-
-    calculateWidth();
-
-    // Listen for resizes on the container
-    const resizeObserver = new ResizeObserver(() => {
-      calculateWidth();
-    });
-
-    resizeObserver.observe(container);
-    resizeObserver.observe(left);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
+  // observe max width of left side
+  const { maxWidth: leftMaxWidth } = useMaxContainerMaxDimension(leftRef);
 
   return (
-    <div
-      ref={containerRef}
-      className="bg-red flex flex-row items-center gap-4 w-full"
-    >
-      <div ref={leftRef} className="h-16 flex-shrink-0">
+    <div className="flex w-full flex-row items-center gap-4">
+      <div
+        ref={leftRef}
+        className="h-16"
+        style={{ minWidth: `${leftMaxWidth}px` }}
+      >
         <Label label={label}>
           <div className="flex flex-row items-center gap-4">
             <Icon
@@ -77,7 +55,7 @@ function _TimeSeriesValue({
             />
             <div className="flex flex-row items-center gap-2">
               <span className="font-mono text-4xl font-bold">
-                {renderUndefinedValue(value, unit, renderValue)}
+                {renderValueToReactNode(value, unit, renderValue)}
               </span>
               <span>{renderUnitSymbol(unit)}</span>
             </div>
@@ -85,14 +63,17 @@ function _TimeSeriesValue({
         </Label>
       </div>
 
-      <div className="h-16 flex-grow min-w-0">
-        <MiniGraph newData={timeseries} width={width} renderValue={renderValue} />
+      <div ref={minigraphContainerRef} className="h-16 min-w-0 flex-grow">
+        <MiniGraph
+          newData={timeseries}
+          width={width}
+          renderValue={renderValue}
+        />
       </div>
     </div>
   );
 }
 
-
 export function TimeSeriesValueNumeric(props: Props) {
   return <_TimeSeriesValue {...props} />;
 }
diff --git a/electron/src/control/units.tsx b/electron/src/control/units.tsx
index 9a3d853c..448a2c08 100644
--- a/electron/src/control/units.tsx
+++ b/electron/src/control/units.tsx
@@ -114,7 +114,7 @@ export const units = [
 
 export type Unit = (typeof units)[number];
 
-export function renderUndefinedValue<T>(
+export function renderValueToReactNode<T>(
   value?: T | undefined | null,
   unit?: Unit,
   renderValue?: (value: T) => string,
@@ -128,12 +128,21 @@ export function renderUndefinedValue<T>(
       </span>
     );
   }
-  if (renderValue) {
-    if (renderUnitSyntax) {
-      return renderUnitSyntax(renderValue(value), unit);
-    } else {
-      return renderValue(value);
+
+  const valueString = renderValue ? renderValue(value) : value.toString();
+
+  const valueStringSplit = valueString.split(".");
+  const reactNodes: ReactNode[] = [];
+  for (let i = 0; i < valueStringSplit.length; i++) {
+    if (i > 0) {
+      reactNodes.push(
+        <span key={`dot-${i}`} className="font-serif">
+          .
+        </span>,
+      );
     }
+    reactNodes.push(<span key={`value-${i}`}>{valueStringSplit[i]}</span>);
   }
-  return value.toString();
+
+  return <>{reactNodes}</>;
 }
diff --git a/electron/src/lib/decimal.ts b/electron/src/lib/decimal.tsx
similarity index 95%
rename from electron/src/lib/decimal.ts
rename to electron/src/lib/decimal.tsx
index 1920fe35..f1dd7b85 100644
--- a/electron/src/lib/decimal.ts
+++ b/electron/src/lib/decimal.tsx
@@ -1,3 +1,5 @@
+import React from "react";
+
 export function roundToDecimals(num: number, decimals: number): string {
   let output = num.toFixed(decimals);
 
diff --git a/electron/src/lib/useContainerWidth.ts b/electron/src/lib/useContainerWidth.ts
new file mode 100644
index 00000000..f5eba2f1
--- /dev/null
+++ b/electron/src/lib/useContainerWidth.ts
@@ -0,0 +1,125 @@
+import React, { useEffect } from "react";
+
+export function useContainerDimensions(
+  containerRef: React.RefObject<HTMLDivElement | null>,
+) {
+  const [width, setWidth] = React.useState(0);
+  const [height, setHeight] = React.useState(0);
+
+  React.useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setWidth(entry.contentRect.width);
+        setHeight(entry.contentRect.height);
+      }
+    });
+
+    resizeObserver.observe(element);
+
+    // Set initial dimensions
+    const rect = element.getBoundingClientRect();
+    setWidth(rect.width);
+    setHeight(rect.height);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [containerRef]);
+
+  return { width, height };
+}
+
+export function useMaxContainerMaxDimension(
+  ref: React.RefObject<HTMLDivElement | null>,
+  refresh: number = 1000,
+) {
+  const [maxWidthA, setMaxWidthA] = React.useState(0);
+  const [maxWidthB, setMaxWidthB] = React.useState(0);
+  const [maxHeightA, setMaxHeightA] = React.useState(0);
+  const [maxHeightB, setMaxHeightB] = React.useState(0);
+  const [useA, setUseA] = React.useState(true);
+  const [hasStarted, setHasStarted] = React.useState(false);
+
+  const { width, height } = useContainerDimensions(ref);
+
+  // Switch between A and B every refresh milliseconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      if (!hasStarted) {
+        setHasStarted(true);
+      } else {
+        setUseA((prev) => {
+          const newUseA = !prev;
+          // Reset the set we're about to start sampling
+          if (newUseA) {
+            // We're switching to return A, so reset B (which we'll sample)
+            setMaxWidthB(0);
+            setMaxHeightB(0);
+          } else {
+            // We're switching to return B, so reset A (which we'll sample)
+            setMaxWidthA(0);
+            setMaxHeightA(0);
+          }
+          return newUseA;
+        });
+      }
+    }, refresh);
+
+    return () => clearInterval(interval);
+  }, [refresh, hasStarted]);
+
+  // Update the dimension values
+  useEffect(() => {
+    if (!hasStarted) {
+      // First cycle: sample both A and B
+      if (width > maxWidthA) {
+        setMaxWidthA(width);
+      }
+      if (width > maxWidthB) {
+        setMaxWidthB(width);
+      }
+      if (height > maxHeightA) {
+        setMaxHeightA(height);
+      }
+      if (height > maxHeightB) {
+        setMaxHeightB(height);
+      }
+    } else {
+      // After first cycle: update the inactive set
+      if (useA) {
+        // We're returning A, so sample for B
+        if (width > maxWidthB) {
+          setMaxWidthB(width);
+        }
+        if (height > maxHeightB) {
+          setMaxHeightB(height);
+        }
+      } else {
+        // We're returning B, so sample for A
+        if (width > maxWidthA) {
+          setMaxWidthA(width);
+        }
+        if (height > maxHeightA) {
+          setMaxHeightA(height);
+        }
+      }
+    }
+  }, [
+    width,
+    height,
+    maxWidthA,
+    maxWidthB,
+    maxHeightA,
+    maxHeightB,
+    useA,
+    hasStarted,
+  ]);
+
+  return {
+    maxWidth: useA ? maxWidthA : maxWidthB,
+    maxHeight: useA ? maxHeightA : maxHeightB,
+  };
+}
diff --git a/electron/src/machines/mock/mock1/Mock1ControlPage.tsx b/electron/src/machines/mock/mock1/Mock1ControlPage.tsx
index 994abe08..1c372174 100644
--- a/electron/src/machines/mock/mock1/Mock1ControlPage.tsx
+++ b/electron/src/machines/mock/mock1/Mock1ControlPage.tsx
@@ -24,8 +24,29 @@ export function Mock1ControlPage() {
 
   return (
     <Page>
-      <ControlGrid columns={2}>
-        <ControlCard title="Sine Wave Generator">
+      <ControlGrid>
+        <ControlCard title="Sine Wave">
+          <TimeSeriesValueNumeric
+            label="Current Value"
+            timeseries={sineWave}
+            renderValue={(value) => value.toFixed(3)}
+          />
+        </ControlCard>
+        <ControlCard title="Sine Wave">
+          <TimeSeriesValueNumeric
+            label="Current Value"
+            timeseries={sineWave}
+            renderValue={(value) => value.toFixed(3)}
+          />
+        </ControlCard>
+        <ControlCard title="Sine Wave">
+          <TimeSeriesValueNumeric
+            label="Current Value"
+            timeseries={sineWave}
+            renderValue={(value) => value.toFixed(3)}
+          />
+        </ControlCard>
+        <ControlCard title="Sine Wave">
           <TimeSeriesValueNumeric
             label="Current Value"
             timeseries={sineWave}
@@ -33,7 +54,7 @@ export function Mock1ControlPage() {
           />
         </ControlCard>
 
-        <ControlCard title="Settings">
+        <ControlCard title="Frequency">
           <div className="flex flex-col gap-4">
             <EditValue
               title="Frequency (Hz)"
@@ -46,133 +67,21 @@ export function Mock1ControlPage() {
               renderValue={(value) => value.toFixed(0)}
               onChange={mockSetFrequency}
             />
-
-            <div className="flex flex-col gap-2">
-              <div className="text-sm font-medium">Mode</div>
-              <SelectionGroup
-                value={mode}
-                onChange={(newMode: Mode) => mockSetMode(newMode)}
-                disabled={modeStateIsDisabled}
-                options={{
-                  Standby: { children: "Standby" },
-                  Running: { children: "Running" },
-                }}
-              />
-            </div>
           </div>
         </ControlCard>
-      </ControlGrid>
-      <ControlGrid columns={2}>
-        <ControlCard title="Sine Wave Generator">
-          <TimeSeriesValueNumeric
-            label="Current Value"
-            timeseries={sineWave}
-            renderValue={(value) => value.toFixed(3)}
-          />
-        </ControlCard>
 
-        <ControlCard title="Settings">
-          <div className="flex flex-col gap-4">
-            <EditValue
-              title="Frequency (Hz)"
-              unit="mHz"
-              value={frequency}
-              defaultValue={500}
-              min={1}
-              max={1000}
-              step={10}
-              renderValue={(value) => value.toFixed(0)}
-              onChange={mockSetFrequency}
+        <ControlCard title="Mode">
+          <div className="flex flex-col gap-2">
+            <div className="text-sm font-medium">Mode</div>
+            <SelectionGroup
+              value={mode}
+              onChange={(newMode: Mode) => mockSetMode(newMode)}
+              disabled={modeStateIsDisabled}
+              options={{
+                Standby: { children: "Standby" },
+                Running: { children: "Running" },
+              }}
             />
-
-            <div className="flex flex-col gap-2">
-              <div className="text-sm font-medium">Mode</div>
-              <SelectionGroup
-                value={mode}
-                onChange={(newMode: Mode) => mockSetMode(newMode)}
-                disabled={modeStateIsDisabled}
-                options={{
-                  Standby: { children: "Standby" },
-                  Running: { children: "Running" },
-                }}
-              />
-            </div>
-          </div>
-        </ControlCard>
-      </ControlGrid>
-      <ControlGrid columns={2}>
-        <ControlCard title="Sine Wave Generator">
-          <TimeSeriesValueNumeric
-            label="Current Value"
-            timeseries={sineWave}
-            renderValue={(value) => value.toFixed(3)}
-          />
-        </ControlCard>
-
-        <ControlCard title="Settings">
-          <div className="flex flex-col gap-4">
-            <EditValue
-              title="Frequency (Hz)"
-              unit="mHz"
-              value={frequency}
-              defaultValue={500}
-              min={1}
-              max={1000}
-              step={10}
-              renderValue={(value) => value.toFixed(0)}
-              onChange={mockSetFrequency}
-            />
-
-            <div className="flex flex-col gap-2">
-              <div className="text-sm font-medium">Mode</div>
-              <SelectionGroup
-                value={mode}
-                onChange={(newMode: Mode) => mockSetMode(newMode)}
-                disabled={modeStateIsDisabled}
-                options={{
-                  Standby: { children: "Standby" },
-                  Running: { children: "Running" },
-                }}
-              />
-            </div>
-          </div>
-        </ControlCard>
-      </ControlGrid>
-      <ControlGrid columns={2}>
-        <ControlCard title="Sine Wave Generator">
-          <TimeSeriesValueNumeric
-            label="Current Value"
-            timeseries={sineWave}
-            renderValue={(value) => value.toFixed(3)}
-          />
-        </ControlCard>
-
-        <ControlCard title="Settings">
-          <div className="flex flex-col gap-4">
-            <EditValue
-              title="Frequency (Hz)"
-              unit="mHz"
-              value={frequency}
-              defaultValue={500}
-              min={1}
-              max={1000}
-              step={10}
-              renderValue={(value) => value.toFixed(0)}
-              onChange={mockSetFrequency}
-            />
-
-            <div className="flex flex-col gap-2">
-              <div className="text-sm font-medium">Mode</div>
-              <SelectionGroup
-                value={mode}
-                onChange={(newMode: Mode) => mockSetMode(newMode)}
-                disabled={modeStateIsDisabled}
-                options={{
-                  Standby: { children: "Standby" },
-                  Running: { children: "Running" },
-                }}
-              />
-            </div>
           </div>
         </ControlCard>
       </ControlGrid>