Summary

The new interactive legend feature of Altair 4.x does not work when displaying charts with both altair_chart and write. The feature does work with identical code in a JupyterLab notebook.

Steps to reproduce

Test app pulled from Altair documentation:

import streamlit as st
import altair as alt
from vega_datasets import data

source = data.unemployment_across_industries.url

selection = alt.selection_multi(fields=['series'], bind='legend')

chart = alt.Chart(source).mark_area().encode(
    alt.X('yearmonth(date):T', axis=alt.Axis(domain=False, format='%Y', tickSize=0)),
    alt.Y('sum(count):Q', stack='center', axis=None),
    alt.Color('series:N', scale=alt.Scale(scheme='category20b')),
    opacity=alt.condition(selection, alt.value(1), alt.value(0.2))
).add_selection(
    selection
)

st.altair_chart(chart)

st.write(chart)

Expected behavior:

The legend should be clickable, with data series being filtered to the selected legend entries.

Actual behavior:

Nothing happens when the legend is clicked. There are no JS errors in the console output.

Is this a regression?

no

Debug info

• Streamlit version: 0.53.0
• Python version: 3.7.6
• Altair version: 4.0.1
• Using Conda? PipEnv? PyEnv? Pex? Conda, pip
• OS version: Linux 5.0.0-37-generic Widgets with identical "ids" should raise exception #40~18.04.1-Ubuntu SMP
• Browser version: Chrome 79.0.3945.130 / Firefox 72.0.1 (64-bit)

Additional information