Bringing deep groups children data to the front-end#1520
Bringing deep groups children data to the front-end#1520S0nbr4ndonz wants to merge 72 commits intoOpenEnergyDashboard:developmentfrom
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
|
Good Morning Steven! I have re-requested a review from you for our fork as I have made a few changes based off of your feedback. First, I have tweaked the root GET route '/' to only return deepMeters to the users and not deepGroups, as I had made it do before. Now, the deep groups data is fetched and returned from the GET route '/deep/groups' and will only currently be used as an endpoint by the groups visual page and only accessible by admins, to decrease payload for all users. Second, I have fixed the issue in /usr/src/app/src/client/app/components/groups/EditGroupModalComponent.tsx by omitting the deepMeters and deeGroups data to fit the server schema. I have checked around the codebase and have not caught any other errors. Third, I believe I have left each file formatted correctly, but please feel free to point out any formatting issues where present! Thank you! |
huss
left a comment
huss
left a comment
There was a problem hiding this comment.
Thanks to @S0nbr4ndonz & @asherdrake for addressing my comments. This now seems fine. I'm not going to approve since I want this held until the visualization page is submitted so there is a use for this new code. It will also be a chance to test it with a real use just to be sure. Please let me know if this is an issue or you have any thoughts.
|
Note the failed tests are not a result of this PR but a general issue that is yet to be resolved. |
…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.
…nt, removed empty paragraph, and extra blank lines in VisualGroupDetailComponent
Thanks you for the feedback, @huss! I completely understand wanting to ensure the code has a practical use before merging. However, we're running into a problem: the Group Visualization Feature (#1531) specifically relies on the deepGroups property and the Redux state changes introduced in this PR to function. Without these changes, we can't fully test the visualization or verify that the data flows correctly to the frontend. Below is the result of trying to access the Group Visualization page without the deepGroups property. Would you be open to merging this first so we can finalize the feature, or would you prefer I merge the changes from this PR into the branch for #1531 so you can see them working together in a single review? |
|
@S0nbr4ndonz & @asherdrake I'm sorry that I did not make my thinking clear. I assumed that you would merge the current PR code/branch into the graphic visualization work so you could make it work. When the PR comes in for the visualization work (including this work), it can be reviewed. Once the previous PR is merged, those changes will disappear from the new PR so it would only show the newer changes so that review will only do the newer changes. Once the visualization PR is in it will make sense to merge the other PR. Does this make sense? Does it seem okay to you? |
|
Thank you for the respone, @huss. This is my understanding of the timeline. Do I have this correct? First, we merge this Deep Groups PR (#1520) into the Group Visualization PR (#1531), so #1531 can be reviewed and tested. |
|
@asherdrake Yes, you have the right idea of the plan. It is possible (likely) I will merge PR #1520 soon after PR #1531 is ready so the review will clearly know what changes are only part of the second PR. |
3 participants
Description
@asherdrake and I worked on this change together. This change touches on issue #1509 , where deep groups data must be sent to the front to be used in the solution for issue #1496, group visualization. The changes include an added property deepGroups to the frontend redux state GroupData located at src/client/app/types/redux/groups.ts, tweaking the root GET route '/' to populate the deepGroups property along with the deepMeters property, and including the newly populated deepGroups array into formatGroupForResponse located at src/server/routes/groups.js.
Fixes #1509
Type of change
Checklist
Limitations
None.