From 1b07565cc5cde14237fcb9534b93c61b3ca71e4b Mon Sep 17 00:00:00 2001
From: VileEnd <moyjak@protonmail.com>
Date: Tue, 21 May 2024 21:07:51 +0200
Subject: [PATCH] add zoom

---
 docs/index.html |  81 ++++++----
 docs/script.js  | 396 +++++++++++++++++++++---------------------------
 docs/styles.css |  26 ++--
 3 files changed, 233 insertions(+), 270 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index 69d1a58..0bd8dd9 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -8,7 +9,8 @@
     <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
 </head>
-<body class="min-h-screen bg-gray-100 text-gray-900">
+
+<body class="min-h-screen text-gray-900">
     <header class="flex border-b py-4 px-4 sm:px-10 bg-white font-sans min-h-[70px] tracking-wide sticky top-0 z-50">
         <div class="flex flex-wrap items-center gap-5 w-full">
             <a href="#">
@@ -40,34 +42,37 @@
             </button>
         </div>
     </header>
-    <div class="container mx-auto p-4 lg:flex lg:space-x-4">
-        <div class="lg:w-1/4 mb-4 lg:mb-0 p-4 border border-gray-300 rounded hidden lg:block">
-            <h2 class="text-xl font-bold mb-2">Rotations</h2>
-            <ul class="list-disc pl-5">
-                <li>Left Rotations: <span id="left-rotations">0</span></li>
-                <li>Right Rotations: <span id="right-rotations">0</span></li>
-                <li>Left-Right Rotations: <span id="left-right-rotations">0</span></li>
-                <li>Right-Left Rotations: <span id="right-left-rotations">0</span></li>
-            </ul>
-            <h2 class="text-xl font-bold mb-2 mt-4">Metrics</h2>
-            <ul class="list-disc pl-5">
-                <li>Comparisons: <span id="comparisons">0</span></li>
-                <li>Operation Time (ms): <span id="operation-time">0.00</span></li>
-            </ul>
-            <h2 class="text-xl font-bold mb-2 mt-4">Tree Stats</h2>
-            <ul class="list-disc pl-5">
-                <li>Tree Depth: <span id="tree-depth">0</span></li>
-                <li>Tree Complexity: <span id="tree-complexity">0</span></li>
-            </ul>
+    <div class="flex flex-col lg:flex-row">
+        <!-- Rotations/Metrics/Tree Stats Section -->
+        <div class="lg:w-1/5 p-4 border-r border-gray-300 bg-white hidden lg:block">
+            <div class="mt-16">
+                <h2 class="text-xl font-bold mb-2">Rotations</h2>
+                <ul class="list-disc pl-5">
+                    <li>Left Rotations: <span id="left-rotations">0</span></li>
+                    <li>Right Rotations: <span id="right-rotations">0</span></li>
+                    <li>Left-Right Rotations: <span id="left-right-rotations">0</span></li>
+                    <li>Right-Left Rotations: <span id="right-left-rotations">0</span></li>
+                </ul>
+                <h2 class="text-xl font-bold mb-2 mt-4">Metrics</h2>
+                <ul class="list-disc pl-5">
+                    <li>Comparisons: <span id="comparisons">0</span></li>
+                    <li>Operation Time (ms): <span id="operation-time">0.00</span></li>
+                </ul>
+                <h2 class="text-xl font-bold mb-2 mt-4">Tree Stats</h2>
+                <ul class="list-disc pl-5">
+                    <li>Tree Depth: <span id="tree-depth">0</span></li>
+                    <li>Tree Complexity: <span id="tree-complexity">0</span></li>
+                </ul>
+            </div>
         </div>
-        <div class="flex-1">
+        <!-- Tree Container Section -->
+        <div class="flex-1 p-4 lg:w-3/5">
             <div class="flex justify-center mb-4 sticky top-[70px] bg-gray-100 z-10 p-4">
-                <input id="valueInput" type="text" placeholder="Enter values..." class="p-2 border border-gray-300 rounded w-full max-w-md">
+                <input id="valueInput" type="text" placeholder="Enter values..." class="p-2 border border-gray-300 rounded w-full max-w-md bg-white">
             </div>
-            <div id="tree-container" class="border border-gray-300 rounded p-4 mb-4" style="height: 400px;"></div>
-            <div class="mb-4">
-                <textarea id="resultBox" rows="5" class="w-full p-2 border border-gray-300 rounded" readonly></textarea>
+            <div id="tree-container" class="relative border border-gray-300 rounded p-4 mb-4 flex items-center justify-center" style="height: 400px; max-width: 100%; overflow-x: hidden;">
             </div>
+            <!-- Rotations/Metrics/Tree Stats Section for Mobile -->
             <div class="lg:hidden mb-4 p-4 border border-gray-300 rounded">
                 <h2 class="text-xl font-bold mb-2">Rotations</h2>
                 <ul class="list-disc pl-5">
@@ -87,34 +92,44 @@ <h2 class="text-xl font-bold mb-2 mt-4">Tree Stats</h2>
                     <li>Tree Complexity: <span id="tree-complexity">0</span></li>
                 </ul>
             </div>
+            <!-- Result Section -->
+            <div class="mb-4 lg:w-3/5 mx-auto">
+                <textarea id="resultBox" rows="5" class="w-full p-2 border border-gray-300 rounded" readonly></textarea>
+            </div>
         </div>
-        <div class="lg:w-1/4 p-4 border border-gray-300 rounded overflow-y-auto" style="max-height: 600px;">
-            <h2 class="text-xl font-bold mb-2">History</h2>
-            <ul id="history-list" class="space-y-2"></ul>
+        <!-- History Section -->
+        <div class="lg:w-1/5 p-4 border-l border-gray-300 bg-white hidden lg:block">
+            <div class="mt-16">
+                <h2 class="text-xl font-bold mb-2">History</h2>
+                <ul id="history-list" class="space-y-2"></ul>
+            </div>
         </div>
     </div>
     <!-- Breadcrumb Navigation for Mobile -->
-    <div class="fixed bottom-4 right-4 lg:hidden">
-        <div id="breadcrumb-buttons" class="flex flex-col space-y-2 mb-2">
+    <div class="fixed bottom-4 right-4 lg:hidden flex flex-col items-end">
+        <div id="breadcrumb-buttons" class="flex flex-col space-y-2 mb-2 hidden">
             <button onclick="addValues()" class="px-4 py-2 font-bold text-white bg-blue-500 hover:bg-blue-600 rounded shadow-md">Add</button>
             <button onclick="deleteValue()" class="px-4 py-2 font-bold text-white bg-blue-500 hover:bg-blue-600 rounded shadow-md">Delete</button>
             <button onclick="searchValue()" class="px-4 py-2 font-bold text-white bg-blue-500 hover:bg-blue-600 rounded shadow-md">Search</button>
             <button onclick="undoLastOperation()" class="px-4 py-2 font-bold text-white bg-blue-500 hover:bg-blue-600 rounded shadow-md">Undo</button>
             <button onclick="resetTree()" class="px-4 py-2 font-bold text-white bg-red-500 hover:bg-red-600 rounded shadow-md">Reset Tree</button>
         </div>
-        <button id="toggleBreadcrumb" class="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center shadow-md">
-            <i class="fas fa-bars"></i>
+        <button id="toggleBreadcrumb" title="Toggle Menu" class="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center shadow-md transform transition-transform">
+            <svg id="breadcrumbIcon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
+            </svg>
         </button>
     </div>
-    <!-- Updated to use Cloudflare CDN for Font Awesome -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js" defer></script>
     <script src="https://d3js.org/d3.v6.min.js" defer></script>
     <script src="script.js" defer></script>
 </body>
+
 <footer class="fixed bottom-4 left-4 flex items-center space-x-2 lg:hidden">
     <a href="https://github.com/VileEnd/avlTreeExam" target="_blank">
         <img src="github-mark.png" alt="GitHub" class="w-8 h-8 opacity-70">
     </a>
     <span>Made by <a href="https://github.com/VileEnd/avlTreeExam" target="_blank" class="text-blue-500 font-bold">Vileend</a></span>
 </footer>
+
 </html>
diff --git a/docs/script.js b/docs/script.js
index 6626235..3d6b48f 100644
--- a/docs/script.js
+++ b/docs/script.js
@@ -1,3 +1,13 @@
+let zoomLevel = 1;  // Declare zoomLevel at the top
+const zoomStep = 0.1;
+let currentTransform = d3.zoomIdentity;
+
+const zoom = d3.zoom().on("zoom", function (event) {
+    currentTransform = event.transform;
+    d3.select("#svg-content").attr("transform", currentTransform);
+    saveZoomState();
+});
+
 class AVLNode {
     constructor(key) {
         this.key = key;
@@ -11,54 +21,37 @@ class AVLNode {
 
 class UIUpdater {
     constructor() {
+        this.reset();
+    }
+
+    reset() {
         this.leftRotations = 0;
         this.rightRotations = 0;
         this.leftRightRotations = 0;
         this.rightLeftRotations = 0;
         this.comparisons = 0;
         this.operationTime = 0;
+        this.updateAllMetrics();
     }
 
-    incrementLeftRotations() {
-        this.leftRotations++;
-        this.updateRotationCount();
-    }
-
-    incrementRightRotations() {
-        this.rightRotations++;
-        this.updateRotationCount();
-    }
-
-    incrementLeftRightRotations() {
-        this.leftRightRotations++;
-        this.updateRotationCount();
-    }
-
-    incrementRightLeftRotations() {
-        this.rightLeftRotations++;
-        this.updateRotationCount();
-    }
-
-    incrementComparisons() {
-        this.comparisons++;
-        this.updateMetrics();
+    incrementCounter(counter) {
+        this[counter]++;
+        this.updateAllMetrics();
     }
 
     setOperationTime(time) {
         this.operationTime = time;
-        this.updateMetrics();
+        this.updateMetrics(['operation-time']);
     }
 
-    updateRotationCount() {
-        document.getElementById('left-rotations').textContent = this.leftRotations;
-        document.getElementById('right-rotations').textContent = this.rightRotations;
-        document.getElementById('left-right-rotations').textContent = this.leftRightRotations;
-        document.getElementById('right-left-rotations').textContent = this.rightLeftRotations;
+    updateMetrics(metrics) {
+        metrics.forEach(metric => {
+            document.getElementById(metric).textContent = this[metric.replace('-', '')];
+        });
     }
 
-    updateMetrics() {
-        document.getElementById('comparisons').textContent = this.comparisons;
-        document.getElementById('operation-time').textContent = this.operationTime.toFixed(2);
+    updateAllMetrics() {
+        this.updateMetrics(['left-rotations', 'right-rotations', 'left-right-rotations', 'right-left-rotations', 'comparisons', 'operation-time']);
     }
 }
 
@@ -73,24 +66,17 @@ class AVLTree {
         return node ? node.height : 0;
     }
 
-    rightRotate(y) {
-        const x = y.left;
-        y.left = x.right;
-        x.right = y;
-        y.height = Math.max(this.height(y.left), this.height(y.right)) + 1;
-        x.height = Math.max(this.height(x.left), this.height(x.right)) + 1;
-        this.uiUpdater.incrementRightRotations();
-        return x;
-    }
+    rotate(node, direction) {
+        const opposite = direction === 'left' ? 'right' : 'left';
+        const temp = node[opposite];
+        node[opposite] = temp[direction];
+        temp[direction] = node;
+
+        node.height = 1 + Math.max(this.height(node.left), this.height(node.right));
+        temp.height = 1 + Math.max(this.height(temp.left), this.height(temp.right));
+        this.uiUpdater.incrementCounter(`${direction}Rotations`);
 
-    leftRotate(x) {
-        const y = x.right;
-        x.right = y.left;
-        y.left = x;
-        x.height = Math.max(this.height(x.left), this.height(x.right)) + 1;
-        y.height = Math.max(this.height(y.left), this.height(y.right)) + 1;
-        this.uiUpdater.incrementLeftRotations();
-        return y;
+        return temp;
     }
 
     getBalance(node) {
@@ -111,11 +97,12 @@ class AVLTree {
     }
 
     insert(node, key, parent = null) {
-        this.uiUpdater.incrementComparisons();
+        this.uiUpdater.incrementCounter('comparisons');
         if (!node) {
-            this.history.unshift({ type: 'add', key: key, parent: parent ? parent.key : 'none', reason: 'Inserted as a new node' });
+            this.history.unshift({ type: 'add', key, parent: parent ? parent.key : 'none', reason: 'Inserted as a new node' });
             return new AVLNode(key);
         }
+
         if (key < node.key) {
             node.left = this.insert(node.left, key, node);
         } else if (key > node.key) {
@@ -127,28 +114,30 @@ class AVLTree {
         node.height = 1 + Math.max(this.height(node.left), this.height(node.right));
         const balance = this.getBalance(node);
 
-        if (balance > 1 && key < node.left.key) {
-            this.history.unshift({ type: 'rotation', key: node.key, rotation: 'right', reason: 'Left-Left case' });
-            return this.rightRotate(node);
-        }
-
-        if (balance < -1 && key > node.right.key) {
-            this.history.unshift({ type: 'rotation', key: node.key, rotation: 'left', reason: 'Right-Right case' });
-            return this.leftRotate(node);
-        }
-
-        if (balance > 1 && key > node.left.key) {
-            node.left = this.leftRotate(node.left);
-            this.uiUpdater.incrementLeftRightRotations();
-            this.history.unshift({ type: 'rotation', key: node.key, rotation: 'left-right', reason: 'Left-Right case' });
-            return this.rightRotate(node);
+        if (balance > 1) {
+            if (key < node.left.key) {
+                this.history.unshift({ type: 'rotation', key: node.key, rotation: 'right', reason: 'Left-Left case' });
+                return this.rotate(node, 'right');
+            }
+            if (key > node.left.key) {
+                node.left = this.rotate(node.left, 'left');
+                this.uiUpdater.incrementCounter('leftRightRotations');
+                this.history.unshift({ type: 'rotation', key: node.key, rotation: 'left-right', reason: 'Left-Right case' });
+                return this.rotate(node, 'right');
+            }
         }
 
-        if (balance < -1 && key < node.right.key) {
-            node.right = this.rightRotate(node.right);
-            this.uiUpdater.incrementRightLeftRotations();
-            this.history.unshift({ type: 'rotation', key: node.key, rotation: 'right-left', reason: 'Right-Left case' });
-            return this.leftRotate(node);
+        if (balance < -1) {
+            if (key > node.right.key) {
+                this.history.unshift({ type: 'rotation', key: node.key, rotation: 'left', reason: 'Right-Right case' });
+                return this.rotate(node, 'left');
+            }
+            if (key < node.right.key) {
+                node.right = this.rotate(node.right, 'right');
+                this.uiUpdater.incrementCounter('rightLeftRotations');
+                this.history.unshift({ type: 'rotation', key: node.key, rotation: 'right-left', reason: 'Right-Left case' });
+                return this.rotate(node, 'left');
+            }
         }
 
         this.updateNodeDepthAndBalance(node);
@@ -164,31 +153,17 @@ class AVLTree {
     }
 
     search(node, key, path = []) {
-        this.uiUpdater.incrementComparisons();
+        this.uiUpdater.incrementCounter('comparisons');
         if (!node) {
-            this.history.unshift({ type: 'search', key: key, path: [...path], found: false });
+            this.history.unshift({ type: 'search', key, path: [...path], found: false });
             return null;
         }
         path.push(node.key);
         if (key === node.key) {
-            this.history.unshift({ type: 'search', key: key, path: [...path], found: true });
+            this.history.unshift({ type: 'search', key, path: [...path], found: true });
             return node;
         }
-        if (key < node.key) {
-            return this.search(node.left, key, path);
-        } else {
-            return this.search(node.right, key, path);
-        }
-    }
-
-    searchNode(key) {
-        const startTime = performance.now();
-        const result = this.search(this.root, key);
-        const endTime = performance.now();
-        this.uiUpdater.setOperationTime(endTime - startTime);
-        this.highlightSearchPath(key);
-        this.updateHistory();
-        return result;
+        return key < node.key ? this.search(node.left, key, path) : this.search(node.right, key, path);
     }
 
     highlightSearchPath(key) {
@@ -214,6 +189,16 @@ class AVLTree {
             .style("fill", d => path.includes(d.data.key) ? "red" : (d._children ? "green" : "#fff"));
     }
 
+    searchNode(key) {
+        const startTime = performance.now();
+        const result = this.search(this.root, key);
+        const endTime = performance.now();
+        this.uiUpdater.setOperationTime(endTime - startTime);
+        this.highlightSearchPath(key);
+        this.updateHistory();
+        return result;
+    }
+
     deleteNode(key) {
         const startTime = performance.now();
         this.root = this.delete(this.root, key);
@@ -223,7 +208,7 @@ class AVLTree {
     }
 
     delete(root, key, parent = null) {
-        this.uiUpdater.incrementComparisons();
+        this.uiUpdater.incrementCounter('comparisons');
         if (!root) return root;
 
         if (key < root.key) {
@@ -233,7 +218,7 @@ class AVLTree {
         } else {
             if (!root.left || !root.right) {
                 const deletedNode = root;
-                root = root.left ? root.left : root.right;
+                root = root.left || root.right;
                 this.history.unshift({ type: 'delete', key: deletedNode.key, parent: parent ? parent.key : 'none', reason: 'Node had one or no children' });
             } else {
                 const temp = this.getMinValueNode(root.right);
@@ -248,26 +233,24 @@ class AVLTree {
         root.height = 1 + Math.max(this.height(root.left), this.height(root.right));
         const balance = this.getBalance(root);
 
-        if (balance > 1 && this.getBalance(root.left) >= 0) {
-            this.history.unshift({ type: 'rotation', key: root.key, rotation: 'right', reason: 'Left-Left case' });
-            return this.rightRotate(root);
-        }
-
-        if (balance > 1 && this.getBalance(root.left) < 0) {
-            root.left = this.leftRotate(root.left);
+        if (balance > 1) {
+            if (this.getBalance(root.left) >= 0) {
+                this.history.unshift({ type: 'rotation', key: root.key, rotation: 'right', reason: 'Left-Left case' });
+                return this.rotate(root, 'right');
+            }
+            root.left = this.rotate(root.left, 'left');
             this.history.unshift({ type: 'rotation', key: root.key, rotation: 'left-right', reason: 'Left-Right case' });
-            return this.rightRotate(root);
-        }
-
-        if (balance < -1 && this.getBalance(root.right) <= 0) {
-            this.history.unshift({ type: 'rotation', key: root.key, rotation: 'left', reason: 'Right-Right case' });
-            return this.leftRotate(root);
+            return this.rotate(root, 'right');
         }
 
-        if (balance < -1 && this.getBalance(root.right) > 0) {
-            root.right = this.rightRotate(root.right);
+        if (balance < -1) {
+            if (this.getBalance(root.right) <= 0) {
+                this.history.unshift({ type: 'rotation', key: root.key, rotation: 'left', reason: 'Right-Right case' });
+                return this.rotate(root, 'left');
+            }
+            root.right = this.rotate(root.right, 'right');
             this.history.unshift({ type: 'rotation', key: root.key, rotation: 'right-left', reason: 'Right-Left case' });
-            return this.leftRotate(root);
+            return this.rotate(root, 'left');
         }
 
         this.updateNodeDepthAndBalance(root);
@@ -300,19 +283,24 @@ class AVLTree {
         historyList.innerHTML = '';
         this.history.forEach(operation => {
             const listItem = document.createElement('li');
-            if (operation.type === 'add') {
-                listItem.textContent = `Added node with key ${operation.key} under parent ${operation.parent}. Reason: ${operation.reason}`;
-            } else if (operation.type === 'delete') {
-                listItem.textContent = `Deleted node with key ${operation.key} under parent ${operation.parent}. Reason: ${operation.reason}`;
-            } else if (operation.type === 'rotation') {
-                listItem.textContent = `Performed ${operation.rotation} rotation on node with key ${operation.key}. Reason: ${operation.reason}`;
-            } else if (operation.type === 'search') {
-                listItem.textContent = `Searched for node with key ${operation.key}. Path: ${operation.path.join(' -> ')}. ${operation.found ? 'Node found.' : 'Node not found.'}`;
-            }
+            listItem.textContent = this.formatHistoryItem(operation);
             historyList.appendChild(listItem);
         });
     }
 
+    formatHistoryItem(operation) {
+        switch (operation.type) {
+            case 'add':
+                return `Added node with key ${operation.key} under parent ${operation.parent}. Reason: ${operation.reason}`;
+            case 'delete':
+                return `Deleted node with key ${operation.key} under parent ${operation.parent}. Reason: ${operation.reason}`;
+            case 'rotation':
+                return `Performed ${operation.rotation} rotation on node with key ${operation.key}. Reason: ${operation.reason}`;
+            case 'search':
+                return `Searched for node with key ${operation.key}. Path: ${operation.path.join(' -> ')}. ${operation.found ? 'Node found.' : 'Node not found.'}`;
+        }
+    }
+
     printPreOrder(node = this.root, logger = console.log) {
         if (node) {
             logger(node.key);
@@ -338,21 +326,17 @@ class AVLTree {
     }
 
     getDepth(node = this.root) {
-        if (node == null) {
+        if (!node) {
             return 0;
         }
-        const leftDepth = this.getDepth(node.left);
-        const rightDepth = this.getDepth(node.right);
-        return Math.max(leftDepth, rightDepth) + 1;
+        return 1 + Math.max(this.getDepth(node.left), this.getDepth(node.right));
     }
 
     getComplexity(node = this.root) {
-        if (node == null) {
+        if (!node) {
             return 0;
         }
-        const leftComplexity = this.getComplexity(node.left);
-        const rightComplexity = this.getComplexity(node.right);
-        return leftComplexity + rightComplexity + 1;
+        return 1 + this.getComplexity(node.left) + this.getComplexity(node.right);
     }
 }
 
@@ -360,6 +344,7 @@ let uiUpdater = new UIUpdater();
 let tree = new AVLTree(uiUpdater);
 
 function addValues() {
+    d3.select("#tree-container").select("svg").remove();
     const valueInput = document.getElementById('valueInput');
     const values = valueInput.value.split(/[\s,]+/).map(v => parseInt(v, 10)).filter(v => !isNaN(v));
     if (values.length > 0) {
@@ -367,11 +352,7 @@ function addValues() {
             tree.addNode(value);
         });
 
-        let operations = localStorage.getItem('operations');
-        operations = operations ? JSON.parse(operations) : [];
-        operations.push({ type: 'addValues', values: values });
-        localStorage.setItem('operations', JSON.stringify(operations));
-
+        updateOperations('addValues', values);
         valueInput.value = '';
         renderTree();
         printTraversals();
@@ -381,16 +362,12 @@ function addValues() {
 }
 
 function deleteValue() {
+    d3.select("#tree-container").select("svg").remove();
     const valueInput = document.getElementById('valueInput');
     const value = parseInt(valueInput.value, 10);
     if (!isNaN(value)) {
         tree.deleteNode(value);
-
-        let operations = localStorage.getItem('operations');
-        operations = operations ? JSON.parse(operations) : [];
-        operations.push({ type: 'deleteValue', value: value });
-        localStorage.setItem('operations', JSON.stringify(operations));
-
+        updateOperations('deleteValue', value);
         valueInput.value = '';
         renderTree();
         printTraversals();
@@ -399,16 +376,15 @@ function deleteValue() {
     }
 }
 
-function undoLastOperation() {
-    tree.undoLastOperation();
+function updateOperations(type, values) {
+    let operations = localStorage.getItem('operations');
+    operations = operations ? JSON.parse(operations) : [];
+    operations.push({ type, values });
+    localStorage.setItem('operations', JSON.stringify(operations));
 }
 
-function collapse(d) {
-    if (d.children) {
-        d._children = d.children;
-        d._children.forEach(collapse);
-        d.children = null;
-    }
+function undoLastOperation() {
+    tree.undoLastOperation();
 }
 
 function renderTree() {
@@ -416,19 +392,22 @@ function renderTree() {
         return;
     }
 
-    const margin = { top: 20, right: 40, bottom: 150, left: 10 },
-        container = d3.select("#tree-container").node().getBoundingClientRect(),
-        width = container.width - margin.right - margin.left,
-        height = container.height - margin.top - margin.bottom;
+    const margin = { top: 20, right: 40, bottom: 150, left: 10 };
+    const container = d3.select("#tree-container").node().getBoundingClientRect();
+    const width = container.width - margin.right - margin.left;
+    const height = container.height - margin.top - margin.bottom;
 
+    // Remove any existing SVG element inside #tree-container
     d3.select("#tree-container").select("svg").remove();
 
     const svg = d3.select("#tree-container")
         .append("svg")
-        .attr("width", width + margin.right + margin.left)
-        .attr("height", height + margin.top + margin.bottom)
+        .attr("width", container.width)
+        .attr("height", container.height)
+        .call(zoom)  // Apply zoom behavior
         .append("g")
-        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+        .attr("id", "svg-content")
+        .attr("transform", currentTransform);  // Apply current transform
 
     const treemap = d3.tree().size([height, width]);
 
@@ -439,12 +418,10 @@ function renderTree() {
     let i = 0;
     const duration = 750;
 
-    update(rootHierarchy);
-
     function update(source) {
         const treeData = treemap(rootHierarchy);
-        const nodes = treeData.descendants(),
-            links = treeData.descendants().slice(1);
+        const nodes = treeData.descendants();
+        const links = treeData.descendants().slice(1);
 
         nodes.forEach(d => d.y = d.depth * 100);
 
@@ -453,7 +430,7 @@ function renderTree() {
 
         const nodeEnter = node.enter().append('g')
             .attr('class', 'node')
-            .attr("transform", d => "translate(" + source.y0 + "," + source.x0 + ")")
+            .attr("transform", d => `translate(${source.y0},${source.x0})`)
             .on('click', click);
 
         nodeEnter.append('circle')
@@ -493,13 +470,7 @@ function renderTree() {
 
         nodeUpdate.selectAll('text')
             .attr("x", d => d.children || d._children ? -13 : 13)
-            .attr("dy", (d, i) => {
-                switch (i) {
-                    case 0: return "-.5em";
-                    case 1: return "1em";
-                    case 2: return "2em";
-                }
-            });
+            .attr("dy", (d, i) => ["-.5em", "1em", "2em"][i]);
 
         nodeUpdate.select('circle.node')
             .attr('r', 10)
@@ -511,11 +482,8 @@ function renderTree() {
             .attr("transform", d => `translate(${source.x},${source.y})`)
             .remove();
 
-        nodeExit.select('circle')
-            .attr('r', 1e-6);
-
-        nodeExit.select('text')
-            .style('fill-opacity', 1e-6);
+        nodeExit.select('circle').attr('r', 1e-6);
+        nodeExit.select('text').style('fill-opacity', 1e-6);
 
         const link = svg.selectAll('path.link')
             .data(links, d => d.id);
@@ -536,11 +504,6 @@ function renderTree() {
             .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');
-
         const linkExit = link.exit().transition()
             .duration(duration)
             .attr('d', d => {
@@ -549,11 +512,8 @@ function renderTree() {
             })
             .remove();
 
-        linkExit.select('circle')
-            .attr('r', 1e-6);
-
-        linkExit.select('text')
-            .style('fill-opacity', 1e-6);
+        linkExit.select('circle').attr('r', 1e-6);
+        linkExit.select('text').style('fill-opacity', 1e-6);
 
         nodes.forEach(d => {
             d.x0 = d.x;
@@ -561,11 +521,10 @@ function renderTree() {
         });
 
         function diagonal(s, d) {
-            const path = `M ${s.x} ${s.y}
+            return `M ${s.x} ${s.y}
                 C ${(s.x + d.x) / 2} ${s.y},
                 ${(s.x + d.x) / 2} ${d.y},
                 ${d.x} ${d.y}`;
-            return path;
         }
 
         function click(d) {
@@ -581,12 +540,15 @@ function renderTree() {
     }
 
     update(rootHierarchy);
+
+    // Apply the current zoom transform
+    d3.select("#tree-container").select("svg").call(zoom.transform, currentTransform);
 }
 
 function updateDimensions() {
-    const margin = { top: 20, right: 20, bottom: 20, left: 20 },
-        width = window.innerWidth - margin.right - margin.left - 40,
-        height = window.innerHeight - margin.top - margin.bottom - 200;
+    const margin = { top: 20, right: 20, bottom: 20, left: 20 };
+    const width = window.innerWidth - margin.right - margin.left - 40;
+    const height = window.innerHeight - margin.top - margin.bottom - 200;
     d3.select("#tree-container svg")
         .attr("width", width + margin.right + margin.left)
         .attr("height", height + margin.top + margin.bottom);
@@ -596,48 +558,41 @@ var toggleOpen = document.getElementById('toggleOpen');
 var toggleClose = document.getElementById('toggleClose');
 var collapseMenu = document.getElementById('collapseMenu');
 
-function handleClick() {
-    if (collapseMenu.style.display === 'block') {
-        collapseMenu.style.display = 'none';
-    } else {
-        collapseMenu.style.display = 'block';
-    }
-}
+toggleOpen.addEventListener('click', () => {
+    collapseMenu.style.display = collapseMenu.style.display === 'block' ? 'none' : 'block';
+});
 
-toggleOpen.addEventListener('click', handleClick);
 window.onresize = () => {
     updateDimensions();
     renderTree();
 };
 
-document.getElementById('valueInput').addEventListener('keypress', function (e) {
-    if (e.key === 'Enter') {
-        e.preventDefault();
-        addValues();
-    }
-});
-
-document.getElementById('toggleBreadcrumb').addEventListener('click', function () {
-    const buttons = document.getElementById('breadcrumb-buttons');
-    if (buttons.classList.contains('hidden')) {
-        buttons.classList.remove('hidden');
-    } else {
-        buttons.classList.add('hidden');
-    }
+document.addEventListener('DOMContentLoaded', function () {
+    document.getElementById('valueInput').addEventListener('keypress', function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            d3.select("#tree-container").select("svg").remove();
+            addValues();
+        }
+    });
+
+    document.getElementById('toggleBreadcrumb').addEventListener('click', function () {
+        const buttons = document.getElementById('breadcrumb-buttons');
+        const icon = document.getElementById('breadcrumbIcon');
+        buttons.classList.toggle('hidden');
+        icon.style.transform = buttons.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(-90deg)';
+    });
 });
 
 function updateTreeStats() {
-    const treeDepth = tree.getDepth();
-    const treeComplexity = tree.getComplexity();
-
-    document.getElementById('tree-depth').textContent = treeDepth;
-    document.getElementById('tree-complexity').textContent = treeComplexity;
+    document.getElementById('tree-depth').textContent = tree.getDepth();
+    document.getElementById('tree-complexity').textContent = tree.getComplexity();
 }
 
 function printTraversals() {
-    let preOrderResult = [];
-    let inOrderResult = [];
-    let postOrderResult = [];
+    const preOrderResult = [];
+    const inOrderResult = [];
+    const postOrderResult = [];
 
     tree.printPreOrder(undefined, value => preOrderResult.push(value));
     tree.printInOrder(undefined, value => inOrderResult.push(value));
@@ -653,14 +608,11 @@ function updateTraversalResults(preOrder, inOrder, postOrder) {
 
 function resetTree() {
     tree = new AVLTree(uiUpdater);
-    uiUpdater = new UIUpdater();
-    uiUpdater.updateRotationCount();
+    uiUpdater.reset();
     document.getElementById('resultBox').value = '';
     document.getElementById('valueInput').value = '';
-
-    d3.select("#tree-container").select("svg").remove();
-
     localStorage.removeItem('operations');
+    d3.select("#tree-container").select("svg").remove();
     tree.history = [];
     tree.updateHistory();
 }
@@ -670,11 +622,7 @@ function searchValue() {
     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.`);
-        }
+        alert(result ? `Node with key ${value} found.` : `Node with key ${value} not found.`);
     } else {
         alert('Please enter a valid number.');
     }
@@ -690,10 +638,10 @@ function executeSavedOperations() {
                     tree.addNode(value);
                 });
             } else if (op.type === 'deleteValue') {
-                tree.deleteNode(op.value);
+                tree.deleteNode(op.values);
             }
         });
-        renderTree();
+        renderTree();  // Ensure tree is rendered after loading saved operations
     }
 }
 
diff --git a/docs/styles.css b/docs/styles.css
index 2470c2b..5a7eb85 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -1,17 +1,20 @@
 body {
     font-family: 'Inter', sans-serif;
-    background-color: #f9fafb;
 }
 
 #tree-container {
     min-height: 500px;
+    width: 100%;
     max-width: 100%;
     border: 1px solid #cbd5e0;
     margin-bottom: 20px;
     padding: 10px;
-    background-color: #ffffff;
-    transition: background-color 0.3s ease, border-color 0.3s ease;
-    overflow: hidden; /* Ensure no scrolling */
+    transition: border-color 0.3s ease;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    position: relative;
 }
 
 #history-list {
@@ -38,25 +41,22 @@ textarea:focus {
 }
 
 input:focus {
-    position: sticky;
-    top: 70px;
     z-index: 10;
-    background-color: #f9fafb;
 }
 
 @media (max-width: 1024px) {
-    .lg\:w-1\/4 {
+    .lg\:w-1\/5 {
         width: 100%;
     }
 
-    .lg\:flex {
-        display: block;
+    .lg\:w-3\/5 {
+        width: 100%;
     }
 
-    .lg\:space-x-4 {
-        margin-top: 10px;
+    .lg\:block {
+        display: none;
     }
-    
+
     header ul {
         display: none;
     }
