Selection in Altair layered charts

[MaWeffm]

Dear developers, dear community,

Fantastic work!

I am implementing an interactive chart viewer that is based on layered Altair plots. If I create a layered plot, the selection brush does not seem to be working, but it raises an exception that is hard for me to interpret. Is there a way to select the layer, in this case the scatter, for the selection?

Please see the minimal working example below.

import marimo

__generated_with = "0.6.13"
app = marimo.App(width="full")


@app.cell
def __():
    import altair as alt
    import marimo as mo
    import pandas as pd
    return alt, mo, pd


@app.cell
def __(pd):
    df = pd.DataFrame(data={'annotation': ["w", "x", "y", "a", "b", "c", "d", "e", "f", "g"], 'x': [-3, -2, -1, 0, 1, 2, 3, 4, 5, 6], 'y': pd.Series([9, 4, 1, 0, 1, 4, 9, 16, 25, 36], index=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9])}, index=[0, 1, 2, 3, 4, 5, 6, 7, 8, 9])
    df
    return df,


@app.cell
def __(alt, df, pd):
    scatter = alt.Chart(df).mark_point().encode(x="x", y="y", tooltip="annotation")
    y_line = alt.Chart(pd.DataFrame({'var1': [0, 0], 'var2': [0, 40]})).mark_line(color="grey").encode(alt.X('var1'),alt.Y('var2'))
    return scatter, y_line


@app.cell
def __(alt, mo, scatter, y_line):
    layer_plot = mo.ui.altair_chart(alt.layer(scatter, y_line).configure_axis(grid=False).configure_view(strokeWidth=0))

    mo.hstack([
        layer_plot
    ])
    return layer_plot,


@app.cell
def __():
    print(layer_plot.value)
    # should return a table of selected points based on the scatter plot
    # instead, always shows:
    # Empty DataFrame
    # Columns: []
    # Index: []

    return


@app.cell
def __():
    return


if __name__ == "__main__":
    app.run()

Exception:

An exception was raised by an UIElement's on_change handler:
Traceback (most recent call last):
  File "/home/user/lib/python3.11/site-packages/marimo/_runtime/runtime.py", line 1047, in set_ui_element_value
    component._update(value)
  File "/home/martin-wegner/lib/python3.11/site-packages/marimo/_plugins/ui/_core/ui_element.py", line 375, in _update
    self._value = self._convert_value(value)
                  ^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/user/lib/python3.11/site-packages/marimo/_plugins/ui/_impl/altair_chart.py", line 293, in _convert_value
    return _filter_dataframe(self.dataframe, value)
           ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "/home/user/lib/python3.11/site-packages/marimo/_plugins/ui/_impl/altair_chart.py", line 77, in _filter_dataframe
    dtype = df[field].dtype
            ~~^^^^^^^
TypeError: 'UndefinedType' object is not subscriptable

Thank you!

[mscolnick]

Looks like Altair remove the .data object (which we use to access the underlying dataframe to filter) when you make it layered.

We do provide .selections which you can use to filter the original dataframe of scatter. Another option is to add layer_plot.apply_selection_filter(dataframe) to the mo.ui.altair_chart to make this easier.

thoughts?

[mscolnick]

I am adding the .apply_selection util. PR is here: #1557
It should be in the next release