diff --git a/report/report-core/src/main/java/com/mastercard/test/flow/report/JsApp.java b/report/report-core/src/main/java/com/mastercard/test/flow/report/JsApp.java
index cb638ced74..7972b02ddb 100644
--- a/report/report-core/src/main/java/com/mastercard/test/flow/report/JsApp.java
+++ b/report/report-core/src/main/java/com/mastercard/test/flow/report/JsApp.java
@@ -61,10 +61,78 @@ public JsApp( String name, Path resDir ) {
.orElseThrow(
() -> new IllegalStateException( "Failed to find index.html in " + resDir ) );
indexTemplate = new Template( originalIndexPath );
+ Files.delete( originalIndexPath );
}
catch( IOException ioe ) {
throw new UncheckedIOException( "Failed to extract index.html", ioe );
}
+
+ fixLazyChunkLoadingPath( resDir );
+ }
+
+ /**
+ *
+ * I hate this with the heat of a thousand suns, but I really want the
+ * report file structure to be like:
+ *
+ *
+ *
+ * /report
+ * ├ index.html
+ * ├ /detail
+ * │ ├ <hash>.html
+ * │ ├ <hash>.html
+ * │ ├ ...
+ * │ └ <hash>.html
+ * └ /res
+ * ├ main.<hash>.js
+ * ├ polyfills.<hash>.js
+ * ├ <whatever>.<hash>.js
+ * ├ ...
+ * └ styles.<hash>.css
+ *
+ *
+ * This makes the report entrypoint super-obvious. Angular seems to have other
+ * ideas though, and all the stuff that I want in /res is just
+ * splatted into the root directory.
+ *
+ *
+ * We're working around this in two ways:
+ *
+ *
+ * Updating index.html to add /res to resource reference paths.
+ * That's what is happening in {@link Template#insert(Object, Path)}
+ * This method, which is dealing with lazy-loaded javascript chunks by
+ * updating runtime.js to add /res.
+ *
+ *
+ * N.B.: This second fix will work OK for the index page, but it will
+ * fail for the for detail pages, as we can apply the first fix dynamically in
+ * the detail pages, but they all share the same runtime.js file,
+ * and we can only fix the relative path once. For the moment we only need the
+ * runtime.js fix for mermaid, which is only used in the index page, so this
+ * isn't a problem yet.
+ *
+ *
+ * @param resDir
+ */
+ private static void fixLazyChunkLoadingPath( Path resDir ) {
+ try( Stream files = Files.find( resDir, 1,
+ ( path, attr ) -> path.getFileName().toString().startsWith( "runtime." ) ) ) {
+ Path runtime = files.findFirst()
+ .orElse( null );
+ if( runtime != null ) {
+ String content = new String( Files.readAllBytes( runtime ), UTF_8 );
+ String fixed = content.replaceAll( "(\\(\\d+===e\\?\"common\":e\\))", "\"res/\" + $1" );
+ if( fixed.equals( content ) ) {
+ throw new IllegalStateException( "Failed to fix chunk load path" );
+ }
+ Files.write( runtime, fixed.getBytes( UTF_8 ) );
+ }
+ }
+ catch( IOException ioe ) {
+ throw new UncheckedIOException( "Failed to update lazy chunk loading", ioe );
+ }
}
/**
diff --git a/report/report-core/src/test/java/com/mastercard/test/flow/report/WriterTest.java b/report/report-core/src/test/java/com/mastercard/test/flow/report/WriterTest.java
index e9aa68d8a3..bc70d24bbf 100644
--- a/report/report-core/src/test/java/com/mastercard/test/flow/report/WriterTest.java
+++ b/report/report-core/src/test/java/com/mastercard/test/flow/report/WriterTest.java
@@ -77,9 +77,35 @@ void write() throws Exception {
+ "detail/4C5FFE22176C7ABC272D95A0E5D62262.html\n"
+ "detail/823B8031950E57346DCE6FFD4BE56F54.html\n"
+ "index.html\n"
+ + "res/100..js\n"
+ + "res/104..js\n"
+ + "res/124..js\n"
+ + "res/136..js\n"
+ + "res/14..js\n"
+ + "res/170..js\n"
+ + "res/220..js\n"
+ + "res/297..js\n"
+ + "res/331..js\n"
+ + "res/373..js\n"
+ + "res/377..js\n"
+ "res/3rdpartylicenses.txt\n"
+ + "res/435..js\n"
+ + "res/458..js\n"
+ + "res/486..js\n"
+ + "res/487..js\n"
+ + "res/491..js\n"
+ + "res/531..js\n"
+ + "res/552..js\n"
+ + "res/673..js\n"
+ + "res/688..js\n"
+ + "res/703..js\n"
+ + "res/726..js\n"
+ + "res/759..js\n"
+ + "res/829..js\n"
+ + "res/835..js\n"
+ + "res/985..js\n"
+ + "res/common..js\n"
+ "res/favicon.ico\n"
- + "res/index.html\n"
+ "res/main..js\n"
+ "res/polyfills..js\n"
+ "res/runtime..js\n"
diff --git a/report/report-ng/package.json b/report/report-ng/package.json
index 62d463caa3..5634c1de8b 100644
--- a/report/report-ng/package.json
+++ b/report/report-ng/package.json
@@ -22,8 +22,11 @@
"@angular/platform-browser-dynamic": "^14.1.2",
"@angular/router": "^14.1.2",
"@babel/core": "^7.22.5",
+ "@types/d3": "^7.4.0",
"@types/diff-match-patch": "^1.0.32",
+ "@types/dompurify": "^3.0.2",
"diff-match-patch": "^1.0.5",
+ "mermaid": "^10.2.4",
"ngx-markdown": "^14.0.1",
"rxjs": "~7.8.1",
"tslib": "^2.6.0",
@@ -45,4 +48,4 @@
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~4.8.4"
}
-}
\ No newline at end of file
+}
diff --git a/report/report-ng/projects/report/src/app/app.module.ts b/report/report-ng/projects/report/src/app/app.module.ts
index bf285fe0b6..d705d7a2d7 100644
--- a/report/report-ng/projects/report/src/app/app.module.ts
+++ b/report/report-ng/projects/report/src/app/app.module.ts
@@ -55,9 +55,10 @@ import { RouterModule, Routes } from '@angular/router';
import { TagSummaryComponent } from './tag-summary/tag-summary.component';
import { ResidueViewComponent } from './residue-view/residue-view.component';
import { MsgSearchInputComponent } from './msg-search-input/msg-search-input.component';
-import { MatRipple, MatRippleModule } from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
import { HighlightedTextComponent } from './highlighted-text/highlighted-text.component';
import { TextDiffComponent } from './text-diff/text-diff.component';
+import { SystemDiagramComponent } from './system-diagram/system-diagram.component';
const routes: Routes = [
{ path: "diff", component: ModelDiffComponent },
@@ -100,6 +101,7 @@ const routes: Routes = [
MsgSearchInputComponent,
HighlightedTextComponent,
TextDiffComponent,
+ SystemDiagramComponent,
],
imports: [
BrowserAnimationsModule,
diff --git a/report/report-ng/projects/report/src/app/entry-hover.service.spec.ts b/report/report-ng/projects/report/src/app/entry-hover.service.spec.ts
new file mode 100644
index 0000000000..8dc1037152
--- /dev/null
+++ b/report/report-ng/projects/report/src/app/entry-hover.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { EntryHoverService } from './entry-hover.service';
+
+describe('EntryHoverService', () => {
+ let service: EntryHoverService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(EntryHoverService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/report/report-ng/projects/report/src/app/entry-hover.service.ts b/report/report-ng/projects/report/src/app/entry-hover.service.ts
new file mode 100644
index 0000000000..57b79765fe
--- /dev/null
+++ b/report/report-ng/projects/report/src/app/entry-hover.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Entry } from './types';
+
+/**
+ * Mechanism for watching which index entries are hovered over
+ */
+@Injectable({
+ providedIn: 'root'
+})
+export class EntryHoverService {
+
+ listeners: ((entry: Entry | null) => void)[] = [];
+
+ constructor() { }
+
+ onHover(callback: (entry: Entry | null) => void): void {
+ this.listeners.push(callback);
+ }
+
+ hovered(entry: Entry | null): void {
+ this.listeners.forEach(cb => cb(entry));
+ }
+}
diff --git a/report/report-ng/projects/report/src/app/flow-nav-item/flow-nav-item.component.ts b/report/report-ng/projects/report/src/app/flow-nav-item/flow-nav-item.component.ts
index d1a5375070..f1ee8e97ee 100644
--- a/report/report-ng/projects/report/src/app/flow-nav-item/flow-nav-item.component.ts
+++ b/report/report-ng/projects/report/src/app/flow-nav-item/flow-nav-item.component.ts
@@ -1,6 +1,7 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, HostListener } from '@angular/core';
import { Entry } from '../types';
import { IconEmbedService } from '../icon-embed.service';
+import { EntryHoverService } from '../entry-hover.service';
@Component({
selector: 'app-flow-nav-item',
@@ -20,7 +21,10 @@ export class FlowNavItemComponent implements OnInit {
lineClass: string = "";
- constructor(private icons: IconEmbedService,) {
+ constructor(
+ icons: IconEmbedService,
+ private hover: EntryHoverService,
+ ) {
icons.register("check_circle_outline", "error_outline", "help_outline", "new_releases");
}
@@ -48,6 +52,14 @@ export class FlowNavItemComponent implements OnInit {
}
}
+ @HostListener('mouseenter') onMouseEnter() {
+ this.hover.hovered(this.entry);
+ }
+
+ @HostListener('mouseleave') onMouseLeave() {
+ this.hover.hovered(null);
+ }
+
tags(): string[] {
return this.entry.tags.filter(t => {
return this.showResult || (
diff --git a/report/report-ng/projects/report/src/app/index-route/index-route.component.ts b/report/report-ng/projects/report/src/app/index-route/index-route.component.ts
index 3846708d92..948dcc6dee 100644
--- a/report/report-ng/projects/report/src/app/index-route/index-route.component.ts
+++ b/report/report-ng/projects/report/src/app/index-route/index-route.component.ts
@@ -17,4 +17,5 @@ export class IndexRouteComponent implements OnInit {
this.indexData.set(this.index);
}
+ // looking for the route definitions? They're in app.module.ts
}
diff --git a/report/report-ng/projects/report/src/app/index/index.component.html b/report/report-ng/projects/report/src/app/index/index.component.html
index 74bc02f4b2..be5d28f395 100644
--- a/report/report-ng/projects/report/src/app/index/index.component.html
+++ b/report/report-ng/projects/report/src/app/index/index.component.html
@@ -11,6 +11,8 @@
diff --git a/report/report-ng/projects/report/src/app/menu/menu.component.html b/report/report-ng/projects/report/src/app/menu/menu.component.html
index 755a2be282..18db771f79 100644
--- a/report/report-ng/projects/report/src/app/menu/menu.component.html
+++ b/report/report-ng/projects/report/src/app/menu/menu.component.html
@@ -2,7 +2,7 @@
-
+
diff --git a/report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.css b/report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.css
new file mode 100644
index 0000000000..1f27f37a99
--- /dev/null
+++ b/report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.css
@@ -0,0 +1,3 @@
+#container {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.html b/report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.html
new file mode 100644
index 0000000000..5adacc8eab
--- /dev/null
+++ b/report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.html
@@ -0,0 +1,10 @@
+
+
+ Interactions
+ {{summary}}
+
+
+
\ No newline at end of file
diff --git a/report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.spec.ts b/report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.spec.ts
new file mode 100644
index 0000000000..2a216f7b28
--- /dev/null
+++ b/report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.spec.ts
@@ -0,0 +1,38 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SystemDiagramComponent } from './system-diagram.component';
+import { ModelDiffDataService } from '../model-diff-data.service';
+import { RouterTestingModule } from '@angular/router/testing';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MatExpansionModule } from '@angular/material/expansion';
+
+describe('SystemDiagramComponent', () => {
+ let component: SystemDiagramComponent;
+ let fixture: ComponentFixture;
+ let mockMdds;
+
+ beforeEach(async () => {
+ mockMdds = jasmine.createSpyObj([
+ 'path', 'index', 'onFlow', 'flowLoadProgress', 'flowFor']);
+ await TestBed.configureTestingModule({
+ declarations: [SystemDiagramComponent],
+ providers: [
+ { provide: ModelDiffDataService, useValue: mockMdds },
+ ],
+ imports: [
+ RouterTestingModule,
+ BrowserAnimationsModule,
+ MatExpansionModule,
+ ]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(SystemDiagramComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.ts b/report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.ts
new file mode 100644
index 0000000000..1d79fe7736
--- /dev/null
+++ b/report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.ts
@@ -0,0 +1,206 @@
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import mermaid from "mermaid";
+import { ModelDiffDataService } from '../model-diff-data.service';
+import { Entry, Flow, Interaction } from '../types';
+import { FlowFilterService } from '../flow-filter.service';
+import { EntryHoverService } from '../entry-hover.service';
+
+interface Edge {
+ from: string;
+ edge: string;
+ to: string;
+}
+
+/**
+ * Loads filtered flow data in the current model and generates a
+ * system diagram showing actor interactions
+ */
+@Component({
+ selector: 'app-system-diagram',
+ templateUrl: './system-diagram.component.html',
+ styleUrls: ['./system-diagram.component.css']
+})
+export class SystemDiagramComponent implements OnInit {
+ private readonly modelLabel = "this";
+ private readonly invisibleEdge = '~~~';
+ private readonly dottedEdge = '-.->';
+ private readonly lineEdge = '-->';
+ private readonly thickEdge = '==>';
+
+ loadProgress: number = 0;
+ summary: string = "";
+ edges: Edge[] = [];
+ hovered: Entry | null = null;
+
+ @ViewChild('myTestDiv') containerElRef: ElementRef | null = null;
+
+ constructor(
+ private modelData: ModelDiffDataService,
+ private filter: FlowFilterService,
+ private hover: EntryHoverService,
+ ) {
+ modelData.onFlow(this.modelLabel, (label: string, entry: Entry, flow: Flow) => {
+ this.loadProgress = modelData.flowLoadProgress(this.modelLabel);
+ this.refreshEdges();
+ });
+ filter.onUpdate(() => {
+ this.refilterEdges();
+ });
+ hover.onHover((entry: Entry | null) => {
+ this.hovered = entry;
+ this.rehoverFlow();
+ });
+ }
+
+ ngOnInit(): void {
+ // we can't do the get requests to load flow data
+ // when we're browsing on the file system, so let's
+ // avoid errors in the log by not even trying
+ if (location.protocol !== "file:") {
+ // start the model load
+ this.modelData.path(this.modelLabel, "");
+ }
+ }
+
+ /**
+ * Called when a flow has been loaded, recalculates all the edges in the system
+ */
+ private refreshEdges(): void {
+ let requests: { [key: string]: { [key: string]: number } } = {};
+ this.edges = [];
+
+ this.modelData.index(this.modelLabel)?.index?.entries
+ .map(e => this.modelData.flowFor(this.modelLabel, e))
+ .filter(f => f != null)
+ .forEach(f => this.extractEdges(
+ f!.root, this.edges, requests)
+ );
+
+ this.refilterEdges();
+ }
+
+ /**
+ * Recurses through an interaction structure and extracts the requester/responder edges
+ * @param ntr An interaction
+ * @param edges An ordered record of unique requester/responder pairs
+ * @param requests The requester/responder pairs that we've already seen
+ */
+ private extractEdges(
+ ntr: Interaction,
+ edges: Edge[],
+ requests: { [key: string]: { [key: string]: number } }): void {
+
+ if (requests[ntr.requester] == undefined) {
+ requests[ntr.requester] = {};
+ }
+
+ if (requests[ntr.requester][ntr.responder] == undefined) {
+ edges.push({ from: ntr.requester, edge: '', to: ntr.responder });
+ }
+
+ requests[ntr.requester][ntr.responder] = 1;
+
+ ntr.children.forEach(c => this.extractEdges(c, edges, requests)
+ );
+ }
+
+ /**
+ * Called when edge data or filters have changed, updates our calculated
+ * edges to show the filtered subset
+ */
+ private refilterEdges(): void {
+ let requests: { [key: string]: { [key: string]: number } } = {};
+ let filtered: Edge[] = [];
+
+ this.modelData.index(this.modelLabel)?.index?.entries
+ .filter(e => this.filter.passes(e))
+ .map(e => this.modelData.flowFor(this.modelLabel, e))
+ .filter(f => f != null)
+ .forEach(f => this.extractEdges(
+ f!.root, filtered, requests)
+ );
+
+ this.edges
+ .forEach(e => e.edge = this.invisibleEdge);
+ this.edges
+ .filter(e => filtered
+ .filter(f => f.from === e.from && f.to === e.to)
+ .length != 0)
+ .forEach(e => e.edge = this.lineEdge);
+
+ this.rehoverFlow();
+ }
+
+ /**
+ * Called when edge data or filters of hovered entry has changed, updates
+ * our edges to highlight the hovered flow
+ */
+ private rehoverFlow(): void {
+ if (this.hovered !== null) {
+
+ let flow = this.modelData.flowFor(this.modelLabel, this.hovered);
+ if (flow !== null) {
+
+ let requests: { [key: string]: { [key: string]: number } } = {};
+ let highlighted: Edge[] = [];
+ this.extractEdges(flow.root, highlighted, requests);
+
+ this.edges
+ .filter(e => e.edge !== this.invisibleEdge)
+ .forEach(e => e.edge = this.dottedEdge);
+ this.edges
+ .filter(e => highlighted
+ .filter(f => f.from === e.from && f.to === e.to)
+ .length != 0)
+ .forEach(e => e.edge = this.thickEdge);
+ }
+ }
+ else {
+ this.edges
+ .filter(e => e.edge !== this.invisibleEdge)
+ .forEach(e => e.edge = this.lineEdge);
+ }
+ this.rerender();
+ }
+
+ /**
+ * Called when anything has changed, refreshes our diagram and the summary
+ */
+ private rerender(): void {
+ let ic = this.edges
+ .filter(e => e.edge === this.lineEdge || e.edge == this.thickEdge)
+ .length;
+ let actors: Set = new Set();
+ this.edges
+ .filter(e => e.edge === this.lineEdge || e.edge == this.thickEdge)
+ .forEach(e => actors.add(e.from).add(e.to));
+ let ac = actors.size;
+ this.summary = ic + " interactions between " + ac + " actors";
+
+ if (this.containerElRef != null) {
+ // it looks like mermaid doesn't have great support for refreshing
+ // an existing diagram - we have to clear an attribute and manually
+ // delete the generated svg
+ this.containerElRef.nativeElement
+ .querySelector("pre")
+ .removeAttribute("data-processed");
+ this.containerElRef.nativeElement
+ .querySelector("pre")
+ .innerHTML = "";
+
+ if (this.edges.length > 0) {
+ let diagram = "graph LR\n" + this.edges
+ .map(e => " " + e.from + " " + e.edge + " " + e.to)
+ .join("\n");
+ // now we know we have something to draw, put that text into
+ // the dom and trigger mermaid
+ this.containerElRef.nativeElement
+ .querySelector("pre")
+ .innerHTML = diagram;
+
+ mermaid.init();
+ }
+ }
+ }
+
+}
diff --git a/report/report-ng/projects/report/src/index.html b/report/report-ng/projects/report/src/index.html
index be2bba6269..f53e7b99d8 100644
--- a/report/report-ng/projects/report/src/index.html
+++ b/report/report-ng/projects/report/src/index.html
@@ -8,8 +8,75 @@