Tweak drawing algo to support same stage needs

What does this MR do?

Allow the algorithm which draws the job relationship to draw lines when 2 jobs are in the same column, which means that they are same-stage needs jobs. For example:

stages:
  - prepare
  
prepare_1:
  script: "echo hello"
  stage: "prepare"
prepare_2:
  script: "echo hello"
  stage: "prepare"
  needs: ['prepare_1']
prepare_3:
  script: "echo hello"
  stage: "prepare"
  needs: ['prepare_2']

It's known that it can look a bit convoluted, but this shape for lines solved a lot of problems and this is temporary. We plan on making the visualization look more like the new pipeline graph.

If you test this locally, it will currently not work because it's an invalid Ci config, but when the BE MR is merged, we will need to support this. This can safely be merged before the BE MR is done because if there are no pills in the same column, then it will behave as it used to. But, this has to merge before the BE MR to ensure that once their work is done, they can safely merge without breaking the FE.

For example, this is the graph working with no same stage needs:

Screen_Recording_2021-06-01_at_1.29.33_PM

Screenshots (strongly suggested)

Take note that this change can't be seen right now on master. Right now if you try to have same stage needs, you get a linter error, so there is no visualization shown, just an error message. After this change, well, you still do 😄

But! rebasing this branch on !59668 (merged) would give you this before and after for this MR.

Before this change, same column lines would look like this:

After the change, you can see the lines are neatly aligned on the left:

Screen_Recording_2021-05-18_at_3.30.48_PM

Does this MR meet the acceptance criteria?

Conformity

• No changelog because there are no current user facing changes. (Does this MR need a changelog?)
• I have added/updated documentation, or it's not needed. (Is documentation required?)
• I have properly separated EE content from FOSS, or this MR is FOSS only. (Where should EE code go?)
• I have added information for database reviewers in the MR description, or it's not needed. (Does this MR have database related changes?)
• I have self-reviewed this MR per code review guidelines.
• This MR does not harm performance, or I have asked a reviewer to help assess the performance impact. (Merge request performance guidelines)
• I have followed the style guides.

Availability and Testing

• I have added/updated tests following the Testing Guide, or it's not needed. (Consider all test levels. See the Test Planning Process.)
• I have tested this MR in all supported browsers, or it's not needed.
• I have informed the Infrastructure department of a default or new setting change per definition of done, or it's not needed.

Security

Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

• Label as security and @ mention @gitlab-com/gl-security/appsec
• The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
• Security reports checked/validated by a reviewer from the AppSec team

Related to #30632 (closed)