Vertical flow view


#1

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,


#2

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!


#3

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.


#4

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


#5

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.


#6

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


#7

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.


#8

@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,


#9

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.