web/comparator_visualization.js

let lRecorder = new Recorder(
    d3.select("#left").graphviz(),
    null,
    "left"
).renderAtOnce();
let rRecorder = new Recorder(
    d3.select("#right").graphviz(),
    null,
    "right"
).renderAtOnce();

let left = new AVLTree();
let right = new WAVLTree();

left.recorder = lRecorder;
right.recorder = rRecorder;

function insertCallback() {
    let number = document.getElementById("insertInput").value;
    if (number === "") {
        return false;
    }

    let value = parseInt(number);

    left.insert(value);
    right.insert(value);

    document.getElementById("insertInput").value = "";
    return false;
}

function deleteCallback() {
    let number = document.getElementById("deleteInput").value;
    if (number === "") {
        return false;
    }

    let value = parseInt(number);

    left.delete(value);
    right.delete(value);

    document.getElementById("deleteInput").value = "";
    return false;
}

function switchTree(TreeType, side) {
    let [lType, rType] =
        side == "left"
            ? [TreeType, right.constructor]
            : [left.constructor, TreeType];

    left = new lType();
    left.recorder = lRecorder;

    right = new rType();
    right.recorder = rRecorder;

    for (let t of [left, right]) {
        t.recorder.clear();
        t.record();
    }
}

async function render() {
    await Promise.all([
        new Promise(() => lRecorder.render()),
        new Promise(() => rRecorder.render()),
    ]);
    // lRecorder.render();
    // rRecorder.render();
    setTimeout(render);
}
render();