| /** |
| * @module modules/algo-select-sk |
| * @description <h2><code>algo-select-sk</code></h2> |
| * |
| * Displays and allows changing the clustering algorithm. |
| * |
| * @evt algo-change - Sent when the algo has changed. The value is stored |
| * in e.detail.algo. |
| * |
| * @attr {string} algo - The algorithm name. |
| */ |
| import 'elements-sk/select-sk' |
| import { define } from 'elements-sk/define' |
| import { html, render } from 'lit-html' |
| import { ElementSk } from '../../../infra-sk/modules/ElementSk' |
| import { $, $$ } from 'common-sk/modules/dom' |
| |
| const _fromName = (ele) => { |
| const target = ele.algo; |
| const divs = $('div', ele); |
| for (let i = divs.length - 1; i >= 0; i--) { |
| if (divs[i].getAttribute('value') === target) { |
| return i; |
| } |
| } |
| return 0; |
| } |
| |
| // TODO(jcgregorio) select-sk needs something like attr-for-selected and |
| // fallback-selection like iron-selector. |
| const template = (ele) => html` |
| <select-sk @selection-changed=${ele._selectionChanged}> |
| <div value=kmeans ?selected=${ele.algo === 'kmeans'} title="Use k-means clustering on the trace shapes.">K-Means</div> |
| <div value=stepfit ?selected=${ele.algo === 'stepfit'} title="Only look for traces that step up or down at the selected commit.">StepFit</div> |
| <div value=absolute ?selected=${ele.algo === 'absolute'} title="Only look for traces that step up or down by a specific value.">Absolute</div> |
| <div value=percent ?selected=${ele.algo === 'percent'} title="Only look for traces that step up or down by some percentage.">Percent</div> |
| </select-sk> |
| `; |
| |
| define('algo-select-sk', class extends ElementSk { |
| constructor() { |
| super(template); |
| } |
| |
| connectedCallback() { |
| super.connectedCallback(); |
| this._upgradeProperty('algo'); |
| this._render(); |
| this._select = $$('select-sk', this); |
| } |
| |
| static get observedAttributes() { |
| return ['algo']; |
| } |
| |
| _selectionChanged(e) { |
| let index = e.detail.selection; |
| if (index < 0) { |
| index = 0; |
| } |
| this.algo = $('div', this)[index].getAttribute('value'); |
| const detail = { |
| algo: this.algo, |
| }; |
| this.dispatchEvent(new CustomEvent('algo-change', { detail: detail, bubbles: true })); |
| } |
| |
| /** @prop algo {string} The algorithm. */ |
| get algo() { return this.getAttribute('algo'); } |
| set algo(val) { |
| this.setAttribute('algo', val); |
| } |
| |
| attributeChangedCallback(name, oldValue, newValue) { |
| this._render(); |
| } |
| |
| }); |