Synchronizing OrgChart Layout between Main Screen and Preview Modal

[vatraiadarsh]

When users interact with the OrgChart in the chart-container which is rendered in main screen by expanding few nodes, clicking "Preview OrgChart In Modal" should show the same chart with node states preserved in the chart-container-preview.

Looking for a robust solution instead of copying inner HTML of chart-container into chart-container-preview.

Check out an interactive example https://stackblitz.com/edit/js-6vfda5?file=index.html

[bumbeishvili]

I am having a hard time understanding what's the point of it.

Anyway, you can either export img and show that, or clone node and show that

Here is a cloning version

function cloneTree() {
    let clone = d3.select('.chart-container').node().cloneNode(true);
    const modalNode = document.querySelector('.chart-container-preview');
    modalNode.innerHTML = '';
    modalNode.insertBefore(clone, modalNode.firstChild);
}

https://stackblitz.com/edit/js-upfqk4?file=index.html

[vatraiadarsh]

Basically, when you click on the preview chart button, it opens the modal with no distractions and the download as pdf or png option is only available on preview modal. it's like giving user a better view before they decide if they want to save it or not.