Added refresh layout button to graph settings

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<boolean>(false)
   const [tempApiKey, setTempApiKey] = useState<string>('')
+  const refreshLayout = useSettingsStore.use.refreshLayout()
 
   const showPropertyPanel = useSettingsStore.use.showPropertyPanel()
   const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar()
@@ -205,6 +206,15 @@ export default function Settings() {
   )
 
   return (
+    <>
+      <Button
+        variant={controlButtonVariant}
+        tooltip="Refresh Layout"
+        size="icon"
+        onClick={refreshLayout}
+      >
+        <RefreshCwIcon />
+      </Button>
       <Popover open={opened} onOpenChange={setOpened}>
         <PopoverTrigger asChild>
           <Button variant={controlButtonVariant} tooltip="Settings" size="icon">
@@ -317,5 +327,6 @@ export default function Settings() {
           </div>
         </PopoverContent>
       </Popover>
+    </>
   )
 }

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<SettingsState>()(
   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,