refactor: reorder icons order in control bool bar

lightrag_webui/src/components/graph/LayoutsControl.tsx

@@ -15,7 +15,7 @@ import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui
 import { controlButtonVariant } from '@/lib/constants'
 import { useSettingsStore } from '@/stores/settings'
 
-import { GripIcon, PlayIcon, PauseIcon } from 'lucide-react'
+import { GripIcon, PlayIcon, PauseIcon, RefreshCwIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
 type LayoutName =
@@ -138,8 +138,23 @@ const LayoutsControl = () => {
     [layouts, sigma]
   )
 
+  const refreshLayout = useCallback(() => {
+    if (!sigma) return
+    const graph = sigma.getGraph()
+    const positions = layoutForceAtlas2.positions()
+    animateNodes(graph, positions, { duration: 500 })
+  }, [sigma, layoutForceAtlas2])
+
   return (
     <>
+      <Button
+        variant={controlButtonVariant}
+        tooltip={t('graphPanel.sideBar.settings.refreshLayout')}
+        size="icon"
+        onClick={refreshLayout}
+      >
+        <RefreshCwIcon />
+      </Button>
       <div>
         {layouts[layout] && 'worker' in layouts[layout] && (
           <WorkerLayoutControl layout={layouts[layout].worker!} />

lightrag_webui/src/components/graph/Settings.tsx

@@ -8,11 +8,8 @@ import Input from '@/components/ui/Input'
 import { controlButtonVariant } from '@/lib/constants'
 import { useSettingsStore } from '@/stores/settings'
 import { useBackendState } from '@/stores/state'
-import { useSigma } from '@react-sigma/core'
-import { useLayoutForceAtlas2 } from '@react-sigma/layout-forceatlas2'
-import { animateNodes } from 'sigma/utils'
 
-import { SettingsIcon, RefreshCwIcon } from 'lucide-react'
+import { SettingsIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next';
 
 /**
@@ -117,16 +114,6 @@ const LabeledNumberInput = ({
 export default function Settings() {
   const [opened, setOpened] = useState<boolean>(false)
   const [tempApiKey, setTempApiKey] = useState<string>('')
-  const sigma = useSigma()
-  const maxIterations = useSettingsStore.use.graphLayoutMaxIterations()
-  const layout = useLayoutForceAtlas2({ iterations: maxIterations })
-
-  const refreshLayout = useCallback(() => {
-    if (!sigma) return
-    const graph = sigma.getGraph()
-    const positions = layout.positions()
-    animateNodes(graph, positions, { duration: 500 })
-  }, [sigma, layout])
 
   const showPropertyPanel = useSettingsStore.use.showPropertyPanel()
   const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar()
@@ -222,14 +209,6 @@ export default function Settings() {
 
   return (
     <>
-      <Button
-        variant={controlButtonVariant}
-        tooltip={t('graphPanel.sideBar.settings.refreshLayout')}
-        size="icon"
-        onClick={refreshLayout}
-      >
-        <RefreshCwIcon />
-      </Button>
       <Popover open={opened} onOpenChange={setOpened}>
         <PopoverTrigger asChild>
           <Button variant={controlButtonVariant} tooltip={t('graphPanel.sideBar.settings.settings')} size="icon">

lightrag_webui/src/components/graph/ZoomControl.tsx

@@ -33,19 +33,6 @@ const ZoomControl = () => {
         return
       }
 
-      // Get container dimensions for aspect ratio
-      const container = sigma.getContainer()
-      const containerWidth = container.offsetWidth
-      const containerHeight = container.offsetHeight
-      const containerPadding = 30
-      console.log('Container W:', containerWidth, 'H:', containerHeight)
-
-      if (containerWidth < 100|| containerHeight < 100) {
-        // Use reset() for zero size case
-        reset()
-        return
-      }
-
       sigma.getCamera().animate(
         { x: 0.5, y: 0.5, ratio: 1.1 },
         { duration: 1000 }
@@ -59,12 +46,6 @@ const ZoomControl = () => {
 
   return (
     <>
-      <Button variant={controlButtonVariant} onClick={handleZoomIn} tooltip={t('graphPanel.sideBar.zoomControl.zoomIn')} size="icon">
-        <ZoomInIcon />
-      </Button>
-      <Button variant={controlButtonVariant} onClick={handleZoomOut} tooltip={t('graphPanel.sideBar.zoomControl.zoomOut')} size="icon">
-        <ZoomOutIcon />
-      </Button>
       <Button
         variant={controlButtonVariant}
         onClick={handleResetZoom}
@@ -73,6 +54,12 @@ const ZoomControl = () => {
       >
         <FullscreenIcon />
       </Button>
+      <Button variant={controlButtonVariant} onClick={handleZoomIn} tooltip={t('graphPanel.sideBar.zoomControl.zoomIn')} size="icon">
+        <ZoomInIcon />
+      </Button>
+      <Button variant={controlButtonVariant} onClick={handleZoomOut} tooltip={t('graphPanel.sideBar.zoomControl.zoomOut')} size="icon">
+        <ZoomOutIcon />
+      </Button>
     </>
   )
 }