63 lines
2.5 KiB
Markdown
63 lines
2.5 KiB
Markdown
# 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
|
|
|
|
- [x] **Shadcn UI Setup** (AC: 1)
|
|
- [x] Install Shadcn `Sheet` and `ScrollArea` components.
|
|
- [x] **InsightPanel Component** (AC: 1, 3, 4, 5)
|
|
- [x] Create `frontend/src/features/insight-panel/components/InsightPanel.tsx`.
|
|
- [x] Integrate `Recharts` for distribution visualization.
|
|
- [x] **State Integration** (AC: 2, 5)
|
|
- [x] Update `useGridStore` to trigger outlier detection and store results.
|
|
- [x] 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 |