Introduce labels to groups in the workflow graph. This is useful for …

…distinguishing between different groups when control nodes are not present.

The labels are displayed in a small box at the top of the group. The box is positioned so that it does not overlap with the control node or the expand/collapse button.

The labels are optional. If a group does not have a label, then no label will be displayed.

PiperOrigin-RevId: 698094195

src/app/directed_acyclic_graph_raw.ng.html

@@ -389,6 +389,13 @@
       <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>
+      }
       <button
         class="expand-toggle"
         role="button"

src/app/directed_acyclic_graph_raw.scss

@@ -308,6 +308,26 @@
       transition: opacity $graph-change-speed;
       transition-delay: calc(2 * #{$graph-change-speed});
     }
+    > .group-label {
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 50px;
+      padding: 0.25em 0.75em;
+      position: absolute;
+      top: 0;
+      left: 5%;
+      transform: translateY(-50%);
+      /* This color is needed to maintain GAR level contrast with #fff text */
+      background: #1a73e8;
+      color: white;
+      opacity: 1;
+      transition: opacity $graph-change-speed;
+      transition-delay: calc(2 * #{$graph-change-speed});
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 80%;
+    }
     > .expand-toggle {
       &:focus-visible {
         opacity: 1;

src/app/directed_acyclic_graph_raw.ts

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

src/app/node_spec.ts

@@ -252,6 +252,7 @@ export class DagGroup implements
         'icon'|'subType'> {
   id = '';
   displayName = '';
+  groupLabel = '';
   nodes: DagNode[] = [];
   edges: DagEdge[] = [];
   groups: DagGroup[] = [];
@@ -283,6 +284,7 @@ export class DagGroup implements
       id: string, nodes: DagNode[] = [], edges: DagEdge[] = [],
       groups: DagGroup[] = [], state: NodeState = 'NO_STATE_STATIC', {
         displayName = '',
+        groupLabel = '',
         description = '',
         descriptionTooltip = '',
         conditionalQuery = '',
@@ -312,6 +314,7 @@ export class DagGroup implements
       groups,
       state,
       displayName,
+      groupLabel,
       description,
       descriptionTooltip,
       conditionalQuery,
@@ -525,6 +528,8 @@ export type DagCustomNodeMeta = DagNodeMeta&Partial<CustomNodeProps>;
  * - `hasControlNode` is only allowed for `DagGroup` entries
  */
 export interface DagGroupMeta extends DagNodeMeta {
+  /** A label to display on the group */
+  groupLabel?: string;
   /** The nested metadata for this group's members */
   groupMeta?: StateTable;
   /** Should we generate a controlNode via parameters given to group */
@@ -791,6 +796,7 @@ export class DagNode implements
       customControlNode,
       expanded,
       displayName,
+      groupLabel,
       stateTooltip,
       iconTooltip,
       subType,
@@ -819,6 +825,7 @@ export class DagNode implements
       modifiers,
       callout,
       displayName,
+      groupLabel,
       stateTooltip,
       iconTooltip,
       subType,

src/app/test_resources/fake_data.ts

@@ -593,6 +593,7 @@ export function createDagSkeletonWithCustomGroups(expanded: boolean):
       'customGroup': {
         state: 'NO_STATE_RUNTIME',
         displayName: 'Custom group node',
+        groupLabel: 'Label for custom group',
         hasControlNode: true,
         hideControlNodeOnExpand: true,
         expanded,