Merge pull request #163 from FalkorDB/show-edge-properties

fix #89 Show edge properties
FalkorDB · Apr 9, 2024 · 676f8f9 · 676f8f9
2 parents 5515b38 + f832ee0
commit 676f8f9
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 43 deletions.
diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
@@ -1,7 +1,7 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
-export default function DataPanel({node}: {node: Node}) {
+export default function DataPanel({ node }: { node: Node }) {
     const rowClass = "dark:hover:bg-slate-700 hover:bg-gray-400 border-y-[1px] border-y-gray-700"
 
     return (
@@ -14,33 +14,38 @@ export default function DataPanel({node}: {node: Node}) {
             </TableHeader>
             <TableBody>
                 {
-                    Object.entries(node).filter((row) => Object.values(row)[0] !== "category" && Object.values(row)[0] !== "color").map((row, index) => (
-                        // eslint-disable-next-line react/no-array-index-key
-                        <TableRow className={rowClass} key={index}>
-                            {
-                                Object.values(row).map((cell, cellIndex) => {
+                    Object.entries(node).filter((row) =>
+                        Object.values(row)[0] !== "category"
+                        && Object.values(row)[0] !== "color"
+                        && Object.values(row)[0] !== "label"
+                        && Object.values(row)[0] !== "target"
+                        && Object.values(row)[0] !== "source").map((row, index) => (
+                            // eslint-disable-next-line react/no-array-index-key
+                            <TableRow className={rowClass} key={index}>
+                                {
+                                    Object.values(row).map((cell, cellIndex) => {
 
-                                    const strCell = JSON.stringify(cell)
-                                    const text = cellIndex === 1 ? JSON.parse(strCell) : strCell
-                                    return (
-                                        // eslint-disable-next-line react/no-array-index-key
-                                        <TableCell key={cellIndex}>
-                                            <TooltipProvider>
-                                                <Tooltip>
-                                                    <TooltipTrigger className="max-w-96 truncate">
-                                                        {text}
-                                                    </TooltipTrigger>
-                                                    <TooltipContent>
-                                                        <p>{text}</p>
-                                                    </TooltipContent>
-                                                </Tooltip>
-                                            </TooltipProvider>
-                                        </TableCell>
-                                    )
-                                })
-                            }
-                        </TableRow>
-                    ))
+                                        const strCell = JSON.stringify(cell)
+                                        const text = cellIndex === 1 ? JSON.parse(strCell) : strCell
+                                        return (
+                                            // eslint-disable-next-line react/no-array-index-key
+                                            <TableCell key={cellIndex}>
+                                                <TooltipProvider>
+                                                    <Tooltip>
+                                                        <TooltipTrigger className="max-w-96 truncate">
+                                                            {text}
+                                                        </TooltipTrigger>
+                                                        <TooltipContent>
+                                                            <p>{text}</p>
+                                                        </TooltipContent>
+                                                    </Tooltip>
+                                                </TooltipProvider>
+                                            </TableCell>
+                                        )
+                                    })
+                                }
+                            </TableRow>
+                        ))
                 }
             </TableBody>
         </Table>

diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
@@ -95,7 +95,7 @@ interface GraphViewProps {
 
 const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
 
-    const [selectedNode, setSelectedNode] = useState<Node | null>(null);
+    const [selectedNode, setSelectedObject] = useState(null);
 
     // A reference to the chart container to allowing zooming and editing
     const chartRef = useRef<cytoscape.Core | null>(null)
@@ -155,7 +155,7 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
     }
 
     const handleDoubleClick = async (evt: EventObject) => {
-        const node: Node = evt.target.json().data;
+        const node = evt.target.json().data;
         const elements = await onFetchNode(node);
 
         // adjust entire graph.
@@ -166,8 +166,8 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
     }
 
     const handleTap = (evt: EventObject) => {
-        const node: Node = evt.target.json().data;
-        setSelectedNode(node);
+        const object = evt.target.json().data;
+        setSelectedObject(object);
         dataPanel.current?.expand();
     }
 
@@ -190,6 +190,9 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
 
                         // Listen to the click event on nodes for showing node properties
                         cy.on('tap', 'node', handleTap);
+
+                        // Listen to the click event on edges for showing edge properties
+                        cy.on('tap', 'edge', handleTap);
                     }}
                     stylesheet={getStyle(darkmode)}
                     elements={graph.Elements}

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,8 +1,7 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
+import Spinning from "@/components/custom/spinning";
 import { useSession } from "next-auth/react";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect } from "react";
 
@@ -14,18 +13,15 @@ export default function Home() {
   useEffect(() => {
     if (status === "authenticated") {
       router.push("/graph")
+    } else {
+      router.push("/login")
     }
   }, [router, session, status]);
 
   return (
     <div className="flex flex-col items-center justify-center min-h-screen py-2">
       <main className="flex flex-col items-center justify-center flex-1 px-20 text-center space-y-5">
-        <h1 className="text-4xl font-bold">
-          Welcome to FalkorDB Browser
-        </h1>
-        <Link href="/login" passHref>
-          <Button>Connect</Button>
-        </Link>
+        <Spinning/>
       </main>
     </div>
   )

diff --git a/app/providers.tsx b/app/providers.tsx
@@ -22,7 +22,6 @@ const LINKS = [
   },
   {
     name: "Monitor",
-    // href: "/api/monitor",
     href: "/monitor",
     icon: (<Activity className="h-6 w-6" />),
   },

diff --git a/components/custom/spinning.tsx b/components/custom/spinning.tsx
@@ -0,0 +1,14 @@
+import { Skeleton } from "@/components/ui/skeleton"
+
+
+export default function Spinning() {
+  return (
+    <div className="flex items-center space-x-4">
+      <Skeleton className="h-12 w-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  )
+}
diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }
diff --git a/e2e/createGraph.spec.ts b/e2e/createGraph.spec.ts
@@ -9,5 +9,5 @@ test('create graph', async ({ page }) => {
     await page.getByRole('button', { name: 'Create' }).click();
     await page.getByPlaceholder('MATCH (n) OPTIONAL MATCH (n').fill('CREATE (:Rider {name:\'Valentino Rossi\'})-[:rides]->(:Team {name:\'Yamaha\'}), (:Rider {name:\'Dani Pedrosa\'})-[:rides]->(:Team {name:\'Honda\'}), (:Rider {name:\'Andrea Dovizioso\'})-[:rides]->(:Team {name:\'Ducati\'})');
     await page.getByRole('button').first().click();
-    await page.getByText("falkorDB").first().click()
-});
+    await page.getByText('falkorDB').first().click()
+})
diff --git a/e2e/homePage.spec.ts b/e2e/homePage.spec.ts
@@ -14,5 +14,5 @@ test('connect', async ({ page }) => {
 test('themes', async ({ page }) => {
   await page.getByLabel('system mode').click();
   await page.getByLabel('dark mode').click();
-  expect(page.getByLabel('light mode')).toBeVisible();
+  await page.getByLabel('light mode').click();
 });