A suggestion to the layout of the web design part

#1

In light of all my recent problems and seeing a new NR is soon to be released, I thought about the layout.

At first I didn't get the idea of having different "tabs" on a machine. But then, when my flows became monsters I appreciated the separation of different parts of the flows/code.

(See attached for a better explanation of what I mean.)

Although maybe not often used, they can be a pain if/when you have a lot of them.
Scrolling left/right.
A drop down list would be a nice alternative.
And/or maybe a name search, so if you are looking for a tab of name x, you can search for it rather than having to scroll - for the existing scenario.

Only a suggestion.

#2

Hi @Trying_to_learn

this has come up a few times - you are right that navigating the tabs can get tricky when you have lots.

A few ideas have been suggested - very similar to yours.

One tip for what you can already do today - the search dialog (Ctrl-F or 'Search flows' from the drop-down menu) does include Flows in its search results. So you can use that to search for a tab by name and when you select it, it takes you there.

Finding some sensible way to surface that in the UI more readily would help.

#3

Forgiving my pathetic effort at designing the layout.
I am not that good with the paint program.

This is an effort/suggestion.
Granted I am missing the "add new tab", but I hope you get the idea.

#4

Just on that. Granted I don't often use the search function.

Just now I needed to find a tab called home, so I did what you suggested.
(Sorry this is going to be a few screen pictures to help with what is happening.)

So: I want to go to a tab called home.

I enter home (forgetting the multiple results. that's beyond this I believe.)
Press enter and I am present with Picture 2.

That doesn't really match with: and when you select it, it takes you there.

So, am I missing something?
NR version 0.19.4
(Nearly forgot that)

#5

You have selected a node called home but of type ui_tab. That is a dashboard config node; when you select it, it has revealed that node in the config node sidebar.

You need to find a node of type tab - not ui_tab:

Local_Node-RED

I fully acknowledge that this search-to-get-to-a-tab-quickly technique falls down if you have lots of nodes called the same thing as your flows.

#6

OK, I'm sorry. Yeah, that was "my bad" (as I think is the saying)

I didn't select the right one.

I can't understand that. > but of < .. bit of? but if?

Anyway, I don't want to argue semantics. Somehow I am just not getting the search thing.

I tried something else and searched. It too resulted in the tab column to the right to show me the thing, rather than taking me to it in the edit (main) part.

#7

Every entry in the search results consists of:

  • the icon of the node
  • the 'name' of the node, if set, otherwise its id
  • the 'type' of the node
  • the location of the node - what flow its on, if its on a flow

Every node has a type - the type describes what it is. A 'change' node, an 'mqtt-broker' node and so on.

The dashboard provides the node types ui_tab and ui_group. When you searched for HOME, it has found all of your ui_tab nodes that you've given the name HOME. You can see clearly in the screenshot they all have the text ui_tab in their entries.

The normal workspace tabs have a type of 'tab'. So to find the workspace tab with the name "HOME" you need to find the entry in that list that says 'tab' not 'ui_tab'.

#8

Ok.

I think I have it nutted out.

Just tried it again and it is working.

The icon is the one that looks like 2 AND (*1) gates. One pointing one way and the other (below it) pointing the other.

(*1) I say AND gates. Op Amps...... But anyway.

Ok got it working.

That part of your reply I didn't understand.... Not important?
You have selected a node called home but of type ui_tab .

(Via edit)
So:
You have selected a node called home but of type ui_tab .

You have selected a node called home but it is of type ui_tab.... Better?

#9

In your screenshot, where you showed us what you had selected:

You had selected a ui_tab type node.

#10

Yes, and I accept I made a mistake.

So the one I should use is:
Screenshot%20from%202019-02-08%2007-52-45

Got it.

(Gotta go off line. Alas today is even busier than yesterday.)

#11

Late to the conversation I know - but I would REALLY appreciate a drop-down list of tabs as well. Even with a relatively small list of tabs, if you end up on a smallish screen, you still end up scrolling.

#12

Something else which has also been brought up is the oder of the tabs and how they are displayed.

As is, it is easy to alter the order in which they are displayed. Which is nice.

Having the drop down menu as I suggested would be problematic if you wanted to re-order the tabs.

To allow this, the menu would have to allow dragging of tabs. I don't know if that is legal/possible.

(Thinking aloud)
Also it may be needed to widen the menu item so a option is displayed, and/or activate.
But there again, maybe the and activate options should both be relegated to the tab edit screen which is accessed now by double clicking on the tab name.
Which they are now anyway.

Adding a new tab is also a bit tricky.
If the drop-down menu is not "active" - and the list of tabs visible, the text display would be something like:
< new tab > | | /
(Can't do ascii art. Drats)
The text for a new tab then to the right a drop down arrow pointing down.
Excusing the poor effort of the picture: see attached.Menu
So clicking on the gives you a new tab. Clicking on the "V" part, you get the drop down menu of the existing tabs.

#13

Perhaps that's getting a little over-complex? Truth is that, for me, the drop-down just needs to be a selector. The plus symbol is more than adequate for creating new tabs and the existing drag-drop is fine for reordering - not like I have to do it often. Generally, the only reason I reorder is if I need to keep swapping between 2 tabs that weren't close together when redeveloping something.

#14

Agree.

I was only "mind storming".

#15

How about a keyboard shortcut display the tabs as a vertical list in the order of what was open previously? Something similar to alt+tab to switch between applications.

Or perhaps a separate keyboard shortcut to search only tabs?

#16

Currently, Plan A is to reuse the existing Search Flows dialog, but with a button/keyboard shortcut, that opens it with a filter pre-applied to list only flows/tabs. Whether that initial list could be sorted in the order you last visited them is another matter - we don't track that sort of history currently.

I'm reluctant to create yet another pop-up list of things when the existing Search dialog is so close to what is needed.

Also worth mentioning we already provide ctrl-shift-j and ctrl-shift-k as shortcuts for switching to next/previous tabs.

1 Like