Remove useless tab visibility checks from graph components
This commit is contained in:
@@ -1,5 +1,4 @@
|
|||||||
import { useEffect, useState, useCallback, useMemo, useRef } from 'react'
|
import { useEffect, useState, useCallback, useMemo, useRef } from 'react'
|
||||||
import { useTabVisibility } from '@/contexts/useTabVisibility'
|
|
||||||
// import { MiniMap } from '@react-sigma/minimap'
|
// import { MiniMap } from '@react-sigma/minimap'
|
||||||
import { SigmaContainer, useRegisterEvents, useSigma } from '@react-sigma/core'
|
import { SigmaContainer, useRegisterEvents, useSigma } from '@react-sigma/core'
|
||||||
import { Settings as SigmaSettings } from 'sigma/settings'
|
import { Settings as SigmaSettings } from 'sigma/settings'
|
||||||
@@ -114,27 +113,15 @@ const GraphViewer = () => {
|
|||||||
const moveToSelectedNode = useGraphStore.use.moveToSelectedNode()
|
const moveToSelectedNode = useGraphStore.use.moveToSelectedNode()
|
||||||
const isFetching = useGraphStore.use.isFetching()
|
const isFetching = useGraphStore.use.isFetching()
|
||||||
|
|
||||||
// Get tab visibility
|
|
||||||
const { isTabVisible } = useTabVisibility()
|
|
||||||
const isGraphTabVisible = isTabVisible('knowledge-graph')
|
|
||||||
|
|
||||||
const showPropertyPanel = useSettingsStore.use.showPropertyPanel()
|
const showPropertyPanel = useSettingsStore.use.showPropertyPanel()
|
||||||
const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar()
|
const showNodeSearchBar = useSettingsStore.use.showNodeSearchBar()
|
||||||
const enableNodeDrag = useSettingsStore.use.enableNodeDrag()
|
const enableNodeDrag = useSettingsStore.use.enableNodeDrag()
|
||||||
|
|
||||||
// Handle component mount/unmount and tab visibility
|
|
||||||
useEffect(() => {
|
|
||||||
return () => {
|
|
||||||
// Only log, keep everything untouched
|
|
||||||
// This allows the WebGL context to persist across tab switches
|
|
||||||
console.log('GraphViewer is invisible, WebGL context is persisting')
|
|
||||||
}
|
|
||||||
}, [isGraphTabVisible])
|
|
||||||
|
|
||||||
// Initialize sigma settings once on component mount
|
// Initialize sigma settings once on component mount
|
||||||
// All dynamic settings will be updated in GraphControl using useSetSettings
|
// All dynamic settings will be updated in GraphControl using useSetSettings
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setSigmaSettings(defaultSigmaSettings)
|
setSigmaSettings(defaultSigmaSettings)
|
||||||
|
console.log('Initialized sigma settings')
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
// Clean up sigma instance when component unmounts
|
// Clean up sigma instance when component unmounts
|
||||||
|
@@ -8,7 +8,6 @@ import { toast } from 'sonner'
|
|||||||
import { queryGraphs } from '@/api/lightrag'
|
import { queryGraphs } from '@/api/lightrag'
|
||||||
import { useBackendState } from '@/stores/state'
|
import { useBackendState } from '@/stores/state'
|
||||||
import { useSettingsStore } from '@/stores/settings'
|
import { useSettingsStore } from '@/stores/settings'
|
||||||
import { useTabVisibility } from '@/contexts/useTabVisibility'
|
|
||||||
|
|
||||||
import seedrandom from 'seedrandom'
|
import seedrandom from 'seedrandom'
|
||||||
|
|
||||||
@@ -190,10 +189,6 @@ const useLightrangeGraph = () => {
|
|||||||
const nodeToExpand = useGraphStore.use.nodeToExpand()
|
const nodeToExpand = useGraphStore.use.nodeToExpand()
|
||||||
const nodeToPrune = useGraphStore.use.nodeToPrune()
|
const nodeToPrune = useGraphStore.use.nodeToPrune()
|
||||||
|
|
||||||
// Get tab visibility
|
|
||||||
const { isTabVisible } = useTabVisibility()
|
|
||||||
const isGraphTabVisible = isTabVisible('knowledge-graph')
|
|
||||||
|
|
||||||
// Track previous parameters to detect actual changes
|
// Track previous parameters to detect actual changes
|
||||||
const prevParamsRef = useRef({ queryLabel, maxQueryDepth, minDegree })
|
const prevParamsRef = useRef({ queryLabel, maxQueryDepth, minDegree })
|
||||||
|
|
||||||
@@ -248,12 +243,6 @@ const useLightrangeGraph = () => {
|
|||||||
if (!isFetching && !fetchInProgressRef.current &&
|
if (!isFetching && !fetchInProgressRef.current &&
|
||||||
(paramsChanged || !useGraphStore.getState().graphDataFetchAttempted)) {
|
(paramsChanged || !useGraphStore.getState().graphDataFetchAttempted)) {
|
||||||
|
|
||||||
// Only fetch data if the Graph tab is visible and we haven't attempted a fetch yet
|
|
||||||
if (!isGraphTabVisible) {
|
|
||||||
console.log('Graph tab not visible, skipping data fetch');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set flags
|
// Set flags
|
||||||
fetchInProgressRef.current = true
|
fetchInProgressRef.current = true
|
||||||
useGraphStore.getState().setGraphDataFetchAttempted(true)
|
useGraphStore.getState().setGraphDataFetchAttempted(true)
|
||||||
@@ -316,15 +305,7 @@ const useLightrangeGraph = () => {
|
|||||||
state.setGraphDataFetchAttempted(false)
|
state.setGraphDataFetchAttempted(false)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [queryLabel, maxQueryDepth, minDegree, isFetching, paramsChanged, isGraphTabVisible, rawGraph, sigmaGraph])
|
}, [queryLabel, maxQueryDepth, minDegree, isFetching, paramsChanged, rawGraph, sigmaGraph])
|
||||||
|
|
||||||
// Update rendering state and handle tab visibility changes
|
|
||||||
useEffect(() => {
|
|
||||||
// When tab becomes visible
|
|
||||||
if (isGraphTabVisible) {
|
|
||||||
// We no longer reset the fetch attempted flag here to prevent continuous API calls
|
|
||||||
}
|
|
||||||
}, [isGraphTabVisible, rawGraph])
|
|
||||||
|
|
||||||
// Handle node expansion
|
// Handle node expansion
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
Reference in New Issue
Block a user