[UI Refactor] Migrate DependencyGraph to Functional Component

[jkowall]

This issue is part of the larger effort to modernize the Jaeger UI codebase (Parent Issue #2610). The goal is to refactor the DependencyGraph component from a React Class Component to a React Functional Component using Hooks.

Target Component: packages/jaeger-ui/src/components/DependencyGraph/index.tsx

Acceptance Criteria

• The component is converted to a Functional Component.
• this.state is replaced with useState or useReducer.
• Lifecycle methods (componentDidMount, etc.) are replaced with useEffect.
• If Redux is used, the connect HOC is replaced with useSelector and useDispatch hooks (optional but preferred).
• All existing PropType validations are preserved.
• Performance: If the original component was a PureComponent, the new one is wrapped in React.memo.
• Visual Verification: Attach "Before" and "After" screenshots to the PR to prove no visual regression.
• Tests: Existing unit tests must pass.
• Note: If tests rely on Enzyme's state() or instance(), they must be refactored to check the DOM or Props instead.

Migration Guide (Cheat Sheet)

Feature	Old (Class)	New (Functional)
State	this.state = { isOpen: false }	const [isOpen, setIsOpen] = useState(false);
Side Effects	componentDidMount()	useEffect(() => { ... }, [])
Props	this.props.traceId	props.traceId (or destructure: const { traceId } = props;)
Default Props	static defaultProps = { name: 'Guest' }	function Component({ name = 'Guest' }) { ... }
Performance	class MyComp extends React.PureComponent	export default React.memo(MyComp)
Context	static contextType = MyContext	const val = useContext(MyContext)
Refs	this.myRef = React.createRef()	const myRef = useRef(null)

Common Pitfalls (Read Carefully!)

• Stale Closures: Be careful when using useEffect. If you use a variable inside the effect that comes from props or state, it must be in the dependency array. If you omit it, the effect will use the old value.
• Testing with Enzyme: Functional components do not have instances. Tests like wrapper.instance().method() or wrapper.state('value') will fail. You should refactor these tests to simulate events (clicks) and check the rendered output instead.

Resources

• React Official Guide: Hooks at a Glance
• A Complete Guide to useEffect (Overreacted.io) - Essential reading for understanding dependency arrays.
• React Redux Hooks Documentation - Guide for replacing connect().
• Thinking in React Hooks - Visual guide to the mental model shift.
• How to fetch data with React Hooks - Handling async operations.

[Purav001]

Hi @jkowall , I’d like to work on this refactor. I’ve contributed a recent metrics reducer fix and would like to take this task. Please let me know if there are any preferences or gotchas.

[jkowall]

We have an open PR on this already. Just needs review.

[Purav001]

Thanks for the update! I’ll look for another plexus refactor issue to work on.

[Parship12]

@jkowall @yurishkuro To refactor this component, I am thinking of using forwardRef + useImperativeHandle that will create a fake class instance that the tests can interact with, so that minimal test rewrites will be needed. Should i follow this pattern?

[yurishkuro]

It sounds like a not recommended, tech debt solution. What's your motivation, to avoid rewriting the tests? Could we ask AI to rewrite the tests first to focus on observed behavior rather than class internals?

[Parship12]

Yeah, then we have to rewrite almost every tests.