feat(large): Feat/improve workout zone display 2567221415513740668

[arii]

Description

This submission refactors the ZoneDistribution component, replacing the text-based list with a donut chart and a formatted legend to improve the visualization of workout zone data. The changes include adding recharts for the chart, correcting time formatting, and using MUI Stack to fix all layout issues.

Dependencies:

• recharts

Fixes #6224

Change Type: ✨ New feature (non-breaking change adding functionality)

PR Scope Checklist

This checklist is mandatory for all PRs.

• PR has a clear, single purpose: The title and description of the PR clearly state the purpose of the change.
• All changes relate to the stated objective: The code changes should be directly related to the purpose of the PR.
• No unrelated cleanup or refactoring: The PR should not contain any changes that are not directly related to the stated objective.
• Title and description match the actual changes: The title and description should accurately reflect the changes in the PR.
• Tests cover the specific change scope: The tests should be focused on the changes in the PR and should not include unrelated tests.

Impact Assessment

• Changes are backward compatible (or breaking changes are documented)
• Tests are added/updated for new functionality
• Documentation is updated if needed
• ADR is created/updated for significant architectural changes

Original PR Body

Description

This submission refactors the ZoneDistribution component, replacing the text-based list with a donut chart and a formatted legend to improve the visualization of workout zone data. The changes include adding recharts for the chart, correcting time formatting, and using MUI Stack to fix all layout issues.

Dependencies:

• recharts

Fixes #6224

[arii]

@pr-squash

[github-actions]

✅ Commits squashed successfully!

[arii]

📋 Quality Gate Results

Check	Status
Knip	✅ success
Lint	✅ success
Slop	✅ success
Build	❌ failure
Infra Tests	❌ skipped
Unit Tests	❌ skipped
Component Tests	❌ skipped
Perf Tests	❌ skipped
Visual Tests	❌ skipped

❌ Build Failure Details

Log file not found.

❌ Infrastructure Test Failure Details

Log file not found.

❌ Unit Test Failure Details

Log file not found.

❌ Component Test Failure Details

Log file not found.

❌ Visual Test Failure Details

Log file not found.

❌ Performance Test Failure Details

Log file not found.

⚠️ Some checks failed. Full logs available in workflow artifacts.

---

Report generated for commit: 03f00427f9e3221e9ad168124a72612f9e8ebee3

[arii]

Reviewed commit: 3d7dc7747a898bb518619038b1f15a597c7a3492

This PR introduces a significant and well-executed improvement to the workout zone display, replacing a basic text list with a dynamic and visually engaging pie chart. The changes demonstrate strong adherence to project guidelines and best practices.

Strengths

• Enhanced UI/UX: The ZoneDistribution component is a substantial upgrade, providing a clear and interactive visualization of time spent in different heart rate zones. This aligns perfectly with the goal of improving the workout zone display.
• MUI & Theme Integration: The new component leverages Material-UI extensively and integrates seamlessly with the project's custom theme, utilizing useTheme, sx props, and custom palette colors (theme.palette.custom.hrZones). This ensures consistency with docs/DESIGN_GUIDELINES.md and copilot-instructions.md.
• Accessibility: The addition of role="region" and aria-label to the chart container, along with PieChart accessibilityLayer, demonstrates a commitment to accessibility, as outlined in docs/DESIGN_GUIDELINES.md.
• Robust Testing: Comprehensive unit tests for ZoneDistribution have been updated and expanded, including mocking recharts to focus on component logic. New Playwright E2E and VRT tests ensure the visual and interactive correctness of the chart across different scenarios. The use of isTestEnvironment() to disable animations in tests is a best practice for VRT stability.
• Code Hygiene & Refactoring: The removal of the redundant components/HeartRateZones.tsx and its export from components/index.ts is a good example of reducing lines of code and consolidating functionality, aligning with docs/CODE_REVIEW_GUIDELINES.md. The global theme integration by removing ThemeProvider from app/client/experimental/page.tsx is also a positive refactor.
• Type Safety: The code maintains strict type safety, avoiding any types and using clear interfaces and enums, consistent with docs/TYPESCRIPT_PATTERNS.md.

Issues

No blocking issues were found. The PR is of high quality.

Test Coverage

The test coverage for the new ZoneDistribution component is excellent, with both unit and E2E/VRT tests covering various data states, accessibility, and visual integrity. The "Test Coverage Alert" in the review context appears to be a false positive, as tests were clearly updated and new ones added.

Recommendations

• Minor Frontend Improvement: While the current mapping of HrZoneName.Aerobic to fatBurn color is consistent with docs/DESIGN_GUIDELINES.md, if the application's understanding of "Aerobic" evolves to be a distinct zone, consider adding a dedicated color to theme.palette.custom.hrZones for finer granularity. (Priority: Low)

Verdict

✅ Verified the implementation of the new ZoneDistribution component, its integration with the MUI theme, and the comprehensive test coverage. No regressions or significant issues were found. Ready for approval.

Reviewed at commit: 3d7dc7747a898bb518619038b1f15a597c7a3492

[arii]

Reviewed commit: b3b4bddaf209b3f927c95ace31b1e2e81c3101b8

This PR introduces a significant visual and functional improvement to the workout zone display, replacing a basic list with an interactive pie chart. The changes align well with the project's design guidelines and enhance the user experience.

Strengths

• Enhanced UI/UX: The ZoneDistribution component has been completely refactored to use a recharts pie chart, providing a much more intuitive and visually appealing representation of time spent in different HR zones. This is a major improvement over the previous text-based list.
• MUI Theme Adherence: The component now leverages the custom HR zone colors defined in lib/theme.ts, ensuring consistency with the overall design system. The use of useTheme and sx prop is correct.
• Improved Accessibility: The addition of role="region" and aria-label to the chart container enhances accessibility for screen readers, aligning with WCAG guidelines.
• Test Coverage: Comprehensive testing has been added, including unit tests for the new component, a new Playwright E2E test for interactivity, and a Visual Regression Test (VRT) to ensure visual stability. Mocking recharts for unit tests is a good practice.
• Code Reduction: The removal of the HeartRateZones.tsx component and its export from index.ts simplifies the codebase by consolidating functionality into the new ZoneDistribution component.
• Test Environment Utility: The isTestEnvironment helper and its integration to disable chart animations in tests (isAnimationActive={!isTestEnvironment()}) is a smart move for stable VRTs.
• Data Integrity: The decision to include NoData and Unknown zones in the distribution, with a clear comment explaining the rationale, ensures a more accurate representation of workout data integrity.

Suggested Issues

• Type Declaration for window.__IS_TEST_ENV__: The new isTestEnvironment utility relies on window.__IS_TEST_ENV__. To maintain strict type safety, this global variable should be declared in a global declaration file (e.g., types/global.d.ts), similar to how window.TEST_CONTROLS is handled, as per docs/TYPESCRIPT_PATTERNS.md (Testing Client-Side Hooks and State).

Verdict

The changes are well-implemented, significantly improve the feature, and are thoroughly tested. The minor type declaration suggestion is non-blocking.

✅ Verified the new ZoneDistribution component's functionality, visual design, and test coverage. No regressions found. Ready for approval.

Reviewed at commit: b3b4bddaf209b3f927c95ace31b1e2e81c3101b8

[arii]

Reviewed commit: c15de8a9b902d17b8c38e10d15ff12dbe86134e9

Review Summary

This PR introduces significant and highly beneficial refactoring to the heart rate zone display and underlying logic. The changes greatly improve type safety, adhere to the DRY principle, and enhance the user interface for zone distribution. The consolidation of HR zone definitions into a single source of truth (HR_ZONE_CONFIG) is a major architectural improvement.

Strengths

• Enhanced Type Safety: The migration from numeric zones and HrZoneName enum to a HeartRateZone string literal type across the codebase significantly improves type safety and reduces potential runtime errors. This aligns perfectly with the project's TypeScript Best Practices.
• DRY Principle Adherence: The introduction of HR_ZONE_CONFIG as the canonical source for all HR zone definitions (labels, percentages, colors, text colors) is an excellent example of Don't Repeat Yourself. This centralizes logic and ensures consistency, as outlined in CODE_REVIEW_GUIDELINES.md.
• Improved UI/UX: The ZoneDistribution component has been completely rewritten to use recharts for a visually appealing pie chart, providing a much better user experience for viewing workout analytics. This aligns with DESIGN_GUIDELINES.md.
• Accessibility Improvements: The ZoneDistribution component includes role="region", aria-label, and accessibilityLayer for the chart, enhancing accessibility.
• Code Cleanup: The removal of the redundant HeartRateZones.tsx component and the ThemeProvider/CssBaseline from experimental/page.tsx (assuming global theme integration is handled elsewhere) reduces codebase clutter.
• Clear Deprecation: Marking calculateHrZone as @deprecated in lib/hrm/zones.ts with a suggestion to use the canonical calculateHrZoneInfo is good practice for guiding future development.

Issues

• Critical: Insufficient Test Coverage: The TEST COVERAGE ALERT indicates that source code was modified without corresponding test changes. This is a significant concern, especially given the extensive refactoring in lib/shared/hr-zones.ts (the new single source of truth for HR zone logic) and the complete rewrite of ZoneDistribution.tsx. These changes introduce new logic and UI, which are currently untested. This violates the Quality & Security First core principle from DEVELOPMENT.md.

Recommendations

• Add Comprehensive Tests: Prioritize adding unit tests for lib/shared/hr-zones.ts to cover all calculation logic and zone configurations. Also, add unit and integration tests for the new ZoneDistribution.tsx component, including data processing, rendering, and accessibility aspects.

Verdict

request_changes

Reviewed at commit: c15de8a9b902d17b8c38e10d15ff12dbe86134e9

[arii]

Reviewed commit: f847a8d226f8d4bb0fe79599e2919d13594a96f7

🚨 CI/CD Pipeline Failure: AI Slop Analysis

Reasoning for Failure:
The CI/CD pipeline is failing due to the AI Slop Analysis step. The error message grep: components/HeartRateZones.tsx: No such file or directory indicates that the analysis script is attempting to scan a file (components/HeartRateZones.tsx) that has been deleted in this pull request. The deletion of this file is a valid part of the refactoring to centralize HR zone display logic, but the CI script has not been updated to reflect this change.

This failure is blocking subsequent CI checks, including `test_pr_squ

Reviewed at commit: f847a8d226f8d4bb0fe79599e2919d13594a96f7