Hierarchy Organizer

PacemHierarchyElement is the webcomponent that eases visual arrangement of hierarchical sets.

Not to be confused with TreeViews, Hierarchial Sets are characterized by a "loose structure" that allows multiple parents.

The hierarchy component shows the ancestors on the upper part of the stage and the descendants below.

Structured Datasource and Value

PacemHierarchyElement expects a datasource as a flat set of items to arrange.

The value is the actual hierarchical mapping.

The value gets merged with the datasource during the component's rendering process and the result is the visual hierarchy.
The following properties are the - opinionated - "glue" for this merge:

• valueProperty (required): defines the name of the numeric or textual property in both the datasource and the value that allows to identify the items' relations (consider it as a foreign key).
• parentsPropery (defaults to "parents"): defines the name of the array property that carries the identifiers in the value object only.
• textProperty (optional): defines the name of the textual property that labels a datasource item when leaning on the default template.
• disabledProperty (optional): defines the name of the boolean property that may disable a datasource item.

Interactivity

When not readonly, the PacemHierarchyElement permits you to:

• Link two items that aren't already in an ancestor-descendant pipe (drag the parent onto the child using the link icon).
• Remove a link between two items (middle-click on the visual binding).
• Move around the items to ease hierarchy readability (drag using the drag indicator).

You cannot link nor unlink disabled items.