Conditionally Rendering Options In QueryBasedParameterInputs.jsx By The Filtered Out Data Results

Support Usage Support
, , , ,
1

I was curious if it’s possible to render the multiple options based on the filtered out results. Currently, the options are rendered from all the possible column options that were received from the data source’s query. I.E. you pick just one option from the first query based parameter input and the next query based parameter input has available options that none of the first query based parameter input’s selection includes in the data. What we would want to do is filter out those options in the second query based parameter input depending on the data that was filtered out using the first query based parameter input.

Since It appears most of the frontend state is defined in the component itself I’m a bit stumped on how we can pass in the data we have in our visualization as a prop to those QueryBaseParameterInput.jsx components. We were able to get the result of the filtered out data in the filterData function in Filters.jsx but couldn’t see any state changes in the filters array besides it being an empty array.

How we would want to pass the results:

  renderQueryBasedInput() {
    const { queryId, parameter, filteredResults } = this.props;

    return (
      <QueryBasedParameterInput

            // Pass filtered out results as a prop
           results={filteredResults}
      />
    );
  }

and then filter out the options in the select like:

render() {
   const { results } = this.props;

 return (
   <AntdSelect<string>

       // Antd Select filterOption prop that allows us to filter out the options
      filterOption={ (option) => results.includes(option) } 
   />
 );
}

Something else I looked into was the useQueryResultData() hook but I didn’t know how to pass the query needed from the QueryBaseParameterInput.jsx nor SelectWithVirutualScroll.tsx components like it shows in VisualizationRenderer.jsx as:

  const data = useQueryResultData(props.queryResult);

Loom video of my question

2

Update:

I found where the rendering is happening on client\app\services\parameters\QueryBasedDropdownParameter.js but when trying to reference the query results with QueryResult.getById() the query_result shows data objects but I’m unable to access it. When I reference query_result then I get an empty object. I tried parsing and stringifying it but it still returns as an empty object. I just need help referencing the table’s query results and then I can add the logic for rendering the dropdown options based on the results.

3

Long-term we intend to implement this feature ourselves. We’ll have a full-community discussion of the best way to implement it (which will likely happen from the back-end rather than in the webapp). We’ll approach this in more detail with a more well-defined process after the V10 release later this summer.

You are of course welcome to implement this however you please. But we’re unlikely to merge an implementation without discussing it more broadly with the community.