Keeping selection highlight when changing chart type

[CAGLADJ]

I am currently trying to recreate the SandDance app example on https://sanddance.js.org/app/ within a Nuxt.js project.

I was able to figure out most of the functionalities, but I can't seem to find a solution for keeping the selection highlight (coloring of the cubes), when changing the chart type. At the moment, I use viewer.render to change the displayed graph, when updating the insight. So, after I select some data inside the graph, it highlights the selected data correctly. Then I click to change the chart type (using viewer.render with an updated insight), and the highlight disappears, but the selection still exists and is the same as before, because onSelectionChange isn't called

How does it work in the SandDance app example on https://sanddance.js.org/app/ to keep the selection highlight, when changing to a different chart type? Maybe I can find a solution, if I understand that.

[danmarshall]

Hello, when you call viewer.render(insight, data) make sure that the data is the exact same reference array as from the previous call. If the data is different this will cause it to deselect. If by chance you are using a spread operator, like [...dataArray] then this will create a new reference, and thus deselect.

[CAGLADJ]

Thanks for the fast reply.

I don't think, that is the problem, because a deselect would call the onSelectionChanged, right? But that doesn't happen. I use this.chartData inside my component for the Nuxt.js project. That should always be the same reference.

Should the viewer.render(insight, data) keep the highlight color for the selected cubes, if the data is the exact same reference array?

[danmarshall]

Yes, the viewer should keep the selection between insight changes. Here's a test you can try:

• open https://sanddance.js.org/tests/umd/qualBarChartTest.html
• F12 for js console
• var data = qualBarChartTest.viewer._dataScope.data
• var insight = qualBarChartTest.viewer.getInsight()
• make a selection in the UI with the mouse
• insight.columns.x = 'myZ'
• qualBarChartTest.viewer.render(insight, data)

You should see the yellow selection animate to new positions.

Are there any other parameters you are setting in viewerOptions?

[CAGLADJ]

Yes, that test worked fine on the website. I tried the exact same thing in my project, but it didn't work.

I do only set onSelectionChanged. But even when I don't set anything, the test doesn't work. I am wondering, if that is a specific problem with Nuxt.js.

[danmarshall]

Can you create a minimal GitHub repo that reproduces the issue?

[CAGLADJ]

I recreated the test, which you have provided me with, inside a Nuxt.js project. Since that project has the same issue, I will provide that as the repo.

https://github.com/CAGLADJ/SandDance-selection-test

After selecting some data in the UI, click on CHANGE in the top left and the change method gets called.

[CAGLADJ]

The problem was solved, when updating the SandDance version to "^2" inside the package.json. Since I was using vega version "^5.8".

That should be updated here under "Installation via Node.js".

[danmarshall]

Excellent! If you like, you can update the readme here and send a PR if you are willing. 🤝