[Diagram Editor] Better layout for cyclical connections

[mxgrey]

The current auto-layout scheme works very well for workflows that only connect from top to bottom, but it gets a bit twisted up when a cycle shows up. Here's what diagrams/countdown.json currently looks like:

This could be made to look good if the connection from sub to less_than were able to loop the long way around sub (to the left). I think we should consider the following upgrades to the UI:

• Allow users to manually adjust the positioning of the edges (connections between operations)
• Have an auto-layout that accounts for cycles by looping those connections outwards instead of taking the shortest path

[mxgrey]

Somewhat related, I'm seeing a funny auto-layout behavior with streams.

Initial user-made layout:

After auto-layout:

It seems the reason for this is nodes get positioned from left to right based on the order they are created. If I delete the Section Output: sequence and then recreate it, we get this layout instead, which is much better:

[koonpeng]

It seems the reason for this is nodes get positioned from left to right based on the order they are created. If I delete the Section Output: sequence and then recreate it, we get this layout instead, which is much better:

fixed in #113.

Allow users to manually adjust the positioning of the edges (connections between operations)

Not impossible with reactflow, but I don't think a collection of UI elements to display, add and remove control points is on the scope now. Any modification will also be discarded when the diagram is reloaded.

Have an auto-layout that accounts for cycles by looping those connections outwards instead of taking the shortest path

That is not supported by dagre nor reactflow. Fixing it will require a custom edge shape that is aware of the entire graph and is able to minimize interception globally.

I will put these 2 issues as "won't fix".

[mxgrey]

Not impossible with reactflow, but I don't think a collection of UI elements to display, add and remove control points is on the scope now.

This issue should not be closed without resolving the UX problem for cycles. Support for cycles is a major strength of the bevy_impulse library, and it's important that users can visualize cycles in a reasonable way in the visual editor. Whatever the feature scope happens to be right now, this issue ticket is also a way to communicate with the community about what we recognize as needing improvement.

Any modification will also be discarded when the diagram is reloaded.

I think we're past due for including layout information in the schema. The current dependency on auto-layout is already becoming detrimental to a user's ability to customize how their workflow is visualized. We can add position information to TraceSettings, perhaps renaming TraceSettings to a more general name, like DisplaySettings. We could introduce two new fields: display_position to say where the current operation should be displayed, and control_points to specify what positions an edge to another operation need to pass through.

{
  "start": "op_a"
  "ops": {
    "op_a": {
      ...
      "next": "op_b",
      "display_position": [0, 0],
      "control_points": {
        "op_b": [
          [0, 1],
          [1, 1],
        ]
      }
    },
    "op_b": {
      ...
      "next": { "builtin": "terminate" },
      "display_position": [1, 2]
    }
  }
}

[mxgrey]

Leaving this link for anyone who might be interested in taking on this issue: https://reactflow.dev/learn/layouting/layouting

It seems ELK should be suitable for making cycles render nicely, but it will probably be a large task to take on.