Fix duplicate api requuests for graph fetching

- Optimize graph data fetching conditions
- Add isFetching state to prevent duplicate requests
- Improve label selection handling

lightrag_webui/src/components/graph/GraphControl.tsx

@@ -1,10 +1,11 @@
 import { useLoadGraph, useRegisterEvents, useSetSettings, useSigma } from '@react-sigma/core'
+import Graph from 'graphology'
 // import { useLayoutCircular } from '@react-sigma/layout-circular'
 import { useLayoutForceAtlas2 } from '@react-sigma/layout-forceatlas2'
 import { useEffect } from 'react'
 
 // import useRandomGraph, { EdgeType, NodeType } from '@/hooks/useRandomGraph'
-import useLightragGraph, { EdgeType, NodeType } from '@/hooks/useLightragGraph'
+import { EdgeType, NodeType } from '@/hooks/useLightragGraph'
 import useTheme from '@/hooks/useTheme'
 import * as Constants from '@/lib/constants'
 
@@ -21,7 +22,6 @@ const isButtonPressed = (ev: MouseEvent | TouchEvent) => {
 }
 
 const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean }) => {
-  const { lightrageGraph } = useLightragGraph()
   const sigma = useSigma<NodeType, EdgeType>()
   const registerEvents = useRegisterEvents<NodeType, EdgeType>()
   const setSettings = useSetSettings<NodeType, EdgeType>()
@@ -38,17 +38,18 @@ const GraphControl = ({ disableHoverEffect }: { disableHoverEffect?: boolean })
   const focusedNode = useGraphStore.use.focusedNode()
   const selectedEdge = useGraphStore.use.selectedEdge()
   const focusedEdge = useGraphStore.use.focusedEdge()
+  const sigmaGraph = useGraphStore.use.sigmaGraph()
 
   /**
    * When component mount or maxIterations changes
    * => load the graph and apply layout
    */
   useEffect(() => {
-    // Create & load the graph
-    const graph = lightrageGraph()
-    loadGraph(graph)
-    assignLayout()
-  }, [assignLayout, loadGraph, lightrageGraph, maxIterations])
+    if (sigmaGraph) {
+      loadGraph(sigmaGraph as unknown as Graph<NodeType, EdgeType>)
+      assignLayout()
+    }
+  }, [assignLayout, loadGraph, sigmaGraph, maxIterations])
 
   /**
    * When component mount

lightrag_webui/src/components/graph/GraphLabels.tsx

@@ -57,8 +57,11 @@ const GraphLabels = () => {
     
     const currentLabel = useSettingsStore.getState().queryLabel
     
-    // When selecting the same label (except '*'), switch to '*'
-    if (newLabel === currentLabel && newLabel !== '*') {
+    if (newLabel === '*' && currentLabel === '*') {
+      // When reselecting '*', just set it again to trigger a new fetch
+      useSettingsStore.getState().setQueryLabel('*')
+    } else if (newLabel === currentLabel && newLabel !== '*') {
+      // When selecting the same label (except '*'), switch to '*'
       useSettingsStore.getState().setQueryLabel('*')
     } else {
       useSettingsStore.getState().setQueryLabel(newLabel)

lightrag_webui/src/hooks/useLightragGraph.tsx

@@ -162,13 +162,32 @@ const createSigmaGraph = (rawGraph: RawGraph | null) => {
 }
 
 const useLightrangeGraph = () => {
-  // Use useRef to maintain lastQueryLabel state between renders
-  const lastQueryLabelRef = useRef({ label: '', maxQueryDepth: 0, minDegree: 0 })
   const queryLabel = useSettingsStore.use.queryLabel()
   const rawGraph = useGraphStore.use.rawGraph()
   const sigmaGraph = useGraphStore.use.sigmaGraph()
   const maxQueryDepth = useSettingsStore.use.graphQueryMaxDepth()
   const minDegree = useSettingsStore.use.graphMinDegree()
+  const isFetching = useGraphStore.use.isFetching()
+
+  // Use ref to track fetch status
+  const fetchStatusRef = useRef<Record<string, boolean>>({});
+
+  // Track previous parameters to detect actual changes
+  const prevParamsRef = useRef({ queryLabel, maxQueryDepth, minDegree });
+
+  // Reset fetch status only when parameters actually change
+  useEffect(() => {
+    const prevParams = prevParamsRef.current;
+    if (prevParams.queryLabel !== queryLabel || 
+        prevParams.maxQueryDepth !== maxQueryDepth || 
+        prevParams.minDegree !== minDegree) {
+      useGraphStore.getState().setIsFetching(false);
+      // Reset fetch status for new parameters
+      fetchStatusRef.current = {};
+      // Update previous parameters
+      prevParamsRef.current = { queryLabel, maxQueryDepth, minDegree };
+    }
+  }, [queryLabel, maxQueryDepth, minDegree])
 
   const getNode = useCallback(
     (nodeId: string) => {
@@ -186,17 +205,12 @@ const useLightrangeGraph = () => {
 
   useEffect(() => {
     if (queryLabel) {
-      // Always fetch data for "*" label
-      // For other labels, only fetch when parameters change
-      const shouldUpdate = true;
-
-      if (shouldUpdate) {
-        lastQueryLabelRef.current = {
-          label: queryLabel,
-          maxQueryDepth,
-          minDegree
-        }
-
+      const fetchKey = `${queryLabel}-${maxQueryDepth}-${minDegree}`;
+      
+      // Only fetch if we haven't fetched this combination in the current component lifecycle
+      if (!isFetching && !fetchStatusRef.current[fetchKey]) {
+        useGraphStore.getState().setIsFetching(true);
+        fetchStatusRef.current[fetchKey] = true;
         fetchGraph(queryLabel, maxQueryDepth, minDegree).then((data) => {
           const state = useGraphStore.getState()
           const newSigmaGraph = createSigmaGraph(data)
@@ -227,6 +241,16 @@ const useLightrangeGraph = () => {
             // Ensure * is there eventhough there is no graph data
             state.setGraphLabels(['*']);
           }
+          if (!data) {
+            // If data is invalid, remove the fetch flag to allow retry
+            delete fetchStatusRef.current[fetchKey];
+          }
+          // Reset fetching state after all updates are complete
+          state.setIsFetching(false);
+        }).catch(() => {
+          // Reset fetching state and remove flag in case of error
+          useGraphStore.getState().setIsFetching(false);
+          delete fetchStatusRef.current[fetchKey];
         })
       }
     } else {

lightrag_webui/src/stores/graph.ts

@@ -68,6 +68,7 @@ interface GraphState {
   graphLabels: string[]
 
   moveToSelectedNode: boolean
+  isFetching: boolean
 
   setSelectedNode: (nodeId: string | null, moveToSelectedNode?: boolean) => void
   setFocusedNode: (nodeId: string | null) => void
@@ -81,6 +82,7 @@ interface GraphState {
   setRawGraph: (rawGraph: RawGraph | null) => void
   setSigmaGraph: (sigmaGraph: DirectedGraph | null) => void
   setGraphLabels: (labels: string[]) => void
+  setIsFetching: (isFetching: boolean) => void
 }
 
 const useGraphStoreBase = create<GraphState>()((set) => ({
@@ -90,11 +92,13 @@ const useGraphStoreBase = create<GraphState>()((set) => ({
   focusedEdge: null,
 
   moveToSelectedNode: false,
+  isFetching: false,
 
   rawGraph: null,
   sigmaGraph: null,
   graphLabels: ['*'],
 
+  setIsFetching: (isFetching: boolean) => set({ isFetching }),
   setSelectedNode: (nodeId: string | null, moveToSelectedNode?: boolean) =>
     set({ selectedNode: nodeId, moveToSelectedNode }),
   setFocusedNode: (nodeId: string | null) => set({ focusedNode: nodeId }),