-
[OPIK-3564] [FE] Improve mobile responsiveness for Run experiment SideDialog (#4745)
frostbyte_neo 发布于
2026-02-11 09:20:39 +00:00 - [OPIK-3564] [FE] Improve mobile responsiveness for Run experiment SideDialog
- Add responsive layout using Tailwind md: breakpoints
- Add CodeExecutor support for executable experiment code samples
- Add CodeBlockWithHeader component for mobile code display
- Use useIsPhone hook for conditional rendering
- Stack elements vertically on mobile, horizontally on desktop
- Follow patterns established in OPIK-3563 for consistency
- Revision 2: Add collapsible accordion for evaluators on mobile
- Use Accordion component for evaluator selection on mobile portrait
- Show selection count in accordion trigger (e.g., "Select evaluators (3)")
- Collapsed by default to save vertical space on mobile
- Desktop retains expanded checkbox list behavior
- Extract renderEvaluatorsContent for code reuse
- Revision 3: Align accordion trigger text to the left
- Remove left padding (px-0) on AccordionTrigger to align with content
- Revision 4: Add autoFocus prop to LoadableSelectBox and show evaluator count on desktop
- Add autoFocus prop to LoadableSelectBox (defaults to true for backward compatibility)
- Use onOpenAutoFocus to prevent auto-focus when autoFocus=false
- Pass autoFocus={!isPhonePortrait} in AddExperimentDialog to prevent keyboard jump on mobile
- Show evaluator selection count on desktop view for consistency with mobile
- Revision 5: Hide custom metrics link on mobile, remove JSDoc comment
- Hide "Learn about custom metrics" button on mobile portrait mode
- Extract renderCustomMetricsLink for desktop-only rendering
- Remove unnecessary JSDoc comment from autoFocus prop
- Revision 6: Remove CodeExecutor from AddExperimentDialog
CodeExecutor requires backend support that doesn't exist yet.
This will be addressed in OPIK-3848.- Revision 7: Extract CodeBlockWithHeader to shared component
- Created reusable CodeBlockWithHeader component
- Removed duplicate implementations from AddExperimentDialog and IntegrationTemplate
- Follows DRY principle for code block styling
- Revision 8: Extract CodeSectionTitle to separate shared component
- Created dedicated CodeSectionTitle component
- Removed from CodeBlockWithHeader (single responsibility)
- Updated imports in AddExperimentDialog and IntegrationTemplate
- Revision 9: Remove duplicate copy button in mobile code block
When using CodeBlockWithHeader, don't pass copyData to CodeHighlighter
since the header already provides a copy button.- Revision 10: Extract PIP_INSTALL_OPIK_COMMAND to shared constant
- Added PIP_INSTALL_OPIK_COMMAND constant to shared.ts
- Updated AddExperimentDialog, IntegrationTemplate, and GuardrailConfigCode
- Follows DRY principle for commonly used install command
- Revision 11: Extract section title constants to shared.ts
- Added INSTALL_OPIK_SECTION_TITLE constant for "1. Install Opik..."
- Added INSTALL_SDK_SECTION_TITLE constant for "2. Install the SDK"
- Updated IntegrationTemplate, IntegrationDetailsDialog, GuardrailConfigCode
- Updated AddExperimentDialog, AddOptimizationDialog
- Revision 12: Add line highlighting for configuration code
- Enable withHighlight in putConfigInCode calls
- Pass highlightedLines to CodeHighlighter
- Consistent with IntegrationTemplate behavior
- Revision 13: Adjust CodeSectionTitle margin to mb-2
- Reduce margin-bottom from mb-3 to mb-2 for tighter spacing
- Unified styling across IntegrationTemplate and AddExperimentDialog
- Revision 14: Extract InstallOpikSection shared component
- Create reusable InstallOpikSection component
- Replace duplicated renderInstallSection in IntegrationTemplate
- Replace duplicated renderInstallSection in AddExperimentDialog
- DRY: single source for pip install section with responsive layout
- Revision 15: Inline InstallOpikSection usage
- Remove unnecessary renderInstallSection wrapper functions
- Use InstallOpikSection directly in JSX
- Revision 16: Restore original experimentCode format
- Restore original code string format (was section3)
- Fix missing newline after importString
- Revert header padding to pb-8
- Revision 17: Remove evaluator count from desktop view
- Keep models count only in mobile accordion trigger
- Desktop shows plain "Select evaluators" title without count
Co-authored-by: Cursor cursoragent@cursor.com
- Revision 18: Replace accordion with multi-select for evaluators on mobile
- Replace Accordion with LoadableSelectBox multiselect for evaluators in phone portrait
- Add group support to DropdownOption and LoadableSelectBox (group headers with separators)
- Add hideSearch prop to LoadableSelectBox for small static option lists
- Remove description truncation in LoadableSelectBox options
- Show evaluator count next to title only in phone portrait mode
Co-authored-by: Cursor cursoragent@cursor.com
Co-authored-by: Cursor cursoragent@cursor.com
下载附件