DAG Visualization MVC

This is the first iteration implementation for the DAG visualization as discussed in gitlab-design#973 (closed).

Graph Layout

We will implement this with a modified Sankey layout, similar to image here:

• We will use the Gitlab Datavis colors as outlined in Pajamas.
• The nodes will display only the job name. (This is expected to expand in future MRs.)
• We will update the nodes to match the lozenge shape in the design and they can be white or the node's color.
• Node color is determined by the stage.
• Links will be de-duped; that is, if job 4 and job 2 both depend on job 1, there will be a line from job 1 to job 2 and one from job 2 to job 4, but not one from job 1 to job 4.
• Links will cross and be straight with round line-joins. (These can be updated to arcs in a future MR, if desired.)
• The link turns will be staggered as much as possible to avoid the indistinct overlapping line as much as possible.
• Links can be colored by source, target, or as a gradient interpolating between the two (as shown in the screenshot).
• We need to account for parallel jobs when building relationships between nodes. We can either display a group together and then link it to its needs or we can add all parallel jobs and treat them individually

Interactions

The interactions will be:

• On hover of a link, the link will be highlighted and others faded
• On hover of a job, the full set of links should be highlightedº
• Clicking both a link and a job should likewise apply the highlight behavior and then clicking outside them will reset the rest state.

Goals

The primary goal of this MVC is to ship a working visualization in a DAG tab in %13.0 so that we can solve some of the basic integration questions and see the graph in use across a number of projects.

This is the first iteration and is expected to change through the next milestones as we get further feedback. We also expect to add further interactions, etc.

Dependencies

This work is reliant on the endpoint change outlined in #215524 (closed).

MRs

• Add feature flag [@f_caplette] !30310 (merged)
• Add empty tab behind feature flag [@f_caplette] !30310 (merged)
• Add MR to get data from the endpoint [@fabiopitino & @sarahghp] !32460 (merged), !31583 (merged), !31324 (merged), !32438 (merged)
• Add data parsing utils [@sarahghp] !32768 (merged)
• Add graph with data transformation but without interactions [@sarahghp] !32890 (merged)
• Add graph with interactions [@sarahghp] !33832 (merged)
• Enable feature flag, add beta to tag, add documentation [@sarahghp !33958 (merged)]
• [-] Add annotation pass >> #221225 (closed)