Feature Addition

----
Implement External Nodes for Groups

This commit introduces the concept of external nodes to Groups.
It allows a node in the parent graph to be connected to a node
in a group without having to include the external node in the group itself.

The main changes are:
- External Target: The External target provides a `Map<string, { nodes: string[], point: Point, type: 'in'|'out' }>` for each Group
- `internalEdges` input in the Graph: This array is used to provide the edges that are connecting the Group with external nodes
- Rendering logic: The external target node is rendered with a default proxy node template.
- Rendering logic: The edges between the external nodes and internal nodes are rendered.

This feature enable the following:
- Connect a Node in the main DAG to a Node in a Group without having to declare the node in the Group
- Connect a Group with external Nodes
- Keep a consistent look for the group.
- Create complex diagrams using subgraphs.

PiperOrigin-RevId: 777884537

Author: Googler

src/app/directed_acyclic_graph.ng.html

@@ -72,6 +72,7 @@
       [resolveReference]="resolveReference"
       (edgeLabelClick)="edgeLabelClick.emit($event)"
       (hoveredEdgeChange)="hoveredEdgeChange.emit($event)"
+      [internalEdges]="internalEdges"
     />
   </section>
 </figure>

src/app/directed_acyclic_graph.ts

@@ -202,6 +202,8 @@ export class DirectedAcyclicGraph implements OnInit, OnDestroy {
    */
   @Input() optimizeForOrm = false;
 
+  @Input() internalEdges: DagEdge[] = [];
+
   @Input('sizeConfig')
   set sizeConfig(config) {
     this.$sizeConfig = config;

src/app/directed_acyclic_graph_raw.ng.html

@@ -69,6 +69,19 @@
         />
       </g>
     </ng-container>
+    <ng-container *ngFor="let item of externalTargets | keyvalue">
+      <ng-container *ngFor="let node of nodes">
+        <path
+          *ngIf="node.id.startsWith('__proxy_in_')&& node.id.endsWith(item.key)"
+          class="line proxy-line"
+          [attr.d]="buildProxyPath(item.value.point,{x:node.x, y:node.y})"
+          stroke="grey"
+          stroke-width="2"
+          fill="none"
+          style="stroke-dasharray: 5, 5;"
+        />
+      </ng-container>
+    </ng-container>
   </svg>
   <figcaption
     aria-hidden="true"
@@ -366,6 +379,8 @@
           (graphResize)="storeSubDagDims($event, group)"
           [resolveReference]="resolveReference"
           [visible]="isGroupExpanded(group)"
+          [externalTargets]="getExternalTargetsForGroup(group)"
+          [internalEdges]="internalEdges"
         ></ai-dag-raw>
         <ng-container *ngIf="!!(group.treatAsLoop && group._cachedSelection)">
           <ai-dag-raw
@@ -430,3 +445,18 @@
     </div>
   </ng-container>
 </ng-template>
+
+<ng-template #defaultProxyNodeTemplate let-node="node">
+  <div
+    [style.width.px]="node.width"
+    [style.height.px]="node.height"
+    [style.background]="'#666'"
+    [style.border-radius]="'50%'"
+    [style.display]="'flex'"
+    [style.align-items]="'center'"
+    [style.justify-content]="'center'"
+    title="Connection Point"
+  >
+    <!-- No text content -->
+  </div>
+</ng-template>

src/app/directed_acyclic_graph_raw.ts

@@ -18,7 +18,7 @@
 import {LiveAnnouncer} from '@angular/cdk/a11y';
 import {CdkDrag, CdkDragMove, CdkDragStart, DragDropModule} from '@angular/cdk/drag-drop';
 import {CommonModule} from '@angular/common';
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, ElementRef, EventEmitter, Input, KeyValueDiffer, KeyValueDiffers, NgModule, OnChanges, OnDestroy, OnInit, Optional, Output, QueryList, SimpleChanges, TemplateRef, ViewChildren} from '@angular/core';
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DoCheck, ElementRef, EventEmitter, Input, KeyValueDiffer, KeyValueDiffers, NgModule, OnChanges, OnDestroy, OnInit, Optional, Output, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewChildren} from '@angular/core';
 import * as dagre from '@dagrejs/dagre';
 import {Subscription} from 'rxjs';
 
@@ -356,6 +356,12 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
    */
   @Input() visible = true;
 
+  @Input() internalEdges: DagEdge[] = [];
+  @Input()
+  externalTargets:
+      Map<string, {nodes: string[], point: Point, type: 'in'|'out'}> =
+          new Map();
+
   @Input('nodes')
   set nodes(nodes: DagNode[]) {
     // Avoid pointer/reference stability, so that angular will pick up the
@@ -388,6 +394,9 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
     return this.$groups as EnhancedDagGroup[];
   }
 
+  @ViewChild('defaultProxyNodeTemplate', {static: true})
+  defaultProxyNodeTemplate!: TemplateRef<any>;
+
   @ViewChildren('subDag') subDags?: QueryList<DagRaw>;
 
   @Input() hoveredEdge?: DagEdge;
@@ -482,7 +491,9 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['nodes'] || changes['edges'] || changes['groups']) {
+    if (changes['nodes'] || changes['edges'] || changes['groups'] ||
+        changes['externalTargets']) {
+      this.generateRenderableData();
       this.updateGraphLayoutAndReselect();
     }
   }
@@ -533,6 +544,158 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
     return group.hasControlNode &&
         !(group.hideControlNodeOnExpand && this.isGroupExpanded(group));
   }
+  /**
+   * Converts a point in the parent's coordinates to the child's coordinates.
+   */
+  convertParentPointToChild(point: Point, groupId: string): Point|undefined {
+    const group = this.nodeMap.groups[groupId]?.group as EnhancedDagGroup;
+
+    if (!group || group.x === undefined || group.y === undefined) {
+      console.error(`Group ${groupId} not found or not yet positioned.`);
+      return undefined;
+    }
+
+    // group.x and group.y are the center of the group in the parent's
+    // coordinates.
+    const groupOriginX = group.x - group.width / 2;
+    const groupOriginY = group.y - group.height / 2;
+
+    // The padY is added to the height, and the group content is shifted down
+    // by padY So, we need to account for this shift.
+    const offsetY = group.padY ? group.padY : 0;
+    // const offsetY = 0;
+
+    return {
+      x: point.x - groupOriginX,
+      y: point.y - groupOriginY - offsetY,
+    };
+  }
+  /**
+   * Calculates which nodes inside a given group are targeted by edges
+   * originating outside of that group.
+   */
+  getExternalTargetsForGroup(group: DagGroup):
+      Map<string, {nodes: string[], point: Point, type: 'in'|'out'}> {
+    const targetsMap =
+        new Map<string, {nodes: string[], point: Point, type: 'in' | 'out'}>();
+    if (!group) return targetsMap;
+
+    // Create a Set of all node/group IDs that are inside the target group
+    // for
+    // fast lookups.
+    const internalIds = new Set([
+      ...group.nodes.map(n => n.id),
+      ...group.groups.map(g => g.id),
+    ]);
+
+    // Find edges that cross the boundary into or out of the group.
+    for (const edge of this.edges) {
+      const sourceIsInternal = internalIds.has(edge.from);
+      const targetIsInternal = internalIds.has(edge.to);
+      const sourceIsGroup = edge.from === group.id;
+      const targetIsGroup = edge.to === group.id;
+
+      // An incoming edge has an external source and targets the group.
+      if (!sourceIsInternal && targetIsGroup && edge.points?.length) {
+        let intersectionPoint = edge.points[edge.points.length - 1];
+
+        const childIntersectionPoint = this.convertParentPointToChild(
+            intersectionPoint,
+            group.id,
+        );
+        if (childIntersectionPoint) {
+          intersectionPoint = childIntersectionPoint;
+          if (!targetsMap.has(edge.from)) {
+            targetsMap.set(
+                edge.from, {nodes: [], point: intersectionPoint, type: 'in'});
+          }
+        }
+      }
+      // An outgoing edge has the group as source and targets an external node.
+      else if (sourceIsGroup && !targetIsInternal && edge.points?.length) {
+        let intersectionPoint = edge.points[0];
+
+        const childIntersectionPoint = this.convertParentPointToChild(
+            intersectionPoint,
+            group.id,
+        );
+        if (childIntersectionPoint) {
+          intersectionPoint = childIntersectionPoint;
+          if (!targetsMap.has(edge.to)) {
+            targetsMap.set(
+                edge.to, {nodes: [], point: intersectionPoint, type: 'out'});
+          }
+        }
+      }
+    }
+
+    // Find internal nodes connected to the external nodes
+    for (const edge of this.internalEdges) {
+      const sourceIsExternal = targetsMap.has(edge.from);
+      const targetIsInternal = internalIds.has(edge.to);
+      const sourceIsInternal = internalIds.has(edge.from);
+      const targetIsExternal = targetsMap.has(edge.to);
+
+      if (sourceIsExternal && targetIsInternal) {
+        targetsMap.get(edge.from)!.nodes.push(edge.to);
+      } else if (sourceIsInternal && targetIsExternal) {
+        targetsMap.get(edge.to)!.nodes.push(edge.from);
+      }
+    }
+
+    return targetsMap;
+  }
+
+  generateRenderableData() {
+    // Remove existing proxy nodes and edges
+    this.nodes = this.nodes.filter(node => !node.id.startsWith('__proxy_in_'));
+    this.edges =
+        this.edges.filter(edge => !edge.from.startsWith('__proxy_in_'));
+    this.edges = this.edges.filter(edge => !edge.to.startsWith('__proxy_in_'))
+
+    let proxyNodes: DagNode[] = [];
+    let proxyEdges: DagEdge[] = [];
+    // Start with the original data
+    // If there are external targets, create and inject the proxy node and
+    // edges
+    if (this.externalTargets && this.externalTargets.size > 0) {
+      // Sort the external targets based on the Y coordinate of their
+      // intersection point
+      const sortedTargetIds =
+          Array.from(this.externalTargets.keys()).sort((a, b) => {
+            const pointY_A = this.externalTargets.get(a)!.point.y;
+            const pointY_B = this.externalTargets.get(b)!.point.y;
+            return pointY_A - pointY_B;
+          });
+
+      for (const targetId of sortedTargetIds) {
+        console.log('targetId', this.externalTargets.get(targetId)!.point.y);
+        const targetData = this.externalTargets.get(targetId)!;
+        const PROXY_NODE_ID = `__proxy_in_${targetId}`;
+        const proxyNode = new CustomNode(
+            new DagNode(PROXY_NODE_ID, 'artifact'),
+            'proxyNode',  // Or your custom template ref
+            5,            // Width
+            5,            // Height
+        );
+        proxyNodes.push(proxyNode);
+        for (let j = 0; j < targetData.nodes.length; j++) {
+          const targetNodeId = targetData.nodes[j];
+          const PROXY_EDGE_ID = `${PROXY_NODE_ID}_${targetNodeId}`;
+          const isOutgoing = targetData.type === 'out';
+          const proxyEdge = {
+            from: isOutgoing ? targetNodeId : PROXY_NODE_ID,
+            to: isOutgoing ? PROXY_NODE_ID : targetNodeId,
+            style: 'dashed',
+          };
+          proxyEdges.push(proxyEdge);
+        }
+      }
+      // Add the new elements to our renderable arrays
+      this.nodes = [...proxyNodes, ...this.nodes];
+      this.edges = [...this.edges, ...proxyEdges];
+    }
+  }
 
   showGroupLabel(group: DagGroup) {
     if (!group.groupLabel) return false;
@@ -598,6 +761,11 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
 
   getCustomNodeTemplateFor(node: CustomNode) {
     const {templateRef} = node;
+    if (templateRef === 'proxyNode' && !this.customNodeTemplates['proxyNode']) {
+      console.log('proxyNode template not found');
+      console.log(this.defaultProxyNodeTemplate);
+      return this.defaultProxyNodeTemplate;
+    }
     return this.customNodeTemplates[templateRef];
   }
 
@@ -1084,6 +1252,12 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
     ];
   }
 
+  buildProxyPath(start: Point, end: Point): string {
+    const [cp1, cp2] = this.getControlPointsForBezierCurve(start, end);
+    return `M${start.x},${start.y} C${cp1.x},${cp1.y} ${cp2.x},${cp2.y} ${
+        end.x},${end.y}`;
+  }
+
   /**
    * When the edge is in a reversed direction, in order to avoid overlapping
    * between the edges and nodes, the position of the edges in the reversed