diff --git a/package-lock.json b/package-lock.json
index 9620506b6c07047baa18a94947f8dad3658514d0..bd5c08eb992a65cc2f212e2b017a7458456023ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,10 @@
"@monaco-editor/react": "^4.6.0",
"@mui/joy": "^5.0.0-beta.48",
"@mux/mux-player-react": "^2.9.0",
+ "@nivo/bar": "^0.88.0",
+ "@nivo/core": "^0.88.0",
+ "@nivo/line": "^0.88.0",
+ "@nivo/radar": "^0.88.0",
"@rjsf/core": "^5.15.1",
"@rjsf/utils": "^5.15.1",
"@rjsf/validator-ajv8": "^5.15.1",
@@ -3717,6 +3721,218 @@
"mux-embed": "~5.2.0"
}
},
+ "node_modules/@nivo/annotations": {
+ "version": "0.88.0",
+ "resolved": "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.88.0.tgz",
+ "integrity": "sha512-NXE+1oIUn+EGWMQpnpeRMLgi2wyuzhGDoJQY4OUHissCUiNotid2oNQ/PXJwN0toiu+/j9SyhzI32xr70OPi7Q==",
+ "license": "MIT",
+ "dependencies": {
+ "@nivo/colors": "0.88.0",
+ "@nivo/core": "0.88.0",
+ "@react-spring/web": "9.4.5 || ^9.7.2",
+ "lodash": "^4.17.21"
+ },
+ "peerDependencies": {
+ "react": ">= 16.14.0 < 19.0.0"
+ }
+ },
+ "node_modules/@nivo/axes": {
+ "version": "0.88.0",
+ "resolved": "https://registry.npmjs.org/@nivo/axes/-/axes-0.88.0.tgz",
+ "integrity": "sha512-jF7aIxzTNayV5cI1J/b9Q1FfpMBxTXGk3OwSigXMSfYWlliskDn2u0qGRLiYhuXFdQAWIp4oXsO1GcAQ0eRVdg==",
+ "license": "MIT",
+ "dependencies": {
+ "@nivo/core": "0.88.0",
+ "@nivo/scales": "0.88.0",
+ "@react-spring/web": "9.4.5 || ^9.7.2",
+ "@types/d3-format": "^1.4.1",
+ "@types/d3-time-format": "^2.3.1",
+ "d3-format": "^1.4.4",
+ "d3-time-format": "^3.0.0"
+ },
+ "peerDependencies": {
+ "react": ">= 16.14.0 < 19.0.0"
+ }
+ },
+ "node_modules/@nivo/bar": {
+ "version": "0.88.0",
+ "resolved": "https://registry.npmjs.org/@nivo/bar/-/bar-0.88.0.tgz",
+ "integrity": "sha512-wckwuHWeCikxGvvdRfGL+dVFsUD9uHk1r9s7bWUfOD+p8BWhxtYqfXpHolEfgGg3UyPaHtpGA7P4zgE5vgo7gQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@nivo/annotations": "0.88.0",
+ "@nivo/axes": "0.88.0",
+ "@nivo/colors": "0.88.0",
+ "@nivo/core": "0.88.0",
+ "@nivo/legends": "0.88.0",
+ "@nivo/scales": "0.88.0",
+ "@nivo/tooltip": "0.88.0",
+ "@react-spring/web": "9.4.5 || ^9.7.2",
+ "@types/d3-scale": "^4.0.8",
+ "@types/d3-shape": "^3.1.6",
+ "d3-scale": "^4.0.2",
+ "d3-shape": "^3.2.0",
+ "lodash": "^4.17.21"
+ },
+ "peerDependencies": {
+ "react": ">= 16.14.0 < 19.0.0"
+ }
+ },
+ "node_modules/@nivo/colors": {
+ "version": "0.88.0",
+ "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.88.0.tgz",
+ "integrity": "sha512-IZ+leYIqAlo7dyLHmsQwujanfRgXyoQ5H7PU3RWLEn1PP0zxDKLgEjFEDADpDauuslh2Tx0L81GNkWR6QSP0Mw==",
+ "license": "MIT",
+ "dependencies": {
+ "@nivo/core": "0.88.0",
+ "@types/d3-color": "^3.0.0",
+ "@types/d3-scale": "^4.0.8",
+ "@types/d3-scale-chromatic": "^3.0.0",
+ "@types/prop-types": "^15.7.2",
+ "d3-color": "^3.1.0",
+ "d3-scale": "^4.0.2",
+ "d3-scale-chromatic": "^3.0.0",
+ "lodash": "^4.17.21",
+ "prop-types": "^15.7.2"
+ },
+ "peerDependencies": {
+ "react": ">= 16.14.0 < 19.0.0"
+ }
+ },
+ "node_modules/@nivo/core": {
+ "version": "0.88.0",
+ "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.88.0.tgz",
+ "integrity": "sha512-XjUkA5MmwjLP38bdrJwn36Gj7T5SYMKD55LYQp/1nIJPdxqJ38dUfE4XyBDfIEgfP6yrHOihw3C63cUdnUBoiw==",
+ "license": "MIT",
+ "dependencies": {
+ "@nivo/tooltip": "0.88.0",
+ "@react-spring/web": "9.4.5 || ^9.7.2",
+ "@types/d3-shape": "^3.1.6",
+ "d3-color": "^3.1.0",
+ "d3-format": "^1.4.4",
+ "d3-interpolate": "^3.0.1",
+ "d3-scale": "^4.0.2",
+ "d3-scale-chromatic": "^3.0.0",
+ "d3-shape": "^3.2.0",
+ "d3-time-format": "^3.0.0",
+ "lodash": "^4.17.21",
+ "prop-types": "^15.7.2"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/nivo/donate"
+ },
+ "peerDependencies": {
+ "react": ">= 16.14.0 < 19.0.0"
+ }
+ },
+ "node_modules/@nivo/legends": {
+ "version": "0.88.0",
+ "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.88.0.tgz",
+ "integrity": "sha512-d4DF9pHbD8LmGJlp/Gp1cF4e8y2wfQTcw3jVhbZj9zkb7ZWB7JfeF60VHRfbXNux9bjQ9U78/SssQqueVDPEmg==",
+ "license": "MIT",
+ "dependencies": {
+ "@nivo/colors": "0.88.0",
+ "@nivo/core": "0.88.0",
+ "@types/d3-scale": "^4.0.8",
+ "d3-scale": "^4.0.2"
+ },
+ "peerDependencies": {
+ "react": ">= 16.14.0 < 19.0.0"
+ }
+ },
+ "node_modules/@nivo/line": {
+ "version": "0.88.0",
+ "resolved": "https://registry.npmjs.org/@nivo/line/-/line-0.88.0.tgz",
+ "integrity": "sha512-hFTyZ3BdAZvq2HwdwMj2SJGUeodjEW+7DLtFMIIoVIxmjZlAs3z533HcJ9cJd3it928fDm8SF/rgHs0TztYf9Q==",
+ "license": "MIT",
+ "dependencies": {
+ "@nivo/annotations": "0.88.0",
+ "@nivo/axes": "0.88.0",
+ "@nivo/colors": "0.88.0",
+ "@nivo/core": "0.88.0",
+ "@nivo/legends": "0.88.0",
+ "@nivo/scales": "0.88.0",
+ "@nivo/tooltip": "0.88.0",
+ "@nivo/voronoi": "0.88.0",
+ "@react-spring/web": "9.4.5 || ^9.7.2",
+ "d3-shape": "^3.2.0"
+ },
+ "peerDependencies": {
+ "react": ">= 16.14.0 < 19.0.0"
+ }
+ },
+ "node_modules/@nivo/radar": {
+ "version": "0.88.0",
+ "resolved": "https://registry.npmjs.org/@nivo/radar/-/radar-0.88.0.tgz",
+ "integrity": "sha512-KYdfbKPl8n5NUanqrVm2GVS+xeesrxu6bgh1t7PJmKoxGbJ5mTQMvHtadjXei3N+1/3RlNOxi5ZZDx+LuoupSQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@nivo/colors": "0.88.0",
+ "@nivo/core": "0.88.0",
+ "@nivo/legends": "0.88.0",
+ "@nivo/tooltip": "0.88.0",
+ "@react-spring/web": "9.4.5 || ^9.7.2",
+ "@types/d3-scale": "^4.0.8",
+ "@types/d3-shape": "^3.1.6",
+ "d3-scale": "^4.0.2",
+ "d3-shape": "^3.2.0"
+ },
+ "peerDependencies": {
+ "react": ">= 16.14.0 < 19.0.0"
+ }
+ },
+ "node_modules/@nivo/scales": {
+ "version": "0.88.0",
+ "resolved": "https://registry.npmjs.org/@nivo/scales/-/scales-0.88.0.tgz",
+ "integrity": "sha512-HbpxkQp6tHCltZ1yDGeqdLcaJl5ze54NPjurfGtx/Uq+H5IQoBd4Tln49bUar5CsFAMsXw8yF1HQvASr7I1SIA==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/d3-scale": "^4.0.8",
+ "@types/d3-time": "^1.1.1",
+ "@types/d3-time-format": "^3.0.0",
+ "d3-scale": "^4.0.2",
+ "d3-time": "^1.0.11",
+ "d3-time-format": "^3.0.0",
+ "lodash": "^4.17.21"
+ }
+ },
+ "node_modules/@nivo/scales/node_modules/@types/d3-time-format": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-3.0.4.tgz",
+ "integrity": "sha512-or9DiDnYI1h38J9hxKEsw513+KVuFbEVhl7qdxcaudoiqWWepapUen+2vAriFGexr6W5+P4l9+HJrB39GG+oRg==",
+ "license": "MIT"
+ },
+ "node_modules/@nivo/tooltip": {
+ "version": "0.88.0",
+ "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.88.0.tgz",
+ "integrity": "sha512-iEjVfQA8gumAzg/yUinjTwswygCkE5Iwuo8opwnrbpNIqMrleBV+EAKIgB0PrzepIoW8CFG/SJhoiRfbU8jhOw==",
+ "license": "MIT",
+ "dependencies": {
+ "@nivo/core": "0.88.0",
+ "@react-spring/web": "9.4.5 || ^9.7.2"
+ },
+ "peerDependencies": {
+ "react": ">= 16.14.0 < 19.0.0"
+ }
+ },
+ "node_modules/@nivo/voronoi": {
+ "version": "0.88.0",
+ "resolved": "https://registry.npmjs.org/@nivo/voronoi/-/voronoi-0.88.0.tgz",
+ "integrity": "sha512-MyiNLvODthFoMjQ7Wjp693nogbTmVEx8Yn/7QkJhyPQbFyyA37TF/D1a/ox4h2OslXtP6K9QFN+42gB/zu7ixw==",
+ "license": "MIT",
+ "dependencies": {
+ "@nivo/core": "0.88.0",
+ "@nivo/tooltip": "0.88.0",
+ "@types/d3-delaunay": "^6.0.4",
+ "@types/d3-scale": "^4.0.8",
+ "d3-delaunay": "^6.0.4",
+ "d3-scale": "^4.0.2"
+ },
+ "peerDependencies": {
+ "react": ">= 16.14.0 < 19.0.0"
+ }
+ },
"node_modules/@nodelib/fs.scandir": {
"version": "2.1.5",
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3889,6 +4105,78 @@
"url": "https://opencollective.com/popperjs"
}
},
+ "node_modules/@react-spring/animated": {
+ "version": "9.7.5",
+ "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.5.tgz",
+ "integrity": "sha512-Tqrwz7pIlsSDITzxoLS3n/v/YCUHQdOIKtOJf4yL6kYVSDTSmVK1LI1Q3M/uu2Sx4X3pIWF3xLUhlsA6SPNTNg==",
+ "license": "MIT",
+ "dependencies": {
+ "@react-spring/shared": "~9.7.5",
+ "@react-spring/types": "~9.7.5"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
+ "node_modules/@react-spring/core": {
+ "version": "9.7.5",
+ "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.5.tgz",
+ "integrity": "sha512-rmEqcxRcu7dWh7MnCcMXLvrf6/SDlSokLaLTxiPlAYi11nN3B5oiCUAblO72o+9z/87j2uzxa2Inm8UbLjXA+w==",
+ "license": "MIT",
+ "dependencies": {
+ "@react-spring/animated": "~9.7.5",
+ "@react-spring/shared": "~9.7.5",
+ "@react-spring/types": "~9.7.5"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/react-spring/donate"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
+ "node_modules/@react-spring/rafz": {
+ "version": "9.7.5",
+ "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.5.tgz",
+ "integrity": "sha512-5ZenDQMC48wjUzPAm1EtwQ5Ot3bLIAwwqP2w2owG5KoNdNHpEJV263nGhCeKKmuA3vG2zLLOdu3or6kuDjA6Aw==",
+ "license": "MIT"
+ },
+ "node_modules/@react-spring/shared": {
+ "version": "9.7.5",
+ "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.5.tgz",
+ "integrity": "sha512-wdtoJrhUeeyD/PP/zo+np2s1Z820Ohr/BbuVYv+3dVLW7WctoiN7std8rISoYoHpUXtbkpesSKuPIw/6U1w1Pw==",
+ "license": "MIT",
+ "dependencies": {
+ "@react-spring/rafz": "~9.7.5",
+ "@react-spring/types": "~9.7.5"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
+ "node_modules/@react-spring/types": {
+ "version": "9.7.5",
+ "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.5.tgz",
+ "integrity": "sha512-HVj7LrZ4ReHWBimBvu2SKND3cDVUPWKLqRTmWe/fNY6o1owGOX0cAHbdPDTMelgBlVbrTKrre6lFkhqGZErK/g==",
+ "license": "MIT"
+ },
+ "node_modules/@react-spring/web": {
+ "version": "9.7.5",
+ "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.5.tgz",
+ "integrity": "sha512-lmvqGwpe+CSttsWNZVr+Dg62adtKhauGwLyGE/RRyZ8AAMLgb9x3NDMA5RMElXo+IMyTkPp7nxTB8ZQlmhb6JQ==",
+ "license": "MIT",
+ "dependencies": {
+ "@react-spring/animated": "~9.7.5",
+ "@react-spring/core": "~9.7.5",
+ "@react-spring/shared": "~9.7.5",
+ "@react-spring/types": "~9.7.5"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
"node_modules/@remix-run/router": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.1.tgz",
@@ -4579,6 +4867,66 @@
"@types/node": "*"
}
},
+ "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==",
+ "license": "MIT"
+ },
+ "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==",
+ "license": "MIT"
+ },
+ "node_modules/@types/d3-format": {
+ "version": "1.4.5",
+ "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.4.5.tgz",
+ "integrity": "sha512-mLxrC1MSWupOSncXN/HOlWUAAIffAEBaI4+PKy2uMPsKe4FNZlk7qrbTjmzJXITQQqBHivaks4Td18azgqnotA==",
+ "license": "MIT"
+ },
+ "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==",
+ "license": "MIT"
+ },
+ "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==",
+ "license": "MIT",
+ "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==",
+ "license": "MIT"
+ },
+ "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==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/d3-path": "*"
+ }
+ },
+ "node_modules/@types/d3-time": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.1.4.tgz",
+ "integrity": "sha512-JIvy2HjRInE+TXOmIGN5LCmeO0hkFZx5f9FZ7kiN+D+YTcc8pptsiLiuHsvwxwC7VVKmJ2ExHUgNlAiV7vQM9g==",
+ "license": "MIT"
+ },
+ "node_modules/@types/d3-time-format": {
+ "version": "2.3.4",
+ "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.4.tgz",
+ "integrity": "sha512-xdDXbpVO74EvadI3UDxjxTdR6QIxm1FKzEA/+F8tL4GWWUg/hgvBqf6chql64U5A9ZUGWo7pEu4eNlyLwbKdhg==",
+ "license": "MIT"
+ },
"node_modules/@types/debug": {
"version": "4.1.12",
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -8413,6 +8761,134 @@
"resolved": "https://registry.npmjs.org/custom-media-element/-/custom-media-element-1.3.2.tgz",
"integrity": "sha512-nDyMobZgoAVqz7mA8rsn7i1/6bjH6N9ab2Ge7LyyNxrvxAq7zQJPg8i3u2VH7wEB+Y1T1+C3/h1G774/D+ZLag=="
},
+ "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"
+ },
+ "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==",
+ "license": "ISC",
+ "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==",
+ "license": "ISC",
+ "dependencies": {
+ "delaunator": "5"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-format": {
+ "version": "1.4.5",
+ "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz",
+ "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==",
+ "license": "BSD-3-Clause"
+ },
+ "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==",
+ "license": "ISC",
+ "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==",
+ "license": "ISC",
+ "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==",
+ "license": "ISC",
+ "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==",
+ "license": "ISC",
+ "dependencies": {
+ "d3-color": "1 - 3",
+ "d3-interpolate": "1 - 3"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-scale/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==",
+ "license": "ISC",
+ "dependencies": {
+ "d3-array": "2 - 3"
+ },
+ "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==",
+ "license": "ISC",
+ "dependencies": {
+ "d3-path": "^3.1.0"
+ },
+ "engines": {
+ "node": ">=12"
+ }
+ },
+ "node_modules/d3-time": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz",
+ "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==",
+ "license": "BSD-3-Clause"
+ },
+ "node_modules/d3-time-format": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+ "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+ "license": "BSD-3-Clause",
+ "dependencies": {
+ "d3-time": "1 - 2"
+ }
+ },
"node_modules/damerau-levenshtein": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -8732,6 +9208,15 @@
"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==",
+ "license": "ISC",
+ "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",
@@ -12817,6 +13302,15 @@
"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==",
+ "license": "ISC",
+ "engines": {
+ "node": ">=12"
+ }
+ },
"node_modules/interpret": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz",
@@ -18824,6 +19318,12 @@
"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==",
+ "license": "Unlicense"
+ },
"node_modules/run-parallel": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
diff --git a/package.json b/package.json
index a2a4117ebaf2038d660c951515f4f2360b853e86..b9131062b68a332900bd90fe9a408b4376870107 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,10 @@
"@monaco-editor/react": "^4.6.0",
"@mui/joy": "^5.0.0-beta.48",
"@mux/mux-player-react": "^2.9.0",
+ "@nivo/bar": "^0.88.0",
+ "@nivo/core": "^0.88.0",
+ "@nivo/line": "^0.88.0",
+ "@nivo/radar": "^0.88.0",
"@rjsf/core": "^5.15.1",
"@rjsf/utils": "^5.15.1",
"@rjsf/validator-ajv8": "^5.15.1",
diff --git a/src/renderer/components/Experiment/Eval/Chart.tsx b/src/renderer/components/Experiment/Eval/Chart.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..39f5d72459217c03f922a9a8a6eede3b36b8305f
--- /dev/null
+++ b/src/renderer/components/Experiment/Eval/Chart.tsx
@@ -0,0 +1,133 @@
+import React, { useState } from 'react';
+import { ResponsiveLine } from '@nivo/line';
+import { ResponsiveBar } from '@nivo/bar';
+import { ResponsiveRadar } from '@nivo/radar';
+import { Select, Option } from '@mui/joy';
+
+const Chart = ({ metrics }) => {
+ const [chartType, setChartType] = useState('line');
+
+ const handleChartTypeChange = (event, newValue) => {
+ setChartType(newValue);
+ };
+
+ if (!metrics || metrics.length === 0) {
+ return <div>No metrics available</div>;
+ }
+
+ console.log(metrics);
+
+ const data = metrics.map((metric) => ({
+ id: metric.type,
+ value: metric.score,
+ }));
+
+ const lineData = [
+ {
+ id: 'metrics',
+ data: metrics.map((metric) => ({ x: metric.type, y: metric.score })),
+ },
+ ];
+
+ const barData = metrics.map((metric) => ({
+ type: metric.type,
+ score: metric.score,
+ }));
+
+ const radarData = metrics.map((metric) => ({
+ metric: metric.type,
+ score: metric.score,
+ }));
+
+ return (
+ <div>
+ <Select value={chartType} onChange={handleChartTypeChange}>
+ <Option value="line">Line</Option>
+ <Option value="bar">Bar</Option>
+ <Option value="radar">Radar</Option>
+ </Select>
+ <div style={{ height: 400 }}>
+ {chartType === 'line' && (
+ <ResponsiveLine
+ data={lineData}
+ margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
+ xScale={{ type: 'point' }}
+ yScale={{
+ type: 'linear',
+ min: 'auto',
+ max: 'auto',
+ stacked: true,
+ reverse: false,
+ }}
+ axisTop={null}
+ axisRight={null}
+ axisBottom={{
+ tickSize: 5,
+ tickPadding: 5,
+ tickRotation: 0,
+ legend: 'metric',
+ legendOffset: 36,
+ legendPosition: 'middle',
+ }}
+ axisLeft={{
+ tickSize: 5,
+ tickPadding: 5,
+ tickRotation: 0,
+ legend: 'score',
+ legendOffset: -40,
+ legendPosition: 'middle',
+ }}
+ />
+ )}
+ {chartType === 'bar' && (
+ <ResponsiveBar
+ data={barData}
+ keys={['score']}
+ indexBy="type"
+ margin={{ top: 50, right: 130, bottom: 50, left: 60 }}
+ padding={0.3}
+ axisTop={null}
+ axisRight={null}
+ axisBottom={{
+ tickSize: 5,
+ tickPadding: 5,
+ tickRotation: 0,
+ legend: 'metric',
+ legendPosition: 'middle',
+ legendOffset: 32,
+ }}
+ axisLeft={{
+ tickSize: 5,
+ tickPadding: 5,
+ tickRotation: 0,
+ legend: 'score',
+ legendPosition: 'middle',
+ legendOffset: -40,
+ }}
+ />
+ )}
+ {chartType === 'radar' && (
+ <ResponsiveRadar
+ data={radarData}
+ keys={['score']}
+ indexBy="metric"
+ margin={{ top: 70, right: 80, bottom: 40, left: 80 }}
+ gridShape="circular"
+ gridLabelOffset={36}
+ dotSize={10}
+ dotColor={{ from: 'color', modifiers: [] }}
+ dotBorderWidth={2}
+ dotBorderColor={{ from: 'color', modifiers: [] }}
+ colors={{ scheme: 'nivo' }}
+ fillOpacity={0.25}
+ blendMode="multiply"
+ animate={true}
+ motionConfig="wobbly"
+ />
+ )}
+ </div>
+ </div>
+ );
+};
+
+export default Chart;
diff --git a/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx b/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx
index 1e4d1e8b378e8df357f4535b256e823161a60fb1..1ea12e3a2ca3f7b470cbfb17d618279cbcfcc5f7 100644
--- a/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx
+++ b/src/renderer/components/Experiment/Eval/EvalJobsTable.tsx
@@ -11,6 +11,7 @@ import {
} from '@mui/joy';
import {
ChartColumnBigIcon,
+ ChartColumnIncreasingIcon,
FileDigitIcon,
Grid3X3Icon,
Trash2Icon,
@@ -76,7 +77,9 @@ const EvalJobsTable = () => {
const [openCSVModal, setOpenCSVModal] = useState(false);
const [openPlotModal, setOpenPlotModal] = useState(false);
const [currentJobId, setCurrentJobId] = useState('');
- const [fileNameForDetailedReport, setFileNameForDetailedReport] = useState('');
+ const [currentScore, setCurrentScore] = useState('');
+ const [fileNameForDetailedReport, setFileNameForDetailedReport] =
+ useState('');
const fetchCSV = async (jobId) => {
const response = await fetch(
@@ -100,8 +103,9 @@ const EvalJobsTable = () => {
setOpenCSVModal(true);
};
- const handleOpenPlotModal = (jobId) => {
+ const handleOpenPlotModal = (jobId, score) => {
setCurrentJobId(jobId);
+ setCurrentScore(score);
setOpenPlotModal(true);
};
@@ -121,6 +125,7 @@ const EvalJobsTable = () => {
open={openPlotModal}
onClose={() => setOpenPlotModal(false)}
jobId={currentJobId}
+ score={currentScore}
/>
<ViewOutputModalStreaming
jobId={viewOutputFromJob}
@@ -165,40 +170,44 @@ const EvalJobsTable = () => {
</td> */}
<td>
<RenderScore score={job?.job_data?.score} />
- {job?.job_data?.additional_output_path && (
- job.job_data.additional_output_path.toLowerCase().endsWith('.csv') ? (
- <Link
- onClick={() => handleOpenCSVModal(job?.id)}
- sx={{ mt: 1, ml: 1 }}
- startDecorator={<Grid3X3Icon size="14px" />}
- >
- Detailed Report
- </Link>
- ) : (
- <Link
- onClick={() => {
- setFileNameForDetailedReport(job?.job_data?.additional_output_path);
- setViewOutputFromJob(job?.id);
- }}
- sx={{ mt: 1, ml: 1 }}
- startDecorator={<Grid3X3Icon size="14px" />}
- >
- Detailed Report
- </Link>
- )
- )}
- {/* {job?.job_data?.plot_data_path && (
+ {job?.job_data?.additional_output_path &&
+ (job.job_data.additional_output_path
+ .toLowerCase()
+ .endsWith('.csv') ? (
+ <Link
+ onClick={() => handleOpenCSVModal(job?.id)}
+ sx={{ mt: 1, ml: 1 }}
+ startDecorator={<Grid3X3Icon size="14px" />}
+ >
+ Detailed Report
+ </Link>
+ ) : (
+ <Link
+ onClick={() => {
+ setFileNameForDetailedReport(
+ job?.job_data?.additional_output_path
+ );
+ setViewOutputFromJob(job?.id);
+ }}
+ sx={{ mt: 1, ml: 1 }}
+ startDecorator={<Grid3X3Icon size="14px" />}
+ >
+ Detailed Report
+ </Link>
+ ))}
+ {job?.job_data?.plot_data_path && (
<Link
- onClick={() => handleOpenPlotModal(job?.id)}
+ onClick={() =>
+ handleOpenPlotModal(job?.id, job?.job_data?.score)
+ }
sx={{ mt: 1, ml: 1 }}
- startDecorator={<Grid3X3Icon size="14px" />}
+ startDecorator={<ChartColumnIncreasingIcon size="14px" />}
>
- View Figure
+ Chart
</Link>
- )} */}
+ )}
</td>
-
<td>
<ButtonGroup
variant="soft"
diff --git a/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx b/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx
index 0089f4202732a05711d330408a7acc6fa77429c3..c804f4c8b8bc3e6e0dccef3eecc9aa32482b6c48 100644
--- a/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx
+++ b/src/renderer/components/Experiment/Eval/ViewPlotModal.tsx
@@ -1,39 +1,41 @@
import React from 'react';
import { Modal, ModalDialog, ModalClose, Box, Typography } from '@mui/joy';
+import Chart from './Chart';
import * as chatAPI from 'renderer/lib/transformerlab-api-sdk';
-interface ViewPlotModalProps {
- isOpen: boolean;
- imageUrl: string;
- onClose: () => void;
+function parseJSON(score) {
+ try {
+ return JSON.parse(score);
+ } catch {
+ return [];
+ }
}
-const ViewPlotModal: React.FC<ViewPlotModalProps> = ({ open, onClose, jobId }) => {
- const [plotData, setPlotData] = React.useState<string | null>(null);
-
- const fetchPlot = async (jobId: string) => {
- const response = await fetch(chatAPI.Endpoints.Experiment.GetPlotJSON(jobId));
- const jsonResponse = await response.json();
- return JSON.stringify(jsonResponse);
- };
-
- React.useEffect(() => {
- if (jobId) {
- fetchPlot(jobId).then(setPlotData);
- }
- }, [jobId]);
+export default function ViewPlotModal({ open, onClose, jobId, score }) {
+ if (!jobId) {
+ return <></>;
+ }
return (
<Modal open={open} onClose={onClose}>
- <ModalDialog sx={{ width: '90vw', height: '90vh', pt: 5, position: 'relative' }}>
+ <ModalDialog
+ sx={{ width: '90vw', height: '90vh', pt: 5, position: 'relative' }}
+ >
<ModalClose />
- <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ }}
+ >
<Typography level="h4" mb={2}>
- Figure Preview
+ Chart
</Typography>
<Box
sx={{
- maxWidth: '100%',
+ width: '100%',
+ maxWidth: '800px',
maxHeight: '80vh',
overflowY: 'auto',
borderRadius: '8px',
@@ -41,12 +43,10 @@ const ViewPlotModal: React.FC<ViewPlotModalProps> = ({ open, onClose, jobId }) =
p: 2,
}}
>
- {plotData}
+ <Chart metrics={parseJSON(score)} />
</Box>
</Box>
</ModalDialog>
</Modal>
);
-};
-
-export default ViewPlotModal;
+}
diff --git a/src/renderer/components/Nav/Sidebar.tsx b/src/renderer/components/Nav/Sidebar.tsx
index e3edbd97959703eafa1371d53d94a6e29db64d23..3171b6b5e6b69fb94999298caef684586e9c4d18 100644
--- a/src/renderer/components/Nav/Sidebar.tsx
+++ b/src/renderer/components/Nav/Sidebar.tsx
@@ -25,6 +25,7 @@ import {
LogsIcon,
SquareStackIcon,
FileIcon,
+ ChartColumnIncreasingIcon,
} from 'lucide-react';
import { ButtonGroup, IconButton, Sheet, Tooltip } from '@mui/joy';
@@ -177,7 +178,7 @@ export default function Sidebar({
<SubNavItem
title="Evaluate"
path="/projects/eval"
- icon={<HelpCircleIcon />}
+ icon={<ChartColumnIncreasingIcon />}
disabled={!experimentInfo?.name}
/>
<SubNavItem