#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: |
3 participants
