wavl/web
1
0
Fork 0
Code Issues 3 Pull requests Projects Releases 1 Wiki Activity

feat: add prepared scenarios for comparators

Browse source 
Signed-off-by: Matej Focko <mfocko@redhat.com>
This commit is contained in:
Matej Focko 2022-05-17 14:39:33 +02:00
parent f779c349c3
commit 4b021a62f0
Signed by: mfocko
GPG key ID: 7C47D46246790496
2 changed files with 85 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
comparator.html
View file

@ -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"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
<script src="comparator_visualization.js"></script>
</body>

55
comparator_visualization.js
View file

@ -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()),