From f4e4ba74a5202d54d4dc7403a92cd7a6dceb95d9 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Sun, 7 Apr 2024 16:26:55 +0300
Subject: [PATCH 01/11] move the tabs to the side instead of the top

---
 app/graph/metadataview.tsx |  6 +++---
 app/graph/page.tsx         | 28 ++++++++++++++++------------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/app/graph/metadataview.tsx b/app/graph/metadataview.tsx
index af4ccc97..4dcde02e 100644
--- a/app/graph/metadataview.tsx
+++ b/app/graph/metadataview.tsx
@@ -1,10 +1,10 @@
 export default function MetaDataView({ metadata }: { metadata: string[] }) {
     return (
-        <div>
+        <p>
             {
                 // eslint-disable-next-line react/no-array-index-key
-                metadata.map((val, index) => <p key={index}>{val}</p>)
+                metadata.map((val, index) => index === 0 ? val : ", " + val )
             }
-        </div>
+        </p>
     )
 }
diff --git a/app/graph/page.tsx b/app/graph/page.tsx
index a7cec49a..b34bd1d3 100644
--- a/app/graph/page.tsx
+++ b/app/graph/page.tsx
@@ -35,9 +35,9 @@ export default function Page() {
     useEffect(() => {
         if (showGraph) {
             setValue("graph")
-        }else if(showData) {
+        } else if (showData) {
             setValue("data")
-        }else {
+        } else {
             setValue("metadata")
         }
     }, [showData, showGraph])
@@ -100,18 +100,19 @@ export default function Page() {
                 onQueryUpdate={(state) => { queryState.current = state }}
                 onDeleteGraph={() => setGraph(Graph.empty())}
             />
-            <div className="flex flex-col grow border border-gray-300 rounded-lg p-2 overflow-auto">
+            <div className="flex grow border border-gray-300 rounded-lg p-2 overflow-auto">
                 {
                     graph.Id &&
-                    <Tabs value={value} className="grow flex flex-col justify-center items-center">
-                        <TabsList className="border w-fit">
-                            <TabsTrigger value="metadata" onClick={() => setValue("metadata")}>Metadata</TabsTrigger>
-                            {showData  && <TabsTrigger value="data" onClick={() => setValue("data")}>Data</TabsTrigger>}
-                            {showGraph && <TabsTrigger value="graph" onClick={() => setValue("graph")}>Graph</TabsTrigger>}
-                        </TabsList>
-                        <TabsContent value="metadata" className="grow w-full">
-                            <MetaDataView metadata={metaData} />
-                        </TabsContent>
+                    <Tabs value={value} className="grow flex flex-row">
+                        <div className="h-full flex items-center">
+                            {
+                                (showData || showGraph) &&
+                                <TabsList className="border h-fit flex flex-col gap-6">
+                                    {showData && <TabsTrigger value="data" onClick={() => setValue("data")}>Data</TabsTrigger>}
+                                    {showGraph && <TabsTrigger value="graph" onClick={() => setValue("graph")}>Graph</TabsTrigger>}
+                                </TabsList>
+                            }
+                        </div>
                         <TabsContent value="data" className="grow w-full flex-[1_1_0] overflow-auto">
                             <TableView graph={graph} />
                         </TabsContent>
@@ -121,6 +122,9 @@ export default function Page() {
                     </Tabs>
                 }
             </div>
+            <div className="border rounded-md border-gray-300 p-2">
+                <MetaDataView metadata={metaData} />
+            </div>
         </div>
     )
 }

From e2997dac15f6132b20d819992e58002d8e094804 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 14:15:12 +0300
Subject: [PATCH 02/11] styling the graph page

---
 app/graph/DataPanel.tsx | 47 +++++++++++++++++------------
 app/graph/GraphView.tsx | 37 +++++++++++++++--------
 app/graph/page.tsx      | 27 +++++++++--------
 app/graph/toolbar.tsx   | 66 ++++++++++++++++++++++-------------------
 4 files changed, 104 insertions(+), 73 deletions(-)

diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
index 2c528234..9abd8a63 100644
--- a/app/graph/DataPanel.tsx
+++ b/app/graph/DataPanel.tsx
@@ -1,25 +1,33 @@
 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 }) {
+const unusedProperties = [
+    "category",
+    "color",
+    "label",
+    "target",
+    "source",
+    "value",
+]
+
+export default function DataPanel({ object }: { object: any }) {
     const rowClass = "dark:hover:bg-slate-700 hover:bg-gray-400 border-y-[1px] border-y-gray-700"
 
     return (
-        <Table>
-            <TableHeader>
-                <TableRow className={rowClass}>
-                    <TableHead>Field</TableHead>
-                    <TableHead>Value</TableHead>
-                </TableRow>
-            </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) => (
+        <div>
+            <p className={rowClass + " text-center p-2"}>
+                {object.source ? "edge properties" : "node properties"}
+            </p>
+            <Table>
+                <TableHeader>
+                    <TableRow className={rowClass}>
+                        <TableHead>Field</TableHead>
+                        <TableHead>Value</TableHead>
+                    </TableRow>
+                </TableHeader>
+                <TableBody>
+                    {
+                        Object.entries(object).filter((row) => unusedProperties.find(obj => obj === row[0]) === undefined).map((row, index) => (
                             // eslint-disable-next-line react/no-array-index-key
                             <TableRow className={rowClass} key={index}>
                                 {
@@ -46,8 +54,9 @@ export default function DataPanel({ node }: { node: Node }) {
                                 }
                             </TableRow>
                         ))
-                }
-            </TableBody>
-        </Table>
+                    }
+                </TableBody>
+            </Table>
+        </div>
     )
 }
\ No newline at end of file
diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
index 17558492..9b05d2e0 100644
--- a/app/graph/GraphView.tsx
+++ b/app/graph/GraphView.tsx
@@ -10,6 +10,7 @@ import Labels from "./labels";
 import Toolbar from "./toolbar";
 import { Category, Graph } from "./model";
 import DataPanel from "./DataPanel";
+import { ChevronLeft, ChevronRight } from "lucide-react"
 
 const LAYOUT = {
     name: "fcose",
@@ -95,7 +96,8 @@ interface GraphViewProps {
 
 const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
 
-    const [selectedNode, setSelectedNode] = useState<Node | null>(null);
+    const [selectedObject, setSelectedObject] = useState(null);
+    const [isOpen, setIsOpen] = useState<boolean>(true);
 
     // A reference to the chart container to allowing zooming and editing
     const chartRef = useRef<cytoscape.Core | null>(null)
@@ -167,22 +169,24 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
 
     const handleTapNode = (evt: EventObject) => {
         const node = evt.target.json().data;
-        setSelectedNode(node);
+        setIsOpen(true);
+        setSelectedObject(node);
         dataPanel.current?.expand();
     }
-    
+
     const handleTapEdge = (evt: EventObject) => {
         const edge = evt.target.json().data;
-        setSelectedNode(edge);
+        console.log(edge);
+        setSelectedObject(edge);
         dataPanel.current?.expand();
     }
 
     return (
         <ResizablePanelGroup direction="horizontal">
             <ResizablePanel className="h-full flex flex-col">
-                <div className="grid grid-cols-6">
-                    <Toolbar className="col-start-1 justify-start" chartRef={chartRef} />
-                    <Labels className="col-end-7 justify-end" categories={graph.Categories} onClick={onCategoryClick} />
+                <div className="flex flex-row justify-between">
+                    <Toolbar className="" chartRef={chartRef} />
+                    <Labels className="pr-16" categories={graph.Categories} onClick={onCategoryClick} />
                 </div>
                 <CytoscapeComponent
                     cy={(cy) => {
@@ -196,7 +200,7 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
 
                         // 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);
                     }}
@@ -206,10 +210,19 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
                     className="w-full grow"
                 />
             </ResizablePanel>
-            <ResizableHandle withHandle />
-            <ResizablePanel ref={dataPanel} maxSize={50} minSize={17} collapsible defaultSize={selectedNode ? 20 : 0} className="bg-gray-100 dark:bg-gray-800">
-                {selectedNode && <DataPanel node={selectedNode} />}
-            </ResizablePanel>
+            <ResizableHandle />
+            {
+                selectedObject &&
+                <div onClick={() => setIsOpen(prev => !prev)} className="fixed right-5 top-80">
+                    {isOpen ? <ChevronRight /> : <ChevronLeft />}
+                </div>
+            }
+            {
+                isOpen &&
+                <ResizablePanel id="panel" ref={dataPanel} maxSize={50} minSize={20} collapsible defaultSize={selectedObject ? 20 : 0} className="bg-gray-100 dark:bg-gray-800">
+                    {selectedObject && <DataPanel object={selectedObject} />}
+                </ResizablePanel>
+            }
         </ResizablePanelGroup>
 
 
diff --git a/app/graph/page.tsx b/app/graph/page.tsx
index b34bd1d3..6d9137da 100644
--- a/app/graph/page.tsx
+++ b/app/graph/page.tsx
@@ -100,31 +100,34 @@ export default function Page() {
                 onQueryUpdate={(state) => { queryState.current = state }}
                 onDeleteGraph={() => setGraph(Graph.empty())}
             />
-            <div className="flex grow border border-gray-300 rounded-lg p-2 overflow-auto">
+            <div className="flex grow border border-gray-300 rounded-lg p-2 flex-[1_1_0] overflow-auto">
                 {
                     graph.Id &&
                     <Tabs value={value} className="grow flex flex-row">
-                        <div className="h-full flex items-center">
+                        <div className="h-full w-20">
                             {
                                 (showData || showGraph) &&
-                                <TabsList className="border h-fit flex flex-col gap-6">
-                                    {showData && <TabsTrigger value="data" onClick={() => setValue("data")}>Data</TabsTrigger>}
-                                    {showGraph && <TabsTrigger value="graph" onClick={() => setValue("graph")}>Graph</TabsTrigger>}
+                                <TabsList className="border h-fit fixed top-72 flex flex-col p-0">
+                                    {showGraph && <TabsTrigger className="w-full" value="graph" onClick={() => setValue("graph")}>Graph </TabsTrigger>}
+                                    {showData && <TabsTrigger className="w-full" value="table" onClick={() => setValue("table")}> Table </TabsTrigger>}
                                 </TabsList>
                             }
                         </div>
-                        <TabsContent value="data" className="grow w-full flex-[1_1_0] overflow-auto">
-                            <TableView graph={graph} />
-                        </TabsContent>
-                        <TabsContent value="graph" className="grow w-full">
+                            <TabsContent value="table" className="grow w-full">
+                                <TableView graph={graph} />
+                            </TabsContent>
+                        <TabsContent value="graph" className="grow w-full max-w-[1267px]">
                             <GraphView ref={graphView} graph={graph} darkmode={darkmode} />
                         </TabsContent>
                     </Tabs>
                 }
             </div>
-            <div className="border rounded-md border-gray-300 p-2">
-                <MetaDataView metadata={metaData} />
-            </div>
+            {
+                graph.Id &&
+                <div className="border rounded-md border-gray-300 p-2">
+                    <MetaDataView metadata={metaData} />
+                </div>
+            }
         </div>
     )
 }
diff --git a/app/graph/toolbar.tsx b/app/graph/toolbar.tsx
index f64dcf6d..07768fbf 100644
--- a/app/graph/toolbar.tsx
+++ b/app/graph/toolbar.tsx
@@ -2,7 +2,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/comp
 import { CircleDot, ZoomIn, ZoomOut } from "lucide-react";
 import { cn } from "@/lib/utils"
 
-export default function Toolbar({chartRef, className=""}: {
+export default function Toolbar({ chartRef, className = "" }: {
     chartRef: React.RefObject<cytoscape.Core>, className: string
 }) {
 
@@ -13,7 +13,7 @@ export default function Toolbar({chartRef, className=""}: {
         }
     }
 
-    const handleCenterClick= () => {
+    const handleCenterClick = () => {
         const chart = chartRef.current
         if (chart) {
             chart.fit()
@@ -22,33 +22,39 @@ export default function Toolbar({chartRef, className=""}: {
     }
 
     return (
-        <div className={cn("flex flex-row gap-x-1", className)}>
-            <TooltipProvider>
-                <Tooltip>
-                    <TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(1.1)}>
-                        <ZoomIn />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                        <p>Zoom In</p>
-                    </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                    <TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(0.9)}>
-                        <ZoomOut />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                        <p>Zoom Out</p>
-                    </TooltipContent>
-                </Tooltip>
-                <Tooltip>
-                    <TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={handleCenterClick}>
-                        <CircleDot />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                        <p>Center</p>
-                    </TooltipContent>
-                </Tooltip>
-            </TooltipProvider>
-        </div>
+        <TooltipProvider>
+            <ul className={cn("flex flex-row gap-2", className)}>
+                <li>
+                    <Tooltip>
+                        <TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(1.1)}>
+                            <ZoomIn />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            <p>Zoom In</p>
+                        </TooltipContent>
+                    </Tooltip>
+                </li>
+                <li>
+                    <Tooltip>
+                        <TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={() => handleZoomClick(0.9)}>
+                            <ZoomOut />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            <p>Zoom Out</p>
+                        </TooltipContent>
+                    </Tooltip>
+                </li>
+                <li>
+                    <Tooltip>
+                        <TooltipTrigger className="text-gray-600 dark:text-gray-400 rounded-lg border border-gray-300 p-2" onClick={handleCenterClick}>
+                            <CircleDot />
+                        </TooltipTrigger>
+                        <TooltipContent>
+                            <p>Center</p>
+                        </TooltipContent>
+                    </Tooltip>
+                </li>
+            </ul>
+        </TooltipProvider>
     )
 }

From 3d52c670b88a05c46c6eefb065b32b12aa398179 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:12:59 +0300
Subject: [PATCH 03/11] fix for lint

---
 app/graph/DataPanel.tsx    | 4 +++-
 app/graph/GraphView.tsx    | 9 ++++-----
 app/graph/metadataview.tsx | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
index 9abd8a63..ade8c8a4 100644
--- a/app/graph/DataPanel.tsx
+++ b/app/graph/DataPanel.tsx
@@ -1,5 +1,6 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 
 const unusedProperties = [
     "category",
@@ -10,12 +11,13 @@ const unusedProperties = [
     "value",
 ]
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export default function DataPanel({ object }: { object: any }) {
     const rowClass = "dark:hover:bg-slate-700 hover:bg-gray-400 border-y-[1px] border-y-gray-700"
 
     return (
         <div>
-            <p className={rowClass + " text-center p-2"}>
+            <p className={cn(" text-center p-2", rowClass)}>
                 {object.source ? "edge properties" : "node properties"}
             </p>
             <Table>
diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
index 9b05d2e0..7b13b9f1 100644
--- a/app/graph/GraphView.tsx
+++ b/app/graph/GraphView.tsx
@@ -1,16 +1,16 @@
 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';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
 import { ImperativePanelHandle } from "react-resizable-panels";
+import { ChevronLeft, ChevronRight } from "lucide-react"
 import Labels from "./labels";
 import Toolbar from "./toolbar";
 import { Category, Graph } from "./model";
 import DataPanel from "./DataPanel";
-import { ChevronLeft, ChevronRight } from "lucide-react"
 
 const LAYOUT = {
     name: "fcose",
@@ -176,7 +176,6 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
 
     const handleTapEdge = (evt: EventObject) => {
         const edge = evt.target.json().data;
-        console.log(edge);
         setSelectedObject(edge);
         dataPanel.current?.expand();
     }
@@ -213,9 +212,9 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
             <ResizableHandle />
             {
                 selectedObject &&
-                <div onClick={() => setIsOpen(prev => !prev)} className="fixed right-5 top-80">
+                <button type="button" onClick={() => setIsOpen(prev => !prev)} className="fixed right-5 top-80">
                     {isOpen ? <ChevronRight /> : <ChevronLeft />}
-                </div>
+                </button>
             }
             {
                 isOpen &&
diff --git a/app/graph/metadataview.tsx b/app/graph/metadataview.tsx
index 4dcde02e..23f21a64 100644
--- a/app/graph/metadataview.tsx
+++ b/app/graph/metadataview.tsx
@@ -3,7 +3,7 @@ export default function MetaDataView({ metadata }: { metadata: string[] }) {
         <p>
             {
                 // eslint-disable-next-line react/no-array-index-key
-                metadata.map((val, index) => index === 0 ? val : ", " + val )
+                metadata.map((val, index) => index === 0 ? val : ", ".concat(val)  )
             }
         </p>
     )

From ec3b90b2477f7e52b0dcea64e5155a53323f3b3a Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:19:44 +0300
Subject: [PATCH 04/11] remove testing

---
 e2e/createGraph.spec.ts | 13 -------------
 e2e/graph.spec.ts       | 29 -----------------------------
 e2e/homePage.spec.ts    | 18 ------------------
 e2e/login.spec.ts       | 11 -----------
 4 files changed, 71 deletions(-)
 delete mode 100644 e2e/createGraph.spec.ts
 delete mode 100644 e2e/graph.spec.ts
 delete mode 100644 e2e/homePage.spec.ts
 delete mode 100644 e2e/login.spec.ts

diff --git a/e2e/createGraph.spec.ts b/e2e/createGraph.spec.ts
deleted file mode 100644
index 439b830d..00000000
--- 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 5d97bf5e..00000000
--- 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 76cba0ac..00000000
--- 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
diff --git a/e2e/login.spec.ts b/e2e/login.spec.ts
deleted file mode 100644
index 271f2331..00000000
--- a/e2e/login.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-test.beforeEach(async ({ page }) => {
-  await page.goto('http://localhost:3000/login');
-});
-
-test('login', async ({ page }) => {
-  await page.getByRole('button', { name: 'Connect' }).click();
-  await page.waitForURL("http://localhost:3000/graph");
-  expect(page.url()).toBe("http://localhost:3000/graph");
-});
\ No newline at end of file

From 7af5b1e5e3a72c263942194d6693721a08692cc3 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Mon, 8 Apr 2024 15:27:28 +0300
Subject: [PATCH 05/11] create on test

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

diff --git a/e2e/login.spec.ts b/e2e/login.spec.ts
new file mode 100644
index 00000000..271f2331
--- /dev/null
+++ b/e2e/login.spec.ts
@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('http://localhost:3000/login');
+});
+
+test('login', async ({ page }) => {
+  await page.getByRole('button', { name: 'Connect' }).click();
+  await page.waitForURL("http://localhost:3000/graph");
+  expect(page.url()).toBe("http://localhost:3000/graph");
+});
\ No newline at end of file

From d63ddc203865edbfcdb3e56aaa7aef2ebb6e66e5 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 14:21:05 +0300
Subject: [PATCH 06/11] add tow tests

---
 e2e/graph.spec.ts    | 29 +++++++++++++++++++++++++++++
 e2e/homePage.spec.ts | 18 ++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 e2e/graph.spec.ts
 create mode 100644 e2e/homePage.spec.ts

diff --git a/e2e/graph.spec.ts b/e2e/graph.spec.ts
new file mode 100644
index 00000000..5d97bf5e
--- /dev/null
+++ b/e2e/graph.spec.ts
@@ -0,0 +1,29 @@
+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
new file mode 100644
index 00000000..60b3f45f
--- /dev/null
+++ b/e2e/homePage.spec.ts
@@ -0,0 +1,18 @@
+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 161c413973787937ee37d7c84d4b6e2b96ea80b6 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 14:23:28 +0300
Subject: [PATCH 07/11] remove import

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

diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
index 6213af41..40e006fa 100644
--- a/app/graph/DataPanel.tsx
+++ b/app/graph/DataPanel.tsx
@@ -1,6 +1,5 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
 
 const excludedProperties = new Set([
     "category",

From 8b8849697029f103be0c342e87a60e183c7be1ea Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Tue, 9 Apr 2024 14:29:54 +0300
Subject: [PATCH 08/11] fix lint

---
 app/graph/DataPanel.tsx | 9 +++++++--
 app/graph/GraphView.tsx | 3 ++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
index 40e006fa..7e82c48b 100644
--- a/app/graph/DataPanel.tsx
+++ b/app/graph/DataPanel.tsx
@@ -1,6 +1,10 @@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
+interface Props {
+    object: any;
+}
+
 const excludedProperties = new Set([
     "category",
     "color",
@@ -9,7 +13,8 @@ const excludedProperties = new Set([
     "source"
 ]);
 
-export default function DataPanel({ node }: { node: Node }) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function DataPanel({ object }: Props) {
     const rowClass = "dark:hover:bg-slate-700 hover:bg-gray-400 border-y-[1px] border-y-gray-700"
 
     return (
@@ -22,7 +27,7 @@ export default function DataPanel({ node }: { node: Node }) {
             </TableHeader>
             <TableBody>
                 {
-                    Object.entries(node).filter((row) => !excludedProperties.has(row[0])).map((row, index) => (
+                    Object.entries(object).filter((row) => !excludedProperties.has(row[0])).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 342720a4..0557b884 100644
--- a/app/graph/GraphView.tsx
+++ b/app/graph/GraphView.tsx
@@ -96,7 +96,8 @@ interface GraphViewProps {
 
 const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
 
-    const [selectedObject, setSelectedObject] = useState(null);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [selectedObject, setSelectedObject] = useState<any | null>(null);
     const [isOpen, setIsOpen] = useState<boolean>(true);
 
     // A reference to the chart container to allowing zooming and editing

From b4d6c67223685caca104fd15128a1258453fdc1e Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Wed, 10 Apr 2024 11:44:00 +0300
Subject: [PATCH 09/11] fix styling graph page

---
 app/graph/DataPanel.tsx |  1 +
 app/graph/GraphView.tsx | 20 ++++++++++--------
 app/graph/page.tsx      | 45 +++++++++++++++++++----------------------
 app/layout.tsx          |  3 ++-
 app/providers.tsx       |  2 +-
 5 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx
index 7e82c48b..2b482fcb 100644
--- a/app/graph/DataPanel.tsx
+++ b/app/graph/DataPanel.tsx
@@ -2,6 +2,7 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 interface Props {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     object: any;
 }
 
diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx
index 0557b884..2b54a9e3 100644
--- a/app/graph/GraphView.tsx
+++ b/app/graph/GraphView.tsx
@@ -1,7 +1,7 @@
 import CytoscapeComponent from "react-cytoscapejs";
 import { toast } from "@/components/ui/use-toast";
 import cytoscape, { ElementDefinition, EventObject, NodeDataDefinition } from "cytoscape";
-import { useRef, useState, useImperativeHandle, forwardRef } from "react";
+import { useRef, useState, useImperativeHandle, forwardRef, useEffect } from "react";
 import { signOut } from "next-auth/react";
 import fcose from 'cytoscape-fcose';
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
@@ -98,12 +98,18 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [selectedObject, setSelectedObject] = useState<any | null>(null);
-    const [isOpen, setIsOpen] = useState<boolean>(true);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
 
     // A reference to the chart container to allowing zooming and editing
     const chartRef = useRef<cytoscape.Core | null>(null)
     const dataPanel = useRef<ImperativePanelHandle>(null)
 
+    useEffect(() => {
+        if (isOpen) {
+            dataPanel.current?.expand()
+        } else dataPanel.current?.collapse()
+    }, [isOpen])
+
     useImperativeHandle(ref, () => ({
         expand: (elements: ElementDefinition[]) => {
             const chart = chartRef.current
@@ -171,12 +177,12 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
     const handleTap = (evt: EventObject) => {
         const object = evt.target.json().data;
         setSelectedObject(object);
-        dataPanel.current?.expand();
+        setIsOpen(true);
     }
 
     return (
         <ResizablePanelGroup direction="horizontal">
-            <ResizablePanel className="h-full flex flex-col">
+            <ResizablePanel defaultSize={selectedObject ? 80 : 100} className="h-full flex flex-col">
                 <div className="flex flex-row justify-between">
                     <Toolbar className="" chartRef={chartRef} />
                     <Labels className="pr-16" categories={graph.Categories} onClick={onCategoryClick} />
@@ -193,7 +199,7 @@ 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);
                     }}
@@ -206,7 +212,7 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
             <ResizableHandle />
             {
                 selectedObject &&
-                <button type="button" onClick={() => setIsOpen(prev => !prev)} className="fixed right-5 top-80">
+                <button type="button" onClick={() => setIsOpen(prev => !prev)} className="fixed right-5 top-[50%]">
                     {isOpen ? <ChevronRight /> : <ChevronLeft />}
                 </button>
             }
@@ -217,8 +223,6 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => {
                 </ResizablePanel>
             }
         </ResizablePanelGroup>
-
-
     )
 });
 
diff --git a/app/graph/page.tsx b/app/graph/page.tsx
index 30fcd056..95ec9d85 100644
--- a/app/graph/page.tsx
+++ b/app/graph/page.tsx
@@ -37,8 +37,6 @@ export default function Page() {
             setValue("graph")
         } else if (showData) {
             setValue("data")
-        } else {
-            setValue("metadata")
         }
     }, [showData, showGraph])
     const graphView = useRef<GraphViewRef>(null)
@@ -101,34 +99,33 @@ export default function Page() {
                 onQueryUpdate={(state) => { queryState.current = state }}
                 onDeleteGraph={() => setGraph(Graph.empty())}
             />
-            <div className="flex grow border border-gray-300 rounded-lg p-2 flex-[1_1_0] overflow-auto">
+            <div className="h-1 grow border flex flex-col gap-2 border-gray-300 rounded-lg p-2">
                 {
                     graph.Id &&
-                    <Tabs value={value} className="grow flex flex-row">
-                        <div className="h-full w-20">
-                            {
-                                (showData || showGraph) &&
-                                <TabsList className="border h-fit fixed top-72 flex flex-col p-0">
-                                    {showGraph && <TabsTrigger className="w-full" value="graph" onClick={() => setValue("graph")}>Graph </TabsTrigger>}
-                                    {showData && <TabsTrigger className="w-full" value="table" onClick={() => setValue("table")}> Table </TabsTrigger>}
-                                </TabsList>
-                            }
-                        </div>
-                            <TabsContent value="table" className="grow w-full">
+                    <>
+                        <Tabs value={value} className="h-1 grow flex flex-row">
+                            <div className="w-20 flex flex-row items-center">
+                                {
+                                    (showData || showGraph) &&
+                                    <TabsList className="h-fit flex flex-col p-0">
+                                        {showGraph && <TabsTrigger value="graph" onClick={() => setValue("graph")}>Graph</TabsTrigger>}
+                                        {showData && <TabsTrigger value="table" onClick={() => setValue("table")}>Table</TabsTrigger>}
+                                    </TabsList>
+                                }
+                            </div>
+                            <TabsContent value="table" className="w-1 grow overflow-auto">
                                 <TableView graph={graph} />
                             </TabsContent>
-                        <TabsContent value="graph" className="grow w-full max-w-[1267px]">
-                            <GraphView ref={graphView} graph={graph} darkmode={darkmode} />
-                        </TabsContent>
-                    </Tabs>
+                            <TabsContent value="graph" className="w-1 grow">
+                                <GraphView ref={graphView} graph={graph} darkmode={darkmode} />
+                            </TabsContent>
+                        </Tabs>
+                        <div className="border rounded-md border-gray-300 p-2">
+                            <MetaDataView metadata={metaData} />
+                        </div>
+                    </>
                 }
             </div>
-            {
-                graph.Id &&
-                <div className="border rounded-md border-gray-300 p-2">
-                    <MetaDataView metadata={metaData} />
-                </div>
-            }
         </div>
     )
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index f246e3b1..262cc365 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import './globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import { Toaster } from '@/components/ui/toaster'
+import { cn } from '@/lib/utils'
 import NextAuthProvider from './providers'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -20,7 +21,7 @@ export default function RootLayout({
   // caused by mismatched client/server content caused by next-themes
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className={inter.className}>
+      <body className={cn("h-screen w-screen", inter.className)}>
           <NextAuthProvider>{children}</NextAuthProvider>
           <Toaster />
       </body>
diff --git a/app/providers.tsx b/app/providers.tsx
index 6d2a43cf..f95b8421 100644
--- a/app/providers.tsx
+++ b/app/providers.tsx
@@ -41,7 +41,7 @@ export default function NextAuthProvider({ children }: { children: React.ReactNo
   return (
     <SessionProvider>
       <ThemeProvider attribute="class" enableSystem>
-        <ResizablePanelGroup direction="horizontal" className='min-h-screen'>
+        <ResizablePanelGroup direction="horizontal" className='h-screen'>
           <ResizablePanel
             ref={navPanel}
             maxSize={panelSize}

From cd199d0a7edca04d4ed6b4cd23b2d148780c61dc Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Wed, 10 Apr 2024 12:51:59 +0300
Subject: [PATCH 10/11] fix the table tab width

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

diff --git a/app/graph/page.tsx b/app/graph/page.tsx
index 95ec9d85..804c4284 100644
--- a/app/graph/page.tsx
+++ b/app/graph/page.tsx
@@ -108,8 +108,8 @@ export default function Page() {
                                 {
                                     (showData || showGraph) &&
                                     <TabsList className="h-fit flex flex-col p-0">
-                                        {showGraph && <TabsTrigger value="graph" onClick={() => setValue("graph")}>Graph</TabsTrigger>}
-                                        {showData && <TabsTrigger value="table" onClick={() => setValue("table")}>Table</TabsTrigger>}
+                                        {showGraph && <TabsTrigger className="w-full" value="graph" onClick={() => setValue("graph")}>Graph</TabsTrigger>}
+                                        {showData && <TabsTrigger className="w-full" value="table" onClick={() => setValue("table")}>Table</TabsTrigger>}
                                     </TabsList>
                                 }
                             </div>

From 68d0b6e4673b85a8250084c9d971d3e6eaf6ba56 Mon Sep 17 00:00:00 2001
From: Anchel123 <110421452+Anchel123@users.noreply.github.com>
Date: Wed, 10 Apr 2024 14:18:44 +0300
Subject: [PATCH 11/11] use join

---
 app/graph/metadataview.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/graph/metadataview.tsx b/app/graph/metadataview.tsx
index 23f21a64..697eae57 100644
--- a/app/graph/metadataview.tsx
+++ b/app/graph/metadataview.tsx
@@ -1,10 +1,7 @@
 export default function MetaDataView({ metadata }: { metadata: string[] }) {
     return (
         <p>
-            {
-                // eslint-disable-next-line react/no-array-index-key
-                metadata.map((val, index) => index === 0 ? val : ", ".concat(val)  )
-            }
+            {metadata.join(", ")}
         </p>
     )
 }