Skip to content

HTML Report: Add collapsible sections with summary navigation #34

@jbrinkman

Description

@jbrinkman

Problem Description

The HTML report sections (breaking changes, added, removed, modified) are currently always expanded, making it difficult to navigate large reports. Users have to scroll through all content to find specific sections, and there's no way to focus on specific types of changes.

Current Behavior

  • All report sections are always fully expanded
  • Summary section shows statistics but doesn't provide interactive navigation
  • Users must manually scroll through entire report to find specific sections
  • Large reports become difficult to navigate and consume

Desired Behavior

  • Make each report section collapsible/expandable
  • Add clickable navigation links in the summary section that:
    • Scroll to the specific section when clicked
    • Automatically expand the target section if it's currently collapsed
  • Provide smooth navigation experience with animations
  • Remember section states during the session

Implementation Details

Summary Section Navigation

  • Convert summary statistics (counts) to clickable links
  • Wire click events to navigate to corresponding sections
  • Add visual indicators that statistics are clickable (hover states, cursor changes)

Section Collapsibility

  • Add collapse/expand functionality to each section card
  • Maintain section state (expanded/collapsed) in browser session storage
  • Add smooth transitions for expand/collapse actions
  • Include accessibility features (ARIA attributes, keyboard navigation)

Navigation Behavior

  • Smooth scrolling animation to target section
  • Auto-expand target section if collapsed
  • Optional: highlight target section briefly after navigation

Expected User Experience

  1. User opens HTML report with all sections initially expanded (or last known state)
  2. User can click on "Breaking Changes: 5" in summary to jump to that section
  3. Section automatically expands if collapsed and scrolls into view smoothly
  4. User can collapse sections they're not interested in to focus on relevant content
  5. Section states persist during browser session

Acceptance Criteria

  • All report sections (breaking changes, added, removed, modified) are collapsible
  • Summary section statistics are clickable and navigate to corresponding sections
  • Navigation automatically expands target sections if collapsed
  • Smooth scrolling animation between sections
  • Section states persist in browser session storage
  • Accessibility compliance (ARIA labels, keyboard navigation)
  • Mobile-responsive behavior
  • Visual indicators for interactive elements (hover states)

Files to Modify

  • src/DotNetApiDiff/Reporting/HtmlFormatter.cs
  • HTML report template files
  • CSS files for styling and animations
  • JavaScript files for interactive functionality

Priority

Medium - Significantly improves user experience for large reports

Additional Context

This enhancement will make HTML reports much more user-friendly, especially for large assemblies with many changes. The navigation feature will allow users to quickly jump between different types of changes without scrolling through irrelevant content.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions