Implement new design for Scopelist component
What is a hierarchical list? (for the functional documentation)
A hierarchical list is composed of parent items and child items. A child item can be a parent of other child items.
- Parent item A
- Item A.1
- Item A.2
- Item A.3 as sub parent
- Item A.3.1
- Item A.3.2 as sub parent
- Item A.3.2.1
- Item A.3.2.2
- Item A.3.2.3
- Item A.3.2.4
- Item A.4
- Item B (which is not a parent)
- Parent item C
- Item C.1
- Item C.2
- ...
Simple hierarchies: A child can only have one parent. This is the case when using Codelists. Complex hierarchies: A child can have several parents, and could thus be listed several times in the same hierarchy. This is the case when using e.g. CategorySchemes (or maybe later HierarchicalCodelists).
What is a scopelist? (for the functional documentation)
A scopelist is a way of displaying a hierarchical list where only a sub-part of the hierarchy is displayed at any time, more precisely only the root level items or only the direct children of a parent are displayed. The scopelist display usually starts by displaying the root level items. If some of the root parents have children, then by clicking on the arrow right next to a root parent label, the children of this root parent will be displayed instead. The same behaviour is applied if some children also have a sub-children list.
Note that by essence, a scopelist doesn't allow displaying the entire hierarchy list at once, unless all items are at the root level.
How does a scopelist filter behave?
When selecting a current item (ex. European Union (28 countries)), it is shown with a (light blue) background in the scopelist and it is added to the Used filters
:
Its children are displayed only if the user clicks on the arrow placed to the right of the item label.
Note that this arrow can be clicked even if the item has not been previously selected.
Once the arrow is clicked, the list of its children appears. Below is displayed the children list of the European Union (28 countries):
Above this list of children, the parent item(s) appear(s) with a blue background if previously selected, or without background if not selected, and dotted underlined in a distinct zone, separated by a thick light grey line, named "hierarchy branch breadcrumb". For each parent item, there is a tooltip "Back to this level" which means that by clicking on the parent item, the user goes back to the corresponding previous parent level.
Note: The presence of a tooltip for an item is always indicated by a dotted underline.