<!DOCTYPE html>
<!--
Copyright 2016 The Chromium Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<link rel="import" href="/tracing/extras/full_config.html">
<link rel="import" href="/tracing/importer/import.html">
<link rel="import" href="/tracing/metrics/all_metrics.html">
<link rel="import" href="/tracing/metrics/metric_map_function.html">
<link rel="import" href="/tracing/model/model.html">
<link rel="import" href="/tracing/mre/mre_result.html">
<link rel="import" href="/tracing/ui/base/dom_helpers.html">
<link rel="import" href="/tracing/ui/base/file.html">
<link rel="import" href="/tracing/ui/base/ui.html">

<dom-module id='tracing-ui-metrics-debugger-app'>
  <style>
    pre {
      overflow: auto;
    }
    #bar {
      display: flex;
      flex-direction: row;
      padding: 1px 6px;
    }
  </style>

  <template>
  <top-left-controls id="top_left_controls"></top-left-controls>
  <input id="load_trace" type="file"/>
  <button id="run_metric">Run metric</button>
  <div id="trace_info"></div>
  <pre id="map_results">
  </pre>
  </template>
</dom-module>

<script>
'use strict';

tr.exportTo('tr.ui', function() {
  Polymer({
    is: 'tracing-ui-metrics-debugger-app',
    created: function() {
      this.metrics_ = [];
      tr.metrics.MetricRegistry.getAllRegisteredTypeInfos().forEach(
          function(m) {
            this.metrics_.push({
              label: m.constructor.name,
              value: m.constructor.name
            });
          }, this);
      this.activeTrace_ = undefined;
      this.settingsKey_ = undefined;
      this.currentMetricName_ = undefined;
      this.settingsKey_ = 'metrics-debugger-app-metric-name';
    },

    ready: function() {
      var metricSelector = tr.ui.b.createSelector(
          this, 'currentMetricName_',
          this.settingsKey_,
          this.metrics_[0].value,
          this.metrics_);
      Polymer.dom(this.$.top_left_controls).appendChild(
          metricSelector);

      this.$.load_trace.addEventListener('change', function(event) {
        var file = event.target.files[0];
        this.onTraceFileSelected_(file);
      }.bind(this));
      this.$.run_metric.addEventListener(
          'click', function(event) {
            event.stopPropagation();
            this.onRunMetricClicked_();
          }.bind(this));
    },

    onRunMetricClicked_: function() {
      if (this.activeTrace_ === undefined) {
        tr.ui.b.Overlay.showError('You must load a trace first!');
        return;
      }
      var result = new tr.mre.MreResult();
      var model = this.activeTrace_.model;
      var options = {metrics: [this.currentMetricName_]};
      try {
        tr.metrics.metricMapFunction(result, model, options);
        this.set(
            '$.map_results.textContent',
            'Metric result:\n' + JSON.stringify(result.asDict(), undefined, 2));
      } catch (err) {
        tr.ui.b.Overlay.showError('Error running metric:\n' + err.stack);
        console.error(err);
      }
    },

    onTraceFileSelected_: function(file) {
      tr.ui.b.readFile(file).then(
          function(data) {
            this.setActiveTrace(file.name, data);
          }.bind(this),
          function(err) {
            tr.ui.b.Overlay.showError('Error while loading file: ' + err);
          });
    },

    setActiveTrace: function(filename, data) {
      var model = new tr.Model();
      var importOptions = new tr.importer.ImportOptions();
      importOptions.pruneEmptyContainers = false;
      importOptions.showImportWarnings = true;
      importOptions.trackDetailedModelStats = true;

      var i = new tr.importer.Import(model, importOptions);
      i.importTracesWithProgressDialog([data]).then(
          function() {
            this.activeTrace_ = {
              filename: filename,
              model: model,
            };
            Polymer.dom(this.$.trace_info).textContent = 'Trace file ' +
                filename + ' is loaded.';
          }.bind(this),
          function(err) {
            tr.ui.b.Overlay.showError('Trace import error: ' + err);
            console.error(err);
          });
    },
  });
  return {};
});
</script>