Group Visualization Feature #1531
Conversation
… our new group visual feature will be and added "CreateVisualGroupComponent" to create the graph that will display all relationships between all meters and groups. Added the link to the "pages" dropdown linked to the group visual page.Added a new path to "RouteComponent.tsx" to properly load in components for the new page.
…eclaration for data we do not need from VisualGroupDetailComponent.tsx
…f what the graph will look like with all groups and meters from the sample data. Also added a new local translations for legend.graph.text.group to data.ts. Although the code runs and the legend renders, the actual nodes and links do not yet render.
Fixed Meters in Place
Sorted meters to minimize distance between meters that share groups
added allGroups and allMeters to useEffect dependencies, and added cl…
…s by columns. Added logic to create columns and place respective groups in the columns. Finally, set the group nodes to a fixed position, allowed them to be dragged, and added an animation for when the dragging ends and they return to their fixed position.
…minimize intercepting edges and provide a clearner visual
…hen not selected. Updated legend to match the elements and styles we have now.
…oup and ensured all subsequent references to the type group were handled and changed accordingly as to not break any logic or functionality. Additionally, translations were added to data.ts that apply to unselectedGroups and selectedGroups for the group visual legend.
…to keep working on trying to handle link length to ensure that it starts/ends from the borders of the elements instead of from the center of them for better visuals.
…e of the source element and end at the edge of the target element. Made the arrow marker more visually perceivable for a cleaner visual
…ty and the new deepGroups property. I also added the deepGroups data fetched to the formatGroupForResponse to be included with GroupData.
…p function. Not required since data is populated in arrays deepGroups and deepMeters. Additionally, added deepGroups with default value under CreateGroupModalComponent.tsx
…ET route /deep/groups to retrieve deepGroups data and to allow for the data to only be fetched when it is needed. Additionally, also omitted deepMeters and deepGroups data as they are not currently accepted by server schema.
…x caching. Updated VisualGroupDetailComponent for PR. In CreateVisualGroupComponent, I updated it for PR, added deepGroups data fetching, merged it with existing GroupData state in order to access all data effectively and much more simpler, added logic to highlight all deepGroups and deepMeters.
…nslating features to the visual. Additionally, I have added buttons tp reset to the original state of the visual and to manually zoom in and out.
…ergyDashboard#1509 deepGroups data is merged in.
huss
left a comment
huss
left a comment
There was a problem hiding this comment.
Thanks to @S0nbr4ndonz and @asherdrake for this contribution. I have done a modest first pass. Given some of the comments, I'm delaying a careful read of the graphic logic until the larger ones are addressed and I can run the code. This also allows me to get my first comments back to you quickly.
Some of the comments are larger ideas that I am happy to discuss with you if you that would help. I'm also here if anything is not clear or you need any help.
src/client/app/components/visual-group/CreateVisualGroupComponent.tsx
Outdated
Show resolved
Hide resolved
src/client/app/components/visual-group/VisualGroupDetailComponent.tsx
Outdated
Show resolved
Hide resolved
src/client/app/components/visual-group/VisualGroupDetailComponent.tsx
Outdated
Show resolved
Hide resolved
|
|
||
| /*Create color schema for meter and group props*/ | ||
| const allNodeTypes: AllNodeType[] = ['meter', 'childMeter', 'deepMeter', 'unselectedGroup', 'selectedGroup', 'childGroup', 'deepGroup']; | ||
| const colors = ['#000000', '#DAE8FC', '#D5E8D4', '#b4331fff', '#FFF2CC', '#DAE8FC', '#D5E8D4']; |
There was a problem hiding this comment.
Two thoughts. First, how do these relate to the ones used in unit? Second, OED has standard colors for meter/group items in graphics. Should we think about reusing them here either for overall colors or by the id? This is a new idea not in the other graphic.
There was a problem hiding this comment.
Hi Steven!
Asher and I are having some trouble understanding how the color style of the nodes from the group visual are supposed to relate to the ones used in the unit visual. Did you prefer for the group visual to somewhat follow the same color scheme node/vertex-wise as the unit visual? Asher and I chose the color scheme as way to help users differentiate between the different type of nodes and what their relationship was to the selected node.
In response to your second thought, Asher and I were not aware of the standard colors for meter and groups. We can definitely implement those colors if preferred. If there is only one standard color for group/meter nodes, then we can try using different shades of those colors to signify the current state of the node and the relationship to the selected node!
There was a problem hiding this comment.
I'm open to ideas here. My thought was that the color of a meter/group in a graphic is set by OED and always the same. So, could this in some way be used here. It does not necessarily mean replacing your current color scheme and could involve augmenting it. I have not thought about it sometimes the text color is used so the box boarders stay the same. Again, think about it and come up with ideas. It is also okay to say you don't think this is viable or a good idea.
As for the first point. I am thinking more and more about how to standardize what OED does. In this regard, is there a relationship between any colors in the other visualization and the new one? If so, could they then be placed in a standard location for reuse so it is clear they are the same and will remain that way? If not, then it does not have to be looked into.
There was a problem hiding this comment.
We understand better now!
We can definitely delve a little more into this and check out if we can implement the color for group/meters set by OED!
Can we get the specific block of code/documentation where these colors are listed to make sure we have the exact right colors/shades?
The only relationship between the color/scheme of the unit visual and the group visual is that both visuals use the blue color/shade to represent meters. Other than that, none of the other colors share the same relationship between both visuals in a meaningful way.
There was a problem hiding this comment.
Take a look at src/client/app/utils/getGraphColor.ts which is used in the graphic pages to get the item color. Let me know if you have any questions.
src/client/app/components/visual-group/CreateVisualGroupComponent.tsx
Outdated
Show resolved
Hide resolved
src/client/app/components/visual-group/CreateVisualGroupComponent.tsx
Outdated
Show resolved
Hide resolved
|
|
||
| // Error check for cycles | ||
| if (result.length !== groups.length) { | ||
| throw new Error('Cycle detected in group hierarchy'); |
There was a problem hiding this comment.
What is the desired behavior from the user perspective. I'm wondering what happens with this error. Often OED uses a failure popup.
| } | ||
| }); | ||
|
|
||
| while (queue.length > 0) { |
There was a problem hiding this comment.
I think more commenting would help me.
There was a problem hiding this comment.
Noted!
I will go through this function once again and ensure that it is easily readable!
…nt, removed empty paragraph, and extra blank lines in VisualGroupDetailComponent
| legendEntry.append('text') | ||
| .attr('x', 40) // Position the text to the right of the circle | ||
| .attr('y', 20) // Align the text vertically with the circle | ||
| .style('fill', '#000') | ||
| .style('font-size', '12px') | ||
| .style('alignment-middle', 'middle') | ||
| /* internationalizing color legend text */ | ||
| .text(intl.formatMessage({ id: `legend.graph.text.${item}` })); |
There was a problem hiding this comment.
@huss The legend translation keys are used here.
|
@S0nbr4ndonz and @asherdrake: I wanted to touch base on the status of this PR. I had the impression that more work was needed to address some comments but let me know if I have this wrong. Also, let me know if you need anything from me. |
Hello, Our college semesters have started so our progress has slowed down, but we are still working to address the comments you have made. |
Thanks for letting OED know and it is not a problem. It will be a while before the next formal release that would be nice to have this work. Given this, there is some time to finish it up so stay on top of your school work. Please let us know if you need anything. |
3 participants
Description
@asherdrake and I worked on this change together. This PR is in response to issue #1496. In order to assist users in better understanding the relationships between existing meters and groups in their database, a group visual was proposed. This group visual displays the relationships between all groups and meters in a fashion that is interactive, intuitive, and easy to understand.
Features:
As proposed, we have formatted all meter nodes and group nodes into their separate columns based on their depth. Giving the visual a structure that is easy for users to follow along with and better understand how each group or meter relates to another.
All meter and group nodes are sorted out in order to minimize intersecting edges and cluttering, for the purpose of generating a clean visual where users are easily able to navigate it.
Upon the selection of a group, all direct and deep children are concurrently highlighted, along with the selected group, to help users visually distinguish and understand the relationships that the selected group holds.
Users can zoom in/out and pan the visual to focus on specific groups or meters
Type of change
(Check the ones that apply by placing an "x" instead of the space in the [ ] so it becomes [x])
Checklist
Limitations
Features that Asher and I have talked about, but have not been able to implement are:
Allowing for a fixed x-coordinate position( to separate groups into columns), but allow for D3.js library to set it's own y-coordinate for the groups.
Column Layout
Currently, group nodes are sorted into fixed columns and placed from top to bottom. While this works well for columns with many nodes, columns with few nodes can appear sparse. For example, in the dummy data provided by OED, the second column containing the group Sin Amp 1 + 2 + (1+2) + (2+3) only has two nodes at the top while their children are at the bottom of the previous column, which can cause intersecting edges and reduce visual clarity.
Potential Improvement: Allowing D3.js to set y-coordinates using force simulation could position nodes closer to their children while keeping x-coordinates fixed. The simulation could either dynamically adjust positions continuously or stabilize after a few seconds, then fix all node positions. This would produce a cleaner and more readable layout, especially for columns with fewer nodes.
Currently, the buttons to zoom in/out and reset are in the default style. Although functionality works, the design is very bland and does not match with the rest of the page.
Potential Improvement: Change the styles of the buttons to be more modern/match the styling of the rest of the app. Potentially move the buttons to the either bottom corner of the visual.