yangdx commited on
Commit
6fc1e73
·
1 Parent(s): 85b7cce

Add SettingsDisplay component to show graph settings

Browse files

- Create SettingsDisplay component
- Display graphQueryMaxDepth and graphMinDegree
- Position display at bottom-left corner

lightrag_webui/src/components/graph/SettingsDisplay.tsx ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import { useSettingsStore } from '@/stores/settings'
2
+
3
+ /**
4
+ * Component that displays current values of important graph settings
5
+ * Positioned to the right of the toolbar at the bottom-left corner
6
+ */
7
+ const SettingsDisplay = () => {
8
+ const graphQueryMaxDepth = useSettingsStore.use.graphQueryMaxDepth()
9
+ const graphMinDegree = useSettingsStore.use.graphMinDegree()
10
+
11
+ return (
12
+ <div className="absolute bottom-2 left-[calc(2rem+2.5rem)] flex items-center gap-2 text-xs text-gray-400">
13
+ <div>Depth: {graphQueryMaxDepth}</div>
14
+ <div>Degree: {graphMinDegree}</div>
15
+ </div>
16
+ )
17
+ }
18
+
19
+ export default SettingsDisplay
lightrag_webui/src/features/GraphViewer.tsx CHANGED
@@ -17,6 +17,7 @@ import Settings from '@/components/graph/Settings'
17
  import GraphSearch from '@/components/graph/GraphSearch'
18
  import GraphLabels from '@/components/graph/GraphLabels'
19
  import PropertiesView from '@/components/graph/PropertiesView'
 
20
 
21
  import { useSettingsStore } from '@/stores/settings'
22
  import { useGraphStore } from '@/stores/graph'
@@ -178,6 +179,8 @@ const GraphViewer = () => {
178
  {/* <div className="absolute bottom-2 right-2 flex flex-col rounded-xl border-2">
179
  <MiniMap width="100px" height="100px" />
180
  </div> */}
 
 
181
  </SigmaContainer>
182
  )
183
  }
 
17
  import GraphSearch from '@/components/graph/GraphSearch'
18
  import GraphLabels from '@/components/graph/GraphLabels'
19
  import PropertiesView from '@/components/graph/PropertiesView'
20
+ import SettingsDisplay from '@/components/graph/SettingsDisplay'
21
 
22
  import { useSettingsStore } from '@/stores/settings'
23
  import { useGraphStore } from '@/stores/graph'
 
179
  {/* <div className="absolute bottom-2 right-2 flex flex-col rounded-xl border-2">
180
  <MiniMap width="100px" height="100px" />
181
  </div> */}
182
+
183
+ <SettingsDisplay />
184
  </SigmaContainer>
185
  )
186
  }