perf/res/imp/query.html

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

  This in an HTML Import-able file that contains the definition
  of the following elements:

    <query-sk>

  To use this file import it:

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

  Usage:

    <query-sk></query-sk>

  Properties:
    currentQuery: The current URL query formatted selections.

  Methods:
    setParamSet(set): Set the params to be displayed.
    clearSelections(): Clear all selections.

  Events:
    'change'
        The 'sk-query' element will produce 'change' events when the query
        parameters chosen have changed. The event contains the current
        selections formatted as a URL query, found in e.detail.
-->
<polymer-element name="query-sk">
  <template>
    <style type="text/css" media="screen">
      #more.display {
        display: none;
      }
      select {
        overflow: auto;
        margin: 0.3em;
      }

      .node {
        margin: 0 0.5em;
      }
      .more {
        width: 100%
      }
      .option {
        padding: 0.2em;
      }
      .option.core-selected {
        background: #ddd;
      }

      .choices {
        height: 15em;
        overflow-y: auto;
        border: solid lightgray 1px;
      }

    </style>
    <paper-button raised id="clear">Clear selections</paper-button>
    <span id="count"></span>
    <div id="inputs" horizontal layout wrap>
      <template repeat="{{sel in primary}}">
        <div class="node">
          <h4>{{sel.name}}</h4>
          <div class="choices">
            <core-selector valueattr="label" data-name="{{sel.name}}" multi>
              <template repeat="{{o in sel.values}}">
                <div class="option" label="{{o}}">{{o}}</div>
              </template>
            </core-selector>
          </div>
        </div>
      </template>
    </div>
    <toggle-display-sk>More...</toggle-display-sk>
    <div id="more" horizontal layout wrap class="display">
      <template repeat="{{sel in secondary}}">
        <div class="node">
          <h4>{{sel.name}}</h4>
          <div class="choices">
            <core-selector valueattr="label" data-name="{{sel.name}}" multi>
              <template repeat="{{o in sel.values}}">
                <div class="option" label="{{o}}">{{o}}</div>
              </template>
            </core-selector>
          </div>
        </div>
      </template>
    </div>
  </template>
  <script>
    (function(){
      var whitelist = [
        'name', 'bench_type', 'os', 'source_type', 'scale', 'extra_config',
        'config', 'arch'];

      Polymer({
        created: function() {
          // Both primary and secondary are arrays of objects that look like:
          //
          //  {
          //    name: "config",
          //    values: ["565", "8888", "gpu"]
          //  }
          //
          // Where primary contains selections that are in the whitelist, and
          // secondary contains all the other selections.
          this.primary = [];
          this.secondary = [];
        },

        ready: function() {
          this.currentQuery = '';

          this.$.inputs.addEventListener('core-select', this.fireChange.bind(this));
          this.$.more.addEventListener('core-select', this.fireChange.bind(this));

          this.$.clear.addEventListener('click', this.clearSelections.bind(this));
        },

        clearSelections: function() {
          $$('core-selector', this.$.inputs).forEach(function(elem) {
            elem.selected = [];
          });
          $$('core-selector', this.$.more).forEach(function(elem) {
            elem.selected = [];
          });
          this.$.count.textContent = '';
        },

        fireChange: function() {
          var q = this.selectionsAsQuery();
          // Only fire if we see a real change in the state.
          // See https://github.com/Polymer/core-selector/issues/6
          if (q != this.currentQuery) {
            this.currentQuery = q;
            this.dispatchEvent(new CustomEvent('change', {detail: q}));

            var countEle = this.$.count;
            sk.get('/query/0/-1/?' + q).then(JSON.parse).then(function(json) {
              countEle.innerHTML = json["matches"] + ' lines selected<br />';
            });
          }
        },


        // selectionsAsQuery bundles up the current set of selections as a URL query
        // suitable for passing to the /query/ endpoint.
        //
        selectionsAsQuery: function() {
          var sel = [];
          $$('core-selector', this.$.inputs).forEach(function(select) {
              var key = select.dataset.name;
              if (select.selected) {
                select.selected.forEach(function(value) {
                  console.log(key, value);
                  sel.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
                });
              }
          });
          $$('core-selector', this.$.more).forEach(function(select) {
              var key = select.dataset.name;
              if (select.selected) {
                select.selected.forEach(function(value) {
                  console.log(key, value);
                  sel.push(encodeURIComponent(key) + '=' + encodeURIComponent(value));
                });
              }
          });
          return sel.join('&')
        },

        // When paramset is changed we rebuild primary and secondary.
        //
        // The paramset is an object that maps selection names
        // to a list of selection values, not necessarily in alphabetical
        // order.
        setParamSet: function(paramset) {
          var keylist = Object.keys(paramset).sort();

          this.primary = [];
          this.secondary = [];
          for (var i = 0; i < keylist.length; i++) {
            var key = keylist[i];
            var sel = {
              name: key,
              values: paramset[key].sort()
            }
            if (whitelist.indexOf(key) != -1) {
              this.primary.push(sel);
            } else {
              this.secondary.push(sel);
            }
          }
        }
      });
    })();
  </script>
</polymer-element>