Bring Drag & Drop to Dash with Dashboard Engine. 💫 Learn how at our next webinar!

New tab keeps popping up for new graphs when clicking on the drop-down menu

Hi there, I am new with Dash. So I’ve built a simple bar chart and a drop-down menu in my dash. The bar chart will change based on the selected item in drop down, which means when I choose a different item in drop down, the bar chart will change to a different bar chart. And I always open my dash on google chrome.

My problem is there’s always a new tab pops up in my Internet Explorer(not even google chrome) to show the bar chart only when I choose a different item using the drop-down menu. Therefore, when I change three times in my drop-down menu, there’s 3 tabs pop up in my Internet Explorer. How could I disable pop up? I’ve tried to set the pop-up blocker to the highest level in my explorer, but didn’t seem to help.

Appreciate all your help!! This is driving me crazy…

Hi, I am having the same issue. Have you found a solution?

Hi @raimanc and welcome to the Dash community :slight_smile:

Can you share a minimal working example? It will make it easier to help with a solution.

Hi @AnnMarieW, and thanks a lot for the welcome!

I tried to explain the behaviour in this set of images. What happens is that at the change of the graph type from a px.sunburst to a different one, the new graph is duplicated and a new tab popup.

And after the first tab comes out, any new graph other than the sunburst pops up in a new tab, and they keep growing and growing in number.

Plotly version is 5.4.0

This is the function generating the graphs

def value_profile_plot(value = 'percent' , results=results, type = 'sun'):
    if value[:4] == 'Resp':
        results['percent'] = results[f'w Bayesian - {value.split(" ")[-1]}'] * 100
    else: results['percent'] = results[f'w Bayesian nu'] * 100

    if type == 'sun':
        fig = px.sunburst(results, path=['center', 'capital', results.index.str.replace(' ', '<br>')
                                         ], values = 'percent', color='capital', color_discrete_map=colorscale,
                          custom_data=[results.index, 'accuracy']
                          )

    elif type == 'pie':
        fig = px.bar(results, y='percent', 
                      labels={'w': 'Priority score ', 'index': ''},
                     custom_data=[results.index, 'accuracy'],
                     )
        fig.update_layout(margin=dict(l=5, r=50, t=40, b=40),
                          paper_bgcolor='rgba(0,0,0,0)',
                          height=1.6 * 380,
                          width=380 * 1.6, )
        fig.show()

    fig.update_traces(
        hovertemplate='<b>%{customdata[0]} </b> <br> Priority: %{value:.1f}%<br> uncertanty: %{customdata[1]:.1f}%')
    fig.update_traces(marker=dict(line=dict(width=2, color='white')))

    fig.update_layout(margin=dict(l=5, r=50, t=40, b=40),
                      paper_bgcolor='rgba(0,0,0,0)',
                      # height=1.6 * 380,
                      # width=380 * 1.6,
                      )
    return fig

and this is the callback

@app.callback(Output({"type": "bar", "index": 'resp'}, 'figure'),           ,
              [Input({"type": 'command-radio', "index": 'resp'}, 'children'),
               Input({"type": "pie_type", "index": 'resp'}, 'value')])
def update_need_table(resp, bar_type):
    return value_profile_plot(resp, type = bar_type)

I cannot see anything related to this strange behaviour, and I have tried other types of graphs with no problems.
So my guess is that there is something going on with the sunburst code?

Thanks a lot for the help and the enlistment

Ah Ha! :female_detective: Try deleting this line:

image

Ahaha!! Cannot believe it, sorry for the post xD
I was getting crazy xD Thanks for noticing it, I didn’t spot it completely

1 Like