<!-- The <center-sk> custom element declaration.

  Attributes:
    data - A serialized kmlabel.Center.

  Events:
    view-traces - Fired when the view traces button is pressed.
      The event details contains the ids of the traces to display:

      details: {
        ids: ["traceid1", "traceid2", ..],
      }

  Methods:
    None.
-->

<link rel="import" href="/res/common/imp/word-cloud.html">
<dom-module id="center-sk">
  <style>
    :host {
      display: block;
      margin: 0.8em;
      margin-left: 2em;
      border: solid #ddd 1px;
      padding: 1em;
      background: #eee;
    }
  </style>
  <template>
    <div>
      {{data.size}} Traces
      <button class=action on-tap="_view">View</button>
    </div>
    <word-cloud-sk id=cloud><word-cloud-sk>
  </template>
</dom-module>

<script>
  Polymer({
    is: "center-sk",

    properties: {
      data: {
        type: Object,
        value: function() { return {} },
        observer: "_dataChanged",
      },
    },

    _dataChanged: function() {
      this.$.cloud.setItems(this.data.wordcloud);
    },

    _view: function() {
      this.fire("view-traces", {ids: this.data.ids});
    },

  });
</script>