How to handle click events with Plotly charts

[masenf]

On discord user sgaseretto asks:

Are there any examples on how to handle events in plotly charts? I found that you can define callbacks for charts but when trying to implement it with a test chart, moving what I can to a MapState, I get errors or nothing happens. Can someone help me with this? This one is the last version I tryied, and it does not work:

import reflex as rx
import plotly.graph_objects as go

import numpy as np
np.random.seed(1)

class MapState(rx.State):
    fig: go.Figure
    # scatter: go.Scatter
    colors: List[str] = ['#a3a7e4'] * 100
    size: List[int] = [10] * 100


    def update_point(self, trace, points, selector):
        print('click made')
        c = list(self.scatter.marker.color)
        s = list(self.scatter.marker.size)
        for i in points.point_inds:
            c[i] = '#bae2be'
            s[i] = 20
            with self.fig.batch_update():
                self.scatter.marker.color = c
                self.scatter.marker.size = s

def map():
    x = np.random.rand(100)
    y = np.random.rand(100)
    MapState.fig = go.Figure([go.Scatter(x=x, y=y, mode='markers')])
    # fig = go.FigureWidget([go.Scatter(x=x, y=y, mode='markers')])
    # fig = go.Figure([go.Scatter(x=x, y=y, mode='markers')])

    # MapState.scatter = MapState.fig.data[0]
    scatter = MapState.fig.data[0]
    # colors = ['#a3a7e4'] * 100
    # scatter.marker.color = colors
    # MapState.scatter.marker.color = MapState.colors
    scatter.marker.color = MapState.colors
    # scatter.marker.size = [10] * 100
    # MapState.scatter.marker.size = MapState.size
    scatter.marker.size = MapState.size
    MapState.fig.layout.hovermode = 'closest'


    scatter.on_click(MapState.update_point)

    return rx.center(
        rx.text("Map"),
        rx.plotly(data=MapState.fig, height="400px")
    )

app = rx.App()
app.add_page(map, route="/map")

[masenf]

First of all, the map() is acting as a frontend component. This function cannot imperatively define the figure outside of the MapState. To access vars associated with the state, the figure must be defined in an event handler, in order for the state to serialize it and send the data to the frontend to be rendered.

I have created the load_map event handler, and use that to define the figure, accessing self.colors and self.size instead of MapState.colors and MapState.size.

After making this change the code looks like

from typing import List

import reflex as rx
import plotly.graph_objects as go

import numpy as np
np.random.seed(1)

class MapState(rx.State):
    fig: go.Figure = go.Figure()
    colors: List[str] = ['#a3a7e4'] * 100
    size: List[int] = [10] * 100

    def load_map(self):
        x = np.random.rand(100)
        y = np.random.rand(100)
        self.fig = go.Figure([go.Scatter(x=x, y=y, mode='markers')])

        scatter = self.fig.data[0]
        scatter.marker.color = self.colors
        scatter.marker.size = self.size
        self.fig.layout.hovermode = 'closest'


def map():
    return rx.vstack(
        rx.text("Map"),
        rx.plotly(data=MapState.fig, height="400px"),
        # Here you can see what the browser gets to render the figure using react-plotly
        rx.text(MapState.fig.to_string()),
    )

app = rx.App()
app.add_page(map, route="/map", on_load=MapState.load_map)

Note how the page has on_load=MapState.load_map to trigger the rendering of the data on the backend when the page first loads.

This is required because the state vars, like MapState.colors and MapState.size are unresolvable outside of an event handler, like load_map, since they are associated with the state for a particular browser tab, they cannot be resolved at module scope.

[masenf]

The second issue is that scatter.on_click is part of the Python plotly API, but these event handlers do not get serialized nor passed through when rendering the plot on the frontend via react-plotly.js.

In order to handle click events generated in the browser, we need to attach an on_click handler to rx.plotly itself. Currently there are a ton of event handlers that are available in the react-plotly.js library, but Reflex does not expose any of these in 0.4.4 (#2846).

Until Reflex exposes these event triggers however, we can subclass rx.components.plotly.plotly.Plotly and add them in ourselves.

from typing import Any, Dict, List

import reflex as rx
from reflex.components.plotly.plotly import Plotly


class PlotlyTriggers(Plotly):
    """Display a plotly graph with triggers."""

    def get_event_triggers(self) -> Dict[str, Any]:
        return {
            **super().get_event_triggers(),
            "on_click": lambda e0: [e0],
        }

plotly = PlotlyTriggers.create

This will allow the on_click event to be passed to the component... but it won't actually work yet, because the points cannot be JSON serialized as-is. So we need a bit of custom JS code to extract the data from the points that is serializable and relevant to our needs.

Add a _get_custom_code method to PlotlyTriggers that provides a means for extracting the correct keys:

    def _get_custom_code(self) -> str | None:
        return """
const extractPoints = (points) => {
    return points.map(point => {
        return {
            x: point.x,
            y: point.y,
            curveNumber: point.curveNumber,
            pointNumber: point.pointNumber,
            pointIndex: point.pointIndex,
            'marker.color': point['marker.color'],
            'marker.size': point['marker.size'],
            bbox: {
                x0: point.bbox.x0,
                x1: point.bbox.x1,
                y0: point.bbox.y0,
                y1: point.bbox.y1,
            }
        }
    })
}
"""

When using _get_custom_code, the given string will appear in the module scope of any page that includes this component.

Finally we need to replace the generic event arg definition ("on_click": lambda e0: [e0],) with one that calls the custom function. The _ClickEvent definition and annotation lets the reflex compiler know what fields are valid to access on the e0 Var.

class _ClickEvent(rx.Base):
    event: Any
    points: List[Dict]

The following signature function is used to provide a mapping from the javascript args (e0) to the event args that will be handled on the python side. In this case, we're mapping the _ClickEvent into two args: the unmodified MouseEvent, and the result of calling our custom extractPoints function on the points included in the click event. This means the on_click event handler in reflex should take events and points as args.

def _on_click_signature(e0: _ClickEvent) -> List[Any]:
    return [
        e0.event,
        rx.Var.create_safe(
            f"extractPoints({e0.points})",
        ),
    ]

Now update the get_event_triggers dict to reference the _on_click_signature instead of the lambda:

    def get_event_triggers(self) -> Dict[str, Any]:
        return {
            **super().get_event_triggers(),
            "on_click": _on_click_signature,
        }

[masenf]

With our new plotly_triggers module in place, let's rewrite the original code to use the new functionality.

    def update_point(self, event, points):
        # Get a reference to the scatter plot in the figure.
        scatter = self.fig.data[0]

        # Get mutable color and size lists for each point.
        c = list(scatter.marker.color)
        s = list(scatter.marker.size)

        # Update the point values.
        for point in points:
            print(f"Updating point {point['pointIndex']}")
            c[point["pointIndex"]] = '#bae2be'
            s[point["pointIndex"]] = 20

        # Assign the updated lists back to the plot.
        scatter.marker.color = c
        scatter.marker.size = s

        # Reassign the figure to the state trigger a frontend update.
        self.fig = self.fig

The original code used batch_updates, which is imported when rendering with the Python API, however this is not necessary in Reflex as the entire figure will be reserialized and sent to the frontend with each state update (in the future it might be possible to send only the delta, but it will still be batched automatically).

The last line self.fig = self.fig doesn't seem to do anything 🤔, but this actually tells the Reflex state mechanism that self.fig was modified and should be re-sent to the frontend. Without this, the plot won't update in the browser to reflect the new values that were just set.

Now, the MapState.update_point handler needs to be attached to the new plotly_triggers.plotly component via on_click.

from . import plotly_triggers

...
def map():
    return rx.vstack(
        rx.text("Map"),
        plotly_triggers.plotly(data=MapState.fig, height="400px", on_click=MapState.update_point),
        # Here you can see what the browser gets to render the figure using react-plotly
        rx.text(MapState.fig.to_string()),
    )
...

[masenf]

Complete Code

mkdir plotly-trigger-example
cd plotly-trigger-example
python3.11 -m venv VENV
. ./VENV/bin/activate
pip install reflex==0.4.4
reflex init --template blank

plotly_trigger_example/plotly_triggers.py

from typing import Any, List, Dict

import reflex as rx
from reflex.components.plotly.plotly import Plotly


class _ClickEvent(rx.Base):
    """Defines the shape of the click event passed to onClick by react-plotly.js."""
    event: Any
    points: List[Dict]


def _on_click_signature(e0: _ClickEvent) -> List[Any]:
    """Maps the onClick args from javascript to the event handled by the Reflex backend in python."""
    return [
        e0.event,
        rx.Var.create_safe(
            f"extractPoints({e0.points})",
        ),
    ]


class PlotlyTriggers(Plotly):
    """Display a plotly graph with triggers."""

    def get_event_triggers(self) -> dict[str, Any]:
        return {
            **super().get_event_triggers(),
            "on_click": _on_click_signature,
        }

    def _get_custom_code(self) -> str | None:
        return """
// extract only relevant data from the points to minimize payload size and workaround circular references
const extractPoints = (points) => {
    return points.map(point => {
        return {
            x: point.x,
            y: point.y,
            curveNumber: point.curveNumber,
            pointNumber: point.pointNumber,
            pointIndex: point.pointIndex,
            'marker.color': point['marker.color'],
            'marker.size': point['marker.size'],
            bbox: {
                x0: point.bbox.x0,
                x1: point.bbox.x1,
                y0: point.bbox.y0,
                y1: point.bbox.y1,
            }
        }
    })
}
"""


plotly = PlotlyTriggers.create

plotly_trigger_example/plotly_trigger_example.py

from typing import List

import reflex as rx
import plotly.graph_objects as go

import numpy as np
np.random.seed(1)

from . import plotly_triggers


class MapState(rx.State):
    fig: go.Figure = go.Figure()
    colors: List[str] = ['#a3a7e4'] * 100
    size: List[int] = [10] * 100

    def load_map(self):
        x = np.random.rand(100)
        y = np.random.rand(100)
        self.fig = go.Figure([go.Scatter(x=x, y=y, mode='markers')])

        scatter = self.fig.data[0]
        scatter.marker.color = self.colors
        scatter.marker.size = self.size
        self.fig.layout.hovermode = 'closest'

    def update_point(self, event, points):
        # Get a reference to the scatter plot in the figure.
        scatter = self.fig.data[0]

        # Get mutable color and size lists for each point.
        c = list(scatter.marker.color)
        s = list(scatter.marker.size)

        # Update the point values.
        for point in points:
            print(f"Updating point {point['pointIndex']}")
            c[point["pointIndex"]] = '#bae2be'
            s[point["pointIndex"]] = 20

        # Assign the updated lists back to the plot.
        scatter.marker.color = c
        scatter.marker.size = s

        # Reassign the figure to the state trigger a frontend update.
        self.fig = self.fig


def map():
    return rx.vstack(
        rx.text("Map"),
        plotly_triggers.plotly(data=MapState.fig, height="400px", on_click=MapState.update_point),
        # Here you can see what the browser gets to render the figure using react-plotly
        rx.text(MapState.fig.to_string()),
    )

app = rx.App()
app.add_page(map, route="/map", on_load=MapState.load_map)

Screen.Recording.2024-03-12.at.12.16.50.mov

[rohitsathish]

@masenf thanks for laying this all out! But it doesn't seem very practical at the moment.

Is there a more direct integration of click and hover events for reflex in the pipeline? Thanks

[masenf]

@rohitsathish yeah this is kind of a hack. This code essentially needs to be integrated into the built in plotly component so it can be more easily used.

[rohitsathish]

@masenf could we create an issue/feature request for this?

[Ernelene]

Is there a better/easier way to implement this now with the plotly updates in version 0.5.3?

[picklelo]

@Ernelene we've added many of these as event triggers in rx.plotly now: https://reflex.dev/docs/library/graphing/other/plotly/#api-reference