297 lines
8.7 KiB
JavaScript
297 lines
8.7 KiB
JavaScript
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(dfName, counter, isChecked = false) {
|
||
// Create the main container div
|
||
const formCheckDiv = document.createElement("div");
|
||
formCheckDiv.className = "form-check mb-2 d-flex align-items-start";
|
||
|
||
// Create the radio input element
|
||
const radioInput = document.createElement("input");
|
||
radioInput.className = "form-check-input mr-2";
|
||
radioInput.type = "radio";
|
||
radioInput.name = "uploaded_file";
|
||
radioInput.id = `element_${counter}`;
|
||
radioInput.value = dfName;
|
||
radioInput.required = true;
|
||
if (isChecked) {
|
||
radioInput.checked = true;
|
||
}
|
||
|
||
// Create the label element
|
||
const label = document.createElement("label");
|
||
label.className = "form-check-label mr-auto text-break"; // Matches static HTML classes
|
||
label.htmlFor = `element_${counter}`;
|
||
label.textContent = dfName;
|
||
|
||
// Create the delete button
|
||
const deleteButton = document.createElement("button");
|
||
deleteButton.className = "delete-file-icon p-0 ml-2 text-muted close align-self-start";
|
||
deleteButton.type = "button";
|
||
deleteButton.dataset.file = dfName;
|
||
deleteButton.setAttribute("aria-label", `Delete ${dfName}`);
|
||
|
||
// Create the '×' span inside the delete button
|
||
const deleteIcon = document.createElement("span");
|
||
deleteIcon.setAttribute("aria-hidden", "true");
|
||
deleteIcon.innerHTML = "×";
|
||
|
||
// 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 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();
|
||
});
|
||
}
|
||
|
||
function initializeAlertCloseHandlers() {
|
||
document.querySelectorAll('.alert .close').forEach(button => {
|
||
button.addEventListener('click', function () {
|
||
const alertElement = button.closest('.alert');
|
||
if (alertElement) {
|
||
alertElement.style.display = 'none'; // Hide the alert
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
function showError(message, id) {
|
||
$(`#${id}`).show();
|
||
console.log(document.getElementById(id))
|
||
if (message) {
|
||
$(`#${id}`).html(` <button type="button" class="close close-alert ml-auto p-0" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button> <i class="fas fa-exclamation-triangle"></i> ${message}`);
|
||
} else {
|
||
$(`#${id}`).html('Error');
|
||
}
|
||
initializeAlertCloseHandlers();
|
||
}
|
||
|
||
function showSuccess(message, id) {
|
||
$(`#${id}`).show();
|
||
if (message) {
|
||
$(`#${id}`).html(`<button type="button" class="close close-alert ml-auto p-0" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button><i class="fas fa-check-circle"></i> ${message}`);
|
||
} else {
|
||
$(`#${id}`).html('Error');
|
||
}
|
||
initializeAlertCloseHandlers();
|
||
}
|
||
|
||
function showElement(elementId) {
|
||
$(elementId).show();
|
||
}
|
||
|
||
function hideElement(elementId) {
|
||
$(elementId).hide();
|
||
}
|
||
|
||
function openModal(modal) {
|
||
// Show the modal
|
||
modal.classList.add('show');
|
||
modal.style.display = 'block';
|
||
|
||
// Add the modal-open class to the body
|
||
document.body.classList.add('modal-open');
|
||
|
||
// Create and show the backdrop
|
||
const backdrop = document.createElement('div');
|
||
backdrop.className = 'modal-backdrop fade show';
|
||
document.body.appendChild(backdrop);
|
||
}
|
||
|
||
function closeModal(modal) {
|
||
// Hide the modal
|
||
modal.classList.remove('show');
|
||
modal.style.display = 'none';
|
||
|
||
// Remove the modal-open class from the body
|
||
document.body.classList.remove('modal-open');
|
||
|
||
// Remove the backdrop
|
||
const backdrop = document.querySelector('.modal-backdrop');
|
||
if (backdrop) {
|
||
backdrop.parentNode.removeChild(backdrop);
|
||
}
|
||
}
|
||
|
||
|
||
function hideElements(selectors) {
|
||
selectors.forEach(selector => document.querySelector(selector)?.style.setProperty('display', 'none'));
|
||
}
|
||
|
||
function showElements(selectors) {
|
||
selectors.forEach(selector => document.querySelector(selector)?.style.removeProperty('display'));
|
||
}
|
||
|
||
function removeExistingElements(selectors) {
|
||
selectors.forEach(selector => document.querySelector(selector)?.remove());
|
||
}
|
||
|
||
function appendToElement(selector, element) {
|
||
document.querySelector(selector)?.appendChild(element);
|
||
}
|
||
|
||
export {
|
||
create_selection,
|
||
create_dataframe,
|
||
create_div,
|
||
transpose_table,
|
||
create_uploaded_file_radio,
|
||
showLoader,
|
||
clearPreviousContent,
|
||
resetContainers,
|
||
showSuccess,
|
||
showElement,
|
||
hideElement,
|
||
openModal,
|
||
closeModal,
|
||
hideElements,
|
||
showElements,
|
||
removeExistingElements,
|
||
appendToElement,
|
||
showError,
|
||
initializeAlertCloseHandlers
|
||
} |