Skip to content

Conversation

@gkorland
Copy link
Contributor

@gkorland gkorland commented Jan 22, 2025

Summary by CodeRabbit

  • New Features

    • Mobile-friendly layout, carousel tips and a customizable drawer.
    • Download graph as image; improved toolbar and multi-device chart behavior.
    • Enhanced search, chat interactions, and zoom-to-fit with better node focusing.
  • Bug Fixes

    • Fixed interaction glitches (click, right-click, double-click expansion) and assorted naming inconsistencies.
  • Performance Improvements

    • Smoother graph rendering, responsive resizing, and refined zoom/selection handling.
  • Documentation / Dev Ops

    • Updated README and added docker-compose for local setup.
  • Testing

    • Expanded and stabilized end-to-end tests for chat, canvas, and tooltips.

@vercel
Copy link

vercel bot commented Jan 22, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
code-graph Ready Ready Preview Comment Oct 14, 2025 5:26am

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 22, 2025

Walkthrough

Chat, graph, UI, test, and infra files were updated to centralize graph state (GraphRef), expand message/path types, add mobile/desktop refs and UI components (carousel/drawer), refine graph model/labeling, improve E2E utilities/tests and Playwright workflow, add docker-compose, and bump dependencies.

Changes

Cohort / File(s) Change summary
Chat & Input
app/components/chat.tsx, app/components/Input.tsx
Chat now receives external state (messages, paths, query, selectedPath, setChatOpen) and chartRef; local message/path/query state removed. Submission and path selection use chartRef to zoom. Input removed value prop and uses node?.name.
Graph UI & Toolbar
app/components/code-graph.tsx, app/components/graphView.tsx, app/components/toolbar.tsx, app/components/elementMenu.tsx, app/components/dataPanel.tsx
Prop/type harmonization to GraphRef, allow `Node
Model / Utils / Types
app/components/model.ts, lib/utils.ts
Graph model: add Label type and labels map, adjust link structure and link curve calc; utility types added (Message, PathData, GraphRef) and handleZoomToFit helper implemented.
Page & New UI components
app/page.tsx, components/ui/carousel.tsx, components/ui/drawer.tsx, app/components/combobox.tsx
Split chart refs into desktopChartRef/mobileChartRef, add UI state (messages/query/paths/selectedPath/etc.), mobile Drawer and Carousel added, combobox styling tweak, pass expanded props into Chat.
Styling & Config
app/globals.css, tailwind.config.js, components.json, app/layout.tsx
New chart color CSS variables, .control-button, tailwind chart palette, new aliases and iconLibrary, removed GoogleAnalytics import.
E2E tests & utils
e2e/logic/POM/codeGraph.ts, e2e/logic/utils.ts, e2e/config/constants.ts, e2e/config/testData.ts, e2e/tests/*.spec.ts
Robust POM: scoped locators, mobile handling, canvas helpers (download, hover, right-click), wait helpers (waitForStableText, waitForElementToBeVisible), constants renamed (GRAPHRAG_SDK, FLASK_GRAPH), test updates to use new constants, added tests for download/tooltip/consistency.
Playwright & CI
.github/workflows/playwright.yml, playwright.config.ts
Ensure report directories, upload screenshots artifact, always upload report artifact, add screenshots on failure, increase CI workers, set report output folders.
Docker & README
docker-compose.yml, README.md, package.json
Add docker-compose (falkordb + backend), README rework, large dependency updates and additions (d3, html2canvas, embla, react-json-tree, vaul, etc.).
API
app/api/repo/route.ts
Added POST handler to proxy analyze_repo / analyze_folder based on repo_url param; import adjusted to include NextRequest.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ChatUI as Chat component
    participant API as /api/chat
    participant Graph as ForceGraph (via GraphRef)

    User->>ChatUI: send question / select path
    ChatUI->>API: fetch response / paths
    API-->>ChatUI: response (messages, paths)
    ChatUI->>Graph: handleZoomToFit(chartRef, padding, filter) 
    Note right of Graph: GraphRef.zoomToFit called to adjust view
    Graph-->>ChatUI: zoom complete
    ChatUI-->>User: render messages and focused graph
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

Suggested labels

Review effort 4/5

Suggested reviewers

  • AviAvni
  • dudizimber
  • barakb

Poem

🐰 A Rabbit's Refactoring Rhyme 🐰
I hopped through props and fixed each name,
Zoomed the graph and tamed its frame.
New drawers, carousels, tests that pass,
Labels, types, and snapshots in a single pass.
CodeRabbit cheered — the repo's game! 🥕

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)
Check name Status Explanation Resolution
Title Check ❓ Inconclusive The title “Staging” is too generic and does not convey any specific information about the substantial changes in this pull request. Please update the title to clearly summarize the primary purpose of this PR, for example “Integrate external state management into Chat and CodeGraph components” or “Add Carousel and Drawer UI components and enhance graph interactions.”
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch staging

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ccab83e and fea017b.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (1)
  • package.json (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • package.json
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Dependabot
  • GitHub Check: test

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR Summary

Hi! Looks like you've reached your API usage limit. You can increase it from your account settings page here: app.greptile.com/settings/billing/code-review

💡 (1/5) You can manually trigger the bot by mentioning @greptileai in a comment!

9 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🔭 Outside diff range comments (2)
app/components/graphView.tsx (1)

Line range hint 105-166: Improve double-click detection implementation.

The current implementation has potential issues:

  1. The double-click detection uses a fixed 1000ms threshold which might not match the system's double-click speed setting.
  2. The implementation doesn't handle the case where a user clicks different nodes within the threshold.

Consider this improved implementation:

-const lastClick = useRef<{ date: Date, name: string }>({ date: new Date(), name: "" })
+const lastClick = useRef<{ time: number, id: number }>({ time: 0, id: 0 })

-const isDoubleClick = now.getTime() - date.getTime() < 1000 && name === node.name
+const isDoubleClick = (now.getTime() - lastClick.current.time < 500) && (lastClick.current.id === node.id)
+lastClick.current = { time: now.getTime(), id: node.id }
app/components/chat.tsx (1)

Line range hint 157-215: Improve zoom functionality implementation.

Several improvements can be made to the zoom functionality:

  1. The setTimeout with 0ms delay is unnecessary
  2. Magic numbers should be constants
  3. Add proper error handling for undefined chart

Apply these changes:

+const ZOOM_DURATION = 1000;
+const ZOOM_PADDING = 150;

 const handleSetSelectedPath = (p: PathData) => {
   const chart = chartRef.current
   
-  if (!chart) return
+  if (!chart) {
+    console.warn('Chart reference is not available');
+    return;
+  }
   
   // ... rest of the function ...
   
-  setTimeout(() => {
-    chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => p.nodes.some(node => node.id === n.id));
-  }, 0)
+  chart.zoomToFit(ZOOM_DURATION, ZOOM_PADDING, (n: NodeObject<Node>) => p.nodes.some(node => node.id === n.id));
 }
🧰 Tools
🪛 Biome (1.9.4)

[error] 163-163: Comparing to itself is potentially pointless.

(lint/suspicious/noSelfCompare)

🧹 Nitpick comments (5)
e2e/tests/chat.spec.ts (1)

113-113: Remove unnecessary empty line within the loop.

The empty line within the loop affects readability without adding value.

    for (let i = 0; i < 3; i++) {
      await chat.sendMessage(Node_Question);
      const result = await chat.getTextInLastChatElement();
      const number = result.match(/\d+/g)?.[0]!;
      responses.push(number);
-      
    }
app/components/model.ts (2)

179-215: Add error handling for edge cases.

While the node creation logic is sound, it would benefit from additional error handling for edge cases.

      let source = this.nodesMap.get(edgeData.src_node)
      let target = this.nodesMap.get(edgeData.dest_node)

+     if (edgeData.src_node === undefined || edgeData.dest_node === undefined) {
+       console.warn('Invalid edge data: Missing source or destination node ID');
+       return;
+     }

      if (!source) {

229-253: Add documentation for curve calculation logic.

The curve calculation logic is complex and would benefit from documentation explaining the mathematical reasoning.

Add a comment block explaining the curve calculation:

+    // Calculate curve values for graph edges:
+    // - For self-loops (start === end):
+    //   - Even indices: negative values starting from -3
+    //   - Odd indices: positive values starting from 2
+    // - For regular edges:
+    //   - Even indices: negative values starting from 0
+    //   - Odd indices: positive values starting from 1
+    // The final curve value is scaled by 0.1 to create subtle curves
     newElements.links.forEach(link => {
e2e/logic/POM/codeGraph.ts (1)

284-285: Consider removing redundant delay.

The code waits for the loading image to be hidden and then adds an additional 2-second delay, which might be unnecessary.

Consider removing the redundant delay:

 async getTextInLastChatElement(): Promise<string>{
     await this.page.waitForSelector('img[alt="Waiting for response"]', { state: 'hidden' });
-    await delay(2000);
     return (await this.lastElementInChat.textContent())!;
 }
app/components/chat.tsx (1)

Line range hint 272-313: Extract common zoom functionality.

The zoom logic is duplicated between handleSetSelectedPath and handleSubmit. Consider extracting it into a reusable function.

Apply these changes:

+const ZOOM_DURATION = 1000;
+const ZOOM_PADDING = 150;
+
+const zoomToNodes = (chart: ForceGraphMethods, nodes: any[]) => {
+  if (!chart) {
+    console.warn('Chart reference is not available');
+    return;
+  }
+  chart.zoomToFit(ZOOM_DURATION, ZOOM_PADDING, (n: NodeObject<Node>) => 
+    nodes.some(node => node.id === n.id)
+  );
+};

 const handleSubmit = async () => {
   const chart = chartRef.current
   
   if (!chart) return
   
   // ... rest of the function ...
   
-  setTimeout(() => {
-    chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => 
-      formattedPaths.some(p => p.nodes.some(node => node.id === n.id))
-    );
-  }, 0)
+  zoomToNodes(chart, formattedPaths.flatMap(p => p.nodes));
 }

 const handleSetSelectedPath = (p: PathData) => {
   // ... rest of the function ...
-  setTimeout(() => {
-    chart.zoomToFit(1000, 150, (n: NodeObject<Node>) => 
-      p.nodes.some(node => node.id === n.id)
-    );
-  }, 0)
+  zoomToNodes(chart, p.nodes);
 }
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f419fe6 and d47f502.

📒 Files selected for processing (9)
  • app/components/chat.tsx (9 hunks)
  • app/components/code-graph.tsx (5 hunks)
  • app/components/elementMenu.tsx (3 hunks)
  • app/components/graphView.tsx (5 hunks)
  • app/components/model.ts (3 hunks)
  • app/page.tsx (1 hunks)
  • e2e/logic/POM/codeGraph.ts (4 hunks)
  • e2e/tests/canvas.spec.ts (1 hunks)
  • e2e/tests/chat.spec.ts (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
  • GitHub Check: build
  • GitHub Check: test
  • GitHub Check: test
🔇 Additional comments (11)
e2e/tests/chat.spec.ts (1)

120-121: LGTM! Good test isolation.

Moving the API calls inside the test scope improves test isolation and follows testing best practices.

app/components/elementMenu.tsx (1)

17-17: LGTM! Consistent function naming.

The typo fix from handelExpand to handleExpand is applied consistently across the component.

Also applies to: 22-22, 71-71, 77-77, 117-117, 123-123

app/components/model.ts (1)

55-55: LGTM! Safe default parameter.

Adding a default value of 0 ensures the function always returns a valid color.

app/page.tsx (1)

284-284: LGTM! Enhanced graph interaction.

Adding the chartRef prop to the Chat component enables improved graph visualization capabilities.

e2e/tests/canvas.spec.ts (1)

46-46: LGTM! Good improvement to test reliability.

Adding clickCenter() before zoom operations ensures consistent test behavior by establishing a known starting position.

app/components/graphView.tsx (2)

64-87: Good implementation of responsive graph sizing.

The resize observer implementation properly handles both window resizing and parent container changes. The cleanup in the useEffect hook correctly removes event listeners and disconnects the observer.


173-174: LGTM! Proper usage of dynamic dimensions.

Using state-managed dimensions ensures the graph properly responds to container size changes.

app/components/code-graph.tsx (1)

Line range hint 244-357: LGTM! Good cleanup of handler names.

The renaming from 'handel*' to 'handle*' improves code consistency and fixes typos.

e2e/logic/POM/codeGraph.ts (2)

155-157: LGTM! Good addition of loading state locator.

The new locator helps track loading states consistently across tests.


426-426: Verify the impact of changing to right-click.

The change from left-click to right-click for node selection might affect other tests that depend on this behavior.

Let's verify the impact:

✅ Verification successful

Right-click change appears safe to implement

The tests use the nodeClick() abstraction method rather than direct click events, focusing on outcomes rather than the click mechanism. The change from left to right click is an implementation detail that won't affect the test behavior as long as the nodeClick() method maintains its core functionality of node selection.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for tests that might be affected by the click behavior change
rg -l "nodeClick" "e2e/tests"

Length of output: 87


Script:

#!/bin/bash
# Check the content of test files for click-related code
echo "=== canvas.spec.ts ==="
rg -A 5 -B 5 "click" "e2e/tests/canvas.spec.ts"
echo -e "\n=== nodeDetailsPanel.spec.ts ==="
rg -A 5 -B 5 "click" "e2e/tests/nodeDetailsPanel.spec.ts"

Length of output: 8469

app/components/chat.tsx (1)

110-110: LGTM!

The function signature has been correctly updated to include the new chartRef prop.

… handling and neighbor deletion logic. Updated deleteNeighbors function to handle expanded nodes correctly and replaced direct calls with handleExpand in GraphView for better clarity and maintainability.
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 22.13.10 to 22.13.14.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (3)
package.json (3)

23-23: New Dependencies Added
New libraries—canvas2svg (line 23), embla-carousel-react (line 27), html2canvas (line 28), react-json-tree (line 36), tailwindcss-animate (line 41), and vaul (line 42)—have been added. Ensure these additions are documented, integrated correctly in relevant components, and tested for compatibility along with their bundle impacts and licensing requirements.

Also applies to: 27-28, 36-36, 41-42


25-26: Miscellaneous Dependency Upgrades
Several other dependencies have undergone version updates:

  • clsx (line 25)
  • d3 (line 26)
  • lucide-react (line 29)
  • next (line 30)
  • react & react-dom (lines 32-33)
  • react-force-graph-2d (line 34)
  • tailwind-merge (line 40)

Please double-check these updates to confirm that their API changes (if any) do not affect your current implementation.

Also applies to: 29-30, 32-34, 40-40


45-53: DevDependencies Upgrades
The devDependencies have been updated, including:

  • @playwright/test (line 45)
  • @types/node, @types/react, and @types/react-dom (lines 46-48)
  • eslint and eslint-config-next (lines 50-51)
  • tailwindcss (line 52)
  • typescript (line 53)

Verify that these updates align with your development workflow and that ESLint as well as TypeScript configurations remain consistent.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 5bf503e and 1b684dc.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (1)
  • package.json (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: test
  • GitHub Check: test
🔇 Additional comments (1)
package.json (1)

12-20: Radix UI Dependencies Upgrades
The versions for the Radix UI components (react-checkbox, react-dialog, react-dropdown-menu, react-hover-card, react-progress, react-select, react-slot, react-toast, and react-tooltip) have been updated as expected. Please verify that these upgraded versions are fully compatible with your codebase and that no unintended breaking changes have been introduced.

gkorland and others added 8 commits April 1, 2025 16:32
…/eslint-config-next-15.2.4

Bump eslint-config-next from 15.2.1 to 15.2.4
…/autoprefixer-10.4.21

Bump autoprefixer from 10.4.20 to 10.4.21
…/types/node-22.13.14

Bump @types/node from 22.13.10 to 22.13.14
Bumps [eslint](https://github.com/eslint/eslint) from 9.22.0 to 9.23.0.
- [Release notes](https://github.com/eslint/eslint/releases)
- [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md)
- [Commits](eslint/eslint@v9.22.0...v9.23.0)

---
updated-dependencies:
- dependency-name: eslint
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
…/eslint-9.23.0

Bump eslint from 9.22.0 to 9.23.0
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (4)
README.md (4)

1-3: Inconsistent Heading Levels in Header
The file begins with an h1 header on line 1 followed by an h3 header on line 3. This creates an abrupt jump in hierarchy. Consider changing line 3 from an h3 to an h2 to establish a more consistent and incremental heading structure.

-### Visualize your repository with our graph for code analysis
+## Visualize your repository with our graph for code analysis
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)

3-3: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3

(MD001, heading-increment)


9-10: Unclear Use of a Dash
The single dash on line 9 appears out of context and may be unintentionally left in the file. If it is not meant to serve as a divider or bullet marker, consider removing it to avoid confusion.


46-50: Improve Environment Variable Formatting for Readability
The environment variables on lines 46–50 are combined using backslash continuations. Splitting them into separate export statements could improve readability and reduce the risk of errors when users copy and paste commands. For example:

-export FALKORDB_HOST=localhost FALKORDB_PORT=6379 \
-    OPENAI_API_KEY=<YOUR_OPENAI_API_KEY> SECRET_TOKEN=<YOUR_SECRET_TOKEN> \
-    FLASK_RUN_HOST=0.0.0.0 FLASK_RUN_PORT=5000
+export FALKORDB_HOST=localhost 
+export FALKORDB_PORT=6379
+export OPENAI_API_KEY=<YOUR_OPENAI_API_KEY>
+export SECRET_TOKEN=<YOUR_SECRET_TOKEN>
+export FLASK_RUN_HOST=0.0.0.0 
+export FLASK_RUN_PORT=5000

110-111: Consider Adjusting Tone in Community Section
Line 111 ends with an exclamation mark. While enthusiasm is great, a single exclamation mark can sometimes be viewed as overly informal in documentation. Consider using a period instead if a more formal tone is desired.

🧰 Tools
🪛 LanguageTool

[style] ~111-~111: Using many exclamation marks might seem excessive (in this case: 3 exclamation marks for a text that’s 1748 characters long)
Context: ...elpful, please consider giving it a star! Knowledge Graph, Code Analysis, Code V...

(EN_EXCESSIVE_EXCLAMATION)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1b684dc and f593090.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (2)
  • README.md (1 hunks)
  • package.json (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • package.json
🧰 Additional context used
🪛 LanguageTool
README.md

[style] ~111-~111: Using many exclamation marks might seem excessive (in this case: 3 exclamation marks for a text that’s 1748 characters long)
Context: ...elpful, please consider giving it a star! Knowledge Graph, Code Analysis, Code V...

(EN_EXCESSIVE_EXCLAMATION)

🪛 markdownlint-cli2 (0.17.2)
README.md

3-3: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3

(MD001, heading-increment)


5-5: Heading style
Expected: atx; Actual: setext

(MD003, heading-style)

⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: test
  • GitHub Check: test
🔇 Additional comments (1)
README.md (1)

88-93: Verify Curl Command Formatting
The curl command provided for processing a local repository is correctly formatted with line breaks. Just ensure that these line breaks are preserved when users copy the command into their terminals, as loss of the backslashes may cause issues.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Nitpick comments (6)
app/components/dataPanel.tsx (5)

14-34: Remove duplicate 'isPathSelected' property.

There's a duplicate entry for "isPathSelected" in the excludedProperties array.

-    "isPath",
     "isPathSelected",
     "visible",
     "index",
     "curve",
     "__indexColor",
-    "isPathSelected",
     "__controlPoints",

39-40: Consider using TypeScript type guards for better type safety.

The current approach uses property presence to differentiate between Node and Link types, but TypeScript type guards would provide better type safety.

-    const type = "category" in obj
-    const label = type ? `${obj.category}: ${obj.name}` : obj.label
+    const isNode = (obj: Node | Link): obj is Node => 'category' in obj;
+    const isLink = (obj: Node | Link): obj is Link => 'source' in obj && 'target' in obj;
+    
+    const label = isNode(obj) 
+        ? `${obj.category}: ${obj.name}` 
+        : obj.label;

59-73: Consider parameterizing the syntax highlighter language.

The language for SyntaxHighlighter is hardcoded as "python", which might not be appropriate for all source code types.

You could extract the language detection to a helper function:

+ const detectLanguage = (src: string) => {
+   // Simple language detection based on file extension or content
+   if (src.includes('def ') || src.includes('import ')) return 'python';
+   if (src.includes('function') || src.includes('const ')) return 'javascript';
+   // Add more language detection logic as needed
+   return 'plaintext';
+ }

  {
    key === "src" ?
      <SyntaxHighlighter
-       language="python"
+       language={detectLanguage(value as string)}
        style={{
          ...dark,
          hljs: {

95-113: Maintain consistency in syntax highlighting approach.

The same language hardcoding issue exists in the nested valueRenderer for JSONTree.

Apply the same language detection function here:

valueRenderer={(valueAsString, value, keyPath) => {
  if (keyPath === "src") {
    return <SyntaxHighlighter
-     language="python"
+     language={detectLanguage(value as string)}
      style={{

138-147: Handle potential race condition in window opening.

When opening a new tab and trying to scroll immediately, there's a potential race condition as the page might not have loaded yet.

Consider adding a delay or using a message passing approach if possible:

onClick={() => {
  const newTab = window.open(url, '_blank');

  if (!obj.src_start || !obj.src_end || !newTab) return
  
+ // Add a small delay to ensure the page has loaded
+ setTimeout(() => {
    newTab.scroll({
      top: obj.src_start,
      behavior: 'smooth'
    })
+ }, 1000);
}}
app/api/repo/route.ts (1)

25-25: Be mindful of returning raw error messages
Returning (err as Error).message may inadvertently expose sensitive details. Consider sanitizing error content before sending it to end users.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f593090 and 04fa785.

📒 Files selected for processing (3)
  • app/api/repo/route.ts (2 hunks)
  • app/components/dataPanel.tsx (2 hunks)
  • app/page.tsx (7 hunks)
🧰 Additional context used
🧬 Code Definitions (3)
app/components/dataPanel.tsx (1)
app/components/model.ts (2)
  • Node (20-31)
  • Link (33-43)
app/api/repo/route.ts (2)
app/api/repo/[graph]/neighbors/route.ts (1)
  • POST (4-34)
app/api/utils.ts (1)
  • getEnvVariables (1-12)
app/page.tsx (7)
app/components/model.ts (3)
  • Node (20-31)
  • Link (33-43)
  • Labels (102-104)
lib/utils.ts (4)
  • PathNode (12-15)
  • Message (31-36)
  • handleZoomToFit (44-75)
  • cn (40-42)
app/components/code-graph.tsx (1)
  • CodeGraph (47-394)
app/components/chat.tsx (1)
  • Chat (54-454)
app/components/toolbar.tsx (1)
  • Toolbar (11-59)
app/components/Input.tsx (1)
  • Input (18-226)
app/components/labels.tsx (1)
  • Labels (6-28)
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: test
  • GitHub Check: test
🔇 Additional comments (34)
app/components/dataPanel.tsx (3)

1-3: Good addition of import statements.

The imports have been properly updated to support the new functionality, including adding Link type and JSONTree component.


9-10: Improved type flexibility.

Updating the interface to accept both Node and Link types enhances the component's flexibility and reusability.


121-154: Good conditional rendering for footer actions.

The approach to conditionally render buttons based on object type is appropriate. However, using type guards as suggested earlier would make this code more type-safe as well.

- "category" in obj &&
+ isNode(obj) &&
app/api/repo/route.ts (11)

1-1: Add NextRequest to imports
This addition is correct and necessary for the new POST handler.


29-29: POST handler creation
A clear and well-structured approach to adding a new POST endpoint for repo analysis.


31-31: Use of searchParams
Retrieving the url via request.nextUrl.searchParams.get('url') is straightforward. Review edge cases (e.g., empty string).


35-37: Missing URL check
Clear error handling ensures users receive quick feedback when the URL param is absent.


39-39: Retrieving environment variables
Using getEnvVariables() remains consistent with your existing pattern for centrally managing config.


41-41: Local path detection
Using startsWith("file://") to branch logic between local or remote config is a neat solution.


43-51: Fetch call to analyze endpoints
Solid approach for deciding whether to analyze a folder or repo, with a good ignore list to exclude unneeded directories.


53-55: Error handling on fetch
Throwing a new Error with await result.text() provides clearer debugging information from the backend.


57-57: Return success
Simple JSON confirmation indicating the operation is complete—keeps the response concise.


58-61: Catching and returning errors
Logging to console and returning status 400 is consistent with the rest of the file’s style and ensures the error is surfaced.


62-62: End of POST function
No issues found.

app/page.tsx (20)

3-3: Use of React hooks
Importing useEffect, useRef, and useState is standard and matches the newly introduced state logic.


5-6: Extended imports
Bringing in LinkType and Node for typed graph data is a beneficial addition, as are the lucide-react icons for UI enhancements.


8-8: Added panel imports
react-resizable-panels components facilitate a more flexible layout.


20-20: New ForceGraphMethods import
Typing desktopChartRef and mobileChartRef with ForceGraphMethods ensures strong type checking for graph interactions.


23-23: Utility imports
Importing shared utilities and types from @/lib/utils reduces duplication and consolidates logic.


32-55: DESKTOP_TIPS array
Providing user-friendly instructions for desktop users is a great UX improvement to guide them through the interface.


51-55: MOBILE_TIPS definition
Having a separate tip set for mobile clarifies product usage on smaller screens.


70-85: New state variables
The introduction of desktopChartRef, mobileChartRef, menuOpen, chatOpen, etc. demonstrates thoughtful handling for both desktop and mobile contexts.


87-90: Opening chat on path selection
Auto-opening chat once a path is set can streamline user workflows.


92-98: Carousel event handling
Making use of carouselApi.on('select') for the active index fosters a reactive UI in the tips carousel.


124-124: Resetting submit state
Setting setIsSubmit(false) ensures your creation form is reusable without lingering submission status.


162-164: Disable path response
Resetting isPathResponse to false before expanding the chat panel clarifies subsequent user interactions.


193-219: handleSearchSubmit
Nicely orchestrated logic that conditionally extends the graph, reveals hidden nodes, and zooms in for better clarity.


221-232: onCategoryClick function
Straightforward toggling of node visibility by category. Preserves performance by updating only relevant nodes.


234-278: handleDownloadImage
Capturing the currently visible canvas and converting to a downloadable image is a convenient feature for exporting graph states.


281-334: Desktop layout revisions
The improved header, gradient divider, and usage of PanelGroup nicely organize the desktop workspace. The tip dropdown fosters user guidance.


337-382: Conditional new project dialog
This dialog—toggled by NEXT_PUBLIC_LOCAL_MODE—helps local users create repos. The form flow with loading indicators is well done.


390-415: Desktop CodeGraph usage
Passing newly introduced states (searchNode, cooldownTicks) to CodeGraph for robust searching and other advanced features is well-structured.


417-445: Desktop Chat panel
Using the collapsible panel for chat fosters a flexible layout without obstructing the main workspace.


447-609: Mobile layout & responsiveness
Creating a dedicated mobile view with drawers, a menu panel, and a carousel for tips establishes a user-friendly experience on smaller screens.

dependabot bot and others added 2 commits May 30, 2025 03:02
Bumps [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) from 22.13.16 to 22.15.26.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node)

---
updated-dependencies:
- dependency-name: "@types/node"
  dependency-version: 22.15.26
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
…/types/node-22.15.26

Bump @types/node from 22.13.16 to 22.15.26
dependabot bot and others added 2 commits October 14, 2025 02:10
Bumps [next](https://github.com/vercel/next.js) from 15.2.1 to 15.5.5.
- [Release notes](https://github.com/vercel/next.js/releases)
- [Changelog](https://github.com/vercel/next.js/blob/canary/release.js)
- [Commits](vercel/next.js@v15.2.1...v15.5.5)

---
updated-dependencies:
- dependency-name: next
  dependency-version: 15.5.5
  dependency-type: direct:production
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
…/next-15.5.5

Bump next from 15.2.1 to 15.5.5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

7 participants