# Retain current palette collapse and filter

**URL:** https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884
**Category:** Feature Requests
**Created:** [25 February 2024 13:45 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884 "2024-02-25T13:45:01Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [25 February 2024 13:45 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/1 "2024-02-25T13:45:01Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [25 March 2024 15:45 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/2 "2024-03-25T15:45:40Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [25 March 2024 15:51 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/3 "2024-03-25T15:51:51Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [25 March 2024 19:51 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/4 "2024-03-25T19:51:46Z")

</div>

I made a draft [here](https://github.com/GogoVega/node-red/commit/9a07fc03c605c55f4528cddd2b237a9e340534c1) but I'm not happy with the `setTimeout` in the `init` function.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [25 March 2024 20:07 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/5 "2024-03-25T20:07:24Z")

</div>

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

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [25 March 2024 20:15 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/6 "2024-03-25T20:15:17Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [25 March 2024 22:17 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/7 "2024-03-25T22:17:23Z")

</div>

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

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [26 March 2024 12:08 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/8 "2024-03-26T12:08:09Z")

</div>

Maybe this is better (the "runtime-state" event is triggered I believe when everything has been loaded) 🤷‍♂️

> **[Comparing node-red:dev...GogoVega:retain-palette-state · node-red/node-red](https://github.com/node-red/node-red/compare/dev...GogoVega:node-red:retain-palette-state)**
>
> Low-code programming for event-driven applications - Comparing node-red:dev...GogoVega:retain-palette-state · node-red/node-red

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [26 March 2024 13:49 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/9 "2024-03-26T13:49:04Z")

</div>

@Steve-Mcl It's good for you?

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [26 March 2024 14:05 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/10 "2024-03-26T14:05:42Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [26 March 2024 14:10 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/11 "2024-03-26T14:10:34Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [26 March 2024 14:45 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/12 "2024-03-26T14:45:38Z")

</div>

> [@GogoVega](#):
>
> Is "last-palette-state" a good storage name

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

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/1/5176a9c7696fd5417a61ba5c813ce85489de4556.jpeg)

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [26 March 2024 14:48 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/13 "2024-03-26T14:48:16Z")

</div>

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 😅

---

<div class="post-metadata">

### Author: ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [26 March 2024 14:56 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/14 "2024-03-26T14:56:40Z")

</div>

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": [] }`

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [26 March 2024 14:59 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/15 "2024-03-26T14:59:13Z")

</div>

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

---

<div class="post-metadata">

### Author: ![GogoVega](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gogovega/32/71313_2.png) [@GogoVega](https://discourse.nodered.org/u/GogoVega)
#### Post date: [26 March 2024 16:07 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/16 "2024-03-26T16:07:05Z")

</div>

> <https://github.com/node-red/node-red/pull/4623>
>
> \<!--
> \## Before you hit that Submit button....
> 
> Please read our \[contribution …guidelines\](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md)
> before submitting a pull-request.
> 
> \## Types of changes
> 
> What types of changes does your code introduce?
> Put an \`x\` in the boxes that apply
> \--\>
> 
> \- \[\] Bugfix (non-breaking change which fixes an issue)
> \- \[x\] New feature (non-breaking change which adds functionality)
> 
> \<!--
> If you want to raise a pull-request with a new feature, or a refactoring
> of existing code, it \*\*may well get rejected\*\* if it hasn't been discussed on
> the \[forum\](https://discourse.nodered.org) or
> \[slack team\](https://nodered.org/slack) first.
> 
> \--\>
> 
> \## Proposed changes
> 
> 
> 
> Use browser localStorage to retain the current collapsed/expanded state of the palette.
> Use browser localStorage to retain the current palette filter state.
> 
> The request comes from the \[forum\](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884).
> 
> \## Checklist
> 
> 
> \- \[x\] I have read the \[contribution guidelines\](https://github.com/node-red/node-red/blob/master/CONTRIBUTING.md)
> \- \[x\] For non-bugfix PRs, I have discussed this change on the forum/slack team.
> \- \[x\] I have run \`npm run test\` to verify the unit tests pass
> \- \[\] I have added suitable unit tests to cover the new/changed functionality

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [26 March 2024 17:50 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/17 "2024-03-26T17:50:42Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [25 May 2024 17:51 UTC](https://discourse.nodered.org/t/retain-current-palette-collapse-and-filter/85884/18 "2024-05-25T17:51:19Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.