From 117b139c86faf36d864c8223c9eb18a86e8a3431 Mon Sep 17 00:00:00 2001 From: Googler Date: Wed, 18 Dec 2024 18:16:53 -0800 Subject: [PATCH] Show group label even if a dag group is treated as loop ### Why It'd be great to show a custom group label even when the `treatAsLoop` of a DagGroup is set as `true` to show a different name for iterations other than `N iterations` for an iterated group. ### Testing * Screenshot: https://screenshot.googleplex.com/8kYMHodQyzXPWaj PiperOrigin-RevId: 707731810 --- 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 + }