#2794 - See GenMapper On Every Group Record #2799
Conversation
kodinkat
commented
Nov 25, 2025
kodinkat
commented
- fixes: On every group, see genmapper #2794
- Introduced a new tile for displaying a generational map in the groups section.
- Added JavaScript for fetching and rendering the generational map.
- Updated PHP files to include hooks and display logic for the new tile.
- Enhanced the existing tile display logic to accommodate the new 'genmap' tile.
- Enqueued necessary scripts and styles for the generational map functionality.
- Implemented a new footer action for group records to display metrics modals.
- Enhanced JavaScript to manage node selection and display detailed information for selected nodes in the generational map.
- Added CSS for visual indication of selected nodes.
- Updated PHP to ensure correct naming for groups in the generated map.
- Introduced modal functionality for adding child groups with appropriate UI elements and event handling.
|
|
Any chance the genmap can put generations vertically instead of horizontally? I think it could just be a half-width tile instead of a full-width tile then. Right now it's taking up a lot of screen real estate that is a little too much. Maybe it could be zoomed out a bit then to fit more. If 3 generations or less, zoom out to fit all. Otherwise zoom out to 3 generations? Not sure how that will work if there are lots of siblings, but a more vertical layout will translate better to mobile as well. I know the text will be small and harder to read, but I think the point of the genmap is for the visual, high-level overview, so I think it's best to start at that high-level and let the user zoom in if they want/need. I like that you can inspect each and add/open from the map. Could those actions be within a pop-up when you click on one of the groups? Having the group details in a pop-up would keep the user from having to scroll down for the details - it would show up right where they clicked. Can I see some screenshots of how this looks on mobile? I think we need to make sure we consider that in all new additions we work on. |
|
The horizontal genmap helps a lot if there are many siblings. We've found the horizontal means you can have more text and the whole name gets displayed. -- |
|
If we add in a pop-up for viewing details, we can more easily truncate/ellipsize the names so that they don't take up so much width and the full name is visible in the pop-up. There's also some horizontal padding in each that could be removed. What about adding a rotate control that could switch between horizontal vs vertical layout? Would that be complicated? That could give versatility based on the context of many siblings vs generations. Below is how GAPP does it in their app. They also do the whole church circle thing, which is another nice visualization but is probably a different task. But what you can see is that the font size for each group is quite small and then truncated if too long (I made a group name >100 characters for testing). I just added more siblings in the first generation and it will zoom out to fit them all, even though the text becomes unreadably small. Since you can zoom in manually, I don't think that's really a problem. 
|
- Added a new action to render the generational map after tiles in the single template.
- Updated the JavaScript to support layout toggling between vertical and horizontal views, saving user preferences in local storage.
- Improved the rendering logic to prevent double rendering of the generational map.
- Enhanced CSS for better responsiveness and visual clarity in both layouts.
- Introduced a modal for displaying detailed information about selected nodes in the generational map.
|
@corsacca @cairocoder01 - see latest updates and let me know how they hold up for you.. :) 
|
|
Hmm, this definitely addressed my feedback, but it's not quite scratching the itch that I was feeling. I think that might be because our gen map feels a bit blocky compared to the nice flow of the official GenMapper. Also, there doesn't seem to be a way to zoom out to see the whole diagram - you can only scroll around - so you never get to see the high-level impact of this group and their generational growth. Things that I think GenMapper does really well, particularly the implementation in the GAPP app:
That said, one of the things I think is a drawback of their implementation is:
I glanced a little at the library we're using for the tree mapping, and I think maybe it's worth looking at something a little different. The standard visualization library I found was D3.js. It has a tree visual as well as other hierarchies and was the base library for the old, out-dated genmapper js library. I think we could trial a new implementation in this use case and decide if it gets ported over to the current metrics implementation later. What I'd like to see in our own generational map for group mapping:
Some references I found:
I know this is a significant amount of scope creep, but I think this gets at the heart of the better visualization that I think would help the product serve its users better. I think the current generational map will just add extra bulk in what already feels heavy to digest. I would hope that rolling a bit of our own on a versatile platform like D3 would give us greater adaptability going forward. |
This implements a generational map feature for group records that addresses the concerns raised in PR #2799: 1. Compact ancestry view in the tile showing parent -> current -> children hierarchy with clickable links to navigate between groups 2. Modal-based full tree visualization that: - Uses the existing jquery.orgchart library - Enables zoom and pan functionality (was disabled before) - Has compact node styling for better overview - Shows vertical/horizontal layout toggle (saved in localStorage) - Focuses on the current group in the tree - Displays node details when clicking on any group 3. Reuses the existing genmap.php backend API which already handles: - Permissions and access control - Hierarchical data building - Archived record filtering - Infinite loop detection Key improvements over the original PR approach: - Uses modal instead of inline display (saves page real estate) - Enables zoom/pan for better navigation of large trees - More compact nodes for better high-level overview - Clean integration with existing architecture
…ools-theme into 2794-see-genmapper-on-every-group
- Introduced D3.js for the new generational map visualization, replacing the legacy jQuery OrgChart implementation.
- Added support for group type icons and status colors in the D3 visualization.
- Implemented layout toggle functionality for responsive design.
- Updated SQL queries to include group_type field for groups post type.
- Added CSS styles for D3.js visualization and popover interactions.
This commit marks a significant step towards modernizing the visualization component and improving user experience.
…ype field
- Added a comment to ignore PHPCS warning for prepared SQL fragments related to group_type.
- Ensured that the SQL query remains secure while incorporating the necessary group_type logic.
- Removed redundant PHPCS disable comment and ensured consistent code style.
- Maintained secure handling of SQL queries while preparing for group type logic.
|
@cairocoder01 @corsacca see latest flow; which now makes use of the D3.js library; along with the following updates:
|
|
Nice work @kodinkat! Here are some Notes/questions. These aren't decisions yet, just things we need to connect on as a group.
@cairocoder01 your thoughts or more questions welcome |
Overall, I really love the direction this is going! |
|
Thanks @cairocoder01
Zoom. I've seen this on another project: scroll could be disabled until the user clicks into the canvas. This reduces a bit of the frustration when trying to scroll past the GenMapper, and still keeps the scroll functionality to go in and out. Connecting to an existing group. Would this be from clicking on a record with a separate button? or would the add model have the option to connect to an existing group? More discussion needed on group health icons and displaying the group type. What happens with custom group health option and custom group types? |
|
For zoom, I like that idea. I think what I've seen like that would show an overlay on hover that has a magnify icon with text staying click to zoom. I think that's a good idea. |
|
Connecting to existing group: use a connection field separate from adding new, with something like a horizontal role between them that indicates to add existing OR create new record. My recipe app does something like that when adding a new recipe: |
…ools-theme into 2794-see-genmapper-on-every-group
…dal support
- Updated the genmap section to support responsive layouts with new CSS classes for better display on different screen sizes.
- Added a maximize button to open the generational map in a fullscreen modal, improving user experience.
- Implemented logic to determine graph orientation based on section classes, allowing for dynamic rendering of the graph layout.
- Enhanced D3 rendering functions to accommodate both vertical and horizontal layouts, ensuring proper visualization based on the current context.
- Introduced collapse indicators for nodes with children, improving interactivity within the graph.
- Refactored existing JavaScript functions to streamline the rendering process and improve performance.
|
@corsacca @cairocoder01 review ready.... 
|
|
@kodinkat That's looking really good to me! Just 2 small comments:
|
…al map
- Updated default graph orientation to vertical for better initial display.
- Adjusted comments and logic to clarify the relationship between section classes and graph orientation.
- Enhanced SVG rendering to support dynamic rotation based on graph orientation.
- Improved link generation for both horizontal and vertical layouts, ensuring cleaner connections between nodes.
- Streamlined the process of determining graph orientation in modal contexts, enhancing overall user experience.
…dability
- Cleaned up unnecessary whitespace and adjusted formatting for consistency throughout the file.
- Enhanced clarity in the graph orientation logic and link path calculations.
- Ensured better alignment of comments with the corresponding code sections.
|
@cairocoder01 review ready.... 
|
|
@kodinkat That looks 99% ready for approval. But in your second screenshot, why is the connector to Child 3 on the side while the others are on the top? 
|
@cairocoder01 hmm, this is a good question. D3 has not been wanting to play ball re tweaking its link connector start/end points. Will take another look at it.. |
…alignment
- Simplified the logic for connecting nodes in both horizontal and vertical layouts to ensure consistent alignment with tree hierarchy.
- Removed unnecessary calculations for node alignment, enhancing code clarity and maintainability.
- Updated comments to reflect the new approach for connecting parent and child nodes.
|
@cairocoder01 let me know if the latest updates now hold true for you... 
|
|
That's looking good to me. I approve! |
single-template.php
Outdated
| <div class="cell small-12"> | ||
| <div class="grid-x grid-margin-x grid-margin-y grid"> | ||
| <?php | ||
| // Render genmap first if it exists |
There was a problem hiding this comment.
@kodinkat this hook will now be called twice. Any plugin that uses this hook will have content rendered twice.
What is the catch with registering the tile the normal way and hooking into dt_details_additional_section for displaying the content?
Registering the tile the normal way will also let admin hide the tile if they want. And we can provide a description shown when the user click the help icon.
dt-groups/base-setup.php
Outdated
| 'details' | ||
| ], filemtime( get_theme_file_path() . '/dt-groups/groups.js' ), true ); | ||
|
|
||
| // Legacy orgchart library (kept for comparison during migration) |
There was a problem hiding this comment.
Remove all legacy code?
I see multiple legacy references .
dt-groups/genmap-tile.js
Outdated
|
|
||
| // Create link generator with Bézier curves connecting to node edges | ||
| // DEBUG: Set to true to log coordinate calculations to console | ||
| const DEBUG_LINKS = false; |
- Removed legacy genmap rendering logic from single-template.php and base-setup.php to streamline the display process.
- Updated the genmap tile JavaScript to enhance D3.js visualization, ensuring a more responsive layout and improved user interaction.
- Simplified the conditions for rendering tiles, focusing on essential elements for better performance and maintainability.
|
@corsacca new updates... 
|
single-template.php
Outdated
| </section> | ||
| <?php } | ||
| do_action( 'dt_record_bottom_after_tiles', $post_type, $dt_post ); ?> | ||
| <?php } ?> |
There was a problem hiding this comment.
@kodinkat don't deleted the original dt_record_bottom_after_tiles
- Added logic to initialize the genmap only for the 'groups' post type, ensuring it loads correctly when the DOM is ready.
- Updated the genmap tile JavaScript to include an idempotent initialization function, preventing multiple initializations and improving performance.
- Simplified the conditions for rendering the genmap tile, ensuring it is always rendered while controlling visibility through CSS.
- Improved comments for clarity and maintainability of the code.
- Reverted back to action hook 'dt_record_bottom_after_tiles'.
3 participants
