vegafusion: Support Panel/ Does not work with Panel

Hi John

Congrats with VegaFusion.

I just tried it out with Panel. I would expect/ hope it would work as an ipywidget. But it does not.

pip install panel vegafusion-jupyter vega-datasets ipywidgets_bokeh
import panel as pn
import altair as alt
from vega_datasets import data

import vegafusion_jupyter as vf
vf.enable()

pn.extension("ipywidgets", template="fast")

ACCENT = "#1f77b4"
PALETTE = [ACCENT, "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"]

if not "panel-vegafusion" in pn.state.cache:
    seattle_weather = pn.state.cache["panel-vegafusion"]=data.seattle_weather()
else:
    seattle_weather = pn.state.cache["panel-vegafusion"]

def get_chart(seattle_weather):
    brush = alt.selection(type='interval', encodings=['x'])

    bars = alt.Chart().mark_bar().encode(
        x='month(date):O',
        y='mean(precipitation):Q',
        opacity=alt.condition(brush, alt.OpacityValue(1), alt.OpacityValue(0.7)),
    ).add_selection(
        brush
    )

    line = alt.Chart().mark_rule(color='firebrick').encode(
        y='mean(precipitation):Q',
        size=alt.SizeValue(3)
    ).transform_filter(
        brush
    )

    return alt.layer(bars, line, data=seattle_weather)

chart = get_chart(seattle_weather)

pn.panel(chart).servable()

pn.state.template.param.update(
    site="Vegafusion", title="Interactive Big Data Apps with Crossfiltering",
    accent_base_color=ACCENT, header_background=ACCENT
)
panel serve panel_vegafusion_app.py --static-dirs _vegafusion_data=./_vegafusion_data

image

WARN Loading failed _vegafusion_data/vegafusion-7bd7f9dd903be78e727c1b52e745f4f17d1212dd.feather SyntaxError: Unexpected token A in JSON at position 0

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 23

Most upvoted comments

nice! Did you end up needing #63? I’d say don’t worry about the re-implementing the dropdown menu for now (unless you already have) since I’m planning to move that logic into the WebAssembly layer.

vegafusion-wasm is published to npm: https://www.npmjs.com/package/vegafusion-wasm. In includes JavaScript/TypeScript bindings, so hopefully could could treat it as a regular dependency.

Do you now if the current way of communication is “official”,

I think so. send here is a method on the WidgetModel class.

https://github.com/jupyter-widgets/ipywidgets/blob/64560324517844485a3c31e4dbb5e0550327a369/packages/base/src/widget.ts#L163-L175

I think the issue may be related to this line

https://github.com/vegafusion/vegafusion/blob/4f261d0aea9eaf1c220de29c5f396d95025e4af2/python/vegafusion-jupyter/src/widget.ts#L242

The second argument to send as an array of binary ArrayBuffers. Jupyter Widgets serializes these as binary (not JSON). The issue may be similar to what I ran into with Colab (https://github.com/vegafusion/vegafusion/issues/55).

For better ecosystem support, it might be better to get rid of the use of send and instead pass data between client and server by assigning to dedicated Traitlet properties. This is what I did for the plotly FigureWidget which works at least in Colab.

Thanks for giving it a try @MarcSkovMadsen! I’m not familiar with the internals of how Panel provides support for Jupyter Widgets. But it would definitely be great to either get this working, or to provide a dedicated Panel extension.