From 1a1a3ac0648e626139594b1ebd4359d8229b3de6 Mon Sep 17 00:00:00 2001 From: Googler Date: Sun, 22 Dec 2024 07:07:31 -0800 Subject: [PATCH] Fix Journey Canvas tests on top of cl/705410457 PiperOrigin-RevId: 708806048 --- src/app/demo_page/demo_page.ng.html | 24 +++++++++++ src/app/demo_page/demo_page.scss | 3 ++ src/app/demo_page/demo_page.spec.ts | 15 +++++++ src/app/demo_page/demo_page.ts | 39 ++++++++++++++++++ .../chrome-linux/select-nested-group.png | Bin 0 -> 99057 bytes .../select-nested-iteration-loop.png | Bin 0 -> 100439 bytes src/app/directed_acyclic_graph.ts | 8 +++- src/app/directed_acyclic_graph_raw.ng.html | 6 ++- src/app/directed_acyclic_graph_raw.ts | 23 ++++++++++- src/app/test_resources/demo_page_harness.ts | 5 +++ 10 files changed, 119 insertions(+), 4 deletions(-) create mode 100644 src/app/demo_page/scuba_goldens/demo_page/chrome-linux/select-nested-group.png create mode 100644 src/app/demo_page/scuba_goldens/demo_page/chrome-linux/select-nested-iteration-loop.png diff --git a/src/app/demo_page/demo_page.ng.html b/src/app/demo_page/demo_page.ng.html index 626727d..38b5d29 100644 --- a/src/app/demo_page/demo_page.ng.html +++ b/src/app/demo_page/demo_page.ng.html @@ -556,6 +556,30 @@ + +
+

+ Node selection +

+ + Node/Group + + + {{selectable.label}} + + + +
diff --git a/src/app/demo_page/demo_page.scss b/src/app/demo_page/demo_page.scss index a1535d8..116e12a 100644 --- a/src/app/demo_page/demo_page.scss +++ b/src/app/demo_page/demo_page.scss @@ -71,6 +71,9 @@ h2 { &.demo-select { width: 40%; } + &.demo-select-full-width { + width: 80%; + } } .demo-control-group { diff --git a/src/app/demo_page/demo_page.spec.ts b/src/app/demo_page/demo_page.spec.ts index 7ec7144..3196ea4 100644 --- a/src/app/demo_page/demo_page.spec.ts +++ b/src/app/demo_page/demo_page.spec.ts @@ -113,6 +113,21 @@ describe('Demo Page', () => { await screenShot.expectMatch('dark-mode'); }); }); + + describe('Node selection', () => { + it('Selects correct nested iteration loop node (screenshot)', async () => { + await harness.getNodeSelectInput().then( + select => select.clickOptions( + {text: 'Trainer (TensorFlow Training, it-1)'})); + await screenShot.expectMatch('select-nested-iteration-loop'); + }); + + it('Selects correct nested group node (screenshot)', async () => { + await harness.getNodeSelectInput().then( + select => select.clickOptions({text: 'Fake Exec 1 (sub1)'})); + await screenShot.expectMatch('select-nested-group'); + }) + }) }); diff --git a/src/app/demo_page/demo_page.ts b/src/app/demo_page/demo_page.ts index e2da9ae..3f0458e 100644 --- a/src/app/demo_page/demo_page.ts +++ b/src/app/demo_page/demo_page.ts @@ -20,6 +20,7 @@ import {HttpClientModule} from '@angular/common/http'; import {Component, ElementRef, NgModule, TemplateRef, ViewChild, ViewEncapsulation} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; +import {MatOptionModule} from '@angular/material/core'; import {MatDialog, MatDialogModule} from '@angular/material/dialog'; import {MatDividerModule} from '@angular/material/divider'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -170,6 +171,32 @@ function translateColor(col: string, isBg = false) { } } +function getAllSelectableNestedNodesAndGroups( + params: {nodes: DagNode[], groups: DagGroup[]}, + path: string[] = []): Array { + const allNodesAndGroups = []; + const pathLabel = path.length ? ` (${path.join(', ')})` : ''; + for (const subGroup of params.groups) { + allNodesAndGroups.push( + {node: subGroup, path, label: `${subGroup.id}${pathLabel}`}); + if (!subGroup.treatAsLoop) { + allNodesAndGroups.push(...getAllSelectableNestedNodesAndGroups( + subGroup, [...path, subGroup.id])); + } else { + // We need to skip the iteration node itself, as it is not selectable + subGroup.groups.forEach((iterationGroup) => { + allNodesAndGroups.push(...getAllSelectableNestedNodesAndGroups( + iterationGroup, [...path, subGroup.id, iterationGroup.id])); + }); + } + } + for (const subNode of params.nodes) { + allNodesAndGroups.push( + {node: subNode, path, label: `${subNode.id}${pathLabel}`}); + } + return allNodesAndGroups; +} + /** Demo component for directed acyclic graph view. */ @Component({ standalone: false, @@ -237,6 +264,7 @@ export class DagDemoPage { userConfigChange = new Subject(); destroy = new Subject(); + allSelectableNodesAndGroups: Array = []; constructor(public dialog: MatDialog) { this.setCurrDataset(DEFAULT_DATASET, true); this.resetAll(); @@ -339,6 +367,8 @@ export class DagDemoPage { const newGraph = cloneGraph(this.datasets[name]); this.calibrateNodes(newGraph); this.currDataset = newGraph; + this.allSelectableNodesAndGroups = + getAllSelectableNestedNodesAndGroups(newGraph); } onDatasetChanged(event: Event) { @@ -531,6 +561,14 @@ export class DagDemoPage { this.destroy.next(); this.destroy.complete(); } + + triggerSelection(node: SelectedNode) { + this.selectedNode = node; + } + + selectedNodeComparator(a: SelectedNode, b: SelectedNode) { + return a.node.id === b.node.id && a.path.join('') === b.path.join(''); + } } @NgModule({ @@ -546,6 +584,7 @@ export class DagDemoPage { DagScaffoldModule, DagToolbarModule, MatSelectModule, + MatOptionModule, WorkflowGraphIconModule, MatDialogModule, FormsModule, diff --git a/src/app/demo_page/scuba_goldens/demo_page/chrome-linux/select-nested-group.png b/src/app/demo_page/scuba_goldens/demo_page/chrome-linux/select-nested-group.png new file mode 100644 index 0000000000000000000000000000000000000000..32d26d7db39b75aa801ad588b6e9aa608a15001c GIT binary patch literal 99057 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