Staging

.github/workflows/playwright.yml

@@ -33,9 +33,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: ${{ !cancelled() }}
+      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

app/components/Input.tsx

@@ -6,7 +6,6 @@ import { cn } from "@/lib/utils"
 import { prepareArg } from "../utils"
 
 interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
-    value?: string
     graph: Graph
     onValueChange: (node: PathNode) => void
     handleSubmit?: (node: any) => void
@@ -16,7 +15,7 @@ interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
     scrollToBottom?: () => void
 }
 
-export default function Input({ value, onValueChange, handleSubmit, graph, icon, node, className, parentClassName, scrollToBottom, ...props }: Props) {
+export default function Input({ onValueChange, handleSubmit, graph, icon, node, className, parentClassName, scrollToBottom, ...props }: Props) {
 
     const [open, setOpen] = useState(false)
     const [options, setOptions] = useState<any[]>([])
@@ -38,15 +37,15 @@ export default function Input({ value, onValueChange, handleSubmit, graph, icon,
         let isLastRequest = true
         const timeout = setTimeout(async () => {
 
-            if (!value || node?.id) {
-                if (!value) {
+            if (!node?.name) {
+                if (!node?.name) {
                     setOptions([])
                 }
                 setOpen(false)
                 return
             }
 
-            const result = await fetch(`/api/repo/${prepareArg(graph.Id)}/?prefix=${prepareArg(value)}`, {
+            const result = await fetch(`/api/repo/${prepareArg(graph.Id)}/?prefix=${prepareArg(node?.name)}`, {
                 method: 'POST'
             })
 
@@ -66,7 +65,7 @@ export default function Input({ value, onValueChange, handleSubmit, graph, icon,
 
             setOptions(completions || [])
 
-            if (completions?.length > 0) {
+            if (completions?.length > 0 && !node?.id) {
                 setOpen(true)
             } else {
                 setOpen(false)
@@ -77,7 +76,7 @@ export default function Input({ value, onValueChange, handleSubmit, graph, icon,
             clearTimeout(timeout)
             isLastRequest = false
         }
-    }, [value, graph.Id])
+    }, [node?.name, graph.Id])
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         const container = containerRef.current
@@ -87,6 +86,7 @@ export default function Input({ value, onValueChange, handleSubmit, graph, icon,
                 const option = options.find((o, i) => i === selectedOption)
                 if (!option) return
                 if (handleSubmit) {
+                    onValueChange({ name: option.properties.name, id: option.id })
                     handleSubmit(option)
                 } else {
                     if (!open) return
@@ -144,7 +144,7 @@ export default function Input({ value, onValueChange, handleSubmit, graph, icon,
                 }}
                 onKeyDown={handleKeyDown}
                 className={cn("w-full border p-2 rounded-md pointer-events-auto", className)}
-                value={value || ""}
+                value={node?.name || ""}
                 onChange={(e) => {
                     const newVal = e.target.value
                     const invalidChars = /[%*()\-\[\]{};:"|~]/;

app/components/chat.tsx

@@ -9,6 +9,7 @@ import { cn } from "@/lib/utils";
 import { TypeAnimation } from "react-type-animation";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
 import { prepareArg } from "../utils";
+import { NodeObject } from "react-force-graph-2d";
 
 type PathData = {
     nodes: any[]
@@ -84,6 +85,7 @@ interface Props {
     isPathResponse: boolean | undefined
     setIsPathResponse: (isPathResponse: boolean | undefined) => void
     setData: Dispatch<SetStateAction<GraphData>>
+    chartRef: any
 }
 
 const SUGGESTIONS = [
@@ -105,7 +107,7 @@ const RemoveLastPath = (messages: Message[]) => {
     return messages
 }
 
-export function Chat({ repo, path, setPath, graph, selectedPathId, isPathResponse, setIsPathResponse, setData }: Props) {
+export function Chat({ repo, path, setPath, graph, selectedPathId, isPathResponse, setIsPathResponse, setData, chartRef }: Props) {
 
     // Holds the messages in the chat
     const [messages, setMessages] = useState<Message[]>([]);
@@ -131,8 +133,7 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
         const p = paths.find((path) => [...path.links, ...path.nodes].some((e: any) => e.id === selectedPathId))
 
         if (!p) return
-
-        handelSetSelectedPath(p)
+        handleSetSelectedPath(p)
     }, [selectedPathId])
 
     // Scroll to the bottom of the chat on new message
@@ -153,7 +154,10 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
         setPaths([])
     }, [isPathResponse])
 
-    const handelSetSelectedPath = (p: PathData) => {
+    const handleSetSelectedPath = (p: PathData) => {
+        const chart = chartRef.current
+
+        if (!chart) return
         setSelectedPath(prev => {
             if (prev) {
                 if (isPathResponse && paths.some((path) => [...path.nodes, ...path.links].every((e: any) => [...prev.nodes, ...prev.links].some((e: any) => e.id === e.id)))) {
@@ -206,6 +210,9 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
             });
         }
         setData({ ...graph.Elements })
+        setTimeout(() => {
+            chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => p.nodes.some(node => node.id === n.id));
+        }, 0)
     }
 
     // A function that handles the change event of the url input box
@@ -262,6 +269,10 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
     }
 
     const handleSubmit = async () => {
+        const chart = chartRef.current
+
+        if (!chart) return
+
         setSelectedPath(undefined)
 
         if (!path?.start?.id || !path.end?.id) return
@@ -297,6 +308,9 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
         setPath(undefined)
         setIsPathResponse(true)
         setData({ ...graph.Elements })
+        setTimeout(() => {
+            chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => formattedPaths.some(p => p.nodes.some(node => node.id === n.id)));
+        }, 0)
     }
 
     const getTip = (disabled = false) =>
@@ -373,7 +387,7 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
                             parentClassName="w-full"
                             graph={graph}
                             onValueChange={({ name, id }) => setPath(prev => ({ start: { name, id }, end: prev?.end }))}
-                            value={path?.start?.name}
+                            value={path?.start?.name || ""}
                             placeholder="Start typing starting point"
                             type="text"
                             icon={<ChevronDown color="gray" />}
@@ -383,7 +397,7 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
                         <Input
                             parentClassName="w-full"
                             graph={graph}
-                            value={path?.end?.name}
+                            value={path?.end?.name || ""}
                             onValueChange={({ name, id }) => setPath(prev => ({ end: { name, id }, start: prev?.start }))}
                             placeholder="Start typing end point"
                             type="text"
@@ -425,7 +439,7 @@ export function Chat({ repo, path, setPath, graph, selectedPathId, isPathRespons
                                         setIsPathResponse(undefined)
 
                                     }
-                                    handelSetSelectedPath(p)
+                                    handleSetSelectedPath(p)
                                 }}
                             >
                                 <p className="font-bold">#{i + 1}</p>

app/components/code-graph.tsx

@@ -14,6 +14,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import dynamic from 'next/dynamic';
 import { Position } from "./graphView";
 import { prepareArg } from '../utils';
+import { NodeObject } from "react-force-graph-2d";
 
 const GraphView = dynamic(() => import('./graphView'));
 
@@ -81,7 +82,7 @@ export function CodeGraph({
         const handleKeyDown = (event: KeyboardEvent) => {
             if (event.key === 'Delete') {
                 if (selectedObj && selectedObjects.length === 0) return
-                handelRemove([...selectedObjects.map(obj => obj.id), selectedObj?.id].filter(id => id !== undefined));
+                handleRemove([...selectedObjects.map(obj => obj.id), selectedObj?.id].filter(id => id !== undefined));
             }
         };
 
@@ -208,38 +209,39 @@ export function CodeGraph({
         nodes.forEach((node) => {
             node.expand = expand
         })
-        
+
         setSelectedObj(undefined)
         setData({ ...graph.Elements })
     }
 
-    const handelSearchSubmit = (node: any) => {
-        const n = { name: node.properties.name, id: node.id }
-
-        let chartNode = graph.Elements.nodes.find(n => n.id == node.id)
-
-        if (!chartNode?.visible) {
-            if (!chartNode) {
-                chartNode = graph.extend({ nodes: [node], edges: [] }).nodes[0]
-            } else {
-                chartNode.visible = true
-                setCooldownTicks(undefined)
-                setCooldownTime(1000)
-            }
-            graph.visibleLinks(true, [chartNode.id])
-        }
-
-        setSearchNode(n)
-        setData({ ...graph.Elements })
-
+    const handleSearchSubmit = (node: any) => {
         const chart = chartRef.current
-
+        
         if (chart) {
-            chart.centerAt(chartNode.x, chartNode.y, 1000);
+            const n = { name: node.properties.name, id: node.id }
+
+            let chartNode = graph.Elements.nodes.find(n => n.id == node.id)
+
+            if (!chartNode?.visible) {
+                if (!chartNode) {
+                    chartNode = graph.extend({ nodes: [node], edges: [] }).nodes[0]
+                } else {
+                    chartNode.visible = true
+                    setCooldownTicks(undefined)
+                    setCooldownTime(1000)
+                }
+                graph.visibleLinks(true, [chartNode!.id])
+                setData({ ...graph.Elements })
+            }
+
+            setSearchNode(n)
+            setTimeout(() => {
+                chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => n.id === chartNode!.id);
+            }, 0)
         }
     }
 
-    const handelRemove = (ids: number[]) => {
+    const handleRemove = (ids: number[]) => {
         graph.Elements.nodes.forEach(node => {
             if (!ids.includes(node.id)) return
             node.visible = false
@@ -269,10 +271,10 @@ export function CodeGraph({
                                     <div className='flex gap-4'>
                                         <Input
                                             graph={graph}
-                                            value={searchNode.name}
+                                            value={searchNode.name || ""}
                                             onValueChange={({ name }) => setSearchNode({ name })}
                                             icon={<Search />}
-                                            handleSubmit={handelSearchSubmit}
+                                            handleSubmit={handleSearchSubmit}
                                             node={searchNode}
                                         />
                                         <Labels categories={graph.Categories} onClick={onCategoryClick} />
@@ -352,10 +354,10 @@ export function CodeGraph({
                                         setPath(path)
                                         setSelectedObj(undefined)
                                     }}
-                                    handleRemove={handelRemove}
+                                    handleRemove={handleRemove}
                                     position={position}
                                     url={url}
-                                    handelExpand={handleExpand}
+                                    handleExpand={handleExpand}
                                     parentRef={containerRef}
                                 />
                                 <GraphView

app/components/elementMenu.tsx

@@ -14,12 +14,12 @@ interface Props {
     handleRemove: (nodes: number[]) => void;
     position: Position | undefined;
     url: string;
-    handelExpand: (nodes: Node[], expand: boolean) => void;
+    handleExpand: (nodes: Node[], expand: boolean) => void;
     parentRef: RefObject<HTMLDivElement>;
 }
 
 
-export default function ElementMenu({ obj, objects, setPath, handleRemove, position, url, handelExpand, parentRef }: Props) {
+export default function ElementMenu({ obj, objects, setPath, handleRemove, position, url, handleExpand, parentRef }: Props) {
     const [currentObj, setCurrentObj] = useState<Node>();
     const [containerWidth, setContainerWidth] = useState(0);
 
@@ -45,6 +45,7 @@ export default function ElementMenu({ obj, objects, setPath, handleRemove, posit
                     left: Math.max(-34, Math.min(position.x - 33 - containerWidth / 2, (parentRef?.current?.clientWidth || 0) + 32 - containerWidth)),
                     top: Math.min(position.y - 153, (parentRef?.current?.clientHeight || 0) - 9),
                 }}
+                id="elementMenu"
             >
                 {
                     objects.some(o => o.id === obj.id) && objects.length > 1 ?
@@ -68,13 +69,13 @@ export default function ElementMenu({ obj, objects, setPath, handleRemove, posit
                             </button>
                             <button
                                 className="p-2"
-                                onClick={() => handelExpand(objects, true)}
+                                onClick={() => handleExpand(objects, true)}
                             >
                                 <Maximize2 color="white" />
                             </button>
                             <button
                                 className="p-2"
-                                onClick={() => handelExpand(objects, false)}
+                                onClick={() => handleExpand(objects, false)}
                             >
                                 <Minimize2 color="white" />
                             </button>
@@ -114,13 +115,13 @@ export default function ElementMenu({ obj, objects, setPath, handleRemove, posit
                             </button>
                             <button
                                 className="p-2"
-                                onClick={() => handelExpand([obj], true)}
+                                onClick={() => handleExpand([obj], true)}
                             >
                                 <Maximize2 color="white" />
                             </button>
                             <button
                                 className="p-2"
-                                onClick={() => handelExpand([obj], false)}
+                                onClick={() => handleExpand([obj], false)}
                             >
                                 <Minimize2 color="white" />
                             </button>