How to trigger a javascript function once an update completes

[ialbert]

I am trying to create a graph visualizer with py-shiny. PyShiny computes a value, a third-party library visualizes it. The challenge is to delay the visualization until the content is complete.

I am using a custom message sender in my computation once the value is computed:

await session.send_custom_message("trigger", 1)

coupled to

 
ui.tags.script(
        """
        $(function() {
            Shiny.addCustomMessageHandler("trigger", function(message) {
                render_graph();
            });
        });
        """),

Everything works basically, the problem being only that the content that my javascript sees is always a generation cycle behind. The trigger runs before the element is updated.

If I manually delay the function call by 250ms it works, but it feels a bad design to just wait on page without knowing how long.

Is there a way to trigger my function once the page has bene updated reactively.

[cpsievert]

Sounds like you might want to send the message once the reactive flush is complete?

https://shiny.posit.co/py/api/core/Session.html#shiny.session.Session.on_flushed

[ialbert]

Thank you, excellent. That did work.

For others reading this, basically, I used the following constructs. In the UI I have:

    ui.head_content(
        ui.tags.script(
            """
            $(function() {
                Shiny.addCustomMessageHandler("trigger", function(message) {
                    render_graph();
                });
            });
            """),
    ),

then in the server I do

async def trigger():
    await session.send_custom_message("trigger", 1)

session.on_flushed(trigger, once=True)

turns out the once=True was necessary so that it does not interfere with additional page-related functionality like zooming.