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.
Limitations
- If two nodes are in different groups or have a parental difference of more than 1 then we can't show edges between them yet.
- This feature currently works in layout direction left to right or right to left, while using layout top to bottom or bottom to top there is some shifting in x axis of the node

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.spec.ts

@@ -25,10 +25,11 @@ import {ScreenshotTest} from '../screenshot_test';
 import {ColorThemeLoader} from './color_theme_loader';
 import {DagStateService} from './dag-state.service';
 import {STATE_SERVICE_PROVIDER} from './dag-state.service.provider';
+import {type LayoutOptions, RankDirection} from './data_types_internal';
 import {DirectedAcyclicGraph, DirectedAcyclicGraphModule, generateTheme} from './directed_acyclic_graph';
-import {DagNode as Node, type GraphSpec, type NodeRef} from './node_spec';
+import {DagEdge, DagNode as Node, type GraphSpec, type NodeRef} from './node_spec';
 import {DirectedAcyclicGraphHarness} from './test_resources/directed_acyclic_graph_harness';
-import {createDagSkeletonWithCustomGroups, createDagSkeletonWithGroups, fakeGraph, fakeGraphWithColoredLabels, fakeGraphWithEdgeOffsets, fakeGraphWithLabelIcons, fakeGraphWithRotatedLabels} from './test_resources/fake_data';
+import {createDagSkeletonWithCustomGroups, createDagSkeletonWithGroups, createDagSkeletonWithNormalGroups, fakeGraph, fakeGraphWithColoredLabels, fakeGraphWithEdgeOffsets, fakeGraphWithLabelIcons, fakeGraphWithRotatedLabels} from './test_resources/fake_data';
 import {initTestBed} from './test_resources/test_utils';
 
 const FAKE_DATA: GraphSpec =
@@ -167,6 +168,46 @@ describe('Directed Acyclic Graph Renderer', () => {
          });
     });
 
+    describe('with internal edges', () => {
+      let fixture: ComponentFixture<TestComponent>;
+
+      afterEach(fakeAsync(() => {
+        fixture.destroy();
+      }));
+
+      async function setup(options: {
+        hideControlNodeOnExpand?: boolean,
+        expanded?: boolean,
+        internalEdges?: DagEdge[]
+      } = {}) {
+        const {
+          hideControlNodeOnExpand = false,
+          expanded = false,
+          internalEdges = [],
+        } = options;
+        fixture = TestBed.createComponent(TestComponent);
+        const skeleton = createDagSkeletonWithNormalGroups(expanded);
+        const graphSpec =
+            Node.createFromSkeleton(skeleton.skeleton, skeleton.state);
+        fixture.componentRef.setInput('internalEdges', internalEdges);
+        fixture.componentRef.setInput(
+            'rankDirection', RankDirection.LEFT_TO_RIGHT);
+        fixture.componentRef.setInput('graph', graphSpec);
+        fixture.detectChanges();
+        await fixture.whenStable();
+      }
+
+      it('renders correctly with group expanded and internal edges visible',
+         async () => {
+           await setup({
+             expanded: true,
+             internalEdges: [{from: 'client', to: 'node1'}]
+           });
+           fixture.detectChanges();
+           await fixture.whenStable();
+           await screenShot.expectMatch(`graph_expanded_with_internal_edges`);
+         });
+    });
     describe('with group labels', () => {
       let fixture: ComponentFixture<TestComponent>;
 
@@ -298,6 +339,8 @@ describe('Directed Acyclic Graph Renderer', () => {
           [loading]="loading"
           [customNodeTemplates]="{'outlineBasic': outlineBasic}"
           [theme]="theme"
+          [internalEdges]="internalEdges"
+          [layout]="layout"
       >
       </ai-dag-renderer>
     </div>
@@ -337,7 +380,14 @@ describe('Directed Acyclic Graph Renderer', () => {
 class TestComponent {
   @ViewChild('dagRender', {static: false}) dagRender!: DirectedAcyclicGraph;
   @Input() graph: GraphSpec = FAKE_DATA;
+  @Input() internalEdges: DagEdge[] = [];
+  @Input() rankDirection: RankDirection = RankDirection.TOP_TO_BOTTOM;
   @Input() followNode: NodeRef|null = null;
   @Input() loading = false;
   @Input() theme = generateTheme({});
+  get layout(): LayoutOptions {
+    return {
+      rankDirection: this.rankDirection
+    }
+  }
 }

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

@@ -12,6 +12,19 @@
   *ngIf="visible"
 >
   <svg class="edge canvas" aria-hidden="true">
+            <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>
     <ng-container *ngFor="let e of edges; trackBy: edgeTrack">
       <g
         *ngIf="isDagreInit(e)"
@@ -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>