#1382 Fix for lost parentage for nodes in deep structure

cypress/platform/current.html

@@ -41,21 +41,22 @@
       </div>
       <div class="mermaid" style="width: 50%; height: 20%;">
 stateDiagram-v2
-    [*] --> Active
+   [*] --> First
 
-    state Active {
+    state First {
-      [*] --> NumLockOff
+        [*] --> Second
-      NumLockOff --> NumLockOn : EvNumLockPressed
+
-      NumLockOn --> NumLockOff : EvNumLockPressed
+        state Second {
-      --
+            [*] --> second
-      [*] --> CapsLockOff
+            second --> Third
-      CapsLockOff --> CapsLockOn : EvCapsLockPressed
+
-      CapsLockOn --> CapsLockOff : EvCapsLockPressed
+            state Third {
-      --
+                [*] --> third
-      [*] --> ScrollLockOff
+                third --> [*]
-      ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+            }
-      ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+        }
     }
+
       </div>
       <div class="mermaid2" style="width: 50%; height: 20%;">
      stateDiagram-v2

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),

docs/stateDiagram.md

@@ -157,14 +157,14 @@ stateDiagram
 ```
 
 ```mermaid
-stateDiagram
+stateDiagram-v2
     [*] --> First
 
     state First {
         [*] --> Second
         state Second {
-            [*] --> second
+            [*] --> second2
-            second --> Third
+            second2 --> Third
 
             state Third {
                 [*] --> third

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));

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 ',
+    'data',
-    clusterId,
     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,

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 () {
+  it('adjustClustersAndEdges the extracted graphs shall contain the correct links  GLB20', function () {
-      /*
+    /*
-        a --> b
+      a --> b
-        subgraph b [Test]
+      subgraph b [Test]
-          c --> d -->e
+        c --> d -->e
-        end
+      end
-      */
+    */
-      g.setNode('a', { data: 1 });
+    g.setNode('a', { data: 1 });
-      g.setNode('b', { data: 2 });
+    g.setNode('b', { data: 2 });
-      g.setNode('c', { data: 3 });
+    g.setNode('c', { data: 3 });
-      g.setNode('d', { data: 3 });
+    g.setNode('d', { data: 3 });
-      g.setNode('e', { data: 3 });
+    g.setNode('e', { data: 3 });
-      g.setParent('c', 'b');
+    g.setParent('c', 'b');
-      g.setParent('d', 'b');
+    g.setParent('d', 'b');
-      g.setParent('e', 'b');
+    g.setParent('e', 'b');
-      g.setEdge('a', 'b', { data: 'link1' }, '1');
+    g.setEdge('a', 'b', { data: 'link1' }, '1');
-      g.setEdge('c', 'd', { data: 'link2' }, '2');
+    g.setEdge('c', 'd', { data: 'link2' }, '2');
-      g.setEdge('d', 'e', { data: 'link2' }, '2');
+    g.setEdge('d', 'e', { data: 'link2' }, '2');
 
-      logger.info('Graph before', graphlib.json.write(g))
+    logger.info('Graph before', graphlib.json.write(g))
-      adjustClustersAndEdges(g);
+    adjustClustersAndEdges(g);
-      const bGraph = g.node('b').graph;
+    const bGraph = g.node('b').graph;
-      // logger.trace('Graph after', graphlib.json.write(g))
+    // logger.trace('Graph after', graphlib.json.write(g))
-      logger.info('Graph after', graphlib.json.write(bGraph));
+    logger.info('Graph after', graphlib.json.write(bGraph));
-      expect(bGraph.nodes().length).toBe(3);
+    expect(bGraph.nodes().length).toBe(3);
-      expect(bGraph.edges().length).toBe(2);
+    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);
+  });
 
 });
 });