Sub-group view on Mind Map

[TheWover]

Is your feature request related to a problem? Please describe.
User wants to be able to see sub-graphs in the Graph view by tag.

Describe the solution you'd like
"https://reactflow.dev/examples/grouping/sub-flows

Subflow grouping on tags would also be cool

So in this case, both having been tagged with infrastructure, they could be grouped in a subflow. That may have to be an toggle-able feature since subflows usually are bound to their parent boxes. That also makes Dagre layout tricky, you have to layout the subflows to get the size, then layout the parents to get the full graph"

The user suggests a toggle where the layout of nodes is adjusted to make the sub-groups visible. This would probably ignore (and not adjust) the stored positions of the nodes.

Describe alternatives you've considered

• Filtering the graph by tag to only include nodes with a certain tag.
• Adding the sub-groups on top of the current position of nodes

Additional context
We just need a Filters toolbox like on other parts of the app

[TheWover]

For the grouping view, make it a Group Map sub view of Graph. The user should be able select N filters, reusing the filter settings dialog from Compiler. For each filter, a set of nodes will result. Each set will be a group to be displayed as a grouping in the canvas.

They should be able to save the filter set as JSON and reuse it.

[TheWover]

Make sure to include an Export to PNG button in the Group View.

[TheWover]

Initial Prompt:

We want to create a new sub-view for the Graph view. This new view will be called the "Group" view. It should be navigable using the sub-view switcher in the Graph view, similar to how the user currently switches between the Mind Map, Outline, and Progression views.

The goal of the Group view is for the user to be able to define groups that match filters. For each group, a set of active filters may be selected using the existing Filters toolbox. The filters for that group will result in a sub-set of nodes. Each group will have a sub-set of nodes. The user may define a name for each Group. The user should be able to define up to 50 groups to avoid significant performance impact.

The Group view is inspired by the Mind Map view and should re-use code and components when possible to comply with the DRY principles. The main difference is that the Group view is intended to highlight the relationships between groups of nodes rather than individual nodes.

As far as I understand we are using React Flow for the mind map. We should re-use that for the Group view. We can use React's Subflows for drawing the groups. https://reactflow.dev/examples/grouping/sub-flows 

In the default view, groups that include the set of nodes of another group should be represented as a parent of the smaller group.

There should be an option to "Nest groups". When this is active, sets (groups) that include other sets (groups) entirely as a subset should be  displayed as nested Subgraph groups. If one group is larger than another (Group A includes Group B and some more nodes) then the larger group's extra nodes should be included in its own box outside of the the smaller group's box. Keep in mind that there could be multiple groups nested inside of one group. For example Group A could include Group B and Group C. If Group B and C are different, then they would each show their own nodes in their own boxes all inside the box for Group A. If Group B and C are the same then they would be drawn with a dotted line border and the label should include both group names. Nesting group rules apply recursively. For example Group A could include B, which includes C. 

When multiple groups are equivalent (contain the same set of nodes), they should be drawn using the same group box. The group box should have dotten lines as the border instead of a solid line; this is to indicate multiple sets are included. And the label for that box should list all group names that are included.

Options for the Group view should reside in  an expandable Options tray, like in the Mind Map view.

The user should be able to export their group configuration as a JSON file so that they can import it later.

The group configuration and layout should be persisted per tab between tab switches and app restarts.

The ability to right click on blank canvas and click a button in the context menu to export the entire canvas as a PNG should be retained from the Mind Map view.

The behavior of right clicking on a Node should be retained from the Mind Map view, as well as the behavior of drawing soft links between them.

Please ask any clarifying questions you may have. This is a complicated request, so let's thoroughly understand and agree on our plan before implementation.

[TheWover]

The default mode of the Group view should just show the nodes grouped by tags. Then there should be an Advanced option to use custom filters.