perf/res/imp/cluster.html

<!--
  The common.js file must be included before this file.

  This in an HTML Import-able file that contains the definitions
  for the following elements:

    <cluster-summary-sk>
    <toggle-display-sk>
    <word-cloud-sk>

  To use this file import it:

    <link href="res/imp/cluster.html" rel="import" />

-->
// The <word-cloud-sk> custom element declaration.
<polymer-element name="word-cloud-sk" attributes="items">
  <template>
    <style type="text/css" media="screen">
      .cloudParam {
        display: flex;
        flex-flow: column nowrap;
        margin:  1em;
        border: solid #eee 1px;
        padding: 0.5em;
      }
      .clWordCloud {
        display: flex;
        flex-flow: row wrap;
      }

      .clWordCloud.display {
        display: flex;
      }
    </style>
    <div class=clWordCloud>
      <template repeat="{{item in items}}">
        <div class=cloudParam>
          <template repeat="{{entry in item}}">
            <div style="font-size: {{entry.Weight}}px;">{{entry.Value}}</div>
          </template>
        </div>
      </template>
    </div>
  </template>
  <script>
    Polymer({
      ready: function() {
        this.items = this.items || [];
      }
    });
  </script>
</polymer-element>

// The <cluster-summary-sk> custom element declaration.
//
// Attributes:
//   summary - Attribute contains a JSON serialized type.ClusterSummary.
//   fade    - Should the update dialog be faded if the status isn't New.
//   issue   - Optional Rietveld issue number.
<polymer-element name="cluster-summary-sk" attributes="summary fade issue">
  <template >
    <style type="text/css" media="screen">
      .clHighlight.clHigh {
        background-color: #44AA99;
        color: white;
        border-radius: 6px;
        padding: 3px 6px;
      }

      .clHighlight.clLow {
        background-color: #AA4499;
        color: white;
        border-radius: 6px;
        padding: 3px 6px;
      }

      #graph {
        width: 300px;
        height: 150px;
      }

      @media (max-width: 600px) {
        #graph {
          display: none;
        }
      }

      p {
        margin: 0.2em;
        padding: 0;
      }

      .clStatus {
        margin: 1em;
        padding: 1em;
        position: relative;
      }

      .fade.Bug,
      .fade.Ignore {
        opacity: 0.3;

      }

      #clStatus.hidden,
      #clPermalink.hidden {
        display: none;
      }

      .clStatus .disabledMessage {
        display: none;
      }

      .clStatus.disabled #form {
        opacity: 0.5;
      }

      .clStatus.disabled .disabledMessage {
        display: block;
        font-weight: bold;
        color: #cc6677;
      }

      .clStatus #message {
        width: 100%;
      }

      .clClusterSize,
      .clLeastSquares,
      .clStepSize,
      .clBugs
      {
        margin-right: 2em;
      }

      word-cloud-sk {
        display: none;
      }

      word-cloud-sk.display {
        display: block;
      }

      paper-button {
        color: #1f78b4;
      }

      paper-radio-button::shadow #onRadio {
        background-color: #1F78B4;
      }

      paper-radio-group /deep/ b.status  {
        padding-left: 0;
      }

    </style>
    <div class="clResult {{ {fade: fade} | tokenList }} {{ summary.Status }}" horizontal layout>
      <div id=graph> </div>
      <div class=clDetails flex>
        <p class="clHighlight cl{{summary.StepFit.Status}}">
          Regression: <span class=clRegression>{{summary.StepFit.Regression | trunc}}</span>
        </p>
        <p><a class="clShortcut" id=shortcut href="#">View on dashboard</a>
        <a id="clPermalink" class="{{ {hidden: summary.ID == -1} | tokenList}}" href="/cl/{{summary.ID}}">Permlink</a>
        </p>
        <p>
          Cluster Size: <span class=clClusterSize>{{summary.Keys.length}}</span>
          Least Squares Error: <span class=clLeastSquares>{{summary.StepFit.LeastSquares | trunc}}</span>
          Step Size: <span class=clStepSize>{{summary.StepFit.StepSize | trunc}}</span>
          <span class=clBugs>Bugs:</span>
          Commit: <a href="https://skia.googlesource.com/skia/+/{{summary.Hash}}">{{summary.Hash | truncHash}}</a>
        </p>
        <template repeat="{{b in summary.Bugs}}">
           <a class=clBug href="https://code.google.com/p/skia/issues/detail?id={{b}}">{{b}}</a>&nbsp;
        </template>

        <paper-shadow z="1">
          <div id=clStatus class="clStatus {{ {hidden: summary.ID == -1} | tokenList }} disabled" vertical layout>
            <p class="disabledMessage">You must be logged in to change the status.</p>
            <paper-radio-group id=status selected="{{cachedStatus}}" horizontal layout>
              <b class=status>Status:</b>
              <paper-radio-button name="New" label="New"></paper-radio-button>
              <paper-radio-button name="Ignore" label="Ignore"></paper-radio-button>
              <paper-radio-button name="Bug" label="Bug"></paper-radio-button>
            </paper-radio-group>
            <paper-input value="{{summary.Message}}" label="Note" id="message"></paper-input>
            <paper-button self-end id=update>Update</paper-button>
          </div>
        </paper-shadow>
        <toggle-display-sk>Word Cloud</toggle-display-sk>
        <word-cloud-sk items="{{summary.ParamSummaries}}"></word-cloud-sk>
      </div>
    </div>
  </template>
  <script>
    (function() {

      /**
        * Handles the click on the Update button.
        */
      function updateClick() {
        var status = this.$.status.selected
        var state = {
          Id: this.summary.ID,
          Status: status,
          Message: this.$.message.value
        };
        var that = this;
        sk.post("/annotate/", JSON.stringify(state)).then(JSON.parse).then(function(json){
          that.summary.Status = status;
          if (json.Bug) {
            // Open the bug reporting page in a new window.
            window.open(json.Bug, '_blank');
          }
        });
      }

      /**
        * Create a shortcut for the cluster and open that shortcut URL in a
        * new window.
        */
      function openShortcut(e) {
        var keys = this.summary.Keys.slice(0, 50);
        var state = {
          scale: 0,
          tiles: [-1],
          hash: this.summary.Hash,
          keys: keys,
          issue: this.issue || '',
        };
        sk.post("/shortcuts/", JSON.stringify(state)).then(JSON.parse).then(function(json){
          window.open('/#' + json.id, '_blank');
        });
        e.preventDefault();
      }

      Polymer({
        fade: false,
        issue: '',

        created: function() {
          this.summary = {};
        },

        ready: function() {
          this.$.update.addEventListener('click', updateClick.bind(this));
          this.$.shortcut.addEventListener('click', openShortcut.bind(this));
          this.cachedStatus = this.summary.Status || 'New';

          var that = this;
          sk.Login.then(function(status) {
            if (status["Email"] != "") {
              that.$.clStatus.classList.remove("disabled");
            }
          });
        },

        summaryChanged: function() {
          // Check for an empty summary object.
          if (this.summary.ParamSummaries == undefined) {
            return;
          }

          this.cachedStatus = this.summary.Status || 'New';

          // Set the data- attributes used for sorting cluster summaries.
          this.dataset.clustersize    = this.summary.Keys.length;
          this.dataset.steplse        = this.summary.StepFit.LeastSquares;
          this.dataset.stepsize       = this.summary.StepFit.StepSize;
          this.dataset.stepregression = this.summary.StepFit.Regression;
          this.dataset.timestamp      = this.summary.Timestamp;

          this.summary.ParamSummaries.sort(function(a, b){
            return b[0].Weight - a[0].Weight;
          });
          // Plot the centroid.
          jQuery.plot(
              this.$.graph,
              [ {
                color: "black",
                data: this.summary.Traces[0],
                lineWidth: 1
              } ],
              {
                yaxis: {
                  min: -4,
                  max: 4
                }
              });
        },

        /**
          * trunc is used as a filter during template expansion.
          */
        trunc: function(value) {
          return (+value).toPrecision(3);
        },

        truncHash: function(value) {
          if (value) {
            return value.substring(0, 7);
          }
        },

      });
    })();
  </script>
</polymer-element>