| <!-- |
| The <filter-dialog-sk> custom element declaration. |
| |
| A dialog that provides input elements to filter search results by |
| metric values. |
| |
| Attributes: |
| None. |
| |
| Methods: |
| open() - Opens the dialog. |
| |
| close() - Closes the dialog. |
| |
| setValue(newValue): Sets the values to be filtered. Needs to be called |
| before the dialog is opened. |
| |
| setCommitInfo(commitinfo) - Where commitinfo is an array of objects of the form: |
| |
| { |
| author: "foo@example.org" |
| commit_time: 1428574804 |
| hash: "d9f8862ab6bed4195cbfe5dda48693e1062b01e2" |
| } |
| |
| Events: |
| 'edit' - emitted when user clicks the 'Filter' button (and closes the dialog in the process). |
| The 'detail' field of the event contains the modified version |
| of filter object. |
| |
| Mailboxes: |
| None |
| |
| --> |
| |
| <link rel="import" href="bower_components/iron-icons/iron-icons.html"> |
| <link rel="import" href="bower_components/iron-icons/image-icons.html"> |
| <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"> |
| <link rel="import" href="bower_components/paper-button/paper-button.html"> |
| <link rel="import" href="bower_components/paper-dialog/paper-dialog.html"> |
| <link rel="import" href="bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html"> |
| <link rel="import" href="bower_components/paper-dropdown-menu/paper-dropdown-menu.html"> |
| <link rel="import" href="bower_components/paper-item/paper-item.html"> |
| <link rel="import" href="bower_components/paper-listbox/paper-listbox.html"> |
| <link rel="import" href="bower_components/paper-slider/paper-slider.html"> |
| <link rel="import" href="bower_components/paper-toggle-button/paper-toggle-button.html"> |
| <link rel="import" href="bower_components/polymer/polymer.html"> |
| |
| <link rel=import href="../common/imp/commit-picker.html"> |
| |
| <link rel="import" href="query-dialog-sk.html"> |
| <link rel="import" href="select-popup-sk.html"> |
| <link rel="import" href="shared-styles.html"> |
| |
| <dom-module id="filter-dialog-sk"> |
| <template> |
| <style include="iron-flex iron-flex-alignment shared-styles"> |
| paper-slider { |
| width: 25em; |
| margin-top: 0; |
| --paper-slider-input: { |
| width: 7em; |
| }; |
| } |
| |
| .sliderHeader { |
| font-weight: bold; |
| font-size: 110%; |
| } |
| |
| .filterItem { |
| padding: 1em; |
| } |
| |
| .selectLabel { |
| font-weight: bold; |
| width:15em; |
| padding-right: 2em; |
| } |
| |
| .selectLabel.metricLabel { |
| padding-top: .5em; |
| width: 2.5em; |
| } |
| |
| .inlineLabel { |
| font-weight: bold; |
| padding-right: 1em; |
| } |
| |
| .currSelection { |
| padding: 1em 0 0 1em; |
| min-width: 5em; |
| max-width: 15em; |
| display: inline-block; |
| } |
| |
| #rightQueryButton { |
| max-height: 3em; |
| } |
| |
| .diffMetricSelect { |
| width: 7em; |
| margin-right: 1em; |
| }; |
| |
| </style> |
| <paper-dialog id="filterDialog" with-backdrop> |
| <paper-dialog-scrollable> |
| <div class="vertical layout"> |
| <div class="filterItem horizontal layout"> |
| <span class="inlineLabel">Diff Config:</span> |
| <paper-button id="rightQueryButton" raised><iron-icon icon="image:tune"></iron-icon></paper-button> |
| <div class="currSelection"> |
| [[_splitAmp(_curr.rquery)]] |
| </div> |
| </div> |
| |
| <div class="filterItem"> |
| Commit Range: |
| <commit-picker-sk id="startCommitPicker" repo="[[_repo]]"></commit-picker-sk> |
| <commit-picker-sk id="endCommitPicker" repo="[[_repo]]"></commit-picker-sk> |
| </div> |
| |
| <!-- group by test --> |
| <div class="filterItem"> |
| <span class="selectLabel">Group By Test:</span> |
| <paper-dropdown-menu class="groupTestSelect" no-label-float> |
| <paper-listbox id="groupTest" class="dropdown-content" selected="{{_curr.fgrouptest}}" attr-for-selected="value"> |
| <paper-item value=""></paper-item> |
| <template is='dom-repeat' items='[[_groupTests]]'> |
| <paper-item value="[[item]]">[[item]]</paper-item> |
| </template> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| </div> |
| |
| <!-- min RGBA delta --> |
| <div class="filterItem"> |
| <div class="sliderHeader">Min RGBA Delta</div> |
| <paper-slider value="{{_curr.frgbamin}}" min="0" max="255" editable></paper-slider> |
| </div> |
| |
| <!-- max RGBA delta --> |
| <div class="filterItem"> |
| <div class="sliderHeader">Max RGBA Delta</div> |
| <paper-slider value="{{_curr.frgbamax}}" min="0" max="255" editable></paper-slider> |
| </div> |
| |
| <!-- Max Diff --> |
| <div class="filterItem"> |
| <div class="sliderHeader">Max Diff</div> |
| <paper-slider value="{{_curr.fdiffmax}}" min="-1" max="1" step="0.05" editable></paper-slider> |
| </div> |
| |
| <!-- match --> |
| <div class="filterItem horizontal layout justified"> |
| <div> |
| <div class="selectLabel">Fields Must Match:</div> |
| <template is='dom-repeat' items='[[_curr.match]]'> |
| <div>[[item]]</div> |
| </template> |
| </div> |
| <select-popup-sk id="paramsSelect" icon="icons:create"></select-popup-sk> |
| <!--<select-popup-sk id="paramsSelect"></select-popup-sk>--> |
| </div> |
| |
| <!-- metric --> |
| <div class="filterItem layout horizontal"> |
| <!-- Note:The values of the dropdown need to match the metric ids on the backend --> |
| <span class="selectLabel metricLabel">Metric:</span> |
| <paper-dropdown-menu class="diffMetricSelect" no-label-float> |
| <paper-listbox id="diffMetric" class="dropdown-content" selected="{{_curr.metric}}" attr-for-selected="value"> |
| <template is='dom-repeat' items='[[_metrics]]'> |
| <paper-item value="[[item]]">[[item]]</paper-item> |
| </template> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| |
| <span class="selectLabel metricLabel">Sort:</span> |
| <paper-dropdown-menu class="diffMetricSelect" no-label-float> |
| <paper-listbox id="sortResult" class="dropdown-content" selected="{{_curr.sort}}" attr-for-selected="value"> |
| <template is='dom-repeat' items='[[_sortOptions]]'> |
| <paper-item value="[[item]]">[[item]]</paper-item> |
| </template> |
| </paper-listbox> |
| </paper-dropdown-menu> |
| </div> |
| |
| <!-- has ref image --> |
| <div class="filterItem"> |
| <paper-toggle-button checked="{{_curr.fref}}"><span class="selectLabel">Must have Reference Image</span></paper-toggle-button> |
| </div> |
| </div> |
| </div> |
| </paper-dialog-scrollable> |
| <div class="buttons"> |
| <paper-button id="cancelButton" dialog-dismiss>Cancel</paper-button> |
| <paper-button id="editButton" raised dialog-dismiss>Filter</paper-button> |
| </div> |
| </paper-dialog> |
| <query-dialog-sk id="rightQueryDialog" submit-label="Select"></query-dialog-sk> |
| </template> |
| <script> |
| (function() { |
| // The fields we are interested in. |
| var filterFields = [ |
| "rquery", |
| "metric", |
| "match", |
| "frgbamin", |
| "frgbamax", |
| "fdiffmax", |
| "fgrouptest", |
| "fbegin", |
| "fend", |
| "fref", |
| "sort" |
| ]; |
| |
| Polymer({ |
| is: "filter-dialog-sk", |
| |
| properties: { |
| _curr: { |
| type: Object |
| }, |
| _repo: { |
| type: String, |
| value: sk.app_config.baseRepoURL |
| }, |
| }, |
| |
| ready: function() { |
| this.listen(this.$.editButton, 'tap', '_handleEditButton'); |
| this.listen(this.$.paramsSelect, 'changed-selection', '_handleMatchChanged'); |
| this.listen(this.$.rightQueryButton, 'tap', '_handleRightQueryButton'); |
| this.listen(this.$.rightQueryDialog, 'edit', '_handleRightQueryEdit'); |
| this.set('_metrics', gold.allMetrics.slice()); |
| this.set('_groupTests', gold.groupTestOps.slice()); |
| this.set('_sortOptions', gold.sortOptions.slice()); |
| this.listen(this.$.startCommitPicker, 'commit-selected', '_handleCommitSelected'); |
| this.listen(this.$.endCommitPicker, 'commit-selected', '_handleCommitSelected'); |
| }, |
| |
| _handleCommitSelected: function(ev) { |
| if (this._curr) { |
| var target = ev.currentTarget; |
| var commit = ev.detail.commit; |
| if (target.id === 'startCommitPicker') { |
| this._curr.fbegin = (commit) ? (commit.hash) : (''); |
| } else { |
| this._curr.fend = (commit) ? (commit.hash) : (''); |
| } |
| } |
| }, |
| |
| open: function() { |
| this.set('_curr', sk.object.shallowCopy(this._value)); |
| this.$.paramsSelect.setSelection(this._curr.match); |
| this.$.filterDialog.open(); |
| }, |
| |
| close: function() { |
| this.$.filterDialog.close(); |
| }, |
| |
| setParamSet: function(params) { |
| this.$.rightQueryDialog.queryEle.setParamSet(params); |
| this.$.paramsSelect.setParamSet(params); |
| }, |
| |
| setValue: function(newVal) { |
| // Extract the fields we are interested in. |
| var value = {}; |
| for(var i=0; i < filterFields.length; i++) { |
| var f = filterFields[i]; |
| if (newVal.hasOwnProperty(f)) { |
| if (Array.isArray(newVal[f])) { |
| value[f] = newVal[f].slice(); |
| } else { |
| value[f] = newVal[f]; |
| } |
| } |
| } |
| this._setCommitPicker(this.$.startCommitPicker, newVal.fbegin); |
| this._setCommitPicker(this.$.endCommitPicker, newVal.fend); |
| this.$.paramsSelect.setSelection(value.match); |
| this._value = value; |
| }, |
| |
| _setCommitPicker: function(pickerEle, hash) { |
| pickerEle.selectHash(hash); |
| }, |
| |
| setCommitInfo: function(commits) { |
| this._commits = commits; |
| this.$.startCommitPicker.setCommitInfo(commits); |
| this.$.endCommitPicker.setCommitInfo(commits); |
| }, |
| |
| _handleEditButton: function(ev) { |
| this._value = sk.object.shallowCopy(this._curr); |
| this.fire('edit', sk.object.shallowCopy(this._curr)); |
| }, |
| |
| _handleMatchChanged: function(ev) { |
| this.set('_curr.match', ev.detail); |
| }, |
| |
| _handleRightQueryButton: function(ev) { |
| ev.stopPropagation(); |
| this.$.rightQueryDialog.open(this._curr.rquery); |
| }, |
| |
| _handleRightQueryEdit: function(ev) { |
| ev.stopPropagation(); |
| this.set('_curr.rquery', ev.detail); |
| }, |
| |
| _splitAmp: function(qStr) { |
| return sk.query.splitAmp(qStr, ' \n'); |
| } |
| }); |
| })(); |
| </script> |
| </dom-module> |
