Component port filtering

[chadrik]

Here are some ideas on how to deal with components with many ports, borrowed from Autodesks' maya:

Here's what's going on:

Each node has a 3-state toggle menu in the upper-right hand corner that controls port display. the states are:

1. collapse all ports to one "omni" input port and one "omni" output port
2. show connected ports only
3. show all ports

I think we only need modes 2 and 3. As a user, I would set my components to show "all ports" when editing the graph so that it's easy to connect new edges, and then when running and monitoring the graph I would set components to "connected-only" mode so that it's more condensed. Maybe noflo-ui could automatically switch between modes depending on whether the graph is running or not?

Here's another feature that allows ports to be filtered by name:

Might be overkill for now, but thought I'd throw it out there.

@djdeath since you are another user who has components with many ports, what do you think of these ideas?

[forresto]

VIzor.io has something similar with node collapsing:

Filtering would be next-level, maybe only enabled on nodes with > 9 ports or something.