Google Colab interactive chart scroll (zoom) in and out

[earlev4]

Hi! First off, a huge thanks to Hex and the contributors of the project! Recently learned about the project and it looks very promising!

I am attempting to use VegaFusion in interactive mode in Google Colab using vf.enable_widget().

The versions of Altair and VegaFusion are:

altair version: 5.0.0rc1
vegafusion version: 1.0.4

When creating a bar plot or a scatter plot in Altair, I can zoom in and out using the scroll wheel. This behavior is more important in a scatter plot to zoom in on particular points. However, when I create the same plots with VegaFusion, I am unable to zoom in and out using the scroll wheel. However, on a scatter plot, I am able to experience some interactive behavior with tooltips.

Forgive me if this is a known issue or intended behavior. I checked the documentation and did not see any mention of this functionality. In addition, I searched GitHub issues and was unable to find any similar reports.

I found a reference to Google Colab in this issue, but the issue did not address the scroll behavior:
Support Colab #55

I created a Google Colab notebook to reproduce the issue.
VegaFusion_scroll_issue.ipynb

Thanks so much in advance for the assistance! I appreciate it.

[jonmmease]

Hi @earlev4, thanks for the kind words and for the helpful bug report.

From the example you shared, it looks like you've omitted the .interactive() call from the two VegaFusion examples. But when I add .interactive(), there seems to be an error. Colab doesn't show the error details, but when I run the example in a local JupyterLab session the following error is displayed:

Failed to create view for 'VegaFusionView' from module 'vegafusion-jupyter' with model 'VegaFusionModel' from module 'vegafusion-jupyter'
Error: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
    at form (http://localhost:8890/lab/extensions/vegafusion-jupyter/static/vendors-node_modules_vega_build_vega_module_js.8f81c67f6ad0b4498a8f.js:51444:12)
    at generate (http://localhost:8890/lab/extensions/vegafusion-jupyter/static/vendors-node_modules_vega_build_vega_module_js.8f81c67f6ad0b4498a8f.js:51431:3)
    at bind (http://localhost:8890/lab/extensions/vegafusion-jupyter/static/vendors-node_modules_vega_build_vega_module_js.8f81c67f6ad0b4498a8f.js:51358:3)
    at http://localhost:8890/lab/extensions/vegafusion-jupyter/static/vendors-node_modules_vega_build_vega_module_js.8f81c67f6ad0b4498a8f.js:51641:7
    at Array.forEach ()
    at View.initialize (http://localhost:8890/lab/extensions/vegafusion-jupyter/static/vendors-node_modules_vega_build_vega_module_js.8f81c67f6ad0b4498a8f.js:51640:16)
    at Module.__wbg_initialize_b444e32c71b3bf31 (http://localhost:8890/lab/extensions/vegafusion-jupyter/static/vendors-node_modules_vegafusion-wasm_vegafusion_wasm_js.b537a55d69ab2f4290a1.js:18409:21)
    at __wbg_initialize_b444e32c71b3bf31 (http://localhost:8890/lab/extensions/vegafusion-jupyter/static/remoteEntry.b23969d19fd71caefcbb.js:798:84)
    at http://localhost:8890/lab/extensions/vegafusion-jupyter/static/dab076d032b9a0c57835.module.wasm:wasm-function[114]:0xab51b
    at http://localhost:8890/lab/extensions/vegafusion-jupyter/static/dab076d032b9a0c57835.module.wasm:wasm-function[6049]:0x531b30
chart2 = alt.Chart(cars).mark_point().encode(

I'll dig into it!

[jonmmease]

Oh! I think I found the issue. It's a bit subtle, but Altair 5.0.0-rc1 was updated to use Vega-Lite 5.6.1. The VegaFusionWidget bundles it's own copy of Vega-Lite, but as of VegaFusion 1.0.4, the version of this copy matches that used by Altair 4.2.0 (Vega-Lite 4.17.0).

This is a good reminder that we should update Vega-Lite in VegaFusionWidget for the next VegaFusion release (which will be 1.1.0).

So here are your current options:

1. Downgrade Altair to 4.2.0 and add the .interactive() call to the charts before displaying them with VegaFusionWidget.
2. Wait until next week when we release VegaFusion 1.1.0
3. Use the VegaFusion Mime Renderer (enabled with vf.enable()) instead of the Widget Renderer. The mime renderer reuses the Altair rendering logic, so it will always use the same version of Vega-Lite that Altair is using. The Mime Renderer provides nearly the same benefit as the widget renderer for charts that don't interactively filter data based on selections.

Hope that helps! We're planning to do at least one more release candidate for VegaFusion 1.1.0, and I'll ping you when that's available with the updated version of VegaFusionWidget.

[earlev4]

Hi @jonmmease! Thank you very, very much for the assistance! I am grateful for your expertise and time.

Your response definitely helps. I tested both options 1 and 3, which worked perfectly.

Looking forward to the next release.

Thanks again! I sincerely appreciate the prompt response and help!