diff --git a/dev/lis-gene-search-element.html b/dev/lis-gene-search-element.html index 63aff3b..70bd3d0 100644 --- a/dev/lis-gene-search-element.html +++ b/dev/lis-gene-search-element.html @@ -24,19 +24,23 @@

<lis-gene-search-element>

The <lis-gene-search-element> provides a form for performing gene searches and displays the results in a paginated view. The search is performed using an external function provided to the component when it is added to the page. - In this example, the component performs a path query search for legume genes using the LIS GraphQL API query genes. + In this example, the component performs a search for legume genes using the LIS GraphQL API query genes. The form's genus, species, and strain selectors are also populated from this API. See the source code for details. Note that the form's input and page values are kept up to date in the URL query string parameters. This allows users to share specific pages from a search via the URL and for the search history to be navigated via the Web browser's forward and back buttons. If the query string parameters are present when the component loads then a search will be automatically performed with the query string parameter values.

+

+ Optionally, all searches can be limited to a specific genus by setting the genus attribute/property. + This will cause the genus field of the search form to be automatically set and disabled so that users cannot change it. + You can try setting the genus property in this example using the geneSearchElement variable in the Web console. +


- -
+
diff --git a/src/lis-gene-search-element.ts b/src/lis-gene-search-element.ts index 53ab819..d7f7412 100644 --- a/src/lis-gene-search-element.ts +++ b/src/lis-gene-search-element.ts @@ -158,6 +158,27 @@ export type GeneSearchFunction = ( * geneSearchElement.formDataFunction = getGeneFormData; * * ``` + * + * @example + * The {@link genus | `genus`} property can be used to limit all searches to a specific + * genus. This will cause the genus field of the search form to be automatically set and + * disabled so that users cannot change it. Additionally, this property cannot be + * overridden using the `genus` querystring parameter. However, like the `genus` + * querystring parameter, if the genus set is not present in the `formData` then the + * genus form field will be set to the default `any` value. For example: + * ```html + * + * + * + * + * + * + * ``` */ @customElement('lis-gene-search-element') export class LisGeneSearchElement extends LisPaginatedSearchMixin(LitElement)< @@ -187,6 +208,12 @@ export class LisGeneSearchElement extends LisPaginatedSearchMixin(LitElement)< formDataFunction: GeneFormDataFunction = () => Promise.reject(new Error('No form data function provided')); + /** + * An optional property that limits searches to a specific genus. + */ + @property({type: String}) + genus?: string; + // the selected index of the genus select element @state() private selectedGenus: number = 0; @@ -241,10 +268,16 @@ export class LisGeneSearchElement extends LisPaginatedSearchMixin(LitElement)< this.tableColumnClasses = { description: 'uk-table-expand', }; + } + + // called when the component is added to the DOM; attributes should have properties now + override connectedCallback() { + super.connectedCallback(); // initialize the form data with querystring parameters so a search can be performed // before the actual form data is loaded const formData: GeneSearchFormData = {genuses: []}; - const genus = this.queryStringController.getParameter('genus'); + const genus = + this.genus || this.queryStringController.getParameter('genus'); if (genus) { formData.genuses.push({genus, species: []}); const species = this.queryStringController.getParameter('species'); @@ -270,7 +303,7 @@ export class LisGeneSearchElement extends LisPaginatedSearchMixin(LitElement)< this._getFormData(); } // use querystring parameters to update the selectors when the form data changes - if (changedProperties.has('formData')) { + if (changedProperties.has('formData') || changedProperties.has('genus')) { this._initializeSelections(); } } @@ -304,7 +337,8 @@ export class LisGeneSearchElement extends LisPaginatedSearchMixin(LitElement)< // sets the selected indexes based on querystring parameters private _initializeSelections() { - const genus = this.queryStringController.getParameter('genus'); + const genus = + this.genus || this.queryStringController.getParameter('genus'); if (genus) { this.selectedGenus = this.formData.genuses.map(({genus}) => genus).indexOf(genus) + 1; @@ -347,6 +381,21 @@ export class LisGeneSearchElement extends LisPaginatedSearchMixin(LitElement)< const options = this.formData.genuses.map(({genus}) => { return html``; }); + // HACK: the disabled attribute can't be set via template literal... + if (this.genus) { + return html` + + + `; + } return html`