[Bug] Tree chart: expanded/collapsed state of parent nodes is reset on zoom

[undeletable]

Version

5.4.3

Link to Minimal Reproduction

https://jsfiddle.net/undeletable/zrau5scd/

Steps to Reproduce

1. Create tree chart.
2. Expand/collapse some nodes, so that overall state is different from the initial one.
3. Change chart zoom.

Current Behavior

Expanded/collapsed state of nodes is reset to the initial one. Obviously, that occurs because change of series value call triggers chart rerender. Note that this is the case even if reference to series remains unchanged (see https://jsfiddle.net/undeletable/z8cvfg23/).

Expected Behavior

According to #16743, dataZoom property is not supported for tree charts. So the only way to change zoom is to change series.zoom property in options. Obviously, this triggers chart rerender, but as a user I'd expect chart state to be persisted if only zoom changes - no matter if it's done using current way, or if any analog for dataZoom is introduced.

Environment

- OS:Linux Mint 19.3
- Browser:Google Chrome 119.0.6045.123
- Framework:Vanilla JS, React

Any additional comments?

No response

[helgasoft]

the only way to change zoom is to change series.zoom property in options.

did you try roam:true for zooming ? Just add it in the tree series of the official example

[undeletable]

@helgasoft
roam value is true in both examples I've provides links to. I believe there might be a kind of confusion here. When I say 'zooming' in context of this issue, I mean zoom in/zoom out using external UI controls (like buttons, as it can be seen in my example), not zooming by msing mouse wheel or anything similar.

[helgasoft]

ok, got it, and feel your pain. Controlling by zoom is tough (to the point of impractical) since one has to save all collapse/expand user actions, like myChart.on('click', 'series', (x) => { console.log(x.treeAncestors, x.collapsed) }),
then restore them after each manual zoom.

[undeletable]

I was able to work this around without introducing additional complication of preserving the nodes state. Instead of using series.zoom, I just change width and height of parent element (e.g., if initial width is 1000px, the width after 1.5x zoom would be 1500px), and when they change, I call resize() method of chart instance, passing {height: "auto", width: "auto"} as argument.

[FrontMizfaTools]

Have the same issue.
why should setOption series reset the state of nodes ?!
for example i want to use a slider to change the fontSize of tree labels which is in series
but the expand and collapse will reset for whole data

[Aleksashka11]

Are there any updates on this issue?
It's quite frustrating that setOption resets the state of nodes, as it disrupts the intended behaviour.
Could you please provide a fix or a workaround for this?

[LesiaPavlenko]

Also waiting for fixing the bug)

[LaykDimon]

the issue with the setOption is really frustrating, looking forward to the update as well

[im67]

In the data of the series, the collapsed field controls expansion/collapse. So a feasible way is to modify the value of the collapsed field in the click event for expansion/collapse. A simple example is as follows:

    treeChart.on('click', function (params) {
        if (params.componentType === 'series') {
            params.data.collapsed = !params.data.collapsed;
        }
    });

  // on Zoom
const onZoom = () => {
  const opt = treeChart.getOption();
  treeChart.setOption({
    series: [
        {
            zoom: opt.series[0].zoom + 0.1
        }
    ]
  })
}

then you can see that the expanded/collapsed state is correctly preserved. As a temporary solution, I hope it can help others
:)