crab-webapp/public/js/index.js

const socket = io();

const progressContainer = document.getElementById("progress-container");
const progressBar = document.getElementById("progress-bar");
const progressText = document.getElementById("progress-text");
const uploadStatusEl = document.getElementById("upload-status");
const statusStatusEl = document.getElementById("status-status");

const commentResultsContainer = document.querySelector(
    ".results-container#comment",
);
const refinementResultsContainer = document.querySelector(
    ".results-container#refinement",
);

const tick = "✅";
const cross = "❌";

let results = {};

// Download logic
document.getElementById("download-dataset").onclick = () => {
    const ds = document.getElementById("dataset-select").value;
    const withCtx = document.getElementById("with-context").checked;
    const url =
        `/datasets/download/${ds}` + (withCtx ? "?withContext=true" : "");
    window.location = url;
};

function populateCommentTable(results) {
    commentResultsContainer.classList.remove("hidden");

    const tbody = commentResultsContainer.querySelector("table tbody");
    tbody.innerHTML = "";

    Object.entries(results).forEach(([id, info]) => {
        const row = tbody.insertRow(); // create a new row
        const idCell = row.insertCell(); // cell 1: id
        const commentCell = row.insertCell();
        const scoreCell = row.insertCell();
        const span = document.createElement("span");

        idCell.textContent = id;
        span.className = "comment-cell";
        span.textContent = info["proposed_comment"];
        commentCell.appendChild(span);
        scoreCell.textContent = info["max_bleu_score"].toFixed(2);
    });
}

function populateRefinementTable(results) {
    refinementResultsContainer.classList.remove("hidden");

    const tbody = refinementResultsContainer.querySelector("table tbody");
    tbody.innerHTML = "";

    Object.entries(results).forEach(([id, info]) => {
        const row = tbody.insertRow(); // create a new row
        const idCell = row.insertCell(); // cell 1: id
        const compiledCell = row.insertCell();
        const testedCell = row.insertCell();

        idCell.textContent = id;
        compiledCell.textContent = info["compilation"] || false ? tick : cross;
        testedCell.textContent = info["test"] || false ? tick : cross;
    });
}

function handleRefinementAnswer(json) {
    uploadStatusEl.style.color = "green";
    uploadStatusEl.textContent = json["id"];
}

// Upload logic
document.getElementById("upload-btn").onclick = async () => {
    uploadStatusEl.classList.add("hidden");
    progressContainer.classList.add("hidden");

    const type = document.getElementById("answer-cype").value;
    const fileInput = document.getElementById("file-cnput");
    if (!fileInput.files.length) {
        return alert("Please choose a JSON file first.");
    }
    const file = fileInput.files[0];
    const form = new FormData();
    form.append("file", file);

    const res = await fetch(`/answers/submit/${type}`, {
        headers: {
            "X-Socket-Id": socket.id,
        },
        method: "POST",
        body: form,
    });

    const json = await res.json();
    if (!res.ok) {
        uploadStatusEl.classList.remove("hidden");
        uploadStatusEl.style.color = "red";
        uploadStatusEl.textContent =
            json.error + (json.message ? ": " + json.message : "");
        return;
    }

    commentResultsContainer.classList.add("hidden");
    refinementResultsContainer.classList.add("hidden");
    if (type === "comment") populateCommentTable(json);
    else handleRefinementAnswer(json);
};

[...document.getElementsByClassName("download-results")].forEach((e) => {
    e.onclick = () => {
        const dataStr =
            "data:text/json;charset=utf-8," +
            encodeURIComponent(JSON.stringify(results));
        const dlAnchorElem = document.createElement("a");
        dlAnchorElem.setAttribute("href", dataStr);
        dlAnchorElem.setAttribute("download", "results.json");
        document.body.appendChild(dlAnchorElem);
        dlAnchorElem.click();
        document.body.removeChild(dlAnchorElem);
    };
});

function setProgress(percent) {
    progressContainer.classList.remove("hidden");
    progressBar.value = percent;
    progressText.textContent = `${percent.toFixed(0)}%`;
}

socket.on("progress", (data) => {
    setProgress(data.percent);
});

socket.on("started-processing", () => {
    setProgress(0);
});

socket.on("complete", (results) => {
    progressContainer.classList.add("hidden");
    refinementResultsContainer.classList.remove("hidden");
    populateRefinementTable(results);
});

socket.on("successful-upload", () => {
    uploadStatusEl.classList.remove("hidden");
    uploadStatusEl.style.color = "green";
    uploadStatusEl.textContent = "Upload succeeded!";
});

document.getElementById("request-status").onclick = async () => {
    if (!uuid.reportValidity()) return;
    const res = await fetch(`/answers/status/${uuid.value}`, {
        headers: {
            "X-Socket-Id": socket.id,
        },
    });

    const json = await res.json();
    if (!res.ok) {
        statusStatusEl.classList.remove("hidden");
        statusStatusEl.style.color = "red";
        statusStatusEl.textContent = json.message ? json.message : json.error;
        return;
    }
    statusStatusEl.classList.remove("hidden");
    statusStatusEl.style.color = "green";
    statusStatusEl.textContent = json["status"];

    if (json.status == "complete") populateRefinementTable(json.results);
};