How to re-run for loop and update plots with new simulation values

[raulpedrosacabello1]

Good morning,
I am creating an app in which I need to iterate through the list plots_selected_sobolIndices that contains:

plots_selected_sobolIndices = [{'id': 1, 'type': 'Sobol Indices', 'variables': 'PC 1', 'graphicType': 'Plot Bar', 'param': '', 'spaceData': '', 'dataType': '', 'xAxis': '', 'yAxis': '', 'zAxis': '', 'dimensionParameter': '', 'height': '30%', 'width': '30%'}, {'id': 2, 'type': 'Sobol Indices', 'variables': 'PC 2', 'graphicType': 'Plot Pie', 'param': '', 'spaceData': '', 'dataType': '', 'xAxis': '', 'yAxis': '', 'zAxis': '', 'dimensionParameter': '', 'height': '30%', 'width': '30%'}]

Within this iteration, I check some conditions, and if they are met, I enter a function where I pass its variables, for example:

figures = simulation_act.plots.create_plot_sobol(simulation_act.nParams,simulation_act.sobol,'PC 1', 'Plot Pie')

When simulation_act was not a variable, it worked correctly. The problem now is that the values of simulation_act change when I change the simulation to display, but the values stay from the first simulation.

I need that when I modify the simulation, and the values of simulation_act change, the for loop should be iterated again with the new values, and it should render the plots with the new values.

The code where I do the for loop and have the conditions is the following.

with vuetify.VCol(v_for="plot_act, idx in plots_selected_sobolIndices", key="idx",                         
                                classes="d-flex justify-center align-center",
                                style = {
                                            "max-width": "50%" if state.size_plot == "50%" else "47%" ,  # Condicional
                                            "min-width": "50%" if state.size_plot == "50%" else "47%" ,  # Condicional
                                        } 
                                #style = "border: 2px solid #ccc; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); min-height: 350px; max-width: 90%; max-height: 350px; min-width: 90%; margin-top: 10px;; margin-bottom: 10px;"
                                #style="height:100%"
                                ):  
                                                        
                                #-------------
                                #SOBOL Indices - Plot Pie
                                #-------------
                                with vuetify.VContainer(v_if="plot_act.type === 'Sobol Indices' && plot_act.variables === 'PC 1' && plot_act.graphicType === 'Plot Pie' "):
                                    print("entra en #SOBOL Indices - Plot Pie")
                                    figures = simulation_act.plots.create_plot_sobol(simulation_act.nParams,simulation_act.sobol,'PC 1', 'Plot Pie')
                                    
                                    for fig in figures:                               
                                        figure = go.Figure(fig["figure"])
                                        trame_plotly.Figure(                                                        
                                            figure,                                                       
                                            style = {
                                                "border": "2px solid #ccc",
                                                "border-radius": "8px",
                                                "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.3)",
                                                "margin-top": "10px",
                                            "min-height": "295px",  # En caso de que necesites una variable dinámica aquí.
                                            "max-width": "97%",
                                            "max-height": "295px",  # En caso de que necesites una variable dinámica aquí.
                                            "min-width": "97%",    # Igualmente dinámico para el ancho.
                                            "margin-right": "1%", 
                                        } ) 

[jourdain]

Python code in the definition of the template is executed only once, so your condition in the style will only resolve once and never change.

To make it dynamic you need to write your expression in JavaScript like so

with vuetify.VCol(
    ...
    style=("`max-width: ${size_plot === '50%' ? '50%' : '47%'}; min-width: ${size_plot === '50%' ? '50%' : '47%'}; `",),
):

[raulpedrosacabello1]

Gracias Sebastien,

But the doubt I had is regarding that within the v_for, when entering the condition

with vuetify.VContainer(v_if="plot_act.type === 'Sobol Indices' && plot_act.variables === 'PC 1' && plot_act.graphicType === 'Plot Pie' "):
                                    print("entra en #SOBOL Indices - Plot Pie")
                                    figures = simulation_act.plots.create_plot_sobol(simulation_act.nParams,simulation_act.sobol,'PC 1', 'Plot Pie')
                                    
                                    for fig in figures:                               
                                        figure = go.Figure(fig["figure"])
                                        trame_plotly.Figure(                                                        
                                            figure,                                                       
                                            style = {
                                                "border": "2px solid #ccc",
                                                "border-radius": "8px",
                                                "box-shadow": "0 4px 12px rgba(0, 0, 0, 0.3)",
                                                "margin-top": "10px",
                                            "min-height": "295px",  # En caso de que necesites una variable dinámica aquí.
                                            "max-width": "97%",
                                            "max-height": "295px",  # En caso de que necesites una variable dinámica aquí.
                                            "min-width": "97%",    # Igualmente dinámico para el ancho.
                                            "margin-right": "1%", 
                                        } ) 

When I run the app for the first time, it does it correctly by taking the initial value of simulation_act, but when I modify the values ​​of simulation_act, it no longer updates the plots that come from figures = simulation_act.plots.create_plot_sobol(simulation_act.nParams,simulation_act.sobol,'PC 1', 'Plot Pie'). Is there a solution regarding this?

[jourdain]

yes, just keep in mind what I said before.

[raulpedrosacabello1]

But I'm not referring to the style condition, which when I go back to plots_selected_sobolIndices, and enter

figures = simulation_act.plots.create_plot_sobol(simulation_act.nParams,simulation_act.sobol,'PC 1', 'Plot Pie')

It takes the values ​​of simulation_act when I ran it for the first time, but not the updated values ​​when I changed simulation. If I always had the same simulation, when I go through plots_selected_sobolIndices again it works fine, but when I change simulation_act it doesn't take the new values.

The code is:

                        with vuetify.VCol(v_for="plot_act, idx in plots_selected_sobolIndices", key="idx",  ):  
                            with vuetify.VContainer(v_if="plot_act.type === 'Sobol Indices' && plot_act.variables === 'PC 1' && plot_act.graphicType === 'Plot Pie' "):
                                figures = simulation_act.create_plot_sobol(simulation_act.nParams,simulation_act.sobol,'PC 1', 'Plot Pie')
                            
                                for fig in figures:                               
                                    figure = go.Figure(fig["figure"])
                                    trame_plotly.Figure(figure) 

Thanks a lot

[jourdain]

Python code in the definition of the template is executed only once, ... only resolve once and never change.

Since for fig in figures: is Python, it will only execute once... So you need to write it in a way that the dynamic behavior is captured by the template definition.

[raulpedrosacabello1]

But with the same code, when simulation_act does not change and I add plots to plots_selected_sobolIndices, in the for me it goes through them and shows them. The problem is before this for of the plots, in

simulation_act.create_plot_sobol(simulation_act.nParams,simulation_act.sobol,'PC 1', 'Plot Pie')

It takes the simulation_act values ​​prior to the simulation change.

How can I modify the code to capture that I have changed simulation_act and be able to re-render this part of plot generation?

[jourdain]

each Figure as an update method so you can feed new data to it. Under the cover, it just update a state variable. see

[raulpedrosacabello1]

The problem is that each simulation has X different plots, which I collect with figures = simulation_act.create_plot_sobol('PC 1', 'Plot Pie'). When I start the app, I don't have any simulation selected, so since it is null I don't go through "for fig in figures". Then, depending on which simulation I select, I will have X plots that I will save in figures and then I will go through them in "for fig in figures". What I mean is that I don't have X fixed plots that I can, for example, create "ctrl.update_figure = plot1.update" per plot and update when the simulation changes.

For example, in this other piece of code where it is a fixed plot, I do update it and it works correctly:

        with vuetify.VRow(v_if=("switch_value",)):

            plot1 = trame_plotly.Figure(                
                figure=simulation_act.fig_scatter2_sel,
            )
            ctrl.update_figure = plot1.update

But in this case, how could I use the update method within a for, which has not been traversed from the beginning and which can have X plots depending on simulation_act?

[jourdain]

Like I said before, you need to design your template to be reactive to state change (v_for=). Then if you update the state from python when your data become available, everything will do what you want. There is nothing difficult in what you aim to do, but there is a design shift that is required which can be tricky for non web developers. While trame hide the "web boilerplate", it still embrace the design and architecture of any web application.

Keep in mind, that we offer professional support if you want to move faster on that topic.

[raulpedrosacabello1]

Thanks Sebastien for the reply.

Is there an example available showing the situation I have or documentation explaining how to adjust the template to adapt it?

[jourdain]

Are you asking how to update the state like below?

figure_id = Figure(...).key
state[figure_id] = Figure.to_data(new_plotly_fig)