-
[OPIK-2995] [FE] Colorful tags redesign - border-only design with colored indicators (#4044)
发布于
2025-11-18 15:26:21 +00:00 - Revision 4: Create centralized color configuration (Single Source of Truth)
- Create new constants/colors.ts with ENTITY_TYPE enum and ENTITY_COLORS map
- Add colors for all sidebar items: Home, Playground, Online evaluation, Configuration, Automations
- Update ResourceLink to use ENTITY_COLORS instead of hardcoded values
- Update SidebarMenuItem to use entityType instead of resourceType
- Both sidebar and navigation tags now reference the same color source
- Color assignments:
- Projects: Blue
- Datasets: Yellow
- Prompts: Purple
- Experiments: Green
- Optimizations: Turquoise
- Annotation Queues: Pink
- Home: Gray
- Playground: Burgundy
- Online evaluation: Orange
- Automations: Blue
- Configuration: Gray
- Revision 5: Update entity colors per design requirements
Color changes:
- Home: Gray → Orange (brown)
- Optimization runs: Turquoise → Yellow (star icon)
- Trial: Turquoise → Yellow (star icon)
- Online evaluation: Orange → Pink
- Configuration: Gray (unchanged)
New colors added for bottom menu items:
- Documentation: Green
- Quickstart guide: Blue
- Provide feedback: Gray (black/dark)
All sidebar items now have colors assigned from centralized ENTITY_COLORS
-
Revision 5: Simplify to only color NavigationTags and DateTag (blue)
-
Revision 6: Use Tag component for DateTag with blue clock icon
-
[OPIK-2995] [FE] Fix linting errors - remove unused imports
-
Revision 7: Update tag spacing to gap-2 across all pages
-
Revision 8: Refactor tags to use transparent variant and smaller icons
- Create ScopeTag and ScopeCell components in page-specific folders
- Update DateTag to use transparent variant and size-3 icon
- Add AnnotationQueueProgressTag with SquareCheck icon
- Add iconsSize and gapSize props to ResourceLink for flexibility
- Update NavigationTag to use smaller icons (size-3) and tighter spacing (gap-1)
- Remove shared ScopeTag component in favor of page-specific versions
- Revision 9: Refine tag variants and styling
- Revert ColoredTag to use built-in Tag component variants
- Add variant prop to ResourceLink with default 'gray'
- Add conditional text styling based on transparent variant
- Update NavigationTag to pass transparent variant
- Remove custom border-only implementation in favor of Tag variants
- Revision 10: Remove color duplication - consolidate colors in RESOURCE_MAP
- Move RESOURCE_TYPE enum from constants/colors.ts to ResourceLink.tsx
- Define colors directly in RESOURCE_MAP instead of separate RESOURCE_COLORS
- Delete constants/colors.ts file to eliminate duplication
- Single source of truth now exists in RESOURCE_MAP
- Refactor tag variants to exclude 'red' and 'transparent'
- Updated TAG_VARIANTS to remove 'red' and 'transparent' options
- Adjusted TAG_VARIANTS_COLOR_MAP to reflect the changes in available variants
- Ensured consistency in tag styling by consolidating variant definitions
-
Revision 5: Remove ScopeCell, use TagCell instead
-
Revision 6: Fix dynamic Tailwind classes and create reusable ExperimentTag component
- Replace dynamic template literals with conditional static Tailwind classes in ResourceLink
- Fix invalid 'size-shrink-0' class to 'shrink-0'
- FlaskConical, updated to 'size-3', for consistency
- Create ExperimentTag component to reduce duplication
- Update CompareExperimentsDetails and CompareTrialsDetails to use ExperimentTag
- Addresses Copilot review comments
下载附件