Restoring files back to main because of accidental changes.

legumeinfo · Oct 9, 2023 · 690dbf9 · 690dbf9
1 parent 17a320b
commit 690dbf9
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 6 deletions.
diff --git a/dev/lis-gene-search-element.html b/dev/lis-gene-search-element.html
@@ -24,19 +24,23 @@ <h1>&lt;lis-gene-search-element&gt;</h1>
       <p>
         The <code>&lt;lis-gene-search-element&gt;</code> 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 <code>genes</code>.
+        In this example, the component performs a search for legume genes using the LIS GraphQL API query <code>genes</code>.
         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.
       </p>
+      <p>
+        Optionally, all searches can be limited to a specific genus by setting the <code>genus</code> 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 <code>genus</code> property in this example using the <code>geneSearchElement</code> variable in the Web console.
+      </p>
       <hr>
-    </div>
 
-    <div class="uk-container uk-container-expand">
       <!-- the custom gene search element -->
       <lis-gene-search-element id="gene-search"></lis-gene-search-element>
+
     </div>
 
     <!-- set the search function by property because functions can't be set as attributes -->

diff --git a/src/lis-gene-search-element.ts b/src/lis-gene-search-element.ts
@@ -158,6 +158,27 @@ export type GeneSearchFunction = (
  *   geneSearchElement.formDataFunction = getGeneFormData;
  * </script>
  * ```
+ *
+ * @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
+ * <!-- restrict the genus via HTML -->
+ * <lis-gene-search-element genus="Glycine"></lis-gene-search-element>
+ *
+ * <!-- restrict the genus via JavaScript -->
+ * <lis-gene-search-element id="gene-search"></lis-gene-search-element>
+ * <script type="text/javascript">
+ *   // get the gene search element
+ *   const geneSearchElement = document.getElementById('gene-search');
+ *   // set the element's genus property
+ *   geneSearchElement.genus = "Cicer";
+ * </script>
+ * ```
  */
 @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`<option value="${genus}">${genus}</option>`;
     });
+    // HACK: the disabled attribute can't be set via template literal...
+    if (this.genus) {
+      return html`
+        <select
+          class="uk-select uk-form-small"
+          disabled
+          .selectedIndex=${live(this.selectedGenus)}
+          @change="${this._selectGenus}"
+        >
+          <option value="">-- any --</option>
+          ${options}
+        </select>
+        <input type="hidden" name="genus" value="${this.genus}" />
+      `;
+    }
     return html`
       <select
         class="uk-select uk-form-small"