Add Workflow Component

[wwitzel3]

Describe the problem/challenge you have Add a component that allows you to visualize a DAG (directed acyclic graph) workflow.

We currently have cytoscape.js, we can look at using the dagre extension for cyctoscape to build a workflow visualization component.

Considerations:

• Each entry in the graph should be able to have a current state.
• Context menu / action menu for nodes.
• Lines should show the current "active" path.

Resources:

• https://github.com/cytoscape/cytoscape.js-dagre

Deliverable:

• storybook story.
• An angular component
• Go component with config to control the state of the component.

[wwitzel3]

This would be driven by an eventing system and be able to perform actions that other custom resources implement on top of that eventing.

Think knative / tekton

[wwitzel3]

We may want to convert this to an epic and build the various the component features in stages to enable viewing first, then interactions.

[mklanjsek]

Since workflow topology doesn't map to a binary tree structure, I am not sure dagre is the best choice for this, something more like breadthfirst might work better.

Here is a good overview of different layouts supported in cytoscape: https://blog.js.cytoscape.org/2020/05/11/layouts/

[lenriquez]

Do we have to add anything for the JS plugins?