Editor Feature Request - Flow List Quick Navigation

Greetings all!

Would be possible to squeeze in a flow list button for quick navigation? I get googly eyed when using the arrows. I know I can Control+F and type in "tab", but this would be nice:

Flow_List

Thanks for all the work on node-red!

4 Likes

interesting

This is EXACTLY something I have been working on these last days.

I have created a config node called "Tab manager" that displays next to the other tabs in the sidebar (info/debug/context/etc). It lists all the flows. Clicking on the flow's name in the list displays the flow.

There's also the ability to hide/show the tabs (hence the "eyes" icons) and lock/unlock the edition of the flows.

The visibility and lock states are stored in the flows's info property using a hack: I'm using hidden markdown (https://stackoverflow.com/a/20885980/991782 -- which is a hack in itself).

It's not ready for release yet as I'm still testing it and is not without flaws or limitations.

It would be great if the official NR-dev team is ready to implement something like that ... but I understand if it's not high on the priority list ...

4 Likes

I see numerous other hacks in there as well... :sunglasses:
yikes

1 Like

:smiley: only one hack (I think ?): if I set the name of a node to " " (one space character), it is displayed without label using minimum width ... it helps (me) a lot to reduce the general width of a flow and since now we have the ability to change the icon of any node, the icon is enough in several cases and I don't need a label ...

:star: :star: :star: :star: :star:
It seems to be extremely useful to easy the TAB navigation.

My :star2: to shorites.
image

thanks. Unfortunately this hacks means editing the red.min.js file, which of course changes with every new version of NR ...

@redDawn - yes I think there is something to be done here. Although it does need some more thought.

We know that having a large number of tabs makes the horizontal scrolling of the tab bar impractical. A drop-down is an attractive choice - but it can't just substitute an unwieldy horizontal list for an unwieldy vertical one. So maybe that dropdown should have a filter at the top to make it easy to search the list - but that's much the same as using the existing Ctrl-F search box.

As is often the case, writing that down has made me stumble over another option I prefer. Rather than a dropdown, it's a button that opens the existing search dialog with the search-term pre-filled to tab (a capability Dave recently added in the dev branch... good one Dave). That saves a lot of time and effort in creating new UI.

What do you think?

@tilleul - that looks interesting. I have had in the back of my mind to create a sidebar tab that gives a tree hierarchy view of your complete configuration - similar to the Dashboard sidebar tree. There are a number of actions that would benefit from having that sort of view.

There's a separate thread on locking nodes/flows (but as I go to find the link to that topic, I see you've already comments on it...)

Hiding a flow... not sure. There's enough going on in this topic, so going to politely ignore that part.

Interesting idea. We've long discussed the Link node's appearance. I can see the appeal of having an option to hide the label, but I'm not a fan of it being a special behaviour if the name property is " ". I'd see this as being an explicit toggle option on the appearance tab of the edit dialog (along side the node icon/port labels etc).

The editor already shows a tooltip if you hover on a port with a label. I have pushed to the dev branch the ability to have a tooltip on the node body, which displays its label.

Despite what you see in that image (which was taken whilst I was playing...) the dev code only uses this tooltip on the Link node (as it already hides its label). But it lays some ground work for if/when we enable hiding the label on any node.

4 Likes

@knolleary a tree hierarchy of the flows would be a great idea as it would allow the user to classify his flows.

Tab bar: I agree, with a lot of flows the tab bar is impractical. Also the names of the flows are truncated. If we had the flows list arranged vertically, it would be easier to navigate I think. Ideally this list should be displayed at all times (just like the tabs), so that's why making it available as a tab in the sidebar or using a dropdown button is not a good option IMHO. The best I can think of right now would be a new dock: maybe cut the actual sidebar in two ? The upper half for the info/debug/context, the lower for the flows list ? Or at the very least have some kind of shortcut that would display the list in one click max (a button next to the deploy button ? there's a lot of space in that black area)

Hiding flows: if we have a new way to navigate from flow to flow then the tabs are not really needed anymore, that's why in my "tab manager" I added the option to hide those tabs, clicking on a flow's name would navigate to that flow even if its tab is hidden. Of course this needs more thinking, I was simply trying to see "what would happen if" ...

Hiding nodes labels: of course my hack is not the way to go ... I've taken the shortest and easiest route to achieve the wanted result (knowing that I would have to re-apply it after every NR update). A toggle button would be much more appropriate I agree. The label tooltip is a nice addition.

2 Likes

I have 7 tabs with the real estate in each tab completely full. I have avoided adding more tabs because it becomes more an more unwieldy to switch to the needed tab if it is far away from the present tab. It would be nice to be able to have smaller chunks of nodes and be able to categorize them.

An alternative would be having some ability to hide tabs.

Another alternative would be the addition of an item I saw on the whiteboard, "inline subflows". This would allow for breaking things down into smaller, more manageable chunks.

Great! I really would like to have a good UI for MANY flow-tabs.

2 Likes

So can't we just hide a flow tab without disabling it ?

I think that would be just a short-term solution to the real issue: a better overview and navigation of your tabs in larger-sized projects.

We have projects at work with +30 tabs. Hiding any of them would not make sense, as you often need to jump between them. That is really painful at the moment, even with the new search box. (I can give a more detailed description of our use case, if anyone is interested)

A tab list that uses the vertical space, that is always visible and scrollable by mouse wheel would be a great improvement for usability in these cases. Preferably that tree hierarchy view that @knolleary had mentioned in his earlier post. :grinning:

1 Like

No.

If this was possible Node-RED could run flows that were hidden from the GUI and that the user was unaware of. From a security perspective I think this is scary.

2 Likes

I think it would be useful to be able to have the tabs down the side rather than across the top, with the text still horizontal of course. This would allow many more tabs to be visible and would allow the use of a scroll bar to speedily scroll them. It would need to be easy to hide and show it.

4 Likes

For anyone interested, I have written a description of our use case that I mentioned in my earlier post. (Since this topic is related)

All,
I have a post called "Flow Security, if, then How can it be done?", However, I think that just filtering nodes by category would be useful.

Is it possible to consider in "Flow List Quick Navigation" a means to filter nodes to categories you create or just by alphabetical filtering? If I name my flow

"I/O Flow 1", "I/O Flow 2", "I/O Flow 3", ...
"Main Flow 1", "Main Flow 2", ...
"Data Upload Flow", "Data Download Flow", ...
"Device1 Input", "Device1 Output", "Device2 Input", "Device2 Output", ...

it would be easy to group the flows by the first word(s) in the flow... I can then show the categories which I am interested in editing or debugging/viewing at any given time without scrolling through a huge list on the top of the screen.

URL control to view filter string. So that it can be called up on a default view.

Flow Filtering

1 Like