nimble-query-builder Component

[mollykreis]

😯 Problem to Solve

SLE is currently using the JQX query builder and Soliton is using a query builder they made themselves. We need to gather requirements from both usages.

💁 Proposed Solution

• FAST component:
• Visual Design:

## 📋 Tasks
- [ ] nimble-query-builder design
- [ ] nimble-query-builder spec
- [ ] nimble-query-builder custom element
- [ ] nimble-query-builder unit tests
- [ ] nimble-query-builder Storybook tests
- [ ] nimble-query-builder Storybook docs
- [ ] nimble-query-builder Angular wrapper
- [ ] Add to Angular example app
- [ ] Update Component Status table in README

[mollykreis]

Rough prototype of one potential solution based on this open source query builder from an innovation day: https://github.com/ni/nimble/tree/query-builder-prototype

[jattasNI]

In a chat with me, the Wafer Classification team (Betty, Ehud) asked for the query builder to offer a row type of "enum that allows arbitrary string inputs" (behavior similar to what nimble-combobox offers). The smart query builder offers only enums or strings but not both together. It also offers a way for clients to provide arbitrary editors for extension fields, but that is a lot of extra work for this small feature.

We want to be able to see a drop down list of all available values and select manually value/s from the list and in addition to type a string and retrieve all values that contain that string (contained filters) without selecting a value . In SL we will need to support the following operators for the same filter: Equal/does not equal, Include/Does not include.

[mollykreis]

Most usages of the query builder within SLE is for filtering grids, but it is used in other scenarios as well, such as when editing a routine:

[atmgrifter00]

Here are some behaviors we should ensure are present in the nimble query builder (copied from this AzDO Bug):

• When all fields have valid value the OK button should be enabled even if a field in the filter-builder has focus
• User should be able to tab between various interactive elements in query builder in the order they appear.

[nate-ni]

Design issue at #843

[jattasNI]

There's a discussion on Teams about queries with very long values in enum selectors. In the existing query builder, the dropdown grows its width to fit the longest item which causes scrollbars on the containing slideout. It would be nice if the Nimble component supported this better . Here are some options but we should probably get UX input:

1. max width on the dropdown and truncate with an ellipsis. Preferably with a tooltip on hover to show the full value.
2. max width and horizontal scrollbar on the dropdown (that's what's currently being proposed in the linked discussion)
3. max width and wrap text
4. totally different UX like shortening the text or choosing a different component that reflects the contents of the text differently (maybe something hierarchical like a tree?)

(This might end up being a request for the select or combobox but tracking it here for now)

[jattasNI]

Teams post from Leslie that collects some previous research and design specs.

This includes the filter bar page in the main Nimble XD doc which includes an interactive spec of an editable filter bar (click on the filter bar to populate it).

[jattasNI]

In the UI WG meeting today, a team presented a use case where the first part of the condition needs to be a select control with items presented in groups. This doesn't appear to be possible with our current query builder, but would be good to support in the new one.

[jattasNI]

There's a discussion thread on an SLE PR about ways for the query builder to dynamically populate the list of properties to select from based on an HTTP request. The current proposal is to hope that the request completes quickly so that users don't notice the list of items changing. It would be great if the Nimble query builder supported this in a more first class way. For example:

1. a place to show a spinner to indicate options are still being fetched
2. a combobox experience that allows the user to type an arbitrary value at any time but does more helpful autocomplete once the options have been fetched

This use case would also benefit from the grouped items feature described above to separate built-in properties from custom properties.

[Update] Similar (possibly the same) use case came up in this Teams thread where we discussed possible designs for that workflow.

[jattasNI]

Some new requirements for querying by date ranges from this SLE asset history HLD. They still haven't decided what UX they want but it might end up being something like a control for picking start date and another for a duration. We should either support date ranges natively or allow extension for clients to provide a date range picker.

[jattasNI]

SLE HLD discussion thread about inputs for numeric clauses having a configurable number of decimal digits. If the query is filtering an integer field we shouldn't let the user enter fractional digits. And there may be use cases for showing a small number of decimal digits.

[jattasNI]

We briefly discussed query builder with SLE Systems and Assets teams. They mentioned some (hopefully well-known) requirements for the output format of the configured query:

1. need a way to convert it to LINQ since that is what services use today
2. also need a more abstract representation because there are longer term visions to move away from LINQ for some services. Hopefully there's a standard / common query representation we can rely on and not invent something ourselves.