Add click event for edge label

PiperOrigin-RevId: 757674869

Author: Googler

src/app/directed_acyclic_graph.ng.html

@@ -70,6 +70,7 @@
       (mouseleave)="mousedown = false"
       [class.animate-movement]="animateMove && !graphPanning"
       [resolveReference]="resolveReference"
+      (edgeLabelClick)="edgeLabelClick.emit($event)"
     />
   </section>
 </figure>

src/app/directed_acyclic_graph.ts

@@ -254,6 +254,7 @@ export class DirectedAcyclicGraph implements OnInit, OnDestroy {
   @Output() selectedNodeChange = new EventEmitter<SelectedNode|null>();
   @Output() groupIterationChanged = new EventEmitter<GroupIterationRecord>();
   @Output() onGroupExpandToggled = new EventEmitter<GroupToggleEvent>();
+  @Output() edgeLabelClick = new EventEmitter<DagEdge>();
 
   @Input() hoveredEdge?: DagEdge;
 

src/app/directed_acyclic_graph_raw.ng.html

@@ -76,8 +76,10 @@
     *ngFor="let l of getEdgeLabels(); trackBy: edgeLabelTrack"
     (mouseenter)="setEdgeHover(l.edge, true)"
     (mouseleave)="setEdgeHover(l.edge, false)"
+    (click)="edgeLabelClick.emit(l.edge)"
     [style.transform]="l.mid?.cssTransform"
     [style.color]="getEdgeLabelColor(l.edge)"
+    [attr.edge-label]="l.label"
   >
     {{ l.label }}
   </figcaption>

src/app/directed_acyclic_graph_raw.spec.ts

@@ -151,6 +151,18 @@ describe('Directed Acyclic Graph Raw', () => {
          expect(fixture.componentInstance.dagRaw.groups[1].expanded).toBe(true);
        }));
 
+    it('Correctly sends click events for edge labels',
+       waitForAsync(async () => {
+         const spy = jasmine.createSpy('edgeLabelClick');
+         fixture.componentInstance.dagRaw.edgeLabelClick.subscribe(spy);
+         const edgeLabel = await harness.getEdgeLabel('storage (red-edge)');
+
+         await edgeLabel.click();
+
+         expect(spy).toHaveBeenCalledWith(
+             jasmine.objectContaining({from: 'BigTable', to: 'AutoML Tables'}));
+       }));
+
     // SKIP-PUBLIC
     xit('Groups with expanded attribute are expanded on load',
        waitForAsync(async () => {

src/app/directed_acyclic_graph_raw.ts

@@ -406,6 +406,7 @@ export class DagRaw implements DoCheck, OnInit, OnDestroy {
     return this.$selectedNode;
   }
   @Output() selectedNodeChange = new EventEmitter<SelectedNode|null>();
+  @Output() edgeLabelClick = new EventEmitter<DagEdge>();
 
   @Input() features = createDAGFeatures();
   @Input('collapsed')

src/app/test_resources/directed_acyclic_graph_raw_harness.ts

@@ -158,4 +158,11 @@ export class DagRawHarness extends ComponentHarness {
   async getEdges(selector = '') {
     return this.locatorForAll('.edge-group' + selector)();
   }
+
+  /**
+   * Get an edge label by its text content.
+   */
+  async getEdgeLabel(labelText: string) {
+    return this.locatorFor(`.edge-label[edge-label="${labelText}"]`)();
+  }
 }