Feedback wanted: new style node edit tray

[Nicholas O'Leary]

Hi all,

for the forthcoming 0.14.0 release, we're planning to introduce a new style of node edit 'tray' to replace the modal dialog.

Given the nature of the change, I wanted to preview it with the community and get your feedback before we release it. Rather than ask you to download and run the development version, I've made an instance available on Bluemix that anyone can play with:

    http://node-red-editor-demo.mybluemix.net/

This instance is locked down so you cannot deploy changes, but you can still edit the nodes to see the new edit tray in action.

Some features to highlight:

 - it can be resized just as the sidebar can - with the added 'maximize/restore' buttons in the top-left corner

 - when the edit tray is open, you can still interact with the sidebar - which means you can access the node's help info whilst editing the node

 - it enables us to have nested configuration nodes - previously a config-node could only be used by 'regular' nodes. Now a config-node can use another config-node. You can see this in action if you click 'Enable secure connection' in the MQTT broker config node to access the new tls-config node.

This version is based on the 'config' branch in github, which is itself based on the '0.14.0' branch. This means it also features a sneak preview of some of the stuff already committed for 0.14.0 including:

 - as mentioned above, a new tls-config node will be available for use by any node that needs the user to provide common TLS certificate configurations.

 - link nodes (although they need more work before we release them)

 - debug sidebar can filter its output to just show messages from the current flow

 - Change node can be set to move a message property (where you used to have to set the new property and delete the old in two steps)

 - and a bunch of other things we'll tell you about in the proper release notes when we get there...

Please let me know what you think about the editor tray - any quirks or bugs you hit.

Once we get this feature locked down, the 0.14.0 release will be fairly close.

Nick

[Andrew Lindsay]

Nice!

[James Sutton]

Looks great, I instinctively clicked outside of the edit panel (on the rest of the canvas) when I wanted to close it, but that didn't happen. Is the cancel button the only way to close it?

[Nicholas O'Leary]

James: yes, you have to click a button (ok/cancel) to close it (as with the previous dialogs). I now realise I haven't reinstated the keyboard shortcuts we added in the last release for those buttons... added to the todo list.

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
For more options, visit https://groups.google.com/d/optout.

[Mark Setrem]

Wow! theres a lot more mouse movements needed to complete a simple task especially to hit the "OK" "Cancel" buttons after modifying for example a debug node.

I don't know if its a factor of deploying being locked down but at least in Safari the text of "OK" "Cancel" appears to be greyed out ( the buttons work but the text colour is a lot lighter grey than it appears today)

For the casual/new user I think the new UI is easier to miss than before .

I realise that as node-red gets more and more functionality, keeping the simplicity becomes a greater challenge.

The animation to get to a "Edit mqtt-broker config node" just feels odd to me.

You open the MQTT edit panel I wouldn't expect to see this then animate a close before the broker-config panel then opens.    

Whilst I understand thats whats happening behind the scenes as you are editing the config node.  For the average user, the open and then open on top metaphor used in todays node-red feels easier to understand than this.

So in trying your TLS example. The dialogue animation sequence is

Open,Close>Open,Close>Open {configure TLS} Close>Open,Close>Open,Close

When really what the end user thinks they are doing is 

Open,Open,Open  {configure TLS} Close, Close, Close

Mark

[Walter Kraembring]

Is fine I think

 at least in Safari the text of "OK" "Cancel" appears to be greyed out

I also think they should be "normal" black (tested with Chrome) 

[Nicholas O'Leary]

Thanks Mark,

I was expecting this to come up. The open/close of each tray as you work through the stack is something I've agonised over and am not 100% sure about yet.

Previously you would have had at most one node edit form and one config-node edit form visible. This is why we required a config node's edit form to use the 'node-config-input-' prefix in their element ids - to ensure they were unique on the page.

To enable us to have nested config nodes, we needed a way to handle the fact two config nodes could both have, for example, a node-config-input-name field. This is why we hide one dialog before showing the next - because we have to remove its contents to ensure this uniqueness of element ids.

I had tried various alternatives - such as blanking the tray, but leaving it open... but they didn't feel right either.

Your comment about the position of the buttons is also noted... they need to be in a predictable place, but the distance to move from the top of the screen to the bottom can be excessive.

Nick

[Neil Kolban]

I also like the new style ... however as has been said, I would like to click in the diagram space and have the tray dispose.  No comment on whether it should be close with cancel or close with ok.  In addition, I find myself having to traverse more mouse real-estate to get to the ok/cancel buttons at the bottom, this slows workflow.  What I'd suggest is that an Escape key press also dispose of the tray ... again, not sure if that should be close with or or close with cancel ... my gut says that the default should always be close with ok as that is what I will be doing 99% of the time.

Why not see if you can get some time with a professional Design Team who live and breath choices for UI design all the time.  Assuming that they are skilled professionals in their field and read and study the latest design practices, one would hope that they would be able to relieve you from the burden of UI design choices and leave you to concentrate on how something would be achieved?

[daisuke baba]

The tray looks nice as long as I play it for a short time.

The nested config nodes support is great!

However, the change for the nested configuration seems to include an issue.

When I double-clicked the mqtt configuration node, the edit tray appeared but I could still click the same configuration node as shown in the attached image.

The problem is when I double-clicked the SAME node after the edit tray appeared, Node-RED showed a new edit tray and seemed to stack it. So in order to clear all trays, I needed to click the Cancel button twice (because I double-clicked the mqtt config node twice).

Is it an expected behavior?

Step to reproduce:

1. Goto http://node-red-editor-demo.mybluemix.net/#

2. Open the config tab by clicking menu (3-bars icon) -> configuration nodes

3. Double-click a config node in the Flow 1 pane

4. Double-click a config node in the Flow 1 pane again

5. Click cancel button -> the edit tray still exists !

6. Click cancel button again -> the tray disappears

[karthhic Mukil]

hi,

Its like if i click twice on the node in flow1 cnfg tab, i have to press cancel twice, n times double click n times have to press cancel..

BR
K

[Julian Knight]

I can see the sense of this but there are a couple of UI issues for me.

First, as others have commented, the buttons are too far away. It is a LOOOOONG way to move the mouse on a large monitor. This could be partly mitigated by duplicating the buttons (or moving them) to the TOP rather than the bottom.

Secondly, on the current implementation, you can move the dialogue around the screen so that things underneath can be seen at the same time as the content of the dialogue. This will no longer be the case and will be frustrating when you need to see something on the right-hand side of the flow as you will have to cancel the dialogue, move the flow round and then try again. Not sure you can fix this. Though at least you can still zoom out which might help a little. This is especially problematic with the function node where you are more likely to have expanded the node to view the code. Also, in the current implementation, you can move/expand the edit dialogue over the debug/info panel which will no longer be possible, this will be problematic on small screens. The real answer to this is probably tear-off panels as have been talked about previously in relation to the debug panel. Then people could have the best of both worlds.

On Wednesday, 27 April 2016 15:03:01 UTC+1, Nick O'Leary wrote:

[Julian Knight]

I like the other changes, nice!

One question. With the change node, if you select regex in the search for, can you use matched strings in the replace with part? For example, a regex like /^blah(.*)-somethingmore(.*)andmore/ should give 2 string references when matched, typically used with $1 and $2 or some similar syntax.

On Wednesday, 27 April 2016 15:03:01 UTC+1, Nick O'Leary wrote:

[Nicholas O'Leary]

Julian - on the Change node, yes, as per the sidebar help on the node, you can use the $1 syntax to reference capture groups.

[Nicholas O'Leary]

Thanks to all for the feedback - it is all really useful.

I think the main points I need to look at are:

 - Ok/Cancel buttons too far away

 - The bouncing open/close effect as you go down into config node

 - Unclear the buttons are active - they look disabled

 - Can open a config node twice via the config node sidebar

[Nicholas O'Leary]

(remember folks, on Gmail, hitting Cmd/Ctrl-Enter sends the email you're in the middle of writing....)

Thanks to all for the feedback - it is all really useful.

I think the main high level design points I need to look at are:

 - Ok/Cancel buttons too far away

 - The bouncing open/close effect as you go down into config node

 - Whether the maximise/restore buttons should both be visible, or just one at a time

There are some bugs:

 - Unclear the buttons are active - they look disabled

 - Can open a config node twice via the config node sidebar

 - I hadn't restored the Ctrl-Enter / Ctrl-Escape to confirm or cancel the dialog capability we had with the existing dialog

There are some other suggestions I'm less keen on:

 - clicking outside the tray should auto-close it. We didn't have this behaviour before and my concern with adding it now is that it becomes too easy to accidentally close the tray - and whichever action that implies (confirm or cancel) could have unintended consequences.

 - the reduced width available as it doesn't overlap the sidebar. One of the main features this enables is the ability to interact with the sidebar whilst the tray is open - vital for accessing the node's help. If screen width is an issue, you can collapse the sidebar with a quick drag (or via Cmd/Ctrl-Space).

I expect to have a new version that incorporates some of this feedback in the next few days - I will share a link when it's available.

Thanks again,

Nick

[Nicholas O'Leary]

All,

I've updated the demo on Bluemix: http://node-red-editor-demo.mybluemix.net/

Summary of changes:

 - the buttons have moved to the top

 - the 'title' of the edit tray now includes breadcrumbs of the nodes you're currently editing - helps you to keep a sense of where you are in the edit process

 - config node sidebar is disabled whilst you're editing nodes

 - removed the maximise/restore buttons - may add them back in the future, but they weren't quite right, but nor should they hold things up

 - Ctrl-Enter/Escape restored to confirm/cancel the dialog

Let me know what you think.

Nick

[Neil Kolban]

Howdy Nick,

Looks much nicer now ... Thank You.

May I offer two further suggestions while you are in this area:

1) If a single node is selected in the canvas area, have an "enter key" press while the canvas has focus be a trigger to open the editing panel.

2) See the attached screen shot ... maybe place an icon of the node in the un-used space to the left of the control buttons.  Mock-up in the screen shot.

[Dave C-J]

Neil
1) what about if it's an inject node ? Should it open or inject ? What if mouse is actually over the button part and you hit enter ?
2) that area isn't always blank... The delete button for config nodes for there.

[Julian Knight]

Much easier to use now.

One minor issue. The Switch nodes "property" field doesn't resize, Same with the name field of the XML node.

[Niels vd spek]

hi Nick,

very nice idea. Altrough i have one issues, i use the node-red editor mostly on my tablet with onscreen keyboard.
When i try to edit the fuction node, the textbox height is resized somuch that it is just one small line and i cant type anything in it.

an other that i like to mention is about the top/bottom margins around cancel and done buttons, the can be a bit smaller, i think.

thanks for your work

niels

[Niels vd spek]

btw, i like the idea from Neil showing the node that is being edited. and my suggestion to Dave's question about de delete button is just replace this button with the node image.

[Nicholas O'Leary]

I've updated the demo version with the latest - http://node-red-editor-demo.mybluemix.net/

Niels - the function node should be usable again on small screens (as will the other nodes that have a component that would previously shrink to 0-pixels high). Let me know how you get on.

Nick

On 6 May 2016 at 06:36, Niels vd spek <niel...@gmail.com> wrote:

btw, i like the idea from Neil showing the node that is being edited. and my suggestion to Dave's question about de delete button is just replace this button with the node image.

--
http://nodered.org

Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.

To post to this group, send an email to node...@googlegroups.com.

[Ben Orchard]

Nick / All,

Have tried it many times on the test site, and really cant come around to liking it.....

It seems to break the flow of thought for the work in progress. Forcing us to the side panel all the time disrupts very nature of Node-Red flows.
There is a lot more mouse distance to cover every. single. time. you need to edit any node.
The constant bouncing of the side draw is really visually annoying.
Lastly, the one I just cant live with, if you have any nodes on the right of the work space, the side draw covers them and there does not appear to be anyway to show them.
This last point is the real 'deal breaker' for me.

I am not quite sure what problem this is fixing?

Thanks.

Ben.

[Julian Knight]

"nodes on the right of the work space" - it is true that you could previously move the edit box to reveal things underneath but then you couldn't see anything not already showing in the sidebar so this trades on thing for another. 

Personally I feel that the ability to see any/all of the sidebar content is worth the tradeoff as you can now copy/paste from the help or the debug output you can also now go direct to linked web help while the dialog is open which you couldn't before. 

You can offset the mouse movement by learning the keyboard shortcuts for enter and cancel. I would personally have put the buttons on the left not the right to also help that but I don't think it enough of an issue to worry about.

[Julian Knight]

Hi Nick, another small thing - not directly related. The keyboard shortcuts for enter/cancel are not in the shortcut help panel. I can remember the enter one now but I always forget the cancel shortcut, I'm so used to just being able to press cancel.

[Steve French]

Hello!

I aplogize in advance if my idea of keyboard shortcuts is wrong...

When I double-click into an edit dialog, then hit Escape, it does not equate to hitting the cancel button.  This trips me up on the current released version and the new beta version.  In my opinion "Esc" should be the same as Cancel and "Enter" the same as "Done".  I think this makes things much more speedy than using the trackpad/mouse.   Sorry if I am missing something. 

ps: On my win10 machine, hitting "Ctrl-Escape" was the same as hitting the windows superkey...ouch.

ps: Hitting CTRL along with Escape sucks compared to just using Escape (imo).

ps: Hitting Ctrl+Enter seemed to work...is this really preferred over just Enter?

thx!

frenchy (Steve French)

www.voltvision.com

[Julian Knight]

Hi Steve, I'm sure Nick will come back when he has a chance but in the meantime...

This has been discussed previously. The consensus was that Esc on it's own was a bit too easy to loose stuff. Personally I'm with you but others thought differently.