From cf046b63e002a0a7d3e9767441a59a57891cb650 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Sun, 7 Apr 2024 15:25:43 +0300
Subject: [PATCH 01/22] more styling

---
 components/custom/navbar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
index 1f5f66c..c76a200 100644
--- a/components/custom/navbar.tsx
+++ b/components/custom/navbar.tsx
@@ -67,7 +67,7 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
   const darkmode = theme === "dark" || (theme === "system" && systemTheme === "dark")
   return (
     <>
-      <nav className="w-full h-full bg-gray-100 dark:bg-gray-800 p-5 flex flex-col space-y-96 ">
+      <nav className="w-full h-full bg-gray-100 dark:bg-gray-800 p-5 pb-16 flex flex-col justify-between ">
         <div>
           <div className="flex items-center space-x-2">
             <Link href="" onClick={onExpand}>

From ad55db66f4af0667fc3c96b5a9f1b0219327d265 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 14:00:27 +0300
Subject: [PATCH 02/22] styling the navbar

---
 app/providers.tsx            |  28 +-------
 components/custom/navbar.tsx | 124 +++++++++++++++++++++++------------
 2 files changed, 82 insertions(+), 70 deletions(-)

diff --git a/app/providers.tsx b/app/providers.tsx
index bfabe05..725ea90 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -2,38 +2,12 @@
 
 import Navbar from "@/components/custom/navbar";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
-import { Activity, Info, LogOut, Waypoints } from "lucide-react";
-import { SessionProvider, signOut } from "next-auth/react";
+import { SessionProvider } from "next-auth/react";
 import { ThemeProvider } from 'next-themes'
 import { useEffect, useRef, useState } from "react";
 import { ImperativePanelHandle } from "react-resizable-panels";
 import useScreenSize from "./useScreenSize";
 
-const LINKS = [
-  {
-    name: "Connection Details",
-    href: "/details",
-    icon: (<Info className="h-6 w-6" />),
-  },
-  {
-    name: "Graph",
-    href: "/graph",
-    icon: (<Waypoints className="h-6 w-6" />),
-  },
-  {
-    name: "Monitor",
-    // href: "/api/monitor",
-    href: "/monitor",
-    icon: (<Activity className="h-6 w-6" />),
-  },
-  {
-    name: "Disconnect",
-    href: "",
-    icon: (<LogOut className="h-6 w-6" />),
-    onClick: () => { signOut({ callbackUrl: '/login' }) }
-  },
-]
-
 export default function NextAuthProvider({ children }: { children: React.ReactNode }) {
 
   const { screenSize } = useScreenSize();
diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
index c76a200..e1e3131 100644
--- a/components/custom/navbar.tsx
+++ b/components/custom/navbar.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import { Activity, Info, LogOut, Menu, Waypoints } from "lucide-react";
+import { Activity, Info, LogOut, Menu, Settings, Waypoints } from "lucide-react";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
 import { useEffect, useState } from "react";
@@ -9,6 +9,8 @@ import { cn } from "@/lib/utils"
 import { Switch } from "../ui/switch";
 import { Label } from "../ui/label";
 import GithubMark from "./GithubMark";
+import { DropdownMenu, DropdownMenuContent } from "../ui/dropdown-menu";
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 
 export interface LinkDefinition {
   name: string,
@@ -18,11 +20,6 @@ export interface LinkDefinition {
 }
 
 const linksUp: LinkDefinition[] = [
-  {
-    name: "Connection Details",
-    href: "/details",
-    icon: (<Info className="h-6 w-6" />),
-  },
   {
     name: "Graph",
     href: "/graph",
@@ -37,6 +34,11 @@ const linksUp: LinkDefinition[] = [
 ]
 
 const linksDown: LinkDefinition[] = [
+  {
+    name: "Connection Details",
+    href: "/details",
+    icon: (<Info className="h-6 w-6" />),
+  },
   {
     name: "Disconnect",
     href: "",
@@ -48,7 +50,6 @@ const linksDown: LinkDefinition[] = [
 export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, onExpand: () => void }) {
   const { status } = useSession()
   const { theme, setTheme, systemTheme } = useTheme()
-
   const [mounted, setMounted] = useState(false)
   const pathName = usePathname()
   useEffect(() => {
@@ -67,23 +68,29 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
   const darkmode = theme === "dark" || (theme === "system" && systemTheme === "dark")
   return (
     <>
-      <nav className="w-full h-full bg-gray-100 dark:bg-gray-800 p-5 pb-16 flex flex-col justify-between ">
+      <nav className={"w-full h-full bg-gray-100 dark:bg-gray-800 py-7 flex flex-col justify-between items-center"}>
+        <div className="flex fixed left-3 top-4 items-center space-x-2">
+          <Link href="" onClick={onExpand}>
+            <Menu className="h-6 w-6" />
+          </Link>
+        </div>
         <div>
-          <div className="flex items-center space-x-2">
-            <Link href="" onClick={onExpand}>
-              <Menu className="h-6 w-6" />
-            </Link>
-            {!collapsed && (<span className="font-bold">FalkorDB Browser</span>)}
-          </div>
           {status === "authenticated" &&
-            <ul className="space-y-4">
+            <ul className="flex flex-col gap-5 pt-10">
               {
                 linksUp.map((link, index) => (
                   // eslint-disable-next-line react/no-array-index-key
                   <li key={index} className="flex items-center space-x-2">
-                    <Link title={link.name} className={cn("underline underline-offset-2 flex space-x-2", pathName === link.href ? 'text-blue-300' : '')}
-                      href={link.href} onClick={link.onClick}>
-                      {link.icon} {!collapsed && (<p> {link.name}</p>)}
+                    <Link
+                      className={cn("underline underline-offset-2 flex space-x-2", pathName === link.href ? 'text-blue-300' : '')}
+                      href={link.href} onClick={link.onClick}
+                    >
+                      {link.icon}
+                      {
+                        !collapsed &&
+                        <div className="flex flex-col">
+                          {link.name.split(" ").map(word => <p>{word}</p>)}
+                        </div>}
                     </Link>
                   </li>
                 ))
@@ -91,34 +98,65 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
             </ul>
           }
         </div>
-        <div className="space-y-4">
-          {
-            mounted &&
-            <div className="flex items-center space-x-2">
-              <Switch id="dark-mode" checked={darkmode} onCheckedChange={setDarkMode} />
-              {!collapsed && (<Label htmlFor="dark-mode">{`${theme} mode`}</Label>)}
-            </div>
-          }
-          {
-                linksDown.map((link, index) => (
-                  // eslint-disable-next-line react/no-array-index-key
-                  <li key={index} className="flex items-center space-x-2">
-                    <Link title={link.name} className={cn("underline underline-offset-2 flex space-x-2", pathName === link.href ? 'text-blue-300' : '')}
-                      href={link.href} onClick={link.onClick}>
-                      {link.icon} {!collapsed && (<p> {link.name}</p>)}
-                    </Link>
-                  </li>
-                ))
+        <div>
+          <ul className="flex flex-col gap-5 items-center">
+            <li key={0}>
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <div className="flex flex-row gap-2">
+                    <Settings />
+                    {
+                      !collapsed &&
+                      <p >Settings</p>
+                    }
+                  </div>
+                </DropdownMenuTrigger>
+                {
+                  mounted &&
+                  <DropdownMenuContent side="right" className="flex flex-col justify-center p-3">
+                    <div className="flex items-center space-x-2">
+                      <Switch id="dark-mode" checked={darkmode} onCheckedChange={setDarkMode} />
+                      <Label htmlFor="dark-mode">{`${theme} mode`}</Label>
+                    </div>
+                  </DropdownMenuContent>
+                }
+              </DropdownMenu>
+            </li>
+            {
+              linksDown.map((link, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <li key={index + 1} className="flex items-center space-x-2">
+                  <Link
+                    title={link.name}
+                    className={cn("underline underline-offset-2 flex space-x-2", pathName === link.href ? 'text-blue-300' : '')}
+                    href={link.href} onClick={link.onClick}
+                  >
+                    {link.icon}
+                    {
+                      !collapsed &&
+                      <div className="flex flex-col">
+                        {link.name.split(" ").map(word => <p>{word}</p>)}
+                      </div>}
+                  </Link>
+                </li>
+              ))
+            }
+            <li key={linksDown.length + 1} className="flex flex-row items-center gap-1">
+              <a href="https://github.com/falkordb/falkordb-browser" title="Github repository" aria-label="Github repository">
+                <GithubMark darkMode={darkmode} className="h-4 w-4" />
+              </a>
+              {
+                !collapsed && (
+                  <>
+                    <p className="text-xs">Made by</p>
+                    <a className="underline text-xs" href="https://www.falkordb.com">FalkorDB</a>
+                  </>
+                )
               }
+            </ li>
+          </ul>
         </div>
       </nav>
-      <footer className="pl-5 pb-3 flex flex-row items-center space-x-1 fixed bottom-1 text-xs">
-        <a href="https://github.com/falkordb/falkordb-browser" title="Github repository" aria-label="Github repository">
-          <GithubMark darkMode={darkmode} className="h-4 w-4" />
-        </a>
-        <span>Made by</span>
-        <a className="underline" href="https://www.falkordb.com">FalkorDB</a>
-      </footer>
     </>
   )
 }

From fb72c701aa98fd1d3329c8c97e564a3c6c9f9a53 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 14:30:59 +0300
Subject: [PATCH 03/22] more styling

---
 app/providers.tsx            |  2 +-
 components/custom/navbar.tsx | 30 ++++++++++++++----------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/app/providers.tsx b/app/providers.tsx
index 725ea90..fbc14ab 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -35,7 +35,7 @@ export default function NextAuthProvider({ children }: { children: React.ReactNo
       }
     }
   }
-  const panelSize = isSmallScreen ? 40 : 10
+  const panelSize = isSmallScreen ? 40 : 9
   const collapsedSize = isSmallScreen ? 20 : 3
 
   return (
diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
index e1e3131..51d38dd 100644
--- a/components/custom/navbar.tsx
+++ b/components/custom/navbar.tsx
@@ -68,21 +68,19 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
   const darkmode = theme === "dark" || (theme === "system" && systemTheme === "dark")
   return (
     <>
-      <nav className={"w-full h-full bg-gray-100 dark:bg-gray-800 py-7 flex flex-col justify-between items-center"}>
-        <div className="flex fixed left-3 top-4 items-center space-x-2">
-          <Link href="" onClick={onExpand}>
-            <Menu className="h-6 w-6" />
-          </Link>
-        </div>
-        <div>
+      <nav className={`w-full h-full bg-gray-100 dark:bg-gray-800 py-7 flex flex-col justify-between ${collapsed ? "items-center" : "justify-start"}`}>
+        <div className="pl-2">
+            <Link href="" onClick={onExpand}>
+              <Menu className="h-6 w-6" />
+            </Link>
           {status === "authenticated" &&
-            <ul className="flex flex-col gap-5 pt-10">
+            <ul className="flex flex-col gap-5 pt-5">
               {
                 linksUp.map((link, index) => (
                   // eslint-disable-next-line react/no-array-index-key
-                  <li key={index} className="flex items-center space-x-2">
+                  <li key={index}>
                     <Link
-                      className={cn("underline underline-offset-2 flex space-x-2", pathName === link.href ? 'text-blue-300' : '')}
+                      className={cn("underline underline-offset-2 flex gap-2", pathName === link.href ? 'text-blue-300' : '')}
                       href={link.href} onClick={link.onClick}
                     >
                       {link.icon}
@@ -98,8 +96,8 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
             </ul>
           }
         </div>
-        <div>
-          <ul className="flex flex-col gap-5 items-center">
+        <div className="pl-2">
+          <ul className="flex flex-col gap-5">
             <li key={0}>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -107,14 +105,14 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
                     <Settings />
                     {
                       !collapsed &&
-                      <p >Settings</p>
+                      <p className="underline underline-offset-2">Settings</p>
                     }
                   </div>
                 </DropdownMenuTrigger>
                 {
                   mounted &&
                   <DropdownMenuContent side="right" className="flex flex-col justify-center p-3">
-                    <div className="flex items-center space-x-2">
+                    <div className="flex items-center gap-2">
                       <Switch id="dark-mode" checked={darkmode} onCheckedChange={setDarkMode} />
                       <Label htmlFor="dark-mode">{`${theme} mode`}</Label>
                     </div>
@@ -125,10 +123,10 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
             {
               linksDown.map((link, index) => (
                 // eslint-disable-next-line react/no-array-index-key
-                <li key={index + 1} className="flex items-center space-x-2">
+                <li key={index + 1}>
                   <Link
                     title={link.name}
-                    className={cn("underline underline-offset-2 flex space-x-2", pathName === link.href ? 'text-blue-300' : '')}
+                    className={cn("underline underline-offset-2 flex gap-2", pathName === link.href ? 'text-blue-300' : '')}
                     href={link.href} onClick={link.onClick}
                   >
                     {link.icon}

From e453935a44e876957c9ea5a29e1b79c4d676f945 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:17:17 +0300
Subject: [PATCH 04/22] fix lint

---
 app/graph/GraphView.tsx      |   2 +-
 components/custom/navbar.tsx | 146 +++++++++++++++++------------------
 2 files changed, 74 insertions(+), 74 deletions(-)

diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
index 1755849..fc4e746 100644
--- a/app/graph/GraphView.tsx
+++ b/app/graph/GraphView.tsx
@@ -1,6 +1,6 @@
 import CytoscapeComponent from "react-cytoscapejs";
 import { toast } from "@/components/ui/use-toast";
-import cytoscape, { EdgeCollection, ElementDefinition, EventObject, NodeDataDefinition } from "cytoscape";
+import cytoscape, { ElementDefinition, EventObject, NodeDataDefinition } from "cytoscape";
 import { useRef, useState, useImperativeHandle, forwardRef } from "react";
 import { signOut } from "next-auth/react";
 import fcose from 'cytoscape-fcose';
diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
index 51d38dd..a160ab7 100644
--- a/components/custom/navbar.tsx
+++ b/components/custom/navbar.tsx
@@ -6,11 +6,11 @@ import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils"
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 import { Switch } from "../ui/switch";
 import { Label } from "../ui/label";
 import GithubMark from "./GithubMark";
 import { DropdownMenu, DropdownMenuContent } from "../ui/dropdown-menu";
-import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
 
 export interface LinkDefinition {
   name: string,
@@ -67,65 +67,18 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
 
   const darkmode = theme === "dark" || (theme === "system" && systemTheme === "dark")
   return (
-    <>
-      <nav className={`w-full h-full bg-gray-100 dark:bg-gray-800 py-7 flex flex-col justify-between ${collapsed ? "items-center" : "justify-start"}`}>
-        <div className="pl-2">
-            <Link href="" onClick={onExpand}>
-              <Menu className="h-6 w-6" />
-            </Link>
-          {status === "authenticated" &&
-            <ul className="flex flex-col gap-5 pt-5">
-              {
-                linksUp.map((link, index) => (
-                  // eslint-disable-next-line react/no-array-index-key
-                  <li key={index}>
-                    <Link
-                      className={cn("underline underline-offset-2 flex gap-2", pathName === link.href ? 'text-blue-300' : '')}
-                      href={link.href} onClick={link.onClick}
-                    >
-                      {link.icon}
-                      {
-                        !collapsed &&
-                        <div className="flex flex-col">
-                          {link.name.split(" ").map(word => <p>{word}</p>)}
-                        </div>}
-                    </Link>
-                  </li>
-                ))
-              }
-            </ul>
-          }
-        </div>
-        <div className="pl-2">
-          <ul className="flex flex-col gap-5">
-            <li key={0}>
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <div className="flex flex-row gap-2">
-                    <Settings />
-                    {
-                      !collapsed &&
-                      <p className="underline underline-offset-2">Settings</p>
-                    }
-                  </div>
-                </DropdownMenuTrigger>
-                {
-                  mounted &&
-                  <DropdownMenuContent side="right" className="flex flex-col justify-center p-3">
-                    <div className="flex items-center gap-2">
-                      <Switch id="dark-mode" checked={darkmode} onCheckedChange={setDarkMode} />
-                      <Label htmlFor="dark-mode">{`${theme} mode`}</Label>
-                    </div>
-                  </DropdownMenuContent>
-                }
-              </DropdownMenu>
-            </li>
+    <nav className={`w-full h-full bg-gray-100 dark:bg-gray-800 py-7 flex flex-col justify-between ${collapsed ? "items-center" : "justify-start"}`}>
+      <div className="pl-2">
+        <Link href="" onClick={onExpand}>
+          <Menu className="h-6 w-6" />
+        </Link>
+        {status === "authenticated" &&
+          <ul className="flex flex-col gap-5 pt-5">
             {
-              linksDown.map((link, index) => (
+              linksUp.map((link, index) => (
                 // eslint-disable-next-line react/no-array-index-key
-                <li key={index + 1}>
+                <li key={index}>
                   <Link
-                    title={link.name}
                     className={cn("underline underline-offset-2 flex gap-2", pathName === link.href ? 'text-blue-300' : '')}
                     href={link.href} onClick={link.onClick}
                   >
@@ -133,28 +86,75 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
                     {
                       !collapsed &&
                       <div className="flex flex-col">
-                        {link.name.split(" ").map(word => <p>{word}</p>)}
+                        {/* eslint-disable-next-line react/no-array-index-key */}
+                        {link.name.split(" ").map((str, strIndex) => <p key={strIndex}>{str}</p>)}
                       </div>}
                   </Link>
                 </li>
               ))
             }
-            <li key={linksDown.length + 1} className="flex flex-row items-center gap-1">
-              <a href="https://github.com/falkordb/falkordb-browser" title="Github repository" aria-label="Github repository">
-                <GithubMark darkMode={darkmode} className="h-4 w-4" />
-              </a>
+          </ul>
+        }
+      </div>
+      <div className="pl-2">
+        <ul className="flex flex-col gap-5">
+          <li key={0}>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <div className="flex flex-row gap-2">
+                  <Settings />
+                  {
+                    !collapsed &&
+                    <p className="underline underline-offset-2">Settings</p>
+                  }
+                </div>
+              </DropdownMenuTrigger>
               {
-                !collapsed && (
-                  <>
-                    <p className="text-xs">Made by</p>
-                    <a className="underline text-xs" href="https://www.falkordb.com">FalkorDB</a>
-                  </>
-                )
+                mounted &&
+                <DropdownMenuContent side="right" className="flex flex-col justify-center p-3">
+                  <div className="flex items-center gap-2">
+                    <Switch id="dark-mode" checked={darkmode} onCheckedChange={setDarkMode} />
+                    <Label htmlFor="dark-mode">{`${theme} mode`}</Label>
+                  </div>
+                </DropdownMenuContent>
               }
-            </ li>
-          </ul>
-        </div>
-      </nav>
-    </>
+            </DropdownMenu>
+          </li>
+          {
+            linksDown.map((link, index) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <li key={index + 1}>
+                <Link
+                  title={link.name}
+                  className={cn("underline underline-offset-2 flex gap-2", pathName === link.href ? 'text-blue-300' : '')}
+                  href={link.href} onClick={link.onClick}
+                >
+                  {link.icon}
+                  {
+                    !collapsed &&
+                    <div className="flex flex-col">
+                      {/* eslint-disable-next-line react/no-array-index-key */}
+                      {link.name.split(" ").map((str, strIndex) => <p key={strIndex}>{str}</p>)}
+                    </div>}
+                </Link>
+              </li>
+            ))
+          }
+          <li key={linksDown.length + 1} className="flex flex-row items-center gap-1">
+            <a href="https://github.com/falkordb/falkordb-browser" title="Github repository" aria-label="Github repository">
+              <GithubMark darkMode={darkmode} className="h-4 w-4" />
+            </a>
+            {
+              !collapsed && (
+                <>
+                  <p className="text-xs">Made by</p>
+                  <a className="underline text-xs" href="https://www.falkordb.com">FalkorDB</a>
+                </>
+              )
+            }
+          </ li>
+        </ul>
+      </div>
+    </nav>
   )
 }

From f8591a7cc7b4adce41db15f4b2101a295bc57893 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:24:58 +0300
Subject: [PATCH 05/22] remove testing

---
 components/custom/navbar.tsx | 160 -----------------------------------
 e2e/createGraph.spec.ts      |  13 ---
 e2e/graph.spec.ts            |  29 -------
 e2e/homePage.spec.ts         |  18 ----
 4 files changed, 220 deletions(-)
 delete mode 100644 components/custom/navbar.tsx
 delete mode 100644 e2e/createGraph.spec.ts
 delete mode 100644 e2e/graph.spec.ts
 delete mode 100644 e2e/homePage.spec.ts

diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
deleted file mode 100644
index a160ab7..0000000
--- a/components/custom/navbar.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import { Activity, Info, LogOut, Menu, Settings, Waypoints } from "lucide-react";
-import { signOut, useSession } from "next-auth/react";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import { useTheme } from "next-themes";
-import { usePathname } from "next/navigation";
-import { cn } from "@/lib/utils"
-import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
-import { Switch } from "../ui/switch";
-import { Label } from "../ui/label";
-import GithubMark from "./GithubMark";
-import { DropdownMenu, DropdownMenuContent } from "../ui/dropdown-menu";
-
-export interface LinkDefinition {
-  name: string,
-  href: string,
-  icon: JSX.Element,
-  onClick?: () => void
-}
-
-const linksUp: LinkDefinition[] = [
-  {
-    name: "Graph",
-    href: "/graph",
-    icon: (<Waypoints className="h-6 w-6" />),
-  },
-  {
-    name: "Monitor",
-    // href: "/api/monitor",
-    href: "/monitor",
-    icon: (<Activity className="h-6 w-6" />),
-  },
-]
-
-const linksDown: LinkDefinition[] = [
-  {
-    name: "Connection Details",
-    href: "/details",
-    icon: (<Info className="h-6 w-6" />),
-  },
-  {
-    name: "Disconnect",
-    href: "",
-    icon: (<LogOut className="h-6 w-6" />),
-    onClick: () => { signOut({ callbackUrl: '/login' }) }
-  },
-]
-
-export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, onExpand: () => void }) {
-  const { status } = useSession()
-  const { theme, setTheme, systemTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
-  const pathName = usePathname()
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  const setDarkMode = (val: boolean) => {
-    if (val) {
-      setTheme("dark")
-    }
-    else {
-      setTheme("light")
-    }
-  }
-
-  const darkmode = theme === "dark" || (theme === "system" && systemTheme === "dark")
-  return (
-    <nav className={`w-full h-full bg-gray-100 dark:bg-gray-800 py-7 flex flex-col justify-between ${collapsed ? "items-center" : "justify-start"}`}>
-      <div className="pl-2">
-        <Link href="" onClick={onExpand}>
-          <Menu className="h-6 w-6" />
-        </Link>
-        {status === "authenticated" &&
-          <ul className="flex flex-col gap-5 pt-5">
-            {
-              linksUp.map((link, index) => (
-                // eslint-disable-next-line react/no-array-index-key
-                <li key={index}>
-                  <Link
-                    className={cn("underline underline-offset-2 flex gap-2", pathName === link.href ? 'text-blue-300' : '')}
-                    href={link.href} onClick={link.onClick}
-                  >
-                    {link.icon}
-                    {
-                      !collapsed &&
-                      <div className="flex flex-col">
-                        {/* eslint-disable-next-line react/no-array-index-key */}
-                        {link.name.split(" ").map((str, strIndex) => <p key={strIndex}>{str}</p>)}
-                      </div>}
-                  </Link>
-                </li>
-              ))
-            }
-          </ul>
-        }
-      </div>
-      <div className="pl-2">
-        <ul className="flex flex-col gap-5">
-          <li key={0}>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <div className="flex flex-row gap-2">
-                  <Settings />
-                  {
-                    !collapsed &&
-                    <p className="underline underline-offset-2">Settings</p>
-                  }
-                </div>
-              </DropdownMenuTrigger>
-              {
-                mounted &&
-                <DropdownMenuContent side="right" className="flex flex-col justify-center p-3">
-                  <div className="flex items-center gap-2">
-                    <Switch id="dark-mode" checked={darkmode} onCheckedChange={setDarkMode} />
-                    <Label htmlFor="dark-mode">{`${theme} mode`}</Label>
-                  </div>
-                </DropdownMenuContent>
-              }
-            </DropdownMenu>
-          </li>
-          {
-            linksDown.map((link, index) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <li key={index + 1}>
-                <Link
-                  title={link.name}
-                  className={cn("underline underline-offset-2 flex gap-2", pathName === link.href ? 'text-blue-300' : '')}
-                  href={link.href} onClick={link.onClick}
-                >
-                  {link.icon}
-                  {
-                    !collapsed &&
-                    <div className="flex flex-col">
-                      {/* eslint-disable-next-line react/no-array-index-key */}
-                      {link.name.split(" ").map((str, strIndex) => <p key={strIndex}>{str}</p>)}
-                    </div>}
-                </Link>
-              </li>
-            ))
-          }
-          <li key={linksDown.length + 1} className="flex flex-row items-center gap-1">
-            <a href="https://github.com/falkordb/falkordb-browser" title="Github repository" aria-label="Github repository">
-              <GithubMark darkMode={darkmode} className="h-4 w-4" />
-            </a>
-            {
-              !collapsed && (
-                <>
-                  <p className="text-xs">Made by</p>
-                  <a className="underline text-xs" href="https://www.falkordb.com">FalkorDB</a>
-                </>
-              )
-            }
-          </ li>
-        </ul>
-      </div>
-    </nav>
-  )
-}
diff --git a/e2e/createGraph.spec.ts b/e2e/createGraph.spec.ts
deleted file mode 100644
index 439b830..0000000
--- a/e2e/createGraph.spec.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { test } from '@playwright/test';
-
-test('create graph', async ({ page }) => {
-    await page.goto('http://localhost:3000/login');
-    await page.getByRole('button', { name: 'Connect' }).click();
-    await page.getByText('Select Graph...').click();
-    await page.getByRole('button', { name: 'Create new Graph...' }).click();
-    await page.getByPlaceholder('Graph name').fill('falkorDB');
-    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').click();
-});
\ No newline at end of file
diff --git a/e2e/graph.spec.ts b/e2e/graph.spec.ts
deleted file mode 100644
index 5d97bf5..0000000
--- a/e2e/graph.spec.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test.beforeEach(async ({ page }) => {
-    await page.goto('http://localhost:3000/login');
-    await page.getByRole('button', { name: 'Connect' }).click();
-    await page.getByText('Select Graph...').click();
-    await page.getByRole('button', { name: 'Create new Graph...' }).click();
-    await page.getByPlaceholder('Graph name').fill('falkorDB');
-    await page.getByRole('button', { name: 'Create' }).click();
-    await page.waitForTimeout(2000)
-    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.getByPlaceholder('MATCH (n) OPTIONAL MATCH (n)').click({ clickCount: 3 });
-    await page.getByPlaceholder('MATCH (n) OPTIONAL MATCH (n)').fill('');
-});
-
-test('delete graph', async ({ page }) => {
-    await page.getByRole('button').nth(1).click();
-    await page.getByRole('button', { name: 'Delete graph' }).click();
-    await page.getByRole('button', { name: 'Delete' }).click();
-    await page.getByText('Select Graph...').click()
-});
-
-test('tabs navigation', async ({ page }) => {
-    await page.getByRole('button').first().click();
-    await page.getByRole('tab', {name: 'Graph'}).click();
-    await page.getByRole('tab', {name: 'Data'}).first().click();
-    await page.getByRole('tab', {name: 'Metadata'}).click();
-});
\ No newline at end of file
diff --git a/e2e/homePage.spec.ts b/e2e/homePage.spec.ts
deleted file mode 100644
index 76cba0a..0000000
--- a/e2e/homePage.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('http://localhost:3000/');
-});
-
-test('connect', async ({ page }) => {
-    await page.getByRole('button').click();
-    await page.waitForURL('http://localhost:3000');
-    expect(page.url()).toBe('http://localhost:3000');
-  
-});
-
-test('themes', async ({ page }) => {
-  await page.getByLabel('system mode').click();
-  await page.getByLabel('dark mode').click();
-  expect(page.getByLabel('light mode')).toBeVisible();
-});
\ No newline at end of file

From 97217f968f3a0d58752214256517f4657bfbf0e7 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:33:09 +0300
Subject: [PATCH 06/22] add on test and undeleted navbar

---
 {e2e => app/e2e}/login.spec.ts |   0
 components/custom/navbar.tsx   | 160 +++++++++++++++++++++++++++++++++
 2 files changed, 160 insertions(+)
 rename {e2e => app/e2e}/login.spec.ts (100%)
 create mode 100644 components/custom/navbar.tsx

diff --git a/e2e/login.spec.ts b/app/e2e/login.spec.ts
similarity index 100%
rename from e2e/login.spec.ts
rename to app/e2e/login.spec.ts
diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
new file mode 100644
index 0000000..cbb0175
--- /dev/null
+++ b/components/custom/navbar.tsx
@@ -0,0 +1,160 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import { Activity, Info, LogOut, Menu, Settings, Waypoints } from "lucide-react";
+import { signOut, useSession } from "next-auth/react";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils"
+import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { Switch } from "../ui/switch";
+import { Label } from "../ui/label";
+import GithubMark from "./GithubMark";
+import { DropdownMenu, DropdownMenuContent } from "../ui/dropdown-menu";
+
+export interface LinkDefinition {
+  name: string,
+  href: string,
+  icon: JSX.Element,
+  onClick?: () => void
+}
+
+const linksUp: LinkDefinition[] = [
+  {
+    name: "Graph",
+    href: "/graph",
+    icon: (<Waypoints className="h-6 w-6" />),
+  },
+  {
+    name: "Monitor",
+    // href: "/api/monitor",
+    href: "/monitor",
+    icon: (<Activity className="h-6 w-6" />),
+  },
+]
+
+const linksDown: LinkDefinition[] = [
+  {
+    name: "Connection Details",
+    href: "/details",
+    icon: (<Info className="h-6 w-6" />),
+  },
+  {
+    name: "Disconnect",
+    href: "",
+    icon: (<LogOut className="h-6 w-6" />),
+    onClick: () => { signOut({ callbackUrl: '/login' }) }
+  },
+]
+
+export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, onExpand: () => void }) {
+  const { status } = useSession()
+  const { theme, setTheme, systemTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+  const pathName = usePathname()
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  const setDarkMode = (val: boolean) => {
+    if (val) {
+      setTheme("dark")
+    }
+    else {
+      setTheme("light")
+    }
+  }
+
+  const darkmode = theme === "dark" || (theme === "system" && systemTheme === "dark")
+  return (
+    <nav className={`w-full h-full bg-gray-100 dark:bg-gray-800 py-7 flex flex-col justify-between ${collapsed ? "items-center" : "justify-start"}`}>
+      <div className="pl-2">
+        <Link href="" onClick={onExpand}>
+          <Menu className="h-6 w-6" />
+        </Link>
+        {status === "authenticated" &&
+          <ul className="flex flex-col gap-5 pt-5">
+            {
+              linksUp.map((link, index) => (
+                // eslint-disable-next-line react/no-array-index-key
+                <li key={index}>
+                  <Link
+                    className={cn("underline underline-offset-2 flex gap-2", pathName === link.href ? 'text-blue-300' : '')}
+                    href={link.href} onClick={link.onClick}
+                  >
+                    {link.icon}
+                    {
+                      !collapsed &&
+                      <div className="flex flex-col">
+                        {/* eslint-disable-next-line react/no-array-index-key */}
+                        {link.name.split(" ").map((str, strIndex) => <p key={strIndex}>{str}</p>)}
+                      </div>}
+                  </Link>
+                </li>
+              ))
+            }
+          </ul>
+        }
+      </div>
+      <div className="pl-2">
+        <ul className="flex flex-col gap-5">
+          <li key={0}>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <div className="flex flex-row gap-2">
+                  <Settings />
+                  {
+                    !collapsed &&
+                    <p className="underline underline-offset-2">Settings</p>
+                  }
+                </div>
+              </DropdownMenuTrigger>
+              {
+                mounted &&
+                <DropdownMenuContent side="right" className="flex flex-col justify-center p-3">
+                  <div className="flex items-center gap-2">
+                    <Switch id="dark-mode" checked={darkmode} onCheckedChange={setDarkMode} />
+                    <Label htmlFor="dark-mode">{`${theme} mode`}</Label>
+                  </div>
+                </DropdownMenuContent>
+              }
+            </DropdownMenu>
+          </li>
+          {
+            linksDown.map((link, index) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <li key={index + 1}>
+                <Link
+                  title={link.name}
+                  className={cn("underline underline-offset-2 flex gap-2", pathName === link.href ? 'text-blue-300' : '')}
+                  href={link.href} onClick={link.onClick}
+                >
+                  {link.icon}
+                  {
+                    !collapsed &&
+                    <div className="flex flex-col">
+                      {/* eslint-disable-next-line react/no-array-index-key */}
+                      {link.name.split(" ").map((str, strIndex) => <p key={strIndex}>{str}</p>)}
+                    </div>}
+                </Link>
+              </li>
+            ))
+          }
+          <li key={linksDown.length + 1} className="flex flex-row items-center gap-1">
+            <a href="https://github.com/falkordb/falkordb-browser" title="Github repository" aria-label="Github repository">
+              <GithubMark darkMode={darkmode} className="h-4 w-4" />
+            </a>
+            {
+              !collapsed && (
+                <>
+                  <p className="text-xs">Made by</p>
+                  <a className="underline text-xs" href="https://www.falkordb.com">FalkorDB</a>
+                </>
+              )
+            }
+          </ li>
+        </ul>
+      </div>
+    </nav>
+  )
+}
\ No newline at end of file

From 6eb4087cf32db10bd1b9469d46d3cc562d8b8757 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:33:32 +0300
Subject: [PATCH 07/22] fix lint

---
 app/providers.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/providers.tsx b/app/providers.tsx
index fbc14ab..db36909 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -1,11 +1,11 @@
 "use client";
 
-import Navbar from "@/components/custom/navbar";
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { SessionProvider } from "next-auth/react";
 import { ThemeProvider } from 'next-themes'
 import { useEffect, useRef, useState } from "react";
 import { ImperativePanelHandle } from "react-resizable-panels";
+import Navbar from "@/components/custom/navbar";
 import useScreenSize from "./useScreenSize";
 
 export default function NextAuthProvider({ children }: { children: React.ReactNode }) {

From 565a3ef21a846137fe7218521d730d3639f2ce16 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:39:27 +0300
Subject: [PATCH 08/22] removing changes from other branch

---
 app/graph/DataPanel.tsx |  7 +------
 app/graph/GraphView.tsx | 15 +++------------
 2 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
index 2c52823..31a3638 100644
--- a/app/graph/DataPanel.tsx
+++ b/app/graph/DataPanel.tsx
@@ -14,12 +14,7 @@ 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) => (
+                    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}>
                                 {
diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
index fc4e746..d4252bc 100644
--- a/app/graph/GraphView.tsx
+++ b/app/graph/GraphView.tsx
@@ -165,18 +165,12 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
         }
     }
 
-    const handleTapNode = (evt: EventObject) => {
-        const node = evt.target.json().data;
+    const handleTap = (evt: EventObject) => {
+        const node: Node = evt.target.json().data;
         setSelectedNode(node);
         dataPanel.current?.expand();
     }
     
-    const handleTapEdge = (evt: EventObject) => {
-        const edge = evt.target.json().data;
-        setSelectedNode(edge);
-        dataPanel.current?.expand();
-    }
-
     return (
         <ResizablePanelGroup direction="horizontal">
             <ResizablePanel className="h-full flex flex-col">
@@ -195,10 +189,7 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
                         cy.on('dbltap', 'node', handleDoubleClick);
 
                         // Listen to the click event on nodes for showing node properties
-                        cy.on('tap', 'node', handleTapNode);
-                        
-                        // Listen to the click event on edges for showing edge properties
-                        cy.on('tap', 'edge', handleTapEdge);
+                        cy.on('tap', 'node', handleTap);
                     }}
                     stylesheet={getStyle(darkmode)}
                     elements={graph.Elements}

From c43f75f77edf73af328f746fb07e5334057f8c14 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:41:01 +0300
Subject: [PATCH 09/22] remove changes not from this branch

---
 app/graph/GraphView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
index d4252bc..1fbcc41 100644
--- a/app/graph/GraphView.tsx
+++ b/app/graph/GraphView.tsx
@@ -155,7 +155,7 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
     }
 
     const handleDoubleClick = async (evt: EventObject) => {
-        const node = evt.target.json().data;
+        const node: Node = evt.target.json().data;
         const elements = await onFetchNode(node);
 
         // adjust entire graph.
@@ -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">

From 53cb6dc1971c7227375a1922620a15bb94410954 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:44:30 +0300
Subject: [PATCH 10/22] move the e2e package

---
 {app/e2e => e2e}/login.spec.ts | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename {app/e2e => e2e}/login.spec.ts (100%)

diff --git a/app/e2e/login.spec.ts b/e2e/login.spec.ts
similarity index 100%
rename from app/e2e/login.spec.ts
rename to e2e/login.spec.ts

From 251fc10d9022ad51bd2c0389f2de5cdf5216622d Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 12:19:56 +0300
Subject: [PATCH 11/22] add tests

---
 e2e/createGraph.spec.ts | 13 +++++++++++++
 e2e/homePage.spec.ts    | 17 +++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 e2e/createGraph.spec.ts
 create mode 100644 e2e/homePage.spec.ts

diff --git a/e2e/createGraph.spec.ts b/e2e/createGraph.spec.ts
new file mode 100644
index 0000000..ae1ae86
--- /dev/null
+++ b/e2e/createGraph.spec.ts
@@ -0,0 +1,13 @@
+import { test } from '@playwright/test';
+
+test('create graph', async ({ page }) => {
+    await page.goto('http://localhost:3000/login');
+    await page.getByRole('button', { name: 'Connect' }).click();
+    await page.getByText('Select Graph...').click();
+    await page.getByRole('button', { name: 'Create new Graph...' }).click();
+    await page.getByPlaceholder('Graph name').fill('falkorDB');
+    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()
+})
\ No newline at end of file
diff --git a/e2e/homePage.spec.ts b/e2e/homePage.spec.ts
new file mode 100644
index 0000000..fed7b9d
--- /dev/null
+++ b/e2e/homePage.spec.ts
@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://localhost:3000/');
+});
+
+test('connect', async ({ page }) => {
+    await page.getByRole('button').click();
+    await page.waitForURL('http://localhost:3000/login');
+    expect(page.url()).toBe('http://localhost:3000/login');
+});
+
+test('themes', async ({ page }) => {
+  await page.getByLabel('system mode').click();
+  await page.getByLabel('dark mode').click();
+  await page.getByLabel('light mode').click();
+});
\ No newline at end of file

From acad54dd84443cc5fab53de8cdc63e3e1a0a9aee Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 12:21:21 +0300
Subject: [PATCH 12/22] add test

---
 e2e/graph.spec.ts | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)
 create mode 100644 e2e/graph.spec.ts

diff --git a/e2e/graph.spec.ts b/e2e/graph.spec.ts
new file mode 100644
index 0000000..1327633
--- /dev/null
+++ b/e2e/graph.spec.ts
@@ -0,0 +1,29 @@
+import { test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+    await page.goto('http://localhost:3000/login');
+    await page.getByRole('button', { name: 'Connect' }).click();
+    await page.getByText('Select Graph...').click();
+    await page.getByRole('button', { name: 'Create new Graph...' }).click();
+    await page.getByPlaceholder('Graph name').fill('falkorDB');
+    await page.getByRole('button', { name: 'Create' }).click();
+    await page.waitForTimeout(2000)
+    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.getByPlaceholder('MATCH (n) OPTIONAL MATCH (n)').click({ clickCount: 3 });
+    await page.getByPlaceholder('MATCH (n) OPTIONAL MATCH (n)').fill('');
+});
+
+test('delete graph', async ({ page }) => {
+    await page.getByRole('button').nth(1).click();
+    await page.getByRole('button', { name: 'Delete graph' }).click();
+    await page.getByRole('button', { name: 'Delete' }).click();
+    await page.getByText('Select Graph...').click()
+});
+
+test('tabs navigation', async ({ page }) => {
+    await page.getByRole('button').first().click();
+    await page.getByRole('tab', {name: 'Graph'}).click();
+    await page.getByRole('tab', {name: 'Data'}).first().click();
+    await page.getByRole('tab', {name: 'Metadata'}).click();
+});
\ No newline at end of file

From c04b1b28ea406b7de68b9b27313b001ff40cfca7 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 13:46:45 +0300
Subject: [PATCH 13/22] remove type

---
 app/graph/GraphView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
index de067e0..7283eaa 100644
--- a/app/graph/GraphView.tsx
+++ b/app/graph/GraphView.tsx
@@ -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.

From 95a23aff335a6f5707134a183a988846171fdf48 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 13:47:29 +0300
Subject: [PATCH 14/22] add break line

---
 app/graph/DataPanel.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
index c31e46d..506fca0 100644
--- a/app/graph/DataPanel.tsx
+++ b/app/graph/DataPanel.tsx
@@ -27,6 +27,7 @@ export default function DataPanel({ node }: { node: Node }) {
                         <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 (

From 5b7cec2038eeaf3d84ec2a61b9ed2061352b69a7 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 13:47:59 +0300
Subject: [PATCH 15/22] remove space

---
 app/graph/DataPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
index 506fca0..412b30d 100644
--- a/app/graph/DataPanel.tsx
+++ b/app/graph/DataPanel.tsx
@@ -27,7 +27,7 @@ export default function DataPanel({ node }: { node: Node }) {
                         <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 (

From 5b29d6850d0b822c5ced4f6e5457b48553217d31 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 13:48:24 +0300
Subject: [PATCH 16/22] remove space

---
 app/graph/DataPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
index 412b30d..40e006f 100644
--- a/app/graph/DataPanel.tsx
+++ b/app/graph/DataPanel.tsx
@@ -27,7 +27,7 @@ export default function DataPanel({ node }: { node: Node }) {
                         <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 (

From ca81ef745773ee692fa4ca0e99e70b52d6e355ed Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 13:50:44 +0300
Subject: [PATCH 17/22] remove comment

---
 components/custom/navbar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
index 0278f78..49579a7 100644
--- a/components/custom/navbar.tsx
+++ b/components/custom/navbar.tsx
@@ -27,7 +27,6 @@ const linksUp: LinkDefinition[] = [
   },
   {
     name: "Monitor",
-    // href: "/api/monitor",
     href: "/monitor",
     icon: (<Activity className="h-6 w-6" />),
   },

From 0db4c92f5c6f4a35016d6e69f9619acb75ce3656 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 13:56:15 +0300
Subject: [PATCH 18/22] space format

---
 e2e/homePage.spec.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/e2e/homePage.spec.ts b/e2e/homePage.spec.ts
index 7a527a4..005ea48 100644
--- a/e2e/homePage.spec.ts
+++ b/e2e/homePage.spec.ts
@@ -1,17 +1,17 @@
 import { expect, test } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
-  await page.goto('http://localhost:3000/');
+    await page.goto('http://localhost:3000/');
 });
 
 test('connect', async ({ page }) => {
-  await page.getByRole('button').click();
-  await page.waitForURL('http://localhost:3000/login');
-  expect(page.url()).toBe('http://localhost:3000/login');
+    await page.getByRole('button').click();
+    await page.waitForURL('http://localhost:3000/login');
+    expect(page.url()).toBe('http://localhost:3000/login');
 });
 
 test('themes', async ({ page }) => {
-  await page.getByLabel('system mode').click();
-  await page.getByLabel('dark mode').click();
-  await page.getByLabel('light mode').click();
+    await page.getByLabel('system mode').click();
+    await page.getByLabel('dark mode').click();
+    await page.getByLabel('light mode').click();
 });
\ No newline at end of file

From 523d087cebabaadcdd45c5b1cbf5b8c45f46771e Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 13:57:23 +0300
Subject: [PATCH 19/22] fix the size

---
 app/providers.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/providers.tsx b/app/providers.tsx
index db36909..6d2a43c 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -35,8 +35,8 @@ export default function NextAuthProvider({ children }: { children: React.ReactNo
       }
     }
   }
-  const panelSize = isSmallScreen ? 40 : 9
-  const collapsedSize = isSmallScreen ? 20 : 3
+  const panelSize = 9
+  const collapsedSize = 3
 
   return (
     <SessionProvider>

From df02e3555d936177b16dbe4fe0330ed4e9e6f679 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 14:01:46 +0300
Subject: [PATCH 20/22] fix padding

---
 components/custom/navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
index 49579a7..28c10aa 100644
--- a/components/custom/navbar.tsx
+++ b/components/custom/navbar.tsx
@@ -66,7 +66,7 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
   const darkmode = theme === "dark" || (theme === "system" && systemTheme === "dark")
   return (
     <nav className={`w-full h-full bg-gray-100 dark:bg-gray-800 py-7 flex flex-col justify-between ${collapsed ? "items-center" : "justify-start"}`}>
-      <div className="pl-2">
+      <div className={`${!collapsed && pl-2}`}>
         <Link href="" onClick={onExpand}>
           <Menu className="h-6 w-6" />
         </Link>
@@ -94,7 +94,7 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
           </ul>
         }
       </div>
-      <div className="pl-2">
+      <div className={`${!collapsed && pl-2}`}>
         <ul className="flex flex-col gap-5">
           <li key={0}>
             <DropdownMenu>

From fd1201c28c1a148e0a738579c8e990795961bf9f Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 14:02:32 +0300
Subject: [PATCH 21/22] fix

---
 components/custom/navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
index 28c10aa..a9614d6 100644
--- a/components/custom/navbar.tsx
+++ b/components/custom/navbar.tsx
@@ -66,7 +66,7 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
   const darkmode = theme === "dark" || (theme === "system" && systemTheme === "dark")
   return (
     <nav className={`w-full h-full bg-gray-100 dark:bg-gray-800 py-7 flex flex-col justify-between ${collapsed ? "items-center" : "justify-start"}`}>
-      <div className={`${!collapsed && pl-2}`}>
+      <div className={`${!collapsed && "pl-2"}`}>
         <Link href="" onClick={onExpand}>
           <Menu className="h-6 w-6" />
         </Link>
@@ -94,7 +94,7 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
           </ul>
         }
       </div>
-      <div className={`${!collapsed && pl-2}`}>
+      <div className={`${!collapsed && "pl-2"}`}>
         <ul className="flex flex-col gap-5">
           <li key={0}>
             <DropdownMenu>

From 0afe346815b9cbb0ad9a6a67d32d894f89c13655 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 14:10:52 +0300
Subject: [PATCH 22/22] center the git icon

---
 components/custom/navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/custom/navbar.tsx b/components/custom/navbar.tsx
index a9614d6..9f2bdb8 100644
--- a/components/custom/navbar.tsx
+++ b/components/custom/navbar.tsx
@@ -138,8 +138,8 @@ export default function Navbar({ collapsed, onExpand }: { collapsed: boolean, on
               </li>
             ))
           }
-          <li key={linksDown.length + 1} className="flex flex-row items-center gap-1">
-            <a href="https://github.com/falkordb/falkordb-browser" title="Github repository" aria-label="Github repository">
+          <li key={linksDown.length + 1} className={`${!collapsed ? "flex flex-row items-center gap-1" : "flex justify-center"}`}>
+            <a href="https://github.com/falkordb/falkordb-browser" className="flex justify-center" title="Github repository" aria-label="Github repository">
               <GithubMark darkMode={darkmode} className="h-4 w-4" />
             </a>
             {