Toggle button works with delay - bug in args2 in updatemenus / buttons

[simotrone]

Hello,
I am using the updatemenus buttons and I found a bug in args2 option behavior - if I understood the feature from doc.

The issue is that the first click on the toggle button doesn't work.
From the second click, everything works as it should (on/off of the red vertical line).

import numpy as np
import plotly.graph_objects as go

data = dict(
    x = np.random.normal(2,0.4,400),
    y = np.random.normal(2,0.4,400)
)

scat = go.Scatter(
    x=data['x'],
    y=data['y'],
    mode="markers"
)
shape = dict(
    type='line',
    line=dict(color='red'),
    xref='x',
    x0=data['x'][5],
    x1=data['x'][5],
    yref='y domain',
    y0=0,
    y1=1
)
buttons = dict(
    type='buttons',
    buttons=[
        dict(
            label='Toggle',
            method='relayout',
            args=['shapes', [shape]],
            args2=['shapes', []]
        )
    ]
)
fig = go.Figure()
fig.add_trace(scat)
fig.update_layout(updatemenus=[buttons])
fig.show()

^^^
[edit] This is what I want. And it doesn't work well because it seems "forget" the first click on the button.

.
.
What follows are more information for dev about weird behaviours of buttons array:

As a bonus point, I noticed that if I add a button BEFORE the toggle button, the toggle button will work as expected.

buttons = dict(
    type='buttons',
    buttons=[
        dict(label='On',  method='relayout', args=['shapes', [shape]]),
        dict(label='Toggle', method='relayout', args=['shapes', [shape]], args2=['shapes', []] )
    ]
)

but if I put the code of the other button AFTER the toggle button ,the toggle button continues to have delay when clicked.

buttons = dict(
    type='buttons',
    buttons=[
        dict(label='Toggle', method='relayout', args=['shapes', [shape]], args2=['shapes', []] ),
        dict(label='On',  method='relayout', args=['shapes', [shape]])
    ]
)

I don't think this is expected.
I am using the 5.3.1 version and the bug is there on|offline.

[empet]

If you replace the button definition by:

buttons = dict(
    type='buttons',
    buttons=[
        dict(label='On',  method='relayout', args=[{'shapes': [shape]}]),
        dict(label='Toggle', method='relayout', args=[{"shapes": []}] )
    ]
)

do you get the expected behaviour?
For more buttons, see the last example in this notebook: https://chart-studio.plotly.com/~empet/15608.
It's not clear why you have defined args2.

[simotrone]

It's not clear why you have defined args2.

The first code snippet I wrote is what I want.

• I want only one button (I called it: "Toggle").
• I want it is a switch: clicking one time -> feature on, clicking another time -> feature off.

I use args2 because I got it is the way to have a toggle button. From docs:

args2
Parent: layout.updatemenus[].buttons[]
Type: list

Sets a 2nd set of args, these arguments values are passed to the Plotly method set in method when clicking this
button while in the active state. Use this to create toggle buttons.

[empet]

I never used args2, and there is no example in plotly docs to see how it works in a concrete example.
I think that args2 is meant as the args in a second or third button definition, but
you can get a better answer adressing this question (how args2 must be defined to work) on plotly.js

[simotrone]

A concrete example could be my first code snippet, if it worked properly . :-)

Why args2 should be ok in a not-the-first button definition?
In the doc I read about the option is there to implement the toggle behavior in a button (first click -> args are passed to, second click -> args2 are passed to).
How would you implement a toggle button otherwise?

Surely, I will check plotly.js, but I hope someone read about this bug and tell me toggle buttons and args2 in py.

[empet]

I found this example on SO: https://stackoverflow.com/questions/68894919/how-to-set-the-values-of-args-and-args2-in-plotlys-buttons-in-updatemenus

[simotrone]

Ok, reading that example I got it. Well, now it works! Thanks @empet

Solution for other readers: use the active attribute in buttons definition.
The code in my first snippet is right, but doesn't consider that active params has 0 as default value, so the button starts "active". The first click deactive it, the second active it -> so, the code draws the vertical line, and the third click deactivate the eyecandy.

So we have 2 solution:

1. change the order of the button args + args2 defintions. When the button appears, it is active (the default active=0) so "no shape". When user clicks, -> args2 comes.

buttons = dict(
    type='buttons',
    buttons=[
        dict(
            label='Toggle',
            method='relayout',
            args=['shapes', []],
            args2=['shapes', [shape]],
        ),
    ]
)

2. keep the current code (my first snippet) changing the active attribute:

buttons = dict(
    type='buttons',
    active=-1,
    buttons=[
        dict(
            label='Toggle',
            method='relayout',
            args=['shapes', [shape]],
            args2=['shapes', []],
        ),
    ]
)