Add visualization for ch 3 - depth limited search and iterative deepening search

Author: Rishav159

3-Solving-Problems-By-Searching/c_costDetails.js

@@ -6,35 +6,36 @@ $(document).ready(function() {
     ucsPathCanvas = null;
   var bfsTwo = null,
     ucsTwo = null;
+  //function to color the given path in the graph in the front end
   var colorPathInGraph = function(graphDrawAgent, path) {
-    let nodeGroups = graphDrawAgent.nodeGroups;
-    for (var i = 0; i < path.path.length; i++) {
-      nodeKey = path.path[i].node;;
-      for (var j = 0; j < nodeGroups.length; j++) {
-        if ($(nodeGroups[j]._renderer.elem).attr('nodeKey') == nodeKey) {
-          nodeGroups[j]._collection[0].fill = 'hsl(108, 96%, 80%)';
-          break;
+      let nodeGroups = graphDrawAgent.nodeGroups;
+      for (var i = 0; i < path.path.length; i++) {
+        nodeKey = path.path[i].node;;
+        for (var j = 0; j < nodeGroups.length; j++) {
+          if ($(nodeGroups[j]._renderer.elem).attr('nodeKey') == nodeKey) {
+            nodeGroups[j]._collection[0].fill = 'hsl(108, 96%, 80%)';
+            break;
+          }
         }
       }
-    }
-    let edges = graphDrawAgent.edges;
-    for (var i = 0; i < path.path.length - 1; i++) {
-      nodeKey1 = path.path[i].node;
-      nodeKey2 = path.path[i + 1].node;
-      for (var j = 0; j < edges.length; j++) {
-        let edge = edges[j];
-        let fnode1 = $(edge._renderer.elem).attr("node1");
-        let fnode2 = $(edge._renderer.elem).attr("node2");
-        if ((fnode1 == nodeKey1 && fnode2 == nodeKey2) || (fnode2 == nodeKey1 && fnode1 == nodeKey2)) {
-          edge.stroke = 'hsla(202, 100%, 56%, 1)';
-          edge.linewidth = 5;
+      let edges = graphDrawAgent.edges;
+      for (var i = 0; i < path.path.length - 1; i++) {
+        nodeKey1 = path.path[i].node;
+        nodeKey2 = path.path[i + 1].node;
+        for (var j = 0; j < edges.length; j++) {
+          let edge = edges[j];
+          let fnode1 = $(edge._renderer.elem).attr("node1");
+          let fnode2 = $(edge._renderer.elem).attr("node2");
+          if ((fnode1 == nodeKey1 && fnode2 == nodeKey2) || (fnode2 == nodeKey1 && fnode1 == nodeKey2)) {
+            edge.stroke = 'hsla(202, 100%, 56%, 1)';
+            edge.linewidth = 5;
+          }
         }
       }
-    }
-    graphDrawAgent.two.update();
-
-  }
+      graphDrawAgent.two.update();
 
+    }
+    //Function to draw the cost path in the bottom of the graph
   var drawCostPath = function(two, path) {
     two.clear();
     path.path = path.path.reverse();
@@ -85,21 +86,26 @@ $(document).ready(function() {
 
     var onMouseEnter = function() {
       let nodeKey = $(this).attr('nodeKey');
+      //Find the shortest paths from the inital node to the node being hovered
       bfsShortestPath = findShortestPath(breadthFirstSearch, nodeKey);
       ucsShortestPath = findShortestPath(uniformCostSearch, nodeKey);
+      //Color those paths in the graph
       colorPathInGraph(bfsGraphDrawAgent, bfsShortestPath);
       colorPathInGraph(ucsGraphDrawAgent, ucsShortestPath);
+      //Draw the cost path at the bottom
       drawCostPath(bfsTwo, bfsShortestPath);
       drawCostPath(ucsTwo, ucsShortestPath);
     };
     var onMouseLeave = function() {
+      //Clear everything when mouse leaves
       bfsGraphDrawAgent.iterate();
       ucsGraphDrawAgent.iterate();
       bfsTwo.clear();
       ucsTwo.clear();
       bfsTwo.update();
       ucsTwo.update();
     };
+    //Attach the events to all kind of nodes (unexplored,explored and frontier)
     options.nodes.unexplored.onMouseEnter = onMouseEnter;
     options.nodes.explored.onMouseEnter = onMouseEnter;
     options.nodes.frontier.onMouseEnter = onMouseEnter;

3-Solving-Problems-By-Searching/c_depthFirstSearch.js

@@ -17,6 +17,8 @@ $(document).ready(function() {
       if (graphProblem.frontier.length > 0) {
         var nextNode = depthFirstSearch(graphProblem);
         graphAgent.expand(nextNode);
+        //If frontier is still present, find the next node to be expanded so it
+        //could be colored differently
         if (graphProblem.frontier.length > 0) {
           graphProblem.nextToExpand = depthFirstSearch(graphProblem);
         } else {

3-Solving-Problems-By-Searching/c_depthLimitedSearch.js

@@ -1,9 +1,24 @@
 $(document).ready(function() {
-  $.ajax({
-    url: "depthLimitedSearch.js",
-    dataType: "text",
-    success: function(data) {
-      $("#depthLimitedSearchCode").html(data);
-    }
+
+  var agent = null;
+
+  function init() {
+    agent = new dlsDrawAgent('depthLimitedSearchCanvas');
+    //Restart the simulation when limit is changed
+    $('#limitSelector').on('input', function() {
+      let limit = $(this).val();
+      agent.iterate(limit);
+    });
+    //Draws graph for the first time
+    agent.iterate($('#limitSelector').val());
+  }
+
+
+  $('#dlsExpanded').css('background-color', 'hsl(0,50%,75%)');
+  $('#dlsFrontier').css('background-color', 'hsl(200,50%,70%)');
+  $('#dlsUnexplored').css('background-color', 'hsl(0, 2%, 76%)');
+  init();
+  $('#limitSelector').on('input change', function() {
+    $('#limitSelectorText').text($(this).val());
   });
 });

3-Solving-Problems-By-Searching/c_iterativeDeepening.js

@@ -1,9 +1,40 @@
 $(document).ready(function() {
-  $.ajax({
-    url: "iterativeDeepening.js",
-    dataType: "text",
-    success: function(data) {
-      $("#iterativeDeepeningCode").html(data);
-    }
+  var DELAY = 2000;
+  var intervalFunction = null;
+
+  //Restart the simulation when limit is changed
+  function init() {
+    agent = new dlsDrawAgent('iterativeDeepeningCanvas');
+    //Restart the simulation when limit is changed
+    $('#idlimitSelector').change(function() {
+      let limit = $(this).val();
+      agent.iterate(limit);
+    });
+    //Draws graph for the first time
+    agent.iterate($('#idlimitSelector').val());
+
+    intervalFunction = setInterval(function() {
+      let limit = parseInt($('#idlimitSelector').val());
+      if (limit <= 4) {
+        $('#idlimitSelector').val(limit + 1);
+        $('#idlimitSelector').trigger('change');
+      } else {
+        clearInterval(intervalFunction, DELAY);
+      }
+    }, DELAY)
+  }
+
+  $('#idExpanded').css('background-color', 'hsl(0,50%,75%)');
+  $('#idFrontier').css('background-color', 'hsl(200,50%,70%)');
+  $('#idUnexplored').css('background-color', 'hsl(0, 2%, 76%)');
+  $('#idRestartButton').click(function() {
+    clearInterval(intervalFunction);
+    $('#idlimitSelector').val(0);
+    $('#idlimitSelector').trigger('change');
+    init();
+  });
+  init();
+  $('#idlimitSelector').on('input change', function() {
+    $('#idlimitSelectorText').text($(this).val());
   });
 });

3-Solving-Problems-By-Searching/c_nodeExpansion.js

@@ -9,8 +9,11 @@ $(document).ready(function() {
     var graphAgent = new GraphAgent(graphProblem);
     var frontierNodesAgent = new DrawFrontierAgent('frontierCanvas', 150, 250, graphProblem);
     var options = new DefaultOptions();
+    //Function to execute whenever a node is clicked
     var clickHandler = function() {
+      //Find out which node has been clicked
       let nodeKey = $(this).attr('nodeKey');
+      //Expand it
       graphAgent.expand(nodeKey);
       graphDrawAgent.iterate();
       frontierNodesAgent.iterate();
@@ -35,6 +38,7 @@ $(document).ready(function() {
     var graphProblem = new GraphProblem(graph.nodes, graph.edges, String.fromCharCode(65 + Math.random() * 15), null);
     var graphAgent = new GraphAgent(graphProblem);
     var options = new DefaultOptions();
+    //For this simulation, unexplored nodes and edges needs to be invisible
     options.nodes.unexplored.opacity = 0;
     options.edges.unvisited.opacity = 0;
     var clickHandler = function() {
@@ -55,7 +59,7 @@ $(document).ready(function() {
 });
 
 
-
+//Function to draw the frontier nodes
 function DrawFrontierAgent(selector, h, w, problem) {
   this.canvas = document.getElementById(selector);
   this.canvas.innerHTML = '';

3-Solving-Problems-By-Searching/c_uniformCostSearch.js

@@ -18,14 +18,17 @@ $(document).ready(function() {
       height: h,
       width: w
     }).appendTo(exploredQueueCanvas);
+    //Intial value for separation is 0
     $('.ucsSeparation').html(0);
     var graph = new DefaultGraph();
+    //Precompute costs of all nodes from the initial node
     var costMap = precomputedCosts();
     var graphProblem = new GraphProblem(graph.nodes, graph.edges, 'A', 'A');
+    //Change the text of all the nodes to its cost
     for (key in graphProblem.nodes) {
       graphProblem.nodes[key].text = costMap[graphProblem.nodes[key].id];
     }
-    var graphAgent = new GraphAgent(graphProblem);
+    var graphAgent = new GraphAgent(graphProblem, 'ucs');
     var options = new DefaultOptions();
     options.nodes.next.fill = 'hsla(126, 100%, 69%, 1)';
     options.edges.showCost = true;
@@ -45,9 +48,11 @@ $(document).ready(function() {
         drawList(priorityTwo, graphProblem.frontier, graphProblem, options, costMap);
         drawList(exploredTwo, graphProblem.explored, graphProblem, options, costMap);
         let maxCost = 0;
+        //Find the max cost which separates the explored from frontier nodes
         if (graphProblem.nextToExpand) {
           maxCost = graphProblem.nodes[graphProblem.nextToExpand].cost;
         }
+        //Draw it in the front end
         $('.ucsSeparation').html(maxCost);
       } else {
         clearInterval(intervalFunction, DELAY);
@@ -61,7 +66,7 @@ $(document).ready(function() {
   $('#ucsExploredNode').css('background-color', 'hsl(0,50%,75%)');
   init();
 });
-
+//Function to draw the list of nodes for both canvas
 function drawList(two, list, problem, options, costMap) {
   two.clear();
   for (var i = 0; i < list.length; i++) {

3-Solving-Problems-By-Searching/costDetails.js

@@ -5,17 +5,19 @@ var findShortestPath = function(nextNodeFunction, final) {
   }
   let graph = new DefaultGraph();
   problem = new GraphProblem(graph.nodes, graph.edges, 'A', null);
-  let agent = new GraphAgent(problem);
+  //Make a new problem fromt the graph and solve it using the given nextNodeFunction
+  let agent = new GraphAgent(problem, 'ucs');
   while (problem.frontier.length > 0) {
     let next = nextNodeFunction(problem);
     agent.expand(next);
+    //Exit if final node reached
     if (next == final) {
       break;
     }
   }
   shortestPath.cost = problem.nodes[final].cost;
   var current = final;
-
+  //Iterate from the final to initial node using parent property to find the path
   while (current != problem.initialKey) {
     let prev = problem.nodes[current].parent;
     currentCost = problem.nodes[current].cost - problem.nodes[prev].cost;
@@ -25,6 +27,7 @@ var findShortestPath = function(nextNodeFunction, final) {
     });
     current = prev;
   }
+  //Push the initial node to the path array
   shortestPath.path.push({
     node: problem.initialKey,
     cost: 0

3-Solving-Problems-By-Searching/depthLimitedSearch.js

@@ -1 +1,49 @@
-// Code for Depth Limited Search
+// Same as depht first search but with limit
+var depthLimitedSearch = function(problem, limit) {
+    // Traverse the frontier queue from behind and choose the deepest node
+    // whose depth is lower than the limit
+    for (var i = problem.frontier.length - 1; i >= 0; i--) {
+      let nextNodeKey = problem.frontier[i];
+      if (problem.nodes[nextNodeKey].depth <= limit) {
+        return nextNodeKey;
+      }
+    }
+    //If no such node found, return null to denote traversal should stop
+    return null;
+  }
+  //New Graph for DLS to behave as a tree
+var DLSGraph = function() {
+  this.nodes = {
+    'A': new GraphNode(20, 170, 'A', 'A'),
+    'B': new GraphNode(100, 120, 'B', 'B'),
+    'C': new GraphNode(100, 220, 'C', 'C'),
+    'D': new GraphNode(180, 80, 'D', 'D'),
+    'E': new GraphNode(180, 150, 'E', 'E'),
+    'F': new GraphNode(180, 190, 'F', 'F'),
+    'G': new GraphNode(180, 270, 'G', 'G'),
+    'H': new GraphNode(260, 40, 'H', 'H'),
+    'I': new GraphNode(260, 120, 'I', 'I'),
+    'J': new GraphNode(260, 165, 'J', 'J'),
+    'K': new GraphNode(260, 210, 'K', 'K'),
+    'L': new GraphNode(260, 260, 'L', 'L'),
+    'M': new GraphNode(340, 170, 'M', 'M'),
+    'N': new GraphNode(340, 250, 'N', 'N'),
+    'O': new GraphNode(420, 300, 'O', 'O')
+  };
+  this.edges = [
+    ['A', 'B', 3],
+    ['A', 'C', 6],
+    ['B', 'D', 2],
+    ['B', 'E', 2],
+    ['C', 'F', 2],
+    ['C', 'G', 2],
+    ['D', 'H', 2],
+    ['D', 'I', 2],
+    ['E', 'J', 2],
+    ['F', 'K', 2],
+    ['F', 'L', 2],
+    ['K', 'M', 2],
+    ['K', 'N', 2],
+    ['N', 'O', 2]
+  ];
+};