From c3f2e8dde16fa9826cd2993ee88835a9965f971f Mon Sep 17 00:00:00 2001
From: Knut Sveidqvist <knut.sveidqvist@ipiccolo.com>
Date: Thu, 16 Apr 2020 19:44:11 +0200
Subject: [PATCH] #1295 Render fix for flowchart, correct marker handling and
 some cleanup

---
 cypress/platform/current.html             |  15 +-
 src/dagre-wrapper/clusters.js             |  10 +-
 src/dagre-wrapper/edges.js                |  23 +-
 src/dagre-wrapper/index.js                |  64 +++--
 src/dagre-wrapper/markers.js              |  24 +-
 src/dagre-wrapper/mermaid-graphlib.js     | 283 +++-------------------
 src/dagre-wrapper/nodes.js                |  23 +-
 src/diagrams/flowchart/flowRenderer-v2.js |   2 +
 8 files changed, 126 insertions(+), 318 deletions(-)

diff --git a/cypress/platform/current.html b/cypress/platform/current.html
index dd32f0be0..01ce04d88 100644
--- a/cypress/platform/current.html
+++ b/cypress/platform/current.html
@@ -7,7 +7,7 @@
     <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC&display=swap" rel="stylesheet">
     <style>
       body {
-        background: white;
+        background: rgb(221, 208, 208);
         font-family: 'Arial';
         }
       h1 { color: white;}
@@ -98,9 +98,20 @@ flowchart TD
         d
       end
     end
-    A -- oAo --> B
+    A -- oAo --o B
     A --> C
     </div>
+      <div class="mermaid" style="width: 100%; height: 100%;">
+flowchart TD
+    subgraph A
+      a
+    end
+    subgraph B
+      b
+    end
+    c-->A
+    c-->B
+  </div>
       <div class="mermaid2" style="width: 100%; height: 100%;">
 stateDiagram-v2
     [*] --> First
diff --git a/src/dagre-wrapper/clusters.js b/src/dagre-wrapper/clusters.js
index ff65496a1..ac1163be8 100644
--- a/src/dagre-wrapper/clusters.js
+++ b/src/dagre-wrapper/clusters.js
@@ -3,7 +3,7 @@ import { logger as log } from '../logger'; // eslint-disable-line
 import createLabel from './createLabel';
 
 const rect = (parent, node) => {
-  log.info('Creating subgraph rect for ', node.id, node);
+  log.trace('Creating subgraph rect for ', node.id, node);
 
   // Add outer g element
   const shapeSvg = parent
@@ -25,7 +25,7 @@ const rect = (parent, node) => {
   const padding = 0 * node.padding;
   const halfPadding = padding / 2;
 
-  log.info('Data ', node, JSON.stringify(node));
+  log.trace('Data ', node, JSON.stringify(node));
   // center the rect around its coordinate
   rect
     .attr('rx', node.rx)
@@ -35,9 +35,7 @@ const rect = (parent, node) => {
     .attr('width', node.width + padding)
     .attr('height', node.height + padding);
 
-  // log.info('bbox', bbox.width, node.x, node.width);
   // Center the label
-  // label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
   label.attr(
     'transform',
     'translate(' +
@@ -130,9 +128,7 @@ const roundedWithTitle = (parent, node) => {
     .attr('width', node.width + padding)
     .attr('height', node.height + padding - bbox.height - 3);
 
-  // log.info('bbox', bbox.width, node.x, node.width);
   // Center the label
-  // label.attr('transform', 'translate(' + adj + ', ' + (node.y - node.height / 2) + ')');
   label.attr(
     'transform',
     'translate(' +
@@ -158,7 +154,7 @@ const shapes = { rect, roundedWithTitle, noteGroup };
 let clusterElems = {};
 
 export const insertCluster = (elem, node) => {
-  log.info('Inserting cluster');
+  log.trace('Inserting cluster');
   const shape = node.shape || 'rect';
   clusterElems[node.id] = shapes[shape](elem, node);
 };
diff --git a/src/dagre-wrapper/edges.js b/src/dagre-wrapper/edges.js
index 6b141a863..0b5e474e2 100644
--- a/src/dagre-wrapper/edges.js
+++ b/src/dagre-wrapper/edges.js
@@ -64,7 +64,7 @@ const outsideNode = (node, point) => {
 };
 
 const intersection = (node, outsidePoint, insidePoint) => {
-  logger.info('intersection o:', outsidePoint, ' i:', insidePoint, node);
+  logger.trace('intersection o:', outsidePoint, ' i:', insidePoint, node);
   const x = node.x;
   const y = node.y;
 
@@ -98,11 +98,10 @@ const intersection = (node, outsidePoint, insidePoint) => {
 };
 
 export const insertEdge = function(elem, edge, clusterDb, diagramType) {
-  logger.info('\n\n\n\n');
   let points = edge.points;
   if (edge.toCluster) {
-    logger.info('edge', edge);
-    logger.info('to cluster', clusterDb[edge.toCluster]);
+    logger.trace('edge', edge);
+    logger.trace('to cluster', clusterDb[edge.toCluster]);
     points = [];
     let lastPointOutside;
     let isInside = false;
@@ -110,11 +109,11 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
       const node = clusterDb[edge.toCluster].node;
 
       if (!outsideNode(node, point) && !isInside) {
-        logger.info('inside', edge.toCluster, point, lastPointOutside);
+        logger.trace('inside', edge.toCluster, point, lastPointOutside);
 
         // First point inside the rect
         const insterection = intersection(node, lastPointOutside, point);
-        logger.info('intersect', insterection);
+        logger.trace('intersect', insterection);
         points.push(insterection);
         isInside = true;
       } else {
@@ -125,8 +124,8 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
   }
 
   if (edge.fromCluster) {
-    logger.info('edge', edge);
-    logger.info('from cluster', clusterDb[edge.toCluster]);
+    logger.trace('edge', edge);
+    logger.trace('from cluster', clusterDb[edge.toCluster]);
     const updatedPoints = [];
     let lastPointOutside;
     let isInside = false;
@@ -135,17 +134,17 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
       const node = clusterDb[edge.fromCluster].node;
 
       if (!outsideNode(node, point) && !isInside) {
-        logger.info('inside', edge.toCluster, point);
+        logger.trace('inside', edge.toCluster, point);
 
         // First point inside the rect
         const insterection = intersection(node, lastPointOutside, point);
-        // logger.info('intersect', intersection(node, lastPointOutside, point));
+        // logger.trace('intersect', intersection(node, lastPointOutside, point));
         updatedPoints.unshift(insterection);
         // points.push(insterection);
         isInside = true;
       } else {
         // at the outside
-        logger.info('Outside point', point);
+        logger.trace('Outside point', point);
         if (!isInside) updatedPoints.unshift(point);
       }
       lastPointOutside = point;
@@ -195,7 +194,7 @@ export const insertEdge = function(elem, edge, clusterDb, diagramType) {
     url = url.replace(/\(/g, '\\(');
     url = url.replace(/\)/g, '\\)');
   }
-  // logger.info('arrowType', edge.arrowType);
+  logger.info('arrowType', edge.arrowType);
   switch (edge.arrowType) {
     case 'arrow_cross':
       svgPath.attr('marker-end', 'url(' + url + '#' + diagramType + '-crossEnd' + ')');
diff --git a/src/dagre-wrapper/index.js b/src/dagre-wrapper/index.js
index c1b2b7933..75ab6be1a 100644
--- a/src/dagre-wrapper/index.js
+++ b/src/dagre-wrapper/index.js
@@ -9,30 +9,20 @@ import {
   findNonClusterChild
 } from './mermaid-graphlib';
 import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';
-import { insertCluster, clear as clearClusters } from './clusters';
+import { insertCluster, clear as clearClusters, positionCluster } from './clusters';
 import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
 import { logger as log } from '../logger';
 
-// let clusterDb = {};
-
-const getAnchorId = id => {
-  // Only insert an achor once
-  if (clusterDb[id]) {
-    return clusterDb[id].id;
-  }
-  return id;
-};
-
-const recursiveRender = (_elem, graph, diagramtype) => {
-  log.info('Graph in recursive render:', graphlib.json.write(graph));
+const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
+  log.trace('Graph in recursive render:', graphlib.json.write(graph), parentCluster);
   const elem = _elem.insert('g').attr('class', 'root'); // eslint-disable-line
   if (!graph.nodes()) {
-    log.info('No nodes found for', graph);
+    log.trace('No nodes found for', graph);
   } else {
-    log.info('Recursive render', graph.nodes());
+    log.trace('Recursive render', graph.nodes());
   }
   if (graph.edges().length > 0) {
-    log.info('Recursive edges', graph.edge(graph.edges()[0]));
+    log.trace('Recursive edges', graph.edge(graph.edges()[0]));
   }
   const clusters = elem.insert('g').attr('class', 'clusters'); // eslint-disable-line
   const edgePaths = elem.insert('g').attr('class', 'edgePaths');
@@ -43,11 +33,18 @@ const recursiveRender = (_elem, graph, diagramtype) => {
   // to the abstract node and is later used by dagre for the layout
   graph.nodes().forEach(function(v) {
     const node = graph.node(v);
-    log.info('(Insert) Node ' + v + ': ' + JSON.stringify(graph.node(v)));
+    if (typeof parentCluster !== 'undefined') {
+      const data = JSON.parse(JSON.stringify(parentCluster.clusterData));
+      // data.clusterPositioning = true;
+      log.trace('Setting data for cluster', data);
+      graph.setNode(parentCluster.id, data);
+      graph.setParent(v, parentCluster.id, data);
+    }
+    log.trace('(Insert) Node ' + v + ': ' + JSON.stringify(graph.node(v)));
     if (node.clusterNode) {
       // const children = graph.children(v);
-      log.info('Cluster identified', v, node, graph.node(v));
-      const newEl = recursiveRender(clusters, node.graph, diagramtype);
+      log.trace('Cluster identified', v, node, graph.node(v));
+      const newEl = recursiveRender(nodes, node.graph, diagramtype, graph.node(v));
       updateNodeBounds(node, newEl);
       setNodeElem(newEl, node);
 
@@ -56,12 +53,12 @@ const recursiveRender = (_elem, graph, diagramtype) => {
       if (graph.children(v).length > 0) {
         // This is a cluster but not to be rendered recusively
         // Render as before
-        log.info('Cluster - the non recursive path', v, node.id, node, graph);
-        log.info(findNonClusterChild(node.id, graph));
+        log.trace('Cluster - the non recursive path', v, node.id, node, graph);
+        log.trace(findNonClusterChild(node.id, graph));
         clusterDb[node.id] = { id: findNonClusterChild(node.id, graph), node };
         // insertCluster(clusters, graph.node(v));
       } else {
-        log.info('Node - the non recursive path', v, node.id, node);
+        log.trace('Node - the non recursive path', v, node.id, node);
         insertNode(nodes, graph.node(v));
       }
     }
@@ -74,22 +71,22 @@ const recursiveRender = (_elem, graph, diagramtype) => {
   graph.edges().forEach(function(e) {
     const edge = graph.edge(e.v, e.w, e.name);
     log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
-    log.info('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));
+    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ', e, ' ', JSON.stringify(graph.edge(e)));
 
     let v = e.v;
     let w = e.w;
     // Check if link is either from or to a cluster
-    log.info('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
+    log.trace('Fix', clusterDb, 'ids:', e.v, e.w, 'Translateing: ', clusterDb[e.v], clusterDb[e.w]);
     // Todo handle case with links
 
     // if (clusterDb[e.v] || clusterDb[e.w]) {
-    //   log.info('Fixing and trixing - removing', e.v, e.w, e.name);
+    //   log.trace('Fixing and trixing - removing', e.v, e.w, e.name);
     //   v = getAnchorId(e.v, graph, nodes);
     //   w = getAnchorId(e.w, graph, nodes);
     //   graph.removeEdge(e.v, e.w, e.name);
     //   if (v !== e.v) edge.fromCluster = e.v;
     //   if (w !== e.w) edge.toCluster = e.w;
-    //   log.info('Fixing Replacing with', v, w, e.name);
+    //   log.trace('Fixing Replacing with', v, w, e.name);
     //   graph.setEdge(v, w, edge, e.name);
     // }
     insertEdgeLabel(edgeLabels, edge);
@@ -98,17 +95,17 @@ const recursiveRender = (_elem, graph, diagramtype) => {
   graph.edges().forEach(function(e) {
     log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(e));
   });
-  log.info('#############################################');
-  log.info('###                Layout                 ###');
-  log.info('#############################################');
-  log.info(graph);
+  log.trace('#############################################');
+  log.trace('###                Layout                 ###');
+  log.trace('#############################################');
+  log.trace(graph);
   dagre.layout(graph);
   log.warn('Graph after layout:', graphlib.json.write(graph));
   // Move the nodes to the correct place
   graph.nodes().forEach(function(v) {
     const node = graph.node(v);
-    // log.info('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
-    log.info(
+    // log.trace('Position ' + v + ': ' + JSON.stringify(graph.node(v)));
+    log.trace(
       'Position ' + v + ': (' + node.x,
       ',' + node.y,
       ') width: ',
@@ -118,6 +115,7 @@ const recursiveRender = (_elem, graph, diagramtype) => {
     );
     if (node && node.clusterNode) {
       // clusterDb[node.id].node = node;
+
       positionNode(node);
     } else {
       // Non cluster node
@@ -135,7 +133,7 @@ const recursiveRender = (_elem, graph, diagramtype) => {
   // Move the edge labels to the correct place after layout
   graph.edges().forEach(function(e) {
     const edge = graph.edge(e);
-    log.info('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
+    log.trace('Edge ' + e.v + ' -> ' + e.w + ': ' + JSON.stringify(edge), edge);
 
     insertEdge(edgePaths, edge, clusterDb, diagramtype);
     positionEdgeLabel(edge);
diff --git a/src/dagre-wrapper/markers.js b/src/dagre-wrapper/markers.js
index 45884e0e8..70c653fdb 100644
--- a/src/dagre-wrapper/markers.js
+++ b/src/dagre-wrapper/markers.js
@@ -16,7 +16,7 @@ const extension = (elem, type, id) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'extensionStart')
+    .attr('id', type + '-extensionStart')
     .attr('class', 'extension ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
@@ -29,7 +29,7 @@ const extension = (elem, type, id) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'extensionEnd ' + type)
+    .attr('id', type + '-extensionEnd ' + type)
     .attr('class', 'extension ' + type)
     .attr('refX', 19)
     .attr('refY', 7)
@@ -44,7 +44,7 @@ const composition = (elem, type) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'compositionStart')
+    .attr('id', type + '-compositionStart')
     .attr('class', 'extension ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
@@ -57,7 +57,7 @@ const composition = (elem, type) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'compositionEnd')
+    .attr('id', type + '-compositionEnd')
     .attr('class', 'extension ' + type)
     .attr('refX', 19)
     .attr('refY', 7)
@@ -71,7 +71,7 @@ const aggregation = (elem, type) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'aggregationStart')
+    .attr('id', type + '-aggregationStart')
     .attr('class', 'extension ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
@@ -84,7 +84,7 @@ const aggregation = (elem, type) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'aggregationEnd')
+    .attr('id', type + '-aggregationEnd')
     .attr('class', type)
     .attr('refX', 19)
     .attr('refY', 7)
@@ -98,7 +98,7 @@ const dependency = (elem, type) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'dependencyStart')
+    .attr('id', type + '-dependencyStart')
     .attr('class', 'extension ' + type)
     .attr('refX', 0)
     .attr('refY', 7)
@@ -111,7 +111,7 @@ const dependency = (elem, type) => {
   elem
     .append('defs')
     .append('marker')
-    .attr('id', 'dependencyEnd')
+    .attr('id', type + '-dependencyEnd')
     .attr('class', type)
     .attr('refX', 19)
     .attr('refY', 7)
@@ -158,7 +158,7 @@ const point = (elem, type) => {
 const circle = (elem, type) => {
   elem
     .append('marker')
-    .attr('id', 'circleEnd')
+    .attr('id', type + '-circleEnd')
     .attr('class', type)
     .attr('viewBox', '0 0 10 10')
     .attr('refX', 11)
@@ -177,7 +177,7 @@ const circle = (elem, type) => {
 
   elem
     .append('marker')
-    .attr('id', 'circleStart')
+    .attr('id', type + '-circleStart')
     .attr('class', type)
     .attr('viewBox', '0 0 10 10')
     .attr('refX', -1)
@@ -197,7 +197,7 @@ const circle = (elem, type) => {
 const cross = (elem, type) => {
   elem
     .append('marker')
-    .attr('id', 'crossEnd')
+    .attr('id', type + '-crossEnd')
     .attr('class', type)
     .attr('viewBox', '0 0 11 11')
     .attr('refX', 12)
@@ -215,7 +215,7 @@ const cross = (elem, type) => {
 
   elem
     .append('marker')
-    .attr('id', 'crossStart')
+    .attr('id', type + '-crossStart')
     .attr('class', type)
     .attr('viewBox', '0 0 11 11')
     .attr('refX', -1)
diff --git a/src/dagre-wrapper/mermaid-graphlib.js b/src/dagre-wrapper/mermaid-graphlib.js
index 30f69dbd9..c7ad345a3 100644
--- a/src/dagre-wrapper/mermaid-graphlib.js
+++ b/src/dagre-wrapper/mermaid-graphlib.js
@@ -19,7 +19,14 @@ export const clear = () => {
 const isDecendant = (id, ancenstorId) => {
   // if (id === ancenstorId) return true;
 
-  log.info('In isDecendant', ancenstorId, ' ', id, ' = ', decendants[ancenstorId].indexOf(id) >= 0);
+  log.debug(
+    'In isDecendant',
+    ancenstorId,
+    ' ',
+    id,
+    ' = ',
+    decendants[ancenstorId].indexOf(id) >= 0
+  );
   if (decendants[ancenstorId].indexOf(id) >= 0) return true;
 
   return false;
@@ -30,7 +37,7 @@ const edgeInCluster = (edge, clusterId) => {
   if (!(edge.v === clusterId || edge.w === clusterId)) return false;
 
   if (!decendants[clusterId]) {
-    log.info('Tilt, ', clustedId, ',not in decendants');
+    log.debug('Tilt, ', clustedId, ',not in decendants');
     return false;
   }
 
@@ -42,50 +49,6 @@ const edgeInCluster = (edge, clusterId) => {
   return false;
 };
 
-const copyOld = (clusterId, graph, newGraph, rootId) => {
-  log.info('Copying to', rootId, ' from ', clusterId, graph.node(clusterId), rootId);
-  const nodes = graph.children(clusterId);
-  log.info('Copying (nodes)', nodes);
-  if (nodes) {
-    nodes.forEach(node => {
-      if (graph.children(node).length > 0) {
-        copy(node, graph, newGraph, rootId);
-      } else {
-        // if (clusterId === rootId) {
-        const data = graph.node(node);
-        log.info('cp ', node, ' to ', rootId, ' with parent ', clusterId); //,node, data, ' parent is ', clusterId);
-        newGraph.setNode(node, data);
-        newGraph.setParent(node, clusterId);
-        const edges = graph.edges(node);
-        log.trace('Copying Edges', edges);
-        edges.forEach(edge => {
-          log.trace('Edge', edge);
-          const data = graph.edge(edge.v, edge.w, edge.name);
-          log.trace('Edge data', data, rootId);
-          try {
-            // Do not copy edges in and out of the root cluster, they belong to the parent graph
-            if (edgeInCluster(edge, rootId)) {
-              log.trace('Copying as ', edge.v, edge.w, data, edge.name);
-              newGraph.setEdge(edge.v, edge.w, data, edge.name);
-              log.trace('newGraph edges ', newGraph.edges(), newGraph.edge(newGraph.edges()[0]));
-            } else {
-              log.trace('Skipping copy of edge as ', rootId, edge.v, edge.w, clusterId);
-            }
-          } catch (e) {
-            log.error(e);
-          }
-        });
-        // } else {
-        //   log.info('Skipping leaf as root ', rootId, ' !== ', clusterId, ' leaf id = ', node);
-        // }
-      }
-      // log.info('Removing node', node, graphlib.json.write(graph));
-      log.info('Removing node', node);
-      graph.removeNode(node);
-    });
-  }
-  // newGraph.setNode(clusterId, graph.node(clusterId));
-};
 const copy = (clusterId, graph, newGraph, rootId) => {
   log.trace(
     'Copying children of ',
@@ -103,7 +66,7 @@ const copy = (clusterId, graph, newGraph, rootId) => {
     nodes.push(clusterId);
   }
 
-  log.info('Copying (nodes)', nodes);
+  log.debug('Copying (nodes)', nodes);
 
   nodes.forEach(node => {
     if (graph.children(node).length > 0) {
@@ -113,11 +76,11 @@ const copy = (clusterId, graph, newGraph, rootId) => {
       log.trace('cp ', node, ' to ', rootId, ' with parent ', clusterId); //,node, data, ' parent is ', clusterId);
       newGraph.setNode(node, data);
       if (clusterId !== rootId && node !== clusterId) {
-        log.info('Setting parent', node, clusterId);
+        log.debug('Setting parent', node, clusterId);
         newGraph.setParent(node, clusterId);
       }
       const edges = graph.edges(node);
-      log.info('Copying Edges', edges);
+      log.debug('Copying Edges', edges);
       edges.forEach(edge => {
         log.trace('Edge', edge);
         const data = graph.edge(edge.v, edge.w, edge.name);
@@ -136,12 +99,12 @@ const copy = (clusterId, graph, newGraph, rootId) => {
         }
       });
     }
-    log.info('Removing node', node);
+    log.debug('Removing node', node);
     graph.removeNode(node);
   });
 };
 export const extractDecendants = (id, graph) => {
-  // log.info('Extracting ', id);
+  // log.debug('Extracting ', id);
   const children = graph.children(id);
   let res = [].concat(children);
 
@@ -153,66 +116,6 @@ export const extractDecendants = (id, graph) => {
   return res;
 };
 
-export const extractGraphFromCluster = (clusterId, graph) => {
-  log.info('Extracting graph ', clusterId);
-  const clusterGraph = new graphlib.Graph({
-    multigraph: true,
-    compound: true
-  })
-    .setGraph({
-      rankdir: 'TB',
-      // Todo: set proper spacing
-      nodesep: 50,
-      ranksep: 50,
-      marginx: 8,
-      marginy: 8
-    })
-    .setDefaultEdgeLabel(function() {
-      return {};
-    });
-
-  // const conf = getConfig().flowchart;
-  // const nodeSpacing = conf.nodeSpacing || 50;
-  // const rankSpacing = conf.rankSpacing || 50;
-
-  // // Create the input mermaid.graph
-  // const g = new graphlib.Graph({
-  //   multigraph: true,
-  //   compound: true
-  // })
-  //   .setGraph({
-  //     rankdir: 'TB',
-  //     nodesep: nodeSpacing,
-  //     ranksep: rankSpacing,
-  //     marginx: 8,
-  //     marginy: 8
-  //   })
-  //   .setDefaultEdgeLabel(function() {
-  //     return {};
-  //   });
-
-  log.trace('Extracting before copy', graphlib.json.write(graph));
-  log.trace('Extracting before copy', graphlib.json.write(graph));
-  copy(clusterId, graph, clusterGraph, clusterId);
-  log.trace('Extracting after copy', graphlib.json.write(graph));
-  log.trace('Extracting after copy', clusterGraph.nodes());
-  graphs[clusterId] = clusterGraph;
-
-  // Remove references to extracted cluster
-  // graph.edges().forEach(edge => {
-  //   if (isDecendant(edge.v, clusterId) || isDecendant(edge.w, clusterId)) {
-  //     graph.removeEdge(edge);
-  //   }
-  // });
-  // graph.nodes().forEach(node => {
-  //   if (isDecendant(node, clusterId)) {
-  //     log.info('Removing ', node, ' from ', clusterId);
-  //     graph.removeNode(node);
-  //   }
-  // });
-  return clusterGraph;
-};
-
 /**
  * Validates the graph, checking that all parent child relation points to existing nodes and that
  * edges between nodes also ia correct. When not correct the function logs the discrepancies.
@@ -274,10 +177,10 @@ const getAnchorId = id => {
 
 export const adjustClustersAndEdges = (graph, depth) => {
   if (!graph || depth > 10) {
-    log.info('Opting out, no graph ');
+    log.debug('Opting out, no graph ');
     return;
   } else {
-    log.info('Opting in, graph ');
+    log.debug('Opting in, graph ');
   }
   // Go through the nodes and for each cluster found, save a replacment node, this can be used when
   // faking a link to a cluster
@@ -291,7 +194,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
         findNonClusterChild(id, graph)
       );
       decendants[id] = extractDecendants(id, graph);
-      clusterDb[id] = { id: findNonClusterChild(id, graph) };
+      clusterDb[id] = { id: findNonClusterChild(id, graph), clusterData: graph.node(id) };
     }
   });
 
@@ -300,9 +203,9 @@ export const adjustClustersAndEdges = (graph, depth) => {
     const children = graph.children(id);
     const edges = graph.edges();
     if (children.length > 0) {
-      log.info('Cluster identified', id, decendants);
+      log.debug('Cluster identified', id, decendants);
       edges.forEach(edge => {
-        // log.info('Edge, decendants: ', edge, decendants[id]);
+        // log.debug('Edge, decendants: ', edge, decendants[id]);
 
         // Check if any edge leaves the cluster (not the actual cluster, thats a link from the box)
         if (edge.v !== id && edge.w !== id) {
@@ -314,8 +217,8 @@ export const adjustClustersAndEdges = (graph, depth) => {
 
           // d1 xor d2 - if either d1 is true and d2 is false or the other way around
           if (d1 ^ d2) {
-            log.info('Edge: ', edge, ' leaves cluster ', id);
-            log.info('Decendants of ', id, ': ', decendants[id]);
+            log.debug('Edge: ', edge, ' leaves cluster ', id);
+            log.debug('Decendants of ', id, ': ', decendants[id]);
             clusterDb[id].externalConnections = true;
           }
         }
@@ -347,7 +250,7 @@ export const adjustClustersAndEdges = (graph, depth) => {
       graph.setEdge(v, w, edge, e.name);
     }
   });
-  log.info('Adjusted Graph', graphlib.json.write(graph));
+  log.debug('Adjusted Graph', graphlib.json.write(graph));
 
   log.trace(clusterDb);
 
@@ -359,91 +262,8 @@ export const adjustClustersAndEdges = (graph, depth) => {
   // });
 };
 
-export const transformClustersToNodes = (graph, depth) => {
-  log.info('transformClustersToNodes - ', depth);
-  if (depth > 10) {
-    log.error('Bailing out');
-    return;
-  }
-  // For clusters without incoming and/or outgoing edges, create a new cluster-node
-  // containing the nodes and edges in the custer in a new graph
-  // for (let i = 0;)
-  const nodes = graph.nodes();
-  let hasChildren = false;
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i];
-    const children = graph.children(node);
-    hasChildren = hasChildren || children.length > 0;
-  }
-
-  if (!hasChildren) {
-    log.info('Done, no node has children', graph.nodes());
-    return;
-  }
-  // const clusters = Object.keys(clusterDb);
-  // clusters.forEach(clusterId => {
-  log.info('Nodes = ', nodes);
-  for (let i = 0; i < nodes.length; i++) {
-    const node = nodes[i];
-
-    log.info(
-      'Handling node',
-      node,
-      clusterDb,
-      clusterDb[node] && !clusterDb[node].externalConnections,
-      !graph.parent(node),
-      graph.node(node)
-    );
-    // Note that the node might have been removed after the Object.keys call so better check
-    // that it still is in the game
-    if (clusterDb[node]) {
-      if (
-        !clusterDb[node].externalConnections &&
-        !graph.parent(node) &&
-        graph.children(node) &&
-        graph.children(node).length > 0
-      ) {
-        log.info('Cluster without external connections', node);
-        // const parentGraph = parent && graphs[parent] ? graphs[parent] : graph;
-        // New graph with the nodes in the cluster
-        log.info('before Extracting ', node, ' parent is ', graph.parent(node));
-        const clusterGraph = extractGraphFromCluster(node, graph);
-
-        if (clusterGraph) {
-          log.trace('Cluster graph', clusterGraph.nodes());
-          log.trace('Graph', graph.edges());
-
-          log.info('Creating node in original', node, clusterGraph);
-
-          // Create a new node in the original graph, this new node is not a cluster
-          // but a regular node with the cluster content as a new attached graph
-          graph.setNode(node, {
-            clusterNode: true,
-            id: node,
-            clusterData: clusterDb[node],
-            labelText: clusterDb[node].labelText,
-            graph: clusterGraph
-          });
-
-          // if any node in the clusterGraph still has children
-          transformClustersToNodes(clusterGraph, depth + 1);
-        }
-
-        // The original edges in and out of the cluster is applied
-        // edges.forEach(edge => {
-        //   log.info('Setting edge', edge);
-        //   const data = graph.edge(edge);
-        //   graph.setEdge(edge.v, edge.w, data);
-        // });
-      }
-    } else {
-      log.info('Not a cluster ', node);
-    }
-  }
-};
-
 export const extractor = (graph, depth) => {
-  log.info('extractor - ', depth, graphlib.json.write(graph), graph.children('D'));
+  log.debug('extractor - ', depth, graphlib.json.write(graph), graph.children('D'));
   if (depth > 10) {
     log.error('Bailing out');
     return;
@@ -460,16 +280,16 @@ export const extractor = (graph, depth) => {
   }
 
   if (!hasChildren) {
-    log.info('Done, no node has children', graph.nodes());
+    log.debug('Done, no node has children', graph.nodes());
     return;
   }
   // const clusters = Object.keys(clusterDb);
   // clusters.forEach(clusterId => {
-  log.info('Nodes = ', nodes, depth);
+  log.debug('Nodes = ', nodes, depth);
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i];
 
-    log.info(
+    log.debug(
       'Extracting node',
       node,
       clusterDb,
@@ -484,7 +304,7 @@ export const extractor = (graph, depth) => {
     // that it still is in the game
     if (!clusterDb[node]) {
       // Skip if the node is not a cluster
-      log.info('Not a cluster', node, depth);
+      log.debug('Not a cluster', node, depth);
       // break;
     } else if (
       !clusterDb[node].externalConnections &&
@@ -492,7 +312,7 @@ export const extractor = (graph, depth) => {
       graph.children(node) &&
       graph.children(node).length > 0
     ) {
-      log.info(
+      log.debug(
         'Cluster without external connections, without a parent and with children',
         node,
         depth
@@ -518,47 +338,14 @@ export const extractor = (graph, depth) => {
       graph.setNode(node, {
         clusterNode: true,
         id: node,
-        clusterData: clusterDb[node],
+        clusterData: clusterDb[node].clusterData,
         labelText: clusterDb[node].labelText,
         graph: clusterGraph
       });
-      log.info('New graph after copy', graphlib.json.write(clusterGraph));
-      log.info('Old graph after copy', graphlib.json.write(graph));
-
-      /*
-      // New graph with the nodes in the cluster
-      log.info('before Extracting ', node, ' parent is ', graph.parent(node));
-      const clusterGraph = extractGraphFromCluster(node, graph);
-
-      if (clusterGraph) {
-        log.trace('Cluster graph', clusterGraph.nodes());
-        log.trace('Graph', graph.edges());
-
-        log.info('Creating node in original', node, clusterGraph);
-
-        // Create a new node in the original graph, this new node is not a cluster
-        // but a regular node with the cluster content as a new attached graph
-        graph.setNode(node, {
-          clusterNode: true,
-          id: node,
-          clusterData: clusterDb[node],
-          labelText: clusterDb[node].labelText,
-          graph: clusterGraph
-        });
-
-        // if any node in the clusterGraph still has children
-        transformClustersToNodes(clusterGraph, depth + 1);
-      }
-
-      // The original edges in and out of the cluster is applied
-      // edges.forEach(edge => {
-      //   log.info('Setting edge', edge);
-      //   const data = graph.edge(edge);
-      //   graph.setEdge(edge.v, edge.w, data);
-      // });
-      */
+      log.debug('New graph after copy', graphlib.json.write(clusterGraph));
+      log.debug('Old graph after copy', graphlib.json.write(graph));
     } else {
-      log.info(
+      log.debug(
         'Cluster ** ',
         node,
         ' **not meeting the criteria !externalConnections:',
@@ -570,16 +357,16 @@ export const extractor = (graph, depth) => {
         graph.children('D'),
         depth
       );
-      log.info(clusterDb);
+      log.debug(clusterDb);
     }
   }
 
   nodes = graph.nodes();
-  log.info('New list of nodes', nodes);
+  log.debug('New list of nodes', nodes);
   for (let i = 0; i < nodes.length; i++) {
     const node = nodes[i];
     const data = graph.node(node);
-    log.info(' Now next leveö', node, data);
+    log.debug(' Now next leveö', node, data);
     if (data.clusterNode) {
       extractor(data.graph, depth + 1);
     }
diff --git a/src/dagre-wrapper/nodes.js b/src/dagre-wrapper/nodes.js
index ec45764e7..08a0e36db 100644
--- a/src/dagre-wrapper/nodes.js
+++ b/src/dagre-wrapper/nodes.js
@@ -248,7 +248,7 @@ const cylinder = (parent, node) => {
 const rect = (parent, node) => {
   const { shapeSvg, bbox, halfPadding } = labelHelper(parent, node, 'node ' + node.classes);
 
-  logger.info('Classes = ', node.classes);
+  logger.trace('Classes = ', node.classes);
   // add the rect
   const rect = shapeSvg.insert('rect', ':first-child');
 
@@ -396,7 +396,22 @@ export const clear = () => {
 
 export const positionNode = node => {
   const el = nodeElems[node.id];
-  logger.debug('Transforming node', node);
-  el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
-  // el.attr('transform', 'translate(' + node.x / 2 + ', ' + 0 + ')');
+  logger.trace(
+    'Transforming node',
+    node,
+    'translate(' + (node.x - node.width / 2 - 5) + ', ' + (node.y - node.height / 2 - 5) + ')'
+  );
+  const padding = 8;
+  if (node.clusterNode) {
+    el.attr(
+      'transform',
+      'translate(' +
+        (node.x - node.width / 2 - padding) +
+        ', ' +
+        (node.y - node.height / 2 - padding) +
+        ')'
+    );
+  } else {
+    el.attr('transform', 'translate(' + node.x + ', ' + node.y + ')');
+  }
 };
diff --git a/src/diagrams/flowchart/flowRenderer-v2.js b/src/diagrams/flowchart/flowRenderer-v2.js
index 9e781a2b5..5e4b2ef87 100644
--- a/src/diagrams/flowchart/flowRenderer-v2.js
+++ b/src/diagrams/flowchart/flowRenderer-v2.js
@@ -188,6 +188,8 @@ export const addEdges = function(edges, g) {
     } else {
       edgeData.arrowhead = 'normal';
     }
+
+    logger.info(edgeData, edge);
     edgeData.arrowType = edge.type;
 
     let style = '';