EXTREMUM_web/base/static/js/radio_model.js

import { create_dataframe, create_div } from './methods.js'

$(document).ready(function () {
    $('#radio_buttons').change(function () {
        if ($("input[name=modeling_options]:checked").length > 0) {

            // pre trained model selected
            // append saved plots to DOM 

            var pre_trained = $("input:radio[name=modeling_options]:checked").val();
            const currentUrl = window.location.href;
            var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
            var loader_id = "#" + pre_trained + "_loader";
            $(loader_id).show();
            var url = ""

            if (currentUrl.includes('charts.html')) {

                // if they already exist, remove them and update them
                if (document.getElementById("principle_component_analysis")) {
                    $("#principle_component_analysis").remove();
                }
                if (document.getElementById("class_report")) {
                    $("#class_report").remove();
                }
                if (document.getElementById("feature_importance")) {
                    $("#feature_importance").remove();
                }
                if (document.getElementById("classifier_data")) {
                    $("#classifier_data").remove();
                }
                if (document.getElementById("tsne_plot")) {
                    $("#tsne_plot").remove();
                }
            }
            else if (currentUrl.includes('counterfactuals.html')) {
                if (document.getElementById("tsne_plot")) {
                    $("#tsne_plot").remove();
                }

                url = "counterfactuals";
            }
            $.ajax({
                method: 'POST',
                url: '',
                headers: { 'X-CSRFToken': csrftoken, },
                data: { 'action': "pre_trained", 'pre_trained': pre_trained, "url": url },
                success: function (ret) {
                    $(loader_id).hide();
                    var ret = JSON.parse(ret)

                    if (currentUrl.includes('charts.html')) {
                        var class_report = ret["class_report"];
                        var classifier_data = ret["classifier_data"];
                        var pca = ret["pca"];
                        var dataset_type = ret["dataset_type"];
                        $("#tab").show();

                        if (dataset_type == "timeseries") {
                            // ecg dataset
                            var tsne = ret["tsne"];
                            $("#tsne-tab-nav").show();
                            var col_div_tsne = create_div("tsne_plot", "plotly_fig")
                            col_div_tsne.insertAdjacentHTML('beforeend', tsne);
                            $("#tsne_container").append(col_div_tsne);
                        } else {
                            $("#feature-tab-nav").show();
                            var feature_importance = ret["feature_importance"];
                            var col_div_fi = create_div("feature_importance", " plotly_fig");
                            col_div_fi.insertAdjacentHTML('beforeend', feature_importance);
                            $("#fi_container").append(col_div_fi)
                        }

                        // create dataframe type display for classifier_data
                        var tb = create_dataframe(classifier_data, "details_container");

                        var cr_tb = create_dataframe(class_report, "cr_container");

                        // create div elements for plots
                        var col_div_pca = create_div("principle_component_analysis", "plotly_fig");
                        col_div_pca.insertAdjacentHTML('beforeend', pca);

                        var col_div_class_report = create_div("class_report", "plotly_fig sticky-top-table");
                        col_div_class_report.append(cr_tb);

                        var col_div_classifier_data = create_div("classifier_data", "plotly_fig sticky-top-table");
                        col_div_classifier_data.append(tb);

                        $("#loader_train").hide();
                        $("#preprocessing").hide();
                        $("#figs").show();
                        $("#figs_2").show();
                        $("#counterfactuals").show();

                        $("#classification_report").append(col_div_class_report);
                        $("#details").append(col_div_classifier_data);
                        $("#pca_container").append(col_div_pca);

                    } else if (currentUrl.includes('counterfactuals.html')) {
                        var tsne = ret["tsne"];
                        // create div elements for plots
                        var col_div_tsne = create_div("tsne_plot", "plotly_fig");
                        col_div_tsne.insertAdjacentHTML('beforeend', tsne);
                        $("#counterfactuals").show();

                        // Or you can use Plotly.relayout() to resize the plot
                        $('#tsne_container').append(col_div_tsne);
                    }
                },
                error: function (ret) {
                    console.log(":(")
                }
            });
        }
    });

    document.getElementById('confirmDeleteButton').addEventListener('click', function () {
        const fileNameValue = this.getAttribute('data-file-value');
        const fileName = this.getAttribute('data-file');
        const csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
        const uploadedDataset = $("input:radio[name=radio_buttons]:checked").val();
        // AJAX request to delete file
        $.ajax({
            type: 'POST',
            url: '',  // Add the URL where this request should go
            data: {
                action: 'delete_pre_trained',
                model_name: fileNameValue,
                csrfmiddlewaretoken: csrftoken  // Django CSRF token
            },
            success: function () {
                // Remove the file entry from the UI
                const fileElement = $(`[data-file="${fileName}"]`).closest('.form-check');
                fileElement.remove();
                
                // Check if there are any remaining .form-check elements
                if ($('#radio_buttons .form-check').length === 0) {
                    // Replace the #radio_buttons content with the fallback message
                    const radioButtonsContainer = document.querySelector('#radio_buttons');
                    radioButtonsContainer.innerHTML = `
                        <p class="text-danger">
                            There are no available pre-trained models. 
                            Please <a href="/train.html" class="text-primary">train a model</a>.
                        </p>
                    `;
                }
            
                // Attach a success message to the modal
                const modalBody = document.querySelector('#deleteFileModal .modal-body');
                modalBody.innerHTML = `
                    <div class="alert alert-success mb-3" role="alert">
                        <i class="fas fa-check-circle mr-2"></i>
                        The file <strong>${fileName}</strong> has been successfully deleted.
                    </div>
                `;
            
                // Optionally hide the modal after a delay
                setTimeout(() => {
                    $('#deleteFileModal').modal('hide');
                    modalBody.innerHTML = ''; // Clear the message after hiding
                }, 2000);
            
                // Reset containers if the deleted file is the uploaded dataset
                if (fileName === uploadedDataset) {
                    resetContainers();
                }
            },
            
            error: function () {
                // Attach an error message to the modal
                const modalBody = document.querySelector('#deleteFileModal .modal-body');
                modalBody.innerHTML = `
                    <div class="alert alert-danger mb-3" role="alert">
                        <i class="fas fa-times-circle mr-2"></i>
                        An error occurred while deleting the file. Please try again.
                    </div>
                `;
    
                // Optionally reset the modal content after a delay
                setTimeout(() => {
                    modalBody.innerHTML = `
                        <p class="mb-1">Delete <span id="fileToDeleteName" class="font-weight-bold"></span> pre-trained classifier on <span class="font-weight-bold"> {{ df_name }} </span> dataset?</p>
                        <small class="text-muted">This action is permanent.</small>
                    `;
                }, 3000);
            }
        });
    });    
});