diff --git a/lightrag_webui/src/components/graph/Settings.tsx b/lightrag_webui/src/components/graph/Settings.tsx index 67fb1ded..e65f395d 100644 --- a/lightrag_webui/src/components/graph/Settings.tsx +++ b/lightrag_webui/src/components/graph/Settings.tsx @@ -9,7 +9,7 @@ import { controlButtonVariant } from '@/lib/constants' import { useSettingsStore } from '@/stores/settings' import { useBackendState } from '@/stores/state' -import { SettingsIcon } from 'lucide-react' +import { SettingsIcon, RefreshCwIcon } from 'lucide-react' /** * Component that displays a checkbox with a label. @@ -113,6 +113,7 @@ const LabeledNumberInput = ({ export default function Settings() { const [opened, setOpened] = useState(false) const [tempApiKey, setTempApiKey] = useState('') + const refreshLayout = useSettingsStore.use.refreshLayout() const showPropertyPanel = useSettingsStore.use.showPropertyPanel() const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar() @@ -205,117 +206,127 @@ export default function Settings() { ) return ( - - - - - e.preventDefault()} + <> + + + + + + e.preventDefault()} + >
- -
e.preventDefault()}> -
- -
- -
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
e.preventDefault()}> +
+ +
+ +
+
- -
-
+
+
+ ) } diff --git a/lightrag_webui/src/stores/settings.ts b/lightrag_webui/src/stores/settings.ts index 3c99ca40..5f7bb5fe 100644 --- a/lightrag_webui/src/stores/settings.ts +++ b/lightrag_webui/src/stores/settings.ts @@ -3,12 +3,14 @@ import { persist, createJSONStorage } from 'zustand/middleware' import { createSelectors } from '@/lib/utils' import { defaultQueryLabel } from '@/lib/constants' import { Message, QueryRequest } from '@/api/lightrag' +import { useGraphStore } from '@/stores/graph' type Theme = 'dark' | 'light' | 'system' type Tab = 'documents' | 'knowledge-graph' | 'retrieval' | 'api' interface SettingsState { // Graph viewer settings + refreshLayout: () => void showPropertyPanel: boolean showNodeSearchBar: boolean @@ -57,6 +59,15 @@ const useSettingsStoreBase = create()( persist( (set) => ({ theme: 'system', + refreshLayout: () => { + const graphState = useGraphStore.getState(); + const currentGraph = graphState.sigmaGraph; + graphState.clearSelection(); + graphState.setSigmaGraph(null); + setTimeout(() => { + graphState.setSigmaGraph(currentGraph); + }, 10); + }, showPropertyPanel: true, showNodeSearchBar: true,