{% extends "base.html" %}
{% from 'macros.html' import fmt_int, fmt_float %}

{% block stats_active %}
active
{% endblock %}

{% block content %}

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-scale.v3.js"></script>

<script type=text/javascript>
  $SCRIPT_ROOT = {{ script_root|tojson|safe }};
</script>

<style>
  div.tooltip {
      position: absolute;
      text-align: center;
      padding: 4px;
      font: 12px sans-serif;
      background: lightsteelblue;
      border: 0px;
  }
</style>

<div class="column-group">
  <div class="xlarge-100 large-100 small-100 bottom-space" style="padding-right:1em">
    <h1 style="margin-top: 0px">
      Overall statistics
    </h1>
    <dl>
      <dt>Number of datasets</dt>
      <dd>{{ fmt_int(n_data) }}</dd>
      <dt>Number of networks</dt>
      <dd>{{ fmt_int(n_nets) }}
        <span style="margin-left: 2em">
          ({{fmt_int(n_undirected) }} undirected,
           {{fmt_int(n_directed) }} directed,
           {{fmt_int(n_bip) }} bipartite)
        </span>
      </dd>
      <dt>Number of networks (excluding {{ whales | join(", ") }})</dt>
      <dd>{{ fmt_int(n_nets_s) }}
        <span style="margin-left: 2em">
          ({{fmt_int(n_undirected_s) }} undirected,
           {{fmt_int(n_directed_s) }} directed,
           {{fmt_int(n_bip_s) }} bipartite)
        </span>
      </dd>
      <dt>Tag counts</dt>
      <dd>
        {% for tag in tags %}
        <a href="/?tags={{ tag[0] }}"><span class="ink-label grey">{{tag[0]}}</span></a>
        &times;{{ fmt_int(tag[1]) }}
        {% if tag != tags[-1] %}
        <span style="margin: .3em .3em 0 0">|</span>
        {% endif %}
        {% endfor %}
      </dd>
      <br/>
      <dt>Network properties</dt>
      <p>Clicking on the plot marker will lead you to the corresponding dataset page. Scrolling zooms, and click pans.</p>
      <dd>

        <div style="text-align: center;">
        <div style='display: inline-grid; grid-template-columns: min-content min-content; align-items: center; grid-column-gap: 2em;'>
          <div>
            <svg id="scatter_area" height=650 width=650> </svg>
          </div>
          <div id="selectors">
            <div style='display: grid; width=20%; grid-template-columns: max-content max-content; grid-column-gap: 1em; grid-row-gap: 1em;  align-items: center;'>
              <div>
                X axis:
              </div>
              <select id="x_axis">
              {% for a, title in analyses.items() %}
                  {% if title is not none and a != "is_directed" and a != "is_bipartite" %}
                     {% if a == "num_vertices" %}
                         <option value="{{a}}" selected="selected">{{title}}</option>
                     {% else %}
                         <option value="{{a}}">{{title}}</option>
                     {% endif %}
                  {% endif %}
              {% endfor %}
              </select>
              <div>
                Y axis:
              </div>
              <select id="y_axis">
              {% for a, title in analyses.items() %}
                  {% if title is not none and a != "directed" and a != "is_bipartite" %}
                     {% if a == "num_edges" %}
                         <option value="{{a}}" selected="selected">{{title}}</option>
                     {% else %}
                         <option value="{{a}}">{{title}}</option>
                     {% endif %}
                  {% endif %}
              {% endfor %}
              </select>
              <div>
                Size :
              </div>
              <select id="c_size">
              {% for a, title in analyses.items() %}
                  {% if title is not none %}
                     {% if a == "average_degree" %}
                         <option value="{{a}}" selected="selected">{{title}}</option>
                     {% else %}
                         <option value="{{a}}">{{title}}</option>
                     {% endif %}
                  {% endif %}
              {% endfor %}
              </select>
              <div>
                Color :
              </div>
              <select id="c_color">
              {% for a, title in analyses.items() %}
                  {% if title is not none %}
                     {% if a == "global_clustering" %}
                         <option value="{{a}}" selected="selected">{{title}}</option>
                     {% else %}
                         <option value="{{a}}">{{title}}</option>
                     {% endif %}
                  {% endif %}
              {% endfor %}
              </select>
            </div>
          </div>

        </div>
        </div>
      </dd>
      <dt>Excluded datasets</dt>
      <dd>
        {% for whale in whales %}
        <input type="checkbox" id="{{whale}}" name="{{whale}}" value="exclude" onclick="exclude_check()" checked="on" style="vertical-align:middle;">
        <label for="{{whale}}" style="padding-right: 1em; padding-left: .3em"><a href="/net/{{whale}}">{{whale}}</a></label>
        {% endfor %}
      </dd>

      <script>

        // append the svg object to the body of the page
        var svg = d3.select("#scatter_area");

        var tooltip = d3.select("body").append("div")
            .attr("class", "tooltip")
            .style("opacity", 0);

        titles = {
            {% for a, title in analyses.items() %}
            "{{a}}" : "{{ title }}",
            {% endfor %}
        }

        scales = {
            {% for a, scale in scales.items() %}
            "{{a}}" : "{{ scale }}",
            {% endfor %}
        }

        function draw(nets) {

            var x_col = d3.select("#x_axis").property("value");
            var y_col = d3.select("#y_axis").property("value");
            var size_col = d3.select("#c_size").property("value");
            var color_col = d3.select("#c_color").property("value");

            // Create data

            svg.selectAll("*").remove();

            // set the dimensions and margins of the graph
            var margin = {top: 10, right: 40, bottom: 60, left: 60},
                width = Math.max(window.innerWidth - d3.select("#selectors").node().getBoundingClientRect().width - 300, 450),
                height = 650;

            svg.attr("width", width)
                .attr("height", height)
                .append("g");

            var data = []

            for (var n in nets) {
                var net = nets[n]
                if (net["nets"].length == 1) {
                    data.push( {x: net["analyses"][x_col],
                                y: net["analyses"][y_col],
                                size : net["analyses"][size_col],
                                color : net["analyses"][color_col],
                                name: n,
                                alt: ""});
                }
                else {
                    for (var alt of net["nets"]) {
                        data.push( {x: net["analyses"][alt][x_col],
                                    y: net["analyses"][alt][y_col],
                                    size: net["analyses"][alt][size_col],
                                    color: net["analyses"][alt][color_col],
                                    name: n,
                                    alt: alt});
                    }
                }
            }

            var superscript = "⁰¹²³⁴⁵⁶⁷⁸⁹";
            formatPower = function(d) { return (d + "").split("").map(function(c) { return superscript[c]; }).join(""); };
            function tfmt(d) {
                var e = Math.round(Math.log(d) / Math.LN10);
                if (Math.abs(Math.log(d) / Math.LN10 - e) < 1e-6)
                {
                    if (e >= 0)
                        return 10 + formatPower(e);
                    else
                        return 10 + "⁻" + formatPower(e);
                }
                return null
            }

            // X scale and Axis
            if (scales[x_col] == "log")
                var x = d3.scaleLog();
            else if (scales[x_col] == "symlog")
                var x = d3.scaleSymlog();
            else
                var x = d3.scaleLinear();

            x.domain([d3.min(data, function (d) { return d.x; }),
                      d3.max(data, function (d) { return d.x; })]).nice()
                .range([margin.left, width - margin.right]);

            g_x = svg.append('g')
                .attr("transform", `translate(0,${height - margin.bottom})`)

            if (scales[x_col] == "log")
                x_axis = d3.axisBottom(x).ticks(Math.floor(Math.log10(x.domain()[1] - x.domain()[0])) * 10, tfmt);
            else
                x_axis = d3.axisBottom(x);

            g_x.call(x_axis)

            // Y scale and Axis
            if (scales[y_col] == "log")
                var y = d3.scaleLog();
            else if (scales[y_col] == "symlog")
                var y = d3.scaleSymlog();
            else
                var y = d3.scaleLinear();

            y.domain([d3.min(data, function (d) { return d.y; }),
                      d3.max(data, function (d) { return d.y; })]).nice()
                .range([height - margin.bottom, margin.top]);

            g_y = svg.append('g')
                .attr("transform", `translate(${margin.left},0)`)

            if (scales[y_col] == "log")
                y_axis = d3.axisLeft(y).ticks(Math.floor(Math.log10(y.domain()[1] - y.domain()[0])) * 10, tfmt);
            else
                y_axis = d3.axisLeft(y);

            g_y.call(y_axis)

            // text label for the x axis
            svg.append("text")             
                .attr("transform",
                      "translate(" + (width/2) + " ," + 
                      (height - 20) + ")")
                .style("text-anchor", "middle")
                .text(titles[x_col]);

            // text label for the y axis
            svg.append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 0)
                .attr("x", 0 - (height / 2))
                .attr("dy", "1em")
                .style("text-anchor", "middle")
                .text(titles[y_col]);      

            // size
            if (scales[size_col] == "log")
                var size = d3.scaleLog();
            else if (scales[size_col] == "symlog")
                var size = d3.scaleSymlog();
            else
                var size = d3.scaleLinear();

            size.domain([d3.min(data, function (d) { return d.size; }),
                         d3.max(data, function (d) { return d.size; })])
                .range([4, 150]);

            // color
            if (scales[color_col] == "log")
                var cr = d3.scaleLog();
            else if (scales[color_col] == "symlog")
                var cr = d3.scaleSymlog();
            else
                var cr = d3.scaleLinear();

            cr.domain([d3.min(data, function (d) { return d.color; }),
                          d3.max(data, function (d) { return d.color; })]).
                range([0, 1]);

            var color = d3.scaleSequential().domain([0, 1])
                .interpolator(d3.interpolateInferno);

            svg.append('defs')
                      .append('clipPath')
                .attr('id', 'clip')
                .append('rect')
                .attr('x', margin.left)
                .attr('y', margin.top)
                .attr('width', width - margin.right - margin.left)
                .attr('height', height - margin.bottom - margin.top);

            const main = svg.append('g')
                  .attr('class', 'main')
                  .attr('clip-path', 'url(#clip)');

            points = main.selectAll("whatever")
                .data(data)
                .enter()
                .append("a").attr("xlink:href", function(d){ return "/net/" + d.name + "#" + d.alt; })
                .append("circle")
                .attr("cx", function(d){ return x(d.x) })
                .attr("cy", function(d){ return y(d.y) })
                .attr("r", function(d){ return Math.sqrt(size(d.size)); })
                .attr("fill", function(d){ return color(cr(d.color)); })
                .style("stroke", "#AAAAAAAA")
                .style("stroke-width", 1)
                .style("opacity", .8)
                .on("mouseover",
                    function(d) {
                        tooltip.transition()
                            .duration(200)
                            .style("opacity", .9);
                        if (d.alt == "")
                            var name = d.name
                        else
                            var name = d.name + "/" + d.alt
                        tooltip.html(name)
                            .style("left", (d3.event.pageX + 10) + "px")             
                            .style("top", (d3.event.pageY - 28) + "px");
                    })
                .on("mouseout", function(){
                    tooltip.transition()
                        .duration(2000).style("opacity", 0);});


            var zoom = d3.zoom()
                .scaleExtent([1, 40])
                .translateExtent([[-100, -100], [width + 90, height + 100]])
                .on("zoom", zoomed);

            svg.call(zoom);

            function zoomed() {
                svg.selectAll("circle")
                    .attr("transform", d3.event.transform)
                    .attr("r", function(d){ return Math.sqrt(size(d.size)) / d3.event.transform.k })
                    .style("stroke-width", function(d) {
                        return 1/d3.event.transform.k;
                    })
                g_x.call(x_axis.scale(d3.event.transform.rescaleX(x)));
                g_y.call(y_axis.scale(d3.event.transform.rescaleY(y)));
            }
        };

        var exclude = [];

        function get_exclude() {
            exclude.length = 0
            {% for whale in whales %}
            var checkBox = document.getElementById("{{whale}}");
            if (checkBox.checked == true)
                exclude.push("{{whale}}");
            {% endfor %}
            console.log(exclude);
        }

        get_exclude();

        var xhr = new XMLHttpRequest();
        xhr.open('GET', $SCRIPT_ROOT + '/api/nets?full=True&exclude=' + exclude.join());

        xhr.onreadystatechange = function () {
            var DONE = 4; // readyState 4 means the request is done.
            var OK = 200; // status 200 is a successful return.
            if (xhr.readyState === DONE) {
                if (xhr.status === OK) {
                    nets = JSON.parse(xhr.responseText)
                    draw(nets);

                    d3.select("#x_axis").on("change", function(d) { draw(nets) })
                    d3.select("#y_axis").on("change", function(d) { draw(nets) })
                    d3.select("#c_size").on("change", function(d) { draw(nets) })
                    d3.select("#c_color").on("change", function(d) { draw(nets) })
                    d3.select(window).on("resize", function(d) { draw(nets) })

                } else {
                    console.log('Error: ' + xhr.status); // An error occurred during the request.
                }
            }
        };
        xhr.send(null);

        function exclude_check() {
            get_exclude();
            xhr.open('GET', $SCRIPT_ROOT + '/api/nets?full=True&exclude=' + exclude.join());
            xhr.send(null);
        }
      </script>


    </dl>
  </div>
</div>

{% endblock %}