Add trackers, working breakpoints

src/ui/editor.css

@@ -14,7 +14,7 @@
 #code,
 #highlightedCode {
     border-left: 1px solid #f1f1f1;
-    left: 50px;
+    left: 75px;
     overflow: hidden;
     margin: 0;
     padding: 0;
@@ -54,6 +54,7 @@
 
 
 #breakpointContainer,
+#trackerContainer,
 #indices {
     background-color: #fafafa;
     overflow: hidden;
@@ -67,8 +68,10 @@
     /* height: 80vh; */
 }
 
-#breakpointContainer {
+#breakpointContainer,
+#trackerContainer {
     width: 15px;
+    padding-right: 5px;
 }
 
 #indices {
@@ -105,12 +108,13 @@
     font-family: monospace;
 }
 
-.breakpoint {
+.breakpoint, .tracker {
     border: none;
+    background-color: transparent;
     margin-top: 0.225em;
     margin-bottom: 0.45em;
     margin-left: 6px;
-    padding: none;
+    padding: 0;
     width: 9px;
     height: 9px;
     border-radius: 50%;
@@ -140,4 +144,23 @@
 
 .breakpoint.red:hover {
     background-color: #bb908d;
+}
+
+.tracker {
+    color: #aaa;
+}
+
+.tracker.enabled {
+    color: #55f;
+    font-weight: bold;
+}
+
+#selectTrackers {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: #f9f9f9;
+    border: 1px solid #ccc;
+    z-index: 1;
+    display: none;
 }

src/ui/editor.js

@@ -1,4 +1,4 @@
-let indices, code, highlightedCode, suggestionsDiv, breakpointContainer, resizer;
+let indices, code, highlightedCode, suggestionsDiv, breakpointContainer, trackerContainer, selectTrackers, resizer;
 
 let suggestions = [];
 
@@ -7,12 +7,15 @@ let currentWord;
 
 let selectedSuggestionIndex = 0;
 
+const trackers = [];
+
 function initEditor() {
     indices = document.getElementById("indices");
     code = document.getElementById("code");
     highlightedCode = document.getElementById("highlightedCode");
     suggestionsDiv = document.getElementById("suggestions");
     breakpointContainer = document.getElementById("breakpointContainer");
+    trackerContainer = document.getElementById("trackerContainer");
     resizer = document.getElementById('resizer');
 
     // code.innerHTML = '<div>from visualgo.structures import LinkedList, Array, DoublyLinkedList, Queue, Stack, Set</div><div>\n</div><div>a = LinkedList()</div><div>a.insert_head(1)</div><div>a.insert_head(2)</div><div>a.insert_head(3)</div><div>\n</div><div>b = Array(2)</div><div>b.set(0, 0)</div><div>\n</div><div>c = DoublyLinkedList()</div><div>c.insert_head(1)</div><div>c.insert_head(2)</div><div>c.insert_head(3)</div><div>\n</div><div>d = Queue()</div><div>d.enqueue(1)</div><div>d.enqueue(2)</div><div>d.enqueue(3)</div><div>\n</div><div>e = Set()</div><div>e.add(1)</div><div>e.add(2)</div><div>e.add(3)</div>'
@@ -58,8 +61,10 @@ function updateIndices(len) {
         breakpointStates.push(b.classList[1]);
     }
     breakpointContainer.innerHTML = "";
+    trackerContainer.innerHTML = "";
     for (let i = 1; i < len + 1; i++) {
         createBreakpoints(i);
+        createTrackerElement(i);
         if (i < breakpointStates.length) {
             let breakpoint = document.getElementById("breakpoint" + i);
             breakpoint.classList.remove("grey");
@@ -160,6 +165,7 @@ function updateColor() {
  */
 function updateScroll() {
     breakpointContainer.scrollTop = code.scrollTop;
+    trackerContainer.scrollTop = code.scrollTop;
     indices.scrollTop = code.scrollTop;
     highlightedCode.scrollTop = code.scrollTop;
     highlightedCode.scrollLeft = code.scrollLeft;
@@ -352,47 +358,162 @@ function createBreakpoints(index) {
     breakpointContainer.appendChild(breakpoint);
 }
 
+function createTrackerElement(index) {
+    const tracker = document.createElement("button");
+    tracker.className = "tracker";
+    tracker.id = "tracker" + index;
+    tracker.innerHTML = "+";
+    let trackerValue = undefined;
+
+    function setTracker(data) {
+        tracker.innerHTML = data[0];
+        tracker.className = "tracker enabled";
+        trackerValue = data;
+        tracker.title = data;
+        addTracker(data, index);
+    }
+
+    function askTracker() {
+        const data = prompt("Enter a name for the tracker", "");
+        if (data === null)
+            return;
+        if (data === "") {
+            alert("Please enter a valid name");
+            return;
+        }
+        setTracker(data);
+    }
+
+    function removeTracker() {
+        tracker.innerHTML = "+";
+        tracker.className = "tracker";
+        if (trackerValue === undefined) return;
+        window.del_tracker(trackerValue, index);
+        trackerValue = undefined;
+    }
+
+    tracker.addEventListener("click", () => {
+        if (trackers.length === 0) {
+            askTracker();
+            return;
+        }
+
+        // Show all available trackers
+        const rect = tracker.getBoundingClientRect();
+        let selectTrackers = document.getElementById("selectTrackers");
+        selectTrackers.style.top = rect.top + "px";
+        selectTrackers.style.left = (rect.right + 40) + "px";
+        selectTrackers.innerHTML = "";
+        selectTrackers.style.display = "block";
+
+        const noOption = document.createElement("option");
+        noOption.value = "no_option";
+        noOption.innerHTML = "Select a tracker...";
+        noOption.selected = true;
+
+        if (trackerValue !== undefined) {
+            noOption.innerHTML = trackerValue[0];
+            noOption.value = trackerValue;
+        }
+        selectTrackers.appendChild(noOption);
+        selectTrackers.selectedIndex = 0;
+        noOption.hidden = true;
+
+        const noTracker = document.createElement("option");
+        noTracker.value = "no_option";
+        noTracker.selected = true;
+        noTracker.innerHTML = "No tracker";
+        selectTrackers.appendChild(noTracker);
+
+        trackers.forEach((tracker, index) => {
+            if (trackerValue === tracker) return;
+            const option = document.createElement("option");
+            option.value = tracker;
+            option.innerHTML = tracker;
+            selectTrackers.appendChild(option);
+        });
+
+        // Allow to create a new tracker
+        const newOption = document.createElement("option");
+        newOption.value = "new_tracker";
+        newOption.innerHTML = "(+) Add new tracker";
+        selectTrackers.appendChild(newOption);
+
+        // Clear all selectTrackers event listeners
+        const newSelectTrackers = selectTrackers.cloneNode(true);
+        selectTrackers.parentNode.replaceChild(newSelectTrackers, selectTrackers);
+        selectTrackers = newSelectTrackers;
+
+        // Handle tracker selection
+        const handler = () => {
+            selectTrackers.removeEventListener('change', handler, false);
+            selectTrackers.style.display = "none";
+            if (selectTrackers.value === "new_tracker") {
+                console.log("new tracker")
+                askTracker();
+                return;
+            } else if (selectTrackers.value === "no_option") {
+                removeTracker();
+                return;
+            }
+            setTracker(selectTrackers.value);
+        };
+        selectTrackers.addEventListener('change', handler, false);
+    });
+    trackerContainer.appendChild(tracker);
+}
+
+function addTracker(name, index) {
+    console.log(`Adding tracker ${name} to line ${index}`)
+    window.new_tracker(name, index);
+    if (trackers.includes(name))
+        return;
+    trackers.push(name);
+}
+
 function handleBreakpointClick(breakpointId) {
     let breakpoint = document.getElementById(breakpointId)
     let state = breakpoint.classList[1];
+    const index = parseInt(breakpointId.replace("breakpoint", ""));
 
     switch (state) {
         case "grey":
             breakpoint.classList.remove("grey");
             breakpoint.classList.add("green");
             state = "green"
-            function1();
+            addCheckpoint(index);
             break;
         case "green":
             breakpoint.classList.remove("green");
             breakpoint.classList.add("red");
             state = "red"
-            function2();
+            addBreakpointRemoveCheckpoint(index);
             break;
         case "red":
             breakpoint.classList.remove("red");
             breakpoint.classList.add("grey");
             state = "grey"
-            function3();
+            removeBreakpoint(index);
             break;
         default:
             break;
     }
 }
 
-function function1() {
-    console.log("Function 1 called");
-    // Your function1 implementation here
+function addCheckpoint(lineNumber) {
+    console.log("addCheckpoint");
+    window.new_checkpoint(lineNumber);
 }
 
-function function2() {
-    console.log("Function 2 called");
-    // Your function2 implementation here
+function addBreakpointRemoveCheckpoint(lineNumber) {
+    console.log("addBreakpointRemoveCheckpoint");
+    window.new_breakpoint(lineNumber);
+    window.del_checkpoint(lineNumber);
 }
 
-function function3() {
-    console.log("Function 3 called");
-    // Your function3 implementation here
+function removeBreakpoint(lineNumber) {
+    console.log("removeCheckpoint");
+    window.del_breakpoint(lineNumber);
 }
 
 

src/ui/index.html

@@ -63,6 +63,7 @@
         <div id="codeContainer">
             <div id="leftDivsContainer">
                 <div id="breakpointContainer"></div>
+                <div id="trackerContainer"></div>
                 <div id="indices"></div>
                 <!-- Other left divs here -->
             </div>
@@ -89,6 +90,7 @@
         <button class="playButton" id="stepForwardButton" data-label="Step Forward"><i
                 class="fa fa-step-forward"></i></button>
         <button class="playButton" id="continueButton" data-label="Continue"><i class="fa fa-fast-forward"></i></button>
+        <button id="fetchStats">Log stats</button>
     </footer>
 
     <script>
@@ -153,6 +155,9 @@
         <script type="py" src="../wasm-scripts/main.py" config="../pyscript/pyscript.json"></script>
     </py-env>
 
+    <select id="selectTrackers">
+    </select>
+
 
 </body>
 

src/ui/ui_public_functions.js

@@ -21,7 +21,7 @@ function disableButtons() {
     stop.disabled = false;
 }
 
-function enableBoutons() {
+function enableButtons() {
     let buttons = document.getElementsByClassName("playButton");
     let pause = document.getElementById("pauseButton");
     let step_backwards = document.getElementById("stepBackwardButton");
@@ -83,7 +83,7 @@ function disableCodeInput() {
 }
 
 function debuggerReady() {
-    enableBoutons();
+    enableButtons();
     enableCodeInput();
 }
 
@@ -94,7 +94,7 @@ function debuggerInterrupted() {
 }
 
 function executionPaused() {
-    enableBoutons();
+    enableButtons();
 }
 
 function setStaticVariablesAndUserFun(static_variables) {
@@ -115,7 +115,7 @@ function disableInteractions() {
 
 function enableInteractions() {
     console.log("Enabling all interactions");
-    enableBoutons();
+    enableButtons();
     // + enabling code input 
     let codeInput = document.getElementById("code");
     codeInput.contentEditable = true;