Figure update opens a new tab

Dash Python
1

Hi, I have an app that I am still working on, and posted few questions about it before, and I have a couple of questions here:

1- Now I am at a stage where I get an input from the user, then creates a graph, everything works ok, except of that when the n_intervals kicks, it opens a new tab with the graph update and not updating the same tab, how this can be done please?
Keeping in mind that I want to the new tab and not in the same as the input, which raises a question, if this is achievable, and the user requests more than one report at the same time, will it override the tab that is already open or opens a new one? what about the updates, will each gets it update?

Here is part of the code that does the above

import dash
from dash import dcc, html, Input, Output, State, callback
import plotly.express as px


app = dash.Dash(__name__, suppress_callback_exceptions=True, title='Network Monitoring Dashboard')

app.layout = html.Div([
    html.H1('You can enter your filters here', className='text-center fs-1 text-primary'),
    dcc.Interval(
        id = 'Interval_component',
        interval = 5 *2000,
        n_intervals = 0
        ),
    html.H5('Enter the Source IP address here, or leave EMPTY for (any)', style={'margin-right':20}),
    dcc.Input(id="src_IP", type="text", placeholder="Source IP Address", debounce=False),
    html.Button(id='submit_btn', n_clicks=0, children='Submit'),
    html.Div(id='graph_container'),
])

@callback(
    Output('graph_container', 'children'),
    [State('src_IP', 'value'),
    Input('Interval_component', 'n_intervals'),
    Input('submit_btn', 'n_clicks')]
)
def Select_options(value1, value2, value3, intervals , n_click):
#    dataframe creation process and variables input 
    result = True
    result = df
    fig1 = px.bar(result,
                                      x='x_values', 
                                      )
    return fig1.show()

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

2- The

suppress_callback_exceptions=True

does not work, I keep getting error messages on the open main page, they are mainly errors, even though they are not affecting the output

3- When I generate a report, I get the message of

transferring from cdnjs.cloudflare.com…

what is this message? I am not using any external theme here

Thanks

2

Hi @arafeek

The fig1.show() will display the figure in a new tab

Try changing your callback to:

@callback(
    Output('graph_container', 'children'),   
    Input('Interval_component', 'n_intervals'),
    Input('submit_btn', 'n_clicks'),
    State('src_IP', 'value'),
)
def Select_options(intervals , n_click, value):
#    dataframe creation process and variables input     
    fig1 = px.bar(df,  x='x_values')
    return dcc.Graph(figure=fig1)

I’m not sure about the other error messages - can you give more information?

1 Like
3

Thanks AnnMarrie, The messages are not of a big deal, I just thought the suppress will prevent them from appearing.

Now, this change works but it shows the graph on the same page, I was wondering if I can have it in new tab, is it possible?

Also, what about the transferring from cloudflare while generating the graph?

4

The graph will show wherever you place it in the app.Layout. If you would like to place it in a different tab, you could use a dcc.Tab or a dbc.Tab component

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/tabs/

I haven’t seen the cloundflare message before. Could you please make a complete minimal example that I can run locally and see the same message?

5

Thanks, this is opening a tab inside the tab, I was looking for a new tab in the browser.

As for the submit and interval point mentioned above, the interval is not waiting for the submit to be kicked, there are two options here:
1- If I put the submit first and then the interval, the first time works ok, however the interval will keep updating the graph based on the input field, so if I delete that, then the graph will be empty, if I am still writing and the updates happen, then again will show an empty graph as the input is not complete, so the point here is there any way I can force the update (through the interval) to use the input used during the submit and not to keep reading the field? so the input will always remain the same, until a new submit is clicked.
2- If I put the interval before the submit, then the interval is dominating without the need for the submit

Finally, regarding the cloudflare, it will be a but hard to replicate with small dataset, it will need a fairly large dataset to be noticed, I have feeling that it is trying to download the external style sheet, but I have it disabled, so there shouldn’t be any.

As a test, I disabled my internet access and ran the application, the message changed to (looking up cloudflare) however the graph rendered without an issue, below are the two messages I get, the first with internet presence, and the second offline

Capture2

Capture

6

You can open a new browser window with html.A(target="_blank") to create a link for the user to click on to open a new browser window. Using a multi-page app you can pass the content of the dcc.Input as a variable in the URL to the new page.
You can find a minimal example here

This would also solve the timing issue of the interval.