UI text doesn't update after state variables are updated

[mashirafarid]

Hi there, I'm having trouble trying to update my web app's UI after some state variables are changed. The app uses a VTab component, with the first tab containing a form that needs to be filled out, and the second tab containing the results of various calculations based on the form inputs. In the first tab, when the submit button is clicked, the form inputs are validated, then switches to the second tab, which should show a VProgressCircular with some information on the current calculation being run. Once the calculations are complete, the results should be shown on this second tab. Here is a simplified version of my code:

UI

def parameters(ctrl):
    form()
    # submit params for calculation
    with vuetify3.VContainer(classes="my-2"):
        with vuetify3.VCol(classes="d-flex flex-column justify-end pa-0"):
            vuetify3.VBtn(
                "Calculate",
                value="calculate",
                type="submit",
                click=ctrl.submit_parameters,
            )

def display_results():
    # if results are being calculated, show progress
    with vuetify3.VContainer(v_show="results_loading"):
        vuetify3.VProgressCircular(indeterminate=True)
        with vuetify3.VContainer():
            html.Div( "{{results_status}}") # this doesn't update before each calc
        
    # once results are ready, show them
    with vuetify3.VContainer(v_show="!results_loading"):
       # these don't update after their corresponding calc is run
        with vuetify3.VRow():
            html.Div( "{{result_1}}")
        with vuetify3.VRow():
            html.Div( "{{result_2}}")
        with vuetify3.VRow():
            html.Div( "{{result_3}}")
        with vuetify3.VRow():
            html.Div( "{{result_4}}")

def drawer(ctrl):
    with vuetify3.VTabs(v_model=("tab", "parameters")):
        vuetify3.VTab(
            "Parameters",
            value="parameters",
            readonly=True,
        )
        vuetify3.VTab(
            "Results",
            value="results",
            readonly=True,
        )
    with vuetify3.VTabsWindow(v_model="tab"):
        with vuetify3.VTabsWindowItem(value="parameters"):
            parameters(ctrl)
        with vuetify3.VTabsWindowItem(value="results"):
            display_results()

Main

def initialize(server):
    state, ctrl = server.state, server.controller

     # calc_2, calc_3 and calc_4 have the same structure as calc_1
    async def calc_1():
        with state:
            state.results_status = "Running calc 1"
        result_1 = get_result_1(state)
        with state:
            state.result_1 = result_1

    @asynchronous.task
    async def submit_parameters():
        # verify that all inputs are valid
        try:
            paramater_validation(state)
        except Exception as e:
            with state:
                pass
            return
        # change tab to results tab
        with state:
            state.results_loading = True
            state.tab = "results"
        await calculate_results()
        with state:
            state.results_loading = False

    async def calculate_results():
        await asyncio.sleep(0.01)
        # run calculations
        batch = asyncio.gather(calc_1(), calc_2())
        await batch
        # need calc_1 and calc_2 to finish before running rest of the calcs
        calc_3()
        calc_4()

    def ui_setup():
        with SinglePageWithDrawerLayout(server, width=450) as layout:
            # Theme defaults to dark mode
            layout.root.theme = "dark"
            # Drawer
            with layout.drawer:
                ctrl.submit_parameters = submit_parameters
                drawer(ctrl)
            # Main content
            with layout.content:
                with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
                    html_view = paraview.VtkRemoteLocalView(
                        simple.GetRenderView() if simple else None,
                        mode="remote",
                        namespace="view",
                    )
            # Footer
            layout.footer.hide()
    
    ui_setup()

I've been able to validate and switch the tabs with no issues, but the UI doesn't seem to update when the information regarding the current calculation and the final result is changed in state. How can I achieve this?

[jourdain]

You need to run calc_* as task or await them. Otherwise they never really get executed.

[mashirafarid]

Do you mean like this?

async def calculate_results():
        await asyncio.sleep(0.01)
        # run calculations
        batch = asyncio.gather(calc_1(), calc_2())
        await batch
        # need calc_1 and calc_2 to finish before running rest of the calcs
        await calc_3()
        await calc_4()

I've tried this, and using print statements within the functions show that they are running, however the UI still doesn't update. If I refresh the page after the calculations have completed, then the UI updates.

[jourdain]

While I could understand that some update don't show up right away because the server is busy, the UI should converge at the end without any reload.

Unless you did not noticed errors at startup? Meaning the UI is trying to display variables that have not been defined ahead of time.

[mashirafarid]

Meaning the UI is trying to display variables that have not been defined ahead of time.

This was it, and fixed most of the issues, thanks! However, even after defining state.results_status at startup, when the calculations are running (which use ParaView and normally take a few minutes), the updates to this variable are not shown in the UI. Why is this different to the result variables, which are initialised and updated in state in the same way?

[jourdain]

So to fix the remaining issue, you can use the same thing as we do here with await self.server.network_completion.