<!DOCTYPE html>
<html>
<head>
    <title>Skia Performance Monitoring | Clusters</title>

    {{template "header.html" .}}

    <link href="/res/imp/cluster.html" rel="import" />
    <link href="/res/imp/sort.html" rel="import" />
    <link href="/res/imp/commit-selector.html" rel="import" />

    <style type="text/css" media="screen">
      #clSorting {
        padding: 1em 0;
      }
      #start {
        margin: 0.3em;
      }
      .issue {
        margin: 1em 0;
      }
      sort-sk {
        display: block;
      }
      .floatingLabel {
        display: block;
        margin-top: 1em;
        margin-bottom: 0.5em;
        font-size: 0.75em;
        color: #757575;
      }
    </style>
</head>
<body>
  <scaffold-sk responsiveWidth="700px">
    {{template "titlebar.html" .}}
    <div id="container">
      <section id=clustering>
        <h2>Trace Clustering</h2>
        <p>
          <paper-input value="0.001" id="_stddev" label="Standard Deviation Threshhold" floatingLabel></paper-input>
        </p>
        <p>
          <paper-input value="50" id="_k" label="Number Of Clusters" floatingLabel></paper-input>
        </p>
        <p>
          <span class="floatingLabel">Commit to cluster around (currently non-functional)</span>
          <commit-selector-sk></commit-selector-sk>
        </p>
        <p class=issue>
          <label for="_issue">Issue:</label>
          <select name="_issue" id="_issue" size="1">
             <option selected> </option>
          </select>
        </p>
        <query-sk></query-sk>
        <br/>
        <paper-button raised id="start">Calculate</paper-button>


        <sort-sk target=clResults>
          <paper-button data-key="clustersize">Cluster Size </paper-button>
          <paper-button data-key="stepregression" data-default=up>Regression </paper-button>
          <paper-button data-key="stepsize">Step Size </paper-button>
          <paper-button data-key="steplse">Least Squares</paper-button>
          <paper-button data-key="timestamp">Step Time</paper-button>
        </sort-sk>
        <div id="clResults">
        </div>
      </section>
    </div>
  </scaffold-sk>
  <script type="text/javascript" charset="utf-8">
    (function() {

      /**
        * beginClustering by clearing out the old results and starting the XHR
        * request to get new clustering results.
        */
      function beginClustering(k, stddev, issue, selections) {
        sk.clearChildren($$$('#clResults'));

        document.body.style.cursor = 'wait';
        var url = '/clustering/?_k=' + k + '&_stddev=' + stddev + '&_issue=' + issue + '&' + selections;
        sk.get(url).then(JSON.parse).then(function(json) {
          var container = $$$('#clResults');
          json.Clusters.forEach(function(c){
            var sum = document.createElement('cluster-summary-sk');
            container.appendChild(sum);
            sum.summary = c;
          });
          document.body.style.cursor = 'auto';
        }).catch(function(e){
          alert(e);
          document.body.style.cursor = 'auto';
        });
      };

      function onLoad() {
        sk.get('/trybots/').then(JSON.parse).then(function(json){
          var select = $$$('#_issue');
          json.forEach(function(issue) {
            var op = document.createElement('OPTION');
            op.value = issue;
            op.innerText = issue;
            select.appendChild(op);
          });
        });

        $$$('#start').addEventListener('click', function(){
          beginClustering(
              $$$('#_k').value, $$$('#_stddev').value, $$$('#_issue').value, $$$('query-sk').currentQuery);
        });

        $$('input[name="sort"]').forEach(function(ele) {
          ele.addEventListener('click', sort);
        });

        sk.get('/tiles/0/-1/').then(JSON.parse).then(function(json){
          $$$('query-sk').setParamSet(json.paramset);
        });

      };

      sk.DomReady.then(onLoad);

    })();
  </script>
</body>
</html>