{% extends "framework.html" %}
{% load static %}

{% block content %}

{% block action_modals %}
{% endblock action_modals %}

<!-- Include required libs -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/c3@0.7.20/c3.min.css" rel="stylesheet">

<div class="panel-group" id="model-detail">
    <div class="panel panel-default">
        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
            {{ model.name }}
            <div id="actionsButton"
                 style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;"
                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                     aria-haspopup="true" aria-expanded="false"><span
                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
                    style="padding-right:1em"></span></a>
                <ul id="actionsList" class="dropdown-menu">
                    {% block actions %}
                    {% endblock %}
                </ul>
            </div>
        </div>
        <div class="panel-body">
            <p> {{ model.description }} </p>
        </div>
        <!-- Predict Panel -->
        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
            <h4 class="panel-title">
                <a id="predict-smiles-link" data-toggle="collapse" data-parent="#model-detail"
                   href="#predict-smiles">Predict</a>
            </h4>
        </div>
        <div id="predict-smiles" class="panel-collapse collapse in">
            <div class="panel-body list-group-item">
                <div class="input-group">
                <input id="smiles-to-predict" type="text" class="form-control" placeholder="CCN(CC)C(=O)C1=CC(=CC=C1)C">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="submit" id="predict-button">Predict!</button>
                    </span>
                </div>
                <div id="loading"></div>
                <div id="predictResultTable"></div>
            </div>
        </div>
        <!-- End Predict Panel       -->
        {% if model.model_status == 'FINISHED' %}
        <!-- Single Gen Curve Panel -->
        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
            <h4 class="panel-title">
                <a id="sg-curve-link" data-toggle="collapse" data-parent="#model-detail"
                   href="#sg-curve">Predict</a>
            </h4>
        </div>
        <div id="sg-curve" class="panel-collapse collapse in">
            <div class="panel-body list-group-item">
                <!-- Center container contents -->
                <div class="container" style="display: flex;justify-content: center;">
                    <div id="sg-curve-plotdiv" class="chart">
                        <div id="sg-chart"></div>
                    </div>
                </div>

            </div>
        </div>
        <script>
                $(function() {
                    if(!($('#sg-chart').length > 0)) {
                        return;
                    }
                    console.log($('#sg-chart').length)
                    //$('#sg-curve-plotdiv').empty();

                    var x = ['Recall'];
                    var y = ['Precision'];
                    var thres = ['threshold'];

                    // Compare function for the given array
                    function compare(a, b) {
                        if (a.threshold < b.threshold)
                            return -1;
                        else if (a.threshold > b.threshold)
                            return 1;
                        else
                            return 0;
                    }

                    function getIndexForValue(data, val, val_name) {
                        for(var idx in data) {
                            if(data[idx][val_name] == val) {
                                return idx;
                            }
                        }
                        return -1;
                    }

                    var data = {{ model.pr_curve|safe }}
                    var dataLength = Object.keys(data).length;
                    data.sort(compare);

                    for (var idx in data) {
                        var d = data[idx];
                        x.push(d.recall);
                        y.push(d.precision);
                        thres.push(d.threshold);
                    }
                    var chart = c3.generate({
                        bindto: '#sg-chart',
                        data: {
                            onclick: function (d, e) {
                                var idx = d.index;
                                var thresh = data[dataLength-idx-1].threshold;

                                //onclick(thresh)

                            },
                            x: 'Recall',
                            y: 'Precision',
                            columns: [
                                x,
                                y,
                                //thres
                            ]
                        },
                        size: {
                            height: 400, // TODO: Make variable to current modal width
                            width: 480
                        },
                        axis: {
                            x: {
                                max: 1,
                                min: 0,
                                label: 'Recall',
                                padding: 0,
                                tick: {
                                    fit: true,
                                    values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
                                }
                            },
                            y: {
                                max: 1,
                                min: 0,
                                label: 'Precision',
                                padding: 0,
                                tick: {
                                    fit: true,
                                    values: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
                                }
                            }
                        },
                        point: {
                            r: 4
                        },
                        tooltip: {
                            format: {
                                title: function (recall) {
                                    idx = getIndexForValue(data, recall, "recall");
                                    if(idx != -1) {
                                        return "Threshold: " + data[idx].threshold;
                                    }
                                    return "";
                                },
                                value: function (precision, ratio, id) {
                                    return undefined;
                                }
                            }
                        },
                        zoom: {
                            enabled: true
                        }
                    });
                });
        </script>
        <!-- End Single Gen Curve Panel       -->
        {% endif %}
    </div>
</div>

<script>

    function handleResponse(data) {
        res = "<table class='table table-striped'>"
        res += "<thead>"
        res += "<th scope='col'>#</th>"

        columns = ['products', 'image', 'probability', 'btrule']

        for(col in columns) {
            res += "<th scope='col'>" + columns[col] + "</th>"
        }

        res += "</thead>"
        res += "<tbody>"
        var cnt = 1;
        for(transformation in data) {
            res += "<tr>"
            res += "<th scope='row'>" + cnt + "</th>"
            res += "<th scope='row'>" + data[transformation]['products'][0].join(', ') + "</th>"
            res += "<th scope='row'>" + "<img width='400' src='{% url 'depict' %}?smiles=" + encodeURIComponent(data[transformation]['products'][0].join('.')) + "'></th>"
            res += "<th scope='row'>" + data[transformation]['probability'].toFixed(3) + "</th>"
            if (data[transformation]['btrule'] != null) {
                res += "<th scope='row'>" + "<a href='" + data[transformation]['btrule']['url'] + "'>" + data[transformation]['btrule']['name'] + "</a>" + "</th>"
            } else {
               res += "<th scope='row'>N/A</th>"
            }
            res += "</tr>"
            cnt += 1;
        }

        res += "</tbody>"
        res += "</table>"
        $("#predictResultTable").append(res);
    }

    function clear() {
        $("#predictResultTable").removeClass("alert alert-danger");
        $("#predictResultTable").empty();
    }

    if($('#predict-button').length > 0) {
        $("#predict-button").on("click", function(e) {
            e.preventDefault();

            data = {
                "smiles": $("#smiles-to-predict").val(),
                "classify": "ILikeCats!"
            }

            clear();

            makeLoadingGif("#loading", "{% static '/images/wait.gif' %}");
            $.ajax({
                type : 'get',
                data : data,
                url : '',
                success: function(data, textStatus) {
                    try {
                        $("#loading").empty();
                        handleResponse(data);
                    } catch (error) {
                        console.log("Error");
                        $("#loading").empty();
                        $("#predictResultTable").addClass("alert alert-danger");
                        $("#predictResultTable").append("Error while processing request :/");
                    }
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    $("#loading").empty();
                    $("#predictResultTable").addClass("alert alert-danger");
                    $("#predictResultTable").append("Error while processing request :/");
                }
            });
        });
    }
</script>

{% endblock content %}