Vertical flow view

Core Development Feature Requests
22

Reverse the flow just because you cross lines? That would be confusing. You would need to orient the icon on the left to the right or do some king of mark to understand it is reversed.

(Hint, use at least 1 pair of Link Nodes to unclutter your crossing lines. You could at least hover over the link to see the lines.)

23

I absolutely like it.
Can you say something about how we can convert our current version to vertical view? Which files need to be modified?

24

This thread was about the feature request. It hasn't been implemented, and since there are many unresolved questions about how to do it right, it won't be for the time being, if at all.

25

That is amazing. Would be really nice to see this as a option.
Very nice job.

2 Likes
26

@sakazuki I followed your code in your github to reproduce this in node-red 1.0.1, without success.
I was able to get all working, but the connectors would not connect to other nodes.

Do you have any plans to update your github to node-red 1.0.1?
Many thanks for your contribution!

27

Hi,

I have a plan to update it to latest node-red 1.0.x.
Maybe within 1 month... :roll_eyes:

Regards,

6 Likes
28

Excellent news @sakazuki - thanks for this.

I really hope you can find a way make integration smart and elegant so the head developers will accept a PR.

I offered some (not so detailed) thoughts on how this could be integrated in an earlier reply I hope you find useful.

I believe one of the main hurdles will be how to handle pasting of flows when users share code.

:+1:

29

If you do have vertical ins and outs then you could have the ins a different shape to the outs on the UI in order to show the difference between the them. :slight_smile:

30

@sakazuki Yes, I meant to say v1.0.1.
That's great news, vertical flows are especially useful for us as we use node-red for our chatbot. The flow of a conversation is more readable, as that's how most people are used to seeing conversations flow.

31

For us, the whole point of using node-red to write the chatbot logic, was to easily visualize the conversation flow.
Just to see what the chatbot flow looks like, this is what I'd like to clean up with a vertical view:

chatbot
chatbot.PNG1395Ɨ893 125 KB

@knolleary Do you have some type donation account that we can contribute to, to show our appreciation?

1 Like
32

I have flows that are even more complex than that ... what I use is link-nodes within the flow... this removes all the links that go across the other nodes ... also I hide the nodes labels and/or use different icons for the nodes ... for example you certainly could hide the labels for the "send & listen" and "send and continue" nodes ...

2 Likes
33

Of course there is nothing to stop one doing this, which I have myself done on occasion when the flow leant itself to this layout

image
image.png711Ɨ318 25.5 KB

3 Likes
34

+1 to this idea, in our upcoming situation this would be really valuable given words are inherently wide not tall. However, I note OP's appreciation this would not be applicable for all flows.

Approaching some of the ideas mentioned in this thread:

I agree with @knolleary that if done, an editorTheme feels like a good place for this to live

@sakazuki is it possible to render a how a previously complex horizontal flow (eg sample-H) would look once the horizontal mode is enabled but not moved any nodes? It seems if this were a local setting, differing preference between co-authors would be mildly messy but not a killer to collaboration or sharing - for sure no worse than working with someone who doesn't care about lining nodes up in their flows.

Status of nodes is maybe the biggest real UI challenge, which may be beyond the time availability of Nick. The Status UI works really nicely as is though I would sacrifice that short term by simply having the lines under the status for a short term fix. Longer-term, a lower tray with this status may be a way forward (Sorry if this is another off top of head idea like Steve).

I don't think the JSON sharing would need to differ when im/exporting flows (but Nick may know more) so it wouldn't prevent sharing and would just look like Colin's example if not enabled for the new user. I would suggest the best practice to add a comment node to mention vertical was used.

was mentioned a few places more detail may be needed to achieve this idea - could this be listed what would be required? (other than needing 30hr days.. we greatly appreciate all the effort that is going into this!)

1 Like
35

Hi Jacob. I did the same thing based off @sakazuki 's codebase. Here's what I came up with, implemented with v1.0.1. Hope it helps. I haven't figured out how to change the port orientation in the palette yet, but the ports and wires are working vertically and horizontally.

@sakazuki , looking forward to your v1.0.x implementation

2 Likes
36

Looks quite good :slight_smile:
image

2 Likes
37

If/when we look at this properly.... those bezier curves the wires follow need a lot of work. Of the many things I'm particular about, it's the curve of our wires.

9 Likes
38

Hi,

For the time being, I updated vertical_view branch to work with Node-RED v1.0.2.

Thank you for your interest.
Regards,

5 Likes
39

Agree - also the vertical alignment of nodes should always result in a fully vertical line otherwise a lot of folk with OCD are going to be very agitated.

40

Though I understand that there are various challenges,
For the time being, I added a vertical flow to the Node-RED-Desktop v1.0.0-beta.2 on a trial basis so that interested people can easily try the vertical flow.

3 Likes
41

This is amazing. I think having the lines turned into arrows would be great. It would add probably too much extra info to the flow file but being able to drag from the one nodes edge (top or left or right) To any edge of another node (top or left or right etc). Flow follows the arrow direction. That could result with some clean flows.