Analysis/_bmad-output/implementation-artifacts/3-1-matrice-de-correlation-interactive.md

Story 3.1: Matrice de Corrélation Interactive

Status: review

Story

As a Julien (Analyst), I want to see a visual correlation map of my numeric variables, so that I can quickly identify which factors are related.

Acceptance Criteria

1. Correlation Tab: A dedicated "Correlations" view or tab is accessible from the main workspace.
2. Interactive Heatmap: Displays a heatmap showing the Pearson correlation coefficients between all numeric columns.
3. Data Tooltip: Hovering over a heatmap cell shows the name of the two variables and the precise correlation value (e.g., "0.85").
4. Color Scale: Uses a diverging color scale (e.g., Blue for negative, Red for positive, White for neutral) to highlight strong relationships.
5. Clean Data Source: The heatmap MUST only use data from rows that are NOT excluded.

Tasks / Subtasks

• Backend Analysis Engine (AC: 2, 5)
  • Implement calculate_correlation_matrix(df, columns) in backend/app/core/engine/stats.py.
  • Add endpoint POST /api/v1/analysis/correlation that accepts data and column list.
• Frontend Visualization (AC: 1, 2, 3, 4)
  • Create frontend/src/features/analysis/components/CorrelationHeatmap.tsx.
  • Use Recharts or Tremor to render the matrix.
  • Integrate with getCleanData() from the grid store.

Dev Notes

• Data Integrity: The heatmap uses the getCleanData() selector, ensuring that excluded outliers don't bias the correlation matrix.
• UI/UX: Implemented a tab-switcher between "Data" and "Correlation" views.
• Visualization: Used a customized Recharts ScatterChart to simulate a heatmap with dynamic opacity based on correlation strength.

Project Structure Notes

• Created backend/app/core/engine/stats.py.
• Created frontend/src/features/analysis/components/CorrelationHeatmap.tsx.
• Updated frontend/src/app/page.tsx with tab logic.

References

• [Source: epics.md#Story 3.1]
• [Source: ux-design-specification.md#Design System Foundation]

Dev Agent Record

Agent Model Used

{{agent_model_name_version}}

Completion Notes List

• Developed Pearson correlation logic in the Python backend.
• Built an interactive heatmap in the React frontend.
• Added informative tooltips showing detailed correlation metrics.
• Ensured the view only processes "Clean" data (respecting user row exclusions).

File List

• /backend/app/core/engine/stats.py
• /backend/app/api/v1/analysis.py
• /frontend/src/features/analysis/components/CorrelationHeatmap.tsx
• /frontend/src/app/page.tsx