Behavior of on_selection callback attached to multiple subplots

📊 Plotly Python
1

EDIT: Since we seem to agree this could be a bug, I created an issue here: Behavior of on_selection callback attached to multiple subplots · Issue #3538 · plotly/plotly.py · GitHub

I have a project with many subplots in one figure, and I’m trying to use a callback function to define behavior when a selection is made in a subset of the subplots. Since the selection behavior I want for each subplot is very similar, I really would like to avoid writing a unique callback function for each unique subplot–so I wrote one handler and attached it to all the subplots. However, it is having some strange issues:

  1. When making selections in some subplots, the behavior works perfectly as expected.
  2. For other subplots, I get erratic behavior. Sometimes none of the code in the callback is run, sometimes part of it runs. If I watch the plotting window very closely, I can actually see the callback execute correctly for a brief moment, maybe a few milliseconds. Then it reverts back to an inconsistent state from either before the callback ran, or as though part of it ran, but crashed.

I have tried to boil my issue down to the smallest code example I can. In the example, there are two subplots stacked vertically. The single callback function is attached to both plots.

Intended Behavior
When a horizontal box selection is made in either of the subplots, the same selection range is made in the other subplot.

Actual Behavior
Selections made in the lower plot behave as designed. Selections made in the upper plot flash the correct result for a split second, then revert back to pre-callback state.

Gif of the issue happening:
Peek 2022-01-05 15-46

import pandas as pd
import plotly.graph_objects as go
from plotly.callbacks import BoxSelector
from plotly.express import colors
from plotly.subplots import make_subplots

# generate two sample data for subplots
df1: pd.DataFrame = pd.DataFrame(
    {"x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], "y": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]}
)
df1.name = "df1"
df2: pd.DataFrame = pd.DataFrame(
    {
        "x": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        "y": [9, 8, 7, 6, 5, 4, 3, 2, 1, 0, 1, 2, 3],
    }
)
df2.name = "df2"

# generate plotting window
fig: go.FigureWidget = go.FigureWidget(make_subplots(rows=2, cols=1, shared_xaxes=True))
fig.add_trace(
    go.Scattergl(
        x=df1["x"],
        y=df1["y"],
        name=df1.name,
        selected=dict(marker=dict(color=colors.qualitative.Dark24[5])),
    ),
    row=1,
    col=1,
)
fig.add_trace(
    go.Scattergl(
        x=df2["x"],
        y=df2["y"],
        name=df2.name,
        selected=dict(marker=dict(color=colors.qualitative.Dark24[5])),
    ),
    row=2,
    col=1,
)


def selection_callback_handler(trace, points, selector) -> None:
    # Can't use 0 points
    if not points.xs:
        return
    if len(points.point_inds) < 2:  # redundant I guess
        return

    # Don't use lasso select
    if not isinstance(selector, BoxSelector):
        return

    # Only use continuous horizontal select
    if not all(y - x == 1 for x, y in zip(points.point_inds, points.point_inds[1:])):
        return

    # Determine from which DataFrame we should pull the selection boundary
    context_df: pd.dataFrame
    if points.trace_name == df1.name:
        context_df = df1
        fig.layout.title = "df1"
    elif points.trace_name == df2.name:
        context_df = df2
        fig.layout.title = "df2"
    else:
        return

    # Maybe we are reentrant when a selection is added/modified from this callback?
    # Try to guard but probably won't work in race condition...
    # TODO try lock or semaphore with timeout?
    if fig.data[0].selectedpoints and fig.data[1].selectedpoints:
        return

    # get selection boundary
    x_min_point: int = points.point_inds[0]
    x_max_point: int = points.point_inds[-1]

    x_min: int = context_df.iloc[x_min_point]["x"]
    x_max: int = context_df.iloc[x_max_point]["x"]

    fig.data[0].selectedpoints = df1[
        df1["x"].between(x_min, x_max, inclusive=True)
    ].index.values

    fig.data[1].selectedpoints = df2[
        df2["x"].between(x_min, x_max, inclusive=True)
    ].index.values


fig.data[0].on_selection(selection_callback_handler)
fig.data[1].on_selection(selection_callback_handler)

fig

Apologies for my code quality; I recently found myself in a data science role at work, and this is all new to me :slight_smile:

$ uname -a
Linux [REDACTED] 5.15.0-2-amd64 #1 SMP Debian 5.15.5-2 (2021-12-18) x86_64 GNU/Linux

$ code --version
1.63.2
899d46d82c4c95423fb7e10e68eba52050e30ba3
x64

$ python --version
Python 3.10.1

$ pip freeze | grep -e pandas -e plotly -e ipywidgets -e ipykernel
ipykernel==6.6.0
ipywidgets==7.6.5
pandas==1.3.5
plotly==5.5.0
2

Hi Edward, @Yankee
Welcome to the community. Can you please share your callback as well, so we can replicate the error you’re getting locally on our computer?

3

Hi @adamschroeder , thanks for the welcome and the quick reply. I believe the code I posted is already full working example of the issue. The callback function is that part which says def selection_callback_handler(trace, points, selector) -> None:

EDIT: Yes, I just checked that the example works. If I can provide additional details, ask away.

4

Hi Edward,
when I run it on my computer, Windows, it works. At first, it asked me to install ipywidgets>=7.0.0 Once I did that, it worked perfectly for both charts. Would you like to add a gif that shows the unwanted behavior on your end?

5

@adamschroeder
Interesting, thank you for trying it. I updated my OP with OS and ipywidgets version details, and here is a gif of the issue:

Peek 2022-01-05 15-46

6

that’s really weird. On my computer it works. Let me send you a private message to see if we can figure out the reason behind the difference.

7

Updating thread to report that the issue exists in pure jupyter-lab as well as the jupyter in visual studio code

2 Likes