Keeping views and inputs synchronized after sorting data

Hi everyone,

I’m trying to have several inputs in a notebook stay synchronized, but am having trouble figuring out how to structure it.

In this notebook, if you click ‘Select All’ then ‘Sort selected states by longitude’ then ‘Clear All’, the underlying data seems to get out of order so that when you go back to the multi-select and select states, the wrong ones show up.

I’ve put the sorted data into a mutable value, and it seems like that might be where it’s getting mixed up. I’ve also tried binding the multi-select to the sorted data, but that doesn’t seem to work, either. I’d appreciate any pointers.


I can’t observe the issue from your description, but sort changes ar array in place so I think the issue is


sortedData = selectedStatesData.sort((a, b) => -


sortedData = [...selectedStatesData].sort((a, b) => -

so the original selectedStatesData doesn’t get altered (we use … as a cheap way to do a clone)

Ah that’s it! Many thanks!

1 Like