Group visualization

[huss]

Is your feature request related to a problem? Please describe.

While OED has an admin group page, seeing the relationship of all groups is not easy.

Describe the solution you'd like

A graphic showing the meters and groups in every group would help. This is described in the Group Visualization design doc.

Describe alternatives you've considered

None except not doing this.

Additional context

None.

[S0nbr4ndonz]

I'm working on this

[asherdrake]

Hello, I am working with @S0nbr4ndonz on this feature.

We have been reviewing the current Units and Conversions Graphic mentioned in the design documentation. We noticed it uses D3’s forceSimulation for positioning and interactivity. Inspired by this and the other requirements in the design doc, we've created an initial design proposal for the Group Visualization that leverages a similar visual layout.

Here's our proposed visualization design:

• Meters are represented by fixed-position rectangles placed on the left side. These are not draggable or selectable, so they can always be referred to in the same place.

• Groups are represented by circles, positioned dynamically with D3’s forceSimulation. These circles are draggable and selectable, similar to the Units and Conversions Graphic.

• Selection Interaction:

  • Clicking a group selects it, changing its color to yellow/gold and bolding its border.
  • All directly connected meters, groups, and links also have their borders bolded.
  • Non-selected meters, groups, and links display dotted borders to visually indicate exclusion.
  • Direct children (meters/groups directly connected to the selected group) are highlighted in blue.
  • Deeper children (meters/groups indirectly connected through nested groups) are highlighted in orange.

• Layout:

  • Groups are organized into columns based on nesting depth:

    • Column 1 contains groups directly connected only to meters.
    • Column 2 contains groups that include Column 1 groups.
    • Column 3 contains groups that include Column 2 groups
    • Column 4 (and beyond) continues this nesting hierarchy.

Here is what it may look like when nothing is selected:

Here are examples with various selections:

While the original design documentation describes two separate visualizations, one showing direct child groups/meters and another showing all recursively included meters, we believe combining these into a single interactive graphic could work, using the blue and orange color distinctions.

We'd appreciate feedback on:

1. The proposed interactivity and combined visualization approach. Is this aligned with the intended user experience and functionality?
2. Clarification on the distinction between the two original graphics described in the documentation. Specifically, the provided example graphic already appears to represent both direct and recursive (deep) relationships, so we are struggling to understand why two different graphics are necessary, and what they would look like.
3. Any other details or requirements that we have missed.

Thanks for any insights and feedback you can provide!

[huss]

Thanks to @asherdrake and @S0nbr4ndonz for working on this issue and doing thoughtful thinking about it. I find the proposal very interesting and I agree it is better than the one in the design document. Here are some thoughts/questions:

• If a group is directly connected to a meter it is in column 1. If that same group is also included in another group it would normally be in column 2. Does this mean that a group can show up more than once? I hope I have this right. If so, I am wondering about doing this from the user perspective and alternatives. Related is what happens when a user drags a group in terms of the column location?
• I like the fixed items on the left. I was thinking about the fact that this graphic is focused on groups. Thus, is there a way make it easier to find a given group. I thought about putting them on the left and the meters on the right but I could not convince myself that would work. Another idea was to have a list of groups on the side in alphabetical order where clicking that would also do the highlighting. Any thoughts/ideas are welcome.
• I personally find the selected yellow/gold and orange a little harder to easily tell apart. Maybe changing one would help some more; either the circle and/or its border.

The proposed interactivity and combined visualization approach. Is this aligned with the intended user experience and functionality?

Yes. Since all meters in a group that is clicked are highlighted in some color it is easy to see the deep meters. The others are shown (but harder to keep track of) but that was true in the proposed graphic. Thus, I think your idea seems better overall.

Clarification on the distinction between the two original graphics described in the documentation. Specifically, the provided example graphic already appears to represent both direct and recursive (deep) relationships, so we are struggling to understand why two different graphics are necessary, and what they would look like.

In the figure, if a group is nested then the user had to do the recursive determination of the deep meters. The deep meters are important for understanding a group. For example, "Campus All" is only directly connected to two meters. One has to go through each connected group to get all the meters. That can take time and is error prone. As noted above, your proposed graphic shows this by highlighting when a group is selected so it does the same idea with one graphic.

Note the units/conversion graphic means traversing the graph to get all the connected units to one unit as shown in the lower graphic on that page. This is a related problem.

Any other details or requirements that we have missed.

See above. I've tried to think about this. Often more ideas come forward once I can play with it but I think this is good.

Finally, if this idea is done then I'm thinking about how the unit/conversion graphic could be updated to use these ideas. The ability to click a unit to see all connected units would be nice. This isn't something you have to do (unless you want to) but I'd be happy to hear ideas.

[S0nbr4ndonz]

Thank you for your fast response and approval of our proposal!

If a group is directly connected to a meter it is in column 1. If that same group is also included in another group it would normally be in column 2. Does this mean that a group can show up more than once? I hope I have this right. If so, I am wondering about doing this from the user perspective and alternatives. Related is what happens when a user drags a group in terms of the column location?

No, each group would only show up once. Column 1 is reserved for groups that only have meters as children. Any group that has another group as a child will automatically be column 2 or above, depending on the nesting hierarchy.

Generally, all groups will be placed in the column to the right of its rightmost child.

Example: Group A has one direct Meter child, and two direct Group children: Group B, which is in Column 1, and Group C, which is in Column 3. Since Group A's rightmost child is Group C in Column 3, it will be placed in Column 4

All meters are in Column 0, as leaf nodes, so for groups with only meters, it will be placed in column 1, one column to the right of column 0.

I like the fixed items on the left. I was thinking about the fact that this graphic is focused on groups. Thus, is there a way make it easier to find a given group. I thought about putting them on the left and the meters on the right but I could not convince myself that would work. Another idea was to have a list of groups on the side in alphabetical order where clicking that would also do the highlighting. Any thoughts/ideas are welcome.

`
We agree that the best visual placement is left-to-right and that there should be an easier way to find a given group. An early idea is to have a dropdown menu that lists all groups in alphabetical order. Later on in development, we can see if there are any better ways to distinguish between what groups a user specifically wants through filters and specific details.

I personally find the selected yellow/gold and orange a little harder to easily tell apart. Maybe changing one would help some more; either the circle and/or its border.

Noted, @asherdrake and I will brainstorm any other colors we can use to distinguish between the selected group and inherited groups/meters.

If there's anything else we should focus on or further clarify with our proposal, please feel free to respond with them!!

[huss]

Thank you for the additional input.

Columns

Sorry but I still cannot quite see how the columns work. For example, Group A has Group B as a direct child. Group C has Group B as a direct child. Now Group P has Group C as a direct child. It seems C is a direct and indirect child. In the general case, groups are a directed, acyclic graph. Given this I'm unclear how the columns will work.

Also, what happens if a group is dragged into another column?

In the bigger picture, do you think a typical admin who is not a computer person will understand the columns? I don't know but OED tries to create systems that are clear to these types of people.

Selecting a group

A drop down menu is okay with me. Maybe make it similar to the group selection on the graphing pages so it can be incrementally searched. It is different since only one item can be selected at a time. Note PR #1498 is about to fuse the meter and group menus for graphics. I don't think we want to do that here but it is something to think about.

[S0nbr4ndonz]

Sorry but I still cannot quite see how the columns work. For example, Group A has Group B as a direct child. Group C has Group B as a direct child. Now Group P has Group C as a direct child. It seems C is a direct and indirect child. In the general case, groups are a directed, acyclic graph. Given this I'm unclear how the columns will work.

With your example in mind, assuming Group B only has Meter 1 as a child:

Meter 1 is in Column 0, as it's a meter and cannot inherit from other groups.

Group B is in Column 1, as it only contains meters (inherited from Column 0). The rightmost column is always assigned based on the highest column placement of its children, so Group B moves to Column 1.

Group C and Group A both inherit from Group B. Since the highest column placement among their children is Column 1 (Group B's column), both Group C and Group A will be placed in Column 2.

If Group A also inherits Meter 1, it would still be in Column 2, as the highest column placement among its children is Column 1 (Group B).

Group P inherits from Group C, which is in Column 2, so Group P will be placed in Column 3.

Even if Group P also inherits Group B and Meter 1, it would still be placed in Column 3 since its highest child is Group C at Column 2.

It seems C is a direct and indirect child. In the general case, groups are a directed, acyclic graph.

I can confirm that the structure will indeed follow those properties.

The relationships between all groups and meters are directed; each group/meter points to its parent group. The directions are also one way, children point to parent, no parent ever points to children. Therefore, no acyclic graph can happen in this manner.

Moreover, the hierarchical structure we've set up prevents any cycles. A group cannot directly or indirectly inherit from it's children thanks to the hierarchy being based on the child of the group with the highest column placement/depth. This ensures that there will be no loops in the graph.

By enforcing this one-way inheritance and validating relationships, we ensure the graph will remain both directed and acyclic, as required.

Also, what happens if a group is dragged into another column?

Asher and I hadn’t considered this scenario. To avoid confusion, it might be best to restrict group movement to horizontal directions only. This would prevent groups from being misplaced and ensure the structure remains intact, making it easier for users to follow the hierarchy.

[huss]

Thanks for the clarification and helping me understand. I think it is fine for you to implement these ideas. Then we can play with it to see how it looks. I'm excited to see this in action and expect it to work very well.