Skip to content

Commit

Permalink
Diagram controls (#459)
Browse files Browse the repository at this point in the history 
* Added controls

* Added testing

* avoided headless failure
  • Loading branch information
@therealryan
therealryan authored Jul 12, 2023
1 parent a0b2b31 commit f433c41
Show file tree
Hide file tree
Showing 7 changed files with 209 additions and 9 deletions.
40 changes: 40 additions & 0 deletions report/report-core/src/test/java/com/mastercard/test/flow/report/index/ServedIndexTest.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import org.junit.jupiter.api.AfterAll;
import org.junit.jupiter.api.Assertions;
import org.junit.jupiter.api.Test;
import org.junit.jupiter.api.condition.DisabledIf;
import org.junit.jupiter.api.extension.ExtendWith;

import com.mastercard.test.flow.report.seq.Browser;
Expand Down Expand Up @@ -58,6 +59,45 @@ void filteredInteractions() {
"Edges:",
" AVA normal solid BEN",
" AVA normal solid CHE <INVISIBLE>" );

iseq.toggleFilteredActorHide()
.hasInteractions(
"Nodes:",
" AVA",
" BEN",
"Edges:",
" AVA normal solid BEN" );
}

/**
* Checks that the user can extract the mermaid markup
*/
@Test
@DisabledIf(value = "java.awt.GraphicsEnvironment#isHeadless",
disabledReason = "no clipboard")
void mermaidMarkup() {
iseq.expandInteractions()
.hasMermaidMarkup(
"graph LR",
" AVA --> BEN",
" AVA --> CHE" );

iseq.diagramOrientation( "TD" )
.hasMermaidMarkup(
"graph TD",
" AVA --> BEN",
" AVA --> CHE" );

iseq.clickTag( "PASS" )
.hasMermaidMarkup(
"graph TD",
" AVA --> BEN",
" AVA ~~~ CHE" );

iseq.toggleFilteredActorHide()
.hasMermaidMarkup(
"graph TD",
" AVA --> BEN" );
}

/**
Expand Down
79 changes: 79 additions & 0 deletions report/report-core/src/test/java/com/mastercard/test/flow/report/seq/IndexSequence.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,10 @@
import static org.junit.jupiter.api.Assertions.assertEquals;
import static org.openqa.selenium.support.ui.ExpectedConditions.elementToBeClickable;

import java.awt.Toolkit;
import java.awt.datatransfer.Clipboard;
import java.awt.datatransfer.DataFlavor;
import java.awt.datatransfer.Transferable;
import java.io.StringReader;
import java.util.ArrayList;
import java.util.List;
Expand Down Expand Up @@ -382,6 +386,81 @@ public IndexSequence expandInteractions() {
return self();
}

/**
* Clicks on the "Copy mermaid" button, then asserts on the clipboard contents.
* Tries to restore the clipboard state to what it was before the test.
*
* @param expected Expected mermaid content
* @return <code>this</code>
*/
public IndexSequence hasMermaidMarkup( String... expected ) {
trace( "hasMermaidMarkup", (Object[]) expected );

Clipboard cb = Toolkit.getDefaultToolkit().getSystemClipboard();
Transferable before = cb.getContents( this );

try {
driver.findElement( By.id( "copy_mermaid_button" ) )
.click();

Transferable after = cb.getContents( this );

assertEquals(
copypasta( expected ),
copypasta( after.getTransferData( DataFlavor.stringFlavor ).toString() ),
"mermaid markup" );
}
catch( Exception e ) {
throw new IllegalStateException( "failed to extract mermaid", e );
}
finally {
cb.setContents( before, ( clipboard, contents ) -> {
// we don't care about losing clipboard ownership
} );
}

return self();
}

/**
* Clicks on the diagram orientation toggles
*
* @param orientation The new orientation
* @return <code>this</code>
*/
public IndexSequence diagramOrientation( String orientation ) {
trace( "diagramOrientation", orientation );

List<WebElement> toggles = driver.findElement( By.id( "interactions_orientation_group" ) )
.findElements( By.tagName( "mat-button-toggle" ) );

toggles.stream()
.filter( e -> orientation.equals( e.getAttribute( "value" ) ) )
.findFirst()
.orElseThrow( () -> new IllegalStateException(
String.format( "Failed to find diagram orientation value '%s' in %s",
orientation, toggles.stream()
.map( e -> e.getAttribute( "value" ) )
.collect( toSet() ) ) ) )
.click();

return self();
}

/**
* Clicks the "hide filtered actors" toggle
*
* @return <code>this</code>
*/
public IndexSequence toggleFilteredActorHide() {
trace( "toggleFilteredActorHide" );

driver.findElement( By.id( "hide_filtered_actors_toggle" ) )
.click();

return self();
}

/**
* Asserts on the displayed interaction diagram.
*
Expand Down
2 changes: 2 additions & 0 deletions report/report-ng/projects/report/src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ 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';
import { ClipboardModule } from '@angular/cdk/clipboard';

const routes: Routes = [
{ path: "diff", component: ModelDiffComponent },
Expand Down Expand Up @@ -106,6 +107,7 @@ const routes: Routes = [
imports: [
BrowserAnimationsModule,
BrowserModule,
ClipboardModule,
DragDropModule,
FormsModule,
HttpClientModule,
Expand Down
4 changes: 4 additions & 0 deletions report/report-ng/projects/report/src/app/icon-embed.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,11 @@ export class IconEmbedService {
clear: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" ><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`,
close: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"/></svg>`,
compare: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h5v2h2V1h-2v2zm0 15H5l5-6v6zm9-15h-5v2h5v13l-5-6v9h5c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>`,
content_copy: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`,
difference: `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"><g><rect fill="none" height="24" width="24"/></g><g><path d="M18,23H4c-1.1,0-2-0.9-2-2V7h2v14h14V23z M14.5,7V5h-2v2h-2v2h2v2h2V9h2V7H14.5z M16.5,13h-6v2h6V13z M15,1H8 C6.9,1,6.01,1.9,6.01,3L6,17c0,1.1,0.89,2,1.99,2H19c1.1,0,2-0.9,2-2V7L15,1z M19,17H8V3h6.17L19,7.83V17z"/></g></svg>`,
error_outline: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>`,
expand_less: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z"/></svg>`,
filter_alt: `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"><g><path d="M0,0h24 M24,24H0" fill="none"/><path d="M7,6h10l-5.01,6.3L7,6z M4.25,5.61C6.27,8.2,10,13,10,13v6c0,0.55,0.45,1,1,1h2c0.55,0,1-0.45,1-1v-6 c0,0,3.72-4.8,5.74-7.39C20.25,4.95,19.78,4,18.95,4H5.04C4.21,4,3.74,4.95,4.25,5.61z"/><path d="M0,0h24v24H0V0z" fill="none"/></g></svg>`,
format_list_bulleted: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>`,
foundation: `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><path d="M19,12h3L12,3L2,12h3v3H3v2h2v3h2v-3h4v3h2v-3h4v3h2v-3h2v-2h-2V12z M7,15v-4.81l4-3.6V15H7z M13,15V6.59l4,3.6V15H13z"/></svg>`,
groups: `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"><rect fill="none" height="24" width="24"/><g><path d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z"/></g></svg>`,
Expand All @@ -45,6 +47,8 @@ export class IconEmbedService {
navigate_before: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M15.61 7.41L14.2 6l-6 6 6 6 1.41-1.41L11.03 12l4.58-4.59z"/></svg>`,
navigate_next: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M10.02 6L8.61 7.41 13.19 12l-4.58 4.59L10.02 18l6-6-6-6z"/></svg>`,
new_releases: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="m23 12-2.44-2.78.34-3.68-3.61-.82-1.89-3.18L12 3 8.6 1.54 6.71 4.72l-3.61.81.34 3.68L1 12l2.44 2.78-.34 3.69 3.61.82 1.89 3.18L12 21l3.4 1.46 1.89-3.18 3.61-.82-.34-3.68L23 12zm-4.51 2.11.26 2.79-2.74.62-1.43 2.41L12 18.82l-2.58 1.11-1.43-2.41-2.74-.62.26-2.8L3.66 12l1.85-2.12-.26-2.78 2.74-.61 1.43-2.41L12 5.18l2.58-1.11 1.43 2.41 2.74.62-.26 2.79L20.34 12l-1.85 2.11zM11 15h2v2h-2zm0-8h2v6h-2z"/></svg>`,
panorama_horizontal: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20 6.54v10.91c-2.6-.77-5.28-1.16-8-1.16s-5.4.39-8 1.16V6.54c2.6.77 5.28 1.16 8 1.16 2.72.01 5.4-.38 8-1.16M21.43 4c-.1 0-.2.02-.31.06C18.18 5.16 15.09 5.7 12 5.7s-6.18-.55-9.12-1.64C2.77 4.02 2.66 4 2.57 4c-.34 0-.57.23-.57.63v14.75c0 .39.23.62.57.62.1 0 .2-.02.31-.06 2.94-1.1 6.03-1.64 9.12-1.64s6.18.55 9.12 1.64c.11.04.21.06.31.06.33 0 .57-.23.57-.63V4.63c0-.4-.24-.63-.57-.63z"/></svg>`,
panorama_vertical: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.94 21.12c-1.1-2.94-1.64-6.03-1.64-9.12s.55-6.18 1.64-9.12c.04-.11.06-.22.06-.31 0-.34-.23-.57-.63-.57H4.63c-.4 0-.63.23-.63.57 0 .1.02.2.06.31C5.16 5.82 5.71 8.91 5.71 12s-.55 6.18-1.64 9.12c-.05.11-.07.22-.07.31 0 .33.23.57.63.57h14.75c.39 0 .63-.24.63-.57-.01-.1-.03-.2-.07-.31zM6.54 20c.77-2.6 1.16-5.28 1.16-8s-.39-5.4-1.16-8h10.91c-.77 2.6-1.16 5.28-1.16 8s.39 5.4 1.16 8H6.54z"/></svg>`,
person: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>`,
psychology: `<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px"><g><rect fill="none" height="24" width="24"/></g><g><g><path d="M15.82,7.22l-1,0.4c-0.21-0.16-0.43-0.29-0.67-0.39L14,6.17C13.98,6.07,13.9,6,13.8,6h-1.6c-0.1,0-0.18,0.07-0.19,0.17 l-0.15,1.06c-0.24,0.1-0.47,0.23-0.67,0.39l-1-0.4c-0.09-0.03-0.2,0-0.24,0.09l-0.8,1.38c-0.05,0.09-0.03,0.2,0.05,0.26l0.85,0.66 C10.02,9.73,10,9.87,10,10c0,0.13,0.01,0.26,0.03,0.39l-0.84,0.66c-0.08,0.06-0.1,0.17-0.05,0.25l0.8,1.39 c0.05,0.09,0.15,0.12,0.25,0.09l0.99-0.4c0.21,0.16,0.43,0.29,0.68,0.39L12,13.83c0.02,0.1,0.1,0.17,0.2,0.17h1.6 c0.1,0,0.18-0.07,0.2-0.17l0.15-1.06c0.24-0.1,0.47-0.23,0.67-0.39l0.99,0.4c0.09,0.04,0.2,0,0.24-0.09l0.8-1.39 c0.05-0.09,0.03-0.19-0.05-0.25l-0.83-0.66C15.99,10.26,16,10.13,16,10c0-0.14-0.01-0.27-0.03-0.39l0.85-0.66 c0.08-0.06,0.1-0.17,0.05-0.26l-0.8-1.38C16.02,7.22,15.91,7.19,15.82,7.22z M13,11.43c-0.79,0-1.43-0.64-1.43-1.43 S12.21,8.57,13,8.57s1.43,0.64,1.43,1.43S13.79,11.43,13,11.43z"/><path d="M19.94,9.06c-0.43-3.27-3.23-5.86-6.53-6.05C13.27,3,13.14,3,13,3C9.47,3,6.57,5.61,6.08,9l-1.93,3.48 C3.74,13.14,4.22,14,5,14h1v2c0,1.1,0.9,2,2,2h1v3h7v-4.68C18.62,15.07,20.35,12.24,19.94,9.06z M14.89,14.63L14,15.05V19h-3v-3H8 v-4H6.7l1.33-2.33C8.21,7.06,10.35,5,13,5c2.76,0,5,2.24,5,5C18,12.09,16.71,13.88,14.89,14.63z"/></g></g></svg>`,
remove: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 13H5v-2h14v2z"/></svg>`,
Expand Down
13 changes: 12 additions & 1 deletion report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
#container {
#interaction_root {
display: flex;
flex-direction: column;
}

#interaction_controls_diagram {
display: flex;
flex-direction: row;
}

#interactions_diagram {
text-align: center;
flex-grow: 1;
}
31 changes: 29 additions & 2 deletions report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,35 @@
<mat-panel-title id="interactions_title">Interactions</mat-panel-title>
<mat-panel-description id="interaction_summary">{{summary}}</mat-panel-description>
</mat-expansion-panel-header>
<div #myTestDiv id="container">
<div #myTestDiv id="interaction_root">
<mat-progress-bar *ngIf="loadProgress != 100" [value]="loadProgress"></mat-progress-bar>
<pre id="interactions_diagram" class="mermaid"></pre>
<div id="interaction_controls_diagram">
<div id="interaction_controls">
<section>
<mat-button-toggle-group id="interactions_orientation_group" [vertical]="true"
[(ngModel)]="orientation" (change)="forceRerender()">
<mat-button-toggle matTooltip="Vertical layout" matTooltipPosition="right" value="TD">
<mat-icon svgIcon="panorama_vertical"></mat-icon>
</mat-button-toggle>
<mat-button-toggle matTooltip="Horizontal layout" matTooltipPosition="right" value="LR">
<mat-icon svgIcon="panorama_horizontal"></mat-icon>
</mat-button-toggle>
</mat-button-toggle-group>
</section>
<section>
<mat-button-toggle id="hide_filtered_actors_toggle" (change)="updateFilterHide($event)"
[checked]="hideFilteredActors" matTooltip="Hide filtered actors" matTooltipPosition="right">
<mat-icon svgIcon="filter_alt"></mat-icon>
</mat-button-toggle>
</section>
<section>
<mat-button-toggle id="copy_mermaid_button" (change)="copyContent($event)"
[cdkCopyToClipboard]="mermaidMarkup" matTooltip="Copy mermaid" matTooltipPosition="right">
<mat-icon svgIcon="content_copy"></mat-icon>
</mat-button-toggle>
</section>
</div>
<pre id="interactions_diagram" class="mermaid"></pre>
</div>
</div>
</mat-expansion-panel>
49 changes: 43 additions & 6 deletions report/report-ng/projects/report/src/app/system-diagram/system-diagram.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ 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';
import { MatButtonToggleChange } from '@angular/material/button-toggle';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { IconEmbedService } from '../icon-embed.service';

interface Edge {
from: string;
Expand Down Expand Up @@ -32,25 +35,39 @@ export class SystemDiagramComponent implements OnInit {
edges: Edge[] = [];
renderedEdgeCount: number = 0;
hovered: Entry | null = null;
orientation: string = "LR";
hideFilteredActors: boolean = false;
mermaidMarkup: string = "";

@ViewChild('myTestDiv') containerElRef: ElementRef | null = null;

constructor(
private modelData: ModelDiffDataService,
private filter: FlowFilterService,
private hover: EntryHoverService,
icons: IconEmbedService,
) {
modelData.onFlow(this.modelLabel, (label: string, entry: Entry, flow: Flow) => {
this.loadProgress = modelData.flowLoadProgress(this.modelLabel);
this.refreshEdges();
});
filter.onUpdate(() => {
this.refilterEdges();
console.log("filter.onUpdate", this.hideFilteredActors);
if (this.hideFilteredActors) {
this.refreshEdges();
}
else {
this.refilterEdges();
}
});
hover.onHover((entry: Entry | null) => {
this.hovered = entry;
this.rehoverFlow();
});

icons.register(
"panorama_vertical", "panorama_horizontal",
"filter_alt", "content_copy");
}

ngOnInit(): void {
Expand All @@ -63,14 +80,33 @@ export class SystemDiagramComponent implements OnInit {
}
}

forceRerender(): void {
this.renderedEdgeCount = -1;
this.refilterEdges();
}

updateFilterHide(event: MatButtonToggleChange) {
this.hideFilteredActors = event.source.checked;
this.renderedEdgeCount = -1;
this.refreshEdges();
}

copyContent(event: MatButtonToggleChange): void {
// we're abusing a toggle button for the visuals, so keep it unchecked
event.source.checked = false;
}

/**
* Called when a flow has been loaded, recalculates all the edges in the system
*/
private refreshEdges(): void {
console.log("refreshEdges", this.hideFilteredActors);

let requests: { [key: string]: { [key: string]: number } } = {};
this.edges = [];

this.modelData.index(this.modelLabel)?.index?.entries
.filter(e => !this.hideFilteredActors || this.filter.passes(e))
.map(e => this.modelData.flowFor(this.modelLabel, e))
.filter(f => f != null)
.forEach(f => this.extractEdges(
Expand Down Expand Up @@ -180,9 +216,13 @@ export class SystemDiagramComponent implements OnInit {
let ac = actors.size;
this.summary = ic + " interactions between " + ac + " actors";

this.mermaidMarkup = "graph " + this.orientation + "\n" + this.edges
.map(e => " " + e.from + " " + e.edge + " " + e.to)
.join("\n");

if (this.containerElRef != null) {
if (this.edges.length != this.renderedEdgeCount) {
// we 've got a new edge - we have to rerender the diagram completely
// we've got a new edge - we have to rerender the diagram completely

// it looks like mermaid doesn't have great support for refreshing
// an existing diagram - we have to clear an attribute and manually
Expand All @@ -195,14 +235,11 @@ export class SystemDiagramComponent implements OnInit {
.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;
.innerHTML = this.mermaidMarkup;

mermaid.init();
this.renderedEdgeCount = this.edges.length;
Expand Down

0 comments on commit f433c41

Please sign in to comment.