From 6b1e38384333e129ec3f13184b13aa5e33c50f5e Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Sun, 7 Apr 2024 13:03:49 +0300 Subject: [PATCH 1/8] add edge properties --- app/graph/DataPanel.tsx | 59 ++++++++++++++++++++++------------------- app/graph/GraphView.tsx | 19 +++++++++---- 2 files changed, 46 insertions(+), 32 deletions(-) diff --git a/app/graph/DataPanel.tsx b/app/graph/DataPanel.tsx index eb5dae8d..2c528234 100644 --- a/app/graph/DataPanel.tsx +++ b/app/graph/DataPanel.tsx @@ -1,7 +1,7 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; -export default function DataPanel({node}: {node: Node}) { +export default function DataPanel({ node }: { node: Node }) { const rowClass = "dark:hover:bg-slate-700 hover:bg-gray-400 border-y-[1px] border-y-gray-700" return ( @@ -14,33 +14,38 @@ export default function DataPanel({node}: {node: Node}) { { - 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 - - { - Object.values(row).map((cell, cellIndex) => { + Object.entries(node).filter((row) => + Object.values(row)[0] !== "category" + && Object.values(row)[0] !== "color" + && Object.values(row)[0] !== "label" + && Object.values(row)[0] !== "target" + && Object.values(row)[0] !== "source").map((row, index) => ( + // eslint-disable-next-line react/no-array-index-key + + { + Object.values(row).map((cell, cellIndex) => { - const strCell = JSON.stringify(cell) - const text = cellIndex === 1 ? JSON.parse(strCell) : strCell - return ( - // eslint-disable-next-line react/no-array-index-key - - - - - {text} - - -

{text}

-
-
-
-
- ) - }) - } -
- )) + const strCell = JSON.stringify(cell) + const text = cellIndex === 1 ? JSON.parse(strCell) : strCell + return ( + // eslint-disable-next-line react/no-array-index-key + + + + + {text} + + +

{text}

+
+
+
+
+ ) + }) + } +
+ )) }
diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx index 1fbcc415..17558492 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, { ElementDefinition, EventObject, NodeDataDefinition } from "cytoscape"; +import cytoscape, { EdgeCollection, ElementDefinition, EventObject, NodeDataDefinition } from "cytoscape"; import { useRef, useState, useImperativeHandle, forwardRef } from "react"; import { signOut } from "next-auth/react"; import fcose from 'cytoscape-fcose'; @@ -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. @@ -165,11 +165,17 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { } } - const handleTap = (evt: EventObject) => { - const node: Node = evt.target.json().data; + const handleTapNode = (evt: EventObject) => { + const 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 ( @@ -189,7 +195,10 @@ 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', handleTap); + cy.on('tap', 'node', handleTapNode); + + // Listen to the click event on edges for showing edge properties + cy.on('tap', 'edge', handleTapEdge); }} stylesheet={getStyle(darkmode)} elements={graph.Elements} From c9e55737ac8cef90c246f15597c21ef571d07b5a Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Mon, 8 Apr 2024 16:31:38 +0300 Subject: [PATCH 2/8] fix lint --- 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 17558492..fc4e7463 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'; From 195371e351347b2de1dd92b9b13a7b8970cf3a84 Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Mon, 8 Apr 2024 16:38:23 +0300 Subject: [PATCH 3/8] fix tests --- e2e/createGraph.spec.ts | 2 +- e2e/homePage.spec.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/e2e/createGraph.spec.ts b/e2e/createGraph.spec.ts index 439b830d..0dee93f3 100644 --- a/e2e/createGraph.spec.ts +++ b/e2e/createGraph.spec.ts @@ -9,5 +9,5 @@ test('create graph', async ({ page }) => { await page.getByRole('button', { name: 'Create' }).click(); await page.getByPlaceholder('MATCH (n) OPTIONAL MATCH (n').fill('CREATE (:Rider {name:\'Valentino Rossi\'})-[:rides]->(:Team {name:\'Yamaha\'}), (:Rider {name:\'Dani Pedrosa\'})-[:rides]->(:Team {name:\'Honda\'}), (:Rider {name:\'Andrea Dovizioso\'})-[:rides]->(:Team {name:\'Ducati\'})'); await page.getByRole('button').first().click(); - await page.getByText('falkorDB').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 index 76cba0ac..60b3f45f 100644 --- a/e2e/homePage.spec.ts +++ b/e2e/homePage.spec.ts @@ -6,13 +6,13 @@ test.beforeEach(async ({ page }) => { test('connect', async ({ page }) => { await page.getByRole('button').click(); - await page.waitForURL('http://localhost:3000'); - expect(page.url()).toBe('http://localhost:3000'); + 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(); - expect(page.getByLabel('light mode')).toBeVisible(); + await page.getByLabel('light mode').click(); }); \ No newline at end of file From 0dfaef3c9630b9ab832e14d8394d6cf3d7d30be3 Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Mon, 8 Apr 2024 16:47:37 +0300 Subject: [PATCH 4/8] clean the code --- app/providers.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/providers.tsx b/app/providers.tsx index c7bb4526..8e1aeb16 100644 --- a/app/providers.tsx +++ b/app/providers.tsx @@ -22,7 +22,6 @@ const LINKS = [ }, { name: "Monitor", - // href: "/api/monitor", href: "/monitor", icon: (), }, From 61c127f7c5302856b17761b9d6baa8f7ca8f59c2 Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Mon, 8 Apr 2024 17:01:42 +0300 Subject: [PATCH 5/8] add loading screen --- app/page.tsx | 12 ++++-------- components/custom/spinning.tsx | 13 +++++++++++++ components/ui/skeleton.tsx | 15 +++++++++++++++ 3 files changed, 32 insertions(+), 8 deletions(-) create mode 100644 components/custom/spinning.tsx create mode 100644 components/ui/skeleton.tsx diff --git a/app/page.tsx b/app/page.tsx index 3a89838c..6d83b000 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,8 +1,7 @@ "use client"; -import { Button } from "@/components/ui/button"; +import { Spinning } from "@/components/custom/spinning"; import { useSession } from "next-auth/react"; -import Link from "next/link"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; @@ -14,18 +13,15 @@ export default function Home() { useEffect(() => { if (status === "authenticated") { router.push("/graph") + } else { + router.push("/login") } }, [router, session, status]); return (
-

- Welcome to FalkorDB Browser -

- - - +
) diff --git a/components/custom/spinning.tsx b/components/custom/spinning.tsx new file mode 100644 index 00000000..cd4091c4 --- /dev/null +++ b/components/custom/spinning.tsx @@ -0,0 +1,13 @@ +import { Skeleton } from "@/components/ui/skeleton" + +export function Spinning() { + return ( +
+ +
+ + +
+
+ ) +} diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx new file mode 100644 index 00000000..01b8b6d4 --- /dev/null +++ b/components/ui/skeleton.tsx @@ -0,0 +1,15 @@ +import { cn } from "@/lib/utils" + +function Skeleton({ + className, + ...props +}: React.HTMLAttributes) { + return ( +
+ ) +} + +export { Skeleton } From 2ae224b30d72db03834a78fa6accb459e826ebcc Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Tue, 9 Apr 2024 11:25:38 +0300 Subject: [PATCH 6/8] fix lint --- app/page.tsx | 2 +- components/custom/spinning.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 6d83b000..ae2d8a84 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,6 +1,6 @@ "use client"; -import { Spinning } from "@/components/custom/spinning"; +import Spinning from "@/components/custom/spinning"; import { useSession } from "next-auth/react"; import { useRouter } from "next/navigation"; import { useEffect } from "react"; diff --git a/components/custom/spinning.tsx b/components/custom/spinning.tsx index cd4091c4..285985be 100644 --- a/components/custom/spinning.tsx +++ b/components/custom/spinning.tsx @@ -1,6 +1,7 @@ import { Skeleton } from "@/components/ui/skeleton" -export function Spinning() { + +export default function Spinning() { return (
From 558d6e0115ceb8067e68d580b56124a194824410 Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Tue, 9 Apr 2024 11:49:22 +0300 Subject: [PATCH 7/8] merge to handel tap function --- app/graph/GraphView.tsx | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/app/graph/GraphView.tsx b/app/graph/GraphView.tsx index fc4e7463..7283eaab 100644 --- a/app/graph/GraphView.tsx +++ b/app/graph/GraphView.tsx @@ -95,7 +95,7 @@ interface GraphViewProps { const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { - const [selectedNode, setSelectedNode] = useState(null); + const [selectedNode, setSelectedObject] = useState(null); // A reference to the chart container to allowing zooming and editing const chartRef = useRef(null) @@ -165,15 +165,9 @@ const GraphView = forwardRef(({ graph, darkmode }: GraphViewProps, ref) => { } } - const handleTapNode = (evt: EventObject) => { - const node = evt.target.json().data; - setSelectedNode(node); - dataPanel.current?.expand(); - } - - const handleTapEdge = (evt: EventObject) => { - const edge = evt.target.json().data; - setSelectedNode(edge); + const handleTap = (evt: EventObject) => { + const object = evt.target.json().data; + setSelectedObject(object); dataPanel.current?.expand(); } @@ -195,10 +189,10 @@ 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); + cy.on('tap', 'node', handleTap); // Listen to the click event on edges for showing edge properties - cy.on('tap', 'edge', handleTapEdge); + cy.on('tap', 'edge', handleTap); }} stylesheet={getStyle(darkmode)} elements={graph.Elements} From f832ee01b0bbebfd67cba4edab653f0881231487 Mon Sep 17 00:00:00 2001 From: Anchel123 <110421452+Anchel123@users.noreply.github.com> Date: Tue, 9 Apr 2024 12:03:18 +0300 Subject: [PATCH 8/8] add closing brackets --- e2e/createGraph.spec.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/e2e/createGraph.spec.ts b/e2e/createGraph.spec.ts index febaf0a2..ae1ae86b 100644 --- a/e2e/createGraph.spec.ts +++ b/e2e/createGraph.spec.ts @@ -9,6 +9,5 @@ test('create graph', async ({ page }) => { await page.getByRole('button', { name: 'Create' }).click(); await page.getByPlaceholder('MATCH (n) OPTIONAL MATCH (n').fill('CREATE (:Rider {name:\'Valentino Rossi\'})-[:rides]->(:Team {name:\'Yamaha\'}), (:Rider {name:\'Dani Pedrosa\'})-[:rides]->(:Team {name:\'Honda\'}), (:Rider {name:\'Andrea Dovizioso\'})-[:rides]->(:Team {name:\'Ducati\'})'); await page.getByRole('button').first().click(); - await page.getByText('falkorDB').first().click(); - - \ No newline at end of file + await page.getByText('falkorDB').first().click() +}) \ No newline at end of file