Minimized API request between Tab view change
This commit is contained in:
yangdx
@@ -6,6 +6,7 @@ import { useGraphStore, RawGraph } from '@/stores/graph'
|
||||
import { queryGraphs } from '@/api/lightrag'
|
||||
import { useBackendState } from '@/stores/state'
|
||||
import { useSettingsStore } from '@/stores/settings'
|
||||
import { useTabVisibility } from '@/contexts/useTabVisibility'
|
||||
|
||||
import seedrandom from 'seedrandom'
|
||||
|
||||
@@ -168,26 +169,23 @@ const useLightrangeGraph = () => {
|
||||
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>>({});
|
||||
|
||||
|
||||
// Get tab visibility
|
||||
const { isTabVisible } = useTabVisibility()
|
||||
const isGraphTabVisible = isTabVisible('knowledge-graph')
|
||||
|
||||
// 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, isFetching])
|
||||
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) => {
|
||||
@@ -203,77 +201,131 @@ const useLightrangeGraph = () => {
|
||||
[rawGraph]
|
||||
)
|
||||
|
||||
// Track if a fetch is in progress to prevent multiple simultaneous fetches
|
||||
const fetchInProgressRef = useRef(false)
|
||||
|
||||
// Data fetching logic - use a separate effect with minimal dependencies to prevent multiple triggers
|
||||
useEffect(() => {
|
||||
if (queryLabel) {
|
||||
const fetchKey = `${queryLabel}-${maxQueryDepth}-${minDegree}`;
|
||||
|
||||
// Only fetch if we haven't fetched this combination in the current component lifecycle
|
||||
if (!isFetching && !fetchStatusRef.current[fetchKey]) {
|
||||
const state = useGraphStore.getState();
|
||||
// Clear selection and highlighted nodes before fetching new graph
|
||||
state.clearSelection();
|
||||
if (state.sigmaGraph) {
|
||||
state.sigmaGraph.forEachNode((node) => {
|
||||
state.sigmaGraph?.setNodeAttribute(node, 'highlighted', false);
|
||||
});
|
||||
}
|
||||
|
||||
state.setIsFetching(true);
|
||||
fetchStatusRef.current[fetchKey] = true;
|
||||
fetchGraph(queryLabel, maxQueryDepth, minDegree).then((data) => {
|
||||
const state = useGraphStore.getState()
|
||||
const newSigmaGraph = createSigmaGraph(data)
|
||||
data?.buildDynamicMap()
|
||||
|
||||
// Update all graph data at once to minimize UI flicker
|
||||
state.clearSelection()
|
||||
state.setMoveToSelectedNode(false)
|
||||
state.setSigmaGraph(newSigmaGraph)
|
||||
state.setRawGraph(data)
|
||||
|
||||
// Extract labels from current graph data
|
||||
if (data) {
|
||||
const labelSet = new Set<string>();
|
||||
for (const node of data.nodes) {
|
||||
if (node.labels && Array.isArray(node.labels)) {
|
||||
for (const label of node.labels) {
|
||||
if (label !== '*') { // filter out label "*"
|
||||
labelSet.add(label);
|
||||
}
|
||||
// Skip if fetch is already in progress
|
||||
if (fetchInProgressRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
// If there's no query label, reset the graph only if it hasn't been reset already
|
||||
if (!queryLabel) {
|
||||
if (rawGraph !== null || sigmaGraph !== null) {
|
||||
const state = useGraphStore.getState()
|
||||
state.reset()
|
||||
state.setSigmaGraph(new DirectedGraph())
|
||||
state.setGraphLabels(['*'])
|
||||
// Reset fetch attempt flags when resetting graph
|
||||
state.setGraphDataFetchAttempted(false)
|
||||
state.setLabelsFetchAttempted(false)
|
||||
}
|
||||
dataLoadedRef.current = false
|
||||
initialLoadRef.current = false
|
||||
return
|
||||
}
|
||||
|
||||
// Check if we've already attempted to fetch this data in this session
|
||||
const graphDataFetchAttempted = useGraphStore.getState().graphDataFetchAttempted
|
||||
|
||||
// Fetch data if:
|
||||
// 1. We're not already fetching
|
||||
// 2. We haven't attempted to fetch in this session OR parameters have changed
|
||||
if (!isFetching && !fetchInProgressRef.current && (!graphDataFetchAttempted || paramsChanged)) {
|
||||
// Set flag to prevent multiple fetches
|
||||
fetchInProgressRef.current = true
|
||||
// Set global flag to indicate we've attempted to fetch in this session
|
||||
useGraphStore.getState().setGraphDataFetchAttempted(true)
|
||||
|
||||
const state = useGraphStore.getState()
|
||||
|
||||
// Set rendering control state
|
||||
state.setIsFetching(true)
|
||||
state.setShouldRender(false) // Disable rendering during data loading
|
||||
|
||||
// Clear selection and highlighted nodes before fetching new graph
|
||||
state.clearSelection()
|
||||
if (state.sigmaGraph) {
|
||||
state.sigmaGraph.forEachNode((node) => {
|
||||
state.sigmaGraph?.setNodeAttribute(node, 'highlighted', false)
|
||||
})
|
||||
}
|
||||
|
||||
// Update parameter reference
|
||||
prevParamsRef.current = { queryLabel, maxQueryDepth, minDegree }
|
||||
|
||||
console.log('Fetching graph data (once per session unless params change)...')
|
||||
|
||||
// Use a local copy of the parameters to avoid closure issues
|
||||
const currentQueryLabel = queryLabel
|
||||
const currentMaxQueryDepth = maxQueryDepth
|
||||
const currentMinDegree = minDegree
|
||||
|
||||
fetchGraph(currentQueryLabel, currentMaxQueryDepth, currentMinDegree).then((data) => {
|
||||
const state = useGraphStore.getState()
|
||||
const newSigmaGraph = createSigmaGraph(data)
|
||||
data?.buildDynamicMap()
|
||||
|
||||
// Update all graph data at once to minimize UI flicker
|
||||
state.clearSelection()
|
||||
state.setMoveToSelectedNode(false)
|
||||
state.setSigmaGraph(newSigmaGraph)
|
||||
state.setRawGraph(data)
|
||||
|
||||
// Extract labels from current graph data for local use
|
||||
if (data) {
|
||||
const labelSet = new Set<string>()
|
||||
for (const node of data.nodes) {
|
||||
if (node.labels && Array.isArray(node.labels)) {
|
||||
for (const label of node.labels) {
|
||||
if (label !== '*') { // filter out label "*"
|
||||
labelSet.add(label)
|
||||
}
|
||||
}
|
||||
}
|
||||
// Put * on top of other labels
|
||||
const sortedLabels = Array.from(labelSet).sort();
|
||||
state.setGraphLabels(['*', ...sortedLabels]);
|
||||
} else {
|
||||
// Ensure * is there eventhough there is no graph data
|
||||
state.setGraphLabels(['*']);
|
||||
}
|
||||
|
||||
// Fetch all database labels after graph update
|
||||
state.fetchAllDatabaseLabels();
|
||||
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
|
||||
// Reset camera view by triggering FocusOnNode component
|
||||
state.setMoveToSelectedNode(true);
|
||||
state.setIsFetching(false);
|
||||
}).catch(() => {
|
||||
// Reset fetching state and remove flag in case of error
|
||||
useGraphStore.getState().setIsFetching(false);
|
||||
delete fetchStatusRef.current[fetchKey];
|
||||
})
|
||||
}
|
||||
} else {
|
||||
const state = useGraphStore.getState()
|
||||
state.reset()
|
||||
state.setSigmaGraph(new DirectedGraph())
|
||||
state.setGraphLabels(['*'])
|
||||
// Put * on top of other labels
|
||||
const sortedLabels = Array.from(labelSet).sort()
|
||||
state.setGraphLabels(['*', ...sortedLabels])
|
||||
} else {
|
||||
// Ensure * is there eventhough there is no graph data
|
||||
state.setGraphLabels(['*'])
|
||||
}
|
||||
|
||||
// Mark data as loaded and initial load completed
|
||||
dataLoadedRef.current = true
|
||||
initialLoadRef.current = true
|
||||
fetchInProgressRef.current = false
|
||||
|
||||
// Reset camera view by triggering FocusOnNode component
|
||||
state.setMoveToSelectedNode(true)
|
||||
|
||||
// Enable rendering if the tab is visible
|
||||
state.setShouldRender(isGraphTabVisible)
|
||||
state.setIsFetching(false)
|
||||
}).catch((error) => {
|
||||
console.error('Error fetching graph data:', error)
|
||||
// Reset fetching state and remove flag in case of error
|
||||
const state = useGraphStore.getState()
|
||||
state.setIsFetching(false)
|
||||
state.setShouldRender(isGraphTabVisible) // Restore rendering state
|
||||
dataLoadedRef.current = false // Allow retry
|
||||
fetchInProgressRef.current = false
|
||||
// Reset global flag to allow retry
|
||||
state.setGraphDataFetchAttempted(false)
|
||||
})
|
||||
}
|
||||
}, [queryLabel, maxQueryDepth, minDegree, isFetching])
|
||||
}, [queryLabel, maxQueryDepth, minDegree, isFetching, paramsChanged, isGraphTabVisible, rawGraph, sigmaGraph]) // Added missing dependencies
|
||||
|
||||
// Update rendering state when tab visibility changes
|
||||
useEffect(() => {
|
||||
// Only update rendering state if data is loaded and not fetching
|
||||
if (rawGraph) {
|
||||
useGraphStore.getState().setShouldRender(isGraphTabVisible)
|
||||
}
|
||||
}, [isGraphTabVisible, rawGraph])
|
||||
|
||||
const lightrageGraph = useCallback(() => {
|
||||
if (sigmaGraph) {
|
||||
|
||||
Reference in New Issue
Block a user