Dynamic input generation based on nested object values

[BenjaminStuermer]

Hello!

I am developing an application that needs to support dynamically generated search fields for arbitrary sets of key/value pairs. Basically, we are doing search on a database of products, and in the backend the product has an "attributes" property that our marketing department populates with arbitrary key/value pairs. So maybe a product has { "color": "red", "size": "10cm" } and so on. Because the keys can appear or disappear from day to day as our data people modify our product catalog, the search inputs have to dynamically reflect what's in the data and can't be hard-coded at all.

The way these attributes are represented in our Elasticsearch data looks like this:

	"attributes": [
		{
			"key": "Color",
			"value": "black"
		},
		{
			"key": "Type",
			"value": "smartphone"
		}
	],

"attributes" has a "nested" mapping type, and "key" and "value" are both mapped as "keyword".

My goal is to render one SingleItemDropdown instance for each unique value of "attributes.key" within my result set, containing each unique value of "attributes.value" associated with that key. I have succeeded in generating my inputs by appending an aggregation in my ReactiveBase's transformRequest attribute, but I am stuck on how to populate them with their values.

Here is what my SingleItemDropdown definition looks like right now:

<SingleDropdownList
          title={attrName}
          componentId={inputId}
          key={inputId}
          dataField="attributes.value"
          nestedField="attributes"
          react={{
            and: ["search-text", "search-compare-at-price", "search-vendor"],
          }}
          defaultQuery={() => {
            const query = {
              "aggs": {
                "reactivesearch_nested": {
                  "nested": {
                    "path": "attributes"
                  },
                  "aggs": {

                    // First, filter on only attributes whose keys match the attribute that the input is to filter on
                    "attribute_keys": {
                      "terms": { 
                        "field": "attributes.key",
                        "include": attrName
                      },
                      "aggs": {

                        // Within the set of attributes matching the key we are looking for, retrieve all attributes' values
                        "attributes.value": {
                          "terms": { 
                            "field": "attributes.value",
                            "size": 100,
                            "order": {
                              "_count": "desc"
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            };

            return query;
          }}
        />

I can see in my network traffic that this query is working correctly: It retrieves the set of all unique values of "attributes.value" where "attributes.key" is the currently relevant key. So far so good.

But now I'm stuck. I can't seem to figure out a way to change this query so that the results will be rendered by the component, and even if I use the render method I seem to be out of luck. There is a rawData property that is supposed to contain the Elasticsearch result of the component's query, but with the query overridden in this way that property is empty.

I expect there must be something fundamentally wrong with my approach, as I'm new to React, Reactive Search, and Elasticsearch. I'd be very grateful if anyone could point me in the right direction. Thank you!

~ Benjamin

[BenjaminStuermer]

I seem to have found a solution, which I'll document here in case it's useful to someone else.

The problem is that the customized defaultQuery produces a result that is not structured in the way that ReactiveSearch expects. Specifically, because there is an outer filter aggregation and then an inner terms aggregation, the result that ReactiveSearch is expecting to be at response.aggregations.reactivesearch_nested["attributes.value"] is nested a level deeper, at response.aggregations.reactivesearch_nested.attribute_keys_filter.buckets[0]["attributes.value"].

My solution is to use the transformResponse hook in the ReactiveBase element to restructure the result so that it is shaped how ReactiveSearch expects it:

  transformFilteredAttributeResponse = async (response) => {
    const filteredAggResults = response.aggregations?.reactivesearch_nested?.attribute_keys_filter.buckets[0]["attributes.value"];

    if (filteredAggResults) {
      response.aggregations.reactivesearch_nested["attributes.value"] = filteredAggResults;
      delete response.aggregations.reactivesearch_nested.attribute_keys_filter;
    }

    return response;
  }