Handika taking over for Alisha - fix(job-analytics): improve tooltip data clarity for application time…

[alishawalunj]

Description

Related PRS (if any):

To test this frontend PR you need to checkout development branch for backend.

Main changes explained:

• Update ApplicationTimeChart.jsx for adding tooltip on bar hover displaying role name, average time, and total applications with dynamic filter support
• Update ApplicationTimeChart.module.css for introducing tooltip styles

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as admin user
5. go to http://localhost:5173/application-time-chart
6. verify the tooltip is displayed on hovering over the chart displaying role name, average time (in minutes), and total number of applications

Screenshots or videos of changes:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	ca24af8
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a3b35efcd38140008b97f7e
😎 Deploy Preview	https://deploy-preview-5043--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[HemanthNidamanuru]

Hi Alisha,

I have reviewed your PR locally. The tooltip improvements are working as expected, showing the role name, average time, and total applications correctly.

One observation: the chart title color is not adapting to dark mode.

[Anusha-Gali]

Hi Alisha,

I have reviewed your PR locally and not sure why the dark mode is not working in your PR since it seems to work in Dev, could you pull the latest changes and make sure the toggle is well adapted to dark mode as black background would ideally not work well.

localhost
light mode

dark mode

dev dark mode

[rajanidi1999]

Looks good overall,
Just one accessibility suggestion: the .bar div is interactive (hover/tooltip), so it should ideally support keyboard access (e.g., tabIndex, role="button", and focus/blur handlers).
Also noticed a few duplicate CSS properties that could be cleaned up.
Otherwise, great work on the tooltip behavior and positioning

[alishawalunj]

Hi Alisha,

I have reviewed your PR locally and not sure why the dark mode is not working in your PR since it seems to work in Dev, could you pull the latest changes and make sure the toggle is well adapted to dark mode as black background would ideally not work well.

localhost light mode dark mode

dev dark mode

The issue is fixed. Please review.

[rajanidi1999]

[Anusha-Gali]

Hi Alisha,

Thanks for fixing the issues. The toggle is now well adapted in both the modes.

[rithika-paii]

Hi Alisha,
I reviewed the PR #5043 locally, and it works well! No changes required from my side!

PR.5043.mov

[beblicarl]

This feature works as intended and the code is great

https://www.loom.com/share/c7973cf4250a434eaa9932833e89d2be

[saurabhdipte]

Hi Alisha,

I reviewed the changes locally and everything works well.

[kunchalasireesha]

Hi Alisha, it looks like this PR currently has merge conflicts with the base branch. Could you please rebase or merge the latest changes from development into your branch and resolve the conflicts? Once the build passes, I’ll finish the review.

[sonarqubecloud]

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[DeepighaJ]

Hi
Checkout to current branch and ran PR locally
Logged in as Owner
When hitting the url following error is displayed.

[sonarqubecloud]

Quality Gate passed

Issues
9 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[amaresh2001]

Tested locally on alisha/fix/application-time-chart-tooltip-data-clarity.

Testing:

• Hovering over a bar displays a tooltip with the role name, average time (in minutes), and total number of applications.
• Tooltip updates correctly when hovering over different bars.
• Role filter works correctly, and tooltips remain accurate after filtering.
• Dark mode is fully supported. Tooltip text and background are readable.

Issue:

• Merge conflicts must be resolved before merging.

[Mahitha-pasupuleti]

Hi Alisha,

I reviewed and tested this PR. The tooltip is displayed correctly when hovering over the bars in the Application Time Chart and accurately shows the role name, average time (in minutes), and total number of applications.

I also verified the functionality in both light mode and dark mode. The tooltip is displayed properly, remains readable, and works as expected across themes.

Everything is functioning according to the requirements. Approving this PR.

[Abhi-R0211]

Checked out the PR branch and navigated to http://localhost:5173/application-time-chart.

---

Results

Tooltip - Hover behavior (light mode)

Hovering over bars correctly displays the tooltip with role name, average time (in minutes), and total number of applications. Tested across multiple bars, each tooltip correctly reflects the data for that specific role.

---

Role filter

Selecting a specific role from the Role dropdown correctly filters the chart to show only that role, and the tooltip data remains accurate.

---

Date filter - data unchanged after filter change

After changing the Dates dropdown (e.g. from ALL to Last 7 Days), the chart data did not change. This may be a pre-existing data issue unrelated to this PR rather than a regression introduced here - the tooltip itself continues to display correctly for whatever data is shown.

---

Light mode

Chart renders cleanly in light mode. Title, bars, axis labels, and summary text all display correctly with good contrast.

---

Dark mode

Toggled dark mode. Chart title, bars, axis labels, and summary text all adapt correctly. No contrast issues or broken styles. Tooltip also displays correctly in dark mode with readable text and appropriate background contrast.

[handikaharianto]

Hi @alishawalunj , after reviewing your PR, the tooltip has been implemented correctly and includes the necessary information, such as role name, average time, and total number of applications. And it also works properly in both dark/light modes.

[YSWFelicity]

✅ Tested — Working as expected
Followed the test steps on the PR branch (alisha/fix/application-time-chart-tooltip-data-clarity):

✅ Checked out the PR branch
✅ Ran npm install and started the dev server (npm start)
✅ Cleared site data/cache and logged in as an admin user
✅ Navigated to http://localhost:5173/application-time-chart
Tooltip verification
Hovering over each bar in the chart correctly displays a tooltip with all three required fields:

Role name (e.g. the role label of the hovered bar)
Avg. Time in minutes
Applications (total number of applications)
The tooltip follows the cursor smoothly and stays within the viewport (doesn't get clipped at the chart edges). Values update correctly when switching the Dates and Role filters.

Theme verification
☀️ Light mode (white): tooltip text, divider, and background render clearly with good contrast. ✅
🌙 Dark mode (black): toggled dark mode — tooltip and chart styling adapt correctly, text remains readable, no contrast issues. ✅
Result: Tested in both light and dark mode — passed. 👍

[AmaanSyed09]

Hi Alisha,

I tested the PR locally and verified the following:

1. Tooltip displays the required information: role name, average time in minutes, and total number of applications.

2. Tooltip formatting is clear and readable in both light mode and dark mode.

3. Role filtering works correctly and updates the chart as expected.

4. The page renders correctly in both light mode and dark mode.

Issues Found:

1. The Date filter does not appear to affect the displayed data. I tested multiple date ranges, including Last 7 Days and Last 30 Days, and the chart values, summary statistics, and tooltip data remained unchanged.

2. The PR description states that tooltip data should update dynamically when Date or Role filters are changed. Role filtering works correctly, but I was unable to verify the expected behavior for Date filtering.

3. I also noticed existing code review concerns around unstable keys from uuidv4(), tooltip fade-out behavior, unused hideTimerRef logic, and the totalApplications fallback using || 1 instead of preserving 0 values.

Requesting changes so the Date filter behavior and related tooltip/chart update logic can be fixed or clarified before approval.

Screenshots:

The Date filter doesn't update.

[Dnagabahiru]

Tested locally and everything is working properly.

The tooltip displays correctly on hover in the Application Time Chart, showing the role name, average time in minutes, and total number of applications. Site data/cache was cleared and verified after logging in as an admin user.

[pixelpix13]

Hi @alishawalunj, I tested this pr and below are my reviews

Visual Testing

• Tooltip appears on bar hover showing role name, avg time, and application count
• Tooltip repositions correctly near viewport edges
• Filters (Dates + Role) update tooltip data dynamically
• Light mode rendering correct
• Dark mode rendering correct

Code Issues Found

1. uuidv4() used as map key (lines ~285, ~324) — generates new keys on every render,
   causing unnecessary remounts. Should use item.role as a stable key.
2. Tooltip fade-out doesn't animate — element is removed immediately from DOM when
   visible=false, bypassing the CSS transition. Tooltip should always be rendered and
   only the tooltipVisible class should be toggled.
3. hideTimerRef is never assigned — clearTimeout is called on it but no
   setTimeout is ever set. Dead code.
4. count: item.totalApplications || 1 — fallback should be ?? 0, not || 1,
   to correctly show 0 applications instead of 1.

Light Mode

Dark Mode

[sonarqubecloud]

Quality Gate passed

Issues
8 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud