Feature/models tutorials

[Creylay]

Summary

Adds comprehensive guided tours for the Models module, including a main models tour and a session visualization tour. Implements a custom tooltip component with responsive design, conditional rendering, and interactive step support. Tours guide users through the complete workflow from dataset selection to model training and analysis.

---

Type of Change

Check all that apply like this [x]:

• Backend change
• Frontend change
• CI / Workflow change
• Build / Packaging change
• Bug fix
• Documentation

---

Changes (by file)

Tour System Core:

• DashAI/front/src/components/tour/CustomTooltip.jsx: New custom tooltip component with responsive width calculation, placement-based sizing, and support for interactive steps
• DashAI/front/src/components/tour/TourProvider.jsx: Added floaterProps={{ disableFlip: true }} to prevent automatic tooltip repositioning
• DashAI/front/src/components/tour/tourStyles.js: Removed fixed width to allow CustomTooltip dynamic sizing, added scroll blocking behavior
• DashAI/front/src/components/tour/TourButton.jsx: Enhanced to support disabled state with custom tooltip message

Tour Definitions:

• DashAI/front/src/constants/tours/modelsTour.js: New 12-step tour for the models module covering task selection, dataset configuration, feature selection, and session creation
• DashAI/front/src/constants/tours/modelsSessionTour.js: New 9-step tour for session visualization covering model addition, configuration, training, and result analysis
• DashAI/front/src/constants/tours/index.js: Export and register both new tours

Models Module Integration:

• DashAI/front/src/pages/models/ModelsContent.jsx: Major refactor to support tour integration with state tracking, session tour auto-start logic, and conditional tour availability
• DashAI/front/src/pages/models/Models.jsx: Added tour context providers
• DashAI/front/src/components/models/SessionVisualization.jsx: Added data-tour attributes for tour targeting
• DashAI/front/src/components/models/CreateSessionSteps.jsx: Added tour detection and sessionStorage flag for tour transitions
• DashAI/front/src/components/models/RunCard.jsx: Added data-tour attribute for run card targeting
• DashAI/front/src/components/models/AddModelDialog.jsx: Added data-tour attribute
• DashAI/front/src/components/models/RightBar.jsx: Added data-tour attribute for models panel
• DashAI/front/src/components/models/model/ModelListItem.jsx: Added data-tour attributes for model selection
• DashAI/front/src/components/models/SetNameAndDatasetStep.jsx: Added data-tour attributes for dataset selection

Supporting Components:

• DashAI/front/src/components/experiments/PrepareDatasetStep.jsx: Added data-tour attributes for column selection
• DashAI/front/src/components/notebooks/notebookCreation/DatasetAutocomplete.jsx: Added data-tour attribute
• DashAI/front/src/components/threeSectionLayout/OptionBox.jsx: Added data-tour attribute

---

Testing

1. Start the models tour from the home state (step = 0) - verify button is disabled in other states
2. Complete the models tour workflow:
   • Task selection → Dataset selection → Feature configuration → Session creation
3. Verify automatic transition to session tour after creating a session during the models tour
4. Test session tour workflow:
   • Model selection → Configuration → Training → Results visualization
5. Verify responsive tooltip behavior at different screen sizes
6. Test scroll blocking on interactive steps
7. Verify color-coded validation messages (Green/Red text)
8. Check that tour buttons show appropriate disabled messages when not in valid state

---

Notes

• Tours use React Joyride with custom tooltip for better UX and responsive design
• Session tour automatically starts after completing models tour via sessionStorage flag
• Tours are restricted to specific application states (models tour only starts from home state)
• Tooltip width adapts based on placement (lateral: 350px max, top/bottom: 450px max) with viewport constraints
• Interactive steps disable the "Finish" button to force user interaction
• Scroll blocking prevents users from scrolling away during critical interactive steps