Interaction->'Details on demand' example on Altair v5.x

[sergio-dr]

Hi,

first of many thanks for this excellent tutorial.

I was trying to update the example at https://uwdata.github.io/visualization-curriculum/altair_interaction.html#details-on-demand to Altair v5.x but did't quite get it working properly.

When running the following (updated) code, all the labels and halos appear on the chart simultaneously.

import altair as alt

movies = 'https://cdn.jsdelivr.net/npm/vega-datasets@1/data/movies.json'

hover = alt.selection_point(
    on='mouseover',  # select on mouseover
    nearest=True,    # select nearest point to mouse cursor
    empty=False     # empty selection should match nothing
)

click = alt.selection_point(
    empty=False # empty selection matches no points
)

# scatter plot encodings shared by all marks
plot = alt.Chart().mark_circle().encode(
    x='Rotten_Tomatoes_Rating:Q',
    y='IMDB_Rating:Q'
)
  
# shared base for new layers
base = plot.transform_filter(
    hover | click # filter to points in either selection
)

# layer scatter plot points, halo annotations, and title labels
alt.layer(
    plot.add_params(hover, click),
    base.mark_point(size=100, stroke='firebrick', strokeWidth=1),
    base.mark_text(dx=4, dy=-8, align='right', stroke='white', strokeWidth=2).encode(text='Title:N'),
    base.mark_text(dx=4, dy=-8, align='right').encode(text='Title:N'),
    data=movies
).properties(
    width=600,
    height=450
)

If I filter only by hover or click on transform_filter(), the behaviour is as expected. What I'm doing wrong? It seems that the 'or' (hover | click) predicate is not working properly when either hover or click selections don't convey any data points.

Thanks in advance,
Sergio