diff --git a/src/components/GraphCanvas.tsx b/src/components/GraphCanvas.tsx index da28d9514b..67e873b8a1 100644 --- a/src/components/GraphCanvas.tsx +++ b/src/components/GraphCanvas.tsx @@ -21,6 +21,7 @@ export const GraphCanvas = forwardRef((_, ref) => { highlightedNodeIds, aiCitationHighlightedNodeIds, aiToolHighlightedNodeIds, + blastRadiusNodeIds, isAIHighlightsEnabled, toggleAIHighlights, } = useAppState(); @@ -31,9 +32,16 @@ export const GraphCanvas = forwardRef((_, ref) => { const next = new Set(highlightedNodeIds); for (const id of aiCitationHighlightedNodeIds) next.add(id); for (const id of aiToolHighlightedNodeIds) next.add(id); + // Note: blast radius nodes are handled separately with red color return next; }, [highlightedNodeIds, aiCitationHighlightedNodeIds, aiToolHighlightedNodeIds, isAIHighlightsEnabled]); - + + // Blast radius nodes (only when AI highlights enabled) + const effectiveBlastRadiusNodeIds = useMemo(() => { + if (!isAIHighlightsEnabled) return new Set(); + return blastRadiusNodeIds; + }, [blastRadiusNodeIds, isAIHighlightsEnabled]); + const handleNodeClick = useCallback((nodeId: string) => { if (!graph) return; const node = graph.nodes.find(n => n.id === nodeId); @@ -76,6 +84,7 @@ export const GraphCanvas = forwardRef((_, ref) => { onNodeHover: handleNodeHover, onStageClick: handleStageClick, highlightedNodeIds: effectiveHighlightedNodeIds, + blastRadiusNodeIds: effectiveBlastRadiusNodeIds, }); // Expose focusNode to parent via ref @@ -104,10 +113,10 @@ export const GraphCanvas = forwardRef((_, ref) => { useEffect(() => { const sigma = sigmaRef.current; if (!sigma) return; - + const sigmaGraph = sigma.getGraph() as Graph; if (sigmaGraph.order === 0) return; // Don't filter empty graph - + filterGraphByDepth(sigmaGraph, appSelectedNode?.id || null, depthFilter, visibleLabels); sigma.refresh(); }, [visibleLabels, depthFilter, appSelectedNode, sigmaRef]); @@ -139,7 +148,7 @@ export const GraphCanvas = forwardRef((_, ref) => {
{/* Background gradient */}
-
((_, ref) => {
{/* Sigma container */} -
@@ -205,10 +214,10 @@ export const GraphCanvas = forwardRef((_, ref) => { > - + {/* Divider */}
- + {/* Focus on selected */} {appSelectedNode && ( )} - + {/* Clear selection */} {sigmaSelectedNode && ( )} - + {/* Divider */}
- + {/* Layout control */}