Dash-Cytoscape callbacks not firing

Question

I'm trying to take advantage of Dash-Cytoscape callbacks, and I'm following this tutorial. However, no matter what I seem to do, it doesn't seem to call the callback. Below I have provided portions of my code. I have extensively tested the rest of the code, so I know the issue is somewhere in here.

import json
from dash import Dash, html, Input, Output, callback
import dash_cytoscape as cyto

def begin_render():
    app.layout = html.Div([
        cyto.Cytoscape(
            id="cytoscape",
            layout={"name": "preset"},  # "preset" to use the pos coords
            elements=get_elems(G),
            stylesheet=default_stylesheet,
            style={"width": "100%", "height": "800px"},
        ),
        html.Pre(id='cytoscape-tapNodeData-json', style=styles['pre'])
    ])

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

@callback(
    Output('cytoscape-tapNodeData-json', 'children'),
    Input('cytoscape', 'tapNodeData')
)
def displayTapNodeData(data):
    return json.dumps(data, indent=2)

I have verified that the Pre shows up on the screen by directly editing the HTML in the inspector, so I know I should be seeing something if it works. Additionally, I have tried just returning a string in the displayTapNodeData function to verify that it isn't just return nothing.

Answer 1

You're starting the app before you register the callback:

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

@callback(
    Output('cytoscape-tapNodeData-json', 'children'),
    Input('cytoscape', 'tapNodeData')
)
def displayTapNodeData(data):
    return json.dumps(data, indent=2)

Code after app.run(debug=True) will never be executed.

So it should look more like this:

@callback(
    Output('cytoscape-tapNodeData-json', 'children'),
    Input('cytoscape', 'tapNodeData')
)
def displayTapNodeData(data):
    return json.dumps(data, indent=2)

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