Add cancel button to markNeighbor walkthrough mode (it can take forever on large networks)

index.html

@@ -64,6 +64,7 @@
                     <input type="checkbox" id="quickPlace" class="simToggle">
                     <label for="quickPlace">Quick Place</label>
                 </div>
+                <button id="cancelMarkNeighbor">Cancel</button>
             </div>
             <div id="centerColumn" style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70%; height: 100%; margin: 0 auto;">
                 <div id="simContainer"></div>

script.js

@@ -6,6 +6,10 @@ var MAX_CONNECTIONS = 6;
 var warningModalShown = false;
 var displayWarningWhenDone = false;
 var stillRouting = false;
+var markNeighborInterval = null;
+// Track all active intervals for marking neighbors, and a cancel flag
+var markNeighborIntervals = new Set();
+var cancelMarkNeighborRequested = false;
 
 function smoothColorTransition(color1, color2, min, max, current) {
     // Clamp current between min and max
@@ -311,6 +315,9 @@ async function routePacket(currentNode, goalNode, packetInfo, first=false) {
 }
 
 const markNeighborsAsFailed = (nodeId, from, packetId, visited = new Set()) => {
+    if (cancelMarkNeighborRequested) {
+        return;
+    }
     if (visited.has(nodeId)) {
         return;
     }
@@ -318,10 +325,22 @@ const markNeighborsAsFailed = (nodeId, from, packetId, visited = new Set()) => {
 
     if (warningModalShown) {
         // enable walkthrough mode to prevent browser from freezing
+        if (markNeighborIntervals.size === 0) {
+            cancelMarkNeighborRequested = false;
+        }
+        document.getElementById('cancelMarkNeighbor').style.display = 'block';
         const neighborsSnapshot = (nodeTable[nodeId]?.connections?.slice()) || [];
         const neighborsLength = neighborsSnapshot.length;
         let currentIdx = 0;
         const intervalId = setInterval(() => {
+            if (cancelMarkNeighborRequested) {
+                clearInterval(intervalId);
+                markNeighborIntervals.delete(intervalId);
+                if (markNeighborIntervals.size === 0) {
+                    document.getElementById('cancelMarkNeighbor').style.display = 'none';
+                }
+                return;
+            }
             if (currentIdx < neighborsLength) {
                 const neighbor = neighborsSnapshot[currentIdx];
                 if (!visited.has(neighbor) && 
@@ -335,8 +354,13 @@ const markNeighborsAsFailed = (nodeId, from, packetId, visited = new Set()) => {
                 currentIdx++;
             } else {
                 clearInterval(intervalId);
+                markNeighborIntervals.delete(intervalId);
+                if (markNeighborIntervals.size === 0) {
+                    document.getElementById('cancelMarkNeighbor').style.display = 'none';
+                }
             }
-        }, 10);
+        }, 1);
+        markNeighborIntervals.add(intervalId);
         return;
     }
 
@@ -905,8 +929,22 @@ window.onload = function() {
     consoleContainer.appendChild(consoleOutput);
 
     document.getElementById('simContainer').appendChild(openConsoleButton);
+
+    // Ensure cancel button is hidden on load
+    document.getElementById('cancelMarkNeighbor').style.display = 'none';
 }
 
+document.getElementById('cancelMarkNeighbor').addEventListener('click', function() {
+    consoleLog('Cancelling mark neighbor...');
+    cancelMarkNeighborRequested = true;
+    // Clear any tracked intervals
+    for (let id of Array.from(markNeighborIntervals)) {
+        clearInterval(id);
+        markNeighborIntervals.delete(id);
+    }
+    document.getElementById('cancelMarkNeighbor').style.display = 'none';
+});
+
 function consoleLog(message) {
     const consoleOutput = document.getElementById('consoleOutput');
     consoleOutput.innerHTML = `${message}`;

style-dark.css

@@ -301,4 +301,10 @@ input[type="checkbox"], input[type="radio"] {
     height: 50%;
     background-color: #000000;
     color: #e0e0e0;
+}
+
+#cancelMarkNeighbor {
+    width: 100%;
+    margin-top: 10px;
+    display: none;
 }

style.css

@@ -203,4 +203,10 @@ html, body {
     height: 50%;
     background-color: #ffffff;
     color: #000000;
+}
+
+#cancelMarkNeighbor {
+    width: 100%;
+    margin-top: 10px;
+    display: none;
 }