Vertical flow view

Hi All,

I have changed a Node-RED flow from horizontal direction to vertical direction.

I picked up samples from the article written by stephen keep Node-RED Design Patterns and Node-RED Library

Which does make easy to read ?

Let see.

2. UI & API pattern

Horizontal

Vertical

It became simple.

3. Timeout pattern

Horizontal

Vertical

en-5-timeout-pattern-v

It became easy to trace flow.

SunSprite Calendar View web service

Horizontal

Vertical

It became familiar look.

Which view does look simple and make easy to read?

I think verical flows look simple and make easy to read.

Benefit

  • Easy to read
    • familiar look
    • You can find the start point in quickly
    • No horizontal scroll
  • Space can be used efficiently
    • You can draw flow without folding
    • Comment node is easy to put sideways

How to use vertical flow

You can use vertical flow from my github repository

git clone -b vertical-view https://github.com/sakazuki/node-red.git
cd node-red
npm install
npm run build
npm run start

And go [Settings]-[View]-[Other] and checked [Veritcal flow] and reload a page.

  • Recommend to set grid size with 10 to adjust horizontal position easily.

Operation image

Proposal

Could you add the option to switch flow direction between horizontal and vertical ?

P.S.

This vertical view was released as the article of Node-RED Advent Calendar 2018 in Japan.
And many users welcome the article and recommended to propose it in main stream.

Regards,

15 Likes

Great! I really like the vertical flow because it looks like activity diagram in UML. This functionality will also be useful to scroll the entire flow using mouse wheel!

1 Like

Hi @sakazuki

thank you for proposing this. I appreciate you've put a lot of work into this as the view code was full of assumptions about the orientation of flows.

Here are my thoughts on this.

You have shared some examples that may benefit from a vertical arrangement and I can show you just as many that benefit from horizontal arrangement. I do not want to have a debate as to which is better.

The fact is the primary Node-RED visual identity uses horizontal flows and we do not want to dilute that identity. This is the same reason we don't allow the shape of nodes to be changed.

A problem with making this a choice for individual users is that it reduces how easy it is to share flows. For example, if I have my node-red set in horizontal mode and you share a flow with me that was designed in vertical mode, it will look terrible in my editor.

Also if I am collaborating with another user on the same Node-RED instance and we each have a different preference, it would make that collaboration much harder.

Before anyone suggests it, we do not want to support having a mixture of horizontal and vertical flows in the same editor.

A separate consideration is whether this becomes an option in editorTheme - so it becomes part of the customisations that can be applied to the editor at the top level and not an option that can be freely switched between within the editor. This would allow anyone creating a customised version of the editor to make their own choice as to visual appearance for their flows. This doesn't address the issues with sharing flows between the two styles, but it would allow, for example, a company creating a custom Node-RED service to make that choice for all users of their service.

A further complication is we're also thinking about how to visually represent relationships between nodes that do not exist as wires. For example, to let the user see which nodes a Catch or Status node is targeting. One thought is to have that done via vertical wires as they are not in the main message path, which only appear when a node is selected (similar to the behaviour of the Link node virtual wires). If the flow can be flipped to be vertical, those virtual wires would become horizontal and might then clash with nodes with buttons.

1 Like

@sakazuki, is this preference derived from Tategaki (Japanese vertical writing)?

While I like the overall idea (I was thinking about it few times already), I would add yet another concern to what @knolleary wrote.
Try add node.status() with some longer info to vertical nodes and check how they render.

2 Likes

@Marooned Good point, but logically, in vertical format the node.status should be to the right or left (which?) of the node.

Some thoughts/examples of how that could be handled would be useful - I suspect leaving as-is would be least bad - even it does write over the wires (but some css magic may help). Not a complete show stopper - but definitely an urrrgh... not good... I'll pass thanks.

@knolleary
Thank you for your polite answer.

I am sorry but I understood your position and thought
So I will withdraw this proposal.

@ghayne
For japanese users, vertical writing, maybe, is more familiar than other language users because of Tategaki.

But this preference is derived from not Tategaki but other workflow diagram.
Microsoft flow, AWS StepFunctions, flowchart diagram and other.

To All,
Thank you for your consideration and comments.

Regards,

3 Likes

Hi @sakazuki,

You do not need to withdraw your proposal. There is value in the work you have done to allow view.js to handle vertical wires - something I've wanted to enable in the code for some time.

The question is mainly one of how it gets used and exposed. I know there are projects interested in reusing the nodered UI for their own application, and they would be interested in having this as a option that can be applied via editorTheme.

Yes there are some further design considerations when drawing flows vertically (such as position of status), but I'm sure they can be worked through collaboration.

Thank you for starting this discussion.

1 Like

I'm having the same concerns and I'm not from Japan (in my country we write from left to right). In my case, it should really useful to define conversational flows. Is this option available in new node-red version 1.0.1?

Thanks

No, and there are no plans for it currently.

Apologies up front but i gotta at least try...

Its a great shame this option isn't on the horizon or even being considered :frowning:

Dont get me wrong, I understand the sharing of flows issue & the visual identity stance but given the option to work like an SFC diagram or a top down sequence diagram over left to right scrolling - i'd bite your hand off & walk your dog for 2 months!

Is there no way we could convince you guys to at least give some thought to (if you did implement vertical flow) how you might be able to handle things e.g.

  • mixed direction flows?
  • auto reformatting?
  • dual layout coordinates to permit vertical/horizontal switching of a flow?
  • Import warning about flow orientation?
  • Per flow tab option (so that shared works can be imported onto a TAB set for vertical flow)?

(i have more ideas haha)

You guys have done such amazing work on Node-red - Surely the differing visual difficulties could be mostly mitigated some how?

1 Like

Its a shame the 1001 other things on the backlog aren't being done instantly without any consideration of the time and effort each thing involves.

I sometimes think you forget you get this all for free - whilst I spend a considerable amount of time and effort worrying about all the fine details you take for granted.

How about you put some thought into it and come up with some concrete proposals. And I don't mean a list of ideas off the top of your head - actual design work that considers the pros and cons of each approach. That considers all the different use cases that exist for it. That considers how this would work given all the issues I raised in my previous post.

3 Likes

No, I dont. Not even a little.

I'm sorry you felt the need to attack me in this manor Nick. I am not asking for his to be added instantly or with no consideration at all. I have spend hundreds of MY FREE hours on this project for my betterment and hopefully the betterment of the community.

Because like you, my time is precious and if I were to spend the amount of time the OP spent for you to dismiss it due to "visual identity" then I'd too be wasting my time.

The thing is, I genuinely thought some "off the top of my head" ideas might spark a genius moment in the devs along the lines of "actually, that might work". Which in the spirit of open source, turns into a discussion that leads into development that leads to a solution.

I was wrong.

Sorry.

5 Likes

It wasn't intended as an attack and I apologise.

I appreciate your input - even though I failed to acknowledge that in my reply.

That's a reasonable approach for sure, and sometimes it does work like that. But only when its a topic that we're actively considering and thinking about. This topic is 10 months old and I haven't thought about vertical wires since. At the time there wasn't much interest to take it further, so it didn't get onto any backlog.

I can't remember all the details of what I was thinking about at the time I responded - there are many aspects of Node-RED that I keep in my head at the same time, this isn't one of them. So reading a list of ideas, in this instance, isn't going to spark anything as I can't remember the details of what needs 'solving' about the idea.

Bringing this thread back to life does help us gauge true interest in this type of feature - so that is worth something.

Coming up with a more detailed proposal for this would be worth something even more.

Thank you and appreciated.

So to put a small amount of meat on one of the ideas...

Per flow tab option (so that shared works can be imported onto a TAB set for vertical flow)?` ...

  • If an exported flow could identify its layout (perhaps through meta data) that it was indented to live on a top down flow
    • If the user is using old node-red - it pastes messy, but it still functions
    • If the user is using newer node-red -
      • a warning could be presented to the user that this flow is intended to be pasted into a vertical flow - giving the user the opportunity to switch tabs. Perhaps offer "paste to new vertical flow tab"

Unfortunately I don't have the inside knowledge to know if parts of that are impossible (e.g. is storage of meta data possible in the flow JSON without backwards compatibility issues?).


@sakazuki San, the work you have done on this was very good & you obviously put a good deal of time into it - it would be a shame if it never got accepted. Have you developed this any further? Do you have any new ideas on how better integration and handling of layout issues might be dealt with?

Currently there is no meta-data in the flow file - it is "just" an array of nodes - so either it's a per-user/editor option which then opens up all the questions about sharing flows/ team working etc - as per the reply to the OP. Or there needs to be a new flow file format that would break every existing user... as "old node-red" would not know how to handle it and can't suddenly do so. So there are some more fundamental things to consider before you add too many meaty bits to it.

1 Like

Hi @sakazuki. Thank you for this, I found it very helpful. I was attempting to do this on my own before I found this post. I was able to arrange the input/output ports appropriately, but had yet to figure out how to adjust the link-line paths. This is exactly what I needed, thank you!

I use this kind of construct a lot:
image
So being able to Reverse a single node would be good for me :).

1 Like

Reverse the polarity of the neutron flow! :face_with_monocle: Sorry, reading this I thought about Doctor Who instantly. :rofl:

But seriously, I think reversing nodes would kill any advantage that the flow-driven model provides in terms of readability. Meaning to actually see the data flow from input to output, left to right.

4 Likes