Redesign TechRadar with interactive SVG and tooltips - #22
BarryHenryJr merged 5 commits into
Conversation
Refactors the TechRadar component to use a scalable, interactive SVG radar chart with quadrant and ring labels, animated blips, and accessible tooltips. Adds Framer Motion for smooth animations, improves accessibility, and updates the data structure for clarity and maintainability. The new design enhances user experience and visual clarity.
|
🚅 Deployed to the BarryHenry-Portfolio-Web-pr-22 environment in upbeat-freedom
|
Summary of ChangesHello @BarryHenryJr, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly overhauls the Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This is an excellent and significant refactor of the TechRadar component. The new implementation is much more interactive, visually appealing, and maintainable. The use of framer-motion for animations, the improved data model, and the attention to accessibility are all great improvements. I have a few suggestions to further enhance the code, mainly focusing on performance, maintainability, and fixing a minor visual bug in the new ping animation.
There was a problem hiding this comment.
Pull request overview
This pull request redesigns the TechRadar component from a static visualization to a fully interactive, animated radar chart. The redesign introduces comprehensive interactivity with hover states, click-to-pin tooltips, and keyboard navigation, while maintaining accessibility through reduced motion support and ARIA labels.
Key Changes:
- Enhanced data model with unique IDs, explicit types (Quadrant/Ring), and descriptive content for each technology item
- Complete SVG reimplementation with scalable coordinates, interactive blips, animated tooltips, and visual ring indicators
- Accessibility improvements including keyboard navigation (Enter/Space keys), reduced motion support, and outside-click handling
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Improves SVG layout constants, optimizes ring color lookup, and enhances accessibility with keyboard focus support. Refactors tooltip and details panel logic, updates quadrant and label positioning, and improves animation and visual clarity for tech blips. Adds ARIA roles and descriptive SVG metadata for better accessibility.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated 7 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Refactored interactive SVG elements for better keyboard accessibility by adding an invisible focusable area. Adjusted quadrant label positions, increased marker size, and improved tooltip positioning and appearance. Introduced theme color constants and enhanced text shadow for better readability.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated 9 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Updated ring color definitions to use CSS variables with semantic HSL fallbacks for better theming. Improved tooltip positioning logic to avoid overlap, added comments for overflow handling, and enhanced text shadow for label readability. Removed unused theme color constants and fixed animation compatibility issues with Framer Motion and CSS variables.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated 3 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Moved mapToSvg helper outside the component for clarity. Simplified tooltip backdrop-blur logic and added a comment for readability.
This pull request significantly refactors and enhances the
TechRadarcomponent, introducing a more interactive, accessible, and visually appealing technology radar chart. The update includes a new data model, improved SVG rendering, interactive tooltips, and better accessibility and motion handling.Key improvements and changes:
1. Data Model and Type Enhancements
QuadrantandRingtypes and expanded theTechItemtype to include uniqueidand optionaldescriptionfields. The technology items data (TECH_ITEMS) is now more descriptive and structured, supporting richer tooltips and improved maintainability.2. Visual and Interactive Radar Chart
framer-motionfor motion and animation.3. User Interaction and Accessibility