Unexpected JSTree state behavior

[Mr-Saltman]

So I posted this question in the Issues on this repository. Sadly, I have not received any answers yet, so I thought I might try my luck in here:

So I am using JSTree in my Django project and I am experiencing some unexpected behavior when retrieving the state.

Before I explain what the issue is, I want to introduce how I intend to use the JSTree. So I have a menu on the left side of my main page, which always stays there. The JSTree is located in this menu and functions like an explorer, giving the user an interface to navigate through the objects displayed, just like folders in e.g. windows explorer. When the user (for instance) adds new objects (that are displayed in the JSTree), he is returned to the main page, where the JSTree is destroyed and reinitialized (thats the current implementation, I might opt to change it in the future tho). My desired behavior would be, that the JSTree keeps its state, so if the user decides to add/delete/edit an object, he does not have to open the folder structure again, to reach the point where he was before.

Currently, everything expect restoring the state is working properly. Although, there is a scenario, where it behaves as expect.
There are two different scenarios:

1.) When I am on the main page and refresh the page in my browser, the JSTree restores the state as expected, which is great.

2.) When I click on the Logo on the top menu (which hrefs the user to the main page, in whichs html the tree script is located), the tree does only restore the state of top-level objects. So every objects that were opened below top level will be closed, which seems kind of odd, since in the local storage, the value of the jstree seems to be the state the tree should be in, but in fact it is not. I guess it is having trouble retrieving the state from the local storage?

As far as I understand, the behavior should be the same in both scenarios, since its basically just running the script in my html either way, so I am unable to explain this behavior.

My script looks like this:

<script>
    function formatData(data) {
    var formattedData = [];

    data.forEach(function (node) {
        var formattedNode = {
            'id': node.id,
            'text': node.text,
            'state': node.state,
            'data': node.data,
            'children': formatData(node.children || []) // Recursively format the children
        };

        formattedData.push(formattedNode);
    });

    return formattedData;
    }

    $.getScript("{% static 'cabinets/node_modules/jstree/dist/jstree.min.js' %}")
        .done(function() {
            function initJSTREE() {
                var jstreeElement = $('#jstree_global');

                jstreeElement.jstree('destroy');

                jstreeElement
                    .on('select_node.jstree', function(e, data) {
                        if (data.selected.length) {
                            partialNavigation.setLocation(data.instance.get_node(data.selected[0]).data.href);
                            }
                        })
                    .jstree({
                        'core': {
                        'data': function(node, callback) {
                            $.ajax({
                                'url': "{% url 'common:jstreerefreshview' %}",
                                'dataType': 'json',
                                'success': function(data) {
                                    console.log('Data collected: ', data);
                                    callback.call(this, formatData(data));
                                }
                            });
                            },
                            'themes': {
                                'responsive': true
                            },
                            'check_callback': true
                        },
                        'plugins': ['state']
                    });
        }
        
        initJSTREE();
        })
        .fail(function(jqxhr, settings, exception) {
            console.error('Error loading jstree.min.js:', exception);
        });
</script>

When the jstree.min.js is loaded, the jstree is destroyed and reinitialized (I also tried redraw and refresh, but this will not update the tree data). Recently I tried to run a function (on 'state_ready.jstree') that checks if the current State (receiving from get_state()) does contain the same objects in the "open" array as the localStorage jstree item - and if so, reload the page - which sadly causes the page to keep on reloading forever. Since I run the function on 'state_ready', I am not sure why this temporary solution does not work aswell, since normally, after reloading manually, the jstree succeeds on retrieving its state from the localStorage.

I am looking forward to any ideas or suggestions,

Thank you in advance!