Retain current palette collapse and filter

Core Development Feature Requests
1

As Node-RED continues to mature there is a tendency for the palette list to grow.

As such, I think there are a couple of small usability improvements that might help people.

  1. Use browser localStorage to retain the current collapse/expand state of the palette.

  2. Use browser localStorage to retain the current filter state

These ensure that, if you close the Editor and come back another time or reload the Editor page, that the current collapse and filter states are retained. Particularly useful if a node you use a lot is towards the end of the list.

3 Likes
2

@knolleary, @Steve-Mcl - any core dev interest in this?

3

If I am perfectly honest, I cannot remember the last time I even used the side bar palette instead opting to ctrl+click then start typing. But I do see the value for those who are more mouse drag+drop users - I personally would not block a PR if someone wants to contribute this.

4

I made a draft here but I'm not happy with the setTimeout in the init function.

1 Like
5

Does it need a delay there at all? Certainly 1second seems like a lot?

6

It also surprises me but it doesn't work without a timeout, we'd have to find something to trigger it when the loading page has finished.

7

Would a nextTick (or SetTimeout with a delay of 0) work?

8

Maybe this is better (the "runtime-state" event is triggered I believe when everything has been loaded) :man_shrugging:

9

@Steve-Mcl It's good for you?

1 Like
10

Looks pretty straight forward and I dont see any immediate alarm bells - but that is a quick glance.

If I were pushed for an instant review, i would probably touch on 2 things:

  1. An object is more extensible than an array (future proof)
    • something like: { "palette": { "filter": "", "collapsed": [] } }
  2. There is no error handling around the JSON stringify/parse
    • While that should not normally be an issue, any problems with corrupt storage would force the user to have to manually delete localstorage entries

But by all means, raise a PR against dev (if you have not already). There is soon to be a beta refresh we could potentially get this in.

11

Thanks, I will work on these points. Is "last-palette-state" a good storage name?

12

Me personally, I'd stick with { "palette": { "filter": "", "collapsed": [] } } - but thats me.

image
image1116Ɨ1116 119 KB

13

I need to give a name to the storage (item), the content of the object is good for me.

I confirm that it is indeed the most complicated with the documentation :sweat_smile:

14

I was perhaps not clear with my suggestion. i would personally have a localstorage key named "palette" or "palette-state" and it would store a JSON representation of { "filter": "", "collapsed": [] }

15

Ok that's what I had in mind, I named it "last-palette-state" - maybe it's better just "palette-state"?

1 Like
16
1 Like
17

Neat! Thanks for doing this.

PS: Yes, ALWAYS put JSON.parse and JSON.stringify inside try/catch. I've been caught out with that far too often and now do it automatically.

2 Likes