Bhavpreet- Create choosing village map frontend #3293
Conversation
…te_choosing_village_map_frontend
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
…te_choosing_village_map_frontend
There was a problem hiding this comment.
I followed the testing steps as outlined in the PR description and navigated to /lbdashboard/masterplan. The interactive map is functioning as expected, allowing users to select villages and navigate to their respective pages. The responsiveness is well-implemented, ensuring proper display across different screen sizes. I also reviewed the code, and it looks well-structured and aligns with the quality standards. Refer to the attached video for further confirmation. Hence, approving the PR.
PR.3293.mp4
fangedShadow
added
the
High Priority - Please Review First
There was a problem hiding this comment.
The interactive image map functionality works as expected, with one minor usability observation:
Issue:
When clicking on a village area in the map, the corresponding image at the bottom of the page is highlighted. However, since the highlighted image is not immediately visible (requiring scrolling to view), the visual feedback may go unnoticed.
Suggestion:
Ensure the highlighted image is automatically brought into the viewport (e.g., via smooth scrolling) when a village area is clicked. This will improve user experience by visible without manual scrolling.
Other Notes:
All other features (responsive design, hover effects, fallback options, etc.) function correctly.
18-41-29.mp4
There was a problem hiding this comment.
One improvement suggestion:
Currently, when a village number is clicked on the map, it correctly highlights the corresponding village-specific page. However, if the highlighted page is not in the current viewport, users need to manually scroll to find it, which may affect usability and the overall experience.
Recommendation:
It would be great to enhance this by adding automatic scrolling to the highlighted village-specific page when a village number is clicked on the map. This would ensure a smoother and more intuitive user experience
Screen.Recording.2025-03-27.224339.mp4
There was a problem hiding this comment.
I have followed the testing instructions and reviewed your changes, and everything is functioning as expected. The interactive master plan image map, clickable village areas that navigate to village-specific pages, responsive design for all screen sizes, and the functionality where clicking on a selected button takes you to the corresponding village's page are all working correctly.
However, I have one recommendation. When clicking on a village on the map, it highlights the village, but if the village is outside the viewport, the page does not automatically scroll to bring it into view, requiring manual scrolling to locate the highlighted village.
PR-3293.mp4
The issue with adding automatic scrolling is that it would move the viewport even when a user does not intend to select a village, such as when exploring the map, mis-clicking, or reviewing options. Additionally, the interactive map is primarily a navigation tool, and clicking on a village is not meant to immediately shift focus but to indicate selection. The routes on the left will be updated later, providing more detailed guidance, which will help users understand the village layout. Since this map serves as an initial reference, forcing a scroll may not align with its intended function. |
There was a problem hiding this comment.
Hi @fangedShadow,
I have reviewed the PR and ran the application on my system using the instructions. I have noticed that the village map is enabled with pinning which highlights the site pinned on the map. I have also verified the dynamic adjusting nature of the contents on screen resize. I found one problem which is when I click on the site, it is highlighted in the slide bar below but not scrolled towards it to check. Please have a look at it and if possible fix it. Thank you.
fangedShadow
dismissed stale reviews from vamsikrishna1704 and smohansatyaram
The merge-base changed after approval.
…te_choosing_village_map_frontend
There was a problem hiding this comment.
Reviewed and tested the interactive image map functionality. Everything is working as expected, including village selection, navigation, responsiveness, and fallback options. However, for visual feedback, highlighting works, but users need to manually scroll down to notice the change. Consider adjusting visibility or adding a smoother way to indicate the selection.
There was a problem hiding this comment.
Updated PR Review:
After reconsidering the automatic scrolling suggestion, I see your point about unintended viewport shifts and how the map serves as an initial reference rather than a primary navigation tool. Given this, I agree that forcing a scroll may not align with its intended function.
That said, I re-reviewed the other aspects of the implementation:
Functionality – The interactive image map behaves as expected, with correct area highlighting and no apparent technical issues.
Responsiveness – The map adjusts well across different screen sizes.
Hover Effects – Clear and consistent across the UI.
Fallback Options – The system handles cases where images or map data may not load properly.
No further changes are needed from my side. Thanks for the clarification on the intended user interaction!
Description
This feature is an interactive master plan map that allows users to select villages by clicking on designated areas within the image, leading them to specific pages. It includes responsive design, visual feedback on interaction, and village list.
Related PRS (if any):
This PR has my frontend branch and development branch on the backend to test.
…
Main changes explained:
-Interactive master plan image map
-Clickable village areas with navigation to village-specific pages
-Responsive design for all screen sizes
-on a click on the selected button it takes you to that villages's id page
How to test:
npm installand...to run this PR locallyScreenshots or videos of changes:
Screen.Recording.2025-03-19.200022.mp4
Note:
Let me know if you are facing any issues. And It is only a frontend with data that needs to be connected with backend. Please either approve or request changes based on your review— no comments please.