Updates JSON view to be cleaner + ensures table index column has fixe…

…d width
DAGWorks-Inc · May 11, 2024 · 87b1b72 · 87b1b72
1 parent 7a13f94
commit 87b1b72
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 136 deletions.
diff --git a/ui/frontend/package-lock.json b/ui/frontend/package-lock.json
diff --git 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
@@ -37,7 +37,7 @@ const TableRow = <T extends object>(props: {
   const labelData = (
     <td
       key={props.name}
-      className="py-4 px-3 text-sm font-semibold text-gray-500"
+      className="py-4 px-3 text-sm font-semibold text-gray-500 w-48"
     >
       {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
@@ -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 (
     <GenericTable
       data={props.runIds.map((runId, i) => {
-        console.log(props.values[i]);
         return [runId.toString(), props.values[i]];
       })}
       columns={[
         {
           displayName: "data",
           Render: (value) => {
-            return (
-              <JSONTree
-                invertTheme={true}
-                data={value}
-                theme={theme}
-                hideRoot
-                shouldExpandNodeInitially={() => false}
-              />
-            );
+            return <JsonView value={value} collapsed={2} />;
           },
         },
       ]}
@@ -72,15 +42,7 @@ export const Dict2View = (props: {
         {
           displayName: "data",
           Render: (value) => {
-            return (
-              <JSONTree
-                invertTheme={true}
-                data={value}
-                theme={theme}
-                hideRoot
-                shouldExpandNodeInitially={() => false}
-              />
-            );
+            return <JsonView value={value} collapsed={2} />;
           },
         },
       ]}