@legumeinfo/web-components/lib/lis-qtl-search-element.d.ts

Web Components for the Legume Information System and other AgBio databases

import { LitElement } from 'lit';
import { PaginatedSearchOptions } from './mixins';
/**
 * The data that will be passed to the search function by the
 * {@link LisQTLSearchElement | `LisQTLSearchElement`} class when a search is
 * performed.
 */
export type QTLSearchData = {
    page: number;
    query: string;
};
/**
 * A single result of a QTL search performed by the
 * {@link LisQTLSearchElement | `LisQTLSearchElement`} class.
 */
export type QTLSearchResult = {
    trait_name: string;
    identifier: string;
    linkageGroup_geneticMap_identifier: string;
    linkageGroup_identifier: string;
    start: number;
    end: number;
    markerNames: string;
};
/**
 * The signature of the function the
 * {@link LisQTLSearchElement | `LisQTLSearchElement`} class requires for
 * performing a QTL search.
 *
 * @param query The search term in the input element when the search form was
 * submitted.
 * new search is performed.
 * @param options Optional parameters that aren't required to perform a QTL
 * search but may be useful.
 *
 * @returns A {@link !Promise | `Promise`} that resolves to an
 * {@link !Array | `Array`} of {@link QTLSearchResult | `QTLSearchResult`}
 * objects.
 */
export type QTLSearchFunction = (searchData: QTLSearchData, options: PaginatedSearchOptions) => Promise<Array<QTLSearchResult>>;
declare const LisQTLSearchElement_base: import("./mixins").Constructor<import("./mixins").LisPaginatedSearchElementInterface<QTLSearchData, QTLSearchResult>, any[]> & typeof LitElement;
/**
 * @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>
 */
export declare class LisQTLSearchElement extends LisQTLSearchElement_base {
    /** @ignore */
    static styles: import("lit").CSSResult;
    /**
     * An optional property to set the example text for the QTL trait name search field.
     *
     * @attribute
     */
    traitExample?: string;
    constructor();
    /** @ignore */
    renderForm(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'lis-qtl-search-element': LisQTLSearchElement;
    }
}
export {};
//# sourceMappingURL=lis-qtl-search-element.d.ts.map