Fix: graph label not set on grapview initial mount

lightrag_webui/src/components/graph/GraphLabels.tsx

@@ -18,7 +18,7 @@ const GraphLabels = () => {
   // Track if a fetch is in progress to prevent multiple simultaneous fetches
   const fetchInProgressRef = useRef(false)
 
-  // Fetch labels once on component mount, using global flag to prevent duplicates
+  // Fetch labels and trigger initial data load
   useEffect(() => {
     // Check if we've already attempted to fetch labels in this session
     const labelsFetchAttempted = useGraphStore.getState().labelsFetchAttempted
@@ -43,6 +43,14 @@ const GraphLabels = () => {
     }
   }, []) // Empty dependency array ensures this only runs once on mount
 
+  // Trigger data load when labels are loaded
+  useEffect(() => {
+    if (labelsLoadedRef.current) {
+      // Reset the fetch attempted flag to force a new data fetch
+      useGraphStore.getState().setGraphDataFetchAttempted(false)
+    }
+  }, [label])
+
   const getSearchEngine = useCallback(() => {
     // Create search engine
     const searchEngine = new MiniSearch({
@@ -85,12 +93,8 @@ const GraphLabels = () => {
   )
 
   const handleRefresh = useCallback(() => {
+    // Re-set the same label to trigger a refresh through useEffect
     const currentLabel = useSettingsStore.getState().queryLabel
-
-    useGraphStore.getState().setGraphDataFetchAttempted(false)
-
-    useGraphStore.getState().reset()
-
     useSettingsStore.getState().setQueryLabel(currentLabel)
   }, [])
 
@@ -128,22 +132,13 @@ const GraphLabels = () => {
             newLabel = '*'
           }
 
-          // Reset the fetch attempted flag to force a new data fetch
-          useGraphStore.getState().setGraphDataFetchAttempted(false)
-
-          // Clear current graph data to ensure complete reload when label changes
-          if (newLabel !== currentLabel) {
-            const graphStore = useGraphStore.getState();
-            // Reset the all graph objects and status
-            graphStore.reset();
-          }
-
+          // Handle reselecting the same label
           if (newLabel === currentLabel && newLabel !== '*') {
-            // reselect the same itme means qery all
-            useSettingsStore.getState().setQueryLabel('*')
-          } else {
-            useSettingsStore.getState().setQueryLabel(newLabel)
+            newLabel = '*'
           }
+
+          // Update the label, which will trigger the useEffect to handle data loading
+          useSettingsStore.getState().setQueryLabel(newLabel)
         }}
         clearable={false}  // Prevent clearing value on reselect
       />

lightrag_webui/src/hooks/useLightragGraph.tsx

@@ -189,19 +189,10 @@ const useLightrangeGraph = () => {
   const nodeToExpand = useGraphStore.use.nodeToExpand()
   const nodeToPrune = useGraphStore.use.nodeToPrune()
 
-  // Track previous parameters to detect actual changes
-  const prevParamsRef = useRef({ queryLabel, maxQueryDepth, minDegree })
-
   // Use ref to track if data has been loaded and initial load
   const dataLoadedRef = useRef(false)
   const initialLoadRef = useRef(false)
 
-  // Check if parameters have changed
-  const paramsChanged =
-    prevParamsRef.current.queryLabel !== queryLabel ||
-    prevParamsRef.current.maxQueryDepth !== maxQueryDepth ||
-    prevParamsRef.current.minDegree !== minDegree
-
   const getNode = useCallback(
     (nodeId: string) => {
       return rawGraph?.getNode(nodeId) || null
@@ -219,30 +210,27 @@ const useLightrangeGraph = () => {
   // Track if a fetch is in progress to prevent multiple simultaneous fetches
   const fetchInProgressRef = useRef(false)
 
-  // Data fetching logic - simplified but preserving TAB visibility check
+  // Reset graph when query label is cleared
   useEffect(() => {
-    // Skip if fetch is already in progress
-    if (fetchInProgressRef.current) {
-      return
-    }
-
-    // If there's no query label, reset the graph
-    if (!queryLabel) {
-      if (rawGraph !== null || sigmaGraph !== null) {
-        const state = useGraphStore.getState()
-        state.reset()
-        state.setGraphDataFetchAttempted(false)
-        state.setLabelsFetchAttempted(false)
-      }
+    if (!queryLabel && (rawGraph !== null || sigmaGraph !== null)) {
+      const state = useGraphStore.getState()
+      state.reset()
+      state.setGraphDataFetchAttempted(false)
+      state.setLabelsFetchAttempted(false)
       dataLoadedRef.current = false
       initialLoadRef.current = false
+    }
+  }, [queryLabel, rawGraph, sigmaGraph])
+
+  // Data fetching logic
+  useEffect(() => {
+    // Skip if fetch is already in progress or no query label
+    if (fetchInProgressRef.current || !queryLabel) {
       return
     }
 
-    // Check if parameters have changed
-    if (!isFetching && !fetchInProgressRef.current &&
-        (paramsChanged || !useGraphStore.getState().graphDataFetchAttempted)) {
-
+    // Only fetch data when graphDataFetchAttempted is false
+    if (!isFetching && !useGraphStore.getState().graphDataFetchAttempted) {
       // Set flags
       fetchInProgressRef.current = true
       useGraphStore.getState().setGraphDataFetchAttempted(true)
@@ -258,9 +246,6 @@ const useLightrangeGraph = () => {
         })
       }
 
-      // Update parameter reference
-      prevParamsRef.current = { queryLabel, maxQueryDepth, minDegree }
-
       console.log('Fetching graph data...')
 
       // Use a local copy of the parameters
@@ -283,8 +268,6 @@ const useLightrangeGraph = () => {
         state.setSigmaGraph(newSigmaGraph)
         state.setRawGraph(data)
 
-        // No longer need to extract labels from graph data
-
         // Update flags
         dataLoadedRef.current = true
         initialLoadRef.current = true
@@ -305,7 +288,7 @@ const useLightrangeGraph = () => {
         state.setGraphDataFetchAttempted(false)
       })
     }
-  }, [queryLabel, maxQueryDepth, minDegree, isFetching, paramsChanged, rawGraph, sigmaGraph])
+  }, [queryLabel, maxQueryDepth, minDegree, isFetching])
 
   // Handle node expansion
   useEffect(() => {