Merge pull request #2 from Pranav2612000/feat/remove-node

feat: allow removing the last added node

main.js

@@ -62,6 +62,7 @@ document.querySelector("#app").innerHTML = `
     </div>
     <button id="resetLeader">Reset Leader</button>
     <button id="addNode">Add Node</button>
+    <button id="removeNode">Remove Node</button>
     <button id="addData">Send Data</button>
     <button id="pause">Play / Pause</button>
   </div>
@@ -82,6 +83,10 @@ document.getElementById("addNode").addEventListener("click", () => {
   network.addNode();
 });
 
+document.getElementById("removeNode").addEventListener("click", () => {
+  network.removeLastNode();
+});
+
 let currentMsg = 1;
 document.getElementById("addData").addEventListener("click", () => {
   if (!network.leader) {

src/Network.js

@@ -3,6 +3,7 @@ import {
   clearNodes,
   drawNode,
   drawNodes,
+  eraseNode,
   getNodePositions,
   showDataTransfer,
   updateNodePositions,
@@ -99,6 +100,30 @@ class Network {
     this.broadcastFn(-1, { type: MESSAGE_TYPE.NEW_NODE, nodeId }, -1);
   }
 
+  removeLastNode() {
+    const nodeToBeDeleted = this.nextNodeId - 1;
+    this.nextNodeId = this.nextNodeId - 1;
+
+    this.removeNode(nodeToBeDeleted);
+  }
+
+  removeNode(nodeToBeDeleted) {
+    const context = this.canvas?.nodes?.getContext("2d");
+    eraseNode(context, this.nodePositions[nodeToBeDeleted - 1]);
+
+    this.nodes[nodeToBeDeleted - 1].delete();
+    this.nodeIds = this.nodeIds.filter((id) => id != nodeToBeDeleted);
+    this.nodes = this.nodes.filter((_, index) => index != (nodeToBeDeleted - 1));
+    this.senderBcs[nodeToBeDeleted - 1].close();
+    this.senderBcs = this.senderBcs.filter((_, index) => index != (nodeToBeDeleted - 1));
+
+    // Updates node positions in place so that the rendering function
+    // can directly start using the newer locations
+    updateNodePositions(this.nodePositions, this.nodes.length);
+
+    this.broadcastFn(-1, { type: MESSAGE_TYPE.DELETE_NODE, nodeId: nodeToBeDeleted }, -1);
+  }
+
   broadcastFn = async (senderIndex, msg, receiverIndex) => {
     if (senderIndex === -1) {
       this.senderBcs.forEach(async (bc) => {

src/Node.js

@@ -42,10 +42,31 @@ class Node {
     this.ackedLength = new Map();
 
     this.commitLength = 0;
+  }
+
+  delete() {
+    this.nodeId = undefined;
+    this.nodes = [];
+    this.minElectionTimeout = undefined;
+    this.maxElectionTimeout = undefined;
+    this.heartbeat = undefined;
+
+    this.state = NODE_STATE.DELETED;
+    this.term = undefined;
+
+    this.logs = [];
+    this.db = [];
 
-    setInterval(() => {
-      console.log("DATA ", this.nodeId, this.db);
-    }, 4000);
+    clearInterval(this.electionInterval);
+
+    this.votedFor = undefined;
+    this.votesReceived = undefined;
+    this.broadcastFn = undefined;
+
+    this.sentLength = undefined;
+    this.ackedLength = undefined;
+
+    this.commitLength = undefined;
   }
 
   appendLog(prefixLen, leaderCommit, suffix) {
@@ -224,6 +245,12 @@ class Node {
         }
         return;
       }
+      case MESSAGE_TYPE.DELETE_NODE: {
+        const nodeToBeDeleted = msg.nodeId;
+        this.nodes = this.nodes.filter((id) => id != nodeToBeDeleted);
+        this.ackedLength?.delete(nodeToBeDeleted);
+        return;
+      }
       case MESSAGE_TYPE.LOG_REQUEST: {
         console.log("LOG_REQUEST", { msg });
         return this.handleLogRequest(msg);

src/canvas.js

@@ -74,6 +74,10 @@ export function updateNodePositions(nodePositions, numOfNodes) {
       nodePositions.push({ x, y });
     }
   }
+
+  if (numOfNodes < nodePositions.length) {
+    nodePositions.splice(numOfNodes);
+  }
 }
 
 export function drawNode(context, nodePosition, node) {
@@ -88,6 +92,10 @@ export function drawNode(context, nodePosition, node) {
     // clear previous ui
     context.clearRect(oldX - 30, oldY - 30, 70, 70);
 
+    if (node.nodeId == undefined) {
+      return;
+    }
+
     // update angle
     const { x, y } = nodePosition;
     const elapsed = lastFrameTimestamp ? milliseconds - lastFrameTimestamp : 0;
@@ -128,6 +136,11 @@ export function drawNode(context, nodePosition, node) {
   window.requestAnimationFrame(animationFrame);
 }
 
+export function eraseNode(context, nodePosition) {
+  const { x, y } = nodePosition;
+  context.clearRect(x - 30, y - 30, 70, 70); // TODO: Come up with better values
+}
+
 export function drawNodes(canvas,context, nodePositions, nodes) {
   for (let i = 0; i < nodePositions.length; i++) {
     drawNode(context, nodePositions[i], nodes[i]);

src/types.js

@@ -2,6 +2,7 @@ export const NODE_STATE = Object.freeze({
   FOLLOWER: 0,
   LEADER: 1,
   CANDIATE: 2,
+  DELETED: 3,
 });
 
 export const MESSAGE_TYPE = Object.freeze({
@@ -11,4 +12,5 @@ export const MESSAGE_TYPE = Object.freeze({
   NEW_NODE: 3,
   LOG_REQUEST: 4,
   LOG_RESPONSE: 5,
+  DELETE_NODE: 6,
 });