feat: add prepared scenarios for comparators

Signed-off-by: Matej Focko <mfocko@redhat.com>

comparator.html

@@ -76,6 +76,39 @@
       <div class="row py-3">
         <div class="col px-3" style="text-align: center;" id="left"></div>
         <div class="col px-3" style="text-align: center;" id="right"></div>
+
+        <div class="col-2 px-1">
+          <div class="row">
+            <h6 class="row">Prepared scenarios</h6>
+
+            <div
+              class="btn-group-vertical"
+              role="group"
+              aria-label="Prepared scenarios"
+            >
+              <button
+                type="button"
+                class="btn btn-outline-primary"
+                onclick="prepareDifferentRanks()"
+                data-bs-toggle="tooltip"
+                data-bs-placement="right"
+                title="This scenario shows differences in ranks between AVL and WAVL after a deletion of key 1 from the prepared trees."
+              >
+                Different ranks
+              </button>
+              <button
+                type="button"
+                class="btn btn-outline-primary"
+                onclick="prepareDifferentTrees()"
+                data-bs-toggle="tooltip"
+                data-bs-placement="right"
+                title="This scenario shows differences in ranks between AVL and WAVL after a deletion of key -31 from the prepared trees."
+              >
+                Different trees after delete
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -92,10 +125,10 @@
     <script src="ravl.js"></script>
 
     <script src="recorder.js"></script>
-    <script src="comparator_visualization.js"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
     crossorigin="anonymous"
     ></script>
+    <script src="comparator_visualization.js"></script>
 </body>

comparator_visualization.js

@@ -11,7 +11,7 @@ let rRecorder = new Recorder(
 
 let left = null;
 let right = null;
-setTrees(AVLTree, WAVLTree);
+setTrees(new AVLTree(), new WAVLTree());
 
 function operationCallback(lMethod, rMethod, id) {
     let number = document.getElementById(id).value;
@@ -42,16 +42,16 @@ function deleteCallback() {
     );
 }
 
-function setTrees(lType, rType) {
-    left = new lType();
+function setTrees(newLeft, newRight, msg) {
+    left = newLeft;
     left.recorder = lRecorder;
 
-    right = new rType();
+    right = newRight;
     right.recorder = rRecorder;
 
     for (let t of [left, right]) {
         t.recorder.clear();
-        t.record();
+        t.record(msg);
     }
 }
 
@@ -60,9 +60,52 @@ function switchTree(TreeType, side) {
         side == "left"
             ? [TreeType, right.constructor]
             : [left.constructor, TreeType];
-    setTrees(lType, rType);
+    setTrees(new lType(), new rType());
 }
 
+// #region prepared scenarios
+function prepareDifferentRanks() {
+    let newLTree = new AVLTree();
+    let newRTree = new WAVLTree();
+
+    for (let key of [0, -7, 1, -1]) {
+        newLTree.insert(key);
+        newRTree.insert(key);
+    }
+
+    document.getElementById("lAvlTreeBtn").checked = true;
+    document.getElementById("rWavlTreeBtn").checked = true;
+
+    setTrees(newLTree, newRTree, "Prepare tree");
+
+    document.getElementById("deleteInput").value = 1;
+}
+
+function prepareDifferentTrees() {
+    let newLTree = new AVLTree();
+    let newRTree = new WAVLTree();
+
+    for (let key of [0, -31, 2, 3, 4, 1, 6, -1, -4, -3, -2, 31]) {
+        newLTree.insert(key);
+        newRTree.insert(key);
+    }
+
+    document.getElementById("lAvlTreeBtn").checked = true;
+    document.getElementById("rWavlTreeBtn").checked = true;
+
+    setTrees(newLTree, newRTree, "Prepare tree");
+
+    document.getElementById("deleteInput").value = -31;
+}
+// #endregion prepared scenarios
+
+const tooltipTriggerList = document.querySelectorAll(
+    '[data-bs-toggle="tooltip"]'
+);
+const tooltipList = [...tooltipTriggerList].map(
+    (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+);
+
 async function render() {
     await Promise.all([
         new Promise(() => lRecorder.render()),