Initail callback of div element not triggred why?

Why the initial callback of div does not get triggred??


from dash import Dash
from dash.dependencies import Input, Output, State
import dash_core_components as dcc
import dash_html_components as html
from datetime import datetime
import time

available_indicators = ['Nagpur', 'Mumbai', 'Chennai', 'Delhi', 'Agra', 'Pune']
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = Dash(__name__, external_stylesheets=external_stylesheets)

def create_pane(n):
    filter_options = []
    import time
    time.sleep(2)
    
    if n != None:
        p = n.lower()
        for i in available_indicators:
            if p[0] in i:
                filter_options.append(i)
            else:
                continue
    else:
        filter_options = available_indicators

    pane = html.Div(children=[
            dcc.Dropdown(
                id='filter',
                options=[{'label': i, 'value': i} for i in filter_options],
                value=n
            )
    ])

    return pane


app.layout = html.Div(
        [
            # html.Div(children='Agra', id="temp"),
            html.Div(children="hello", id="mock-signal"), #style={'display': 'none'}),
            html.Div(children=create_pane(None), id="mock-filterpane"),
            html.Div(children=[], id="mock-bullet-chart"),
            html.Div(dcc.Loading(debug = True,
            fullscreen=True, children=html.Div(children=[], id="mock-revenue-graph"))),
            html.Div(children=[], id="mock-revenue-map"),
        ])

@app.callback(
    [
        Output("mock-signal", "children"), 
        Output("mock-filterpane", "children")
    ],
    [Input("filter", "value")], 
    prevent_initial_call=False)
def first_callback(n):  
    print("\n\nfirst_callback triggered")
    print(n)  
    dropdown = create_pane(n)
    return ['signal', dropdown]


@app.callback(
    Output("mock-bullet-chart", "children"), 
    [
        Input("mock-signal", "children"),
        # Input("filter", "value")
    ], 
    # [State("filter", "value")], 
    prevent_initial_call=False)
# def bullet_callback(signal, value):
def bullet_callback(value):
    print("bullet_callback triggered")
    val = "Value for mock-bullet-chart is ->" + str(value)
    child = html.H3(val)
    return child

@app.callback(
    Output("mock-revenue-graph", "children"), 
    [
        # Input("mock-signal", "children"),
        Input("filter", "value")
    ], 
    # [State("filter", "value")], 
    prevent_initial_call=False)
# def graph_callback(signal, value):
def graph_callback(value):
    print("graph_callback triggered")
    import time
    time.sleep(2)
    val = "Value for mock-revenue-graph is ->" + str(value)
    child = html.H3(val)
    return child

@app.callback(
    Output("mock-revenue-map", "children"), 
    [
        # Input("mock-signal", "children"),
        Input("filter", "value")
    ], 
    # [State("filter", "value")], 
    prevent_initial_call=False)
# def map_callback(signal, value):
def map_callback(value):
    print("map_callback triggered")
    val = "Value for mock-revenue-map is ->" + str(value)
    child = html.H3(val)
    return child



if __name__ == '__main__':
    # layout(app)
    app.run_server(debug=True)

I’m not sure if I understand your question, but you are assigning the word “signal” to the id=“mock-signal” in the first output of the callback, then the word “Hello” is replaced by “signal”

what i want to understand is why the callback of mock-signal does not triggered twice on page refresh. first due to initail callback due dash app loading and other due to first_callback(n), but when i run the above code callback is triggered due to first_callback(n) even though prevent_initial_call is set to False.

When you run the above code map_callback(value), graph_callback(value) are called twice once due to initial load of app and other due to setting of mock-signal children to “signal”, but thats not the case with bullet_callback(value) why??