[gold] Add corpus selector into search-controls
It now gets data from /paramset, which means it will
have up-to-date data for tryjobs.
I'll be glad when we can port this to lit-html.
Bug: skia:9879
Change-Id: I4d08b889f120cd579466790a44df62678f939fa9
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/290021
Reviewed-by: Leandro Lovisolo <lovisolo@google.com>
diff --git a/golden/frontend/res/imp/search-controls-sk.html b/golden/frontend/res/imp/search-controls-sk.html
index d5458bd..6371079 100644
--- a/golden/frontend/res/imp/search-controls-sk.html
+++ b/golden/frontend/res/imp/search-controls-sk.html
@@ -7,7 +7,7 @@
and send an update to the host element to reload data based
on the new query state.
- The state object contains these fiels:
+ The state object contains these fields:
- pos: show positive (boolean).
- neg: show negative (boolean).
- unt: show untriaged (boolean).
@@ -18,7 +18,6 @@
Attributes:
state - The current query state.
- orientation - Orientation of the controls. Values: 'horizontal', 'vertical'
disabled - Boolean to indicate whether to disable all the controls.
beta - Boolean to enable beta-level functions.
@@ -55,56 +54,49 @@
<template>
<style include="iron-flex iron-flex-alignment"></style>
<style include="shared-styles">
- .horizontalTopControl, .verticalTopControl {
+ .horizontalTopControl {
font-weight: bold;
}
- .verticalTopControl {
- margin: 0 0 1em 0;
- }
-
.horizontalTopControl {
margin: 0 2em 0 0;
}
- .buttonContainer {
- width: 8em;
- }
-
- .buttonContainer.verticalTopControl {
- margin-top: 2em;
- }
-
.horizontal.currSelection {
margin-left: 1em;
margin-right: 3em;
max-width: 20em;
}
- .vertical.currSelection {
- padding-top: 1em;
- max-width: 10em;
+ .corpus_label {
+ font-weight: bold;
+ margin: auto 0;
}
- </style>
- <div class$="[[orientation]] layout">
- <paper-toggle-button class$="{{_tcClass(orientation)}}" checked="{{state.pos}}" disabled={{disabled}}>Positive</paper-toggle-button>
- <paper-toggle-button class$="{{_tcClass(orientation)}}" checked="{{state.neg}}" disabled={{disabled}}>Negative</paper-toggle-button>
- <paper-toggle-button class$="{{_tcClass(orientation)}}" checked="{{state.unt}}" disabled={{disabled}}>Untriaged</paper-toggle-button>
- <paper-toggle-button class$="{{_tcClass(orientation)}}" checked="{{state.head}}" disabled={{disabled}}>Head</paper-toggle-button>
- <paper-toggle-button class$="{{_tcClass(orientation)}}" checked="{{state.include}}" disabled={{disabled}}>Ignored</paper-toggle-button>
- <div class="buttonContainer">
- <paper-button id="searchButton" class$="topControl" raised disabled="[[disabled]]"
- title="Filter Traces"><iron-icon icon="image:tune"></iron-icon></paper-button>
- </div>
- <!-- TODO(stephana): Enable filter button when backend is ready -->
- <div class$="{{_tcClass(orientation)}} buttonContainer">
+ </style>
+ <div class="vertical layout">
+ <div class="horizontal layout">
+ <paper-toggle-button class="horizontalTopControl" checked="{{state.pos}}" disabled={{disabled}}>Positive</paper-toggle-button>
+ <paper-toggle-button class="horizontalTopControl" checked="{{state.neg}}" disabled={{disabled}}>Negative</paper-toggle-button>
+ <paper-toggle-button class="horizontalTopControl" checked="{{state.unt}}" disabled={{disabled}}>Untriaged</paper-toggle-button>
+ <paper-toggle-button class="horizontalTopControl" checked="{{state.head}}" disabled={{disabled}}>Head</paper-toggle-button>
+ <paper-toggle-button class="horizontalTopControl" checked="{{state.include}}" disabled={{disabled}}>Ignored</paper-toggle-button>
+
<paper-button id="filterButton" class$="topControl" raised disabled="[[disabled]]"
title="Metrics Filter"><iron-icon icon="icons:filter-list"></iron-icon>
</paper-button>
</div>
- <div class$="[[orientation]] currSelection">
- [[_splitAmp(state.query, orientation)]]
+ <div class="horizontal layout">
+ <span class=corpus_label>Corpus:</span>
+ <corpus-selector-sk id="corpusSelector"></corpus-selector-sk>
+ </div>
+ <div class="horizontal layout">
+ <paper-button id="searchButton" class$="topControl" raised disabled="[[disabled]]"
+ title="Filter Traces"><iron-icon icon="image:tune"></iron-icon></paper-button>
+
+ <div class="horizontal currSelection">
+ [[_splitAmp(state.query)]]
+ </div>
</div>
</div>
@@ -121,11 +113,6 @@
type: Object
},
- orientation: {
- type: String,
- value: "horizontal"
- },
-
disabled: {
type: Boolean,
value: false
@@ -146,6 +133,7 @@
this.listen(this.$.filterButton, 'tap', '_handleFilterButton');
this.listen(this.$.queryDialog, 'edit', '_handleQueryEdit');
this.listen(this.$.filterDialog, 'edit', '_handleFilterEdit');
+ this.listen(this.$.corpusSelector, 'corpus_selected', '_handleCorpusChange');
// If the corpus changes make sure we do cleanup work.
this.async(function() {
@@ -160,11 +148,26 @@
this._noFire = !fireEvent;
this.set('state', sk.object.shallowCopy(state));
this.$.filterDialog.setValue(this.state);
+ const query = sk.query.toParamSet(state.query);
+ const corporaSelected = query['source_type'];
+ if (corporaSelected && corporaSelected.length) {
+ this.$.corpusSelector.selectedCorpus = corporaSelected[0];
+ } else {
+ this.$.corpusSelector.selectedCorpus = sk.app_config.defaultCorpus;
+ }
},
setParamSet: function(params) {
this.$.queryDialog.queryEle.setParamSet(params);
this.$.filterDialog.setParamSet(params);
+ // TODO(kjlubick) in the lit-html version, this should reflect of digests as matched by
+ // the positive/negative/diff selector (i.e. the things above it).
+ const corpora = params['source_type'].map((name) => {
+ return {
+ name: name,
+ };
+ });
+ this.$.corpusSelector.corpora = corpora;
},
setCommitInfo: function(commits) {
@@ -195,6 +198,14 @@
_handleCorpusChange: function(ev) {
this.$.queryDialog.close();
+
+ // TODO(kjlubick) This is a dirty ugly hack, making the corpus change reload the entire
+ // page. However, the port to lit-html is coming soon, and I don't feel like making
+ // more changes to this Polymer code than is necessary.
+ const params = sk.query.toParamSet(this.state.query);
+ params.source_type = [ev.detail.corpus];
+ this.state.query = sk.query.fromParamSet(params);
+ window.location = window.location.pathname + gold.queryFromState(this.state);
},
_fireStateChange: function() {
@@ -207,12 +218,8 @@
this.fire('state-change', detail);
},
- _tcClass: function(orientation) {
- return (orientation==='horizontal') ? "horizontalTopControl" : "verticalTopControl";
- },
-
- _splitAmp: function(qStr, orientation) {
- return sk.query.splitAmp(qStr, (orientation === 'horizontal') ? ', ':' \n');
+ _splitAmp: function(qStr) {
+ return sk.query.splitAmp(qStr, ', ');
}
});
diff --git a/golden/modules/byblame-page-sk/byblame-page-sk.js b/golden/modules/byblame-page-sk/byblame-page-sk.js
index 64316e6..4f1925e 100644
--- a/golden/modules/byblame-page-sk/byblame-page-sk.js
+++ b/golden/modules/byblame-page-sk/byblame-page-sk.js
@@ -23,7 +23,7 @@
.corpora=${ele._corpora}
.selectedCorpus=${ele._corpus}
.corpusRendererFn=${corpusRendererFn}
- @corpus-selected=${ele._handleCorpusChange}>
+ @corpus_selected=${ele._handleCorpusChange}>
</corpus-selector-sk>
</div>
diff --git a/golden/modules/corpus-selector-sk/corpus-selector-sk-demo.js b/golden/modules/corpus-selector-sk/corpus-selector-sk-demo.js
index cd14196..1393450 100644
--- a/golden/modules/corpus-selector-sk/corpus-selector-sk-demo.js
+++ b/golden/modules/corpus-selector-sk/corpus-selector-sk-demo.js
@@ -12,7 +12,7 @@
const ele = document.createElement('corpus-selector-sk');
ele.corpora = exampleCorpora;
ele.selectedCorpus = 'gm';
-ele.addEventListener('corpus-selected', handleCorpusSelected);
+ele.addEventListener('corpus_selected', handleCorpusSelected);
$$('#default').appendChild(ele);
// Custom corpus renderer function.
@@ -20,7 +20,7 @@
eleCustom.corpora = exampleCorpora;
eleCustom.selectedCorpus = 'gm';
eleCustom.corpusRendererFn = (corpus) => `${corpus.name} : ${corpus.untriagedCount} / ${corpus.negativeCount}`;
-eleCustom.addEventListener('corpus-selected', handleCorpusSelected);
+eleCustom.addEventListener('corpus_selected', handleCorpusSelected);
$$('#custom-fn').appendChild(eleCustom);
// Custom corpus renderer function (long).
@@ -28,5 +28,5 @@
eleLong.corpora = exampleCorpora;
eleLong.selectedCorpus = 'gm';
eleLong.corpusRendererFn = (corpus) => `${corpus.name} : yadda yadda yadda yadda yadda`;
-eleLong.addEventListener('corpus-selected', handleCorpusSelected);
+eleLong.addEventListener('corpus_selected', handleCorpusSelected);
$$('#custom-fn-long-corpus').appendChild(eleLong);
diff --git a/golden/modules/corpus-selector-sk/corpus-selector-sk.js b/golden/modules/corpus-selector-sk/corpus-selector-sk.js
index da7fc81..4c7c0c6 100644
--- a/golden/modules/corpus-selector-sk/corpus-selector-sk.js
+++ b/golden/modules/corpus-selector-sk/corpus-selector-sk.js
@@ -4,7 +4,7 @@
*
* Lists the available corpora and lets the user select a corpus.
*
- * @evt corpus-selected - Sent when the user selects a different corpus. Field
+ * @evt corpus_selected - Sent when the user selects a different corpus. Field
* event.detail.corpus will contain the selected corpus.
*/
@@ -78,7 +78,7 @@
_sendCorpusSelected() {
this.dispatchEvent(
- new CustomEvent('corpus-selected', {
+ new CustomEvent('corpus_selected', {
detail: {
corpus: this.selectedCorpus,
},
diff --git a/golden/modules/corpus-selector-sk/corpus-selector-sk_test.js b/golden/modules/corpus-selector-sk/corpus-selector-sk_test.js
index 3194055..aa8d410 100644
--- a/golden/modules/corpus-selector-sk/corpus-selector-sk_test.js
+++ b/golden/modules/corpus-selector-sk/corpus-selector-sk_test.js
@@ -59,14 +59,14 @@
'svg : 19 / 21']);
});
- it('selects corpus and emits "corpus-selected" event when clicked', async () => {
+ it('selects corpus and emits "corpus_selected" event when clicked', async () => {
const corpusSelectorSk = newCorpusSelectorSk({ selectedCorpus: 'gm' });
expect(corpusSelectorSk.selectedCorpus).to.equal('gm');
expect(selectedCorpusLiText(corpusSelectorSk)).to.equal('gm');
// Click on 'svg' corpus.
- const corpusSelected = eventPromise('corpus-selected');
+ const corpusSelected = eventPromise('corpus_selected');
$$('li[title="svg"]', corpusSelectorSk).click();
const ev = await corpusSelected;
diff --git a/golden/pages/transitional.js b/golden/pages/transitional.js
index 7e5522f..4c15e15 100644
--- a/golden/pages/transitional.js
+++ b/golden/pages/transitional.js
@@ -5,6 +5,7 @@
import '../../infra-sk/modules/paramset-sk';
import '../node_modules/@webcomponents/custom-elements/custom-elements.min';
import '../modules/changelist-controls-sk';
+import '../modules/corpus-selector-sk';
import '../modules/digest-details-sk';
import '../modules/dots-legend-sk';
import '../modules/dots-sk';
