Repository: kestra-io/kestra
Issue: Dag view : first sequential flow are displayed parallel 
Labels: bug

Example with this flow : http://kestra:8080/ui/flows/org.kestra.tests/inputs?tab=overview


![image](https://user-images.githubusercontent.com/2064609/79754346-af7e5500-8317-11ea-9b3f-10230175db61.png)

All tasks are sequential, tree seems to be good : 
```json
    {
      "folded": false,
      "task": {
        "id": "string",
        "type": "org.kestra.core.tasks.debugs.Return",
        "format": "{{inputs.string}}"
      },
      "relation": "SEQUENTIAL"
    },
    {
      "folded": false,
      "task": {
        "id": "int",
        "type": "org.kestra.core.tasks.debugs.Return",
        "format": "{{inputs.int}}"
      },
      "relation": "SEQUENTIAL",
      "parent": [
        {
          "id": "string"
        }
      ]
    },
```
but they are displayed in parallel 

Issue comments:
don't work as expected : `each-sequential-nested` are displayed like : 
![image](https://user-images.githubusercontent.com/2064609/85787434-af417200-b72b-11ea-973e-fd07dfb56f2b.png)

but the 2 one are sequential :thinking: 

Pull request review comments:

Patch that resolved the issue:
diff --git a/ui/src/components/graph/TopologyTree.vue b/ui/src/components/graph/TopologyTree.vue
index efef4dc457..c6b2b1f37e 100644
--- a/ui/src/components/graph/TopologyTree.vue
+++ b/ui/src/components/graph/TopologyTree.vue
@@ -57,15 +57,15 @@ import VectorCircle from "vue-material-design-icons/Circle";
 const parentHash = node => {
     if (node.parent) {
         const parent = node.parent[0];
-        return (
-            parent.id + (parent.value ? "-" + parent.value : "")
-        ).hashCode();
+        return nodeHash(parent)
     } else {
         return undefined;
     }
 };
-const nodeHash = node =>
-    (node.id + (node.value ? "-" + node.value : "")).hashCode();
+const nodeHash = node => {
+    return (node.id + (node.value ? "-" + node.value : "")).hashCode();
+}
+
 export default {
     components: {
         TreeNode,
@@ -171,9 +171,10 @@ export default {
                     }[node.relation] || "";
                 return edgeOption;
             };
-            const subsetNodesHashes = new Set(
-                this.filteredDataTree.map(nodeHash)
+            const ancestorsHashes = new Set(
+                this.filteredDataTree.filter(e => e.parent).map(e => nodeHash(e.parent[0]))
             );
+            const virtualRootId = this.getVirtualRootNode() && this.getVirtualRootNode().task.id
             for (const node of this.filteredDataTree) {
                 const slug = this.slug(node);
                 const hash = parentHash(node);
@@ -182,10 +183,11 @@ export default {
                     label: `<div class="node-binder" id="node-${slug}"/>`
                 });
                 const options = getOptions(node);
-                if (subsetNodesHashes.has(hash)) {
+                const parentId = node.parent && node.parent[0] && node.parent[0].id
+                if (ancestorsHashes.has(hash) && ['SEQUENTIAL', 'ERROR'].includes(node.relation) && virtualRootId !== parentId) {
                     g.setEdge(parentHash(node), slug, options);
                 } else {
-                    g.setEdge("parent node", slug, options);
+                    g.setEdge("parent node", slug, options)
                 }
             }
             const rootNode = {


Test patch: