UI - Workflow graph should place nodes at maximum possible depth

[jithine]

What happened:

Nodes in workflow graph are placed at minimum possible depth which can cause graph rendering constricted.

What you expected to happen: Each node in workflow graph should be placed in maximum possible depth

How to reproduce it:

screwdriver.yaml

shared:
    image: node:12
jobs:
    A:
        requires: [~pr, B]
        steps:
            - runA
    B:       
        requires: [~pr, ~commit]
        steps:
            - runB

Node B should be placed in the workflow graph in 3rd column rather than 2nd column like how it's rendered today.

[jithine]

cc @adong @OronNadiv

[y-oksaku]

If we set template to job A, then the workflow graph on validator page will be the following. But this behavior does not occur on pipeline pages.

shared:
    image: node:12
jobs:
    A:
        requires: [~pr, B]
        template: nodejs/test@latest
        steps:
            - runA
    B:
        requires: [~pr, ~commit]
        steps:
            - runB