Show group label even if a dag group is treated as loop

### Why
It'd be great to show a custom group label even when the `treatAsLoop` of a DagGroup is set as `true` to show a different name for iterations other than `N iterations` for an iterated group.

### Testing
* Screenshot: https://screenshot.googleplex.com/8kYMHodQyzXPWaj

PiperOrigin-RevId: 707731810

src/app/directed_acyclic_graph.spec.ts

@@ -27,7 +27,7 @@ import {DirectedAcyclicGraph, DirectedAcyclicGraphModule} from './directed_acycl
 import {DagNode as Node, type GraphSpec, type NodeRef} from './node_spec';
 import {TEST_IMPORTS, TEST_PROVIDERS} from './test_providers';
 import {DirectedAcyclicGraphHarness} from './test_resources/directed_acyclic_graph_harness';
-import {createDagSkeletonWithCustomGroups, fakeGraph} from './test_resources/fake_data';
+import {createDagSkeletonWithCustomGroups, createDagSkeletonWithGroups, fakeGraph} from './test_resources/fake_data';
 import {initTestBed} from './test_resources/test_utils';
 
 const FAKE_DATA: GraphSpec =
@@ -41,7 +41,6 @@ describe('Directed Acyclic Graph Renderer', () => {
       imports: [DirectedAcyclicGraphModule],
     });
     screenShot = new ScreenshotTest(module.id);
-
   }));
 
   describe('UI', () => {
@@ -166,6 +165,38 @@ describe('Directed Acyclic Graph Renderer', () => {
          });
     });
 
+    describe('with group labels', () => {
+      let fixture: ComponentFixture<TestComponent>;
+
+      afterEach(fakeAsync(() => {
+        fixture.destroy();
+      }));
+
+      function setup(options: {treatAsLoop?: boolean} = {}) {
+        const {
+          treatAsLoop = false,
+        } = options;
+        fixture = TestBed.createComponent(TestComponent);
+        const skeleton = createDagSkeletonWithGroups(treatAsLoop);
+        const graphSpec =
+            Node.createFromSkeleton(skeleton.skeleton, skeleton.state);
+        fixture.componentRef.setInput('graph', graphSpec);
+        fixture.detectChanges();
+      }
+
+      it('renders group label when it is given', async () => {
+        setup();
+        await screenShot.expectMatch(`graph_group_with_label`);
+      });
+
+      it('renders group label instead of number of iterations correctly when treatAsLoop is true',
+         async () => {
+           setup({treatAsLoop: true});
+           await screenShot.expectMatch(
+               `graph_group_with_label_and_treat_as_loop`);
+         });
+    });
+
     describe('when loading', () => {
       let fixture: ComponentFixture<TestComponent>;
       beforeEach(() => {
@@ -230,4 +261,4 @@ class TestComponent {
   @Input() graph: GraphSpec = FAKE_DATA;
   @Input() followNode: NodeRef|null = null;
   @Input() loading = false;
-}
+}

src/app/directed_acyclic_graph_raw.ng.html

@@ -385,15 +385,16 @@
         This causes the DAG to open up, fade-in the label before hiding it,
         which looks very glitchy
       -->
-      <span *ngIf="group.treatAsLoop" class="fade-in" [attr.aria-hidden]="isGroupExpanded(group)">
-        <span class="iteration-counter"> {{ getIterationsFor(group).length }} iterations </span>
-      </span>
       @if (showGroupLabel(group)) {
         <div class="group-label">
           <span class="fade-in">
             <span> {{ group.groupLabel }} </span>
           </span>
         </div>
+      } @else if (group.treatAsLoop) {
+        <span class="fade-in" [attr.aria-hidden]="isGroupExpanded(group)">
+          <span class="iteration-counter"> {{ getIterationsFor(group).length }} iterations </span>
+        </span>
       }
       <button
         class="expand-toggle"

src/app/directed_acyclic_graph_raw.ts

@@ -460,13 +460,15 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
   }
 
   showGroupLabel(group: DagGroup) {
-    if (group.treatAsLoop || !group.groupLabel) return false;
+    if (!group.groupLabel) return false;
     if (this.isGroupExpanded(group) && group.hasControlNode &&
         !group.hideControlNodeOnExpand) {
-      return false
+      return false;
     }
-    return true
+
+    return true;
   }
+
   broadcastIterChange(
       group: DagGroup, iterationNode: GroupIterationRecord['iterationNode']) {
     (group as any)._cachedSelection = iterationNode;

src/app/test_resources/fake_data.ts

@@ -610,4 +610,50 @@ export function createDagSkeletonWithCustomGroups(expanded: boolean):
       },
     } as StateTable,
   };
-}
+}
+
+export function createDagSkeletonWithGroups(treatAsLoop: boolean): DagSkeleton {
+  return {
+    state: {
+      'fakeGroup': {
+        state: 'TIMEOUT',
+        description: 'Defaulted to iteration-2',
+        hasControlNode: true,
+        treatAsLoop,
+        selectedLoopId: 'fakeNode1',
+        groupLabel: 'Fake Group',
+        icon: {
+          name: 'group-iterative',
+          iconset: 'cloud_ai',
+          size: 'medium',
+        },
+        groupMeta: {
+          'fakeNode1': {
+            state: 'SUCCEEDED',
+            displayName: 'Fake Node 1',
+          },
+          'fakeNode2': {
+            state: 'SUCCEEDED',
+            displayName: 'Fake Node 2',
+          },
+        },
+      },
+    } as StateTable,
+    skeleton: [
+      {
+        id: 'fakeGroup',
+        type: 'group',
+        definition: [
+          {
+            id: 'fakeNode1',
+            type: 'execution',
+          },
+          {
+            id: 'fakeNode2',
+            type: 'artifact',
+          },
+        ],
+      },
+    ] as DagNodeSkeleton[],
+  };
+}