feat(ui): add interactive graph visualization using React Flow

[nancysangani]

🔗 Related Issue

Closes #267

---

📝 What does this PR do?

Adds an interactive knowledge graph visualization powered by React Flow.

Key changes include:

• Adds a backend graph API endpoint in backend/app/routes/graph.py to serve graph data
• Creates a reusable KnowledgeGraph component in frontend/src/components/graph/KnowledgeGraph.tsx
• Adds @xyflow/react, the React 19-compatible successor to react-flow-renderer
• Enables visualization of relationships as an interactive node-and-edge graph
• Prepares dashboard integration to display the graph within the application UI

The feature provides a more intuitive way to explore connections between documents, entities, and retrieved knowledge.

---

🗂️ Type of Change

• 🐛 Bug fix
• ✨ New feature
• 🔧 Refactor / code cleanup
• 📝 Documentation update
• 🎨 UI / styling change
• ⚙️ CI / tooling / config change
• 🧪 Tests

---

🧪 How was this tested?

• Ran the backend locally (uvicorn app.main:app --reload)
• Ran the frontend locally (npm run dev inside frontend/)
• Tested the graph API endpoint manually
• Verified graph rendering and interactions in the browser

---

✅ Self-Review Checklist

• My branch is based on dev, not main
• I have not added any secrets / API keys
• I have not modified main branch or any HuggingFace deployment config
• My code follows the existing style (no unnecessary formatting changes)
• I have updated relevant docs / comments if needed

[param20h]

Solution for Failing Job 81681090600

The job failed due to code formatting issues in frontend/src/components/graph/KnowledgeGraph.tsx. Prettier detected that the file doesn't conform to the project's code style standards.

Issue

Line 233 has incorrect indentation. The setLoading(true); statement inside the fetchGraph function is indented with 3 spaces instead of 2 spaces, which violates Prettier's formatting rules.

Fix

Update the indentation in the fetchGraph function (lines 232-311) to use consistent 2-space indentation. Specifically, fix line 233 and the following lines:

Change from:

  const fetchGraph = useCallback(async () => {
  setLoading(true);
  setError(null);
  setSelectedNode(null);

Change to:

  const fetchGraph = useCallback(async () => {
    setLoading(true);
    setError(null);
    setSelectedNode(null);

Apply this same 2-space indentation fix to all lines within the fetchGraph function body (lines 233-311).

Alternatively, you can run Prettier with the --write flag to automatically fix all formatting issues:

npx prettier --write frontend/src/components/graph/KnowledgeGraph.tsx

Source file: https://github.com/param20h/PDF-Assistant-RAG/blob/587b90f7262d4cc4b268333442f390fdaf6dde58/frontend/src/components/graph/KnowledgeGraph.tsx

[nancysangani]

@param20h please review the PR, all checks have passed.