Move parameter ports to top of the box

[bergie]

We have two types of input ports: inputs that are used in processing, and parameters that configure the behavior of the component but don't actually cause it to execute. For an example, see how NoFlo's WirePattern is configured

Currently both types are rendered to the left of the node in the graph:

Moving the params to the top of the box, like in IDEF0 would help to clarify the differences between these port types.

[jonnor]

Would need to define "parameters" versus "inputs" in the FBP protocol, to communicate it from runtime to UI.

[forresto]

The biggest design challenge with this proposal is where to put the labels.

I agree that visually denoting params would be good. Another concept:

flowhub/the-graph#197

[ensonic]

Right, and if we treat inports as parameter ports as soon as one sets a static value, it might be confusing if the ports move around.

Can we do this for components that use wirepattern?

I agree with forresto that top and bottom ports wold be hard to label. Just moving stream ports up and having a gap to the other port would be nice already.

[jonnor]

I think the parameter ports should be indicated by port colo/shape rather than their position.

Position influences heavily the routing of edges, and should be free to move around for this purpose. @forresto we used to move ports around based on the direction of their edges. Why did we stop doing that?

[ensonic]

@jonnor there are things like r/g/b or x/y/z where I think it is confusing if they swap their order.

[jonnor]

Fair point. For quick visual recognition (pattern matching) having the order the same is also beneficial.

[forresto]

I made that call for quick visual recognition when we switched from custom elements to svg/zui.

[forresto]

One thing to double-check is that ports should always be ordered as authored.