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

    {{template "header.html" .}}

    <link href="/res/imp/compare.html" rel="import" />
</head>
<body>
  <scaffold-sk responsiveWidth="700px">
    {{template "titlebar.html" .}}
    <div id="container">
      <section id=compare>
        <h2>Compare Results</h2>
        <div id=vInput>
          Vertical to compare:
          <input type="radio" name="vertical" value="arch">arch</input>
          <input type="radio" name="vertical" value="config" checked>config</input>
          <input type="radio" name="vertical" value="os">os</input>
          <input type="radio" name="vertical" value="scale">scale</input>
        </div>
        </p>
        <div id="sk-query"></div>
        <query-sk></query-sk>
        <button id="start" type="submit">Compare</button>

        Use latest results up to: <select id="commitSel"></select>
        <div id="compStatus"></div>
        <div id="skCompare"></div>
      </section>
    </div>
  </scaffold-sk>
  <script type="text/javascript" charset="utf-8">
    (function() {
      /**
        * beginCompare starts an XHR request to populate variables used by
        * sk.Compare.display(), then calls it to display compare results.
        *
        * compare: the sk.Compare object.
        * vertical: the trace param criterion we are comparing in, e.g., "config".
        * selections: the query selection result as url fragment.
        *
        * commit: string of commit hash. If invalid or not found, will use latest
        * available data.
        *
        * See query and compare modules for more details.
        */
      function beginCompare(compare, vertical, selections, commit) {
        // The pair of vertical values to compare against.
        var pair = [
          /*
           "8888", "gpu",
           */
          ];
        // List of table columns.
        var cols = [
          /*
           "x86:ANGLE:HD2000:ShuttleA:Win7",
           "x86:GTX660:ShuttleA:Ubuntu12",
           */
          ];
        // cells contains data for the table cells, keyed by test name as row name.
        // Within each row, keys are the corresponding column indices in the cols
        // array above and values are the bench values corresponding to the pair of
        // verticals above.
        var cells = {
          /*
            "Deque_Push_640_480": {
              "0": [0.9, 1.3],
              "2": [1.1, 0.8],
              ...
            },
            "Another_Test": {
              "1": [0, 0.7],
              ...
            }
           */
          };

        document.body.style.cursor = 'wait';
        var re = new RegExp(vertical + '=', 'g');
        var inparam = selections.match(re);
        if (!inparam || inparam.length != 2) {
          alert("Please select EXACTLY two elements from " + vertical);
          document.body.style.cursor = 'auto';
          return;
        }
        var col_params = ['arch', 'config', 'extra_config', 'gpu', 'model', 'os'];
        sk.get('/single/' + commit + '?' + selections).then(JSON.parse).then(function(json) {
          json.traces.forEach(function(tr) {
            var params = tr['params'];
            if (pair.indexOf(params[vertical]) < 0) {
              pair.push(params[vertical]);
            }
            // Constructs the column string.
            var col = col_params.map(function(key) {
              if (key != vertical) {
                return params[key];
              } else {
                return '';
              }
            }).filter(function(v) {
              return (v && v.length > 0);
            }).join(':');
            if (cols.indexOf(col) < 0) {
              cols.push(col);
            }
            // Records new data.
            var row = params['test'];
            if (!(row in cells)) {
              cells[row] = {};
            }
            var colIdxStr = cols.indexOf(col).toString();
            if (!(colIdxStr in cells[row])) {
              cells[row][colIdxStr] = [0, 0];
            }
            var pairIdx = pair.indexOf(params[vertical]);
            if (cells[row][colIdxStr][pairIdx] !== 0) {
              // row/col combination not unique: something wrong with the data.
              alert('Duplicate data for ' + row + ':' + col);
              document.body.style.cursor = 'auto';
              return;
            }
            // Records the latest value.
            cells[row][colIdxStr][pairIdx] = tr['val'];
          });

          if (cols.length == 0 || pair.length != 2) {
            $$$('#compStatus').innerText = 'No data row or column.';
            sk.clearChildren(compare.resultsContainer_);
          } else {
            $$$('#compStatus').innerText = 'Comparing "' + vertical + '", ratio ' +
                pair[1] + ' / ' + pair[0] + ':';
            compare.display(cols, cells);
          }
          document.body.style.cursor = 'auto';
        }).catch(function(e){
          alert(e);
          document.body.style.cursor = 'auto';
        });
      }

      /**
       * populateAndSetCommits populates latest commit info into the select DOM.
       *
       * selectDom: a given <select> DOM.
       *
       * options are sorted by latest commits first. Option's value is the commit's
       * hash in the tile commit data.
       *
       * TODO: move to a common file?
       */
      function populateAndSetCommits(selectDom, beginHash, endHash) {
        if (selectDom.nodeName != 'SELECT') {
          alert('Cannot populate non-SELECT DOM!');
          return;
        }
        sk.clearChildren(selectDom);
        sk.get('/shortcommits/?begin=' + beginHash + '&end=' + endHash).then(JSON.parse).then(function(json){
          for (var i = 0; i < json.Commits.length; i++) {
            var c = json.Commits[i];
            var opt = document.createElement('OPTION');
            opt.value = c.Hash;
            opt.innerText = [c.Hash.substring(0, 7), c.Author,
                c.Subject.substr(0, 80)].join(':');
            selectDom.insertBefore(opt, selectDom.firstChild);
          }
        });
      }

      function onLoad() {
        var compare = new sk.Compare();
        compare.attach();

        sk.get('/tiles/0/-1/').then(JSON.parse).then(function(json){
          var endCommit = "";
          $$$('query-sk').setParamSet(json.paramset);
          for (i = json.commits.length - 1; i >= 0; i--) {
            if (json.commits[i].hash.length > 0) {
              endCommit = json.commits[i].hash;
              break;
            }
          }
          populateAndSetCommits($$$('#commitSel'), json.commits[0].hash, endCommit);
        });

        $$$('#start').addEventListener('click', function(){
          beginCompare(compare, $$$('input[name="vertical"]:checked').value, $$$('query-sk').currentQuery, $$$('#commitSel').value);
        });

        $$$('#commitSel').addEventListener('change', function(){
          beginCompare(compare, $$$('input[name="vertical"]:checked').value, $$$('query-sk').currentQuery, $$$('#commitSel').value);
        });
      };

      sk.DomReady.then(onLoad);

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