add search

VileEnd · May 21, 2024 · 5481a3c · 5481a3c
1 parent fb05bd6
commit 5481a3c
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -18,6 +18,7 @@ <h1 class="text-3xl font-bold">AVL Tree Visualizer</h1>
             <div class="flex space-x-2">
                 <button onclick="addValues()" class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded">Add Values</button>
                 <button onclick="deleteValue()" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded">Delete Value</button>
+                <button onclick="searchValue()" class="bg-purple-500 hover:bg-purple-600 text-white p-2 rounded">Search Value</button>
                 <button onclick="resetTree()" class="bg-yellow-500 hover:bg-yellow-600 text-white p-2 rounded">Reset Tree</button>
                 <button onclick="undoLastOperation()" class="bg-green-500 hover:bg-green-600 text-white p-2 rounded">Undo Last Operation</button>
             </div>

diff --git a/docs/script.js b/docs/script.js
@@ -142,6 +142,49 @@ class AVLTree {
         this.updateHistory();
     }
 
+    search(node, key) {
+        if (!node) {
+            return null;
+        }
+        if (key === node.key) {
+            return node;
+        }
+        if (key < node.key) {
+            return this.search(node.left, key);
+        } else {
+            return this.search(node.right, key);
+        }
+    }
+
+    searchNode(key) {
+        const result = this.search(this.root, key);
+        this.highlightSearchPath(key);
+        return result;
+    }
+
+    highlightSearchPath(key) {
+        const path = [];
+        let current = this.root;
+        while (current) {
+            path.push(current.key);
+            if (key === current.key) {
+                break;
+            }
+            if (key < current.key) {
+                current = current.left;
+            } else {
+                current = current.right;
+            }
+        }
+        this.updateSearchPath(path);
+    }
+
+    updateSearchPath(path) {
+        const nodes = d3.selectAll('g.node');
+        nodes.selectAll('circle')
+            .style("fill", d => path.includes(d.data.key) ? "yellow" : (d._children ? "green" : "#fff"));
+    }
+
     deleteNode(key) {
         this.root = this.delete(this.root, key);
         this.updateHistory();
@@ -457,6 +500,11 @@ function renderTree() {
             .attr("fill", "none")
             .style('stroke', 'lightsteelblue')
             .attr("stroke-width", 2);
+
+        nodeUpdate.select('circle.node')
+        .attr('r', 10)
+        .style("fill", d => d._children ? "green" : "#fff") // Reset node colors
+        .attr('cursor', 'pointer');
 
         link.exit().transition()
             .duration(duration)
@@ -547,6 +595,21 @@ function resetTree() {
     tree.updateHistory();
 }
 
+function searchValue() {
+    const valueInput = document.getElementById('valueInput');
+    const value = parseInt(valueInput.value, 10);
+    if (!isNaN(value)) {
+        const result = tree.searchNode(value);
+        if (result) {
+            alert(`Node with key ${value} found.`);
+        } else {
+            alert(`Node with key ${value} not found.`);
+        }
+    } else {
+        alert('Please enter a valid number.');
+    }
+}
+
 function executeSavedOperations() {
     const savedOperations = localStorage.getItem('operations');
     if (savedOperations) {