From c910ba1d28ea33360afcf14989d0763a34c9116c Mon Sep 17 00:00:00 2001
From: yangdx <yangdx@znipower.com>
Date: Wed, 12 Mar 2025 06:10:48 +0800
Subject: [PATCH] Add SettingsDisplay component to show graph settings

- Create SettingsDisplay component
- Display graphQueryMaxDepth and graphMinDegree
- Position display at bottom-left corner
---
 .../src/components/graph/SettingsDisplay.tsx  | 19 +++++++++++++++++++
 lightrag_webui/src/features/GraphViewer.tsx   |  3 +++
 2 files changed, 22 insertions(+)
 create mode 100644 lightrag_webui/src/components/graph/SettingsDisplay.tsx

diff --git a/lightrag_webui/src/components/graph/SettingsDisplay.tsx b/lightrag_webui/src/components/graph/SettingsDisplay.tsx
new file mode 100644
index 00000000..d946ded9
--- /dev/null
+++ b/lightrag_webui/src/components/graph/SettingsDisplay.tsx
@@ -0,0 +1,19 @@
+import { useSettingsStore } from '@/stores/settings'
+
+/**
+ * Component that displays current values of important graph settings
+ * Positioned to the right of the toolbar at the bottom-left corner
+ */
+const SettingsDisplay = () => {
+  const graphQueryMaxDepth = useSettingsStore.use.graphQueryMaxDepth()
+  const graphMinDegree = useSettingsStore.use.graphMinDegree()
+
+  return (
+    <div className="absolute bottom-2 left-[calc(2rem+2.5rem)] flex items-center gap-2 text-xs text-gray-400">
+      <div>Depth: {graphQueryMaxDepth}</div>
+      <div>Degree: {graphMinDegree}</div>
+    </div>
+  )
+}
+
+export default SettingsDisplay
diff --git a/lightrag_webui/src/features/GraphViewer.tsx b/lightrag_webui/src/features/GraphViewer.tsx
index 6d1979c5..1701636d 100644
--- a/lightrag_webui/src/features/GraphViewer.tsx
+++ b/lightrag_webui/src/features/GraphViewer.tsx
@@ -17,6 +17,7 @@ import Settings from '@/components/graph/Settings'
 import GraphSearch from '@/components/graph/GraphSearch'
 import GraphLabels from '@/components/graph/GraphLabels'
 import PropertiesView from '@/components/graph/PropertiesView'
+import SettingsDisplay from '@/components/graph/SettingsDisplay'
 
 import { useSettingsStore } from '@/stores/settings'
 import { useGraphStore } from '@/stores/graph'
@@ -178,6 +179,8 @@ const GraphViewer = () => {
       {/* <div className="absolute bottom-2 right-2 flex flex-col rounded-xl border-2">
         <MiniMap width="100px" height="100px" />
       </div> */}
+
+      <SettingsDisplay />
     </SigmaContainer>
   )
 }