From 0253a728cf4d240e2a0a1bb7c03c71ab686ddb40 Mon Sep 17 00:00:00 2001 From: Googler Date: Thu, 19 Dec 2024 18:10:51 -0800 Subject: [PATCH] Fetch execution count per node for async run ### Why This will give users more accurate view of the graph of an async run by exposing the actual number of executions per node for async run without increasing the overall latency to render the page. Note that displaying the number of artifacts is much more expensive as it requires us to fetch events, which takes time that is not much different from fetching the whole data. ### Testing * Screencast: https://screencast.googleplex.com/cast/NDk2Mjc1NDE0MTA5Mzg4OHw2MWRlOGVlYS0zZA PiperOrigin-RevId: 708111788 --- 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 + }