customize modebar

[Mahdis-z]

More explanation needs to be added to https://plot.ly/python/configuration-options/#remove-modebar-buttons to show:

• how to add buttons to modebar
• buttons' name:
  2D: "zoom2d", "pan2d", "select2d", "lasso2d", "zoomIn2d", "zoomOut2d", "autoScale2d", "resetScale2d",
  Cartesian: "hoverClosestCartesian", "hoverCompareCartesian",
  3D: "zoom3d", "pan3d", "resetCameraDefault3d", "resetCameraLastSave3d", "hoverClosest3d", "orbitRotation", "tableRotation",
  GEO: "zoomInGeo", "zoomOutGeo", "resetGeo", "hoverClosestGeo",
  Others: "toImage", "sendDataToCloud", "hoverClosestGl2d", "hoverClosestPie", "toggleHover", "resetViews", "toggleSpikelines", “resetViewMapbox"
• how to change their order

[adibiasio]

Is there currently a way to add custom modebar buttons in python? If not, will this be a feature added in the future?

[miliante]

I am also interested to know if there is a way to add custom modebar buttons in python. I have tried using the js way, even by using a custom js code as a string in 'click', but to no avail.
If not, is there a workaround? Ideally It should point to a python function, but I would content if I could add a js code somewhere.

[nicolaskruchten]

There is no way to add new buttons with custom Javascript to the modebar from Python at the moment, no.

[adibiasio]

@miliante I tried using Plotly with Python for a while, but ultimately switched over to Plotly JS. The JS version has more features and functionality in general. But if you have to use the python version then, like Nicolas mentioned, there isn't currently a way to do this. I'd recommend switching over to Plotly JS if possible.
There might be some way to interact with HTML buttons external to the plotly figure as a workaround, but that wouldn't yield the desired modebar functionality.

[miliante]

Thank you All. I figured as much. I tried everywhere to no avail.

@ad4437 Indeed it is much more feature rich, but for the moment I am stuck with Python. My JS knowledge is minimum to basic :( The outside buttons do work well and I managed that as a workaround as you mentioned, but it is not pretty.

[CmpCtrl]

I've been chasing this as well. As far as I can tell, the main limitation is that in generating the html string plotly.py dumps the config dictionary to json, which of course puts " " around all the fields. The issue is that plotly.js then interprets the "click": "javascript snippet" as a string instead of javascript. manually editing the html string to remove the double quotes works, at least in chrome.

I dont know much about javascript and especially plotly.js, but is it possible to add something there to interpret a string of .js as .js in the "click": argument for the custom button generation? i will post a question in the plotly.js repository as well.

[nicolaskruchten]

@CmpCtrl you're right about the mechanism here: Python strings are recorded as strings in the resulting output and Plotly.js doesn't (and will never) interpret strings as raw executable code. See below for some caveats.

If you could detail a bit more what you're trying to do exactly (what JS code do you want to run?) I might be able to suggest more ideas for you.

The caveats: there are some places in Plotly.js where Python can specify which JS code runs, notably in the way we handle layout.buttons. The way these work is that in Python you can specify an object which defines the name of the Plotly.js function to call, and its static arguments. This lets you build stuff like play/pause buttons which call Plotly.animate() etc. We could probably make modebar buttons work like this, but it's not clear if that would meet your needs.

cc @alexcjohnson

[CmpCtrl]

@nicolaskruchten Thanks for the follow up.

For my specific use case I am adding a modebar button to copy an image of the plot to the clipboard. I prefer the modebar buttons since they're nice and tidy. The config dictionary i'm passing into the plotly api is this (in json):

{
 "modeBarButtonsToAdd": [
  {
   "name": "Copy to Clipboard",
   "icon": {
    "path": "M102.17,29.66A3,3,0,0,0,100,26.79L73.62,1.1A3,3,0,0,0,71.31,0h-46a5.36,5.36,0,0,0-5.36,5.36V20.41H5.36A5.36,5.36,0,0,0,0,25.77v91.75a5.36,5.36,0,0,0,5.36,5.36H76.9a5.36,5.36,0,0,0,5.33-5.36v-15H96.82a5.36,5.36,0,0,0,5.33-5.36q0-33.73,0-67.45ZM25.91,20.41V6h42.4V30.24a3,3,0,0,0,3,3H96.18q0,31.62,0,63.24h-14l0-46.42a3,3,0,0,0-2.17-2.87L53.69,21.51a2.93,2.93,0,0,0-2.3-1.1ZM54.37,30.89,72.28,47.67H54.37V30.89ZM6,116.89V26.37h42.4V50.65a3,3,0,0,0,3,3H76.26q0,31.64,0,63.24ZM17.33,69.68a2.12,2.12,0,0,1,1.59-.74H54.07a2.14,2.14,0,0,1,1.6.73,2.54,2.54,0,0,1,.63,1.7,2.57,2.57,0,0,1-.64,1.7,2.16,2.16,0,0,1-1.59.74H18.92a2.15,2.15,0,0,1-1.6-.73,2.59,2.59,0,0,1,0-3.4Zm0,28.94a2.1,2.1,0,0,1,1.58-.74H63.87a2.12,2.12,0,0,1,1.59.74,2.57,2.57,0,0,1,.64,1.7,2.54,2.54,0,0,1-.63,1.7,2.14,2.14,0,0,1-1.6.73H18.94a2.13,2.13,0,0,1-1.59-.73,2.56,2.56,0,0,1,0-3.4ZM63.87,83.41a2.12,2.12,0,0,1,1.59.74,2.59,2.59,0,0,1,0,3.4,2.13,2.13,0,0,1-1.6.72H18.94a2.12,2.12,0,0,1-1.59-.72,2.55,2.55,0,0,1-.64-1.71,2.5,2.5,0,0,1,.65-1.69,2.1,2.1,0,0,1,1.58-.74ZM17.33,55.2a2.15,2.15,0,0,1,1.59-.73H39.71a2.13,2.13,0,0,1,1.6.72,2.61,2.61,0,0,1,0,3.41,2.15,2.15,0,0,1-1.59.73H18.92a2.14,2.14,0,0,1-1.6-.72,2.61,2.61,0,0,1,0-3.41Zm0-14.47A2.13,2.13,0,0,1,18.94,40H30.37a2.12,2.12,0,0,1,1.59.72,2.61,2.61,0,0,1,0,3.41,2.13,2.13,0,0,1-1.58.73H18.94a2.16,2.16,0,0,1-1.59-.72,2.57,2.57,0,0,1-.64-1.71,2.54,2.54,0,0,1,.65-1.7ZM74.3,10.48,92.21,27.26H74.3V10.48Z",
    "transform": "scale(0.12)"
   },
   "click": "function (gd) {Plotly.toImage(gd, { format: 'png', width: 2100, height: 900 }).then(async function (url) {try {const data = await fetch(url);const blob = await data.blob();await navigator.clipboard.write([new ClipboardItem({[blob.type]: blob})]);console.log('Image copied.');} catch (err) {console.error(err.name, err.message);}});}"
  }
 ]
}

I think that passing a function name and argument would be a good solution if we could then also get the script into the html with the post_script argument in pio.to_html() for instance. That would need some good documentation tho since its not real straightforward.

For now, my workaround is to use pio.to_html() to generate the html string with a place holder in the click field, which i then find and replace with the script above with no double quotes. Then save the string to a file, or serve it to the browser or whatever. This works fine for me, but it took a bit of work to figure out how to make it work, so its probably not as useful for new users, and i think that custom modebar buttons are a cool feature.

I realize there are security concerns with my initial suggestion in the plotly.js post as @alexcjohnson pointed out. Are there similar concerns here? In other words, is it necessary to generate to spec json, or can it be relaxed to include js? It seems like that isn't a requirement since the post_script argument already allows for it, and since its so easy to manipulate the html string after its generated (which is what lead me to ignore the other use cases of plotly.js in my first suggestion). My first thought here was to make a class for a modebar button that would serialize differently to not include double quotes on the click field (which i understand is not to the json spec). I wasn't clever enough to make that work though.

[nicolaskruchten]

Thanks for the explanation, that's helpful. Today your current post-processing approach would be my suggestion, so looks like you've at least got some path forward, awkward as it is :)

One idea that comes to mind which might cleanly address this situation and provide a path forward for Dash users as well @alexcjohnson @chriddyp is to define a new event that fires when modebar buttons are clicked, which receives as a parameter the name of the button. Then generic handlers could be added in e.g. Dash as a prop, in post_script in the .to_html() context and in the FigureWidget and everywhere else folks use Plotly figures, so implement totally custom modebar behaviours.

[bango123]

I also went down the rabbit hole of trying to add custom buttons to Plotly. Similar to what others are saying here, the buttons are really neat and convenient! Big caveat, this solution assumes you are working with Dash.

In dash you can load client side callbacks in javascript: https://dash.plotly.com/clientside-callbacks

Using this, I can create a callback which updates the Plotly config upon initialization with my custom "modeBarButtonsToAdd". So here is a code example:

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {
        create_modebar_buttons: function (graph_config){
            console.log('create_modebar_buttons');
            console.log(graph_config);

            graph_config.modeBarButtonsToAdd.push({
                name: 'autoscale2d-custom',
                title: 'Autoscale (custom)',
                icon: Plotly.Icons.autoscale,
                click: function(gd) {
                  Plotly.relayout(gd, {
                    'xaxis.range': [-3, 3],
                    'yaxis.range': [-3, 3]
                  });
                }
              });

            return graph_config
        }
    }
}