Correlation query builder

This is from one of my old client job, where they wanted to have a way to visualise the database query, and relationship of those query. Because seeing query like (A AND B) OR (C AND D) and others might be confusing for some users, especially those not from the tech background or work with database before.

The idea is that they would start working with a base item. Each item would be a button, which you can type in your column name (it will auto suggest for them), and they can then choose the relationship which will grow like a tree branches. So each indentation shows how deep the nested of the query would be.

And they get to have multiple relationships for each query. All of this visualisation will also be converted into the actual query, which is shown in the output section.

The outcome of this, although it _might_ looked nice, but it can be somehow hard to use for some, to understand the concept of this builder, especially those who already used to writing the query without help. But the client proceed with this and happy with the outcome and accept the learning curve for their users.