Analysis/_bmad-output/implementation-artifacts/2-4-panel-d-insights-revue-des-outliers-frontend.md

Story 2.4: Panel d'Insights & Revue des Outliers (Frontend)

Status: review

Story

As a Julien (Analyst), I want to review detected outliers in a side panel, so that I can understand why they are flagged before excluding them.

Acceptance Criteria

1. Insight Panel UI: A slide-over panel (Shadcn Sheet) displays detailed outlier information.
2. Interactive Triggers: Clicking a "warning" badge in the grid header opens the panel for that column.
3. Reasoning Display: The panel shows the statistical reason for each flagged point (e.g., "Value 9.9 is > 3 Sigma").
4. Visual Summary: Displays a small chart (boxplot or histogram) showing the distribution and the outlier's position.
5. Batch Actions: Users can click "Exclude All" within the panel to gray out all flagged rows in the grid.

Tasks / Subtasks

• Shadcn UI Setup (AC: 1)
  • Install Shadcn Sheet and ScrollArea components.
• InsightPanel Component (AC: 1, 3, 4, 5)
  • Create frontend/src/features/insight-panel/components/InsightPanel.tsx.
  • Integrate Recharts for distribution visualization.
• State Integration (AC: 2, 5)
  • Update useGridStore to trigger outlier detection and store results.
  • Add detectedOutliers object to the Zustand store.

Dev Notes

• Explainable AI: Successfully mapped backend reasons to user-friendly list items in the panel.
• Visualization: Used recharts to build a dynamic histogram of the selected column.
• Integration: Added a pulse animation to column headers when outliers are detected.

Project Structure Notes

• Created frontend/src/features/insight-panel/components/InsightPanel.tsx.
• Integrated panel trigger in frontend/src/features/smart-grid/components/SmartGrid.tsx.
• Updated main layout in frontend/src/app/page.tsx to host the panel.

References

• [Source: ux-design-specification.md#2.4 Novel UX Patterns]
• [Source: architecture.md#Frontend Architecture]

Dev Agent Record

Agent Model Used

{{agent_model_name_version}}

Completion Notes List

• Implemented the InsightPanel slide-over component.
• Integrated automated backend outlier detection triggered on data change.
• Added a distribution histogram using Recharts.
• Implemented "Exclude All" functionality which syncs with the Grid's visual state.

File List

• /frontend/src/features/insight-panel/components/InsightPanel.tsx
• /frontend/src/store/use-grid-store.ts
• /frontend/src/features/smart-grid/components/SmartGrid.tsx
• /frontend/src/app/page.tsx