perf/res/imp/trace-details.html

<!--
  The <trace-details-sk> custom element declaration, which is used on the home
  page on the right hand side to display details about an individual trace.

    Attributes:
      None.

    Events:
      only  - Fired when "Highlighted Only" button is pressed.

              detail.id: key of the trace.

      remove - Fired when the "Remove Highlighted" button is pressed.

               detail.id: key of the trace.

      clear - Fired when the "Clear Highlights" button is pressed.

      highlightGroup - Fired when a group of traces is highlighted by
               clicking on a parameter value.

               detail.key:   key of the parameter.
               detail.value: value of the parameter.

    Methods:
      blank() - Hide the contents of the trace-details-sk element.

      displayRange(begin, end) - Display the commit history from begin
          commit to end commit. The value of end can be undefined.

      setParams(id, params) - Set the trace id and the parameter set of the
          trace to be highlighted.
-->

<link rel="import" href="/res/common/imp/paramset.html">
<link rel="stylesheet" href="/res/common/css/md.css">

<dom-module id="trace-details-sk">
  <style type="text/css" media="screen">
      #outer.blank * {
        display: none;
      }
      #commits {
        font-size: 90%;
        overflow-wrap: break-word;
        overflow-y: auto;
        height: 50vh;
      }
    </style>
  <template>
    <div id=outer class=blank>
      <button class=raised id=remove>Remove Highlighted</button>
      <button class=raised id=only>Highlighted Only</button>
      <button class=raised id=clear>Clear Highlights</button>
      <hr>
      <paramset-sk clickable-values id=params></paramset-sk>
      <hr>
      <div id=commits></div>
    </div>
  </template>
  <script>
    Polymer({
      is: 'trace-details-sk',

      ready: function () {
        // The key of the trace being displayed.
        this._id = '';

        // The currently highlighted group of traces.
        //
        // An object of the form:
        //   {
        //     key: '',
        //     value: ''
        //   }
        this._group = {};

        this.$.params.addEventListener('paramset-key-value-click', this._onParamClick.bind(this));

        // For Remove, Only, and Group trigger a specific event for each.
        var boundOnButtonClick = this._onButtonClick.bind(this);
        this.$.remove.addEventListener('click', boundOnButtonClick);
        this.$.only.addEventListener('click', boundOnButtonClick);
        this.$.clear.addEventListener('click', boundOnButtonClick);
      },

      // Handles the remove, only, and group button clicks.
      _onButtonClick: function (e) {
        var detail = {
          id: this._id,
          group: this._group
        };
        this.dispatchEvent(new CustomEvent(e.target.id, { detail: detail }));
      },

      // Handles clicking on a parameter value.
      _onParamClick: function (e) {
        this._group = e.detail;
        this.dispatchEvent(new CustomEvent('highlightGroup', { detail: e.detail }));
        e.preventDefault();
      },

      // blank hides all the content of trace-details.
      blank: function () {
        this._id = '';
        this._group = {};
        this.$.outer.classList.add('blank');
      },

      // setParams set the current trace key (id) and the params for that
      // trace.
      setParams: function (id, params) {
        this.$.outer.classList.remove('blank');
        this._id = id;
        this._group = {};
        params['id'] = this._id;
        // Convert params into a paramset.
        var paramset = {};
        Object.keys(params).forEach(function(key) {
          paramset[key] = [params[key]];
        });
        this.$.params.setParamSets([paramset]);
      },

      // displayRange takes the range of commit hashes to display.
      displayRange: function (begin, end) {
        // TODO(jcgregorio) Move this over to commits-panel-sk.
        this.$.outer.classList.remove('blank');
        var query = '?begin=' + begin;
        if (end) {
          query = '?begin=' + begin + '&end=' + end;
        }
        // Fill in commit info from the server.
        sk.get('/commits/' + query).then(function(html){
          this.$.commits.innerHTML = html;
        }.bind(this)).catch(sk.errorMessage);
      }
    });
  </script>
</dom-module>