@legumeinfo/web-components
Version:
Web Components for the Legume Information System and other AgBio databases
158 lines • 6.31 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { LisPaginatedSearchMixin } from './mixins';
/**
* @htmlElement `<lis-qtl-search-element>`
*
* A Web Component that provides an interface for performing keyword searches
* for QTLs and displaying results in a paginated table. Note that the
* component saves its state to the URL query string parameters and a search
* will be automatically performed if the parameters are present when the
* componnent is loaded. The component uses the
* {@link mixins!LisPaginatedSearchMixin | `LisPaginatedSearchMixin`} mixin. See
* the mixin docs for further details.
*
* @queryStringParameters
* - **query:** The text in the query field of the search form.
* - **page:** What page of results is loaded.
*
* @example
* {@link !HTMLElement | `HTMLElement`} properties can only be set via
* JavaScript. This means the {@link searchFunction | `searchFunction`} property
* must be set on a `<lis-qtl-search-element>` tag's instance of the
* {@link LisQTLSearchElement | `LisQTLSearchElement`} class. For example:
* ```html
* <!-- add the Web Component to your HTML -->
* <lis-qtl-search-element id="qtl-search"></lis-qtl-search-element>
*
* <!-- configure the Web Component via JavaScript -->
* <script type="text/javascript">
* // a site-specific function that sends a request to a QTL search API
* function getQTLs(searchData, {abortSignal}) {
* // returns a Promise that resolves to a search result object
* }
* // get the QTL search element
* const searchElement = document.getElementById('qtl-search');
* // set the element's searchFunction property
* searchElement.searchFunction = getQTLs;
* </script>
* ```
*
* @example
* The {@link LisQTLSearchElement | `LisQTLSearchElement`} class inherits the
* {@link resultAttributes | `resultAttributes`} and
* {@link tableHeader | `tableHeader`} properties from
* {@link mixins!LisPaginatedSearchMixin | `LisPaginatedSearchMixin`} mixin. These are
* used to define what attributes of the results provided by the
* {@link searchFunction | `searchFunction`} will be shown in the results table and
* what their corresponding headers will be in the table. These properties can be
* overridden via JavaScript. For example:
* ```html
* <!-- add the Web Component to your HTML -->
* <lis-qtl-search-element id="qtl-search"></lis-qtl-search-element>
*
* <!-- configure the Web Component via JavaScript -->
* <script type="text/javascript">
* // get the qtl search element
* const searchElement = document.getElementById('qtl-search');
* // set the element's resultAttributes property
* searchElement.resultAttributes = ["trait_name", "identifier", "link"];
* // set the element's tableHeader property
* searchElement.tableHeader = {
* trait_name: "Trait Name",
* identifier: "Identifier",
* link: "Link",
* };
* </script>
* ```
*
* @example
* The {@link traitExample | `traitExample`} property can be used to set the
* example text in the search form. For example:
*
* ```html
* <!-- set the example text via HTML -->
* <lis-qtl-search-element traitExample="flower"></lis-qtl-search-element>
*
* <!-- set the example text via JavaScript -->
* <lis-qtl-search-element id="qtl-search"></lis-qtl-search-element>
*
* <script type="text/javascript">
* // get the qtl search element
* const searchElement = document.getElementById('qtl-search');
* // set the element's traitExample property
* searchElement.traitExample = 'flower';
* </script>
*/
let LisQTLSearchElement = class LisQTLSearchElement extends LisPaginatedSearchMixin(LitElement)() {
constructor() {
super();
// configure query string parameters
this.requiredQueryStringParams = [['query']];
// configure results table
this.resultAttributes = [
'trait_name',
'identifier',
'linkageGroup_geneticMap_identifier',
'linkageGroup_identifier',
'start',
'end',
'markerNames',
];
this.tableHeader = {
trait_name: 'Trait',
identifier: 'QTL',
linkageGroup_geneticMap_identifier: 'Genetic Map',
linkageGroup_identifier: 'Linkage Group',
start: 'Start',
end: 'End',
markerNames: 'Markers',
};
}
/** @ignore */
// used by LisPaginatedSearchMixin to draw the template
renderForm() {
return html `
<form>
<fieldset class="uk-fieldset">
<legend class="uk-legend">QTL trait name search</legend>
<div class="uk-margin">
<input
name="query"
class="uk-input"
type="text"
aria-label="Input"
.value=${this.queryStringController.getParameter('query')}
/>
<lis-form-input-example-element
.text=${this.traitExample}
></lis-form-input-example-element>
</div>
<div class="uk-margin">
<button type="submit" class="uk-button uk-button-primary">
Search
</button>
</div>
</fieldset>
</form>
`;
}
};
/** @ignore */
// used by Lit to style the Shadow DOM
// not necessary but exclusion breaks TypeDoc
LisQTLSearchElement.styles = css ``;
__decorate([
property({ type: String })
], LisQTLSearchElement.prototype, "traitExample", void 0);
LisQTLSearchElement = __decorate([
customElement('lis-qtl-search-element')
], LisQTLSearchElement);
export { LisQTLSearchElement };
//# sourceMappingURL=lis-qtl-search-element.js.map