diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index b2cce21e49..de391e4416 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -11,11 +11,10 @@
 				"@creditkarma/thrift-server-core": "^1.0.4",
 				"@creditkarma/thrift-typescript": "^3.7.6",
 				"@layerstack/utils": "^0.0.7",
-				"@types/echarts": "^4.9.22",
 				"clsx": "^2.1.1",
 				"d3": "^7.9.0",
 				"dotenv": "^16.4.7",
-				"echarts": "^5.6.0",
+				"layerchart": "^0.93.9",
 				"lodash": "^4.17.21",
 				"tailwind-merge": "^2.6.0",
 				"tailwind-variants": "^0.3.0"
@@ -74,7 +73,6 @@
 		},
 		"node_modules/@ampproject/remapping": {
 			"version": "2.3.0",
-			"dev": true,
 			"license": "Apache-2.0",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@@ -144,6 +142,24 @@
 				"node": ">=4.2.0"
 			}
 		},
+		"node_modules/@dagrejs/dagre": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/@dagrejs/dagre/-/dagre-1.1.4.tgz",
+			"integrity": "sha512-QUTc54Cg/wvmlEUxB+uvoPVKFazM1H18kVHBQNmK2NbrDR5ihOCR6CXLnDSZzMcSQKJtabPUWridBOlJM3WkDg==",
+			"license": "MIT",
+			"dependencies": {
+				"@dagrejs/graphlib": "2.2.4"
+			}
+		},
+		"node_modules/@dagrejs/graphlib": {
+			"version": "2.2.4",
+			"resolved": "https://registry.npmjs.org/@dagrejs/graphlib/-/graphlib-2.2.4.tgz",
+			"integrity": "sha512-mepCf/e9+SKYy1d02/UkvSy6+6MoyXhVxP8lLDfA7BPE1X1d4dR0sZznmbM8/XVJ1GPM+Svnx7Xj6ZweByWUkw==",
+			"license": "MIT",
+			"engines": {
+				"node": ">17.0.0"
+			}
+		},
 		"node_modules/@esbuild/darwin-arm64": {
 			"version": "0.24.0",
 			"cpu": [
@@ -281,7 +297,6 @@
 		},
 		"node_modules/@floating-ui/core": {
 			"version": "1.6.8",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@floating-ui/utils": "^0.2.8"
@@ -289,7 +304,6 @@
 		},
 		"node_modules/@floating-ui/dom": {
 			"version": "1.6.12",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@floating-ui/core": "^1.6.0",
@@ -298,7 +312,6 @@
 		},
 		"node_modules/@floating-ui/utils": {
 			"version": "0.2.8",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@humanfs/core": {
@@ -453,6 +466,50 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
+		"node_modules/@layerstack/svelte-actions": {
+			"version": "0.0.11",
+			"resolved": "https://registry.npmjs.org/@layerstack/svelte-actions/-/svelte-actions-0.0.11.tgz",
+			"integrity": "sha512-sfplFX8rOBW74xjDCAY7QzHilvUGjFQTkfQXxUO6e68cKCHmxsSuTCtFbHRCfIUJCQ31gAbeY1xpWKnlVfgZ9g==",
+			"license": "MIT",
+			"dependencies": {
+				"@floating-ui/dom": "^1.6.12",
+				"@layerstack/utils": "0.0.7",
+				"d3-array": "^3.2.4",
+				"d3-scale": "^4.0.2",
+				"date-fns": "^4.1.0",
+				"lodash-es": "^4.17.21"
+			}
+		},
+		"node_modules/@layerstack/svelte-stores": {
+			"version": "0.0.9",
+			"resolved": "https://registry.npmjs.org/@layerstack/svelte-stores/-/svelte-stores-0.0.9.tgz",
+			"integrity": "sha512-5yyi7eV/2hOraw7wQgEObVR4s2/4T3G/GjGaZLR9BQH8mnsLuXw1n3k6rFT8NxiRvpEjWJ9l9ILOGc/XzFJb3g==",
+			"license": "MIT",
+			"dependencies": {
+				"@layerstack/utils": "0.0.7",
+				"d3-array": "^3.2.4",
+				"date-fns": "^4.1.0",
+				"immer": "^10.1.1",
+				"lodash-es": "^4.17.21",
+				"zod": "^3.23.8"
+			}
+		},
+		"node_modules/@layerstack/tailwind": {
+			"version": "0.0.11",
+			"resolved": "https://registry.npmjs.org/@layerstack/tailwind/-/tailwind-0.0.11.tgz",
+			"integrity": "sha512-dHvJM5xpVisPrM6NClSCNPqB/u+pSwemWzkKeb911/8pLUuyr+7HceTpv5AZMyE/I5A2RxoTa5mTZokmvEqPnQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@layerstack/utils": "^0.0.7",
+				"clsx": "^2.1.1",
+				"culori": "^4.0.1",
+				"d3-array": "^3.2.4",
+				"date-fns": "^4.1.0",
+				"lodash-es": "^4.17.21",
+				"tailwind-merge": "^2.5.4",
+				"tailwindcss": "^3.4.15"
+			}
+		},
 		"node_modules/@layerstack/utils": {
 			"version": "0.0.7",
 			"resolved": "https://registry.npmjs.org/@layerstack/utils/-/utils-0.0.7.tgz",
@@ -1212,13 +1269,6 @@
 				"@types/d3-selection": "*"
 			}
 		},
-		"node_modules/@types/echarts": {
-			"version": "4.9.22",
-			"license": "MIT",
-			"dependencies": {
-				"@types/zrender": "*"
-			}
-		},
 		"node_modules/@types/eslint": {
 			"version": "9.6.1",
 			"dev": true,
@@ -1230,7 +1280,6 @@
 		},
 		"node_modules/@types/estree": {
 			"version": "1.0.6",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/fs-extra": {
@@ -1266,10 +1315,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/@types/zrender": {
-			"version": "4.0.6",
-			"license": "MIT"
-		},
 		"node_modules/@typescript-eslint/eslint-plugin": {
 			"version": "8.18.1",
 			"dev": true,
@@ -1565,7 +1610,6 @@
 		},
 		"node_modules/acorn": {
 			"version": "8.14.0",
-			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"acorn": "bin/acorn"
@@ -1584,7 +1628,6 @@
 		},
 		"node_modules/acorn-typescript": {
 			"version": "1.4.13",
-			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"acorn": ">=8.9.0"
@@ -1655,12 +1698,17 @@
 		},
 		"node_modules/aria-query": {
 			"version": "5.3.2",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
 			}
 		},
+		"node_modules/array-source": {
+			"version": "0.0.4",
+			"resolved": "https://registry.npmjs.org/array-source/-/array-source-0.0.4.tgz",
+			"integrity": "sha512-frNdc+zBn80vipY+GdcJkLEbMWj3xmzArYApmUGxoiV8uAu/ygcs9icPdsGdA26h0MkHUMW6EN2piIvVx+M5Mw==",
+			"license": "BSD-3-Clause"
+		},
 		"node_modules/assertion-error": {
 			"version": "2.0.1",
 			"dev": true,
@@ -1707,7 +1755,6 @@
 		},
 		"node_modules/axobject-query": {
 			"version": "4.1.0",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -1990,6 +2037,15 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/culori": {
+			"version": "4.0.1",
+			"resolved": "https://registry.npmjs.org/culori/-/culori-4.0.1.tgz",
+			"integrity": "sha512-LSnjA6HuIUOlkfKVbzi2OlToZE8OjFi667JWN9qNymXVXzGDmvuP60SSgC+e92sd7B7158f7Fy3Mb6rXS5EDPw==",
+			"license": "MIT",
+			"engines": {
+				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+			}
+		},
 		"node_modules/d3": {
 			"version": "7.9.0",
 			"license": "ISC",
@@ -2031,6 +2087,8 @@
 		},
 		"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==",
 			"license": "ISC",
 			"dependencies": {
 				"internmap": "1 - 2"
@@ -2072,6 +2130,8 @@
 		},
 		"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==",
 			"license": "ISC",
 			"engines": {
 				"node": ">=12"
@@ -2184,6 +2244,21 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/d3-geo-voronoi": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/d3-geo-voronoi/-/d3-geo-voronoi-2.1.0.tgz",
+			"integrity": "sha512-kqE4yYuOjPbKdBXG0xztCacPwkVSK2REF1opSNrnqqtXJmNcM++UbwQ8SxvwP6IQTj9RvIjjK4qeiVsEfj0Z2Q==",
+			"license": "ISC",
+			"dependencies": {
+				"d3-array": "3",
+				"d3-delaunay": "6",
+				"d3-geo": "3",
+				"d3-tricontour": "1"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/d3-hierarchy": {
 			"version": "3.1.2",
 			"license": "ISC",
@@ -2201,6 +2276,12 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/d3-interpolate-path": {
+			"version": "2.3.0",
+			"resolved": "https://registry.npmjs.org/d3-interpolate-path/-/d3-interpolate-path-2.3.0.tgz",
+			"integrity": "sha512-tZYtGXxBmbgHsIc9Wms6LS5u4w6KbP8C09a4/ZYc4KLMYYqub57rRBUgpUr2CIarIrJEpdAWWxWQvofgaMpbKQ==",
+			"license": "BSD-3-Clause"
+		},
 		"node_modules/d3-path": {
 			"version": "3.1.0",
 			"license": "ISC",
@@ -2229,8 +2310,50 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/d3-sankey": {
+			"version": "0.12.3",
+			"resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+			"integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"d3-array": "1 - 2",
+				"d3-shape": "^1.2.0"
+			}
+		},
+		"node_modules/d3-sankey/node_modules/d3-array": {
+			"version": "2.12.1",
+			"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+			"integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"internmap": "^1.0.0"
+			}
+		},
+		"node_modules/d3-sankey/node_modules/d3-path": {
+			"version": "1.0.9",
+			"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+			"integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==",
+			"license": "BSD-3-Clause"
+		},
+		"node_modules/d3-sankey/node_modules/d3-shape": {
+			"version": "1.3.7",
+			"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+			"integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"d3-path": "1"
+			}
+		},
+		"node_modules/d3-sankey/node_modules/internmap": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+			"integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+			"license": "ISC"
+		},
 		"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==",
 			"license": "ISC",
 			"dependencies": {
 				"d3-array": "2.10.0 - 3",
@@ -2271,6 +2394,12 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/d3-tile": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/d3-tile/-/d3-tile-1.0.0.tgz",
+			"integrity": "sha512-79fnTKpPMPDS5xQ0xuS9ir0165NEwwkFpe/DSOmc2Gl9ldYzKKRDWogmTTE8wAJ8NA7PMapNfEcyKhI9Lxdu5Q==",
+			"license": "BSD-3-Clause"
+		},
 		"node_modules/d3-time": {
 			"version": "3.1.0",
 			"license": "ISC",
@@ -2315,6 +2444,19 @@
 				"d3-selection": "2 - 3"
 			}
 		},
+		"node_modules/d3-tricontour": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/d3-tricontour/-/d3-tricontour-1.0.2.tgz",
+			"integrity": "sha512-HIRxHzHagPtUPNabjOlfcyismJYIsc+Xlq4mlsts4e8eAcwyq9Tgk/sYdyhlBpQ0MHwVquc/8j+e29YjXnmxeA==",
+			"license": "ISC",
+			"dependencies": {
+				"d3-delaunay": "6",
+				"d3-scale": "4"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/d3-zoom": {
 			"version": "3.0.0",
 			"license": "ISC",
@@ -2414,20 +2556,6 @@
 				"url": "https://dotenvx.com"
 			}
 		},
-		"node_modules/echarts": {
-			"version": "5.6.0",
-			"resolved": "https://registry.npmjs.org/echarts/-/echarts-5.6.0.tgz",
-			"integrity": "sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==",
-			"license": "Apache-2.0",
-			"dependencies": {
-				"tslib": "2.3.0",
-				"zrender": "5.6.1"
-			}
-		},
-		"node_modules/echarts/node_modules/tslib": {
-			"version": "2.3.0",
-			"license": "0BSD"
-		},
 		"node_modules/electron-to-chromium": {
 			"version": "1.5.75",
 			"dev": true,
@@ -2651,7 +2779,6 @@
 		},
 		"node_modules/esm-env": {
 			"version": "1.2.1",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/espree": {
@@ -2683,7 +2810,6 @@
 		},
 		"node_modules/esrap": {
 			"version": "1.3.2",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
@@ -2799,6 +2925,15 @@
 				"node": ">=16.0.0"
 			}
 		},
+		"node_modules/file-source": {
+			"version": "0.6.1",
+			"resolved": "https://registry.npmjs.org/file-source/-/file-source-0.6.1.tgz",
+			"integrity": "sha512-1R1KneL7eTXmXfKxC10V/9NeGOdbsAXJ+lQ//fvvcHUgtaZcZDWNJNblxAoVOyV1cj45pOtUrR3vZTBwqcW8XA==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"stream-source": "0.3"
+			}
+		},
 		"node_modules/fill-range": {
 			"version": "7.1.1",
 			"license": "MIT",
@@ -3007,6 +3142,16 @@
 				"node": ">= 4"
 			}
 		},
+		"node_modules/immer": {
+			"version": "10.1.1",
+			"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+			"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+			"license": "MIT",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/immer"
+			}
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"dev": true,
@@ -3177,6 +3322,62 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/layercake": {
+			"version": "8.4.2",
+			"resolved": "https://registry.npmjs.org/layercake/-/layercake-8.4.2.tgz",
+			"integrity": "sha512-ZVjdl6ryjz7F4jXX8Dh871nN/Nv6o3m7gLI7KrMPNGiy3Mg5BuA9j0UeucrmK/uLe20XpDyG6X4v/iYJYSPLrg==",
+			"license": "MIT",
+			"dependencies": {
+				"d3-array": "^3.2.4",
+				"d3-color": "^3.1.0",
+				"d3-scale": "^4.0.2",
+				"d3-shape": "^3.2.0"
+			},
+			"peerDependencies": {
+				"svelte": "3 - 5 || >=5.0.0-next.120",
+				"typescript": "^5.0.2"
+			}
+		},
+		"node_modules/layerchart": {
+			"version": "0.93.9",
+			"resolved": "https://registry.npmjs.org/layerchart/-/layerchart-0.93.9.tgz",
+			"integrity": "sha512-rI5n6RrX6UvWSCJEB+Hw2uR415lTAdePwGuKSgMieqUGvTAK2hwF1xp/YpbvHaTkTNS6ljGoXCeszwQxklnVdQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@dagrejs/dagre": "^1.1.4",
+				"@layerstack/svelte-actions": "^0.0.11",
+				"@layerstack/svelte-stores": "^0.0.9",
+				"@layerstack/tailwind": "^0.0.11",
+				"@layerstack/utils": "^0.0.7",
+				"d3-array": "^3.2.4",
+				"d3-color": "^3.1.0",
+				"d3-delaunay": "^6.0.4",
+				"d3-dsv": "^3.0.1",
+				"d3-force": "^3.0.0",
+				"d3-geo": "^3.1.1",
+				"d3-geo-voronoi": "^2.1.0",
+				"d3-hierarchy": "^3.1.2",
+				"d3-interpolate": "^3.0.1",
+				"d3-interpolate-path": "^2.3.0",
+				"d3-path": "^3.1.0",
+				"d3-quadtree": "^3.0.1",
+				"d3-random": "^3.0.1",
+				"d3-sankey": "^0.12.3",
+				"d3-scale": "^4.0.2",
+				"d3-scale-chromatic": "^3.1.0",
+				"d3-shape": "^3.2.0",
+				"d3-tile": "^1.0.0",
+				"d3-time": "^3.1.0",
+				"date-fns": "^4.1.0",
+				"layercake": "^8.4.2",
+				"lodash-es": "^4.17.21",
+				"shapefile": "^0.6.6",
+				"topojson-client": "^3.1.0"
+			},
+			"peerDependencies": {
+				"svelte": "^3.56.0 || ^4.0.0 || ^5.0.0"
+			}
+		},
 		"node_modules/levn": {
 			"version": "0.4.1",
 			"dev": true,
@@ -3218,7 +3419,6 @@
 		},
 		"node_modules/locate-character": {
 			"version": "3.0.0",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/locate-path": {
@@ -3271,7 +3471,6 @@
 		},
 		"node_modules/magic-string": {
 			"version": "0.30.17",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0"
@@ -3520,6 +3719,16 @@
 				"node": ">=16 || 14 >=14.17"
 			}
 		},
+		"node_modules/path-source": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/path-source/-/path-source-0.1.3.tgz",
+			"integrity": "sha512-dWRHm5mIw5kw0cs3QZLNmpUWty48f5+5v9nWD2dw3Y0Hf+s01Ag8iJEWV0Sm0kocE8kK27DrIowha03e1YR+Qw==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"array-source": "0.0",
+				"file-source": "0.6"
+			}
+		},
 		"node_modules/pathe": {
 			"version": "1.1.2",
 			"dev": true,
@@ -4005,6 +4214,30 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/shapefile": {
+			"version": "0.6.6",
+			"resolved": "https://registry.npmjs.org/shapefile/-/shapefile-0.6.6.tgz",
+			"integrity": "sha512-rLGSWeK2ufzCVx05wYd+xrWnOOdSV7xNUW5/XFgx3Bc02hBkpMlrd2F1dDII7/jhWzv0MSyBFh5uJIy9hLdfuw==",
+			"license": "BSD-3-Clause",
+			"dependencies": {
+				"array-source": "0.0",
+				"commander": "2",
+				"path-source": "0.1",
+				"slice-source": "0.4",
+				"stream-source": "0.3",
+				"text-encoding": "^0.6.4"
+			},
+			"bin": {
+				"dbf2json": "bin/dbf2json",
+				"shp2json": "bin/shp2json"
+			}
+		},
+		"node_modules/shapefile/node_modules/commander": {
+			"version": "2.20.3",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+			"license": "MIT"
+		},
 		"node_modules/shebang-command": {
 			"version": "2.0.0",
 			"dev": true,
@@ -4042,6 +4275,12 @@
 				"node": ">=18"
 			}
 		},
+		"node_modules/slice-source": {
+			"version": "0.4.1",
+			"resolved": "https://registry.npmjs.org/slice-source/-/slice-source-0.4.1.tgz",
+			"integrity": "sha512-YiuPbxpCj4hD9Qs06hGAz/OZhQ0eDuALN0lRWJez0eD/RevzKqGdUx1IOMUnXgpr+sXZLq3g8ERwbAH0bCb8vg==",
+			"license": "BSD-3-Clause"
+		},
 		"node_modules/source-map-js": {
 			"version": "1.2.1",
 			"license": "BSD-3-Clause",
@@ -4059,6 +4298,12 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/stream-source": {
+			"version": "0.3.5",
+			"resolved": "https://registry.npmjs.org/stream-source/-/stream-source-0.3.5.tgz",
+			"integrity": "sha512-ZuEDP9sgjiAwUVoDModftG0JtYiLUV8K4ljYD1VyUMRWtbVf92474o4kuuul43iZ8t/hRuiDAx1dIJSvirrK/g==",
+			"license": "BSD-3-Clause"
+		},
 		"node_modules/strip-json-comments": {
 			"version": "3.1.1",
 			"dev": true,
@@ -4120,7 +4365,6 @@
 		},
 		"node_modules/svelte": {
 			"version": "5.15.0",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@ampproject/remapping": "^2.3.0",
@@ -4294,7 +4538,6 @@
 		},
 		"node_modules/svelte/node_modules/is-reference": {
 			"version": "3.0.3",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "^1.0.6"
@@ -4481,6 +4724,13 @@
 				"node": ">=8.10.0"
 			}
 		},
+		"node_modules/text-encoding": {
+			"version": "0.6.4",
+			"resolved": "https://registry.npmjs.org/text-encoding/-/text-encoding-0.6.4.tgz",
+			"integrity": "sha512-hJnc6Qg3dWoOMkqP53F0dzRIgtmsAge09kxUIqGrEUS4qr5rWLckGYaQAVr+opBrIMRErGgy6f5aPnyPpyGRfg==",
+			"deprecated": "no longer maintained",
+			"license": "Unlicense"
+		},
 		"node_modules/thenify": {
 			"version": "3.3.1",
 			"license": "MIT",
@@ -4551,6 +4801,26 @@
 				"node": ">=8.0"
 			}
 		},
+		"node_modules/topojson-client": {
+			"version": "3.1.0",
+			"resolved": "https://registry.npmjs.org/topojson-client/-/topojson-client-3.1.0.tgz",
+			"integrity": "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw==",
+			"license": "ISC",
+			"dependencies": {
+				"commander": "2"
+			},
+			"bin": {
+				"topo2geo": "bin/topo2geo",
+				"topomerge": "bin/topomerge",
+				"topoquantize": "bin/topoquantize"
+			}
+		},
+		"node_modules/topojson-client/node_modules/commander": {
+			"version": "2.20.3",
+			"resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+			"integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+			"license": "MIT"
+		},
 		"node_modules/totalist": {
 			"version": "3.0.1",
 			"dev": true,
@@ -4592,7 +4862,6 @@
 		},
 		"node_modules/typescript": {
 			"version": "5.7.2",
-			"dev": true,
 			"license": "Apache-2.0",
 			"bin": {
 				"tsc": "bin/tsc",
@@ -4986,23 +5255,16 @@
 		},
 		"node_modules/zimmerframe": {
 			"version": "1.1.2",
-			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/zrender": {
-			"version": "5.6.1",
-			"resolved": "https://registry.npmjs.org/zrender/-/zrender-5.6.1.tgz",
-			"integrity": "sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==",
-			"license": "BSD-3-Clause",
-			"dependencies": {
-				"tslib": "2.3.0"
+		"node_modules/zod": {
+			"version": "3.24.1",
+			"resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
+			"integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
+			"license": "MIT",
+			"funding": {
+				"url": "https://github.com/sponsors/colinhacks"
 			}
-		},
-		"node_modules/zrender/node_modules/tslib": {
-			"version": "2.3.0",
-			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
-			"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
-			"license": "0BSD"
 		}
 	}
 }
diff --git a/frontend/package.json b/frontend/package.json
index f8f874c82e..825d33b9cc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -63,11 +63,10 @@
 		"@creditkarma/thrift-server-core": "^1.0.4",
 		"@creditkarma/thrift-typescript": "^3.7.6",
 		"@layerstack/utils": "^0.0.7",
-		"@types/echarts": "^4.9.22",
 		"clsx": "^2.1.1",
 		"d3": "^7.9.0",
 		"dotenv": "^16.4.7",
-		"echarts": "^5.6.0",
+		"layerchart": "^0.93.9",
 		"lodash": "^4.17.21",
 		"tailwind-merge": "^2.6.0",
 		"tailwind-variants": "^0.3.0"
diff --git a/frontend/src/lib/components/CustomEChartLegend.svelte b/frontend/src/lib/components/CustomEChartLegend.svelte
deleted file mode 100644
index ccd18e3d12..0000000000
--- a/frontend/src/lib/components/CustomEChartLegend.svelte
+++ /dev/null
@@ -1,135 +0,0 @@
-<script lang="ts">
-	import { Button } from '$lib/components/ui/button';
-	import type { EChartsType } from 'echarts';
-	import IconChevronDown from '~icons/heroicons/chevron-down-16-solid';
-
-	import { getSeriesColor, handleChartHighlight } from '$lib/util/chart';
-	import { cn } from '$lib/utils';
-
-	type LegendItem = { feature: string };
-	type Props = {
-		groupName: string;
-		items: Array<LegendItem>;
-		chart: EChartsType;
-	};
-
-	let { groupName, items, chart }: Props = $props();
-
-	let hiddenSeries: { [key: string]: Set<string> } = $state({});
-	let isExpanded = $state(false);
-	let itemsContainer: HTMLDivElement;
-	let containerHeight = $state(0);
-	let hasOverflow = $state(false);
-	let containerHeightLine = 24;
-
-	function toggleSeries(seriesName: string) {
-		const groupSet = hiddenSeries[groupName] || new Set();
-
-		if (groupSet.has(seriesName)) {
-			groupSet.delete(seriesName);
-		} else {
-			groupSet.add(seriesName);
-			chart.dispatchAction({
-				type: 'downplay',
-				seriesName
-			});
-		}
-
-		hiddenSeries = {
-			...hiddenSeries,
-			[groupName]: groupSet
-		};
-
-		chart.setOption({ legend: { show: false } });
-		chart.dispatchAction({
-			type: 'legendToggleSelect',
-			name: seriesName
-		});
-	}
-
-	function checkOverflow() {
-		if (!itemsContainer) return;
-		const hasVerticalOverflow = itemsContainer.scrollHeight > itemsContainer.clientHeight;
-		const hasHorizontalOverflow = itemsContainer.scrollWidth > itemsContainer.clientWidth;
-		hasOverflow = hasVerticalOverflow || hasHorizontalOverflow;
-	}
-
-	$effect(() => {
-		if (!itemsContainer) return;
-
-		const resizeObserver = new ResizeObserver(() => {
-			checkOverflow();
-			containerHeight = itemsContainer.scrollHeight;
-		});
-
-		resizeObserver.observe(itemsContainer);
-		checkOverflow();
-		containerHeight = itemsContainer.scrollHeight;
-
-		return () => resizeObserver.disconnect();
-	});
-
-	function handleMouseEnter(seriesName: string) {
-		handleChartHighlight(chart, seriesName, 'highlight');
-	}
-
-	function handleMouseLeave(seriesName: string) {
-		handleChartHighlight(chart, seriesName, 'downplay');
-	}
-</script>
-
-<div class="relative mt-5">
-	<div class="flex">
-		<div
-			bind:this={itemsContainer}
-			class={`flex flex-wrap gap-x-4 gap-y-2 flex-1 transition-all duration-150 ease-in-out ${!isExpanded ? 'overflow-hidden' : ''}`}
-			style="height: {isExpanded ? containerHeight + 'px' : containerHeightLine + 'px'};"
-		>
-			{#each items as { feature } (feature)}
-				{@const isHidden = hiddenSeries[groupName]?.has(feature)}
-				{@const color = getSeriesColor(chart, feature)}
-
-				<Button
-					class="legend-btn gap-x-2"
-					variant="ghost"
-					on:click={() => toggleSeries(feature)}
-					title={feature}
-					on:mouseenter={() => handleMouseEnter(feature)}
-					on:mouseleave={() => handleMouseLeave(feature)}
-				>
-					<div
-						class="w-2 h-2 rounded-full flex-shrink-0"
-						style="background-color: {isHidden ? 'hsl(var(--neutral-700))' : color}"
-					></div>
-					<div
-						class="{isHidden
-							? 'text-neutral-700'
-							: ''} overflow-hidden text-ellipsis whitespace-nowrap"
-					>
-						<span>{feature}</span>
-					</div>
-				</Button>
-			{/each}
-		</div>
-
-		{#if hasOverflow || isExpanded || containerHeight > containerHeightLine}
-			<Button variant="ghost" class="legend-btn" on:click={() => (isExpanded = !isExpanded)}>
-				<div class="transition-opacity duration-150" class:opacity-0={isExpanded}>
-					view all ({items.length})
-				</div>
-				<div class="transition-opacity duration-150 absolute" class:opacity-0={!isExpanded}>
-					collapse
-				</div>
-				<IconChevronDown
-					class={cn('ml-2 transition-transform duration-200', isExpanded && '-rotate-180')}
-				/>
-			</Button>
-		{/if}
-	</div>
-</div>
-
-<style lang="postcss">
-	:global(.legend-btn) {
-		@apply flex items-center hover:bg-transparent font-normal h-6 p-0 text-sm !important;
-	}
-</style>
diff --git a/frontend/src/lib/components/EChart.svelte b/frontend/src/lib/components/EChart.svelte
deleted file mode 100644
index c04d08c017..0000000000
--- a/frontend/src/lib/components/EChart.svelte
+++ /dev/null
@@ -1,453 +0,0 @@
-<script lang="ts">
-	import { onMount, onDestroy, createEventDispatcher } from 'svelte';
-	import * as echarts from 'echarts';
-	import type { ECElementEvent, EChartOption } from 'echarts';
-	import merge from 'lodash/merge';
-	import EChartTooltip from '$lib/components/EChartTooltip.svelte';
-	import CustomEChartLegend from '$lib/components/CustomEChartLegend.svelte';
-
-	let {
-		option,
-		chartInstance = $bindable(),
-		enableMousemove = false,
-		enableCustomZoom = false,
-		width = '100%',
-		height = '230px',
-		enableCustomTooltip = false,
-		enableTooltipClick = false,
-		showCustomLegend = false,
-		legendGroup = undefined,
-		markPoint = undefined
-	}: {
-		option: EChartOption;
-		chartInstance: echarts.ECharts | null;
-		enableMousemove?: boolean;
-		enableCustomZoom?: boolean;
-		width?: string;
-		height?: string;
-		enableCustomTooltip?: boolean;
-		enableTooltipClick?: boolean;
-		showCustomLegend?: boolean;
-		legendGroup?: { name: string; items: Array<{ feature: string }> };
-		markPoint?: ECElementEvent;
-	} = $props();
-	const dispatch = createEventDispatcher();
-
-	let chartDiv: HTMLDivElement;
-	let resizeObserver: ResizeObserver;
-
-	// todo this needs to change dynamically when we support light mode
-	const theme = $derived('dark');
-	const defaultOption: EChartOption = $derived.by(() => ({
-		backgroundColor: 'transparent',
-		animationDuration: 300,
-		animationDurationUpdate: 300,
-		...(enableCustomZoom && {
-			toolbox: {
-				feature: {
-					dataZoom: {
-						yAxisIndex: 'none',
-						icon: {
-							zoom: 'path://', // hack to remove zoom button
-							back: 'path://' // hack to remove restore button
-						}
-					}
-				}
-			}
-		}),
-		textStyle: {
-			fontFamily: 'Geist Mono, Geist'
-		}
-	}));
-
-	const mergedOption: EChartOption = $derived.by(() => {
-		if (!enableCustomTooltip) {
-			return merge({}, defaultOption, option);
-		}
-
-		const customTooltipOption = {
-			tooltip: {
-				formatter: () => '',
-				trigger: 'axis',
-				axisPointer: {
-					type: 'line'
-				},
-				position: 'top'
-			}
-		};
-
-		return merge({}, defaultOption, option, customTooltipOption);
-	});
-
-	let tooltipData = $state<{
-		xValue: number | null;
-		series: Array<{
-			name: string | undefined;
-			value: number;
-			color: string;
-		}>;
-	}>({ xValue: null, series: [] });
-	let isTooltipVisible = $state(false);
-	let isCommandPressed = $state(false);
-	let isMouseOverTooltip = $state(false);
-	let hideTimeoutId: ReturnType<typeof setTimeout>;
-
-	const isBarChart = $derived.by(() => {
-		const series = mergedOption.series as EChartOption.Series[];
-		return series?.some((s) => s.type === 'bar');
-	});
-
-	function handleKeyDown(event: KeyboardEvent) {
-		if ((event.metaKey || event.ctrlKey) && event.type === 'keydown') {
-			isCommandPressed = true;
-			disableChartInteractions();
-
-			if (exactX !== null && chartInstance) {
-				const option = chartInstance.getOption();
-				const series = option.series as EChartOption.Series[];
-				const firstSeries = series[0];
-
-				if (Array.isArray(firstSeries.data)) {
-					// Find the index of the point with matching x-value
-					const dataIndex = firstSeries.data.findIndex(
-						(point) => (point as [number, number])[0] === exactX
-					);
-
-					if (dataIndex !== -1) {
-						// for some reason, we need to showTip somewhere else first
-						chartInstance.dispatchAction({
-							type: 'showTip',
-							seriesIndex: 0,
-							dataIndex: -1
-						});
-						chartInstance.dispatchAction({
-							type: 'showTip',
-							seriesIndex: 0,
-							dataIndex: dataIndex
-						});
-					}
-				}
-			}
-		}
-	}
-
-	function handleKeyUp(event: KeyboardEvent) {
-		if (event.key === 'Meta' || event.key === 'Control') {
-			isCommandPressed = false;
-			enableChartInteractions();
-			if (!isMouseOverTooltip) {
-				isTooltipVisible = false;
-			}
-		}
-	}
-
-	function disableChartInteractions() {
-		chartInstance?.setOption({
-			triggerOn: 'none'
-		} as EChartOption);
-	}
-
-	function enableChartInteractions() {
-		chartInstance?.setOption({
-			triggerOn: 'mousemove'
-		} as EChartOption);
-	}
-
-	function resetChartPointer() {
-		if (!chartInstance) return;
-
-		// Get the zrender instance
-		const zr = chartInstance.getZr();
-		if (!zr) return;
-
-		// Simulate mouseout
-		zr.handler.dispatch('mouseout', {
-			type: 'mouseout'
-		});
-	}
-
-	function initChart() {
-		if (!chartDiv) return;
-
-		chartInstance?.dispose();
-		chartInstance = echarts.init(chartDiv, theme);
-		chartInstance.setOption(mergedOption);
-
-		chartInstance.on('click', (params: ECElementEvent) => {
-			dispatch('click', {
-				detail: params,
-				fromTooltip: false
-			});
-			resetChartPointer();
-		});
-		chartInstance.on('datazoom', (params: EChartOption.DataZoom) => dispatch('datazoom', params));
-
-		if (enableMousemove) {
-			chartInstance.on('mousemove', (params: ECElementEvent) => {
-				if (params.componentType === 'series') {
-					chartInstance?.getZr().setCursorStyle('pointer');
-				}
-			});
-		}
-
-		if (enableCustomZoom) {
-			activateZoom();
-		}
-
-		if (enableCustomTooltip) {
-			setupCustomTooltip();
-		}
-	}
-
-	function activateZoom() {
-		chartInstance?.dispatchAction({
-			type: 'takeGlobalCursor',
-			key: 'dataZoomSelect',
-			dataZoomSelectActive: true
-		});
-	}
-
-	function handleTooltipMouseEnter() {
-		if (hideTimeoutId) {
-			clearTimeout(hideTimeoutId);
-		}
-		isMouseOverTooltip = true;
-	}
-
-	function handleTooltipMouseLeave() {
-		isMouseOverTooltip = false;
-		hideTooltip();
-	}
-
-	function hideTooltip() {
-		hideTimeoutId = setTimeout(() => {
-			if (!isMouseOverTooltip && !isCommandPressed) {
-				isTooltipVisible = false;
-			}
-		}, 150);
-	}
-
-	function setupCustomTooltip() {
-		if (!chartInstance || !enableCustomTooltip) return;
-
-		const zr = chartInstance.getZr();
-		zr.on('mousemove', showTooltip);
-		zr.on('globalout', hideTooltip);
-	}
-
-	let exactX = $state<number | null>(null);
-
-	function showTooltip(params: { offsetX: number; offsetY: number }) {
-		if (isCommandPressed) return;
-
-		if (hideTimeoutId) {
-			clearTimeout(hideTimeoutId);
-		}
-
-		const pointInPixel = [params.offsetX, params.offsetY];
-		const pointInGrid = chartInstance!.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
-
-		if (!pointInGrid || !chartInstance) return;
-
-		const option = chartInstance.getOption();
-		const series = option.series as EChartOption.Series[];
-		const colors = option.color as string[];
-
-		if (isBarChart) {
-			// Handle stacked bar chart
-			const xAxis = option.xAxis as EChartOption.XAxis;
-			if (!Array.isArray(xAxis)) return;
-
-			const categories = xAxis[0].data as string[];
-			if (!categories) return;
-
-			// Convert mouse position to domain coordinates
-			const xValue = pointInGrid[0];
-
-			// Find the nearest valid category index
-			const categoryIndex = Math.round(xValue);
-
-			// Only show tooltip if we're at a valid category index
-			if (categoryIndex >= 0 && categoryIndex < categories.length) {
-				const seriesData = series
-					.map((s, index) => {
-						if (!Array.isArray(s.data)) return null;
-						return {
-							name: s.name,
-							value: s.data[categoryIndex] as number,
-							color: colors[index]
-						};
-					})
-					.filter((item): item is NonNullable<typeof item> => item !== null);
-
-				if (seriesData.length > 0) {
-					tooltipData = {
-						xValue: categoryIndex,
-						series: seriesData
-					};
-					isTooltipVisible = true;
-				} else {
-					isTooltipVisible = false;
-				}
-			} else {
-				isTooltipVisible = false;
-			}
-		} else {
-			// Find the nearest x-coordinate that exists in the data
-			const firstSeries = series[0];
-			if (!Array.isArray(firstSeries.data)) return;
-
-			const nearestPoint = firstSeries.data.reduce((prev, curr) => {
-				const [prevX] = prev as [number, number];
-				const [currX] = curr as [number, number];
-				return Math.abs(currX - pointInGrid[0]) < Math.abs(prevX - pointInGrid[0]) ? curr : prev;
-			});
-
-			exactX = (nearestPoint as [number, number])[0];
-
-			// Get values for all series at this exact x-coordinate
-			const seriesData = series
-				.map((s, index) => {
-					if (!Array.isArray(s.data)) return null;
-
-					const exactPoint = s.data.find((point) => (point as [number, number])[0] === exactX);
-					if (!exactPoint) return null;
-
-					return {
-						name: s.name,
-						value: (exactPoint as [number, number])[1],
-						color: colors[index]
-					};
-				})
-				.filter((item): item is NonNullable<typeof item> => item !== null);
-
-			// Only show tooltip if we found matching data points
-			if (seriesData.length > 0) {
-				tooltipData = {
-					xValue: exactX,
-					series: seriesData
-				};
-				isTooltipVisible = true;
-			} else {
-				isTooltipVisible = false;
-			}
-		}
-	}
-
-	function handleResize() {
-		chartInstance?.resize();
-	}
-
-	onMount(() => {
-		initChart();
-		resizeObserver = new ResizeObserver(handleResize);
-		resizeObserver.observe(chartDiv);
-	});
-
-	onDestroy(() => {
-		chartInstance?.dispose();
-		resizeObserver?.disconnect();
-		if (hideTimeoutId) {
-			clearTimeout(hideTimeoutId);
-		}
-	});
-
-	$effect(() => {
-		if (!chartInstance) return;
-
-		const updatedOption = { ...mergedOption };
-
-		// Add mark point series if provided
-		if (markPoint?.data) {
-			const series: EChartOption.Series[] = Array.isArray(updatedOption.series)
-				? [...((updatedOption.series ?? []) as EChartOption.Series[])]
-				: [(updatedOption.series ?? []) as EChartOption.Series];
-
-			series.push({
-				type: 'line',
-				markLine: {
-					silent: true,
-					symbol: [false, 'circle'],
-					lineStyle: {
-						color: '#ffffff',
-						type: [8, 8],
-						width: 1
-					},
-					emphasis: {
-						disabled: true
-					},
-					data: [
-						[
-							{ xAxis: (markPoint.data as number[])[0], yAxis: 0 },
-							{ xAxis: (markPoint.data as number[])[0], yAxis: (markPoint.data as number[])[1] }
-						]
-					]
-				},
-				z: 10,
-				animation: false
-			} as EChartOption.Series);
-
-			updatedOption.series = series;
-		}
-
-		chartInstance.setOption(updatedOption);
-	});
-
-	function handleDoubleClick() {
-		chartInstance?.dispatchAction({
-			type: 'dataZoom',
-			start: 0,
-			end: 100
-		});
-	}
-
-	function handleWindowBlur() {
-		isCommandPressed = false;
-		enableChartInteractions();
-		if (!isMouseOverTooltip) {
-			isTooltipVisible = false;
-		}
-	}
-</script>
-
-<svelte:window on:keydown={handleKeyDown} on:keyup={handleKeyUp} on:blur={handleWindowBlur} />
-
-<div style="width: {width}; height: {height};">
-	<div
-		bind:this={chartDiv}
-		ondblclick={handleDoubleClick}
-		role="application"
-		style="width: 100%; height: 100%;"
-	></div>
-	{#if enableCustomTooltip}
-		<div
-			class="relative z-50 inline-block"
-			role="tooltip"
-			onmouseenter={handleTooltipMouseEnter}
-			onmouseleave={handleTooltipMouseLeave}
-		>
-			<EChartTooltip
-				visible={isTooltipVisible}
-				xValue={tooltipData.xValue}
-				series={tooltipData.series}
-				clickable={enableTooltipClick}
-				xAxisCategories={isBarChart && chartInstance
-					? ((chartInstance.getOption()?.xAxis as EChartOption.XAxis[])?.[0]?.data as string[])
-					: undefined}
-				chart={chartInstance}
-				on:click={(event) =>
-					dispatch('click', {
-						detail: event.detail,
-						fromTooltip: true
-					})}
-			/>
-		</div>
-	{/if}
-</div>
-{#if showCustomLegend && legendGroup && chartInstance}
-	<CustomEChartLegend
-		groupName={legendGroup.name}
-		items={legendGroup.items}
-		chart={chartInstance}
-	/>
-{/if}
diff --git a/frontend/src/lib/components/EChartTooltip.svelte b/frontend/src/lib/components/EChartTooltip.svelte
deleted file mode 100644
index b6efc5940f..0000000000
--- a/frontend/src/lib/components/EChartTooltip.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts">
-	import { isMacOS } from '$lib/util/browser';
-	import ScrollArea from '$lib/components/ui/scroll-area/scroll-area.svelte';
-	import { flyAndScale } from '$lib/utils.js';
-	import { formatDate, formatValue } from '$lib/util/format';
-	import { createEventDispatcher } from 'svelte';
-	import Button from '$lib/components/ui/button/button.svelte';
-	import { Separator } from '$lib/components/ui/separator/';
-	import Badge from '$lib/components/ui/badge/badge.svelte';
-	import { handleChartHighlight } from '$lib/util/chart';
-	import type { EChartsType } from 'echarts';
-
-	let {
-		visible,
-		xValue,
-		series,
-		clickable = false,
-		xAxisCategories = undefined,
-		chart
-	}: {
-		visible: boolean;
-		xValue: number | null;
-		series: Array<{
-			name: string | undefined;
-			value: number;
-			color: string;
-		}>;
-		clickable?: boolean;
-		xAxisCategories?: string[];
-		chart: EChartsType | null;
-	} = $props();
-
-	const tooltipHeight = '300px';
-	const dispatch = createEventDispatcher();
-
-	function handleSeriesClick(item: (typeof series)[number]) {
-		if (!clickable) return;
-		dispatch('click', {
-			componentType: 'series',
-			data: [xValue, item.value],
-			seriesName: item.name
-		});
-	}
-
-	function getTooltipTitle(xValue: number | null, xAxisCategories?: string[]): string {
-		if (xValue === null) return '';
-
-		if (xAxisCategories && typeof xValue === 'number' && Number.isInteger(xValue)) {
-			return xAxisCategories[xValue];
-		}
-
-		return formatDate(xValue);
-	}
-
-	function handleMouseEnter(seriesName: string) {
-		handleChartHighlight(chart, seriesName, 'highlight');
-	}
-
-	function handleMouseLeave(seriesName: string) {
-		handleChartHighlight(chart, seriesName, 'downplay');
-	}
-</script>
-
-<div class="flex relative">
-	<div class="absolute pointer-events-none w-1" style:height={tooltipHeight}></div>
-	{#if xValue !== null && visible}
-		<div
-			class="absolute text-small bg-neutral-200 border border-neutral-400 rounded-md shadow-lg flex flex-col whitespace-nowrap"
-			style:max-height={tooltipHeight}
-			transition:flyAndScale={{ duration: 200 }}
-		>
-			<div class="text-neutral-700 bg-neutral-300 w-full px-3 py-1">
-				{getTooltipTitle(xValue, xAxisCategories)}
-			</div>
-			<ScrollArea class="flex flex-col" orientation="both">
-				<div class="flex flex-col">
-					{#each series as item}
-						<Button
-							variant="ghost"
-							class="px-3 text-small text-neutral-800 text-left justify-between w-full cursor-{clickable
-								? 'pointer'
-								: 'default'}"
-							on:click={() => handleSeriesClick(item)}
-							on:mouseenter={() => handleMouseEnter(item.name ?? '')}
-							on:mouseleave={() => handleMouseLeave(item.name ?? '')}
-						>
-							<div class="flex items-center gap-2">
-								{#if item.color}
-									<div class="w-2 h-2 rounded-full" style:background-color={item.color}></div>
-								{/if}
-								{#if item.name}
-									<span class="mr-5">{item.name}</span>
-								{/if}
-							</div>
-							<span class="text-foreground">{formatValue(item.value)}</span>
-						</Button>
-					{/each}
-				</div>
-			</ScrollArea>
-			<Separator />
-			<div class="text-foreground text-xs px-3 py-2">
-				<Badge variant="key">{isMacOS() ? '⌘' : 'Ctrl'}</Badge> to lock tooltip
-			</div>
-		</div>
-	{/if}
-</div>
diff --git a/frontend/src/lib/components/PercentileChart.svelte b/frontend/src/lib/components/PercentileChart.svelte
deleted file mode 100644
index 61e3fc83b8..0000000000
--- a/frontend/src/lib/components/PercentileChart.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script lang="ts">
-	import EChart from '$lib/components/EChart.svelte';
-	import type { EChartOption, EChartsType } from 'echarts';
-	import type { TimeSeriesItem } from '$lib/types/Model/Model';
-	import { createChartOption } from '$lib/util/chart-options.svelte';
-
-	let {
-		data = null,
-		chartInstance = $bindable()
-	}: { data: TimeSeriesItem[] | null; chartInstance: EChartsType | null } = $props();
-
-	const targetLabels = ['p5', 'p50', 'p95'];
-
-	function getPercentileChartSeries(data: TimeSeriesItem[]): EChartOption.Series[] {
-		return targetLabels
-			.filter((label) => data.some((point) => point.label === label))
-			.map((label) => ({
-				name: label,
-				type: 'line',
-				emphasis: {
-					focus: 'series'
-				},
-				data: data.filter((point) => point.label === label).map((point) => [point.ts, point.value])
-			})) as EChartOption.Series[];
-	}
-
-	function getPercentileChartOption(data: TimeSeriesItem[]): EChartOption {
-		const processedData = getPercentileChartSeries(data);
-		return createChartOption({
-			xAxis: {
-				type: 'time',
-				splitLine: {
-					show: true
-				}
-			},
-			yAxis: {
-				type: 'value',
-				splitLine: {
-					show: true
-				}
-			},
-			series: processedData
-		});
-	}
-
-	let percentileChartOption = $derived.by(() => {
-		if (!data) return {};
-		return getPercentileChartOption(data);
-	});
-</script>
-
-<EChart
-	option={percentileChartOption}
-	bind:chartInstance
-	enableMousemove={false}
-	enableCustomZoom={true}
-	enableCustomTooltip={true}
-	on:datazoom
-/>
diff --git a/frontend/src/lib/components/charts/FeaturesLineChart.svelte b/frontend/src/lib/components/charts/FeaturesLineChart.svelte
new file mode 100644
index 0000000000..5f83d0142b
--- /dev/null
+++ b/frontend/src/lib/components/charts/FeaturesLineChart.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { accessor, Circle, findRelatedData, Line, LineChart, Tooltip } from 'layerchart';
+	import { scaleOrdinal } from 'd3';
+
+	import { colors, lineChartProps, tooltipProps, type DateValue } from './common';
+	import type { TimeSeriesItem } from '$lib/types/Model/Model';
+	import { formatDate, formatValue } from '$lib/util/format';
+	import { Badge } from '../ui/badge';
+	import { isMacOS } from '$src/lib/util/browser';
+	import { NULL_VALUE } from '$src/lib/constants/common';
+
+	type LineChartProps = ComponentProps<typeof LineChart>;
+	type BrushProps = Exclude<LineChartProps['brush'], undefined | boolean>;
+
+	type Props = {
+		data: { feature: string; points: TimeSeriesItem[] }[];
+		markPoint?: DateValue;
+		onitemclick?: (item: {
+			series: NonNullable<LineChartProps['series']>[number];
+			data: DateValue;
+			value: number;
+		}) => void;
+		onbrushend?: BrushProps['onbrushend'];
+	} & Omit<LineChartProps, 'data'>;
+
+	let { data, markPoint, onitemclick, onbrushend, ...restProps }: Props = $props();
+
+	const features = $derived([...new Set(data.map((d) => d.feature))]);
+	const colorScale = $derived(scaleOrdinal<string>().domain(features).range(colors));
+</script>
+
+<LineChart
+	x="date"
+	y="value"
+	series={data.map((d) => {
+		return {
+			key: d.feature,
+			data: d.points.map((p) => {
+				return {
+					date: new Date(p.ts),
+					value: p.value === NULL_VALUE ? null : p.value
+				};
+			}),
+			color: colorScale(d.feature)
+		};
+	})}
+	padding={{ left: 24, bottom: 48 }}
+	legend={{ placement: 'bottom-left', classes: { root: 'right-0 overflow-auto scrollbar-none' } }}
+	renderContext="canvas"
+	{...lineChartProps}
+	{...restProps}
+	brush={{ onbrushend }}
+>
+	<svelte:fragment slot="aboveMarks" let:xScale let:yScale>
+		{#if markPoint}
+			{@const x = xScale(markPoint.date)}
+			{@const y = yScale(markPoint.value)}
+			<Line
+				x1={x}
+				y1={yScale(0)}
+				x2={x}
+				y2={y}
+				class="stroke-surface-content [stroke-dasharray:4,4]"
+			/>
+			<Circle cx={x} cy={y} r={4} class="fill-surface-content" />
+		{/if}
+	</svelte:fragment>
+
+	<svelte:fragment slot="tooltip" let:x let:y let:height let:visibleSeries>
+		<Tooltip.Root {...tooltipProps.root} x="data" y={height + 24} pointerEvents let:data>
+			<Tooltip.Header {...tooltipProps.header}>
+				{formatDate(x(data))}
+			</Tooltip.Header>
+
+			<Tooltip.List {...tooltipProps.list} class="px-1 pb-1 gap-y-0">
+				{#each visibleSeries as s}
+					{@const seriesTooltipData = s.data ? findRelatedData(s.data, data, x) : data}
+					{@const valueAccessor = accessor(s.value ?? (s.data ? (y as unknown) : s.key))}
+					{@const value = seriesTooltipData ? valueAccessor(seriesTooltipData) : null}
+
+					<button
+						class="col-span-full grid grid-cols-[1fr,auto] gap-6 hover:bg-neutral-400 py-2 px-3 rounded"
+						onclick={() => onitemclick?.({ series: s, data: seriesTooltipData, value })}
+					>
+						<Tooltip.Item
+							label={s.label ?? (s.key !== 'default' ? s.key : 'value')}
+							{value}
+							color={s.color}
+							format={formatValue}
+							{...tooltipProps.item}
+						/>
+					</button>
+				{/each}
+			</Tooltip.List>
+
+			<div class="text-foreground text-xs px-3 py-2 border-t">
+				<Badge variant="key">{isMacOS() ? '⌘' : 'Ctrl'}</Badge> to lock tooltip
+			</div>
+		</Tooltip.Root>
+	</svelte:fragment>
+</LineChart>
diff --git a/frontend/src/lib/components/charts/PercentileLineChart.svelte b/frontend/src/lib/components/charts/PercentileLineChart.svelte
new file mode 100644
index 0000000000..532871f7d5
--- /dev/null
+++ b/frontend/src/lib/components/charts/PercentileLineChart.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+	import type { ComponentProps } from 'svelte';
+	import { LineChart } from 'layerchart';
+	import merge from 'lodash/merge';
+
+	import { lineChartProps } from './common';
+	import type { TimeSeriesItem } from '$lib/types/Model/Model';
+
+	type LineChartProps = ComponentProps<typeof LineChart>;
+	type BrushProps = Exclude<LineChartProps['brush'], undefined | boolean>;
+
+	type Props = {
+		data: TimeSeriesItem[];
+		onbrushend?: BrushProps['onbrushend'];
+	} & Omit<LineChartProps, 'data'>;
+
+	let { data, onbrushend, ...restProps }: Props = $props();
+</script>
+
+<LineChart
+	x="date"
+	y="value"
+	series={[
+		{ label: 'p95', color: '#4B92FF' },
+		{ label: 'p50', color: '#7DFFB3' },
+		{ label: 'p5', color: '#FDDD61' }
+	].map((c) => {
+		return {
+			key: c.label,
+			data:
+				data
+					?.filter((d) => d.label === c.label)
+					.map((d) => {
+						return {
+							date: new Date(d.ts),
+							value: d.value
+						};
+					}) ?? [],
+			color: c.color
+		};
+	})}
+	padding={{ left: 36, bottom: 20 }}
+	brush={{ onbrushend }}
+	{...merge(
+		{},
+		lineChartProps,
+		{
+			props: {
+				yAxis: { format: 'metric' }
+			}
+		},
+		restProps
+	)}
+/>
diff --git a/frontend/src/lib/components/charts/common.ts b/frontend/src/lib/components/charts/common.ts
new file mode 100644
index 0000000000..7941a25174
--- /dev/null
+++ b/frontend/src/lib/components/charts/common.ts
@@ -0,0 +1,71 @@
+import type { BarChart, LineChart, PieChart } from 'layerchart';
+import type { ComponentProps } from 'svelte';
+
+export type DateValue = { date: Date; value: number };
+
+export const colors = [
+	'#E5174B',
+	'#E54D4A',
+	'#E17545',
+	'#E3994C',
+	'#DFAF4F',
+	'#87BE52',
+	'#53B167',
+	'#4DA67D',
+	'#4EA797',
+	'#4491CE',
+	'#4592CC',
+	'#4172D2',
+	'#5B5AD1',
+	'#785AD4',
+	'#9055D5',
+	'#BF50D3',
+	'#CB5587'
+];
+
+export const tooltipProps = {
+	root: {
+		variant: 'none',
+		class: 'text-small bg-neutral-200 border border-neutral-400 rounded-md shadow-lg',
+		motion: false
+	},
+	header: {
+		class: 'text-neutral-700 bg-neutral-300 px-3 py-1'
+	},
+	list: {
+		class: 'gap-4 px-3 py-2'
+	},
+	item: {
+		valueAlign: 'right',
+		classes: {
+			label: 'text-neutral-800'
+		}
+	}
+} satisfies NonNullable<ComponentProps<typeof LineChart>['props']>['tooltip'];
+
+export const highlightProps = {
+	motion: false
+} satisfies NonNullable<ComponentProps<typeof LineChart>['props']>['highlight'];
+
+export const barChartProps = {
+	props: {
+		tooltip: tooltipProps
+	}
+} satisfies NonNullable<ComponentProps<typeof BarChart>>;
+
+export const lineChartProps = {
+	grid: {
+		x: { class: 'stroke-neutral-500/30' },
+		y: { class: 'stroke-neutral-500/30' }
+	},
+	props: {
+		tooltip: tooltipProps,
+		highlight: highlightProps
+	}
+} satisfies NonNullable<ComponentProps<typeof LineChart>>;
+
+export const pieChartProps = {
+	props: {
+		tooltip: tooltipProps
+	}
+} satisfies NonNullable<ComponentProps<PieChart<unknown>>>;
diff --git a/frontend/src/lib/constants/common.ts b/frontend/src/lib/constants/common.ts
new file mode 100644
index 0000000000..edd3d4ad05
--- /dev/null
+++ b/frontend/src/lib/constants/common.ts
@@ -0,0 +1,2 @@
+// Maps to  `Constants.magicNullDouble` on server - https://github.com/zipline-ai/chronon/blob/main/api/src/main/scala/ai/chronon/api/Constants.scala#L87
+export const NULL_VALUE = -1234567890;
diff --git a/frontend/src/lib/util/chart-options.svelte.ts b/frontend/src/lib/util/chart-options.svelte.ts
deleted file mode 100644
index 7da101d2e1..0000000000
--- a/frontend/src/lib/util/chart-options.svelte.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import type { EChartOption } from 'echarts';
-import merge from 'lodash/merge';
-import { getCssColorAsHex } from '$lib/util/colors';
-
-let neutral300 = $state('');
-let neutral700 = $state('');
-
-const colorInterval = setInterval(() => {
-	const color300 = getCssColorAsHex('--neutral-300');
-	const color700 = getCssColorAsHex('--neutral-700');
-
-	if (color300 && color700) {
-		neutral300 = color300;
-		neutral700 = color700;
-		clearInterval(colorInterval);
-	}
-}, 100);
-
-export function createChartOption(
-	customOption: Partial<EChartOption> = {},
-	customColors = false
-): EChartOption {
-	const defaultOption: EChartOption = {
-		color: customColors
-			? [
-					'#E5174B',
-					'#E54D4A',
-					'#E17545',
-					'#E3994C',
-					'#DFAF4F',
-					'#87BE52',
-					'#53B167',
-					'#4DA67D',
-					'#4EA797',
-					'#4491CE',
-					'#4592CC',
-					'#4172D2',
-					'#5B5AD1',
-					'#785AD4',
-					'#9055D5',
-					'#BF50D3',
-					'#CB5587'
-				]
-			: undefined,
-		tooltip: {
-			trigger: 'axis',
-			axisPointer: {
-				type: 'line',
-				lineStyle: {
-					color: neutral700,
-					type: 'solid'
-				}
-			},
-			position: 'top',
-			confine: true
-		},
-		xAxis: {
-			type: 'time',
-			axisLabel: {
-				formatter: {
-					month: '{MMM} {d}',
-					day: '{MMM} {d}'
-				} as unknown as string,
-				color: neutral700
-			},
-			splitLine: {
-				show: true,
-				lineStyle: {
-					color: neutral300
-				}
-			},
-			axisLine: {
-				lineStyle: {
-					color: neutral300
-				}
-			}
-		},
-		yAxis: {
-			type: 'value',
-			axisLabel: {
-				formatter: (value: number) => (value % 1 === 0 ? value.toFixed(0) : value.toFixed(1)),
-				color: neutral700
-			},
-			splitLine: {
-				show: true,
-				lineStyle: {
-					color: neutral300
-				}
-			},
-			axisLine: {
-				lineStyle: {
-					color: neutral300
-				}
-			}
-		},
-		grid: {
-			top: 5,
-			right: 1,
-			bottom: 0,
-			left: 0,
-			containLabel: true
-		}
-	};
-
-	const baseSeriesStyle = {
-		showSymbol: false,
-		lineStyle: {
-			width: 1
-		},
-		symbolSize: 7
-	};
-
-	if (customOption.series) {
-		const series = Array.isArray(customOption.series) ? customOption.series : [customOption.series];
-		customOption.series = series.map((s) => merge({}, baseSeriesStyle, s));
-	}
-
-	return merge({}, defaultOption, customOption);
-}
diff --git a/frontend/src/lib/util/chart.ts b/frontend/src/lib/util/chart.ts
deleted file mode 100644
index fc0e5e208a..0000000000
--- a/frontend/src/lib/util/chart.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import type { EChartsType } from 'echarts';
-
-export function handleChartHighlight(
-	chart: EChartsType | null,
-	seriesName: string,
-	type: 'highlight' | 'downplay'
-) {
-	if (!chart || !seriesName) return;
-
-	// Get the series selected state from legend
-	const options = chart.getOption();
-	const legendOpt = Array.isArray(options.legend) ? options.legend[0] : options.legend;
-	const isSelected = legendOpt?.selected?.[seriesName];
-
-	// Only highlight if the series is selected (visible)
-	if (isSelected !== false) {
-		chart.dispatchAction({
-			type,
-			seriesName
-		});
-	}
-}
-
-export function getSeriesColor(chart: EChartsType | null, seriesName: string): string {
-	if (!chart) return '#000000';
-
-	const options = chart.getOption();
-	if (!options?.series || !options?.color) return '#000000';
-
-	// Find the series index by name
-	const seriesIndex = options.series.findIndex((s) => s.name === seriesName);
-	if (seriesIndex === -1) return '#000000';
-
-	// Get color using the correct series index
-	const colors = options.color as string[];
-	return colors[seriesIndex] || '#000000';
-}
diff --git a/frontend/src/routes/joins/[slug]/observability/distributions/+page.svelte b/frontend/src/routes/joins/[slug]/observability/distributions/+page.svelte
index 09f3129b35..d9c7cb5532 100644
--- a/frontend/src/routes/joins/[slug]/observability/distributions/+page.svelte
+++ b/frontend/src/routes/joins/[slug]/observability/distributions/+page.svelte
@@ -1,23 +1,20 @@
 <script lang="ts">
-	import { connect, type EChartsType, type EChartOption } from 'echarts';
 	import { queryParameters } from 'sveltekit-search-params';
+	import type { DomainType } from 'layerchart/utils/scales';
 
 	import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
-	import PercentileChart from '$lib/components/PercentileChart.svelte';
 	import { getSortParamsConfig, getSortParamKey, sortDistributions } from '$lib/util/sort';
 	import type { FeatureResponse } from '$src/lib/types/Model/Model.js';
 	import ChartControls from '$src/lib/components/ChartControls.svelte';
 	import ObservabilityNavTabs from '$routes/joins/[slug]/observability/ObservabilityNavTabs.svelte';
 	import { Separator } from '$src/lib/components/ui/separator';
-	import ModelTable from '$routes/joins/[slug]/observability/ModelTable.svelte';
-	import { untrack } from 'svelte';
+	import ModelTable from '../ModelTable.svelte';
+	import PercentileLineChart from '$src/lib/components/charts/PercentileLineChart.svelte';
 
 	const { data } = $props();
 
 	let isFeatureMonitoringOpen = $state(true);
 
-	let distributionCharts: { [key: string]: EChartsType } = $state({});
-
 	let isLoadingDistributions = $state(true);
 	let distributions: FeatureResponse[] = $state([]);
 	try {
@@ -37,54 +34,12 @@
 	});
 	const sortedDistributions = $derived(sortDistributions(distributions, params[sortKey]));
 
-	$effect(() => {
-		connectCharts();
-	});
-
-	function connectCharts() {
-		const allCharts = Object.values(distributionCharts);
-		connect(allCharts);
-	}
-
-	let isZoomed = $state(false);
-	let currentZoomState = $state({ start: 0, end: 100 });
-
-	function handleZoom(event: CustomEvent<EChartOption.DataZoom>) {
-		const detail = event.detail as {
-			start?: number;
-			end?: number;
-			batch?: Array<{ startValue: number; endValue: number }>;
-		};
-		const start = detail.start ?? detail.batch?.[0]?.startValue ?? 0;
-		const end = detail.end ?? detail.batch?.[0]?.endValue ?? 100;
-		isZoomed = start !== 0 || end !== 100;
-		currentZoomState = { start, end };
-	}
+	let xDomain = $state<DomainType | undefined>(null);
+	let isZoomed = $derived(xDomain != null);
 
 	function resetZoom() {
-		Object.values(distributionCharts).forEach((chart) => {
-			chart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
-		});
-
-		currentZoomState = { start: 0, end: 100 };
-		isZoomed = false;
+		xDomain = null;
 	}
-
-	$effect(() => {
-		const allCharts = Object.values(distributionCharts);
-		if (allCharts.length) {
-			untrack(() => {
-				if (currentZoomState.start !== 0 && currentZoomState.end !== 100) {
-					allCharts.forEach((chart) => {
-						chart.dispatchAction({
-							type: 'dataZoom',
-							batch: [{ startValue: currentZoomState.start, endValue: currentZoomState.end }]
-						});
-					});
-				}
-			});
-		}
-	});
 </script>
 
 {#if data.model}
@@ -119,11 +74,14 @@
 			{#each sortedDistributions as feature}
 				<CollapsibleSection title={feature.feature} size="small" open={true}>
 					{#snippet collapsibleContent()}
-						<PercentileChart
-							data={feature.current ?? null}
-							bind:chartInstance={distributionCharts[feature.feature]}
-							on:datazoom={handleZoom}
-						/>
+						<div class="h-[230px]">
+							<PercentileLineChart
+								data={feature?.current ?? []}
+								{xDomain}
+								onbrushend={(e) => (xDomain = e.xDomain)}
+								renderContext="canvas"
+							/>
+						</div>
 					{/snippet}
 				</CollapsibleSection>
 			{/each}
diff --git a/frontend/src/routes/joins/[slug]/observability/drift/+page.svelte b/frontend/src/routes/joins/[slug]/observability/drift/+page.svelte
index 433166a882..d0142d7568 100644
--- a/frontend/src/routes/joins/[slug]/observability/drift/+page.svelte
+++ b/frontend/src/routes/joins/[slug]/observability/drift/+page.svelte
@@ -1,194 +1,75 @@
 <script lang="ts">
-	import { untrack } from 'svelte';
-	import EChart from '$lib/components/EChart.svelte';
-	import { connect } from 'echarts';
-	import type { EChartOption, EChartsType, ECElementEvent } from 'echarts';
+	import { untrack, type ComponentProps } from 'svelte';
+	import { BarChart, PieChart } from 'layerchart';
+	import type { DomainType } from 'layerchart/utils/scales';
 
 	import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
-	import type { FeatureResponse, TimeSeriesItem } from '$lib/types/Model/Model';
+	import type { FeatureResponse } from '$lib/types/Model/Model';
 	import { ScrollArea } from '$lib/components/ui/scroll-area';
-	import ResetZoomButton from '$lib/components/ResetZoomButton.svelte';
-	import { Button } from '$lib/components/ui/button';
 	import { Api } from '$lib/api/api';
-	import InfoTooltip from '$lib/components/InfoTooltip.svelte';
 	import { Dialog, DialogContent, DialogHeader } from '$lib/components/ui/dialog';
-	import { formatDate, formatValue } from '$lib/util/format';
-	import PercentileChart from '$lib/components/PercentileChart.svelte';
-	import { createChartOption } from '$lib/util/chart-options.svelte';
+	import { formatDate } from '$lib/util/format';
 	import { METRIC_SCALES } from '$lib/types/MetricType/MetricType';
-	import { getSeriesColor } from '$lib/util/chart';
-	import { handleChartHighlight } from '$lib/util/chart';
 	import ChartControls from '$lib/components/ChartControls.svelte';
 	import type { JoinData } from '$routes/joins/[slug]/services/joins.service';
 	import ModelTable from '$routes/joins/[slug]/observability/ModelTable.svelte';
 	import Separator from '$lib/components/ui/separator/separator.svelte';
-	import ObservabilityNavTabs from '$routes/joins/[slug]/observability/ObservabilityNavTabs.svelte';
+	import ObservabilityNavTabs from '../ObservabilityNavTabs.svelte';
+	import FeaturesLineChart from '$lib/components/charts/FeaturesLineChart.svelte';
+	import PercentileLineChart from '$lib/components/charts/PercentileLineChart.svelte';
+	import {
+		type DateValue,
+		barChartProps,
+		pieChartProps,
+		tooltipProps
+	} from '$lib/components/charts/common';
+	import { cn } from '$src/lib/utils';
+	import { isMacOS } from '$src/lib/util/browser';
+
+	type FeaturesLineChartProps = ComponentProps<typeof FeaturesLineChart>;
 
 	const api = new Api();
 
 	const { data }: { data: JoinData } = $props();
-	let scale = $derived(METRIC_SCALES[data.metricType]);
-	const joinTimeseries = $derived(data.joinTimeseries);
-	let isFeatureMonitoringOpen = $state(true);
-	let isSheetOpen = $state(false);
-	let selectedEvents = $state<ECElementEvent[]>([]);
-	let selectedSeries: string | undefined = $state(undefined);
-	let isZoomed = $state(false);
-	let currentZoomState = $state({ start: 0, end: 100 });
-
-	let percentileData: FeatureResponse | null = $state(null);
-
-	let isComparedFeatureZoomed = $state(false);
-
-	let distributionCharts: { [key: string]: EChartsType } = $state({});
-
-	let groupByCharts: { [key: string]: EChartsType } = $state({});
-	let percentileChart: EChartsType | null = $state(null);
-	let comparedFeatureChart: EChartsType | null = $state(null);
-	let nullRatioChart: EChartsType | null = $state(null);
-	let dialogGroupChart: EChartsType | null = $state(null);
-
-	const allCharts = $derived.by(() => {
-		const charts: EChartsType[] = [];
-		if (dialogGroupChart) charts.push(dialogGroupChart);
-		if (percentileChart) charts.push(percentileChart);
-		charts.push(...Object.values(groupByCharts));
-		charts.push(...Object.values(distributionCharts));
-		return charts.filter((chart): chart is EChartsType => chart !== null);
-	});
-
-	function createGroupByChartOption(
-		features: { feature: string; points: TimeSeriesItem[] }[]
-	): EChartOption {
-		const series = features.map(({ feature, points }) => ({
-			name: feature,
-			type: 'line',
-			data: points.map((point) => [point.ts, point.value]),
-			symbolSize: 16,
-			emphasis: {
-				focus: 'series',
-				itemStyle: {
-					borderWidth: 2,
-					borderColor: '#fff'
-				}
-			}
-		})) as EChartOption.Series[];
-
-		return createChartOption(
-			{
-				yAxis: {
-					min: scale.min,
-					max: scale.max
-				},
-				series: series as EChartOption.Series[]
-			},
-			true
-		);
-	}
-
-	let groupSectionStates: { [key: string]: boolean } = $state(
-		untrack(() => Object.fromEntries(joinTimeseries.items.map((group) => [group.name, true])))
-	);
 
-	$effect(() => {
-		connectCharts();
+	const metricTypeDomain = $derived.by(() => {
+		const scale = METRIC_SCALES[data.metricType];
+		return [scale.min, scale.max];
 	});
 
-	function connectCharts() {
-		if (allCharts.length > 0) {
-			connect(allCharts);
-		}
-	}
-
-	function handleChartClick(
-		event: ECElementEvent,
-		chartInstance: EChartsType,
-		fromTooltip = false
-	) {
-		if (event.data) {
-			const [timestamp, clickedValue] = event.data as [string, number];
-			const date = new Date(timestamp);
-
-			// Get all series data
-			const allSeries = chartInstance.getOption().series as EChartOption.Series[];
-
-			// Filter events with matching points
-			const matchingEvents = allSeries.flatMap((series) => {
-				if (Array.isArray(series.data)) {
-					const matchingPointIndex = series.data.findIndex((item) => {
-						const [itemTimestamp, itemValue] = item as [string, number];
-						return (
-							new Date(itemTimestamp).getTime() === date.getTime() && itemValue === clickedValue
-						);
-					});
+	let isFeatureMonitoringOpen = $state(true);
 
-					if (matchingPointIndex !== -1) {
-						return [
-							{
-								...event,
-								seriesName: series.name
-							}
-						];
-					}
-				}
-				return [];
-			});
+	type SeriesItem = NonNullable<FeaturesLineChartProps['series']>[number];
+	let selectedSeriesPoint = $state<{ series: SeriesItem; data: DateValue } | null>(null);
 
-			selectedEvents = fromTooltip ? [event] : matchingEvents;
-			selectSeries(undefined);
-
-			if (selectedEvents.length === 1) {
-				selectSeries(selectedEvents[0].seriesName);
-			}
-			isSheetOpen = true;
-		}
-	}
+	let xDomain = $state<DomainType | undefined>(null);
+	let isZoomed = $derived(xDomain != null);
+	let lockedTooltip = $state(false);
 
 	function resetZoom() {
-		allCharts.forEach((chart) => {
-			chart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
-		});
-		currentZoomState = { start: 0, end: 100 };
-		isZoomed = false;
+		xDomain = null;
 	}
 
-	function handleZoom(event: CustomEvent<EChartOption.DataZoom>) {
-		const detail = event.detail as {
-			start?: number;
-			end?: number;
-			batch?: Array<{ startValue: number; endValue: number }>;
-		};
-		const start = detail.start ?? detail.batch?.[0]?.startValue ?? 0;
-		const end = detail.end ?? detail.batch?.[0]?.endValue ?? 100;
-		isZoomed = start !== 0 || end !== 100;
-		currentZoomState = { start, end };
-	}
-
-	function formatEventDate(): string {
-		if (!(selectedEvents.length > 0 && selectedEvents[0]?.data !== undefined)) {
-			return 'N/A';
-		}
-		const timestamp = (selectedEvents[0].data as [number, number])[0];
-		return formatDate(timestamp);
-	}
+	let groupSectionStates: { [key: string]: boolean } = $state(
+		untrack(() => Object.fromEntries(data.joinTimeseries.items.map((group) => [group.name, true])))
+	);
 
-	function formatEventValue(event: ECElementEvent): string {
-		if (Array.isArray(event.data) && event.data.length > 1 && typeof event.data[1] === 'number') {
-			return formatValue(event.data[1]);
-		}
-		return 'N/A';
-	}
+	let percentileData: FeatureResponse | null = $state(null);
+	let comparedFeatureData: FeatureResponse | null = $state(null);
+	let nullData: FeatureResponse | null = $state(null);
 
-	async function selectSeries(seriesName: string | undefined) {
-		// Reset all data states
-		selectedSeries = seriesName;
+	async function selectSeriesPoint(seriesPoint: typeof selectedSeriesPoint) {
+		selectedSeriesPoint = seriesPoint;
 
-		if (seriesName) {
+		if (seriesPoint) {
 			try {
+				const featureName = seriesPoint.series.key.toString();
+
+				// TODO: Add loading state
 				const [featureData, nullFeatureData] = await Promise.all([
 					api.getFeatureTimeseries({
-						joinId: joinTimeseries.name,
-						featureName: seriesName,
+						joinId: data.joinTimeseries.name,
+						featureName,
 						startTs: data.dateRange.startTimestamp,
 						endTs: data.dateRange.endTimestamp,
 						granularity: 'percentile',
@@ -198,8 +79,8 @@
 						algorithm: 'psi'
 					}),
 					api.getFeatureTimeseries({
-						joinId: joinTimeseries.name,
-						featureName: seriesName,
+						joinId: data.joinTimeseries.name,
+						featureName,
 						startTs: data.dateRange.startTimestamp,
 						endTs: data.dateRange.endTimestamp,
 						metricType: 'drift',
@@ -227,203 +108,6 @@
 			}
 		}
 	}
-
-	let comparedFeatureData: FeatureResponse | null = $state(null);
-	let comparedFeatureChartOption = $state({});
-
-	$effect(() => {
-		if (selectedSeries && selectedEvents[0]?.data) {
-			const timestamp = (selectedEvents[0].data as [number, number])[0];
-			comparedFeatureChartOption = createComparedFeatureChartOption(comparedFeatureData, timestamp);
-		} else {
-			comparedFeatureChartOption = {};
-		}
-	});
-
-	function createComparedFeatureChartOption(
-		data: FeatureResponse | null,
-		timestamp: number
-	): EChartOption {
-		if (!data?.current || !data?.baseline) return {};
-
-		// Get all points at the selected timestamp
-		const currentPoints = data.current.filter((point) => point.ts === timestamp);
-		const baselinePoints = data.baseline.filter((point) => point.ts === timestamp);
-
-		// Create pairs of current and baseline points by label
-		const labels = [
-			...new Set([...currentPoints.map((p) => p.label), ...baselinePoints.map((p) => p.label)])
-		];
-
-		return createChartOption({
-			xAxis: {
-				type: 'category',
-				data: labels.filter((label): label is string | number => label !== undefined)
-			},
-			yAxis: {
-				type: 'value'
-			},
-			series: [
-				{
-					name: 'Baseline',
-					type: 'bar',
-					emphasis: {
-						focus: 'series'
-					},
-					data: labels.map((label) => {
-						const point = baselinePoints.find((p) => p.label === label);
-						return point?.value ?? 0;
-					})
-				} as EChartOption.Series,
-				{
-					name: 'Current',
-					type: 'bar',
-					emphasis: {
-						focus: 'series'
-					},
-					data: labels.map((label) => {
-						const point = currentPoints.find((p) => p.label === label);
-						return point?.value ?? 0;
-					})
-				} as EChartOption.Series
-			]
-		});
-	}
-
-	let nullData: FeatureResponse | null = $state(null);
-	let nullRatioChartOption = $state({});
-
-	$effect(() => {
-		if (selectedSeries && selectedEvents[0]?.data) {
-			const timestamp = (selectedEvents[0].data as [number, number])[0];
-			nullRatioChartOption = createNullRatioChartOption(nullData, timestamp);
-		} else {
-			nullRatioChartOption = {};
-		}
-	});
-
-	function createNullRatioChartOption(
-		data: FeatureResponse | null,
-		timestamp: number
-	): EChartOption {
-		if (!data?.current || !data?.baseline) return {};
-
-		// Get points at the selected timestamp
-		const currentPoint = data.current.find((point) => point.ts === timestamp);
-		const baselinePoint = data.baseline.find((point) => point.ts === timestamp);
-
-		if (!currentPoint || !baselinePoint) return {};
-
-		return createChartOption({
-			xAxis: {
-				type: 'category',
-				data: ['Baseline', 'Current']
-			},
-			yAxis: {
-				type: 'value',
-				axisLabel: {
-					formatter: '{value}%'
-				}
-			},
-			series: [
-				{
-					name: 'Null Value Percentage',
-					type: 'bar',
-					stack: 'total',
-					emphasis: {
-						focus: 'series'
-					},
-					data: [baselinePoint.nullValue, currentPoint.nullValue]
-				} as EChartOption.Series,
-				{
-					name: 'Non-null Value Percentage',
-					type: 'bar',
-					stack: 'total',
-					emphasis: {
-						focus: 'series'
-					},
-					data: [100 - baselinePoint.nullValue, 100 - currentPoint.nullValue]
-				} as EChartOption.Series
-			]
-		});
-	}
-
-	$effect(() => {
-		if (allCharts.length) {
-			untrack(() => {
-				if (currentZoomState.start !== 0 && currentZoomState.end !== 100) {
-					allCharts.forEach((chart) => {
-						chart.dispatchAction({
-							type: 'dataZoom',
-							batch: [{ startValue: currentZoomState.start, endValue: currentZoomState.end }]
-						});
-					});
-				}
-			});
-		}
-	});
-
-	function handleComparedFeatureZoom(event: CustomEvent<EChartOption.DataZoom>) {
-		const detail = event.detail as {
-			start?: number;
-			end?: number;
-			batch?: Array<{ startValue: number; endValue: number }>;
-		};
-		const start = detail.start ?? detail.batch?.[0]?.startValue ?? 0;
-		const end = detail.end ?? detail.batch?.[0]?.endValue ?? 100;
-		isComparedFeatureZoomed = start !== 0 || end !== 100;
-	}
-
-	function resetComparedFeatureZoom() {
-		if (comparedFeatureChart) {
-			comparedFeatureChart.dispatchAction({ type: 'dataZoom', start: 0, end: 100 });
-		}
-		isComparedFeatureZoomed = false;
-	}
-
-	function highlightSeries(
-		seriesName: string,
-		chart: EChartsType | null,
-		type: 'highlight' | 'downplay'
-	) {
-		if (chart && seriesName) {
-			handleChartHighlight(chart, seriesName, type);
-		}
-	}
-
-	// update selectedEvents when joinTimeseries changes
-	$effect(() => {
-		if (joinTimeseries) {
-			untrack(() => {
-				// Only update selectedEvents if we have a previously selected point
-				if (selectedEvents.length > 0 && selectedEvents[0]?.data && dialogGroupChart) {
-					const [timestamp] = selectedEvents[0].data as [number, number];
-					const seriesName = selectedEvents[0].seriesName;
-
-					// Get the updated series data from the chart
-					const series = dialogGroupChart.getOption().series as EChartOption.Series[];
-					const updatedSeries = series.find((s) => s.name === seriesName);
-
-					if (updatedSeries && Array.isArray(updatedSeries.data)) {
-						// Find the point at the same timestamp
-						const updatedPoint = updatedSeries.data.find((point) => {
-							const [pointTimestamp] = point as [number, number];
-							return pointTimestamp === timestamp;
-						}) as [number, number] | undefined;
-
-						if (updatedPoint) {
-							selectedEvents = [
-								{
-									...selectedEvents[0],
-									data: updatedPoint
-								}
-							];
-						}
-					}
-				}
-			});
-		}
-	});
 </script>
 
 {#if data.model}
@@ -452,30 +136,33 @@
 		<ObservabilityNavTabs />
 
 		<div>
-			{#each joinTimeseries.items as group (group.name)}
+			{#each data.joinTimeseries.items as group, i (group.name)}
 				<CollapsibleSection
 					title={group.name}
 					size="small"
 					bind:open={groupSectionStates[group.name]}
 				>
 					{#snippet collapsibleContent()}
-						<EChart
-							option={createGroupByChartOption(group.items)}
-							bind:chartInstance={groupByCharts[group.name]}
-							on:click={(event) =>
-								handleChartClick(
-									event.detail.detail,
-									groupByCharts[group.name],
-									event.detail.fromTooltip
-								)}
-							on:datazoom={handleZoom}
-							enableMousemove={true}
-							enableCustomZoom={true}
-							enableCustomTooltip={true}
-							enableTooltipClick={true}
-							showCustomLegend={true}
-							legendGroup={group}
-						/>
+						<div
+							class={cn(
+								'h-[274px]',
+								i === data.joinTimeseries.items.length - 1 && 'mb-[300px]' // Add extra space at bottom of page for tooltip
+							)}
+						>
+							<FeaturesLineChart
+								data={group.items}
+								yDomain={metricTypeDomain}
+								onpointclick={(e, { series, data }) => {
+									selectSeriesPoint({ series: series, data: data as unknown as DateValue });
+								}}
+								onitemclick={({ series, data }) => {
+									selectSeriesPoint({ series: series, data });
+								}}
+								{xDomain}
+								onbrushend={(e) => (xDomain = e.xDomain)}
+								tooltip={{ locked: lockedTooltip }}
+							/>
+						</div>
 					{/snippet}
 				</CollapsibleSection>
 			{/each}
@@ -483,23 +170,25 @@
 	{/snippet}
 </CollapsibleSection>
 
-<Dialog bind:open={isSheetOpen}>
+<Dialog open={selectedSeriesPoint != null} onOpenChange={() => (selectedSeriesPoint = null)}>
 	<DialogContent class="max-w-[85vw] h-[95vh] flex flex-col p-0">
 		<DialogHeader class="pt-8 px-7 pb-0">
 			<span
 				class="mb-4 ml-2 text-xl-medium flex items-center gap-2 w-fit"
 				role="presentation"
-				onmouseenter={() => highlightSeries(selectedSeries ?? '', dialogGroupChart, 'highlight')}
-				onmouseleave={() => highlightSeries(selectedSeries ?? '', dialogGroupChart, 'downplay')}
+				onmouseenter={() => {
+					/*highlightSeries(selectedSeries ?? '', dialogGroupChart, 'highlight')*/
+				}}
+				onmouseleave={() => {
+					/*highlightSeries(selectedSeries ?? '', dialogGroupChart, 'downplay')*/
+				}}
 			>
-				{#if selectedSeries && dialogGroupChart}
-					<div
-						class="w-3 h-3 rounded-full"
-						style:background-color={getSeriesColor(dialogGroupChart, selectedSeries)}
-					></div>
-				{/if}
+				<div
+					class="w-3 h-3 rounded-full"
+					style:background-color={selectedSeriesPoint?.series.color}
+				></div>
 				<div>
-					{selectedSeries ? `${selectedSeries} at ` : ''}{formatEventDate()}
+					{selectedSeriesPoint?.series.key} at {formatDate(selectedSeriesPoint?.data.date)}
 				</div>
 			</span>
 
@@ -519,115 +208,139 @@
 		</DialogHeader>
 
 		<ScrollArea class="flex-grow px-7">
-			{#if selectedEvents[0]?.seriesName}
-				{@const selectedGroup = joinTimeseries.items.find((group) =>
-					group.items.some((item) => item.feature === selectedEvents[0].seriesName)
+			{#if selectedSeriesPoint}
+				{@const selectedGroup = data.joinTimeseries.items.find((group) =>
+					group.items.some((item) => item.feature === selectedSeriesPoint?.series.key)
 				)}
 				{#if selectedGroup}
 					<CollapsibleSection title={selectedGroup.name} open={true}>
 						{#snippet collapsibleContent()}
-							<EChart
-								option={createGroupByChartOption(selectedGroup.items)}
-								bind:chartInstance={dialogGroupChart}
-								markPoint={selectedEvents[0]}
-								on:click={(event) =>
-									handleChartClick(
-										event.detail.detail,
-										groupByCharts[selectedGroup.name],
-										event.detail.fromTooltip
-									)}
-								enableMousemove={true}
-								enableCustomZoom={true}
-								enableCustomTooltip={true}
-								enableTooltipClick={true}
-								showCustomLegend={true}
-								legendGroup={selectedGroup}
-							/>
+							<div class="h-[274px]">
+								<FeaturesLineChart
+									data={selectedGroup.items}
+									yDomain={metricTypeDomain}
+									markPoint={selectedSeriesPoint?.data}
+									onpointclick={(e, { series, data }) => {
+										selectSeriesPoint({ series: series, data: data as unknown as DateValue });
+									}}
+									onitemclick={({ series, data }) => {
+										selectSeriesPoint({ series: series, data });
+									}}
+									{xDomain}
+									onbrushend={(e) => (xDomain = e.xDomain)}
+									tooltip={{ locked: lockedTooltip }}
+								/>
+							</div>
 						{/snippet}
 					</CollapsibleSection>
 				{/if}
 			{/if}
 
-			{#if selectedSeries}
-				{#if percentileData}
-					<CollapsibleSection title="Percentiles" open={true}>
-						{#snippet collapsibleContent()}
-							<PercentileChart
-								data={percentileData?.current ?? null}
-								bind:chartInstance={percentileChart}
+			{#if percentileData}
+				<CollapsibleSection title="Percentiles" open={true}>
+					{#snippet collapsibleContent()}
+						<div class="h-[230px]">
+							<PercentileLineChart
+								data={percentileData?.current ?? []}
+								{xDomain}
+								onbrushend={(e) => (xDomain = e.xDomain)}
+								tooltip={{ locked: lockedTooltip }}
 							/>
-						{/snippet}
-					</CollapsibleSection>
-				{/if}
+						</div>
+					{/snippet}
+				</CollapsibleSection>
+			{/if}
 
-				{#if comparedFeatureData}
-					<CollapsibleSection title="Data Distribution" open={true}>
-						{#snippet headerContentRight()}
-							{#if isComparedFeatureZoomed}
-								<div class="flex justify-end h-6">
-									<ResetZoomButton onClick={resetComparedFeatureZoom} />
-								</div>
-							{/if}
-						{/snippet}
-						{#snippet collapsibleContent()}
-							<EChart
-								option={comparedFeatureChartOption}
-								bind:chartInstance={comparedFeatureChart}
-								enableMousemove={false}
-								enableCustomZoom={true}
-								on:datazoom={handleComparedFeatureZoom}
-								enableCustomTooltip={true}
+			{#if comparedFeatureData}
+				{@const timestamp = Number(selectedSeriesPoint?.data.date)}
+				<CollapsibleSection title="Data Distribution" open={true}>
+					{#snippet collapsibleContent()}
+						<div class="h-[230px]">
+							<BarChart
+								x="label"
+								y="value"
+								series={[
+									{
+										key: 'baseline',
+										data: comparedFeatureData?.baseline?.filter((d) => d.ts === timestamp) ?? [],
+										color: '#4B92FF' // TODO: copied from ECharts defaults
+									},
+									{
+										key: 'current',
+										data: comparedFeatureData?.current?.filter((d) => d.ts === timestamp) ?? [],
+										color: '#7DFFB3' // TODO: copied from ECharts defaults
+									}
+								]}
+								seriesLayout="group"
+								groupPadding={0.1}
+								bandPadding={0.1}
+								{...barChartProps}
+								props={{
+									yAxis: { tweened: { duration: 200 } },
+									tooltip: { ...tooltipProps, hideTotal: true }
+								}}
 							/>
-						{/snippet}
-					</CollapsibleSection>
-				{/if}
+						</div>
+					{/snippet}
+				</CollapsibleSection>
+
 				<CollapsibleSection title="Null Ratio" open={true}>
 					{#snippet collapsibleContent()}
-						<EChart
-							option={nullRatioChartOption}
-							bind:chartInstance={nullRatioChart}
-							enableMousemove={false}
-							enableCustomZoom={false}
-							enableCustomTooltip={true}
-						/>
+						{#if nullData}
+							{@const currentData = nullData.current?.find((point) => point.ts === timestamp)}
+							{@const baselineData = nullData.baseline?.find((point) => point.ts === timestamp)}
+
+							<div class="grid grid-cols-2 gap-3">
+								{#each [{ label: 'Baseline', data: baselineData }, { label: 'Current', data: currentData }] as c}
+									{#if c.data}
+										<!-- TODO: Remove mockNullValue once data is populated -->
+										{@const mockNullValue = Math.random() * 100}
+										<div class="grid gap-2">
+											<div class="h-[230px]">
+												<!--  TODO: colors copied from ECharts defaults -->
+												<PieChart
+													data={[
+														{
+															label: 'Null Value Percentage',
+															// value: c.data.nullValue
+															value: mockNullValue
+														},
+														{
+															label: 'Non-null Value Percentage',
+															// value: 100 - c.data.nullValue
+															value: 100 - mockNullValue
+														}
+													]}
+													key="label"
+													value="value"
+													cRange={['#4B92FF', '#7DFFB3']}
+													{...pieChartProps}
+												/>
+											</div>
+											<div class="text-center text-xs text-surface-content">
+												{c.label}
+											</div>
+										</div>
+									{/if}
+								{/each}
+							</div>
+						{/if}
 					{/snippet}
 				</CollapsibleSection>
-			{:else if selectedEvents.length > 1}
-				<div class="max-w-md p-2">
-					<div class="text-large-medium mb-4 flex items-center gap-2">
-						Select a data point
-						<InfoTooltip
-							text="Multiple data points overlap at this timestamp. Select one to view its details."
-						/>
-					</div>
-					{#each selectedEvents as event}
-						<Button
-							variant="ghost"
-							class="p-2 [&:not(:last-child)]:border-b w-full"
-							on:click={() => selectSeries(event.seriesName)}
-							autofocus={true}
-							onmouseenter={() =>
-								highlightSeries(event.seriesName ?? '', dialogGroupChart, 'highlight')}
-							onmouseleave={() =>
-								highlightSeries(event.seriesName ?? '', dialogGroupChart, 'downplay')}
-						>
-							<span class="flex justify-between items-center w-full">
-								<span class="text-neutral-800 truncate flex items-center gap-2">
-									<div
-										class="w-3 h-3 rounded-full"
-										style:background-color={getSeriesColor(
-											dialogGroupChart,
-											event.seriesName ?? ''
-										)}
-									></div>
-									{event.seriesName ?? ''}
-								</span>
-								<span>{formatEventValue(event)}</span>
-							</span>
-						</Button>
-					{/each}
-				</div>
 			{/if}
 		</ScrollArea>
 	</DialogContent>
 </Dialog>
+
+<svelte:window
+	onkeydown={(e) => {
+		if (isMacOS() ? e.metaKey : e.ctrlKey) {
+			lockedTooltip = true;
+		}
+	}}
+	onkeyup={(e) => {
+		if (isMacOS() ? !e.metaKey : !e.ctrlKey) {
+			lockedTooltip = false;
+		}
+	}}
+/>
diff --git a/frontend/src/routes/observability/+page.svelte b/frontend/src/routes/observability/+page.svelte
deleted file mode 100644
index 16a674af8c..0000000000
--- a/frontend/src/routes/observability/+page.svelte
+++ /dev/null
@@ -1,126 +0,0 @@
-<script lang="ts">
-	import EChart from '$lib/components/EChart.svelte';
-	import SplitView from '$lib/components/SplitView.svelte';
-	import Button from '$lib/components/ui/button/button.svelte';
-	import { generateXAxis, generateYAxis, generateHeatmapData } from '$lib/util/heatmap-data-gen';
-	import type { ECElementEvent, EChartOption, EChartsType } from 'echarts';
-	import { onMount } from 'svelte';
-
-	let chart: EChartsType | null = $state(null);
-
-	const xAxis = generateXAxis(100);
-	const yAxis = generateYAxis(30);
-	let data: number[][] = $state([]);
-	const option: EChartOption = $derived({
-		xAxis: {
-			type: 'category',
-			data: xAxis
-		},
-		yAxis: {
-			type: 'category',
-			data: yAxis
-		},
-		visualMap: [
-			{
-				min: 0,
-				max: 1
-			}
-		],
-		dataZoom: [
-			{
-				type: 'slider',
-				xAxisIndex: 0,
-				start: 0,
-				end: 100
-			},
-			{
-				type: 'slider',
-				yAxisIndex: 0,
-				start: 0,
-				end: 100
-			},
-			{
-				type: 'inside',
-				xAxisIndex: 0,
-				start: 0,
-				end: 100
-			},
-			{
-				type: 'inside',
-				yAxisIndex: 0,
-				start: 0,
-				end: 100
-			}
-		],
-		series: [
-			{
-				name: 'Heatmap',
-				type: 'heatmap',
-				data: data,
-				emphasis: {
-					itemStyle: {
-						shadowBlur: 2
-					}
-				}
-			}
-		]
-	});
-
-	function generateAnomalousData() {
-		data = generateHeatmapData(xAxis, yAxis, {
-			type: 'anomalous',
-			affectedRows: [28, 29, 30]
-		});
-	}
-
-	function generateSlowDriftData() {
-		data = generateHeatmapData(xAxis, yAxis, {
-			type: 'slow-drift',
-			affectedRows: [28, 29, 30]
-		});
-	}
-
-	let sidebarOpen = $state(false);
-	let clickedCellData: ECElementEvent['data'] | null = $state(null);
-
-	function handleChartClick(event: CustomEvent<ECElementEvent>) {
-		clickedCellData = event.detail.data;
-		sidebarOpen = true;
-	}
-
-	onMount(() => {
-		generateAnomalousData();
-	});
-</script>
-
-<div>
-	<Button on:click={generateAnomalousData}>Generate Anomalous Data</Button>
-	<Button on:click={generateSlowDriftData}>Generate Slow Drift Data</Button>
-</div>
-
-<div>
-	ECharts heatmaps are slow when there are lots of cells. I'm figuring it out/testing optimizaiton
-	stuff
-</div>
-
-<SplitView bind:sidebarOpen>
-	{#snippet main()}
-		<div style="height: 600px;">
-			<EChart {option} on:click={handleChartClick} bind:chartInstance={chart}></EChart>
-		</div>
-	{/snippet}
-
-	{#snippet sidebar()}
-		<div>
-			<div>Cell Details</div>
-			<div>Information about the clicked cell</div>
-			{#if clickedCellData}
-				<div>
-					<p>X: {Array.isArray(clickedCellData) ? clickedCellData[0] : ''}</p>
-					<p>Y: {Array.isArray(clickedCellData) ? clickedCellData[1] : ''}</p>
-					<p>Value: {Array.isArray(clickedCellData) ? clickedCellData[2] : ''}</p>
-				</div>
-			{/if}
-		</div>
-	{/snippet}
-</SplitView>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index eab2254344..ff981be27d 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -5,7 +5,7 @@ import { createColorScale } from './src/lib/util/colors';
 const config = {
 	plugins: [typography],
 	darkMode: ['class'],
-	content: ['./src/**/*.{html,js,svelte,ts}'],
+	content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/layerchart/**/*.{svelte,js}'],
 	safelist: [
 		'dark',
 		{
@@ -93,6 +93,14 @@ const config = {
 						border: 'hsl(var(--job-invalid-border) / <alpha-value>)',
 						'active-border': 'hsl(var(--job-invalid-active-border) / <alpha-value>)'
 					}
+				},
+				// Additional LayerChart colors
+				surface: {
+					content: 'hsl(var(--card-foreground) / <alpha-value>)',
+					100: 'hsl(var(--background) / <alpha-value>)',
+					200: 'hsl(var(--muted) / <alpha-value>)',
+					// not sure what color maps here (should be darker than 200).  Could add a new color to `app.css`
+					300: 'hsl(var(--background) / <alpha-value>)'
 				}
 			},
 			borderRadius: {