I have a page that displays a set of records. The page has filter section to search records.currently the logical operator AND is applied between all the filter conditions. Now the requirement for including the OR operation has arisen. The user suggested to add a dropdown with AND,OR options next to Value dropdown. But the problem is operator precedence. If I am going to make the page to look like the image below, the user is definitely going to find it confusing and I am also not sure how to resolve this search.  Please suggest me how I could make this UI to let the user select the operator precedence easily.
Search page design with logical operators
design;search;application design;ui;product design
This looks like a query builder to me. In code you'd use parentheses to override operator precedence but this is a GUI. Here's how others have solved it:querybuilder.js.orgHere groups are used to control precedence. Grouping is shown with indenting, boxes, and tree lines. I think this is better than a column that lets you chose parentheses.