Add color to Advanced Search query blocks to indicate nesting levels.

[roamye]

Problem Description: The current advanced search interface does not provide a clear indication of the different levels within a search query. Which causes users to get lost/overwhelmed within the search as there are many vertical and horizontal patterns.

Expected Behavior/Solution: Add color indicators to differentiate which queries are a part of - or not a part of a certain level within the overall query.

Requirements:

• Each use of a Multiple Field such as have all of, have none of, have any of will act as the head level with all single fields as their sub/children level.
• Alternating colors will be used as the background for each new and existing Multiple Fields as well as the sub/children fields within the multiple field.
• Colors will comply with accessibility standards.

Needed for promotion: If an item on the list is not needed, it should be crossed off but not removed.

• [ ] Wireframe/Mockup - Mike
• [ ] Committee discussions - Sarah
• [ ] Feasibility/Team discussion - Sarah
• [ ] Backend requirements - TBD
• [ ] Frontend requirements- TBD
• [ ] Are new regression tests required for QA - Amy
• [ ] Questions
• List of questions for discussions. Answers should be documented within the issue.

UAT/LUX Examples:

• Any Advanced Search example:
  • https://lux-front-tst.collections.yale.edu/view/results/objects?openSearch=false&q=%7B%22AND%22%3A%5B%7B%22OR%22%3A%5B%7B%22producedBy%22%3A%7B%22id%22%3A%22https%3A%2F%2Flux.collections.yale.edu%2Fdata%2Fperson%2F34f4eec7-7a03-49c8-b1be-976c2f6ba6ba%22%7D%7D%2C%7B%22encounteredBy%22%3A%7B%22id%22%3A%22https%3A%2F%2Flux.collections.yale.edu%2Fdata%2Fperson%2F34f4eec7-7a03-49c8-b1be-976c2f6ba6ba%22%7D%7D%2C%7B%22productionInfluencedBy%22%3A%7B%22id%22%3A%22https%3A%2F%2Flux.collections.yale.edu%2Fdata%2Fperson%2F34f4eec7-7a03-49c8-b1be-976c2f6ba6ba%22%7D%7D%5D%7D%5D%7D

Dependencies/Blocks: N/A

Related Github Issues: N/A

Related links:

• Bugherd: https://www.bugherd.com/projects/284041/tasks/2695
• Resource: https://sparnatural.eu/

Wireframe/Mockup: Place wireframe/mockup for the proposed solution at end of ticket.

[roamye]

Possible ideas include:

• have the blocks highlighted to a certain color depending on the nesting level.
• add a spacing between the multiple fields and single fields within each container. This way you can see the container of which single fields live within the multiple fields.

Next steps: @kamerynB to create a mockup and bring to IT team meeting. (possibly 12/13?)