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,117 +206,127 @@ export default function Settings() {
   )
 
   return (
-    <Popover open={opened} onOpenChange={setOpened}>
-      <PopoverTrigger asChild>
-        <Button variant={controlButtonVariant} tooltip="Settings" size="icon">
-          <SettingsIcon />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        side="right"
-        align="start"
-        className="mb-2 p-2"
-        onCloseAutoFocus={(e) => e.preventDefault()}
+    <>
+      <Button
+        variant={controlButtonVariant}
+        tooltip="Refresh Layout"
+        size="icon"
+        onClick={refreshLayout}
       >
-        <div className="flex flex-col gap-2">
-          <LabeledCheckBox
-            checked={enableHealthCheck}
-            onCheckedChange={setEnableHealthCheck}
-            label="Health Check"
-          />
-
-          <Separator />
-
-          <LabeledCheckBox
-            checked={showPropertyPanel}
-            onCheckedChange={setShowPropertyPanel}
-            label="Show Property Panel"
-          />
-          <LabeledCheckBox
-            checked={showNodeSearchBar}
-            onCheckedChange={setShowNodeSearchBar}
-            label="Show Search Bar"
-          />
-
-          <Separator />
-
-          <LabeledCheckBox
-            checked={showNodeLabel}
-            onCheckedChange={setShowNodeLabel}
-            label="Show Node Label"
-          />
-          <LabeledCheckBox
-            checked={enableNodeDrag}
-            onCheckedChange={setEnableNodeDrag}
-            label="Node Draggable"
-          />
-
-          <Separator />
-
-          <LabeledCheckBox
-            checked={showEdgeLabel}
-            onCheckedChange={setShowEdgeLabel}
-            label="Show Edge Label"
-          />
-          <LabeledCheckBox
-            checked={enableHideUnselectedEdges}
-            onCheckedChange={setEnableHideUnselectedEdges}
-            label="Hide Unselected Edges"
-          />
-          <LabeledCheckBox
-            checked={enableEdgeEvents}
-            onCheckedChange={setEnableEdgeEvents}
-            label="Edge Events"
-          />
-
-          <Separator />
-          <LabeledNumberInput
-            label="Max Query Depth"
-            min={1}
-            value={graphQueryMaxDepth}
-            onEditFinished={setGraphQueryMaxDepth}
-          />
-          <LabeledNumberInput
-            label="Minimum Degree"
-            min={0}
-            value={graphMinDegree}
-            onEditFinished={setGraphMinDegree}
-          />
-          <LabeledNumberInput
-            label="Max Layout Iterations"
-            min={1}
-            max={20}
-            value={graphLayoutMaxIterations}
-            onEditFinished={setGraphLayoutMaxIterations}
-          />
-
-          <Separator />
-
+        <RefreshCwIcon />
+      </Button>
+      <Popover open={opened} onOpenChange={setOpened}>
+        <PopoverTrigger asChild>
+          <Button variant={controlButtonVariant} tooltip="Settings" size="icon">
+            <SettingsIcon />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          side="right"
+          align="start"
+          className="mb-2 p-2"
+          onCloseAutoFocus={(e) => e.preventDefault()}
+        >
           <div className="flex flex-col gap-2">
-            <label className="text-sm font-medium">API Key</label>
-            <form className="flex h-6 gap-2" onSubmit={(e) => e.preventDefault()}>
-              <div className="w-0 flex-1">
-                <Input
-                  type="password"
-                  value={tempApiKey}
-                  onChange={handleTempApiKeyChange}
-                  placeholder="Enter your API key"
-                  className="max-h-full w-full min-w-0"
-                  autoComplete="off"
-                />
-              </div>
-              <Button
-                onClick={setApiKey}
-                variant="outline"
-                size="sm"
-                className="max-h-full shrink-0"
-              >
-                Save
-              </Button>
-            </form>
+            <LabeledCheckBox
+              checked={enableHealthCheck}
+              onCheckedChange={setEnableHealthCheck}
+              label="Health Check"
+            />
+
+            <Separator />
+
+            <LabeledCheckBox
+              checked={showPropertyPanel}
+              onCheckedChange={setShowPropertyPanel}
+              label="Show Property Panel"
+            />
+            <LabeledCheckBox
+              checked={showNodeSearchBar}
+              onCheckedChange={setShowNodeSearchBar}
+              label="Show Search Bar"
+            />
+
+            <Separator />
+
+            <LabeledCheckBox
+              checked={showNodeLabel}
+              onCheckedChange={setShowNodeLabel}
+              label="Show Node Label"
+            />
+            <LabeledCheckBox
+              checked={enableNodeDrag}
+              onCheckedChange={setEnableNodeDrag}
+              label="Node Draggable"
+            />
+
+            <Separator />
+
+            <LabeledCheckBox
+              checked={showEdgeLabel}
+              onCheckedChange={setShowEdgeLabel}
+              label="Show Edge Label"
+            />
+            <LabeledCheckBox
+              checked={enableHideUnselectedEdges}
+              onCheckedChange={setEnableHideUnselectedEdges}
+              label="Hide Unselected Edges"
+            />
+            <LabeledCheckBox
+              checked={enableEdgeEvents}
+              onCheckedChange={setEnableEdgeEvents}
+              label="Edge Events"
+            />
+
+            <Separator />
+            <LabeledNumberInput
+              label="Max Query Depth"
+              min={1}
+              value={graphQueryMaxDepth}
+              onEditFinished={setGraphQueryMaxDepth}
+            />
+            <LabeledNumberInput
+              label="Minimum Degree"
+              min={0}
+              value={graphMinDegree}
+              onEditFinished={setGraphMinDegree}
+            />
+            <LabeledNumberInput
+              label="Max Layout Iterations"
+              min={1}
+              max={20}
+              value={graphLayoutMaxIterations}
+              onEditFinished={setGraphLayoutMaxIterations}
+            />
+
+            <Separator />
+
+            <div className="flex flex-col gap-2">
+              <label className="text-sm font-medium">API Key</label>
+              <form className="flex h-6 gap-2" onSubmit={(e) => e.preventDefault()}>
+                <div className="w-0 flex-1">
+                  <Input
+                    type="password"
+                    value={tempApiKey}
+                    onChange={handleTempApiKeyChange}
+                    placeholder="Enter your API key"
+                    className="max-h-full w-full min-w-0"
+                    autoComplete="off"
+                  />
+                </div>
+                <Button
+                  onClick={setApiKey}
+                  variant="outline"
+                  size="sm"
+                  className="max-h-full shrink-0"
+                >
+                  Save
+                </Button>
+              </form>
+            </div>
           </div>
-        </div>
-      </PopoverContent>
-    </Popover>
+        </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,