diff --git a/lightrag_webui/src/components/graph/FocusOnNode.tsx b/lightrag_webui/src/components/graph/FocusOnNode.tsx index cfefb7bb..70af7525 100644 --- a/lightrag_webui/src/components/graph/FocusOnNode.tsx +++ b/lightrag_webui/src/components/graph/FocusOnNode.tsx @@ -13,15 +13,24 @@ const FocusOnNode = ({ node, move }: { node: string | null; move?: boolean }) => * When the selected item changes, highlighted the node and center the camera on it. */ useEffect(() => { - if (!node) return - sigma.getGraph().setNodeAttribute(node, 'highlighted', true) if (move) { - gotoNode(node) + if (node) { + sigma.getGraph().setNodeAttribute(node, 'highlighted', true) + gotoNode(node) + } else { + // If no node is selected but move is true, reset to default view + sigma.setCustomBBox(null) + sigma.getCamera().animate({ x: 0.5, y: 0.5, ratio: 1 }, { duration: 0 }) + } useGraphStore.getState().setMoveToSelectedNode(false) + } else if (node) { + sigma.getGraph().setNodeAttribute(node, 'highlighted', true) } return () => { - sigma.getGraph().setNodeAttribute(node, 'highlighted', false) + if (node) { + sigma.getGraph().setNodeAttribute(node, 'highlighted', false) + } } }, [node, move, sigma, gotoNode]) diff --git a/lightrag_webui/src/features/GraphViewer.tsx b/lightrag_webui/src/features/GraphViewer.tsx index 1701636d..aab10c1a 100644 --- a/lightrag_webui/src/features/GraphViewer.tsx +++ b/lightrag_webui/src/features/GraphViewer.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState, useCallback, useMemo } from 'react' +import { useEffect, useState, useCallback, useMemo, useRef } from 'react' // import { MiniMap } from '@react-sigma/minimap' import { SigmaContainer, useRegisterEvents, useSigma } from '@react-sigma/core' import { Settings as SigmaSettings } from 'sigma/settings' @@ -91,8 +91,12 @@ const GraphEvents = () => { } }, // Disable the autoscale at the first down interaction - mousedown: () => { - if (!sigma.getCustomBBox()) sigma.setCustomBBox(sigma.getBBox()) + mousedown: (e) => { + // Only set custom BBox if it's a drag operation (mouse button is pressed) + const mouseEvent = e.original as MouseEvent; + if (mouseEvent.buttons !== 0 && !sigma.getCustomBBox()) { + sigma.setCustomBBox(sigma.getBBox()) + } } }) }, [registerEvents, sigma, draggedNode]) @@ -102,6 +106,7 @@ const GraphEvents = () => { const GraphViewer = () => { const [sigmaSettings, setSigmaSettings] = useState(defaultSigmaSettings) + const sigmaRef = useRef(null) const selectedNode = useGraphStore.use.selectedNode() const focusedNode = useGraphStore.use.focusedNode() @@ -144,7 +149,11 @@ const GraphViewer = () => { ) return ( - + {enableNodeDrag && } diff --git a/lightrag_webui/src/hooks/useLightragGraph.tsx b/lightrag_webui/src/hooks/useLightragGraph.tsx index 969b6dfe..a5e414b9 100644 --- a/lightrag_webui/src/hooks/useLightragGraph.tsx +++ b/lightrag_webui/src/hooks/useLightragGraph.tsx @@ -254,6 +254,8 @@ const useLightrangeGraph = () => { 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