add graph viewer webui

2025-02-09 23:15:26 +08:00
parent 8d23ed16be
commit b5eb51a861
38 changed files with 3392 additions and 0 deletions
--- a/lightrag/api/graph_viewer_webui/.gitignore
+++ b/lightrag/api/graph_viewer_webui/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/lightrag/api/graph_viewer_webui/.prettierrc.json
+++ b/lightrag/api/graph_viewer_webui/.prettierrc.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 100,
+  "trailingComma": "none",
+  "endOfLine": "crlf",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}
--- a/lightrag/api/graph_viewer_webui/README.md
+++ b/lightrag/api/graph_viewer_webui/README.md
@@ -0,0 +1,12 @@
+# LightRag Graph Viewer WebUI
+
+## Install [Bun](https://bun.sh/docs/installation)
+
+
+## Install Dependencies
+
+`bun install --frozen-lockfile`
+
+## Build
+
+`bun run build`
--- a/lightrag/api/graph_viewer_webui/bun.lock
+++ b/lightrag/api/graph_viewer_webui/bun.lock
--- a/lightrag/api/graph_viewer_webui/eslint.config.js
+++ b/lightrag/api/graph_viewer_webui/eslint.config.js
@@ -0,0 +1,34 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import stylisticJs from '@stylistic/eslint-plugin-js'
+import tseslint from 'typescript-eslint'
+import prettier from 'eslint-config-prettier'
+import react from 'eslint-plugin-react'
+
+export default tseslint.config({ ignores: ['dist'] }, prettier, {
+  extends: [js.configs.recommended, ...tseslint.configs.recommended],
+  files: ['**/*.{ts,tsx,js,jsx}'],
+  languageOptions: {
+    ecmaVersion: 2020,
+    globals: globals.browser
+  },
+  settings: { react: { version: '19.0' } },
+  plugins: {
+    'react-hooks': reactHooks,
+    'react-refresh': reactRefresh,
+    '@stylistic/js': stylisticJs,
+    react
+  },
+  rules: {
+    ...reactHooks.configs.recommended.rules,
+    'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+    ...react.configs.recommended.rules,
+    ...react.configs['jsx-runtime'].rules,
+    '@stylistic/js/indent': ['error', 2],
+    '@stylistic/js/quotes': ['error', 'single'],
+    '@typescript-eslint/no-explicit-any': ['off']
+  }
+})
+
--- a/lightrag/api/graph_viewer_webui/index.html
+++ b/lightrag/api/graph_viewer_webui/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lightrag Graph Viewer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/lightrag/api/graph_viewer_webui/package.json
+++ b/lightrag/api/graph_viewer_webui/package.json
@@ -0,0 +1,68 @@
+{
+  "name": "lightrag-graph-vierer-webui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "bunx --bun vite",
+    "build": "bunx --bun vite build",
+    "lint": "eslint .",
+    "preview": "bunx --bun vite preview"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^9.4.0",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@react-sigma/core": "^5.0.2",
+    "@react-sigma/graph-search": "^5.0.3",
+    "@react-sigma/layout-circlepack": "^5.0.2",
+    "@react-sigma/layout-circular": "^5.0.2",
+    "@react-sigma/layout-force": "^5.0.2",
+    "@react-sigma/layout-forceatlas2": "^5.0.2",
+    "@react-sigma/layout-noverlap": "^5.0.2",
+    "@react-sigma/layout-random": "^5.0.2",
+    "@react-sigma/minimap": "^5.0.2",
+    "@sigma/edge-curve": "^3.1.0",
+    "@sigma/node-border": "^3.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.4",
+    "graphology": "^0.26.0",
+    "graphology-generators": "^0.11.2",
+    "lucide-react": "^0.475.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "seedrandom": "^3.0.5",
+    "sigma": "^3.0.1",
+    "tailwind-merge": "^3.0.1",
+    "zustand": "^5.0.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.20.0",
+    "@stylistic/eslint-plugin-js": "^3.1.0",
+    "@tailwindcss/vite": "^4.0.4",
+    "@types/bun": "^1.2.2",
+    "@types/node": "^22.13.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@types/seedrandom": "^3.0.8",
+    "@vitejs/plugin-react-swc": "^3.7.2",
+    "eslint": "^9.20.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "graphology-types": "^0.24.8",
+    "prettier": "^3.4.2",
+    "prettier-plugin-tailwindcss": "^0.6.11",
+    "tailwindcss": "^4.0.4",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "~5.7.3",
+    "typescript-eslint": "^8.23.0",
+    "vite": "^6.1.0"
+  }
+}
--- a/lightrag/api/graph_viewer_webui/public/vite.svg
+++ b/lightrag/api/graph_viewer_webui/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/lightrag/api/graph_viewer_webui/src/App.tsx
+++ b/lightrag/api/graph_viewer_webui/src/App.tsx
@@ -0,0 +1,14 @@
+import ThemeProvider from '@/components/ThemeProvider'
+import { GraphViewer } from '@/GraphViewer'
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="system" storageKey="lightrag-viewer-webui-theme">
+      <div className="h-screen w-screen">
+        <GraphViewer />
+      </div>
+    </ThemeProvider>
+  )
+}
+
+export default App
--- a/lightrag/api/graph_viewer_webui/src/GraphViewer.tsx
+++ b/lightrag/api/graph_viewer_webui/src/GraphViewer.tsx
@@ -0,0 +1,172 @@
+import { useEffect, useState, useCallback } from 'react'
+// import { MiniMap } from '@react-sigma/minimap'
+import { SigmaContainer, useRegisterEvents, useSigma } from '@react-sigma/core'
+import { Settings as SigmaSettings } from 'sigma/settings'
+import { GraphSearchOption } from '@react-sigma/graph-search'
+import { EdgeArrowProgram, NodePointProgram, NodeCircleProgram } from 'sigma/rendering'
+import { NodeBorderProgram } from '@sigma/node-border'
+import EdgeCurveProgram, { EdgeCurvedArrowProgram } from '@sigma/edge-curve'
+
+import FocusOnNode from '@/components/FocusOnNode'
+import LayoutsControl from '@/components/LayoutsControl'
+import GraphControl from '@/components/GraphControl'
+import ThemeToggle from '@/components/ThemeToggle'
+import ZoomControl from '@/components/ZoomControl'
+import FullScreenControl from '@/components/FullScreenControl'
+import Settings from '@/components/Settings'
+import GraphSearch from '@/components/GraphSearch'
+
+import { useSettingsStore } from '@/lib/settings'
+
+import '@react-sigma/core/lib/style.css'
+import '@react-sigma/graph-search/lib/style.css'
+
+// Sigma settings
+const defaultSigmaSettings: Partial<SigmaSettings> = {
+  allowInvalidContainer: true,
+  defaultNodeType: 'default',
+  defaultEdgeType: 'curvedArrow',
+  renderEdgeLabels: false,
+  edgeProgramClasses: {
+    arrow: EdgeArrowProgram,
+    curvedArrow: EdgeCurvedArrowProgram,
+    curvedNoArrow: EdgeCurveProgram
+  },
+  nodeProgramClasses: {
+    default: NodeBorderProgram,
+    circel: NodeCircleProgram,
+    point: NodePointProgram
+  },
+  labelGridCellSize: 60,
+  labelRenderedSizeThreshold: 12,
+  enableEdgeEvents: true,
+  labelColor: {
+    color: '#000',
+    attribute: 'labelColor'
+  },
+  edgeLabelColor: {
+    color: '#000',
+    attribute: 'labelColor'
+  },
+  edgeLabelSize: 8,
+  labelSize: 12
+  // minEdgeThickness: 2
+  // labelFont: 'Lato, sans-serif'
+}
+
+const GraphEvents = () => {
+  const registerEvents = useRegisterEvents()
+  const sigma = useSigma()
+  const [draggedNode, setDraggedNode] = useState<string | null>(null)
+
+  useEffect(() => {
+    // Register the events
+    registerEvents({
+      downNode: (e) => {
+        setDraggedNode(e.node)
+        sigma.getGraph().setNodeAttribute(e.node, 'highlighted', true)
+      },
+      // On mouse move, if the drag mode is enabled, we change the position of the draggedNode
+      mousemovebody: (e) => {
+        if (!draggedNode) return
+        // Get new position of node
+        const pos = sigma.viewportToGraph(e)
+        sigma.getGraph().setNodeAttribute(draggedNode, 'x', pos.x)
+        sigma.getGraph().setNodeAttribute(draggedNode, 'y', pos.y)
+
+        // Prevent sigma to move camera:
+        e.preventSigmaDefault()
+        e.original.preventDefault()
+        e.original.stopPropagation()
+      },
+      // On mouse up, we reset the autoscale and the dragging mode
+      mouseup: () => {
+        if (draggedNode) {
+          setDraggedNode(null)
+          sigma.getGraph().removeNodeAttribute(draggedNode, 'highlighted')
+        }
+      },
+      // Disable the autoscale at the first down interaction
+      mousedown: () => {
+        if (!sigma.getCustomBBox()) sigma.setCustomBBox(sigma.getBBox())
+      }
+    })
+  }, [registerEvents, sigma, draggedNode])
+
+  return null
+}
+
+export const GraphViewer = () => {
+  const [selectedNode, setSelectedNode] = useState<string | null>(null)
+  const [focusedNode, setFocusedNode] = useState<string | null>(null)
+  const [sigmaSettings, setSigmaSettings] = useState(defaultSigmaSettings)
+  const [autoMoveToFocused, setAutoMoveToFocused] = useState(false)
+
+  const enableEdgeEvents = useSettingsStore.use.enableEdgeEvents()
+  const enableNodeDrag = useSettingsStore.use.enableNodeDrag()
+  const renderEdgeLabels = useSettingsStore.use.showEdgeLabel()
+
+  useEffect(() => {
+    setSigmaSettings({
+      ...defaultSigmaSettings,
+      enableEdgeEvents,
+      renderEdgeLabels
+    })
+  }, [enableEdgeEvents, renderEdgeLabels])
+
+  const onFocus = useCallback(
+    (value: GraphSearchOption | null) => {
+      if (value === null) setFocusedNode(null)
+      else if (value.type === 'nodes') setFocusedNode(value.id)
+    },
+    [setFocusedNode]
+  )
+
+  const onSelect = useCallback(
+    (value: GraphSearchOption | null) => {
+      if (value === null) setSelectedNode(null)
+      else if (value.type === 'nodes') {
+        setAutoMoveToFocused(true)
+        setSelectedNode(value.id)
+        setTimeout(() => setAutoMoveToFocused(false), 100)
+      }
+    },
+    [setSelectedNode, setAutoMoveToFocused]
+  )
+
+  return (
+    <SigmaContainer settings={sigmaSettings} className="!bg-background !size-full overflow-hidden">
+      <GraphControl
+        selectedNode={selectedNode}
+        setSelectedNode={setSelectedNode}
+        focusedNode={focusedNode}
+        setFocusedNode={setFocusedNode}
+      />
+
+      {enableNodeDrag && <GraphEvents />}
+
+      <FocusOnNode node={focusedNode ?? selectedNode} move={autoMoveToFocused} />
+
+      <div className="absolute top-2 right-2">
+        <GraphSearch
+          type="nodes"
+          value={selectedNode ? { type: 'nodes', id: selectedNode } : null}
+          onFocus={onFocus}
+          onChange={onSelect}
+        />
+      </div>
+
+      <div className="bg-background/20 absolute bottom-2 left-2 flex flex-col rounded-xl border-2 backdrop-blur-lg">
+        <Settings />
+        <ZoomControl />
+        <LayoutsControl />
+        <FullScreenControl />
+        <ThemeToggle />
+      </div>
+
+      {/* <div className="absolute bottom-2 right-2 flex flex-col rounded-xl border-2">
+        <MiniMap width="100px" height="100px" />
+      </div> */}
+    </SigmaContainer>
+  )
+}
--- a/lightrag/api/graph_viewer_webui/src/components/FocusOnNode.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/FocusOnNode.tsx
@@ -0,0 +1,27 @@
+import { useCamera, useSigma } from '@react-sigma/core'
+import { useEffect } from 'react'
+
+/**
+ * Component that highlights a node and centers the camera on it.
+ */
+const FocusOnNode = ({ node, move }: { node: string | null; move?: boolean }) => {
+  const sigma = useSigma()
+  const { gotoNode } = useCamera()
+
+  /**
+   * When the selected item changes, highlighted the node and center the camera on it.
+   */
+  useEffect(() => {
+    if (!node) return
+    sigma.getGraph().setNodeAttribute(node, 'highlighted', true)
+    if (move) gotoNode(node)
+
+    return () => {
+      sigma.getGraph().setNodeAttribute(node, 'highlighted', false)
+    }
+  }, [node, move, sigma, gotoNode])
+
+  return null
+}
+
+export default FocusOnNode
--- a/lightrag/api/graph_viewer_webui/src/components/FullScreenControl.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/FullScreenControl.tsx
@@ -0,0 +1,27 @@
+import { useFullScreen } from '@react-sigma/core'
+import { MaximizeIcon, MinimizeIcon } from 'lucide-react'
+import { controlButtonVariant } from '@/lib/constants'
+import Button from '@/components/ui/Button'
+
+/**
+ * Component that toggles full screen mode.
+ */
+const FullScreenControl = () => {
+  const { isFullScreen, toggle } = useFullScreen()
+
+  return (
+    <>
+      {isFullScreen ? (
+        <Button variant={controlButtonVariant} onClick={toggle} tooltip="Windowed">
+          <MinimizeIcon />
+        </Button>
+      ) : (
+        <Button variant={controlButtonVariant} onClick={toggle} tooltip="Full Screen">
+          <MaximizeIcon />
+        </Button>
+      )}
+    </>
+  )
+}
+
+export default FullScreenControl
--- a/lightrag/api/graph_viewer_webui/src/components/GraphControl.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/GraphControl.tsx
@@ -0,0 +1,194 @@
+import { useLoadGraph, useRegisterEvents, useSetSettings, useSigma } from '@react-sigma/core'
+// import { useLayoutCircular } from '@react-sigma/layout-circular'
+import { useLayoutForceAtlas2 } from '@react-sigma/layout-forceatlas2'
+import { useEffect, useState } from 'react'
+
+// import useRandomGraph, { EdgeType, NodeType } from '@/hooks/useRandomGraph'
+import useLightragGraph, { EdgeType, NodeType } from '@/hooks/useLightragGraph'
+import useTheme from '@/hooks/useTheme'
+import * as Constants from '@/lib/constants'
+import { useSettingsStore } from '@/lib/settings'
+
+const isButtonPressed = (ev: MouseEvent | TouchEvent) => {
+  if (ev.type.startsWith('mouse')) {
+    if ((ev as MouseEvent).buttons !== 0) {
+      return true
+    }
+  }
+  return false
+}
+
+const GraphControl = ({
+  disableHoverEffect,
+  selectedNode,
+  setSelectedNode,
+  focusedNode,
+  setFocusedNode
+}: {
+  disableHoverEffect?: boolean
+  selectedNode: string | null
+  setSelectedNode: (node: string | null) => void
+  focusedNode: string | null
+  setFocusedNode: (node: string | null) => void
+}) => {
+  const { lightrageGraph } = useLightragGraph()
+  const sigma = useSigma<NodeType, EdgeType>()
+  const registerEvents = useRegisterEvents<NodeType, EdgeType>()
+  const setSettings = useSetSettings<NodeType, EdgeType>()
+  const loadGraph = useLoadGraph<NodeType, EdgeType>()
+  const { assign: assignLayout } = useLayoutForceAtlas2({
+    iterations: 20
+  })
+  const [focusedEdge, setfocusedEdge] = useState<string | null>(null)
+  const [selectedEdge, setSelectedEdge] = useState<string | null>(null)
+
+  const { theme } = useTheme()
+  const hideUnselectedEdges = useSettingsStore.use.enableHideUnselectedEdges()
+
+  /**
+   * When component mount
+   * => load the graph
+   */
+  useEffect(() => {
+    // Create & load the graph
+    const graph = lightrageGraph()
+    loadGraph(graph)
+    if (!(graph as any).__force_applied) {
+      assignLayout()
+      Object.assign(graph, { __force_applied: true })
+    }
+
+    // Register the events
+    registerEvents({
+      enterNode: (event) => {
+        if (!isButtonPressed(event.event.original)) {
+          setFocusedNode(event.node)
+        }
+      },
+      leaveNode: (event) => {
+        if (!isButtonPressed(event.event.original)) {
+          setFocusedNode(null)
+        }
+      },
+      clickNode: (event) => {
+        setSelectedNode(event.node)
+        setSelectedEdge(null)
+      },
+      clickEdge: (event) => {
+        setSelectedEdge(event.edge)
+        setSelectedNode(null)
+      },
+      enterEdge: (event) => {
+        if (!isButtonPressed(event.event.original)) {
+          setfocusedEdge(event.edge)
+        }
+      },
+      leaveEdge: (event) => {
+        if (!isButtonPressed(event.event.original)) {
+          setfocusedEdge(null)
+        }
+      },
+      clickStage: () => {
+        setSelectedEdge(null)
+        setSelectedNode(null)
+      }
+    })
+  }, [assignLayout, loadGraph, registerEvents, lightrageGraph, setFocusedNode, setSelectedNode])
+
+  /**
+   * When component mount or hovered node change
+   * => Setting the sigma reducers
+   */
+  useEffect(() => {
+    const isDarkTheme = theme === 'dark'
+    const labelColor = isDarkTheme ? Constants.labelColorDarkTheme : undefined
+    const edgeColor = isDarkTheme ? Constants.edgeColorDarkTheme : undefined
+
+    setSettings({
+      nodeReducer: (node, data) => {
+        const graph = sigma.getGraph()
+        const newData: NodeType & {
+          labelColor?: string
+          borderColor?: string
+        } = { ...data, highlighted: data.highlighted || false, labelColor }
+
+        if (!disableHoverEffect) {
+          newData.highlighted = false
+          const _focusedNode = focusedNode || selectedNode
+          const _focusedEdge = focusedEdge || selectedEdge
+
+          if (_focusedNode) {
+            if (node === _focusedNode || graph.neighbors(_focusedNode).includes(node)) {
+              newData.highlighted = true
+              if (node === selectedNode) {
+                newData.borderColor = Constants.nodeBorderColorSelected
+              }
+            }
+          } else if (_focusedEdge) {
+            if (graph.extremities(_focusedEdge).includes(node)) {
+              newData.highlighted = true
+              newData.size = 3
+            }
+          } else {
+            return newData
+          }
+
+          if (newData.highlighted) {
+            if (isDarkTheme) {
+              newData.labelColor = Constants.LabelColorHighlightedDarkTheme
+            }
+          } else {
+            newData.color = Constants.nodeColorDisabled
+          }
+        }
+        return newData
+      },
+      edgeReducer: (edge, data) => {
+        const graph = sigma.getGraph()
+        const newData = { ...data, hidden: false, labelColor, color: edgeColor }
+
+        if (!disableHoverEffect) {
+          const _focusedNode = focusedNode || selectedNode
+
+          if (_focusedNode) {
+            if (hideUnselectedEdges) {
+              if (!graph.extremities(edge).includes(_focusedNode)) {
+                newData.hidden = true
+              }
+            } else {
+              if (graph.extremities(edge).includes(_focusedNode)) {
+                newData.color = Constants.edgeColorHighlighted
+              }
+            }
+          } else {
+            if (focusedEdge || selectedEdge) {
+              if (edge === selectedEdge) {
+                newData.color = Constants.edgeColorSelected
+              } else if (edge === focusedEdge) {
+                newData.color = Constants.edgeColorHighlighted
+              } else if (hideUnselectedEdges) {
+                newData.hidden = true
+              }
+            }
+          }
+        }
+        return newData
+      }
+    })
+  }, [
+    selectedNode,
+    focusedNode,
+    selectedEdge,
+    focusedEdge,
+    setSettings,
+    sigma,
+    disableHoverEffect,
+    theme,
+    hideUnselectedEdges
+  ])
+
+  return null
+}
+
+export default GraphControl
+
--- a/lightrag/api/graph_viewer_webui/src/components/GraphSearch.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/GraphSearch.tsx
@@ -0,0 +1,103 @@
+import { FC, useCallback } from 'react'
+import {
+  EdgeById,
+  NodeById,
+  useGraphSearch,
+  GraphSearchInputProps,
+  GraphSearchContextProvider,
+  GraphSearchContextProviderProps
+} from '@react-sigma/graph-search'
+import { AsyncSelect } from '@/components/ui/AsyncSelect'
+import { searchResultLimit } from '@/lib/constants'
+
+interface OptionItem {
+  id: string
+  type: 'nodes' | 'edges' | 'message'
+  message?: string
+}
+
+function OptionComponent(item: OptionItem) {
+  return (
+    <div>
+      {item.type === 'nodes' && <NodeById id={item.id} />}
+      {item.type === 'edges' && <EdgeById id={item.id} />}
+      {item.type === 'message' && <div>{item.message}</div>}
+    </div>
+  )
+}
+
+const messageId = '__message_item'
+
+/**
+ * Component thats display the search input.
+ */
+export const GraphSearchInput = ({
+  onChange,
+  onFocus,
+  type,
+  value
+}: {
+  onChange: GraphSearchInputProps['onChange']
+  onFocus?: GraphSearchInputProps['onFocus']
+  type?: GraphSearchInputProps['type']
+  value?: GraphSearchInputProps['value']
+}) => {
+  const { search } = useGraphSearch()
+
+  /**
+   * Loading the options while the user is typing.
+   */
+  const loadOptions = useCallback(
+    async (query?: string): Promise<OptionItem[]> => {
+      if (onFocus) onFocus(null)
+      if (!query) return []
+      const result = (await search(query, type)) as OptionItem[]
+
+      // prettier-ignore
+      return result.length <= searchResultLimit
+        ? result
+        : [
+          ...result.slice(0, searchResultLimit),
+          {
+            type: 'message',
+            id: messageId,
+            message: `And ${result.length - searchResultLimit} others`
+          }
+        ]
+    },
+    [type, search, onFocus]
+  )
+
+  return (
+    <AsyncSelect
+      className="w-52 rounded-xl border-1 backdrop-blur-lg"
+      fetcher={loadOptions}
+      renderOption={OptionComponent}
+      getOptionValue={(item) => item.id}
+      value={value && value.type !== 'message' ? value.id : null}
+      onChange={(id) => {
+        if (id !== messageId && type) onChange(id ? { id, type } : null)
+      }}
+      onFocus={(id) => {
+        if (id !== messageId && onFocus && type) onFocus(id ? { id, type } : null)
+      }}
+      label={'item'}
+      preload={false}
+      placeholder="Type search here..."
+    />
+  )
+}
+
+/**
+ * Component that display the search.
+ */
+const GraphSearch: FC<GraphSearchInputProps & GraphSearchContextProviderProps> = ({
+  minisearchOptions,
+  ...props
+}) => (
+  <GraphSearchContextProvider minisearchOptions={minisearchOptions}>
+    <GraphSearchInput {...props} />
+  </GraphSearchContextProvider>
+)
+
+export default GraphSearch
--- a/lightrag/api/graph_viewer_webui/src/components/LayoutsControl.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/LayoutsControl.tsx
@@ -0,0 +1,177 @@
+import { useSigma } from '@react-sigma/core'
+import { animateNodes } from 'sigma/utils'
+import { useLayoutCirclepack } from '@react-sigma/layout-circlepack'
+import { useLayoutCircular } from '@react-sigma/layout-circular'
+import { LayoutHook, LayoutWorkerHook, WorkerLayoutControlProps } from '@react-sigma/layout-core'
+import { useLayoutForce, useWorkerLayoutForce } from '@react-sigma/layout-force'
+import { useLayoutForceAtlas2, useWorkerLayoutForceAtlas2 } from '@react-sigma/layout-forceatlas2'
+import { useLayoutNoverlap, useWorkerLayoutNoverlap } from '@react-sigma/layout-noverlap'
+import { useLayoutRandom } from '@react-sigma/layout-random'
+import { useCallback, useMemo, useState, useEffect } from 'react'
+
+import Button from '@/components/ui/Button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover'
+import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui/Command'
+import { controlButtonVariant } from '@/lib/constants'
+
+import { GripIcon, PlayIcon, PauseIcon } from 'lucide-react'
+
+type LayoutName =
+  | 'Circular'
+  | 'Circlepack'
+  | 'Random'
+  | 'Noverlaps'
+  | 'Force Directed'
+  | 'Force Atlas'
+
+const WorkerLayoutControl = ({ layout, autoRunFor }: WorkerLayoutControlProps) => {
+  const sigma = useSigma()
+  const { stop, start, isRunning } = layout
+
+  /**
+   * Init component when Sigma or component settings change.
+   */
+  useEffect(() => {
+    if (!sigma) {
+      return
+    }
+
+    // we run the algo
+    let timeout: number | null = null
+    if (autoRunFor !== undefined && autoRunFor > -1 && sigma.getGraph().order > 0) {
+      start()
+      // set a timeout to stop it
+      timeout =
+        autoRunFor > 0
+          ? window.setTimeout(() => { stop() }, autoRunFor) // prettier-ignore
+          : null
+    }
+
+    //cleaning
+    return () => {
+      stop()
+      if (timeout) {
+        clearTimeout(timeout)
+      }
+    }
+  }, [autoRunFor, start, stop, sigma])
+
+  return (
+    <Button
+      onClick={() => (isRunning ? stop() : start())}
+      tooltip={isRunning ? 'Stop the layout animation' : 'Start the layout animation'}
+      variant={controlButtonVariant}
+    >
+      {isRunning ? <PauseIcon /> : <PlayIcon />}
+    </Button>
+  )
+}
+
+/**
+ * Component that controls the layout of the graph.
+ */
+const LayoutsControl = () => {
+  const sigma = useSigma()
+  const [layout, setLayout] = useState<LayoutName>('Circular')
+  const [opened, setOpened] = useState<boolean>(false)
+
+  const layoutCircular = useLayoutCircular()
+  const layoutCirclepack = useLayoutCirclepack()
+  const layoutRandom = useLayoutRandom()
+  const layoutNoverlap = useLayoutNoverlap({ settings: { margin: 1 } })
+  const layoutForce = useLayoutForce({ maxIterations: 20 })
+  const layoutForceAtlas2 = useLayoutForceAtlas2({ iterations: 20 })
+  const workerNoverlap = useWorkerLayoutNoverlap()
+  const workerForce = useWorkerLayoutForce()
+  const workerForceAtlas2 = useWorkerLayoutForceAtlas2()
+
+  const layouts = useMemo(() => {
+    return {
+      Circular: {
+        layout: layoutCircular
+      },
+      Circlepack: {
+        layout: layoutCirclepack
+      },
+      Random: {
+        layout: layoutRandom
+      },
+      Noverlaps: {
+        layout: layoutNoverlap,
+        worker: workerNoverlap
+      },
+      'Force Directed': {
+        layout: layoutForce,
+        worker: workerForce
+      },
+      'Force Atlas': {
+        layout: layoutForceAtlas2,
+        worker: workerForceAtlas2
+      }
+    } as { [key: string]: { layout: LayoutHook; worker?: LayoutWorkerHook } }
+  }, [
+    layoutCirclepack,
+    layoutCircular,
+    layoutForce,
+    layoutForceAtlas2,
+    layoutNoverlap,
+    layoutRandom,
+    workerForce,
+    workerNoverlap,
+    workerForceAtlas2
+  ])
+
+  const runLayout = useCallback(
+    (newLayout: LayoutName) => {
+      console.debug(newLayout)
+      const { positions } = layouts[newLayout].layout
+      animateNodes(sigma.getGraph(), positions(), { duration: 500 })
+      setLayout(newLayout)
+    },
+    [layouts, sigma]
+  )
+
+  return (
+    <>
+      <div>
+        {layouts[layout] && 'worker' in layouts[layout] && (
+          <WorkerLayoutControl layout={layouts[layout].worker!} />
+        )}
+      </div>
+      <div>
+        <Popover open={opened} onOpenChange={setOpened}>
+          <PopoverTrigger asChild>
+            <Button
+              variant={controlButtonVariant}
+              onClick={() => setOpened((e: boolean) => !e)}
+              tooltip="Layout Graph"
+            >
+              <GripIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent side="right" align="center" className="p-1">
+            <Command>
+              <CommandList>
+                <CommandGroup>
+                  {Object.keys(layouts).map((name) => (
+                    <CommandItem
+                      onSelect={() => {
+                        runLayout(name as LayoutName)
+                      }}
+                      key={name}
+                      className="cursor-pointer text-xs"
+                    >
+                      {name}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              </CommandList>
+            </Command>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </>
+  )
+}
+
+export default LayoutsControl
--- a/lightrag/api/graph_viewer_webui/src/components/Settings.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/Settings.tsx
@@ -0,0 +1,102 @@
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/Popover'
+import { Checkbox } from '@/components/ui/Checkbox'
+import Button from '@/components/ui/Button'
+import { useState, useCallback } from 'react'
+import { controlButtonVariant } from '@/lib/constants'
+import { useSettingsStore } from '@/lib/settings'
+
+import { SettingsIcon } from 'lucide-react'
+
+/**
+ * Component that displays a checkbox with a label.
+ */
+const LabeledCheckBox = ({
+  checked,
+  onCheckedChange,
+  label
+}: {
+  checked: boolean
+  onCheckedChange: () => void
+  label: string
+}) => {
+  return (
+    <div className="flex gap-2">
+      <Checkbox checked={checked} onCheckedChange={onCheckedChange} />
+      <label
+        htmlFor="terms"
+        className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+      >
+        {label}
+      </label>
+    </div>
+  )
+}
+
+/**
+ * Component that displays a popover with settings options.
+ */
+export default function Settings() {
+  const [opened, setOpened] = useState<boolean>(false)
+
+  const enableEdgeEvents = useSettingsStore.use.enableEdgeEvents()
+  const enableNodeDrag = useSettingsStore.use.enableNodeDrag()
+  const enableHideUnselectedEdges = useSettingsStore.use.enableHideUnselectedEdges()
+  const showEdgeLabel = useSettingsStore.use.showEdgeLabel()
+
+  const setEnableNodeDrag = useCallback(
+    () => useSettingsStore.setState((pre) => ({ enableNodeDrag: !pre.enableNodeDrag })),
+    []
+  )
+  const setEnableEdgeEvents = useCallback(
+    () => useSettingsStore.setState((pre) => ({ enableEdgeEvents: !pre.enableEdgeEvents })),
+    []
+  )
+  const setEnableHideUnselectedEdges = useCallback(
+    () =>
+      useSettingsStore.setState((pre) => ({
+        enableHideUnselectedEdges: !pre.enableHideUnselectedEdges
+      })),
+    []
+  )
+  const setShowEdgeLabel = useCallback(
+    () =>
+      useSettingsStore.setState((pre) => ({
+        showEdgeLabel: !pre.showEdgeLabel
+      })),
+    []
+  )
+
+  return (
+    <Popover open={opened} onOpenChange={setOpened}>
+      <PopoverTrigger asChild>
+        <Button variant={controlButtonVariant} tooltip="Settings">
+          <SettingsIcon />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent side="right" align="start" className="p-2">
+        <div className="flex flex-col gap-2">
+          <LabeledCheckBox
+            checked={enableNodeDrag}
+            onCheckedChange={setEnableNodeDrag}
+            label="Node Draggable"
+          />
+          <LabeledCheckBox
+            checked={enableEdgeEvents}
+            onCheckedChange={setEnableEdgeEvents}
+            label="Edge Events"
+          />
+          <LabeledCheckBox
+            checked={enableHideUnselectedEdges}
+            onCheckedChange={setEnableHideUnselectedEdges}
+            label="Hide Unselected Edges"
+          />
+          <LabeledCheckBox
+            checked={showEdgeLabel}
+            onCheckedChange={setShowEdgeLabel}
+            label="Show Edge Label"
+          />
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
--- a/lightrag/api/graph_viewer_webui/src/components/ThemeProvider.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/ThemeProvider.tsx
@@ -0,0 +1,57 @@
+import { createContext, useEffect, useState } from 'react'
+import { Theme, useSettingsStore } from '@/lib/settings'
+
+type ThemeProviderProps = {
+  children: React.ReactNode
+}
+
+type ThemeProviderState = {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+}
+
+const initialState: ThemeProviderState = {
+  theme: 'system',
+  setTheme: () => null
+}
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
+
+/**
+ * Component that provides the theme state and setter function to its children.
+ */
+export default function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(useSettingsStore.getState().theme)
+
+  useEffect(() => {
+    const root = window.document.documentElement
+    root.classList.remove('light', 'dark')
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light'
+      root.classList.add(systemTheme)
+      setTheme(systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+  }, [theme])
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      useSettingsStore.getState().setTheme(theme)
+      setTheme(theme)
+    }
+  }
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  )
+}
+
+export { ThemeProviderContext }
--- a/lightrag/api/graph_viewer_webui/src/components/ThemeToggle.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/ThemeToggle.tsx
@@ -0,0 +1,27 @@
+import Button from '@/components/ui/Button'
+import useTheme from '@/hooks/useTheme'
+import { MoonIcon, SunIcon } from 'lucide-react'
+import { useCallback } from 'react'
+import { controlButtonVariant } from '@/lib/constants'
+
+/**
+ * Component that toggles the theme between light and dark.
+ */
+export default function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const setLight = useCallback(() => setTheme('light'), [setTheme])
+  const setDark = useCallback(() => setTheme('dark'), [setTheme])
+
+  if (theme === 'dark') {
+    return (
+      <Button onClick={setLight} variant={controlButtonVariant} tooltip="Switch to light theme">
+        <MoonIcon />
+      </Button>
+    )
+  }
+  return (
+    <Button onClick={setDark} variant={controlButtonVariant} tooltip="Switch to dark theme">
+      <SunIcon />
+    </Button>
+  )
+}
--- a/lightrag/api/graph_viewer_webui/src/components/ZoomControl.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/ZoomControl.tsx
@@ -0,0 +1,33 @@
+import { useCamera } from '@react-sigma/core'
+import { useCallback } from 'react'
+import Button from '@/components/ui/Button'
+import { ZoomInIcon, ZoomOutIcon, FullscreenIcon } from 'lucide-react'
+import { controlButtonVariant } from '@/lib/constants'
+
+
+/**
+ * Component that provides zoom controls for the graph viewer.
+ */
+const ZoomControl = () => {
+  const { zoomIn, zoomOut, reset } = useCamera({ duration: 200, factor: 1.5 })
+
+  const handleZoomIn = useCallback(() => zoomIn(), [zoomIn])
+  const handleZoomOut = useCallback(() => zoomOut(), [zoomOut])
+  const handleResetZoom = useCallback(() => reset(), [reset])
+
+  return (
+    <>
+      <Button variant={controlButtonVariant} onClick={handleZoomIn} tooltip="Zoom In">
+        <ZoomInIcon />
+      </Button>
+      <Button variant={controlButtonVariant} onClick={handleZoomOut} tooltip="Zoom Out">
+        <ZoomOutIcon />
+      </Button>
+      <Button variant={controlButtonVariant} onClick={handleResetZoom} tooltip="Reset Zoom">
+        <FullscreenIcon />
+      </Button>
+    </>
+  )
+}
+
+export default ZoomControl
--- a/lightrag/api/graph_viewer_webui/src/components/ui/AsyncSelect.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/ui/AsyncSelect.tsx
@@ -0,0 +1,238 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Loader2 } from 'lucide-react'
+import { useDebounce } from '@/hooks/useDebounce'
+
+import { cn } from '@/lib/utils'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/Command'
+
+export interface Option {
+  value: string
+  label: string
+  disabled?: boolean
+  description?: string
+  icon?: React.ReactNode
+}
+
+export interface AsyncSelectProps<T> {
+  /** Async function to fetch options */
+  fetcher: (query?: string) => Promise<T[]>
+  /** Preload all data ahead of time */
+  preload?: boolean
+  /** Function to filter options */
+  filterFn?: (option: T, query: string) => boolean
+  /** Function to render each option */
+  renderOption: (option: T) => React.ReactNode
+  /** Function to get the value from an option */
+  getOptionValue: (option: T) => string
+  /** Custom not found message */
+  notFound?: React.ReactNode
+  /** Custom loading skeleton */
+  loadingSkeleton?: React.ReactNode
+  /** Currently selected value */
+  value: string | null
+  /** Callback when selection changes */
+  onChange: (value: string) => void
+  /** Callback when focus changes */
+  onFocus: (value: string) => void
+  /** Label for the select field */
+  label: string
+  /** Placeholder text when no selection */
+  placeholder?: string
+  /** Disable the entire select */
+  disabled?: boolean
+  /** Custom width for the popover */
+  width?: string | number
+  /** Custom class names */
+  className?: string
+  /** Custom trigger button class names */
+  triggerClassName?: string
+  /** Custom no results message */
+  noResultsMessage?: string
+  /** Allow clearing the selection */
+  clearable?: boolean
+}
+
+export function AsyncSelect<T>({
+  fetcher,
+  preload,
+  filterFn,
+  renderOption,
+  getOptionValue,
+  notFound,
+  loadingSkeleton,
+  label,
+  placeholder = 'Select...',
+  value,
+  onChange,
+  onFocus,
+  disabled = false,
+  className,
+  noResultsMessage
+}: AsyncSelectProps<T>) {
+  const [mounted, setMounted] = useState(false)
+  const [open, setOpen] = useState(false)
+  const [options, setOptions] = useState<T[]>([])
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [selectedValue, setSelectedValue] = useState(value)
+  const [focusedValue, setFocusedValue] = useState<string | null>(null)
+  const [searchTerm, setSearchTerm] = useState('')
+  const debouncedSearchTerm = useDebounce(searchTerm, preload ? 0 : 150)
+  const [originalOptions, setOriginalOptions] = useState<T[]>([])
+
+  useEffect(() => {
+    setMounted(true)
+    setSelectedValue(value)
+  }, [value])
+
+  // Effect for initial fetch
+  useEffect(() => {
+    const initializeOptions = async () => {
+      try {
+        setLoading(true)
+        setError(null)
+        // If we have a value, use it for the initial search
+        const data = value !== null ? await fetcher(value) : []
+        setOriginalOptions(data)
+        setOptions(data)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch options')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    if (!mounted) {
+      initializeOptions()
+    }
+  }, [mounted, fetcher, value])
+
+  useEffect(() => {
+    const fetchOptions = async () => {
+      try {
+        setLoading(true)
+        setError(null)
+        const data = await fetcher(debouncedSearchTerm)
+        setOriginalOptions(data)
+        setOptions(data)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to fetch options')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    if (!mounted) {
+      fetchOptions()
+    } else if (!preload) {
+      fetchOptions()
+    } else if (preload) {
+      if (debouncedSearchTerm) {
+        setOptions(
+          originalOptions.filter((option) =>
+            filterFn ? filterFn(option, debouncedSearchTerm) : true
+          )
+        )
+      } else {
+        setOptions(originalOptions)
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetcher, debouncedSearchTerm, mounted, preload, filterFn])
+
+  const handleSelect = useCallback(
+    (currentValue: string) => {
+      console.log('handleSelect')
+      if (currentValue !== selectedValue) {
+        setSelectedValue(currentValue)
+        onChange(currentValue)
+      }
+      setOpen(false)
+    },
+    [selectedValue, onChange]
+  )
+
+  const handleFocus = useCallback(
+    (currentValue: string) => {
+      if (currentValue !== focusedValue) {
+        setFocusedValue(currentValue)
+        onFocus(currentValue)
+      }
+    },
+    [focusedValue, onFocus]
+  )
+
+  return (
+    <div
+      className={cn(disabled && 'cursor-not-allowed opacity-50', className)}
+      onFocus={() => setOpen(true)}
+      onBlur={() => setOpen(false)}
+    >
+      <Command shouldFilter={false} className="bg-transparent">
+        <div className="relative w-full">
+          <CommandInput
+            placeholder={placeholder}
+            value={searchTerm}
+            onValueChange={(value) => {
+              setSearchTerm(value)
+              if (value && !open) setOpen(true)
+            }}
+          />
+          {loading && options.length > 0 && (
+            <div className="absolute top-1/2 right-2 flex -translate-y-1/2 transform items-center">
+              <Loader2 className="h-4 w-4 animate-spin" />
+            </div>
+          )}
+        </div>
+        <CommandList className="max-h-auto" hidden={!open}>
+          {error && <div className="text-destructive p-4 text-center">{error}</div>}
+          {loading && options.length === 0 && (loadingSkeleton || <DefaultLoadingSkeleton />)}
+          {!loading &&
+            !error &&
+            options.length === 0 &&
+            (notFound || (
+              <CommandEmpty>{noResultsMessage ?? `No ${label.toLowerCase()} found.`}</CommandEmpty>
+            ))}
+          <CommandGroup>
+            {options.map((option, idx) => (
+              <>
+                <CommandItem
+                  key={getOptionValue(option)}
+                  value={getOptionValue(option)}
+                  onSelect={handleSelect}
+                  onMouseEnter={() => handleFocus(getOptionValue(option))}
+                >
+                  {renderOption(option)}
+                </CommandItem>
+                {idx !== options.length - 1 && <div className="bg-foreground/10 h-[1px]" />}
+              </>
+            ))}
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </div>
+  )
+}
+
+function DefaultLoadingSkeleton() {
+  return (
+    <CommandGroup>
+      <CommandItem disabled>
+        <div className="flex w-full items-center gap-2">
+          <div className="bg-muted h-6 w-6 animate-pulse rounded-full" />
+          <div className="flex flex-1 flex-col gap-1">
+            <div className="bg-muted h-4 w-24 animate-pulse rounded" />
+            <div className="bg-muted h-3 w-16 animate-pulse rounded" />
+          </div>
+        </div>
+      </CommandItem>
+    </CommandGroup>
+  )
+}
--- a/lightrag/api/graph_viewer_webui/src/components/ui/Button.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/ui/Button.tsx
@@ -0,0 +1,77 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/Tooltip'
+import { cn } from '@/lib/utils'
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline'
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
+
+interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  tooltip?: string
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, tooltip, side = 'right', asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    if (!tooltip) {
+      return (
+        <Comp
+          className={cn(buttonVariants({ variant, size, className }), 'cursor-pointer')}
+          ref={ref}
+          {...props}
+        />
+      )
+    }
+
+    return (
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Comp
+              className={cn(buttonVariants({ variant, size, className }), 'cursor-pointer')}
+              ref={ref}
+              {...props}
+            />
+          </TooltipTrigger>
+          <TooltipContent side={side}>{tooltip}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export type ButtonVariantType = Exclude<
+  NonNullable<Parameters<typeof buttonVariants>[0]>['variant'],
+  undefined
+>
+
+export default Button
--- a/lightrag/api/graph_viewer_webui/src/components/ui/Checkbox.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/ui/Checkbox.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { Check } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Checkbox = React.forwardRef<
+  React.ComponentRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'peer border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground h-4 w-4 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
--- a/lightrag/api/graph_viewer_webui/src/components/ui/Command.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/ui/Command.tsx
@@ -0,0 +1,143 @@
+import * as React from 'react'
+import { type DialogProps } from '@radix-ui/react-dialog'
+import { Command as CommandPrimitive } from 'cmdk'
+import { Search } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+import { Dialog, DialogContent } from './Dialog'
+
+const Command = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  // eslint-disable-next-line react/no-unknown-property
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('bg-border -mx-1 h-px', className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ComponentRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      // eslint-disable-next-line @stylistic/js/quotes
+      "data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = 'CommandShortcut'
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator
+}
--- a/lightrag/api/graph_viewer_webui/src/components/ui/Dialog.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/ui/Dialog.tsx
@@ -0,0 +1,102 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ComponentRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg leading-none font-semibold tracking-tight', className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription
+}
--- a/lightrag/api/graph_viewer_webui/src/components/ui/Popover.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/ui/Popover.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+
+import { cn } from '@/lib/utils'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 rounded-md border p-4 shadow-md outline-none',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
--- a/lightrag/api/graph_viewer_webui/src/components/ui/Tooltip.tsx
+++ b/lightrag/api/graph_viewer_webui/src/components/ui/Tooltip.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '@/lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ComponentRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
--- a/lightrag/api/graph_viewer_webui/src/hooks/useDebounce.tsx
+++ b/lightrag/api/graph_viewer_webui/src/hooks/useDebounce.tsx
@@ -0,0 +1,17 @@
+import { useState, useEffect } from 'react'
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}
--- a/lightrag/api/graph_viewer_webui/src/hooks/useLightragGraph.tsx
+++ b/lightrag/api/graph_viewer_webui/src/hooks/useLightragGraph.tsx
@@ -0,0 +1,224 @@
+import Graph, { DirectedGraph } from 'graphology'
+import { useCallback, useEffect, useState } from 'react'
+import { randomColor } from '@/lib/utils'
+import * as Constants from '@/lib/constants'
+
+type RawNodeType = {
+  id: string
+  labels: string[]
+  properties: Record<string, any>
+
+  size: number
+  x: number
+  y: number
+  color: string
+
+  degree: number
+}
+
+type RawEdgeType = {
+  id: string
+  source: string
+  target: string
+  type: string
+  properties: Record<string, any>
+}
+
+class RawGraph {
+  nodes: RawNodeType[] = []
+  edges: RawEdgeType[] = []
+  nodeIdMap: Record<string, number> = {}
+  edgeIdMap: Record<string, number> = {}
+
+  getNode = (nodeId: string) => {
+    const nodeIndex = this.nodeIdMap[nodeId]
+    if (nodeIndex !== undefined) {
+      return this.nodes[nodeIndex]
+    }
+    return undefined
+  }
+
+  getEdge = (edgeId: string) => {
+    const edgeIndex = this.edgeIdMap[edgeId]
+    if (edgeIndex !== undefined) {
+      return this.edges[edgeIndex]
+    }
+    return undefined
+  }
+}
+
+const validateGraph = (graph: RawGraph) => {
+  if (!graph) {
+    return false
+  }
+  if (!Array.isArray(graph.nodes) || !Array.isArray(graph.edges)) {
+    return false
+  }
+
+  for (const node of graph.nodes) {
+    if (!node.id || !node.labels || !node.properties) {
+      return false
+    }
+  }
+
+  for (const edge of graph.edges) {
+    if (!edge.id || !edge.source || !edge.target || !edge.type || !edge.properties) {
+      return false
+    }
+  }
+
+  for (const edge of graph.edges) {
+    const source = graph.getNode(edge.source)
+    const target = graph.getNode(edge.target)
+    if (source == undefined || target == undefined) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export type NodeType = {
+  x: number
+  y: number
+  label: string
+  size: number
+  color: string
+  highlighted?: boolean
+}
+export type EdgeType = { label: string }
+
+const fetchGraph = async (label: string) => {
+  const response = await fetch(`http://localhost:9621/graphs?label=${label}`)
+  const rawData = await response.json()
+
+  let rawGraph = null
+
+  if (rawData) {
+    const nodeIdMap: Record<string, number> = {}
+    const edgeIdMap: Record<string, number> = {}
+
+    for (let i = 0; i < rawData.nodes.length; i++) {
+      const node = rawData.nodes[i]
+      nodeIdMap[node.id] = i
+
+      node.x = Math.random()
+      node.y = Math.random()
+      node.color = randomColor()
+      node.degree = 0
+      node.size = 10
+    }
+
+    for (let i = 0; i < rawData.edges.length; i++) {
+      const edge = rawData.edges[i]
+      edgeIdMap[edge.id] = i
+
+      const source = nodeIdMap[edge.source]
+      const target = nodeIdMap[edge.target]
+      if (source !== undefined && source !== undefined) {
+        const sourceNode = rawData.nodes[source]
+        const targetNode = rawData.nodes[target]
+        sourceNode.degree += 1
+        targetNode.degree += 1
+      }
+    }
+
+    // generate node size
+    let minDegree = Number.MAX_SAFE_INTEGER
+    let maxDegree = 0
+
+    for (const node of rawData.nodes) {
+      minDegree = Math.min(minDegree, node.degree)
+      maxDegree = Math.max(maxDegree, node.degree)
+    }
+    const range = maxDegree - minDegree
+    if (range > 0) {
+      const scale = Constants.maxNodeSize - Constants.minNodeSize
+      for (const node of rawData.nodes) {
+        node.size = Math.round(
+          Constants.minNodeSize + scale * Math.pow((node.degree - minDegree) / range, 0.5)
+        )
+      }
+    }
+
+    rawGraph = new RawGraph()
+    rawGraph.nodes = rawData.nodes
+    rawGraph.edges = rawData.edges
+    rawGraph.nodeIdMap = nodeIdMap
+    rawGraph.edgeIdMap = edgeIdMap
+
+    if (!validateGraph(rawGraph)) {
+      rawGraph = null
+      console.error('Invalid graph data')
+    }
+    console.log('Graph data loaded')
+  }
+
+  // console.debug({ data: JSON.parse(JSON.stringify(rawData)) })
+  return rawGraph
+}
+
+const graphCache: {
+  label: string | null
+  rawGraph: RawGraph | null
+  convertedGraph: DirectedGraph | null
+} = {
+  label: null,
+  rawGraph: null,
+  convertedGraph: null
+}
+
+const useLightrangeGraph = () => {
+  const [fetchLabel, setFetchLabel] = useState<string>('*')
+  const [rawGraph, setRawGraph] = useState<RawGraph | null>(graphCache.rawGraph)
+
+  useEffect(() => {
+    if (fetchLabel) {
+      if (graphCache.label !== fetchLabel) {
+        fetchGraph(fetchLabel).then((data) => {
+          graphCache.convertedGraph = null
+          graphCache.rawGraph = data
+          graphCache.label = fetchLabel
+          setRawGraph(data)
+        })
+      }
+    } else {
+      setRawGraph(null)
+    }
+  }, [fetchLabel, setRawGraph])
+
+  const lightrageGraph = useCallback(() => {
+    if (graphCache.convertedGraph) {
+      return graphCache.convertedGraph as Graph<NodeType, EdgeType>
+    }
+
+    // Create the graph
+    const graph = new DirectedGraph()
+
+    for (const rawNode of rawGraph?.nodes ?? []) {
+      graph.addNode(rawNode.id, {
+        label: rawNode.labels.join(' '),
+        color: rawNode.color,
+        x: rawNode.x,
+        y: rawNode.y,
+        size: rawNode.size,
+        // for node-border
+        borderColor: Constants.nodeBorderColor,
+        borderSize: 0.2
+      })
+    }
+
+    for (const rawEdge of rawGraph?.edges ?? []) {
+      graph.addDirectedEdge(rawEdge.source, rawEdge.target, {
+        label: rawEdge.type
+      })
+    }
+
+    graphCache.convertedGraph = graph
+    return graph as Graph<NodeType, EdgeType>
+  }, [rawGraph])
+
+  return { lightrageGraph, fetchLabel, setFetchLabel }
+}
+
+export default useLightrangeGraph
--- a/lightrag/api/graph_viewer_webui/src/hooks/useRandomGraph.tsx
+++ b/lightrag/api/graph_viewer_webui/src/hooks/useRandomGraph.tsx
@@ -0,0 +1,62 @@
+import { Faker, en, faker as fak } from '@faker-js/faker'
+import Graph, { UndirectedGraph } from 'graphology'
+import erdosRenyi from 'graphology-generators/random/erdos-renyi'
+import { useCallback, useEffect, useState } from 'react'
+import seedrandom from 'seedrandom'
+import { randomColor } from '@/lib/utils'
+import * as Constants from '@/lib/constants'
+
+export type NodeType = {
+  x: number
+  y: number
+  label: string
+  size: number
+  color: string
+  highlighted?: boolean
+}
+export type EdgeType = { label: string }
+
+/**
+ * The goal of this file is to seed random generators if the query params 'seed' is present.
+ */
+const useRandomGraph = () => {
+  const [faker, setFaker] = useState<Faker>(fak)
+
+  useEffect(() => {
+    // Globally seed the Math.random
+    const params = new URLSearchParams(document.location.search)
+    const seed = params.get('seed') // is the string "Jonathan"
+    if (seed) {
+      seedrandom(seed, { global: true })
+      // seed faker with the random function
+      const f = new Faker({ locale: en })
+      f.seed(Math.random())
+      setFaker(f)
+    }
+  }, [])
+
+  const randomGraph = useCallback(() => {
+    // Create the graph
+    const graph = erdosRenyi(UndirectedGraph, { order: 100, probability: 0.1 })
+    graph.nodes().forEach((node: string) => {
+      graph.mergeNodeAttributes(node, {
+        label: faker.person.fullName(),
+        size: faker.number.int({ min: Constants.minNodeSize, max: Constants.maxNodeSize }),
+        color: randomColor(),
+        x: Math.random(),
+        y: Math.random(),
+        // for node-border
+        borderColor: randomColor(),
+        borderSize: faker.number.float({ min: 0, max: 1, multipleOf: 0.1 }),
+        // for node-image
+        pictoColor: randomColor(),
+        image: faker.image.urlLoremFlickr()
+      })
+    })
+    return graph as Graph<NodeType, EdgeType>
+  }, [faker])
+
+  return { faker, randomColor, randomGraph }
+}
+
+export default useRandomGraph
--- a/lightrag/api/graph_viewer_webui/src/hooks/useTheme.tsx
+++ b/lightrag/api/graph_viewer_webui/src/hooks/useTheme.tsx
@@ -0,0 +1,12 @@
+import { useContext } from 'react'
+import { ThemeProviderContext } from '@/components/ThemeProvider'
+
+const useTheme = () => {
+  const context = useContext(ThemeProviderContext)
+
+  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider')
+
+  return context
+}
+
+export default useTheme
--- a/lightrag/api/graph_viewer_webui/src/index.css
+++ b/lightrag/api/graph_viewer_webui/src/index.css
@@ -0,0 +1,179 @@
+@import 'tailwindcss';
+
+@plugin 'tailwindcss-animate';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+
+  --color-chart-1: hsl(var(--chart-1));
+  --color-chart-2: hsl(var(--chart-2));
+  --color-chart-3: hsl(var(--chart-3));
+  --color-chart-4: hsl(var(--chart-4));
+  --color-chart-5: hsl(var(--chart-5));
+
+  --color-sidebar: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@layer utilities {
+  body {
+    font-family: Arial, Helvetica, sans-serif;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/lightrag/api/graph_viewer_webui/src/lib/constants.ts
+++ b/lightrag/api/graph_viewer_webui/src/lib/constants.ts
@@ -0,0 +1,19 @@
+import { ButtonVariantType } from '@/components/ui/Button'
+
+export const controlButtonVariant: ButtonVariantType = 'ghost'
+
+export const labelColorDarkTheme = '#B2EBF2'
+export const LabelColorHighlightedDarkTheme = '#000'
+
+export const nodeColorDisabled = '#E2E2E2'
+export const nodeBorderColor = '#EEEEEE'
+export const nodeBorderColorSelected = '#F57F17'
+
+export const edgeColorDarkTheme = '#969696'
+export const edgeColorSelected = '#F57F17'
+export const edgeColorHighlighted = '#B2EBF2'
+
+export const searchResultLimit = 20
+
+export const minNodeSize = 4
+export const maxNodeSize = 20
--- a/lightrag/api/graph_viewer_webui/src/lib/settings.ts
+++ b/lightrag/api/graph_viewer_webui/src/lib/settings.ts
@@ -0,0 +1,55 @@
+import { create, StoreApi, UseBoundStore } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware'
+
+type Theme = 'dark' | 'light' | 'system'
+
+interface SettingsState {
+  theme: Theme
+  enableNodeDrag: boolean
+  enableEdgeEvents: boolean
+  enableHideUnselectedEdges: boolean
+  showEdgeLabel: boolean
+  setTheme: (theme: Theme) => void
+}
+
+const useSettingsStoreBase = create<SettingsState>()(
+  persist(
+    (set) => ({
+      theme: 'system',
+      enableNodeDrag: true,
+      enableEdgeEvents: false,
+      enableHideUnselectedEdges: true,
+      showEdgeLabel: false,
+
+      setTheme: (theme: Theme) => set({ theme })
+    }),
+    {
+      name: 'settings-storage',
+      storage: createJSONStorage(() => localStorage),
+      version: 2,
+      migrate: (state: any, version: number) => {
+        if (version < 2) {
+          state.showEdgeLabel = false
+        }
+      }
+    }
+  )
+)
+
+type WithSelectors<S> = S extends { getState: () => infer T }
+  ? S & { use: { [K in keyof T]: () => T[K] } }
+  : never
+
+const createSelectors = <S extends UseBoundStore<StoreApi<object>>>(_store: S) => {
+  const store = _store as WithSelectors<typeof _store>
+  store.use = {}
+  for (const k of Object.keys(store.getState())) {
+    ;(store.use as any)[k] = () => store((s) => s[k as keyof typeof s])
+  }
+
+  return store
+}
+
+const useSettingsStore = createSelectors(useSettingsStoreBase)
+
+export { useSettingsStore, type Theme }
--- a/lightrag/api/graph_viewer_webui/src/lib/utils.ts
+++ b/lightrag/api/graph_viewer_webui/src/lib/utils.ts
@@ -0,0 +1,15 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function randomColor() {
+  const digits = '0123456789abcdef'
+  let code = '#'
+  for (let i = 0; i < 6; i++) {
+    code += digits.charAt(Math.floor(Math.random() * 16))
+  }
+  return code
+}
--- a/lightrag/api/graph_viewer_webui/src/main.tsx
+++ b/lightrag/api/graph_viewer_webui/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
--- a/lightrag/api/graph_viewer_webui/src/vite-env.d.ts
+++ b/lightrag/api/graph_viewer_webui/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/lightrag/api/graph_viewer_webui/tsconfig.json
+++ b/lightrag/api/graph_viewer_webui/tsconfig.json
@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/lightrag/api/graph_viewer_webui/vite.config.ts
+++ b/lightrag/api/graph_viewer_webui/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import path from 'path'
+
+import react from '@vitejs/plugin-react-swc'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src')
+    }
+  },
+  base: './'
+})
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>