From 67aed51742557fabf7e3338d59d6d1e6689bf11a Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Fri, 1 May 2020 19:18:07 +0200
Subject: [PATCH] #1382 Fix for lost parentage for nodes in deep structure

---
 cypress/platform/current.html              | 27 +++----
 docs/examples.md                           |  2 +-
 docs/index.html                            |  3 +-
 docs/stateDiagram.md                       |  6 +-
 src/dagre-wrapper/index.js                 |  2 +-
 src/dagre-wrapper/mermaid-graphlib.js      | 26 +++++--
 src/dagre-wrapper/mermaid-graphlib.spec.js | 82 +++++++++++++++-------
 7 files changed, 98 insertions(+), 50 deletions(-)

diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index 26b0d88cc..6bcf91507 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -41,21 +41,22 @@
       </div>
       <div class="mermaid" style="width: 50%; height: 20%;">
 stateDiagram-v2
-    [*] --> Active
+   [*] --> First
 
-    state Active {
-      [*] --> NumLockOff
-      NumLockOff --> NumLockOn : EvNumLockPressed
-      NumLockOn --> NumLockOff : EvNumLockPressed
-      --
-      [*] --> CapsLockOff
-      CapsLockOff --> CapsLockOn : EvCapsLockPressed
-      CapsLockOn --> CapsLockOff : EvCapsLockPressed
-      --
-      [*] --> ScrollLockOff
-      ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
-      ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+    state First {
+        [*] --> Second
+
+        state Second {
+            [*] --> second
+            second --> Third
+
+            state Third {
+                [*] --> third
+                third --> [*]
+            }
+        }
     }
+
       </div>
       <div class="mermaid2" style="width: 50%; height: 20%;">
      stateDiagram-v2
diff --git a/docs/examples.md b/docs/examples.md
index 127173384..2a00995e5 100644
--- a/docs/examples.md
+++ b/docs/examples.md
@@ -21,7 +21,7 @@ pie title What Voldemort doesn't have?
          "FRIENDS" : 2
          "FAMILY" : 3
          "NOSE" : 45
-```         
+```
 ## Basic sequence diagram
 
 ```
diff --git a/docs/index.html b/docs/index.html
index c3bdbb17b..5b6c79aef 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,7 +7,8 @@
   <meta name="description" content="Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.">
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
-  <script src="//cdn.jsdelivr.net/npm/mermaid@8.5.0/dist/mermaid.min.js"></script>
+  <!-- <script src="//cdn.jsdelivr.net/npm/mermaid@8.5.0/dist/mermaid.min.js"></script> -->
+  <script src="http://localhost:9000/mermaid.js"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/docs/stateDiagram.md b/docs/stateDiagram.md
index 4cc90d103..9f7199a4c 100755
--- a/docs/stateDiagram.md
+++ b/docs/stateDiagram.md
@@ -157,14 +157,14 @@ stateDiagram
 ```
 
 ```mermaid
-stateDiagram
+stateDiagram-v2
     [*] --> First
 
     state First {
         [*] --> Second
         state Second {
-            [*] --> second
-            second --> Third
+            [*] --> second2
+            second2 --> Third
 
             state Third {
                 [*] --> third
diff --git a/src/dagre-wrapper/index.js b/src/dagre-wrapper/index.js
index 9e2f7b851..65ca06aea 100644
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@@ -44,7 +44,7 @@ const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
       graph.setParent(v, parentCluster.id, data);
     }
     log.trace('(Insert) Node ' + v + ': ' + JSON.stringify(graph.node(v)));
-    if (node.clusterNode) {
+    if (node && node.clusterNode) {
       // const children = graph.children(v);
       log.trace('Cluster identified', v, node, graph.node(v));
       const newEl = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
diff --git a/src/dagre-wrapper/mermaid-graphlib.js b/src/dagre-wrapper/mermaid-graphlib.js
index c9cbd1fd9..41248adc2 100644
--- a/src/dagre-wrapper/mermaid-graphlib.js
+++ b/src/dagre-wrapper/mermaid-graphlib.js
@@ -52,12 +52,12 @@ const edgeInCluster = (edge, clusterId) => {
 };
 
 const copy = (clusterId, graph, newGraph, rootId) => {
-  log.trace(
+  log.info(
     'Copying children of ',
     clusterId,
+    'root',
     rootId,
-    ' from ',
-    clusterId,
+    'data',
     graph.node(clusterId),
     rootId
   );
@@ -68,18 +68,33 @@ const copy = (clusterId, graph, newGraph, rootId) => {
     nodes.push(clusterId);
   }
 
-  log.debug('Copying (nodes)', nodes);
+  log.debug('Copying (nodes) clusterId', clusterId, 'nodes', nodes);
 
   nodes.forEach(node => {
     if (graph.children(node).length > 0) {
       copy(node, graph, newGraph, rootId);
     } else {
       const data = graph.node(node);
-      log.trace('cp ', node, ' to ', rootId, ' with parent ', clusterId); //,node, data, ' parent is ', clusterId);
+      log.info('cp ', node, ' to ', rootId, ' with parent ', clusterId); //,node, data, ' parent is ', clusterId);
       newGraph.setNode(node, data);
+      log.debug('Setting parent', node, graph.parent(node));
+      if (rootId !== graph.parent(node)) {
+        newGraph.setParent(node, graph.parent(node));
+      }
+
       if (clusterId !== rootId && node !== clusterId) {
         log.debug('Setting parent', node, clusterId);
         newGraph.setParent(node, clusterId);
+      } else {
+        log.info('In copy ', clusterId, 'root', rootId, 'data', graph.node(clusterId), rootId);
+        log.debug(
+          'Not Setting parent for node=',
+          node,
+          'cluster!==rootId',
+          clusterId !== rootId,
+          'node!==clusterId',
+          node !== clusterId
+        );
       }
       const edges = graph.edges(node);
       log.debug('Copying Edges', edges);
@@ -347,6 +362,7 @@ export const extractor = (graph, depth) => {
           return {};
         });
 
+      log.debug('Old graph before copy', graphlib.json.write(graph));
       copy(node, graph, clusterGraph, node);
       graph.setNode(node, {
         clusterNode: true,
diff --git a/src/dagre-wrapper/mermaid-graphlib.spec.js b/src/dagre-wrapper/mermaid-graphlib.spec.js
index 73bc9a5a7..6dcda35db 100644
--- a/src/dagre-wrapper/mermaid-graphlib.spec.js
+++ b/src/dagre-wrapper/mermaid-graphlib.spec.js
@@ -314,33 +314,63 @@ describe('Graphlib decorations', () => {
     // expect(edgeData.data).toBe('link2');
     // expect(validate(g)).toBe(true);
   });
-    it('adjustClustersAndEdges the extracted graphs shall contain the correct links  GLB20', function () {
-      /*
-        a --> b
-        subgraph b [Test]
-          c --> d -->e
-        end
-      */
-      g.setNode('a', { data: 1 });
-      g.setNode('b', { data: 2 });
-      g.setNode('c', { data: 3 });
-      g.setNode('d', { data: 3 });
-      g.setNode('e', { data: 3 });
-      g.setParent('c', 'b');
-      g.setParent('d', 'b');
-      g.setParent('e', 'b');
-      g.setEdge('a', 'b', { data: 'link1' }, '1');
-      g.setEdge('c', 'd', { data: 'link2' }, '2');
-      g.setEdge('d', 'e', { data: 'link2' }, '2');
+  it('adjustClustersAndEdges the extracted graphs shall contain the correct links  GLB20', function () {
+    /*
+      a --> b
+      subgraph b [Test]
+        c --> d -->e
+      end
+    */
+    g.setNode('a', { data: 1 });
+    g.setNode('b', { data: 2 });
+    g.setNode('c', { data: 3 });
+    g.setNode('d', { data: 3 });
+    g.setNode('e', { data: 3 });
+    g.setParent('c', 'b');
+    g.setParent('d', 'b');
+    g.setParent('e', 'b');
+    g.setEdge('a', 'b', { data: 'link1' }, '1');
+    g.setEdge('c', 'd', { data: 'link2' }, '2');
+    g.setEdge('d', 'e', { data: 'link2' }, '2');
 
-      logger.info('Graph before', graphlib.json.write(g))
-      adjustClustersAndEdges(g);
-      const bGraph = g.node('b').graph;
-      // logger.trace('Graph after', graphlib.json.write(g))
-      logger.info('Graph after', graphlib.json.write(bGraph));
-      expect(bGraph.nodes().length).toBe(3);
-      expect(bGraph.edges().length).toBe(2);
-    });
+    logger.info('Graph before', graphlib.json.write(g))
+    adjustClustersAndEdges(g);
+    const bGraph = g.node('b').graph;
+    // logger.trace('Graph after', graphlib.json.write(g))
+    logger.info('Graph after', graphlib.json.write(bGraph));
+    expect(bGraph.nodes().length).toBe(3);
+    expect(bGraph.edges().length).toBe(2);
+  });
+  it('adjustClustersAndEdges the extracted graphs shall contain the correct links  GLB21', function () {
+    /*
+    state a {
+        state b {
+            state c {
+                e
+            }
+        }
+    }
+    */
+    g.setNode('a', { data: 1 });
+    g.setNode('b', { data: 2 });
+    g.setNode('c', { data: 3 });
+    g.setNode('e', { data: 3 });
+    g.setParent('b', 'a');
+    g.setParent('c', 'b');
+    g.setParent('e', 'c');
+
+    logger.info('Graph before', graphlib.json.write(g))
+    adjustClustersAndEdges(g);
+    const aGraph = g.node('a').graph;
+    const bGraph = aGraph.node('b').graph;
+    logger.info('Graph after', graphlib.json.write(aGraph));
+    const cGraph = bGraph.node('c').graph;
+    // logger.trace('Graph after', graphlib.json.write(g))
+    expect(aGraph.nodes().length).toBe(1);
+    expect(bGraph.nodes().length).toBe(1);
+    expect(cGraph.nodes().length).toBe(1);
+    expect(bGraph.edges().length).toBe(0);
+  });
 
 });
 });