Skip to content

Commit 7c37b86

Browse files
AviAvniAviAvni
authored
Merge branch 'staging' into add-loading-states
2 parents ef7daca + 04fa785 commit 7c37b86

6 files changed

Lines changed: 248 additions & 182 deletions

File tree

‎README.md‎

Lines changed: 58 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,113 @@
1+
# CodeGraph - Knowledge Graph Visualization Tool
2+
3+
### Visualize your repository with our graph for code analysis
4+
15
[![Try Free](https://img.shields.io/badge/Try%20Free-FalkorDB%20Cloud-FF8101?labelColor=FDE900&link=https://app.falkordb.cloud)](https://app.falkordb.cloud)
26
[![Dockerhub](https://img.shields.io/docker/pulls/falkordb/falkordb?label=Docker)](https://hub.docker.com/r/falkordb/falkordb/)
37
[![Discord](https://img.shields.io/discord/1146782921294884966?style=flat-square)](https://discord.com/invite/6M4QwDXn2w)
48
[![Workflow](https://github.com/FalkorDB/code-graph/actions/workflows/nextjs.yml/badge.svg?branch=main)](https://github.com/FalkorDB/code-graph/actions/workflows/nextjs.yml)
9+
-
10+
11+
![Alt Text](https://res.cloudinary.com/dhd0k02an/image/upload/v1739719361/FalkorDB_-_Github_-_readme_jr6scy.gif)
512

6-
![image](https://github.com/FalkorDB/code-graph/assets/753206/60f535ed-cf29-44b2-9005-721f11614803)
13+
**👉🏻[Live Demo](https://code-graph.falkordb.com/)**
714

8-
## Getting Started
9-
[Live Demo](https://code-graph.falkordb.com/)
15+
## Running Locally
1016

11-
## Run locally
12-
This project is composed of three pieces:
17+
This project consists of three core components:
1318

14-
1. FalkorDB Graph DB - this is where your graphs are stored and queried
15-
2. Code-Graph-Backend - backend logic
16-
3. Code-Graph-Frontend - website
19+
1. **FalkorDB Graph DB** – Stores and queries your graphs.
20+
2. **Code-Graph-Backend** – Handles backend logic.
21+
3. **Code-Graph-Frontend** – Provides the web interface.
1722

18-
You'll need to start all three components:
23+
To set up the project, you’ll need to start all three components.
1924

20-
### Run FalkorDB
25+
### 1. Start FalkorDB
26+
27+
Run the following command to start FalkorDB using Docker:
2128

2229
```bash
2330
docker run -p 6379:6379 -it --rm falkordb/falkordb
2431
```
2532

26-
### Run Code-Graph-Backend
33+
### 2. Start the Backend
2734

28-
#### Clone the Backend
35+
#### Clone the Backend Repository
2936

3037
```bash
3138
git clone https://github.com/FalkorDB/code-graph-backend.git
39+
cd code-graph-backend
3240
```
3341

34-
#### Setup environment variables
42+
#### Set Up Environment Variables
3543

36-
`SECRET_TOKEN` - user defined token used to authorize the request
44+
Define the required environment variables:
3745

3846
```bash
3947
export FALKORDB_HOST=localhost FALKORDB_PORT=6379 \
40-
OPENAI_API_KEY=<YOUR OPENAI_API_KEY> SECRET_TOKEN=<YOUR_SECRECT_TOKEN> \
48+
OPENAI_API_KEY=<YOUR_OPENAI_API_KEY> SECRET_TOKEN=<YOUR_SECRET_TOKEN> \
4149
FLASK_RUN_HOST=0.0.0.0 FLASK_RUN_PORT=5000
4250
```
4351

44-
#### Install dependencies & run
52+
`SECRET_TOKEN` is a user-defined token used for request authorization.
4553

46-
```bash
47-
cd code-graph-backend
54+
#### Install Dependencies & Start the Backend
4855

56+
```bash
4957
pip install --no-cache-dir -r requirements.txt
50-
5158
flask --app api/index.py run --debug > flask.log 2>&1 &
52-
5359
```
5460

55-
### Run Code-Graph-Frontend
61+
### 3. Start the Frontend
5662

57-
#### Clone the Frontend
63+
#### Clone the Frontend Repository
5864

5965
```bash
6066
git clone https://github.com/FalkorDB/code-graph.git
67+
cd code-graph
6168
```
6269

63-
#### Setup environment variables
70+
#### Set Up Environment Variables
6471

6572
```bash
6673
export BACKEND_URL=http://${FLASK_RUN_HOST}:${FLASK_RUN_PORT} \
67-
SECRET_TOKEN=<YOUR_SECRECT_TOKEN> OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>
74+
SECRET_TOKEN=<YOUR_SECRET_TOKEN> OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>
6875
```
6976

70-
#### Install dependencies & run
77+
#### Install Dependencies & Start the Frontend
7178

7279
```bash
73-
cd code-graph
7480
npm install
7581
npm run dev
7682
```
7783

78-
### Process a local repository
84+
### 4. Process a Local Repository
85+
86+
Use the following `curl` command to analyze a local repository:
87+
7988
```bash
80-
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>"
89+
curl -X POST http://127.0.0.1:5000/analyze_folder \
90+
-H "Content-Type: application/json" \
91+
-H "Authorization: <YOUR_SECRET_TOKEN>" \
92+
-d '{"path": "<PATH_TO_LOCAL_REPO>", "ignore": ["./.github", "./sbin", "./.git", "./deps", "./bin", "./build"]}'
8193
```
8294

83-
Note: At the moment code-graph can analyze both the C & Python source files.
84-
Support for additional languages e.g. JavaScript, Go, Java is planned to be added
85-
in the future.
95+
**Note:** Currently, Code-Graph supports analyzing C and Python source files.
96+
Support for additional languages (e.g., JavaScript, Go, Java) is planned.
97+
98+
### 5. Access the Web Interface
99+
100+
Once everything is running, open your browser and go to:
101+
102+
[http://localhost:3000](http://localhost:3000)
103+
104+
## Community
105+
106+
Have questions or feedback? Reach out via:
107+
108+
* [GitHub Issues](https://github.com/FalkorDB/GraphRAG-SDK/issues)
109+
* Join our [Discord](https://discord.com/invite/6M4QwDXn2w)
110+
111+
⭐️ If you find this repository helpful, please consider giving it a star!
86112

87-
Browse to [http://localhost:3000](http://localhost:3000)
113+
Knowledge Graph, Code Analysis, Code Visualization, Dead Code Analysis, Graph Database

‎app/api/repo/route.ts‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { NextResponse } from "next/server";
1+
import { NextRequest, NextResponse } from "next/server";
22
import { getEnvVariables } from "../utils";
33

44
export async function GET() {
@@ -22,39 +22,41 @@ export async function GET() {
2222
return NextResponse.json({ result: repositories }, { status: 200 })
2323
} catch (err) {
2424
console.error(err)
25-
return NextResponse.json((err as Error).message, { status: 400 })
25+
return NextResponse.json((err as Error).message, { status: 400 })
2626
}
2727
}
2828

29-
// export async function POST(request: NextRequest) {
30-
31-
// const repo_url = request.nextUrl.searchParams.get('url');
32-
33-
// try {
34-
35-
// if (!repo_url) {
36-
// throw new Error("URL parameter is missing");
37-
// }
38-
39-
// const { url, token } = getEnvVariables();
40-
41-
// const result = await fetch(`${url}/process_repo`, {
42-
// method: 'POST',
43-
// body: JSON.stringify({ repo_url, ignore: ["./.github", "./sbin", "./.git", "./deps", "./bin", "./build"] }),
44-
// headers: {
45-
// "Authorization": token,
46-
// 'Content-Type': 'application/json'
47-
// },
48-
// cache: 'no-store'
49-
// });
50-
51-
// if (!result.ok) {
52-
// throw new Error(await result.text());
53-
// }
54-
55-
// return NextResponse.json({ message: "success" }, { status: 200 });
56-
// } catch (err) {
57-
// console.error(err)
58-
// return NextResponse.json((err as Error).message, { status: 400 });
59-
// }
60-
// }
29+
export async function POST(request: NextRequest) {
30+
31+
const repo_url = request.nextUrl.searchParams.get('url');
32+
33+
try {
34+
35+
if (!repo_url) {
36+
throw new Error("URL parameter is missing");
37+
}
38+
39+
const { url, token } = getEnvVariables();
40+
41+
const isLocal = repo_url.startsWith("file://")
42+
43+
const result = await fetch(`${url}/${isLocal ? "analyze_folder" : "analyze_repo"}`, {
44+
method: 'POST',
45+
body: JSON.stringify({ repo_url, ignore: ["./.github", "./sbin", "./.git", "./deps", "./bin", "./build"] }),
46+
headers: {
47+
"Authorization": token,
48+
'Content-Type': 'application/json'
49+
},
50+
cache: 'no-store'
51+
});
52+
53+
if (!result.ok) {
54+
throw new Error(await result.text());
55+
}
56+
57+
return NextResponse.json({ message: "success" }, { status: 200 });
58+
} catch (err) {
59+
console.error(err)
60+
return NextResponse.json((err as Error).message, { status: 400 });
61+
}
62+
}

‎app/components/dataPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const excludedProperties = [
1818
"expand",
1919
"collapsed",
2020
"isPath",
21-
"isPathStartEnd",
21+
"isPathSelected",
2222
"visible",
2323
"index",
2424
"curve",

‎app/page.tsx‎

Lines changed: 50 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,16 @@ import { VisuallyHidden } from '@radix-ui/react-visually-hidden';
1212
import Image from 'next/image';
1313
import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
1414
import { prepareArg } from './utils';
15+
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
16+
import { Progress } from '@/components/ui/progress';
1517
import { Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
1618
import { Drawer, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger } from '@/components/ui/drawer';
1719
import Input from './components/Input';
1820
import { ForceGraphMethods, NodeObject } from 'react-force-graph-2d';
1921
import { Labels } from './components/labels';
2022
import { Toolbar } from './components/toolbar';
2123
import { cn, handleZoomToFit, Message, Path, PathData, PathNode } from '@/lib/utils';
24+
import { GraphContext } from './components/provider';
2225

2326
type Tip = {
2427
title: string
@@ -119,6 +122,7 @@ export default function Home() {
119122
title: "Uh oh! Something went wrong.",
120123
description: await result.text(),
121124
})
125+
setIsSubmit(false)
122126
return
123127
}
124128

@@ -334,60 +338,59 @@ export default function Home() {
334338
}
335339
</DropdownMenuContent>
336340
</DropdownMenu>
337-
{/* <Dialog open={createOpen} onOpenChange={setCreateOpen}>
338-
<DialogTrigger asChild>
339-
<button
340-
className="h-full bg-black p-4 text-white rounded-lg"
341-
title="Create new project"
342-
>
343-
<p>Create new project</p>
344-
</button>
345-
</DialogTrigger>
346-
<DialogContent className='max-w-[26%] gap-8'>
347-
<DialogHeader>
348-
<DialogTitle>{!isSubmit ? "CREATE A NEW PROJECT" : "THANK YOU FOR A NEW REQUEST"}</DialogTitle>
349-
</DialogHeader>
350-
<DialogDescription className='text-warp'>
351341
{
352-
!isSubmit
353-
? "Please provide the URL of the model to connect and start querying data"
354-
: "Processing your graph, this could take a while. We appreciate your patience"
355-
}
356-
</DialogDescription>
357-
{
358-
!isSubmit ?
359-
<form className='flex flex-col gap-4' onSubmit={onCreateRepo}>
360-
<input
361-
className='border p-3 rounded-lg'
362-
type="text"
363-
value={createURL}
364-
onChange={(e) => setCreateURL(e.target.value)}
365-
placeholder="Type URL"
366-
/>
367-
<div className='flex flex-row-reverse'>
368-
<button
369-
className='bg-black p-3 text-white rounded-lg'
370-
type='submit'
371-
title='Create Project'
372-
>
373-
<p>Create</p>
374-
</button>
375-
</div>
376-
</form>
377-
: <Progress value={0} />
378-
}
342+
process.env.NEXT_PUBLIC_LOCAL_MODE &&
343+
<Dialog open={createOpen} onOpenChange={setCreateOpen}>
344+
<DialogTrigger asChild>
345+
<button
346+
className="h-full bg-black p-4 text-white rounded-lg"
347+
title="Create new project"
348+
>
349+
<p>Create new project</p>
350+
</button>
351+
</DialogTrigger>
352+
<DialogContent className='sm:max-w-[500px]'>
353+
<DialogHeader>
354+
<DialogTitle>{!isSubmit ? "CREATE A NEW PROJECT" : "THANK YOU FOR A NEW REQUEST"}</DialogTitle>
355+
</DialogHeader>
356+
<DialogDescription className='text-black'>
357+
{
358+
!isSubmit
359+
? "Please provide the URL of the project to connect and start querying data"
360+
: "Processing your graph, this could take a while. We appreciate your patience"
361+
}
362+
</DialogDescription>
363+
{
364+
!isSubmit ?
365+
<form onSubmit={onCreateRepo} className='flex flex-col gap-4'>
366+
<input
367+
className='border p-3 rounded-lg'
368+
type="text"
369+
value={createURL}
370+
onChange={(e) => setCreateURL(e.target.value)}
371+
placeholder="Type Project URL (File:// or https://)"
372+
/>
373+
<div className='flex flex-row-reverse'>
374+
<button
375+
className='bg-black p-3 text-white rounded-lg'
376+
type='submit'
377+
title='Create Project'
378+
>
379+
<p>Create</p>
380+
</button>
381+
</div>
382+
</form>
383+
: <Progress value={0} />
384+
}
379385
</DialogContent>
380-
</Dialog> */}
386+
</Dialog>
387+
}
381388
</ul>
382389
</div>
383390
<div className='h-2.5 bg-gradient-to-r from-[#EC806C] via-[#B66EBD] to-[#7568F2]' />
384391
</header>
385392
<PanelGroup direction="horizontal" className="w-full h-full">
386-
<Panel
387-
defaultSize={graph.Id ? 70 : 100}
388-
maxSize={100}
389-
minSize={50}
390-
>
393+
<Panel defaultSize={70} className="flex flex-col" minSize={50}>
391394
<CodeGraph
392395
graph={graph}
393396
data={data}

0 commit comments

Comments
 (0)