Merge pull request #161 from FalkorDB/styling-query-section

fix #156 Styling query section
FalkorDB · Apr 9, 2024 · 57bea33 · 57bea33
2 parents dad1e87 + 5c947d2
commit 57bea33
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 38 deletions.
diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
@@ -1,6 +1,14 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
+const excludedProperties = new Set([
+    "category",
+    "color",
+    "label",
+    "target",
+    "source"
+]);
+
 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"
 
@@ -14,38 +22,33 @@ export default function DataPanel({ node }: { node: Node }) {
             </TableHeader>
             <TableBody>
                 {
-                    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) => {
+                    Object.entries(node).filter((row) => !excludedProperties.has(row[0])).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/query.tsx b/app/graph/query.tsx
@@ -3,7 +3,7 @@ import { Label } from "@/components/ui/label";
 import { cn } from "@/lib/utils";
 import { useState } from "react";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
-import { Menu, Search, Trash2 } from "lucide-react";
+import { Menu, Play, Trash2 } from "lucide-react";
 import { useToast } from "@/components/ui/use-toast";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
@@ -52,7 +52,7 @@ export function Query({ onSubmit, onQueryUpdate, onDeleteGraph, className = "" }
     return (
         <form
             className={cn("flex flex-col space-y-3 md:flex-row md:space-x-3 md:space-y-0", className)}
-            onSubmit={(e) => onSubmit(e)}>
+            onSubmit={onSubmit}>
             <div className="items-center flex flex-row space-x-3">
                 <Label htmlFor="query" className="text">Query</Label>
                 <GraphsList onDelete={onDelete} onSelectedGraph={setGraphName} />
@@ -77,10 +77,10 @@ export function Query({ onSubmit, onQueryUpdate, onDeleteGraph, className = "" }
                 <TooltipProvider>
                     <Tooltip>
                         <TooltipTrigger asChild>
-                            <Button type="submit" className="mr-16"><Search /></Button>
+                            <Button type="submit" className="mr-16"><Play/></Button>
                         </TooltipTrigger>
                         <TooltipContent>
-                            <p>Query</p>
+                            <p>Run Query</p>
                         </TooltipContent>
                     </Tooltip>
                 </TooltipProvider>

diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
@@ -26,7 +26,6 @@ export default function Navbar({ links, collapsed, onExpand }: { links: LinkDefi
   useEffect(() => {
     setMounted(true)
   }, [])
-
   const setDarkMode = (val: boolean) => {
     if (val) {
       setTheme("dark")
@@ -76,4 +75,4 @@ export default function Navbar({ links, collapsed, onExpand }: { links: LinkDefi
       </footer>
     </nav>
   )
-}
+}
diff --git a/e2e/graph.spec.ts b/e2e/graph.spec.ts
@@ -1,4 +1,4 @@
-import { expect, test } from '@playwright/test';
+import { test } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
     await page.goto('http://localhost:3000/login');