Scope: Serverless Workflow Diagram Editor

Goal: Improve the visualization of serverles workflow diagrams.

Improvement Points:

The graph is not centered when there are more levels with more states.

• See book-lending.sw.json, monitor-job.sw.json from specification

The outgoing connection to the node that is in the same or higher level is pinned to the bottom magnet instead of west/east magnet.

• The actual behaviour conforms with the jira description, but it would make much more sense to use east/west magnets.
• See monitor-job.sw.json from specification

If the connection is going from source to target directly to level above, it is going from west magnet. It might look better if it went directly from the top magnet.

• See car-vitals-checks-parent.sw.json, continuing-as-a-new-execution.sw.json, filling-a-glass-of-water.sw.json from specification

The connection is going through states.

• See monitor-job.sw.json, order-saga-error-handling.sw.json from specification

The connection crosses other connections

• See monitor-job.sw.json from specification

The connections are going through states/nodes in some scenarios if there are multiple states/nodes in the same level, depending on node distribution.
There is also an issue with connections when the states don't have incoming connections, so the nodes are shown next to the Start node. As a result, the connections are going through the same level states.

• Consider the following example: example.sw.json

End nodes at the bottom level are not connected with a single simple line. The polyline is used instead.

• See compensation.sw.json from https://start.kubesmarts.org/#/import?url=https://start.kubesmarts.org/samples/compensation/compensation.sw.json&renameWorkspace=Compensation
• I understand this may be wanted as the end nodes are centered.

The connection label is shown using two rows. In addition there is redundant blue box area around the text.

• See monitor-job.sw.json, reusing-function-and-event-definitions.sw.json
• See handle-frontend.sw.json, handle-backend.sw.json
• It may look good showing it in two rows, but the redundant box should be removed and the text should be split "symmetrically" instead of just letting the one character in the new row. In addition, it should be split only in case there is not enough space (space from UX point of view).