Repository navigation
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
The radar chart on /hgnhelp/skills-overview read state.userProfile, which holds the HGN account profile and never contains skillInfo. The survey data lives in the userSkills slice and was only ever fetched by the /hgn/profile/skills page, so the overview always fell back to the 'Complete the skills survey' empty state. Fetch the profile from ENDPOINTS.SKILLS_PROFILE on mount instead, so the page works on direct navigation and refresh. Users without survey data (isPlaceholder) keep the existing inline message and are not redirected.
|
one-community
added
the
High Priority - Please Review First
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
- Tested the PR locally, all works well functionally
- Redirection to /hgnform when no skills found working as expected.
Issue:
- The radial scale numbers are not visible in /hgn/profile/skills radar chart but its available in skills-overview. Is this intended behavior?
Radar Char Value:
Values of radar chart matches the Skills Overview page radar chart
Filter by Skill and Preferences works well.
Logged in as User who has not completed the skill survey and skill overview page displays the message as intended.
There was a problem hiding this comment.
Hi, aky-iu:
I have tested this PR locally on the branch Akshay_fix_skills_overview_data_mismatch with the backend running on development.
PR Review & Verification Summary
Verified Points:
- Radar Chart Data Fetching & Consistency:
-
Navigating to
/hgnhelp/skills-overviewcorrectly fetches the skills survey data on mount viaENDPOINTS.SKILLS_PROFILE. -
The "Your Skills Radar" section renders properly, and all skill values match what is displayed on
/hgn/profile/skills. * Direct Route Refresh: -
Hard refreshed
/hgnhelp/skills-overviewdirectly without visiting/hgn/profile/skillsbeforehand; the chart continues to load and display cleanly without relying on cached in-memory Redux state.
-
- Empty State Handling:
- Tested with an account that has not completed the survey; the inline message "Complete the skills survey to view your radar chart" displays properly without triggering unwanted redirects.
- Verified that the radar chart and overall UI render cleanly in Dark Mode.
Areas for improvement
- Note on Skill Filtering (Pre-existing):
- The skill filtering seems incomplete/inconsistent: selecting specific skill tags returns member cards where "Top Skills" do not include the selected filters.
- Note on Radar Chart Label Overlap (Pre-existing UI issue):
- Observed that some skill labels at the top of the radar chart (e.g., Markdown & Graphs, Leadership Experience, Leadership Skills) overlap and are difficult to read due to the high density of dimensions.
iAbhi001
left a comment
iAbhi001
left a comment
There was a problem hiding this comment.
Hi @akv-iu,
I have tested this PR locally on the branch Akshay_fix_skills_overview_data_mismatch with the backend running on development.
PR Review & Verification Summary
Verified Points:
- Radar Chart Data Fetching & Consistency: Navigating to
/hgnhelp/skills-overviewcorrectly fetches the skills survey data on mount viaENDPOINTS.SKILLS_PROFILE. The "Your Skills Radar" section renders as expected, and the skill values match what is displayed on/hgn/profile/skills. - Direct Route Refresh: Hard refreshed
/hgnhelp/skills-overviewdirectly without visiting/hgn/profile/skillsbeforehand; the chart loads and renders reliably without depending on cached in-memory Redux state. - Empty State Handling: Tested with an account that has not completed the survey. The inline message "Complete the skills survey to view your radar chart" displays cleanly without triggering unwanted redirects away from the page.
- Dark Mode: Verified that the radar chart, labels, and overall page layout render cleanly in Dark Mode.
Non-Blocking Observations / Pre-existing Issues:
- Skill Filtering Consistency: Selecting specific skill tags sometimes returns member cards where the "Top Skills" list does not clearly reflect the active filter selection.
- Radar Chart Label Overlap: Some category labels near the top of the radar chart (e.g., Markdown & Graphs, Leadership Experience, Leadership Skills) overlap slightly due to high dimension density.
Note: Both items above appear to be pre-existing and outside the scope of this bug fix, but are noted here for future tracking.
Overall, the core data fetching bug and empty-state behavior are resolved cleanly. Great work!
|
@DeepighaJ thanks for testing this and catching that — good question. That's pre-existing behavior, not something this PR changes. Both pages render the same shared // RadarChart.jsx — default is compact=true, which hides the ticks
function RadarChart({ profileData, compact = true, onSkillsDataReady }) {
...
ticks: {
stepSize: 2,
display: compact ? false : true, // <-- this line
color: darkMode ? '#dcdcdc' : '#666',
...
}// RightSection.jsx (/hgn/profile/skills) — no compact override → defaults to true → ticks hidden
<RadarChart profileData={profileData} onSkillsDataReady={setSkillsData} />// SkillsOverviewPage.jsx (/hgnhelp/skills-overview) — already passed compact={false} before this PR
<RadarChart profileData={profileData} compact={false} /> // ticks shownI diffed this PR against @linlin-husky @iAbhi001 — thanks for the thorough testing. Both of you already flagged your findings (skill-filter/"Top Skills" mismatch, radar label overlap) as pre-existing and non-blocking yourselves, and confirmed the actual data-fetch fix, refresh case, empty state, and dark mode all work. Given that, would you mind flipping your reviews to Approve so this can merge? I'm happy to open follow-up issues for the filter mismatch, label overlap, and the tick-visibility difference above so none of it gets lost — just don't want to fix them in this PR since none of them are in its scope. |
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
@akv-iu Thanks for the confirmation.
- Tested the PR locally and verified the following:
- Confirmed that the Your Skills Radar chart appears on /hgnhelp/skills-overview.
- Verified that the radar chart values match those displayed on /hgn/profile/skills for users who completed the skills survey.
- Confirmed that the chart renders correctly when /hgnhelp/skills-overview is refreshed directly.
- Verified that users who have not completed the survey see the appropriate message and are not redirected.
- Confirmed that the Find Community Members search, skill filters, and preference filters continue to work as expected.
Both /hgn/profile/skills and /hgnhelp/skills-overview render the shared RadarChart with 28 skill dimensions, so the wrap-around labels at the top (Markdown & Graphs / Leadership Experience / Leadership Skills) sit within a ~26deg arc and collide regardless of chart size. Always use the abbreviated label instead of gating it behind `compact`, add the two labels missing an abbreviation, and enable Chart.js centerPointLabels to ease crowding at the seam. Also stop gating radial scale tick-number visibility behind `compact`: /hgn/profile/skills defaults compact=true and hid them while skills-overview (compact=false) showed them, for no reason tied to available space. Ticks are now always shown on both pages.
|
|
@DeepighaJ @linlin-husky @iAbhi001 thanks again for the thorough testing on this one. Jae has brought the non-blocking items you flagged into scope for this PR, so rather than deferring them to follow-up issues, I've fixed them today. The work now spans a frontend PR (this one) and a new backend PR, and I'd really appreciate a re-review and review of both. Frontend (this PR), all in the shared
Backend: OneCommunityGlobal/HGNRest#2370 All three have tests, including a backend regression test that fails on the old code and passes with the fix. I also merged the latest To test: check out this branch together with HGNRest#2370, then follow the "How to test" steps in each PR. The skill filter check needs the backend branch running. Please check dark mode as well. Thanks! |
AaditTrivedi
left a comment
AaditTrivedi
left a comment
There was a problem hiding this comment.
Reviewed by Aadit Trivedi.
How I verified
Checked out the PR, ran the new RadarChart tests, and reviewed the change to SkillsOverviewPage.jsx. I could not confirm the fix on screen: none of my test accounts have completed the HGN skills survey, so both pages show the empty state for them. Backend #2370 was reviewed separately and approved.
Verified
- Tests:
npx vitest run .../RadarChart.test.jsxpasses 3/3. SkillsOverviewPage.jsxno longer readsstate.userProfile?.skillInfo, which is never populated. It now fetches the survey fromENDPOINTS.SKILLS_PROFILE(userId)for the logged-in user, treatsisPlaceholderas no survey, and shows a loading state while the request runs. This matches the root cause described.
Pointers, not blocking
- On a failed request,
.catch(() => setProfileData(null))falls through to "Complete the skills survey to view your radar chart," which is misleading for users who have completed it. Consider a separate error message. - The description identifies
state.userSkillsas the correct slice, but the page fetches directly instead, decoding the user ID from the token in localStorage and callinghttpService.setjwt(token), which sets the token globally from inside a page component. Using the existing userSkills action, or the logged-in user from the auth state, would be more consistent with the rest of the app. - The new tests cover
RadarChart, not theSkillsOverviewPagefix; a test for the loaded, placeholder, and error states would protect the main change.
Approving.
Niket07pathak
left a comment
Niket07pathak
left a comment
There was a problem hiding this comment.
Reviewed by Niket Pathak
How I verified
Checked out Akshay_fix_skills_overview_data_mismatch and tested /hgnhelp/skills-overview locally using the required frontend/backend setup. Tested the Skills Radar chart with both a user who had completed the HGN Skills Survey and a user who had not completed it. Compared radar chart values against /hgn/profile/skills, tested direct navigation and hard refresh behavior, inspected API requests in Chrome DevTools, and verified radar tooltips, community member search, skill filtering, and light and dark mode rendering.
Verified working
- The Skills Radar chart renders correctly for users who have completed the HGN Skills Survey.
- The radar chart values match those displayed on
/hgn/profile/skills. - The radar chart remains visible after a hard refresh (
Ctrl + Shift + R) without requiring the user to visit the Skills Profile page first. - Direct navigation to
/hgnhelp/skills-overviewcorrectly loads the radar chart. - For users who have not completed the skills survey, the message "Complete the skills survey" appears correctly.
- Users without completed survey data are redirected to the skills survey form at
/hgnform. - Radar chart tooltips display skill names and corresponding scores correctly.
- Chrome DevTools confirms that
SkillsOverviewPage.jsxinitiates an API request when the page loads. - The Find Community Members search displays matching community members.
- Skill filters update the displayed results correctly, including the Advanced MongoDB filter.
- Community member cards display skill scores and top skills correctly.
- The Skills Overview page renders correctly in both light and dark modes, with readable chart labels, tooltips, and other UI elements.
Issues found
No issues were observed during testing.
Evidence
Attached screenshots:
Approved. The Skills Radar data mismatch appears resolved, and the tested functionality is working as expected.
sai-velagala-swe
left a comment
sai-velagala-swe
left a comment
There was a problem hiding this comment.
Reviewed by Sai Manojna Velagala
How I verified
Checked out Akshay_fix_skills_overview_data_mismatch and tested /hgnhelp/skills-overview locally with backend PR #2370 running. I tested the no-survey state, completed-survey radar rendering, comparison with /hgn/profile/skills, hard refresh behavior, member filters, tooltips, and dark mode.
Verified working
-
No-survey state works correctly.
Before completing the survey, /hgnhelp/skills-overview stayed on the page and displayed the message Complete the skills survey to view your radar chart.
- Survey submission completed successfully.
I completed the HGN skills questionnaire successfully before testing the populated radar state.
- Profile Skills radar renders after survey completion.
/hgn/profile/skills displayed
the completed skills radar with readable labels, scale values, and skill scores.
- Skills Overview radar renders correctly.
/hgnhelp/skills-overview displayed the radar after survey completion, including tooltips with skill name and score.
- Direct refresh behavior works.
The radar continued to load after refreshing /hgnhelp/skills-overview directly, without needing to visit the profile page first.
- Skill and preference filter UI continues to work.
The Find Community Members section displayed skill and preference filters and returned member cards when filters were applied.
- Dark mode renders correctly.
The radar, labels, scale values, tooltip, filters, and member cards remained readable in dark mode.
Observation
Some returned member cards do not display a member name, and some very low-score users appear in filtered results. These appear related to backend filtering/data handling in PR #2370 rather than the frontend data-loading fix.
Conclusion
The original Skills Overview data-loading issue is resolved. The radar now loads correctly for completed-survey users, the empty state works for users without survey data, and the page continues to function in dark mode.
vidiyala99
left a comment
vidiyala99
left a comment
There was a problem hiding this comment.
Tested f57bbf4 as Administrator on /hgnhelp/skills-overview against HGNRest development and the dev data (read-only), in light and dark mode.
What works:
- The radar now shows for a user who completed the survey.
GET /api/skills/profile/:idfor the Dev Admin account returns a realskillInfo(frontend, backend, general, ...), and the page draws "Your Skills Radar" with all 28 dimensions (screenshots 1 and 2), instead of "Complete the skills survey to view your radar chart." Fetching on mount and reading the user id from the token fixes the root cause in the description: the page no longer depends on having visited /hgn/profile/skills first. - Labels: with the short labels, the crowded pair at the top ("Markdown/Graphs" / "Documentation", "Leadership Exp" / "Leadership Skl") sits on separate lines and no longer overlaps; it's tight but readable at this size.
- Shared component: /hgn/profile/skills still renders its radar with the
RadarChartchange. - Dark mode: the card, grid and labels are readable.
Suggestions, not blocking:
- A failed request shows the survey prompt. On any error,
.catch(() => setProfileData(null))falls through to "Complete the skills survey to view your radar chart.", which tells a user who did complete it to do it again. A separate "Couldn't load your skills" message for the error case would avoid that. - Labels now always use
shortLabel, so thecompactprop no longer changes the labels; worth a note in the prop docs or removing that branch. - The value labels ("10") are drawn on top of the point markers, so at full scores each point shows a blurred "10". Hiding point labels in this non-compact view (the tooltip already shows the value) would clean that up.
Approving.
Screenshot 1: Your Skills Radar for Dev Admin (dark)
Screenshot 2: same, light mode
aaryashah22
left a comment
aaryashah22
left a comment
There was a problem hiding this comment.
Tested locally on f57bbf42 with HGNRest #2370 (3622734c) as the backend (Chrome, 10 Oct), after clearing site data: Administrator in light and dark mode, plus Volunteer.
Works
- My Admin test account had no survey, so the survey was filled once with test values (step 4). /hgn/profile/skills then showed the radar (all 5s) with the scale numbers and the short labels.
- /hgnhelp/skills-overview: "Your Skills Radar" shows the same values (all 5s, so not a skill-by-skill comparison) (picture 1), and it still shows after a hard reload (Cmd+Shift+R) of that page.
- Volunteer: "Complete the skills survey to view your radar chart." and I stayed on the page, no redirect (picture 2).
- Find Community Members: the search ("Tom" found Tom Test) and the skill and preference filters return results.
- Dark mode: the radar, the filter buttons and the cards are readable (radar and filters in picture 3).
Not tested: Owner/Manager, dark mode on /hgn/profile/skills, the reload and the search, a before/after on development, the unit tests.
Approving - thanks!
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
- Re-reviewed the PR locally and verified that the Skills Overview radar chart renders correctly, including on direct page refresh.
- The radar values and radial scale numbers match the profile page, label overlaps are resolved, and the survey completion message displays correctly for users who have not completed the survey.
- The skill and preference filters continue to work as expected, and the changes are working correctly in dark mode.
- The previously reported issues have been resolved.
This branch has not been deployed
10 participants
Original Task
Description
The Skills Overview page (
/hgnhelp/skills-overview) never displays the logged-in user's HGN skills survey responses. The "Your Skills Radar" section always falls back to the empty-state message "Complete the skills survey to view your radar chart", even for users who have fully completed the survey. The same user's data renders correctly on/hgn/profile/skills, which makes the dashboard look inconsistent and untrustworthy.Root cause is in
src/components/HGNHelpSkillsDashboard/SkillsOverviewPage.jsx. The component reads the survey data from the wrong Redux slice, and nothing on this route ever requests it:state.userProfile, which is the HGN account profile slice (userProfileByIdReducer). Survey data lives in a different slice,state.userSkills(userSkillsReducer). The keyskillInfois never written touserProfileanywhere in the codebase, so the guarduserProfile?.skillInfois always falsy and the page always renders the empty state.ENDPOINTS.SKILLS_PROFILE(/skills/profile/:userId), is called from exactly one place in the app —UserSkillsProfile.jsx, which is the/hgn/profile/skillspage. That is precisely why the data only ever appears there.Because of point 2, simply pointing the selector at the correct slice is not a real fix: Redux state is in-memory, so it would only work if the user happened to visit
/hgn/profile/skillsfirst in the same session, and would break on refresh or direct navigation. This PR therefore has the Skills Overview page fetch its own data on mount, the same way the working page does.Related PRS (if any):
This Frontend PR is related to the OneCommunityGlobal/HGNRest#2370 Backend PR.
For context only, the Skills Overview route being fixed here was introduced by frontend PR #3360 in this repository.
Main changes explained:
src/components/HGNHelpSkillsDashboard/SkillsOverviewPage.jsxto fetch the logged-in user's skills profile on mount viaENDPOINTS.SKILLS_PROFILE, and render the radar chart from that response instead of from a Redux slice that never holds it.How to test:
Akshay_fix_skills_overview_data_mismatchnpm installto install dependencies, then run the app locally (npm run start:localfor frontend, backend on port 4500)/hgn/profile/skillsand note the radar chart values/hgnhelp/skills-overviewand verify the "Your Skills Radar" section now renders the radar chart, and that the values match what you saw in step 5/hgnhelp/skills-overviewdirectly (without visiting/hgn/profile/skillsfirst) and verify the chart still renders — this is the case that was previously broken/hgnhelp/skills-overview, and verify the "Complete the skills survey to view your radar chart" message still shows, and that you are not redirected away from the pageScreenshots or videos of changes:
Note:
Scope is deliberately limited to a single file. No shared reducer, action, route, endpoint or styling is touched, and
/hgn/profile/skillsis not modified, so no other page changes behaviour.One intentional difference from
/hgn/profile/skills: that page redirects the user to/hgnformwith a toast when no survey data exists. This PR does not copy that redirect. On Skills Overview a user without survey data simply sees the existing inline empty-state message, since redirecting away from the overview page would be a behaviour change beyond the scope of this bug.