Add online JupyterChart widget based on AnyWidget

.gitignore

@@ -74,4 +74,4 @@ Untitled*.ipynb
 .vscode
 
 # hatch, doc generation
-data.json
+data.json

altair/__init__.py

@@ -234,6 +234,7 @@
     "JoinAggregateFieldDef",
     "JoinAggregateTransform",
     "JsonDataFormat",
+    "JupyterChart",
     "Key",
     "LabelOverlap",
     "LatLongDef",
@@ -569,6 +570,7 @@
     "expr",
     "graticule",
     "hconcat",
+    "jupyter",
     "layer",
     "limit_rows",
     "load_ipython_extension",
@@ -607,6 +609,7 @@ def __dir__():
 
 
 from .vegalite import *
+from .jupyter import JupyterChart
 
 
 def load_ipython_extension(ipython):

altair/jupyter/__init__.py

@@ -0,0 +1,20 @@
+try:
+    import anywidget  # noqa: F401
+except ImportError:
+    # When anywidget isn't available, create stand-in JupyterChart class
+    # that raises an informative import error on construction. This
+    # way we can make JupyterChart available in the altair namespace
+    # when anywidget is not installed
+    class JupyterChart:
+        def __init__(self, *args, **kwargs):
+            raise ImportError(
+                "The Altair JupyterChart requires the anywidget \n"
+                "Python package which may be installed using pip with\n"
+                "    pip install anywidget\n"
+                "or using conda with\n"
+                "    conda install -c conda-forge anywidget\n"
+                "Afterwards, you will need to restart your Python kernel."
+            )
+
+else:
+    from .jupyter_chart import JupyterChart  # noqa: F401

altair/jupyter/js/README.md

@@ -0,0 +1,2 @@
+# JupyterChart
+This directory contains the JavaScript portion of the Altair `JupyterChart`. The `JupyterChart` is based on the [AnyWidget](https://anywidget.dev/) project.

altair/jupyter/js/index.js

@@ -0,0 +1,79 @@
+import embed from "https://cdn.jsdelivr.net/npm/vega-embed@6/+esm";
+import debounce from 'https://cdn.jsdelivr.net/npm/just-debounce-it@3.2.0/+esm'
+
+export async function render({ model, el }) {
+    let finalize;
+
+    function showError(error){
+        el.innerHTML = (
+            '<div style="color:red;">'
+            + '<p>JavaScript Error: ' + error.message + '</p>'
+            + "<p>This usually means there's a typo in your chart specification. "
+            + "See the javascript console for the full traceback.</p>"
+            + '</div>'
+        );
+    }
+
+    const reembed = async () => {
+        if (finalize != null) {
+          finalize();
+        }
+
+        let spec = model.get("spec");
+        let api;
+        try {
+            api = await embed(el, spec);
+        } catch (error) {
+            showError(error)
+            return;
+        }
+
+        finalize = api.finalize;
+
+        // Debounce config
+        const wait = model.get("debounce_wait") ?? 10;
+
+        const initialSelections = {};
+        for (const selectionName of Object.keys(model.get("_vl_selections"))) {
+            const selectionHandler = (_, value) => {
+                const newSelections = JSON.parse(JSON.stringify(model.get("_vl_selections"))) || {};
+                const store = JSON.parse(JSON.stringify(api.view.data(`${selectionName}_store`)));
+
+                newSelections[selectionName] = {value, store};
+                model.set("_vl_selections", newSelections);
+                model.save_changes();
+            };
+            api.view.addSignalListener(selectionName, debounce(selectionHandler, wait, true));
+
+            initialSelections[selectionName] = {value: {}, store: []}
+        }
+        model.set("_vl_selections", initialSelections);
+
+        const initialParams = {};
+        for (const paramName of Object.keys(model.get("_params"))) {
+            const paramHandler = (_, value) => {
+                const newParams = JSON.parse(JSON.stringify(model.get("_params"))) || {};
+                newParams[paramName] = value;
+                model.set("_params", newParams);
+                model.save_changes();
+            };
+            api.view.addSignalListener(paramName, debounce(paramHandler, wait, true));
+
+            initialParams[paramName] = api.view.signal(paramName) ?? null
+        }
+        model.set("_params", initialParams);
+        model.save_changes();
+
+        // Param change callback
+        model.on('change:_params', async (new_params) => {
+            for (const [param, value] of Object.entries(new_params.changed._params)) {
+                api.view.signal(param, value);
+            }
+            await api.view.runAsync();
+        });
+    }
+
+    model.on('change:spec', reembed);
+    model.on('change:debounce_wait', reembed);
+    await reembed();
+}