LabelGroupsFactory

Description

The LabelGroupsFactory is a UI component factory which constructs the label groups with each containing labels that belong to the same group. It uses another component called LabelGroup to manage user interactions and rendering of each label group.

Preview of label groups

LabelGroup

Events published

• group-label/unselect-item - published when a label is selected from a LabelGroup.
• group-label/select-item - published when a label is deselected from a LabelGroup.

Events subscribed

• selected-label/unselect-item/{groupID} - reacts by deselecting the label within the LabelGroup.
• selected-label/select-item/{groupID} - reacts by selecting the label within the LabelGroup.
• side-bar-ui/update-data - reacts by destroying the LabelGroup because the data has been updated.

Overview

• You can add items to the LabelGroup component using addItem(item) function for the creation of the label group at a later time.
• The create() functions constructs and returns a collapsed label group container and an expanded label group container with all the required event handlers attached.
• The createCollapsedContainer() function constructs the collapsed label group container without any event handlers attached. In order to attach click event handlers to the caret found in the collapsed label group container, call the attachListenerToCollapsedContainerCaret() function.
• The createExpandedContainer() function constructs the expanded label group container with click listeners attached to the label elements found within the expanded label group container. In order to attach click event handlers to the caret found in the expanded label group container, call the attachListenerToExpandedContainerCaret() function.
• Each label within the expanded label group container is created from the createLabel(item) function. The click event handlers are attached to each label element by calling the attachListenerToLabel(label) function.
• Label selection is toggled using the toggleLabelSelection(label) function. After selecting a label from a LabelGroup, an event will be published to the SelectedLabel component which will handle any conflicts due to selection of labels from exclusive groups.
• To determine if a label in LabelGroup is selected or not, you can call the isLabelSelected(label) function.
• The html representation of an collapsed label group is as follows:

<div class="collapsed-group-container ui raised segment transition hidden" data-group-id="d9b4ada9-70e2-593f-a9d1-eebde4d8f413" data-group-type="0">...</div>

• The html representation of an expanded label group is as follows:

<div class="group-container ui raised segment" data-group-id="265253e8-a7ec-550c-a1db-85084ce11def" data-group-type="0">...</div>

Overview of LabelGroupsFactory

• Use create() function to construct a group container containing all LabelGroup sorted in the order of dot, dashed, non-grouped and then alphabetically.
• Sorting of LabelGroup is performed within the createLabelGroupsList(storage, instanceID) function.