Merge branch 'staging' into fix-monaco-editor

.github/workflows/nextjs.yml

@@ -36,7 +36,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "18"
+          node-version: "22"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
 
       - name: Restore cache

.github/workflows/playwright.yml

@@ -16,7 +16,7 @@ jobs:
 
     services:
       falkordb:
-        image: falkordb/falkordb:latest
+        image: falkordb/falkordb:v4.4.1
         ports:
           - 6379:6379
 
@@ -34,9 +34,20 @@ jobs:
         npm install
         npm run build
         NEXTAUTH_SECRET=SECRET npm start & npx playwright test --reporter=dot,list
+    - name: Ensure required directories exist
+      run: |
+        mkdir -p playwright-report
+        mkdir -p playwright-report/artifacts
     - uses: actions/upload-artifact@v4
       if: always()
       with:
         name: playwright-report
         path: playwright-report/
         retention-days: 30
+    - name: Upload failed test screenshots
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: failed-test-screenshots
+        path: playwright-report/artifacts/
+        retention-days: 30

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18-alpine AS base
+FROM node:22-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps
@@ -68,4 +68,4 @@ ENV HOSTNAME "0.0.0.0"
 
 # server.js is created by next build from the standalone output
 # https://nextjs.org/docs/pages/api-reference/next-config-js/output
-CMD ["node", "server.js"]
+CMD ["node", "server.js"]

app/components/ForceGraph.tsx

@@ -6,7 +6,7 @@
 
 import { Dispatch, RefObject, SetStateAction, useEffect, useRef, useState } from "react"
 import ForceGraph2D from "react-force-graph-2d"
-import { securedFetch } from "@/lib/utils"
+import { lightenColor, securedFetch } from "@/lib/utils"
 import { useToast } from "@/components/ui/use-toast"
 import { Graph, GraphData, Link, Node } from "../api/graph/model"
 
@@ -48,36 +48,29 @@ export default function ForceGraph({
     const [parentHeight, setParentHeight] = useState<number>(0)
     const [hoverElement, setHoverElement] = useState<Node | Link | undefined>()
     const parentRef = useRef<HTMLDivElement>(null)
+    const lastClick = useRef<{ date: Date, name: string }>({ date: new Date(), name: "" })
     const toast = useToast()
 
-    useEffect(() => {
-        if (!chartRef.current || data.nodes.length === 0 || data.links.length === 0) return
-        chartRef.current.d3Force('link').id((link: any) => link.id).distance(50)
-        chartRef.current.d3Force('charge').strength(-300)
-        chartRef.current.d3Force('center').strength(0.05)
-    }, [chartRef, data.links.length, data.nodes.length])
-
-    useEffect(() => {
+    useEffect(() => {        
         const handleResize = () => {
             if (!parentRef.current) return
             setParentWidth(parentRef.current.clientWidth)
             setParentHeight(parentRef.current.clientHeight)
         }
 
-        handleResize()
+        window.addEventListener('resize', handleResize)
+
+        const observer = new ResizeObserver(handleResize)
 
-        const resizeObserver = new ResizeObserver(handleResize)
         if (parentRef.current) {
-            resizeObserver.observe(parentRef.current)
+            observer.observe(parentRef.current)
         }
 
-        window.addEventListener('resize', handleResize)
-
         return () => {
-            resizeObserver.disconnect()
             window.removeEventListener('resize', handleResize)
+            observer.disconnect()
         }
-    }, [])
+    }, [parentRef])
 
     const onFetchNode = async (node: Node) => {
         const result = await securedFetch(`/api/graph/${graph.Id}/${node.id}`, {
@@ -119,19 +112,29 @@ export default function ForceGraph({
         graph.removeLinks()
     }
 
-    const handleNodeRightClick = async (node: Node) => {
+    const handleNodeClick = async (node: Node) => {
+
+        const now = new Date()
+        const { date, name } = lastClick.current
+
+        if (now.getTime() - date.getTime() < 1000 && name === (node.data.name || node.id.toString())) {
+            return
+        }
+
         if (!node.expand) {
             await onFetchNode(node)
         } else {
             deleteNeighbors([node])
         }
+
+        lastClick.current = { date: new Date(), name: node.data.name || node.id.toString() }
     }
 
     const handleHover = (element: Node | Link | null) => {
         setHoverElement(element === null ? undefined : element)
     }
 
-    const handleClick = (element: Node | Link, evt: MouseEvent) => {
+    const handleRightClick = (element: Node | Link, evt: MouseEvent) => {
         if (!("source" in element) && isAddElement) {
             if (setSelectedNodes) {
                 setSelectedNodes(prev => {
@@ -227,9 +230,6 @@ export default function ForceGraph({
 
                     if (!start.x || !start.y || !end.x || !end.y) return
 
-                    ctx.strokeStyle = link.color;
-                    ctx.globalAlpha = 0.5;
-
                     if (start.id === end.id) {
                         const radius = NODE_SIZE * link.curve * 6.2;
                         const angleOffset = -Math.PI / 4; // 45 degrees offset for text alignment
@@ -243,7 +243,7 @@ export default function ForceGraph({
                         const midX = (start.x + end.x) / 2 + (end.y - start.y) * (link.curve / 2);
                         const midY = (start.y + end.y) / 2 + (start.x - end.x) * (link.curve / 2);
 
-                        let textAngle = Math.atan2(end.y - start.y, end.x - start.x)
+                        let textAngle = Math.atan2(end.y - start.y, end.x - start.x);
 
                         // maintain label vertical orientation for legibility
                         if (textAngle > Math.PI / 2) textAngle = -(Math.PI - textAngle);
@@ -254,20 +254,35 @@ export default function ForceGraph({
                         ctx.rotate(textAngle);
                     }
 
+                    // Set text properties first to measure
+                    ctx.font = "2px Arial";
+                    const textMetrics = ctx.measureText(link.label);
+                    const boxWidth = textMetrics.width;
+                    const boxHeight = 2; // Height of text
+
+                    // Draw background block
+                    ctx.fillStyle = '#191919';
+
+                    // Draw block aligned with text
+                    ctx.fillRect(
+                        -textMetrics.width / 2,
+                        -1,
+                        boxWidth,
+                        boxHeight
+                    );
+
                     // add label
-                    ctx.globalAlpha = 1;
-                    ctx.fillStyle = 'black';
+                    ctx.fillStyle = 'white';
                     ctx.textAlign = 'center';
                     ctx.textBaseline = 'middle';
-                    ctx.font = "2px Arial"
                     ctx.fillText(link.label, 0, 0);
-                    ctx.restore()
+                    ctx.restore();
                 }}
-                onNodeClick={handleClick}
-                onLinkClick={handleClick}
+                onNodeClick={handleNodeClick}
                 onNodeHover={handleHover}
                 onLinkHover={handleHover}
-                onNodeRightClick={handleNodeRightClick}
+                onNodeRightClick={handleRightClick}
+                onLinkRightClick={handleRightClick}
                 onBackgroundClick={handleUnselected}
                 onBackgroundRightClick={handleUnselected}
                 onEngineStop={() => {
@@ -278,6 +293,14 @@ export default function ForceGraph({
                 linkVisibility="visible"
                 cooldownTicks={cooldownTicks}
                 cooldownTime={2000}
+                linkDirectionalArrowRelPos={1}
+                linkDirectionalArrowLength={(link) => link.source.id === link.target.id ? 0 : 2}
+                linkDirectionalArrowColor={(link) => link.id === selectedElement?.id || link.id === hoverElement?.id 
+                    ? link.color 
+                    : lightenColor(link.color)}
+                linkColor={(link) => link.id === selectedElement?.id || link.id === hoverElement?.id 
+                    ? link.color 
+                    : lightenColor(link.color)}
             />
         </div>
     )

app/components/Header.tsx

@@ -9,6 +9,9 @@ import { cn } from "@/lib/utils";
 import { useRouter, usePathname } from "next/navigation";
 import { signOut, useSession } from "next-auth/react";
 import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@/components/ui/navigation-menu";
+import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import pkg from '@/package.json';
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import Button from "./ui/Button";
 import CreateGraph from "./CreateGraph";
 
@@ -22,7 +25,7 @@ export default function Header({ onSetGraphName }: Props) {
     const type = pathname.includes("/schema") ? "Schema" : "Graph"
     const inCreate = pathname.includes("/create")
     const { data: session } = useSession()
-    
+
     return (
         <div className="flex flex-col">
             <div className="py-5 px-10 flex justify-between items-center Header">
@@ -49,55 +52,82 @@ export default function Header({ onSetGraphName }: Props) {
                     </div>
                 </div>
                 <div className="flex gap-6 items-center">
-                    <NavigationMenu>
-                        <NavigationMenuList className="gap-6 bg-foreground rounded-lg px-4 py-2">
-                            <NavigationMenuLink className="bg-foreground" asChild>
+                    <Sheet>
+                        <NavigationMenu>
+                            <NavigationMenuList className="gap-6 bg-foreground rounded-lg px-4 py-2">
+                                <NavigationMenuLink className="bg-foreground" asChild>
+                                    <Button
+                                        label="Settings"
+                                        onClick={() => router.push("/settings")}
+                                        disabled={session?.user?.role !== "Admin"}
+                                    >
+                                        <Settings size={25} />
+                                    </Button>
+                                </NavigationMenuLink>
+                                <NavigationMenuItem>
+                                    <NavigationMenuTrigger className="gap-2 bg-foreground">
+                                        <LifeBuoy size={25} />
+                                        <p>Help</p>
+                                    </NavigationMenuTrigger>
+                                    <NavigationMenuContent className="w-full p-6">
+                                        <ul className="h-full w-full flex flex-col gap-2 p-2">
+                                            <li>
+                                                <a href="https://docs.falkordb.com/" target="_blank" rel="noreferrer">
+                                                    Documentation
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a href="https://www.falkordb.com/contact-us/" target="_blank" rel="noreferrer">
+                                                    Support
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <SheetTrigger asChild>
+                                                    <Button
+                                                        label="About"
+                                                        className="bg-foreground"
+                                                    />
+                                                </SheetTrigger>
+                                            </li>
+                                        </ul>
+                                    </NavigationMenuContent>
+                                </NavigationMenuItem>
+                                {
+                                    !inCreate &&
+                                    <CreateGraph
+                                        onSetGraphName={onSetGraphName!}
+                                        type={type}
+                                    />
+                                }
                                 <Button
-                                    label="Settings"
-                                    onClick={() => router.push("/settings")}
-                                    disabled={session?.user?.role !== "Admin"}
+                                    title="Log Out"
+                                    onClick={() => signOut({ callbackUrl: "/login" })}
                                 >
-                                    <Settings size={25} />
+                                    <LogOut size={25} />
                                 </Button>
-                            </NavigationMenuLink>
-                            <NavigationMenuItem>
-                                <NavigationMenuTrigger className="gap-2 bg-foreground">
-                                    <LifeBuoy size={25} />
-                                    <p>Help</p>
-                                </NavigationMenuTrigger>
-                                <NavigationMenuContent className="w-full p-6">
-                                    <ul className="h-full w-full flex flex-col gap-2 p-2">
-                                        <li>
-                                            <a href="https://docs.falkordb.com/" target="_blank" rel="noreferrer">
-                                                Documentation
-                                            </a>
-                                        </li>
-                                        <li>
-                                            <a href="https://www.falkordb.com/contact-us/" target="_blank" rel="noreferrer">
-                                                Support
-                                            </a>
-                                        </li>
-                                    </ul>
-                                </NavigationMenuContent>
-                            </NavigationMenuItem>
-                            {
-                                !inCreate &&
-                                <CreateGraph
-                                    onSetGraphName={onSetGraphName!}
-                                    type={type}
-                                />
-                            }
-                            <Button
-                                title="Log Out"
-                                onClick={() => signOut({ callbackUrl: "/login" })}
-                            >
-                                <LogOut size={25} />
-                            </Button>
-                        </NavigationMenuList>
-                    </NavigationMenu>
+                            </NavigationMenuList>
+                        </NavigationMenu>
+                        <SheetContent className="bg-popover-foreground flex flex-col gap-4 items-center text-foreground !max-w-[30rem]">
+                            <VisuallyHidden><SheetTitle /></VisuallyHidden>
+                            <VisuallyHidden><SheetDescription /></VisuallyHidden>
+                            <div className="h-1 grow flex flex-col gap-8 items-center justify-center">
+                                <Image priority src="/ColorLogo.svg" alt="Loading..." width={120} height={1} />
+                                <h1 className="text-3xl font-bold">We Make AI Reliable</h1>
+                                <p className="text-xl text-center">
+                                    Delivering a scalable,
+                                    low-latency graph database designed for development teams managing
+                                    structured and unstructured interconnected data in real-time or interactive environments.
+                                </p>
+                            </div>
+                            <div className="flex flex-col gap-8 items-center">
+                                <p>Version: {`{${pkg.version}}`}</p>
+                                <p className="text-sm text-nowrap">All Rights Reserved © 2024 - {new Date().getFullYear()} falkordb.com</p>
+                            </div>
+                        </SheetContent>
+                    </Sheet>
                 </div>
             </div>
-            <div className="h-2 Top" />
+            <div className="h-2 Gradient" />
         </div>
     )
 }

app/components/ui/Dropzone.tsx

@@ -56,7 +56,7 @@ function Dropzone({ filesCount = false, className = "", withTable = false, disab
                             <ArrowDownToLine color='#57577B' />
                             <span>Or <span className='text-[#7167F6]'>Browse</span></span>
                         </div>
-                        : <p className={cn('underline underline-offset-2 text-[#99E4E5]', disabled && "opacity-30")}>Upload Certificate</p>
+                        : <p className={cn('underline underline-offset-2 text-[#99E4E5]', disabled ? "opacity-30 cursor-text" : "cursor-pointer")}>Upload Certificate</p>
                 }
             </div>
             {

app/globals.css

@@ -60,11 +60,7 @@
         @apply h-full w-full flex flex-col bg-background;
     }
 
-    .LandingPage {
-        background: linear-gradient(180deg, #EC806C 0%, #B66EBD 43.41%, #7568F2 100%);
-    }
-
-    .Top {
+    .Gradient {
         background: linear-gradient(90deg, #EC806C 0%, #B66EBD 43.41%, #7568F2 100%);
     }
 

app/graph/GraphDataPanel.tsx

@@ -294,7 +294,6 @@ export default function GraphDataPanel({ obj, setObj, onExpand, onDeleteElement,
                                                 value={newVal}
                                                 onChange={(e) => setNewVal(e.target.value)}
                                                 onKeyDown={handleSetKeyDown}
-                                                onBlur={() => handleSetEditable("", "")}
                                             />
                                             : <Button
                                                 label={obj.data[key]}