<commit_before>{% extends "base.html" %}
{% load humanize %}
{% load staticfiles %}
{% load general_templatetags %}
{% block title %}Monitor category mapping{% endblock title %}
{% block extra_head %}
    {% load_sound_player_files %}
{% endblock %}

{% block page_js %}
    <script type="text/javascript">
    $(function () {
        $(".submit-form").on("click", function () {
            submitForm();
        })
    });
    function addTagRow() {

        var container = $(".tag-inputs");

        var row = $("<div>", {
            class: "inline field tag-group-or"
        });
        var input = $("<input>", {
            type: "text",
            placeholder: "Tag string"
        });
        var button_container = $("<span>");
        var button = $("<button>", {
            class: "ui circular red icon tiny button"
        });
        var close = $("<i>", {
            class: "ui close icon"
        });

        button.append(close);
        button.on("click", function () {
            row.remove();
        });
        button_container.append(button);
        row.append([input, button_container]);
        container.append(row);

    }

    function submitForm() {

        var tag_containers = $('.tag-group-or');
        var positive_tag_list = [];
        tag_containers.each( function () {
            var input = $(this).find('input');
            positive_tag_list.push(input.val());
        });
        var preproc_positive = $('#preproc-positive').is(":checked");
        var negative_tags = $('#negative-tags').val();
        var preproc_negative = $('#preproc-negative').is(":checked");

        $.ajax({
            url: "{% url 'mapping-category' dataset.short_name node.url_id %}",
            type: "POST",
            data: {
                "positive-tags": positive_tag_list,
                "preproc-positive": preproc_positive,
                "negative-tags": negative_tags,
                "preproc-negative": preproc_negative,
                csrfmiddlewaretoken: "{{ csrf_token }}"
            },
            traditional: true
        })
            .done(function (d) {
                console.log(d);
                showStats(d);
            })
    }

    function showStats (data) {
        var cur_quality_est = data.mapping.quality_estimate;
        var cur_num_votes = data.mapping.num_votes;
        var cur_num_sounds = data.mapping.num_sounds;
        var cur_np = data.mapping.num_NP / cur_num_votes * 100;
        var cur_pnp = data.mapping.num_PNP / cur_num_votes * 100;
        var cur_pp = data.mapping.num_PP / cur_num_votes * 100;
        var cur_u = data.mapping.num_U / cur_num_votes * 100;

        var new_quality_est = data.retrieved.quality_estimate;
        var new_num_votes = data.retrieved.num_votes;
        var new_num_sounds = data.retrieved.num_sounds;
        var new_np = data.retrieved.num_NP / new_num_votes * 100;
        var new_pnp = data.retrieved.num_PNP / new_num_votes * 100;
        var new_pp = data.retrieved.num_PP / new_num_votes * 100;
        var new_u = data.retrieved.num_U / new_num_votes * 100;

        $(".curr-map-quality").text((cur_quality_est * 100).toFixed(2) + "%");
        $(".curr-num-votes").text(cur_num_votes);
        $(".curr-num-sounds").text(cur_num_sounds);
        $(".curr-distr .np .bar")
            .width(cur_np + "%")
            .height("20px");
        $(".curr-distr .np .val")
            .text(cur_np.toFixed(1) + "%");
        $(".curr-distr .pnp .bar")
            .width(cur_pnp + "%")
            .height("20px");
        $(".curr-distr .pnp .val")
            .text(cur_pnp.toFixed(1) + "%");
        $(".curr-distr .pp .bar")
            .width(cur_pp + "%")
            .height("20px");
        $(".curr-distr .pp .val")
            .text(cur_pp.toFixed(1) + "%");
        $(".curr-distr .u .bar")
            .width(cur_u + "%")
            .height("20px");
        $(".curr-distr .u .val")
            .text(cur_u.toFixed(1) + "%");

        $(".new-map-quality").text((new_quality_est * 100).toFixed(2) + "%");
        $(".new-num-votes").text(new_num_votes);
        $(".new-num-sounds").text(new_num_sounds);
        $(".new-distr .np .bar")
            .width(new_np + "%")
            .height("20px");
        $(".new-distr .np .val")
            .text(new_np.toFixed(1) + "%");
        $(".new-distr .pnp .bar")
            .width(new_pnp + "%")
            .height("20px");
        $(".new-distr .pnp .val")
            .text(new_pnp.toFixed(1) + "%");
        $(".new-distr .pp .bar")
            .width(new_pp + "%")
            .height("20px");
        $(".new-distr .pp .val")
            .text(new_pp.toFixed(1) + "%");
        $(".new-distr .u .bar")
            .width(new_u + "%")
            .height("20px");
        $(".new-distr .u .val")
            .text(new_u.toFixed(1) + "%");
    }
    </script>
{% endblock %}

{% block content %}
    <h1 class="ui header">Monitor the mapping of <span class="ui big label">{{ node.name }}</span></h1>

    <div class="ui raised segment" style="position: relative;">

        <h4 class="ui dividing header">
            <div class="content">
                Filter by tags
                <div class="sub header">Add the tags you want to be selected</div>
            </div>
        </h4>

        <div class="ui stackable grid">

            <div class="eight wide column">
                <div class="ui green header">Include tags</div>
                <div class="ui form">

                    <div class="tag-inputs">
                        <div class="inline field tag-group-or">
                            <label>Comma separated tags (e.g.: dog, bark, panting)</label>
                            <input type="text" placeholder="Tag string"/><commit_msg>Add common sounds. Scale bar widths<commit_after>{% extends "base.html" %}
{% load humanize %}
{% load staticfiles %}
{% load general_templatetags %}
{% block title %}Monitor category mapping{% endblock title %}
{% block extra_head %}
    {% load_sound_player_files %}
{% endblock %}

{% block page_js %}
    <script type="text/javascript">
    $(function () {
        $(".submit-form").on("click", function () {
            submitForm();
        })
    });
    function addTagRow() {

        var container = $(".tag-inputs");

        var row = $("<div>", {
            class: "inline field tag-group-or"
        });
        var input = $("<input>", {
            type: "text",
            placeholder: "Tag string"
        });
        var button_container = $("<span>");
        var button = $("<button>", {
            class: "ui circular red icon tiny button"
        });
        var close = $("<i>", {
            class: "ui close icon"
        });

        button.append(close);
        button.on("click", function () {
            row.remove();
        });
        button_container.append(button);
        row.append([input, button_container]);
        container.append(row);

    }

    function submitForm() {

        var tag_containers = $('.tag-group-or');
        var positive_tag_list = [];
        tag_containers.each( function () {
            var input = $(this).find('input');
            positive_tag_list.push(input.val());
        });
        var preproc_positive = $('#preproc-positive').is(":checked");
        var negative_tags = $('#negative-tags').val();
        var preproc_negative = $('#preproc-negative').is(":checked");

        $.ajax({
            url: "{% url 'mapping-category' dataset.short_name node.url_id %}",
            type: "POST",
            data: {
                "positive-tags": positive_tag_list,
                "preproc-positive": preproc_positive,
                "negative-tags": negative_tags,
                "preproc-negative": preproc_negative,
                csrfmiddlewaretoken: "{{ csrf_token }}"
            },
            traditional: true
        })
            .done(function (d) {
                console.log(d);
                showStats(d);
            })
    }

    function showStats (data) {

        var common = data.num_common_sounds;
        var scale = 0.8;

        var cur_quality_est = data.mapping.quality_estimate;
        var cur_num_votes = data.mapping.num_votes;
        var cur_num_sounds = data.mapping.num_sounds;
        var cur_np = data.mapping.num_NP / cur_num_votes * 100;
        var cur_pnp = data.mapping.num_PNP / cur_num_votes * 100;
        var cur_pp = data.mapping.num_PP / cur_num_votes * 100;
        var cur_u = data.mapping.num_U / cur_num_votes * 100;

        var new_quality_est = data.retrieved.quality_estimate;
        var new_num_votes = data.retrieved.num_votes;
        var new_num_sounds = data.retrieved.num_sounds;
        var new_np = data.retrieved.num_NP / new_num_votes * 100;
        var new_pnp = data.retrieved.num_PNP / new_num_votes * 100;
        var new_pp = data.retrieved.num_PP / new_num_votes * 100;
        var new_u = data.retrieved.num_U / new_num_votes * 100;

        $(".curr-map-quality").text((cur_quality_est * 100).toFixed(2) + "%");
        $(".curr-num-votes").text(cur_num_votes);
        $(".curr-num-sounds").text(cur_num_sounds);
        $(".curr-distr .np .bar")
            .width(cur_np * scale + "%")
            .height("20px");
        $(".curr-distr .np .val")
            .text(cur_np.toFixed(1) + "%");
        $(".curr-distr .pnp .bar")
            .width(cur_pnp * scale + "%")
            .height("20px");
        $(".curr-distr .pnp .val")
            .text(cur_pnp.toFixed(1) + "%");
        $(".curr-distr .pp .bar")
            .width(cur_pp * scale + "%")
            .height("20px");
        $(".curr-distr .pp .val")
            .text(cur_pp.toFixed(1) + "%");
        $(".curr-distr .u .bar")
            .width(cur_u * scale + "%")
            .height("20px");
        $(".curr-distr .u .val")
            .text(cur_u.toFixed(1) + "%");

        $(".new-map-quality").text((new_quality_est * 100).toFixed(2) + "%");
        $(".new-num-votes").text(new_num_votes);
        $(".new-num-sounds").text(new_num_sounds + " - " + common + " from current");
        $(".new-distr .np .bar")
            .width(new_np * scale + "%")
            .height("20px");
        $(".new-distr .np .val")
            .text(new_np.toFixed(1) + "%");
        $(".new-distr .pnp .bar")
            .width(new_pnp * scale + "%")
            .height("20px");
        $(".new-distr .pnp .val")
            .text(new_pnp.toFixed(1) + "%");
        $(".new-distr .pp .bar")
            .width(new_pp * scale + "%")
            .height("20px");
        $(".new-distr .pp .val")
            .text(new_pp.toFixed(1) + "%");
        $(".new-distr .u .bar")
            .width(new_u * scale + "%")
            .height("20px");
        $(".new-distr .u .val")
            .text(new_u.toFixed(1) + "%");
    }
    </script>
{% endblock %}

{% block content %}
    <h1 class="ui header">Monitor the mapping of <span class="ui big label">{{ node.name }}</span></h1>

    <div class="ui raised segment" style="position: relative;">

        <h4 class="ui dividing header">
            <div class="content">
                Filter by tags
                <div class="sub header">Add the tags you want to be selected</div>
            </div>
        </h4>

        <div class="ui stackable grid">

            <div class="eight wide column">
                <div class="ui green header">Include tags</div>
                <div class="ui form">

                    <div class="tag-inputs">
                        <div class="inline field tag-group-or">
                            <label>Comma separated tags (e.g.: dog, bark, panting)</label>
                            <input type="text" placeholder="Tag string"/>
{'fraction_non_alphanumeric': 0.16986933128362797, 'fraction_numerical': 0.010419335553847468, 'mean_word_length': 1.7775142314990513, 'pattern_counts': {'":': 12, '<': 59, '<?xml version=': 0, '>': 59, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1683509', 'n_tokens_mistral': 3843, 'n_tokens_neox': 3629, 'n_words': 701}