Merge pull request #136 from FalkorDB/json-format

fix #43 Json format
FalkorDB · Apr 4, 2024 · 8a9a597 · 8a9a597
2 parents 9f5155e + 44b1ea4
commit 8a9a597
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 21 deletions.
diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
@@ -170,7 +170,7 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
         setSelectedNode(node);
         dataPanel.current?.expand();
     }
-    
+
     return (
         <ResizablePanelGroup direction="horizontal">
             <ResizablePanel className="h-full flex flex-col">

diff --git a/app/graph/tableview.tsx b/app/graph/tableview.tsx
@@ -1,9 +1,15 @@
+'use client'
+
 import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { JSONTree } from "react-json-tree"
+import { transparent } from "tailwindcss/colors";
 import { Graph } from "./model";
 
 // eslint-disable-next-line import/prefer-default-export
 export function TableView({ graph }: { graph: Graph }) {
+
+
     return (
         <Table>
             <TableCaption>A list of results</TableCaption>
@@ -23,14 +29,48 @@ export function TableView({ graph }: { graph: Graph }) {
                         // eslint-disable-next-line react/no-array-index-key
                         <TableRow key={index}>
                             {
-                                Object.values(row).map((cell, cellIndex) => (
-                                    // eslint-disable-next-line react/no-array-index-key
-                                    <TableCell key={cellIndex}>
-                                        <TooltipProvider><Tooltip><TooltipTrigger className="max-w-96 truncate">
-                                            {JSON.stringify(cell)}
-                                        </TooltipTrigger><TooltipContent><p>{JSON.stringify(cell)}</p></TooltipContent></Tooltip></TooltipProvider>
-                                    </TableCell>
-                                ))
+                                Object.values(row).map((cell, cellIndex) => {
+                                    // eslint-disable-next-line no-useless-escape
+                                    const text = JSON.stringify(cell).replace(/[\[\]{}:,]/g, (match) => {
+                                        switch (match) {
+                                            case ":": return ': ';
+                                            case ",": return ', ';
+                                            default: return '';
+                                        }
+                                    });
+                                    return (
+                                        // eslint-disable-next-line react/no-array-index-key
+                                        <TableCell key={cellIndex}>
+                                            <TooltipProvider>
+                                                <Tooltip>
+                                                    <TooltipTrigger className="max-w-96 truncate">
+                                                        {typeof cell === "object" ? (
+                                                            <JSONTree
+                                                                data={cell}
+                                                                shouldExpandNodeInitially={() => false}
+                                                                theme={{
+                                                                    // background
+                                                                    base00: transparent,
+                                                                    // number of keys keys
+                                                                    base03: transparent,
+                                                                    // value number
+                                                                    // base09: transparent,
+                                                                    // value string
+                                                                    // base0B: transparent,
+                                                                    // keys and triangles
+                                                                    // base0D: transparent,
+                                                                }}
+                                                            />
+                                                        ) : (text)}
+                                                    </TooltipTrigger>
+                                                    <TooltipContent>
+                                                        <p>{text}</p>
+                                                    </TooltipContent>
+                                                </Tooltip>
+                                            </TooltipProvider>
+                                        </TableCell>
+                                    )
+                                })
                             }
                         </TableRow>
                     ))

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "react-cytoscapejs": "^2.0.0",
     "react-dom": "^18",
     "react-hook-form": "^7.49.3",
+    "react-json-tree": "^0.18.0",
     "react-resizable-panels": "^1.0.9",
     "save-dev": "^0.0.1-security",
     "tailwind-merge": "^2.2.0",
@@ -72,5 +73,11 @@
     "eslint-config-next": "14.0.4",
     "postcss": "^8",
     "typescript": "^5"
+  },
+  "overrides": {
+    "react-json-view": {
+      "react": "$react",
+      "react-dom": "$react-dom"
+    }
   }
 }