EXTREMUM_web/base/static/js/methods.js

function create_div(id_name, class_name) {
    var col_div = document.createElement("div")
    if (class_name != "")
        col_div.setAttribute("class", class_name)
    if (id_name != "")
        col_div.setAttribute("id", id_name)
    return col_div
}

function create_dataframe(df, id) {
    var tb = document.createElement('table');
    tb.innerHTML = df.trim();
    tb.setAttribute("id", id);
    tb.setAttribute("class", "table table-bordered")
    return tb
}

function create_selection(features_list, id, value_array = [], default_feature = "") {

    //Create array of options to be added
    var array = features_list;

    //Create and append select list
    var selectList = document.createElement("select");
    selectList.setAttribute("class", "col mr-2 selectpicker form-control")
    selectList.id = id;

    var array_to_use = []
    if (value_array != null) {
        array_to_use = value_array;
    } else {
        array_to_use = array;
    }

    //Create and append the options
    for (var i = 0; i < array.length; i++) {
        var option = document.createElement("option");
        option.value = array_to_use[i]
        option.text = array[i];
        selectList.appendChild(option);
    }

    if (default_feature != "") {
        selectList.value = default_feature
    }

    return selectList
}

// Function to transpose the table
function transpose_table(tableHtml) {
    // Convert the HTML string into a jQuery object for manipulation
    const originalTable = $(tableHtml);
    console.log(tableHtml)
    // Get the column names (th elements in the header row)
    const colNames = originalTable.find('thead th').map(function () {
        return $(this).text().trim();
    }).get();

    // Get the data rows (as an array of arrays of values)
    const rows = originalTable.find('tbody').map(function () {
        return $(this).find('td').map(function () {
            return $(this).text().trim();
        }).get();
    }).get();  // We use get() twice to fully extract values as a 2D array


    const rowsNum = originalTable.find('tbody tr').length;

    // Build the new transposed table
    let transposedHtml = '<table border="1" class="dataframe"><thead><tr style="text-align: right;"><th>Feature</th>';

    // Add headers for the values (assuming each row represents an entry)
    transposedHtml += `<th>Original Value</th>`;
    if (rowsNum >= 2)
        transposedHtml += `<th>Counterfactual Value</th>`;
    transposedHtml += '</tr></thead><tbody>';

    // Create rows for each column (i.e., each feature name becomes a row)
    if (rowsNum >= 2) {
        for (let colIndex = 0; colIndex < colNames.length; colIndex++) {
            transposedHtml += `<tr><td>${colNames[colIndex]}</td>`;
            transposedHtml += `<td>${rows[colIndex]}</td>`;
            transposedHtml += `<td>${rows[colIndex + colNames.length]}</td>`;
            transposedHtml += '</tr>';
        }
    } else {
        for (let colIndex = 0; colIndex < colNames.length; colIndex++) {
            transposedHtml += `<tr><td>${colNames[colIndex]}</td>`;
            transposedHtml += `<td>${rows[colIndex]}</td>`;
            transposedHtml += '</tr>';
        }
    }

    transposedHtml += '</tbody></table>';

    // Return the transposed table as an HTML string
    return transposedHtml;
}

function create_uploaded_file_radio(name, counter) {
    var formCheckDiv = document.createElement("div");
    formCheckDiv.className = "form-check mb-1 d-flex align-items-center";

    // Create the radio input element
    var radioInput = document.createElement("input");
    radioInput.className = "form-check-input mr-2";
    radioInput.type = "radio";
    radioInput.name = "uploaded_file";
    radioInput.id = "file_" + counter;
    radioInput.value = name;
    radioInput.required = true;

    // Create the label element
    var label = document.createElement("label");
    label.className = "form-check-label mr-auto";
    label.htmlFor = "file_" + counter;
    label.innerText = name;

    // Create the delete button
    var deleteButton = document.createElement("button");
    deleteButton.className = "delete-file-icon p-0 ml-2 text-muted close";
    deleteButton.type = "button";
    deleteButton.dataset.file = name;
    deleteButton.setAttribute("aria-label", "Delete " + name);

    // Create the '×' span inside the delete button
    var deleteIcon = document.createElement("span");
    deleteIcon.setAttribute("aria-hidden", "true");
    deleteIcon.innerHTML = "&times;";

    // Append the delete icon to the delete button
    deleteButton.appendChild(deleteIcon);

    // Append the radio input, label, and delete button to the container div
    formCheckDiv.appendChild(radioInput);
    formCheckDiv.appendChild(label);
    formCheckDiv.appendChild(deleteButton);

    return formCheckDiv
}


function showSuccessMessage() {
    const successMessage = document.getElementById("success-message");
    successMessage.classList.remove("d-none");

    // Add a slight delay to trigger the transition
    setTimeout(() => successMessage.classList.add("show"), 10);

    // Automatically hide the message after a few seconds
    setTimeout(() => hideSuccessMessage(), 3000);
}

function hideSuccessMessage() {
    const successMessage = document.getElementById("success-message");
    successMessage.classList.remove("show");

    // Delay hiding the element fully until after the transition
    setTimeout(() => successMessage.classList.add("d-none"), 400);
}

function showLoader(show, ids = ["#loader_ds", "#loader_stats"]) {
    ids.forEach(id => {
        $(id).toggle(show);
    });
}
function resetContainers(ids = [
    "#df_container",
    "#stats_container",
    "#figs",
    "#df",
    "#df_stats",
    "#df_cached",
    "#df_stats_cached",
    "#ts_confidence_cached",
    "#ts_stats_cached",
    "#ts_confidence",
    "#ts_stats"
]) {
    ids.forEach(id => {
        $(id).hide();
    });
}

function clearPreviousContent(ids = [
    "#df_container",
    "#stats_container",
    "#pretrained_radio",
    "#feature1",
    "#feature2",
    "#label",
    "#ts_confidence_container",
    "#ts_stats_container"
]) {
    ids.forEach(id => {
        const element = document.querySelector(id);
        if (element) element.remove();
    });
}


export {
    create_selection, create_dataframe, create_div, transpose_table, create_uploaded_file_radio, showSuccessMessage, hideSuccessMessage, showLoader, clearPreviousContent, resetContainers
}