From c18cba4ad5138a777383c7f7008c079e021edc10 Mon Sep 17 00:00:00 2001 From: Googler Date: Tue, 13 May 2025 02:32:43 -0700 Subject: [PATCH] Open details panel on edge label click PiperOrigin-RevId: 758125744 --- src/app/directed_acyclic_graph.ng.html | 1 + src/app/directed_acyclic_graph.ts | 1 + src/app/directed_acyclic_graph_raw.ng.html | 2 ++ src/app/directed_acyclic_graph_raw.spec.ts | 12 ++++++++++++ src/app/directed_acyclic_graph_raw.ts | 1 + .../directed_acyclic_graph_raw_harness.ts | 7 +++++++ 6 files changed, 24 insertions(+) diff --git a/src/app/directed_acyclic_graph.ng.html b/src/app/directed_acyclic_graph.ng.html index 70a962e..aa0baf9 100644 --- a/src/app/directed_acyclic_graph.ng.html +++ b/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)" /> diff --git a/src/app/directed_acyclic_graph.ts b/src/app/directed_acyclic_graph.ts index 0e436ac..6bafbc3 100644 --- a/src/app/directed_acyclic_graph.ts +++ b/src/app/directed_acyclic_graph.ts @@ -254,6 +254,7 @@ export class DirectedAcyclicGraph implements OnInit, OnDestroy { @Output() selectedNodeChange = new EventEmitter(); @Output() groupIterationChanged = new EventEmitter(); @Output() onGroupExpandToggled = new EventEmitter(); + @Output() edgeLabelClick = new EventEmitter(); @Input() hoveredEdge?: DagEdge; diff --git a/src/app/directed_acyclic_graph_raw.ng.html b/src/app/directed_acyclic_graph_raw.ng.html index 7daf61a..8572e08 100644 --- a/src/app/directed_acyclic_graph_raw.ng.html +++ b/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 }} diff --git a/src/app/directed_acyclic_graph_raw.spec.ts b/src/app/directed_acyclic_graph_raw.spec.ts index b925a3e..f83c374 100644 --- a/src/app/directed_acyclic_graph_raw.spec.ts +++ b/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 () => { diff --git a/src/app/directed_acyclic_graph_raw.ts b/src/app/directed_acyclic_graph_raw.ts index f9c96af..d57a837 100644 --- a/src/app/directed_acyclic_graph_raw.ts +++ b/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(); + @Output() edgeLabelClick = new EventEmitter(); @Input() features = createDAGFeatures(); @Input('collapsed') diff --git a/src/app/test_resources/directed_acyclic_graph_raw_harness.ts b/src/app/test_resources/directed_acyclic_graph_raw_harness.ts index 5cf81c2..36faf97 100644 --- a/src/app/test_resources/directed_acyclic_graph_raw_harness.ts +++ b/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}"]`)(); + } }