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.

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

            detail.id: key of the trace.

    remove - Fired when the "Remove" button is pressed.
           - Details:

             detail.id: key of the trace.

    group  - Fired when the "Group" button is pressed.
             Details:

             detail.id: key of the trace.

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

             Details:
             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.
-->
<polymer-element name="trace-details-sk">
  <template class="blank">
    <style type="text/css" media="screen">
      #outer.blank * {
        display: none;
      }
      table {
        border-collapse: collapse;
      }
      table > * {
        border: none;
      }
      table .key {
        text-align: right;
      }
      td {
        padding: 0.25em;
      }
      #commits {
        font-size: 80%;
        overflow-wrap: break-word;
        overflow-y: auto;
        height: 50vh;
      }
    </style>
    <div id=outer class="blank">
      <paper-button id=remove>Remove</paper-button>
      <paper-button id=only href="">Only</paper-button>
      <paper-button disabled id=group class="hidden" href="">Group</paper-button>
      <hr>
      <table id=params>
        <tbody >
          <template repeat="{{p in orderedParams}}">
            <tr>
              <td class=key>{{p.key}}</td>
              <td><a href="" data-key="{{p.key}}">{{p.value}}</a></td>
            </tr>
          </template>
        </tbody>
      </table>
      <hr>
      <div id="commits"></div>
    </div>
  </template>
  <script>
    'use strict';
    Polymer({
      create: function() {
        // The parameters for the currently selected trace.
        this.params = {};

        // An array of objects of the form:
        // {
        //   key: 'trace:id:goes:here',
        //   value: '1.234'
        // }
        this.orderedParams = [];
      },

      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('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.$.group.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.disabled = false;
        var detail = {
          key: e.target.dataset.key,
          value: e.target.innerHTML
        };
        this.group = detail;
        this.dispatchEvent(new CustomEvent('highlightGroup', {detail: detail}));
        e.preventDefault();
      },

      // buildOrderedParams should be called when params changes. When that happens,
      // we rebuild orderedParams.
      buildOrderedParams: function() {
        this.group = {};
        this.params['id'] = this.id;
        var keys = Object.keys(this.params);
        // Break the keys into lower and upper case and sort independently.
        var lower = keys.filter(function(s) {
          return s.toLowerCase()[0] === s[0];
        });
        var upper = keys.filter(function(s) {
          return s.toLowerCase()[0] !== s[0];
        });
        lower.sort();
        upper.sort();
        keys = [].concat(lower, upper);
        var ordered = [];
        var that = this;
        keys.forEach(function(k) {
          ordered.push({'key': k, 'value': that.params[k]});
        });
        this.orderedParams = ordered;
      },

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

      // setParams set the current trace key (id) and the params for that
      // trace.
      setParams: function(id, params) {
        this.$.group.disabled = true;
        this.$.outer.classList.remove('blank');
        this.id = id;
        this.params = params;
        this.buildOrderedParams();
      },

      // displayRange takes the range of commit hashes to display.
      displayRange: function(begin, end) {
        this.$.outer.classList.remove('blank');
        var that = this;

        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){
          that.$.commits.innerHTML = html;
        });
      }
    });
  </script>
</polymer-element>