Add SettingsDisplay component to show graph settings
- Create SettingsDisplay component - Display graphQueryMaxDepth and graphMinDegree - Position display at bottom-left corner
This commit is contained in:
19
lightrag_webui/src/components/graph/SettingsDisplay.tsx
Normal file
19
lightrag_webui/src/components/graph/SettingsDisplay.tsx
Normal file
@@ -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
|
@@ -17,6 +17,7 @@ import Settings from '@/components/graph/Settings'
|
|||||||
import GraphSearch from '@/components/graph/GraphSearch'
|
import GraphSearch from '@/components/graph/GraphSearch'
|
||||||
import GraphLabels from '@/components/graph/GraphLabels'
|
import GraphLabels from '@/components/graph/GraphLabels'
|
||||||
import PropertiesView from '@/components/graph/PropertiesView'
|
import PropertiesView from '@/components/graph/PropertiesView'
|
||||||
|
import SettingsDisplay from '@/components/graph/SettingsDisplay'
|
||||||
|
|
||||||
import { useSettingsStore } from '@/stores/settings'
|
import { useSettingsStore } from '@/stores/settings'
|
||||||
import { useGraphStore } from '@/stores/graph'
|
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">
|
{/* <div className="absolute bottom-2 right-2 flex flex-col rounded-xl border-2">
|
||||||
<MiniMap width="100px" height="100px" />
|
<MiniMap width="100px" height="100px" />
|
||||||
</div> */}
|
</div> */}
|
||||||
|
|
||||||
|
<SettingsDisplay />
|
||||||
</SigmaContainer>
|
</SigmaContainer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user