Version 3: Part II, Struggling with the Editing Hierarchy User Interface

Wednesday, January 18, 2012
You can download this version of the sample, and an improved version of the component library from here.
After redesigning QueryDimension to allow grater member inclusion functionality, I had to design a user interface to allow the user to exploit that functionality. I started by implementing a generic (non olap related) tree faces component to display the hierarchy and allow member navigation. I considered using a RichFaces or MyFaces Tomahawk tree component, but I've decided to implement a simple one to keep the project as selfcontained as possible. I'm not going to detail its design, suffice to say that it acts as <h:dataTable> but with a hierarchical data model implemented by a nested <treeItems> component, responsible of finding the children of a given data item.
My problem was providing an easy to use interface to let the user execute, at least, six actions (include or exclude for each of the basic operators: MEMBER, CHILDREN, DESCENDANTS) on every member of the hierarchy. Those were considered options:
  1. A contextual menu for each member.
    Probably the best solution but too complex, it will delay higher priority features (e.g.: filtering)
  2. Three buttons to toggle inclusion for each operator.The simplest solution to implement, but so many buttons would clutter the UI.
  3. An operator selector, global for the whole component, plus one button to toggle each member inclusion/exclusion.The chosen solution. It allows every inclusion/exclusion operation allowed by QueryHierarchy and is "window-savvy".
This is a screenshot of the resulting solution:

The color and font weight of the members label indicate if the member is actually included or not in the query hierarchy. The operator menu over the hierarchy tree allows the user to select the operator of the exclusion/inclusion and, finally, the button beside the members label allows the user to toggle inclusion/exclusion of that member using the selected operator. The image in the button tells the user if clicking the button will result in an inclusion or exclusion; and the small label for the button provides a reminder of the selected operator.