Hierarchy Component

Sometimes, data is organized in a tree-like structure, where items have parent-child relationships. A familiar example is this documentation, where pages are nested under parent pages. Navigating such data is most intuitive with a file-tree format, which allows you to expand, collapse, and select parents to view their children.

The Hierarchy component requires data in a specific format to function correctly. Data needs to be structured in a tree-like way.

Defining the Hierarchy Component

• HierarchyNodeClasses: Like in other components, this field accepts tailwind classes (or other classes) to customize the look of the component. Currently, these classes only apply to the selected element.
• InputVarHierarchy: Accepts an input variable that filters the results of the hierarchy. This input var is applied over the default filter (more below).
• OutputVarHierarchy: This variable stores the selected item when the user clicks on it in the dashboard. By default, it will contain the object returned by Elasticsearch.
• ParentFieldName: Takes the name of the field in the definition that points to the instance's parent.
• SortFieldName: Defines the sorting order for the elements displayed by the component. Accepts the field name used for sorting.
• DefinitionNameHierarchy: The name of the definition to display. Must adhere to the previously stated restriction.
• FilterHierarchy: Specifies a query to filter the elements.
• DisplayFieldHierarchy: Defines which field to use in the display of each entry.
• InstanceFieldNameHierarchy: You can specify a particular field to store in the output variable, which is useful when this variable is used as input for another component. If not specified, the default behavior is to store the entire object returned from Elasticsearch in the variable.

DANGER

Currently, the FilterHierarchy query must be capable of returning the whole path. For example, if we have Instance A and instance B where A is the parent of B. If the query only returns B, then neither A nor B will appear. The same does not apply to the InputVar value. If the input var filters only B, then both A and B will appear.

Example

In the dashboard below, created using this site's documentation, a file-tree navigation is displayed on the left, while a simple text display is on the right. The navigation is managed by a Hierarchy component, aptly named for its ability to handle hierarchical data structures.

Interacting with the selected entry

To get the display of text, we just need to pass the output var into a markdown component for it to render: