Support setting the node state icon and background colors.

PiperOrigin-RevId: 833773611

Author: Googler

src/app/node.spec.ts

@@ -141,6 +141,62 @@ describe('DAG Node', () => {
       expect(createGroup).not.toThrow();
     });
 
+    it('Allows overriding the background color for a node state badge',
+       fakeAsync(async () => {
+         const customBgColor = 'rgb(128, 0, 128)';
+         const node = new DagNode('c', 'execution', 'FAILED', {
+           stateBgColor: customBgColor,
+         });
+         fixture.componentInstance.fakeNode = node;
+
+         const stateElement = await harness.nodeStateElement();
+         const style = await stateElement.getAttribute('style');
+         expect(style).toContain(`background: ${customBgColor}`);
+       }));
+
+    it('Allows overriding the background color for a group state badge',
+       fakeAsync(async () => {
+         const customBgColor = 'rgb(128, 0, 128)';
+         const group = new DagGroup('group-id', [], [], [], 'FAILED', {
+           stateBgColor: customBgColor,
+           hasControlNode: true,
+         });
+         fixture.componentInstance.fakeNode = group.generateControlNode()!;
+         fixture.detectChanges();
+
+         const stateElement = await harness.nodeStateElement();
+         const style = await stateElement.getAttribute('style');
+         expect(style).toContain(`background: ${customBgColor}`);
+       }));
+
+    it('Allows overriding the state icon color for a node',
+       fakeAsync(async () => {
+         const customStateIconColor = 'rgb(128, 0, 128)';
+         const node = new DagNode('c', 'execution', 'FAILED', {
+           stateIconColor: customStateIconColor,
+         });
+         fixture.componentInstance.fakeNode = node;
+
+         const stateElement = await harness.nodeStateElement();
+         const style = await stateElement.getAttribute('style');
+         expect(style).toContain(`color: ${customStateIconColor}`);
+       }));
+
+    it('Allows overriding the state icon color for a group',
+       fakeAsync(async () => {
+         const customStateIconColor = 'rgb(128, 0, 128)';
+         const group = new DagGroup('group-id', [], [], [], 'FAILED', {
+           stateIconColor: customStateIconColor,
+           hasControlNode: true,
+         });
+         fixture.componentInstance.fakeNode = group.generateControlNode()!;
+         fixture.detectChanges();
+
+         const stateElement = await harness.nodeStateElement();
+         const style = await stateElement.getAttribute('style');
+         expect(style).toContain(`color: ${customStateIconColor}`);
+       }));
+
   });
 
   describe('Internals', () => {

src/app/node.ts

@@ -214,8 +214,10 @@ export class DagNodeEl implements OnInit, OnDestroy {
 
   getNodeStateColor(node: DagNode) {
     const {state, icon} = node;
-    return isNoState(state) ?
-        icon!.color :
+    if (isNoState(state)) {
+      return icon!.color;
+    }
+    return node.stateIconColor ||
         this.fetchIcon(this.iconForState(state), 'color');
   }
 
@@ -227,7 +229,8 @@ export class DagNodeEl implements OnInit, OnDestroy {
       icon ? fetchIcon(icon, key) : '';
 
   isNoState = isNoState;
-  bgForState = (state: NodeState) => bgForState(state, this.theme);
+  bgForState = (state: NodeState) =>
+      this.node?.stateBgColor || bgForState(state, this.theme);
   iconForState = (state: NodeState) => iconForState(state, this.theme);
   isTextIcon = isTextIcon;
   convertStateToRuntime = convertStateToRuntime;

src/app/node_spec.ts

@@ -267,6 +267,8 @@ export class DagGroup implements
   conditionalQuery = '';
   callout: NodeCallout = '';
   modifiers = new Set<NodeModifier>();
+  stateBgColor = '';
+  stateIconColor = '';
   stateTooltip = '';
   iconTooltip = '';
   subType?: unknown;
@@ -296,6 +298,8 @@ export class DagGroup implements
         hideControlNodeShadow = false,
         customControlNode = undefined,
         expanded = false,
+        stateBgColor = '',
+        stateIconColor = '',
         stateTooltip = '',
         iconTooltip = '',
         treatAsLoop = false,
@@ -323,6 +327,8 @@ export class DagGroup implements
       hideControlNodeShadow,
       customControlNode,
       expanded,
+      stateBgColor,
+      stateIconColor,
       stateTooltip,
       iconTooltip,
       subType,
@@ -504,6 +510,8 @@ export interface GraphSpec {
 export interface DagNodeMeta {
   displayName?: string;
   state?: NodeState;
+  stateBgColor?: string;
+  stateIconColor?: string;
   stateTooltip?: string;
   iconTooltip?: string;
   /**
@@ -633,6 +641,8 @@ export class DagNode implements
   type: NodeType = 'execution';
   subType: unknown;
   state: NodeState = 'NO_STATE_STATIC';
+  stateBgColor: string = '';
+  stateIconColor: string = '';
   stateTooltip: string = '';
   iconTooltip: string = '';
   conditionalQuery = '';
@@ -663,6 +673,8 @@ export class DagNode implements
         conditionalQuery = '',
         modifiers = new Set<NodeModifier>(),
         callout = '',
+        stateBgColor = '',
+        stateIconColor = '',
         stateTooltip = '',
         iconTooltip = '',
         subType = undefined,
@@ -673,6 +685,8 @@ export class DagNode implements
       id,
       type,
       state,
+      stateBgColor,
+      stateIconColor,
       stateTooltip,
       iconTooltip,
       icon: icon ? {...icon} : icon,
@@ -775,6 +789,8 @@ export class DagNode implements
         displayName,
         icon,
         state,
+        stateBgColor,
+        stateIconColor,
         stateTooltip,
         iconTooltip,
         options,
@@ -804,6 +820,8 @@ export class DagNode implements
         conditionalQuery,
         modifiers,
         callout,
+        stateBgColor,
+        stateIconColor,
         stateTooltip,
         iconTooltip,
         subType,
@@ -840,6 +858,8 @@ export class DagNode implements
       expanded,
       displayName,
       groupLabel,
+      stateBgColor,
+      stateIconColor,
       stateTooltip,
       iconTooltip,
       subType,
@@ -866,6 +886,8 @@ export class DagNode implements
       callout,
       displayName,
       groupLabel,
+      stateBgColor,
+      stateIconColor,
       stateTooltip,
       iconTooltip,
       subType,

src/app/test_resources/node_harness.ts

@@ -47,6 +47,13 @@ export class DagNodeElHarness extends ComponentHarness {
         MatIconHarness.with({selector: '.icon-space .icon.right .mat-icon'}))();
   }
 
+  /**
+   * Returns the `<div>` element for the node state.
+   */
+  async nodeStateElement(): Promise<TestElement> {
+    return this.locatorFor('.icon-space.state')();
+  }
+
   /** Is the icon for the current node Text instead of SVG */
   async hasTextIcon() {
     const element =