Aprender CoB

# Hierarchy Component

Sometimes, data takes on a tree-like structured, where instances have a parent and children. An example of this type of structure is this very documentation. Pages have parents and children. The best way to navigate this kind of data is through what is usually called a file-tree, where we can open/close/select parents to see and select their children. Take the dashboard below, created with the documentation in this site. On the left we have a file-tree like navigaton and on the right a simple display of text. The component that handles the nagivation part is a Hierarchy component, named after the hierarchical structure its data takes.

WARNING

The Hierarchy component is fed by a specific kind of data. To use this component, a Definition with a tree-like structure is necessary. A "parent" field is needed, this field should be a $ref to its own Definition. The name of the field can be whatever you want.

# Component structure

  • 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. The variable named here is the one that where the selected element will be placed when the user clicks on it in the dashboard. By default, it places the object returned from Elastic Search. In this case, when the user clicks an element, it will be placed in the variable selected_content.
  • ParentFieldName. Takes the name of the field in the definition that points to the instance's parent. This documentation uses the field Parent to refer to its parent contents.
  • SortFieldName. Specifies how to sort the different elements when the component is displayed. It receives the name of the field to sort through. Here, we use the descriptor of the content.
  • DefinitionNameHierarchy. The name of the definition to display. Must adhere to the previously stated restriction.
  • FilterHierarchy. Specifies a query to filter the elements shown. In this case, we only want to display the elements beneath .cob-platform/ and so we use the query .cob-platform*
  • DisplayFieldHierarchy. Defines which field to use in the display of each instance. By using Descriptor we're telling it to show each element with its descriptior.
  • InstanceFieldNameHierarchy. By default (if this field is empty) the value that is put into the output var is the whole object returned from Elastic Search. We can instead choose a specific field to put into the variable. Useful when this variable is used as an input variable for another component.

WARNING

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.

# Bonus: Text Display

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

← Dashboard Context →