From 84aeb792d87a0fc4107ea29c8201cdacde0a1c79 Mon Sep 17 00:00:00 2001 From: Googler Date: Thu, 19 Dec 2024 20:28:23 -0800 Subject: [PATCH] Fetch node mlmd data when the node is selected for large async runs ### Why The graph page is not usable when the given pipeline run is an async run with large number of nodes. The update in this CL will render such large graph without loading all the data at initial rendering so it's much more usable and users can interact with it to load data lazily. ### Testing * Screencasts: * Before: https://screencast.googleplex.com/cast/NTE4Njk0NDE4NjE4Nzc3NnxiZThkNmRlNC00Ng * After: https://screencast.googleplex.com/cast/NTk4NDQ2OTk1MjQ5NTYxNnxiNmNlNGY5Zi0wYg PiperOrigin-RevId: 708154672 --- src/app/directed_acyclic_graph.spec.ts | 37 ++++++++++++-- src/app/directed_acyclic_graph_raw.ng.html | 7 +-- src/app/directed_acyclic_graph_raw.ts | 8 +-- .../chrome-linux/graph_group_with_label.png | Bin 0 -> 19224 bytes ...aph_group_with_label_and_treat_as_loop.png | Bin 0 -> 19224 bytes src/app/test_resources/fake_data.ts | 48 +++++++++++++++++- 6 files changed, 90 insertions(+), 10 deletions(-) create mode 100644 src/app/scuba_goldens/directed_acyclic_graph/chrome-linux/graph_group_with_label.png create mode 100644 src/app/scuba_goldens/directed_acyclic_graph/chrome-linux/graph_group_with_label_and_treat_as_loop.png diff --git a/src/app/directed_acyclic_graph.spec.ts b/src/app/directed_acyclic_graph.spec.ts index 5f92bd2..0a041d6 100644 --- a/src/app/directed_acyclic_graph.spec.ts +++ b/src/app/directed_acyclic_graph.spec.ts @@ -27,7 +27,7 @@ import {DirectedAcyclicGraph, DirectedAcyclicGraphModule} from './directed_acycl import {DagNode as Node, type GraphSpec, type NodeRef} from './node_spec'; import {TEST_IMPORTS, TEST_PROVIDERS} from './test_providers'; import {DirectedAcyclicGraphHarness} from './test_resources/directed_acyclic_graph_harness'; -import {createDagSkeletonWithCustomGroups, fakeGraph} from './test_resources/fake_data'; +import {createDagSkeletonWithCustomGroups, createDagSkeletonWithGroups, fakeGraph} from './test_resources/fake_data'; import {initTestBed} from './test_resources/test_utils'; const FAKE_DATA: GraphSpec = @@ -41,7 +41,6 @@ describe('Directed Acyclic Graph Renderer', () => { imports: [DirectedAcyclicGraphModule], }); screenShot = new ScreenshotTest(module.id); - })); describe('UI', () => { @@ -166,6 +165,38 @@ describe('Directed Acyclic Graph Renderer', () => { }); }); + describe('with group labels', () => { + let fixture: ComponentFixture; + + afterEach(fakeAsync(() => { + fixture.destroy(); + })); + + function setup(options: {treatAsLoop?: boolean} = {}) { + const { + treatAsLoop = false, + } = options; + fixture = TestBed.createComponent(TestComponent); + const skeleton = createDagSkeletonWithGroups(treatAsLoop); + const graphSpec = + Node.createFromSkeleton(skeleton.skeleton, skeleton.state); + fixture.componentRef.setInput('graph', graphSpec); + fixture.detectChanges(); + } + + it('renders group label when it is given', async () => { + setup(); + await screenShot.expectMatch(`graph_group_with_label`); + }); + + it('renders group label instead of number of iterations correctly when treatAsLoop is true', + async () => { + setup({treatAsLoop: true}); + await screenShot.expectMatch( + `graph_group_with_label_and_treat_as_loop`); + }); + }); + describe('when loading', () => { let fixture: ComponentFixture; beforeEach(() => { @@ -230,4 +261,4 @@ class TestComponent { @Input() graph: GraphSpec = FAKE_DATA; @Input() followNode: NodeRef|null = null; @Input() loading = false; -} \ No newline at end of file +} diff --git a/src/app/directed_acyclic_graph_raw.ng.html b/src/app/directed_acyclic_graph_raw.ng.html index 3e0fd10..3bf4fb3 100644 --- a/src/app/directed_acyclic_graph_raw.ng.html +++ b/src/app/directed_acyclic_graph_raw.ng.html @@ -385,15 +385,16 @@ This causes the DAG to open up, fade-in the label before hiding it, which looks very glitchy --> - - {{ getIterationsFor(group).length }} iterations - @if (showGroupLabel(group)) {
{{ group.groupLabel }}
+ } @else if (group.treatAsLoop) { + + {{ getIterationsFor(group).length }} iterations + }