Skip to content

Enhancement: make Training glanceable with expandable metric details #580

Description

@jimmykane

Problem

The authenticated /training route presents many analytical sections, tables, explanations, and charts fully expanded in one continuous page. The result is a very long, unexpected scroll surface where the essential current picture is difficult to understand at a glance.

Training should lead with the information needed for a quick decision, while preserving the evidence and detailed metrics for users who choose to inspect them.

Desired outcome

Create a progressive-disclosure Training experience:

  • a compact first-screen overview of the essential current state;
  • concise section summaries that explain what changed and whether evidence is usable;
  • expandable details for metric tables, supporting evidence, longer explanations, and charts;
  • a predictable page hierarchy rather than every available metric competing for attention.

This complements the Overview/per-sport separation proposed in #579.

Proposed content hierarchy

Level 1: glanceable overview

Define and validate a small essential set from existing authoritative data. A candidate set is:

  • current Training state;
  • readiness and evidence coverage;
  • current load versus usual;
  • the largest material load/sport driver;
  • freshness/form direction;
  • one clear warning or unavailable-evidence state when applicable.

The first screen should answer: How am I training now, what changed, and where should I look next?

Do not invent a new composite score merely to compress the UI.

Level 2: section summaries

Each major section should lead with:

  • a plain-language conclusion;
  • scope: All training or the selected sport;
  • evidence quality/freshness;
  • two to four essential values;
  • a Show details action when more information exists.

Level 3: expanded evidence

Move secondary content behind explicit expansion, such as:

  • full Now / Usual / Change tables;
  • exclusion and eligibility breakdowns;
  • supporting workout lists;
  • detailed sleep comparisons;
  • long-form methodology;
  • secondary charts and context-specific metrics.

Critical errors, stale data, privacy information, and material evidence limitations must remain visible and must not be hidden solely inside a collapsed panel.

Interaction requirements

  • Prefer native or Angular Material expansion semantics with correct aria-expanded and controlled-region relationships.
  • Preserve a user's expansion state during the current session where useful.
  • Support direct navigation/focus to a section from Help, Assistant evidence, or another in-app link.
  • Do not render every expensive chart before it becomes visible if deferred rendering can be done without losing accessibility or causing layout jumps.
  • Expansion must not trigger new activity-history queries or recalculate authoritative metrics in the frontend.
  • Avoid nested accordions deep enough to hide where the user is.

Acceptance criteria

  • At a common desktop viewport, the essential Training summary is understandable without page scrolling.
  • On mobile, the same essential summary appears before detailed cards and can be understood within a short, predictable opening flow.
  • Every major section has a concise collapsed summary and a clear details control when applicable.
  • Expanded content contains all metrics and evidence available before the redesign; information is reorganized, not discarded.
  • Material errors, freshness warnings, and evidence limitations remain visible in the collapsed state.
  • Expansion controls expose correct accessible names, keyboard behavior, focus handling, and aria-expanded state.
  • Browser Back/Forward and deep links behave predictably when a section is addressed.
  • The page does not unexpectedly jump as charts are expanded or loaded.
  • Deferred sections and charts avoid unnecessary initial rendering work and do not produce duplicate subscriptions.
  • Missing metrics remain unavailable rather than becoming zero or being omitted without explanation.
  • Responsive visual-regression and component tests cover compact, expanded, loading, empty, stale, and failed states.
  • Help and docs/training-workspace.md describe the new content hierarchy.

Product validation

Before fixing the exact collapsed set, test the hierarchy against these tasks:

  1. Understand today's Training state in under 10 seconds.
  2. Identify the main reason load changed.
  3. Switch from the overview to one sport.
  4. Inspect the evidence behind durability or readiness.
  5. Return to the summary without losing context.

Success should be measured by comprehension and task completion, not by maximizing the number of visible cards.

Non-goals

  • Removing evidence-rich metrics or charts.
  • Adding an unsupported “one number” Training score.
  • Hiding errors or uncertainty to make the screen look cleaner.
  • Moving historical calculations into Angular.

Related

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions