Analysis/_bmad-output/implementation-artifacts/3-3-recommandation-intelligente-de-variables-frontend.md
2026-01-11 22:56:02 +01:00

62 lines
2.5 KiB
Markdown

# Story 3.3: Recommandation Intelligente de Variables (Frontend)
Status: review
## Story
As a Julien (Analyst),
I want the system to suggest which variables to include in my model,
so that I don't pollute my analysis with irrelevant data ("noise").
## Acceptance Criteria
1. **Target Selection:** Users can select one column as the "Target Variable (Y)" from a dropdown.
2. **Auto-Trigger:** Selecting Y automatically triggers the feature importance calculation for all other numeric columns.
3. **Smart Ranking:** The UI displays a list of features ranked by their predictive power.
4. **Auto-Selection:** The Top-5 features (or all if < 5) are automatically checked for inclusion in the model.
5. **Visual Feedback:** A horizontal bar chart in the configuration panel shows the importance scores.
## Tasks / Subtasks
- [x] **Selection UI** (AC: 1, 4)
- [x] Create `frontend/src/features/analysis/components/AnalysisConfiguration.tsx`.
- [x] Implement Target Variable (Y) and Predictor Variables (X) selection logic.
- [x] **Intelligence Integration** (AC: 2, 3, 5)
- [x] Call `/api/v1/analysis/feature-importance` upon Y selection.
- [x] Render importance scores using a simple CSS-based or Recharts bar chart.
- [x] **State Management** (AC: 4)
- [x] Store selected X and Y variables in `useGridStore`.
## Dev Notes
- **UX:** Implemented a slide-over `AnalysisConfiguration` sidebar triggered by the main "Run Regression" button.
- **Automation:** Integrated the Random Forest importance engine from the backend to provide real-time recommendations.
- **Rules:** Enforced mutual exclusivity between X and Y variables in the UI selection logic.
### Project Structure Notes
- Created `frontend/src/features/analysis/components/AnalysisConfiguration.tsx`.
- Updated `frontend/src/store/use-grid-store.ts` with analysis state.
- Updated `frontend/src/app/page.tsx` to handle the configuration drawer.
### References
- [Source: epics.md#Story 3.3]
- [Source: ux-design-specification.md#Critical Success Moments]
## Dev Agent Record
### Agent Model Used
{{agent_model_name_version}}
### Completion Notes List
- Built the model configuration sidebar using Tailwind and Lucide icons.
- Implemented reactive feature importance fetching when the target variable changes.
- Added auto-selection of top predictive features.
- Integrated the configuration state into the global Zustand store.
### File List
- /frontend/src/features/analysis/components/AnalysisConfiguration.tsx
- /frontend/src/store/use-grid-store.ts
- /frontend/src/app/page.tsx