diff --git a/lightrag_webui/src/components/graph/GraphLabels.tsx b/lightrag_webui/src/components/graph/GraphLabels.tsx index b23734fb..fdd06c56 100644 --- a/lightrag_webui/src/components/graph/GraphLabels.tsx +++ b/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 /> diff --git a/lightrag_webui/src/hooks/useLightragGraph.tsx b/lightrag_webui/src/hooks/useLightragGraph.tsx index 2f9e461f..da61ab2c 100644 --- a/lightrag_webui/src/hooks/useLightragGraph.tsx +++ b/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(() => {