Analysis/_bmad-output/implementation-artifacts/3-3-recommandation-intelligente-de-variables-frontend.md

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

• Selection UI (AC: 1, 4)
  • Create frontend/src/features/analysis/components/AnalysisConfiguration.tsx.
  • Implement Target Variable (Y) and Predictor Variables (X) selection logic.
• Intelligence Integration (AC: 2, 3, 5)
  • Call /api/v1/analysis/feature-importance upon Y selection.
  • Render importance scores using a simple CSS-based or Recharts bar chart.
• State Management (AC: 4)
  • 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