EXTREMUM_web/base/static/js/click_on_graph.js

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

$(document).ready(function () {
    // When click on a graph point, all the rest are blurred
    // (opacity 0.2) while the clicked one's opacity remains/
    // Iterate through the elements and find the one with opacity 1

    // Case 1: They are all opacity 1!
    // -------------------------------
    // In that case we dont have to check all of them
    // to make sure they all are opacity 1...
    // if we just find 2 we can determine 
    // that all the rest are also opacity: 1 and thus
    // there was no click on a specific point 
    // (you cannot have more than 1 point clicked at the same time)

    // Case 1 saves us from random clicks in the graph area that
    // dont focus on a particualr point or when a clicked point is
    // clicked again. When the latter occurs, we should not print
    // the point again, and since, from plotly functionality, a 
    // click on an already clicked point deselects that point,
    // they all get opacity 1, and thus all the information of 
    // the previous clicked point, displayed in the DOM,
    // should now be removed.

    // Case 2: There was actually a click on a point!
    // ----------------------------------------------
    // In that case we need to find the clicked point. Plotly
    // does not save all the points in one selection.
    // So iterate through all the collections and all the points
    // until the point element with opacity 1 is found. 
    // This solution feels inefficient but in reality rarely will
    // the last ever point of the last collection be selected.


    if (document.getElementById('tsne_container')) {
        document.getElementById('tsne_container').addEventListener('click', function (pnt) {

            // lookout
            var tsne = document.getElementById('tsne_plot');
            // get the array of selections of elements (points)
            // of the tsne plot 
            var points_array = tsne.getElementsByClassName('points');
            var counter_break = 0;
            var j;
            var i;
            var st;
            var x;
            var y;

            // for every collection of points...
            for (i = 0; i < points_array.length; i++) {
                var points = points_array[i]
                var children = points.children

                // check if there are at least 2 points with opacity 1 
                // if yes, then no particular point was clicked 
                if (getComputedStyle(children[0]).opacity == 1 && getComputedStyle(children[1]).opacity == 1) {
                    break;
                }

                // An actual point was clicked
                // for every point in the selection...
                for (j = 0; j < children.length; j++) {
                    var st = children[j]
                    var opacity = getComputedStyle(st).opacity

                    // if point has opacity 1 then we found it
                    if (opacity == 1) {
                        counter_break++;
                        break;
                    }
                }

                // if opacity 1 point was found, 
                // save its coordinates
                // else move to the other selection
                if (counter_break) {
                    var x = st.__data__["x"]
                    var y = st.__data__["y"]
                    break;
                }
            }
            if (counter_break == 0) {
                // if no points were clicked
                // or if an already clicked point was re-clicked
                $("#cfrow").remove();
                document.getElementById("cftable").style.display = "none";
                document.getElementById("cfbtn").style.display = "none";
            } else if (counter_break == 1) {
                // point was clicked
                if ($("#og_cf_row") && $("#og_cf_headers")) {
                    $("#og_cf_row").hide()
                    $("#og_cf_headers").hide()
                }
                $("#cfrow").remove();
                $("#og_point_loader").show()
                var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
                var pre_trained = $("input:radio[name=modeling_options]:checked").val();
                $.ajax({
                    method: 'POST',
                    url: '',
                    headers: { 'X-CSRFToken': csrftoken },
                    data: { 'x': x, 'y': y, 'action': "click_graph", "model_name": pre_trained },
                    success: function (ret) {
                        $("#og_point_loader").hide();
                        $("#cftable_container").show();
                        $("#cfbtn_container").show();

                        var ret_parsed = JSON.parse(ret)
                        var row = ret_parsed["row"]
                        var feature_importance_dict = ret_parsed["feature_importance_dict"]

                        if (($("#features_to_vary_container").find("#featureList").length > 0)) {
                            $("#features_to_vary_container #featureList").remove();
                        }
                        var outterDiv = create_div("featureList", "")
                        for (const [key, value] of Object.entries(feature_importance_dict)) {
                            var feature = value["feature"];
                            var importance = value["importance"];

                            var innerDiv = create_div("", "feature-item form-check")
                            var input = document.createElement("input")
                            input.setAttribute("class", "form-check-input")
                            input.setAttribute("type", "checkbox")
                            input.setAttribute("value", feature)
                            input.setAttribute("name", "features_to_vary_boxes")
                            var label = document.createElement("label")
                            label.setAttribute("class", "form-check-label")
                            label.setAttribute("for", "flexCheckDefault")
                            label.innerHTML = feature + `<span>  (importance: ${importance})` + "</span>"
                            innerDiv.appendChild(input);
                            innerDiv.appendChild(label);
                            outterDiv.append(innerDiv);
                        }

                        $("#features_to_vary_container").append(outterDiv)
                        $("#features_to_vary").show();

                        var transposed_row = transpose_table(row)
                        var tb = create_dataframe(transposed_row, "cfrow")
                        if (document.getElementById("cfrow")) {
                            $("#cfrow").remove();
                            document.getElementById("cftable").style.display = "none";
                        }
                        $("#cftable").append(tb);
                        document.getElementById("cftable").style.display = "block";
                        document.getElementById("cfbtn").style.display = "block";
                    },
                    error: function (row) {
                        console.log("it didnt work");
                    }
                });
            } else if (counter_break > 1) {
                console.log("All opacity 1")
            }
        });
    }
});