[Python] How to add a custom button in the ModeBar of a plotly graph using python dash?

I have this simple dash application that displays an image using plotly:

import dash
import plotly.express as px
from dash import html, dcc
from skimage import data

img = data.chelsea()
fig = px.imshow(img)

app = dash.Dash(__name__)

app.layout = html.Div(
[
dcc.Graph(id = "graph-pic", className="graph-pic", figure=fig)
]
)

if __name__ == "__main__":
app.run_server(debug=True,use_reloader=True)


I need to add a custom button to the graph's ModeBar. I know it's possible considering this documentation but the example doesn't include python.

I already have this JavaScript under an assets folder that creates the button for me. But how do I pass that config to my graph back in python?

var config = {
modeBarButtonsToAdd: [
{
name: 'button1',
icon: Plotly.Icons.pencil,
direction: 'up',
click: function(gd) {alert('button1')}
}]
}

Continue reading...