'Plotly update customdata with dropdown button

I have a quick question: basically I have created a plot with some hover information and I have a dropdown button, where the user can chose from which dataframe (filtered or not) the plot is going to be based on. So i initiate my figure like so:

first_df = pd.DataFrame({'gene':['gene'+str(i) for i in range(10)],
                        'x':range(10),'y':range(10),'z':range(10),
                        'columnA':['info A '+str(i) for i in range(10)],
                        'columnB':['info B '+str(i) for i in range(10)]})
second_df = pd.DataFrame({'gene':['gene'+str(i) for i in range(10,20)],
                        'x':range(10,20),'y':range(10,20),'z':range(10,20),
                        'columnA':['info A '+str(i) for i in range(10,20)],
                        'columnB':['info B '+str(i) for i in range(10,20)]})
first_df_filtered = first_df.iloc[[0,2,4,6,8]]
second_df_filtered = second_df.iloc[[0,2,4,6,8]]

fig = go.Figure()

fig.add_scatter3d(x = first_df['x'], 
                y = first_df['y'], 
                z = first_df['z'],
                customdata = first_df[['columnA', 'columnB']], 
                hovertemplate = "<br>".join(["<b>%{text}</b><br>",
                                             "<i>info on y</i> = %{y:.2f}",
                                             "<i>info on x</i> = %{x:.2f}",
                                             "<i>info customdata 0</i> = %{customdata[0]}", 
                                             "<i>info customdata 1</i> = %{customdata[1]}"
                                            ]),
                text = first_df['gene'],
                mode='markers'
                )

fig.add_scatter3d(x = second_df['x'], 
                y = second_df['y'], 
                z = second_df['z'],
                customdata = second_df[['columnA', 'columnB']], 
                hovertemplate = "<br>".join(["<b>%{text}</b><br>",
                                             "<i>info on y</i> = %{y:.2f}",
                                             "<i>info on x</i> = %{x:.2f}",
                                             "<i>info customdata 0</i> = %{customdata[0]}", 
                                             "<i>info customdata 1</i> = %{customdata[1]}"
                                            ]),
                text = second_df['gene'],
                mode='markers'
                )

fig.update_layout(updatemenus=[
                                
                                #------------------------------------------------------------------
                                dict(
                                    active=0,
                                    y=0.5,
                                    buttons = list(
                                        [dict(label = 'No filter',
                                              method = 'update',
                                              args = [{'x': [first_df['x'], second_df['x']],
                                                       'y': [first_df['y'], second_df['y']],
                                                       'z': [first_df['z'], second_df['z']],
                                                       'text': [first_df['gene'], second_df['gene']],
                                                       'customdata[0]':[first_df['columnA'], second_df['columnA']],
                                                       'customdata[1]':[first_df['columnB'], second_df['columnB']],
                                                      },
                                                      ]),
                                         dict(label = 'Filter on',
                                              method = 'update',
                                              args = [{'x': [first_df_filtered['x'], second_df_filtered['x']],
                                                       'y': [first_df_filtered['y'], second_df_filtered['y']],
                                                       'z': [first_df_filtered['z'], second_df_filtered['z']],
                                                       'text': [first_df_filtered['gene'], second_df_filtered['gene']],
                                                       'customdata[0]':[first_df_filtered['columnA'], second_df_filtered['columnA']],
                                                       'customdata[1]':[first_df_filtered['columnB'], second_df_filtered['columnB']],
                                                      },
                                                    ]),
                                        ])
                                    ),
    
                    ])

When I click on the button 'No filter', all the information shown on the hoverbox for each point is correct, but when I click on the button 'Filter on' the information shown in the hoverbox for the customdata is not correct. However if I click again on the 'No filter' button the information is correct again. Here is a picture showing an example of my problem



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source