# 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