All Trees - Everything is Highlighted and Being Interacted With

[carlosmbe]

Describe the bug
It starts out with the node being constantly reselected and if you reopen the same tree everything is being interacted with.

This happens if you have two tabs of the same tree open.

To Reproduce
Steps to reproduce the behavior:

1. Go to a tree and select a node
2. Duplicate the tab
3. Click on the whitespace of the tree
4. See error

This error is easier studied when you have a smaller tree. For example if you collapse the tree. Some really funky stuff happens. Also still investigating this point but it does not have to exclusively be the same tree that is open in another tab. For example, in some occurrences I have had this issue with Storage + Taxon Tree Tabs

Expected behavior
Not this

Screen Recording
It's too big for GitHub so it's on Specify Google Drive.

https://drive.google.com/file/d/1bvmcqa_oqACyfYqJiR9_vcrdzykO5hgb/view?usp=sharing

Desktop:

OS: Mac OSx Ventura
Browser: Chrome
Specify 7 Version: 7.8.12

[carlosmbe]

So this Issue can force a Failed to Fetch Error.
For reference see this video. This is not due to test panel restarting. Both tabs are doing this trippy thing

https://drive.google.com/file/d/1uh7xtlXJVar_0Nk0Prkxs4ERz94GFHey/view?usp=share_link

Specify 7 Crash Report - 2023-06-08T18_58_02.886Z (1).txt

Specify 7 Crash Report - 2023-06-08T18_58_02.886Z.txt

[maxpatiiuk]

Fixed in #3388. Can you please try to replicate on that branch?

[carlosmbe]

@maxpatiiuk Issue is very much present in use-dynamic-ranks branch.
Sorry :c
Jason had the same though earlier.

[maxpatiiuk]

It happens because of localStorage synchronization between the browser tabs. Happens either because the value is updated too quickly, so i.e, tab 1 sets value to a and notifies all tabs. tab 2 receives new value and sets it to a and emits an event, but by that time tab 1 already set the value to b, so now tab 2 receives b, sets it, and emits event, and so on in a loop - get's worse when there are several tabs.

There was also a separate bug that I tried to fix on the use-dynamic-ranks: it is not supposed to trigger a change even if value received from the other tab is same as current value, however it didn't correctly handle cases when value is an object as === is always false for separate objects - that is fixed by converting to JSON

[maxpatiiuk]

I suspect this is caused by local storage syncing between tabs. We need to find a way to fix this, while still preserving localstorage sync.

See the user-submitted video:

Specify.issue.20230522_141657.1.mp4

This happens when there are multiple tabs open with different items selected. This has been reported a number of times.

Reported By: Robyn at RBGE

One of our users has reported an issue with the selection box when in the taxon tree. She found that it was flickering , so tried to select a different taxon to move the box, in the hope of stopping the flickering. This resulted in two taxa being selected, and the boxes were still flickering. She tried refreshing the page, but this didn’t stop the flickering. The only way she found to stop it was to close and reopen the taxon tree.

[carlosmbe]

@grantfitzsimmons Flickering is still present when using use-dynamic-ranks branch. Issue recreated.

Screen.Recording.2023-09-25.at.3.14.12.PM.mp4