Refactor: Migrate ViewingLayer to Functional Component by M-DEV-1 · Pull Request #3504 · jaegertracing/jaeger-ui

M-DEV-1 · 2026-02-05T13:07:45Z

Which problem is this PR solving?

Resolves [UI Refactor] Migrate ViewingLayer to Functional Component #3371
This is part of the larger effort [Feature]: Refactor class components to functional components #2610

Description of the changes

Migrated ViewingLayer from a React Class-Based Component to a Functional Component in adherence to the acceptance criterion as described in [UI Refactor] Migrate ViewingLayer to Functional Component #3371

How was this change tested?

Unit Tests

Visuals

Before

After

Videos

Updated (After)

Screencast.from.2026-02-06.02-32-03.webm

Checklist

I have read https://github.com/jaegertracing/jaeger/blob/master/CONTRIBUTING_GUIDELINES.md
I have signed all commits
I have added unit tests for the new functionality
I have run lint and test steps successfully
- for jaeger: make lint test
- for jaeger-ui: npm run lint and npm run test

Signed-off-by: M-DEV-1 <mahadevankizhakkedathu@gmail.com>

Copilot

Pull request overview

This pull request migrates the ViewingLayer component from a React class-based component to a functional component using hooks, as part of the larger modernization effort to refactor Jaeger UI's codebase (#2610).

Changes:

Converted class component to functional component using forwardRef
Replaced this.state with useState for the preventCursorLine state
Replaced componentWillUnmount with useEffect for cleanup logic
Added useImperativeHandle to expose component methods for backwards compatibility with existing tests
Wrapped component in React.memo to preserve PureComponent performance optimization
Used useRef pattern with propsRef to ensure handlers have access to latest props

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: mahadevan <135952571+M-DEV-1@users.noreply.github.com>

Copilot

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 5 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Signed-off-by: M-DEV-1 <mahadevankizhakkedathu@gmail.com>

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Signed-off-by: M-DEV-1 <mahadevankizhakkedathu@gmail.com>

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-09T06:49:23Z

+      it('prevents the cursor from being drawn on scrubber mouseleave', async () => {
        fireEvent.mouseLeave(container.querySelectorAll('[data-testid="scrubber"]')[0]);
-        expect(ref.current.state.preventCursorLine).toBe(false);
+        await waitFor(() =>
+          expect(container.querySelector('.ViewingLayer--cursorGuide')).toBeInTheDocument()
+        );
      });


The test name "prevents the cursor from being drawn on scrubber mouseleave" no longer matches the asserted behavior (it waits for the cursor guide to be present after mouseleave). Renaming the test to reflect the actual expectation (e.g. cursor guide is restored on mouseleave) will reduce confusion when debugging failures.

codecov · 2026-02-20T14:47:48Z

Codecov Report

❌ Patch coverage is 97.43590% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 88.31%. Comparing base (efb138f) to head (8c7d54e).
⚠️ Report is 4 commits behind head on main.

Files with missing lines	Patch %	Lines
...acePage/TracePageHeader/SpanGraph/ViewingLayer.tsx	97.43%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3504      +/-   ##
==========================================
- Coverage   88.32%   88.31%   -0.01%     
==========================================
  Files         299      299              
  Lines        9487     9496       +9     
  Branches     2420     2420              
==========================================
+ Hits         8379     8386       +7     
- Misses       1105     1107       +2     
  Partials        3        3

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

M-DEV-1 · 2026-03-05T05:48:39Z

Hi @yurishkuro,

just bumping this PR in case it got buried. would really appreciate a review when you have time.

Copilot

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-05T05:50:39Z

+      it('prevents the cursor from being drawn on scrubber mouseleave', async () => {
        fireEvent.mouseLeave(container.querySelectorAll('[data-testid="scrubber"]')[0]);
-        expect(ref.current.state.preventCursorLine).toBe(false);
+        await waitFor(() =>
+          expect(container.querySelector('.ViewingLayer--cursorGuide')).toBeInTheDocument()
+        );
      });


This test name no longer matches the assertion: on mouseLeave the cursor guide is expected to re-appear (i.e., cursor drawing is no longer prevented). Renaming the test to reflect the intended behavior will make failures easier to interpret.

taking a look.

M-DEV-1 · 2026-03-05T05:51:18Z

Also, since I've been periodically updating the branch with main, the history now includes several "merge main into " commits. would you prefer that I rebase the branch to remove those merge commits, or leave it as-is?

refactor: migrate ViewingLayer to functional component

e8b602a

Signed-off-by: M-DEV-1 <mahadevankizhakkedathu@gmail.com>

M-DEV-1 requested a review from a team as a code owner February 5, 2026 13:07

Copilot AI review requested due to automatic review settings February 5, 2026 13:07

Copilot started reviewing on behalf of M-DEV-1 February 5, 2026 13:08 View session

Copilot AI reviewed Feb 5, 2026

View reviewed changes

fix: remove unused variable updateNextViewRangeTime

859924b

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: mahadevan <135952571+M-DEV-1@users.noreply.github.com>

Copilot AI review requested due to automatic review settings February 5, 2026 13:18

Copilot started reviewing on behalf of M-DEV-1 February 5, 2026 13:18 View session

Copilot AI reviewed Feb 5, 2026

View reviewed changes

fix(ViewingLayer): address code review feedback for migration

67de018

Signed-off-by: M-DEV-1 <mahadevankizhakkedathu@gmail.com>

M-DEV-1 requested a review from Copilot February 5, 2026 21:00

Copilot started reviewing on behalf of M-DEV-1 February 5, 2026 21:01 View session

Copilot AI reviewed Feb 5, 2026

View reviewed changes

Comment thread packages/jaeger-ui/src/components/TracePage/TracePageHeader/SpanGraph/ViewingLayer.tsx Outdated

M-DEV-1 and others added 2 commits February 6, 2026 09:30

fix(ViewingLayer): address code review feedback

0e6059b

Signed-off-by: M-DEV-1 <mahadevankizhakkedathu@gmail.com>

Merge branch 'main' into M-DEV-1/migrate-viewinglayer

9868815

Copilot AI review requested due to automatic review settings February 9, 2026 06:45

Copilot started reviewing on behalf of M-DEV-1 February 9, 2026 06:45 View session

Copilot AI reviewed Feb 9, 2026

View reviewed changes

Merge branch 'main' into M-DEV-1/migrate-viewinglayer

8c7d54e

M-DEV-1 added 4 commits February 20, 2026 20:34

Merge branch 'main' into M-DEV-1/migrate-viewinglayer

3065fdc

Merge branch 'main' into M-DEV-1/migrate-viewinglayer

1e6977d

Merge branch 'main' into M-DEV-1/migrate-viewinglayer

76f57d5

Merge branch 'main' into M-DEV-1/migrate-viewinglayer

6d4ac2f

Copilot AI review requested due to automatic review settings March 5, 2026 05:45

Copilot started reviewing on behalf of M-DEV-1 March 5, 2026 05:46 View session

Copilot AI reviewed Mar 5, 2026

View reviewed changes

Conversation

M-DEV-1 commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Which problem is this PR solving?

Description of the changes

How was this change tested?

Unit Tests

Visuals

Videos

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

codecov Bot commented Feb 20, 2026

Codecov Report

Uh oh!

M-DEV-1 commented Mar 5, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

M-DEV-1 Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

M-DEV-1 commented Mar 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

M-DEV-1 commented Feb 5, 2026 •

edited

Loading