feat: add predefined scenarios to visualization

Fixes #3

Signed-off-by: Matej Focko <mfocko@redhat.com>
This commit is contained in:
Matej Focko 2022-05-16 18:23:05 +02:00
parent 326756db69
commit 030cd9a701
Signed by: mfocko
GPG key ID: 7C47D46246790496
2 changed files with 94 additions and 1 deletions

View file

@ -92,7 +92,43 @@
<div class="col-3"></div> <div class="col-3"></div>
</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> </div>
<script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://d3js.org/d3.v5.min.js"></script>

View file

@ -40,6 +40,63 @@ function switchTree(TreeType) {
tree.record(""); 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() { function render() {
recorder.render(); recorder.render();
setTimeout(render); setTimeout(render);