发布

  • [OPIK-2995] [FE] Colorful tags redesign - border-only design with colored indicators (#4044)

    frostbyte_neo 发布于 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
    下载附件