105 lines
3.2 KiB
JavaScript
105 lines
3.2 KiB
JavaScript
import {
|
|
create_dataframe,
|
|
create_selection,
|
|
showSuccess,
|
|
showElement,
|
|
hideElement,
|
|
openModal,
|
|
closeModal,
|
|
hideElements,
|
|
showElements,
|
|
removeExistingElements,
|
|
appendToElement
|
|
} from './methods.js';
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const uploadedFileInput = document.getElementById('uploaded_file');
|
|
const loader = document.getElementById('cfbtn_loader');
|
|
const loaderStats = document.getElementById('loader_stats');
|
|
|
|
uploadedFileInput.addEventListener('change', handleFileUpload);
|
|
|
|
async function handleFileUpload() {
|
|
const uploadedDataset = document.querySelector('input[name=uploaded_file]:checked')?.value;
|
|
if (!uploadedDataset) return;
|
|
|
|
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
|
|
|
|
hideElements([
|
|
'#df_container', '#stats_container', '#figs',
|
|
'#ts_confidence_cached', '#ts_stats_cached',
|
|
'#ts_confidence', '#ts_stats'
|
|
]);
|
|
|
|
showElement(loader);
|
|
|
|
try {
|
|
const response = await fetchData(uploadedDataset, csrfToken);
|
|
handleResponse(response);
|
|
} catch (error) {
|
|
console.error('An error occurred:', error);
|
|
// TODO: Implement user-friendly error handling
|
|
} finally {
|
|
hideElements([loader, loaderStats]);
|
|
}
|
|
}
|
|
|
|
async function fetchData(dataset, token) {
|
|
const response = await fetch('', {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': token,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
action: 'uploaded_datasets',
|
|
df_name: dataset
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
return await response.json();
|
|
}
|
|
|
|
function handleResponse(data) {
|
|
removeExistingElements([
|
|
'#pretrained_radio', '#df_container', '#stats_container',
|
|
'#feature1', '#feature2', '#label',
|
|
'#ts_confidence_container', '#ts_stats_container'
|
|
]);
|
|
|
|
data.dataset_type === 'tabular' ? displayTabularData(data) : displayTimeSeriesData(data);
|
|
}
|
|
|
|
function displayTabularData({ data_to_display, fig, features, feature1, feature2, labels, curlabel }) {
|
|
const selectionContainer = document.getElementById('selection');
|
|
[
|
|
create_selection(features, 'feature1', null, feature1),
|
|
create_selection(features, 'feature2', null, feature2),
|
|
create_selection(labels, 'label', null, curlabel)
|
|
].forEach(selection => selectionContainer.appendChild(selection));
|
|
|
|
appendToElement('#df_div', create_dataframe(data_to_display, 'df_container'));
|
|
showElements(['#model_container', '#df', '#df_stats']);
|
|
appendToElement('#stats_div', createFigureContainer('stats_container', fig));
|
|
}
|
|
|
|
function displayTimeSeriesData({ fig, fig1 }) {
|
|
appendToElement('#ts_stats_div', createFigureContainer('ts_stats_container', fig1));
|
|
appendToElement('#ts_confidence_div', createFigureContainer('ts_confidence_container', fig));
|
|
showElements(['#ts_stats', '#ts_confidence']);
|
|
}
|
|
|
|
function createFigureContainer(id, content) {
|
|
const container = document.createElement('div');
|
|
container.id = id;
|
|
container.innerHTML = content;
|
|
container.className = 'plotly_fig';
|
|
return container;
|
|
}
|
|
});
|
|
|