{% extends 'base.template.html' %}
{% load staticfiles %}
{% block title %} Visualización {% endblock %}
{% block headScript %}
    <link rel="stylesheet" type="text/css" href="{% static "topic_explorer/css/topic_explorer.css" %}"/>
    <script src="{% static "js/d3.v3.min.js" %}"></script>
    <script src="{% static "topic_explorer/js/util.js" %}"></script>
    <script src="{% static "topic_explorer/js/fulltext.js" %}"></script>
    <script src="{% static "topic_explorer/js/icons.js" %}"></script>
{%endblock%}
{% block superContent %}
<div class="content" id="content">
    <h1 class="text-center">Visualización de Tópicos</h1><hr>
    <div class="container">
      <div class="row">
        <div class="col-md-offset-5">
          <div class="form-inline">
            <div class="btn-group">
              <button type="button" id="submit" class="btn btn-default" >Visualizar</button>
              <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
              <ul class="dropdown-menu">
                {% for k in topics_range %}
                  <li><a href="javascript:visualize({{k}})">{{k}} Topics</a></li>
                {% endfor %}
              </ul>
            </div>
          </div>
        </div>
      </div>
    
      <div class="progress non-null" role="progressbar" id="status">
        <div class="progress-bar progress-bar-striped active" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
          <div class="bar" style="width:25%">Loading documents...</div>
        </div>
      </div>
    
    </div>
    
    <div id="chart"> </div><br><br>
    
    <div id="controls" style="display:none;">
      <strong>Opciones</strong>
      <label class="checkbox"><input class="sort" type="checkbox"> Orden alfabético</label>
      <label class="checkbox"><input class="scale" type="checkbox"> Normalizar barras de tópicos</label>
      <button class="btn btn-default reset" type="button" onclick="resetTopicSort()" disabled>Restaurar orden de tópicos</button><br>
      <button class="btn btn-default topdoc" type='button' style="display:none">Ordenar documentos para tópico [Topic]</button>
    </div>
</div>
<script>
  var scrollLegend;
  $('#helpBtn').click(function() {
      $('.help').toggle();
      if (!$('#helpBtn').hasClass('active')) {
        $('#helpBtn').data('tooltip').options.title = "Hide help";
        $('#helpBtn').addClass('active');
      } else {
        $('#helpBtn').data('tooltip').options.title = "Show help";
        $('#helpBtn').removeClass('active');
      }
      scrollLegend();
    });

    var docid = "{{filename}}" ;
    if (docid!='None') {
      docid = decodeURIComponent(docid);
      $('#hidden_id').val(docid);
      $('.twitter-share-button').attr('data-text', "What's similar to " +docid+"? Discover with the #InPhO Topic Explorer");
    
    }

    var roottopic = '{{topic_no}}' ;

    if (roottopic!='None') {
      $('.title').html('Topic ' + roottopic);
      $('.twitter-share-button').attr('data-text', "Check out topic "+ roottopic+" at the #InPhO Topic Explorer!");
    }
    
    if (docid!='None' || roottopic!='None')
      $('.non-null').show()
    else
      $('.null').show();

    function visualize(k) {
      if (docid!='None') {
        var url = "{0}//{1}:{2}/administrador/visualizacion/doc/{{id}}/{3}/".format(window.location.protocol, window.location.hostname, window.location.port, k);
        url += docid ;
      }
      else
      {
        var url = "{0}//{1}:{2}/administrador/visualizacion/topic/{{id}}/{3}/{{topic_no}}/".format(window.location.protocol, window.location.hostname, window.location.port, k);
      }
      window.location = url;
    }

var icons = ["link","ver"]; 
var maxRows = 25;
var minCols = 2;

var margin = {top: 80, right: 40, bottom: 20, left: 15 + (icons.length * 20)},
    width = 660 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.ordinal()
    .rangeRoundBands([0, height], .1, 0);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("top")
    .ticks(10, "%");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

function computeWidth(numCols) { 
  $('#legend').attr("width", margin.right + (numCols*25) + 20 + margin.right);
  $('#main').attr("width", Math.max($(window).width() - $('#legend').width() - 200 + margin.right, 750));
  $('#controls').css("left", Math.max($(window).width() - $('#legend').width() - 200 + margin.right, 750) + 40);
  width = Math.max($(window).width() - $('#legend').width() - 200 + margin.right, 750) - margin.left - margin.right;
  x = d3.scale.linear()
    .range([0, width]);
  x.domain([0,1]);
  xAxis = d3.svg.axis()
    .scale(x)
    .orient("top")
    .ticks(10, "%");
}

function computeHeight(data, numLegendRows) { 
  height = (data.length * 20);// - margin.top - margin.bottom;
  y = d3.scale.ordinal()
   .rangeRoundBands([0, height], .1, 0);
  y.domain(data.map(function(d) { return d.doc; }));
  yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
}

var dataset;
var original_root;

var svg = d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .attr("id","main")
    .attr("class", "main")
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    .on("mouseleave", function() {
        $(".legend rect").removeClass('hover').tooltip('hide');
      });

var legend = d3.select("#chart").append("svg")
    .attr("width", "350")
    .attr("id", "legend")
    .attr("class", "main")
  .append("g")
    .attr("transform","translate("+margin.right+","+ margin.top + ")");

function calculateTopicMap(data, scale, sortFn){
  data.forEach(function(d) {
    var sizeFactor = (scale) ? d.prob : 1.0
    var x0 = 0;
    if (sortFn) d.topicMap = d3.keys(original_root.topics)
      .sort(sortFn)
      .map(function(name) { return {name: name, x0: x0, x1: x0 += +(d.topics[name]*sizeFactor) }; });
    else // maintain sort order
      d.topicMap = d.topicMap.map(function (topic) { return topic.name; })
        .map(function(name) { return {name: name, x0: x0, x1: x0 += +(d.topics[name]*sizeFactor) }; });
  });
  
}

var url;

if (docid!='None') {
  url = "/administrador/visualizacion/docs_topics/{{id}}/{{k_param}}/" + docid;
}
else {
  url = "/administrador/visualizacion/topics/{{id}}/{{k_param}}/" + roottopic;
}

var n = inpho.util.getValueForURLParam('n');
if (n) url += "?n=" + n;

var tops;
d3.json(url, function(error, data) {
  $('#status .bar').css('width', '50%').text('Loading topics...');
  if (error) {
    $('#status .progress-bar').removeClass('active progress-bar-striped');
    var errormsg;
    
    if (roottopic) errormsg = "Invalid topic: " + roottopic + ".";
    else errormsg = "Invalid document: " + docid + ".";

    $('#status .bar').addClass('progress-bar-danger').text(errormsg);
    return false;
  }
  d3.json("/administrador/visualizacion/topics.json/{{id}}/{{k_param}}", function(error_top, topics) {
    $('#status .bar').css('width', '75%').text('Rendering chart...');
    if (error_top) {
      $('#status .progress-bar').removeClass('active progress-bar-striped');
      $('#status .bar-danger').addClass('progress-bar-danger').text('Could not load topic list.');
      return false;
    }
    $('#submit').text(d3.keys(topics).length + ' Tópicos');
    
  
    var legendCols = Math.max(Math.ceil(d3.keys(topics).length / Math.min(data.length, maxRows)), minCols);
    var legendFactor = Math.ceil(d3.keys(topics).length / legendCols);
    computeHeight(data,legendFactor);

    $("#main").attr("height", height + margin.top + margin.bottom);
    $("#legend").attr("height", (legendFactor * 20) + margin.top + margin.bottom);
    computeWidth(legendCols);
  
  
    x.domain([0, 1.0]);
    tops = topics;
      //.sort();
    dataset = data;
    original_root = data[0];
    if (roottopic) docid = data[0]['doc'];
  
    calculateTopicMap(data, true, function(a,b) {return data[0].topics[b] - data[0].topics[a];});
  
  
  
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(10,-10)")
        .call(xAxis)
      .append("text")
        //.attr("transform", "rotate(-120)")
        .attr("class", "axis_label")
        .attr("dy", "-2em")
        .style("text-anchor", "start")
        .text("Similarity to " + (roottopic ? ("Topic " + roottopic) : '"'+original_root['label']+'"'));
  
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .selectAll("text")
        .attr("class", function(d) { return (d == docid && roottopic != null) ? "primary" : "" })
        .on("click", function(d) { window.location.href = "administrador/visualizacion/doc/{{id}}/" + d;})
  
    svg.select(".y.axis").selectAll("g")
        .insert("rect", ":first-child")
          .attr("x", -margin.left + 5)
          .attr("y", -9)
          .attr("width", margin.left-5)
          .attr("height", 18)
          .style("opacity", "0");
  
    var ticks = svg.select(".y.axis").selectAll("g")
        .on("mouseenter", function(d) { 
          $('text', this).attr('text-decoration', 'underline')
            .attr('font-weight', 'bold');     
          svg.selectAll(".doc")
            .filter(function(doc,i) { return doc.doc == d})
            .attr("class", function(d) { return (d.doc == docid ? "doc primary" : "doc") + " hover"}); 
          })
        .on("mouseleave", function(d) { 
          $('text',this).removeAttr('text-decoration')
            .removeAttr('font-weight'); 
          svg.selectAll(".doc")
            .filter(function(doc,i) { return doc.doc == d})
            .attr("class", function(d) { return d.doc == docid ? "doc primary" : "doc"}); 
          });

    for (var i = 0; i < icons.length; i++) {
      icon_fns[icons[i]](ticks,i);
    }
  
    // draw total bar
    var doc = svg.selectAll("doc")
        .data(data)
      .enter().append("g")
        .attr("class", function(d) { return d.doc == docid ? "doc primary" : "doc"})
        .attr("transform", function(d) { return "translate(10," + y(d.doc) + ")"; })
        .on("mouseover", function(d) {
            var tick = $("text:contains(" + d.doc +")")
              .filter(function() {return $(this).text().trim() == d.doc })
              .attr("font-weight", "bold");
            icons.reduce(function(prev,cur) {
              return prev.next(".{0}Icon".format(cur)).css('opacity', '1.0');
            }, tick);
          })
        .on("mouseout", function(d) {
            var tick = $("text:contains(" + d.doc +")")
              .filter(function() {return $(this).text().trim() == d.doc })
              .attr("font-weight", "normal");
            icons.reduce(function(prev, cur) {
              return prev.next(".{0}Icon".format(cur)).css('opacity', '');
            }, tick);
          });
  
    // Draw topic bars
    doc.selectAll("rect")
        .data(function(d) { return d.topicMap; })
      .enter().append("rect")
        .attr("height", y.rangeBand())
        .attr("x", function(d) { return x(d.x0); })
        .attr("width", function(d) { return x(d.x1) - x(d.x0); })
        .attr("class", function(d) { return "top_" + d.name; })
        .on("mouseover", function(d) {
            // SVG element z-index determined by render order, not style sheet
            // so element must be reappended to the end on hover so border 
            // is not occluded
            var parent = $(this).parent();
            $(this).detach().appendTo(parent);
            $(".docLabel", parent).detach().appendTo(parent);
            $(".docLabel", parent).addClass("hover");
            $('.legend rect').not('.top_' + d.name).tooltip('hide');
            $(".top_" + d.name).addClass('hover');
            $('.legend rect.top_' + d.name).tooltip('show');
          })
        .on("mouseout", function(d) {
            var parent = $(this).parent();
            $(".docLabel", parent).removeClass("hover");
            $(".top_" + d.name).removeClass('hover');
          })
        .on("click", function(d) { topicSort(d.name); })
        .style("fill", function(d) { return topics[d.name]['color']; });
    
    doc.append("text")
          .text(function(d) { return d.label; })
          .attr("class","docLabel")
          .attr("dx", "3")
          .attr("dy", "13");
    var legendElts = legend.selectAll(".legend")
        .data(data[0].topicMap.map(function(t) { return t.name;}))
      .enter().append("g")
        .attr("class", function(d) { return "legend top_" + d; })
        .attr("transform", function(d, i) { return "translate("+(55 * Math.floor(i / legendFactor))+"," + y(i % legendFactor) + ")"; });
  
    legendElts.append("rect")
        .attr("width", 18)
        .attr("height", 18)
        .attr("class", function(d) { return "top_" + d; })
        .style("fill", function(d) { return topics[d]['color']; })
        //.attr("data-toggle", "tooltip")
        .attr("data-placement", "right")
        .attr("title", function(d) { 
          return "<strong>Topic {0}:</strong> <!--H(T<sub>{0}</sub>)={1}-->".format(d, topics[d].H.toFixed(2)) + "<br />"
            + d3.keys(topics[d].words).sort(function(a,b) {
              if (topics[d].words[a] > topics[d].words[b])
                return -1;
              else if (topics[d].words[a] < topics[d].words[b])
                return 1;
              else
                return 0;
            }).join(", ") + ", ..."; })
        .on("click", function(d) { topicSort(d); })
        .on("mouseover", function(d) {
            $(".top_" + d).addClass('hover').tooltip('show');
          })
        .on("mouseout", function(d) {
            $(".top_" + d).removeClass('hover').tooltip('hide');
          });
  
    $(".legend rect").tooltip({container:'body', trigger: 'manual', animation: false, html: true});
  
    legendElts.append("text")
        .attr("dx", -6)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function(d) { return d; });
  
  
    legend.append("text")
        .attr("dx", -6)
        .attr("dy", "-.35em")
        .attr("font-weight", "bold")
        .style("text-anchor", "end")
        .text(d3.keys(topics).length);
    legend.append("text")
        //.attr("transform", "rotate(-120)")
        .attr("class", "axis_label")
        .attr("dy", "-.35em")
        .attr("font-weight", "bold")
        .style("text-anchor", "start")
        .text("Topics");
    legend.append("text")
        //.attr("transform", "rotate(-120)")
        .attr("class", "axis_label")
        .attr("dy", "-.45em")
        .attr("dx", "5em")
        .attr("font-size", "10px")
        .style("text-anchor", "start")
        .text("ordered by P( T | " + docid + " )");

    d3.select(window).on('resize', resize);
  
    function resize() {
      computeWidth(legendCols);
  
      /* Update the axis with the new scale */
      svg.select('.x.axis')
        .call(xAxis);
  
      doc.selectAll('rect')
        .attr("x", function(d) { return x(d.x0); })
        .attr("width", function(d) { return x(d.x1) - x(d.x0); });
    }
     
    d3.select(".sort").on("change", alphabetSort);
    
    $('#status .progress-bar').addClass('progress-bar-success').css("width","100%").attr("aria-valuenow","100").text("Complete!");
    setTimeout(function() { 
      $('#status').hide(500);
      setTimeout(function() {$('#controls').css({'top' : $('#legend').height() + $('#legend').position().top}).show();}, 500);
      } , 500);
  
    $(window).on("scroll", scrollLegend);
    scrollLegend = function() {
      var scrollPos = $(window).scrollTop();
      var chartHeight = $('#chart').position().top;
      var legendHeight = $('#legend').height();
      var heightFac = -60;
      if((scrollPos - chartHeight - margin.top - heightFac) <= 0) {
        $('#legend').css({'position': 'absolute', 'top' : chartHeight});
        $('#controls').css({'position': 'absolute', 'top' : legendHeight + chartHeight});
      } else if ((scrollPos - chartHeight - heightFac) < (margin.top)) {
        $('#legend').css({'position': 'absolute', 'top' : scrollPos + heightFac});
        $('#controls').css({'position': 'absolute', 'top' : legendHeight+ scrollPos + heightFac});
      } else {
        $('#legend').css({'position': 'fixed', 'top' : heightFac});
        $('#controls').css({'position': 'fixed', 'top' : legendHeight + heightFac});
      }}
  
    for (var i = 0; i < icons.length; i++) {
      $(".{0}Icon".format(icons[i])).tooltip({placement: 'top', title: icon_tooltips[icons[i]], container: 'body', html: true, animation: false});
    }
  }); 
});

  function scaleTopics() {
    var numTopics = dataset[0].topics.length;
    var delay = function(d, i) { return i * (500/numTopics); },
        negdelay = function(d, i) { return (numTopics-i) * (500/numTopics); };

    calculateTopicMap(dataset, !this.checked);

    $(".doc").each(function(i,elt) {
        $(elt).children()
          .sort(function(a,b) { return $(a).attr('x') - $(b).attr('x'); })
          .each(function(j,child) {
            $(child).detach().appendTo($(elt));
        })
      });

    svg.selectAll(".doc")
      .selectAll("rect")
      .data(function(d) { return d.topicMap; })
      .style("fill", function(d) { return tops[d.name]['color']; })
      /*.on("mouseover", function(d) {
          // SVG element z-index determined by render order, not style sheet
          // so element must be reappended to the end on hover so border 
          // is not occluded
          var parent = $(this).parent();
          $(this).detach().appendTo(parent);
          $(".docLabel", parent).detach().appendTo(parent);
          $('.legend rect').not('.top_' + d.name).tooltip('hide');
          $(".top_" + d.name).addClass('hover');
          $('.legend rect.top_' + d.name).tooltip('show');
        })
      .on("mouseout", function(d) {
          $(".top_" + d.name).removeClass('hover');
        })*/
      .transition().duration(500).ease("linear").delay(this.checked ? delay : negdelay)
      .attr("x", function(d) { return x(d.x0); })
      .attr("width", function(d) { return x(d.x1) - x(d.x0); })
      .attr("class", function(d) { return "top_" + d.name; });

    svg.selectAll(".x.axis text.axis_label").text(this.checked ? 
      "Proportion of document assigned to topic" : 
      ("Similarity to " + (roottopic ? ("Topic " + roottopic) : '"'+original_root.label+'"')));
  }

  d3.select(".scale").on("change", scaleTopics);
  function sortDataset(sortFn) {
    dataset = dataset.sort(sortFn);

    var y0 = y.domain(dataset
        .map(function(d) { return d.doc; }))
        .copy();

    var transition = svg.transition().duration(500),
        delay = function(d, i) { return i * 25; };

    transition.selectAll(".doc")
        .delay(delay)
        .attr("transform", function(d) { return "translate(10," + y(d.doc) + ")"; });
        //.attr("y", function(d) { return y(d.doc); });

    transition.select(".y.axis")
        .call(yAxis)
      .selectAll("g")
        .selectAll("text")
        .delay(delay);
  }

  function alphabetSort() {
    // Copy-on-write since tweens are evaluated after a delay.
    if (this.checked)
      sortDataset(function(a, b) { return d3.ascending(a.doc, b.doc); });
    else
      sortDataset(function(a, b) { return b.prob - a.prob; });
  }

  function resetTopicSort() {
    $('.reset').attr('disabled',true);
    $('.topicsort').attr('disabled',true);
    $('.selected').removeClass('selected');
    $('.topdoc').hide();
    $('.topdoc').text('Top Documents for [Topic]');
    if (!($('.sort')[0].checked))
      sortDataset(function(a,b) { return b.prob - a.prob; });

    redrawBars(function(a,b) { return original_root.topics[b] - original_root.topics[a]; });
  }

  function topicSort(topic) {
    // Copy-on-write since tweens are evaluated after a delay.
    $('.sort').removeAttr('checked');
    if (topic) {
      sortDataset(function(a, b) { return b.topics[topic] - a.topics[topic]; });
      $('.selected').removeClass('selected');
      $(".top_" + topic).addClass('selected');
      $('.reset').removeAttr('disabled');
      $('.topdoc').text('Top Documents for Topic ' + topic);
      $('.topdoc').show();
      $('.topdoc').click(function URL() {location.href = location.origin + '/administrador/visualizacion/topic/{{id}}/{{k_param}}/' + topic;});
      $('.topdoc').mouseenter(function() {
          $('.legend rect').not('.top_' + topic).tooltip('hide');
          $(".legend rect.top_" + topic).tooltip('show'); });
      $('.topdoc').mouseleave(function() { $(".top_" + topic).tooltip('hide'); });

    } else {
      $('.selected').removeClass('selected');
      sortDataset(function(a, b) { return b.prob - a.prob; });
    }


    var sortFn = function(a,b) {
      if (a == topic) return -1;
      else if (b == topic) return 1;
      else return dataset[0].topics[b] - dataset[0].topics[a];
      //else return original_root.topics[b] - original_root.topics[a];
    } 
    redrawBars(sortFn);
  }

  function redrawBars(sortFn) { 
    $("#legend .hover").removeClass("hover");
    var numTopics = dataset[0].topics.length;
    var delay = function(d, i) { return i * (1000/numTopics); },
        negdelay = function(d, i) { return (numTopics-i) * (1000/numTopics); };
    calculateTopicMap(dataset, !($('.scale')[0].checked), sortFn);
    
    svg.selectAll(".doc")
      .selectAll("rect")
      .data(function(d) { return d.topicMap; })
      .style("fill", function(d) { return tops[d.name]['color']; })
      /*
      .on("mouseover", function(d) {
          // SVG element z-index determined by render order, not style sheet
          // so element must be reappended to the end on hover so border 
          // is not occluded
          var parent = $(this).parent();
          $(this).detach().appendTo(parent);
          $(".docLabel", parent).detach().appendTo(parent);
          $('.legend rect').not('.top_' + d.name).tooltip('hide');
          $(".top_" + d.name).addClass('hover');
          $('.legend rect.top_' + d.name).tooltip('show');
        })
      .on("mouseout", function(d) {
          $(".top_" + d.name).removeClass('hover');
        })*/
      .transition().duration(1000).ease("linear").delay(this.checked ? delay : negdelay)
      .attr("x", function(d) { return x(d.x0); })
      .attr("width", function(d) { return x(d.x1) - x(d.x0); })
      .attr("class", function(d) { return "top_" + d.name; });

  }
  
   
</script>

{% endblock %}