<!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/base/raf.html">
<link rel="import" href="/tracing/metrics/metric_map_function.html">
<link rel="import" href="/tracing/metrics/metric_registry.html">
<link rel="import" href="/tracing/model/event_set.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/side_panel/side_panel.html">
<link rel="import" href="/tracing/ui/side_panel/side_panel_registry.html">
<link rel="import" href="/tracing/value/ui/value_set_view.html">
<link rel="import" href="/tracing/value/value_set.html">

<dom-module id="tr-ui-sp-metrics-side-panel">
  <template>
    <style>
    :host {
      display: flex;
      flex-direction: column;
    }
    div#error {
      color: red;
    }
    </style>

    <top-left-controls id="top_left_controls"></top-left-controls>
    <tr-v-ui-value-set-view id="results"></tr-v-ui-value-set-view>
    <div id="error"></div>
  </template>
</dom-module>

<script>
'use strict';
tr.exportTo('tr.ui', function() {
  Polymer({
    is: 'tr-ui-sp-metrics-side-panel',
    behaviors: [tr.ui.behaviors.SidePanel],

    ready: function() {
      this.model_ = undefined;

      this.rangeOfInterest_ = undefined;
      this.metricLatenciesMs_ = [];

      this.metrics_ = [];
      tr.metrics.MetricRegistry.getAllRegisteredTypeInfos().forEach(
          function(m) {
            if (m.constructor.name === 'sampleMetric')
              return;
            this.metrics_.push({
              label: m.constructor.name,
              value: m.constructor.name
            });
          }, this);

      this.settingsKey_ = 'metrics-side-panel-metric-name';
      this.currentMetricName_ = 'systemHealthMetrics';
      var metricSelector = tr.ui.b.createSelector(
          this, 'currentMetricName_',
          this.settingsKey_,
          this.currentMetricName_,
          this.metrics_);
      Polymer.dom(this.$.top_left_controls).appendChild(metricSelector);
      metricSelector.addEventListener('change',
          this.onMetricChange_.bind(this));
      this.currentMetricTypeInfo_ =
        tr.metrics.MetricRegistry.findTypeInfoWithName(
            this.currentMetricName_);

      this.recomputeButton_ = tr.ui.b.createButton(
          'Recompute', this.onRecompute_, this);
      Polymer.dom(this.$.top_left_controls).appendChild(this.recomputeButton_);
    },

    /**
     * Return an estimate of how many milliseconds it would take to re-run the
     * metric. If the metric has not been run, return undefined.
     *
     * @return {undefined|number}
     */
    get metricLatencyMs() {
      return tr.b.Statistics.mean(this.metricLatenciesMs_);
    },

    onMetricChange_: function() {
      this.currentMetricTypeInfo_ =
        tr.metrics.MetricRegistry.findTypeInfoWithName(
            this.currentMetricName_);
      this.metricLatenciesMs_ = [];
      this.updateContents_();
    },

    onRecompute_: function() {
      this.updateContents_();
    },

    get textLabel() {
      return 'Metrics';
    },

    supportsModel: function(m) {
      if (!m) {
        return {
          supported: false,
          reason: 'No model available'
        };
      }

      return {
        supported: true
      };
    },

    get model() {
      return this.model_;
    },

    set model(model) {
      this.model_ = model;
      this.updateContents_();
    },

    get selection() {
      // Not applicable to metrics.
    },

    set selection(_) {
      // Not applicable to metrics.
    },

    /**
     * @return {undefined|!tr.b.Range}
     */
    get rangeOfInterest() {
      return this.rangeOfInterest_;
    },

    /**
     * This may be called rapidly as the mouse is moved.
     * If the metric supportsRangeOfInterest and takes less than 100ms, then it
     * will be re-run immediately; otherwise, the Recompute button will be
     * enabled.
     *
     * @param {!tr.b.Range} range
     */
    set rangeOfInterest(range) {
      this.rangeOfInterest_ = range;

      if (this.currentMetricTypeInfo_ &&
          this.currentMetricTypeInfo_.metadata.supportsRangeOfInterest) {
        if ((this.metricLatencyMs === undefined) ||
            (this.metricLatencyMs < 100)) {
          this.updateContents_();
        } else {
          this.recomputeButton_.style.background = 'red';
        }
      }
    },

    updateContents_: function() {
      this.style.width = '';
      Polymer.dom(this.$.error).textContent = '';
      this.$.results.style.display = 'none';

      if (!this.model_) {
        Polymer.dom(this.$.error).textContent = 'Missing model';
        return;
      }

      var options = {metrics: [this.currentMetricName_]};

      if (this.currentMetricTypeInfo_ &&
          this.currentMetricTypeInfo_.metadata.supportsRangeOfInterest &&
          this.rangeOfInterest &&
          !this.rangeOfInterest.isEmpty)
        options.rangeOfInterest = this.rangeOfInterest;

      var startDate = new Date();
      try {
        var values = tr.metrics.runMetrics(this.model_, options);
      } catch (err) {
        console.warn(
            this.currentMetricName_ +
            ' could not be computed for the current model:\n' +
            err.stack);
        Polymer.dom(this.$.error).textContent = err.message;
        return;
      }

      this.metricLatenciesMs_.push(new Date() - startDate);
      while (this.metricLatenciesMs_.length > 20)
        this.metricLatenciesMs_.shift();

      this.recomputeButton_.style.background = '';

      this.$.results.style.display = '';
      this.$.results.values = values;

      tr.b.requestAnimationFrame(function() {
        var width = this.$.results.getBoundingClientRect().width + 15;
        this.style.width = width + 'px';
      }, this);
    }
  });

  tr.ui.side_panel.SidePanelRegistry.register(function() {
    return document.createElement('tr-ui-sp-metrics-side-panel');
  });

  return {};
});
</script>