Merge branch 'staging' into add-create-repo

Author: Anchel123

.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

.github/workflows/release-image.yml

@@ -0,0 +1,37 @@
+name: Release image to DockerHub
+
+on:
+  workflow_dispatch:
+  push:
+    tags: ["v*.*.*"]
+    branches:
+      - main
+
+jobs:
+  build-and-release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set tags
+        run: |
+          if ${{ github.event_name == 'push' && startsWith(github.ref, 'refs/tags') }}; then
+            echo "TAGS=falkordb/code-graph-frontend:latest,falkordb/code-graph-frontend:${{ github.ref_name }}" >> $GITHUB_ENV
+          else
+            echo "TAGS=falkordb/code-graph-frontend:edge" >> $GITHUB_ENV
+          fi
+
+      - name: Login to DockerHub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+  
+      - name: Build image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          tags: ${{ env.TAGS }}

Dockerfile

@@ -1,5 +1,5 @@
 # Use a Node.js base image
-FROM node:20
+FROM node:22
 
 # Set working directory
 WORKDIR /app

README.md

@@ -8,28 +8,80 @@
 ## Getting Started
 [Live Demo](https://code-graph.falkordb.com/)
 
+## Run locally
+This project is composed of three pieces:
+
+1. FalkorDB Graph DB - this is where your graphs are stored and queried
+2. Code-Graph-Backend - backend logic
+3. Code-Graph-Frontend - website
+
+You'll need to start all three components:
+
 ### Run FalkorDB 
 
 ```bash
 docker run -p 6379:6379 -it --rm falkordb/falkordb
 ```
 
-### Install node packages
+### Run Code-Graph-Backend
+
+#### Clone the Backend
 
 ```bash
-npm install
+git clone https://github.com/FalkorDB/code-graph-backend.git
 ```
 
-### Set your OpenAI key
+#### Setup environment variables
+
+`SECRET_TOKEN` - user defined token used to authorize the request
 
+```bash
+export FALKORDB_HOST=localhost FALKORDB_PORT=6379 \
+    OPENAI_API_KEY=<YOUR OPENAI_API_KEY> SECRET_TOKEN=<YOUR_SECRECT_TOKEN> \
+    FLASK_RUN_HOST=0.0.0.0 FLASK_RUN_PORT=5000
 ```
-export OPENAI_API_KEY=YOUR_OPENAI_API_KEY
+
+#### Install dependencies & run
+
+```bash
+cd code-graph-backend
+
+pip install --no-cache-dir -r requirements.txt
+
+flask --app api/index.py run --debug > flask.log 2>&1 &
+
 ```
 
-### Run the development server
+### Run Code-Graph-Frontend
+
+#### Clone the Frontend
 
 ```bash
+git clone https://github.com/FalkorDB/code-graph.git
+```
+
+#### Setup environment variables
+
+```bash
+export BACKEND_URL=http://${FLASK_RUN_HOST}:${FLASK_RUN_PORT} \
+    SECRET_TOKEN=<YOUR_SECRECT_TOKEN> OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>
+```
+
+#### Install dependencies & run
+
+```bash
+cd code-graph
+npm install
 npm run dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+### Process a local repository
+```bash
+curl -X POST http://127.0.0.1:5000/analyze_folder -H "Content-Type: application/json" -d '{"path": "<PATH_TO_LOCAL_REPO>", "ignore": ["./.github", "./sbin", "./.git","./deps", "./bin", "./build"]}' -H "Authorization: <YOUR_SECRECT_TOKEN>"
+```
+
+Note: At the moment code-graph can analyze both the C & Python source files.
+Support for additional languages e.g. JavaScript, Go, Java is planned to be added
+in the future.
+
+Browse to [http://localhost:3000](http://localhost:3000)

app/components/chat.tsx

@@ -387,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" />}
@@ -397,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"

app/components/code-graph.tsx

@@ -1,9 +1,9 @@
 import { Dispatch, RefObject, SetStateAction, useContext, useEffect, useRef, useState } from "react";
-import { GraphData, Node } from "./model";
+import { GraphData, Link, Node } from "./model";
 import { GraphContext } from "./provider";
 import { Toolbar } from "./toolbar";
 import { Labels } from "./labels";
-import { GitFork, Search, X } from "lucide-react";
+import { Download, GitFork, Search, X } from "lucide-react";
 import ElementMenu from "./elementMenu";
 import Combobox from "./combobox";
 import { toast } from '@/components/ui/use-toast';
@@ -21,7 +21,7 @@ const GraphView = dynamic(() => import('./graphView'));
 interface Props {
     data: GraphData,
     setData: Dispatch<SetStateAction<GraphData>>,
-    onFetchGraph: (graphName: string) => void,
+    onFetchGraph: (graphName: string) => Promise<void>,
     onFetchNode: (nodeIds: number[]) => Promise<GraphData>,
     options: string[]
     setOptions: Dispatch<SetStateAction<string[]>>
@@ -55,7 +55,7 @@ export function CodeGraph({
     let graph = useContext(GraphContext)
 
     const [url, setURL] = useState("");
-    const [selectedObj, setSelectedObj] = useState<Node>();
+    const [selectedObj, setSelectedObj] = useState<Node | Link>();
     const [selectedObjects, setSelectedObjects] = useState<Node[]>([]);
     const [position, setPosition] = useState<Position>();
     const [graphName, setGraphName] = useState<string>("");
@@ -145,9 +145,10 @@ export function CodeGraph({
         }
 
         run()
+
     }, [graphName])
 
-    function handleSelectedValue(value: string) {
+    async function handleSelectedValue(value: string) {
         setGraphName(value)
         onFetchGraph(value)
     }
@@ -166,29 +167,38 @@ export function CodeGraph({
     }
 
     const deleteNeighbors = (nodes: Node[]) => {
+        
         if (nodes.length === 0) return;
-
+        
+        const expandedNodes: Node[] = []
+        
         graph.Elements = {
-            nodes: graph.Elements.nodes.map(node => {
+            nodes: graph.Elements.nodes.filter(node => {
+                if (!node.collapsed) return true
+                
                 const isTarget = graph.Elements.links.some(link => link.target.id === node.id && nodes.some(n => n.id === link.source.id));
+                
+                debugger
 
-                if (!isTarget || !node.collapsed) return node
+                if (!isTarget) return true
 
-                if (node.expand) {
-                    node.expand = false
-                    deleteNeighbors([node])
+                const deleted = graph.NodesMap.delete(Number(node.id))
+
+                if (deleted && node.expand) {
+                    expandedNodes.push(node)
                 }
 
-                graph.NodesMap.delete(Number(node.id))
-            }).filter(node => node !== undefined),
+                return false
+            }),
             links: graph.Elements.links
         }
+        
+        deleteNeighbors(expandedNodes)
 
         graph.removeLinks()
     }
 
     const handleExpand = async (nodes: Node[], expand: boolean) => {
-
         if (expand) {
             const elements = await onFetchNode(nodes.map(n => n.id))
 
@@ -216,12 +226,11 @@ export function CodeGraph({
 
     const handleSearchSubmit = (node: any) => {
         const chart = chartRef.current
-        
+
         if (chart) {
-            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]
@@ -233,8 +242,8 @@ export function CodeGraph({
                 graph.visibleLinks(true, [chartNode!.id])
                 setData({ ...graph.Elements })
             }
-            
-            setSearchNode(n)
+          
+            setSearchNode(chartNode)
             setTimeout(() => {
                 chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => n.id === chartNode!.id);
             }, 0)
@@ -252,6 +261,33 @@ export function CodeGraph({
         setData({ ...graph.Elements })
     }
 
+    const handleDownloadImage = async () => {
+        try {
+            const canvas = document.querySelector('.force-graph-container canvas') as HTMLCanvasElement;
+            if (!canvas) {
+                toast({
+                    title: "Error",
+                    description: "Canvas not found",
+                    variant: "destructive",
+                });
+                return;
+            }
+
+            const dataURL = canvas.toDataURL('image/webp');
+            const link = document.createElement('a');
+            link.href = dataURL;
+            link.download = `${graphName}.webp`;
+            link.click();
+        } catch (error) {
+            console.error('Error downloading graph image:', error);
+            toast({
+                title: "Error",
+                description: "Failed to download image. Please try again.",
+                variant: "destructive",
+            });
+        }
+    };
+
     return (
         <div className="h-full w-full flex flex-col gap-4 p-8 bg-gray-100">
             <header className="flex flex-col gap-4">
@@ -271,8 +307,7 @@ export function CodeGraph({
                                     <div className='flex gap-4'>
                                         <Input
                                             graph={graph}
-                                            value={searchNode.name}
-                                            onValueChange={({ name }) => setSearchNode({ name })}
+                                            onValueChange={(node) => setSearchNode(node)}
                                             icon={<Search />}
                                             handleSubmit={handleSearchSubmit}
                                             node={searchNode}
@@ -345,6 +380,12 @@ export function CodeGraph({
                                             className="pointer-events-auto"
                                             chartRef={chartRef}
                                         />
+                                        <button
+                                            className="pointer-events-auto bg-white p-2 rounded-md"
+                                            onClick={handleDownloadImage}
+                                        >
+                                            <Download />
+                                        </button>
                                     </div>
                                 </div>
                                 <ElementMenu
@@ -371,7 +412,7 @@ export function CodeGraph({
                                     setSelectedObjects={setSelectedObjects}
                                     setPosition={setPosition}
                                     onFetchNode={onFetchNode}
-                                    deleteNeighbors={deleteNeighbors}
+                                    handleExpand={handleExpand}
                                     isShowPath={isShowPath}
                                     setPath={setPath}
                                     isPathResponse={isPathResponse}