<commit_before>{% extends "base.html" %}
{% block title %}: Changes{% endblock %}
{% block script %}
<script type="text/javascript" src="../media/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
  var projectmatrix = eval({{ projectmatrix|safe }});
  var revisionboxes = new Object();
  {% for project, revlist in revisionboxes.items %}
  revisionboxes['{{ project }}'] = '{% for rev in revlist %}<option value="{{ rev.commitid }}">{{ rev }}</option>{% endfor %}';{% endfor %}
  var currentproject = "{{ defaultexecutable.project }}";
  
  function getConfiguration() {
    var config = new Object();
    config["tre"] = $("#trend option:selected").val();
    config["base"] = $("#baseline option:selected").val();
    config["rev"] = $("#revision option:selected").val();
    config["exe"] = $("input[name='executable']:checked").val();
    config["env"] = $("input[name='environment']:checked").val();
    return config;
  }
  
  function permalinkToTimeline(benchmark, environment) {
    window.location="../timeline/?ben=" + benchmark + "&env=" + environment;
  }

  function colorTable(length, index) {
    var changethres = {{ defaultchangethres }};
    var trendthres = {{ defaulttrendthres }};
    $("#results > :not(thead) > tr").each(function() {
      //Color change column
      var change = $(this).children("td:eq("+index+")").text().slice(0, -1);
      if (length == 6) {
        var lessisbetter = $(this).children("td:eq(2)").find("label").text();
        if (lessisbetter == 0) { change = -change; }
      }
      $(this).children("td:eq("+index+")").addClass(getColorcode(-change, changethres, -changethres));
      //Color trend column
      var trend = $(this).children("td:eq("+(index+1)+")").text().slice(0, -1);
      $(this).children("td:eq("+(index+1)+")").addClass(getColorcode(-trend, trendthres, -trendthres));
    });
  }
  
  function updateTable() {
    var nexttolast = $("#results thead tr th:last").index() - 1;
    colorTable(nexttolast, nexttolast-2);
    //process table rows
    var tdwidth = parseInt($("#results thead tr th:last").css("width"));
    $("#results > tbody > tr").each(function() {
      //Size plot bars
      if ($(this).children("td:eq("+nexttolast+")").length) {
        var bar = transToLogBars(58, tdwidth,  parseFloat($(this).children("td:eq("+nexttolast+")").text()));
        $(this).children("td:last").find("span").css("width", bar["width"]).css("margin-left", bar["margin"]).fadeTo("fast", 0.8);
        
      }
      //Link rows to timelines
      $(this).click(function () {
        var environment = $("input[name='environment']:checked").val();
        permalinkToTimeline($(this).children("td:eq(0)").text(), environment);
      });
    });
    //Configure table as tablesorter
    if ($("#results > tbody > tr").first().length) {
      $.tablesorter.defaults.sortList = [[nexttolast,1]];//sort by default by the compasison column
      var last = nexttolast + 1;
      $.tablesorter.defaults.headers = { last: { sorter: false } };//disable sorting for bar column (last one)
    }
    $("#results").tablesorter({widgets: ['zebra']});
    $("#results tbody td").hover(function() {
      $(this).parents('tr').addClass('highlight');
    }, function() {
      $(this).parents('tr').removeClass('highlight');
    });
  }
  
  function refreshContent() {
    $.ajaxSetup ({
      cache: false
    });
    
    var h = parseInt($("#content").css("height"));//get height for loading text
    $("#results").fadeOut("fast", function() {
      $("#content").html(getLoadText("Loading...", h, true));
      $("#content").load("table/", $.param(getConfiguration()), function(responseText) { updateTable(); });
    });
  }
  
  function changerevisions() {
    // This function repopulates the revision selectbox everytime a new
    // executable is selected that corresponds to a different project.
    var executable = $("input[name='executable']:checked").val();
    if (projectmatrix[executable] != currentproject) {
      $("#revision").html(revisionboxes[projectmatrix[executable]]);
      currentproject = projectmatrix[executable];
      
      //Give visual cue that the select box has changed
      var bgc = $("#revision").parent().parent().css("backgroundColor");
      $("#revision").parent()
        .animate({ backgroundColor: "#9DADC6" }, 200, function() {
          // Animation complete.
          $(this).animate({ backgroundColor: bgc }, 1500);
        });
    }
    refreshContent();
  }
  
  $(function() {
    // Configure defaults
    $("#trend").val("{{ defaulttrend }}");
    $("#trend").change(refreshContent);
    $("#baseline").val("{{ defaultbaseline }}");
    $("#baseline").change(refreshContent);
    //repopulate revision select box if the project has changed
    $("#revision").html(revisionboxes['{{ defaultexecutable.project.name }}']);
    $("#revision").val("{{ selectedrevision.commitid }}");
    $("#revision").change(refreshContent);
    $("input:radio[name=executable]").filter('[value="{{ defaultexecutable.id }}"]').attr('checked', true);
    $("input[name='executable']").change(changerevisions);
    $("input:radio[name='environment']").filter('[value="{{ defaultenvironment.name }}"]').attr('checked', true);
    $("input[name='environment']").change(refreshContent);
    refreshContent();
  });
</script>
{% endblock %}

{% block navigation %}
    <ul class="inline">
      <li class="current"><a href="../changes/">Changes</a></li>
      <li><a href="../timeline/">Timeline</a></li>
      <li><a href="../comparison/">Comparison</a></li>
    </ul>
{% endblock %}

{% block body %}
<div id="sidebar">
<div id="executable" class="sidebox">
  <div class="boxhead"><h2>Executable</h2></div>
  <div class="boxbody">
    <ul>
    {% for exec in executables|dictsort:"id" %}
      <li>
        <input id="executable{{ exec.id }}" type="radio" name="executable" value="{{ exec.id }}" />
        <label for="executable{{ exec.id }}">{{ exec }}</label>
      </li>
    {% endfor %}
    </ul>
  </div>
</div>
<div id="options" class="sidebox">
  <div class="boxhead"><h2>Options</h2></div>
  <div class="boxbody">
  <ul>
    <li title="Trend since a given number of tested revisions ago. Average of 3 revisions">Trend:<br/>
      <select id="trend">
      {% for trend in trends %}<option value="{{ trend }}">{{ trend }}</option>{% endfor %}
      </select>
    </li>
    <li title="Select executable for comparison">Compare to:<br/>
      <select id="baseline">
      {% for base in baseline %}<option value="{{ base.executable.id }}+{{ base.revision.id }}">{{ base.name }}</option>{% endfor %}
      </select>
    </li>
  </ul>
  </div>
</div>
<div class="sidebox">
  <div class="boxhead"><h2>Environment</h2></div>
  <div class="boxbody">
    <ul>
    {% for env in environments %}
      <li title="{{ env.os }}, {{ env.cpu }}">
        <input id="env{{ env.name }}" type="radio" name="environment" value="{{ env.name }}" />
        <label for="env{{ env.name }}">{{ env }}</label>
      </li>
    {% endfor %}
    </ul>
  </div>
</div><commit_msg>Move down changes option sidebox<commit_after>{% extends "base.html" %}
{% block title %}: Changes{% endblock %}
{% block script %}
<script type="text/javascript" src="../media/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript">
  var projectmatrix = eval({{ projectmatrix|safe }});
  var revisionboxes = new Object();
  {% for project, revlist in revisionboxes.items %}
  revisionboxes['{{ project }}'] = '{% for rev in revlist %}<option value="{{ rev.commitid }}">{{ rev }}</option>{% endfor %}';{% endfor %}
  var currentproject = "{{ defaultexecutable.project }}";
  
  function getConfiguration() {
    var config = new Object();
    config["tre"] = $("#trend option:selected").val();
    config["base"] = $("#baseline option:selected").val();
    config["rev"] = $("#revision option:selected").val();
    config["exe"] = $("input[name='executable']:checked").val();
    config["env"] = $("input[name='environment']:checked").val();
    return config;
  }
  
  function permalinkToTimeline(benchmark, environment) {
    window.location="../timeline/?ben=" + benchmark + "&env=" + environment;
  }

  function colorTable(length, index) {
    var changethres = {{ defaultchangethres }};
    var trendthres = {{ defaulttrendthres }};
    $("#results > :not(thead) > tr").each(function() {
      //Color change column
      var change = $(this).children("td:eq("+index+")").text().slice(0, -1);
      if (length == 6) {
        var lessisbetter = $(this).children("td:eq(2)").find("label").text();
        if (lessisbetter == 0) { change = -change; }
      }
      $(this).children("td:eq("+index+")").addClass(getColorcode(-change, changethres, -changethres));
      //Color trend column
      var trend = $(this).children("td:eq("+(index+1)+")").text().slice(0, -1);
      $(this).children("td:eq("+(index+1)+")").addClass(getColorcode(-trend, trendthres, -trendthres));
    });
  }
  
  function updateTable() {
    var nexttolast = $("#results thead tr th:last").index() - 1;
    colorTable(nexttolast, nexttolast-2);
    //process table rows
    var tdwidth = parseInt($("#results thead tr th:last").css("width"));
    $("#results > tbody > tr").each(function() {
      //Size plot bars
      if ($(this).children("td:eq("+nexttolast+")").length) {
        var bar = transToLogBars(58, tdwidth,  parseFloat($(this).children("td:eq("+nexttolast+")").text()));
        $(this).children("td:last").find("span").css("width", bar["width"]).css("margin-left", bar["margin"]).fadeTo("fast", 0.8);
        
      }
      //Link rows to timelines
      $(this).click(function () {
        var environment = $("input[name='environment']:checked").val();
        permalinkToTimeline($(this).children("td:eq(0)").text(), environment);
      });
    });
    //Configure table as tablesorter
    if ($("#results > tbody > tr").first().length) {
      $.tablesorter.defaults.sortList = [[nexttolast,1]];//sort by default by the compasison column
      var last = nexttolast + 1;
      $.tablesorter.defaults.headers = { last: { sorter: false } };//disable sorting for bar column (last one)
    }
    $("#results").tablesorter({widgets: ['zebra']});
    $("#results tbody td").hover(function() {
      $(this).parents('tr').addClass('highlight');
    }, function() {
      $(this).parents('tr').removeClass('highlight');
    });
  }
  
  function refreshContent() {
    $.ajaxSetup ({
      cache: false
    });
    
    var h = parseInt($("#content").css("height"));//get height for loading text
    $("#results").fadeOut("fast", function() {
      $("#content").html(getLoadText("Loading...", h, true));
      $("#content").load("table/", $.param(getConfiguration()), function(responseText) { updateTable(); });
    });
  }
  
  function changerevisions() {
    // This function repopulates the revision selectbox everytime a new
    // executable is selected that corresponds to a different project.
    var executable = $("input[name='executable']:checked").val();
    if (projectmatrix[executable] != currentproject) {
      $("#revision").html(revisionboxes[projectmatrix[executable]]);
      currentproject = projectmatrix[executable];
      
      //Give visual cue that the select box has changed
      var bgc = $("#revision").parent().parent().css("backgroundColor");
      $("#revision").parent()
        .animate({ backgroundColor: "#9DADC6" }, 200, function() {
          // Animation complete.
          $(this).animate({ backgroundColor: bgc }, 1500);
        });
    }
    refreshContent();
  }
  
  $(function() {
    // Configure defaults
    $("#trend").val("{{ defaulttrend }}");
    $("#trend").change(refreshContent);
    $("#baseline").val("{{ defaultbaseline }}");
    $("#baseline").change(refreshContent);
    //repopulate revision select box if the project has changed
    $("#revision").html(revisionboxes['{{ defaultexecutable.project.name }}']);
    $("#revision").val("{{ selectedrevision.commitid }}");
    $("#revision").change(refreshContent);
    $("input:radio[name=executable]").filter('[value="{{ defaultexecutable.id }}"]').attr('checked', true);
    $("input[name='executable']").change(changerevisions);
    $("input:radio[name='environment']").filter('[value="{{ defaultenvironment.name }}"]').attr('checked', true);
    $("input[name='environment']").change(refreshContent);
    refreshContent();
  });
</script>
{% endblock %}

{% block navigation %}
    <ul class="inline">
      <li class="current"><a href="../changes/">Changes</a></li>
      <li><a href="../timeline/">Timeline</a></li>
      <li><a href="../comparison/">Comparison</a></li>
    </ul>
{% endblock %}

{% block body %}
<div id="sidebar">
<div id="executable" class="sidebox">
  <div class="boxhead"><h2>Executable</h2></div>
  <div class="boxbody">
    <ul>
    {% for exec in executables|dictsort:"id" %}
      <li>
        <input id="executable{{ exec.id }}" type="radio" name="executable" value="{{ exec.id }}" />
        <label for="executable{{ exec.id }}">{{ exec }}</label>
      </li>
    {% endfor %}
    </ul>
  </div>
</div>
<div class="sidebox">
  <div class="boxhead"><h2>Environment</h2></div>
  <div class="boxbody">
    <ul>
    {% for env in environments %}
      <li title="{{ env.os }}, {{ env.cpu }}">
        <input id="env{{ env.name }}" type="radio" name="environment" value="{{ env.name }}" />
        <label for="env{{ env.name }}">{{ env }}</label>
      </li>
    {% endfor %}
    </ul>
  </div>
</div>
<div id="options" class="sidebox">
  <div class="boxhead"><h2>Options</h2></div>
  <div class="boxbody">
  <ul>
    <li title="Trend since a given number of tested revisions ago. Average of 3 revisions">Trend:<br/>
      <select id="trend">
      {% for trend in trends %}<option value="{{ trend }}">{{ trend }}</option>{% endfor %}
      </select>
    </li>
    <li title="Select executable for comparison">Compare to:<br/>
      <select id="baseline">
      {% for base in baseline %}<option value="{{ base.executable.id }}+{{ base.revision.id }}">{{ base.name }}</option>{% endfor %}
      </select>
    </li>
  </ul>
  </div>
</div>
{'fraction_non_alphanumeric': 0.22061583373879196, 'fraction_numerical': 0.004865503579620491, 'mean_word_length': 3.6517943743937926, 'pattern_counts': {'":': 0, '<': 157, '<?xml version=': 0, '>': 169, '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': '3823337', 'n_tokens_mistral': 4555, 'n_tokens_neox': 4406, 'n_words': 909}