<commit_before><!--
  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 flex 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><commit_msg>Fix update button on cluster summary so it doesn't fall outside the box.<commit_after><!--
  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>
{'fraction_non_alphanumeric': 0.14937223042836043, 'fraction_numerical': 0.0103397341211226, 'mean_word_length': 2.0268231349538977, 'pattern_counts': {'":': 0, '<': 171, '<?xml version=': 0, '>': 171, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1276797', 'n_tokens_mistral': 3493, 'n_tokens_neox': 3295, 'n_words': 724}