Pipeline connections: redesign of plugins connection ports and connection

As a user, I want to be able to make multiple connections.

A node can be connected to multiple nodes both as output node (the connections originate from that node) and as an input node (the connections end on that node). There is no limit on how many connections can exist between any two nodes.

On my output node, I want to see:

• A single output port (from which all connections will come)

• An indication that the output port can be clicked and dragged

On my output node, I want to be able to:

• Click and drag the output port to start a new connection

• Create an unlimited number of output connections

On my input node, I want to have:

• Multiple ports for connections

• New ports added sequentially when new connections are added

On my input node, I want to be able to:

• Create a connection by click and dragging from an output node

• Create multiple connections and have the arrangement across all five ports automatically managed for me

• See an indication that I can drop a connection on a node when I drag my cursor over the node

Once a node has five input connections, then any additional input connections (represented by the "arrow" on the end of a connection) will be appended to the same location ("ports") as one of the first five connections. This is because there is a cap on the number of ports (five) – but the possible number of connections does not have a bound.

On my connection, I want to see:

• Clear visual separation from other connections at the input port

• An indicator of which connection end is the input

As a user, I want to be able to select and delete my connections.
On my output node, I should not be able to select or delete the connection. This is because dragging from the output of a node is used to create new pipeline.

On my input node, I want to see:

• A clear way to select the end of the connection

On my input node, I want to be able to:

• Drag away the end of the a connection onto the studio canvas, deleting the connection

• Select the end of a connection and drag it to a new node. If there are multiple connections to a single port, I want the most recently created connection selected.

On my connection, I want to see:

• The connection highlighted when the connection is hovered

• The connection bolded when the connection is selected

On my connection, I want to be able to:

• Click and drag both the input node end of a connection to another node

• Delete the connection when it is selected by pressing "delete" key

• Right click and choose "Delete," Copy," and "Paste" from a pop-up menu

An exception is if that if I select the connection and drag from the middle, nothing should happen.

As a user, I want to know that I am creating valid connections.
On my output and input node, I want invalid connections I have tried to make vanish.

On my connection, I want to know there are:

• Guardrails to ensure that my connections are made correctly. I will be disallowed from making a connection if it is invalid:
  ||Type||Allows input from||Allows output to||
  |Source|Only Action|All except Source|
  |Transform|All except Sink|All except Source|
  |Analytics|All except Sink|All except Source|
  |Sink|All except Sink|All except Source|
  |Action|All|All|
  |Error Handlers|All|All except Source|

I want to know that my connection will:

• Ensure that the nodes after Action(s) are still valid outputs. For example, the following arrangement is invalid: Source into Action into Source.

• Not allow me to connect a node's output to its own input; any input into any input; or any output into any output

Acceptance Criteria

• Ability to make multiple connections

• Connection selection and deletion

• Validation of connections