Merge branch 'staging' into add-capture-image-in-canvas

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

@@ -298,7 +298,7 @@ export function CodeGraph({
                                     <div className='flex gap-4'>
                                         <Input
                                             graph={graph}
-                                            value={searchNode.name}
+                                            value={searchNode.name || ""}
                                             onValueChange={({ name }) => setSearchNode({ name })}
                                             icon={<Search />}
                                             handleSubmit={handleSearchSubmit}

app/components/elementMenu.tsx

@@ -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 ?

docker-compose.yml

@@ -0,0 +1,36 @@
+version: "3.9"
+
+services:
+  falkordb:
+    image: falkordb/falkordb:latest
+    ports:
+      - "6379:6379"
+      - "3001:3000"
+    volumes:
+      - ./:/data/
+    stdin_open: true # Keep the container's STDIN open
+    tty: true        # Allocate a pseudo-TTY
+
+  code-graph-frontend:
+    image: falkordb/code-graph-frontend:latest
+    ports:
+      - "3000:3000"
+    depends_on:
+      - code-graph-backend
+    environment:
+      - BACKEND_URL=http://code-graph-backend:5000 # Backend service URL
+      - SECRET_TOKEN=Vespa
+
+  code-graph-backend:
+    image: falkordb/code-graph-backend:latest
+    ports:
+      - "4000:5000"
+    depends_on:
+      - falkordb
+    environment:
+      - FALKORDB_HOST=falkordb
+      - FALKORDB_PORT=6379
+      - OPENAI_API_KEY=YOUR_OPENAI_API_KEY
+      - SECRET_TOKEN=Vespa
+      - FLASK_RUN_HOST=0.0.0.0
+      - FLASK_RUN_PORT=5000

e2e/config/testData.ts

@@ -20,7 +20,7 @@ export const nodesPath: { firstNode: string; secondNode: string }[] = [
 ];
 
 export const nodes: { nodeName: string; }[] = [
-  { nodeName: "import_data"},
+  { nodeName: "ask"},
   { nodeName: "add_edge" },
   { nodeName: "test_kg_delete"},
   { nodeName: "list_graphs"}