diff --git a/ui/frontend/package-lock.json b/ui/frontend/package-lock.json index cc22b0d8c..85fa6c32c 100644 --- a/ui/frontend/package-lock.json +++ b/ui/frontend/package-lock.json @@ -22,6 +22,7 @@ "@types/react-router-hash-link": "^2.4.5", "@types/react-select": "^5.0.1", "@types/redux-persist": "^4.3.1", + "@uiw/react-json-view": "^2.0.0-alpha.24", "chart.js": "^4.3.0", "chartjs-adapter-date-fns": "^3.0.0", "chartjs-plugin-zoom": "^2.0.1", @@ -39,7 +40,6 @@ "react-dom": "^18.2.0", "react-draggable": "^4.4.5", "react-icons": "^4.10.1", - "react-json-tree": "^0.18.0", "react-markdown": "^8.0.7", "react-micro-bar-chart": "^1.1.1", "react-redux": "^8.1.3", @@ -4036,11 +4036,6 @@ "@babel/types": "^7.20.7" } }, - "node_modules/@types/base16": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/@types/base16/-/base16-1.0.5.tgz", - "integrity": "sha512-OzOWrTluG9cwqidEzC/Q6FAmIPcnZfm8BFRlIx0+UIUqnuAmi5OS88O0RpT3Yz6qdmqObvUhasrbNsCofE4W9A==" - }, "node_modules/@types/body-parser": { "version": "1.19.5", "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz", @@ -4443,11 +4438,6 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, - "node_modules/@types/lodash": { - "version": "4.14.202", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz", - "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==" - }, "node_modules/@types/mdast": { "version": "3.0.15", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz", @@ -4905,6 +4895,19 @@ "url": "https://opencollective.com/typescript-eslint" } }, + "node_modules/@uiw/react-json-view": { + "version": "2.0.0-alpha.24", + "resolved": "https://registry.npmjs.org/@uiw/react-json-view/-/react-json-view-2.0.0-alpha.24.tgz", + "integrity": "sha512-wB/yHwu3C4G4BbqB+0Y8UTq6Wckjk7zGfJpTuQhhrljkfs14H+2GEqlEsuINUSOB41YFXYmTJp8XxyTFLF2B3g==", + "funding": { + "url": "https://jaywcjlove.github.io/#/sponsor" + }, + "peerDependencies": { + "@babel/runtime": ">=7.10.0", + "react": ">=18.0.0", + "react-dom": ">=18.0.0" + } + }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", @@ -5799,11 +5802,6 @@ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, - "node_modules/base16": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/base16/-/base16-1.0.0.tgz", - "integrity": "sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ==" - }, "node_modules/batch": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", @@ -6457,15 +6455,6 @@ "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz", "integrity": "sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==" }, - "node_modules/color": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz", - "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==", - "dependencies": { - "color-convert": "^1.9.3", - "color-string": "^1.6.0" - } - }, "node_modules/color-convert": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", @@ -6482,28 +6471,6 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, - "node_modules/color-string": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz", - "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==", - "dependencies": { - "color-name": "^1.0.0", - "simple-swizzle": "^0.2.2" - } - }, - "node_modules/color/node_modules/color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/color/node_modules/color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" - }, "node_modules/colord": { "version": "2.9.3", "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", @@ -12210,11 +12177,6 @@ "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz", "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==" }, - "node_modules/lodash.curry": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/lodash.curry/-/lodash.curry-4.1.1.tgz", - "integrity": "sha512-/u14pXGviLaweY5JI0IUzgzF2J6Ne8INyzAZjImcryjgkZ+ebruBxy2/JaOOkTqScddcYtakjhSaeemV8lR0tA==" - }, "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -15382,20 +15344,6 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, - "node_modules/react-base16-styling": { - "version": "0.9.1", - "resolved": "https://registry.npmjs.org/react-base16-styling/-/react-base16-styling-0.9.1.tgz", - "integrity": "sha512-1s0CY1zRBOQ5M3T61wetEpvQmsYSNtWEcdYzyZNxKa8t7oDvaOn9d21xrGezGAHFWLM7SHcktPuPTrvoqxSfKw==", - "dependencies": { - "@babel/runtime": "^7.16.7", - "@types/base16": "^1.0.2", - "@types/lodash": "^4.14.178", - "base16": "^1.0.0", - "color": "^3.2.1", - "csstype": "^3.0.10", - "lodash.curry": "^4.1.1" - } - }, "node_modules/react-chartjs-2": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz", @@ -15509,20 +15457,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, - "node_modules/react-json-tree": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/react-json-tree/-/react-json-tree-0.18.0.tgz", - "integrity": "sha512-Qe6HKSXrr++n9Y31nkRJ3XvQMATISpqigH1vEKhLwB56+nk5thTP0ITThpjxY6ZG/ubpVq/aEHIcyLP/OPHxeA==", - "dependencies": { - "@babel/runtime": "^7.20.6", - "@types/lodash": "^4.14.191", - "react-base16-styling": "^0.9.1" - }, - "peerDependencies": { - "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/react-markdown": { "version": "8.0.7", "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz", @@ -16817,19 +16751,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/simple-swizzle": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", - "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==", - "dependencies": { - "is-arrayish": "^0.3.1" - } - }, - "node_modules/simple-swizzle/node_modules/is-arrayish": { - "version": "0.3.2", - "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", - "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" - }, "node_modules/sisteransi": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz", diff --git a/ui/frontend/package.json b/ui/frontend/package.json index 19491fd14..660d031bb 100644 --- a/ui/frontend/package.json +++ b/ui/frontend/package.json @@ -17,6 +17,7 @@ "@types/react-router-hash-link": "^2.4.5", "@types/react-select": "^5.0.1", "@types/redux-persist": "^4.3.1", + "@uiw/react-json-view": "^2.0.0-alpha.24", "chart.js": "^4.3.0", "chartjs-adapter-date-fns": "^3.0.0", "chartjs-plugin-zoom": "^2.0.1", @@ -34,7 +35,6 @@ "react-dom": "^18.2.0", "react-draggable": "^4.4.5", "react-icons": "^4.10.1", - "react-json-tree": "^0.18.0", "react-markdown": "^8.0.7", "react-micro-bar-chart": "^1.1.1", "react-redux": "^8.1.3", diff --git a/ui/frontend/src/components/common/GenericTable.tsx b/ui/frontend/src/components/common/GenericTable.tsx index a1291709e..d34a31597 100644 --- a/ui/frontend/src/components/common/GenericTable.tsx +++ b/ui/frontend/src/components/common/GenericTable.tsx @@ -37,7 +37,7 @@ const TableRow = (props: { const labelData = ( {props.dataTypeDisplay ? props.dataTypeDisplay(props.name, props.data) diff --git a/ui/frontend/src/components/dashboard/Runs/Task/result-summaries/DictView.tsx b/ui/frontend/src/components/dashboard/Runs/Task/result-summaries/DictView.tsx index 1a6b61b95..190cfcc87 100644 --- a/ui/frontend/src/components/dashboard/Runs/Task/result-summaries/DictView.tsx +++ b/ui/frontend/src/components/dashboard/Runs/Task/result-summaries/DictView.tsx @@ -1,30 +1,9 @@ +import JsonView from "@uiw/react-json-view"; import { AttributeDict1, AttributeDict2, } from "../../../../../state/api/friendlyApi"; import { GenericTable } from "../../../../common/GenericTable"; -import { JSONTree } from "react-json-tree"; - -const theme = { - scheme: "shapeshifter", - author: "tyler benziger (http://tybenz.com)", - base00: "#000000", - base01: "#040404", - base02: "#102015", - base03: "#343434", - base04: "#555555", - base05: "#ababab", - base06: "#e0e0e0", - base07: "#f9f9f9", - base08: "#e92f2f", - base09: "#e09448", - base0A: "#dddd13", - base0B: "#0ed839", - base0C: "#23edda", - base0D: "#3b48e3", - base0E: "#f996e2", - base0F: "#69542d", -}; export const Dict1View = (props: { taskName: string; @@ -34,22 +13,13 @@ export const Dict1View = (props: { return ( { - console.log(props.values[i]); return [runId.toString(), props.values[i]]; })} columns={[ { displayName: "data", Render: (value) => { - return ( - false} - /> - ); + return ; }, }, ]} @@ -72,15 +42,7 @@ export const Dict2View = (props: { { displayName: "data", Render: (value) => { - return ( - false} - /> - ); + return ; }, }, ]}