Loading on content

Dash Python
1

IHi. I have small one-page dash app with plotly graphs and ag grid.

app.layout = html.Div([
    # link_div,
    dash.page_container
])

content of page:

dropdown = html.Div(
    children=[
        dcc.Dropdown(id='select', options=[...], multi=False )
    ], className='select-div'
)  

content = html.Div(
    children=[
        dbc.Row(children=dbc.Col(dcc.Graph(id='scatter'), width=12)),  # Plotly Scatter
        html.Div(children=[], id='ag-grid-div'),  #Ag-grid
    ],
    id="content",
    hidden=True,
)

layout = html.Div(
    children=[
        dbc.Row(
            children=[
                dbc.Col(dropdown, width="auto"),
            ],
        ),
        content,
        # dcc.Loading(
        #     type="default",
        #     children=content,
        #     className='report-loading'
        # ),
    ],
    className='container-fluid main-div',    
)

callback’s:

@callback(
    output=[Output("scatter", "figure"), Output("ag-grid-div", "children"),],
    inputs=[Input('select', 'value'),],
    prevent_initial_call=True
)
def update_layout(select):  
       return fig, grid

@callback(
    Output('ag-grid-div', 'children'),  
    [Input('scatter', 'relayoutData'),
     Input('scatter', 'selectedData')], 
    # prevent_initial_call=True
)
def update_grid(relayout_data, selected_data): 
        <<some logics for change grid data depend on selected time interval on graph...>>
    return grid

I want to use loading of content in layout, but the last callback causes the page to be updated. is it possible to leave loading on content and save the mapping of graph data on the grid without reloading the page state. thanks

2

Hello @AlesiaSel,

By “loading on content”, you mean you want to use dcc.Loading and only trigger it when first loading the app or the input dropdown?

3

I want to use loading only to load content when selecting a value from dropdown

dcc.Loading(
        type="default",
        children=content,
        className='report-loading'
        ),

but so that when the relayout data changes when the graph zooms, the content does not reload again, but only the aggrid data changes, that is, the behavior if the layout is not loading of content, but just content.

that is, if I select a value from dropdown - loading of content, and only the next time I selected a different value was loading. but if something in the content changes, loading did not work.
in my code - second callback trigger loading of content .
How to fix it?
and one more thing, when the page is loaded for the first time, loading also appears, which should not be. What am I missing and doing the wrong thing

4

Hi @AlesiaSel

You will be able to do this in the next Dash release (2.17.0) :slight_smile:

The second callback should just update the grid and rowData rather than sending the whole grid back as children Then you will be able to trigger the dcc.Loading based on the grid id and the rowData prop.

5

grid is missing at the initial stage, and if you change only raw data in this implementation, an error occurs when there is no id in layout.
dropdown contains the name of the file that is used to build both the grid and the graph

6

Why don’t you load the grid component in the app.layout like you do with the dcc.Graph? Then the id would exist.

Are you trying to avoid showing the loading spinner for the short time it takes to update the grid with the data selected from the figure? If so, you will be able to use the delay_show prop in the next release.

You could also check out this way of filtering the grid with a figure:

7

I load the grid and graph fig when selecting a value from dropdown, as indicated by the first callback. or do you suggest adding an empty grid immediately? I think this is not a good option.

8

You are loading the figure. The dcc.Graph with the id is in the layout


        dbc.Row(children=dbc.Col(dcc.Graph(id='scatter'), width=12)),  # Plotly Scatter

However, the grid is not in the layout - it’s only a div.


        html.Div(children=[], id='ag-grid-div'),  #Ag-grid
  
)

You could put th grid in the layout like this:


        html.Div(children=dag.AgGrid(id="grid"),  #Ag-grid

Then in the callbacks, only update the info that changes when the inputs change such as the rowData etc.

9

I’ll try it now. I didn’t think about it

10

It’s not working. this change leads to incorrect formatting of the grid, since initially relayoutData is None, None. and when you add loading, loading does not appear, but another problem arises: The zoom of the graph updates the page anyway, for a couple of seconds it disappears and will be replaced

11

You can check for None and return dash.no_update
In the next release of dash (v 2.17) you will be able to set the delay_show prop to prevent the spinner from showing for a short time.

12

I need the value None in the relay out Data to return the original grid appearance if I remove the graph zoom

13

I need to implement this now somehow, without waiting for the next release. thanks