I have an application that allows users to create and edit graphs. The interface is a simple drag & drop UI that allows creation/deletion of nodes and edges. Nodes contain some internal configuration, therefore clicking on a node will open up an editor in a sidebar to edit the node-specific settings. Edges are added by clicking on a node's handle (the black dots in the image below) and dragging to another node's handle.
Some sub-graphs represent a specific logical unit in the context of the domain of the application. In order to simplify application flow, I want those sub-graph to be shown as a single node, which can then be somehow expanded (or zoomed in).
Consider this example:
Let's say that
Node 2 and
Node 3 are part of a single logical unit, let's call that
Logical unit node. Then I'd like the graph to be displayed like this, by default:
Edges would be rendered by this logic:
- for each node n not in the logical unit, if there's a node in the logical unit that has an incoming edge from n, draw an edge from n to the logical unit node
- for each node m not in the logical unit, if there's a node in the logical, unit that has an outgoing edge to m, draw an edge to m from the logical unit node.
My question is: what would be the best way to allow the user to zoom in and out of the logical units, while minimizing excise and cognitive load?
The first approach I thought of was the following: when a logical unit is expanded, its inner graph replaces the view of the current graph entirely, so you only see its nodes, and there's a back button to go back to the main graph. This is optimal if the goal is to reduce useless information on the screen, but doesn't work well if the user wants to focus on the sub-graph while also working on the rest of the main graph.
Also, adding edges from nodes outside the logical units to ones inside of it becomes pretty difficult. One thing I thought of is that, when a node is drawn from a node to the logical unit, a dialog pops up showing the unit's inner nodes, and you select the one(s) that the edge is connecting to, but I believe this could be too cumbersome.
Another alternative I thought of is to expand the sub-graph in the main view, like this:
This wouldn't work well if the sub-graph is too large, though.
How can you make this workflow lighter and user-friendlier?