feat: add predefined scenarios to visualization

Fixes #3

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

index.html

@@ -92,7 +92,43 @@
       <div class="col-3"></div>
     </div>
 
-    <div class="row py-3" id="graph" style="text-align: center"></div>
+    <div class="row py-3">
+      <div class="col" id="graph" style="text-align: center"></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="Basic outlined example"
+          >
+            <button
+              type="button"
+              class="btn btn-outline-primary"
+              onclick="prepareSingleRotationAfterDelete()"
+            >
+              Single rotation after delete
+            </button>
+            <button
+              type="button"
+              class="btn btn-outline-primary"
+              onclick="prepareDoubleRotationAfterDelete()"
+            >
+              Double rotation after delete
+            </button>
+            <button
+              type="button"
+              class="btn btn-outline-primary"
+              onclick="prepareDemotionOfBothNodesDuringDelete()"
+            >
+              Demotion of both parent and current node during deletion
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 
   <script src="https://d3js.org/d3.v5.min.js"></script>

visualization.js

@@ -40,6 +40,63 @@ function switchTree(TreeType) {
     tree.record("");
 }
 
+// #region prepared scenarios
+function prepareSingleRotationAfterDelete() {
+    let newTree = new WAVLTree();
+
+    for (let key of [0, 1, 2, -1]) {
+        newTree.insert(key);
+    }
+
+    document.getElementById("wavlTreeBtn").checked = true;
+
+    tree = newTree;
+    tree.recorder = recorder;
+    recorder.clear();
+    tree.record("Prepare tree");
+
+    document.getElementById("deleteInput").value = 2;
+}
+
+function prepareDoubleRotationAfterDelete() {
+    let newTree = new WAVLTree();
+
+    for (let key of [0, -7, 1, -1]) {
+        newTree.insert(key);
+    }
+
+    document.getElementById("wavlTreeBtn").checked = true;
+
+    tree = newTree;
+    tree.recorder = recorder;
+    recorder.clear();
+    tree.record("Prepare tree");
+
+    document.getElementById("deleteInput").value = 1;
+}
+
+function prepareDemotionOfBothNodesDuringDelete() {
+    let newTree = new WAVLTree();
+
+    for (let key of [0, 1, 2, 3, -2, -3, -1]) {
+        newTree.insert(key);
+    }
+
+    for (let key of [-2]) {
+        newTree.delete(key);
+    }
+
+    document.getElementById("wavlTreeBtn").checked = true;
+
+    tree = newTree;
+    tree.recorder = recorder;
+    recorder.clear();
+    tree.record("Prepare tree");
+
+    document.getElementById("deleteInput").value = 2;
+}
+// #endregion prepared scenarios
+
 function render() {
     recorder.render();
     setTimeout(render);