Modules Diagram: fix blank diagram issue with PreBarrage

src/app/components/modules-diagram/modules-diagram.component.ts

@@ -111,41 +111,47 @@ export class ModulesDiagramComponent implements AfterContentInit, AfterViewCheck
     }
 
     public ngAfterViewInit(): void {
-        // add click listener on every calculator node in the graph, that
-        // corresponds to an open module
-        this.nativeElement.querySelectorAll("g.node").forEach(item => {
-            if (item.id && this.formIsOpen(item.id)) {
-                item.style.cursor = "pointer";
-                item.addEventListener("click", () => {
-                    this.openCalc(item.id);
-                });
-            }
-        });
+        setTimeout(() => { // clodo trick
+            // add click listener on every calculator node in the graph, that
+            // corresponds to an open module
+            this.nativeElement.querySelectorAll("g.node").forEach(item => {
+                if (item.id && this.formIsOpen(item.id)) {
+                    item.style.cursor = "pointer";
+                    item.addEventListener("click", () => {
+                        this.openCalc(item.id);
+                    });
+                }
+            });
+        }, 20); // @WARNING keep timeout > the one in ngAfterContentInit() below
     }
 
     public ngAfterContentInit(): void {
         this.error = false;
-        mermaid.initialize({
-            // theme: "forest"
-            flowchart: {
-                curve: "basis"
-            }
-        });
-        this.nativeElement = this.diagram.nativeElement;
-
-        if (this.hasModules) {
-            // generate graph description
-            const graphDefinition = this.graphDefinition();
-            // draw
-            try {
-                mermaid.render("graphDiv", graphDefinition, (svgCode, bindFunctions) => {
-                    this.nativeElement.innerHTML = svgCode;
-                });
-            } catch (e) {
-                console.error(e);
-                this.error = true;
+        // clodo trick or displaying modules diagram coming from a
+        // PreBarrage module results in a blank diagram
+        setTimeout(() => {
+            mermaid.initialize({
+                // theme: "forest"
+                flowchart: {
+                    curve: "basis"
+                }
+            });
+            this.nativeElement = this.diagram.nativeElement;
+
+            if (this.hasModules) {
+                // generate graph description
+                const graphDefinition = this.graphDefinition();
+                // draw
+                try {
+                    mermaid.render("graphDiv", graphDefinition, (svgCode, bindFunctions) => {
+                        this.nativeElement.innerHTML = svgCode;
+                    });
+                } catch (e) {
+                    console.error(e);
+                    this.error = true;
+                }
             }
-        }
+        }, 10);
     }
 
     public resetZoom() {