[Agent Traces] Update colors for "Kind" labels and flyout styling (opensearch-project#11520)

Signed-off-by: Joshua Li <joshuali925@gmail.com>
Co-authored-by: Hoang Nguyen <jasonlh@amazon.com>

Author: joshuali925

packages/osd-apm-topology/src/components/nodes/agent_card_node.tsx

@@ -56,13 +56,6 @@ export const AgentCardNode = ({ data }: NodeProps<AgentCardCustomNode>) => {
             label={kindConfig.label}
             color={kindConfig.color}
             textColor={kindConfig.textColor}
-            icon={
-              <img
-                src={kindConfig.icon}
-                alt=""
-                className="osd:w-3 osd:h-3 celAgentCard__kind-icon"
-              />
-            }
           />
           {data.status && (
             <StatusIndicator status={data.status} label={data.statusLabel} icon={data.statusIcon} />

packages/osd-apm-topology/src/components/nodes/type_badge.test.tsx

@@ -13,16 +13,19 @@ describe('TypeBadge', () => {
     expect(screen.getByText('Service')).toBeInTheDocument();
   });
 
-  it('applies backgroundColor from color prop', () => {
+  it('renders a span element with style attribute', () => {
     const { container } = render(<TypeBadge label="Agent" color="#006BB4" />);
     const badge = container.firstChild as HTMLElement;
-    expect(badge.style.backgroundColor).toBe('rgb(0, 107, 180)');
+    // color-mix is not supported by jsdom, so backgroundColor is dropped;
+    // verify the element renders and text color falls back to the color prop
+    expect(badge.tagName).toBe('SPAN');
+    expect(badge.style.color).toBe('rgb(0, 107, 180)');
   });
 
-  it('defaults text color to white (#FFFFFF)', () => {
+  it('defaults text color to the color prop value', () => {
     const { container } = render(<TypeBadge label="Service" color="#006CE0" />);
     const badge = container.firstChild as HTMLElement;
-    expect(badge.style.color).toBe('rgb(255, 255, 255)');
+    expect(badge.style.color).toBe('rgb(0, 108, 224)');
   });
 
   it('applies custom textColor', () => {

packages/osd-apm-topology/src/components/nodes/type_badge.tsx

@@ -15,12 +15,15 @@ export interface TypeBadgeProps {
 
 /**
  * Colored pill badge with an optional icon and label.
- * Used to indicate node type (e.g., "Service", "Agent", "LLM", "Tool").
+ * Uses a pastel background derived from the color with the text in the full color.
  */
 export const TypeBadge: React.FC<TypeBadgeProps> = ({ label, color, icon, textColor }) => (
   <span
     className="osd:inline-flex osd:items-center osd:gap-1 osd:px-2 osd:py-0.5 osd:rounded-full osd:text-xs osd:font-semibold osd:leading-none"
-    style={{ backgroundColor: color, color: textColor ?? '#FFFFFF' }}
+    style={{
+      backgroundColor: `color-mix(in srgb, ${color} 15%, transparent)`,
+      color: textColor ?? color,
+    }}
   >
     {icon && <span className="osd:flex osd:items-center osd:w-3 osd:h-3">{icon}</span>}
     {label}

packages/osd-apm-topology/src/shared/constants/agent.constants.test.ts

@@ -14,12 +14,11 @@ describe('AGENT_NODE_KINDS', () => {
     });
   });
 
-  it('each entry has label, color, and icon fields', () => {
+  it('each entry has label and color fields', () => {
     ALL_KINDS.forEach((kind) => {
       const config = AGENT_NODE_KINDS[kind];
       expect(config.label).toBeDefined();
       expect(config.color).toBeDefined();
-      expect(config.icon).toBeDefined();
     });
   });
 

packages/osd-apm-topology/src/shared/constants/agent.constants.ts

@@ -4,21 +4,10 @@
  */
 
 import type { AgentNodeKind } from '../types/agent.types';
-import {
-  AgentIcon,
-  LlmIcon,
-  ToolIcon,
-  RetrievalIcon,
-  EmbeddingsIcon,
-  ContentIcon,
-  OtherIcon,
-} from '../resources/agents';
 
 export interface AgentNodeKindConfig {
   label: string;
   color: string;
-  /** SVG icon URL for the node kind */
-  icon: string;
   /** Text color for TypeBadge. Dark text for light backgrounds (e.g., amber). */
   textColor?: string;
 }
@@ -27,36 +16,29 @@ export const AGENT_NODE_KINDS: Record<AgentNodeKind, AgentNodeKindConfig> = {
   agent: {
     label: 'Agent',
     color: 'var(--osd-color-type-agent, #54B399)',
-    icon: AgentIcon,
   },
   llm: {
     label: 'LLM',
     color: 'var(--osd-color-type-llm, #DD0A73)',
-    icon: LlmIcon,
   },
   tool: {
     label: 'Tool',
     color: 'var(--osd-color-type-tool, #E7664C)',
-    icon: ToolIcon,
   },
   retrieval: {
     label: 'Retrieval',
     color: 'var(--osd-color-type-retrieval, #B9A888)',
-    icon: RetrievalIcon,
   },
   embeddings: {
     label: 'Embeddings',
     color: 'var(--osd-color-type-embeddings, #6092C0)',
-    icon: EmbeddingsIcon,
   },
   content: {
     label: 'Content',
     color: 'var(--osd-color-type-content, #D6BF57)',
-    icon: ContentIcon,
   },
   other: {
     label: 'Other',
     color: 'var(--osd-color-type-other, #98A2B3)',
-    icon: OtherIcon,
   },
 };