Show variable mutations at edge or node

[mijailr]

Context

We're currently rendering the thread variable mutations globally but we should render it as part of the edge somehow.

A possible solution to this is to make the edges clickable and render a tooltip with the mutations occurring on that edge.

The problem though is that a user might not know to click the edge. Is there any way you can put a hint on the edge when it has a mutation so that a user knows that it is clickable? - Colt

Also the edges are hard to click because they are thin, so it's easy to miss with the mouse. - Mijail

Another solution would be to extend the NodeDetails component or similar to append the list of mutation occurring on it's outgoingEdges.

Okay, I guess then if you see it when clicking on the node that would be fine. Just make sure it's clear who owns which mutations

Acceptance Criteria

We need a little bit of thinking to find a good UX for this.

Out of Scope

No response

Components

Dashboard

[HazimAr]

Following the conversation with @mijailr & @diablouma we concluded to the following:

Indicate mutations available:

• Use labels -> generate ReactNode instead of string
• Have text to indicate: "Mutation Available / Emoji / Icon"
• Change color of label

Modal to display the actual mutation on the edge:

• mutations name (wfSpec)
• mutation name & values (wfRun)