Added dag class in UI to detect any cyclic dependency

Author: harshit-soora

apps/dashboard/app/javascript/dag.js

@@ -0,0 +1,64 @@
+// This class will help us to detect if any new edge can lead to cycle or not
+// Thus we can alert user to avoid that edge thus resolving cycle issue on UI
+
+// Directed Acyclic Graph
+export class DAG {
+  #launcher_list;
+  #adjacency_list;
+  #visited;
+  #stack;
+  #has_cycle;
+
+  constructor() {
+    this.#launcher_list = [];
+    this.#adjacency_list = {};
+  }
+
+  addEdge(fromId, toId) {
+      if(!this.#launcher_list.includes(fromId)) {
+        this.#launcher_list.push(fromId);
+      }
+
+      if(!this.#launcher_list.includes(toId)) {
+        this.#launcher_list.push(toId);
+      }
+
+      if (!this.#adjacency_list[fromId]) {
+       this.#adjacency_list[fromId] = [];
+      }
+      this.#adjacency_list[fromId].push(toId);
+
+      this.#has_cycle = false;
+      this.#visited = new Set();
+      this.#stack = new Set();
+      this.#launcher_list.forEach( l => this.#detectCycle(l) );
+
+      // Remove the added edges form the adjacency list
+      if(this.#has_cycle === true) {
+        this.#adjacency_list[fromId].pop();
+      }
+  }
+
+  hasCycle() {
+    return this.#has_cycle;
+  }
+
+  // Basic dfs on graph to find a cycle
+  #detectCycle(id) {
+    if(this.#stack.has(id)) {
+      this.#has_cycle = true;
+      return;
+    }
+    if(this.#visited.has(id)) {
+      return;
+    }
+
+    this.#stack.add(id);
+    this.#visited.add(id);
+    for (const l of this.#adjacency_list[id] || []) {
+      this.#detectCycle(l);
+    }
+
+    this.#stack.delete(id);
+  }
+}

apps/dashboard/app/javascript/workflows.js

@@ -1,3 +1,5 @@
+import { DAG } from './dag.js';
+
 (() => {
   const stage = document.getElementById('stage');
   const edges_svg = document.getElementById('edges');
@@ -7,6 +9,7 @@
   const delete_edge_button = document.getElementById('btn-delete-edge');
   const selected_launcher = document.getElementById('select_launcher');
   const base_launcher_url = document.getElementById('base-launcher-url').value;
+  const dag = new DAG;
 
   const boxes = new Map();
   const edges = [];
@@ -78,9 +81,16 @@
     if (existingEdge) { return; }
 
     const reverseEdge = edges.find(e => e.fromId === toId && e.toId === fromId);
-    if (reverseEdge) { alert('Bidirectional edges are not allowed.') }
+    if (reverseEdge) { 
+      alert('Bidirectional edges are not allowed.');
+      return;
+    }
 
-    
+    dag.addEdge(fromId, toId)
+    if (dag.hasCycle()) { 
+      alert('Adding this edge will create a cyclic dependency among the launchers.');
+      return; 
+    }
 
     const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
     line.classList.add('edge');